Skip to Content
💡WebNN Origin Trial 即将到来！开发者很快将可以注册试用密钥进行体验 →
学习Get Started🚀 Quickstart

快速入门

WebNN（Web Neural Network，Web 神经网络）API 通过计算图在 Web 应用中实现神经网络运算。计算图是一种有向图，其中的节点表示操作或输入变量，每个节点的输出会作为后续节点的输入。

使用操作和张量

该 API 使用四个主要抽象：

  • MLContext 是执行环境，通过 navigator.ml.createContext() 创建。它负责调度图的执行并创建张量
  • MLGraphBuilder 使用 add()、matmul() 和 conv2d() 等操作构建计算图
  • MLOperand 对象表示图中的节点：输入、常量以及操作的结果。操作数描述数据类型和形状，本身不保存数据
  • MLTensor 对象保存流入和流出已编译图的数据。你把输入数据写入张量，再从张量读回结果

图的生命周期

WebNN API 支持四个主要阶段：

  1. 构建计算图
  2. 编译图
  3. 执行图
  4. 与其他 Web API 集成以获取输入数据（例如，用于图像和视频帧的媒体 API，或用于传感数据的传感器 API）

下面是一个基本示例，演示如何使用操作、输入和输出来构建、编译并执行一个图。有关完整的模型构建模式，请参阅详细教程。

使用 WebNN API 构建你的第一个图


C=0.2⋅A+BC = 0.2 \cdot A + B
executing-an-MLGraph-using-MLTensors.js
const descriptor = {dataType: 'float32', shape: [2, 2]};
const context = await navigator.ml.createContext();
const builder = new MLGraphBuilder(context);
 
// 1. 创建计算图 'C = 0.2 * A + B'。
const constant = builder.constant(descriptor, new Float32Array(4).fill(0.2));
const A = builder.input('A', descriptor);
const B = builder.input('B', descriptor);
const C = builder.add(builder.mul(A, constant), B);
 
// 2. 编译图。
const graph = await builder.build({'C': C});
 
// 3. 创建可重复使用的输入和输出张量。
const [inputTensorA, inputTensorB, outputTensorC] =
    await Promise.all([
      context.createTensor({
        dataType: A.dataType, shape: A.shape, writable: true
      }),
      context.createTensor({
        dataType: B.dataType, shape: B.shape, writable: true
      }),
      context.createTensor({
        dataType: C.dataType, shape: C.shape, readable: true
      })
    ]);
 
// 4. 初始化输入。
context.writeTensor(inputTensorA, new Float32Array(4).fill(1.0));
context.writeTensor(inputTensorB, new Float32Array(4).fill(0.8));
 
// 5. 执行图。
const inputs = {
  'A': inputTensorA,
  'B': inputTensorB
};
const outputs = {
  'C': outputTensorC
};
context.dispatch(graph, inputs, outputs);
    
// 6. 读回计算结果。
const result = await context.readTensor(outputTensorC);
console.log('Output value:', new Float32Array(result));  // [1, 1, 1, 1]

其他资源

Last updated on
⚙️ InstallationUsing TypeScript