Kurz: Použití služby Azure AI Vision k vygenerování metadat obrázků ve službě Azure Storage

V tomto kurzu se dozvíte, jak integrovat službu Azure AI Vision do webové aplikace a vygenerovat metadata pro nahrané obrázky. To je užitečné pro scénáře správy digitálních prostředků (DAM), například pokud chce společnost rychle generovat popisné popis nebo prohledávatelná klíčová slova pro všechny jeho obrázky.

Pomocí sady Visual Studio napíšete webovou aplikaci MVC, která přijímá obrázky nahrané uživateli a ukládá obrázky do úložiště objektů blob v Azure. Naučíte se číst a zapisovat objekty blob v jazyce C# a používat metadata objektů blob k připojení dalších informací k objektům blob, které vytvoříte. Pak odešlete každý obrázek nahraný uživatelem do rozhraní API služby Azure AI Vision a vygenerujete popis a vyhledáte metadata obrázku. Nakonec můžete aplikaci nasadit do cloudu pomocí sady Visual Studio.

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

• Vytvoření účtu úložiště a kontejnerů úložiště pomocí webu Azure Portal
• Vytvoření webové aplikace v sadě Visual Studio a jeho nasazení do Azure
• Extrakce informací z obrázků pomocí rozhraní API služby Azure AI Vision
• Připojení metadat k imagím azure Storage
• Kontrola metadat obrázků pomocí Průzkumník služby Azure Storage

Tip

Část Použití služby Azure AI Vision ke generování metadat je pro analýzu obrázků nejrelevantní. Pokud chcete jenom zjistit, jak je analýza obrázků integrovaná do zavedené aplikace, přejděte tam.

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

Požadavky

• Visual Studio 2017 Community edition nebo vyšší s nainstalovanými úlohami "vývoj pro ASP.NET a web" a "Vývoj pro Azure".
• Nainstalovaný nástroj Průzkumník služby Azure Storage.

Vytvoření účtu úložiště

V této části vytvoříte účet úložiště pomocí webu Azure Portal . Pak vytvoříte dvojici kontejnerů: jeden pro ukládání obrázků nahraných uživatelem a druhý pro ukládání miniatur obrázků vygenerovaných z nahraných obrázků.

1. Přihlaste se k webu Azure Portal v prohlížeči. Pokud se zobrazí výzva k přihlášení, použijte svůj účet Microsoft.

2. Pokud chcete vytvořit účet úložiště, vyberte + Vytvořit prostředek na pásu karet na levé straně. Pak vyberte Storage a pak účet úložiště.

   

3. Do pole Název zadejte jedinečný název účtu úložiště a ujistěte se, že se vedle něj zobrazí zelená značka zaškrtnutí. Název je důležitý, protože tvoří jednu část adresy URL, prostřednictvím které se k objektům blob vytvořeným v rámci tohoto účtu přistupuje. Umístěte účet úložiště do nové skupiny prostředků s názvem IntellipixResources a vyberte oblast, která je nejblíže vám. Dokončete tak, že v dolní části obrazovky vyberete tlačítko Zkontrolovat a vytvořit nový účet úložiště.

   Poznámka:

   Názvy účtů úložiště můžou mít délku 3 až 24 znaků a můžou obsahovat jenom číslice a malá písmena. Kromě toho musí být zadaný název v rámci Azure jedinečný. Pokud někdo jiný zvolil stejný název, zobrazí se upozornění, že jméno není dostupné s červeným vykřičníkem v poli Název .

   

4. Na pásu karet vlevo vyberte skupiny prostředků. Pak vyberte skupinu prostředků IntellipixResources.

   

5. Na kartě, která se otevře pro skupinu prostředků, vyberte účet úložiště, který jste vytvořili. Pokud účet úložiště ještě není, můžete v horní části karty vybrat Možnost Aktualizovat , dokud se nezobrazí.

   

6. Na kartě účtu úložiště vyberte objekty blob a zobrazte seznam kontejnerů přidružených k tomuto účtu.

   

7. Účet úložiště aktuálně nemá žádné kontejnery. Než budete moct vytvořit objekt blob, musíte vytvořit kontejner, do něhož ho uložíte. Vyberte + Kontejner a vytvořte nový kontejner. Zadejte photos do pole Název a jako úroveň veřejného přístupu vyberte objekt blob. Pak vyberte OK a vytvořte kontejner s názvem "photos".

   Kontejnery a jejich obsah jsou ve výchozím nastavení soukromé. Výběrem objektu blob jako úrovně přístupu budou objekty blob v kontejneru "photos" veřejně přístupné, ale neuvolní samotný kontejner jako veřejný. To je to, co chcete, protože obrázky uložené v kontejneru "photos" budou propojeny z webové aplikace.

   

8. Opakujte předchozí krok a vytvořte kontejner s názvem "thumbnails", a tím zajistíte, že úroveň veřejného přístupu kontejneru je nastavená na objekt blob.

9. Ověřte, že se oba kontejnery zobrazují v seznamu kontejnerů pro tento účet úložiště a že jsou názvy napsané správně.

   

10. Zavřete obrazovku "Blob Service". V nabídce na levé straně obrazovky účtu úložiště vyberte Přístupové klíče a pak vyberte tlačítko Kopírovat vedle klávesy KEY1. Vložte tento přístupový klíč do oblíbeného textového editoru pro pozdější použití.

    

Teď jste vytvořili účet úložiště pro ukládání obrázků nahraných do aplikace, kterou budete vytvářet, a kontejnery pro ukládání imagí.

Spuštění Průzkumník služby Azure Storage

Průzkumník služby Azure Storage je bezplatný nástroj, který poskytuje grafické rozhraní pro práci se službou Azure Storage na počítačích s Windows, macOS a Linuxem. Poskytuje většinu stejných funkcí jako Azure Portal a nabízí další funkce, jako je možnost zobrazení metadat objektů blob. V této části použijete Průzkumník služby Microsoft Azure Storage k zobrazení kontejnerů, které jste vytvořili v předchozí části.

1. Pokud jste nenainstalovali Průzkumník služby Storage nebo chcete mít jistotu, že používáte nejnovější verzi, přejděte na http://storageexplorer.com/ stránku a stáhněte a nainstalujte ji.

2. Spusťte Průzkumník služby Storage. Pokud se zobrazí výzva k přihlášení, použijte svůj účet Microsoft – to samé, které jste použili k přihlášení k webu Azure Portal. Pokud účet úložiště v levém podokně Průzkumník služby Storage nevidíte, vyberte dole zvýrazněné tlačítko Spravovat účty a ujistěte se, že jste do Průzkumník služby Storage přidali účet Microsoft i předplatné použité k vytvoření účtu úložiště.

   

3. Vyberte malou šipku vedle účtu úložiště, aby se zobrazil její obsah, a pak vyberte šipku vedle kontejnerů objektů blob. Ověřte, že se kontejnery, které jste vytvořili, zobrazí v seznamu.

   

Kontejnery jsou momentálně prázdné, ale po nasazení aplikace se to změní a začnete nahrávat fotky. Když máte nainstalované Průzkumník služby Storage, bude snadné zjistit, co vaše aplikace zapisuje do úložiště objektů blob.

Vytvoření nové webové aplikace v sadě Visual Studio

V této části vytvoříte novou webovou aplikaci v sadě Visual Studio a přidáte kód pro implementaci základních funkcí potřebných k nahrání obrázků, zápisu do úložiště objektů blob a jejich zobrazení na webové stránce.

1. Spusťte Visual Studio a pomocí příkazu Soubor –> Nový –> Projekt vytvořte nový projekt webové aplikace Visual C# ASP.NET s názvem Intellipix (zkratka inteligentní obrázky).

   

2. V dialogovém okně Nová ASP.NET webová aplikace se ujistěte, že je vybraná možnost MVC . Pak vyberte OK.

   

3. Projděte si strukturu projektu v Průzkumník řešení. Mimo jiné existuje složka s názvem Kontrolery, která obsahuje kontrolery MVC projektu, a složku s názvem Zobrazení , která obsahuje zobrazení projektu. Při implementaci aplikace budete pracovat s prostředky v těchto složkách a dalšími prostředky.

   

4. Pomocí příkazu Ladění sady Visual Studio –> Spustit bez ladění (nebo stisknutím ctrl +F5) spusťte aplikaci v prohlížeči. Tady je postup, jak aplikace vypadá ve svém současném stavu:

   

5. Zavřete prohlížeč a vraťte se do sady Visual Studio. V Průzkumník řešení klikněte pravým tlačítkem myši na projekt Intellipix a vyberte Spravovat balíčky NuGet.... Vyberte Procházet. Pak zadejte imageresizer do vyhledávacího pole a vyberte balíček NuGet s názvem ImageResizer. Nakonec vyberte Nainstalovat a nainstalujte nejnovější stabilní verzi balíčku. ImageResizer obsahuje rozhraní API, která použijete k vytvoření miniatur obrázků z obrázků nahraných do aplikace. OK všechny změny a přijměte všechny licence, které jsou vám prezentovány.

   

