Gradio的使用

Gradio的使用

Gradio通过指定输入输出，就可以配置出一套HTML前端界面，效果应该比算法工程师自己写的要好看。详情当然要看官网了。

Gradio官网quickstart

这里面列几个经典样例，可以简单理解一下。主要关注demo.launch()前面的那一段demo的定义。

最粗暴的用法 #

定义inputs列表，outputs列表，如果列表中元素只有一个，可以不用列表。然后gr会将输出输出以控件方式显示到网页上，输入到输出 的转换，靠的是点击按钮之后，调用fn函数实现，这里的fn就是greet函数了。函数的输入和输出列表能够与inputs与outputs按顺序匹配。

import gradio as gr

def greet(name, is_morning, temperature):
    salutation = "Good morning" if is_morning else "Good evening"
    greeting = f"{salutation} {name}. It is {temperature} degrees today"
    celsius = (temperature - 32) * 5 / 9
    return greeting, round(celsius, 2)

demo = gr.Interface(
    fn=greet,
    inputs=["text", "checkbox", gr.Slider(0, 100)],
    outputs=["text", "number"],
)
demo.launch()

复杂但是功能较强的用法 #

这里面定义了block(一组明确定义的控件，纵向布局)，tab(可切换标签)，row(横向布局)，button的点击事件，整体应该比较好懂。用这一套已经能够满足大量的科研需求了。

注意，其中的gr.Image()，如果是输入的话，提供了上传图片的功能！！！

import numpy as np
import gradio as gr


def flip_text(x):
    return x[::-1]


def flip_image(x):
    return np.fliplr(x)


with gr.Blocks() as demo:
    gr.Markdown("Flip text or image files using this demo.")
    with gr.Tab("Flip Text"):
        text_input = gr.Textbox()
        text_output = gr.Textbox()
        text_button = gr.Button("Flip")
    with gr.Tab("Flip Image"):
        with gr.Row():
            image_input = gr.Image()
            image_output = gr.Image()
        image_button = gr.Button("Flip")

    with gr.Accordion("Open for More!"):
        gr.Markdown("Look at me...")

    text_button.click(flip_text, inputs=text_input, outputs=text_output)
    image_button.click(flip_image, inputs=image_input, outputs=image_output)

demo.launch()

大模型聊天界面Chatbots #

这类需求明确了函数的输入输出。输出一定是message+history，输出一定是response，然后一句话搞定。

import random
import gradio as gr

def random_response(message, history):
    return random.choice(["Yes", "No"])

demo = gr.ChatInterface(random_response)

demo.launch()