JavaScript (JS バインド) から WinML を実行する

このガイドでは、Windows アプリ SDK ML API の JS バインディングを使用して Electron から ONNX モデル推論を実行する方法 (ExecutionProviderCatalogを介した実行プロバイダーの検出と、ModelCatalogを介したモデルのダウンロード) を推論のonnxruntime-nodeと組み合わせる方法を示します。C# アドオンは必要ありません。推論は Electron ユーティリティプロセスで実行されるため、メインプロセスはブロックされません。

[前提条件]

このガイドを開始する前に、次の作業が完了していることを確認してください。

開発環境のセットアップが完了しました。

ノードの ONNX ランタイムをインストールします。

npm install onnxruntime-node@1.24.3

Important

Windows アプリランタイムは、独自のonnxruntime.dllを子プロセスに事前に読み込みます。 onnxruntime-node バージョンは、Windows アプリ SDK バージョンにバンドルされている ORT ABI と一致している必要があります。 Windows アプリ SDK 2.x の場合は、onnxruntime-node@1.24.xを使用します。

手順 1: WinML バインドを確認する

Windows アプリ SDKはMicrosoft.WindowsAppSDK.MLによって推移的に異なるため、WinML API は既に生成されたバインディングに含まれています。次のように検証します。

@microsoft/dynwinrt-codegen ≥ 0.1.0-preview.8 が必要です — 古いプロジェクト向けの代替手段については、Electron を使い始めるを参照してください。

node -e "console.log(Object.keys(require('#winapp/bindings')).filter(k => k.startsWith('ExecutionProvider')))"

[ 'ExecutionProvider', 'ExecutionProviderCatalog', 'ExecutionProviderReadyState' ] という結果が表示されます。

手順 2: モデルカタログを使用してモデルをダウンロードする (メインプロセス)

JS バインディングの ModelCatalog を使用して、モデルをローカルにダウンロードしてキャッシュします。カタログは、使用可能なモデルとそのダウンロード URL を記述する JSON マニフェスト (リモートまたはローカルでホスト) を読み取ります。最初のダウンロード後、後続の実行ではキャッシュされたコピーが使用されます。

src/winml-model.jsを作成します。

const { ModelCatalog, ModelCatalogSource, Uri } = require('#winapp/bindings');
const fs = require('node:fs');
const path = require('node:path');

// Remote catalog JSON hosted in the WindowsAppSDK-Samples repo
const MODEL_CATALOG_URL =
  'https://raw.githubusercontent.com/microsoft/WindowsAppSDK-Samples/main/Samples/WindowsML/Resources/SqueezeNetModelCatalog.json';

async function downloadModel(modelId, onProgress) {
  const uri = Uri.createUri(MODEL_CATALOG_URL);
  const source = await ModelCatalogSource.createFromUriAsync(uri);
  const catalog = ModelCatalog.createInstance([source]);
  const model = await catalog.findModelAsync(modelId);

  const op = model.getInstanceAsync();
  if (onProgress) {
    op.progress((value) => {
      try { onProgress(value); } catch {}
    });
  }
  const result = await op;

  const instance = result.getInstance();
  if (!instance) return undefined;

  const paths = instance.modelPaths;
  // modelPaths returns directories containing model files
  for (let i = 0; i < paths.size; i++) {
    const dir = paths.getAt(i);
    if (fs.existsSync(dir) && fs.statSync(dir).isDirectory()) {
      const onnx = fs.readdirSync(dir).find((f) => f.endsWith('.onnx'));
      if (onnx) {
        instance.close();
        return path.join(dir, onnx);
      }
    } else if (dir.endsWith('.onnx')) {
      instance.close();
      return dir;
    }
  }
  instance.close();
  return undefined;
}

module.exports = { downloadModel };

手順 3: 実行プロバイダーを検出して確認する (メインプロセス)

ExecutionProviderCatalogを使用して、使用可能なプロバイダー (CPU、DirectML、QNN/NPU) を一覧表示し、必要に応じてランタイムをダウンロードするensureReadyAsyncを使用します。

src/winml-ep.jsを作成します。

const { ExecutionProviderCatalog, ExecutionProviderReadyState, ExecutionProviderReadyResultState } = require('#winapp/bindings');

function listProviders() {
  const catalog = ExecutionProviderCatalog.getDefault();
  return catalog.findAllProviders().map((p) => ({
    name: p.name,
    readyState: p.readyState,
    libraryPath: p.libraryPath,
  }));
}

async function ensureProviderReady(providerName, onProgress) {
  const catalog = ExecutionProviderCatalog.getDefault();
  const providers = catalog.findAllProviders();
  const provider = providers.find((p) => p.name === providerName);
  if (!provider) {
    throw new Error(`Execution provider not found: ${providerName}`);
  }

  if (provider.readyState === ExecutionProviderReadyState.Ready) {
    return { name: provider.name, readyState: 'Ready', libraryPath: provider.libraryPath };
  }

  const op = provider.ensureReadyAsync();
  if (onProgress) {
    op.progress((value) => {
      try { onProgress(value); } catch {}
    });
  }
  const result = await op;
  let readyState;
  if (result.status === ExecutionProviderReadyResultState.Success) readyState = 'Ready';
  else if (result.status === ExecutionProviderReadyResultState.Failure) readyState = 'Failed';
  else readyState = 'InProgress';
  return {
    name: provider.name,
    readyState,
    diagnosticText: result.diagnosticText,
    libraryPath: provider.libraryPath,
  };
}

