Een WinML-invoegtoepassing maken voor Electron

Deze handleiding laat zien hoe u een systeemeigen C#-invoegtoepassing maakt die gebruikmaakt van Windows Machine Learning (WinML) in uw Electron-app. Met WinML kunt u lokaal machine learning modellen (ONNX-indeling) uitvoeren op Windows-apparaten voor taken zoals afbeeldingsclassificatie, objectdetectie en meer.

Vereiste voorwaarden

Opmerking

WinML wordt uitgevoerd op elk Windows 10 (1809+) of Windows 11 apparaat. Voor de beste prestaties worden apparaten met GPU's of NPU's aanbevolen, maar de API werkt ook op CPU.

Stap 1: Een systeemeigen C#-invoegtoepassing maken

npx winapp node create-addon --template cs --name winMlAddon

Hiermee maakt u een map winMlAddon/ met een C#-project geconfigureerd met Windows SDK en Windows App SDK verwijzingen.

Bouw de invoegtoepassing:

npm run build-winMlAddon

Stap 2: Het SqueezeNet-model downloaden

  1. De AI Dev Gallery installeren
  2. Navigeer naar het voorbeeld van de classificatieafbeelding
  3. Het SqueezeNet 1.1-model downloaden
  4. Kopieer het bestand .onnx naar een map models/ in de hoofdmap van uw project

Opmerking

Het model kan ook worden gedownload uit de ONNX Model Zoo GitHub opslagplaats.

Stap 3: Vereiste NuGet-pakketten toevoegen

Werk Directory.packages.props bij in de hoofdmap van uw project:

<PackageVersion Include="Microsoft.ML.OnnxRuntime.Extensions" Version="0.14.0" />
<PackageVersion Include="System.Drawing.Common" Version="9.0.9" />

Werk winMlAddon/winMlAddon.csproj bij om de pakketverwijzingen toe te voegen:

<PackageReference Include="Microsoft.ML.OnnxRuntime.Extensions" />
<PackageReference Include="System.Drawing.Common" />

Stap 4: De voorbeeldcode toevoegen

De AI Dev Gallery biedt de volledige implementatie voor afbeeldingsclassificatie met SqueezeNet. U vindt de aangepaste code in de electron-winml sample.

Kopieer de winMlAddon/ map uit het voorbeeld of werk handmatig winMlAddon/addon.cs bij met de voorbeeldcode.

Belangrijke implementatiedetails

Project hoofdpad: Voor de invoegtoepassing is de JavaScript-code vereist om het project hoofdpad door te geven, zodat het ONNX-model en systeemeigen afhankelijkheden kunnen worden gevonden.

Systeemeigen afhankelijkheden vooraf laden: de invoegtoepassing bevat een methode voor het laden van vereiste DLL's die geschikt zijn voor zowel ontwikkelings- als productiescenario's.

Electron Forge-configuratie: Configureer uw packager om systeemeigen bestanden uit te pakken:

module.exports = {
  packagerConfig: {
    asar: {
      unpack: "**/*.{dll,exe,node,onnx}"
    },
    ignore: [
      /^\/.winapp\//,
      "\\.msix$",
      /^\/winMlAddon\/(?!dist).+/
    ]
  },
};

Stap 5: De invoegtoepassing bouwen

npm run build-winMlAddon

Stap 6: De invoegtoepassing testen

Open src/index.js de invoegtoepassing en laad deze:

const winMlAddon = require('../winMlAddon/dist/winMlAddon.node');

Een testfunctie toevoegen:

const testWinML = async () => {
  try {
    let projectRoot = path.join(__dirname, '..');
    if (projectRoot.includes('app.asar')) {
      projectRoot = projectRoot.replace('app.asar', 'app.asar.unpacked');
    }

    const addon = await winMlAddon.Addon.createAsync(projectRoot);
    console.log('Model loaded successfully!');

    const imagePath = path.join(projectRoot, 'test-images', 'sample.jpg');
    const predictions = await addon.classifyImage(imagePath);

    console.log('Top predictions:');
    predictions.slice(0, 5).forEach((pred, i) => {
      console.log(`${i + 1}. ${pred.label}: ${(pred.confidence * 100).toFixed(2)}%`);
    });
  } catch (error) {
    console.error('Error testing WinML:', error.message);
  }
};

Bereid testafbeeldingen voor door een test-images/ map met voorbeeldafbeeldingen te maken en voer vervolgens het volgende uit:

npm start

Stap 7: Foutopsporingsidentiteit bijwerken

npx winapp node add-electron-debug-identity

Opmerking

Er is een bekende Windows-bug met betrekking tot 'sparse packaging' van Electron-toepassingen die crashes of lege vensters kan veroorzaken. Zie de installatiehandleiding voor de tijdelijke oplossing.

Volgende stappen 

  • Last updated on