Clean deploy

.dockerignore

@@ -0,0 +1,104 @@
+# Dependencies
+node_modules/
+frontend/node_modules/
+
+# Build output (will be created during build)
+dist/
+frontend/dist/
+frontend/build/
+
+# Environment files (use Docker env vars instead)
+.env
+.env.local
+.env.*.local
+.env.development
+.env.production
+
+# Generated videos (mounted as volume)
+public/videos/*.mp4
+public/videos/*.mov
+public/videos/*.avi
+
+# Git
+.git/
+.gitignore
+.gitattributes
+
+# IDE and editors
+.vscode/
+.idea/
+*.swp
+*.swo
+*~
+.project
+.classpath
+.settings/
+
+# Logs
+logs/
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# OS files
+.DS_Store
+.DS_Store?
+._*
+.Spotlight-V100
+.Trashes
+ehthumbs.db
+Thumbs.db
+Desktop.ini
+
+# Temp files
+tmp/
+temp/
+*.tmp
+*.temp
+.cache/
+
+# Test files
+coverage/
+.nyc_output/
+test-results/
+
+# Documentation and project files
+README.md
+CHANGELOG.md
+LICENSE
+*.md
+docs/
+
+# Docker files
+docker-compose*.yml
+Dockerfile*
+.dockerignore
+
+# CI/CD
+.github/
+.gitlab-ci.yml
+.travis.yml
+
+# Python cache (from Manim)
+__pycache__/
+*.py[cod]
+*$py.class
+.Python
+
+# Redis dump
+dump.rdb
+*.rdb
+
+# Static assets (examples)
+static/gifs/
+
+# Other
+.editorconfig
+.prettierrc
+.eslintrc*
+tsconfig*.json
+vite.config.ts
+tailwind.config.js
+postcss.config.js

.env.example

@@ -0,0 +1,76 @@
+# =============================================================================
+# ManimCat 配置文件说明
+# =============================================================================
+# 优先级说明：CUSTOM_API_URL 优先级最高
+# - 如果设置了 CUSTOM_API_URL：使用自定义的 OpenAI 兼容 API 端点
+# - 如果 CUSTOM_API_URL 为空：使用官方 OpenAI API (https://api.openai.com/v1)
+# =============================================================================
+
+# -----------------------------------------------------------------------------
+# 认证配置（可选）
+# -----------------------------------------------------------------------------
+# MANIMCAT_API_KEY: 用于保护 API 端点的自定义密钥
+# - 设置此值可以防止未经授权的访问
+# - 为空时跳过认证
+# - 如果在这里设置，前端设置中必须使用相同的值
+MANIMCAT_API_KEY=
+
+# -----------------------------------------------------------------------------
+# AI 服务配置（必填）
+# -----------------------------------------------------------------------------
+# OPENAI_API_KEY: AI 代码生成所需的 API 密钥
+# - 使用官方 OpenAI 或自定义兼容 API 时都需要填写
+# - 官方 OpenAI：从 https://platform.openai.com/api-keys 获取
+# - 自定义 API：使用你的服务提供商提供的密钥
+OPENAI_API_KEY=your-openai-api-key-here
+
+# OPENAI_MODEL: 使用的 AI 模型（可选，默认值：glm-4-flash）
+# - 支持任何 OpenAI 兼容的模型
+# - 官方 OpenAI 示例：gpt-4o-mini, gpt-4o, gpt-3.5-turbo
+# - 第三方服务示例：glm-4-flash（智谱 AI）, @minimaxai/minimax-m2.1
+# - 本地模型：使用你的自定义 API 支持的任何模型名称
+OPENAI_MODEL=glm-4-flash
+
+# CUSTOM_API_URL: 自定义 OpenAI 兼容 API 端点（可选）
+# - 优先级最高：如果设置，则使用此端点而非官方 OpenAI API
+# - 为空时使用：https://api.openai.com/v1（官方 OpenAI）
+# - 必须兼容 OpenAI API（支持 /chat/completions 端点）
+# - 常见示例：
+#   - Together AI：https://api.together.xyz/v1
+#   - LocalAI：http://localhost:8080/v1
+#   - Ollama：http://localhost:11434/v1
+#   - 第三方代理：https://proxy/bin/nvidia/v1
+CUSTOM_API_URL=
+
+# -----------------------------------------------------------------------------
+# AI 参数配置（可选）
+# -----------------------------------------------------------------------------
+# AI_TEMPERATURE: 控制 AI 输出的随机性（默认值：0.7）
+# - 取值范围：0.0 - 2.0
+# - 数值越低：输出越确定、越聚焦
+# - 数值越高：输出越有创意、越多样
+# AI_TEMPERATURE=0.7
+
+# AI_MAX_TOKENS: AI 响应的最大 token 数（默认值：1200）
+# AI_MAX_TOKENS=1200
+
+# OPENAI_TIMEOUT: 请求超时时间（毫秒）（默认值：60000）
+# OPENAI_TIMEOUT=60000
+
+# -----------------------------------------------------------------------------
+# 两阶段 AI 生成配置
+# -----------------------------------------------------------------------------
+# DESIGNER_TEMPERATURE: 概念设计者的温度参数（默认值：0.8）
+# - 比代码生成者稍高，以获得更有创意的场景设计
+# DESIGNER_TEMPERATURE=0.8
+
+# DESIGNER_MAX_TOKENS: 概念设计者的最大 token 数（默认值：800）
+# DESIGNER_MAX_TOKENS=800
+
+# -----------------------------------------------------------------------------
+# 应用设置
+# -----------------------------------------------------------------------------
+# NODE_ENV: 运行环境
+# - development（开发环境）
+# - production（生产环境）
+NODE_ENV=development

.env.huggingface

@@ -0,0 +1,117 @@
+# ManimCat HuggingFace Spaces 环境变量配置
+# 在 HuggingFace Space Settings → Variables and secrets 中配置这些变量
+
+# ==================== 必需配置 ====================
+
+# OpenAI API Key (必需)
+# 用于 AI 代码生成，支持 OpenAI 或兼容的 API
+OPENAI_API_KEY=your-openai-api-key-here
+
+# ==================== 可选配置 ====================
+
+# OpenAI 模型 (可选，默认 glm-4-flash)
+# 推荐模型:
+# - glm-4-flash (智谱 AI，快速且便宜)
+# - gpt-4o-mini (OpenAI，轻量级)
+# - gpt-4-turbo (OpenAI，高性能)
+OPENAI_MODEL=glm-4-flash
+
+# 自定义 API 端点 (可选)
+# 留空使用 OpenAI 官方 API
+# 示例:
+# - 智谱 AI: https://open.bigmodel.cn/api/paas/v4
+# - Together AI: https://api.together.xyz/v1
+# - LocalAI: http://localhost:8080/v1
+CUSTOM_API_URL=
+
+# ManimCat API 认证密钥 (可选但强烈推荐)
+# 设置后，所有 API 请求需在 Header 中包含: x-api-key: YOUR_KEY
+# 留空则跳过认证 (仅推荐测试环境)
+MANIMCAT_API_KEY=
+
+# ==================== 系统配置 ====================
+
+# Node 环境 (固定为 production)
+NODE_ENV=production
+
+# 端口 (HuggingFace Spaces 必须是 7860)
+PORT=7860
+
+# Redis 配置 (使用内置 Redis)
+REDIS_HOST=localhost
+REDIS_PORT=6379
+REDIS_DB=0
+REDIS_MAXMEMORY=256mb
+
+# ==================== AI 配置 ====================
+
+# AI 温度 (控制输出随机性，0-2)
+AI_TEMPERATURE=0.7
+
+# AI 最大 Token 数
+AI_MAX_TOKENS=1200
+
+# OpenAI 请求超时 (毫秒)
+OPENAI_TIMEOUT=60000
+
+# ==================== 缓存配置 ====================
+
+# 启用概念缓存 (避免重复生成相同内容)
+ENABLE_CACHING=true
+
+# 缓存过期时间 (秒，默认 30 天)
+CACHE_TTL=2592000
+
+# ==================== 任务队列配置 ====================
+
+# Bull 队列并发数 (根据硬件配置调整)
+# - CPU basic: 1-2
+# - CPU upgrade: 2-4
+# - GPU: 4-8
+WORKERS=2
+
+# 任务超时配置 (毫秒)
+REQUEST_TIMEOUT=30000   # 请求超时 30 秒
+JOB_TIMEOUT=600000      # 任务超时 10 分钟
+MANIM_TIMEOUT=300000    # Manim 渲染超时 5 分钟
+
+# ==================== 文件系统配置 ====================
+
+# 视频输出目录
+VIDEO_OUTPUT_DIR=public/videos
+
+# 临时文件目录
+TEMP_DIR=tmp
+
+# ==================== CORS 配置 ====================
+
+# CORS 允许的来源 (生产环境应设置具体域名)
+CORS_ORIGIN=*
+
+# ==================== 日志配置 ====================
+
+# 日志级别 (debug, info, warn, error)
+LOG_LEVEL=info
+
+# ==================== 显示配置 ====================
+
+# Xvfb 显示编号
+DISPLAY=:99
+
+# Matplotlib 后端
+MPLBACKEND=Agg
+
+# ==================== HuggingFace Spaces 特定配置 ====================
+
+# Space 名称 (可选，用于日志)
+SPACE_NAME=
+
+# Space 作者 (可选，用于日志)
+SPACE_AUTHOR=
+
+# 注意事项:
+# 1. 所有敏感信息 (API Key) 必须在 HF Space Settings 中配置，不要提交到代码仓库
+# 2. PORT 必须是 7860，这是 HF Spaces 的固定端口
+# 3. Redis 使用内置实例，REDIS_HOST 必须是 localhost
+# 4. 根据 HF Space 的硬件配置调整 WORKERS 和超时时间
+# 5. 启用 MANIMCAT_API_KEY 以保护您的服务免受滥用

.env.production

@@ -0,0 +1,63 @@
+# ManimCat Production Environment Variables
+# 生产环境配置文件
+
+# ===========================================
+# 服务配置 / Service Configuration
+# ===========================================
+
+# Node 环境（请勿修改）
+NODE_ENV=production
+
+# 服务端口
+PORT=3000
+
+# ===========================================
+# Redis 配置 / Redis Configuration
+# ===========================================
+
+# Redis 主机地址（Docker Compose 中为 "redis"）
+REDIS_HOST=redis
+
+# Redis 端口
+REDIS_PORT=6379
+
+# Redis 密码（可选，如果 Redis 需要认证）
+# REDIS_PASSWORD=
+
+# Redis 数据库编号
+REDIS_DB=0
+
+# ===========================================
+# OpenAI 配置 / OpenAI Configuration
+# ===========================================
+
+# OpenAI API Key（必填）
+# 从 https://platform.openai.com/api-keys 获取
+OPENAI_API_KEY=your-openai-api-key-here
+
+# OpenAI 模型选择
+# 默认使用 glm-4-flash（实际支持任何 OpenAI 兼容模型）
+# 示例: gpt-4o-mini, gpt-4-turbo, glm-4-flash 等
+OPENAI_MODEL=glm-4-flash
+
+# 自定义 API 端点（可选）
+# 如果使用 OpenAI 官方 API，请留空
+# 示例 - Together AI: https://api.together.xyz/v1
+# 示例 - LocalAI: http://localhost:8080/v1
+CUSTOM_API_URL=
+
+# ===========================================
+# 安全配置 / Security Configuration
+# ===========================================
+
+# API 认证密钥（可选）
+# 设置后将启用 API 认证保护
+# 如果不需要认证，请留空或删除此行
+# MANIMCAT_API_KEY=
+
+# ===========================================
+# 显示配置 / Display Configuration
+# ===========================================
+
+# X11 虚拟显示（Xvfb 使用，请勿修改）
+DISPLAY=:99

.gitignore

@@ -0,0 +1,53 @@
+# Dependencies
+node_modules/
+.cursor/
+
+# Python
+venv/
+__pycache__/
+*.pyc
+
+# Build output
+dist/
+.motia/
+
+# Environment
+.env
+.env.local
+
+# Generated files
+public/videos/*
+public/videos/.gitkeep
+media/
+static/videos/
+static/gifs/
+
+# Logs
+*.log
+
+# OS files
+.DS_Store
+Thumbs.db
+
+# IDE
+.vscode/
+.idea/
+
+# Temp files
+tmp/
+*.tmp
+
+# AI/Dev tools
+.claude/
+
+# MD files (except README)
+*.md
+!README.md
+!frontend/README.md
+!static/gifs/README.md
+
+# Flow type files
+*.flow
+
+# Batch scripts
+*.bat

Dockerfile

@@ -0,0 +1,44 @@
+# =========================================
+# 阶段 1: 准备 Node 环境
+# =========================================
+FROM node:18-bookworm-slim AS node_base
+
+# =========================================
+# 阶段 2: 构建最终镜像 (基于 Manim)
+# =========================================
+FROM manimcommunity/manim:stable
+USER root
+
+# 1. 复制 Node.js (从 node_base 偷过来)
+COPY --from=node_base /usr/local/bin /usr/local/bin
+COPY --from=node_base /usr/local/lib/node_modules /usr/local/lib/node_modules
+
+# 2. 【关键】安装 Redis 和 中文字体 (fonts-noto-cjk)
+# 使用阿里云源加速
+RUN sed -i 's/deb.debian.org/mirrors.aliyun.com/g' /etc/apt/sources.list.d/debian.sources && \
+    apt-get update && \
+    apt-get install -y redis-server fonts-noto-cjk
+
+WORKDIR /app
+
+# 3. 复制 package.json
+COPY package.json package-lock.json* ./
+
+# 4. 设置 npm 淘宝源
+RUN npm config set registry https://registry.npmmirror.com
+
+# 5. 安装依赖
+RUN npm install
+
+# 6. 复制源码并构建 React
+COPY . .
+RUN npm run build
+
+# 7. 启动脚本
+RUN printf '#!/bin/bash\nredis-server --daemonize yes\nnpm run start' > /app/start.sh && chmod +x /app/start.sh
+
+ENV PORT=7860
+EXPOSE 7860
+
+CMD ["/app/start.sh"]
+

Dockerfile.huggingface

@@ -0,0 +1,43 @@
+# =========================================
+# 阶段 1: 准备 Node 环境
+# =========================================
+FROM node:18-bookworm-slim AS node_base
+
+# =========================================
+# 阶段 2: 构建最终镜像 (基于 Manim)
+# =========================================
+FROM manimcommunity/manim:stable
+USER root
+
+# 1. 复制 Node.js (从 node_base 偷过来)
+COPY --from=node_base /usr/local/bin /usr/local/bin
+COPY --from=node_base /usr/local/lib/node_modules /usr/local/lib/node_modules
+
+# 2. 【关键】安装 Redis 和 中文字体 (fonts-noto-cjk)
+# 使用阿里云源加速
+RUN sed -i 's/deb.debian.org/mirrors.aliyun.com/g' /etc/apt/sources.list.d/debian.sources && \
+    apt-get update && \
+    apt-get install -y redis-server fonts-noto-cjk
+
+WORKDIR /app
+
+# 3. 复制 package.json
+COPY package.json package-lock.json* ./
+
+# 4. 设置 npm 淘宝源
+RUN npm config set registry https://registry.npmmirror.com
+
+# 5. 安装依赖
+RUN npm install
+
+# 6. 复制源码并构建 React
+COPY . .
+RUN npm run build
+
+# 7. 启动脚本
+RUN printf '#!/bin/bash\nredis-server --daemonize yes\nnpm run start' > /app/start.sh && chmod +x /app/start.sh
+
+ENV PORT=7860
+EXPOSE 7860
+
+CMD ["/app/start.sh"]

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Rohit Ghumare
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,279 @@
+<div align="center">
+
+<!-- 顶部装饰线 - 统一为深灰色调 -->
+<img width="100%" src="https://capsule-render.vercel.app/api?type=waving&color=455A64&height=120&section=header" />
+
+<br>
+  
+<img src="public/logo.svg" width="200" alt="ManimCat Logo" />
+
+<!-- 装饰：猫咪足迹 -->
+<div style="opacity: 0.3; margin: 20px 0;">
+  <img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Animals/Paw%20Prints.png" width="40" alt="paws" />
+</div>
+
+<h1>
+  <picture>
+    <img src="https://readme-typing-svg.herokuapp.com?font=Fira+Code&size=40&duration=3000&pause=1000&color=455A64&center=true&vCenter=true&width=435&lines=ManimCat+%F0%9F%90%BE" alt="ManimCat" />
+  </picture>
+</h1>
+
+<!-- 装饰：数学符号分隔 -->
+<p align="center">
+  <span style="font-family: monospace; font-size: 24px; color: #90A4AE;">
+    ∫ &nbsp; ∑ &nbsp; ∂ &nbsp; ∞
+  </span>
+</p>
+
+<p align="center">
+  <strong>🎬 AI-Powered Mathematical Animation Generator</strong>
+</p>
+
+<p align="center">
+  让数学动画创作变得简单优雅 · 基于 Manim 与大语言模型
+</p>
+
+<!-- 装饰：几何点阵分隔 -->
+<div style="margin: 30px 0;">
+  <span style="color: #CFD8DC; font-size: 20px;">◆ &nbsp; ◆ &nbsp; ◆</span>
+</div>
+
+<p align="center">
+  <img src="https://img.shields.io/badge/ManimCE-0.19.2-455A64?style=for-the-badge&logo=python&logoColor=white" alt="ManimCE" />
+  <img src="https://img.shields.io/badge/React-19.2.0-455A64?style=for-the-badge&logo=react&logoColor=white" alt="React" />
+  <img src="https://img.shields.io/badge/Node.js-18+-455A64?style=for-the-badge&logo=node.js&logoColor=white" alt="Node.js" />
+  <img src="https://img.shields.io/badge/License-MIT-607D8B?style=for-the-badge" alt="License" />
+</p>
+
+<p align="center" style="font-size: 18px;">
+  <a href="#前言"><strong>前言</strong></a> •
+  <a href="#样例"><strong>样例</strong></a> •
+  <a href="#技术"><strong>技术</strong></a> •
+  <a href="#部署"><strong>部署</strong></a> •
+  <a href="#贡献"><strong>贡献</strong></a> •
+  <a href="#思路"><strong>思路</strong></a> •
+  <a href="#现状"><strong>现状</strong></a>
+</p>
+
+<br>
+
+<!-- 底部装饰线 - 统一为深灰色调 -->
+<img width="100%" src="https://capsule-render.vercel.app/api?type=waving&color=455A64&height=100&section=footer" />
+
+</div>
+
+<br>
+
+## 前言
+
+很荣幸在这里介绍我的新项目ManimCat，它是~一只猫~
+
+本项目基于[manim-video-generator](https://github.com/rohitg00/manim-video-generator)架构级重构与二次开发而来，在此感谢原作者 Rohit Ghumare。我重写了整个前后端架构，解决了原版在并发和渲染稳定性上的痛点，并加以个人审美设计与应用的理想化改进。
+
+ ManimCat 是一个基于 AI 的数学动画生成平台，致力于让数学教师使用manim代码生成视频应用到课堂与教学之中。
+
+用户只需输入自然语言描述，系统便会通过 AI 自动生成 Manim 代码并渲染出精美的数学可视化视频，支持 LaTeX 公式、模板化生成以及代码错误自动修复，让复杂概念的动态展示变得触手可及。
+
+
+## 样例
+
+期待ing！
+
+## 技术
+
+### 技术栈
+
+**后端**
+- Express.js 4.18.0 + TypeScript 5.9.3
+- Bull 4.16.5 + ioredis 5.9.2（Redis 任务队列）
+- OpenAI SDK 4.50.0
+- Zod 3.23.0（数据验证）
+
+**前端**
+- React 19.2.0 + TypeScript 5.9.3
+- Vite 7.2.4
+- TailwindCSS 3.4.19
+- react-syntax-highlighter 16.1.0
+
+**系统依赖**
+- Python 3.11
+- Manim Community Edition 0.19.2
+- LaTeX（texlive）
+- ffmpeg + Xvfb
+
+**部署**
+- Docker + Docker Compose
+- Redis 7
+
+### 技术路线
+
+```
+用户请求 → POST /api/generate
+           ↓
+       [认证中间件]
+           ↓
+       [Bull 任务队列]
+           ↓
+    ┌───────────────────────────────────┐
+    │     视频生成处理器            │
+    ├───────────────────────────────────┤
+    │ 1. 检查概念缓存              │
+    │ 2. 概念分析                  │
+    │    - LaTeX 检测              │
+    │    - 模板匹配                 │
+    │    - AI 生成（两阶段）        │
+    │      ├─ 阶段1: 概念设计师      │
+    │      └─ 阶段2: 代码生成者      │
+    │ 3. 代码重试管理器             │
+    │    ├─ 首次生成代码 → 渲染     │
+    │    ├─ 失败 → 检查错误可修复性  │
+    │    ├─ 重试循环（最多4次）       │
+    │    │   ├─ 发送完整对话历史      │
+    │    │   ├─ AI 修复代码          │
+    │    │   └─ 重新渲染             │
+    │    └─ 成功/失败 → 存储结果     │
+    │ 4. 存储结果到 Redis           │
+    └───────────────────���───────────────┘
+           ↓
+      前端轮询状态
+           ↓
+    GET /api/jobs/:jobId
+```
+
+**重试机制说明：**
+- 概念设计师结果会保存，不需要重复设计
+- 每次重试都发送完整的对话历史（原始提示词 + 历史代码 + 错误信息）
+- 最多重试 4 次，失败后任务标记为失败
+
+### 环境变量配置
+
+| 环境变量 | 默认值 | 说明 |
+|---------|--------|------|
+| `PORT` | `3000` | 后端服务端口 |
+| `REDIS_URL` | `redis://localhost:6379` | Redis 连接地址 |
+| `OPENAI_API_KEY` | - | OpenAI API Key（必需） |
+| `OPENAI_MODEL` | `glm-4-flash` | 使用的 AI 模型 |
+| `OPENAI_TIMEOUT` | `600000` | OpenAI 请求超时时间（毫秒） |
+| `AI_TEMPERATURE` | `0.7` | AI 温度参数（0-1） |
+| `AI_MAX_CODE_TOKENS` | `1200` | 代码生成最大 Token 数 |
+| `DESIGNER_TEMPERATURE` | `0.8` | 概念设计师温度参数 |
+| `DESIGNER_MAX_TOKENS` | `800` | 概念设计师最大 Token 数 |
+| `ENABLE_AI_CODE_FIX` | `true` | 是否启用 AI 代码修复 |
+| `CODE_RETRY_MAX_RETRIES` | `4` | 代码重试最大次数 |
+| `CUSTOM_API_URL` | - | 自定义 API 地址 |
+| `ENABLE_JOB_CACHE` | `true` | 是否启用任务缓存 |
+| `CACHE_TTL_SECONDS` | `3600` | 缓存过期时间（秒） |
+
+**示例 `.env` 文件：**
+
+```bash
+PORT=3000
+REDIS_URL=redis://localhost:6379
+OPENAI_API_KEY=your-api-key-here
+OPENAI_MODEL=glm-4-flash
+AI_TEMPERATURE=0.7
+CODE_RETRY_MAX_RETRIES=4
+```
+
+## 部署
+
+请查看[部署文档](DEPLOYMENT.md)。
+
+## 贡献
+
+我对原作品进行了一些修改和重构，使其更符合我的设计想法：
+
+  1. 框架架构重构
+
+  - 后端使用 Express.js + Bull 任务队列架构
+
+  2. 前后端分离
+
+  - 前后端分离，React + TypeScript + Vite 独立前端
+
+  3. 存储方案升级
+
+  - Redis 存储（任务结果、状态、缓存，支持持久化）
+
+  4. 任务队列系统
+
+  - Bull + Redis 任务队列，支持重试、超时、指数退避
+
+  5. 前端技术栈
+
+  - React 19 + TailwindCSS + react-syntax-highlighter
+
+  6. 项目结构
+
+  - src/{config,middlewares,routes,services,queues,prompts,types,utils}/
+    frontend/src/{components,hooks,lib,types}/
+
+  7. 新增功能
+
+
+  - CORS 配置中间件
+
+  - 前端主题切换、设置模态框等组件
+
+  - 增加对第三方oai格式的请求支持
+
+  - 支持第三方自定义api
+
+  - 增加重试机制，增加前后端状态查询
+
+  - 重构UI，重构提示词，采取强注入manim api规范的方式
+
+  - 增加前端自定义视频参数
+
+  - 支持内存查询端点
+
+  - 优化提示词管理系统
+
+  - 对AI的输出结合提示词进行高度优化的正则清理，适配思考模型
+
+  ## 思路
+
+  1. 在原作者使用AI一键生成manim视频并且后端渲染的基础上，增加了fallback机制，提升弱模型的生成完成度
+
+  2. 考虑到多数AI的manim语料训练并不多，为了降低AI幻觉率，采用提示词工程的方法，强注入manimv0.19.2的api索引表知识（自行爬取清洗制作）
+
+  ## 现状
+
+目前仍在完善项目，这只是第一个预览版本。我将致力于设计出更好的提示词与fallback流程。目标是可以对一道中国高考数学题进行完整的可视化。以下是建设的计划：
+
+- 优化提示词，生成更长篇幅的Manim代码和更精准的效果
+- 增加调度和重试功能 
+- 增加一定的验证页面，以防止滥用 （已经完成）
+- 增加自定义模式功能，使用不同提示词生成不同视频
+- 增加迭代功能，延长生成代码和视频长度
+- 提供可能的打包版本，让非开发者可以本地实现项目
+
+##  开源与版权声明 (License & Copyright)
+
+### 1. 软件协议 (Software License)
+本项目后端架构及前端部分实现参考/使用了 [manim-video-generator](https://github.com/rohitg00/manim-video-generator) 的核心思想。
+*   继承部分代码遵循 **MIT License**。
+*   本项目新增的重构代码、任务队列逻辑及前端组件，同样以 **MIT License** 向开源社区开放。
+
+### 2. 核心资产版权声明 (Core Assets - **PROHIBITED FOR COMMERCIAL USE**)
+**以下内容为本人（ManimCat 作者）原创，严禁任何形式的商用行为：**
+
+*   **Prompt Engineering（提示词工程）**：本项目中 `src/prompts/` 目录下所有高度优化的 Manim 代码生成提示词及逻辑，均为本人原创。
+*   **API Index Data**：本人自行爬取、清洗并制作的 Manim v0.18.2 API 索引表及相关强约束规则。
+*   **特定算法逻辑**：针对思考模型的正则清理算法及 fallback 容错机制。
+
+**未经本人书面许可，任何人不得将上述“核心资产”用于：**
+1.  直接打包作为付费产品销售。
+2.  集成在付费订阅制的商业 AI 服务中。
+3.  在未注明出处的情况下进行二次分发并获利。
+
+> 事实上，作者已经关注到市面上存在一些闭源商业项目，正利用类似的 AI + Manim 思路向数学教育工作者收取高额费用进行盈利。然而，开源社区目前仍缺乏针对教育场景深度优化的成熟项目。
+
+> ManimCat 的诞生正是为了对标并挑战这些闭源商业软件。 我希望通过开源的方式，让每一位老师都能廉价地享受到 AI 带来的教学可视化便利————你只需要支付api的费用，幸运的是，对于优秀的中国LLM大模型来说，这些花费很廉价。为了保护这一愿景不被商业机构剽窃并反向收割用户，我坚决禁止任何对本项目核心提示词及索引数据的商业授权。
+
+
+## 维护说明
+
+由于作者精力有限（个人业余兴趣开发者，非专业背景），目前完全无法对外部代码进行有效的审查和长期维护。因此，本项目暂不支持团队协同开发，不接受 PR。感谢理解。
+
+如果你有好的建议或发现了 Bug，欢迎提交 Issue 进行讨论，我会根据自己的节奏进行改进。如果你希望在本项目基础上进行大规模修改，欢迎 Fork 出属于你自己的版本。

docker-compose.yml

@@ -0,0 +1,83 @@
+# Docker Compose for ManimCat
+# Production-ready with Redis for task queue and state management
+
+version: '3.8'
+
+services:
+  redis:
+    image: redis:7-alpine
+    container_name: manim-redis
+    ports:
+      - "${REDIS_PORT:-6379}:6379"
+    volumes:
+      - redis-data:/data
+    restart: unless-stopped
+    healthcheck:
+      test: ["CMD", "redis-cli", "ping"]
+      interval: 5s
+      timeout: 3s
+      retries: 10
+      start_period: 5s
+    command: redis-server --appendonly yes --maxmemory 256mb --maxmemory-policy allkeys-lru
+    networks:
+      - manimcat-network
+
+  manimcat:
+    build:
+      context: .
+      dockerfile: Dockerfile
+      args:
+        - NODE_ENV=production
+    image: manimcat:latest
+    container_name: manimcat
+    ports:
+      - "${PORT:-3000}:3000"
+    environment:
+      - NODE_ENV=production
+      - PORT=3000
+      - REDIS_HOST=redis
+      - REDIS_PORT=6379
+      - REDIS_DB=${REDIS_DB:-0}
+      - OPENAI_API_KEY=${OPENAI_API_KEY:?OPENAI_API_KEY is required}
+      - OPENAI_MODEL=${OPENAI_MODEL:-glm-4-flash}
+      - CUSTOM_API_URL=${CUSTOM_API_URL:-}
+      - MANIMCAT_API_KEY=${MANIMCAT_API_KEY:-}
+      - DISPLAY=:99
+    volumes:
+      # Persist generated videos
+      - video-storage:/app/public/videos
+      # Temp directory for rendering
+      - manim-tmp:/app/tmp
+    depends_on:
+      redis:
+        condition: service_healthy
+    restart: unless-stopped
+    healthcheck:
+      test: ["CMD-SHELL", "node -e \"require('http').get('http://localhost:3000/health', (r) => process.exit(r.statusCode === 200 ? 0 : 1))\""]
+      interval: 30s
+      timeout: 10s
+      retries: 3
+      start_period: 40s
+    networks:
+      - manimcat-network
+    # Resource limits (adjust based on your needs)
+    deploy:
+      resources:
+        limits:
+          cpus: '2'
+          memory: 4G
+        reservations:
+          cpus: '1'
+          memory: 2G
+
+networks:
+  manimcat-network:
+    driver: bridge
+
+volumes:
+  manim-tmp:
+    driver: local
+  redis-data:
+    driver: local
+  video-storage:
+    driver: local

frontend/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

frontend/eslint.config.js

@@ -0,0 +1,23 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+  },
+])

frontend/index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <!-- 直接内嵌 SVG 作为 favicon -->
+    <link rel="icon" href="data:image/svg+xml,<svg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'><rect width='512' height='512' fill='%23faf9f5'/><path d='M 100 400 V 140 L 230 300 L 360 140 V 260' fill='none' stroke='%23455a64' stroke-width='55' stroke-linecap='round' stroke-linejoin='round'/><g transform='translate(360, 340)'><path d='M -70 40 C -80 0, -80 -30, -50 -60 L -20 -30 L 20 -30 L 50 -60 C 80 -30, 80 0, 70 40 C 60 70, -60 70, -70 40 Z' fill='%23455a64'/><circle cx='-35' cy='-5' r='18' fill='%23ffffff'/><circle cx='35' cy='-5' r='18' fill='%23ffffff'/><circle cx='-38' cy='-5' r='6' fill='%23455a64'/><circle cx='32' cy='-5' r='6' fill='%23455a64'/></g></svg>" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>ManimCat - 数学动画生成器</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

frontend/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "manim-cat-frontend",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@types/react-syntax-highlighter": "^15.5.13",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-syntax-highlighter": "^16.1.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@types/node": "^24.10.1",
+    "@types/react": "^19.2.5",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "autoprefixer": "^10.4.23",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^3.4.19",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.46.4",
+    "vite": "^7.2.4"
+  }
+}

frontend/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

frontend/src/App.css

@@ -0,0 +1,42 @@
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}

frontend/src/App.tsx

@@ -0,0 +1,148 @@
+// 主应用组件
+
+import { useState } from 'react';
+import { useGeneration } from './hooks/useGeneration';
+import { InputForm } from './components/InputForm';
+import { LoadingSpinner } from './components/LoadingSpinner';
+import { ResultSection } from './components/ResultSection';
+import { ThemeToggle } from './components/ThemeToggle';
+import { SettingsModal } from './components/SettingsModal';
+import ManimCatLogo from './components/ManimCatLogo';
+import type { Quality } from './types/api';
+
+function App() {
+  const { status, result, error, jobId, stage, generate, reset, cancel } = useGeneration();
+  const [settingsOpen, setSettingsOpen] = useState(false);
+
+  const handleSubmit = (data: { concept: string; quality: Quality; forceRefresh: boolean }) => {
+    generate(data);
+  };
+
+  return (
+    <div className="min-h-screen bg-bg-primary transition-colors duration-300">
+      {/* 主题切换按钮 */}
+      <div className="fixed top-4 right-4 z-50 flex items-center gap-2">
+        <button
+          onClick={() => setSettingsOpen(true)}
+          className="p-2.5 text-text-secondary/70 hover:text-text-secondary hover:bg-bg-secondary/50 rounded-full transition-all"
+          title="API 设置"
+        >
+          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+          </svg>
+        </button>
+        <ThemeToggle />
+      </div>
+
+      {/* 主容器 */}
+      <div className="max-w-4xl mx-auto px-4 py-16 sm:py-20">
+        {/* 标题 */}
+        <div className="text-center mb-12">
+          <div className="flex items-center justify-center gap-4 mb-3">
+            <ManimCatLogo className="w-16 h-16" />
+            <h1 className="text-5xl sm:text-6xl font-light tracking-tight text-text-primary">
+              ManimCat
+            </h1>
+          </div>
+          <p className="text-sm text-text-secondary/70 max-w-lg mx-auto">
+            用 AI 驱动 Manim 生成数学动画
+          </p>
+        </div>
+
+        {/* 状态显示区域 */}
+        <div className="mb-6">
+          {status === 'idle' && (
+            <InputForm
+              onSubmit={handleSubmit}
+              loading={false}
+            />
+          )}
+
+          {status === 'processing' && (
+            <div className="bg-bg-secondary/20 rounded-2xl p-8">
+              <LoadingSpinner stage={stage} jobId={jobId || undefined} onCancel={cancel} />
+            </div>
+          )}
+
+          {status === 'completed' && result && (
+            <div
+              className="space-y-6 animate-fade-in"
+              style={{
+                animation: 'fadeInUp 0.5s ease-out forwards',
+              }}
+            >
+              {/* 结果展示 */}
+              <ResultSection
+                code={result.code || ''}
+                videoUrl={result.video_url || ''}
+                usedAI={result.used_ai || false}
+                renderQuality={result.render_quality || ''}
+                generationType={result.generation_type || ''}
+              />
+
+              {/* 重新生成按钮 */}
+              <div className="text-center">
+                <button
+                  onClick={reset}
+                  className="px-8 py-2.5 text-sm text-text-secondary/80 hover:text-accent transition-colors bg-bg-secondary/30 hover:bg-bg-secondary/50 rounded-full"
+                >
+                  生成新的动画
+                </button>
+              </div>
+            </div>
+          )}
+
+          {status === 'error' && (
+            <div className="bg-red-50/80 dark:bg-red-900/20 rounded-2xl p-6">
+              <div className="flex items-start gap-3">
+                <div className="text-red-500 mt-0.5">
+                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                  </svg>
+                </div>
+                <div className="flex-1">
+                  <p className="text-text-primary font-medium mb-1">出错了</p>
+                  <p className="text-text-secondary text-sm">{error || '生成失败，请重试'}</p>
+                </div>
+              </div>
+              <div className="mt-4 flex gap-3">
+                <button
+                  onClick={reset}
+                  className="px-4 py-2 text-sm text-accent hover:text-accent-hover transition-colors"
+                >
+                  重试
+                </button>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* 添加淡入上浮动画 */}
+      <style>{`
+        @keyframes fadeInUp {
+          0% {
+            opacity: 0;
+            transform: translateY(30px);
+          }
+          100% {
+            opacity: 1;
+            transform: translateY(0);
+          }
+        }
+      `}</style>
+
+      {/* 设置模态框 */}
+      <SettingsModal
+        isOpen={settingsOpen}
+        onClose={() => setSettingsOpen(false)}
+        onSave={(config) => {
+          console.log('保存配置:', config);
+        }}
+      />
+    </div>
+  );
+}
+
+export default App;

