Gradio官方文档

Allureye

已于 2024-03-21 19:54:47 修改

阅读量1.5k

点赞数 13

文章标签：前端 Gradio python 人工智能

于 2024-03-20 21:13:20 首次发布

本文链接：https://blog.csdn.net/weixin_65520839/article/details/136886643

版权

构建您的第一个demo

import gradio as gr

def greet(name, intensity):		#"def"自建函数；"greet"自定义函数名字；"name"名字（中文）；“intensity”强度（中文）；表示这个def自建函数greet接收两个参数“name”和“intensity”
    return "Hello, " + name + "!" * int(intensity)	

demo = gr.Interface(	#“interface”界面（中文）；gr.Interface 是 Gradio 库中的一个类，demo是gr.Interface这个类的实例；
    fn=greet,
    inputs=["text", "slider"],	#"slider"滑块（中文）；
    outputs=["text"],
)
#fn、inputs 和 outputs 是用于定义 Gradio 界面行为和组件的参数；
demo.launch()	#调用 Gradio 接口对象 demo 的方法；用于启动交互式界面；

分享您的demo

demo.launch(share=True)  # Share your demo with just 1 extra parameter 🚀；parameter参数（中文）；

进度条

import gradio as gr
import time

def slowly_reverse(word, progress=gr.Progress()):
    progress(0, desc="Starting")	#进度条初始化为 0，状态描述为 "Starting";desc描述（description中文）
    time.sleep(1)	#让程序休眠 1 秒，模拟处理过程中的延迟。
    progress(0.05)	#将进度设置为 0.05
    new_string = ""	#创建一个空字符串，用于存储逆转后的字符串
    for letter in progress.tqdm(word, desc="Reversing"):
        time.sleep(0.25)
        new_string = letter + new_string
    return new_string

demo = gr.Interface(slowly_reverse, gr.Text(), gr.Text())	#创建一个 Gradio 接口对象 demo

demo.launch()

import time这是导入的模块还是库？

import time 是导入了 Python 标准库中的 time 模块，而不是导入了一个库。在 Python 中，库（library）通常是一个包含一组相关功能的集合，而模块（module）则是一个包含变量、函数和类的单个 Python 文件。因此，time 是一个模块，它提供了与时间相关的函数和类，例如 sleep() 用于让程序暂停执行一段时间。

受密码保护的应用程序

import gradio as gr

def update_message(request: gr.Request):	#它接受一个参数 request，类型为 gr.Request
    return f"Welcome, {request.username}"	#request.username 是 gr.Request 对象的属性，表示用户的用户名；f表示使用格式化字符串；

with gr.Blocks() as demo:	# 使用 Blocks 类创建一个代码块，将其命名为 demo。with 语句用于确保在代码块结束时释放资源。
    m = gr.Markdown()	#创建一个 Markdown 组件，这个组件用于显示文本内容。
    logout_button = gr.Button("Logout", link="/logout")	#创建一个按钮组件，将其命名为 logout_button。按钮上显示的文本为 "Logout"，并且点击按钮时会跳转到 "/logout" 路径。
    demo.load(update_message, None, m)	#使用 load() 方法加载一个更新函数、一个预处理函数和一个输出组件到代码块中。在这里，update_message 函数用于处理用户输入，所以我们将其加载到代码块中。None 表示没有预处理函数。m 是 Markdown 组件，用于显示欢迎消息。
    
demo.launch(auth=[("Pete", "Pete"), ("Dawood", "Dawood")])	#auth 参数指定了允许访问的用户名和密码列表。

The Interface class（接口类）

fn：包装用户界面（UI）的函数
inputs：用于输入的 Gradio 组件。组件的数量应与函数中参数的数量相匹配。
outputs：用于输出的 Gradio 组件。组件的数量应与函数返回值的数量相匹配。

Components Attributes（组件属性）

import gradio as gr

def greet(name, intensity):
    return "Hello, " + name + "!" * intensity

demo = gr.Interface(
    fn=greet,
    inputs=["text", gr.Slider(value=2, minimum=1, maximum=10, step=1)],
    outputs=[gr.Textbox(label="greeting", lines=3)],
)

