Tutoriel : Créer une application UWP Windows Machine Learning (C#)

Dans ce tutoriel, nous allons créer une application simple de plateforme Windows universelle qui utilise un modèle Machine Learning entraîné pour reconnaître un chiffre numérique dessiné par l’utilisateur. Ce tutoriel se concentre principalement sur la façon de charger et d’utiliser Windows ML dans votre application UWP.

La vidéo suivante décrit l’exemple sur lequel ce didacticiel est basé.

Si vous préférez simplement examiner le code du didacticiel terminé, vous pouvez le trouver dans le référentiel GitHub WinML. Il est également disponible en C++/CX.

Conditions préalables

• Windows 10 (version 1809 ou ultérieure)
• Kit de développement logiciel (SDK) Windows 10 (build 17763 ou version ultérieure)
• Visual Studio 2019 (ou Visual Studio 2017, version 15.7.4 ou ultérieure)
• Extension Générateur de code Windows Machine Learning pour Visual Studio 2019 ou 2017
• Certaines connaissances UWP et C# de base

1. Ouvrir le projet dans Visual Studio

Une fois que vous avez téléchargé le projet à partir de GitHub, lancez Visual Studio et ouvrez le fichier MNIST_Demo.sln (il doit se trouver dans <chemin d’accès au dépôt>\Windows-Machine-Learning\Samples\MNIST\Tutorial\cs). Si la solution n’est pas disponible, vous devez cliquer avec le bouton droit sur le projet dans l’Explorateur de solutions et sélectionner Recharger le projet.

Nous avons fourni un modèle avec des contrôles et des événements XAML implémentés, notamment :

• InkCanvas pour dessiner le chiffre.
• Boutons pour interpréter le chiffre et effacer le canevas.
• Routines d’assistance pour convertir la sortie InkCanvas en VideoFrame.

Dans l’Explorateur de solutions, le projet comporte trois fichiers de code principaux :

• MainPage.xaml - tout notre code XAML pour créer l’interface utilisateur pour le InkCanvas, les boutons et les étiquettes.
• MainPage.xaml.cs - Où se trouve notre code d’application.
• Helper.cs - Routines d’assistance pour rogner et convertir des formats d’image.

2. Générer et exécuter le projet

Dans la barre d’outils Visual Studio, remplacez la plateforme de solutions par x64 pour exécuter le projet sur votre ordinateur local si votre appareil est 64 bits ou x86 s’il est 32 bits. (Vous pouvez consulter les paramètres Windows : Système > À propos > Spécifications de l'appareil > Type de système.)

Pour exécuter le projet, cliquez sur le bouton Démarrer le débogage dans la barre d’outils, ou appuyez sur F5. L’application doit afficher un InkCanvas dans lequel les utilisateurs peuvent écrire un chiffre, un bouton Reconnaître pour interpréter le nombre, un champ d’étiquette vide dans lequel le chiffre interprété sera affiché sous forme de texte et un bouton Effacer le chiffre pour effacer inkCanvas.

3. Télécharger un modèle

Nous allons ensuite obtenir un modèle Machine Learning à ajouter à notre application. Pour ce tutoriel, nous allons utiliser un modèle MNIST préentraîné qui a été formé avec microsoft Cognitive Toolkit (CNTK) et exporté au format ONNX.

Le modèle MNIST a déjà été inclus dans votre dossier Assets et vous devez l’ajouter à votre application en tant qu’élément existant. Vous pouvez également télécharger le modèle préentraîné à partir du Zoo de Modèles ONNX sur GitHub.

4. Ajouter le modèle

Cliquez avec le bouton droit sur le dossier Ressources dans l’Explorateur de solutions, puis sélectionnez Ajouter>un élément existant. Pointez le sélecteur de fichiers à l’emplacement de votre modèle ONNX, puis cliquez sur Ajouter.

Le projet doit maintenant avoir deux nouveaux fichiers :

• mnist.onnx : votre modèle entraîné.
• mnist.cs - Code généré par Windows ML.

Pour vous assurer que le modèle est généré lors de la compilation de notre application, cliquez avec le bouton droit sur le fichier mnist.onnx , puis sélectionnez Propriétés. Pour l’action de génération, sélectionnez Contenu.

À présent, examinons le code nouvellement généré dans le fichier mnist.cs . Nous avons trois classes :

• mnistModel crée la représentation du modèle Machine Learning, crée une session sur l’appareil système par défaut, lie les entrées et sorties spécifiques au modèle et évalue le modèle de façon asynchrone.
• mnistInput initialise les types d’entrée attendus par le modèle. Dans le cas présent, l’entrée attend un ImageFeatureValue.
• mnistOutput initialise les types que le modèle génère. Dans ce cas, la sortie est une liste appelée Plus214_Output_0 de type TensorFloat.

Nous allons maintenant utiliser ces classes pour charger, lier et évaluer le modèle dans notre projet.

5. Charger, lier et évaluer le modèle

Pour les applications Windows ML, le modèle que nous voulons suivre est : Load > Bind > Evaluate.

1. Chargez le modèle Machine Learning.
2. Lier des entrées et des sorties au modèle.
3. Évaluez le modèle et affichez les résultats.

Nous allons utiliser le code d’interface généré dans mnist.cs pour charger, lier et évaluer le modèle dans notre application.

Tout d’abord, dans MainPage.xaml.cs, instancions le modèle, les entrées et les sorties. Ajoutez les variables membres suivantes à la classe MainPage :

private mnistModel ModelGen;
private mnistInput ModelInput = new mnistInput();
private mnistOutput ModelOutput;

Ensuite, dans LoadModelAsync, nous allons charger le modèle. Cette méthode doit être appelée avant d’utiliser l’une des méthodes du modèle (autrement dit, sur l’événement Loaded de MainPage, à un remplacement OnNavigatedTo, ou n’importe où avant l’appel de recognizeButton_Click). La classe mnistModel représente le modèle MNIST et crée la session sur l’appareil système par défaut. Pour charger le modèle, nous appelons la méthode CreateFromStreamAsync , en passant le fichier ONNX en tant que paramètre.

private async Task LoadModelAsync()
{
    // Load a machine learning model
    StorageFile modelFile = await StorageFile.GetFileFromApplicationUriAsync(new Uri($"ms-appx:///Assets/mnist.onnx"));
    ModelGen = await mnistModel.CreateFromStreamAsync(modelFile as IRandomAccessStreamReference);
}

Ensuite, nous voulons lier nos entrées et sorties au modèle. Le code généré inclut également des classes de wrapper mnistInput et mnistOutput . La classe mnistInput représente les entrées attendues du modèle, et la classe mnistOutput représente les sorties attendues du modèle.

Pour initialiser l’objet d’entrée du modèle, appelez le constructeur de classe mnistInput , en transmettant vos données d’application et assurez-vous que vos données d’entrée correspondent au type d’entrée attendu par votre modèle. La classe mnistInput attend une ImageFeatureValue. Nous utilisons donc une méthode d’assistance pour obtenir une ImageFeatureValue pour l’entrée.

À l’aide de nos fonctions d’assistance incluses dans helper.cs, nous allons copier le contenu de InkCanvas, le convertir en type ImageFeatureValue et le lier à notre modèle.

private async void recognizeButton_Click(object sender, RoutedEventArgs e)
{
    // Bind model input with contents from InkCanvas
    VideoFrame vf = await helper.GetHandWrittenImage(inkGrid);
    ModelInput.Input3 = ImageFeatureValue.CreateFromVideoFrame(vf);
}

Pour la sortie, nous appelons simplement EvaluateAsync avec l’entrée spécifiée. Une fois vos entrées initialisées, appelez la méthode EvaluateAsync du modèle pour évaluer votre modèle sur les données d’entrée. EvaluateAsync lie vos entrées et sorties à l’objet de modèle et évalue le modèle sur les entrées.

Étant donné que le modèle retourne un tenseur de sortie, nous allons d’abord le convertir en un type de données approprié, puis analyser la liste retournée pour déterminer quel chiffre a la probabilité la plus élevée et afficher celui-ci.

private async void recognizeButton_Click(object sender, RoutedEventArgs e)
{
    // Bind model input with contents from InkCanvas
    VideoFrame vf = await helper.GetHandWrittenImage(inkGrid);
    ModelInput.Input3 = ImageFeatureValue.CreateFromVideoFrame(vf);

    // Evaluate the model
    ModelOutput = await ModelGen.EvaluateAsync(ModelInput);

    // Convert output to datatype
    IReadOnlyList<float> vectorImage = ModelOutput.Plus214_Output_0.GetAsVectorView();
    IList<float> imageList = vectorImage.ToList();

    // Query to check for highest probability digit
    var maxIndex = imageList.IndexOf(imageList.Max());

    // Display the results
    numberLabel.Text = maxIndex.ToString();
}

Enfin, nous allons supprimer inkCanvas pour permettre aux utilisateurs de dessiner un autre nombre.

private void clearButton_Click(object sender, RoutedEventArgs e)
{
    inkCanvas.InkPresenter.StrokeContainer.Clear();
    numberLabel.Text = "";
}

6. Lancer l’application

Une fois que nous avons créé et lancé l’application (appuyez sur F5), nous serons en mesure de reconnaître un nombre dessiné sur InkCanvas.

C’est-à-dire que vous avez créé votre première application Windows ML ! Pour plus d’exemples qui montrent comment utiliser Windows ML, consultez notre référentiel Windows-Machine-Learning sur GitHub.