Kurz: použití Počítačové zpracování obrazu k vygenerování metadat imagí v Azure Storage

Článek
10/15/2021
19 min ke čtení

V tomto kurzu se dozvíte, jak integrovat službu Azure Počítačové zpracování obrazu do webové aplikace pro generování metadat pro nahrané obrázky. To je užitečné pro scénáře správy digitálních prostředků (pro PŘEhradování) , jako třeba když společnost chce rychle vygenerovat popisné titulky nebo vyhledat klíčová slova pro všechny její obrázky.

Visual Studio použijete k psaní webové aplikace MVC, která přijímá obrázky odesílané uživateli a ukládá obrázky do úložiště objektů blob v Azure. Naučíte se, jak číst a zapisovat objekty BLOB v jazyce C# a použít metadata objektů BLOB k připojení dalších informací k objektům blob, které vytvoříte. Pak odešlete každý obrázek odeslaný uživatelem do rozhraní API pro počítačové zpracování obrazu, který vygeneruje titulek a metadata hledání pro obrázek. Nakonec můžete nasadit aplikaci do cloudu pomocí Visual Studio.

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

Vytvořte účet úložiště a kontejnery úložiště pomocí Azure Portal
vytvoření webové aplikace v Visual Studio a její nasazení do Azure
K extrakci informací z imagí použijte rozhraní API pro počítačové zpracování obrazu.
připojení metadat k Azure Storage imagí
kontrolovat metadata imagí pomocí Průzkumník služby Azure Storage

Tip

Část použití počítačové zpracování obrazu ke generování metadat je nejrelevantnější pro analýzu obrázků. Pokud chcete zjistit, jak se analýza obrázků integruje do zavedené aplikace, přejděte sem.

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

Požadavky

Visual Studio 2017 Community edition nebo vyšší a nainstalují se úlohy vývoj pro ASP.NET a web a vývoj pro Azure.
je nainstalovaný nástroj Průzkumník služby Azure Storage .

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

V této části použijete Azure Portal k vytvoření účtu úložiště. Pak vytvoříte dvojici kontejnerů: jeden pro ukládání imagí odeslaných uživatelem a druhý pro uložení miniatur obrázků generovaných z odesílaných imagí.

Otevřete v prohlížeči portál Azure Portal. Pokud budete vyzváni k přihlášení, použijte účet Microsoft.
Pokud chcete vytvořit účet úložiště, klikněte na tlačítko + vytvořit prostředek na pásu karet vlevo. pak klikněte na Storage a pak na Storage účet.
Do pole název zadejte jedinečný název účtu úložiště a ujistěte se, že vedle něho se zobrazí zelená značka zaškrtnutí. Název je důležitý, protože tvoří jednu část adresy URL, na které se přihlíží k objektům blob vytvořeným v rámci tohoto účtu. Vložte účet úložiště do nové skupiny prostředků s názvem "IntellipixResources" a vyberte oblast, která je nejblíže. Dokončete kliknutím na tlačítko Revize + vytvořit v dolní části obrazovky a vytvořte nový účet úložiště.

Poznámka

názvy účtů Storage můžou mít délku 3 až 24 znaků a můžou obsahovat jenom číslice a malá písmena. Název, který zadáte, musí být jedinečný v rámci Azure. Pokud někdo jiný zvolil stejný název, budete upozorněni, že název není k dispozici s červeným vykřičníkem v poli název .
Na pásu karet vlevo klikněte na skupiny prostředků . Pak klikněte na skupinu prostředků "IntellipixResources".
Na kartě, která se otevře pro skupinu prostředků, klikněte na účet úložiště, který jste vytvořili. Pokud účet úložiště ještě není, můžete v horní části karty kliknout na aktualizovat , dokud se nezobrazí.
Na kartě účtu úložiště kliknutím na objekty blob zobrazte seznam kontejnerů přidružených k tomuto účtu.
Účet úložiště aktuálně neobsahuje žádné kontejnery. Předtím, než budete moci vytvořit objekt blob, je nutné vytvořit kontejner, ve kterém je uložen. Kliknutím na + kontejner vytvořte nový kontejner. photosDo pole název zadejte a jako úroveň veřejného přístupu vyberte objekt BLOB . Pak kliknutím na OK vytvořte kontejner s názvem "fotky".

