Zapojte detekci objektů do své webové aplikace – 1. díl

30. 1. 2021 Azure, Programming

Zaujala vás detekce objektů a přemýšlíte, jak ji zapojit do vaší aplikace? Pak jste tu správně. Vytvořili jsme webovou aplikaci, na které vám ukážeme, jak jednoduše zapojit detekci objektů. Využíváme pro to jednu z kognitivních funkcí Microsoft Azure, a to Custom Vision, kterou můžete v rámci vašeho Azure balíčku využívat zdarma. Tak hurá na to!

Úvod

V prvním článku se podíváme obecně na aplikaci, její jednotlivé části, její využití a jaký je rozdíl mezi object detection a klasifikací. V druhém článku se poté podíváme hlouběji na kód, do techničtější části aplikace a na integraci modelu Custom Vision.

Aplikace PortVision

Abychom vám více přiblížili, jak Custom Vision funguje v praxi, vytvořili jsme webovou aplikaci PortVision. Po pořízení nebo nahrání fotografie portu (USB-A, USB-C, micro USB, lightning) implementovaný model Custom Vision rozpozná o jaký port jde. Následně pomocí Bingu vyhledá internetový obchod, kde je možné si zakoupit nový.

Aplikace PortVision | zdroj: archiv autora

Abyste se mohli naší aplikací proklikat spolu s námi, otevřete ji na tomto odkaze. Po otevření aplikace se vám zobrazí úvodní stránka se stručným popisem a instrukcemi. Kliknete na tlačítko „Dále“ a otevře se vám další stránka, na které se automaticky spustí kamera, s jejíž pomocí pořídíte fotky portů.

Aplikace PortVision | zdroj: archiv autora

V případě, že se vám kamera nespustí, zkontrolujte, jestli ji máte ve svém prohlížeči povolenou. Pokud se vám nepovede, jednoduše kliknete opět na tlačítko „Vyfotit“ a můžete fotografii pořídit znovu. Jakmile budete mít fotografii, kliknete na „Odeslat“. Fotka se odešle a projde natrénovaným modelem Custom Vision. Poté vás přesměruje na další stránku, kde se vám zobrazí výsledek. Pokud ale Custom Vision nedetekuje na fotce dva porty, budete ji muset vyfotit znovu.

Aplikace PortVision | zdroj: archiv autora

Na poslední stránce se vám zobrazí fotka portů, na které vám Custom Vision označí a pojmenuje porty. Pod ní se zobrazí vyhledávací okno, které vám vyhledá kabel, který potřebujete. Zadáte do něj délku požadovaného kabelu (pouze číselnou hodnotu v metrech) a stisknete tlačítko „Vyhledat“. Popřípadě můžete kliknout na tlačítko „Vyfotit znovu“ a pořídit novou fotografii.

Webový prohlížeč Bing | zdroj: archiv autora

Aplikace vás rovnou přesměruje do vyhledávače Bing a vyhledá obchody, kde je možné daný kabel zakoupit.

Object detection

V naší aplikaci využíváme Custom Vision, což je kognitivní AI služba, která využívá strojového učení k tomu, aby rozpoznala a přiřadila popisky k objektům na obrázku. Custom Vision má dvě funkce – classificationobject detection.

Klasifikace funguje tak, že na obrázek aplikuje jeden nebo více štítků. Object detection funguje podobně, ale jako výstup vám na obrázku vrátí navíc souřadnice, kde lze nalézt aplikovaný štítek (štítky).

snímek obrazovky, object detection v custom vision
object detection | zdroj: archiv autora

Jak můžete vidět na obrázku, object detection vytvoří kolem objektů, které rozpozná, rámeček. Přiřadí jim jednotlivé štítky, jejichž název se vám zobrazí, když na objekt najedete kurzorem.

To je, co se týká využití Custom Vision a naší aplikace, vše. Určitě si neváhejte přečíst i druhou část, kde se podíváme na kód za aplikací.

Nastavení souborů Cookies

1. Co jsou soubory cookies