demo.launch()

多个输入和输出组件

import gradio as gr

def greet(name, is_morning, temperature):
    salutation = "Good morning" if is_morning else "Good evening"	#“salutation”称呼（中文）
    greeting = f"{salutation} {name}. It is {temperature} degrees today"
    celsius = (temperature - 32) * 5 / 9
    return greeting, round(celsius, 2)	#将摄氏温度 celsius 四舍五入到小数点后两位的精度。

demo = gr.Interface(
    fn=greet,
    inputs=["text", "checkbox", gr.Slider(0, 100)],	#"text"文本框（中文）；"checkbox"复选框（中文）；
    outputs=["text", "number"],
)
demo.launch()

图像示例

import numpy as np
import gradio as gr

def sepia(input_img):	#input_img代表输入的图像。
    sepia_filter = np.array([	#array阵列
        [0.393, 0.769, 0.189], 
        [0.349, 0.686, 0.168], 
        [0.272, 0.534, 0.131]
    ])	#创建了一个深褐色滤镜矩阵，其中包含了一组预定义的权重。这个矩阵被用于将输入图像转换为深褐色效果。
    sepia_img = input_img.dot(sepia_filter.T)	#将输入图像与深褐色滤镜矩阵进行矩阵乘法运算，得到转换后的深褐色图像。dot点（中文）；sepia棕色（中文）；filter滤波器（中文）
    sepia_img /= sepia_img.max()	#对转换后的图像进行归一化，以确保图像的像素值在合适的范围内。
    return sepia_img

demo = gr.Interface(sepia, gr.Image(), "image")
demo.launch()

嵌套列表

import gradio as gr
def calculator(num1, operation, num2):
    if operation == "add":
        return num1 + num2
    elif operation == "subtract":
        return num1 - num2
    elif operation == "multiply":
        return num1 * num2
    elif operation == "divide":
        if num2 == 0:
            raise gr.Error("Cannot divide by zero!")	#raise 是 Python 中的一个关键字，用于手动触发异常。
        return num1 / num2

demo = gr.Interface(
    calculator,
    [
        "number", 
        gr.Radio(["add", "subtract", "multiply", "divide"]),	#“radio”单选按钮组件
        "number"
    ],
    "number",
    examples=[
        [45, "add", 3],
        [3.14, "divide", 2],
        [144, "multiply", 2.5],
        [0, "subtract", 1.2],
    ],
    title="Toy Calculator",
    description="Here's a sample toy calculator. Allows you to calculate things like $2+2=4$",
)

demo.launch()

描述性内容

构造函数中有三个参数Interface来指定此内容的位置：

title：接受文本并可以将其显示在界面的最顶部，并且也成为页面标题。
description: 接受文本、Markdown 或 HTML 并将其放置在标题的正下方。
article：它也接受文本、Markdown 或 HTML 并将其放置在界面下方。
在这里插入图片描述

手风琴中的附加输入

import gradio as gr

def generate_fake_image(prompt, seed, initial_image=None):	#prompt（文本提示）、seed（随机种子）和 initial_image（初始图像）。
    return f"Used seed: {seed}", "https://dummyimage.com/300/09f.png"


demo = gr.Interface(
    generate_fake_image,
    inputs=["textbox"],
    outputs=["textbox", "image"],
    additional_inputs=[
        gr.Slider(0, 1000),
        "image"
    ]
)

demo.launch()

The 4 Kinds of Gradio Interfaces

事实证明，该类gradio.Interface实际上可以处理 4 种不同类型的演示：

标准演示：具有单独的输入和输出（例如图像分类器或语音到文本模型）
仅输出演示：不接受任何输入但产生输出（例如无条件图像生成模型）
仅输入演示：不产生任何输出，但接受某种输入（例如，保存上传到持久外部数据库的图像的演示）
统一演示：同时具有输入和输出组件，但输入和输出组件是相同的。这意味着产生的输出会覆盖输入（例如文本自动完成模型）

标准演示

import numpy as np
import gradio as gr