Ve výchozím nastavení jsou kontejnery a jejich obsah privátní. Výběr objektu BLOB jako úroveň přístupu zpřístupňuje objekty blob ve veřejném kontejneru "fotky", ale nezpřístupňuje samotný kontejner. To je to, co potřebujete, protože obrázky uložené v kontejneru "fotky" budou propojeny s z webové aplikace.
Opakováním předchozího kroku vytvořte kontejner s názvem "miniatury", jakmile bude zajištěno, že úroveň veřejného přístupu kontejneru bude nastavena na hodnotu BLOB.
Potvrďte, že se oba kontejnery zobrazují v seznamu kontejnerů pro tento účet úložiště a že názvy jsou napsané správně.
Zavřete obrazovku "Blob service". V nabídce na levé straně obrazovky účtu úložiště klikněte na přístupové klíče a potom klikněte na tlačítko Kopírovat vedle klíče pro klíč1. Vložte tento přístupový klíč do svého oblíbeného textového editoru pro pozdější použití.

Nyní jste vytvořili účet úložiště pro ukládání imagí odeslaných do aplikace, kterou chcete sestavit, a kontejnery pro uložení imagí do.

spustit 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 s Azure Storage na počítačích se systémy Windows, macOS a Linux. 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.

pokud jste nenainstalovali Průzkumník služby Storage nebo chcete mít jistotu, že používáte nejnovější verzi, navštivte http://storageexplorer.com/ ji a stáhněte ji a nainstalujte.
spusťte Průzkumník služby Storage. Pokud se zobrazí výzva k přihlášení, použijte účet Microsoft — stejným způsobem, který jste použili pro přihlášení k Azure Portal. pokud nevidíte účet úložiště v levém podokně Průzkumník služby Storage, klikněte na tlačítko spravovat účty zvýrazněné níže a ujistěte se, že účet Microsoft a předplatné použité k vytvoření účtu úložiště byly přidány do Průzkumník služby Storage.
Kliknutím na malou šipku vedle účtu úložiště zobrazte jeho obsah a pak klikněte na šipku vedle kontejnerů objektů BLOB. Ověřte, že se kontejnery, které jste vytvořili, zobrazí v seznamu.

Kontejnery jsou aktuálně prázdné, ale po nasazení aplikace a zahájení nahrávání fotografií se změní. když máte nainstalovanou Průzkumník služby Storage, umožní vám to snadno zjistit, co vaše aplikace zapisuje do úložiště objektů blob.

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

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

spusťte Visual Studio a k vytvoření nového projektu webové aplikace Visual C# ASP.NET s názvem "Intellipix" (krátká pro "inteligentní obrázky") použijte příkaz > nový Project > souboru .
v dialogovém okně nová webová aplikace ASP.NET se ujistěte, že je vybraná možnost MVC . Pak klikněte na OK.
Věnujte prosím chvíli kontrole struktury projektu v Průzkumník řešení. Mimo jiné je složka s názvem Controllers , která obsahuje řadiče 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 uživateli.
pomocí příkazu Visual Studio ladění-> spustit bez ladění (nebo stiskněte klávesy Ctrl + F5) a spusťte aplikaci v prohlížeči. Tady je postup, jak aplikace vypadá v jejím současném stavu:
Zavřete prohlížeč a vraťte se k Visual Studio. v Průzkumník řešení klikněte pravým tlačítkem na projekt Intellipix a vyberte spravovat balíčky NuGet.... Klikněte na tlačítko Procházet. pak imageresizer do vyhledávacího pole zadejte a vyberte balíček NuGet s názvem ImageResizer. Nakonec klikněte na nainstalovat a nainstalujte nejnovější stabilní verzi balíčku. ImageResizer obsahuje rozhraní API, která použijete k vytvoření miniatur obrázků z imagí odeslaných do aplikace. Potvrďte všechny změny a přijměte všechny licence, které vám byly nabídnuty.
tento postup opakujte, chcete-li přidat balíček NuGet s názvem WindowsAzure. Storage do projektu. tento balíček obsahuje rozhraní api pro přístup k Azure Storage z aplikací .net. Potvrďte všechny změny a přijměte všechny licence, které vám byly nabídnuty.
Otevřete Web.config a do oddílu přidejte následující příkaz <appSettings> , 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" />
```
Otevřete soubor s názvem _Layout. cshtml v zobrazeních/sdílené složce 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 další zobrazení. Obvykle definujete obsah hlaviček a zápatí, který je společný pro všechna zobrazení v tomto souboru.
Klikněte pravým tlačítkem na složku modely projektu a pomocí příkazu Add-> Class... 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; }
}
```

