Kurz: Rozpoznávání log služby Azure na obrázcích z fotoaparátu

V tomto kurzu prozkoumáte ukázkovou aplikaci, která používá Custom Vision jako součást rozsáhlejšího scénáře. Aplikace AI Visual Provision, aplikace Xamarin.Forms pro mobilní platformy, analyzuje fotky log služby Azure a pak tyto služby nasadí do účtu Azure uživatele. Tady se dozvíte, jak používá Custom Vision v koordinaci s dalšími komponentami k poskytování užitečné ucelené aplikace. Celý scénář aplikace můžete spustit sami nebo můžete dokončit jenom Custom Vision části nastavení a prozkoumat, jak ji aplikace používá.

V tomto kurzu získáte informace o následujících postupech:

  • Vytvořte vlastní detektor objektů pro rozpoznávání log služby Azure.
  • Připojte aplikaci ke službě Azure AI Vision a Custom Vision.
  • Vytvořte účet instančního objektu Azure pro nasazení služeb Azure z aplikace.

Pokud ještě nemáte předplatné Azure, vytvořte si napřed bezplatný účet.

Požadavky

Získání zdrojového kódu

Pokud chcete použít poskytnutou webovou aplikaci, naklonujte nebo stáhněte zdrojový kód aplikace z úložiště AI Visual Provision na GitHubu. Otevřete soubor Source/VisualProvision.sln v sadě Visual Studio. Později upravíte některé soubory projektu, abyste mohli aplikaci spustit sami.

Vytvoření detektoru objektů

Přihlaste se k webovému portálu Custom Vision a vytvořte nový projekt. Zadejte projekt Detekce objektů a použijte doménu logo; to umožní službě používat algoritmus optimalizovaný pro detekci loga.

Nové okno projektu na webu Custom Vision v prohlížeči Chrome

Nahrávání a označování obrázků

Dále vytrénujte algoritmus detekce loga tak, že nahrajete obrázky log služeb Azure a označíte je ručně. Úložiště AIVisualProvision obsahuje sadu trénovacích imagí, které můžete použít. Na webu vyberte tlačítko Přidat obrázky na kartě Školicí obrázky . Pak přejděte do složky Documents/Images/Training_DataSet úložiště. Loga na každém obrázku budete muset ručně označit, takže pokud testujete jenom tento projekt, můžete chtít nahrát jenom podmnožinu obrázků. Nahrajte alespoň 15 instancí každé značky, kterou chcete použít.

Po nahrání trénovacích obrázků vyberte první obrázek na displeji. Zobrazí se okno označování. Nakreslete pole a přiřaďte značky pro každé logo na každém obrázku.

Označování loga na webu Custom Vision

Aplikace je nakonfigurovaná tak, aby pracovala s konkrétními řetězci značek. Definice najdete v souboru 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";

Po označení obrázku přejděte doprava a označte další obrázek. Po dokončení zavřete okno označování.

Trénujte detektor objektů

V levém podokně nastavte přepínač Značky na Tagged (Značky), aby se zobrazily obrázky. Pak vyberte zelené tlačítko v horní části stránky a model natrénujte. Algoritmus se vytrénuje tak, aby rozpoznával stejné značky v nových imagích. Model také otestuje na některých vašich existujících imagích a vygeneruje skóre přesnosti.

Web Custom Vision na kartě Školicí obrázky. Na tomto snímku obrazovky je zobrazeno tlačítko Trénovat.

Získání adresy URL předpovědí

Po natrénování můžete model integrovat do aplikace. Budete muset získat adresu URL koncového bodu (adresu modelu, na kterou se bude aplikace dotazovat) a klíč předpovědi (abyste aplikaci udělili přístup k žádostem o předpovědi). Na kartě Výkon vyberte v horní části stránky tlačítko Prediktivní adresa URL .

Web Custom Vision zobrazující okno rozhraní API pro predikce, které zobrazuje adresu URL a klíč rozhraní API.

Zkopírujte adresu URL koncového bodu a hodnotu Prediction-Key do příslušných polí v souboru 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";

Prozkoumání využití Custom Vision

Otevřete soubor Source/VisualProvision/Services/Recognition/CustomVisionService.cs a podívejte se, jak aplikace používá klíč Custom Vision a adresu URL koncového bodu. Metoda PredictImageContentsAsync přebírá bajtový stream souboru obrázku spolu s tokenem zrušení (pro asynchronní správu úloh), volá rozhraní API pro predikci Custom Vision a vrací výsledek předpovědi.

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

Tento výsledek má formu predictionResult instance, která sama obsahuje seznam instancí prediction . Predikce obsahuje zjištěnou značku a její umístění ohraničujícího rámečku na obrázku.

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

    public string TagId { get; set; }

    public string TagName { get; set; }

    public BoundingBox BoundingBox { get; set; }
}

Pokud chcete získat další informace o tom, jak aplikace zpracovává tato data, začněte metodou GetResourcesAsync . Tato metoda je definována v souboru Source/VisualProvision/Services/Recognition/RecognitionService.cs .

Přidání rozpoznávání textu

