Basic Example

This example demonstrates a simple Gradio application running on nanoHUB.

Jupyter Notebook Approach

Create a new Jupyter notebook on nanoHUB and add the following cells:

Cell 1: Load the extension and configure environment

%load_ext nanohubgradio
%set_gradio_env

Cell 2: Create and run the Gradio app

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

# Simple sample data
df = pd.DataFrame({
    "x": list(range(1, 11)),
    "y": [1, 4, 2, 8, 5, 7, 6, 9, 10, 3],
    "group": ["A"] * 5 + ["B"] * 5
})

def update_plot(group):
    """Update plot based on selected group"""
    dff = df if group == "ALL" else df[df["group"] == group]
    fig = px.line(dff, x="x", y="y", markers=True, title=f"y vs x ({group})")
    stats = f"Rows: {len(dff)} | y min: {dff['y'].min()} | y max: {dff['y'].max()}"
    return fig, stats

# Create Gradio interface
with gr.Blocks(title="Basic Gradio App") as app:
    gr.Markdown("# Basic Gradio App")
    gr.Markdown("Pick a group to filter the chart:")

    with gr.Row():
        group = gr.Dropdown(
            choices=["A", "B", "ALL"],
            value="ALL",
            label="Select Group",
            interactive=True
        )

    with gr.Row():
        plot = gr.Plot(label="Plot")

    with gr.Row():
        stats = gr.Markdown()

    # Set up the callback
    group.change(
        fn=update_plot,
        inputs=[group],
        outputs=[plot, stats]
    )

    # Load initial plot
    app.load(fn=update_plot, inputs=[group], outputs=[plot, stats])

if __name__ == "__main__":
    # Use environment variables set by %set_gradio_env or start_gradio
    host = os.getenv("GRADIO_HOST", "0.0.0.0")
    port = int(os.getenv("GRADIO_PORT", "8001"))
    root_path = os.getenv("GRADIO_ROOT_PATH", "")

    app.launch(
        server_name=host,
        server_port=port,
        root_path=root_path if root_path else None,
        share=False,
        quiet=True,
        inline=False
    )

Understanding the Code

1. Loading the extension: %load_ext nanohubgradio registers the magic command

2. Setting the environment: %set_gradio_env configures all necessary environment variables

3. Creating the app: Standard Gradio Blocks application code

4. Running the server: app.launch() starts the development server

The magic command automatically detects your nanoHUB session and configures:

• The correct root path for the weber proxy

• The host and port settings

• Access URLs for external connection

Standalone Python File Approach

You can also create a standalone Python file and use the start_gradio command.

basic.py

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

# Simple sample data
df = pd.DataFrame({
    "x": list(range(1, 11)),
    "y": [1, 4, 2, 8, 5, 7, 6, 9, 10, 3],
    "group": ["A"] * 5 + ["B"] * 5
})

def update_plot(group):
    """Update plot based on selected group"""
    dff = df if group == "ALL" else df[df["group"] == group]
    fig = px.line(dff, x="x", y="y", markers=True, title=f"y vs x ({group})")
    stats = f"Rows: {len(dff)} | y min: {dff['y'].min()} | y max: {dff['y'].max()}"
    return fig, stats

# Create Gradio interface
with gr.Blocks(title="Basic Gradio App") as app:
    gr.Markdown("# Basic Gradio App")
    gr.Markdown("Pick a group to filter the chart:")

    with gr.Row():
        group = gr.Dropdown(
            choices=["A", "B", "ALL"],
            value="ALL",
            label="Select Group",
            interactive=True
        )

    with gr.Row():
        plot = gr.Plot(label="Plot")

    with gr.Row():
        stats = gr.Markdown()

    # Set up the callback
    group.change(
        fn=update_plot,
        inputs=[group],
        outputs=[plot, stats]
    )

    # Load initial plot
    app.load(fn=update_plot, inputs=[group], outputs=[plot, stats])

if __name__ == "__main__":
    # Use environment variables set by %set_gradio_env or start_gradio
    host = os.getenv("GRADIO_HOST", "0.0.0.0")
    port = int(os.getenv("GRADIO_PORT", "8001"))
    root_path = os.getenv("GRADIO_ROOT_PATH", "")

    app.launch(
        server_name=host,
        server_port=port,
        root_path=root_path if root_path else None,
        share=False,
        quiet=True,
        inline=False
    )

Running the App

Save this as basic.py and run it using:

start_gradio basic.py

This command will:

1. Start your Gradio application on port 8001

2. Configure the weber proxy on port 8000 for external access

3. Automatically inject a nanoHUB header bar with support and terminate buttons

4. Display the access URL in your terminal

Key Features

• Automatic Header Injection: The start_gradio tool automatically adds a header bar with nanoHUB branding

• Responsive Layout: Uses Gradio’s Row/Column components for responsive design

• Interactive Callbacks: Uses group.change() to update the plot when the dropdown changes

• Initial Load: Uses app.load() to display the plot when the app first loads

  routes_pathname_prefix=os.getenv(“DASH_ROUTES_PATHNAME_PREFIX”), requests_pathname_prefix=os.getenv(“DASH_REQUESTS_PATHNAME_PREFIX”)

  )

  # Create a bar chart fig = px.bar(df, x=”Fruit”, y=”Amount”, color=”City”, barmode=”group”)

  app.layout = html.Div([

  html.H1(“Fruit Sales Dashboard”, style={‘textAlign’: ‘center’}), html.Hr(), dcc.Graph(

  id=’fruit-chart’, figure=fig

  )

  ])

  if __name__ == “__main__”:

  app.run(

  jupyter_server_url=os.environ.get(“DASH_BASE_PROXY”), host=os.environ.get(“DASH_HOST”, “0.0.0.0”), port=os.environ.get(“DASH_PORT”, “8001”),

  )

Then run from the terminal:

start_dash --app app.py

This approach:

• Automatically configures the environment

• Launches the wrwroxy reverse proxy

• Injects a header bar with nanoHUB branding

• Provides a “Submit a ticket” link for support

• Includes a “Terminate Session” button