YogeLiu/doc_ai_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: YogeLiu:feature/goole_oauth
Branches Tags
YogeLiu:main YogeLiu:feat/website-restructure YogeLiu:test YogeLiu:feature/goole_oauth YogeLiu:feature/seo
..
compare: YogeLiu:test
Branches Tags
YogeLiu:feat/website-restructure YogeLiu:test YogeLiu:main YogeLiu:feature/goole_oauth YogeLiu:feature/seo

7 Commits
feature/go ... test

Author SHA1 Message Date
yoge
0d4de2fcf1 feat: replace logo in main 2026-03-25 11:49:28 +08:00
yoge
3a3bbbc0fc feat: replace icon 2026-03-25 11:45:54 +08:00
yoge
e1f8dac74d feat: add icon 2026-03-25 11:14:55 +08:00
yoge
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
yoge
fba4541fa5 fix: user info api repeat call 2026-03-09 21:46:26 +08:00
yoge
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
19 changed files with 565 additions and 107 deletions
Expand all files Collapse all files

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`

95
index.html
View File

@@ -3,56 +3,93 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="icon" type="image/png" href="/favicon.png" />
<link rel="apple-touch-icon" href="/texpixel-app-icon.svg" />
<link rel="manifest" href="/site.webmanifest" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Multi-language Support -->
<link rel="alternate" hreflang="zh-CN" href="https://texpixel.com/" />
<link rel="alternate" hreflang="en" href="https://texpixel.com/en" />
<link rel="alternate" hreflang="x-default" href="https://texpixel.com/" />
<!-- Dynamic Title (will be updated by app) -->
<title>⚡️ TexPixel - 公式识别工具 | Formula Recognition Tool</title>
<!-- SEO Meta Tags - Chinese (Default) --> <!-- hreflang: same URL serves both languages (SPA), point both to canonical -->
<meta name="description" content="在线公式识别工具，支持印刷体和手写体数学公式识别，快速准确地将图片中的数学公式转换为可编辑文本。Online formula recognition tool supporting printed and handwritten math formulas." /> <link rel="canonical" href="https://texpixel.com/" />
<meta name="keywords" <link rel="alternate" hreflang="zh-CN" href="https://texpixel.com/" />
content="公式识别,数学公式,OCR,手写公式识别,印刷体识别,AI识别,数学工具,免费,formula recognition,math formula,handwriting recognition,latex,mathml,markdown,texpixel,TexPixel,混合文字识别,document recognition" /> <link rel="alternate" hreflang="en" href="https://texpixel.com/" />
<link rel="alternate" hreflang="x-default" href="https://texpixel.com/" />
<!-- Title -->
<title>TexPixel - AI Math Formula Recognition | LaTeX, MathML OCR Tool</title>
<!-- SEO Meta Tags -->
<meta name="description" content="Free AI-powered math formula recognition tool. Convert handwritten or printed math formulas in images to LaTeX, MathML, and Markdown instantly. Supports PDF and image files." />
<meta name="keywords" content="math formula recognition,LaTeX OCR,handwriting math recognition,formula to latex,math OCR,MathML converter,handwritten equation recognition,公式识别,数学公式OCR,手写公式识别,LaTeX转换,texpixel" />
<meta name="author" content="TexPixel Team" /> <meta name="author" content="TexPixel Team" />
<meta name="robots" content="index, follow" /> <meta name="robots" content="index, follow" />
<!-- Open Graph Meta Tags - Bilingual --> <!-- Open Graph -->
<meta property="og:title" content="TexPixel - 公式识别工具 | Formula Recognition Tool" /> <meta property="og:title" content="TexPixel - AI Math Formula Recognition Tool" />
<meta property="og:description" content="在线公式识别工具，支持印刷体和手写体数学公式识别。Online formula recognition tool supporting printed and handwritten math formulas." /> <meta property="og:description" content="Free AI-powered tool to convert handwritten or printed math formulas to LaTeX, MathML, and Markdown. Upload an image or PDF and get results instantly." />
<meta property="og:type" content="website" /> <meta property="og:type" content="website" />
<meta property="og:url" content="https://texpixel.com/" /> <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" /> <meta property="og:image" content="https://cdn.texpixel.com/public/og-cover.png" />
<meta property="og:locale" content="zh_CN" /> <meta property="og:image:width" content="1200" />
<meta property="og:locale:alternate" content="en_US" /> <meta property="og:image:height" content="630" />
<meta property="og:locale" content="en_US" />
<meta property="og:locale:alternate" content="zh_CN" />
<meta property="og:site_name" content="TexPixel" /> <meta property="og:site_name" content="TexPixel" />
<!-- Twitter Card Meta Tags - Bilingual --> <!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="TexPixel - Formula Recognition Tool | 公式识别工具" /> <meta name="twitter:title" content="TexPixel - AI Math Formula Recognition Tool" />
<meta name="twitter:description" content="Online formula recognition tool supporting printed and handwritten math formulas. 支持印刷体和手写体数学公式识别。" /> <meta name="twitter:description" content="Convert handwritten or printed math formulas to LaTeX, MathML, and Markdown for free. Upload image or PDF — results in seconds." />
<meta name="twitter:image" content="https://cdn.texpixel.com/public/logo.png?x-oss-process=image/resize,w_600" /> <meta name="twitter:image" content="https://cdn.texpixel.com/public/og-cover.png" />
<meta name="twitter:site" content="@TexPixel" /> <meta name="twitter:site" content="@TexPixel" />
<!-- Baidu Verification --> <!-- Baidu Verification -->
<meta name="baidu-site-verification" content="codeva-8zU93DeGgH" /> <meta name="baidu-site-verification" content="codeva-8zU93DeGgH" />
<!-- JSON-LD Structured Data -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebApplication",
"name": "TexPixel",
"url": "https://texpixel.com/",
"description": "AI-powered math formula recognition tool that converts handwritten or printed formulas in images to LaTeX, MathML, and Markdown.",
"applicationCategory": "UtilitiesApplication",
"operatingSystem": "Web",
"offers": {
"@type": "Offer",
"price": "0",
"priceCurrency": "USD"
},
"featureList": [
"Handwritten math formula recognition",
"Printed formula OCR",
"LaTeX output",
"MathML output",
"Markdown output",
"PDF support",
"Image support"
],
"inLanguage": ["en", "zh-CN"],
"publisher": {
"@type": "Organization",
"name": "TexPixel",
"url": "https://texpixel.com/"
}
}
</script>
<!-- Language Detection Script --> <!-- Language Detection Script -->
<script> <script>
// Update HTML lang attribute based on user preference or browser language
(function() { (function() {
const savedLang = localStorage.getItem('language'); const savedLang = localStorage.getItem('language');
const browserLang = navigator.language.toLowerCase(); const browserLang = navigator.language.toLowerCase();
const isZh = savedLang === 'zh' || (!savedLang && browserLang.startsWith('zh')); const isZh = savedLang === 'zh' || (!savedLang && browserLang.startsWith('zh'));
document.documentElement.lang = isZh ? 'zh-CN' : 'en'; document.documentElement.lang = isZh ? 'zh-CN' : 'en';
if (isZh) {
// Update page title based on language document.title = 'TexPixel - AI 数学公式识别工具 | LaTeX、MathML OCR';
if (!isZh) { document.querySelector('meta[name="description"]').setAttribute('content',
document.title = '⚡️ TexPixel - Formula Recognition Tool'; '免费 AI 数学公式识别工具，支持手写和印刷体公式识别，一键将图片或 PDF 中的数学公式转换为 LaTeX、MathML 和 Markdown 格式。');
} }
})(); })();
</script> </script>
@@ -64,4 +101,4 @@
<script type="module" src="/src/main.tsx"></script> <script type="module" src="/src/main.tsx"></script>
</body> </body>
</html> </html>

68
public/favicon.svg Normal file
View File

@@ -0,0 +1,68 @@
<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Light mode: dark lines -->
<linearGradient id="l1" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="#111111" stop-opacity="0"/>
<stop offset="20%" stop-color="#111111" stop-opacity="0.9"/>
<stop offset="100%" stop-color="#111111" stop-opacity="0.9"/>
</linearGradient>
<linearGradient id="l2" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="#111111" stop-opacity="0"/>
<stop offset="24%" stop-color="#111111" stop-opacity="0.6"/>
<stop offset="100%" stop-color="#111111" stop-opacity="0.6"/>
</linearGradient>
<linearGradient id="l3" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="#111111" stop-opacity="0"/>
<stop offset="22%" stop-color="#111111" stop-opacity="0.35"/>
<stop offset="100%" stop-color="#111111" stop-opacity="0.35"/>
</linearGradient>
<linearGradient id="l4" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="#111111" stop-opacity="0"/>
<stop offset="28%" stop-color="#111111" stop-opacity="0.18"/>
<stop offset="100%" stop-color="#111111" stop-opacity="0.18"/>
</linearGradient>
<!-- Dark mode: white lines -->
<linearGradient id="d1" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="#ffffff" stop-opacity="0"/>
<stop offset="20%" stop-color="#ffffff" stop-opacity="0.95"/>
<stop offset="100%" stop-color="#ffffff" stop-opacity="0.95"/>
</linearGradient>
<linearGradient id="d2" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="#ffffff" stop-opacity="0"/>
<stop offset="24%" stop-color="#ffffff" stop-opacity="0.65"/>
<stop offset="100%" stop-color="#ffffff" stop-opacity="0.65"/>
</linearGradient>
<linearGradient id="d3" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="#ffffff" stop-opacity="0"/>
<stop offset="22%" stop-color="#ffffff" stop-opacity="0.4"/>
<stop offset="100%" stop-color="#ffffff" stop-opacity="0.4"/>
</linearGradient>
<linearGradient id="d4" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="#ffffff" stop-opacity="0"/>
<stop offset="28%" stop-color="#ffffff" stop-opacity="0.22"/>
<stop offset="100%" stop-color="#ffffff" stop-opacity="0.22"/>
</linearGradient>
</defs>
<style>
.light-icon { display: block; }
.dark-icon { display: none; }
@media (prefers-color-scheme: dark) {
.light-icon { display: none; }
.dark-icon { display: block; }
}
</style>
<!-- Light mode group -->
<g class="light-icon">
<rect x="3" y="7" width="24" height="2.2" rx="1.1" fill="url(#l1)"/>
<rect x="4" y="12.5" width="18" height="2.2" rx="1.1" fill="url(#l2)"/>
<rect x="3" y="18" width="20" height="2.2" rx="1.1" fill="url(#l3)"/>
<rect x="5" y="23.5" width="14" height="2.2" rx="1.1" fill="url(#l4)"/>
</g>
<!-- Dark mode group -->
<g class="dark-icon">
<rect x="3" y="7" width="24" height="2.2" rx="1.1" fill="url(#d1)"/>
<rect x="4" y="12.5" width="18" height="2.2" rx="1.1" fill="url(#d2)"/>
<rect x="3" y="18" width="20" height="2.2" rx="1.1" fill="url(#d3)"/>
<rect x="5" y="23.5" width="14" height="2.2" rx="1.1" fill="url(#d4)"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.3 KiB

4
public/robots.txt Normal file
View File

@@ -0,0 +1,4 @@
User-agent: *
Allow: /
Sitemap: https://texpixel.com/sitemap.xml

17
public/site.webmanifest Normal file
View File

@@ -0,0 +1,17 @@
{
"name": "TexPixel - AI Math Formula Recognition",
"short_name": "TexPixel",
"description": "Free AI-powered math formula recognition tool. Convert handwritten or printed math formulas to LaTeX, MathML, and Markdown.",
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#6366f1",
"icons": [
{
"src": "/texpixel-app-icon.svg",
"sizes": "any",
"type": "image/svg+xml",
"purpose": "any maskable"
}
]
}

13
public/sitemap.xml Normal file
View File

@@ -0,0 +1,13 @@
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
xmlns:xhtml="http://www.w3.org/1999/xhtml">
<url>
<loc>https://texpixel.com/</loc>
<lastmod>2026-03-11</lastmod>
<changefreq>weekly</changefreq>
<priority>1.0</priority>
<xhtml:link rel="alternate" hreflang="zh-CN" href="https://texpixel.com/"/>
<xhtml:link rel="alternate" hreflang="en" href="https://texpixel.com/"/>
<xhtml:link rel="alternate" hreflang="x-default" href="https://texpixel.com/"/>
</url>
</urlset>

29
public/texpixel-app-icon.svg Normal file
View File

@@ -0,0 +1,29 @@
<svg width="1024" height="1024" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="line1" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="#ffffff" stop-opacity="0"/>
<stop offset="25%" stop-color="#ffffff" stop-opacity="0.92"/>
<stop offset="100%" stop-color="#ffffff" stop-opacity="0.92"/>
</linearGradient>
<linearGradient id="line2" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="#ffffff" stop-opacity="0"/>
<stop offset="30%" stop-color="#ffffff" stop-opacity="0.62"/>
<stop offset="100%" stop-color="#ffffff" stop-opacity="0.62"/>
</linearGradient>
<linearGradient id="line3" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="#ffffff" stop-opacity="0"/>
<stop offset="28%" stop-color="#ffffff" stop-opacity="0.38"/>
<stop offset="100%" stop-color="#ffffff" stop-opacity="0.38"/>
</linearGradient>
<linearGradient id="line4" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="#ffffff" stop-opacity="0"/>
<stop offset="35%" stop-color="#ffffff" stop-opacity="0.2"/>
<stop offset="100%" stop-color="#ffffff" stop-opacity="0.2"/>
</linearGradient>
</defs>
<rect x="4" y="4" width="120" height="120" rx="28" fill="#000000"/>
<rect x="24" y="42" width="74" height="3" rx="1.5" fill="url(#line1)"/>
<rect x="26" y="56" width="56" height="3" rx="1.5" fill="url(#line2)"/>
<rect x="24" y="70" width="64" height="3" rx="1.5" fill="url(#line3)"/>
<rect x="28" y="84" width="44" height="3" rx="1.5" fill="url(#line4)"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

29
public/texpixel-icon-1024.svg Normal file
View File

@@ -0,0 +1,29 @@
<svg width="1024" height="1024" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="line1" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="#ffffff" stop-opacity="0"/>
<stop offset="25%" stop-color="#ffffff" stop-opacity="0.92"/>
<stop offset="100%" stop-color="#ffffff" stop-opacity="0.92"/>
</linearGradient>
<linearGradient id="line2" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="#ffffff" stop-opacity="0"/>
<stop offset="30%" stop-color="#ffffff" stop-opacity="0.62"/>
<stop offset="100%" stop-color="#ffffff" stop-opacity="0.62"/>
</linearGradient>
<linearGradient id="line3" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="#ffffff" stop-opacity="0"/>
<stop offset="28%" stop-color="#ffffff" stop-opacity="0.38"/>
<stop offset="100%" stop-color="#ffffff" stop-opacity="0.38"/>
</linearGradient>
<linearGradient id="line4" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="#ffffff" stop-opacity="0"/>
<stop offset="35%" stop-color="#ffffff" stop-opacity="0.2"/>
<stop offset="100%" stop-color="#ffffff" stop-opacity="0.2"/>
</linearGradient>
</defs>
<rect x="4" y="4" width="120" height="120" rx="28" fill="#000000"/>
<rect x="24" y="42" width="74" height="3" rx="1.5" fill="url(#line1)"/>
<rect x="26" y="56" width="56" height="3" rx="1.5" fill="url(#line2)"/>
<rect x="24" y="70" width="64" height="3" rx="1.5" fill="url(#line3)"/>
<rect x="28" y="84" width="44" height="3" rx="1.5" fill="url(#line4)"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

16
src/App.tsx
View File

@@ -239,10 +239,6 @@ function App() {
} }
}); });
// Auto-select first file if none selected
if (!selectedFileId) {
setSelectedFileId(fileRecords[0].id);
}
} else { } else {
setFiles([]); setFiles([]);
} }
@@ -569,18 +565,6 @@ function App() {
</div> </div>
)} )}
</div> </div>
{/* ICP Footer */}
<div className="flex-shrink-0 bg-white border-t border-gray-200 py-2 px-4 text-center">
<a
href="https://beian.miit.gov.cn"
target="_blank"
rel="noopener noreferrer"
className="text-xs text-gray-500 hover:text-gray-700 transition-colors"
>
京ICP备2025152973号
</a>
</div>
</div> </div>
); );
} }

82
src/components/AuthModal.tsx
View File

@@ -17,6 +17,7 @@ export default function AuthModal({ onClose, mandatory = false }: AuthModalProps
const [password, setPassword] = useState(''); const [password, setPassword] = useState('');
const [confirmPassword, setConfirmPassword] = useState(''); const [confirmPassword, setConfirmPassword] = useState('');
const [localError, setLocalError] = useState(''); const [localError, setLocalError] = useState('');
const [fieldErrors, setFieldErrors] = useState<{ email?: string; password?: string; confirmPassword?: string }>({});
const isBusy = useMemo( const isBusy = useMemo(
() => ['email_signing_in', 'email_signing_up', 'oauth_redirecting', 'oauth_exchanging'].includes(authPhase), () => ['email_signing_in', 'email_signing_up', 'oauth_redirecting', 'oauth_exchanging'].includes(authPhase),
@@ -28,20 +29,37 @@ export default function AuthModal({ onClose, mandatory = false }: AuthModalProps
const handleSubmit = async (e: React.FormEvent) => { const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault(); e.preventDefault();
setLocalError(''); setLocalError('');
const nextFieldErrors: { email?: string; password?: string; confirmPassword?: string } = {};
const normalizedEmail = email.trim();
if (!normalizedEmail) {
nextFieldErrors.email = t.auth.emailRequired;
} else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(normalizedEmail)) {
nextFieldErrors.email = t.auth.emailInvalid;
}
if (!password) {
nextFieldErrors.password = t.auth.passwordRequired;
}
if (mode === 'signup') { if (mode === 'signup') {
if (password.length < 6) { if (password && password.length < 6) {
setLocalError(t.auth.passwordHint); nextFieldErrors.password = t.auth.passwordHint;
return;
} }
if (password !== confirmPassword) { if (!confirmPassword) {
setLocalError(t.auth.passwordMismatch); nextFieldErrors.confirmPassword = t.auth.passwordRequired;
return; } else if (password !== confirmPassword) {
nextFieldErrors.confirmPassword = t.auth.passwordMismatch;
} }
} }
const result = mode === 'signup' ? await signUp(email, password) : await signIn(email, password); setFieldErrors(nextFieldErrors);
if (Object.keys(nextFieldErrors).length > 0) {
return;
}
const result = mode === 'signup' ? await signUp(normalizedEmail, password) : await signIn(normalizedEmail, password);
if (!result.error) { if (!result.error) {
onClose(); onClose();
@@ -75,7 +93,11 @@ export default function AuthModal({ onClose, mandatory = false }: AuthModalProps
<div className="grid grid-cols-2 gap-2 rounded-lg bg-gray-100 p-1 mb-4"> <div className="grid grid-cols-2 gap-2 rounded-lg bg-gray-100 p-1 mb-4">
<button <button
type="button" type="button"
onClick={() => setMode('signin')} onClick={() => {
setMode('signin');
setFieldErrors({});
setLocalError('');
}}
aria-pressed={mode === 'signin'} aria-pressed={mode === 'signin'}
disabled={isBusy} disabled={isBusy}
className={`rounded-md px-3 py-2 text-sm font-medium transition-colors ${ className={`rounded-md px-3 py-2 text-sm font-medium transition-colors ${
@@ -86,7 +108,11 @@ export default function AuthModal({ onClose, mandatory = false }: AuthModalProps
</button> </button>
<button <button
type="button" type="button"
onClick={() => setMode('signup')} onClick={() => {
setMode('signup');
setFieldErrors({});
setLocalError('');
}}
aria-pressed={mode === 'signup'} aria-pressed={mode === 'signup'}
disabled={isBusy} disabled={isBusy}
className={`rounded-md px-3 py-2 text-sm font-medium transition-colors ${ className={`rounded-md px-3 py-2 text-sm font-medium transition-colors ${
@@ -97,7 +123,7 @@ export default function AuthModal({ onClose, mandatory = false }: AuthModalProps
</button> </button>
</div> </div>
<form onSubmit={handleSubmit} className="space-y-4"> <form onSubmit={handleSubmit} noValidate className="space-y-4">
<div> <div>
<label htmlFor="auth-email" className="block text-sm font-medium text-gray-700 mb-1"> <label htmlFor="auth-email" className="block text-sm font-medium text-gray-700 mb-1">
{t.auth.email} {t.auth.email}
@@ -106,12 +132,20 @@ export default function AuthModal({ onClose, mandatory = false }: AuthModalProps
id="auth-email" id="auth-email"
type="email" type="email"
value={email} value={email}
onChange={(e) => setEmail(e.target.value)} onChange={(e) => {
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" setEmail(e.target.value);
if (fieldErrors.email) {
setFieldErrors((prev) => ({ ...prev, email: undefined }));
}
}}
className={`w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
fieldErrors.email ? 'border-red-400' : 'border-gray-300'
}`}
placeholder="your@email.com" placeholder="your@email.com"
required required
disabled={isBusy} disabled={isBusy}
/> />
{fieldErrors.email && <p className="mt-1 text-xs text-red-600">{fieldErrors.email}</p>}
{mode === 'signup' && ( {mode === 'signup' && (
<p className="mt-1 text-xs text-gray-500">{t.auth.emailHint}</p> <p className="mt-1 text-xs text-gray-500">{t.auth.emailHint}</p>
)} )}
@@ -125,13 +159,21 @@ export default function AuthModal({ onClose, mandatory = false }: AuthModalProps
id="auth-password" id="auth-password"
type="password" type="password"
value={password} value={password}
onChange={(e) => setPassword(e.target.value)} onChange={(e) => {
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" setPassword(e.target.value);
if (fieldErrors.password) {
setFieldErrors((prev) => ({ ...prev, password: undefined }));
}
}}
className={`w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
fieldErrors.password ? 'border-red-400' : 'border-gray-300'
}`}
placeholder="••••••••" placeholder="••••••••"
required required
minLength={6} minLength={6}
disabled={isBusy} disabled={isBusy}
/> />
{fieldErrors.password && <p className="mt-1 text-xs text-red-600">{fieldErrors.password}</p>}
{mode === 'signup' && ( {mode === 'signup' && (
<p className="mt-1 text-xs text-gray-500">{t.auth.passwordHint}</p> <p className="mt-1 text-xs text-gray-500">{t.auth.passwordHint}</p>
)} )}
@@ -146,13 +188,21 @@ export default function AuthModal({ onClose, mandatory = false }: AuthModalProps
id="auth-password-confirm" id="auth-password-confirm"
type="password" type="password"
value={confirmPassword} value={confirmPassword}
onChange={(e) => setConfirmPassword(e.target.value)} onChange={(e) => {
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" setConfirmPassword(e.target.value);
if (fieldErrors.confirmPassword) {
setFieldErrors((prev) => ({ ...prev, confirmPassword: undefined }));
}
}}
className={`w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
fieldErrors.confirmPassword ? 'border-red-400' : 'border-gray-300'
}`}
placeholder="••••••••" placeholder="••••••••"
required required
minLength={6} minLength={6}
disabled={isBusy} disabled={isBusy}
/> />
{fieldErrors.confirmPassword && <p className="mt-1 text-xs text-red-600">{fieldErrors.confirmPassword}</p>}
</div> </div>
)} )}

4
src/components/Navbar.tsx
View File

@@ -36,9 +36,7 @@ export default function Navbar() {
<div className="h-16 bg-white border-b border-gray-200 flex items-center justify-between px-6 flex-shrink-0 z-[60] relative"> <div className="h-16 bg-white border-b border-gray-200 flex items-center justify-between px-6 flex-shrink-0 z-[60] relative">
{/* Left: Logo */} {/* Left: Logo */}
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<span className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center text-white font-serif italic text-lg shadow-blue-600/30 shadow-md"> <img src="/texpixel-app-icon.svg" alt="TexPixel" className="w-8 h-8" />
T
</span>
<span className="text-xl font-bold text-gray-900 tracking-tight"> <span className="text-xl font-bold text-gray-900 tracking-tight">
TexPixel TexPixel
</span> </span>

50
src/components/__tests__/App.test.tsx
View File

@@ -1,7 +1,8 @@
import { fireEvent, render, screen } from '@testing-library/react'; import { fireEvent, render, screen, waitFor } from '@testing-library/react';
import { beforeEach, describe, expect, it, vi } from 'vitest'; import { beforeEach, describe, expect, it, vi } from 'vitest';
import App from '../../App'; import App from '../../App';
import { uploadService } from '../../lib/uploadService';
const { useAuthMock } = vi.hoisted(() => ({ const { useAuthMock } = vi.hoisted(() => ({
useAuthMock: vi.fn(), useAuthMock: vi.fn(),
@@ -57,7 +58,7 @@ vi.mock('../../components/LeftSidebar', () => ({
})); }));
vi.mock('../../components/FilePreview', () => ({ vi.mock('../../components/FilePreview', () => ({
default: () => <div>preview</div>, default: ({ file }: { file: { id: string } | null }) => <div>{file ? `preview:${file.id}` : 'preview-empty'}</div>,
})); }));
vi.mock('../../components/ResultPanel', () => ({ vi.mock('../../components/ResultPanel', () => ({
@@ -110,3 +111,48 @@ describe('App anonymous usage limit', () => {
expect(screen.queryByText('upload-modal')).not.toBeInTheDocument(); expect(screen.queryByText('upload-modal')).not.toBeInTheDocument();
}); });
}); });
describe('App initial selection', () => {
beforeEach(() => {
vi.clearAllMocks();
localStorage.clear();
localStorage.setItem('hasSeenGuide', 'true');
});
it('does not auto-select the first history record on initial load', async () => {
useAuthMock.mockReturnValue({
user: { id: 'u1' },
initializing: false,
});
vi.mocked(uploadService.getTaskList).mockResolvedValue({
total: 1,
task_list: [
{
task_id: 'task-1',
file_name: 'sample.png',
status: 2,
origin_url: 'https://example.com/sample.png',
task_type: 'FORMULA',
created_at: '2026-03-06T00:00:00Z',
latex: '',
markdown: 'content',
mathml: '',
mml: '',
image_blob: '',
docx_url: '',
pdf_url: '',
},
],
});
render(<App />);
await waitFor(() => {
expect(uploadService.getTaskList).toHaveBeenCalled();
});
expect(screen.getByText('preview-empty')).toBeInTheDocument();
expect(screen.queryByText('preview:task-1')).not.toBeInTheDocument();
});
});

57
src/components/__tests__/AuthModal.test.tsx
View File

@@ -4,6 +4,9 @@ import { describe, expect, it, vi } from 'vitest';
import AuthModal from '../AuthModal'; import AuthModal from '../AuthModal';
const useAuthMock = vi.fn(); const useAuthMock = vi.fn();
const signInMock = vi.fn().mockResolvedValue({ error: null });
const signUpMock = vi.fn().mockResolvedValue({ error: null });
const beginGoogleOAuthMock = vi.fn().mockResolvedValue({ error: null });
vi.mock('../../contexts/AuthContext', () => ({ vi.mock('../../contexts/AuthContext', () => ({
useAuth: () => useAuthMock(), useAuth: () => useAuthMock(),
@@ -28,21 +31,37 @@ vi.mock('../../contexts/LanguageContext', () => ({
passwordHint: '密码至少 6 位，建议使用字母和数字组合。', passwordHint: '密码至少 6 位，建议使用字母和数字组合。',
confirmPassword: '确认密码', confirmPassword: '确认密码',
passwordMismatch: '两次输入的密码不一致。', passwordMismatch: '两次输入的密码不一致。',
emailRequired: '请输入邮箱地址。',
emailInvalid: '请输入有效的邮箱地址。',
passwordRequired: '请输入密码。',
oauthRedirecting: '正在跳转 Google...', oauthRedirecting: '正在跳转 Google...',
}, },
}, },
}), }),
})); }));
const createAuthState = (overrides?: Record<string, unknown>) => ({
signIn: signInMock,
signUp: signUpMock,
beginGoogleOAuth: beginGoogleOAuthMock,
authPhase: 'idle',
authError: null,
...overrides,
});
describe('AuthModal', () => { describe('AuthModal', () => {
it('shows email required message for empty signin submit', async () => {
useAuthMock.mockReturnValue(createAuthState());
render(<AuthModal onClose={vi.fn()} />);
fireEvent.click(document.querySelector('button[type="submit"]') as HTMLButtonElement);
expect(await screen.findByText('请输入邮箱地址。')).toBeInTheDocument();
expect(signInMock).not.toHaveBeenCalled();
});
it('renders google oauth button', () => { it('renders google oauth button', () => {
useAuthMock.mockReturnValue({ useAuthMock.mockReturnValue(createAuthState());
signIn: vi.fn().mockResolvedValue({ error: null }),
signUp: vi.fn().mockResolvedValue({ error: null }),
beginGoogleOAuth: vi.fn().mockResolvedValue({ error: null }),
authPhase: 'idle',
authError: null,
});
render(<AuthModal onClose={vi.fn()} />); render(<AuthModal onClose={vi.fn()} />);
@@ -50,13 +69,7 @@ describe('AuthModal', () => {
}); });
it('disables inputs and submit while oauth redirecting', () => { it('disables inputs and submit while oauth redirecting', () => {
useAuthMock.mockReturnValue({ useAuthMock.mockReturnValue(createAuthState({ authPhase: 'oauth_redirecting' }));
signIn: vi.fn().mockResolvedValue({ error: null }),
signUp: vi.fn().mockResolvedValue({ error: null }),
beginGoogleOAuth: vi.fn().mockResolvedValue({ error: null }),
authPhase: 'oauth_redirecting',
authError: null,
});
render(<AuthModal onClose={vi.fn()} />); render(<AuthModal onClose={vi.fn()} />);
@@ -68,13 +81,7 @@ describe('AuthModal', () => {
}); });
it('switches between signin and signup with segmented tabs', () => { it('switches between signin and signup with segmented tabs', () => {
useAuthMock.mockReturnValue({ useAuthMock.mockReturnValue(createAuthState());
signIn: vi.fn().mockResolvedValue({ error: null }),
signUp: vi.fn().mockResolvedValue({ error: null }),
beginGoogleOAuth: vi.fn().mockResolvedValue({ error: null }),
authPhase: 'idle',
authError: null,
});
render(<AuthModal onClose={vi.fn()} />); render(<AuthModal onClose={vi.fn()} />);
@@ -85,13 +92,7 @@ describe('AuthModal', () => {
}); });
it('shows friendlier signup guidance', () => { it('shows friendlier signup guidance', () => {
useAuthMock.mockReturnValue({ useAuthMock.mockReturnValue(createAuthState());
signIn: vi.fn().mockResolvedValue({ error: null }),
signUp: vi.fn().mockResolvedValue({ error: null }),
beginGoogleOAuth: vi.fn().mockResolvedValue({ error: null }),
authPhase: 'idle',
authError: null,
});
render(<AuthModal onClose={vi.fn()} />); render(<AuthModal onClose={vi.fn()} />);

29
src/contexts/AuthContext.tsx
View File

@@ -1,4 +1,4 @@
import { createContext, useContext, useMemo, ReactNode, useCallback, useEffect, useReducer } from 'react'; import { createContext, useContext, useMemo, ReactNode, useCallback, useEffect, useReducer, useRef } from 'react';
import { authService } from '../lib/authService'; import { authService } from '../lib/authService';
import { ApiErrorMessages } from '../types/api'; import { ApiErrorMessages } from '../types/api';
import type { GoogleOAuthCallbackRequest, UserInfo } from '../types/api'; import type { GoogleOAuthCallbackRequest, UserInfo } from '../types/api';
@@ -147,14 +147,25 @@ export function AuthProvider({ children }: { children: ReactNode }) {
dispatch({ type: 'SIGN_OUT' }); dispatch({ type: 'SIGN_OUT' });
}, []); }, []);
const syncedTokenRef = useRef<string | null>(null);
useEffect(() => { useEffect(() => {
const currentUser = state.user;
const currentToken = state.token;
if (!currentUser || !currentToken) {
return;
}
// 已经为当前 token 同步过，跳过（防止 StrictMode 双调用或 effect 重复执行）
if (syncedTokenRef.current === currentToken) {
return;
}
syncedTokenRef.current = currentToken;
let cancelled = false; let cancelled = false;
const syncUserProfile = async () => { const syncUserProfile = async () => {
if (!state.user || !state.token) {
return;
}
try { try {
const profile = await authService.getUserInfo(); const profile = await authService.getUserInfo();
if (cancelled) { if (cancelled) {
@@ -164,11 +175,15 @@ export function AuthProvider({ children }: { children: ReactNode }) {
dispatch({ dispatch({
type: 'UPDATE_USER', type: 'UPDATE_USER',
payload: { payload: {
user: mergeUserProfile(state.user, profile), user: mergeUserProfile(currentUser, profile),
}, },
}); });
} catch { } catch {
// Keep token-derived identity if profile sync fails. // Keep token-derived identity if profile sync fails.
if (!cancelled) {
// 请求失败时重置，允许下次挂载时重试
syncedTokenRef.current = null;
}
} }
}; };
@@ -177,7 +192,7 @@ export function AuthProvider({ children }: { children: ReactNode }) {
return () => { return () => {
cancelled = true; cancelled = true;
}; };
}, [state.token, state.user]); }, [state.token]);
const value = useMemo<AuthContextType>(() => { const value = useMemo<AuthContextType>(() => {
const loadingPhases: AuthPhase[] = [ const loadingPhases: AuthPhase[] = [

12
src/lib/seoHelper.ts
View File

@@ -8,14 +8,14 @@ interface SEOContent {
const seoContent: Record<Language, SEOContent> = { const seoContent: Record<Language, SEOContent> = {
zh: { zh: {
title: '⚡️ TexPixel - 公式识别工具', title: 'TexPixel - AI 数学公式识别工具 | LaTeX、MathML OCR',
description: '在线公式识别工具，支持印刷体和手写体数学公式识别，快速准确地将图片中的数学公式转换为可编辑文本。', description: '免费 AI 数学公式识别工具，支持手写和印刷体公式识别，一键将图片或 PDF 中的数学公式转换为 LaTeX、MathML 和 Markdown 格式。',
keywords: '公式识别,数学公式,OCR,手写公式识别,印刷体识别,AI识别,数学工具,免费,混合文字识别,texpixel,TexPixel', keywords: '数学公式识别,LaTeX OCR,手写公式识别,公式转LaTeX,数学OCR,MathML转换,手写方程识别,公式识别,数学公式OCR,texpixel',
}, },
en: { en: {
title: '⚡️ TexPixel - Formula Recognition Tool', title: 'TexPixel - AI Math Formula Recognition | LaTeX, MathML OCR Tool',
description: 'Online formula recognition tool supporting printed and handwritten math formulas. Convert images to LaTeX, MathML, and Markdown quickly and accurately.', description: 'Free AI-powered math formula recognition tool. Convert handwritten or printed math formulas in images to LaTeX, MathML, and Markdown instantly. Supports PDF and image files.',
keywords: 'formula recognition,math formula,OCR,handwriting recognition,latex,mathml,markdown,AI recognition,math tool,free,texpixel,TexPixel,document recognition', keywords: 'math formula recognition,LaTeX OCR,handwriting math recognition,formula to latex,math OCR,MathML converter,handwritten equation recognition,texpixel',
}, },
}; };

6
src/lib/translations.ts
View File

@@ -62,6 +62,9 @@ export const translations = {
noAccount: 'No account? Register', noAccount: 'No account? Register',
continueWithGoogle: 'Google', continueWithGoogle: 'Google',
emailHint: 'Used only for sign-in and history sync.', emailHint: 'Used only for sign-in and history sync.',
emailRequired: 'Please enter your email address.',
emailInvalid: 'Please enter a valid email address.',
passwordRequired: 'Please enter your password.',
passwordHint: 'Use at least 6 characters. Letters and numbers are recommended.', passwordHint: 'Use at least 6 characters. Letters and numbers are recommended.',
confirmPassword: 'Confirm Password', confirmPassword: 'Confirm Password',
passwordMismatch: 'The two passwords do not match.', passwordMismatch: 'The two passwords do not match.',
@@ -167,6 +170,9 @@ export const translations = {
noAccount: '没有账号？去注册', noAccount: '没有账号？去注册',
continueWithGoogle: 'Google', continueWithGoogle: 'Google',
emailHint: '仅用于登录和同步记录。', emailHint: '仅用于登录和同步记录。',
emailRequired: '请输入邮箱地址。',
emailInvalid: '请输入有效的邮箱地址。',
passwordRequired: '请输入密码。',
passwordHint: '密码至少 6 位，建议使用字母和数字组合。', passwordHint: '密码至少 6 位，建议使用字母和数字组合。',
confirmPassword: '确认密码', confirmPassword: '确认密码',
passwordMismatch: '两次输入的密码不一致。', passwordMismatch: '两次输入的密码不一致。',

29
texpixel_icon/texpixel-app-icon.svg Normal file
View File

@@ -0,0 +1,29 @@
<svg width="1024" height="1024" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="line1" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="#ffffff" stop-opacity="0"/>
<stop offset="25%" stop-color="#ffffff" stop-opacity="0.92"/>
<stop offset="100%" stop-color="#ffffff" stop-opacity="0.92"/>
</linearGradient>
<linearGradient id="line2" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="#ffffff" stop-opacity="0"/>
<stop offset="30%" stop-color="#ffffff" stop-opacity="0.62"/>
<stop offset="100%" stop-color="#ffffff" stop-opacity="0.62"/>
</linearGradient>
<linearGradient id="line3" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="#ffffff" stop-opacity="0"/>
<stop offset="28%" stop-color="#ffffff" stop-opacity="0.38"/>
<stop offset="100%" stop-color="#ffffff" stop-opacity="0.38"/>
</linearGradient>
<linearGradient id="line4" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="#ffffff" stop-opacity="0"/>
<stop offset="35%" stop-color="#ffffff" stop-opacity="0.2"/>
<stop offset="100%" stop-color="#ffffff" stop-opacity="0.2"/>
</linearGradient>
</defs>
<rect x="4" y="4" width="120" height="120" rx="28" fill="#000000"/>
<rect x="24" y="42" width="74" height="3" rx="1.5" fill="url(#line1)"/>
<rect x="26" y="56" width="56" height="3" rx="1.5" fill="url(#line2)"/>
<rect x="24" y="70" width="64" height="3" rx="1.5" fill="url(#line3)"/>
<rect x="28" y="84" width="44" height="3" rx="1.5" fill="url(#line4)"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

28
texpixel_icon/texpixel-favicon-dark.svg Normal file
View File

@@ -0,0 +1,28 @@
<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="line1" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="#ffffff" stop-opacity="0"/>
<stop offset="20%" stop-color="#ffffff" stop-opacity="0.95"/>
<stop offset="100%" stop-color="#ffffff" stop-opacity="0.95"/>
</linearGradient>
<linearGradient id="line2" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="#ffffff" stop-opacity="0"/>
<stop offset="24%" stop-color="#ffffff" stop-opacity="0.65"/>
<stop offset="100%" stop-color="#ffffff" stop-opacity="0.65"/>
</linearGradient>
<linearGradient id="line3" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="#ffffff" stop-opacity="0"/>
<stop offset="22%" stop-color="#ffffff" stop-opacity="0.4"/>
<stop offset="100%" stop-color="#ffffff" stop-opacity="0.4"/>
</linearGradient>
<linearGradient id="line4" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="#ffffff" stop-opacity="0"/>
<stop offset="28%" stop-color="#ffffff" stop-opacity="0.22"/>
<stop offset="100%" stop-color="#ffffff" stop-opacity="0.22"/>
</linearGradient>
</defs>
<rect x="3" y="7" width="24" height="2.2" rx="1.1" fill="url(#line1)"/>
<rect x="4" y="12.5" width="18" height="2.2" rx="1.1" fill="url(#line2)"/>
<rect x="3" y="18" width="20" height="2.2" rx="1.1" fill="url(#line3)"/>
<rect x="5" y="23.5" width="14" height="2.2" rx="1.1" fill="url(#line4)"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

28
texpixel_icon/texpixel-favicon-light.svg Normal file
View File

@@ -0,0 +1,28 @@
<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="line1" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="#111111" stop-opacity="0"/>
<stop offset="20%" stop-color="#111111" stop-opacity="0.9"/>
<stop offset="100%" stop-color="#111111" stop-opacity="0.9"/>
</linearGradient>
<linearGradient id="line2" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="#111111" stop-opacity="0"/>
<stop offset="24%" stop-color="#111111" stop-opacity="0.6"/>
<stop offset="100%" stop-color="#111111" stop-opacity="0.6"/>
</linearGradient>
<linearGradient id="line3" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="#111111" stop-opacity="0"/>
<stop offset="22%" stop-color="#111111" stop-opacity="0.35"/>
<stop offset="100%" stop-color="#111111" stop-opacity="0.35"/>
</linearGradient>
<linearGradient id="line4" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="#111111" stop-opacity="0"/>
<stop offset="28%" stop-color="#111111" stop-opacity="0.18"/>
<stop offset="100%" stop-color="#111111" stop-opacity="0.18"/>
</linearGradient>
</defs>
<rect x="3" y="7" width="24" height="2.2" rx="1.1" fill="url(#line1)"/>
<rect x="4" y="12.5" width="18" height="2.2" rx="1.1" fill="url(#line2)"/>
<rect x="3" y="18" width="20" height="2.2" rx="1.1" fill="url(#line3)"/>
<rect x="5" y="23.5" width="14" height="2.2" rx="1.1" fill="url(#line4)"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB