Ako som oživil Denník Toma Raddlea
Pôvodný hardvérový experiment pre reMarkable Paper Pro som preniesol do webového MVP pre telefóny a tablety: atrament sa vpíja do pergamenu, AI číta rukopis a odpoveď sa znovu píše priamo na stránku.
Predstavte si, že napíšete otázku na prázdny, starodávny pergamen. Chvíľu sa nič nedeje. Potom sa atrament začne pomaly vpíjať do papiera, až úplne zmizne. Stránka stíchne a o pár sekúnd sa z hĺbky pergamenu začne ťah po ťahu kresliť odpoveď elegantným písaným písmom.
Žiadna klávesnica. Žiadne chatovacie bubliny. Len vy, papier a denník, ktorý je až podozrivo trpezlivý.
Presne tak funguje moje webové MVP Denníka Toma Raddlea. Pôvodný hardvérový nápad pre e-ink tablet reMarkable Paper Pro som pretvoril na mobilnú webovú aplikáciu, ktorá beží v bežnom prehliadači.
Kde sa to začalo
Inšpiráciou bol open-source projekt vývojára Maxime Rivesta: MaximeRivest/Riddle.
Pôvodný Riddle je aplikácia pre reMarkable Paper Pro napísaná najmä v Ruste, C a C++. Číta ťahy stylusu priamo z nízkoúrovňového vstupu, pracuje s displejom v režime takeover a odpoveď vykresľuje späť na e-ink plochu tak, aby pôsobila ako ručne písaný text.
Je to krásne fyzický projekt: pero, papier, e-ink a minimum rozhrania. Položil som si jednoduchú otázku: čo keby podobný zážitok fungoval bez špeciálneho hardvéru, iba v telefóne alebo tablete?
Prechod z reMarkable na web
Hardvérová verzia sa môže oprieť o stylus, linuxové eventy a priame riadenie displeja. Webová verzia žije v inom svete: dotykové obrazovky, mobilné Safari, Android Chrome, rôzne pomery strán, displeje s vysokým rozlíšením a gestá prehliadača, ktoré sa rady miešajú do kreslenia.
Preto som webovú adaptáciu postavil nanovo na jednoduchom stacku Node.js, Express, HTML5, CSS a vanilla JavaScript. Cieľom nebol bežný chat prezlečený za denník. Chcel som zachovať hlavný pocit: človek píše priamo na stránku a stránka mu odpovedá.
Canvas namiesto pera, Gemini namiesto očí
Fyzické pero som nahradil HTML5 Canvasom s podporou Pointer Events. Vďaka tomu sa dá písať myšou, prstom aj stylusom podľa zariadenia.
Keď používateľ prestane písať približne na 2,8 sekundy, aplikácia stránku vyhodnotí ako dokončenú:
- canvas sa vyexportuje ako PNG,
- server obrázok pošle do Gemini Vision,
- model prečíta rukopis,
- a hneď vytvorí odpoveď v role tajomného Toma Raddlea.
Výhoda je, že používateľ sa nemusí triafať do textového poľa. Píše tak, ako by písal do zošita. OCR a jazykový model zostávajú skryté za scénou.
Atrament, ktorý sa vpije do papiera
Najdôležitejšia časť zážitku nie je technicky najzložitejšia, ale emočne rozhoduje o všetkom: atrament nesmie iba zmiznúť. Musí sa vpiť.
Po dopísaní kresba plynulo vybledne cez CSS prechody, priehľadnosť a jemné rozostrenie. Rukopis sa nerozpadne naraz, ale pomaly sa stratí v textúre papiera. Vznikne malá pauza, počas ktorej stránka pôsobí živo.
Tomova odpoveď sa potom vracia pomocou písma Dancing Script a jednoduchej animačnej slučky. Text sa nevykreslí naraz, ale pribúda písmeno po písmene s drobnými náhodnými zdržaniami, aby nepôsobil ako tlačiareň, ale skôr ako brko.
Mobilný režim: jedna stránka namiesto dvoch
Na desktope môže denník pôsobiť ako otvorená kniha. Na mobile by však dvojstranový layout rýchlo stratil čitateľnosť. Aplikácia sa preto na telefónoch prepína do jednostránkového režimu.
Odpoveď sa zobrazuje priamo nad kresliacou plochou ako priehľadná vrstva. Používateľ zostáva v jednom priestore: píše na stránku, atrament mizne a odpoveď sa objavuje tamže.
Problém presnosti: scale drift
Na displejoch s vysokým rozlíšením sa objavila nepríjemná chyba. Čím ďalej bol prst od ľavého horného rohu, tým viac sa atrament rozchádzal so skutočným dotykom. Pri písaní je to zásadný problém.
Príčinou bol rozdiel medzi fyzickými pixelmi canvasu a jeho vizuálnou veľkosťou v CSS. Opravil som to explicitným prepočtom súradníc:
const rect = canvas.getBoundingClientRect()
const scaleX = canvas.width / rect.width
const scaleY = canvas.height / rect.height
const x = (event.clientX - rect.left) * scaleX
const y = (event.clientY - rect.top) * scaleY
Po tejto úprave atrament sedí presne pod hrotom pera aj na Retina displejoch.
Video ukážka
Krátku ukážku nájdete aj na sociálnych sieťach:
Pre blog je najčistejšie vložiť lokálne video a sociálne odkazy nechať ako zálohu:
Kam ďalej
Toto MVP je malé, ale otvára užitočnú otázku: čo ak LLM nemusí stále sedieť iba v chatovacom okne?
V AI Studiu by podobný denník mohol slúžiť spisovateľom. Autor by si nepísal s anonymným asistentom, ale s konkrétnou postavou, ktorú práve tvorí. Postava by odpovedala vlastným štýlom, rytmom, hlasom a vizuálnou podobou. Brainstorming by sa posunul z obyčajného promptovania do dialógu, ktorý pôsobí skoro literárne.
V Hyperprostoru môže byť tento pergamen zaujímavým UI widgetom. Namiesto formulára by používateľ mohol kresliť myšlienkovú mapu, písať rukou, zadávať príkazy alebo komunikovať s digitálnou bytosťou v prostredí, ktoré zodpovedá jej role.
A ďalšia vrstva je hlas. Šepot cez speech-to-text by mohol nechať slová samé objavovať sa na pergamene. Text-to-speech by zase umožnil, aby Tom Raddle na konci odpovede skutočne prehovoril zo stránky.
Denník Toma Raddlea na webe ukazuje, že umelá inteligencia nemusí byť zavretá len v chladných bublinách moderných chatov. Keď sa prepojí rukopis, vizuálne porozumenie, animácia a dobre zvolená rola modelu, vznikne zážitok, ktorý nie je iba užitočný. Je trochu magický.
