solara-ui 1.42.0__py2.py3-none-any.whl → 1.43.0__py2.py3-none-any.whl

solara/website/pages/documentation/components/layout/columns_responsive.py

@@ -23,46 +23,44 @@ columns_xlarge = solara.reactive(1)
 
 @solara.component
 def Page():
-    with solara.VBox() as main:
-        with solara.Card("Controls"):
-            solara.Checkbox(label="Wrap").connect(wrap)
-            solara.Checkbox(label="Gutters").connect(gutters)
-            solara.Checkbox(label="Dense gutters").connect(gutters_dense)
-            solara.IntSlider("Children", max=20).connect(children_count)
+    with solara.Card("Controls"):
+        solara.Checkbox(label="Wrap").connect(wrap)
+        solara.Checkbox(label="Gutters").connect(gutters)
+        solara.Checkbox(label="Dense gutters").connect(gutters_dense)
+        solara.IntSlider("Children", max=20).connect(children_count)
 
-            solara.Select("columns default", values=[1, 2, 3, 4, 6, 12]).connect(columns_default)  # type: ignore
-            solara.Select("columns small", values=[1, 2, 3, 4, 6, 12]).connect(columns_small)  # type: ignore
-            solara.Select("columns medium", values=[1, 2, 3, 4, 6, 12]).connect(columns_medium)  # type: ignore
-            solara.Select("columns large", values=[1, 2, 3, 4, 6, 12]).connect(columns_large)  # type: ignore
-            solara.Select("columns xlarge", values=[1, 2, 3, 4, 6, 12]).connect(columns_xlarge)  # type: ignore
-        # taken from https://v2.vuetifyjs.com/en/styles/display/#display
-        solara.HTML(
-            "h2", unsafe_innerHTML=f"Current screensize is xsmall/default, each child is {columns_default.value} points wide", class_="ma-2 d-flex d-sm-none ma"
-        )
-        solara.HTML(
-            "h2", unsafe_innerHTML=f"Current screensize is small, each child is {columns_small.value} points wide", class_="ma-2 d-none d-sm-flex d-md-none"
-        )
-        solara.HTML(
-            "h2", unsafe_innerHTML=f"Current screensize is medium, each child is {columns_medium.value} points wide", class_="ma-2 d-none d-md-flex d-lg-none"
-        )
-        solara.HTML(
-            "h2", unsafe_innerHTML=f"Current screensize is large, each child is {columns_large.value} points wide", class_="ma-2 d-none d-lg-flex d-xl-none"
-        )
-        solara.HTML("h2", unsafe_innerHTML=f"Current screensize is xlarge, each child is {columns_xlarge.value} points wide", class_="ma-2 d-none d-xl-flex")
-        solara.Markdown("Change the screen size to see the effect of the different columns sizes.")
-        with solara.ColumnsResponsive(
-            default=columns_default.value,
-            small=columns_small.value,
-            medium=columns_medium.value,
-            large=columns_large.value,
-            xlarge=columns_xlarge.value,
-            wrap=wrap.value,
-            gutters=gutters.value,
-            gutters_dense=gutters_dense.value,
-        ):
-            for i in range(children_count.value):
-                solara.Text(f"{i}")
-    return main
+        solara.Select("columns default", values=[1, 2, 3, 4, 6, 12]).connect(columns_default)  # type: ignore
+        solara.Select("columns small", values=[1, 2, 3, 4, 6, 12]).connect(columns_small)  # type: ignore
+        solara.Select("columns medium", values=[1, 2, 3, 4, 6, 12]).connect(columns_medium)  # type: ignore
+        solara.Select("columns large", values=[1, 2, 3, 4, 6, 12]).connect(columns_large)  # type: ignore
+        solara.Select("columns xlarge", values=[1, 2, 3, 4, 6, 12]).connect(columns_xlarge)  # type: ignore
+    # taken from https://v2.vuetifyjs.com/en/styles/display/#display
+    solara.HTML(
+        "h2", unsafe_innerHTML=f"Current screensize is xsmall/default, each child is {columns_default.value} points wide", class_="ma-2 d-flex d-sm-none ma"
+    )
+    solara.HTML(
+        "h2", unsafe_innerHTML=f"Current screensize is small, each child is {columns_small.value} points wide", class_="ma-2 d-none d-sm-flex d-md-none"
+    )
+    solara.HTML(
+        "h2", unsafe_innerHTML=f"Current screensize is medium, each child is {columns_medium.value} points wide", class_="ma-2 d-none d-md-flex d-lg-none"
+    )
+    solara.HTML(
+        "h2", unsafe_innerHTML=f"Current screensize is large, each child is {columns_large.value} points wide", class_="ma-2 d-none d-lg-flex d-xl-none"
+    )
+    solara.HTML("h2", unsafe_innerHTML=f"Current screensize is xlarge, each child is {columns_xlarge.value} points wide", class_="ma-2 d-none d-xl-flex")
+    solara.Markdown("Change the screen size to see the effect of the different columns sizes.")
+    with solara.ColumnsResponsive(
+        default=columns_default.value,
+        small=columns_small.value,
+        medium=columns_medium.value,
+        large=columns_large.value,
+        xlarge=columns_xlarge.value,
+        wrap=wrap.value,
+        gutters=gutters.value,
+        gutters_dense=gutters_dense.value,
+    ):
+        for i in range(children_count.value):
+            solara.Text(f"{i}")
 
 
 __doc__ += apidoc(solara.ColumnsResponsive.f)  # type: ignore

