I Recreated Tom Riddle’s Diary, But Used My Soul Instead 👻

#webdev #ai

YCMJason's Diary 📖✨

This web app is inspired by Tom Riddle's Diary. I've literally enchanted this website with a piece of my soul 🪄🖤. So go ahead, talk to it, and learn more about me!

🔗 YCMJason's Diary 🌍✨
🔗 GitHub Repo

Here are some quick write up on some of the challenges I faced in this project.

This project had two major challenges:

Recognizing handwriting ✍️
Running an LLM for free 💸

Recognizing Handwriting ✍️

A Tom Riddle Diary wannabe that only accepts keyboard input? Absolutely unacceptable! 😤 So I set out to implement handwriting recognition on a canvas.

The Journey:

Tesseract.js 🤖
- Great for printed text ✅
- Absolute trash for handwriting ❌
Transformers.js by 🤗 Hugging Face
- Looked promising...
- Required users to download huge models (~30s load time 😭)
- Recognition results? Not even close! ❌
The Breakthrough: Handwriting.js 🔍
- BOOM! Found this hidden gem: handwriting.js 💎
- How does it work? 🤯 It reverse-engineers Google's IME by sending stroke data to Google's API: 👉 https://www.google.com/inputtools/request?ime=handwriting&app=mobilesearch&cs=1&oe=UTF-8
- Results are blazingly fast ⚡ and super accurate 🎯!

👨‍🔧 But the project was 5 years old and looked like it was built in 2003... 😬 So I ~~stole~~ borrowed the core logic and rewrote it in modern JavaScript! Might publish it on JSR later if there’s demand! 🚀 Let me know if you're interested! 💬

Running an LLM for Free 💸

For the LLM, I remembered this awesome project: mlc-webllm, which runs models directly on your device! 🔥

The Journey:

MLC-WebLLM ✅
- Model download time: 🚦 30+ seconds (Users will leave after 5 seconds, let's be real 😅)
- Inference speed:
- M1 Max MacBook: 5 seconds ⏳
- Pixel 9 Pro Fold: 30+ seconds 🚨
- Turns out, my system prompt was the culprit! 😱 Longer prompts slow down inference a lot.
Transformers.js ❌
- Even slower than MLC-WebLLM 😭
- Downloads the model in a single request without batching (or so it seems 🤔)
The Breakthrough: OpenRouter + Vercel AI SDK 🎯
- Found a GitHub list of free LLM APIs 🏆
- Settled on OpenRouter and paired it with Vercel’s AI SDK
- Final result? Super smooth UX & fast responses! 🚀