6. Tento proces opakujte, pokud chcete do projektu přidat balíček NuGet s názvem WindowsAzure.Storage . Tento balíček obsahuje rozhraní API pro přístup ke službě Azure Storage z aplikací .NET. OK všechny změny a přijměte všechny licence, které jsou vám prezentovány.

   

7. Otevřete Web.config a do oddílu <appSettings> přidejte následující příkaz, nahraďte ACCOUNT_NAME názvem účtu úložiště, který jste vytvořili v první části, a ACCOUNT_KEY přístupovým klíčem, který jste uložili.

   <add key="StorageConnectionString" value="DefaultEndpointsProtocol=https;AccountName=ACCOUNT_NAME;AccountKey=ACCOUNT_KEY" />
   

   Důležité

   Soubor Web.config je určený k uložení citlivých informací, jako jsou klíče předplatného, a všechny požadavky HTTP na soubor s příponou .config se zpracovávají modulem ASP.NET, který vrací zprávu "Tento typ stránky není obsluhován". Pokud ale útočník najde nějaké další zneužití, které mu umožní zobrazit obsah web.config , bude moct tyto informace zveřejnit. Další kroky, které můžete provést k dalšímu zabezpečení dat Web.config, najdete v tématu Ochrana Připojení ion řetězců a dalších informací o konfiguraci.

