240807-Gradio客户端GUI与服务端API分离代码示例-CSDN博客

A. 客户端服务端分离的最终效果

240807-Gradio客户端GUI与服务端API分离代码示例_Pydantic

B. 前后端核心代码

Gradio支持将前端界面（客户端）与后端逻辑（服务端）分离。通过这种方式，客户端负责用户交互和显示，而服务端负责实际的数据处理和功能实现。

以下是如何实现这一功能的步骤：

服务端设置（API接口）：

使用FastAPI来创建API接口，它将在服务端处理请求并返回响应。

客户端设置（Gradio界面）：

在客户端使用Gradio构建界面，并在需要调用服务端功能时，通过HTTP请求与服务端进行通信。

服务端（FastAPI）示例代码

创建一个简单的FastAPI应用程序来处理请求：

from fastapi import FastAPI
from pydantic import BaseModel

app = FastAPI()

class InputData(BaseModel):
    text: str

@app.post("/process")
def process_data(data: InputData):
    # 处理数据的逻辑，例如文本处理
    result = f"Processed: {data.text}"
    return {"result": result}

保存为 server.py，然后运行该文件：

客户端（Gradio）示例代码

使用Gradio创建一个简单的客户端界面，通过HTTP请求与服务端通信：

import gradio as gr
import requests

def process_text(text):
    response = requests.post("http://<server_ip>:8000/process", json={"text": text})
    return response.json()["result"]

iface = gr.Interface(fn=process_text, inputs="text", outputs="text")
iface.launch()

保存为 client.py，然后运行该文件：

详细说明

服务端代码说明：

使用FastAPI创建了一个API应用。
定义了一个数据模型 InputData，包含了一个 text 字段。
创建了一个POST接口 /process，接收 InputData 类型的数据，处理后返回结果。

客户端代码说明：

使用Gradio创建了一个简单的界面，包含一个文本输入框和一个文本输出框。
定义了一个函数 process_text，该函数发送HTTP POST请求到服务端，传递用户输入的数据，并返回处理后的结果。
通过 gr.Interface 创建Gradio接口，并启动应用。

通过这种方式，客户端与服务端得到了有效分离，便于独立部署和扩展。

B. Pydantic解释
Pydantic在上述代码中起到了数据验证和数据模型定义的作用。具体来说，Pydantic用于定义数据结构和自动验证传入数据的格式和类型，确保输入数据符合预期。以下是Pydantic在代码中的具体作用：

数据模型定义

在FastAPI应用中，我们使用Pydantic定义了一个数据模型 InputData。这是通过继承 BaseModel 类实现的：

数据验证

Pydantic会自动验证传入的数据是否符合定义的数据模型。在我们的例子中，InputData 模型要求 text 字段为字符串。当客户端发送请求到 /process 端点时，FastAPI会使用Pydantic自动解析和验证请求体中的数据。如果数据不符合模型的要求，FastAPI会返回一个错误响应，并且不会调用处理函数。

示例代码解释

以下是服务端代码的详细解释，特别是Pydantic的部分：

from fastapi import FastAPI
from pydantic import BaseModel

# 定义一个Pydantic数据模型
class InputData(BaseModel):
    text: str  # 定义一个名为text的字符串字段

app = FastAPI()

# 定义一个POST接口，接收InputData类型的数据
@app.post("/process")
def process_data(data: InputData):
    # 处理数据的逻辑，例如文本处理
    result = f"Processed: {data.text}"
    return {"result": result}