solara-ui 1.45.0__py3-none-any.whl

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

@@ -0,0 +1,107 @@
+"""# GPT-4 token encoder and decoder
+
+This example shows how to use a language model tokenizer to encode and decode and how to search for a token
+
+Inspired by: [Understanding GPT tokenizers by Simon Willison](https://simonwillison.net/2023/Jun/8/gpt-tokenizers/)
+
+
+## Note
+
+Install pandas and tiktoken with `pip install pandas tiktoken`
+
+"""
+
+import random
+
+import pandas as pd
+import tiktoken
+
+import solara
+import solara.lab
+
+# Get tokenizer for gpt-4
+tokenizer = tiktoken.encoding_for_model("gpt-4")
+
+# Create dataframe mapping token IDs and tokens
+MAX_TOKENS = 50257
+df = pd.DataFrame()
+df["token ID"] = range(MAX_TOKENS)
+df["token"] = [tokenizer.decode([i]) for i in range(MAX_TOKENS)]
+
+sentence = solara.reactive("Example text is here")
+tokens_ids_to_lookup = solara.reactive("")
+tokens_filter = solara.reactive("")
+
+
+@solara.component
+def GithubAvatar(name: str, handle: str, img: str):
+    with solara.v.Html(tag="a", attributes={"href": f"https://github.com/{handle}/", "target": "_blank"}):
+        with solara.v.ListItem(class_="pa-0"):
+            with solara.v.ListItemAvatar(color="grey darken-3"):
+                solara.v.Img(
+                    class_="elevation-6",
+                    src=img,
+                )
+            with solara.v.ListItemContent():
+                solara.v.ListItemTitle(children=["By " + name])
+
+
+@solara.component
+def Token(token: int):
+    # create random color dependent on the position
+    random.seed(token)
+    random_color = "".join([random.choice("0123456789ABCDEF") for k in range(6)])
+    with solara.Div(style="display: inline;"):
+        with solara.Div(
+            style={
+                "display": "inline",
+                "padding": "6px",
+                "border-right": "3px solid white",
+                "line-height": "3em",
+                "font-family": "courier",
+                "background-color": f"#{random_color}",
+                "color": "white",
+                "position": "relative",
+            },
+        ):
+            solara.Text(
+                " " + str(token),
+                style={
+                    "display": "inline",
+                    "position": "absolute",
+                    "top": "5.5ch",
+                    "line-height": "1em",
+                    "left": "-0.5px",
+                    "font-size": "0.45em",
+                },
+            )
+            solara.Text(str(tokenizer.decode([token])))
+
+
+@solara.component
+def Page():
+    with solara.Column(margin=10):
+        solara.Markdown("# GPT-4 token encoder and decoder")
+        solara.Markdown("This is an educational tool for understanding how tokenization works.")
+        GithubAvatar(
+            "Alonso Silva Allende",
+            "alonsosilvaallende",
+            "https://avatars.githubusercontent.com/u/30263736?v=4",
+        )
+
+        solara.InputText("Enter text to tokenize it:", value=sentence, continuous_update=True)
+        tokens = tokenizer.encode(sentence.value)
+        with solara.Div(style="display: inline;"):
+            for token in tokens:
+                Token(token)
+
+        solara.InputText("Or convert space separated tokens to text:", value=tokens_ids_to_lookup, continuous_update=True)
+        token_input = [int(span) for span in tokens_ids_to_lookup.value.split(" ") if span != ""]
+        text_output = tokenizer.decode(token_input)
+        solara.Markdown(f"{text_output}")
+
+        solara.Markdown("## Search tokens")
+        solara.InputText("Search for a token:", value=tokens_filter, continuous_update=True)
+        df_subset = df[df["token"].str.startswith(tokens_filter.value)]
+        solara.Markdown(f"{df_subset.shape[0]:,} results")
+        solara.DataFrame(df_subset, items_per_page=10)

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

@@ -0,0 +1,10 @@
+"""Demonstrates very basic usage of Solara."""
+
+import solara
+
+redirect = None
+
+
+@solara.component
+def Page():
+    return solara.Markdown("Should not see me")

solara/website/pages/documentation/examples/basics/sine.py

