diff --git a/docs/docs/create-apps/streamlit-app.md b/docs/docs/create-apps/streamlit-app.md new file mode 100644 index 00000000..25de6637 --- /dev/null +++ b/docs/docs/create-apps/streamlit-app.md @@ -0,0 +1,94 @@ +--- +sidebar_position: 8 +--- + +# Streamlit apps + +## Environment requirements + +Your conda environment (used in JHub Apps Launcher's App creation form) must have the following packages for successful app deployment: + +* `jhsingle-native-proxy` >= 0.8.2 +* `streamlit` +* Other libraries used in the app + +:::note +In some cases, you may need `ipywidgets` +::: + +## Example application + +To deploy the [Streamlit App][streamlit-app] using JHub Apps, you can use the following code and environment: + +
+ Code (Python file) + +In a Python file, copy the following lines of code. + +```python title="streamlit_app.py" +from collections import namedtuple +import altair as alt +import math +import pandas as pd +import streamlit as st + +""" +# Welcome to Streamlit! + +""" + +total_points = st.slider("Number of points in spiral", 1, 5000, 2000) +num_turns = st.slider("Number of turns in spiral", 1, 100, 9) + +Point = namedtuple("Point", "x y") +data = [] + +points_per_turn = total_points / num_turns + +for curr_point_num in range(total_points): + curr_turn, i = divmod(curr_point_num, points_per_turn) + angle = (curr_turn + 1) * 2 * math.pi * i / points_per_turn + radius = curr_point_num / total_points + x = radius * math.cos(angle) + y = radius * math.sin(angle) + data.append(Point(x, y)) + +st.altair_chart( + alt.Chart(pd.DataFrame(data), height=500, width=500) + .mark_circle(color="#0068c9", opacity=0.5) + .encode(x="x:Q", y="y:Q") +) +``` + +You will see an app that displays a spiral of points: + +![Streamlit interactive plot of a spiral of points with two sliders to adjust the number of points and the number of turns in the spiral](/img/streamlit_app.png) +
+ +
+ Environment specification + +Use the following spec to create a Conda environment wherever JHub Apps is deployed. +If using Nebari, use this spec to create an environment with [conda-store][conda-store]. + +```yaml +channels: + - conda-forge +dependencies: + - altair + - jhsingle-native-proxy>=0.8.2 + - pandas + - streamlit + - ipykernel +``` +
+ + +## Next steps + +:sparkles: [Launch app →](/docs/create-apps/general-app) + + + +[streamlit-app]: https://github.com/streamlit/streamlit-example/blob/8bd2197e4ba68dd68127a264dc6708f0a96f23c8/streamlit_app.py +[conda-store]: https://conda.store/conda-store-ui/tutorials/create-envs diff --git a/docs/docs/create-apps/voila-app.md b/docs/docs/create-apps/voila-app.md new file mode 100644 index 00000000..c10e0ba3 --- /dev/null +++ b/docs/docs/create-apps/voila-app.md @@ -0,0 +1,82 @@ +--- +sidebar_position: 7 +--- + +# Viola apps + +## Environment requirements + +Your conda environment (used in JHub Apps Launcher's App creation form) must have the following packages for successful app deployment: + +* `jhsingle-native-proxy` >= 0.8.2 +* `voila` >= 0.5.6 +* Other libraries used in the app + +:::note +In some cases, you may need `ipywidgets` +::: + +## Example application + +To deploy the [Voila Basic Example][voila-basic-example] using JHub Apps, you can use the following code and environment: + +
+ Code (Jupyter Notebook) + +In a Jupyter Notebook, copy the following lines of code into a cell. + +```python title="voila-basic-slider.ipynb" +import ipywidgets as widgets + +slider = widgets.FloatSlider(description='x') +text = widgets.FloatText(disabled=True, description='x^2') + +def compute(*ignore): + text.value = str(slider.value ** 2) + +slider.observe(compute, 'value') + +slider.value = 4 + +widgets.VBox([slider, text]) +``` + +You will see a basic slider app as shown in this screenshot: + +![Simple interactive Voilà app displaying a slider for variable x and its squared value](/img/voila_app.png) +
+ +
+ Environment specification + +Use the following spec to create a Conda environment wherever JHub Apps is deployed. +If using Nebari, use this spec to create an environment with [conda-store][conda-store]. + +```yaml +channels: + - conda-forge +dependencies: + - ipywidgets + - jhsingle-native-proxy>=0.8.2 + - pandas + - python + - pip + - pip: + - voila==0.5.6 + - ipykernel +``` +:::note +When viola (>=0.5.6) is available on Conda Forge, it can be moved outside of the pip section of the dependencies +::: + +
+ + +## Next steps + +:sparkles: [Launch app →](/docs/create-apps/general-app) + + + +[voila-basic-example]: https://github.com/voila-dashboards/voila/blob/7596c4f930caf4fc2d89ba63b1096046adf9fe0e/notebooks/basics.ipynb +[conda-store]: https://conda.store/conda-store-ui/tutorials/create-envs diff --git a/docs/static/img/streamlit_app.png b/docs/static/img/streamlit_app.png new file mode 100644 index 00000000..c65095c4 Binary files /dev/null and b/docs/static/img/streamlit_app.png differ diff --git a/docs/static/img/voila_app.png b/docs/static/img/voila_app.png new file mode 100644 index 00000000..38588722 Binary files /dev/null and b/docs/static/img/voila_app.png differ