1. Intro

gradio是一个能够快速建立机器学习demo web应用的工具，仅需简单的几行代码就能构建机器学习模型的可视化交互demo，并分享给你的朋友使用。

与gradio相同功能的竞品有Streamlit，相比Gradio，Streamlit相对复杂，完全熟练使用需要一定时间。

2. quick start

如下展示了一个简单的case，其他所有的case都可套用该模板

import gradio as gr

# 定义处理函数/模型推理
def greet(name):
    return "Hello " + name + "!"

# interface中三个必要参数: 推理函数、输入、输出
demo = gr.Interface(fn=greet, inputs="text", outputs="text")
# 是否开启公网分享
demo.launch(share=False)

可得到如下的界面
在这里插入图片描述

3. 基础组件

3.1 应用界面

简易界面通常使用 gr.Interface(fn, inputs, outputs, ···)
- fn 是一个包装函数，通常为机器学习模型的推理部分
- inputs 输入，通常是gradio的组件，如gr.Image(), 对于文本、图片等简单类型可直接写成[“text”, “image”]
- outputs 输出，同输入
定制化场景通常使用 gr.Blocks()
block一般应用在定制化的复杂场景，可以自己定义很多模块，进行组合，后面会做详细介绍

3.2 输入输出组件

图像 gr.Image(value, label, show_label)
- value: 输入的图像，支持pil, np_array, path, url等格式
- label: 组件名称
- show_label: 是否展示组件名称
文本 gradio.Textbox(value, lines, placeholder, show_copy_button)
- value: 输入文本
- lines: 文本框最少展示行数
- placeholder: 一般用作提示语
- show_copy_button: 是否展示复制按钮
数字 gr.Number(choices, value, label)
数据框 gr.DataFrame()
下拉选项 gr.Dropdown()
markdown gr.Markdown()
文件 gr.Files()
调节带 gradio.Slider(···)
单选 gradio.Radio(choices, value, label)
- choice: 选择项list
- value: 默认选定值
- label: 组件名称

3.3 触发组件

按钮组件：gradio.Button(value)
- value: 按钮的名称
- 通常和click组件联合使用 gradio.Button.click(fn, inputs, outputs)
清除按钮: gradio.ClearButton(components, value)
- components: 要清除的组件
- value: 按钮名称
- 通常和gradio.ClearButton.add(components, ···)以及click()方法联合使用

3.4 布局组件

标签页: gr.Tab()
行布局: gradio.Row()
列布局: gradio.Column()
折叠项: gradio.Accordion(label, ···)

3.5 demo

这里我们使用Block和以上部分组件搭建了一个case

def chat(name,  lan, repeat=1, machine_name="小明"):
    if lan == "chinese":
        reply = "你好,"+name+",我叫"+machine_name
    elif lan == "english":
        reply = "hello, "+name+", my name is"+machine_name
    else:
        reply = "sorry I can't understand you"
    return_text = ""
    for i in range(repeat):
        return_text = return_text+reply+"\n"
    return  return_text

with gr.Blocks() as demo:
    gr.Markdown("# A English And Chinese ChatBot")
    gr.Markdown("</br>")
    with gr.Accordion("参数设置", open=False):
        with gr.Row():
            lan = gr.Radio(choices=["chinese", "english", "other"], value="english", label="语言")
            num = gr.Slider(minimum=1, maximum=10, value=1, label="重复次数", step=1)
            machin_name = gr.Dropdown(choices=["小明", "xiao ming", "小花", "small flower"], value="小花", label="机器人名字")
    with gr.Row():
        input_box = gr.Textbox(placeholder="please input your name", label="inputs", show_label=True, lines=8)
        out_box = gr.Textbox(label="outputs", show_label=True, lines=8)

    with gr.Row():
        btn = gr.Button(value="submit")
        btn.click(fn=chat, inputs=[input_box, lan, num, machin_name], outputs=out_box)
        clear_btn = gr.ClearButton(components=[input_box, out_box], value="clear")

demo.launch()

在这里插入图片描述
根据上面的组件你可以搭建一个80分的模型-用户交互界面了，如果你想把界面搭建的像前端页面一样优雅，继续查看第四章节的进阶组件

4. 进阶组件

gradio.HTML()：可以写一些简单的html来使得整个界面更加优雅
gradio.Examples(examples, inputs, outputs)：展示示例，通过点击示例快速查看结果
- examples 列表,维度与输入一直
- inputs 输入组件实例
- ouputs 输出组件实例

进阶demo

import gradio as gr

def chat(name,  lan, repeat=1, machine_name="小明"):
    if lan == "chinese":
        reply = "你好,"+name+",我叫"+machine_name
    elif lan == "english":
        reply = "hello, "+name+", my name is"+machine_name
    else:
        reply = "sorry I can't understand you"
    return_text = ""
    for i in range(repeat):
        return_text = return_text+reply+"\n"
    return  return_text

html_str = """

    <h1 style='font-family: "Nunito",sans-serif; color: midnightblue !important; font-size: 2.1875rem;text-align: center !important;'>AI Content Generate Demo</h1>
    <h3 style='color: midnightblue !important; font-size: 1.1875rem;text-align: center !important;'> this is a demo that show the artificial intelligent generate content</h3>
"""
with gr.Blocks(title="Demo") as demo:
    with gr.Row():
        ht = gr.HTML(html_str, visible=True)
    with gr.Accordion("参数设置", open=False):
        with gr.Row():
            lan = gr.Radio(choices=["chinese", "english", "other"], value="english", label="语言")
            num = gr.Slider(minimum=1, maximum=10, value=1, label="重复次数", step=1)
            machin_name = gr.Dropdown(choices=["小明", "xiao ming", "小花", "small flower"], value="小花", label="机器人名字")
    with gr.Row():
        input_box = gr.Textbox(placeholder="please input your name", label="inputs", show_label=True, lines=8)
        out_box = gr.Textbox(label="outputs", show_label=True, lines=8)

    with gr.Row():
        btn = gr.Button(value="submit")
        btn.click(fn=chat, inputs=[input_box, lan, num, machin_name], outputs=out_box)
        clear_btn = gr.ClearButton(components=[input_box, out_box], value="clear")

    with gr.Box():
        with gr.Column():
            gr.Markdown("""
            ## Text Examples
            ##### click the example to obtain result
            """)
            exp = gr.Examples(examples=["小明", "xiao red"], inputs=input_box, outputs=out_box)
            gr.Markdown("""
            # reference
            * [gradido官方文档](https://www.gradio.app/docs/examples)
            * [orangerfun的CSDN博客](https://blog.csdn.net/orangerfun?spm=1011.2415.3001.5343)
            """)

demo.launch()