module.exports = { listProviders, ensureProviderReady };

手順 4: ユーティリティプロセスで推論を実行する

ONNX ランタイムセッションの作成と推論がブロックされています。メインプロセスの応答性を維持するために、Electron ユーティリティプロセスで実行します。

4.1. ワーカーを作成する

src/winml-worker.jsを作成します (このファイルはユーティリティプロセスで実行されます)。

const { roInitialize } = require('@microsoft/dynwinrt');

// When dynwinrt and onnxruntime-node share the same process, ORT's native
// init can leave the COM apartment uninitialized. Explicitly init MTA first.
roInitialize(1);

const ort = require('onnxruntime-node');

async function runModel(modelPath, inputData, inputShape, ep) {
  const providers = ep === 'dml'
    ? [{ name: 'dml', deviceId: 0 }, 'cpu']
    : ['cpu'];

  const session = await ort.InferenceSession.create(modelPath, {
    executionProviders: providers,
    graphOptimizationLevel: 'all',
  });

  const inputName = session.inputNames[0];
  const input = new ort.Tensor('float32', inputData, inputShape);
  const outputs = await session.run({ [inputName]: input });
  return Array.from(outputs[session.outputNames[0]].data);
}

process.parentPort.on('message', async (e) => {
  const { id, method, args } = e.data;
  try {
    if (method === 'classify') {
      const [modelPath, inputData, inputShape, ep] = args;
      const result = await runModel(modelPath, new Float32Array(inputData), inputShape, ep);
      process.parentPort.postMessage({ id, ok: true, result });
    }
  } catch (err) {
    process.parentPort.postMessage({ id, ok: false, error: err.message });
  }
});

4.2. main からワーカーを起動して呼び出す

src/index.jsに次のコードを追加します。

const { utilityProcess } = require('electron');
const path = require('node:path');
const { listProviders, ensureProviderReady } = require('./winml-ep.js');
const { downloadModel } = require('./winml-model.js');

let worker = null;
let workerReady = null;
const pending = new Map();
let nextId = 1;

function startWinmlWorker() {
  worker = utilityProcess.fork(path.join(__dirname, 'winml-worker.js'), [], {
    stdio: 'pipe',
    serviceName: 'winml-worker',
  });
  worker.on('message', (msg) => {
    const entry = pending.get(msg.id);
    if (!entry) return;
    pending.delete(msg.id);
    if (msg.ok) entry.resolve(msg.result);
    else entry.reject(new Error(msg.error));
  });
  workerReady = new Promise((resolve) => worker.once('spawn', resolve));
}

async function classify(modelPath, inputData, inputShape, ep) {
  if (!worker) startWinmlWorker();
  await workerReady;
  return new Promise((resolve, reject) => {
    const id = nextId++;
    pending.set(id, { resolve, reject });
    worker.postMessage({ id, method: 'classify', args: [modelPath, Array.from(inputData), inputShape, ep] });
  });
}

4.3. それを使用する

createWindow関数がasyncになっていることを確認してから、次を追加します。

const createWindow = async () => {
  // ... existing window creation code ...

  // List and ensure all execution providers are ready
  const providers = listProviders();
  console.log('Available providers:', providers);

  for (const ep of providers) {
    console.log(`Ensuring ${ep.name} is ready...`);
    const result = await ensureProviderReady(ep.name, (progress) => {
      const pct = progress <= 1 ? Math.round(progress * 100) : Math.round(progress);
      process.stdout.write(`\r  ${ep.name}: ${pct}%`);
    });
    process.stdout.write('\n');
    console.log(`  ${ep.name}: ${result.readyState}`);
  }

  // Download model via Model Catalog (cached after first run)
  console.log('Downloading model...');
  const modelPath = await downloadModel('squeezenet', (progress) => {
    if (progress >= 0 && progress <= 100) {
      process.stdout.write(`\rDownloading model: ${Math.round(progress)}%`);
    }
  });
  process.stdout.write('\n');
  console.log('Model path:', modelPath);

  // Run inference in utility process (replace with real preprocessed data)
  const inputData = new Float32Array(1 * 3 * 224 * 224);
  const output = await classify(modelPath, inputData, [1, 3, 224, 224], 'dml');

  console.log('Model output (top 5 values):', output.slice(0, 5));
};

手順 5: 実行する

npx winapp node add-electron-debug-identity
npm start

使用可能な実行プロバイダーとモデルの出力がコンソールに表示されます。

Tip

JS バインド (StorageFile、 BitmapDecoder、 BitmapTransform) を使用した画像デコードを使用した完全な画像分類パイプラインについては、 Electron Gallery WinML サンプルを参照してください。

次のステップ

おめでとうございます! JavaScript から WinML 実行プロバイダーと ONNX ランタイムを実行しています。C# アドオンは必要ありません。 🎉

これで、次の準備ができました。

配布用にアプリをパッケージ化 する - 出荷できる MSIX を生成します。

または、他のガイドを調べる:

JavaScript から通知を表示する — JavaScript バインディングを介した Windows アプリ SDK の通知。
JavaScript から Windows API を呼び出します。JS バインドを使用してファイルを選択します。
JavaScript から Phi Silica を呼び出す - Windows アプリ SDK AI を使用してテキストを要約します。
WinML アドオンの作成 - 対応するネイティブ C# アドオン。
概要 - メインガイドに戻ります。

フィードバック

このページはお役に立ちましたか?

Last updated on 2026-07-24