36 Commits

Author SHA1 Message Date
6a6f7e970c feat: simplify workspace account UI and geo language defaults 2026-03-27 02:25:26 +08:00
2bcf32d678 feat: tighten workspace auth and onboarding flow 2026-03-27 02:02:12 +08:00
927fdfa97d feat: remove login button from sidebar, add history toggle 2026-03-27 01:48:36 +08:00
6ec2f5ec43 feat: remove logo from workspace navbar 2026-03-27 01:47:11 +08:00
dad9d2047d feat: add i18n keys for history toggle and email verification 2026-03-27 01:46:39 +08:00
b761f4ccbf feat: redesign showcase section with clickable demo cards
Replace static showcase layout with interactive demo grid featuring 4 real example cases (complex formulas, distorted text, handwriting, text layout). Add demo image loading via sessionStorage when users click "Try it now". New CSS grid with hover effects, overlay buttons, and responsive design. Update testimonials with new user feedback.

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
2026-03-27 01:22:41 +08:00
6e4df89b23 feat: redesign pricing section with beta notice and i18n pricing
- 4-card layout: Free / Monthly / Quarterly / Lifetime License
- zh shows RMB ¥, en shows $ with localized prices
- Monthly ¥19.9 (edu ¥12.9 / $1.99), Quarterly ¥49.9 (edu ¥29.9 / $7.99)
- Diagonal corner ribbons (green "限时免费") on Monthly & Quarterly
- Desktop card renamed to "永久授权 / Lifetime License" with Coming Soon ribbon
- Desktop tag badge distinguishes it as a native offline app
- Beta notice banner: all plans free during beta, no payment required
- CTA unified to "免费体验 / Try Free" linking to /app
- Cards use flex-column + align-items:stretch for consistent equal height

Made-with: Cursor
2026-03-27 00:09:00 +08:00
a6eb79f530 fix: grid lines rendering over main content — add z-index:1 to marketing main; remove playwright 2026-03-26 17:43:35 +08:00
1956842f23 fix: add useScrollReveal to BlogListPage — reveal class was hiding all content 2026-03-26 16:59:22 +08:00
99e1314bf9 refact: eliminate blog/docs content overlap
- Delete blog/copy-math-to-word (EN+ZH) — identical to docs/copy-to-word
- Rewrite blog/pdf-formula-issues as narrative troubleshooting story;
  operational steps now link out to docs/pdf-extraction
- Add "Further reading" cross-links: 4 docs → relevant blog posts
- Add "See also" cross-links: 3 blog posts → relevant docs

Docs = product reference; Blog = narrative/use cases/opinions

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-03-26 16:52:27 +08:00
76f1bde56d feat: add 5 new blog posts (en + zh)
- how-ai-reads-math: plain-English explainer of the recognition pipeline
- student-workflow: lecture-to-LaTeX workflow for students
- pdf-formula-issues: troubleshooting guide for PDF extraction errors
- copy-math-to-word: 3 methods for getting formulas into Word, ranked
- researcher-workflow: digitizing handwritten research notes at scale

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-03-26 16:46:31 +08:00
012748fc3d feat: refactor blog pages to match landing CSS aesthetic
- BlogListPage: removed Tailwind/lucide-react, added featured post card,
  2-col grid for remaining posts, formatDate helper, eyebrow + Lora titles
- BlogDetailPage: matches DocDetailPage (skeleton loader, not-found state,
  tags + Lora h1 + date/read-time meta, docs-prose body, CTA box)
- Added blog-specific CSS to landing.css (.blog-page, .blog-featured,
  .blog-grid, .blog-card); reuses .docs-back-link, .docs-prose, .docs-cta-box

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-03-26 16:40:06 +08:00
409bbf742e feat: optimize docs pages and add 4 new doc articles (en + zh)
- Rewrote DocsListPage and DocDetailPage with landing.css aesthetic
  (icon cards, skeleton loader, prose styles, CTA box)
- Added docs-specific CSS to landing.css
- Created image-to-latex, copy-to-word, ocr-accuracy, pdf-extraction
  articles in both English and Chinese
- Updated DocsSeoSection guide cards to link to real doc slugs

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-03-26 16:15:22 +08:00
dceb775a1b feat: replace all marketing home components with reference landing design
- Extract landing.css (scoped under .marketing-page) from texpixel-landing.html
- Add Lora + JetBrains Mono fonts to index.html
- Update MarketingLayout with .marketing-page wrapper and glow blobs
- Replace MarketingNavbar with reference design (auth-aware user menu)
- Replace HeroSection with mock window + cycling LaTeX typing effect
- Replace FeaturesSection, PricingSection, Footer with reference designs
- Add ProductSuiteSection, ShowcaseSection, TestimonialsSection (carousel), DocsSeoSection
- Add useScrollReveal hook for intersection-based fade-in animations
- Update HomePage to wire all sections in correct order
- Remove obsolete HowItWorksSection and ContactSection
- Remove dead contact key from marketing.nav translations

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-03-26 15:57:39 +08:00
d13cb64567 refact: update ui 2026-03-25 14:06:37 +08:00
276160d769 feat: update sitemap and robots.txt for new routes
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-25 13:28:01 +08:00
65177f12a7 feat: wire Docs and Blog pages to markdown content pipeline
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-25 13:27:25 +08:00
1ed7fad293 feat: add markdown content pipeline with build script
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-25 13:26:33 +08:00
5f8d686290 feat: update AppRouter with layout routes, add Docs and Blog pages
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-25 13:20:58 +08:00
e28b8294aa feat: migrate App.tsx logic to WorkspacePage
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-25 13:20:01 +08:00
274342aab6 feat: add Home page with Hero, Features, HowItWorks, Pricing, Contact sections
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-25 13:18:40 +08:00
3ecf1e169c feat: add layout components (MarketingNavbar, AppNavbar, Footer, layouts)
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-25 13:16:59 +08:00
f841d09010 feat: add marketing translations for en and zh
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-25 13:15:25 +08:00
2f97cc6c67 feat: add SEOHead component with react-helmet-async
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-25 13:14:34 +08:00
3808417d30 feat: install react-helmet-async and gray-matter, add HelmetProvider
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-25 13:14:15 +08:00
0d4de2fcf1 feat: replace logo in main 2026-03-25 11:49:28 +08:00
3a3bbbc0fc feat: replace icon 2026-03-25 11:45:54 +08:00
e1f8dac74d feat: add icon 2026-03-25 11:14:55 +08:00
64e92c769d feat: optimize SEO based on GSC data
- Fix broken hreflang: /en/ ghost page removed, all hreflang point to canonical /
- Add canonical URL tag
- Remove emoji from page titles
- Rewrite title/description with target keywords (LaTeX OCR, math formula recognition, handwriting math)
- Add JSON-LD WebApplication structured data schema
- Update og:image to clean URL without OSS params, add og:image dimensions
- Fix favicon reference from vite.svg to favicon.png
- Add public/sitemap.xml with hreflang annotations
- Add public/robots.txt pointing to sitemap
- Update seoHelper.ts keywords for both zh/en to match search intent
- Add CLAUDE.md project documentation
2026-03-24 23:50:12 +08:00
fba4541fa5 fix: user info api repeat call 2026-03-09 21:46:26 +08:00
a797b2b0d7 fix: all call user info 2026-03-09 21:13:01 +08:00
liuyuanchuang
cd479da0eb optimize register error tip 2026-03-06 15:01:34 +08:00
liuyuanchuang
f70a9a85c8 feat: add google oauth 2026-03-06 14:30:30 +08:00
liuyuanchuang
bc4b547e03 Merge branch 'main' of https://code.texpixel.com/YogeLiu/doc_ai_frontend 2026-02-06 22:33:58 +08:00
liuyuanchuang
e4c6a09cf8 feat: rm dist 2026-02-05 18:23:17 +08:00
liuyuanchuang
2b1da79bbc feat: add toast for no content 2026-02-05 18:22:30 +08:00
186 changed files with 18471 additions and 1722 deletions

View File

