# ai-english-book

**Repository Path**: hfqf1234/ai-english-book

## Basic Information

- **Project Name**: ai-english-book
- **Description**: AI生成英文绘本
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2025-08-05
- **Last Updated**: 2026-01-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: AI, mvp

## README

# AI英语绘本生成器

一个基于人工智能的英语绘本故事生成器，能够根据自定义的故事情节和风格设定，生成精美的插图和精彩的故事。

## 现在的痛点

### deepseek整理

![AI英语绘本生成器截图1](./shots/0.png)

### 个人整理

1.绘本买太多，动不动就要处理一批

2.如果需要明确的主体，一时半会还不好找

3.可以结合英文绘本，逐步学习单词，形成自己的单词库（比如结合ket的词库）



## 可能的难点
1.家长不接受屏幕，更愿意纸质：可以提供音频播放，虽然选中文还是英文，目前技术都是很成熟了。

2.推广难度

3.潜在的竞争对手

## 团队+idea的优势
0.完美的解决DeepSeek罗列的痛点！

1.小而美的开发团队,前期投入不大:不用大规模的固定资产投入,只是开发成本，试错成本小

2.强大的种子用户(待发掘)

3.AI生成故事非常快，基本0成本，而且没有版权纠纷

4.可以根据读者的要求自定义故事情节和图像，非常生动

5.时间点正好：2025.8.5国内有了AI图片大模型，效果很好，时间点正好卡的很准，国外的类似产品也是2025.8.4才上的，而且和这个还有差异性。

## 目前效果

![AI英语绘本生成器截图1](./shots/1.png)

![AI英语绘本生成器截图2](./shots/2.png)
AI图片效果
![AI英语绘本生成器截图3](./shots/3.jpg)

## ✨ 主要功能

### 📚 故事生成
- **多种主题**：友谊、勇气、善良、学习、自然、家庭等6大主题
- **年龄适配**：针对3-5岁、6-8岁、9-12岁不同年龄段优化
- **长度选择**：短故事(100-150词)、中等长度(200-300词)、长故事(400-500词)
- **双语内容**：中文故事 + 英文翻译，适合英语学习

### 🎨 插图功能
- **主插图**：每篇故事都配有精美的水彩风格插图
- **卡通漫画**：新增功能！生成多张卡通风格的漫画插图
- **情节配合**：插图与故事情节完美搭配，增强阅读体验

### 🎭 卡通漫画特色
- **多页面展示**：将故事分解为3-4个漫画页面
- **交互式浏览**：支持左右箭头和缩略图导航
- **对话气泡**：每页漫画都配有中英文对话说明
- **错误处理**：图片加载失败时显示友好的错误提示

### 📖 学习辅助
- **词汇学习**：提供中英文关键词汇
- **故事寓意**：中英文故事寓意解读
- **下载功能**：支持故事内容下载保存

## 🚀 技术栈

- **前端框架**：Next.js 14 + React 18
- **样式框架**：Tailwind CSS
- **图标库**：Lucide React
- **AI服务**：DeepSeek API (文本生成 + 图像生成)
- **开发语言**：TypeScript

## 📦 安装和运行

### 环境要求
- Node.js 18+ 
- npm 或 yarn

### 安装依赖
```bash
npm install
```

### 配置API密钥
在 `app/api/generate-story/route.ts` 中配置您的 DeepSeek API 密钥：
```typescript
const DEEPSEEK_API_KEY = 'your-api-key-here'
```

### 启动开发服务器
```bash
npm run dev
```

访问 http://localhost:3000 即可使用应用。

## 🎯 使用指南

### 1. 选择故事参数
- **主题**：选择您感兴趣的故事主题
- **年龄组**：根据目标读者年龄选择
- **故事长度**：根据需要选择故事长度
- **插图风格**：选择是否包含卡通漫画

### 2. 生成故事
点击"生成英语绘本故事"按钮，AI将为您创作：
- 阳光积极的中英文故事
- 精美的水彩风格主插图
- 生动的卡通漫画页面（如果选择包含）
- 中英文词汇和寓意

### 3. 浏览漫画
如果选择了卡通漫画功能：
- 在"卡通漫画"标签页查看漫画
- 使用左右箭头或缩略图导航
- 查看每页的中英文对话说明

### 4. 学习词汇
在"词汇学习"标签页：
- 查看中英文关键词汇
- 学习相关英语单词

### 5. 理解寓意
在"故事寓意"标签页：
- 阅读中英文故事寓意
- 理解故事的教育意义

## 🎨 界面特色

- **响应式设计**：适配桌面和移动设备
- **现代化UI**：使用卡片式布局和渐变背景
- **交互反馈**：按钮悬停效果和加载状态
- **无障碍设计**：支持键盘导航和屏幕阅读器

## 🔧 项目结构

```
ai-english-book/
├── app/                    # Next.js 应用目录
│   ├── api/               # API 路由
│   │   └── generate-story/ # 故事生成API
│   ├── globals.css        # 全局样式
│   ├── layout.tsx         # 应用布局
│   └── page.tsx           # 主页面
├── components/            # React 组件
│   ├── ComicDisplay.tsx   # 卡通漫画展示组件
│   ├── Footer.tsx         # 页脚组件
│   ├── Header.tsx         # 页头组件
│   ├── StoryDisplay.tsx   # 故事展示组件
│   ├── StoryForm.tsx      # 故事表单组件
│   └── StoryGenerator.tsx # 故事生成器组件
├── types/                 # TypeScript 类型定义
│   └── story.ts          # 故事相关类型
└── 配置文件...
```

## 🌟 更新日志

### v1.1.0 - 卡通漫画功能
- ✅ 新增卡通漫画生成功能
- ✅ 支持多页面漫画浏览
- ✅ 添加交互式导航控件
- ✅ 增强错误处理和用户体验
- ✅ 优化图片加载和显示

### v1.0.0 - 基础功能
- ✅ 故事生成功能
- ✅ 插图生成功能
- ✅ 双语内容支持
- ✅ 词汇学习功能
- ✅ 故事寓意解读

## 🤝 贡献

欢迎提交 Issue 和 Pull Request 来改进这个项目！

## 📄 许可证

MIT License

---

**让AI为孩子们创作更多美好的故事！** 🌈