@@ -0,0 +1,28 @@
+"""# Interactive sine wave
+
+
+This example shows how to have two slider control a visualization.
+
+"""
+
+import numpy as np
+import plotly.express as px
+
+import solara
+
+x = np.linspace(0, 2, 100)
+
+title = "Interactive sine wave"
+freq = solara.reactive(2.0)
+phase = solara.reactive(0.1)
+
+
+@solara.component
+def Page():
+    y = np.sin(x * freq.value + phase.value)
+
+    solara.FloatSlider("Frequency", value=freq, min=0, max=10)
+    solara.FloatSlider("Phase", value=phase, min=0, max=np.pi, step=0.1)
+
+    fig = px.line(x=x, y=y)
+    solara.FigurePlotly(fig)

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

@@ -0,0 +1,10 @@
+"""Apps that run fullscreen"""
+
+import solara
+
+redirect = None
+
+
+@solara.component
+def Page():
+    return solara.Markdown("Should not see me")

solara/website/pages/documentation/examples/fullscreen/authorization.py

@@ -0,0 +1,3 @@
+redirect = "/apps/authorization"
+
+Page = True

solara/website/pages/documentation/examples/fullscreen/layout_demo.py

@@ -0,0 +1,3 @@
+redirect = "/apps/layout-demo"
+
+Page = True

solara/website/pages/documentation/examples/fullscreen/multipage.py

@@ -0,0 +1,3 @@
+redirect = "/apps/multipage"
+
+Page = True

solara/website/pages/documentation/examples/fullscreen/scatter.py

@@ -0,0 +1,3 @@
+redirect = "/apps/scatter"
+
+Page = True

solara/website/pages/documentation/examples/fullscreen/scrolling.py

@@ -0,0 +1,3 @@
+redirect = "/apps/scrolling"
+
+Page = True

solara/website/pages/documentation/examples/fullscreen/tutorial_streamlit.py

@@ -0,0 +1,3 @@
+redirect = "/apps/tutorial-streamlit"
+
+Page = True

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

@@ -0,0 +1,10 @@
+""""""
+
+import solara
+
+redirect = None
+
+
+@solara.component
+def Page():
+    return solara.Markdown("Should not see me")

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

@@ -0,0 +1,70 @@
+"""# Custom state storage
+
+Solara makes it easy to store state/data on the server side, scoped to a kernel, using [reactive variables](/api/reactive).
+
+However, sometimes you want to store state yourself in an external system (i.e. not Solara), and for this you can use the
+[get_kernel_id()](/api/get_kernel_id) function to get a unique id for each kernel.
+
+If you want to store state/data scoped to a browser session, you can use the [get_session_id()](/api/get_session_id)
+function to get a unique id tied to the users browser. This can be used to store state that outlives a page refresh.
+
+In case you want to store state/data scoped to a user, you can use a similar strategy, but use a unique identifier based on the user,
+instead of the session id. You can take a look at [Our oauth example](examples/general/login_oauth) or
+[the authorization example](/apps/authorization) for inspiration.
+
+"""
+
+from typing import Dict
+
+import solara
+import solara.lab
+
+# used only to force updating of the page
+force_update_counter = solara.reactive(0)
+
+# Kernel storage is scoped to the kernel, and will be cleared when the kernel is stopped.
+kernel_storage: Dict[str, str] = {}
+
+
+def store_in_kernel_storage(value):
+    kernel_storage[solara.get_kernel_id()] = value
+    force_update_counter.value += 1
+
+
+@solara.lab.on_kernel_start
+def initialize_kernel_storage():
+    # when a kernel gets started, we initialize the dict entry
+    kernel_storage[solara.get_kernel_id()] = "This does not"
+
+    def cleanup():
+        # when a kernel gets stopped, we remove the dict entry
+        del kernel_storage[solara.get_kernel_id()]
+
+    # cleaning up kernel storage, we prevent memory leaks
+    return cleanup
+
+
+# session storage has no lifecycle management, and will only be cleared when the server is restarted.
+session_storage: Dict[str, str] = {}
+
+
+def store_in_session_storage(value):
+    session_storage[solara.get_session_id()] = value
+    force_update_counter.value += 1
+
+
+@solara.component
+def Page():
+    solara.InputText(
+        "Stored under the kernel id key",
+        value=kernel_storage[solara.get_kernel_id()],
+        on_value=store_in_kernel_storage,
+        continuous_update=True,
+    )
+
+    solara.InputText(
+        "Stored under the session id key",
+        value=session_storage.get(solara.get_session_id(), "This outlives a page refresh"),
+        on_value=store_in_session_storage,
+        continuous_update=True,
+    )

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

