Öğretici: Kamera resimlerde Azure hizmet logolarını tanıma

Bu öğreticide, daha büyük bir senaryonun parçası olarak Özel Görüntü İşleme örnek bir uygulamayı keşfedebilirsiniz. Mobil platformlar için bir Xamarin.Forms uygulaması olan AI Visual Provision uygulaması, Azure hizmet logolarının kamera resimlerini analiz eder ve ardından gerçek hizmetleri kullanıcının Azure hesabına dağıtır. Burada, kullanışlı bir 9.000 Özel Görüntü İşleme sunmak için diğer bileşenlerle eşgüdüm içinde bu bileşenleri nasıl kullandığını öğrenirsiniz. Uygulama senaryosunun tamamını kendiniz çalıştırabilirsiniz veya kurulumun yalnızca Özel Görüntü İşleme bölümünü tamamlar ve uygulamanın bunu nasıl kullandığını keşfedebilirsiniz.

Bu öğreticide şunları nasıl yapacağınızı gösterilecek:

  • Azure hizmet logolarını tanımak için özel bir nesne algılayıcısı oluşturun.
  • Bağlan Azure Görüntü İşleme'a Özel Görüntü İşleme.
  • Azure hizmetlerini uygulama üzerinden dağıtmak için bir Azure hizmet sorumlusu hesabı oluşturun.

Azure aboneliğiniz yoksa başlamadan önce ücretsiz bir hesap oluşturun.

Önkoşullar

Kaynak kodunu alma

Sağlanan web uygulamasını kullanmak için uygulamanın kaynak kodunu GitHub'da AI Visual Provision deposundan indirin. Source/VisualProvision.sln dosyasını Visual Studio. Daha sonra, uygulamayı çalıştırabilirsiniz.

Nesne algılayıcısı oluşturma

Özel Görüntü İşleme web sitesinde oturum açma ve yeni bir proje oluşturma. Bir Nesne Algılama projesi belirtin ve Logo etki alanını kullanın; Bu, hizmetin logo algılama için iyileştirilmiş bir algoritma kullanmasına izin veecek.

Chrome tarayıcısında web Özel Görüntü İşleme yeni proje penceresi

Görüntüleri karşıya yükleme ve etiketleme

Ardından, Azure hizmet logolarının görüntülerini karşıya yükerek ve bunları el ile etiketleerek logo algılama algoritmasını eğitin. AIVisualProvision deposu, kullanabileceğiniz bir eğitim görüntüleri kümesi içerir. Web sitesinde Eğitim Görüntüleri sekmesindeki Görüntü ekle düğmesini seçin. Ardından deponun Documents/Images/Training_DataSet klasörüne gidin. Her görüntüde logoları el ile etiketlemeniz gerekir, bu nedenle bu projeyi yalnızca test ediyorsanız görüntülerin yalnızca bir alt kümesini karşıya yüklemek iyi olabilir. Upload her etiketin en az 15 örneğini kullanabilirsiniz.

Eğitim görüntülerini karşıya yükledikten sonra ekranda ilki seçin. Etiketleme penceresi görüntülenir. Kutuları çizin ve her görüntüde her logo için etiketler attayabilirsiniz.

Özel Görüntü İşleme web sitesinde logo etiketleme

Uygulama, belirli etiket dizeleriyle çalışacak şekilde yapılandırılmış. Tanımları Source\VisualProvision\Services\Recognition\RecognitionService.cs dosyasında bulabilirsiniz:

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

Bir görüntüyü etiketledikten sonra sağdan bir sonrakini etiketlemeye gidin. Bitirişte etiketleme penceresini kapatın.

Nesne algılayıcıyı eğitin

Sol bölmede, görüntülerinizi görüntülemek için Etiketler anahtarını Etiketli olarak ayarlayın. Ardından modeli eğitmek için sayfanın üst kısmında yer alan yeşil düğmeyi seçin. Algoritma, yeni görüntülerde aynı etiketleri tanıyacak şekilde eğitecek. Ayrıca doğruluk puanı oluşturmak için modeli mevcut görüntülerden bazılarına göre test etmek için de kullanabilirsiniz.

Eğitim Özel Görüntü İşleme sekmesindeki web sitesi. Bu ekran görüntüsünde Eğit düğmesi ana hatlarıyla açıklandı

Tahmin URL'sini alma

Modeliniz eğitildikten sonra uygulamanıza tümleştirebilirsiniz. Uç nokta URL'sini (modelinizin adresi, uygulamanın sorgulayacak adresi) ve tahmin anahtarını (uygulamaya tahmin isteklerine erişim vermek için) alasınız. Performans sekmesinde, sayfanın üst kısmında tahmin URL'si düğmesini seçin.

URL Özel Görüntü İşleme API anahtarını görüntüleyen Tahmin API'si penceresini gösteren web sitesi

Uç nokta URL'sini ve Prediction-Key değerini Source\VisualProvision\AppSettings.cs dosyasındaki uygun alanlara kopyalayın:

// 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";

Kullanım Özel Görüntü İşleme inceleme

Uygulamanın kaynak anahtarınızı ve uç nokta URL'nizi nasıl kullandığını görmek için Source/VisualProvision/Services/Recognition/CustomVisionService.Özel Görüntü İşleme cs dosyasını açın. PredictImageContentsAsync yöntemi, bir görüntü dosyasının bir byte akışını ve bir iptal belirteci (zaman uyumsuz görev yönetimi için) alır, Özel Görüntü İşleme tahmin API'sini çağırır ve tahminin sonucu döndürür.

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

Bu sonuç, Tahmin örneklerinin listesini içeren PredictionResult örneğinin formunu alır. Tahmin, görüntüde algılanan bir etiketi ve sınırlayıcı kutu konumunu içerir.

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

    public string TagId { get; set; }

    public string TagName { get; set; }

    public BoundingBox BoundingBox { get; set; }
}

Uygulamanın bu verileri nasıl işlesi hakkında daha fazla bilgi edinmek için GetResourcesAsync yöntemiyle çalışmaya başlamanız gerekir. Bu yöntem Source/VisualProvision/Services/Recognition/RecognitionService.cs dosyasında tanımlanır.

Yeni Görüntü İşleme

Öğreticinin Özel Görüntü İşleme bölümü tamamlanmıştır. Uygulamayı çalıştırmak için Görüntü İşleme gerekir. Uygulama, logo algılama Görüntü İşleme için metin tanıma özelliğini kullanır. Bir Azure logosu, görünümü veya yanında yazdırılan metin tarafından tanınıyor olabilir. Bu Özel Görüntü İşleme aksine, Görüntü İşleme görüntülerde veya videolarda belirli işlemleri gerçekleştirmek için önceden eğitilmemiştir.

Anahtar ve uç Görüntü İşleme URL'si almak için Görüntü İşleme hizmetine abone olun. Bu adımla ilgili yardım için bkz. Abonelik anahtarlarını alma.

Hızlı Görüntü İşleme menüsünün seçili olduğu Azure portal hizmette yer alan bir hizmettir. API uç noktası URL'si gibi anahtarlar için bir bağlantı ana hatlarıyla açıklandı

Ardından Source\VisualProvision\AppSettings.cs dosyasını açın ve ComputerVisionEndpoint ve ComputerVisionKey değişkenlerini doğru değerlerle doldurmak.

// 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";

Hizmet sorumlusu oluşturma

Uygulama, Azure aboneliğinize hizmet dağıtmak için bir Azure hizmet sorumlusu hesabı gerektirir. Hizmet sorumlusu, Azure rol tabanlı erişim denetimi kullanarak uygulamaya belirli izinleri temsilci olarak atamanıza olanak sağlar. Daha fazla bilgi edinmek için bkz. hizmet sorumluları kılavuzu.

Hizmet sorumlusu oluşturmak için burada gösterildiği gibi Azure Cloud Shell Azure CLI'sini kullanabilirsiniz. Başlamak için oturum açma ve kullanmak istediğiniz aboneliği seçin.

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

Ardından hizmet sorumlularınızı oluşturun. (Bu işlem biraz zaman alır.)

