Oktatóanyag: Azure-szolgáltatás emblémáinak felismerése kameraképekben

Cikk
07/20/2023

Ebben az oktatóanyagban egy olyan mintaalkalmazást ismerhet meg, amely Custom Vision használ egy nagyobb forgatókönyv részeként. A mobilplatformokhoz készült Xamarin.Forms-alkalmazás, az AI Visual Provision alkalmazás elemzi az Azure-szolgáltatás emblémáinak fényképeit, majd üzembe helyezi ezeket a szolgáltatásokat a felhasználó Azure-fiókjában. Itt megtudhatja, hogyan használja Custom Vision más összetevőkkel együttműködve egy hasznos, teljes körű alkalmazást. Futtathatja a teljes alkalmazásforgatókönyvet, vagy csak a beállítás Custom Vision részét hajthatja végre, és megismerheti, hogyan használja az alkalmazás.

Ez az oktatóanyag a következőket mutatja be:

Hozzon létre egy egyéni objektumérzékelőt az Azure-szolgáltatás emblémáinak felismeréséhez.
Csatlakoztassa az alkalmazást az Azure AI Visionhez és Custom Vision.
Hozzon létre egy Azure-szolgáltatásnév-fiókot az Azure-szolgáltatások alkalmazásból való üzembe helyezéséhez.

Ha még nincs Azure-előfizetése, kezdés előtt hozzon létre egy ingyenes fiókot.

Előfeltételek

Visual Studio 2017 vagy újabb
A Xamarin számítási feladat a Visual Studióhoz (lásd: A Xamarin telepítése)
iOS- vagy Android-emulátor a Visual Studióhoz
Az Azure CLI (nem kötelező)

A forráskód lekérése

Ha a megadott webalkalmazást szeretné használni, klónozza vagy töltse le az alkalmazás forráskódját a GitHub AI Visual Provision-adattárából . Nyissa meg a Source/VisualProvision.sln fájlt a Visual Studióban. Később néhány projektfájlt szerkeszt, hogy ön is futtathassa az alkalmazást.

Objektumérzékelő létrehozása

Jelentkezzen be a Custom Vision webportálra, és hozzon létre egy új projektet. Adjon meg egy objektumészlelési projektet, és használja az Embléma tartományt; ez lehetővé teszi, hogy a szolgáltatás egy emblémák észlelésére optimalizált algoritmust használjon.

Képek feltöltése és címkézése

Ezután betanítása az emblémaészlelési algoritmusba az Azure-szolgáltatás emblémáinak képeinek feltöltésével és manuális címkézésével. Az AIVisualProvision adattár betanítási rendszerképeket tartalmaz, amelyeket használhat. A webhelyen válassza a Képek hozzáadása gombot a Betanítási képek lapon. Ezután nyissa meg az adattár Dokumentumok/Képek/Training_DataSet mappáját. Az emblémákat manuálisan kell címkéznie az egyes képeken, ezért ha csak a projektet teszteli, előfordulhat, hogy csak a képek egy részhalmazát szeretné feltölteni. Töltsön fel legalább 15 példányt minden használni kívánt címke közül.

Miután feltöltötte a betanítási képeket, válassza ki az elsőt a képernyőn. Megjelenik a címkézési ablak. Rajzoljon dobozokat, és rendeljen címkéket az egyes képeken lévő emblémákhoz.

Az alkalmazás úgy van konfigurálva, hogy adott címkesztringekkel működjön. A definíciókat a Source\VisualProvision\Services\Recognition\RecognitionService.cs fájlban találja:

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

Miután címkéz egy képet, lépjen jobbra a következő címkéhez. A befejezéskor zárja be a címkézési ablakot.

Az objektumérzékelő betanítása

A bal oldali panelen állítsa a Címkékkapcsolót Címkézett értékre a képek megjelenítéséhez. Ezután kattintson a lap tetején található zöld gombra a modell betanítása érdekében. Az algoritmus betanul, hogy felismerje ugyanazokat a címkéket az új képeken. Emellett teszteli a modellt néhány meglévő rendszerképen a pontossági pontszámok létrehozásához.

Az előrejelzési URL-cím lekérése

A modell betanítása után készen áll arra, hogy integrálja azt az alkalmazásba. Le kell kérnie a végpont URL-címét (a modell címét, amelyet az alkalmazás lekérdez) és az előrejelzési kulcsot (hogy az alkalmazás hozzáférjen az előrejelzési kérelmekhez). A Teljesítmény lapon válassza az Előrejelzés URL-címe gombot a lap tetején.

Másolja a végpont URL-címét és a Prediction-Key értéket a Source\VisualProvision\AppSettings.cs fájl megfelelő mezőire :

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

Custom Vision használat vizsgálata

Nyissa meg a Source/VisualProvision/Services/Recognition/CustomVisionService.cs fájlt, és nézze meg, hogyan használja az alkalmazás a Custom Vision kulcs és végpont URL-címét. A PredictImageContentsAsync metódus egy képfájl bájtfolyamát és egy megszakítási jogkivonatot használ (aszinkron feladatkezeléshez), meghívja a Custom Vision előrejelzési API-t, és visszaadja az előrejelzés eredményét.

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

Ez az eredmény egy PredictionResult-példány formájában jelenik meg, amely magában foglalja az előrejelzési példányok listáját. Az előrejelzés tartalmaz egy észlelt címkét és annak határolókeretének helyét a képen.

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

    public string TagId { get; set; }

    public string TagName { get; set; }

    public BoundingBox BoundingBox { get; set; }
}

