Tutorial: Menggunakan Azure AI Vision untuk menghasilkan metadata gambar di Azure Storage

Artikel
02/14/2024

Dalam tutorial ini, Anda akan mempelajari cara mengintegrasikan layanan Azure AI Vision ke dalam aplikasi web untuk menghasilkan metadata untuk gambar yang diunggah. Ini berguna untuk skenario manajemen aset digital (DAM), seperti jika perusahaan ingin dengan cepat menghasilkan keterangan deskriptif atau kata kunci yang dapat dicari untuk semua gambarnya.

Anda akan menggunakan Visual Studio untuk menulis aplikasi Web MVC yang menerima gambar yang diunggah oleh pengguna dan menyimpan gambar di penyimpanan blob Azure. Anda akan mempelajari cara membaca dan menulis blob di C# dan menggunakan metadata blob untuk melampirkan informasi tambahan ke blob yang Anda buat. Kemudian Anda akan mengirimkan setiap gambar yang diunggah oleh pengguna ke Azure AI Vision API untuk menghasilkan keterangan dan metadata pencarian untuk gambar tersebut. Terakhir, Anda dapat menyebarkan aplikasi ke cloud menggunakan Visual Studio.

Tutorial ini akan menunjukkan cara untuk:

Membuat akun penyimpanan dan kontainer penyimpanan menggunakan portal Microsoft Azure
Membuat aplikasi Web di Visual Studio dan menerapkannya ke Azure
Menggunakan Azure AI Vision API untuk mengekstrak informasi dari gambar
Melampirkan metadata ke gambar Azure Storage
Periksa metadata gambar menggunakan Penjelajah Penyimpanan Microsoft Azure

Tip

Bagian Menggunakan Azure AI Vision untuk menghasilkan metadata paling relevan dengan Analisis Gambar. Lewati jika Anda hanya ingin melihat bagaimana Analisis Gambar diintegrasikan ke dalam aplikasi yang telah terbentuk.

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

Prasyarat

Visual Studio 2017 edisi Community atau yang lebih tinggi, dengan beban kerja "pengembangan ASP.NET dan web" serta "Pengembangan Azure" yang terinstal.
Alat Penjelajah Penyimpanan Microsoft Azure terpasang.

Buat akun penyimpanan

Di bagian ini, Anda akan menggunakan portal Microsoft Azure untuk membuat akun penyimpanan. Kemudian Anda akan membuat sepasang kontainer: satu untuk menyimpan gambar yang diunggah oleh pengguna, dan satu lagi untuk menyimpan gambar kecil yang dihasilkan dari gambar yang diunggah.

Masuk ke portal Azure di browser Anda. Jika Anda diminta untuk masuk, lakukan dengan menggunakan akun Microsoft Anda.
Untuk membuat akun penyimpanan, pilih + Buat sumber daya di pita di sebelah kiri. Lalu pilih Penyimpanan, diikuti dengan Akun penyimpanan.
Masukkan nama unik untuk akun penyimpanan di bidang Nama dan pastikan tanda centang berwarna hijau muncul di sampingnya. Nama tersebut penting untuk membentuk salah satu bagian dari URL di mana blob yang dibuat di bawah akun ini diakses. Tempatkan akun penyimpanan di grup sumber daya baru bernama "IntellipixResources," dan pilih wilayah terdekat Anda. Selesaikan dengan memilih tombol Tinjau + buat di bagian bawah layar untuk membuat akun penyimpanan baru.

Catatan

Panjang karakter nama akun penyimpanan 3 hingga 24 karakter dan hanya mengandung angka dan huruf kecil. Selain itu, nama yang Anda masukkan di Microsoft Azure harus unik. Jika orang lain telah memilih nama yang sama, Anda akan diberi tahu bahwa nama tersebut tidak tersedia dengan tanda seru berwarna merah pada bidang Nama.
Pilih Grup sumber daya di pita di sebelah kiri. Kemudian pilih grup sumber daya "IntellipixResources".
Di tab yang terbuka untuk grup sumber daya, pilih akun penyimpanan yang Anda buat. Jika akun penyimpanan belum ada, Anda dapat memilih Refresh di bagian atas tab hingga muncul.
Di tab untuk akun penyimpanan, pilih Blob untuk melihat daftar kontainer yang terkait dengan akun ini.
Akun penyimpanan saat ini tidak memiliki kontainer. Sebelum Anda dapat membuat blob, Anda harus membuat kontainer untuk menyimpannya. Pilih + Kontainer untuk membuat kontainer baru. Ketik photos dalam bidang Nama dan pilih Blob sebagai Tingkat akses publik. Kemudian pilih OK untuk membuat kontainer bernama "foto."

