1. 소개
최종 업데이트: 2022년 4월 11일
이 Codelab에서는 Teachable Machine을 사용하여 이미지 분류 모델을 학습시키고, 강력하고 유연한 머신러닝 라이브러리인 TensorFlow.js를 사용하여 Coral 하드웨어 가속으로 실행하는 방법을 알아봅니다. 자바스크립트용입니다. 웹캠에서 이미지를 표시하고 Coral Edge TPU를 사용하여 분류하는 Electron 앱을 빌드합니다. 이 Codelab의 정상적으로 작동하는 버전은 sig-tfjs GitHub 저장소에서 확인할 수 있습니다.
Calal 기기가 필요한가요?
아니요. 대신 Coral 기기 없이 이 Codelab을 시도해도 데스크톱 컴퓨터에서 WebNN 액셀러레이터를 사용하여 성능을 높일 수 있습니다.
빌드할 항목
이 Codelab에서는 이미지를 분류하는 Electron 앱을 빌드합니다. 앱:
- 웹캠의 이미지를 학습된 모델에 정의된 카테고리로 분류합니다.
- Coral 액셀러레이터를 사용하여 성능을 향상합니다(가능한 경우).
- 플랫폼에서 지원되는 경우 WebNN을 사용하여 성능을 높입니다.
과정 내용
- tfjs-tflite-node NPM 패키지를 설치하고 설정하여 Node.js에서 TFLite 모델을 실행하는 방법
- Edge TPU 런타임 라이브러리를 설치하여 Coral 기기에서 모델을 실행하는 방법
- Coral Edge TPU를 사용하여 모델 추론을 가속화하는 방법
- WebNN을 사용하여 모델 추론을 가속화하는 방법
이 Codelab에서는 Node.js의 TFLite에 중점을 둡니다. 관련 없는 개념과 코드 블록은 자세히 언급되지 않으며 복사하여 붙여넣기만 하도록 제공됩니다.
필요한 항목
이 Codelab을 완료하려면 다음이 필요합니다.
- 웹캠이 있는 컴퓨터
- Coral의 경우 데스크톱에서 Raspberry Pi OS (64비트)를 실행하는 Raspberry Pi를 사용하는 것이 좋습니다.
- WebNN의 경우 Ubuntu 20.04 또는 Windows 10을 실행하는 Intel x86-64 머신을 사용하는 것이 좋습니다.
- Node.js 버전 12 이상
- 자바스크립트에 대한 지식
- (권장) Coral USB Accelerator로 모델 속도를 높입니다.
2 설정
코드 가져오기
이 프로젝트에 필요한 모든 코드를 Git 저장소에 추가했습니다. 시작하려면 코드를 선택하여 원하는 개발 환경에서 여세요. 이 Codelab에서는 데스크톱에서 Raspberry Pi OS (64비트)를 실행하는 Raspberry Pi를 사용하는 것이 좋습니다. 이에 따라 Coral 액셀러레이터를 쉽게 연결할 수 있습니다.
적극 권장: Git를 사용하여 Raspberry Pi에서 저장소 클론
코드를 받으려면 새 터미널 창을 열고 저장소를 클론합니다.
git clone https://github.com/tensorflow/sig-tfjs.git
Codelab을 위해 수정해야 하는 모든 파일은 sig-tfjs 내의 tfjs-tflite-node-codelab 디렉터리에 있습니다. 이 디렉터리에 이름이 starter_code, cpu_inference_working, coral_inference_working, webnn_inference_working인 하위 디렉터리가 있습니다. 다음은 이 Codelab 단계의 체크포인트입니다.
저장소의 다른 파일 중 tfjs-tflite-node-codelab에 종속되는 NPM 패키지가 있습니다. 이 파일을 수정할 필요는 없지만 몇 가지 테스트를 실행하여 환경이 올바르게 설정되었는지 확인해야 합니다.
Edge TPU 런타임 라이브러리 설치
Coral 기기를 사용하려면 사용 전에 Edge TPU 런타임 라이브러리를 설치해야 합니다. 플랫폼에 맞는 안내에 따라 설치합니다.
Linux / Raspberry Pi에서
Linux의 경우 Google PPA에서 x86-64 및 Armv8 (64비트) 아키텍처용 Debian 패키지인 libedgetpu1-std로 라이브러리를 사용할 수 있습니다. 프로세서가 다른 아키텍처를 사용하는 경우 소스에서 아키텍처를 컴파일해야 합니다.
다음 명령어를 실행하여 Google의 Coral PPA를 추가하고 Edge TPU 런타임 라이브러리를 설치합니다.
# None of this is needed on Coral boards
# This repo is needed for almost all packages below
echo "deb https://packages.cloud.google.com/apt coral-edgetpu-stable main" | sudo tee /etc/apt/sources.list.d/coral-edgetpu.list
# This repo is needed for only python3-coral-cloudiot and python3-coral-enviro
echo "deb https://packages.cloud.google.com/apt coral-cloud-stable main" | sudo tee /etc/apt/sources.list.d/coral-cloud.list
curl https://packages.cloud.google.com/apt/doc/apt-key.gpg | sudo apt-key add -
sudo apt-get update
sudo apt-get install libedgetpu1-std
Windows / 기타 OS
사전 컴파일된 바이너리는 macOS 및 Windows의 x86-64 버전에 사용할 수 있으며 install.sh 또는 install.bat를 실행하여 설치할 수 있습니다. 스크립트를 다운로드합니다
기기 다시 시작하기
Edge TPU 런타임이 설치되면 기기를 다시 시작하여 설치 프로그램이 추가한 새로운 Coral Udev 규칙을 활성화합니다.
Calal 기기가 감지되었는지 확인
Coral 기기가 감지되고 작동하는지 확인하려면 coral-tflite-delegate 패키지의 통합 테스트를 실행합니다. 이 패키지는 저장소의 루트 디렉터리에 있습니다. 통합 테스트를 실행하려면 Coral 액셀러레이터를 연결하고 패키지 디렉터리에서 다음 명령어를 실행합니다.
npx yarn
npx yarn build-deps
npx yarn test-integration
다음과 같은 출력이 표시됩니다.
yarn run v1.22.17
$ yarn build && yarn test-integration-dev
$ tsc
$ jasmine --config=jasmine-integration.json
Platform node has already been set. Overwriting the platform with node.
Randomized with seed 78904
Started
============================
Hi there 👋. Looks like you are running TensorFlow.js in Node.js. To speed things up dramatically, install our node backend, which binds to TensorFlow C++, by running npm i @tensorflow/tfjs-node, or npm i @tensorflow/tfjs-node-gpu if you have CUDA. Then call require('@tensorflow/tfjs-node'); (-gpu suffix for CUDA) at the start of your program. Visit https://github.com/tensorflow/tfjs-node for more details.
============================
WARNING: converting 'int32' to 'uint8'
.
1 spec, 0 failures
Finished in 2.777 seconds
Randomized with seed 78904 (jasmine --random=true --seed=78904)
Done in 6.36s.
TFLite에서 모델을 실행하므로 로그에서 언급된 대로 @tensorflow/tfjs-node,를 설치할 필요가 없습니다.
대신 출력에 Encountered unresolved custom op: edgetpu-custom-op가 포함되어 있으면 Coral 기기가 감지되지 않은 것입니다. Edge TPU 런타임 라이브러리를 설치하고 Coral 기기를 컴퓨터에 연결했는지 확인합니다. Coral의 시작 가이드에 따라 Python 버전의 Coral 바인딩을 테스트할 수도 있습니다. Python 버전이 작동하지만 이 테스트가 여전히 실패하는 경우 버그 신고서를 제출하여 알려주세요.
시작 코드 실행
이제 시작 코드를 실행할 준비가 되었습니다. 시작하려면 다음 단계를 따르세요.
tfjs-tflite-node-codelab디렉터리 아래의starter_code디렉터리로 이동합니다.npm install를 실행하여 종속 항목을 설치합니다.npm start를 실행하여 프로젝트를 실행합니다. 컴퓨터 웹캠에서 동영상 피드를 표시하는 앱이 열립니다.
시작 지점
시작점은 이 Codelab을 위해 설계된 기본 Electron 카메라 앱입니다. Codelab의 개념을 보여주기 위해 코드를 단순화했으며 오류 처리는 거의 없습니다. 프로덕션 앱에서 코드를 재사용하도록 하려면 오류를 처리하고 모든 코드를 완전히 테스트해야 합니다.
시작 코드 탐색
이 시작 코드에 많은 파일이 있지만 수정해야 하는 파일은 renderer.js뿐입니다. 동영상 피드, HTML 요소 등 페이지에 표시되는 내용을 관리하며 앱에 머신러닝 모델을 추가합니다. 다른 파일 중에 index.html 파일이 있지만 renderer.js 파일만 로드하면 됩니다. main.js 파일도 있는 Electron의 진입점입니다. 앱을 열 때 표시할 항목과 닫을 때 실행할 작업을 비롯하여 앱의 수명 주기를 제어하지만 변경할 필요는 없습니다.
디버거 열기
이 Codelab을 따를 때 앱을 디버그해야 할 수도 있습니다. 이 앱은 Electron을 기반으로 하므로 Chrome 디버거가 내장되어 있습니다. 대부분의 플랫폼에서 Ctrl + Shift + i를 사용하여 열 수 있습니다. 콘솔 탭을 클릭하여 앱의 로그 및 오류 메시지를 확인합니다.
살펴볼 내용은 많지 않으므로, 이제 이미지 분류기를 학습시켜보겠습니다.
3. 이미지 분류기 학습
이 섹션에서는 커스텀 이미지 분류 모델의 TFLite 및 Coral 버전을 학습시킵니다.
분류기 학습
Image Classifier는 입력 이미지를 가져와 라벨에 할당합니다. 이 Codelab에서는 Teachable Machine을 사용하여 브라우저에서 모델을 학습시킵니다. 이 섹션의 학습 속도를 높이려면 Raspberry Pi 대신 데스크톱이나 노트북 컴퓨터를 사용하면 되지만 결과 파일을 Pi에 복사해야 합니다.
이제 모델을 학습시킬 준비가 되었습니다. 어떤 유형의 모델을 학습시킬지 잘 모르겠다면 손쉽게 학습할 수 있는 모델은 사람이 프레임 안에 있는지 감지하기 위한 사람 감지기입니다.
- 새 탭에서 Teachable Machine 교육 페이지를 엽니다.
- 이미지 프로젝트를 선택한 다음 표준 이미지 모델을 선택합니다.
- 각 수업의 이미지 샘플을 추가합니다. 웹캠 입력을 사용하는 것이 가장 쉽습니다. 클래스 이름을 변경할 수도 있습니다.
- 각 수업에 충분한 데이터를 수집했다면 (일반적으로 50개 샘플이면) 모델 학습을 누릅니다.
모델 학습이 끝나면 모델 출력의 미리보기가 표시됩니다.
모델에 다른 값을 입력해 보세요. 잘못 분류된 입력을 발견하면 학습 데이터에 추가하고 모델을 다시 학습시키세요.
- 모델의 정확성에 만족하면 모델 내보내기를 클릭합니다. 모델의 두 가지 버전을 별도로 다운로드해야 합니다.
- 모델을 TensorFlow Lite 부동 소수점 모델로 내보냅니다. 그러면
converted_tflite.zip이라는 파일이 다운로드됩니다. 설치해야 합니다 - 모델을 TensorFlow Lite Edge TPU 모델로 내보냅니다. Coral Edge TPU에서 실행되는
converted_edgetpu.zip라는 파일이 다운로드됩니다.
4. 앱에서 CPU 모델 실행
모델을 학습시켰으므로 이제 앱에 추가할 차례입니다. 이 섹션이 끝나면 앱에서 기기의 CPU를 사용하여 모델을 실행할 수 있게 됩니다.
앱에 모델 파일 추가
분류기를 학습시킬 때 다운로드한 converted_tflite.zip 모델 파일의 압축을 풉니다. 보관 파일에는 파일이 두 개 있습니다. model_uquant.tflite은 모델 그래프 및 가중치를 포함하여 저장된 TFLite 모델입니다. labels.txt는 모델이 예측하는 클래스의 사람이 읽을 수 있는 라벨을 포함합니다. 두 파일을 모두 modeldirectory에 배치합니다.
설치 종속 항목
모델을 로드하고 입력을 사전 처리하려면 TensorFlow.js의 몇 가지 종속 항목이 필요합니다.
tfjs-tflite-node: Node.js에서 TFLite 모델을 실행하기 위한 TensorFlow.js의 패키지@tensorflow/tfjs: TensorFlow.js의 기본 패키지입니다.
@tensorflow/tfjs가 이미 설치되어 있지만 다음 명령어로 tfjs-tflite-node를 설치해야 합니다.
npm install --save tfjs-tflite-node
설치가 완료되면 renderer.js의 상단에 앱에 추가합니다.
CodelabB 1부: tfjs-tflite-node 가져오기
const {loadTFLiteModel} = require('tfjs-tflite-node');
모델 로드
이제 모델을 로드할 준비가 되었습니다. tfjs-tflite-node에서 이 작업을 위해 loadTFLiteModel 함수를 제공합니다. 파일 경로, ArrayBuffer 또는 TFHub URL에서 모델을 로드할 수 있습니다. 모델과 가중치를 로드하려면 main 함수에 다음을 추가합니다.
const modelPath = './model/model_unquant.tflite';
const model = await loadTFLiteModel(modelPath);
const labels = fs.readFileSync('./model/labels.txt', 'utf8')
.split('\n');
모델 실행
모델을 실행하려면 3단계를 수행합니다. 먼저 웹캠에서 입력 프레임을 가져와 사전 처리합니다. 그런 다음 프레임에서 모델을 실행하고 예측을 가져옵니다. 그런 다음 페이지에 예상 검색어를 표시합니다.
웹캠 입력 전처리
현재 웹캠은 HTML 요소일 뿐이며, 표시되는 프레임은 자바스크립트 renderer.js 파일에 사용할 수 없습니다. 웹캠에서 프레임을 가져오기 위해 TensorFlow.js는 카메라에서 프레임을 캡처할 수 있는 사용하기 쉬운 capture() 메서드를 제공하는 tf.data.webcam을 제공합니다.
사용하려면 다음 설정 코드를 main()에 추가하세요.
Codelab 1부: 여기에서 tf.data.webcam 설정
const tensorCam = await tf.data.webcam(webcam);
그런 다음 이미지를 프레임마다 캡처하려면 run()에 다음을 추가합니다.
CodelabB 1부: 여기에서 웹캠 프레임을 캡처합니다.
const image = await tensorCam.capture();
또한 모델과 호환되도록 각 프레임을 전처리해야 합니다. 이 Codelab에서 사용하는 모델은 입력 모양이 [1, 224, 224, 3]이므로 224 x 224픽셀 RGB 이미지를 사용합니다. tensorCam.capture()는 [224, 224, 3]의 셰이프를 제공하므로 tf.expandDims를 사용하여 텐서 앞에 차원을 추가해야 합니다. 또한 CPU 모델은 -1과 1 사이의 Float32 입력을 예상하지만 웹캠이 0에서 255 사이의 값을 캡처합니다. 입력 텐서를 127로 나누어 범위를 [0, 255] 에서 [0, ~2] 로 변경한 다음 1을 빼고 원하는 범위 [-1, ~1]을 얻습니다. run() 함수의 tf.tidy()에 다음 줄을 추가하여 다음 작업을 수행합니다.
CodelabB 1부: 여기에서 웹캠 프레임을 사전 처리합니다.
const expanded = tf.expandDims(image, 0);
const divided = tf.div(expanded, tf.scalar(127));
const normalized = tf.sub(divided, tf.scalar(1));
텐서를 사용한 후에는 폐기해야 합니다. tf.tidy()는 콜백에 포함된 코드에 자동으로 이 작업을 수행하지만 비동기 함수는 지원하지 않습니다. 이전에 만든 이미지 텐서를 dispose() 메서드를 호출하여 수동으로 폐기해야 합니다.
CodelabB 1부: 여기에서 웹캠 프레임을 폐기합니다.
image.dispose();
모델 실행 및 결과 표시
전처리된 입력에서 모델을 실행하려면 정규화된 텐서에서 model.predict()을 호출합니다. 이 함수는 각 라벨의 예측 확률을 포함하는 1차원 텐서를 반환합니다. 이 확률에 100을 곱하면 각 라벨의 비율 확률을 얻고 시작 코드에 포함된 showPrediction 함수를 사용하여 화면에 모델의 예측을 표시합니다.
또한 이 코드는 stats.js를 사용하여 stats.begin 주위와 stats.end에서 model.predict를 호출하여 호출을 실행하는 데 걸리는 시간을 측정합니다.
CodelabB 1부: 여기에 모델을 실행하고 결과를 표시합니다.
stats.begin();
const prediction = model.predict(normalized);
stats.end();
const percentage = tf.mul(prediction, tf.scalar(100));
showPrediction(percentage.dataSync(), labels);
yarn start로 앱을 다시 실행하면 모델에서 분류가 표시됩니다.
성능
현재 설정되어 있으므로 모델이 CPU에서 실행됩니다. 데스크톱 컴퓨터와 대부분의 노트북에서는 문제가 되지 않지만, Raspberry Pi 또는 다른 저전력 기기에서 실행하는 경우에는 적합하지 않을 수 있습니다. Raspberry Pi 4에서는 약 10FPS를 볼 수 있지만 일부 애플리케이션에서는 속도가 빠르지 않을 수 있습니다. 더 빠른 머신을 사용하지 않고 성능을 높이려면 Coral Edge TPU의 형태로 애플리케이션별 실리콘을 사용하면 됩니다.
5 앱에서 Coral 모델 실행
Coral 기기가 없다면 이 섹션을 건너뛰어도 됩니다.
이 Codelab에서는 이전 섹션에서 작성한 코드를 기반으로 하지만 깔끔한 슬레이트로 시작하려는 경우 cpu_inference_working 체크포인트를 대신 사용할 수 있습니다.
Coral 모델을 실행하는 단계는 CPU 모델을 실행하는 단계와 거의 동일합니다. 주요 차이점은 모델 형식입니다. Coral은 uint8 텐서만 지원하므로 모델을 양자화합니다. 모델에 전달된 입력 텐서와 출력 출력 텐서에 영향을 미칩니다. 또 다른 차이점은 Coral TPU에서 실행하려면 Edge TPU 컴파일러를 사용하여 모델을 컴파일해야 한다는 점입니다. TeachableMachine이 이 단계를 이미 완료했지만 Coral 문서를 방문하여 다른 모델에서 이 작업을 실행하는 방법을 알아볼 수 있습니다.
앱에 Coral 모델 파일 추가
분류기를 학습시킬 때 다운로드한 converted_edgetpu.zip 모델 파일의 압축을 풉니다. 보관 파일에는 두 개의 파일이 포함되어 있습니다. model_edgetpu.tflite은 모델 그래프 및 가중치를 포함하여 저장된 TFLite 모델입니다. labels.txt는 모델이 예측하는 클래스의 사람이 읽을 수 있는 라벨을 포함합니다. 모델 파일을 coral_model 디렉터리에 배치합니다.
설치 종속 항목
Coral 모델을 실행하려면 Edge TPU 런타임 라이브러리가 필요합니다. 계속하기 전에 설치 안내에 따라 설치했는지 확인하세요.
산호 기기는 TFLite 대리자로 액세스합니다. 자바스크립트에서 이러한 패키지에 액세스하려면 coral-tflite-Delegate 패키지를 설치합니다.
npm install --save coral-tflite-delegate
그런 다음 renderer.js 파일의 상단에 다음 행을 추가하여 대리자를 가져옵니다.
const {CoralDelegate} = require('coral-tflite-delegate');
모델 로드
이제 Coral 모델을 로드할 준비가 되었습니다. CPU 모델과 같은 방식으로 삭제합니다. 단, Coral 위임을 로드하는 옵션을 loadTFLiteModel 함수에 전달합니다.
const coralModelPath = './coral_model/model_edgetpu.tflite';
const options = {delegates: [new CoralDelegate()]};
const coralModel = await loadTFLiteModel(coralModelPath, options);
라벨은 CPU 모델과 동일하므로 로드할 필요가 없습니다.
CPU와 Coral 간에 전환하는 버튼 추가
Coral 모델을 마지막 섹션에서 추가한 CPU 모델과 함께 추가합니다. 두 메서드를 동시에 실행하면 성능 차이를 확인하기가 어려워지므로 전환 버튼이 Coral과 CPU 실행 간에 전환됩니다.
다음 코드를 사용하여 버튼을 추가합니다.
let useCoralDelegate = false;
const toggleCoralButton = document.createElement('button');
function toggleCoral() {
useCoralDelegate = !useCoralDelegate;
toggleCoralButton.innerText = useCoralDelegate
? 'Using Coral. Press to switch to CPU.'
: 'Using CPU. Press to switch to Coral.';
}
toggleCoralButton.addEventListener('click', toggleCoral);
toggleCoral();
document.body.appendChild(toggleCoralButton);
run() 함수에서 이 조건을 연결해보겠습니다. useCoralDelegate이 false이면 CPU 버전을 실행해야 합니다. 그렇지 않으면 Coral 버전을 실행합니다. 지금은 아무 작업도 하지 않습니다. if 문에서 CPU 모델을 실행하지 않도록 코드를 래핑합니다. expanded 텐서는 Coral 모델에서 사용되므로 if 문에서 생략됩니다.
Codelab 2부: 여기에서 대리인 사용 여부를 확인합니다.
// NOTE: Don't just copy-paste this code into the app.
// You'll need to edit the code from the CPU section.
const expanded = tf.expandDims(image, 0);
if (useCoralDelegate) {
// CODELAB part 2: Run Coral prediction here.
} else {
const divided = tf.div(expanded, tf.scalar(127));
const normalized = tf.sub(divided, tf.scalar(1));
stats.begin();
const prediction = model.predict(normalized);
stats.end();
const percentage = tf.mul(prediction, tf.scalar(100));
showPrediction(percentage.dataSync(), labels);
}
모델 실행
Coral 버전의 모델은 0~255개의 uint8 텐서를 예상하므로 입력을 정규화할 필요가 없습니다. 그러나 출력은 0~255 범위의 uint8 텐서이기도 합니다. 표시하기 전에 0에서 100 사이의 부동 소수점 수로 변환해야 합니다.
Codelab 2부: 여기에서 Coral 예측을 실행합니다. (위 코드 스니펫의 일부입니다.)
stats.begin();
const prediction = coralModel.predict(expanded);
stats.end();
const percentage = tf.div(tf.mul(prediction, tf.scalar(100)), tf.scalar(255));
showPrediction(percentage.dataSync(), labels);
yarn start로 앱을 다시 실행하면 Coral 액셀러레이터에서 분류가 표시됩니다.
버튼을 눌러 Coral 및 CPU 추론 간에 전환할 수 있습니다. Coral 모델의 신뢰도 순위는 CPU 모델의 신뢰도 순위보다 낮고, 보통 소수점 이하 자릿수로 끝납니다. 정밀도 손실은 Coral에서 양자화 모델을 실행하는 것을 상쇄합니다. 실제로 실제로는 중요하지 않지만 유의해야 할 사항이 있습니다.
실적 관련 참고사항
표시되는 프레임 속도에는 전처리 및 후처리가 포함되어 있으므로 Coral 하드웨어가 지원하는 기능을 나타내는 것은 아닙니다. FPS 측정기를 클릭하면 지연 시간 (밀리초)이 표시될 때까지 FPS 측정기를 클릭하면 model.predict에 대한 호출만 측정하므로 성능을 보다 정확하게 파악할 수 있습니다. 하지만 텐서를 TFLite 네이티브 C 결합으로 이동한 다음 Coral 기기로 이동하는 데 걸리는 시간이 여전히 포함되므로 완벽한 측정 방법은 아닙니다. C++로 작성된 더 정확한 성능 벤치마크는 EdgeTPU 벤치마크 페이지를 참고하세요.
또한 동영상이 Raspberry Pi 대신 노트북에서 녹화되었으므로 다른 FPS가 표시될 수 있습니다.
Coral 사전 처리 속도 향상
경우에 따라 TFJS 백엔드를 전환하여 사전 처리 속도를 높일 수 있습니다. 기본 백엔드는 WebGL으로, 병렬화 가능한 대규모 작업에 적합하지만 이 앱은 사전 처리 단계에서 별다른 작업을 하지 않습니다. 이 작업의 유일한 작업expandDims )이 있습니다. 파일 상단에서 가져오기가 실행된 후에 다음 줄을 추가하여 GPU에서 주고받는 텐서의 추가 지연 시간을 방지하기 위해 CPU 백엔드로 전환할 수 있습니다.
tf.setBackend(‘cpu');
이는 동시에 로드되는 TFLite CPU 모델의 전처리에도 영향을 주므로, 이번 변경으로 모델이 훨씬 더 느리게 실행됩니다.
6. WebNN으로 CPU 모델 가속화
Coral 액셀러레이터가 없거나 모델의 속도를 향상할 다른 방법을 시도하려는 경우 WebNN TFLite 대리자를 사용할 수 있습니다. 이 대리자는 Intel 프로세서에 내장된 머신러닝 하드웨어를 사용하여 OpenVINO 툴킷으로 모델 추론을 가속화합니다. 따라서 이 Codelab의 설정 섹션에서 다루지 않은 추가 요구사항이 있으며 OpenVINO 툴킷을 설치해야 합니다. 진행하기 전에 지원되는 대상 시스템 플랫폼과 비교하여 설정을 확인해야 합니다. 그러나 WebNN 위임은 아직 macOS를 지원하지 않습니다.
OpenVINO 툴킷 설치
OpenVINO 툴킷은 Intel 프로세서에 내장된 머신러닝 하드웨어를 사용하여 모델을 가속화합니다. Intel에서 사전 컴파일된 버전을 다운로드하거나 소스에서 빌드할 수 있습니다. OpenVINO를 설치하는 방법에는 여러 가지가 있지만 이 Codelab에서는 Windows나 Linux용 설치 프로그램 스크립트를 사용하는 것이 좋습니다. 2021.4.2 LTS 런타임 버전은 설치해야 합니다. 다른 버전이 호환되지 않을 수 있기 때문입니다. 설치 프로그램을 실행한 후 Linux 또는 Windows ( 영구적 솔루션) 설치 안내에 따라 셸의 환경 변수를 구성해야 합니다. 또는 webnn-tflite-delegate 디렉터리에 있는 setupvars.sh (Linux) 또는 setupvars.bat (Windows) 명령어를 실행하여 삭제할 수 있습니다.
WebNN Delegate가 작동하는지 확인
WebNN 대리자가 올바르게 작동하는지 확인하려면 저장소의 루트 디렉터리에 있는 webnn-tflite-delegate 패키지의 통합 테스트를 실행합니다. 통합 테스트를 실행하려면 패키지 디렉터리에서 다음 명령어를 실행합니다.
# In webnn-tflite-delegate/
npx yarn
npx yarn test-integration
다음과 같은 출력이 표시됩니다.
WebNN delegate: WebNN device set to 0.
INFO: Created TensorFlow Lite WebNN delegate for device Default and power Default.
============================
Hi there 👋. Looks like you are running TensorFlow.js in Node.js. To speed things up dramatically, install our node backend, which binds to TensorFlow C++, by running npm i @tensorflow/tfjs-node, or npm i @tensorflow/tfjs-node-gpu if you have CUDA. Then call require('@tensorflow/tfjs-node'); (-gpu suffix for CUDA) at the start of your program. Visit https://github.com/tensorflow/tfjs-node for more details.
============================
label: wine bottle
score: 0.934505045413971
.
1 spec, 0 failures
Finished in 0.446 seconds
Randomized with seed 58441 (jasmine --random=true --seed=58441)
Done in 8.07s.
다음과 같은 출력이 표시되면 구성 오류를 나타냅니다.
Platform node has already been set. Overwriting the platform with node.
Randomized with seed 05938
Started
error Command failed with exit code 3221225477.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
이 출력은 OpenVINO의 환경 변수를 설정하지 않았음을 의미합니다. 우선 setupvars.sh (Linux) 또는 setupvars.bat (Windows) 명령어를 실행하여 이를 설정할 수 있지만, Linux 또는 Windows ( 영구적 솔루션) 안내 Windows를 사용하는 경우 이
setupvars.bat
명령어는 Git bash를 지원하지 않으므로 Windows 명령어 프롬프트에서 이 Codelab과 다른 Codelab의 명령어를 실행해야 합니다.
WebNN 위임 설치하기
OpenVINO가 설치되었으면 WebNN을 사용하여 CPU 모델을 가속화할 준비가 되었습니다. Codelab의 이 섹션에서는 '앱에서 CPU 모델 실행' 섹션에서 작성한 코드를 기반으로 합니다. 이 단계에서 작성한 코드를 사용할 수는 있지만 이미 Coral 섹션을 완료한 경우 cpu_inference_working 체크포인트를 대신 사용하여 깔끔한 슬레이트로 시작합니다.
WebNN 위임의 Node.js 부분은 npmjs에 배포됩니다. 설치하려면 다음 명령어를 실행합니다.
npm install --save webnn-tflite-delegate
그런 다음 renderer.js 파일의 상단에 다음 행을 추가하여 대리자를 가져옵니다.
const {WebNNDelegate, WebNNDevice} = require('webnn-tflite-delegate');
WebNN 대리자는 CPU 또는 GPU에서 실행을 지원합니다. WebNNDevice를 사용하면 사용할 유형을 선택할 수 있습니다.
모델 로드
이제 WebNN 위임이 사용 설정된 상태로 모델을 로드할 준비가 되었습니다. Coral의 경우 다른 모델 파일을 로드해야 했지만 WebNN은 TFLite와 동일한 모델 형식을 지원합니다. 모델에 전달된 대리자 목록에 WebNNDelegate를 추가하여 사용 설정합니다.
let webnnModel = await loadTFLiteModel(modelPath, {
delegates: [new WebNNDelegate({webnnDevice: WebNNDevice.DEFAULT})],
});
이 모델은 동일한 모델이기 때문에 라벨을 다시 로드할 필요가 없습니다.
TfLite CPU 및 WebNN 간에 전환하는 버튼 추가
이제 WebWeb 모델의 모델이 준비되었으므로 WebNN과 TfLite CPU 추론 간에 전환하는 버튼을 추가합니다. 두 기능을 동시에 사용하면 성능 차이를 확인하기가 어렵습니다.
다음 코드로 버튼을 추가합니다 (아직 모델을 전환하지는 않음).
let useWebNNDelegate = false;
const divElem = document.createElement('div');
const toggleWebNNButton = document.createElement('button');
function toggleWebNN() {
useWebNNDelegate = !useWebNNDelegate;
toggleWebNNButton.innerHTML = useWebNNDelegate
? 'Using WebNN. Press to switch to TFLite CPU.'
: 'Using TFLite CPU. Press to switch to WebNN.';
divElem.hidden = useWebNNDelegate ? false : true;
}
toggleWebNNButton.addEventListener('click', toggleWebNN);
toggleWebNN();
document.body.appendChild(toggleWebNNButton);
document.body.appendChild(divElem);
이 코드는 다음 섹션에서 WebNN 설정을 구성하는 데 사용하는 div 요소도 추가합니다.
WebNN 기기 간에 전환하기 위한 드롭다운 추가하기
WebNN은 CPU 및 GPU에서 실행을 지원하므로 드롭다운 간에 추가하여 전환을 전환합니다. 버튼을 만드는 코드 뒤에 다음 코드를 추가합니다.
// Create elements for WebNN device selection
divElem.innerHTML = '<br/>WebNN Device: ';
const selectElem = document.createElement('select');
divElem.appendChild(selectElem);
const webnnDevices = ['Default', 'GPU', 'CPU'];
// append the options
for (let i = 0; i < webnnDevices.length; i++) {
var optionElem = document.createElement('option');
optionElem.value = i;
optionElem.text = webnnDevices[i];
selectElem.appendChild(optionElem);
}
이제 앱을 실행하면 기본값, GPU, CPU가 나열된 드롭다운이 표시됩니다. 드롭다운이 아직 연결되지 않았으므로 둘 중 하나를 선택하면 아무 효과가 없습니다. 
걸음
드롭다운에서 기기를 변경합니다.
사용 중인 WebNN 기기가 변경되도록 드롭다운을 연결하여 드롭다운 선택기 요소의 change 이벤트에 리스너를 추가합니다. 선택한 값이 변경되면 위임 옵션에서 해당 WebNN 기기를 선택한 상태로 WebNN 모델을 다시 만듭니다.
드롭다운을 추가한 코드 뒤에 다음 코드를 추가합니다.
selectElem.addEventListener('change', async () => {
let webnnDevice;
switch(selectElem.value) {
case '1':
webnnDevice = WebNNDevice.GPU;
break;
case '2':
webnnDevice = WebNNDevice.CPU;
break;
default:
webnnDevice = WebNNDevice.DEFAULT;
break;
}
webnnModel = await loadTFLiteModel(modelPath, {
delegates: [new WebNNDelegate({webnnDevice})],
});
});
이번 변경으로 드롭다운이 변경될 때마다 올바른 설정으로 드롭다운에 새 모델이 생성됩니다. 이제 WebNN 모델을 연결하고 추론에 사용할 차례입니다.
WebNN 모델 실행
WebNN 모델을 사용할 준비가 되었지만 WebNN과 TfLite CPU 간에 전환하는 버튼은 아직 모델을 전환하지 않았습니다. 모델을 전환하려면 먼저 Codelab의 첫 번째 섹션에서 TfLite CPU 모델을 로드할 때부터 model 변수의 이름을 변경해야 합니다.
다음 줄을 변경합니다.
const model = await loadTFLiteModel(modelPath);
...이 행과 일치하도록
const cpuModel = await loadTFLiteModel(modelPath);
model 변수의 이름을 cpuModel로 지정하여 run 함수에 추가하여 버튼의 상태에 따라 올바른 모델을 선택합니다.
Codelab 2부: 여기에서 대리인 사용 여부를 확인합니다.
let model;
if (useWebNNDelegate) {
model = webnnModel;
} else {
model = cpuModel;
}
이제 앱을 실행하면 버튼이 TfLite CPU와 WebNN 간에 전환됩니다. 
걸음
Intel GPU가 통합된 경우 WebNN CPU와 GPU 추론 간에 전환할 수도 있습니다.
실적 관련 참고사항
표시되는 프레임 속도에는 전처리 및 후처리가 포함되어 있으므로 WebNN의 기능을 나타내지 않습니다. FPS 측정기를 클릭하면 지연 시간 (밀리초)이 표시될 때까지 FPS 측정기를 클릭하면 model.predict에 대한 호출만 측정하므로 성능을 보다 정확하게 파악할 수 있습니다. 하지만 텐서를 TFLite 네이티브 C 결합으로 이동하는 데 걸리는 시간이 여전히 포함되므로 완벽한 측정 방법은 아닙니다.
7 축하합니다
축하합니다. Electron에서 tfjs-tflite-node를 사용해 첫 번째 Coral / WebNN 프로젝트를 완료했습니다.
사용해 보고 다양한 이미지에서 테스트해 보세요. 또한 TeachableMachine에서 새 모델을 학습시켜 완전히 다른 항목을 분류할 수도 있습니다.
요약
이 Codelab에서 배운 내용은 다음과 같습니다.
- tfjs-tflite-node npm 패키지를 설치하고 설정하여 Node.js에서 TFLite 모델을 실행합니다.
- Edge TPU 런타임 라이브러리를 설치하여 Coral 기기에서 모델을 실행하는 방법
- Coral Edge TPU를 사용하여 모델 추론을 가속화하는 방법
- WebNN을 사용하여 모델 추론을 가속화하는 방법
다음 단계
작업을 시작할 준비가 되었다면 이 머신러닝 모델 실행기를 작업 중인 실제 사용 사례로 확장하기 위해 어떤 창의적인 아이디어를 생각해 낼 수 있을까요? 내가 일하는 업계에 빠르고 합리적인 추론을 통해 혁신을 가능케 하거나 토스터를 수정하여 빵이 올바르면 토스트를 멈출 수도 있습니다. 가능성은 무한합니다.
더 나아가 TeachableMachine이 사용한 모델을 학습시킨 방법을 자세히 알아보려면 전이 학습에 관한 Codelab을 확인하세요. 음성 인식 및 포즈 추정과 같이 Coral과 호환되는 다른 모델을 찾고 있다면 coral.ai/models를 살펴보세요. TensorFlow Hub에서 이러한 모델과 다른 많은 모델의 CPU 버전을 찾을 수도 있습니다.
결과물 공유
오늘날의 창의적인 작업을 다른 창작 사례에 손쉽게 적용할 수 있습니다. 기존과는 달리 사고를 멈추고 계속 해킹하는 것이 좋습니다.
잊지 말고 소셜 미디어에서#MadeWithTFJS 프로젝트가 Google에서 추천될 수 있는 해시태그TensorFlow 블로그 심지어향후 일정 가 있는지 진단합니다. 여러분의 의견을 기다리겠습니다.