Can a 25 MB Browser Model Design a Quote Card?

This is a submission for the MLH x DEV Writing Challenge

What I Built
Slothpress turns a few words into a typeset quote card you can post anywhere. Type a quote, pick a style, and download a high-resolution 2160 × 2700 PNG.

Everything happens completely client-side in your browser tab: no account, no uploads, no servers, and no API keys.
What makes Slothpress unique is how it integrates an open-weight model without violating privacy or centralizing control.

When you click "Suggest a style", a lightweight, quantized 25 MB MobileBERT checkpoint (Xenova/mobilebert-uncased-mnli) runs directly in your browser tab via transformers.js and ONNX Runtime. It reads your quote, ranks eight typography presets against it, and applies the vibe that fits best.

Crucially, the model is kept entirely away from the renderer. The core rendering engine is completely deterministic:
card = render(content, author, style)

Backed by 79 unit tests running in under a second, the AI only suggests; it never alters your words or draws pixels. Human intent and reliable design control always stay front and center.

Demo

• Live App: https://emanuelmsjv.github.io/slothpress/

• GitHub Repository: Emanuelmsjv/slothpress

• DEV.to Article & Writeup: I let a 25 MB model choose the typeface for my quote cards. It got it wrong.
  (Embed your screen recording, walkthrough GIF, or deployment screenshot here showing you typing a quote, clicking "Suggest a style", and rendering the final image card!)
  Partner Technologies
  Building Slothpress required tackling several fascinating engineering challenges regarding client-side AI performance:

• Hugging Face (@huggingface/transformers & ONNX Runtime Web): Instead of calling a metered, closed-source API, I implemented a zero-shot classification pipeline entirely in the browser using quantized ONNX weights.

• Self-Hosted Runtime Asset Delivery: To protect user privacy and avoid relying on external third-party CDNs (like jsDelivr) in the runtime path, Vite bundles the WebAssembly and worker files (ort-wasm-simd-threaded.asyncify.wasm) directly into dist/assets/ to be served from the app's own origin and cached by the service worker.

• Progressive Loading & Cost Management: The app shell remains lightweight at 78 KB gzipped. The AI chunk (~6.7 MB ONNX runtime + 25.7 MB MobileBERT weights) is loaded dynamically via import() only when the user explicitly requests a suggestion.

After the initial 13.6-second download, the model lives in the browser cache and functions seamlessly offline.
Hackathon Experience
Building and documenting Slothpress was a deep dive into the realities of open-source AI and client-side web engineering.

One of the most memorable moments was discovering that when asked about "The sea was vast and deep that night," the model ranked Ink (stark, technical) first and Tide (deep, vast, contemplative like the sea) third due to its training priors over natural language inference labels.

Instead of hiding the imperfection behind a black box or a heavy server, I shipped it anyway—leaving the scores visible on screen and documenting the trade-off in the README. It proved a vital lesson: a model you cannot inspect is not open innovation. Because everything from ONNX Runtime to the app code is transparent and client-side, users can see why a choice was made, disagree with it in one click, and run the entire experience completely offline.