Kurz: rozpoznání loga služeb Azure v obrázcích fotoaparátu

Článek
11/20/2021
7 min ke čtení

V tomto kurzu se seznámíte s ukázkovou aplikací, která používá Custom Vision jako součást většího scénáře. Aplikace pro vizuální zřizování AI, aplikace Xamarin. Forms pro mobilní platformy, analyzuje obrázky kamery s logy služby Azure a pak nasadí skutečné služby na účet Azure uživatele. V tomto článku se dozvíte, jak používá Custom Vision ve spolupráci s dalšími komponentami k zajištění užitečné ucelené aplikace. Můžete spustit celý scénář aplikace pro sebe nebo můžete dokončit pouze Custom Vision část nastavení a prozkoumat, jak ji aplikace používá.

V tomto kurzu se dozvíte, jak:

Vytvořte vlastní objektový detektor pro rozpoznávání log Services Azure.
Připojení aplikaci do Azure Počítačové zpracování obrazu a Custom Vision.
Vytvoření účtu 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

Visual Studio 2017 nebo novější
úlohy Xamarin pro Visual Studio (viz instalace Xamarin)
Emulátor pro iOS nebo Android pro Visual Studio
Rozhraní příkazového řádku Azure (volitelné)

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 pro Visual Provisioning na GitHub. Otevřete soubor source/VisualProvision. sln v Visual Studio. Později upravíte některé soubory projektu, abyste mohli aplikaci spustit.

Vytvoření detektoru objektu

Přihlaste se k webu Custom Vision a vytvořte nový projekt. Zadejte projekt rozpoznávání objektů a použijte doménu loga; Tato akce umožní službě používat algoritmus optimalizovaný pro detekci loga.

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

V dalším kroku nahlaste algoritmus detekce loga nahráváním imagí loga služeb Azure a jejich ručním označením. Úložiště AIVisualProvision zahrnuje sadu školicích imagí, které můžete použít. Na webu vyberte tlačítko Přidat obrázky na kartě školicích imagí . Pak přejdete do složky Documents/images/Training_DataSet v úložišti. Je nutné ručně označit loga v každém obrázku, takže pokud testujete pouze testování tohoto projektu, můžete chtít nahrát pouze podmnožinu imagí. Upload aspoň 15 instancí každé značky, kterou plánujete použít.

Po nahrání školicích snímků vyberte na displeji první. 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.

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

Až označíte obrázek, načtěte vpravo a označte ho jako další. Po dokončení zavřete okno označování.

Naučit se detektor objektů

V levém podokně nastavte značky na označené , aby se zobrazily obrázky. Pak vyberte zelené tlačítko v horní části stránky a prohlaste model. Algoritmus bude vlakem rozpoznávat stejné značky v nových obrázcích. Také otestuje model u některých z vašich stávajících imagí, aby vygenerovala hodnocení přesnosti.

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

Po vyškolení modelu jste připraveni ho integrovat do své aplikace. Budete muset získat adresu URL koncového bodu (adresu vašeho modelu, který bude aplikace dotazovat) a klíč předpovědi (pro udělení přístupu aplikace k požadavkům předpovědi). Na kartě výkon v horní části stránky vyberte tlačítko Adresa URL předpovědi .

Zkopírujte adresu URL koncového bodu a hodnotu prediktivního klíče 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";

Kontrola využití Custom Vision

Otevřete soubor source/VisualProvision/Services/Recognition/CustomVisionService. cs , abyste viděli, jak aplikace používá vaši Custom Vision klíč a adresu URL koncového bodu. Metoda PredictImageContentsAsync přebírá bajtový datový proud obrázkového souboru spolu s tokenem zrušení (pro správu asynchronních úloh), volá rozhraní API prediktivního Custom Vision a vrátí 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á podobu PredictionResult instance, která obsahuje seznam předpovědních instancí. Předpověď obsahuje zjištěnou značku a její umístění ohraničovacího rámečku v 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řidat Počítačové zpracování obrazu

Custom Vision část tohoto kurzu jste dokončili. Pokud chcete aplikaci spustit, bude potřeba integrovat i službu Počítačové zpracování obrazu. Aplikace používá funkci rozpoznávání textu Počítačové zpracování obrazu k doplnění procesu zjišťování loga. Logo Azure může rozpoznat jeho vzhled nebo text, který se v blízkosti něj tiskne. Na rozdíl od Custom Vision modelů je Počítačové zpracování obrazu předvedený, aby na obrázcích a videích prováděl určité operace.

Přihlaste se k odběru služby Počítačové zpracování obrazu, abyste získali adresu URL klíče a koncového bodu. Nápovědu k tomuto kroku najdete v tématu Jak získat klíče předplatného.

Potom otevřete soubor Source\VisualProvision\AppSettings.cs a naplňte ComputerVisionEndpoint ComputerVisionKey proměnné a pomocí správných hodnot.

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

K nasazení služeb do předplatného Azure vyžaduje aplikace účet instančního objektu Azure. Instanční objekt umožňuje delegovat specifická oprávnění k aplikaci pomocí řízení přístupu na základě role v Azure. Další informace najdete v tématu Průvodce instančními objekty služby.

Instanční objekt můžete vytvořit pomocí Azure Cloud Shell nebo rozhraní příkazového řádku Azure CLI, jak je znázorněno zde. 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 --password <yourSPStrongPassword>

Po úspěšném dokončení by se měl zobrazit následující výstup JSON, včetně nezbytný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 tuto chvíli jste přidali přístup k aplikaci:

Trained Custom Vision model
Služba Počítačové zpracování obrazu
Hlavní účet služby

Pomocí těchto kroků spusťte aplikaci:

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

Poznámka

Pro spuštění emulátoru iOS budete potřebovat zařízení s MacOS.
Na první obrazovce zadejte ID klienta instančního objektu, ID tenanta a heslo. Vyberte tlačítko pro přihlášení .
Poznámka

V některých emulátorech se v tomto kroku nemusí aktivovat tlačítko pro přihlášení . Pokud k tomu dojde, zastavte aplikaci, otevřete soubor source/VisualProvision/Pages/LoginPage. XAML , najděte Button element s označením Login, odeberte následující řádek a pak znovu spusťte aplikaci.
```
IsEnabled="{Binding IsValid}"
```
Na další obrazovce vyberte předplatné Azure z rozevírací nabídky. (Tato nabídka by měla obsahovat všechna předplatná, ke kterým má objekt služby přístup.) Klikněte na tlačítko pokračovat . V tomto okamžiku se může zobrazit výzva k udělení přístupu k fotoaparátu a úložišti fotografií zařízení. Udělte přístupová oprávnění.
Fotoaparát ve vašem zařízení se aktivuje. Udělejte fotku jednoho z log služby Azure, která jste natrénoval. Okno nasazení by vás mělo vyzvat k výběru oblasti a skupiny prostředků pro nové služby (stejně jako v případě, že je nasazujete z Azure Portal).

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

Pokud jste postupli podle všech kroků tohoto scénáře a použili jste aplikaci k nasazení služeb Azure do vašeho účtu, přejděte na 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. Projekt detekce loga odstraníte tak, že na Custom Visionotevřete Projekty a pak vyberete ikonu koše pod položkou Můj nový Project .

Další kroky

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

Jak vylepšit klasifikátor