@@ -0,0 +1,115 @@
+"""# Deploy model demo
+
+This show off a combination of [solara.lab.Menu](/documentation/components/lab/menu) and
+    [solara.lab.ConfirmationDialog](/documentation/components/lab/confirmation_dialog)
+and [solara.use_thread](/documentation/api/hooks/use_thread) to demonstrate how to tune, fit and deploy a model.
+The actually deployment is not real, but simulated by a thread that returns a boolean value on success and sleep for a while to
+similate the deployment taking time.
+
+ * Right click on the plot to either fit or reset the model parameters.
+ * Clicking on the button shows a custom menu to deploy to several environments.
+ * A confirmation dialog is used before executing the deployment.
+ * If the deployment fails, a confirmation dialog is shown to retry the deployment.
+"""
+
+import time
+
+import numpy as np
+import pandas as pd
+import plotly.express as px
+import solara
+import solara.lab
+
+slope = solara.reactive(1.5)
+intercept = solara.reactive(0.5)
+
+x = np.arange(0, 100, 2) / 10
+# fake data with noise
+y_data = (slope.value * 0.8) * x + (intercept.value + 0.4) + np.random.normal(0, 0.5, len(x))
+
+
+@solara.component
+def Page():
+    deploy_environment_request = solara.use_reactive("")
+    deploy_environment = solara.use_reactive("")
+    fake_failed = solara.use_reactive(False)
+
+    def deploy_model():
+        if deploy_environment.value == "":
+            return
+
+        # 'dummy' deployment
+        time.sleep(1.5)
+
+        # fake a failure the first time
+        if not fake_failed.value:
+            fake_failed.value = True
+            return False
+        else:
+            return True
+
+    deploy_state: solara.Result[bool] = solara.use_thread(deploy_model, dependencies=[deploy_environment.value])
+
+    x_model = x
+    y_model = (slope.value) * x_model + (intercept.value)
+    df1 = pd.DataFrame({"x": x, "y": y_data})
+    df2 = pd.DataFrame({"x": x_model, "y": y_model})
+    df = pd.concat([df1, df2], keys=["data", "model"], names=["type"]).reset_index()
+    fig = px.line(df, x="x", y="y", color="type")
+    with solara.Card("My fancy model"):
+        fig_element = solara.FigurePlotly(fig)
+
+        def reset():
+            slope.set(1.5)
+            intercept.set(0.5)
+
+        def fit():
+            slope.set(1.5 * 0.8)
+            intercept.set(0.9)
+
+        with solara.lab.ContextMenu(activator=fig_element):
+            solara.Button("Reset", text=True, icon_name="mdi-refresh", on_click=reset)
+            solara.Button("Fit", text=True, icon_name="mdi-brain", on_click=fit)
+
+        solara.FloatSlider("Slope", value=slope, min=-2, max=5, step=0.1)
+        solara.FloatSlider("Intercept", value=intercept, min=-10, max=10, step=0.1)
+
+        solara.lab.ConfirmationDialog(
+            deploy_environment_request.value != "",
+            title="Confirm deployment",
+            content=solara.Markdown(f"Are you sure you want to deploy to **{deploy_environment_request.value}**?"),
+            ok=f"Deploy to {deploy_environment_request.value}",
+            on_ok=lambda: deploy_environment.set(deploy_environment_request.value),
+            on_close=lambda: deploy_environment_request.set(""),
+        )
+
+        solara.lab.ConfirmationDialog(
+            deploy_state.value is False and deploy_state.state == solara.ResultState.FINISHED,
+            title="Deployment failed",
+            on_close=lambda: None,
+            on_ok=lambda: deploy_state.retry(),
+            content=solara.Error(solara.Markdown(f"Deployment to **{deploy_environment.value}** failed. Do you want to try again?")),
+            ok="Retry deployment",
+            cancel="Ignore the failure",
+        )
+
+        def request_deploy(environment):
+            deploy_environment.value = ""
+            deploy_environment_request.set(environment)
+
+        deploying = bool(deploy_environment.value and deploy_state.state == solara.ResultState.RUNNING)
+        deploy_button = solara.Button("Deploy model", color="primary", icon_name="mdi-rocket", loading=deploying)
+        with solara.lab.Menu(activator=deploy_button):
+            with solara.Column(gap="0px"):
+                solara.Button("Deploy to testing environment", text=True, icon_name="mdi-bug", on_click=lambda: request_deploy("testing"))
+                solara.Button("Deploy to staging environment", text=True, icon_name="mdi-test-tube", on_click=lambda: request_deploy("staging"))
+                solara.Button(
+                    "Deploy to production",
+                    text=True,
+                    icon_name="mdi-rocket",
+                    style={"justify-content": "left"},  # make the icon appear on the left
+                    on_click=lambda: request_deploy("production"),
+                )
+        if deploy_state.value is True and deploy_state.state == solara.ResultState.FINISHED:
+            # add some margin in the y direction using my-4
+            solara.Success(solara.Markdown(f"Model deployed successfully to **{deploy_environment.value}**!"), classes=["my-4"])

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

