如何用 gradio.Server 为 Gradio 后端接入完全自定义前端并添加自定义路由【免费下载链接】gradioBuild and share delightful machine learning apps, all in Python. Star to support our work!项目地址: https://gitcode.com/GitHub_Trending/gr/gradio如果你已经有一个基于 Gradio 的机器学习后端但自带的 UI 组件满足不了界面需求——想换成自己的 HTML 页面、React 或 Svelte 应用甚至完全不要前端只留一个带排队queuing和流式SSE streaming能力的 API 服务——Gradio 的Server mode就是为此设计的。做法是直接实例化gradio.Server它是一个内置了 Gradio API 引擎的 FastAPI 服务器你可以自由决定前端长什么样也可以在同一个服务器上注册任意自定义的 FastAPI 路由自定义 GET/POST 接口、中间件、依赖注入。完成本文后你会得到一个运行在http://localhost:7860的服务自定义 HTML 页面作为首页若干通过app.api()注册的 Gradio API 端点以及若干你自己的 FastAPI 路由。什么时候该用gradio.Server而不是gr.Blocks根据官方指南 Server mode满足以下任一条时用gradio.Server替代gr.Blocks你想要一个完全自定义的 UI自己的 HTML、React、Svelte 等但后端仍由 Gradio 提供你想拥有完整的 FastAPI 控制权在 Gradio API 端点之外添加自定义 GET/POST 路由、中间件、依赖注入你要构建一个要托管到 Hugging Face Spaces的服务无论是否使用 ZeroGPU但不需要 Gradio 组件。如果你用 Gradio 内置 UI 组件gr.Blocks、gr.ChatInterface、gr.Interface就能满足需求则不需要 Server mode。安装gradio.Server包含在主 Gradio 包中。如果你还想把 API 端点暴露为 MCP tools安装时加上mcp扩展pip install gradio[mcp]搭建最小 API 后端最简单的 Server mode 应用是一个只有 API 端点、没有任何 UI 的服务以下代码来自官方指南from gradio import Server app Server() app.api(namehello) def hello(name: str) - str: return fHello, {name}! app.launch()运行这个脚本后你会得到一个带排队和 SSE 流式支持的 Gradio API 端点/gradio_api/call/hello自动生成的 API 文档位于/gradio_api/info可用的 Python 和 JavaScript 客户端能按名字/hello调用该端点。用 Gradio Python 客户端验证后端是否正常工作from gradio_client import Client client Client(http://localhost:7860) result client.predict(World, api_name/hello) print(result) # Hello, World!文档示例输出为Hello, World!实际调用结果会跟随传入的name参数变化。如果打印出对应问候语说明 API 端点、排队引擎和客户端链路都已就绪。添加自定义 FastAPI 路由因为gradio.Server继承自 FastAPI你可以像对待普通 FastAPI 应用一样注册路由以下代码来自官方指南from gradio import Server from fastapi.responses import HTMLResponse app Server() app.api(namehello) def hello(name: str) - str: return fHello, {name}! app.get(/, response_classHTMLResponse) async def homepage(): return h1Welcome to my API/h1 app.get(/health) async def health(): return {status: ok} app.launch()几个关键行为自定义路由优先于 Gradio 的默认路由。例如上面的GET /会直接替换 Gradio 的默认 UI 页面——这就是接入完全自定义前端的基本机制你自己的页面占据首页Gradio 只负责/gradio_api/...下的 API。所有标准 FastAPI 特性都可用app.add_middleware()、app.include_router()、依赖注入、异常处理器等。验证方式浏览器访问http://localhost:7860/应看到Welcome to my API而不是 Gradio 默认 UI访问http://localhost:7860/health应返回{status: ok}文档示例。让自定义前端调用后端 API前端页面要调用 Gradio API 端点官方路径是使用gradio/clientJavaScript 客户端。两种安装方式来自 JS Client 指南npm 项目Node.js 18.0.0 或基于浏览器的项目npm i gradio/client快速原型直接在 HTML 中通过 CDN 引入。注意文档提示CDN 方式加载的是最新版生产环境建议固定版本号script typemodule import { Client } from https://cdn.jsdelivr.net/npm/gradio/client/dist/index.min.js; // ... /script仓库中提供了一个把上述能力组合起来的完整示例 demo/server_app/run.py一个自定义 HTML 计算器页面放在/两个 Gradio API 端点add和multiply外加 MCP tools。核心逻辑是这样的from gradio import Server from fastapi.responses import HTMLResponse app Server() app.mcp.tool(nameadd) app.api(nameadd) def add(a: int, b: int) - int: Add two numbers together. return a bapp.get(/, response_classHTMLResponse) async def homepage(): return html... script typemodule import { client } from https://cdn.jsdelivr.net/npm/gradio/client/dist/index.min.js; const app await client(location.origin); window.run async (ep) { const a parseInt(document.getElementById(a).value), b parseInt(document.getElementById(b).value); document.getElementById(out).textContent (await app.predict(/ ep, { a, b })).data; }; /script...if __name__ __main__: app.launch(mcp_serverTrue)页面里的client(location.origin)把 JS 客户端连接到当前页面所在的服务器地址app.predict(/ ep, { a, b })调用对应 API 端点ep取值add或multiply。完整 HTML含样式见 demo/server_app/run.py。运行与验证python run.py然后在浏览器打开http://localhost:7860计算器页面应显示在首页点击或×按钮后页面调用对应的 Gradio API 端点并把结果显示在#out区域。同一个端点同时也可通过 REST API 在/gradio_api/call/add和/gradio_api/call/multiply访问。用 curl 验证 REST 链路时沿用 cURL 指南描述的两步流程POST提交、GET取结果curl -X POST http://localhost:7860/gradio_api/call/add -H Content-Type: application/json -d { data: [3, 5] }返回{event_id: ...}后把其中的事件 ID 替换下面的$EVENT_ID再用GET取流式结果curl -N http://localhost:7860/gradio_api/call/add/$EVENT_ID成功时结果流以event: complete和对应data收尾文档示例格式。可选把端点暴露为 MCP tools如果还需要让 MCP 客户端调用这些端点叠加app.mcp.tool()装饰器并在launch()传mcp_serverTruefrom gradio import Server app Server() app.mcp.tool(namehello) app.api(namehello) def hello(name: str) - str: Greet someone by name. return fHello, {name}! app.launch(mcp_serverTrue)app.mcp.tool()和app.api()相互独立可以只有 API 端点、只有 MCP tool也可以两者叠加如上例函数同时通过 API 和 MCP 可用。前提是按安装章节装上gradio[mcp]。并发与流式配置app.api()支持与gr.api()相同的并发和流式选项app.api(namegenerate, concurrency_limit2, stream_every0.5) async def generate(prompt: str): for token in model.generate(prompt): yield token生成器函数会自动通过 SSE 流式输出结果与普通 Gradio 应用一致concurrency_limit控制该端点允许的并发调用数默认值为 1——因为许多跑在 GPU 上的 ML 负载一次只能服务一个用户如果端点实际是调用外部 API 之类不受 GPU 限制的场景可以调大或设为None使用 FastAPI 默认行为。上例中的model.generate(prompt)是文档给出的示意写法需要替换为你自己的模型调用逻辑。限制与注意ZeroGPU 场景下如果Server应用使用 ZeroGPU浏览器端必须通过gradio/client调用 Gradio API 端点JavaScript 客户端会转发 Hugging Face iframe 认证所需的 header用于 ZeroGPU 配额处理。绕过 JS 客户端直连 REST 会丢失这些 header。自定义路由会覆盖 Gradio 同名默认路由一旦你注册了GET /Gradio 默认 UI 页面就不再出现在根路径。完整参数launch()与api()的全部选项可参考源码 gradio/server.py其中launch()的参数与Blocks.launch()一致。【免费下载链接】gradioBuild and share delightful machine learning apps, all in Python. Star to support our work!项目地址: https://gitcode.com/GitHub_Trending/gr/gradio创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
如何用 gradio.Server 为 Gradio 后端接入完全自定义前端并添加自定义路由
如何用 gradio.Server 为 Gradio 后端接入完全自定义前端并添加自定义路由【免费下载链接】gradioBuild and share delightful machine learning apps, all in Python. Star to support our work!项目地址: https://gitcode.com/GitHub_Trending/gr/gradio如果你已经有一个基于 Gradio 的机器学习后端但自带的 UI 组件满足不了界面需求——想换成自己的 HTML 页面、React 或 Svelte 应用甚至完全不要前端只留一个带排队queuing和流式SSE streaming能力的 API 服务——Gradio 的Server mode就是为此设计的。做法是直接实例化gradio.Server它是一个内置了 Gradio API 引擎的 FastAPI 服务器你可以自由决定前端长什么样也可以在同一个服务器上注册任意自定义的 FastAPI 路由自定义 GET/POST 接口、中间件、依赖注入。完成本文后你会得到一个运行在http://localhost:7860的服务自定义 HTML 页面作为首页若干通过app.api()注册的 Gradio API 端点以及若干你自己的 FastAPI 路由。什么时候该用gradio.Server而不是gr.Blocks根据官方指南 Server mode满足以下任一条时用gradio.Server替代gr.Blocks你想要一个完全自定义的 UI自己的 HTML、React、Svelte 等但后端仍由 Gradio 提供你想拥有完整的 FastAPI 控制权在 Gradio API 端点之外添加自定义 GET/POST 路由、中间件、依赖注入你要构建一个要托管到 Hugging Face Spaces的服务无论是否使用 ZeroGPU但不需要 Gradio 组件。如果你用 Gradio 内置 UI 组件gr.Blocks、gr.ChatInterface、gr.Interface就能满足需求则不需要 Server mode。安装gradio.Server包含在主 Gradio 包中。如果你还想把 API 端点暴露为 MCP tools安装时加上mcp扩展pip install gradio[mcp]搭建最小 API 后端最简单的 Server mode 应用是一个只有 API 端点、没有任何 UI 的服务以下代码来自官方指南from gradio import Server app Server() app.api(namehello) def hello(name: str) - str: return fHello, {name}! app.launch()运行这个脚本后你会得到一个带排队和 SSE 流式支持的 Gradio API 端点/gradio_api/call/hello自动生成的 API 文档位于/gradio_api/info可用的 Python 和 JavaScript 客户端能按名字/hello调用该端点。用 Gradio Python 客户端验证后端是否正常工作from gradio_client import Client client Client(http://localhost:7860) result client.predict(World, api_name/hello) print(result) # Hello, World!文档示例输出为Hello, World!实际调用结果会跟随传入的name参数变化。如果打印出对应问候语说明 API 端点、排队引擎和客户端链路都已就绪。添加自定义 FastAPI 路由因为gradio.Server继承自 FastAPI你可以像对待普通 FastAPI 应用一样注册路由以下代码来自官方指南from gradio import Server from fastapi.responses import HTMLResponse app Server() app.api(namehello) def hello(name: str) - str: return fHello, {name}! app.get(/, response_classHTMLResponse) async def homepage(): return h1Welcome to my API/h1 app.get(/health) async def health(): return {status: ok} app.launch()几个关键行为自定义路由优先于 Gradio 的默认路由。例如上面的GET /会直接替换 Gradio 的默认 UI 页面——这就是接入完全自定义前端的基本机制你自己的页面占据首页Gradio 只负责/gradio_api/...下的 API。所有标准 FastAPI 特性都可用app.add_middleware()、app.include_router()、依赖注入、异常处理器等。验证方式浏览器访问http://localhost:7860/应看到Welcome to my API而不是 Gradio 默认 UI访问http://localhost:7860/health应返回{status: ok}文档示例。让自定义前端调用后端 API前端页面要调用 Gradio API 端点官方路径是使用gradio/clientJavaScript 客户端。两种安装方式来自 JS Client 指南npm 项目Node.js 18.0.0 或基于浏览器的项目npm i gradio/client快速原型直接在 HTML 中通过 CDN 引入。注意文档提示CDN 方式加载的是最新版生产环境建议固定版本号script typemodule import { Client } from https://cdn.jsdelivr.net/npm/gradio/client/dist/index.min.js; // ... /script仓库中提供了一个把上述能力组合起来的完整示例 demo/server_app/run.py一个自定义 HTML 计算器页面放在/两个 Gradio API 端点add和multiply外加 MCP tools。核心逻辑是这样的from gradio import Server from fastapi.responses import HTMLResponse app Server() app.mcp.tool(nameadd) app.api(nameadd) def add(a: int, b: int) - int: Add two numbers together. return a bapp.get(/, response_classHTMLResponse) async def homepage(): return html... script typemodule import { client } from https://cdn.jsdelivr.net/npm/gradio/client/dist/index.min.js; const app await client(location.origin); window.run async (ep) { const a parseInt(document.getElementById(a).value), b parseInt(document.getElementById(b).value); document.getElementById(out).textContent (await app.predict(/ ep, { a, b })).data; }; /script...if __name__ __main__: app.launch(mcp_serverTrue)页面里的client(location.origin)把 JS 客户端连接到当前页面所在的服务器地址app.predict(/ ep, { a, b })调用对应 API 端点ep取值add或multiply。完整 HTML含样式见 demo/server_app/run.py。运行与验证python run.py然后在浏览器打开http://localhost:7860计算器页面应显示在首页点击或×按钮后页面调用对应的 Gradio API 端点并把结果显示在#out区域。同一个端点同时也可通过 REST API 在/gradio_api/call/add和/gradio_api/call/multiply访问。用 curl 验证 REST 链路时沿用 cURL 指南描述的两步流程POST提交、GET取结果curl -X POST http://localhost:7860/gradio_api/call/add -H Content-Type: application/json -d { data: [3, 5] }返回{event_id: ...}后把其中的事件 ID 替换下面的$EVENT_ID再用GET取流式结果curl -N http://localhost:7860/gradio_api/call/add/$EVENT_ID成功时结果流以event: complete和对应data收尾文档示例格式。可选把端点暴露为 MCP tools如果还需要让 MCP 客户端调用这些端点叠加app.mcp.tool()装饰器并在launch()传mcp_serverTruefrom gradio import Server app Server() app.mcp.tool(namehello) app.api(namehello) def hello(name: str) - str: Greet someone by name. return fHello, {name}! app.launch(mcp_serverTrue)app.mcp.tool()和app.api()相互独立可以只有 API 端点、只有 MCP tool也可以两者叠加如上例函数同时通过 API 和 MCP 可用。前提是按安装章节装上gradio[mcp]。并发与流式配置app.api()支持与gr.api()相同的并发和流式选项app.api(namegenerate, concurrency_limit2, stream_every0.5) async def generate(prompt: str): for token in model.generate(prompt): yield token生成器函数会自动通过 SSE 流式输出结果与普通 Gradio 应用一致concurrency_limit控制该端点允许的并发调用数默认值为 1——因为许多跑在 GPU 上的 ML 负载一次只能服务一个用户如果端点实际是调用外部 API 之类不受 GPU 限制的场景可以调大或设为None使用 FastAPI 默认行为。上例中的model.generate(prompt)是文档给出的示意写法需要替换为你自己的模型调用逻辑。限制与注意ZeroGPU 场景下如果Server应用使用 ZeroGPU浏览器端必须通过gradio/client调用 Gradio API 端点JavaScript 客户端会转发 Hugging Face iframe 认证所需的 header用于 ZeroGPU 配额处理。绕过 JS 客户端直连 REST 会丢失这些 header。自定义路由会覆盖 Gradio 同名默认路由一旦你注册了GET /Gradio 默认 UI 页面就不再出现在根路径。完整参数launch()与api()的全部选项可参考源码 gradio/server.py其中launch()的参数与Blocks.launch()一致。【免费下载链接】gradioBuild and share delightful machine learning apps, all in Python. Star to support our work!项目地址: https://gitcode.com/GitHub_Trending/gr/gradio创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
