Bagikan melalui

Tutorial: Mengenali logo layanan Azure dalam gambar kamera

  • Artikel

Dalam tutorial ini, jelajahi aplikasi sampel yang menggunakan Custom Vision sebagai bagian dari skenario yang lebih besar. Aplikasi AI Visual Provision, aplikasi Xamarin.Forms untuk platform seluler, menganalisis foto logo layanan Azure lalu menyebarkan layanan tersebut 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 cara untuk:

  • Buat detektor objek kustom untuk mengenali logo layanan Azure.
  • Hubungkan aplikasi Anda ke Azure AI Vision dan Custom Vision.
  • 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. Nantinya, Anda akan mengedit beberapa file proyek sehingga Anda dapat menjalankan aplikasi sendiri.

Buat detektor objek

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

Jendela proyek baru di situs web Visi Kustom di browser Chrome

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.

Penandaan logo di situs web Visi Kustom

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.

Situs web Visi Kustom, pada tab Gambar Pelatihan. Dalam tangkapan layar ini, tombol Latih diuraikan

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.

Situs web Visi Kustom, menampilkan jendela API Prediksi yang menampilkan alamat URL dan kunci API

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.

Menambahkan pengenalan teks

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

Berlangganan layanan Azure AI Vision untuk mendapatkan URL kunci dan titik akhir. Untuk bantuan tentang langkah ini, lihat Membuat sumber daya layanan Azure AI.

Layanan Azure AI Vision di portal Azure, dengan menu Mulai Cepat dipilih. Tautan untuk kunci diuraikan, seperti halnya URL titik akhir API

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 menyebarkan layanan Azure yang terdeteksi 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

Sekarang Anda telah memberikan akses aplikasi ke:

  • Model Visi Kustom terlatih
  • Layanan Azure AI Vision
  • 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.

  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}"

    Layar aplikasi, memperlihatkan bidang untuk kredensial utama layanan

  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.

    Layar aplikasi, menampilkan bidang drop-down untuk langganan Target Azure

  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).

    Layar kamera smartphone yang berfokus pada dua potongan kertas logo Azure

    Layar aplikasi memperlihatkan bidang untuk wilayah penyebaran dan grup sumber daya

Membersihkan sumber daya

Jika Anda telah mengikuti semua langkah skenario ini dan menggunakan aplikasi untuk menyebarkan layanan Azure ke akun Anda, masuk ke portal 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.

Cara meningkatkan pengklasifikasi Anda