Sdílet prostřednictvím


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

V tomto kurzu prozkoumejte 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žeb 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. Můžete spustit celý scénář aplikace sami, nebo můžete dokončit jenom část vlastního zpracování obrazu v 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žeb 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 loga; tím umožníte službě používat algoritmus optimalizovaný pro detekci loga.

Okno nového projektu na webu Custom Vision v prohlížeči Chrome

Nahrání a označení obrázků

Dále vytrénujte algoritmus detekce loga tak, že nahrajete obrázky s logy 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 v jednotlivých obrázcích 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 plánujete použít.

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

Označování loga na webu Custom Vision

Aplikace je nakonfigurovaná tak, aby fungovala 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 tak , aby zobrazoval vaše obrázky. Potom výběrem zeleného tlačítka v horní části stránky model vytrénujte. Algoritmus bude trénovat, aby rozpoznával stejné značky v nových obrázcí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 nastíněné tlačítko Train (Trénovat).

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

Jakmile je model natrénovaný, můžete ho integrovat do aplikace. Budete muset získat adresu URL koncového bodu (adresu modelu, na kterou bude aplikace dotazovat) a prediktivní klíč (aby aplikaci udělil přístup k žádostem o predikce). Na kartě Výkon vyberte tlačítko Prediktivní adresa URL v horní části stránky.

Web Custom Vision zobrazující okno rozhraní API pro predikce zobrazující 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í služby Custom Vision

Otevřete soubor Source/VisualProvision/Services/Recognition/CustomVisionService.cs a podívejte se, jak aplikace používá váš klíč Custom Vision a adresu URL koncového bodu. Metoda PredictImageContentsAsync přebírá bajtový proud souboru obrázku spolu s tokenem zrušení (pro asynchronní správu úloh), volá rozhraní API pro predikce služby 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 prediction instances. Předpověď obsahuje rozpoznanou značku a 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; }
}

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

Část kurzu Custom Vision je hotová. Pokud chcete aplikaci spustit, budete muset také integrovat službu Azure AI Vision. Aplikace používá funkci optického rozpoznávání znaků ve službě Azure AI Vision k doplnění procesu detekce loga. Logo Azure je možné rozpoznat podle vzhledu nebo textu, který se u něj vytiskne. Na rozdíl od modelů Custom Vision je Služba Azure AI Vision předem natrénovaná tak, aby prováděla určité operace s obrázky nebo videi.

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

Služba Azure AI Vision na webu Azure Portal s vybranou nabídkou Rychlý start Odkaz na klíče je popsaný stejně jako adresa URL koncového bodu rozhraní API.

Dále otevřete soubor Source\VisualProvision\AppSettings.cs a naplňte ComputerVisionEndpoint proměnné 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 služby

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

Instanční objekt můžete vytvořit pomocí Azure Cloud Shellu 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 clientId si hodnoty a tenantId hodnoty. 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";

Spustit aplikaci

Teď jste aplikaci udělili přístup k:

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

Ke spuštění aplikace použijte tento postup:

  1. V Průzkumník řešení sady Visual Studio vyberte projekt VisualProvision.Android nebo projekt 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 spusťte aplikaci.

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

    Poznámka:

    V některých emulátorech nemusí být v tomto kroku aktivované tlačítko Přihlášení . Pokud k tomu dojde, zastavte aplikaci, otevřete soubor Source/VisualProvision/Pages/LoginPage.xaml , vyhledejte Button prvek s popiskem 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 své předplatné Azure z rozevírací nabídky. (Tato nabídka by měla obsahovat všechna předplatná, ke kterým má váš 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 k fotoaparátu a úložišti fotek zařízení. Udělte přístupová oprávnění.

    Obrazovka aplikace zobrazující rozevírací pole pro cílové předplatné Azure

  4. Kamera na vašem zařízení se aktivuje. Udělejte fotku některého z log služeb Azure, které jste natrénovali. Okno nasazení by vás mělo vyzvat k výběru oblasti a skupiny prostředků pro nové služby (stejně jako kdybyste je nasadili z webu Azure Portal).

    Obrazovka fotoaparátu smartphonu zaměřená na dva papírové výřezy loga Azure

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

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

Pokud jste postupovali podle všech kroků tohoto scénáře a použili aplikaci k nasazení služeb Azure do vašeho účtu, přihlaste se k webu Azure Portal. Tam zrušte služby, které nechcete používat.

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

Další kroky

V tomto kurzu jste nastavili a prozkoumali plnohodnotnou aplikaci Xamarin.Forms, která používá službu Custom Vision k detekci log v obrázcích mobilních fotoaparátů. Dále se seznamte s osvědčenými postupy pro vytváření modelu Custom Vision, abyste při vytváření modelu pro vlastní aplikaci mohli zajistit, aby byl výkonný a přesný.