Quantum Solver

• 

• 

• 

• 

Inspiration

Organic chemistry mechanisms are visual, but most learning tools are still text-heavy: you read a mechanism, you imagine the electron flow, and you hope your mental picture is correct. We wanted a “flight simulator” for aromatic reactions—where you can see electrons move step-by-step, and also get a Frontier Molecular Orbital (FMO) explanation that connects the arrows to real electronic logic (HOMO → LUMO, symmetry, dipoles).

That became Quantum Solver: a fast, structured “Schrödinger-step visualizer” for reaction pathways—designed like a futuristic control panel, but built for learning and correctness.

What it does

Quantum Solver (OrbitalFlow / QuantumSolver UI) turns a substrate + reagents into an interactive, stepwise mechanism with quantum-style metadata:

Select a reaction from a “Reagent Matrix” (EAS, oxidations, reductions, nitrogen/diazonium, protection, sidechain, etc.).

Run the mechanism solver (Gemini 3 Flash) to generate a multi-step mechanism with:

Step titles + descriptions + explanations

Curly-arrow coordinates on a 0–100 grid so the UI can animate electron flow precisely

Quantum metadata per step (HOMO/LUMO energies in eV, dipole moment, orbital symmetry, wavefunction notes)

Products list + safety notes

Visualize in 2D map or 3D orbital mode

2D: crisp mechanism overlay on the molecule canvas

3D: interactive rotation + orbital-lobe “field” effects and depth layers

Control simulation speed (Slow / Normal / Instant) for classroom demos or rapid iteration

Explore “Quantum Overview” and “Electronic Logic” panels that summarize the FMO reasoning behind the arrows

How we built it

1) Gemini-first, but schema-locked

We used @google/genai with Gemini 3 Flash Preview for rapid mechanistic reasoning.

The solver enforces structured JSON output using:

responseMimeType: "application/json"

responseSchema (typed object with strict required fields)

We also tuned speed vs quality with thinkingConfig: { thinkingBudget: 4000 } to keep responses fast while still chemically coherent.

2) A “mechanism as data” pipeline

The LLM returns steps + arrow coordinate pairs (from {x,y} -> to {x,y}).

The UI renders these as animated quadratic Bézier curly arrows with glow, endpoints, and step transitions.

3) React UI as a chemistry cockpit

ReactionPanel acts like the mission log:

Step list (PHASE_01…)

Expandable explanations

A live “Quantum Analytics” widget showing E(HOMO) and E(LUMO)

2D/3D toggle

MoleculeCanvas is the visual engine:

Step-triggered arrow animation

3D rotation via pointer dragging

Orbital-lobe overlays for benzene (top/bottom phase lobes)

A futuristic “grid space” look to make mechanisms feel like a navigable map

4) Fast “facts mode”

getMoleculeFacts() uses Gemini Flash for quick bite-sized quantum facts to keep exploration engaging.

Challenges we ran into

Making LLM output reliably renderable Free-form text breaks visual systems. Getting consistent step structure + arrows required strict schema design, required fields, and careful prompt constraints.

Coordinate mapping for arrows The UI needs arrows that “land” on meaningful locations. We had to design a consistent 0–100 coordinate grid so the model output stays predictable across molecules and steps.

Latency vs depth Mechanistic reasoning can get long. We balanced thinking budget and UI responsiveness so the app feels “instant” while still producing valid logic.

3D interaction stability Drag-based rotation and layered transforms can feel jittery. We tuned rotation sensitivity, easing, and global pointer cleanup to keep it smooth.

Chemistry correctness under speed constraints When optimizing for fast responses, the risk is hand-wavy chemistry. We fought that by forcing: arrow correctness, HOMO/LUMO narration, and stepwise restoration of aromaticity.

Accomplishments that we're proud of

A mechanism generator that’s actually animatable (not just text): arrows, steps, and quantum metadata are all structured.

Schema-validated Gemini output that plugs directly into the UI without fragile parsing.

A dual-mode learning experience: 2D mechanism clarity + 3D orbital intuition.

A “control panel” UI that makes chemistry feel like operating a simulator—speed controls, phases, quantum analytics, and guided logic.

A repeatable framework: the same pipeline can expand beyond benzene to pericyclics, carbonyl chemistry, rearrangements, and more.

What we learned

Structured generation is the key to real apps: response schemas turn LLMs from “chatty” into “predictable engines.”

Thinking budget is a real product dial: you can trade latency for depth in a controlled way.

Visualization forces clarity: when you must draw the arrows, vague chemistry isn’t acceptable—you discover gaps immediately.

Users learn faster when mechanics feel interactive: step selection + speed controls + immediate feedback makes mechanisms memorable.

What's next for Quantum Solver

Deep Mode with Gemini 3 Pro (high thinking budget) for advanced reactions and tricky directing effects.

Pericyclic + stereochemistry expansions (Woodward–Hoffmann logic, orbital symmetry “snapshots,” conrotatory/disrotatory animations).

RDKit integration to validate products, generate structures automatically, and map arrow anchors to real atoms/bonds.

Export / share: one-click “mechanism report” (PNG/PDF) with steps, arrows, HOMO/LUMO table, and safety notes.

Interactive quizzes & mastery scoring: hide steps and let learners “predict the next arrow,” then compare to the solver’s output.

Multimodal upgrades: allow users to upload a hand-drawn mechanism and have Gemini critique/correct it with stepwise fixes.

Built With

• gemini3
• organicchemistry
• typescript