把小说片段变成漫画分镜条：粘贴一段文字，选择画风，自动生成多格漫画。纯前端应用 + Cloudflare Pages Functions 中转，无需自建后端，API Key 由使用者自己在浏览器里配置（存于 localStorage，不上传服务器）。

• 粘贴小说文本，自动拆分成分镜（也支持手动逐行编辑场景描述）
• 6 种画风：日漫、美漫、水墨、线稿、Q 版、赛博朋克
• 逐格生成 / 重新生成，支持自定义附加提示词与负面提示词
• 单格下载、整页导出（html2canvas）、打包 ZIP 下载（jszip）
• GSAP 滚动动画首页，移动端自动降级

• React 19 + TypeScript + Vite 7 + Tailwind CSS v3（shadcn 风格组件）
• GSAP ScrollTrigger / framer-motion / Lenis
• Cloudflare Pages Functions（/ark-api、/img-proxy 两个中转接口）
• 上游模型：火山引擎方舟（Seedream 生图 / Seed 文本），兼容 OpenAI 格式的接口均可替换

要求 Node.js 20+。

npm install
npm run dev        # http://localhost:3000

开发环境下两个中转接口由 Vite 插件/代理实现（vite.config.ts），与 functions/ 里的生产实现逻辑一致。

其他命令：

npm run build      # 类型检查 + 构建到 dist/
npm run lint
npm run preview

部署或启动后，点击页面右上角「API 设置」，填入：

配置只保存在浏览器 localStorage。请求方舟域名时会自动改走本站 /ark-api 中转以绕过 CORS；生成结果图片经 /img-proxy 中转以便下载和画布导出。

方舟接口（ark.cn-beijing.volces.com）的响应不带 CORS 头，浏览器会拦截一切跨域直连的 fetch，前端改任何代码都无法绕过，必须有一个同源中转层代发请求。本项目的中转层有两份等价实现：

• 本地开发：vite.config.ts 中的 Vite dev server 代理（/ark-api）+ imgProxyPlugin（/img-proxy）。本地启动的 Vite 是一个 Node 进程，天然能承担这个角色，所以本地开箱即用。
• 生产部署：functions/ 目录下的 Cloudflare Pages Functions。静态托管只有 CDN、没有服务器进程，Pages Functions 在边缘节点补上了同样的中转角色。

/img-proxy 另有原因：火山 TOS 图片不带 CORS 头（会导致 html2canvas 画布污染、导出失败），且部分广告拦截插件会屏蔽其域名。

因此本项目无法以"纯静态、零后端"方式部署——除非方舟官方为接口加上 CORS 头，否则任何部署目标都需要等价实现这两个转发（见下节）。

functions/ 目录是 Pages Functions，部署后自动生效。

1. Fork / push 本仓库到你的 GitHub
2. Cloudflare 控制台 → Workers & Pages → Create → Pages → Connect to Git，选择该仓库
3. 构建配置：
   • Build command: npm run build
   • Build output directory: dist
   • Node.js 版本：20（可在环境变量里加 NODE_VERSION=20）
4. 保存后每次 push 到生产分支自动部署

npm install -D wrangler
wrangler login
npm run build
wrangler pages project create comicforge --production-branch main   # 首次
wrangler pages deploy dist --project-name comicforge

部署完成后访问 https://<project-name>.pages.dev。

如果不使用 Cloudflare Pages，需要注意两个中转接口的替代方案：

• /ark-api/* → https://ark.cn-beijing.volces.com/api/*（透传 method/headers/body，见 functions/ark-api/[[path]].ts）
• /img-proxy?url=... → 白名单域名的图片代理（见 functions/img-proxy.ts）

在 Vercel/Netlify/Nginx 上等价实现这两个转发即可，前端代码无需改动。

functions/            Cloudflare Pages Functions（生产环境中转接口）
  ark-api/[[path]].ts   方舟 API 中转（绕过 CORS）
  img-proxy.ts          生成图片中转（TOS 无 CORS 头 / 广告拦截）
src/
  pages/Home.tsx      首页
  sections/           Hero / Generator / StyleGallery / HowItWorks / Faq
  components/comic/   生成器相关组件（设置弹窗、分镜卡、导出等）
  lib/                api.ts（方舟调用）、config.ts（localStorage 配置）、storyboard.ts（分镜拆分）
vite.config.ts        开发环境的等价中转实现（改动需与 functions/ 同步）

注意：vite.config.ts 中的 /ark-api、/img-proxy 与 functions/ 下的实现是开发/生产两份等价逻辑，修改其中一份时请同步另一份。