Tensorflow.js ile Ön Uç Geliştiriciler için Makine Öğrenimi

Yayınlanan: 2022-03-10

Kısa özet ↬ JavaScript'i ve Tensorflow.js gibi çerçeveleri kullanmak, makine öğrenimi hakkında daha fazla bilgi edinmek ve başlamak için harika bir yoldur. Bu makalede Charlie Gerard, Tensorflow.js kullanılarak şu anda kullanılabilen üç ana özelliği ele alıyor ve ön uçta makine öğrenimi kullanmanın sınırlarına ışık tutuyor.

Makine öğrenimi genellikle veri bilimcilerin ve Python geliştiricilerinin alanına aitmiş gibi gelir. Bununla birlikte, son birkaç yılda, JavaScript dahil olmak üzere farklı programlama dillerinde daha erişilebilir hale getirmek için açık kaynaklı çerçeveler oluşturuldu. Bu makalede, birkaç örnek proje aracılığıyla tarayıcıda makine öğrenimi kullanmanın farklı olanaklarını keşfetmek için Tensorflow.js'yi kullanacağız.

Makine Öğrenimi Nedir?

Bazı kodlara dalmaya başlamadan önce, makine öğreniminin ne olduğu ve bazı temel kavramlar ve terminoloji hakkında kısaca konuşalım.

Tanım

Yaygın bir tanım, bilgisayarların açıkça programlanmadan verilerden öğrenme yeteneği olmasıdır.

Bunu geleneksel programlamayla karşılaştırırsak, bilgisayarların verideki kalıpları tanımlamasına ve tam olarak ne arayacağını söylememize gerek kalmadan tahminler üretmesine izin verdiğimiz anlamına gelir.

Dolandırıcılık tespiti örneğini ele alalım. Bir işlemi neyin hileli yapıp yapmadığını bilmek için belirlenmiş bir kriter yoktur; sahtekarlıklar herhangi bir ülkede, herhangi bir hesapta, herhangi bir müşteriyi, herhangi bir zamanda vb. Tüm bunları manuel olarak izlemek neredeyse imkansız olurdu.

Bununla birlikte, yıllar boyunca toplanan sahte harcamalar hakkında önceki verileri kullanarak, herhangi bir yeni işlem verilebilecek bir model oluşturmak için bu verilerdeki kalıpları anlamak için bir makine öğrenimi algoritması eğitebilir ve dolandırıcılık olup olmadığını tahmin edebiliriz. tam olarak ne arayacağını söyler.

Atlamadan sonra daha fazlası! Aşağıdan okumaya devam edin ↓

Temel Kavramlar

Aşağıdaki kod örneklerini anlamak için önce birkaç yaygın terimi ele almamız gerekiyor.

modeli

Bir veri kümesiyle bir makine öğrenimi algoritması eğittiğinizde, model bu eğitim sürecinin çıktısıdır. Bu biraz, girdi olarak yeni veri alan ve çıktı olarak bir tahmin üreten bir fonksiyona benziyor.

Etiketler ve Özellikler

Etiketler ve özellikler, eğitim sürecinde bir algoritmayı beslediğiniz verilerle ilgilidir.

Bir etiket, veri kümenizdeki her girişi nasıl sınıflandıracağınızı ve onu nasıl etiketleyeceğinizi gösterir. Örneğin, veri kümemiz farklı hayvanları tanımlayan bir CSV dosyasıysa, etiketlerimiz "kedi", "köpek" veya "yılan" gibi kelimeler olabilir (her bir hayvanın neyi temsil ettiğine bağlı olarak).

Özellikler ise veri kümenizdeki her girişin özellikleridir. Hayvanlar örneğimiz için, “bıyık, miyav”, “oyuncu, havlar”, “sürüngen, yaygın” vb. şeyler olabilir.

Bunu kullanarak, bir makine öğrenimi algoritması, gelecekteki tahminler için kullanacağı özellikler ve etiketleri arasında bir miktar korelasyon bulabilecektir.

Nöral ağlar

