This is a submission for the MLH x DEV Writing Challenge What I Built Everything happens completely client-side in your browser tab: no account, no uploads, no servers, and no API keys. 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: 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. 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 & 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.
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.
Key Takeaways #
- •It reads your quote, ranks eight typography presets against it, and applies the vibe that fits best.
- •This story was reported by Dev.to , covering developments in thedev space.
- •AI advancements continue to reshape industries — read the full article on Dev.to for complete coverage.
📖 Continue reading the full article: