Öğretici: Azure Depolama'da görüntü meta verileri oluşturmak için Azure AI Vision'ı kullanma
Bu öğreticide, karşıya yüklenen görüntüler için meta veriler oluşturmak üzere Azure AI Vision hizmetini bir web uygulamasıyla tümleştirmeyi öğreneceksiniz. Bu, bir şirketin tüm görüntüleri için hızlı bir şekilde açıklayıcı başlık veya aranabilir anahtar sözcükler oluşturmak istemesi gibi dijital varlık yönetimi (DAM) senaryoları için kullanışlıdır.
Visual Studio'yu kullanarak kullanıcılar tarafından karşıya yüklenen görüntüleri kabul eden ve görüntüleri Azure blob depolama alanında depolayan bir MVC Web uygulaması yazacaksınız. C# dilinde blobları okumayı ve yazmayı ve oluşturduğunuz bloblara ek bilgi eklemek için blob meta verilerini kullanmayı öğreneceksiniz. Ardından kullanıcı tarafından yüklenen her görüntüyü Azure AI Vision API'sine göndererek bir başlık oluşturacak ve görüntü için meta verileri arayacaksınız. Son olarak, Visual Studio'yu kullanarak uygulamayı buluta dağıtabilirsiniz.
Bu öğretici şunların nasıl yapıldığını gösterir:
- Azure portalını kullanarak depolama hesabı ve depolama kapsayıcıları oluşturma
- Visual Studio'da web uygulaması oluşturma ve Azure'a dağıtma
- Görüntülerden bilgi ayıklamak için Azure AI Vision API'sini kullanma
- Azure Depolama görüntülerine meta veri ekleme
- Azure Depolama Gezgini kullanarak görüntü meta verilerini denetleme
İpucu
Meta veri oluşturmak için Azure AI Vision kullanma bölümü en çok Görüntü Analizi ile ilgilidir. Görüntü Analizi'nin yerleşik bir uygulamayla nasıl tümleştirildiğinden emin olmak istiyorsanız buraya atlayın.
Azure aboneliğiniz yoksa başlamadan önce ücretsiz bir hesap oluşturun.
Önkoşullar
- "ASP.NET ve web geliştirme" ve "Azure geliştirme" iş yüklerinin yüklü olduğu Visual Studio 2017 Community sürümü veya üzeri.
- Azure Depolama Gezgini aracı yüklendi.
Depolama hesabı oluşturma
Bu bölümde, depolama hesabı oluşturmak için Azure portalını kullanacaksınız. Ardından bir kapsayıcı çifti oluşturacaksınız: biri kullanıcı tarafından karşıya yüklenen görüntüleri depolamak için, diğeri de karşıya yüklenen görüntülerden oluşturulan resim küçük resimlerini depolamak için.
Tarayıcınızda Azure portalında oturum açın. Oturum açmanız istenirse Bunu Microsoft hesabınızı kullanarak yapın.
Depolama hesabı oluşturmak için soldaki şeritte + Kaynak oluştur'u seçin. Ardından Depolama ve ardından Depolama hesabı seçin.
Ad alanına depolama hesabı için benzersiz bir ad girin ve yanında yeşil bir onay işareti göründüğünden emin olun. Ad önemlidir, çünkü bu hesap altında oluşturulan bloblara erişilen URL'nin bir bölümünü oluşturur. Depolama hesabını "IntellipixResources" adlı yeni bir kaynak grubuna yerleştirin ve size en yakın bölgeyi seçin. Yeni depolama hesabını oluşturmak için ekranın alt kısmındaki Gözden Geçir + oluştur düğmesini seçerek bitirin.
Not
Depolama hesap adları 3 ile 24 karakter uzunluğunda olabilir ve yalnızca sayı ve küçük harf içerebilir. Ayrıca, girdiğiniz ad Azure içinde benzersiz olmalıdır. Başka biri aynı adı seçtiyse, adın Ad alanında kırmızı bir ünlem işaretiyle kullanılamadığı size bildirilir.
Soldaki şeritte Kaynak grupları'nı seçin. Ardından "IntellipixResources" kaynak grubunu seçin.
Kaynak grubu için açılan sekmede, oluşturduğunuz depolama hesabını seçin. Depolama hesabı henüz orada değilse, görünene kadar sekmenin üst kısmındaki Yenile'yi seçebilirsiniz.
Depolama hesabının sekmesinde Bloblar'ı seçerek bu hesapla ilişkili kapsayıcıların listesini görüntüleyin.
Depolama hesabında şu anda kapsayıcı yok. Blob oluşturabilmeniz için önce içinde depolayabileceğiniz bir kapsayıcı oluşturmanız gerekir. Yeni bir kapsayıcı oluşturmak için + Kapsayıcı'ya tıklayın. Ad alanına yazın
photosve Genel erişim düzeyi olarak Blob'ı seçin. Ardından Tamam'ı seçerek "photos" adlı bir kapsayıcı oluşturun.Varsayılan olarak kapsayıcılar ve içerikleri özeldir. Erişim düzeyi olarak Blob'un seçilmesi "fotoğraflar" kapsayıcısında bulunan blobların genel olarak erişilebilir olmasını sağlar, ancak kapsayıcının kendisini genel yapmaz. "Fotoğraflar" kapsayıcısında depolanan görüntüler bir Web uygulamasından bağlanacağından istediğiniz budur.
Kapsayıcının Genel erişim düzeyinin Blob olarak ayarlandığından emin olmak için "thumbnails" adlı bir kapsayıcı oluşturmak için önceki adımı yineleyin.
Her iki kapsayıcının da bu depolama hesabının kapsayıcı listesinde göründüğünü ve adların doğru yazıldığını onaylayın.
"Blob hizmeti" ekranını kapatın. Depolama hesabı ekranının sol tarafındaki menüden Erişim tuşları'nı seçin ve ardından anahtar1 için TUŞ'un yanındaki Kopyala düğmesini seçin. Bu erişim anahtarını daha sonra kullanmak üzere sık kullandığınız metin düzenleyicinize yapıştırın.
Oluşturacağınız uygulamaya yüklenen görüntüleri tutmak için bir depolama hesabı ve görüntülerin depolandığı kapsayıcılar oluşturdunuz.
Azure Depolama Gezgini çalıştırma
Azure Depolama Gezgini, Windows, macOS ve Linux çalıştıran bilgisayarlarda Azure Depolama ile çalışmak için grafik arabirim sağlayan ücretsiz bir araçtır. Azure portalıyla aynı işlevlerin çoğunu sağlar ve blob meta verilerini görüntüleme gibi diğer özellikleri sunar. Bu bölümde, önceki bölümde oluşturduğunuz kapsayıcıları görüntülemek için Microsoft Azure Depolama Gezgini kullanacaksınız.
Depolama Explorer'ı yüklemediyseniz veya en son sürümü çalıştırdığınızdan emin olmak istiyorsanız, adresine gidin http://storageexplorer.com/ ve indirip yükleyin.
Depolama Gezgini'ni başlatın. Oturum açmanız istenirse, bunu Azure portalında oturum açarken kullandığınız Microsoft hesabınızı kullanarak yapın. Depolama hesabını Depolama Gezgini'nin sol bölmesinde görmüyorsanız, aşağıda vurgulanan Hesapları Yönet düğmesini seçin ve hem Microsoft hesabınızın hem de depolama hesabını oluşturmak için kullanılan aboneliğin Depolama Gezgini'ne eklendiğinden emin olun.
İçeriğini görüntülemek için depolama hesabının yanındaki küçük oku seçin ve ardından Blob Kapsayıcıları'nın yanındaki oku seçin. Oluşturduğunuz kapsayıcıların listede göründüğünü onaylayın.
Kapsayıcılar şu anda boş, ancak uygulamanız dağıtıldıktan ve fotoğraf yüklemeye başladıktan sonra bu durum değişir. Depolama Gezgini'nin yüklü olması, uygulamanızın blob depolamaya ne yazacağını görmenizi kolaylaştırır.
Visual Studio'da yeni bir Web uygulaması oluşturma
Bu bölümde, Visual Studio'da yeni bir Web uygulaması oluşturacak ve görüntüleri karşıya yüklemek, blob depolamaya yazmak ve bir Web sayfasında görüntülemek için gereken temel işlevleri uygulamak için kod ekleyeceksiniz.
Visual Studio'yu başlatın ve Dosya -> Yeni -> Proje komutunu kullanarak "Intellipix" adlı yeni bir Visual C# ASP.NET Web Uygulaması projesi oluşturun ("Akıllı Resimler" kısaltması).
"Yeni ASP.NET Web Uygulaması" iletişim kutusunda MVC'nin seçili olduğundan emin olun. Ardından Tamam'ı seçin.
Çözüm Gezgini proje yapısını gözden geçirmek için bir dakikanızı ayırın. Diğer şeylerin yanında, projenin MVC denetleyicilerini barındıran Denetleyiciler adlı bir klasör ve projenin görünümlerini barındıran Görünümler adlı bir klasör vardır. Uygulamayı uygularken bu klasörlerdeki varlıklarla ve diğerleriyle çalışacaksınız.
Uygulamayı tarayıcınızda başlatmak için Visual Studio'nun Hata Ayıklama -> Hata Ayıklama olmadan başlat komutunu kullanın (veya Ctrl+F5 tuşlarına basın). Uygulamanın şu anki durumunda nasıl göründüğü aşağıda belirtilmiştir:
Tarayıcıyı kapatın ve Visual Studio'ya dönün. Çözüm Gezgini'da Intellipix projesine sağ tıklayın ve NuGet Paketlerini Yönet... seçeneğini belirleyin. Gözat'ı seçin. Ardından arama kutusuna yazın
imageresizerve ImageResizer adlı NuGet paketini seçin. Son olarak, paketin en son kararlı sürümünü yüklemek için Yükle'yi seçin. ImageResizer, uygulamaya yüklenen görüntülerden resim küçük resimleri oluşturmak için kullanacağınız API'leri içerir. Tüm değişiklikleri tamamlayın ve size sunulan lisansları kabul edin.
Projeye WindowsAzure.Depolama adlı NuGet paketini eklemek için bu işlemi yineleyin. Bu paket, .NET uygulamalarından Azure Depolama erişmek için API'ler içerir. Tüm değişiklikleri tamamlayın ve size sunulan lisansları kabul edin.
Web.config dosyasını açın ve bölümüne aşağıdaki deyimi
<appSettings>ekleyin; ACCOUNT_NAME yerine ilk bölümde oluşturduğunuz depolama hesabının adını yazın ve kaydettiğiniz erişim anahtarıyla ACCOUNT_KEY.<add key="StorageConnectionString" value="DefaultEndpointsProtocol=https;AccountName=ACCOUNT_NAME;AccountKey=ACCOUNT_KEY" />Önemli
Web.config dosyasının, abonelik anahtarlarınız gibi hassas bilgileri barındırması amaçlanmıştır ve .config uzantısına sahip bir dosyaya yönelik tüm HTTP istekleri ASP.NET altyapısı tarafından işlenir ve bu da "Bu sayfa türü sunulmadı" iletisini döndürür. Ancak, bir saldırgan Web.config içeriğinizi görüntülemesine olanak tanıyan başka bir açık bulabilirse bu bilgileri kullanıma sunar. Web.config verilerinizin güvenliğini daha fazla sağlamak için uygulayabileceğiniz ek adımlar için bkz. Bağlan ion Dizelerini ve Diğer Yapılandırma Bilgilerini Koruma.
Projenin Views/Shared klasöründe _Layout.cshtml adlı dosyayı açın. 19. satırda "Uygulama adı" değerini "Intellipix" olarak değiştirin. Satır şöyle görünmelidir:
@Html.ActionLink("Intellipix", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })Not
ASP.NET MVC projesinde _Layout.cshtml, diğer görünümler için şablon olarak hizmet veren özel bir görünümdür. Genellikle bu dosyadaki tüm görünümler için ortak olan üst bilgi ve alt bilgi içeriğini tanımlarsınız.
Klasörüne BlobInfo.cs adlı bir sınıf dosyası eklemek için projenin Models klasörüne sağ tıklayın ve Ekle -> Sınıf... komutunu kullanın. Ardından boş BlobInfo sınıfını aşağıdaki sınıf tanımıyla değiştirin:
public class BlobInfo { public string ImageUri { get; set; } public string ThumbnailUri { get; set; } public string Caption { get; set; } }Projenin Controllers klasöründen HomeController.cs açın ve dosyanın en üstüne aşağıdaki
usingdeyimleri ekleyin:using ImageResizer; using Intellipix.Models; using Microsoft.WindowsAzure.Storage; using Microsoft.WindowsAzure.Storage.Blob; using System.Configuration; using System.Threading.Tasks; using System.IO;HomeController.cs içindeki Index yöntemini aşağıdaki uygulamayla değiştirin:
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(); }Yeni Index yöntemi kapsayıcıdaki
"photos"blobları numaralandırır ve ASP.NET MVC'nin ViewBag özelliği aracılığıyla bu blobları temsil eden blobInfo nesnelerinin bir dizisini görünüme geçirir. Daha sonra görünümü değiştirerek bu nesneleri numaralandıracak ve fotoğraf küçük resimleri koleksiyonunu görüntüleyeceksiniz. Depolama hesabınıza erişmek ve cloud Depolama Account, CloudBlobClient ve CloudBlobContainer bloblarını listelemek için kullanacağınız sınıflar, NuGet aracılığıyla yüklediğiniz WindowsAzure.Depolama paketinden gelir.HomeController.cs'daki HomeController sınıfına aşağıdaki yöntemi ekleyin:
[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"); }Bu, bir fotoğraf yüklediğinizde çağrılan yöntemdir. Karşıya yüklenen her görüntüyü kapsayıcıda
"photos"blob olarak depolar, paketi kullanarakImageResizerözgün görüntüden bir küçük resim görüntüsü oluşturur ve küçük resim görüntüsünü kapsayıcıda"thumbnails"blob olarak depolar.Projenin Views/Home klasöründe Index.cshmtl dosyasını açın ve içeriğini aşağıdaki kod ve işaretlemeyle değiştirin:
@{ 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> }Burada kullanılan dil, HTML işaretlemesine yürütülebilir kod eklemenizi sağlayan Razor'dır. Dosyanın
@foreachortasındaki deyimi, ViewBag'teki denetleyiciden geçirilen BlobInfo nesnelerini numaralandırır ve onlardan HTML<img>öğeleri oluşturur.srcHer öğenin özelliği, görüntü küçük resmini içeren blobun URI'siyle başlatılır.GitHub örnek veri deposundan photos.zip dosyasını indirin ve açın. Bu, uygulamayı test etmek için kullanabileceğiniz farklı fotoğrafların bir çeşididir.
Değişikliklerinizi kaydedin ve uygulamayı tarayıcınızda başlatmak için Ctrl+F5 tuşlarına basın. Ardından Fotoğraf Yükle'yi seçin ve indirdiğiniz görüntülerden birini karşıya yükleyin. Sayfada fotoğrafın küçük resim sürümünün göründüğünü onaylayın.
Fotoğraflar klasörünüzden birkaç resim daha yükleyin. Bunların sayfada da göründüğünü onaylayın:
Tarayıcınızda sağ tıklayın ve sayfanın kaynak kodunu görüntülemek için Sayfa kaynağını görüntüle'yi seçin.
<img>Resim küçük resimlerini temsil eden öğeleri bulun. Görüntülere atanan URL'lerin blob depolamadaki bloblara doğrudan başvurduğunu gözlemleyin. Bunun nedeni kapsayıcıların Genel erişim düzeyini Blob olarak ayarlamanızdır ve bu da içindeki blobların genel olarak erişilebilir olmasını sağlar.Azure Depolama Gezgini geri dönün (veya çalıştırmadıysanız yeniden başlatın) ve depolama hesabınızın altındaki kapsayıcıyı
"photos"seçin. Kapsayıcıdaki blob sayısı, yüklediğiniz fotoğraf sayısına eşit olmalıdır. Bloblardan birine çift tıklayarak blobu indirin ve blobda depolanan görüntüyü görün.
Kapsayıcıyı
"thumbnails"Depolama Gezgini'nde açın. Karşıya yüklenen görüntülerden oluşturulan küçük resim görüntülerini görüntülemek için bloblardan birini açın.
Uygulama henüz karşıya yüklediğiniz özgün görüntüleri görüntülemenin bir yolunu sunmaz. İdeal olarak, bir resim küçük resmi seçildiğinde özgün görüntü görüntülenmelidir. Sonraki adımda bu özelliği ekleyeceksiniz.
Fotoğrafları görüntülemek için ışık kutusu ekleme
Bu bölümde, kullanıcıların yükledikleri özgün görüntüleri (yalnızca resim küçük resimleri yerine) görmelerini sağlayan bir lightbox görüntüleyicisi eklemek için ücretsiz, açık kaynaklı bir JavaScript kitaplığı kullanacaksınız. Dosyalar sizin için sağlanır. Tek yapmanız gereken bunları projeyle tümleştirmek ve Index.cshtml dosyasında küçük bir değişiklik yapmaktır.
GitHub kod deposundan lightbox.css ve lightbox.js dosyalarını indirin.
Çözüm Gezgini'da projenizin Betikler klasörüne sağ tıklayın ve Ekle -> Yeni Öğe... komutunu kullanarak lightbox.js dosyası oluşturun. GitHub kod deposundaki örnek dosyanın içeriğini yapıştırın.
Projenin "İçerik" klasörüne sağ tıklayın ve Ekle -> Yeni Öğe... komutunu kullanarak bir lightbox.css dosyası oluşturun. GitHub kod deposundaki örnek dosyanın içeriğini yapıştırın.
GitHub veri dosyaları deposundan buttons.zip dosyasını indirin ve açın: https://github.com/Azure-Samples/cognitive-services-sample-data-files/tree/master/ComputerVision/storage-lab-tutorial. Dört düğme resminiz olmalıdır.
Çözüm Gezgini'da Intellipix projesine sağ tıklayın ve Projeye "Görüntüler" adlı bir klasör eklemek için Ekle -> Yeni Klasör komutunu kullanın.
Resimler klasörüne sağ tıklayın ve indirdiğiniz dört görüntüyü içeri aktarmak için Ekle -> Varolan Öğe... komutunu kullanın.
Projenin "App_Start" klasöründe BundleConfig.cs açın. BundleConfig.cs yöntemine
RegisterBundlesaşağıdaki deyimi ekleyin:bundles.Add(new ScriptBundle("~/bundles/lightbox").Include( "~/Scripts/lightbox.js"));Aynı yöntemde , "~/Content/css" dosyasından bir
StyleBundleoluşturan deyimini bulun ve paketteki stil sayfaları listesine lightbox.css ekleyin. Değiştirilen deyim şu şekildedir:bundles.Add(new StyleBundle("~/Content/css").Include( "~/Content/bootstrap.css", "~/Content/site.css", "~/Content/lightbox.css"));Projenin Views/Shared klasöründe _Layout.cshtml dosyasını açın ve aşağıdaki deyimi alttaki deyimin
@RenderSectionhemen önüne ekleyin:@Scripts.Render("~/bundles/lightbox")Son görev, lightbox görüntüleyicisini giriş sayfasına eklemektir. Bunu yapmak için Index.cshtml dosyasını açın (projenin Views/Home klasöründedir) ve döngüsünü şu şekilde değiştirin
@foreach:@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> }Değişikliklerinizi kaydedin ve uygulamayı tarayıcınızda başlatmak için Ctrl+F5 tuşlarına basın. Ardından daha önce yüklediğiniz görüntülerden birini seçin. Bir ışık kutusunun göründüğünü ve resmin büyütülmüş bir görünümünü gösterdiğini onaylayın.
Kapatmak için ışık kutusunun sağ alt köşesindeki X işaretini seçin.
Artık karşıya yüklediğiniz görüntüleri görüntülemenin bir yolunuz var. Sonraki adım, bu görüntülerle daha fazlasını yapmaktır.
Meta veri oluşturmak için Azure AI Vision'ı kullanma
Görüntü İşleme kaynağı oluşturma
Azure hesabınız için bir Görüntü İşleme kaynağı oluşturmanız gerekir; bu kaynak Azure'ın Azure AI Vision hizmetine erişiminizi yönetir.
Çok hizmetli bir kaynak veya Görüntü İşleme kaynağı oluşturmak için Azure AI hizmetleri kaynağı oluşturma başlığı altında yer alan yönergeleri izleyin.
Ardından kaynak grubunuzun menüsüne gidin ve oluşturduğunuz Görüntü İşleme kaynağını seçin. Uç Nokta altındaki URL'yi bir dakika içinde kolayca alabildiğiniz bir yere kopyalayın. Ardından Erişim anahtarlarını göster'i seçin.
Not
1 Temmuz 2019'da oluşturulan yeni kaynaklar özel alt etki alanı adlarını kullanacaktır. Daha fazla bilgi ve bölgesel uç noktaların tam listesi için bkz . Azure AI hizmetleri için özel alt etki alanı adları.
Sonraki pencerede KEY 1 değerini panoya kopyalayın.
Azure AI Vision kimlik bilgilerini ekleme
Ardından, görüntü işleme kaynaklarına erişebilmesi için gerekli kimlik bilgilerini uygulamanıza ekleyeceksiniz.
Projenin kökündeki Web.config dosyasına gidin. Dosyasının <appSettings> bölümüne aşağıdaki deyimleri ekleyin; öğesini önceki adımda kopyaladığınız anahtarla ve VISION_ENDPOINT önceki adımda kaydettiğiniz URL ile değiştirinVISION_KEY.
<add key="SubscriptionKey" value="VISION_KEY" />
<add key="VisionEndpoint" value="VISION_ENDPOINT" />
Çözüm Gezgini. proje çözümüne sağ tıklayın ve NuGet Paketlerini Yönet'i seçin. Açılan paket yöneticisinde Gözat'ı seçin, Ön sürümü ekle'yi işaretleyin ve Azure.AI.Vision.ImageAnalysis araması yapın. Yükle'yi seçin.
Meta veri oluşturma kodu ekleme
Ardından, görüntüler için meta veriler oluşturmak için Azure AI Vision hizmetini kullanan kodu ekleyeceksiniz.
Projenin Controllers klasöründeki HomeController.cs dosyasını açın ve dosyanın en üstüne aşağıdaki
usingdeyimleri ekleyin:using Azure; using Azure.AI.Vision.ImageAnalysis; using System;Ardından Upload yöntemine gidin; bu yöntem görüntüleri dönüştürür ve blob depolamaya yükler. Ile başlayan
// Generate a thumbnailbloğun hemen arkasına (veya görüntü-blob oluşturma işleminizin sonuna) aşağıdaki kodu ekleyin. Bu kod, görüntüyü ()photoiçeren blobu alır ve Azure AI Vision'ı kullanarak bu görüntü için bir açıklama oluşturur. Azure AI Vision API'si, görüntüye uygulanan anahtar sözcüklerin listesini de oluşturur. Oluşturulan açıklama ve anahtar sözcükler, daha sonra alınabilmeleri için blob'un meta verilerinde depolanır.// 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();Ardından, aynı dosyadaki Dizin yöntemine gidin. Bu yöntem, hedeflenen blob kapsayıcısında depolanan görüntü bloblarını numaralandırır (IListBlobItem örnekleri olarak) ve bunları uygulama görünümüne geçirir.
foreachBu yöntemdeki bloğunu aşağıdaki kodla değiştirin. Bu kod, her blob'un ekli meta verilerini almak için CloudBlockBlob.FetchAttributes öğesini çağırır. Bilgisayar tarafından oluşturulan açıklamayı (caption) meta verilerden ayıklar ve görünüme geçirilen BlobInfo nesnesine ekler.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 }); } }
Uygulamayı test etme
Visual Studio'da yaptığınız değişiklikleri kaydedin ve uygulamayı tarayıcınızda başlatmak için Ctrl+F5 tuşlarına basın. İndirdiğiniz fotoğraf kümesinden veya kendi klasörünüzden birkaç resim daha yüklemek için uygulamayı kullanın. İmleci görünümdeki yeni görüntülerden birinin üzerine getirdiğinizde, bir araç ipucu penceresi görünmelidir ve görüntü için bilgisayar tarafından oluşturulan başlık görüntülenmelidir.
Ekli meta verilerin tümünü görüntülemek için Azure Depolama Gezgini kullanarak görüntüler için kullandığınız depolama kapsayıcısını görüntüleyin. Kapsayıcıdaki bloblardan herhangi birine sağ tıklayın ve Özellikler'i seçin. İletişim kutusunda anahtar-değer çiftlerinin listesini görürsünüz. Bilgisayar tarafından oluşturulan görüntü açıklaması öğesindeCaption, arama anahtar sözcükleri ise , Tag1vb. içinde Tag0depolanır. İşiniz bittiğinde, iletişim kutusunu kapatmak için İptal'i seçin.
Uygulamaya arama ekleme
Bu bölümde, giriş sayfasına bir arama kutusu ekleyerek kullanıcıların karşıya yükledikleri görüntülerde anahtar sözcük aramaları yapmalarını sağlayacaksınız. Anahtar sözcükler, Azure AI Vision API'si tarafından oluşturulan ve blob meta verilerinde depolanan anahtar sözcüklerdir.
Projenin Views/Home klasöründe Index.cshtml dosyasını açın ve özniteliğiyle
class="col-sm-4 pull-right"boş<div>öğeye aşağıdaki deyimleri ekleyin:@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> }Bu kod ve işaretleme giriş sayfasına bir arama kutusu ve Ara düğmesi ekler.
Projenin Controllers klasöründe HomeController.cs açın ve HomeController sınıfına aşağıdaki yöntemi ekleyin:
[HttpPost] public ActionResult Search(string term) { return RedirectToAction("Index", new { id = term }); }Bu, kullanıcı önceki adımda eklenen Ara düğmesini seçtiğinde çağrılan yöntemdir. Sayfayı yeniler ve URL'ye bir arama parametresi ekler.
Index yöntemini aşağıdaki uygulamayla değiştirin:
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(); }Index yönteminin artık kullanıcının arama kutusuna yazdığı değeri içeren bir parametreyi
idkabul ettiğini gözlemleyin. Boş veya eksikidbir parametre, tüm fotoğrafların görüntülenmesi gerektiğini gösterir.HomeController sınıfına aşağıdaki yardımcı yöntemi ekleyin:
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; }Bu yöntem, belirli bir görüntü blob'una eklenen meta veri anahtar sözcüklerinin kullanıcının girdiği arama terimini içerip içermediğini belirlemek için Index yöntemi tarafından çağrılır.
Uygulamayı yeniden başlatın ve birkaç fotoğraf yükleyin. Yalnızca öğreticide sağlanan fotoğrafları değil, kendi fotoğraflarınızı kullanmaktan çekinmeyin.
Arama kutusuna "nehir" gibi bir anahtar sözcük yazın. Ardından Ara düğmesini seçin.
Arama sonuçları, ne yazdığınıza ve hangi görüntüleri yüklediğinize bağlı olarak değişir. Ancak sonuç, meta veri anahtar sözcükleri yazdığınız anahtar sözcüğün tamamını veya bir bölümünü içeren görüntülerin filtrelenmiş bir listesi olmalıdır.
Tüm resimleri yeniden görüntülemek için tarayıcının geri düğmesini seçin.
Programı tamamlamak üzeresiniz. Uygulamayı buluta dağıtmanın zamanı geldi.
Uygulamayı Azure’da dağıtma
Bu bölümde, uygulamayı Visual Studio'dan Azure'a dağıtacaksınız. Visual Studio'nın sizin için bir Azure Web Uygulaması oluşturmasına izin verecek ve bu sayede Azure portalına gidip ayrı ayrı oluşturmanız gerekmeyecektir.
Çözüm Gezgini'da projeye sağ tıklayın ve bağlam menüsünden Yayımla... öğesini seçin. Microsoft Azure Uygulaması Hizmeti ve Yeni Oluştur'un seçili olduğundan emin olun ve ardından Yayımla düğmesini seçin.
Sonraki iletişim kutusunda Kaynak Grubu altındaki "IntellipixResources" kaynak grubunu seçin. "App Service Planı" öğesinin yanındaki Yeni... düğmesini seçin ve Depolama hesabı oluşturma bölümünde depolama hesabı için seçtiğiniz konumda, diğer her yerde varsayılan değerleri kabul ederek yeni bir App Service Planı oluşturun. Oluştur düğmesini seçerek bitirin.
Birkaç dakika sonra uygulama bir tarayıcı penceresinde görünür. Adres çubuğundaki URL'yi not edin. Uygulama artık yerel olarak çalışmıyor; Web'dedir ve herkese açık bir yerde bulunur.
Uygulamada değişiklik yaparsanız ve değişiklikleri Web'e göndermek istiyorsanız yayımlama işlemine yeniden geçin. Web'de yayımlamadan önce değişikliklerinizi yerel olarak test edebilirsiniz.
Kaynakları temizleme
Web uygulamanız üzerinde çalışmaya devam etmek istiyorsanız Sonraki adımlar bölümüne bakın. Bu uygulamayı kullanmaya devam etmek istemiyorsanız uygulamaya özgü tüm kaynakları silmeniz gerekir. Kaynakları silmek için Azure Depolama aboneliğinizi ve Görüntü İşleme kaynağınızı içeren kaynak grubunu silebilirsiniz. Bu işlem depolama hesabını, karşıya yüklenen blobları ve ASP.NET web uygulamasına bağlanmak için gereken App Service kaynağını kaldırır.
Kaynak grubunu silmek için portalda Kaynak grupları sekmesini açın, bu proje için kullandığınız kaynak grubuna gidin ve görünümün üst kısmındaki Kaynak grubunu sil'i seçin. Silmek istediğinizi onaylamak için kaynak grubunun adını yazmanız istenir. Bir kaynak grubu silindikten sonra kurtarılamaz.
Sonraki adımlar
Azure'ı kullanmak ve Intellipix uygulamanızı daha da geliştirmek için yapabileceğiniz çok daha fazla şey vardır. Örneğin, kullanıcıların kimliğini doğrulama ve fotoğrafları silme desteği ekleyebilir ve kullanıcıyı karşıya yükleme sonrasında Azure AI hizmetlerinin bir fotoğrafı işlemesini beklemeye zorlamak yerine, blob depolamaya her görüntü eklendiğinde Azure AI Vision API'sini zaman uyumsuz olarak çağırmak için Azure İşlevleri kullanabilirsiniz. Ayrıca görüntüde genel bakışta özetlenen başka bir dizi Görüntü Analizi işlemi de yapabilirsiniz.