@@ -0,0 +1,177 @@
Apache License
Version 2.0, January 2004
http://www.apache.org/licenses/
TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
1. Definitions.
"License" shall mean the terms and conditions for use, reproduction,
and distribution as defined by Sections 1 through 9 of this document.
"Licensor" shall mean the copyright owner or entity authorized by
the copyright owner that is granting the License.
"Legal Entity" shall mean the union of the acting entity and all
other entities that control, are controlled by, or are under common
control with that entity. For the purposes of this definition,
"control" means (i) the power, direct or indirect, to cause the
direction or management of such entity, whether by contract or
otherwise, or (ii) ownership of fifty percent (50%) or more of the
outstanding shares, or (iii) beneficial ownership of such entity.
"You" (or "Your") shall mean an individual or Legal Entity
exercising permissions granted by this License.
"Source" form shall mean the preferred form for making modifications,
including but not limited to software source code, documentation
source, and configuration files.
"Object" form shall mean any form resulting from mechanical
transformation or translation of a Source form, including but
not limited to compiled object code, generated documentation,
and conversions to other media types.
"Work" shall mean the work of authorship, whether in Source or
Object form, made available under the License, as indicated by a
copyright notice that is included in or attached to the work
(an example is provided in the Appendix below).
"Derivative Works" shall mean any work, whether in Source or Object
form, that is based on (or derived from) the Work and for which the
editorial revisions, annotations, elaborations, or other modifications
represent, as a whole, an original work of authorship. For the purposes
of this License, Derivative Works shall not include works that remain
separable from, or merely link (or bind by name) to the interfaces of,
the Work and Derivative Works thereof.
"Contribution" shall mean any work of authorship, including
the original version of the Work and any modifications or additions
to that Work or Derivative Works thereof, that is intentionally
submitted to Licensor for inclusion in the Work by the copyright owner
or by an individual or Legal Entity authorized to submit on behalf of
the copyright owner. For the purposes of this definition, "submitted"
means any form of electronic, verbal, or written communication sent
to the Licensor or its representatives, including but not limited to
communication on electronic mailing lists, source code control systems,
and issue tracking systems that are managed by, or on behalf of, the
Licensor for the purpose of discussing and improving the Work, but
excluding communication that is conspicuously marked or otherwise
designated in writing by the copyright owner as "Not a Contribution."
"Contributor" shall mean Licensor and any individual or Legal Entity
on behalf of whom a Contribution has been received by Licensor and
subsequently incorporated within the Work.
2. Grant of Copyright License. Subject to the terms and conditions of
this License, each Contributor hereby grants to You a perpetual,
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
copyright license to reproduce, prepare Derivative Works of,
publicly display, publicly perform, sublicense, and distribute the
Work and such Derivative Works in Source or Object form.
3. Grant of Patent License. Subject to the terms and conditions of
this License, each Contributor hereby grants to You a perpetual,
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
(except as stated in this section) patent license to make, have made,
use, offer to sell, sell, import, and otherwise transfer the Work,
where such license applies only to those patent claims licensable
by such Contributor that are necessarily infringed by their
Contribution(s) alone or by combination of their Contribution(s)
with the Work to which such Contribution(s) was submitted. If You
institute patent litigation against any entity (including a
cross-claim or counterclaim in a lawsuit) alleging that the Work
or a Contribution incorporated within the Work constitutes direct
or contributory patent infringement, then any patent licenses
granted to You under this License for that Work shall terminate
as of the date such litigation is filed.
4. Redistribution. You may reproduce and distribute copies of the
Work or Derivative Works thereof in any medium, with or without
modifications, and in Source or Object form, provided that You
meet the following conditions:
(a) You must give any other recipients of the Work or
Derivative Works a copy of this License; and
(b) You must cause any modified files to carry prominent notices
stating that You changed the files; and
(c) You must retain, in the Source form of any Derivative Works
that You distribute, all copyright, patent, trademark, and
attribution notices from the Source form of the Work,
excluding those notices that do not pertain to any part of
the Derivative Works; and
(d) If the Work includes a "NOTICE" text file as part of its
distribution, then any Derivative Works that You distribute must
include a readable copy of the attribution notices contained
within such NOTICE file, excluding those notices that do not
pertain to any part of the Derivative Works, in at least one
of the following places: within a NOTICE text file distributed
as part of the Derivative Works; within the Source form or
documentation, if provided along with the Derivative Works; or,
within a display generated by the Derivative Works, if and
wherever such third-party notices normally appear. The contents
of the NOTICE file are for informational purposes only and
do not modify the License. You may add Your own attribution
notices within Derivative Works that You distribute, alongside
or as an addendum to the NOTICE text from the Work, provided
that such additional attribution notices cannot be construed
as modifying the License.
You may add Your own copyright statement to Your modifications and
may provide additional or different license terms and conditions
for use, reproduction, or distribution of Your modifications, or
for any such Derivative Works as a whole, provided Your use,
reproduction, and distribution of the Work otherwise complies with
the conditions stated in this License.
5. Submission of Contributions. Unless You explicitly state otherwise,
any Contribution intentionally submitted for inclusion in the Work
by You to the Licensor shall be under the terms and conditions of
this License, without any additional terms or conditions.
Notwithstanding the above, nothing herein shall supersede or modify
the terms of any separate license agreement you may have executed
with Licensor regarding such Contributions.
6. Trademarks. This License does not grant permission to use the trade
names, trademarks, service marks, or product names of the Licensor,
except as required for reasonable and customary use in describing the
origin of the Work and reproducing the content of the NOTICE file.
7. Disclaimer of Warranty. Unless required by applicable law or
agreed to in writing, Licensor provides the Work (and each
Contributor provides its Contributions) on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
implied, including, without limitation, any warranties or conditions
of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
PARTICULAR PURPOSE. You are solely responsible for determining the
appropriateness of using or redistributing the Work and assume any
risks associated with Your exercise of permissions under this License.
8. Limitation of Liability. In no event and under no legal theory,
whether in tort (including negligence), contract, or otherwise,
unless required by applicable law (such as deliberate and grossly
negligent acts) or agreed to in writing, shall any Contributor be
liable to You for damages, including any direct, indirect, special,
incidental, or consequential damages of any character arising as a
result of this License or out of the use or inability to use the
Work (including but not limited to damages for loss of goodwill,
work stoppage, computer failure or malfunction, or any and all
other commercial damages or losses), even if such Contributor
has been advised of the possibility of such damages.
9. Accepting Warranty or Additional Liability. While redistributing
the Work or Derivative Works thereof, You may choose to offer,
and charge a fee for, acceptance of support, warranty, indemnity,
or other liability obligations and/or rights consistent with this
License. However, in accepting such obligations, You may act only
on Your own behalf and on Your sole responsibility, not on behalf
of any other Contributor, and only if You agree to indemnify,
defend, and hold each Contributor harmless for any liability
incurred by, or claims asserted against, such Contributor by reason
of your accepting any such warranty or additional liability.
END OF TERMS AND CONDITIONS

View File

@@ -0,0 +1,42 @@
---
name: frontend-design
description: Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
license: Complete terms in LICENSE.txt
---
This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.
The user provides frontend requirements: a component, page, application, or interface to build. They may include context about the purpose, audience, or technical constraints.
## Design Thinking
Before coding, understand the context and commit to a BOLD aesthetic direction:
- **Purpose**: What problem does this interface solve? Who uses it?
- **Tone**: Pick an extreme: brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian, etc. There are so many flavors to choose from. Use these for inspiration but design one that is true to the aesthetic direction.
- **Constraints**: Technical requirements (framework, performance, accessibility).
- **Differentiation**: What makes this UNFORGETTABLE? What's the one thing someone will remember?
**CRITICAL**: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work - the key is intentionality, not intensity.
Then implement working code (HTML/CSS/JS, React, Vue, etc.) that is:
- Production-grade and functional
- Visually striking and memorable
- Cohesive with a clear aesthetic point-of-view
- Meticulously refined in every detail
## Frontend Aesthetics Guidelines
Focus on:
- **Typography**: Choose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial and Inter; opt instead for distinctive choices that elevate the frontend's aesthetics; unexpected, characterful font choices. Pair a distinctive display font with a refined body font.
- **Color & Theme**: Commit to a cohesive aesthetic. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid, evenly-distributed palettes.
- **Motion**: Use animations for effects and micro-interactions. Prioritize CSS-only solutions for HTML. Use Motion library for React when available. Focus on high-impact moments: one well-orchestrated page load with staggered reveals (animation-delay) creates more delight than scattered micro-interactions. Use scroll-triggering and hover states that surprise.
- **Spatial Composition**: Unexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking elements. Generous negative space OR controlled density.
- **Backgrounds & Visual Details**: Create atmosphere and depth rather than defaulting to solid colors. Add contextual effects and textures that match the overall aesthetic. Apply creative forms like gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders, custom cursors, and grain overlays.
NEVER use generic AI-generated aesthetics like overused font families (Inter, Roboto, Arial, system fonts), cliched color schemes (particularly purple gradients on white backgrounds), predictable layouts and component patterns, and cookie-cutter design that lacks context-specific character.
Interpret creatively and make unexpected choices that feel genuinely designed for the context. No design should be the same. Vary between light and dark themes, different fonts, different aesthetics. NEVER converge on common choices (Space Grotesk, for example) across generations.
**IMPORTANT**: Match implementation complexity to the aesthetic vision. Maximalist designs need elaborate code with extensive animations and effects. Minimalist or refined designs need restraint, precision, and careful attention to spacing, typography, and subtle details. Elegance comes from executing the vision well.
Remember: Claude is capable of extraordinary creative work. Don't hold back, show what can truly be created when thinking outside the box and committing fully to a distinctive vision.

2
.gitignore vendored
View File

@@ -22,3 +22,5 @@ dist-ssr
*.sw? *.sw?
.env .env
/dist /dist
app.cloud/
public/content/

76
CLAUDE.md Normal file
View File

@@ -0,0 +1,76 @@
# CLAUDE.md
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
## Commands
```bash
# Development server
npm run dev
# Build
npm run build # production
npm run build:dev # development build (VITE_ENV=development)
npm run build:prod # production build (VITE_ENV=production)
# Type checking
npm run typecheck
# Linting
npm run lint
# Unit tests (vitest)
npm run test # run once
npm run test:watch # watch mode
# E2E tests (playwright)
npm run test:e2e
```
To run a single unit test file:
```bash
npx vitest run src/components/__tests__/AuthModal.test.tsx
```
## Architecture
### Provider Tree
`main.tsx` wraps everything in: `BrowserRouter → AuthProvider → LanguageProvider → AppRouter`
### Routing
Only two routes (`src/routes/AppRouter.tsx`):
- `/``App` (main app)
- `/auth/google/callback``AuthCallbackPage` (Google OAuth callback handler)
### Auth System
- **`AuthContext.tsx`** — React context providing `signIn`, `signUp`, `beginGoogleOAuth`, `completeGoogleOAuth`, `signOut`. Uses `useReducer` with `authMachine.ts`.
- **`authMachine.ts`** — Pure reducer + state types (`AuthPhase`, `AuthState`, `AuthAction`). No side effects — all async logic lives in `AuthContext`.
- **`authService.ts`** — Calls backend API for login/register/Google OAuth/user info. Decodes JWT payload client-side to extract `UserInfo`. Handles session restore from `localStorage`.
- **`lib/api.ts`** — `http` client wrapper with `tokenManager` (stores JWT in `localStorage` under key `texpixel_token`). Adds `Authorization` header automatically. Throws `ApiError` for non-success business codes.
### Environment / API
- **`src/config/env.ts`** — Switches API base URL based on `VITE_ENV` env var:
- `development`: `https://cloud.texpixel.com:10443/doc_ai/v1`
- `production`: `https://api.texpixel.com/doc_ai/v1`
- The API uses a custom response envelope: `{ request_id, code, message, data }`. Success is `code === 200` (some endpoints also accept `0`).
### Main App Flow (`App.tsx`)
Three-panel layout: `LeftSidebar | FilePreview | ResultPanel`
Core data flow:
1. On auth, `loadFiles()` fetches paginated task history from `/task/list`
2. File upload goes: compute MD5 → get OSS pre-signed URL (`/oss/signature_url`) → PUT to OSS → create task (`/formula/recognition`) → poll every 2s for result
3. Results cached in `resultsCache` ref (keyed by `task_id`) to avoid redundant API calls
4. Guest users get 3 free uploads tracked via `localStorage` (`texpixel_guest_usage_count`)
### Internationalization
`LanguageContext.tsx` supports `en` / `zh`. Language is auto-detected via IP (`lib/ipLocation.ts`) on first visit, persisted to `localStorage` on manual switch. All UI strings come from `lib/translations.ts` via `const { t } = useLanguage()`.
### Key Type Definitions
- `src/types/api.ts` — All API request/response types, `TaskStatus` enum, `ApiErrorCode` enum, `ApiErrorMessages` map
- `src/types/index.ts` — Internal app types (`FileRecord`, `RecognitionResult`)
### Tests
- Unit tests: `src/components/__tests__/` and `src/contexts/__tests__/`, run with vitest + jsdom + `@testing-library/react`
- E2E tests: `e2e/` directory, run with Playwright
- Setup file: `src/test/setup.ts`

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@@ -1,44 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>⚡️ TexPixel - 公式识别工具</title>
<!-- SEO Meta Tags -->
<meta name="description" content="在线公式识别工具,支持印刷体和手写体数学公式识别,快速准确地将图片中的数学公式转换为可编辑文本。" />
<meta name="keywords"
content="公式识别,数学公式,OCR,手写公式识别,印刷体识别,AI识别,数学工具,免费,handwriting,formula,recognition,ocr,handwriting,recognition,math,handwriting,free" />
<meta name="author" content="TexPixel Team" />
<meta name="robots" content="index, follow" />
<!-- Open Graph Meta Tags -->
<meta property="og:title" content="TexPixel - 公式识别工具" />
<meta property="og:description" content="在线公式识别工具,支持印刷体和手写体数学公式识别,快速准确地将图片中的数学公式转换为可编辑文本。" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://texpixel.com/" />
<meta property="og:image" content="https://cdn.texpixel.com/public/logo.png?x-oss-process=image/resize,w_600" />
<!-- Twitter Card Meta Tags -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="TexPixel - 公式识别工具" />
<meta name="twitter:description" content="在线公式识别工具,支持印刷体和手写体数学公式识别。" />
<meta name="twitter:image" content="https://cdn.texpixel.com/public/logo.png?x-oss-process=image/resize,w_600" />
<!-- baidu -->
<meta name="baidu-site-verification" content="codeva-8zU93DeGgH" />
<script type="module" crossorigin src="/assets/index-NjWMZQkP.js"></script>
<link rel="modulepreload" crossorigin href="/assets/vendor-react-C6WG4Va-.js">
<link rel="modulepreload" crossorigin href="/assets/vendor-katex-p018AHG0.js">
<link rel="modulepreload" crossorigin href="/assets/vendor-markdown-C0b4qDwm.js">
<link rel="stylesheet" crossorigin href="/assets/index-DKZ56yfB.css">
</head>
<body>
<div id="root"></div>
</body>
</html>

