How To Gradio: Understanding the basics of gradio.Interface — Parameter (article= “add app article”)
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 (article= “add app article”)
In this article, we will demonstrate how to use one of the “descriptive parameters” of the gradio.Interface class: ‘article=’. 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 An Article To Your Gradio App
The gradio.Interface(article=) parameter expects a str. You can simply pass the article (an extended description) of your app as a str.
Above is the description of the gradio.Interface class “article” parameter according to the official documentation found here.
There are a few highlighted points to consider when setting an article (extended description) for your app. We’ll have a look at these points as well as some additional tips that will help you build more efficiently.
“an expanded article explaining the interface; if provided, appears below the input and output components in regular font.”
-Alternative 1
If your article is a bit lengthy, which is usually the case, a better option would be to store the article as a variable and then pass that variable to the ‘article=’ 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 article variable -->
article = "How to Use: Open the GreetLucky app. Enter your name in the provided input box. " \
"Click on the 'Generate Greeting' button Voila! Your personalized greeting " \
"and lucky number will appear on the screen."
demo = gr.Interface(fn=greet_number,
inputs=gr.Textbox(),
outputs=gr.Textbox(),
title="GreetLucky",
article=article, # <--- pass article variable to parameter
)
demo.launch()“Accepts Markdown and HTML content.”
You can customize the way your article 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",
article="**How to Use**:\n * Open the GreetLucky app.\n * Enter your name in the provided input box.\n " #<-- Article using Markdown
"* Click on the 'Submit' button. ***Voila!***. Your personalized greeting "
"and lucky number will appear on the screen.",
)
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 article variable with Markdown -->
article = "**How to Use**:\n * Open the GreetLucky app.\n * Enter your name in the provided input box.\n " \
"* Click on the 'Submit' button. ***Voila!***. Your personalized greeting " \
"and lucky number will appear on the screen."
demo = gr.Interface(fn=greet_number,
inputs=gr.Textbox(),
outputs=[gr.Textbox(), gr.Number()],
title="GreetLucky",
article=article, # <-- pass article variable to parameter
)
demo.launch()-Alternative 2
If your article 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 ‘article=’ parameter.
import gradio as gr
import random
from pathlib import Path
article_md = Path("Path to your .md/.html/.txt file") #<-- Path to file with article 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",
article=read_markdown_file(article_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(), gr.Number()],
title="GreetLucky",
article="<h3>How to Use:</h3> " #<-- Article using HTML
"<ul><li>Open the GreetLucky app.</li> "
"<li><u>Enter your name</u> in the provided input box.</li>"
"<li>Click on the 'Submit' button. <strong>Voila!</strong>. Your personalized greeting "
"and lucky number will appear on the screen.</li></ul>",
)
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 article variable with HTML -->
article = "<h3>How to Use:</h3> " \
"<ul><li>Open the GreetLucky app.</li> " \
"<li>Enter your name in the provided input box.</li>" \
"<li>Click on the 'Submit' button. <strong>Voila!</strong>. Your personalized greeting " \
"and lucky number will appear on the screen.</li></ul>"
demo = gr.Interface(fn=greet_number,
inputs=gr.Textbox(),
outputs=gr.Textbox(),
title="GreetLucky",
article=article, # <-- pass article variable to parameter
)
demo.launch()-Alternative 2
import gradio as gr
import random
from pathlib import Path
article_html = Path("Path to your .md/.html/.txt file") #<-- Path to file with article 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",
article=read_html_file(article_html)
)
demo.launch(Hopefully after reading, you now understand:
- How to add an article 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.