8. Otevřete soubor s názvem _Layout.cshtml ve složce Views/Shared projektu. Na řádku 19 změňte "Název aplikace" na "Intellipix". Řádek by měl vypadat takto:

   @Html.ActionLink("Intellipix", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
   

   Poznámka:

   V projektu ASP.NET MVC je _Layout.cshtml speciální zobrazení, které slouží jako šablona pro jiná zobrazení. Obvykle definujete obsah záhlaví a zápatí, který je společný pro všechna zobrazení v tomto souboru.

9. Klikněte pravým tlačítkem na složku Modely projektu a pomocí příkazu Přidat –> třída... přidejte do složky soubor třídy s názvem BlobInfo.cs. Pak nahraďte prázdnou třídu BlobInfo následující definicí třídy:

   public class BlobInfo
   {
       public string ImageUri { get; set; }
       public string ThumbnailUri { get; set; }
       public string Caption { get; set; }
   }
   

10. Otevřete HomeController.cs ze složky Kontrolery projektu a do horní části souboru přidejte následující using příkazy:

    using ImageResizer;
    using Intellipix.Models;
    using Microsoft.WindowsAzure.Storage;
    using Microsoft.WindowsAzure.Storage.Blob;
    using System.Configuration;
    using System.Threading.Tasks;
    using System.IO;
    

11. Nahraďte metodu Index v HomeController.cs následující implementací:

    public ActionResult Index()
    {
        // Pass a list of blob URIs in ViewBag
        CloudStorageAccount account = CloudStorageAccount.Parse(ConfigurationManager.AppSettings["StorageConnectionString"]);
        CloudBlobClient client = account.CreateCloudBlobClient();
        CloudBlobContainer container = client.GetContainerReference("photos");
        List<BlobInfo> blobs = new List<BlobInfo>();
    
        foreach (IListBlobItem item in container.ListBlobs())
        {
            var blob = item as CloudBlockBlob;
    
            if (blob != null)
            {
                blobs.Add(new BlobInfo()
                {
                    ImageUri = blob.Uri.ToString(),
                    ThumbnailUri = blob.Uri.ToString().Replace("/photos/", "/thumbnails/")
                });
            }
        }
    
        ViewBag.Blobs = blobs.ToArray();
        return View();
    }
    

    Nová metoda Index vytvoří výčet objektů blob v kontejneru "photos" a předá pole objektů BlobInfo představujících tyto objekty blob do zobrazení prostřednictvím ASP.NET MVC ViewBag vlastnost. Později upravíte zobrazení tak, aby se tyto objekty vyčíslily a zobrazily kolekci miniatur fotek. Třídy, které použijete pro přístup k účtu úložiště, a výčet objektů blob – CloudStorageAccount, CloudBlobClient a CloudBlobContainer – pocházejí z balíčku WindowsAzure.Storage , který jste nainstalovali prostřednictvím NuGetu.

12. Do třídy HomeController v HomeController.cs přidejte následující metodu:

    [HttpPost]
    public async Task<ActionResult> Upload(HttpPostedFileBase file)
    {
        if (file != null && file.ContentLength > 0)
        {
            // Make sure the user selected an image file
            if (!file.ContentType.StartsWith("image"))
            {
                TempData["Message"] = "Only image files may be uploaded";
            }
            else
            {
                try
                {
                    // Save the original image in the "photos" container
                    CloudStorageAccount account = CloudStorageAccount.Parse(ConfigurationManager.AppSettings["StorageConnectionString"]);
                    CloudBlobClient client = account.CreateCloudBlobClient();
                    CloudBlobContainer container = client.GetContainerReference("photos");
                    CloudBlockBlob photo = container.GetBlockBlobReference(Path.GetFileName(file.FileName));
                    await photo.UploadFromStreamAsync(file.InputStream);
    
                    // Generate a thumbnail and save it in the "thumbnails" container
                    using (var outputStream = new MemoryStream())
                    {
                        file.InputStream.Seek(0L, SeekOrigin.Begin);
                        var settings = new ResizeSettings { MaxWidth = 192 };
                        ImageBuilder.Current.Build(file.InputStream, outputStream, settings);
                        outputStream.Seek(0L, SeekOrigin.Begin);
                        container = client.GetContainerReference("thumbnails");
                        CloudBlockBlob thumbnail = container.GetBlockBlobReference(Path.GetFileName(file.FileName));
                        await thumbnail.UploadFromStreamAsync(outputStream);
                    }
                }
                catch (Exception ex)
                {
                    // In case something goes wrong
                    TempData["Message"] = ex.Message;
                }
            }
        }
    
        return RedirectToAction("Index");
    }
    

    Toto je metoda, která se volá při nahrávání fotky. Každý nahraný obrázek uloží jako objekt blob v "photos" kontejneru, vytvoří miniaturu z původního obrázku pomocí ImageResizer balíčku a uloží obrázek miniatury jako objekt blob v kontejneru "thumbnails" .

13. Otevřete index.cshmtl ve složce Views/Home projektu a nahraďte jeho obsah následujícím kódem a značkou:

    @{
        ViewBag.Title = "Intellipix Home Page";
    }
    
    @using Intellipix.Models
    
    <div class="container" style="padding-top: 24px">
        <div class="row">
            <div class="col-sm-8">
                @using (Html.BeginForm("Upload", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))
                {
                    <input type="file" name="file" id="upload" style="display: none" onchange="$('#submit').click();" />
                    <input type="button" value="Upload a Photo" class="btn btn-primary btn-lg" onclick="$('#upload').click();" />
                    <input type="submit" id="submit" style="display: none" />
                }
            </div>
            <div class="col-sm-4 pull-right">
            </div>
        </div>
    
        <hr />
    
        <div class="row">
            <div class="col-sm-12">
                @foreach (BlobInfo blob in ViewBag.Blobs)
                {
                    <img src="@blob.ThumbnailUri" width="192" title="@blob.Caption" style="padding-right: 16px; padding-bottom: 16px" />
                }
            </div>
        </div>
    </div>
    
    @section scripts
    {
        <script type="text/javascript" language="javascript">
            if ("@TempData["Message"]" !== "") {
                alert("@TempData["Message"]");
            }
        </script>
    }
    

    Zde použitý jazyk je Razor, který umožňuje vložit spustitelný kód do kódu HTML. Příkaz @foreach uprostřed souboru vyčísluje objekty BlobInfo předané z kontroleru v ViewBag a vytvoří z nich elementy HTML <img> . Vlastnost src každého prvku se inicializuje pomocí identifikátoru URI objektu blob obsahujícího miniaturu obrázku.

14. Stáhněte a rozbalte soubor photos.zip z ukázkového úložiště dat GitHubu. Jedná se o řadu různých fotek, které můžete použít k otestování aplikace.

15. Uložte změny a stisknutím ctrl +F5 spusťte aplikaci v prohlížeči. Pak vyberte Nahrát fotku a nahrajte jeden z obrázků, které jste stáhli. Ověřte, že se na stránce zobrazí miniatura fotky.

    

16. Nahrajte několik dalších obrázků ze složky fotek . Ověřte, že se zobrazují také na stránce:

    

17. Klikněte pravým tlačítkem v prohlížeči a vyberte Zobrazit zdroj stránky a zobrazte zdrojový kód stránky. <img> Najděte prvky představující miniatury obrázků. Všimněte si, že adresy URL přiřazené k obrázkům odkazují přímo na objekty blob v úložišti objektů blob. Důvodem je to, že nastavíte úroveň veřejného přístupu kontejnerů na objekt blob, což zpřístupňuje objekty blob uvnitř veřejně přístupné.

18. Vraťte se do Průzkumník služby Azure Storage (nebo ho restartujte, pokud jste ho nenechali spuštěný) a vyberte "photos" kontejner pod účtem úložiště. Počet objektů blob v kontejneru by se měl shodovat s počtem fotek, které jste nahráli. Poklikáním na jeden z objektů blob ho stáhněte a prohlédněte si obrázek uložený v objektu blob.

    

19. "thumbnails" Otevřete kontejner v Průzkumník služby Storage. Otevřete jeden z objektů blob, abyste zobrazili miniatury vygenerované z nahrání obrázku.

Aplikace zatím nenabízí způsob, jak zobrazit původní obrázky, které jste nahráli. V ideálním případě by se při výběru miniatury obrázku měl zobrazit původní obrázek. Tuto funkci přidáte do dalšího kroku.

Přidání lightboxu pro prohlížení fotek

V této části použijete bezplatnou opensourcovou javascriptovou knihovnu pro přidání prohlížeče Lightbox, který uživatelům umožňuje zobrazit původní obrázky, které nahráli (nikoli jenom miniatury obrázků). Soubory jsou k dispozici za vás. Stačí je integrovat do projektu a provést menší úpravy index.cshtml.

1. Stáhněte si soubory lightbox.css a lightbox.js z úložiště kódu GitHubu.

2. V Průzkumník řešení klikněte pravým tlačítkem na složku Skripty projektu a pomocí příkazu Přidat –> Nová položka... vytvořte soubor lightbox.js. Vložte obsah z ukázkového souboru v úložišti kódu GitHubu.

3. Klikněte pravým tlačítkem na složku "Obsah" projektu a pomocí příkazu Přidat –> Nová položka... vytvořte soubor lightbox.css . Vložte obsah z ukázkového souboru v úložišti kódu GitHubu.

4. Stáhněte a rozbalte soubor buttons.zip z úložiště datových souborů GitHubu: https://github.com/Azure-Samples/cognitive-services-sample-data-files/tree/master/ComputerVision/storage-lab-tutorial. Měli byste mít čtyři obrázky tlačítek.

5. Klikněte pravým tlačítkem myši na projekt Intellipix v Průzkumník řešení a pomocí příkazu Přidat –> Nová složka přidejte do projektu složku s názvem Obrázky.

6. Klikněte pravým tlačítkem na složku Obrázky a pomocí příkazu Přidat –> Existující položka... naimportujte čtyři obrázky, které jste stáhli.

7. Otevřete BundleConfig.cs ve složce "App_Start" projektu. Do metody v BundleConfig.cs přidejte následující příkazRegisterBundles:

   bundles.Add(new ScriptBundle("~/bundles/lightbox").Include(
             "~/Scripts/lightbox.js"));
   

8. Ve stejné metodě vyhledejte příkaz, který vytvoří StyleBundle z "~/Content/css" a přidá lightbox.css do seznamu šablon stylů v sadě. Tady je upravený příkaz:

   bundles.Add(new StyleBundle("~/Content/css").Include(
             "~/Content/bootstrap.css",
             "~/Content/site.css",
             "~/Content/lightbox.css"));
   

9. Otevřete soubor _Layout.cshtml ve složce Views/Shared projektu a těsně před @RenderSection příkaz dole přidejte následující příkaz:

   @Scripts.Render("~/bundles/lightbox")
   

10. Posledním úkolem je začlenit prohlížeč lightboxu na domovskou stránku. Uděláte to tak, že otevřete Soubor Index.cshtml (je ve složce Views/Home projektu) a nahradíte smyčku @foreach tímto:

    @foreach (BlobInfo blob in ViewBag.Blobs)
    {
        <a href="@blob.ImageUri" rel="lightbox" title="@blob.Caption">
            <img src="@blob.ThumbnailUri" width="192" title="@blob.Caption" style="padding-right: 16px; padding-bottom: 16px" />
        </a>
    }
    

11. Uložte změny a stisknutím ctrl +F5 spusťte aplikaci v prohlížeči. Pak vyberte jeden z obrázků, které jste nahráli dříve. Potvrďte, že se zobrazí lightbox a zobrazí zvětšené zobrazení obrázku.

    

12. Výběrem symbolu X v pravém dolním rohu lightboxu ho zavřete.

Teď máte způsob, jak zobrazit obrázky, které jste nahráli. Dalším krokem je udělat s těmito obrázky víc.

Použití služby Azure AI Vision k vygenerování metadat

Vytvoření prostředku Vision

Budete muset vytvořit prostředek Počítačové zpracování obrazu pro váš účet Azure. Tento prostředek spravuje váš přístup ke službě Azure AI Vision.

1. Postupujte podle pokynů v tématu Vytvoření prostředku služeb Azure AI a vytvořte prostředek s více službami nebo prostředek Zpracování obrazu.

2. Pak přejděte do nabídky vaší skupiny prostředků a vyberte prostředek Vision, který jste vytvořili. Zkopírujte adresu URL v části Koncový bod na místo, kam ji můžete během chvilky snadno načíst. Pak vyberte Zobrazit přístupové klíče.

   

   Poznámka:

   Nové prostředky vytvořené po 1. červenci 2019 budou používat vlastní názvy subdomén. Další informace a úplný seznam regionálních koncových bodů najdete v tématu Vlastní subdomény pro služby Azure AI.

3. V dalším okně zkopírujte hodnotu KLÍČE 1 do schránky.

   

Přidání přihlašovacích údajů azure AI Vision

Dále do aplikace přidáte požadované přihlašovací údaje, aby mohl přistupovat k prostředkům vision.

Přejděte do souboru Web.config v kořenovém adresáři projektu. Do části souboru přidejte následující příkazy <appSettings> , nahraďte VISION_KEY ho klíčem, který jste zkopírovali v předchozím kroku, a VISION_ENDPOINT adresou URL, kterou jste si uložili v kroku předtím.

<add key="SubscriptionKey" value="VISION_KEY" />
<add key="VisionEndpoint" value="VISION_ENDPOINT" />

V Průzkumník řešení. Klikněte pravým tlačítkem na řešení projektu a vyberte Spravovat balíčky NuGet. Ve Správci balíčků, který se otevře, zaškrtněte políčko Zahrnout předběžné verze a vyhledejte Azure.AI.Vision.ImageAnalysis. Vyberte volbu Instalovat.

Přidání kódu pro generování metadat

Dále přidáte kód, který ve skutečnosti používá službu Azure AI Vision k vytvoření metadat pro obrázky.

1. Otevřete soubor HomeController.cs ve složce Kontrolery projektu a do horní části souboru přidejte následující using příkazy:

   using Azure;
   using Azure.AI.Vision.ImageAnalysis;
   using System;
   

2. Pak přejděte na metodu Upload . Tato metoda převede a nahraje obrázky do úložiště objektů blob. Následující kód přidejte hned za blok, který začíná // Generate a thumbnail (nebo na konci procesu vytvoření objektu blob image). Tento kód vezme objekt blob obsahující obrázek (photo) a pomocí služby Azure AI Vision vygeneruje popis tohoto obrázku. Rozhraní API služby Azure AI Vision také vygeneruje seznam klíčových slov, která se vztahují na obrázek. Vygenerovaný popis a klíčová slova jsou uloženy v metadatech objektu blob, aby je bylo možné později načíst.

   // create a new ImageAnalysisClient
   ImageAnalysisClient client = new ImageAnalysisClient(
           new Uri(Environment.GetEnvironmentVariable(ConfigurationManager.AppSettings["VisionEndpoint"])),
           new AzureKeyCredential(ConfigurationManager.AppSettings["SubscriptionKey"]));
   
   VisualFeatures = visualFeatures = VisualFeatures.Caption | VisualFeatures.Tags;
   
   ImageAnalysisOptions analysisOptions = new ImageAnalysisOptions()
   {
       GenderNeutralCaption = true,
       Language = "en",
   };
   
   Uri imageURL = new Uri(photo.Uri.ToString());
   
   ImageAnalysisResult  result = client.Analyze(imageURL,visualFeatures,analysisOptions);
   
   // Record the image description and tags in blob metadata
   photo.Metadata.Add("Caption", result.Caption.Text);
   
   for (int i = 0; i < result.Tags.Values.Count; i++)
   {
       string key = String.Format("Tag{0}", i);
       photo.Metadata.Add(key, result.Tags.Values[i]);
   }
   
   await photo.SetMetadataAsync();
   

3. Dále přejděte na metodu Index ve stejném souboru. Tato metoda vyčíslí uložené objekty blob obrázku v cílovém kontejneru objektů blob (jako instance IListBlobItem ) a předá je do zobrazení aplikace. foreach Nahraďte blok v této metodě následujícím kódem. Tento kód volá CloudBlockBlob.FetchAttributes pro získání připojených metadat jednotlivých objektů blob. Extrahuje popis vygenerovaný počítačem (caption) z metadat a přidá ho do objektu BlobInfo , který se předá do zobrazení.

   foreach (IListBlobItem item in container.ListBlobs())
   {
       var blob = item as CloudBlockBlob;
   
       if (blob != null)
       {
           blob.FetchAttributes(); // Get blob metadata
           var caption = blob.Metadata.ContainsKey("Caption") ? blob.Metadata["Caption"] : blob.Name;
   
           blobs.Add(new BlobInfo()
           {
               ImageUri = blob.Uri.ToString(),
               ThumbnailUri = blob.Uri.ToString().Replace("/photos/", "/thumbnails/"),
               Caption = caption
           });
       }
   }
   

Otestování aplikace

Uložte změny v sadě Visual Studio a stisknutím ctrl +F5 spusťte aplikaci v prohlížeči. Pomocí aplikace můžete nahrát několik dalších obrázků, a to buď ze sady fotek, kterou jste stáhli, nebo z vlastní složky. Když najedete myší na jeden z nových obrázků v zobrazení, mělo by se zobrazit okno popisu a zobrazit počítač vygenerovaný popis obrázku.

Pokud chcete zobrazit všechna připojená metadata, použijte Průzkumník služby Azure Storage k zobrazení kontejneru úložiště, který používáte pro obrázky. Klikněte pravým tlačítkem na některý z objektů blob v kontejneru a vyberte Vlastnosti. V dialogovém okně se zobrazí seznam párů klíč-hodnota. Popis obrázku vygenerovaný počítačem je uložen v položce Captiona hledaná klíčová slova jsou uložena v Tag0, Tag1atd. Až budete hotovi, zavřete dialogové okno výběrem možnosti Storno .

Přidání hledání do aplikace

V této části přidáte na domovskou stránku vyhledávací pole, které uživatelům umožní prohledávat klíčová slova na obrázcích, které nahráli. Klíčová slova jsou klíčová slova generovaná rozhraním API služby Azure AI Vision a uložená v metadatech objektů blob.

1. Otevřete Index.cshtml ve složce Views/Home projektu a přidejte do prázdného <div> elementu následující příkazy s atributemclass="col-sm-4 pull-right":

   @using (Html.BeginForm("Search", "Home", FormMethod.Post, new { enctype = "multipart/form-data", @class = "navbar-form" }))
   {
       <div class="input-group">
           <input type="text" class="form-control" placeholder="Search photos" name="term" value="@ViewBag.Search" style="max-width: 800px">
           <span class="input-group-btn">
               <button class="btn btn-primary" type="submit">
                   <i class="glyphicon glyphicon-search"></i>
               </button>
           </span>
       </div>
   }
   

   Tento kód a revize přidá vyhledávací pole a tlačítko Hledat na domovskou stránku.

2. Otevřete HomeController.cs ve složce Controllers projektu a do třídy HomeController přidejte následující metodu:

   [HttpPost]
   public ActionResult Search(string term)
   {
       return RedirectToAction("Index", new { id = term });
   }
   

   Toto je metoda, která se volá, když uživatel vybere tlačítko Hledat přidané v předchozím kroku. Aktualizuje stránku a v adrese URL obsahuje parametr vyhledávání.

3. Nahraďte metodu Index následující implementací:

   public ActionResult Index(string id)
   {
       // Pass a list of blob URIs and captions in ViewBag
       CloudStorageAccount account = CloudStorageAccount.Parse(ConfigurationManager.AppSettings["StorageConnectionString"]);
       CloudBlobClient client = account.CreateCloudBlobClient();
       CloudBlobContainer container = client.GetContainerReference("photos");
       List<BlobInfo> blobs = new List<BlobInfo>();
   
       foreach (IListBlobItem item in container.ListBlobs())
       {
           var blob = item as CloudBlockBlob;
   
           if (blob != null)
           {
               blob.FetchAttributes(); // Get blob metadata
   
               if (String.IsNullOrEmpty(id) || HasMatchingMetadata(blob, id))
               {
                   var caption = blob.Metadata.ContainsKey("Caption") ? blob.Metadata["Caption"] : blob.Name;
   
                   blobs.Add(new BlobInfo()
                   {
                       ImageUri = blob.Uri.ToString(),
                       ThumbnailUri = blob.Uri.ToString().Replace("/photos/", "/thumbnails/"),
                       Caption = caption
                   });
               }
           }
       }
   
       ViewBag.Blobs = blobs.ToArray();
       ViewBag.Search = id; // Prevent search box from losing its content
       return View();
   }
   

   Všimněte si, že metoda Index nyní přijímá parametr id , který obsahuje hodnotu, kterou uživatel zadal do vyhledávacího pole. Prázdný nebo chybějící id parametr indikuje, že by se měly zobrazit všechny fotky.

4. Do třídy HomeController přidejte následující pomocnou metodu:

   private bool HasMatchingMetadata(CloudBlockBlob blob, string term)
   {
       foreach (var item in blob.Metadata)
       {
           if (item.Key.StartsWith("Tag") && item.Value.Equals(term, StringComparison.InvariantCultureIgnoreCase))
               return true;
       }
   
       return false;
   }
   

   Tato metoda se volá metodou Index k určení, zda klíčová slova metadat připojená k danému objektu blob obrázku obsahují hledaný termín, který uživatel zadal.

5. Spusťte aplikaci znovu a nahrajte několik fotek. Nebojte se používat vlastní fotky, nejen ty, které jsou součástí tohoto kurzu.

6. Do vyhledávacího pole zadejte klíčové slovo, například "river". Pak vyberte tlačítko Hledat .

   

7. Výsledky hledání se budou lišit v závislosti na tom, co jste zadali a jaké obrázky jste nahráli. Výsledkem by ale měl být filtrovaný seznam obrázků, jejichž klíčová slova metadat obsahují všechna klíčová slova nebo část zadaného klíčového slova.

   

8. Pokud chcete znovu zobrazit všechny obrázky, vyberte tlačítko Zpět prohlížeče.

Už jste skoro u konce. Je čas nasadit aplikaci do cloudu.

Nasadit aplikaci do Azure

V této části nasadíte aplikaci do Azure ze sady Visual Studio. Sadě Visual Studio umožníte vytvořit webovou aplikaci Azure, abyste nemuseli přejít na web Azure Portal a vytvořit ji samostatně.

1. Klikněte pravým tlačítkem myši na projekt v Průzkumník řešení a v místní nabídce vyberte Publikovat... Ujistěte se, že je vybraná možnost Microsoft Aplikace Azure Service a Create New (Vytvořit nový) a pak vyberte tlačítko Publikovat.

   

2. V dalším dialogovém okně vyberte skupinu prostředků IntellipixResources v části Skupina prostředků. Vyberte tlačítko Nový... vedle "Plán služby App Service" a vytvořte nový plán služby App Service ve stejném umístění, které jste vybrali pro účet úložiště v části Vytvořit účet úložiště a přijměte výchozí hodnoty všude jinde. Dokončete tak, že vyberete tlačítko Vytvořit .

   

3. Po chvíli se aplikace zobrazí v okně prohlížeče. Poznamenejte si adresu URL na panelu Adresa. Aplikace už není spuštěná místně; je na webu, kde je veřejně dostupný.

   

Pokud v aplikaci provedete změny a chcete změny odeslat na web, znovu projděte proces publikování. Před publikováním na webu můžete i nadále testovat změny místně.

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

Pokud chcete pokračovat v práci na webové aplikaci, přečtěte si část Další kroky . Pokud nechcete tuto aplikaci dál používat, měli byste odstranit všechny prostředky specifické pro danou aplikaci. Pokud chcete odstranit prostředky, můžete odstranit skupinu prostředků, která obsahuje vaše předplatné služby Azure Storage a prostředek zpracování obrazu. Tím se odebere účet úložiště, objekty blob nahrané do něj a prostředek služby App Service potřebný k připojení k webové aplikaci ASP.NET.

Pokud chcete odstranit skupinu prostředků, otevřete na portálu kartu Skupiny prostředků, přejděte do skupiny prostředků, kterou jste použili pro tento projekt, a v horní části zobrazení vyberte Odstranit skupinu prostředků. Zobrazí se výzva k zadání názvu skupiny prostředků, abyste potvrdili, že ji chcete odstranit. Po odstranění není možné skupinu prostředků obnovit.

Další kroky

Existuje mnohem více toho, co byste mohli udělat, abyste mohli používat Azure a vyvíjet aplikaci Intellipix ještě dál. Můžete například přidat podporu ověřování uživatelů a odstraňování fotek a místo vynucení, aby uživatel čekal, až služby Azure AI zpracovávají fotku po nahrání, můžete azure Functions použít k asynchronnímu volání rozhraní AZURE AI Vision API při každém přidání obrázku do úložiště objektů blob. Na obrázku můžete také provést libovolný počet dalších operací analýzy obrázků, které jsou popsané v přehledu.

Přehled analýzy obrázků