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:
Input which is text.
Output which is text.
A build_model function.
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())