图片 Prompt 测试系统

一个用于测试不同 Prompt 对图片生成效果影响的 Web 应用。

功能特性

• ✅ API Key 管理 - 安全地在本地存储和管理 Seedream API Key
• ✅ Prompt 库 - 创建、编辑和管理多个 Prompt
• ✅ 原图库 - 上传和管理原始图片（支持拖拽上传）
• ✅ 批量测试 - 单个 Prompt 可生成 1-10 张图片进行效果对比
• ✅ 对比模式 - 同时测试两个 Prompt 的效果差异
• ✅ 并发生成 - 支持并发生成图片，提高随机性
• ✅ 历史记录 - 自动保存所有测试记录，支持筛选和查看详情
• ✅ 本地存储 - 所有数据（图片、记录）保存在浏览器本地

技术栈

• 前端框架: React 18 + TypeScript
• 构建工具: Vite
• 样式: Tailwind CSS
• 状态管理: Zustand
• 路由: React Router
• 数据存储:
  • LocalStorage（配置、Prompt）
  • IndexedDB（图片、测试记录）
• 图片生成 API: Seedream API

快速开始

安装依赖

cd prompt-test-app
npm install

开发模式

npm run dev

访问 http://localhost:5173

构建生产版本

npm run build

预览生产版本

npm run preview

使用指南

1. 配置 API Key

首次使用需要在"设置"页面配置 Seedream API Key：

1. 进入"设置"页面
2. 输入您的 API Key
3. 点击"测试连接"验证
4. 点击"保存"

2. 创建 Prompt

在"Prompt 库"页面：

1. 点击"新建 Prompt"
2. 输入 Prompt 名称和内容
3. 保存

3. 上传原图

在"原图库"页面：

1. 拖拽图片到上传区域，或点击选择文件
2. 图片会自动保存到本地数据库

4. 开始测试

在"测试"页面：

1. 选择原图
2. 选择一个或多个 Prompt（勾选"对比模式"可选择 2 个）
3. 设置生成数量（1-10 张）
4. 点击"开始生成"
5. 实时查看生成进度和结果

5. 查看历史

在"历史记录"页面：

1. 查看所有测试记录
2. 按 Prompt 筛选
3. 点击"查看详情"查看完整信息
4. 删除不需要的记录

数据存储说明

LocalStorage

• API Key 配置
• Prompt 列表

IndexedDB

• 原图（Blob）
• 生成的图片（Blob）
• 测试记录

注意:

• 所有数据仅存储在浏览器本地，不会上传到服务器
• 清除浏览器数据会导致所有记录丢失
• 建议定期备份重要的测试结果

项目结构

prompt-test-app/
├── src/
│   ├── components/       # React 组件
│   │   ├── layout/       # 布局组件
│   │   ├── test/         # 测试相关组件
│   │   ├── prompt/       # Prompt 相关组件
│   │   ├── image/        # 图片相关组件
│   │   ├── history/      # 历史记录组件
│   │   └── settings/     # 设置组件
│   ├── services/         # 数据服务层
│   │   ├── db.ts         # IndexedDB 初始化
│   │   ├── apiKeyService.ts
│   │   ├── promptService.ts
│   │   ├── sourceImageService.ts
│   │   ├── testRecordService.ts
│   │   └── seedreamApi.ts
│   ├── stores/           # Zustand 状态管理
│   │   ├── useApiKeyStore.ts
│   │   ├── usePromptStore.ts
│   │   ├── useImageStore.ts
│   │   └── useTestStore.ts
│   ├── types/            # TypeScript 类型定义
│   ├── pages/            # 页面组件
│   │   ├── TestPage.tsx
│   │   ├── HistoryPage.tsx
│   │   ├── PromptLibraryPage.tsx
│   │   ├── ImageLibraryPage.tsx
│   │   └── SettingsPage.tsx
│   ├── App.tsx
│   └── main.tsx
├── public/
├── package.json
└── vite.config.ts

API 集成

当前版本使用 Seedream API 的占位实现。要集成真实 API：

1. 打开 src/services/seedreamApi.ts
2. 替换占位函数为实际的 API 调用
3. 根据 API 文档配置请求参数

部署

GitHub Pages

项目已配置 GitHub Actions 自动部署：

1. 推送代码到 main 分支
2. GitHub Actions 自动构建和部署
3. 访问 https://[your-username].github.io/promptTest/

手动部署

npm run build
# 将 dist 目录部署到任何静态托管服务

浏览器兼容性

• Chrome 90+
• Firefox 88+
• Safari 14+
• Edge 90+

开发计划

• 集成真实的 Seedream API
• 添加图片导出功能
• 支持批量删除历史记录
• 添加数据导入/导出功能
• 优化大量图片的性能

许可证

MIT

贡献

欢迎提交 Issue 和 Pull Request！