solara/website/pages/documentation/components/layout/gridfixed.py

@@ -13,9 +13,7 @@ title = "GridFixed"
 
 @solara.component
 def Page():
-    with solara.VBox() as main:
-        colors = "green red orange brown yellow pink".split()
-        with solara.GridFixed(columns=3):
-            for color in colors:
-                ColorCard(color, color)
-    return main
+    colors = "green red orange brown yellow pink".split()
+    with solara.GridFixed(columns=3):
+        for color in colors:
+            ColorCard(color, color)

solara/website/pages/documentation/components/output/html.py

@@ -13,9 +13,7 @@ def Page():
     <li>Item 2
 </ul>
 """
-    with solara.VBox() as main:
-        solara.HTML(tag="div", unsafe_innerHTML=html)
-    return main
+    solara.HTML(tag="div", unsafe_innerHTML=html)
 
 
 __doc__ += apidoc(solara.HTML.f)  # type: ignore

solara/website/pages/documentation/components/page/head.py

@@ -6,13 +6,10 @@ from solara.website.utils import apidoc
 
 @solara.component
 def Page():
-    with solara.VBox() as main:
-        solara.Info("A Head component does not render somesome visual on the page, but it is used to avoid duplicate tags, such as titles.")
-        with solara.Head():
-            # title should always occur inside a Head component
-            solara.Title("Custom title")
-
-    return main
+    solara.Info("A Head component does not render somesome visual on the page, but it is used to avoid duplicate tags, such as titles.")
+    with solara.Head():
+        # title should always occur inside a Head component
+        solara.Title("Custom title")
 
 
 __doc__ += apidoc(solara.Head.f)  # type: ignore

solara/website/pages/documentation/examples/__init__.py

@@ -3,6 +3,10 @@ from solara.website.components import Gallery, MarkdownWithMetadata
 
 title = "Examples"
 
+pycafe_projects = [
+    "chatbot",
+]
+
 
 @solara.component
 def Page(route_external=None):
@@ -37,6 +41,11 @@ def Layout(children):
             with solara.Column(style={"max-width": "min(100%, 1024px)", "width": "100%"}):
                 if route_current.path != "/":
                     solara.Button("View source code on GitHub", icon_name="mdi-github-circle", href=github_url, class_="ma-2", target="_blank", text=True)
+                if route_current.path in pycafe_projects:
+                    pycafe_url = f"https://py.cafe/solara/{route_current.path}"
+                    solara.Button(
+                        "Run this example on PyCafe", icon_name="mdi-coffee-to-go-outline", href=pycafe_url, class_="ma-2", target="_blank", text=True
+                    )
                 if not hasattr(module, "Page"):
                     solara.Error(f"No Page component found in {module}")
                 else:

solara/website/pages/documentation/examples/ai/chatbot.py

@@ -5,9 +5,10 @@ A way to create a chatbot using OpenAI's GPT-4 API, utilizing their new API, and
 """
 
 import os
