Niet pochýb o tom, že umelá inteligencia sa čoraz častejšie stáva bežnou súčasťou nášho života. Či už je to pri označení ľudí na fotke, rozpoznaní vášho hlasu v banke alebo detekcií písaného slova, AI (artificial intelligence – umelá inteligencia) sa využíva na tie najrozličnejšie účely. Jednou zo stránok, ktoré nás oboznamujú s množstvom oblastí, kam táto technológia preniká, je i Microsoft AI Lab. Táto stránka nielen ukazuje rôzne priekopové projekty využívajúce umelú inteligenciu, no sprostredkúva aj materiály pre ich pochopenie. V tomto blogu som si z tejto stránky vzal na zreteľ jeden veľmi zaujímavý projekt – Sketch 2 Code.

Čo je Sketch 2 Code?

Sketch to code je webová aplikácia, ktorá dizajnérom webstránok uľahčuje ich prácu. Každý dizajn totiž začína náčrtom, ako by stránka mala vyzerať. Ďalším krokom je tento dizajn previesť do funkčného HTML kódu, čo je pomerne zdĺhavý proces.

Práve preto tím vývojárov Sketch 2 Code vytvorili webstránku, kde stačí nahrať obrázok vášho náčrtu a môžete si vyložiť nohy – múdre algoritmy a umelá inteligencia v cloude sa o všetko ostatné postarajú za vás. Stránka vám poskytne HTML kód na stiahnutie, ktorý priamo zodpovedá vášmu náčrtu. Taktiež vám zobrazí náhľad, ako tento kód bude reálne vyzerať, takže si ju viete porovnať s vašim náčrtom a prípadne ho vycibriť a znova nahrať.

Používanie Sketch 2 Code

Na stránku sa dostanete cez tento link: https://sketch2code.azurewebsites.net/. Používanie stránky je veľmi intuitívne. Môžete buď použiť vlastný náčrt stránky, alebo ak máte naponáhlo a chcete si stránku len vyskúšať, môžete použiť jeden zo vzorových náčrtov.

Ak si zvolíte odfotenie náčrtu, obrázok viete dodatočne orezať.

Keď ste obrázok ľubovoľným spôsobom nahrali, bleskovou rýchlosťou sa spracuje a zobrazí sa vám stránka s výsledkami, na ktorej sa nachádzajú nasledovné tlačidlá :

Ľavým tlačidlom sa sťahuje HTML kód vašej stránky. Dolným tlačidlom viete nahrať nový návrh a pravé tlačidlo vám zobrazí, čo si umelá inteligencia o vašom návrhu myslela (nie, nepovie vám, aký (ne)máte krásny pravopis 😊). V tomto zobrazení sú v prostrednom obrázku vyznačené všetky rozpoznané prvky vášho dizajnu, ako aj to, na koľko percent si umelá inteligencia pri jednotlivých prvkoch verila, že ich predpovedala správne.

Na čo dbať pri dizajne

Pri experimentovaní s touto stránkou som si všimol pár vecí, na ktoré je dobré brať ohľad pri kreslení vášho náčrtu.

Ako prvé je dôležité vedieť, ako jednotlivé HTML prvky vyznačiť:

• Obrázky  sa naznačujú obdĺžnikom s krížom na uhlopriečkach. Tento obrázok, ako aj css štýl stránky sú poskytované z internetu, čiže sa budú nesprávne zobrazovať bez pripojenia na internetovú sieť.
• Tlačidlá sa označujú obdĺžnikom s textom vo vnútri.
• Textové polia, do ktorých sa dá písať, sú prázdne obdĺžniky.
• Zástupný text (lorem ipsum) sa označuje viacerými linajkami. Ak ste o lorem ipsum ešte nepočuli, jedná sa o bežnú prax webových návrhárov, ktorý tento zdanlivo nezmyselný text používajú ako dočasnú náhradu, kým sa napíše skutočný text pre dané miesto.
• Konkrétny text môžete priamo napísať do dizajnu. V závislosti od jeho pozície, veľkosti a dĺžky mu umelá inteligencia pridelí jeden z rôznych textových tagov ako nadpis <h1>,  odstavec <p> alebo označenie <label>. Možno vám niekedy prebehlo hlavou, prečo všetok text jednoducho neoznačiť tým istým tagom? Odpoveď je SEO – search engine optimization. Táto optimalizácia webstránky pre vyhľadávače ako Bing či Google je nevyhnutná, aby správne pochopili obsah stránky. Napríklad sa môžu dovtípiť, že istý text je názov stránky, ak je uzavretý v tagu <h1>. Používanie správnych tagov je rovnako nevyhnutné pre čítačky stránok, ktoré používajú zrakovo znevýhodnení pre surfovanie na webe. Tento špeciálny softvér aj vďaka tagom určuje obsah a rozloženie stránky a vie ho slovne opísať – „Táto stránka má hornú lištu s menu a práve zobrazuje článok s 400 slovami, ktorý sa volá..“
• Začiarkovacie políčko (checkbox) je malý štvorec naľavo od textu. Všimol som si, že tento štvorček (dosť humorne) býva zároveň rozpoznaný ako písmenko D.

