Merge pull request #235 from raaymax/quickstart-tutorial

docs: added quickstart tutorial

apps/quickstart/main.py

@@ -0,0 +1,113 @@
+import streamsync as ss
+import plotly.graph_objects as go
+from sklearn.linear_model import LogisticRegression
+from sklearn.datasets import make_blobs
+
+COLOR = {
+    0: '#3c64fa',
+    1: '#00eba8',
+    2: '#5a677c',
+    3: '#ff8866',
+    4: '#d4b2f7',
+    5: '#c3e6ff',
+    6: '#045758',
+    7: '#001435',
+    8: '#ec3d10',
+    9: '#38006a'
+}
+
+def _line(x0, coef, intercept, c):
+        return (-(x0 * coef[c, 0]) - intercept[c]) / coef[c, 1]
+
+def update(state):
+    cluster_std = state['cluster_std']
+    multi_class = state['multi_class']
+    number_of_points = int(state['number_of_points'])
+    number_of_groups = int(state['number_of_groups'])
+    X, y = make_blobs(
+        n_samples=number_of_points,
+        n_features=2,
+        cluster_std=cluster_std,
+        centers=number_of_groups
+    )
+
+    clf = LogisticRegression(
+        solver="sag",
+        max_iter=1000,
+        random_state=42,
+        multi_class=multi_class
+    ).fit(X, y)
+
+    coef = clf.coef_
+    intercept = clf.intercept_
+    score = clf.score(X, y)
+
+    state["message"] = "training score : %.3f (%s)" % (score, multi_class)
+
+    data = []
+    for i in range(number_of_groups):
+        data.append(
+            go.Scatter(
+                x=X[y == i][:, 0],
+                y=X[y==i][:, 1],
+                mode='markers',
+                name='Group '+str(i),
+                hoverinfo='none',
+                marker=dict(
+                    color=COLOR[i],
+                    symbol='circle',
+                    size=10
+                )
+            )
+        )
+
+    for i in range(1 if number_of_groups < 3 else number_of_groups):
+        data.append(go.Scatter(
+            x=[-20, 20],
+            y=[
+                _line(-20, coef, intercept, i),
+                _line(20, coef, intercept, i)
+            ],
+            mode='lines', 
+            line=dict(color=COLOR[i], width=2),
+            name='Logistic Regression'
+        ))
+
+    layout = go.Layout(
+        width=700,height=700,
+        hovermode='closest', hoverdistance=1,
+        xaxis=dict(
+            title='Feature 1',
+            range=[-20,20],
+            fixedrange=True,
+            constrain="domain",
+            scaleanchor="y",
+            scaleratio=1
+        ),
+        yaxis=dict(
+            title='Feature 2',
+            range=[-20,20],
+            fixedrange=True,
+            constrain="domain"
+        ),
+        paper_bgcolor='#FFFFFF',
+        margin=dict(l=30, r=30, t=30, b=30),
+    )
+
+    fig = go.Figure(data=data, layout=layout)
+    state['figure'] = fig
+
+
+initial_state = ss.init_state({
+    "my_app": {
+        "title": "Logistic regression visualizer"
+    },
+    "message": None,
+    "figure": None,
+    "multi_class": "ovr",
+    "number_of_groups": 2,
+    "number_of_points": 50,
+    "cluster_std": 2,
+})
+
+update(initial_state)

apps/quickstart/requirements.txt

@@ -0,0 +1 @@
+scikit-learn==1.4.0

apps/quickstart/static/README.md

@@ -0,0 +1,13 @@
+# Serving static files
+
+You can use this folder to store files which will be served statically in the "/static" route.
+
+This is useful to store images and other files which will be served directly to the user of your application.
+
+For example, if you store an image named "myimage.jpg" in this folder, it'll be accessible as "static/myimage.jpg".
+You can use this relative route as the source in an Image component.
+
+# Favicon
+
+The favicon is served from this folder. Feel free to change it. Keep in mind that web browsers cache favicons differently
+than other resources. Hence, the favicon change might not reflect immediately.

apps/quickstart/ui.json

