1. Zanim zaczniesz
Uczenie maszynowe to obecnie bardzo popularne hasło. Jego zastosowania wydają się nieograniczone i w niedalekiej przyszłości może on mieć wpływ na niemal każdą branżę. Jeśli pracujesz jako inżynier lub projektant, zajmujesz się front-endem lub back-endem i znasz JavaScript, to ćwiczenie z programowania pomoże Ci zacząć dodawać uczenie maszynowe do swoich umiejętności.
Wymagania wstępne
Te warsztaty zostały przygotowane z myślą o doświadczonych inżynierach, którzy znają już JavaScript.
Co utworzysz
W tym ćwiczeniu:
- Utwórz stronę internetową, która korzysta z uczenia maszynowego bezpośrednio w przeglądarce za pomocą TensorFlow.js, aby klasyfikować i wykrywać typowe obiekty (tak, w tym więcej niż jeden naraz) z transmisji na żywo z kamery internetowej.
- Ulepsz zwykłą kamerę internetową, aby rozpoznawała obiekty i uzyskiwała współrzędne ramki ograniczającej każdego znalezionego obiektu.
- Wyróżnij znaleziony obiekt w strumieniu wideo, jak pokazano poniżej:
Wyobraź sobie, że możesz wykryć, czy dana osoba jest na filmie, a potem policzyć, ile osób było obecnych w danym momencie, aby oszacować, jak bardzo ruchliwy był dany obszar w ciągu dnia. Możesz też otrzymywać alerty, gdy Twój pies zostanie wykryty w pomieszczeniu w domu, w którym nie powinien przebywać, gdy jesteś poza domem. Jeśli Ci się to uda, będziesz na dobrej drodze do stworzenia własnej wersji kamery Google Nest, która będzie Cię powiadamiać, gdy wykryje intruza (dowolnego typu) przy użyciu własnego sprzętu. Całkiem fajnie. Czy to trudne? Nie. Zaczynamy hakowanie…
Czego się nauczysz
- Jak wczytać wstępnie wytrenowany model TensorFlow.js.
- Jak pobrać dane z transmisji na żywo z kamery internetowej i narysować je na płótnie.
- Jak sklasyfikować klatkę obrazu, aby znaleźć ramki ograniczające dowolne obiekty, które model został wytrenowany do rozpoznawania.
- Jak używać danych przekazywanych z modelu do wyróżniania znalezionych obiektów.
W tym ćwiczeniu skupimy się na tym, jak zacząć korzystać z wstępnie wytrenowanych modeli TensorFlow.js. Koncepcje i bloki kodu, które nie są istotne w przypadku TensorFlow.js i uczenia maszynowego, nie są wyjaśniane. Można je po prostu skopiować i wkleić.
2. Czym jest TensorFlow.js?
TensorFlow.js to biblioteka uczenia maszynowego typu open source, która może działać wszędzie tam, gdzie JavaScript. Jest ona oparta na oryginalnej bibliotece TensorFlow napisanej w Pythonie i ma na celu odtworzenie środowiska deweloperskiego i zestawu interfejsów API dla ekosystemu JavaScript.
Gdzie można jej używać?
Dzięki przenośności JavaScript możesz teraz pisać w 1 języku i z łatwością korzystać z uczenia maszynowego na wszystkich tych platformach:
- Po stronie klienta w przeglądarce przy użyciu czystego JavaScriptu.
- po stronie serwera, a nawet na urządzeniach IoT, takich jak Raspberry Pi, przy użyciu Node.js;
- Aplikacje na komputery korzystające z Electrona
- natywnych aplikacji mobilnych korzystających z React Native,
TensorFlow.js obsługuje też wiele backendów w każdym z tych środowisk (rzeczywiste środowiska sprzętowe, w których może działać, np. procesor lub WebGL). „Backend” w tym kontekście nie oznacza środowiska po stronie serwera – backend do wykonywania może być np. po stronie klienta w WebGL, aby zapewnić zgodność i szybkie działanie. Obecnie TensorFlow.js obsługuje:
- Wykonywanie WebGL na karcie graficznej urządzenia (GPU) – to najszybszy sposób wykonywania większych modeli (o rozmiarze powyżej 3 MB) z akceleracją GPU.
- Wykonywanie kodu Web Assembly (WASM) na procesorze – aby zwiększyć wydajność procesora na różnych urządzeniach, np. na starszych telefonach komórkowych. Jest to lepsze rozwiązanie w przypadku mniejszych modeli (o rozmiarze poniżej 3 MB), które mogą działać szybciej na procesorze z użyciem WASM niż z użyciem WebGL ze względu na narzut związany z przesyłaniem treści do procesora graficznego.
- Wykonywanie na procesorze – to rozwiązanie rezerwowe, gdy żadne inne środowisko nie jest dostępne. Jest to najwolniejsza z tych 3 metod, ale zawsze dostępna.
Uwaga: jeśli wiesz, na jakim urządzeniu będzie wykonywany kod, możesz wymusić użycie jednego z tych backendów. Jeśli tego nie zrobisz, TensorFlow.js sam podejmie decyzję.
Supermoce po stronie klienta
Uruchamianie TensorFlow.js w przeglądarce na komputerze klienckim może przynieść kilka korzyści, które warto wziąć pod uwagę.
Prywatność
Możesz trenować i klasyfikować dane na urządzeniu klienta bez wysyłania ich na serwer WWW strony trzeciej. Może to być wymagane w celu zachowania zgodności z lokalnymi przepisami, np. z RODO, lub podczas przetwarzania danych, które użytkownik chce przechowywać na swoim urządzeniu i nie wysyłać do osób trzecich.
Szybkość
Nie musisz wysyłać danych na serwer zdalny, więc wnioskowanie (czyli klasyfikowanie danych) może być szybsze. Co więcej, jeśli użytkownik przyzna Ci dostęp, będziesz mieć bezpośredni dostęp do czujników urządzenia, takich jak aparat, mikrofon, GPS, akcelerometr i inne.
Zasięg i skala
Każda osoba na świecie może jednym kliknięciem otworzyć wysłany przez Ciebie link, otworzyć stronę internetową w przeglądarce i skorzystać z Twojej pracy. Nie musisz przeprowadzać złożonej konfiguracji serwera z systemem Linux, sterownikami CUDA i wieloma innymi elementami, aby korzystać z systemu uczenia maszynowego.
Koszt
Brak serwerów oznacza, że musisz płacić tylko za CDN do hostowania plików HTML, CSS, JS i modeli. Koszt sieci CDN jest znacznie niższy niż utrzymywanie serwera (potencjalnie z dołączoną kartą graficzną) działającego przez całą dobę.
Funkcje po stronie serwera
Korzystanie z implementacji TensorFlow.js w Node.js umożliwia korzystanie z tych funkcji:
Pełna obsługa CUDA
Po stronie serwera, aby przyspieszyć działanie karty graficznej, musisz zainstalować sterowniki NVIDIA CUDA, aby umożliwić TensorFlow współpracę z kartą graficzną (w przeciwieństwie do przeglądarki, która korzysta z WebGL – nie wymaga instalacji). Pełna obsługa CUDA pozwala jednak w pełni wykorzystać możliwości karty graficznej na niższym poziomie, co przekłada się na krótszy czas trenowania i wnioskowania. Wydajność jest porównywalna z implementacją TensorFlow w Pythonie, ponieważ obie korzystają z tego samego backendu w C++.
Rozmiar modelu
W przypadku najnowocześniejszych modeli z badań możesz pracować z bardzo dużymi modelami, które mogą mieć rozmiar nawet kilku gigabajtów. Obecnie nie można uruchamiać tych modeli w przeglądarce ze względu na ograniczenia dotyczące wykorzystania pamięci na kartę przeglądarki. Aby uruchamiać te większe modele, możesz używać Node.js na własnym serwerze o specyfikacji sprzętowej, która umożliwia wydajne działanie takiego modelu.
IOT
Node.js jest obsługiwany na popularnych komputerach jednopłytkowych, takich jak Raspberry Pi, co oznacza, że możesz na nich uruchamiać modele TensorFlow.js.
Szybkość
Node.js jest napisany w JavaScript, co oznacza, że korzysta z kompilacji JIT. Oznacza to, że w przypadku korzystania z Node.js często można zauważyć wzrost wydajności, ponieważ jest on optymalizowany w czasie działania, zwłaszcza w przypadku wstępnego przetwarzania. Świetny przykład tego można znaleźć w tym studium przypadku, które pokazuje, jak Hugging Face wykorzystał Node.js, aby dwukrotnie zwiększyć wydajność swojego modelu przetwarzania języka naturalnego.
Znasz już podstawy TensorFlow.js, wiesz, gdzie można go używać i jakie są jego zalety. Zacznijmy więc robić z jego pomocą przydatne rzeczy.
3. Wytrenowane modele
TensorFlow.js udostępnia wiele wstępnie wytrenowanych modeli uczenia maszynowego. Te modele zostały wytrenowane przez zespół TensorFlow.js i zapakowane w łatwą w użyciu klasę. To świetny sposób na rozpoczęcie pracy z uczeniem maszynowym. Zamiast tworzyć i trenować model, aby rozwiązać problem, możesz zaimportować wstępnie wytrenowany model jako punkt wyjścia.
Na stronie TensorFlow.js Modele w JavaScript znajdziesz rosnącą listę łatwych w użyciu wstępnie wytrenowanych modeli. Istnieją też inne miejsca, w których można uzyskać przekonwertowane modele TensorFlow działające w TensorFlow.js, np. TensorFlow Hub.
Dlaczego warto używać wstępnie wytrenowanego modelu?
Korzystanie z popularnego wytrenowanego modelu, który pasuje do Twojego przypadku użycia, ma wiele zalet, m.in.:
- Nie musisz samodzielnie zbierać danych treningowych. Przygotowanie danych w odpowiednim formacie i oznaczenie ich etykietami, aby system uczący się mógł ich używać do uczenia się, może być bardzo czasochłonne i kosztowne.
- Możliwość szybkiego tworzenia prototypów pomysłów przy niższych kosztach i w krótszym czasie.
Nie ma sensu „odkrywać koła na nowo”, gdy wytrenowany model może wystarczyć do wykonania potrzebnych Ci zadań. Dzięki temu możesz skupić się na wykorzystaniu wiedzy dostarczonej przez model do realizacji swoich kreatywnych pomysłów. - Korzystanie z najnowszych badań. Wstępnie wytrenowane modele często bazują na popularnych badaniach, dzięki czemu możesz się z nimi zapoznać i sprawdzić ich skuteczność w rzeczywistych warunkach.
- Łatwość obsługi i obszerna dokumentacja. Ze względu na popularność takich modeli.
- Uczenie się przez transfer możliwości. Niektóre wstępnie wytrenowane modele oferują funkcje uczenia przez przeniesienie, które polega na przenoszeniu informacji uzyskanych w jednym zadaniu uczenia maszynowego do innego, podobnego zadania. Na przykład model, który pierwotnie został wytrenowany do rozpoznawania kotów, można wytrenować ponownie, aby rozpoznawał psy, jeśli dostarczysz mu nowe dane treningowe. Będzie to szybsze, ponieważ nie będziesz zaczynać od pustego płótna. Model może wykorzystać to, czego się już nauczył, aby rozpoznawać koty, a następnie rozpoznać nową rzecz – psy też mają oczy i uszy, więc jeśli model wie już, jak znaleźć te cechy, to jesteśmy w połowie drogi. Ponowne trenowanie modelu na własnych danych w znacznie szybszy sposób.
Czym jest COCO-SSD?
COCO-SSD to nazwa wstępnie wytrenowanego modelu ML do wykrywania obiektów, którego użyjesz w tym ćwiczeniu w Codelabs. Jego celem jest lokalizowanie i identyfikowanie wielu obiektów na jednym obrazie. Innymi słowy, może podać ramkę ograniczającą obiektów, które zostały wytrenowane do wyszukiwania, aby podać lokalizację tego obiektu na dowolnym obrazie. Przykład pokazano na obrazie poniżej:
Gdyby na powyższym obrazie było więcej niż 1 pies, otrzymasz współrzędne 2 ramek ograniczających, które opisują położenie każdego z nich. Model COCO-SSD został wstępnie wytrenowany do rozpoznawania 90 popularnych obiektów codziennego użytku, takich jak ludzie, samochody, koty itp.
Skąd wzięła się ta nazwa?
Nazwa może brzmieć dziwnie, ale pochodzi od 2 akronimów:
- COCO: oznacza, że model został wytrenowany na zbiorze danych COCO (Common Objects in Context), który jest dostępny bezpłatnie dla każdego, kto chce go pobrać i użyć do trenowania własnych modeli. Zbiór danych zawiera ponad 200 tys. oznaczonych etykietami obrazów,które można wykorzystać do uczenia się.
- SSD (Single Shot MultiBox Detection): odnosi się do części architektury modelu, która została użyta w jego implementacji. Nie musisz tego rozumieć, aby ukończyć ten kurs, ale jeśli chcesz dowiedzieć się więcej, tutaj znajdziesz więcej informacji o SSD.
4. Konfiguracja
Czego potrzebujesz
- nowoczesnej przeglądarki internetowej,
- Podstawowa znajomość HTML-a, CSS-a, JavaScriptu i narzędzi deweloperskich w Chrome (wyświetlanie danych wyjściowych konsoli).
Zaczynamy kodowanie
Utworzyliśmy szablony do rozpoczęcia pracy na platformach Glitch.com i Codepen.io. Możesz po prostu sklonować dowolny szablon jako stan podstawowy na potrzeby tego modułu za pomocą jednego kliknięcia.
W Glitch kliknij przycisk remix this, aby rozwidlić projekt i utworzyć nowy zestaw plików, które możesz edytować.
Możesz też kliknąć fork w prawym dolnym rogu ekranu w Codepen.
Ten bardzo prosty szkielet zawiera te pliki:
- Strona HTML (index.html)
- Arkusz stylów (style.css)
- Plik do zapisywania kodu JavaScript (script.js)
Dla Twojej wygody w pliku HTML dodano import biblioteki TensorFlow.js. Wygląda on następująco:
index.html
<!-- Import TensorFlow.js library -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs/dist/tf.min.js" type="text/javascript"></script>
Alternatywa: użyj ulubionego edytora internetowego lub pracuj lokalnie
Jeśli chcesz pobrać kod i pracować lokalnie lub w innym edytorze online, utwórz 3 pliki o podanych wyżej nazwach w tym samym katalogu, a następnie skopiuj i wklej do nich kod z naszego szablonu Glitch.
5. Wypełnianie szkieletu HTML
Wszystkie prototypy wymagają podstawowej struktury HTML. Użyjesz go później do renderowania danych wyjściowych modelu uczenia maszynowego. Skonfigurujmy to teraz:
- tytuł strony,
- Tekst opisu
- przycisk włączania kamery internetowej;
- tag wideo do renderowania strumienia z kamery internetowej;
Aby skonfigurować te funkcje, otwórz plik index.html i wklej w miejsce istniejącego kodu ten kod:
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>
Wyjaśnienie działania kodu
Zwróć uwagę na najważniejsze dodane elementy:
- Dodano tag
<h1>i kilka tagów<p>do nagłówka oraz informacje o tym, jak korzystać ze strony. Nic specjalnego.
Dodano też tag sekcji reprezentujący przestrzeń demonstracyjną:
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>
- Początkowo przypiszesz temu elementowi
sectionklasę „invisible”. Dzięki temu możesz wizualnie pokazać użytkownikowi, kiedy model jest gotowy i można bezpiecznie kliknąć przycisk włącz kamerę internetową. - Dodano przycisk enable webcam, którego styl określisz w CSS.
- Dodano też tag wideo, do którego będziesz przesyłać strumieniowo dane z kamery internetowej. Skonfigurujesz to w kodzie JavaScript wkrótce.
Jeśli teraz wyświetlisz podgląd danych wyjściowych, powinny one wyglądać mniej więcej tak:
6. Dodaj styl
Ustawienia domyślne elementu
Najpierw dodajmy style do dodanych przed chwilą elementów HTML, aby mieć pewność, że będą się prawidłowo renderować:
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;
}
Następnie dodaj przydatne klasy CSS, które pomogą w różnych stanach interfejsu użytkownika, np. gdy chcesz ukryć przycisk lub sprawić, aby obszar demonstracyjny był niedostępny, jeśli model nie jest jeszcze gotowy.
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;
}
Świetnie. To wszystko, czego potrzebujesz. Jeśli udało Ci się zastąpić style za pomocą 2 fragmentów kodu powyżej, podgląd na żywo powinien teraz wyglądać tak:
Zwróć uwagę, że tekst w obszarze demonstracyjnym i przycisk są niedostępne, ponieważ w HTML domyślnie zastosowano klasę „invisible”. Gdy model będzie gotowy do użycia, usuniesz tę klasę za pomocą JavaScriptu.
7. Tworzenie szkieletu JavaScript
Odwoływanie się do kluczowych elementów DOM
Najpierw upewnij się, że masz dostęp do kluczowych części strony, którymi będziesz później manipulować lub do których będziesz mieć dostęp w naszym kodzie:
script.js
const video = document.getElementById('webcam');
const liveView = document.getElementById('liveView');
const demosSection = document.getElementById('demos');
const enableWebcamButton = document.getElementById('webcamButton');
Sprawdzanie, czy kamera internetowa jest obsługiwana
Możesz teraz dodać niektóre funkcje ułatwień dostępu, aby sprawdzić, czy używana przeglądarka obsługuje dostęp do strumienia z kamery internetowej za pomocą 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) {
}
Pobieranie strumienia z kamery internetowej
Następnie wypełnij kodem pustą wcześniej funkcję enableCam, którą zdefiniowaliśmy powyżej, kopiując i wklejając poniższy kod:
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);
});
}
Na koniec dodaj tymczasowy kod, aby sprawdzić, czy kamera internetowa działa.
Poniższy kod symuluje załadowanie modelu i włącza przycisk kamery, dzięki czemu możesz go kliknąć. W następnym kroku zastąpisz cały ten kod, więc za chwilę przygotuj się na jego ponowne usunięcie:
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');
Świetnie. Jeśli uruchomisz kod i klikniesz przycisk w jego obecnej postaci, zobaczysz coś takiego:
8. Wykorzystanie modelu uczenia maszynowego
Wczytywanie modelu
Możesz już wczytać model COCO-SSD.
Gdy inicjowanie się zakończy, włącz obszar demonstracyjny i przycisk na stronie internetowej (wklej ten kod w miejsce tymczasowego kodu dodanego na końcu ostatniego kroku):
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');
});
Po dodaniu powyższego kodu i odświeżeniu podglądu na żywo zauważysz, że kilka sekund po załadowaniu strony (w zależności od szybkości sieci) przycisk włącz kamerę internetową pojawi się automatycznie, gdy model będzie gotowy do użycia. Jednak wkleiłeś też funkcję predictWebcam. Teraz musimy to w pełni zdefiniować, ponieważ w tej chwili nasz kod nic nie robi.
Przejdźmy do następnego kroku.
Klasyfikowanie klatki z kamery internetowej
Uruchom poniższy kod, aby umożliwić aplikacji ciągłe pobieranie klatki ze strumienia kamery internetowej, gdy przeglądarka jest gotowa, i przekazywanie jej do modelu w celu klasyfikacji.
Model przeanalizuje wyniki i narysuje tag <p> we wskazanych współrzędnych, a jeśli poziom ufności będzie wystarczająco wysoki, ustawi tekst na etykietę obiektu.
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);
});
}
Najważniejszym wywołaniem w tym nowym kodzie jest model.detect().
Wszystkie gotowe modele TensorFlow.js mają funkcję podobną do tej (jej nazwa może się różnić w zależności od modelu, więc szczegółowe informacje znajdziesz w dokumentacji), która faktycznie przeprowadza wnioskowanie uczenia maszynowego.
Wnioskowanie to po prostu proces wprowadzania danych wejściowych i przetwarzania ich przez model uczenia maszynowego (który wykonuje wiele operacji matematycznych), a następnie podawania wyników. W przypadku gotowych modeli TensorFlow.js zwracamy prognozy w postaci obiektów JSON, co ułatwia ich używanie.
Szczegółowe informacje o tej funkcji predict znajdziesz w naszej dokumentacji na GitHubie dotyczącej modelu COCO-SSD. Ta funkcja wykonuje wiele zadań za kulisami: jako parametr może przyjmować dowolny obiekt „podobny do obrazu”, np. obraz, film, obszar rysowania itp. Korzystanie z gotowych modeli może zaoszczędzić Ci dużo czasu i wysiłku, ponieważ nie musisz pisać tego kodu samodzielnie i możesz go używać od razu.
Po uruchomieniu tego kodu powinien pojawić się obraz podobny do tego:
Oto przykład kodu wykrywającego wiele obiektów jednocześnie:
Super! Możesz sobie wyobrazić, jak łatwo byłoby wykorzystać to rozwiązanie do stworzenia urządzenia takiego jak Nest Cam, które za pomocą starego telefonu ostrzegałoby Cię, gdy zobaczy Twojego psa na kanapie lub kota na sofie. Jeśli masz problemy z kodem, sprawdź tutaj moją ostateczną wersję, aby zobaczyć, czy nie skopiowano czegoś nieprawidłowo.
9. Gratulacje
Gratulacje! Zrobiliście pierwsze kroki w zakresie korzystania z TensorFlow.js i uczenia maszynowego w przeglądarce. Teraz Twoja kolej, aby wykorzystać te skromne początki i przekształcić je w coś kreatywnego. Co chcesz utworzyć?
Podsumowanie
W tych ćwiczeniach z programowania:
- Poznaj zalety korzystania z TensorFlow.js w porównaniu z innymi formami TensorFlow.
- Poznasz sytuacje, w których warto zacząć od wstępnie wytrenowanego modelu uczenia maszynowego.
- utworzyć w pełni działającą stronę internetową, która może klasyfikować obiekty w czasie rzeczywistym za pomocą kamery internetowej, w tym:
- Tworzenie szkieletu HTML dla treści
- Określanie stylów elementów i klas HTML
- Konfigurowanie szkieletu JavaScriptu do interakcji z HTML-em i wykrywania obecności kamery internetowej.
- Wczytywanie wstępnie wytrenowanego modelu TensorFlow.js
- Używanie wczytanego modelu do ciągłego klasyfikowania strumienia z kamery internetowej i rysowania ramki ograniczającej wokół obiektów na obrazie.
Dalsze kroki
Podziel się z nami swoimi dziełami. Możesz łatwo rozszerzyć to, co zostało utworzone w tym laboratorium, na inne kreatywne przypadki użycia. Zachęcamy do nieszablonowego myślenia i dalszego eksperymentowania po zakończeniu.
- Sprawdź wszystkie obiekty, które ten model może rozpoznać, i zastanów się, jak możesz wykorzystać tę wiedzę do wykonania działania. Jakie kreatywne pomysły można teraz wdrożyć, rozszerzając to, co udało Ci się dziś zrobić?
(Możesz dodać prostą warstwę po stronie serwera, aby wysyłać powiadomienia na inne urządzenie, gdy wykryje ono wybrany przez Ciebie obiekt za pomocą protokołu WebSocket. To świetny sposób na ponowne wykorzystanie starego smartfona i nadanie mu nowego przeznaczenia. Możliwości są nieograniczone).
- Oznacz nas w mediach społecznościowych za pomocą hashtagu #MadeWithTFJS, abyśmy mogli opublikować Twój projekt na naszym blogu TensorFlow lub zaprezentować go na przyszłych wydarzeniach związanych z TensorFlow.
Więcej ćwiczeń z TensorFlow.js
- Pisanie sieci neuronowej od podstaw w TensorFlow.js
- Rozpoznawanie dźwięku z wykorzystaniem uczenia transferowego w TensorFlow.js
- Niestandardowa klasyfikacja obrazów z wykorzystaniem uczenia transferowego w TensorFlow.js