Otevřete soubor HomeController. cs ze složky řadiče projektu a na začátek 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;

Nahraďte metodu indexu 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();
}

metoda new Index vypíše objekty blob v "photos" kontejneru a předá pole BlobInfo objektů, které představují tyto objekty blob, do zobrazení prostřednictvím vlastnosti ViewBag MVC služby ASP.NET. Později toto zobrazení upravíte, abyste mohli vytvořit výčet těchto objektů a zobrazit kolekci miniatur fotografií. 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 NuGet.

Přidejte následující metodu do třídy HomeController v HomeController. cs:

[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á je volána při nahrávání fotografie. Ukládá všechny nahrané obrázky jako objekty BLOB v "photos" kontejneru, vytvoří miniaturu z původní Image pomocí ImageResizer balíčku a uloží obrázek miniatury do kontejneru jako objekt BLOB "thumbnails" .

Otevřete index. cshmtl v zobrazeních/domovské složce 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. @foreachPříkaz uprostřed souboru vytvoří výčet objektů BlobInfo předaných z kontroleru v ViewBag a <img> z nich vytvoří prvky HTML. srcVlastnost každého elementu je inicializována s identifikátorem URI objektu BLOB obsahujícího miniaturu obrázku.

stáhněte a rozbalte soubor photos.zip z úložiště ukázkových dat GitHub. Toto je sortiment různých fotek, které můžete použít k otestování aplikace.
Uložte změny a stisknutím kombinace kláves CTRL + F5 spusťte aplikaci v prohlížeči. pak klikněte na Upload fotografii a nahrajte jednu z imagí, kterou jste stáhli. Potvrďte, že se na stránce zobrazí miniatura verze fotografie.
Upload více obrázků ze složky fotek . Potvrďte, že se zobrazují na stránce:
Kliknutím pravým tlačítkem v prohlížeči a výběrem Zobrazit zdroj stránky zobrazíte zdrojový kód stránky. Najde <img> prvky reprezentující miniatury obrázků. Všimněte si, že adresy URL přiřazené k imagí 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 Containers na BLOB, která zpřístupňuje objekty blob uvnitř veřejně přístupného.
vraťte se na 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 měl být stejný jako počet fotek, které jste nahráli. Dvojím kliknutím na jeden z objektů BLOB si ho stáhněte a podívejte se na Image uloženou v objektu BLOB.
otevřete "thumbnails" kontejner v Průzkumník služby Storage. Otevřete jeden z objektů blob, abyste viděli miniatury vygenerované z nahrávání obrázků.

Aplikace ještě nenabízí způsob, jak zobrazit původní obrázky, které jste nahráli. V ideálním případě by se měl po kliknutí na miniaturu obrázku zobrazit původní obrázek. Tuto funkci přidáte dál.

V této části použijete bezplatnou Open Source knihovnu JavaScriptu k přidání prohlížeče Lightbox, který umožňuje uživatelům zobrazit původní nahrané obrázky (nikoli jenom miniatury obrázků). Soubory jsou k dispozici za vás. Vše, co musíte udělat, je integrovat do projektu a udělat menší úpravu indexu. cshtml.

stáhněte soubory lightbox. css a lightbox.js z úložiště kódu GitHub.
V Průzkumník řešení klikněte pravým tlačítkem myši na složku skripty vašeho projektu a pomocí příkazu Add-> New Item... vytvořte soubor lightbox.js . vložte obsah z ukázkového souboru v úložišti kódu GitHub.
Klikněte pravým tlačítkem na složku Content (obsah) projektu a pomocí příkazu Add-> New Item... vytvořte soubor Lightbox. CSS . vložte obsah z ukázkového souboru v úložišti kódu GitHub.
stažení a extrahování buttons.zip souboru z úložiště GitHubch datových souborů: 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.
V Průzkumník řešení klikněte pravým tlačítkem na projekt Intellipix a pomocí příkazu Add-> New Folder přidejte do projektu složku s názvem images.
Klikněte pravým tlačítkem na složku images a pomocí příkazu Add-> exist Item... importujte čtyři stažené obrázky.
Otevřete BundleConfig. cs ve složce app_start projektu. Do RegisterBundles metody v BundleConfig. cs přidejte následující příkaz:
```
bundles.Add(new ScriptBundle("~/bundles/lightbox").Include(
          "~/Scripts/lightbox.js"));
```
Ve stejné metodě Najděte příkaz, který vytvoří StyleBundle z "~/Content/CSS" a do seznamu šablon stylů v sadě přidejte Lightbox. CSS . Zde je upravený příkaz:
```
bundles.Add(new StyleBundle("~/Content/css").Include(
          "~/Content/bootstrap.css",
          "~/Content/site.css",
          "~/Content/lightbox.css"));
```
Otevřete _Layout. cshtml v zobrazeních nebo ve sdílené složce projektu a přidejte následující příkaz těsně před @RenderSection příkaz poblíž dolního okraje:
```
@Scripts.Render("~/bundles/lightbox")
```

Poslední úlohou je zahrnutí prohlížeče Lightbox do domovské stránky. Provedete to tak, že otevřete index. cshtml (je v zobrazeních/domovské složce projektu) a nahraďte @foreach smyčku 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>
}

