Comment utiliser Vue et Canvas pour développer des applications intelligentes de reconnaissance d'images

Comment utiliser Vue et Canvas pour développer des applications intelligentes de reconnaissance d'images

Avec le développement rapide de l'intelligence artificielle, la technologie de reconnaissance d'images a été largement utilisée dans divers domaines. Vue est un framework JavaScript populaire qui peut nous aider à créer des applications Web réactives. Dans cet article, nous apprendrons comment utiliser Vue et Canvas pour développer une application intelligente de reconnaissance d'images.

Tout d'abord, nous devons créer un projet Vue. En supposant que vous ayez installé Node.js et Vue CLI, exécutez la commande suivante pour créer un nouveau projet Vue :

vue create image-recognition-app

Ensuite, sélectionnez la configuration appropriée et attendez la fin du téléchargement des dépendances. Une fois terminé, entrez dans le répertoire du projet :

cd image-recognition-app

Ensuite, nous devons installer certaines dépendances nécessaires. Exécutez la commande suivante dans la ligne de commande :

npm install tensorflow @tensorflow-models/mobilenet @tensorflow/tfjs @tensorflow/tfjs-converter

Ces packages de dépendances nous aideront avec la reconnaissance d'images. Ensuite, nous créerons un composant pour gérer la logique de reconnaissance d’image. Créez un fichier nommé ImageRecognition.vue dans le répertoire src et ajoutez le code suivant :

<template>
  <div>
    <input type="file" @change="handleImageUpload" accept="image/*" />
    <canvas ref="canvas" width="500" height="500"></canvas>
    <ul>
      <li v-for="(label, index) in labels" :key="index">
        {{ label.className }}: {{ label.probability.toFixed(2) }}
      </li>
    </ul>
  </div>
</template>

<script>
import * as tf from '@tensorflow/tfjs';
import * as mobilenet from '@tensorflow-models/mobilenet';

export default {
  data() {
    return {
      labels: [],
      model: null,
    };
  },
  methods: {
    async handleImageUpload(event) {
      const file = event.target.files[0];
      const image = await this.loadImage(file);
      this.drawImage(image);
      this.classifyImage(image);
    },
    loadImage(file) {
      return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.onload = (event) => {
          const image = new Image();
          image.onload = () => resolve(image);
          image.onerror = reject;
          image.src = event.target.result;
        };
        reader.onerror = reject;
        reader.readAsDataURL(file);
      });
    },
    drawImage(image) {
      const canvas = this.$refs.canvas;
      const context = canvas.getContext('2d');
      context.clearRect(0, 0, canvas.width, canvas.height);
      context.drawImage(
        image,
        0,
        0,
        canvas.width,
        canvas.height
      );
    },
    async classifyImage(image) {
      this.labels = [];
      if (!this.model) {
        this.model = await mobilenet.load();
      }
      const predictions = await this.model.classify(image);
      this.labels = predictions;
    },
  },
};
</script>

Dans le code ci-dessus, nous avons utilisé l'élément <input>元素来上传图像文件。当用户选择一个图像文件后，handleImageUpload方法会被调用。我们使用FileReader来读取图像文件，并创建一个新的Image对象。然后，我们在<canvas></canvas> pour dessiner l'image. Enfin, nous utilisons les modèles TensorFlow.js et MobileNet pour reconnaître l'image et afficher les résultats de la reconnaissance dans une liste.

Ensuite, utilisez le composant ImageRecognition dans le fichier App.vue. Modifiez le fichier App.vue et ajoutez le code suivant :

<template>
  <div id="app">
    <ImageRecognition />
  </div>
</template>

<script>
import ImageRecognition from './components/ImageRecognition.vue';

export default {
  name: 'App',
  components: {
    ImageRecognition,
  },
};
</script>

<style>
#app {
  text-align: center;
}
</style>

Maintenant, nous avons terminé les paramètres de base de Vue et Canvas. Exécutez la commande suivante dans la ligne de commande pour démarrer le serveur de développement :

npm run serve

Ouvrez http://localhost:8080 dans le navigateur et sélectionnez un fichier image à télécharger, vous verrez l'image affichée dans Canvas avec l'image répertoriée. Résultats de reconnaissance d'objets dans l'objet. Vous pouvez essayer de télécharger différents fichiers image pour voir si les résultats de la reconnaissance sont exacts.

Félicitations ! Vous avez développé avec succès une application de reconnaissance d'image intelligente à l'aide de Vue et Canvas. Cette application peut identifier des objets dans des images et afficher les résultats.

Résumé : Cet article présente comment utiliser Vue et Canvas pour développer des applications intelligentes de reconnaissance d'images. Nous avons appris à utiliser les modèles TensorFlow.js et MobileNet pour la reconnaissance d'images et Vue pour créer des interfaces utilisateur. J'espère que cet article vous sera utile et pourra vous fournir des conseils et de l'inspiration pour développer des applications dans le domaine de la reconnaissance d'images.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!