📢 转载信息
原文链接：https://www.kdnuggets.com/the-kdnuggets-gradio-crash-course
原文作者：Shittu Olumide
Image by Editor
Gradio 简介
Gradio 是一个Python框架，它改变了机器学习从业者为其模型创建交互式Web界面的方式。只需几行代码，您就可以构建完善的应用程序，该应用程序可以接受各种输入（文本、图像、音频）并以直观的方式显示输出。无论您是研究人员、数据科学家还是开发人员，Gradio都能让模型部署对每个人都触手可及。
Gradio的一些好处包括：
- 它允许您在几分钟内从模型转到演示 (demo)
- 您不需要前端技能，只需要纯粹的Python实现
- 它支持文本、图像、音频及更多内容
- 您可以轻松地在本地共享和部署，也可以免费公开托管
Gradio 安装和基本设置
要开始使用Gradio，您需要使用pip命令安装该包。
pip install gradio
安装好Gradio后，让我们创建您的第一个Gradio应用程序。首先，创建一个名为 gradio_app.py 的文件，然后添加以下代码：
import gradio as gr def greet(name): return f"Hello {name}!" demo = gr.Interface( fn=greet, inputs="text", outputs="text", title="Greeting App" ) demo.launch()
使用 python gradio_app.py 运行此代码，您将在 http://127.0.0.1:7860/ 处获得一个正在运行的Web应用程序。该界面提供了一个文本输入、一个提交按钮和一个文本输出——所有这些都是根据您的简单规范自动生成的。
Image by Author
// 理解 Gradio 接口 (Interface)
gr.Interface 类是Gradio的高级应用程序编程接口 (API)，它抽象化了复杂性。它需要三个基本组件：
- 函数 (
fn): 处理输入的您的Python函数 - 输入 (Inputs): 输入类型(s)的规范
- 输出 (Outputs): 输出类型(s)的规范
// 探索输入和输出组件
虽然您可以使用简单的字符串（如 "text"、"image" 或 "audio"）来指定组件，但Gradio通过明确的组件类提供了更多的控制。
import gradio as gr demo = gr.Interface( fn=lambda x: x, inputs=gr.Textbox(lines=2, placeholder="Enter text here..."), outputs=gr.Textbox(label="Output") )
常见组件包括：
gr.Textbox(): 多行文本输入gr.Image(): 图像上传/预览gr.Audio(): 音频文件处理gr.Checkbox(): 布尔值输入gr.Slider(): 数值范围输入gr.Radio(): 多项选择gr.Dropdown(): 从选项中选择
// 处理多个输入和输出
实际应用通常需要多个输入或产生多个输出。Gradio可以优雅地使用列表来处理这种情况。
import gradio as gr def process_form(name, is_morning, temperature): greeting = "Good morning" if is_morning else "Hello" message = f"{greeting}, {name}! Temperature: {temperature}°C" return message, temperature * 1.8 + 32 # Convert to Fahrenheit demo = gr.Interface( fn=process_form, inputs=[ gr.Textbox(label="Name"), gr.Checkbox(label="Is it morning?"), gr.Slider(0, 100, label="Temperature (°C)") ], outputs=[ gr.Textbox(label="Greeting"), gr.Number(label="Temperature (°F)") ] ) demo.launch()
输出：
Image by Author
当使用多个输入时，您的函数必须接受相同数量的参数。同样，多个输出要求您的函数返回多个值。
// 处理图像
Gradio使得图像处理模型的演示变得异常简单：
import gradio as gr import numpy as np def apply_sepia(image): # Image comes as numpy array with shape (height, width, channels) sepia_filter = np.array([[0.393, 0.769, 0.189], [0.349, 0.686, 0.168], [0.272, 0.534, 0.131]]) sepia_image = image.dot(sepia_filter.T) sepia_image = np.clip(sepia_image, 0, 255).astype(np.uint8) return sepia_image demo = gr.Interface( fn=apply_sepia, inputs=gr.Image(label="Input Image"), outputs=gr.Image(label="Sepia Filtered"), title="Sepia Filter App" ) demo.launch()
输出：
Image by Author
gr.Image 组件会自动处理文件上传、预览，并将图像转换为NumPy 数组以供处理。
// 处理音频
音频应用同样简单：
import gradio as gr def transcribe_audio(audio): return "Transcribed text would appear here" demo = gr.Interface( fn=transcribe_audio, inputs=gr.Audio(label="Upload Audio", type="filepath"), outputs=gr.Textbox(label="Transcription"), title="Speech-to-Text Demo" ) demo.launch()
在实际应用中，您会在 transcribe_audio(audio) 函数内部调用语音识别模型。此处我们返回一个占位符。
输出：
Image by Author
使用 Gradio Blocks 创建高级布局
虽然 gr.Interface 非常适合简单的应用程序，但 gr.Blocks 提供了对布局和数据流的完全控制。可以将 Blocks 视为允许您构建复杂、多步骤应用程序的低级 API。
// 实现一个基础 Blocks 示例
import gradio as gr def greet(name): return f"Hello {name}!" with gr.Blocks() as demo: name_input = gr.Textbox(label="Your Name") greet_button = gr.Button("Greet") output = gr.Textbox(label="Greeting") greet_button.click( fn=greet, inputs=name_input, outputs=output ) demo.launch()
输出：
Image by Author
// 使用行和列构建复杂布局
这是一个更复杂的示例，集成了Transformers。请确保您的计算机上已安装Transformers包。
pip install transformers import gradio as gr from transformers import pipeline # Load a translation model translator = pipeline("translation_en_to_de", model="t5-small") def translate_text(text): result = translator(text, max_length=40)[0] return result['translation_text'] with gr.Blocks(title="English to German Translator") as demo: gr.Markdown("# 🌍 English to German Translator") with gr.Row(): with gr.Column(): english_input = gr.Textbox( label="English Text", placeholder="Enter text to translate...", lines=4 ) translate_btn = gr.Button("Translate", variant="primary") with gr.Column(): german_output = gr.Textbox( label="German Translation", lines=4 ) # Add example prompts gr.Examples( examples=[ ["Hello, how are you?"], ["The weather is beautiful today"], ["Machine learning is fascinating"] ], inputs=english_input ) translate_btn.click( fn=translate_text, inputs=english_input, outputs=german_output ) demo.launch()
输出：
Image by Author
管理 Gradio 应用程序中的状态
状态管理对于交互式应用程序很重要。Gradio提供了两种方法：全局状态和会话状态。
// 管理会话状态（用户特定）
对于用户特定的状态，使用Gradio内置的状态管理。下面的示例演示了一个简单的聊天机器人逻辑，使用状态来维护对话历史记录。
import gradio as gr with gr.Blocks() as demo: chatbot = gr.Chatbot(label="Conversation") msg = gr.Textbox(label="Your Message") clear = gr.Button("Clear") state = gr.State([]) def user_message(message, history): # Update history with user message and placeholder for bot return "", history + [[message, None]] def bot_response(history): # Simple echo bot logic response = f"I received: {history[-1][0]}" history[-1][1] = response return history msg.submit( user_message, [msg, state], [msg, state] ).then( bot_response, state, chatbot ) clear.click(lambda: (None, []), None, [chatbot, state]) demo.launch()
部署和共享您的应用程序
要快速共享，Gradio可以创建公共URL：
demo.launch(share=True)
这会生成一个临时的、可公开访问的链接，非常适合演示和与同事快速共享。它通常有效期为72小时。
要实现免费、永久托管：
- 创建一个Hugging Face账户
- 使用Gradio作为软件开发工具包 (SDK) 创建一个新的Space
- 上传您的应用程序文件：
app.py（您的主应用程序文件）和requirements.txt（Python依赖项）。requirements.txt文件中应包含的内容示例：
torch transformers
- 将您的代码推送到Git：
git add . git commit -m "Initial commit" git push
您的应用程序将可在 https://huggingface.co/spaces/your-username/your-space-name 访问。
Gradio应用程序可以部署在任何支持Python Web应用程序的平台上：
- 使用
demo.launch(server_name="0.0.0.0", server_port=7860) - 将应用程序及其所有依赖项打包到Docker容器中
- 部署在AWS、Google Cloud、Azure和其他平台上
构建图像分类仪表板
将我们所学的一切结合起来，让我们构建一个项目。这个项目是一个使用PyTorch和Gradio构建的简单图像分类仪表板。它使用一个预训练的深度学习模型，使用户可以通过Web界面上传图像并接收生成的五大预测类别。
我们将使用ResNet-50，这是一种著名的在ImageNet数据集上训练的卷积神经网络。由于模型是预训练的，该项目不需要任何自定义训练或标记数据。它旨在用于演示、实验和教育目的，而非生产使用。
我们将使用Gradio提供一个轻量级用户界面，以便用户可以直接从浏览器与模型进行交互。
import gradio as gr import torch from torchvision import models, transforms from PIL import Image # Load pre-trained model model = models.resnet50(pretrained=True) model.eval() # Preprocessing preprocess = transforms.Compose([ transforms.Resize(256), transforms.CenterCrop(224), transforms.ToTensor(), transforms.Normalize( mean=[0.485, 0.456, 0.406], std=[0.229, 0.224, 0.225] ) ]) def classify_image(image): image = Image.fromarray(image) input_tensor = preprocess(image) input_batch = input_tensor.unsqueeze(0) with torch.no_grad(): output = model(input_batch) # Get top 5 predictions probabilities = torch.nn.functional.softmax(output[0], dim=0) top5_prob, top5_catid = torch.topk(probabilities, 5) results = [] for i in range(top5_prob.size(0)): results.append(f"Category {top5_catid[i].item()}: {top5_prob[i].item()*100:.2f}%") return "\n".join(results) demo = gr.Interface( fn=classify_image, inputs=gr.Image(label="Upload Image"), outputs=gr.Textbox(label="Top 5 Predictions"), title="Image Classifier" ) demo.launch()
总结
Gradio通过消除模型开发与用户交互之间的传统障碍，使机器学习部署变得容易。通过本速成课程，您已经了解了创建Gradio接口、用于不同输入/输出类型的组件化设计、使用Gradio Blocks进行高级布局、状态管理以及用于共享工作的部署策略的基础知识。
Gradio的真正力量在于其简单性和灵活性。无论您是构建快速原型进行内部测试，还是构建完善的应用程序供公众使用；Gradio都为您提供了将机器学习模型付诸实践所需的工具。
Shittu Olumide 是一位软件工程师和技术作家，热衷于利用尖端技术来构建引人入胜的叙事，对细节有敏锐的洞察力，并擅长简化复杂的概念。您也可以在Twitter上找到Shittu。
🚀 想要体验更好更全面的AI调用？
欢迎使用青云聚合API，约为官网价格的十分之一，支持300+全球最新模型，以及全球各种生图生视频模型，无需翻墙高速稳定，文档丰富，小白也可以简单操作。
评论区