-from typing import List
+from typing import List, cast
 
-from openai import OpenAI
+from openai import AsyncOpenAI
+from openai.types.chat import ChatCompletionMessageParam
 from typing_extensions import TypedDict
 
 import solara
@@ -15,18 +16,33 @@ import solara.lab
 
 
 class MessageDict(TypedDict):
-    role: str
+    role: str  # "user" or "assistant"
     content: str
 
 
-if os.getenv("OPENAI_API_KEY") is None and "OPENAI_API_KEY" not in os.environ:
-    openai = None
-else:
-    openai = OpenAI()
-    openai.api_key = os.getenv("OPENAI_API_KEY")  # type: ignore
-
 messages: solara.Reactive[List[MessageDict]] = solara.reactive([])
 
+try:
+    import pycafe
+
+    OPENAI_API_KEY = pycafe.get_secret(
+        "OPENAI_API_KEY",
+        """We need an OpenAI API key to generate text.
+
+Go to [OpenAI](https://platform.openai.com/account/api-keys) to get one.
+
+Or read [this](https://www.rebelmouse.com/openai-account-set-up) article for
+more information.
+
+Or read more [about secrets on PyCafe](/docs/secrets)
+
+""",
+    )
+except ModuleNotFoundError:
+    OPENAI_API_KEY = os.getenv("OPENAI_API_KEY")
+
+openai = AsyncOpenAI(api_key=OPENAI_API_KEY) if OPENAI_API_KEY else None
+
 
 def no_api_key_message():
     messages.value = [
@@ -37,45 +53,44 @@ def no_api_key_message():
     ]
 
 
-def add_chunk_to_ai_message(chunk: str):
+@solara.lab.task
+async def promt_ai(message: str):
+    if openai is None:
+        no_api_key_message()
+        return
+
     messages.value = [
-        *messages.value[:-1],
-        {
-            "role": "assistant",
-            "content": messages.value[-1]["content"] + chunk,
-        },
+        *messages.value,
+        {"role": "user", "content": message},
     ]
+    # The part below can be replaced with a call to your own
+    response = await openai.chat.completions.create(
+        model="gpt-4-1106-preview",
+        # our MessageDict is compatible with the OpenAI types
+        messages=cast(List[ChatCompletionMessageParam], messages.value),
+        stream=True,
+    )
+    # start with an empty reply message, so we render and empty message in the chat
+    # while the AI is thinking
+    messages.value = [*messages.value, {"role": "assistant", "content": ""}]
+    # and update it with the response
+    async for chunk in response:
+        if chunk.choices[0].finish_reason == "stop":  # type: ignore
+            return
+        # replace the last message element with the appended content
+        delta = chunk.choices[0].delta.content
+        assert delta is not None
+        updated_message: MessageDict = {
+            "role": "assistant",
+            "content": messages.value[-1]["content"] + delta,
+        }
+        # replace the last message element with the appended content
+        # which will update the UI
+        messages.value = [*messages.value[:-1], updated_message]
 
 
 @solara.component
 def Page():
-    user_message_count = len([m for m in messages.value if m["role"] == "user"])
-
-    def send(message):
-        messages.value = [
-            *messages.value,
-            {"role": "user", "content": message},
-        ]
-
-    def call_openai():
-        if user_message_count == 0:
-            return
-        if openai is None:
-            no_api_key_message()
-            return
-        response = openai.chat.completions.create(
-            model="gpt-4-1106-preview",
-            messages=messages.value,  # type: ignore
-            stream=True,
-        )
-        messages.value = [*messages.value, {"role": "assistant", "content": ""}]
-        for chunk in response:
-            if chunk.choices[0].finish_reason == "stop":  # type: ignore
-                return
-            add_chunk_to_ai_message(chunk.choices[0].delta.content)  # type: ignore
-
-    task = solara.lab.use_task(call_openai, dependencies=[user_message_count])  # type: ignore
-
     with solara.Column(
         style={"width": "100%", "height": "50vh"},
     ):
