# 绘说绘画

**Repository Path**: xie-linfeng-666/painting-theory-painting

## Basic Information

- **Project Name**: 绘说绘画
- **Description**: 111111111111111111
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2025-08-28
- **Last Updated**: 2026-03-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 🎨 绘说绘画

<div align="center">

![Django](https://img.shields.io/badge/Django-5.2.2-092E20?style=flat-square&logo=django&logoColor=white)
![Vue](https://img.shields.io/badge/Vue-3.2.13-4FC08D?style=flat-square&logo=vue.js&logoColor=white)
![MongoDB](https://img.shields.io/badge/MongoDB-4.4-47A248?style=flat-square&logo=mongodb&logoColor=white)
![Python](https://img.shields.io/badge/Python-3.8+-3776AB?style=flat-square&logo=python&logoColor=white)
![JavaScript](https://img.shields.io/badge/JavaScript-ES6+-F7DF1E?style=flat-square&logo=javascript&logoColor=black)
![License](https://img.shields.io/badge/License-MIT-yellow.svg?style=flat-square)

**第二届 vivo AIGC 大赛作品**

[功能特性](#-核心功能) • [快速开始](#-快速开始) • [API 文档](#-api-文档) • [贡献指南](#-贡献指南)

让每个孩子的绘画都成为会讲故事的动画 🎬

[English](./README_EN.md) | 简体中文

</div>

---

## 📖 项目简介

> **绘说绘画**是一个创新的儿童教育应用，通过人工智能技术将儿童的绘画作品转化为生动的互动故事和动画。

本项目融合了多模态大模型、语音识别、图像生成和动画制作等前沿技术，为儿童提供一个富有创造力和趣味性的学习环境，让艺术创作与 AI 技术完美结合。

### ✨ 为什么选择绘说绘画？

- 🎨 **激发创造力** - 将孩子的涂鸦变成精美的动画故事
- 🤖 **AI 陪伴学习** - 智能对话系统，中英文双语互动
- 📚 **寓教于乐** - 在创作中学习词汇、语法和表达
- 🎬 **专业级动画** - SkyReels V2 生成高质量动画视频
- 🦴 **角色动起来** - 骨骼绑定技术让静态角色活灵活现
- 🎮 **沉浸式体验** - Unity WebGL 构建 3D 互动场景

---

## 🌟 核心功能

### 🎨 绘画创作
- 📷 支持拍照上传儿童绘画作品
- ✏️ 内置画板工具，支持手绘涂鸦
- 💾 自动保存到云端，随时访问
- 🖼️ 智能美化和优化图片

### 📖 故事生成
- 🎭 基于绘画内容自动生成双语剧本
- 🌟 支持多种故事主题（冒险、童话、教育、奇幻）
- 📝 智能分镜，自动拆分场景
- 🔀 支持短篇、中篇、长篇故事

### 🤖 智能对话
- 💬 多模态 AI 陪伴对话
- 🌍 中英文双语交互
- 📚 实时学习点记录和复习
- 🎯 个性化学习进度追踪

### 🎬 动画制作
- 🎥 SkyReels V2 专业级动画生成
- 🎬 自动添加配音和字幕
- 🎵 背景音乐智能搭配
- ⚡ 快速渲染，高效输出

### 🦴 骨骼绑定
- 🦴 AnimatedDrawings 技术支持
- 🏃 让静态角色动起来
- 🎭 自然流畅的动画效果
- 👆 支持交互式控制

### 🎮 3D 互动
- 🎮 Unity WebGL 沉浸式游戏场景
- 🕹️ 丰富的互动元素
- 👨‍👩‍👧‍👦 多人协作模式
- 🏆 成就和奖励系统

### 📚 学习记录
- 📊 完整的学习数据分析
- 🏅 成就徽章系统
- 📅 学习日历规划
- 📈 进度可视化报告

---

## 🛠️ 技术栈

### 后端技术

| 技术 | 版本 | 说明 |
|:----:|:----:|:----|
| ![Django](https://img.shields.io/badge/Django-5.2.2-092E20?style=flat-square) | 5.2.2 | Python Web 框架 |
| ![MongoDB](https://img.shields.io/badge/MongoDB-4.4-47A248?style=flat-square) | 4.4+ | NoSQL 文档数据库 |
| ![vivo](https://img.shields.io/badge/vivo-BlueLM-blue?style=flat-square) | V-2.0 | 多模态大模型 |
| ![SkyReels](https://img.shields.io/badge/SkyReels-V2-purple?style=flat-square) | V2 | 动画视频生成 |
| ![OSS](https://img.shields.io/badge/Aliyun-OSS-orange?style=flat-square) | - | 对象存储服务 |

### 前端技术

| 技术 | 版本 | 说明 |
|:----:|:----:|:----|
| ![Vue](https://img.shields.io/badge/Vue-3.2.13-4FC08D?style=flat-square) | 3.2.13 | 渐进式 JavaScript 框架 |
| ![Vue Router](https://img.shields.io/badge/Vue%20Router-4.0.3-4FC08D?style=flat-square) | 4.0.3 | 官方路由管理器 |
| ![Vuex](https://img.shields.io/badge/Vuex-4.0.0-4FC08D?style=flat-square) | 4.0.0 | 状态管理模式 |
| ![Three.js](https://img.shields.io/badge/Three.js-0.179.1-000000?style=flat-square) | 0.179.1 | 3D 图形库 |
| ![Video.js](https://img.shields.io/badge/Video.js-8.23.3-50A95F?style=flat-square) | 8.23.3 | HTML5 视频播放器 |

---

## 📁 项目结构

```
painting-theory-painting/
├── 📂 app/
│   ├── 📂 djangoProject/              # Django 后端项目
│   │   ├── 📂 djangoProject/          # 项目配置
│   │   │   ├── settings.py            # 核心配置文件
│   │   │   ├── urls.py                # 路由配置
│   │   │   └── cors.py                # CORS 中间件
│   │   │
│   │   ├── 📂 app_auth/               # 🔐 用户认证模块
│   │   ├── 📂 app_conversation/       # 💬 对话管理模块
│   │   ├── 📂 app_image/              # 🖼️ 图片处理模块
│   │   ├── 📂 app_scene/              # 🎬 场景管理模块
│   │   ├── 📂 app_story/              # 📖 故事管理模块
│   │   ├── 📂 app_record/             # 📊 记录管理模块
│   │   ├── 📂 app_setting/            # ⚙️ 设置管理模块
│   │   ├── 📂 app_service/            # 🤖 服务层（AI API 集成）
│   │   │
│   │   ├── 📂 app_model/              # 🤖 AI 模型集成
│   │   │   ├── integration_workflow.py # 完整工作流程
│   │   │   ├── 📂 动画生成/           # 🎬 SkyReels
│   │   │   ├── 📂 骨骼绑定/           # 🦴 AnimatedDrawings
│   │   │   ├── 📂 儿童剧本生成/       # 📝 剧本服务
│   │   │   ├── 📂 蓝心大模型/         # 🧠 vivo 模型
│   │   │   └── 📂 实时短语音识别/     # 🎤 语音识别
│   │   │
│   │   ├── 📂 static/                 # 📁 静态文件
│   │   │   └── 📂 unity_game/         # 🎮 Unity WebGL 构建
│   │   └── manage.py                  # Django 管理命令
│   │
│   └── 📂 draw-web/                   # 🎨 Vue 3 前端项目
│       ├── 📂 src/
│       │   ├── 📂 views/              # 📄 页面组件
│       │   ├── 📂 router/             # 🔀 路由配置
│       │   ├── 📂 store/              # 📦 Vuex 状态管理
│       │   └── 📂 assets/             # 🎨 静态资源
│       ├── package.json
│       └── 📂 public/
│
├── 📄 CLAUDE.md                        # Claude Code 开发指南
├── 📄 .gitignore                       # Git 忽略配置
└── 📄 README.md                        # 📖 项目说明文档
```

---

## 🚀 快速开始

### 📋 环境要求

- ![Python](https://img.shields.io/badge/Python-3.8+-blue?style=flat-square) Python 3.8 或更高版本
- ![Node.js](https://img.shields.io/badge/Node.js-14+-green?style=flat-square) Node.js 14 或更高版本
- ![MongoDB](https://img.shields.io/badge/MongoDB-4.4+-47A248?style=flat-square) MongoDB 4.4 或更高版本
- ![Redis](https://img.shields.io/badge/Redis-6+-red?style=flat-square) Redis 6+（可选，用于缓存）

### 🔧 安装步骤

#### 1️⃣ 克隆项目

```bash
git clone https://github.com/your-username/painting-theory-painting.git
cd painting-theory-painting
```

#### 2️⃣ 后端安装

```bash
# 进入 Django 项目目录
cd app/djangoProject

# 安装 Python 依赖
pip install -r requirements.txt

# 配置环境变量（参考下文配置说明）
cp .env.example .env
vim .env  # 编辑配置

# 数据库迁移
python manage.py migrate

# 创建超级用户（可选）
python manage.py createsuperuser

# 启动开发服务器
python manage.py runserver
```

✨ 后端服务将在 `http://localhost:8000` 运行

#### 3️⃣ 前端安装

```bash
# 进入前端项目目录
cd app/draw-web

# 安装依赖
npm install

# 启动开发服务器
npm run serve
```

✨ 前端服务将在 `http://localhost:8080` 运行

#### 4️⃣ 访问应用

| 服务 | 地址 | 说明 |
|:----:|:----:|:----|
| 🎨 前端页面 | `http://localhost:8080` | 主应用界面 |
| 🔌 后端 API | `http://localhost:8000` | RESTful API |
| 👨‍💼 Django 管理 | `http://localhost:8000/admin` | 后台管理 |

---

## ⚙️ 配置说明

### 🔐 环境变量配置

在 `app/djangoProject/.env` 文件中配置以下变量：

```bash
# ============================================
# vivo 蓝心大模型配置
# ============================================
VIVO_APP_ID=your_app_id
VIVO_APP_KEY=your_app_key
VIVO_API_DOMAIN=api-ai.vivo.com.cn
VIVO_API_URI=/vivogpt/completions
VIVO_DEFAULT_MODEL=vivo-BlueLM-V-2.0
VIVO_API_TIMEOUT=30

# ============================================
# 阿里云 OSS 配置
# ============================================
ALIYUN_OSS_ACCESS_KEY_ID=your_access_key_id
ALIYUN_OSS_ACCESS_KEY_SECRET=your_access_key_secret
ALIYUN_OSS_ENDPOINT=https://oss-cn-guangzhou.aliyuncs.com
ALIYUN_OSS_BUCKET_NAME=your_bucket_name
ALIYUN_OSS_BUCKET_DOMAIN=https://your_bucket.oss-cn-guangzhou.aliyuncs.com
```

> 💡 **提示**：请将上述配置替换为您的实际凭证。申请 vivo 蓝心大模型 API 请访问 [vivo AI 开放平台](https://ai.vivo.com.cn/)

### 🗄️ MongoDB 配置

在 `djangoProject/settings.py` 中配置 MongoDB 连接：

```python
import mongoengine

mongoengine.connect(
    db='vivo_database',
    host='localhost',
    port=27017,
    authentication_source='admin'
)
```

---

## 📚 API 文档

### 🔌 主要 API 端点

| 端点 | 方法 | 描述 | 认证 |
|:----:|:----:|:----:|:----:|
| `/api/auth/` | POST | 用户注册、登录 | ❌ |
| `/api/conversation/` | GET/POST | 对话管理 | ✅ |
| `/api/image/` | POST/GET | 图片上传、处理 | ✅ |
| `/api/scene/` | GET/POST | 场景管理 | ✅ |
| `/api/story/` | GET/POST | 故事管理 | ✅ |
| `/api/settings/` | GET/PUT | 用户设置 | ✅ |
| `/app/service/` | POST | 服务层接口 | ✅ |
| `/game/` | GET | Unity 游戏入口 | ❌ |

### 💡 API 调用示例

#### 图片上传并生成故事

```bash
curl -X POST http://localhost:8000/api/image/upload \
  -F "image=@drawing.jpg" \
  -H "Authorization: Bearer YOUR_TOKEN"
```

#### 创建对话

```bash
curl -X POST http://localhost:8000/api/conversation/create \
  -H "Content-Type: application/json" \
  -H "Authorization: Bearer YOUR_TOKEN" \
  -d '{
    "image_id": "IMAGE_ID",
    "message": "这是一个什么样的故事？"
  }'
```

#### 生成动画

```bash
curl -X POST http://localhost:8000/api/story/generate-animation \
  -H "Content-Type: application/json" \
  -H "Authorization: Bearer YOUR_TOKEN" \
  -d '{
    "story_id": "STORY_ID",
    "include_music": true,
    "include_subtitles": true
  }'
```

---

## 🔄 工作流程

### 完整动画生成流程

```mermaid
graph LR
    A[🎨 儿童语音/绘画] --> B[📝 剧本生成]
    B --> C[👤 角色提取]
    C --> D[🦴 骨骼绑定]
    D --> E[🎬 动画生成]
    E --> F[🎥 视频输出]

    style A fill:#f9f,stroke:#333,stroke-width:2px
    style B fill:#bbf,stroke:#333,stroke-width:2px
    style C fill:#bfb,stroke:#333,stroke-width:2px
    style D fill:#fbb,stroke:#333,stroke-width:2px
    style E fill:#ffb,stroke:#333,stroke-width:2px
    style F fill:#bfb,stroke:#333,stroke-width:2px
```

### 详细步骤

| 步骤 | 技术 | 说明 |
|:----:|:----:|:----|
| 1️⃣ | 🎤 **语音识别** | 实时短语音识别将儿童语音转为文本 |
| 2️⃣ | 🤖 **剧本生成** | 蓝心大模型生成双语故事剧本 |
| 3️⃣ | 👁️ **角色识别** | 从绘图中提取角色形象 |
| 4️⃣ | 🦴 **骨骼绑定** | AnimatedDrawings 添加骨骼动画 |
| 5️⃣ | 🎨 **场景生成** | 背景生成服务创建场景 |
| 6️⃣ | 🎬 **动画合成** | SkyReels V2 生成最终视频 |
| 7️⃣ | 🔊 **语音合成** | 添加中英文配音和字幕 |

---

## 🗺️ 前端路由

| 路由 | 组件 | 功能 |
|:----:|:----:|:----|
| `/` | entrance.vue | 🚪 应用入口 |
| `/home` | home.vue | 🏠 主页 |
| `/login` | login.vue | 🔑 用户登录 |
| `/register` | register.vue | 📝 用户注册 |
| `/camera` | camera.vue | 📷 拍照/绘画 |
| `/conversation` | conversation.vue | 💬 AI 对话 |
| `/story` | story.vue | 📖 故事创作 |
| `/picture-book` | picture-book.vue | 📚 绘本阅读 |
| `/raz-videos` | raz-videos.vue | 🎥 视频播放 |
| `/calendar-page` | CalendarPage.vue | 📅 学习日历 |
| `/setting` | setting.vue | ⚙️ 设置中心 |

---

## 👨‍💻 开发指南

### 🔧 后端开发

```bash
# 运行测试
python manage.py test

# Django Shell
python manage.py shell

# 查看数据库
python manage.py dbshell

# 收集静态文件
python manage.py collectstatic
```

### 🎨 前端开发

```bash
# 构建生产版本
npm run build

# 代码检查
npm run lint

# 代码格式化
npm run format
```

---

## 🚀 部署

### 🌍 生产环境部署

#### 1️⃣ 后端部署

使用 **Gunicorn** + **Nginx**：

```bash
# 安装 Gunicorn
pip install gunicorn

# 启动服务
gunicorn djangoProject.wsgi:application \
  --bind 0.0.0.0:8000 \
  --workers 4 \
  --timeout 120
```

#### 2️⃣ 前端部署

```bash
# 构建生产版本
npm run build

# 将 dist 目录部署到 Nginx
```

#### 3️⃣ MongoDB

配置副本集或分片集群以保证高可用性

#### 4️⃣ OSS + CDN

配置阿里云 CDN 加速静态资源访问

---

## 🤝 贡献指南

我们欢迎任何形式的贡献！🎉

### 📝 贡献流程

1. 🍴 Fork 本仓库
2. 🌿 创建特性分支 (`git checkout -b feature/AmazingFeature`)
3. 💾 提交更改 (`git commit -m 'Add some AmazingFeature'`)
4. 📤 推送到分支 (`git push origin feature/AmazingFeature`)
5. 🔀 开启 Pull Request

### 📐 代码规范

- **Python**: 遵循 [PEP 8](https://pep8.org/) 规范
- **JavaScript**: 遵循 [ESLint](https://eslint.org/) 配置
- **提交信息**: 使用清晰的描述性消息
- **文档**: 保持代码注释和文档的完整性

---

## 📊 数据模型

### 核心模型（MongoDB）

| 模型 | 说明 | 字段 |
|:----:|:----:|:----|
| **User** | 用户模型 | 用户名、昵称、年龄、性别、头像等 |
| **Image** | 图片模型 | 原始图片、美化图片、缩略图等 |
| **Story** | 故事模型 | 标题、主题、场景数量、语言等 |
| **StoryScene** | 故事场景 | 场景文本、语音、翻译等 |
| **Conversation** | 对话模型 | 会话管理 |
| **ConversationMessage** | 对话消息 | 用户语音、AI 回复等 |
| **LearningScene** | 学习场景 | 场景类型、完成状态等 |
| **LearningPoint** | 学习点记录 | 词汇、语法、发音等 |

---

## 📄 许可证

本项目采用 **MIT** 许可证 - 详见 [LICENSE](LICENSE) 文件

```
Copyright (c) 2025 绘说绘画团队

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction...
```

---

## 🙏 致谢

感谢以下开源项目和服务：

- [🤖 vivo 蓝心大模型](https://ai.vivo.com.cn/) - 提供多模态 AI 能力
- [🎬 SkyReels](https://www.skyreels.com/) - 动画生成技术支持
- [🦴 AnimatedDrawings](https://github.com/facebookresearch/AnimatedDrawings) - 骨骼动画技术
- [🎯 Django](https://www.djangoproject.com/) - 强大的 Python Web 框架
- [💚 Vue.js](https://vuejs.org/) - 渐进式 JavaScript 框架
- [🍃 MongoDB](https://www.mongodb.com/) - 灵活的 NoSQL 数据库

---

## 📞 联系方式

<div align="center">

### 🌟 如果觉得这个项目有帮助，请给我们一个 Star ⭐

[![GitHub stars](https://img.shields.io/github/stars/your-username/painting-theory-painting?style=social)](https://github.com/your-username/painting-theory-painting/stargazers)
[![GitHub forks](https://img.shields.io/github/forks/your-username/painting-theory-painting?style=social)](https://github.com/your-username/painting-theory-painting/network/members)

| 平台 | 链接 |
|:----:|:----:|
| 🏠 **项目主页** | [GitHub Repository](https://github.com/your-username/painting-theory-painting) |
| 🐛 **问题反馈** | [Issues](https://github.com/your-username/painting-theory-painting/issues) |
| 💡 **功能建议** | [Discussions](https://github.com/your-username/painting-theory-painting/discussions) |

---

**第二届 vivo AIGC 大赛作品**

让每个孩子的绘画都成为会讲故事的动画 🎨✨🎬

Made with ❤️ by 有实没力团队

</div>