Copy https://github.com/whitphx/stlite/tree/main/packages/sharing-editor/public/samples/011_component_gallery

app.py

@@ -0,0 +1,51 @@
+import streamlit as st
+
+st.title("Streamlit Component Gallery")
+
+st.image("https://docs.streamlit.io/logo.svg")
+
+st.markdown("""
+This _stlite_ sample app contains the demos embedded on the Streamlit official document (https://docs.streamlit.io/).
+
+**👈 Select a demo from the sidebar** to see some examples
+of Streamlit built-in components!
+""")
+
+st.markdown("""
+### Notes
+
+The page files (`pages/*`) are copied from [the Streamlit official document sample directory (`docs/python/api-examples-source`)](https://github.com/streamlit/docs/tree/5e62035f0ea36b211232ae3a5778dcd8ffdcac15/python/api-examples-source)
+excluding the sub directories.
+
+The following files have been changed:
+* `widget.download_button.py`:
+  A local file path in the source code has been rewritten to adjust to the directory structure of this sample app.
+
+Due to the browser environment limitations,
+some components do not work well.
+The known issues are listed at https://github.com/whitphx/stlite#limitations.
+
+### License
+As written above, the files `pages/*` are copied from `https://github.com/streamlit/docs` with some modifications,
+therefore, the license applied to the source, the Apache-2.0 license, is also applied to this sample as follows.
+
+#### Apache-2.0 license
+
+Copyright Streamlit Inc.
+
+Copyright Yuichiro Tachibana
+
+Licensed under the Apache License, Version 2.0 (the “License”);
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an “AS IS” BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+
+See the License for the specific language governing permissions and
+limitations under the License.
+
+See https://github.com/streamlit/docs/blob/main/LICENSE
+""")

pages/charts.area_chart.py

@@ -0,0 +1,12 @@
+import streamlit as st
+import pandas as pd
+import numpy as np
+
+@st.experimental_memo
+def load_data():
+    df = pd.DataFrame(np.random.randn(20, 3), columns=["a", "b", "c"])
+    return df
+
+chart_data = load_data()
+
+st.area_chart(chart_data)

pages/charts.audio.py

@@ -0,0 +1,34 @@
+import requests
+import streamlit as st
+
+
+@st.experimental_memo
+def read_file_from_url(url):
+    headers = {
+        "User-Agent": "StreamlitDocs/1.5.0 (https://docs.streamlit.io; [email protected])"
+    }
+    return requests.get(url, headers=headers).content
+
+
+file_bytes = read_file_from_url(
+    "https://upload.wikimedia.org/wikipedia/commons/c/c4/Muriel-Nguyen-Xuan-Chopin-valse-opus64-1.ogg"
+)
+
+st.audio(file_bytes, format="audio/ogg")
+
+st.write(
+    """
+    #### Audio credit:
+
+    Performer: _Muriel Nguyen Xuan_ and _Stéphane Magnenat_
+
+    Composer: Frédéric Chopin
+
+    License: Creative Commons Attribution-Share Alike 4.0 International, 3.0 Unported, 2.5 Generic, 2.0 Generic and 1.0 Generic license.
+    https://creativecommons.org/licenses/by-sa/4.0/
+
+    URL:
+    https://upload.wikimedia.org/wikipedia/commons/c/c4/Muriel-Nguyen-Xuan-Chopin-valse-opus64-1.ogg
+
+"""
+)

pages/charts.bar_chart.py

@@ -0,0 +1,12 @@
+import streamlit as st
+import pandas as pd
+import numpy as np
+
+@st.experimental_memo
+def load_data():
+    df = pd.DataFrame(np.random.randn(50, 3), columns=["a", "b", "c"])
+    return df
+
+chart_data = load_data()
+
+st.bar_chart(chart_data)

pages/charts.bokeh_chart.py

@@ -0,0 +1,12 @@
+import streamlit as st
+from bokeh.plotting import figure
+
+
+x = [1, 2, 3, 4, 5]
+y = [6, 7, 2, 4, 5]
+
+p = figure(title="simple line example", x_axis_label="x", y_axis_label="y")
+
+p.line(x, y, legend_label="Trend", line_width=2)
+
+st.bokeh_chart(p)

pages/charts.graphviz_chart.py

