1. 시작하기 전에
요즘 머신러닝은 꽤나 유행하는 단어입니다. 적용 분야는 무한한 것으로 보이며, 가까운 미래에 거의 모든 산업에 영향을 미칠 것으로 예상됩니다. 엔지니어, 디자이너, 프런트엔드 또는 백엔드 개발자로 일하고 JavaScript에 익숙하다면 이 Codelab을 통해 머신러닝을 스킬셋에 추가하는 방법을 시작할 수 있습니다.
기본 요건
이 Codelab은 JavaScript에 이미 익숙한 숙련된 엔지니어를 대상으로 작성되었습니다.
빌드할 항목
이 Codelab에서는 다음을 수행합니다.
- TensorFlow.js를 통해 웹브라우저에서 직접 머신러닝을 사용하여 라이브 웹캠 스트림에서 일반적인 객체(한 번에 두 개 이상 포함)를 분류하고 감지하는 웹페이지를 만듭니다.
- 일반 웹캠을 강화하여 객체를 식별하고 발견된 각 객체의 경계 상자 좌표를 가져옵니다.
- 아래와 같이 동영상 스트림에서 발견된 객체를 강조 표시합니다.
동영상에 사람이 있는지 감지하여 특정 시간대에 얼마나 많은 사람이 있었는지 파악해 하루 중 특정 지역의 혼잡도를 추정하거나, 내가 집에 없는 동안 개가 있어서는 안 되는 방에 있는 것을 감지하면 알림을 보낼 수 있다고 상상해 보세요. 이러한 작업을 수행할 수 있다면 맞춤 하드웨어를 사용하여 침입자 (모든 유형)를 감지할 때 알림을 보내는 Google Nest Cam의 자체 버전을 만들 수 있습니다. 정말 멋지죠. 하기 어렵나요? 아니요. 해킹을 시작해 보겠습니다.
학습할 내용
- 선행 학습된 TensorFlow.js 모델을 로드하는 방법
- 실시간 웹캠 스트림에서 데이터를 가져와 캔버스에 그리는 방법
- 이미지 프레임을 분류하여 모델이 인식하도록 학습된 객체의 경계 상자를 찾는 방법
- 모델에서 다시 전달된 데이터를 사용하여 발견된 객체를 강조 표시하는 방법
이 Codelab에서는 TensorFlow.js 선행 학습 모델을 시작하는 방법을 중점적으로 다룹니다. TensorFlow.js 및 머신러닝과 관련이 없는 개념과 코드 블록은 설명되지 않으며 복사하여 붙여넣을 수 있도록 제공됩니다.
2. TensorFlow.js란 무엇인가요?
TensorFlow.js는 JavaScript가 실행될 수 있는 모든 곳에서 실행할 수 있는 오픈소스 머신러닝 라이브러리입니다. Python으로 작성된 원래 TensorFlow 라이브러리를 기반으로 하며 JavaScript 생태계를 위해 이 개발자 환경과 API 집합을 다시 만드는 것을 목표로 합니다.
어디에서 사용할 수 있나요?
JavaScript의 이식성을 고려할 때 이제 하나의 언어로 작성하고 다음 플랫폼에서 모두 쉽게 머신러닝을 실행할 수 있습니다.
- 일반 JavaScript를 사용하여 웹브라우저의 클라이언트 측
- Node.js를 사용하는 서버 측 및 Raspberry Pi와 같은 IoT 기기
- Electron을 사용하는 데스크톱 앱
- React Native를 사용하는 기본 모바일 앱
TensorFlow.js는 이러한 각 환경 내에서 여러 백엔드 (예: CPU 또는 WebGL과 같이 실행할 수 있는 실제 하드웨어 기반 환경)도 지원합니다. 이 맥락에서 '백엔드'는 서버 측 환경을 의미하지 않습니다. 실행을 위한 백엔드는 예를 들어 WebGL의 클라이언트 측일 수 있습니다. 호환성을 보장하고 빠르게 실행되도록 하기 위해서입니다. 현재 TensorFlow.js는 다음을 지원합니다.
- 기기의 그래픽 카드 (GPU)에서 WebGL 실행 - GPU 가속을 사용하여 더 큰 모델 (크기 3MB 이상)을 실행하는 가장 빠른 방법입니다.
- CPU에서 Web Assembly (WASM) 실행: 예를 들어 이전 세대 휴대전화를 비롯한 여러 기기에서 CPU 성능을 개선합니다. 이는 그래픽 프로세서에 콘텐츠를 업로드하는 오버헤드로 인해 WebGL보다 WASM에서 CPU로 더 빠르게 실행할 수 있는 소규모 모델 (크기 3MB 미만)에 더 적합합니다.
- CPU 실행 - 다른 환경을 사용할 수 없는 경우 대체해야 합니다. 세 가지 방법 중 가장 느리지만 항상 사용할 수 있습니다.
참고: 실행할 기기를 알고 있다면 이러한 백엔드 중 하나를 강제할 수 있습니다. 이를 지정하지 않으면 TensorFlow.js가 자동으로 결정합니다.
클라이언트 측 슈퍼 파워
클라이언트 시스템의 웹브라우저에서 TensorFlow.js를 실행하면 고려해 볼 만한 여러 이점이 있습니다.
개인 정보 보호
데이터를 서드 파티 웹 서버로 전송하지 않고도 클라이언트 머신에서 데이터를 학습시키고 분류할 수 있습니다. 예를 들어 GDPR과 같은 현지 법규를 준수해야 하거나 사용자가 기기에 보관하고 서드 파티에 전송하지 않기를 원하는 데이터를 처리하는 경우 이러한 요구사항이 있을 수 있습니다.
속도
원격 서버로 데이터를 전송하지 않아도 되므로 추론 (데이터 분류 행위)이 더 빨라질 수 있습니다. 사용자가 액세스 권한을 부여하면 카메라, 마이크, GPS, 가속도계 등 기기의 센서에 직접 액세스할 수 있습니다.
도달범위 및 확장성
전 세계 누구나 내가 보낸 링크를 클릭하고 브라우저에서 웹페이지를 열어 내가 만든 것을 활용할 수 있습니다. 머신러닝 시스템을 사용하기 위해 CUDA 드라이버 등이 포함된 복잡한 서버 측 Linux 설정을 할 필요가 없습니다.
비용
서버가 없다는 것은 HTML, CSS, JS, 모델 파일을 호스팅하는 CDN에만 비용을 지불하면 된다는 의미입니다. CDN 비용은 서버 (그래픽 카드가 연결되어 있을 수 있음)를 24시간 연중무휴로 실행하는 것보다 훨씬 저렴합니다.
서버 측 기능
TensorFlow.js의 Node.js 구현을 활용하면 다음 기능을 사용할 수 있습니다.
전체 CUDA 지원
서버 측에서는 그래픽 카드 가속을 위해 NVIDIA CUDA 드라이버를 설치하여 TensorFlow가 그래픽 카드와 함께 작동하도록 해야 합니다 (WebGL을 사용하는 브라우저와 달리 설치가 필요하지 않음). 하지만 CUDA를 완전히 지원하면 그래픽 카드의 하위 수준 기능을 최대한 활용하여 학습 및 추론 시간을 단축할 수 있습니다. 성능은 Python TensorFlow 구현과 동일합니다. 둘 다 동일한 C++ 백엔드를 공유하기 때문입니다.
모델 크기
연구의 최첨단 모델의 경우 크기가 기가바이트일 수 있는 매우 큰 모델을 사용할 수 있습니다. 이러한 모델은 현재 브라우저 탭당 메모리 사용량 제한으로 인해 웹브라우저에서 실행할 수 없습니다. 이러한 대형 모델을 실행하려면 모델을 효율적으로 실행하는 데 필요한 하드웨어 사양으로 자체 서버에서 Node.js를 사용하면 됩니다.
IOT
Node.js는 Raspberry Pi와 같은 인기 있는 싱글 보드 컴퓨터에서 지원되므로 이러한 기기에서도 TensorFlow.js 모델을 실행할 수 있습니다.
속도
Node.js는 JavaScript로 작성되어 있으므로 JIT(Just-In-Time) 컴파일의 이점을 누릴 수 있습니다. 즉, Node.js는 런타임에 최적화되므로 특히 전처리 작업을 실행할 때 성능이 향상되는 경우가 많습니다. 이 사례 연구에서 Hugging Face가 Node.js를 사용하여 자연어 처리 모델의 성능을 2배 향상한 방법을 확인할 수 있습니다.
이제 TensorFlow.js의 기본사항, 실행 가능 위치, 몇 가지 이점을 이해했으니 유용한 작업을 시작해 보겠습니다.
3. 선행 학습된 모델
TensorFlow.js는 다양한 사전 학습된 머신러닝 (ML) 모델을 제공합니다. 이러한 모델은 TensorFlow.js 팀에서 학습시키고 사용하기 쉬운 클래스로 래핑했으며 머신러닝을 처음 시작하는 데 적합합니다. 문제를 해결하기 위해 모델을 빌드하고 학습시키는 대신 선행 학습된 모델을 시작점으로 가져올 수 있습니다.
Tensorflow.js JavaScript용 모델 페이지에서 사용하기 쉬운 선행 학습된 모델의 목록을 확인할 수 있습니다. TensorFlow Hub를 비롯해 TensorFlow.js에서 작동하는 변환된 TensorFlow 모델을 얻을 수 있는 다른 곳도 있습니다.
사전 학습된 모델을 사용해야 하는 이유는 무엇인가요?
인기 있는 사전 학습된 모델이 원하는 사용 사례에 적합한 경우 다음과 같은 여러 이점이 있습니다.
- 직접 학습 데이터를 수집할 필요가 없습니다. 머신러닝 시스템이 학습에 사용할 수 있도록 올바른 형식으로 데이터를 준비하고 라벨을 지정하는 데는 많은 시간과 비용이 들 수 있습니다.
- 비용과 시간을 절약하여 아이디어를 신속하게 프로토타입으로 제작할 수 있습니다.
선행 학습된 모델이 필요한 작업을 수행하기에 충분한 경우 '바퀴를 재발명'할 필요가 없습니다. 모델에서 제공하는 지식을 사용하여 창의적인 아이디어를 구현하는 데 집중할 수 있습니다. - 최첨단 연구 활용 사전 학습 모델은 인기 있는 연구를 기반으로 하는 경우가 많으므로 이러한 모델을 살펴보고 실제 환경에서의 성능을 파악할 수 있습니다.
- 사용 편의성 및 광범위한 문서. 이러한 모델의 인기로 인해
- 전이 학습 기능 일부 사전 학습된 모델은 전이 학습 기능을 제공합니다. 전이 학습은 기본적으로 한 머신러닝 작업에서 학습한 정보를 유사한 다른 예로 전송하는 방법입니다. 예를 들어 원래 고양이를 인식하도록 학습된 모델에 새로운 학습 데이터를 제공하면 개를 인식하도록 다시 학습시킬 수 있습니다. 빈 캔버스로 시작하지 않으므로 이 방법이 더 빠릅니다. 모델은 이미 학습한 내용을 사용하여 고양이를 인식한 다음 새로운 것(개)을 인식할 수 있습니다. 결국 개도 눈과 귀가 있으므로 이러한 특징을 찾는 방법을 이미 알고 있다면 절반은 완료된 것입니다. 훨씬 빠른 방식으로 자체 데이터로 모델을 재학습시킵니다.
COCO-SSD란 무엇인가요?
COCO-SSD는 이 Codelab에서 사용할 사전 학습된 객체 감지 ML 모델의 이름으로, 단일 이미지에서 여러 객체를 현지화하고 식별하는 것을 목표로 합니다. 즉, 찾도록 학습된 객체의 경계 상자를 알려주어 제시된 이미지에서 해당 객체의 위치를 알려줄 수 있습니다. 아래 이미지를 참고하세요.
위 이미지에 개가 2마리 이상 있다면 각 개의 위치를 설명하는 경계 상자 2개의 좌표가 제공됩니다. COCO-SSD는 사람, 자동차, 고양이 등 90개의 일반적인 일상 객체를 인식하도록 사전 학습되었습니다.
이름의 출처는 어디인가요?
이름이 이상하게 들릴 수 있지만 다음 두 가지 약어에서 유래했습니다.
- COCO: 누구나 자체 모델을 학습할 때 다운로드하여 사용할 수 있는 COCO (Common Objects in Context) 데이터 세트로 학습되었다는 사실을 나타냅니다. 데이터 세트에는 학습에 사용할 수 있는 라벨이 지정된 이미지가 200,000개 이상 포함되어 있습니다.
- SSD (Single Shot MultiBox Detection): 모델 구현에 사용된 모델 아키텍처의 일부를 나타냅니다. 이 Codelab에서는 이를 이해하지 않아도 되지만 궁금한 경우 여기에서 SSD에 대해 자세히 알아볼 수 있습니다.
4. 설정
필요한 항목
- 최신 웹브라우저
- HTML, CSS, JavaScript, Chrome DevTools (콘솔 출력 보기)에 관한 기본 지식
코딩 시작하기
Glitch.com 또는 Codepen.io에서 시작할 수 있는 상용구 템플릿이 생성되었습니다. 클릭 한 번으로 템플릿을 클론하여 이 코드 실습의 기본 상태로 사용할 수 있습니다.
Glitch에서 remix this 버튼을 클릭하여 포크하고 수정할 수 있는 새 파일 세트를 만듭니다.
또는 Codepen에서 화면 오른쪽 하단의 포크를 클릭합니다.
이 매우 간단한 스켈레톤은 다음 파일을 제공합니다.
- HTML 페이지 (index.html)
- 스타일시트 (style.css)
- JavaScript 코드를 작성할 파일 (script.js)
편의를 위해 TensorFlow.js 라이브러리의 가져오기가 HTML 파일에 추가되었습니다. 상태 메시지가 표시됩니다.
index.html
<!-- Import TensorFlow.js library -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs/dist/tf.min.js" type="text/javascript"></script>
대안: 선호하는 웹 편집기 사용 또는 로컬에서 작업
코드를 다운로드하여 로컬 또는 다른 온라인 편집기에서 작업하려면 위에 언급된 3개의 파일을 동일한 디렉터리에 만들고 Glitch 보일러플레이트의 코드를 각 파일에 복사하여 붙여넣으면 됩니다.
5. HTML 스켈레톤 채우기
모든 프로토타입에는 기본적인 HTML 스캐폴딩이 필요합니다. 나중에 이를 사용하여 머신러닝 모델의 출력을 렌더링합니다. 지금 설정해 보겠습니다.
- 페이지 제목
- 설명 텍스트
- 웹캠을 사용 설정하는 버튼
- 웹캠 스트림을 렌더링할 동영상 태그
이러한 기능을 설정하려면 index.html을 열고 기존 코드를 다음 코드로 붙여넣습니다.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Multiple object detection using pre trained model in TensorFlow.js</title>
<meta charset="utf-8">
<!-- Import the webpage's stylesheet -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Multiple object detection using pre trained model in TensorFlow.js</h1>
<p>Wait for the model to load before clicking the button to enable the webcam - at which point it will become visible to use.</p>
<section id="demos" class="invisible">
<p>Hold some objects up close to your webcam to get a real-time classification! When ready click "enable webcam" below and accept access to the webcam when the browser asks (check the top left of your window)</p>
<div id="liveView" class="camView">
<button id="webcamButton">Enable Webcam</button>
<video id="webcam" autoplay muted width="640" height="480"></video>
</div>
</section>
<!-- Import TensorFlow.js library -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs/dist/tf.min.js" type="text/javascript"></script>
<!-- Load the coco-ssd model to use to recognize things in images -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/coco-ssd"></script>
<!-- Import the page's JavaScript to do some stuff -->
<script src="script.js" defer></script>
</body>
</html>
코드 이해하기
추가한 몇 가지 주요 사항을 확인하세요.
<h1>태그와 헤더용<p>태그, 페이지 사용 방법에 관한 정보를 추가했습니다. 특별한 것은 없습니다.
데모 스페이스를 나타내는 섹션 태그도 추가했습니다.
index.html
<section id="demos" class="invisible">
<p>Hold some objects up close to your webcam to get a real-time classification! When ready click "enable webcam" below and accept access to the webcam when the browser asks (check the top left of your window)</p>
<div id="liveView" class="webcam">
<button id="webcamButton">Enable Webcam</button>
<video id="webcam" autoplay width="640" height="480"></video>
</div>
</section>
- 처음에는 이
section에 'invisible' 클래스를 지정합니다. 이렇게 하면 모델이 준비되었을 때 사용자에게 시각적으로 표시하여 웹캠 사용 설정 버튼을 클릭해도 안전하다는 것을 알릴 수 있습니다. - CSS에서 스타일을 지정할 웹캠 사용 설정 버튼을 추가했습니다.
- 웹캠 입력을 스트리밍할 동영상 태그도 추가했습니다. 이 값은 곧 JavaScript 코드에서 설정합니다.
지금 출력을 미리 보면 다음과 같이 표시됩니다.
6. 스타일 추가
요소 기본값
먼저 방금 추가한 HTML 요소가 올바르게 렌더링되도록 스타일을 추가해 보겠습니다.
style.css
body {
font-family: helvetica, arial, sans-serif;
margin: 2em;
color: #3D3D3D;
}
h1 {
font-style: italic;
color: #FF6F00;
}
video {
display: block;
}
section {
opacity: 1;
transition: opacity 500ms ease-in-out;
}
다음으로, 버튼을 숨기거나 모델이 아직 준비되지 않은 경우 데모 영역을 사용할 수 없는 것으로 표시하는 등 다양한 사용자 인터페이스 상태에 도움이 되는 유용한 CSS 클래스를 추가합니다.
style.css
.removed {
display: none;
}
.invisible {
opacity: 0.2;
}
.camView {
position: relative;
float: left;
width: calc(100% - 20px);
margin: 10px;
cursor: pointer;
}
.camView p {
position: absolute;
padding: 5px;
background-color: rgba(255, 111, 0, 0.85);
color: #FFF;
border: 1px dashed rgba(255, 255, 255, 0.7);
z-index: 2;
font-size: 12px;
}
.highlighter {
background: rgba(0, 255, 0, 0.25);
border: 1px dashed #fff;
z-index: 1;
position: absolute;
}
좋습니다. 완료되었습니다. 위의 두 코드 조각으로 스타일을 덮어쓰는 데 성공했다면 이제 실시간 미리보기가 다음과 같이 표시됩니다.
HTML에는 기본적으로 'invisible' 클래스가 적용되어 데모 영역 텍스트와 버튼을 사용할 수 없습니다. 모델을 사용할 준비가 되면 JavaScript를 사용하여 이 클래스를 삭제합니다.
7. JavaScript 스켈레톤 만들기
주요 DOM 요소 참조
먼저 코드에서 나중에 조작하거나 액세스해야 하는 페이지의 주요 부분에 액세스할 수 있는지 확인합니다.
script.js
const video = document.getElementById('webcam');
const liveView = document.getElementById('liveView');
const demosSection = document.getElementById('demos');
const enableWebcamButton = document.getElementById('webcamButton');
웹캠 지원 여부 확인하기
이제 사용하는 브라우저가 getUserMedia를 통해 웹캠 스트림에 액세스하는 것을 지원하는지 확인하는 보조 기능을 추가할 수 있습니다.
script.js
// Check if webcam access is supported.
function getUserMediaSupported() {
return !!(navigator.mediaDevices &&
navigator.mediaDevices.getUserMedia);
}
// If webcam supported, add event listener to button for when user
// wants to activate it to call enableCam function which we will
// define in the next step.
if (getUserMediaSupported()) {
enableWebcamButton.addEventListener('click', enableCam);
} else {
console.warn('getUserMedia() is not supported by your browser');
}
// Placeholder function for next step. Paste over this in the next step.
function enableCam(event) {
}
웹캠 스트림 가져오기
다음으로, 아래 코드를 복사하여 붙여넣어 위에서 정의한 이전에 비어 있던 enableCam 함수의 코드를 작성합니다.
script.js
// Enable the live webcam view and start classification.
function enableCam(event) {
// Only continue if the COCO-SSD has finished loading.
if (!model) {
return;
}
// Hide the button once clicked.
event.target.classList.add('removed');
// getUsermedia parameters to force video but not audio.
const constraints = {
video: true
};
// Activate the webcam stream.
navigator.mediaDevices.getUserMedia(constraints).then(function(stream) {
video.srcObject = stream;
video.addEventListener('loadeddata', predictWebcam);
});
}
마지막으로 웹캠이 작동하는지 테스트할 수 있도록 임시 코드를 추가합니다.
아래 코드는 모델이 로드된 것처럼 가장하고 카메라 버튼을 사용 설정하므로 클릭할 수 있습니다. 다음 단계에서 이 코드를 모두 바꾸므로 잠시 후 다시 삭제할 준비를 하세요.
script.js
// Placeholder function for next step.
function predictWebcam() {
}
// Pretend model has loaded so we can try out the webcam code.
var model = true;
demosSection.classList.remove('invisible');
좋습니다. 코드를 실행하고 현재 상태로 버튼을 클릭하면 다음과 같이 표시됩니다.
8. 머신러닝 모델 사용
모델 로드
이제 COCO-SSD 모델을 로드할 준비가 되었습니다.
초기화가 완료되면 웹페이지에서 데모 영역과 버튼을 사용 설정합니다 (마지막 단계에서 추가한 임시 코드 위에 이 코드를 붙여넣음).
script.js
// Store the resulting model in the global scope of our app.
var model = undefined;
// Before we can use COCO-SSD class we must wait for it to finish
// loading. Machine Learning models can be large and take a moment
// to get everything needed to run.
// Note: cocoSsd is an external object loaded from our index.html
// script tag import so ignore any warning in Glitch.
cocoSsd.load().then(function (loadedModel) {
model = loadedModel;
// Show demo section now model is ready to use.
demosSection.classList.remove('invisible');
});
위의 코드를 추가하고 라이브 뷰를 새로고침하면 페이지가 로드된 후 몇 초 (네트워크 속도에 따라 다름)가 지나면 모델을 사용할 준비가 되었을 때 웹캠 사용 설정 버튼이 자동으로 표시됩니다. 하지만 predictWebcam 함수도 붙여넣었습니다. 이제 코드가 현재 아무것도 실행하지 않으므로 이를 완전히 정의해야 합니다.
다음 단계로 넘어가겠습니다.
웹캠에서 프레임 분류하기
브라우저가 준비되면 앱이 웹캠 스트림에서 프레임을 지속적으로 가져와 분류할 모델에 전달할 수 있도록 아래 코드를 실행합니다.
그러면 모델이 결과를 파싱하고, 반환된 좌표에 <p> 태그를 그리고, 신뢰도가 특정 수준 이상인 경우 텍스트를 객체의 라벨로 설정합니다.
script.js
var children = [];
function predictWebcam() {
// Now let's start classifying a frame in the stream.
model.detect(video).then(function (predictions) {
// Remove any highlighting we did previous frame.
for (let i = 0; i < children.length; i++) {
liveView.removeChild(children[i]);
}
children.splice(0);
// Now lets loop through predictions and draw them to the live view if
// they have a high confidence score.
for (let n = 0; n < predictions.length; n++) {
// If we are over 66% sure we are sure we classified it right, draw it!
if (predictions[n].score > 0.66) {
const p = document.createElement('p');
p.innerText = predictions[n].class + ' - with '
+ Math.round(parseFloat(predictions[n].score) * 100)
+ '% confidence.';
p.style = 'margin-left: ' + predictions[n].bbox[0] + 'px; margin-top: '
+ (predictions[n].bbox[1] - 10) + 'px; width: '
+ (predictions[n].bbox[2] - 10) + 'px; top: 0; left: 0;';
const highlighter = document.createElement('div');
highlighter.setAttribute('class', 'highlighter');
highlighter.style = 'left: ' + predictions[n].bbox[0] + 'px; top: '
+ predictions[n].bbox[1] + 'px; width: '
+ predictions[n].bbox[2] + 'px; height: '
+ predictions[n].bbox[3] + 'px;';
liveView.appendChild(highlighter);
liveView.appendChild(p);
children.push(highlighter);
children.push(p);
}
}
// Call this function again to keep predicting when the browser is ready.
window.requestAnimationFrame(predictWebcam);
});
}
이 새 코드에서 정말 중요한 호출은 model.detect()입니다.
TensorFlow.js의 모든 사전 제작 모델에는 실제로 머신러닝 추론을 실행하는 이와 같은 함수가 있습니다 (모델마다 이름이 다를 수 있으므로 자세한 내용은 문서를 확인하세요).
추론은 단순히 입력을 받아 머신러닝 모델 (기본적으로 많은 수학 연산)을 통해 실행한 다음 결과를 제공하는 행위입니다. TensorFlow.js 사전 제작 모델을 사용하면 JSON 객체 형식으로 예측을 반환하므로 사용하기 쉽습니다.
이 예측 함수의 전체 세부정보는 여기에서 COCO-SSD 모델에 관한 GitHub 문서를 참고하세요. 이 함수는 백그라운드에서 많은 작업을 처리합니다. 이미지, 동영상, 캔버스 등 '이미지'와 유사한 객체를 매개변수로 허용할 수 있습니다. 미리 만들어진 모델을 사용하면 이 코드를 직접 작성할 필요가 없고 '바로' 사용할 수 있으므로 시간과 노력을 많이 절약할 수 있습니다.
이제 이 코드를 실행하면 다음과 같은 이미지가 표시됩니다.
마지막으로 여러 객체를 동시에 감지하는 코드의 예는 다음과 같습니다.
축하합니다. 이제 이러한 기능을 사용하여 오래된 휴대전화로 Nest Cam과 같은 기기를 만들어 소파에 있는 개나 카우치에 있는 고양이를 감지하면 알림을 보내는 것이 얼마나 간단한지 상상해 보세요. 코드에 문제가 있는 경우 여기에서 최종 작업 버전을 확인하여 잘못 복사한 부분이 있는지 확인하세요.
9. 축하합니다
수고하셨습니다. 웹브라우저에서 TensorFlow.js와 머신러닝을 사용하는 첫 단계를 완료했습니다. 이제 이러한 초안을 바탕으로 창의적인 콘텐츠를 만들어 보세요. 무엇을 만드실 건가요?
요약
이 Codelab에서 배운 내용은 다음과 같습니다.
- 다른 형태의 TensorFlow보다 TensorFlow.js를 사용하는 이점을 배웠습니다.
- 사전 학습된 머신러닝 모델로 시작해야 하는 상황을 배웠습니다.
- 웹캠을 사용하여 실시간으로 객체를 분류할 수 있는 완전히 작동하는 웹페이지를 만들었습니다.
- 콘텐츠의 HTML 스켈레톤 만들기
- HTML 요소 및 클래스의 스타일 정의
- HTML과 상호작용하고 웹캠의 존재를 감지하도록 JavaScript 스캐폴딩 설정
- 사전 학습된 TensorFlow.js 모델 로드
- 로드된 모델을 사용하여 웹캠 스트림을 지속적으로 분류하고 이미지의 객체 주위에 경계 상자를 그립니다.
다음 단계
결과물을 공유해 주세요. 이 Codelab에서 만든 내용을 다른 창의적인 사용 사례로 쉽게 확장할 수 있습니다. 완료 후에도 고정관념을 깨고 계속해서 해킹해 보세요.
- 이 모델이 인식할 수 있는 모든 객체를 확인하고 이 지식을 사용하여 작업을 실행하는 방법을 생각해 보세요. 오늘 만든 것을 확장하여 지금 구현할 수 있는 창의적인 아이디어는 무엇인가요?
(선택한 특정 객체를 웹 소켓을 사용하여 감지할 때 다른 기기에 알림을 전송하는 간단한 서버 측 레이어를 추가할 수 있습니다. 오래된 스마트폰을 업사이클링하여 새로운 용도로 사용할 수 있습니다. 가능성은 무한합니다.)
- TensorFlow 블로그 또는 향후 TensorFlow 이벤트에서 여러분의 프로젝트가 추천되는 기회를 얻으려면 소셜 미디어에서 #MadeWithTFJS 해시태그를 사용해 태그해 주세요.