def sepia(input_img):
    sepia_filter = np.array([
        [0.393, 0.769, 0.189], 
        [0.349, 0.686, 0.168], 
        [0.272, 0.534, 0.131]
    ])
    sepia_img = input_img.dot(sepia_filter.T)
    sepia_img /= sepia_img.max()
    return sepia_img

demo = gr.Interface(sepia, gr.Image(), "image")
demo.launch()

仅输出演示

import time

import gradio as gr


def fake_gan():
    time.sleep(1)
    images = [
            "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80",
            "https://images.unsplash.com/photo-1554151228-14d9def656e4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=386&q=80",
            "https://images.unsplash.com/photo-1542909168-82c3e7fdca5c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8aHVtYW4lMjBmYWNlfGVufDB8fDB8fA%3D%3D&w=1000&q=80",
    ]
    return images


demo = gr.Interface(
    fn=fake_gan,
    inputs=None,
    outputs=gr.Gallery(label="Generated Images", columns=[2]),	#gallery图库（中文）；columns 参数用于设置每行显示的图像列数为 2。
    title="FD-GAN",
    description="This is a fake demo of a GAN. In reality, the images are randomly chosen from Unsplash.",
)

demo.launch()

仅输入演示

import random
import string
import gradio as gr 

def save_image_random_name(image):
    random_string = ''.join(random.choices(string.ascii_letters, k=20)) + '.png'	#首先使用 random.choices() 函数和 string.ascii_letters 来生成一个随机的由字母组成的字符串，长度为 20。然后，将生成的随机字符串与 '.png' 拼接，作为图像的文件名。
    image.save(random_string)	#将上传的图像保存为随机命名的 PNG 文件
    print(f"Saved image to {random_string}!")

demo = gr.Interface(
    fn=save_image_random_name, 
    inputs=gr.Image(type="pil"),  #指定了图像类型为 PIL（Python Imaging Library）格式
    outputs=None,
)
demo.launch()

统一演示

在这里插入图片描述

全局状态

如果状态应该可供所有函数调用和所有用户访问，则可以在函数调用外部创建一个变量并在函数内部访问它。例如，您可以在函数外部加载一个大型模型并在函数内部使用它，这样每次函数调用都不需要重新加载模型。

import gradio as gr

scores = []

def track_score(score):
    scores.append(score)
    top_scores = sorted(scores, reverse=True)[:3]	#reverse逆向（中文）;表示按降序排列，然后使用切片 [:3] 取出前三个分数，即得到了最高的三个分数。
    return top_scores

demo = gr.Interface(
    track_score, 
    gr.Number(label="Score"), 
    gr.JSON(label="Top Scores")
)
demo.launch()

会话状态

import gradio as gr

def store_message(message: str, history: list[str]):
    output = {
        "Current messages": message,
        "Previous messages": history[::-1]
    }
    history.append(message)
    return output, history

demo = gr.Interface(fn=store_message, 
                    inputs=["textbox", gr.State(value=[])],  #初始历史消息列表为空列表
                    outputs=["json", gr.State()]) #一个状态输出

demo.launch()

流媒体组件

import gradio as gr
import numpy as np

def flip(im):
    return np.flipud(im)	#NumPy 中的 flipud 函数对图像进行上下翻转;"flipud"矩阵的上下反转（中文）；

demo = gr.Interface(
    flip, 
    gr.Image(sources=["webcam"], streaming=True), 	#“webcam”网络摄像头（中文）；streaming=True，表示接收到的是实时的视频流。
    "image",
    live=True	#live=True 表示这个接口是实时更新的。
)
demo.launch()

Blocks Structure块结构

import gradio as gr


def greet(name):
    return "Hello " + name + "!"


with gr.Blocks() as demo:	#使用 Gradio 的 Blocks 上下文管理器创建一个新的界面块，并将其赋值给 demo 变量。
    name = gr.Textbox(label="Name")
    output = gr.Textbox(label="Output Box")
    greet_btn = gr.Button("Greet")
    greet_btn.click(fn=greet, inputs=name, outputs=output, api_name="greet")

demo.launch()

您还可以使用装饰器附加事件侦听器 - 跳过参数并直接fn分配：

import gradio as gr