@@ -0,0 +1,25 @@
+import streamlit as st
+import graphviz as graphviz
+
+@st.experimental_memo
+def load_graph():
+    # Create a graphlib graph object
+    graph = graphviz.Digraph()
+    graph.edge("run", "intr")
+    graph.edge("intr", "runbl")
+    graph.edge("runbl", "run")
+    graph.edge("run", "kernel")
+    graph.edge("kernel", "zombie")
+    graph.edge("kernel", "sleep")
+    graph.edge("kernel", "runmem")
+    graph.edge("sleep", "swap")
+    graph.edge("swap", "runswap")
+    graph.edge("runswap", "new")
+    graph.edge("runswap", "runmem")
+    graph.edge("new", "runmem")
+    graph.edge("sleep", "runmem")
+    return graph
+
+graph = load_graph()
+
+st.graphviz_chart(graph)

pages/charts.image.py

@@ -0,0 +1,20 @@
+import streamlit as st
+
+IMAGE_URL = "https://images.unsplash.com/photo-1548407260-da850faa41e3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1487&q=80"
+
+st.image(IMAGE_URL, caption="Sunrise by the mountains")
+
+st.write(
+    """
+    #### Image credit:
+
+    Creator: User _Neil Iris (@neil_ingham)_ from _Unsplash_
+
+    License: Do whatever you want.
+    https://unsplash.com/license
+
+    URL:
+    https://unsplash.com/photos/I2UR7wEftf4
+
+"""
+)

pages/charts.line_chart.py

@@ -0,0 +1,12 @@
+import streamlit as st
+import pandas as pd
+import numpy as np
+
+@st.experimental_memo
+def load_data():
+    df = pd.DataFrame(np.random.randn(20, 3), columns=["a", "b", "c"])
+    return df
+    
+chart_data = load_data()
+
+st.line_chart(chart_data)

pages/charts.map.py

@@ -0,0 +1,14 @@
+import streamlit as st
+import pandas as pd
+import numpy as np
+
+@st.experimental_memo
+def load_data():
+    df = pd.DataFrame(
+        np.random.randn(1000, 2) / [50, 50] + [37.76, -122.4], columns=["lat", "lon"]
+    )
+    return df
+
+df = load_data()
+
+st.map(df)

pages/charts.plotly_chart.py

@@ -0,0 +1,24 @@
+import streamlit as st
+import plotly.figure_factory as ff
+import numpy as np
+
+@st.experimental_memo
+def load_data():
+    # Add histogram data
+    x1 = np.random.randn(200) - 2
+    x2 = np.random.randn(200)
+    x3 = np.random.randn(200) + 2
+
+    # Group data together
+    hist_data = [x1, x2, x3]
+    return hist_data
+
+hist_data = load_data()
+
+group_labels = ["Group 1", "Group 2", "Group 3"]
+
+# Create distplot with custom bin_size
+fig = ff.create_distplot(hist_data, group_labels, bin_size=[0.1, 0.25, 0.5])
+
+# Plot!
+st.plotly_chart(fig)

pages/charts.pydeck_chart.py

@@ -0,0 +1,45 @@
+import numpy as np
+import pandas as pd
+import pydeck as pdk
+import streamlit as st
+
+
+@st.experimental_memo
+def load_data():
+    return pd.DataFrame(
+        np.random.randn(1000, 2) / [50, 50] + [37.76, -122.4], columns=["lat", "lon"]
+    )
+
+
+df = load_data()
+
+st.pydeck_chart(
+    pdk.Deck(
+        map_style=None,
+        initial_view_state=pdk.ViewState(
+            latitude=37.76,
+            longitude=-122.4,
+            zoom=11,
+            pitch=50,
+        ),
+        layers=[
+            pdk.Layer(
+                "HexagonLayer",
+                data=df,
+                get_position="[lon, lat]",
+                radius=200,
+                elevation_scale=4,
+                elevation_range=[0, 1000],
+                pickable=True,
+                extruded=True,
+            ),
+            pdk.Layer(
+                "ScatterplotLayer",
+                data=df,
+                get_position="[lon, lat]",
+                get_color="[200, 30, 0, 160]",
+                get_radius=200,
+            ),
+        ],
+    )
+)

pages/charts.pyplot.py

@@ -0,0 +1,14 @@
+import streamlit as st
+import numpy as np
+import matplotlib.pyplot as plt
+
+@st.experimental_memo
+def load_fig():
+    arr = np.random.normal(1, 1, size=100)
+    fig, ax = plt.subplots()
+    ax.hist(arr, bins=20)
+    return fig, ax
+
+fig, ax = load_fig()
+
+st.pyplot(fig)

