MLContext

typedef record<USVString, MLTensor> MLNamedTensors;

dictionary MLContextLostInfo {
  DOMString message;
};

[SecureContext, Exposed=(Window, Worker)]
interface MLContext {
  undefined dispatch(MLGraph graph, MLNamedTensors inputs, MLNamedTensors outputs);

  Promise<MLTensor> createTensor(MLTensorDescriptor descriptor);
  Promise<MLTensor> createExportableTensor(
    MLTensorDescriptor descriptor, GPUDevice gpuDevice);
  Promise<MLTensor> createConstantTensor(
    MLOperandDescriptor descriptor, AllowSharedBufferSource inputData);

  Promise<ArrayBuffer> readTensor(MLTensor tensor);
  Promise<undefined> readTensor(MLTensor tensor, AllowSharedBufferSource outputData);

  undefined writeTensor(MLTensor tensor, AllowSharedBufferSource inputData);

  GPUBuffer exportToGPU(MLTensor tensor);

  MLOpSupportLimits opSupportLimits();

  undefined destroy();

  readonly attribute boolean accelerated;
  readonly attribute Promise<MLContextLostInfo> lost;
};

const context = await navigator.ml.createContext({ powerPreference: 'low-power' });
if (!context.accelerated) {
  console.log('Running on CPU; consider a smaller model.');
}

context.lost.then((info) => {
  console.warn('MLContext lost:', info.message);
  // Recreate the context, rebuild graphs, and reallocate tensors here.
});

dispatch(graph, inputs, outputs)

createTensor(descriptor)

createExportableTensor(descriptor, gpuDevice)

createConstantTensor(descriptor, inputData)

readTensor(tensor)
readTensor(tensor, outputData)

writeTensor(tensor, inputData)

exportToGPU(tensor)

opSupportLimits()

destroy()

dictionary MLOpSupportLimits {
  MLInputOperandLayout preferredInputLayout;
  [EnforceRange] unsigned long long maxTensorByteLength;
  MLTensorLimits input;
  MLTensorLimits constant;
  MLTensorLimits output;
  // ...plus one member per operator, e.g.:
  // MLConv2dSupportLimits conv2d;
  // MLBinarySupportLimits add;
  // MLSingleInputSupportLimits softmax;
};

typedef sequence<MLOperandDataType> MLDataTypeList;

dictionary MLTensorLimits {
  MLDataTypeList dataTypes;
  MLRankRange rankRange;
};

dictionary MLRankRange {
  unsigned long min;
  unsigned long max;
};

dictionary MLSingleInputSupportLimits {
  MLTensorLimits input;
  MLTensorLimits output;
};

dictionary MLBinarySupportLimits {
  MLTensorLimits a;
  MLTensorLimits b;
  MLTensorLimits output;
};

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 });
 
// 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. 执行图。
context.dispatch(graph, { A: inputTensorA, B: inputTensorB }, { C: outputTensorC });
 
// 6. 读回计算结果。
const result = await context.readTensor(outputTensorC);
console.log('Output value:', new Float32Array(result)); // [1, 1, 1, 1]

const output = new Float32Array(4);
for (const frame of frames) {
  context.writeTensor(inputTensor, frame);
  context.dispatch(graph, { input: inputTensor }, { output: outputTensor });
  await context.readTensor(outputTensor, output);
  render(output);
}

const weightDesc = { dataType: 'float32', shape: [4, 4] };
const weights = await context.createConstantTensor(weightDesc, new Float32Array(16).fill(0.5));
console.log(weights.constant); // true
 
async function buildGraph() {
  const builder = new MLGraphBuilder(context);
  const x = builder.input('x', { dataType: 'float32', shape: [1, 4] });
  return builder.build({ y: builder.matmul(x, builder.constant(weights)) });
}
 
// 两个图重用相同的设备端权重。
const [graphA, graphB] = await Promise.all([buildGraph(), buildGraph()]);
weights.destroy(); // 图构建完成后即可安全销毁。

const context = await navigator.ml.createContext();
const limits = context.opSupportLimits();
 
console.log('Preferred layout:', limits.preferredInputLayout); // "nchw" or "nhwc"
console.log('Max tensor size:', limits.maxTensorByteLength, 'bytes');
 
// 如果 conv2d 在此上下文上支持 float16 输入，则选择 float16 模型。
const useFp16 = limits.conv2d.input.dataTypes.includes('float16');
const modelUrl = useFp16 ? 'model-fp16.onnx' : 'model-fp32.onnx';
 
// 检查 gather() 是否接受 int64 索引。
const supportsInt64Indices = limits.gather.indices.dataTypes.includes('int64');
 
// 检查 add() 支持的最大秩。
console.log('add() max rank:', limits.add.a.rankRange.max);

// 1. 创建 WebGPU 和 WebNN 上下文。
const gpuAdapter = await navigator.gpu.requestAdapter();
const gpuDevice = await gpuAdapter.requestDevice();
const context = await navigator.ml.createContext();
 
// 2. 构建一个简单的图：y = x + 1。
const builder = new MLGraphBuilder(context);
const descriptor = { dataType: 'float32', shape: [4] };
const x = builder.input('x', descriptor);
const one = builder.constant(descriptor, new Float32Array([1, 1, 1, 1]));
const graph = await builder.build({ y: builder.add(x, one) });
 
// 3. 创建可导出的张量并运行 WebNN dispatch。
const inputTensor = await context.createExportableTensor(
  { ...descriptor, writable: true }, gpuDevice);
const outputTensor = await context.createExportableTensor(
  { ...descriptor, readable: true }, gpuDevice);
context.writeTensor(inputTensor, new Float32Array([1, 2, 3, 4]));
context.dispatch(graph, { x: inputTensor }, { y: outputTensor });
 
// 4. 导出到 WebGPU，并在 GPU 命令中使用该缓冲区。
const gpuBuffer = context.exportToGPU(outputTensor);
// ... use gpuBuffer in WebGPU compute or render passes ...
 
// 5. 将张量归还给 WebNN，然后再次通过 WebNN 读取。
gpuBuffer.destroy();
const result = new Float32Array(await context.readTensor(outputTensor));
console.log(result); // [2, 3, 4, 5]