Condividi tramite

Creazione di un componente aggiuntivo WinML per Electron

Questa guida illustra come creare un componente aggiuntivo nativo C# che usa Windows Machine Learning (WinML) nell'app Electron. WinML consente di eseguire machine learning modelli (formato ONNX) in locale nei dispositivi Windows per attività come la classificazione delle immagini, il rilevamento degli oggetti e altro ancora.

Prerequisiti

Annotazioni

WinML viene eseguito in qualsiasi dispositivo Windows 10 (1809+) o Windows 11. Per ottenere prestazioni ottimali, i dispositivi con GPU o NPU sono consigliati, ma l'API funziona anche sulla CPU.

Passaggio 1: Creare un componente aggiuntivo nativo C#

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

Verrà creata una cartella winMlAddon/ con un project C# configurato con Windows SDK e riferimenti Windows App SDK.

Compilare il componente aggiuntivo:

npm run build-winMlAddon

Passaggio 2: Scaricare il modello SqueezeNet

  1. Installare AI Dev Gallery
  2. Passare all'esempio di classificazione dell'immagine
  3. Scaricare il modello SqueezeNet 1.1
  4. Copiare il file .onnx in la cartella models/ nella cartella principale del progetto

Annotazioni

Il modello può essere scaricato anche dal repository ONNX Model Zoo GitHub.

Passaggio 3: Aggiungere pacchetti NuGet necessari

Aggiorna Directory.packages.props nella directory principale del progetto.

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

Aggiornare winMlAddon/winMlAddon.csproj per aggiungere i riferimenti al pacchetto:

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

Passaggio 4: Aggiungere il codice di esempio

Ai Dev Gallery offre l'implementazione completa per la classificazione delle immagini con SqueezeNet. È possibile trovare il codice adattato nell'esempio electron-winml.

Copiare la winMlAddon/ cartella dall'esempio o aggiornare winMlAddon/addon.cs manualmente con il codice di esempio.

Dettagli chiave dell'implementazione

Percorso radice del progetto: Il componente aggiuntivo richiede che il codice JavaScript passi il percorso radice del progetto in modo che possa individuare il modello ONNX e le dipendenze native.

Precaricamento delle dipendenze native: il componente aggiuntivo include un metodo per caricare le DLL necessarie che funzionano sia per gli scenari di sviluppo che per gli scenari di produzione.

Configurazione di Electron Forge: configurare il pacchettizzatore per decomprimere i file nativi:

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

Passaggio 5: Compilare il componente aggiuntivo

npm run build-winMlAddon

Passaggio 6: Testare il componente aggiuntivo

Aprire src/index.js e caricare il componente aggiuntivo:

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

Aggiungere una funzione di test:

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);
  }
};

Preparare le immagini di test creando una test-images/ cartella con immagini di esempio, quindi eseguire:

npm start

Passaggio 7: Aggiornare l'identità di debug

npx winapp node add-electron-debug-identity

Annotazioni

Esiste un bug noto di Windows con pacchetti sparse di applicazioni Electron che possono causare arresti anomali o finestre vuote. Vedere la guida alla configurazione per la soluzione alternativa.

Passaggi successivi

  • Last updated on