1. 首页
  2. 新手教程
  3. Gradio 演示界面

搬瓦工 VPS 部署 Gradio 机器学习演示界面教程

Gradio 是 HuggingFace 旗下的 Python 库，可以用几行代码为机器学习模型创建漂亮的 Web 演示界面。无论是文本分类、图像生成、语音识别还是大语言模型对话，Gradio 都能快速搭建交互式的演示页面。将 Gradio 应用部署到搬瓦工 VPS 上，可以让你的 AI 模型随时对外展示。

一、Gradio 的优势

  • 代码极简：几行 Python 代码即可创建完整的 Web 界面。
  • 丰富的组件：文本框、滑块、图像、音频、视频等多种输入输出组件。
  • 自动 API：每个 Gradio 应用自动生成 REST API 接口。
  • 实时预览：支持流式输出和实时更新。
  • 嵌入集成：可嵌入到其他网页中。

二、环境准备

  • 操作系统：Ubuntu 20.04 或更高版本。
  • 内存：至少 1GB（取决于加载的模型）。
  • Python：Python 3.9 或更高版本。
apt update && apt upgrade -y
apt install python3 python3-pip python3-venv -y

mkdir -p /opt/gradio-app && cd /opt/gradio-app
python3 -m venv venv
source venv/bin/activate

pip install gradio

三、基础示例

3.1 文本处理应用

cat > /opt/gradio-app/text_demo.py <<'EOF'
import gradio as gr

def text_analysis(text):
    word_count = len(text.split())
    char_count = len(text)
    line_count = len(text.split('\n'))
    return f"字数: {word_count}\n字符数: {char_count}\n行数: {line_count}"

demo = gr.Interface(
    fn=text_analysis,
    inputs=gr.Textbox(label="输入文本", lines=5, placeholder="请输入要分析的文本..."),
    outputs=gr.Textbox(label="分析结果"),
    title="文本分析工具",
    description="输入文本，自动统计字数、字符数和行数。"
)

demo.launch(server_name="0.0.0.0", server_port=7860)
EOF

python3 text_demo.py

3.2 对接 LLM 的聊天界面

pip install openai
cat > /opt/gradio-app/chat_demo.py <<'EOF'
import gradio as gr
from openai import OpenAI

client = OpenAI(
    base_url="http://localhost:8080/v1",
    api_key="not-needed"
)

def chat_with_model(message, history):
    messages = [{"role": "system", "content": "你是一个有用的AI助手。"}]
    for h in history:
        messages.append({"role": "user", "content": h[0]})
        if h[1]:
            messages.append({"role": "assistant", "content": h[1]})
    messages.append({"role": "user", "content": message})

    response = client.chat.completions.create(
        model="local-model",
        messages=messages,
        max_tokens=500,
        stream=True
    )

    partial_message = ""
    for chunk in response:
        if chunk.choices[0].delta.content:
            partial_message += chunk.choices[0].delta.content
            yield partial_message

demo = gr.ChatInterface(
    fn=chat_with_model,
    title="AI 聊天助手",
    description="与本地大语言模型对话",
    examples=["你好", "解释什么是机器学习", "写一首关于春天的诗"],
    retry_btn="重新生成",
    undo_btn="撤销",
    clear_btn="清空"
)

demo.launch(server_name="0.0.0.0", server_port=7860)
EOF

四、使用 Blocks 构建复杂界面

cat > /opt/gradio-app/blocks_demo.py <<'EOF'
import gradio as gr

def summarize(text, max_length):
    # 简单的文本截取示例（实际应用中对接 LLM）
    words = text.split()
    if len(words) > max_length:
        return " ".join(words[:max_length]) + "..."
    return text

def translate(text, target_lang):
    # 模拟翻译（实际应用中对接翻译 API 或模型）
    return f"[{target_lang}] {text}"

with gr.Blocks(title="AI 工具箱") as demo:
    gr.Markdown("# AI 工具箱\n多种 AI 功能集于一体")

    with gr.Tab("文本摘要"):
        with gr.Row():
            with gr.Column():
                summary_input = gr.Textbox(label="原始文本", lines=8)
                max_len = gr.Slider(10, 200, value=50, step=10, label="最大词数")
                summary_btn = gr.Button("生成摘要", variant="primary")
            with gr.Column():
                summary_output = gr.Textbox(label="摘要结果", lines=8)
        summary_btn.click(summarize, [summary_input, max_len], summary_output)

    with gr.Tab("文本翻译"):
        with gr.Row():
            with gr.Column():
                trans_input = gr.Textbox(label="原始文本", lines=5)
                lang = gr.Dropdown(["英语", "日语", "法语", "德语"], label="目标语言", value="英语")
                trans_btn = gr.Button("翻译", variant="primary")
            with gr.Column():
                trans_output = gr.Textbox(label="翻译结果", lines=5)
        trans_btn.click(translate, [trans_input, lang], trans_output)