frontend/src/components/CodeView.tsx

@@ -0,0 +1,67 @@
+// 代码预览组件
+
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import { useState } from 'react';
+
+interface CodeViewProps {
+  code: string;
+}
+
+export function CodeView({ code }: CodeViewProps) {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = async () => {
+    await navigator.clipboard.writeText(code);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  return (
+    <div className="h-full flex flex-col bg-bg-secondary/30 rounded-2xl overflow-hidden">
+      {/* 顶部工具栏 */}
+      <div className="flex items-center justify-between px-4 py-2.5">
+        <h3 className="text-xs font-medium text-text-secondary/80 uppercase tracking-wide">生成的代码</h3>
+        <button
+          onClick={handleCopy}
+          className="text-xs text-text-secondary/70 hover:text-accent transition-colors flex items-center gap-1.5"
+        >
+          {copied ? (
+            <>
+              <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+              </svg>
+              已复制
+            </>
+          ) : (
+            <>
+              <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
+              </svg>
+              复制
+            </>
+          )}
+        </button>
+      </div>
+
+      {/* 代码区域 */}
+      <div className="flex-1 overflow-auto">
+        <SyntaxHighlighter
+          language="python"
+          style={vscDarkPlus}
+          customStyle={{
+            margin: 0,
+            padding: '1rem',
+            fontSize: '0.75rem',
+            lineHeight: '1.6',
+            fontFamily: 'Monaco, Cascadia Code, Roboto Mono, monospace',
+            background: 'transparent',
+          }}
+          showLineNumbers
+        >
+          {code}
+        </SyntaxHighlighter>
+      </div>
+    </div>
+  );
+}

frontend/src/components/CustomSelect.tsx

@@ -0,0 +1,104 @@
+// 自定义下拉选择组件 - MD3 风格
+
+import { useState, useRef, useEffect } from 'react';
+
+export interface SelectOption<T = string> {
+  value: T;
+  label: string;
+}
+
+interface CustomSelectProps<T = string> {
+  options: SelectOption<T>[];
+  value: T;
+  onChange: (value: T) => void;
+  label: string;
+  className?: string;
+  disabled?: boolean;
+}
+
+export function CustomSelect<T = string>({
+  options,
+  value,
+  onChange,
+  label,
+  className = '',
+  disabled = false
+}: CustomSelectProps<T>) {
+  const [isOpen, setIsOpen] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  const selectedOption = options.find(opt => {
+    if (typeof opt.value === 'number' && typeof value === 'number') {
+      return opt.value === value;
+    }
+    return opt.value === value;
+  });
+
+  // 点击外部关闭下拉菜单
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    }
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  return (
+    <div className={`relative ${className}`} ref={dropdownRef}>
+      <label className="absolute left-3 -top-2 px-1.5 bg-bg-secondary text-xs font-medium text-text-secondary">
+        {label}
+      </label>
+
+      {/* 触发按钮 */}
+      <button
+        type="button"
+        onClick={() => !disabled && setIsOpen(!isOpen)}
+        disabled={disabled}
+        className="w-full px-4 py-3.5 pr-10 bg-bg-secondary/50 rounded-2xl text-left text-text-primary focus:outline-none focus:ring-2 focus:ring-accent/20 focus:bg-bg-secondary/70 transition-all cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed hover:bg-bg-secondary/60"
+      >
+        <span>{selectedOption?.label}</span>
+      </button>
+
+      {/* 下拉箭头 */}
+      <svg
+        className={`absolute right-4 top-1/2 -translate-y-1/2 w-5 h-5 text-text-secondary pointer-events-none transition-transform duration-200 ${
+          isOpen ? 'rotate-180' : ''
+        }`}
+        fill="none"
+        stroke="currentColor"
+        viewBox="0 0 24 24"
+      >
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+      </svg>
+
+      {/* 下拉菜单 */}
+      {isOpen && (
+        <div className="absolute top-full left-0 right-0 mt-2 bg-bg-secondary rounded-2xl shadow-xl shadow-black/10 overflow-hidden z-50 animate-in fade-in slide-in-from-top-1 duration-200">
+          {options.map((option) => {
+            const isSelected = typeof option.value === 'number' && typeof value === 'number'
+              ? option.value === value
+              : option.value === value;
+
+            return (
+              <button
+                key={String(option.value)}
+                type="button"
+                onClick={() => {
+                  onChange(option.value);
+                  setIsOpen(false);
+                }}
+                className={`w-full px-4 py-3.5 text-left transition-colors hover:bg-bg-secondary/70 ${
+                  isSelected ? 'bg-bg-secondary/50' : ''
+                }`}
+              >
+                <span className="text-text-primary">{option.label}</span>
+              </button>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}

frontend/src/components/ExampleButtons.tsx

@@ -0,0 +1,84 @@
+// 自动滚动示例组件
+
+import { useState, useEffect } from 'react';
+
+interface ExampleButtonsProps {
+  onSelect: (example: string) => void;
+  disabled: boolean;
+}
+
+/** 示例列表 */
+const EXAMPLES = [
+  '演示勾股定理，带动画三角形和正方形',
+  '可视化二次函数及其属性并带动画',
+  '在单位圆上展示正弦和余弦的关系，带动画角度',
+  '创建 3D 曲面图，展示 z = x² + y²',
+  '计算并可视化半径为 r 的球体体积',
+  '展示如何用动画求立方体的表面积',
+  '将导数可视化切线斜率',
+  '用动画展示曲线下面积的工作原理',
+  '用动画变换演示矩阵运算',
+  '可视化 2x2 矩阵的特征值和特征向量',
+  '展示复数乘法使用旋转和缩放',
+  '动画展示简单微分方程的解',
+];
+
+export function ExampleButtons({ onSelect, disabled }: ExampleButtonsProps) {
+  const [currentIndex, setCurrentIndex] = useState(0);
+
+  useEffect(() => {
+    if (disabled) return;
+
+    const interval = setInterval(() => {
+      setCurrentIndex((prev) => (prev + 1) % EXAMPLES.length);
+    }, 3000);
+
+    return () => clearInterval(interval);
+  }, [disabled]);
+
+  return (
+    <div className="w-full">
+      {/* 自动滚动示例卡片 */}
+      <div className="relative overflow-hidden rounded-2xl bg-bg-secondary/40">
+        {/* 当前显示的示例 */}
+        <div className="p-5 sm:p-6 min-h-[80px] flex items-center justify-center transition-all duration-500">
+          <button
+            type="button"
+            onClick={() => onSelect(EXAMPLES[currentIndex])}
+            disabled={disabled}
+            className="text-center text-sm sm:text-base text-text-primary/90 hover:text-text-primary transition-all disabled:opacity-50 disabled:cursor-not-allowed active:scale-[0.98]"
+          >
+            {EXAMPLES[currentIndex]}
+          </button>
+        </div>
+
+        {/* 左右导航按钮 */}
+        <div className="absolute top-1/2 left-3 -translate-y-1/2">
+          <button
+            type="button"
+            onClick={() => setCurrentIndex((prev) => (prev - 1 + EXAMPLES.length) % EXAMPLES.length)}
+            disabled={disabled}
+            className="w-8 h-8 flex items-center justify-center rounded-full bg-bg-secondary text-text-secondary hover:text-accent hover:bg-bg-secondary/80 disabled:opacity-30 disabled:cursor-not-allowed transition-all"
+          >
+            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+            </svg>
+          </button>
+        </div>
+
+        <div className="absolute top-1/2 right-3 -translate-y-1/2">
+          <button
+            type="button"
+            onClick={() => setCurrentIndex((prev) => (prev + 1) % EXAMPLES.length)}
+            disabled={disabled}
+            className="w-8 h-8 flex items-center justify-center rounded-full bg-bg-secondary text-text-secondary hover:text-accent hover:bg-bg-secondary/80 disabled:opacity-30 disabled:cursor-not-allowed transition-all"
+          >
+            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+            </svg>
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/components/InputForm.tsx

@@ -0,0 +1,254 @@
+// 输入表单组件 - MD3 风格
+
+import { useState, useRef, useEffect, useCallback } from 'react';
+import type { Quality, VideoConfig, SettingsConfig } from '../types/api';
+
+interface InputFormProps {
+  onSubmit: (data: { concept: string; quality: Quality; forceRefresh: boolean }) => void;
+  loading: boolean;
+}
+
+/** 质量选项 */
+const QUALITY_OPTIONS = [
+  { value: 'low' as Quality, label: '低 (480p)', desc: '最快' },
+  { value: 'medium' as Quality, label: '中 (720p)', desc: '' },
+  { value: 'high' as Quality, label: '高 (1080p)', desc: '最慢' },
+];
+
+/** 从 localStorage 加载默认质量 */
+function loadDefaultQuality(): Quality {
+  try {
+    const saved = localStorage.getItem('manimcat_settings');
+    if (saved) {
+      const parsed = JSON.parse(saved) as SettingsConfig;
+      if (parsed.video?.quality) {
+        return parsed.video.quality;
+      }
+    }
+  } catch {
+    // 忽略错误
+  }
+  return 'medium'; // 默认值
+}
+
+export function InputForm({ onSubmit, loading }: InputFormProps) {
+  const [concept, setConcept] = useState('');
+  const [error, setError] = useState<string | null>(null);
+  const [forceRefresh, setForceRefresh] = useState(false);
+  const [quality, setQuality] = useState<Quality>(loadDefaultQuality());
+  const [qualityOpen, setQualityOpen] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  // 点击外部关闭下拉菜单
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+        setQualityOpen(false);
+      }
+    }
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  // 键盘快捷键：Ctrl+Enter 提交
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.ctrlKey && e.key === 'Enter' && !loading) {
+        e.preventDefault();
+        handleSubmit();
+      }
+    };
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [loading, concept, quality, forceRefresh]);
+
+  // 实时验证
+  useEffect(() => {
+    if (concept.length > 0 && concept.length < 5) {
+      setError('请至少输入 5 个字符');
+    } else {
+      setError(null);
+    }
+  }, [concept]);
+
+  const handleSubmit = useCallback(() => {
+    if (concept.trim().length < 5) {
+      setError('请至少输入 5 个字符描述你想要动画的内容');
+      textareaRef.current?.focus();
+      return;
+    }
+    setError(null);
+    onSubmit({ concept: concept.trim(), quality, forceRefresh });
+  }, [concept, quality, forceRefresh, onSubmit]);
+
+  const handleFormSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    handleSubmit();
+  };
+
+  const selectedOption = QUALITY_OPTIONS.find(opt => opt.value === quality);
+
+  return (
+    <div className="w-full max-w-2xl mx-auto">
+      <form onSubmit={handleFormSubmit} className="space-y-6">
+        {/* 概念输入 - MD3 Filled Text Field */}
+        <div className="relative">
+          <label
+            htmlFor="concept"
+            className={`absolute left-4 -top-2.5 px-2 bg-bg-primary text-xs font-medium transition-all ${
+              error ? 'text-red-500' : 'text-text-secondary'
+            }`}
+          >
+            {error ? error : '描述你想要的动画'}
+          </label>
+          <textarea
+            ref={textareaRef}
+            id="concept"
+            name="concept"
+            rows={4}
+            placeholder="例如：展示单位圆上正弦和余弦的关系..."
+            disabled={loading}
+            value={concept}
+            onChange={(e) => setConcept(e.target.value)}
+            className={`w-full px-4 py-4 bg-bg-secondary/50 rounded-2xl text-text-primary placeholder-text-secondary/40 focus:outline-none focus:ring-2 transition-all resize-none ${
+              error
+                ? 'focus:ring-red-500/20 bg-red-50/50 dark:bg-red-900/10'
+                : 'focus:ring-accent/20 focus:bg-bg-secondary/70'
+            }`}
+          />
+        </div>
+
+        {/* 选项区域 */}
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
+          {/* 质量选择 - 自定义下拉菜单 */}
+          <div className="relative" ref={dropdownRef}>
+            <label className="absolute left-3 -top-2 px-1.5 bg-bg-primary text-xs font-medium text-text-secondary">
+              视频质量
+            </label>
+
+            {/* 触发按钮 */}
+            <button
+              type="button"
+              onClick={() => !loading && setQualityOpen(!qualityOpen)}
+              disabled={loading}
+              className="w-full px-4 py-3.5 pr-10 bg-bg-secondary/50 rounded-2xl text-left text-text-primary focus:outline-none focus:ring-2 focus:ring-accent/20 focus:bg-bg-secondary/70 transition-all cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed hover:bg-bg-secondary/60"
+            >
+              <span className="flex items-center justify-between">
+                <span>{selectedOption?.label} {selectedOption?.desc && <span className="text-text-secondary/60 text-xs ml-1">- {selectedOption.desc}</span>}</span>
+              </span>
+            </button>
+
+            {/* 下拉箭头 */}
+            <svg
+              className={`absolute right-4 top-1/2 -translate-y-1/2 w-5 h-5 text-text-secondary pointer-events-none transition-transform duration-200 ${
+                qualityOpen ? 'rotate-180' : ''
+              }`}
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+            </svg>
+
+            {/* 下拉菜单 */}
+            {qualityOpen && (
+              <div className="absolute top-full left-0 right-0 mt-2 bg-white rounded-2xl shadow-xl shadow-black/10 overflow-hidden z-50 animate-in fade-in slide-in-from-top-1 duration-200">
+                {QUALITY_OPTIONS.map((option) => (
+                  <button
+                    key={option.value}
+                    type="button"
+                    onClick={() => {
+                      setQuality(option.value);
+                      setQualityOpen(false);
+                    }}
+                    className={`w-full px-4 py-3.5 text-left transition-colors hover:bg-bg-secondary ${
+                      quality === option.value ? 'bg-bg-secondary/70' : ''
+                    }`}
+                  >
+                    <div className="flex items-center justify-between">
+                      <span className="text-text-primary">{option.label}</span>
+                      {option.desc && <span className="text-xs text-text-secondary/60">- {option.desc}</span>}
+                    </div>
+                  </button>
+                ))}
+              </div>
+            )}
+
+            {/* 隐藏的 input 用于表单提交 */}
+            <input type="hidden" name="quality" value={quality} />
+          </div>
+
+          {/* 强制刷新 - MD3 Switch */}
+          <div className="flex flex-col justify-center">
+            <label htmlFor="forceRefresh" className="text-xs font-medium text-text-secondary mb-3">
+              强制重新生成
+            </label>
+            <div className="flex items-center gap-3">
+              {/* MD3 Switch */}
+              <button
+                type="button"
+                onClick={() => setForceRefresh(!forceRefresh)}
+                disabled={loading}
+                className={`relative w-12 h-7 rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-accent/20 ${
+                  forceRefresh ? 'bg-accent' : 'bg-bg-tertiary'
+                }`}
+              >
+                <span
+                  className={`absolute top-1 left-1 w-5 h-5 bg-white rounded-full shadow-md transition-transform duration-200 ${
+                    forceRefresh ? 'translate-x-5' : 'translate-x-0'
+                  }`}
+                />
+              </button>
+              <input
+                type="checkbox"
+                id="forceRefresh"
+                name="forceRefresh"
+                checked={forceRefresh}
+                onChange={(e) => setForceRefresh(e.target.checked)}
+                disabled={loading}
+                className="sr-only"
+              />
+              <span className="text-xs text-text-secondary/60">跳过缓存</span>
+            </div>
+          </div>
+        </div>
+
+        {/* 提交按钮 - MD3 Filled Button */}
+        <div className="flex justify-center pt-4">
+          <button
+            type="submit"
+            disabled={loading || concept.trim().length < 5}
+            className="group relative px-12 py-3.5 bg-accent hover:bg-accent-hover text-white font-medium rounded-full shadow-lg shadow-accent/25 transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed hover:shadow-xl hover:shadow-accent/35 active:scale-[0.97] overflow-hidden"
+          >
+            <span className="relative z-10 flex items-center gap-2">
+              {loading ? (
+                <>
+                  <svg className="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24">
+                    <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+                    <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
+                  </svg>
+                  生成中...
+                </>
+              ) : (
+                <>
+                  生成动画
+                  <svg className="w-4 h-4 transition-transform duration-300 group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7l5 5m0 0l-5 5m5-5H6" />
+                  </svg>
+                </>
+              )}
+            </span>
+            {/* 按钮光效 */}
+            <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/10 to-transparent -translate-x-full group-hover:animate-shimmer" />
+          </button>
+        </div>
+
+        {/* 快捷键提示 */}
+        <p className="text-center text-xs text-text-secondary/50">
+          按 <kbd className="px-1.5 py-0.5 bg-bg-secondary/50 rounded text-[10px]">Ctrl</kbd> + <kbd className="px-1.5 py-0.5 bg-bg-secondary/50 rounded text-[10px]">Enter</kbd> 快速提交
+        </p>
+      </form>
+    </div>
+  );
+}

frontend/src/components/LoadingSpinner.tsx

@@ -0,0 +1,87 @@
+// 加载动画组件 - Logo 小猫头飘荡
+
+import { useEffect, useState } from 'react';
+
+interface LoadingSpinnerProps {
+  stage: 'analyzing' | 'generating' | 'refining' | 'rendering' | 'still-rendering';
+  jobId?: string;
+  onCancel?: () => void;
+}
+
+/** 处理阶段文案 */
+const STAGE_TEXT: Record<LoadingSpinnerProps['stage'], { text: string; sub: string }> = {
+  analyzing: { text: '分析概念中', sub: '检测 LaTeX 和匹配模板' },
+  generating: { text: '生成代码中', sub: '创建动画脚本' },
+  refining: { text: 'AI 完善中', sub: '正在优化生成结果...' },
+  rendering: { text: '渲染动画中', sub: '这可能需要一些时间' },
+  'still-rendering': { text: '仍在渲染中', sub: '复杂动画需要更长时间' },
+};
+
+/** Logo 同款小猫头 - 100% 复制原版 */
+function CatHead() {
+  return (
+    <svg width="80" height="80" viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg" className="drop-shadow-lg">
+      <g transform="translate(70, 70)">
+        {/* 猫头主体 - 完全复制 Logo 原路径 */}
+        <path
+          d="M -70 40 C -80 0, -80 -30, -50 -60 L -20 -30 L 20 -30 L 50 -60 C 80 -30, 80 0, 70 40 C 60 70, -60 70, -70 40 Z"
+          fill="#455a64"
+        />
+        {/* 左眼白 */}
+        <circle cx="-35" cy="-5" r="18" fill="#ffffff" />
+        {/* 右眼白 */}
+        <circle cx="35" cy="-5" r="18" fill="#ffffff" />
+        {/* 左眼珠 */}
+        <circle cx="-38" cy="-5" r="6" fill="#455a64" />
+        {/* 右眼珠 */}
+        <circle cx="32" cy="-5" r="6" fill="#455a64" />
+      </g>
+    </svg>
+  );
+}
+
+/** 浮动小猫头 */
+function FloatingCat() {
+  const [yOffset, setYOffset] = useState(0);
+
+  useEffect(() => {
+    let time = 0;
+    const animate = () => {
+      time += 0.025;
+      const y = Math.sin(time) * 5;
+      setYOffset(y);
+      requestAnimationFrame(animate);
+    };
+    const animationId = requestAnimationFrame(animate);
+    return () => cancelAnimationFrame(animationId);
+  }, []);
+
+  return <div style={{ transform: `translateY(${yOffset}px)` }}><CatHead /></div>;
+}
+
+export function LoadingSpinner({ stage, jobId, onCancel }: LoadingSpinnerProps) {
+  const { text, sub } = STAGE_TEXT[stage];
+
+  return (
+    <div className="flex flex-col items-center justify-center py-12">
+      <div className="mb-5">
+        <FloatingCat />
+      </div>
+      <p className="text-base font-medium text-text-primary mb-1">{text}</p>
+      <p className="text-sm text-text-secondary/70 mb-3">{sub}</p>
+      {jobId && (
+        <p className="text-xs text-text-secondary/60 font-mono bg-bg-secondary/40 px-3 py-1 rounded-full">
+          {jobId.slice(0, 8)}
+        </p>
+      )}
+      {onCancel && (
+        <button
+          onClick={onCancel}
+          className="mt-5 px-5 py-1.5 text-sm text-text-secondary/70 hover:text-red-500 transition-colors bg-bg-secondary/30 hover:bg-bg-secondary/50 rounded-full"
+        >
+          取消生成
+        </button>
+      )}
+    </div>
+  );
+}

frontend/src/components/ManimCatLogo.tsx

@@ -0,0 +1,29 @@
+const ManimCatLogo = ({ className }: { className?: string }) => (
+  <svg
+    viewBox="0 0 512 512"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <rect width="512" height="512" fill="#faf9f5"/>
+    <path
+      d="M 100 400 V 140 L 230 300 L 360 140 V 260"
+      fill="none"
+      stroke="#455a64"
+      strokeWidth="55"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <g transform="translate(360, 340)">
+      <path
+        d="M -70 40 C -80 0, -80 -30, -50 -60 L -20 -30 L 20 -30 L 50 -60 C 80 -30, 80 0, 70 40 C 60 70, -60 70, -70 40 Z"
+        fill="#455a64"
+      />
+      <circle cx="-35" cy="-5" r="18" fill="#ffffff" />
+      <circle cx="35" cy="-5" r="18" fill="#ffffff" />
+      <circle cx="-38" cy="-5" r="6" fill="#455a64" />
+      <circle cx="32" cy="-5" r="6" fill="#455a64" />
+    </g>
+  </svg>
+);
+
+export default ManimCatLogo;

frontend/src/components/ResultSection.tsx

@@ -0,0 +1,35 @@
+// 结果展示组件
+
+import { CodeView } from './CodeView';
+import { VideoPreview } from './VideoPreview';
+
+interface ResultSectionProps {
+  code: string;
+  videoUrl: string;
+  usedAI: boolean;
+  renderQuality: string;
+  generationType: string;
+}
+
+export function ResultSection({ code, videoUrl, usedAI, renderQuality, generationType }: ResultSectionProps) {
+  return (
+    <div className="w-full max-w-4xl mx-auto space-y-5">
+      {/* 代码和视频预览 */}
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+        <div className="h-[360px]">
+          <CodeView code={code} />
+        </div>
+        <div className="h-[360px]">
+          <VideoPreview videoUrl={videoUrl} />
+        </div>
+      </div>
+
+      {/* 生成信息 */}
+      <div className="bg-bg-secondary/30 rounded-xl px-4 py-2.5">
+        <p className="text-xs text-text-secondary/70">
+          {generationType}{usedAI ? ' (AI)' : ''} · {renderQuality}
+        </p>
+      </div>
+    </div>
+  );
+}

frontend/src/components/SettingsModal.tsx

@@ -0,0 +1,369 @@
+// 设置模态框 - MD3 风格
+
+import { useState, useEffect } from 'react';
+import { CustomSelect } from './CustomSelect';
+import type { Quality, ApiConfig, VideoConfig, SettingsConfig } from '../types/api';
+
+type TabType = 'api' | 'video';
+
+interface TestResult {
+  status: 'idle' | 'testing' | 'success' | 'error';
+  message: string;
+  details?: {
+    statusCode?: number;
+    statusText?: string;
+    responseBody?: string;
+    headers?: Record<string, string>;
+    duration?: number;
+    error?: string;
+  };
+}
+
+interface SettingsModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSave: (config: SettingsConfig) => void;
+}
+
+/** 从 localStorage 加载配置 */
+function loadConfig(): SettingsConfig {
+  const saved = localStorage.getItem('manimcat_settings');
+  if (saved) {
+    try {
+      const parsed = JSON.parse(saved) as SettingsConfig;
+      return {
+        api: parsed.api || { apiUrl: '', apiKey: '', model: '', manimcatApiKey: '' },
+        video: parsed.video || { quality: 'medium', frameRate: 30, timeout: 120 }
+      };
+    } catch {
+      return { api: { apiUrl: '', apiKey: '', model: '', manimcatApiKey: '' }, video: { quality: 'medium', frameRate: 30, timeout: 120 } };
+    }
+  }
+  // 同时检查单独存储的 ManimCat API Key（兼容旧版本）
+  const manimcatKey = localStorage.getItem('manimcat_api_key') || '';
+  return { api: { apiUrl: '', apiKey: '', model: '', manimcatApiKey: manimcatKey }, video: { quality: 'medium', frameRate: 30, timeout: 120 } };
+}
+
+/** 保存配置到 localStorage */
+function saveConfig(config: SettingsConfig): void {
+  localStorage.setItem('manimcat_settings', JSON.stringify(config));
+  // 单独保存 ManimCat API Key（用于 api.ts 的 getAuthHeaders，兼容旧版本）
+  if (config.api.manimcatApiKey) {
+    localStorage.setItem('manimcat_api_key', config.api.manimcatApiKey);
+  } else {
+    localStorage.removeItem('manimcat_api_key');
+  }
+}
+
+export function SettingsModal({ isOpen, onClose, onSave }: SettingsModalProps) {
+  const [config, setConfig] = useState<SettingsConfig>({ api: { apiUrl: '', apiKey: '', model: '', manimcatApiKey: '' }, video: { quality: 'medium', frameRate: 30, timeout: 120 } });
+  const [testResult, setTestResult] = useState<TestResult>({ status: 'idle', message: '' });
+  const [activeTab, setActiveTab] = useState<TabType>('api');
+
+  const updateApiConfig = (updates: Partial<ApiConfig>) => {
+    setConfig(prev => ({ ...prev, api: { ...prev.api, ...updates } }));
+  };
+
+  const updateVideoConfig = (updates: Partial<VideoConfig>) => {
+    setConfig(prev => ({ ...prev, video: { ...prev.video, ...updates } }));
+  };
+
+  useEffect(() => {
+    if (isOpen) {
+      setConfig(loadConfig());
+      setTestResult({ status: 'idle', message: '' });
+      setActiveTab('api');
+    }
+  }, [isOpen]);
+
+  const handleSave = () => {
+    saveConfig(config);
+    onSave(config);
+    onClose();
+  };
+
+  const handleTest = async () => {
+    if (!config.api.apiUrl || !config.api.apiKey) {
+      setTestResult({
+        status: 'error',
+        message: '请填写 API 地址和密钥',
+      });
+      return;
+    }
+
+    setTestResult({ status: 'testing', message: '测试中...', details: {} });
+
+    const startTime = performance.now();
+    const apiUrl = config.api.apiUrl.trim().replace(/\/+$/, '');
+
+    try {
+      const response = await fetch(apiUrl, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'Authorization': `Bearer ${config.api.apiKey.trim()}`,
+        },
+        body: JSON.stringify({
+          model: config.api.model.trim() || 'gpt-4o-mini',
+          messages: [{ role: 'user', content: 'test' }],
+          max_tokens: 5,
+        }),
+      });
+
+      const endTime = performance.now();
+      const duration = Math.round(endTime - startTime);
+
+      if (response.ok) {
+        setTestResult({
+          status: 'success',
+          message: `连接成功！(${duration}ms)`,
+          details: {
+            statusCode: response.status,
+            statusText: response.statusText,
+            duration,
+          },
+        });
+      } else {
+        const responseBody = await response.text();
+        const headers: Record<string, string> = {};
+        response.headers.forEach((value, key) => {
+          headers[key] = value;
+        });
+
+        setTestResult({
+          status: 'error',
+          message: `HTTP ${response.status}: ${response.statusText}`,
+          details: {
+            statusCode: response.status,
+            statusText: response.statusText,
+            responseBody: responseBody.slice(0, 2000),
+            headers,
+            duration,
+          },
+        });
+      }
+    } catch (error) {
+      const endTime = performance.now();
+      const duration = Math.round(endTime - startTime);
+
+      setTestResult({
+        status: 'error',
+        message: error instanceof Error ? error.message : '连接失败',
+        details: {
+          error: error instanceof Error ? `${error.name}: ${error.message}` : String(error),
+          duration,
+        },
+      });
+    }
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
+      <div className="absolute inset-0 bg-black/50" onClick={onClose} />
+      <div className="relative bg-bg-secondary rounded-2xl p-8 max-w-md w-full shadow-xl">
+        {/* 标题 */}
+        <div className="flex items-center justify-between mb-6">
+          <h2 className="text-xl font-medium text-text-primary">设置</h2>
+          <button
+            onClick={onClose}
+            className="p-2 text-text-secondary/60 hover:text-text-secondary transition-colors"
+          >
+            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+
+        {/* Tab 切换 */}
+        <div className="flex gap-2 mb-6 p-1 bg-bg-secondary/50 rounded-xl">
+          <button
+            onClick={() => setActiveTab('api')}
+            className={`flex-1 px-4 py-2.5 text-sm font-medium rounded-lg transition-all ${
+              activeTab === 'api'
+                ? 'text-text-primary bg-bg-secondary shadow-sm'
+                : 'text-text-secondary hover:text-text-primary hover:bg-bg-secondary/30'
+            }`}
+          >
+            API 设置
+          </button>
+          <button
+            onClick={() => setActiveTab('video')}
+            className={`flex-1 px-4 py-2.5 text-sm font-medium rounded-lg transition-all ${
+              activeTab === 'video'
+                ? 'text-text-primary bg-bg-secondary shadow-sm'
+                : 'text-text-secondary hover:text-text-primary hover:bg-bg-secondary/30'
+            }`}
+          >
+            视频配置
+          </button>
+        </div>
+
+        {/* 表单 */}
+        <div className="space-y-5">
+          {/* API 设置 */}
+          {activeTab === 'api' && (
+            <>
+              <div className="relative">
+                <label
+                  htmlFor="manimcatApiKey"
+                  className="absolute left-4 -top-2.5 px-2 bg-bg-secondary text-xs font-medium text-text-secondary transition-all"
+                >
+                  ManimCat API 密钥
+                </label>
+                <input
+                  id="manimcatApiKey"
+                  type="password"
+                  value={config.api.manimcatApiKey}
+                  onChange={(e) => updateApiConfig({ manimcatApiKey: e.target.value })}
+                  placeholder="留空则跳过认证"
+                  className="w-full px-4 py-4 bg-bg-secondary/50 rounded-2xl text-sm text-text-primary placeholder-text-secondary/40 focus:outline-none focus:ring-2 focus:ring-accent/20 focus:bg-bg-secondary/70 transition-all"
+                />
+              </div>
+
+              <div className="relative">
+                <label
+                  htmlFor="apiUrl"
+                  className="absolute left-4 -top-2.5 px-2 bg-bg-secondary text-xs font-medium text-text-secondary transition-all"
+                >
+                  API 地址
+                </label>
+                <input
+                  id="apiUrl"
+                  type="text"
+                  value={config.api.apiUrl}
+                  onChange={(e) => updateApiConfig({ apiUrl: e.target.value })}
+                  placeholder="https://api.xiaomimimo.com/v1"
+                  className="w-full px-4 py-4 bg-bg-secondary/50 rounded-2xl text-sm text-text-primary placeholder-text-secondary/40 focus:outline-none focus:ring-2 focus:ring-accent/20 focus:bg-bg-secondary/70 transition-all"
+                />
+              </div>
+
+              <div className="relative">
+                <label
+                  htmlFor="apiKey"
+                  className="absolute left-4 -top-2.5 px-2 bg-bg-secondary text-xs font-medium text-text-secondary transition-all"
+                >
+                  API 密钥
+                </label>
+                <input
+                  id="apiKey"
+                  type="password"
+                  value={config.api.apiKey}
+                  onChange={(e) => updateApiConfig({ apiKey: e.target.value })}
+                  placeholder="sk-..."
+                  className="w-full px-4 py-4 bg-bg-secondary/50 rounded-2xl text-sm text-text-primary placeholder-text-secondary/40 focus:outline-none focus:ring-2 focus:ring-accent/20 focus:bg-bg-secondary/70 transition-all"
+                />
+              </div>
+
+              <div className="relative">
+                <label
+                  htmlFor="model"
+                  className="absolute left-4 -top-2.5 px-2 bg-bg-secondary text-xs font-medium text-text-secondary transition-all"
+                >
+                  模型名称
+                </label>
+                <input
+                  id="model"
+                  type="text"
+                  value={config.api.model}
+                  onChange={(e) => updateApiConfig({ model: e.target.value })}
+                  placeholder="mimo-v2-flash"
+                  className="w-full px-4 py-4 bg-bg-secondary/50 rounded-2xl text-sm text-text-primary placeholder-text-secondary/40 focus:outline-none focus:ring-2 focus:ring-accent/20 focus:bg-bg-secondary/70 transition-all"
+                />
+              </div>
+
+              {testResult.status !== 'idle' && (
+                <div className={`rounded-2xl text-sm ${
+                  testResult.status === 'success'
+                    ? 'bg-green-50 dark:bg-green-900/20'
+                    : testResult.status === 'testing'
+                    ? 'bg-blue-50 dark:bg-blue-900/20'
+                    : 'bg-red-50 dark:bg-red-900/20'
+                }`}>
+                  <div className={`p-4 ${
+                    testResult.status === 'success'
+                      ? 'text-green-600 dark:text-green-400'
+                      : testResult.status === 'testing'
+                      ? 'text-blue-600 dark:text-blue-400'
+                      : 'text-red-600 dark:text-red-400'
+                  }`}>
+                    {testResult.status === 'testing' && (
+                      <div className="flex items-center gap-2">
+                        <svg className="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24">
+                          <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+                          <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
+                        </svg>
+                        <span>{testResult.message}</span>
+                      </div>
+                    )}
+                    {testResult.status !== 'testing' && (
+                      <span>{testResult.message}</span>
+                    )}
+                  </div>
+                </div>
+              )}
+            </>
+          )}
+
+          {/* 视频配置 */}
+          {activeTab === 'video' && (
+            <>
+              <CustomSelect
+                options={[
+                  { value: 'low' as Quality, label: '低 (480p)' },
+                  { value: 'medium' as Quality, label: '中 (720p)' },
+                  { value: 'high' as Quality, label: '高 (1080p)' }
+                ]}
+                value={config.video.quality}
+                onChange={(value) => updateVideoConfig({ quality: value })}
+                label="默认值"
+              />
+
+              <CustomSelect
+                options={[
+                  { value: 15, label: '15 fps' },
+                  { value: 30, label: '30 fps' },
+                  { value: 60, label: '60 fps' }
+                ]}
+                value={config.video.frameRate}
+                onChange={(value) => updateVideoConfig({ frameRate: value })}
+                label="帧率"
+              />
+
+              <CustomSelect
+                options={[
+                  { value: 60, label: '1 分钟' },
+                  { value: 120, label: '2 分钟' },
+                  { value: 180, label: '3 分钟' },
+                  { value: 300, label: '5 分钟' },
+                  { value: 600, label: '10 分钟' }
+                ]}
+                value={config.video.timeout || 120}
+                onChange={(value) => updateVideoConfig({ timeout: value })}
+                label="生成超时"
+              />
+            </>
+          )}
+        </div>
+
+        {/* 按钮 */}
+        <div className="mt-8 flex gap-3">
+          <button
+            onClick={handleTest}
+            disabled={testResult.status === 'testing'}
+            className="flex-1 px-6 py-3.5 text-sm font-medium text-accent hover:text-accent-hover bg-bg-secondary/50 hover:bg-bg-secondary/70 rounded-2xl transition-all disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-accent/20"
+          >
+            测试连接
+          </button>
+          <button
+            onClick={handleSave}
+            className="flex-1 px-6 py-3.5 text-sm font-medium text-white bg-accent hover:bg-accent-hover rounded-2xl transition-all focus:outline-none focus:ring-2 focus:ring-accent/20 shadow-lg shadow-accent/25"
+          >
+            保存
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/components/ThemeToggle.tsx

@@ -0,0 +1,67 @@
+// 主题切换组件
+
+import { useEffect, useState } from 'react';
+
+export function ThemeToggle() {
+  const [isDark, setIsDark] = useState(false);
+  const [mounted, setMounted] = useState(false);
+
+  // 初始化主题状态
+  useEffect(() => {
+    setMounted(true);
+    const savedTheme = localStorage.getItem('theme');
+    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    const isDarkMode = savedTheme === 'dark' || (!savedTheme && prefersDark);
+    setIsDark(isDarkMode);
+    document.documentElement.classList.toggle('dark', isDarkMode);
+  }, []);
+
+  // 切换主题
+  const toggleTheme = () => {
+    const newIsDark = !isDark;
+    setIsDark(newIsDark);
+    document.documentElement.classList.toggle('dark', newIsDark);
+    localStorage.setItem('theme', newIsDark ? 'dark' : 'light');
+  };
+
+  // 防止水合不匹配
+  if (!mounted) {
+    return (
+      <button
+        className="w-10 h-10 rounded-full bg-bg-secondary/50 flex items-center justify-center"
+        disabled
+      >
+        <div className="w-5 h-5" />
+      </button>
+    );
+  }
+
+  return (
+    <button
+      onClick={toggleTheme}
+      className="w-10 h-10 rounded-full bg-bg-secondary/50 hover:bg-bg-secondary transition-colors flex items-center justify-center"
+      aria-label={isDark ? '切换到亮色主题' : '切换到暗黑主题'}
+      title={isDark ? '切换到亮色主题' : '切换到暗黑主题'}
+    >
+      {isDark ? (
+        <svg className="w-5 h-5 text-text-secondary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"
+          />
+        </svg>
+      ) : (
+        <svg className="w-5 h-5 text-text-secondary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"
+          />
+        </svg>
+      )}
+    </button>
+  );
+}

frontend/src/components/VideoPreview.tsx

@@ -0,0 +1,43 @@
+// 视频预览组件
+
+interface VideoPreviewProps {
+  videoUrl: string;
+}
+
+export function VideoPreview({ videoUrl }: VideoPreviewProps) {
+  const handleDownload = () => {
+    const link = document.createElement('a');
+    link.href = videoUrl;
+    link.download = `manim-animation-${Date.now()}.mp4`;
+    link.click();
+  };
+
+  return (
+    <div className="h-full flex flex-col bg-bg-secondary/30 rounded-2xl overflow-hidden">
+      {/* 顶部工具栏 */}
+      <div className="flex items-center justify-between px-4 py-2.5">
+        <h3 className="text-xs font-medium text-text-secondary/80 uppercase tracking-wide">动画预览</h3>
+        <button
+          onClick={handleDownload}
+          className="text-xs text-text-secondary/70 hover:text-accent transition-colors flex items-center gap-1.5"
+        >
+          <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
+          </svg>
+          下载
+        </button>
+      </div>
+
+      {/* 视频播放器 */}
+      <div className="flex-1 bg-black flex items-center justify-center">
+        <video
+          src={videoUrl}
+          controls
+          className="w-full h-full object-contain"
+        >
+          您的浏览器不支持视频播放。
+        </video>
+      </div>
+    </div>
+  );
+}

frontend/src/hooks/useGeneration.ts

@@ -0,0 +1,227 @@
+// 生成请求 Hook
+
+import { useState, useCallback, useRef, useEffect } from 'react';
+import { generateAnimation, getJobStatus } from '../lib/api';
+import { loadCustomConfig, generateWithCustomApi } from '../lib/custom-ai';
+import type { GenerateRequest, JobResult, ProcessingStage, VideoConfig } from '../types/api';
+
+interface UseGenerationReturn {
+  status: 'idle' | 'processing' | 'completed' | 'error';
+  result: JobResult | null;
+  error: string | null;
+  jobId: string | null;
+  stage: ProcessingStage;
+  generate: (request: GenerateRequest) => Promise<void>;
+  reset: () => void;
+  cancel: () => void;
+}
+
+/** 轮询间隔 */
+const POLL_INTERVAL = 1000;
+
+/** 从 localStorage 加载超时配置 */
+function getTimeoutConfig(): number {
+  try {
+    const saved = localStorage.getItem('manimcat_settings');
+    if (saved) {
+      const parsed = JSON.parse(saved);
+      if (parsed.video?.timeout) {
+        return parsed.video.timeout;
+      }
+    }
+  } catch {
+    // 忽略错误，使用默认值
+  }
+  return 120; // 默认 120 秒
+}
+
+export function useGeneration(): UseGenerationReturn {
+  const [status, setStatus] = useState<'idle' | 'processing' | 'completed' | 'error'>('idle');
+  const [result, setResult] = useState<JobResult | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [jobId, setJobId] = useState<string | null>(null);
+  const [stage, setStage] = useState<ProcessingStage>('analyzing');
+
+  const pollCountRef = useRef(0);
+  const pollIntervalRef = useRef<number | null>(null);
+  const abortControllerRef = useRef<AbortController | null>(null);
+
+  // 清理轮询和请求
+  useEffect(() => {
+    return () => {
+      if (pollIntervalRef.current) {
+        clearInterval(pollIntervalRef.current);
+      }
+      abortControllerRef.current?.abort();
+    };
+  }, []);
+
+  // 更新处理阶段
+  const updateStage = useCallback((count: number) => {
+    if (count < 5) {
+      setStage('analyzing');
+    } else if (count < 15) {
+      setStage('generating');
+    } else if (count < 25) {
+      setStage('refining');
+    } else if (count < 60) {
+      setStage('rendering');
+    } else {
+      setStage('still-rendering');
+    }
+  }, []);
+
+  // 开始轮询
+  const startPolling = useCallback((id: string) => {
+    pollCountRef.current = 0;
+    setJobId(id);
+    
+    // 获取用户配置的超时时间
+    const maxPollCount = getTimeoutConfig();
+
+    pollIntervalRef.current = window.setInterval(async () => {
+      pollCountRef.current++;
+
+      try {
+        const data = await getJobStatus(id, abortControllerRef.current?.signal);
+
+        if (data.status === 'completed') {
+          if (pollIntervalRef.current) {
+            clearInterval(pollIntervalRef.current);
+          }
+          setStatus('completed');
+          setResult(data);
+        } else if (data.status === 'failed') {
+          if (pollIntervalRef.current) {
+            clearInterval(pollIntervalRef.current);
+          }
+          setStatus('error');
+          setError(data.error || '生成失败');
+        } else {
+          // 使用后端返回的 stage，如果没有则使用前端估算的 fallback
+          if (data.stage) {
+            setStage(data.stage);
+          } else {
+            updateStage(pollCountRef.current);
+          }
+        }
+
+        // 超时检查（使用用户配置的超时时间）
+        if (pollCountRef.current >= maxPollCount) {
+          if (pollIntervalRef.current) {
+            clearInterval(pollIntervalRef.current);
+          }
+          setStatus('error');
+          setError(`生成超时（${maxPollCount}秒），请尝试更简单的概念或增加超时时间`);
+        }
+      } catch (err) {
+        if (err instanceof Error && err.name === 'AbortError') {
+          return;
+        }
+
+        // 如果是连接错误（后端断开），停止轮询
+        if (err instanceof Error && (err.message.includes('ECONNREFUSED') || err.message.includes('Failed to fetch'))) {
+          console.error('后端连接断开，停止轮询');
+          if (pollIntervalRef.current) {
+            clearInterval(pollIntervalRef.current);
+          }
+          setStatus('error');
+          setError('后端服务已断开，请刷新页面重试');
+          return;
+        }
+
+        console.error('轮询错误:', err);
+
+        // 如果是任务未找到 (404) 或明确的失效提示
+        if (err instanceof Error && (err.message.includes('未找到任务') || err.message.includes('失效'))) {
+          if (pollIntervalRef.current) {
+            clearInterval(pollIntervalRef.current);
+            pollIntervalRef.current = null;
+          }
+          setStatus('error');
+          setError('任务已失效（可能因服务重启），请重新生成');
+          return;
+        }
+      }
+    }, POLL_INTERVAL);
+  }, [updateStage]);
+
+  // 生成动画
+  const generate = useCallback(async (request: GenerateRequest) => {
+    setStatus('processing');
+    setError(null);
+    setResult(null);
+    setStage('analyzing');
+    pollCountRef.current = 0;
+    abortControllerRef.current = new AbortController();
+
+    try {
+      // 检查是否有自定义 AI 配置
+      const customConfig = loadCustomConfig();
+
+      if (customConfig) {
+        // 使用自定义 AI 生成代码
+        setStage('generating');
+        const code = await generateWithCustomApi(
+          request.concept,
+          customConfig,
+          abortControllerRef.current.signal
+        );
+
+        // 发送代码到后端渲染
+        setStage('rendering');
+        const response = await generateAnimation(
+          { ...request, code },
+          abortControllerRef.current.signal
+        );
+        startPolling(response.jobId);
+      } else {
+        // 使用后端 AI
+        const response = await generateAnimation(request, abortControllerRef.current.signal);
+        startPolling(response.jobId);
+      }
+    } catch (err) {
+      if (err instanceof Error && err.name === 'AbortError') {
+        return;
+      }
+      setStatus('error');
+      setError(err instanceof Error ? err.message : '生成请求失败');
+    }
+  }, [startPolling]);
+
+  // 重置状态
+  const reset = useCallback(() => {
+    setStatus('idle');
+    setError(null);
+    setResult(null);
+    setJobId(null);
+    setStage('analyzing');
+    if (pollIntervalRef.current) {
+      clearInterval(pollIntervalRef.current);
+    }
+    abortControllerRef.current?.abort();
+  }, []);
+
+  // 取消生成
+  const cancel = useCallback(() => {
+    if (pollIntervalRef.current) {
+      clearInterval(pollIntervalRef.current);
+    }
+    abortControllerRef.current?.abort();
+    setStatus('idle');
+    setError(null);
+    setJobId(null);
+    setStage('analyzing');
+  }, []);
+
+  return {
+    status,
+    result,
+    error,
+    jobId,
+    stage,
+    generate,
+    reset,
+    cancel,
+  };
+}

frontend/src/index.css

@@ -0,0 +1,98 @@
+@import url('https://cdn.jsdelivr.net/npm/lxgw-wenkai-screen-webfont@1.1.0/style.css');
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* 亮色主题变量 */
+:root {
+  --bg-primary-rgb: 245, 245, 245;
+  --bg-secondary-rgb: 238, 238, 238;
+  --bg-tertiary-rgb: 224, 224, 224;
+  --text-primary-rgb: 33, 33, 33;
+  --text-secondary-rgb: 117, 117, 117;
+  --text-tertiary-rgb: 158, 158, 158;
+  --accent-rgb: 66, 66, 66;
+  --accent-hover-rgb: 48, 48, 48;
+  --border-rgb: 0, 0, 0;
+}
+
+/* 暗黑主题变量 */
+.dark {
+  --bg-primary-rgb: 18, 18, 18;
+  --bg-secondary-rgb: 28, 28, 28;
+  --bg-tertiary-rgb: 38, 38, 38;
+  --text-primary-rgb: 245, 245, 245;
+  --text-secondary-rgb: 189, 189, 189;
+  --text-tertiary-rgb: 117, 117, 117;
+  --accent-rgb: 138, 138, 138;
+  --accent-hover-rgb: 158, 158, 158;
+  --border-rgb: 255, 255, 255;
+}
+
+body {
+  font-family: "LXGW WenKai Screen", "LXGW WenKai TC", "LXGW WenKai Lite", "LXGW WenKai", sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  @apply bg-bg-primary text-text-primary transition-colors duration-300;
+}
+
+/* 自定义下拉菜单样式 */
+select option {
+  padding: 10px 16px;
+  background-color: #ffffff;
+  color: #212121;
+}
+
+select option:hover,
+select option:focus {
+  background-color: #f5f5f5;
+}
+
+select option:checked {
+  background-color: #424242;
+  color: #ffffff;
+  font-weight: 500;
+}
+
+/* 极简滚动条 - MD3 风格 */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: rgba(0, 0, 0, 0.1);
+  border-radius: 9999px;
+}
+
+.dark ::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.15);
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(0, 0, 0, 0.2);
+}
+
+.dark ::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.25);
+}
+
+/* 代码高亮主题适配暗黑模式 */
+.dark .react-syntax-highlighter {
+  background: transparent !important;
+}
+
+/* 动画淡入效果 */
+@keyframes fade-in {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.animate-fade-in {
+  animation: fade-in 0.3s ease-out;
+}

frontend/src/lib/api.ts

@@ -0,0 +1,78 @@
+// API 请求函数
+
+import type { GenerateRequest, GenerateResponse, JobResult, ApiError, VideoConfig } from '../types/api';
+
+const API_BASE = '/api';
+
+/** 从 localStorage 加载视频配置 */
+function loadVideoConfig(): VideoConfig {
+  try {
+    const saved = localStorage.getItem('manimcat_settings');
+    if (saved) {
+      const parsed = JSON.parse(saved);
+      if (parsed.video) {
+        return parsed.video;
+      }
+    }
+  } catch {
+    // 忽略错误，使用默认值
+  }
+  return { quality: 'medium', frameRate: 30, timeout: 120 };
+}
+
+/**
+ * 获取 API 请求头（包含认证信息）
+ */
+function getAuthHeaders(): HeadersInit {
+  const headers: HeadersInit = {
+    'Content-Type': 'application/json',
+  };
+
+  // 从 localStorage 获取用户配置的 API Key
+  const apiKey = localStorage.getItem('manimcat_api_key');
+  if (apiKey) {
+    headers['Authorization'] = `Bearer ${apiKey}`;
+  }
+
+  return headers;
+}
+
+/**
+ * 提交动画生成请求
+ */
+export async function generateAnimation(request: GenerateRequest, signal?: AbortSignal): Promise<GenerateResponse> {
+  // 如果请求中没有 videoConfig，则从设置中加载默认值
+  const videoConfig = request.videoConfig || loadVideoConfig();
+
+  const payload = { ...request, videoConfig };
+  const response = await fetch(`${API_BASE}/generate`, {
+    method: 'POST',
+    headers: getAuthHeaders(),
+    body: JSON.stringify(payload),
+    signal,
+  });
+
+  if (!response.ok) {
+    const error: ApiError = await response.json();
+    throw new Error(error.error || '生成请求失败');
+  }
+
+  return response.json();
+}
+
+/**
+ * 查询任务状态
+ */
+export async function getJobStatus(jobId: string, signal?: AbortSignal): Promise<JobResult> {
+  const response = await fetch(`${API_BASE}/jobs/${jobId}`, {
+    headers: getAuthHeaders(),
+    signal,
+  });
+
+  if (!response.ok) {
+    const error: ApiError = await response.json();
+    throw new Error(error.error || '查询任务状态失败');
+  }
+
+  return response.json();
+}

frontend/src/lib/custom-ai.ts

@@ -0,0 +1,104 @@
+// 自定义 AI API 调用服务
+// 当用户配置了自定义 API 时，直接从浏览器调用
+
+export interface CustomApiConfig {
+  apiUrl: string;
+  apiKey: string;
+  model: string;
+}
+
+/** 从 localStorage 加载配置（使用统一的 manimcat_settings） */
+export function loadCustomConfig(): CustomApiConfig | null {
+  const saved = localStorage.getItem('manimcat_settings');
+  if (saved) {
+    try {
+      const parsed = JSON.parse(saved);
+      // 从统一的 settings 中读取 API 配置
+      if (parsed.api && parsed.api.apiUrl && parsed.api.apiKey) {
+        return {
+          apiUrl: parsed.api.apiUrl,
+          apiKey: parsed.api.apiKey,
+          model: parsed.api.model || ''
+        };
+      }
+    } catch {
+      // ignore
+    }
+  }
+  return null;
+}
+
+/**
+ * 使用自定义 API 生成 Manim 代码
+ * 返回提取出的代码
+ */
+export async function generateWithCustomApi(
+  concept: string,
+  config: CustomApiConfig,
+  signal?: AbortSignal
+): Promise<string> {
+  const apiUrl = config.apiUrl.trim().replace(/\/+$/, '');
+  const model = config.model.trim() || 'gpt-4o-mini';
+
+  // 简化的 prompt
+  const userPrompt = `生成一个 Manim 动画代码，用于演示：${concept}
+
+要求：
+1. 核心类名固定为 MainScene
+2. 纯代码输出，不要 Markdown 标记
+3. 使用中文注释
+4. 背景使用深色调
+5. 确保代码可运行
+
+请直接输出 Python 代码，不要任何解释。`;
+
+  const response = await fetch(`${apiUrl}/chat/completions`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      'Authorization': `Bearer ${config.apiKey.trim()}`,
+    },
+    body: JSON.stringify({
+      model,
+      messages: [
+        {
+          role: 'user',
+          content: userPrompt
+        }
+      ],
+      max_tokens: 2000,
+      temperature: 0.7,
+    }),
+    signal,
+  });
+
+  if (!response.ok) {
+    const errorText = await response.text();
+    throw new Error(`API 请求失败 (${response.status}): ${errorText || response.statusText}`);
+  }
+
+  const data = await response.json();
+  const content = data.choices?.[0]?.message?.content;
+
+  if (!content) {
+    throw new Error('API 返回空响应');
+  }
+
+  // 提取代码
+  return extractCodeFromResponse(content);
+}
+
+/**
+ * 从 AI 响应中提取代码
+ */
+function extractCodeFromResponse(text: string): string {
+  if (!text) return '';
+
+  // 尝试匹配带语言标识的代码块
+  const match = text.match(/```(?:python)?\n([\s\S]*?)```/i);
+  if (match) {
+    return match[1].trim();
+  }
+
+  return text.trim();
+}

