Önceden eğitilmiş TensorFlow.js modeliyle JavaScript'te akıllı web kamerası oluşturma

1. Başlamadan önce

Makine öğrenimi günümüzde oldukça popüler bir terim. Uygulama alanları sınırsız gibi görünüyor ve yakın gelecekte neredeyse her sektöre dokunmaya hazır. Mühendis veya tasarımcı olarak çalışıyorsanız, ön uç ya da arka uç geliştirme konusunda deneyimliyseniz ve JavaScript'e aşinaysanız bu codelab, makine öğrenimini beceri setinize 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.

Ne oluşturacaksınız?

Bu codelab'de şunları yapacaksınız:

  • TensorFlow.js aracılığıyla doğrudan web tarayıcısında makine öğrenimini kullanarak, canlı web kamerası yayınındaki yaygın nesneleri (evet, aynı anda birden fazla nesne dahil) sınıflandırıp algılayan bir web sayfası oluşturun.
  • Nesneleri tanımlamak ve bulduğu her nesnenin sınırlayıcı kutusunun koordinatlarını almak için normal web kameranızın gücünü artırın.
  • Aşağıda gösterildiği gibi, bulunan nesneyi video akışında vurgulayın:

8f9bad6e49e646b.png

Bir videoda bir kişinin olup olmadığını tespit edebildiğinizi düşünün. Böylece, belirli bir alanın gün içinde ne kadar yoğun olduğunu tahmin etmek için herhangi bir zamanda kaç kişinin bulunduğunu sayabilir veya evde olmadığınız zamanlarda köpeğiniz evinizin bir odasında tespit edildiğinde kendinize bir uyarı gönderebilirsiniz. Bunu yapabilirseniz kendi özel donanımınızı kullanarak izinsiz giriş yapanları (herhangi bir türde) gördüğünde sizi uyarabilecek kendi Google Nest Cam'inizi oluşturma yolunda önemli bir adım atmış olursunuz. Çok kullanışlı. Yapması zor mu? Hayır. Haydi, hacklemeye başlayalım...

Neler öğreneceksiniz?

  • Önceden eğitilmiş bir TensorFlow.js modelini yükleme
  • Canlı web kamerası yayınından nasıl veri alınır ve tuvale nasıl çizilir?
  • Modelin tanımak üzere eğitildiği nesnelerin sınırlayıcı kutularını bulmak için görüntü karesini sınıflandırma
  • Bulunan nesneleri vurgulamak için modelden geri aktarılan verileri kullanma

Bu codelab'de, TensorFlow.js önceden eğitilmiş modellerini kullanmaya nasıl başlayacağınız açıklanmaktadır. TensorFlow.js ve makine öğrenimiyle alakalı olmayan kavramlar ve kod blokları açıklanmaz. Bunlar, yalnızca kopyalayıp yapıştırmanız için kullanımınıza sunulur.

2. TensorFlow.js nedir?

1aee0ede85885520.png

TensorFlow.js, JavaScript'in çalıştırılabildiği her yerde çalışabilen bir açık kaynaklı makine öğrenimi kitaplığıdır. Python'da yazılmış orijinal TensorFlow kitaplığına dayanan bu kitaplık, JavaScript ekosisteminde bu geliştirici deneyimini ve API'lerini yeniden oluşturmayı amaçlar.

Nerede kullanılabilir?

JavaScript'in taşınabilirliği sayesinde artık tek bir dilde yazabilir ve aşağıdaki platformların tümünde kolayca makine öğrenimi gerçekleştirebilirsiniz:

  • Düz JavaScript kullanılarak web tarayıcısında istemci tarafında
  • Node.js kullanan sunucu tarafı ve Raspberry Pi gibi IoT cihazları
  • Electron'u kullanan masaüstü uygulamaları
  • React Native kullanan yerel mobil uygulamalar

