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í.