Inspiration
Visual decision guides appear in emergency posters, troubleshooting cards, workplaces, classrooms, and care instructions. Yet a photograph of a flowchart can still exclude someone who uses a screen reader, struggles with visual clutter, or needs to act quickly under pressure. I built RouteInk to recover not only the words in an image, but the relationships that make those words actionable.
What it does
RouteInk transforms photographed flowcharts, safety cards, and process diagrams into accessible, interactive decision guides. A user uploads an image or selects a demonstration card. RouteInk evaluates capture quality, reads the text, classifies actions and decisions, infers branches, and reconstructs the diagram as a navigable graph.
Users can follow one instruction at a time, choose branches such as Yes or No, hear the current step aloud, inspect the reconstructed graph, copy an accessible outline, or export structured JSON. Every extracted node retains a confidence score, and the AI audit exposes uncertain results instead of silently inventing safety-critical instructions.
How I built it
The application uses a five-stage local vision pipeline:
- Image-quality analysis measures brightness, contrast, edge clarity, and ink coverage.
- Tesseract.js performs OCR and returns text with spatial coordinates.
- A semantic classifier separates instructions, decisions, branch labels, starts, and endpoints.
- A custom spatial graph algorithm combines vertical flow, lateral distance, and nearby labels to infer connections.
- An accessibility compiler converts the graph into keyboard-operable steps, spoken guidance, text, and JSON.
The interface is built with JavaScript, HTML Canvas, semantic HTML, CSS, the Web Speech API, and a small Node.js server. Images remain inside the browser; RouteInk requires no account, paid API, or server-side image upload.
Challenges I faced
The hardest problem was distinguishing real text from lines and arrowheads. Early versions occasionally interpreted connector marks as words. I added confidence filtering, spatial word grouping, capture-quality warnings, and repeatable generated test diagrams. Another challenge was turning uncertain OCR geometry into a useful graph without hiding ambiguity from the user.
Accomplishments and learning
RouteInk reconstructs the included leak-response diagram into seven real nodes with 96% average reading confidence. Automated tests cover text normalization, line grouping, decision classification, graph construction, accessible outlines, and image-quality warnings. I learned how OCR geometry, lightweight computer vision, graph inference, accessibility, and human review can work together as one product rather than separate features.
What's next
Next I would add manual node correction, connector editing, additional languages, perspective correction for angled photographs, and an offline service worker.
AI tool disclosure
I used OpenAI Codex for ideation, implementation assistance, debugging, and test feedback. Open-source dependencies and the complete implementation are documented in the public repository.
Log in or sign up for Devpost to join the conversation.