RedPen - AI Maths Marking

• 

  RedPen marking work in real time

Inspiration

A-level maths is brutally unforgiving in one specific way: it's not that students don't know the method, it's that they lose marks on one line - a dropped negative sign, a forgotten constant of integration, a chain rule they skipped - and by the time a teacher's red pen finds it, days have passed and the moment to learn from it is gone. We wanted to give students that red pen back immediately, on the actual page they wrote on, not a generic "wrong answer" message in a box.

RedPen - AI Maths Marking: Draw your maths working by hand - our AI reads it like a teacher, turns the exact wrong line red, and writes the correction in matching red-pen handwriting, instantly.

What it does

A student opens a question - say, differentiate $y = 3x^2 + 5x$ - rendered properly with KaTeX, and works it out by hand on a grid whiteboard: pen, eraser, colours, undo, exactly like paper. When they hit Mark my answer, their handwriting is sent to Gemini, which reads the working line by line like a real examiner. Instead of drawing a box around a mistake, we recolour the exact stroke the student wrote their own ink turns red - and the correction appears right there in a handwriting-style font, positioned like a teacher's actual annotation. Hovering the red line explains why, in plain English, in a side panel. Every attempt autosaves and reloads, so a full history of past questions - solved, marked, and annotated

How we built it

• Frontend: React + Vite, with react-konva driving the whiteboard canvas (grid background, freehand pen strokes, stroke-level eraser), KaTeX for question rendering, and a settings panel for light/dark mode and swapping the Gemini model (Flash-Lite vs Flash vs Pro) between speed and accuracy.
• Backend: FastAPI, receiving the canvas export as a base64 image plus question context, and calling Gemini with a strict JSON response schema — error regions as normalized bounding boxes, completion text with position and font-size hints, plus a short summary.
• The core trick: rather than overlaying Gemini's bounding boxes as decoration, we match each returned box against the student's actual stroke coordinates (in the same normalized space) and recolour the matching Line shapes directly, turning feedback into something that looks hand-marked instead of computer-generated.
• Persistence: without time to stand up a full Supabase pipeline, we built a lightweight Vite dev-server middleware that writes each whiteboard's strokes, PNG snapshot, and marking result to disk — enough to demo real save/reload behaviour end-to-end.

Challenges we ran into

Two people building the whiteboard and the marking pipeline in parallel meant real merge conflicts — including one where a teammate's commit accidentally deleted the save() method while adding the "Mark my answer" flow, silently breaking autosave on every question navigation. We also hit a nasty stale-closure bug where a successful marking result wasn't actually being persisted because React state hadn't re-rendered yet when we tried to save it; a version mismatch between katex and react-katex that made maths render as garbled internal macro code instead of typeset symbols; and a ResizeObserver feedback loop where a scrollbar toggling on and off fought with our responsive canvas scaling and made the entire page visibly shake.

Built With

• gemini
• javascript
• python
• react