全网最详细Gradio教程系列5——Gradio Client: javascript

全网最详细Gradio教程系列5——Gradio Client: javascript

简介本文概述5. Gradio 客户端的三种使用方式5.2 如何使用Gradio JavaScript 客户端5.2.1 安装1. npm 方式2. CDN 方式3. 在线执行环境：PLAYCODE

5.2.2 连接Gradio 程序1. 通过URL 或SpaceID 连接2. 辅助：Duplicate() 和hf_token

5.2.3 查看API 端点1. 函数view_api() 2. 页面查看API

5.2.4 使用API1 异步调用.predict()2。

参考

前言

在本系列中，我们将主要介绍网页界面工具“Gradio”。 Gradio是Hugging Face发布的一个简单的Webui开发框架，基于FastAPI和Svelte，可以轻松部署人工智能模型，并且支持大规模语言和扩散模型在机器中的开发和显示，是当前流行的UI。非常易于使用的框架。本系列文章对Gradio 的详细技术架构、历史、应用场景以及与其他框架Gradio/NiceGui/StreamLit/Dash/PyWebIO 的差异进行了概念性介绍，同时还提供了许多实用的解释。实践部分首先解释各种安装、操作和部署方法，然后介绍接口、块和自定义组件的基本类，最后介绍各种高级Gradio 功能，例如Gradio-Lite、Gradio Client 和我们将通过表格详细解释这些功能。数据科学和绘图等等。

本系列文章目录如下：

《全网最详细Gradio教程系列1——Gradio简介》 《全网最详细Gradio教程系列2——Gradio的安装与运行》 《全网最详细Gradio教程系列3——Gradio的3+1种部署方式实践》 《全网最详细Gradio教程系列4——浏览器集成Gradio-Lite》 《全网最详细Gradio教程系列5——Gradio Client: python》 《全网最详细Gradio教程系列5——Gradio Client: javascript》 《全网最详细Gradio教程系列5——Gradio Client: curl》 33 360《全网最详细Gradio教程系列6——Interfaces》 3 《全网最详细Gradio教程系列7——Blocks》 《全网最详细Gradio教程系列8——Custom Components》

本篇摘要

本章介绍使用Gradio 客户端访问API 的三种方法：Python、JavaScript 和curl。由于字数限制，本文分为三篇博客。本文介绍了JavaScript 方法。

5. Gradio Client的三种使用方式

程序部署后，如何使用Gradio应用程序进行API访问？ 这里使用Gradio客户端。使用Gradio 客户端有三种方法：Python、JavaScript 和curl，如下所述。

5.2 使用Gradio JavaScript Client

除了Python方法之外，还有JavaScript和Curl通过API使用Gradio应用程序。 JavaScript 使得使用任何Gradio 应用程序作为API 变得非常容易。本节介绍如何通过JavaScript 使用Gradio 客户端。其中包括两种安装方式：npm和CDN，Web在线开发环境PLAYCODE，连接Gradio的两种方式，URL和SpaceID，并显示。有两种使用API 的方式：view_api 和页面视图API，两种使用API 的方式是直接调用.predict() 和异步调用作业。

程序的大部分细节已经在Python客户端部分解释过了，所以本节我们不再重复解释和编码。相反，将相应的Python 命令替换为JavaScript 以减少长度。

5.2.1 安装

1. npm方式

Gradio JavaScript 客户端使用@gradio/client 库。 @gradio 还包括其他库，例如lite、audio、image、vedio、chatbot 和gallery。要安装@gradio/client 库，您必须使用npm，Node.js 附带的包管理器。这里需要Node.js 版本=18.0.0。

首先，安装Node.js。该bash 脚本是：

# 安装nvm（节点版本管理器）

卷曲-o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh |

# 下载并安装Node.js （您可能需要重新启动终端）

nvm安装20

# 确保您的环境中有正确的Node.js 版本

node -v # 应该打印`v20.15.1`

# 确保您的环境中有正确的NPM 版本

npm -v # 应该打印`10.7.0`

上述命令也可以直接在终端运行。安装Node.js 后，使用npm 或其他包管理器安装@gradio/client。

$ npm 我@gradio/client

10 秒内添加64 个包

10个寻求资金的方案

运行“npm 基金”了解更多信息

此命令将@gradio/client 添加到项目的依赖项中，以便您可以将其导入JavaScript 或TypeScript 文件中。

