Tutorial: Mengenali logo layanan Azure dalam gambar kamera

Dalam tutorial ini, Anda akan menjelajahi contoh aplikasi yang menggunakan Custom Vision sebagai bagian dari skenario yang lebih besar. Aplikasi AI Visual Provision, aplikasi Xamarin.Forms untuk platform seluler, menganalisis gambar kamera logo layanan Azure lalu menerapkan layanan aktual ke akun Azure pengguna. Di sini Anda akan mempelajari cara menggunakan Visi Kustom dalam koordinasi dengan komponen lain untuk menghadirkan aplikasi ujung-ke-ujung yang berguna. Anda dapat menjalankan seluruh skenario aplikasi untuk diri Anda sendiri, atau Anda hanya dapat menyelesaikan bagian Visi Kustom dari penyiapan dan menjelajahi cara aplikasi menggunakannya.

Tutorial ini akan menunjukkan kepada Anda cara:

  • Buat detektor objek kustom untuk mengenali logo layanan Azure.
  • Hubungkan aplikasi Anda ke Visi Komputer Azure dan Visi Kustom.
  • Buat akun utama layanan Azure untuk menerapkan layanan Azure dari aplikasi.

Jika Anda tidak memiliki langganan Azure, buat akun gratis sebelum Anda memulai.

Prasyarat

Dapatkan kode sumber

Jika Anda ingin menggunakan aplikasi web yang disediakan, kloning atau unduh kode sumber aplikasi dari repositori AI Visual Provision di GitHub. Buka file Sumber/VisualProvision.sln di Visual Studio. Kemudian, Anda akan mengedit beberapa file proyek sehingga Anda dapat menjalankan aplikasi.

Buat detektor objek

Masuk ke situs web Visi Kustom dan buat proyek baru. Tentukan proyek Deteksi Objek dan gunakan domain Logo; ini akan memungkinkan layanan menggunakan algoritma yang dioptimalkan untuk deteksi logo.

New-project window on the Custom Vision website in the Chrome browser

Mengunggah dan menandai gambar

Selanjutnya, latih algoritma deteksi logo dengan mengunggah gambar logo layanan Azure dan menandainya secara manual. Repositori AIVisualProvision mencakup serangkaian gambar pelatihan yang dapat Anda gunakan. Di situs web, pilih tombol Tambahkan gambar pada tab Gambar Pelatihan. Lalu masuk ke folder Dokumen/Gambar/Training_DataSet dari repositori. Anda harus menandai logo secara manual di setiap gambar, jadi jika Anda hanya menguji proyek ini, Anda mungkin hanya ingin mengunggah subkumpulan gambar. Unggah setidaknya 15 instans dari setiap tag yang Anda rencanakan untuk digunakan.

Setelah Anda mengunggah gambar pelatihan, pilih gambar pertama di layar. Jendela penandaan akan muncul. Gambar kotak dan tetapkan tag untuk setiap logo di setiap gambar.

Logo tagging on the Custom Vision website

Aplikasi dikonfigurasi untuk bekerja dengan untai (karakter) tag tertentu. Anda akan menemukan definisi dalam file Source\VisualProvision\Services\Recognition\RecognitionService.cs:

private const string TAG_ACTIVE_DIRECTORY = "ACTIVE_DIRECTORY";
private const string TAG_APP_SERVICE = "APP_SERVICE";
private const string TAG_NOTIFICATION_HUBS = "NOTIFICATION_HUBS";
private const string TAG_MOBILE_APPS = "MOBILE_APPS";
private const string TAG_AZURE_SEARCH = "AZURE_SEARCH";
private const string TAG_AZURE_CDN = "CDN";
private const string TAG_AZURE_MACHINE_LEARNING = "MACHINE_LEARNING";
private const string TAG_AZURE_STORAGE = "STORAGE";
private const string TAG_IOT_EDGE = "IOT_EDGE";
private const string TAG_COSMOS_DB = "COSMOS_DB";
private const string TAG_COGNITIVE_SERVICES = "COGNITIVE_SERVICES";
private const string TAG_SQL_DATABASE = "SQL_DATABASE";
private const string TAG_MYSQL_CLEARDB_DATABASE = "MYSQL_CLEARDB_DATABASE";
private const string TAG_REDIS_CACHE = "REDIS_CACHE";
private const string TAG_APP_INSIGHTS = "APPLICATION_INSIGHTS";
private const string TAG_AZURE_FUNCTIONS = "AZURE_FUNCTIONS";

Setelah Anda menandai gambar, pergi ke kanan untuk menandai yang berikutnya. Tutup jendela penandaan saat Anda selesai.

Melatih detektor objek

