# Prompt: NévElem Annotáló – Demo eszköz Készíts egyetlen, önálló HTML5 fájlt — build tool, szerver, npm nélkül —, amely egy minimális, magyar nyelvű **névelem-annotáló eszköz** együttes-előfordulási hálózat-vizualizációval. Offline kell futnia bármely modern böngészőben. Célközönség: élő demo egyetemi hallgatóknak, amely megmutatja, hogyan lehet AI-prompttal kutatási eszközöket építeni. --- ## ELRENDEZÉS (három panel) - **Bal oldalsáv (220px, fix):** dokumentumlista - Felül: "Dokumentumok" felirat + "+" gomb (új dokumentum betöltése) - Alatta: a betöltött dokumentumok listája — minden tételen a fájlnév, az annotációk száma (kis pill), és törlés gomb (×) - Az aktív dokumentum kiemelve (sötétkék háttér, fehér szöveg) - **Középső panel (kb. 38%):** szövegszerkesztő / dokumentum-megjelenítő színes annotáció-kiemelésekkel - **Jobb panel (kb. 60%):** fülek — `[Annotálás]` `[Hálózat]` `[Statisztika]` - **Felső sáv:** alkalmazás címe "NévElem Annotáló – Demo", `Betöltés` gomb, `Mentés` gomb (JSON), `ℹ️ Hogyan készült?` info-gomb - **Tiszta, minimalista dizájn:** fehér háttér, sötétkék (#1F3864) fejléc, fakó szürke (#fafbfc) panelek, minimum vizuális zaj --- ## KÜLSŐ FÜGGŐSÉGEK (csak CDN) - D3.js v7 — `https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.5/d3.min.js` - mammoth.js — `https://cdnjs.cloudflare.com/ajax/libs/mammoth/1.6.0/mammoth.browser.min.js` (.docx olvasáshoz) - SheetJS (XLSX) — `https://cdn.sheetjs.com/xlsx-0.20.1/package/dist/xlsx.full.min.js` (.xlsx/.xls olvasáshoz) Más külső library-t nem használunk. --- ## TÖBB DOKUMENTUM KEZELÉSE - Egyszerre több dokumentum lehet betöltve, az oldalsávban válthatók - Minden dokumentum saját nevet, szöveget és annotáció-listát hordoz (külön `nextAnnId` számlálóval) - A fájl-picker `multiple` módban — egyszerre több fájl is kijelölhető és betölthető - Dokumentum törlése megerősítéssel (confirm dialógus) - Dokumentumváltáskor a szerkesztő, az annotáció-lista és (ha aktív) a Hálózat/Statisztika fül is frissül --- ## DOKUMENTUM-BEMENET (több formátum) A betöltés a következő fájltípusokat fogadja el (mind a `+` gombbal, mind a felső `Betöltés` gombbal): | Kiterjesztés | Hogyan dolgozzuk fel | |---|---| | `.txt` | Natív szövegfájl, közvetlenül beolvasva | | `.docx` | `mammoth.extractRawText()` — nyers szöveg, formázás nélkül | | `.xlsx`, `.xls` | SheetJS-szel olvasva: minden nem-üres cella szóközzel összefűzve egy sorba; sorok újsorral elválasztva. Több munkalap esetén `=== Munkalap neve ===` szekciócímke a munkalapok közé | | `.csv` | Beépített parser: támogatja az idézőjelezett mezőket, a kettős idézőjelekkel escape-elt idézőjeleket, valamint a mezőkön belüli vesszőket és újsorokat. Cellák szóközzel összefűzve, sorok újsorral | | `.json` | Mentési munkamenet visszatöltése (lásd MENTÉS / BETÖLTÉS) | Hibakezelés: nem támogatott kiterjesztésnél vagy hibás fájlnál egy `alert()` jelzi, hogy mi a hiba okozója. A többi fájl feldolgozása ettől függetlenül folytatódik. Kezdő állapot: legyen 1 alapértelmezett "Minta szöveg" dokumentum 2-3 valódi magyar történelmi mondattal, hogy a demo azonnal működjön betöltés nélkül. Például: > "Kádár János 1956. november 4-én érkezett Budapestre, ahol a Magyar Szocialista Munkáspárt első titkáraként vette át a hatalmat. A Nemzeti Színház épületének kérdését az Építési és Városfejlesztési Minisztérium 1963-ban terjesztette a Politikai Bizottság elé. Bibó István 1957-ben Nagy Imre miniszterelnök kormányának államminisztere volt, mielőtt a szovjet csapatok bevonultak Budapestre." A szerkesztőbe közvetlenül is be lehet illeszteni szöveget. Ha már vannak annotációk, beillesztéskor megerősítés kérendő (mert a karakter-offsetek elcsúsznának). --- ## ANNOTÁCIÓS MOTOR 4 entitás-típus: | Típus | Szín | Hex | |---|---|---| | személy | kék | #2196F3 | | hely | türkiz | #009688 | | szervezet | zöld | #4CAF50 | | dátum | lila | #9C27B0 | **Interakció:** 1. A felhasználó kijelöl egy szövegrészletet a szerkesztőben → azonnal megjelenik egy lebegő popup 4 színes gombbal (egy típusonként), a kijelölés alatt 2. Egy gombra kattintva a kijelölés egy színes ``-be kerül 3. Minden annotáció tárolja: `{id, text, type, start, end}` (a start/end karakter-offsetek a teljes szövegben) 4. Egy létező annotációra kattintva kis tooltip jelenik meg ✕ törlés gombbal 5. `↶ Visszavonás` gomb (az utolsó annotációt eltávolítja) **Átfedés-kezelés:** ha a kijelölés egy létező annotációval átfed, a popup nem jelenik meg (tiszta nem-átfedő annotációkat tartunk). **Karakter-offset követés:** A popup pozíciójához a kijelölés `getBoundingClientRect()`-jét használjuk. A start/end offsetek számításához a contenteditable DOM-ban TreeWalker-rel végigmegyünk a szöveges csomópontokon. **Annotáció-lista:** a szerkesztő alatt egy kompakt, görgethető táblázat (max ~200px magas) — oszlopok: szöveg, típus (színes badge), pozíció. --- ## HÁLÓZAT FÜL (D3 force-directed graph) - **Csomópont:** egyedi entitás-szöveg (kanonikus = a pontosan annotált szöveg) - **Csomópont színe:** entitás-típus szerint - **Csomópont mérete:** előfordulási gyakoriság szerint (`r = 6 + count * 3`) - **Él:** ha két entitás ugyanazon mondaton belül fordul elő — egyszerű heurisztika: ~200 karakteren belül **és** nincs köztük mondatzáró írásjel (`. ! ?` szóközzel) - **Él vastagsága:** együtt-előfordulások száma (`min(1 + weight, 6)`) - **Interakció:** csomópontok húzhatók, hover megjeleníti az entitás nevét + típusát + előfordulási számát - **`🔄 Frissítés` gomb:** újraépíti a gráfot az aktuális annotációkból - Ha kevesebb mint 2 entitás van: barátságos üzenet — "Adj hozzá több névelemet a hálózat megjelenítéséhez!" **`Aktuális` / `Összes` kapcsoló:** a fülön egy kis toggle, ami eldönti, csak az aktív dokumentum annotációit használja-e, vagy az összesét. Több dokumentum esetén az **Összes** módban is a co-occurrence-számítás dokumentumonként fut (tehát egy Doc1-beli és egy Doc3-beli entitás között nem keletkezik él), de a csomópontok és élsúlyok globálisan aggregálódnak. --- ## STATISZTIKA FÜL (csak D3) Két egyszerű ábra: 1. **Doughnut/pie chart** — entitás-típusok megoszlása (mennyi van mindegyikből), színes legenddel 2. **Oszlopdiagram** — top 10 leggyakoribb entitásnév (x = név -40°-ban forgatva, y = darabszám), oszlopok színezése a típus szerint Mindkét ábra élőben frissül: új annotációknál és fülváltáskor. **`Aktuális` / `Összes` kapcsoló:** ugyanaz, mint a Hálózat fülön — itt egyszerű aggregálás (átszámolja az összes dokumentum annotációit egyben). --- ## MENTÉS / BETÖLTÉS **Mentés (`.json`):** ```json { "version": 2, "docs": [ { "id": 1, "name": "fájlnév vagy minta neve", "text": "...", "annotations": [ {"id": 1, "text": "...", "type": "szemely", "start": 0, "end": 10} ] } ] } ``` **Betöltés:** A `.json` fájl betöltésekor visszafelé kompatibilis kell legyen — ha régi formátumú (`{text, annotations}`), egyetlen dokumentummá konvertálandó. JSON betöltése felülírja a jelenlegi munkamenetet (megerősítés szükséges, ha már van bármilyen dokumentum). --- ## DEMÓ-BARÁT RÉSZLETEK - Az annotáció-popup azonnal megjelenik (nincs animáció-késleltetés), és külső kattintásra eltűnik - A hálózati gráf animáltan jelenik meg az első renderelésnél (force-szimuláció láthatóan beáll) - Minden UI-szöveg magyar nyelven - Egy kis `ℹ️ Hogyan készült?` gomb a fejlécben, amely modálban mutatja: > "Ez az eszköz egyetlen AI-prompttal készült, körülbelül 2 perc alatt. > A prompt meghatározta az elvárt funkciókat, a megjelenést és az adatstruktúrát — > a kódot a Claude AI generálta." - Fájl-feldolgozás közben (különösen `.xlsx` és `.docx` esetén) jelenjen meg egy kis "Fájl feldolgozása…" overlay loader --- ## DELIVERABLE Egyetlen `.html` fájl, kb. 850 sor. Minden inline (külön CSS/JS fájl nincs). **Tesztelendő:** - Több fájl egyszerre betöltése (`.txt`, `.docx`, `.xlsx`, `.csv`) - Dokumentumok közti váltás az oldalsávban + dokumentum törlése - Szöveg-kijelölés + annotáció-popup működik - Hálózat-gráf renderelődik és interaktív (drag, hover) - `Aktuális` / `Összes` kapcsoló működik mindkét fülön - Statisztika fül charteket mutat - JSON mentés/betöltés round-trip működik (új munkamenet visszatöltése után minden annotáció és karakter-offset megmarad)