with gr.Blocks() as demo:
    name = gr.Textbox(label="Name")
    output = gr.Textbox(label="Output Box")
    greet_btn = gr.Button("Greet")

    @greet_btn.click(inputs=name, outputs=output)	#使用装饰器语法，将 greet 函数绑定到按钮 greet_btn 的点击事件上。这意味着当用户点击按钮时，将调用 greet 函数，并将输入名字作为参数传递给它。
    def greet(name):
        return "Hello " + name + "!"

   

demo.launch()

事件监听器的类型

import gradio as gr

def welcome(name):
    return f"Welcome to Gradio, {name}!"

with gr.Blocks() as demo:
    gr.Markdown(
    """
    # Hello World!
    Start typing below to see the output.
    """)
    inp = gr.Textbox(placeholder="What is your name?")	#“placeholder”占位符，占位文本（中文）；
    out = gr.Textbox()
    inp.change(welcome, inp, out)

demo.launch()

多数据流

情感分类器

from transformers import pipeline

import gradio as gr

asr = pipeline("automatic-speech-recognition", "facebook/wav2vec2-base-960h")
classifier = pipeline("text-classification")


def speech_to_text(speech):
    text = asr(speech)["text"]
    return text


def text_to_sentiment(text):
    return classifier(text)[0]["label"]


demo = gr.Blocks()

with demo:
    audio_file = gr.Audio(type="filepath")
    text = gr.Textbox()
    label = gr.Label()

    b1 = gr.Button("Recognize Speech")
    b2 = gr.Button("Classify Sentiment")

    b1.click(speech_to_text, inputs=audio_file, outputs=text)
    b2.click(text_to_sentiment, inputs=text, outputs=label)

demo.launch()

函数输入列表与字典

import gradio as gr

with gr.Blocks() as demo:
    a = gr.Number(label="a")
    b = gr.Number(label="b")
    with gr.Row():
        add_btn = gr.Button("Add")
        sub_btn = gr.Button("Subtract")
    c = gr.Number(label="sum")

    def add(num1, num2):
        return num1 + num2
    add_btn.click(add, inputs=[a, b], outputs=c)

    def sub(data):
        return data[a] - data[b]
    sub_btn.click(sub, inputs={a, b}, outputs=c)


demo.launch()

函数返回列表与字典

import gradio as gr

with gr.Blocks() as demo:
    food_box = gr.Number(value=10, label="Food Count")
    status_box = gr.Textbox()
    def eat(food):
        if food > 0:
            return food - 1, "full"
        else:
            return 0, "hungry"
    gr.Button("EAT").click(
        fn=eat,
        inputs=food_box,
        outputs=[food_box, status_box]
    )

demo.launch()

更新组件配置

import gradio as gr


def change_textbox(choice):
    if choice == "short":
        return gr.Textbox(lines=2, visible=True)	#“visible”可视（中文）；
    elif choice == "long":
        return gr.Textbox(lines=8, visible=True, value="Lorem ipsum dolor sit amet")
    else:
        return gr.Textbox(visible=False)


with gr.Blocks() as demo:
    radio = gr.Radio(
        ["short", "long", "none"], label="What kind of essay would you like to write?"
    )
    text = gr.Textbox(lines=2, interactive=True, show_copy_button=True)	#“interactive”交互式的（中文）；show_copy_button显示复制按钮
    radio.change(fn=change_textbox, inputs=radio, outputs=text)


demo.launch()

例子

import gradio as gr


def calculator(num1, operation, num2):
    if operation == "add":
        return num1 + num2
    elif operation == "subtract":
        return num1 - num2
    elif operation == "multiply":
        return num1 * num2
    elif operation == "divide":
        return num1 / num2


with gr.Blocks() as demo:
    with gr.Row():	#创建了一个水平排列的组件行。
        with gr.Column():	#创建了一个垂直排列的组件列。
            num_1 = gr.Number(value=4)
            operation = gr.Radio(["add", "subtract", "multiply", "divide"])
            num_2 = gr.Number(value=0)
            submit_btn = gr.Button(value="Calculate")
        with gr.Column():	#再次创建了一个垂直排列的组件列
            result = gr.Number()

    submit_btn.click(calculator, inputs=[num_1, operation, num_2], outputs=[result], api_name=False)
    examples = gr.Examples(examples=[[5, "add", 3],
                                     [4, "divide", 2],
                                     [-4, "multiply", 2.5],
                                     [0, "subtract", 1.2]],
                           inputs=[num_1, operation, num_2])