TensorFlow.js, bu ortamların her birinde birden fazla arka ucu da destekler (örneğin, CPU veya WebGL gibi, içinde yürütülebileceği gerçek donanım tabanlı ortamlar). Bu bağlamda "arka uç", sunucu tarafı bir ortam anlamına gelmez. Örneğin, yürütme için arka uç WebGL'de istemci tarafı olabilir. Bu, uyumluluğu sağlamak ve her şeyin hızlı çalışmasını sağlamak içindir. TensorFlow.js şu anda şunları desteklemektedir:

  • Cihazın grafik kartında (GPU) WebGL yürütme: Bu, GPU hızlandırmasıyla daha büyük modelleri (boyutu 3 MB'tan fazla) yürütmenin en hızlı yoludur.
  • Örneğin, eski nesil cep telefonları da dahil olmak üzere cihazlarda CPU performansını artırmak için CPU'da Web Assembly (WASM) yürütme. Bu, içeriklerin grafik işlemciye yüklenmesiyle ilgili ek yük nedeniyle WASM ile CPU'da WebGL'ye kıyasla daha hızlı çalışabilen daha küçük modeller (boyutu 3 MB'tan az) için daha uygundur.
  • CPU yürütme: Diğer ortamların hiçbiri kullanılamıyorsa yedek olarak bu ortam kullanılmalıdır. Bu yöntem üçü arasında en yavaş olanıdır ancak her zaman kullanılabilir.

Not: Hangi cihazda çalıştıracağınızı biliyorsanız bu arka uçlardan birini zorunlu kılmayı seçebilirsiniz. Bunu belirtmezseniz TensorFlow.js'in sizin için karar vermesine izin verebilirsiniz.

İstemci tarafı süper güçleri

TensorFlow.js'yi istemci makinesindeki web tarayıcısında çalıştırmak, dikkate alınması gereken çeşitli avantajlar sağlayabilir.

Gizlilik

Verileri hiçbir zaman üçüncü taraf web sunucusuna göndermeden istemci makinesinde hem eğitebilir hem de sınıflandırabilirsiniz. Bu, yerel yasalara (ör. GDPR) uymak veya kullanıcının makinesinde tutmak isteyebileceği ve üçüncü tarafa gönderilmeyen verileri işlemek için gerekli olabilir.

Hız

Verileri uzak bir sunucuya göndermeniz gerekmediğinden çıkarım (verileri sınıflandırma işlemi) daha hızlı olabilir. Daha da iyisi, kullanıcı size erişim izni verirse kamera, mikrofon, GPS, ivmeölçer gibi cihaz sensörlerine doğrudan erişebilirsiniz.

Erişim ve ölçeklendirme

Dünyanın herhangi bir yerindeki kullanıcılar, tek bir tıklamayla kendilerine gönderdiğiniz bağlantıyı tıklayabilir, web sayfasını tarayıcılarında açabilir ve oluşturduğunuz içeriği kullanabilir. Makine öğrenimi sistemini kullanmak için CUDA sürücüleri ve çok daha fazlasıyla karmaşık bir sunucu tarafı Linux kurulumuna gerek yoktur.

Maliyet

Sunucu olmadığı için HTML, CSS, JS ve model dosyalarınızı barındırmak üzere yalnızca bir CDN için ödeme yapmanız gerekir. CDN'nin maliyeti, 7/24 çalışan bir sunucu (muhtemelen bağlı bir grafik kartıyla) bulundurmaktan çok daha düşüktür.

Sunucu tarafı özellikleri

TensorFlow.js'in Node.js uygulamasından yararlanarak aşağıdaki özellikler etkinleştirilir.

Tam CUDA desteği

Sunucu tarafında, grafik kartı hızlandırması için TensorFlow'un grafik kartıyla çalışmasını sağlamak üzere NVIDIA CUDA sürücülerini yüklemeniz gerekir (WebGL'nin kullanıldığı tarayıcıda yükleme gerekmez). Ancak tam CUDA desteğiyle grafik kartının daha düşük seviyeli özelliklerinden 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ığı için performans, Python TensorFlow uygulamasıyla aynı düzeydedir.

Model Boyutu