Uložte změny a stisknutím kombinace kláves CTRL + F5 spusťte aplikaci v prohlížeči. Pak klikněte na jeden z imagí, které jste nahráli dříve. Ověřte, že se zobrazí Lightbox a zobrazí se Zvětšené zobrazení obrázku.
Kliknutím na X v pravém dolním rohu Lightbox ho zavřete.

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

Generování metadat pomocí Počítačové zpracování obrazu

Vytvoření prostředku Počítačové zpracování obrazu

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

Podle pokynů v části vytvoření prostředku Azure Cognitive Services vytvořte prostředek počítačové zpracování obrazu.
Pak přejděte do nabídky pro skupinu prostředků a klikněte na předplatné rozhraní API pro počítačové zpracování obrazu, které jste vytvořili. Zkopírujte adresu URL pod koncovým bodem , abyste ji mohli snadno načíst za chvíli. Pak klikněte na Zobrazit přístupové klíče.

Poznámka

Nové prostředky vytvořené po 1. červenci 2019 budou používat názvy vlastních subdomén. Další informace a úplný seznam regionálních koncových bodů najdete v tématu názvy vlastních subdomén pro Cognitive Services.
V dalším okně Zkopírujte hodnotu klíče 1 do schránky.

Přidat pověření Počítačové zpracování obrazu

V dalším kroku přidáte požadovaná pověření do vaší aplikace, aby mohla přistupovat k Počítačové zpracování obrazum prostředkům.

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> , které nahradíte klíčem, VISION_KEY který jste zkopírovali v předchozím kroku, a VISION_ENDPOINT adresou URL, kterou jste v kroku předtím uložili.

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

