1. Başlamadan önce
Makine öğrenimi bugünlerde çok popüler. Uygulamalarında herhangi bir sınırlama yok gibi görünüyor ve yakın gelecekte neredeyse tüm sektörlere hitap edecek gibi görünüyor. Mühendis veya tasarımcı, kullanıcı arabirimi ya da arka uç olarak çalışıyorsanız ve JavaScript bilginiz varsa bu codelab, beceri kümenize makine öğrenimini eklemeye başlamanıza yardımcı olmak için yazılmıştır.
Ön koşullar
Bu codelab, JavaScript'e aşina olan deneyimli mühendisler için yazılmıştır.
Oluşturacaklarınız
Bu codelab'de:
- Canlı web kamerası akışından yaygın olarak kullanılan nesneleri (evet, bir kerede birden fazla olanlar da dahil) sınıflandırmak ve algılamak için TensorFlow.js aracılığıyla doğrudan web tarayıcısında makine öğrenimini kullanan bir web sayfası oluşturun.
- Nesneleri tanımlamak ve bulduğu her nesne için sınırlayıcı kutunun koordinatlarını almak için normal web kameranızı güçlendirin
- Video akışında bulunan nesneyi aşağıda gösterildiği gibi vurgulayın:
Bir kişinin bir videoda olup olmadığını tespit edebildiğinizi hayal edin. Böylece, belirli bir bölgenin gün içinde ne kadar kalabalık olduğunu tahmin etmek için o anda kaç kişinin bulunduğunu sayabilir veya köpeğinizin siz dışarıdayken evinizin bir odasında algılandığı zaman kendinize uyarı gönderebilir, belki de orada olmaması gerektiğini düşünebilirsiniz. Bunu yapabilseydiniz, kendi özel donanımınızı kullanarak izinsiz giriş yapan (her türde) bir kişi gördüğünde sizi uyarabilecek kendi Google Nest kamera sürümünüzü yapmaya hazır olursunuz. Çok kullanışlı. Yapması zor mu? Hayır. Haydi bilgisayar korsanlığı yapalım...
Neler öğreneceksiniz?
- Önceden eğitilmiş bir TensorFlow.js modeli yükleme.
- Canlı web kamerası akışından veri alma ve tuvale çizme.
- Modelin tanıması için eğitildiği nesnelerin sınırlayıcı kutularını bulmak amacıyla görüntü çerçevesini sınıflandırma.
- Bulunan nesneleri vurgulamak için modelden geri verilen verilerin nasıl kullanılacağı.
Bu codelab'de, TensorFlow.js önceden eğitilmiş modellerini kullanmaya nasıl başlayacağınıza odaklanılmaktadır. TensorFlow.js ve makine öğrenimi ile alakalı olmayan kavramlar ve kod blokları açıklanmamaktadır ve yalnızca kopyalayıp yapıştırmanız için sağlanmıştır.
2. TensorFlow.js nedir?
TensorFlow.js, JavaScript'in mümkün olduğu her yerde çalıştırabilen açık kaynak bir makine öğrenimi kitaplığıdır. Python'da yazılmış orijinal TensorFlow kitaplığına dayanan bu geliştirici deneyimini ve JavaScript ekosistemi için API setini yeniden oluşturmayı amaçlar.
Nerede kullanılabilir?
JavaScript'in taşınabilirliği sayesinde artık 1 dilde yazabilir ve aşağıdaki platformların tümünde kolayca makine öğrenimi gerçekleştirebilirsiniz:
- Normal JavaScript kullanan web tarayıcısında istemci tarafı
- Node.js kullanan sunucu tarafı ve hatta Raspberry Pi gibi IoT cihazları
- Electron kullanan masaüstü uygulamaları
- React Native kullanan yerel mobil uygulamalar
TensorFlow.js bu ortamların her birinde de birden çok arka ucu destekler (örneğin, CPU veya WebGL gibi çalıştırabildiği donanım tabanlı gerçek ortamlar). Bir "arka uç" (bu bağlamda sunucu tarafı ortamı anlamına gelmez. Yürütme için arka ucu, örneğin WebGL'de istemci tarafı olabilir) uyumluluğu sağlamak ve aynı zamanda çalışmaya hızlı devam etmesini sağlamak için de kullanılmalıdır. TensorFlow.js şu anda aşağıdakileri desteklemektedir:
- Cihazın grafik kartında WebGL'nin çalıştırılması (GPU): Bu, GPU hızlandırmalı olarak daha büyük modelleri (3 MB'ın üzerinde) yürütmenin en hızlı yoludur.
- CPU'da Web Derlemesi (WASM) yürütme: Örneğin, eski nesil cep telefonları da dahil olmak üzere tüm cihazlarda CPU performansını iyileştirir. Bu, bir grafik işlemciye içerik yüklemenin ek yükü nedeniyle WASM ile CPU'da WebGL'ye göre daha hızlı çalışabilen daha küçük (boyutu 3 MB'tan küçük) daha küçük modeller için daha uygundur.
- CPU yürütme: Yedek, diğer ortamların hiçbirinin mevcut olmamasıdır. Bu üçünden en yavaş olanıdır ama her zaman yanınızdadır.
Not: Hangi cihazda çalışacağınızı biliyorsanız bu arka uçlardan birini zorunlu kılmayı seçebilir veya bunu belirtmezseniz TensorFlow.js'nin sizin yerinize karar vermesine izin verebilirsiniz.
İstemci tarafının süper güçleri
İstemci makinedeki web tarayıcısında TensorFlow.js çalıştırmak, dikkate değer birçok avantaj sağlayabilir.
Gizlilik
3. taraf web sunucusuna hiç veri göndermeden istemci makinesinde verileri hem eğitebilir hem de sınıflandırabilirsiniz. Bunun, örneğin GDPR gibi yerel yasalara uymanın gerekli olduğu veya kullanıcının makinesinde tutmak isteyebileceği ve üçüncü bir tarafa göndermeyeceği herhangi bir veriyi işlerken zorunlu olabileceği zamanlar olabilir.
Hız
Uzak sunucuya veri göndermek zorunda olmadığınızdan çıkarım (verileri sınıflandırma işlemi) daha hızlı olabilir. Daha da iyisi, kullanıcı erişim izni verirse kamera, mikrofon, GPS, ivme ölçer ve benzeri cihaz sensörlerine doğrudan erişebilirsiniz.
Erişim ve ölçeklendirme
Dünyadaki herkes tek bir tıklamayla kendisine gönderdiğiniz bir bağlantıyı tıklayabilir, web sayfasını tarayıcılarında açabilir ve yaptıklarınızdan yararlanabilir. CUDA sürücüleri ile karmaşık bir sunucu tarafı Linux kurulumu ve makine öğrenimi sistemini kullanmak için çok daha fazlası gerekmez.
Maliyet
Sunucu olmadığında tek yapmanız gereken HTML, CSS, JS ve model dosyalarınızı barındıracak bir CDN'dir. CDN'nin maliyeti, bir sunucuyu (potansiyel olarak bir grafik kartı takılı) 7/24 çalışan tutmaktan çok daha düşüktür.
Sunucu tarafı özellikler
TensorFlow.js'nin Node.js uygulamasından yararlanmak aşağıdaki özellikleri sağlar.
Tam CUDA desteği
Sunucu tarafında, grafik kartı hızlandırması için TensorFlow'un grafik kartıyla çalışmasını sağlamak amacıyla NVIDIA CUDA sürücülerini yüklemeniz gerekir (WebGL kullanan tarayıcının aksine, yükleme gerekmez). Ancak tam CUDA desteğiyle grafik kartının alt seviye yeteneklerinden tam olarak yararlanabilir, böylece daha hızlı eğitim ve çıkarım süreleri elde edebilirsiniz. Her ikisi de aynı C++ arka ucunu paylaştığından, performans, Python TensorFlow uygulamasıyla eşittir.
Model Boyutu
Araştırmalardan elde edilen son teknoloji modeller için, belki gigabaytlarca büyüklüğünde çok büyük modellerle çalışıyor olabilirsiniz. Bu modeller, tarayıcı sekmesi başına bellek kullanımı sınırlamaları nedeniyle şu anda web tarayıcısında çalıştırılamaz. Daha büyük olan bu modelleri çalıştırmak için Node.js'yi kendi sunucunuzda, böyle bir modeli verimli bir şekilde çalıştırmak için ihtiyacınız olan donanım özellikleriyle birlikte kullanabilirsiniz.
IOT
Node.js, Raspberry Pi gibi popüler tek kartlı bilgisayarlarda desteklenir. Böylece TensorFlow.js modellerini bu tür cihazlarda da yürütebilirsiniz.
Hız
Node.js, JavaScript'te yazıldığından tam zamanında derleme özelliğinden yararlanır. Bu nedenle, Node.js kullandığınızda, özellikle de yaptığınız ön işlemeler için çalışma zamanında optimize edileceğinden, bu dosyayı kullanırken sıklıkla performans artışları görebilirsiniz. Bunun mükemmel bir örneğini bu başarılı örnekte Hugging Face'in, doğal dil işleme modelinde 2 kat performans artışı elde etmek için Node.js'yi nasıl kullandığını görebilirsiniz.
Artık TensorFlow.js ile ilgili temel bilgileri, nerede çalışabileceğini ve bazı avantajlarını biliyorsunuz. Şimdi de TensorFlow'la faydalı şeyler yapmaya başlayalım.
3. Önceden eğitilmiş modeller
TensorFlow.js, önceden eğitilmiş çeşitli makine öğrenimi (ML) modelleri sunar. TensorFlow.js ekibi tarafından eğitilen ve kullanımı kolay bir sınıfa yerleştirilen bu modeller, makine öğrenimiyle ilk adımlarınızı atmanın mükemmel bir yoludur. Sorununuzu çözmek için bir model oluşturup eğitmek yerine, önceden eğitilmiş bir modeli başlangıç noktanız olarak içe aktarabilirsiniz.
Tensorflow.js JavaScript için Modeller sayfasında, kullanımı kolay, kullanımı kolay modellerden oluşan ve gittikçe büyüyen bir liste bulabilirsiniz. TensorFlow Hub da dahil olmak üzere, TensorFlow.js'de çalışan dönüştürülmüş TensorFlow modellerini bulabileceğiniz başka yerler de vardır.
Neden önceden eğitilmiş bir model kullanmak isteyeyim?
İstediğiniz kullanım alanına uygunsa önceden eğitilmiş popüler bir modelle başlamanın çeşitli avantajları vardır. Örneğin:
- Eğitim verilerini kendiniz toplamanız gerekmez. Verileri doğru biçimde hazırlamak ve makine öğrenimi sisteminin öğrenme amacıyla kullanabilmesi için etiketlemek çok zaman alabilir ve maliyetli olabilir.
- Bir fikri daha az maliyet ve zaman harcayarak hızlı bir şekilde prototip oluşturma becerisi.
"Tekerleği yeniden icat etmenin" bir anlamı yoktur . - Son teknoloji araştırmalardan yararlanın. Önceden eğitilmiş modeller genellikle popüler araştırmalara dayanır. Bu modeller, modelleri görebilirsiniz ve aynı zamanda bu modellerin gerçek dünyadaki performanslarını da anlamanızı sağlar.
- Kullanım kolaylığı ve kapsamlı belgeler. Bunun nedeni, bu tür modellerin popülerliğidir.
- Öğrenme özelliklerini aktarın. Bazı önceden eğitilmiş modeller, aktarım öğrenme özellikleri sunar. Bu da temelde, bir makine öğrenimi görevinden öğrenilen bilgilerin başka bir benzer örneğe aktarılması işlemidir. Örneğin, başlangıçta kedileri tanımak üzere eğitilen bir modele yeni eğitim verileri sağlarsanız köpekleri tanıyacak şekilde yeniden eğitilebilir. Boş bir tuvalle başlamayacağınız için bu işlem daha hızlı olacaktır. Model, kedileri tanımayı öğrendiği şeyleri kullanarak yeni şeyi tanıyabilir. Ne de olsa köpeklerin gözleri ve kulakları da vardır. Bu özellikleri nasıl bulacağını zaten biliyorsa işin ortalarındayız. Modeli kendi verileriniz üzerinde çok daha hızlı bir şekilde yeniden eğitin.
COCO-SSD nedir?
COCO-SSD, bu codelab'de kullanacağınız önceden eğitilmiş nesne algılama makine öğrenimi modelinin adıdır. Bu modelin tek bir görüntüdeki birden fazla nesneyi yerelleştirip tanımlaması amaçlanır. Başka bir deyişle, size sunduğunuz herhangi bir görüntüde nesnenin konumunu vermek için bulmak üzere eğitildiği nesnelerin sınırlayıcı kutusunu size bildirebilir. Aşağıdaki resimde bir örnek gösterilmektedir:
Yukarıdaki resimde 1'den fazla köpek varsa her birinin konumunu açıklayan 2 sınırlayıcı kutunun koordinatları verilir. COCO-SSD insan, araba, kedi gibi 90 yaygın günlük nesneyi tanıyacak şekilde önceden eğitilmiştir.
Adı nereden geliyor?
Ad garip gelse de iki kısaltmadan geliyor:
- COCO: Cihazın, herkesin kendi modellerini eğitirken ücretsiz olarak indirebileceği ve kullanabileceği COCO (Bağlamdaki Yaygın Nesneler) veri kümesi üzerinde eğitilmiş olduğunu ifade eder. Veri kümesinde,bilgi edinmek için kullanılabilecek 200.000'den fazla etiketli görüntü bulunur.
- SSD (Tek Çekimli Çoklu Kutu Algılama): Modelin uygulanmasında kullanılan model mimarisinin bir bölümünü ifade eder. Codelab için bu konuyu anlamanız gerekmez ancak merak ediyorsanız SSD hakkında daha fazla bilgiyi burada bulabilirsiniz.
4. Hazırlanın
Gerekenler
- Modern bir web tarayıcısı.
- Temel HTML, CSS, JavaScript ve Chrome Geliştirici Araçları hakkında bilgi (konsol çıktısını görüntüleme).
Kodlamaya başlayalım
Glitch.com veya Codepen.io için başlangıç olarak kullanılacak ortak şablon şablonları oluşturulmuştur. Bu kod laboratuvarı için iki şablondan birini temel durumunuz olarak tek tıklamayla klonlayabilirsiniz.
Glitch'te remiks yap düğmesini tıklayarak çatallayın ve düzenleyebileceğiniz yeni bir dosya grubu oluşturun.
Alternatif olarak, Codepen'de ekranın sağ alt kısmındaki fork'u (çatal) tıklayın.
Bu çok basit iskelet size aşağıdaki dosyaları sağlar:
- HTML sayfası (index.html)
- Stil sayfası (style.css)
- JavaScript kodumuzun (script.js) yazılacağı dosya
Size kolaylık sağlamak amacıyla, TensorFlow.js kitaplığı için HTML dosyasında ek bir içe aktarma işlemi bulunmaktadır. Şöyle görünür:
index.html
<!-- Import TensorFlow.js library -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs/dist/tf.min.js" type="text/javascript"></script>
Alternatif: Tercih ettiğiniz web düzenleyicisini kullanın veya yerel olarak çalışın
Kodu indirip yerel olarak veya farklı bir online düzenleyicide çalışmak istiyorsanız, yukarıda adı geçen 3 dosyayı aynı dizinde oluşturun ve Glitch ortak metnimizdeki kodu kopyalayıp bu dosyaların her birine yapıştırın.
5. HTML iskeletini doldur
Tüm prototipler, bazı temel HTML iskeleleri gerektirir. Bunu, daha sonra makine öğrenimi modelinin çıkışını oluşturmak için kullanacaksınız. Şimdi bunu ayarlayalım:
- Sayfa için bir başlık
- Açıklayıcı metinler
- Web kamerasını etkinleştirme düğmesi
- Web kamerası akışını oluşturmak için bir video etiketi
Bu özellikleri ayarlamak için index.html'yi açın ve aşağıdaki kodu kullanarak mevcut kodun üzerine yapıştırın:
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>
Kodu anlama
Eklediğiniz bazı önemli noktalara dikkat edin:
- Bir
<h1>etiketi, başlık için bazı<p>etiketleri ve sayfanın nasıl kullanılacağıyla ilgili bazı bilgiler eklediniz. Burada özel bir şey yok.
Ayrıca, demo alanınızı temsil eden bir bölüm etiketi de eklediniz:
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>
- Başlangıçta bu
sectioniçin "görünmez" sınıfını belirlersiniz. Böylece, modelin ne zaman hazır olduğunu kullanıcıya görsel olarak gösterebilir ve web kamerasını etkinleştir düğmesini güvenle tıklayabilirsiniz. - Web kamerasını etkinleştir düğmesini eklediniz. Bu düğmeyi, CSS'nizde biçimlendirebilirsiniz.
- Ayrıca, web kamerası girişinizi akış olarak alacağınız bir video etiketi de eklediniz. Bunu kısa süre içinde JavaScript kodunuzda kuracaksınız.
Çıkışı şu anda önizlerseniz aşağıdaki gibi görünecektir:
6. Stil ekle
Öğe varsayılanları
İlk olarak, doğru şekilde oluşturulduklarından emin olmak için az önce eklediğimiz HTML öğelerine ilişkin stiller ekleyelim:
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;
}
Ardından, kullanıcı arayüzümüzün çeşitli durumlarında (ör. düğmeyi gizlemek veya model henüz hazır değilse demo alanının kullanılamaz olarak görünmesini istediğimiz durumlar) yardımcı olması için faydalı CSS sınıfları ekleyin.
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;
}
Çok güzel! Hepsi bu kadar. Yukarıdaki 2 kod parçasıyla stillerinizin üzerine başarıyla yazdıysanız canlı önizlemeniz artık şu şekilde görünmelidir:
HTML'de varsayılan olarak "görünmez" sınıfına sahip olduğundan, demo alanı metninin ve düğmenin nasıl kullanılamadığına dikkat edin geçerlidir. Model kullanıma hazır olduğunda bu sınıfı kaldırmak için JavaScript'i kullanacaksınız.
7. JavaScript iskeleti oluşturma
Temel DOM öğelerini yönlendirme
Öncelikle, daha sonra kodumuzdan değiştirmeniz veya erişmeniz gereken önemli sayfalara erişebildiğinizden emin olun:
script.js
const video = document.getElementById('webcam');
const liveView = document.getElementById('liveView');
const demosSection = document.getElementById('demos');
const enableWebcamButton = document.getElementById('webcamButton');
Web kamerası desteğini kontrol etme
Kullandığınız tarayıcının getUserMedia üzerinden web kamerası akışına erişimi destekleyip desteklemediğini kontrol etmek için artık bazı yardımcı işlevler ekleyebilirsiniz:
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) {
}
Web kamerası akışı getiriliyor
Ardından, aşağıdaki kodu kopyalayıp yapıştırarak yukarıda tanımladığımız, önceden boş olan enableCam işlevine ait kodu girin:
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);
});
}
Son olarak, web kamerasının çalışıp çalışmadığını test etmek için geçici bir kod ekleyin.
Aşağıdaki kod, modelinizin yüklü olduğunu varsayar ve tıklayabilmeniz için kamera düğmesini etkinleştirir. Bu kodun tamamını bir sonraki adımda değiştireceğiniz için kısa bir süre sonra bu kodu tekrar silmeye hazır olun:
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');
Çok güzel! Kodu çalıştırdıysanız ve mevcut durumdaki düğmeyi tıkladıysanız şuna benzer bir şey görürsünüz:
8. Makine Öğrenimi modelinin kullanımı
Modeli yükleme
Artık COCO-SSD modelini yüklemeye hazırsınız.
Başlatma tamamlandığında, web sayfanızdaki demo alanını ve düğmeyi etkinleştirin (bu kodu, son adımın sonunda eklediğiniz geçici kodun üzerine yapıştırın):
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');
});
Yukarıdaki kodu ekleyip canlı görüntülemeyi yeniledikten sonra, sayfa yüklendikten birkaç saniye sonra (ağ hızınıza bağlı olarak) web kamerasını etkinleştir düğmesinin, model kullanıma hazır olduğunda otomatik olarak gösterildiğini görürsünüz. Ancak predictWebcam işlevinin üzerine de yapıştırdınız. Kodumuz şu anda hiçbir şey yapmayacağı için şimdi bunu tam olarak tanımlamanın zamanı geldi.
Sonraki adıma geçelim.
Web kamerasından kare sınıflandırma
Tarayıcı hazır olduğunda uygulamanın, web kamerası akışından sürekli olarak bir kare çekmesini ve sınıflandırılması için modele iletmesini sağlamak için aşağıdaki kodu çalıştırın.
Ardından model, sonuçları ayrıştırır ve geri gelen koordinatlarda bir <p> etiketi çizer ve belirli bir güven düzeyinin üzerindeyse metni nesnenin etiketine ayarlar.
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);
});
}
Bu yeni koddaki gerçekten önemli çağrı, model.detect() çağrısıdır.
TensorFlow.js için önceden hazırlanmış tüm modeller, makine öğrenimi çıkarımını gerçekleştiren böyle bir işleve sahiptir (adı modelden modele değişebileceğinden, ayrıntılar için dokümanlara göz atın).
Çıkarım, bir miktar girdi alıp bunu makine öğrenimi modeli (aslında birçok matematiksel işlem) aracılığıyla çalıştırıp ardından bazı sonuçlar elde etme eylemidir. TensorFlow.js'nin önceden hazırlanmış modelleriyle tahminlerimizi JSON nesneleri biçiminde döndürüyoruz, böylece kullanımı kolay hale getiriyoruz.
Bu tahmin işlevinin tüm ayrıntılarını COCO-SSD modeliyle ilgili GitHub dokümanlarımızda bulabilirsiniz. Bu işlev, sahne arkasında çok fazla iş halleder: "Benzer resim"i kabul edebilir. parametresi için bir nesne (ör. resim, video, tuval vb.) kullanmanız gerekir. Bu kodu kendiniz yazmanız gerekmeyeceğinden ve hazır olarak kullanabileceğiniz için önceden hazırlanmış modelleri kullanmak size çok fazla zaman ve çaba kazandırabilir.
Bu kodu çalıştırdığınızda, aşağıdakine benzer bir resim görürsünüz:
Son olarak, aynı anda birden çok nesneyi algılayan kodun bir örneğini aşağıda bulabilirsiniz:
Harika! Eski bir telefon kullanarak köpeğinizi koltukta ya da kanepede oturan kedinizi gördüğünde sizi uyarması için eski bir telefon kullanarak Nest Cam gibi bir cihaz oluşturmanın ne kadar basit olduğunu tahmin edebilirsiniz. Kodunuzla ilgili sorun yaşıyorsanız bir şeyi yanlış bir şekilde kopyalayıp kopyalamadığınızı görmek için çalışmanın son sürümünü buradan kontrol edebilirsiniz.
9. Tebrikler
Tebrikler, web tarayıcısında TensorFlow.js ve makine öğrenimi kullanımına yönelik ilk adımlarınızı attınız. Şimdi bu mütevazı başlangıçları alıp yaratıcı bir şeye dönüştürmek size kalmış. Ne yapacaksınız?
Özet
Bu codelab'de:
- Diğer TensorFlow biçimlerine kıyasla TensorFlow.js kullanmanın avantajlarını öğrenin.
- Önceden eğitilmiş bir makine öğrenimi modeliyle başlamak isteyebileceğiniz durumları öğrenin.
- Web kameranızı kullanarak nesneleri gerçek zamanlı olarak sınıflandırabilen, tamamen çalışan bir web sayfası oluşturuldu. Örneğin:
- İçerik için HTML iskeleti oluşturma
- HTML öğeleri ve sınıfları için stilleri tanımlama
- HTML ile etkileşim kurmak ve bir web kamerasının olup olmadığını algılamak için JavaScript iskeletleri ayarlama
- Önceden eğitilmiş bir TensorFlow.js modelini yükleme
- Web kamerası akışının sürekli sınıflandırmalarını yapmak için yüklenen modeli kullanma ve görüntüdeki nesnelerin etrafında bir sınırlayıcı kutu çizme.
Sonraki adımlar
Yaptıklarınızı bizimle paylaşın! Bu codelab için oluşturduğunuz kodu diğer reklam öğesi kullanım alanlarını da kolayca genişletebilirsiniz. Kalıpların dışında düşünmenizi ve işiniz bittiğinde bilgisayar korsanlığı yapmaya devam etmenizi öneririz.
- Bu modelin tanıyabileceği tüm nesneleri inceleyin ve bu bilgiyi, işlem gerçekleştirmek için nasıl kullanabileceğinizi düşünün. Bugün elde ettiğiniz başarıyı artırarak hangi yaratıcı fikirleri hayata geçirebilirsiniz?
(Web yuvaları kullanarak, seçtiğiniz belirli bir nesneyi gördüğünde başka bir cihaza bildirim gönderilmesi için basit bir sunucu tarafı katmanı ekleyebilirsiniz. Bu, eski bir akıllı telefonu dönüştürmenin ve ona yeni bir amaç sağlamanın harika bir yoludur. Olasılıklar sınırsızdır!)
- Projenizin TensorFlow blogumuzda öne çıkarılması, hatta gelecekteki TensorFlow etkinliklerinde sergilenmesi için #MadeWithTFJS hashtag'ini kullanarak bizi sosyal medyada etiketleyin.
Ayrıntılı bilgi için diğer TensorFlow.js codelab'leri
- TensorFlow.js'de sıfırdan bir nöral ağ yazma
- TensorFlow.js'de aktarım öğrenmesini kullanarak ses tanıma
- TensorFlow.js'de aktarım öğrenmesini kullanarak özel görüntü sınıflandırma