frontend/src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

frontend/src/types/api.ts

@@ -0,0 +1,75 @@
+// API 类型定义
+
+/** 视频质量选项 */
+export type Quality = 'low' | 'medium' | 'high';
+
+/** API 配置 */
+export interface ApiConfig {
+  apiUrl: string;
+  apiKey: string;
+  model: string;
+  manimcatApiKey: string;
+}
+
+/** 视频配置 */
+export interface VideoConfig {
+  /** 默认质量 */
+  quality: Quality;
+  /** 帧率 */
+  frameRate: number;
+  /** 超时时间（秒），默认 120 秒 */
+  timeout?: number;
+}
+
+/** 设置配置 */
+export interface SettingsConfig {
+  api: ApiConfig;
+  video: VideoConfig;
+}
+
+/** 任务状态 */
+export type JobStatus = 'processing' | 'completed' | 'failed';
+
+/** 处理阶段 */
+export type ProcessingStage = 'analyzing' | 'generating' | 'refining' | 'rendering' | 'still-rendering';
+
+/** 生成请求 */
+export interface GenerateRequest {
+  concept: string;
+  quality?: Quality;
+  forceRefresh?: boolean;
+  /** 预生成的代码（使用自定义 AI 时） */
+  code?: string;
+  /** 视频配置 */
+  videoConfig?: VideoConfig;
+}
+
+/** 生成响应 */
+export interface GenerateResponse {
+  success: boolean;
+  jobId: string;
+  message: string;
+  status: JobStatus;
+}
+
+/** 任务结果 */
+export interface JobResult {
+  jobId: string;
+  status: JobStatus;
+  stage?: ProcessingStage;
+  message?: string;
+  success?: boolean;
+  video_url?: string;
+  code?: string;
+  used_ai?: boolean;
+  render_quality?: string;
+  generation_type?: string;
+  render_peak_memory_mb?: number;
+  error?: string;
+  details?: string;
+}
+
+/** API 错误 */
+export interface ApiError {
+  error: string;
+}