Sinir ağları, yapay nöron katmanları kullanarak beynin çalışma şeklini taklit etmeye çalışan bir dizi makine öğrenme algoritmasıdır.

Bu makalede nasıl çalıştıkları hakkında derinlemesine bilgi vermemize gerek yok, ancak daha fazlasını öğrenmek istiyorsanız, işte size gerçekten iyi bir video:

Artık makine öğreniminde yaygın olarak kullanılan birkaç terimi tanımladığımıza göre, JavaScript ve Tensorflow.js çerçevesi kullanılarak neler yapılabileceğinden bahsedelim.

Özellikler

Şu anda üç özellik mevcuttur:

Önceden eğitilmiş bir model kullanarak,
Transfer öğrenme,
Kendi modelinizi tanımlama, çalıştırma ve kullanma.

En basitinden başlayalım.

1. Önceden Eğitilmiş Bir Model Kullanmak

Çözmeye çalıştığınız soruna bağlı olarak, belirli bir veri seti ile önceden eğitilmiş ve kodunuzdan yararlanabileceğiniz ve içe aktarabileceğiniz belirli bir amaç için bir model olabilir.

Örneğin, bir resmin kedi resmi olup olmadığını tahmin etmek için bir web sitesi oluşturduğumuzu varsayalım. Popüler bir görüntü sınıflandırma modeli MobileNet olarak adlandırılır ve Tensorflow.js ile önceden eğitilmiş bir model olarak mevcuttur.

Bunun için kod şöyle görünecektir:

 <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Cat detection</title> <script src="https://cdn.jsdelivr.net/npm/@tensorflow/[email protected]"> </script> <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/[email protected]"> </script> </head> <body> <img alt="cat laying down" src="cat.jpeg"/> <script> const img = document.getElementById('image'); const predictImage = async () => { console.log("Model loading..."); const model = await mobilenet.load(); console.log("Model is loaded!") const predictions = await model.classify(img); console.log('Predictions: ', predictions); } predictImage(); </script> </body> </html>

HTML'mizin başlığına Tensorflow.js ve MobileNet modelini içe aktararak başlıyoruz:

 <script src="https://cdnjs.cloudflare.com/ajax/libs/tensorflow/1.0.1/tf.js"> </script> <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/[email protected]"> </script>

Ardından, gövdenin içinde tahminler için kullanılacak bir görüntü elemanımız var:

 <img alt="cat laying down" src="cat.jpeg"/>

Ve son olarak, script etiketinin içinde, önceden eğitilmiş MobileNet modelini yükleyen ve image etiketinde bulunan resmi sınıflandıran JavaScript koduna sahibiz. Olasılık puanına göre sıralanmış 3 tahminden oluşan bir dizi döndürür (ilk öğe en iyi tahmindir).

 const predictImage = async () => { console.log("Model loading..."); const model = await mobilenet.load(); console.log("Model is loaded!") const predictions = await model.classify(img); console.log('Predictions: ', predictions); } predictImage();

Ve bu kadar! Tensorflow.js ile tarayıcıda önceden eğitilmiş bir modeli bu şekilde kullanabilirsiniz!

Not : MobileNet modelinin başka neleri sınıflandırabileceğine bir göz atmak isterseniz, Github'da mevcut olan farklı sınıfların bir listesini bulabilirsiniz.

Bilinmesi gereken önemli bir nokta, önceden eğitilmiş bir modelin tarayıcıya yüklenmesi biraz zaman alabilir (bazen 10 saniyeye kadar), bu nedenle muhtemelen kullanıcıların etkilenmemesi için arayüzünüzü önceden yüklemek veya uyarlamak isteyeceksiniz.

NPM modülü olarak Tensorflow.js'yi kullanmayı tercih ederseniz, bunu modülü şu şekilde içe aktararak yapabilirsiniz:

 import * as mobilenet from '@tensorflow-models/mobilenet';

CodeSandbox'ta bu örnekle oynamaktan çekinmeyin.

Şimdi önceden eğitilmiş bir modelin nasıl kullanılacağını gördüğümüze göre, mevcut ikinci özelliğe bakalım: transfer öğrenme.

2. Aktarım Öğrenimi