Araştırmalardaki en yeni modellerle çalışırken çok büyük modellerle (ör. gigabaytlarca) çalışabilirsiniz. Bu modeller, tarayıcı sekmesi başına bellek kullanımıyla ilgili sınırlamalar nedeniyle şu anda web tarayıcısında çalıştırılamaz. Bu büyük modelleri çalıştırmak için kendi sunucunuzda Node.js'yi kullanabilirsiniz. Sunucunuz, bu tür bir modeli verimli bir şekilde çalıştırmak için gereken donanım özelliklerine sahip olmalıdır.

IOT

Node.js, Raspberry Pi gibi popüler tek kartlı bilgisayarlarda desteklenir. Bu da TensorFlow.js modellerini bu tür cihazlarda da çalıştırabileceğiniz anlamına gelir.

Hız

Node.js, JavaScript ile yazıldığından tam zamanında derlemeden yararlanır. Bu nedenle, Node.js'yi kullandığınızda genellikle performans artışı görebilirsiniz. Çünkü Node.js, özellikle yaptığınız tüm ön işleme için çalışma zamanında optimize edilir. Bununla ilgili harika bir örneği bu örnek olayda görebilirsiniz. Bu örnek olayda, Hugging Face'in doğal dil işleme modelinde 2 kat performans artışı elde etmek için Node.js'yi nasıl kullandığı gösterilmektedir.

TensorFlow.js'in temellerini, nerede çalışabileceğini ve bazı avantajlarını öğrendiğinize göre artık TensorFlow.js ile faydalı şeyler yapmaya başlayabiliriz.

3. Önceden eğitilmiş modeller

TensorFlow.js, çeşitli önceden eğitilmiş makine öğrenimi (ML) modelleri sunar. Bu modeller, TensorFlow.js ekibi tarafından eğitilmiş ve kullanımı kolay bir sınıfa yerleştirilmiştir. Makine öğrenimiyle ilgili ilk adımlarınızı atmak için harika bir yoldur. Sorununuzu çözmek için model oluşturup eğitmek yerine, başlangıç noktası olarak önceden eğitilmiş bir modeli içe aktarabilirsiniz.

Kullanımı kolay, önceden eğitilmiş modellerin giderek büyüyen listesini Tensorflow.js Models for JavaScript sayfasında bulabilirsiniz. TensorFlow Hub da dahil olmak üzere, TensorFlow.js'de çalışan dönüştürülmüş TensorFlow modellerini edinebileceğiniz başka yerler de vardır.

Neden önceden eğitilmiş bir model kullanmak isteyebilirim?

İstediğiniz kullanım alanına uygunsa popüler bir önceden eğitilmiş modelle başlamanın çeşitli avantajları vardır. Örneğin:

  1. Eğitim verilerini kendiniz toplamanıza gerek kalmaz. Verileri doğru biçimde hazırlamak ve makine öğrenimi sisteminin öğrenmek için kullanabileceği şekilde etiketlemek çok zaman alıcı ve maliyetli olabilir.
  2. Maliyet ve zamanı azaltarak fikirlerin hızlıca prototipini oluşturma
     Önceden eğitilmiş bir model, ihtiyacınız olanı yapmak için yeterli olabilir. Bu durumda, modelin sağladığı bilgileri kullanarak yaratıcı fikirlerinizi uygulamaya odaklanabilirsiniz.
  3. En yeni araştırmalardan yararlanma. Önceden eğitilmiş modeller genellikle popüler araştırmalara dayanır. Bu sayede, bu tür modelleri kullanabilir ve gerçek dünyadaki performanslarını anlayabilirsiniz.
  4. Kullanım kolaylığı ve kapsamlı dokümanlar. Bu tür modellerin popülerliği nedeniyle.
  5. Öğrenim aktarma özellikleri. Bazı önceden eğitilmiş modeller, bir makine öğrenimi görevinden öğrenilen bilgileri benzer bir örneğe aktarma uygulaması olan transfer öğrenimi özelliklerini sunar. Örneğin, başlangıçta kedileri tanımak üzere eğitilmiş bir model, yeni eğitim verileri sağlarsanız köpekleri tanımak üzere yeniden eğitilebilir. Boş bir tuvalle başlamayacağınız için bu yöntem daha hızlıdır. Model, kedileri tanımak için öğrendiklerini kullanarak yeni şeyi (köpekleri) tanıyabilir. Sonuçta köpeklerin de gözleri ve kulakları vardır. Bu özellikleri nasıl bulacağını biliyorsa işin yarısı tamamdır. Modeli kendi verilerinizle çok daha hızlı bir şekilde yeniden eğitin.

COCO-SSD nedir?

COCO-SSD, bu codelab sırasında kullanacağınız önceden eğitilmiş bir nesne algılama makine öğrenimi modelinin adıdır. Bu model, tek bir görüntüdeki birden fazla nesnenin yerini belirlemeyi ve bunları tanımlamayı amaçlar. Diğer bir deyişle, eğitildiği nesnelerin sınırlayıcı kutusunu size bildirebilir ve bu nesnenin, kendisine sunduğunuz herhangi bir görüntüdeki konumunu verebilir. Bir örnek aşağıdaki resimde gösterilmektedir:

760e5f87c335dd9e.png

Yukarıdaki resimde birden fazla köpek olsaydı her birinin konumunu açıklayan 2 sınırlayıcı kutunun koordinatları verilirdi. COCO-SSD, 90 yaygın günlük nesneyi (ör. kişi, araba, kedi) tanımak üzere önceden eğitilmiştir.

Adı nereden geliyor?

Adı garip gelebilir ancak 2 kısaltmadan oluşur:

  • COCO: COCO (Bağlamdaki Ortak Nesneler) veri kümesi üzerinde eğitilmiş olmasını ifade eder. Bu veri kümesi, herkesin kendi modellerini eğitirken indirmesi ve kullanması için ücretsiz olarak sunulur. Veri kümesi,öğrenmek için kullanılabilecek 200.000'den fazla etiketli resim içerir.
  • SSD (Tek Çekim Çok Kutu Algılama): Modelin uygulanmasında kullanılan model mimarisinin bir bölümünü ifade eder. Bu bilgiyi codelab için anlamanız gerekmez ancak merak ediyorsanız SSD hakkında daha fazla bilgiyi buradan edinebilirsiniz.

4. Hazırlanın

Gerekenler

  • Modern bir web tarayıcısı.
  • HTML, CSS, JavaScript ve Chrome Geliştirici Araçları (konsol çıkışını görüntüleme) hakkında temel bilgi sahibi olmanız gerekir.

Kodlamaya başlayalım

Başlangıç için ortak metin şablonları Glitch.com veya Codepen.io için oluşturulmuştur. Bu kod laboratuvarı için temel durum olarak şablonlardan birini tek bir tıklamayla klonlayabilirsiniz.

Glitch'te, remix this (Bunu remiksle) düğmesini tıklayarak projeyi ç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, aşağıdaki dosyaları sağlar:

  • HTML sayfası (index.html)
  • Stil sayfası (style.css)
  • JavaScript kodumuzu yazacağımız dosya (script.js)

Kolaylık sağlamak için HTML dosyasına TensorFlow.js kitaplığı için bir içe aktarma işlemi eklenmiştir. Şö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üzenleyiciyi kullanın veya yerel olarak çalışın

Kodu indirip yerel olarak veya farklı bir online düzenleyicide çalışmak istiyorsanız yukarıda belirtilen 3 dosyayı aynı dizinde oluşturmanız ve Glitch boilerplate'imizdeki kodu kopyalayıp her birine yapıştırmanız yeterlidir.

5. HTML iskeletini doldurma

Tüm prototipler için temel HTML iskeleti gerekir. Bunu, makine öğrenimi modelinin çıkışını daha sonra oluşturmak için kullanacaksınız. Şimdi bu ayarı yapalım:

  • Sayfanın başlığı
  • Açıklayıcı metin
  • Web kamerasını etkinleştirmek için kullanılan düğme
  • Web kamerası akışını oluşturmak için kullanılan bir video etiketi