frontend/tailwind.config.js

@@ -0,0 +1,57 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  darkMode: 'class',
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        // 亮色主题（默认）
+        bg: {
+          primary: 'rgba(var(--bg-primary-rgb), 1)',
+          secondary: 'rgba(var(--bg-secondary-rgb), 1)',
+          tertiary: 'rgba(var(--bg-tertiary-rgb), 1)',
+        },
+        text: {
+          primary: 'rgba(var(--text-primary-rgb), 1)',
+          secondary: 'rgba(var(--text-secondary-rgb), 1)',
+          tertiary: 'rgba(var(--text-tertiary-rgb), 1)',
+        },
+        accent: {
+          DEFAULT: 'rgba(var(--accent-rgb), 1)',
+          hover: 'rgba(var(--accent-hover-rgb), 1)',
+        },
+        border: 'rgba(var(--border-rgb), 1)',
+      },
+      fontFamily: {
+        sans: ['Inter', 'system-ui', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'sans-serif'],
+        mono: ['"SF Mono"', 'Monaco', 'Cascadia Code', 'Roboto Mono', 'monospace'],
+      },
+      borderRadius: {
+        'md3-sm': '8px',
+        'md3': '12px',
+        'md3-lg': '16px',
+        'md3-xl': '20px',
+        'md3-2xl': '24px',
+      },
+      boxShadow: {
+        'md3': '0 1px 3px rgba(0, 0, 0, 0.06)',
+        'md3-lg': '0 4px 12px rgba(0, 0, 0, 0.08)',
+        'md3-xl': '0 8px 24px rgba(0, 0, 0, 0.12)',
+      },
+      keyframes: {
+        shimmer: {
+          '100%': {
+            transform: 'translateX(100%)',
+          },
+        },
+      },
+      animation: {
+        shimmer: 'shimmer 1.5s infinite',
+      },
+    },
+  },
+  plugins: [],
+}