Soubory cookies jsou krátké textové soubory, které internetová stránka odešle do vašeho prohlížeče. Umožňují internetové stránce zaznamenat informace o vaší návštěvě, například zvolený jazyk a podobně. Následující návštěva stránek tak pro vás může být snazší a příjemnější. Soubory cookies jsou důležité, neboť bez nich by procházení sítě Internet bylo mnohem složitější. Soubory cookies umožňují lepší využití naší internetové stránky a přizpůsobení jejího obsahu vašim potřebám. Soubory cookies používá téměř každá internetová stránka na světě.

2. Druhy souborů cookies

Relační (tedy dočasné) soubory cookies nám umožňují propojovat vaše jednotlivé aktivity po dobu prohlížení těchto internetových stránek. V okamžiku otevření okna vašeho prohlížeče se tyto soubory vytvoří a po zavření okna vašeho prohlížeče se odstraní.

Trvalé soubory cookies nám pomáhají váš počítač identifikovat, jestliže opětovně navštívíte naši internetovou stránku.

3. Využívání souborů cookies

V souladu s ustanovením § 89 odst. 3 zák. č. 127/2005 Sb., o elektronických komunikacích, v účinném znění, si vás tímto dovolujeme informovat, že naše internetové stránky využívají pro svoji činnost soubory cookies, tedy vaše soubory cookies, včetně trvalých, zpracováváme.

Internetové prohlížeče obvykle obsahují správu souborů cookies. V rámci nastavení vašeho prohlížeče tak pravděpodobně můžete jednotlivé soubory cookies ručně mazat, blokovat či zcela zakázat jejich používání. Pro více informací použijte nápovědu vašeho internetového prohlížeče. Jsou-li cookies povoleny, lze toto nastavení internetového prohlížeče považovat za souhlas se zpracováním osobních údajů.

4. Účel použití souborů cookies

K personalizaci obsahu a reklam, poskytování funkcí sociálních médií a analýze naší návštěvnosti využíváme soubory cookies. Informace o tom, jak náš web používáte, sdílíme se svými partnery působícími v oblasti sociálních médií, inzerce a analýz. Používáním internetových stránek vyjadřujete souhlas propojením následujících služeb: Google Analytics, Google Tag Manager, Facebook Pixel, Microsoft Clarity.

Soubory cookies využíváme, kromě účelu uvedeného v předchozím odstavci, pouze pro měření návštěvnosti webové stránky.

5. Správce osobních údajů

Provozovatelem webové stránky studuj.digital a správcem osobních údajů je společnost: pg-sec s.r.o., sídlem Rybná 716/24, Staré Město, 110 00 Praha 1, identifikační číslo 09580905, zapsaná v obchodním rejstříku Městského soudu v Praze, oddíl C, vložka 338028.

​6. Zásady ochrany osobních údajů

Podrobnější informace o souborech cookies a zpracování tvých osobních údajů najdete v našich Zásadách ochrany osobních údajů.

Nezbytné

Tyto soubory cookie jsou nutné pro základní funkce stránky, a jsou proto vždy povolené. Mezi ně patří soubory cookie, které stránce umožňují si vás zapamatovat při procházení stránky v rámci jedné relace nebo, pokud o ně požádáte, mezi relacemi.

Volitelné

Výkon

Tyto soubory cookie nám pomáhají vylepšovat funkce stránek sledováním využití této webové stránky. V některých případech zrychlují zpracování vašeho požadavku a umožňují nám zapamatovat si vaše vybrané předvolby na stránce. Pokud soubory cookie zakážete, může se tím zhoršit přesnost našich doporučení a zpomalit funkčnost stránek.

Sociální média a relamy

Díky souborům cookies sociálních médií si můžete připojit ke svým sociálním sítím a prostřednictvím sociálních médií sdílet obsah z naší webové stránky. Reklamní soubory cookie (třetích stran) shromažďují informace pro lepší přizpůsobení reklamy tvým zájmům, a to na webových stránkách studuj.digital i mimo ně. V některých případech tyto soubory cookies zpracovávají vaše osobní údaje. Pokud chcete získat více informací o zpracování osobních údajů, přečtěte si naše Zásady ochrany osobních údajů. Pokud zakážete soubory cookies, mohou se zobrazovat reklamy, které méně souvisejí s vašimi zájmy, nebo nebudete moci účinně používat odkazy na Facebook, Instagram či jiné sociální sítě anebo nebudete moci sdílet obsah na sociálnch médiích.