Custom Vision část kurzu je dokončená. Pokud chcete aplikaci spustit, budete muset integrovat také službu Azure AI Vision. Aplikace používá funkci rozpoznávání textu Azure AI Vision k doplnění procesu detekce loga. Logo Azure lze rozpoznat podle jeho vzhledu nebo podle textu vytištěného v jeho blízkosti. Na rozdíl od Custom Vision modelů je Azure AI Vision předem natrénovaná na provádění určitých operací s obrázky nebo videi.

Přihlaste se k odběru služby Azure AI Vision, abyste získali klíč a adresu URL koncového bodu. Nápovědu k tomuto kroku najdete v tématu Jak získat klíče.

Služba Azure AI Vision v Azure Portal s vybranou nabídkou Rychlý start. Je nastíněn odkaz na klíče, stejně jako adresa URL koncového bodu rozhraní API.

Dále otevřete soubor Source\VisualProvision\AppSettings.cs a naplňte ComputerVisionEndpoint proměnné a ComputerVisionKey správnými hodnotami.

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

Vytvoření instančního objektu

Aplikace vyžaduje k nasazení služeb do vašeho předplatného Azure účet instančního objektu Azure. Instanční objekt umožňuje delegovat konkrétní oprávnění na aplikaci pomocí řízení přístupu na základě role Azure. Další informace najdete v průvodci instančními objekty.

Instanční objekt můžete vytvořit pomocí Azure Cloud Shell nebo Azure CLI, jak je znázorněno tady. Začněte tím, že se přihlásíte a vyberete předplatné, které chcete použít.

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

Pak vytvořte instanční objekt. (Dokončení tohoto procesu může nějakou dobu trvat.)

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

Po úspěšném dokončení by se měl zobrazit následující výstup JSON, včetně potřebných přihlašovacích údajů.

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

Poznamenejte si clientId hodnoty a tenantId . Přidejte je do příslušných polí v souboru 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";

Spuštění aplikace

V tomto okamžiku jste aplikaci udělili přístup k:

  • Trénovaný model Custom Vision
  • Služba Azure AI Vision
  • Účet instančního objektu

Pokud chcete aplikaci spustit, postupujte následovně:

  1. V sadě Visual Studio Průzkumník řešení vyberte buď projekt VisualProvision.Android, nebo VisualProvision.iOS. V rozevírací nabídce na hlavním panelu nástrojů zvolte odpovídající emulátor nebo připojené mobilní zařízení. Pak aplikaci spusťte.

    Poznámka

    Ke spuštění emulátoru iOS budete potřebovat zařízení s macOS.

  2. Na první obrazovce zadejte ID klienta instančního objektu, ID tenanta a heslo. Vyberte tlačítko Přihlásit se .

    Poznámka

    V některých emulátorech nemusí být tlačítko Přihlásit se v tomto kroku aktivované. Pokud k tomu dojde, zastavte aplikaci, otevřete soubor Source/VisualProvision/Pages/LoginPage.xaml , vyhledejte Button element s názvem LOGIN BUTTON, odeberte následující řádek a spusťte aplikaci znovu.

    IsEnabled="{Binding IsValid}"
    

    Obrazovka aplikace zobrazující pole pro přihlašovací údaje instančního objektu

  3. Na další obrazovce vyberte v rozevírací nabídce své předplatné Azure. (Tato nabídka by měla obsahovat všechna předplatná, ke kterým má instanční objekt přístup.) Vyberte tlačítko Pokračovat . V tomto okamžiku vás aplikace může vyzvat k udělení přístupu ke kameře a úložišti fotek zařízení. Udělte přístupová oprávnění.

    Obrazovka aplikace s rozevíracím seznamem cílového předplatného Azure

  4. Kamera na vašem zařízení se aktivuje. Vyfotit jedno z log služby Azure, které jste vytrénovali. Okno nasazení by vás mělo vyzvat k výběru oblasti a skupiny prostředků pro nové služby (stejně jako byste to udělali, kdybyste je nasazovali ze Azure Portal).

    Obrazovka fotoaparátu smartphonu zaostřená na dva papírové výřezy log Azure

    Obrazovka aplikace zobrazující pole pro oblast nasazení a skupinu prostředků

Vyčištění prostředků

Pokud jste provedli všechny kroky tohoto scénáře a použili aplikaci k nasazení služeb Azure do svého účtu, přihlaste se k Azure Portal. Tady zrušte služby, které nechcete používat.

Pokud plánujete vytvořit vlastní projekt detekce objektů s Custom Vision, možná budete chtít odstranit projekt detekce loga, který jste vytvořili v tomto kurzu. Bezplatné předplatné pro Custom Vision umožňuje pouze dva projekty. Pokud chcete odstranit projekt detekce loga, otevřete na webu Custom Visionprojekty a pak vyberte ikonu koše v části Můj nový projekt.

Další kroky

V tomto kurzu jste nastavili a prozkoumali plnohodnotnou aplikaci Xamarin.Forms, která pomocí služby Custom Vision detekuje loga na obrázcích z mobilních fotoaparátů. Dále se seznámíte s osvědčenými postupy pro vytvoření modelu Custom Vision, abyste ho mohli vytvořit pro vlastní aplikaci, aby byl výkonný a přesný.