Secara default, kontainer dan kontennya bersifat pribadi. Memilih Blob sebagai tingkat akses membuat blob dalam kontainer "foto" dapat diakses publik, tetapi tidak membuat kontainernya publik. Inilah yang Anda inginkan karena gambar yang disimpan dalam kontainer "foto" akan ditautkan dari aplikasi Web.
Ulangi langkah sebelumnya untuk membuat kontainer bernama "gambar kecil," sekali lagi untuk memastikan bahwa Tingkat akses publik kontainer diatur ke Blob.
Konfirmasikan bahwa kedua kontainer muncul dalam daftar kontainer untuk akun penyimpanan ini, dan nama ditulis dengan benar.
Tutup layar "Blob service". Pilih Tombol akses di menu di sisi kiri layar akun penyimpanan, lalu pilih tombol Salin di samping KEY untuk key1. Tempel kunci akses ini ke editor teks favorit Anda untuk digunakan nanti.

Kini Anda telah membuat akun penyimpanan untuk menyimpan gambar yang diunggah ke aplikasi yang akan Anda buat, dan kontainer untuk menyimpan gambar.

Jalankan Penjelajah Penyimpanan Microsoft Azure

Penjelajah Penyimpanan Microsoft Azure adalah alat gratis yang menyediakan grafik antarmuka untuk digunakan bersama dengan Microsoft Azure Storage PC yang menjalankan Windows, macOS, dan Linux. Alat ini memiliki fungsi yang hampir sama dengan portal Microsoft Azure dan menawarkan fitur lain seperti kemampuan untuk melihat metadata blob. Di bagian ini, Anda akan menggunakan Penjelajah Penyimpanan Microsoft Azure untuk menampilkan kontainer yang Anda buat di bagian sebelumnya.

Jika Anda belum memasang Penjelajah Penyimpanan atau ingin memastikan Anda menjalankan versi terbaru, buka http://storageexplorer.com/ lalu unduh dan pasang.
Mulai Penjelajah Penyimpanan. Jika Anda diminta untuk masuk, lakukan dengan menggunakan akun Microsoft Anda—akun yang sama dengan yang Anda gunakan untuk masuk ke portal Azure. Jika Anda tidak melihat akun penyimpanan di panel kiri Storage Explorer, pilih tombol Kelola Akun yang disorot di bawah ini dan pastikan akun Microsoft dan langganan yang digunakan untuk membuat akun penyimpanan telah ditambahkan ke Storage Explorer.
Pilih panah kecil di samping akun penyimpanan untuk menampilkan kontennya, lalu pilih panah di samping Kontainer Blob. Konfirmasikan bahwa kontainer yang Anda buat telah muncul dalam daftar.

Kontainer saat ini kosong, tetapi akan berubah setelah aplikasi Anda diterapkan dan Anda mulai mengunggah foto. Setelah Penjelajah Penyimpanan terpasang, akan mudah bagi Anda untuk melihat apa yang ditulis aplikasi Anda ke penyimpanan blob.

Membuat aplikasi Web baru di Visual Studio

Di bagian ini, Anda akan membuat aplikasi Web baru di Visual Studio dan menambahkan kode untuk mengimplementasikan fungsionalitas dasar yang diperlukan untuk mengunggah gambar, menulisnya ke penyimpanan blob, dan menampilkannya di halaman Web.

Mulai Visual Studio dan gunakan perintah File -> New -> Project untuk membuat proyek ASP.NET Web Application C# Visual baru bernama "Intellipix" (kependekan dari "Gambar Cerdas").
Dalam dialog "Aplikasi Web ASP.NET Baru", pastikan MVC dipilih. Kemudian pilih OK.
Luangkan waktu sejenak untuk meninjau struktur proyek di Penjelajah Solusi. Di antaranya, ada folder bernama Pengontrol yang menyimpan pengontrol MVC proyek, dan folder bernama Tampilan yang menyimpan tampilan proyek. Saat menggunakan aplikasi, Anda akan bekerja dengan aset di folder-folder ini dan lainnya.
Gunakan perintah Debug -> Start Without Debugging Visual Studio (atau tekan Ctrl+F5) untuk meluncurkan aplikasi di browser Anda. Berikut adalah tampilan aplikasi di status saat ini:
Tutup browser dan kembali ke Visual Studio. Di Penjelajah Solusi, klik kanan proyek Intellipix dan pilih Kelola Paket NuGet.... Pilih Telusuri. Kemudian ketik imageresizer ke dalam kotak pencarian dan pilih paket NuGet bernama ImageResizer. Terakhir, pilih Instal untuk menginstal versi stabil terbaru paket. ImageResizer berisi API yang akan Anda gunakan untuk membuat gambar kecil dari gambar yang diunggah ke aplikasi. Klik OK pada setiap perubahan dan setujui lisensi apa pun yang ditujukan kepada Anda.
Ulangi proses ini untuk menambahkan paket NuGet bernama Penyimpanan WindowsAzure. ke proyek. Paket ini berisi API untuk mengakses Microsoft Azure Storage dari aplikasi .NET. Klik OK pada setiap perubahan dan setujui lisensi apa pun yang ditujukan kepada Anda.
Buka konfigurasi Web dan tambahkan pernyataan berikut ke <appSettings> bagian tersebut, ganti NAMA_AKUN dengan nama akun penyimpanan yang Anda buat di bagian pertama, dan KUNCI_AKUN dengan kunci akses yang Anda simpan.
```
<add key="StorageConnectionString" value="DefaultEndpointsProtocol=https;AccountName=ACCOUNT_NAME;AccountKey=ACCOUNT_KEY" />
```
Penting

