全网最最实用--教你用gradio搭网页、部署模型等（代码粘贴即用、不讲虚的）_gr.video作为输出

〇 前言

Gradio 是一个用于快速创建和共享机器学习模型的 Python 库。它允许开发者通过简单的代码定义输入和输出组件，创建一个 Web 界面，用户可以通过该界面进行机器学习模型的交互。Gradio 支持多种输入和输出类型，包括文本、视频、文件、滑块、单选、收听等，使得用户说过的演示模型。

pip install gradio #安装，python大于等于3.8。
1

一、构建网页

1.各个组件介绍

Gradio 提供了多种组件，用于创建交互式界面。
gr.Interface：用来构建可视化界面。
gr.Image：用于图像输入和输出。
gr.Textbox：用于文本框输入和输出。
gr.DataFrame：用于数据框输入和输出。
gr.Dropdown：用于下拉选项输入。
gr.Number：用于数字输入和输出。
gr.Markdown：用于Markdown输入和输出。
gr.Files：用于文件输入和输出。
cols ：指定输入和输出组件的列数
rows ：指定输入和输出组件的行数
inputs ：指定输入组件的位置和大小
outputs ：指定输出组件的位置和大小
gr.Button：用于创建按钮，可以绑定点击事件。
gr.Checkbox：用于创建我们的。
gr.Radio：用于创建单选按钮组。
gr.Slider：用于创建滑块。
gr.Audio：用于音频输入和输出。
gr.Video：用于视频输入和输出。
gr.ColorPicker：用于颜色选择。
gr.File：用于文件上传。
gr.Model3D：用于3D模型展示。
gr.Plot：用于制作图表。
gr.HTML：用于嵌入HTML内容。
gr.JSON：用于 JSON 数据的输入和输出
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

a. 文本输入和输出

文本输入 (Textbox)

import gradio as gr

def greet(name):
    return f"Hello, {name}!"

demo = gr.Interface(fn=greet, inputs=gr.Textbox(lines=2, placeholder="Enter your name here..."), outputs="text")
demo.launch()
1
2
3
4
5
6
7

文本输出 (Textbox)

import gradio as gr

def echo(text):
    return text

demo = gr.Interface(fn=echo, inputs="text", outputs=gr.Textbox(label="Echoed Text"))
demo.launch()
1
2
3
4
5
6
7

b. 图像输入和输出

图像输入 (Image)

import gradio as gr

def process_image(image):
    # 这里可以添加图像处理逻辑
    return image

demo = gr.Interface(fn=process_image, inputs=gr.Image(type="pil"), outputs="image")
demo.launch()
1
2
3
4
5
6
7
8

图像输出 (Image)

import gradio as gr
from PIL import Image

def generate_image():
    img = Image.new("RGB", (100, 100), color="red")
    return img

demo = gr.Interface(fn=generate_image, inputs=None, outputs=gr.Image(type="pil"))
demo.launch()
1
2
3
4
5
6
7
8
9

c. 音频输入和输出

音频输入 (Audio)

import gradio as gr

def process_audio(audio):
    # 这里可以添加音频处理逻辑
    return audio

demo = gr.Interface(fn=process_audio, inputs=gr.Audio(source="microphone"), outputs="audio")
demo.launch()
1
2
3
4
5
6
7
8

音频输出 (Audio)

import gradio as gr
import numpy as np

def generate_audio():
    sample_rate = 44100
    t = np.linspace(0, 1, sample_rate, False)
    audio = np.sin(440 * 2 * np.pi * t)
    return (sample_rate, audio)

demo = gr.Interface(fn=generate_audio, inputs=None, outputs=gr.Audio())
demo.launch()
1
2
3
4
5
6
7
8
9
10
11

d. 视频输入和输出

视频输入 (Video)

import gradio as gr

def process_video(video):
    # 这里可以添加视频处理逻辑
    return video

demo = gr.Interface(fn=process_video, inputs=gr.Video(), outputs="video")
demo.launch()
1
2
3
4
5
6
7
8

视频输出 (Video)

import gradio as gr

def generate_video():
    # 这里可以添加视频生成逻辑
    return "path/to/video.mp4"

demo = gr.Interface(fn=generate_video, inputs=None, outputs=gr.Video())
demo.launch()
1
2
3
4
5
6
7
8

e. 文件上传和下载

文件上传 (File)

import gradio as gr

def process_file(file):
    # 这里可以添加文件处理逻辑
    return file.name

demo = gr.Interface(fn=process_file, inputs=gr.File(), outputs="text")
demo.launch()
1
2
3
4
5
6
7
8

文件下载 (File)

import gradio as gr

def generate_file():
    # 这里可以添加文件生成逻辑
    return "path/to/file.txt"

demo = gr.Interface(fn=generate_file, inputs=None, outputs=gr.File())
demo.launch()
1
2
3
4
5
6
7
8

f. 滑块 (Slider)

import gradio as gr

def slider_value(value):
    return f"Slider value: {value}"

demo = gr.Interface(fn=slider_value, inputs=gr.Slider(minimum=0, maximum=100, step=1), outputs="text")
demo.launch()
1
2
3
4
5
6
7

g. 单选按钮 (Radio)

import gradio as gr

def radio_choice(choice):
    return f"You selected: {choice}"

demo = gr.Interface(fn=radio_choice, inputs=gr.Radio(["Option 1", "Option 2", "Option 3"]), outputs="text")
demo.launch()
1
2
3
4
5
6
7

h. 复选框 (CheckboxGroup)

import gradio as gr

def checkbox_choices(choices):
    return f"You selected: {', '.join(choices)}"

demo = gr.Interface(fn=checkbox_choices, inputs=gr.CheckboxGroup(["Option A", "Option B", "Option C"]), outputs="text")
demo.launch()
1
2
3
4
5
6
7

j. 数据表格 (Dataframe)

import gradio as gr
import pandas as pd

def process_dataframe(df):
    # 这里可以添加数据处理逻辑
    return df

demo = gr.Interface(fn=process_dataframe, inputs=gr.Dataframe(headers=["Column 1", "Column 2"]), outputs="dataframe")
demo.launch()
1
2
3
4
5
6
7
8
9

2.一个网页示例代码

a.按钮使用指南（事件处理和回调）

按钮回调：可以使用gr.Button创建按钮，并通过click方法绑定点击事件的回调函数。
输入组件事件：可访问输入组件（如gr.Textbox、gr.Slider等）事件，即change当输入值解析时触发回调函数。 
自定义事件：可以定义自定义事件，并gr.Event绑定函数。
#下面代码有示例
1
2
3
4

3.整个网页代码

import gradio as gr

# 定义一个处理函数，模拟对输入数据的处理
def process_data(text, radio, checkbox, slider, file, image, video, audio, dataframe):
    # 这里只是简单地返回输入数据，实际应用中可以进行复杂的处理
    return (
        text,
        radio,
        checkbox,
        slider,
        file.name if file else "No file uploaded",
        image,
        video,
        audio,
        dataframe
    )


# 创建 Gradio 界面
with gr.Blocks() as demo:
    gr.Markdown("# Gradio 组件示例")

    with gr.Row():
        text_input = gr.Textbox(label="文本输入")
        radio_input = gr.Radio(["选项1", "选项2", "选项3"], label="单选按钮")
        checkbox_input = gr.CheckboxGroup(["选项A", "选项B", "选项C"], label="复选框")
        slider_input = gr.Slider(minimum=0, maximum=100, label="滑块")

    with gr.Row():
        file_input = gr.File(label="文件上传")
        image_input = gr.Image(label="图像上传")
        video_input = gr.Video(label="视频上传")
        audio_input = gr.Audio(label="音频上传")

    with gr.Row():
        dataframe_input = gr.Dataframe(label="数据表格")

    submit_button = gr.Button("提交")

    with gr.Row():
        text_output = gr.Textbox(label="文本输出")
        radio_output = gr.Textbox(label="单选按钮输出")
        checkbox_output = gr.Textbox(label="复选框输出")
        slider_output = gr.Textbox(label="滑块输出")
        file_output = gr.Textbox(label="文件输出")
        image_output = gr.Image(label="图像输出")
        video_output = gr.Video(label="视频输出")
        audio_output = gr.Audio(label="音频输出")
        dataframe_output = gr.Dataframe(label="数据表格输出")

    # 定义按钮点击事件的回调函数
    submit_button.click(
        fn=process_data,
        inputs=[text_input, radio_input, checkbox_input, slider_input, file_input, image_input, video_input,
                audio_input, dataframe_input],
        outputs=[text_output, radio_output, checkbox_output, slider_output, file_output, image_output, video_output,
                 audio_output, dataframe_output]
    )

