How To Gradio: Understanding the basics of gradio.Interface — Parameter (description= “add app description”)
gradio.Interface is the main class used to build the UI using the Gradio library. In a few lines of code, you can create a web app for machine learning models, chatbots, dashboards, practically whatever your imagination can spin up. If you can translate your idea into a Python function, Gradio can handle the presentation.
In this series, Understanding the basics of gradio.Interface, we are going to help you understand as simply as possible the key concepts of using the gradio.Interface class. We will also discuss the class’s most important parameters and methods so that you can improve your app-building skills with Gradio.
Parameter (description= “add app description”)
In this article, we will demonstrate how to use one of the “descriptive parameters” of the gradio.Interface class: ‘description=’. The descriptive parameters of the gradio.Interface class (title=, description=, and article=), allows you to provide additional information to the users such as the App’s name, description, instructions, disclaimers, and any other relevant information you wish to convey to the users of the app.
Getting Started With Gradio
To get started with Gradio, simply install Gradio from PyPi via pip
pip install gradioHow To Add A Description To Your Gradio App
The gradio.Interface(description=) parameter expects a str. You can simply pass the description of your app as a str.
Above is the description of the gradio.Interface class “description” parameter according to the official documentation found here.
There are a few highlighted points to consider when setting the description of your app. We’ll have a look at these points as well as some additional tips that will help you build more efficiently.
“a description for the interface; if provided, appears above the input and output components and beneath the title in regular font.”
import gradio as gr
import random
def greet_number(name):
greeting = "Hello " + name
lucky_number = random.randint(1, 100)
return greeting, lucky_number
demo = gr.Interface(fn=greet_number,
inputs=gr.Textbox(),
outputs=gr.Textbox(),
title="GreetLucky", # <--- Title/Name of app
description="This Gradio app 'GreetLucky' takes a name as input and creates" #<-- Description of app
" a friendly greeting along with a randomly assigned lucky number between 1 and 100."
)
demo.launch()
-Alternative 1
If your description is a bit lengthy, a better option would be to store the description as a variable and then pass that variable to the ‘description=’ parameter.
import gradio as gr
import random
def greet_number(name):
greeting = "Hello " + name
lucky_number = random.randint(1, 100)
return greeting, lucky_number
# <-- set description variable -->
desc = "This Gradio app 'GreetLucky' takes a name as input and creates " \
"a friendly greeting along with a randomly assigned lucky number between 1 and 100."
demo = gr.Interface(fn=greet_number,
inputs=gr.Textbox(),
outputs=gr.Textbox(),
title="GreetLucky",
description=desc # <--- pass description variable to parameter
)
demo.launch()“Accepts Markdown and HTML content.”
You can customize the way your description is presented by styling it using Markdown or HTML
- Using Markdown
import gradio as gr
import random
def greet_number(name):
greeting = "Hello " + name
lucky_number = random.randint(1, 100)
return greeting, lucky_number
demo = gr.Interface(fn=greet_number,
inputs=gr.Textbox(),
outputs=gr.Textbox(),
title="GreetLucky",
description="This Gradio app **GreetLucky** takes a *name as input* and creates " #<-- Description using Markdown
"a friendly greeting along with a randomly assigned ***lucky number between 1 and 100.***"
)
-Alternative 1
import gradio as gr
import random
def greet_number(name):
greeting = "Hello " + name
lucky_number = random.randint(1, 100)
return greeting, lucky_number
# <-- set description variable with Markdown -->
desc = "This Gradio app **GreetLucky** takes a *name as input* and creates " \
"a friendly greeting along with a randomly assigned ***lucky number between 1 and 100.***"
demo = gr.Interface(fn=greet_number,
inputs=gr.Textbox(),
outputs=gr.Textbox(),
title="GreetLucky",
description=desc # <-- pass description variable to parameter
)
demo.launch()-Alternative 2
If your description is very lengthy, an option could be to store it in a .txt, .md, or .html file. Or maybe you already have such a file you would like to use for your description. You can’t pass the file directly to the parameter so you’ll have to write a function to read the file into a str variable, then pass that variable to the ‘description=’ parameter.
import gradio as gr
import random
from pathlib import Path
desc_md = Path("Path to your .md/.html/.txt file") #<-- Path to file with description written in Markdown
def read_markdown_file(file_path): #<-- Function to convert file to str
with open(file_path, 'r', encoding='utf-8') as file:
markdown_string = file.read()
return markdown_string
def greet_number(name):
greeting = "Hello " + name
lucky_number = random.randint(1, 100)
return greeting, lucky_number
demo = gr.Interface(fn=greet_number,
inputs=gr.Textbox(),
outputs=gr.Textbox(),
title="GreetLucky",
description=read_markdown_file(desc_md)
)
demo.launch()- Using HTML
import gradio as gr
import random
def greet_number(name):
greeting = "Hello " + name
lucky_number = random.randint(1, 100)
return greeting, lucky_number
demo = gr.Interface(fn=greet_number,
inputs=gr.Textbox(),
outputs=gr.Textbox(),
title="GreetLucky",
description="<h3>This Gradio app</h3><p><strong>GreetLucky</strong> takes a <em>name as " #<-- Description using HTML
"input</em> and creates a friendly greeting <u>along with a randomly assigned</u>"
"<strong><em>lucky number between 1 and 100.</em></strong></p>"
)
demo.launch()
-Alternative 1
import gradio as gr
import random
def greet_number(name):
greeting = "Hello " + name
lucky_number = random.randint(1, 100)
return greeting, lucky_number
# <-- set description variable with HTML -->
desc = "<h3>This Gradio app</h3><p><strong>GreetLucky</strong> takes a <em>name as input</em> and creates " \
"a friendly greeting <u>along with a randomly assigned</u> " \
"<strong><em>lucky number between 1 and 100.</em></strong></p>"
demo = gr.Interface(fn=greet_number,
inputs=gr.Textbox(),
outputs=gr.Textbox(),
title="GreetLucky",
description=desc # <-- pass description variable to parameter
)
demo.launch()-Alternative 2
import gradio as gr
import random
from pathlib import Path
desc_html = Path("Path to your .md/.html/.txt file") #<-- Path to file with description written in HTML
def read_html_file(file_path):
with open(file_path, 'r', encoding='utf-8') as file: #<-- Function to convert file to str
html_string = file.read()
return html_string
def greet_number(name):
greeting = "Hello " + name
lucky_number = random.randint(1, 100)
return greeting, lucky_number
demo = gr.Interface(fn=greet_number,
inputs=gr.Textbox(),
outputs=gr.Textbox(),
title="GreetLucky",
description=read_html_file(desc_html)
)
demo.launch()Hopefully after reading, you now understand:
- How to add a description to your Gradio app
If you would like to practice building with Gradio, you can do so right in your browser for free at the Gradio Playground.
Read the official Gradio documentation regarding the gradio.Interface class here.
Read more in the series Understanding the basics of gradio.Interface.