if __name__ == "__main__":
    demo.launch(show_api=False)

gr.Examples需要两个必需的参数：

examples：嵌套的示例列表，其中外部列表由示例组成，每个内部列表由与每个输入组件对应的输入组成
inputs：单击示例时应填充的组件或组件列表

if name == “main”:这是干什么的？有什么用？可以没有吗？
if __name__ == "__main__": 是 Python 中一个常见的惯用语法，用于判断当前模块是否被直接执行。这段代码块中的内容只有在当前脚本作为主程序直接运行时才会执行，而不是被其他模块引入时执行。
具体来说：
-当一个 Python 文件被直接执行时，Python 解释器会将该文件的 __name__ 变量设置为 "__main__"。
-如果该文件被其他文件引入，那么 __name__ 将被设置为该文件的模块名。
-因此，通过 if __name__ == "__main__": 判断，可以确保代码块中的内容仅在当前文件作为主程序时执行，而不是被其他文件引入时执行。
在这段代码中，if __name__ == "__main__": 用于判断当前模块是否为主程序，如果是，则执行其中的代码，包括启动 Gradio 界面块等操作。这样做可以使得这段代码既可以作为一个独立的应用程序直接运行，也可以作为一个模块被其他文件引入使用。
如果你的代码不需要被直接运行，而只是作为一个模块被其他文件引入使用，那么就可以没有这个 if __name__ == "__main__": 块，因为在这种情况下，你不希望模块中的代码在被引入时立即执行。

连续举办活动

您还可以使用then事件侦听器的方法连续运行事件。这将在前一个事件运行完成后运行一个事件。这对于运行分多个步骤更新组件的事件非常有用。

import gradio as gr
import random
import time

with gr.Blocks() as demo:
    chatbot = gr.Chatbot()
    msg = gr.Textbox()
    clear = gr.Button("Clear")

    def user(user_message, history):
        return "", history + [[user_message, None]]

    def bot(history):
        bot_message = random.choice(["How are you?", "I love you", "I'm very hungry"])
        time.sleep(2)
        history[-1][1] = bot_message
        return history

    msg.submit(user, [msg, chatbot], [msg, chatbot], queue=False).then(
        bot, chatbot, chatbot
    )
    clear.click(lambda: None, None, chatbot, queue=False)
    
demo.queue()	#将界面块添加到队列中，等待执行。
demo.launch()

连续举办活动

import math
import gradio as gr
import plotly.express as px
import numpy as np


plot_end = 2 * math.pi


def get_plot(period=1):
    global plot_end
    x = np.arange(plot_end - 2 * math.pi, plot_end, 0.02)
    y = np.sin(2*math.pi*period * x)
    fig = px.line(x=x, y=y)
    plot_end += 2 * math.pi
    if plot_end > 1000:
        plot_end = 2 * math.pi
    return fig


with gr.Blocks() as demo:
    with gr.Row():
        with gr.Column():
            gr.Markdown("Change the value of the slider to automatically update the plot")
            period = gr.Slider(label="Period of plot", value=1, minimum=0, maximum=10, step=1)
            plot = gr.Plot(label="Plot (updates every half second)")

    dep = demo.load(get_plot, None, plot, every=1)
    period.change(get_plot, period, plot, every=1, cancels=[dep])


if __name__ == "__main__":
    demo.queue().launch()

收集事件数据

import gradio as gr

with gr.Blocks() as demo:
    turn = gr.Textbox("X", interactive=False, label="Turn")
    board = gr.Dataframe(value=[["", "", ""]] * 3, interactive=False, type="array")

    def place(board, turn, evt: gr.SelectData):
        if evt.value:
            return board, turn
        board[evt.index[0]][evt.index[1]] = turn
        turn = "O" if turn == "X" else "X"
        return board, turn

    board.select(place, [board, turn], [board, turn], show_progress="hidden")

demo.launch()