demo.launch(server_name="0.0.0.0", server_port=7860)
EOF

五、添加认证保护

cat > /opt/gradio-app/auth_demo.py <<'EOF'
import gradio as gr

def greet(name):
    return f"你好 {name}！欢迎使用 AI 工具。"

demo = gr.Interface(fn=greet, inputs="text", outputs="text")

# 设置用户名和密码
demo.launch(
    server_name="0.0.0.0",
    server_port=7860,
    auth=[("admin", "your_password"), ("user1", "password1")]
)
EOF

六、自动生成的 API

每个 Gradio 应用都会自动生成 REST API 接口：

# 查看 API 文档
# 访问 http://your-ip:7860/?view=api

# 调用 API
curl -X POST http://localhost:7860/api/predict \
  -H "Content-Type: application/json" \
  -d '{"data": ["测试文本"]}'

七、配置 Systemd 服务

cat > /etc/systemd/system/gradio-app.service <<EOF
[Unit]
Description=Gradio ML Demo Application
After=network.target

[Service]
Type=simple
User=root
WorkingDirectory=/opt/gradio-app
ExecStart=/opt/gradio-app/venv/bin/python chat_demo.py
Restart=always
RestartSec=10
Environment=GRADIO_SERVER_NAME=0.0.0.0
Environment=GRADIO_SERVER_PORT=7860

[Install]
WantedBy=multi-user.target
EOF

systemctl daemon-reload
systemctl enable gradio-app
systemctl start gradio-app

八、Nginx 反向代理

cat > /etc/nginx/sites-available/gradio <<'EOF'
server {
    listen 80;
    server_name demo.yourdomain.com;

    location / {
        proxy_pass http://127.0.0.1:7860;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_read_timeout 300;
        client_max_body_size 100M;
    }
}
EOF
ln -s /etc/nginx/sites-available/gradio /etc/nginx/sites-enabled/
nginx -t && systemctl reload nginx

九、集成 HuggingFace 模型

pip install transformers torch
cat > /opt/gradio-app/hf_demo.py <<'EOF'
import gradio as gr
from transformers import pipeline

# 加载情感分析模型
classifier = pipeline("sentiment-analysis")

def analyze_sentiment(text):
    result = classifier(text)
    label = result[0]["label"]
    score = result[0]["score"]
    emoji = "positive" if label == "POSITIVE" else "negative"
    return f"情感: {label} ({emoji})\n置信度: {score:.4f}"

demo = gr.Interface(
    fn=analyze_sentiment,
    inputs=gr.Textbox(label="输入文本", placeholder="输入英文文本进行情感分析"),
    outputs=gr.Textbox(label="分析结果"),
    title="文本情感分析",
    description="使用 DistilBERT 模型分析文本的情感倾向",
    examples=["I love this product!", "This is terrible."]
)

demo.launch(server_name="0.0.0.0", server_port=7860)
EOF

十、多应用部署

可以在同一台 VPS 上部署多个 Gradio 应用，使用不同端口：

# 应用1 运行在 7860 端口
# 应用2 运行在 7861 端口
# 通过 Nginx 的不同子域名或路径分别代理

十一、常见问题

文件上传失败

检查 Nginx 的 client_max_body_size 设置是否足够大，默认只有 1MB。

WebSocket 连接断开

Gradio 使用 WebSocket 进行实时通信，确保 Nginx 配置了 WebSocket 代理头部。

总结

Gradio 是为机器学习模型快速创建演示界面的最佳工具。配合搬瓦工 VPS 上部署的 HuggingFace 模型 或 Llama.cpp 本地模型，可以快速搭建可交互的 AI 应用演示。实验跟踪可以使用 MLflow。选购搬瓦工 VPS 请查看 全部方案，使用优惠码 NODESEEK2026 可享受 6.77% 的折扣，购买链接：bwh81.net。

关于本站

搬瓦工VPS中文网（bwgvps.com）是非官方中文信息站，整理搬瓦工的方案、优惠和教程。我们不销售主机，不提供技术服务。

新手必读
搬瓦工优惠码

NODESEEK2026（优惠 6.77%）

购买时填入即可抵扣。