← Back to Work
Personal Project

Legible

Year2026
DisciplinesDesign, Development, Deployment
Legible screenshot 1
1 / 15
Overview

A chat interface for people with dyslexia and ADHD. Where a normal AI chat hands back a wall of text and leaves you to cope with it, this one asks the model to mark up its answer first, then rebuilds that answer however the reader needs to see it. Changing a setting reshapes the answers already on screen instead of asking the model again, so the same answer can be read spaced out, in bionic, marked in red or left plain, without waiting on a new prompt. Free-tier models mark up long answers badly and tail off after a paragraph or two, so an under-marked reply gets caught and the marking filled in before it reaches the page.

Software & Infrastructure

JavaScript, React 18 (UMD, in-browser Babel compilation), Node.js (Vercel Functions), provider-agnostic OpenAI-compatible LLM layer (Google Gemini, Cerebras, OpenRouter, Mistral, Groq), server-sent event streaming relayed as newline-delimited JSON, self-healing model resolution with automatic retry against the provider's live model list, Web Speech API (speech synthesis with word-boundary tracking), localStorage (per-device settings persistence), CSS custom properties (runtime theming and typography), Google Fonts (Atkinson Hyperlegible, Lexend, Andika), Vercel (serverless deployment, CI/CD), GitHub (version control, automatic deploys on push), HTML5, CSS3, HTTPS/TLS, environment-based secret management

Outcome

Answers are requested in one of four shapes: short, short with a separate document, short with the long version inline, or long only. Each answer returns a one-line summary, a short answer, marked key terms, an action checklist and plain-word definitions of any jargon used. Sections are labelled and carry individual reading times. Under-marked replies are detected and the marking completed before rendering. Reading controls cover font, text size, line height, letter spacing, word spacing, line width, page tint, first-letter bolding, optional bionic reading, a reading ruler that dims all but one band, and a focus mode that dims previous prompts and responses. All apply to answers already on screen with nothing re-sent to the model. Four presets, Dyslexia, ADHD, Both and Plain, set all twenty-two controls at once, with a panel listing what the active preset applies and flagging any manual change. Settings persist per device. Text to speech reads any answer at a chosen voice and speed with the spoken word highlighted, either in full or the one-liner only, with optional autoplay. Per-answer actions: simplify, extract actions, copy, and save as a web page carrying the current typography, with documents also saving as Markdown. The newest answer can be regenerated at three thinking depths with attempts retained and accessible, each tagged with the depth and shape that produced it. Answers stream as they are written. The API key is held server-side. Access is gated by a server-validated code with per-IP throttling and same-origin enforcement. Retired model IDs are detected, looked up against the provider's current list and retried automatically. Deployed serverlessly on Vercel.

Next Project
Editable Portfolio
→