Vue と Canvas を使用してインテリジェントな画像認識アプリケーションを開発する方法

Vue と Canvas を使用してインテリジェントな画像認識アプリケーションを開発する方法

人工知能の急速な発展に伴い、画像認識技術はさまざまな分野で広く使用されています。 Vue は、応答性の高い Web アプリケーションの構築に役立つ人気のある JavaScript フレームワークです。この記事では、Vue と Canvas を使用してインテリジェントな画像認識アプリケーションを開発する方法を学びます。

まず、Vue プロジェクトを作成する必要があります。 Node.js と Vue CLI がインストールされていると仮定して、次のコマンドを実行して新しい Vue プロジェクトを作成します。

vue create image-recognition-app

次に、適切な構成を選択し、依存関係のダウンロードが完了するまで待ちます。完了したら、プロジェクト ディレクトリに入ります:

cd image-recognition-app

次に、必要な依存関係をいくつかインストールする必要があります。コマンド ラインで次のコマンドを実行します。

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

これらの依存関係パッケージは、画像認識の実行に役立ちます。次に、画像認識のロジックを処理するコンポーネントを作成します。 src ディレクトリに ImageRecognition.vue という名前のファイルを作成し、次のコードを追加します。

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

上記のコードでは、<input> 要素を使用して画像ファイルをアップロードしました。ユーザーが画像ファイルを選択すると、handleImageUpload メソッドが呼び出されます。 FileReader を使用して画像ファイルを読み取り、新しい Image オブジェクトを作成します。次に、<canvas></canvas> 要素内に画像を描画します。最後に、TensorFlow.js と MobileNet モデルを使用して画像を認識し、認識結果を一覧で表示します。

次に、App.vue ファイルの ImageRecognition コンポーネントを使用します。 App.vue ファイルを変更し、次のコードを追加します。

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

これで、Vue と Canvas の基本設定が完了しました。コマンド ラインで次のコマンドを実行して開発サーバーを起動します。

npm run serve

ブラウザで http://localhost:8080 を開き、アップロードする画像ファイルを選択すると、Canvas に画像が表示されます。画像内のオブジェクトの認識結果を一覧表示します。さまざまな画像ファイルをアップロードして、認識結果が正確かどうかを確認してください。 ＃＃＃＃＃＃おめでとう！ Vue と Canvas を使用したインテリジェントな画像認識アプリケーションの開発に成功しました。このアプリケーションは、画像内のオブジェクトを識別し、結果を表示することができます。

概要: この記事では、Vue と Canvas を使用してインテリジェントな画像認識アプリケーションを開発する方法を紹介します。画像認識に TensorFlow.js と MobileNet モデルを使用し、ユーザー インターフェイスを構築するために Vue を使用する方法を学びました。この記事があなたのお役に立ち、画像認識分野でのアプリケーション開発のためのガイダンスとインスピレーションを提供できれば幸いです。

以上がVue と Canvas を使用してインテリジェントな画像認識アプリケーションを開発する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。