frontend/tsconfig.app.json

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}

frontend/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

frontend/tsconfig.node.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

frontend/vite.config.ts

@@ -0,0 +1,37 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import path from 'path'
+
+export default defineConfig({
+  base: '/',
+  plugins: [react()],
+  build: {
+    outDir: '../public',
+    emptyOutDir: true,
+    rollupOptions: {
+      output: {
+        assetFileNames: 'assets/[name]-[hash][extname]',
+        chunkFileNames: 'assets/[name]-[hash].js',
+        entryFileNames: 'assets/[name]-[hash].js',
+      },
+    },
+  },
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, 'src'),
+    },
+  },
+  server: {
+    port: 5173,
+    proxy: {
+      '/api': {
+        target: 'http://localhost:3000',
+        changeOrigin: true,
+      },
+      '/videos': {
+        target: 'http://localhost:3000',
+        changeOrigin: true,
+      },
+    },
+  },
+})

package.json

@@ -0,0 +1,55 @@
+{
+  "name": "manim-cat",
+  "version": "2.0.0",
+  "description": "ManimCat - AI-powered mathematical animation generator",
+  "type": "module",
+  "scripts": {
+    "dev": "concurrently \"npm:dev:backend\" \"npm:dev:frontend\"",
+    "dev:backend": "tsx watch src/server.ts",
+    "dev:frontend": "cd frontend && vite",
+    "build": "npm run build:frontend",
+    "build:backend": "tsc",
+    "build:frontend": "cd frontend && npm run build",
+    "start": "tsx src/server.ts",
+    "test": "echo \"Tests coming soon\" && exit 0"
+  },
+  "dependencies": {
+    "@types/react-syntax-highlighter": "^15.5.13",
+    "bull": "^4.16.5",
+    "cors": "^2.8.5",
+    "dotenv": "^17.2.3",
+    "express": "^4.18.0",
+    "ioredis": "^5.9.2",
+    "openai": "^4.50.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-syntax-highlighter": "^16.1.0",
+    "uuid": "^10.0.0",
+    "zod": "^3.23.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@types/cors": "^2.8.19",
+    "@types/express": "^4.17.0",
+    "@types/node": "^20.0.0",
+    "@types/react": "^19.2.5",
+    "@types/react-dom": "^19.2.3",
+    "@types/uuid": "^10.0.0",
+    "@vitejs/plugin-react": "^5.1.1",
+    "autoprefixer": "^10.4.23",
+    "concurrently": "^9.0.0",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^3.4.19",
+    "tsx": "^4.21.0",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.46.4",
+    "vite": "^7.2.4"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  }
+}