View File

@@ -0,0 +1,51 @@
---
title: "How AI Reads Math: Inside TexPixel's Recognition Engine"
description: A plain-English explanation of how TexPixel turns a photo of a formula into clean LaTeX code
slug: how-ai-reads-math
date: 2026-01-15
tags: [explainer, technology]
---
# How AI Reads Math: Inside TexPixel's Recognition Engine
When you upload a photo of a handwritten integral and get back clean LaTeX in under a second, it feels like magic. It's not — but the engineering behind it is genuinely interesting. Here's a plain-English explanation of how TexPixel turns pixels into math.
## Step 1: Image Preprocessing
Before any recognition happens, the image is cleaned up. This step matters more than most people realize.
TexPixel normalizes contrast, removes noise, deskews tilted images, and isolates the formula region from surrounding whitespace, printed text, or ruled lines. A formula photographed under harsh side-lighting — or scanned at a slight angle — is corrected before the model ever sees it.
This is why image quality affects accuracy so much: preprocessing can compensate for minor flaws, but severe blur or extremely low resolution (below ~72 DPI) leaves too little information to work with.
## Step 2: Symbol Detection
The preprocessed image is fed into a visual encoder — a neural network that has learned, from millions of math images, what mathematical symbols look like.
The key challenge here isn't recognizing individual symbols in isolation. It's recognizing them *in context*. The symbol `x` looks different when it's a variable, when it's a multiplication sign, and when it's written in different handwriting styles. The model learns to distinguish these from surrounding context: is there a dot nearby? What's the vertical position relative to a fraction bar?
This contextual understanding is what separates a good math OCR system from a general-purpose character recognizer.
## Step 3: Structure Parsing
Recognizing symbols is only half the problem. Math is two-dimensional in a way that ordinary text is not. A fraction has a numerator above a denominator. An integral has limits at the top and bottom. A matrix arranges expressions in rows and columns.
TexPixel's parser builds a structural tree from the detected symbols — understanding that this expression is a subscript of that symbol, and that expression lives inside a square root. This tree is then serialized into LaTeX, where the structural relationships are encoded as commands like `\frac{}{}`, `\sqrt{}`, `\sum_{}^{}`.
## Step 4: LaTeX Generation
The final step is walking the structural tree and emitting valid LaTeX. This includes choosing the right command for ambiguous cases — for example, whether a large `Σ` should be rendered as `\sum` (display math) or `\Sigma` (inline), based on context.
The output is then validated to ensure it compiles without errors before being returned.
## Why Handwriting Is Harder Than Print
Printed math (from textbooks or PDFs) has consistent, high-contrast strokes. Handwriting varies enormously — in size, slant, stroke weight, and letter formation. Two people's handwritten `7` and `1` can look nearly identical, and two people's `β` can look completely different.
TexPixel's model was trained on a large, diverse dataset of handwritten math to handle this variation. But accuracy on handwriting is always lower than on print — typically 8895% vs. 9599%. The [tips in our handwriting guide](/blog/handwriting-tips) can push that toward the upper end.
## The Whole Pipeline in One Second
Preprocessing → symbol detection → structure parsing → LaTeX generation: all of this runs in under a second. It's a well-engineered pipeline, not magic — but the speed still surprises most people the first time they try it.
[Upload a formula and see it in action →](/app)

View File

@@ -0,0 +1,73 @@
---
title: "From Whiteboard to LaTeX in 3 Seconds: A Student's Workflow"
description: How students use TexPixel to turn lecture notes and homework into clean digital documents without retyping a single formula
slug: student-workflow
date: 2026-02-01
tags: [tutorial, workflow, students]
---
# From Whiteboard to LaTeX in 3 Seconds: A Student's Workflow
If you've ever spent 20 minutes wrestling with `\underbrace`, `\overset`, or a nested fraction in LaTeX just to transcribe something your professor wrote in 10 seconds on a whiteboard — this workflow is for you.
## The Problem With Retyping
Retyping formulas by hand is slow, error-prone, and interrupts the flow of note-taking. A single misplaced brace breaks compilation. A wrong symbol — `\mu` instead of `\upsilon`, say — can change the meaning entirely. And some constructs, like large piecewise functions or multi-line aligned systems, take real LaTeX expertise to format correctly.
TexPixel removes all of this friction.
## The Workflow
### During the Lecture
Photograph each formula as it appears on the board. Don't worry about perfect framing — a quick phone shot is fine. A 150+ DPI photo taken under decent lighting gives TexPixel everything it needs.
You don't have to process anything during class. Just build up a folder of photos.
### After Class
1. Open TexPixel. Drag and drop the first photo.
2. In under a second, you get LaTeX output — paste it directly into your Overleaf document or VS Code `.tex` file.
3. Repeat for each formula.
For a typical lecture with 1015 formulas, this takes about 2 minutes. Compare that to 2030 minutes of manual retyping.
### For Homework
When working through problem sets:
1. Solve the problem on paper as you normally would.
2. Take a photo of your work.
3. Upload to TexPixel to extract the key formulas.
4. Paste into your write-up.
This is especially useful for multi-step derivations where you want to show your work digitally.
## Exporting to Word
Not using LaTeX? If your professor requires Word submissions, use TexPixel's DOCX export. It produces native Word equations — not images — so you can still edit them in Word's equation editor after exporting.
## A Real Example
Here's a typical formula from a linear algebra lecture:
$$A = U \Sigma V^T$$
Manual LaTeX: `A = U \Sigma V^T` — straightforward, but you need to know `\Sigma` and `V^T`.
With TexPixel: photograph it, get `A = U \Sigma V^T` in one second, paste. For more complex expressions — a full SVD decomposition with summation notation and indexed entries — the time savings are even more dramatic.
## Tips for Lecture Photography
- **Position yourself centrally** — formulas at the edges of the board get distorted by perspective
- **Wait for the professor to finish writing** — partial formulas confuse the parser
- **Avoid flash** — it creates glare and washes out chalk or whiteboard markers
- **Crop if needed** — if a photo contains multiple formulas, crop before uploading
## Building a Formula Library
Over a semester, you'll accumulate dozens of recognized formulas. Consider organizing them: paste each into a reference `.tex` file with a short comment. By exam time, you'll have a searchable personal formula sheet that took almost no effort to build.
**See also:** For supported file types, size limits, and copy options, see the [Image to LaTeX documentation →](/docs/image-to-latex)
[Start digitizing your notes →](/app)

View File

