Add a web UI with Gradio (basic)

Audience: Users who want to add a web UI written with Python.

Prereqs: Basic python knowledge.


What is Gradio?

Gradio is a Python library that automatically generates a web interface to demo a machine learning model.


Install gradio

First, install gradio.

pip install gradio

Create the gradio demo app

To explain how to use Gradio with Lightning, let’s replicate the example running here.

In the next few sections we’ll build an app step-by-step. First create a file named app.py with the app content:

import lightning as L
from lightning.app.components import ServeGradio
import gradio as gr

class LitGradio(ServeGradio):

    inputs = gr.inputs.Textbox(default='lightning', label='name input')
    outputs = gr.outputs.Textbox(label='output')
    examples = [["hello lightning"]]

    def predict(self, input_text):
        return self.model(input_text)

    def build_model(self):
        fake_model = lambda x: f"hello {x}"
        return fake_model

class RootFlow(L.LightningFlow):
    def __init__(self):
        super().__init__()
        self.lit_gradio = LitGradio()

    def run(self):
        self.lit_gradio.run()

    def configure_layout(self):
        return [{"name": "home", "content": self.lit_gradio}]

app = L.LightningApp(RootFlow())

add “gradio” to a requirements.txt file:

echo 'gradio' >> requirements.txt

this is a best practice to make apps reproducible.


Run the app

Run the app locally to see it!

lightning run app app.py

Now run it on the cloud as well:

lightning run app app.py --cloud

Step-by-step walkthrough

In this section, we explain each part of this code in detail.


Create a Gradio component

To create a Gradio component, simply take any Gradio app and subclass it from ServeGradio. If you haven’t created a Gradio demo, you have to implement the following elements:

  1. Input which is text.

  2. Output which is text.

  3. A build_model function.

  4. A predict function.


Here’s an example:

from lightning.app.components import ServeGradio
import gradio as gr

class LitGradio(ServeGradio):

    inputs = gr.inputs.Textbox(default='lightning', label='name input')
    outputs = gr.outputs.Textbox(label='output')

    def predict(self, input_text):
        return self.model(input_text)

    def build_model(self):
        fake_model = lambda x: f"hello {x}"
        return fake_model

This fake model simply concatenates 2 strings.


Route the UI in the root component

Now, tell the Root component in which tab to render this component’s UI. In this case, we render the LitGradio UI in the home tab of the application.

import lightning as L
from lightning.app.components import ServeGradio
import gradio as gr

class LitGradio(ServeGradio):

    inputs = gr.inputs.Textbox(default='lightning', label='name input')
    outputs = gr.outputs.Textbox(label='output')
    examples = [["hello lightning"]]

    def predict(self, input_text):
        return self.model(input_text)

    def build_model(self):
        fake_model = lambda x: f"hello {x}"
        return fake_model

class RootFlow(L.LightningFlow):
    def __init__(self):
        super().__init__()
        self.lit_gradio = LitGradio()

    def run(self):
        self.lit_gradio.run()

    def configure_layout(self):
        return [{"name": "home", "content": self.lit_gradio}]

app = L.LightningApp(RootFlow())

Call run

Finally, don’t forget to call run inside the Root Flow to serve the Gradio app.

import lightning as L
from lightning.app.components import ServeGradio
import gradio as gr

class LitGradio(ServeGradio):

    inputs = gr.inputs.Textbox(default='lightning', label='name input')
    outputs = gr.outputs.Textbox(label='output')
    examples = [["hello lightning"]]

    def predict(self, input_text):
        return self.model(input_text)

    def build_model(self):
        fake_model = lambda x: f"hello {x}"
        return fake_model

class RootFlow(L.LightningFlow):
    def __init__(self):
        super().__init__()
        self.lit_gradio = LitGradio()

    def run(self):
        self.lit_gradio.run()

    def configure_layout(self):
        return [{"name": "home", "content": self.lit_gradio}]

app = L.LightningApp(RootFlow())