pages/charts.vega_lite_chart.py

@@ -0,0 +1,24 @@
+import streamlit as st
+import pandas as pd
+import numpy as np
+
+@st.experimental_memo
+def load_data():
+    df = pd.DataFrame(np.random.randn(200, 3), columns=["a", "b", "c"])
+    return df
+
+df = load_data()
+
+st.vega_lite_chart(
+    df,
+    {
+        "mark": {"type": "circle", "tooltip": True},
+        "encoding": {
+            "x": {"field": "a", "type": "quantitative"},
+            "y": {"field": "b", "type": "quantitative"},
+            "size": {"field": "c", "type": "quantitative"},
+            "color": {"field": "c", "type": "quantitative"},
+        },
+    },
+    use_container_width=True,
+)

pages/charts.video.py

@@ -0,0 +1,20 @@
+import streamlit as st
+
+VIDEO_URL = "https://static.streamlit.io/examples/star.mp4"
+
+st.video(VIDEO_URL)
+
+st.write(
+    """
+    #### Video credit:
+
+    Creator: User _fxxu_ from _Pixabay_.
+
+    License: Free for commercial use. No attribution required.
+    https://pixabay.com/en/service/license/
+
+    URL:
+    https://pixabay.com/en/videos/star-long-exposure-starry-sky-sky-6962/
+
+"""
+)

pages/data.dataframe.py

@@ -0,0 +1,12 @@
+import streamlit as st
+import pandas as pd
+import numpy as np
+
+@st.experimental_memo
+def load_data():
+    df = pd.DataFrame(np.random.randn(50, 20), columns=("col %d" % i for i in range(20)))
+    return df
+
+df = load_data()
+
+st.dataframe(df)  # Same as st.write(df)

pages/data.dataframe1.py

@@ -0,0 +1,12 @@
+import streamlit as st
+import pandas as pd
+import numpy as np
+
+@st.experimental_memo
+def load_data():
+    df = pd.DataFrame(np.random.randn(10, 20), columns=("col %d" % i for i in range(20)))
+    return df
+
+df = load_data()
+
+st.dataframe(df.style.highlight_max(axis=0)) 

pages/data.dataframe2.py

@@ -0,0 +1,23 @@
+import pandas as pd
+import streamlit as st
+
+
+# Cache the dataframe so it's only loaded once
+@st.experimental_memo
+def load_data():
+    return pd.DataFrame(
+        {
+            "first column": [1, 2, 3, 4],
+            "second column": [10, 20, 30, 40],
+        }
+    )
+
+
+# Boolean to resize the dataframe, stored as a session state variable
+st.checkbox("Use container width", value=False, key="use_container_width")
+
+df = load_data()
+
+# Display the dataframe and allow the user to stretch the dataframe
+# across the full width of the container
+st.dataframe(df, use_container_width=st.session_state.use_container_width)

pages/data.json.py

@@ -0,0 +1,5 @@
+import streamlit as st
+
+st.json(
+    {"foo": "bar", "baz": "boz", "stuff": ["stuff 1", "stuff 2", "stuff 3", "stuff 5"]}
+)

pages/data.table.py

@@ -0,0 +1,12 @@
+import streamlit as st
+import pandas as pd
+import numpy as np
+
+@st.experimental_memo
+def load_data():
+    df = pd.DataFrame(np.random.randn(10, 5), columns=("col %d" % i for i in range(5)))
+    return df
+
+df = load_data()
+
+st.table(df)

pages/forms.form1.py

@@ -0,0 +1,13 @@
+import streamlit as st
+
+with st.form("my_form"):
+    st.write("Inside the form")
+    slider_val = st.slider("Form slider")
+    checkbox_val = st.checkbox("Form checkbox")
+
+    # Every form must have a submit button.
+    submitted = st.form_submit_button("Submit")
+    if submitted:
+        st.write("slider", slider_val, "checkbox", checkbox_val)
+
+st.write("Outside the form")

pages/forms.form2.py

@@ -0,0 +1,8 @@
+import streamlit as st
+
+form = st.form("my_form")
+form.slider("Inside the form")
+st.slider("Outside the form")
+
+# Now add a submit button to the form:
+form.form_submit_button("Submit")

pages/layout.columns1.py

