Önceki

Sonraki

Alıştırma - Makine öğrenmesi modelini eğitme ve bunu kullanacak web arabirimini oluşturma

Tamamlandı

Artık, uygulamanızda kullandığınız görüntülerden farklı görüntüler kullanarak özel bir makine öğrenmesi modeli eğitmeye başlayabilirsiniz. Uygulamanızdaki resimler modelin çıkarım yapma işlemindeki doğruluk düzeyini test etmek için kullanılacak. Modelin kendisini, farklı bir resim kümesi kullanarak Özel Görüntü İşleme AI’nin arabiriminde oluşturacaksınız.

Dekont

Yalnızca birkaç resimle eğiteceksiniz; bir üretim sisteminde kaliteli bir model oluşturmak için bu yeterli olmaz. Bu eğitim kümesi yalnızca tanıtım amaçlıdır.

On iki eğitim görüntüsünden oluşan bu sıkıştırılmış dosyayı indirin ve yerel bilgisayarınıza ayıklayın.

Özel Görüntü İşleme AI

Tarayıcıda yapay zeka Özel Görüntü İşleme gidin ve oturum açın. Chocolate veya Dalmaçya adlı yeni bir proje oluşturun. Açılan pencerede projenize bir açıklama verin ve modelinizin bulutta eğitilebilmesi için bir Kaynak ayırın. Gerekirse yeni bir tane oluşturun.

Türler arasında yalnızca belirleyeceği için bu projeye Sınıflandırma türü verdiğinizden emin olun. Bu Çoklu Sınıf Sınıflandırma Türünde bir proje çünkü her resim için tek bir etiket sağlayacak. TensorFlow.js için dışarı aktaracağınız için Genel (sıkıştırılmış) öğesini seçin.

Modelinizi eğitme

Artık resim kümenizle eğitmeye hazırsınız.

İndirdiğiniz klasörün içinde, biri 'ice cream' ve diğeri de 'dalmatian' etiketli iki klasör bulacaksınız. Özel Görüntü İşleme AI projenizde Görüntü ekle düğmesini seçin ve klasördeki dalmatian görüntüleri seçin. Bunları dalmatian olarak etiketleyin. ice cream klasörü için de aynı işlemi yapın ve bunları ice cream olarak etiketleyin.

Şimdi karşıya yüklenmiş ve etiketlenmiş on iki eğitim resminiz vardır. Üst kısımdaki Eğit düğmesini ve ardından Hızlı Eğitim'i seçin. Performans analiziyle birlikte sonuçları göreceksiniz. Verilerinizi yeni dondurma veya dalmaçyalı resmiyle test edin. Şunu deneyebilirsiniz:

Bu resmi masaüstünüzde sürükleyin, ardından Özel Görüntü İşleme AI arabiriminde Hızlı Test düğmesini seçin ve masaüstünüzde resmi bulmak için göz atın. Model bu yeni resmi dalmaçyalı olarak sınıflandırır!

Modelinizi indirme

Modelinizi ve ilişkili varlıklarını indirmek için Özel Görüntü İşleme yapay zeka arabiriminin üst kısmındaki Dışarı Aktar düğmesini seçin. Model türü olarak TensorFlow'u seçin ve tensorflow.js açılan listeden. Paket tamamlandığında İndir'i seçin.

Yerel bilgisayarınıza bir zip dosyası indirilir. Bu dosyayı ayıklayın ve sonuç klasörünü modelsadlandırın. Bu klasörün içinde dört dosya bulacaksınız: cvexport.manifest dosyası, labels.txt dosyası, model.json dosyası ve weights.bin.

models klasörünün tamamını web uygulamanızın public dizinine yükleyin.

Şimdi bu dosyaları uygulamanızda kullanılabilecek şekilde tümleştirebilirsiniz.

Modeli web uygulamasına tümleştirme

İlk yapmanız gereken, customvision-tfjs adlı web uygulamanıza özel bir npm paketi yüklemektir. Bu kitaplık web uygulamasının Özel Görüntü İşleme AI’de eğitilen modelleri kullanarak tensorflow.js’den yararlanmasını sağlar.

1. Web uygulamanızın kökünde yer alan package.json dosyanızda, dependencies listesine "customvision-tfjs": "^1.0.1", öğesine ekleyin.

2. Aynı dosyada devDependencies listesine "raw-loader": "^4.0.0", öğesini ekleyin. Vue uygulamanızdan .txt dosyalarının okunmasını yönetmek için bu pakete ihtiyacınız vardır.

