Partager via

Création d’un module complémentaire WinML pour Electron

Ce guide vous montre comment créer un module complémentaire natif C# qui utilise Windows Machine Learning (WinML) dans votre application Electron. WinML vous permet d’exécuter des modèles machine learning (format ONNX) localement sur les appareils Windows pour des tâches telles que la classification d’images, la détection d’objets, etc.

Prerequisites

Note

WinML s’exécute sur n’importe quel appareil Windows 10 (1809+) ou Windows 11. Pour des performances optimales, les périphériques équipés de GPU ou d'unités de traitement neuronal sont recommandés, mais l'API fonctionne également sur processeur.

Étape 1 : Créer un complément natif C#

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

Cela crée un dossier winMlAddon/ avec un project C# configuré avec le Kit de développement logiciel (SDK) Windows et les références Windows App SDK.

Générez le module complémentaire :

npm run build-winMlAddon

Étape 2 : Télécharger le modèle SqueezeNet

  1. Installer la galerie AI Dev
  2. Accédez à l’exemple Classifier l’image
  3. Télécharger le modèle SqueezeNet 1.1
  4. Copiez le fichier .onnx dans un dossier models/ à la racine de votre projet.

Note

Le modèle peut également être téléchargé à partir du dépôt ONNX Model Zoo GitHub.

Étape 3 : Ajouter des packages NuGet requis

Mettez à jour Directory.packages.props dans la racine de projet :

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

Mise à jour winMlAddon/winMlAddon.csproj pour ajouter les références de package :

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

Étape 4 : Ajouter l’exemple de code

La galerie AI Dev fournit l’implémentation complète de la classification d’images avec SqueezeNet. Vous trouverez le code adapté dans l’exemple électron-winml.

Copiez le winMlAddon/ dossier à partir de l’exemple ou mettez à jour winMlAddon/addon.cs manuellement avec l’exemple de code.

Détails de l’implémentation clé

Chemin racine du projet : le module complémentaire requiert le code JavaScript pour passer le chemin racine du projet afin qu'il puisse localiser le modèle ONNX et les dépendances natives.

Préchargement des dépendances natives : le module complémentaire inclut une méthode pour charger les DLL requises qui fonctionnent à la fois pour les scénarios de développement et de production.

Configuration d’Electron Forge : Configurez votre packager pour décompresser les fichiers natifs :

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

Étape 5 : Générer le module complémentaire

npm run build-winMlAddon

Étape 6 : Tester le module complémentaire

Ouvrez src/index.js et chargez le module complémentaire :

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

Ajoutez une fonction de 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);
  }
};

Préparez des images de test en créant un dossier avec des test-images/ exemples d’images, puis exécutez :

npm start

Étape 7 : Mettre à jour l’identité de débogage

npx winapp node add-electron-debug-identity

Note

Il existe un bogue Windows connu avec l’empaquetage d’applications Electron éparses qui peuvent provoquer des blocages ou des fenêtres vides. Consultez le guide de configuration pour la solution de contournement.

Étapes suivantes

  • Last updated on