Transfer öğrenimi, önceden eğitilmiş bir modeli özel eğitim verileriyle birleştirme yeteneğidir. Bunun anlamı, her şeyi sıfırdan oluşturmak zorunda kalmadan bir modelin işlevselliğinden yararlanabileceğiniz ve kendi örneklerinizi ekleyebileceğinizdir.

Örneğin, bir görüntü sınıflandırma modeli oluşturmak için binlerce görüntü ile bir algoritma eğitilmiştir ve kendi modelinizi oluşturmak yerine transfer öğrenme, yeni bir görüntü sınıflandırıcı oluşturmak için yeni özel görüntü örneklerini önceden eğitilmiş modelle birleştirmenize olanak tanır. Bu özellik, daha özelleştirilmiş bir sınıflandırıcıya sahip olmayı gerçekten hızlı ve kolay hale getirir.

Bunun kodda nasıl görüneceğine dair bir örnek sağlamak için, önceki örneğimizi yeniden tasarlayalım ve yeni görüntüleri sınıflandırabilmemiz için değiştirelim.

Not : Sonuç, burada canlı olarak deneyebileceğiniz aşağıdaki deneydir.

Aşağıda bu kurulumun en önemli kısmının birkaç kod örneği verilmiştir, ancak kodun tamamına bir göz atmak isterseniz, onu bu CodeSandbox'ta bulabilirsiniz.

Hala Tensorflow.js ve MobileNet'i içe aktararak başlamamız gerekiyor, ancak bu sefer ayrıca bir KNN (k-en yakın komşu) sınıflandırıcı eklememiz gerekiyor:

 <!-- Load TensorFlow.js --> <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script> <!-- Load MobileNet --> <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/mobilenet"></script> <!-- Load KNN Classifier --> <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/knn-classifier"></script>

Bir sınıflandırıcıya ihtiyaç duymamızın nedeni (yalnızca MobileNet modülünü kullanmak yerine) daha önce hiç görülmemiş özel örnekler eklememizdir, bu nedenle KNN sınıflandırıcı her şeyi bir araya getirmemize ve birleştirilen veriler üzerinde tahminler çalıştırmamıza izin verecektir.

Ardından, kamera beslemesindeki görüntüleri kullanmak için kedinin görüntüsünü bir video etiketiyle değiştirebiliriz.

 <video autoplay width="227" height="227"></video>

Son olarak, bazı video örneklerini kaydetmek ve tahminleri başlatmak için etiket olarak kullanacağımız sayfaya birkaç düğme eklememiz gerekecek.

 <section> <button class="button">Left</button> <button class="button">Right</button> <button class="test-predictions">Test</button> </section>

Şimdi, birkaç önemli değişken ayarlayarak başlayacağımız JavaScript dosyasına geçelim:

 // Number of classes to classify const NUM_CLASSES = 2; // Labels for our classes const classes = ["Left", "Right"]; // Webcam Image size. Must be 227. const IMAGE_SIZE = 227; // K value for KNN const TOPK = 10; const video = document.getElementById("webcam");

Bu özel örnekte, web kamerası girişini başımız sola veya sağa yatırma arasında sınıflandırabilmek istiyoruz, bu nedenle left ve right olarak etiketlenmiş iki sınıfa ihtiyacımız var.

227 olarak ayarlanan görüntü boyutu, video öğesinin piksel cinsinden boyutudur. Tensorflow.js örneklerine göre, MobileNet modelinin eğitildiği veri biçimiyle eşleşmesi için bu değerin 227'ye ayarlanması gerekir. Yeni verilerimizi sınıflandırabilmesi için ikincisinin aynı formata uyması gerekir.

Daha büyük olmasına gerçekten ihtiyacınız varsa, mümkündür ancak verileri KNN sınıflandırıcısına beslemeden önce dönüştürmeniz ve yeniden boyutlandırmanız gerekecektir.

Ardından, K değerini 10'a ayarlıyoruz. KNN algoritmasındaki K değeri önemlidir çünkü yeni girdimizin sınıfını belirlerken hesaba kattığımız örnek sayısını temsil eder.