Di panel kiri, atur sakelar Tag ke Bertag untuk menampilkan gambar Anda. Kemudian pilih tombol hijau di bagian atas halaman untuk melatih model. Algoritma akan dilatih untuk mengenali tag yang sama dalam gambar baru. Ini juga akan menguji model pada beberapa gambar Anda yang ada untuk menghasilkan skor akurasi.

The Custom Vision website, on the Training Images tab. In this screenshot, the Train button is outlined

Dapatkan URL prediksi

Setelah model dilatih, Anda siap untuk mengintegrasikannya ke dalam aplikasi Anda. Anda harus mendapatkan URL titik akhir (alamat model Anda, yang akan dikueri aplikasi) dan kunci prediksi (untuk memberikan akses aplikasi ke permintaan prediksi). Pada tab Kinerja, pilih tombol URL Prediksi di bagian atas halaman.

The Custom Vision website, showing a Prediction API window that displays a URL address and API key

Salin URL titik akhir dan nilai Prediction-Key ke bidang yang sesuai di file Source\VisualProvision\AppSettings.cs:

// Custom Vision
public const string CustomVisionPredictionUrl = "INSERT YOUR COMPUTER VISION API URL HERE FOR MAGNETS RECOGNITION";
public const string CustomVisionPredictionKey = "INSERT YOUR COMPUTER VISION PREDICTION KEY HERE FOR MAGNETS RECOGNITION";

Memeriksa penggunaan Visi Kustom

Buka file Source/VisualProvision/Services/Recognition/CustomVisionService.cs untuk melihat bagaimana aplikasi menggunakan kunci Visi Kustom dan URL titik akhir Anda. Metode PredictImageContentsAsync mengambil aliran byte file gambar bersama dengan token pembatalan (untuk manajemen tugas asinkron), memanggil API prediksi Visi Kustom, dan mengembalikan hasil prediksi.

public async Task<PredictionResult> PredictImageContentsAsync(Stream imageStream, CancellationToken cancellationToken)
{
    var client = new HttpClient();
    client.DefaultRequestHeaders.Add("Prediction-key", AppSettings.CustomVisionPredictionKey);

    byte[] imageData = StreamToByteArray(imageStream);

    HttpResponseMessage response;
    using (var content = new ByteArrayContent(imageData))
    {
        content.Headers.ContentType = new MediaTypeHeaderValue("application/octet-stream");
        response = await client.PostAsync(AppSettings.CustomVisionPredictionUrl, content);
    }

    var resultJson = await response.Content.ReadAsStringAsync();
    return JsonConvert.DeserializeObject<PredictionResult>(resultJson);
}

Hasil ini mengambil bentuk instans PredictionResult, yang berisi daftar instans Prediction. Prediksi berisi tag yang terdeteksi dan lokasi kotak pembatasnya di gambar.

public class Prediction
{
    public double Probability { get; set; }

    public string TagId { get; set; }

    public string TagName { get; set; }

    public BoundingBox BoundingBox { get; set; }
}

Untuk mempelajari selengkapnya tentang cara aplikasi menangani data ini, mulailah dengan metode GetResourcesAsync. Metode ini ditentukan dalam file Source\VisualProvision\Services\Recognition\RecognitionService.cs.

Tambahkan Visi Komputer

Bagian Visi Kustom dari tutorial telah selesai. Jika Anda ingin menjalankan aplikasi, Anda juga harus mengintegrasikan layanan Visi Komputer. Aplikasi ini menggunakan fitur pengenalan teks Visi Komputasi untuk melengkapi proses deteksi logo. Logo Azure dapat dikenali dengan tampilannya atau dengan teks yang dicetak di dekatnya. Tidak seperti model Visi Komputasi, Visi Komputer dilatih untuk melakukan operasi tertentu pada gambar atau video.

Berlangganan ke layanan Visi Komputer untuk mendapatkan URL kunci dan titik akhir. Untuk bantuan tentang langkah ini, lihat Cara mendapatkan kunci.

The Computer Vision service in the Azure portal, with the Quickstart menu selected. A link for keys is outlined, as is the API endpoint URL

Selanjutnya, buka file Source\VisualProvision\AppSettings.cs dan isi variabel ComputerVisionEndpoint dan ComputerVisionKey dengan nilai yang benar.

// Computer Vision
public const string ComputerVisionEndpoint = "INSERT COMPUTER VISION ENDPOINT HERE FOR HANDWRITING";
public const string ComputerVisionKey = "INSERT YOUR COMPUTER VISION KEY HERE FOR HANDWRITING";

Membuat perwakilan layanan

Aplikasi ini memerlukan akun perwakilan layanan Azure untuk menerapkan layanan ke langganan Azure Anda. Perwakilan layanan memungkinkan Anda mendelegasikan izin tertentu ke aplikasi menggunakan kontrol akses berbasis peran Azure. Untuk mempelajari lebih lanjut, lihat panduan perwakilan layanan.

