使用gradio搭网页、部署模型

一、构建网页

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.1. 文本输入和输出

文本输入（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()

文本输出（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. 图像输入和输出

图像输入（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()

图像输出（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.3. 音频输入和输出

音频输入（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()

音频输出（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.4. 视频输入和输出

视频输入（Video）

import gradio as gr

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

demo = gr.Interface(fn=process_video, inputs=gr.Video(), outputs="video")
demo.launch()

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.5. 文件上传和下载

文件上传

import gradio as gr

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

demo = gr.Interface(fn=process_file, inputs=gr.File(), outputs="text")
demo.launch()

文件下载

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.6. 滑块（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.7. 单选按钮（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.8. 复选框（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.9. 数据表格（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()

2. 一个网页示例代码

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

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

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()

3.1. 整个页面展示

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

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

![[Pasted image 20250417152058.png]]

二、构建AI任务

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

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()

![[Pasted image 20250417154628.png]]