Ikony s dotazy (icons.php)

Ikony s dotazy – exponát icons.php

← Kapitola 2: Možnosti avatara · Kapitola 7: Administrace

Exponát s ikonami (icons.php) je varianta kiosku bez animované postavy. Návštěvník klepne na barevnou ikonu s krátkým popiskem – aplikace pošle připravený dotaz do AI, odpověď zobrazí textem a přehraje hlasem (TTS). Inspirováno kiosky typu robot Pepper: rychlá orientace tématy místo volné konverzace.

Pro koho je vhodné

Ikony dávají smysl tam, kde návštěvník potřebuje rychlé odpovědi na opakující se témata bez nutnosti vymýšlet otázku. V administraci lze zvolit nebo vytvořit sadu podle oboru:

Jedna instalace může mít více sad (např. letní a zimní program) a na kiosku přepínat aktivní sadu nebo ji zobrazit náhledem přes ?set=slug. Šablony obsahují 9 ikon + hlasovou ikonu s tematickými obrázky (muzeum: hodiny, vstupenka, budova…; divadlo: maska, hudba…; gastro: talíř, káva…).

Rozložení obrazovky

Stránka je navržená pro dotykový kiosk na výšku – bez scrollování, celá mřížka ikon se přizpůsobí výšce displeje.

• Přepínač jazyků – vpravo nahoře (vlajky CS / EN / DE / PL / SK).
• Stavový řádek – nad odpovědí: „Přemýšlím…“, „Poslouchám…“, „Mluvím…“ nebo chybová hláška.
• Oblast odpovědi – text od AI pod stavovým řádkem; při TTS se současně přehrává hlas.
• Mřížka ikon – barevná SVG tlačítka s krátkým popiskem; počet řádků a sloupců závisí na počtu aktivních ikon v sadě.

Pokud není nastaven API klíč, zobrazí se upozornění „Exponát s ikonami není zprovozněn“ s odkazem do administrace. Mřížka ikon zůstane skrytá, dokud nebude konfigurace kompletní.

Chování pro návštěvníka

1. Po načtení stránky jsou hned vidět ikony – bez startovací obrazovky (na rozdíl od avatarů s „Klepněte pro start“).
2. Klepnutí na ikonu → krátký stav „Přemýšlím…“ → text odpovědi + hlas (pokud je TTS zapnuto v configu).
3. Vybraná ikona se mírně zvětší, ostatní se ztlumí (nižší průhlednost), dokud odpověď nedoběhne.
4. Během zpracování nelze spustit další dotaz – chrání to před překrýváním požadavků.
5. Ikona „Mám otázku“ (mikrofon) spustí rozpoznávání řeči – návštěvník položí vlastní mluvenou otázku (Web Speech API, doporučen Chrome/Edge).
6. Přepínač jazyků (vlajky) nahoře – stejný jako u ostatních avatarů; viz Jazyk exponátu.

Konverzace je jednokolová: každé klepnutí = jeden dotaz, bez historie chatu na obrazovce. Odpovědi využívají stejný system prompt a volitelnou znalostní bázi jako ostatní varianty exponátu (nastavení v admin → Exponát / Znalostní báze). Log konverzací do MySQL funguje stejně jako u avatarů – viz Log konverzací.

Idle režim: pokud je v administraci zapnutá prezentace při nečinnosti, platí i pro icons.php (stejný modul jako u avatarů). Po návratu návštěvníka se znovu zobrazí mřížka ikon.

URL parametry

Kombinace: icons.php?set=technicke-vystavi&color=copper – průmyslová sada v měděné paletě.

Jazyky a překlady

Podporované jazyky kiosku: CS, EN, DE, PL, SK – stejná infrastruktura jako u ostatních stránek exponátu.

• Popisky ikon (nádpis pod obrázkem) se po přepnutí jazyka přeloží.
• Text dotazu pro AI se přeloží do zvoleného jazyka, aby model dostal instrukci ve správné řeči.
• Odpověď AI jde podle ui_lang v chat API (system prompt s jazykovou instrukcí).
• Hlasové rozpoznávání a TTS používají jazyk z přepínače (cs-CZ, en-US, …).

Překlad probíhá ve dvou krocích:

1. Vestavěný slovník – u textů ze šablon (muzeum, Vítkovice, …) funguje okamžitě i bez AI.
2. Gemini / ChatGPT – vlastní texty z administrace, které ve slovníku nejsou, přeloží AI při načtení stránky (vyžaduje funkční API klíč a kvótu).

V administraci pište ikony a dotazy česky. Po změně textu v adminu obnovte kiosk (Ctrl+F5).

Barvy a motiv

Stránka icons.php načítá stejný barevný motiv jako avatary: renderExhibitThemeStyle() z configu (theme_preset, vlastní paleta). Pozadí, zvýraznění ikon, stavové hlášky a přepínač jazyků se přizpůsobí motivu.

• Trvalé nastavení: Barvy a motiv v admin.
• Dočasný náhled: ?color=copper, ?color=amber, …
• Pro průmyslové areály často vhodný motiv Měď (copper).

Barevné SVG soubory ikon (assets/icons/*.svg) zůstávají stejné – mění se rámeček stránky kolem nich. Vlastní ikonu lze v adminu přiřadit jiný soubor z knihovny.

Administrace – přehled

Dva vstupy do správy:

Sady ikon v admin-icons.php

Nastavení sady (nadpisy stránky)

Pro každou sadu zvlášť (ne globálně v configu):

• Nadpis stránky (page_title) – titulek záložky prohlížeče a meta stránky.
• Podnadpis (page_subtitle) – rezervováno pro budoucí rozšíření UI (v aktuálním kiosku bez scrollu se nezobrazuje).
• Nápověda pod odpovědí (hint_text) – text v atributu data-hint na stránce (kontext pro idle režim a výchozí stav).

Kontrola tabulek MySQL v admin

V sekci Ikony s dotazy (icons.php) na stránce admin je vždy vidět blok Stav tabulek v databázi. Slouží k ověření, že kiosk může načítat sady ikon z MySQL, a k vytvoření schématu bez přístupu k souborům na serveru (vzdálená správa databáze).

Sekce je připravena, když existují tabulky sad i ikon a sloupec set_id je na místě. Pak se zobrazí zelená hláška Databáze je připravena a počty sad a ikon.

Vytvoření tabulek z administrace

1. V admin → Databáze MySQL zapněte MySQL a otestujte připojení.
2. Přejděte na sekci Ikony s dotazy (#section-icon-questions).
3. Pokud něco chybí, klikněte na Vytvořit tabulky v MySQL a potvrďte dialog.
4. Tlačítko vytvoří chybějící tabulky a spustí migraci (set_id, výchozí sada u starších dat).

SQL pro vzdálený MySQL (bez přístupu k webové administraci)

Rozbalte blok SQL pro ruční vytvoření tabulek (vzdálený MySQL). Skript obsahuje kompletní CREATE TABLE pro vaše názvy tabulek z configu a na konci migrační ALTER TABLE pro sloupec set_id (ten spusťte jen u starší instalace, kde ikony existují bez sad).

• Zkopírujte SQL do phpMyAdmin, MySQL Workbench, DBeaver nebo příkazové řádky na DB serveru.
• Stejné soubory v projektu: tools/create-icon-questions.sql, tools/migrate-icon-sets.sql.
• Vlastní názvy tabulek v configu (icon_sets_table, icon_questions_table, …) se promítnou do generovaného SQL v administraci.

Po ručním spuštění SQL obnovte admin#section-icon-questions – tabulka stavu by měla ukázat existuje / OK. Pak pokračujte v admin-icons.php vytvořením sady ze šablony.

Administrace krok za krokem

1. Základ v admin

1. Přihlaste se do admin.
2. V sekci Databáze MySQL zapněte MySQL a otestujte připojení.
3. V sekci AI & API nastavte Gemini nebo ChatGPT – bez klíče kiosk neodpoví.
4. V sekci Ikony s dotazy zkontrolujte stav tabulek – všechny povinné řádky musí být existuje / OK.
5. Pokud tabulky chybí: Vytvořit tabulky v MySQL, nebo SQL ze sekce pro vzdálenou DB.
6. Po připravení DB uvidíte přehled sad a odkazy na náhled icons.php?set=….

2. Správa obsahu v admin-icons.php

1. Otevřete admin-icons.php (tlačítko „Správa sad a ikon“ v admin).
2. V dropdownu Upravovaná sada vyberte sadu, kterou chcete editovat.
3. Pro novou instalaci: rozbalte Vytvořit novou sadu ze šablony, zvolte obor (muzeum, technické výstaviště, …), volitelně zadejte vlastní název sady (např. název vašeho provozu) a potvrďte.
4. U prázdné sady použijte odkazy Naplňte šablonou – předvyplní ikony a texty podle oboru.
5. Upravte texty ikon v tabulce Ikony v sadě → Upravit.
6. V bloku Nastavení sady upravte nadpis stránky a nápovědu.
7. Vyberte Aktivní sadu na kiosku a uložte – tím se zapíše icon_set_slug do configu.
8. Otevřete náhled icons.php v novém okně a ověřte obsah.

3. Přidání, úprava a smazání ikony

Po uložení změn v administraci obnovte kiosk tvrdým reloadem (Ctrl+F5) – kiosk načítá ikony z API při každém načtení stránky.

Sady podle oboru – workflow

1. V admin zapněte MySQL a zkontrolujte stav tabulek v sekci Ikony (případně vytvořte tlačítkem nebo SQL).
2. V admin-icons.php vytvořte sadu ze šablony (např. Technické výstaviště, Zoo, Škola…).
3. Při vytváření zadejte vlastní název sady (např. „Velký svět techniky Ostrava“) – zobrazí se jen v administraci, ne na kiosku.
4. Upravte texty ikon podle vašeho provozu – u ikon změňte obrázek v galerii, pokud chcete jiné téma.
5. Nastavte Aktivní sadu na kiosku a uložte.
6. Otevřete náhled icons.php nebo icons.php?set=slug.

Stávající sady v MySQL se po aktualizaci šablon v kódu samy nezmění – ikony a texty zůstávají v databázi. Nové obrázky ze šablon dostanete vytvořením nové sady ze šablony, nebo ruční úpravou ikon v galerii. Akce Naplňte šablonou u prázdné sady přepíše obsah aktuální verzí šablony včetně ikon.

Úprava ikon a dotazů pro AI

U každé ikony v tabulce Ikony v sadě → Upravit. Rozlišujte dvě pole:

Příklad: nádpis „Hutnictví“, dotaz pro AI „Vysvětli návštěvníkovi historii výroby železa v tomto areálu.“

Další volby při úpravě ikony:

• Pořadí – řazení v mřížce (nižší číslo = dříve; spolu s kategorií).
• Kategorie – interní skupina pro řazení v administraci; na kiosku se nezobrazuje jako nadpis sekce.
• Soubor ikony – cesta k barevnému SVG v assets/icons/ nebo vlastní soubor (SVG, PNG, WebP, JPG).
• Výběr ikony – viz náhledová galerie pod polem cesty.
• Zobrazit na kiosku – vypnutá ikona se na veřejné stránce neukáže.

Tip pro psaní dotazů: pište instrukce v druhé osobě nebo imperativu pro AI, např. „Vysvětli návštěvníkovi…“, „Stručně popiš…“, „Uveď otevírací dobu a ceny vstupného podle obecných znalostí o muzeích, pokud nemáš konkrétní data.“ Konkrétní fakta o vašem provozu doplňte do system promptu nebo znalostní báze v admin.

Výběr ikony v admin-icons.php

Při Upravit nebo + Nová ikona je pod polem Soubor ikony galerie všech obrázků ze složky assets/icons/. Aplikace je načte automaticky – stačí nahrát nový soubor na server a obnovit stránku administrace.

• České popisky – pod každým obrázkem (např. „Hodiny, otevírací doba“ místo clock.svg).
• Počet souborů – zobrazen nad galerií (aktuálně 46 ikon).
• Scrollovatelný panel – galerie má pevnou výšku a posuvník; vhodné pro dotykový displej i myš.
• Kliknutím na ikonu se doplní cesta do pole icon_file (např. assets/icons/ticket.svg).
• Tooltip – při najetí myší celá cesta k souboru.

Popisky v galerii definuje funkce getIconFileLabels() v includes/icon-questions-mysql.php. U souborů bez záznamu se zobrazí název souboru. Vlastní ikony bez popisku fungují stejně – zadejte cestu ručně.

Kategorie ikon

Kategorie slouží především pro řazení a přehled v administraci. Na kiosku se ikony zobrazují v jedné mřížce bez oddělovačů.

Knihovna SVG ikon

Výchozí barevné ikony jsou v assets/icons/ (aktuálně 46 souborů). V administraci je lze vybrat kliknutím v náhledové galerii nebo zadáním cesty do pole Soubor ikony. Podporované formáty: SVG, PNG, WebP, JPG.

Dodávané soubory ve stylu měkkého 3D (vlastní SVG, licence volná pro provoz AI-MODE):

Univerzální (vhodné pro muzeum, divadlo, gastro, firmu, výstaviště i vlastní sady):

• clock.svg – hodiny, otevírací doba
• ticket.svg – vstupenka, vstupné
• parking.svg – parkování
• building.svg – budova, architektura
• camera.svg – foto, galerie
• theater-mask.svg – divadlo, maska
• music.svg – hudba, koncert
• plate.svg – jídlo, menu
• coffee.svg – káva, nápoje
• coat.svg – šatna, oblečení
• star.svg – tip, akce
• family.svg – rodina, děti
• info.svg – informace, recepce
• phone.svg – telefon, kontakt
• handshake.svg – partnerství, dohoda
• briefcase.svg – kariéra, firma
• factory.svg – továrna, průmysl
• helmet.svg – hornictví, bezpečnost
• globe.svg – svět, prohlídka
• tree.svg – příroda, park

Obecné / věda-tech:

• welcome.svg – uvítání
• question.svg – otázka / mikrofon
• map.svg – mapa, orientace
• dna.svg, cell.svg, syringe.svg – biologie, medicína
• flask.svg, leaf.svg – chemie, příroda
• robot.svg, robot-arm.svg, brain-ai.svg – robotika, AI
• printer-3d.svg, bolt.svg – 3D tisk, energie

Zoo (zoo-*.svg):

• zoo-lion.svg – zvířata
• zoo-feeding.svg – krmení
• zoo-ticket.svg – vstupné
• zoo-paw.svg – program pro děti

Nemocnice (hospital-*.svg):

• hospital-cross.svg – recepce / pohotovost
• hospital-stethoscope.svg – oddělení
• hospital-pill.svg – lékárna
• hospital-visit.svg – návštěvy pacientů

Škola (school-*.svg):

• school-book.svg – předměty
• school-clock.svg – rozvrh
• school-lab.svg – laboratoře
• school-backpack.svg – pro rodiče / žáky
• school-pencil.svg – kroužky, tvorba

Ikony jsou vlastní vektorová grafika projektu (volná licence pro provoz tohoto exponátu) – styl „měkké 3D“ s gradienty a stíny. Šablony sad používají univerzální ikony podle tématu (např. muzeum: clock, ticket, building; divadlo: theater-mask, music). Vlastní soubor nahrajte do assets/icons/ na server a v adminu zadejte cestu assets/icons/vase-ikona.svg nebo vyberte v galerii po obnovení stránky. Doporučená velikost cca 96×96 px.

Databáze a migrace

Ikony a sady jsou uložené v MySQL. Stav schématu ověřujte v admin → sekce Ikony s dotazy (tabulka stavu + tlačítko vytvoření + SQL pro kopírování).

SQL skripty v projektu (záloha pro ruční deploy):

• tools/create-icon-questions.sql – nová instalace (sady + ikony).
• tools/migrate-icon-sets.sql – doplnění tabulky sad u starších instalací.

V administraci se generuje kompletní SQL na míru včetně migračního bloku pro set_id (funkce buildIconQuestionsRemoteSetupSql). Při vytvoření tabulek tlačítkem volá aplikace runIconQuestionsTableCreation a následně ensureIconSetsSchema – existující ikony bez sady se přiřadí do výchozí sady veda-tech.

V configu: icon_set_slug (výchozí veda-tech) – slug aktivní sady pro kiosk.

API a technické detaily

Soubory exponátu: icons.php, assets/icons.js, assets/icons.css, includes/icon-questions-mysql.php, includes/icon-sets-presets.php, includes/icon-labels-i18n.php (statické překlady šablon).

Řešení problémů

Související kapitoly

• Možnosti avatara – srovnání s postavami Rive, Live2D, D-ID
• Jazyk exponátu – vlajky, STT, TTS, překlady
• Barvy a motiv – theme_preset, parametr ?color=
• Administrace – API klíče, MySQL, globální config
• Log konverzací – ukládání dotazů z ikon do MySQL
• Min. požadavky – Chrome/Edge pro hlasový vstup