Poznávacie znamenia sú však iba začiatok!

Aplikácia je citlivá aj na vzdialenosti a otočenie jednotlivých prvkov.  Okolo každého prvku sa snaží totiž vytvoriť tzv. bounding box – vodorovný ohraničujúci obdĺžnik, v ktorom sa nachádza celý rozpoznaný prvok. Ak sú prvky príliš blízko jeden k druhému, môže si ich algoritmus nechcene spojiť dokopy alebo zle rozoznať. Ak máte teda dizajn, v ktorom je veľa prvkov, rozdeľte ho radšej do dvoch obrázkov.

Nie ste si istý, že vaše náčrty tieto kritéria splnia? Napadol mi trik, ktorý som inde na internete nikde nevidel. Nakreslite váš náčrt na počítači! Napríklad v skicári viete perfektné úsečky kresliť podržaním klávesy SHIFT popri tom, ako používate nástroj na kreslenie čiar.

Taktiež je lepšie nepísať s diakritikou, nakoľko Sketch 2 Code nie je globálny produkt, a tak podporuje len anglické znaky. No o to viac dôvodov si precvičiť angličtinu!

Pod kapotou

Zdá sa to takmer ako mágia, že tejto stránke jednoducho poskytneme obrázok a ona nám z neho za pár okamihov vytvorí niečo zmysluplné. Pozrime sa stručne, aké tajomné technológie za touto mágiou ležia.

Sketch 2 Code pre svoje živobytie využíva rôzne technológie cloudovej platformy Azure od spoločnosti Microsoft. Táto platforma ponúka vývojárom rôzne služby na spravovanie, vývoj alebo hosťovanie všemožných aplikácií. Z týchto služieb Sketch 2 Code využíva napríklad Cognitive Services, či Blob Storage, ako je zrejmé z obrázku zo stránky Sketch2Code na AI Lab:

• Cognitie services

  (kognitívne služby) je sada služieb využívajúcich umelú inteligenciu na ich funkciu. Spomedzi nich využíva Sketch 2 Code presne povedané službu Custom Vision – vlastné videnie. Vývojári túto službu učia rozpoznávať konkrétne objekty v obrázkoch, v našom prípade HTML tagy. Taktiež sa tu využíva OCR (optical character recognition – optické rozpoznávanie znakov) na prevedenie ručne písaného textu do počítačovej podoby.

• Blob storage

  („blobové“ úložisko) je cloudové úložisko dát v Azure. Slovo blob v angličtine znamená niečo ako zhluk veľkej masy a práve odtiaľ tento názov pôvodne vznikol. No počítačoví vedci obľubujú skratky, a tak si zmysleli, že BLOB bude skratka pre Binary Large OBject – veľký binárny objekt.

Veľkou výhodou Azure je, že tieto služby môžu bežať v cloude v celej svojej podobe: Po nahratí našej skice na stránku sa tento obrázok odošle do cloudu, teda do jedného z viac ako 140 dátových centier spoločnosti Microsoft po celom svete:

V týchto obrovských halách plných počítačov sa tento obrázok spracuje, čiže sa spomínané služby pustia bleskovou rýchlosťou do práce. Výsledný HTML kód a iné pre nás podstatné informácie sa cez internet pošlú naspäť stránke, ktorá nám ich následne zobrazí.

Vďaka cloudu tu limitujúcim faktorom nie je ani pamäť, ani výpočtový výkon (v Azure sa dajú nastaviť pomocou pár klikov), no jedine rýchlosť nášho internetového pripojenia. Vývojári v Azure si navyše dali záležať na tom, aby boli ich služby čo najjednoduchšie na použitie. Preto tvorcovia Sketch 2 Code nemuseli napríklad vedieť ako presne funguje zložitá matematika, ktorá tvorí Custom Vision. Stačilo im vedieť, ako túto umelú inteligenciu naučiť rozpoznávať HTML tagy v obrázkoch (na to jej museli poskytnúť spustu trénovacích náčrtov a popisy k nim, kde v týchto obrázkoch sa nachádza aký tag, zjednodušene povedané).

Oslovila vás tematika Azure alebo priam čo všetko pomocou Cognitive Services dokážete vytvoriť? Tak neváhajte sa pozrieť na Microsoft Learn! Nájdete tam nielen vysvetlenia do hĺbky, čo všetko Azure alebo Cognitive Services ponúkajú, ale aj náučné materiály, v ktorých sa danú tému krok po kroku učíte na konkrétnych príkladoch! A kto vie, možno jedného dňa potom aj vy samy vytvoríte aplikáciu, ktorá zmení tento svet 🙂