File Web.config dimaksudkan untuk menyimpan informasi sensitif seperti kunci langganan Anda, dan permintaan HTTP apa pun ke file dengan ekstensi .config ditangani oleh mesin ASP.NET, yang mengembalikan pesan "Jenis halaman ini tidak dilayani". Namun, jika penyerang dapat menemukan beberapa eksploitasi lain yang memungkinkan mereka melihat konten Web.config Anda, maka mereka akan dapat mengekspos informasi tersebut. Lihat Melindungi String Koneksi ion dan Informasi Konfigurasi Lainnya untuk langkah tambahan yang dapat Anda ambil untuk lebih mengamankan data Web.config Anda.
Buka file bernama _Layout.cshtml di folder proyek Tampilan/Bersama. Pada baris 19, ubah "Nama aplikasi" menjadi "Intellipix." Garis harus terlihat seperti ini:
```
@Html.ActionLink("Intellipix", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
```
Catatan

Dalam proyek ASP.NET MVC, _Layout.cshtml adalah tampilan khusus yang berfungsi sebagai templat untuk tampilan lain. Anda biasanya mendefinisikan isi header dan catatan kaki yang umum untuk semua tampilan dalam file ini.
Klik kanan folder Model proyek dan gunakan perintah Add -> Class... untuk menambahkan file kelas bernama BlobInfo.cs ke folder. Kemudian ganti kelas BlobInfo yang kosong dengan definisi kelas berikut:
```
public class BlobInfo
{
    public string ImageUri { get; set; }
    public string ThumbnailUri { get; set; }
    public string Caption { get; set; }
}
```

Buka file HomeController.cs di folder Pengontrol proyek dan tambahkan pernyataan using berikut di bagian atas file:

using ImageResizer;
using Intellipix.Models;
using Microsoft.WindowsAzure.Storage;
using Microsoft.WindowsAzure.Storage.Blob;
using System.Configuration;
using System.Threading.Tasks;
using System.IO;

Ganti metode Index di HomeController.cs dengan implementasi berikut:

public ActionResult Index()
{
    // Pass a list of blob URIs in ViewBag
    CloudStorageAccount account = CloudStorageAccount.Parse(ConfigurationManager.AppSettings["StorageConnectionString"]);
    CloudBlobClient client = account.CreateCloudBlobClient();
    CloudBlobContainer container = client.GetContainerReference("photos");
    List<BlobInfo> blobs = new List<BlobInfo>();

    foreach (IListBlobItem item in container.ListBlobs())
    {
        var blob = item as CloudBlockBlob;

        if (blob != null)
        {
            blobs.Add(new BlobInfo()
            {
                ImageUri = blob.Uri.ToString(),
                ThumbnailUri = blob.Uri.ToString().Replace("/photos/", "/thumbnails/")
            });
        }
    }

    ViewBag.Blobs = blobs.ToArray();
    return View();
}

Metode Indeks baru menghitung blob dalam kontainer "photos" dan melewati larik objek BlobInfo yang mewakili blob tersebut ke tampilan melalui properti ViewBag ASP.NET MVC. Nantinya, Anda akan memodifikasi tampilan untuk menghitung objek ini dan menampilkan koleksi foto gambar kecil. Kelas yang akan Anda gunakan untuk mengakses akun penyimpanan Anda dan menghitung blobs—CloudStorageAccount, CloudBlobClient, dan CloudBlobContainer—dari paket WindowsAzure.Storage yang Anda instal melalui NuGet.

Tambahkan metode berikut ke kelas HomeController di HomeController.cs:

[HttpPost]
public async Task<ActionResult> Upload(HttpPostedFileBase file)
{
    if (file != null && file.ContentLength > 0)
    {
        // Make sure the user selected an image file
        if (!file.ContentType.StartsWith("image"))
        {
            TempData["Message"] = "Only image files may be uploaded";
        }
        else
        {
            try
            {
                // Save the original image in the "photos" container
                CloudStorageAccount account = CloudStorageAccount.Parse(ConfigurationManager.AppSettings["StorageConnectionString"]);
                CloudBlobClient client = account.CreateCloudBlobClient();
                CloudBlobContainer container = client.GetContainerReference("photos");
                CloudBlockBlob photo = container.GetBlockBlobReference(Path.GetFileName(file.FileName));
                await photo.UploadFromStreamAsync(file.InputStream);

                // Generate a thumbnail and save it in the "thumbnails" container
                using (var outputStream = new MemoryStream())
                {
                    file.InputStream.Seek(0L, SeekOrigin.Begin);
                    var settings = new ResizeSettings { MaxWidth = 192 };
                    ImageBuilder.Current.Build(file.InputStream, outputStream, settings);
                    outputStream.Seek(0L, SeekOrigin.Begin);
                    container = client.GetContainerReference("thumbnails");
                    CloudBlockBlob thumbnail = container.GetBlockBlobReference(Path.GetFileName(file.FileName));
                    await thumbnail.UploadFromStreamAsync(outputStream);
                }
            }
            catch (Exception ex)
            {
                // In case something goes wrong
                TempData["Message"] = ex.Message;
            }
        }
    }

    return RedirectToAction("Index");
}

Ini adalah metode yang diperlukan ketika Anda mengunggah foto. Metode ini menyimpan setiap gambar yang diunggah sebagai blob dalam "photos" kontainer, membuat gambar kecil dari gambar asli menggunakan ImageResizer paket, dan menyimpan gambar kecil sebagai blob dalam "thumbnails" kontainer.

Buka Index.cshmtl di folder Tampilan/Beranda proyek dan ganti kontennya dengan kode dan markup berikut:

@{
    ViewBag.Title = "Intellipix Home Page";
}

@using Intellipix.Models

<div class="container" style="padding-top: 24px">
    <div class="row">
        <div class="col-sm-8">
            @using (Html.BeginForm("Upload", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))
            {
                <input type="file" name="file" id="upload" style="display: none" onchange="$('#submit').click();" />
                <input type="button" value="Upload a Photo" class="btn btn-primary btn-lg" onclick="$('#upload').click();" />
                <input type="submit" id="submit" style="display: none" />
            }
        </div>
        <div class="col-sm-4 pull-right">
        </div>
    </div>

    <hr />

    <div class="row">
        <div class="col-sm-12">
            @foreach (BlobInfo blob in ViewBag.Blobs)
            {
                <img src="@blob.ThumbnailUri" width="192" title="@blob.Caption" style="padding-right: 16px; padding-bottom: 16px" />
            }
        </div>
    </div>
</div>

@section scripts
{
    <script type="text/javascript" language="javascript">
        if ("@TempData["Message"]" !== "") {
            alert("@TempData["Message"]");
        }
    </script>
}

Bahasa pemrogram yang digunakan di sini adalah Razor, yang memungkinkan Anda menyematkan kode yang dapat dieksekusi dalam markup HTML. @foreachPernyataan di tengah file menghitung objek BlobInfo yang diteruskan dari pengontrol di ViewBag dan membuat elemen HTML <img>dari mereka. Properti src setiap elemen diinisialisasi dengan URI blob yang berisi gambar kecil.

Unduh dan unzip file photos.zip dari repositori sampel data GitHub. Ini adalah bermacam-macam foto yang dapat Anda gunakan untuk menguji aplikasi.
Simpan perubahan Anda dan tekan Ctrl+F5 untuk meluncurkan aplikasi di browser Anda. Lalu pilih Unggah Foto dan unggah salah satu gambar yang Anda unduh. Konfirmasikan bahwa versi gambar kecil dari foto telah muncul di halaman.
Upload beberapa gambar lagi dari folder foto Anda. Konfirmasikan bahwa gambar tersebut juga muncul di halaman:
Klik kanan di browser Anda dan pilih Tampilkan sumber halaman untuk menampilkan kode sumber untuk halaman tersebut. Temukan <img> elemen yang mewakili gambar kecil. Pastikan bahwa URL yang ditetapkan ke gambar merujuk langsung ke blob dalam penyimpanan blob. Hal ini dikarenakan Anda mengatur tingkat akses Publik kontainer ke Blob, yang membuat blob di dalam dapat diakses publik.
Kembali ke Penjelajah Penyimpanan Microsoft Azure (atau hidupkan ulang jika Anda tidak membiarkannya berjalan) dan pilih "photos" kontainer di bawah akun penyimpanan Anda. Jumlah blob dalam kontainer harus sama dengan jumlah foto yang Anda unggah. Klik dua kali salah satu blob untuk mengunduhnya dan melihat gambar yang disimpan dalam blob.
Buka kontainer "thumbnails" di Penjelajah Penyimpanan. Buka salah satu blob untuk melihat gambar kecil yang dihasilkan dari unggahan gambar.