@@ -90,6 +105,7 @@ def Page():
                     border_radius="20px",
                 ):
                     solara.Markdown(item["content"])
-        if task.pending:
+        if promt_ai.pending:
             solara.Text("I'm thinking...", style={"font-size": "1rem", "padding-left": "20px"})
-        solara.lab.ChatInput(send_callback=send, disabled=task.pending)
+            solara.ProgressLinear()
+        solara.lab.ChatInput(send_callback=promt_ai, disabled=promt_ai.pending)

solara/website/pages/documentation/examples/general/live_update.py

@@ -32,6 +32,7 @@ def LiveUpdatingComponent(counter):
     """Component which will be redrawn whenever the counter value changes."""
     fig, ax = plt.subplots()
     ax.plot(np.arange(10), np.random.random(10))
+    plt.close(fig)
     solara.FigureMatplotlib(fig)
 
 

solara/website/pages/documentation/faq/content/99-faq.md

@@ -101,3 +101,12 @@ If you upgrade from an older version to 1.30 or later, the order in which pip in
 ```bash
 $ pip install solara-server --force-reinstall
 ```
+
+# I see an error in the browser console
+
+If you see an error like this in the browser console:
+```
+Uncaught Error: Script error for "base/js/namespace", needed by: /jupyter/nbextensions/dash/main.js
+```
+
+See [ignoring notebook extensions](/documentation/advanced/understanding/solara-server#ignoring-notebook-extensions) for more information.

solara/website/pages/documentation/getting_started/content/00-quickstart.md

@@ -94,7 +94,7 @@ Or the more modern Jupyter lab:
 You can also run the script as a standalone app. This requires the extra packages `qtpy` and `PySide6` (or `PyQt6`) to be installed.
 
 ```bash
-$ pip install pip install qtpy PySide6
+$ pip install qtpy PySide6
 ```
 
 Run from the command line in the same directory where you put your file (`sol.py`):

solara/website/pages/documentation/getting_started/content/04-tutorials/_jupyter_dashboard_1.ipynb

@@ -7,17 +7,19 @@
    "source": [
     "# Build your Jupyter dashboard using Solara\n",
     "\n",
-    "Welcome to the first part of a series of tutorials that will show you how to create a dashboard in Jupyter and deploy it as a standalone web app. Importantly, there will be no need to rewrite your app in a different framework, no need to use a non-Python solution, and no need to use JavaScript or CSS.\n",
+    "Welcome to the first part of a series of tutorials showing you how to create a dashboard in Jupyter and deploy it as a standalone web app. Importantly, you won't need to rewrite your app in a different framework for deployment. We will use a pure Python solution with no JavaScript or CSS required.\n",
     "\n",
-    "Jupyter notebooks are an incredible tool for data analysis, since they enable blending code, visualization and narrative into a single document.\n",
-    "However, if the insights need to be presented to a non-technical audience, we usually do not want to show the code.\n",
+    "Jupyter notebooks are an incredible data analysis tool since they blend code, visualization, and narrative into a single document. However, we do not want to show the code if the insights must be presented to a non-technical audience.\n",
+    "\n",
+    "\n",
+    "Built on top of ipywidgets, the Solara framework integrates well into the Jupyter notebook, Jupyter lab as well as other Jupyter environments, and as we will see in a later article, can be deployed efficiently using the Solara server. This, by itself, makes Solara a perfect solution for creating dashboards or data apps.\n",
     "\n",
     "In this tutorial, we will create a simple dashboard using Solara's UI components. The final product will allow an end-user to filter,\n",
     "visualize and explore a dataset on a map.\n",
     "\n",
     "![image](https://dxhl76zpt6fap.cloudfront.net/public/docs/tutorial/jupyter-dashboard1.webp)\n",
     "\n",
-    "## Pre-requisits \n",
+    "## Pre-requisites \n",
     "\n",
     "You need to install `pandas`, `matplotlib`, `folium` and `solara`. Assuming you are using pip, you can execute on your shell:\n",
     "\n",
@@ -43,7 +45,7 @@
    "id": "6cc6256a",
    "metadata": {},
    "source": [
-    "The first thing we do when we read in the data is to print it out, to see what the dataset contains."
+    "The first thing we do when we read in the data is to print it out to see what the dataset contains."
    ]
   },
   {
@@ -365,7 +367,7 @@
    "id": "08a9644a",
    "metadata": {},
    "source": [
-    "The data looks clean but since we will work with the `Category` and `PdDistrict` column data, lets convert those columns to title case."
+    "The data looks clean, but since we will work with the `Category` and `PdDistrict` column data, let us convert those columns to title case."
    ]
   },
   {
@@ -700,7 +702,7 @@
    "id": "b0e37cb4",
    "metadata": {},
    "source": [
-    "Now, with our filtered dataset, we create two barcharts. We use regular pandas and matplotlib, but seaborn or plotly would also have been appropriate choices."
+    "Now, with our filtered dataset, we create two bar charts. We use regular Pandas and Matplotlib, but Seaborn or Plotly would also be appropriate choices."
    ]
   },
   {
@@ -750,9 +752,9 @@
    "id": "0e71ff2f",
    "metadata": {},
    "source": [
-    "Since we do not need bi-directional communication (e.g. we do not need to receive events or data from our map), we use folium to display the locations of the committed crimes on a map. If we do need bi-directional communication, we can also decide to use [ipyleaflet](https://ipyleaflet.readthedocs.io/en/latest/usage/index.html).\n",
+    "Since we do not need bidirectional communication (e.g., we do not need to receive events or data from our map), we use Folium to display the locations of the committed crimes on a map. If we do need bidirectional communication, we can also decide to use [ipyleaflet](https://ipyleaflet.readthedocs.io/).\n",
     "\n",
-    "We cannot display all the data on the map without crashing your browser, so we limit to a maximum of a 50 points."
+    "Since we cannot display all the data on the map without crashing your browser, we limit it to a maximum of 50 points."
    ]
   },
   {
@@ -800,9 +802,9 @@
    "source": [
     "## Making our first reactive visualization\n",
     "\n",
-    "The above code works nicely, but if we want to explore different types of crimes, we need to manually modify and run all cells that determine out output. Would it not be much better to have a UI with controls that determine the filtering, and a view that displays the filtered data interactively?\n",
+    "The above code works nicely, but if we want to explore different types of crimes, we need to modify and run all cells that determine our output manually. Would it not be much better to have a UI with controls determining the filtering and a view displaying the filtered data interactively?\n",
     "\n",
-    "Lets start by importing the solara package, and create three reactive variables."
+    "Let's start by importing the solara package and creating three reactive variables."
    ]
   },
   {
@@ -814,9 +816,7 @@
    "source": [
     "import solara\n",
     "\n",
-    "districts = solara.reactive(\n",
-    "    [\"Bayview\", \"Northern\"],\n",
-    ")\n",
+    "districts = solara.reactive([\"Bayview\", \"Northern\"])\n",
     "categories = solara.reactive([\"Vandalism\", \"Assault\", \"Robbery\"])\n",
     "limit = solara.reactive(100)"
    ]
@@ -826,9 +826,9 @@
    "id": "28622c20",
    "metadata": {},
    "source": [
-    " A reactive variable is a container around a value (like a int, string or list) that allows the UI to automatically listen to changes. Any change to `your_reactive_variable.value` will be picked up by solara component that use them, so that they can automatically redraw or update itself.\n",
+    "A reactive variable is a container around a value (like an int, string, or list) that allows the UI to listen to changes automatically. Any change to your_reactive_variable.value will be picked up by Solara components that use them so that they can automatically redraw or update themselves.\n",
     "\n",
-    " We now create our first component (`View`) which filters the data (based on the reactive variables), and shows the map and the charts. Solara supports the `display` mechanism of Jupyter, so we can simply use our previously defined functions."
+    "Let us now create our first component (View), which filters the data based on the reactive variables and shows the map and the charts. Solara supports the display mechanism of Jupyter so that we can use our previously defined functions."
    ]
   },
   {
@@ -859,7 +859,9 @@
    "id": "0b05c1db",
    "metadata": {},
    "source": [
-    "Note that some of the code (like the warning and the charts) are conditional. Solara will automatically find out what to add, remove or update without you having to do this manually. Solara is declarative (similar to ReactJS), but also reactive. If we change the reactive variables, Solara sees that changes and notifies the component instances that use its value. After executing the next lines of code, our `View` will automatically update."
+    "Note that some UI parts (like the warning and the charts) are conditional. Solara will automatically find out what to add, remove, or update without you having to do this manually. Solara is declarative (similar to ReactJS) but also reactive. If we change the reactive variables, Solara will see those changes and notify the component instances that use its value.\n",
+    "\n",
+    "If we run the next lines of code in our notebook, our View will automatically update."
    ]
   },
   {
@@ -878,7 +880,9 @@
    "id": "8822d100",
    "metadata": {},
    "source": [
-    "We can now explore out data much faster, since we don't need to re-run the cells that depended on it. "
+    "We can now explore our data much faster since we don't need to re-run the cells that depend on it.\n",
+    "\n",
+    "Solara's reactive and declarative nature makes it scalable to much larger applications than regular ipywidgets, where keeping the UI in sync and adding, removing, and updating widgets is a manual and bug-prone process."
    ]
   },
   {
@@ -888,7 +892,7 @@
    "source": [
     "## Adding controls\n",
     "\n",
-    "We created a mini app in our notebook that is declarative *and* reactive, but we still need to manually modify the values by executing a code cell, while we promised a UI to control it. Luckily, all Solara input components supports reactive variables. This means that controlling a reactive variable using a UI element is often a one-liner."
+    "We created a declarative and reactive mini app in our notebook, but we still need to manually modify the values by executing a code cell in our Notebook. Now, let us create a UI to control it. All Solara input components support reactive variables. This means that controlling a reactive variable using a UI element is often a one-liner."
    ]
   },
   {

solara/website/pages/documentation/getting_started/content/07-deploying/10-self-hosted.md

@@ -5,8 +5,8 @@ description: Solara is compatible with many different hosting solutions, such as
 # Self hosted deployment
 
  * [Flask](#flask)
- * [Starlette](#flask)
- * [FastAPI](#flask)
+ * [Starlette](#starlette)
+ * [FastAPI](#fastapi)
  * [Voila](#voila)
  * [Panel](#panel)
  * [Nginx](#nginx)

solara/website/pages/roadmap/roadmap.md

@@ -13,6 +13,9 @@ Exciting news! We aim to release Solara 2.0 by the end of the year. For the 2.0
 
     State mutation detection will be the default for Solara 2.0, but can be enabled in Solara > 1.41.0 by setting the environment variable `SOLARA_STORAGE_MUTATION_DETECTION=1`.
 
+    Using reactive variables in boolean comparisons will raise an error in Solara 2.0, but this can be used in Solara > 1.42.0 by setting the environment variable `SOLARA_ALLOW_REACTIVE_BOOLEAN=0`.
+
+    In Solara 2.0, `reacton.Fragment` will be used as the default container of any unwrapped sibling elements. This behaviour can be enabled in Solara > 1.42.0 by setting the environmental variable `SOLARA_DEFAULT_CONTAINER="Fragment"`.
 
 - [See more details in the 2.0 milestone on GitHub.](https://github.com/widgetti/solara/milestone/1)
 

{solara_ui-1.42.0.dist-info → solara_ui-1.43.0.dist-info}/METADATA

@@ -1,6 +1,6 @@
 Metadata-Version: 2.3
 Name: solara-ui
-Version: 1.42.0
+Version: 1.43.0
 Dynamic: Summary
 Project-URL: Home, https://www.github.com/widgetti/solara
 Project-URL: Documentation, https://solara.dev
@@ -31,7 +31,7 @@ Requires-Dist: humanize
 Requires-Dist: ipyvue>=1.9.0
 Requires-Dist: ipyvuetify>=1.6.10
 Requires-Dist: ipywidgets>=7.7
-Requires-Dist: reacton>=1.7.1
+Requires-Dist: reacton>=1.9
 Requires-Dist: requests
 Provides-Extra: all
 Requires-Dist: cachetools; extra == 'all'