开发者实战丨OpenVINO™ JavaScript API 详解与范例

点击蓝字

关注我们,让开发变得更有趣

作者 | 涂小丽 腾讯科技前端开发

OpenVINO™

从 OpenVINO™ 2024.0 开始，官方除了提供 Python/C/C++ API 外，还新增了 JavaScript API。通过 OpenVINO™ JavaScript API，开发者可以非常方便的将 AI 能力嵌入到网页形式的应用中去。

本文将介绍常用的 OpenVINO™ JavaScript API，并给出基于 yolov8s-cls 模型的推理范例程序。请读者先下载并导出 yolov8s-cls.onnx 模型，然后转换为 FP16 精度的 OpenVINO™ IR 格式模型 yolov8s-cls.xml&bin：

conda create -n ov_book python=3.11
conda activate js
python -m pip install --upgrade pip
pip install ultralytics openvino
yolo export model=yolov8s-cls.pt format=onnx imgsz=224    #下载并导出yolov8s-cls.onnx
ovc yolov8s-cls.onnx  #使用ovc工具将yolov8s-onnx模型转换为IR模型

OpenVINO™

搭建OpenVINO™ 

JavaScript 开发环境

搭建 OpenVINO™ JavaScript 开发环境包括：

安装 JavaScript 运行环境 Node.js

安装 JavaScript 编辑器 VS Code

安装 openvino-node

1 安装 JavaScript 运行环境 Node.js

Node.js  是一个开源的、跨平台的 JavaScript 运行环境，它允许开发者使用 JavaScript 编写服务器端的应用程序。Node.js 是基于 Chrome V8 JavaScript 引擎构建的，这使得它能够高效地处理大量的并发连接，并且保持非常高的性能。

请进入 node.js 官网：https://nodejs.org/zh-cn，下载并安装 Node.js。请注意 openvino-node 要求 node.js 版本大于20。

2 安装JavaScript编辑器VS Code

Visual Studio Code（简称“VS Code”） 是一款源、免费、颜值高且功能强大的代码编辑器，已成为 JavaScript 的主流代码编写工具。

请从VS Code官网：

https://code.visualstudio.com/

下载并安装VS Code。

请下载本文的范例代码到本地：

git clone https://github.com/txl1123/OpenVINO-JavaScript-API.git

然后用 VS Code的“File”菜单“Open Folder...”选项打开 OpenVINO-JavaScript-API，若能打开并浏览 yolov8s-cls.js，说明 VS Code 安装成功。

3 安装openvino-node

openvino-node 是 OpenVINO™ JavaScript 库，在 Windows PowerShell 中用命令完成安装：

npm config set registry https://registry.npmmirror.com
npm install openvino-node

安装完毕后，编写测试脚本test.js

const { addon: ov } = require('openvino-node');
console.log(ov);

运行若如下图所示，说明安装成功！

OpenVINO™

OpenVINO™ 

JavaScript API简介

由于 OpenVINO™ JavaScript API 是基于 OpenVINO™ C/C++ 库的封装，让 JavaScript 代码可以调用原本由 C++ 编写的 OpenVINO™ 库中的函数和方法，所以 OpenVINO™ JavaScript 的常用 API 跟 OpenVINO C++/Python API 非常类似，如下表所示。

OpenVINO™

英特尔®酷睿™ Ultra处理器简介

英特尔® 酷睿™ Ultra 处理器内置 CPU+GPU+NPU  的三大 AI 引擎，赋能 AI 大模型在不联网的终端设备上进行推理计算。

OpenVINO™

OpenVINO™ 

JavaScript API范例

基于 YOLOv8 分类模型 yolov8s-cls 的 OpenVINO™ JavaScript API 完整范例程序如下所示，这段代码首先导入了必要的模块，然后定义了一个 main 函数，该函数执行以下操作：

1. 初始化 OpenVINO™ 运行时核心。

2. 读取模型文件。

3. 读取和预处理输入图像。

4. 创建输入张量。

5. 将模型加载到CPU设备上。

6. 创建推理请求并执行同步推理。

7. 处理输出结果并打印分类结果。

// 导入 OpenVINO 和 OpenCV 的 Node.js 模块
const { addon: ov } = require('openvino-node');


