Skip to main content

App Builder [BETA]

The App Builder is an IDE to transform User Defined Functions (UDFs) into interactive, shareable apps.

Data scientists often need to make analytics interactive and accessible to broader audiences. However, building traditional React apps with maps and widgets can be impractical, especially considering prototypes might be discarded. Additionally, frontend frameworks are not well-suited for transforming data or handling large datasets.

With this in mind, the App Builder enables users to build and run apps with serverless Streamlit, an open source framework to deliver dynamic data apps with just a few lines of Python. These are some of its capabilities to keep in mind:

Build apps​

You build apps by writing Python in the code editor, shown below. As you write code you'll notice the app automatically reruns as code and widgets change (configurable in the settings).

You may add input widgets that interact with UDFs, display data with data and text elements, and structure the app with layout components.


Try running the code snippets below to acquaint yourself with the App Builder.

import streamlit as st

st.write("Hello, *Fused!* :rocket:")

Dependencies​

Click "Requirements" on the top-right menu of the code editor to set Python packages for the app. Only packages compatible with Pyodide are supported. Please get in touch if you need help with a specific package.

You may also choose to install dependencies at runtime to reduce start-up time. Use micropip to install packages at runtime. This is also useful when sharing apps from GitHub Gists, which cannot specify dependencies ahead of execution.

import micropip
await micropip.install("pydeck")
import pydeck as pdk

Write UDFs​

You may define UDFs in the App Builder's code editor and invoke them with fused.run. This snippet creates a UDF that returns a DataFrame with a column of zeros with a length determined by a slider widget.

import fused
import streamlit as st

count = st.slider("Count", 1, 10, 4)

@fused.udf
def udf(count: int = 1):
    import pandas as pd
    return pd.DataFrame({'values': [0] * count})

df = fused.run(udf, count=count)
st.write(df)

You may also run the UDF on a remote worker by setting engine='realtime' in the fused.run call.

df = fused.run(udf, count=count, engine='realtime')

Call UDFs​

Apps may call UDFs and load their output into memory. This enables them to run resource-intensive operations and use libraries unsupported by Pyodide. These snippets illustrate a few ways to call UDFs.

With fused.run (beta)​

Call a UDF by its shared token with fused.run and pass parameters from a slider.

import fused
import streamlit as st

threshold = st.sidebar.slider("Threshold", 0, 1000, 250)
df = fused.run('fsh_1uQkWaPFfB2O7Qy1zzOHS9', threshold=threshold)

HTTP endpoints​

Call UDF HTTP endpoints with the requests library and pass parameters from a dropdown selectbox.

import streamlit as st
import requests

city = st.selectbox("Select city", ("Boston", "Paris", "New York"))
url = f"https://www.fused.io/server/v1/realtime-shared/fsh_2wEv0k8Xu2grl4vTVRlGVk/run/file?dtype_out_vector=geojson&city={city}"
response = requests.get(url)
st.json(response.json())

Render the raster response of UDFs as images.

import streamlit as st

st.image('https://www.fused.io/server/v1/realtime-shared/fsh_7Yuq2R1Ru1x5hgEEfNDF5t/run/tiles/11/583/787?dtype_out_raster=png')

Pydeck​

Create a pydeck TileLayer that calls a UDF HTTP endpoint.

import pydeck as pdk
import streamlit as st

url_overture = "https://www.fused.io/server/v1/realtime-shared/c8679490a7c130178e2781a45f4090208c9bcd8d8d7572532c4c39c4d0914467/run/tiles/{z}/{x}/{y}?dtype_out_vector=geojson&return_object=gdf_overture"
st.pydeck_chart(
    pdk.Deck(
        map_style="mapbox://styles/mapbox/dark-v9",
        initial_view_state=pdk.ViewState(latitude=40.7431, longitude=-73.9874, zoom=14, pitch=25),
        layers=[
            pdk.Layer(
                "TileLayer",
                data=url_overture,
                get_line_color=[255, 25, 2, 100],
                stroked=True,
                get_line_width=2,
                pickable=True,
                filled=False,
            )
        ],
    )
)

Folium​

Create a streamlit-folium TileLayer that calls a UDF HTTP endpoint.

import folium
from streamlit_folium import st_folium

m = folium.Map(location=[22.5, -115], zoom_start=4)
url_raster = 'https://www.fused.io/server/v1/realtime-shared/fsh_3QYQiMYzgyV18rUBdrOEpO/run/tiles/{z}/{x}/{y}?dtype_out_raster=png'
folium.raster_layers.TileLayer(tiles=url_raster, attr='fu', interactive=True,).add_to(m)
st_folium(m)

Caching​

It can be helpful to cache the response of UDF calls. To cache a function in Streamlit, decorate it with @st.cache_data.

import fused
import streamlit as st

@st.cache_data
def cached_output():
    return fused.run('fsh_1uQkWaPFfB2O7Qy1zzOHS9')

df = cached_output()

Share​

The App Builder menu includes options to generate a URL to share the app or or embed it with an <iframe>.

File

The app is saved to Fused and referenced by a token, such as https://www.fused.io/workbench#app/s/i/fa_45G5QVNVUPJPo4jr6k4mtY.

The app is not saved to Fused. Instead, the code is serialize as part of the URL string such as https://www.fused.io/workbench#app/s/aH4sIAAAAAAAAA....

GitHub gists​

Apps can be saved as GitHub Gists. They can be loaded from a Gist through the UI or by appending the Gist ID to the following URL.

https://www.fused.io/workbench#app/s/u/https://gist.github.com/pgzmnk/43045302f3b668ab5482d8a23f6f4de5

Troubleshoot​

Click "Reset app" on the top-right menu of the code editor in case things aren't working as expected.

File