The Editorial — System Architecture

🖥️

Presentation Layer

Static SPA Dashboard · HTML5 / CSS3 / Vanilla JS

Input Modes

🖊️

Drawing Canvas

HTML5 Canvas API with pen, eraser, thickness control, undo/redo stack. Exports transparent PNG.

Canvas API

app.js → drawCanvas()

📷

Image Upload

Drag-and-drop or file picker. Accepts PNG, JPEG, PDF. Preview with crop zone before OCR.

File API

app.js → uploadHandler()

⌨️

MathQuill Editor

Visual WYSIWYG LaTeX input with quick-insert symbol buttons. Produces raw LaTeX string.

MathQuill 0.10

app.js → mathquillField

Output & Display

📐

KaTeX Renderer

Real-time LaTeX → beautifully typeset math. Renders OCR output and solver results.

KaTeX 0.16

📊

Plot Visualizer

Interactive polynomial graph rendering with plotted roots for degree ≥ 3 equations.

Canvas 2D

📜

History Archive

Session-based equation timeline with search, type/date filters, batch delete, and export.

LocalStorage + API

UI Features

🎨 Theme Engine

Dark / Light / System with glassmorphism

♿ Accessibility

Scaling, high-contrast, screen-reader

🔢 Exact / Numeric

Toggle symbolic vs rounded output

🆔 Session ID

Auto-generated per browser session

src/frontend/index.html · src/frontend/style.css · src/frontend/app.js

⚙️

Application Layer

FastAPI 0.135 + Uvicorn · Python 3.10+ · Async REST API

API Gateway & Routing

🚀

FastAPI Application Server

CORS middleware, model preloading at startup (Texify + Pix2Tex), Pydantic schema validation.

POST /upload-equation

POST /solve

POST /history

GET /history/{session_id}

DEL /history/{item_id}

DEL /history

src/app/main.py · src/app/routes.py · src/app/schemas.py

🔍 OCR Pipeline

Hybrid OCR Engine

Dual-model architecture: Texify runs first, Pix2Tex validates and acts as fallback when primary parse fails.

Primary Texify 0.2 — Vision Transformer (ViT) → LaTeX

Fallback Pix2Tex 0.1 — Seq2Seq decoder, lazy-loaded

PyTorch 2.10 Transformers 4.38

src/ocr/hybrid_ocr.py

🧮 Solver Engine

Computer Algebra System

Dual-parser strategy: latex2sympy2 handles raw LaTeX directly; regex-based manual pipeline as fallback.

Primary latex2sympy2 → SymPy expression tree

Fallback Regex parser → parse_expr() pipeline

SymPy 1.14 latex2sympy2

src/app/solver.py (626 lines)

🖼️ Image Preprocessing

🔬

Adaptive Image Preprocessing Pipeline

Stroke-width estimation via distance transform. Auto-selects between printed/handwriting/outline branches.

OpenCV 4.13 Pillow 10.4 NumPy

src/ocr/preprocessing.py · src/ocr/preprocess_math.py (251 lines)

✏️ LaTeX Normalization Layer

🧹

Multi-Stage OCR LaTeX Cleanup

Regex-powered sanitization: Unicode repair, missing backslashes, implicit multiplication, inverse trig normalization. Runs between OCR output and solver input.

src/ocr/latex_normalize.py · src/ocr/latex_utils.py · src/ocr/latex_parser.py

Complete OCR → Solve Pipeline (POST /upload-equation → POST /solve)

1

Image Input

Canvas PNG, Upload JPEG, or Camera Photo

→

2

Preprocess

Stroke-width detection, binarization, deskew, shadow crush

→

3

OCR

Texify ViT inference (+ Pix2Tex fallback)

→

4

Normalize

Regex cleanup, Unicode fix, backslash repair

→

5

Parse & Solve

latex2sympy2 → SymPy CAS → symbolic / numeric

→

6

Render

KaTeX display + plot data + MongoDB persist

🗄️

Persistence Layer

MongoDB Atlas (Cloud NoSQL) · Database: math_ocr_db

🍃

Collection: `equation`

Dual-LaTeX document schema with legacy field normalization

Field	Description	Type
_id	Auto-generated document ID	ObjectId
session_id	Browser session identifier	string
ocr_latex	Raw LaTeX from OCR engine	string
final_latex	User-edited LaTeX (source of truth)	string
solution_latex	Solver result in LaTeX	string?
solution	Plain-text solution value	string?
image_url	Path to source image	string?
created_at	ISO 8601 UTC timestamp	string

src/app/database.py

🔄

Data Access Operations

All DB calls encapsulated — routes never touch the driver directly

WRITE save_history_entry()

READ get_equations_by_session()

UPDATE update_equation_solution()

UPDATE update_final_latex()

DELETE delete_history_item(s)()

Schema Normalization: setdefault() ensures legacy documents get consistent shape for frontend rendering.

🛠️

Infrastructure & DevOps

Containerization, Testing, and Configuration

🐳

Docker

Dockerfile for containerized deployment with Python 3.10 base image.

Dockerfile

🧪

Pytest Suite

Unit tests for LaTeX normalization pipeline. Edge cases as fixtures.

Pytest 9.0

✅

Pydantic Validation

Type-safe request/response schemas with model validators.

Pydantic 2.12

🔐

Environment Config

.env file with dotenv loader for secrets. MONGODB_URI required.

.env / dotenv