此时可以测试简单的脚本，比如打印日志到控制台等。这是代码：

console.log(\’Hello NodeJS\’)

如果将其保存为hello.js 并使用命令节点运行它，输出将是：

$node hello.js

你好NodeJS

消息：

Ubuntu 系统上的apt-get 命令未安装正确版本的nodejs 或npm。唯一安装的版本是12.XX，不包括npm。除了脚本方式之外，还可以通过Ubuntu Software软件中心安装v20.15.1 Node.js。

2. CDN方式

要快速将@gradio/client 添加到您的Web 项目，请使用jsDelivr CDN 将最新版本的@gradio/client 加载到您的HTML 文件中。

脚本src=\’https://cdn.jsdelivr.net/npm/@gradio/client/dist/index.min.js\’/script

HTML文件的总体内容如下：

!DOCTYPE html

html lang=\’en\’

头

元字符集=\’UTF-8\’

元名称=\’视口\’内容=\’宽度=设备宽度，初始比例=1.0\’

链接rel=\’stylesheet\’ href=\’src/style.css\’

脚本类型=\’模块\’ src=\’https://cdn.jsdelivr.net/npm/@gradio/client/dist/index.min.js\’/script

/头

身体

h1 id=\’标题\’/h1

脚本类型=\’模块\’ src=\’src/script.js\’/script

/身体

/html

JavaScript 脚本的内容可以输入到script.js 文件中，如下所示：

console.log(\’Hello NodeJS\’)

注意：请务必将脚本内容添加到HTML head 标记中。这将安装最新版本的@gradio/client，但我们建议在生产环境中对此版本进行硬编码。接下来，将js 脚本放置在body 脚本标记内。尽管这种方法有局限性，但它非常适合实验和原型设计。详细的使用信息请参考jsDelivr官方网站（https://www.jsdelivr.com/package/npm/@gradio/client）。

3. 在线运行环境：PLAYCODE

我们演示了CDN模式下@gradio/client的使用，并引入了国外的在线操作平台，方便使用SpaceID创建的应用程序的执行。在众多的在线运行环境中，笔者推荐PLAYCODE（官网地址：https://playcode.io/）。它界面简单，支持javascript/typescript/html/css/React/vue/svelte 等多种格式及其关联的运行时库，并且允许您在线安装所需的包，让您在线构建小程序非常方便。发展。

在线安装@gradio/client后，使用await关键字运行示例程序，报如下错误：

“cjs”输出格式当前不支持顶级等待

这是因为默认情况下，并非所有JavaScript 运行时或编译工具都支持顶级等待。现在，只需使用async() 方法包装您的await 关键字代码。我们以API代码为例（由于篇幅限制，稍后我们也可以处理包含await关键字的代码）。由于篇幅所限，作者不再赘述）。要求读者添加自己的限制。

从\’@gradio/client\’导入{client}；

（异步（）={

const app=等待Client.connect(\’abidlabs/whisper\’);

const app_info=等待app.view_api();

控制台.log（应用程序信息）；

})();

这是它运行的屏幕截图：

虽然这里的主要目的是演示如何使用CDN，但本文中的npm 和cdn 命令都适用。

5.2.2 连接到Gradio程序

1. 通过URL或SpaceID连接

首先，当您实例化客户端时，您需要连接到在Hugging Face Spaces 或任何其他在线网络上运行的Gradio 应用程序。 SpaceID 和URL 可以通过两种方式使用：

从\’@gradio/client\’导入{client}；

# 通过URL 连接

