AniLearn

A study companion that turns a lecture topic into a visual model, a formal breakdown, recall cards and a Socratic tutor.

2026Live productSolo build

Ingest

Lesson

Modes

Context

Role: Builder: product, design, front end, API, model orchestration
Team: Solo build
Duration: 2026

Stack: React 19, Vite, JavaScript, Express, Gemini, Vercel
Status: Live product

AniLearn is a study companion for university topics. A student pastes lecture notes, a slide, a code snippet or an exam question. The app returns one structured lesson: an anime mental model, a first-principles explanation, a labelled infographic with hotspots, a recall deck and a three-question diagnostic quiz.

Beside the lesson sits a tutor with four modes. It can ask guiding questions, let the student teach it back, run an adversarial oral exam, or build a physical analogy. The same lesson supports all four.

A chat answer disappears into the scroll.

A student does not need another paragraph. They need an object they can return to: the idea, the diagram, the definition, the card, the question that exposes what they missed. A chat transcript gives all of that in sequence, then loses it.

A pretty image is not a diagram

Image models default to what looks good: a close-up face, a cinematic wallpaper, a character in a glowing room. Those images carry mood and no information. The core design problem was making the visual explain the concept, with labels, states and flows that a student can actually read.

The model is an unreliable dependency

Google's API returns 503s under demand. Any single model is a single point of failure. Text models also emit JSON with LaTeX inside string values, so a valid formula like \alpha becomes an invalid JSON escape. A response can arrive truncated. A generation pipeline that assumes well-formed output spends its life failing.

The model supplies the content. The schema supplies the shape.

Approach

A lesson is a schema, not a transcript

The model returns a fixed object: title, subject, metaphor title and story, academic concept, key takeaways, three hotspots, three visual cue cards, three quiz questions and an image prompt. The interface renders each field in a stable place. The model can vary the content; it cannot vary the shape.

The quiz is a diagnostic ladder by design: an intuition question, a mechanism trace and an adversarial edge case. The cue cards pair a physical anchor with a formula and an intuition check. These are pedagogical decisions encoded in the prompt and the schema.

The 70/30 composition rule

Every image prompt reserves 70% of the canvas for labelled schematics, tables, flowcharts and formulas. The remaining 30% holds an anime scholar inside the scene as a narrative anchor. The prompt bans close-up portraits and wallpaper art outright.

That single constraint changed the output from decorative to instructional. The character gives the diagram a world; the diagram gives the character a job.

Assume the model will disappear

Reasoning runs through six text models in order, from the newest flash model to a lighter fallback. Images run through four models, then fall back to curated artwork for the chosen style. The tutor streams tokens over SSE, so the answer starts before the full response exists.

Reasoning	Six models, tried in order. Each call carries a thinking budget: low, medium or high
Images	Four models, then a curated style sample so a lesson still has a visual
Streaming	SSE parsing with a line buffer, so partial chunks do not break the tutor
Persistence	Each generated topic is saved server-side and appears in the topic switcher

Assume the JSON will be wrong

The parser tries the raw response, then the largest object inside it, then a repaired version of each. The repair pass walks the string, tracks whether it is inside a JSON string, and escapes LaTeX commands without touching valid control characters. A truncated object gets closed before the final parse.

LaTeX in strings	`\alpha`, `\frac` and `\sum` are escaped for JSON while real newlines survive
Code fences	The largest JSON object is extracted from surrounding prose or markdown
Truncation	A missing closing brace and quote are added before the last parse attempt
Failure	The route returns the parse error instead of rendering a half-lesson

Four modes, one lesson

Socratic mode asks guiding questions. Teach Senpai flips the room: the student explains and the tutor grades clarity. Exam Boss runs an adversarial oral exam on edge cases. Analogy Lab replaces jargon with physical objects. Switching modes changes the system prompt and the quick prompts while the lesson stays in view.

Artifacts that leave the app

Cue cards flip in 3D and can be navigated from the keyboard. A deck exports as Obsidian Markdown or Anki TSV, so the revision survives outside the browser. Formulas render through KaTeX, with a repair pass for the malformed LaTeX that models sometimes produce.

AniLearn pipeline: lecture notes, schema prompt, six-model reasoning cascade, JSON repair, four-model image cascade and a structured lesson — The pipeline: one schema, two model cascades, a repair layer and a structured lesson. The study modes read the same object.

Shipped

Ingest

A modal takes lecture notes or a pasted slide, offers starter topics, and exposes the two choices that change the result: thinking depth and illustration style. Four styles are available, each with its own prompt direction.

AniLearn Deconstruct a Topic modal with notes, suggestions, thinking depth and illustration style — Ingest: paste the confusing material, choose depth and style, generate the lesson.

The lesson

A split view. On the left: the anime mental model, the academic breakdown, the invariants and the quiz. On the right: the infographic, tappable hotspots and the active recall deck. The learner can zoom the image and jump from a hotspot into the tutor with the relevant context.

AniLearn lesson view with a semiconductor infographic, hotspots and a recall card — The lesson: mental model and formal explanation on the left, an annotated infographic and recall deck on the right.

The tutor

Four modes sit above the conversation, with thinking depth beside them. The tutor streams its reply, renders markdown and formulas, and keeps the infographic visible so the conversation can point at the diagram. The screenshot shows the four modes and a live lesson in the same frame.

AniLearn SenpaiAI chat with Socratic, Teach Senpai, Exam Boss and Analogy Lab modes — The tutor: four study modes, three thinking depths and the lesson still in view.

Eight topics ship preloaded, including Dijkstra, balanced trees, OS concurrency, cache hierarchy and backpropagation. Generated topics join the same switcher.

Evidence

6 + 4model cascadesSix reasoning seats and four image seats, with a curated image fallback for each style.

3failure modes handledLaTeX escapes, surrounding prose and truncated output. The parser retries the raw and extracted object before either repair.

4study modes on one lessonSocratic, Teach Senpai, Exam Boss and Analogy Lab, with three thinking depths.

Build passes in 6.3 s. There is no automated test suite. The evidence for this project is the live product, the architecture and the failure handling in the generation path.

KaTeX rendering, SSE streaming, Obsidian Markdown and Anki TSV export.Formulas survive the trip from model output to the card the student revises from.

Reflection

The hard part was constraint. A schema makes the model's output usable. A composition rule makes the image teach. A cascade makes the lesson arrive when one model is busy. The prompt is where the pedagogy lives.

The parser is the piece I would test first. It is pure, it has clear inputs and outputs, and it protects every lesson from a malformed response. A table of real model outputs, including the broken ones, would turn it into a regression suite.

The next version would add a schema validator before rendering, cache images by topic hash, and put a latency budget on the generation path. A student should know within a few seconds whether the lesson is coming.

Make the model fill a shape worth keeping.

NextMediCare Clinic