public/assets/index-DkT5mxpT.css

@@ -0,0 +1 @@
+@import"https://cdn.jsdelivr.net/npm/lxgw-wenkai-webfont@1.1.0/style.css";@import"https://cdn.jsdelivr.net/npm/lxgw-wenkai-lite-webfont@1.1.0/style.css";@import"https://cdn.jsdelivr.net/npm/lxgw-wenkai-tc-webfont@1.0.0/style.css";@import"https://cdn.jsdelivr.net/npm/lxgw-wenkai-screen-webfont@1.1.0/style.css";*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:SF Mono,Monaco,Cascadia Code,Roboto Mono,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.pointer-events-none{pointer-events:none}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0}.-top-2{top:-.5rem}.-top-2\.5{top:-.625rem}.left-0{left:0}.left-1{left:.25rem}.left-3{left:.75rem}.left-4{left:1rem}.right-0{right:0}.right-3{right:.75rem}.right-4{right:1rem}.top-1{top:.25rem}.top-1\/2{top:50%}.top-4{top:1rem}.top-full{top:100%}.z-10{z-index:10}.z-50{z-index:50}.mx-auto{margin-left:auto;margin-right:auto}.mb-1{margin-bottom:.25rem}.mb-12{margin-bottom:3rem}.mb-3{margin-bottom:.75rem}.mb-5{margin-bottom:1.25rem}.mb-6{margin-bottom:1.5rem}.ml-1{margin-left:.25rem}.mt-0\.5{margin-top:.125rem}.mt-2{margin-top:.5rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}.mt-8{margin-top:2rem}.flex{display:flex}.grid{display:grid}.hidden{display:none}.h-10{height:2.5rem}.h-16{height:4rem}.h-3\.5{height:.875rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-7{height:1.75rem}.h-8{height:2rem}.h-\[360px\]{height:360px}.h-full{height:100%}.min-h-\[80px\]{min-height:80px}.min-h-screen{min-height:100vh}.w-10{width:2.5rem}.w-12{width:3rem}.w-16{width:4rem}.w-3\.5{width:.875rem}.w-4{width:1rem}.w-5{width:1.25rem}.w-8{width:2rem}.w-full{width:100%}.max-w-2xl{max-width:42rem}.max-w-4xl{max-width:56rem}.max-w-lg{max-width:32rem}.max-w-md{max-width:28rem}.flex-1{flex:1 1 0%}.-translate-x-full{--tw-translate-x: -100%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\/2{--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-x-0{--tw-translate-x: 0px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-x-5{--tw-translate-x: 1.25rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rotate-180{--tw-rotate: 180deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes spin{to{transform:rotate(360deg)}}.animate-spin{animation:spin 1s linear infinite}.cursor-pointer{cursor:pointer}.resize-none{resize:none}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.flex-col{flex-direction:column}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1\.5{gap:.375rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.space-y-5>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.25rem * var(--tw-space-y-reverse))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem * var(--tw-space-y-reverse))}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:1rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-xl{border-radius:.75rem}.bg-accent{background-color:rgba(var(--accent-rgb),1)}.bg-bg-primary{background-color:rgba(var(--bg-primary-rgb),1)}.bg-bg-secondary{background-color:rgba(var(--bg-secondary-rgb),1)}.bg-bg-secondary\/20{background-color:rgba(var(--bg-secondary-rgb),.2)}.bg-bg-secondary\/30{background-color:rgba(var(--bg-secondary-rgb),.3)}.bg-bg-secondary\/40{background-color:rgba(var(--bg-secondary-rgb),.4)}.bg-bg-secondary\/50{background-color:rgba(var(--bg-secondary-rgb),.5)}.bg-bg-secondary\/70{background-color:rgba(var(--bg-secondary-rgb),.7)}.bg-bg-tertiary{background-color:rgba(var(--bg-tertiary-rgb),1)}.bg-black{--tw-bg-opacity: 1;background-color:rgb(0 0 0 / var(--tw-bg-opacity, 1))}.bg-black\/50{background-color:#00000080}.bg-blue-50{--tw-bg-opacity: 1;background-color:rgb(239 246 255 / var(--tw-bg-opacity, 1))}.bg-green-50{--tw-bg-opacity: 1;background-color:rgb(240 253 244 / var(--tw-bg-opacity, 1))}.bg-red-50{--tw-bg-opacity: 1;background-color:rgb(254 242 242 / var(--tw-bg-opacity, 1))}.bg-red-50\/50{background-color:#fef2f280}.bg-red-50\/80{background-color:#fef2f2cc}.bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.from-transparent{--tw-gradient-from: transparent var(--tw-gradient-from-position);--tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.via-white\/10{--tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), rgb(255 255 255 / .1) var(--tw-gradient-via-position), var(--tw-gradient-to)}.to-transparent{--tw-gradient-to: transparent var(--tw-gradient-to-position)}.object-contain{-o-object-fit:contain;object-fit:contain}.p-1{padding:.25rem}.p-2{padding:.5rem}.p-2\.5{padding:.625rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.px-1\.5{padding-left:.375rem;padding-right:.375rem}.px-12{padding-left:3rem;padding-right:3rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-8{padding-left:2rem;padding-right:2rem}.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-12{padding-top:3rem;padding-bottom:3rem}.py-16{padding-top:4rem;padding-bottom:4rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}.py-3\.5{padding-top:.875rem;padding-bottom:.875rem}.py-4{padding-top:1rem;padding-bottom:1rem}.pr-10{padding-right:2.5rem}.pt-4{padding-top:1rem}.text-left{text-align:left}.text-center{text-align:center}.font-mono{font-family:SF Mono,Monaco,Cascadia Code,Roboto Mono,monospace}.text-5xl{font-size:3rem;line-height:1}.text-\[10px\]{font-size:10px}.text-base{font-size:1rem;line-height:1.5rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-light{font-weight:300}.font-medium{font-weight:500}.uppercase{text-transform:uppercase}.tracking-tight{letter-spacing:-.025em}.tracking-wide{letter-spacing:.025em}.text-accent{color:rgba(var(--accent-rgb),1)}.text-blue-600{--tw-text-opacity: 1;color:rgb(37 99 235 / var(--tw-text-opacity, 1))}.text-green-600{--tw-text-opacity: 1;color:rgb(22 163 74 / var(--tw-text-opacity, 1))}.text-red-500{--tw-text-opacity: 1;color:rgb(239 68 68 / var(--tw-text-opacity, 1))}.text-red-600{--tw-text-opacity: 1;color:rgb(220 38 38 / var(--tw-text-opacity, 1))}.text-text-primary{color:rgba(var(--text-primary-rgb),1)}.text-text-primary\/90{color:rgba(var(--text-primary-rgb),.9)}.text-text-secondary{color:rgba(var(--text-secondary-rgb),1)}.text-text-secondary\/50{color:rgba(var(--text-secondary-rgb),.5)}.text-text-secondary\/60{color:rgba(var(--text-secondary-rgb),.6)}.text-text-secondary\/70{color:rgba(var(--text-secondary-rgb),.7)}.text-text-secondary\/80{color:rgba(var(--text-secondary-rgb),.8)}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.placeholder-text-secondary\/40::-moz-placeholder{color:rgba(var(--text-secondary-rgb),.4)}.placeholder-text-secondary\/40::placeholder{color:rgba(var(--text-secondary-rgb),.4)}.opacity-25{opacity:.25}.opacity-75{opacity:.75}.shadow-lg{--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-md{--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-xl{--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-accent\/25{--tw-shadow-color: rgba(var(--accent-rgb), .25);--tw-shadow: var(--tw-shadow-colored)}.shadow-black\/10{--tw-shadow-color: rgb(0 0 0 / .1);--tw-shadow: var(--tw-shadow-colored)}.drop-shadow-lg{--tw-drop-shadow: drop-shadow(0 10px 8px rgb(0 0 0 / .04)) drop-shadow(0 4px 3px rgb(0 0 0 / .1));filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.duration-500{transition-duration:.5s}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}:root{--bg-primary-rgb: 245, 245, 245;--bg-secondary-rgb: 238, 238, 238;--bg-tertiary-rgb: 224, 224, 224;--text-primary-rgb: 33, 33, 33;--text-secondary-rgb: 117, 117, 117;--text-tertiary-rgb: 158, 158, 158;--accent-rgb: 66, 66, 66;--accent-hover-rgb: 48, 48, 48;--border-rgb: 0, 0, 0}.dark{--bg-primary-rgb: 18, 18, 18;--bg-secondary-rgb: 28, 28, 28;--bg-tertiary-rgb: 38, 38, 38;--text-primary-rgb: 245, 245, 245;--text-secondary-rgb: 189, 189, 189;--text-tertiary-rgb: 117, 117, 117;--accent-rgb: 138, 138, 138;--accent-hover-rgb: 158, 158, 158;--border-rgb: 255, 255, 255}body{font-family:LXGW WenKai Screen,LXGW WenKai TC,LXGW WenKai Lite,LXGW WenKai,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:rgba(var(--bg-primary-rgb),1);color:rgba(var(--text-primary-rgb),1);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.3s}select option{padding:10px 16px;background-color:#fff;color:#212121}select option:hover,select option:focus{background-color:#f5f5f5}select option:checked{background-color:#424242;color:#fff;font-weight:500}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#0000001a;border-radius:9999px}.dark ::-webkit-scrollbar-thumb{background:#ffffff26}::-webkit-scrollbar-thumb:hover{background:#0003}.dark ::-webkit-scrollbar-thumb:hover{background:#ffffff40}.dark .react-syntax-highlighter{background:transparent!important}@keyframes fade-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.animate-fade-in{animation:fade-in .3s ease-out}.hover\:bg-accent-hover:hover{background-color:rgba(var(--accent-hover-rgb),1)}.hover\:bg-bg-secondary:hover{background-color:rgba(var(--bg-secondary-rgb),1)}.hover\:bg-bg-secondary\/30:hover{background-color:rgba(var(--bg-secondary-rgb),.3)}.hover\:bg-bg-secondary\/50:hover{background-color:rgba(var(--bg-secondary-rgb),.5)}.hover\:bg-bg-secondary\/60:hover{background-color:rgba(var(--bg-secondary-rgb),.6)}.hover\:bg-bg-secondary\/70:hover{background-color:rgba(var(--bg-secondary-rgb),.7)}.hover\:bg-bg-secondary\/80:hover{background-color:rgba(var(--bg-secondary-rgb),.8)}.hover\:text-accent:hover{color:rgba(var(--accent-rgb),1)}.hover\:text-accent-hover:hover{color:rgba(var(--accent-hover-rgb),1)}.hover\:text-red-500:hover{--tw-text-opacity: 1;color:rgb(239 68 68 / var(--tw-text-opacity, 1))}.hover\:text-text-primary:hover{color:rgba(var(--text-primary-rgb),1)}.hover\:text-text-secondary:hover{color:rgba(var(--text-secondary-rgb),1)}.hover\:shadow-xl:hover{--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.hover\:shadow-accent\/35:hover{--tw-shadow-color: rgba(var(--accent-rgb), .35);--tw-shadow: var(--tw-shadow-colored)}.focus\:bg-bg-secondary\/70:focus{background-color:rgba(var(--bg-secondary-rgb),.7)}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring-2:focus{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.focus\:ring-accent\/20:focus{--tw-ring-color: rgba(var(--accent-rgb), .2)}.focus\:ring-red-500\/20:focus{--tw-ring-color: rgb(239 68 68 / .2)}.active\:scale-\[0\.97\]:active{--tw-scale-x: .97;--tw-scale-y: .97;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.active\:scale-\[0\.98\]:active{--tw-scale-x: .98;--tw-scale-y: .98;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-30:disabled{opacity:.3}.disabled\:opacity-50:disabled{opacity:.5}.group:hover .group-hover\:translate-x-1{--tw-translate-x: .25rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes shimmer{to{transform:translate(100%)}}.group:hover .group-hover\:animate-shimmer{animation:shimmer 1.5s infinite}.dark\:bg-blue-900\/20:is(.dark *){background-color:#1e3a8a33}.dark\:bg-green-900\/20:is(.dark *){background-color:#14532d33}.dark\:bg-red-900\/10:is(.dark *){background-color:#7f1d1d1a}.dark\:bg-red-900\/20:is(.dark *){background-color:#7f1d1d33}.dark\:text-blue-400:is(.dark *){--tw-text-opacity: 1;color:rgb(96 165 250 / var(--tw-text-opacity, 1))}.dark\:text-green-400:is(.dark *){--tw-text-opacity: 1;color:rgb(74 222 128 / var(--tw-text-opacity, 1))}.dark\:text-red-400:is(.dark *){--tw-text-opacity: 1;color:rgb(248 113 113 / var(--tw-text-opacity, 1))}@media(min-width:640px){.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:p-6{padding:1.5rem}.sm\:py-20{padding-top:5rem;padding-bottom:5rem}.sm\:text-6xl{font-size:3.75rem;line-height:1}.sm\:text-base{font-size:1rem;line-height:1.5rem}}@media(min-width:1024px){.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}