MathBridge · AI Formula Translator

简体中文 | English

Paste AI-generated LaTeX formulas into Word / WPS as native, editable equations — no more garbled code.

🚀 Live Demo

Smart mode in action — plain text copied from an AI chat (left) is reconstructed into compact, properly stacked formulas (right):

Why it exists

When ChatGPT / Claude / DeepSeek writes math, the output is LaTeX source like $E = mc^2$. Copy-pasting that into Word gives you either raw backslash-laden source text or flattened garbage.

MathBridge fixes the pipeline:

AI LaTeX output  →  MathML  →  system clipboard (text/html)  →  Word auto-converts to native equation (OMML) on paste

What lands in Word is a real equation object — double-click to edit, flows with your document, identical to an equation inserted by hand.

Usage

1. Open index.html (or the deployed page)
2. Paste the AI reply into the left input box
3. The right pane renders a live preview
4. Click Copy to Word (or Ctrl + Enter), then Ctrl + V in Word / WPS
5. Or click Export Word to download a 文档.docx with native equations — open it in Word / WPS (more reliable CJK-subscript rendering in WPS)

Click any single formula block in the preview to copy just that formula.

Features

• Zero upload — all conversion happens locally in the browser; formulas never touch a server
• Zero-dependency deploy — pure static files, Temml engine bundled in assets/vendor/, works fully offline
• Mixed parsing — auto-detects $...$ inline and $$...$$ / \[...\] display formulas, mixed with regular text
• Smart Unicode detection — plain text copied from AI chats is reconstructed automatically: soft line-breaks merged, Unicode symbols & super/subscripts restored, flattened fractions rebuilt (e.g. 4.20.30 becomes a proper fraction)
• Bare-LaTeX detection — AI often outputs formulas as raw LaTeX without $...$ delimiters (e.g. R_{\text{总}} = \frac{E}{I}). These are recognized via balanced-brace parsing and rendered intact, never split into garbled fragments — so \frac, \text, \infty and superscripts like 10^{-4} come through correctly.
• Rich paste — when the clipboard HTML contains KaTeX MathML (DeepSeek, Kimi, ChatGPT…), the original LaTeX source is extracted for zero-loss conversion
• Compact layout — inline formulas stay in the same paragraph as the surrounding text, matching the original AI reply
• Fault tolerant — a formula that fails to parse is highlighted in red without blocking the rest
• Export Word — one-click 文档.docx with equations embedded as native OMML; Word and WPS both open them as editable native equations (CJK subscripts like R_总 stay correctly small, sized by WPS's own engine)
• Bilingual UI — Chinese / English toggle, remembered via localStorage
• Customizable appearance — font size, font weight and background color, all persisted locally (panel height and corner radius are fixed design values that adapt to the window)
• No framework — vanilla HTML/CSS/JS in a flat directory, easy to hack on

Paste support matrix

Target	Result
Word desktop (2016+)	Native editable equation
WPS Office	Native editable equation
Feishu docs	Formula as rich text
Word web	Partial — desktop recommended
Tencent Docs / Google Docs	Rich-text paste, formatting mostly preserved

Run locally

No build step:

# serve with any static server
python -m http.server 8000
# or
npx serve .

Then visit http://localhost:8000. Double-clicking index.html also works.

Tests

node tests/engine.test.mjs
node tests/smartmath.test.mjs
node tests/latex.test.mjs
node tests/mml2omml.test.mjs
node tests/docx.test.mjs
node tests/integration.test.mjs
node tests/page-scripts.test.mjs   # page wiring regression (scripts / DOM ids / i18n keys)
node tools/browser-e2e.mjs         # real-browser E2E (Edge headless, clicks "Export Word")
node tools/responsive-check.mjs    # multi-viewport layout check (9 windows + 4 narrow iframes)

Verifies the Temml engine converts sample formulas to valid MathML (5/5), the SmartMath engine against real AI-copied text — line merging, symbol restoration, fraction reconstruction, false-positive guards (30/30), and bare-LaTeX recognition with clean Temml rendering (12/12).

page-scripts.test.mjs and browser-e2e.mjs are wiring-layer tests: the first loads every <script> from index.html in its real order inside a VM sandbox and checks that every DOM id and data-i18n key referenced by app.js actually exists; the second drives the real page in headless Edge (type content → click Export Word) and asserts the toast plus the produced Blob are a valid docx. Together they catch silent failures where unit tests are green but a button does nothing in the browser.

responsive-check.mjs renders the page at 9 window sizes (1600×1000 down to the 500×800 minimum window) plus four narrow widths (430/400/360/320px) simulated through same-origin iframes, asserting at each size: no horizontal scrolling, no clipped text, buttons never overflowing their pane, usable input/preview heights, and a fully readable footer. Run it for any layout change (panel height, breakpoints, longer button labels).

Project structure

mathbridge/
├── index.html                 # entry page
├── css/style.css              # styles
├── js/app.js                  # parsing / rendering / clipboard / docx export / i18n
├── js/smartmath.js            # SmartMath: Unicode formula detection engine
├── js/mml2omml.js             # MathML → OMML converter (native equations)
├── js/docx.js                 # zero-dependency in-browser docx packer (STORE zip + OOXML)
├── tests/engine.test.mjs      # Temml engine unit tests
├── tests/smartmath.test.mjs   # SmartMath Unicode/merge tests
├── tests/latex.test.mjs       # Bare-LaTeX recognition tests
├── tests/mml2omml.test.mjs    # MathML→OMML conversion tests
├── tests/docx.test.mjs        # docx packer tests
├── tests/integration.test.mjs # end-to-end export test
├── tests/page-scripts.test.mjs# page wiring regression tests
├── tools/browser-e2e.mjs      # headless-Edge browser E2E check
├── tools/responsive-check.mjs # multi-viewport layout check
├── assets/vendor/
│   ├── temml.js               # Temml 0.13.5 (LaTeX → MathML)
│   └── temml.css              # math font styles
├── assets/favicon.svg         # site icon
├── assets/demo-comparison.png # README image
├── assets/demo-smart.png      # README image
├── README.md                  # English
├── README.zh-CN.md            # 简体中文
└── LICENSE

Roadmap

• Unicode math symbol detection (∀, ≥, ∑) — shipped in v0.2.0 via SmartMath
• Reverse conversion: Word equation → LaTeX (OMML parsing)
• Browser extension: one-click "Copy as Word equation" on formula blocks in AI chat pages
• Standalone npm package: latex-to-clipboard core engine for editor integrations
• More UI languages

Credits

• Temml — LaTeX → MathML conversion engine

License

MIT