Cara menggunakan Vue dan Canvas untuk membangunkan aplikasi pengecaman imej pintar

Cara menggunakan Vue dan Canvas untuk membangunkan aplikasi pengecaman imej pintar

Dengan perkembangan pesat kecerdasan buatan, teknologi pengecaman imej telah digunakan secara meluas dalam pelbagai bidang. Vue ialah rangka kerja JavaScript popular yang boleh membantu kami membina aplikasi web responsif. Dalam artikel ini, kita akan belajar cara menggunakan Vue dan Canvas untuk membangunkan aplikasi pengecaman imej pintar.

Pertama, kita perlu mencipta projek Vue. Dengan mengandaikan anda telah memasang Node.js dan Vue CLI, laksanakan arahan berikut untuk mencipta projek Vue baharu:

vue create image-recognition-app

Kemudian, pilih konfigurasi yang sesuai dan tunggu muat turun kebergantungan selesai. Selepas selesai, masukkan direktori projek:

cd image-recognition-app

Seterusnya, kita perlu memasang beberapa kebergantungan yang diperlukan. Jalankan arahan berikut dalam baris arahan:

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

Pakej pergantungan ini akan membantu kami dengan pengecaman imej. Seterusnya, kami akan mencipta komponen untuk mengendalikan logik pengecaman imej. Cipta fail bernama ImageRecognition.vue dalam direktori src dan tambah kod berikut:

<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>

Dalam kod di atas, kami menggunakan elemen <input>元素来上传图像文件。当用户选择一个图像文件后，handleImageUpload方法会被调用。我们使用FileReader来读取图像文件，并创建一个新的Image对象。然后，我们在<canvas> untuk melukis imej. Akhir sekali, kami menggunakan model TensorFlow.js dan MobileNet untuk mengecam imej dan memaparkan hasil pengecaman dalam senarai.

Kemudian, gunakan komponen ImageRecognition dalam fail App.vue. Ubah suai fail App.vue dan tambahkan kod berikut:

<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>

Kini, kami telah melengkapkan tetapan asas Vue dan Canvas. Jalankan arahan berikut dalam baris arahan untuk memulakan pelayan pembangunan:

npm run serve

Buka http://localhost:8080 dalam penyemak imbas dan pilih fail imej untuk dimuat naik, anda akan melihat imej dipaparkan dalam Kanvas dengan imej tersenarai Hasil pengiktirafan daripada objek dalam objek. Anda boleh cuba memuat naik fail imej yang berbeza untuk melihat sama ada keputusan pengecaman adalah tepat.

Tahniah! Anda telah berjaya membangunkan aplikasi pengecaman imej pintar menggunakan Vue dan Canvas. Aplikasi ini boleh mengenal pasti objek dalam imej dan memaparkan hasilnya.

Ringkasan: Artikel ini memperkenalkan cara menggunakan Vue dan Canvas untuk membangunkan aplikasi pengecaman imej pintar. Kami mempelajari cara menggunakan model TensorFlow.js dan MobileNet untuk pengecaman imej dan Vue untuk membina antara muka pengguna. Saya harap artikel ini dapat membantu anda dan dapat memberi anda sedikit panduan dan inspirasi untuk membangunkan aplikasi dalam bidang pengecaman imej.

Atas ialah kandungan terperinci Cara menggunakan Vue dan Canvas untuk membangunkan aplikasi pengecaman imej pintar. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!