Aplikasi ini belum menawarkan cara untuk melihat gambar asli yang Anda unggah. Idealnya, memilih gambar mini gambar harus menampilkan gambar asli. Anda dapat menambahkan fitur tersebut nanti.

Di bagian ini, Anda akan menggunakan pustaka JavaScript sumber terbuka gratis untuk menambahkan penampil lightbox yang memungkinkan pengguna melihat gambar asli yang telah mereka unggah (bukan hanya gambar kecil). File tersedia untuk Anda. Yang harus Anda lakukan adalah mengintegrasikannya ke dalam proyek dan membuat modifikasi kecil untuk Index.cshtml.

Unduh file lightbox.css dan lightbox.js dari repositori kode GitHub.
Di Penjelajah Solusi, klik kanan folder Skrip proyek Anda dan gunakan perintah Add -> New Item... untuk membuat file lightbox.js. Tempel konten dari file contoh yang ada di repositori kode GitHub.
Klik kanan folder "Konten" pada proyek dan gunakan perintah Add -> New Item... untuk membuat file lightbox.css. Tempel konten dari file contoh yang ada di repositori kode GitHub.
Unduh dan unzip file button.zip dari repositori file data GitHub: https://github.com/Azure-Samples/cognitive-services-sample-data-files/tree/master/ComputerVision/storage-lab-tutorial. Terdapat empat gambar tombol.
Klik kanan proyek Intellipix di Penjelajah Solusi dan gunakan perintah Add -> New Folder untuk menambahkan folder bernama "Gambar" ke proyek.
Klik kanan folder Gambar dan gunakan perintah Add -> Existing Item... untuk mengimpor empat gambar yang Anda unduh.
Buka BundleConfig.cs di folder "App_Start" pada proyek. Tambahkan pernyataan berikut ke metode RegisterBundles di BundleConfig.cs:
```
bundles.Add(new ScriptBundle("~/bundles/lightbox").Include(
          "~/Scripts/lightbox.js"));
```
Dalam metode yang sama, temukan pernyataan yang membuat StyleBundle dari "~/Content/css" dan tambahkan lightbox.css ke daftar lembar gaya dalam paket. Berikut adalah pernyataan yang dimodifikasi:
```
bundles.Add(new StyleBundle("~/Content/css").Include(
          "~/Content/bootstrap.css",
          "~/Content/site.css",
          "~/Content/lightbox.css"));
```
Buka _Layout.cshtml di folder Tampilan/Bersamadalam proyek dan tambahkan pernyataan berikut tepat sebelum @RenderSection pernyataan di dekat bagian bawah:
```
@Scripts.Render("~/bundles/lightbox")
```

Langkah terakhir adalah memasukkan penampil lightbox ke dalam beranda. Untuk melakukannya, buka Index.cshtml (ada di folder Tampilan/Beranda pada proyek) dan ganti @foreach perulangan dengan berikut ini:

@foreach (BlobInfo blob in ViewBag.Blobs)
{
    <a href="@blob.ImageUri" rel="lightbox" title="@blob.Caption">
        <img src="@blob.ThumbnailUri" width="192" title="@blob.Caption" style="padding-right: 16px; padding-bottom: 16px" />
    </a>
}

Simpan perubahan Anda dan tekan Ctrl+F5 untuk meluncurkan aplikasi di browser Anda. Kemudian pilih salah satu gambar yang Anda unggah sebelumnya. Pastikan bahwa lightbox muncul dan memperlihatkan tampilan gambar yang diperbesar.
Pilih X di sudut kanan bawah lightbox untuk menutupnya.

Sekarang Anda memiliki cara untuk melihat gambar yang Anda unggah. Langkah selanjutnya adalah melakukan lebih banyak hal dengan gambar-gambar tersebut.

Menggunakan Azure AI Vision untuk menghasilkan metadata

Membuat sumber daya Visi

Anda harus membuat sumber daya Computer Vision untuk akun Azure Anda; sumber daya ini mengelola akses Anda ke layanan Azure AI Vision Azure.

Ikuti instruksi dalam Membuat sumber daya layanan Azure AI untuk membuat sumber daya multi-layanan atau sumber daya Visi.
Lalu buka menu untuk grup sumber daya Anda dan pilih sumber daya Visi yang Anda buat. Salin URL di bawah Titik akhir ke tempat yang dapat dengan mudah diambil dalam sekejap. Lalu pilih Tampilkan kunci akses.

Catatan

Sumber daya baru yang dibuat setelah 1 Juli 2019, akan menggunakan nama subdomain kustom. Untuk informasi selengkapnya dan daftar lengkap titik akhir regional, lihat Nama subdomain kustom untuk layanan Azure AI.
Di jendela berikutnya, salin nilai KEY 1 ke clipboard.

