Jak jsem oživil Deník Toma Raddlea

Představte si, že napíšete otázku na prázdný, starodávný pergamen. Chvíli se nic neděje. Pak se inkoust začne pomalu vsakovat do papíru, až zmizí úplně. Stránka utichne a po několika vteřinách se z hloubi pergamenu začne tah po tahu vykreslovat odpověď elegantním psacím písmem.

Žádná klávesnice. Žádné chatovací bubliny. Jen vy, papír a trochu podezřele trpělivý deník.

Přesně tak funguje moje webové MVP Deníku Toma Raddlea. Vzal jsem původní hardwarový nápad postavený pro e-ink tablet reMarkable Paper Pro a přetvořil ho do mobilní webové aplikace, která běží v běžném prohlížeči.

Kde to celé začalo

Inspirací byl open-source projekt vývojáře Maxime Rivesta: MaximeRivest/Riddle.

Původní Riddle je aplikace pro reMarkable Paper Pro napsaná hlavně v Rustu, C a C++. Čte tahy stylusu přímo z nízkoúrovňového vstupu, pracuje s displejem v režimu takeover a odpověď vykresluje zpět na e-ink plochu tak, aby působila jako ručně psaný text.

Je to krásně fyzický projekt: pero, papír, e-ink, minimální rozhraní. Položil jsem si jednoduchou otázku: co kdyby podobný zážitek fungoval bez speciálního hardwaru, jen v telefonu nebo tabletu?

Přechod z reMarkable na web

Hardwarová verze může spoléhat na stylus, linuxové eventy a přímé řízení displeje. Webová verze musí žít v úplně jiném světě: dotykové obrazovky, mobilní Safari, Android Chrome, různé poměry stran, vysoké rozlišení displejů a gesta prohlížeče, která se ráda pletou do kreslení.

Proto jsem webovou adaptaci postavil znovu na jednoduchém stacku Node.js, Express, HTML5, CSS a vanilla JavaScript. Cílem nebylo udělat běžný chat převlečený za deník, ale zachovat to hlavní: člověk píše přímo na stránku a stránka mu odpovídá.

Canvas místo pera, Gemini místo očí

Fyzické pero jsem nahradil HTML5 Canvasem s podporou Pointer Events. Díky tomu se dá psát myší, prstem i stylusem podle zařízení.

Když uživatel přestane psát zhruba na 2,8 sekundy, aplikace vyhodnotí stránku jako dokončenou:

• canvas se vyexportuje jako PNG,
• server obrázek pošle do Gemini Vision API,
• model přečte rukopis,
• a rovnou vygeneruje odpověď v roli tajemného Toma Raddlea.

Výhoda tohoto přístupu je, že se uživatel nemusí trefovat do textového pole. Píše tak, jak by psal do sešitu. OCR a jazykový model jsou schované za scénou.

Inkoust, který se vsákne do papíru

Nejdůležitější část zážitku není technicky nejsložitější, ale emočně rozhoduje o všem: inkoust nesmí jen zmizet. Musí se vsáknout.

Po dopsání kresba plynule vybledne přes CSS přechody, průhlednost a lehké rozostření. Rukopis se nerozpadne naráz, ale pomalu se ztratí v textuře papíru. Tím vznikne malá pauza, ve které má stránka čas působit živě.

Tomova odpověď se potom vrací pomocí písma Dancing Script a jednoduché animační smyčky. Text se nevykreslí najednou, ale přibývá písmeno po písmenu s drobnými náhodnými prodlevami. Výsledek připomíná brk, který se rozhodl, že má vlastní názor.

Mobilní režim: jedna stránka místo dvou

Na desktopu může deník působit jako otevřená kniha. Na mobilu by ale dvoustránkový layout rychle ztratil čitelnost. Proto se aplikace na telefonech přepíná do jednostránkového režimu.

Odpověď se zobrazuje přímo nad kreslicí plochou jako průhledná vrstva. Uživatel tak zůstává v jednom prostoru: píše na stránku, inkoust mizí a odpověď se objevuje tamtéž.

Problém přesnosti: scale drift

Na displejích s vysokým rozlišením se objevila nepříjemná chyba. Čím dál byl prst od levého horního rohu, tím víc se inkoust rozcházel se skutečným dotykem. Na první pohled drobnost. Při psaní naprosto fatální.

Příčina byla v rozdílu mezi fyzickými pixely canvasu a jeho vizuální velikostí v CSS. Opravil jsem to explicitním přepočtem souřadnic:

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 této úpravě inkoust sedí přesně na hrotu pera i na Retina displejích.

Video ukázka

Krátkou ukázku najdete i na sociálních sítích:

• Facebook Reel
• Instagram Reel

Pro blog je ideální vložit lokální video jako tichou nebo ozvučenou ukázku podle licenční čistoty hudby:

Kam dál

Tohle MVP je malé, ale otevírá hezkou otázku: co když LLM nemusí pořád sedět v chatovacím okně?

V AI Studiu by podobný deník mohl sloužit spisovatelům. Autor by si nedopisoval s anonymním asistentem, ale s konkrétní postavou, kterou právě tvoří. Postava by odpovídala vlastním stylem, hlasem, tempem a vizuální podobou. Brainstorming by se tím posunul z obyčejného promptování do dialogu, který působí skoro literárně.

V Hyperprostoru může být tento pergamen zajímavým UI widgetem. Místo formuláře by uživatel mohl kreslit myšlenkovou mapu, psát rukou, zadávat příkazy nebo si povídat s digitální bytostí v prostředí, které odpovídá její roli.

A další vrstva je hlas. Šepot přes speech-to-text by mohl nechat slova sama objevovat na pergamenu. Text-to-speech by zase umožnil, aby Tom Raddle na konci odpovědi skutečně promluvil ze stránky.

Deník Toma Raddlea na webu ukazuje, že umělá inteligence nemusí být zavřená jen v chladných bublinách moderních chatů. Když se propojí rukopis, obrazové porozumění, animace a dobře zvolená role modelu, vznikne zážitek, který není jen užitečný. Je trochu magický.