@@ -0,0 +1,32 @@
+from typing import cast, Optional
+import httpx
+import asyncio
+import solara
+import solara.lab
+
+
+@solara.component
+def Page():
+    btc = solara.use_reactive(cast(Optional[float], None))
+
+    async def fetch_btc_price():
+        while True:
+            await asyncio.sleep(1)
+            async with httpx.AsyncClient() as client:
+                url = "https://api.binance.com/api/v1/ticker/price?symbol=BTCUSDT"
+                response = await client.get(url)
+                btc.value = float(response.json()["price"])
+                print("btc.value", btc.value)
+
+    fetch_result = solara.lab.use_task(fetch_btc_price, dependencies=[])
+    # the task keeps running, so is always in the pending mode, so we combine it with the btc value being None
+    if fetch_result.pending and btc.value is None:
+        solara.Text("Fetching BTC price...")
+    else:
+        if fetch_result.error:
+            solara.Error(f"Error fetching BTC price: {fetch_result.exception}")
+        else:
+            solara.Text(f"BTC price: ${btc.value}")
+
+
+Page()

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

@@ -0,0 +1,81 @@
+import pprint
+from types import ModuleType
+from typing import Optional
+
+import reacton.ipyvuetify as v
+
+auth: Optional[ModuleType]
+try:
+    from solara_enterprise import auth
+except ImportError:
+    auth = None
+import solara as sl
+
+
+@sl.component
+def UserCard():
+    assert auth is not None
+    user = auth.user.value
+    if user:
+        user_info = user.get("userinfo")
+        if user_info:
+            # based on https://v2.vuetifyjs.com/en/components/cards/#props
+            with v.Card(width="400px"):
+                with v.ListItem(three_line=True):
+                    with v.ListItemContent():
+                        sl.Div("Logged in", class_="text-overline mb-4")
+                        v.ListItemTitle(children=[user_info["email"]])
+                        v.ListItemSubtitle(children=["You are now logged in, log out via the app bar, or the button below"])
+                    with v.ListItemAvatar():
+                        auth.Avatar()
+
+                with v.CardActions():
+                    sl.Button("logout", icon_name="mdi-logout", href=auth.get_logout_url(), text=True)
+        else:
+            sl.Error("No user info")
+    else:
+        sl.Error("No user")
+
+
+@sl.component
+def Page():
+    assert auth is not None
+    sl.Title("Login demo using OAuth")
+    with sl.AppBar():
+        if auth.user.value:
+            auth.AvatarMenu()
+        else:
+            sl.Button(icon_name="mdi-login", href=auth.get_login_url(), icon=True)
+
+    with sl.Column():
+        if auth.user.value:
+            UserCard()
+            with sl.Details("Raw data"):
+                sl.Markdown(
+                    """
+                    ### Raw user data
+
+                    *Note: do not share this data with anyone, it contains sensitive information.*
+
+                    This is the raw user data from the auth provider.
+
+                    We use the `picture` field to display an avatar in the [AppBar](/documentation/components/layout/app_bar).
+                """
+                )
+                sl.Preformatted(pprint.pformat(auth.user.value))
+        else:
+            sl.Markdown(
+                """
+            ### Login demo
+
+            This is a demo of a login system using OAuth. You can login with your google account, github account or with a username and password.
+            We are using [Auth0](https://auth0.com/) as an OAuth provider.
+
+            """
+            )
+            with sl.Row():
+                sl.Button("login", icon_name="mdi-login", href=auth.get_login_url())
+
+
+if auth is None:
+    del Page

solara/website/pages/documentation/examples/general/mycard.vue

