簡介
近年來，機器學習領域取得了顯著的進步，特別是在將強大的模型引入 Web 應用程式方面。其中一項突破是能夠直接在 Web 瀏覽器中執行即時物件偵測，這要歸功於 TensorFlow.js 等技術和 COCO-SSD 等模型。本文探討了開發人員如何利用這些工具來創建互動式應用程序，以檢測即時網路攝影機串流、上傳的圖像或視訊中的對象，所有這些都不需要伺服器端處理。
了解 TensorFlow.js 和 COCO-SSD
TensorFlow.js 是 Google 開發的 JavaScript 函式庫，讓開發人員直接在瀏覽器中執行機器學習模型。它提供了一種使用 JavaScript API 部署預訓練模型或訓練新模型的方法，使其易於存取且易於與 Web 應用程式整合。 COCO-SSD（上下文中的常見物件 - Single Shot MultiBox Detector）是一種流行的用於物件偵測的預訓練模型。它經過優化，可以即時檢測各種物體，使其適合互動式應用程式。
設定環境
首先，開發人員需要設定他們的開發環境。這通常涉及：
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@latest"></script> <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/coco-ssd@latest"></script>
建立應用程式
該應用程式允許使用者在不同的輸入類型之間進行選擇：
<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;">
應用程式使用
<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>
JavaScript (script.js) 使用 TensorFlow.js 和 COCO-SSD 處理物件偵測邏輯。這涉及：
async function loadModel() {
const model = await cocoSsd.load();
return model;
}
async function detectObjects(input) {
const model = await loadModel();
const predictions = await model.detect(input);
// Update UI with predictions
}
該應用程式包括用於控制物件偵測的按鈕：
<div id="controls">
<button id="startButton">Start Detection</button>
<button id="stopButton" disabled>Stop Detection</button>
<button id="captureButton" disabled>Capture Screenshot</button>
</div>
為了提供無縫體驗，該應用程式包含一個載入指示器(
結論
總之，TensorFlow.js 與 COCO-SSD 的結合為直接在網頁瀏覽器中進行即時物件偵測開闢了令人興奮的可能性。本文示範了建構此類應用程式所涉及的基本元件和步驟，從設定環境到實現物件偵測邏輯和增強使用者互動。開發人員現在可以利用這些技術來創建互動式和響應式 Web 應用程序，從而突破網路機器學習的可能性界限。隨著這些技術的不斷發展，未來將迎來更加複雜和易於存取的人工智慧網路體驗。
這是 Github 儲存庫
以上是使用 TensorFlow.js 和 COCO-SSD 在瀏覽器中利用即時物件偵測的詳細內容。更多資訊請關注PHP中文網其他相關文章！