pak v Průzkumník řešení klikněte pravým tlačítkem na projekt a pomocí příkazu spravovat NuGet balíčky nainstalujte balíček Microsoft. Azure. cognitiveservices account. Vision. ComputerVision. Tento balíček obsahuje typy potřebné pro volání rozhraní API pro počítačové zpracování obrazu.

Přidat kód pro generování metadat

Dále přidáte kód, který ve skutečnosti používá službu Počítačové zpracování obrazu k vytváření metadat pro image.

Ve složce řadičů projektu otevřete soubor HomeController. cs a na using začátek souboru přidejte následující příkazy:

using Microsoft.Azure.CognitiveServices.Vision.ComputerVision;
using Microsoft.Azure.CognitiveServices.Vision.ComputerVision.Models;

pak přejdete na metodu Upload ; Tato metoda převádí a nahrává obrázky do úložiště objektů BLOB. Přidejte následující kód hned za blok, který začíná // Generate a thumbnail (nebo na konci procesu vytváření objektů BLOB v obraze). Tento kód přebírá objekt BLOB obsahující obrázek ( photo ) a používá počítačové zpracování obrazu k vygenerování popisu pro tento obrázek. Rozhraní API pro počítačové zpracování obrazu také generuje 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.

// Submit the image to the Azure Computer Vision API
ComputerVisionClient vision = new ComputerVisionClient(
    new ApiKeyServiceClientCredentials(ConfigurationManager.AppSettings["SubscriptionKey"]),
    new System.Net.Http.DelegatingHandler[] { });
vision.Endpoint = ConfigurationManager.AppSettings["VisionEndpoint"];

List<VisualFeatureTypes?> features = new List<VisualFeatureTypes?>() { VisualFeatureTypes.Description };
var result = await vision.AnalyzeImageAsync(photo.Uri.ToString(), features);

// Record the image description and tags in blob metadata
photo.Metadata.Add("Caption", result.Description.Captions[0].Text);

for (int i = 0; i < result.Description.Tags.Count; i++)
{
    string key = String.Format("Tag{0}", i);
    photo.Metadata.Add(key, result.Description.Tags[i]);
}

await photo.SetMetadataAsync();

Potom ve stejném souboru pokračujte na metodu index . Tato metoda vytvoří výčet uložených objektů BLOB imagí v cílovém kontejneru objektů BLOB (jako instance položky ilistblobitem ) a předává je do zobrazení aplikace. Nahraďte foreach blok v této metodě následujícím kódem. Tento kód volá CloudBlockBlob. FetchAttributes , aby získal všechna připojená metadata objektu BLOB. Extrahuje z metadat popis generovaný počítačem ( caption ) a přidá je do objektu BlobInfo , který se předává 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 Visual Studio a stisknutím kombinace kláves Ctrl + F5 spusťte aplikaci v prohlížeči. Použijte aplikaci k nahrání několika dalších imagí buď ze sady fotek, kterou jste stáhli, nebo z vaší vlastní složky. Když najedete kurzorem na jeden z nových obrázků v zobrazení, zobrazí se okno s popisem tlačítka a zobrazí se název obrázku generovaný počítačem.

chcete-li 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 kterýkoli z objektů BLOB v kontejneru a vyberte vlastnosti. V dialogovém okně se zobrazí seznam párů klíč-hodnota. Popis bitové kopie vygenerovaný počítačem je uložen v položce Caption a klíčová slova vyhledávání jsou uložena v Tag0 , Tag1 a tak dále. Až skončíte, zavřete dialogové okno kliknutím na tlačítko Storno .

Dialogové okno Vlastnosti obrázku s uvedenými značkami metadat

Přidání vyhledávání do aplikace

V této části přidáte do domovské stránky vyhledávací pole, které uživatelům umožňuje vyhledávat klíčová slova pro obrázky, které nahráli. Klíčová slova jsou ta, která jsou generována rozhraní API pro počítačové zpracování obrazu a uložená v metadatech objektů BLOB.