Bu durumda, 10 değeri, bazı yeni veriler için etiketi tahmin ederken, yeni girdimizi nasıl sınıflandıracağımızı belirlemek için eğitim verilerinden en yakın 10 komşuya bakacağımız anlamına gelir.

Son olarak, video öğesini alıyoruz. Mantık için, modeli ve sınıflandırıcıyı yükleyerek başlayalım:

 async load() { const knn = knnClassifier.create(); const mobilenetModule = await mobilenet.load(); console.log("model loaded"); }

Ardından, video beslemesine erişelim:

 navigator.mediaDevices .getUserMedia({ video: true, audio: false }) .then(stream => { video.srcObject = stream; video.width = IMAGE_SIZE; video.height = IMAGE_SIZE; });

Bunu takiben, örnek verilerimizi kaydetmek için bazı düğme olayları ayarlayalım:

 setupButtonEvents() { for (let i = 0; i < NUM_CLASSES; i++) { let button = document.getElementsByClassName("button")[i]; button.onmousedown = () => { this.training = i; this.recordSamples = true; }; button.onmouseup = () => (this.training = -1); } }

Web kamerası görüntü örneklerini alıp yeniden biçimlendirecek ve MobileNet modülü ile birleştirecek fonksiyonumuzu yazalım:

 // Get image data from video element const image = tf.browser.fromPixels(video); let logits; // 'conv_preds' is the logits activation of MobileNet. const infer = () => this.mobilenetModule.infer(image, "conv_preds"); // Train class if one of the buttons is held down if (this.training != -1) { logits = infer(); // Add current image to classifier this.knn.addExample(logits, this.training); }

Son olarak, birkaç web kamerası görüntüsü topladıktan sonra, tahminlerimizi aşağıdaki kodla test edebiliriz:

 logits = infer(); const res = await this.knn.predictClass(logits, TOPK); const prediction = classes[res.classIndex];

Ve son olarak, artık ihtiyacımız olmadığı için web kamerası verilerini atabilirsiniz:

 // Dispose image when done image.dispose(); if (logits != null) { logits.dispose(); }

Bir kez daha, kodun tamamına bir göz atmak isterseniz, onu daha önce bahsedilen CodeSandbox'ta bulabilirsiniz.

3. Tarayıcıda Model Eğitimi

Son özellik, bir modeli tamamen tarayıcıda tanımlamak, eğitmek ve çalıştırmaktır. Bunu göstermek için, Süsenleri tanımanın klasik örneğini oluşturacağız.

Bunun için, İrisleri açık kaynaklı bir veri kümesine dayalı olarak Setosa, Virginica ve Versicolor olmak üzere üç kategoride sınıflandırabilen bir sinir ağı oluşturacağız.

Başlamadan önce, canlı demoya bir bağlantı ve tam kodla oynamak istiyorsanız CodeSandbox burada.

Her makine öğrenimi projesinin merkezinde bir veri kümesi bulunur. Atmamız gereken ilk adımlardan biri bu veri setini bir eğitim seti ve bir test seti olarak bölmek.

Bunun nedeni, algoritmamızı eğitmek için eğitim setimizi ve tahminlerimizin doğruluğunu kontrol etmek, modelimizin kullanıma hazır olup olmadığını veya ince ayar yapılması gerekip gerekmediğini doğrulamak için test setimizi kullanacağız.

Not : Kolaylaştırmak için, eğitim setini ve test setini CodeSanbox'ta bulabileceğiniz iki JSON dosyasına ayırdım.

Eğitim seti 130 öğe ve test seti 14 içerir. Bu verilerin neye benzediğine bir göz atarsanız, şöyle bir şey göreceksiniz:

 { "sepal_length": 5.1, "sepal_width": 3.5, "petal_length": 1.4, "petal_width": 0.2, "species": "setosa" }

Gördüğümüz, çanak yaprağın uzunluğu ve genişliği için dört farklı özelliğin yanı sıra türler için bir etikettir.

