refact: update ui

content/blog/en/2026-03-15-latex-vs-mathml.md

@@ -0,0 +1,57 @@
+---
+title: "LaTeX vs MathML: Which Format Should You Use?"
+description: A practical comparison of LaTeX and MathML for students and researchers
+slug: latex-vs-mathml
+date: 2026-03-15
+tags: [guide, formats]
+---
+
+# LaTeX vs MathML: Which Format Should You Use?
+
+TexPixel can export your recognized formulas in both LaTeX and MathML. But which one should you choose? Here's a quick guide.
+
+## LaTeX — The Academic Standard
+
+LaTeX is the most widely used format for typesetting math in academic papers, theses, and textbooks.
+
+**Best for:**
+- Writing papers in Overleaf, TeXmaker, or any LaTeX editor
+- Pasting into Markdown documents (with KaTeX or MathJax rendering)
+- Sharing formulas in forums like Stack Exchange or Reddit
+
+**Example:**
+```latex
+\int_{0}^{\infty} e^{-x^2} dx = \frac{\sqrt{\pi}}{2}
+```
+
+## MathML — The Web Standard
+
+MathML is an XML-based format designed for displaying math in web browsers and screen readers.
+
+**Best for:**
+- Embedding formulas in HTML web pages
+- Accessibility — screen readers can interpret MathML
+- Word documents (DOCX uses MathML internally)
+
+**Example:**
+```xml
+<math>
+  <msubsup><mo>&int;</mo><mn>0</mn><mi>&infin;</mi></msubsup>
+  <msup><mi>e</mi><mrow><mo>-</mo><msup><mi>x</mi><mn>2</mn></msup></mrow></msup>
+  <mi>d</mi><mi>x</mi>
+</math>
+```
+
+## Quick Decision Guide
+
+| Scenario | Use |
+|----------|-----|
+| Writing a paper | LaTeX |
+| Homework in Google Docs / Word | MathML (via DOCX export) |
+| Posting on a blog or website | LaTeX (with MathJax) |
+| Accessibility-focused content | MathML |
+| Sharing on social media | Image export |
+
+## The TexPixel Advantage
+
+You don't have to choose upfront. TexPixel recognizes your formula once and lets you export in any format — switch freely between LaTeX, MathML, Markdown, Word, and image.

content/blog/en/2026-03-20-handwriting-tips.md

@@ -0,0 +1,45 @@
+---
+title: 5 Tips for Better Handwriting Recognition
+description: Get the most accurate results from TexPixel when scanning handwritten formulas
+slug: handwriting-tips
+date: 2026-03-20
+tags: [tutorial, tips]
+---
+
+# 5 Tips for Better Handwriting Recognition
+
+Getting clean, accurate LaTeX from handwritten math doesn't require perfect penmanship. But a few simple habits can dramatically improve your results.
+
+## 1. Use Dark Ink on Light Paper
+
+High contrast is the single biggest factor in recognition accuracy. A dark pen (black or dark blue) on white or light paper gives TexPixel the clearest signal. Pencil works too, but press firmly.
+
+## 2. Give Symbols Room to Breathe
+
+Cramped formulas are harder for both humans and AI to read. Leave clear gaps between:
+- Fraction bars and the expressions above/below them
+- Subscripts and superscripts and their base symbols
+- Parentheses and the terms they enclose
+
+## 3. Be Deliberate with Similar Characters
+
+Some characters are notoriously ambiguous in handwriting:
+- **1, l, |** — make your ones with a serif or flag
+- **0, O, o** — zeros should be narrower and more oval
+- **x, ×** — use a clear multiplication dot (·) when you mean "times"
+- **u, v** — round bottom vs. pointed bottom
+
+## 4. Keep Your Camera Steady
+
+If you're photographing notes with a phone:
+- Hold the phone parallel to the paper (not at an angle)
+- Make sure the lighting is even — no harsh shadows across the formula
+- Get close enough that the formula fills most of the frame
+
+## 5. One Formula Per Upload
+
+TexPixel works best when each image contains a single formula or a closely related set of expressions. If you have a page full of equations, crop them individually for best results.
+
+---
+
+With these habits, you'll see noticeably better accuracy — often 95%+ even for complex handwritten expressions.