3. Aynı dosyada, Webpack CLI'sinin devDependencies metin dosyası ayrıştırma için gerekli olan uygulama içinde kullanılabilir olması için listeye ekleyin"webpack-cli": "^3.3.10".

Ctrl+C tuşlarına basarak çalışıyorsa web uygulamanızı durdurun ve terminaliniz aracılığıyla kökten çalıştırınnpm i. Bu işlem bu paketi yükler.

Artık web uygulamanızı yeniden başlatabilir ve çalışmaya devam edebilirsiniz (npm run serve).

Sonra, DetectImage.vue dosyasındaki açılış <script> etiketinin hemen altına bu satırı ekleyerek yeni yüklediğiniz paketleri tümleştirin:

import * as cvstfjs from "customvision-tfjs";
import labels from "raw-loader!../../public/models/labels.txt";

Şimdi, ham yükleyici paketinin modelinizin etiketleri için dosyadan labels.txt okumasına izin vermeniz gerekir.

Bunu yapmak için uygulamanızın kökünde webpack.config.js adlı yeni bir dosya oluşturun. Bu dosyaya aşağıdaki kodu ekleyin.

module.exports = {
    module: {
        rules: [
            {
                test: /\.txt$/i,
                use: 'raw-loader',
            },
        ],
    },
};

Ardından, bloğundaki <script>DetectImage.vuenesnesine data üç veri öğesi daha ekleyin.

labels: labels,
model: null,
predictions: []

Uygulama artık modeli ve etiket listesini tüketmeye ve bir tahmin dizisi oluşturmaya hazırdır.

Şimdi, nesnenin sonundaki kapatma virgülünün arkasına bir mounted yaşam döngüsü kancası computed ekleyin.

async mounted() {
    this.image++;
    //load up a new model
    this.model = new cvstfjs.ClassificationModel();
    await this.model.loadModelAsync("models/model.json");
    //parse labels
    this.labels = labels.split("\n").map(e => {
      return e.trim();
    });
    //run prediction
    this.predict();
  },

Uygulama bağlandığında bu zaman uyumsuz yöntem tetiklenerek resim dizisini bir artırır, modeli yükler, etiketleri ayrıştırır ve tahmin yöntemini çalıştırır.

Nesnesine methods zaman uyumsuz tahmin yöntemi ekleyin.

async predict() {
      //execute inference
      let prediction = await this.model.executeAsync(this.$refs.img);
      let label = prediction[0];
      //build up a predictions object by parsing details to labels and probability
      this.predictions = label.map((p, i) => {
        return { index: i, label: this.labels[i], probability: p * 100 };
      });
    },

Bu yöntem modele bir resim gösterir ve model de doğruluğundan türettiği olasılıkla bir tahmin geri döndürür. Olasılık 100 ile çarpılarak doğruluk yüzdesi olarak görüntülenir.

Kullanıcı arabirimini tamamlama

Sonunda, bu tahminleri kullanıcı arabiriminde göstermeye hazırsınız.

<div> şablonuna> yukarıdaki kapanışı <div><DetectImage.vueekleyin.

<div v-for="pred in predictions" :key="pred.index">{{ pred.label }}: {{ pred.probability.toFixed(0) + '%' }}</div>
<div v-if="!predictions.length">hmm.....</div>

Bu kod, etiketi ve bir resmin bu etikete uyma olasılığını görüntüler.

Uygulamanızı şimdi çalıştırırsanız, görüntülerin döndürmesini ilerletmek için İleri'yi seçtiğinizde bir tahmin görmeniz gerekir.

web.config dosyası ekleme

Uygulamanızın Azure’daki bir Windows örneğinde çalışmasını sağlamak için yapmanız gereken son şey public klasörünüze web.config adlı bir dosya eklemektir. Bu dosya .json modelinin sunucu tarafından okunabilmesini sağlar. Bu kodu bu dosyaya ekleyin.

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <staticContent>
      <remove fileExtension=".json"/>
      <mimeMap fileExtension=".json" mimeType="application/json"/>
    </staticContent>
  </system.webServer>
</configuration>

Kodunuzu GitHub’da yayımlama

Şimdi kod tabanınızı GitHub’a göndermek için uygun zamandır. GitHub'da yeni bir depo oluşturun ve kod tabanınızı buna bağlayın.

git remote add origin https://github.com/<your-github-handle>/<repo-name>.git

Artık kodunuzu GitHub’da ana depoya kaydetmek ve göndermek için Visual Studio Code'un Git aracını kullanabilirsiniz.

Devam et