Bunu Tensorflow.js ile kullanabilmek için, bu verileri çerçevenin anlayacağı bir formatta şekillendirmemiz gerekiyor, bu durumda eğitim verileri için, başına dört özellik içeren 130 örnek için [130, 4] olacaktır. iris.

 import * as trainingSet from "training.json"; import * as testSet from "testing.json"; const trainingData = tf.tensor2d( trainingSet.map(item => [ item.sepal_length, item.sepal_width, item.petal_length, item.petal_width ]), [130, 4] ); const testData = tf.tensor2d( testSet.map(item => [ item.sepal_length, item.sepal_width, item.petal_length, item.petal_width ]), [14, 4] );

Ardından, çıktı verilerimizi de şekillendirmemiz gerekiyor:

 const output = tf.tensor2d(trainingSet.map(item => [ item.species === 'setosa' ? 1 : 0, item.species === 'virginica' ? 1 : 0, item.species === 'versicolor' ? 1 : 0 ]), [130,3])

Ardından, verilerimiz hazır olduğunda modeli oluşturmaya geçebiliriz:

 const model = tf.sequential(); model.add(tf.layers.dense( { inputShape: 4, activation: 'sigmoid', units: 10 } )); model.add(tf.layers.dense( { inputShape: 10, units: 3, activation: 'softmax' } ));

Yukarıdaki kod örneğinde, sıralı bir model oluşturarak başlıyoruz, bir giriş ve çıkış katmanı ekliyoruz.

İçeride kullanıldığını görebileceğiniz parametreler ( inputShape , activation ve units ) oluşturduğunuz modele, kullanılan veri türüne vb. bağlı olarak değişebileceğinden bu yazının kapsamı dışındadır.

Modelimiz hazır olduğunda, onu verilerimizle eğitebiliriz:

 async function train_data(){ for(let i=0;i<15;i++){ const res = await model.fit(trainingData, outputData,{epochs: 40}); } } async function main() { await train_data(); model.predict(testSet).print(); }

Bu işe yararsa, test verilerini özel kullanıcı girişleriyle değiştirmeye başlayabilirsiniz.

Ana fonksiyonumuzu çağırdığımızda, tahminin çıktısı şu üç seçenekten biri gibi görünecektir:

 [1,0,0] // Setosa [0,1,0] // Virginica [0,0,1] // Versicolor

Tahmin, üç sınıftan birine ait verilerin olasılığını temsil eden üç sayıdan oluşan bir dizi döndürür. 1'e en yakın sayı en yüksek tahmindir.

Örneğin, sınıflandırmanın çıktısı [0.0002, 0.9494, 0.0503] ise dizinin ikinci öğesi en yüksek olanıdır, bu nedenle model yeni girdinin büyük olasılıkla bir Virginica olacağını öngörmüştür.

Ve Tensorflow.js'deki basit bir sinir ağı için bu kadar!

Yalnızca küçük bir Iris veri kümesinden bahsettik, ancak daha büyük veri kümelerine geçmek veya görüntülerle çalışmak istiyorsanız, adımlar aynı olacaktır:

Verilerin toplanması;
Eğitim ve test seti arasında bölme;
Tensorflow.js'nin anlayabilmesi için verileri yeniden biçimlendirmek;
Algoritmanızı seçmek;
Verileri sığdırmak;
tahmin.

Oluşturulan modeli başka bir uygulamaya yükleyebilmek ve yeni verileri tahmin edebilmek için kaydetmek istiyorsanız, aşağıdaki satır ile yapabilirsiniz:

 await model.save('file:///path/to/my-model'); // in Node.js

Not : Bir modelin nasıl kaydedileceği konusunda daha fazla seçenek için bu kaynağa bakın.

limitler

Bu kadar! Tensorflow.js kullanılarak şu anda mevcut olan üç ana özelliği ele aldık!

Bitirmeden önce, makine öğrenimini ön uçta kullanmanın bazı sınırlarından kısaca bahsetmenin önemli olduğunu düşünüyorum.

1. Performans