az ad sp create-for-rbac --name <servicePrincipalName> --role Contributor --password <yourSPStrongPassword>

Başarıyla tamamlandıktan sonra, gerekli kimlik bilgileri de dahil olmak üzere aşağıdaki JSON çıktısını görüyor gerekir.

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

ve değerlerini clientId not tenantId alır. Bunları Source\VisualProvision\AppSettings.cs dosyasındaki uygun alanlara ekleyin.

/* 
 * 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";

Uygulamayı çalıştırma

Bu noktada, uygulamaya şu erişim iznini verdiysiniz:

  • Eğitilmiş Özel Görüntü İşleme modeli
  • Görüntü İşleme hizmeti
  • Hizmet sorumlusu hesabı

Uygulamayı çalıştırmak için şu adımları izleyin:

  1. Bu Visual Studio Çözüm Gezgini VisualProvision.Android projesini veya VisualProvision.iOS projesini seçin. Ana araç çubuğundaki açılan menüden karşılık gelen bir öykünücü veya bağlı mobil cihaz seçin. Ardından uygulamayı çalıştırın.

    Not

    iOS öykünücüsünü çalıştırmak için bir MacOS cihazı gerekir.

  2. İlk ekranda hizmet sorumlusu istemci kimliğini, kiracı kimliğini ve parolanızı girin. Oturum aç düğmesini seçin.

    Not

    Bazı öykünücülerde Oturum düğmesi bu adımda etkinleştirilmeyebilirsiniz. Bu durumda uygulamayı durdurun, Source/VisualProvision/Pages/LoginPage.xaml dosyasını açın, LOGIN BUTTON etiketli öğeyi bulun, aşağıdaki satırı kaldırın ve uygulamayı yeniden Button çalıştırın.

    IsEnabled="{Binding IsValid}"
    

    Hizmet sorumlusu kimlik bilgileri alanlarını gösteren uygulama ekranı

  3. Sonraki ekranda, açılan menüden Azure aboneliğinizi seçin. (Bu menü, hizmet sorumlusuna erişim izni olan tüm abonelikleri içerir.) Devam düğmesini seçin. Bu noktada, uygulama sizden cihazın kamerasına ve fotoğraf depolama alanına erişim izni verilmesini istendiğinde. Erişim izinleri verin.

    Hedef Azure aboneliğine yönelik bir açılan alan gösteren uygulama ekranı

  4. Cihazınızdaki kamera etkinleştirilecek. Eğitilen Azure hizmet logolarının bir fotoğrafını alın. Dağıtım penceresi, yeni hizmetler için bir bölge ve kaynak grubu seçmenizi ister (Azure portal dağıtıyorsanız yaptığınız gibi).

    Azure logolarının iki kağıda odaklanan bir smartphone kamera ekranı

    Dağıtım bölgesinin ve kaynak grubunun alanlarını gösteren bir uygulama ekranı

Kaynakları temizleme

Bu senaryonun tüm adımlarını izlediyseniz ve Azure hizmetlerini hesabınıza dağıtmak için uygulamayı kullandıysanız, Azure Portalgidin. Burada, kullanmak istemediğiniz Hizmetleri iptal edin.

Özel Görüntü İşleme ile kendi nesne algılama projenizi oluşturmayı planlıyorsanız, bu öğreticide oluşturduğunuz logo algılama projesini silmek isteyebilirsiniz. Özel Görüntü İşleme ücretsiz bir abonelik yalnızca iki proje için izin verir. Logo algılama projesini silmek için, özel görüntü işleme web sitesinde Projeler ' i açın ve ardından yeni Project altında çöp kutusu simgesini seçin.

Sonraki adımlar

Bu öğreticide, Mobil kamera görüntülerinde logoları algılamak için Özel Görüntü İşleme hizmetini kullanan tam özellikli bir Xamarin. Forms uygulaması ayarlayabilir ve araştırın. Daha sonra, bir Özel Görüntü İşleme modeli oluşturmak için en iyi yöntemleri öğrenin, böylece kendi uygulamanız için bir tane oluşturduğunuzda, güçlü ve doğru hale getirebilirsiniz.