# 启动界面
demo.launch()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

b.整个网页展示

功能说明：这个网页是一个使用 Gradio 库构建的交互式界面，主要用于展示和测试多种输入和输出组件的功能。用户可以通过该界面：

1. 输入数据：输入文本、选择单选按钮、勾选复选框、调整滑块、上传文件、图像、视频和音频文件（其中视频和音频可以现场录制），以及输入或上传数据表格。
2. 提交数据：点击“提交”按钮后，界面会处理输入的数据。
3. 查看结果：界面会显示用户输入的数据，包括文本、选择的单选按钮和复选框、滑块数值、上传的文件名、图像、视频、音频文件以及数据表格。
   

二、构建ai任务

a.构建一个自己的大语言模型聊天机器人

作为一个环环相扣的可持续发展的人，借鉴俺之前写的文章，直接改进了http调用的那一款。
全网最最实用–以开发的角度看大模型：零基础小白大模型python java接口调用包教会

import gradio as gr
import requests
import urllib3
import time
import jwt

def generate_token(apikey: str, exp_seconds: int):
    try:
        id, secret = apikey.split(".")
    except Exception as e:
        raise Exception("invalid apikey", e)

    payload = {
        "api_key": id,
        "exp": int(round(time.time() * 1000)) + exp_seconds * 1000,
        "timestamp": int(round(time.time() * 1000)),
    }

    return jwt.encode(
        payload,
        secret,
        algorithm="HS256",
        headers={"alg": "HS256", "sign_type": "SIGN"},
    )

urllib3.disable_warnings(urllib3.exceptions.InsecureRequestWarning)

base_url = "https://open.bigmodel.cn/api/paas"

def get_response(**kwargs):
    data = kwargs
    token = generate_token('自己的API key', 3600)
    print("token:", token)
    headers = {
        "Authorization": f"Bearer {token}",
        "Content-Type": "application/json",
    }
    response = requests.post(f"{base_url}/v4/chat/completions", headers=headers, json=data, stream=data["stream"],
                             verify=False)

    decoded_line = response.json()
    return decoded_line

def run_conversation(query: str, stream=False, max_retry=5):
    params = dict(model="glm-4", messages=[{"role": "user", "content": query}], stream=stream)
    response = get_response(**params)
    return response

def chatbot_interface(query):
    response = run_conversation(query, stream=False)
    return response['choices'][0]['message']['content']

iface = gr.Interface(
    fn=chatbot_interface,
    inputs=gr.Textbox(lines=2, placeholder="Enter your query here..."),
    outputs="text",
    title="Big Model Chatbot",
    description="Ask me anything!",
    examples=[
        ["假如你是魔镜，魔镜魔镜，谁是天底下最聪明的人"],
        ["今天天气怎么样？"],
        ["推荐一本好书"]
    ]
)

iface.launch()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

效果

三、分享给他人

1.网内访问

要在局域网内分享你的 Gradio 应用程序，只需在 launch 方法中指定 server_name 为 “0.0.0.0”，这样应用程序会监听所有网络接口。

demo.launch(server_name="0.0.0.0")
1

2.外网访问

a.使用 Gradio 的 share 参数

Gradio 提供了一个 share 参数，可以生成一个临时的公共 URL，其他人可以通过这个 URL 访问你的应用程序。这种方法生成的 URL 通常是临时的，适用于快速共享和演示。

demo.launch(share=True)
1

b.部署到云服务