Anda dapat membuat perwakilan layanan dengan menggunakan Azure Cloud Shell atau Azure CLI, seperti yang diperlihatkan di sini. Untuk memulai, masuk dan pilih langganan yang ingin Anda gunakan.

az login
az account list
az account set --subscription "<subscription name or subscription id>"

Kemudian buat kepala layanan Anda. (Proses ini mungkin perlu waktu untuk menyelesaikannya.)

az ad sp create-for-rbac --name <servicePrincipalName> --role Contributor --scopes /subscriptions/<subscription_id> --password <yourSPStrongPassword>

Setelah berhasil diselesaikan, Anda akan melihat output JSON berikut, termasuk info masuk yang diperlukan.

{
  "clientId": "(...)",
  "clientSecret": "(...)",
  "subscriptionId": "(...)",
  "tenantId": "(...)",
  ...
}

Perhatikan nilai clientId dan tenantId. Tambahkan ke bidang yang sesuai di file Source\VisualProvision\AppSettings.cs.

/* 
 * Service principal
 *
 * Note: This settings will only be used in Debug mode to avoid developer having to enter
 * ClientId and TenantId keys each time application is deployed.
 * In Release mode, all credentials will be introduced using UI input fields.
 */
public const string ClientId = "INSERT YOUR CLIENTID HERE";
public const string TenantId = "INSERT YOUR TENANTID HERE";

Menjalankan aplikasi

Pada titik ini, Anda telah memberikan akses aplikasi ke:

  • Model Visi Kustom terlatih
  • Hubungi Visi Komputer API
  • Akun perwakilan layanan

Ikuti langkah-langkah berikut untuk menjalankan aplikasi:

  1. Di Penjelajah Solusi Visual Studio, pilih proyek VisualProvision.Android atau proyek VisualProvision.iOS. Pilih emulator yang sesuai atau perangkat seluler yang terhubung dari menu drop-down di toolbar utama. Sekarang, jalankan aplikasi lagi.

    Catatan

    Anda memerlukan perangkat MacOS untuk menjalankan emulator iOS.

  2. Pada layar pertama, masukkan ID klien utama layanan Anda, ID penyewa, dan kata sandi. Pilih tombol Masuk.

    Catatan

    Pada beberapa emulator, tombol Login mungkin tidak diaktifkan pada langkah ini. Jika ini terjadi, hentikan aplikasi, buka file Source/VisualProvision/Pages/LoginPage.xaml, temukan elemen Button berlabel TOMBOL LOGIN, hapus baris berikut, lalu jalankan aplikasi lagi.

    IsEnabled="{Binding IsValid}"
    

    The app screen, showing fields for service principal credentials

  3. Di layar berikutnya, pilih langganan Azure Anda dari menu drop-down. (Menu ini harus berisi semua langganan yang dapat diakses oleh perwakilan layanan Anda.) Pilih tombol Lanjutkan. Pada titik ini, aplikasi mungkin meminta Anda untuk memberikan akses ke kamera perangkat dan penyimpanan foto. Beri izin akses kunci.

    The app screen, showing a drop-down field for Target Azure subscription

  4. Kamera pada perangkat Anda akan diaktifkan. Ambil foto salah satu logo layanan Azure yang Anda latih. Jendela penyebaran akan meminta Anda untuk memilih wilayah dan grup sumber daya untuk layanan baru (seperti yang akan Anda lakukan jika Anda menyebarkannya dari portal Microsoft Azure).

    A smartphone camera screen focused on two paper cutouts of Azure logos

    An app screen showing fields for the deployment region and resource group

Membersihkan sumber daya

Jika Anda telah mengikuti semua langkah skenario ini dan menggunakan aplikasi untuk menerapkan layanan Azure ke akun Anda, buka portal Microsoft Azure. Di sana, batalkan layanan yang tidak ingin Anda gunakan.

Jika Anda berencana untuk membuat proyek deteksi objek Anda sendiri dengan Visi Kustom, Anda mungkin ingin menghapus proyek deteksi logo yang Anda buat dalam tutorial ini. Langganan gratis untuk Custom Vision hanya memungkinkan dua proyek. Untuk menghapus proyek deteksi logo, di situs web Visi Kustom, buka Proyek lalu pilih ikon sampah di bawah Proyek Baru Saya.

Langkah berikutnya

Dalam tutorial ini, Anda mengatur dan menjelajahi aplikasi Xamarin.Forms berfitur lengkap yang menggunakan layanan Visi Kustom untuk mendeteksi logo dalam gambar kamera ponsel. Selanjutnya, pelajari praktik terbaik untuk membangun model Visi Kustom sehingga ketika Anda membuatnya untuk aplikasi Anda sendiri, Anda dapat membuatnya kuat dan akurat.