TensorFlow.js と COCO-SSD を使用してブラウザでリアルタイムのオブジェクト検出を利用する-Python チュートリアル-php.cn

TensorFlow.js と COCO-SSD を使用してブラウザでリアルタイムのオブジェクト検出を利用する

王林

リリース： 2024-07-25 12:59:13

オリジナル

1046 人が閲覧しました

Harnessing Real-Time Object Detection in the Browser with TensorFlow.js and COCO-SSD

はじめに

近年、機械学習の分野では、特に強力なモデルを Web アプリケーションに導入する点で目覚ましい進歩が見られます。そのようなブレークスルーの 1 つは、TensorFlow.js などのテクノロジーや COCO-SSD などのモデルのおかげで、Web ブラウザー内で直接リアルタイムのオブジェクト検出を実行できる機能です。この記事では、開発者がこれらのツールを活用して、サーバー側の処理を必要とせずにライブ Web カメラストリーム、アップロードされた画像、ビデオ内のオブジェクトを検出するインタラクティブなアプリケーションを作成する方法について説明します。

TensorFlow.js と COCO-SSD を理解する

TensorFlow.js は、Google が開発した JavaScript ライブラリで、開発者が機械学習モデルをブラウザーで直接実行できるようにします。これにより、事前トレーニングされたモデルをデプロイしたり、JavaScript API を使用して新しいモデルをトレーニングしたりする方法が提供され、アクセスしやすく、Web アプリケーションと簡単に統合できます。 COCO-SSD (Common Objects in Context - Single Shot MultiBox Detector) は、オブジェクト検出用の人気のある事前トレーニングモデルです。さまざまなオブジェクトをリアルタイムで検出するように最適化されているため、インタラクティブなアプリケーションに適しています。

環境のセットアップ

まず、開発者は開発環境をセットアップする必要があります。これには通常、以下が含まれます:

スクリプトタグを使用して、HTML ドキュメントに TensorFlow.js と COCO-SSD を含めます。

  <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@latest"></script>
  <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/coco-ssd@latest"></script>

ログイン後にコピー

ビデオ入力、画像アップロード、コントロールボタンなどのユーザーインターフェイス要素を処理するための HTML 構造を作成します。

アプリケーションの構築

1. ユーザー入力の処理

このアプリケーションでは、ユーザーはさまざまな入力タイプから選択できます。

Web カメラ: ユーザーの Web カメラからライブビデオフィードを直接キャプチャします。
画像: ユーザーが自分のデバイスから画像ファイルをアップロードできるようにします。
ビデオ: ユーザーが物体検出用にビデオファイルをアップロードできるようにします。

<div id="inputSelection">
    <label><input type="radio" name="inputType" value="webcam" checked> Webcam</label>
    <label><input type="radio" name="inputType" value="image"> Image</label>
    <label><input type="radio" name="inputType" value="video"> Video</label>
</div>
<input type="file" id="imageInput" accept="image/*" style="display:none;">
<input type="file" id="videoInput" accept="video/*" style="display:none;">

ログイン後にコピー

2. 入力と結果の表示

アプリケーションは、

<div id="videoContainer">
    <video id="videoElement" autoplay playsinline></video>
    <div id="infoBox" class="infoBox">
        <p><strong>Detected Object:</strong> <span id="objectLabel"></span></p>
        <p><strong>Confidence:</strong> <span id="confidenceScore"></span></p>
    </div>
</div>
<img id="imageDisplay">
<video id="videoDisplay" controls loop></video>
<canvas id="outputCanvas"></canvas>

ログイン後にコピー

3. 物体検出ロジックの実装

JavaScript (script.js) は、TensorFlow.js と COCO-SSD を使用してオブジェクト検出ロジックを処理します。これには以下が含まれます:

モデルの初期化と非同期ロード:

  async function loadModel() {
      const model = await cocoSsd.load();
      return model;
  }

ログイン後にコピー

選択した入力 (ビデオまたは画像) に対して検出を実行し、結果で UI を更新します。

  async function detectObjects(input) {
      const model = await loadModel();
      const predictions = await model.detect(input);
      // Update UI with predictions
  }

ログイン後にコピー

さまざまな入力タイプ (Web カメラ、画像、ビデオ) を処理し、ユーザーのアクションに基づいて検出をトリガーします。

4. ユーザーの操作とコントロール

アプリケーションには、オブジェクト検出を制御するためのボタンが含まれています:

検出の開始: 選択した入力に基づいてオブジェクト検出を開始します。
検出の停止: 検出プロセスを一時停止または停止します。
スクリーンショットのキャプチャ: ユーザーが現在の検出結果のスクリーンショットをキャプチャできるようにします。

<div id="controls">
    <button id="startButton">Start Detection</button>
    <button id="stopButton" disabled>Stop Detection</button>
    <button id="captureButton" disabled>Capture Screenshot</button>
</div>

ログイン後にコピー

5. ユーザーエクスペリエンスの向上

シームレスなエクスペリエンスを提供するために、アプリケーションには TensorFlow.js と COCO-SSD モデルの実行中にユーザーに通知する読み込みインジケーター (

) が含まれています。ロード中です。

結論

結論として、TensorFlow.js と COCO-SSD を組み合わせることで、Web ブラウザ内で直接リアルタイムの物体検出の素晴らしい可能性が開かれます。この記事では、環境のセットアップからオブジェクト検出ロジックの実装、ユーザーインタラクションの強化に至るまで、このようなアプリケーションの構築に必要な基本的なコンポーネントと手順を説明しました。開発者はこれらのテクノロジーを活用して、Web 上の機械学習の可能性の限界を押し上げる、インタラクティブで応答性の高い Web アプリケーションを作成できるようになりました。これらのテクノロジーが進化し続けるにつれて、将来はさらに洗練され、アクセスしやすい AI を活用した Web エクスペリエンスが期待できます。

Github リポジトリはこちらです

以上がTensorFlow.js と COCO-SSD を使用してブラウザでリアルタイムのオブジェクト検出を利用するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。