initial commit

.github/workflows/ploomber-cloud.yaml

@@ -0,0 +1,33 @@
+# based on https://docs.cloud.ploomber.io/en/latest/user-guide/github.html
+
+name: Ploomber Cloud
+
+on:
+  push:
+    branches:
+      # only deploy from the ploomber branch
+      - ploomber
+
+jobs:
+  deploy-to-ploomber-cloud:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v2
+      - name: Set up Python ${{ matrix.python-version }}
+        uses: actions/setup-python@v2
+        with:
+          python-version: '3.11'
+
+      - name: Install dependencies
+        run: |
+          python -m pip install --upgrade pip
+          pip install ploomber-cloud hatch
+          mkdir -p ploomber/wheels
+          (hatch build && cp dist/*.whl ploomber/wheels)
+
+      - name: Deploy
+        env:
+          PLOOMBER_CLOUD_KEY: ${{ secrets.PLOOMBER_CLOUD_KEY }}
+        run: |
+          (cd ploomber && ploomber-cloud deploy)

.gitignore

@@ -0,0 +1,7 @@
+# developer specific ignores should go to ~/.gitignore like editor specific files
+.DS_Store
+__pycache__
+**/*.pyc
+dist/
+build/
+ploomber/wheels

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 widgetti
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,60 @@
+# Install locally
+```
+pip install -e .
+```
+
+# Run locally
+
+```
+$ solara run solarathon.pages
+# add --no-open if you don't like opening the browser window automatically
+```
+
+# Deploy via Github Actions
+
+[Get your Ploomber API key](https://docs.cloud.ploomber.io/en/latest/quickstart/apikey.html) and set it as `PLOOMBER_CLOUD_KEY` in GitHub (under Settings->Secrets and Variables->Actions, and click "New repository secret")
+
+
+## Do only once
+
+ * [Sign up for Ploomber](https://www.platform.ploomber.io/register/)
+ * [Get the API key](https://docs.cloud.ploomber.io/en/latest/quickstart/apikey.html) from [The Ploomber dashboard](https://platform.ploomber.io/)
+
+
+```
+$ ploomber-cloud key YOURKEY
+$ (cd ploomber && rm ploomber-cloud.json && ploomber-cloud init)
+(add to git and commit)
+$ git add ploomber/ploomber-cloud.json
+$ git commit -m "ci: set ploomber id"
+$ git push origin master:ploomber
+```
+
+
+## Run to deploy a new version
+```
+$ git push origin master:ploomber
+# add --force if needed
+```
+
+# Other resources
+
+ * [Wanderlust app](https://github.com/widgetti/wanderlust)
+ * [Solara website](https://github.com/widgetti/solara/tree/master/solara/website)
+ * [Solara examples](https://solara.dev/examples)
+
+# Deploy manually
+
+(Not recommended)
+See https://docs.cloud.ploomber.io/en/latest/user-guide/cli.html for more details
+
+```
+$ pip install ploomber-cloud
+$ mkdir -p ploomber/wheels
+$ ploomber-cloud key YOURKEY
+$ (cd ploomber && ploomber-cloud init)
+(type y)
+# build the wheel
+$ (hatch build && cp dist/*.whl ploomber/wheels)
+$ (cd ploomber && ploomber-cloud deploy)
+```

ploomber/Dockerfile

@@ -0,0 +1,8 @@
+FROM python:3.11
+
+RUN pip install --no-cache-dir --upgrade pip
+RUN mkdir wheels
+COPY wheels/*.whl wheels
+RUN pip install wheels/*.whl
+
+ENTRYPOINT ["solara", "run", "solarathon.pages", "--host=0.0.0.0", "--port=80"]

ploomber/ploomber-cloud.json

@@ -0,0 +1,4 @@
+{
+    "id": "raspy-term-0543",
+    "type": "docker"
+}

pyproject.toml

@@ -0,0 +1,22 @@
+[build-system]
+requires = ["hatchling"]
+build-backend = "hatchling.build"
+
+[project]
+name = "solarathon"
+description = "Template project for Solarathon 2023"
+version = "0.0.1"
+dependencies = [
+    "solara==1.23.0",
+]
+
+[project.optional-dependencies]
+dev = [
+    "mypy",
+]
+
+[tool.hatch.build]
+include = [
+  "**/*.css",
+  "**/*.py",
+]

solarathon/assets/custom.css

@@ -0,0 +1,10 @@
+/* Example of how to change the color of the label in a v-input */
+
+.v-input label.v-label {
+    color: pink;
+ }
+
+ /* workaround for an issue in solara */
+ .solara-autorouter-content {
+    height: 100%;
+ }

solarathon/components/chat.py

@@ -0,0 +1,153 @@
+import uuid
+from typing import Callable, List, Literal, Optional, Union
+
+import solara
+from solara.components.input import use_change
+
+
+@solara.component
+def ChatMessage(
+    children: Union[List[solara.Element], str],
+    user: bool = False,
+    avatar: Union[solara.Element, str, Literal[False], None] = None,
+    name: Optional[str] = None,
+    color: Optional[str] = "rgba(0,0,0,.06)",
+    avatar_background_color: Optional[str] = None,
+    border_radius: Optional[str] = None,
+    notch: bool = False,
+):
+    msg_uuid = solara.use_memo(lambda: str(uuid.uuid4()), dependencies=[])
+    with solara.Row(
+        justify="end" if user else "start",
+        style={"flex-direction": "row-reverse" if user else "row", "padding": "5px"},
+    ):
+        if avatar is not False:
+            with solara.v.Avatar(color=avatar_background_color if avatar_background_color is not None else color):
+                if avatar is None and name is not None:
+                    initials = "".join([word[:1] for word in name.split(" ")])
+                    solara.HTML(tag="span", unsafe_innerHTML=initials, classes=["headline"])
+                elif isinstance(avatar, solara.Element):
+                    solara.display(avatar)
+                elif isinstance(avatar, str) and avatar.startswith("mdi-"):
+                    solara.v.Icon(children=[avatar])
+                else:
+                    solara.HTML(tag="img", attributes={"src": avatar, "width": "100%"})
+        with solara.Column(
+            classes=["chat-message-" + msg_uuid, "right" if user else "left"],
+            gap=0,
+            style="border-radius: "
+            + (border_radius if border_radius is not None else "")
+            + "; border-top-"
+            + ("right" if user else "left")
+            + "-radius: 0; padding: .5em 1.5em;",
+        ):
+            if name is not None:
+                solara.Text(name, style="font-weight: bold;", classes=["message-name", "right" if user else "left"])
+            solara.display(*children)
+        solara.Style(
+            ".chat-message-"
+            + msg_uuid
+            + "{"
+            + "--color:"
+            + color
+            + ";"
+            + """
+                    max-width: 75%;
+                    position: relative;
+                }"""
+            + ".chat-message-"
+            + msg_uuid
+            + """.left{
+                    border-top-left-radius: 0;
+                    background-color:var(--color);
+                }"""
+            + ".chat-message-"
+            + msg_uuid
+            + """.right{
+                    border-top-right-radius: 0;
+                    background-color:var(--color);
+                }"""
+        )
+        if notch:
+            solara.Style(
+                ".chat-message-"
+                + msg_uuid
+                + """.right{
+                    margin-right: 10px !important;
+                }
+                .chat-message-"""
+                + msg_uuid
+                + """.left{
+                    margin-left: 10px !important;
+                }
+                .chat-message-"""
+                + msg_uuid
+                + """:before{
+                        content: '';
+                        position: absolute;
+                        width: 0;
+                        height: 0;
+                        border: 6px solid;
+                        top: 0;
+                    }"""
+                + ".chat-message-"
+                + msg_uuid
+                + """.left:before{
+                        left: -12px;
+                        border-color: var(--color) var(--color) transparent transparent;
+                    }"""
+                + ".chat-message-"
+                + msg_uuid
+                + """.right:before{
+                        right: -12px;
+                        border-color: var(--color) transparent transparent var(--color);
+                    }
+                """
+            )
+
+
+@solara.component
+def ChatBox(children: List[solara.Element] = []):
+    children_with_key = []
+    for i, child in enumerate(children):
+        children_with_key.append(children[i].key("chat-message-" + str(i)))
+    solara.Column(style={"flex-grow": "1", "flex-direction": "column-reverse", "overflow-y": "auto"}, classes=["chat-box"], children=list(reversed(children_with_key)))
+
+
+@solara.component
+def ChatInfo(children: List[solara.Element] = []):
+    with solara.Row(style={"min-height": "1em"}):
+        if children != []:
+            solara.display(*children)
+
+
+@solara.component
+def ChatInput(
+    send_callback: Optional[Callable] = None,
+    disabled: bool = False,
+):
+    message, set_message = solara.use_state("")  # type: ignore
+
+    with solara.Row(style={"align-items": "center"}):
+
+        def send(*ignore_args):
+            if message != "" and send_callback is not None:
+                send_callback(message)
+                set_message("")
+
+        message_input = solara.v.TextField(
+            label="Type a message...",
+            v_model=message,
+            on_v_model=set_message,
+            rounded=True,
+            filled=True,
+            hide_details=True,
+            style_="flex-grow: 1;",
+            disabled=disabled,
+        )
+
+        use_change(message_input, send, update_events=["keyup.enter"])
+
+        button = solara.v.Btn(color="primary", icon=True, children=[solara.v.Icon(children=["mdi-send"])], disabled=message == "")
+
+        use_change(button, send, update_events=["click"])

solarathon/pages/__init__.py

@@ -0,0 +1,36 @@
+import solara
+
+# Declare reactive variables at the top level. Components using these variables
+# will be re-executed when their values change.
+sentence = solara.reactive("Solara makes our team more productive.")
+word_limit = solara.reactive(10)
+
+
+# in case you want to override the default order of the tabs
+route_order = ["/", "settings", "chat", "clickbutton"]
+
+@solara.component
+def Page():
+    with solara.Column(style={"padding-top": "30px"}):
+        solara.Title("Solarathon example project")
+        # Calculate word_count within the component to ensure re-execution when reactive variables change.
+        word_count = len(sentence.value.split())
+
+        solara.SliderInt("Word limit", value=word_limit, min=2, max=20)
+        solara.InputText(label="Your sentence", value=sentence, continuous_update=True)
+
+        # Display messages based on the current word count and word limit.
+        if word_count >= int(word_limit.value):
+            solara.Error(f"With {word_count} words, you passed the word limit of {word_limit.value}.")
+        elif word_count >= int(0.8 * word_limit.value):
+            solara.Warning(f"With {word_count} words, you are close to the word limit of {word_limit.value}.")
+        else:
+            solara.Success("Great short writing!")
+
+        solara.Markdown("*First exercise*: remove this text and write your own sentence.")
+
+
+@solara.component
+def Layout(children):
+    # this is the default layout, but you can override it here, for instance some extra padding
+    return solara.AppLayout(children=children, style={"padding": "20px"})