@@ -0,0 +1,58 @@
+<template>
+    <v-card class="text-center" :color="color" dark>
+        <v-card-text>
+            <v-sheet color="rgba(0, 0, 0, .12)">
+                <v-sparkline :value="value" color="rgba(255, 255, 255, .7)" height="100" padding="24" stroke-linecap="round"
+                    smooth>
+                    <template v-slot:label="item">
+                        ${{ item.value }}
+                    </template>
+                </v-sparkline>
+            </v-sheet>
+        </v-card-text>
+
+        <v-card-text>
+            <h1 class="solara-some-class">{{ caption }}</h1>
+        </v-card-text>
+
+        <v-divider></v-divider>
+
+        <v-card-actions class="justify-center">
+            <v-btn block text @click="goto_report">
+                Go to Report
+            </v-btn>
+        </v-card-actions>
+    </v-card>
+</template>
+<style id="mycard">
+.solara-some-class {
+    font-weight: lighter;
+}
+</style>
+
+<script>
+export default {
+    data: () => ({
+        value: [
+            423,
+            446,
+            675,
+            510,
+            590,
+            610,
+            760,
+        ],
+    }),
+    mounted: () => {
+        console.log('mounted');
+    },
+    destroyed: () => {
+        console.log('destroyed');
+    },
+    watch: {
+        value: function (val) {
+            console.log('value changed to', val);
+        }
+    }
+}
+</script>

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

@@ -0,0 +1,51 @@
+"""# Pokemon search
+
+This example shows to to dynamically fetch data and render the results in a table when done, and show an error on failure.
+
+It also shows an optional filter to narrow down the results.
+"""
+
+import solara
+from solara import use_fetch
+from solara.alias import rv
+
+github_url = solara.util.github_url(__file__)
+pokemon_base_url = "https://raw.githubusercontent.com/jherr/pokemon/0722479d4153b1db0d0326956b08b37f44a95a5f"
+json_url = f"{pokemon_base_url}/index.json"
+
+
+@solara.component
+def Page():
+    data = use_fetch(json_url)
+    json = solara.use_json_load(data)
+    filter, set_filter = solara.use_state("")
+
+    with solara.Div() as main:
+        if json.error:
+            solara.Error(f"Error {json.error}")
+            solara.Button("Retry", on_click=data.retry)
+        else:
+            if json.value:
+                solara.InputText(label="Filter pokemons by name", value=filter, on_value=set_filter, continuous_update=True)
+                pokemons = json.value
+                if filter:
+                    pokemons = [k for k in pokemons if filter.lower() in k["name"].lower()]
+                    if len(pokemons) == 0:
+                        solara.Warning("No pokemons found, try a different filter")
+                    else:
+                        solara.Info(f"{len(pokemons)} pokemons found")
+                else:
+                    solara.Info(f"{len(pokemons)} pokemons in total")
+                with solara.GridFixed(columns=4, align_items="end", justify_items="stretch"):
+                    for pokemon in pokemons[:20]:
+                        with solara.Div():
+                            name = pokemon["name"]
+                            url = f"{pokemon_base_url}/{pokemon['image']}"
+                            # TODO: how to do this with solara
+                            rv.Img(src=url, contain=True, max_height="200px")
+                            solara.Text(name)
+            else:
+                with solara.Div():
+                    solara.Text("Loading...")
+                    rv.ProgressCircular(indeterminate=True, class_="solara-progress")
+    return main

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

@@ -0,0 +1,50 @@
+"""Demonstrates how to use Vue components in Solara.
+
+Although many components can be made from the Python side, sometimes it is easier to write components using Vue directly.
+It can also be beneficial for performance, since instead of creating many widgets from the Python side we only send data to
+the frontend. If event handling is also done on the frontend, this reduces latency and makes you app feel much smoother.
+
+See [the API documentation on component_vue](/documentation/api/utilities/component_vue) for more information.
+
+This example is based on [the vuetify docs](https://v2.vuetifyjs.com/en/components/sparklines/#custom-labels),
+Note that the "Go to report" button does not do anything yet.
+
+"""
+
+from typing import Callable
+
+import numpy as np
+import solara
+
+seed = solara.reactive(42)
+
+
+@solara.component_vue("mycard.vue")
+def MyCard(
+    event_goto_report: Callable[[dict], None],
+    value=[1, 10, 30, 20, 3],
+    caption="My Card",
+    color="red",
+):
+    pass
+
+
+@solara.component
+def Page():
+    gen = np.random.RandomState(seed=seed.value)
+    sales_data = np.floor(np.cumsum(gen.random(7) - 0.5) * 100 + 100)
+    show_report = solara.use_reactive(False)
+
+    with solara.Column():
+        if show_report.value:
+            with solara.Card("Report"):
+                solara.Markdown("Lorum ipsum dolor sit amet")
+                solara.Button("Go back", on_click=lambda: show_report.set(False))
+        else:
+
+            def new_seed():
+                seed.value = np.random.randint(0, 100)
+
+            solara.Button("Generate new data", on_click=new_seed)
+
+            MyCard(value=sales_data.tolist(), color="green", caption="Sales Last 7 Days", event_goto_report=lambda data: show_report.set(True))