@@ -0,0 +1,20 @@
+import streamlit as st
+
+col1, col2, col3 = st.columns(3)
+
+with col1:
+    st.header("A cat")
+    st.image("https://static.streamlit.io/examples/cat.jpg")
+    st.markdown("By [@phonvanna](https://unsplash.com/photos/0g7BJEXq7sU)")
+
+
+with col2:
+    st.header("A dog")
+    st.image("https://static.streamlit.io/examples/dog.jpg")
+    st.markdown("By [@shotbyrain](https://unsplash.com/photos/rmkIqi_C3cA)")
+
+
+with col3:
+    st.header("An owl")
+    st.image("https://static.streamlit.io/examples/owl.jpg")
+    st.markdown("By [@zmachacek](https://unsplash.com/photos/ZN4CzqizIyI)")

pages/layout.columns2.py

@@ -0,0 +1,16 @@
+import streamlit as st
+import numpy as np
+
+@st.experimental_memo
+def load_data():
+    data = np.random.randn(10, 1)
+    return data
+
+col1, col2 = st.columns([3, 1])
+data = load_data()
+
+col1.subheader("A wide column with a chart")
+col1.line_chart(data)
+
+col2.subheader("A narrow column with the data")
+col2.write(data)

pages/layout.container1.py

@@ -0,0 +1,10 @@
+import streamlit as st
+import numpy as np
+import pandas as pd
+
+with st.container():
+    st.write("This is inside the container")
+
+    # You can call any Streamlit command, including custom components:
+    st.bar_chart(np.random.randn(50, 3))
+st.write("This is outside the container")

pages/layout.container2.py

@@ -0,0 +1,8 @@
+import streamlit as st
+
+container = st.container()
+container.write("This is inside the container")
+st.write("This is outside the container")
+
+# Now insert some more in the container
+container.write("This is inside too")

pages/layout.expander.py

@@ -0,0 +1,14 @@
+import streamlit as st
+
+st.bar_chart({"d6": [1, 5, 2, 6, 2, 1]})
+
+with st.expander("See explanation"):
+    st.write(
+        """
+        The chart above shows some numbers I picked for you.
+        I rolled actual dice for these, so they're *guaranteed* to
+        be random.
+        """
+    )
+    st.image("https://static.streamlit.io/examples/dice.jpg", width=200)
+    st.markdown("Photo by [@brett_jordon](https://unsplash.com/photos/4aB1nGtD_Sg)")

pages/layout.tabs1.py

@@ -0,0 +1,14 @@
+import streamlit as st
+
+tab1, tab2, tab3 = st.tabs(["Cat", "Dog", "Owl"])
+with tab1:
+    st.header("A cat")
+    st.image("https://static.streamlit.io/examples/cat.jpg", width=200)
+
+with tab2:
+    st.header("A dog")
+    st.image("https://static.streamlit.io/examples/dog.jpg", width=200)
+
+with tab3:
+    st.header("An owl")
+    st.image("https://static.streamlit.io/examples/owl.jpg", width=200)

pages/layout.tabs2.py

@@ -0,0 +1,11 @@
+import streamlit as st
+import numpy as np
+
+tab1, tab2 = st.tabs(["📈 Chart", "🗃 Data"])
+data = np.random.randn(10, 1)
+
+tab1.subheader("A tab with a chart")
+tab1.line_chart(data)
+
+tab2.subheader("A tab with the data")
+tab2.write(data)

pages/metric.example1.py

@@ -0,0 +1,3 @@
+import streamlit as st
+
+st.metric(label="Temperature", value="70 °F", delta="1.2 °F", delta_color="normal")

pages/metric.example2.py

@@ -0,0 +1,6 @@
+import streamlit as st
+
+col1, col2, col3 = st.columns(3)
+col1.metric("Temperature", "70 °F", "1.2 °F")
+col2.metric("Wind", "9 mph", "-8%")
+col3.metric("Humidity", "86%", "4%")

pages/metric.example3.py

@@ -0,0 +1,4 @@
+import streamlit as st
+
+st.metric(label="Gas price", value=4, delta=-0.5, delta_color="inverse")
+st.metric(label="Active developers", value=123, delta=123, delta_color="off")

pages/requirements.txt

@@ -0,0 +1,11 @@
+pandas==1.2.5
+plotly==5.1.0
+bokeh==2.4.3
+graphviz==0.17
+requests==2.22.0
+matplotlib==3.4.1
+numpy==1.22.0
+scipy
+altair==4.2.0
+pydeck==0.7.1
+streamlit==1.13.0

pages/text.caption.py