Menambahkan kredensial Azure AI Vision

Selanjutnya, Anda akan menambahkan kredensial yang diperlukan ke aplikasi sehingga dapat mengakses sumber daya Vision.

Navigasi ke file konfigurasi Web di akar proyek. Tambahkan pernyataan berikut ke bagian <appSettings> file, ganti VISION_KEY dengan kunci yang Anda salin di langkah sebelumnya, dan VISION_ENDPOINT dengan URL yang Anda simpan di langkah sebelumnya.

<add key="SubscriptionKey" value="VISION_KEY" />
<add key="VisionEndpoint" value="VISION_ENDPOINT" />

Di Penjelajah Solusi. klik kanan pada solusi proyek dan pilih Kelola Paket NuGet. Di manajer paket yang terbuka pilih Telusuri, centang Sertakan prarilis, dan cari Azure.AI.Vision.ImageAnalysis. Pilih Instal.

Menambahkan kode pembuatan metadata

Selanjutnya, Anda akan menambahkan kode yang benar-benar menggunakan layanan Azure AI Vision untuk membuat metadata untuk gambar.

Buka file HomeController.cs di folder Pengontrol proyek dan tambahkan pernyataan using berikut di bagian atas file:
```
using Azure;
using Azure.AI.Vision.ImageAnalysis;
using System;
```

Kemudian, buka metode Unggah; metode ini mengonversi dan mengunggah gambar ke penyimpanan blob. Tambahkan kode berikut segera setelah blok yang dimulai dengan // Generate a thumbnail (atau di akhir proses image-blob-creation). Kode ini mengambil blob yang berisi gambar (photo), dan menggunakan Azure AI Vision untuk menghasilkan deskripsi untuk gambar tersebut. Azure AI Vision API juga menghasilkan daftar kata kunci yang berlaku untuk gambar. Deskripsi dan kata kunci yang dihasilkan disimpan dalam metadata blob sehingga dapat diambil di kemudian hari.

// create a new ImageAnalysisClient
ImageAnalysisClient client = new ImageAnalysisClient(
        new Uri(Environment.GetEnvironmentVariable(ConfigurationManager.AppSettings["VisionEndpoint"])),
        new AzureKeyCredential(ConfigurationManager.AppSettings["SubscriptionKey"]));

VisualFeatures = visualFeatures = VisualFeatures.Caption | VisualFeatures.Tags;

ImageAnalysisOptions analysisOptions = new ImageAnalysisOptions()
{
    GenderNeutralCaption = true,
    Language = "en",
};

Uri imageURL = new Uri(photo.Uri.ToString());

ImageAnalysisResult  result = client.Analyze(imageURL,visualFeatures,analysisOptions);

// Record the image description and tags in blob metadata
photo.Metadata.Add("Caption", result.Caption.Text);

for (int i = 0; i < result.Tags.Values.Count; i++)
{
    string key = String.Format("Tag{0}", i);
    photo.Metadata.Add(key, result.Tags.Values[i]);
}

await photo.SetMetadataAsync();

Selanjutnya, buka metode Indeks dalam file yang sama. Metode ini menghitung blob gambar yang disimpan dalam kontainer blob yang ditargetkan (sebagai instans IListBlobItem) dan meneruskannya ke tampilan aplikasi. Ganti blok foreach dalam metode ini dengan kode berikut. Kode ini memanggil CloudBlockBlob.FetchAttributes untuk mendapatkan metadata terlampir dari setiap blob. Ini mengekstrak deskripsi yang dihasilkan komputer (caption) dari metadata dan menambahkannya ke objek BlobInfo, yang diteruskan ke tampilan.
```
foreach (IListBlobItem item in container.ListBlobs())
{
    var blob = item as CloudBlockBlob;

    if (blob != null)
    {
        blob.FetchAttributes(); // Get blob metadata
        var caption = blob.Metadata.ContainsKey("Caption") ? blob.Metadata["Caption"] : blob.Name;

        blobs.Add(new BlobInfo()
        {
            ImageUri = blob.Uri.ToString(),
            ThumbnailUri = blob.Uri.ToString().Replace("/photos/", "/thumbnails/"),
            Caption = caption
        });
    }
}
```

Menguji aplikasi

Simpan perubahan Anda di Visual Studio dan tekan Ctrl+F5 untuk meluncurkan aplikasi di browser Anda. Gunakan aplikasi untuk mengunggah beberapa gambar, baik dari set foto yang Anda unggah atau dari folder Anda sendiri. Saat mengarahkan kursor ke salah satu gambar dalam tampilan, jendela tipsalat akan muncul dan menampilkan keterangan yang dihasilkan komputer untuk gambar tersebut.

