TensorFlow.js 및 COCO-SSD를 사용하여 브라우저에서 실시간 객체 감지 활용

소개

최근 몇 년간 기계 학습 분야는 특히 강력한 모델을 웹 애플리케이션에 도입하는 등 눈에 띄는 발전을 이루었습니다. 그러한 혁신 중 하나는 TensorFlow.js와 같은 기술과 COCO-SSD와 같은 모델 덕분에 웹 브라우저 내에서 직접 실시간 개체 감지를 수행할 수 있는 기능입니다. 이 기사에서는 개발자가 이러한 도구를 활용하여 서버 측 처리 없이 라이브 웹캠 스트림, 업로드된 이미지 또는 비디오에서 개체를 감지하는 대화형 애플리케이션을 만드는 방법을 살펴봅니다.

TensorFlow.js 및 COCO-SSD 이해

TensorFlow.js는 개발자가 브라우저에서 직접 기계 학습 모델을 실행할 수 있도록 Google에서 개발한 JavaScript 라이브러리입니다. 사전 학습된 모델을 배포하거나 JavaScript API를 사용하여 새로운 모델을 학습하는 방법을 제공하므로 웹 애플리케이션에 액세스하고 쉽게 통합할 수 있습니다. 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. 사용자 입력 처리

이 애플리케이션을 통해 사용자는 다양한 입력 유형 중에서 선택할 수 있습니다.

• 웹캠: 사용자 웹캠에서 라이브 비디오 피드를 직접 캡처합니다.
• 이미지: 사용자가 자신의 기기에서 이미지 파일을 업로드할 수 있습니다.
• 비디오: 사용자가 객체 감지를 위한 비디오 파일을 업로드할 수 있습니다.

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

• 다양한 입력 유형(웹캠, 이미지, 동영상)을 처리하고 사용자 작업에 따라 감지를 실행합니다.

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 모델이 실행되는 동안 사용자에게 알리는 로딩 표시기(

결론

결론적으로, COCO-SSD와 결합된 TensorFlow.js는 웹 브라우저 내에서 직접 실시간 객체 감지를 위한 흥미로운 가능성을 열어줍니다. 이 문서에서는 환경 설정부터 개체 감지 논리 구현 및 사용자 상호 작용 강화에 이르기까지 이러한 애플리케이션 구축과 관련된 기본 구성 요소와 단계를 설명했습니다. 이제 개발자는 이러한 기술을 활용하여 웹에서 기계 학습으로 가능한 것의 한계를 넓히는 대화형 및 반응형 웹 애플리케이션을 만들 수 있습니다. 이러한 기술이 계속 발전함에 따라 미래에는 더욱 정교하고 접근 가능한 AI 기반 웹 경험이 기대됩니다.

Github 저장소는 다음과 같습니다

위 내용은 TensorFlow.js 및 COCO-SSD를 사용하여 브라우저에서 실시간 객체 감지 활용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!