Bu özellikleri ayarlamak için index.html dosyasını açın ve mevcut kodu aşağıdakilerle değiştirin:

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 öğeleri fark edin:

  • Başlık için bir <h1> etiketi ve bazı <p> etiketleri, ayrıca sayfanın nasıl kullanılacağıyla ilgili bazı bilgiler eklediniz. Burada özel bir durum 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 section öğesine "görünmez" sınıfını vereceksiniz. Bu sayede, model hazır olduğunda ve web kamerasını etkinleştir düğmesini tıklamanın güvenli olduğu zamanlarda kullanıcıya görsel olarak bilgi verebilirsiniz.
  • CSS'nizde stilini belirleyeceğiniz enable webcam (web kamerasını etkinleştir) düğmesini eklediniz.
  • Ayrıca, web kamerası girişinizi yayınlayacağınız bir video etiketi de eklediniz. Bunu kısa süre içinde JavaScript kodunuzda ayarlayacaksınız.

Çıkışı şu anda önizlerseniz aşağıdaki gibi görünür:

b1bfb8c3de68845c.png

6. Stil ekle

Öğe varsayılanları

Öncelikle, yeni eklediğimiz HTML öğelerinin doğru şekilde oluşturulmasını sağlamak için bu öğelere stil 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 istediğimizde veya model henüz hazır değilse demo alanının kullanılamaz görünmesini istediğimizde) yardımcı olacak bazı 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;
}

Mükemmel! İhtiyacınız olan tek şey bu. Stillerinizi yukarıdaki 2 kodla başarıyla üzerine yazdıysanız canlı önizlemeniz artık aşağıdaki gibi görünmelidir:

336899a78cf80fcb.png

HTML'de varsayılan olarak "invisible" sınıfı uygulandığından, demo alanındaki metnin ve düğmenin kullanılamadığını fark edin. 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 öğelerine referans verme

Öncelikle, sayfada daha sonra kodumuzda değiştirmeniz veya erişmeniz gerekecek olan önemli bölümlere 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ı yayınını getirme

Ardından, aşağıdaki kodu kopyalayıp yapıştırarak yukarıda tanımladığımız daha önce boş olan enableCam işlevinin kodunu doldurun:

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 edebilmek için geçici bir kod ekleyin.

Aşağıdaki kod, modelinizin yüklendiğini varsayacak ve kamera düğmesini etkinleştirecek. Böylece düğmeyi tıklayabileceksiniz. Bu kodun tamamını bir sonraki adımda değiştireceksiniz. Bu nedenle, kodu biraz sonra 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');

Mükemmel! Kodu çalıştırıp düğmeyi mevcut haliyle tıkladıysanız aşağıdakine benzer bir sonuç görmeniz gerekir:

95442d7227216528.jpeg

8. Makine öğrenimi modeli kullanımı

Modeli yükleme

Artık COCO-SSD modelini yüklemeye hazırsınız.

Başlatma işlemi tamamlandığında web sayfanızda demo alanını ve düğmesini 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ünümü yeniledikten sonra, sayfa yüklendikten birkaç saniye sonra (ağ hızınıza bağlı olarak) model kullanıma hazır olduğunda web kamerasını etkinleştir düğmesinin otomatik olarak gösterildiğini fark edeceksiniz. Ancak predictWebcam işlevini de yapıştırdınız. Şu anda kodumuz herhangi bir işlem yapmadığı için bunu tam olarak tanımlamanın zamanı geldi.

Bir sonraki adıma geçin.

Web kamerasından alınan bir kareyi sınıflandırma

Tarayıcı hazır olduğunda uygulamanın web kamerası akışından sürekli olarak bir kare almasına ve sınıflandırılması için modeli geçirmesine izin vermek üzere 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. Güven düzeyi belirli bir seviyenin ü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()'tir.

