Memanfaatkan Pengesanan Objek Masa Nyata dalam Pelayar dengan TensorFlow.js dan COCO-SSD

Pengenalan

Dalam beberapa tahun kebelakangan ini, bidang pembelajaran mesin telah menyaksikan kemajuan yang luar biasa, terutamanya dalam membawa model berkuasa ke aplikasi web. Satu kejayaan sedemikian ialah keupayaan untuk melakukan pengesanan objek masa nyata secara langsung dalam penyemak imbas web, terima kasih kepada teknologi seperti TensorFlow.js dan model seperti COCO-SSD. Artikel ini meneroka cara pembangun boleh memanfaatkan alatan ini untuk mencipta aplikasi interaktif yang mengesan objek dalam strim webcam langsung, imej yang dimuat naik atau video, semuanya tanpa memerlukan pemprosesan bahagian pelayan.

Memahami TensorFlow.js dan COCO-SSD

TensorFlow.js ialah perpustakaan JavaScript yang dibangunkan oleh Google yang membenarkan pembangun menjalankan model pembelajaran mesin secara terus dalam penyemak imbas. Ia menyediakan cara untuk menggunakan model pra-latihan atau melatih model baharu menggunakan API JavaScript, menjadikannya boleh diakses dan mudah untuk disepadukan dengan aplikasi web. COCO-SSD (Objek Biasa dalam Konteks - Pengesan MultiBox Pukulan Tunggal) ialah model pra-latihan yang popular untuk pengesanan objek. Ia dioptimumkan untuk mengesan pelbagai jenis objek dalam masa nyata, menjadikannya sesuai untuk aplikasi interaktif.

Menyediakan Persekitaran

Untuk bermula, pembangun perlu menyediakan persekitaran pembangunan mereka. Ini biasanya melibatkan:

• Termasuk TensorFlow.js dan COCO-SSD dalam dokumen HTML menggunakan tag skrip:

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

• Mencipta struktur HTML untuk mengendalikan elemen antara muka pengguna seperti input video, muat naik imej dan butang kawalan.

Membina Aplikasi

1. Mengendalikan Input Pengguna

Aplikasi ini membolehkan pengguna memilih antara jenis input yang berbeza:

• Kamera web: Merakam suapan video langsung secara langsung daripada kamera web pengguna.
• Imej: Membenarkan pengguna memuat naik fail imej daripada peranti mereka.
• Video: Membolehkan pengguna memuat naik fail video untuk pengesanan objek.

<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. Memaparkan Input dan Keputusan

Aplikasi secara dinamik memaparkan input (video atau imej) yang dipilih dan hasil pengesanan menggunakan elemen HTML5 seperti

<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. Melaksanakan Logik Pengesanan Objek

JavaScript (script.js) mengendalikan logik pengesanan objek menggunakan TensorFlow.js dan COCO-SSD. Ini melibatkan:

• Memulakan model dan memuatkannya secara tidak segerak:

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

• Melaksanakan pengesanan pada input terpilih (video atau imej) dan mengemas kini UI dengan hasil:

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

• Mengendalikan jenis input yang berbeza (kamera web, imej, video) dan pengesanan pencetus berdasarkan tindakan pengguna.

4. Interaksi dan Kawalan Pengguna

Aplikasi ini termasuk butang untuk mengawal pengesanan objek:

• Mulakan Pengesanan: Memulakan pengesanan objek berdasarkan input yang dipilih.
• Hentikan Pengesanan: Menjeda atau menghentikan proses pengesanan.
• Tangkap Tangkapan Skrin: Membenarkan pengguna menangkap tangkapan skrin hasil pengesanan semasa.

<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. Meningkatkan Pengalaman Pengguna

Untuk memberikan pengalaman yang lancar, aplikasi menyertakan penunjuk pemuatan (

Memuatkan...

) untuk memberitahu pengguna semasa TensorFlow.js dan model COCO-SSD sedang sedang dimuatkan.

Kesimpulan

Kesimpulannya, TensorFlow.js digabungkan dengan COCO-SSD membuka kemungkinan menarik untuk pengesanan objek masa nyata terus dalam pelayar web. Artikel ini telah menunjukkan komponen asas dan langkah yang terlibat dalam membina aplikasi sedemikian, daripada menyediakan persekitaran kepada melaksanakan logik pengesanan objek dan meningkatkan interaksi pengguna. Pembangun kini boleh memanfaatkan teknologi ini untuk mencipta aplikasi web interaktif dan responsif yang menolak sempadan perkara yang mungkin dengan pembelajaran mesin di web. Memandangkan teknologi ini terus berkembang, masa depan kelihatan menjanjikan untuk pengalaman web berkuasa AI yang lebih canggih dan boleh diakses.

Berikut ialah Repo Github

Atas ialah kandungan terperinci Memanfaatkan Pengesanan Objek Masa Nyata dalam Pelayar dengan TensorFlow.js dan COCO-SSD. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!