Otevřete index. cshtml v zobrazeních/domovské složce projektu a přidejte následující příkazy do prázdného <div> prvku s class="col-sm-4 pull-right" atributem:

@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 značka přidá vyhledávací pole a tlačítko hledání na domovskou stránku.

Otevřete HomeController. cs ve složce Controllers projektu a přidejte následující metodu do třídy HomeController :
```
[HttpPost]
public ActionResult Search(string term)
{
    return RedirectToAction("Index", new { id = term });
}
```
Toto je metoda, která se volá, když uživatel klikne na tlačítko hledání , které jste přidali v předchozím kroku. Aktualizuje stránku a v adrese URL obsahuje parametr hledání.

Nahraďte metodu indexu 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á ID parametru, které obsahuje hodnotu zadanou uživatelem do vyhledávacího pole. Prázdný nebo chybějící parametr ID označuje, že se mají zobrazit všechny fotografie.

Přidejte následující pomocnou metodu do třídy HomeController :

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 je volána metodou indexu 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.

Znovu spusťte aplikaci a nahrajte několik fotek. Používejte vlastní fotky, nejen ty, které jsou k dispozici v tomto kurzu.
Do vyhledávacího pole zadejte klíčové slovo "řeka". Pak klikněte na tlačítko Hledat .
Výsledky hledání se budou lišit v závislosti na tom, co jste zadali a jaké obrázky jste nahráli. Ale výsledek by měl být filtrovaný seznam imagí, jejichž klíčová slova metadata zahrnují vše nebo část zadaného klíčového slova.
Kliknutím na tlačítko zpět v prohlížeči zobrazíte všechny obrázky znovu.

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

Nasadit aplikaci do Azure

V této části nasadíte aplikaci do Azure z Visual Studio. umožní vám Visual Studio vytvořit webovou aplikaci Azure za vás, takže nebudete muset přejít do Azure Portal a vytvořit ji samostatně.

Klikněte pravým tlačítkem na projekt v Průzkumník řešení a vyberte publikovat... z místní nabídky. ujistěte se, že jsou vybrány Microsoft Azure App Service a vytvořit nové a klikněte na tlačítko publikovat .
V dalším dialogovém okně vyberte skupinu prostředků "IntellipixResources" ve skupině prostředků. Klikněte na tlačítko nové... vedle možnosti "App Service plán" a vytvořte nový plán 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 kliknutím na tlačítko vytvořit .
Po chvíli se aplikace zobrazí v okně prohlížeče. Poznamenejte si adresu URL v adresním řádku. Aplikace už není spuštěná místně. je na webu, kde je veřejně dosažitelný.

Pokud v aplikaci provedete změny a chcete změny odeslat na web, Projděte si proces publikování znovu. Změny můžete ještě před publikováním na webu otestovat místně.

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

Pokud chcete ve své webové aplikaci dál pracovat, přečtěte si část Další kroky . Pokud tuto aplikaci nechcete 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é Azure Storage a prostředek Počítačové zpracování obrazu. tím se odebere účet úložiště, do kterého se nahrály objekty blob a App Service prostředek potřebný pro 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í klikněte na Odstranit skupinu prostředků . Budete vyzváni k zadání názvu skupiny prostředků, abyste si potvrdili, že ji chcete odstranit. Po odstranění se skupina prostředků nedá obnovit.

Další kroky

Existuje mnohem více, než můžete využít Azure a ještě více vyvíjet aplikaci Intellipix. Můžete například přidat podporu pro ověřování uživatelů a odstraňování fotek a místo toho, aby uživatel čekal na Cognitive Services zpracování fotografie po nahrání, můžete použít Azure Functions k asynchronnímu volání rozhraní API pro počítačové zpracování obrazu při každém přidání obrázku do úložiště objektů BLOB. V imagi můžete také udělat libovolný počet dalších operací analýzy obrázků, které jsou popsaných v přehledu.

Přehled analýzy obrázků