@@ -0,0 +1,192 @@
+{
+    "metadata": {
+        "streamsync_version": "0.3.0"
+    },
+    "components": {
+        "root": {
+            "id": "root",
+            "type": "root",
+            "content": {
+                "appName": "Hello"
+            },
+            "parentId": null,
+            "position": 0
+        },
+        "e8e4m9mx50wfpdty": {
+            "id": "e8e4m9mx50wfpdty",
+            "type": "page",
+            "content": {},
+            "parentId": "root",
+            "position": 0,
+            "handlers": {},
+            "visible": true
+        },
+        "g7hhwdug524j0fql": {
+            "id": "g7hhwdug524j0fql",
+            "type": "header",
+            "content": {
+                "text": "@{my_app.title}"
+            },
+            "parentId": "e8e4m9mx50wfpdty",
+            "position": 0,
+            "handlers": {},
+            "visible": true
+        },
+        "j8tmgh7pgdk1nzfb": {
+            "id": "j8tmgh7pgdk1nzfb",
+            "type": "columns",
+            "content": {},
+            "parentId": "7hlk8jwfhvz29rbc",
+            "position": 0,
+            "handlers": {},
+            "visible": true
+        },
+        "t3zfxwztd4cozu6v": {
+            "id": "t3zfxwztd4cozu6v",
+            "type": "column",
+            "content": {
+                "width": "0.5"
+            },
+            "parentId": "j8tmgh7pgdk1nzfb",
+            "position": 0,
+            "handlers": {},
+            "visible": true
+        },
+        "0vruexh3b8ajbuw9": {
+            "id": "0vruexh3b8ajbuw9",
+            "type": "column",
+            "content": {
+                "width": "1"
+            },
+            "parentId": "j8tmgh7pgdk1nzfb",
+            "position": 1,
+            "handlers": {},
+            "visible": true
+        },
+        "yb81pneakk4w7esg": {
+            "id": "yb81pneakk4w7esg",
+            "type": "sliderinput",
+            "content": {
+                "label": "Number of groups",
+                "minValue": "2",
+                "maxValue": "10",
+                "stepSize": "1"
+            },
+            "parentId": "t3zfxwztd4cozu6v",
+            "position": 0,
+            "handlers": {
+                "ss-number-change": "update"
+            },
+            "binding": {
+                "eventType": "ss-number-change",
+                "stateRef": "number_of_groups"
+            },
+            "visible": true
+        },
+        "27wp270aghglmgx2": {
+            "id": "27wp270aghglmgx2",
+            "type": "plotlygraph",
+            "content": {
+                "spec": "@{figure}"
+            },
+            "parentId": "0vruexh3b8ajbuw9",
+            "position": 0,
+            "handlers": {},
+            "visible": true
+        },
+        "b4ope7gynk5onxnq": {
+            "id": "b4ope7gynk5onxnq",
+            "type": "sliderinput",
+            "content": {
+                "label": "Number of points",
+                "minValue": "50",
+                "maxValue": "1000",
+                "stepSize": "1"
+            },
+            "parentId": "t3zfxwztd4cozu6v",
+            "position": 1,
+            "handlers": {
+                "ss-number-change": "update"
+            },
+            "binding": {
+                "eventType": "ss-number-change",
+                "stateRef": "number_of_points"
+            },
+            "visible": true
+        },
+        "v75sjhqjgpw0g0a7": {
+            "id": "v75sjhqjgpw0g0a7",
+            "type": "message",
+            "content": {
+                "message": "@{message}"
+            },
+            "parentId": "g7hhwdug524j0fql",
+            "position": 0,
+            "handlers": {},
+            "visible": "message"
+        },
+        "tnooah1ico3nylvu": {
+            "id": "tnooah1ico3nylvu",
+            "type": "dropdowninput",
+            "content": {
+                "label": "Type",
+                "options": "{\"ovr\": \"One vs Rest\", \"multinomial\": \"Multinomial\"}",
+                "cssClasses": ""
+            },
+            "parentId": "t3zfxwztd4cozu6v",
+            "position": 3,
+            "handlers": {
+                "ss-option-change": "update"
+            },
+            "binding": {
+                "eventType": "ss-option-change",
+                "stateRef": "multi_class"
+            },
+            "visible": true
+        },
+        "yfyr3y9xdllskii4": {
+            "id": "yfyr3y9xdllskii4",
+            "type": "sliderinput",
+            "content": {
+                "label": "Cluster deviation",
+                "minValue": "0",
+                "maxValue": "10",
+                "stepSize": "0.1"
+            },
+            "parentId": "t3zfxwztd4cozu6v",
+            "position": 2,
+            "handlers": {
+                "ss-number-change": "update"
+            },
+            "binding": {
+                "eventType": "ss-number-change",
+                "stateRef": "cluster_std"
+            },
+            "visible": true
+        },
+        "nfkazqjoivq5b4k9": {
+            "id": "nfkazqjoivq5b4k9",
+            "type": "button",
+            "content": {
+                "text": "Regenerate"
+            },
+            "parentId": "t3zfxwztd4cozu6v",
+            "position": 4,
+            "handlers": {
+                "ss-click": "update"
+            },
+            "visible": true
+        },
+        "7hlk8jwfhvz29rbc": {
+            "id": "7hlk8jwfhvz29rbc",
+            "type": "section",
+            "content": {
+                "title": ""
+            },
+            "parentId": "e8e4m9mx50wfpdty",
+            "position": 1,
+            "handlers": {},
+            "visible": true
+        }
+    }
+}

build.sh

@@ -24,8 +24,9 @@ poetry run  mypy ./src/streamsync/*.py
 rm -rf ./src/streamsync/app_templates/*
 cp -r ./apps/default ./src/streamsync/app_templates
 cp -r ./apps/hello ./src/streamsync/app_templates
+cp -r ./apps/quickstart ./src/streamsync/app_templates
 
 # PYTHON PACKAGE BUILD
 
 rm -rf ./dist/*
-poetry build
+poetry build

docs/docs/.vitepress/config.ts

@@ -55,6 +55,12 @@ export default {
           },
         ],
       },
+      {
+        text: "Tutorials",
+        items: [
+          { text: "Quickstart tutorial", link: "/quickstart-tutorial" },
+        ]
+      },
       {
         text: "Reference",
         items: [