你可以将 Gradio 应用程序部署到云服务提供商，如 Heroku、AWS、Google Cloud、Azure 等。以下是一个简单的示例，展示如何将 Gradio 应用程序部署到 Heroku：

1. 准备 Heroku 环境：

   • 安装 Heroku CLI：Heroku CLI 安装指南
   • 创建一个新的 Heroku 应用：

     heroku create your-app-name
     1

2. 创建必要的文件：

   • requirements.txt：列出项目依赖。

     gradio
     1

   • Procfile：定义启动命令。

     web: python app.py
     1

   • app.py：包含你的 Gradio 应用程序代码。

     import gradio as gr
     
     def process(text, number, file):
         if file is not None:
             return f"Text: {text}, Number: {number}, File: {file.name}"
         else:
             return f"Text: {text}, Number: {number}, File: None"
     
     iface = gr.Interface(
         fn=process,
         inputs=[
             gr.components.Textbox(label="Text"),
             gr.components.Number(label="Number"),
             gr.components.File(label="File")
         ],
         outputs="text"
     )
     
     iface.launch(server_name="0.0.0.0", server_port=int(os.environ.get("PORT", 5000)))
     1
     2
     3
     4
     5
     6
     7
     8
     9
     10
     11
     12
     13
     14
     15
     16
     17
     18
     19

3. 部署到 Heroku：

   • 初始化 Git 仓库（如果还没有）：

     git init
     git add .
     git commit -m "Initial commit"
     1
     2
     3

   • 部署到 Heroku：

     git push heroku master
     1

部署完成后，Heroku 会提供一个公共 URL，其他人可以通过这个 URL 访问你的 Gradio 应用程序。

3.平台托管

可以托管到OpenXlab等平台，以Hugging Face 为例，它提供了一个名为 Spaces 的平台，可以让你免费托管 Gradio 应用程序。以下是步骤：

a. Hugging Face 托管

1. 访问 Hugging Face Spaces：

   • 访问 Hugging Face Spaces。

2. 创建一个新的 Space：

   • 点击 “Create New Space” 按钮，选择 “Gradio” 作为框架。

3. 上传代码：

   • 按照指引上传你的代码文件（例如 app.py）和任何其他必要的文件（例如 requirements.txt）。

4. 配置 Space：

   • 配置你的 Space，包括设置环境变量、选择资源等。

5. 部署：

   • 点击 “Deploy” 按钮，Hugging Face 会自动部署你的应用程序。

部署完成后，Hugging Face 会提供一个公共 URL，其他人可以通过这个 URL 访问你的 Gradio 应用程序。

更新：实际使用

有个小可爱问我一个需求，其实通过这个文章咱初步知识有，了最重要的还是实践。
可是真实践的时候却发现工具零件我都有，却还是造不出轮子。
这个时候呢，哈哈哈哈不得不提起我的造轮子大法：当需要一个轮子就去github或者哪里多扒几个别人的轮子拆开，然后慢慢自己就会了。

不定长数据，要求为每个数据整个复选框

import gradio as gr

def filter_data(data, selected_indices):
    items = data.split(',')
    selected_indices = list(map(int, selected_indices))
    selected_items = [items[i] for i in selected_indices]
    return ', '.join(selected_items)

def update_checkboxes(data):
    items = data.split(',')
    choices = [(item, str(i)) for i, item in enumerate(items)]
    return gr.update(choices=choices)

with gr.Blocks() as demo:
    with gr.Row():
        data_input = gr.Textbox(label="请输入您的数据（逗号分隔）", placeholder="例如：苹果, 香蕉, 橙子, 葡萄", lines=2)
        submit_button = gr.Button("提交")

    with gr.Row():
        checkbox_group = gr.CheckboxGroup(label="请选择您要保留的项目", choices=[])

    with gr.Row():
        result_output = gr.Textbox(label="筛选后的结果", interactive=False)

    submit_button.click(
        fn=update_checkboxes,
        inputs=data_input,
        outputs=checkbox_group,
    )

    checkbox_group.change(
        fn=filter_data,
        inputs=[data_input, checkbox_group],
        outputs=result_output,
    )

demo.launch(share=True)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38