diff --git a/.env.example b/.env.example
new file mode 100644
index 0000000..b9b6ea8
--- /dev/null
+++ b/.env.example
@@ -0,0 +1,5 @@
+# Server-only credentials. Configure these in `.env.local` for local
+# development and in the deployment provider's encrypted environment settings
+# for production. Never commit real values.
+DEEPSEEK_API_KEY=replace-with-your-siliconflow-api-key
+ARK_API_KEY=replace-with-your-volcengine-ark-api-key
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
new file mode 100644
index 0000000..6e15051
--- /dev/null
+++ b/.github/workflows/ci.yml
@@ -0,0 +1,40 @@
+name: CI
+
+on:
+  push:
+    branches:
+      - main
+      - "security/**"
+      - "portfolio/**"
+  pull_request:
+
+permissions:
+  contents: read
+
+jobs:
+  validate:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out repository
+        uses: actions/checkout@fbc6f3992d24b796d5a048ff273f7fcc4a7b6c09 # v5
+
+      - name: Set up Node.js
+        uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5
+        with:
+          node-version: "22"
+          package-manager-cache: false
+
+      - name: Install locked dependencies
+        run: corepack pnpm@8.15.6 install --frozen-lockfile
+
+      - name: Audit production dependencies
+        run: corepack pnpm@8.15.6 audit --prod
+
+      - name: Type-check
+        run: corepack pnpm@8.15.6 exec tsc --noEmit
+
+      - name: Build production application
+        env:
+          ARK_API_KEY: ci-placeholder
+          DEEPSEEK_API_KEY: ci-placeholder
+        run: corepack pnpm@8.15.6 build
diff --git a/.gitignore b/.gitignore
index f704477..1c17f94 100755
--- a/.gitignore
+++ b/.gitignore
@@ -27,6 +27,7 @@ yarn-error.log*
 # local env files
 .env
 .env*.local
+.history/
 
 # vercel
 .vercel
@@ -35,4 +36,4 @@ yarn-error.log*
 *.tsbuildinfo
 next-env.d.ts
 
-.history
\ No newline at end of file
+.history
diff --git a/.history/.gitignore_20250727100327 b/.history/.gitignore_20250727100327
deleted file mode 100644
index f650315..0000000
--- a/.history/.gitignore_20250727100327
+++ /dev/null
@@ -1,27 +0,0 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-
-# next.js
-/.next/
-/out/
-
-# production
-/build
-
-# debug
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-.pnpm-debug.log*
-
-# env files
-.env*
-
-# vercel
-.vercel
-
-# typescript
-*.tsbuildinfo
-next-env.d.ts
\ No newline at end of file
diff --git a/.history/.gitignore_20250803171954 b/.history/.gitignore_20250803171954
deleted file mode 100644
index c9cbdde..0000000
--- a/.history/.gitignore_20250803171954
+++ /dev/null
@@ -1,36 +0,0 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-
-# testing
-/coverage
-
-# next.js
-/.next/
-/out/
-
-# production
-/build
-
-# misc
-.DS_Store
-*.pem
-
-# debug
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
-# local env files
-.env
-.env*.local
-
-# vercel
-.vercel
-
-# typescript
-*.tsbuildinfo
-next-env.d.ts
\ No newline at end of file
diff --git a/.history/README_20250803172033.md b/.history/README_20250803172033.md
deleted file mode 100644
index 0519ecb..0000000
--- a/.history/README_20250803172033.md
+++ /dev/null
@@ -1 +0,0 @@
- 
\ No newline at end of file
diff --git a/.history/README_20250803172037.md b/.history/README_20250803172037.md
deleted file mode 100644
index c4d5e1b..0000000
--- a/.history/README_20250803172037.md
+++ /dev/null
@@ -1,85 +0,0 @@
-# 漫画生成器
-
-AI 驱动的文本到漫画转换应用，基于 Next.js 构建。
-
-## 功能特点
-
-- 将文本内容转换为漫画剧本
-- 根据剧本生成漫画图像
-- 多种文本生成模型选择
-- 可定制的图片比例和生成参数
-- 响应式界面设计
-
-## 技术栈
-
-- Next.js (React 框架)
-- TypeScript
-- Tailwind CSS
-- DeepSeek API (文本生成)
-- Volces ARK API (图像生成)
-
-## 本地开发
-
-1. 克隆仓库
-
-```bash
-git clone <your-repo-url>
-cd comic-generator
-```
-
-2. 安装依赖
-
-```bash
-pnpm install
-```
-
-3. 创建环境变量文件
-
-```bash
-cp .env.example .env.local
-```
-
-然后编辑`.env.local`文件，添加你的 API 密钥
-
-4. 启动开发服务器
-
-```bash
-pnpm dev
-```
-
-5. 在浏览器中访问 [http://localhost:3000](http://localhost:3000)
-
-## Vercel 部署
-
-### 自动部署设置
-
-本项目已配置为通过 Vercel 自动部署。每次推送代码到主分支时，Vercel 都会自动构建并部署新版本。
-
-设置步骤：
-
-1. Fork 或克隆此仓库到你的 GitHub 账号
-
-2. 在[Vercel](https://vercel.com)创建账号并连接你的 GitHub 账号
-
-3. 导入项目
-
-   - 点击"New Project"
-   - 选择你的仓库
-   - 在"Environment Variables"部分添加必要的环境变量(如`DEEPSEEK_API_KEY`)
-   - 点击"Deploy"开始部署
-
-4. 完成后，Vercel 会提供一个部署 URL，你可以在项目设置中自定义域名
-
-### 注意事项
-
-- 确保你的 API 密钥在 Vercel 项目设置中正确配置
-- 更改环境变量后需要重新部署应用
-- 使用 Vercel CLI 可以进行本地测试
-
-## 贡献指南
-
-欢迎贡献代码、提出问题或建议。请通过 GitHub Issues 提交问题或通过 Pull Request 贡献代码。
-
-## 许可证
-
-[MIT](LICENSE)
diff --git a/.history/app/api/generate-images/route_20250801235053.ts b/.history/app/api/generate-images/route_20250801235053.ts
deleted file mode 100644
index 0519ecb..0000000
--- a/.history/app/api/generate-images/route_20250801235053.ts
+++ /dev/null
@@ -1 +0,0 @@
- 
\ No newline at end of file
diff --git a/.history/app/api/generate-images/route_20250801235058.ts b/.history/app/api/generate-images/route_20250801235058.ts
deleted file mode 100644
index bcde069..0000000
--- a/.history/app/api/generate-images/route_20250801235058.ts
+++ /dev/null
@@ -1,100 +0,0 @@
-import { NextRequest, NextResponse } from "next/server";
-import { ComicPanel } from "@/lib/types";
-
-const ARK_API_URL =
-  "https://ark.cn-beijing.volces.com/api/v3/images/generations";
-const ARK_API_KEY = "7ef519e4-d564-4f90-8459-94b6ef973e25"; // 在实际生产环境中应使用环境变量
-const BASE_IMAGE_URL =
-  "https://ark-project.tos-cn-beijing.volces.com/doc_image/seededit_i2i.jpeg"; // 示例基础图像URL
-
-export async function POST(request: NextRequest) {
-  try {
-    const { comicPanels } = await request.json();
-
-    if (
-      !comicPanels ||
-      !Array.isArray(comicPanels) ||
-      comicPanels.length === 0
-    ) {
-      return NextResponse.json(
-        { error: "缺少有效的漫画剧本数据" },
-        { status: 400 }
-      );
-    }
-
-    // 处理每个场景，生成对应的图像
-    const imageGenerationPromises = comicPanels.map(
-      async (panel: ComicPanel, index: number) => {
-        try {
-          // 从剧本内容中提取关键信息，构建适合图像生成的提示词
-          // 这里可以根据需要优化提示词的构建方式
-          const prompt = `漫画风格的场景：${panel.content.substring(0, 200)}`;
-
-          // 调用ARK图像生成API
-          const response = await fetch(ARK_API_URL, {
-            method: "POST",
-            headers: {
-              "Content-Type": "application/json",
-              Authorization: `Bearer ${ARK_API_KEY}`,
-            },
-            body: JSON.stringify({
-              model: "doubao-seededit-3-0-i2i-250628",
-              prompt: prompt,
-              image: BASE_IMAGE_URL,
-              response_format: "url",
-              size: "adaptive",
-              seed: Math.floor(Math.random() * 1000), // 随机种子以获得不同的结果
-              guidance_scale: 5.5,
-              watermark: true,
-            }),
-          });
-
-          if (!response.ok) {
-            const errorData = await response.text();
-            console.error(`ARK API 错误 (场景 ${index + 1}):`, errorData);
-            throw new Error(`生成图像失败: ${response.statusText}`);
-          }
-
-          const data = await response.json();
-          return {
-            id: panel.id,
-            content: panel.content,
-            imageUrl: data.data?.[0]?.url || panel.imageUrl, // 如果有新图像URL则更新，否则保留原样
-            sceneNumber: index + 1,
-          };
-        } catch (err) {
-          console.error(`处理场景 ${index + 1} 时出错:`, err);
-          // 出错时返回原始面板数据，但添加错误信息
-          return {
-            ...panel,
-            imageUrl: panel.imageUrl,
-            sceneNumber: index + 1,
-            error: err instanceof Error ? err.message : "图像生成失败",
-          };
-        }
-      }
-    );
-
-    // 等待所有图像生成完成
-    const results = await Promise.allSettled(imageGenerationPromises);
-
-    // 处理结果
-    const generatedPanels = results.map((result, index) => {
-      if (result.status === "fulfilled") {
-        return result.value;
-      } else {
-        // 如果某个请求失败，返回原始面板但带有错误信息
-        return {
-          ...comicPanels[index],
-          sceneNumber: index + 1,
-          error: "图像生成请求失败",
-        };
-      }
-    });
-
-    return NextResponse.json({ comicPanels: generatedPanels });
-  } catch (error) {
-    console.error("图像生成API路由错误:", error);
-    return NextResponse.json({ error: "服务器内部错误" }, { status: 500 });
-  }
-}
diff --git a/.history/app/api/generate-images/route_20250801235544.ts b/.history/app/api/generate-images/route_20250801235544.ts
deleted file mode 100644
index 1b7be4e..0000000
--- a/.history/app/api/generate-images/route_20250801235544.ts
+++ /dev/null
@@ -1,113 +0,0 @@
-import { NextRequest, NextResponse } from "next/server";
-import { ComicPanel } from "@/lib/types";
-
-const ARK_API_URL =
-  "https://ark.cn-beijing.volces.com/api/v3/images/generations";
-const ARK_API_KEY = "7ef519e4-d564-4f90-8459-94b6ef973e25"; // 在实际生产环境中应使用环境变量
-const BASE_IMAGE_URL =
-  "https://ark-project.tos-cn-beijing.volces.com/doc_image/seededit_i2i.jpeg"; // 示例基础图像URL
-
-export async function POST(request: NextRequest) {
-  try {
-    const { comicPanels, aspectRatio = "16:9" } = await request.json();
-
-    if (
-      !comicPanels ||
-      !Array.isArray(comicPanels) ||
-      comicPanels.length === 0
-    ) {
-      return NextResponse.json(
-        { error: "缺少有效的漫画剧本数据" },
-        { status: 400 }
-      );
-    }
-
-    // 处理每个场景，生成对应的图像
-    const imageGenerationPromises = comicPanels.map(
-      async (panel: ComicPanel, index: number) => {
-        try {
-          // 从剧本内容中提取关键信息，构建适合图像生成的提示词
-          // 这里可以根据需要优化提示词的构建方式
-          const prompt = `漫画风格的场景：${panel.content.substring(0, 200)}`;
-
-          // 根据用户选择的比例确定输出尺寸
-          let size = "adaptive"; // 默认自适应尺寸
-
-          if (aspectRatio !== "custom") {
-            // 如果用户选择了预设的比例，则使用对应的尺寸
-            // 由于API可能没有直接支持比例参数，我们在这里注释了可能的处理方式
-            // 实际使用时可以根据API的文档进行适配
-
-            // 以下仅为示意，实际API可能使用不同的参数
-            size = aspectRatio;
-          }
-
-          // 调用ARK图像生成API
-          const response = await fetch(ARK_API_URL, {
-            method: "POST",
-            headers: {
-              "Content-Type": "application/json",
-              Authorization: `Bearer ${ARK_API_KEY}`,
-            },
-            body: JSON.stringify({
-              model: "doubao-seededit-3-0-i2i-250628",
-              prompt: prompt,
-              image: BASE_IMAGE_URL,
-              response_format: "url",
-              size: size, // 使用用户选择的比例
-              aspect_ratio: aspectRatio, // 添加额外的比例参数（如果API支持）
-              seed: Math.floor(Math.random() * 1000), // 随机种子以获得不同的结果
-              guidance_scale: 5.5,
-              watermark: true,
-            }),
-          });
-
-          if (!response.ok) {
-            const errorData = await response.text();
-            console.error(`ARK API 错误 (场景 ${index + 1}):`, errorData);
-            throw new Error(`生成图像失败: ${response.statusText}`);
-          }
-
-          const data = await response.json();
-          return {
-            id: panel.id,
-            content: panel.content,
-            imageUrl: data.data?.[0]?.url || panel.imageUrl, // 如果有新图像URL则更新，否则保留原样
-            sceneNumber: index + 1,
-          };
-        } catch (err) {
-          console.error(`处理场景 ${index + 1} 时出错:`, err);
-          // 出错时返回原始面板数据，但添加错误信息
-          return {
-            ...panel,
-            imageUrl: panel.imageUrl,
-            sceneNumber: index + 1,
-            error: err instanceof Error ? err.message : "图像生成失败",
-          };
-        }
-      }
-    );
-
-    // 等待所有图像生成完成
-    const results = await Promise.allSettled(imageGenerationPromises);
-
-    // 处理结果
-    const generatedPanels = results.map((result, index) => {
-      if (result.status === "fulfilled") {
-        return result.value;
-      } else {
-        // 如果某个请求失败，返回原始面板但带有错误信息
-        return {
-          ...comicPanels[index],
-          sceneNumber: index + 1,
-          error: "图像生成请求失败",
-        };
-      }
-    });
-
-    return NextResponse.json({ comicPanels: generatedPanels });
-  } catch (error) {
-    console.error("图像生成API路由错误:", error);
-    return NextResponse.json({ error: "服务器内部错误" }, { status: 500 });
-  }
-}
diff --git a/.history/app/api/generate-images/route_20250801235831.ts b/.history/app/api/generate-images/route_20250801235831.ts
deleted file mode 100644
index db37c7a..0000000
--- a/.history/app/api/generate-images/route_20250801235831.ts
+++ /dev/null
@@ -1,115 +0,0 @@
-import { NextRequest, NextResponse } from "next/server";
-import { ComicPanel } from "@/lib/types";
-
-const ARK_API_URL =
-  "https://ark.cn-beijing.volces.com/api/v3/images/generations";
-const ARK_API_KEY = "7ef519e4-d564-4f90-8459-94b6ef973e25"; // 在实际生产环境中应使用环境变量
-const BASE_IMAGE_URL =
-  "https://ark-project.tos-cn-beijing.volces.com/doc_image/seededit_i2i.jpeg"; // 示例基础图像URL
-
-// 将比例转换为图像尺寸的映射
-const aspectRatioToSize = {
-  "1:1": "1024x1024",
-  "3:4": "768x1024",
-  "4:3": "1024x768",
-  "16:9": "1024x576",
-  "9:16": "576x1024",
-  "2:3": "768x1152",
-  "3:2": "1152x768",
-  "21:9": "1344x576",
-  custom: "1024x1024", // 默认为1:1
-};
-
-export async function POST(request: NextRequest) {
-  try {
-    const { comicPanels, aspectRatio = "16:9" } = await request.json();
-
-    if (
-      !comicPanels ||
-      !Array.isArray(comicPanels) ||
-      comicPanels.length === 0
-    ) {
-      return NextResponse.json(
-        { error: "缺少有效的漫画剧本数据" },
-        { status: 400 }
-      );
-    }
-
-    // 处理每个场景，生成对应的图像
-    const imageGenerationPromises = comicPanels.map(
-      async (panel: ComicPanel, index: number) => {
-        try {
-          // 从剧本内容中提取关键信息，构建适合图像生成的提示词
-          const prompt = `漫画风格的场景：${panel.content.substring(0, 200)}`;
-
-          // 获取对应比例的尺寸
-          const size = aspectRatioToSize[aspectRatio] || "1024x1024";
-
-          // 调用ARK图像生成API
-          const response = await fetch(ARK_API_URL, {
-            method: "POST",
-            headers: {
-              "Content-Type": "application/json",
-              Authorization: `Bearer ${ARK_API_KEY}`,
-            },
-            body: JSON.stringify({
-              model: "doubao-seededit-3-0-i2i-250628",
-              prompt: prompt,
-              image: BASE_IMAGE_URL,
-              response_format: "url",
-              size: size, // 使用转换后的尺寸值
-              seed: Math.floor(Math.random() * 1000), // 随机种子以获得不同的结果
-              guidance_scale: 5.5,
-              watermark: true,
-            }),
-          });
-
-          if (!response.ok) {
-            const errorData = await response.text();
-            console.error(`ARK API 错误 (场景 ${index + 1}):`, errorData);
-            throw new Error(`生成图像失败: ${response.statusText}`);
-          }
-
-          const data = await response.json();
-          return {
-            id: panel.id,
-            content: panel.content,
-            imageUrl: data.data?.[0]?.url || panel.imageUrl, // 如果有新图像URL则更新，否则保留原样
-            sceneNumber: index + 1,
-          };
-        } catch (err) {
-          console.error(`处理场景 ${index + 1} 时出错:`, err);
-          // 出错时返回原始面板数据，但添加错误信息
-          return {
-            ...panel,
-            imageUrl: panel.imageUrl,
-            sceneNumber: index + 1,
-            error: err instanceof Error ? err.message : "图像生成失败",
-          };
-        }
-      }
-    );
-
-    // 等待所有图像生成完成
-    const results = await Promise.allSettled(imageGenerationPromises);
-
-    // 处理结果
-    const generatedPanels = results.map((result, index) => {
-      if (result.status === "fulfilled") {
-        return result.value;
-      } else {
-        // 如果某个请求失败，返回原始面板但带有错误信息
-        return {
-          ...comicPanels[index],
-          sceneNumber: index + 1,
-          error: "图像生成请求失败",
-        };
-      }
-    });
-
-    return NextResponse.json({ comicPanels: generatedPanels });
-  } catch (error) {
-    console.error("图像生成API路由错误:", error);
-    return NextResponse.json({ error: "服务器内部错误" }, { status: 500 });
-  }
-}
diff --git a/.history/app/api/generate-images/route_20250801235908.ts b/.history/app/api/generate-images/route_20250801235908.ts
deleted file mode 100644
index ae5d267..0000000
--- a/.history/app/api/generate-images/route_20250801235908.ts
+++ /dev/null
@@ -1,128 +0,0 @@
-import { NextRequest, NextResponse } from "next/server";
-import { ComicPanel } from "@/lib/types";
-
-const ARK_API_URL =
-  "https://ark.cn-beijing.volces.com/api/v3/images/generations";
-const ARK_API_KEY = "7ef519e4-d564-4f90-8459-94b6ef973e25"; // 在实际生产环境中应使用环境变量
-const BASE_IMAGE_URL =
-  "https://ark-project.tos-cn-beijing.volces.com/doc_image/seededit_i2i.jpeg"; // 示例基础图像URL
-
-// 定义比例类型
-type AspectRatioKey =
-  | "1:1"
-  | "3:4"
-  | "4:3"
-  | "16:9"
-  | "9:16"
-  | "2:3"
-  | "3:2"
-  | "21:9"
-  | "custom";
-
-// 将比例转换为图像尺寸的映射
-const aspectRatioToSize: Record<AspectRatioKey, string> = {
-  "1:1": "1024x1024",
-  "3:4": "768x1024",
-  "4:3": "1024x768",
-  "16:9": "1024x576",
-  "9:16": "576x1024",
-  "2:3": "768x1152",
-  "3:2": "1152x768",
-  "21:9": "1344x576",
-  custom: "1024x1024", // 默认为1:1
-};
-
-export async function POST(request: NextRequest) {
-  try {
-    const { comicPanels, aspectRatio = "16:9" } = await request.json();
-
-    if (
-      !comicPanels ||
-      !Array.isArray(comicPanels) ||
-      comicPanels.length === 0
-    ) {
-      return NextResponse.json(
-        { error: "缺少有效的漫画剧本数据" },
-        { status: 400 }
-      );
-    }
-
-    // 处理每个场景，生成对应的图像
-    const imageGenerationPromises = comicPanels.map(
-      async (panel: ComicPanel, index: number) => {
-        try {
-          // 从剧本内容中提取关键信息，构建适合图像生成的提示词
-          const prompt = `漫画风格的场景：${panel.content.substring(0, 200)}`;
-
-          // 获取对应比例的尺寸
-          const size =
-            aspectRatioToSize[aspectRatio as AspectRatioKey] || "1024x1024";
-
-          // 调用ARK图像生成API
-          const response = await fetch(ARK_API_URL, {
-            method: "POST",
-            headers: {
-              "Content-Type": "application/json",
-              Authorization: `Bearer ${ARK_API_KEY}`,
-            },
-            body: JSON.stringify({
-              model: "doubao-seededit-3-0-i2i-250628",
-              prompt: prompt,
-              image: BASE_IMAGE_URL,
-              response_format: "url",
-              size: size, // 使用转换后的尺寸值
-              seed: Math.floor(Math.random() * 1000), // 随机种子以获得不同的结果
-              guidance_scale: 5.5,
-              watermark: true,
-            }),
-          });
-
-          if (!response.ok) {
-            const errorData = await response.text();
-            console.error(`ARK API 错误 (场景 ${index + 1}):`, errorData);
-            throw new Error(`生成图像失败: ${response.statusText}`);
-          }
-
-          const data = await response.json();
-          return {
-            id: panel.id,
-            content: panel.content,
-            imageUrl: data.data?.[0]?.url || panel.imageUrl, // 如果有新图像URL则更新，否则保留原样
-            sceneNumber: index + 1,
-          };
-        } catch (err) {
-          console.error(`处理场景 ${index + 1} 时出错:`, err);
-          // 出错时返回原始面板数据，但添加错误信息
-          return {
-            ...panel,
-            imageUrl: panel.imageUrl,
-            sceneNumber: index + 1,
-            error: err instanceof Error ? err.message : "图像生成失败",
-          };
-        }
-      }
-    );
-
-    // 等待所有图像生成完成
-    const results = await Promise.allSettled(imageGenerationPromises);
-
-    // 处理结果
-    const generatedPanels = results.map((result, index) => {
-      if (result.status === "fulfilled") {
-        return result.value;
-      } else {
-        // 如果某个请求失败，返回原始面板但带有错误信息
-        return {
-          ...comicPanels[index],
-          sceneNumber: index + 1,
-          error: "图像生成请求失败",
-        };
-      }
-    });
-
-    return NextResponse.json({ comicPanels: generatedPanels });
-  } catch (error) {
-    console.error("图像生成API路由错误:", error);
-    return NextResponse.json({ error: "服务器内部错误" }, { status: 500 });
-  }
-}
diff --git a/.history/app/api/generate-images/route_20250802000026.ts b/.history/app/api/generate-images/route_20250802000026.ts
deleted file mode 100644
index c4bcf50..0000000
--- a/.history/app/api/generate-images/route_20250802000026.ts
+++ /dev/null
@@ -1,132 +0,0 @@
-import { NextRequest, NextResponse } from "next/server";
-import { ComicPanel } from "@/lib/types";
-
-const ARK_API_URL =
-  "https://ark.cn-beijing.volces.com/api/v3/images/generations";
-const ARK_API_KEY = "7ef519e4-d564-4f90-8459-94b6ef973e25"; // 在实际生产环境中应使用环境变量
-const BASE_IMAGE_URL =
-  "https://ark-project.tos-cn-beijing.volces.com/doc_image/seededit_i2i.jpeg"; // 示例基础图像URL
-
-// 定义比例类型
-type AspectRatioKey =
-  | "1:1"
-  | "3:4"
-  | "4:3"
-  | "16:9"
-  | "9:16"
-  | "2:3"
-  | "3:2"
-  | "21:9"
-  | "custom";
-
-// 将比例转换为图像尺寸的映射（使用API手册推荐的官方尺寸）
-const aspectRatioToSize: Record<AspectRatioKey, string> = {
-  "1:1": "1024x1024", // （1:1）
-  "3:4": "864x1152", // （3:4）
-  "4:3": "1152x864", // （4:3）
-  "16:9": "1280x720", // （16:9）
-  "9:16": "720x1280", // （9:16）
-  "2:3": "832x1248", // （2:3）
-  "3:2": "1248x832", // （3:2）
-  "21:9": "1512x648", // （21:9）
-  custom: "1024x1024", // 默认为1:1
-};
-
-export async function POST(request: NextRequest) {
-  try {
-    const { comicPanels, aspectRatio = "16:9" } = await request.json();
-
-    if (
-      !comicPanels ||
-      !Array.isArray(comicPanels) ||
-      comicPanels.length === 0
-    ) {
-      return NextResponse.json(
-        { error: "缺少有效的漫画剧本数据" },
-        { status: 400 }
-      );
-    }
-
-    // 处理每个场景，生成对应的图像
-    const imageGenerationPromises = comicPanels.map(
-      async (panel: ComicPanel, index: number) => {
-        try {
-          // 从剧本内容中提取关键信息，构建适合图像生成的提示词
-          const prompt = `漫画风格的场景：${panel.content.substring(0, 200)}`;
-
-          // 获取对应比例的尺寸
-          const size =
-            aspectRatioToSize[aspectRatio as AspectRatioKey] || "1024x1024";
-
-          console.log(
-            `生成场景 ${index + 1}, 使用尺寸: ${size}, 比例: ${aspectRatio}`
-          );
-
-          // 调用ARK图像生成API
-          const response = await fetch(ARK_API_URL, {
-            method: "POST",
-            headers: {
-              "Content-Type": "application/json",
-              Authorization: `Bearer ${ARK_API_KEY}`,
-            },
-            body: JSON.stringify({
-              model: "doubao-seededit-3-0-i2i-250628",
-              prompt: prompt,
-              image: BASE_IMAGE_URL,
-              response_format: "url",
-              size: size, // 使用API手册推荐的尺寸值
-              seed: Math.floor(Math.random() * 1000), // 随机种子以获得不同的结果
-              guidance_scale: 5.5,
-              watermark: true,
-            }),
-          });
-
-          if (!response.ok) {
-            const errorData = await response.text();
-            console.error(`ARK API 错误 (场景 ${index + 1}):`, errorData);
-            throw new Error(`生成图像失败: ${response.statusText}`);
-          }
-
-          const data = await response.json();
-          return {
-            id: panel.id,
-            content: panel.content,
-            imageUrl: data.data?.[0]?.url || panel.imageUrl, // 如果有新图像URL则更新，否则保留原样
-            sceneNumber: index + 1,
-          };
-        } catch (err) {
-          console.error(`处理场景 ${index + 1} 时出错:`, err);
-          // 出错时返回原始面板数据，但添加错误信息
-          return {
-            ...panel,
-            imageUrl: panel.imageUrl,
-            sceneNumber: index + 1,
-            error: err instanceof Error ? err.message : "图像生成失败",
-          };
-        }
-      }
-    );
-
-    // 等待所有图像生成完成
-    const results = await Promise.allSettled(imageGenerationPromises);
-
-    // 处理结果
-    const generatedPanels = results.map((result, index) => {
-      if (result.status === "fulfilled") {
-        return result.value;
-      } else {
-        // 如果某个请求失败，返回原始面板但带有错误信息
-        return {
-          ...comicPanels[index],
-          sceneNumber: index + 1,
-          error: "图像生成请求失败",
-        };
-      }
-    });
-
-    return NextResponse.json({ comicPanels: generatedPanels });
-  } catch (error) {
-    console.error("图像生成API路由错误:", error);
-    return NextResponse.json({ error: "服务器内部错误" }, { status: 500 });
-  }
-}
diff --git a/.history/app/api/generate-images/route_20250802000315.ts b/.history/app/api/generate-images/route_20250802000315.ts
deleted file mode 100644
index 5e4f591..0000000
--- a/.history/app/api/generate-images/route_20250802000315.ts
+++ /dev/null
@@ -1,144 +0,0 @@
-import { NextRequest, NextResponse } from "next/server";
-import { ComicPanel } from "@/lib/types";
-
-const ARK_API_URL =
-  "https://ark.cn-beijing.volces.com/api/v3/images/generations";
-const ARK_API_KEY = "7ef519e4-d564-4f90-8459-94b6ef973e25"; // 在实际生产环境中应使用环境变量
-const BASE_IMAGE_URL =
-  "https://ark-project.tos-cn-beijing.volces.com/doc_image/seededit_i2i.jpeg"; // 示例基础图像URL
-
-// 定义比例类型
-type AspectRatioKey =
-  | "1:1"
-  | "3:4"
-  | "4:3"
-  | "16:9"
-  | "9:16"
-  | "2:3"
-  | "3:2"
-  | "21:9"
-  | "custom";
-
-// 将比例转换为图像尺寸的映射（使用API手册推荐的官方尺寸）
-const aspectRatioToSize: Record<
-  AspectRatioKey,
-  { width: number; height: number }
-> = {
-  "1:1": { width: 1024, height: 1024 }, // （1:1）
-  "3:4": { width: 864, height: 1152 }, // （3:4）
-  "4:3": { width: 1152, height: 864 }, // （4:3）
-  "16:9": { width: 1280, height: 720 }, // （16:9）
-  "9:16": { width: 720, height: 1280 }, // （9:16）
-  "2:3": { width: 832, height: 1248 }, // （2:3）
-  "3:2": { width: 1248, height: 832 }, // （3:2）
-  "21:9": { width: 1512, height: 648 }, // （21:9）
-  custom: { width: 1024, height: 1024 }, // 默认为1:1
-};
-
-export async function POST(request: NextRequest) {
-  try {
-    const { comicPanels, aspectRatio = "16:9" } = await request.json();
-
-    if (
-      !comicPanels ||
-      !Array.isArray(comicPanels) ||
-      comicPanels.length === 0
-    ) {
-      return NextResponse.json(
-        { error: "缺少有效的漫画剧本数据" },
-        { status: 400 }
-      );
-    }
-
-    // 处理每个场景，生成对应的图像
-    const imageGenerationPromises = comicPanels.map(
-      async (panel: ComicPanel, index: number) => {
-        try {
-          // 从剧本内容中提取关键信息，构建适合图像生成的提示词
-          const prompt = `漫画风格的场景：${panel.content.substring(0, 200)}`;
-
-          // 获取对应比例的尺寸
-          const dimensions = aspectRatioToSize[
-            aspectRatio as AspectRatioKey
-          ] || { width: 1024, height: 1024 };
-
-          console.log(
-            `生成场景 ${index + 1}, 使用尺寸: ${dimensions.width}x${
-              dimensions.height
-            }, 比例: ${aspectRatio}`
-          );
-
-          // 准备API请求体，注意确保完全按照API文档的要求
-          const requestBody = {
-            model: "doubao-seededit-3-0-i2i-250628",
-            prompt: prompt,
-            image: BASE_IMAGE_URL,
-            response_format: "url",
-            width: dimensions.width, // 使用width和height分别指定宽高
-            height: dimensions.height,
-            seed: Math.floor(Math.random() * 1000), // 随机种子以获得不同的结果
-            guidance_scale: 5.5,
-            watermark: true,
-          };
-
-          console.log(`请求体: ${JSON.stringify(requestBody)}`);
-
-          // 调用ARK图像生成API
-          const response = await fetch(ARK_API_URL, {
-            method: "POST",
-            headers: {
-              "Content-Type": "application/json",
-              Authorization: `Bearer ${ARK_API_KEY}`,
-            },
-            body: JSON.stringify(requestBody),
-          });
-
-          if (!response.ok) {
-            const errorData = await response.text();
-            console.error(`ARK API 错误 (场景 ${index + 1}):`, errorData);
-            throw new Error(`生成图像失败: ${response.statusText}`);
-          }
-
-          const data = await response.json();
-          return {
-            id: panel.id,
-            content: panel.content,
-            imageUrl: data.data?.[0]?.url || panel.imageUrl, // 如果有新图像URL则更新，否则保留原样
-            sceneNumber: index + 1,
-          };
-        } catch (err) {
-          console.error(`处理场景 ${index + 1} 时出错:`, err);
-          // 出错时返回原始面板数据，但添加错误信息
-          return {
-            ...panel,
-            imageUrl: panel.imageUrl,
-            sceneNumber: index + 1,
-            error: err instanceof Error ? err.message : "图像生成失败",
-          };
-        }
-      }
-    );
-
-    // 等待所有图像生成完成
-    const results = await Promise.allSettled(imageGenerationPromises);
-
-    // 处理结果
-    const generatedPanels = results.map((result, index) => {
-      if (result.status === "fulfilled") {
-        return result.value;
-      } else {
-        // 如果某个请求失败，返回原始面板但带有错误信息
-        return {
-          ...comicPanels[index],
-          sceneNumber: index + 1,
-          error: "图像生成请求失败",
-        };
-      }
-    });
-
-    return NextResponse.json({ comicPanels: generatedPanels });
-  } catch (error) {
-    console.error("图像生成API路由错误:", error);
-    return NextResponse.json({ error: "服务器内部错误" }, { status: 500 });
-  }
-}
diff --git a/.history/app/api/generate-images/route_20250802000905.ts b/.history/app/api/generate-images/route_20250802000905.ts
deleted file mode 100644
index f42572c..0000000
--- a/.history/app/api/generate-images/route_20250802000905.ts
+++ /dev/null
@@ -1,144 +0,0 @@
-import { NextRequest, NextResponse } from "next/server";
-import { ComicPanel } from "@/lib/types";
-
-const ARK_API_URL =
-  "https://ark.cn-beijing.volces.com/api/v3/images/generations";
-const ARK_API_KEY = "7ef519e4-d564-4f90-8459-94b6ef973e25"; // 在实际生产环境中应使用环境变量
-const BASE_IMAGE_URL =
-  "https://ark-project.tos-cn-beijing.volces.com/doc_image/seededit_i2i.jpeg"; // 示例基础图像URL
-
-// 定义比例类型
-type AspectRatioKey =
-  | "1:1"
-  | "3:4"
-  | "4:3"
-  | "16:9"
-  | "9:16"
-  | "2:3"
-  | "3:2"
-  | "21:9"
-  | "custom";
-
-// 将比例转换为图像尺寸的映射（使用API手册推荐的官方尺寸）
-const aspectRatioToSize: Record<
-  AspectRatioKey,
-  { width: number; height: number }
-> = {
-  "1:1": { width: 1024, height: 1024 }, // （1:1）
-  "3:4": { width: 864, height: 1152 }, // （3:4）
-  "4:3": { width: 1152, height: 864 }, // （4:3）
-  "16:9": { width: 1280, height: 720 }, // （16:9）
-  "9:16": { width: 720, height: 1280 }, // （9:16）
-  "2:3": { width: 832, height: 1248 }, // （2:3）
-  "3:2": { width: 1248, height: 832 }, // （3:2）
-  "21:9": { width: 1512, height: 648 }, // （21:9）
-  custom: { width: 1024, height: 1024 }, // 默认为1:1
-};
-
-export async function POST(request: NextRequest) {
-  try {
-    const { comicPanels, aspectRatio = "16:9" } = await request.json();
-
-    if (
-      !comicPanels ||
-      !Array.isArray(comicPanels) ||
-      comicPanels.length === 0
-    ) {
-      return NextResponse.json(
-        { error: "缺少有效的漫画剧本数据" },
-        { status: 400 }
-      );
-    }
-
-    // 处理每个场景，生成对应的图像
-    const imageGenerationPromises = comicPanels.map(
-      async (panel: ComicPanel, index: number) => {
-        try {
-          // 从剧本内容中提取关键信息，构建适合图像生成的提示词
-          const prompt = `漫画风格的场景：${panel.content.substring(0, 200)}`;
-
-          // 获取对应比例的尺寸
-          const dimensions = aspectRatioToSize[
-            aspectRatio as AspectRatioKey
-          ] || { width: 1024, height: 1024 };
-
-          console.log(
-            `生成场景 ${index + 1}, 使用尺寸: ${dimensions.width}x${
-              dimensions.height
-            }, 比例: ${aspectRatio}`
-          );
-
-          // 准备API请求体，注意确保完全按照API文档的要求
-          const requestBody = {
-            model: "doubao-seededit-3-0-i2i-250628",
-            prompt: prompt,
-            image: BASE_IMAGE_URL,
-            response_format: "url",
-            width: dimensions.width, // 使用width和height分别指定宽高
-            height: dimensions.height,
-            seed: Math.floor(Math.random() * 1000), // 随机种子以获得不同的结果
-            guidance_scale: 5.5,
-            watermark: false, // 移除水印
-          };
-
-          console.log(`请求体: ${JSON.stringify(requestBody)}`);
-
-          // 调用ARK图像生成API
-          const response = await fetch(ARK_API_URL, {
-            method: "POST",
-            headers: {
-              "Content-Type": "application/json",
-              Authorization: `Bearer ${ARK_API_KEY}`,
-            },
-            body: JSON.stringify(requestBody),
-          });
-
-          if (!response.ok) {
-            const errorData = await response.text();
-            console.error(`ARK API 错误 (场景 ${index + 1}):`, errorData);
-            throw new Error(`生成图像失败: ${response.statusText}`);
-          }
-
-          const data = await response.json();
-          return {
-            id: panel.id,
-            content: panel.content,
-            imageUrl: data.data?.[0]?.url || panel.imageUrl, // 如果有新图像URL则更新，否则保留原样
-            sceneNumber: index + 1,
-          };
-        } catch (err) {
-          console.error(`处理场景 ${index + 1} 时出错:`, err);
-          // 出错时返回原始面板数据，但添加错误信息
-          return {
-            ...panel,
-            imageUrl: panel.imageUrl,
-            sceneNumber: index + 1,
-            error: err instanceof Error ? err.message : "图像生成失败",
-          };
-        }
-      }
-    );
-
-    // 等待所有图像生成完成
-    const results = await Promise.allSettled(imageGenerationPromises);
-
-    // 处理结果
-    const generatedPanels = results.map((result, index) => {
-      if (result.status === "fulfilled") {
-        return result.value;
-      } else {
-        // 如果某个请求失败，返回原始面板但带有错误信息
-        return {
-          ...comicPanels[index],
-          sceneNumber: index + 1,
-          error: "图像生成请求失败",
-        };
-      }
-    });
-
-    return NextResponse.json({ comicPanels: generatedPanels });
-  } catch (error) {
-    console.error("图像生成API路由错误:", error);
-    return NextResponse.json({ error: "服务器内部错误" }, { status: 500 });
-  }
-}
diff --git a/.history/app/api/generate-images/route_20250802001950.ts b/.history/app/api/generate-images/route_20250802001950.ts
deleted file mode 100644
index 624b4f6..0000000
--- a/.history/app/api/generate-images/route_20250802001950.ts
+++ /dev/null
@@ -1,153 +0,0 @@
-import { NextRequest, NextResponse } from "next/server";
-import { ComicPanel } from "@/lib/types";
-
-const ARK_API_URL =
-  "https://ark.cn-beijing.volces.com/api/v3/images/generations";
-const ARK_API_KEY = "7ef519e4-d564-4f90-8459-94b6ef973e25"; // 在实际生产环境中应使用环境变量
-const BASE_IMAGE_URL =
-  "https://ark-project.tos-cn-beijing.volces.com/doc_image/seededit_i2i.jpeg"; // 示例基础图像URL
-
-// 定义比例类型
-type AspectRatioKey =
-  | "1:1"
-  | "3:4"
-  | "4:3"
-  | "16:9"
-  | "9:16"
-  | "2:3"
-  | "3:2"
-  | "21:9"
-  | "custom";
-
-// 将比例转换为图像尺寸的映射（使用API手册推荐的官方尺寸）
-const aspectRatioToSize: Record<
-  AspectRatioKey,
-  { width: number; height: number }
-> = {
-  "1:1": { width: 1024, height: 1024 }, // （1:1）
-  "3:4": { width: 864, height: 1152 }, // （3:4）
-  "4:3": { width: 1152, height: 864 }, // （4:3）
-  "16:9": { width: 1280, height: 720 }, // （16:9）
-  "9:16": { width: 720, height: 1280 }, // （9:16）
-  "2:3": { width: 832, height: 1248 }, // （2:3）
-  "3:2": { width: 1248, height: 832 }, // （3:2）
-  "21:9": { width: 1512, height: 648 }, // （21:9）
-  custom: { width: 1024, height: 1024 }, // 默认为1:1
-};
-
-export async function POST(request: NextRequest) {
-  try {
-    const {
-      comicPanels,
-      aspectRatio = "16:9",
-      seed = -1,
-      guidance_scale = 2.5,
-    } = await request.json();
-
-    if (
-      !comicPanels ||
-      !Array.isArray(comicPanels) ||
-      comicPanels.length === 0
-    ) {
-      return NextResponse.json(
-        { error: "缺少有效的漫画剧本数据" },
-        { status: 400 }
-      );
-    }
-
-    // 处理每个场景，生成对应的图像
-    const imageGenerationPromises = comicPanels.map(
-      async (panel: ComicPanel, index: number) => {
-        try {
-          // 从剧本内容中提取关键信息，构建适合图像生成的提示词
-          const prompt = `漫画风格的场景：${panel.content.substring(0, 200)}`;
-
-          // 获取对应比例的尺寸
-          const dimensions = aspectRatioToSize[
-            aspectRatio as AspectRatioKey
-          ] || { width: 1024, height: 1024 };
-
-          // 为每个面板生成不同的种子，如果用户选择了固定种子，则所有面板使用相同的种子
-          const panelSeed =
-            seed === -1 ? Math.floor(Math.random() * 2147483647) : seed;
-
-          console.log(
-            `生成场景 ${index + 1}, 使用尺寸: ${dimensions.width}x${
-              dimensions.height
-            }, 比例: ${aspectRatio}, 种子: ${panelSeed}, 文本权重: ${guidance_scale}`
-          );
-
-          // 准备API请求体，注意确保完全按照API文档的要求
-          const requestBody = {
-            model: "doubao-seededit-3-0-i2i-250628",
-            prompt: prompt,
-            image: BASE_IMAGE_URL,
-            response_format: "url",
-            width: dimensions.width, // 使用width和height分别指定宽高
-            height: dimensions.height,
-            seed: panelSeed, // 使用计算得到的种子值
-            guidance_scale: guidance_scale, // 使用传入的文本权重值
-            watermark: false, // 移除水印
-          };
-
-          console.log(`请求体: ${JSON.stringify(requestBody)}`);
-
-          // 调用ARK图像生成API
-          const response = await fetch(ARK_API_URL, {
-            method: "POST",
-            headers: {
-              "Content-Type": "application/json",
-              Authorization: `Bearer ${ARK_API_KEY}`,
-            },
-            body: JSON.stringify(requestBody),
-          });
-
-          if (!response.ok) {
-            const errorData = await response.text();
-            console.error(`ARK API 错误 (场景 ${index + 1}):`, errorData);
-            throw new Error(`生成图像失败: ${response.statusText}`);
-          }
-
-          const data = await response.json();
-          return {
-            id: panel.id,
-            content: panel.content,
-            imageUrl: data.data?.[0]?.url || panel.imageUrl, // 如果有新图像URL则更新，否则保留原样
-            sceneNumber: index + 1,
-          };
-        } catch (err) {
-          console.error(`处理场景 ${index + 1} 时出错:`, err);
-          // 出错时返回原始面板数据，但添加错误信息
-          return {
-            ...panel,
-            imageUrl: panel.imageUrl,
-            sceneNumber: index + 1,
-            error: err instanceof Error ? err.message : "图像生成失败",
-          };
-        }
-      }
-    );
-
-    // 等待所有图像生成完成
-    const results = await Promise.allSettled(imageGenerationPromises);
-
-    // 处理结果
-    const generatedPanels = results.map((result, index) => {
-      if (result.status === "fulfilled") {
-        return result.value;
-      } else {
-        // 如果某个请求失败，返回原始面板但带有错误信息
-        return {
-          ...comicPanels[index],
-          sceneNumber: index + 1,
-          error: "图像生成请求失败",
-        };
-      }
-    });
-
-    return NextResponse.json({ comicPanels: generatedPanels });
-  } catch (error) {
-    console.error("图像生成API路由错误:", error);
-    return NextResponse.json({ error: "服务器内部错误" }, { status: 500 });
-  }
-}
diff --git a/.history/app/api/generate-images/route_20250802003058.ts b/.history/app/api/generate-images/route_20250802003058.ts
deleted file mode 100644
index 624b4f6..0000000
--- a/.history/app/api/generate-images/route_20250802003058.ts
+++ /dev/null
@@ -1,153 +0,0 @@
-import { NextRequest, NextResponse } from "next/server";
-import { ComicPanel } from "@/lib/types";
-
-const ARK_API_URL =
-  "https://ark.cn-beijing.volces.com/api/v3/images/generations";
-const ARK_API_KEY = "7ef519e4-d564-4f90-8459-94b6ef973e25"; // 在实际生产环境中应使用环境变量
-const BASE_IMAGE_URL =
-  "https://ark-project.tos-cn-beijing.volces.com/doc_image/seededit_i2i.jpeg"; // 示例基础图像URL
-
-// 定义比例类型
-type AspectRatioKey =
-  | "1:1"
-  | "3:4"
-  | "4:3"
-  | "16:9"
-  | "9:16"
-  | "2:3"
-  | "3:2"
-  | "21:9"
-  | "custom";
-
-// 将比例转换为图像尺寸的映射（使用API手册推荐的官方尺寸）
-const aspectRatioToSize: Record<
-  AspectRatioKey,
-  { width: number; height: number }
-> = {
-  "1:1": { width: 1024, height: 1024 }, // （1:1）
-  "3:4": { width: 864, height: 1152 }, // （3:4）
-  "4:3": { width: 1152, height: 864 }, // （4:3）
-  "16:9": { width: 1280, height: 720 }, // （16:9）
-  "9:16": { width: 720, height: 1280 }, // （9:16）
-  "2:3": { width: 832, height: 1248 }, // （2:3）
-  "3:2": { width: 1248, height: 832 }, // （3:2）
-  "21:9": { width: 1512, height: 648 }, // （21:9）
-  custom: { width: 1024, height: 1024 }, // 默认为1:1
-};
-
-export async function POST(request: NextRequest) {
-  try {
-    const {
-      comicPanels,
-      aspectRatio = "16:9",
-      seed = -1,
-      guidance_scale = 2.5,
-    } = await request.json();
-
-    if (
-      !comicPanels ||
-      !Array.isArray(comicPanels) ||
-      comicPanels.length === 0
-    ) {
-      return NextResponse.json(
-        { error: "缺少有效的漫画剧本数据" },
-        { status: 400 }
-      );
-    }
-
-    // 处理每个场景，生成对应的图像
-    const imageGenerationPromises = comicPanels.map(
-      async (panel: ComicPanel, index: number) => {
-        try {
-          // 从剧本内容中提取关键信息，构建适合图像生成的提示词
-          const prompt = `漫画风格的场景：${panel.content.substring(0, 200)}`;
-
-          // 获取对应比例的尺寸
-          const dimensions = aspectRatioToSize[
-            aspectRatio as AspectRatioKey
-          ] || { width: 1024, height: 1024 };
-
-          // 为每个面板生成不同的种子，如果用户选择了固定种子，则所有面板使用相同的种子
-          const panelSeed =
-            seed === -1 ? Math.floor(Math.random() * 2147483647) : seed;
-
-          console.log(
-            `生成场景 ${index + 1}, 使用尺寸: ${dimensions.width}x${
-              dimensions.height
-            }, 比例: ${aspectRatio}, 种子: ${panelSeed}, 文本权重: ${guidance_scale}`
-          );
-
-          // 准备API请求体，注意确保完全按照API文档的要求
-          const requestBody = {
-            model: "doubao-seededit-3-0-i2i-250628",
-            prompt: prompt,
-            image: BASE_IMAGE_URL,
-            response_format: "url",
-            width: dimensions.width, // 使用width和height分别指定宽高
-            height: dimensions.height,
-            seed: panelSeed, // 使用计算得到的种子值
-            guidance_scale: guidance_scale, // 使用传入的文本权重值
-            watermark: false, // 移除水印
-          };
-
-          console.log(`请求体: ${JSON.stringify(requestBody)}`);
-
-          // 调用ARK图像生成API
-          const response = await fetch(ARK_API_URL, {
-            method: "POST",
-            headers: {
-              "Content-Type": "application/json",
-              Authorization: `Bearer ${ARK_API_KEY}`,
-            },
-            body: JSON.stringify(requestBody),
-          });
-
-          if (!response.ok) {
-            const errorData = await response.text();
-            console.error(`ARK API 错误 (场景 ${index + 1}):`, errorData);
-            throw new Error(`生成图像失败: ${response.statusText}`);
-          }
-
-          const data = await response.json();
-          return {
-            id: panel.id,
-            content: panel.content,
-            imageUrl: data.data?.[0]?.url || panel.imageUrl, // 如果有新图像URL则更新，否则保留原样
-            sceneNumber: index + 1,
-          };
-        } catch (err) {
-          console.error(`处理场景 ${index + 1} 时出错:`, err);
-          // 出错时返回原始面板数据，但添加错误信息
-          return {
-            ...panel,
-            imageUrl: panel.imageUrl,
-            sceneNumber: index + 1,
-            error: err instanceof Error ? err.message : "图像生成失败",
-          };
-        }
-      }
-    );
-
-    // 等待所有图像生成完成
-    const results = await Promise.allSettled(imageGenerationPromises);
-
-    // 处理结果
-    const generatedPanels = results.map((result, index) => {
-      if (result.status === "fulfilled") {
-        return result.value;
-      } else {
-        // 如果某个请求失败，返回原始面板但带有错误信息
-        return {
-          ...comicPanels[index],
-          sceneNumber: index + 1,
-          error: "图像生成请求失败",
-        };
-      }
-    });
-
-    return NextResponse.json({ comicPanels: generatedPanels });
-  } catch (error) {
-    console.error("图像生成API路由错误:", error);
-    return NextResponse.json({ error: "服务器内部错误" }, { status: 500 });
-  }
-}
diff --git a/.history/app/api/generate-images/route_20250802004958.ts b/.history/app/api/generate-images/route_20250802004958.ts
deleted file mode 100644
index 624b4f6..0000000
--- a/.history/app/api/generate-images/route_20250802004958.ts
+++ /dev/null
@@ -1,153 +0,0 @@
-import { NextRequest, NextResponse } from "next/server";
-import { ComicPanel } from "@/lib/types";
-
-const ARK_API_URL =
-  "https://ark.cn-beijing.volces.com/api/v3/images/generations";
-const ARK_API_KEY = "7ef519e4-d564-4f90-8459-94b6ef973e25"; // 在实际生产环境中应使用环境变量
-const BASE_IMAGE_URL =
-  "https://ark-project.tos-cn-beijing.volces.com/doc_image/seededit_i2i.jpeg"; // 示例基础图像URL
-
-// 定义比例类型
-type AspectRatioKey =
-  | "1:1"
-  | "3:4"
-  | "4:3"
-  | "16:9"
-  | "9:16"
-  | "2:3"
-  | "3:2"
-  | "21:9"
-  | "custom";
-
-// 将比例转换为图像尺寸的映射（使用API手册推荐的官方尺寸）
-const aspectRatioToSize: Record<
-  AspectRatioKey,
-  { width: number; height: number }
-> = {
-  "1:1": { width: 1024, height: 1024 }, // （1:1）
-  "3:4": { width: 864, height: 1152 }, // （3:4）
-  "4:3": { width: 1152, height: 864 }, // （4:3）
-  "16:9": { width: 1280, height: 720 }, // （16:9）
-  "9:16": { width: 720, height: 1280 }, // （9:16）
-  "2:3": { width: 832, height: 1248 }, // （2:3）
-  "3:2": { width: 1248, height: 832 }, // （3:2）
-  "21:9": { width: 1512, height: 648 }, // （21:9）
-  custom: { width: 1024, height: 1024 }, // 默认为1:1
-};
-
-export async function POST(request: NextRequest) {
-  try {
-    const {
-      comicPanels,
-      aspectRatio = "16:9",
-      seed = -1,
-      guidance_scale = 2.5,
-    } = await request.json();
-
-    if (
-      !comicPanels ||
-      !Array.isArray(comicPanels) ||
-      comicPanels.length === 0
-    ) {
-      return NextResponse.json(
-        { error: "缺少有效的漫画剧本数据" },
-        { status: 400 }
-      );
-    }
-
-    // 处理每个场景，生成对应的图像
-    const imageGenerationPromises = comicPanels.map(
-      async (panel: ComicPanel, index: number) => {
-        try {
-          // 从剧本内容中提取关键信息，构建适合图像生成的提示词
-          const prompt = `漫画风格的场景：${panel.content.substring(0, 200)}`;
-
-          // 获取对应比例的尺寸
-          const dimensions = aspectRatioToSize[
-            aspectRatio as AspectRatioKey
-          ] || { width: 1024, height: 1024 };
-
-          // 为每个面板生成不同的种子，如果用户选择了固定种子，则所有面板使用相同的种子
-          const panelSeed =
-            seed === -1 ? Math.floor(Math.random() * 2147483647) : seed;
-
-          console.log(
-            `生成场景 ${index + 1}, 使用尺寸: ${dimensions.width}x${
-              dimensions.height
-            }, 比例: ${aspectRatio}, 种子: ${panelSeed}, 文本权重: ${guidance_scale}`
-          );
-
-          // 准备API请求体，注意确保完全按照API文档的要求
-          const requestBody = {
-            model: "doubao-seededit-3-0-i2i-250628",
-            prompt: prompt,
-            image: BASE_IMAGE_URL,
-            response_format: "url",
-            width: dimensions.width, // 使用width和height分别指定宽高
-            height: dimensions.height,
-            seed: panelSeed, // 使用计算得到的种子值
-            guidance_scale: guidance_scale, // 使用传入的文本权重值
-            watermark: false, // 移除水印
-          };
-
-          console.log(`请求体: ${JSON.stringify(requestBody)}`);
-
-          // 调用ARK图像生成API
-          const response = await fetch(ARK_API_URL, {
-            method: "POST",
-            headers: {
-              "Content-Type": "application/json",
-              Authorization: `Bearer ${ARK_API_KEY}`,
-            },
-            body: JSON.stringify(requestBody),
-          });
-
-          if (!response.ok) {
-            const errorData = await response.text();
-            console.error(`ARK API 错误 (场景 ${index + 1}):`, errorData);
-            throw new Error(`生成图像失败: ${response.statusText}`);
-          }
-
-          const data = await response.json();
-          return {
-            id: panel.id,
-            content: panel.content,
-            imageUrl: data.data?.[0]?.url || panel.imageUrl, // 如果有新图像URL则更新，否则保留原样
-            sceneNumber: index + 1,
-          };
-        } catch (err) {
-          console.error(`处理场景 ${index + 1} 时出错:`, err);
-          // 出错时返回原始面板数据，但添加错误信息
-          return {
-            ...panel,
-            imageUrl: panel.imageUrl,
-            sceneNumber: index + 1,
-            error: err instanceof Error ? err.message : "图像生成失败",
-          };
-        }
-      }
-    );
-
-    // 等待所有图像生成完成
-    const results = await Promise.allSettled(imageGenerationPromises);
-
-    // 处理结果
-    const generatedPanels = results.map((result, index) => {
-      if (result.status === "fulfilled") {
-        return result.value;
-      } else {
-        // 如果某个请求失败，返回原始面板但带有错误信息
-        return {
-          ...comicPanels[index],
-          sceneNumber: index + 1,
-          error: "图像生成请求失败",
-        };
-      }
-    });
-
-    return NextResponse.json({ comicPanels: generatedPanels });
-  } catch (error) {
-    console.error("图像生成API路由错误:", error);
-    return NextResponse.json({ error: "服务器内部错误" }, { status: 500 });
-  }
-}
diff --git a/.history/app/api/generate/route_20250801230209.ts b/.history/app/api/generate/route_20250801230209.ts
deleted file mode 100644
index 0519ecb..0000000
--- a/.history/app/api/generate/route_20250801230209.ts
+++ /dev/null
@@ -1 +0,0 @@
- 
\ No newline at end of file
diff --git a/.history/app/api/generate/route_20250801230215.ts b/.history/app/api/generate/route_20250801230215.ts
deleted file mode 100644
index 7ad054f..0000000
--- a/.history/app/api/generate/route_20250801230215.ts
+++ /dev/null
@@ -1,78 +0,0 @@
-import { NextRequest, NextResponse } from "next/server";
-
-const DEEPSEEK_API_URL = "https://api.siliconflow.cn/v1/chat/completions";
-const DEEPSEEK_API_KEY = "sk-xgpdmqrgikwkbaacvxbvtkwhxnwjncdvqzlshnzcyswxhsfn"; // 在实际生产环境中应使用环境变量
-
-export async function POST(request: NextRequest) {
-  try {
-    const { content, count = 4 } = await request.json();
-
-    if (!content || content.trim() === "") {
-      return NextResponse.json({ error: "文章内容不能为空" }, { status: 400 });
-    }
-
-    // 构建提示词，要求生成漫画面板的描述
-    const prompt = `
-请根据以下故事情节，创作${count}幅漫画场景的详细视觉描述。
-每幅描述应包含场景、角色、动作、表情和背景等细节，以便用于生成漫画面板。
-请确保描述具有连贯性，能够讲述完整的故事。
-每幅描述以 "场景1:"、"场景2:" 等格式开头，并用换行分隔。
-只输出场景描述，不要有其他解释性文字。
-
-故事：${content}
-`;
-
-    // 调用DeepSeek API
-    const response = await fetch(DEEPSEEK_API_URL, {
-      method: "POST",
-      headers: {
-        Authorization: `Bearer ${DEEPSEEK_API_KEY}`,
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify({
-        model: "Qwen/QwQ-32B", // 使用清华的Qwen模型生成文本描述
-        messages: [
-          {
-            role: "user",
-            content: prompt,
-          },
-        ],
-        temperature: 0.7,
-      }),
-    });
-
-    if (!response.ok) {
-      const errorData = await response.text();
-      console.error("DeepSeek API错误:", errorData);
-      return NextResponse.json(
-        { error: "生成漫画描述失败" },
-        { status: response.status }
-      );
-    }
-
-    const data = await response.json();
-    const descriptions = data.choices[0].message.content.trim();
-
-    // 将文本描述转换为场景数组
-    const scenes = descriptions
-      .split(/场景\d+:/g)
-      .filter(Boolean)
-      .map((scene) => scene.trim())
-      .slice(0, count);
-
-    // 为每个场景生成假的图片URL (实际项目中可以接入图像生成API)
-    const comicPanels = scenes.map((description, index) => ({
-      id: `panel-${index + 1}`,
-      description: description,
-      // 在实际项目中，这里应该调用图像生成API，目前用占位图
-      imageUrl: `https://placehold.co/600x400/pink/white?text=Comic+${
-        index + 1
-      }`,
-    }));
-
-    return NextResponse.json({ comicPanels });
-  } catch (error) {
-    console.error("API路由错误:", error);
-    return NextResponse.json({ error: "服务器内部错误" }, { status: 500 });
-  }
-}
diff --git a/.history/app/api/generate/route_20250801231240.ts b/.history/app/api/generate/route_20250801231240.ts
deleted file mode 100644
index b93fed0..0000000
--- a/.history/app/api/generate/route_20250801231240.ts
+++ /dev/null
@@ -1,87 +0,0 @@
-import { NextRequest, NextResponse } from "next/server";
-
-const DEEPSEEK_API_URL = "https://api.siliconflow.cn/v1/chat/completions";
-const DEEPSEEK_API_KEY = "sk-xgpdmqrgikwkbaacvxbvtkwhxnwjncdvqzlshnzcyswxhsfn"; // 在实际生产环境中应使用环境变量
-
-export async function POST(request: NextRequest) {
-  try {
-    const { content, count = 4 } = await request.json();
-
-    if (!content || content.trim() === "") {
-      return NextResponse.json({ error: "文章内容不能为空" }, { status: 400 });
-    }
-
-    // 构建提示词，要求创作完整的漫画故事
-    const prompt = `
-你是一位专业的漫画脚本创作者。请根据以下内容，创作一个完整的漫画故事，分为${count}个场景。
-
-每个场景需要包含以下元素：
-1. 场景描述：包括地点、时间、环境等
-2. 角色描述：包括外貌、表情、动作、姿态等
-3. 对话内容：角色之间的对话或内心独白
-4. 情感氛围：该场景的主要情感基调
-
-请确保故事具有连贯性和完整的情节发展，包括开始、发展、高潮和结局。
-每个场景以"【场景1】"、"【场景2】"等格式开头，并用明显的分隔符分开。
-
-用户提供的内容或创意：
-${content}
-
-请基于以上内容进行创作，不要有任何与创作无关的解释性文字。直接输出创作内容。
-`;
-
-    // 调用DeepSeek API
-    const response = await fetch(DEEPSEEK_API_URL, {
-      method: "POST",
-      headers: {
-        Authorization: `Bearer ${DEEPSEEK_API_KEY}`,
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify({
-        model: "Qwen/QwQ-32B", // 使用清华的Qwen模型生成漫画故事
-        messages: [
-          {
-            role: "user",
-            content: prompt,
-          },
-        ],
-        temperature: 0.8, // 略微提高创意性
-        max_tokens: 2000, // 确保有足够的输出长度
-      }),
-    });
-
-    if (!response.ok) {
-      const errorData = await response.text();
-      console.error("DeepSeek API错误:", errorData);
-      return NextResponse.json(
-        { error: "生成漫画故事失败" },
-        { status: response.status }
-      );
-    }
-
-    const data = await response.json();
-    const storyContent = data.choices[0].message.content.trim();
-
-    // 解析故事内容，提取各个场景
-    const scenes = storyContent
-      .split(/【场景\d+】/g)
-      .filter(Boolean)
-      .map((scene) => scene.trim())
-      .slice(0, count);
-
-    // 为每个场景生成假的图片URL (实际项目中可以接入图像生成API)
-    const comicPanels = scenes.map((content, index) => ({
-      id: `panel-${index + 1}`,
-      content: content,
-      // 在实际项目中，这里应该调用图像生成API，目前用占位图
-      imageUrl: `https://placehold.co/600x400/pink/white?text=Comic+${
-        index + 1
-      }`,
-    }));
-
-    return NextResponse.json({ comicPanels });
-  } catch (error) {
-    console.error("API路由错误:", error);
-    return NextResponse.json({ error: "服务器内部错误" }, { status: 500 });
-  }
-}
diff --git a/.history/app/api/generate/route_20250801231305.ts b/.history/app/api/generate/route_20250801231305.ts
deleted file mode 100644
index 263f98d..0000000
--- a/.history/app/api/generate/route_20250801231305.ts
+++ /dev/null
@@ -1,87 +0,0 @@
-import { NextRequest, NextResponse } from "next/server";
-
-const DEEPSEEK_API_URL = "https://api.siliconflow.cn/v1/chat/completions";
-const DEEPSEEK_API_KEY = "sk-xgpdmqrgikwkbaacvxbvtkwhxnwjncdvqzlshnzcyswxhsfn"; // 在实际生产环境中应使用环境变量
-
-export async function POST(request: NextRequest) {
-  try {
-    const { content, count = 4 } = await request.json();
-
-    if (!content || content.trim() === "") {
-      return NextResponse.json({ error: "文章内容不能为空" }, { status: 400 });
-    }
-
-    // 构建提示词，要求创作完整的漫画故事
-    const prompt = `
-你是一位专业的漫画脚本创作者。请根据以下内容，创作一个完整的漫画故事，分为${count}个场景。
-
-每个场景需要包含以下元素：
-1. 场景描述：包括地点、时间、环境等
-2. 角色描述：包括外貌、表情、动作、姿态等
-3. 对话内容：角色之间的对话或内心独白
-4. 情感氛围：该场景的主要情感基调
-
-请确保故事具有连贯性和完整的情节发展，包括开始、发展、高潮和结局。
-每个场景以"【场景1】"、"【场景2】"等格式开头，并用明显的分隔符分开。
-
-用户提供的内容或创意：
-${content}
-
-请基于以上内容进行创作，不要有任何与创作无关的解释性文字。直接输出创作内容。
-`;
-
-    // 调用DeepSeek API
-    const response = await fetch(DEEPSEEK_API_URL, {
-      method: "POST",
-      headers: {
-        Authorization: `Bearer ${DEEPSEEK_API_KEY}`,
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify({
-        model: "Qwen/QwQ-32B", // 使用清华的Qwen模型生成漫画故事
-        messages: [
-          {
-            role: "user",
-            content: prompt,
-          },
-        ],
-        temperature: 0.8, // 略微提高创意性
-        max_tokens: 2000, // 确保有足够的输出长度
-      }),
-    });
-
-    if (!response.ok) {
-      const errorData = await response.text();
-      console.error("DeepSeek API错误:", errorData);
-      return NextResponse.json(
-        { error: "生成漫画故事失败" },
-        { status: response.status }
-      );
-    }
-
-    const data = await response.json();
-    const storyContent = data.choices[0].message.content.trim();
-
-    // 解析故事内容，提取各个场景
-    const scenes = storyContent
-      .split(/【场景\d+】/g)
-      .filter(Boolean)
-      .map((scene: string) => scene.trim())
-      .slice(0, count);
-
-    // 为每个场景生成假的图片URL (实际项目中可以接入图像生成API)
-    const comicPanels = scenes.map((content: string, index: number) => ({
-      id: `panel-${index + 1}`,
-      content: content,
-      // 在实际项目中，这里应该调用图像生成API，目前用占位图
-      imageUrl: `https://placehold.co/600x400/pink/white?text=Comic+${
-        index + 1
-      }`,
-    }));
-
-    return NextResponse.json({ comicPanels });
-  } catch (error) {
-    console.error("API路由错误:", error);
-    return NextResponse.json({ error: "服务器内部错误" }, { status: 500 });
-  }
-}
diff --git a/.history/app/api/generate/route_20250801233240.ts b/.history/app/api/generate/route_20250801233240.ts
deleted file mode 100644
index 0d0a52b..0000000
--- a/.history/app/api/generate/route_20250801233240.ts
+++ /dev/null
@@ -1,116 +0,0 @@
-import { NextRequest, NextResponse } from "next/server";
-
-const DEEPSEEK_API_URL = "https://api.siliconflow.cn/v1/chat/completions";
-const DEEPSEEK_API_KEY = "sk-xgpdmqrgikwkbaacvxbvtkwhxnwjncdvqzlshnzcyswxhsfn"; // 在实际生产环境中应使用环境变量
-
-export async function POST(request: NextRequest) {
-  try {
-    const { content, count = 4, sceneNumber } = await request.json();
-
-    if (!content || content.trim() === "") {
-      return NextResponse.json({ error: "文章内容不能为空" }, { status: 400 });
-    }
-
-    // 构建提示词，要求创作完整的漫画故事或单个场景
-    let prompt = "";
-
-    if (sceneNumber) {
-      // 单个场景的提示词
-      prompt = `
-你是一位专业的漫画脚本创作者。请根据以下内容，创作漫画故事的第${sceneNumber}个场景。
-
-场景需要包含以下元素：
-1. 场景描述：包括地点、时间、环境等
-2. 角色描述：包括外貌、表情、动作、姿态等
-3. 对话内容：角色之间的对话或内心独白
-4. 情感氛围：该场景的主要情感基调
-
-用户提供的内容或创意：
-${content}
-
-请基于以上内容进行创作，不要有任何与创作无关的解释性文字。直接输出创作内容。
-`;
-    } else {
-      // 完整故事的提示词
-      prompt = `
-你是一位专业的漫画脚本创作者。请根据以下内容，创作一个完整的漫画故事，分为${count}个场景。
-
-每个场景需要包含以下元素：
-1. 场景描述：包括地点、时间、环境等
-2. 角色描述：包括外貌、表情、动作、姿态等
-3. 对话内容：角色之间的对话或内心独白
-4. 情感氛围：该场景的主要情感基调
-
-请确保故事具有连贯性和完整的情节发展，包括开始、发展、高潮和结局。
-每个场景以"【场景1】"、"【场景2】"等格式开头，并用明显的分隔符分开。
-
-用户提供的内容或创意：
-${content}
-
-请基于以上内容进行创作，不要有任何与创作无关的解释性文字。直接输出创作内容。
-`;
-    }
-
-    // 调用DeepSeek API
-    const response = await fetch(DEEPSEEK_API_URL, {
-      method: "POST",
-      headers: {
-        Authorization: `Bearer ${DEEPSEEK_API_KEY}`,
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify({
-        model: "Qwen/QwQ-32B", // 使用清华的Qwen模型生成漫画故事
-        messages: [
-          {
-            role: "user",
-            content: prompt,
-          },
-        ],
-        temperature: 0.8, // 略微提高创意性
-        max_tokens: 2000, // 确保有足够的输出长度
-      }),
-    });
-
-    if (!response.ok) {
-      const errorData = await response.text();
-      console.error("DeepSeek API错误:", errorData);
-      return NextResponse.json(
-        { error: "生成漫画故事失败" },
-        { status: response.status }
-      );
-    }
-
-    const data = await response.json();
-    const storyContent = data.choices[0].message.content.trim();
-
-    // 解析故事内容
-    let scenes: string[] = [];
-
-    if (sceneNumber) {
-      // 单场景刷新，直接使用返回内容
-      scenes = [storyContent];
-    } else {
-      // 多场景生成，解析各个场景
-      scenes = storyContent
-        .split(/【场景\d+】/g)
-        .filter(Boolean)
-        .map((scene: string) => scene.trim())
-        .slice(0, count);
-    }
-
-    // 为每个场景生成假的图片URL (实际项目中可以接入图像生成API)
-    const comicPanels = scenes.map((content: string, index: number) => ({
-      id: sceneNumber ? `panel-${sceneNumber}` : `panel-${index + 1}`,
-      content: content,
-      // 在实际项目中，这里应该调用图像生成API，目前用占位图
-      imageUrl: `https://placehold.co/600x400/pink/white?text=Comic+${
-        sceneNumber || index + 1
-      }`,
-    }));
-
-    return NextResponse.json({ comicPanels });
-  } catch (error) {
-    console.error("API路由错误:", error);
-    return NextResponse.json({ error: "服务器内部错误" }, { status: 500 });
-  }
-}
diff --git a/.history/app/api/generate/route_20250801233434.ts b/.history/app/api/generate/route_20250801233434.ts
deleted file mode 100644
index 263f98d..0000000
--- a/.history/app/api/generate/route_20250801233434.ts
+++ /dev/null
@@ -1,87 +0,0 @@
-import { NextRequest, NextResponse } from "next/server";
-
-const DEEPSEEK_API_URL = "https://api.siliconflow.cn/v1/chat/completions";
-const DEEPSEEK_API_KEY = "sk-xgpdmqrgikwkbaacvxbvtkwhxnwjncdvqzlshnzcyswxhsfn"; // 在实际生产环境中应使用环境变量
-
-export async function POST(request: NextRequest) {
-  try {
-    const { content, count = 4 } = await request.json();
-
-    if (!content || content.trim() === "") {
-      return NextResponse.json({ error: "文章内容不能为空" }, { status: 400 });
-    }
-
-    // 构建提示词，要求创作完整的漫画故事
-    const prompt = `
-你是一位专业的漫画脚本创作者。请根据以下内容，创作一个完整的漫画故事，分为${count}个场景。
-
-每个场景需要包含以下元素：
-1. 场景描述：包括地点、时间、环境等
-2. 角色描述：包括外貌、表情、动作、姿态等
-3. 对话内容：角色之间的对话或内心独白
-4. 情感氛围：该场景的主要情感基调
-
-请确保故事具有连贯性和完整的情节发展，包括开始、发展、高潮和结局。
-每个场景以"【场景1】"、"【场景2】"等格式开头，并用明显的分隔符分开。
-
-用户提供的内容或创意：
-${content}
-
-请基于以上内容进行创作，不要有任何与创作无关的解释性文字。直接输出创作内容。
-`;
-
-    // 调用DeepSeek API
-    const response = await fetch(DEEPSEEK_API_URL, {
-      method: "POST",
-      headers: {
-        Authorization: `Bearer ${DEEPSEEK_API_KEY}`,
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify({
-        model: "Qwen/QwQ-32B", // 使用清华的Qwen模型生成漫画故事
-        messages: [
-          {
-            role: "user",
-            content: prompt,
-          },
-        ],
-        temperature: 0.8, // 略微提高创意性
-        max_tokens: 2000, // 确保有足够的输出长度
-      }),
-    });
-
-    if (!response.ok) {
-      const errorData = await response.text();
-      console.error("DeepSeek API错误:", errorData);
-      return NextResponse.json(
-        { error: "生成漫画故事失败" },
-        { status: response.status }
-      );
-    }
-
-    const data = await response.json();
-    const storyContent = data.choices[0].message.content.trim();
-
-    // 解析故事内容，提取各个场景
-    const scenes = storyContent
-      .split(/【场景\d+】/g)
-      .filter(Boolean)
-      .map((scene: string) => scene.trim())
-      .slice(0, count);
-
-    // 为每个场景生成假的图片URL (实际项目中可以接入图像生成API)
-    const comicPanels = scenes.map((content: string, index: number) => ({
-      id: `panel-${index + 1}`,
-      content: content,
-      // 在实际项目中，这里应该调用图像生成API，目前用占位图
-      imageUrl: `https://placehold.co/600x400/pink/white?text=Comic+${
-        index + 1
-      }`,
-    }));
-
-    return NextResponse.json({ comicPanels });
-  } catch (error) {
-    console.error("API路由错误:", error);
-    return NextResponse.json({ error: "服务器内部错误" }, { status: 500 });
-  }
-}
diff --git a/.history/app/api/generate/route_20250802003341.ts b/.history/app/api/generate/route_20250802003341.ts
deleted file mode 100644
index f09ba2b..0000000
--- a/.history/app/api/generate/route_20250802003341.ts
+++ /dev/null
@@ -1,127 +0,0 @@
-import { NextResponse } from "next/server";
-import { ComicPanel } from "@/lib/types";
-
-// 支持的模型列表
-const SUPPORTED_MODELS = {
-  "qwen-32b": "Qwen/QwQ-32B",
-  "deepseek-7b": "deepseek-ai/deepseek-coder-7b-instruct", // 示例模型ID
-  "gpt-3.5": "gpt-3.5-turbo", // 示例模型ID
-};
-
-export async function POST(request: Request) {
-  try {
-    const {
-      content,
-      count,
-      sceneNumber,
-      model = "qwen-32b",
-    } = await request.json();
-
-    if (!content) {
-      return NextResponse.json({ error: "内容不能为空" }, { status: 400 });
-    }
-
-    // 验证模型是否支持
-    if (!SUPPORTED_MODELS[model]) {
-      return NextResponse.json({ error: "不支持的模型" }, { status: 400 });
-    }
-
-    // 模型ID
-    const modelId = SUPPORTED_MODELS[model];
-
-    // 构建提示词
-    let prompt;
-
-    // 如果指定了场景编号，则只生成该场景
-    if (typeof sceneNumber === "number") {
-      prompt = `请你根据以下内容生成一个漫画场景的描述，该场景是第${sceneNumber}个场景，生成的漫画描述应该简洁、具体且富有视觉感。
-      
-      内容: ${content}
-      
-      请直接给出第${sceneNumber}个场景的描述，不要有多余的解释。`;
-    } else {
-      // 否则生成多个场景
-      prompt = `请你根据以下内容生成${count}个漫画场景的描述，每个场景的描述应该简洁、具体且富有视觉感。
-      
-      内容: ${content}
-      
-      请直接给出${count}个场景的描述，每个场景单独一段，格式如下：
-      场景1：[场景1的描述]
-      场景2：[场景2的描述]
-      ...
-      
-      不要有多余的解释。`;
-    }
-
-    // 调用 DeepSeek API
-    const response = await fetch(
-      "https://api.deepseek.com/v1/chat/completions",
-      {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-          Authorization: `Bearer ${process.env.DEEPSEEK_API_KEY}`,
-        },
-        body: JSON.stringify({
-          model: modelId,
-          messages: [
-            {
-              role: "user",
-              content: prompt,
-            },
-          ],
-          temperature: 0.7,
-          max_tokens: 1000,
-        }),
-      }
-    );
-
-    if (!response.ok) {
-      const errorData = await response.json();
-      console.error("DeepSeek API错误:", errorData);
-      return NextResponse.json(
-        { error: "调用AI服务失败，请稍后再试" },
-        { status: 500 }
-      );
-    }
-
-    const responseData = await response.json();
-    const generatedText = responseData.choices[0].message.content;
-
-    console.log("生成的内容:", generatedText);
-
-    let comicPanels: ComicPanel[] = [];
-
-    // 处理单个场景刷新的情况
-    if (typeof sceneNumber === "number") {
-      comicPanels = [
-        {
-          id: `scene-${sceneNumber}`,
-          content: generatedText.trim(),
-          imageUrl: `https://placehold.co/600x400?text=场景${sceneNumber}`,
-          sceneNumber: sceneNumber,
-        },
-      ];
-    } else {
-      // 处理多个场景的情况
-      const scenes = generatedText
-        .split(/场景\d+[:：]/)
-        .filter((scene: string) => scene.trim().length > 0);
-
-      comicPanels = scenes.map((scene: string, index: number) => ({
-        id: `scene-${index + 1}`,
-        content: scene.trim(),
-        imageUrl: `https://placehold.co/600x400?text=场景${index + 1}`,
-        sceneNumber: index + 1,
-      }));
-    }
-
-    return NextResponse.json({ comicPanels });
-  } catch (error) {
-    console.error("生成漫画脚本错误:", error);
-    return NextResponse.json(
-      { error: "生成漫画脚本时发生错误" },
-      { status: 500 }
-    );
-  }
-}
diff --git a/.history/app/api/generate/route_20250802003415.ts b/.history/app/api/generate/route_20250802003415.ts
deleted file mode 100644
index 3a887a5..0000000
--- a/.history/app/api/generate/route_20250802003415.ts
+++ /dev/null
@@ -1,128 +0,0 @@
-import { NextResponse } from "next/server";
-import { ComicPanel } from "@/lib/types";
-
-// 支持的模型列表
-const SUPPORTED_MODELS: Record<string, string> = {
-  "qwen-32b": "Qwen/QwQ-32B",
-  "deepseek-7b": "deepseek-ai/deepseek-coder-7b-instruct", // 示例模型ID
-  "gpt-3.5": "gpt-3.5-turbo", // 示例模型ID
-};
-
-export async function POST(request: Request) {
-  try {
-    const {
-      content,
-      count,
-      sceneNumber,
-      model = "qwen-32b",
-    } = await request.json();
-
-    if (!content) {
-      return NextResponse.json({ error: "内容不能为空" }, { status: 400 });
-    }
-
-    // 验证模型是否支持
-    const modelKey = model as string;
-    if (!SUPPORTED_MODELS[modelKey]) {
-      return NextResponse.json({ error: "不支持的模型" }, { status: 400 });
-    }
-
-    // 模型ID
-    const modelId = SUPPORTED_MODELS[modelKey];
-
-    // 构建提示词
-    let prompt;
-
-    // 如果指定了场景编号，则只生成该场景
-    if (typeof sceneNumber === "number") {
-      prompt = `请你根据以下内容生成一个漫画场景的描述，该场景是第${sceneNumber}个场景，生成的漫画描述应该简洁、具体且富有视觉感。
-      
-      内容: ${content}
-      
-      请直接给出第${sceneNumber}个场景的描述，不要有多余的解释。`;
-    } else {
-      // 否则生成多个场景
-      prompt = `请你根据以下内容生成${count}个漫画场景的描述，每个场景的描述应该简洁、具体且富有视觉感。
-      
-      内容: ${content}
-      
-      请直接给出${count}个场景的描述，每个场景单独一段，格式如下：
-      场景1：[场景1的描述]
-      场景2：[场景2的描述]
-      ...
-      
-      不要有多余的解释。`;
-    }
-
-    // 调用 DeepSeek API
-    const response = await fetch(
-      "https://api.deepseek.com/v1/chat/completions",
-      {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-          Authorization: `Bearer ${process.env.DEEPSEEK_API_KEY}`,
-        },
-        body: JSON.stringify({
-          model: modelId,
-          messages: [
-            {
-              role: "user",
-              content: prompt,
-            },
-          ],
-          temperature: 0.7,
-          max_tokens: 1000,
-        }),
-      }
-    );
-
-    if (!response.ok) {
-      const errorData = await response.json();
-      console.error("DeepSeek API错误:", errorData);
-      return NextResponse.json(
-        { error: "调用AI服务失败，请稍后再试" },
-        { status: 500 }
-      );
-    }
-
-    const responseData = await response.json();
-    const generatedText = responseData.choices[0].message.content;
-
-    console.log("生成的内容:", generatedText);
-
-    let comicPanels: ComicPanel[] = [];
-
-    // 处理单个场景刷新的情况
-    if (typeof sceneNumber === "number") {
-      comicPanels = [
-        {
-          id: `scene-${sceneNumber}`,
-          content: generatedText.trim(),
-          imageUrl: `https://placehold.co/600x400?text=场景${sceneNumber}`,
-          sceneNumber: sceneNumber,
-        },
-      ];
-    } else {
-      // 处理多个场景的情况
-      const scenes = generatedText
-        .split(/场景\d+[:：]/)
-        .filter((scene: string) => scene.trim().length > 0);
-
-      comicPanels = scenes.map((scene: string, index: number) => ({
-        id: `scene-${index + 1}`,
-        content: scene.trim(),
-        imageUrl: `https://placehold.co/600x400?text=场景${index + 1}`,
-        sceneNumber: index + 1,
-      }));
-    }
-
-    return NextResponse.json({ comicPanels });
-  } catch (error) {
-    console.error("生成漫画脚本错误:", error);
-    return NextResponse.json(
-      { error: "生成漫画脚本时发生错误" },
-      { status: 500 }
-    );
-  }
-}
diff --git a/.history/app/api/generate/route_20250802004958.ts b/.history/app/api/generate/route_20250802004958.ts
deleted file mode 100644
index 3a887a5..0000000
--- a/.history/app/api/generate/route_20250802004958.ts
+++ /dev/null
@@ -1,128 +0,0 @@
-import { NextResponse } from "next/server";
-import { ComicPanel } from "@/lib/types";
-
-// 支持的模型列表
-const SUPPORTED_MODELS: Record<string, string> = {
-  "qwen-32b": "Qwen/QwQ-32B",
-  "deepseek-7b": "deepseek-ai/deepseek-coder-7b-instruct", // 示例模型ID
-  "gpt-3.5": "gpt-3.5-turbo", // 示例模型ID
-};
-
-export async function POST(request: Request) {
-  try {
-    const {
-      content,
-      count,
-      sceneNumber,
-      model = "qwen-32b",
-    } = await request.json();
-
-    if (!content) {
-      return NextResponse.json({ error: "内容不能为空" }, { status: 400 });
-    }
-
-    // 验证模型是否支持
-    const modelKey = model as string;
-    if (!SUPPORTED_MODELS[modelKey]) {
-      return NextResponse.json({ error: "不支持的模型" }, { status: 400 });
-    }
-
-    // 模型ID
-    const modelId = SUPPORTED_MODELS[modelKey];
-
-    // 构建提示词
-    let prompt;
-
-    // 如果指定了场景编号，则只生成该场景
-    if (typeof sceneNumber === "number") {
-      prompt = `请你根据以下内容生成一个漫画场景的描述，该场景是第${sceneNumber}个场景，生成的漫画描述应该简洁、具体且富有视觉感。
-      
-      内容: ${content}
-      
-      请直接给出第${sceneNumber}个场景的描述，不要有多余的解释。`;
-    } else {
-      // 否则生成多个场景
-      prompt = `请你根据以下内容生成${count}个漫画场景的描述，每个场景的描述应该简洁、具体且富有视觉感。
-      
-      内容: ${content}
-      
-      请直接给出${count}个场景的描述，每个场景单独一段，格式如下：
-      场景1：[场景1的描述]
-      场景2：[场景2的描述]
-      ...
-      
-      不要有多余的解释。`;
-    }
-
-    // 调用 DeepSeek API
-    const response = await fetch(
-      "https://api.deepseek.com/v1/chat/completions",
-      {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-          Authorization: `Bearer ${process.env.DEEPSEEK_API_KEY}`,
-        },
-        body: JSON.stringify({
-          model: modelId,
-          messages: [
-            {
-              role: "user",
-              content: prompt,
-            },
-          ],
-          temperature: 0.7,
-          max_tokens: 1000,
-        }),
-      }
-    );
-
-    if (!response.ok) {
-      const errorData = await response.json();
-      console.error("DeepSeek API错误:", errorData);
-      return NextResponse.json(
-        { error: "调用AI服务失败，请稍后再试" },
-        { status: 500 }
-      );
-    }
-
-    const responseData = await response.json();
-    const generatedText = responseData.choices[0].message.content;
-
-    console.log("生成的内容:", generatedText);
-
-    let comicPanels: ComicPanel[] = [];
-
-    // 处理单个场景刷新的情况
-    if (typeof sceneNumber === "number") {
-      comicPanels = [
-        {
-          id: `scene-${sceneNumber}`,
-          content: generatedText.trim(),
-          imageUrl: `https://placehold.co/600x400?text=场景${sceneNumber}`,
-          sceneNumber: sceneNumber,
-        },
-      ];
-    } else {
-      // 处理多个场景的情况
-      const scenes = generatedText
-        .split(/场景\d+[:：]/)
-        .filter((scene: string) => scene.trim().length > 0);
-
-      comicPanels = scenes.map((scene: string, index: number) => ({
-        id: `scene-${index + 1}`,
-        content: scene.trim(),
-        imageUrl: `https://placehold.co/600x400?text=场景${index + 1}`,
-        sceneNumber: index + 1,
-      }));
-    }
-
-    return NextResponse.json({ comicPanels });
-  } catch (error) {
-    console.error("生成漫画脚本错误:", error);
-    return NextResponse.json(
-      { error: "生成漫画脚本时发生错误" },
-      { status: 500 }
-    );
-  }
-}
diff --git a/.history/app/api/generate/route_20250802204037.ts b/.history/app/api/generate/route_20250802204037.ts
deleted file mode 100644
index 99a1af0..0000000
--- a/.history/app/api/generate/route_20250802204037.ts
+++ /dev/null
@@ -1,138 +0,0 @@
-import { NextResponse } from "next/server";
-import { ComicPanel } from "@/lib/types";
-
-// DeepSeek API配置
-const DEEPSEEK_API_URL = "https://api.deepseek.com/v1/chat/completions";
-const DEEPSEEK_API_KEY = "sk-xgpdmqrgikwkbaacvxbvtkwhxnwjncdvqzlshnzcyswxhsfn"; // 用户提供的API密钥
-
-// 支持的模型列表
-const SUPPORTED_MODELS: Record<string, string> = {
-  "qwen-32b": "Qwen/QwQ-32B",
-  "deepseek-7b": "deepseek-ai/deepseek-coder-7b-instruct", // 示例模型ID
-  "gpt-3.5": "gpt-3.5-turbo", // 示例模型ID
-};
-
-export async function POST(request: Request) {
-  try {
-    const {
-      content,
-      count,
-      sceneNumber,
-      model = "qwen-32b",
-    } = await request.json();
-
-    if (!content) {
-      return NextResponse.json({ error: "内容不能为空" }, { status: 400 });
-    }
-
-    // 验证模型是否支持
-    const modelKey = model as string;
-    if (!SUPPORTED_MODELS[modelKey]) {
-      return NextResponse.json({ error: "不支持的模型" }, { status: 400 });
-    }
-
-    // 模型ID
-    const modelId = SUPPORTED_MODELS[modelKey];
-
-    // 构建提示词
-    let prompt;
-
-    // 如果指定了场景编号，则只生成该场景
-    if (typeof sceneNumber === "number") {
-      prompt = `请你根据以下内容生成一个漫画场景的描述，该场景是第${sceneNumber}个场景，生成的漫画描述应该简洁、具体且富有视觉感。
-      
-      内容: ${content}
-      
-      请直接给出第${sceneNumber}个场景的描述，不要有多余的解释。`;
-    } else {
-      // 否则生成多个场景
-      prompt = `请你根据以下内容生成${count}个漫画场景的描述，每个场景的描述应该简洁、具体且富有视觉感。
-      
-      内容: ${content}
-      
-      请直接给出${count}个场景的描述，每个场景单独一段，格式如下：
-      场景1：[场景1的描述]
-      场景2：[场景2的描述]
-      ...
-      
-      不要有多余的解释。`;
-    }
-
-    // 调用 DeepSeek API
-    const response = await fetch(DEEPSEEK_API_URL, {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-        Authorization: `Bearer ${DEEPSEEK_API_KEY}`,
-      },
-      body: JSON.stringify({
-        model: modelId,
-        messages: [
-          {
-            role: "user",
-            content: prompt,
-          },
-        ],
-        temperature: 0.7,
-        max_tokens: 1000,
-      }),
-    });
-
-    // 检查API响应状态
-    if (!response.ok) {
-      const errorData = await response.json();
-      console.error("DeepSeek API错误:", errorData);
-
-      // 提供更具体的错误信息
-      let errorMessage = "调用AI服务失败，请稍后再试";
-      if (errorData.error && errorData.error.message) {
-        if (errorData.error.type === "authentication_error") {
-          errorMessage = "API密钥验证失败，请联系管理员更新API密钥";
-        } else {
-          errorMessage = `AI服务错误: ${errorData.error.message}`;
-        }
-      }
-
-      return NextResponse.json({ error: errorMessage }, { status: 500 });
-    }
-
-    const responseData = await response.json();
-    const generatedText = responseData.choices[0].message.content;
-
-    console.log("生成的内容:", generatedText);
-
-    let comicPanels: ComicPanel[] = [];
-
-    // 处理单个场景刷新的情况
-    if (typeof sceneNumber === "number") {
-      comicPanels = [
-        {
-          id: `scene-${sceneNumber}`,
-          content: generatedText.trim(),
-          imageUrl: `https://placehold.co/600x400?text=场景${sceneNumber}`,
-          sceneNumber: sceneNumber,
-        },
-      ];
-    } else {
-      // 处理多个场景的情况
-      const scenes = generatedText
-        .split(/场景\d+[:：]/)
-        .filter((scene: string) => scene.trim().length > 0);
-
-      comicPanels = scenes.map((scene: string, index: number) => ({
-        id: `scene-${index + 1}`,
-        content: scene.trim(),
-        imageUrl: `https://placehold.co/600x400?text=场景${index + 1}`,
-        sceneNumber: index + 1,
-      }));
-    }
-
-    return NextResponse.json({ comicPanels });
-  } catch (error) {
-    console.error("生成漫画脚本错误:", error);
-    return NextResponse.json(
-      { error: "生成漫画脚本时发生错误" },
-      { status: 500 }
-    );
-  }
-}
diff --git a/.history/app/api/generate/route_20250802204640.ts b/.history/app/api/generate/route_20250802204640.ts
deleted file mode 100644
index 2973f96..0000000
--- a/.history/app/api/generate/route_20250802204640.ts
+++ /dev/null
@@ -1,138 +0,0 @@
-import { NextResponse } from "next/server";
-import { ComicPanel } from "@/lib/types";
-
-// DeepSeek API配置
-const DEEPSEEK_API_URL = "https://api.siliconflow.cn/v1/chat/completions"; // 修正为正确的API端点
-const DEEPSEEK_API_KEY = "sk-xgpdmqrgikwkbaacvxbvtkwhxnwjncdvqzlshnzcyswxhsfn"; // 用户提供的API密钥
-
-// 支持的模型列表
-const SUPPORTED_MODELS: Record<string, string> = {
-  "qwen-32b": "Qwen/QwQ-32B",
-  "deepseek-7b": "deepseek-ai/deepseek-coder-7b-instruct", // 示例模型ID
-  "gpt-3.5": "gpt-3.5-turbo", // 示例模型ID
-};
-
-export async function POST(request: Request) {
-  try {
-    const {
-      content,
-      count,
-      sceneNumber,
-      model = "qwen-32b",
-    } = await request.json();
-
-    if (!content) {
-      return NextResponse.json({ error: "内容不能为空" }, { status: 400 });
-    }
-
-    // 验证模型是否支持
-    const modelKey = model as string;
-    if (!SUPPORTED_MODELS[modelKey]) {
-      return NextResponse.json({ error: "不支持的模型" }, { status: 400 });
-    }
-
-    // 模型ID
-    const modelId = SUPPORTED_MODELS[modelKey];
-
-    // 构建提示词
-    let prompt;
-
-    // 如果指定了场景编号，则只生成该场景
-    if (typeof sceneNumber === "number") {
-      prompt = `请你根据以下内容生成一个漫画场景的描述，该场景是第${sceneNumber}个场景，生成的漫画描述应该简洁、具体且富有视觉感。
-      
-      内容: ${content}
-      
-      请直接给出第${sceneNumber}个场景的描述，不要有多余的解释。`;
-    } else {
-      // 否则生成多个场景
-      prompt = `请你根据以下内容生成${count}个漫画场景的描述，每个场景的描述应该简洁、具体且富有视觉感。
-      
-      内容: ${content}
-      
-      请直接给出${count}个场景的描述，每个场景单独一段，格式如下：
-      场景1：[场景1的描述]
-      场景2：[场景2的描述]
-      ...
-      
-      不要有多余的解释。`;
-    }
-
-    // 调用 DeepSeek API
-    const response = await fetch(DEEPSEEK_API_URL, {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-        Authorization: `Bearer ${DEEPSEEK_API_KEY}`,
-      },
-      body: JSON.stringify({
-        model: modelId,
-        messages: [
-          {
-            role: "user",
-            content: prompt,
-          },
-        ],
-        temperature: 0.7,
-        max_tokens: 1000,
-      }),
-    });
-
-    // 检查API响应状态
-    if (!response.ok) {
-      const errorData = await response.json();
-      console.error("DeepSeek API错误:", errorData);
-
-      // 提供更具体的错误信息
-      let errorMessage = "调用AI服务失败，请稍后再试";
-      if (errorData.error && errorData.error.message) {
-        if (errorData.error.type === "authentication_error") {
-          errorMessage = "API密钥验证失败，请联系管理员更新API密钥";
-        } else {
-          errorMessage = `AI服务错误: ${errorData.error.message}`;
-        }
-      }
-
-      return NextResponse.json({ error: errorMessage }, { status: 500 });
-    }
-
-    const responseData = await response.json();
-    const generatedText = responseData.choices[0].message.content;
-
-    console.log("生成的内容:", generatedText);
-
-    let comicPanels: ComicPanel[] = [];
-
-    // 处理单个场景刷新的情况
-    if (typeof sceneNumber === "number") {
-      comicPanels = [
-        {
-          id: `scene-${sceneNumber}`,
-          content: generatedText.trim(),
-          imageUrl: `https://placehold.co/600x400?text=场景${sceneNumber}`,
-          sceneNumber: sceneNumber,
-        },
-      ];
-    } else {
-      // 处理多个场景的情况
-      const scenes = generatedText
-        .split(/场景\d+[:：]/)
-        .filter((scene: string) => scene.trim().length > 0);
-
-      comicPanels = scenes.map((scene: string, index: number) => ({
-        id: `scene-${index + 1}`,
-        content: scene.trim(),
-        imageUrl: `https://placehold.co/600x400?text=场景${index + 1}`,
-        sceneNumber: index + 1,
-      }));
-    }
-
-    return NextResponse.json({ comicPanels });
-  } catch (error) {
-    console.error("生成漫画脚本错误:", error);
-    return NextResponse.json(
-      { error: "生成漫画脚本时发生错误" },
-      { status: 500 }
-    );
-  }
-}
diff --git a/.history/app/api/generate/route_20250803171851.ts b/.history/app/api/generate/route_20250803171851.ts
deleted file mode 100644
index 004e540..0000000
--- a/.history/app/api/generate/route_20250803171851.ts
+++ /dev/null
@@ -1,141 +0,0 @@
-import { NextResponse } from "next/server";
-import { ComicPanel } from "@/lib/types";
-
-// DeepSeek API配置
-const DEEPSEEK_API_URL = "https://api.siliconflow.cn/v1/chat/completions";
-// 优先使用环境变量中的API密钥，如果不存在则使用硬编码的密钥
-const DEEPSEEK_API_KEY =
-  process.env.DEEPSEEK_API_KEY ||
-  "sk-xgpdmqrgikwkbaacvxbvtkwhxnwjncdvqzlshnzcyswxhsfn";
-
-// 支持的模型列表
-const SUPPORTED_MODELS: Record<string, string> = {
-  "qwen-32b": "Qwen/QwQ-32B",
-  "deepseek-7b": "deepseek-ai/deepseek-coder-7b-instruct", // 示例模型ID
-  "gpt-3.5": "gpt-3.5-turbo", // 示例模型ID
-};
-
-export async function POST(request: Request) {
-  try {
-    const {
-      content,
-      count,
-      sceneNumber,
-      model = "qwen-32b",
-    } = await request.json();
-
-    if (!content) {
-      return NextResponse.json({ error: "内容不能为空" }, { status: 400 });
-    }
-
-    // 验证模型是否支持
-    const modelKey = model as string;
-    if (!SUPPORTED_MODELS[modelKey]) {
-      return NextResponse.json({ error: "不支持的模型" }, { status: 400 });
-    }
-
-    // 模型ID
-    const modelId = SUPPORTED_MODELS[modelKey];
-
-    // 构建提示词
-    let prompt;
-
-    // 如果指定了场景编号，则只生成该场景
-    if (typeof sceneNumber === "number") {
-      prompt = `请你根据以下内容生成一个漫画场景的描述，该场景是第${sceneNumber}个场景，生成的漫画描述应该简洁、具体且富有视觉感。
-      
-      内容: ${content}
-      
-      请直接给出第${sceneNumber}个场景的描述，不要有多余的解释。`;
-    } else {
-      // 否则生成多个场景
-      prompt = `请你根据以下内容生成${count}个漫画场景的描述，每个场景的描述应该简洁、具体且富有视觉感。
-      
-      内容: ${content}
-      
-      请直接给出${count}个场景的描述，每个场景单独一段，格式如下：
-      场景1：[场景1的描述]
-      场景2：[场景2的描述]
-      ...
-      
-      不要有多余的解释。`;
-    }
-
-    // 调用 DeepSeek API
-    const response = await fetch(DEEPSEEK_API_URL, {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-        Authorization: `Bearer ${DEEPSEEK_API_KEY}`,
-      },
-      body: JSON.stringify({
-        model: modelId,
-        messages: [
-          {
-            role: "user",
-            content: prompt,
-          },
-        ],
-        temperature: 0.7,
-        max_tokens: 1000,
-      }),
-    });
-
-    // 检查API响应状态
-    if (!response.ok) {
-      const errorData = await response.json();
-      console.error("DeepSeek API错误:", errorData);
-
-      // 提供更具体的错误信息
-      let errorMessage = "调用AI服务失败，请稍后再试";
-      if (errorData.error && errorData.error.message) {
-        if (errorData.error.type === "authentication_error") {
-          errorMessage = "API密钥验证失败，请联系管理员更新API密钥";
-        } else {
-          errorMessage = `AI服务错误: ${errorData.error.message}`;
-        }
-      }
-
-      return NextResponse.json({ error: errorMessage }, { status: 500 });
-    }
-
-    const responseData = await response.json();
-    const generatedText = responseData.choices[0].message.content;
-
-    console.log("生成的内容:", generatedText);
-
-    let comicPanels: ComicPanel[] = [];
-
-    // 处理单个场景刷新的情况
-    if (typeof sceneNumber === "number") {
-      comicPanels = [
-        {
-          id: `scene-${sceneNumber}`,
-          content: generatedText.trim(),
-          imageUrl: `https://placehold.co/600x400?text=场景${sceneNumber}`,
-          sceneNumber: sceneNumber,
-        },
-      ];
-    } else {
-      // 处理多个场景的情况
-      const scenes = generatedText
-        .split(/场景\d+[:：]/)
-        .filter((scene: string) => scene.trim().length > 0);
-
-      comicPanels = scenes.map((scene: string, index: number) => ({
-        id: `scene-${index + 1}`,
-        content: scene.trim(),
-        imageUrl: `https://placehold.co/600x400?text=场景${index + 1}`,
-        sceneNumber: index + 1,
-      }));
-    }
-
-    return NextResponse.json({ comicPanels });
-  } catch (error) {
-    console.error("生成漫画脚本错误:", error);
-    return NextResponse.json(
-      { error: "生成漫画脚本时发生错误" },
-      { status: 500 }
-    );
-  }
-}
diff --git a/.history/app/page_20250727100327.tsx b/.history/app/page_20250727100327.tsx
deleted file mode 100644
index 6a5d6bf..0000000
--- a/.history/app/page_20250727100327.tsx
+++ /dev/null
@@ -1,243 +0,0 @@
-"use client"
-
-import { useState } from "react"
-import { Card, CardContent } from "@/components/ui/card"
-import { Button } from "@/components/ui/button"
-import { Textarea } from "@/components/ui/textarea"
-import { Badge } from "@/components/ui/badge"
-import { Sparkles, ImageIcon, Download, Eye, Heart, MessageCircle, Share } from "lucide-react"
-
-export default function ComicGenerator() {
-  const [content, setContent] = useState("")
-  const [selectedCount, setSelectedCount] = useState(4)
-  const [isGenerating, setIsGenerating] = useState(false)
-  const [showResults, setShowResults] = useState(false)
-  const maxLength = 2000
-
-  const sampleArticle = `春天来了，小明走在回家的路上。突然，他发现路边有一只受伤的小猫。小明毫不犹豫地将小猫抱起，送到了附近的宠物医院。医生说小猫只是轻微擦伤，很快就能康复。从那天起，小明每天都会去医院看望小猫，直到它完全康复。`
-
-  const handleGenerate = async () => {
-    if (!content.trim()) return
-
-    setIsGenerating(true)
-    // 模拟生成过程
-    setTimeout(() => {
-      setIsGenerating(false)
-      setShowResults(true)
-    }, 3000)
-  }
-
-  const fillSample = () => {
-    setContent(sampleArticle)
-  }
-
-  const getGridLayout = (count: number) => {
-    switch (count) {
-      case 2:
-        return "grid-cols-1 md:grid-cols-2"
-      case 4:
-        return "grid-cols-2"
-      case 6:
-        return "grid-cols-2 md:grid-cols-3"
-      case 8:
-        return "grid-cols-2 md:grid-cols-4"
-      default:
-        return "grid-cols-2"
-    }
-  }
-
-  return (
-    <div className="min-h-screen bg-gradient-to-br from-pink-50 to-orange-50">
-      {/* Header */}
-      <div className="bg-white/80 backdrop-blur-md border-b border-pink-100 sticky top-0 z-10">
-        <div className="max-w-4xl mx-auto px-4 py-4 flex items-center justify-between">
-          <div className="flex items-center gap-2">
-            <div className="w-8 h-8 bg-gradient-to-r from-pink-500 to-orange-500 rounded-lg flex items-center justify-center">
-              <Sparkles className="w-5 h-5 text-white" />
-            </div>
-            <span className="font-bold text-gray-800">漫画生成器</span>
-          </div>
-          <div className="flex items-center gap-4">
-            <Badge variant="secondary" className="bg-pink-100 text-pink-700">
-              Beta
-            </Badge>
-          </div>
-        </div>
-      </div>
-
-      <div className="max-w-4xl mx-auto px-4 py-8">
-        {/* Hero Section */}
-        <div className="text-center mb-12">
-          <h1 className="text-4xl font-bold bg-gradient-to-r from-pink-600 to-orange-600 bg-clip-text text-transparent mb-4">
-            文章转漫画生成器
-          </h1>
-          <p className="text-gray-600 text-lg mb-8">将你的文字变成精彩的漫画故事 ✨</p>
-        </div>
-
-        {/* Input Section */}
-        <Card className="mb-8 border-0 shadow-lg shadow-pink-100/50 bg-white/70 backdrop-blur-sm">
-          <CardContent className="p-6">
-            <div className="space-y-4">
-              <div className="flex items-center justify-between">
-                <label className="text-sm font-medium text-gray-700">输入你的文章内容</label>
-                <span className={`text-sm ${content.length > maxLength ? "text-red-500" : "text-gray-500"}`}>
-                  还可以输入 {maxLength - content.length} 字
-                </span>
-              </div>
-
-              <Textarea
-                value={content}
-                onChange={(e) => setContent(e.target.value)}
-                placeholder="在这里输入你的文章内容，我们会将其转化为精美的漫画..."
-                className="min-h-[120px] resize-none border-pink-200 focus:border-pink-400 focus:ring-pink-400/20"
-                maxLength={maxLength}
-              />
-
-              <div className="flex justify-start">
-                <Button
-                  variant="outline"
-                  size="sm"
-                  onClick={fillSample}
-                  className="border-pink-200 text-pink-600 hover:bg-pink-50 bg-transparent"
-                >
-                  试试示例文章
-                </Button>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-
-        {/* Configuration Section */}
-        <Card className="mb-8 border-0 shadow-lg shadow-pink-100/50 bg-white/70 backdrop-blur-sm">
-          <CardContent className="p-6">
-            <div className="space-y-4">
-              <label className="text-sm font-medium text-gray-700">选择生成数量</label>
-
-              <div className="flex gap-3">
-                {[2, 4, 6, 8].map((count) => (
-                  <Button
-                    key={count}
-                    variant={selectedCount === count ? "default" : "outline"}
-                    size="sm"
-                    onClick={() => setSelectedCount(count)}
-                    className={`rounded-full px-6 ${
-                      selectedCount === count
-                        ? "bg-gradient-to-r from-pink-500 to-orange-500 hover:from-pink-600 hover:to-orange-600"
-                        : "border-pink-200 text-pink-600 hover:bg-pink-50"
-                    }`}
-                  >
-                    {count}张
-                  </Button>
-                ))}
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-
-        {/* Generate Button */}
-        <div className="text-center mb-8">
-          <Button
-            onClick={handleGenerate}
-            disabled={!content.trim() || isGenerating}
-            size="lg"
-            className="px-12 py-3 text-lg font-medium rounded-full bg-gradient-to-r from-pink-500 to-orange-500 hover:from-pink-600 hover:to-orange-600 disabled:from-gray-300 disabled:to-gray-300 shadow-lg shadow-pink-200"
-          >
-            {isGenerating ? (
-              <>
-                <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-white mr-2" />
-                生成中...
-              </>
-            ) : (
-              <>
-                <ImageIcon className="w-5 h-5 mr-2" />
-                生成漫画
-              </>
-            )}
-          </Button>
-        </div>
-
-        {/* Loading State */}
-        {isGenerating && (
-          <Card className="mb-8 border-0 shadow-lg shadow-pink-100/50 bg-white/70 backdrop-blur-sm">
-            <CardContent className="p-8 text-center">
-              <div className="space-y-4">
-                <div className="animate-pulse">
-                  <div className="w-16 h-16 bg-gradient-to-r from-pink-500 to-orange-500 rounded-full mx-auto mb-4 flex items-center justify-center">
-                    <Sparkles className="w-8 h-8 text-white animate-spin" />
-                  </div>
-                </div>
-                <p className="text-gray-600">正在分析文章内容...</p>
-                <p className="text-sm text-gray-500">预计需要30秒</p>
-              </div>
-            </CardContent>
-          </Card>
-        )}
-
-        {/* Results Section */}
-        {showResults && (
-          <Card className="border-0 shadow-lg shadow-pink-100/50 bg-white/70 backdrop-blur-sm">
-            <CardContent className="p-6">
-              <div className="mb-6">
-                <h3 className="text-xl font-semibold text-gray-800 mb-2">生成结果</h3>
-                <p className="text-gray-600 text-sm">点击图片可查看大图，右键保存图片</p>
-              </div>
-
-              <div className={`grid ${getGridLayout(selectedCount)} gap-4`}>
-                {Array.from({ length: selectedCount }, (_, i) => (
-                  <div key={i} className="group relative aspect-square">
-                    <div className="w-full h-full bg-gradient-to-br from-pink-100 to-orange-100 rounded-2xl flex items-center justify-center cursor-pointer transition-transform hover:scale-105">
-                      <div className="text-center">
-                        <ImageIcon className="w-12 h-12 text-pink-300 mx-auto mb-2" />
-                        <p className="text-sm text-pink-400">漫画 {i + 1}</p>
-                      </div>
-                    </div>
-
-                    {/* Overlay on hover */}
-                    <div className="absolute inset-0 bg-black/0 group-hover:bg-black/20 rounded-2xl transition-all duration-200 flex items-center justify-center opacity-0 group-hover:opacity-100">
-                      <div className="flex gap-2">
-                        <Button size="sm" variant="secondary" className="rounded-full">
-                          <Eye className="w-4 h-4" />
-                        </Button>
-                        <Button size="sm" variant="secondary" className="rounded-full">
-                          <Download className="w-4 h-4" />
-                        </Button>
-                      </div>
-                    </div>
-                  </div>
-                ))}
-              </div>
-
-              {/* Social Actions */}
-              <div className="mt-8 pt-6 border-t border-pink-100">
-                <div className="flex items-center justify-between">
-                  <div className="flex items-center gap-4">
-                    <Button variant="ghost" size="sm" className="text-gray-600 hover:text-pink-600">
-                      <Heart className="w-4 h-4 mr-1" />
-                      喜欢
-                    </Button>
-                    <Button variant="ghost" size="sm" className="text-gray-600 hover:text-pink-600">
-                      <MessageCircle className="w-4 h-4 mr-1" />
-                      评论
-                    </Button>
-                    <Button variant="ghost" size="sm" className="text-gray-600 hover:text-pink-600">
-                      <Share className="w-4 h-4 mr-1" />
-                      分享
-                    </Button>
-                  </div>
-                  <Badge variant="secondary" className="bg-green-100 text-green-700">
-                    生成成功
-                  </Badge>
-                </div>
-              </div>
-            </CardContent>
-          </Card>
-        )}
-      </div>
-
-      {/* Footer */}
-      <div className="text-center py-8 text-gray-500 text-sm">
-        <p>让每个人都能轻松将文字转化为视觉故事 💫</p>
-      </div>
-    </div>
-  )
-}
diff --git a/.history/app/page_20250801230356.tsx b/.history/app/page_20250801230356.tsx
deleted file mode 100644
index 6e9e62d..0000000
--- a/.history/app/page_20250801230356.tsx
+++ /dev/null
@@ -1,339 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { Card, CardContent } from "@/components/ui/card";
-import { Button } from "@/components/ui/button";
-import { Textarea } from "@/components/ui/textarea";
-import { Badge } from "@/components/ui/badge";
-import {
-  Sparkles,
-  ImageIcon,
-  Download,
-  Eye,
-  Heart,
-  MessageCircle,
-  Share,
-} from "lucide-react";
-import { ComicPanel } from "@/lib/types";
-
-export default function ComicGenerator() {
-  const [content, setContent] = useState("");
-  const [selectedCount, setSelectedCount] = useState(4);
-  const [isGenerating, setIsGenerating] = useState(false);
-  const [comicPanels, setComicPanels] = useState<ComicPanel[]>([]);
-  const [error, setError] = useState<string | null>(null);
-  const maxLength = 2000;
-
-  const sampleArticle = `春天来了，小明走在回家的路上。突然，他发现路边有一只受伤的小猫。小明毫不犹豫地将小猫抱起，送到了附近的宠物医院。医生说小猫只是轻微擦伤，很快就能康复。从那天起，小明每天都会去医院看望小猫，直到它完全康复。`;
-
-  const handleGenerate = async () => {
-    if (!content.trim()) return;
-
-    setIsGenerating(true);
-    setError(null);
-
-    try {
-      const response = await fetch("/api/generate", {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({
-          content,
-          count: selectedCount,
-        }),
-      });
-
-      const data = await response.json();
-
-      if (!response.ok) {
-        throw new Error(data.error || "生成漫画失败，请稍后再试");
-      }
-
-      setComicPanels(data.comicPanels);
-    } catch (err) {
-      setError(err instanceof Error ? err.message : "生成漫画时发生未知错误");
-      console.error("生成漫画错误:", err);
-    } finally {
-      setIsGenerating(false);
-    }
-  };
-
-  const fillSample = () => {
-    setContent(sampleArticle);
-  };
-
-  const getGridLayout = (count: number) => {
-    switch (count) {
-      case 2:
-        return "grid-cols-1 md:grid-cols-2";
-      case 4:
-        return "grid-cols-2";
-      case 6:
-        return "grid-cols-2 md:grid-cols-3";
-      case 8:
-        return "grid-cols-2 md:grid-cols-4";
-      default:
-        return "grid-cols-2";
-    }
-  };
-
-  return (
-    <div className="min-h-screen bg-gradient-to-br from-pink-50 to-orange-50">
-      {/* Header */}
-      <div className="bg-white/80 backdrop-blur-md border-b border-pink-100 sticky top-0 z-10">
-        <div className="max-w-4xl mx-auto px-4 py-4 flex items-center justify-between">
-          <div className="flex items-center gap-2">
-            <div className="w-8 h-8 bg-gradient-to-r from-pink-500 to-orange-500 rounded-lg flex items-center justify-center">
-              <Sparkles className="w-5 h-5 text-white" />
-            </div>
-            <span className="font-bold text-gray-800">漫画生成器</span>
-          </div>
-          <div className="flex items-center gap-4">
-            <Badge variant="secondary" className="bg-pink-100 text-pink-700">
-              Beta
-            </Badge>
-          </div>
-        </div>
-      </div>
-
-      <div className="max-w-4xl mx-auto px-4 py-8">
-        {/* Hero Section */}
-        <div className="text-center mb-12">
-          <h1 className="text-4xl font-bold bg-gradient-to-r from-pink-600 to-orange-600 bg-clip-text text-transparent mb-4">
-            文章转漫画生成器
-          </h1>
-          <p className="text-gray-600 text-lg mb-8">
-            将你的文字变成精彩的漫画故事 ✨
-          </p>
-        </div>
-
-        {/* Input Section */}
-        <Card className="mb-8 border-0 shadow-lg shadow-pink-100/50 bg-white/70 backdrop-blur-sm">
-          <CardContent className="p-6">
-            <div className="space-y-4">
-              <div className="flex items-center justify-between">
-                <label className="text-sm font-medium text-gray-700">
-                  输入你的文章内容
-                </label>
-                <span
-                  className={`text-sm ${
-                    content.length > maxLength
-                      ? "text-red-500"
-                      : "text-gray-500"
-                  }`}
-                >
-                  还可以输入 {maxLength - content.length} 字
-                </span>
-              </div>
-
-              <Textarea
-                value={content}
-                onChange={(e) => setContent(e.target.value)}
-                placeholder="在这里输入你的文章内容，我们会将其转化为精美的漫画..."
-                className="min-h-[120px] resize-none border-pink-200 focus:border-pink-400 focus:ring-pink-400/20"
-                maxLength={maxLength}
-              />
-
-              <div className="flex justify-start">
-                <Button
-                  variant="outline"
-                  size="sm"
-                  onClick={fillSample}
-                  className="border-pink-200 text-pink-600 hover:bg-pink-50 bg-transparent"
-                >
-                  试试示例文章
-                </Button>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-
-        {/* Configuration Section */}
-        <Card className="mb-8 border-0 shadow-lg shadow-pink-100/50 bg-white/70 backdrop-blur-sm">
-          <CardContent className="p-6">
-            <div className="space-y-4">
-              <label className="text-sm font-medium text-gray-700">
-                选择生成数量
-              </label>
-
-              <div className="flex gap-3">
-                {[2, 4, 6, 8].map((count) => (
-                  <Button
-                    key={count}
-                    variant={selectedCount === count ? "default" : "outline"}
-                    size="sm"
-                    onClick={() => setSelectedCount(count)}
-                    className={`rounded-full px-6 ${
-                      selectedCount === count
-                        ? "bg-gradient-to-r from-pink-500 to-orange-500 hover:from-pink-600 hover:to-orange-600"
-                        : "border-pink-200 text-pink-600 hover:bg-pink-50"
-                    }`}
-                  >
-                    {count}张
-                  </Button>
-                ))}
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-
-        {/* Generate Button */}
-        <div className="text-center mb-8">
-          <Button
-            onClick={handleGenerate}
-            disabled={!content.trim() || isGenerating}
-            size="lg"
-            className="px-12 py-3 text-lg font-medium rounded-full bg-gradient-to-r from-pink-500 to-orange-500 hover:from-pink-600 hover:to-orange-600 disabled:from-gray-300 disabled:to-gray-300 shadow-lg shadow-pink-200"
-          >
-            {isGenerating ? (
-              <>
-                <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-white mr-2" />
-                生成中...
-              </>
-            ) : (
-              <>
-                <ImageIcon className="w-5 h-5 mr-2" />
-                生成漫画
-              </>
-            )}
-          </Button>
-        </div>
-
-        {/* Error Display */}
-        {error && (
-          <Card className="mb-8 border-red-200 shadow-lg shadow-red-100/50 bg-white/70 backdrop-blur-sm">
-            <CardContent className="p-4">
-              <p className="text-red-500 text-center">{error}</p>
-            </CardContent>
-          </Card>
-        )}
-
-        {/* Loading State */}
-        {isGenerating && (
-          <Card className="mb-8 border-0 shadow-lg shadow-pink-100/50 bg-white/70 backdrop-blur-sm">
-            <CardContent className="p-8 text-center">
-              <div className="space-y-4">
-                <div className="animate-pulse">
-                  <div className="w-16 h-16 bg-gradient-to-r from-pink-500 to-orange-500 rounded-full mx-auto mb-4 flex items-center justify-center">
-                    <Sparkles className="w-8 h-8 text-white animate-spin" />
-                  </div>
-                </div>
-                <p className="text-gray-600">正在分析文章内容...</p>
-                <p className="text-sm text-gray-500">预计需要30秒</p>
-              </div>
-            </CardContent>
-          </Card>
-        )}
-
-        {/* Results Section */}
-        {comicPanels.length > 0 && !isGenerating && (
-          <Card className="border-0 shadow-lg shadow-pink-100/50 bg-white/70 backdrop-blur-sm">
-            <CardContent className="p-6">
-              <div className="mb-6">
-                <h3 className="text-xl font-semibold text-gray-800 mb-2">
-                  生成结果
-                </h3>
-                <p className="text-gray-600 text-sm">
-                  点击图片可查看大图，右键保存图片
-                </p>
-              </div>
-
-              <div
-                className={`grid ${getGridLayout(comicPanels.length)} gap-4`}
-              >
-                {comicPanels.map((panel, i) => (
-                  <div key={panel.id} className="group relative aspect-square">
-                    <div className="w-full h-full bg-gradient-to-br from-pink-100 to-orange-100 rounded-2xl flex items-center justify-center cursor-pointer transition-transform hover:scale-105 overflow-hidden">
-                      <img
-                        src={panel.imageUrl}
-                        alt={`漫画场景 ${i + 1}`}
-                        className="w-full h-full object-cover"
-                      />
-                    </div>
-
-                    {/* Overlay on hover */}
-                    <div className="absolute inset-0 bg-black/0 group-hover:bg-black/20 rounded-2xl transition-all duration-200 flex items-center justify-center opacity-0 group-hover:opacity-100">
-                      <div className="flex gap-2">
-                        <Button
-                          size="sm"
-                          variant="secondary"
-                          className="rounded-full"
-                          onClick={() => window.open(panel.imageUrl, "_blank")}
-                        >
-                          <Eye className="w-4 h-4" />
-                        </Button>
-                        <Button
-                          size="sm"
-                          variant="secondary"
-                          className="rounded-full"
-                          onClick={() => {
-                            const a = document.createElement("a");
-                            a.href = panel.imageUrl;
-                            a.download = `comic-panel-${i + 1}.jpg`;
-                            a.click();
-                          }}
-                        >
-                          <Download className="w-4 h-4" />
-                        </Button>
-                      </div>
-                    </div>
-
-                    {/* 描述提示框 */}
-                    <div className="hidden group-hover:block absolute bottom-2 left-2 right-2 bg-black/60 text-white p-2 rounded-lg text-xs">
-                      {panel.description.substring(0, 100)}
-                      {panel.description.length > 100 ? "..." : ""}
-                    </div>
-                  </div>
-                ))}
-              </div>
-
-              {/* Social Actions */}
-              <div className="mt-8 pt-6 border-t border-pink-100">
-                <div className="flex items-center justify-between">
-                  <div className="flex items-center gap-4">
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      className="text-gray-600 hover:text-pink-600"
-                    >
-                      <Heart className="w-4 h-4 mr-1" />
-                      喜欢
-                    </Button>
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      className="text-gray-600 hover:text-pink-600"
-                    >
-                      <MessageCircle className="w-4 h-4 mr-1" />
-                      评论
-                    </Button>
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      className="text-gray-600 hover:text-pink-600"
-                    >
-                      <Share className="w-4 h-4 mr-1" />
-                      分享
-                    </Button>
-                  </div>
-                  <Badge
-                    variant="secondary"
-                    className="bg-green-100 text-green-700"
-                  >
-                    生成成功
-                  </Badge>
-                </div>
-              </div>
-            </CardContent>
-          </Card>
-        )}
-      </div>
-
-      {/* Footer */}
-      <div className="text-center py-8 text-gray-500 text-sm">
-        <p>让每个人都能轻松将文字转化为视觉故事 💫</p>
-      </div>
-    </div>
-  );
-}
diff --git a/.history/app/page_20250801231416.tsx b/.history/app/page_20250801231416.tsx
deleted file mode 100644
index f020207..0000000
--- a/.history/app/page_20250801231416.tsx
+++ /dev/null
@@ -1,330 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { Card, CardContent } from "@/components/ui/card";
-import { Button } from "@/components/ui/button";
-import { Textarea } from "@/components/ui/textarea";
-import { Badge } from "@/components/ui/badge";
-import {
-  Sparkles,
-  ImageIcon,
-  Download,
-  Eye,
-  Heart,
-  MessageCircle,
-  Share,
-} from "lucide-react";
-import { ComicPanel } from "@/lib/types";
-
-export default function ComicGenerator() {
-  const [content, setContent] = useState("");
-  const [selectedCount, setSelectedCount] = useState(4);
-  const [isGenerating, setIsGenerating] = useState(false);
-  const [comicPanels, setComicPanels] = useState<ComicPanel[]>([]);
-  const [error, setError] = useState<string | null>(null);
-  const maxLength = 2000;
-
-  const sampleArticle = `春天来了，小明走在回家的路上。突然，他发现路边有一只受伤的小猫。小明毫不犹豫地将小猫抱起，送到了附近的宠物医院。医生说小猫只是轻微擦伤，很快就能康复。从那天起，小明每天都会去医院看望小猫，直到它完全康复。`;
-
-  const handleGenerate = async () => {
-    if (!content.trim()) return;
-
-    setIsGenerating(true);
-    setError(null);
-
-    try {
-      const response = await fetch("/api/generate", {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({
-          content,
-          count: selectedCount,
-        }),
-      });
-
-      const data = await response.json();
-
-      if (!response.ok) {
-        throw new Error(data.error || "生成漫画失败，请稍后再试");
-      }
-
-      setComicPanels(data.comicPanels);
-    } catch (err) {
-      setError(err instanceof Error ? err.message : "生成漫画时发生未知错误");
-      console.error("生成漫画错误:", err);
-    } finally {
-      setIsGenerating(false);
-    }
-  };
-
-  const fillSample = () => {
-    setContent(sampleArticle);
-  };
-
-  const getGridLayout = (count: number) => {
-    switch (count) {
-      case 2:
-        return "grid-cols-1 md:grid-cols-2";
-      case 4:
-        return "grid-cols-2";
-      case 6:
-        return "grid-cols-2 md:grid-cols-3";
-      case 8:
-        return "grid-cols-2 md:grid-cols-4";
-      default:
-        return "grid-cols-2";
-    }
-  };
-
-  return (
-    <div className="min-h-screen bg-gradient-to-br from-pink-50 to-orange-50">
-      {/* Header */}
-      <div className="bg-white/80 backdrop-blur-md border-b border-pink-100 sticky top-0 z-10">
-        <div className="max-w-4xl mx-auto px-4 py-4 flex items-center justify-between">
-          <div className="flex items-center gap-2">
-            <div className="w-8 h-8 bg-gradient-to-r from-pink-500 to-orange-500 rounded-lg flex items-center justify-center">
-              <Sparkles className="w-5 h-5 text-white" />
-            </div>
-            <span className="font-bold text-gray-800">漫画生成器</span>
-          </div>
-          <div className="flex items-center gap-4">
-            <Badge variant="secondary" className="bg-pink-100 text-pink-700">
-              Beta
-            </Badge>
-          </div>
-        </div>
-      </div>
-
-      <div className="max-w-4xl mx-auto px-4 py-8">
-        {/* Hero Section */}
-        <div className="text-center mb-12">
-          <h1 className="text-4xl font-bold bg-gradient-to-r from-pink-600 to-orange-600 bg-clip-text text-transparent mb-4">
-            文章转漫画生成器
-          </h1>
-          <p className="text-gray-600 text-lg mb-8">
-            将你的文字变成精彩的漫画故事 ✨
-          </p>
-        </div>
-
-        {/* Input Section */}
-        <Card className="mb-8 border-0 shadow-lg shadow-pink-100/50 bg-white/70 backdrop-blur-sm">
-          <CardContent className="p-6">
-            <div className="space-y-4">
-              <div className="flex items-center justify-between">
-                <label className="text-sm font-medium text-gray-700">
-                  输入你的文章内容或创意
-                </label>
-                <span
-                  className={`text-sm ${
-                    content.length > maxLength
-                      ? "text-red-500"
-                      : "text-gray-500"
-                  }`}
-                >
-                  还可以输入 {maxLength - content.length} 字
-                </span>
-              </div>
-
-              <Textarea
-                value={content}
-                onChange={(e) => setContent(e.target.value)}
-                placeholder="在这里输入你的故事内容或创意，我们会将其转化为精美的漫画剧本..."
-                className="min-h-[120px] resize-none border-pink-200 focus:border-pink-400 focus:ring-pink-400/20"
-                maxLength={maxLength}
-              />
-
-              <div className="flex justify-start">
-                <Button
-                  variant="outline"
-                  size="sm"
-                  onClick={fillSample}
-                  className="border-pink-200 text-pink-600 hover:bg-pink-50 bg-transparent"
-                >
-                  试试示例文章
-                </Button>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-
-        {/* Configuration Section */}
-        <Card className="mb-8 border-0 shadow-lg shadow-pink-100/50 bg-white/70 backdrop-blur-sm">
-          <CardContent className="p-6">
-            <div className="space-y-4">
-              <label className="text-sm font-medium text-gray-700">
-                选择场景数量
-              </label>
-
-              <div className="flex gap-3">
-                {[2, 4, 6, 8].map((count) => (
-                  <Button
-                    key={count}
-                    variant={selectedCount === count ? "default" : "outline"}
-                    size="sm"
-                    onClick={() => setSelectedCount(count)}
-                    className={`rounded-full px-6 ${
-                      selectedCount === count
-                        ? "bg-gradient-to-r from-pink-500 to-orange-500 hover:from-pink-600 hover:to-orange-600"
-                        : "border-pink-200 text-pink-600 hover:bg-pink-50"
-                    }`}
-                  >
-                    {count}个场景
-                  </Button>
-                ))}
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-
-        {/* Generate Button */}
-        <div className="text-center mb-8">
-          <Button
-            onClick={handleGenerate}
-            disabled={!content.trim() || isGenerating}
-            size="lg"
-            className="px-12 py-3 text-lg font-medium rounded-full bg-gradient-to-r from-pink-500 to-orange-500 hover:from-pink-600 hover:to-orange-600 disabled:from-gray-300 disabled:to-gray-300 shadow-lg shadow-pink-200"
-          >
-            {isGenerating ? (
-              <>
-                <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-white mr-2" />
-                生成中...
-              </>
-            ) : (
-              <>
-                <ImageIcon className="w-5 h-5 mr-2" />
-                生成漫画剧本
-              </>
-            )}
-          </Button>
-        </div>
-
-        {/* Error Display */}
-        {error && (
-          <Card className="mb-8 border-red-200 shadow-lg shadow-red-100/50 bg-white/70 backdrop-blur-sm">
-            <CardContent className="p-4">
-              <p className="text-red-500 text-center">{error}</p>
-            </CardContent>
-          </Card>
-        )}
-
-        {/* Loading State */}
-        {isGenerating && (
-          <Card className="mb-8 border-0 shadow-lg shadow-pink-100/50 bg-white/70 backdrop-blur-sm">
-            <CardContent className="p-8 text-center">
-              <div className="space-y-4">
-                <div className="animate-pulse">
-                  <div className="w-16 h-16 bg-gradient-to-r from-pink-500 to-orange-500 rounded-full mx-auto mb-4 flex items-center justify-center">
-                    <Sparkles className="w-8 h-8 text-white animate-spin" />
-                  </div>
-                </div>
-                <p className="text-gray-600">正在创作漫画剧本...</p>
-                <p className="text-sm text-gray-500">预计需要30秒</p>
-              </div>
-            </CardContent>
-          </Card>
-        )}
-
-        {/* Results Section */}
-        {comicPanels.length > 0 && !isGenerating && (
-          <Card className="border-0 shadow-lg shadow-pink-100/50 bg-white/70 backdrop-blur-sm">
-            <CardContent className="p-6">
-              <div className="mb-6">
-                <h3 className="text-xl font-semibold text-gray-800 mb-2">
-                  生成结果
-                </h3>
-                <p className="text-gray-600 text-sm">
-                  以下是根据您的内容创作的漫画剧本
-                </p>
-              </div>
-
-              <div className="space-y-8">
-                {comicPanels.map((panel, i) => (
-                  <div
-                    key={panel.id}
-                    className="bg-white rounded-xl shadow-md p-5 border border-pink-100"
-                  >
-                    <div className="flex items-center mb-3">
-                      <div className="bg-gradient-to-r from-pink-500 to-orange-500 text-white rounded-full w-8 h-8 flex items-center justify-center mr-2">
-                        {i + 1}
-                      </div>
-                      <h4 className="font-medium text-gray-800">
-                        场景 {i + 1}
-                      </h4>
-                    </div>
-
-                    <div className="prose prose-pink max-w-none">
-                      <p className="whitespace-pre-wrap text-gray-700">
-                        {panel.content}
-                      </p>
-                    </div>
-
-                    <div className="mt-4 pt-3 border-t border-pink-100">
-                      <div className="flex items-center justify-between">
-                        <Button
-                          size="sm"
-                          variant="outline"
-                          className="text-xs border-pink-200 text-pink-600"
-                        >
-                          <ImageIcon className="w-3 h-3 mr-1" />
-                          生成此场景图片
-                        </Button>
-                        <Badge className="bg-pink-100 text-pink-700 font-normal">
-                          场景 {i + 1}/{comicPanels.length}
-                        </Badge>
-                      </div>
-                    </div>
-                  </div>
-                ))}
-              </div>
-
-              {/* Social Actions */}
-              <div className="mt-8 pt-6 border-t border-pink-100">
-                <div className="flex items-center justify-between">
-                  <div className="flex items-center gap-4">
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      className="text-gray-600 hover:text-pink-600"
-                    >
-                      <Heart className="w-4 h-4 mr-1" />
-                      喜欢
-                    </Button>
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      className="text-gray-600 hover:text-pink-600"
-                    >
-                      <MessageCircle className="w-4 h-4 mr-1" />
-                      评论
-                    </Button>
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      className="text-gray-600 hover:text-pink-600"
-                    >
-                      <Share className="w-4 h-4 mr-1" />
-                      分享
-                    </Button>
-                  </div>
-                  <Badge
-                    variant="secondary"
-                    className="bg-green-100 text-green-700"
-                  >
-                    生成成功
-                  </Badge>
-                </div>
-              </div>
-            </CardContent>
-          </Card>
-        )}
-      </div>
-
-      {/* Footer */}
-      <div className="text-center py-8 text-gray-500 text-sm">
-        <p>让每个人都能轻松将文字转化为视觉故事 💫</p>
-      </div>
-    </div>
-  );
-}
diff --git a/.history/app/page_20250801233202.tsx b/.history/app/page_20250801233202.tsx
deleted file mode 100644
index ceda176..0000000
--- a/.history/app/page_20250801233202.tsx
+++ /dev/null
@@ -1,375 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { Card, CardContent } from "@/components/ui/card";
-import { Button } from "@/components/ui/button";
-import { Textarea } from "@/components/ui/textarea";
-import { Badge } from "@/components/ui/badge";
-import {
-  Sparkles,
-  ImageIcon,
-  RefreshCw,
-  PlayIcon,
-  Heart,
-  MessageCircle,
-  Share,
-  Wand2,
-} from "lucide-react";
-import { ComicPanel } from "@/lib/types";
-
-export default function ComicGenerator() {
-  const [content, setContent] = useState("");
-  const [selectedCount, setSelectedCount] = useState(4);
-  const [isGenerating, setIsGenerating] = useState(false);
-  const [isRefreshingScene, setIsRefreshingScene] = useState<number | null>(
-    null
-  );
-  const [comicPanels, setComicPanels] = useState<ComicPanel[]>([]);
-  const [error, setError] = useState<string | null>(null);
-  const maxLength = 2000;
-
-  const sampleArticle = `春天来了，小明走在回家的路上。突然，他发现路边有一只受伤的小猫。小明毫不犹豫地将小猫抱起，送到了附近的宠物医院。医生说小猫只是轻微擦伤，很快就能康复。从那天起，小明每天都会去医院看望小猫，直到它完全康复。`;
-
-  const handleGenerate = async () => {
-    if (!content.trim()) return;
-
-    setIsGenerating(true);
-    setError(null);
-
-    try {
-      const response = await fetch("/api/generate", {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({
-          content,
-          count: selectedCount,
-        }),
-      });
-
-      const data = await response.json();
-
-      if (!response.ok) {
-        throw new Error(data.error || "生成漫画剧本失败，请稍后再试");
-      }
-
-      setComicPanels(data.comicPanels);
-    } catch (err) {
-      setError(
-        err instanceof Error ? err.message : "生成漫画剧本时发生未知错误"
-      );
-      console.error("生成漫画剧本错误:", err);
-    } finally {
-      setIsGenerating(false);
-    }
-  };
-
-  const handleRefreshScene = async (sceneIndex: number) => {
-    if (!content.trim()) return;
-
-    setIsRefreshingScene(sceneIndex);
-
-    try {
-      // 为单个场景生成新内容
-      const response = await fetch("/api/generate", {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({
-          content,
-          count: 1, // 只生成一个场景
-          sceneNumber: sceneIndex + 1, // 指定场景编号
-        }),
-      });
-
-      const data = await response.json();
-
-      if (!response.ok) {
-        throw new Error(data.error || "刷新场景失败，请稍后再试");
-      }
-
-      // 更新指定场景的内容
-      if (data.comicPanels && data.comicPanels.length > 0) {
-        const updatedPanels = [...comicPanels];
-        updatedPanels[sceneIndex] = {
-          ...updatedPanels[sceneIndex],
-          content: data.comicPanels[0].content,
-        };
-        setComicPanels(updatedPanels);
-      }
-    } catch (err) {
-      setError(err instanceof Error ? err.message : "刷新场景时发生未知错误");
-    } finally {
-      setIsRefreshingScene(null);
-    }
-  };
-
-  const handleGenerateAllImages = () => {
-    // 这里将来会实现生成所有场景图片的功能
-    alert("此功能尚未实现：将根据所有场景提示词生成漫画图片");
-  };
-
-  const fillSample = () => {
-    setContent(sampleArticle);
-  };
-
-  const getGridLayout = (count: number) => {
-    switch (count) {
-      case 2:
-        return "grid-cols-1 md:grid-cols-2";
-      case 4:
-        return "grid-cols-2";
-      case 6:
-        return "grid-cols-2 md:grid-cols-3";
-      case 8:
-        return "grid-cols-2 md:grid-cols-4";
-      default:
-        return "grid-cols-2";
-    }
-  };
-
-  return (
-    <div className="min-h-screen bg-gradient-to-br from-pink-50 to-orange-50">
-      {/* Header */}
-      <div className="bg-white/80 backdrop-blur-md border-b border-pink-100 sticky top-0 z-10">
-        <div className="max-w-5xl mx-auto px-4 py-4 flex items-center justify-between">
-          <div className="flex items-center gap-2">
-            <div className="w-8 h-8 bg-gradient-to-r from-pink-500 to-orange-500 rounded-lg flex items-center justify-center">
-              <Sparkles className="w-5 h-5 text-white" />
-            </div>
-            <span className="font-bold text-gray-800">漫画生成器</span>
-          </div>
-          <div className="flex items-center gap-4">
-            <Badge variant="secondary" className="bg-pink-100 text-pink-700">
-              Beta
-            </Badge>
-          </div>
-        </div>
-      </div>
-
-      <div className="max-w-5xl mx-auto px-4 py-8">
-        {/* Hero Section */}
-        <div className="text-center mb-12">
-          <h1 className="text-4xl font-bold bg-gradient-to-r from-pink-600 to-orange-600 bg-clip-text text-transparent mb-4">
-            文章转漫画生成器
-          </h1>
-          <p className="text-gray-600 text-lg mb-8">
-            将你的文字变成精彩的漫画故事 ✨
-          </p>
-        </div>
-
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-          {/* Left Column: Input & Controls */}
-          <div className="md:col-span-1 space-y-6">
-            {/* Input Section */}
-            <Card className="border-0 shadow-lg shadow-pink-100/50 bg-white/70 backdrop-blur-sm">
-              <CardContent className="p-6">
-                <div className="space-y-4">
-                  <div className="flex items-center justify-between">
-                    <label className="text-sm font-medium text-gray-700">
-                      输入你的文章内容或创意
-                    </label>
-                    <span
-                      className={`text-sm ${
-                        content.length > maxLength
-                          ? "text-red-500"
-                          : "text-gray-500"
-                      }`}
-                    >
-                      还可以输入 {maxLength - content.length} 字
-                    </span>
-                  </div>
-
-                  <Textarea
-                    value={content}
-                    onChange={(e) => setContent(e.target.value)}
-                    placeholder="在这里输入你的故事内容或创意，我们会将其转化为精美的漫画剧本..."
-                    className="min-h-[200px] resize-none border-pink-200 focus:border-pink-400 focus:ring-pink-400/20"
-                    maxLength={maxLength}
-                  />
-
-                  <div className="flex justify-start">
-                    <Button
-                      variant="outline"
-                      size="sm"
-                      onClick={fillSample}
-                      className="border-pink-200 text-pink-600 hover:bg-pink-50 bg-transparent"
-                    >
-                      试试示例文章
-                    </Button>
-                  </div>
-                </div>
-              </CardContent>
-            </Card>
-
-            {/* Configuration Section */}
-            <Card className="border-0 shadow-lg shadow-pink-100/50 bg-white/70 backdrop-blur-sm">
-              <CardContent className="p-6">
-                <div className="space-y-4">
-                  <label className="text-sm font-medium text-gray-700">
-                    选择场景数量
-                  </label>
-
-                  <div className="flex gap-3 flex-wrap">
-                    {[2, 4, 6, 8].map((count) => (
-                      <Button
-                        key={count}
-                        variant={
-                          selectedCount === count ? "default" : "outline"
-                        }
-                        size="sm"
-                        onClick={() => setSelectedCount(count)}
-                        className={`rounded-full px-6 ${
-                          selectedCount === count
-                            ? "bg-gradient-to-r from-pink-500 to-orange-500 hover:from-pink-600 hover:to-orange-600"
-                            : "border-pink-200 text-pink-600 hover:bg-pink-50"
-                        }`}
-                      >
-                        {count}个场景
-                      </Button>
-                    ))}
-                  </div>
-                </div>
-              </CardContent>
-            </Card>
-
-            {/* Generate Button */}
-            <div className="text-center">
-              <Button
-                onClick={handleGenerate}
-                disabled={!content.trim() || isGenerating}
-                size="lg"
-                className="w-full px-6 py-3 text-lg font-medium rounded-full bg-gradient-to-r from-pink-500 to-orange-500 hover:from-pink-600 hover:to-orange-600 disabled:from-gray-300 disabled:to-gray-300 shadow-lg shadow-pink-200"
-              >
-                {isGenerating ? (
-                  <>
-                    <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-white mr-2" />
-                    生成中...
-                  </>
-                ) : (
-                  <>
-                    <Wand2 className="w-5 h-5 mr-2" />
-                    生成漫画剧本
-                  </>
-                )}
-              </Button>
-            </div>
-
-            {/* Generate All Images Button */}
-            {comicPanels.length > 0 && (
-              <Button
-                onClick={handleGenerateAllImages}
-                variant="outline"
-                size="lg"
-                className="w-full mt-4 border-2 border-orange-500 text-orange-600 hover:bg-orange-50 rounded-full"
-              >
-                <ImageIcon className="w-5 h-5 mr-2" />
-                根据剧本生成全部漫画
-              </Button>
-            )}
-          </div>
-
-          {/* Right Column: Results */}
-          <div className="md:col-span-2">
-            {/* Error Display */}
-            {error && (
-              <Card className="mb-6 border-red-200 shadow-lg shadow-red-100/50 bg-white/70 backdrop-blur-sm">
-                <CardContent className="p-4">
-                  <p className="text-red-500 text-center">{error}</p>
-                </CardContent>
-              </Card>
-            )}
-
-            {/* Loading State */}
-            {isGenerating && (
-              <Card className="mb-6 border-0 shadow-lg shadow-pink-100/50 bg-white/70 backdrop-blur-sm">
-                <CardContent className="p-8 text-center">
-                  <div className="space-y-4">
-                    <div className="animate-pulse">
-                      <div className="w-16 h-16 bg-gradient-to-r from-pink-500 to-orange-500 rounded-full mx-auto mb-4 flex items-center justify-center">
-                        <Sparkles className="w-8 h-8 text-white animate-spin" />
-                      </div>
-                    </div>
-                    <p className="text-gray-600">正在创作漫画剧本...</p>
-                    <p className="text-sm text-gray-500">预计需要30秒</p>
-                  </div>
-                </CardContent>
-              </Card>
-            )}
-
-            {/* Results Section */}
-            {comicPanels.length > 0 && !isGenerating && (
-              <div className="space-y-6">
-                <h3 className="text-xl font-semibold text-gray-800">
-                  生成结果
-                </h3>
-
-                <div className="space-y-6">
-                  {comicPanels.map((panel, i) => (
-                    <Card
-                      key={panel.id}
-                      className="border-0 shadow-lg shadow-pink-100/50 bg-white/70 backdrop-blur-sm overflow-hidden"
-                    >
-                      <CardContent className="p-0">
-                        <div className="bg-gradient-to-r from-pink-500 to-orange-500 py-3 px-4 flex items-center justify-between">
-                          <div className="flex items-center">
-                            <span className="bg-white/20 rounded-full w-7 h-7 flex items-center justify-center text-white font-medium mr-2">
-                              {i + 1}
-                            </span>
-                            <h4 className="text-white font-medium">
-                              场景 {i + 1}
-                            </h4>
-                          </div>
-                          <Button
-                            size="sm"
-                            variant="ghost"
-                            className="text-white hover:bg-white/20"
-                            onClick={() => handleRefreshScene(i)}
-                            disabled={isRefreshingScene !== null}
-                          >
-                            <RefreshCw
-                              className={`w-4 h-4 ${
-                                isRefreshingScene === i ? "animate-spin" : ""
-                              }`}
-                            />
-                            <span className="ml-1">刷新</span>
-                          </Button>
-                        </div>
-
-                        <div className="p-5">
-                          <div className="prose prose-pink max-w-none">
-                            <p className="whitespace-pre-wrap text-gray-700">
-                              {panel.content}
-                            </p>
-                          </div>
-
-                          <div className="mt-4 pt-3 border-t border-pink-100">
-                            <Button
-                              size="sm"
-                              variant="outline"
-                              className="text-sm border-pink-200 text-pink-600 hover:bg-pink-50"
-                            >
-                              <ImageIcon className="w-4 h-4 mr-1" />
-                              生成此场景图片
-                            </Button>
-                          </div>
-                        </div>
-                      </CardContent>
-                    </Card>
-                  ))}
-                </div>
-              </div>
-            )}
-          </div>
-        </div>
-      </div>
-
-      {/* Footer */}
-      <div className="text-center py-8 text-gray-500 text-sm">
-        <p>让每个人都能轻松将文字转化为视觉故事 💫</p>
-      </div>
-    </div>
-  );
-}
diff --git a/.history/app/page_20250801233433.tsx b/.history/app/page_20250801233433.tsx
deleted file mode 100644
index f020207..0000000
--- a/.history/app/page_20250801233433.tsx
+++ /dev/null
@@ -1,330 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { Card, CardContent } from "@/components/ui/card";
-import { Button } from "@/components/ui/button";
-import { Textarea } from "@/components/ui/textarea";
-import { Badge } from "@/components/ui/badge";
-import {
-  Sparkles,
-  ImageIcon,
-  Download,
-  Eye,
-  Heart,
-  MessageCircle,
-  Share,
-} from "lucide-react";
-import { ComicPanel } from "@/lib/types";
-
-export default function ComicGenerator() {
-  const [content, setContent] = useState("");
-  const [selectedCount, setSelectedCount] = useState(4);
-  const [isGenerating, setIsGenerating] = useState(false);
-  const [comicPanels, setComicPanels] = useState<ComicPanel[]>([]);
-  const [error, setError] = useState<string | null>(null);
-  const maxLength = 2000;
-
-  const sampleArticle = `春天来了，小明走在回家的路上。突然，他发现路边有一只受伤的小猫。小明毫不犹豫地将小猫抱起，送到了附近的宠物医院。医生说小猫只是轻微擦伤，很快就能康复。从那天起，小明每天都会去医院看望小猫，直到它完全康复。`;
-
-  const handleGenerate = async () => {
-    if (!content.trim()) return;
-
-    setIsGenerating(true);
-    setError(null);
-
-    try {
-      const response = await fetch("/api/generate", {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({
-          content,
-          count: selectedCount,
-        }),
-      });
-
-      const data = await response.json();
-
-      if (!response.ok) {
-        throw new Error(data.error || "生成漫画失败，请稍后再试");
-      }
-
-      setComicPanels(data.comicPanels);
-    } catch (err) {
-      setError(err instanceof Error ? err.message : "生成漫画时发生未知错误");
-      console.error("生成漫画错误:", err);
-    } finally {
-      setIsGenerating(false);
-    }
-  };
-
-  const fillSample = () => {
-    setContent(sampleArticle);
-  };
-
-  const getGridLayout = (count: number) => {
-    switch (count) {
-      case 2:
-        return "grid-cols-1 md:grid-cols-2";
-      case 4:
-        return "grid-cols-2";
-      case 6:
-        return "grid-cols-2 md:grid-cols-3";
-      case 8:
-        return "grid-cols-2 md:grid-cols-4";
-      default:
-        return "grid-cols-2";
-    }
-  };
-
-  return (
-    <div className="min-h-screen bg-gradient-to-br from-pink-50 to-orange-50">
-      {/* Header */}
-      <div className="bg-white/80 backdrop-blur-md border-b border-pink-100 sticky top-0 z-10">
-        <div className="max-w-4xl mx-auto px-4 py-4 flex items-center justify-between">
-          <div className="flex items-center gap-2">
-            <div className="w-8 h-8 bg-gradient-to-r from-pink-500 to-orange-500 rounded-lg flex items-center justify-center">
-              <Sparkles className="w-5 h-5 text-white" />
-            </div>
-            <span className="font-bold text-gray-800">漫画生成器</span>
-          </div>
-          <div className="flex items-center gap-4">
-            <Badge variant="secondary" className="bg-pink-100 text-pink-700">
-              Beta
-            </Badge>
-          </div>
-        </div>
-      </div>
-
-      <div className="max-w-4xl mx-auto px-4 py-8">
-        {/* Hero Section */}
-        <div className="text-center mb-12">
-          <h1 className="text-4xl font-bold bg-gradient-to-r from-pink-600 to-orange-600 bg-clip-text text-transparent mb-4">
-            文章转漫画生成器
-          </h1>
-          <p className="text-gray-600 text-lg mb-8">
-            将你的文字变成精彩的漫画故事 ✨
-          </p>
-        </div>
-
-        {/* Input Section */}
-        <Card className="mb-8 border-0 shadow-lg shadow-pink-100/50 bg-white/70 backdrop-blur-sm">
-          <CardContent className="p-6">
-            <div className="space-y-4">
-              <div className="flex items-center justify-between">
-                <label className="text-sm font-medium text-gray-700">
-                  输入你的文章内容或创意
-                </label>
-                <span
-                  className={`text-sm ${
-                    content.length > maxLength
-                      ? "text-red-500"
-                      : "text-gray-500"
-                  }`}
-                >
-                  还可以输入 {maxLength - content.length} 字
-                </span>
-              </div>
-
-              <Textarea
-                value={content}
-                onChange={(e) => setContent(e.target.value)}
-                placeholder="在这里输入你的故事内容或创意，我们会将其转化为精美的漫画剧本..."
-                className="min-h-[120px] resize-none border-pink-200 focus:border-pink-400 focus:ring-pink-400/20"
-                maxLength={maxLength}
-              />
-
-              <div className="flex justify-start">
-                <Button
-                  variant="outline"
-                  size="sm"
-                  onClick={fillSample}
-                  className="border-pink-200 text-pink-600 hover:bg-pink-50 bg-transparent"
-                >
-                  试试示例文章
-                </Button>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-
-        {/* Configuration Section */}
-        <Card className="mb-8 border-0 shadow-lg shadow-pink-100/50 bg-white/70 backdrop-blur-sm">
-          <CardContent className="p-6">
-            <div className="space-y-4">
-              <label className="text-sm font-medium text-gray-700">
-                选择场景数量
-              </label>
-
-              <div className="flex gap-3">
-                {[2, 4, 6, 8].map((count) => (
-                  <Button
-                    key={count}
-                    variant={selectedCount === count ? "default" : "outline"}
-                    size="sm"
-                    onClick={() => setSelectedCount(count)}
-                    className={`rounded-full px-6 ${
-                      selectedCount === count
-                        ? "bg-gradient-to-r from-pink-500 to-orange-500 hover:from-pink-600 hover:to-orange-600"
-                        : "border-pink-200 text-pink-600 hover:bg-pink-50"
-                    }`}
-                  >
-                    {count}个场景
-                  </Button>
-                ))}
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-
-        {/* Generate Button */}
-        <div className="text-center mb-8">
-          <Button
-            onClick={handleGenerate}
-            disabled={!content.trim() || isGenerating}
-            size="lg"
-            className="px-12 py-3 text-lg font-medium rounded-full bg-gradient-to-r from-pink-500 to-orange-500 hover:from-pink-600 hover:to-orange-600 disabled:from-gray-300 disabled:to-gray-300 shadow-lg shadow-pink-200"
-          >
-            {isGenerating ? (
-              <>
-                <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-white mr-2" />
-                生成中...
-              </>
-            ) : (
-              <>
-                <ImageIcon className="w-5 h-5 mr-2" />
-                生成漫画剧本
-              </>
-            )}
-          </Button>
-        </div>
-
-        {/* Error Display */}
-        {error && (
-          <Card className="mb-8 border-red-200 shadow-lg shadow-red-100/50 bg-white/70 backdrop-blur-sm">
-            <CardContent className="p-4">
-              <p className="text-red-500 text-center">{error}</p>
-            </CardContent>
-          </Card>
-        )}
-
-        {/* Loading State */}
-        {isGenerating && (
-          <Card className="mb-8 border-0 shadow-lg shadow-pink-100/50 bg-white/70 backdrop-blur-sm">
-            <CardContent className="p-8 text-center">
-              <div className="space-y-4">
-                <div className="animate-pulse">
-                  <div className="w-16 h-16 bg-gradient-to-r from-pink-500 to-orange-500 rounded-full mx-auto mb-4 flex items-center justify-center">
-                    <Sparkles className="w-8 h-8 text-white animate-spin" />
-                  </div>
-                </div>
-                <p className="text-gray-600">正在创作漫画剧本...</p>
-                <p className="text-sm text-gray-500">预计需要30秒</p>
-              </div>
-            </CardContent>
-          </Card>
-        )}
-
-        {/* Results Section */}
-        {comicPanels.length > 0 && !isGenerating && (
-          <Card className="border-0 shadow-lg shadow-pink-100/50 bg-white/70 backdrop-blur-sm">
-            <CardContent className="p-6">
-              <div className="mb-6">
-                <h3 className="text-xl font-semibold text-gray-800 mb-2">
-                  生成结果
-                </h3>
-                <p className="text-gray-600 text-sm">
-                  以下是根据您的内容创作的漫画剧本
-                </p>
-              </div>
-
-              <div className="space-y-8">
-                {comicPanels.map((panel, i) => (
-                  <div
-                    key={panel.id}
-                    className="bg-white rounded-xl shadow-md p-5 border border-pink-100"
-                  >
-                    <div className="flex items-center mb-3">
-                      <div className="bg-gradient-to-r from-pink-500 to-orange-500 text-white rounded-full w-8 h-8 flex items-center justify-center mr-2">
-                        {i + 1}
-                      </div>
-                      <h4 className="font-medium text-gray-800">
-                        场景 {i + 1}
-                      </h4>
-                    </div>
-
-                    <div className="prose prose-pink max-w-none">
-                      <p className="whitespace-pre-wrap text-gray-700">
-                        {panel.content}
-                      </p>
-                    </div>
-
-                    <div className="mt-4 pt-3 border-t border-pink-100">
-                      <div className="flex items-center justify-between">
-                        <Button
-                          size="sm"
-                          variant="outline"
-                          className="text-xs border-pink-200 text-pink-600"
-                        >
-                          <ImageIcon className="w-3 h-3 mr-1" />
-                          生成此场景图片
-                        </Button>
-                        <Badge className="bg-pink-100 text-pink-700 font-normal">
-                          场景 {i + 1}/{comicPanels.length}
-                        </Badge>
-                      </div>
-                    </div>
-                  </div>
-                ))}
-              </div>
-
-              {/* Social Actions */}
-              <div className="mt-8 pt-6 border-t border-pink-100">
-                <div className="flex items-center justify-between">
-                  <div className="flex items-center gap-4">
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      className="text-gray-600 hover:text-pink-600"
-                    >
-                      <Heart className="w-4 h-4 mr-1" />
-                      喜欢
-                    </Button>
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      className="text-gray-600 hover:text-pink-600"
-                    >
-                      <MessageCircle className="w-4 h-4 mr-1" />
-                      评论
-                    </Button>
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      className="text-gray-600 hover:text-pink-600"
-                    >
-                      <Share className="w-4 h-4 mr-1" />
-                      分享
-                    </Button>
-                  </div>
-                  <Badge
-                    variant="secondary"
-                    className="bg-green-100 text-green-700"
-                  >
-                    生成成功
-                  </Badge>
-                </div>
-              </div>
-            </CardContent>
-          </Card>
-        )}
-      </div>
-
-      {/* Footer */}
-      <div className="text-center py-8 text-gray-500 text-sm">
-        <p>让每个人都能轻松将文字转化为视觉故事 💫</p>
-      </div>
-    </div>
-  );
-}
diff --git a/.history/app/page_20250801233800.tsx b/.history/app/page_20250801233800.tsx
deleted file mode 100644
index 2af2fc7..0000000
--- a/.history/app/page_20250801233800.tsx
+++ /dev/null
@@ -1,354 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { Card, CardContent } from "@/components/ui/card";
-import { Button } from "@/components/ui/button";
-import { Textarea } from "@/components/ui/textarea";
-import { Badge } from "@/components/ui/badge";
-import {
-  Sparkles,
-  ImageIcon,
-  Download,
-  Eye,
-  Heart,
-  MessageCircle,
-  Share,
-  Wand2,
-} from "lucide-react";
-import { ComicPanel } from "@/lib/types";
-
-export default function ComicGenerator() {
-  const [content, setContent] = useState("");
-  const [selectedCount, setSelectedCount] = useState(4);
-  const [isGenerating, setIsGenerating] = useState(false);
-  const [isGeneratingImages, setIsGeneratingImages] = useState(false);
-  const [comicPanels, setComicPanels] = useState<ComicPanel[]>([]);
-  const [error, setError] = useState<string | null>(null);
-  const maxLength = 2000;
-
-  const sampleArticle = `春天来了，小明走在回家的路上。突然，他发现路边有一只受伤的小猫。小明毫不犹豫地将小猫抱起，送到了附近的宠物医院。医生说小猫只是轻微擦伤，很快就能康复。从那天起，小明每天都会去医院看望小猫，直到它完全康复。`;
-
-  const handleGenerate = async () => {
-    if (!content.trim()) return;
-
-    setIsGenerating(true);
-    setError(null);
-
-    try {
-      const response = await fetch("/api/generate", {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({
-          content,
-          count: selectedCount,
-        }),
-      });
-
-      const data = await response.json();
-
-      if (!response.ok) {
-        throw new Error(data.error || "生成漫画失败，请稍后再试");
-      }
-
-      setComicPanels(data.comicPanels);
-    } catch (err) {
-      setError(err instanceof Error ? err.message : "生成漫画时发生未知错误");
-      console.error("生成漫画错误:", err);
-    } finally {
-      setIsGenerating(false);
-    }
-  };
-
-  const handleGenerateImages = async () => {
-    // 这个功能将来会实现，目前只是一个占位功能
-    setIsGeneratingImages(true);
-
-    try {
-      // 模拟API调用
-      await new Promise((resolve) => setTimeout(resolve, 2000));
-      alert("此功能尚未实现：将根据所有场景提示词生成完整漫画");
-    } finally {
-      setIsGeneratingImages(false);
-    }
-  };
-
-  const fillSample = () => {
-    setContent(sampleArticle);
-  };
-
-  const getGridLayout = (count: number) => {
-    switch (count) {
-      case 2:
-        return "grid-cols-1 md:grid-cols-2";
-      case 4:
-        return "grid-cols-2";
-      case 6:
-        return "grid-cols-2 md:grid-cols-3";
-      case 8:
-        return "grid-cols-2 md:grid-cols-4";
-      default:
-        return "grid-cols-2";
-    }
-  };
-
-  return (
-    <div className="min-h-screen bg-gradient-to-br from-pink-50 to-orange-50">
-      {/* Header */}
-      <div className="bg-white/80 backdrop-blur-md border-b border-pink-100 sticky top-0 z-10">
-        <div className="max-w-4xl mx-auto px-4 py-4 flex items-center justify-between">
-          <div className="flex items-center gap-2">
-            <div className="w-8 h-8 bg-gradient-to-r from-pink-500 to-orange-500 rounded-lg flex items-center justify-center">
-              <Sparkles className="w-5 h-5 text-white" />
-            </div>
-            <span className="font-bold text-gray-800">漫画生成器</span>
-          </div>
-          <div className="flex items-center gap-4">
-            <Badge variant="secondary" className="bg-pink-100 text-pink-700">
-              Beta
-            </Badge>
-          </div>
-        </div>
-      </div>
-
-      <div className="max-w-4xl mx-auto px-4 py-8">
-        {/* Hero Section */}
-        <div className="text-center mb-12">
-          <h1 className="text-4xl font-bold bg-gradient-to-r from-pink-600 to-orange-600 bg-clip-text text-transparent mb-4">
-            文章转漫画生成器
-          </h1>
-          <p className="text-gray-600 text-lg mb-8">
-            将你的文字变成精彩的漫画故事 ✨
-          </p>
-        </div>
-
-        {/* Input Section */}
-        <Card className="mb-8 border-0 shadow-lg shadow-pink-100/50 bg-white/70 backdrop-blur-sm">
-          <CardContent className="p-6">
-            <div className="space-y-4">
-              <div className="flex items-center justify-between">
-                <label className="text-sm font-medium text-gray-700">
-                  输入你的文章内容或创意
-                </label>
-                <span
-                  className={`text-sm ${
-                    content.length > maxLength
-                      ? "text-red-500"
-                      : "text-gray-500"
-                  }`}
-                >
-                  还可以输入 {maxLength - content.length} 字
-                </span>
-              </div>
-
-              <Textarea
-                value={content}
-                onChange={(e) => setContent(e.target.value)}
-                placeholder="在这里输入你的故事内容或创意，我们会将其转化为精美的漫画剧本..."
-                className="min-h-[120px] resize-none border-pink-200 focus:border-pink-400 focus:ring-pink-400/20"
-                maxLength={maxLength}
-              />
-
-              <div className="flex justify-start">
-                <Button
-                  variant="outline"
-                  size="sm"
-                  onClick={fillSample}
-                  className="border-pink-200 text-pink-600 hover:bg-pink-50 bg-transparent"
-                >
-                  试试示例文章
-                </Button>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-
-        {/* Configuration Section */}
-        <Card className="mb-8 border-0 shadow-lg shadow-pink-100/50 bg-white/70 backdrop-blur-sm">
-          <CardContent className="p-6">
-            <div className="space-y-4">
-              <label className="text-sm font-medium text-gray-700">
-                选择场景数量
-              </label>
-
-              <div className="flex gap-3">
-                {[2, 4, 6, 8].map((count) => (
-                  <Button
-                    key={count}
-                    variant={selectedCount === count ? "default" : "outline"}
-                    size="sm"
-                    onClick={() => setSelectedCount(count)}
-                    className={`rounded-full px-6 ${
-                      selectedCount === count
-                        ? "bg-gradient-to-r from-pink-500 to-orange-500 hover:from-pink-600 hover:to-orange-600"
-                        : "border-pink-200 text-pink-600 hover:bg-pink-50"
-                    }`}
-                  >
-                    {count}个场景
-                  </Button>
-                ))}
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-
-        {/* Generate Button */}
-        <div className="text-center mb-8">
-          <Button
-            onClick={handleGenerate}
-            disabled={!content.trim() || isGenerating}
-            size="lg"
-            className="px-12 py-3 text-lg font-medium rounded-full bg-gradient-to-r from-pink-500 to-orange-500 hover:from-pink-600 hover:to-orange-600 disabled:from-gray-300 disabled:to-gray-300 shadow-lg shadow-pink-200"
-          >
-            {isGenerating ? (
-              <>
-                <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-white mr-2" />
-                生成中...
-              </>
-            ) : (
-              <>
-                <Wand2 className="w-5 h-5 mr-2" />
-                生成漫画剧本
-              </>
-            )}
-          </Button>
-        </div>
-
-        {/* Error Display */}
-        {error && (
-          <Card className="mb-8 border-red-200 shadow-lg shadow-red-100/50 bg-white/70 backdrop-blur-sm">
-            <CardContent className="p-4">
-              <p className="text-red-500 text-center">{error}</p>
-            </CardContent>
-          </Card>
-        )}
-
-        {/* Loading State */}
-        {isGenerating && (
-          <Card className="mb-8 border-0 shadow-lg shadow-pink-100/50 bg-white/70 backdrop-blur-sm">
-            <CardContent className="p-8 text-center">
-              <div className="space-y-4">
-                <div className="animate-pulse">
-                  <div className="w-16 h-16 bg-gradient-to-r from-pink-500 to-orange-500 rounded-full mx-auto mb-4 flex items-center justify-center">
-                    <Sparkles className="w-8 h-8 text-white animate-spin" />
-                  </div>
-                </div>
-                <p className="text-gray-600">正在创作漫画剧本...</p>
-                <p className="text-sm text-gray-500">预计需要30秒</p>
-              </div>
-            </CardContent>
-          </Card>
-        )}
-
-        {/* Results Section */}
-        {comicPanels.length > 0 && !isGenerating && (
-          <Card className="border-0 shadow-lg shadow-pink-100/50 bg-white/70 backdrop-blur-sm">
-            <CardContent className="p-6">
-              <div className="mb-6">
-                <h3 className="text-xl font-semibold text-gray-800 mb-2">
-                  生成结果
-                </h3>
-                <p className="text-gray-600 text-sm">
-                  以下是根据您的内容创作的漫画剧本
-                </p>
-              </div>
-
-              <div className="space-y-8">
-                {comicPanels.map((panel, i) => (
-                  <div
-                    key={panel.id}
-                    className="bg-white rounded-xl shadow-md p-5 border border-pink-100"
-                  >
-                    <div className="flex items-center mb-3">
-                      <div className="bg-gradient-to-r from-pink-500 to-orange-500 text-white rounded-full w-8 h-8 flex items-center justify-center mr-2">
-                        {i + 1}
-                      </div>
-                      <h4 className="font-medium text-gray-800">
-                        场景 {i + 1}
-                      </h4>
-                    </div>
-
-                    <div className="prose prose-pink max-w-none">
-                      <p className="whitespace-pre-wrap text-gray-700">
-                        {panel.content}
-                      </p>
-                    </div>
-                  </div>
-                ))}
-              </div>
-
-              {/* 统一的生成漫画按钮 */}
-              <div className="mt-8 pt-6 border-t border-pink-100 text-center">
-                <Button
-                  onClick={handleGenerateImages}
-                  disabled={isGeneratingImages}
-                  size="lg"
-                  className="px-12 py-3 text-lg font-medium rounded-full bg-gradient-to-r from-orange-400 to-pink-500 hover:from-orange-500 hover:to-pink-600 disabled:opacity-70 shadow-lg shadow-orange-200"
-                >
-                  {isGeneratingImages ? (
-                    <>
-                      <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-white mr-2" />
-                      生成中...
-                    </>
-                  ) : (
-                    <>
-                      <ImageIcon className="w-5 h-5 mr-2" />
-                      根据剧本生成漫画
-                    </>
-                  )}
-                </Button>
-                <p className="text-sm text-gray-500 mt-2">
-                  将基于上述剧本内容生成完整的漫画图像
-                </p>
-              </div>
-
-              {/* Social Actions */}
-              <div className="mt-8 pt-6 border-t border-pink-100">
-                <div className="flex items-center justify-between">
-                  <div className="flex items-center gap-4">
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      className="text-gray-600 hover:text-pink-600"
-                    >
-                      <Heart className="w-4 h-4 mr-1" />
-                      喜欢
-                    </Button>
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      className="text-gray-600 hover:text-pink-600"
-                    >
-                      <MessageCircle className="w-4 h-4 mr-1" />
-                      评论
-                    </Button>
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      className="text-gray-600 hover:text-pink-600"
-                    >
-                      <Share className="w-4 h-4 mr-1" />
-                      分享
-                    </Button>
-                  </div>
-                  <Badge
-                    variant="secondary"
-                    className="bg-green-100 text-green-700"
-                  >
-                    生成成功
-                  </Badge>
-                </div>
-              </div>
-            </CardContent>
-          </Card>
-        )}
-      </div>
-
-      {/* Footer */}
-      <div className="text-center py-8 text-gray-500 text-sm">
-        <p>让每个人都能轻松将文字转化为视觉故事 💫</p>
-      </div>
-    </div>
-  );
-}
diff --git a/.history/app/page_20250801235011.tsx b/.history/app/page_20250801235011.tsx
deleted file mode 100644
index 2af2fc7..0000000
--- a/.history/app/page_20250801235011.tsx
+++ /dev/null
@@ -1,354 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { Card, CardContent } from "@/components/ui/card";
-import { Button } from "@/components/ui/button";
-import { Textarea } from "@/components/ui/textarea";
-import { Badge } from "@/components/ui/badge";
-import {
-  Sparkles,
-  ImageIcon,
-  Download,
-  Eye,
-  Heart,
-  MessageCircle,
-  Share,
-  Wand2,
-} from "lucide-react";
-import { ComicPanel } from "@/lib/types";
-
-export default function ComicGenerator() {
-  const [content, setContent] = useState("");
-  const [selectedCount, setSelectedCount] = useState(4);
-  const [isGenerating, setIsGenerating] = useState(false);
-  const [isGeneratingImages, setIsGeneratingImages] = useState(false);
-  const [comicPanels, setComicPanels] = useState<ComicPanel[]>([]);
-  const [error, setError] = useState<string | null>(null);
-  const maxLength = 2000;
-
-  const sampleArticle = `春天来了，小明走在回家的路上。突然，他发现路边有一只受伤的小猫。小明毫不犹豫地将小猫抱起，送到了附近的宠物医院。医生说小猫只是轻微擦伤，很快就能康复。从那天起，小明每天都会去医院看望小猫，直到它完全康复。`;
-
-  const handleGenerate = async () => {
-    if (!content.trim()) return;
-
-    setIsGenerating(true);
-    setError(null);
-
-    try {
-      const response = await fetch("/api/generate", {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({
-          content,
-          count: selectedCount,
-        }),
-      });
-
-      const data = await response.json();
-
-      if (!response.ok) {
-        throw new Error(data.error || "生成漫画失败，请稍后再试");
-      }
-
-      setComicPanels(data.comicPanels);
-    } catch (err) {
-      setError(err instanceof Error ? err.message : "生成漫画时发生未知错误");
-      console.error("生成漫画错误:", err);
-    } finally {
-      setIsGenerating(false);
-    }
-  };
-
-  const handleGenerateImages = async () => {
-    // 这个功能将来会实现，目前只是一个占位功能
-    setIsGeneratingImages(true);
-
-    try {
-      // 模拟API调用
-      await new Promise((resolve) => setTimeout(resolve, 2000));
-      alert("此功能尚未实现：将根据所有场景提示词生成完整漫画");
-    } finally {
-      setIsGeneratingImages(false);
-    }
-  };
-
-  const fillSample = () => {
-    setContent(sampleArticle);
-  };
-
-  const getGridLayout = (count: number) => {
-    switch (count) {
-      case 2:
-        return "grid-cols-1 md:grid-cols-2";
-      case 4:
-        return "grid-cols-2";
-      case 6:
-        return "grid-cols-2 md:grid-cols-3";
-      case 8:
-        return "grid-cols-2 md:grid-cols-4";
-      default:
-        return "grid-cols-2";
-    }
-  };
-
-  return (
-    <div className="min-h-screen bg-gradient-to-br from-pink-50 to-orange-50">
-      {/* Header */}
-      <div className="bg-white/80 backdrop-blur-md border-b border-pink-100 sticky top-0 z-10">
-        <div className="max-w-4xl mx-auto px-4 py-4 flex items-center justify-between">
-          <div className="flex items-center gap-2">
-            <div className="w-8 h-8 bg-gradient-to-r from-pink-500 to-orange-500 rounded-lg flex items-center justify-center">
-              <Sparkles className="w-5 h-5 text-white" />
-            </div>
-            <span className="font-bold text-gray-800">漫画生成器</span>
-          </div>
-          <div className="flex items-center gap-4">
-            <Badge variant="secondary" className="bg-pink-100 text-pink-700">
-              Beta
-            </Badge>
-          </div>
-        </div>
-      </div>
-
-      <div className="max-w-4xl mx-auto px-4 py-8">
-        {/* Hero Section */}
-        <div className="text-center mb-12">
-          <h1 className="text-4xl font-bold bg-gradient-to-r from-pink-600 to-orange-600 bg-clip-text text-transparent mb-4">
-            文章转漫画生成器
-          </h1>
-          <p className="text-gray-600 text-lg mb-8">
-            将你的文字变成精彩的漫画故事 ✨
-          </p>
-        </div>
-
-        {/* Input Section */}
-        <Card className="mb-8 border-0 shadow-lg shadow-pink-100/50 bg-white/70 backdrop-blur-sm">
-          <CardContent className="p-6">
-            <div className="space-y-4">
-              <div className="flex items-center justify-between">
-                <label className="text-sm font-medium text-gray-700">
-                  输入你的文章内容或创意
-                </label>
-                <span
-                  className={`text-sm ${
-                    content.length > maxLength
-                      ? "text-red-500"
-                      : "text-gray-500"
-                  }`}
-                >
-                  还可以输入 {maxLength - content.length} 字
-                </span>
-              </div>
-
-              <Textarea
-                value={content}
-                onChange={(e) => setContent(e.target.value)}
-                placeholder="在这里输入你的故事内容或创意，我们会将其转化为精美的漫画剧本..."
-                className="min-h-[120px] resize-none border-pink-200 focus:border-pink-400 focus:ring-pink-400/20"
-                maxLength={maxLength}
-              />
-
-              <div className="flex justify-start">
-                <Button
-                  variant="outline"
-                  size="sm"
-                  onClick={fillSample}
-                  className="border-pink-200 text-pink-600 hover:bg-pink-50 bg-transparent"
-                >
-                  试试示例文章
-                </Button>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-
-        {/* Configuration Section */}
-        <Card className="mb-8 border-0 shadow-lg shadow-pink-100/50 bg-white/70 backdrop-blur-sm">
-          <CardContent className="p-6">
-            <div className="space-y-4">
-              <label className="text-sm font-medium text-gray-700">
-                选择场景数量
-              </label>
-
-              <div className="flex gap-3">
-                {[2, 4, 6, 8].map((count) => (
-                  <Button
-                    key={count}
-                    variant={selectedCount === count ? "default" : "outline"}
-                    size="sm"
-                    onClick={() => setSelectedCount(count)}
-                    className={`rounded-full px-6 ${
-                      selectedCount === count
-                        ? "bg-gradient-to-r from-pink-500 to-orange-500 hover:from-pink-600 hover:to-orange-600"
-                        : "border-pink-200 text-pink-600 hover:bg-pink-50"
-                    }`}
-                  >
-                    {count}个场景
-                  </Button>
-                ))}
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-
-        {/* Generate Button */}
-        <div className="text-center mb-8">
-          <Button
-            onClick={handleGenerate}
-            disabled={!content.trim() || isGenerating}
-            size="lg"
-            className="px-12 py-3 text-lg font-medium rounded-full bg-gradient-to-r from-pink-500 to-orange-500 hover:from-pink-600 hover:to-orange-600 disabled:from-gray-300 disabled:to-gray-300 shadow-lg shadow-pink-200"
-          >
-            {isGenerating ? (
-              <>
-                <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-white mr-2" />
-                生成中...
-              </>
-            ) : (
-              <>
-                <Wand2 className="w-5 h-5 mr-2" />
-                生成漫画剧本
-              </>
-            )}
-          </Button>
-        </div>
-
-        {/* Error Display */}
-        {error && (
-          <Card className="mb-8 border-red-200 shadow-lg shadow-red-100/50 bg-white/70 backdrop-blur-sm">
-            <CardContent className="p-4">
-              <p className="text-red-500 text-center">{error}</p>
-            </CardContent>
-          </Card>
-        )}
-
-        {/* Loading State */}
-        {isGenerating && (
-          <Card className="mb-8 border-0 shadow-lg shadow-pink-100/50 bg-white/70 backdrop-blur-sm">
-            <CardContent className="p-8 text-center">
-              <div className="space-y-4">
-                <div className="animate-pulse">
-                  <div className="w-16 h-16 bg-gradient-to-r from-pink-500 to-orange-500 rounded-full mx-auto mb-4 flex items-center justify-center">
-                    <Sparkles className="w-8 h-8 text-white animate-spin" />
-                  </div>
-                </div>
-                <p className="text-gray-600">正在创作漫画剧本...</p>
-                <p className="text-sm text-gray-500">预计需要30秒</p>
-              </div>
-            </CardContent>
-          </Card>
-        )}
-
-        {/* Results Section */}
-        {comicPanels.length > 0 && !isGenerating && (
-          <Card className="border-0 shadow-lg shadow-pink-100/50 bg-white/70 backdrop-blur-sm">
-            <CardContent className="p-6">
-              <div className="mb-6">
-                <h3 className="text-xl font-semibold text-gray-800 mb-2">
-                  生成结果
-                </h3>
-                <p className="text-gray-600 text-sm">
-                  以下是根据您的内容创作的漫画剧本
-                </p>
-              </div>
-
-              <div className="space-y-8">
-                {comicPanels.map((panel, i) => (
-                  <div
-                    key={panel.id}
-                    className="bg-white rounded-xl shadow-md p-5 border border-pink-100"
-                  >
-                    <div className="flex items-center mb-3">
-                      <div className="bg-gradient-to-r from-pink-500 to-orange-500 text-white rounded-full w-8 h-8 flex items-center justify-center mr-2">
-                        {i + 1}
-                      </div>
-                      <h4 className="font-medium text-gray-800">
-                        场景 {i + 1}
-                      </h4>
-                    </div>
-
-                    <div className="prose prose-pink max-w-none">
-                      <p className="whitespace-pre-wrap text-gray-700">
-                        {panel.content}
-                      </p>
-                    </div>
-                  </div>
-                ))}
-              </div>
-
-              {/* 统一的生成漫画按钮 */}
-              <div className="mt-8 pt-6 border-t border-pink-100 text-center">
-                <Button
-                  onClick={handleGenerateImages}
-                  disabled={isGeneratingImages}
-                  size="lg"
-                  className="px-12 py-3 text-lg font-medium rounded-full bg-gradient-to-r from-orange-400 to-pink-500 hover:from-orange-500 hover:to-pink-600 disabled:opacity-70 shadow-lg shadow-orange-200"
-                >
-                  {isGeneratingImages ? (
-                    <>
-                      <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-white mr-2" />
-                      生成中...
-                    </>
-                  ) : (
-                    <>
-                      <ImageIcon className="w-5 h-5 mr-2" />
-                      根据剧本生成漫画
-                    </>
-                  )}
-                </Button>
-                <p className="text-sm text-gray-500 mt-2">
-                  将基于上述剧本内容生成完整的漫画图像
-                </p>
-              </div>
-
-              {/* Social Actions */}
-              <div className="mt-8 pt-6 border-t border-pink-100">
-                <div className="flex items-center justify-between">
-                  <div className="flex items-center gap-4">
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      className="text-gray-600 hover:text-pink-600"
-                    >
-                      <Heart className="w-4 h-4 mr-1" />
-                      喜欢
-                    </Button>
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      className="text-gray-600 hover:text-pink-600"
-                    >
-                      <MessageCircle className="w-4 h-4 mr-1" />
-                      评论
-                    </Button>
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      className="text-gray-600 hover:text-pink-600"
-                    >
-                      <Share className="w-4 h-4 mr-1" />
-                      分享
-                    </Button>
-                  </div>
-                  <Badge
-                    variant="secondary"
-                    className="bg-green-100 text-green-700"
-                  >
-                    生成成功
-                  </Badge>
-                </div>
-              </div>
-            </CardContent>
-          </Card>
-        )}
-      </div>
-
-      {/* Footer */}
-      <div className="text-center py-8 text-gray-500 text-sm">
-        <p>让每个人都能轻松将文字转化为视觉故事 💫</p>
-      </div>
-    </div>
-  );
-}
diff --git a/.history/app/page_20250801235236.tsx b/.history/app/page_20250801235236.tsx
deleted file mode 100644
index 7d6bfd1..0000000
--- a/.history/app/page_20250801235236.tsx
+++ /dev/null
@@ -1,442 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { Card, CardContent } from "@/components/ui/card";
-import { Button } from "@/components/ui/button";
-import { Textarea } from "@/components/ui/textarea";
-import { Badge } from "@/components/ui/badge";
-import {
-  Sparkles,
-  ImageIcon,
-  Download,
-  Eye,
-  Heart,
-  MessageCircle,
-  Share,
-  Wand2,
-  AlertCircle,
-} from "lucide-react";
-import { ComicPanel } from "@/lib/types";
-
-export default function ComicGenerator() {
-  const [content, setContent] = useState("");
-  const [selectedCount, setSelectedCount] = useState(4);
-  const [isGenerating, setIsGenerating] = useState(false);
-  const [isGeneratingImages, setIsGeneratingImages] = useState(false);
-  const [comicPanels, setComicPanels] = useState<ComicPanel[]>([]);
-  const [error, setError] = useState<string | null>(null);
-  const [imageGenerationError, setImageGenerationError] = useState<
-    string | null
-  >(null);
-  const maxLength = 2000;
-
-  const sampleArticle = `春天来了，小明走在回家的路上。突然，他发现路边有一只受伤的小猫。小明毫不犹豫地将小猫抱起，送到了附近的宠物医院。医生说小猫只是轻微擦伤，很快就能康复。从那天起，小明每天都会去医院看望小猫，直到它完全康复。`;
-
-  const handleGenerate = async () => {
-    if (!content.trim()) return;
-
-    setIsGenerating(true);
-    setError(null);
-
-    try {
-      const response = await fetch("/api/generate", {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({
-          content,
-          count: selectedCount,
-        }),
-      });
-
-      const data = await response.json();
-
-      if (!response.ok) {
-        throw new Error(data.error || "生成漫画失败，请稍后再试");
-      }
-
-      setComicPanels(data.comicPanels);
-    } catch (err) {
-      setError(err instanceof Error ? err.message : "生成漫画时发生未知错误");
-      console.error("生成漫画错误:", err);
-    } finally {
-      setIsGenerating(false);
-    }
-  };
-
-  const handleGenerateImages = async () => {
-    if (comicPanels.length === 0) return;
-
-    setIsGeneratingImages(true);
-    setImageGenerationError(null);
-
-    try {
-      const response = await fetch("/api/generate-images", {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({
-          comicPanels,
-        }),
-      });
-
-      const data = await response.json();
-
-      if (!response.ok) {
-        throw new Error(data.error || "生成漫画图片失败，请稍后再试");
-      }
-
-      // 更新面板，包含新的图像URL
-      setComicPanels(data.comicPanels);
-    } catch (err) {
-      setImageGenerationError(
-        err instanceof Error ? err.message : "生成漫画图片时发生未知错误"
-      );
-      console.error("生成漫画图片错误:", err);
-    } finally {
-      setIsGeneratingImages(false);
-    }
-  };
-
-  const handleDownloadImage = (imageUrl: string, sceneName: string) => {
-    const a = document.createElement("a");
-    a.href = imageUrl;
-    a.download = `漫画场景_${sceneName}.jpg`;
-    a.click();
-  };
-
-  const fillSample = () => {
-    setContent(sampleArticle);
-  };
-
-  const getGridLayout = (count: number) => {
-    switch (count) {
-      case 2:
-        return "grid-cols-1 md:grid-cols-2";
-      case 4:
-        return "grid-cols-2";
-      case 6:
-        return "grid-cols-2 md:grid-cols-3";
-      case 8:
-        return "grid-cols-2 md:grid-cols-4";
-      default:
-        return "grid-cols-2";
-    }
-  };
-
-  return (
-    <div className="min-h-screen bg-gradient-to-br from-pink-50 to-orange-50">
-      {/* Header */}
-      <div className="bg-white/80 backdrop-blur-md border-b border-pink-100 sticky top-0 z-10">
-        <div className="max-w-4xl mx-auto px-4 py-4 flex items-center justify-between">
-          <div className="flex items-center gap-2">
-            <div className="w-8 h-8 bg-gradient-to-r from-pink-500 to-orange-500 rounded-lg flex items-center justify-center">
-              <Sparkles className="w-5 h-5 text-white" />
-            </div>
-            <span className="font-bold text-gray-800">漫画生成器</span>
-          </div>
-          <div className="flex items-center gap-4">
-            <Badge variant="secondary" className="bg-pink-100 text-pink-700">
-              Beta
-            </Badge>
-          </div>
-        </div>
-      </div>
-
-      <div className="max-w-4xl mx-auto px-4 py-8">
-        {/* Hero Section */}
-        <div className="text-center mb-12">
-          <h1 className="text-4xl font-bold bg-gradient-to-r from-pink-600 to-orange-600 bg-clip-text text-transparent mb-4">
-            文章转漫画生成器
-          </h1>
-          <p className="text-gray-600 text-lg mb-8">
-            将你的文字变成精彩的漫画故事 ✨
-          </p>
-        </div>
-
-        {/* Input Section */}
-        <Card className="mb-8 border-0 shadow-lg shadow-pink-100/50 bg-white/70 backdrop-blur-sm">
-          <CardContent className="p-6">
-            <div className="space-y-4">
-              <div className="flex items-center justify-between">
-                <label className="text-sm font-medium text-gray-700">
-                  输入你的文章内容或创意
-                </label>
-                <span
-                  className={`text-sm ${
-                    content.length > maxLength
-                      ? "text-red-500"
-                      : "text-gray-500"
-                  }`}
-                >
-                  还可以输入 {maxLength - content.length} 字
-                </span>
-              </div>
-
-              <Textarea
-                value={content}
-                onChange={(e) => setContent(e.target.value)}
-                placeholder="在这里输入你的故事内容或创意，我们会将其转化为精美的漫画剧本..."
-                className="min-h-[120px] resize-none border-pink-200 focus:border-pink-400 focus:ring-pink-400/20"
-                maxLength={maxLength}
-              />
-
-              <div className="flex justify-start">
-                <Button
-                  variant="outline"
-                  size="sm"
-                  onClick={fillSample}
-                  className="border-pink-200 text-pink-600 hover:bg-pink-50 bg-transparent"
-                >
-                  试试示例文章
-                </Button>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-
-        {/* Configuration Section */}
-        <Card className="mb-8 border-0 shadow-lg shadow-pink-100/50 bg-white/70 backdrop-blur-sm">
-          <CardContent className="p-6">
-            <div className="space-y-4">
-              <label className="text-sm font-medium text-gray-700">
-                选择场景数量
-              </label>
-
-              <div className="flex gap-3">
-                {[2, 4, 6, 8].map((count) => (
-                  <Button
-                    key={count}
-                    variant={selectedCount === count ? "default" : "outline"}
-                    size="sm"
-                    onClick={() => setSelectedCount(count)}
-                    className={`rounded-full px-6 ${
-                      selectedCount === count
-                        ? "bg-gradient-to-r from-pink-500 to-orange-500 hover:from-pink-600 hover:to-orange-600"
-                        : "border-pink-200 text-pink-600 hover:bg-pink-50"
-                    }`}
-                  >
-                    {count}个场景
-                  </Button>
-                ))}
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-
-        {/* Generate Button */}
-        <div className="text-center mb-8">
-          <Button
-            onClick={handleGenerate}
-            disabled={!content.trim() || isGenerating}
-            size="lg"
-            className="px-12 py-3 text-lg font-medium rounded-full bg-gradient-to-r from-pink-500 to-orange-500 hover:from-pink-600 hover:to-orange-600 disabled:from-gray-300 disabled:to-gray-300 shadow-lg shadow-pink-200"
-          >
-            {isGenerating ? (
-              <>
-                <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-white mr-2" />
-                生成中...
-              </>
-            ) : (
-              <>
-                <Wand2 className="w-5 h-5 mr-2" />
-                生成漫画剧本
-              </>
-            )}
-          </Button>
-        </div>
-
-        {/* Error Display */}
-        {error && (
-          <Card className="mb-8 border-red-200 shadow-lg shadow-red-100/50 bg-white/70 backdrop-blur-sm">
-            <CardContent className="p-4">
-              <p className="text-red-500 text-center">{error}</p>
-            </CardContent>
-          </Card>
-        )}
-
-        {/* Image Generation Error Display */}
-        {imageGenerationError && (
-          <Card className="mb-8 border-red-200 shadow-lg shadow-red-100/50 bg-white/70 backdrop-blur-sm">
-            <CardContent className="p-4">
-              <div className="flex items-center justify-center gap-2 text-red-500">
-                <AlertCircle className="w-4 h-4" />
-                <p>{imageGenerationError}</p>
-              </div>
-            </CardContent>
-          </Card>
-        )}
-
-        {/* Loading State */}
-        {isGenerating && (
-          <Card className="mb-8 border-0 shadow-lg shadow-pink-100/50 bg-white/70 backdrop-blur-sm">
-            <CardContent className="p-8 text-center">
-              <div className="space-y-4">
-                <div className="animate-pulse">
-                  <div className="w-16 h-16 bg-gradient-to-r from-pink-500 to-orange-500 rounded-full mx-auto mb-4 flex items-center justify-center">
-                    <Sparkles className="w-8 h-8 text-white animate-spin" />
-                  </div>
-                </div>
-                <p className="text-gray-600">正在创作漫画剧本...</p>
-                <p className="text-sm text-gray-500">预计需要30秒</p>
-              </div>
-            </CardContent>
-          </Card>
-        )}
-
-        {/* Results Section */}
-        {comicPanels.length > 0 && !isGenerating && (
-          <Card className="border-0 shadow-lg shadow-pink-100/50 bg-white/70 backdrop-blur-sm">
-            <CardContent className="p-6">
-              <div className="mb-6">
-                <h3 className="text-xl font-semibold text-gray-800 mb-2">
-                  生成结果
-                </h3>
-                <p className="text-gray-600 text-sm">
-                  以下是根据您的内容创作的漫画剧本
-                </p>
-              </div>
-
-              <div className="space-y-8">
-                {comicPanels.map((panel, i) => (
-                  <div
-                    key={panel.id}
-                    className="bg-white rounded-xl shadow-md p-5 border border-pink-100"
-                  >
-                    <div className="flex items-center mb-3">
-                      <div className="bg-gradient-to-r from-pink-500 to-orange-500 text-white rounded-full w-8 h-8 flex items-center justify-center mr-2">
-                        {i + 1}
-                      </div>
-                      <h4 className="font-medium text-gray-800">
-                        场景 {i + 1}
-                      </h4>
-                    </div>
-
-                    {/* 当有生成图片时显示图片 */}
-                    {panel.imageUrl &&
-                      panel.imageUrl.includes("http") &&
-                      !panel.imageUrl.includes("placehold.co") && (
-                        <div className="mb-4 rounded-lg overflow-hidden">
-                          <img
-                            src={panel.imageUrl}
-                            alt={`场景 ${i + 1}`}
-                            className="w-full h-auto object-contain"
-                          />
-                          {panel.error && (
-                            <p className="text-red-500 text-xs mt-1 flex items-center">
-                              <AlertCircle className="w-3 h-3 mr-1" />
-                              {panel.error}
-                            </p>
-                          )}
-                        </div>
-                      )}
-
-                    <div className="prose prose-pink max-w-none">
-                      <p className="whitespace-pre-wrap text-gray-700">
-                        {panel.content}
-                      </p>
-                    </div>
-
-                    {/* 如果已生成图片，显示下载按钮 */}
-                    {panel.imageUrl &&
-                      panel.imageUrl.includes("http") &&
-                      !panel.imageUrl.includes("placehold.co") && (
-                        <div className="mt-4 flex justify-end">
-                          <Button
-                            size="sm"
-                            variant="outline"
-                            className="text-xs border-pink-200 text-pink-600"
-                            onClick={() =>
-                              handleDownloadImage(
-                                panel.imageUrl,
-                                `场景${i + 1}`
-                              )
-                            }
-                          >
-                            <Download className="w-3 h-3 mr-1" />
-                            下载图片
-                          </Button>
-                        </div>
-                      )}
-                  </div>
-                ))}
-              </div>
-
-              {/* 统一的生成漫画按钮 */}
-              <div className="mt-8 pt-6 border-t border-pink-100 text-center">
-                <Button
-                  onClick={handleGenerateImages}
-                  disabled={isGeneratingImages || comicPanels.length === 0}
-                  size="lg"
-                  className="px-12 py-3 text-lg font-medium rounded-full bg-gradient-to-r from-orange-400 to-pink-500 hover:from-orange-500 hover:to-pink-600 disabled:opacity-70 shadow-lg shadow-orange-200"
-                >
-                  {isGeneratingImages ? (
-                    <>
-                      <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-white mr-2" />
-                      生成中...
-                    </>
-                  ) : (
-                    <>
-                      <ImageIcon className="w-5 h-5 mr-2" />
-                      根据剧本生成漫画
-                    </>
-                  )}
-                </Button>
-                <p className="text-sm text-gray-500 mt-2">
-                  {isGeneratingImages
-                    ? "正在生成漫画图像，请稍候..."
-                    : "将基于上述剧本内容生成完整的漫画图像"}
-                </p>
-              </div>
-
-              {/* Social Actions */}
-              <div className="mt-8 pt-6 border-t border-pink-100">
-                <div className="flex items-center justify-between">
-                  <div className="flex items-center gap-4">
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      className="text-gray-600 hover:text-pink-600"
-                    >
-                      <Heart className="w-4 h-4 mr-1" />
-                      喜欢
-                    </Button>
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      className="text-gray-600 hover:text-pink-600"
-                    >
-                      <MessageCircle className="w-4 h-4 mr-1" />
-                      评论
-                    </Button>
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      className="text-gray-600 hover:text-pink-600"
-                    >
-                      <Share className="w-4 h-4 mr-1" />
-                      分享
-                    </Button>
-                  </div>
-                  <Badge
-                    variant="secondary"
-                    className="bg-green-100 text-green-700"
-                  >
-                    生成成功
-                  </Badge>
-                </div>
-              </div>
-            </CardContent>
-          </Card>
-        )}
-      </div>
-
-      {/* Footer */}
-      <div className="text-center py-8 text-gray-500 text-sm">
-        <p>让每个人都能轻松将文字转化为视觉故事 💫</p>
-      </div>
-    </div>
-  );
-}
diff --git a/.history/app/page_20250801235511.tsx b/.history/app/page_20250801235511.tsx
deleted file mode 100644
index 5fa6511..0000000
--- a/.history/app/page_20250801235511.tsx
+++ /dev/null
@@ -1,504 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { Card, CardContent } from "@/components/ui/card";
-import { Button } from "@/components/ui/button";
-import { Textarea } from "@/components/ui/textarea";
-import { Badge } from "@/components/ui/badge";
-import {
-  Sparkles,
-  ImageIcon,
-  Download,
-  Eye,
-  Heart,
-  MessageCircle,
-  Share,
-  Wand2,
-  AlertCircle,
-} from "lucide-react";
-import { ComicPanel } from "@/lib/types";
-
-// 图片比例选项
-type AspectRatio = {
-  id: string;
-  label: string;
-  value: string; // 实际的宽高比值，如 "1:1"
-};
-
-const aspectRatios: AspectRatio[] = [
-  { id: "1:1", label: "1:1", value: "1:1" },
-  { id: "3:4", label: "3:4", value: "3:4" },
-  { id: "4:3", label: "4:3", value: "4:3" },
-  { id: "16:9", label: "16:9", value: "16:9" },
-  { id: "9:16", label: "9:16", value: "9:16" },
-  { id: "2:3", label: "2:3", value: "2:3" },
-  { id: "3:2", label: "3:2", value: "3:2" },
-  { id: "21:9", label: "21:9", value: "21:9" },
-  { id: "custom", label: "自定义", value: "custom" },
-];
-
-export default function ComicGenerator() {
-  const [content, setContent] = useState("");
-  const [selectedCount, setSelectedCount] = useState(4);
-  const [selectedAspectRatio, setSelectedAspectRatio] =
-    useState<string>("16:9");
-  const [isGenerating, setIsGenerating] = useState(false);
-  const [isGeneratingImages, setIsGeneratingImages] = useState(false);
-  const [comicPanels, setComicPanels] = useState<ComicPanel[]>([]);
-  const [error, setError] = useState<string | null>(null);
-  const [imageGenerationError, setImageGenerationError] = useState<
-    string | null
-  >(null);
-  const maxLength = 2000;
-
-  const sampleArticle = `春天来了，小明走在回家的路上。突然，他发现路边有一只受伤的小猫。小明毫不犹豫地将小猫抱起，送到了附近的宠物医院。医生说小猫只是轻微擦伤，很快就能康复。从那天起，小明每天都会去医院看望小猫，直到它完全康复。`;
-
-  const handleGenerate = async () => {
-    if (!content.trim()) return;
-
-    setIsGenerating(true);
-    setError(null);
-
-    try {
-      const response = await fetch("/api/generate", {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({
-          content,
-          count: selectedCount,
-        }),
-      });
-
-      const data = await response.json();
-
-      if (!response.ok) {
-        throw new Error(data.error || "生成漫画失败，请稍后再试");
-      }
-
-      setComicPanels(data.comicPanels);
-    } catch (err) {
-      setError(err instanceof Error ? err.message : "生成漫画时发生未知错误");
-      console.error("生成漫画错误:", err);
-    } finally {
-      setIsGenerating(false);
-    }
-  };
-
-  const handleGenerateImages = async () => {
-    if (comicPanels.length === 0) return;
-
-    setIsGeneratingImages(true);
-    setImageGenerationError(null);
-
-    try {
-      const response = await fetch("/api/generate-images", {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({
-          comicPanels,
-          aspectRatio: selectedAspectRatio,
-        }),
-      });
-
-      const data = await response.json();
-
-      if (!response.ok) {
-        throw new Error(data.error || "生成漫画图片失败，请稍后再试");
-      }
-
-      // 更新面板，包含新的图像URL
-      setComicPanels(data.comicPanels);
-    } catch (err) {
-      setImageGenerationError(
-        err instanceof Error ? err.message : "生成漫画图片时发生未知错误"
-      );
-      console.error("生成漫画图片错误:", err);
-    } finally {
-      setIsGeneratingImages(false);
-    }
-  };
-
-  const handleDownloadImage = (imageUrl: string, sceneName: string) => {
-    const a = document.createElement("a");
-    a.href = imageUrl;
-    a.download = `漫画场景_${sceneName}.jpg`;
-    a.click();
-  };
-
-  const fillSample = () => {
-    setContent(sampleArticle);
-  };
-
-  const getGridLayout = (count: number) => {
-    switch (count) {
-      case 2:
-        return "grid-cols-1 md:grid-cols-2";
-      case 4:
-        return "grid-cols-2";
-      case 6:
-        return "grid-cols-2 md:grid-cols-3";
-      case 8:
-        return "grid-cols-2 md:grid-cols-4";
-      default:
-        return "grid-cols-2";
-    }
-  };
-
-  return (
-    <div className="min-h-screen bg-gradient-to-br from-pink-50 to-orange-50">
-      {/* Header */}
-      <div className="bg-white/80 backdrop-blur-md border-b border-pink-100 sticky top-0 z-10">
-        <div className="max-w-4xl mx-auto px-4 py-4 flex items-center justify-between">
-          <div className="flex items-center gap-2">
-            <div className="w-8 h-8 bg-gradient-to-r from-pink-500 to-orange-500 rounded-lg flex items-center justify-center">
-              <Sparkles className="w-5 h-5 text-white" />
-            </div>
-            <span className="font-bold text-gray-800">漫画生成器</span>
-          </div>
-          <div className="flex items-center gap-4">
-            <Badge variant="secondary" className="bg-pink-100 text-pink-700">
-              Beta
-            </Badge>
-          </div>
-        </div>
-      </div>
-
-      <div className="max-w-4xl mx-auto px-4 py-8">
-        {/* Hero Section */}
-        <div className="text-center mb-12">
-          <h1 className="text-4xl font-bold bg-gradient-to-r from-pink-600 to-orange-600 bg-clip-text text-transparent mb-4">
-            文章转漫画生成器
-          </h1>
-          <p className="text-gray-600 text-lg mb-8">
-            将你的文字变成精彩的漫画故事 ✨
-          </p>
-        </div>
-
-        {/* Input Section */}
-        <Card className="mb-8 border-0 shadow-lg shadow-pink-100/50 bg-white/70 backdrop-blur-sm">
-          <CardContent className="p-6">
-            <div className="space-y-4">
-              <div className="flex items-center justify-between">
-                <label className="text-sm font-medium text-gray-700">
-                  输入你的文章内容或创意
-                </label>
-                <span
-                  className={`text-sm ${
-                    content.length > maxLength
-                      ? "text-red-500"
-                      : "text-gray-500"
-                  }`}
-                >
-                  还可以输入 {maxLength - content.length} 字
-                </span>
-              </div>
-
-              <Textarea
-                value={content}
-                onChange={(e) => setContent(e.target.value)}
-                placeholder="在这里输入你的故事内容或创意，我们会将其转化为精美的漫画剧本..."
-                className="min-h-[120px] resize-none border-pink-200 focus:border-pink-400 focus:ring-pink-400/20"
-                maxLength={maxLength}
-              />
-
-              <div className="flex justify-start">
-                <Button
-                  variant="outline"
-                  size="sm"
-                  onClick={fillSample}
-                  className="border-pink-200 text-pink-600 hover:bg-pink-50 bg-transparent"
-                >
-                  试试示例文章
-                </Button>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-
-        {/* Configuration Section */}
-        <Card className="mb-8 border-0 shadow-lg shadow-pink-100/50 bg-white/70 backdrop-blur-sm">
-          <CardContent className="p-6">
-            <div className="space-y-6">
-              {/* 场景数量选择 */}
-              <div className="space-y-4">
-                <label className="text-sm font-medium text-gray-700">
-                  选择场景数量
-                </label>
-
-                <div className="flex gap-3 flex-wrap">
-                  {[2, 4, 6, 8].map((count) => (
-                    <Button
-                      key={count}
-                      variant={selectedCount === count ? "default" : "outline"}
-                      size="sm"
-                      onClick={() => setSelectedCount(count)}
-                      className={`rounded-full px-6 ${
-                        selectedCount === count
-                          ? "bg-gradient-to-r from-pink-500 to-orange-500 hover:from-pink-600 hover:to-orange-600"
-                          : "border-pink-200 text-pink-600 hover:bg-pink-50"
-                      }`}
-                    >
-                      {count}个场景
-                    </Button>
-                  ))}
-                </div>
-              </div>
-
-              {/* 图片比例选择 */}
-              <div className="space-y-4">
-                <label className="text-sm font-medium text-gray-700">
-                  图片比例
-                </label>
-
-                <div className="flex gap-3 flex-wrap">
-                  {aspectRatios.map((ratio) => (
-                    <Button
-                      key={ratio.id}
-                      variant={
-                        selectedAspectRatio === ratio.value
-                          ? "default"
-                          : "outline"
-                      }
-                      size="sm"
-                      onClick={() => setSelectedAspectRatio(ratio.value)}
-                      className={`rounded-full px-4 ${
-                        selectedAspectRatio === ratio.value
-                          ? "bg-gradient-to-r from-blue-500 to-indigo-500 hover:from-blue-600 hover:to-indigo-600"
-                          : "border-blue-200 text-blue-600 hover:bg-blue-50"
-                      }`}
-                    >
-                      {ratio.label}
-                    </Button>
-                  ))}
-                </div>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-
-        {/* Generate Button */}
-        <div className="text-center mb-8">
-          <Button
-            onClick={handleGenerate}
-            disabled={!content.trim() || isGenerating}
-            size="lg"
-            className="px-12 py-3 text-lg font-medium rounded-full bg-gradient-to-r from-pink-500 to-orange-500 hover:from-pink-600 hover:to-orange-600 disabled:from-gray-300 disabled:to-gray-300 shadow-lg shadow-pink-200"
-          >
-            {isGenerating ? (
-              <>
-                <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-white mr-2" />
-                生成中...
-              </>
-            ) : (
-              <>
-                <Wand2 className="w-5 h-5 mr-2" />
-                生成漫画剧本
-              </>
-            )}
-          </Button>
-        </div>
-
-        {/* Error Display */}
-        {error && (
-          <Card className="mb-8 border-red-200 shadow-lg shadow-red-100/50 bg-white/70 backdrop-blur-sm">
-            <CardContent className="p-4">
-              <p className="text-red-500 text-center">{error}</p>
-            </CardContent>
-          </Card>
-        )}
-
-        {/* Image Generation Error Display */}
-        {imageGenerationError && (
-          <Card className="mb-8 border-red-200 shadow-lg shadow-red-100/50 bg-white/70 backdrop-blur-sm">
-            <CardContent className="p-4">
-              <div className="flex items-center justify-center gap-2 text-red-500">
-                <AlertCircle className="w-4 h-4" />
-                <p>{imageGenerationError}</p>
-              </div>
-            </CardContent>
-          </Card>
-        )}
-
-        {/* Loading State */}
-        {isGenerating && (
-          <Card className="mb-8 border-0 shadow-lg shadow-pink-100/50 bg-white/70 backdrop-blur-sm">
-            <CardContent className="p-8 text-center">
-              <div className="space-y-4">
-                <div className="animate-pulse">
-                  <div className="w-16 h-16 bg-gradient-to-r from-pink-500 to-orange-500 rounded-full mx-auto mb-4 flex items-center justify-center">
-                    <Sparkles className="w-8 h-8 text-white animate-spin" />
-                  </div>
-                </div>
-                <p className="text-gray-600">正在创作漫画剧本...</p>
-                <p className="text-sm text-gray-500">预计需要30秒</p>
-              </div>
-            </CardContent>
-          </Card>
-        )}
-
-        {/* Results Section */}
-        {comicPanels.length > 0 && !isGenerating && (
-          <Card className="border-0 shadow-lg shadow-pink-100/50 bg-white/70 backdrop-blur-sm">
-            <CardContent className="p-6">
-              <div className="mb-6">
-                <h3 className="text-xl font-semibold text-gray-800 mb-2">
-                  生成结果
-                </h3>
-                <p className="text-gray-600 text-sm">
-                  以下是根据您的内容创作的漫画剧本
-                </p>
-              </div>
-
-              <div className="space-y-8">
-                {comicPanels.map((panel, i) => (
-                  <div
-                    key={panel.id}
-                    className="bg-white rounded-xl shadow-md p-5 border border-pink-100"
-                  >
-                    <div className="flex items-center mb-3">
-                      <div className="bg-gradient-to-r from-pink-500 to-orange-500 text-white rounded-full w-8 h-8 flex items-center justify-center mr-2">
-                        {i + 1}
-                      </div>
-                      <h4 className="font-medium text-gray-800">
-                        场景 {i + 1}
-                      </h4>
-                    </div>
-
-                    {/* 当有生成图片时显示图片 */}
-                    {panel.imageUrl &&
-                      panel.imageUrl.includes("http") &&
-                      !panel.imageUrl.includes("placehold.co") && (
-                        <div className="mb-4 rounded-lg overflow-hidden">
-                          <img
-                            src={panel.imageUrl}
-                            alt={`场景 ${i + 1}`}
-                            className="w-full h-auto object-contain"
-                          />
-                          {panel.error && (
-                            <p className="text-red-500 text-xs mt-1 flex items-center">
-                              <AlertCircle className="w-3 h-3 mr-1" />
-                              {panel.error}
-                            </p>
-                          )}
-                        </div>
-                      )}
-
-                    <div className="prose prose-pink max-w-none">
-                      <p className="whitespace-pre-wrap text-gray-700">
-                        {panel.content}
-                      </p>
-                    </div>
-
-                    {/* 如果已生成图片，显示下载按钮 */}
-                    {panel.imageUrl &&
-                      panel.imageUrl.includes("http") &&
-                      !panel.imageUrl.includes("placehold.co") && (
-                        <div className="mt-4 flex justify-end">
-                          <Button
-                            size="sm"
-                            variant="outline"
-                            className="text-xs border-pink-200 text-pink-600"
-                            onClick={() =>
-                              handleDownloadImage(
-                                panel.imageUrl,
-                                `场景${i + 1}`
-                              )
-                            }
-                          >
-                            <Download className="w-3 h-3 mr-1" />
-                            下载图片
-                          </Button>
-                        </div>
-                      )}
-                  </div>
-                ))}
-              </div>
-
-              {/* 统一的生成漫画按钮 */}
-              <div className="mt-8 pt-6 border-t border-pink-100 text-center">
-                <div className="flex flex-col items-center">
-                  <div className="text-sm text-gray-600 mb-4">
-                    已选择图片比例:{" "}
-                    <span className="font-medium text-blue-600">
-                      {selectedAspectRatio}
-                    </span>
-                  </div>
-                  <Button
-                    onClick={handleGenerateImages}
-                    disabled={isGeneratingImages || comicPanels.length === 0}
-                    size="lg"
-                    className="px-12 py-3 text-lg font-medium rounded-full bg-gradient-to-r from-orange-400 to-pink-500 hover:from-orange-500 hover:to-pink-600 disabled:opacity-70 shadow-lg shadow-orange-200"
-                  >
-                    {isGeneratingImages ? (
-                      <>
-                        <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-white mr-2" />
-                        生成中...
-                      </>
-                    ) : (
-                      <>
-                        <ImageIcon className="w-5 h-5 mr-2" />
-                        根据剧本生成漫画
-                      </>
-                    )}
-                  </Button>
-                  <p className="text-sm text-gray-500 mt-2">
-                    {isGeneratingImages
-                      ? "正在生成漫画图像，请稍候..."
-                      : "将基于上述剧本内容生成完整的漫画图像"}
-                  </p>
-                </div>
-              </div>
-
-              {/* Social Actions */}
-              <div className="mt-8 pt-6 border-t border-pink-100">
-                <div className="flex items-center justify-between">
-                  <div className="flex items-center gap-4">
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      className="text-gray-600 hover:text-pink-600"
-                    >
-                      <Heart className="w-4 h-4 mr-1" />
-                      喜欢
-                    </Button>
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      className="text-gray-600 hover:text-pink-600"
-                    >
-                      <MessageCircle className="w-4 h-4 mr-1" />
-                      评论
-                    </Button>
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      className="text-gray-600 hover:text-pink-600"
-                    >
-                      <Share className="w-4 h-4 mr-1" />
-                      分享
-                    </Button>
-                  </div>
-                  <Badge
-                    variant="secondary"
-                    className="bg-green-100 text-green-700"
-                  >
-                    生成成功
-                  </Badge>
-                </div>
-              </div>
-            </CardContent>
-          </Card>
-        )}
-      </div>
-
-      {/* Footer */}
-      <div className="text-center py-8 text-gray-500 text-sm">
-        <p>让每个人都能轻松将文字转化为视觉故事 💫</p>
-      </div>
-    </div>
-  );
-}
diff --git a/.history/app/page_20250802001913.tsx b/.history/app/page_20250802001913.tsx
deleted file mode 100644
index eeda563..0000000
--- a/.history/app/page_20250802001913.tsx
+++ /dev/null
@@ -1,652 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { Card, CardContent } from "@/components/ui/card";
-import { Button } from "@/components/ui/button";
-import { Textarea } from "@/components/ui/textarea";
-import { Badge } from "@/components/ui/badge";
-import { Slider } from "@/components/ui/slider";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import {
-  Sparkles,
-  ImageIcon,
-  Download,
-  Eye,
-  Heart,
-  MessageCircle,
-  Share,
-  Wand2,
-  AlertCircle,
-  ChevronDown,
-  ChevronRight,
-} from "lucide-react";
-import { ComicPanel } from "@/lib/types";
-
-// 图片比例选项
-type AspectRatio = {
-  id: string;
-  label: string;
-  value: string; // 实际的宽高比值，如 "1:1"
-};
-
-const aspectRatios: AspectRatio[] = [
-  { id: "1:1", label: "1:1", value: "1:1" },
-  { id: "3:4", label: "3:4", value: "3:4" },
-  { id: "4:3", label: "4:3", value: "4:3" },
-  { id: "16:9", label: "16:9", value: "16:9" },
-  { id: "9:16", label: "9:16", value: "9:16" },
-  { id: "2:3", label: "2:3", value: "2:3" },
-  { id: "3:2", label: "3:2", value: "3:2" },
-  { id: "21:9", label: "21:9", value: "21:9" },
-  { id: "custom", label: "自定义", value: "custom" },
-];
-
-export default function ComicGenerator() {
-  const [content, setContent] = useState("");
-  const [selectedCount, setSelectedCount] = useState(4);
-  const [selectedAspectRatio, setSelectedAspectRatio] =
-    useState<string>("16:9");
-  const [isGenerating, setIsGenerating] = useState(false);
-  const [isGeneratingImages, setIsGeneratingImages] = useState(false);
-  const [comicPanels, setComicPanels] = useState<ComicPanel[]>([]);
-  const [error, setError] = useState<string | null>(null);
-  const [imageGenerationError, setImageGenerationError] = useState<
-    string | null
-  >(null);
-  const [showAdvancedSettings, setShowAdvancedSettings] = useState(false);
-  const [guidanceScale, setGuidanceScale] = useState(2.5); // 默认值为2.5
-  const [seedMode, setSeedMode] = useState<"random" | "fixed">("random"); // 默认为随机
-  const [seedValue, setSeedValue] = useState<number>(1234);
-  const maxLength = 2000;
-
-  const sampleArticle = `春天来了，小明走在回家的路上。突然，他发现路边有一只受伤的小猫。小明毫不犹豫地将小猫抱起，送到了附近的宠物医院。医生说小猫只是轻微擦伤，很快就能康复。从那天起，小明每天都会去医院看望小猫，直到它完全康复。`;
-
-  const handleGenerate = async () => {
-    if (!content.trim()) return;
-
-    setIsGenerating(true);
-    setError(null);
-
-    try {
-      const response = await fetch("/api/generate", {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({
-          content,
-          count: selectedCount,
-        }),
-      });
-
-      const data = await response.json();
-
-      if (!response.ok) {
-        throw new Error(data.error || "生成漫画失败，请稍后再试");
-      }
-
-      setComicPanels(data.comicPanels);
-    } catch (err) {
-      setError(err instanceof Error ? err.message : "生成漫画时发生未知错误");
-      console.error("生成漫画错误:", err);
-    } finally {
-      setIsGenerating(false);
-    }
-  };
-
-  const handleGenerateImages = async () => {
-    if (comicPanels.length === 0) return;
-
-    setIsGeneratingImages(true);
-    setImageGenerationError(null);
-
-    // 确定要使用的种子值
-    const seed = seedMode === "random" ? -1 : seedValue;
-
-    try {
-      const response = await fetch("/api/generate-images", {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({
-          comicPanels,
-          aspectRatio: selectedAspectRatio,
-          seed: seed,
-          guidance_scale: guidanceScale,
-        }),
-      });
-
-      const data = await response.json();
-
-      if (!response.ok) {
-        throw new Error(data.error || "生成漫画图片失败，请稍后再试");
-      }
-
-      // 更新面板，包含新的图像URL
-      setComicPanels(data.comicPanels);
-    } catch (err) {
-      setImageGenerationError(
-        err instanceof Error ? err.message : "生成漫画图片时发生未知错误"
-      );
-      console.error("生成漫画图片错误:", err);
-    } finally {
-      setIsGeneratingImages(false);
-    }
-  };
-
-  const handleDownloadImage = (imageUrl: string, sceneName: string) => {
-    const a = document.createElement("a");
-    a.href = imageUrl;
-    a.download = `漫画场景_${sceneName}.jpg`;
-    a.click();
-  };
-
-  const fillSample = () => {
-    setContent(sampleArticle);
-  };
-
-  const getGridLayout = (count: number) => {
-    switch (count) {
-      case 2:
-        return "grid-cols-1 md:grid-cols-2";
-      case 4:
-        return "grid-cols-2";
-      case 6:
-        return "grid-cols-2 md:grid-cols-3";
-      case 8:
-        return "grid-cols-2 md:grid-cols-4";
-      default:
-        return "grid-cols-2";
-    }
-  };
-
-  const handleSeedValueChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const value = parseInt(e.target.value);
-    // 确保值在合法范围内 [-1, 2147483647]
-    if (!isNaN(value) && value >= -1 && value <= 2147483647) {
-      setSeedValue(value);
-    }
-  };
-
-  return (
-    <div className="min-h-screen bg-gradient-to-br from-pink-50 to-orange-50">
-      {/* Header */}
-      <div className="bg-white/80 backdrop-blur-md border-b border-pink-100 sticky top-0 z-10">
-        <div className="max-w-4xl mx-auto px-4 py-4 flex items-center justify-between">
-          <div className="flex items-center gap-2">
-            <div className="w-8 h-8 bg-gradient-to-r from-pink-500 to-orange-500 rounded-lg flex items-center justify-center">
-              <Sparkles className="w-5 h-5 text-white" />
-            </div>
-            <span className="font-bold text-gray-800">漫画生成器</span>
-          </div>
-          <div className="flex items-center gap-4">
-            <Badge variant="secondary" className="bg-pink-100 text-pink-700">
-              Beta
-            </Badge>
-          </div>
-        </div>
-      </div>
-
-      <div className="max-w-4xl mx-auto px-4 py-8">
-        {/* Hero Section */}
-        <div className="text-center mb-12">
-          <h1 className="text-4xl font-bold bg-gradient-to-r from-pink-600 to-orange-600 bg-clip-text text-transparent mb-4">
-            文章转漫画生成器
-          </h1>
-          <p className="text-gray-600 text-lg mb-8">
-            将你的文字变成精彩的漫画故事 ✨
-          </p>
-        </div>
-
-        {/* Input Section */}
-        <Card className="mb-8 border-0 shadow-lg shadow-pink-100/50 bg-white/70 backdrop-blur-sm">
-          <CardContent className="p-6">
-            <div className="space-y-4">
-              <div className="flex items-center justify-between">
-                <label className="text-sm font-medium text-gray-700">
-                  输入你的文章内容或创意
-                </label>
-                <span
-                  className={`text-sm ${
-                    content.length > maxLength
-                      ? "text-red-500"
-                      : "text-gray-500"
-                  }`}
-                >
-                  还可以输入 {maxLength - content.length} 字
-                </span>
-              </div>
-
-              <Textarea
-                value={content}
-                onChange={(e) => setContent(e.target.value)}
-                placeholder="在这里输入你的故事内容或创意，我们会将其转化为精美的漫画剧本..."
-                className="min-h-[120px] resize-none border-pink-200 focus:border-pink-400 focus:ring-pink-400/20"
-                maxLength={maxLength}
-              />
-
-              <div className="flex justify-start">
-                <Button
-                  variant="outline"
-                  size="sm"
-                  onClick={fillSample}
-                  className="border-pink-200 text-pink-600 hover:bg-pink-50 bg-transparent"
-                >
-                  试试示例文章
-                </Button>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-
-        {/* Configuration Section */}
-        <Card className="mb-8 border-0 shadow-lg shadow-pink-100/50 bg-white/70 backdrop-blur-sm">
-          <CardContent className="p-6">
-            <div className="space-y-6">
-              {/* 场景数量选择 */}
-              <div className="space-y-4">
-                <label className="text-sm font-medium text-gray-700">
-                  选择场景数量
-                </label>
-
-                <div className="flex gap-3 flex-wrap">
-                  {[2, 4, 6, 8].map((count) => (
-                    <Button
-                      key={count}
-                      variant={selectedCount === count ? "default" : "outline"}
-                      size="sm"
-                      onClick={() => setSelectedCount(count)}
-                      className={`rounded-full px-6 ${
-                        selectedCount === count
-                          ? "bg-gradient-to-r from-pink-500 to-orange-500 hover:from-pink-600 hover:to-orange-600"
-                          : "border-pink-200 text-pink-600 hover:bg-pink-50"
-                      }`}
-                    >
-                      {count}个场景
-                    </Button>
-                  ))}
-                </div>
-              </div>
-
-              {/* 图片比例选择 */}
-              <div className="space-y-4">
-                <label className="text-sm font-medium text-gray-700">
-                  图片比例
-                </label>
-
-                <div className="flex gap-3 flex-wrap">
-                  {aspectRatios.map((ratio) => (
-                    <Button
-                      key={ratio.id}
-                      variant={
-                        selectedAspectRatio === ratio.value
-                          ? "default"
-                          : "outline"
-                      }
-                      size="sm"
-                      onClick={() => setSelectedAspectRatio(ratio.value)}
-                      className={`rounded-full px-4 ${
-                        selectedAspectRatio === ratio.value
-                          ? "bg-gradient-to-r from-blue-500 to-indigo-500 hover:from-blue-600 hover:to-indigo-600"
-                          : "border-blue-200 text-blue-600 hover:bg-blue-50"
-                      }`}
-                    >
-                      {ratio.label}
-                    </Button>
-                  ))}
-                </div>
-              </div>
-
-              {/* 高级设置部分 */}
-              <div className="border-t border-gray-100 pt-4">
-                <div
-                  className="flex items-center cursor-pointer text-gray-700 hover:text-gray-900"
-                  onClick={() => setShowAdvancedSettings(!showAdvancedSettings)}
-                >
-                  {showAdvancedSettings ? (
-                    <ChevronDown className="w-5 h-5 mr-2" />
-                  ) : (
-                    <ChevronRight className="w-5 h-5 mr-2" />
-                  )}
-                  <span className="font-medium">高级设置</span>
-                </div>
-
-                {showAdvancedSettings && (
-                  <div className="mt-4 space-y-6 pl-2">
-                    {/* 文本权重设置 */}
-                    <div className="space-y-4">
-                      <div>
-                        <Label className="text-sm font-medium text-gray-700">
-                          文本权重
-                        </Label>
-                        <p className="text-xs text-gray-500 mt-1">
-                          显示文字（创意描述）对结果图像的影响程度，数值越大图像越接近文字描述，数值越小图像可能更具创造性
-                        </p>
-                      </div>
-
-                      <div className="flex flex-col space-y-2">
-                        <div className="grid grid-cols-11 text-xs text-gray-500 px-2">
-                          <div>1</div>
-                          <div>2</div>
-                          <div>3</div>
-                          <div>4</div>
-                          <div>5</div>
-                          <div>6</div>
-                          <div>7</div>
-                          <div>8</div>
-                          <div>9</div>
-                          <div>10</div>
-                        </div>
-                        <Slider
-                          value={[guidanceScale]}
-                          min={1}
-                          max={10}
-                          step={0.1}
-                          onValueChange={(value) => setGuidanceScale(value[0])}
-                          className="w-full"
-                        />
-                        <div className="text-right text-sm text-blue-600 font-medium">
-                          {guidanceScale.toFixed(1)}
-                        </div>
-                      </div>
-                    </div>
-
-                    {/* 种子数设置 */}
-                    <div className="space-y-4">
-                      <div>
-                        <Label className="text-sm font-medium text-gray-700">
-                          种子数
-                        </Label>
-                        <p className="text-xs text-gray-500 mt-1">
-                          用于物理定扩初始状态的基值，若随机种子相同并且其他参数相同，则生成图片大概率一致
-                        </p>
-                      </div>
-
-                      <RadioGroup
-                        value={seedMode}
-                        onValueChange={(value) =>
-                          setSeedMode(value as "random" | "fixed")
-                        }
-                        className="flex gap-4"
-                      >
-                        <div className="flex items-center space-x-2">
-                          <RadioGroupItem value="random" id="random-seed" />
-                          <Label
-                            htmlFor="random-seed"
-                            className="cursor-pointer"
-                          >
-                            随机
-                          </Label>
-                        </div>
-                        <div className="flex items-center space-x-2">
-                          <RadioGroupItem value="fixed" id="fixed-seed" />
-                          <Label
-                            htmlFor="fixed-seed"
-                            className="cursor-pointer"
-                          >
-                            固定
-                          </Label>
-                        </div>
-                      </RadioGroup>
-
-                      {seedMode === "fixed" && (
-                        <Input
-                          type="number"
-                          value={seedValue}
-                          onChange={handleSeedValueChange}
-                          min={-1}
-                          max={2147483647}
-                          className="max-w-[200px]"
-                        />
-                      )}
-                    </div>
-                  </div>
-                )}
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-
-        {/* Generate Button */}
-        <div className="text-center mb-8">
-          <Button
-            onClick={handleGenerate}
-            disabled={!content.trim() || isGenerating}
-            size="lg"
-            className="px-12 py-3 text-lg font-medium rounded-full bg-gradient-to-r from-pink-500 to-orange-500 hover:from-pink-600 hover:to-orange-600 disabled:from-gray-300 disabled:to-gray-300 shadow-lg shadow-pink-200"
-          >
-            {isGenerating ? (
-              <>
-                <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-white mr-2" />
-                生成中...
-              </>
-            ) : (
-              <>
-                <Wand2 className="w-5 h-5 mr-2" />
-                生成漫画剧本
-              </>
-            )}
-          </Button>
-        </div>
-
-        {/* Error Display */}
-        {error && (
-          <Card className="mb-8 border-red-200 shadow-lg shadow-red-100/50 bg-white/70 backdrop-blur-sm">
-            <CardContent className="p-4">
-              <p className="text-red-500 text-center">{error}</p>
-            </CardContent>
-          </Card>
-        )}
-
-        {/* Image Generation Error Display */}
-        {imageGenerationError && (
-          <Card className="mb-8 border-red-200 shadow-lg shadow-red-100/50 bg-white/70 backdrop-blur-sm">
-            <CardContent className="p-4">
-              <div className="flex items-center justify-center gap-2 text-red-500">
-                <AlertCircle className="w-4 h-4" />
-                <p>{imageGenerationError}</p>
-              </div>
-            </CardContent>
-          </Card>
-        )}
-
-        {/* Loading State */}
-        {isGenerating && (
-          <Card className="mb-8 border-0 shadow-lg shadow-pink-100/50 bg-white/70 backdrop-blur-sm">
-            <CardContent className="p-8 text-center">
-              <div className="space-y-4">
-                <div className="animate-pulse">
-                  <div className="w-16 h-16 bg-gradient-to-r from-pink-500 to-orange-500 rounded-full mx-auto mb-4 flex items-center justify-center">
-                    <Sparkles className="w-8 h-8 text-white animate-spin" />
-                  </div>
-                </div>
-                <p className="text-gray-600">正在创作漫画剧本...</p>
-                <p className="text-sm text-gray-500">预计需要30秒</p>
-              </div>
-            </CardContent>
-          </Card>
-        )}
-
-        {/* Results Section */}
-        {comicPanels.length > 0 && !isGenerating && (
-          <Card className="border-0 shadow-lg shadow-pink-100/50 bg-white/70 backdrop-blur-sm">
-            <CardContent className="p-6">
-              <div className="mb-6">
-                <h3 className="text-xl font-semibold text-gray-800 mb-2">
-                  生成结果
-                </h3>
-                <p className="text-gray-600 text-sm">
-                  以下是根据您的内容创作的漫画剧本
-                </p>
-              </div>
-
-              <div className="space-y-8">
-                {comicPanels.map((panel, i) => (
-                  <div
-                    key={panel.id}
-                    className="bg-white rounded-xl shadow-md p-5 border border-pink-100"
-                  >
-                    <div className="flex items-center mb-3">
-                      <div className="bg-gradient-to-r from-pink-500 to-orange-500 text-white rounded-full w-8 h-8 flex items-center justify-center mr-2">
-                        {i + 1}
-                      </div>
-                      <h4 className="font-medium text-gray-800">
-                        场景 {i + 1}
-                      </h4>
-                    </div>
-
-                    {/* 当有生成图片时显示图片 */}
-                    {panel.imageUrl &&
-                      panel.imageUrl.includes("http") &&
-                      !panel.imageUrl.includes("placehold.co") && (
-                        <div className="mb-4 rounded-lg overflow-hidden">
-                          <img
-                            src={panel.imageUrl}
-                            alt={`场景 ${i + 1}`}
-                            className="w-full h-auto object-contain"
-                          />
-                          {panel.error && (
-                            <p className="text-red-500 text-xs mt-1 flex items-center">
-                              <AlertCircle className="w-3 h-3 mr-1" />
-                              {panel.error}
-                            </p>
-                          )}
-                        </div>
-                      )}
-
-                    <div className="prose prose-pink max-w-none">
-                      <p className="whitespace-pre-wrap text-gray-700">
-                        {panel.content}
-                      </p>
-                    </div>
-
-                    {/* 如果已生成图片，显示下载按钮 */}
-                    {panel.imageUrl &&
-                      panel.imageUrl.includes("http") &&
-                      !panel.imageUrl.includes("placehold.co") && (
-                        <div className="mt-4 flex justify-end">
-                          <Button
-                            size="sm"
-                            variant="outline"
-                            className="text-xs border-pink-200 text-pink-600"
-                            onClick={() =>
-                              handleDownloadImage(
-                                panel.imageUrl,
-                                `场景${i + 1}`
-                              )
-                            }
-                          >
-                            <Download className="w-3 h-3 mr-1" />
-                            下载图片
-                          </Button>
-                        </div>
-                      )}
-                  </div>
-                ))}
-              </div>
-
-              {/* 统一的生成漫画按钮 */}
-              <div className="mt-8 pt-6 border-t border-pink-100 text-center">
-                <div className="flex flex-col items-center">
-                  <div className="text-sm text-gray-600 mb-4 flex flex-wrap justify-center gap-2">
-                    <span>
-                      已选择图片比例:{" "}
-                      <span className="font-medium text-blue-600">
-                        {selectedAspectRatio}
-                      </span>
-                    </span>
-                    {showAdvancedSettings && (
-                      <>
-                        <span>
-                          · 文本权重:{" "}
-                          <span className="font-medium text-blue-600">
-                            {guidanceScale.toFixed(1)}
-                          </span>
-                        </span>
-                        <span>
-                          · 种子数:{" "}
-                          <span className="font-medium text-blue-600">
-                            {seedMode === "random" ? "随机" : seedValue}
-                          </span>
-                        </span>
-                      </>
-                    )}
-                  </div>
-                  <Button
-                    onClick={handleGenerateImages}
-                    disabled={isGeneratingImages || comicPanels.length === 0}
-                    size="lg"
-                    className="px-12 py-3 text-lg font-medium rounded-full bg-gradient-to-r from-orange-400 to-pink-500 hover:from-orange-500 hover:to-pink-600 disabled:opacity-70 shadow-lg shadow-orange-200"
-                  >
-                    {isGeneratingImages ? (
-                      <>
-                        <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-white mr-2" />
-                        生成中...
-                      </>
-                    ) : (
-                      <>
-                        <ImageIcon className="w-5 h-5 mr-2" />
-                        根据剧本生成漫画
-                      </>
-                    )}
-                  </Button>
-                  <p className="text-sm text-gray-500 mt-2">
-                    {isGeneratingImages
-                      ? "正在生成漫画图像，请稍候..."
-                      : "将基于上述剧本内容生成完整的漫画图像"}
-                  </p>
-                </div>
-              </div>
-
-              {/* Social Actions */}
-              <div className="mt-8 pt-6 border-t border-pink-100">
-                <div className="flex items-center justify-between">
-                  <div className="flex items-center gap-4">
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      className="text-gray-600 hover:text-pink-600"
-                    >
-                      <Heart className="w-4 h-4 mr-1" />
-                      喜欢
-                    </Button>
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      className="text-gray-600 hover:text-pink-600"
-                    >
-                      <MessageCircle className="w-4 h-4 mr-1" />
-                      评论
-                    </Button>
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      className="text-gray-600 hover:text-pink-600"
-                    >
-                      <Share className="w-4 h-4 mr-1" />
-                      分享
-                    </Button>
-                  </div>
-                  <Badge
-                    variant="secondary"
-                    className="bg-green-100 text-green-700"
-                  >
-                    生成成功
-                  </Badge>
-                </div>
-              </div>
-            </CardContent>
-          </Card>
-        )}
-      </div>
-
-      {/* Footer */}
-      <div className="text-center py-8 text-gray-500 text-sm">
-        <p>让每个人都能轻松将文字转化为视觉故事 💫</p>
-      </div>
-    </div>
-  );
-}
diff --git a/.history/app/page_20250802002308.tsx b/.history/app/page_20250802002308.tsx
deleted file mode 100644
index e68041f..0000000
--- a/.history/app/page_20250802002308.tsx
+++ /dev/null
@@ -1,711 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { Card, CardContent } from "@/components/ui/card";
-import { Button } from "@/components/ui/button";
-import { Textarea } from "@/components/ui/textarea";
-import { Badge } from "@/components/ui/badge";
-import { Slider } from "@/components/ui/slider";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import {
-  Sparkles,
-  ImageIcon,
-  Download,
-  Eye,
-  Heart,
-  MessageCircle,
-  Share,
-  Wand2,
-  AlertCircle,
-  ChevronDown,
-  ChevronRight,
-  Sliders,
-  Dice,
-  SlidersHorizontal,
-} from "lucide-react";
-import { ComicPanel } from "@/lib/types";
-
-// 图片比例选项
-type AspectRatio = {
-  id: string;
-  label: string;
-  value: string; // 实际的宽高比值，如 "1:1"
-};
-
-const aspectRatios: AspectRatio[] = [
-  { id: "1:1", label: "1:1", value: "1:1" },
-  { id: "3:4", label: "3:4", value: "3:4" },
-  { id: "4:3", label: "4:3", value: "4:3" },
-  { id: "16:9", label: "16:9", value: "16:9" },
-  { id: "9:16", label: "9:16", value: "9:16" },
-  { id: "2:3", label: "2:3", value: "2:3" },
-  { id: "3:2", label: "3:2", value: "3:2" },
-  { id: "21:9", label: "21:9", value: "21:9" },
-  { id: "custom", label: "自定义", value: "custom" },
-];
-
-export default function ComicGenerator() {
-  const [content, setContent] = useState("");
-  const [selectedCount, setSelectedCount] = useState(4);
-  const [selectedAspectRatio, setSelectedAspectRatio] =
-    useState<string>("16:9");
-  const [isGenerating, setIsGenerating] = useState(false);
-  const [isGeneratingImages, setIsGeneratingImages] = useState(false);
-  const [comicPanels, setComicPanels] = useState<ComicPanel[]>([]);
-  const [error, setError] = useState<string | null>(null);
-  const [imageGenerationError, setImageGenerationError] = useState<
-    string | null
-  >(null);
-  const [showAdvancedSettings, setShowAdvancedSettings] = useState(false);
-  const [guidanceScale, setGuidanceScale] = useState(2.5); // 默认值为2.5
-  const [seedMode, setSeedMode] = useState<"random" | "fixed">("random"); // 默认为随机
-  const [seedValue, setSeedValue] = useState<number>(1234);
-  const maxLength = 2000;
-
-  const sampleArticle = `春天来了，小明走在回家的路上。突然，他发现路边有一只受伤的小猫。小明毫不犹豫地将小猫抱起，送到了附近的宠物医院。医生说小猫只是轻微擦伤，很快就能康复。从那天起，小明每天都会去医院看望小猫，直到它完全康复。`;
-
-  const handleGenerate = async () => {
-    if (!content.trim()) return;
-
-    setIsGenerating(true);
-    setError(null);
-
-    try {
-      const response = await fetch("/api/generate", {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({
-          content,
-          count: selectedCount,
-        }),
-      });
-
-      const data = await response.json();
-
-      if (!response.ok) {
-        throw new Error(data.error || "生成漫画失败，请稍后再试");
-      }
-
-      setComicPanels(data.comicPanels);
-    } catch (err) {
-      setError(err instanceof Error ? err.message : "生成漫画时发生未知错误");
-      console.error("生成漫画错误:", err);
-    } finally {
-      setIsGenerating(false);
-    }
-  };
-
-  const handleGenerateImages = async () => {
-    if (comicPanels.length === 0) return;
-
-    setIsGeneratingImages(true);
-    setImageGenerationError(null);
-
-    // 确定要使用的种子值
-    const seed = seedMode === "random" ? -1 : seedValue;
-
-    try {
-      const response = await fetch("/api/generate-images", {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({
-          comicPanels,
-          aspectRatio: selectedAspectRatio,
-          seed: seed,
-          guidance_scale: guidanceScale,
-        }),
-      });
-
-      const data = await response.json();
-
-      if (!response.ok) {
-        throw new Error(data.error || "生成漫画图片失败，请稍后再试");
-      }
-
-      // 更新面板，包含新的图像URL
-      setComicPanels(data.comicPanels);
-    } catch (err) {
-      setImageGenerationError(
-        err instanceof Error ? err.message : "生成漫画图片时发生未知错误"
-      );
-      console.error("生成漫画图片错误:", err);
-    } finally {
-      setIsGeneratingImages(false);
-    }
-  };
-
-  const handleDownloadImage = (imageUrl: string, sceneName: string) => {
-    const a = document.createElement("a");
-    a.href = imageUrl;
-    a.download = `漫画场景_${sceneName}.jpg`;
-    a.click();
-  };
-
-  const fillSample = () => {
-    setContent(sampleArticle);
-  };
-
-  const getGridLayout = (count: number) => {
-    switch (count) {
-      case 2:
-        return "grid-cols-1 md:grid-cols-2";
-      case 4:
-        return "grid-cols-2";
-      case 6:
-        return "grid-cols-2 md:grid-cols-3";
-      case 8:
-        return "grid-cols-2 md:grid-cols-4";
-      default:
-        return "grid-cols-2";
-    }
-  };
-
-  const handleSeedValueChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const value = parseInt(e.target.value);
-    // 确保值在合法范围内 [-1, 2147483647]
-    if (!isNaN(value) && value >= -1 && value <= 2147483647) {
-      setSeedValue(value);
-    }
-  };
-
-  return (
-    <div className="min-h-screen bg-gradient-to-br from-pink-50 to-orange-50">
-      {/* Header */}
-      <div className="bg-white/80 backdrop-blur-md border-b border-pink-100 sticky top-0 z-10">
-        <div className="max-w-4xl mx-auto px-4 py-4 flex items-center justify-between">
-          <div className="flex items-center gap-2">
-            <div className="w-8 h-8 bg-gradient-to-r from-pink-500 to-orange-500 rounded-lg flex items-center justify-center">
-              <Sparkles className="w-5 h-5 text-white" />
-            </div>
-            <span className="font-bold text-gray-800">漫画生成器</span>
-          </div>
-          <div className="flex items-center gap-4">
-            <Badge variant="secondary" className="bg-pink-100 text-pink-700">
-              Beta
-            </Badge>
-          </div>
-        </div>
-      </div>
-
-      <div className="max-w-4xl mx-auto px-4 py-8">
-        {/* Hero Section */}
-        <div className="text-center mb-12">
-          <h1 className="text-4xl font-bold bg-gradient-to-r from-pink-600 to-orange-600 bg-clip-text text-transparent mb-4">
-            文章转漫画生成器
-          </h1>
-          <p className="text-gray-600 text-lg mb-8">
-            将你的文字变成精彩的漫画故事 ✨
-          </p>
-        </div>
-
-        {/* Input Section */}
-        <Card className="mb-8 border-0 shadow-lg shadow-pink-100/50 bg-white/70 backdrop-blur-sm">
-          <CardContent className="p-6">
-            <div className="space-y-4">
-              <div className="flex items-center justify-between">
-                <label className="text-sm font-medium text-gray-700">
-                  输入你的文章内容或创意
-                </label>
-                <span
-                  className={`text-sm ${
-                    content.length > maxLength
-                      ? "text-red-500"
-                      : "text-gray-500"
-                  }`}
-                >
-                  还可以输入 {maxLength - content.length} 字
-                </span>
-              </div>
-
-              <Textarea
-                value={content}
-                onChange={(e) => setContent(e.target.value)}
-                placeholder="在这里输入你的故事内容或创意，我们会将其转化为精美的漫画剧本..."
-                className="min-h-[120px] resize-none border-pink-200 focus:border-pink-400 focus:ring-pink-400/20"
-                maxLength={maxLength}
-              />
-
-              <div className="flex justify-start">
-                <Button
-                  variant="outline"
-                  size="sm"
-                  onClick={fillSample}
-                  className="border-pink-200 text-pink-600 hover:bg-pink-50 bg-transparent"
-                >
-                  试试示例文章
-                </Button>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-
-        {/* Configuration Section */}
-        <Card className="mb-8 border-0 shadow-lg shadow-pink-100/50 bg-white/70 backdrop-blur-sm">
-          <CardContent className="p-6">
-            <div className="space-y-6">
-              {/* 场景数量选择 */}
-              <div className="space-y-4">
-                <label className="text-sm font-medium text-gray-700 flex items-center gap-1.5">
-                  <ImageIcon className="w-4 h-4 text-pink-500" />
-                  选择场景数量
-                </label>
-
-                <div className="flex gap-3 flex-wrap">
-                  {[2, 4, 6, 8].map((count) => (
-                    <Button
-                      key={count}
-                      variant={selectedCount === count ? "default" : "outline"}
-                      size="sm"
-                      onClick={() => setSelectedCount(count)}
-                      className={`rounded-full px-6 ${
-                        selectedCount === count
-                          ? "bg-gradient-to-r from-pink-500 to-orange-500 hover:from-pink-600 hover:to-orange-600"
-                          : "border-pink-200 text-pink-600 hover:bg-pink-50"
-                      }`}
-                    >
-                      {count}个场景
-                    </Button>
-                  ))}
-                </div>
-              </div>
-
-              {/* 图片比例选择 */}
-              <div className="space-y-4">
-                <label className="text-sm font-medium text-gray-700 flex items-center gap-1.5">
-                  <SlidersHorizontal className="w-4 h-4 text-blue-500" />
-                  图片比例
-                </label>
-
-                <div className="flex gap-3 flex-wrap">
-                  {aspectRatios.map((ratio) => (
-                    <Button
-                      key={ratio.id}
-                      variant={
-                        selectedAspectRatio === ratio.value
-                          ? "default"
-                          : "outline"
-                      }
-                      size="sm"
-                      onClick={() => setSelectedAspectRatio(ratio.value)}
-                      className={`rounded-full px-4 ${
-                        selectedAspectRatio === ratio.value
-                          ? "bg-gradient-to-r from-blue-500 to-indigo-500 hover:from-blue-600 hover:to-indigo-600"
-                          : "border-blue-200 text-blue-600 hover:bg-blue-50"
-                      }`}
-                    >
-                      {ratio.label}
-                    </Button>
-                  ))}
-                </div>
-              </div>
-
-              {/* 高级设置部分 */}
-              <div className="mt-2">
-                <button
-                  className={`w-full flex items-center justify-between p-4 text-left rounded-xl transition-all duration-200 ${
-                    showAdvancedSettings
-                      ? "bg-gradient-to-r from-purple-50 to-indigo-50 shadow-sm"
-                      : "bg-white/50 hover:bg-white/80"
-                  }`}
-                  onClick={() => setShowAdvancedSettings(!showAdvancedSettings)}
-                >
-                  <div className="flex items-center gap-2">
-                    <div
-                      className={`rounded-full p-1.5 ${
-                        showAdvancedSettings
-                          ? "bg-gradient-to-r from-purple-500 to-indigo-500"
-                          : "bg-gray-100"
-                      }`}
-                    >
-                      <Sliders
-                        className={`w-4 h-4 ${
-                          showAdvancedSettings ? "text-white" : "text-gray-500"
-                        }`}
-                      />
-                    </div>
-                    <span
-                      className={`font-medium ${
-                        showAdvancedSettings
-                          ? "text-indigo-700"
-                          : "text-gray-700"
-                      }`}
-                    >
-                      高级设置
-                    </span>
-                  </div>
-                  {showAdvancedSettings ? (
-                    <ChevronDown className="w-5 h-5 text-indigo-500" />
-                  ) : (
-                    <ChevronRight className="w-5 h-5 text-gray-400" />
-                  )}
-                </button>
-
-                {showAdvancedSettings && (
-                  <div className="mt-4 pt-2 pb-1 px-4 bg-white/60 backdrop-blur-sm rounded-xl border border-indigo-100 shadow-sm space-y-6 transition-all duration-300 ease-in-out">
-                    {/* 文本权重设置 */}
-                    <div className="space-y-3 py-3 border-b border-indigo-50">
-                      <div className="flex items-center gap-2">
-                        <div className="rounded-full bg-gradient-to-r from-indigo-400 to-purple-400 p-1.5">
-                          <SlidersHorizontal className="w-3.5 h-3.5 text-white" />
-                        </div>
-                        <Label className="text-sm font-medium text-indigo-800">
-                          文本权重
-                        </Label>
-                      </div>
-                      <p className="text-xs text-gray-500 pl-7">
-                        显示文字（创意描述）对结果图像的影响程度，数值越大图像越接近文字描述，数值越小图像可能更具创造性
-                      </p>
-
-                      <div className="flex flex-col space-y-2 pl-7 pr-2">
-                        <div className="flex justify-between text-xs text-indigo-400 px-1">
-                          <span>更具创造性</span>
-                          <span>更贴近描述</span>
-                        </div>
-                        <div className="bg-gradient-to-r from-indigo-50 to-indigo-100 rounded-full p-1">
-                          <Slider
-                            value={[guidanceScale]}
-                            min={1}
-                            max={10}
-                            step={0.1}
-                            onValueChange={(value) =>
-                              setGuidanceScale(value[0])
-                            }
-                            className="w-full"
-                          />
-                        </div>
-                        <div className="flex justify-between text-xs text-gray-400 px-1">
-                          <span>1.0</span>
-                          <span>10.0</span>
-                        </div>
-                        <div className="text-right text-sm font-medium bg-gradient-to-r from-indigo-500 to-purple-600 bg-clip-text text-transparent">
-                          {guidanceScale.toFixed(1)}
-                        </div>
-                      </div>
-                    </div>
-
-                    {/* 种子数设置 */}
-                    <div className="space-y-3 py-1 pb-3">
-                      <div className="flex items-center gap-2">
-                        <div className="rounded-full bg-gradient-to-r from-indigo-400 to-purple-400 p-1.5">
-                          <Dice className="w-3.5 h-3.5 text-white" />
-                        </div>
-                        <Label className="text-sm font-medium text-indigo-800">
-                          种子数
-                        </Label>
-                      </div>
-                      <p className="text-xs text-gray-500 pl-7">
-                        用于物理定扩初始状态的基值，若随机种子相同并且其他参数相同，则生成图片大概率一致
-                      </p>
-
-                      <RadioGroup
-                        value={seedMode}
-                        onValueChange={(value) =>
-                          setSeedMode(value as "random" | "fixed")
-                        }
-                        className="flex gap-4 pl-7 mt-2"
-                      >
-                        <div className="flex items-center space-x-2">
-                          <RadioGroupItem
-                            value="random"
-                            id="random-seed"
-                            className="text-indigo-600 border-indigo-400"
-                          />
-                          <Label
-                            htmlFor="random-seed"
-                            className="cursor-pointer text-sm text-indigo-700"
-                          >
-                            随机
-                          </Label>
-                        </div>
-                        <div className="flex items-center space-x-2">
-                          <RadioGroupItem
-                            value="fixed"
-                            id="fixed-seed"
-                            className="text-indigo-600 border-indigo-400"
-                          />
-                          <Label
-                            htmlFor="fixed-seed"
-                            className="cursor-pointer text-sm text-indigo-700"
-                          >
-                            固定
-                          </Label>
-                        </div>
-                      </RadioGroup>
-
-                      {seedMode === "fixed" && (
-                        <div className="pl-7 mt-2">
-                          <Input
-                            type="number"
-                            value={seedValue}
-                            onChange={handleSeedValueChange}
-                            min={-1}
-                            max={2147483647}
-                            className="max-w-[200px] border-indigo-200 focus:border-indigo-400 focus:ring-indigo-300/20"
-                          />
-                        </div>
-                      )}
-                    </div>
-                  </div>
-                )}
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-
-        {/* Generate Button */}
-        <div className="text-center mb-8">
-          <Button
-            onClick={handleGenerate}
-            disabled={!content.trim() || isGenerating}
-            size="lg"
-            className="px-12 py-3 text-lg font-medium rounded-full bg-gradient-to-r from-pink-500 to-orange-500 hover:from-pink-600 hover:to-orange-600 disabled:from-gray-300 disabled:to-gray-300 shadow-lg shadow-pink-200"
-          >
-            {isGenerating ? (
-              <>
-                <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-white mr-2" />
-                生成中...
-              </>
-            ) : (
-              <>
-                <Wand2 className="w-5 h-5 mr-2" />
-                生成漫画剧本
-              </>
-            )}
-          </Button>
-        </div>
-
-        {/* Error Display */}
-        {error && (
-          <Card className="mb-8 border-red-200 shadow-lg shadow-red-100/50 bg-white/70 backdrop-blur-sm">
-            <CardContent className="p-4">
-              <p className="text-red-500 text-center">{error}</p>
-            </CardContent>
-          </Card>
-        )}
-
-        {/* Image Generation Error Display */}
-        {imageGenerationError && (
-          <Card className="mb-8 border-red-200 shadow-lg shadow-red-100/50 bg-white/70 backdrop-blur-sm">
-            <CardContent className="p-4">
-              <div className="flex items-center justify-center gap-2 text-red-500">
-                <AlertCircle className="w-4 h-4" />
-                <p>{imageGenerationError}</p>
-              </div>
-            </CardContent>
-          </Card>
-        )}
-
-        {/* Loading State */}
-        {isGenerating && (
-          <Card className="mb-8 border-0 shadow-lg shadow-pink-100/50 bg-white/70 backdrop-blur-sm">
-            <CardContent className="p-8 text-center">
-              <div className="space-y-4">
-                <div className="animate-pulse">
-                  <div className="w-16 h-16 bg-gradient-to-r from-pink-500 to-orange-500 rounded-full mx-auto mb-4 flex items-center justify-center">
-                    <Sparkles className="w-8 h-8 text-white animate-spin" />
-                  </div>
-                </div>
-                <p className="text-gray-600">正在创作漫画剧本...</p>
-                <p className="text-sm text-gray-500">预计需要30秒</p>
-              </div>
-            </CardContent>
-          </Card>
-        )}
-
-        {/* Results Section */}
-        {comicPanels.length > 0 && !isGenerating && (
-          <Card className="border-0 shadow-lg shadow-pink-100/50 bg-white/70 backdrop-blur-sm">
-            <CardContent className="p-6">
-              <div className="mb-6">
-                <h3 className="text-xl font-semibold text-gray-800 mb-2">
-                  生成结果
-                </h3>
-                <p className="text-gray-600 text-sm">
-                  以下是根据您的内容创作的漫画剧本
-                </p>
-              </div>
-
-              <div className="space-y-8">
-                {comicPanels.map((panel, i) => (
-                  <div
-                    key={panel.id}
-                    className="bg-white rounded-xl shadow-md p-5 border border-pink-100"
-                  >
-                    <div className="flex items-center mb-3">
-                      <div className="bg-gradient-to-r from-pink-500 to-orange-500 text-white rounded-full w-8 h-8 flex items-center justify-center mr-2">
-                        {i + 1}
-                      </div>
-                      <h4 className="font-medium text-gray-800">
-                        场景 {i + 1}
-                      </h4>
-                    </div>
-
-                    {/* 当有生成图片时显示图片 */}
-                    {panel.imageUrl &&
-                      panel.imageUrl.includes("http") &&
-                      !panel.imageUrl.includes("placehold.co") && (
-                        <div className="mb-4 rounded-lg overflow-hidden">
-                          <img
-                            src={panel.imageUrl}
-                            alt={`场景 ${i + 1}`}
-                            className="w-full h-auto object-contain"
-                          />
-                          {panel.error && (
-                            <p className="text-red-500 text-xs mt-1 flex items-center">
-                              <AlertCircle className="w-3 h-3 mr-1" />
-                              {panel.error}
-                            </p>
-                          )}
-                        </div>
-                      )}
-
-                    <div className="prose prose-pink max-w-none">
-                      <p className="whitespace-pre-wrap text-gray-700">
-                        {panel.content}
-                      </p>
-                    </div>
-
-                    {/* 如果已生成图片，显示下载按钮 */}
-                    {panel.imageUrl &&
-                      panel.imageUrl.includes("http") &&
-                      !panel.imageUrl.includes("placehold.co") && (
-                        <div className="mt-4 flex justify-end">
-                          <Button
-                            size="sm"
-                            variant="outline"
-                            className="text-xs border-pink-200 text-pink-600"
-                            onClick={() =>
-                              handleDownloadImage(
-                                panel.imageUrl,
-                                `场景${i + 1}`
-                              )
-                            }
-                          >
-                            <Download className="w-3 h-3 mr-1" />
-                            下载图片
-                          </Button>
-                        </div>
-                      )}
-                  </div>
-                ))}
-              </div>
-
-              {/* 统一的生成漫画按钮 */}
-              <div className="mt-8 pt-6 border-t border-pink-100 text-center">
-                <div className="flex flex-col items-center">
-                  <div className="mb-4 bg-white/90 rounded-xl px-4 py-2 shadow-sm border border-pink-100">
-                    <div className="text-sm text-gray-600 flex flex-wrap justify-center gap-x-4 gap-y-2">
-                      <div className="flex items-center gap-1">
-                        <SlidersHorizontal className="w-3.5 h-3.5 text-blue-500" />
-                        <span>
-                          图片比例:{" "}
-                          <span className="font-medium text-blue-600">
-                            {selectedAspectRatio}
-                          </span>
-                        </span>
-                      </div>
-                      {showAdvancedSettings && (
-                        <>
-                          <div className="flex items-center gap-1">
-                            <SlidersHorizontal className="w-3.5 h-3.5 text-indigo-500" />
-                            <span>
-                              文本权重:{" "}
-                              <span className="font-medium text-indigo-600">
-                                {guidanceScale.toFixed(1)}
-                              </span>
-                            </span>
-                          </div>
-                          <div className="flex items-center gap-1">
-                            <Dice className="w-3.5 h-3.5 text-purple-500" />
-                            <span>
-                              种子数:{" "}
-                              <span className="font-medium text-purple-600">
-                                {seedMode === "random" ? "随机" : seedValue}
-                              </span>
-                            </span>
-                          </div>
-                        </>
-                      )}
-                    </div>
-                  </div>
-                  <Button
-                    onClick={handleGenerateImages}
-                    disabled={isGeneratingImages || comicPanels.length === 0}
-                    size="lg"
-                    className="px-12 py-3 text-lg font-medium rounded-full bg-gradient-to-r from-orange-400 to-pink-500 hover:from-orange-500 hover:to-pink-600 disabled:opacity-70 shadow-lg shadow-orange-200"
-                  >
-                    {isGeneratingImages ? (
-                      <>
-                        <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-white mr-2" />
-                        生成中...
-                      </>
-                    ) : (
-                      <>
-                        <ImageIcon className="w-5 h-5 mr-2" />
-                        根据剧本生成漫画
-                      </>
-                    )}
-                  </Button>
-                  <p className="text-sm text-gray-500 mt-2">
-                    {isGeneratingImages
-                      ? "正在生成漫画图像，请稍候..."
-                      : "将基于上述剧本内容生成完整的漫画图像"}
-                  </p>
-                </div>
-              </div>
-
-              {/* Social Actions */}
-              <div className="mt-8 pt-6 border-t border-pink-100">
-                <div className="flex items-center justify-between">
-                  <div className="flex items-center gap-4">
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      className="text-gray-600 hover:text-pink-600"
-                    >
-                      <Heart className="w-4 h-4 mr-1" />
-                      喜欢
-                    </Button>
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      className="text-gray-600 hover:text-pink-600"
-                    >
-                      <MessageCircle className="w-4 h-4 mr-1" />
-                      评论
-                    </Button>
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      className="text-gray-600 hover:text-pink-600"
-                    >
-                      <Share className="w-4 h-4 mr-1" />
-                      分享
-                    </Button>
-                  </div>
-                  <Badge
-                    variant="secondary"
-                    className="bg-green-100 text-green-700"
-                  >
-                    生成成功
-                  </Badge>
-                </div>
-              </div>
-            </CardContent>
-          </Card>
-        )}
-      </div>
-
-      {/* Footer */}
-      <div className="text-center py-8 text-gray-500 text-sm">
-        <p>让每个人都能轻松将文字转化为视觉故事 💫</p>
-      </div>
-    </div>
-  );
-}
diff --git a/.history/app/page_20250802002325.tsx b/.history/app/page_20250802002325.tsx
deleted file mode 100644
index 1b7610c..0000000
--- a/.history/app/page_20250802002325.tsx
+++ /dev/null
@@ -1,711 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { Card, CardContent } from "@/components/ui/card";
-import { Button } from "@/components/ui/button";
-import { Textarea } from "@/components/ui/textarea";
-import { Badge } from "@/components/ui/badge";
-import { Slider } from "@/components/ui/slider";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import {
-  Sparkles,
-  ImageIcon,
-  Download,
-  Eye,
-  Heart,
-  MessageCircle,
-  Share,
-  Wand2,
-  AlertCircle,
-  ChevronDown,
-  ChevronRight,
-  Sliders,
-  Dices, // 替换 Dice 为 Dices
-  SlidersHorizontal,
-} from "lucide-react";
-import { ComicPanel } from "@/lib/types";
-
-// 图片比例选项
-type AspectRatio = {
-  id: string;
-  label: string;
-  value: string; // 实际的宽高比值，如 "1:1"
-};
-
-const aspectRatios: AspectRatio[] = [
-  { id: "1:1", label: "1:1", value: "1:1" },
-  { id: "3:4", label: "3:4", value: "3:4" },
-  { id: "4:3", label: "4:3", value: "4:3" },
-  { id: "16:9", label: "16:9", value: "16:9" },
-  { id: "9:16", label: "9:16", value: "9:16" },
-  { id: "2:3", label: "2:3", value: "2:3" },
-  { id: "3:2", label: "3:2", value: "3:2" },
-  { id: "21:9", label: "21:9", value: "21:9" },
-  { id: "custom", label: "自定义", value: "custom" },
-];
-
-export default function ComicGenerator() {
-  const [content, setContent] = useState("");
-  const [selectedCount, setSelectedCount] = useState(4);
-  const [selectedAspectRatio, setSelectedAspectRatio] =
-    useState<string>("16:9");
-  const [isGenerating, setIsGenerating] = useState(false);
-  const [isGeneratingImages, setIsGeneratingImages] = useState(false);
-  const [comicPanels, setComicPanels] = useState<ComicPanel[]>([]);
-  const [error, setError] = useState<string | null>(null);
-  const [imageGenerationError, setImageGenerationError] = useState<
-    string | null
-  >(null);
-  const [showAdvancedSettings, setShowAdvancedSettings] = useState(false);
-  const [guidanceScale, setGuidanceScale] = useState(2.5); // 默认值为2.5
-  const [seedMode, setSeedMode] = useState<"random" | "fixed">("random"); // 默认为随机
-  const [seedValue, setSeedValue] = useState<number>(1234);
-  const maxLength = 2000;
-
-  const sampleArticle = `春天来了，小明走在回家的路上。突然，他发现路边有一只受伤的小猫。小明毫不犹豫地将小猫抱起，送到了附近的宠物医院。医生说小猫只是轻微擦伤，很快就能康复。从那天起，小明每天都会去医院看望小猫，直到它完全康复。`;
-
-  const handleGenerate = async () => {
-    if (!content.trim()) return;
-
-    setIsGenerating(true);
-    setError(null);
-
-    try {
-      const response = await fetch("/api/generate", {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({
-          content,
-          count: selectedCount,
-        }),
-      });
-
-      const data = await response.json();
-
-      if (!response.ok) {
-        throw new Error(data.error || "生成漫画失败，请稍后再试");
-      }
-
-      setComicPanels(data.comicPanels);
-    } catch (err) {
-      setError(err instanceof Error ? err.message : "生成漫画时发生未知错误");
-      console.error("生成漫画错误:", err);
-    } finally {
-      setIsGenerating(false);
-    }
-  };
-
-  const handleGenerateImages = async () => {
-    if (comicPanels.length === 0) return;
-
-    setIsGeneratingImages(true);
-    setImageGenerationError(null);
-
-    // 确定要使用的种子值
-    const seed = seedMode === "random" ? -1 : seedValue;
-
-    try {
-      const response = await fetch("/api/generate-images", {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({
-          comicPanels,
-          aspectRatio: selectedAspectRatio,
-          seed: seed,
-          guidance_scale: guidanceScale,
-        }),
-      });
-
-      const data = await response.json();
-
-      if (!response.ok) {
-        throw new Error(data.error || "生成漫画图片失败，请稍后再试");
-      }
-
-      // 更新面板，包含新的图像URL
-      setComicPanels(data.comicPanels);
-    } catch (err) {
-      setImageGenerationError(
-        err instanceof Error ? err.message : "生成漫画图片时发生未知错误"
-      );
-      console.error("生成漫画图片错误:", err);
-    } finally {
-      setIsGeneratingImages(false);
-    }
-  };
-
-  const handleDownloadImage = (imageUrl: string, sceneName: string) => {
-    const a = document.createElement("a");
-    a.href = imageUrl;
-    a.download = `漫画场景_${sceneName}.jpg`;
-    a.click();
-  };
-
-  const fillSample = () => {
-    setContent(sampleArticle);
-  };
-
-  const getGridLayout = (count: number) => {
-    switch (count) {
-      case 2:
-        return "grid-cols-1 md:grid-cols-2";
-      case 4:
-        return "grid-cols-2";
-      case 6:
-        return "grid-cols-2 md:grid-cols-3";
-      case 8:
-        return "grid-cols-2 md:grid-cols-4";
-      default:
-        return "grid-cols-2";
-    }
-  };
-
-  const handleSeedValueChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const value = parseInt(e.target.value);
-    // 确保值在合法范围内 [-1, 2147483647]
-    if (!isNaN(value) && value >= -1 && value <= 2147483647) {
-      setSeedValue(value);
-    }
-  };
-
-  return (
-    <div className="min-h-screen bg-gradient-to-br from-pink-50 to-orange-50">
-      {/* Header */}
-      <div className="bg-white/80 backdrop-blur-md border-b border-pink-100 sticky top-0 z-10">
-        <div className="max-w-4xl mx-auto px-4 py-4 flex items-center justify-between">
-          <div className="flex items-center gap-2">
-            <div className="w-8 h-8 bg-gradient-to-r from-pink-500 to-orange-500 rounded-lg flex items-center justify-center">
-              <Sparkles className="w-5 h-5 text-white" />
-            </div>
-            <span className="font-bold text-gray-800">漫画生成器</span>
-          </div>
-          <div className="flex items-center gap-4">
-            <Badge variant="secondary" className="bg-pink-100 text-pink-700">
-              Beta
-            </Badge>
-          </div>
-        </div>
-      </div>
-
-      <div className="max-w-4xl mx-auto px-4 py-8">
-        {/* Hero Section */}
-        <div className="text-center mb-12">
-          <h1 className="text-4xl font-bold bg-gradient-to-r from-pink-600 to-orange-600 bg-clip-text text-transparent mb-4">
-            文章转漫画生成器
-          </h1>
-          <p className="text-gray-600 text-lg mb-8">
-            将你的文字变成精彩的漫画故事 ✨
-          </p>
-        </div>
-
-        {/* Input Section */}
-        <Card className="mb-8 border-0 shadow-lg shadow-pink-100/50 bg-white/70 backdrop-blur-sm">
-          <CardContent className="p-6">
-            <div className="space-y-4">
-              <div className="flex items-center justify-between">
-                <label className="text-sm font-medium text-gray-700">
-                  输入你的文章内容或创意
-                </label>
-                <span
-                  className={`text-sm ${
-                    content.length > maxLength
-                      ? "text-red-500"
-                      : "text-gray-500"
-                  }`}
-                >
-                  还可以输入 {maxLength - content.length} 字
-                </span>
-              </div>
-
-              <Textarea
-                value={content}
-                onChange={(e) => setContent(e.target.value)}
-                placeholder="在这里输入你的故事内容或创意，我们会将其转化为精美的漫画剧本..."
-                className="min-h-[120px] resize-none border-pink-200 focus:border-pink-400 focus:ring-pink-400/20"
-                maxLength={maxLength}
-              />
-
-              <div className="flex justify-start">
-                <Button
-                  variant="outline"
-                  size="sm"
-                  onClick={fillSample}
-                  className="border-pink-200 text-pink-600 hover:bg-pink-50 bg-transparent"
-                >
-                  试试示例文章
-                </Button>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-
-        {/* Configuration Section */}
-        <Card className="mb-8 border-0 shadow-lg shadow-pink-100/50 bg-white/70 backdrop-blur-sm">
-          <CardContent className="p-6">
-            <div className="space-y-6">
-              {/* 场景数量选择 */}
-              <div className="space-y-4">
-                <label className="text-sm font-medium text-gray-700 flex items-center gap-1.5">
-                  <ImageIcon className="w-4 h-4 text-pink-500" />
-                  选择场景数量
-                </label>
-
-                <div className="flex gap-3 flex-wrap">
-                  {[2, 4, 6, 8].map((count) => (
-                    <Button
-                      key={count}
-                      variant={selectedCount === count ? "default" : "outline"}
-                      size="sm"
-                      onClick={() => setSelectedCount(count)}
-                      className={`rounded-full px-6 ${
-                        selectedCount === count
-                          ? "bg-gradient-to-r from-pink-500 to-orange-500 hover:from-pink-600 hover:to-orange-600"
-                          : "border-pink-200 text-pink-600 hover:bg-pink-50"
-                      }`}
-                    >
-                      {count}个场景
-                    </Button>
-                  ))}
-                </div>
-              </div>
-
-              {/* 图片比例选择 */}
-              <div className="space-y-4">
-                <label className="text-sm font-medium text-gray-700 flex items-center gap-1.5">
-                  <SlidersHorizontal className="w-4 h-4 text-blue-500" />
-                  图片比例
-                </label>
-
-                <div className="flex gap-3 flex-wrap">
-                  {aspectRatios.map((ratio) => (
-                    <Button
-                      key={ratio.id}
-                      variant={
-                        selectedAspectRatio === ratio.value
-                          ? "default"
-                          : "outline"
-                      }
-                      size="sm"
-                      onClick={() => setSelectedAspectRatio(ratio.value)}
-                      className={`rounded-full px-4 ${
-                        selectedAspectRatio === ratio.value
-                          ? "bg-gradient-to-r from-blue-500 to-indigo-500 hover:from-blue-600 hover:to-indigo-600"
-                          : "border-blue-200 text-blue-600 hover:bg-blue-50"
-                      }`}
-                    >
-                      {ratio.label}
-                    </Button>
-                  ))}
-                </div>
-              </div>
-
-              {/* 高级设置部分 */}
-              <div className="mt-2">
-                <button
-                  className={`w-full flex items-center justify-between p-4 text-left rounded-xl transition-all duration-200 ${
-                    showAdvancedSettings
-                      ? "bg-gradient-to-r from-purple-50 to-indigo-50 shadow-sm"
-                      : "bg-white/50 hover:bg-white/80"
-                  }`}
-                  onClick={() => setShowAdvancedSettings(!showAdvancedSettings)}
-                >
-                  <div className="flex items-center gap-2">
-                    <div
-                      className={`rounded-full p-1.5 ${
-                        showAdvancedSettings
-                          ? "bg-gradient-to-r from-purple-500 to-indigo-500"
-                          : "bg-gray-100"
-                      }`}
-                    >
-                      <Sliders
-                        className={`w-4 h-4 ${
-                          showAdvancedSettings ? "text-white" : "text-gray-500"
-                        }`}
-                      />
-                    </div>
-                    <span
-                      className={`font-medium ${
-                        showAdvancedSettings
-                          ? "text-indigo-700"
-                          : "text-gray-700"
-                      }`}
-                    >
-                      高级设置
-                    </span>
-                  </div>
-                  {showAdvancedSettings ? (
-                    <ChevronDown className="w-5 h-5 text-indigo-500" />
-                  ) : (
-                    <ChevronRight className="w-5 h-5 text-gray-400" />
-                  )}
-                </button>
-
-                {showAdvancedSettings && (
-                  <div className="mt-4 pt-2 pb-1 px-4 bg-white/60 backdrop-blur-sm rounded-xl border border-indigo-100 shadow-sm space-y-6 transition-all duration-300 ease-in-out">
-                    {/* 文本权重设置 */}
-                    <div className="space-y-3 py-3 border-b border-indigo-50">
-                      <div className="flex items-center gap-2">
-                        <div className="rounded-full bg-gradient-to-r from-indigo-400 to-purple-400 p-1.5">
-                          <SlidersHorizontal className="w-3.5 h-3.5 text-white" />
-                        </div>
-                        <Label className="text-sm font-medium text-indigo-800">
-                          文本权重
-                        </Label>
-                      </div>
-                      <p className="text-xs text-gray-500 pl-7">
-                        显示文字（创意描述）对结果图像的影响程度，数值越大图像越接近文字描述，数值越小图像可能更具创造性
-                      </p>
-
-                      <div className="flex flex-col space-y-2 pl-7 pr-2">
-                        <div className="flex justify-between text-xs text-indigo-400 px-1">
-                          <span>更具创造性</span>
-                          <span>更贴近描述</span>
-                        </div>
-                        <div className="bg-gradient-to-r from-indigo-50 to-indigo-100 rounded-full p-1">
-                          <Slider
-                            value={[guidanceScale]}
-                            min={1}
-                            max={10}
-                            step={0.1}
-                            onValueChange={(value) =>
-                              setGuidanceScale(value[0])
-                            }
-                            className="w-full"
-                          />
-                        </div>
-                        <div className="flex justify-between text-xs text-gray-400 px-1">
-                          <span>1.0</span>
-                          <span>10.0</span>
-                        </div>
-                        <div className="text-right text-sm font-medium bg-gradient-to-r from-indigo-500 to-purple-600 bg-clip-text text-transparent">
-                          {guidanceScale.toFixed(1)}
-                        </div>
-                      </div>
-                    </div>
-
-                    {/* 种子数设置 */}
-                    <div className="space-y-3 py-1 pb-3">
-                      <div className="flex items-center gap-2">
-                        <div className="rounded-full bg-gradient-to-r from-indigo-400 to-purple-400 p-1.5">
-                          <Dices className="w-3.5 h-3.5 text-white" />
-                        </div>
-                        <Label className="text-sm font-medium text-indigo-800">
-                          种子数
-                        </Label>
-                      </div>
-                      <p className="text-xs text-gray-500 pl-7">
-                        用于物理定扩初始状态的基值，若随机种子相同并且其他参数相同，则生成图片大概率一致
-                      </p>
-
-                      <RadioGroup
-                        value={seedMode}
-                        onValueChange={(value) =>
-                          setSeedMode(value as "random" | "fixed")
-                        }
-                        className="flex gap-4 pl-7 mt-2"
-                      >
-                        <div className="flex items-center space-x-2">
-                          <RadioGroupItem
-                            value="random"
-                            id="random-seed"
-                            className="text-indigo-600 border-indigo-400"
-                          />
-                          <Label
-                            htmlFor="random-seed"
-                            className="cursor-pointer text-sm text-indigo-700"
-                          >
-                            随机
-                          </Label>
-                        </div>
-                        <div className="flex items-center space-x-2">
-                          <RadioGroupItem
-                            value="fixed"
-                            id="fixed-seed"
-                            className="text-indigo-600 border-indigo-400"
-                          />
-                          <Label
-                            htmlFor="fixed-seed"
-                            className="cursor-pointer text-sm text-indigo-700"
-                          >
-                            固定
-                          </Label>
-                        </div>
-                      </RadioGroup>
-
-                      {seedMode === "fixed" && (
-                        <div className="pl-7 mt-2">
-                          <Input
-                            type="number"
-                            value={seedValue}
-                            onChange={handleSeedValueChange}
-                            min={-1}
-                            max={2147483647}
-                            className="max-w-[200px] border-indigo-200 focus:border-indigo-400 focus:ring-indigo-300/20"
-                          />
-                        </div>
-                      )}
-                    </div>
-                  </div>
-                )}
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-
-        {/* Generate Button */}
-        <div className="text-center mb-8">
-          <Button
-            onClick={handleGenerate}
-            disabled={!content.trim() || isGenerating}
-            size="lg"
-            className="px-12 py-3 text-lg font-medium rounded-full bg-gradient-to-r from-pink-500 to-orange-500 hover:from-pink-600 hover:to-orange-600 disabled:from-gray-300 disabled:to-gray-300 shadow-lg shadow-pink-200"
-          >
-            {isGenerating ? (
-              <>
-                <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-white mr-2" />
-                生成中...
-              </>
-            ) : (
-              <>
-                <Wand2 className="w-5 h-5 mr-2" />
-                生成漫画剧本
-              </>
-            )}
-          </Button>
-        </div>
-
-        {/* Error Display */}
-        {error && (
-          <Card className="mb-8 border-red-200 shadow-lg shadow-red-100/50 bg-white/70 backdrop-blur-sm">
-            <CardContent className="p-4">
-              <p className="text-red-500 text-center">{error}</p>
-            </CardContent>
-          </Card>
-        )}
-
-        {/* Image Generation Error Display */}
-        {imageGenerationError && (
-          <Card className="mb-8 border-red-200 shadow-lg shadow-red-100/50 bg-white/70 backdrop-blur-sm">
-            <CardContent className="p-4">
-              <div className="flex items-center justify-center gap-2 text-red-500">
-                <AlertCircle className="w-4 h-4" />
-                <p>{imageGenerationError}</p>
-              </div>
-            </CardContent>
-          </Card>
-        )}
-
-        {/* Loading State */}
-        {isGenerating && (
-          <Card className="mb-8 border-0 shadow-lg shadow-pink-100/50 bg-white/70 backdrop-blur-sm">
-            <CardContent className="p-8 text-center">
-              <div className="space-y-4">
-                <div className="animate-pulse">
-                  <div className="w-16 h-16 bg-gradient-to-r from-pink-500 to-orange-500 rounded-full mx-auto mb-4 flex items-center justify-center">
-                    <Sparkles className="w-8 h-8 text-white animate-spin" />
-                  </div>
-                </div>
-                <p className="text-gray-600">正在创作漫画剧本...</p>
-                <p className="text-sm text-gray-500">预计需要30秒</p>
-              </div>
-            </CardContent>
-          </Card>
-        )}
-
-        {/* Results Section */}
-        {comicPanels.length > 0 && !isGenerating && (
-          <Card className="border-0 shadow-lg shadow-pink-100/50 bg-white/70 backdrop-blur-sm">
-            <CardContent className="p-6">
-              <div className="mb-6">
-                <h3 className="text-xl font-semibold text-gray-800 mb-2">
-                  生成结果
-                </h3>
-                <p className="text-gray-600 text-sm">
-                  以下是根据您的内容创作的漫画剧本
-                </p>
-              </div>
-
-              <div className="space-y-8">
-                {comicPanels.map((panel, i) => (
-                  <div
-                    key={panel.id}
-                    className="bg-white rounded-xl shadow-md p-5 border border-pink-100"
-                  >
-                    <div className="flex items-center mb-3">
-                      <div className="bg-gradient-to-r from-pink-500 to-orange-500 text-white rounded-full w-8 h-8 flex items-center justify-center mr-2">
-                        {i + 1}
-                      </div>
-                      <h4 className="font-medium text-gray-800">
-                        场景 {i + 1}
-                      </h4>
-                    </div>
-
-                    {/* 当有生成图片时显示图片 */}
-                    {panel.imageUrl &&
-                      panel.imageUrl.includes("http") &&
-                      !panel.imageUrl.includes("placehold.co") && (
-                        <div className="mb-4 rounded-lg overflow-hidden">
-                          <img
-                            src={panel.imageUrl}
-                            alt={`场景 ${i + 1}`}
-                            className="w-full h-auto object-contain"
-                          />
-                          {panel.error && (
-                            <p className="text-red-500 text-xs mt-1 flex items-center">
-                              <AlertCircle className="w-3 h-3 mr-1" />
-                              {panel.error}
-                            </p>
-                          )}
-                        </div>
-                      )}
-
-                    <div className="prose prose-pink max-w-none">
-                      <p className="whitespace-pre-wrap text-gray-700">
-                        {panel.content}
-                      </p>
-                    </div>
-
-                    {/* 如果已生成图片，显示下载按钮 */}
-                    {panel.imageUrl &&
-                      panel.imageUrl.includes("http") &&
-                      !panel.imageUrl.includes("placehold.co") && (
-                        <div className="mt-4 flex justify-end">
-                          <Button
-                            size="sm"
-                            variant="outline"
-                            className="text-xs border-pink-200 text-pink-600"
-                            onClick={() =>
-                              handleDownloadImage(
-                                panel.imageUrl,
-                                `场景${i + 1}`
-                              )
-                            }
-                          >
-                            <Download className="w-3 h-3 mr-1" />
-                            下载图片
-                          </Button>
-                        </div>
-                      )}
-                  </div>
-                ))}
-              </div>
-
-              {/* 统一的生成漫画按钮 */}
-              <div className="mt-8 pt-6 border-t border-pink-100 text-center">
-                <div className="flex flex-col items-center">
-                  <div className="mb-4 bg-white/90 rounded-xl px-4 py-2 shadow-sm border border-pink-100">
-                    <div className="text-sm text-gray-600 flex flex-wrap justify-center gap-x-4 gap-y-2">
-                      <div className="flex items-center gap-1">
-                        <SlidersHorizontal className="w-3.5 h-3.5 text-blue-500" />
-                        <span>
-                          图片比例:{" "}
-                          <span className="font-medium text-blue-600">
-                            {selectedAspectRatio}
-                          </span>
-                        </span>
-                      </div>
-                      {showAdvancedSettings && (
-                        <>
-                          <div className="flex items-center gap-1">
-                            <SlidersHorizontal className="w-3.5 h-3.5 text-indigo-500" />
-                            <span>
-                              文本权重:{" "}
-                              <span className="font-medium text-indigo-600">
-                                {guidanceScale.toFixed(1)}
-                              </span>
-                            </span>
-                          </div>
-                          <div className="flex items-center gap-1">
-                            <Dices className="w-3.5 h-3.5 text-purple-500" />
-                            <span>
-                              种子数:{" "}
-                              <span className="font-medium text-purple-600">
-                                {seedMode === "random" ? "随机" : seedValue}
-                              </span>
-                            </span>
-                          </div>
-                        </>
-                      )}
-                    </div>
-                  </div>
-                  <Button
-                    onClick={handleGenerateImages}
-                    disabled={isGeneratingImages || comicPanels.length === 0}
-                    size="lg"
-                    className="px-12 py-3 text-lg font-medium rounded-full bg-gradient-to-r from-orange-400 to-pink-500 hover:from-orange-500 hover:to-pink-600 disabled:opacity-70 shadow-lg shadow-orange-200"
-                  >
-                    {isGeneratingImages ? (
-                      <>
-                        <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-white mr-2" />
-                        生成中...
-                      </>
-                    ) : (
-                      <>
-                        <ImageIcon className="w-5 h-5 mr-2" />
-                        根据剧本生成漫画
-                      </>
-                    )}
-                  </Button>
-                  <p className="text-sm text-gray-500 mt-2">
-                    {isGeneratingImages
-                      ? "正在生成漫画图像，请稍候..."
-                      : "将基于上述剧本内容生成完整的漫画图像"}
-                  </p>
-                </div>
-              </div>
-
-              {/* Social Actions */}
-              <div className="mt-8 pt-6 border-t border-pink-100">
-                <div className="flex items-center justify-between">
-                  <div className="flex items-center gap-4">
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      className="text-gray-600 hover:text-pink-600"
-                    >
-                      <Heart className="w-4 h-4 mr-1" />
-                      喜欢
-                    </Button>
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      className="text-gray-600 hover:text-pink-600"
-                    >
-                      <MessageCircle className="w-4 h-4 mr-1" />
-                      评论
-                    </Button>
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      className="text-gray-600 hover:text-pink-600"
-                    >
-                      <Share className="w-4 h-4 mr-1" />
-                      分享
-                    </Button>
-                  </div>
-                  <Badge
-                    variant="secondary"
-                    className="bg-green-100 text-green-700"
-                  >
-                    生成成功
-                  </Badge>
-                </div>
-              </div>
-            </CardContent>
-          </Card>
-        )}
-      </div>
-
-      {/* Footer */}
-      <div className="text-center py-8 text-gray-500 text-sm">
-        <p>让每个人都能轻松将文字转化为视觉故事 💫</p>
-      </div>
-    </div>
-  );
-}
diff --git a/.history/app/page_20250802003058.tsx b/.history/app/page_20250802003058.tsx
deleted file mode 100644
index 1b7610c..0000000
--- a/.history/app/page_20250802003058.tsx
+++ /dev/null
@@ -1,711 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { Card, CardContent } from "@/components/ui/card";
-import { Button } from "@/components/ui/button";
-import { Textarea } from "@/components/ui/textarea";
-import { Badge } from "@/components/ui/badge";
-import { Slider } from "@/components/ui/slider";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import {
-  Sparkles,
-  ImageIcon,
-  Download,
-  Eye,
-  Heart,
-  MessageCircle,
-  Share,
-  Wand2,
-  AlertCircle,
-  ChevronDown,
-  ChevronRight,
-  Sliders,
-  Dices, // 替换 Dice 为 Dices
-  SlidersHorizontal,
-} from "lucide-react";
-import { ComicPanel } from "@/lib/types";
-
-// 图片比例选项
-type AspectRatio = {
-  id: string;
-  label: string;
-  value: string; // 实际的宽高比值，如 "1:1"
-};
-
-const aspectRatios: AspectRatio[] = [
-  { id: "1:1", label: "1:1", value: "1:1" },
-  { id: "3:4", label: "3:4", value: "3:4" },
-  { id: "4:3", label: "4:3", value: "4:3" },
-  { id: "16:9", label: "16:9", value: "16:9" },
-  { id: "9:16", label: "9:16", value: "9:16" },
-  { id: "2:3", label: "2:3", value: "2:3" },
-  { id: "3:2", label: "3:2", value: "3:2" },
-  { id: "21:9", label: "21:9", value: "21:9" },
-  { id: "custom", label: "自定义", value: "custom" },
-];
-
-export default function ComicGenerator() {
-  const [content, setContent] = useState("");
-  const [selectedCount, setSelectedCount] = useState(4);
-  const [selectedAspectRatio, setSelectedAspectRatio] =
-    useState<string>("16:9");
-  const [isGenerating, setIsGenerating] = useState(false);
-  const [isGeneratingImages, setIsGeneratingImages] = useState(false);
-  const [comicPanels, setComicPanels] = useState<ComicPanel[]>([]);
-  const [error, setError] = useState<string | null>(null);
-  const [imageGenerationError, setImageGenerationError] = useState<
-    string | null
-  >(null);
-  const [showAdvancedSettings, setShowAdvancedSettings] = useState(false);
-  const [guidanceScale, setGuidanceScale] = useState(2.5); // 默认值为2.5
-  const [seedMode, setSeedMode] = useState<"random" | "fixed">("random"); // 默认为随机
-  const [seedValue, setSeedValue] = useState<number>(1234);
-  const maxLength = 2000;
-
-  const sampleArticle = `春天来了，小明走在回家的路上。突然，他发现路边有一只受伤的小猫。小明毫不犹豫地将小猫抱起，送到了附近的宠物医院。医生说小猫只是轻微擦伤，很快就能康复。从那天起，小明每天都会去医院看望小猫，直到它完全康复。`;
-
-  const handleGenerate = async () => {
-    if (!content.trim()) return;
-
-    setIsGenerating(true);
-    setError(null);
-
-    try {
-      const response = await fetch("/api/generate", {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({
-          content,
-          count: selectedCount,
-        }),
-      });
-
-      const data = await response.json();
-
-      if (!response.ok) {
-        throw new Error(data.error || "生成漫画失败，请稍后再试");
-      }
-
-      setComicPanels(data.comicPanels);
-    } catch (err) {
-      setError(err instanceof Error ? err.message : "生成漫画时发生未知错误");
-      console.error("生成漫画错误:", err);
-    } finally {
-      setIsGenerating(false);
-    }
-  };
-
-  const handleGenerateImages = async () => {
-    if (comicPanels.length === 0) return;
-
-    setIsGeneratingImages(true);
-    setImageGenerationError(null);
-
-    // 确定要使用的种子值
-    const seed = seedMode === "random" ? -1 : seedValue;
-
-    try {
-      const response = await fetch("/api/generate-images", {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({
-          comicPanels,
-          aspectRatio: selectedAspectRatio,
-          seed: seed,
-          guidance_scale: guidanceScale,
-        }),
-      });
-
-      const data = await response.json();
-
-      if (!response.ok) {
-        throw new Error(data.error || "生成漫画图片失败，请稍后再试");
-      }
-
-      // 更新面板，包含新的图像URL
-      setComicPanels(data.comicPanels);
-    } catch (err) {
-      setImageGenerationError(
-        err instanceof Error ? err.message : "生成漫画图片时发生未知错误"
-      );
-      console.error("生成漫画图片错误:", err);
-    } finally {
-      setIsGeneratingImages(false);
-    }
-  };
-
-  const handleDownloadImage = (imageUrl: string, sceneName: string) => {
-    const a = document.createElement("a");
-    a.href = imageUrl;
-    a.download = `漫画场景_${sceneName}.jpg`;
-    a.click();
-  };
-
-  const fillSample = () => {
-    setContent(sampleArticle);
-  };
-
-  const getGridLayout = (count: number) => {
-    switch (count) {
-      case 2:
-        return "grid-cols-1 md:grid-cols-2";
-      case 4:
-        return "grid-cols-2";
-      case 6:
-        return "grid-cols-2 md:grid-cols-3";
-      case 8:
-        return "grid-cols-2 md:grid-cols-4";
-      default:
-        return "grid-cols-2";
-    }
-  };
-
-  const handleSeedValueChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const value = parseInt(e.target.value);
-    // 确保值在合法范围内 [-1, 2147483647]
-    if (!isNaN(value) && value >= -1 && value <= 2147483647) {
-      setSeedValue(value);
-    }
-  };
-
-  return (
-    <div className="min-h-screen bg-gradient-to-br from-pink-50 to-orange-50">
-      {/* Header */}
-      <div className="bg-white/80 backdrop-blur-md border-b border-pink-100 sticky top-0 z-10">
-        <div className="max-w-4xl mx-auto px-4 py-4 flex items-center justify-between">
-          <div className="flex items-center gap-2">
-            <div className="w-8 h-8 bg-gradient-to-r from-pink-500 to-orange-500 rounded-lg flex items-center justify-center">
-              <Sparkles className="w-5 h-5 text-white" />
-            </div>
-            <span className="font-bold text-gray-800">漫画生成器</span>
-          </div>
-          <div className="flex items-center gap-4">
-            <Badge variant="secondary" className="bg-pink-100 text-pink-700">
-              Beta
-            </Badge>
-          </div>
-        </div>
-      </div>
-
-      <div className="max-w-4xl mx-auto px-4 py-8">
-        {/* Hero Section */}
-        <div className="text-center mb-12">
-          <h1 className="text-4xl font-bold bg-gradient-to-r from-pink-600 to-orange-600 bg-clip-text text-transparent mb-4">
-            文章转漫画生成器
-          </h1>
-          <p className="text-gray-600 text-lg mb-8">
-            将你的文字变成精彩的漫画故事 ✨
-          </p>
-        </div>
-
-        {/* Input Section */}
-        <Card className="mb-8 border-0 shadow-lg shadow-pink-100/50 bg-white/70 backdrop-blur-sm">
-          <CardContent className="p-6">
-            <div className="space-y-4">
-              <div className="flex items-center justify-between">
-                <label className="text-sm font-medium text-gray-700">
-                  输入你的文章内容或创意
-                </label>
-                <span
-                  className={`text-sm ${
-                    content.length > maxLength
-                      ? "text-red-500"
-                      : "text-gray-500"
-                  }`}
-                >
-                  还可以输入 {maxLength - content.length} 字
-                </span>
-              </div>
-
-              <Textarea
-                value={content}
-                onChange={(e) => setContent(e.target.value)}
-                placeholder="在这里输入你的故事内容或创意，我们会将其转化为精美的漫画剧本..."
-                className="min-h-[120px] resize-none border-pink-200 focus:border-pink-400 focus:ring-pink-400/20"
-                maxLength={maxLength}
-              />
-
-              <div className="flex justify-start">
-                <Button
-                  variant="outline"
-                  size="sm"
-                  onClick={fillSample}
-                  className="border-pink-200 text-pink-600 hover:bg-pink-50 bg-transparent"
-                >
-                  试试示例文章
-                </Button>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-
-        {/* Configuration Section */}
-        <Card className="mb-8 border-0 shadow-lg shadow-pink-100/50 bg-white/70 backdrop-blur-sm">
-          <CardContent className="p-6">
-            <div className="space-y-6">
-              {/* 场景数量选择 */}
-              <div className="space-y-4">
-                <label className="text-sm font-medium text-gray-700 flex items-center gap-1.5">
-                  <ImageIcon className="w-4 h-4 text-pink-500" />
-                  选择场景数量
-                </label>
-
-                <div className="flex gap-3 flex-wrap">
-                  {[2, 4, 6, 8].map((count) => (
-                    <Button
-                      key={count}
-                      variant={selectedCount === count ? "default" : "outline"}
-                      size="sm"
-                      onClick={() => setSelectedCount(count)}
-                      className={`rounded-full px-6 ${
-                        selectedCount === count
-                          ? "bg-gradient-to-r from-pink-500 to-orange-500 hover:from-pink-600 hover:to-orange-600"
-                          : "border-pink-200 text-pink-600 hover:bg-pink-50"
-                      }`}
-                    >
-                      {count}个场景
-                    </Button>
-                  ))}
-                </div>
-              </div>
-
-              {/* 图片比例选择 */}
-              <div className="space-y-4">
-                <label className="text-sm font-medium text-gray-700 flex items-center gap-1.5">
-                  <SlidersHorizontal className="w-4 h-4 text-blue-500" />
-                  图片比例
-                </label>
-
-                <div className="flex gap-3 flex-wrap">
-                  {aspectRatios.map((ratio) => (
-                    <Button
-                      key={ratio.id}
-                      variant={
-                        selectedAspectRatio === ratio.value
-                          ? "default"
-                          : "outline"
-                      }
-                      size="sm"
-                      onClick={() => setSelectedAspectRatio(ratio.value)}
-                      className={`rounded-full px-4 ${
-                        selectedAspectRatio === ratio.value
-                          ? "bg-gradient-to-r from-blue-500 to-indigo-500 hover:from-blue-600 hover:to-indigo-600"
-                          : "border-blue-200 text-blue-600 hover:bg-blue-50"
-                      }`}
-                    >
-                      {ratio.label}
-                    </Button>
-                  ))}
-                </div>
-              </div>
-
-              {/* 高级设置部分 */}
-              <div className="mt-2">
-                <button
-                  className={`w-full flex items-center justify-between p-4 text-left rounded-xl transition-all duration-200 ${
-                    showAdvancedSettings
-                      ? "bg-gradient-to-r from-purple-50 to-indigo-50 shadow-sm"
-                      : "bg-white/50 hover:bg-white/80"
-                  }`}
-                  onClick={() => setShowAdvancedSettings(!showAdvancedSettings)}
-                >
-                  <div className="flex items-center gap-2">
-                    <div
-                      className={`rounded-full p-1.5 ${
-                        showAdvancedSettings
-                          ? "bg-gradient-to-r from-purple-500 to-indigo-500"
-                          : "bg-gray-100"
-                      }`}
-                    >
-                      <Sliders
-                        className={`w-4 h-4 ${
-                          showAdvancedSettings ? "text-white" : "text-gray-500"
-                        }`}
-                      />
-                    </div>
-                    <span
-                      className={`font-medium ${
-                        showAdvancedSettings
-                          ? "text-indigo-700"
-                          : "text-gray-700"
-                      }`}
-                    >
-                      高级设置
-                    </span>
-                  </div>
-                  {showAdvancedSettings ? (
-                    <ChevronDown className="w-5 h-5 text-indigo-500" />
-                  ) : (
-                    <ChevronRight className="w-5 h-5 text-gray-400" />
-                  )}
-                </button>
-
-                {showAdvancedSettings && (
-                  <div className="mt-4 pt-2 pb-1 px-4 bg-white/60 backdrop-blur-sm rounded-xl border border-indigo-100 shadow-sm space-y-6 transition-all duration-300 ease-in-out">
-                    {/* 文本权重设置 */}
-                    <div className="space-y-3 py-3 border-b border-indigo-50">
-                      <div className="flex items-center gap-2">
-                        <div className="rounded-full bg-gradient-to-r from-indigo-400 to-purple-400 p-1.5">
-                          <SlidersHorizontal className="w-3.5 h-3.5 text-white" />
-                        </div>
-                        <Label className="text-sm font-medium text-indigo-800">
-                          文本权重
-                        </Label>
-                      </div>
-                      <p className="text-xs text-gray-500 pl-7">
-                        显示文字（创意描述）对结果图像的影响程度，数值越大图像越接近文字描述，数值越小图像可能更具创造性
-                      </p>
-
-                      <div className="flex flex-col space-y-2 pl-7 pr-2">
-                        <div className="flex justify-between text-xs text-indigo-400 px-1">
-                          <span>更具创造性</span>
-                          <span>更贴近描述</span>
-                        </div>
-                        <div className="bg-gradient-to-r from-indigo-50 to-indigo-100 rounded-full p-1">
-                          <Slider
-                            value={[guidanceScale]}
-                            min={1}
-                            max={10}
-                            step={0.1}
-                            onValueChange={(value) =>
-                              setGuidanceScale(value[0])
-                            }
-                            className="w-full"
-                          />
-                        </div>
-                        <div className="flex justify-between text-xs text-gray-400 px-1">
-                          <span>1.0</span>
-                          <span>10.0</span>
-                        </div>
-                        <div className="text-right text-sm font-medium bg-gradient-to-r from-indigo-500 to-purple-600 bg-clip-text text-transparent">
-                          {guidanceScale.toFixed(1)}
-                        </div>
-                      </div>
-                    </div>
-
-                    {/* 种子数设置 */}
-                    <div className="space-y-3 py-1 pb-3">
-                      <div className="flex items-center gap-2">
-                        <div className="rounded-full bg-gradient-to-r from-indigo-400 to-purple-400 p-1.5">
-                          <Dices className="w-3.5 h-3.5 text-white" />
-                        </div>
-                        <Label className="text-sm font-medium text-indigo-800">
-                          种子数
-                        </Label>
-                      </div>
-                      <p className="text-xs text-gray-500 pl-7">
-                        用于物理定扩初始状态的基值，若随机种子相同并且其他参数相同，则生成图片大概率一致
-                      </p>
-
-                      <RadioGroup
-                        value={seedMode}
-                        onValueChange={(value) =>
-                          setSeedMode(value as "random" | "fixed")
-                        }
-                        className="flex gap-4 pl-7 mt-2"
-                      >
-                        <div className="flex items-center space-x-2">
-                          <RadioGroupItem
-                            value="random"
-                            id="random-seed"
-                            className="text-indigo-600 border-indigo-400"
-                          />
-                          <Label
-                            htmlFor="random-seed"
-                            className="cursor-pointer text-sm text-indigo-700"
-                          >
-                            随机
-                          </Label>
-                        </div>
-                        <div className="flex items-center space-x-2">
-                          <RadioGroupItem
-                            value="fixed"
-                            id="fixed-seed"
-                            className="text-indigo-600 border-indigo-400"
-                          />
-                          <Label
-                            htmlFor="fixed-seed"
-                            className="cursor-pointer text-sm text-indigo-700"
-                          >
-                            固定
-                          </Label>
-                        </div>
-                      </RadioGroup>
-
-                      {seedMode === "fixed" && (
-                        <div className="pl-7 mt-2">
-                          <Input
-                            type="number"
-                            value={seedValue}
-                            onChange={handleSeedValueChange}
-                            min={-1}
-                            max={2147483647}
-                            className="max-w-[200px] border-indigo-200 focus:border-indigo-400 focus:ring-indigo-300/20"
-                          />
-                        </div>
-                      )}
-                    </div>
-                  </div>
-                )}
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-
-        {/* Generate Button */}
-        <div className="text-center mb-8">
-          <Button
-            onClick={handleGenerate}
-            disabled={!content.trim() || isGenerating}
-            size="lg"
-            className="px-12 py-3 text-lg font-medium rounded-full bg-gradient-to-r from-pink-500 to-orange-500 hover:from-pink-600 hover:to-orange-600 disabled:from-gray-300 disabled:to-gray-300 shadow-lg shadow-pink-200"
-          >
-            {isGenerating ? (
-              <>
-                <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-white mr-2" />
-                生成中...
-              </>
-            ) : (
-              <>
-                <Wand2 className="w-5 h-5 mr-2" />
-                生成漫画剧本
-              </>
-            )}
-          </Button>
-        </div>
-
-        {/* Error Display */}
-        {error && (
-          <Card className="mb-8 border-red-200 shadow-lg shadow-red-100/50 bg-white/70 backdrop-blur-sm">
-            <CardContent className="p-4">
-              <p className="text-red-500 text-center">{error}</p>
-            </CardContent>
-          </Card>
-        )}
-
-        {/* Image Generation Error Display */}
-        {imageGenerationError && (
-          <Card className="mb-8 border-red-200 shadow-lg shadow-red-100/50 bg-white/70 backdrop-blur-sm">
-            <CardContent className="p-4">
-              <div className="flex items-center justify-center gap-2 text-red-500">
-                <AlertCircle className="w-4 h-4" />
-                <p>{imageGenerationError}</p>
-              </div>
-            </CardContent>
-          </Card>
-        )}
-
-        {/* Loading State */}
-        {isGenerating && (
-          <Card className="mb-8 border-0 shadow-lg shadow-pink-100/50 bg-white/70 backdrop-blur-sm">
-            <CardContent className="p-8 text-center">
-              <div className="space-y-4">
-                <div className="animate-pulse">
-                  <div className="w-16 h-16 bg-gradient-to-r from-pink-500 to-orange-500 rounded-full mx-auto mb-4 flex items-center justify-center">
-                    <Sparkles className="w-8 h-8 text-white animate-spin" />
-                  </div>
-                </div>
-                <p className="text-gray-600">正在创作漫画剧本...</p>
-                <p className="text-sm text-gray-500">预计需要30秒</p>
-              </div>
-            </CardContent>
-          </Card>
-        )}
-
-        {/* Results Section */}
-        {comicPanels.length > 0 && !isGenerating && (
-          <Card className="border-0 shadow-lg shadow-pink-100/50 bg-white/70 backdrop-blur-sm">
-            <CardContent className="p-6">
-              <div className="mb-6">
-                <h3 className="text-xl font-semibold text-gray-800 mb-2">
-                  生成结果
-                </h3>
-                <p className="text-gray-600 text-sm">
-                  以下是根据您的内容创作的漫画剧本
-                </p>
-              </div>
-
-              <div className="space-y-8">
-                {comicPanels.map((panel, i) => (
-                  <div
-                    key={panel.id}
-                    className="bg-white rounded-xl shadow-md p-5 border border-pink-100"
-                  >
-                    <div className="flex items-center mb-3">
-                      <div className="bg-gradient-to-r from-pink-500 to-orange-500 text-white rounded-full w-8 h-8 flex items-center justify-center mr-2">
-                        {i + 1}
-                      </div>
-                      <h4 className="font-medium text-gray-800">
-                        场景 {i + 1}
-                      </h4>
-                    </div>
-
-                    {/* 当有生成图片时显示图片 */}
-                    {panel.imageUrl &&
-                      panel.imageUrl.includes("http") &&
-                      !panel.imageUrl.includes("placehold.co") && (
-                        <div className="mb-4 rounded-lg overflow-hidden">
-                          <img
-                            src={panel.imageUrl}
-                            alt={`场景 ${i + 1}`}
-                            className="w-full h-auto object-contain"
-                          />
-                          {panel.error && (
-                            <p className="text-red-500 text-xs mt-1 flex items-center">
-                              <AlertCircle className="w-3 h-3 mr-1" />
-                              {panel.error}
-                            </p>
-                          )}
-                        </div>
-                      )}
-
-                    <div className="prose prose-pink max-w-none">
-                      <p className="whitespace-pre-wrap text-gray-700">
-                        {panel.content}
-                      </p>
-                    </div>
-
-                    {/* 如果已生成图片，显示下载按钮 */}
-                    {panel.imageUrl &&
-                      panel.imageUrl.includes("http") &&
-                      !panel.imageUrl.includes("placehold.co") && (
-                        <div className="mt-4 flex justify-end">
-                          <Button
-                            size="sm"
-                            variant="outline"
-                            className="text-xs border-pink-200 text-pink-600"
-                            onClick={() =>
-                              handleDownloadImage(
-                                panel.imageUrl,
-                                `场景${i + 1}`
-                              )
-                            }
-                          >
-                            <Download className="w-3 h-3 mr-1" />
-                            下载图片
-                          </Button>
-                        </div>
-                      )}
-                  </div>
-                ))}
-              </div>
-
-              {/* 统一的生成漫画按钮 */}
-              <div className="mt-8 pt-6 border-t border-pink-100 text-center">
-                <div className="flex flex-col items-center">
-                  <div className="mb-4 bg-white/90 rounded-xl px-4 py-2 shadow-sm border border-pink-100">
-                    <div className="text-sm text-gray-600 flex flex-wrap justify-center gap-x-4 gap-y-2">
-                      <div className="flex items-center gap-1">
-                        <SlidersHorizontal className="w-3.5 h-3.5 text-blue-500" />
-                        <span>
-                          图片比例:{" "}
-                          <span className="font-medium text-blue-600">
-                            {selectedAspectRatio}
-                          </span>
-                        </span>
-                      </div>
-                      {showAdvancedSettings && (
-                        <>
-                          <div className="flex items-center gap-1">
-                            <SlidersHorizontal className="w-3.5 h-3.5 text-indigo-500" />
-                            <span>
-                              文本权重:{" "}
-                              <span className="font-medium text-indigo-600">
-                                {guidanceScale.toFixed(1)}
-                              </span>
-                            </span>
-                          </div>
-                          <div className="flex items-center gap-1">
-                            <Dices className="w-3.5 h-3.5 text-purple-500" />
-                            <span>
-                              种子数:{" "}
-                              <span className="font-medium text-purple-600">
-                                {seedMode === "random" ? "随机" : seedValue}
-                              </span>
-                            </span>
-                          </div>
-                        </>
-                      )}
-                    </div>
-                  </div>
-                  <Button
-                    onClick={handleGenerateImages}
-                    disabled={isGeneratingImages || comicPanels.length === 0}
-                    size="lg"
-                    className="px-12 py-3 text-lg font-medium rounded-full bg-gradient-to-r from-orange-400 to-pink-500 hover:from-orange-500 hover:to-pink-600 disabled:opacity-70 shadow-lg shadow-orange-200"
-                  >
-                    {isGeneratingImages ? (
-                      <>
-                        <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-white mr-2" />
-                        生成中...
-                      </>
-                    ) : (
-                      <>
-                        <ImageIcon className="w-5 h-5 mr-2" />
-                        根据剧本生成漫画
-                      </>
-                    )}
-                  </Button>
-                  <p className="text-sm text-gray-500 mt-2">
-                    {isGeneratingImages
-                      ? "正在生成漫画图像，请稍候..."
-                      : "将基于上述剧本内容生成完整的漫画图像"}
-                  </p>
-                </div>
-              </div>
-
-              {/* Social Actions */}
-              <div className="mt-8 pt-6 border-t border-pink-100">
-                <div className="flex items-center justify-between">
-                  <div className="flex items-center gap-4">
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      className="text-gray-600 hover:text-pink-600"
-                    >
-                      <Heart className="w-4 h-4 mr-1" />
-                      喜欢
-                    </Button>
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      className="text-gray-600 hover:text-pink-600"
-                    >
-                      <MessageCircle className="w-4 h-4 mr-1" />
-                      评论
-                    </Button>
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      className="text-gray-600 hover:text-pink-600"
-                    >
-                      <Share className="w-4 h-4 mr-1" />
-                      分享
-                    </Button>
-                  </div>
-                  <Badge
-                    variant="secondary"
-                    className="bg-green-100 text-green-700"
-                  >
-                    生成成功
-                  </Badge>
-                </div>
-              </div>
-            </CardContent>
-          </Card>
-        )}
-      </div>
-
-      {/* Footer */}
-      <div className="text-center py-8 text-gray-500 text-sm">
-        <p>让每个人都能轻松将文字转化为视觉故事 💫</p>
-      </div>
-    </div>
-  );
-}
diff --git a/.history/app/page_20250802003247.tsx b/.history/app/page_20250802003247.tsx
deleted file mode 100644
index 7983408..0000000
--- a/.history/app/page_20250802003247.tsx
+++ /dev/null
@@ -1,820 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { Card, CardContent } from "@/components/ui/card";
-import { Button } from "@/components/ui/button";
-import { Textarea } from "@/components/ui/textarea";
-import { Badge } from "@/components/ui/badge";
-import { Slider } from "@/components/ui/slider";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import {
-  Sparkles,
-  ImageIcon,
-  Download,
-  Eye,
-  Heart,
-  MessageCircle,
-  Share,
-  Wand2,
-  AlertCircle,
-  ChevronDown,
-  ChevronRight,
-  Sliders,
-  Dices, // 替换 Dice 为 Dices
-  SlidersHorizontal,
-} from "lucide-react";
-import { ComicPanel } from "@/lib/types";
-
-// 图片比例选项
-type AspectRatio = {
-  id: string;
-  label: string;
-  value: string; // 实际的宽高比值，如 "1:1"
-};
-
-// 文本生成模型选项
-type TextModel = {
-  id: string;
-  name: string;
-  description: string;
-  tag?: string; // 可选标签，如"推荐"、"快速"等
-};
-
-const textModels: TextModel[] = [
-  {
-    id: "qwen-32b",
-    name: "QwQ-32B",
-    description: "高质量剧本生成，细节丰富，逻辑连贯",
-    tag: "推荐",
-  },
-  {
-    id: "deepseek-7b",
-    name: "DeepSeek-7B",
-    description: "生成速度快，质量适中",
-    tag: "快速",
-  },
-  {
-    id: "gpt-3.5",
-    name: "GPT-3.5",
-    description: "平衡的选择，适合大多数场景",
-  },
-];
-
-const aspectRatios: AspectRatio[] = [
-  { id: "1:1", label: "1:1", value: "1:1" },
-  { id: "3:4", label: "3:4", value: "3:4" },
-  { id: "4:3", label: "4:3", value: "4:3" },
-  { id: "16:9", label: "16:9", value: "16:9" },
-  { id: "9:16", label: "9:16", value: "9:16" },
-  { id: "2:3", label: "2:3", value: "2:3" },
-  { id: "3:2", label: "3:2", value: "3:2" },
-  { id: "21:9", label: "21:9", value: "21:9" },
-  { id: "custom", label: "自定义", value: "custom" },
-];
-
-export default function ComicGenerator() {
-  const [content, setContent] = useState("");
-  const [selectedCount, setSelectedCount] = useState(4);
-  const [selectedAspectRatio, setSelectedAspectRatio] =
-    useState<string>("16:9");
-  const [isGenerating, setIsGenerating] = useState(false);
-  const [isGeneratingImages, setIsGeneratingImages] = useState(false);
-  const [comicPanels, setComicPanels] = useState<ComicPanel[]>([]);
-  const [error, setError] = useState<string | null>(null);
-  const [imageGenerationError, setImageGenerationError] = useState<
-    string | null
-  >(null);
-  const [showAdvancedSettings, setShowAdvancedSettings] = useState(false);
-  const [guidanceScale, setGuidanceScale] = useState(2.5); // 默认值为2.5
-  const [seedMode, setSeedMode] = useState<"random" | "fixed">("random"); // 默认为随机
-  const [seedValue, setSeedValue] = useState<number>(1234);
-  const [selectedModel, setSelectedModel] = useState<string>("qwen-32b"); // 默认使用QwQ-32B模型
-  const maxLength = 2000;
-
-  const sampleArticle = `春天来了，小明走在回家的路上。突然，他发现路边有一只受伤的小猫。小明毫不犹豫地将小猫抱起，送到了附近的宠物医院。医生说小猫只是轻微擦伤，很快就能康复。从那天起，小明每天都会去医院看望小猫，直到它完全康复。`;
-
-  const handleGenerate = async () => {
-    if (!content.trim()) return;
-
-    setIsGenerating(true);
-    setError(null);
-
-    try {
-      const response = await fetch("/api/generate", {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({
-          content,
-          count: selectedCount,
-          model: selectedModel, // 添加模型参数
-        }),
-      });
-
-      const data = await response.json();
-
-      if (!response.ok) {
-        throw new Error(data.error || "生成漫画失败，请稍后再试");
-      }
-
-      setComicPanels(data.comicPanels);
-    } catch (err) {
-      setError(err instanceof Error ? err.message : "生成漫画时发生未知错误");
-      console.error("生成漫画错误:", err);
-    } finally {
-      setIsGenerating(false);
-    }
-  };
-
-  const handleGenerateImages = async () => {
-    if (comicPanels.length === 0) return;
-
-    setIsGeneratingImages(true);
-    setImageGenerationError(null);
-
-    // 确定要使用的种子值
-    const seed = seedMode === "random" ? -1 : seedValue;
-
-    try {
-      const response = await fetch("/api/generate-images", {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({
-          comicPanels,
-          aspectRatio: selectedAspectRatio,
-          seed: seed,
-          guidance_scale: guidanceScale,
-        }),
-      });
-
-      const data = await response.json();
-
-      if (!response.ok) {
-        throw new Error(data.error || "生成漫画图片失败，请稍后再试");
-      }
-
-      // 更新面板，包含新的图像URL
-      setComicPanels(data.comicPanels);
-    } catch (err) {
-      setImageGenerationError(
-        err instanceof Error ? err.message : "生成漫画图片时发生未知错误"
-      );
-      console.error("生成漫画图片错误:", err);
-    } finally {
-      setIsGeneratingImages(false);
-    }
-  };
-
-  const handleDownloadImage = (imageUrl: string, sceneName: string) => {
-    const a = document.createElement("a");
-    a.href = imageUrl;
-    a.download = `漫画场景_${sceneName}.jpg`;
-    a.click();
-  };
-
-  const fillSample = () => {
-    setContent(sampleArticle);
-  };
-
-  const getGridLayout = (count: number) => {
-    switch (count) {
-      case 2:
-        return "grid-cols-1 md:grid-cols-2";
-      case 4:
-        return "grid-cols-2";
-      case 6:
-        return "grid-cols-2 md:grid-cols-3";
-      case 8:
-        return "grid-cols-2 md:grid-cols-4";
-      default:
-        return "grid-cols-2";
-    }
-  };
-
-  const handleSeedValueChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const value = parseInt(e.target.value);
-    // 确保值在合法范围内 [-1, 2147483647]
-    if (!isNaN(value) && value >= -1 && value <= 2147483647) {
-      setSeedValue(value);
-    }
-  };
-
-  return (
-    <div className="min-h-screen bg-gradient-to-br from-pink-50 to-orange-50">
-      {/* Header */}
-      <div className="bg-white/80 backdrop-blur-md border-b border-pink-100 sticky top-0 z-10">
-        <div className="max-w-4xl mx-auto px-4 py-4 flex items-center justify-between">
-          <div className="flex items-center gap-2">
-            <div className="w-8 h-8 bg-gradient-to-r from-pink-500 to-orange-500 rounded-lg flex items-center justify-center">
-              <Sparkles className="w-5 h-5 text-white" />
-            </div>
-            <span className="font-bold text-gray-800">漫画生成器</span>
-          </div>
-          <div className="flex items-center gap-4">
-            <Badge variant="secondary" className="bg-pink-100 text-pink-700">
-              Beta
-            </Badge>
-          </div>
-        </div>
-      </div>
-
-      <div className="max-w-4xl mx-auto px-4 py-8">
-        {/* Hero Section */}
-        <div className="text-center mb-12">
-          <h1 className="text-4xl font-bold bg-gradient-to-r from-pink-600 to-orange-600 bg-clip-text text-transparent mb-4">
-            文章转漫画生成器
-          </h1>
-          <p className="text-gray-600 text-lg mb-8">
-            将你的文字变成精彩的漫画故事 ✨
-          </p>
-        </div>
-
-        {/* Input Section */}
-        <Card className="mb-8 border-0 shadow-lg shadow-pink-100/50 bg-white/70 backdrop-blur-sm">
-          <CardContent className="p-6">
-            <div className="space-y-4">
-              <div className="flex items-center justify-between">
-                <label className="text-sm font-medium text-gray-700">
-                  输入你的文章内容或创意
-                </label>
-                <span
-                  className={`text-sm ${
-                    content.length > maxLength
-                      ? "text-red-500"
-                      : "text-gray-500"
-                  }`}
-                >
-                  还可以输入 {maxLength - content.length} 字
-                </span>
-              </div>
-
-              <Textarea
-                value={content}
-                onChange={(e) => setContent(e.target.value)}
-                placeholder="在这里输入你的故事内容或创意，我们会将其转化为精美的漫画剧本..."
-                className="min-h-[120px] resize-none border-pink-200 focus:border-pink-400 focus:ring-pink-400/20"
-                maxLength={maxLength}
-              />
-
-              <div className="flex justify-start">
-                <Button
-                  variant="outline"
-                  size="sm"
-                  onClick={fillSample}
-                  className="border-pink-200 text-pink-600 hover:bg-pink-50 bg-transparent"
-                >
-                  试试示例文章
-                </Button>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-
-        {/* Configuration Section */}
-        <Card className="mb-8 border-0 shadow-lg shadow-pink-100/50 bg-white/70 backdrop-blur-sm">
-          <CardContent className="p-6">
-            <div className="space-y-6">
-              {/* 文本生成模型选择 */}
-              <div className="space-y-4">
-                <label className="text-sm font-medium text-gray-700 flex items-center gap-1.5">
-                  <Sparkles className="w-4 h-4 text-purple-500" />
-                  文本生成模型
-                </label>
-
-                <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
-                  {textModels.map((model) => (
-                    <div
-                      key={model.id}
-                      onClick={() => setSelectedModel(model.id)}
-                      className={`relative p-4 rounded-xl cursor-pointer transition-all duration-200 border ${
-                        selectedModel === model.id
-                          ? "border-purple-400 bg-gradient-to-br from-purple-50 to-indigo-50 shadow-sm"
-                          : "border-gray-100 hover:border-purple-200 bg-white/80 hover:bg-white"
-                      }`}
-                    >
-                      {model.tag && (
-                        <div className="absolute -top-2 -right-2">
-                          <Badge
-                            className={`text-xs ${
-                              model.tag === "推荐"
-                                ? "bg-green-100 text-green-800 hover:bg-green-200"
-                                : "bg-blue-100 text-blue-800 hover:bg-blue-200"
-                            }`}
-                          >
-                            {model.tag}
-                          </Badge>
-                        </div>
-                      )}
-
-                      <div className="flex items-center gap-2">
-                        <div
-                          className={`rounded-full p-1 ${
-                            selectedModel === model.id
-                              ? "bg-gradient-to-r from-purple-500 to-indigo-500"
-                              : "bg-gray-100"
-                          }`}
-                        >
-                          <Sparkles
-                            className={`w-3.5 h-3.5 ${
-                              selectedModel === model.id
-                                ? "text-white"
-                                : "text-gray-500"
-                            }`}
-                          />
-                        </div>
-                        <span
-                          className={`font-medium ${
-                            selectedModel === model.id
-                              ? "text-purple-700"
-                              : "text-gray-700"
-                          }`}
-                        >
-                          {model.name}
-                        </span>
-                      </div>
-
-                      <p className="text-xs text-gray-500 mt-2 pl-6">
-                        {model.description}
-                      </p>
-                    </div>
-                  ))}
-                </div>
-              </div>
-
-              {/* 场景数量选择 */}
-              <div className="space-y-4">
-                <label className="text-sm font-medium text-gray-700 flex items-center gap-1.5">
-                  <ImageIcon className="w-4 h-4 text-pink-500" />
-                  选择场景数量
-                </label>
-
-                <div className="flex gap-3 flex-wrap">
-                  {[2, 4, 6, 8].map((count) => (
-                    <Button
-                      key={count}
-                      variant={selectedCount === count ? "default" : "outline"}
-                      size="sm"
-                      onClick={() => setSelectedCount(count)}
-                      className={`rounded-full px-6 ${
-                        selectedCount === count
-                          ? "bg-gradient-to-r from-pink-500 to-orange-500 hover:from-pink-600 hover:to-orange-600"
-                          : "border-pink-200 text-pink-600 hover:bg-pink-50"
-                      }`}
-                    >
-                      {count}个场景
-                    </Button>
-                  ))}
-                </div>
-              </div>
-
-              {/* 图片比例选择 */}
-              <div className="space-y-4">
-                <label className="text-sm font-medium text-gray-700 flex items-center gap-1.5">
-                  <SlidersHorizontal className="w-4 h-4 text-blue-500" />
-                  图片比例
-                </label>
-
-                <div className="flex gap-3 flex-wrap">
-                  {aspectRatios.map((ratio) => (
-                    <Button
-                      key={ratio.id}
-                      variant={
-                        selectedAspectRatio === ratio.value
-                          ? "default"
-                          : "outline"
-                      }
-                      size="sm"
-                      onClick={() => setSelectedAspectRatio(ratio.value)}
-                      className={`rounded-full px-4 ${
-                        selectedAspectRatio === ratio.value
-                          ? "bg-gradient-to-r from-blue-500 to-indigo-500 hover:from-blue-600 hover:to-indigo-600"
-                          : "border-blue-200 text-blue-600 hover:bg-blue-50"
-                      }`}
-                    >
-                      {ratio.label}
-                    </Button>
-                  ))}
-                </div>
-              </div>
-
-              {/* 高级设置部分 */}
-              <div className="mt-2">
-                <button
-                  className={`w-full flex items-center justify-between p-4 text-left rounded-xl transition-all duration-200 ${
-                    showAdvancedSettings
-                      ? "bg-gradient-to-r from-purple-50 to-indigo-50 shadow-sm"
-                      : "bg-white/50 hover:bg-white/80"
-                  }`}
-                  onClick={() => setShowAdvancedSettings(!showAdvancedSettings)}
-                >
-                  <div className="flex items-center gap-2">
-                    <div
-                      className={`rounded-full p-1.5 ${
-                        showAdvancedSettings
-                          ? "bg-gradient-to-r from-purple-500 to-indigo-500"
-                          : "bg-gray-100"
-                      }`}
-                    >
-                      <Sliders
-                        className={`w-4 h-4 ${
-                          showAdvancedSettings ? "text-white" : "text-gray-500"
-                        }`}
-                      />
-                    </div>
-                    <span
-                      className={`font-medium ${
-                        showAdvancedSettings
-                          ? "text-indigo-700"
-                          : "text-gray-700"
-                      }`}
-                    >
-                      高级设置
-                    </span>
-                  </div>
-                  {showAdvancedSettings ? (
-                    <ChevronDown className="w-5 h-5 text-indigo-500" />
-                  ) : (
-                    <ChevronRight className="w-5 h-5 text-gray-400" />
-                  )}
-                </button>
-
-                {showAdvancedSettings && (
-                  <div className="mt-4 pt-2 pb-1 px-4 bg-white/60 backdrop-blur-sm rounded-xl border border-indigo-100 shadow-sm space-y-6 transition-all duration-300 ease-in-out">
-                    {/* 文本权重设置 */}
-                    <div className="space-y-3 py-3 border-b border-indigo-50">
-                      <div className="flex items-center gap-2">
-                        <div className="rounded-full bg-gradient-to-r from-indigo-400 to-purple-400 p-1.5">
-                          <SlidersHorizontal className="w-3.5 h-3.5 text-white" />
-                        </div>
-                        <Label className="text-sm font-medium text-indigo-800">
-                          文本权重
-                        </Label>
-                      </div>
-                      <p className="text-xs text-gray-500 pl-7">
-                        显示文字（创意描述）对结果图像的影响程度，数值越大图像越接近文字描述，数值越小图像可能更具创造性
-                      </p>
-
-                      <div className="flex flex-col space-y-2 pl-7 pr-2">
-                        <div className="flex justify-between text-xs text-indigo-400 px-1">
-                          <span>更具创造性</span>
-                          <span>更贴近描述</span>
-                        </div>
-                        <div className="bg-gradient-to-r from-indigo-50 to-indigo-100 rounded-full p-1">
-                          <Slider
-                            value={[guidanceScale]}
-                            min={1}
-                            max={10}
-                            step={0.1}
-                            onValueChange={(value) =>
-                              setGuidanceScale(value[0])
-                            }
-                            className="w-full"
-                          />
-                        </div>
-                        <div className="flex justify-between text-xs text-gray-400 px-1">
-                          <span>1.0</span>
-                          <span>10.0</span>
-                        </div>
-                        <div className="text-right text-sm font-medium bg-gradient-to-r from-indigo-500 to-purple-600 bg-clip-text text-transparent">
-                          {guidanceScale.toFixed(1)}
-                        </div>
-                      </div>
-                    </div>
-
-                    {/* 种子数设置 */}
-                    <div className="space-y-3 py-1 pb-3">
-                      <div className="flex items-center gap-2">
-                        <div className="rounded-full bg-gradient-to-r from-indigo-400 to-purple-400 p-1.5">
-                          <Dices className="w-3.5 h-3.5 text-white" />
-                        </div>
-                        <Label className="text-sm font-medium text-indigo-800">
-                          种子数
-                        </Label>
-                      </div>
-                      <p className="text-xs text-gray-500 pl-7">
-                        用于物理定扩初始状态的基值，若随机种子相同并且其他参数相同，则生成图片大概率一致
-                      </p>
-
-                      <RadioGroup
-                        value={seedMode}
-                        onValueChange={(value) =>
-                          setSeedMode(value as "random" | "fixed")
-                        }
-                        className="flex gap-4 pl-7 mt-2"
-                      >
-                        <div className="flex items-center space-x-2">
-                          <RadioGroupItem
-                            value="random"
-                            id="random-seed"
-                            className="text-indigo-600 border-indigo-400"
-                          />
-                          <Label
-                            htmlFor="random-seed"
-                            className="cursor-pointer text-sm text-indigo-700"
-                          >
-                            随机
-                          </Label>
-                        </div>
-                        <div className="flex items-center space-x-2">
-                          <RadioGroupItem
-                            value="fixed"
-                            id="fixed-seed"
-                            className="text-indigo-600 border-indigo-400"
-                          />
-                          <Label
-                            htmlFor="fixed-seed"
-                            className="cursor-pointer text-sm text-indigo-700"
-                          >
-                            固定
-                          </Label>
-                        </div>
-                      </RadioGroup>
-
-                      {seedMode === "fixed" && (
-                        <div className="pl-7 mt-2">
-                          <Input
-                            type="number"
-                            value={seedValue}
-                            onChange={handleSeedValueChange}
-                            min={-1}
-                            max={2147483647}
-                            className="max-w-[200px] border-indigo-200 focus:border-indigo-400 focus:ring-indigo-300/20"
-                          />
-                        </div>
-                      )}
-                    </div>
-                  </div>
-                )}
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-
-        {/* Generate Button */}
-        <div className="text-center mb-8">
-          <Button
-            onClick={handleGenerate}
-            disabled={!content.trim() || isGenerating}
-            size="lg"
-            className="px-12 py-3 text-lg font-medium rounded-full bg-gradient-to-r from-pink-500 to-orange-500 hover:from-pink-600 hover:to-orange-600 disabled:from-gray-300 disabled:to-gray-300 shadow-lg shadow-pink-200"
-          >
-            {isGenerating ? (
-              <>
-                <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-white mr-2" />
-                生成中...
-              </>
-            ) : (
-              <>
-                <Wand2 className="w-5 h-5 mr-2" />
-                生成漫画剧本
-              </>
-            )}
-          </Button>
-        </div>
-
-        {/* Error Display */}
-        {error && (
-          <Card className="mb-8 border-red-200 shadow-lg shadow-red-100/50 bg-white/70 backdrop-blur-sm">
-            <CardContent className="p-4">
-              <p className="text-red-500 text-center">{error}</p>
-            </CardContent>
-          </Card>
-        )}
-
-        {/* Image Generation Error Display */}
-        {imageGenerationError && (
-          <Card className="mb-8 border-red-200 shadow-lg shadow-red-100/50 bg-white/70 backdrop-blur-sm">
-            <CardContent className="p-4">
-              <div className="flex items-center justify-center gap-2 text-red-500">
-                <AlertCircle className="w-4 h-4" />
-                <p>{imageGenerationError}</p>
-              </div>
-            </CardContent>
-          </Card>
-        )}
-
-        {/* Loading State */}
-        {isGenerating && (
-          <Card className="mb-8 border-0 shadow-lg shadow-pink-100/50 bg-white/70 backdrop-blur-sm">
-            <CardContent className="p-8 text-center">
-              <div className="space-y-4">
-                <div className="animate-pulse">
-                  <div className="w-16 h-16 bg-gradient-to-r from-pink-500 to-orange-500 rounded-full mx-auto mb-4 flex items-center justify-center">
-                    <Sparkles className="w-8 h-8 text-white animate-spin" />
-                  </div>
-                </div>
-                <p className="text-gray-600">正在创作漫画剧本...</p>
-                <p className="text-sm text-gray-500">预计需要30秒</p>
-              </div>
-            </CardContent>
-          </Card>
-        )}
-
-        {/* Results Section */}
-        {comicPanels.length > 0 && !isGenerating && (
-          <Card className="border-0 shadow-lg shadow-pink-100/50 bg-white/70 backdrop-blur-sm">
-            <CardContent className="p-6">
-              <div className="mb-6">
-                <h3 className="text-xl font-semibold text-gray-800 mb-2">
-                  生成结果
-                </h3>
-                <p className="text-gray-600 text-sm">
-                  以下是根据您的内容创作的漫画剧本
-                </p>
-              </div>
-
-              <div className="space-y-8">
-                {comicPanels.map((panel, i) => (
-                  <div
-                    key={panel.id}
-                    className="bg-white rounded-xl shadow-md p-5 border border-pink-100"
-                  >
-                    <div className="flex items-center mb-3">
-                      <div className="bg-gradient-to-r from-pink-500 to-orange-500 text-white rounded-full w-8 h-8 flex items-center justify-center mr-2">
-                        {i + 1}
-                      </div>
-                      <h4 className="font-medium text-gray-800">
-                        场景 {i + 1}
-                      </h4>
-                    </div>
-
-                    {/* 当有生成图片时显示图片 */}
-                    {panel.imageUrl &&
-                      panel.imageUrl.includes("http") &&
-                      !panel.imageUrl.includes("placehold.co") && (
-                        <div className="mb-4 rounded-lg overflow-hidden">
-                          <img
-                            src={panel.imageUrl}
-                            alt={`场景 ${i + 1}`}
-                            className="w-full h-auto object-contain"
-                          />
-                          {panel.error && (
-                            <p className="text-red-500 text-xs mt-1 flex items-center">
-                              <AlertCircle className="w-3 h-3 mr-1" />
-                              {panel.error}
-                            </p>
-                          )}
-                        </div>
-                      )}
-
-                    <div className="prose prose-pink max-w-none">
-                      <p className="whitespace-pre-wrap text-gray-700">
-                        {panel.content}
-                      </p>
-                    </div>
-
-                    {/* 如果已生成图片，显示下载按钮 */}
-                    {panel.imageUrl &&
-                      panel.imageUrl.includes("http") &&
-                      !panel.imageUrl.includes("placehold.co") && (
-                        <div className="mt-4 flex justify-end">
-                          <Button
-                            size="sm"
-                            variant="outline"
-                            className="text-xs border-pink-200 text-pink-600"
-                            onClick={() =>
-                              handleDownloadImage(
-                                panel.imageUrl,
-                                `场景${i + 1}`
-                              )
-                            }
-                          >
-                            <Download className="w-3 h-3 mr-1" />
-                            下载图片
-                          </Button>
-                        </div>
-                      )}
-                  </div>
-                ))}
-              </div>
-
-              {/* 统一的生成漫画按钮 */}
-              <div className="mt-8 pt-6 border-t border-pink-100 text-center">
-                <div className="flex flex-col items-center">
-                  <div className="mb-4 bg-white/90 rounded-xl px-4 py-2 shadow-sm border border-pink-100">
-                    <div className="text-sm text-gray-600 flex flex-wrap justify-center gap-x-4 gap-y-2">
-                      <div className="flex items-center gap-1">
-                        <Sparkles className="w-3.5 h-3.5 text-purple-500" />
-                        <span>
-                          模型:{" "}
-                          <span className="font-medium text-purple-600">
-                            {
-                              textModels.find((m) => m.id === selectedModel)
-                                ?.name
-                            }
-                          </span>
-                        </span>
-                      </div>
-                      <div className="flex items-center gap-1">
-                        <SlidersHorizontal className="w-3.5 h-3.5 text-blue-500" />
-                        <span>
-                          图片比例:{" "}
-                          <span className="font-medium text-blue-600">
-                            {selectedAspectRatio}
-                          </span>
-                        </span>
-                      </div>
-                      {showAdvancedSettings && (
-                        <>
-                          <div className="flex items-center gap-1">
-                            <SlidersHorizontal className="w-3.5 h-3.5 text-indigo-500" />
-                            <span>
-                              文本权重:{" "}
-                              <span className="font-medium text-indigo-600">
-                                {guidanceScale.toFixed(1)}
-                              </span>
-                            </span>
-                          </div>
-                          <div className="flex items-center gap-1">
-                            <Dices className="w-3.5 h-3.5 text-purple-500" />
-                            <span>
-                              种子数:{" "}
-                              <span className="font-medium text-purple-600">
-                                {seedMode === "random" ? "随机" : seedValue}
-                              </span>
-                            </span>
-                          </div>
-                        </>
-                      )}
-                    </div>
-                  </div>
-                  <Button
-                    onClick={handleGenerateImages}
-                    disabled={isGeneratingImages || comicPanels.length === 0}
-                    size="lg"
-                    className="px-12 py-3 text-lg font-medium rounded-full bg-gradient-to-r from-orange-400 to-pink-500 hover:from-orange-500 hover:to-pink-600 disabled:opacity-70 shadow-lg shadow-orange-200"
-                  >
-                    {isGeneratingImages ? (
-                      <>
-                        <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-white mr-2" />
-                        生成中...
-                      </>
-                    ) : (
-                      <>
-                        <ImageIcon className="w-5 h-5 mr-2" />
-                        根据剧本生成漫画
-                      </>
-                    )}
-                  </Button>
-                  <p className="text-sm text-gray-500 mt-2">
-                    {isGeneratingImages
-                      ? "正在生成漫画图像，请稍候..."
-                      : "将基于上述剧本内容生成完整的漫画图像"}
-                  </p>
-                </div>
-              </div>
-
-              {/* Social Actions */}
-              <div className="mt-8 pt-6 border-t border-pink-100">
-                <div className="flex items-center justify-between">
-                  <div className="flex items-center gap-4">
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      className="text-gray-600 hover:text-pink-600"
-                    >
-                      <Heart className="w-4 h-4 mr-1" />
-                      喜欢
-                    </Button>
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      className="text-gray-600 hover:text-pink-600"
-                    >
-                      <MessageCircle className="w-4 h-4 mr-1" />
-                      评论
-                    </Button>
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      className="text-gray-600 hover:text-pink-600"
-                    >
-                      <Share className="w-4 h-4 mr-1" />
-                      分享
-                    </Button>
-                  </div>
-                  <Badge
-                    variant="secondary"
-                    className="bg-green-100 text-green-700"
-                  >
-                    生成成功
-                  </Badge>
-                </div>
-              </div>
-            </CardContent>
-          </Card>
-        )}
-      </div>
-
-      {/* Footer */}
-      <div className="text-center py-8 text-gray-500 text-sm">
-        <p>让每个人都能轻松将文字转化为视觉故事 💫</p>
-      </div>
-    </div>
-  );
-}
diff --git a/.history/app/page_20250802003552.tsx b/.history/app/page_20250802003552.tsx
deleted file mode 100644
index d2e4401..0000000
--- a/.history/app/page_20250802003552.tsx
+++ /dev/null
@@ -1,952 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { Card, CardContent } from "@/components/ui/card";
-import { Button } from "@/components/ui/button";
-import { Textarea } from "@/components/ui/textarea";
-import { Badge } from "@/components/ui/badge";
-import { Slider } from "@/components/ui/slider";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import {
-  Sparkles,
-  ImageIcon,
-  Download,
-  Eye,
-  Heart,
-  MessageCircle,
-  Share,
-  Wand2,
-  AlertCircle,
-  ChevronDown,
-  ChevronRight,
-  Sliders,
-  Dices, // 替换 Dice 为 Dices
-  SlidersHorizontal,
-} from "lucide-react";
-import { ComicPanel } from "@/lib/types";
-
-// 图片比例选项
-type AspectRatio = {
-  id: string;
-  label: string;
-  value: string; // 实际的宽高比值，如 "1:1"
-};
-
-// 文本生成模型选项
-type TextModel = {
-  id: string;
-  name: string;
-  description: string;
-  tag?: string; // 可选标签，如"推荐"、"快速"等
-  category: string; // 模型分类
-};
-
-// 模型分类
-type ModelCategory = {
-  id: string;
-  name: string;
-  description?: string;
-};
-
-const modelCategories: ModelCategory[] = [
-  { id: "recommended", name: "推荐模型", description: "我们精选的高质量模型" },
-  {
-    id: "specialized",
-    name: "专业模型",
-    description: "针对特定领域优化的模型",
-  },
-  { id: "fast", name: "快速模型", description: "响应速度快，成本较低" },
-  { id: "experimental", name: "实验模型", description: "新技术，可能有惊喜" },
-];
-
-const textModels: TextModel[] = [
-  // 推荐模型
-  {
-    id: "qwen-32b",
-    name: "QwQ-32B",
-    description: "高质量剧本生成，细节丰富，逻辑连贯",
-    tag: "推荐",
-    category: "recommended",
-  },
-  {
-    id: "gpt-4",
-    name: "GPT-4",
-    description: "功能强大，擅长复杂剧情创作",
-    category: "recommended",
-  },
-
-  // 专业模型
-  {
-    id: "story-xl",
-    name: "StoryXL",
-    description: "专为故事叙事优化，情节发展自然",
-    tag: "专业",
-    category: "specialized",
-  },
-  {
-    id: "comic-pro",
-    name: "ComicPro",
-    description: "针对漫画场景和对白优化",
-    tag: "专业",
-    category: "specialized",
-  },
-  {
-    id: "fantasy-writer",
-    name: "奇幻创作家",
-    description: "擅长创作魔幻、奇幻类故事",
-    category: "specialized",
-  },
-
-  // 快速模型
-  {
-    id: "deepseek-7b",
-    name: "DeepSeek-7B",
-    description: "生成速度快，质量适中",
-    tag: "快速",
-    category: "fast",
-  },
-  {
-    id: "gpt-3.5",
-    name: "GPT-3.5",
-    description: "平衡的选择，适合大多数场景",
-    category: "fast",
-  },
-  {
-    id: "llama-13b",
-    name: "Llama-13B",
-    description: "开源模型，速度快，资源占用少",
-    category: "fast",
-  },
-
-  // 实验模型
-  {
-    id: "mixtral-8x7b",
-    name: "Mixtral-8x7B",
-    description: "混合专家模型，创意表现出色",
-    tag: "新品",
-    category: "experimental",
-  },
-  {
-    id: "claude-3",
-    name: "Claude 3",
-    description: "擅长长篇创意写作，风格多样",
-    tag: "新品",
-    category: "experimental",
-  },
-];
-
-const aspectRatios: AspectRatio[] = [
-  { id: "1:1", label: "1:1", value: "1:1" },
-  { id: "3:4", label: "3:4", value: "3:4" },
-  { id: "4:3", label: "4:3", value: "4:3" },
-  { id: "16:9", label: "16:9", value: "16:9" },
-  { id: "9:16", label: "9:16", value: "9:16" },
-  { id: "2:3", label: "2:3", value: "2:3" },
-  { id: "3:2", label: "3:2", value: "3:2" },
-  { id: "21:9", label: "21:9", value: "21:9" },
-  { id: "custom", label: "自定义", value: "custom" },
-];
-
-export default function ComicGenerator() {
-  const [content, setContent] = useState("");
-  const [selectedCount, setSelectedCount] = useState(4);
-  const [selectedAspectRatio, setSelectedAspectRatio] =
-    useState<string>("16:9");
-  const [isGenerating, setIsGenerating] = useState(false);
-  const [isGeneratingImages, setIsGeneratingImages] = useState(false);
-  const [comicPanels, setComicPanels] = useState<ComicPanel[]>([]);
-  const [error, setError] = useState<string | null>(null);
-  const [imageGenerationError, setImageGenerationError] = useState<
-    string | null
-  >(null);
-  const [showAdvancedSettings, setShowAdvancedSettings] = useState(false);
-  const [guidanceScale, setGuidanceScale] = useState(2.5); // 默认值为2.5
-  const [seedMode, setSeedMode] = useState<"random" | "fixed">("random"); // 默认为随机
-  const [seedValue, setSeedValue] = useState<number>(1234);
-  const [selectedModel, setSelectedModel] = useState<string>("qwen-32b"); // 默认使用QwQ-32B模型
-  const [activeCategory, setActiveCategory] = useState<string>("recommended"); // 默认显示推荐模型
-  const maxLength = 2000;
-
-  const sampleArticle = `春天来了，小明走在回家的路上。突然，他发现路边有一只受伤的小猫。小明毫不犹豫地将小猫抱起，送到了附近的宠物医院。医生说小猫只是轻微擦伤，很快就能康复。从那天起，小明每天都会去医院看望小猫，直到它完全康复。`;
-
-  const handleGenerate = async () => {
-    if (!content.trim()) return;
-
-    setIsGenerating(true);
-    setError(null);
-
-    try {
-      const response = await fetch("/api/generate", {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({
-          content,
-          count: selectedCount,
-          model: selectedModel, // 添加模型参数
-        }),
-      });
-
-      const data = await response.json();
-
-      if (!response.ok) {
-        throw new Error(data.error || "生成漫画失败，请稍后再试");
-      }
-
-      setComicPanels(data.comicPanels);
-    } catch (err) {
-      setError(err instanceof Error ? err.message : "生成漫画时发生未知错误");
-      console.error("生成漫画错误:", err);
-    } finally {
-      setIsGenerating(false);
-    }
-  };
-
-  const handleGenerateImages = async () => {
-    if (comicPanels.length === 0) return;
-
-    setIsGeneratingImages(true);
-    setImageGenerationError(null);
-
-    // 确定要使用的种子值
-    const seed = seedMode === "random" ? -1 : seedValue;
-
-    try {
-      const response = await fetch("/api/generate-images", {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({
-          comicPanels,
-          aspectRatio: selectedAspectRatio,
-          seed: seed,
-          guidance_scale: guidanceScale,
-        }),
-      });
-
-      const data = await response.json();
-
-      if (!response.ok) {
-        throw new Error(data.error || "生成漫画图片失败，请稍后再试");
-      }
-
-      // 更新面板，包含新的图像URL
-      setComicPanels(data.comicPanels);
-    } catch (err) {
-      setImageGenerationError(
-        err instanceof Error ? err.message : "生成漫画图片时发生未知错误"
-      );
-      console.error("生成漫画图片错误:", err);
-    } finally {
-      setIsGeneratingImages(false);
-    }
-  };
-
-  const handleDownloadImage = (imageUrl: string, sceneName: string) => {
-    const a = document.createElement("a");
-    a.href = imageUrl;
-    a.download = `漫画场景_${sceneName}.jpg`;
-    a.click();
-  };
-
-  const fillSample = () => {
-    setContent(sampleArticle);
-  };
-
-  const getGridLayout = (count: number) => {
-    switch (count) {
-      case 2:
-        return "grid-cols-1 md:grid-cols-2";
-      case 4:
-        return "grid-cols-2";
-      case 6:
-        return "grid-cols-2 md:grid-cols-3";
-      case 8:
-        return "grid-cols-2 md:grid-cols-4";
-      default:
-        return "grid-cols-2";
-    }
-  };
-
-  const handleSeedValueChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const value = parseInt(e.target.value);
-    // 确保值在合法范围内 [-1, 2147483647]
-    if (!isNaN(value) && value >= -1 && value <= 2147483647) {
-      setSeedValue(value);
-    }
-  };
-
-  return (
-    <div className="min-h-screen bg-gradient-to-br from-pink-50 to-orange-50">
-      {/* Header */}
-      <div className="bg-white/80 backdrop-blur-md border-b border-pink-100 sticky top-0 z-10">
-        <div className="max-w-4xl mx-auto px-4 py-4 flex items-center justify-between">
-          <div className="flex items-center gap-2">
-            <div className="w-8 h-8 bg-gradient-to-r from-pink-500 to-orange-500 rounded-lg flex items-center justify-center">
-              <Sparkles className="w-5 h-5 text-white" />
-            </div>
-            <span className="font-bold text-gray-800">漫画生成器</span>
-          </div>
-          <div className="flex items-center gap-4">
-            <Badge variant="secondary" className="bg-pink-100 text-pink-700">
-              Beta
-            </Badge>
-          </div>
-        </div>
-      </div>
-
-      <div className="max-w-4xl mx-auto px-4 py-8">
-        {/* Hero Section */}
-        <div className="text-center mb-12">
-          <h1 className="text-4xl font-bold bg-gradient-to-r from-pink-600 to-orange-600 bg-clip-text text-transparent mb-4">
-            文章转漫画生成器
-          </h1>
-          <p className="text-gray-600 text-lg mb-8">
-            将你的文字变成精彩的漫画故事 ✨
-          </p>
-        </div>
-
-        {/* Input Section */}
-        <Card className="mb-8 border-0 shadow-lg shadow-pink-100/50 bg-white/70 backdrop-blur-sm">
-          <CardContent className="p-6">
-            <div className="space-y-4">
-              <div className="flex items-center justify-between">
-                <label className="text-sm font-medium text-gray-700">
-                  输入你的文章内容或创意
-                </label>
-                <span
-                  className={`text-sm ${
-                    content.length > maxLength
-                      ? "text-red-500"
-                      : "text-gray-500"
-                  }`}
-                >
-                  还可以输入 {maxLength - content.length} 字
-                </span>
-              </div>
-
-              <Textarea
-                value={content}
-                onChange={(e) => setContent(e.target.value)}
-                placeholder="在这里输入你的故事内容或创意，我们会将其转化为精美的漫画剧本..."
-                className="min-h-[120px] resize-none border-pink-200 focus:border-pink-400 focus:ring-pink-400/20"
-                maxLength={maxLength}
-              />
-
-              <div className="flex justify-start">
-                <Button
-                  variant="outline"
-                  size="sm"
-                  onClick={fillSample}
-                  className="border-pink-200 text-pink-600 hover:bg-pink-50 bg-transparent"
-                >
-                  试试示例文章
-                </Button>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-
-        {/* Configuration Section */}
-        <Card className="mb-8 border-0 shadow-lg shadow-pink-100/50 bg-white/70 backdrop-blur-sm">
-          <CardContent className="p-6">
-            <div className="space-y-6">
-              {/* 文本生成模型选择 */}
-              <div className="space-y-4">
-                <label className="text-sm font-medium text-gray-700 flex items-center gap-1.5">
-                  <Sparkles className="w-4 h-4 text-purple-500" />
-                  文本生成模型
-                </label>
-
-                {/* 模型分类选择器 */}
-                <div className="flex items-center gap-2 overflow-x-auto pb-2 no-scrollbar">
-                  {modelCategories.map((category) => (
-                    <button
-                      key={category.id}
-                      onClick={() => setActiveCategory(category.id)}
-                      className={`flex items-center gap-2 px-4 py-2 rounded-full whitespace-nowrap transition-all duration-200 ${
-                        activeCategory === category.id
-                          ? "bg-gradient-to-r from-purple-500 to-indigo-500 text-white"
-                          : "bg-white text-gray-700 hover:bg-gray-100"
-                      }`}
-                    >
-                      {activeCategory === category.id && (
-                        <div className="w-2 h-2 rounded-full bg-white"></div>
-                      )}
-                      {category.name}
-                    </button>
-                  ))}
-                </div>
-
-                {/* 当前分类描述 */}
-                {modelCategories.find((c) => c.id === activeCategory)
-                  ?.description && (
-                  <p className="text-xs text-gray-500 mt-1">
-                    {
-                      modelCategories.find((c) => c.id === activeCategory)
-                        ?.description
-                    }
-                  </p>
-                )}
-
-                {/* 模型列表 - 根据分类过滤 */}
-                <div className="space-y-4 mt-4">
-                  <div className="h-[340px] overflow-y-auto pr-2 custom-scrollbar">
-                    <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
-                      {textModels
-                        .filter((model) => model.category === activeCategory)
-                        .map((model) => (
-                          <div
-                            key={model.id}
-                            onClick={() => setSelectedModel(model.id)}
-                            className={`relative p-4 rounded-xl cursor-pointer transition-all duration-200 border ${
-                              selectedModel === model.id
-                                ? "border-purple-400 bg-gradient-to-br from-purple-50 to-indigo-50 shadow-sm"
-                                : "border-gray-100 hover:border-purple-200 bg-white/80 hover:bg-white"
-                            }`}
-                          >
-                            {model.tag && (
-                              <div className="absolute -top-2 -right-2">
-                                <Badge
-                                  className={`text-xs ${
-                                    model.tag === "推荐"
-                                      ? "bg-green-100 text-green-800 hover:bg-green-200"
-                                      : model.tag === "专业"
-                                      ? "bg-indigo-100 text-indigo-800 hover:bg-indigo-200"
-                                      : model.tag === "新品"
-                                      ? "bg-orange-100 text-orange-800 hover:bg-orange-200"
-                                      : "bg-blue-100 text-blue-800 hover:bg-blue-200"
-                                  }`}
-                                >
-                                  {model.tag}
-                                </Badge>
-                              </div>
-                            )}
-
-                            <div className="flex items-center gap-2">
-                              <div
-                                className={`rounded-full p-1 ${
-                                  selectedModel === model.id
-                                    ? "bg-gradient-to-r from-purple-500 to-indigo-500"
-                                    : "bg-gray-100"
-                                }`}
-                              >
-                                <Sparkles
-                                  className={`w-3.5 h-3.5 ${
-                                    selectedModel === model.id
-                                      ? "text-white"
-                                      : "text-gray-500"
-                                  }`}
-                                />
-                              </div>
-                              <span
-                                className={`font-medium ${
-                                  selectedModel === model.id
-                                    ? "text-purple-700"
-                                    : "text-gray-700"
-                                }`}
-                              >
-                                {model.name}
-                              </span>
-                            </div>
-
-                            <p className="text-xs text-gray-500 mt-2 pl-6">
-                              {model.description}
-                            </p>
-                          </div>
-                        ))}
-                    </div>
-                  </div>
-
-                  {/* 模型数量和选择提示 */}
-                  <div className="text-xs text-gray-500 flex justify-between">
-                    <span>
-                      当前分类共{" "}
-                      {
-                        textModels.filter(
-                          (model) => model.category === activeCategory
-                        ).length
-                      }{" "}
-                      个模型
-                    </span>
-                    <span>点击卡片选择模型</span>
-                  </div>
-                </div>
-              </div>
-
-              {/* 场景数量选择 */}
-              <div className="space-y-4">
-                <label className="text-sm font-medium text-gray-700 flex items-center gap-1.5">
-                  <ImageIcon className="w-4 h-4 text-pink-500" />
-                  选择场景数量
-                </label>
-
-                <div className="flex gap-3 flex-wrap">
-                  {[2, 4, 6, 8].map((count) => (
-                    <Button
-                      key={count}
-                      variant={selectedCount === count ? "default" : "outline"}
-                      size="sm"
-                      onClick={() => setSelectedCount(count)}
-                      className={`rounded-full px-6 ${
-                        selectedCount === count
-                          ? "bg-gradient-to-r from-pink-500 to-orange-500 hover:from-pink-600 hover:to-orange-600"
-                          : "border-pink-200 text-pink-600 hover:bg-pink-50"
-                      }`}
-                    >
-                      {count}个场景
-                    </Button>
-                  ))}
-                </div>
-              </div>
-
-              {/* 图片比例选择 */}
-              <div className="space-y-4">
-                <label className="text-sm font-medium text-gray-700 flex items-center gap-1.5">
-                  <SlidersHorizontal className="w-4 h-4 text-blue-500" />
-                  图片比例
-                </label>
-
-                <div className="flex gap-3 flex-wrap">
-                  {aspectRatios.map((ratio) => (
-                    <Button
-                      key={ratio.id}
-                      variant={
-                        selectedAspectRatio === ratio.value
-                          ? "default"
-                          : "outline"
-                      }
-                      size="sm"
-                      onClick={() => setSelectedAspectRatio(ratio.value)}
-                      className={`rounded-full px-4 ${
-                        selectedAspectRatio === ratio.value
-                          ? "bg-gradient-to-r from-blue-500 to-indigo-500 hover:from-blue-600 hover:to-indigo-600"
-                          : "border-blue-200 text-blue-600 hover:bg-blue-50"
-                      }`}
-                    >
-                      {ratio.label}
-                    </Button>
-                  ))}
-                </div>
-              </div>
-
-              {/* 高级设置部分 */}
-              <div className="mt-2">
-                <button
-                  className={`w-full flex items-center justify-between p-4 text-left rounded-xl transition-all duration-200 ${
-                    showAdvancedSettings
-                      ? "bg-gradient-to-r from-purple-50 to-indigo-50 shadow-sm"
-                      : "bg-white/50 hover:bg-white/80"
-                  }`}
-                  onClick={() => setShowAdvancedSettings(!showAdvancedSettings)}
-                >
-                  <div className="flex items-center gap-2">
-                    <div
-                      className={`rounded-full p-1.5 ${
-                        showAdvancedSettings
-                          ? "bg-gradient-to-r from-purple-500 to-indigo-500"
-                          : "bg-gray-100"
-                      }`}
-                    >
-                      <Sliders
-                        className={`w-4 h-4 ${
-                          showAdvancedSettings ? "text-white" : "text-gray-500"
-                        }`}
-                      />
-                    </div>
-                    <span
-                      className={`font-medium ${
-                        showAdvancedSettings
-                          ? "text-indigo-700"
-                          : "text-gray-700"
-                      }`}
-                    >
-                      高级设置
-                    </span>
-                  </div>
-                  {showAdvancedSettings ? (
-                    <ChevronDown className="w-5 h-5 text-indigo-500" />
-                  ) : (
-                    <ChevronRight className="w-5 h-5 text-gray-400" />
-                  )}
-                </button>
-
-                {showAdvancedSettings && (
-                  <div className="mt-4 pt-2 pb-1 px-4 bg-white/60 backdrop-blur-sm rounded-xl border border-indigo-100 shadow-sm space-y-6 transition-all duration-300 ease-in-out">
-                    {/* 文本权重设置 */}
-                    <div className="space-y-3 py-3 border-b border-indigo-50">
-                      <div className="flex items-center gap-2">
-                        <div className="rounded-full bg-gradient-to-r from-indigo-400 to-purple-400 p-1.5">
-                          <SlidersHorizontal className="w-3.5 h-3.5 text-white" />
-                        </div>
-                        <Label className="text-sm font-medium text-indigo-800">
-                          文本权重
-                        </Label>
-                      </div>
-                      <p className="text-xs text-gray-500 pl-7">
-                        显示文字（创意描述）对结果图像的影响程度，数值越大图像越接近文字描述，数值越小图像可能更具创造性
-                      </p>
-
-                      <div className="flex flex-col space-y-2 pl-7 pr-2">
-                        <div className="flex justify-between text-xs text-indigo-400 px-1">
-                          <span>更具创造性</span>
-                          <span>更贴近描述</span>
-                        </div>
-                        <div className="bg-gradient-to-r from-indigo-50 to-indigo-100 rounded-full p-1">
-                          <Slider
-                            value={[guidanceScale]}
-                            min={1}
-                            max={10}
-                            step={0.1}
-                            onValueChange={(value) =>
-                              setGuidanceScale(value[0])
-                            }
-                            className="w-full"
-                          />
-                        </div>
-                        <div className="flex justify-between text-xs text-gray-400 px-1">
-                          <span>1.0</span>
-                          <span>10.0</span>
-                        </div>
-                        <div className="text-right text-sm font-medium bg-gradient-to-r from-indigo-500 to-purple-600 bg-clip-text text-transparent">
-                          {guidanceScale.toFixed(1)}
-                        </div>
-                      </div>
-                    </div>
-
-                    {/* 种子数设置 */}
-                    <div className="space-y-3 py-1 pb-3">
-                      <div className="flex items-center gap-2">
-                        <div className="rounded-full bg-gradient-to-r from-indigo-400 to-purple-400 p-1.5">
-                          <Dices className="w-3.5 h-3.5 text-white" />
-                        </div>
-                        <Label className="text-sm font-medium text-indigo-800">
-                          种子数
-                        </Label>
-                      </div>
-                      <p className="text-xs text-gray-500 pl-7">
-                        用于物理定扩初始状态的基值，若随机种子相同并且其他参数相同，则生成图片大概率一致
-                      </p>
-
-                      <RadioGroup
-                        value={seedMode}
-                        onValueChange={(value) =>
-                          setSeedMode(value as "random" | "fixed")
-                        }
-                        className="flex gap-4 pl-7 mt-2"
-                      >
-                        <div className="flex items-center space-x-2">
-                          <RadioGroupItem
-                            value="random"
-                            id="random-seed"
-                            className="text-indigo-600 border-indigo-400"
-                          />
-                          <Label
-                            htmlFor="random-seed"
-                            className="cursor-pointer text-sm text-indigo-700"
-                          >
-                            随机
-                          </Label>
-                        </div>
-                        <div className="flex items-center space-x-2">
-                          <RadioGroupItem
-                            value="fixed"
-                            id="fixed-seed"
-                            className="text-indigo-600 border-indigo-400"
-                          />
-                          <Label
-                            htmlFor="fixed-seed"
-                            className="cursor-pointer text-sm text-indigo-700"
-                          >
-                            固定
-                          </Label>
-                        </div>
-                      </RadioGroup>
-
-                      {seedMode === "fixed" && (
-                        <div className="pl-7 mt-2">
-                          <Input
-                            type="number"
-                            value={seedValue}
-                            onChange={handleSeedValueChange}
-                            min={-1}
-                            max={2147483647}
-                            className="max-w-[200px] border-indigo-200 focus:border-indigo-400 focus:ring-indigo-300/20"
-                          />
-                        </div>
-                      )}
-                    </div>
-                  </div>
-                )}
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-
-        {/* Generate Button */}
-        <div className="text-center mb-8">
-          <Button
-            onClick={handleGenerate}
-            disabled={!content.trim() || isGenerating}
-            size="lg"
-            className="px-12 py-3 text-lg font-medium rounded-full bg-gradient-to-r from-pink-500 to-orange-500 hover:from-pink-600 hover:to-orange-600 disabled:from-gray-300 disabled:to-gray-300 shadow-lg shadow-pink-200"
-          >
-            {isGenerating ? (
-              <>
-                <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-white mr-2" />
-                生成中...
-              </>
-            ) : (
-              <>
-                <Wand2 className="w-5 h-5 mr-2" />
-                生成漫画剧本
-              </>
-            )}
-          </Button>
-        </div>
-
-        {/* Error Display */}
-        {error && (
-          <Card className="mb-8 border-red-200 shadow-lg shadow-red-100/50 bg-white/70 backdrop-blur-sm">
-            <CardContent className="p-4">
-              <p className="text-red-500 text-center">{error}</p>
-            </CardContent>
-          </Card>
-        )}
-
-        {/* Image Generation Error Display */}
-        {imageGenerationError && (
-          <Card className="mb-8 border-red-200 shadow-lg shadow-red-100/50 bg-white/70 backdrop-blur-sm">
-            <CardContent className="p-4">
-              <div className="flex items-center justify-center gap-2 text-red-500">
-                <AlertCircle className="w-4 h-4" />
-                <p>{imageGenerationError}</p>
-              </div>
-            </CardContent>
-          </Card>
-        )}
-
-        {/* Loading State */}
-        {isGenerating && (
-          <Card className="mb-8 border-0 shadow-lg shadow-pink-100/50 bg-white/70 backdrop-blur-sm">
-            <CardContent className="p-8 text-center">
-              <div className="space-y-4">
-                <div className="animate-pulse">
-                  <div className="w-16 h-16 bg-gradient-to-r from-pink-500 to-orange-500 rounded-full mx-auto mb-4 flex items-center justify-center">
-                    <Sparkles className="w-8 h-8 text-white animate-spin" />
-                  </div>
-                </div>
-                <p className="text-gray-600">正在创作漫画剧本...</p>
-                <p className="text-sm text-gray-500">预计需要30秒</p>
-              </div>
-            </CardContent>
-          </Card>
-        )}
-
-        {/* Results Section */}
-        {comicPanels.length > 0 && !isGenerating && (
-          <Card className="border-0 shadow-lg shadow-pink-100/50 bg-white/70 backdrop-blur-sm">
-            <CardContent className="p-6">
-              <div className="mb-6">
-                <h3 className="text-xl font-semibold text-gray-800 mb-2">
-                  生成结果
-                </h3>
-                <p className="text-gray-600 text-sm">
-                  以下是根据您的内容创作的漫画剧本
-                </p>
-              </div>
-
-              <div className="space-y-8">
-                {comicPanels.map((panel, i) => (
-                  <div
-                    key={panel.id}
-                    className="bg-white rounded-xl shadow-md p-5 border border-pink-100"
-                  >
-                    <div className="flex items-center mb-3">
-                      <div className="bg-gradient-to-r from-pink-500 to-orange-500 text-white rounded-full w-8 h-8 flex items-center justify-center mr-2">
-                        {i + 1}
-                      </div>
-                      <h4 className="font-medium text-gray-800">
-                        场景 {i + 1}
-                      </h4>
-                    </div>
-
-                    {/* 当有生成图片时显示图片 */}
-                    {panel.imageUrl &&
-                      panel.imageUrl.includes("http") &&
-                      !panel.imageUrl.includes("placehold.co") && (
-                        <div className="mb-4 rounded-lg overflow-hidden">
-                          <img
-                            src={panel.imageUrl}
-                            alt={`场景 ${i + 1}`}
-                            className="w-full h-auto object-contain"
-                          />
-                          {panel.error && (
-                            <p className="text-red-500 text-xs mt-1 flex items-center">
-                              <AlertCircle className="w-3 h-3 mr-1" />
-                              {panel.error}
-                            </p>
-                          )}
-                        </div>
-                      )}
-
-                    <div className="prose prose-pink max-w-none">
-                      <p className="whitespace-pre-wrap text-gray-700">
-                        {panel.content}
-                      </p>
-                    </div>
-
-                    {/* 如果已生成图片，显示下载按钮 */}
-                    {panel.imageUrl &&
-                      panel.imageUrl.includes("http") &&
-                      !panel.imageUrl.includes("placehold.co") && (
-                        <div className="mt-4 flex justify-end">
-                          <Button
-                            size="sm"
-                            variant="outline"
-                            className="text-xs border-pink-200 text-pink-600"
-                            onClick={() =>
-                              handleDownloadImage(
-                                panel.imageUrl,
-                                `场景${i + 1}`
-                              )
-                            }
-                          >
-                            <Download className="w-3 h-3 mr-1" />
-                            下载图片
-                          </Button>
-                        </div>
-                      )}
-                  </div>
-                ))}
-              </div>
-
-              {/* 统一的生成漫画按钮 */}
-              <div className="mt-8 pt-6 border-t border-pink-100 text-center">
-                <div className="flex flex-col items-center">
-                  <div className="mb-4 bg-white/90 rounded-xl px-4 py-2 shadow-sm border border-pink-100">
-                    <div className="text-sm text-gray-600 flex flex-wrap justify-center gap-x-4 gap-y-2">
-                      <div className="flex items-center gap-1">
-                        <Sparkles className="w-3.5 h-3.5 text-purple-500" />
-                        <span>
-                          模型:{" "}
-                          <span className="font-medium text-purple-600">
-                            {
-                              textModels.find((m) => m.id === selectedModel)
-                                ?.name
-                            }
-                          </span>
-                        </span>
-                      </div>
-                      <div className="flex items-center gap-1">
-                        <SlidersHorizontal className="w-3.5 h-3.5 text-blue-500" />
-                        <span>
-                          图片比例:{" "}
-                          <span className="font-medium text-blue-600">
-                            {selectedAspectRatio}
-                          </span>
-                        </span>
-                      </div>
-                      {showAdvancedSettings && (
-                        <>
-                          <div className="flex items-center gap-1">
-                            <SlidersHorizontal className="w-3.5 h-3.5 text-indigo-500" />
-                            <span>
-                              文本权重:{" "}
-                              <span className="font-medium text-indigo-600">
-                                {guidanceScale.toFixed(1)}
-                              </span>
-                            </span>
-                          </div>
-                          <div className="flex items-center gap-1">
-                            <Dices className="w-3.5 h-3.5 text-purple-500" />
-                            <span>
-                              种子数:{" "}
-                              <span className="font-medium text-purple-600">
-                                {seedMode === "random" ? "随机" : seedValue}
-                              </span>
-                            </span>
-                          </div>
-                        </>
-                      )}
-                    </div>
-                  </div>
-                  <Button
-                    onClick={handleGenerateImages}
-                    disabled={isGeneratingImages || comicPanels.length === 0}
-                    size="lg"
-                    className="px-12 py-3 text-lg font-medium rounded-full bg-gradient-to-r from-orange-400 to-pink-500 hover:from-orange-500 hover:to-pink-600 disabled:opacity-70 shadow-lg shadow-orange-200"
-                  >
-                    {isGeneratingImages ? (
-                      <>
-                        <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-white mr-2" />
-                        生成中...
-                      </>
-                    ) : (
-                      <>
-                        <ImageIcon className="w-5 h-5 mr-2" />
-                        根据剧本生成漫画
-                      </>
-                    )}
-                  </Button>
-                  <p className="text-sm text-gray-500 mt-2">
-                    {isGeneratingImages
-                      ? "正在生成漫画图像，请稍候..."
-                      : "将基于上述剧本内容生成完整的漫画图像"}
-                  </p>
-                </div>
-              </div>
-
-              {/* Social Actions */}
-              <div className="mt-8 pt-6 border-t border-pink-100">
-                <div className="flex items-center justify-between">
-                  <div className="flex items-center gap-4">
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      className="text-gray-600 hover:text-pink-600"
-                    >
-                      <Heart className="w-4 h-4 mr-1" />
-                      喜欢
-                    </Button>
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      className="text-gray-600 hover:text-pink-600"
-                    >
-                      <MessageCircle className="w-4 h-4 mr-1" />
-                      评论
-                    </Button>
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      className="text-gray-600 hover:text-pink-600"
-                    >
-                      <Share className="w-4 h-4 mr-1" />
-                      分享
-                    </Button>
-                  </div>
-                  <Badge
-                    variant="secondary"
-                    className="bg-green-100 text-green-700"
-                  >
-                    生成成功
-                  </Badge>
-                </div>
-              </div>
-            </CardContent>
-          </Card>
-        )}
-      </div>
-
-      {/* Footer */}
-      <div className="text-center py-8 text-gray-500 text-sm">
-        <p>让每个人都能轻松将文字转化为视觉故事 💫</p>
-      </div>
-    </div>
-  );
-}
diff --git a/.history/app/page_20250802004958.tsx b/.history/app/page_20250802004958.tsx
deleted file mode 100644
index d2e4401..0000000
--- a/.history/app/page_20250802004958.tsx
+++ /dev/null
@@ -1,952 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { Card, CardContent } from "@/components/ui/card";
-import { Button } from "@/components/ui/button";
-import { Textarea } from "@/components/ui/textarea";
-import { Badge } from "@/components/ui/badge";
-import { Slider } from "@/components/ui/slider";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import {
-  Sparkles,
-  ImageIcon,
-  Download,
-  Eye,
-  Heart,
-  MessageCircle,
-  Share,
-  Wand2,
-  AlertCircle,
-  ChevronDown,
-  ChevronRight,
-  Sliders,
-  Dices, // 替换 Dice 为 Dices
-  SlidersHorizontal,
-} from "lucide-react";
-import { ComicPanel } from "@/lib/types";
-
-// 图片比例选项
-type AspectRatio = {
-  id: string;
-  label: string;
-  value: string; // 实际的宽高比值，如 "1:1"
-};
-
-// 文本生成模型选项
-type TextModel = {
-  id: string;
-  name: string;
-  description: string;
-  tag?: string; // 可选标签，如"推荐"、"快速"等
-  category: string; // 模型分类
-};
-
-// 模型分类
-type ModelCategory = {
-  id: string;
-  name: string;
-  description?: string;
-};
-
-const modelCategories: ModelCategory[] = [
-  { id: "recommended", name: "推荐模型", description: "我们精选的高质量模型" },
-  {
-    id: "specialized",
-    name: "专业模型",
-    description: "针对特定领域优化的模型",
-  },
-  { id: "fast", name: "快速模型", description: "响应速度快，成本较低" },
-  { id: "experimental", name: "实验模型", description: "新技术，可能有惊喜" },
-];
-
-const textModels: TextModel[] = [
-  // 推荐模型
-  {
-    id: "qwen-32b",
-    name: "QwQ-32B",
-    description: "高质量剧本生成，细节丰富，逻辑连贯",
-    tag: "推荐",
-    category: "recommended",
-  },
-  {
-    id: "gpt-4",
-    name: "GPT-4",
-    description: "功能强大，擅长复杂剧情创作",
-    category: "recommended",
-  },
-
-  // 专业模型
-  {
-    id: "story-xl",
-    name: "StoryXL",
-    description: "专为故事叙事优化，情节发展自然",
-    tag: "专业",
-    category: "specialized",
-  },
-  {
-    id: "comic-pro",
-    name: "ComicPro",
-    description: "针对漫画场景和对白优化",
-    tag: "专业",
-    category: "specialized",
-  },
-  {
-    id: "fantasy-writer",
-    name: "奇幻创作家",
-    description: "擅长创作魔幻、奇幻类故事",
-    category: "specialized",
-  },
-
-  // 快速模型
-  {
-    id: "deepseek-7b",
-    name: "DeepSeek-7B",
-    description: "生成速度快，质量适中",
-    tag: "快速",
-    category: "fast",
-  },
-  {
-    id: "gpt-3.5",
-    name: "GPT-3.5",
-    description: "平衡的选择，适合大多数场景",
-    category: "fast",
-  },
-  {
-    id: "llama-13b",
-    name: "Llama-13B",
-    description: "开源模型，速度快，资源占用少",
-    category: "fast",
-  },
-
-  // 实验模型
-  {
-    id: "mixtral-8x7b",
-    name: "Mixtral-8x7B",
-    description: "混合专家模型，创意表现出色",
-    tag: "新品",
-    category: "experimental",
-  },
-  {
-    id: "claude-3",
-    name: "Claude 3",
-    description: "擅长长篇创意写作，风格多样",
-    tag: "新品",
-    category: "experimental",
-  },
-];
-
-const aspectRatios: AspectRatio[] = [
-  { id: "1:1", label: "1:1", value: "1:1" },
-  { id: "3:4", label: "3:4", value: "3:4" },
-  { id: "4:3", label: "4:3", value: "4:3" },
-  { id: "16:9", label: "16:9", value: "16:9" },
-  { id: "9:16", label: "9:16", value: "9:16" },
-  { id: "2:3", label: "2:3", value: "2:3" },
-  { id: "3:2", label: "3:2", value: "3:2" },
-  { id: "21:9", label: "21:9", value: "21:9" },
-  { id: "custom", label: "自定义", value: "custom" },
-];
-
-export default function ComicGenerator() {
-  const [content, setContent] = useState("");
-  const [selectedCount, setSelectedCount] = useState(4);
-  const [selectedAspectRatio, setSelectedAspectRatio] =
-    useState<string>("16:9");
-  const [isGenerating, setIsGenerating] = useState(false);
-  const [isGeneratingImages, setIsGeneratingImages] = useState(false);
-  const [comicPanels, setComicPanels] = useState<ComicPanel[]>([]);
-  const [error, setError] = useState<string | null>(null);
-  const [imageGenerationError, setImageGenerationError] = useState<
-    string | null
-  >(null);
-  const [showAdvancedSettings, setShowAdvancedSettings] = useState(false);
-  const [guidanceScale, setGuidanceScale] = useState(2.5); // 默认值为2.5
-  const [seedMode, setSeedMode] = useState<"random" | "fixed">("random"); // 默认为随机
-  const [seedValue, setSeedValue] = useState<number>(1234);
-  const [selectedModel, setSelectedModel] = useState<string>("qwen-32b"); // 默认使用QwQ-32B模型
-  const [activeCategory, setActiveCategory] = useState<string>("recommended"); // 默认显示推荐模型
-  const maxLength = 2000;
-
-  const sampleArticle = `春天来了，小明走在回家的路上。突然，他发现路边有一只受伤的小猫。小明毫不犹豫地将小猫抱起，送到了附近的宠物医院。医生说小猫只是轻微擦伤，很快就能康复。从那天起，小明每天都会去医院看望小猫，直到它完全康复。`;
-
-  const handleGenerate = async () => {
-    if (!content.trim()) return;
-
-    setIsGenerating(true);
-    setError(null);
-
-    try {
-      const response = await fetch("/api/generate", {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({
-          content,
-          count: selectedCount,
-          model: selectedModel, // 添加模型参数
-        }),
-      });
-
-      const data = await response.json();
-
-      if (!response.ok) {
-        throw new Error(data.error || "生成漫画失败，请稍后再试");
-      }
-
-      setComicPanels(data.comicPanels);
-    } catch (err) {
-      setError(err instanceof Error ? err.message : "生成漫画时发生未知错误");
-      console.error("生成漫画错误:", err);
-    } finally {
-      setIsGenerating(false);
-    }
-  };
-
-  const handleGenerateImages = async () => {
-    if (comicPanels.length === 0) return;
-
-    setIsGeneratingImages(true);
-    setImageGenerationError(null);
-
-    // 确定要使用的种子值
-    const seed = seedMode === "random" ? -1 : seedValue;
-
-    try {
-      const response = await fetch("/api/generate-images", {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({
-          comicPanels,
-          aspectRatio: selectedAspectRatio,
-          seed: seed,
-          guidance_scale: guidanceScale,
-        }),
-      });
-
-      const data = await response.json();
-
-      if (!response.ok) {
-        throw new Error(data.error || "生成漫画图片失败，请稍后再试");
-      }
-
-      // 更新面板，包含新的图像URL
-      setComicPanels(data.comicPanels);
-    } catch (err) {
-      setImageGenerationError(
-        err instanceof Error ? err.message : "生成漫画图片时发生未知错误"
-      );
-      console.error("生成漫画图片错误:", err);
-    } finally {
-      setIsGeneratingImages(false);
-    }
-  };
-
-  const handleDownloadImage = (imageUrl: string, sceneName: string) => {
-    const a = document.createElement("a");
-    a.href = imageUrl;
-    a.download = `漫画场景_${sceneName}.jpg`;
-    a.click();
-  };
-
-  const fillSample = () => {
-    setContent(sampleArticle);
-  };
-
-  const getGridLayout = (count: number) => {
-    switch (count) {
-      case 2:
-        return "grid-cols-1 md:grid-cols-2";
-      case 4:
-        return "grid-cols-2";
-      case 6:
-        return "grid-cols-2 md:grid-cols-3";
-      case 8:
-        return "grid-cols-2 md:grid-cols-4";
-      default:
-        return "grid-cols-2";
-    }
-  };
-
-  const handleSeedValueChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const value = parseInt(e.target.value);
-    // 确保值在合法范围内 [-1, 2147483647]
-    if (!isNaN(value) && value >= -1 && value <= 2147483647) {
-      setSeedValue(value);
-    }
-  };
-
-  return (
-    <div className="min-h-screen bg-gradient-to-br from-pink-50 to-orange-50">
-      {/* Header */}
-      <div className="bg-white/80 backdrop-blur-md border-b border-pink-100 sticky top-0 z-10">
-        <div className="max-w-4xl mx-auto px-4 py-4 flex items-center justify-between">
-          <div className="flex items-center gap-2">
-            <div className="w-8 h-8 bg-gradient-to-r from-pink-500 to-orange-500 rounded-lg flex items-center justify-center">
-              <Sparkles className="w-5 h-5 text-white" />
-            </div>
-            <span className="font-bold text-gray-800">漫画生成器</span>
-          </div>
-          <div className="flex items-center gap-4">
-            <Badge variant="secondary" className="bg-pink-100 text-pink-700">
-              Beta
-            </Badge>
-          </div>
-        </div>
-      </div>
-
-      <div className="max-w-4xl mx-auto px-4 py-8">
-        {/* Hero Section */}
-        <div className="text-center mb-12">
-          <h1 className="text-4xl font-bold bg-gradient-to-r from-pink-600 to-orange-600 bg-clip-text text-transparent mb-4">
-            文章转漫画生成器
-          </h1>
-          <p className="text-gray-600 text-lg mb-8">
-            将你的文字变成精彩的漫画故事 ✨
-          </p>
-        </div>
-
-        {/* Input Section */}
-        <Card className="mb-8 border-0 shadow-lg shadow-pink-100/50 bg-white/70 backdrop-blur-sm">
-          <CardContent className="p-6">
-            <div className="space-y-4">
-              <div className="flex items-center justify-between">
-                <label className="text-sm font-medium text-gray-700">
-                  输入你的文章内容或创意
-                </label>
-                <span
-                  className={`text-sm ${
-                    content.length > maxLength
-                      ? "text-red-500"
-                      : "text-gray-500"
-                  }`}
-                >
-                  还可以输入 {maxLength - content.length} 字
-                </span>
-              </div>
-
-              <Textarea
-                value={content}
-                onChange={(e) => setContent(e.target.value)}
-                placeholder="在这里输入你的故事内容或创意，我们会将其转化为精美的漫画剧本..."
-                className="min-h-[120px] resize-none border-pink-200 focus:border-pink-400 focus:ring-pink-400/20"
-                maxLength={maxLength}
-              />
-
-              <div className="flex justify-start">
-                <Button
-                  variant="outline"
-                  size="sm"
-                  onClick={fillSample}
-                  className="border-pink-200 text-pink-600 hover:bg-pink-50 bg-transparent"
-                >
-                  试试示例文章
-                </Button>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-
-        {/* Configuration Section */}
-        <Card className="mb-8 border-0 shadow-lg shadow-pink-100/50 bg-white/70 backdrop-blur-sm">
-          <CardContent className="p-6">
-            <div className="space-y-6">
-              {/* 文本生成模型选择 */}
-              <div className="space-y-4">
-                <label className="text-sm font-medium text-gray-700 flex items-center gap-1.5">
-                  <Sparkles className="w-4 h-4 text-purple-500" />
-                  文本生成模型
-                </label>
-
-                {/* 模型分类选择器 */}
-                <div className="flex items-center gap-2 overflow-x-auto pb-2 no-scrollbar">
-                  {modelCategories.map((category) => (
-                    <button
-                      key={category.id}
-                      onClick={() => setActiveCategory(category.id)}
-                      className={`flex items-center gap-2 px-4 py-2 rounded-full whitespace-nowrap transition-all duration-200 ${
-                        activeCategory === category.id
-                          ? "bg-gradient-to-r from-purple-500 to-indigo-500 text-white"
-                          : "bg-white text-gray-700 hover:bg-gray-100"
-                      }`}
-                    >
-                      {activeCategory === category.id && (
-                        <div className="w-2 h-2 rounded-full bg-white"></div>
-                      )}
-                      {category.name}
-                    </button>
-                  ))}
-                </div>
-
-                {/* 当前分类描述 */}
-                {modelCategories.find((c) => c.id === activeCategory)
-                  ?.description && (
-                  <p className="text-xs text-gray-500 mt-1">
-                    {
-                      modelCategories.find((c) => c.id === activeCategory)
-                        ?.description
-                    }
-                  </p>
-                )}
-
-                {/* 模型列表 - 根据分类过滤 */}
-                <div className="space-y-4 mt-4">
-                  <div className="h-[340px] overflow-y-auto pr-2 custom-scrollbar">
-                    <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
-                      {textModels
-                        .filter((model) => model.category === activeCategory)
-                        .map((model) => (
-                          <div
-                            key={model.id}
-                            onClick={() => setSelectedModel(model.id)}
-                            className={`relative p-4 rounded-xl cursor-pointer transition-all duration-200 border ${
-                              selectedModel === model.id
-                                ? "border-purple-400 bg-gradient-to-br from-purple-50 to-indigo-50 shadow-sm"
-                                : "border-gray-100 hover:border-purple-200 bg-white/80 hover:bg-white"
-                            }`}
-                          >
-                            {model.tag && (
-                              <div className="absolute -top-2 -right-2">
-                                <Badge
-                                  className={`text-xs ${
-                                    model.tag === "推荐"
-                                      ? "bg-green-100 text-green-800 hover:bg-green-200"
-                                      : model.tag === "专业"
-                                      ? "bg-indigo-100 text-indigo-800 hover:bg-indigo-200"
-                                      : model.tag === "新品"
-                                      ? "bg-orange-100 text-orange-800 hover:bg-orange-200"
-                                      : "bg-blue-100 text-blue-800 hover:bg-blue-200"
-                                  }`}
-                                >
-                                  {model.tag}
-                                </Badge>
-                              </div>
-                            )}
-
-                            <div className="flex items-center gap-2">
-                              <div
-                                className={`rounded-full p-1 ${
-                                  selectedModel === model.id
-                                    ? "bg-gradient-to-r from-purple-500 to-indigo-500"
-                                    : "bg-gray-100"
-                                }`}
-                              >
-                                <Sparkles
-                                  className={`w-3.5 h-3.5 ${
-                                    selectedModel === model.id
-                                      ? "text-white"
-                                      : "text-gray-500"
-                                  }`}
-                                />
-                              </div>
-                              <span
-                                className={`font-medium ${
-                                  selectedModel === model.id
-                                    ? "text-purple-700"
-                                    : "text-gray-700"
-                                }`}
-                              >
-                                {model.name}
-                              </span>
-                            </div>
-
-                            <p className="text-xs text-gray-500 mt-2 pl-6">
-                              {model.description}
-                            </p>
-                          </div>
-                        ))}
-                    </div>
-                  </div>
-
-                  {/* 模型数量和选择提示 */}
-                  <div className="text-xs text-gray-500 flex justify-between">
-                    <span>
-                      当前分类共{" "}
-                      {
-                        textModels.filter(
-                          (model) => model.category === activeCategory
-                        ).length
-                      }{" "}
-                      个模型
-                    </span>
-                    <span>点击卡片选择模型</span>
-                  </div>
-                </div>
-              </div>
-
-              {/* 场景数量选择 */}
-              <div className="space-y-4">
-                <label className="text-sm font-medium text-gray-700 flex items-center gap-1.5">
-                  <ImageIcon className="w-4 h-4 text-pink-500" />
-                  选择场景数量
-                </label>
-
-                <div className="flex gap-3 flex-wrap">
-                  {[2, 4, 6, 8].map((count) => (
-                    <Button
-                      key={count}
-                      variant={selectedCount === count ? "default" : "outline"}
-                      size="sm"
-                      onClick={() => setSelectedCount(count)}
-                      className={`rounded-full px-6 ${
-                        selectedCount === count
-                          ? "bg-gradient-to-r from-pink-500 to-orange-500 hover:from-pink-600 hover:to-orange-600"
-                          : "border-pink-200 text-pink-600 hover:bg-pink-50"
-                      }`}
-                    >
-                      {count}个场景
-                    </Button>
-                  ))}
-                </div>
-              </div>
-
-              {/* 图片比例选择 */}
-              <div className="space-y-4">
-                <label className="text-sm font-medium text-gray-700 flex items-center gap-1.5">
-                  <SlidersHorizontal className="w-4 h-4 text-blue-500" />
-                  图片比例
-                </label>
-
-                <div className="flex gap-3 flex-wrap">
-                  {aspectRatios.map((ratio) => (
-                    <Button
-                      key={ratio.id}
-                      variant={
-                        selectedAspectRatio === ratio.value
-                          ? "default"
-                          : "outline"
-                      }
-                      size="sm"
-                      onClick={() => setSelectedAspectRatio(ratio.value)}
-                      className={`rounded-full px-4 ${
-                        selectedAspectRatio === ratio.value
-                          ? "bg-gradient-to-r from-blue-500 to-indigo-500 hover:from-blue-600 hover:to-indigo-600"
-                          : "border-blue-200 text-blue-600 hover:bg-blue-50"
-                      }`}
-                    >
-                      {ratio.label}
-                    </Button>
-                  ))}
-                </div>
-              </div>
-
-              {/* 高级设置部分 */}
-              <div className="mt-2">
-                <button
-                  className={`w-full flex items-center justify-between p-4 text-left rounded-xl transition-all duration-200 ${
-                    showAdvancedSettings
-                      ? "bg-gradient-to-r from-purple-50 to-indigo-50 shadow-sm"
-                      : "bg-white/50 hover:bg-white/80"
-                  }`}
-                  onClick={() => setShowAdvancedSettings(!showAdvancedSettings)}
-                >
-                  <div className="flex items-center gap-2">
-                    <div
-                      className={`rounded-full p-1.5 ${
-                        showAdvancedSettings
-                          ? "bg-gradient-to-r from-purple-500 to-indigo-500"
-                          : "bg-gray-100"
-                      }`}
-                    >
-                      <Sliders
-                        className={`w-4 h-4 ${
-                          showAdvancedSettings ? "text-white" : "text-gray-500"
-                        }`}
-                      />
-                    </div>
-                    <span
-                      className={`font-medium ${
-                        showAdvancedSettings
-                          ? "text-indigo-700"
-                          : "text-gray-700"
-                      }`}
-                    >
-                      高级设置
-                    </span>
-                  </div>
-                  {showAdvancedSettings ? (
-                    <ChevronDown className="w-5 h-5 text-indigo-500" />
-                  ) : (
-                    <ChevronRight className="w-5 h-5 text-gray-400" />
-                  )}
-                </button>
-
-                {showAdvancedSettings && (
-                  <div className="mt-4 pt-2 pb-1 px-4 bg-white/60 backdrop-blur-sm rounded-xl border border-indigo-100 shadow-sm space-y-6 transition-all duration-300 ease-in-out">
-                    {/* 文本权重设置 */}
-                    <div className="space-y-3 py-3 border-b border-indigo-50">
-                      <div className="flex items-center gap-2">
-                        <div className="rounded-full bg-gradient-to-r from-indigo-400 to-purple-400 p-1.5">
-                          <SlidersHorizontal className="w-3.5 h-3.5 text-white" />
-                        </div>
-                        <Label className="text-sm font-medium text-indigo-800">
-                          文本权重
-                        </Label>
-                      </div>
-                      <p className="text-xs text-gray-500 pl-7">
-                        显示文字（创意描述）对结果图像的影响程度，数值越大图像越接近文字描述，数值越小图像可能更具创造性
-                      </p>
-
-                      <div className="flex flex-col space-y-2 pl-7 pr-2">
-                        <div className="flex justify-between text-xs text-indigo-400 px-1">
-                          <span>更具创造性</span>
-                          <span>更贴近描述</span>
-                        </div>
-                        <div className="bg-gradient-to-r from-indigo-50 to-indigo-100 rounded-full p-1">
-                          <Slider
-                            value={[guidanceScale]}
-                            min={1}
-                            max={10}
-                            step={0.1}
-                            onValueChange={(value) =>
-                              setGuidanceScale(value[0])
-                            }
-                            className="w-full"
-                          />
-                        </div>
-                        <div className="flex justify-between text-xs text-gray-400 px-1">
-                          <span>1.0</span>
-                          <span>10.0</span>
-                        </div>
-                        <div className="text-right text-sm font-medium bg-gradient-to-r from-indigo-500 to-purple-600 bg-clip-text text-transparent">
-                          {guidanceScale.toFixed(1)}
-                        </div>
-                      </div>
-                    </div>
-
-                    {/* 种子数设置 */}
-                    <div className="space-y-3 py-1 pb-3">
-                      <div className="flex items-center gap-2">
-                        <div className="rounded-full bg-gradient-to-r from-indigo-400 to-purple-400 p-1.5">
-                          <Dices className="w-3.5 h-3.5 text-white" />
-                        </div>
-                        <Label className="text-sm font-medium text-indigo-800">
-                          种子数
-                        </Label>
-                      </div>
-                      <p className="text-xs text-gray-500 pl-7">
-                        用于物理定扩初始状态的基值，若随机种子相同并且其他参数相同，则生成图片大概率一致
-                      </p>
-
-                      <RadioGroup
-                        value={seedMode}
-                        onValueChange={(value) =>
-                          setSeedMode(value as "random" | "fixed")
-                        }
-                        className="flex gap-4 pl-7 mt-2"
-                      >
-                        <div className="flex items-center space-x-2">
-                          <RadioGroupItem
-                            value="random"
-                            id="random-seed"
-                            className="text-indigo-600 border-indigo-400"
-                          />
-                          <Label
-                            htmlFor="random-seed"
-                            className="cursor-pointer text-sm text-indigo-700"
-                          >
-                            随机
-                          </Label>
-                        </div>
-                        <div className="flex items-center space-x-2">
-                          <RadioGroupItem
-                            value="fixed"
-                            id="fixed-seed"
-                            className="text-indigo-600 border-indigo-400"
-                          />
-                          <Label
-                            htmlFor="fixed-seed"
-                            className="cursor-pointer text-sm text-indigo-700"
-                          >
-                            固定
-                          </Label>
-                        </div>
-                      </RadioGroup>
-
-                      {seedMode === "fixed" && (
-                        <div className="pl-7 mt-2">
-                          <Input
-                            type="number"
-                            value={seedValue}
-                            onChange={handleSeedValueChange}
-                            min={-1}
-                            max={2147483647}
-                            className="max-w-[200px] border-indigo-200 focus:border-indigo-400 focus:ring-indigo-300/20"
-                          />
-                        </div>
-                      )}
-                    </div>
-                  </div>
-                )}
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-
-        {/* Generate Button */}
-        <div className="text-center mb-8">
-          <Button
-            onClick={handleGenerate}
-            disabled={!content.trim() || isGenerating}
-            size="lg"
-            className="px-12 py-3 text-lg font-medium rounded-full bg-gradient-to-r from-pink-500 to-orange-500 hover:from-pink-600 hover:to-orange-600 disabled:from-gray-300 disabled:to-gray-300 shadow-lg shadow-pink-200"
-          >
-            {isGenerating ? (
-              <>
-                <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-white mr-2" />
-                生成中...
-              </>
-            ) : (
-              <>
-                <Wand2 className="w-5 h-5 mr-2" />
-                生成漫画剧本
-              </>
-            )}
-          </Button>
-        </div>
-
-        {/* Error Display */}
-        {error && (
-          <Card className="mb-8 border-red-200 shadow-lg shadow-red-100/50 bg-white/70 backdrop-blur-sm">
-            <CardContent className="p-4">
-              <p className="text-red-500 text-center">{error}</p>
-            </CardContent>
-          </Card>
-        )}
-
-        {/* Image Generation Error Display */}
-        {imageGenerationError && (
-          <Card className="mb-8 border-red-200 shadow-lg shadow-red-100/50 bg-white/70 backdrop-blur-sm">
-            <CardContent className="p-4">
-              <div className="flex items-center justify-center gap-2 text-red-500">
-                <AlertCircle className="w-4 h-4" />
-                <p>{imageGenerationError}</p>
-              </div>
-            </CardContent>
-          </Card>
-        )}
-
-        {/* Loading State */}
-        {isGenerating && (
-          <Card className="mb-8 border-0 shadow-lg shadow-pink-100/50 bg-white/70 backdrop-blur-sm">
-            <CardContent className="p-8 text-center">
-              <div className="space-y-4">
-                <div className="animate-pulse">
-                  <div className="w-16 h-16 bg-gradient-to-r from-pink-500 to-orange-500 rounded-full mx-auto mb-4 flex items-center justify-center">
-                    <Sparkles className="w-8 h-8 text-white animate-spin" />
-                  </div>
-                </div>
-                <p className="text-gray-600">正在创作漫画剧本...</p>
-                <p className="text-sm text-gray-500">预计需要30秒</p>
-              </div>
-            </CardContent>
-          </Card>
-        )}
-
-        {/* Results Section */}
-        {comicPanels.length > 0 && !isGenerating && (
-          <Card className="border-0 shadow-lg shadow-pink-100/50 bg-white/70 backdrop-blur-sm">
-            <CardContent className="p-6">
-              <div className="mb-6">
-                <h3 className="text-xl font-semibold text-gray-800 mb-2">
-                  生成结果
-                </h3>
-                <p className="text-gray-600 text-sm">
-                  以下是根据您的内容创作的漫画剧本
-                </p>
-              </div>
-
-              <div className="space-y-8">
-                {comicPanels.map((panel, i) => (
-                  <div
-                    key={panel.id}
-                    className="bg-white rounded-xl shadow-md p-5 border border-pink-100"
-                  >
-                    <div className="flex items-center mb-3">
-                      <div className="bg-gradient-to-r from-pink-500 to-orange-500 text-white rounded-full w-8 h-8 flex items-center justify-center mr-2">
-                        {i + 1}
-                      </div>
-                      <h4 className="font-medium text-gray-800">
-                        场景 {i + 1}
-                      </h4>
-                    </div>
-
-                    {/* 当有生成图片时显示图片 */}
-                    {panel.imageUrl &&
-                      panel.imageUrl.includes("http") &&
-                      !panel.imageUrl.includes("placehold.co") && (
-                        <div className="mb-4 rounded-lg overflow-hidden">
-                          <img
-                            src={panel.imageUrl}
-                            alt={`场景 ${i + 1}`}
-                            className="w-full h-auto object-contain"
-                          />
-                          {panel.error && (
-                            <p className="text-red-500 text-xs mt-1 flex items-center">
-                              <AlertCircle className="w-3 h-3 mr-1" />
-                              {panel.error}
-                            </p>
-                          )}
-                        </div>
-                      )}
-
-                    <div className="prose prose-pink max-w-none">
-                      <p className="whitespace-pre-wrap text-gray-700">
-                        {panel.content}
-                      </p>
-                    </div>
-
-                    {/* 如果已生成图片，显示下载按钮 */}
-                    {panel.imageUrl &&
-                      panel.imageUrl.includes("http") &&
-                      !panel.imageUrl.includes("placehold.co") && (
-                        <div className="mt-4 flex justify-end">
-                          <Button
-                            size="sm"
-                            variant="outline"
-                            className="text-xs border-pink-200 text-pink-600"
-                            onClick={() =>
-                              handleDownloadImage(
-                                panel.imageUrl,
-                                `场景${i + 1}`
-                              )
-                            }
-                          >
-                            <Download className="w-3 h-3 mr-1" />
-                            下载图片
-                          </Button>
-                        </div>
-                      )}
-                  </div>
-                ))}
-              </div>
-
-              {/* 统一的生成漫画按钮 */}
-              <div className="mt-8 pt-6 border-t border-pink-100 text-center">
-                <div className="flex flex-col items-center">
-                  <div className="mb-4 bg-white/90 rounded-xl px-4 py-2 shadow-sm border border-pink-100">
-                    <div className="text-sm text-gray-600 flex flex-wrap justify-center gap-x-4 gap-y-2">
-                      <div className="flex items-center gap-1">
-                        <Sparkles className="w-3.5 h-3.5 text-purple-500" />
-                        <span>
-                          模型:{" "}
-                          <span className="font-medium text-purple-600">
-                            {
-                              textModels.find((m) => m.id === selectedModel)
-                                ?.name
-                            }
-                          </span>
-                        </span>
-                      </div>
-                      <div className="flex items-center gap-1">
-                        <SlidersHorizontal className="w-3.5 h-3.5 text-blue-500" />
-                        <span>
-                          图片比例:{" "}
-                          <span className="font-medium text-blue-600">
-                            {selectedAspectRatio}
-                          </span>
-                        </span>
-                      </div>
-                      {showAdvancedSettings && (
-                        <>
-                          <div className="flex items-center gap-1">
-                            <SlidersHorizontal className="w-3.5 h-3.5 text-indigo-500" />
-                            <span>
-                              文本权重:{" "}
-                              <span className="font-medium text-indigo-600">
-                                {guidanceScale.toFixed(1)}
-                              </span>
-                            </span>
-                          </div>
-                          <div className="flex items-center gap-1">
-                            <Dices className="w-3.5 h-3.5 text-purple-500" />
-                            <span>
-                              种子数:{" "}
-                              <span className="font-medium text-purple-600">
-                                {seedMode === "random" ? "随机" : seedValue}
-                              </span>
-                            </span>
-                          </div>
-                        </>
-                      )}
-                    </div>
-                  </div>
-                  <Button
-                    onClick={handleGenerateImages}
-                    disabled={isGeneratingImages || comicPanels.length === 0}
-                    size="lg"
-                    className="px-12 py-3 text-lg font-medium rounded-full bg-gradient-to-r from-orange-400 to-pink-500 hover:from-orange-500 hover:to-pink-600 disabled:opacity-70 shadow-lg shadow-orange-200"
-                  >
-                    {isGeneratingImages ? (
-                      <>
-                        <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-white mr-2" />
-                        生成中...
-                      </>
-                    ) : (
-                      <>
-                        <ImageIcon className="w-5 h-5 mr-2" />
-                        根据剧本生成漫画
-                      </>
-                    )}
-                  </Button>
-                  <p className="text-sm text-gray-500 mt-2">
-                    {isGeneratingImages
-                      ? "正在生成漫画图像，请稍候..."
-                      : "将基于上述剧本内容生成完整的漫画图像"}
-                  </p>
-                </div>
-              </div>
-
-              {/* Social Actions */}
-              <div className="mt-8 pt-6 border-t border-pink-100">
-                <div className="flex items-center justify-between">
-                  <div className="flex items-center gap-4">
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      className="text-gray-600 hover:text-pink-600"
-                    >
-                      <Heart className="w-4 h-4 mr-1" />
-                      喜欢
-                    </Button>
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      className="text-gray-600 hover:text-pink-600"
-                    >
-                      <MessageCircle className="w-4 h-4 mr-1" />
-                      评论
-                    </Button>
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      className="text-gray-600 hover:text-pink-600"
-                    >
-                      <Share className="w-4 h-4 mr-1" />
-                      分享
-                    </Button>
-                  </div>
-                  <Badge
-                    variant="secondary"
-                    className="bg-green-100 text-green-700"
-                  >
-                    生成成功
-                  </Badge>
-                </div>
-              </div>
-            </CardContent>
-          </Card>
-        )}
-      </div>
-
-      {/* Footer */}
-      <div className="text-center py-8 text-gray-500 text-sm">
-        <p>让每个人都能轻松将文字转化为视觉故事 💫</p>
-      </div>
-    </div>
-  );
-}
diff --git a/.history/app/page_20250802005113.tsx b/.history/app/page_20250802005113.tsx
deleted file mode 100644
index 5689e77..0000000
--- a/.history/app/page_20250802005113.tsx
+++ /dev/null
@@ -1,1025 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { Card, CardContent } from "@/components/ui/card";
-import { Button } from "@/components/ui/button";
-import { Textarea } from "@/components/ui/textarea";
-import { Badge } from "@/components/ui/badge";
-import { Slider } from "@/components/ui/slider";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import {
-  Sparkles,
-  ImageIcon,
-  Download,
-  Eye,
-  Heart,
-  MessageCircle,
-  Share,
-  Wand2,
-  AlertCircle,
-  ChevronDown,
-  ChevronRight,
-  Sliders,
-  Dices, // 替换 Dice 为 Dices
-  SlidersHorizontal,
-  ChevronsUpDown,
-  Check,
-  ChevronUp,
-} from "lucide-react";
-import { ComicPanel } from "@/lib/types";
-
-// 图片比例选项
-type AspectRatio = {
-  id: string;
-  label: string;
-  value: string; // 实际的宽高比值，如 "1:1"
-};
-
-// 文本生成模型选项
-type TextModel = {
-  id: string;
-  name: string;
-  description: string;
-  tag?: string; // 可选标签，如"推荐"、"快速"等
-  category: string; // 模型分类
-};
-
-// 模型分类
-type ModelCategory = {
-  id: string;
-  name: string;
-  description?: string;
-};
-
-const modelCategories: ModelCategory[] = [
-  { id: "recommended", name: "推荐模型", description: "我们精选的高质量模型" },
-  {
-    id: "specialized",
-    name: "专业模型",
-    description: "针对特定领域优化的模型",
-  },
-  { id: "fast", name: "快速模型", description: "响应速度快，成本较低" },
-  { id: "experimental", name: "实验模型", description: "新技术，可能有惊喜" },
-];
-
-const textModels: TextModel[] = [
-  // 推荐模型
-  {
-    id: "qwen-32b",
-    name: "QwQ-32B",
-    description: "高质量剧本生成，细节丰富，逻辑连贯",
-    tag: "推荐",
-    category: "recommended",
-  },
-  {
-    id: "gpt-4",
-    name: "GPT-4",
-    description: "功能强大，擅长复杂剧情创作",
-    category: "recommended",
-  },
-
-  // 专业模型
-  {
-    id: "story-xl",
-    name: "StoryXL",
-    description: "专为故事叙事优化，情节发展自然",
-    tag: "专业",
-    category: "specialized",
-  },
-  {
-    id: "comic-pro",
-    name: "ComicPro",
-    description: "针对漫画场景和对白优化",
-    tag: "专业",
-    category: "specialized",
-  },
-  {
-    id: "fantasy-writer",
-    name: "奇幻创作家",
-    description: "擅长创作魔幻、奇幻类故事",
-    category: "specialized",
-  },
-
-  // 快速模型
-  {
-    id: "deepseek-7b",
-    name: "DeepSeek-7B",
-    description: "生成速度快，质量适中",
-    tag: "快速",
-    category: "fast",
-  },
-  {
-    id: "gpt-3.5",
-    name: "GPT-3.5",
-    description: "平衡的选择，适合大多数场景",
-    category: "fast",
-  },
-  {
-    id: "llama-13b",
-    name: "Llama-13B",
-    description: "开源模型，速度快，资源占用少",
-    category: "fast",
-  },
-
-  // 实验模型
-  {
-    id: "mixtral-8x7b",
-    name: "Mixtral-8x7B",
-    description: "混合专家模型，创意表现出色",
-    tag: "新品",
-    category: "experimental",
-  },
-  {
-    id: "claude-3",
-    name: "Claude 3",
-    description: "擅长长篇创意写作，风格多样",
-    tag: "新品",
-    category: "experimental",
-  },
-];
-
-const aspectRatios: AspectRatio[] = [
-  { id: "1:1", label: "1:1", value: "1:1" },
-  { id: "3:4", label: "3:4", value: "3:4" },
-  { id: "4:3", label: "4:3", value: "4:3" },
-  { id: "16:9", label: "16:9", value: "16:9" },
-  { id: "9:16", label: "9:16", value: "9:16" },
-  { id: "2:3", label: "2:3", value: "2:3" },
-  { id: "3:2", label: "3:2", value: "3:2" },
-  { id: "21:9", label: "21:9", value: "21:9" },
-  { id: "custom", label: "自定义", value: "custom" },
-];
-
-export default function ComicGenerator() {
-  const [content, setContent] = useState("");
-  const [selectedCount, setSelectedCount] = useState(4);
-  const [selectedAspectRatio, setSelectedAspectRatio] =
-    useState<string>("16:9");
-  const [isGenerating, setIsGenerating] = useState(false);
-  const [isGeneratingImages, setIsGeneratingImages] = useState(false);
-  const [comicPanels, setComicPanels] = useState<ComicPanel[]>([]);
-  const [error, setError] = useState<string | null>(null);
-  const [imageGenerationError, setImageGenerationError] = useState<
-    string | null
-  >(null);
-  const [showAdvancedSettings, setShowAdvancedSettings] = useState(false);
-  const [guidanceScale, setGuidanceScale] = useState(2.5); // 默认值为2.5
-  const [seedMode, setSeedMode] = useState<"random" | "fixed">("random"); // 默认为随机
-  const [seedValue, setSeedValue] = useState<number>(1234);
-  const [selectedModel, setSelectedModel] = useState<string>("qwen-32b"); // 默认使用QwQ-32B模型
-  const [activeCategory, setActiveCategory] = useState<string>("recommended"); // 默认显示推荐模型
-  const [isModelSectionExpanded, setIsModelSectionExpanded] = useState(false);
-  const maxLength = 2000;
-
-  const sampleArticle = `春天来了，小明走在回家的路上。突然，他发现路边有一只受伤的小猫。小明毫不犹豫地将小猫抱起，送到了附近的宠物医院。医生说小猫只是轻微擦伤，很快就能康复。从那天起，小明每天都会去医院看望小猫，直到它完全康复。`;
-
-  const handleGenerate = async () => {
-    if (!content.trim()) return;
-
-    setIsGenerating(true);
-    setError(null);
-
-    try {
-      const response = await fetch("/api/generate", {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({
-          content,
-          count: selectedCount,
-          model: selectedModel, // 添加模型参数
-        }),
-      });
-
-      const data = await response.json();
-
-      if (!response.ok) {
-        throw new Error(data.error || "生成漫画失败，请稍后再试");
-      }
-
-      setComicPanels(data.comicPanels);
-    } catch (err) {
-      setError(err instanceof Error ? err.message : "生成漫画时发生未知错误");
-      console.error("生成漫画错误:", err);
-    } finally {
-      setIsGenerating(false);
-    }
-  };
-
-  const handleGenerateImages = async () => {
-    if (comicPanels.length === 0) return;
-
-    setIsGeneratingImages(true);
-    setImageGenerationError(null);
-
-    // 确定要使用的种子值
-    const seed = seedMode === "random" ? -1 : seedValue;
-
-    try {
-      const response = await fetch("/api/generate-images", {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({
-          comicPanels,
-          aspectRatio: selectedAspectRatio,
-          seed: seed,
-          guidance_scale: guidanceScale,
-        }),
-      });
-
-      const data = await response.json();
-
-      if (!response.ok) {
-        throw new Error(data.error || "生成漫画图片失败，请稍后再试");
-      }
-
-      // 更新面板，包含新的图像URL
-      setComicPanels(data.comicPanels);
-    } catch (err) {
-      setImageGenerationError(
-        err instanceof Error ? err.message : "生成漫画图片时发生未知错误"
-      );
-      console.error("生成漫画图片错误:", err);
-    } finally {
-      setIsGeneratingImages(false);
-    }
-  };
-
-  const handleDownloadImage = (imageUrl: string, sceneName: string) => {
-    const a = document.createElement("a");
-    a.href = imageUrl;
-    a.download = `漫画场景_${sceneName}.jpg`;
-    a.click();
-  };
-
-  const fillSample = () => {
-    setContent(sampleArticle);
-  };
-
-  const getGridLayout = (count: number) => {
-    switch (count) {
-      case 2:
-        return "grid-cols-1 md:grid-cols-2";
-      case 4:
-        return "grid-cols-2";
-      case 6:
-        return "grid-cols-2 md:grid-cols-3";
-      case 8:
-        return "grid-cols-2 md:grid-cols-4";
-      default:
-        return "grid-cols-2";
-    }
-  };
-
-  const handleSeedValueChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const value = parseInt(e.target.value);
-    // 确保值在合法范围内 [-1, 2147483647]
-    if (!isNaN(value) && value >= -1 && value <= 2147483647) {
-      setSeedValue(value);
-    }
-  };
-
-  // 获取当前选中的模型信息
-  const selectedModelInfo = textModels.find(
-    (model) => model.id === selectedModel
-  );
-
-  return (
-    <div className="min-h-screen bg-gradient-to-br from-pink-50 to-orange-50">
-      {/* Header */}
-      <div className="bg-white/80 backdrop-blur-md border-b border-pink-100 sticky top-0 z-10">
-        <div className="max-w-4xl mx-auto px-4 py-4 flex items-center justify-between">
-          <div className="flex items-center gap-2">
-            <div className="w-8 h-8 bg-gradient-to-r from-pink-500 to-orange-500 rounded-lg flex items-center justify-center">
-              <Sparkles className="w-5 h-5 text-white" />
-            </div>
-            <span className="font-bold text-gray-800">漫画生成器</span>
-          </div>
-          <div className="flex items-center gap-4">
-            <Badge variant="secondary" className="bg-pink-100 text-pink-700">
-              Beta
-            </Badge>
-          </div>
-        </div>
-      </div>
-
-      <div className="max-w-4xl mx-auto px-4 py-8">
-        {/* Hero Section */}
-        <div className="text-center mb-12">
-          <h1 className="text-4xl font-bold bg-gradient-to-r from-pink-600 to-orange-600 bg-clip-text text-transparent mb-4">
-            文章转漫画生成器
-          </h1>
-          <p className="text-gray-600 text-lg mb-8">
-            将你的文字变成精彩的漫画故事 ✨
-          </p>
-        </div>
-
-        {/* Input Section */}
-        <Card className="mb-8 border-0 shadow-lg shadow-pink-100/50 bg-white/70 backdrop-blur-sm">
-          <CardContent className="p-6">
-            <div className="space-y-4">
-              <div className="flex items-center justify-between">
-                <label className="text-sm font-medium text-gray-700">
-                  输入你的文章内容或创意
-                </label>
-                <span
-                  className={`text-sm ${
-                    content.length > maxLength
-                      ? "text-red-500"
-                      : "text-gray-500"
-                  }`}
-                >
-                  还可以输入 {maxLength - content.length} 字
-                </span>
-              </div>
-
-              <Textarea
-                value={content}
-                onChange={(e) => setContent(e.target.value)}
-                placeholder="在这里输入你的故事内容或创意，我们会将其转化为精美的漫画剧本..."
-                className="min-h-[120px] resize-none border-pink-200 focus:border-pink-400 focus:ring-pink-400/20"
-                maxLength={maxLength}
-              />
-
-              <div className="flex justify-start">
-                <Button
-                  variant="outline"
-                  size="sm"
-                  onClick={fillSample}
-                  className="border-pink-200 text-pink-600 hover:bg-pink-50 bg-transparent"
-                >
-                  试试示例文章
-                </Button>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-
-        {/* Configuration Section */}
-        <Card className="mb-8 border-0 shadow-lg shadow-pink-100/50 bg-white/70 backdrop-blur-sm">
-          <CardContent className="p-6">
-            <div className="space-y-6">
-              {/* 文本生成模型选择 - 折叠式设计 */}
-              <div>
-                {/* 模型选择器标题与折叠按钮 */}
-                <div
-                  className="flex items-center justify-between cursor-pointer rounded-xl p-4 transition-all duration-200 hover:bg-white/80"
-                  onClick={() =>
-                    setIsModelSectionExpanded(!isModelSectionExpanded)
-                  }
-                >
-                  <div className="flex items-center gap-2">
-                    <div className="rounded-full bg-gradient-to-r from-purple-500 to-indigo-500 p-1.5">
-                      <Sparkles className="w-4 h-4 text-white" />
-                    </div>
-                    <div>
-                      <label className="font-medium text-gray-800">
-                        文本生成模型
-                      </label>
-                      {selectedModelInfo && (
-                        <div className="text-sm text-gray-500 flex items-center gap-1 mt-0.5">
-                          <span>当前：</span>
-                          <span className="font-medium text-purple-600">
-                            {selectedModelInfo.name}
-                          </span>
-                          {selectedModelInfo.tag && (
-                            <Badge
-                              className={`ml-1.5 text-[10px] h-4 px-1.5 ${
-                                selectedModelInfo.tag === "推荐"
-                                  ? "bg-green-100 text-green-800"
-                                  : selectedModelInfo.tag === "专业"
-                                  ? "bg-indigo-100 text-indigo-800"
-                                  : selectedModelInfo.tag === "新品"
-                                  ? "bg-orange-100 text-orange-800"
-                                  : "bg-blue-100 text-blue-800"
-                              }`}
-                            >
-                              {selectedModelInfo.tag}
-                            </Badge>
-                          )}
-                        </div>
-                      )}
-                    </div>
-                  </div>
-                  <div className="text-gray-500">
-                    {isModelSectionExpanded ? (
-                      <ChevronUp className="w-5 h-5" />
-                    ) : (
-                      <ChevronDown className="w-5 h-5" />
-                    )}
-                  </div>
-                </div>
-
-                {/* 展开后的完整模型选择区域 */}
-                {isModelSectionExpanded && (
-                  <div className="mt-2 pt-4 border-t border-gray-100 space-y-4 animate-in fade-in slide-in-from-top duration-300">
-                    {/* 模型分类选择器 */}
-                    <div className="flex items-center gap-2 overflow-x-auto pb-2 no-scrollbar">
-                      {modelCategories.map((category) => (
-                        <button
-                          key={category.id}
-                          onClick={(e) => {
-                            e.stopPropagation(); // 防止冒泡触发折叠
-                            setActiveCategory(category.id);
-                          }}
-                          className={`flex items-center gap-2 px-4 py-2 rounded-full whitespace-nowrap transition-all duration-200 ${
-                            activeCategory === category.id
-                              ? "bg-gradient-to-r from-purple-500 to-indigo-500 text-white shadow-sm"
-                              : "bg-white text-gray-700 hover:bg-gray-100"
-                          }`}
-                        >
-                          {activeCategory === category.id && (
-                            <div className="w-2 h-2 rounded-full bg-white"></div>
-                          )}
-                          {category.name}
-                        </button>
-                      ))}
-                    </div>
-
-                    {/* 当前分类描述 */}
-                    {modelCategories.find((c) => c.id === activeCategory)
-                      ?.description && (
-                      <p className="text-xs text-gray-500 mt-1">
-                        {
-                          modelCategories.find((c) => c.id === activeCategory)
-                            ?.description
-                        }
-                      </p>
-                    )}
-
-                    {/* 模型列表 - 根据分类过滤 */}
-                    <div className="space-y-4 mt-2">
-                      <div className="h-[280px] overflow-y-auto pr-2 custom-scrollbar">
-                        <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
-                          {textModels
-                            .filter(
-                              (model) => model.category === activeCategory
-                            )
-                            .map((model) => (
-                              <div
-                                key={model.id}
-                                onClick={(e) => {
-                                  e.stopPropagation(); // 防止冒泡触发折叠
-                                  setSelectedModel(model.id);
-                                }}
-                                className={`relative p-4 rounded-xl cursor-pointer transition-all duration-200 border ${
-                                  selectedModel === model.id
-                                    ? "border-purple-400 bg-gradient-to-br from-purple-50 to-indigo-50 shadow-sm"
-                                    : "border-gray-100 hover:border-purple-200 bg-white/80 hover:bg-white"
-                                }`}
-                              >
-                                {model.tag && (
-                                  <div className="absolute -top-2 -right-2">
-                                    <Badge
-                                      className={`text-xs ${
-                                        model.tag === "推荐"
-                                          ? "bg-green-100 text-green-800 hover:bg-green-200"
-                                          : model.tag === "专业"
-                                          ? "bg-indigo-100 text-indigo-800 hover:bg-indigo-200"
-                                          : model.tag === "新品"
-                                          ? "bg-orange-100 text-orange-800 hover:bg-orange-200"
-                                          : "bg-blue-100 text-blue-800 hover:bg-blue-200"
-                                      }`}
-                                    >
-                                      {model.tag}
-                                    </Badge>
-                                  </div>
-                                )}
-
-                                <div className="flex items-center gap-2">
-                                  <div
-                                    className={`rounded-full p-1 ${
-                                      selectedModel === model.id
-                                        ? "bg-gradient-to-r from-purple-500 to-indigo-500"
-                                        : "bg-gray-100"
-                                    }`}
-                                  >
-                                    <Sparkles
-                                      className={`w-3.5 h-3.5 ${
-                                        selectedModel === model.id
-                                          ? "text-white"
-                                          : "text-gray-500"
-                                      }`}
-                                    />
-                                  </div>
-                                  <span
-                                    className={`font-medium ${
-                                      selectedModel === model.id
-                                        ? "text-purple-700"
-                                        : "text-gray-700"
-                                    }`}
-                                  >
-                                    {model.name}
-                                  </span>
-
-                                  {/* 显示选中标记 */}
-                                  {selectedModel === model.id && (
-                                    <div className="ml-auto">
-                                      <Check className="w-4 h-4 text-purple-500" />
-                                    </div>
-                                  )}
-                                </div>
-
-                                <p className="text-xs text-gray-500 mt-2 pl-6">
-                                  {model.description}
-                                </p>
-                              </div>
-                            ))}
-                        </div>
-                      </div>
-
-                      {/* 模型数量和选择提示 */}
-                      <div className="text-xs text-gray-500 flex justify-between">
-                        <span>
-                          当前分类共{" "}
-                          {
-                            textModels.filter(
-                              (model) => model.category === activeCategory
-                            ).length
-                          }{" "}
-                          个模型
-                        </span>
-                        <span>点击卡片选择模型</span>
-                      </div>
-                    </div>
-                  </div>
-                )}
-              </div>
-
-              {/* 场景数量选择 */}
-              <div className="space-y-4">
-                <label className="text-sm font-medium text-gray-700 flex items-center gap-1.5">
-                  <ImageIcon className="w-4 h-4 text-pink-500" />
-                  选择场景数量
-                </label>
-
-                <div className="flex gap-3 flex-wrap">
-                  {[2, 4, 6, 8].map((count) => (
-                    <Button
-                      key={count}
-                      variant={selectedCount === count ? "default" : "outline"}
-                      size="sm"
-                      onClick={() => setSelectedCount(count)}
-                      className={`rounded-full px-6 ${
-                        selectedCount === count
-                          ? "bg-gradient-to-r from-pink-500 to-orange-500 hover:from-pink-600 hover:to-orange-600"
-                          : "border-pink-200 text-pink-600 hover:bg-pink-50"
-                      }`}
-                    >
-                      {count}个场景
-                    </Button>
-                  ))}
-                </div>
-              </div>
-
-              {/* 图片比例选择 */}
-              <div className="space-y-4">
-                <label className="text-sm font-medium text-gray-700 flex items-center gap-1.5">
-                  <SlidersHorizontal className="w-4 h-4 text-blue-500" />
-                  图片比例
-                </label>
-
-                <div className="flex gap-3 flex-wrap">
-                  {aspectRatios.map((ratio) => (
-                    <Button
-                      key={ratio.id}
-                      variant={
-                        selectedAspectRatio === ratio.value
-                          ? "default"
-                          : "outline"
-                      }
-                      size="sm"
-                      onClick={() => setSelectedAspectRatio(ratio.value)}
-                      className={`rounded-full px-4 ${
-                        selectedAspectRatio === ratio.value
-                          ? "bg-gradient-to-r from-blue-500 to-indigo-500 hover:from-blue-600 hover:to-indigo-600"
-                          : "border-blue-200 text-blue-600 hover:bg-blue-50"
-                      }`}
-                    >
-                      {ratio.label}
-                    </Button>
-                  ))}
-                </div>
-              </div>
-
-              {/* 高级设置部分 */}
-              <div className="mt-2">
-                <button
-                  className={`w-full flex items-center justify-between p-4 text-left rounded-xl transition-all duration-200 ${
-                    showAdvancedSettings
-                      ? "bg-gradient-to-r from-purple-50 to-indigo-50 shadow-sm"
-                      : "bg-white/50 hover:bg-white/80"
-                  }`}
-                  onClick={() => setShowAdvancedSettings(!showAdvancedSettings)}
-                >
-                  <div className="flex items-center gap-2">
-                    <div
-                      className={`rounded-full p-1.5 ${
-                        showAdvancedSettings
-                          ? "bg-gradient-to-r from-purple-500 to-indigo-500"
-                          : "bg-gray-100"
-                      }`}
-                    >
-                      <Sliders
-                        className={`w-4 h-4 ${
-                          showAdvancedSettings ? "text-white" : "text-gray-500"
-                        }`}
-                      />
-                    </div>
-                    <span
-                      className={`font-medium ${
-                        showAdvancedSettings
-                          ? "text-indigo-700"
-                          : "text-gray-700"
-                      }`}
-                    >
-                      高级设置
-                    </span>
-                  </div>
-                  {showAdvancedSettings ? (
-                    <ChevronDown className="w-5 h-5 text-indigo-500" />
-                  ) : (
-                    <ChevronRight className="w-5 h-5 text-gray-400" />
-                  )}
-                </button>
-
-                {showAdvancedSettings && (
-                  <div className="mt-4 pt-2 pb-1 px-4 bg-white/60 backdrop-blur-sm rounded-xl border border-indigo-100 shadow-sm space-y-6 transition-all duration-300 ease-in-out">
-                    {/* 文本权重设置 */}
-                    <div className="space-y-3 py-3 border-b border-indigo-50">
-                      <div className="flex items-center gap-2">
-                        <div className="rounded-full bg-gradient-to-r from-indigo-400 to-purple-400 p-1.5">
-                          <SlidersHorizontal className="w-3.5 h-3.5 text-white" />
-                        </div>
-                        <Label className="text-sm font-medium text-indigo-800">
-                          文本权重
-                        </Label>
-                      </div>
-                      <p className="text-xs text-gray-500 pl-7">
-                        显示文字（创意描述）对结果图像的影响程度，数值越大图像越接近文字描述，数值越小图像可能更具创造性
-                      </p>
-
-                      <div className="flex flex-col space-y-2 pl-7 pr-2">
-                        <div className="flex justify-between text-xs text-indigo-400 px-1">
-                          <span>更具创造性</span>
-                          <span>更贴近描述</span>
-                        </div>
-                        <div className="bg-gradient-to-r from-indigo-50 to-indigo-100 rounded-full p-1">
-                          <Slider
-                            value={[guidanceScale]}
-                            min={1}
-                            max={10}
-                            step={0.1}
-                            onValueChange={(value) =>
-                              setGuidanceScale(value[0])
-                            }
-                            className="w-full"
-                          />
-                        </div>
-                        <div className="flex justify-between text-xs text-gray-400 px-1">
-                          <span>1.0</span>
-                          <span>10.0</span>
-                        </div>
-                        <div className="text-right text-sm font-medium bg-gradient-to-r from-indigo-500 to-purple-600 bg-clip-text text-transparent">
-                          {guidanceScale.toFixed(1)}
-                        </div>
-                      </div>
-                    </div>
-
-                    {/* 种子数设置 */}
-                    <div className="space-y-3 py-1 pb-3">
-                      <div className="flex items-center gap-2">
-                        <div className="rounded-full bg-gradient-to-r from-indigo-400 to-purple-400 p-1.5">
-                          <Dices className="w-3.5 h-3.5 text-white" />
-                        </div>
-                        <Label className="text-sm font-medium text-indigo-800">
-                          种子数
-                        </Label>
-                      </div>
-                      <p className="text-xs text-gray-500 pl-7">
-                        用于物理定扩初始状态的基值，若随机种子相同并且其他参数相同，则生成图片大概率一致
-                      </p>
-
-                      <RadioGroup
-                        value={seedMode}
-                        onValueChange={(value) =>
-                          setSeedMode(value as "random" | "fixed")
-                        }
-                        className="flex gap-4 pl-7 mt-2"
-                      >
-                        <div className="flex items-center space-x-2">
-                          <RadioGroupItem
-                            value="random"
-                            id="random-seed"
-                            className="text-indigo-600 border-indigo-400"
-                          />
-                          <Label
-                            htmlFor="random-seed"
-                            className="cursor-pointer text-sm text-indigo-700"
-                          >
-                            随机
-                          </Label>
-                        </div>
-                        <div className="flex items-center space-x-2">
-                          <RadioGroupItem
-                            value="fixed"
-                            id="fixed-seed"
-                            className="text-indigo-600 border-indigo-400"
-                          />
-                          <Label
-                            htmlFor="fixed-seed"
-                            className="cursor-pointer text-sm text-indigo-700"
-                          >
-                            固定
-                          </Label>
-                        </div>
-                      </RadioGroup>
-
-                      {seedMode === "fixed" && (
-                        <div className="pl-7 mt-2">
-                          <Input
-                            type="number"
-                            value={seedValue}
-                            onChange={handleSeedValueChange}
-                            min={-1}
-                            max={2147483647}
-                            className="max-w-[200px] border-indigo-200 focus:border-indigo-400 focus:ring-indigo-300/20"
-                          />
-                        </div>
-                      )}
-                    </div>
-                  </div>
-                )}
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-
-        {/* Generate Button */}
-        <div className="text-center mb-8">
-          <Button
-            onClick={handleGenerate}
-            disabled={!content.trim() || isGenerating}
-            size="lg"
-            className="px-12 py-3 text-lg font-medium rounded-full bg-gradient-to-r from-pink-500 to-orange-500 hover:from-pink-600 hover:to-orange-600 disabled:from-gray-300 disabled:to-gray-300 shadow-lg shadow-pink-200"
-          >
-            {isGenerating ? (
-              <>
-                <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-white mr-2" />
-                生成中...
-              </>
-            ) : (
-              <>
-                <Wand2 className="w-5 h-5 mr-2" />
-                生成漫画剧本
-              </>
-            )}
-          </Button>
-        </div>
-
-        {/* Error Display */}
-        {error && (
-          <Card className="mb-8 border-red-200 shadow-lg shadow-red-100/50 bg-white/70 backdrop-blur-sm">
-            <CardContent className="p-4">
-              <p className="text-red-500 text-center">{error}</p>
-            </CardContent>
-          </Card>
-        )}
-
-        {/* Image Generation Error Display */}
-        {imageGenerationError && (
-          <Card className="mb-8 border-red-200 shadow-lg shadow-red-100/50 bg-white/70 backdrop-blur-sm">
-            <CardContent className="p-4">
-              <div className="flex items-center justify-center gap-2 text-red-500">
-                <AlertCircle className="w-4 h-4" />
-                <p>{imageGenerationError}</p>
-              </div>
-            </CardContent>
-          </Card>
-        )}
-
-        {/* Loading State */}
-        {isGenerating && (
-          <Card className="mb-8 border-0 shadow-lg shadow-pink-100/50 bg-white/70 backdrop-blur-sm">
-            <CardContent className="p-8 text-center">
-              <div className="space-y-4">
-                <div className="animate-pulse">
-                  <div className="w-16 h-16 bg-gradient-to-r from-pink-500 to-orange-500 rounded-full mx-auto mb-4 flex items-center justify-center">
-                    <Sparkles className="w-8 h-8 text-white animate-spin" />
-                  </div>
-                </div>
-                <p className="text-gray-600">正在创作漫画剧本...</p>
-                <p className="text-sm text-gray-500">预计需要30秒</p>
-              </div>
-            </CardContent>
-          </Card>
-        )}
-
-        {/* Results Section */}
-        {comicPanels.length > 0 && !isGenerating && (
-          <Card className="border-0 shadow-lg shadow-pink-100/50 bg-white/70 backdrop-blur-sm">
-            <CardContent className="p-6">
-              <div className="mb-6">
-                <h3 className="text-xl font-semibold text-gray-800 mb-2">
-                  生成结果
-                </h3>
-                <p className="text-gray-600 text-sm">
-                  以下是根据您的内容创作的漫画剧本
-                </p>
-              </div>
-
-              <div className="space-y-8">
-                {comicPanels.map((panel, i) => (
-                  <div
-                    key={panel.id}
-                    className="bg-white rounded-xl shadow-md p-5 border border-pink-100"
-                  >
-                    <div className="flex items-center mb-3">
-                      <div className="bg-gradient-to-r from-pink-500 to-orange-500 text-white rounded-full w-8 h-8 flex items-center justify-center mr-2">
-                        {i + 1}
-                      </div>
-                      <h4 className="font-medium text-gray-800">
-                        场景 {i + 1}
-                      </h4>
-                    </div>
-
-                    {/* 当有生成图片时显示图片 */}
-                    {panel.imageUrl &&
-                      panel.imageUrl.includes("http") &&
-                      !panel.imageUrl.includes("placehold.co") && (
-                        <div className="mb-4 rounded-lg overflow-hidden">
-                          <img
-                            src={panel.imageUrl}
-                            alt={`场景 ${i + 1}`}
-                            className="w-full h-auto object-contain"
-                          />
-                          {panel.error && (
-                            <p className="text-red-500 text-xs mt-1 flex items-center">
-                              <AlertCircle className="w-3 h-3 mr-1" />
-                              {panel.error}
-                            </p>
-                          )}
-                        </div>
-                      )}
-
-                    <div className="prose prose-pink max-w-none">
-                      <p className="whitespace-pre-wrap text-gray-700">
-                        {panel.content}
-                      </p>
-                    </div>
-
-                    {/* 如果已生成图片，显示下载按钮 */}
-                    {panel.imageUrl &&
-                      panel.imageUrl.includes("http") &&
-                      !panel.imageUrl.includes("placehold.co") && (
-                        <div className="mt-4 flex justify-end">
-                          <Button
-                            size="sm"
-                            variant="outline"
-                            className="text-xs border-pink-200 text-pink-600"
-                            onClick={() =>
-                              handleDownloadImage(
-                                panel.imageUrl,
-                                `场景${i + 1}`
-                              )
-                            }
-                          >
-                            <Download className="w-3 h-3 mr-1" />
-                            下载图片
-                          </Button>
-                        </div>
-                      )}
-                  </div>
-                ))}
-              </div>
-
-              {/* 统一的生成漫画按钮 */}
-              <div className="mt-8 pt-6 border-t border-pink-100 text-center">
-                <div className="flex flex-col items-center">
-                  <div className="mb-4 bg-white/90 rounded-xl px-4 py-2 shadow-sm border border-pink-100">
-                    <div className="text-sm text-gray-600 flex flex-wrap justify-center gap-x-4 gap-y-2">
-                      <div className="flex items-center gap-1">
-                        <Sparkles className="w-3.5 h-3.5 text-purple-500" />
-                        <span>
-                          模型:{" "}
-                          <span className="font-medium text-purple-600">
-                            {
-                              textModels.find((m) => m.id === selectedModel)
-                                ?.name
-                            }
-                          </span>
-                        </span>
-                      </div>
-                      <div className="flex items-center gap-1">
-                        <SlidersHorizontal className="w-3.5 h-3.5 text-blue-500" />
-                        <span>
-                          图片比例:{" "}
-                          <span className="font-medium text-blue-600">
-                            {selectedAspectRatio}
-                          </span>
-                        </span>
-                      </div>
-                      {showAdvancedSettings && (
-                        <>
-                          <div className="flex items-center gap-1">
-                            <SlidersHorizontal className="w-3.5 h-3.5 text-indigo-500" />
-                            <span>
-                              文本权重:{" "}
-                              <span className="font-medium text-indigo-600">
-                                {guidanceScale.toFixed(1)}
-                              </span>
-                            </span>
-                          </div>
-                          <div className="flex items-center gap-1">
-                            <Dices className="w-3.5 h-3.5 text-purple-500" />
-                            <span>
-                              种子数:{" "}
-                              <span className="font-medium text-purple-600">
-                                {seedMode === "random" ? "随机" : seedValue}
-                              </span>
-                            </span>
-                          </div>
-                        </>
-                      )}
-                    </div>
-                  </div>
-                  <Button
-                    onClick={handleGenerateImages}
-                    disabled={isGeneratingImages || comicPanels.length === 0}
-                    size="lg"
-                    className="px-12 py-3 text-lg font-medium rounded-full bg-gradient-to-r from-orange-400 to-pink-500 hover:from-orange-500 hover:to-pink-600 disabled:opacity-70 shadow-lg shadow-orange-200"
-                  >
-                    {isGeneratingImages ? (
-                      <>
-                        <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-white mr-2" />
-                        生成中...
-                      </>
-                    ) : (
-                      <>
-                        <ImageIcon className="w-5 h-5 mr-2" />
-                        根据剧本生成漫画
-                      </>
-                    )}
-                  </Button>
-                  <p className="text-sm text-gray-500 mt-2">
-                    {isGeneratingImages
-                      ? "正在生成漫画图像，请稍候..."
-                      : "将基于上述剧本内容生成完整的漫画图像"}
-                  </p>
-                </div>
-              </div>
-
-              {/* Social Actions */}
-              <div className="mt-8 pt-6 border-t border-pink-100">
-                <div className="flex items-center justify-between">
-                  <div className="flex items-center gap-4">
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      className="text-gray-600 hover:text-pink-600"
-                    >
-                      <Heart className="w-4 h-4 mr-1" />
-                      喜欢
-                    </Button>
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      className="text-gray-600 hover:text-pink-600"
-                    >
-                      <MessageCircle className="w-4 h-4 mr-1" />
-                      评论
-                    </Button>
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      className="text-gray-600 hover:text-pink-600"
-                    >
-                      <Share className="w-4 h-4 mr-1" />
-                      分享
-                    </Button>
-                  </div>
-                  <Badge
-                    variant="secondary"
-                    className="bg-green-100 text-green-700"
-                  >
-                    生成成功
-                  </Badge>
-                </div>
-              </div>
-            </CardContent>
-          </Card>
-        )}
-      </div>
-
-      {/* Footer */}
-      <div className="text-center py-8 text-gray-500 text-sm">
-        <p>让每个人都能轻松将文字转化为视觉故事 💫</p>
-      </div>
-    </div>
-  );
-}
diff --git a/.history/app/page_20250802202343.tsx b/.history/app/page_20250802202343.tsx
deleted file mode 100644
index 93140a0..0000000
--- a/.history/app/page_20250802202343.tsx
+++ /dev/null
@@ -1,1141 +0,0 @@
-"use client";
-
-import { useState, useRef } from "react";
-import { Card, CardContent } from "@/components/ui/card";
-import { Button } from "@/components/ui/button";
-import { Textarea } from "@/components/ui/textarea";
-import { Badge } from "@/components/ui/badge";
-import { Slider } from "@/components/ui/slider";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import {
-  Sparkles,
-  ImageIcon,
-  Download,
-  Eye,
-  Heart,
-  MessageCircle,
-  Share,
-  Wand2,
-  AlertCircle,
-  ChevronDown,
-  ChevronRight,
-  Sliders,
-  Dices, // 替换 Dice 为 Dices
-  SlidersHorizontal,
-  ChevronsUpDown,
-  Check,
-  ChevronUp,
-  Home,
-  HelpCircle,
-  PlusCircle,
-  MinusCircle,
-} from "lucide-react";
-import { ComicPanel } from "@/lib/types";
-
-// 图片比例选项
-type AspectRatio = {
-  id: string;
-  label: string;
-  value: string; // 实际的宽高比值，如 "1:1"
-};
-
-// 文本生成模型选项
-type TextModel = {
-  id: string;
-  name: string;
-  description: string;
-  tag?: string; // 可选标签，如"推荐"、"快速"等
-  category: string; // 模型分类
-};
-
-// 模型分类
-type ModelCategory = {
-  id: string;
-  name: string;
-  description?: string;
-};
-
-const modelCategories: ModelCategory[] = [
-  { id: "recommended", name: "推荐模型", description: "我们精选的高质量模型" },
-  {
-    id: "specialized",
-    name: "专业模型",
-    description: "针对特定领域优化的模型",
-  },
-  { id: "fast", name: "快速模型", description: "响应速度快，成本较低" },
-  { id: "experimental", name: "实验模型", description: "新技术，可能有惊喜" },
-];
-
-const textModels: TextModel[] = [
-  // 推荐模型
-  {
-    id: "qwen-32b",
-    name: "QwQ-32B",
-    description: "高质量剧本生成，细节丰富，逻辑连贯",
-    tag: "推荐",
-    category: "recommended",
-  },
-  {
-    id: "gpt-4",
-    name: "GPT-4",
-    description: "功能强大，擅长复杂剧情创作",
-    category: "recommended",
-  },
-
-  // 专业模型
-  {
-    id: "story-xl",
-    name: "StoryXL",
-    description: "专为故事叙事优化，情节发展自然",
-    tag: "专业",
-    category: "specialized",
-  },
-  {
-    id: "comic-pro",
-    name: "ComicPro",
-    description: "针对漫画场景和对白优化",
-    tag: "专业",
-    category: "specialized",
-  },
-  {
-    id: "fantasy-writer",
-    name: "奇幻创作家",
-    description: "擅长创作魔幻、奇幻类故事",
-    category: "specialized",
-  },
-
-  // 快速模型
-  {
-    id: "deepseek-7b",
-    name: "DeepSeek-7B",
-    description: "生成速度快，质量适中",
-    tag: "快速",
-    category: "fast",
-  },
-  {
-    id: "gpt-3.5",
-    name: "GPT-3.5",
-    description: "平衡的选择，适合大多数场景",
-    category: "fast",
-  },
-  {
-    id: "llama-13b",
-    name: "Llama-13B",
-    description: "开源模型，速度快，资源占用少",
-    category: "fast",
-  },
-
-  // 实验模型
-  {
-    id: "mixtral-8x7b",
-    name: "Mixtral-8x7B",
-    description: "混合专家模型，创意表现出色",
-    tag: "新品",
-    category: "experimental",
-  },
-  {
-    id: "claude-3",
-    name: "Claude 3",
-    description: "擅长长篇创意写作，风格多样",
-    tag: "新品",
-    category: "experimental",
-  },
-];
-
-const aspectRatios: AspectRatio[] = [
-  { id: "1:1", label: "1:1", value: "1:1" },
-  { id: "3:4", label: "3:4", value: "3:4" },
-  { id: "4:3", label: "4:3", value: "4:3" },
-  { id: "16:9", label: "16:9", value: "16:9" },
-  { id: "9:16", label: "9:16", value: "9:16" },
-  { id: "2:3", label: "2:3", value: "2:3" },
-  { id: "3:2", label: "3:2", value: "3:2" },
-  { id: "21:9", label: "21:9", value: "21:9" },
-  { id: "custom", label: "自定义", value: "custom" },
-];
-
-export default function ComicGenerator() {
-  const [content, setContent] = useState("");
-  const [selectedCount, setSelectedCount] = useState(4);
-  const [selectedAspectRatio, setSelectedAspectRatio] =
-    useState<string>("16:9");
-  const [isGenerating, setIsGenerating] = useState(false);
-  const [isGeneratingImages, setIsGeneratingImages] = useState(false);
-  const [comicPanels, setComicPanels] = useState<ComicPanel[]>([]);
-  const [error, setError] = useState<string | null>(null);
-  const [imageGenerationError, setImageGenerationError] = useState<
-    string | null
-  >(null);
-  const [showAdvancedSettings, setShowAdvancedSettings] = useState(false);
-  const [guidanceScale, setGuidanceScale] = useState(2.5); // 默认值为2.5
-  const [seedMode, setSeedMode] = useState<"random" | "fixed">("random"); // 默认为随机
-  const [seedValue, setSeedValue] = useState<number>(1234);
-  const [selectedModel, setSelectedModel] = useState<string>("qwen-32b"); // 默认使用QwQ-32B模型
-  const [activeCategory, setActiveCategory] = useState<string>("recommended"); // 默认显示推荐模型
-  const [isModelSectionExpanded, setIsModelSectionExpanded] = useState(false);
-  const maxLength = 2000;
-  const [activeAccordion, setActiveAccordion] = useState<number | null>(null);
-  const faqRef = useRef<HTMLDivElement>(null);
-  const homeRef = useRef<HTMLDivElement>(null);
-
-  // 处理导航点击，滚动到指定区域
-  const scrollToRef = (ref: React.RefObject<HTMLDivElement>) => {
-    if (ref.current) {
-      ref.current.scrollIntoView({ behavior: "smooth" });
-    }
-  };
-
-  // FAQ数据
-  const faqs = [
-    {
-      question: "漫画生成器是如何工作的？",
-      answer:
-        "我们的漫画生成器基于先进的AI文本和图像生成技术。首先，系统通过文本AI（如QwQ-32B）将您输入的内容转化为详细的漫画剧本，然后使用图像生成AI将剧本转换为精美的漫画图像。整个过程完全自动化，只需几分钟即可完成。",
-    },
-    {
-      question: "我可以自定义生成的漫画样式吗？",
-      answer:
-        "是的，您可以通过多种方式自定义漫画样式。您可以选择不同的图片比例（如1:1、16:9等），调整文本权重（影响图像与文本描述的匹配程度），以及设置种子数（控制生成的随机性）。我们还提供了多种文本生成模型供您选择，每种模型有其独特的创作风格。",
-    },
-    {
-      question: "生成的漫画可以用于商业用途吗？",
-      answer:
-        "生成的漫画作品的版权归您所有，您可以将其用于个人或商业用途。但请注意，如果您使用了他人的文字作为输入，需要确保您有权使用这些内容。此外，我们建议您在商业使用前，仔细检查并可能编辑AI生成的内容，以确保其质量和适用性。",
-    },
-    {
-      question: "有哪些适合生成漫画的内容类型？",
-      answer:
-        "几乎任何类型的故事或创意都可以用于生成漫画。包括但不限于：短篇故事、童话、科幻故事、冒险故事、生活日常、教育内容等。短小精悍、情节清晰的内容通常能获得更好的结果。建议每次提交的文本保持在300-1000字左右，确保故事有明确的开端、发展和结尾。",
-    },
-    {
-      question: "如何获得最佳的漫画生成效果？",
-      answer:
-        "为获得最佳效果，建议：(1) 提供具有明确场景和人物的描述；(2) 确保故事情节连贯且有逻辑；(3) 尝试不同的模型和设置组合；(4) 对于不满意的场景，可以使用刷新功能重新生成；(5) 调整文本权重可以控制生成图像与文本描述的匹配程度，数值越大匹配度越高。",
-    },
-  ];
-
-  // 切换FAQ手风琴状态
-  const toggleAccordion = (index: number) => {
-    setActiveAccordion(activeAccordion === index ? null : index);
-  };
-
-  const sampleArticle = `春天来了，小明走在回家的路上。突然，他发现路边有一只受伤的小猫。小明毫不犹豫地将小猫抱起，送到了附近的宠物医院。医生说小猫只是轻微擦伤，很快就能康复。从那天起，小明每天都会去医院看望小猫，直到它完全康复。`;
-
-  const handleGenerate = async () => {
-    if (!content.trim()) return;
-
-    setIsGenerating(true);
-    setError(null);
-
-    try {
-      const response = await fetch("/api/generate", {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({
-          content,
-          count: selectedCount,
-          model: selectedModel, // 添加模型参数
-        }),
-      });
-
-      const data = await response.json();
-
-      if (!response.ok) {
-        throw new Error(data.error || "生成漫画失败，请稍后再试");
-      }
-
-      setComicPanels(data.comicPanels);
-    } catch (err) {
-      setError(err instanceof Error ? err.message : "生成漫画时发生未知错误");
-      console.error("生成漫画错误:", err);
-    } finally {
-      setIsGenerating(false);
-    }
-  };
-
-  const handleGenerateImages = async () => {
-    if (comicPanels.length === 0) return;
-
-    setIsGeneratingImages(true);
-    setImageGenerationError(null);
-
-    // 确定要使用的种子值
-    const seed = seedMode === "random" ? -1 : seedValue;
-
-    try {
-      const response = await fetch("/api/generate-images", {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({
-          comicPanels,
-          aspectRatio: selectedAspectRatio,
-          seed: seed,
-          guidance_scale: guidanceScale,
-        }),
-      });
-
-      const data = await response.json();
-
-      if (!response.ok) {
-        throw new Error(data.error || "生成漫画图片失败，请稍后再试");
-      }
-
-      // 更新面板，包含新的图像URL
-      setComicPanels(data.comicPanels);
-    } catch (err) {
-      setImageGenerationError(
-        err instanceof Error ? err.message : "生成漫画图片时发生未知错误"
-      );
-      console.error("生成漫画图片错误:", err);
-    } finally {
-      setIsGeneratingImages(false);
-    }
-  };
-
-  const handleDownloadImage = (imageUrl: string, sceneName: string) => {
-    const a = document.createElement("a");
-    a.href = imageUrl;
-    a.download = `漫画场景_${sceneName}.jpg`;
-    a.click();
-  };
-
-  const fillSample = () => {
-    setContent(sampleArticle);
-  };
-
-  const getGridLayout = (count: number) => {
-    switch (count) {
-      case 2:
-        return "grid-cols-1 md:grid-cols-2";
-      case 4:
-        return "grid-cols-2";
-      case 6:
-        return "grid-cols-2 md:grid-cols-3";
-      case 8:
-        return "grid-cols-2 md:grid-cols-4";
-      default:
-        return "grid-cols-2";
-    }
-  };
-
-  const handleSeedValueChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const value = parseInt(e.target.value);
-    // 确保值在合法范围内 [-1, 2147483647]
-    if (!isNaN(value) && value >= -1 && value <= 2147483647) {
-      setSeedValue(value);
-    }
-  };
-
-  // 获取当前选中的模型信息
-  const selectedModelInfo = textModels.find(
-    (model) => model.id === selectedModel
-  );
-
-  return (
-    <div className="min-h-screen bg-gradient-to-br from-pink-50 to-orange-50">
-      {/* 导航栏 */}
-      <div className="bg-white/80 backdrop-blur-md border-b border-pink-100 sticky top-0 z-20">
-        <div className="max-w-4xl mx-auto px-4 py-4 flex items-center justify-between">
-          <div className="flex items-center gap-2">
-            <div className="w-8 h-8 bg-gradient-to-r from-pink-500 to-orange-500 rounded-lg flex items-center justify-center">
-              <Sparkles className="w-5 h-5 text-white" />
-            </div>
-            <span className="font-bold text-gray-800">漫画生成器</span>
-          </div>
-
-          {/* 导航链接 */}
-          <div className="flex items-center gap-4">
-            <button
-              onClick={() => scrollToRef(homeRef)}
-              className="flex items-center gap-1.5 px-3 py-1.5 rounded-full text-sm text-gray-700 hover:bg-pink-50 transition-colors"
-            >
-              <Home className="w-4 h-4" />
-              首页
-            </button>
-            <button
-              onClick={() => scrollToRef(faqRef)}
-              className="flex items-center gap-1.5 px-3 py-1.5 rounded-full text-sm text-gray-700 hover:bg-pink-50 transition-colors"
-            >
-              <HelpCircle className="w-4 h-4" />
-              常见问题
-            </button>
-            <Badge variant="secondary" className="bg-pink-100 text-pink-700">
-              Beta
-            </Badge>
-          </div>
-        </div>
-      </div>
-
-      <div ref={homeRef} className="max-w-4xl mx-auto px-4 py-8">
-        {/* Hero Section */}
-        <div className="text-center mb-12">
-          <h1 className="text-4xl font-bold bg-gradient-to-r from-pink-600 to-orange-600 bg-clip-text text-transparent mb-4">
-            文章转漫画生成器
-          </h1>
-          <p className="text-gray-600 text-lg mb-8">
-            将你的文字变成精彩的漫画故事 ✨
-          </p>
-        </div>
-
-        {/* Input Section */}
-        <Card className="mb-8 border-0 shadow-lg shadow-pink-100/50 bg-white/70 backdrop-blur-sm">
-          <CardContent className="p-6">
-            <div className="space-y-4">
-              <div className="flex items-center justify-between">
-                <label className="text-sm font-medium text-gray-700">
-                  输入你的文章内容或创意
-                </label>
-                <span
-                  className={`text-sm ${
-                    content.length > maxLength
-                      ? "text-red-500"
-                      : "text-gray-500"
-                  }`}
-                >
-                  还可以输入 {maxLength - content.length} 字
-                </span>
-              </div>
-
-              <Textarea
-                value={content}
-                onChange={(e) => setContent(e.target.value)}
-                placeholder="在这里输入你的故事内容或创意，我们会将其转化为精美的漫画剧本..."
-                className="min-h-[120px] resize-none border-pink-200 focus:border-pink-400 focus:ring-pink-400/20"
-                maxLength={maxLength}
-              />
-
-              <div className="flex justify-start">
-                <Button
-                  variant="outline"
-                  size="sm"
-                  onClick={fillSample}
-                  className="border-pink-200 text-pink-600 hover:bg-pink-50 bg-transparent"
-                >
-                  试试示例文章
-                </Button>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-
-        {/* Configuration Section */}
-        <Card className="mb-8 border-0 shadow-lg shadow-pink-100/50 bg-white/70 backdrop-blur-sm">
-          <CardContent className="p-6">
-            <div className="space-y-6">
-              {/* 文本生成模型选择 - 折叠式设计 */}
-              <div>
-                {/* 模型选择器标题与折叠按钮 */}
-                <div
-                  className="flex items-center justify-between cursor-pointer rounded-xl p-4 transition-all duration-200 hover:bg-white/80"
-                  onClick={() =>
-                    setIsModelSectionExpanded(!isModelSectionExpanded)
-                  }
-                >
-                  <div className="flex items-center gap-2">
-                    <div className="rounded-full bg-gradient-to-r from-purple-500 to-indigo-500 p-1.5">
-                      <Sparkles className="w-4 h-4 text-white" />
-                    </div>
-                    <div>
-                      <label className="font-medium text-gray-800">
-                        文本生成模型
-                      </label>
-                      {selectedModelInfo && (
-                        <div className="text-sm text-gray-500 flex items-center gap-1 mt-0.5">
-                          <span>当前：</span>
-                          <span className="font-medium text-purple-600">
-                            {selectedModelInfo.name}
-                          </span>
-                          {selectedModelInfo.tag && (
-                            <Badge
-                              className={`ml-1.5 text-[10px] h-4 px-1.5 ${
-                                selectedModelInfo.tag === "推荐"
-                                  ? "bg-green-100 text-green-800"
-                                  : selectedModelInfo.tag === "专业"
-                                  ? "bg-indigo-100 text-indigo-800"
-                                  : selectedModelInfo.tag === "新品"
-                                  ? "bg-orange-100 text-orange-800"
-                                  : "bg-blue-100 text-blue-800"
-                              }`}
-                            >
-                              {selectedModelInfo.tag}
-                            </Badge>
-                          )}
-                        </div>
-                      )}
-                    </div>
-                  </div>
-                  <div className="text-gray-500">
-                    {isModelSectionExpanded ? (
-                      <ChevronUp className="w-5 h-5" />
-                    ) : (
-                      <ChevronDown className="w-5 h-5" />
-                    )}
-                  </div>
-                </div>
-
-                {/* 展开后的完整模型选择区域 */}
-                {isModelSectionExpanded && (
-                  <div className="mt-2 pt-4 border-t border-gray-100 space-y-4 animate-in fade-in slide-in-from-top duration-300">
-                    {/* 模型分类选择器 */}
-                    <div className="flex items-center gap-2 overflow-x-auto pb-2 no-scrollbar">
-                      {modelCategories.map((category) => (
-                        <button
-                          key={category.id}
-                          onClick={(e) => {
-                            e.stopPropagation(); // 防止冒泡触发折叠
-                            setActiveCategory(category.id);
-                          }}
-                          className={`flex items-center gap-2 px-4 py-2 rounded-full whitespace-nowrap transition-all duration-200 ${
-                            activeCategory === category.id
-                              ? "bg-gradient-to-r from-purple-500 to-indigo-500 text-white shadow-sm"
-                              : "bg-white text-gray-700 hover:bg-gray-100"
-                          }`}
-                        >
-                          {activeCategory === category.id && (
-                            <div className="w-2 h-2 rounded-full bg-white"></div>
-                          )}
-                          {category.name}
-                        </button>
-                      ))}
-                    </div>
-
-                    {/* 当前分类描述 */}
-                    {modelCategories.find((c) => c.id === activeCategory)
-                      ?.description && (
-                      <p className="text-xs text-gray-500 mt-1">
-                        {
-                          modelCategories.find((c) => c.id === activeCategory)
-                            ?.description
-                        }
-                      </p>
-                    )}
-
-                    {/* 模型列表 - 根据分类过滤 */}
-                    <div className="space-y-4 mt-2">
-                      <div className="h-[280px] overflow-y-auto pr-2 custom-scrollbar">
-                        <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
-                          {textModels
-                            .filter(
-                              (model) => model.category === activeCategory
-                            )
-                            .map((model) => (
-                              <div
-                                key={model.id}
-                                onClick={(e) => {
-                                  e.stopPropagation(); // 防止冒泡触发折叠
-                                  setSelectedModel(model.id);
-                                }}
-                                className={`relative p-4 rounded-xl cursor-pointer transition-all duration-200 border ${
-                                  selectedModel === model.id
-                                    ? "border-purple-400 bg-gradient-to-br from-purple-50 to-indigo-50 shadow-sm"
-                                    : "border-gray-100 hover:border-purple-200 bg-white/80 hover:bg-white"
-                                }`}
-                              >
-                                {model.tag && (
-                                  <div className="absolute -top-2 -right-2">
-                                    <Badge
-                                      className={`text-xs ${
-                                        model.tag === "推荐"
-                                          ? "bg-green-100 text-green-800 hover:bg-green-200"
-                                          : model.tag === "专业"
-                                          ? "bg-indigo-100 text-indigo-800 hover:bg-indigo-200"
-                                          : model.tag === "新品"
-                                          ? "bg-orange-100 text-orange-800 hover:bg-orange-200"
-                                          : "bg-blue-100 text-blue-800 hover:bg-blue-200"
-                                      }`}
-                                    >
-                                      {model.tag}
-                                    </Badge>
-                                  </div>
-                                )}
-
-                                <div className="flex items-center gap-2">
-                                  <div
-                                    className={`rounded-full p-1 ${
-                                      selectedModel === model.id
-                                        ? "bg-gradient-to-r from-purple-500 to-indigo-500"
-                                        : "bg-gray-100"
-                                    }`}
-                                  >
-                                    <Sparkles
-                                      className={`w-3.5 h-3.5 ${
-                                        selectedModel === model.id
-                                          ? "text-white"
-                                          : "text-gray-500"
-                                      }`}
-                                    />
-                                  </div>
-                                  <span
-                                    className={`font-medium ${
-                                      selectedModel === model.id
-                                        ? "text-purple-700"
-                                        : "text-gray-700"
-                                    }`}
-                                  >
-                                    {model.name}
-                                  </span>
-
-                                  {/* 显示选中标记 */}
-                                  {selectedModel === model.id && (
-                                    <div className="ml-auto">
-                                      <Check className="w-4 h-4 text-purple-500" />
-                                    </div>
-                                  )}
-                                </div>
-
-                                <p className="text-xs text-gray-500 mt-2 pl-6">
-                                  {model.description}
-                                </p>
-                              </div>
-                            ))}
-                        </div>
-                      </div>
-
-                      {/* 模型数量和选择提示 */}
-                      <div className="text-xs text-gray-500 flex justify-between">
-                        <span>
-                          当前分类共{" "}
-                          {
-                            textModels.filter(
-                              (model) => model.category === activeCategory
-                            ).length
-                          }{" "}
-                          个模型
-                        </span>
-                        <span>点击卡片选择模型</span>
-                      </div>
-                    </div>
-                  </div>
-                )}
-              </div>
-
-              {/* 场景数量选择 */}
-              <div className="space-y-4">
-                <label className="text-sm font-medium text-gray-700 flex items-center gap-1.5">
-                  <ImageIcon className="w-4 h-4 text-pink-500" />
-                  选择场景数量
-                </label>
-
-                <div className="flex gap-3 flex-wrap">
-                  {[2, 4, 6, 8].map((count) => (
-                    <Button
-                      key={count}
-                      variant={selectedCount === count ? "default" : "outline"}
-                      size="sm"
-                      onClick={() => setSelectedCount(count)}
-                      className={`rounded-full px-6 ${
-                        selectedCount === count
-                          ? "bg-gradient-to-r from-pink-500 to-orange-500 hover:from-pink-600 hover:to-orange-600"
-                          : "border-pink-200 text-pink-600 hover:bg-pink-50"
-                      }`}
-                    >
-                      {count}个场景
-                    </Button>
-                  ))}
-                </div>
-              </div>
-
-              {/* 图片比例选择 */}
-              <div className="space-y-4">
-                <label className="text-sm font-medium text-gray-700 flex items-center gap-1.5">
-                  <SlidersHorizontal className="w-4 h-4 text-blue-500" />
-                  图片比例
-                </label>
-
-                <div className="flex gap-3 flex-wrap">
-                  {aspectRatios.map((ratio) => (
-                    <Button
-                      key={ratio.id}
-                      variant={
-                        selectedAspectRatio === ratio.value
-                          ? "default"
-                          : "outline"
-                      }
-                      size="sm"
-                      onClick={() => setSelectedAspectRatio(ratio.value)}
-                      className={`rounded-full px-4 ${
-                        selectedAspectRatio === ratio.value
-                          ? "bg-gradient-to-r from-blue-500 to-indigo-500 hover:from-blue-600 hover:to-indigo-600"
-                          : "border-blue-200 text-blue-600 hover:bg-blue-50"
-                      }`}
-                    >
-                      {ratio.label}
-                    </Button>
-                  ))}
-                </div>
-              </div>
-
-              {/* 高级设置部分 */}
-              <div className="mt-2">
-                <button
-                  className={`w-full flex items-center justify-between p-4 text-left rounded-xl transition-all duration-200 ${
-                    showAdvancedSettings
-                      ? "bg-gradient-to-r from-purple-50 to-indigo-50 shadow-sm"
-                      : "bg-white/50 hover:bg-white/80"
-                  }`}
-                  onClick={() => setShowAdvancedSettings(!showAdvancedSettings)}
-                >
-                  <div className="flex items-center gap-2">
-                    <div
-                      className={`rounded-full p-1.5 ${
-                        showAdvancedSettings
-                          ? "bg-gradient-to-r from-purple-500 to-indigo-500"
-                          : "bg-gray-100"
-                      }`}
-                    >
-                      <Sliders
-                        className={`w-4 h-4 ${
-                          showAdvancedSettings ? "text-white" : "text-gray-500"
-                        }`}
-                      />
-                    </div>
-                    <span
-                      className={`font-medium ${
-                        showAdvancedSettings
-                          ? "text-indigo-700"
-                          : "text-gray-700"
-                      }`}
-                    >
-                      高级设置
-                    </span>
-                  </div>
-                  {showAdvancedSettings ? (
-                    <ChevronDown className="w-5 h-5 text-indigo-500" />
-                  ) : (
-                    <ChevronRight className="w-5 h-5 text-gray-400" />
-                  )}
-                </button>
-
-                {showAdvancedSettings && (
-                  <div className="mt-4 pt-2 pb-1 px-4 bg-white/60 backdrop-blur-sm rounded-xl border border-indigo-100 shadow-sm space-y-6 transition-all duration-300 ease-in-out">
-                    {/* 文本权重设置 */}
-                    <div className="space-y-3 py-3 border-b border-indigo-50">
-                      <div className="flex items-center gap-2">
-                        <div className="rounded-full bg-gradient-to-r from-indigo-400 to-purple-400 p-1.5">
-                          <SlidersHorizontal className="w-3.5 h-3.5 text-white" />
-                        </div>
-                        <Label className="text-sm font-medium text-indigo-800">
-                          文本权重
-                        </Label>
-                      </div>
-                      <p className="text-xs text-gray-500 pl-7">
-                        显示文字（创意描述）对结果图像的影响程度，数值越大图像越接近文字描述，数值越小图像可能更具创造性
-                      </p>
-
-                      <div className="flex flex-col space-y-2 pl-7 pr-2">
-                        <div className="flex justify-between text-xs text-indigo-400 px-1">
-                          <span>更具创造性</span>
-                          <span>更贴近描述</span>
-                        </div>
-                        <div className="bg-gradient-to-r from-indigo-50 to-indigo-100 rounded-full p-1">
-                          <Slider
-                            value={[guidanceScale]}
-                            min={1}
-                            max={10}
-                            step={0.1}
-                            onValueChange={(value) =>
-                              setGuidanceScale(value[0])
-                            }
-                            className="w-full"
-                          />
-                        </div>
-                        <div className="flex justify-between text-xs text-gray-400 px-1">
-                          <span>1.0</span>
-                          <span>10.0</span>
-                        </div>
-                        <div className="text-right text-sm font-medium bg-gradient-to-r from-indigo-500 to-purple-600 bg-clip-text text-transparent">
-                          {guidanceScale.toFixed(1)}
-                        </div>
-                      </div>
-                    </div>
-
-                    {/* 种子数设置 */}
-                    <div className="space-y-3 py-1 pb-3">
-                      <div className="flex items-center gap-2">
-                        <div className="rounded-full bg-gradient-to-r from-indigo-400 to-purple-400 p-1.5">
-                          <Dices className="w-3.5 h-3.5 text-white" />
-                        </div>
-                        <Label className="text-sm font-medium text-indigo-800">
-                          种子数
-                        </Label>
-                      </div>
-                      <p className="text-xs text-gray-500 pl-7">
-                        用于物理定扩初始状态的基值，若随机种子相同并且其他参数相同，则生成图片大概率一致
-                      </p>
-
-                      <RadioGroup
-                        value={seedMode}
-                        onValueChange={(value) =>
-                          setSeedMode(value as "random" | "fixed")
-                        }
-                        className="flex gap-4 pl-7 mt-2"
-                      >
-                        <div className="flex items-center space-x-2">
-                          <RadioGroupItem
-                            value="random"
-                            id="random-seed"
-                            className="text-indigo-600 border-indigo-400"
-                          />
-                          <Label
-                            htmlFor="random-seed"
-                            className="cursor-pointer text-sm text-indigo-700"
-                          >
-                            随机
-                          </Label>
-                        </div>
-                        <div className="flex items-center space-x-2">
-                          <RadioGroupItem
-                            value="fixed"
-                            id="fixed-seed"
-                            className="text-indigo-600 border-indigo-400"
-                          />
-                          <Label
-                            htmlFor="fixed-seed"
-                            className="cursor-pointer text-sm text-indigo-700"
-                          >
-                            固定
-                          </Label>
-                        </div>
-                      </RadioGroup>
-
-                      {seedMode === "fixed" && (
-                        <div className="pl-7 mt-2">
-                          <Input
-                            type="number"
-                            value={seedValue}
-                            onChange={handleSeedValueChange}
-                            min={-1}
-                            max={2147483647}
-                            className="max-w-[200px] border-indigo-200 focus:border-indigo-400 focus:ring-indigo-300/20"
-                          />
-                        </div>
-                      )}
-                    </div>
-                  </div>
-                )}
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-
-        {/* Generate Button */}
-        <div className="text-center mb-8">
-          <Button
-            onClick={handleGenerate}
-            disabled={!content.trim() || isGenerating}
-            size="lg"
-            className="px-12 py-3 text-lg font-medium rounded-full bg-gradient-to-r from-pink-500 to-orange-500 hover:from-pink-600 hover:to-orange-600 disabled:from-gray-300 disabled:to-gray-300 shadow-lg shadow-pink-200"
-          >
-            {isGenerating ? (
-              <>
-                <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-white mr-2" />
-                生成中...
-              </>
-            ) : (
-              <>
-                <Wand2 className="w-5 h-5 mr-2" />
-                生成漫画剧本
-              </>
-            )}
-          </Button>
-        </div>
-
-        {/* Error Display */}
-        {error && (
-          <Card className="mb-8 border-red-200 shadow-lg shadow-red-100/50 bg-white/70 backdrop-blur-sm">
-            <CardContent className="p-4">
-              <p className="text-red-500 text-center">{error}</p>
-            </CardContent>
-          </Card>
-        )}
-
-        {/* Image Generation Error Display */}
-        {imageGenerationError && (
-          <Card className="mb-8 border-red-200 shadow-lg shadow-red-100/50 bg-white/70 backdrop-blur-sm">
-            <CardContent className="p-4">
-              <div className="flex items-center justify-center gap-2 text-red-500">
-                <AlertCircle className="w-4 h-4" />
-                <p>{imageGenerationError}</p>
-              </div>
-            </CardContent>
-          </Card>
-        )}
-
-        {/* Loading State */}
-        {isGenerating && (
-          <Card className="mb-8 border-0 shadow-lg shadow-pink-100/50 bg-white/70 backdrop-blur-sm">
-            <CardContent className="p-8 text-center">
-              <div className="space-y-4">
-                <div className="animate-pulse">
-                  <div className="w-16 h-16 bg-gradient-to-r from-pink-500 to-orange-500 rounded-full mx-auto mb-4 flex items-center justify-center">
-                    <Sparkles className="w-8 h-8 text-white animate-spin" />
-                  </div>
-                </div>
-                <p className="text-gray-600">正在创作漫画剧本...</p>
-                <p className="text-sm text-gray-500">预计需要30秒</p>
-              </div>
-            </CardContent>
-          </Card>
-        )}
-
-        {/* Results Section */}
-        {comicPanels.length > 0 && !isGenerating && (
-          <Card className="border-0 shadow-lg shadow-pink-100/50 bg-white/70 backdrop-blur-sm">
-            <CardContent className="p-6">
-              <div className="mb-6">
-                <h3 className="text-xl font-semibold text-gray-800 mb-2">
-                  生成结果
-                </h3>
-                <p className="text-gray-600 text-sm">
-                  以下是根据您的内容创作的漫画剧本
-                </p>
-              </div>
-
-              <div className="space-y-8">
-                {comicPanels.map((panel, i) => (
-                  <div
-                    key={panel.id}
-                    className="bg-white rounded-xl shadow-md p-5 border border-pink-100"
-                  >
-                    <div className="flex items-center mb-3">
-                      <div className="bg-gradient-to-r from-pink-500 to-orange-500 text-white rounded-full w-8 h-8 flex items-center justify-center mr-2">
-                        {i + 1}
-                      </div>
-                      <h4 className="font-medium text-gray-800">
-                        场景 {i + 1}
-                      </h4>
-                    </div>
-
-                    {/* 当有生成图片时显示图片 */}
-                    {panel.imageUrl &&
-                      panel.imageUrl.includes("http") &&
-                      !panel.imageUrl.includes("placehold.co") && (
-                        <div className="mb-4 rounded-lg overflow-hidden">
-                          <img
-                            src={panel.imageUrl}
-                            alt={`场景 ${i + 1}`}
-                            className="w-full h-auto object-contain"
-                          />
-                          {panel.error && (
-                            <p className="text-red-500 text-xs mt-1 flex items-center">
-                              <AlertCircle className="w-3 h-3 mr-1" />
-                              {panel.error}
-                            </p>
-                          )}
-                        </div>
-                      )}
-
-                    <div className="prose prose-pink max-w-none">
-                      <p className="whitespace-pre-wrap text-gray-700">
-                        {panel.content}
-                      </p>
-                    </div>
-
-                    {/* 如果已生成图片，显示下载按钮 */}
-                    {panel.imageUrl &&
-                      panel.imageUrl.includes("http") &&
-                      !panel.imageUrl.includes("placehold.co") && (
-                        <div className="mt-4 flex justify-end">
-                          <Button
-                            size="sm"
-                            variant="outline"
-                            className="text-xs border-pink-200 text-pink-600"
-                            onClick={() =>
-                              handleDownloadImage(
-                                panel.imageUrl,
-                                `场景${i + 1}`
-                              )
-                            }
-                          >
-                            <Download className="w-3 h-3 mr-1" />
-                            下载图片
-                          </Button>
-                        </div>
-                      )}
-                  </div>
-                ))}
-              </div>
-
-              {/* 统一的生成漫画按钮 */}
-              <div className="mt-8 pt-6 border-t border-pink-100 text-center">
-                <div className="flex flex-col items-center">
-                  <div className="mb-4 bg-white/90 rounded-xl px-4 py-2 shadow-sm border border-pink-100">
-                    <div className="text-sm text-gray-600 flex flex-wrap justify-center gap-x-4 gap-y-2">
-                      <div className="flex items-center gap-1">
-                        <Sparkles className="w-3.5 h-3.5 text-purple-500" />
-                        <span>
-                          模型:{" "}
-                          <span className="font-medium text-purple-600">
-                            {
-                              textModels.find((m) => m.id === selectedModel)
-                                ?.name
-                            }
-                          </span>
-                        </span>
-                      </div>
-                      <div className="flex items-center gap-1">
-                        <SlidersHorizontal className="w-3.5 h-3.5 text-blue-500" />
-                        <span>
-                          图片比例:{" "}
-                          <span className="font-medium text-blue-600">
-                            {selectedAspectRatio}
-                          </span>
-                        </span>
-                      </div>
-                      {showAdvancedSettings && (
-                        <>
-                          <div className="flex items-center gap-1">
-                            <SlidersHorizontal className="w-3.5 h-3.5 text-indigo-500" />
-                            <span>
-                              文本权重:{" "}
-                              <span className="font-medium text-indigo-600">
-                                {guidanceScale.toFixed(1)}
-                              </span>
-                            </span>
-                          </div>
-                          <div className="flex items-center gap-1">
-                            <Dices className="w-3.5 h-3.5 text-purple-500" />
-                            <span>
-                              种子数:{" "}
-                              <span className="font-medium text-purple-600">
-                                {seedMode === "random" ? "随机" : seedValue}
-                              </span>
-                            </span>
-                          </div>
-                        </>
-                      )}
-                    </div>
-                  </div>
-                  <Button
-                    onClick={handleGenerateImages}
-                    disabled={isGeneratingImages || comicPanels.length === 0}
-                    size="lg"
-                    className="px-12 py-3 text-lg font-medium rounded-full bg-gradient-to-r from-orange-400 to-pink-500 hover:from-orange-500 hover:to-pink-600 disabled:opacity-70 shadow-lg shadow-orange-200"
-                  >
-                    {isGeneratingImages ? (
-                      <>
-                        <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-white mr-2" />
-                        生成中...
-                      </>
-                    ) : (
-                      <>
-                        <ImageIcon className="w-5 h-5 mr-2" />
-                        根据剧本生成漫画
-                      </>
-                    )}
-                  </Button>
-                  <p className="text-sm text-gray-500 mt-2">
-                    {isGeneratingImages
-                      ? "正在生成漫画图像，请稍候..."
-                      : "将基于上述剧本内容生成完整的漫画图像"}
-                  </p>
-                </div>
-              </div>
-
-              {/* Social Actions */}
-              <div className="mt-8 pt-6 border-t border-pink-100">
-                <div className="flex items-center justify-between">
-                  <div className="flex items-center gap-4">
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      className="text-gray-600 hover:text-pink-600"
-                    >
-                      <Heart className="w-4 h-4 mr-1" />
-                      喜欢
-                    </Button>
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      className="text-gray-600 hover:text-pink-600"
-                    >
-                      <MessageCircle className="w-4 h-4 mr-1" />
-                      评论
-                    </Button>
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      className="text-gray-600 hover:text-pink-600"
-                    >
-                      <Share className="w-4 h-4 mr-1" />
-                      分享
-                    </Button>
-                  </div>
-                  <Badge
-                    variant="secondary"
-                    className="bg-green-100 text-green-700"
-                  >
-                    生成成功
-                  </Badge>
-                </div>
-              </div>
-            </CardContent>
-          </Card>
-        )}
-      </div>
-
-      {/* FAQ Section */}
-      <div ref={faqRef} className="mt-16 pt-8 border-t border-pink-100">
-        <div className="text-center mb-10">
-          <h2 className="text-3xl font-bold bg-gradient-to-r from-pink-600 to-orange-600 bg-clip-text text-transparent mb-4">
-            常见问题
-          </h2>
-          <p className="text-gray-600">关于漫画生成器的一些常见疑问解答</p>
-        </div>
-
-        <div className="space-y-4 mb-8">
-          {faqs.map((faq, index) => (
-            <div
-              key={index}
-              className="border border-pink-100 rounded-xl overflow-hidden bg-white/70 backdrop-blur-sm shadow-sm"
-            >
-              <button
-                className="w-full p-4 text-left flex justify-between items-center"
-                onClick={() => toggleAccordion(index)}
-              >
-                <span className="font-medium text-gray-800">
-                  {faq.question}
-                </span>
-                <span className="text-pink-500">
-                  {activeAccordion === index ? (
-                    <MinusCircle className="w-5 h-5" />
-                  ) : (
-                    <PlusCircle className="w-5 h-5" />
-                  )}
-                </span>
-              </button>
-
-              {activeAccordion === index && (
-                <div className="p-4 pt-0 border-t border-pink-50 bg-gradient-to-br from-pink-50/30 to-orange-50/30">
-                  <p className="text-gray-600">{faq.answer}</p>
-                </div>
-              )}
-            </div>
-          ))}
-        </div>
-      </div>
-
-      {/* Footer */}
-      <div className="text-center py-8 text-gray-500 text-sm">
-        <p>让每个人都能轻松将文字转化为视觉故事 💫</p>
-        <div className="flex justify-center gap-4 mt-2">
-          <button className="hover:text-pink-500 transition-colors">
-            隐私政策
-          </button>
-          <button className="hover:text-pink-500 transition-colors">
-            使用条款
-          </button>
-          <button className="hover:text-pink-500 transition-colors">
-            联系我们
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/.history/app/page_20250802202359.tsx b/.history/app/page_20250802202359.tsx
deleted file mode 100644
index 895a0ab..0000000
--- a/.history/app/page_20250802202359.tsx
+++ /dev/null
@@ -1,1141 +0,0 @@
-"use client";
-
-import { useState, useRef } from "react";
-import { Card, CardContent } from "@/components/ui/card";
-import { Button } from "@/components/ui/button";
-import { Textarea } from "@/components/ui/textarea";
-import { Badge } from "@/components/ui/badge";
-import { Slider } from "@/components/ui/slider";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import {
-  Sparkles,
-  ImageIcon,
-  Download,
-  Eye,
-  Heart,
-  MessageCircle,
-  Share,
-  Wand2,
-  AlertCircle,
-  ChevronDown,
-  ChevronRight,
-  Sliders,
-  Dices, // 替换 Dice 为 Dices
-  SlidersHorizontal,
-  ChevronsUpDown,
-  Check,
-  ChevronUp,
-  Home,
-  HelpCircle,
-  PlusCircle,
-  MinusCircle,
-} from "lucide-react";
-import { ComicPanel } from "@/lib/types";
-
-// 图片比例选项
-type AspectRatio = {
-  id: string;
-  label: string;
-  value: string; // 实际的宽高比值，如 "1:1"
-};
-
-// 文本生成模型选项
-type TextModel = {
-  id: string;
-  name: string;
-  description: string;
-  tag?: string; // 可选标签，如"推荐"、"快速"等
-  category: string; // 模型分类
-};
-
-// 模型分类
-type ModelCategory = {
-  id: string;
-  name: string;
-  description?: string;
-};
-
-const modelCategories: ModelCategory[] = [
-  { id: "recommended", name: "推荐模型", description: "我们精选的高质量模型" },
-  {
-    id: "specialized",
-    name: "专业模型",
-    description: "针对特定领域优化的模型",
-  },
-  { id: "fast", name: "快速模型", description: "响应速度快，成本较低" },
-  { id: "experimental", name: "实验模型", description: "新技术，可能有惊喜" },
-];
-
-const textModels: TextModel[] = [
-  // 推荐模型
-  {
-    id: "qwen-32b",
-    name: "QwQ-32B",
-    description: "高质量剧本生成，细节丰富，逻辑连贯",
-    tag: "推荐",
-    category: "recommended",
-  },
-  {
-    id: "gpt-4",
-    name: "GPT-4",
-    description: "功能强大，擅长复杂剧情创作",
-    category: "recommended",
-  },
-
-  // 专业模型
-  {
-    id: "story-xl",
-    name: "StoryXL",
-    description: "专为故事叙事优化，情节发展自然",
-    tag: "专业",
-    category: "specialized",
-  },
-  {
-    id: "comic-pro",
-    name: "ComicPro",
-    description: "针对漫画场景和对白优化",
-    tag: "专业",
-    category: "specialized",
-  },
-  {
-    id: "fantasy-writer",
-    name: "奇幻创作家",
-    description: "擅长创作魔幻、奇幻类故事",
-    category: "specialized",
-  },
-
-  // 快速模型
-  {
-    id: "deepseek-7b",
-    name: "DeepSeek-7B",
-    description: "生成速度快，质量适中",
-    tag: "快速",
-    category: "fast",
-  },
-  {
-    id: "gpt-3.5",
-    name: "GPT-3.5",
-    description: "平衡的选择，适合大多数场景",
-    category: "fast",
-  },
-  {
-    id: "llama-13b",
-    name: "Llama-13B",
-    description: "开源模型，速度快，资源占用少",
-    category: "fast",
-  },
-
-  // 实验模型
-  {
-    id: "mixtral-8x7b",
-    name: "Mixtral-8x7B",
-    description: "混合专家模型，创意表现出色",
-    tag: "新品",
-    category: "experimental",
-  },
-  {
-    id: "claude-3",
-    name: "Claude 3",
-    description: "擅长长篇创意写作，风格多样",
-    tag: "新品",
-    category: "experimental",
-  },
-];
-
-const aspectRatios: AspectRatio[] = [
-  { id: "1:1", label: "1:1", value: "1:1" },
-  { id: "3:4", label: "3:4", value: "3:4" },
-  { id: "4:3", label: "4:3", value: "4:3" },
-  { id: "16:9", label: "16:9", value: "16:9" },
-  { id: "9:16", label: "9:16", value: "9:16" },
-  { id: "2:3", label: "2:3", value: "2:3" },
-  { id: "3:2", label: "3:2", value: "3:2" },
-  { id: "21:9", label: "21:9", value: "21:9" },
-  { id: "custom", label: "自定义", value: "custom" },
-];
-
-export default function ComicGenerator() {
-  const [content, setContent] = useState("");
-  const [selectedCount, setSelectedCount] = useState(4);
-  const [selectedAspectRatio, setSelectedAspectRatio] =
-    useState<string>("16:9");
-  const [isGenerating, setIsGenerating] = useState(false);
-  const [isGeneratingImages, setIsGeneratingImages] = useState(false);
-  const [comicPanels, setComicPanels] = useState<ComicPanel[]>([]);
-  const [error, setError] = useState<string | null>(null);
-  const [imageGenerationError, setImageGenerationError] = useState<
-    string | null
-  >(null);
-  const [showAdvancedSettings, setShowAdvancedSettings] = useState(false);
-  const [guidanceScale, setGuidanceScale] = useState(2.5); // 默认值为2.5
-  const [seedMode, setSeedMode] = useState<"random" | "fixed">("random"); // 默认为随机
-  const [seedValue, setSeedValue] = useState<number>(1234);
-  const [selectedModel, setSelectedModel] = useState<string>("qwen-32b"); // 默认使用QwQ-32B模型
-  const [activeCategory, setActiveCategory] = useState<string>("recommended"); // 默认显示推荐模型
-  const [isModelSectionExpanded, setIsModelSectionExpanded] = useState(false);
-  const maxLength = 2000;
-  const [activeAccordion, setActiveAccordion] = useState<number | null>(null);
-  const faqRef = useRef<HTMLDivElement>(null);
-  const homeRef = useRef<HTMLDivElement>(null);
-
-  // 处理导航点击，滚动到指定区域
-  const scrollToRef = (ref: React.RefObject<HTMLDivElement>) => {
-    if (ref && ref.current) {
-      ref.current.scrollIntoView({ behavior: "smooth" });
-    }
-  };
-
-  // FAQ数据
-  const faqs = [
-    {
-      question: "漫画生成器是如何工作的？",
-      answer:
-        "我们的漫画生成器基于先进的AI文本和图像生成技术。首先，系统通过文本AI（如QwQ-32B）将您输入的内容转化为详细的漫画剧本，然后使用图像生成AI将剧本转换为精美的漫画图像。整个过程完全自动化，只需几分钟即可完成。",
-    },
-    {
-      question: "我可以自定义生成的漫画样式吗？",
-      answer:
-        "是的，您可以通过多种方式自定义漫画样式。您可以选择不同的图片比例（如1:1、16:9等），调整文本权重（影响图像与文本描述的匹配程度），以及设置种子数（控制生成的随机性）。我们还提供了多种文本生成模型供您选择，每种模型有其独特的创作风格。",
-    },
-    {
-      question: "生成的漫画可以用于商业用途吗？",
-      answer:
-        "生成的漫画作品的版权归您所有，您可以将其用于个人或商业用途。但请注意，如果您使用了他人的文字作为输入，需要确保您有权使用这些内容。此外，我们建议您在商业使用前，仔细检查并可能编辑AI生成的内容，以确保其质量和适用性。",
-    },
-    {
-      question: "有哪些适合生成漫画的内容类型？",
-      answer:
-        "几乎任何类型的故事或创意都可以用于生成漫画。包括但不限于：短篇故事、童话、科幻故事、冒险故事、生活日常、教育内容等。短小精悍、情节清晰的内容通常能获得更好的结果。建议每次提交的文本保持在300-1000字左右，确保故事有明确的开端、发展和结尾。",
-    },
-    {
-      question: "如何获得最佳的漫画生成效果？",
-      answer:
-        "为获得最佳效果，建议：(1) 提供具有明确场景和人物的描述；(2) 确保故事情节连贯且有逻辑；(3) 尝试不同的模型和设置组合；(4) 对于不满意的场景，可以使用刷新功能重新生成；(5) 调整文本权重可以控制生成图像与文本描述的匹配程度，数值越大匹配度越高。",
-    },
-  ];
-
-  // 切换FAQ手风琴状态
-  const toggleAccordion = (index: number) => {
-    setActiveAccordion(activeAccordion === index ? null : index);
-  };
-
-  const sampleArticle = `春天来了，小明走在回家的路上。突然，他发现路边有一只受伤的小猫。小明毫不犹豫地将小猫抱起，送到了附近的宠物医院。医生说小猫只是轻微擦伤，很快就能康复。从那天起，小明每天都会去医院看望小猫，直到它完全康复。`;
-
-  const handleGenerate = async () => {
-    if (!content.trim()) return;
-
-    setIsGenerating(true);
-    setError(null);
-
-    try {
-      const response = await fetch("/api/generate", {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({
-          content,
-          count: selectedCount,
-          model: selectedModel, // 添加模型参数
-        }),
-      });
-
-      const data = await response.json();
-
-      if (!response.ok) {
-        throw new Error(data.error || "生成漫画失败，请稍后再试");
-      }
-
-      setComicPanels(data.comicPanels);
-    } catch (err) {
-      setError(err instanceof Error ? err.message : "生成漫画时发生未知错误");
-      console.error("生成漫画错误:", err);
-    } finally {
-      setIsGenerating(false);
-    }
-  };
-
-  const handleGenerateImages = async () => {
-    if (comicPanels.length === 0) return;
-
-    setIsGeneratingImages(true);
-    setImageGenerationError(null);
-
-    // 确定要使用的种子值
-    const seed = seedMode === "random" ? -1 : seedValue;
-
-    try {
-      const response = await fetch("/api/generate-images", {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({
-          comicPanels,
-          aspectRatio: selectedAspectRatio,
-          seed: seed,
-          guidance_scale: guidanceScale,
-        }),
-      });
-
-      const data = await response.json();
-
-      if (!response.ok) {
-        throw new Error(data.error || "生成漫画图片失败，请稍后再试");
-      }
-
-      // 更新面板，包含新的图像URL
-      setComicPanels(data.comicPanels);
-    } catch (err) {
-      setImageGenerationError(
-        err instanceof Error ? err.message : "生成漫画图片时发生未知错误"
-      );
-      console.error("生成漫画图片错误:", err);
-    } finally {
-      setIsGeneratingImages(false);
-    }
-  };
-
-  const handleDownloadImage = (imageUrl: string, sceneName: string) => {
-    const a = document.createElement("a");
-    a.href = imageUrl;
-    a.download = `漫画场景_${sceneName}.jpg`;
-    a.click();
-  };
-
-  const fillSample = () => {
-    setContent(sampleArticle);
-  };
-
-  const getGridLayout = (count: number) => {
-    switch (count) {
-      case 2:
-        return "grid-cols-1 md:grid-cols-2";
-      case 4:
-        return "grid-cols-2";
-      case 6:
-        return "grid-cols-2 md:grid-cols-3";
-      case 8:
-        return "grid-cols-2 md:grid-cols-4";
-      default:
-        return "grid-cols-2";
-    }
-  };
-
-  const handleSeedValueChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const value = parseInt(e.target.value);
-    // 确保值在合法范围内 [-1, 2147483647]
-    if (!isNaN(value) && value >= -1 && value <= 2147483647) {
-      setSeedValue(value);
-    }
-  };
-
-  // 获取当前选中的模型信息
-  const selectedModelInfo = textModels.find(
-    (model) => model.id === selectedModel
-  );
-
-  return (
-    <div className="min-h-screen bg-gradient-to-br from-pink-50 to-orange-50">
-      {/* 导航栏 */}
-      <div className="bg-white/80 backdrop-blur-md border-b border-pink-100 sticky top-0 z-20">
-        <div className="max-w-4xl mx-auto px-4 py-4 flex items-center justify-between">
-          <div className="flex items-center gap-2">
-            <div className="w-8 h-8 bg-gradient-to-r from-pink-500 to-orange-500 rounded-lg flex items-center justify-center">
-              <Sparkles className="w-5 h-5 text-white" />
-            </div>
-            <span className="font-bold text-gray-800">漫画生成器</span>
-          </div>
-
-          {/* 导航链接 */}
-          <div className="flex items-center gap-4">
-            <button
-              onClick={() => scrollToRef(homeRef)}
-              className="flex items-center gap-1.5 px-3 py-1.5 rounded-full text-sm text-gray-700 hover:bg-pink-50 transition-colors"
-            >
-              <Home className="w-4 h-4" />
-              首页
-            </button>
-            <button
-              onClick={() => scrollToRef(faqRef)}
-              className="flex items-center gap-1.5 px-3 py-1.5 rounded-full text-sm text-gray-700 hover:bg-pink-50 transition-colors"
-            >
-              <HelpCircle className="w-4 h-4" />
-              常见问题
-            </button>
-            <Badge variant="secondary" className="bg-pink-100 text-pink-700">
-              Beta
-            </Badge>
-          </div>
-        </div>
-      </div>
-
-      <div ref={homeRef} className="max-w-4xl mx-auto px-4 py-8">
-        {/* Hero Section */}
-        <div className="text-center mb-12">
-          <h1 className="text-4xl font-bold bg-gradient-to-r from-pink-600 to-orange-600 bg-clip-text text-transparent mb-4">
-            文章转漫画生成器
-          </h1>
-          <p className="text-gray-600 text-lg mb-8">
-            将你的文字变成精彩的漫画故事 ✨
-          </p>
-        </div>
-
-        {/* Input Section */}
-        <Card className="mb-8 border-0 shadow-lg shadow-pink-100/50 bg-white/70 backdrop-blur-sm">
-          <CardContent className="p-6">
-            <div className="space-y-4">
-              <div className="flex items-center justify-between">
-                <label className="text-sm font-medium text-gray-700">
-                  输入你的文章内容或创意
-                </label>
-                <span
-                  className={`text-sm ${
-                    content.length > maxLength
-                      ? "text-red-500"
-                      : "text-gray-500"
-                  }`}
-                >
-                  还可以输入 {maxLength - content.length} 字
-                </span>
-              </div>
-
-              <Textarea
-                value={content}
-                onChange={(e) => setContent(e.target.value)}
-                placeholder="在这里输入你的故事内容或创意，我们会将其转化为精美的漫画剧本..."
-                className="min-h-[120px] resize-none border-pink-200 focus:border-pink-400 focus:ring-pink-400/20"
-                maxLength={maxLength}
-              />
-
-              <div className="flex justify-start">
-                <Button
-                  variant="outline"
-                  size="sm"
-                  onClick={fillSample}
-                  className="border-pink-200 text-pink-600 hover:bg-pink-50 bg-transparent"
-                >
-                  试试示例文章
-                </Button>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-
-        {/* Configuration Section */}
-        <Card className="mb-8 border-0 shadow-lg shadow-pink-100/50 bg-white/70 backdrop-blur-sm">
-          <CardContent className="p-6">
-            <div className="space-y-6">
-              {/* 文本生成模型选择 - 折叠式设计 */}
-              <div>
-                {/* 模型选择器标题与折叠按钮 */}
-                <div
-                  className="flex items-center justify-between cursor-pointer rounded-xl p-4 transition-all duration-200 hover:bg-white/80"
-                  onClick={() =>
-                    setIsModelSectionExpanded(!isModelSectionExpanded)
-                  }
-                >
-                  <div className="flex items-center gap-2">
-                    <div className="rounded-full bg-gradient-to-r from-purple-500 to-indigo-500 p-1.5">
-                      <Sparkles className="w-4 h-4 text-white" />
-                    </div>
-                    <div>
-                      <label className="font-medium text-gray-800">
-                        文本生成模型
-                      </label>
-                      {selectedModelInfo && (
-                        <div className="text-sm text-gray-500 flex items-center gap-1 mt-0.5">
-                          <span>当前：</span>
-                          <span className="font-medium text-purple-600">
-                            {selectedModelInfo.name}
-                          </span>
-                          {selectedModelInfo.tag && (
-                            <Badge
-                              className={`ml-1.5 text-[10px] h-4 px-1.5 ${
-                                selectedModelInfo.tag === "推荐"
-                                  ? "bg-green-100 text-green-800"
-                                  : selectedModelInfo.tag === "专业"
-                                  ? "bg-indigo-100 text-indigo-800"
-                                  : selectedModelInfo.tag === "新品"
-                                  ? "bg-orange-100 text-orange-800"
-                                  : "bg-blue-100 text-blue-800"
-                              }`}
-                            >
-                              {selectedModelInfo.tag}
-                            </Badge>
-                          )}
-                        </div>
-                      )}
-                    </div>
-                  </div>
-                  <div className="text-gray-500">
-                    {isModelSectionExpanded ? (
-                      <ChevronUp className="w-5 h-5" />
-                    ) : (
-                      <ChevronDown className="w-5 h-5" />
-                    )}
-                  </div>
-                </div>
-
-                {/* 展开后的完整模型选择区域 */}
-                {isModelSectionExpanded && (
-                  <div className="mt-2 pt-4 border-t border-gray-100 space-y-4 animate-in fade-in slide-in-from-top duration-300">
-                    {/* 模型分类选择器 */}
-                    <div className="flex items-center gap-2 overflow-x-auto pb-2 no-scrollbar">
-                      {modelCategories.map((category) => (
-                        <button
-                          key={category.id}
-                          onClick={(e) => {
-                            e.stopPropagation(); // 防止冒泡触发折叠
-                            setActiveCategory(category.id);
-                          }}
-                          className={`flex items-center gap-2 px-4 py-2 rounded-full whitespace-nowrap transition-all duration-200 ${
-                            activeCategory === category.id
-                              ? "bg-gradient-to-r from-purple-500 to-indigo-500 text-white shadow-sm"
-                              : "bg-white text-gray-700 hover:bg-gray-100"
-                          }`}
-                        >
-                          {activeCategory === category.id && (
-                            <div className="w-2 h-2 rounded-full bg-white"></div>
-                          )}
-                          {category.name}
-                        </button>
-                      ))}
-                    </div>
-
-                    {/* 当前分类描述 */}
-                    {modelCategories.find((c) => c.id === activeCategory)
-                      ?.description && (
-                      <p className="text-xs text-gray-500 mt-1">
-                        {
-                          modelCategories.find((c) => c.id === activeCategory)
-                            ?.description
-                        }
-                      </p>
-                    )}
-
-                    {/* 模型列表 - 根据分类过滤 */}
-                    <div className="space-y-4 mt-2">
-                      <div className="h-[280px] overflow-y-auto pr-2 custom-scrollbar">
-                        <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
-                          {textModels
-                            .filter(
-                              (model) => model.category === activeCategory
-                            )
-                            .map((model) => (
-                              <div
-                                key={model.id}
-                                onClick={(e) => {
-                                  e.stopPropagation(); // 防止冒泡触发折叠
-                                  setSelectedModel(model.id);
-                                }}
-                                className={`relative p-4 rounded-xl cursor-pointer transition-all duration-200 border ${
-                                  selectedModel === model.id
-                                    ? "border-purple-400 bg-gradient-to-br from-purple-50 to-indigo-50 shadow-sm"
-                                    : "border-gray-100 hover:border-purple-200 bg-white/80 hover:bg-white"
-                                }`}
-                              >
-                                {model.tag && (
-                                  <div className="absolute -top-2 -right-2">
-                                    <Badge
-                                      className={`text-xs ${
-                                        model.tag === "推荐"
-                                          ? "bg-green-100 text-green-800 hover:bg-green-200"
-                                          : model.tag === "专业"
-                                          ? "bg-indigo-100 text-indigo-800 hover:bg-indigo-200"
-                                          : model.tag === "新品"
-                                          ? "bg-orange-100 text-orange-800 hover:bg-orange-200"
-                                          : "bg-blue-100 text-blue-800 hover:bg-blue-200"
-                                      }`}
-                                    >
-                                      {model.tag}
-                                    </Badge>
-                                  </div>
-                                )}
-
-                                <div className="flex items-center gap-2">
-                                  <div
-                                    className={`rounded-full p-1 ${
-                                      selectedModel === model.id
-                                        ? "bg-gradient-to-r from-purple-500 to-indigo-500"
-                                        : "bg-gray-100"
-                                    }`}
-                                  >
-                                    <Sparkles
-                                      className={`w-3.5 h-3.5 ${
-                                        selectedModel === model.id
-                                          ? "text-white"
-                                          : "text-gray-500"
-                                      }`}
-                                    />
-                                  </div>
-                                  <span
-                                    className={`font-medium ${
-                                      selectedModel === model.id
-                                        ? "text-purple-700"
-                                        : "text-gray-700"
-                                    }`}
-                                  >
-                                    {model.name}
-                                  </span>
-
-                                  {/* 显示选中标记 */}
-                                  {selectedModel === model.id && (
-                                    <div className="ml-auto">
-                                      <Check className="w-4 h-4 text-purple-500" />
-                                    </div>
-                                  )}
-                                </div>
-
-                                <p className="text-xs text-gray-500 mt-2 pl-6">
-                                  {model.description}
-                                </p>
-                              </div>
-                            ))}
-                        </div>
-                      </div>
-
-                      {/* 模型数量和选择提示 */}
-                      <div className="text-xs text-gray-500 flex justify-between">
-                        <span>
-                          当前分类共{" "}
-                          {
-                            textModels.filter(
-                              (model) => model.category === activeCategory
-                            ).length
-                          }{" "}
-                          个模型
-                        </span>
-                        <span>点击卡片选择模型</span>
-                      </div>
-                    </div>
-                  </div>
-                )}
-              </div>
-
-              {/* 场景数量选择 */}
-              <div className="space-y-4">
-                <label className="text-sm font-medium text-gray-700 flex items-center gap-1.5">
-                  <ImageIcon className="w-4 h-4 text-pink-500" />
-                  选择场景数量
-                </label>
-
-                <div className="flex gap-3 flex-wrap">
-                  {[2, 4, 6, 8].map((count) => (
-                    <Button
-                      key={count}
-                      variant={selectedCount === count ? "default" : "outline"}
-                      size="sm"
-                      onClick={() => setSelectedCount(count)}
-                      className={`rounded-full px-6 ${
-                        selectedCount === count
-                          ? "bg-gradient-to-r from-pink-500 to-orange-500 hover:from-pink-600 hover:to-orange-600"
-                          : "border-pink-200 text-pink-600 hover:bg-pink-50"
-                      }`}
-                    >
-                      {count}个场景
-                    </Button>
-                  ))}
-                </div>
-              </div>
-
-              {/* 图片比例选择 */}
-              <div className="space-y-4">
-                <label className="text-sm font-medium text-gray-700 flex items-center gap-1.5">
-                  <SlidersHorizontal className="w-4 h-4 text-blue-500" />
-                  图片比例
-                </label>
-
-                <div className="flex gap-3 flex-wrap">
-                  {aspectRatios.map((ratio) => (
-                    <Button
-                      key={ratio.id}
-                      variant={
-                        selectedAspectRatio === ratio.value
-                          ? "default"
-                          : "outline"
-                      }
-                      size="sm"
-                      onClick={() => setSelectedAspectRatio(ratio.value)}
-                      className={`rounded-full px-4 ${
-                        selectedAspectRatio === ratio.value
-                          ? "bg-gradient-to-r from-blue-500 to-indigo-500 hover:from-blue-600 hover:to-indigo-600"
-                          : "border-blue-200 text-blue-600 hover:bg-blue-50"
-                      }`}
-                    >
-                      {ratio.label}
-                    </Button>
-                  ))}
-                </div>
-              </div>
-
-              {/* 高级设置部分 */}
-              <div className="mt-2">
-                <button
-                  className={`w-full flex items-center justify-between p-4 text-left rounded-xl transition-all duration-200 ${
-                    showAdvancedSettings
-                      ? "bg-gradient-to-r from-purple-50 to-indigo-50 shadow-sm"
-                      : "bg-white/50 hover:bg-white/80"
-                  }`}
-                  onClick={() => setShowAdvancedSettings(!showAdvancedSettings)}
-                >
-                  <div className="flex items-center gap-2">
-                    <div
-                      className={`rounded-full p-1.5 ${
-                        showAdvancedSettings
-                          ? "bg-gradient-to-r from-purple-500 to-indigo-500"
-                          : "bg-gray-100"
-                      }`}
-                    >
-                      <Sliders
-                        className={`w-4 h-4 ${
-                          showAdvancedSettings ? "text-white" : "text-gray-500"
-                        }`}
-                      />
-                    </div>
-                    <span
-                      className={`font-medium ${
-                        showAdvancedSettings
-                          ? "text-indigo-700"
-                          : "text-gray-700"
-                      }`}
-                    >
-                      高级设置
-                    </span>
-                  </div>
-                  {showAdvancedSettings ? (
-                    <ChevronDown className="w-5 h-5 text-indigo-500" />
-                  ) : (
-                    <ChevronRight className="w-5 h-5 text-gray-400" />
-                  )}
-                </button>
-
-                {showAdvancedSettings && (
-                  <div className="mt-4 pt-2 pb-1 px-4 bg-white/60 backdrop-blur-sm rounded-xl border border-indigo-100 shadow-sm space-y-6 transition-all duration-300 ease-in-out">
-                    {/* 文本权重设置 */}
-                    <div className="space-y-3 py-3 border-b border-indigo-50">
-                      <div className="flex items-center gap-2">
-                        <div className="rounded-full bg-gradient-to-r from-indigo-400 to-purple-400 p-1.5">
-                          <SlidersHorizontal className="w-3.5 h-3.5 text-white" />
-                        </div>
-                        <Label className="text-sm font-medium text-indigo-800">
-                          文本权重
-                        </Label>
-                      </div>
-                      <p className="text-xs text-gray-500 pl-7">
-                        显示文字（创意描述）对结果图像的影响程度，数值越大图像越接近文字描述，数值越小图像可能更具创造性
-                      </p>
-
-                      <div className="flex flex-col space-y-2 pl-7 pr-2">
-                        <div className="flex justify-between text-xs text-indigo-400 px-1">
-                          <span>更具创造性</span>
-                          <span>更贴近描述</span>
-                        </div>
-                        <div className="bg-gradient-to-r from-indigo-50 to-indigo-100 rounded-full p-1">
-                          <Slider
-                            value={[guidanceScale]}
-                            min={1}
-                            max={10}
-                            step={0.1}
-                            onValueChange={(value) =>
-                              setGuidanceScale(value[0])
-                            }
-                            className="w-full"
-                          />
-                        </div>
-                        <div className="flex justify-between text-xs text-gray-400 px-1">
-                          <span>1.0</span>
-                          <span>10.0</span>
-                        </div>
-                        <div className="text-right text-sm font-medium bg-gradient-to-r from-indigo-500 to-purple-600 bg-clip-text text-transparent">
-                          {guidanceScale.toFixed(1)}
-                        </div>
-                      </div>
-                    </div>
-
-                    {/* 种子数设置 */}
-                    <div className="space-y-3 py-1 pb-3">
-                      <div className="flex items-center gap-2">
-                        <div className="rounded-full bg-gradient-to-r from-indigo-400 to-purple-400 p-1.5">
-                          <Dices className="w-3.5 h-3.5 text-white" />
-                        </div>
-                        <Label className="text-sm font-medium text-indigo-800">
-                          种子数
-                        </Label>
-                      </div>
-                      <p className="text-xs text-gray-500 pl-7">
-                        用于物理定扩初始状态的基值，若随机种子相同并且其他参数相同，则生成图片大概率一致
-                      </p>
-
-                      <RadioGroup
-                        value={seedMode}
-                        onValueChange={(value) =>
-                          setSeedMode(value as "random" | "fixed")
-                        }
-                        className="flex gap-4 pl-7 mt-2"
-                      >
-                        <div className="flex items-center space-x-2">
-                          <RadioGroupItem
-                            value="random"
-                            id="random-seed"
-                            className="text-indigo-600 border-indigo-400"
-                          />
-                          <Label
-                            htmlFor="random-seed"
-                            className="cursor-pointer text-sm text-indigo-700"
-                          >
-                            随机
-                          </Label>
-                        </div>
-                        <div className="flex items-center space-x-2">
-                          <RadioGroupItem
-                            value="fixed"
-                            id="fixed-seed"
-                            className="text-indigo-600 border-indigo-400"
-                          />
-                          <Label
-                            htmlFor="fixed-seed"
-                            className="cursor-pointer text-sm text-indigo-700"
-                          >
-                            固定
-                          </Label>
-                        </div>
-                      </RadioGroup>
-
-                      {seedMode === "fixed" && (
-                        <div className="pl-7 mt-2">
-                          <Input
-                            type="number"
-                            value={seedValue}
-                            onChange={handleSeedValueChange}
-                            min={-1}
-                            max={2147483647}
-                            className="max-w-[200px] border-indigo-200 focus:border-indigo-400 focus:ring-indigo-300/20"
-                          />
-                        </div>
-                      )}
-                    </div>
-                  </div>
-                )}
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-
-        {/* Generate Button */}
-        <div className="text-center mb-8">
-          <Button
-            onClick={handleGenerate}
-            disabled={!content.trim() || isGenerating}
-            size="lg"
-            className="px-12 py-3 text-lg font-medium rounded-full bg-gradient-to-r from-pink-500 to-orange-500 hover:from-pink-600 hover:to-orange-600 disabled:from-gray-300 disabled:to-gray-300 shadow-lg shadow-pink-200"
-          >
-            {isGenerating ? (
-              <>
-                <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-white mr-2" />
-                生成中...
-              </>
-            ) : (
-              <>
-                <Wand2 className="w-5 h-5 mr-2" />
-                生成漫画剧本
-              </>
-            )}
-          </Button>
-        </div>
-
-        {/* Error Display */}
-        {error && (
-          <Card className="mb-8 border-red-200 shadow-lg shadow-red-100/50 bg-white/70 backdrop-blur-sm">
-            <CardContent className="p-4">
-              <p className="text-red-500 text-center">{error}</p>
-            </CardContent>
-          </Card>
-        )}
-
-        {/* Image Generation Error Display */}
-        {imageGenerationError && (
-          <Card className="mb-8 border-red-200 shadow-lg shadow-red-100/50 bg-white/70 backdrop-blur-sm">
-            <CardContent className="p-4">
-              <div className="flex items-center justify-center gap-2 text-red-500">
-                <AlertCircle className="w-4 h-4" />
-                <p>{imageGenerationError}</p>
-              </div>
-            </CardContent>
-          </Card>
-        )}
-
-        {/* Loading State */}
-        {isGenerating && (
-          <Card className="mb-8 border-0 shadow-lg shadow-pink-100/50 bg-white/70 backdrop-blur-sm">
-            <CardContent className="p-8 text-center">
-              <div className="space-y-4">
-                <div className="animate-pulse">
-                  <div className="w-16 h-16 bg-gradient-to-r from-pink-500 to-orange-500 rounded-full mx-auto mb-4 flex items-center justify-center">
-                    <Sparkles className="w-8 h-8 text-white animate-spin" />
-                  </div>
-                </div>
-                <p className="text-gray-600">正在创作漫画剧本...</p>
-                <p className="text-sm text-gray-500">预计需要30秒</p>
-              </div>
-            </CardContent>
-          </Card>
-        )}
-
-        {/* Results Section */}
-        {comicPanels.length > 0 && !isGenerating && (
-          <Card className="border-0 shadow-lg shadow-pink-100/50 bg-white/70 backdrop-blur-sm">
-            <CardContent className="p-6">
-              <div className="mb-6">
-                <h3 className="text-xl font-semibold text-gray-800 mb-2">
-                  生成结果
-                </h3>
-                <p className="text-gray-600 text-sm">
-                  以下是根据您的内容创作的漫画剧本
-                </p>
-              </div>
-
-              <div className="space-y-8">
-                {comicPanels.map((panel, i) => (
-                  <div
-                    key={panel.id}
-                    className="bg-white rounded-xl shadow-md p-5 border border-pink-100"
-                  >
-                    <div className="flex items-center mb-3">
-                      <div className="bg-gradient-to-r from-pink-500 to-orange-500 text-white rounded-full w-8 h-8 flex items-center justify-center mr-2">
-                        {i + 1}
-                      </div>
-                      <h4 className="font-medium text-gray-800">
-                        场景 {i + 1}
-                      </h4>
-                    </div>
-
-                    {/* 当有生成图片时显示图片 */}
-                    {panel.imageUrl &&
-                      panel.imageUrl.includes("http") &&
-                      !panel.imageUrl.includes("placehold.co") && (
-                        <div className="mb-4 rounded-lg overflow-hidden">
-                          <img
-                            src={panel.imageUrl}
-                            alt={`场景 ${i + 1}`}
-                            className="w-full h-auto object-contain"
-                          />
-                          {panel.error && (
-                            <p className="text-red-500 text-xs mt-1 flex items-center">
-                              <AlertCircle className="w-3 h-3 mr-1" />
-                              {panel.error}
-                            </p>
-                          )}
-                        </div>
-                      )}
-
-                    <div className="prose prose-pink max-w-none">
-                      <p className="whitespace-pre-wrap text-gray-700">
-                        {panel.content}
-                      </p>
-                    </div>
-
-                    {/* 如果已生成图片，显示下载按钮 */}
-                    {panel.imageUrl &&
-                      panel.imageUrl.includes("http") &&
-                      !panel.imageUrl.includes("placehold.co") && (
-                        <div className="mt-4 flex justify-end">
-                          <Button
-                            size="sm"
-                            variant="outline"
-                            className="text-xs border-pink-200 text-pink-600"
-                            onClick={() =>
-                              handleDownloadImage(
-                                panel.imageUrl,
-                                `场景${i + 1}`
-                              )
-                            }
-                          >
-                            <Download className="w-3 h-3 mr-1" />
-                            下载图片
-                          </Button>
-                        </div>
-                      )}
-                  </div>
-                ))}
-              </div>
-
-              {/* 统一的生成漫画按钮 */}
-              <div className="mt-8 pt-6 border-t border-pink-100 text-center">
-                <div className="flex flex-col items-center">
-                  <div className="mb-4 bg-white/90 rounded-xl px-4 py-2 shadow-sm border border-pink-100">
-                    <div className="text-sm text-gray-600 flex flex-wrap justify-center gap-x-4 gap-y-2">
-                      <div className="flex items-center gap-1">
-                        <Sparkles className="w-3.5 h-3.5 text-purple-500" />
-                        <span>
-                          模型:{" "}
-                          <span className="font-medium text-purple-600">
-                            {
-                              textModels.find((m) => m.id === selectedModel)
-                                ?.name
-                            }
-                          </span>
-                        </span>
-                      </div>
-                      <div className="flex items-center gap-1">
-                        <SlidersHorizontal className="w-3.5 h-3.5 text-blue-500" />
-                        <span>
-                          图片比例:{" "}
-                          <span className="font-medium text-blue-600">
-                            {selectedAspectRatio}
-                          </span>
-                        </span>
-                      </div>
-                      {showAdvancedSettings && (
-                        <>
-                          <div className="flex items-center gap-1">
-                            <SlidersHorizontal className="w-3.5 h-3.5 text-indigo-500" />
-                            <span>
-                              文本权重:{" "}
-                              <span className="font-medium text-indigo-600">
-                                {guidanceScale.toFixed(1)}
-                              </span>
-                            </span>
-                          </div>
-                          <div className="flex items-center gap-1">
-                            <Dices className="w-3.5 h-3.5 text-purple-500" />
-                            <span>
-                              种子数:{" "}
-                              <span className="font-medium text-purple-600">
-                                {seedMode === "random" ? "随机" : seedValue}
-                              </span>
-                            </span>
-                          </div>
-                        </>
-                      )}
-                    </div>
-                  </div>
-                  <Button
-                    onClick={handleGenerateImages}
-                    disabled={isGeneratingImages || comicPanels.length === 0}
-                    size="lg"
-                    className="px-12 py-3 text-lg font-medium rounded-full bg-gradient-to-r from-orange-400 to-pink-500 hover:from-orange-500 hover:to-pink-600 disabled:opacity-70 shadow-lg shadow-orange-200"
-                  >
-                    {isGeneratingImages ? (
-                      <>
-                        <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-white mr-2" />
-                        生成中...
-                      </>
-                    ) : (
-                      <>
-                        <ImageIcon className="w-5 h-5 mr-2" />
-                        根据剧本生成漫画
-                      </>
-                    )}
-                  </Button>
-                  <p className="text-sm text-gray-500 mt-2">
-                    {isGeneratingImages
-                      ? "正在生成漫画图像，请稍候..."
-                      : "将基于上述剧本内容生成完整的漫画图像"}
-                  </p>
-                </div>
-              </div>
-
-              {/* Social Actions */}
-              <div className="mt-8 pt-6 border-t border-pink-100">
-                <div className="flex items-center justify-between">
-                  <div className="flex items-center gap-4">
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      className="text-gray-600 hover:text-pink-600"
-                    >
-                      <Heart className="w-4 h-4 mr-1" />
-                      喜欢
-                    </Button>
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      className="text-gray-600 hover:text-pink-600"
-                    >
-                      <MessageCircle className="w-4 h-4 mr-1" />
-                      评论
-                    </Button>
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      className="text-gray-600 hover:text-pink-600"
-                    >
-                      <Share className="w-4 h-4 mr-1" />
-                      分享
-                    </Button>
-                  </div>
-                  <Badge
-                    variant="secondary"
-                    className="bg-green-100 text-green-700"
-                  >
-                    生成成功
-                  </Badge>
-                </div>
-              </div>
-            </CardContent>
-          </Card>
-        )}
-      </div>
-
-      {/* FAQ Section */}
-      <div ref={faqRef} className="mt-16 pt-8 border-t border-pink-100">
-        <div className="text-center mb-10">
-          <h2 className="text-3xl font-bold bg-gradient-to-r from-pink-600 to-orange-600 bg-clip-text text-transparent mb-4">
-            常见问题
-          </h2>
-          <p className="text-gray-600">关于漫画生成器的一些常见疑问解答</p>
-        </div>
-
-        <div className="space-y-4 mb-8">
-          {faqs.map((faq, index) => (
-            <div
-              key={index}
-              className="border border-pink-100 rounded-xl overflow-hidden bg-white/70 backdrop-blur-sm shadow-sm"
-            >
-              <button
-                className="w-full p-4 text-left flex justify-between items-center"
-                onClick={() => toggleAccordion(index)}
-              >
-                <span className="font-medium text-gray-800">
-                  {faq.question}
-                </span>
-                <span className="text-pink-500">
-                  {activeAccordion === index ? (
-                    <MinusCircle className="w-5 h-5" />
-                  ) : (
-                    <PlusCircle className="w-5 h-5" />
-                  )}
-                </span>
-              </button>
-
-              {activeAccordion === index && (
-                <div className="p-4 pt-0 border-t border-pink-50 bg-gradient-to-br from-pink-50/30 to-orange-50/30">
-                  <p className="text-gray-600">{faq.answer}</p>
-                </div>
-              )}
-            </div>
-          ))}
-        </div>
-      </div>
-
-      {/* Footer */}
-      <div className="text-center py-8 text-gray-500 text-sm">
-        <p>让每个人都能轻松将文字转化为视觉故事 💫</p>
-        <div className="flex justify-center gap-4 mt-2">
-          <button className="hover:text-pink-500 transition-colors">
-            隐私政策
-          </button>
-          <button className="hover:text-pink-500 transition-colors">
-            使用条款
-          </button>
-          <button className="hover:text-pink-500 transition-colors">
-            联系我们
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/.history/app/page_20250802202412.tsx b/.history/app/page_20250802202412.tsx
deleted file mode 100644
index eda8e79..0000000
--- a/.history/app/page_20250802202412.tsx
+++ /dev/null
@@ -1,1145 +0,0 @@
-"use client";
-
-import { useState, useRef } from "react";
-import { Card, CardContent } from "@/components/ui/card";
-import { Button } from "@/components/ui/button";
-import { Textarea } from "@/components/ui/textarea";
-import { Badge } from "@/components/ui/badge";
-import { Slider } from "@/components/ui/slider";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import {
-  Sparkles,
-  ImageIcon,
-  Download,
-  Eye,
-  Heart,
-  MessageCircle,
-  Share,
-  Wand2,
-  AlertCircle,
-  ChevronDown,
-  ChevronRight,
-  Sliders,
-  Dices, // 替换 Dice 为 Dices
-  SlidersHorizontal,
-  ChevronsUpDown,
-  Check,
-  ChevronUp,
-  Home,
-  HelpCircle,
-  PlusCircle,
-  MinusCircle,
-} from "lucide-react";
-import { ComicPanel } from "@/lib/types";
-
-// 图片比例选项
-type AspectRatio = {
-  id: string;
-  label: string;
-  value: string; // 实际的宽高比值，如 "1:1"
-};
-
-// 文本生成模型选项
-type TextModel = {
-  id: string;
-  name: string;
-  description: string;
-  tag?: string; // 可选标签，如"推荐"、"快速"等
-  category: string; // 模型分类
-};
-
-// 模型分类
-type ModelCategory = {
-  id: string;
-  name: string;
-  description?: string;
-};
-
-const modelCategories: ModelCategory[] = [
-  { id: "recommended", name: "推荐模型", description: "我们精选的高质量模型" },
-  {
-    id: "specialized",
-    name: "专业模型",
-    description: "针对特定领域优化的模型",
-  },
-  { id: "fast", name: "快速模型", description: "响应速度快，成本较低" },
-  { id: "experimental", name: "实验模型", description: "新技术，可能有惊喜" },
-];
-
-const textModels: TextModel[] = [
-  // 推荐模型
-  {
-    id: "qwen-32b",
-    name: "QwQ-32B",
-    description: "高质量剧本生成，细节丰富，逻辑连贯",
-    tag: "推荐",
-    category: "recommended",
-  },
-  {
-    id: "gpt-4",
-    name: "GPT-4",
-    description: "功能强大，擅长复杂剧情创作",
-    category: "recommended",
-  },
-
-  // 专业模型
-  {
-    id: "story-xl",
-    name: "StoryXL",
-    description: "专为故事叙事优化，情节发展自然",
-    tag: "专业",
-    category: "specialized",
-  },
-  {
-    id: "comic-pro",
-    name: "ComicPro",
-    description: "针对漫画场景和对白优化",
-    tag: "专业",
-    category: "specialized",
-  },
-  {
-    id: "fantasy-writer",
-    name: "奇幻创作家",
-    description: "擅长创作魔幻、奇幻类故事",
-    category: "specialized",
-  },
-
-  // 快速模型
-  {
-    id: "deepseek-7b",
-    name: "DeepSeek-7B",
-    description: "生成速度快，质量适中",
-    tag: "快速",
-    category: "fast",
-  },
-  {
-    id: "gpt-3.5",
-    name: "GPT-3.5",
-    description: "平衡的选择，适合大多数场景",
-    category: "fast",
-  },
-  {
-    id: "llama-13b",
-    name: "Llama-13B",
-    description: "开源模型，速度快，资源占用少",
-    category: "fast",
-  },
-
-  // 实验模型
-  {
-    id: "mixtral-8x7b",
-    name: "Mixtral-8x7B",
-    description: "混合专家模型，创意表现出色",
-    tag: "新品",
-    category: "experimental",
-  },
-  {
-    id: "claude-3",
-    name: "Claude 3",
-    description: "擅长长篇创意写作，风格多样",
-    tag: "新品",
-    category: "experimental",
-  },
-];
-
-const aspectRatios: AspectRatio[] = [
-  { id: "1:1", label: "1:1", value: "1:1" },
-  { id: "3:4", label: "3:4", value: "3:4" },
-  { id: "4:3", label: "4:3", value: "4:3" },
-  { id: "16:9", label: "16:9", value: "16:9" },
-  { id: "9:16", label: "9:16", value: "9:16" },
-  { id: "2:3", label: "2:3", value: "2:3" },
-  { id: "3:2", label: "3:2", value: "3:2" },
-  { id: "21:9", label: "21:9", value: "21:9" },
-  { id: "custom", label: "自定义", value: "custom" },
-];
-
-export default function ComicGenerator() {
-  const [content, setContent] = useState("");
-  const [selectedCount, setSelectedCount] = useState(4);
-  const [selectedAspectRatio, setSelectedAspectRatio] =
-    useState<string>("16:9");
-  const [isGenerating, setIsGenerating] = useState(false);
-  const [isGeneratingImages, setIsGeneratingImages] = useState(false);
-  const [comicPanels, setComicPanels] = useState<ComicPanel[]>([]);
-  const [error, setError] = useState<string | null>(null);
-  const [imageGenerationError, setImageGenerationError] = useState<
-    string | null
-  >(null);
-  const [showAdvancedSettings, setShowAdvancedSettings] = useState(false);
-  const [guidanceScale, setGuidanceScale] = useState(2.5); // 默认值为2.5
-  const [seedMode, setSeedMode] = useState<"random" | "fixed">("random"); // 默认为随机
-  const [seedValue, setSeedValue] = useState<number>(1234);
-  const [selectedModel, setSelectedModel] = useState<string>("qwen-32b"); // 默认使用QwQ-32B模型
-  const [activeCategory, setActiveCategory] = useState<string>("recommended"); // 默认显示推荐模型
-  const [isModelSectionExpanded, setIsModelSectionExpanded] = useState(false);
-  const maxLength = 2000;
-  const [activeAccordion, setActiveAccordion] = useState<number | null>(null);
-  const faqRef = useRef<HTMLDivElement>(null);
-  const homeRef = useRef<HTMLDivElement>(null);
-
-  // 处理导航点击，滚动到指定区域
-  const scrollToRef = (ref: React.RefObject<HTMLDivElement>) => {
-    if (ref && ref.current) {
-      ref.current.scrollIntoView({ behavior: "smooth" });
-    }
-  };
-
-  // FAQ数据
-  const faqs = [
-    {
-      question: "漫画生成器是如何工作的？",
-      answer:
-        "我们的漫画生成器基于先进的AI文本和图像生成技术。首先，系统通过文本AI（如QwQ-32B）将您输入的内容转化为详细的漫画剧本，然后使用图像生成AI将剧本转换为精美的漫画图像。整个过程完全自动化，只需几分钟即可完成。",
-    },
-    {
-      question: "我可以自定义生成的漫画样式吗？",
-      answer:
-        "是的，您可以通过多种方式自定义漫画样式。您可以选择不同的图片比例（如1:1、16:9等），调整文本权重（影响图像与文本描述的匹配程度），以及设置种子数（控制生成的随机性）。我们还提供了多种文本生成模型供您选择，每种模型有其独特的创作风格。",
-    },
-    {
-      question: "生成的漫画可以用于商业用途吗？",
-      answer:
-        "生成的漫画作品的版权归您所有，您可以将其用于个人或商业用途。但请注意，如果您使用了他人的文字作为输入，需要确保您有权使用这些内容。此外，我们建议您在商业使用前，仔细检查并可能编辑AI生成的内容，以确保其质量和适用性。",
-    },
-    {
-      question: "有哪些适合生成漫画的内容类型？",
-      answer:
-        "几乎任何类型的故事或创意都可以用于生成漫画。包括但不限于：短篇故事、童话、科幻故事、冒险故事、生活日常、教育内容等。短小精悍、情节清晰的内容通常能获得更好的结果。建议每次提交的文本保持在300-1000字左右，确保故事有明确的开端、发展和结尾。",
-    },
-    {
-      question: "如何获得最佳的漫画生成效果？",
-      answer:
-        "为获得最佳效果，建议：(1) 提供具有明确场景和人物的描述；(2) 确保故事情节连贯且有逻辑；(3) 尝试不同的模型和设置组合；(4) 对于不满意的场景，可以使用刷新功能重新生成；(5) 调整文本权重可以控制生成图像与文本描述的匹配程度，数值越大匹配度越高。",
-    },
-  ];
-
-  // 切换FAQ手风琴状态
-  const toggleAccordion = (index: number) => {
-    setActiveAccordion(activeAccordion === index ? null : index);
-  };
-
-  const sampleArticle = `春天来了，小明走在回家的路上。突然，他发现路边有一只受伤的小猫。小明毫不犹豫地将小猫抱起，送到了附近的宠物医院。医生说小猫只是轻微擦伤，很快就能康复。从那天起，小明每天都会去医院看望小猫，直到它完全康复。`;
-
-  const handleGenerate = async () => {
-    if (!content.trim()) return;
-
-    setIsGenerating(true);
-    setError(null);
-
-    try {
-      const response = await fetch("/api/generate", {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({
-          content,
-          count: selectedCount,
-          model: selectedModel, // 添加模型参数
-        }),
-      });
-
-      const data = await response.json();
-
-      if (!response.ok) {
-        throw new Error(data.error || "生成漫画失败，请稍后再试");
-      }
-
-      setComicPanels(data.comicPanels);
-    } catch (err) {
-      setError(err instanceof Error ? err.message : "生成漫画时发生未知错误");
-      console.error("生成漫画错误:", err);
-    } finally {
-      setIsGenerating(false);
-    }
-  };
-
-  const handleGenerateImages = async () => {
-    if (comicPanels.length === 0) return;
-
-    setIsGeneratingImages(true);
-    setImageGenerationError(null);
-
-    // 确定要使用的种子值
-    const seed = seedMode === "random" ? -1 : seedValue;
-
-    try {
-      const response = await fetch("/api/generate-images", {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({
-          comicPanels,
-          aspectRatio: selectedAspectRatio,
-          seed: seed,
-          guidance_scale: guidanceScale,
-        }),
-      });
-
-      const data = await response.json();
-
-      if (!response.ok) {
-        throw new Error(data.error || "生成漫画图片失败，请稍后再试");
-      }
-
-      // 更新面板，包含新的图像URL
-      setComicPanels(data.comicPanels);
-    } catch (err) {
-      setImageGenerationError(
-        err instanceof Error ? err.message : "生成漫画图片时发生未知错误"
-      );
-      console.error("生成漫画图片错误:", err);
-    } finally {
-      setIsGeneratingImages(false);
-    }
-  };
-
-  const handleDownloadImage = (imageUrl: string, sceneName: string) => {
-    const a = document.createElement("a");
-    a.href = imageUrl;
-    a.download = `漫画场景_${sceneName}.jpg`;
-    a.click();
-  };
-
-  const fillSample = () => {
-    setContent(sampleArticle);
-  };
-
-  const getGridLayout = (count: number) => {
-    switch (count) {
-      case 2:
-        return "grid-cols-1 md:grid-cols-2";
-      case 4:
-        return "grid-cols-2";
-      case 6:
-        return "grid-cols-2 md:grid-cols-3";
-      case 8:
-        return "grid-cols-2 md:grid-cols-4";
-      default:
-        return "grid-cols-2";
-    }
-  };
-
-  const handleSeedValueChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const value = parseInt(e.target.value);
-    // 确保值在合法范围内 [-1, 2147483647]
-    if (!isNaN(value) && value >= -1 && value <= 2147483647) {
-      setSeedValue(value);
-    }
-  };
-
-  // 获取当前选中的模型信息
-  const selectedModelInfo = textModels.find(
-    (model) => model.id === selectedModel
-  );
-
-  return (
-    <div className="min-h-screen bg-gradient-to-br from-pink-50 to-orange-50">
-      {/* 导航栏 */}
-      <div className="bg-white/80 backdrop-blur-md border-b border-pink-100 sticky top-0 z-20">
-        <div className="max-w-4xl mx-auto px-4 py-4 flex items-center justify-between">
-          <div className="flex items-center gap-2">
-            <div className="w-8 h-8 bg-gradient-to-r from-pink-500 to-orange-500 rounded-lg flex items-center justify-center">
-              <Sparkles className="w-5 h-5 text-white" />
-            </div>
-            <span className="font-bold text-gray-800">漫画生成器</span>
-          </div>
-
-          {/* 导航链接 */}
-          <div className="flex items-center gap-4">
-            <button
-              onClick={() =>
-                scrollToRef(homeRef as React.RefObject<HTMLDivElement>)
-              }
-              className="flex items-center gap-1.5 px-3 py-1.5 rounded-full text-sm text-gray-700 hover:bg-pink-50 transition-colors"
-            >
-              <Home className="w-4 h-4" />
-              首页
-            </button>
-            <button
-              onClick={() =>
-                scrollToRef(faqRef as React.RefObject<HTMLDivElement>)
-              }
-              className="flex items-center gap-1.5 px-3 py-1.5 rounded-full text-sm text-gray-700 hover:bg-pink-50 transition-colors"
-            >
-              <HelpCircle className="w-4 h-4" />
-              常见问题
-            </button>
-            <Badge variant="secondary" className="bg-pink-100 text-pink-700">
-              Beta
-            </Badge>
-          </div>
-        </div>
-      </div>
-
-      <div ref={homeRef} className="max-w-4xl mx-auto px-4 py-8">
-        {/* Hero Section */}
-        <div className="text-center mb-12">
-          <h1 className="text-4xl font-bold bg-gradient-to-r from-pink-600 to-orange-600 bg-clip-text text-transparent mb-4">
-            文章转漫画生成器
-          </h1>
-          <p className="text-gray-600 text-lg mb-8">
-            将你的文字变成精彩的漫画故事 ✨
-          </p>
-        </div>
-
-        {/* Input Section */}
-        <Card className="mb-8 border-0 shadow-lg shadow-pink-100/50 bg-white/70 backdrop-blur-sm">
-          <CardContent className="p-6">
-            <div className="space-y-4">
-              <div className="flex items-center justify-between">
-                <label className="text-sm font-medium text-gray-700">
-                  输入你的文章内容或创意
-                </label>
-                <span
-                  className={`text-sm ${
-                    content.length > maxLength
-                      ? "text-red-500"
-                      : "text-gray-500"
-                  }`}
-                >
-                  还可以输入 {maxLength - content.length} 字
-                </span>
-              </div>
-
-              <Textarea
-                value={content}
-                onChange={(e) => setContent(e.target.value)}
-                placeholder="在这里输入你的故事内容或创意，我们会将其转化为精美的漫画剧本..."
-                className="min-h-[120px] resize-none border-pink-200 focus:border-pink-400 focus:ring-pink-400/20"
-                maxLength={maxLength}
-              />
-
-              <div className="flex justify-start">
-                <Button
-                  variant="outline"
-                  size="sm"
-                  onClick={fillSample}
-                  className="border-pink-200 text-pink-600 hover:bg-pink-50 bg-transparent"
-                >
-                  试试示例文章
-                </Button>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-
-        {/* Configuration Section */}
-        <Card className="mb-8 border-0 shadow-lg shadow-pink-100/50 bg-white/70 backdrop-blur-sm">
-          <CardContent className="p-6">
-            <div className="space-y-6">
-              {/* 文本生成模型选择 - 折叠式设计 */}
-              <div>
-                {/* 模型选择器标题与折叠按钮 */}
-                <div
-                  className="flex items-center justify-between cursor-pointer rounded-xl p-4 transition-all duration-200 hover:bg-white/80"
-                  onClick={() =>
-                    setIsModelSectionExpanded(!isModelSectionExpanded)
-                  }
-                >
-                  <div className="flex items-center gap-2">
-                    <div className="rounded-full bg-gradient-to-r from-purple-500 to-indigo-500 p-1.5">
-                      <Sparkles className="w-4 h-4 text-white" />
-                    </div>
-                    <div>
-                      <label className="font-medium text-gray-800">
-                        文本生成模型
-                      </label>
-                      {selectedModelInfo && (
-                        <div className="text-sm text-gray-500 flex items-center gap-1 mt-0.5">
-                          <span>当前：</span>
-                          <span className="font-medium text-purple-600">
-                            {selectedModelInfo.name}
-                          </span>
-                          {selectedModelInfo.tag && (
-                            <Badge
-                              className={`ml-1.5 text-[10px] h-4 px-1.5 ${
-                                selectedModelInfo.tag === "推荐"
-                                  ? "bg-green-100 text-green-800"
-                                  : selectedModelInfo.tag === "专业"
-                                  ? "bg-indigo-100 text-indigo-800"
-                                  : selectedModelInfo.tag === "新品"
-                                  ? "bg-orange-100 text-orange-800"
-                                  : "bg-blue-100 text-blue-800"
-                              }`}
-                            >
-                              {selectedModelInfo.tag}
-                            </Badge>
-                          )}
-                        </div>
-                      )}
-                    </div>
-                  </div>
-                  <div className="text-gray-500">
-                    {isModelSectionExpanded ? (
-                      <ChevronUp className="w-5 h-5" />
-                    ) : (
-                      <ChevronDown className="w-5 h-5" />
-                    )}
-                  </div>
-                </div>
-
-                {/* 展开后的完整模型选择区域 */}
-                {isModelSectionExpanded && (
-                  <div className="mt-2 pt-4 border-t border-gray-100 space-y-4 animate-in fade-in slide-in-from-top duration-300">
-                    {/* 模型分类选择器 */}
-                    <div className="flex items-center gap-2 overflow-x-auto pb-2 no-scrollbar">
-                      {modelCategories.map((category) => (
-                        <button
-                          key={category.id}
-                          onClick={(e) => {
-                            e.stopPropagation(); // 防止冒泡触发折叠
-                            setActiveCategory(category.id);
-                          }}
-                          className={`flex items-center gap-2 px-4 py-2 rounded-full whitespace-nowrap transition-all duration-200 ${
-                            activeCategory === category.id
-                              ? "bg-gradient-to-r from-purple-500 to-indigo-500 text-white shadow-sm"
-                              : "bg-white text-gray-700 hover:bg-gray-100"
-                          }`}
-                        >
-                          {activeCategory === category.id && (
-                            <div className="w-2 h-2 rounded-full bg-white"></div>
-                          )}
-                          {category.name}
-                        </button>
-                      ))}
-                    </div>
-
-                    {/* 当前分类描述 */}
-                    {modelCategories.find((c) => c.id === activeCategory)
-                      ?.description && (
-                      <p className="text-xs text-gray-500 mt-1">
-                        {
-                          modelCategories.find((c) => c.id === activeCategory)
-                            ?.description
-                        }
-                      </p>
-                    )}
-
-                    {/* 模型列表 - 根据分类过滤 */}
-                    <div className="space-y-4 mt-2">
-                      <div className="h-[280px] overflow-y-auto pr-2 custom-scrollbar">
-                        <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
-                          {textModels
-                            .filter(
-                              (model) => model.category === activeCategory
-                            )
-                            .map((model) => (
-                              <div
-                                key={model.id}
-                                onClick={(e) => {
-                                  e.stopPropagation(); // 防止冒泡触发折叠
-                                  setSelectedModel(model.id);
-                                }}
-                                className={`relative p-4 rounded-xl cursor-pointer transition-all duration-200 border ${
-                                  selectedModel === model.id
-                                    ? "border-purple-400 bg-gradient-to-br from-purple-50 to-indigo-50 shadow-sm"
-                                    : "border-gray-100 hover:border-purple-200 bg-white/80 hover:bg-white"
-                                }`}
-                              >
-                                {model.tag && (
-                                  <div className="absolute -top-2 -right-2">
-                                    <Badge
-                                      className={`text-xs ${
-                                        model.tag === "推荐"
-                                          ? "bg-green-100 text-green-800 hover:bg-green-200"
-                                          : model.tag === "专业"
-                                          ? "bg-indigo-100 text-indigo-800 hover:bg-indigo-200"
-                                          : model.tag === "新品"
-                                          ? "bg-orange-100 text-orange-800 hover:bg-orange-200"
-                                          : "bg-blue-100 text-blue-800 hover:bg-blue-200"
-                                      }`}
-                                    >
-                                      {model.tag}
-                                    </Badge>
-                                  </div>
-                                )}
-
-                                <div className="flex items-center gap-2">
-                                  <div
-                                    className={`rounded-full p-1 ${
-                                      selectedModel === model.id
-                                        ? "bg-gradient-to-r from-purple-500 to-indigo-500"
-                                        : "bg-gray-100"
-                                    }`}
-                                  >
-                                    <Sparkles
-                                      className={`w-3.5 h-3.5 ${
-                                        selectedModel === model.id
-                                          ? "text-white"
-                                          : "text-gray-500"
-                                      }`}
-                                    />
-                                  </div>
-                                  <span
-                                    className={`font-medium ${
-                                      selectedModel === model.id
-                                        ? "text-purple-700"
-                                        : "text-gray-700"
-                                    }`}
-                                  >
-                                    {model.name}
-                                  </span>
-
-                                  {/* 显示选中标记 */}
-                                  {selectedModel === model.id && (
-                                    <div className="ml-auto">
-                                      <Check className="w-4 h-4 text-purple-500" />
-                                    </div>
-                                  )}
-                                </div>
-
-                                <p className="text-xs text-gray-500 mt-2 pl-6">
-                                  {model.description}
-                                </p>
-                              </div>
-                            ))}
-                        </div>
-                      </div>
-
-                      {/* 模型数量和选择提示 */}
-                      <div className="text-xs text-gray-500 flex justify-between">
-                        <span>
-                          当前分类共{" "}
-                          {
-                            textModels.filter(
-                              (model) => model.category === activeCategory
-                            ).length
-                          }{" "}
-                          个模型
-                        </span>
-                        <span>点击卡片选择模型</span>
-                      </div>
-                    </div>
-                  </div>
-                )}
-              </div>
-
-              {/* 场景数量选择 */}
-              <div className="space-y-4">
-                <label className="text-sm font-medium text-gray-700 flex items-center gap-1.5">
-                  <ImageIcon className="w-4 h-4 text-pink-500" />
-                  选择场景数量
-                </label>
-
-                <div className="flex gap-3 flex-wrap">
-                  {[2, 4, 6, 8].map((count) => (
-                    <Button
-                      key={count}
-                      variant={selectedCount === count ? "default" : "outline"}
-                      size="sm"
-                      onClick={() => setSelectedCount(count)}
-                      className={`rounded-full px-6 ${
-                        selectedCount === count
-                          ? "bg-gradient-to-r from-pink-500 to-orange-500 hover:from-pink-600 hover:to-orange-600"
-                          : "border-pink-200 text-pink-600 hover:bg-pink-50"
-                      }`}
-                    >
-                      {count}个场景
-                    </Button>
-                  ))}
-                </div>
-              </div>
-
-              {/* 图片比例选择 */}
-              <div className="space-y-4">
-                <label className="text-sm font-medium text-gray-700 flex items-center gap-1.5">
-                  <SlidersHorizontal className="w-4 h-4 text-blue-500" />
-                  图片比例
-                </label>
-
-                <div className="flex gap-3 flex-wrap">
-                  {aspectRatios.map((ratio) => (
-                    <Button
-                      key={ratio.id}
-                      variant={
-                        selectedAspectRatio === ratio.value
-                          ? "default"
-                          : "outline"
-                      }
-                      size="sm"
-                      onClick={() => setSelectedAspectRatio(ratio.value)}
-                      className={`rounded-full px-4 ${
-                        selectedAspectRatio === ratio.value
-                          ? "bg-gradient-to-r from-blue-500 to-indigo-500 hover:from-blue-600 hover:to-indigo-600"
-                          : "border-blue-200 text-blue-600 hover:bg-blue-50"
-                      }`}
-                    >
-                      {ratio.label}
-                    </Button>
-                  ))}
-                </div>
-              </div>
-
-              {/* 高级设置部分 */}
-              <div className="mt-2">
-                <button
-                  className={`w-full flex items-center justify-between p-4 text-left rounded-xl transition-all duration-200 ${
-                    showAdvancedSettings
-                      ? "bg-gradient-to-r from-purple-50 to-indigo-50 shadow-sm"
-                      : "bg-white/50 hover:bg-white/80"
-                  }`}
-                  onClick={() => setShowAdvancedSettings(!showAdvancedSettings)}
-                >
-                  <div className="flex items-center gap-2">
-                    <div
-                      className={`rounded-full p-1.5 ${
-                        showAdvancedSettings
-                          ? "bg-gradient-to-r from-purple-500 to-indigo-500"
-                          : "bg-gray-100"
-                      }`}
-                    >
-                      <Sliders
-                        className={`w-4 h-4 ${
-                          showAdvancedSettings ? "text-white" : "text-gray-500"
-                        }`}
-                      />
-                    </div>
-                    <span
-                      className={`font-medium ${
-                        showAdvancedSettings
-                          ? "text-indigo-700"
-                          : "text-gray-700"
-                      }`}
-                    >
-                      高级设置
-                    </span>
-                  </div>
-                  {showAdvancedSettings ? (
-                    <ChevronDown className="w-5 h-5 text-indigo-500" />
-                  ) : (
-                    <ChevronRight className="w-5 h-5 text-gray-400" />
-                  )}
-                </button>
-
-                {showAdvancedSettings && (
-                  <div className="mt-4 pt-2 pb-1 px-4 bg-white/60 backdrop-blur-sm rounded-xl border border-indigo-100 shadow-sm space-y-6 transition-all duration-300 ease-in-out">
-                    {/* 文本权重设置 */}
-                    <div className="space-y-3 py-3 border-b border-indigo-50">
-                      <div className="flex items-center gap-2">
-                        <div className="rounded-full bg-gradient-to-r from-indigo-400 to-purple-400 p-1.5">
-                          <SlidersHorizontal className="w-3.5 h-3.5 text-white" />
-                        </div>
-                        <Label className="text-sm font-medium text-indigo-800">
-                          文本权重
-                        </Label>
-                      </div>
-                      <p className="text-xs text-gray-500 pl-7">
-                        显示文字（创意描述）对结果图像的影响程度，数值越大图像越接近文字描述，数值越小图像可能更具创造性
-                      </p>
-
-                      <div className="flex flex-col space-y-2 pl-7 pr-2">
-                        <div className="flex justify-between text-xs text-indigo-400 px-1">
-                          <span>更具创造性</span>
-                          <span>更贴近描述</span>
-                        </div>
-                        <div className="bg-gradient-to-r from-indigo-50 to-indigo-100 rounded-full p-1">
-                          <Slider
-                            value={[guidanceScale]}
-                            min={1}
-                            max={10}
-                            step={0.1}
-                            onValueChange={(value) =>
-                              setGuidanceScale(value[0])
-                            }
-                            className="w-full"
-                          />
-                        </div>
-                        <div className="flex justify-between text-xs text-gray-400 px-1">
-                          <span>1.0</span>
-                          <span>10.0</span>
-                        </div>
-                        <div className="text-right text-sm font-medium bg-gradient-to-r from-indigo-500 to-purple-600 bg-clip-text text-transparent">
-                          {guidanceScale.toFixed(1)}
-                        </div>
-                      </div>
-                    </div>
-
-                    {/* 种子数设置 */}
-                    <div className="space-y-3 py-1 pb-3">
-                      <div className="flex items-center gap-2">
-                        <div className="rounded-full bg-gradient-to-r from-indigo-400 to-purple-400 p-1.5">
-                          <Dices className="w-3.5 h-3.5 text-white" />
-                        </div>
-                        <Label className="text-sm font-medium text-indigo-800">
-                          种子数
-                        </Label>
-                      </div>
-                      <p className="text-xs text-gray-500 pl-7">
-                        用于物理定扩初始状态的基值，若随机种子相同并且其他参数相同，则生成图片大概率一致
-                      </p>
-
-                      <RadioGroup
-                        value={seedMode}
-                        onValueChange={(value) =>
-                          setSeedMode(value as "random" | "fixed")
-                        }
-                        className="flex gap-4 pl-7 mt-2"
-                      >
-                        <div className="flex items-center space-x-2">
-                          <RadioGroupItem
-                            value="random"
-                            id="random-seed"
-                            className="text-indigo-600 border-indigo-400"
-                          />
-                          <Label
-                            htmlFor="random-seed"
-                            className="cursor-pointer text-sm text-indigo-700"
-                          >
-                            随机
-                          </Label>
-                        </div>
-                        <div className="flex items-center space-x-2">
-                          <RadioGroupItem
-                            value="fixed"
-                            id="fixed-seed"
-                            className="text-indigo-600 border-indigo-400"
-                          />
-                          <Label
-                            htmlFor="fixed-seed"
-                            className="cursor-pointer text-sm text-indigo-700"
-                          >
-                            固定
-                          </Label>
-                        </div>
-                      </RadioGroup>
-
-                      {seedMode === "fixed" && (
-                        <div className="pl-7 mt-2">
-                          <Input
-                            type="number"
-                            value={seedValue}
-                            onChange={handleSeedValueChange}
-                            min={-1}
-                            max={2147483647}
-                            className="max-w-[200px] border-indigo-200 focus:border-indigo-400 focus:ring-indigo-300/20"
-                          />
-                        </div>
-                      )}
-                    </div>
-                  </div>
-                )}
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-
-        {/* Generate Button */}
-        <div className="text-center mb-8">
-          <Button
-            onClick={handleGenerate}
-            disabled={!content.trim() || isGenerating}
-            size="lg"
-            className="px-12 py-3 text-lg font-medium rounded-full bg-gradient-to-r from-pink-500 to-orange-500 hover:from-pink-600 hover:to-orange-600 disabled:from-gray-300 disabled:to-gray-300 shadow-lg shadow-pink-200"
-          >
-            {isGenerating ? (
-              <>
-                <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-white mr-2" />
-                生成中...
-              </>
-            ) : (
-              <>
-                <Wand2 className="w-5 h-5 mr-2" />
-                生成漫画剧本
-              </>
-            )}
-          </Button>
-        </div>
-
-        {/* Error Display */}
-        {error && (
-          <Card className="mb-8 border-red-200 shadow-lg shadow-red-100/50 bg-white/70 backdrop-blur-sm">
-            <CardContent className="p-4">
-              <p className="text-red-500 text-center">{error}</p>
-            </CardContent>
-          </Card>
-        )}
-
-        {/* Image Generation Error Display */}
-        {imageGenerationError && (
-          <Card className="mb-8 border-red-200 shadow-lg shadow-red-100/50 bg-white/70 backdrop-blur-sm">
-            <CardContent className="p-4">
-              <div className="flex items-center justify-center gap-2 text-red-500">
-                <AlertCircle className="w-4 h-4" />
-                <p>{imageGenerationError}</p>
-              </div>
-            </CardContent>
-          </Card>
-        )}
-
-        {/* Loading State */}
-        {isGenerating && (
-          <Card className="mb-8 border-0 shadow-lg shadow-pink-100/50 bg-white/70 backdrop-blur-sm">
-            <CardContent className="p-8 text-center">
-              <div className="space-y-4">
-                <div className="animate-pulse">
-                  <div className="w-16 h-16 bg-gradient-to-r from-pink-500 to-orange-500 rounded-full mx-auto mb-4 flex items-center justify-center">
-                    <Sparkles className="w-8 h-8 text-white animate-spin" />
-                  </div>
-                </div>
-                <p className="text-gray-600">正在创作漫画剧本...</p>
-                <p className="text-sm text-gray-500">预计需要30秒</p>
-              </div>
-            </CardContent>
-          </Card>
-        )}
-
-        {/* Results Section */}
-        {comicPanels.length > 0 && !isGenerating && (
-          <Card className="border-0 shadow-lg shadow-pink-100/50 bg-white/70 backdrop-blur-sm">
-            <CardContent className="p-6">
-              <div className="mb-6">
-                <h3 className="text-xl font-semibold text-gray-800 mb-2">
-                  生成结果
-                </h3>
-                <p className="text-gray-600 text-sm">
-                  以下是根据您的内容创作的漫画剧本
-                </p>
-              </div>
-
-              <div className="space-y-8">
-                {comicPanels.map((panel, i) => (
-                  <div
-                    key={panel.id}
-                    className="bg-white rounded-xl shadow-md p-5 border border-pink-100"
-                  >
-                    <div className="flex items-center mb-3">
-                      <div className="bg-gradient-to-r from-pink-500 to-orange-500 text-white rounded-full w-8 h-8 flex items-center justify-center mr-2">
-                        {i + 1}
-                      </div>
-                      <h4 className="font-medium text-gray-800">
-                        场景 {i + 1}
-                      </h4>
-                    </div>
-
-                    {/* 当有生成图片时显示图片 */}
-                    {panel.imageUrl &&
-                      panel.imageUrl.includes("http") &&
-                      !panel.imageUrl.includes("placehold.co") && (
-                        <div className="mb-4 rounded-lg overflow-hidden">
-                          <img
-                            src={panel.imageUrl}
-                            alt={`场景 ${i + 1}`}
-                            className="w-full h-auto object-contain"
-                          />
-                          {panel.error && (
-                            <p className="text-red-500 text-xs mt-1 flex items-center">
-                              <AlertCircle className="w-3 h-3 mr-1" />
-                              {panel.error}
-                            </p>
-                          )}
-                        </div>
-                      )}
-
-                    <div className="prose prose-pink max-w-none">
-                      <p className="whitespace-pre-wrap text-gray-700">
-                        {panel.content}
-                      </p>
-                    </div>
-
-                    {/* 如果已生成图片，显示下载按钮 */}
-                    {panel.imageUrl &&
-                      panel.imageUrl.includes("http") &&
-                      !panel.imageUrl.includes("placehold.co") && (
-                        <div className="mt-4 flex justify-end">
-                          <Button
-                            size="sm"
-                            variant="outline"
-                            className="text-xs border-pink-200 text-pink-600"
-                            onClick={() =>
-                              handleDownloadImage(
-                                panel.imageUrl,
-                                `场景${i + 1}`
-                              )
-                            }
-                          >
-                            <Download className="w-3 h-3 mr-1" />
-                            下载图片
-                          </Button>
-                        </div>
-                      )}
-                  </div>
-                ))}
-              </div>
-
-              {/* 统一的生成漫画按钮 */}
-              <div className="mt-8 pt-6 border-t border-pink-100 text-center">
-                <div className="flex flex-col items-center">
-                  <div className="mb-4 bg-white/90 rounded-xl px-4 py-2 shadow-sm border border-pink-100">
-                    <div className="text-sm text-gray-600 flex flex-wrap justify-center gap-x-4 gap-y-2">
-                      <div className="flex items-center gap-1">
-                        <Sparkles className="w-3.5 h-3.5 text-purple-500" />
-                        <span>
-                          模型:{" "}
-                          <span className="font-medium text-purple-600">
-                            {
-                              textModels.find((m) => m.id === selectedModel)
-                                ?.name
-                            }
-                          </span>
-                        </span>
-                      </div>
-                      <div className="flex items-center gap-1">
-                        <SlidersHorizontal className="w-3.5 h-3.5 text-blue-500" />
-                        <span>
-                          图片比例:{" "}
-                          <span className="font-medium text-blue-600">
-                            {selectedAspectRatio}
-                          </span>
-                        </span>
-                      </div>
-                      {showAdvancedSettings && (
-                        <>
-                          <div className="flex items-center gap-1">
-                            <SlidersHorizontal className="w-3.5 h-3.5 text-indigo-500" />
-                            <span>
-                              文本权重:{" "}
-                              <span className="font-medium text-indigo-600">
-                                {guidanceScale.toFixed(1)}
-                              </span>
-                            </span>
-                          </div>
-                          <div className="flex items-center gap-1">
-                            <Dices className="w-3.5 h-3.5 text-purple-500" />
-                            <span>
-                              种子数:{" "}
-                              <span className="font-medium text-purple-600">
-                                {seedMode === "random" ? "随机" : seedValue}
-                              </span>
-                            </span>
-                          </div>
-                        </>
-                      )}
-                    </div>
-                  </div>
-                  <Button
-                    onClick={handleGenerateImages}
-                    disabled={isGeneratingImages || comicPanels.length === 0}
-                    size="lg"
-                    className="px-12 py-3 text-lg font-medium rounded-full bg-gradient-to-r from-orange-400 to-pink-500 hover:from-orange-500 hover:to-pink-600 disabled:opacity-70 shadow-lg shadow-orange-200"
-                  >
-                    {isGeneratingImages ? (
-                      <>
-                        <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-white mr-2" />
-                        生成中...
-                      </>
-                    ) : (
-                      <>
-                        <ImageIcon className="w-5 h-5 mr-2" />
-                        根据剧本生成漫画
-                      </>
-                    )}
-                  </Button>
-                  <p className="text-sm text-gray-500 mt-2">
-                    {isGeneratingImages
-                      ? "正在生成漫画图像，请稍候..."
-                      : "将基于上述剧本内容生成完整的漫画图像"}
-                  </p>
-                </div>
-              </div>
-
-              {/* Social Actions */}
-              <div className="mt-8 pt-6 border-t border-pink-100">
-                <div className="flex items-center justify-between">
-                  <div className="flex items-center gap-4">
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      className="text-gray-600 hover:text-pink-600"
-                    >
-                      <Heart className="w-4 h-4 mr-1" />
-                      喜欢
-                    </Button>
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      className="text-gray-600 hover:text-pink-600"
-                    >
-                      <MessageCircle className="w-4 h-4 mr-1" />
-                      评论
-                    </Button>
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      className="text-gray-600 hover:text-pink-600"
-                    >
-                      <Share className="w-4 h-4 mr-1" />
-                      分享
-                    </Button>
-                  </div>
-                  <Badge
-                    variant="secondary"
-                    className="bg-green-100 text-green-700"
-                  >
-                    生成成功
-                  </Badge>
-                </div>
-              </div>
-            </CardContent>
-          </Card>
-        )}
-      </div>
-
-      {/* FAQ Section */}
-      <div ref={faqRef} className="mt-16 pt-8 border-t border-pink-100">
-        <div className="text-center mb-10">
-          <h2 className="text-3xl font-bold bg-gradient-to-r from-pink-600 to-orange-600 bg-clip-text text-transparent mb-4">
-            常见问题
-          </h2>
-          <p className="text-gray-600">关于漫画生成器的一些常见疑问解答</p>
-        </div>
-
-        <div className="space-y-4 mb-8">
-          {faqs.map((faq, index) => (
-            <div
-              key={index}
-              className="border border-pink-100 rounded-xl overflow-hidden bg-white/70 backdrop-blur-sm shadow-sm"
-            >
-              <button
-                className="w-full p-4 text-left flex justify-between items-center"
-                onClick={() => toggleAccordion(index)}
-              >
-                <span className="font-medium text-gray-800">
-                  {faq.question}
-                </span>
-                <span className="text-pink-500">
-                  {activeAccordion === index ? (
-                    <MinusCircle className="w-5 h-5" />
-                  ) : (
-                    <PlusCircle className="w-5 h-5" />
-                  )}
-                </span>
-              </button>
-
-              {activeAccordion === index && (
-                <div className="p-4 pt-0 border-t border-pink-50 bg-gradient-to-br from-pink-50/30 to-orange-50/30">
-                  <p className="text-gray-600">{faq.answer}</p>
-                </div>
-              )}
-            </div>
-          ))}
-        </div>
-      </div>
-
-      {/* Footer */}
-      <div className="text-center py-8 text-gray-500 text-sm">
-        <p>让每个人都能轻松将文字转化为视觉故事 💫</p>
-        <div className="flex justify-center gap-4 mt-2">
-          <button className="hover:text-pink-500 transition-colors">
-            隐私政策
-          </button>
-          <button className="hover:text-pink-500 transition-colors">
-            使用条款
-          </button>
-          <button className="hover:text-pink-500 transition-colors">
-            联系我们
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/.history/app/page_20250802203044.tsx b/.history/app/page_20250802203044.tsx
deleted file mode 100644
index eda8e79..0000000
--- a/.history/app/page_20250802203044.tsx
+++ /dev/null
@@ -1,1145 +0,0 @@
-"use client";
-
-import { useState, useRef } from "react";
-import { Card, CardContent } from "@/components/ui/card";
-import { Button } from "@/components/ui/button";
-import { Textarea } from "@/components/ui/textarea";
-import { Badge } from "@/components/ui/badge";
-import { Slider } from "@/components/ui/slider";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import {
-  Sparkles,
-  ImageIcon,
-  Download,
-  Eye,
-  Heart,
-  MessageCircle,
-  Share,
-  Wand2,
-  AlertCircle,
-  ChevronDown,
-  ChevronRight,
-  Sliders,
-  Dices, // 替换 Dice 为 Dices
-  SlidersHorizontal,
-  ChevronsUpDown,
-  Check,
-  ChevronUp,
-  Home,
-  HelpCircle,
-  PlusCircle,
-  MinusCircle,
-} from "lucide-react";
-import { ComicPanel } from "@/lib/types";
-
-// 图片比例选项
-type AspectRatio = {
-  id: string;
-  label: string;
-  value: string; // 实际的宽高比值，如 "1:1"
-};
-
-// 文本生成模型选项
-type TextModel = {
-  id: string;
-  name: string;
-  description: string;
-  tag?: string; // 可选标签，如"推荐"、"快速"等
-  category: string; // 模型分类
-};
-
-// 模型分类
-type ModelCategory = {
-  id: string;
-  name: string;
-  description?: string;
-};
-
-const modelCategories: ModelCategory[] = [
-  { id: "recommended", name: "推荐模型", description: "我们精选的高质量模型" },
-  {
-    id: "specialized",
-    name: "专业模型",
-    description: "针对特定领域优化的模型",
-  },
-  { id: "fast", name: "快速模型", description: "响应速度快，成本较低" },
-  { id: "experimental", name: "实验模型", description: "新技术，可能有惊喜" },
-];
-
-const textModels: TextModel[] = [
-  // 推荐模型
-  {
-    id: "qwen-32b",
-    name: "QwQ-32B",
-    description: "高质量剧本生成，细节丰富，逻辑连贯",
-    tag: "推荐",
-    category: "recommended",
-  },
-  {
-    id: "gpt-4",
-    name: "GPT-4",
-    description: "功能强大，擅长复杂剧情创作",
-    category: "recommended",
-  },
-
-  // 专业模型
-  {
-    id: "story-xl",
-    name: "StoryXL",
-    description: "专为故事叙事优化，情节发展自然",
-    tag: "专业",
-    category: "specialized",
-  },
-  {
-    id: "comic-pro",
-    name: "ComicPro",
-    description: "针对漫画场景和对白优化",
-    tag: "专业",
-    category: "specialized",
-  },
-  {
-    id: "fantasy-writer",
-    name: "奇幻创作家",
-    description: "擅长创作魔幻、奇幻类故事",
-    category: "specialized",
-  },
-
-  // 快速模型
-  {
-    id: "deepseek-7b",
-    name: "DeepSeek-7B",
-    description: "生成速度快，质量适中",
-    tag: "快速",
-    category: "fast",
-  },
-  {
-    id: "gpt-3.5",
-    name: "GPT-3.5",
-    description: "平衡的选择，适合大多数场景",
-    category: "fast",
-  },
-  {
-    id: "llama-13b",
-    name: "Llama-13B",
-    description: "开源模型，速度快，资源占用少",
-    category: "fast",
-  },
-
-  // 实验模型
-  {
-    id: "mixtral-8x7b",
-    name: "Mixtral-8x7B",
-    description: "混合专家模型，创意表现出色",
-    tag: "新品",
-    category: "experimental",
-  },
-  {
-    id: "claude-3",
-    name: "Claude 3",
-    description: "擅长长篇创意写作，风格多样",
-    tag: "新品",
-    category: "experimental",
-  },
-];
-
-const aspectRatios: AspectRatio[] = [
-  { id: "1:1", label: "1:1", value: "1:1" },
-  { id: "3:4", label: "3:4", value: "3:4" },
-  { id: "4:3", label: "4:3", value: "4:3" },
-  { id: "16:9", label: "16:9", value: "16:9" },
-  { id: "9:16", label: "9:16", value: "9:16" },
-  { id: "2:3", label: "2:3", value: "2:3" },
-  { id: "3:2", label: "3:2", value: "3:2" },
-  { id: "21:9", label: "21:9", value: "21:9" },
-  { id: "custom", label: "自定义", value: "custom" },
-];
-
-export default function ComicGenerator() {
-  const [content, setContent] = useState("");
-  const [selectedCount, setSelectedCount] = useState(4);
-  const [selectedAspectRatio, setSelectedAspectRatio] =
-    useState<string>("16:9");
-  const [isGenerating, setIsGenerating] = useState(false);
-  const [isGeneratingImages, setIsGeneratingImages] = useState(false);
-  const [comicPanels, setComicPanels] = useState<ComicPanel[]>([]);
-  const [error, setError] = useState<string | null>(null);
-  const [imageGenerationError, setImageGenerationError] = useState<
-    string | null
-  >(null);
-  const [showAdvancedSettings, setShowAdvancedSettings] = useState(false);
-  const [guidanceScale, setGuidanceScale] = useState(2.5); // 默认值为2.5
-  const [seedMode, setSeedMode] = useState<"random" | "fixed">("random"); // 默认为随机
-  const [seedValue, setSeedValue] = useState<number>(1234);
-  const [selectedModel, setSelectedModel] = useState<string>("qwen-32b"); // 默认使用QwQ-32B模型
-  const [activeCategory, setActiveCategory] = useState<string>("recommended"); // 默认显示推荐模型
-  const [isModelSectionExpanded, setIsModelSectionExpanded] = useState(false);
-  const maxLength = 2000;
-  const [activeAccordion, setActiveAccordion] = useState<number | null>(null);
-  const faqRef = useRef<HTMLDivElement>(null);
-  const homeRef = useRef<HTMLDivElement>(null);
-
-  // 处理导航点击，滚动到指定区域
-  const scrollToRef = (ref: React.RefObject<HTMLDivElement>) => {
-    if (ref && ref.current) {
-      ref.current.scrollIntoView({ behavior: "smooth" });
-    }
-  };
-
-  // FAQ数据
-  const faqs = [
-    {
-      question: "漫画生成器是如何工作的？",
-      answer:
-        "我们的漫画生成器基于先进的AI文本和图像生成技术。首先，系统通过文本AI（如QwQ-32B）将您输入的内容转化为详细的漫画剧本，然后使用图像生成AI将剧本转换为精美的漫画图像。整个过程完全自动化，只需几分钟即可完成。",
-    },
-    {
-      question: "我可以自定义生成的漫画样式吗？",
-      answer:
-        "是的，您可以通过多种方式自定义漫画样式。您可以选择不同的图片比例（如1:1、16:9等），调整文本权重（影响图像与文本描述的匹配程度），以及设置种子数（控制生成的随机性）。我们还提供了多种文本生成模型供您选择，每种模型有其独特的创作风格。",
-    },
-    {
-      question: "生成的漫画可以用于商业用途吗？",
-      answer:
-        "生成的漫画作品的版权归您所有，您可以将其用于个人或商业用途。但请注意，如果您使用了他人的文字作为输入，需要确保您有权使用这些内容。此外，我们建议您在商业使用前，仔细检查并可能编辑AI生成的内容，以确保其质量和适用性。",
-    },
-    {
-      question: "有哪些适合生成漫画的内容类型？",
-      answer:
-        "几乎任何类型的故事或创意都可以用于生成漫画。包括但不限于：短篇故事、童话、科幻故事、冒险故事、生活日常、教育内容等。短小精悍、情节清晰的内容通常能获得更好的结果。建议每次提交的文本保持在300-1000字左右，确保故事有明确的开端、发展和结尾。",
-    },
-    {
-      question: "如何获得最佳的漫画生成效果？",
-      answer:
-        "为获得最佳效果，建议：(1) 提供具有明确场景和人物的描述；(2) 确保故事情节连贯且有逻辑；(3) 尝试不同的模型和设置组合；(4) 对于不满意的场景，可以使用刷新功能重新生成；(5) 调整文本权重可以控制生成图像与文本描述的匹配程度，数值越大匹配度越高。",
-    },
-  ];
-
-  // 切换FAQ手风琴状态
-  const toggleAccordion = (index: number) => {
-    setActiveAccordion(activeAccordion === index ? null : index);
-  };
-
-  const sampleArticle = `春天来了，小明走在回家的路上。突然，他发现路边有一只受伤的小猫。小明毫不犹豫地将小猫抱起，送到了附近的宠物医院。医生说小猫只是轻微擦伤，很快就能康复。从那天起，小明每天都会去医院看望小猫，直到它完全康复。`;
-
-  const handleGenerate = async () => {
-    if (!content.trim()) return;
-
-    setIsGenerating(true);
-    setError(null);
-
-    try {
-      const response = await fetch("/api/generate", {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({
-          content,
-          count: selectedCount,
-          model: selectedModel, // 添加模型参数
-        }),
-      });
-
-      const data = await response.json();
-
-      if (!response.ok) {
-        throw new Error(data.error || "生成漫画失败，请稍后再试");
-      }
-
-      setComicPanels(data.comicPanels);
-    } catch (err) {
-      setError(err instanceof Error ? err.message : "生成漫画时发生未知错误");
-      console.error("生成漫画错误:", err);
-    } finally {
-      setIsGenerating(false);
-    }
-  };
-
-  const handleGenerateImages = async () => {
-    if (comicPanels.length === 0) return;
-
-    setIsGeneratingImages(true);
-    setImageGenerationError(null);
-
-    // 确定要使用的种子值
-    const seed = seedMode === "random" ? -1 : seedValue;
-
-    try {
-      const response = await fetch("/api/generate-images", {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({
-          comicPanels,
-          aspectRatio: selectedAspectRatio,
-          seed: seed,
-          guidance_scale: guidanceScale,
-        }),
-      });
-
-      const data = await response.json();
-
-      if (!response.ok) {
-        throw new Error(data.error || "生成漫画图片失败，请稍后再试");
-      }
-
-      // 更新面板，包含新的图像URL
-      setComicPanels(data.comicPanels);
-    } catch (err) {
-      setImageGenerationError(
-        err instanceof Error ? err.message : "生成漫画图片时发生未知错误"
-      );
-      console.error("生成漫画图片错误:", err);
-    } finally {
-      setIsGeneratingImages(false);
-    }
-  };
-
-  const handleDownloadImage = (imageUrl: string, sceneName: string) => {
-    const a = document.createElement("a");
-    a.href = imageUrl;
-    a.download = `漫画场景_${sceneName}.jpg`;
-    a.click();
-  };
-
-  const fillSample = () => {
-    setContent(sampleArticle);
-  };
-
-  const getGridLayout = (count: number) => {
-    switch (count) {
-      case 2:
-        return "grid-cols-1 md:grid-cols-2";
-      case 4:
-        return "grid-cols-2";
-      case 6:
-        return "grid-cols-2 md:grid-cols-3";
-      case 8:
-        return "grid-cols-2 md:grid-cols-4";
-      default:
-        return "grid-cols-2";
-    }
-  };
-
-  const handleSeedValueChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const value = parseInt(e.target.value);
-    // 确保值在合法范围内 [-1, 2147483647]
-    if (!isNaN(value) && value >= -1 && value <= 2147483647) {
-      setSeedValue(value);
-    }
-  };
-
-  // 获取当前选中的模型信息
-  const selectedModelInfo = textModels.find(
-    (model) => model.id === selectedModel
-  );
-
-  return (
-    <div className="min-h-screen bg-gradient-to-br from-pink-50 to-orange-50">
-      {/* 导航栏 */}
-      <div className="bg-white/80 backdrop-blur-md border-b border-pink-100 sticky top-0 z-20">
-        <div className="max-w-4xl mx-auto px-4 py-4 flex items-center justify-between">
-          <div className="flex items-center gap-2">
-            <div className="w-8 h-8 bg-gradient-to-r from-pink-500 to-orange-500 rounded-lg flex items-center justify-center">
-              <Sparkles className="w-5 h-5 text-white" />
-            </div>
-            <span className="font-bold text-gray-800">漫画生成器</span>
-          </div>
-
-          {/* 导航链接 */}
-          <div className="flex items-center gap-4">
-            <button
-              onClick={() =>
-                scrollToRef(homeRef as React.RefObject<HTMLDivElement>)
-              }
-              className="flex items-center gap-1.5 px-3 py-1.5 rounded-full text-sm text-gray-700 hover:bg-pink-50 transition-colors"
-            >
-              <Home className="w-4 h-4" />
-              首页
-            </button>
-            <button
-              onClick={() =>
-                scrollToRef(faqRef as React.RefObject<HTMLDivElement>)
-              }
-              className="flex items-center gap-1.5 px-3 py-1.5 rounded-full text-sm text-gray-700 hover:bg-pink-50 transition-colors"
-            >
-              <HelpCircle className="w-4 h-4" />
-              常见问题
-            </button>
-            <Badge variant="secondary" className="bg-pink-100 text-pink-700">
-              Beta
-            </Badge>
-          </div>
-        </div>
-      </div>
-
-      <div ref={homeRef} className="max-w-4xl mx-auto px-4 py-8">
-        {/* Hero Section */}
-        <div className="text-center mb-12">
-          <h1 className="text-4xl font-bold bg-gradient-to-r from-pink-600 to-orange-600 bg-clip-text text-transparent mb-4">
-            文章转漫画生成器
-          </h1>
-          <p className="text-gray-600 text-lg mb-8">
-            将你的文字变成精彩的漫画故事 ✨
-          </p>
-        </div>
-
-        {/* Input Section */}
-        <Card className="mb-8 border-0 shadow-lg shadow-pink-100/50 bg-white/70 backdrop-blur-sm">
-          <CardContent className="p-6">
-            <div className="space-y-4">
-              <div className="flex items-center justify-between">
-                <label className="text-sm font-medium text-gray-700">
-                  输入你的文章内容或创意
-                </label>
-                <span
-                  className={`text-sm ${
-                    content.length > maxLength
-                      ? "text-red-500"
-                      : "text-gray-500"
-                  }`}
-                >
-                  还可以输入 {maxLength - content.length} 字
-                </span>
-              </div>
-
-              <Textarea
-                value={content}
-                onChange={(e) => setContent(e.target.value)}
-                placeholder="在这里输入你的故事内容或创意，我们会将其转化为精美的漫画剧本..."
-                className="min-h-[120px] resize-none border-pink-200 focus:border-pink-400 focus:ring-pink-400/20"
-                maxLength={maxLength}
-              />
-
-              <div className="flex justify-start">
-                <Button
-                  variant="outline"
-                  size="sm"
-                  onClick={fillSample}
-                  className="border-pink-200 text-pink-600 hover:bg-pink-50 bg-transparent"
-                >
-                  试试示例文章
-                </Button>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-
-        {/* Configuration Section */}
-        <Card className="mb-8 border-0 shadow-lg shadow-pink-100/50 bg-white/70 backdrop-blur-sm">
-          <CardContent className="p-6">
-            <div className="space-y-6">
-              {/* 文本生成模型选择 - 折叠式设计 */}
-              <div>
-                {/* 模型选择器标题与折叠按钮 */}
-                <div
-                  className="flex items-center justify-between cursor-pointer rounded-xl p-4 transition-all duration-200 hover:bg-white/80"
-                  onClick={() =>
-                    setIsModelSectionExpanded(!isModelSectionExpanded)
-                  }
-                >
-                  <div className="flex items-center gap-2">
-                    <div className="rounded-full bg-gradient-to-r from-purple-500 to-indigo-500 p-1.5">
-                      <Sparkles className="w-4 h-4 text-white" />
-                    </div>
-                    <div>
-                      <label className="font-medium text-gray-800">
-                        文本生成模型
-                      </label>
-                      {selectedModelInfo && (
-                        <div className="text-sm text-gray-500 flex items-center gap-1 mt-0.5">
-                          <span>当前：</span>
-                          <span className="font-medium text-purple-600">
-                            {selectedModelInfo.name}
-                          </span>
-                          {selectedModelInfo.tag && (
-                            <Badge
-                              className={`ml-1.5 text-[10px] h-4 px-1.5 ${
-                                selectedModelInfo.tag === "推荐"
-                                  ? "bg-green-100 text-green-800"
-                                  : selectedModelInfo.tag === "专业"
-                                  ? "bg-indigo-100 text-indigo-800"
-                                  : selectedModelInfo.tag === "新品"
-                                  ? "bg-orange-100 text-orange-800"
-                                  : "bg-blue-100 text-blue-800"
-                              }`}
-                            >
-                              {selectedModelInfo.tag}
-                            </Badge>
-                          )}
-                        </div>
-                      )}
-                    </div>
-                  </div>
-                  <div className="text-gray-500">
-                    {isModelSectionExpanded ? (
-                      <ChevronUp className="w-5 h-5" />
-                    ) : (
-                      <ChevronDown className="w-5 h-5" />
-                    )}
-                  </div>
-                </div>
-
-                {/* 展开后的完整模型选择区域 */}
-                {isModelSectionExpanded && (
-                  <div className="mt-2 pt-4 border-t border-gray-100 space-y-4 animate-in fade-in slide-in-from-top duration-300">
-                    {/* 模型分类选择器 */}
-                    <div className="flex items-center gap-2 overflow-x-auto pb-2 no-scrollbar">
-                      {modelCategories.map((category) => (
-                        <button
-                          key={category.id}
-                          onClick={(e) => {
-                            e.stopPropagation(); // 防止冒泡触发折叠
-                            setActiveCategory(category.id);
-                          }}
-                          className={`flex items-center gap-2 px-4 py-2 rounded-full whitespace-nowrap transition-all duration-200 ${
-                            activeCategory === category.id
-                              ? "bg-gradient-to-r from-purple-500 to-indigo-500 text-white shadow-sm"
-                              : "bg-white text-gray-700 hover:bg-gray-100"
-                          }`}
-                        >
-                          {activeCategory === category.id && (
-                            <div className="w-2 h-2 rounded-full bg-white"></div>
-                          )}
-                          {category.name}
-                        </button>
-                      ))}
-                    </div>
-
-                    {/* 当前分类描述 */}
-                    {modelCategories.find((c) => c.id === activeCategory)
-                      ?.description && (
-                      <p className="text-xs text-gray-500 mt-1">
-                        {
-                          modelCategories.find((c) => c.id === activeCategory)
-                            ?.description
-                        }
-                      </p>
-                    )}
-
-                    {/* 模型列表 - 根据分类过滤 */}
-                    <div className="space-y-4 mt-2">
-                      <div className="h-[280px] overflow-y-auto pr-2 custom-scrollbar">
-                        <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
-                          {textModels
-                            .filter(
-                              (model) => model.category === activeCategory
-                            )
-                            .map((model) => (
-                              <div
-                                key={model.id}
-                                onClick={(e) => {
-                                  e.stopPropagation(); // 防止冒泡触发折叠
-                                  setSelectedModel(model.id);
-                                }}
-                                className={`relative p-4 rounded-xl cursor-pointer transition-all duration-200 border ${
-                                  selectedModel === model.id
-                                    ? "border-purple-400 bg-gradient-to-br from-purple-50 to-indigo-50 shadow-sm"
-                                    : "border-gray-100 hover:border-purple-200 bg-white/80 hover:bg-white"
-                                }`}
-                              >
-                                {model.tag && (
-                                  <div className="absolute -top-2 -right-2">
-                                    <Badge
-                                      className={`text-xs ${
-                                        model.tag === "推荐"
-                                          ? "bg-green-100 text-green-800 hover:bg-green-200"
-                                          : model.tag === "专业"
-                                          ? "bg-indigo-100 text-indigo-800 hover:bg-indigo-200"
-                                          : model.tag === "新品"
-                                          ? "bg-orange-100 text-orange-800 hover:bg-orange-200"
-                                          : "bg-blue-100 text-blue-800 hover:bg-blue-200"
-                                      }`}
-                                    >
-                                      {model.tag}
-                                    </Badge>
-                                  </div>
-                                )}
-
-                                <div className="flex items-center gap-2">
-                                  <div
-                                    className={`rounded-full p-1 ${
-                                      selectedModel === model.id
-                                        ? "bg-gradient-to-r from-purple-500 to-indigo-500"
-                                        : "bg-gray-100"
-                                    }`}
-                                  >
-                                    <Sparkles
-                                      className={`w-3.5 h-3.5 ${
-                                        selectedModel === model.id
-                                          ? "text-white"
-                                          : "text-gray-500"
-                                      }`}
-                                    />
-                                  </div>
-                                  <span
-                                    className={`font-medium ${
-                                      selectedModel === model.id
-                                        ? "text-purple-700"
-                                        : "text-gray-700"
-                                    }`}
-                                  >
-                                    {model.name}
-                                  </span>
-
-                                  {/* 显示选中标记 */}
-                                  {selectedModel === model.id && (
-                                    <div className="ml-auto">
-                                      <Check className="w-4 h-4 text-purple-500" />
-                                    </div>
-                                  )}
-                                </div>
-
-                                <p className="text-xs text-gray-500 mt-2 pl-6">
-                                  {model.description}
-                                </p>
-                              </div>
-                            ))}
-                        </div>
-                      </div>
-
-                      {/* 模型数量和选择提示 */}
-                      <div className="text-xs text-gray-500 flex justify-between">
-                        <span>
-                          当前分类共{" "}
-                          {
-                            textModels.filter(
-                              (model) => model.category === activeCategory
-                            ).length
-                          }{" "}
-                          个模型
-                        </span>
-                        <span>点击卡片选择模型</span>
-                      </div>
-                    </div>
-                  </div>
-                )}
-              </div>
-
-              {/* 场景数量选择 */}
-              <div className="space-y-4">
-                <label className="text-sm font-medium text-gray-700 flex items-center gap-1.5">
-                  <ImageIcon className="w-4 h-4 text-pink-500" />
-                  选择场景数量
-                </label>
-
-                <div className="flex gap-3 flex-wrap">
-                  {[2, 4, 6, 8].map((count) => (
-                    <Button
-                      key={count}
-                      variant={selectedCount === count ? "default" : "outline"}
-                      size="sm"
-                      onClick={() => setSelectedCount(count)}
-                      className={`rounded-full px-6 ${
-                        selectedCount === count
-                          ? "bg-gradient-to-r from-pink-500 to-orange-500 hover:from-pink-600 hover:to-orange-600"
-                          : "border-pink-200 text-pink-600 hover:bg-pink-50"
-                      }`}
-                    >
-                      {count}个场景
-                    </Button>
-                  ))}
-                </div>
-              </div>
-
-              {/* 图片比例选择 */}
-              <div className="space-y-4">
-                <label className="text-sm font-medium text-gray-700 flex items-center gap-1.5">
-                  <SlidersHorizontal className="w-4 h-4 text-blue-500" />
-                  图片比例
-                </label>
-
-                <div className="flex gap-3 flex-wrap">
-                  {aspectRatios.map((ratio) => (
-                    <Button
-                      key={ratio.id}
-                      variant={
-                        selectedAspectRatio === ratio.value
-                          ? "default"
-                          : "outline"
-                      }
-                      size="sm"
-                      onClick={() => setSelectedAspectRatio(ratio.value)}
-                      className={`rounded-full px-4 ${
-                        selectedAspectRatio === ratio.value
-                          ? "bg-gradient-to-r from-blue-500 to-indigo-500 hover:from-blue-600 hover:to-indigo-600"
-                          : "border-blue-200 text-blue-600 hover:bg-blue-50"
-                      }`}
-                    >
-                      {ratio.label}
-                    </Button>
-                  ))}
-                </div>
-              </div>
-
-              {/* 高级设置部分 */}
-              <div className="mt-2">
-                <button
-                  className={`w-full flex items-center justify-between p-4 text-left rounded-xl transition-all duration-200 ${
-                    showAdvancedSettings
-                      ? "bg-gradient-to-r from-purple-50 to-indigo-50 shadow-sm"
-                      : "bg-white/50 hover:bg-white/80"
-                  }`}
-                  onClick={() => setShowAdvancedSettings(!showAdvancedSettings)}
-                >
-                  <div className="flex items-center gap-2">
-                    <div
-                      className={`rounded-full p-1.5 ${
-                        showAdvancedSettings
-                          ? "bg-gradient-to-r from-purple-500 to-indigo-500"
-                          : "bg-gray-100"
-                      }`}
-                    >
-                      <Sliders
-                        className={`w-4 h-4 ${
-                          showAdvancedSettings ? "text-white" : "text-gray-500"
-                        }`}
-                      />
-                    </div>
-                    <span
-                      className={`font-medium ${
-                        showAdvancedSettings
-                          ? "text-indigo-700"
-                          : "text-gray-700"
-                      }`}
-                    >
-                      高级设置
-                    </span>
-                  </div>
-                  {showAdvancedSettings ? (
-                    <ChevronDown className="w-5 h-5 text-indigo-500" />
-                  ) : (
-                    <ChevronRight className="w-5 h-5 text-gray-400" />
-                  )}
-                </button>
-
-                {showAdvancedSettings && (
-                  <div className="mt-4 pt-2 pb-1 px-4 bg-white/60 backdrop-blur-sm rounded-xl border border-indigo-100 shadow-sm space-y-6 transition-all duration-300 ease-in-out">
-                    {/* 文本权重设置 */}
-                    <div className="space-y-3 py-3 border-b border-indigo-50">
-                      <div className="flex items-center gap-2">
-                        <div className="rounded-full bg-gradient-to-r from-indigo-400 to-purple-400 p-1.5">
-                          <SlidersHorizontal className="w-3.5 h-3.5 text-white" />
-                        </div>
-                        <Label className="text-sm font-medium text-indigo-800">
-                          文本权重
-                        </Label>
-                      </div>
-                      <p className="text-xs text-gray-500 pl-7">
-                        显示文字（创意描述）对结果图像的影响程度，数值越大图像越接近文字描述，数值越小图像可能更具创造性
-                      </p>
-
-                      <div className="flex flex-col space-y-2 pl-7 pr-2">
-                        <div className="flex justify-between text-xs text-indigo-400 px-1">
-                          <span>更具创造性</span>
-                          <span>更贴近描述</span>
-                        </div>
-                        <div className="bg-gradient-to-r from-indigo-50 to-indigo-100 rounded-full p-1">
-                          <Slider
-                            value={[guidanceScale]}
-                            min={1}
-                            max={10}
-                            step={0.1}
-                            onValueChange={(value) =>
-                              setGuidanceScale(value[0])
-                            }
-                            className="w-full"
-                          />
-                        </div>
-                        <div className="flex justify-between text-xs text-gray-400 px-1">
-                          <span>1.0</span>
-                          <span>10.0</span>
-                        </div>
-                        <div className="text-right text-sm font-medium bg-gradient-to-r from-indigo-500 to-purple-600 bg-clip-text text-transparent">
-                          {guidanceScale.toFixed(1)}
-                        </div>
-                      </div>
-                    </div>
-
-                    {/* 种子数设置 */}
-                    <div className="space-y-3 py-1 pb-3">
-                      <div className="flex items-center gap-2">
-                        <div className="rounded-full bg-gradient-to-r from-indigo-400 to-purple-400 p-1.5">
-                          <Dices className="w-3.5 h-3.5 text-white" />
-                        </div>
-                        <Label className="text-sm font-medium text-indigo-800">
-                          种子数
-                        </Label>
-                      </div>
-                      <p className="text-xs text-gray-500 pl-7">
-                        用于物理定扩初始状态的基值，若随机种子相同并且其他参数相同，则生成图片大概率一致
-                      </p>
-
-                      <RadioGroup
-                        value={seedMode}
-                        onValueChange={(value) =>
-                          setSeedMode(value as "random" | "fixed")
-                        }
-                        className="flex gap-4 pl-7 mt-2"
-                      >
-                        <div className="flex items-center space-x-2">
-                          <RadioGroupItem
-                            value="random"
-                            id="random-seed"
-                            className="text-indigo-600 border-indigo-400"
-                          />
-                          <Label
-                            htmlFor="random-seed"
-                            className="cursor-pointer text-sm text-indigo-700"
-                          >
-                            随机
-                          </Label>
-                        </div>
-                        <div className="flex items-center space-x-2">
-                          <RadioGroupItem
-                            value="fixed"
-                            id="fixed-seed"
-                            className="text-indigo-600 border-indigo-400"
-                          />
-                          <Label
-                            htmlFor="fixed-seed"
-                            className="cursor-pointer text-sm text-indigo-700"
-                          >
-                            固定
-                          </Label>
-                        </div>
-                      </RadioGroup>
-
-                      {seedMode === "fixed" && (
-                        <div className="pl-7 mt-2">
-                          <Input
-                            type="number"
-                            value={seedValue}
-                            onChange={handleSeedValueChange}
-                            min={-1}
-                            max={2147483647}
-                            className="max-w-[200px] border-indigo-200 focus:border-indigo-400 focus:ring-indigo-300/20"
-                          />
-                        </div>
-                      )}
-                    </div>
-                  </div>
-                )}
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-
-        {/* Generate Button */}
-        <div className="text-center mb-8">
-          <Button
-            onClick={handleGenerate}
-            disabled={!content.trim() || isGenerating}
-            size="lg"
-            className="px-12 py-3 text-lg font-medium rounded-full bg-gradient-to-r from-pink-500 to-orange-500 hover:from-pink-600 hover:to-orange-600 disabled:from-gray-300 disabled:to-gray-300 shadow-lg shadow-pink-200"
-          >
-            {isGenerating ? (
-              <>
-                <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-white mr-2" />
-                生成中...
-              </>
-            ) : (
-              <>
-                <Wand2 className="w-5 h-5 mr-2" />
-                生成漫画剧本
-              </>
-            )}
-          </Button>
-        </div>
-
-        {/* Error Display */}
-        {error && (
-          <Card className="mb-8 border-red-200 shadow-lg shadow-red-100/50 bg-white/70 backdrop-blur-sm">
-            <CardContent className="p-4">
-              <p className="text-red-500 text-center">{error}</p>
-            </CardContent>
-          </Card>
-        )}
-
-        {/* Image Generation Error Display */}
-        {imageGenerationError && (
-          <Card className="mb-8 border-red-200 shadow-lg shadow-red-100/50 bg-white/70 backdrop-blur-sm">
-            <CardContent className="p-4">
-              <div className="flex items-center justify-center gap-2 text-red-500">
-                <AlertCircle className="w-4 h-4" />
-                <p>{imageGenerationError}</p>
-              </div>
-            </CardContent>
-          </Card>
-        )}
-
-        {/* Loading State */}
-        {isGenerating && (
-          <Card className="mb-8 border-0 shadow-lg shadow-pink-100/50 bg-white/70 backdrop-blur-sm">
-            <CardContent className="p-8 text-center">
-              <div className="space-y-4">
-                <div className="animate-pulse">
-                  <div className="w-16 h-16 bg-gradient-to-r from-pink-500 to-orange-500 rounded-full mx-auto mb-4 flex items-center justify-center">
-                    <Sparkles className="w-8 h-8 text-white animate-spin" />
-                  </div>
-                </div>
-                <p className="text-gray-600">正在创作漫画剧本...</p>
-                <p className="text-sm text-gray-500">预计需要30秒</p>
-              </div>
-            </CardContent>
-          </Card>
-        )}
-
-        {/* Results Section */}
-        {comicPanels.length > 0 && !isGenerating && (
-          <Card className="border-0 shadow-lg shadow-pink-100/50 bg-white/70 backdrop-blur-sm">
-            <CardContent className="p-6">
-              <div className="mb-6">
-                <h3 className="text-xl font-semibold text-gray-800 mb-2">
-                  生成结果
-                </h3>
-                <p className="text-gray-600 text-sm">
-                  以下是根据您的内容创作的漫画剧本
-                </p>
-              </div>
-
-              <div className="space-y-8">
-                {comicPanels.map((panel, i) => (
-                  <div
-                    key={panel.id}
-                    className="bg-white rounded-xl shadow-md p-5 border border-pink-100"
-                  >
-                    <div className="flex items-center mb-3">
-                      <div className="bg-gradient-to-r from-pink-500 to-orange-500 text-white rounded-full w-8 h-8 flex items-center justify-center mr-2">
-                        {i + 1}
-                      </div>
-                      <h4 className="font-medium text-gray-800">
-                        场景 {i + 1}
-                      </h4>
-                    </div>
-
-                    {/* 当有生成图片时显示图片 */}
-                    {panel.imageUrl &&
-                      panel.imageUrl.includes("http") &&
-                      !panel.imageUrl.includes("placehold.co") && (
-                        <div className="mb-4 rounded-lg overflow-hidden">
-                          <img
-                            src={panel.imageUrl}
-                            alt={`场景 ${i + 1}`}
-                            className="w-full h-auto object-contain"
-                          />
-                          {panel.error && (
-                            <p className="text-red-500 text-xs mt-1 flex items-center">
-                              <AlertCircle className="w-3 h-3 mr-1" />
-                              {panel.error}
-                            </p>
-                          )}
-                        </div>
-                      )}
-
-                    <div className="prose prose-pink max-w-none">
-                      <p className="whitespace-pre-wrap text-gray-700">
-                        {panel.content}
-                      </p>
-                    </div>
-
-                    {/* 如果已生成图片，显示下载按钮 */}
-                    {panel.imageUrl &&
-                      panel.imageUrl.includes("http") &&
-                      !panel.imageUrl.includes("placehold.co") && (
-                        <div className="mt-4 flex justify-end">
-                          <Button
-                            size="sm"
-                            variant="outline"
-                            className="text-xs border-pink-200 text-pink-600"
-                            onClick={() =>
-                              handleDownloadImage(
-                                panel.imageUrl,
-                                `场景${i + 1}`
-                              )
-                            }
-                          >
-                            <Download className="w-3 h-3 mr-1" />
-                            下载图片
-                          </Button>
-                        </div>
-                      )}
-                  </div>
-                ))}
-              </div>
-
-              {/* 统一的生成漫画按钮 */}
-              <div className="mt-8 pt-6 border-t border-pink-100 text-center">
-                <div className="flex flex-col items-center">
-                  <div className="mb-4 bg-white/90 rounded-xl px-4 py-2 shadow-sm border border-pink-100">
-                    <div className="text-sm text-gray-600 flex flex-wrap justify-center gap-x-4 gap-y-2">
-                      <div className="flex items-center gap-1">
-                        <Sparkles className="w-3.5 h-3.5 text-purple-500" />
-                        <span>
-                          模型:{" "}
-                          <span className="font-medium text-purple-600">
-                            {
-                              textModels.find((m) => m.id === selectedModel)
-                                ?.name
-                            }
-                          </span>
-                        </span>
-                      </div>
-                      <div className="flex items-center gap-1">
-                        <SlidersHorizontal className="w-3.5 h-3.5 text-blue-500" />
-                        <span>
-                          图片比例:{" "}
-                          <span className="font-medium text-blue-600">
-                            {selectedAspectRatio}
-                          </span>
-                        </span>
-                      </div>
-                      {showAdvancedSettings && (
-                        <>
-                          <div className="flex items-center gap-1">
-                            <SlidersHorizontal className="w-3.5 h-3.5 text-indigo-500" />
-                            <span>
-                              文本权重:{" "}
-                              <span className="font-medium text-indigo-600">
-                                {guidanceScale.toFixed(1)}
-                              </span>
-                            </span>
-                          </div>
-                          <div className="flex items-center gap-1">
-                            <Dices className="w-3.5 h-3.5 text-purple-500" />
-                            <span>
-                              种子数:{" "}
-                              <span className="font-medium text-purple-600">
-                                {seedMode === "random" ? "随机" : seedValue}
-                              </span>
-                            </span>
-                          </div>
-                        </>
-                      )}
-                    </div>
-                  </div>
-                  <Button
-                    onClick={handleGenerateImages}
-                    disabled={isGeneratingImages || comicPanels.length === 0}
-                    size="lg"
-                    className="px-12 py-3 text-lg font-medium rounded-full bg-gradient-to-r from-orange-400 to-pink-500 hover:from-orange-500 hover:to-pink-600 disabled:opacity-70 shadow-lg shadow-orange-200"
-                  >
-                    {isGeneratingImages ? (
-                      <>
-                        <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-white mr-2" />
-                        生成中...
-                      </>
-                    ) : (
-                      <>
-                        <ImageIcon className="w-5 h-5 mr-2" />
-                        根据剧本生成漫画
-                      </>
-                    )}
-                  </Button>
-                  <p className="text-sm text-gray-500 mt-2">
-                    {isGeneratingImages
-                      ? "正在生成漫画图像，请稍候..."
-                      : "将基于上述剧本内容生成完整的漫画图像"}
-                  </p>
-                </div>
-              </div>
-
-              {/* Social Actions */}
-              <div className="mt-8 pt-6 border-t border-pink-100">
-                <div className="flex items-center justify-between">
-                  <div className="flex items-center gap-4">
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      className="text-gray-600 hover:text-pink-600"
-                    >
-                      <Heart className="w-4 h-4 mr-1" />
-                      喜欢
-                    </Button>
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      className="text-gray-600 hover:text-pink-600"
-                    >
-                      <MessageCircle className="w-4 h-4 mr-1" />
-                      评论
-                    </Button>
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      className="text-gray-600 hover:text-pink-600"
-                    >
-                      <Share className="w-4 h-4 mr-1" />
-                      分享
-                    </Button>
-                  </div>
-                  <Badge
-                    variant="secondary"
-                    className="bg-green-100 text-green-700"
-                  >
-                    生成成功
-                  </Badge>
-                </div>
-              </div>
-            </CardContent>
-          </Card>
-        )}
-      </div>
-
-      {/* FAQ Section */}
-      <div ref={faqRef} className="mt-16 pt-8 border-t border-pink-100">
-        <div className="text-center mb-10">
-          <h2 className="text-3xl font-bold bg-gradient-to-r from-pink-600 to-orange-600 bg-clip-text text-transparent mb-4">
-            常见问题
-          </h2>
-          <p className="text-gray-600">关于漫画生成器的一些常见疑问解答</p>
-        </div>
-
-        <div className="space-y-4 mb-8">
-          {faqs.map((faq, index) => (
-            <div
-              key={index}
-              className="border border-pink-100 rounded-xl overflow-hidden bg-white/70 backdrop-blur-sm shadow-sm"
-            >
-              <button
-                className="w-full p-4 text-left flex justify-between items-center"
-                onClick={() => toggleAccordion(index)}
-              >
-                <span className="font-medium text-gray-800">
-                  {faq.question}
-                </span>
-                <span className="text-pink-500">
-                  {activeAccordion === index ? (
-                    <MinusCircle className="w-5 h-5" />
-                  ) : (
-                    <PlusCircle className="w-5 h-5" />
-                  )}
-                </span>
-              </button>
-
-              {activeAccordion === index && (
-                <div className="p-4 pt-0 border-t border-pink-50 bg-gradient-to-br from-pink-50/30 to-orange-50/30">
-                  <p className="text-gray-600">{faq.answer}</p>
-                </div>
-              )}
-            </div>
-          ))}
-        </div>
-      </div>
-
-      {/* Footer */}
-      <div className="text-center py-8 text-gray-500 text-sm">
-        <p>让每个人都能轻松将文字转化为视觉故事 💫</p>
-        <div className="flex justify-center gap-4 mt-2">
-          <button className="hover:text-pink-500 transition-colors">
-            隐私政策
-          </button>
-          <button className="hover:text-pink-500 transition-colors">
-            使用条款
-          </button>
-          <button className="hover:text-pink-500 transition-colors">
-            联系我们
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/.history/app/page_20250802203221.tsx b/.history/app/page_20250802203221.tsx
deleted file mode 100644
index ebece97..0000000
--- a/.history/app/page_20250802203221.tsx
+++ /dev/null
@@ -1,1166 +0,0 @@
-"use client";
-
-import { useState, useRef } from "react";
-import { Card, CardContent } from "@/components/ui/card";
-import { Button } from "@/components/ui/button";
-import { Textarea } from "@/components/ui/textarea";
-import { Badge } from "@/components/ui/badge";
-import { Slider } from "@/components/ui/slider";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import {
-  Sparkles,
-  ImageIcon,
-  Download,
-  Eye,
-  Heart,
-  MessageCircle,
-  Share,
-  Wand2,
-  AlertCircle,
-  ChevronDown,
-  ChevronRight,
-  Sliders,
-  Dices, // 替换 Dice 为 Dices
-  SlidersHorizontal,
-  ChevronsUpDown,
-  Check,
-  ChevronUp,
-  Home,
-  HelpCircle,
-  PlusCircle,
-  MinusCircle,
-} from "lucide-react";
-import { ComicPanel } from "@/lib/types";
-
-// 图片比例选项
-type AspectRatio = {
-  id: string;
-  label: string;
-  value: string; // 实际的宽高比值，如 "1:1"
-};
-
-// 文本生成模型选项
-type TextModel = {
-  id: string;
-  name: string;
-  description: string;
-  tag?: string; // 可选标签，如"推荐"、"快速"等
-  category: string; // 模型分类
-};
-
-// 模型分类
-type ModelCategory = {
-  id: string;
-  name: string;
-  description?: string;
-};
-
-const modelCategories: ModelCategory[] = [
-  { id: "recommended", name: "推荐模型", description: "我们精选的高质量模型" },
-  {
-    id: "specialized",
-    name: "专业模型",
-    description: "针对特定领域优化的模型",
-  },
-  { id: "fast", name: "快速模型", description: "响应速度快，成本较低" },
-  { id: "experimental", name: "实验模型", description: "新技术，可能有惊喜" },
-];
-
-const textModels: TextModel[] = [
-  // 推荐模型
-  {
-    id: "qwen-32b",
-    name: "QwQ-32B",
-    description: "高质量剧本生成，细节丰富，逻辑连贯",
-    tag: "推荐",
-    category: "recommended",
-  },
-  {
-    id: "gpt-4",
-    name: "GPT-4",
-    description: "功能强大，擅长复杂剧情创作",
-    category: "recommended",
-  },
-
-  // 专业模型
-  {
-    id: "story-xl",
-    name: "StoryXL",
-    description: "专为故事叙事优化，情节发展自然",
-    tag: "专业",
-    category: "specialized",
-  },
-  {
-    id: "comic-pro",
-    name: "ComicPro",
-    description: "针对漫画场景和对白优化",
-    tag: "专业",
-    category: "specialized",
-  },
-  {
-    id: "fantasy-writer",
-    name: "奇幻创作家",
-    description: "擅长创作魔幻、奇幻类故事",
-    category: "specialized",
-  },
-
-  // 快速模型
-  {
-    id: "deepseek-7b",
-    name: "DeepSeek-7B",
-    description: "生成速度快，质量适中",
-    tag: "快速",
-    category: "fast",
-  },
-  {
-    id: "gpt-3.5",
-    name: "GPT-3.5",
-    description: "平衡的选择，适合大多数场景",
-    category: "fast",
-  },
-  {
-    id: "llama-13b",
-    name: "Llama-13B",
-    description: "开源模型，速度快，资源占用少",
-    category: "fast",
-  },
-
-  // 实验模型
-  {
-    id: "mixtral-8x7b",
-    name: "Mixtral-8x7B",
-    description: "混合专家模型，创意表现出色",
-    tag: "新品",
-    category: "experimental",
-  },
-  {
-    id: "claude-3",
-    name: "Claude 3",
-    description: "擅长长篇创意写作，风格多样",
-    tag: "新品",
-    category: "experimental",
-  },
-];
-
-const aspectRatios: AspectRatio[] = [
-  { id: "1:1", label: "1:1", value: "1:1" },
-  { id: "3:4", label: "3:4", value: "3:4" },
-  { id: "4:3", label: "4:3", value: "4:3" },
-  { id: "16:9", label: "16:9", value: "16:9" },
-  { id: "9:16", label: "9:16", value: "9:16" },
-  { id: "2:3", label: "2:3", value: "2:3" },
-  { id: "3:2", label: "3:2", value: "3:2" },
-  { id: "21:9", label: "21:9", value: "21:9" },
-  { id: "custom", label: "自定义", value: "custom" },
-];
-
-export default function ComicGenerator() {
-  const [content, setContent] = useState("");
-  const [selectedCount, setSelectedCount] = useState(4);
-  const [selectedAspectRatio, setSelectedAspectRatio] =
-    useState<string>("16:9");
-  const [isGenerating, setIsGenerating] = useState(false);
-  const [isGeneratingImages, setIsGeneratingImages] = useState(false);
-  const [comicPanels, setComicPanels] = useState<ComicPanel[]>([]);
-  const [error, setError] = useState<string | null>(null);
-  const [imageGenerationError, setImageGenerationError] = useState<
-    string | null
-  >(null);
-  const [showAdvancedSettings, setShowAdvancedSettings] = useState(false);
-  const [guidanceScale, setGuidanceScale] = useState(2.5); // 默认值为2.5
-  const [seedMode, setSeedMode] = useState<"random" | "fixed">("random"); // 默认为随机
-  const [seedValue, setSeedValue] = useState<number>(1234);
-  const [selectedModel, setSelectedModel] = useState<string>("qwen-32b"); // 默认使用QwQ-32B模型
-  const [activeCategory, setActiveCategory] = useState<string>("recommended"); // 默认显示推荐模型
-  const [isModelSectionExpanded, setIsModelSectionExpanded] = useState(false);
-  const maxLength = 2000;
-  const [activeAccordion, setActiveAccordion] = useState<number | null>(null);
-  const faqRef = useRef<HTMLDivElement>(null);
-  const homeRef = useRef<HTMLDivElement>(null);
-
-  // 处理导航点击，滚动到指定区域
-  const scrollToRef = (ref: React.RefObject<HTMLDivElement>) => {
-    if (ref && ref.current) {
-      ref.current.scrollIntoView({ behavior: "smooth" });
-    }
-  };
-
-  // FAQ数据
-  const faqs = [
-    {
-      question: "漫画生成器的技术原理是什么？",
-      answer:
-        "我们的漫画生成器采用双阶段AI生成架构。第一阶段使用大型语言模型（如QwQ-32B, GPT-4等）进行文本到漫画剧本的转换，通过精心设计的提示工程（Prompt Engineering）技术，将输入文本结构化为包含场景描述、人物动作和对白的剧本格式。第二阶段则采用扩散模型（Diffusion Model）技术，通过Volces ARK的doubao-seededit-3-0-i2i-250628模型将剧本转换为视觉呈现。系统采用无缝集成式API调用流程，确保两个阶段之间的数据传递高效准确。",
-    },
-    {
-      question: "不同文本生成模型之间有什么具体区别？",
-      answer:
-        "我们提供的文本生成模型在推理速度、创意风格和专业领域上有显著差异：1）QwQ-32B是我们的旗舰模型，参数量达32B，擅长构建复杂叙事和细致刻画，但推理速度较慢；2）DeepSeek-7B参数量更小，推理速度是QwQ-32B的约3倍，但在细节描述上稍弱；3）GPT-3.5提供平衡的性能，特别适合对话场景；4）专业模型如StoryXL和ComicPro分别针对故事结构和漫画表现力进行了微调优化，在特定领域表现出色。选择模型时，建议根据您的具体需求（创作速度vs.质量）进行权衡。",
-    },
-    {
-      question: "文本权重和种子数参数如何影响图像生成效果？",
-      answer:
-        "文本权重（guidance_scale）是控制生成图像与文本描述匹配程度的关键参数。技术上，它决定了扩散模型在采样过程中对条件（文本）的依赖程度。数值范围1.0-10.0，其中：1.0-2.0时模型更注重创造性但可能偏离文本；2.5-5.0是平衡区间；5.0-10.0时严格遵循文本但可能牺牲图像质量。种子数（seed）则是决定初始噪声模式的整数，范围为-1至2147483647，固定种子可在保持其他参数不变的情况下生成相似图像，这对于风格一致性和迭代修改特别有用。随机种子(-1)则每次生成完全不同的结果，适合探索多样创意。",
-    },
-    {
-      question: "如何解决生成图像中的常见问题（手部变形、文字呈现等）？",
-      answer:
-        '生成图像中的常见技术问题及解决方案：1）手部变形问题 - 在剧本描述中明确指出"手部自然放置"或"手势清晰"，并适当提高文本权重至4.0-5.0；2）文字呈现 - 当前模型对于生成可读文字的能力有限，建议在剧本中将对话框描述为"包含文字的对话框"而非具体文字内容，后期可通过图像编辑添加；3）角色一致性 - 使用固定种子值并在每个场景描述中保持相同的角色描述关键词；4）背景细节不足 - 增加场景描述的具体细节，如"阳光透过窗帘的详细环境；5）风格不一致 - 在每个场景描述前统一添加风格标签如"漫画风格，线条清晰"。持续实验不同参数组合可以找到最适合您具体需求的配置。',
-    },
-    {
-      question: "如何优化输入内容以获得最佳漫画生成效果？",
-      answer:
-        '输入优化技术指南：1）结构化叙事 - 使用清晰的起承转合结构，每个转折点应对应一个场景；2）场景密度控制 - 理想情况下每250-300字安排一个场景，确保内容既不过于密集也不过于稀疏；3）描述性语言 - 使用具象而非抽象描述，例如用"眉毛紧锁，双手颤抖"代替"感到紧张；4）角色一致性标记 - 为主要角色设置独特标识词并在全文保持一致；5）情感关键词强化 - 在情感转折处使用明确的情感关键词；6）环境元素前置 - 在描述角色行动前先建立环境背景；7）节奏变化指示 - 使用短句表示快节奏，长句表示慢节奏或情感深度；8）避免使用复杂隐喻或需要背景知识的引用。遵循这些技术规范可显著提升生成质量。',
-    },
-    {
-      question: "图像生成的技术限制与最佳实践是什么？",
-      answer:
-        "当前图像生成的技术限制与应对策略：1）分辨率上限 - 系统支持的最大分辨率为2048x2048像素，超过此限制会导致细节损失；2）处理能力 - 复杂场景描述（超过200字）可能导致部分元素被忽略，建议拆分为多个简单场景；3）批量生成限制 - 单次最多支持8个场景同时生成，更多场景请分批处理；4）计算资源分配 - 生成过程利用GPU加速，系统会根据当前负载动态调整计算资源，高峰期可能导致等待时间延长；5）图像风格一致性 - 为保持连贯性，建议使用相同的种子值和文本权重；6）色彩控制 - 在场景描述中明确指定关键色彩元素；7）图像后处理 - 系统集成了自动后处理流程优化生成图像对比度和清晰度，如需原始输出可联系技术支持。理解这些技术限制并相应调整使用策略，可以显著提升输出质量。",
-    },
-    {
-      question: "如何利用API集成漫画生成功能到自己的应用中？",
-      answer:
-        "我们提供完整的REST API以集成漫画生成功能：1）身份验证 - 使用基于JWT的身份验证系统，请通过开发者门户申请API密钥；2）端点结构 - 主要端点包括`/api/generate`（文本到剧本）和`/api/generate-images`（剧本到图像）；3）请求限制 - 免费账户每小时限制50次请求，付费账户根据套餐调整；4）批处理建议 - 使用批处理API而非多个单独请求以提高效率；5）错误处理 - 实现指数退避重试策略以处理临时性错误；6）缓存策略 - 实现结果缓存以避免重复生成相同内容；7）集成示例 - 可参考我们提供的Node.js、Python和Java实现示例；8）自定义扩展 - 高级用户可通过webhook在生成流程中注入自定义处理逻辑。完整API文档请访问开发者门户：https://api.comicgenerator.dev/docs",
-    },
-  ];
-
-  // 切换FAQ手风琴状态
-  const toggleAccordion = (index: number) => {
-    setActiveAccordion(activeAccordion === index ? null : index);
-  };
-
-  const sampleArticle = `春天来了，小明走在回家的路上。突然，他发现路边有一只受伤的小猫。小明毫不犹豫地将小猫抱起，送到了附近的宠物医院。医生说小猫只是轻微擦伤，很快就能康复。从那天起，小明每天都会去医院看望小猫，直到它完全康复。`;
-
-  const handleGenerate = async () => {
-    if (!content.trim()) return;
-
-    setIsGenerating(true);
-    setError(null);
-
-    try {
-      const response = await fetch("/api/generate", {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({
-          content,
-          count: selectedCount,
-          model: selectedModel, // 添加模型参数
-        }),
-      });
-
-      const data = await response.json();
-
-      if (!response.ok) {
-        throw new Error(data.error || "生成漫画失败，请稍后再试");
-      }
-
-      setComicPanels(data.comicPanels);
-    } catch (err) {
-      setError(err instanceof Error ? err.message : "生成漫画时发生未知错误");
-      console.error("生成漫画错误:", err);
-    } finally {
-      setIsGenerating(false);
-    }
-  };
-
-  const handleGenerateImages = async () => {
-    if (comicPanels.length === 0) return;
-
-    setIsGeneratingImages(true);
-    setImageGenerationError(null);
-
-    // 确定要使用的种子值
-    const seed = seedMode === "random" ? -1 : seedValue;
-
-    try {
-      const response = await fetch("/api/generate-images", {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({
-          comicPanels,
-          aspectRatio: selectedAspectRatio,
-          seed: seed,
-          guidance_scale: guidanceScale,
-        }),
-      });
-
-      const data = await response.json();
-
-      if (!response.ok) {
-        throw new Error(data.error || "生成漫画图片失败，请稍后再试");
-      }
-
-      // 更新面板，包含新的图像URL
-      setComicPanels(data.comicPanels);
-    } catch (err) {
-      setImageGenerationError(
-        err instanceof Error ? err.message : "生成漫画图片时发生未知错误"
-      );
-      console.error("生成漫画图片错误:", err);
-    } finally {
-      setIsGeneratingImages(false);
-    }
-  };
-
-  const handleDownloadImage = (imageUrl: string, sceneName: string) => {
-    const a = document.createElement("a");
-    a.href = imageUrl;
-    a.download = `漫画场景_${sceneName}.jpg`;
-    a.click();
-  };
-
-  const fillSample = () => {
-    setContent(sampleArticle);
-  };
-
-  const getGridLayout = (count: number) => {
-    switch (count) {
-      case 2:
-        return "grid-cols-1 md:grid-cols-2";
-      case 4:
-        return "grid-cols-2";
-      case 6:
-        return "grid-cols-2 md:grid-cols-3";
-      case 8:
-        return "grid-cols-2 md:grid-cols-4";
-      default:
-        return "grid-cols-2";
-    }
-  };
-
-  const handleSeedValueChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const value = parseInt(e.target.value);
-    // 确保值在合法范围内 [-1, 2147483647]
-    if (!isNaN(value) && value >= -1 && value <= 2147483647) {
-      setSeedValue(value);
-    }
-  };
-
-  // 获取当前选中的模型信息
-  const selectedModelInfo = textModels.find(
-    (model) => model.id === selectedModel
-  );
-
-  return (
-    <div className="min-h-screen bg-gradient-to-br from-pink-50 to-orange-50">
-      {/* 导航栏 */}
-      <div className="bg-white/80 backdrop-blur-md border-b border-pink-100 sticky top-0 z-20">
-        <div className="max-w-4xl mx-auto px-4 py-4 flex items-center justify-between">
-          <div className="flex items-center gap-2">
-            <div className="w-8 h-8 bg-gradient-to-r from-pink-500 to-orange-500 rounded-lg flex items-center justify-center">
-              <Sparkles className="w-5 h-5 text-white" />
-            </div>
-            <span className="font-bold text-gray-800">漫画生成器</span>
-          </div>
-
-          {/* 导航链接 */}
-          <div className="flex items-center gap-4">
-            <button
-              onClick={() =>
-                scrollToRef(homeRef as React.RefObject<HTMLDivElement>)
-              }
-              className="flex items-center gap-1.5 px-3 py-1.5 rounded-full text-sm text-gray-700 hover:bg-pink-50 transition-colors"
-            >
-              <Home className="w-4 h-4" />
-              首页
-            </button>
-            <button
-              onClick={() =>
-                scrollToRef(faqRef as React.RefObject<HTMLDivElement>)
-              }
-              className="flex items-center gap-1.5 px-3 py-1.5 rounded-full text-sm text-gray-700 hover:bg-pink-50 transition-colors"
-            >
-              <HelpCircle className="w-4 h-4" />
-              常见问题
-            </button>
-            <Badge variant="secondary" className="bg-pink-100 text-pink-700">
-              Beta
-            </Badge>
-          </div>
-        </div>
-      </div>
-
-      <div ref={homeRef} className="max-w-4xl mx-auto px-4 py-8">
-        {/* Hero Section */}
-        <div className="text-center mb-12">
-          <h1 className="text-4xl font-bold bg-gradient-to-r from-pink-600 to-orange-600 bg-clip-text text-transparent mb-4">
-            文章转漫画生成器
-          </h1>
-          <p className="text-gray-600 text-lg mb-8">
-            将你的文字变成精彩的漫画故事 ✨
-          </p>
-        </div>
-
-        {/* Input Section */}
-        <Card className="mb-8 border-0 shadow-lg shadow-pink-100/50 bg-white/70 backdrop-blur-sm">
-          <CardContent className="p-6">
-            <div className="space-y-4">
-              <div className="flex items-center justify-between">
-                <label className="text-sm font-medium text-gray-700">
-                  输入你的文章内容或创意
-                </label>
-                <span
-                  className={`text-sm ${
-                    content.length > maxLength
-                      ? "text-red-500"
-                      : "text-gray-500"
-                  }`}
-                >
-                  还可以输入 {maxLength - content.length} 字
-                </span>
-              </div>
-
-              <Textarea
-                value={content}
-                onChange={(e) => setContent(e.target.value)}
-                placeholder="在这里输入你的故事内容或创意，我们会将其转化为精美的漫画剧本..."
-                className="min-h-[120px] resize-none border-pink-200 focus:border-pink-400 focus:ring-pink-400/20"
-                maxLength={maxLength}
-              />
-
-              <div className="flex justify-start">
-                <Button
-                  variant="outline"
-                  size="sm"
-                  onClick={fillSample}
-                  className="border-pink-200 text-pink-600 hover:bg-pink-50 bg-transparent"
-                >
-                  试试示例文章
-                </Button>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-
-        {/* Configuration Section */}
-        <Card className="mb-8 border-0 shadow-lg shadow-pink-100/50 bg-white/70 backdrop-blur-sm">
-          <CardContent className="p-6">
-            <div className="space-y-6">
-              {/* 文本生成模型选择 - 折叠式设计 */}
-              <div>
-                {/* 模型选择器标题与折叠按钮 */}
-                <div
-                  className="flex items-center justify-between cursor-pointer rounded-xl p-4 transition-all duration-200 hover:bg-white/80"
-                  onClick={() =>
-                    setIsModelSectionExpanded(!isModelSectionExpanded)
-                  }
-                >
-                  <div className="flex items-center gap-2">
-                    <div className="rounded-full bg-gradient-to-r from-purple-500 to-indigo-500 p-1.5">
-                      <Sparkles className="w-4 h-4 text-white" />
-                    </div>
-                    <div>
-                      <label className="font-medium text-gray-800">
-                        文本生成模型
-                      </label>
-                      {selectedModelInfo && (
-                        <div className="text-sm text-gray-500 flex items-center gap-1 mt-0.5">
-                          <span>当前：</span>
-                          <span className="font-medium text-purple-600">
-                            {selectedModelInfo.name}
-                          </span>
-                          {selectedModelInfo.tag && (
-                            <Badge
-                              className={`ml-1.5 text-[10px] h-4 px-1.5 ${
-                                selectedModelInfo.tag === "推荐"
-                                  ? "bg-green-100 text-green-800"
-                                  : selectedModelInfo.tag === "专业"
-                                  ? "bg-indigo-100 text-indigo-800"
-                                  : selectedModelInfo.tag === "新品"
-                                  ? "bg-orange-100 text-orange-800"
-                                  : "bg-blue-100 text-blue-800"
-                              }`}
-                            >
-                              {selectedModelInfo.tag}
-                            </Badge>
-                          )}
-                        </div>
-                      )}
-                    </div>
-                  </div>
-                  <div className="text-gray-500">
-                    {isModelSectionExpanded ? (
-                      <ChevronUp className="w-5 h-5" />
-                    ) : (
-                      <ChevronDown className="w-5 h-5" />
-                    )}
-                  </div>
-                </div>
-
-                {/* 展开后的完整模型选择区域 */}
-                {isModelSectionExpanded && (
-                  <div className="mt-2 pt-4 border-t border-gray-100 space-y-4 animate-in fade-in slide-in-from-top duration-300">
-                    {/* 模型分类选择器 */}
-                    <div className="flex items-center gap-2 overflow-x-auto pb-2 no-scrollbar">
-                      {modelCategories.map((category) => (
-                        <button
-                          key={category.id}
-                          onClick={(e) => {
-                            e.stopPropagation(); // 防止冒泡触发折叠
-                            setActiveCategory(category.id);
-                          }}
-                          className={`flex items-center gap-2 px-4 py-2 rounded-full whitespace-nowrap transition-all duration-200 ${
-                            activeCategory === category.id
-                              ? "bg-gradient-to-r from-purple-500 to-indigo-500 text-white shadow-sm"
-                              : "bg-white text-gray-700 hover:bg-gray-100"
-                          }`}
-                        >
-                          {activeCategory === category.id && (
-                            <div className="w-2 h-2 rounded-full bg-white"></div>
-                          )}
-                          {category.name}
-                        </button>
-                      ))}
-                    </div>
-
-                    {/* 当前分类描述 */}
-                    {modelCategories.find((c) => c.id === activeCategory)
-                      ?.description && (
-                      <p className="text-xs text-gray-500 mt-1">
-                        {
-                          modelCategories.find((c) => c.id === activeCategory)
-                            ?.description
-                        }
-                      </p>
-                    )}
-
-                    {/* 模型列表 - 根据分类过滤 */}
-                    <div className="space-y-4 mt-2">
-                      <div className="h-[280px] overflow-y-auto pr-2 custom-scrollbar">
-                        <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
-                          {textModels
-                            .filter(
-                              (model) => model.category === activeCategory
-                            )
-                            .map((model) => (
-                              <div
-                                key={model.id}
-                                onClick={(e) => {
-                                  e.stopPropagation(); // 防止冒泡触发折叠
-                                  setSelectedModel(model.id);
-                                }}
-                                className={`relative p-4 rounded-xl cursor-pointer transition-all duration-200 border ${
-                                  selectedModel === model.id
-                                    ? "border-purple-400 bg-gradient-to-br from-purple-50 to-indigo-50 shadow-sm"
-                                    : "border-gray-100 hover:border-purple-200 bg-white/80 hover:bg-white"
-                                }`}
-                              >
-                                {model.tag && (
-                                  <div className="absolute -top-2 -right-2">
-                                    <Badge
-                                      className={`text-xs ${
-                                        model.tag === "推荐"
-                                          ? "bg-green-100 text-green-800 hover:bg-green-200"
-                                          : model.tag === "专业"
-                                          ? "bg-indigo-100 text-indigo-800 hover:bg-indigo-200"
-                                          : model.tag === "新品"
-                                          ? "bg-orange-100 text-orange-800 hover:bg-orange-200"
-                                          : "bg-blue-100 text-blue-800 hover:bg-blue-200"
-                                      }`}
-                                    >
-                                      {model.tag}
-                                    </Badge>
-                                  </div>
-                                )}
-
-                                <div className="flex items-center gap-2">
-                                  <div
-                                    className={`rounded-full p-1 ${
-                                      selectedModel === model.id
-                                        ? "bg-gradient-to-r from-purple-500 to-indigo-500"
-                                        : "bg-gray-100"
-                                    }`}
-                                  >
-                                    <Sparkles
-                                      className={`w-3.5 h-3.5 ${
-                                        selectedModel === model.id
-                                          ? "text-white"
-                                          : "text-gray-500"
-                                      }`}
-                                    />
-                                  </div>
-                                  <span
-                                    className={`font-medium ${
-                                      selectedModel === model.id
-                                        ? "text-purple-700"
-                                        : "text-gray-700"
-                                    }`}
-                                  >
-                                    {model.name}
-                                  </span>
-
-                                  {/* 显示选中标记 */}
-                                  {selectedModel === model.id && (
-                                    <div className="ml-auto">
-                                      <Check className="w-4 h-4 text-purple-500" />
-                                    </div>
-                                  )}
-                                </div>
-
-                                <p className="text-xs text-gray-500 mt-2 pl-6">
-                                  {model.description}
-                                </p>
-                              </div>
-                            ))}
-                        </div>
-                      </div>
-
-                      {/* 模型数量和选择提示 */}
-                      <div className="text-xs text-gray-500 flex justify-between">
-                        <span>
-                          当前分类共{" "}
-                          {
-                            textModels.filter(
-                              (model) => model.category === activeCategory
-                            ).length
-                          }{" "}
-                          个模型
-                        </span>
-                        <span>点击卡片选择模型</span>
-                      </div>
-                    </div>
-                  </div>
-                )}
-              </div>
-
-              {/* 场景数量选择 */}
-              <div className="space-y-4">
-                <label className="text-sm font-medium text-gray-700 flex items-center gap-1.5">
-                  <ImageIcon className="w-4 h-4 text-pink-500" />
-                  选择场景数量
-                </label>
-
-                <div className="flex gap-3 flex-wrap">
-                  {[2, 4, 6, 8].map((count) => (
-                    <Button
-                      key={count}
-                      variant={selectedCount === count ? "default" : "outline"}
-                      size="sm"
-                      onClick={() => setSelectedCount(count)}
-                      className={`rounded-full px-6 ${
-                        selectedCount === count
-                          ? "bg-gradient-to-r from-pink-500 to-orange-500 hover:from-pink-600 hover:to-orange-600"
-                          : "border-pink-200 text-pink-600 hover:bg-pink-50"
-                      }`}
-                    >
-                      {count}个场景
-                    </Button>
-                  ))}
-                </div>
-              </div>
-
-              {/* 图片比例选择 */}
-              <div className="space-y-4">
-                <label className="text-sm font-medium text-gray-700 flex items-center gap-1.5">
-                  <SlidersHorizontal className="w-4 h-4 text-blue-500" />
-                  图片比例
-                </label>
-
-                <div className="flex gap-3 flex-wrap">
-                  {aspectRatios.map((ratio) => (
-                    <Button
-                      key={ratio.id}
-                      variant={
-                        selectedAspectRatio === ratio.value
-                          ? "default"
-                          : "outline"
-                      }
-                      size="sm"
-                      onClick={() => setSelectedAspectRatio(ratio.value)}
-                      className={`rounded-full px-4 ${
-                        selectedAspectRatio === ratio.value
-                          ? "bg-gradient-to-r from-blue-500 to-indigo-500 hover:from-blue-600 hover:to-indigo-600"
-                          : "border-blue-200 text-blue-600 hover:bg-blue-50"
-                      }`}
-                    >
-                      {ratio.label}
-                    </Button>
-                  ))}
-                </div>
-              </div>
-
-              {/* 高级设置部分 */}
-              <div className="mt-2">
-                <button
-                  className={`w-full flex items-center justify-between p-4 text-left rounded-xl transition-all duration-200 ${
-                    showAdvancedSettings
-                      ? "bg-gradient-to-r from-purple-50 to-indigo-50 shadow-sm"
-                      : "bg-white/50 hover:bg-white/80"
-                  }`}
-                  onClick={() => setShowAdvancedSettings(!showAdvancedSettings)}
-                >
-                  <div className="flex items-center gap-2">
-                    <div
-                      className={`rounded-full p-1.5 ${
-                        showAdvancedSettings
-                          ? "bg-gradient-to-r from-purple-500 to-indigo-500"
-                          : "bg-gray-100"
-                      }`}
-                    >
-                      <Sliders
-                        className={`w-4 h-4 ${
-                          showAdvancedSettings ? "text-white" : "text-gray-500"
-                        }`}
-                      />
-                    </div>
-                    <span
-                      className={`font-medium ${
-                        showAdvancedSettings
-                          ? "text-indigo-700"
-                          : "text-gray-700"
-                      }`}
-                    >
-                      高级设置
-                    </span>
-                  </div>
-                  {showAdvancedSettings ? (
-                    <ChevronDown className="w-5 h-5 text-indigo-500" />
-                  ) : (
-                    <ChevronRight className="w-5 h-5 text-gray-400" />
-                  )}
-                </button>
-
-                {showAdvancedSettings && (
-                  <div className="mt-4 pt-2 pb-1 px-4 bg-white/60 backdrop-blur-sm rounded-xl border border-indigo-100 shadow-sm space-y-6 transition-all duration-300 ease-in-out">
-                    {/* 文本权重设置 */}
-                    <div className="space-y-3 py-3 border-b border-indigo-50">
-                      <div className="flex items-center gap-2">
-                        <div className="rounded-full bg-gradient-to-r from-indigo-400 to-purple-400 p-1.5">
-                          <SlidersHorizontal className="w-3.5 h-3.5 text-white" />
-                        </div>
-                        <Label className="text-sm font-medium text-indigo-800">
-                          文本权重
-                        </Label>
-                      </div>
-                      <p className="text-xs text-gray-500 pl-7">
-                        显示文字（创意描述）对结果图像的影响程度，数值越大图像越接近文字描述，数值越小图像可能更具创造性
-                      </p>
-
-                      <div className="flex flex-col space-y-2 pl-7 pr-2">
-                        <div className="flex justify-between text-xs text-indigo-400 px-1">
-                          <span>更具创造性</span>
-                          <span>更贴近描述</span>
-                        </div>
-                        <div className="bg-gradient-to-r from-indigo-50 to-indigo-100 rounded-full p-1">
-                          <Slider
-                            value={[guidanceScale]}
-                            min={1}
-                            max={10}
-                            step={0.1}
-                            onValueChange={(value) =>
-                              setGuidanceScale(value[0])
-                            }
-                            className="w-full"
-                          />
-                        </div>
-                        <div className="flex justify-between text-xs text-gray-400 px-1">
-                          <span>1.0</span>
-                          <span>10.0</span>
-                        </div>
-                        <div className="text-right text-sm font-medium bg-gradient-to-r from-indigo-500 to-purple-600 bg-clip-text text-transparent">
-                          {guidanceScale.toFixed(1)}
-                        </div>
-                      </div>
-                    </div>
-
-                    {/* 种子数设置 */}
-                    <div className="space-y-3 py-1 pb-3">
-                      <div className="flex items-center gap-2">
-                        <div className="rounded-full bg-gradient-to-r from-indigo-400 to-purple-400 p-1.5">
-                          <Dices className="w-3.5 h-3.5 text-white" />
-                        </div>
-                        <Label className="text-sm font-medium text-indigo-800">
-                          种子数
-                        </Label>
-                      </div>
-                      <p className="text-xs text-gray-500 pl-7">
-                        用于物理定扩初始状态的基值，若随机种子相同并且其他参数相同，则生成图片大概率一致
-                      </p>
-
-                      <RadioGroup
-                        value={seedMode}
-                        onValueChange={(value) =>
-                          setSeedMode(value as "random" | "fixed")
-                        }
-                        className="flex gap-4 pl-7 mt-2"
-                      >
-                        <div className="flex items-center space-x-2">
-                          <RadioGroupItem
-                            value="random"
-                            id="random-seed"
-                            className="text-indigo-600 border-indigo-400"
-                          />
-                          <Label
-                            htmlFor="random-seed"
-                            className="cursor-pointer text-sm text-indigo-700"
-                          >
-                            随机
-                          </Label>
-                        </div>
-                        <div className="flex items-center space-x-2">
-                          <RadioGroupItem
-                            value="fixed"
-                            id="fixed-seed"
-                            className="text-indigo-600 border-indigo-400"
-                          />
-                          <Label
-                            htmlFor="fixed-seed"
-                            className="cursor-pointer text-sm text-indigo-700"
-                          >
-                            固定
-                          </Label>
-                        </div>
-                      </RadioGroup>
-
-                      {seedMode === "fixed" && (
-                        <div className="pl-7 mt-2">
-                          <Input
-                            type="number"
-                            value={seedValue}
-                            onChange={handleSeedValueChange}
-                            min={-1}
-                            max={2147483647}
-                            className="max-w-[200px] border-indigo-200 focus:border-indigo-400 focus:ring-indigo-300/20"
-                          />
-                        </div>
-                      )}
-                    </div>
-                  </div>
-                )}
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-
-        {/* Generate Button */}
-        <div className="text-center mb-8">
-          <Button
-            onClick={handleGenerate}
-            disabled={!content.trim() || isGenerating}
-            size="lg"
-            className="px-12 py-3 text-lg font-medium rounded-full bg-gradient-to-r from-pink-500 to-orange-500 hover:from-pink-600 hover:to-orange-600 disabled:from-gray-300 disabled:to-gray-300 shadow-lg shadow-pink-200"
-          >
-            {isGenerating ? (
-              <>
-                <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-white mr-2" />
-                生成中...
-              </>
-            ) : (
-              <>
-                <Wand2 className="w-5 h-5 mr-2" />
-                生成漫画剧本
-              </>
-            )}
-          </Button>
-        </div>
-
-        {/* Error Display */}
-        {error && (
-          <Card className="mb-8 border-red-200 shadow-lg shadow-red-100/50 bg-white/70 backdrop-blur-sm">
-            <CardContent className="p-4">
-              <p className="text-red-500 text-center">{error}</p>
-            </CardContent>
-          </Card>
-        )}
-
-        {/* Image Generation Error Display */}
-        {imageGenerationError && (
-          <Card className="mb-8 border-red-200 shadow-lg shadow-red-100/50 bg-white/70 backdrop-blur-sm">
-            <CardContent className="p-4">
-              <div className="flex items-center justify-center gap-2 text-red-500">
-                <AlertCircle className="w-4 h-4" />
-                <p>{imageGenerationError}</p>
-              </div>
-            </CardContent>
-          </Card>
-        )}
-
-        {/* Loading State */}
-        {isGenerating && (
-          <Card className="mb-8 border-0 shadow-lg shadow-pink-100/50 bg-white/70 backdrop-blur-sm">
-            <CardContent className="p-8 text-center">
-              <div className="space-y-4">
-                <div className="animate-pulse">
-                  <div className="w-16 h-16 bg-gradient-to-r from-pink-500 to-orange-500 rounded-full mx-auto mb-4 flex items-center justify-center">
-                    <Sparkles className="w-8 h-8 text-white animate-spin" />
-                  </div>
-                </div>
-                <p className="text-gray-600">正在创作漫画剧本...</p>
-                <p className="text-sm text-gray-500">预计需要30秒</p>
-              </div>
-            </CardContent>
-          </Card>
-        )}
-
-        {/* Results Section */}
-        {comicPanels.length > 0 && !isGenerating && (
-          <Card className="border-0 shadow-lg shadow-pink-100/50 bg-white/70 backdrop-blur-sm">
-            <CardContent className="p-6">
-              <div className="mb-6">
-                <h3 className="text-xl font-semibold text-gray-800 mb-2">
-                  生成结果
-                </h3>
-                <p className="text-gray-600 text-sm">
-                  以下是根据您的内容创作的漫画剧本
-                </p>
-              </div>
-
-              <div className="space-y-8">
-                {comicPanels.map((panel, i) => (
-                  <div
-                    key={panel.id}
-                    className="bg-white rounded-xl shadow-md p-5 border border-pink-100"
-                  >
-                    <div className="flex items-center mb-3">
-                      <div className="bg-gradient-to-r from-pink-500 to-orange-500 text-white rounded-full w-8 h-8 flex items-center justify-center mr-2">
-                        {i + 1}
-                      </div>
-                      <h4 className="font-medium text-gray-800">
-                        场景 {i + 1}
-                      </h4>
-                    </div>
-
-                    {/* 当有生成图片时显示图片 */}
-                    {panel.imageUrl &&
-                      panel.imageUrl.includes("http") &&
-                      !panel.imageUrl.includes("placehold.co") && (
-                        <div className="mb-4 rounded-lg overflow-hidden">
-                          <img
-                            src={panel.imageUrl}
-                            alt={`场景 ${i + 1}`}
-                            className="w-full h-auto object-contain"
-                          />
-                          {panel.error && (
-                            <p className="text-red-500 text-xs mt-1 flex items-center">
-                              <AlertCircle className="w-3 h-3 mr-1" />
-                              {panel.error}
-                            </p>
-                          )}
-                        </div>
-                      )}
-
-                    <div className="prose prose-pink max-w-none">
-                      <p className="whitespace-pre-wrap text-gray-700">
-                        {panel.content}
-                      </p>
-                    </div>
-
-                    {/* 如果已生成图片，显示下载按钮 */}
-                    {panel.imageUrl &&
-                      panel.imageUrl.includes("http") &&
-                      !panel.imageUrl.includes("placehold.co") && (
-                        <div className="mt-4 flex justify-end">
-                          <Button
-                            size="sm"
-                            variant="outline"
-                            className="text-xs border-pink-200 text-pink-600"
-                            onClick={() =>
-                              handleDownloadImage(
-                                panel.imageUrl,
-                                `场景${i + 1}`
-                              )
-                            }
-                          >
-                            <Download className="w-3 h-3 mr-1" />
-                            下载图片
-                          </Button>
-                        </div>
-                      )}
-                  </div>
-                ))}
-              </div>
-
-              {/* 统一的生成漫画按钮 */}
-              <div className="mt-8 pt-6 border-t border-pink-100 text-center">
-                <div className="flex flex-col items-center">
-                  <div className="mb-4 bg-white/90 rounded-xl px-4 py-2 shadow-sm border border-pink-100">
-                    <div className="text-sm text-gray-600 flex flex-wrap justify-center gap-x-4 gap-y-2">
-                      <div className="flex items-center gap-1">
-                        <Sparkles className="w-3.5 h-3.5 text-purple-500" />
-                        <span>
-                          模型:{" "}
-                          <span className="font-medium text-purple-600">
-                            {
-                              textModels.find((m) => m.id === selectedModel)
-                                ?.name
-                            }
-                          </span>
-                        </span>
-                      </div>
-                      <div className="flex items-center gap-1">
-                        <SlidersHorizontal className="w-3.5 h-3.5 text-blue-500" />
-                        <span>
-                          图片比例:{" "}
-                          <span className="font-medium text-blue-600">
-                            {selectedAspectRatio}
-                          </span>
-                        </span>
-                      </div>
-                      {showAdvancedSettings && (
-                        <>
-                          <div className="flex items-center gap-1">
-                            <SlidersHorizontal className="w-3.5 h-3.5 text-indigo-500" />
-                            <span>
-                              文本权重:{" "}
-                              <span className="font-medium text-indigo-600">
-                                {guidanceScale.toFixed(1)}
-                              </span>
-                            </span>
-                          </div>
-                          <div className="flex items-center gap-1">
-                            <Dices className="w-3.5 h-3.5 text-purple-500" />
-                            <span>
-                              种子数:{" "}
-                              <span className="font-medium text-purple-600">
-                                {seedMode === "random" ? "随机" : seedValue}
-                              </span>
-                            </span>
-                          </div>
-                        </>
-                      )}
-                    </div>
-                  </div>
-                  <Button
-                    onClick={handleGenerateImages}
-                    disabled={isGeneratingImages || comicPanels.length === 0}
-                    size="lg"
-                    className="px-12 py-3 text-lg font-medium rounded-full bg-gradient-to-r from-orange-400 to-pink-500 hover:from-orange-500 hover:to-pink-600 disabled:opacity-70 shadow-lg shadow-orange-200"
-                  >
-                    {isGeneratingImages ? (
-                      <>
-                        <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-white mr-2" />
-                        生成中...
-                      </>
-                    ) : (
-                      <>
-                        <ImageIcon className="w-5 h-5 mr-2" />
-                        根据剧本生成漫画
-                      </>
-                    )}
-                  </Button>
-                  <p className="text-sm text-gray-500 mt-2">
-                    {isGeneratingImages
-                      ? "正在生成漫画图像，请稍候..."
-                      : "将基于上述剧本内容生成完整的漫画图像"}
-                  </p>
-                </div>
-              </div>
-
-              {/* Social Actions */}
-              <div className="mt-8 pt-6 border-t border-pink-100">
-                <div className="flex items-center justify-between">
-                  <div className="flex items-center gap-4">
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      className="text-gray-600 hover:text-pink-600"
-                    >
-                      <Heart className="w-4 h-4 mr-1" />
-                      喜欢
-                    </Button>
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      className="text-gray-600 hover:text-pink-600"
-                    >
-                      <MessageCircle className="w-4 h-4 mr-1" />
-                      评论
-                    </Button>
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      className="text-gray-600 hover:text-pink-600"
-                    >
-                      <Share className="w-4 h-4 mr-1" />
-                      分享
-                    </Button>
-                  </div>
-                  <Badge
-                    variant="secondary"
-                    className="bg-green-100 text-green-700"
-                  >
-                    生成成功
-                  </Badge>
-                </div>
-              </div>
-            </CardContent>
-          </Card>
-        )}
-      </div>
-
-      {/* FAQ Section */}
-      <div ref={faqRef} className="mt-16 pt-8 border-t border-pink-100">
-        <div className="text-center mb-10">
-          <h2 className="text-3xl font-bold bg-gradient-to-r from-pink-600 to-orange-600 bg-clip-text text-transparent mb-4">
-            技术问答
-          </h2>
-          <p className="text-gray-600">
-            深入了解漫画生成器的技术原理与高级功能
-          </p>
-        </div>
-
-        <div className="space-y-4 mb-8">
-          {faqs.map((faq, index) => (
-            <div
-              key={index}
-              className="border border-pink-100 rounded-xl overflow-hidden bg-white/70 backdrop-blur-sm shadow-sm"
-            >
-              <button
-                className="w-full p-4 text-left flex justify-between items-center"
-                onClick={() => toggleAccordion(index)}
-              >
-                <span className="font-medium text-gray-800">
-                  {faq.question}
-                </span>
-                <span className="text-pink-500">
-                  {activeAccordion === index ? (
-                    <MinusCircle className="w-5 h-5" />
-                  ) : (
-                    <PlusCircle className="w-5 h-5" />
-                  )}
-                </span>
-              </button>
-
-              {activeAccordion === index && (
-                <div className="p-4 pt-0 border-t border-pink-50 bg-gradient-to-br from-pink-50/30 to-orange-50/30">
-                  <p className="text-gray-600 whitespace-pre-line text-sm leading-relaxed">
-                    {faq.answer}
-                  </p>
-                  {index === 6 && (
-                    <div className="mt-3 text-xs text-indigo-600">
-                      <a href="#" className="underline hover:text-indigo-800">
-                        查看完整API文档 →
-                      </a>
-                    </div>
-                  )}
-                </div>
-              )}
-            </div>
-          ))}
-        </div>
-      </div>
-
-      {/* Footer */}
-      <div className="text-center py-8 text-gray-500 text-sm">
-        <p>让每个人都能轻松将文字转化为视觉故事 💫</p>
-        <div className="flex justify-center gap-4 mt-2">
-          <button className="hover:text-pink-500 transition-colors">
-            隐私政策
-          </button>
-          <button className="hover:text-pink-500 transition-colors">
-            使用条款
-          </button>
-          <button className="hover:text-pink-500 transition-colors">
-            联系我们
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/.history/lib/types_20250801230224.ts b/.history/lib/types_20250801230224.ts
deleted file mode 100644
index 0519ecb..0000000
--- a/.history/lib/types_20250801230224.ts
+++ /dev/null
@@ -1 +0,0 @@
- 
\ No newline at end of file
diff --git a/.history/lib/types_20250801230228.ts b/.history/lib/types_20250801230228.ts
deleted file mode 100644
index e6637ac..0000000
--- a/.history/lib/types_20250801230228.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-// 漫画面板类型定义
-export interface ComicPanel {
-  id: string;
-  description: string;
-  imageUrl: string;
-}
-
-// API响应类型定义
-export interface ApiResponse {
-  comicPanels?: ComicPanel[];
-  error?: string;
-}
diff --git a/.history/lib/types_20250801231313.ts b/.history/lib/types_20250801231313.ts
deleted file mode 100644
index 5f5bfb7..0000000
--- a/.history/lib/types_20250801231313.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-// 漫画面板类型定义
-export interface ComicPanel {
-  id: string;
-  content: string; // 漫画场景内容，包括场景描述、角色描述、对话等
-  imageUrl: string;
-}
-
-// API响应类型定义
-export interface ApiResponse {
-  comicPanels?: ComicPanel[];
-  error?: string;
-}
diff --git a/.history/lib/types_20250801235115.ts b/.history/lib/types_20250801235115.ts
deleted file mode 100644
index 2ab3aa9..0000000
--- a/.history/lib/types_20250801235115.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-// 漫画面板类型定义
-export interface ComicPanel {
-  id: string;
-  content: string; // 漫画场景内容，包括场景描述、角色描述、对话等
-  imageUrl: string;
-  sceneNumber?: number; // 场景编号
-  error?: string; // 图像生成错误信息
-}
-
-// API响应类型定义
-export interface ApiResponse {
-  comicPanels?: ComicPanel[];
-  error?: string;
-}
diff --git a/.history/styles/globals_20250727100327.css b/.history/styles/globals_20250727100327.css
deleted file mode 100644
index df8e606..0000000
--- a/.history/styles/globals_20250727100327.css
+++ /dev/null
@@ -1,90 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer utilities {
-  .text-balance {
-    text-wrap: balance;
-  }
-}
-
-@layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 0 0% 3.9%;
-    --card: 0 0% 100%;
-    --card-foreground: 0 0% 3.9%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 0 0% 3.9%;
-    --primary: 0 0% 9%;
-    --primary-foreground: 0 0% 98%;
-    --secondary: 0 0% 96.1%;
-    --secondary-foreground: 0 0% 9%;
-    --muted: 0 0% 96.1%;
-    --muted-foreground: 0 0% 45.1%;
-    --accent: 0 0% 96.1%;
-    --accent-foreground: 0 0% 9%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 0 0% 89.8%;
-    --input: 0 0% 89.8%;
-    --ring: 0 0% 3.9%;
-    --chart-1: 12 76% 61%;
-    --chart-2: 173 58% 39%;
-    --chart-3: 197 37% 24%;
-    --chart-4: 43 74% 66%;
-    --chart-5: 27 87% 67%;
-    --radius: 0.5rem;
-    --sidebar-background: 0 0% 98%;
-    --sidebar-foreground: 240 5.3% 26.1%;
-    --sidebar-primary: 240 5.9% 10%;
-    --sidebar-primary-foreground: 0 0% 98%;
-    --sidebar-accent: 240 4.8% 95.9%;
-    --sidebar-accent-foreground: 240 5.9% 10%;
-    --sidebar-border: 220 13% 91%;
-    --sidebar-ring: 217.2 91.2% 59.8%;
-  }
-  .dark {
-    --background: 0 0% 3.9%;
-    --foreground: 0 0% 98%;
-    --card: 0 0% 3.9%;
-    --card-foreground: 0 0% 98%;
-    --popover: 0 0% 3.9%;
-    --popover-foreground: 0 0% 98%;
-    --primary: 0 0% 98%;
-    --primary-foreground: 0 0% 9%;
-    --secondary: 0 0% 14.9%;
-    --secondary-foreground: 0 0% 98%;
-    --muted: 0 0% 14.9%;
-    --muted-foreground: 0 0% 63.9%;
-    --accent: 0 0% 14.9%;
-    --accent-foreground: 0 0% 98%;
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 0 0% 14.9%;
-    --input: 0 0% 14.9%;
-    --ring: 0 0% 83.1%;
-    --chart-1: 220 70% 50%;
-    --chart-2: 160 60% 45%;
-    --chart-3: 30 80% 55%;
-    --chart-4: 280 65% 60%;
-    --chart-5: 340 75% 55%;
-    --sidebar-background: 240 5.9% 10%;
-    --sidebar-foreground: 240 4.8% 95.9%;
-    --sidebar-primary: 224.3 76.3% 48%;
-    --sidebar-primary-foreground: 0 0% 100%;
-    --sidebar-accent: 240 3.7% 15.9%;
-    --sidebar-accent-foreground: 240 4.8% 95.9%;
-    --sidebar-border: 240 3.7% 15.9%;
-    --sidebar-ring: 217.2 91.2% 59.8%;
-  }
-}
-
-@layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}
diff --git a/.history/styles/globals_20250802003608.css b/.history/styles/globals_20250802003608.css
deleted file mode 100644
index 1c36b81..0000000
--- a/.history/styles/globals_20250802003608.css
+++ /dev/null
@@ -1,122 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer components {
-  /* 自定义滚动条样式 */
-  .custom-scrollbar::-webkit-scrollbar {
-    width: 6px;
-    height: 6px;
-  }
-
-  .custom-scrollbar::-webkit-scrollbar-track {
-    background-color: rgba(243, 244, 246, 0.4);
-    border-radius: 3px;
-  }
-
-  .custom-scrollbar::-webkit-scrollbar-thumb {
-    background-color: rgba(107, 114, 128, 0.4);
-    border-radius: 3px;
-  }
-
-  .custom-scrollbar::-webkit-scrollbar-thumb:hover {
-    background-color: rgba(107, 114, 128, 0.6);
-  }
-
-  /* 隐藏滚动条但保留滚动功能 */
-  .no-scrollbar {
-    -ms-overflow-style: none; /* IE and Edge */
-    scrollbar-width: none; /* Firefox */
-  }
-
-  .no-scrollbar::-webkit-scrollbar {
-    display: none; /* Chrome, Safari, Opera */
-  }
-}
-
-@layer utilities {
-  .text-balance {
-    text-wrap: balance;
-  }
-}
-
-@layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 0 0% 3.9%;
-    --card: 0 0% 100%;
-    --card-foreground: 0 0% 3.9%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 0 0% 3.9%;
-    --primary: 0 0% 9%;
-    --primary-foreground: 0 0% 98%;
-    --secondary: 0 0% 96.1%;
-    --secondary-foreground: 0 0% 9%;
-    --muted: 0 0% 96.1%;
-    --muted-foreground: 0 0% 45.1%;
-    --accent: 0 0% 96.1%;
-    --accent-foreground: 0 0% 9%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 0 0% 89.8%;
-    --input: 0 0% 89.8%;
-    --ring: 0 0% 3.9%;
-    --chart-1: 12 76% 61%;
-    --chart-2: 173 58% 39%;
-    --chart-3: 197 37% 24%;
-    --chart-4: 43 74% 66%;
-    --chart-5: 27 87% 67%;
-    --radius: 0.5rem;
-    --sidebar-background: 0 0% 98%;
-    --sidebar-foreground: 240 5.3% 26.1%;
-    --sidebar-primary: 240 5.9% 10%;
-    --sidebar-primary-foreground: 0 0% 98%;
-    --sidebar-accent: 240 4.8% 95.9%;
-    --sidebar-accent-foreground: 240 5.9% 10%;
-    --sidebar-border: 220 13% 91%;
-    --sidebar-ring: 217.2 91.2% 59.8%;
-  }
-  .dark {
-    --background: 0 0% 3.9%;
-    --foreground: 0 0% 98%;
-    --card: 0 0% 3.9%;
-    --card-foreground: 0 0% 98%;
-    --popover: 0 0% 3.9%;
-    --popover-foreground: 0 0% 98%;
-    --primary: 0 0% 98%;
-    --primary-foreground: 0 0% 9%;
-    --secondary: 0 0% 14.9%;
-    --secondary-foreground: 0 0% 98%;
-    --muted: 0 0% 14.9%;
-    --muted-foreground: 0 0% 63.9%;
-    --accent: 0 0% 14.9%;
-    --accent-foreground: 0 0% 98%;
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 0 0% 14.9%;
-    --input: 0 0% 14.9%;
-    --ring: 0 0% 83.1%;
-    --chart-1: 220 70% 50%;
-    --chart-2: 160 60% 45%;
-    --chart-3: 30 80% 55%;
-    --chart-4: 280 65% 60%;
-    --chart-5: 340 75% 55%;
-    --sidebar-background: 240 5.9% 10%;
-    --sidebar-foreground: 240 4.8% 95.9%;
-    --sidebar-primary: 224.3 76.3% 48%;
-    --sidebar-primary-foreground: 0 0% 100%;
-    --sidebar-accent: 240 3.7% 15.9%;
-    --sidebar-accent-foreground: 240 4.8% 95.9%;
-    --sidebar-border: 240 3.7% 15.9%;
-    --sidebar-ring: 217.2 91.2% 59.8%;
-  }
-}
-
-@layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}
diff --git a/.history/styles/globals_20250802004958.css b/.history/styles/globals_20250802004958.css
deleted file mode 100644
index 1c36b81..0000000
--- a/.history/styles/globals_20250802004958.css
+++ /dev/null
@@ -1,122 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer components {
-  /* 自定义滚动条样式 */
-  .custom-scrollbar::-webkit-scrollbar {
-    width: 6px;
-    height: 6px;
-  }
-
-  .custom-scrollbar::-webkit-scrollbar-track {
-    background-color: rgba(243, 244, 246, 0.4);
-    border-radius: 3px;
-  }
-
-  .custom-scrollbar::-webkit-scrollbar-thumb {
-    background-color: rgba(107, 114, 128, 0.4);
-    border-radius: 3px;
-  }
-
-  .custom-scrollbar::-webkit-scrollbar-thumb:hover {
-    background-color: rgba(107, 114, 128, 0.6);
-  }
-
-  /* 隐藏滚动条但保留滚动功能 */
-  .no-scrollbar {
-    -ms-overflow-style: none; /* IE and Edge */
-    scrollbar-width: none; /* Firefox */
-  }
-
-  .no-scrollbar::-webkit-scrollbar {
-    display: none; /* Chrome, Safari, Opera */
-  }
-}
-
-@layer utilities {
-  .text-balance {
-    text-wrap: balance;
-  }
-}
-
-@layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 0 0% 3.9%;
-    --card: 0 0% 100%;
-    --card-foreground: 0 0% 3.9%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 0 0% 3.9%;
-    --primary: 0 0% 9%;
-    --primary-foreground: 0 0% 98%;
-    --secondary: 0 0% 96.1%;
-    --secondary-foreground: 0 0% 9%;
-    --muted: 0 0% 96.1%;
-    --muted-foreground: 0 0% 45.1%;
-    --accent: 0 0% 96.1%;
-    --accent-foreground: 0 0% 9%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 0 0% 89.8%;
-    --input: 0 0% 89.8%;
-    --ring: 0 0% 3.9%;
-    --chart-1: 12 76% 61%;
-    --chart-2: 173 58% 39%;
-    --chart-3: 197 37% 24%;
-    --chart-4: 43 74% 66%;
-    --chart-5: 27 87% 67%;
-    --radius: 0.5rem;
-    --sidebar-background: 0 0% 98%;
-    --sidebar-foreground: 240 5.3% 26.1%;
-    --sidebar-primary: 240 5.9% 10%;
-    --sidebar-primary-foreground: 0 0% 98%;
-    --sidebar-accent: 240 4.8% 95.9%;
-    --sidebar-accent-foreground: 240 5.9% 10%;
-    --sidebar-border: 220 13% 91%;
-    --sidebar-ring: 217.2 91.2% 59.8%;
-  }
-  .dark {
-    --background: 0 0% 3.9%;
-    --foreground: 0 0% 98%;
-    --card: 0 0% 3.9%;
-    --card-foreground: 0 0% 98%;
-    --popover: 0 0% 3.9%;
-    --popover-foreground: 0 0% 98%;
-    --primary: 0 0% 98%;
-    --primary-foreground: 0 0% 9%;
-    --secondary: 0 0% 14.9%;
-    --secondary-foreground: 0 0% 98%;
-    --muted: 0 0% 14.9%;
-    --muted-foreground: 0 0% 63.9%;
-    --accent: 0 0% 14.9%;
-    --accent-foreground: 0 0% 98%;
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 0 0% 14.9%;
-    --input: 0 0% 14.9%;
-    --ring: 0 0% 83.1%;
-    --chart-1: 220 70% 50%;
-    --chart-2: 160 60% 45%;
-    --chart-3: 30 80% 55%;
-    --chart-4: 280 65% 60%;
-    --chart-5: 340 75% 55%;
-    --sidebar-background: 240 5.9% 10%;
-    --sidebar-foreground: 240 4.8% 95.9%;
-    --sidebar-primary: 224.3 76.3% 48%;
-    --sidebar-primary-foreground: 0 0% 100%;
-    --sidebar-accent: 240 3.7% 15.9%;
-    --sidebar-accent-foreground: 240 4.8% 95.9%;
-    --sidebar-border: 240 3.7% 15.9%;
-    --sidebar-ring: 217.2 91.2% 59.8%;
-  }
-}
-
-@layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}
diff --git a/.history/vercel_20250803171834.json b/.history/vercel_20250803171834.json
deleted file mode 100644
index 0519ecb..0000000
--- a/.history/vercel_20250803171834.json
+++ /dev/null
@@ -1 +0,0 @@
- 
\ No newline at end of file
diff --git a/.history/vercel_20250803171838.json b/.history/vercel_20250803171838.json
deleted file mode 100644
index ac552dd..0000000
--- a/.history/vercel_20250803171838.json
+++ /dev/null
@@ -1,16 +0,0 @@
-{
-    "version": 2,
-    "buildCommand": "pnpm build",
-    "devCommand": "pnpm dev",
-    "installCommand": "pnpm install",
-    "framework": "nextjs",
-    "outputDirectory": ".next",
-    "git": {
-        "deploymentEnabled": {
-            "main": true
-        }
-    },
-    "env": {
-        "DEEPSEEK_API_KEY": "sk-xgpdmqrgikwkbaacvxbvtkwhxnwjncdvqzlshnzcyswxhsfn"
-    }
-}
\ No newline at end of file
diff --git a/SECURITY.md b/SECURITY.md
new file mode 100644
index 0000000..b3c717f
--- /dev/null
+++ b/SECURITY.md
@@ -0,0 +1,16 @@
+# Security Policy
+
+## Credentials
+
+`DEEPSEEK_API_KEY` and `ARK_API_KEY` are server-only credentials. Store them in
+`.env.local` during local development and in encrypted deployment environment
+settings in production. Do not put them in source files, `vercel.json`,
+`next.config.mjs`, browser-visible variables, logs, screenshots, or issues.
+
+The API routes fail closed when a required credential is missing.
+
+## Reporting a vulnerability
+
+Please report suspected credential exposure or other vulnerabilities privately
+through GitHub's security-advisory flow. Do not include live credentials or
+sensitive user content in a public issue.
diff --git a/app/[locale]/layout.tsx b/app/[locale]/layout.tsx
index 2890323..90673c8 100644
--- a/app/[locale]/layout.tsx
+++ b/app/[locale]/layout.tsx
@@ -19,9 +19,9 @@ export const metadata = {
 
 interface RootLayoutProps {
   children: React.ReactNode;
-  params: {
+  params: Promise<{
     locale: string;
-  };
+  }>;
 }
 
 // 添加LocaleSync组件
@@ -51,7 +51,7 @@ export default async function RootLayout({
   children,
   params,
 }: RootLayoutProps) {
-  const { locale } = params;
+  const { locale } = await params;
   let messages;
   try {
     messages = (await import(`../../messages/${locale}.json`)).default;
diff --git a/app/api/generate-images/route.ts b/app/api/generate-images/route.ts
index d93a849..5eebad3 100644
--- a/app/api/generate-images/route.ts
+++ b/app/api/generate-images/route.ts
@@ -2,13 +2,6 @@ import { NextResponse } from "next/server";
 import OpenAI from "openai";
 import { buildStylePrompt, getStyleNegativePrompt } from "@/lib/stylePrompts";
 
-// 打印环境变量信息
-console.log("环境变量状态:", {
-  NODE_ENV: process.env.NODE_ENV,
-  HAS_ARK_API_KEY: !!process.env.ARK_API_KEY,
-  ARK_API_KEY_LENGTH: process.env.ARK_API_KEY?.length || 0,
-});
-
 // 初始化方舟API客户端
 const ark = new OpenAI({
   apiKey: process.env.ARK_API_KEY || "",
diff --git a/app/api/generate/prompt.ts b/app/api/generate/prompt.ts
new file mode 100644
index 0000000..9dbf439
--- /dev/null
+++ b/app/api/generate/prompt.ts
@@ -0,0 +1,44 @@
+import { getPromptTemplate } from "@/lib/prompts";
+
+export function buildMasterPrompt(params: {
+  content: string;
+  count?: number;
+  sceneNumber?: number;
+  templateName?: string;
+}): string {
+  const { content, count, sceneNumber, templateName } = params;
+  const template = getPromptTemplate(templateName);
+
+  if (typeof sceneNumber === "number") {
+    return `
+${template.core}
+
+【输入内容】
+${content}
+
+${template.outputRulesCommon}
+仅输出第${sceneNumber}张的完整脚本块：
+- 必须以"第${sceneNumber}张"起始行开头
+- 仅包含该张应有的字段（场景/构图/人物/对话/氛围/转场逻辑）
+- 不要输出[核心提炼]、[角色设定]、其他张、或任何额外解释文本
+
+${template.qaChecklist}
+开始创作：`;
+  }
+
+  const n = Number(count) || 4;
+  return `
+${template.core}
+
+【输入内容】
+${content}
+
+${template.outputRulesCommon}
+请创作共${n}张，采用适合${n}张结构的叙事节奏：
+- 逐张依次输出"第1张"至"第${n}张"
+- 每一张内容字数控制在50-120字，信息密度高、画面感强
+- 不要输出除指定结构外的任何多余文本
+
+${template.qaChecklist}
+开始创作：`;
+}
diff --git a/app/api/generate/route.ts b/app/api/generate/route.ts
index 6804866..079e7ee 100644
--- a/app/api/generate/route.ts
+++ b/app/api/generate/route.ts
@@ -1,13 +1,9 @@
 import { NextResponse } from "next/server";
 import { ComicPanel } from "@/lib/types";
-import { getPromptTemplate } from "@/lib/prompts";
+import { buildMasterPrompt } from "./prompt";
 
 // DeepSeek API配置
 const DEEPSEEK_API_URL = "https://api.siliconflow.cn/v1/chat/completions";
-// 优先使用环境变量中的API密钥，如果不存在则使用硬编码的密钥
-const DEEPSEEK_API_KEY =
-  process.env.DEEPSEEK_API_KEY ||
-  "sk-xgpdmqrgikwkbaacvxbvtkwhxnwjncdvqzlshnzcyswxhsfn";
 
 // 支持的模型列表
 const SUPPORTED_MODELS: Record<string, string> = {
@@ -16,51 +12,6 @@ const SUPPORTED_MODELS: Record<string, string> = {
   "gpt-3.5": "gpt-3.5-turbo", // 示例模型ID
 };
 
-// 根据用户提供的"漫画脚本创作大师提示词"构建系统提示
-export function buildMasterPrompt(params: {
-  content: string;
-  count?: number;
-  sceneNumber?: number;
-  templateName?: string;
-}): string {
-  const { content, count, sceneNumber, templateName } = params;
-  const template = getPromptTemplate(templateName);
-
-  if (typeof sceneNumber === "number") {
-    // 单张刷新：仅生成指定"第N张"块
-    return `
-${template.core}
-
-【输入内容】
-${content}
-
-${template.outputRulesCommon}
-仅输出第${sceneNumber}张的完整脚本块：
-- 必须以"第${sceneNumber}张"起始行开头
-- 仅包含该张应有的字段（场景/构图/人物/对话/氛围/转场逻辑）
-- 不要输出[核心提炼]、[角色设定]、其他张、或任何额外解释文本
-
-${template.qaChecklist}
-开始创作：`;
-  }
-
-  const n = Number(count) || 4;
-  return `
-${template.core}
-
-【输入内容】
-${content}
-
-${template.outputRulesCommon}
-请创作共${n}张，采用适合${n}张结构的叙事节奏：
-- 逐张依次输出"第1张"至"第${n}张"
-- 每一张内容字数控制在50-120字，信息密度高、画面感强
-- 不要输出除指定结构外的任何多余文本
-
-${template.qaChecklist}
-开始创作：`;
-}
-
 // 解析“第X张”结构为多张内容
 function parsePanelsFromMasterOutput(
   text: string
@@ -83,6 +34,15 @@ function parsePanelsFromMasterOutput(
 
 export async function POST(request: Request) {
   try {
+    const apiKey = process.env.DEEPSEEK_API_KEY;
+    if (!apiKey) {
+      console.error("DEEPSEEK_API_KEY is not configured");
+      return NextResponse.json(
+        { error: "文本生成服务尚未配置" },
+        { status: 503 }
+      );
+    }
+
     const {
       content,
       count,
@@ -130,7 +90,7 @@ export async function POST(request: Request) {
       method: "POST",
       headers: {
         "Content-Type": "application/json",
-        Authorization: `Bearer ${DEEPSEEK_API_KEY}`,
+        Authorization: `Bearer ${apiKey}`,
       },
       body: JSON.stringify({
         model: modelId,
diff --git a/app/api/generate/test-prompts.ts b/app/api/generate/test-prompts.ts
index 31fefaa..8411703 100644
--- a/app/api/generate/test-prompts.ts
+++ b/app/api/generate/test-prompts.ts
@@ -1,4 +1,4 @@
-import { buildMasterPrompt } from "./route";
+import { buildMasterPrompt } from "./prompt";
 
 // 测试用例
 const testCases = [
diff --git a/messages/en.json b/messages/en.json
index f061ecb..e66def8 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -190,7 +190,8 @@
         "hero": {
             "title": {
                 "prefix": "About",
-                "highlight": "Comic AI"
+                "highlight": "Comic AI",
+                "suffix": ""
             },
             "subtitle": "AI-Powered Comic Creation Platform",
             "description": "Learn more about our revolutionary comic creation technology"
@@ -255,10 +256,7 @@
             "online": "Online: Available 24/7",
             "description": "Have questions or feedback? We'd love to hear from you"
         },
-        "copyright": {
-            "title": "Copyright Information",
-            "content": "All rights reserved. Content generated by Comic AI belongs to the user."
-        }
+        "copyright": "© {year} Comic AI. All rights reserved."
     },
     "faq": {
         "title": "Frequently Asked Questions",
@@ -706,4 +704,4 @@
             "new": "New"
         }
     }
-}
\ No newline at end of file
+}
diff --git a/messages/zh.json b/messages/zh.json
index b16829f..bc49f35 100644
--- a/messages/zh.json
+++ b/messages/zh.json
@@ -258,7 +258,8 @@
         "hero": {
             "title": {
                 "prefix": "用AI技术重新定义",
-                "highlight": "漫画创作"
+                "highlight": "漫画创作",
+                "suffix": ""
             },
             "description": "Comic AI致力于将前沿人工智能技术与传统漫画艺术完美融合，为创作者提供无限可能"
         },
@@ -691,4 +692,4 @@
         "recommended": "推荐",
         "new": "新品"
     }
-}
\ No newline at end of file
+}
diff --git a/next.config.mjs b/next.config.mjs
index 7d97568..5e72547 100755
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -4,18 +4,9 @@ const withNextIntl = createNextIntlPlugin();
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-    eslint: {
-        ignoreDuringBuilds: true,
-    },
-    typescript: {
-        ignoreBuildErrors: true,
-    },
     images: {
         unoptimized: true,
-    },
-    env: {
-        ARK_API_KEY: process.env.ARK_API_KEY
     }
 }
 
-export default withNextIntl(nextConfig);
\ No newline at end of file
+export default withNextIntl(nextConfig);
diff --git a/package.json b/package.json
index 8f87290..06c361a 100755
--- a/package.json
+++ b/package.json
@@ -51,8 +51,8 @@
         "geist": "^1.3.1",
         "input-otp": "1.4.1",
         "lucide-react": "^0.454.0",
-        "next": "15.2.4",
-        "next-intl": "^4.3.4",
+        "next": "15.5.21",
+        "next-intl": "^4.13.3",
         "next-themes": "^0.4.4",
         "openai": "^5.12.1",
         "react": "^19",
@@ -71,8 +71,15 @@
         "@types/node": "^22",
         "@types/react": "^19",
         "@types/react-dom": "^19",
-        "postcss": "^8.5",
-        "tailwindcss": "^3.4.17",
+        "postcss": "^8.5.22",
+        "tailwindcss": "^3.4.19",
         "typescript": "^5"
+    },
+    "pnpm": {
+        "overrides": {
+            "lodash": "4.18.1",
+            "postcss": "8.5.22",
+            "sharp": "0.35.3"
+        }
     }
-}
\ No newline at end of file
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7d78bb1..7b76fc2 100755
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -4,6 +4,11 @@ settings:
   autoInstallPeers: true
   excludeLinksFromLockfile: false
 
+overrides:
+  lodash: 4.18.1
+  postcss: 8.5.22
+  sharp: 0.35.3
+
 dependencies:
   '@hookform/resolvers':
     specifier: ^3.9.1
@@ -91,7 +96,7 @@ dependencies:
     version: 1.1.6(@types/react-dom@19.0.0)(@types/react@19.0.0)(react-dom@19.0.0)(react@19.0.0)
   autoprefixer:
     specifier: ^10.4.20
-    version: 10.4.20(postcss@8.5.0)
+    version: 10.4.20(postcss@8.5.22)
   class-variance-authority:
     specifier: ^0.7.1
     version: 0.7.1
@@ -109,7 +114,7 @@ dependencies:
     version: 8.5.1(react@19.0.0)
   geist:
     specifier: ^1.3.1
-    version: 1.3.1(next@15.2.4)
+    version: 1.3.1(next@15.5.21)
   input-otp:
     specifier: 1.4.1
     version: 1.4.1(react-dom@19.0.0)(react@19.0.0)
@@ -117,11 +122,11 @@ dependencies:
     specifier: ^0.454.0
     version: 0.454.0(react@19.0.0)
   next:
-    specifier: 15.2.4
-    version: 15.2.4(react-dom@19.0.0)(react@19.0.0)
+    specifier: 15.5.21
+    version: 15.5.21(@types/node@22.0.0)(react-dom@19.0.0)(react@19.0.0)
   next-intl:
-    specifier: ^4.3.4
-    version: 4.3.4(next@15.2.4)(react@19.0.0)(typescript@5.0.2)
+    specifier: ^4.13.3
+    version: 4.13.3(next@15.5.21)(react@19.0.0)(typescript@5.0.2)
   next-themes:
     specifier: ^0.4.4
     version: 0.4.4(react-dom@19.0.0)(react@19.0.0)
@@ -154,7 +159,7 @@ dependencies:
     version: 2.5.5
   tailwindcss-animate:
     specifier: ^1.0.7
-    version: 1.0.7(tailwindcss@3.4.17)
+    version: 1.0.7(tailwindcss@3.4.19)
   vaul:
     specifier: ^0.9.6
     version: 0.9.6(@types/react-dom@19.0.0)(@types/react@19.0.0)(react-dom@19.0.0)(react@19.0.0)
@@ -173,11 +178,11 @@ devDependencies:
     specifier: ^19
     version: 19.0.0
   postcss:
-    specifier: ^8.5
-    version: 8.5.0
+    specifier: 8.5.22
+    version: 8.5.22
   tailwindcss:
-    specifier: ^3.4.17
-    version: 3.4.17
+    specifier: ^3.4.19
+    version: 3.4.19
   typescript:
     specifier: ^5
     version: 5.0.2
@@ -197,8 +202,8 @@ packages:
     resolution: {integrity: sha512-LBrd7MiJZ9McsOgxqWX7AaxrDjcFVjWH/tIKJd7pnR7McaslGYOP1QmmiBXdJH/H/yLCT+rcQ7FaPBUxRGUtrg==}
     dev: false
 
-  /@emnapi/runtime@1.4.5:
-    resolution: {integrity: sha512-++LApOtY0pEEz1zrd9vy1/zXVaVJJ/EbAF3u0fXIzPJEDtnITsBGbbK0EkM72amhl/R5b+5xx0Y/QhcVOpuulg==}
+  /@emnapi/runtime@1.11.2:
+    resolution: {integrity: sha512-kyOl3X0DuTiT1h2ft8r2fYO8JYtU9a9Xis/zBSiGArNaagCOWx90N1k2wxp18czFDH+OgcWGb5ZP/XMt3dcyPA==}
     requiresBuild: true
     dependencies:
       tslib: 2.8.1
@@ -233,46 +238,24 @@ packages:
     resolution: {integrity: sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==}
     dev: false
 
-  /@formatjs/ecma402-abstract@2.3.4:
-    resolution: {integrity: sha512-qrycXDeaORzIqNhBOx0btnhpD1c+/qFIHAN9znofuMJX6QBwtbrmlpWfD4oiUUD2vJUOIYFA/gYtg2KAMGG7sA==}
-    dependencies:
-      '@formatjs/fast-memoize': 2.2.7
-      '@formatjs/intl-localematcher': 0.6.1
-      decimal.js: 10.6.0
-      tslib: 2.8.1
-    dev: false
-
-  /@formatjs/fast-memoize@2.2.7:
-    resolution: {integrity: sha512-Yabmi9nSvyOMrlSeGGWDiH7rf3a7sIwplbvo/dlz9WCIjzIQAfy1RMf4S0X3yG724n5Ghu2GmEl5NJIV6O9sZQ==}
-    dependencies:
-      tslib: 2.8.1
-    dev: false
-
-  /@formatjs/icu-messageformat-parser@2.11.2:
-    resolution: {integrity: sha512-AfiMi5NOSo2TQImsYAg8UYddsNJ/vUEv/HaNqiFjnI3ZFfWihUtD5QtuX6kHl8+H+d3qvnE/3HZrfzgdWpsLNA==}
-    dependencies:
-      '@formatjs/ecma402-abstract': 2.3.4
-      '@formatjs/icu-skeleton-parser': 1.8.14
-      tslib: 2.8.1
+  /@formatjs/fast-memoize@3.1.7:
+    resolution: {integrity: sha512-zXfhLpvA6T7+efdt9JLbBwZ00tT7NsBMDVnDu8rpHeNNv8KfRZAMo2gkG0k9lK/Nzc//3kJ9pImsfuJxk3KhUA==}
     dev: false
 
-  /@formatjs/icu-skeleton-parser@1.8.14:
-    resolution: {integrity: sha512-i4q4V4qslThK4Ig8SxyD76cp3+QJ3sAqr7f6q9VVfeGtxG9OhiAk3y9XF6Q41OymsKzsGQ6OQQoJNY4/lI8TcQ==}
+  /@formatjs/icu-messageformat-parser@3.5.15:
+    resolution: {integrity: sha512-5o4grXKotAB3JqQuisLApHG43g17N+paoRTa92Jiz35Zvfemq0cVf4EDvuxyHAzmsJji7igaEowicLO/VmfJ8Q==}
     dependencies:
-      '@formatjs/ecma402-abstract': 2.3.4
-      tslib: 2.8.1
+      '@formatjs/icu-skeleton-parser': 2.1.11
     dev: false
 
-  /@formatjs/intl-localematcher@0.5.10:
-    resolution: {integrity: sha512-af3qATX+m4Rnd9+wHcjJ4w2ijq+rAVP3CCinJQvFv1kgSu1W6jypUmvleJxcewdxmutM8dmIRZFxO/IQBZmP2Q==}
-    dependencies:
-      tslib: 2.8.1
+  /@formatjs/icu-skeleton-parser@2.1.11:
+    resolution: {integrity: sha512-j8cUmOJzVgkHuS0QiQ6ga76UIoLOFSAMWhs7aZJztH3aAdCOAE6vpC8KVvFB4cU10ON0y2/5oOVmPJ43s2lTwA==}
     dev: false
 
-  /@formatjs/intl-localematcher@0.6.1:
-    resolution: {integrity: sha512-ePEgLgVCqi2BBFnTMWPfIghu6FkbZnnBVhO2sSxvLfrdFw7wCHAHiDoM2h4NRgjbaY7+B7HgOLZGkK187pZTZg==}
+  /@formatjs/intl-localematcher@0.8.13:
+    resolution: {integrity: sha512-kHEAFOkeJSPNi7c5PaKaRjxcBrJwzzt81ifUu+8uve1EDW/VJl83KsxmqgqNZLzcFEhSliZGvx3+pk/RH0IOmg==}
     dependencies:
-      tslib: 2.8.1
+      '@formatjs/fast-memoize': 3.1.7
     dev: false
 
   /@hookform/resolvers@3.9.1(react-hook-form@7.54.1):
@@ -283,222 +266,284 @@ packages:
       react-hook-form: 7.54.1(react@19.0.0)
     dev: false
 
-  /@img/sharp-darwin-arm64@0.33.5:
-    resolution: {integrity: sha512-UT4p+iz/2H4twwAoLCqfA9UH5pI6DggwKEGuaPy7nCVQ8ZsiY5PIcrRvD1DzuY3qYL07NtIQcWnBSY/heikIFQ==}
-    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+  /@img/colour@1.1.0:
+    resolution: {integrity: sha512-Td76q7j57o/tLVdgS746cYARfSyxk8iEfRxewL9h4OMzYhbW4TAcppl0mT4eyqXddh6L/jwoM75mo7ixa/pCeQ==}
+    engines: {node: '>=18'}
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@img/sharp-darwin-arm64@0.35.3:
+    resolution: {integrity: sha512-RMnFX7YQsMoh7lWfcM4NEHHymBX/rLuKNPVM84XE9ONPcaSCDgE7CHIHpSgPcO2xcRthgBy1HfNO319mwhIAkg==}
+    engines: {node: '>=20.9.0'}
     cpu: [arm64]
     os: [darwin]
     requiresBuild: true
     optionalDependencies:
-      '@img/sharp-libvips-darwin-arm64': 1.0.4
+      '@img/sharp-libvips-darwin-arm64': 1.3.2
     dev: false
     optional: true
 
-  /@img/sharp-darwin-x64@0.33.5:
-    resolution: {integrity: sha512-fyHac4jIc1ANYGRDxtiqelIbdWkIuQaI84Mv45KvGRRxSAa7o7d1ZKAOBaYbnepLC1WqxfpimdeWfvqqSGwR2Q==}
-    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+  /@img/sharp-darwin-x64@0.35.3:
+    resolution: {integrity: sha512-Xo+5uFBtLN0BKqieTxiFzFPQAUlBbbH5iBKyRX/z1JrbnYsHTfKJnUfL8+p2TPXr1pXqao4eeL4Rl144uDpK9w==}
+    engines: {node: '>=20.9.0'}
     cpu: [x64]
     os: [darwin]
     requiresBuild: true
     optionalDependencies:
-      '@img/sharp-libvips-darwin-x64': 1.0.4
+      '@img/sharp-libvips-darwin-x64': 1.3.2
     dev: false
     optional: true
 
-  /@img/sharp-libvips-darwin-arm64@1.0.4:
-    resolution: {integrity: sha512-XblONe153h0O2zuFfTAbQYAX2JhYmDHeWikp1LM9Hul9gVPjFY427k6dFEcOL72O01QxQsWi761svJ/ev9xEDg==}
+  /@img/sharp-freebsd-wasm32@0.35.3:
+    resolution: {integrity: sha512-lUxcqWIj2wMQ9BrwNjngcr1gWUr5xgaGThBRqPPalIC2n67Cqj1uPh8NnA/ZhAg8hUbKl+kVHKwgUIwe6ZYPrg==}
+    engines: {node: '>=20.9.0'}
+    os: [freebsd]
+    requiresBuild: true
+    dependencies:
+      '@img/sharp-wasm32': 0.35.3
+    dev: false
+    optional: true
+
+  /@img/sharp-libvips-darwin-arm64@1.3.2:
+    resolution: {integrity: sha512-9J6ypZFpQBj4YnePGoq/S38w6nz+vqg5WZLrLGY4YuSemdMq47GMLBPO42MzwdGwpg/agZ7xzZcFHa48xlywfg==}
     cpu: [arm64]
     os: [darwin]
     requiresBuild: true
     dev: false
     optional: true
 
-  /@img/sharp-libvips-darwin-x64@1.0.4:
-    resolution: {integrity: sha512-xnGR8YuZYfJGmWPvmlunFaWJsb9T/AO2ykoP3Fz/0X5XV2aoYBPkX6xqCQvUTKKiLddarLaxpzNe+b1hjeWHAQ==}
+  /@img/sharp-libvips-darwin-x64@1.3.2:
+    resolution: {integrity: sha512-m2pW1n6cns9VaubNwsZ+c3CRYjxNQWgJ5gPlnL1nbBcpkBvFm6SCFN5o0psFHI8w9n11NKhFkeEDns98tiqbEw==}
     cpu: [x64]
     os: [darwin]
     requiresBuild: true
     dev: false
     optional: true
 
-  /@img/sharp-libvips-linux-arm64@1.0.4:
-    resolution: {integrity: sha512-9B+taZ8DlyyqzZQnoeIvDVR/2F4EbMepXMc/NdVbkzsJbzkUjhXv/70GQJ7tdLA4YJgNP25zukcxpX2/SueNrA==}
+  /@img/sharp-libvips-linux-arm64@1.3.2:
+    resolution: {integrity: sha512-dqVSFynCox4C/J8kT16V7SIFAns0IjgLwkvYT7p8LQVmJ5OS5b6tI9IGflxTeuBS//zXeFIUbwt5dwxyZ17cnA==}
     cpu: [arm64]
     os: [linux]
     requiresBuild: true
     dev: false
     optional: true
 
-  /@img/sharp-libvips-linux-arm@1.0.5:
-    resolution: {integrity: sha512-gvcC4ACAOPRNATg/ov8/MnbxFDJqf/pDePbBnuBDcjsI8PssmjoKMAz4LtLaVi+OnSb5FK/yIOamqDwGmXW32g==}
+  /@img/sharp-libvips-linux-arm@1.3.2:
+    resolution: {integrity: sha512-1eMLzy92I4J6rmi4mAT8yC3HxOtniyGELlzGbNMLLeqe052ahFQ0h6LFq+lh5DsDIdYViIDst08abvSbcEdLXQ==}
     cpu: [arm]
     os: [linux]
     requiresBuild: true
     dev: false
     optional: true
 
-  /@img/sharp-libvips-linux-s390x@1.0.4:
-    resolution: {integrity: sha512-u7Wz6ntiSSgGSGcjZ55im6uvTrOxSIS8/dgoVMoiGE9I6JAfU50yH5BoDlYA1tcuGS7g/QNtetJnxA6QEsCVTA==}
+  /@img/sharp-libvips-linux-ppc64@1.3.2:
+    resolution: {integrity: sha512-3z0NHDxD6n5I9gc05U1eW1AyRm+Gznzq3naMrthPNqE6oYykcogW0l/jfpJdjYnuNl8R7yI9pNbE1XiUeyq0Aw==}
+    cpu: [ppc64]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@img/sharp-libvips-linux-riscv64@1.3.2:
+    resolution: {integrity: sha512-bsb4rI+NldGOsXuej2r8OdSS8+zXDVaCWxyWrcv6kneTOlgAHtZABRzBBCwdsPiD90J4myNJuHpg6kA20ImW/w==}
+    cpu: [riscv64]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@img/sharp-libvips-linux-s390x@1.3.2:
+    resolution: {integrity: sha512-/ABshyj8gCpyIrNXnHn4LorDJ0HHm1VhXPBlxZ8zAtfVPAaSafXPGn+sUSIRiwaSBy0mmFjSjiXI5mkcwdChKQ==}
     cpu: [s390x]
     os: [linux]
     requiresBuild: true
     dev: false
     optional: true
 
-  /@img/sharp-libvips-linux-x64@1.0.4:
-    resolution: {integrity: sha512-MmWmQ3iPFZr0Iev+BAgVMb3ZyC4KeFc3jFxnNbEPas60e1cIfevbtuyf9nDGIzOaW9PdnDciJm+wFFaTlj5xYw==}
+  /@img/sharp-libvips-linux-x64@1.3.2:
+    resolution: {integrity: sha512-ITPEtgffGJ0S6G9dRyw/366tJQqFRcHWPHhC+Stpg3Z8AEMrDrTr2lhdz4f/Y/HMbRh//7Z5mBzEpVdi62Oc3w==}
     cpu: [x64]
     os: [linux]
     requiresBuild: true
     dev: false
     optional: true
 
-  /@img/sharp-libvips-linuxmusl-arm64@1.0.4:
-    resolution: {integrity: sha512-9Ti+BbTYDcsbp4wfYib8Ctm1ilkugkA/uscUn6UXK1ldpC1JjiXbLfFZtRlBhjPZ5o1NCLiDbg8fhUPKStHoTA==}
+  /@img/sharp-libvips-linuxmusl-arm64@1.3.2:
+    resolution: {integrity: sha512-zE9EdiUzUmg5mDT5a1rk5fYJ6GWPloTwWBYDS14naqHsL+EaMpDj1AWnpLgh3u0YCORv2Tt50wrcrpYqkP97Kw==}
     cpu: [arm64]
     os: [linux]
     requiresBuild: true
     dev: false
     optional: true
 
-  /@img/sharp-libvips-linuxmusl-x64@1.0.4:
-    resolution: {integrity: sha512-viYN1KX9m+/hGkJtvYYp+CCLgnJXwiQB39damAO7WMdKWlIhmYTfHjwSbQeUK/20vY154mwezd9HflVFM1wVSw==}
+  /@img/sharp-libvips-linuxmusl-x64@1.3.2:
+    resolution: {integrity: sha512-m0lrLiUt+lBYnCFr8qV/65yMR4E/c7/wf78I5eKTdkEakFAlZ9QlzEM3QIhhAwVeUhLAHLcCq7a7Vszq/oFNZQ==}
     cpu: [x64]
     os: [linux]
     requiresBuild: true
     dev: false
     optional: true
 
-  /@img/sharp-linux-arm64@0.33.5:
-    resolution: {integrity: sha512-JMVv+AMRyGOHtO1RFBiJy/MBsgz0x4AWrT6QoEVVTyh1E39TrCUpTRI7mx9VksGX4awWASxqCYLCV4wBZHAYxA==}
-    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+  /@img/sharp-linux-arm64@0.35.3:
+    resolution: {integrity: sha512-QgKDspHPnrU+GQ55XPhGwyhC8acLVOOSyAvo1oVfFmrIXLkDNmGWzAfDZ4xK8oSA1qBQrALcHX0G5UZni/SuFQ==}
+    engines: {node: '>=20.9.0'}
     cpu: [arm64]
     os: [linux]
     requiresBuild: true
     optionalDependencies:
-      '@img/sharp-libvips-linux-arm64': 1.0.4
+      '@img/sharp-libvips-linux-arm64': 1.3.2
     dev: false
     optional: true
 
-  /@img/sharp-linux-arm@0.33.5:
-    resolution: {integrity: sha512-JTS1eldqZbJxjvKaAkxhZmBqPRGmxgu+qFKSInv8moZ2AmT5Yib3EQ1c6gp493HvrvV8QgdOXdyaIBrhvFhBMQ==}
-    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+  /@img/sharp-linux-arm@0.35.3:
+    resolution: {integrity: sha512-affVWCTLooy8TSxbDx2qkzuDeaWLNVBA+P//FNBirHsXpP2fuBhk5AuboYUnrDnzoXes8GFjpTx0SBFOCRg+FA==}
+    engines: {node: '>=20.9.0'}
     cpu: [arm]
     os: [linux]
     requiresBuild: true
     optionalDependencies:
-      '@img/sharp-libvips-linux-arm': 1.0.5
+      '@img/sharp-libvips-linux-arm': 1.3.2
+    dev: false
+    optional: true
+
+  /@img/sharp-linux-ppc64@0.35.3:
+    resolution: {integrity: sha512-sMd8rDxmpLOwv/7N44klFjOD5DUO7FLdjiXDI0hoxYaf7Ar262dQIEkosE98bps+5HPLtp/EvNqeqQtOycP/IA==}
+    engines: {node: '>=20.9.0'}
+    cpu: [ppc64]
+    os: [linux]
+    requiresBuild: true
+    optionalDependencies:
+      '@img/sharp-libvips-linux-ppc64': 1.3.2
+    dev: false
+    optional: true
+
+  /@img/sharp-linux-riscv64@0.35.3:
+    resolution: {integrity: sha512-0Eob78yjlYPfL5vMNWAW55l3R9Y6BQS/gOfe0ZcP9mEz9ohhKSt4im1hayiknXgf8AWrFqMvJcKIdmLmEe7yeQ==}
+    engines: {node: '>=20.9.0'}
+    cpu: [riscv64]
+    os: [linux]
+    requiresBuild: true
+    optionalDependencies:
+      '@img/sharp-libvips-linux-riscv64': 1.3.2
     dev: false
     optional: true
 
-  /@img/sharp-linux-s390x@0.33.5:
-    resolution: {integrity: sha512-y/5PCd+mP4CA/sPDKl2961b+C9d+vPAveS33s6Z3zfASk2j5upL6fXVPZi7ztePZ5CuH+1kW8JtvxgbuXHRa4Q==}
-    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+  /@img/sharp-linux-s390x@0.35.3:
+    resolution: {integrity: sha512-KgAxQ0DxpNOq1rG2t5cgTgShJFGSuU7XO45cqC+1NVOuZnP6tlgZRuSYOfNupGkHID0o3cJOsw4DVeJpMovcGw==}
+    engines: {node: '>=20.9.0'}
     cpu: [s390x]
     os: [linux]
     requiresBuild: true
     optionalDependencies:
-      '@img/sharp-libvips-linux-s390x': 1.0.4
+      '@img/sharp-libvips-linux-s390x': 1.3.2
     dev: false
     optional: true
 
-  /@img/sharp-linux-x64@0.33.5:
-    resolution: {integrity: sha512-opC+Ok5pRNAzuvq1AG0ar+1owsu842/Ab+4qvU879ippJBHvyY5n2mxF1izXqkPYlGuP/M556uh53jRLJmzTWA==}
-    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+  /@img/sharp-linux-x64@0.35.3:
+    resolution: {integrity: sha512-8pqvxubL2PGdhlPy6GLqzDYMUjyRmKAwKHYKixpdJYBUK7PJ0C029XdsnpFIdgRZG68fZiGdHVWcKPvtiPB4cA==}
+    engines: {node: '>=20.9.0'}
     cpu: [x64]
     os: [linux]
     requiresBuild: true
     optionalDependencies:
-      '@img/sharp-libvips-linux-x64': 1.0.4
+      '@img/sharp-libvips-linux-x64': 1.3.2
     dev: false
     optional: true
 
-  /@img/sharp-linuxmusl-arm64@0.33.5:
-    resolution: {integrity: sha512-XrHMZwGQGvJg2V/oRSUfSAfjfPxO+4DkiRh6p2AFjLQztWUuY/o8Mq0eMQVIY7HJ1CDQUJlxGGZRw1a5bqmd1g==}
-    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+  /@img/sharp-linuxmusl-arm64@0.35.3:
+    resolution: {integrity: sha512-Vz0iQjzzcSX3HCbfwFfCSG/9SCIqyO0mH2sXyiHaAYfBk0cRsCWXRyQYX0ovCK/PAQBbTzQ0dsPQHh5MAFL59w==}
+    engines: {node: '>=20.9.0'}
     cpu: [arm64]
     os: [linux]
     requiresBuild: true
     optionalDependencies:
-      '@img/sharp-libvips-linuxmusl-arm64': 1.0.4
+      '@img/sharp-libvips-linuxmusl-arm64': 1.3.2
     dev: false
     optional: true
 
-  /@img/sharp-linuxmusl-x64@0.33.5:
-    resolution: {integrity: sha512-WT+d/cgqKkkKySYmqoZ8y3pxx7lx9vVejxW/W4DOFMYVSkErR+w7mf2u8m/y4+xHe7yY9DAXQMWQhpnMuFfScw==}
-    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+  /@img/sharp-linuxmusl-x64@0.35.3:
+    resolution: {integrity: sha512-6O1NPKcDVj9QEdg7Hx549EX8U0rp6yXQERqru6yRN7fGBn32UvIRJUlWnk+8xDCiG76hXVBbX82NZ/ZKr0euIg==}
+    engines: {node: '>=20.9.0'}
     cpu: [x64]
     os: [linux]
     requiresBuild: true
     optionalDependencies:
-      '@img/sharp-libvips-linuxmusl-x64': 1.0.4
+      '@img/sharp-libvips-linuxmusl-x64': 1.3.2
     dev: false
     optional: true
 
-  /@img/sharp-wasm32@0.33.5:
-    resolution: {integrity: sha512-ykUW4LVGaMcU9lu9thv85CbRMAwfeadCJHRsg2GmeRa/cJxsVY9Rbd57JcMxBkKHag5U/x7TSBpScF4U8ElVzg==}
-    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+  /@img/sharp-wasm32@0.35.3:
+    resolution: {integrity: sha512-cZ0XkcYGpHZkqW6iCkqTcmUC0CD9DhD5d/qeZlZkfRBn6GnHniZXLUo5+9xw8Iv76YE6LQFN9YNBlKREcCG76w==}
+    engines: {node: '>=20.9.0'}
+    requiresBuild: true
+    dependencies:
+      '@emnapi/runtime': 1.11.2
+    dev: false
+    optional: true
+
+  /@img/sharp-webcontainers-wasm32@0.35.3:
+    resolution: {integrity: sha512-2rnq7bX3NzeR2T4YWgz8qiG4h3TSdMe+vN1iQXpJleSJ3SM5zQ8Fy2SyyXAWlbxpEZ2Y+Z4u1BePgJEYbSy80Q==}
+    engines: {node: '>=20.9.0'}
     cpu: [wasm32]
     requiresBuild: true
     dependencies:
-      '@emnapi/runtime': 1.4.5
+      '@img/sharp-wasm32': 0.35.3
+    dev: false
+    optional: true
+
+  /@img/sharp-win32-arm64@0.35.3:
+    resolution: {integrity: sha512-4bPwFdMbeC4JQ8L8LOyWp6nsHcboP5fxkp6iPOXz2Vg49R42TuMs2whkJ5OAP4/Ul035qOzy0AecOF9VOscn4w==}
+    engines: {node: '>=20.9.0'}
+    cpu: [arm64]
+    os: [win32]
+    requiresBuild: true
     dev: false
     optional: true
 
-  /@img/sharp-win32-ia32@0.33.5:
-    resolution: {integrity: sha512-T36PblLaTwuVJ/zw/LaH0PdZkRz5rd3SmMHX8GSmR7vtNSP5Z6bQkExdSK7xGWyxLw4sUknBuugTelgw2faBbQ==}
-    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+  /@img/sharp-win32-ia32@0.35.3:
+    resolution: {integrity: sha512-r53mXsBN6lFUDiST764SvgwUdHAqM4rPAiDzAmf4fLoB6X/rkfyTrLCg6+g17wJJiCmB3JYgHuUldCWUIRFSXw==}
+    engines: {node: ^20.9.0}
     cpu: [ia32]
     os: [win32]
     requiresBuild: true
     dev: false
     optional: true
 
-  /@img/sharp-win32-x64@0.33.5:
-    resolution: {integrity: sha512-MpY/o8/8kj+EcnxwvrP4aTJSWw/aZ7JIGR4aBeZkZw5B7/Jn+tY9/VNwtcoGmdT7GfggGIU4kygOMSbYnOrAbg==}
-    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+  /@img/sharp-win32-x64@0.35.3:
+    resolution: {integrity: sha512-D4y1vNeZrIIJCN+uHaWVtH86B+aCrdMYYjicy9pXHvbGZeGYLLSd3wdVuC37FxVXlU1ARsk84eKWfWMXGYEqvA==}
+    engines: {node: '>=20.9.0'}
     cpu: [x64]
     os: [win32]
     requiresBuild: true
     dev: false
     optional: true
 
-  /@isaacs/cliui@8.0.2:
-    resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==}
-    engines: {node: '>=12'}
+  /@jridgewell/gen-mapping@0.3.13:
+    resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==}
     dependencies:
-      string-width: 5.1.2
-      string-width-cjs: /string-width@4.2.3
-      strip-ansi: 7.1.0
-      strip-ansi-cjs: /strip-ansi@6.0.1
-      wrap-ansi: 8.1.0
-      wrap-ansi-cjs: /wrap-ansi@7.0.0
-
-  /@jridgewell/gen-mapping@0.3.12:
-    resolution: {integrity: sha512-OuLGC46TjB5BbN1dH8JULVVZY4WTdkF7tV9Ys6wLL1rubZnCMstOhNHueU5bLCrnRuDhKPDM4g6sw4Bel5Gzqg==}
-    dependencies:
-      '@jridgewell/sourcemap-codec': 1.5.4
-      '@jridgewell/trace-mapping': 0.3.29
+      '@jridgewell/sourcemap-codec': 1.5.5
+      '@jridgewell/trace-mapping': 0.3.31
 
   /@jridgewell/resolve-uri@3.1.2:
     resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==}
     engines: {node: '>=6.0.0'}
 
-  /@jridgewell/sourcemap-codec@1.5.4:
-    resolution: {integrity: sha512-VT2+G1VQs/9oz078bLrYbecdZKs912zQlkelYpuf+SXF+QvZDYJlbx/LSx+meSAwdDFnF8FVXW92AVjjkVmgFw==}
+  /@jridgewell/sourcemap-codec@1.5.5:
+    resolution: {integrity: sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==}
 
-  /@jridgewell/trace-mapping@0.3.29:
-    resolution: {integrity: sha512-uw6guiW/gcAGPDhLmd77/6lW8QLeiV5RUTsAX46Db6oLhGaVj4lhnPwb184s1bkc8kdVg/+h988dro8GRDpmYQ==}
+  /@jridgewell/trace-mapping@0.3.31:
+    resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==}
     dependencies:
       '@jridgewell/resolve-uri': 3.1.2
-      '@jridgewell/sourcemap-codec': 1.5.4
+      '@jridgewell/sourcemap-codec': 1.5.5
 
-  /@next/env@15.2.4:
-    resolution: {integrity: sha512-+SFtMgoiYP3WoSswuNmxJOCwi06TdWE733D+WPjpXIe4LXGULwEaofiiAy6kbS0+XjM5xF5n3lKuBwN2SnqD9g==}
+  /@next/env@15.5.21:
+    resolution: {integrity: sha512-hjJI/GfrjWHgNguRIBzItjRRu0m3Nrz17GhxsjuHfjIvg9hyg3239REd2dpI+bpMTFuVrVprHzEQ19m++cDtbw==}
     dev: false
 
-  /@next/swc-darwin-arm64@15.2.4:
-    resolution: {integrity: sha512-1AnMfs655ipJEDC/FHkSr0r3lXBgpqKo4K1kiwfUf3iE68rDFXZ1TtHdMvf7D0hMItgDZ7Vuq3JgNMbt/+3bYw==}
+  /@next/swc-darwin-arm64@15.5.21:
+    resolution: {integrity: sha512-ZfjqPEdi6TRC/fWx7UDbwb1fbVgyh2uD5tVTRKIDZDlYM+UNuE/LafDG2fwuAoZilADpABh46OY/F5qf9JjqLQ==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [darwin]
@@ -506,8 +551,8 @@ packages:
     dev: false
     optional: true
 
-  /@next/swc-darwin-x64@15.2.4:
-    resolution: {integrity: sha512-3qK2zb5EwCwxnO2HeO+TRqCubeI/NgCe+kL5dTJlPldV/uwCnUgC7VbEzgmxbfrkbjehL4H9BPztWOEtsoMwew==}
+  /@next/swc-darwin-x64@15.5.21:
+    resolution: {integrity: sha512-TlCf1NpxgQLzTrexuev75xwmNCJMd1/qkJpTVP1GRRcih93hlIBn1P72hkh8T0gnRFr6BmWksQtbyG3jT6jnww==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [darwin]
@@ -515,8 +560,8 @@ packages:
     dev: false
     optional: true
 
-  /@next/swc-linux-arm64-gnu@15.2.4:
-    resolution: {integrity: sha512-HFN6GKUcrTWvem8AZN7tT95zPb0GUGv9v0d0iyuTb303vbXkkbHDp/DxufB04jNVD+IN9yHy7y/6Mqq0h0YVaQ==}
+  /@next/swc-linux-arm64-gnu@15.5.21:
+    resolution: {integrity: sha512-LXRsq1p+HvHSi7ygwNcSEEcK0zuo5jS75ZlqFHtOH+LF7qntXAJVJxah+1Pi/GyBm7EpkwU7m4EgbvIKrMqm9A==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
@@ -524,8 +569,8 @@ packages:
     dev: false
     optional: true
 
-  /@next/swc-linux-arm64-musl@15.2.4:
-    resolution: {integrity: sha512-Oioa0SORWLwi35/kVB8aCk5Uq+5/ZIumMK1kJV+jSdazFm2NzPDztsefzdmzzpx5oGCJ6FkUC7vkaUseNTStNA==}
+  /@next/swc-linux-arm64-musl@15.5.21:
+    resolution: {integrity: sha512-hyGixhFxpDKjqoev6l4KlcRBlt9AXWrGhDZwmwg49sMJM5tnKQPSi+SEj9+e5n+l/bthRGZUdh59GKIs6lQPRw==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
@@ -533,8 +578,8 @@ packages:
     dev: false
     optional: true
 
-  /@next/swc-linux-x64-gnu@15.2.4:
-    resolution: {integrity: sha512-yb5WTRaHdkgOqFOZiu6rHV1fAEK0flVpaIN2HB6kxHVSy/dIajWbThS7qON3W9/SNOH2JWkVCyulgGYekMePuw==}
+  /@next/swc-linux-x64-gnu@15.5.21:
+    resolution: {integrity: sha512-qfE+YfOba6S2+13e8qn1/UozDVNZ2clBlrs8UtDoax4s8ediu6sq93z66OEHUYlb69Tffh5JTNkgtsAKiSuugg==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
@@ -542,8 +587,8 @@ packages:
     dev: false
     optional: true
 
-  /@next/swc-linux-x64-musl@15.2.4:
-    resolution: {integrity: sha512-Dcdv/ix6srhkM25fgXiyOieFUkz+fOYkHlydWCtB0xMST6X9XYI3yPDKBZt1xuhOytONsIFJFB08xXYsxUwJLw==}
+  /@next/swc-linux-x64-musl@15.5.21:
+    resolution: {integrity: sha512-BXLGG+EvIwp/Rrgl6HY8sqvD6BOUOIRz8/naDbeLNX7mlA5H2XRcL6MW/0IGnJISfj5BA9gNhFyJj5yOoiIDJQ==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
@@ -551,8 +596,8 @@ packages:
     dev: false
     optional: true
 
-  /@next/swc-win32-arm64-msvc@15.2.4:
-    resolution: {integrity: sha512-dW0i7eukvDxtIhCYkMrZNQfNicPDExt2jPb9AZPpL7cfyUo7QSNl1DjsHjmmKp6qNAqUESyT8YFl/Aw91cNJJg==}
+  /@next/swc-win32-arm64-msvc@15.5.21:
+    resolution: {integrity: sha512-tNGNOlT0Wn7E4IMsSnufjXN/l2L2/AGdLLpa2vzS89SYCBuihgLn3ngLsIrvndAnWo9nAkus+4gZHTI/Ijx9HA==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [win32]
@@ -560,8 +605,8 @@ packages:
     dev: false
     optional: true
 
-  /@next/swc-win32-x64-msvc@15.2.4:
-    resolution: {integrity: sha512-SbnWkJmkS7Xl3kre8SdMF6F/XDh1DTFEhp0jRTj/uB8iPKoU2bb2NDfcu+iifv1+mxQEd1g2vvSxcZbXSKyWiQ==}
+  /@next/swc-win32-x64-msvc@15.5.21:
+    resolution: {integrity: sha512-DmIdWmC9p4rdNIiQqo8ap0+Cnj6kKtTZnuSCxoYydSc8sgpDgAg9wFhxplunak9imLV0pTvc5WVCOHwm5eHLtQ==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [win32]
@@ -585,14 +630,140 @@ packages:
     engines: {node: '>= 8'}
     dependencies:
       '@nodelib/fs.scandir': 2.1.5
-      fastq: 1.19.1
+      fastq: 1.20.1
 
-  /@pkgjs/parseargs@0.11.0:
-    resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
-    engines: {node: '>=14'}
+  /@parcel/watcher-android-arm64@2.6.0:
+    resolution: {integrity: sha512-trgpLSCKRC/huFjXX/Smh+0sWe4+YtKfktIToiMl59ghz7z+qkH6kMvNnUbLyRs9N11t8l4svSCs1+5B3rOAhA==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm64]
+    os: [android]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@parcel/watcher-darwin-arm64@2.6.0:
+    resolution: {integrity: sha512-Y3QV0gl7Q1zbfueunkWIERICbEojQFCgpyG7YqOGNFLsckXyI1xu9mAIUpKY9QBYzBtSkN8dBPwd3yiAO9ovMw==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm64]
+    os: [darwin]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@parcel/watcher-darwin-x64@2.6.0:
+    resolution: {integrity: sha512-Ohv6OpzhUfKYD7Beb8kDvG0jbIxORCYY1JRdZnaBtnjjkJxgD7ZVL0nw2sCYd0yTMKTvz3nnTnOF3cDifK+kvw==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [x64]
+    os: [darwin]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@parcel/watcher-freebsd-x64@2.6.0:
+    resolution: {integrity: sha512-5HmXvDgs8VK+74jF9y9/2FE3/OnlcKmc56tjmSrEuZjpSZOGL+fvAu+HKJBdPs9uwoP2hE6TlSUpXZ/C5jUFmQ==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [x64]
+    os: [freebsd]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@parcel/watcher-linux-arm-glibc@2.6.0:
+    resolution: {integrity: sha512-Ps/hui3A+vMbjdqlqAowK2ZL8+BO8dBjxeWXj6npTBs3jx4wWmbPpaLuqwrQrSqIVMCnpWo238bJ1U37GhQOYg==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@parcel/watcher-linux-arm-musl@2.6.0:
+    resolution: {integrity: sha512-9c6AUHgHoG+IY88MRIHupztQiQnrbqHYQjkM2btA+Bf/wQnQMuiD0Wfk1EVv3TlNT3x41uU71rn6E4xh/+zvkw==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@parcel/watcher-linux-arm64-glibc@2.6.0:
+    resolution: {integrity: sha512-yHRqS2owEXe6Hic9z6Mh1ECsCd+ODVOGvZDyciqRd21+v+o+DnXMOrw50DSpIG2sb8GPEaPPmfeCAWKPJdq46g==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@parcel/watcher-linux-arm64-musl@2.6.0:
+    resolution: {integrity: sha512-WhB2e/V7rqdHHWZusBSPuy5Ei8S6lSz6FE5TKKQz5h3a0O+C+mhY7vxU9b/stqvMb8beLnPY82ZrFTLKs+SrKA==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@parcel/watcher-linux-x64-glibc@2.6.0:
+    resolution: {integrity: sha512-ulGE6x6Oz6iAwg75T8YQSoguBWasniIbX+QWpaYPcCnDOpdWX3k+4xbEYPZVLxOuoJI+svJJPD3sEj8G7lrQ3A==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@parcel/watcher-linux-x64-musl@2.6.0:
+    resolution: {integrity: sha512-tkBYKt7YQrjIJWYDnto2YgO8MRkjlMTSNoRHzsXinBqbLdeOM3L32wPZJvIZxqaLMfSlS/4sUjH/6STVP/XDLw==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [x64]
+    os: [linux]
     requiresBuild: true
+    dev: false
     optional: true
 
+  /@parcel/watcher-win32-arm64@2.6.0:
+    resolution: {integrity: sha512-gIZAP23jaHjGWasY/TY6yL7NHFClf0Ga7FN+iINvk+KN94rhm94lYZhFsbYFNcA04/onvGD9kKmiJLJB2HbNwQ==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm64]
+    os: [win32]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@parcel/watcher-win32-x64@2.6.0:
+    resolution: {integrity: sha512-cA+/pXV2YkfxlIcXOQ5fSWqAzzPyD78/x5qbK/I0vUkrlYHA8TIz+MXjAbGouguKVSI4bOmkTSJ1/poVSsgt+A==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [x64]
+    os: [win32]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@parcel/watcher@2.6.0:
+    resolution: {integrity: sha512-7FNeNl8NCE7aINx7WXiKQrPYZWC/hvrTsmk6zmxbI7LTXE7hVek/n8AfVgpe2y82zl3w0HvCHN0bVKMBoJcC0w==}
+    engines: {node: '>= 10.0.0'}
+    requiresBuild: true
+    dependencies:
+      detect-libc: 2.1.2
+      is-glob: 4.0.3
+      node-addon-api: 7.1.1
+      picomatch: 4.0.5
+    optionalDependencies:
+      '@parcel/watcher-android-arm64': 2.6.0
+      '@parcel/watcher-darwin-arm64': 2.6.0
+      '@parcel/watcher-darwin-x64': 2.6.0
+      '@parcel/watcher-freebsd-x64': 2.6.0
+      '@parcel/watcher-linux-arm-glibc': 2.6.0
+      '@parcel/watcher-linux-arm-musl': 2.6.0
+      '@parcel/watcher-linux-arm64-glibc': 2.6.0
+      '@parcel/watcher-linux-arm64-musl': 2.6.0
+      '@parcel/watcher-linux-x64-glibc': 2.6.0
+      '@parcel/watcher-linux-x64-musl': 2.6.0
+      '@parcel/watcher-win32-arm64': 2.6.0
+      '@parcel/watcher-win32-x64': 2.6.0
+    dev: false
+
   /@radix-ui/number@1.1.0:
     resolution: {integrity: sha512-V3gRzhVNU1ldS5XhAPTom1fOIo4ccrjjJgmE+LI2h/WaFpHmx0MQApT+KZHnx8abG6Avtfcz4WoEciMnpFT3HQ==}
     dev: false
@@ -1832,6 +2003,141 @@ packages:
     resolution: {integrity: sha512-bXHSaW5jRTmke9Vd0h5P7BtWZG9Znqb8gSDxZnxaGSJnGwPLDPfS+3g0BKzeWqzgZPsIVZkM7m2tbo18cm5HBw==}
     dev: false
 
+  /@swc/core-darwin-arm64@1.15.46:
+    resolution: {integrity: sha512-IsISIT22EfktVJrlvIpnAxG2u/A9aob9l99HMlx80x72WlFmFPk1V3UhkEzx86eJP8hw049KTFv/RISho2cq2Q==}
+    engines: {node: '>=10'}
+    cpu: [arm64]
+    os: [darwin]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@swc/core-darwin-x64@1.15.46:
+    resolution: {integrity: sha512-4Tj4ppVIPCmUMpmGFiGtyEriwLyJ+yi/US4WfBrP/ok8COGddDZXLEzQETnKyK46mjvr1v0jevrS23zjoff7vA==}
+    engines: {node: '>=10'}
+    cpu: [x64]
+    os: [darwin]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@swc/core-linux-arm-gnueabihf@1.15.46:
+    resolution: {integrity: sha512-i8tUGnNjyOgMmfmgFSg4aeJLQoFyfpIHK5FjpQAwpRyQIqEUB2w1e8zIDQzY1WhOxx8NoS1S5iUL813Un4Sf5A==}
+    engines: {node: '>=10'}
+    cpu: [arm]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@swc/core-linux-arm64-gnu@1.15.46:
+    resolution: {integrity: sha512-c0OnhqzdhfOvv6qhNCcByepB+sNYOGZyhtr2Qa6ZCHvAWTYhSRw4j/u92Stue9PbZ/6q74b9nHzi76+kVzqQHQ==}
+    engines: {node: '>=10'}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@swc/core-linux-arm64-musl@1.15.46:
+    resolution: {integrity: sha512-imyRpNEcUzFQFV2LE4jL68ErvmKEuZCbvZru77iQREunJ+bR4i658cupTgtG1mLYM3F1Tzy3Sb9xYb02KghWTg==}
+    engines: {node: '>=10'}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@swc/core-linux-ppc64-gnu@1.15.46:
+    resolution: {integrity: sha512-ctEfcl/HcUeomK33cbySiHZm98GEDIxTm1EkpBsYCiHxElYBzvTXVeuQT2YwbUXn9XCrjiw4ipyUNk33k26qRg==}
+    engines: {node: '>=10'}
+    cpu: [ppc64]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@swc/core-linux-s390x-gnu@1.15.46:
+    resolution: {integrity: sha512-DxlMdnt84TtRVTv7WL/thWyz9+QU8QZNNoAP9rrk0P68LziuhfePp8MjQ44zIprpTHTsEwyziIuGUUN5iSC1bQ==}
+    engines: {node: '>=10'}
+    cpu: [s390x]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@swc/core-linux-x64-gnu@1.15.46:
+    resolution: {integrity: sha512-SKxI7J6t90XPl8hRUqtJi9NfGdunN/E/vZMc7Bc0figeRdOPDBT+Tm8g7cx9xM0T0mewh2l+8dewa3Am27/P+A==}
+    engines: {node: '>=10'}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@swc/core-linux-x64-musl@1.15.46:
+    resolution: {integrity: sha512-qj9T6B7bosI0VEsrWOVXZN1OXxS8Tp63ywyrLxNdOycnUtLdkgYcoBsN5y8ImnDDsnwrEWZOy1e+J4xSe7mA3Q==}
+    engines: {node: '>=10'}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@swc/core-win32-arm64-msvc@1.15.46:
+    resolution: {integrity: sha512-8p7l4c3LU+eA5g9Et1JPhNeMC1oQwXTGU+uah8DPIBX7YXzqswvaBtyKVmXefVGi/DJU1x3YJsc3mbAp9aWzSQ==}
+    engines: {node: '>=10'}
+    cpu: [arm64]
+    os: [win32]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@swc/core-win32-ia32-msvc@1.15.46:
+    resolution: {integrity: sha512-tUEnfr3Bn9u6FOjUb3PN9p+09qZC2j+wNDLKHzXXZn22rqGcUqR/ohCRSS+nG9B9+X+U+3FewNEHJkTmdIvMjQ==}
+    engines: {node: '>=10'}
+    cpu: [ia32]
+    os: [win32]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@swc/core-win32-x64-msvc@1.15.46:
+    resolution: {integrity: sha512-Vux7UDzBJYQggSuPfcl2w9iu+IJpgpRCxHzgCaVkELnAXAE4XZMOTX9HNcaNiwfeIDqdu2rkr69RuDm6wY8neA==}
+    engines: {node: '>=10'}
+    cpu: [x64]
+    os: [win32]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@swc/core@1.15.46:
+    resolution: {integrity: sha512-Ri3em2mBpq3h2zSPliCYl63otDGqek8PPEfv2nWgRQEbZ/VBCNyypVTVQ6cEbTCXBhy+WE2T3fQb08moIyuYaw==}
+    engines: {node: '>=10'}
+    requiresBuild: true
+    peerDependencies:
+      '@swc/helpers': '>=0.5.17'
+    peerDependenciesMeta:
+      '@swc/helpers':
+        optional: true
+    dependencies:
+      '@swc/counter': 0.1.3
+      '@swc/types': 0.1.27
+    optionalDependencies:
+      '@swc/core-darwin-arm64': 1.15.46
+      '@swc/core-darwin-x64': 1.15.46
+      '@swc/core-linux-arm-gnueabihf': 1.15.46
+      '@swc/core-linux-arm64-gnu': 1.15.46
+      '@swc/core-linux-arm64-musl': 1.15.46
+      '@swc/core-linux-ppc64-gnu': 1.15.46
+      '@swc/core-linux-s390x-gnu': 1.15.46
+      '@swc/core-linux-x64-gnu': 1.15.46
+      '@swc/core-linux-x64-musl': 1.15.46
+      '@swc/core-win32-arm64-msvc': 1.15.46
+      '@swc/core-win32-ia32-msvc': 1.15.46
+      '@swc/core-win32-x64-msvc': 1.15.46
+    dev: false
+
   /@swc/counter@0.1.3:
     resolution: {integrity: sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==}
     dev: false
@@ -1842,6 +2148,12 @@ packages:
       tslib: 2.8.1
     dev: false
 
+  /@swc/types@0.1.27:
+    resolution: {integrity: sha512-K6h3iUlqeM946U4sXFYeahefR1YBbXJvko+hv8WS8/0BNJ4OHiHRywMnQUJCqkR7Y9+hqQ1TvEpiKqUhz7NEFg==}
+    dependencies:
+      '@swc/counter': 0.1.3
+    dev: false
+
   /@types/d3-array@3.2.1:
     resolution: {integrity: sha512-Y2Jn2idRrLzUfAKV2LyRImR+y4oa2AntrgID95SHJxuMUrkNXmanDSed71sRNZysveJVt1hLLemQZIady0FpEg==}
     dev: false
@@ -1888,7 +2200,6 @@ packages:
     resolution: {integrity: sha512-VT7KSYudcPOzP5Q0wfbowyNLaVR8QWUdw+088uFWwfvpY6uCWaXpqV6ieLAu9WBcnTa7H4Z5RLK8I5t2FuOcqw==}
     dependencies:
       undici-types: 6.11.1
-    dev: true
 
   /@types/react-dom@19.0.0:
     resolution: {integrity: sha512-1KfiQKsH1o00p9m5ag12axHQSb3FOU9H20UTrujVSkNhuCrRHiQWFqgEnTNK5ZNfnzZv8UWrnXVqCmCF9fgY3w==}
@@ -1900,24 +2211,6 @@ packages:
     dependencies:
       csstype: 3.1.3
 
-  /ansi-regex@5.0.1:
-    resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
-    engines: {node: '>=8'}
-
-  /ansi-regex@6.1.0:
-    resolution: {integrity: sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==}
-    engines: {node: '>=12'}
-
-  /ansi-styles@4.3.0:
-    resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
-    engines: {node: '>=8'}
-    dependencies:
-      color-convert: 2.0.1
-
-  /ansi-styles@6.2.1:
-    resolution: {integrity: sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==}
-    engines: {node: '>=12'}
-
   /any-promise@1.3.0:
     resolution: {integrity: sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==}
 
@@ -1926,7 +2219,7 @@ packages:
     engines: {node: '>= 8'}
     dependencies:
       normalize-path: 3.0.0
-      picomatch: 2.3.1
+      picomatch: 2.3.2
 
   /arg@5.0.2:
     resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==}
@@ -1938,34 +2231,26 @@ packages:
       tslib: 2.8.1
     dev: false
 
-  /autoprefixer@10.4.20(postcss@8.5.0):
+  /autoprefixer@10.4.20(postcss@8.5.22):
     resolution: {integrity: sha512-XY25y5xSv/wEoqzDyXXME4AFfkZI0P23z6Fs3YgymDnKJkCGOnkL0iTxCa85UTqaSgfcqyf3UA6+c7wUvx/16g==}
     engines: {node: ^10 || ^12 || >=14}
     hasBin: true
     peerDependencies:
-      postcss: ^8.1.0
+      postcss: 8.5.22
     dependencies:
       browserslist: 4.25.1
       caniuse-lite: 1.0.30001731
       fraction.js: 4.3.7
       normalize-range: 0.1.2
       picocolors: 1.1.1
-      postcss: 8.5.0
+      postcss: 8.5.22
       postcss-value-parser: 4.2.0
     dev: false
 
-  /balanced-match@1.0.2:
-    resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
-
   /binary-extensions@2.3.0:
     resolution: {integrity: sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==}
     engines: {node: '>=8'}
 
-  /brace-expansion@2.0.2:
-    resolution: {integrity: sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==}
-    dependencies:
-      balanced-match: 1.0.2
-
   /braces@3.0.3:
     resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
     engines: {node: '>=8'}
@@ -1983,13 +2268,6 @@ packages:
       update-browserslist-db: 1.1.3(browserslist@4.25.1)
     dev: false
 
-  /busboy@1.6.0:
-    resolution: {integrity: sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==}
-    engines: {node: '>=10.16.0'}
-    dependencies:
-      streamsearch: 1.1.0
-    dev: false
-
   /camelcase-css@2.0.1:
     resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==}
     engines: {node: '>= 6'}
@@ -1998,6 +2276,10 @@ packages:
     resolution: {integrity: sha512-lDdp2/wrOmTRWuoB5DpfNkC0rJDU8DqRa6nYL6HK6sytw70QMopt/NIc/9SM7ylItlBWfACXk0tEn37UWM/+mg==}
     dev: false
 
+  /caniuse-lite@1.0.30001806:
+    resolution: {integrity: sha512-72Cuvd95zbSYPKq6Fhg8eDJRlzgWDf7/mtoZv6Qe/DYNCEBdNxoA3+rZAU2ZhGCpZlns3EssFavaZomckT5Uuw==}
+    dev: false
+
   /chokidar@3.6.0:
     resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==}
     engines: {node: '>= 8.10.0'}
@@ -2044,47 +2326,10 @@ packages:
       - '@types/react-dom'
     dev: false
 
-  /color-convert@2.0.1:
-    resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
-    engines: {node: '>=7.0.0'}
-    dependencies:
-      color-name: 1.1.4
-
-  /color-name@1.1.4:
-    resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
-    requiresBuild: true
-
-  /color-string@1.9.1:
-    resolution: {integrity: sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==}
-    requiresBuild: true
-    dependencies:
-      color-name: 1.1.4
-      simple-swizzle: 0.2.2
-    dev: false
-    optional: true
-
-  /color@4.2.3:
-    resolution: {integrity: sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==}
-    engines: {node: '>=12.5.0'}
-    requiresBuild: true
-    dependencies:
-      color-convert: 2.0.1
-      color-string: 1.9.1
-    dev: false
-    optional: true
-
   /commander@4.1.1:
     resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==}
     engines: {node: '>= 6'}
 
-  /cross-spawn@7.0.6:
-    resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
-    engines: {node: '>= 8'}
-    dependencies:
-      path-key: 3.1.1
-      shebang-command: 2.0.0
-      which: 2.0.2
-
   /cssesc@3.0.0:
     resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
     engines: {node: '>=4'}
@@ -2176,16 +2421,11 @@ packages:
     resolution: {integrity: sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==}
     dev: false
 
-  /decimal.js@10.6.0:
-    resolution: {integrity: sha512-YpgQiITW3JXGntzdUmyUR1V812Hn8T1YVXhCu+wO3OpS4eU9l4YdD3qjyiKdV6mvV29zapkMeD390UVEf2lkUg==}
-    dev: false
-
-  /detect-libc@2.0.4:
-    resolution: {integrity: sha512-3UDv+G9CsCKO1WKMGw9fwq/SWJYbI0c5Y7LU1AXYoDdbhE2AHQ6N6Nb34sG8Fj7T5APy8qXDCKuuIHd1BR0tVA==}
+  /detect-libc@2.1.2:
+    resolution: {integrity: sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==}
     engines: {node: '>=8'}
     requiresBuild: true
     dev: false
-    optional: true
 
   /detect-node-es@1.1.0:
     resolution: {integrity: sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==}
@@ -2204,9 +2444,6 @@ packages:
       csstype: 3.1.3
     dev: false
 
-  /eastasianwidth@0.2.0:
-    resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
-
   /electron-to-chromium@1.5.194:
     resolution: {integrity: sha512-SdnWJwSUot04UR51I2oPD8kuP2VI37/CADR1OHsFOUzZIvfWJBO6q11k5P/uKNyTT3cdOsnyjkrZ+DDShqYqJA==}
     dev: false
@@ -2233,11 +2470,9 @@ packages:
     resolution: {integrity: sha512-JUb5+FOHobSiWQ2EJNaueCNT/cQU9L6XWBbWmorWPQT9bkbk+fhsuLr8wWrzXKagO3oWszBO7MSx+GfaRk4E6A==}
     dev: false
 
-  /emoji-regex@8.0.0:
-    resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
-
-  /emoji-regex@9.2.2:
-    resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==}
+  /es-errors@1.3.0:
+    resolution: {integrity: sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==}
+    engines: {node: '>= 0.4'}
 
   /escalade@3.2.0:
     resolution: {integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==}
@@ -2263,24 +2498,28 @@ packages:
       merge2: 1.4.1
       micromatch: 4.0.8
 
-  /fastq@1.19.1:
-    resolution: {integrity: sha512-GwLTyxkCXjXbxqIhTsMI2Nui8huMPtnxg7krajPJAjnEG/iiOS7i+zCtWGZR9G0NBKbXKh6X9m9UIsYX/N6vvQ==}
+  /fastq@1.20.1:
+    resolution: {integrity: sha512-GGToxJ/w1x32s/D2EKND7kTil4n8OVk/9mycTc4VDza13lOvpUZTGX3mFSCtV9ksdGBVzvsyAVLM6mHFThxXxw==}
     dependencies:
       reusify: 1.1.0
 
+  /fdir@6.5.0(picomatch@4.0.5):
+    resolution: {integrity: sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==}
+    engines: {node: '>=12.0.0'}
+    peerDependencies:
+      picomatch: ^3 || ^4
+    peerDependenciesMeta:
+      picomatch:
+        optional: true
+    dependencies:
+      picomatch: 4.0.5
+
   /fill-range@7.1.1:
     resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
     engines: {node: '>=8'}
     dependencies:
       to-regex-range: 5.0.1
 
-  /foreground-child@3.3.1:
-    resolution: {integrity: sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==}
-    engines: {node: '>=14'}
-    dependencies:
-      cross-spawn: 7.0.6
-      signal-exit: 4.1.0
-
   /fraction.js@4.3.7:
     resolution: {integrity: sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==}
     dev: false
@@ -2295,12 +2534,12 @@ packages:
   /function-bind@1.1.2:
     resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}
 
-  /geist@1.3.1(next@15.2.4):
+  /geist@1.3.1(next@15.5.21):
     resolution: {integrity: sha512-Q4gC1pBVPN+D579pBaz0TRRnGA4p9UK6elDY/xizXdFk/g4EKR5g0I+4p/Kj6gM0SajDBZ/0FvDV9ey9ud7BWw==}
     peerDependencies:
       next: '>=13.2.0'
     dependencies:
-      next: 15.2.4(react-dom@19.0.0)(react@19.0.0)
+      next: 15.5.21(@types/node@22.0.0)(react-dom@19.0.0)(react@19.0.0)
     dev: false
 
   /get-nonce@1.0.1:
@@ -2320,23 +2559,18 @@ packages:
     dependencies:
       is-glob: 4.0.3
 
-  /glob@10.4.5:
-    resolution: {integrity: sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==}
-    hasBin: true
-    dependencies:
-      foreground-child: 3.3.1
-      jackspeak: 3.4.3
-      minimatch: 9.0.5
-      minipass: 7.1.2
-      package-json-from-dist: 1.0.1
-      path-scurry: 1.11.1
-
-  /hasown@2.0.2:
-    resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
+  /hasown@2.0.4:
+    resolution: {integrity: sha512-T2UbfbBEF32wiepXIsMlTW9+dDYC6wMh/t/vYA4tuOMKqWz/n3vr1NFSxQiyP+zk2mXsoMA/i/7qV6LKut1t1A==}
     engines: {node: '>= 0.4'}
     dependencies:
       function-bind: 1.1.2
 
+  /icu-minify@4.13.3:
+    resolution: {integrity: sha512-dCbcvYH4YBgR+SgCtnXGIquuc6JkS7e4n+5mmgseQ5z81KJIWbs5ucBjnrE72HFct6Ddr2yWjX6o1j8DT7MI5w==}
+    dependencies:
+      '@formatjs/icu-messageformat-parser': 3.5.15
+    dev: false
+
   /input-otp@1.4.1(react-dom@19.0.0)(react@19.0.0):
     resolution: {integrity: sha512-+yvpmKYKHi9jIGngxagY9oWiiblPB7+nEO75F2l2o4vs+6vpPZZmUl4tBNYuTCvQjhvEIbdNeJu70bhfYP2nbw==}
     peerDependencies:
@@ -2352,20 +2586,12 @@ packages:
     engines: {node: '>=12'}
     dev: false
 
-  /intl-messageformat@10.7.16:
-    resolution: {integrity: sha512-UmdmHUmp5CIKKjSoE10la5yfU+AYJAaiYLsodbjL4lji83JNvgOQUjGaGhGrpFCb0Uh7sl7qfP1IyILa8Z40ug==}
+  /intl-messageformat@11.2.12:
+    resolution: {integrity: sha512-KW70Xxfcvy7vV3qODfvShWkFDPMqKDAa4N+hSyVBWGNtVhTUFYaqlD/l88DaYPKiVcPP4rPQ3qnH7i5K82Mg7g==}
     dependencies:
-      '@formatjs/ecma402-abstract': 2.3.4
-      '@formatjs/fast-memoize': 2.2.7
-      '@formatjs/icu-messageformat-parser': 2.11.2
-      tslib: 2.8.1
-    dev: false
-
-  /is-arrayish@0.3.2:
-    resolution: {integrity: sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==}
-    requiresBuild: true
+      '@formatjs/fast-memoize': 3.1.7
+      '@formatjs/icu-messageformat-parser': 3.5.15
     dev: false
-    optional: true
 
   /is-binary-path@2.1.0:
     resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
@@ -2373,20 +2599,16 @@ packages:
     dependencies:
       binary-extensions: 2.3.0
 
-  /is-core-module@2.16.1:
-    resolution: {integrity: sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==}
+  /is-core-module@2.16.2:
+    resolution: {integrity: sha512-evOr8xfXKxE6qSR0hSXL2r3sd7ALj8+7jQEUvPYcm5sgZFdJ+AYzT6yNmJenvIYQBgIGwfwz08sL8zoL7yq2BA==}
     engines: {node: '>= 0.4'}
     dependencies:
-      hasown: 2.0.2
+      hasown: 2.0.4
 
   /is-extglob@2.1.1:
     resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
     engines: {node: '>=0.10.0'}
 
-  /is-fullwidth-code-point@3.0.0:
-    resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==}
-    engines: {node: '>=8'}
-
   /is-glob@4.0.3:
     resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
     engines: {node: '>=0.10.0'}
@@ -2397,16 +2619,6 @@ packages:
     resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
     engines: {node: '>=0.12.0'}
 
-  /isexe@2.0.0:
-    resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
-
-  /jackspeak@3.4.3:
-    resolution: {integrity: sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==}
-    dependencies:
-      '@isaacs/cliui': 8.0.2
-    optionalDependencies:
-      '@pkgjs/parseargs': 0.11.0
-
   /jiti@1.21.7:
     resolution: {integrity: sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==}
     hasBin: true
@@ -2422,8 +2634,8 @@ packages:
   /lines-and-columns@1.2.4:
     resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
 
-  /lodash@4.17.21:
-    resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
+  /lodash@4.18.1:
+    resolution: {integrity: sha512-dMInicTPVE8d1e5otfwmmjlxkZoUpiVLwyeTdUsi/Caj/gfzzblBcCE5sRHV/AsjuCmxWrte2TNGSYuCeCq+0Q==}
     dev: false
 
   /loose-envify@1.4.0:
@@ -2433,9 +2645,6 @@ packages:
       js-tokens: 4.0.0
     dev: false
 
-  /lru-cache@10.4.3:
-    resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==}
-
   /lucide-react@0.454.0(react@19.0.0):
     resolution: {integrity: sha512-hw7zMDwykCLnEzgncEEjHeA6+45aeEzRYuKHuyRSOPkhko+J3ySGjGIzu+mmMfDFG1vazHepMaYFYHbTFAZAAQ==}
     peerDependencies:
@@ -2453,17 +2662,7 @@ packages:
     engines: {node: '>=8.6'}
     dependencies:
       braces: 3.0.3
-      picomatch: 2.3.1
-
-  /minimatch@9.0.5:
-    resolution: {integrity: sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==}
-    engines: {node: '>=16 || 14 >=14.17'}
-    dependencies:
-      brace-expansion: 2.0.2
-
-  /minipass@7.1.2:
-    resolution: {integrity: sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==}
-    engines: {node: '>=16 || 14 >=14.17'}
+      picomatch: 2.3.2
 
   /mz@2.7.0:
     resolution: {integrity: sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==}
@@ -2472,8 +2671,8 @@ packages:
       object-assign: 4.1.1
       thenify-all: 1.6.0
 
-  /nanoid@3.3.11:
-    resolution: {integrity: sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==}
+  /nanoid@3.3.16:
+    resolution: {integrity: sha512-bzlKTyNJ7+LdGIIwy8ijFpIqEQIvafahV7eYykJ8Cvh42EdJeODoJ6gUJXpQJvej1BddH8OqTXZNE/KfbWAu8Q==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
     hasBin: true
 
@@ -2482,22 +2681,33 @@ packages:
     engines: {node: '>= 0.6'}
     dev: false
 
-  /next-intl@4.3.4(next@15.2.4)(react@19.0.0)(typescript@5.0.2):
-    resolution: {integrity: sha512-VWLIDlGbnL/o4LnveJTJD1NOYN8lh3ZAGTWw2krhfgg53as3VsS4jzUVnArJdqvwtlpU/2BIDbWTZ7V4o1jFEw==}
+  /next-intl-swc-plugin-extractor@4.13.3:
+    resolution: {integrity: sha512-Oy86w/VRwqOu6sHEXwthEGhgnQszS79e47i3Kkzv4r+Yfz9ilZMSen8Sp8vtAwuc1nAZPrN13IbsLC5jmc9fVQ==}
+    dev: false
+
+  /next-intl@4.13.3(next@15.5.21)(react@19.0.0)(typescript@5.0.2):
+    resolution: {integrity: sha512-+bAjmPLsRFG/YAN1ged7wVCbuYvYjEW06ApBRdM7VbtNfXYN1iBFNh28Bi1sX5xGSFvAsGCBC1K2Zjtvn1AMvQ==}
     peerDependencies:
-      next: ^12.0.0 || ^13.0.0 || ^14.0.0 || ^15.0.0
+      next: ^12.0.0 || ^13.0.0 || ^14.0.0 || ^15.0.0 || ^16.0.0
       react: ^16.8.0 || ^17.0.0 || ^18.0.0 || >=19.0.0-rc <19.0.0 || ^19.0.0
-      typescript: ^5.0.0
+      typescript: '*'
     peerDependenciesMeta:
       typescript:
         optional: true
     dependencies:
-      '@formatjs/intl-localematcher': 0.5.10
+      '@formatjs/intl-localematcher': 0.8.13
+      '@parcel/watcher': 2.6.0
+      '@swc/core': 1.15.46
+      icu-minify: 4.13.3
       negotiator: 1.0.0
-      next: 15.2.4(react-dom@19.0.0)(react@19.0.0)
+      next: 15.5.21(@types/node@22.0.0)(react-dom@19.0.0)(react@19.0.0)
+      next-intl-swc-plugin-extractor: 4.13.3
+      po-parser: 2.1.1
       react: 19.0.0
       typescript: 5.0.2
-      use-intl: 4.3.4(react@19.0.0)
+      use-intl: 4.13.3(react@19.0.0)
+    transitivePeerDependencies:
+      - '@swc/helpers'
     dev: false
 
   /next-themes@0.4.4(react-dom@19.0.0)(react@19.0.0):
@@ -2510,13 +2720,13 @@ packages:
       react-dom: 19.0.0(react@19.0.0)
     dev: false
 
-  /next@15.2.4(react-dom@19.0.0)(react@19.0.0):
-    resolution: {integrity: sha512-VwL+LAaPSxEkd3lU2xWbgEOtrM8oedmyhBqaVNmgKB+GvZlCy9rgaEc+y2on0wv+l0oSFqLtYD6dcC1eAedUaQ==}
+  /next@15.5.21(@types/node@22.0.0)(react-dom@19.0.0)(react@19.0.0):
+    resolution: {integrity: sha512-/TsdBtkWLhkl+NVL3Uqws2UphNd6IPzOtzSk1fHaf+0P7GQKLZDUytyhns/Ykbzdy9+YRjwG7ONvrHaaTDdFqQ==}
     engines: {node: ^18.18.0 || ^19.8.0 || >= 20.0.0}
     hasBin: true
     peerDependencies:
       '@opentelemetry/api': ^1.1.0
-      '@playwright/test': ^1.41.2
+      '@playwright/test': ^1.51.1
       babel-plugin-react-compiler: '*'
       react: ^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0
       react-dom: ^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0
@@ -2531,30 +2741,33 @@ packages:
       sass:
         optional: true
     dependencies:
-      '@next/env': 15.2.4
-      '@swc/counter': 0.1.3
+      '@next/env': 15.5.21
       '@swc/helpers': 0.5.15
-      busboy: 1.6.0
-      caniuse-lite: 1.0.30001731
-      postcss: 8.4.31
+      caniuse-lite: 1.0.30001806
+      postcss: 8.5.22
       react: 19.0.0
       react-dom: 19.0.0(react@19.0.0)
       styled-jsx: 5.1.6(react@19.0.0)
     optionalDependencies:
-      '@next/swc-darwin-arm64': 15.2.4
-      '@next/swc-darwin-x64': 15.2.4
-      '@next/swc-linux-arm64-gnu': 15.2.4
-      '@next/swc-linux-arm64-musl': 15.2.4
-      '@next/swc-linux-x64-gnu': 15.2.4
-      '@next/swc-linux-x64-musl': 15.2.4
-      '@next/swc-win32-arm64-msvc': 15.2.4
-      '@next/swc-win32-x64-msvc': 15.2.4
-      sharp: 0.33.5
+      '@next/swc-darwin-arm64': 15.5.21
+      '@next/swc-darwin-x64': 15.5.21
+      '@next/swc-linux-arm64-gnu': 15.5.21
+      '@next/swc-linux-arm64-musl': 15.5.21
+      '@next/swc-linux-x64-gnu': 15.5.21
+      '@next/swc-linux-x64-musl': 15.5.21
+      '@next/swc-win32-arm64-msvc': 15.5.21
+      '@next/swc-win32-x64-msvc': 15.5.21
+      sharp: 0.35.3(@types/node@22.0.0)
     transitivePeerDependencies:
       - '@babel/core'
+      - '@types/node'
       - babel-plugin-macros
     dev: false
 
+  /node-addon-api@7.1.1:
+    resolution: {integrity: sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==}
+    dev: false
+
   /node-releases@2.0.19:
     resolution: {integrity: sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==}
     dev: false
@@ -2591,30 +2804,20 @@ packages:
       zod: 3.24.1
     dev: false
 
-  /package-json-from-dist@1.0.1:
-    resolution: {integrity: sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==}
-
-  /path-key@3.1.1:
-    resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
-    engines: {node: '>=8'}
-
   /path-parse@1.0.7:
     resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
 
-  /path-scurry@1.11.1:
-    resolution: {integrity: sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==}
-    engines: {node: '>=16 || 14 >=14.18'}
-    dependencies:
-      lru-cache: 10.4.3
-      minipass: 7.1.2
-
   /picocolors@1.1.1:
     resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
 
-  /picomatch@2.3.1:
-    resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
+  /picomatch@2.3.2:
+    resolution: {integrity: sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA==}
     engines: {node: '>=8.6'}
 
+  /picomatch@4.0.5:
+    resolution: {integrity: sha512-RvwwcruNjI1ncT5xRakeyS9Lf8lcItv34KD+aif+VH9kduAyfYBipGh12274xtenIPZ119/R9BdTBa8gAwSh0A==}
+    engines: {node: '>=12'}
+
   /pify@2.3.0:
     resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==}
     engines: {node: '>=0.10.0'}
@@ -2623,53 +2826,63 @@ packages:
     resolution: {integrity: sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==}
     engines: {node: '>= 6'}
 
-  /postcss-import@15.1.0(postcss@8.5.0):
+  /po-parser@2.1.1:
+    resolution: {integrity: sha512-ECF4zHLbUItpUgE3OTtLKlPjeBN+fKEczj2zYjDfCGOzicNs0GK3Vg2IoAYwx7LH/XYw43fZQP6xnZ4TkNxSLQ==}
+    dev: false
+
+  /postcss-import@15.1.0(postcss@8.5.22):
     resolution: {integrity: sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
-      postcss: ^8.0.0
+      postcss: 8.5.22
     dependencies:
-      postcss: 8.5.0
+      postcss: 8.5.22
       postcss-value-parser: 4.2.0
       read-cache: 1.0.0
-      resolve: 1.22.10
+      resolve: 1.22.12
 
-  /postcss-js@4.0.1(postcss@8.5.0):
-    resolution: {integrity: sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==}
+  /postcss-js@4.1.0(postcss@8.5.22):
+    resolution: {integrity: sha512-oIAOTqgIo7q2EOwbhb8UalYePMvYoIeRY2YKntdpFQXNosSu3vLrniGgmH9OKs/qAkfoj5oB3le/7mINW1LCfw==}
     engines: {node: ^12 || ^14 || >= 16}
     peerDependencies:
-      postcss: ^8.4.21
+      postcss: 8.5.22
     dependencies:
       camelcase-css: 2.0.1
-      postcss: 8.5.0
+      postcss: 8.5.22
 
-  /postcss-load-config@4.0.2(postcss@8.5.0):
-    resolution: {integrity: sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==}
-    engines: {node: '>= 14'}
+  /postcss-load-config@6.0.1(jiti@1.21.7)(postcss@8.5.22):
+    resolution: {integrity: sha512-oPtTM4oerL+UXmx+93ytZVN82RrlY/wPUV8IeDxFrzIjXOLF1pN+EmKPLbubvKHT2HC20xXsCAH2Z+CKV6Oz/g==}
+    engines: {node: '>= 18'}
     peerDependencies:
-      postcss: '>=8.0.9'
-      ts-node: '>=9.0.0'
+      jiti: '>=1.21.0'
+      postcss: 8.5.22
+      tsx: ^4.8.1
+      yaml: ^2.4.2
     peerDependenciesMeta:
+      jiti:
+        optional: true
       postcss:
         optional: true
-      ts-node:
+      tsx:
+        optional: true
+      yaml:
         optional: true
     dependencies:
+      jiti: 1.21.7
       lilconfig: 3.1.3
-      postcss: 8.5.0
-      yaml: 2.8.0
+      postcss: 8.5.22
 
-  /postcss-nested@6.2.0(postcss@8.5.0):
+  /postcss-nested@6.2.0(postcss@8.5.22):
     resolution: {integrity: sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==}
     engines: {node: '>=12.0'}
     peerDependencies:
-      postcss: ^8.2.14
+      postcss: 8.5.22
     dependencies:
-      postcss: 8.5.0
-      postcss-selector-parser: 6.1.2
+      postcss: 8.5.22
+      postcss-selector-parser: 6.1.4
 
-  /postcss-selector-parser@6.1.2:
-    resolution: {integrity: sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==}
+  /postcss-selector-parser@6.1.4:
+    resolution: {integrity: sha512-bIoJLOmjCO1S9XdY/DcnR5hJxvrDir1PbGChrzXG3vw0/FOliy/fA3dmdhQ441kah4gKv+TwckGzex6wNS5cnQ==}
     engines: {node: '>=4'}
     dependencies:
       cssesc: 3.0.0
@@ -2678,20 +2891,11 @@ packages:
   /postcss-value-parser@4.2.0:
     resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
 
-  /postcss@8.4.31:
-    resolution: {integrity: sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==}
-    engines: {node: ^10 || ^12 || >=14}
-    dependencies:
-      nanoid: 3.3.11
-      picocolors: 1.1.1
-      source-map-js: 1.2.1
-    dev: false
-
-  /postcss@8.5.0:
-    resolution: {integrity: sha512-27VKOqrYfPncKA2NrFOVhP5MGAfHKLYn/Q0mz9cNQyRAKYi3VNHwYU2qKKqPCqgBmeeJ0uAFB56NumXZ5ZReXg==}
+  /postcss@8.5.22:
+    resolution: {integrity: sha512-KBDEIpLrvpv16pp3K0Fw+UCoZfopFjjgeB+0tA/aaThfEE74kKDLrgg603YvOWJyg3+WYtyq3xYsQWsIyZlPqQ==}
     engines: {node: ^10 || ^12 || >=14}
     dependencies:
-      nanoid: 3.3.11
+      nanoid: 3.3.16
       picocolors: 1.1.1
       source-map-js: 1.2.1
 
@@ -2846,7 +3050,7 @@ packages:
     resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
     engines: {node: '>=8.10.0'}
     dependencies:
-      picomatch: 2.3.1
+      picomatch: 2.3.2
 
   /recharts-scale@0.4.5:
     resolution: {integrity: sha512-kivNFO+0OcUNu7jQquLXAxz1FIwZj8nrj+YkOKc5694NbjCvcT6aSZiIzNzd2Kul4o4rTto8QVR9lMNtxD4G1w==}
@@ -2863,7 +3067,7 @@ packages:
     dependencies:
       clsx: 2.1.1
       eventemitter3: 4.0.7
-      lodash: 4.17.21
+      lodash: 4.18.1
       react: 19.0.0
       react-dom: 19.0.0(react@19.0.0)
       react-is: 18.3.1
@@ -2873,12 +3077,13 @@ packages:
       victory-vendor: 36.9.2
     dev: false
 
-  /resolve@1.22.10:
-    resolution: {integrity: sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==}
+  /resolve@1.22.12:
+    resolution: {integrity: sha512-TyeJ1zif53BPfHootBGwPRYT1RUt6oGWsaQr8UyZW/eAm9bKoijtvruSDEmZHm92CwS9nj7/fWttqPCgzep8CA==}
     engines: {node: '>= 0.4'}
     hasBin: true
     dependencies:
-      is-core-module: 2.16.1
+      es-errors: 1.3.0
+      is-core-module: 2.16.2
       path-parse: 1.0.7
       supports-preserve-symlinks-flag: 1.0.0
 
@@ -2895,64 +3100,54 @@ packages:
     resolution: {integrity: sha512-xFVuu11jh+xcO7JOAGJNOXld8/TcEHK/4CituBUeUb5hqxJLj9YuemAEuvm9gQ/+pgXYfbQuqAkiYu+u7YEsNA==}
     dev: false
 
-  /semver@7.7.2:
-    resolution: {integrity: sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==}
+  /semver@7.8.5:
+    resolution: {integrity: sha512-Y7/KDsb8LjooZpwaqGyulO6DQlksgCncchHGk+sZIY4SBvUocMBEFH5Ur1fI4dV+Jvl0w6cjvucaIi40puRioA==}
     engines: {node: '>=10'}
     hasBin: true
     requiresBuild: true
     dev: false
     optional: true
 
-  /sharp@0.33.5:
-    resolution: {integrity: sha512-haPVm1EkS9pgvHrQ/F3Xy+hgcuMV0Wm9vfIBSiwZ05k+xgb0PkBQpGsAA/oWdDobNaZTH5ppvHtzCFbnSEwHVw==}
-    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+  /sharp@0.35.3(@types/node@22.0.0):
+    resolution: {integrity: sha512-ej0zVHuZGHCiABXcNxeYhpRnPNPAcvbG8RMdBAhDAxLKkCRVSpK3Iyu7qbqw3JMzoj0REeM6f3tJLtVwl0023Q==}
+    engines: {node: '>=20.9.0'}
     requiresBuild: true
+    peerDependencies:
+      '@types/node': '*'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
     dependencies:
-      color: 4.2.3
-      detect-libc: 2.0.4
-      semver: 7.7.2
+      '@img/colour': 1.1.0
+      '@types/node': 22.0.0
+      detect-libc: 2.1.2
+      semver: 7.8.5
     optionalDependencies:
-      '@img/sharp-darwin-arm64': 0.33.5
-      '@img/sharp-darwin-x64': 0.33.5
-      '@img/sharp-libvips-darwin-arm64': 1.0.4
-      '@img/sharp-libvips-darwin-x64': 1.0.4
-      '@img/sharp-libvips-linux-arm': 1.0.5
-      '@img/sharp-libvips-linux-arm64': 1.0.4
-      '@img/sharp-libvips-linux-s390x': 1.0.4
-      '@img/sharp-libvips-linux-x64': 1.0.4
-      '@img/sharp-libvips-linuxmusl-arm64': 1.0.4
-      '@img/sharp-libvips-linuxmusl-x64': 1.0.4
-      '@img/sharp-linux-arm': 0.33.5
-      '@img/sharp-linux-arm64': 0.33.5
-      '@img/sharp-linux-s390x': 0.33.5
-      '@img/sharp-linux-x64': 0.33.5
-      '@img/sharp-linuxmusl-arm64': 0.33.5
-      '@img/sharp-linuxmusl-x64': 0.33.5
-      '@img/sharp-wasm32': 0.33.5
-      '@img/sharp-win32-ia32': 0.33.5
-      '@img/sharp-win32-x64': 0.33.5
-    dev: false
-    optional: true
-
-  /shebang-command@2.0.0:
-    resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
-    engines: {node: '>=8'}
-    dependencies:
-      shebang-regex: 3.0.0
-
-  /shebang-regex@3.0.0:
-    resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
-    engines: {node: '>=8'}
-
-  /signal-exit@4.1.0:
-    resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
-    engines: {node: '>=14'}
-
-  /simple-swizzle@0.2.2:
-    resolution: {integrity: sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==}
-    requiresBuild: true
-    dependencies:
-      is-arrayish: 0.3.2
+      '@img/sharp-darwin-arm64': 0.35.3
+      '@img/sharp-darwin-x64': 0.35.3
+      '@img/sharp-freebsd-wasm32': 0.35.3
+      '@img/sharp-libvips-darwin-arm64': 1.3.2
+      '@img/sharp-libvips-darwin-x64': 1.3.2
+      '@img/sharp-libvips-linux-arm': 1.3.2
+      '@img/sharp-libvips-linux-arm64': 1.3.2
+      '@img/sharp-libvips-linux-ppc64': 1.3.2
+      '@img/sharp-libvips-linux-riscv64': 1.3.2
+      '@img/sharp-libvips-linux-s390x': 1.3.2
+      '@img/sharp-libvips-linux-x64': 1.3.2
+      '@img/sharp-libvips-linuxmusl-arm64': 1.3.2
+      '@img/sharp-libvips-linuxmusl-x64': 1.3.2
+      '@img/sharp-linux-arm': 0.35.3
+      '@img/sharp-linux-arm64': 0.35.3
+      '@img/sharp-linux-ppc64': 0.35.3
+      '@img/sharp-linux-riscv64': 0.35.3
+      '@img/sharp-linux-s390x': 0.35.3
+      '@img/sharp-linux-x64': 0.35.3
+      '@img/sharp-linuxmusl-arm64': 0.35.3
+      '@img/sharp-linuxmusl-x64': 0.35.3
+      '@img/sharp-webcontainers-wasm32': 0.35.3
+      '@img/sharp-win32-arm64': 0.35.3
+      '@img/sharp-win32-ia32': 0.35.3
+      '@img/sharp-win32-x64': 0.35.3
     dev: false
     optional: true
 
@@ -2970,39 +3165,6 @@ packages:
     resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
     engines: {node: '>=0.10.0'}
 
-  /streamsearch@1.1.0:
-    resolution: {integrity: sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==}
-    engines: {node: '>=10.0.0'}
-    dev: false
-
-  /string-width@4.2.3:
-    resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==}
-    engines: {node: '>=8'}
-    dependencies:
-      emoji-regex: 8.0.0
-      is-fullwidth-code-point: 3.0.0
-      strip-ansi: 6.0.1
-
-  /string-width@5.1.2:
-    resolution: {integrity: sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==}
-    engines: {node: '>=12'}
-    dependencies:
-      eastasianwidth: 0.2.0
-      emoji-regex: 9.2.2
-      strip-ansi: 7.1.0
-
-  /strip-ansi@6.0.1:
-    resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
-    engines: {node: '>=8'}
-    dependencies:
-      ansi-regex: 5.0.1
-
-  /strip-ansi@7.1.0:
-    resolution: {integrity: sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==}
-    engines: {node: '>=12'}
-    dependencies:
-      ansi-regex: 6.1.0
-
   /styled-jsx@5.1.6(react@19.0.0):
     resolution: {integrity: sha512-qSVyDTeMotdvQYoHWLNGwRFJHC+i+ZvdBRYosOFgC+Wg1vx4frN2/RG/NA7SYqqvKNLf39P2LSRA2pu6n0XYZA==}
     engines: {node: '>= 12.0.0'}
@@ -3020,17 +3182,17 @@ packages:
       react: 19.0.0
     dev: false
 
-  /sucrase@3.35.0:
-    resolution: {integrity: sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==}
+  /sucrase@3.35.1:
+    resolution: {integrity: sha512-DhuTmvZWux4H1UOnWMB3sk0sbaCVOoQZjv8u1rDoTV0HTdGem9hkAZtl4JZy8P2z4Bg0nT+YMeOFyVr4zcG5Tw==}
     engines: {node: '>=16 || 14 >=14.17'}
     hasBin: true
     dependencies:
-      '@jridgewell/gen-mapping': 0.3.12
+      '@jridgewell/gen-mapping': 0.3.13
       commander: 4.1.1
-      glob: 10.4.5
       lines-and-columns: 1.2.4
       mz: 2.7.0
       pirates: 4.0.7
+      tinyglobby: 0.2.17
       ts-interface-checker: 0.1.13
 
   /supports-preserve-symlinks-flag@1.0.0:
@@ -3041,16 +3203,16 @@ packages:
     resolution: {integrity: sha512-0LXunzzAZzo0tEPxV3I297ffKZPlKDrjj7NXphC8V5ak9yHC5zRmxnOe2m/Rd/7ivsOMJe3JZ2JVocoDdQTRBA==}
     dev: false
 
-  /tailwindcss-animate@1.0.7(tailwindcss@3.4.17):
+  /tailwindcss-animate@1.0.7(tailwindcss@3.4.19):
     resolution: {integrity: sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==}
     peerDependencies:
       tailwindcss: '>=3.0.0 || insiders'
     dependencies:
-      tailwindcss: 3.4.17
+      tailwindcss: 3.4.19
     dev: false
 
-  /tailwindcss@3.4.17:
-    resolution: {integrity: sha512-w33E2aCvSDP0tW9RZuNXadXlkHXqFzSkQew/aIa2i/Sj8fThxwovwlXHSPXTbAHwEIhBFXAedUhP2tueAKP8Og==}
+  /tailwindcss@3.4.19:
+    resolution: {integrity: sha512-3ofp+LL8E+pK/JuPLPggVAIaEuhvIz4qNcf3nA1Xn2o/7fb7s/TYpHhwGDv1ZU3PkBluUVaF8PyCHcm48cKLWQ==}
     engines: {node: '>=14.0.0'}
     hasBin: true
     dependencies:
@@ -3068,16 +3230,17 @@ packages:
       normalize-path: 3.0.0
       object-hash: 3.0.0
       picocolors: 1.1.1
-      postcss: 8.5.0
-      postcss-import: 15.1.0(postcss@8.5.0)
-      postcss-js: 4.0.1(postcss@8.5.0)
-      postcss-load-config: 4.0.2(postcss@8.5.0)
-      postcss-nested: 6.2.0(postcss@8.5.0)
-      postcss-selector-parser: 6.1.2
-      resolve: 1.22.10
-      sucrase: 3.35.0
+      postcss: 8.5.22
+      postcss-import: 15.1.0(postcss@8.5.22)
+      postcss-js: 4.1.0(postcss@8.5.22)
+      postcss-load-config: 6.0.1(jiti@1.21.7)(postcss@8.5.22)
+      postcss-nested: 6.2.0(postcss@8.5.22)
+      postcss-selector-parser: 6.1.4
+      resolve: 1.22.12
+      sucrase: 3.35.1
     transitivePeerDependencies:
-      - ts-node
+      - tsx
+      - yaml
 
   /thenify-all@1.6.0:
     resolution: {integrity: sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==}
@@ -3094,6 +3257,13 @@ packages:
     resolution: {integrity: sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==}
     dev: false
 
+  /tinyglobby@0.2.17:
+    resolution: {integrity: sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g==}
+    engines: {node: '>=12.0.0'}
+    dependencies:
+      fdir: 6.5.0(picomatch@4.0.5)
+      picomatch: 4.0.5
+
   /to-regex-range@5.0.1:
     resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
     engines: {node: '>=8.0'}
@@ -3114,7 +3284,6 @@ packages:
 
   /undici-types@6.11.1:
     resolution: {integrity: sha512-mIDEX2ek50x0OlRgxryxsenE5XaQD4on5U2inY7RApK3SOJpofyw7uW2AyfMKkhAxXIceo2DeWGVGwyvng1GNQ==}
-    dev: true
 
   /update-browserslist-db@1.1.3(browserslist@4.25.1):
     resolution: {integrity: sha512-UxhIZQ+QInVdunkDAaiazvvT/+fXL5Osr0JZlJulepYu6Jd7qJtDZjlur0emRlT71EN3ScPoE7gvsuIKKNavKw==}
@@ -3142,14 +3311,15 @@ packages:
       tslib: 2.8.1
     dev: false
 
-  /use-intl@4.3.4(react@19.0.0):
-    resolution: {integrity: sha512-sHfiU0QeJ1rirNWRxvCyvlSh9+NczcOzRnPyMeo2rtHXhVnBsvMRjE+UG4eh3lRhCxrvcqei/I0lBxsc59on1w==}
+  /use-intl@4.13.3(react@19.0.0):
+    resolution: {integrity: sha512-e1qMU4PokNEU7K1TtKROSl3Sv7JLsKh7GyNjuhKZVB444Qfv0qHjet59IZF6GtYE+VwGbhgWqDWfGTnuDPe2Bg==}
     peerDependencies:
       react: ^17.0.0 || ^18.0.0 || >=19.0.0-rc <19.0.0 || ^19.0.0
     dependencies:
-      '@formatjs/fast-memoize': 2.2.7
+      '@formatjs/fast-memoize': 3.1.7
       '@schummar/icu-type-parser': 1.21.5
-      intl-messageformat: 10.7.16
+      icu-minify: 4.13.3
+      intl-messageformat: 11.2.12
       react: 19.0.0
     dev: false
 
@@ -3213,34 +3383,6 @@ packages:
       d3-timer: 3.0.1
     dev: false
 
-  /which@2.0.2:
-    resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
-    engines: {node: '>= 8'}
-    hasBin: true
-    dependencies:
-      isexe: 2.0.0
-
-  /wrap-ansi@7.0.0:
-    resolution: {integrity: sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==}
-    engines: {node: '>=10'}
-    dependencies:
-      ansi-styles: 4.3.0
-      string-width: 4.2.3
-      strip-ansi: 6.0.1
-
-  /wrap-ansi@8.1.0:
-    resolution: {integrity: sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==}
-    engines: {node: '>=12'}
-    dependencies:
-      ansi-styles: 6.2.1
-      string-width: 5.1.2
-      strip-ansi: 7.1.0
-
-  /yaml@2.8.0:
-    resolution: {integrity: sha512-4lLa/EcQCB0cJkyts+FpIRx5G/llPxfP6VQU5KByHEhLxY3IJCH0f0Hy1MHI8sClTvsIb8qwRJ6R/ZdlDJ/leQ==}
-    engines: {node: '>= 14.6'}
-    hasBin: true
-
   /zod@3.24.1:
     resolution: {integrity: sha512-muH7gBL9sI1nciMZV67X5fTKKBLtwpZ5VBp1vsOQzj1MhrBZ4wlVCm3gedKZWLp0Oyel8sIGfeiz54Su+OVT+A==}
     dev: false
diff --git a/vercel.json b/vercel.json
index 85d1f73..9a26254 100644
--- a/vercel.json
+++ b/vercel.json
@@ -3,8 +3,5 @@
         "deploymentEnabled": {
             "main": true
         }
-    },
-    "env": {
-        "DEEPSEEK_API_KEY": "sk-xgpdmqrgikwkbaacvxbvtkwhxnwjncdvqzlshnzcyswxhsfn"
     }
-}
\ No newline at end of file
+}