const { cv } = require('opencv-wasm');
const { getImageData, hwcToNchw } = require('./helper.js');
// 调用主函数并传入模型路径和图像路径
main('./model/yolov8s-cls.xml', './imgs/car.png');
async function main(modelPath, imagePath) {
    // ----------------- 步骤 1. 初始化 OpenVINO 运行时核心 -----------------
    console.log('创建 OpenVINO 运行时核心');
    const core = new ov.Core();
    // ----------------- 步骤 2. 读取模型 -------------------------------------
    console.log(`读取模型: ${modelPath}`);
    const model = await core.readModel(modelPath);
    // ----------------- 步骤 3. 设置输入 -------------------------------------
    // 读取输入图像
    const imgData = await getImageData(imagePath);
    // 使用 opencv-wasm 对图像进行预处理
    const originalImage = cv.matFromImageData(imgData);
    const image = new cv.Mat();
    // 模型期望的是 RGB 格式的图像
    cv.cvtColor(originalImage, image, cv.COLOR_RGBA2RGB);
    // 将图像调整为模型输入所需的尺寸
    cv.resize(image, image, new cv.Size(224, 224));
    const tensorData = new Float32Array(image.data);
    const data = hwcToNchw(tensorData, image.rows, image.cols, 3);
    // 创建输入张量
    const inputTensor = new ov.Tensor(ov.element.f32, Int32Array.from([1, 3, 224, 224]), data);
    // ----------------- 步骤 5. 将模型加载到设备上 ----------------------
    console.log('将模型加载到插件');
    const compiledModel = await core.compileModel(model, 'CPU');
    // ----------------- 步骤 6. 创建推理请求并同步执行推理
    console.log('开始同步模式下的推理');
    const inferRequest = compiledModel.createInferRequest();
    inferRequest.setInputTensor(inputTensor);
    inferRequest.infer();
    // ----------------- 步骤 7. 处理输出 -----------------------------------
    const outputLayer = compiledModel.outputs[0];
    const resultInfer = inferRequest.getTensor(outputLayer);
    const resultIndex = resultInfer.data.indexOf(Math.max(...resultInfer.data));
    console.log("=== 结果 ===");
    console.log(`索引: ${resultIndex}`);
    // 将输出结果转换为数组，并按概率排序
    const predictions = Array.from(resultInfer.data)
        .map((预测值, 类别ID) => ({ 预测值, 类别ID }))
        .sort(({ 预测值: predictionA }, { 预测值: predictionB }) =>
            predictionA === predictionB ? 0 : predictionA > predictionB ? -1 : 1);
    // 加载类别名称映射
    const imagenetData = require("./assets/datasets/yolov8-imagenet.json");
    const classNameMap = imagenetData.names;
    console.log(`图像路径: ${imagePath}`);
    console.log('前10个结果:');
    console.log('类别ID\t概率\t类别名称');
    console.log('------------------------');
    // 打印前10个最高概率的结果
    predictions.slice(0, 10).forEach(({ 类别ID, 预测值 }) =>
        console.log(`${类别ID}\t ${预测值.toFixed(7)}\t ${classNameMap[类别ID]}`),
    );
}

要运行上述程序，请首先克隆本文范例到本地，然后安装yolov8s-cls.js的依赖软件包：

git clone https://github.com/txl1123/OpenVINO-JavaScript-API.git
cd OpenVINO-JavaScript-API
npm install cnpm -g --registry=https://registry.npmmirror.com
cnpm install

最后键入命令，运行 yolov8s-cls.js，结果如下所示：

node yolov8s-cls.js

OpenVINO™

总结

OpenVINO™ JavaScript API 易学易用，开发者可以非常方便的将 AI 能力嵌入到网页形式的应用中去，并在英特尔® 酷睿™ Ultra 处理器上高效运行。

OpenVINO™

---------------------------------------

*OpenVINO and the OpenVINO logo are trademarks of Intel Corporation or its subsidiaries.

-----------------------------

 OpenVINO 中文社区 

微信号 : openvinodev

B站：OpenVINO中文社区

“开放、开源、共创”

致力于通过定期举办线上与线下的沙龙、动手实践及开发者交流大会等活动，促进人工智能开发者之间的交流学习。

○ 点击 “ 在看 ”，让更多人看见