Sebelumnya

Berikutnya

Latihan - Latih model pembelajaran mesin Anda dan bangun antarmuka web untuk menggunakannya

Selesai

Sekarang, Anda dapat mulai melatih model pembelajaran mesin kustom menggunakan gambar yang berbeda dari yang Anda gunakan di aplikasi Anda. Yang ada di aplikasi Anda akan digunakan untuk menguji akurasi model dalam melakukan inferensi. Anda akan membuat model itu sendiri di antarmuka Custom Vision AI menggunakan set gambar yang berbeda.

Catatan

Anda hanya akan melatih beberapa gambar, yang dalam sistem produksi tidak memadai untuk pembuatan model yang berkualitas. Set pelatihan ini hanya untuk tujuan demo.

Unduh file terkompresi ini dari dua belas gambar pelatihan, dan ekstrak ke komputer lokal Anda.

Custom Vision AI

Di browser, navigasikan ke Custom Vision AI dan masuk. Buat proyek baru bernama Chocolate atau Dalmatian. Di popup, berikan deskripsi proyek Anda, dan alokasikan Sumber Daya sehingga model Anda dapat dilatih di cloud. Buat yang baru, jika diperlukan.

Pastikan untuk memberikan proyek ini jenis Klasifikasi karena hanya akan menentukan di antara jenis. Ini adalah proyek Jenis Klasifikasi Multikelas, karena akan menawarkan satu tag tunggal per gambar. Pilih Umum (ringkas) karena Anda akan mengekspornya untuk TensorFlow.js.

Melatih model

Sekarang Anda siap untuk melatih pada set gambar Anda.

Dalam folder yang Anda unduh, Anda akan menemukan dua folder, satu berlabel 'es krim' dan yang lainnya 'dalmatian'. Pilih tombol Tambahkan gambar di proyek Custom Vision AI Anda, dan pilih gambar di dalmatian folder . Tandai dalmatian itu. Lakukan proses yang sama untuk folder ice cream, menandai ice cream itu.

Anda sekarang memiliki dua belas gambar pelatihan Anda yang diunggah dan ditandai. Pilih tombol Latih di bagian atas, dan pilih Pelatihan Cepat. Anda akan melihat hasilnya dengan performa yang dianalisis. Uji data Anda pada gambar baru es krim atau dalmatian. Berikut adalah salah satu yang harus dicoba:

Seret gambar ini ke desktop Anda, lalu pilih tombol Uji Cepat di antarmuka Custom Vision AI, dan telusuri untuk menemukan gambar di desktop Anda. Model mengklasifikasikan gambar baru ini sebagai dalmatian!

Unduh model Anda

Pilih tombol Ekspor di bagian atas antarmuka Custom Vision AI untuk mengunduh model Anda dan aset terkait. Pilih TensorFlow sebagai jenis model, dan tensorflow.js di daftar tarik turun. Setelah paket selesai, pilih Unduh.

File zip akan diekspor ke komputer lokal Anda. Ekstrak file ini, dan beri nama folder modelsyang dihasilkan. Di dalam folder ini Anda akan menemukan empat file: file cvexport.manifest, file labels.txt, file model.json, dan weights.bin.

Unggah seluruh folder models ke direktori public aplikasi web Anda.

Sekarang Anda dapat mengintegrasikan file-file ini sehingga dapat digunakan oleh aplikasi.

Mengintegrasikan model ke dalam aplikasi web

Hal pertama yang harus dilakukan adalah memasang paket npm khusus ke aplikasi web Anda, customvision-tfjs. Pustaka ini memungkinkan aplikasi web untuk menggunakan tensorflow.js menggunakan model yang dilatih pada Custom Vision AI.

1. Di file package.json Anda di akar aplikasi web Anda, tambahkan "customvision-tfjs": "^1.0.1", ke daftar dependencies.

2. Dalam file yang sama, tambahkan juga "raw-loader": "^4.0.0", ke daftar devDependencies. Anda memerlukan paket ini untuk mengelola pembacaan file .txt dari aplikasi Vue Anda.

3. Dalam file yang sama, tambahkan "webpack-cli": "^3.3.10" ke devDependencies daftar sehingga Webpack CLI akan dapat digunakan dalam aplikasi, yang diperlukan untuk penguraian file teks.

Hentikan aplikasi web Anda jika berjalan dengan menekan Ctrl+C, dan jalankan npm i dari akar, melalui terminal Anda. Ini akan memasang paket ini.

Sekarang Anda dapat menghidupkan ulang aplikasi web dan terus bekerja (npm run serve).

Selanjutnya, integrasikan paket yang baru saja Anda pasang dengan menambahkan baris ini tepat di bawah tag pembuka <script> di DetectImage.vue:

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

Sekarang, Anda perlu mengizinkan paket pemuat raw untuk membaca dari file labels.txt untuk tag model Anda.

Untuk melakukan ini, buat file baru di akar aplikasi Anda yang disebut webpack.config.js. Dalam file ini, tambahkan kode berikut.

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

Selanjutnya, tambahkan tiga elemen data lagi ke objek data di blok <script> dari DetectImage.vue.

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

Aplikasi sekarang siap untuk menggunakan model, dan daftar label dan membuat array prediksi.

Sekarang, tambahkan kait siklus hidup mounted setelah koma penutup di akhir objek computed.

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();
  },

Saat aplikasi dipasang, metode asinkron ini akan diaktifkan, memberi tahapan array gambar, memuat model, mengurai label, dan menjalankan metode prediksi.

Tambahkan metode prediksi asinkron ke dalam objek methods.

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 };
      });
    },

Metode ini akan menampilkan gambar ke model, dan model akan mengirimkan kembali prediksi dengan peluang akurasinya, dikalikan 100 sehingga ditampilkan sebagai persentase akurasi.

Melengkapi antarmuka pengguna

Terakhir, Anda siap menampilkan prediksi ini di antarmuka pengguna.

Tambahkan <div> di atas penutupan <div> dalam <templat>DetectImage.vue.

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

Kode ini akan menampilkan label dan peluang gambar cocok dengan label ini.

Jika Anda menjalankan aplikasi sekarang, Anda akan melihat prediksi muncul saat Anda memilih Berikutnya untuk memajukan rotasi gambar.

Menambahkan file web.config

Hal terakhir yang Anda butuhkan untuk membuat aplikasi Anda berjalan pada instans Windows di Azure adalah menambahkan file yang disebut web.config di folder public Anda. File ini memungkinkan model .json dibaca oleh server. Tambahkan kode ini ke file tersebut.

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

Terbitkan kode Anda ke GitHub

Sekarang adalah saat yang tepat untuk mendorong basis kode Anda ke GitHub. Buat repositori baru di GitHub dan tautkan basis kode Anda ke sana.

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

Sekarang Anda dapat menggunakan alat Git Visual Studio Code untuk menerapkan dan mendorong kode Anda untuk dikuasai di GitHub.

Lanjutkan