content/blog/zh/2026-03-15-latex-vs-mathml.md

@@ -0,0 +1,48 @@
+---
+title: "LaTeX 和 MathML：你应该用哪种格式？"
+description: 面向学生和研究人员的 LaTeX 与 MathML 实用对比
+slug: latex-vs-mathml
+date: 2026-03-15
+tags: [指南, 格式]
+---
+
+# LaTeX 和 MathML：你应该用哪种格式？
+
+TexPixel 可以将识别出的公式导出为 LaTeX 和 MathML 两种格式。那么你应该选择哪种？这里有一份快速指南。
+
+## LaTeX — 学术标准
+
+LaTeX 是学术论文、学位论文和教材中排版数学公式最广泛使用的格式。
+
+**适用场景：**
+- 在 Overleaf、TeXmaker 或任何 LaTeX 编辑器中写论文
+- 粘贴到 Markdown 文档中（配合 KaTeX 或 MathJax 渲染）
+- 在 Stack Exchange 或 Reddit 等论坛分享公式
+
+**示例：**
+```latex
+\int_{0}^{\infty} e^{-x^2} dx = \frac{\sqrt{\pi}}{2}
+```
+
+## MathML — Web 标准
+
+MathML 是一种基于 XML 的格式，专为在浏览器和屏幕阅读器中显示数学内容而设计。
+
+**适用场景：**
+- 在 HTML 网页中嵌入公式
+- 无障碍访问 — 屏幕阅读器可以解读 MathML
+- Word 文档（DOCX 内部使用 MathML）
+
+## 快速决策指南
+
+| 场景 | 推荐格式 |
+|------|---------|
+| 写论文 | LaTeX |
+| 在 Google Docs / Word 中做作业 | MathML（通过 DOCX 导出） |
+| 发布博客或网站 | LaTeX（配合 MathJax） |
+| 注重无障碍访问 | MathML |
+| 社交媒体分享 | 图片导出 |
+
+## TexPixel 的优势
+
+你不需要提前选择。TexPixel 识别一次公式后，可以导出为任意格式——在 LaTeX、MathML、Markdown、Word 和图片之间自由切换。

content/blog/zh/2026-03-20-handwriting-tips.md

@@ -0,0 +1,45 @@
+---
+title: 提升手写公式识别准确率的 5 个技巧
+description: 使用 TexPixel 扫描手写公式时，如何获得最准确的识别结果
+slug: handwriting-tips
+date: 2026-03-20
+tags: [教程, 技巧]
+---
+
+# 提升手写公式识别准确率的 5 个技巧
+
+从手写数学公式获得干净、准确的 LaTeX 并不需要完美的书写。但一些简单的习惯可以显著提升识别结果。
+
+## 1. 使用深色墨水和浅色纸张
+
+高对比度是影响识别准确率的最大因素。在白纸或浅色纸上使用深色笔（黑色或深蓝色）能给 TexPixel 最清晰的信号。铅笔也可以，但要用力书写。
+
+## 2. 给符号留出空间
+
+拥挤的公式无论对人还是 AI 都更难辨认。请在以下位置留出清晰的间隔：
+- 分数线与上下表达式之间
+- 上标、下标与基础符号之间
+- 括号与其包含的项之间
+
+## 3. 注意易混淆字符
+
+一些字符在手写中特别容易混淆：
+- **1, l, |** — 写数字 1 时加上衬线
+- **0, O, o** — 零应更窄更椭圆
+- **x, ×** — 表示"乘"时使用乘号点（·）
+- **u, v** — 圆底 vs 尖底
+
+## 4. 保持拍摄稳定
+
+如果你用手机拍摄笔记：
+- 手机保持与纸面平行（不要倾斜）
+- 确保光线均匀，公式上没有阴影
+- 靠近拍摄，让公式占据画面的大部分
+
+## 5. 每次上传一个公式
+
+TexPixel 在每张图片只包含一个公式或一组紧密相关的表达式时效果最好。如果你有一整页方程，建议逐个裁剪后分别上传。
+
+---
+
+养成这些习惯后，你会发现识别准确率明显提升——即使是复杂的手写表达式也能达到 95% 以上。

