Launch the live demo · View the source on GitHub · Open the featured visual lesson
Inspiration
Most AI tutors answer a visual mathematics problem with another wall of text. The final answer may be correct, but students still cannot see why one step follows from the previous one. We built SolveCanvas to make the explanation itself visual, inspectable, and trustworthy.
What it does
SolveCanvas turns a photograph of a mathematics problem into a grounded, step-by-step visual lesson.
A learner can upload a PNG, JPEG, or WebP question at its original visual fidelity. SolveCanvas identifies the visible mathematical facts, audits the solution, reconstructs the problem as a stable SVG scene, and progressively reveals the relevant equations, diagrams, annotations, and reasoning. Each step focuses the canvas on the evidence being explained instead of overwhelming the learner with the full solution at once.
The primary result is an interactive lesson, so students do not need to wait for a video render. The same validated lesson contract can also produce English narration, captions, and a 1600 x 900 MP4 without solving the mathematics a second time.
The published experience includes 11 curated demonstrations and 63 visual reasoning steps across calculus, functions, probability, limits, continuity, polynomials, and derivatives. One deliberately underdetermined example demonstrates that the system refuses to invent an answer when the source does not justify one.
How we built it
The responsive frontend is built with HTML, CSS, and JavaScript and deployed on Firebase Hosting. A Python/FastAPI service runs on Google Cloud Run and exposes the secure multimodal inference boundary.
Claude Opus 4.6 on Amazon Bedrock performs original-resolution scene grounding and fact-grounded mathematical reasoning. Instead of sending unrestricted model prose directly to the interface, the backend requires schema-constrained lesson data. The result is validated, independently answer-audited, and handed to a deterministic SVG presentation layer that controls layout, visual hierarchy, sanitization, progressive disclosure, and camera focus.
Generated lesson artifacts are stored in Google Cloud Storage. The optional media pipeline uses Gemini TTS for English narration and FFmpeg for deterministic video rendering. Narration beats, captions, SVG visibility states, and camera movement all reference the same validated steps, so the interactive explanation and narrated video remain consistent.
API credentials stay behind the server boundary. The browser never receives AWS, Google Cloud, or model credentials.
Challenges we ran into
The hardest challenge was translating flexible multimodal reasoning into a dependable visual grammar. A model can describe a graph correctly while still producing layout instructions that overlap, reveal information too early, or focus on the wrong evidence. We solved this by separating probabilistic reasoning from deterministic presentation.
We also had to preserve source-image quality, validate structured output, sanitize SVG content, synchronize narration with visual beats, and keep the experience responsive despite multimodal inference and media-generation costs. Making the visual lesson immediate and the MP4 optional produced a faster, more practical learning flow.
Accomplishments that we're proud of
- Built a visual mathematics studio rather than a conventional chat wrapper.
- Connected original-resolution multimodal understanding to deterministic, schema-validated SVG lessons.
- Added an independent answer audit before a lesson is published.
- Reused one grounded solution for interactive steps, English narration, captions, and MP4 rendering.
- Published 11 complete lessons with 63 reasoning steps and fully decoded demonstration videos.
- Implemented explicit ambiguity handling instead of forcing a confident-looking answer.
- Deployed a working public experience across Firebase Hosting, Cloud Run, Amazon Bedrock, and Google Cloud Storage.
What we learned
Generative AI becomes more useful for education when model reasoning is paired with deterministic presentation and verification. Model quality matters, but structured contracts, validation gates, evidence linking, safe rendering, and clear cloud boundaries are what turn a promising response into a dependable learning product.
What's next
Next we want to add learner-controlled hints, keyboard and screen-reader accessibility, mastery tracking, teacher authoring tools, and systematic evaluations of mathematical correctness and visual clarity across a broader multilingual problem set.
Log in or sign up for Devpost to join the conversation.