initial commit

Dockerfile

@@ -0,0 +1,11 @@
+FROM python:3.9
+
+WORKDIR /code
+
+COPY ./requirements.txt /code/requirements.txt
+
+RUN pip install --no-cache-dir --upgrade -r /code/requirements.txt
+
+COPY . .
+
+CMD ["solara", "run", "pages", "--host=0.0.0.0", "--port", "7860"]

README.md

@@ -0,0 +1,33 @@
+---
+title: Drawdata Sklearn
+emoji: 🌍
+colorFrom: indigo
+colorTo: gray
+sdk: docker
+pinned: false
+license: mit
+---
+
+# drawdata - demo using solara
+
+[Drawdata](https://github.com/koaning/drawdata) is an ipywidget library build using [anywidget](https://github.com/manzt/anywidget).
+
+All ipywidgets (and also anywidget) run in the Jupyter notebook, but also in [Solara server](https://solara.dev/).
+
+Solara server can run Python code and notebooks, and display [regular widgets](https://solara.dev/docs/tutorial/ipywidgets),
+or for more production quality code, [solara components](https://solara.dev/docs/fundamentals/components).
+
+## Demo 1 - Original with classic widgets
+
+This demonstrates solara server can execute the ([almost unmodified](https://github.com/widgetti/solara/issues/539)) [notebook](https://github.com/probabl-ai/youtube-appendix/blob/main/04-drawing-data/notebook.ipynb).
+
+Since ipywidgets lacks lifetime management, the widgets in this tab are kept alive and reused when moved back to this tab (try drawing, and switch tabs).
+
+This demo shows how drawdata can be used exploring how different sklearn algorithm perform on datasets draw by hand ([YouTube video](https://www.youtube.com/watch?v=STPv0jSAQEk))
+
+
+## Demo 2 - Fancy demo using components
+
+For larger apps and dynamic UI's it pays off using [components](https://solara.dev/docs/fundamentals/components) and creating elements
+instead of directly creating widgets. This makes it possible to create very dynamic UIs (try changing the layout using the top right button in the app bar)
+and have proper life cycle management (widgets get cleaned up when changing tabs, freeing memory - very important in larger applications)

pages/00-readme.py

@@ -0,0 +1,20 @@
+import solara
+from pathlib import Path
+
+
+HERE = Path(__file__).parent
+
+
+@solara.component
+def Page():
+    md_text = (HERE.parent / "README.md").read_text()
+    # take out front matter
+    md_text = md_text.rpartition("---")[2]
+    solara.Markdown(md_text)
+    solara.Title("Draw data widget demo with Solara ☀️")
+
+
+
+@solara.component
+def Layout(children):
+    solara.AppLayout(children=children)

pages/01-original-with-widgets.ipynb

@@ -0,0 +1,127 @@
+{
+ "cells": [
+  {
+   "cell_type": "code",
+   "execution_count": 7,
+   "id": "eea9f1b8-4240-4a68-a412-2b4071b2c04a",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "from drawdata import ScatterWidget"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 8,
+   "id": "207dbcfd-e731-4758-8035-d1f429aa10d4",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "widget = ScatterWidget()"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 13,
+   "id": "b77030f4-c895-4a39-96ce-b79d6a8a6d69",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "import matplotlib.pyplot as plt\n",
+    "from IPython.core.display import HTML\n",
+    "from sklearn.linear_model import LogisticRegression\n",
+    "from sklearn.inspection import DecisionBoundaryDisplay\n",
+    "from sklearn.tree import DecisionTreeClassifier\n",
+    "\n",
+    "import matplotlib.pylab as plt \n",
+    "import numpy as np\n",
+    "import ipywidgets"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "b9d36c79-3d1d-4084-a1a6-43f3b95c06fe",
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "application/vnd.jupyter.widget-view+json": {
+       "model_id": "6b21ddf1e80a4a34a786547610d52aa0",
+       "version_major": 2,
+       "version_minor": 0
+      },
+      "text/plain": [
+       "HBox(children=(ScatterWidget(), Output()))"
+      ]
+     },
+     "execution_count": 17,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    "widget = ScatterWidget()\n",
+    "output = ipywidgets.Output()\n",
+    "\n",
+    "\n",
+    "@output.capture(clear_output=True)\n",
+    "def on_change(change):\n",
+    "    df = widget.data_as_pandas\n",
+    "    if len(df) and (df['color'].nunique() > 1):\n",
+    "        X = df[['x', 'y']].values\n",
+    "        y = df['color']\n",
+    "        display(HTML(\"<br><br><br>\"))\n",
+    "        fig = plt.figure(figsize=(12, 12));\n",
+    "        classifier = DecisionTreeClassifier().fit(X, y)\n",
+    "        disp = DecisionBoundaryDisplay.from_estimator(\n",
+    "            classifier, X, \n",
+    "            ax=fig.add_subplot(111),\n",
+    "            response_method=\"predict_proba\" if len(np.unique(df['color'])) == 2 else \"predict\",\n",
+    "            xlabel=\"x\", ylabel=\"y\",\n",
+    "            alpha=0.5,\n",
+    "        );\n",
+    "        disp.ax_.scatter(X[:, 0], X[:, 1], c=y, edgecolor=\"k\");\n",
+    "        # plt.title(f\"{classifier.__class__.__name__}\");\n",
+    "        disp.ax_.set_title(f\"{classifier.__class__.__name__}\");\n",
+    "        # plt.show();\n",
+    "        import solara\n",
+    "        solara.display(solara.FigureMatplotlib(fig))\n",
+    "widget.observe(on_change, names=[\"data\"])\n",
+    "on_change(None)\n",
+    "page = ipywidgets.HBox([widget, output])\n",
+    "page"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "5f9bb7ce-8a7f-4879-9ddf-5b256bb0ff64",
+   "metadata": {},
+   "source": [
+    "\n",
+    "p<br><br><br><br><br><br><br><br><br><br><br><br>"
+   ]
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "Python 3 (ipykernel)",
+   "language": "python",
+   "name": "python3"
+  },
+  "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
+   "name": "python",
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.11.6"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 5
+}

pages/02-fancy-with-solara.py

@@ -0,0 +1,120 @@
+from typing import List
+from traitlets import Dict
+import solara
+import solara.lab
+import matplotlib.pyplot as plt
+
+# needed for solara up to version 1.28
+plt.switch_backend("module://matplotlib_inline.backend_inline")
+# title = "solara"
+
+from sklearn.linear_model import LogisticRegression
+from sklearn.inspection import DecisionBoundaryDisplay
+from sklearn.tree import DecisionTreeClassifier
+
+import matplotlib.pylab as plt
+import numpy as np
+import pandas as pd
+
+from drawdata import ScatterWidget
+
+drawdata: solara.Reactive[List[Dict]] = solara.reactive([])
+
+
+@solara.component
+def ClassifierDraw(classifier, X, y, response_method="predict_proba", figsize=(8, 8)):
+    fig = plt.figure(figsize=figsize)
+    disp = DecisionBoundaryDisplay.from_estimator(
+        classifier,
+        X,
+        # not sure why this was needed, otherwise i get a blank plot
+        ax=fig.add_subplot(111),
+        response_method=response_method,
+        xlabel="x",
+        ylabel="y",
+        alpha=0.5,
+    )
+    disp.ax_.scatter(X[:, 0], X[:, 1], c=y, edgecolor="k")
+    plt.title(f"{classifier.__class__.__name__}")
+    plt.close()
+    solara.FigureMatplotlib(fig)
+
+
+@solara.component
+def DecisionTreeClassifierDraw(df):
+    criterion = solara.use_reactive("gini")
+    splitter = solara.use_reactive("best")
+    with solara.Row():
+        solara.ToggleButtonsSingle(value=criterion, values=["gini", "entropy", "log_loss"])
+        solara.ToggleButtonsSingle(value=splitter, values=["best", "random"])
+    X = df[["x", "y"]].values
+    y = df["color"]
+    classifier = DecisionTreeClassifier(criterion=criterion.value, splitter=splitter.value).fit(X, y)
+    ClassifierDraw(classifier, X, y, "predict_proba" if len(np.unique(df["color"])) == 2 else "predict")
+
+
+@solara.component
+def LogisticRegressionDraw(df):
+    penalty = solara.use_reactive("l2")
+    solver = solara.use_reactive("lbfgs")
+    l1_ratio = solara.use_reactive(0.5)
+    with solara.Row():
+        solara.ToggleButtonsSingle(value=penalty, values=["l1", "l2", "elasticnet", "none"])
+        solara.ToggleButtonsSingle(value=solver, values=["newton-cg", "lbfgs", "liblinear", "sag", "saga"])
+    if penalty.value == "elasticnet":
+        solara.FloatSlider("l1_ratio", value=l1_ratio, min=0, max=1, step=0.1)
+    X = df[["x", "y"]].values
+    y = df["color"]
+    try:
+        classifier = LogisticRegression(penalty=penalty.value, solver=solver.value, l1_ratio=l1_ratio.value).fit(X, y)
+    except ValueError as e:
+        solara.Error(str(e))
+    else:
+        ClassifierDraw(classifier, X, y, "predict_proba" if len(np.unique(df["color"])) == 2 else "predict")
+
+
+@solara.component
+def Page():
+    vertical = solara.use_reactive(True)
+    solara.AppBarTitle("Draw Data with Solara demo")
+    df = pd.DataFrame(drawdata.value) if drawdata.value else None
+
+    with solara.AppBar():
+        # TODO: doesn't work, ScatterWidget does not update when data is updated (read only?)
+        # solara.Button(icon_name="mdi-delete", on_click=lambda: drawdata.set([]), icon=True)
+        # demo how solara can dynamically change the layout
+        solara.Button(icon_name="mdi-align-vertical-top" if vertical.value else "mdi-align-horizontal-left", on_click=lambda: vertical.set(not vertical.value), icon=True)
+
+    # if solara.lab.theme.dark_effective:
+    #     plt.style.use('dark_background')
+    # else:
+    #     plt.style.use('default')
+    with solara.Column() if vertical.value else solara.Row():
+        # with solara, we don't just create the widget, but an element that describes it
+        # and instead of observe, we have on_<trait> callbacks
+        # Note: if we store the data in the reactive var (drawdata), we keep the drawing
+        # on hot reload.
+        ScatterWidget.element(data=drawdata.value, on_data=drawdata.set)
+        # downside of using elements and components: we cannot call method on the widget
+        # so we need to re-create the dataframe ourselves
+        with solara.lab.Tabs():
+            with solara.lab.Tab("classifier"):
+                if df is not None and (df["color"].nunique() > 1):
+                    with solara.Column(style={"max-height": "500px", "padding-top": "0px"}):
+                        with solara.lab.Tabs():
+                            with solara.lab.Tab("DecisionTreeClassifier"):
+                                DecisionTreeClassifierDraw(df)
+                            with solara.lab.Tab("LogisticRegressionDraw"):
+                                LogisticRegressionDraw(df)
+                else:
+                    with solara.Column(style={"justify-content": "center"}) if not vertical.value else solara.Row():
+                        solara.Info("Choose at least two colors to draw a decision boundary.")
+            with solara.lab.Tab("table view"):
+                if df is not None:
+                    with solara.FileDownload(data=lambda: df.to_csv(), filename="drawdata.csv"):
+                        solara.Button("download as csv", icon_name="mdi-download", outlined=True, color="primary")
+                    solara.DataFrame(df)
+
+
+# in the notebook:
+Page()

requirements.txt

@@ -0,0 +1,6 @@
+solara==1.28
+drawdata==0.3.0
+matplotlib
+scikit-learn
+pandas
+numpy