TensorFlow.js için önceden hazırlanmış tüm modellerde, makine öğrenimi çıkarımını gerçekleştiren bu tür bir işlev bulunur (işlevin adı modelden modele değişebilir, bu nedenle ayrıntılar için dokümanları inceleyin).

Çıkarım, basitçe bir girdi alıp makine öğrenimi modelinden (temelde birçok matematiksel işlem) geçirerek bazı sonuçlar sağlama işlemidir. TensorFlow.js'nin hazır modelleriyle tahminlerimizi JSON nesneleri şeklinde döndürdüğümüz için kullanımı kolaydır.

Bu tahmin işlevinin tüm ayrıntılarını COCO-SSD modeliyle ilgili GitHub dokümanlarımızda bulabilirsiniz. Bu işlev, arka planda birçok zorlu görevi yerine getirir: Resim, video, tuval vb. gibi "resim benzeri" tüm nesneleri parametre olarak kabul edebilir. Bu kodu kendiniz yazmanız gerekmediği ve "kullanıma hazır" şekilde çalıştırabileceğiniz için önceden hazırlanmış modelleri kullanmak size çok zaman ve emek kazandırabilir.

Bu kodu çalıştırdığınızda aşağıdaki gibi bir resim elde etmeniz gerekir:

8f9bad6e49e646b.png

Son olarak, aynı anda birden fazla nesneyi algılayan kod örneğini aşağıda bulabilirsiniz:

a2c73a72cf976b22.jpeg

Harika! Eski bir telefonu kullanarak Nest Cam gibi bir cihaz oluşturmanın ne kadar kolay olacağını hayal edebilirsiniz. Bu cihaz, köpeğiniz veya kediniz kanepede olduğunda sizi uyarır. Kodunuzla ilgili sorun yaşıyorsanız bir şeyi yanlış kopyalayıp kopyalamadığınızı görmek için buradan son çalışan sürümümü kontrol edin.

9. Tebrikler

Tebrikler, TensorFlow.js'yi ve makine öğrenimini web tarayıcısında kullanmaya yönelik ilk adımlarınızı attınız. Şimdi bu mütevazı başlangıçları yaratıcı bir şeye dönüştürme sırası sizde. Ne oluşturacaksınız?

Özet

Bu codelab'de:

  • TensorFlow.js'nin diğer TensorFlow biçimlerine göre avantajlarını öğrendi.
  • Ö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şturdu. Bu web sayfasında şunlar yer alıyor:
  • İçerik için HTML iskeleti oluşturma
  • HTML öğeleri ve sınıfları için stiller tanımlama
  • HTML ile etkileşim kurmak ve web kamerasının varlığını algılamak için JavaScript iskeleti oluşturma
  • Önceden eğitilmiş bir TensorFlow.js modelini yükleme
  • Yüklenen modeli kullanarak web kamerası akışını sürekli olarak sınıflandırma ve görüntüdeki nesnelerin etrafına sınırlayıcı kutu çizme.

Sonraki adımlar

Yaptıklarınızı bizimle paylaşın. Bu codelab için oluşturduğunuz öğeleri diğer yaratıcı kullanım alanlarına da kolayca uygulayabilirsiniz. Yaratıcı olmaya ve yarışma bittikten sonra da kod yazmaya devam etmenizi öneririz.

(Belki de WebSockets kullanarak belirli bir nesneyi gördüğünde başka bir cihaza bildirim göndermek için basit bir sunucu tarafı katmanı ekleyebilirsiniz. Bu, eski bir akıllı telefonu geri dönüştürmek ve ona yeni bir amaç kazandırmak için harika bir yöntemdir. Olasılıklar sınırsızdır.)

  • Projenizin TensorFlow blogumuzda yer alması veya gelecekteki TensorFlow etkinliklerinde sergilenmesi için sosyal medyada #MadeWithTFJS hashtag'ini kullanarak bizi etiketleyin.

Daha ayrıntılı bilgi için diğer TensorFlow.js Codelab uygulamaları

Göz atabileceğiniz web siteleri