Add app

Dockerfile

@@ -0,0 +1,28 @@
+FROM python:3.11
+
+# Set up a new user named "user" with user ID 1000
+RUN useradd -m -u 1000 user
+
+# Switch to the "user" user
+USER user
+
+# Set home to the user's home directory
+ENV HOME=/home/user \
+	PATH=/home/user/.local/bin:$PATH
+
+# Set the working directory to the user's home directory
+WORKDIR $HOME/app
+
+# Try and run pip command after setting the user with `USER user` to avoid permission issues with Python
+RUN pip install --no-cache-dir --upgrade pip
+
+# Copy the current directory contents into the container at $HOME/app setting the owner to the user
+COPY --chown=user . $HOME/app
+
+COPY --chown=user requirements.txt .
+
+RUN pip install --no-cache-dir --upgrade -r requirements.txt
+
+COPY --chown=user app.py .
+
+ENTRYPOINT ["solara", "run", "app.py", "--host=0.0.0.0", "--port", "7860"]

README.md

@@ -6,6 +6,7 @@ colorTo: gray
 sdk: docker
 pinned: false
 license: mit
+app_port: 7860
 ---
 
 Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

app.py

@@ -0,0 +1,43 @@
+import solara
+import anywidget
+import traitlets
+import ipywidgets as widgets
+
+class CounterWidget(anywidget.AnyWidget):
+    _esm = """
+        import confetti from "https://esm.sh/[email protected]"
+        function render({ model, el }) {
+          let count = () => model.get("value");
+          let btn = document.createElement("button");
+          btn.innerHTML = `count is ${count()}`;
+          btn.classList.add("counter-btn");
+          btn.addEventListener("click", () => {
+            model.set("value", count() + 1);
+            model.save_changes();
+          });
+          model.on("change:value", () => {
+            btn.innerHTML = `count is ${count()}`;
+            confetti({ angle: (45*(count()-1)) });
+          });
+          el.appendChild(btn);
+        }
+        export default { render };
+    """
+    _css = """
+        .counter-btn {
+            background:blue;
+            padding:10px 50px;
+        }
+        .counter-btn:hover {
+            background-color:green;
+        }
+    """
+    value = traitlets.Int(0).tag(sync=True)
+
+@solara.component
+def Page():
+    counter = CounterWidget()
+    with solara.Column(style={"padding":"30px"}):
+        solara.Markdown("#Anywidgets+Solara")
+        counter.element()
+Page()

requirements.txt

@@ -0,0 +1,2 @@
+anywidge==0.9.9
+solara==1.32.0