Untuk melihat semua metadata yang terlampir, gunakan Penjelajah Penyimpanan Microsoft Azure untuk melihat kontainer penyimpanan yang Anda gunakan untuk gambar. Klik kanan salah satu blob dalam kontainer dan pilih Properti. Dalam dialog, Anda akan melihat daftar pasangan kunci-nilai. Deskripsi gambar yang dihasilkan komputer disimpan dalam item Caption, dan kata kunci pencarian disimpan di Tag0, Tag1, dan sebagainya. Setelah selesai, pilih Batal untuk menutup dialog.

Image properties dialog window, with metadata tags listed

Menambahkan pencarian ke aplikasi Anda

Di bagian ini, Anda akan menambahkan kotak pencarian ke beranda yang memungkinkan pengguna untuk melakukan pencarian kata kunci pada gambar yang telah mereka unggah. Kata kunci adalah kata kunci yang dihasilkan oleh Azure AI Vision API dan disimpan dalam metadata blob.

Buka Index.cshtml di folder Tampilan/Berandapada proyek dan tambahkan pernyataan berikut ke elemen <div> kosong dengan class="col-sm-4 pull-right" atribut:

@using (Html.BeginForm("Search", "Home", FormMethod.Post, new { enctype = "multipart/form-data", @class = "navbar-form" }))
{
    <div class="input-group">
        <input type="text" class="form-control" placeholder="Search photos" name="term" value="@ViewBag.Search" style="max-width: 800px">
        <span class="input-group-btn">
            <button class="btn btn-primary" type="submit">
                <i class="glyphicon glyphicon-search"></i>
            </button>
        </span>
    </div>
}

Kode dan markup ini menambahkan kotak pencarian dan tombol Cari ke beranda.

Buka file HomeController.cs di folder Pengontrol pada proyek dan tambahkan metode berikut di kelas HomeController:
```
[HttpPost]
public ActionResult Search(string term)
{
    return RedirectToAction("Index", new { id = term });
}
```
Ini adalah metode yang dipanggil saat pengguna memilih tombol Cari yang ditambahkan di langkah sebelumnya. Metode ini merefresh halaman dan menyertakan parameter pencarian di URL.

Ganti metode Index dengan implementasi berikut:

public ActionResult Index(string id)
{
    // Pass a list of blob URIs and captions in ViewBag
    CloudStorageAccount account = CloudStorageAccount.Parse(ConfigurationManager.AppSettings["StorageConnectionString"]);
    CloudBlobClient client = account.CreateCloudBlobClient();
    CloudBlobContainer container = client.GetContainerReference("photos");
    List<BlobInfo> blobs = new List<BlobInfo>();

    foreach (IListBlobItem item in container.ListBlobs())
    {
        var blob = item as CloudBlockBlob;

        if (blob != null)
        {
            blob.FetchAttributes(); // Get blob metadata

            if (String.IsNullOrEmpty(id) || HasMatchingMetadata(blob, id))
            {
                var caption = blob.Metadata.ContainsKey("Caption") ? blob.Metadata["Caption"] : blob.Name;

                blobs.Add(new BlobInfo()
                {
                    ImageUri = blob.Uri.ToString(),
                    ThumbnailUri = blob.Uri.ToString().Replace("/photos/", "/thumbnails/"),
                    Caption = caption
                });
            }
        }
    }

    ViewBag.Blobs = blobs.ToArray();
    ViewBag.Search = id; // Prevent search box from losing its content
    return View();
}

Amati bahwa metode Indeks sekarang menerima parameter id yang berisi nilai yang diketik pengguna ke dalam kotak pencarian. Parameter kosong atau hilang id menunjukkan bahwa semua foto harus ditampilkan.

Tambahkan bantuan metode berikut ke kelas HomeController:

private bool HasMatchingMetadata(CloudBlockBlob blob, string term)
{
    foreach (var item in blob.Metadata)
    {
        if (item.Key.StartsWith("Tag") && item.Value.Equals(term, StringComparison.InvariantCultureIgnoreCase))
            return true;
    }

    return false;
}

Metode ini disebut Indeks metode yang digunakan untuk menentukan apakah kata kunci metadata yang dilampirkan ke blob gambar tertentu berisi istilah pencarian yang dimasukkan pengguna.

Buka aplikasi lagi dan unggah beberapa foto. Jangan ragu untuk menggunakan foto Anda sendiri, bukan hanya yang disediakan dalam tutorial.
Ketik kata kunci seperti "sungai" ke dalam kotak pencarian. Lalu pilih tombol Cari .
Hasil pencarian akan bervariasi tergantung pada apa yang Anda ketik dan gambar yang Anda unggah. Tetapi hasilnya harus menjadi daftar gambar terfilter dan kata kunci metadatanya mencakup semua atau sebagian kata kunci yang Anda ketik.
Pilih tombol kembali browser untuk menampilkan semua gambar lagi.

