Gradio项目JavaScript客户端使用指南-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00678/article/details/148326063

Gradio项目JavaScript客户端使用指南

gradio Gradio是一个开源库，主要用于快速搭建和分享机器学习模型的交互式演示界面，使得非技术用户也能轻松理解并测试模型的功能，广泛应用于模型展示、教育及协作场景。项目地址: https://gitcode.com/gh_mirrors/gr/gradio

前言

Gradio是一个用于快速构建机器学习演示应用的Python库，而Gradio JavaScript客户端则允许开发者在前端JavaScript环境中直接调用Gradio应用提供的API功能。本文将详细介绍如何使用Gradio JavaScript客户端与Gradio应用进行交互。

安装方式

npm安装（推荐）

对于Node.js项目（要求Node.js版本≥18.0.0）或基于浏览器的项目，可以通过npm安装：

npm install @gradio/client

安装完成后，可以在JavaScript或TypeScript文件中导入使用：

import { Client } from "@gradio/client";

CDN引入

对于快速原型开发或简单网页项目，可以通过CDN直接引入：

<script type="module">
  import { Client } from "https://cdn.jsdelivr.net/npm/@gradio/client/dist/index.min.js";
</script>

注意：生产环境建议指定具体版本号而非使用最新版本。

连接Gradio应用

连接公开应用

const app = await Client.connect("username/appname");

连接私有应用

对于需要认证的私有应用，需要提供访问令牌：

const app = await Client.connect("username/private-app", {
  hf_token: "your_token_here"
});

连接自定义部署

如果Gradio应用部署在其他服务器上，可以直接提供完整URL：

const app = await Client.connect("https://your-server.com/gradio-app");

API端点查看

连接应用后，可以查看可用的API端点：

const appInfo = await app.view_api();
console.log(appInfo);

返回的JSON结构会显示所有可用端点及其输入输出参数信息。

基本预测调用

简单调用

const result = await app.predict("/predict", ["输入内容"]);

多参数调用

对于需要多个输入参数的端点：

const result = await app.predict("/predict", [参数1, 参数2, 参数3]);

文件处理

处理音频、图片等文件类型输入：

const response = await fetch("音频文件URL");
const audioFile = await response.blob();
const result = await app.predict("/predict", [handle_file(audioFile)]);

高级功能

事件监听

对于生成型或长时间运行的任务，可以使用事件接口：

const job = app.submit("/predict", ["输入内容"]);

for await (const message of job) {
  console.log(message.data);
}

任务状态监控

const app = await Client.connect("username/appname", {
  events: ["status", "data"]
});

const job = app.submit("/predict", ["输入内容"]);

for await (const message of job) {
  if (message.type === "status") {
    console.log(`任务状态: ${message.status}`);
  }
}

任务取消

可以取消排队中但尚未开始的任务：

job.cancel();

生成型端点处理

对于连续输出的生成型端点：

const app = await Client.connect("username/generator-app");
const job = app.submit("/generate", [初始参数]);

for await (const message of job) {
  console.log("生成内容:", message.data);
}