content/docs/en/faq.md

@@ -0,0 +1,62 @@
+---
+title: FAQ
+description: Frequently asked questions about TexPixel
+slug: faq
+date: 2026-03-25
+tags: [reference]
+order: 3
+---
+
+# Frequently Asked Questions
+
+## General
+
+### Is TexPixel free?
+
+Yes! You can use TexPixel for free with up to 3 uploads per day. No sign-up or credit card is required. For unlimited uploads and additional features, check our Pro plan.
+
+### Do I need to create an account?
+
+No. You can start using TexPixel immediately as a guest. Creating an account (free) lets you sync history across devices.
+
+### What languages are supported?
+
+TexPixel recognizes mathematical formulas regardless of the surrounding language. The user interface is available in English and Chinese.
+
+## Recognition
+
+### How accurate is the recognition?
+
+TexPixel achieves 90-98% accuracy depending on image quality and formula complexity. Clean, high-contrast images of typed formulas typically achieve the highest accuracy.
+
+### Can it recognize handwritten formulas?
+
+Yes. TexPixel handles both printed and handwritten formulas. For best results with handwriting, use dark ink on white paper and keep characters well-spaced.
+
+### What about complex multi-line equations?
+
+TexPixel can recognize multi-line equations, equation arrays, and systems of equations. Each line is captured and formatted correctly in the output.
+
+### Does it support matrices and tables?
+
+Yes. Matrices, determinants, and tabular expressions are supported and output as proper LaTeX `\begin{matrix}` or `\begin{pmatrix}` environments.
+
+## Export & Integration
+
+### Can I use the output in Overleaf?
+
+Absolutely. Copy the LaTeX output and paste it directly into your Overleaf project. It works immediately.
+
+### How do I use the output in Word?
+
+Use the DOCX export option. This creates a Word file with properly formatted equations that you can edit normally in Microsoft Word or Google Docs.
+
+## Privacy & Data
+
+### Are my uploaded images stored?
+
+Uploaded images are processed for recognition and temporarily cached. They are automatically deleted after processing. We do not use your images for training.
+
+### Is my data encrypted?
+
+Yes. All data is transmitted over HTTPS. Uploaded files and results are handled securely.

content/docs/en/supported-formats.md

@@ -0,0 +1,50 @@
+---
+title: Supported Formats
+description: Input and output formats supported by TexPixel
+slug: supported-formats
+date: 2026-03-25
+tags: [reference]
+order: 2
+---
+
+# Supported Formats
+
+## Input Formats
+
+TexPixel accepts the following file types for formula recognition:
+
+### Images
+- **JPEG / JPG** — Photos from cameras or phones
+- **PNG** — Screenshots, scanned images, or digital drawings
+
+### Documents
+- **PDF** — Single or multi-page documents. All pages are processed and formulas are extracted from each page.
+
+**File size limit:** 10 MB per file.
+
+**Resolution tips:** For best results, use images at least 300 DPI. Phone photos work well when the formula fills most of the frame.
+
+## Output Formats
+
+After recognition, you can export results in multiple formats:
+
+### Code Formats
+- **LaTeX** — Standard math typesetting syntax, compatible with Overleaf, TeXmaker, and Markdown editors
+- **MathML** — XML-based format for web pages and screen readers
+
+### Document Formats
+- **Markdown** — Ready to paste into Markdown files with inline math notation
+- **Word (DOCX)** — Editable Word document with properly formatted equations
+
+### Image Formats
+- **PNG** — High-resolution rendered formula image
+
+## Format Comparison
+
+| Format | Best For | Editable | Web-Ready |
+|--------|----------|----------|-----------|
+| LaTeX | Papers, Markdown | Yes | With MathJax |
+| MathML | Websites, Accessibility | Yes | Native |
+| Markdown | Notes, Docs | Yes | With renderer |
+| Word | Assignments | Yes | No |
+| PNG | Sharing | No | Yes |

content/docs/zh/faq.md

