Embedding Gradio, Streamlit, and Plotly Charts in WordPress Using Hugging Face Spaces

Creating interactive visualizations and apps is a nice way to engage your audience to the content. Tools like Gradio, Streamlit, and Plotly provide powerful capabilities for creating these visualizations and apps. In this post, we’ll demonstrate how you can create interactive charts with these tools and embed them in your WordPress site using Hugging Face Spaces.

1. Creating Interactive Charts

A. Streamlit

Streamlit is an open-source app framework for Machine Learning and Data Science teams. Here’s how you can create a simple bar chart using Streamlit:

import streamlit as st
import pandas as pd
import plotly.express as px

data = {'Category': ['A', 'B', 'C', 'D'], 'Value': [10, 20, 30, 40]}
df = pd.DataFrame(data)

def main():
    st.title('Streamlit Bar Chart Demo')
    st.write('This app displays a Plotly bar chart for some sample data.')
    st.subheader('Sample Data:')
    st.write(df)
    fig = px.bar(df, x='Category', y='Value', title='Bar Chart')
    st.plotly_chart(fig)

if __name__ == '__main__':
    main()

Instructions on how to deploy the apps is in section B. Once you deploy the app to huggingface spaces, you can get the embedding iframe as follows:

<iframe
	src="https://ashishdahal143-streamlit-demo.hf.space"
	width="850"
	height="450"
></iframe>

This iframe can be embedded directly into the wordpress post with ‘Custom HTML’ block.

Result:

B. Gradio

Gradio allows you to quickly create customizable UI components around your models. Below is a Gradio app displaying the same bar chart:

import gradio as gr
import pandas as pd
import plotly.express as px

data = {'Category': ['A', 'B', 'C', 'D'], 'Value': [10, 20, 30, 40]}
df = pd.DataFrame(data)

def create_bar_chart():
    fig = px.bar(df, x='Category', y='Value', title='Bar Chart')
    return fig

iface = gr.Interface(create_bar_chart, inputs=None, outputs="plot",
                     title="Gradio Bar Chart Demo", 
                     description="This app displays a Plotly bar chart for some sample data.")
iface.launch()

For gradio, there is an option in huggingface to either embed an iframe or a native HTML component. HTML component can be embedded similiarly to iframe:

<script
	type="module"
	src="https://gradio.s3-us-west-2.amazonaws.com/4.19.2/gradio.js"
></script>

<gradio-app src="https://ashishdahal143-gradio-demo.hf.space"></gradio-app>

Result:

C. Plotly

Plotly is a graphing library that makes interactive, publication-quality graphs online. Here’s how to create a Plotly bar chart and export it as an HTML file:

import pandas as pd
import plotly.express as px

data = {'Category': ['A', 'B', 'C', 'D'], 'Value': [10, 20, 30, 40]}
df = pd.DataFrame(data)

fig = px.bar(df, x='Category', y='Value', title='Bar Chart')
fig.write_html("index.html")

<iframe
	src="https://ashishdahal143-plotly-demo.static.hf.space"
	frameborder="0"
	width="850"
	height="450"
></iframe>

Result:

D. Dash

Dash is a low-code framework for rapidly building plotly data apps in Python. Below is the same plotly figure rendered using dash:

import dash
from dash import dcc, html
import plotly.express as px
import pandas as pd

# Data
data = {'Category': ['A', 'B', 'C', 'D'], 'Value': [10, 20, 30, 40]}
df = pd.DataFrame(data)

# Plotly Figure
fig = px.bar(df, x='Category', y='Value', title='Bar Chart')

# Dash App
app = dash.Dash(__name__)
app.layout = html.Div([
    html.H1("Bar Chart Dash App"),
    dcc.Graph(figure=fig)
])

if __name__ == '__main__':
    app.run_server(debug=True, host="0.0.0.0", port="7860")

For deploying a dash app in huggingface spaces, you would need to dockerize it. The following is the dockerfile for deploying the dash app:

# Use the official Python base image
FROM python:3.9-slim

# Set the working directory
WORKDIR /app

# Install Python dependencies directly
RUN pip install --no-cache-dir dash==2.11.0 pandas==2.0.1

# Copy the application code
COPY . .

# Expose the port that the Dash app will run on
EXPOSE 7860

# Command to run the Dash app
CMD ["python", "app.py"]

It is important to use port 7860 to deploy the app as it is the default port used by huggingface spaces.

2. Embedding in WordPress

To embed these visualizations in WordPress, you can utilize Hugging Face Spaces. Hugging Face Spaces provides an easy way to host, share, and embed machine learning models and data apps.

Step-by-Step Guide:

1. Create Your App: Develop your app using Streamlit, Gradio, Plotly or Dash.
2. Deploy on Hugging Face Spaces: Push your app to a repository on Hugging Face. Once you’ve pushed your code, Hugging Face automatically deploys your app in a Space.
3. Embed in WordPress: Once your app is live, you can embed it in WordPress using an iframe. Go to your Space, find the Share button, and copy the iframe code provided.
4. Customize in WordPress: Paste the iframe code into the HTML section of your WordPress editor. You can adjust the width and height to fit your layout.

3. Conclusion

By leveraging the power of Gradio, Streamlit, Plotly and Dash with Hugging Face Spaces, you can create dynamic and interactive data visualizations and machine learning apps. Embedding these into your WordPress site can enhance your content, making it more engaging and informative for your audience. Whether you’re presenting data insights, showcasing machine learning models, or simply displaying interactive charts, these tools provide a robust solution for bringing your data to life online.