const app=Client.connect(\’https://huggingface.co/spaces/gradio/calculator\’)

# 通过SpaceID 连接

const app=Client.connect(\’梯度/计算器\’)

2. 辅助：duplicate()和hf_token

要无限制地访问空间，您可以使用duplicate()。如果使用Duplicate()或者访问私有空间，则必须使用hf_token。 示例代码如下。

从\’@gradio/client\’导入{client}；

const 响应=等待获取（

“https://audio-samples.github.io/samples/mp3/blizzard_unconditional/sample-0.mp3”

）；

const audio_file=等待响应。斑点（）；

const app=wait Client.duplicate(\’abidlabs/whisper\’, { hf_token: \’hf_.\’ });

const 转录=等待app.predict(\’/predict\’, [audio_file]);

console.log(转录.数据);

消息：

如果先前已复制该空间，则重新运行Client.duplicate() 将不会创建新空间。相反，客户端连接到之前创建的空间。因此，使用相同的空格多次重新运行Client.duplicate() 方法是安全的。如果原始空间使用GPU，复制的私有空间也将使用GPU，并且您的Hugging Face帐户将按照GPU的价格收费。为了最大限度地降低成本，您可以在5 分钟不活动后自动将共享空间置于睡眠状态，也可以使用重复参数的硬件和超时属性来强制共享空间在5 分钟不活动后自动睡眠。

从\’@gradio/client\’导入{client}；

const app=等待Client.duplicate(\’abidlabs/whisper\’, {

hf_token: \’hf_.\’,

超时： 60,

hardware: \’a10g-small\’ # 自由设置\’cpu-basic\’

});

5.2.3 查看API端点

与Python 类似，JavaScript 有两种显示API 的方式。这就是函数view_api() 和页面视图API。

1. 函数view_api()

连接到Gradio 应用程序后，您可以通过调用客户端的view_api() 方法来查看可用的API。对于Whisper Space，直接使用SpaceID 会导致连接错误，因此您可以在本地运行abidlabs/whisper 后使用http://127.0.0.1:7860 进行连接。

从\’@gradio/client\’导入{client}；

const app=等待Client.connect(\’http://127.0.0.1:7860\’);

const app_info=等待app.view_api(all_endpoints=True);

控制台.log（应用程序信息）；

有关/predict 和端点的说明，请参阅上一篇文章。这里我们只讨论参数all_endpoints。如果您的Gradio 应用程序具有未命名的API 端点，您可以设置all_endpoints 以显示这些端点。

保存后缀为.js的文件后，运行命令node xxx.js，您将看到以下输出：

$nodegradio_client_viewapi.js

{

命名端点： {

\’/predict\’: {parameters: [数组], returns: [数组], type: [对象] }

},

unnamed_endpoints: { \’0\’: {parameters: [数组], returns: [数组], type: [对象] } }

}

#官方输出示例

{

\’named_endpoints\’: {

\’/预测\’: {

\’参数\’: [

{

\’标签\’: \’文本\’,

\’组件\’: \’文本框\’,

\’类型\’: \’字符串\’

}

],

‘回去’: [

{

\’标签\’: \’输出\’,

\’组件\’: \’文本框\’,

\’类型\’: \’字符串\’

}

]

}

},

\’unnamed_endpoints\’: {}

}

这里的运行结果和官方例子有一些差异。这里就不详细解释了，了解一下如何使用即可。

2. 页面查看API

您还可以单击Gradio 应用程序页脚中的“通过API 使用”链接。显示相同的信息和使用示例，如下所示。

View API 页面还包括一个“API Recorder”，用于记录与Gradio UI 的交互信息，并将该交互转换为要在JS 客户端中执行的相应代码。

5.2.4 使用API

了解完API 后，您需要学习如何使用它。有两种使用方法。您可以直接调用.predict()，也可以异步调用该作业。

1. 直接调用.predict()

使用API 进行预测的最简单方法是使用适当的参数调用.predict() 方法。

从\’@gradio/client\’导入{client}；

const app=等待Client.connect(\’abidlabs/en2fr\’);

const result=wait app.predict(\’/predict\’, [\’Hello\’]);

控制台.log(结果);

(5) {type: \’data\’, time: 2024 年7 月23 日星期二.}

类型：\’数据\’

time:2024 7 月23 日星期二10:42:09 GMT+0800（中国标准时间）

data:(1) [\’你好\’]

端点：\’/预测\’

fn_index:0

[[原型]]:{}

让我们看看其他参数类型。

多个参数：多个参数可以以数组的形式传递给.predict()，结果在json中表征如下：

从\’@gradio/client\’导入{client}；

const app=wait Client.connect(\’gradio/calculator\’);

const result=wait app.predict(\’/predict\’, [4, \’add\’, 5]);

console.log(JSON.stringify(结果， null, 2));

{

\’类型\’: \’数据\’,

\’时间\’: \’2024-07-23T07:43:34.380Z\’,

\’数据\’: [

9

],

\’端点\’: \’/预测\’,

\’fn_index\’: 0

}

多媒体格式：某些多媒体格式（例如图像）可以选择传递缓冲区、blob 或文件。 Node 节点可以是Buffer 或Blob，在浏览器环境中可以是Blob 或File。

从\’@gradio/client\’导入{client}；

const 响应=等待获取（

“https://audio-samples.github.io/samples/mp3/blizzard_unconditional/sample-0.mp3”

）；

const audio_file=等待响应。斑点（）；

const app=等待Client.connect(\’abidlabs/whisper\’);

const result=wait app.predict(\’/predict\’, [audio_file]);

(5) {type: \’data\’, time: 2024 年7 月23 日星期二.}

类型：\’数据\’

时间：2024年7月23日星期二10:55:37 GMT+0800（中国标准时间）

data:(1) [\’自动语音识别输出(t.]

0:\’AutomaticSpeechRecognitionOutput(text=\’在我看来，我没有任何人拥有您为我倾注的那种美丽和意志。罗切斯特先生，阁下。\’, chunk=none)\’

[[原型]]:[]

端点：\’/预测\’

fn_index:0

[[原型]]:{}

示例代码可能会失败，因为它需要传输.mp3 文件。请运行几次。

2. 异步调用job

.predict() 是一个阻塞操作，因此您可以让它在后台运行，同时等待API 返回结果。您可以创建一个Job 实例，使用其.submit() 提交操作，在后台运行JOB，并使用可迭代接口检索返回的结果。这对于随着时间的推移返回一系列离散响应值的可重复端点或生成器端点特别有用。示例代码如下。

从\’@gradio/client\’导入{client}；

函数log_result(有效负载) {

持续的{

data: [翻译]

}=有效负载；

console.log(`翻译结果为： ${translation}`);

}

const app=等待Client.connect(\’abidlabs/en2fr\’);

const job=app.submit(\’/predict\’, [\’Hello\’]);

for wait（作业常量消息）{

日志结果（消息）；

}

示例代码首先使用客户端创建一个JOB，然后循环等待可迭代端点返回结果，最后将返回结果打印到平台日志中。输出效果请参见以下示例。

事件和状态：连接到Gradio 应用程序默认返回数据。您还可以在实例化客户端时通过设置事件接口.connect() 的事件参数events 将状态和数据以数组形式传递给事件，从而允许您同时检索正在运行的作业的状态和数据。示例代码如下。如下：

从\’@gradio/client\’导入{client}；

函数log_status(状态) {

控制台.日志(

`此作业的当前状态是： ${JSON.stringify(status, null, 2)}。

）；

}

const app=等待Client.connect(\’abidlabs/en2fr\’, {

events: [\’状态\’, \’数据\’]

});

const job=app.submit(\’/预测\’, [\’地狱

o\”]);
for await (const message of job) {
if (message.type === \”status\”) {
log_status(message);
}
}

运行截图如下所示：

返回的状态包括以下属性：stage（当前作业的可读状态，如\”pending\” | “generating” | “complete” | “error”），code（gradio的job状态代码），position（此作业在队列中的当前位置），queue（是否排队），size（队列总大小），eta（此作业预计完成的时间），success（作业是否成功完成的布尔值），以及time（Date对象，详细说明状态生成的时间）。

取消作业：job实例还有一个.cancel()方法，用于取消已排队但尚未启动的作业，如下：

import { Client } from \”@gradio/client\”;
const app = await Client.connect(\”abidlabs/en2fr\”);
const job_one = app.submit(\”/predict\”, [\”Hello\”]);
const job_two = app.submit(\”/predict\”, [\”Friends\”]);
job_one.cancel();
job_two.cancel();

如果第一个作业已开始处理，则不会取消，但client客户端将不再接受更新信息（丢弃作业）。如果第二个作业尚未启动，它将被成功取消并从队列中删除。

生成器端点：某些Gradio API端点不返回单个值，而是返回一系列值。这时可以使用可迭代接口实时监听这些值：

import { Client } from \”@gradio/client\”;
const app = await Client.connect(\”gradio/count_generator\”);
const job = app.submit(0, [9]);
for await (const message of job) {
console.log(message.data);
}
setTimeout(() => {
job.cancel();
}, 3000);

上面代码将输出endpoint端点产生的系列值，然后通过设置超时函数setTimeout()，在3秒后取消迭代输出的job，这时job将立即完成。

参考文献

Getting Started with the Gradio JavaScript Client

#以上关于全网最详细Gradio教程系列5——Gradio Client: javascript的相关内容来源网络仅供参考，相关信息请以官方公告为准！