gradio的模版代码

一、安装环境

conda create -n gradio python=3.9  # 要求必须安装python 3.8以上的版本

pip install gradio

二、快速入门：

1、快速入门

import gradio as gr
#输入文本处理程序
def greet(name):
    return "Hello " + name + "!"
#接口创建函数
#fn设置处理函数，inputs设置输入接口组件，outputs设置输出接口组件
#fn,inputs,outputs都是必填函数
demo = gr.Interface(fn=greet, inputs="text", outputs="text")
demo.launch()

运行程序后，打开 http://localhost:7860 即可看到网页效果。左边是文本输入框，右边是结果展示框。Clear按钮用于重置网页状态，Submit按钮用于执行处理程序，Flag按钮用于保存结果到本地。

#执行结果
Running on local URL:  http://127.0.0.1:7860

To create a public link, set `share=True` in `launch()`.

打开浏览器使用即可

在本地开发时，如果你想将代码作为Python脚本运行，你可以使用Gradio CLI在重载模式下启动应用程序，这将提供无缝和快速的开发。

gradio app.py

Note：你也可以做python app.py，但它不会提供自动重新加载机制。

2、自定义输入组件

2.基本参数|支持的接口
2.1 Interface类以及基础模块
Gradio 可以包装几乎任何 Python 函数为易于使用的用户界面。从上面例子我们看到，简单的基于文本的函数。但这个函数还可以处理很多类型。
Interface类通过以下三个参数进行初始化：

fn：包装的函数
inputs：输入组件类型，（例如：“text”、"image）
ouputs：输出组件类型，（例如：“text”、"image）
通过这三个参数，我们可以快速创建一个接口并发布他们。

最常用的基础模块构成。

应用界面：gr.Interface(简易场景), gr.Blocks(定制化场景)

输入输出：gr.Image(图像), gr.Textbox(文本框), gr.DataFrame(数据框), gr.Dropdown(下拉选项), gr.Number(数字), gr.Markdown, gr.Files

控制组件：gr.Button(按钮)

布局组件：gr.Tab(标签页), gr.Row(行布局), gr.Column(列布局)

import gradio as gr
def greet(name):
    return "Hello " + name + "!"
demo = gr.Interface(
    fn=greet,
    # 自定义输入框
    # 具体设置方法查看官方文档
    inputs=gr.Textbox(lines=3, placeholder="Name Here...",label="my input"),
    outputs="text",
)
demo.launch()

• Interface.launch()方法返回三个值

  • app，为 Gradio 演示提供支持的 FastAPI 应用程序
  • local_url，本地地址
  • share_url，公共地址，当share=True时生成

import gradio as gr

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

iface = gr.Interface(
    fn=greet,
    inputs=gr.inputs.Textbox(lines=2, placeholder="Name Here..."),
    outputs="text",
)
if __name__ == "__main__":
    app, local_url, share_url = iface.launch()

1.2.2 多个输入和输出

对于复杂程序，输入列表中的每个组件按顺序对应于函数的一个参数。输出列表中的每个组件按顺序排列对应于函数返回的一个值

import gradio as gr
#该函数有3个输入参数和2个输出参数
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()

inputs列表里的每个字段按顺序对应函数的每个参数，outputs同理。

1.2.3 图像组件

Gradio支持许多类型的组件，如image、dataframe、video。使用示例如下：

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
#shape设置输入图像大小
#demo = gr.Interface(sepia, gr.Image(height=200, width=200), "image")
demo = gr.Interface(sepia, inputs=gr.Image(), outputs="image")
demo.launch()

当使用Image组件作为输入时，函数将收到一个维度为（w,h,3)的numpy数组，按照RGB的通道顺序排列。要注意的是，我们的输入图像组件带有一个编辑按钮，可以对图像进行裁剪和放大。以这种方式处理图像可以帮助揭示机器学习模型中的偏差或隐藏的缺陷。此外对于输入组件有个shape参数，指的设置输入图像大小。但是处理方式是保持长宽比的情况下，将图像最短边缩放为指定长度，然后按照中心裁剪方式裁剪最长边到指定长度。当图像不大的情况，一种更好的方式是不设置shape，这样直接传入原图。输入组件Image也可以设置输入类型type，比如type=filepath设置传入处理图像的路径。具体可以查看官方文档，文档写的很清楚。

1.2.4 动态界面接口：简单计算器模板实时变化

在Interface添加live=True参数，只要输入发生变化，结果马上发生改变。

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

iface = gr.Interface(
    calculator,
    ["number", gr.Radio(["add", "subtract", "multiply", "divide"]), "number"],
    "number",
    live=True,
)

iface.launch()

import gradio as gr
#一个简单计算器，含实例说明
def calculator(num1, operation, num2):
    if o