@@ -0,0 +1,53 @@
---
title: "I Tried to Extract Formulas from My Professor's PDF. Here's What I Learned."
description: A real-world account of what goes wrong with PDF formula extraction — and why most problems come down to one of three root causes
slug: pdf-formula-issues
date: 2026-02-15
tags: [troubleshooting, PDF]
---
# I Tried to Extract Formulas from My Professor's PDF. Here's What I Learned.
Last semester I was working through a 200-page lecture notes PDF — the kind that gets scanned from printed transparencies, emailed as a file attachment, and opens with a slightly-off angle on every page. I wanted to pull the key equations into my own notes. What followed was an education in how PDFs actually store (or don't store) mathematical content.
## The First Surprise: Not All PDFs Are the Same
I naively assumed "PDF with formulas" meant "formulas I can extract." Not true.
There are at least three fundamentally different kinds of PDFs floating around in academic circles, and they behave completely differently:
**Born-digital PDFs** (generated from LaTeX, Word, or typesetting software) contain actual vector math. Extraction from these is fast and 95%+ accurate — the formula structure is essentially already there.
**Scanned PDFs** are just photographs of printed pages packaged into a container. There's no text layer. Extraction works through image recognition, and accuracy depends entirely on scan quality. My professor's notes were this kind.
**Hybrid PDFs** have a text layer added by OCR software after scanning. Quality varies wildly — sometimes great, sometimes the "text" layer is completely wrong. These are the most unpredictable.
## The Three Root Causes of Most Failures
After a lot of trial and error, I found that failed extractions almost always come back to one of three things:
**1. Resolution.** The scan was done at 150 DPI instead of 300. At low resolution, small symbols — subscripts, primes, dots — become a few pixels wide. The model can't reliably distinguish `\prime` from a stray speck. Rescanning at 300 DPI fixed more than half my problems.
**2. Encryption.** Some PDFs are password-protected or have content restrictions that prevent any tool from reading the content stream. The PDF appears to open fine, but nothing can extract from it. Removing the password (File → Export as PDF in Preview, without the password lock) solved this.
**3. Formulas stored as vector paths.** Some PDF generators draw equations as shapes rather than encoding them as characters. To any extraction tool, these formulas are invisible — just abstract geometry. The only way around this is to render the page as an image and run visual recognition on that instead.
## What Actually Worked
For my professor's scanned notes, the workflow that worked:
1. Export each page as a 300 DPI PNG using Preview
2. Upload the PNG to TexPixel
3. Get clean LaTeX back in under a second
Not the direct-PDF workflow I was hoping for, but reliable. The image-based pipeline doesn't care whether the original was scanned or born-digital — it just sees pixels and reads the math.
## The Bigger Lesson
PDF is a presentation format, not a data format. It's optimized for how things look, not for what they mean. Mathematical notation in particular gets mangled in transit — rendered, rasterized, path-converted — in ways that destroy the underlying structure.
The most reliable signal is always the image. When in doubt, export to PNG and let visual recognition do the work.
---
For a systematic reference on PDF types, file limits, and what TexPixel can handle, see the [PDF Extraction documentation →](/docs/pdf-extraction)

View File

@@ -0,0 +1,84 @@
---
title: "Digitizing a Decade of Research Notes with TexPixel"
description: How researchers use TexPixel to convert years of handwritten math into searchable, editable LaTeX documents
slug: researcher-workflow
date: 2026-03-08
tags: [workflow, research, tutorial]
---
# Digitizing a Decade of Research Notes with TexPixel
Researchers accumulate notebooks. Derivations sketched out at conferences, margin notes on printed papers, whiteboard captures from group meetings, half-finished proofs from 3 AM. For most of history, this material was effectively unsearchable — trapped in physical form, accessible only by paging through stacks of notebooks.
TexPixel changes the equation (so to speak).
## The Scope of the Problem
A typical active researcher might accumulate 510 filled notebooks per year, each containing hundreds of equations. Digitizing this by hand — retyping each formula in LaTeX — is essentially impossible. At 3 minutes per formula and 50 formulas per notebook, one year's worth of notes would take over 400 hours to transcribe manually.
With TexPixel, each formula takes under 5 seconds from photo to LaTeX. The same year's worth of notes: under 7 hours.
## A Practical Digitization Workflow
### Step 1: Photograph the Notebooks
Use a phone with a good camera and a document scanner app (Adobe Scan, Microsoft Lens, or Apple's built-in document scanner). These apps:
- Automatically detect page edges
- Correct perspective distortion
- Apply contrast enhancement for faded ink or pencil
- Export to PDF
Scan a full notebook in 1520 minutes.
### Step 2: Identify Formula-Dense Pages
Not every page needs digitizing. Quickly flip through and flag pages with equations you'll actually need. A single key derivation or set of equations is often worth digitizing even if the surrounding text isn't.
### Step 3: Batch Process with TexPixel
For each flagged page:
1. Export the page or crop area as a PNG
2. Upload to TexPixel
3. Copy the LaTeX output into your notes
For formula-dense pages, consider cropping individual formulas rather than uploading the full page — this gives more accurate results and cleaner output.
### Step 4: Organize into a Reference Document
Create a `.tex` document (or Overleaf project) structured by topic. Paste each extracted formula with a brief comment about its context:
```latex
% Variational lower bound — from 2022 NeurIPS derivation
\mathcal{L}(\theta, \phi) = \mathbb{E}_{q_\phi(z|x)}\left[\log p_\theta(x|z)\right] - D_{KL}(q_\phi(z|x) \| p(z))
```
After a few sessions, you'll have a searchable, compilable reference document that took a fraction of the time of manual transcription.
## Working with Whiteboards
Conference room whiteboards are particularly valuable targets. A single group meeting might produce 2030 key equations that would otherwise be lost when someone erases the board.
**Best practice:** Photograph the whiteboard before it's erased (obvious) but also photograph intermediate steps — derivations that get overwritten as the discussion progresses. The intermediate steps are often where the insight lives.
For whiteboards:
- Photograph straight-on, not at an angle
- Use even lighting — a photo taken with the lights on and no flash usually works better than using flash, which creates glare on glossy boards
- Crop each distinct equation before uploading
## Working with Printed Papers
For annotated printed papers, TexPixel can extract both the printed formulas and (with somewhat lower accuracy) handwritten margin notes. Crop tightly to the region you need, and upload each formula separately from its annotations.
## Building a Long-Term Knowledge Base
The real value of digitization compounds over time. A well-organized LaTeX reference document from 5 years of notes is something you can:
- Search with `grep` or your editor's search
- Cross-reference with a citation manager
- Share with collaborators
- Build on directly when writing new papers
Start with the past year's notebooks. The 7-hour investment pays dividends for years.
**See also:** For PDF file limits, supported types, and export options, see the [PDF Extraction documentation →](/docs/pdf-extraction)
[Start digitizing your notes →](/app)

View File

@@ -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.

View File

@@ -0,0 +1,47 @@
---
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.
**See also:** For a systematic breakdown of what affects accuracy (DPI, contrast, formula complexity), see the [OCR Accuracy documentation →](/docs/ocr-accuracy)

View File

@@ -0,0 +1,26 @@
---
title: Introducing TexPixel
description: Meet TexPixel — your AI-powered formula recognition tool
slug: introducing-texpixel
date: 2026-03-25
tags: [announcement, product]
---
# Introducing TexPixel
We're excited to announce TexPixel, an AI-powered tool for converting math formulas from images into editable formats.
## Why TexPixel?
Converting handwritten or printed math formulas into digital formats has always been a tedious process. TexPixel makes it effortless — just upload an image and get LaTeX, MathML, or Markdown output in seconds.
## Key Features
- **High accuracy** — Powered by advanced AI models
- **Multiple output formats** — LaTeX, MathML, Markdown, Word
- **Easy to use** — No installation required, works in your browser
- **Free to start** — 3 free uploads per day, no credit card needed
## What's Next
We're working on exciting new features including batch processing, API access, and more. Stay tuned!

View File

@@ -0,0 +1,51 @@
---
title: "AI 如何读懂数学TexPixel 识别引擎揭秘"
description: 用通俗语言解释 TexPixel 如何将公式照片转换为干净的 LaTeX 代码
slug: how-ai-reads-math
date: 2026-01-15
tags: [技术, 原理]
---
# AI 如何读懂数学TexPixel 识别引擎揭秘
当你上传一张手写积分式的照片,不到一秒就得到了干净的 LaTeX——这感觉像魔法。其实不是但背后的工程确实很有意思。下面用通俗的语言解释 TexPixel 如何将像素转化为数学公式。
## 第一步:图像预处理
识别开始之前,图像会先被清理。这一步的重要性远超大多数人的预期。
TexPixel 会标准化对比度、去除噪点、矫正倾斜图像,并从周围的空白、印刷文字或横线中分离出公式区域。在强侧光下拍摄、或略微倾斜扫描的公式,在模型看到之前就已经被纠正了。
这就是图像质量如此影响准确率的原因:预处理可以弥补轻微的缺陷,但严重的模糊或极低分辨率(低于约 72 DPI留下的信息太少无法有效处理。
## 第二步:符号检测
预处理后的图像被输入视觉编码器——一个从数百万张数学图像中学习数学符号形态的神经网络。
这里的核心挑战不是孤立地识别单个符号,而是在**上下文中**识别它们。`x` 作为变量、作为乘号、以及以不同笔迹书写时,看起来各不相同。模型通过周围上下文来区分这些情况:附近有没有点?与分数线的垂直位置如何?
这种上下文理解,正是优秀数学 OCR 系统与通用字符识别器的本质区别。
## 第三步:结构解析
识别符号只是解决了一半的问题。数学是二维的,这是普通文字所没有的特性。分数有分子在上、分母在下;积分有上下限;矩阵将表达式排列成行和列。
TexPixel 的解析器从检测到的符号中构建结构树——理解这个表达式是那个符号的下标,那个表达式在根号内。然后将这棵树序列化为 LaTeX其中结构关系被编码为 `\frac{}{}``\sqrt{}``\sum_{}^{}` 等命令。
## 第四步LaTeX 生成
最后一步是遍历结构树并生成有效的 LaTeX。这包括处理歧义情况——例如根据上下文判断一个大写 `Σ` 应该渲染为 `\sum`(行间数学模式)还是 `\Sigma`(行内)。
输出结果在返回之前会经过验证,确保编译无误。
## 为什么手写比印刷体难
印刷数学(来自教材或 PDF笔画一致、对比度高。手写则变化极大——大小、倾斜度、笔画粗细和字母形态各异。两个人写的 `7``1` 可能几乎一样,而两个人写的 `β` 可能截然不同。
TexPixel 的模型在大量多样化的手写数学数据集上训练,以应对这种变化。但手写的准确率始终低于印刷体——通常为 8895% 对比 9599%。[手写技巧指南](/blog/handwriting-tips)中的建议可以将准确率推向上限。
## 整个流程在一秒内完成
预处理 → 符号检测 → 结构解析 → LaTeX 生成:所有这些在不到一秒内完成。这是精心设计的流水线,不是魔法——但第一次尝试时的速度仍然会让大多数人感到惊讶。
[上传公式,亲身体验 →](/app)

View File

@@ -0,0 +1,73 @@
---
title: "3 秒从白板到 LaTeX学生的高效工作流"
description: 如何用 TexPixel 把课堂笔记和作业变成干净的数字文档,无需手动输入一个公式
slug: student-workflow
date: 2026-02-01
tags: [教程, 工作流, 学生]
---
# 3 秒从白板到 LaTeX学生的高效工作流
如果你曾经为了把教授在黑板上 10 秒内写完的东西,花了 20 分钟和 `\underbrace``\overset` 或嵌套分数搏斗——这个工作流就是为你准备的。
## 手动录入的问题
手动重新输入公式既慢又容易出错,还会打断记笔记的节奏。一个错位的花括号就能导致编译失败。一个错误的符号——比如 `\mu` 写成 `\upsilon`——可能完全改变含义。某些结构,比如大型分段函数或多行对齐方程组,需要真正的 LaTeX 专业知识才能正确格式化。
TexPixel 消除了所有这些摩擦。
## 工作流程
### 上课时
每当公式出现在黑板上,拍一张照片。不用担心取景是否完美——手机随手拍就够了。在合适的光线下拍摄的 150+ DPI 照片,已经足够让 TexPixel 完成识别。
课上不需要处理任何东西,只需积累一个照片文件夹。
### 课后
1. 打开 TexPixel把第一张照片拖进去
2. 不到一秒,得到 LaTeX 输出——直接粘贴到 Overleaf 文档或 VS Code 的 `.tex` 文件中
3. 对每张公式照片重复此操作
一节课有 1015 个公式,整个过程约 2 分钟。相比手动录入的 2030 分钟,差距显著。
### 做作业时
在解题过程中:
1. 像平时一样在纸上解题
2. 拍下解题过程的照片
3. 用 TexPixel 提取关键公式
4. 粘贴到作业文档中
这对于需要展示推导过程的多步推导尤其实用。
## 导出到 Word
不用 LaTeX如果教授要求提交 Word 文档,使用 TexPixel 的 DOCX 导出功能。它生成的是原生 Word 方程式——不是图片——导出后仍然可以在 Word 的方程式编辑器中编辑。
## 实际例子
线性代数课上的一个典型公式:
$$A = U \Sigma V^T$$
手动 LaTeX`A = U \Sigma V^T`——算简单,但你需要知道 `\Sigma``V^T` 的写法。
用 TexPixel拍照一秒得到 `A = U \Sigma V^T`,粘贴。对于更复杂的表达式——带求和符号和下标的完整 SVD 分解——节省的时间更为显著。
## 课堂拍照技巧
- **站在正中间**——边角的公式会因透视产生畸变
- **等教授写完再拍**——不完整的公式会干扰解析器
- **不要用闪光灯**——会产生眩光,冲淡粉笔或白板笔
- **需要时裁剪**——如果一张照片包含多个公式,上传前先裁剪
## 建立公式库
一个学期下来,你会积累几十个识别出的公式。不妨整理一下:将每个公式粘贴到一个参考 `.tex` 文件中,加上简短注释。期末时,你将拥有一份几乎不费力气就建立起来的、可搜索的个人公式表。
**参考文档:** 关于支持的文件类型、大小限制和复制选项,请查看 [图片转 LaTeX 文档 →](/docs/image-to-latex)
[开始数字化你的笔记 →](/app)

View File

@@ -0,0 +1,53 @@
---
title: "我试着从教授的 PDF 里提取公式,结果学到了这些"
description: 一次真实的 PDF 公式提取经历——以及为什么大多数问题都归结为三个根本原因
slug: pdf-formula-issues
date: 2026-02-15
tags: [故障排查, PDF]
---
# 我试着从教授的 PDF 里提取公式,结果学到了这些
上学期我在啃一份 200 页的讲义 PDF——那种从印刷胶片扫描而来、作为附件发出来、每页都略微倾斜的类型。我想把关键方程提取到自己的笔记里。接下来发生的事让我深刻理解了 PDF 究竟是怎么存储(或者说不存储)数学内容的。
## 第一个意外:不是所有 PDF 都一样
我天真地以为"有公式的 PDF"就意味着"可以提取的公式"。并非如此。
学术圈里流传着至少三种根本不同的 PDF它们的行为完全不同
**数字原生 PDF**(由 LaTeX、Word 或排版软件生成)包含真正的矢量数学内容。从这类 PDF 提取速度快、准确率 95% 以上——公式结构本质上已经在那里了。
**扫描 PDF** 只是打印页面的照片,被包装进一个容器。没有文字层。提取依赖图像识别,准确率完全取决于扫描质量。教授的讲义就是这种。
**混合 PDF** 是扫描后由 OCR 软件添加文字层的 PDF。质量参差不齐——有时很好有时"文字层"完全是错的。这类 PDF 最难预测。
## 大多数失败的三个根本原因
经过大量尝试和失败,我发现提取失败几乎总是归结为以下三种情况之一:
**1. 分辨率。** 扫描时用了 150 DPI 而不是 300 DPI。低分辨率下小符号——下标、撇号、点——只有几个像素宽。模型无法可靠区分 `\prime` 和一个杂散的污点。提高到 300 DPI 重新扫描,解决了一半以上的问题。
**2. 加密。** 部分 PDF 有密码保护或内容限制阻止任何工具读取内容流。PDF 看起来打开正常,但没有工具能从中提取。移除密码(在 Preview 中选择"文件 → 导出为 PDF",不勾选密码锁)解决了这个问题。
**3. 公式存储为矢量路径。** 部分 PDF 生成器将方程绘制为图形而非编码为字符。对任何提取工具来说,这些公式是隐形的——只是抽象的几何图形。唯一的办法是将页面渲染为图像,然后对图像进行视觉识别。
## 最终有效的方法
对于教授的扫描讲义,有效的工作流是:
1. 用 Preview 将每页导出为 300 DPI PNG
2. 将 PNG 上传到 TexPixel
3. 不到一秒得到干净的 LaTeX
不是我期望的直接处理 PDF 的工作流,但很可靠。图像识别流程不在乎原文件是扫描的还是数字原生的——它只看像素,读取数学内容。
## 更大的启示
PDF 是展示格式,不是数据格式。它针对外观进行了优化,而不是含义。数学符号在传输过程中尤其容易被损坏——渲染、光栅化、路径转换——以破坏底层结构的方式。
最可靠的信号永远是图像。如果不确定,导出为 PNG让视觉识别来完成工作。
---
关于 PDF 类型、文件限制以及 TexPixel 支持范围的系统性参考,请查看 [PDF 公式提取文档 →](/docs/pdf-extraction)

View File

@@ -0,0 +1,84 @@
---
title: "用 TexPixel 数字化十年科研笔记"
description: 研究人员如何用 TexPixel 将多年手写数学笔记转换为可搜索、可编辑的 LaTeX 文档
slug: researcher-workflow
date: 2026-03-08
tags: [工作流, 科研, 教程]
---
# 用 TexPixel 数字化十年科研笔记
研究人员会积累笔记本。会议上草拟的推导、印刷论文上的旁注、组会白板的拍照、凌晨三点写了一半的证明。在很长一段时间里,这些材料实际上是不可搜索的——被困在物理形态中,只能翻翻一叠叠笔记本才能找到。
TexPixel 改变了这个局面。
## 问题的规模
一个活跃的研究人员每年可能积累 510 本填满的笔记本,每本包含数百个方程式。手动数字化——逐个用 LaTeX 重新输入公式——几乎是不可能完成的任务。按每个公式 3 分钟、每本 50 个公式计算,一年的笔记需要 400 多小时才能手动转录。
用 TexPixel每个公式从拍照到 LaTeX 不到 5 秒。同样一年的笔记:不到 7 小时。
## 实用数字化工作流
### 第一步:拍摄笔记本
使用摄像头好的手机和文档扫描 AppAdobe Scan、Microsoft Lens 或 Apple 内置文档扫描仪)。这些 App 能够:
- 自动检测页面边缘
- 校正透视畸变
- 对褪色墨水或铅笔字迹进行对比度增强
- 导出为 PDF
扫描一整本笔记本需要 1520 分钟。
### 第二步:确定公式密集的页面
不是每页都需要数字化。快速翻阅并标记包含你实际需要的方程式的页面。即使周围的文字不需要,一个关键推导或一组方程式往往也值得数字化。
### 第三步:用 TexPixel 批量处理
对每个标记的页面:
1. 将页面或裁剪区域导出为 PNG
2. 上传到 TexPixel
3. 将 LaTeX 输出复制到笔记中
对于公式密集的页面,建议裁剪单个公式而不是上传整页——这能获得更准确的结果和更干净的输出。
### 第四步:整理到参考文档
创建一个按主题组织的 `.tex` 文档(或 Overleaf 项目)。将每个提取的公式粘贴进去,附上简短的上下文说明:
```latex
% 变分下界——来自 2022 NeurIPS 推导
\mathcal{L}(\theta, \phi) = \mathbb{E}_{q_\phi(z|x)}\left[\log p_\theta(x|z)\right] - D_{KL}(q_\phi(z|x) \| p(z))
```
几次整理之后,你将拥有一份可搜索、可编译的参考文档,所用时间只是手动转录的零头。
## 处理白板
会议室白板是特别有价值的目标。一次组会可能产生 2030 个关键方程式,否则随着有人擦掉白板就消失了。
**最佳实践:** 在擦板前拍照(显而易见),但也要拍摄中间步骤——讨论推进过程中被覆盖的推导。中间步骤往往才是洞见所在。
白板拍摄注意事项:
- 正对白板拍摄,不要斜着拍
- 使用均匀光线——开灯不用闪光灯通常比用闪光灯更好,闪光灯会在光滑白板上产生眩光
- 上传前将各个公式分别裁剪
## 处理印刷论文
对于有批注的印刷论文TexPixel 可以提取印刷公式,也可以(以略低的准确率)识别手写旁注。紧密裁剪到需要的区域,将公式与旁注分开上传。
## 建立长期知识库
数字化的真正价值随时间复利增长。5 年笔记整理出的结构良好的 LaTeX 参考文档,你可以:
-`grep` 或编辑器搜索功能检索
- 与引用管理器交叉引用
- 与合作者共享
- 写新论文时直接在此基础上构建
从过去一年的笔记本开始。7 小时的投入,将带来多年的回报。
**参考文档:** 关于 PDF 文件限制、支持类型和导出选项,请查看 [PDF 公式提取文档 →](/docs/pdf-extraction)
[开始数字化你的笔记 →](/app)

View File

@@ -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 和图片之间自由切换。

View File

@@ -0,0 +1,47 @@
---
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% 以上。
**参考文档:** 关于影响准确率的系统性分析(分辨率、对比度、公式复杂度),请查看 [识别准确率文档 →](/docs/ocr-accuracy)

View File

@@ -0,0 +1,26 @@
---
title: TexPixel 介绍
description: 认识 TexPixel — 你的 AI 公式识别工具
slug: introducing-texpixel
date: 2026-03-25
tags: [公告, 产品]
---
# TexPixel 介绍
我们很高兴推出 TexPixel一款 AI 驱动的数学公式识别工具,可以将图片中的公式转换为可编辑的格式。
## 为什么选择 TexPixel
将手写或印刷体数学公式转换为数字格式一直是一个繁琐的过程。TexPixel 让这一切变得轻松 — 只需上传图片,即可在几秒内获得 LaTeX、MathML 或 Markdown 输出。
## 核心功能
- **高精度** — 由先进的 AI 模型驱动
- **多种输出格式** — LaTeX、MathML、Markdown、Word
- **易于使用** — 无需安装,浏览器即可使用
- **免费开始** — 每日 3 次免费上传,无需信用卡
## 接下来
我们正在开发更多令人兴奋的新功能包括批量处理、API 访问等。敬请期待!

View File

@@ -0,0 +1,68 @@
---
title: Copy to Word
description: Export recognized formulas directly into Microsoft Word as editable equations
slug: copy-to-word
date: 2026-03-25
tags: [export, Word, DOCX]
order: 4
---
# Copy to Word
TexPixel can export your recognized formulas directly into Microsoft Word as native, editable equations — not images. This means you can continue editing the formula inside Word after export.
## How to Export to Word
1. Upload your formula image and wait for recognition to complete.
2. Click the **Export** button in the result panel.
3. Select **DOCX** from the file export options.
4. Download the file and open it in Microsoft Word.
The downloaded `.docx` file contains your formula as a native Word equation (OMML format), which Word renders using its built-in equation editor.
## Why Use DOCX Export?
| Method | Editable in Word | Renders Correctly | Copy-Paste |
|---|---|---|---|
| Screenshot / image | No | Yes | No |
| LaTeX string | No (without plugin) | No | Yes |
| DOCX export | **Yes** | **Yes** | N/A |
The DOCX format is ideal when you need to:
- Submit homework or reports as Word documents
- Share formulas with colleagues who don't use LaTeX
- Continue editing the formula after export
## Inserting into an Existing Document
If you want to insert a formula into an existing Word document rather than starting fresh:
1. Open the downloaded `.docx` file in Word.
2. Select the equation and copy it (`Ctrl+C` / `Cmd+C`).
3. Paste it into your target document (`Ctrl+V` / `Cmd+V`).
Word preserves the equation formatting during paste.
## Mixed Content (Text + Formulas)
If your upload contains a mix of regular text and formulas (e.g., a textbook page), use DOCX export — it's the only format that handles mixed content correctly. LaTeX and MathML export are only available for pure-formula results.
> **Note:** For mixed-content results, LaTeX/MathML export is disabled. Use DOCX to get a properly formatted document with both text and equations.
## Compatibility
DOCX export is compatible with:
- Microsoft Word 2016 and later (Windows and Mac)
- Google Docs (equations render as images when imported)
- LibreOffice Writer (partial support)
## Tips
- After pasting into Word, double-click the equation to open the equation editor and make changes.
- If the formula looks different from expected, try re-uploading a higher-resolution image for a more accurate recognition result.
---
**Further reading:** [LaTeX vs MathML: Which Format Should You Use? →](/blog/latex-vs-mathml)
[Try exporting a formula to Word →](/app)

62
content/docs/en/faq.md Normal file
View File

@@ -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.

View File

@@ -0,0 +1,43 @@
---
title: Getting Started
description: Learn how to use TexPixel for formula recognition
slug: getting-started
date: 2026-03-25
tags: [tutorial, beginner]
order: 1
---
# Getting Started with TexPixel
TexPixel is an AI-powered math formula recognition tool that converts handwritten or printed formulas into LaTeX, MathML, and Markdown.
## Quick Start
1. **Upload** — Drag and drop an image or PDF containing math formulas
2. **Wait** — Our AI will process and recognize the formulas
3. **Export** — Copy the result or export in your preferred format
## Supported Formats
### Input
- Images: JPG, PNG
- Documents: PDF
### Output
- LaTeX
- MathML
- Markdown
- Word (DOCX)
- Image
## Example
Upload an image containing the quadratic formula, and TexPixel will output:
$$x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$$
## Tips
- For best results, ensure your formula images are clear and well-lit
- Handwritten formulas work best when written with dark ink on white paper
- PDF files can contain multiple pages — all formulas will be extracted

View File

@@ -0,0 +1,82 @@
---
title: Image to LaTeX
description: How to convert any formula image into clean LaTeX code with TexPixel
slug: image-to-latex
date: 2026-03-25
tags: [LaTeX, tutorial]
order: 2
---
# Image to LaTeX
TexPixel's core feature is converting formula images — from photos, scans, or screenshots — directly into LaTeX code you can paste anywhere.
## How It Works
1. **Upload your image** — Drag and drop a JPG or PNG into the upload zone, or click to browse. You can also paste from your clipboard.
2. **AI processes it** — Our model detects the formula region, runs OCR, and generates structured LaTeX in under a second.
3. **Copy the result** — Click the copy button next to the LaTeX output. Paste directly into Overleaf, VS Code, Word, or any LaTeX editor.
## Input Requirements
| Requirement | Details |
|---|---|
| File formats | JPG, PNG |
| Max file size | 10 MB |
| Recommended DPI | 150 DPI or higher |
| Background | White or light backgrounds work best |
## What Gets Recognized
TexPixel handles a wide range of mathematical content:
- **Algebra** — equations, inequalities, polynomials
- **Calculus** — derivatives, integrals, limits
- **Matrices** — 2×2 up to large arrays
- **Greek letters** — α, β, γ, Σ, Π, and more
- **Subscripts and superscripts** — `x_i^2`, `a_{n+1}`
- **Fractions** — `\frac{a}{b}`, nested fractions
- **Square roots and radicals** — `\sqrt{x}`, `\sqrt[n]{x}`
## Example
Uploading an image of the quadratic formula gives you:
```latex
x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}
```
An image of an integral:
```latex
\int_0^\infty e^{-x^2}\, dx = \frac{\sqrt{\pi}}{2}
```
## Tips for Best Results
- **Use clear images** — avoid blur, shadows, or low contrast
- **Crop tightly** — the less background, the better the focus
- **Dark ink on white paper** — ideal for handwritten formulas
- **Avoid rotated images** — keep the formula horizontal
- **One formula per image** — for complex multi-part work, crop each formula separately
## Limitations
- Extremely faint or pencil-written formulas may have lower accuracy
- Hand-drawn arrows or annotation marks outside the formula may be ignored
- Very large matrices (10×10+) may have reduced accuracy
## Copy Options
After recognition, you can copy output in multiple formats:
- **LaTeX** — raw LaTeX string
- **MathML** — for web embedding
- **Markdown** — `$...$` inline or `$$...$$` block
- **Plain text** — Unicode approximation
---
**Further reading:** [From Whiteboard to LaTeX in 3 Seconds: A Student's Workflow →](/blog/student-workflow)
Ready to try it? [Upload a formula image now →](/app)

View File

@@ -0,0 +1,81 @@
---
title: OCR Accuracy
description: Understanding TexPixel recognition accuracy and how to get the best results
slug: ocr-accuracy
date: 2026-03-25
tags: [accuracy, tips]
order: 5
---
# OCR Accuracy
TexPixel achieves industry-leading accuracy on mathematical formula recognition — but accuracy isn't uniform across all input types. This guide explains what affects accuracy and how to maximize it.
## Accuracy by Formula Type
| Formula Type | Typical Accuracy |
|---|---|
| Printed formulas (textbooks, papers) | 9599% |
| Clean handwritten formulas | 8895% |
| Scanned documents (300 DPI+) | 9398% |
| Photos of whiteboards | 8292% |
| Low-resolution images (< 72 DPI) | 6080% |
These are approximate ranges. Individual results depend heavily on image quality.
## Factors That Affect Accuracy
### Image Quality
The single biggest factor. A blurry, low-resolution, or poorly lit image will always produce worse results than a clean scan.
- **Resolution** — 150 DPI or higher is recommended. 300 DPI is ideal for documents.
- **Contrast** — dark ink on a white background gives the clearest signal to the model.
- **Sharpness** — avoid motion blur or out-of-focus shots.
### Formula Complexity
Simple single-line equations are recognized with near-perfect accuracy. More complex structures may have occasional errors:
- Multi-line equation systems
- Large matrices (6×6 or larger)
- Heavily nested fractions (3+ levels deep)
- Non-standard notation or custom symbols
### Handwriting Style
Printed (typed) formulas outperform handwritten ones, but TexPixel handles handwriting well when:
- Letters are clearly formed and not connected (print style, not cursive)
- Variables are written in distinct sizes (clearly different x and × for example)
- Spacing between symbols is consistent
### What Reduces Accuracy
- **Rotated images** — formulas at an angle are harder to parse
- **Overlapping elements** — crossed-out work, annotations, or arrows near symbols
- **Pencil on paper** — low contrast; try increasing image brightness/contrast before uploading
- **Multiple formulas in one image** — crop to the specific formula you need
- **Decorative fonts** — calligraphic or stylized mathematical writing
## Improving Results
If you're getting errors, try these steps in order:
1. **Increase image resolution** — scan at 300 DPI instead of 150 DPI
2. **Improve contrast** — use a photo editor to increase brightness and contrast
3. **Crop tightly** — remove surrounding text and whitespace
4. **Straighten the image** — correct rotation before uploading
5. **Re-photograph** — better lighting, closer distance, sharper focus
## Reporting Errors
Found a formula type that TexPixel consistently gets wrong? Let us know — accuracy feedback directly improves the model over time.
Contact us at: [support@texpixel.com](mailto:support@texpixel.com)
---
**Further reading:** [5 Tips for Better Handwriting Recognition →](/blog/handwriting-tips)
[Upload a formula and test accuracy →](/app)

View File

@@ -0,0 +1,77 @@
---
title: PDF Extraction
description: Extract and convert formulas from PDF documents automatically with TexPixel
slug: pdf-extraction
date: 2026-03-25
tags: [PDF, extraction]
order: 6
---
# PDF Extraction
TexPixel can process entire PDF documents and extract every formula from every page — automatically. This is useful for textbooks, research papers, or any multi-page document with mathematical content.
## How to Extract from a PDF
1. Click the upload zone or drag and drop your PDF file.
2. TexPixel detects all pages and identifies formula regions.
3. Each recognized formula is listed in the result panel.
4. Copy individual formulas or export the entire document as DOCX.
## What Gets Extracted
TexPixel identifies formulas in PDFs regardless of whether they were:
- Typeset in LaTeX (rendered as vector math)
- Embedded as images (scanned pages)
- A mix of both
For vector PDFs (generated from LaTeX or Word), recognition accuracy is typically 95%+. For scanned/image PDFs, accuracy follows the same image quality guidelines as regular image uploads.
## Supported PDF Types
| Type | Description | Accuracy |
|---|---|---|
| Vector PDF | Created from LaTeX, Word, or typesetting tools | 9599% |
| Scanned PDF (high quality) | 300 DPI scan of printed text | 9097% |
| Scanned PDF (low quality) | < 150 DPI or poor contrast | 6080% |
| Photo PDF | Photographed pages embedded as images | 7590% |
## File Limits
- **Max file size:** 20 MB
- **Max pages:** 50 pages per upload (Pro plan: unlimited)
- **Processing time:** ~25 seconds per page
For documents exceeding these limits, split the PDF into smaller chunks before uploading.
## Exporting PDF Results
After extraction, you can export in several ways:
- **Copy individual formula** — click any recognized formula to copy its LaTeX
- **DOCX export** — download the full document with formulas as native Word equations
- **Batch copy** — copy all formulas as a list (Pro feature)
## Tips for Better PDF Results
- **Use the original PDF**, not a re-scanned copy — vector PDFs give the best results
- **Avoid password-protected PDFs** — these cannot be processed
- **Crop pages** if a PDF has wide margins with no content — smaller pages process faster
- **Split by chapter** for very large documents to stay within page limits
## Common Issues
**"No formulas found"**
The PDF may be encrypted, have formulas stored as complex vector paths, or use non-standard encoding. Try converting the page to a PNG image and uploading that instead.
**Formulas recognized but garbled**
This often happens with very low DPI scans. Try using a PDF scanner app to rescan at 300 DPI before uploading.
**Processing is slow**
Large PDFs with many pages can take 3060 seconds. This is normal. The result will appear when processing is complete.
---
**Further reading:** [I tried to extract formulas from my professor's PDF — real-world troubleshooting →](/blog/pdf-formula-issues)
[Upload a PDF and extract formulas →](/app)

View File

@@ -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 |

View File

@@ -0,0 +1,68 @@
---
title: 导出到 Word
description: 将识别的公式直接导出到 Microsoft Word 中作为可编辑方程
slug: copy-to-word
date: 2026-03-25
tags: [导出, Word, DOCX]
order: 4
---
# 导出到 Word
TexPixel 可以将识别的公式直接导出到 Microsoft Word 中作为原生可编辑方程——而不是图片。这意味着导出后你可以在 Word 中继续编辑公式。
## 如何导出到 Word
1. 上传公式图片并等待识别完成。
2. 点击结果面板中的**导出**按钮。
3. 从文件导出选项中选择 **DOCX**
4. 下载文件并在 Microsoft Word 中打开。
下载的 `.docx` 文件包含以原生 Word 方程OMML 格式表示的公式Word 使用内置方程编辑器渲染。
## 为什么使用 DOCX 导出?
| 方式 | Word 中可编辑 | 正确渲染 | 复制粘贴 |
|---|---|---|---|
| 截图/图片 | 否 | 是 | 否 |
| LaTeX 字符串 | 否(无插件) | 否 | 是 |
| DOCX 导出 | **是** | **是** | N/A |
DOCX 格式非常适合以下情况:
- 提交 Word 格式的作业或报告
- 与不使用 LaTeX 的同事共享公式
- 导出后继续编辑公式
## 插入到现有文档
如果你想将公式插入现有 Word 文档而不是新建文档:
1. 在 Word 中打开下载的 `.docx` 文件。
2. 选中方程并复制(`Ctrl+C` / `Cmd+C`)。
3. 粘贴到目标文档(`Ctrl+V` / `Cmd+V`)。
Word 在粘贴时保留方程格式。
## 混合内容(文字 + 公式)
如果上传内容包含普通文字和公式的混合(例如教材页面),请使用 DOCX 导出——这是唯一能正确处理混合内容的格式。LaTeX 和 MathML 导出仅适用于纯公式结果。
> **注意:** 对于混合内容结果LaTeX/MathML 导出不可用。请使用 DOCX 获取包含文字和方程的格式正确文档。
## 兼容性
DOCX 导出与以下软件兼容:
- Microsoft Word 2016 及更高版本Windows 和 Mac
- Google 文档(导入时方程渲染为图片)
- LibreOffice Writer部分支持
## 提示
- 粘贴到 Word 后,双击方程打开方程编辑器进行修改。
- 如果公式与预期不同,请尝试上传更高分辨率的图片以获得更准确的识别结果。
---
**延伸阅读:** [LaTeX vs MathML应该选哪种格式](/blog/latex-vs-mathml)
[尝试将公式导出到 Word →](/app)

62
content/docs/zh/faq.md Normal file
View File

@@ -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 传输。上传的文件和结果都经过安全处理。

View File

@@ -0,0 +1,43 @@
---
title: 快速开始
description: 了解如何使用 TexPixel 进行公式识别
slug: getting-started
date: 2026-03-25
tags: [教程, 入门]
order: 1
---
# TexPixel 快速开始
TexPixel 是一款 AI 驱动的数学公式识别工具,可以将手写或印刷体公式转换为 LaTeX、MathML 和 Markdown。
## 快速上手
1. **上传** — 拖拽包含数学公式的图片或 PDF
2. **等待** — AI 将自动处理并识别公式
3. **导出** — 复制结果或以你喜欢的格式导出
## 支持的格式
### 输入格式
- 图片JPG、PNG
- 文档PDF
### 输出格式
- LaTeX
- MathML
- Markdown
- Word (DOCX)
- 图片
## 示例
上传一张包含二次公式的图片TexPixel 将输出:
$$x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$$
## 提示
- 为获得最佳效果,请确保公式图片清晰、光线充足
- 手写公式在白纸上用深色墨水书写效果最佳
- PDF 文件可以包含多页,所有公式都会被提取

View File

@@ -0,0 +1,82 @@
---
title: 图片转 LaTeX
description: 如何使用 TexPixel 将任意公式图片转换为干净的 LaTeX 代码
slug: image-to-latex
date: 2026-03-25
tags: [LaTeX, 教程]
order: 2
---
# 图片转 LaTeX
TexPixel 的核心功能是将公式图片——来自照片、扫描件或截图——直接转换为可以粘贴到任何地方的 LaTeX 代码。
## 使用方法
1. **上传图片** — 将 JPG 或 PNG 拖拽到上传区域,或点击浏览文件。也可以直接从剪贴板粘贴。
2. **AI 处理** — 模型检测公式区域,运行 OCR在不到一秒内生成结构化 LaTeX。
3. **复制结果** — 点击 LaTeX 输出旁的复制按钮,直接粘贴到 Overleaf、VS Code、Word 或任意 LaTeX 编辑器。
## 输入要求
| 要求 | 详情 |
|---|---|
| 文件格式 | JPG、PNG |
| 最大文件大小 | 10 MB |
| 推荐分辨率 | 150 DPI 或更高 |
| 背景 | 白色或浅色背景效果最佳 |
## 支持识别的内容
TexPixel 可处理多种数学内容:
- **代数** — 方程、不等式、多项式
- **微积分** — 导数、积分、极限
- **矩阵** — 2×2 到大型数组
- **希腊字母** — α、β、γ、Σ、Π 等
- **上下标** — `x_i^2``a_{n+1}`
- **分数** — `\frac{a}{b}`、嵌套分数
- **根号** — `\sqrt{x}``\sqrt[n]{x}`
## 示例
上传二次公式图片,输出:
```latex
x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}
```
上传积分图片:
```latex
\int_0^\infty e^{-x^2}\, dx = \frac{\sqrt{\pi}}{2}
```
## 获得最佳结果的技巧
- **使用清晰图片** — 避免模糊、阴影或低对比度
- **紧密裁剪** — 背景越少,焦点越准确
- **白纸深色墨水** — 手写公式的理想条件
- **避免旋转图片** — 保持公式水平
- **每张图片一个公式** — 对于复杂的多部分作业,分别裁剪每个公式
## 局限性
- 非常淡或铅笔书写的公式准确率可能较低
- 公式外的手绘箭头或注释标记可能被忽略
- 非常大的矩阵10×10 以上)可能准确率降低
## 复制选项
识别完成后,可以多种格式复制输出:
- **LaTeX** — 原始 LaTeX 字符串
- **MathML** — 用于网页嵌入
- **Markdown** — 行内 `$...$` 或块级 `$$...$$`
- **纯文本** — Unicode 近似表示
---
**延伸阅读:** [3 秒从白板到 LaTeX学生的高效工作流 →](/blog/student-workflow)
准备好了吗?[立即上传公式图片 →](/app)

View File

@@ -0,0 +1,81 @@
---
title: 识别准确率
description: 了解 TexPixel 识别准确率及如何获得最佳效果
slug: ocr-accuracy
date: 2026-03-25
tags: [准确率, 技巧]
order: 5
---
# 识别准确率
TexPixel 在数学公式识别方面达到行业领先的准确率——但准确率在不同输入类型之间并不统一。本指南解释影响准确率的因素以及如何最大化识别效果。
## 按公式类型的准确率
| 公式类型 | 典型准确率 |
|---|---|
| 印刷体公式(教材、论文) | 9599% |
| 清晰手写公式 | 8895% |
| 扫描文档300 DPI+ | 9398% |
| 白板照片 | 8292% |
| 低分辨率图片(< 72 DPI | 6080% |
这些是大致范围,实际结果在很大程度上取决于图片质量。
## 影响准确率的因素
### 图片质量
这是最重要的单一因素。模糊、低分辨率或光线不佳的图片效果始终不如清晰扫描件。
- **分辨率** — 建议 150 DPI 或更高,文档理想为 300 DPI
- **对比度** — 白色背景上的深色墨水为模型提供最清晰的信号
- **清晰度** — 避免运动模糊或对焦不准
### 公式复杂度
简单的单行方程识别准确率接近完美。更复杂的结构可能偶有错误:
- 多行方程组
- 大矩阵6×6 或更大)
- 深度嵌套分数3 层以上)
- 非标准符号或自定义符号
### 手写风格
印刷体打字公式优于手写体但当以下条件满足时TexPixel 能很好地处理手写:
- 字母清晰成形且不连笔(印刷体,而非草书)
- 变量写成明显不同的大小(例如 x 和 × 清晰区分)
- 符号间距一致
### 降低准确率的因素
- **旋转图片** — 倾斜的公式更难解析
- **重叠元素** — 划掉的内容、注释或符号附近的箭头
- **纸上铅笔** — 对比度低;上传前可尝试增加图片亮度/对比度
- **一张图片多个公式** — 裁剪到你需要的具体公式
- **装饰字体** — 花体或风格化数学书写
## 提高识别效果
如果识别出错,按以下顺序尝试:
1. **提高图片分辨率** — 用 300 DPI 扫描代替 150 DPI
2. **改善对比度** — 使用图片编辑器提高亮度和对比度
3. **紧密裁剪** — 去除周围文字和空白
4. **矫正图片** — 上传前纠正旋转
5. **重新拍摄** — 更好的光线、更近的距离、更清晰的对焦
## 反馈错误
发现 TexPixel 持续识别错误的公式类型?请告知我们——准确率反馈直接改进模型。
联系我们:[support@texpixel.com](mailto:support@texpixel.com)
---
**延伸阅读:** [提高手写公式识别准确率的 5 个技巧 →](/blog/handwriting-tips)
[上传公式测试识别准确率 →](/app)

View File

@@ -0,0 +1,77 @@
---
title: PDF 公式提取
description: 使用 TexPixel 自动从 PDF 文档中提取并转换公式
slug: pdf-extraction
date: 2026-03-25
tags: [PDF, 提取]
order: 6
---
# PDF 公式提取
TexPixel 可以处理完整的 PDF 文档,自动从每一页提取所有公式。这对教材、研究论文或任何包含数学内容的多页文档非常有用。
## 如何从 PDF 提取
1. 点击上传区域或将 PDF 文件拖拽到其中。
2. TexPixel 检测所有页面并识别公式区域。
3. 每个识别的公式列在结果面板中。
4. 复制单个公式或将整个文档导出为 DOCX。
## 提取内容
无论 PDF 中的公式是如何生成的TexPixel 都能识别:
- 用 LaTeX 排版(渲染为矢量数学)
- 嵌入为图片(扫描页面)
- 两种混合
对于矢量 PDF由 LaTeX 或 Word 生成),识别准确率通常为 95% 以上。对于扫描/图片 PDF准确率遵循与普通图片上传相同的图片质量准则。
## 支持的 PDF 类型
| 类型 | 描述 | 准确率 |
|---|---|---|
| 矢量 PDF | 由 LaTeX、Word 或排版工具创建 | 9599% |
| 扫描 PDF高质量 | 印刷文字的 300 DPI 扫描 | 9097% |
| 扫描 PDF低质量 | < 150 DPI 或对比度差 | 6080% |
| 照片 PDF | 嵌入为图片的拍照页面 | 7590% |
## 文件限制
- **最大文件大小:** 20 MB
- **最大页数:** 每次上传 50 页(专业版:无限制)
- **处理时间:** 每页约 25 秒
对于超出限制的文档,上传前将 PDF 分割成较小的部分。
## 导出 PDF 识别结果
提取后,可以多种方式导出:
- **复制单个公式** — 点击任意识别的公式复制其 LaTeX
- **DOCX 导出** — 下载包含原生 Word 方程的完整文档
- **批量复制** — 将所有公式复制为列表(专业版功能)
## 提高 PDF 识别效果的技巧
- **使用原始 PDF**,而非重新扫描的副本——矢量 PDF 效果最佳
- **避免密码保护的 PDF**——这类文件无法处理
- 如果 PDF 有很宽的空白边距,**裁剪页面**——较小的页面处理更快
- 对于非常大的文档,**按章节分割**以保持在页数限制内
## 常见问题
**"未找到公式"**
PDF 可能已加密,公式可能以复杂矢量路径存储,或使用了非标准编码。尝试将页面转换为 PNG 图片后再上传。
**公式已识别但内容乱码**
这通常发生在非常低 DPI 的扫描件上。尝试在上传前使用 PDF 扫描应用以 300 DPI 重新扫描。
**处理速度慢**
包含多页的大型 PDF 可能需要 3060 秒。这是正常的,处理完成后结果会显示。
---
**延伸阅读:** [我试着从教授的 PDF 里提取公式——真实排障经历 →](/blog/pdf-formula-issues)
[上传 PDF 提取公式 →](/app)

View File

@@ -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 | 分享 | 否 | 是 |

View File

@@ -66,57 +66,57 @@ deploy_to_server() {
print_info "${server} 上执行部署操作..." print_info "${server} 上执行部署操作..."
print_info "部署路径: ${DEPLOY_PATH}/${DEPLOY_NAME}" print_info "部署路径: ${DEPLOY_PATH}/${DEPLOY_NAME}"
# 注意:密码通过环境变量传递,避免在命令行中暴露 # 注意:密码通过环境变量传递,避免在命令行中暴露
ssh_output=$(SSH_SUDO_PASSWORD="${SUDO_PASSWORD}" ssh ${server} bash << SSH_EOF ssh_output=$(ssh "${server}" "SSH_SUDO_PASSWORD='${SUDO_PASSWORD}' SSH_DEPLOY_PATH='${DEPLOY_PATH}' SSH_DEPLOY_NAME='${DEPLOY_NAME}' bash -s" << 'SSH_EOF'
set -e set -e
DEPLOY_PATH="${DEPLOY_PATH}" DEPLOY_PATH="${SSH_DEPLOY_PATH}"
DEPLOY_NAME="${DEPLOY_NAME}" DEPLOY_NAME="${SSH_DEPLOY_NAME}"
SUDO_PASSWORD="\${SSH_SUDO_PASSWORD}" SUDO_PASSWORD="${SSH_SUDO_PASSWORD}"
# 检查部署目录是否存在 # 检查部署目录是否存在
if [ ! -d "\${DEPLOY_PATH}" ]; then if [ ! -d "${DEPLOY_PATH}" ]; then
echo "错误:部署目录 \${DEPLOY_PATH} 不存在,请检查路径是否正确" echo "错误:部署目录 ${DEPLOY_PATH} 不存在,请检查路径是否正确"
exit 1 exit 1
fi fi
# 检查是否有权限写入(尝试创建测试文件) # 检查是否有权限写入(尝试创建测试文件)
if ! touch "\${DEPLOY_PATH}/.deploy_test" 2>/dev/null; then if ! touch "${DEPLOY_PATH}/.deploy_test" 2>/dev/null; then
echo "提示:没有直接写入权限,将使用 sudo 执行操作" echo "提示:没有直接写入权限,将使用 sudo 执行操作"
USE_SUDO=1 USE_SUDO=1
else else
rm -f "\${DEPLOY_PATH}/.deploy_test" rm -f "${DEPLOY_PATH}/.deploy_test"
USE_SUDO=0 USE_SUDO=0
fi fi
# 备份旧版本(如果存在) # 备份旧版本(如果存在)
if [ -d "\${DEPLOY_PATH}/\${DEPLOY_NAME}" ]; then if [ -d "${DEPLOY_PATH}/${DEPLOY_NAME}" ]; then
echo "备份旧版本..." echo "备份旧版本..."
if [ "\$USE_SUDO" = "1" ]; then if [ "$USE_SUDO" = "1" ]; then
echo "\${SUDO_PASSWORD}" | sudo -S rm -rf "\${DEPLOY_PATH}/\${DEPLOY_NAME}_bak" 2>/dev/null || true echo "${SUDO_PASSWORD}" | sudo -S rm -rf "${DEPLOY_PATH}/${DEPLOY_NAME}_bak" 2>/dev/null || true
echo "\${SUDO_PASSWORD}" | sudo -S mv "\${DEPLOY_PATH}/\${DEPLOY_NAME}" "\${DEPLOY_PATH}/\${DEPLOY_NAME}_bak" || { echo "错误:备份失败,权限不足"; exit 1; } echo "${SUDO_PASSWORD}" | sudo -S mv "${DEPLOY_PATH}/${DEPLOY_NAME}" "${DEPLOY_PATH}/${DEPLOY_NAME}_bak" || { echo "错误:备份失败,权限不足"; exit 1; }
else else
rm -rf "\${DEPLOY_PATH}/\${DEPLOY_NAME}_bak" 2>/dev/null || true rm -rf "${DEPLOY_PATH}/${DEPLOY_NAME}_bak" 2>/dev/null || true
mv "\${DEPLOY_PATH}/\${DEPLOY_NAME}" "\${DEPLOY_PATH}/\${DEPLOY_NAME}_bak" || { echo "错误:备份失败"; exit 1; } mv "${DEPLOY_PATH}/${DEPLOY_NAME}" "${DEPLOY_PATH}/${DEPLOY_NAME}_bak" || { echo "错误:备份失败"; exit 1; }
fi fi
fi fi
# 移动新版本到部署目录(覆盖现有目录) # 移动新版本到部署目录(覆盖现有目录)
if [ -d ~/\${DEPLOY_NAME} ]; then if [ -d ~/${DEPLOY_NAME} ]; then
echo "移动新版本到部署目录..." echo "移动新版本到部署目录..."
if [ "\$USE_SUDO" = "1" ]; then if [ "$USE_SUDO" = "1" ]; then
echo "\${SUDO_PASSWORD}" | sudo -S mv ~/\${DEPLOY_NAME} "\${DEPLOY_PATH}/" || { echo "错误:移动文件失败,权限不足"; exit 1; } echo "${SUDO_PASSWORD}" | sudo -S mv ~/${DEPLOY_NAME} "${DEPLOY_PATH}/" || { echo "错误:移动文件失败,权限不足"; exit 1; }
else else
mv ~/\${DEPLOY_NAME} "\${DEPLOY_PATH}/" || { echo "错误:移动文件失败"; exit 1; } mv ~/${DEPLOY_NAME} "${DEPLOY_PATH}/" || { echo "错误:移动文件失败"; exit 1; }
fi fi
echo "部署完成!" echo "部署完成!"
else else
echo "错误:找不到 ~/\${DEPLOY_NAME} 目录" echo "错误:找不到 ~/${DEPLOY_NAME} 目录"
exit 1 exit 1
fi fi
# 重新加载 nginx如果配置了 # 重新加载 nginx如果配置了
if command -v nginx &> /dev/null; then if command -v nginx &> /dev/null; then
echo "重新加载 nginx..." echo "重新加载 nginx..."
echo "\${SUDO_PASSWORD}" | sudo -S nginx -t && echo "\${SUDO_PASSWORD}" | sudo -S nginx -s reload || echo "警告nginx 重新加载失败,请手动检查" echo "${SUDO_PASSWORD}" | sudo -S nginx -t && echo "${SUDO_PASSWORD}" | sudo -S nginx -s reload || echo "警告nginx 重新加载失败,请手动检查"
fi fi
SSH_EOF SSH_EOF
) )

View File

@@ -0,0 +1,140 @@
# 多语言功能实现总结
## 📋 实现内容
### 1. HTML 文档改进 (`index.html`)
- ✅ 添加 `hreflang` 标签支持多语言 SEO
- ✅ 添加双语 meta 标签description, keywords
- ✅ 添加 Open Graph 和 Twitter Cards 多语言支持
- ✅ 添加动态语言检测脚本
- ✅ 优化 `og:locale``og:locale:alternate` 标签
### 2. SEO 辅助工具 (`src/lib/seoHelper.ts`)
- ✅ 创建 `updatePageMeta()` 函数动态更新 meta 标签
- ✅ 创建 `getSEOContent()` 函数获取语言特定的 SEO 内容
- ✅ 支持更新标题、描述、关键词、OG 标签等
### 3. 语言上下文增强 (`src/contexts/LanguageContext.tsx`)
- ✅ 集成 `updatePageMeta()` 在语言切换时自动更新页面
- ✅ 在初始加载时根据用户偏好更新 meta 标签
- ✅ 在 IP 检测后更新 meta 标签
### 4. 文档和测试
- ✅ 创建详细的多语言支持文档 (`MULTILANG_README.md`)
- ✅ 创建浏览器测试脚本 (`test-multilang.js`)
- ✅ 包含最佳实践和使用示例
## 🎯 功能特性
### 自动语言检测优先级
1. 用户在 localStorage 中保存的选择(最高优先级)
2. IP 地理位置检测
3. 浏览器语言设置(回退)
### SEO 优化
- **搜索引擎**: 完整的 hreflang 支持
- **社交媒体**: Open Graph 和 Twitter Cards
- **元数据**: 动态更新标题、描述、关键词
### 用户体验
- 一键语言切换(在导航栏)
- 无刷新页面更新
- 保持用户选择跨会话
## 📝 使用示例
### 切换语言
```typescript
import { useLanguage } from './contexts/LanguageContext';
function Component() {
const { language, setLanguage, t } = useLanguage();
return (
<button onClick={() => setLanguage('en')}>
{t.common.switchLanguage}
</button>
);
}
```
### 添加新翻译
`src/lib/translations.ts` 中:
```typescript
export const translations = {
en: {
newFeature: {
title: 'New Feature',
}
},
zh: {
newFeature: {
title: '新功能',
}
}
};
```
### 更新 SEO 内容
`src/lib/seoHelper.ts` 中:
```typescript
const seoContent: Record<Language, SEOContent> = {
en: {
title: 'Your English Title',
description: 'Your English description',
keywords: 'english, keywords',
},
zh: {
title: '您的中文标题',
description: '您的中文描述',
keywords: '中文,关键词',
},
};
```
## 🧪 测试清单
- [ ] 页面首次加载时语言检测正确
- [ ] 切换语言时标题更新
- [ ] 切换语言时 meta 标签更新
- [ ] HTML lang 属性同步更新
- [ ] localStorage 正确保存用户选择
- [ ] 所有 UI 文本正确翻译
- [ ] Open Graph 预览正确显示(使用 [Facebook Sharing Debugger](https://developers.facebook.com/tools/debug/)
- [ ] Twitter Card 预览正确显示(使用 [Twitter Card Validator](https://cards-dev.twitter.com/validator)
## 🚀 部署注意事项
### 服务器配置
如果使用基于 URL 的语言路由(如 `/en`, `/zh`),需要配置服务器重写规则:
**Nginx 示例**:
```nginx
location ~ ^/(en|zh) {
try_files $uri $uri/ /index.html;
}
```
**Apache 示例**:
```apache
RewriteEngine On
RewriteRule ^(en|zh)/ /index.html [L]
```
### CDN 缓存
确保 CDN 不会缓存带有错误语言的页面:
- 使用 `Vary: Accept-Language`
- 或在 URL 中包含语言参数
## 🔗 相关资源
- [Google 国际化指南](https://developers.google.com/search/docs/specialty/international/localized-versions)
- [Open Graph Protocol](https://ogp.me/)
- [Twitter Cards 文档](https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/abouts-cards)
- [hreflang 最佳实践](https://support.google.com/webmasters/answer/189077)
## 📞 支持
如有问题或建议,请联系:
- Email: yogecoder@gmail.com
- QQ 群: 1018282100

Some files were not shown because too many files have changed in this diff Show More