@@ -0,0 +1,3 @@
+import streamlit as st
+
+st.caption('This is a caption')

pages/text.code.py

@@ -0,0 +1,5 @@
+import streamlit as st
+
+code = """def hello():
+    print("Hello, Streamlit!")"""
+st.code(code, language="python")

pages/text.header.py

@@ -0,0 +1,3 @@
+import streamlit as st
+
+st.header("This is a header")

pages/text.latex.py

@@ -0,0 +1,9 @@
+import streamlit as st
+
+st.latex(
+    r"""
+    a + ar + a r^2 + a r^3 + \cdots + a r^{n-1} =
+    \sum_{k=0}^{n-1} ar^k =
+    a \left(\frac{1-r^{n}}{1-r}\right)
+    """
+)

pages/text.markdown.py

@@ -0,0 +1,3 @@
+import streamlit as st
+
+st.markdown("Streamlit is **_really_ cool**.")

pages/text.subheader.py

@@ -0,0 +1,3 @@
+import streamlit as st
+
+st.subheader("This is a subheader")

pages/text.text.py

@@ -0,0 +1,3 @@
+import streamlit as st
+
+st.text("This is some text.")

pages/text.title.py

@@ -0,0 +1,3 @@
+import streamlit as st
+
+st.title("This is a title")

pages/text.write1.py

@@ -0,0 +1,3 @@
+import streamlit as st
+
+st.write("Hello, *World!* :sunglasses:")

pages/text.write2.py

@@ -0,0 +1,7 @@
+import streamlit as st
+import pandas as pd
+
+st.write(1234)
+st.write(
+    pd.DataFrame({"first column": [1, 2, 3, 4], "second column": [10, 20, 30, 40]})
+)

pages/text.write3.py

@@ -0,0 +1,13 @@
+import streamlit as st
+import pandas as pd
+
+@st.experimental_memo
+def load_data():
+    data_frame = pd.DataFrame(
+        {"first column": [1, 2, 3, 4], "second column": [10, 20, 30, 40]}
+    )
+    return data_frame
+
+data_frame = load_data()
+st.write("1 + 1 = ", 2)
+st.write("Below is a DataFrame:", data_frame, "Above is a dataframe.")

pages/widget.button.py

@@ -0,0 +1,6 @@
+import streamlit as st
+
+if st.button("Say hello"):
+    st.write("Why hello there")
+else:
+    st.write("Goodbye")

pages/widget.checkbox.py

@@ -0,0 +1,5 @@
+import streamlit as st
+
+agree = st.checkbox("I agree")
+if agree:
+    st.write("Great!")

pages/widget.color_picker.py

@@ -0,0 +1,4 @@
+import streamlit as st
+
+color = st.color_picker('Pick A Color', '#00f900')
+st.write('The current color is', color)

pages/widget.date_input.py

@@ -0,0 +1,5 @@
+import streamlit as st
+import datetime
+
+d = st.date_input("When's your birthday", datetime.date(2020, 8, 11))
+st.write("Your birthday is:", d)

pages/widget.download_button.py

@@ -0,0 +1,41 @@
+import streamlit as st
+import pandas as pd
+import numpy as np
+
+@st.experimental_memo
+def load_data():
+    data = pd.DataFrame(
+        np.random.randn(1000, 2),
+        columns=['a', 'b'])
+
+    return data
+
+@st.experimental_memo
+def convert_df(df):
+    # IMPORTANT: Cache the conversion to prevent computation on every rerun
+    return df.to_csv().encode('utf-8')
+
+my_large_df = load_data()
+csv = convert_df(my_large_df)
+
+st.download_button(
+     label="Download data as CSV",
+     data=csv,
+     file_name='large_df.csv',
+     mime='text/csv',
+ )
+
+text_contents = '''This is some text'''
+st.download_button('Download some text', text_contents)
+
+binary_contents = b'example content'
+# Defaults to 'application/octet-stream'
+st.download_button('Download binary file', binary_contents)
+
+with open("pages/flower.png", "rb") as file:
+    btn = st.download_button(
+        label="Download image",
+        data=file,
+        file_name="flower.png",
+        mime="image/png"
+    )

pages/widget.file_uploader.py

@@ -0,0 +1,6 @@
+import streamlit as st
+
+uploaded_files = st.file_uploader("Choose a file", accept_multiple_files=True)
+
+for uploaded_file in uploaded_files:
+    st.write("filename:", uploaded_file.name)