Ha többet szeretne megtudni arról, hogy az alkalmazás hogyan kezeli ezeket az adatokat, kezdje a GetResourcesAsync metódussal. Ez a metódus a Source/VisualProvision/Services/Recognition/RecognitionService.cs fájlban van definiálva.

Szövegfelismerés hozzáadása

Az oktatóanyag Custom Vision része befejeződött. Ha futtatni szeretné az alkalmazást, integrálnia kell az Azure AI Vision szolgáltatást is. Az alkalmazás az Azure AI Vision szövegfelismerési funkciójával egészíti ki az emblémaészlelési folyamatot. Az Azure-embléma felismerhető a megjelenése vagy a mellette nyomtatott szöveg alapján. A Custom Vision modellekkel ellentétben az Azure AI Vision előre be van kapcsolva bizonyos műveletek végrehajtására képeken vagy videókon.

Iratkozzon fel az Azure AI Vision szolgáltatásra egy kulcs és egy végpont URL-címének lekéréséhez. Ebben a lépésben a Kulcsok beszerzése című témakörben talál segítséget.

Ezután nyissa meg a Source\VisualProvision\AppSettings.cs fájlt, és töltse fel a ComputerVisionEndpoint és ComputerVisionKey változókat a megfelelő értékekkel.

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

Egyszerű szolgáltatás létrehozása

Az alkalmazáshoz azure-szolgáltatásnév-fiók szükséges a szolgáltatások Azure-előfizetésben való üzembe helyezéséhez. A szolgáltatásnévvel adott engedélyeket delegálhat egy alkalmazáshoz az Azure szerepköralapú hozzáférés-vezérlésével. További információt a szolgáltatásnevek útmutatójában talál.

Szolgáltatásnevet az Azure Cloud Shell vagy az Azure CLI használatával hozhat létre az itt látható módon. A kezdéshez jelentkezzen be, és válassza ki a használni kívánt előfizetést.

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

Ezután hozza létre a szolgáltatásnevet. (Ez a folyamat eltarthat egy ideig.)

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

A sikeres befejezést követően a következő JSON-kimenetnek kell megjelennie, beleértve a szükséges hitelesítő adatokat is.

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

Jegyezze fel a és tenantId az clientId értéket. Adja hozzá őket a Source\VisualProvision\AppSettings.cs fájl megfelelő mezőihez.

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

Az alkalmazás futtatása

Ezen a ponton hozzáférést adott az alkalmazásnak a következőhöz:

Betanított Custom Vision modell
Az Azure AI Vision szolgáltatás
Egyszerű szolgáltatásfiók

Az alkalmazás futtatásához kövesse az alábbi lépéseket:

A Visual Studio Solution Explorerben válassza a VisualProvision.Android projektet vagy a VisualProvision.iOS projektet. Válasszon egy megfelelő emulátort vagy csatlakoztatott mobileszközt a fő eszköztár legördülő menüjéből. Ezután futtassa az alkalmazást.

Megjegyzés

IOS-emulátor futtatásához macOS-eszközre lesz szüksége.
Az első képernyőn adja meg a szolgáltatásnév ügyfél-azonosítóját, bérlőazonosítóját és jelszavát. Válassza a Bejelentkezés gombot.
Megjegyzés

Egyes emulátorok esetében előfordulhat, hogy a Bejelentkezés gomb nem aktiválódik ebben a lépésben. Ha ez történik, állítsa le az alkalmazást, nyissa meg a Source/VisualProvision/Pages/LoginPage.xaml fájlt, keresse meg a ButtonLOGIN BUTTON címkével ellátott elemet, távolítsa el a következő sort, majd futtassa újra az alkalmazást.
```
IsEnabled="{Binding IsValid}"
```
A következő képernyőn válassza ki azure-előfizetését a legördülő menüből. (Ennek a menünek tartalmaznia kell az összes olyan előfizetést, amelyhez a szolgáltatásnév hozzáfér.) Válassza a Folytatás gombot. Ezen a ponton előfordulhat, hogy az alkalmazás arra kéri, hogy adjon hozzáférést az eszköz kamerájának és fényképtárolójának. Adja meg a hozzáférési engedélyeket.
Az eszközön lévő kamera aktiválva lesz. Készítsen egy fényképet a betanított Azure-szolgáltatás emblémáiról. Az üzembehelyezési ablaknak meg kell kérnie, hogy válasszon ki egy régiót és erőforráscsoportot az új szolgáltatásokhoz (ahogyan azt az Azure Portal üzembe helyezésekor tenné).

Az erőforrások eltávolítása

Ha követte a forgatókönyv összes lépését, és az alkalmazással üzembe helyezi az Azure-szolgáltatásokat a fiókjában, jelentkezzen be a Azure Portal. Itt mondja le a nem használni kívánt szolgáltatásokat.

Ha saját objektumészlelési projektet tervez létrehozni Custom Vision, érdemes törölnie az oktatóanyagban létrehozott emblémaészlelési projektet. A Custom Vision ingyenes előfizetése csak két projektet tesz lehetővé. Az emblémaészlelési projekt törléséhez nyissa meg a Custom Vision webhelyen a Projektek elemet, majd válassza a kuka ikont az Új projekt alatt.

Következő lépések

Ebben az oktatóanyagban egy teljes funkcionalitású Xamarin.Forms-alkalmazást állított be és tárt fel, amely a Custom Vision szolgáltatást használja a mobil kameraképek emblémáinak észlelésére. Ezután megismerheti a Custom Vision modell létrehozásának ajánlott eljárásait, hogy amikor létrehoz egyet a saját alkalmazásához, hatékony és pontos legyen.

Az osztályozó fejlesztése

Share via