Önceden eğitilmiş bir modeli harici bir kaynaktan içe aktarmak, uygulamanız üzerinde performans etkisine sahip olabilir. Örneğin, bazı nesne algılama modeli 10 MB'tan fazladır ve bu da web sitenizi önemli ölçüde yavaşlatacaktır. Algılanan performansınızı iyileştirmek için kullanıcı deneyiminizi düşündüğünüzden ve varlıklarınızın yüklenmesini optimize ettiğinizden emin olun.

2. Girilen Verilerin Kalitesi

Sıfırdan bir model oluşturursanız, kendi verilerinizi toplamanız veya açık kaynaklı bir veri kümesi bulmanız gerekir.

Herhangi bir veri işleme yapmadan veya farklı algoritmalar denemeden önce, giriş verilerinizin kalitesini kontrol ettiğinizden emin olun. Örneğin, metin parçalarındaki duyguları tanımak için bir duygu analizi modeli oluşturmaya çalışıyorsanız, modelinizi eğitmek için kullandığınız verilerin doğru ve çeşitli olduğundan emin olun. Kullanılan verilerin kalitesi düşükse, eğitiminizin çıktısı işe yaramaz olacaktır.

3. Sorumluluk

Açık kaynaklı önceden eğitilmiş bir model kullanmak çok hızlı ve zahmetsiz olabilir. Ancak bu aynı zamanda nasıl oluşturulduğunu, veri kümesinin neyden yapıldığını ve hatta hangi algoritmanın kullanıldığını her zaman bilemeyeceğiniz anlamına gelir. Bazı modellere "kara kutular" denir, yani belirli bir çıktıyı nasıl tahmin ettiklerini gerçekten bilmiyorsunuzdur.

Ne oluşturmaya çalıştığınıza bağlı olarak, bu bir sorun olabilir. Örneğin, tarama görüntülerine dayalı olarak birinin kanser olma olasılığını tespit etmeye yardımcı olması için bir makine öğrenimi modeli kullanıyorsanız, yanlış negatif (model, bir kişinin gerçekten kanser olduğunda kanser olmadığını tahmin ediyordu), orada gerçek bir yasal sorumluluk olabilir ve modelin neden belirli bir tahminde bulunduğunu açıklayabilmeniz gerekir.

Özet

Sonuç olarak, JavaScript'i ve Tensorflow.js gibi çerçeveleri kullanmak, makine öğrenimi hakkında daha fazla bilgi edinmek ve başlamak için harika bir yoldur. Üretime hazır bir uygulama muhtemelen Python gibi bir dilde oluşturulsa da JavaScript, geliştiricilerin farklı özelliklerle oynamasını ve sonunda devam etmeden ve başka bir dil öğrenmeye zaman ayırmadan önce temel kavramları daha iyi anlamasını gerçekten erişilebilir kılar. dilim.

Bu eğitimde, yalnızca Tensorflow.js kullanarak nelerin mümkün olduğunu ele aldık, ancak diğer kitaplıkların ve araçların ekosistemi büyüyor. Magenta.js ile müzik gibi diğer alanlarla birlikte makine öğrenimini kullanmayı keşfetmenize veya tahmin.js kullanarak bir web sitesinde kullanıcı gezinmesini tahmin etmenize olanak tanıyan daha özel çerçeveler de mevcuttur!

Araçlar daha performanslı hale geldikçe, JavaScript'te makine öğrenimi etkin uygulamalar oluşturma olanakları muhtemelen giderek daha heyecan verici hale gelecek ve topluluk onu erişilebilir kılmak için çaba sarf ettiğinden, şimdi onun hakkında daha fazla bilgi edinmek için iyi bir zaman.

Diğer Kaynaklar

Daha fazlasını öğrenmekle ilgileniyorsanız, işte birkaç kaynak:

Diğer Çerçeveler ve Araçlar

ml5.js
ml.js
beyin.js
Keras.js
PoseNet
Tensorflow oyun alanı

Örnekler, Modeller ve Veri Kümeleri

Tensorflow.js modelleri
Tensorflow.js örnekleri
veri kümeleri

Esin

öğretilebilir makine
yapay zeka deneyleri
AIJS.rocks
oluşturulabilirlik

Okuduğunuz için teşekkürler!