@@ -0,0 +1,62 @@
+---
+title: 常见问题
+description: 关于 TexPixel 的常见问题解答
+slug: faq
+date: 2026-03-25
+tags: [参考]
+order: 3
+---
+
+# 常见问题
+
+## 基本信息
+
+### TexPixel 是免费的吗？
+
+是的！你可以每天免费使用 3 次上传。无需注册或绑定信用卡。如需无限上传和更多功能，请查看我们的专业版。
+
+### 需要创建账号吗？
+
+不需要。你可以立即以访客身份使用 TexPixel。创建免费账号后可以跨设备同步历史记录。
+
+### 支持哪些语言？
+
+TexPixel 可以识别任何语言环境中的数学公式。用户界面支持中文和英文。
+
+## 识别相关
+
+### 识别准确率如何？
+
+根据图片质量和公式复杂度，TexPixel 的准确率在 90-98% 之间。清晰、高对比度的印刷体公式通常能达到最高准确率。
+
+### 能识别手写公式吗？
+
+可以。TexPixel 支持印刷体和手写公式。手写公式建议使用深色墨水在白纸上书写，并保持字符间距适当。
+
+### 支持复杂的多行方程吗？
+
+TexPixel 可以识别多行方程、方程组和方程数组。每一行都会被准确捕获并正确格式化输出。
+
+### 支持矩阵和表格吗？
+
+支持。矩阵、行列式和表格表达式都能识别，并输出为正确的 LaTeX `\begin{matrix}` 或 `\begin{pmatrix}` 环境。
+
+## 导出与集成
+
+### 输出可以在 Overleaf 中使用吗？
+
+当然可以。复制 LaTeX 输出，直接粘贴到你的 Overleaf 项目中即可使用。
+
+### 如何在 Word 中使用？
+
+使用 DOCX 导出选项。这会创建一个包含格式正确的公式的 Word 文件，你可以在 Microsoft Word 或 Google Docs 中正常编辑。
+
+## 隐私与数据
+
+### 上传的图片会被存储吗？
+
+上传的图片仅用于识别处理并临时缓存，处理完成后会自动删除。我们不会使用你的图片进行训练。
+
+### 数据是加密的吗？
+
+是的。所有数据通过 HTTPS 传输。上传的文件和结果都经过安全处理。

content/docs/zh/supported-formats.md

@@ -0,0 +1,50 @@
+---
+title: 支持的格式
+description: TexPixel 支持的输入和输出格式
+slug: supported-formats
+date: 2026-03-25
+tags: [参考]
+order: 2
+---
+
+# 支持的格式
+
+## 输入格式
+
+TexPixel 接受以下文件类型进行公式识别：
+
+### 图片
+- **JPEG / JPG** — 相机或手机拍摄的照片
+- **PNG** — 截图、扫描图片或数字绘图
+
+### 文档
+- **PDF** — 单页或多页文档。所有页面都会被处理，每一页中的公式都会被提取。
+
+**文件大小限制：** 每个文件最大 10 MB。
+
+**分辨率建议：** 为获得最佳效果，建议使用至少 300 DPI 的图片。手机拍照时让公式占据画面的大部分即可。
+
+## 输出格式
+
+识别完成后，你可以将结果导出为多种格式：
+
+### 代码格式
+- **LaTeX** — 标准数学排版语法，兼容 Overleaf、TeXmaker 和 Markdown 编辑器
+- **MathML** — 基于 XML 的格式，适用于网页和屏幕阅读器
+
+### 文档格式
+- **Markdown** — 可直接粘贴到 Markdown 文件中，包含内联数学符号
+- **Word (DOCX)** — 可编辑的 Word 文档，公式格式完整
+
+### 图片格式
+- **PNG** — 高分辨率渲染的公式图片
+
+## 格式对比
+
+| 格式 | 最适合 | 可编辑 | 网页就绪 |
+|------|--------|--------|---------|
+| LaTeX | 论文、Markdown | 是 | 需 MathJax |
+| MathML | 网站、无障碍 | 是 | 原生支持 |
+| Markdown | 笔记、文档 | 是 | 需渲染器 |
+| Word | 作业 | 是 | 否 |
+| PNG | 分享 | 否 | 是 |