Anda hampir selesai. Saatnya untuk menyebarkan aplikasi ke cloud.

Menyebarkan aplikasi ke Azure

Di bagian ini, Anda akan menerapkan aplikasi ke Microsoft Azure dari Visual Studio. Anda akan mengizinkan Visual Studio untuk membuat Aplikasi Web Microsoft Azure untuk Anda, agar Anda tidak harus masuk ke portal Microsoft Azure dan membuatnya secara terpisah.

Klik kanan proyek dalam Penjelajah Solusi dan pilih Terbitkan... dari menu konteks. Pastikan Microsoft Azure App Service dan Buat Baru dipilih, lalu pilih tombol Terbitkan .
Berikutnya, pilih grup sumber daya "IntellipixResources" yang ada diGrup Sumber Daya. Pilih tombol Baru... di samping "Paket App Service" dan buat Paket App Service baru di lokasi yang sama dengan yang Anda pilih untuk akun penyimpanan di Buat akun penyimpanan, menerima default di tempat lain. Selesaikan dengan memilih tombol Buat .
Setelah beberapa saat, aplikasi akan muncul di jendela browser. Perhatikan URL di bilah alamat. Aplikasi ini tidak lagi berjalan secara lokal; melainkan di Web, tempat yang dapat dijangkau secara publik.

Jika Anda membuat perubahan pada aplikasi dan ingin menampilkan perubahan ke Web, lanjutkan lagi proses publikasi. Anda masih bisa menguji perubahan Anda secara lokal sebelum menerbitkan ke Web.

Membersihkan sumber daya

Jika Anda ingin terus mengerjakan aplikasi web Anda, lihat bagian Langkah berikutnya. Jika Anda tidak berencana untuk terus menggunakan aplikasi ini, Anda harus menghapus semua sumber daya khusus aplikasi. Untuk menghapus sumber daya, Anda dapat menghapus grup sumber daya yang berisi langganan Azure Storage dan sumber daya Visi Anda. Tindakan ini akan menghapus akun penyimpanan, blob yang diunggah ke akun tersebut, dan sumber daya App Service yang diperlukan untuk tersambung dengan aplikasi web ASP.NET.

Untuk menghapus grup sumber daya, buka tab Grup sumber daya di portal, navigasikan ke grup sumber daya yang Anda gunakan untuk proyek ini, dan pilih Hapus grup sumber daya di bagian atas tampilan. Anda akan diminta untuk mengetik nama grup sumber daya untuk mengonfirmasi jika Anda ingin menghapusnya. Setelah dihapus, grup sumber daya tidak dapat dipulihkan.

Langkah berikutnya

Ada banyak hal yang dapat Anda lakukan dengan Azure dan mengembangkan aplikasi Intellipix Anda lebih jauh. Misalnya, Anda dapat menambahkan dukungan untuk mengautentikasi pengguna dan menghapus foto, dan daripada memaksa pengguna untuk menunggu layanan Azure AI memproses foto setelah unggahan, Anda dapat menggunakan Azure Functions untuk memanggil Azure AI Vision API secara asinkron setiap kali gambar ditambahkan ke penyimpanan blob. Anda juga dapat melakukan sejumlah operasi Analisis Gambar lainnya pada gambar, yang diuraikan dalam gambaran umum.

Gambaran umum Analisis Gambar

Share via

Tutorial: Menggunakan Azure AI Vision untuk menghasilkan metadata gambar di Azure Storage

Prasyarat

Buat akun penyimpanan

Jalankan Penjelajah Penyimpanan Microsoft Azure

Membuat aplikasi Web baru di Visual Studio

Menggunakan Azure AI Vision untuk menghasilkan metadata

Membuat sumber daya Visi

Menambahkan kredensial Azure AI Vision

Menambahkan kode pembuatan metadata

Menguji aplikasi

Menambahkan pencarian ke aplikasi Anda

Menyebarkan aplikasi ke Azure

Membersihkan sumber daya

Langkah berikutnya

Sumber Daya Tambahan:

Share via

Tutorial: Menggunakan Azure AI Vision untuk menghasilkan metadata gambar di Azure Storage

Prasyarat

Buat akun penyimpanan

Jalankan Penjelajah Penyimpanan Microsoft Azure

Membuat aplikasi Web baru di Visual Studio

Tambahkan lightbox untuk melihat foto

Menggunakan Azure AI Vision untuk menghasilkan metadata

Membuat sumber daya Visi

Menambahkan kredensial Azure AI Vision

Menambahkan kode pembuatan metadata

Menguji aplikasi

Menambahkan pencarian ke aplikasi Anda

Menyebarkan aplikasi ke Azure

Membersihkan sumber daya

Langkah berikutnya

Sumber Daya Tambahan: