Parent-child-education

KO | EN

gitlite — search

#hacktoberfest #ai #golang #rust #docker #nodejs #awesome #cli #kubernetes #awesome-list #vue #ios #mcp #open-source

Parent-child-education

(★ 12)

👨‍👩‍👧‍👦 星伴童行是一个面向低领家庭的智能亲子教育平台，集成 AI 识物、智能对话与学习启蒙等核心功能，让科技成为亲子成长的得力助手。🔐 安全可靠：JWT 身份认证 + bcrypt 密码加密 + SVG 验证码防护，保障用户数据安全。🤖 AI 能力集成：Coze 工作流实现拍照识物，DeepSeek 大模型驱动智能对话，支持语音交互。📱 移动端优先：rem 响应式布局 + Ant Design Mobile 组件库。🏗️ 架构清晰：前端 React + Vite，后端 Koa + MySQL，RESTful API 设计规范。⭐欢迎 Star 收藏，一起打造更智能、更有温度的亲子教育体验！

Parent-child-education Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 👨‍👩‍👧‍👦 Parent-child education（星伴童行）

**本项目使用：**

> **一个专注于 0-12 岁亲子教育的智能陪伴平台**，集成 AI 识物、智能对话、学习启蒙、作业辅导、睡前故事等功能，让科技成为亲子成长的得力助手。家长可以在平台上注册账号，为孩子创建专属的学习环境。

## ✨ 项目亮点

### 🎯 智能教育场景

#### AI 拍照识物
- 支持相册上传和实时拍照两种方式
- 图片自动转换为 Base64 格式传输
- 调用 Coze 工作流实现图像识别
- AI 智能讲解物品用途、安全提示，支持语音朗读

#### 智能对话助手
- 集成 DeepSeek 大语言模型
- 支持多轮对话上下文记忆
- 专为亲子教育场景优化的系统提示词
- 实时流式响应，打字机效果展示
- 基于 LangChain 的对话链，支持会话管理和历史记录

#### 知识问答（RAG）
- 基于 LangChain 和向量数据库的知识库问答
- 支持多学科知识库（数学、语文、英语、科学）
- 使用 HNSWLib 向量存储实现语义检索
- 会话记忆功能，支持上下文理解
- 自动清理过期会话，优化资源占用

#### AI 作业辅导 Agent
- 基于 LangChain ReAct Agent 的智能作业辅导
- 集成数学计算、语文解释、英语翻译等工具
- 支持学科选择（数学、语文、英语、科学）
- 支持学生水平分级（小学、初中、高中）
- 会话隔离，不同学科独立记忆

#### 学习进度追踪
- 记录总学习时长、答题数量、连续学习天数
- 按学科统计学习进度和正确率
- 可视化展示最近 7 天学习趋势
- 成就徽章系统，激励持续学习
- 本地数据持久化存储

#### 意见反馈系统
- 支持多种反馈类型（功能建议、问题反馈、体验优化、内容纠错）
- 关联具体功能模块，精准定位问题
- 五星评分系统，量化用户体验
- 联系方式可选，方便后续跟进
- 反馈状态追踪（待处理、已查看、已解决）

#### 作业辅导系统
- 拍照搜题：拍照即可获取题目答案和解析
- 文字搜题：支持手动输入题目内容
- 分步讲解：AI 提供详细的解题步骤
- 学习记录：自动保存搜题历史，支持复习巩固

#### 语音交互功能
- 支持语音输入（浏览器 Web Speech API）
- 实时语音转文字显示
- AI 回复支持语音朗读
- 适合低龄儿童使用场景

#### 睡前故事馆
- 个性化故事生成：选择角色、情节、风格
- 多种故事风格：温馨柔和、轻松有趣、寓教于乐、魔法奇幻
- 可调节故事长度：简短、适中、较长、长篇
- 支持故事复制和重新生成

#### 科学小实验
- 丰富的实验库：化学、物理、生物、光学等多个领域
- 详细的实验步骤：分步指导，安全提示
- 实验原理讲解：帮助孩子理解科学知识
- 互动问答：巩固学习成果

### 📱 移动端优先

#### rem 响应式布局
- 动态计算根元素字体大小，实现完美适配
- 监听窗口 resize 事件，实时响应屏幕变化
- 1rem = 屏幕宽度/10，设计稿还原度高

#### 主题切换系统
- 内置 default（橙色主题）和 green（绿色主题）
- 主题配置包含主色、次色、加载色、渐变色等
- 组件级主题注入，灵活扩展

#### 流畅交互体验
- 精心设计的 CSS 动画与过渡效果
- Ant Design Mobile 组件库提供原生般体验
- 滑动切换、点击反馈等细节打磨

### 🔐 安全可靠

#### JWT 身份认证
- 登录成功后生成 7 天有效期的 Token
- 前端请求拦截器自动携带 Token
- 后端中间件验证 Token 合法性
- Token 过期自动跳转登录页

#### 密码加密存储
- 使用 bcrypt 进行密码哈希
- saltRounds = 10，安全性与性能平衡
- 数据库只存储加密后的密码哈希

#### 验证码防护
- SVG 图形验证码，防止暴力破解
- 验证码 ID + 验证码内容双重校验
- 支持刷新验证码

### 🤖 AI 能力集成

#### Coze 工作流
- 图像识别工作流，支持物体识别
- 返回结构化数据：物品名称、描述、安全提示
- 支持语音合成，自动朗读识别结果
- 作业辅导工作流：题目识别、答案解析

#### DeepSeek 大模型
- 兼容 OpenAI API 格式，接入成本低
- 中文理解能力强，适合教育场景
- 支持系统提示词定制角色

#### 语音交互能力
- 支持语音输入（浏览器 Web Speech API）
- AI 回复支持语音朗读
- 适合低龄儿童使用场景

### 🏗️ 架构设计

#### 前后端分离
- 前端 React + Vite，后端 Koa + MySQL
- RESTful API 设计，接口规范清晰
- 支持跨域请求（CORS）

#### MVC 分层架构
- Routes 路由层：定义接口地址
- Controllers 控制层：处理业务逻辑
- Models 模型层：数据库操作封装

#### 统一错误处理
- Axios 响应拦截器统一捕获错误
- Toast 提示用户友好的错误信息
- HTTP 状态码区分错误类型

## 🚀 功能特性

### P1 - 核心功能

| 功能模块 | 描述 |
|---------|------|
| 🔐 用户系统 | 登录/注册、JWT 认证、账户管理、头像上传、昵称修改、密码修改 |
|  智能对话 | LangChain 驱动的 AI 对话助手，支持多轮对话、SSE 流式响应、TTS 朗读 |
| � AI 作业辅导 | LangChain Agent 驱动，支持数学计算、语文解释、英语翻译工具 |
| 🔍 知识问答 | RAG 检索增强生成，基于知识库的精准问答 |
| 📸 AI 识物 | 拍照识别物品，AI 智能讲解，支持语音朗读 |

### P2 - 重要功能

| 功能模块 | 描述 |
|---------|------|
| 📊 学习进度 | 学习统计、进度图表、成就徽章系统 |
| 📝 意见反馈 | 反馈提交、评分、反馈管理 |
| 🎤 TTS 朗读 | 语音合成，支持暂停、恢复、停止 |
| � 作业辅导 | 拍照搜题、文字搜题、分步讲解、学习记录 |
| 🎤 语音交互 | 语音输入、实时转文字、AI 语音朗读 |

### P3 - 内容功能

| 功能模块 | 描述 |
|---------|------|
| 📚 学习启蒙 | 古诗词、英语单词、科学实验 |
| 📖 睡前故事 | 个性化故事生成，支持角色、情节、风格选择 |
| 🔬 科学实验 | 丰富的实验库，分步指导、互动问答 |
| � 成长任务 | 亲子打卡，习惯养成 |

### P4 - 辅助功能

| 功能模块 | 描述 |
|---------|------|
| 📱 个人中心 | 收藏管理、浏览历史、通知设置、帮助中心 |
| 🎨 主题切换 | 多种配色主题，个性化体验 |
| 🔒 安全认证 | SVG 验证码、密码加密、Token 过期自动跳转 |

## 🛠️ 技术栈

### 前端 (Frontend)

| 技术 | 版本 | 用途 |
|------|------|------|
| React | 19.2.0 | 现代 UI 框架，函数式组件 + Hooks |
| React Router | 7.13.0 | 前端路由管理 |
| Vite | 7.3.1 | 极速构建与热重载 |
| Ant Design Mobile | 5.42.3 | 移动端 UI 组件库 |
| Axios | 1.13.5 | HTTP 请求库 |
| Less | 4.5.1 | CSS 预处理器 |
| dayjs | 1.11.13 | 日期处理库 |

### 后端 (Backend)

| 技术 | 版本 | 用途 |
|------|------|------|
| Koa | 3.1.1 | Node.js Web 框架 |
| Koa Router | 14.0.0 | 路由管理 |
| MySQL2 | 3.17.2 | MySQL 数据库连接 |
| JWT | 9.0.3 | 身份认证 |
| Bcrypt | 6.0.0 | 密码加密 |
| SVG Captcha | 1.4.0 | 验证码生成 |
| OpenAI | 6.25.0 | AI 能力接入 |
| LangChain | 1.4.4 | AI 应用开发框架 |
| @langchain/openai | 1.4.7 | LangChain OpenAI 集成 |
| @langchain/community | 1.1.29 | LangChain 社区组件 |
| hnswlib-node | 3.0.0 | 向量数据库 |
| dotenv | 17.3.1 | 环境变量管理 |

## 📁 项目结构

```plaintext
Parent-child-education/
├── Frontend/                    # 前端项目
│   ├── src/
│   │   ├── Components/          # 公共组件
│   │   │   ├── ImageCaptureAndProcess/  # 图像拍摄与处理组件
│   │   │   ├── RecognitionResult/       # 识别结果展示组件
│   │   │   ├── LearnWordsResult/        # 单词学习结果组件
│   │   │   ├── LoadingSpinner.jsx       # 加载动画组件
│   │   │   ├── Skeleton.jsx             # 骨架屏组件
│   │   │   ├── TTSButton.jsx            # 语音朗读按钮组件
│   │   │   └── HomeCard.jsx             # 首页卡片组件
│   │   ├── Pages/               # 页面组件
│   │   │   ├── Login.jsx               # 登录页面
│   │   │   ├── Register.jsx            # 注册页面
│   │   │   ├── Home.jsx                # 首页
│   │   │   ├── AIPage.jsx              # AI 功能页
│   │   │   ├── AIChat.jsx              # AI 对话页
│   │   │   ├── Recognition.jsx         # 拍照识别页
│   │   │   ├── LearnWords.jsx          # 单词学习页
│   │   │   ├── LearnPoem.jsx           # 古诗词学习页
│   │   │   ├── SciencePage.jsx         # 科学实验页
│   │   │   ├── Habit.jsx               # 习惯养成页
│   │   │   ├── SleepStory.jsx          # 睡前故事页
│   │   │   ├── HomeworkTutor.jsx       # 作业辅导页
│   │   │   ├── PhotoSearch.jsx         # 拍照搜题页
│   │   │   ├── QuestionAnalysis.jsx    # 题目解析页
│   │   │   ├── StudyRecord.jsx         # 学习记录页
│   │   │   ├── VoiceInteraction.jsx    # 语音交互页
│   │   │   ├── HomeworkAgent.jsx       # AI 作业辅导 Agent 页
│   │   │   ├── KnowledgeQA.jsx         # 知识问答（RAG）页
│   │   │   ├── Feedback.jsx            # 意见反馈页
│   │   │   ├── StudyProgress.jsx       # 学习进度页
│   │   │   ├── MinePage.jsx            # 个人中心
│   │   │   ├── AccountSetting.jsx      # 账户设置
│   │   │   ├── MyContentPage.jsx       # 我的内容页
│   │   │   ├── NotificationSetting.jsx # 通知设置页
│   │   │   └── HelpCenter.jsx          # 帮助中心页
│   │   ├── Http/                   # HTTP 请求封装
│   │   ├── Styles/                 # 样式文件
│   │   ├── Utils/                  # 工具函数
│   │   │   ├── rem.js              # rem 适配工具
│   │   │   ├── scrollManager.js    # 滚动管理工具
│   │   │   ├── chatHistory.js      # 对话历史本地存储
│   │   │   ├── tts.js              # TTS 语音朗读工具
│   │   │   └── loadingManager.js   # 全局加载状态管理
│   │   ├── Hooks/                  # 自定义 Hooks
│   │   │   └── useLoading.js       # 加载状态 Hook
│   │   ├── App.jsx                 # 应用入口
│   │   └── main.jsx                # React 挂载点
│   ├── public/                     # 静态资源
│   ├── package.json
│   └── vite.config.js
│
├── Backend/                     # 后端项目
│   ├── src/
│   │   ├── Config/              # 配置文件
│   │   │   └── database.js      # 数据库配置
│   │   ├── Controllers/         # 控制器层
│   │   │   ├── authController.js           # 认证控制器
│   │   │   ├── cozeController.js           # Coze AI 控制器
│   │   │   ├── deepseekController.js       # DeepSeek 控制器
│   │   │   ├── langchainController.js      # LangChain 对话控制器
│   │   │   ├── streamChatController.js     # SSE 流式对话控制器
│   │   │   ├── knowledgeRAGController.js   # 知识问答 RAG 控制器
│   │   │   ├── homeworkAgentController.js  # AI 作业辅导 Agent 控制器
│   │   │   ├── learningProgressController.js # 学习进度控制器
│   │   │   └── feedbackController.js       # 意见反馈控制器
│   │   ├── Models/              # 数据模型层
│   │   │   └── userModel.js     # 用户模型
│   │   ├── Routes/              # 路由层
│   │   │   ├── authRoutes.js         # 认证路由
│   │   │   ├── cozeAPI.js            # Coze API 路由
│   │   │   ├── deepseekAPI.js        # DeepSeek API 路由
│   │   │   ├── langchainAPI.js       # LangChain 对话路由
│   │   │   ├── homeworkAgentAPI.js   # 作业辅导 Agent 路由
│   │   │   ├── knowledgeRAGAPI.js    # 知识问答 RAG 路由
│   │   │   ├── feedbackAPI.js        # 意见反馈路由
│   │   │   └── learningProgressAPI.js # 学习进度路由
│   │   ├── Utils/               # 工具函数
│   │   │   ├── captcha.js       # 验证码工具
│   │   │   ├── jwt.js           # JWT 工具
│   │   │   ├── langchainConfig.js  # LangChain 配置与会话管理
│   │   │   └── sse.js           # SSE 流式响应工具
│   │   └── index.js             # 服务入口
│   └── package.json
│
└── README.md
```

## 🏃 快速开始

### 环境要求

- Node.js >= 18.0.0
- MySQL >= 8.0
- npm >= 9.0.0

### 1. 克隆项目

```bash
git clone https://github.com/harvest0623/Parent-child-education.git
cd Parent-child-education
```

### 2. 安装依赖

```bash
# 安装前端依赖
cd Frontend
npm install

# 安装后端依赖
cd ../Backend
npm install
```

### 3. 配置环境变量

在 `Backend` 目录下创建 `.env.local` 文件：

```env
# 数据库配置
DB_HOST=localhost
DB_USER=root
DB_PASSWORD=your_password
DB_NAME=parent_child_education

# Coze API 密钥
VITE_COZE_IMAGE_TO_TEXT_AND_VOICE=your_coze_api_key

# DeepSeek API 密钥
DEEPSEEK_API_KEY=your_deepseek_api_key
VITE_DEEPSEEK_API_KEY=your_deepseek_api_key
```

### 4. 初始化数据库

```sql
CREATE DATABASE parent_child_education CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
```

### 5. 启动服务

```bash
# 启动后端服务 (在 Backend 目录下)
npm run dev

# 启动前端服务 (在 Frontend 目录下，新开终端)
npm run dev
```

### 6. 访问应用

预览地址：[星伴童行](http://47.118.25.23:8083)

## 🔍 核心实现原理

### 1. 移动端 rem 适配方案

采用 rem 单位实现移动端多屏幕适配，核心思想是将设计稿按比例缩放：

```javascript
// Utils/rem.js - 立即执行函数
(function(win, doc) {
    const docEl = doc.documentElement;  // 获取 html 根元素
    const width = docEl.clientWidth;    // 获取视口宽度

// 设置 html 字体大小 = 视口宽度 / 10
    // 设计稿 375px 时，1rem = 37.5px
    docEl.style.fontSize = width / 10 + 'px';

// 监听窗口变化，动态调整
    win.addEventListener('resize', () => {
        const newWidth = docEl.clientWidth;
        docEl.style.fontSize = newWidth / 10 + 'px';
    });

// 设置 body 基础字体大小
    doc.body.style.fontSize = '16px';
})(window, document);
```

**使用方式**：CSS 中使用 rem 单位，如 `width: 2rem` 在 375px 屏幕上等于 75px。

---

### 2. LangChain 对话链与流式响应

基于 LangChain 构建带记忆功能的 AI 对话系统：

**后端 - LangChain 配置与会话管理**

```javascript
// Utils/langchainConfig.js
const { ChatOpenAI } = require('@langchain/openai');
const { ChatPromptTemplate, MessagesPlaceholder } = require('@langchain/core/prompts');
const { RunnableWithMessageHistory } = require('@langchain/core/runnables');
const { ChatMessageHistory } = require('@langchain/core/memory');

// 创建 LangChain 模型实例
const createLLM = (modelName = 'deepseek-chat') => {
    return new ChatOpenAI({
        modelName,
        openAIApiKey: process.env.VITE_DEEPSEEK_API_KEY,
        configuration: { baseURL: 'https://api.deepseek.com' },
        temperature: 0.7,
        maxTokens: 2000,
    });
};

// 会话管理器 - 管理多用户对话历史
class ChatSessionManager {
    constructor() {
        this.sessions = new Map();
        this.sessionTimeout = 30 * 60 * 1000;
    }

getSessionHistory(sessionId) {
        if (!this.sessions.has(sessionId)) {
            this.sessions.set(sessionId, {
                history: new ChatMessageHistory(),
                lastAccess: Date.now(),
            });
        }
        return this.sessions.get(sessionId).history;
    }
}

// 创建带记忆的对话链
const createChatChain = (sessionId, options = {}) => {
    const llm = createLLM(options.modelName);
    const prompt = ChatPromptTemplate.fromMessages([
        ['system', options.systemPrompt || '你是一个专业的亲子教育助手'],
        new MessagesPlaceholder('history'),
        ['human', '{input}'],
    ]);

const chain = prompt.pipe(llm);
    return new RunnableWithMessageHistory({
        runnable: chain,
        getMessageHistory: () => chatSessionManager.getSessionHistory(sessionId),
        inputMessagesKey: 'input',
        historyMessagesKey: 'history',
    });
};
```

---

### 3. SSE 流式响应

使用 Server-Sent Events 实现流式对话：

```javascript
// Backend/Utils/sse.js
async function createSSEStream(ctx, handler) {
    ctx.set({
        'Content-Type': 'text/event-stream',
        'Cache-Control': 'no-cache',
        'Connection': 'keep-alive',
    });
    ctx.respond = false;

await handler({
        sendStart: (data) => ctx.res.write(`data: ${JSON.stringify({ type: 'start', ...data })}\n\n`),
        sendChunk: (content) => ctx.res.write(`data: ${JSON.stringify({ type: 'chunk', content })}\n\n`),
        sendEnd: (data) => {
            ctx.res.write(`data: ${JSON.stringify({ type: 'end', ...data })}\n\n`);
            ctx.res.end();
        },
    });
}
```

---

### 4. AI 作业辅导 Agent

基于 LangChain Agent 实现作业辅导：

```javascript
// Backend/Controllers/homeworkAgentController.js
const { createReactAgent } = require('@langchain/langgraph/prebuilt');

// 创建数学计算工具
const mathCalculatorTool = new Tool({
    name: 'math_calculator',
    description: '用于数学计算',
    func: async (input) => {
        const result = Function(`"use strict"; return (${input})`)();
        return `计算结果: ${result}`;
    },
});

// 根据学科选择工具
const tools = [mathCalculatorTool];
if (subject === '语文') tools.push(chineseExplanationTool);
if (subject === '英语') tools.push(englishTranslationTool);
```

---

### 5. 知识问答 RAG

基于 LangChain RAG 实现知识问答：

```javascript
// Backend/Controllers/knowledgeRAGController.js
const { HNSWLib } = require('@langchain/community/vectorstores/hnswlib');
const { OpenAIEmbeddings } = require('@langchain/openai');
const { RecursiveCharacterTextSplitter } = require('@langchain/textsplitters');

// 创建向量存储
async function getVectorStore(subject) {
    const embeddings = new OpenAIEmbeddings({
        openAIApiKey: process.env.DEEPSEEK_API_KEY,
        configuration: { baseURL: 'https://api.deepseek.com' },
    });

// 加载知识库文档
    const documents = await loadKnowledgeDocuments(subject);

// 分割文档
    const splitter = new RecursiveCharacterTextSplitter({
        chunkSize: 500,
        chunkOverlap: 50,
    });
    const splitDocs = await splitter.splitDocuments(documents);

// 创建向量存储
    return await HNSWLib.fromDocuments(splitDocs, embeddings);
}
```

---

### 6. TTS 语音合成

基于浏览器 Web Speech API 实现语音朗读：

```javascript
// Frontend/Utils/tts.js
class TTSService {
    speak(text, options = {}) {
        this.utterance = new SpeechSynthesisUtterance(text);
        this.utterance.rate = options.rate || 1;
        this.utterance.pitch = options.pitch || 1;
        this.utterance.volume = options.volume || 1;
        this.utterance.lang = options.lang || 'zh-CN';
        this.synth.speak(this.utterance);
    }

pause() { this.synth.pause(); }
    resume() { this.synth.resume(); }
    stop() { this.synth.cancel(); }
}
```

---

### 7. JWT 身份认证流程

完整的身份认证流程包含 Token 生成、携带、验证三个环节：

**后端 - 登录成功生成 Token**

```javascript
// Controllers/authController.js
const jwt = require('jsonwebtoken');

async function login(ctx) {
    const { phone, password } = ctx.request.body;
    
    // 验证用户存在
    const user = await findUserByPhone(phone);
    if (!user) {
        ctx.status = 400;
        ctx.body = { message: '账号不存在' };
        return;
    }

// 验证密码
    const ok = await bcrypt.compare(password, user.password_hash);
    if (!ok) {
        ctx.status = 400;
        ctx.body = { message: '密码错误' };
        return;
    }

// 生成 JWT Token（有效期 7 天）
    const token = jwt.sign(
        { id: user.id, phone: user.phone },  // 载荷
        '666',                                // 密钥
        { expiresIn: '7d' }                   // 过期时间
    );

ctx.body = {
        code: 1,
        message: '登录成功',
        token,
        user: { id: user.id, phone: user.phone }
    };
}
```

**后端 - Token 验证中间件**

```javascript
// Utils/jwt.js
function verifyToken() {
    return async (ctx, next) => {
        const token = ctx.request.header.authorization;
        
        if (!token) {
            ctx.status = 416;
            ctx.body = { code: 0, message: '请先登录' };
            return;
        }

try {
            const decoded = jwt.verify(token, '666');
            if (decoded.id) {
                ctx.userId = decoded.id;  // 将用户 ID 注入上下文
                await next();
            }
        } catch (error) {
            ctx.status = 416;
            ctx.body = { code: 0, message: 'token 无效' };
        }
    };
}

// 在需要认证的路由上使用
router.post('/chat', verifyToken(), deepseekChat);
```

**前端 - Axios 请求拦截器自动携带 Token**

```javascript
// Http/index.js
import axios from 'axios';
import { Toast } from 'antd-mobile';

// 请求拦截器：自动携带 Token
axios.interceptors.request.use(request => {
    const token = localStorage.getItem('token');
    if (token) {
        request.headers.Authorization = token;
    }
    return request;
});

// 响应拦截器：统一错误处理
axios.interceptors.response.use(
    (response) => {
        if (response.data.code !== 1) {
            Toast.show({ icon: 'fail', content: response.data.message });
            return Promise.reject(response);
        }
        return response;
    },
    (res) => {
        Toast.show({ icon: 'fail', content: res.response.data.message });
        
        // Token 过期，跳转登录页
        if (res.status == 416) {
            setTimeout(() => {
                window.location.href = '/login';
            }, 2000);
        }
        return Promise.reject(res);
    }
);
```

---

### 8. AI 图像识别流程

采用「前端采集 → Base64 编码 → 后端转发 → Coze 工作流」的完整链路：

**前端 - 图片采集与编码**

```javascript
// Components/ImageCaptureAndProcess/Index.jsx
export default function ImageCaptureAndProcess({ onRecognition }) {
    const fileInputRef = useRef(null);
    const videoRef = useRef(null);
    const canvasRef = useRef(null);

// 方式一：相册上传
    const handleImageUpload = (e) => {
        const file = e.target.files[0];
        if (file) {
            const imageUrl = URL.createObjectURL(file);
            setSelectedImage(imageUrl);
            onRecognition(file);  // 回调识别函数
        }
    };

// 方式二：实时拍照
    const handleCamera = async () => {
        // 打开摄像头
        const stream = await navigator.mediaDevices.getUserMedia({ video: true });
        videoRef.current.srcObject = stream;
        videoRef.current.play();

// 延时拍照
        setTimeout(() => {
            const canvas = canvasRef.current;
            const context = canvas.getContext('2d');
            canvas.width = videoRef.current.videoWidth;
            canvas.height = videoRef.current.videoHeight;
            context.drawImage(videoRef.current, 0, 0, canvas.width, canvas.height);
            
            // 停止摄像头
            stream.getTracks().forEach(track => track.stop());
            
            // Canvas 转 Blob
            canvas.toBlob(blob => {
                const file = new File([blob], 'captured-image.jpg', { type: 'image/jpeg' });
                onRecognition(file);
            }, 'image/jpeg', 0.8);
        }, 100);
    };
}
```

**前端 - 调用识别接口**

```javascript
// Pages/Recognition.jsx
export default function Recognition() {
    const [recognitionResult, setRecognitionResult] = useState(null);

const realRecognition = async (file) => {
        // File 转 Base64
        const dataUrl = await new Promise((resolve, reject) => {
            const reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = () => resolve(reader.result);
            reader.onerror = (err) => reject(err);
        });

// 显示加载提示
        Toast.show({
            content: 'AI识别中...',
            duration: 0,
            icon: 'loading',
            maskClickable: false
        });

// 发送识别请求
        const res = await axios.post('/api/coze/recognition', {
            img: dataUrl  // data:image/jpeg;base64,/9j/4AAQ...
        });

Toast.clear();
        setRecognitionResult(res.data);
    };
}
```

**后端 - 转发到 Coze 工作流**

```javascript
// Controllers/cozeController.js
const axios = require('axios');

async function recognition(ctx) {
    const { img } = ctx.request.body;  // 接收 Base64 图片

try {
        // 调用 Coze 工作流 API
        const res = await axios({
            method: 'post',
            url: 'https://z2sjhbyckh.coze.site/run',
            headers: {
                'Authorization': `Bearer ${process.env.VITE_COZE_IMAGE_TO_TEXT_AND_VOICE}`,
                'Content-Type': 'application/json'
            },
            data: { image_base64: img }
        });

ctx.body = {
            code: 1,
            data: res.data  // 返回识别结果
        };
    } catch (error) {
        ctx.status = 500;
        ctx.body = { code: 0, message: error.message };
    }
}
```

---

### 9. DeepSeek 智能对话

使用 OpenAI SDK 兼容接口接入 DeepSeek 大模型：

```javascript
// Controllers/deepseekController.js
const OpenAI = require('openai');

const openai = new OpenAI({
    baseURL: 'https://api.deepseek.com',
    apiKey: process.env.VITE_DEEPSEEK_API_KEY,
});

async function deepseekChat(ctx) {
    const { message } = ctx.request.body;

if (!message) {
        ctx.status = 400;
        ctx.body = { code: 0, message: '消息不能为空' };
        return;
    }

try {
        const completion = await openai.chat.completions.create({
            model: "deepseek-chat",
            messages: [
                { role: "system", content: "你是一个专业的教育助手" },
                { role: "user", content: message }
            ],
        });

ctx.body = {
            code: 1,
            message: completion.choices[0].message.content
        };
    } catch (error) {
        ctx.status = 500;
        ctx.body = { code: 0, message: '请求失败' };
    }
}
```

---

### 10. 密码加密存储

使用 bcrypt 库实现密码的安全存储与验证：

```javascript
// Controllers/authController.js
const bcrypt = require('bcrypt');
const saltRounds = 10;  // 加密强度

// 注册时加密密码
async function register(ctx) {
    const { password } = ctx.request.body;
    
    // 生成密码哈希（自动加盐）
    const hashedPassword = await bcrypt.hash(password, saltRounds);
    
    // 存储到数据库
    await createUser({ phone, password_hash: hashedPassword, nickname });
}

// 登录时验证密码
async function login(ctx) {
    const { password } = ctx.request.body;
    const user = await findUserByPhone(phone);
    
    // 比对密码
    const isMatch = await bcrypt.compare(password, user.password_hash);
    if (!isMatch) {
        ctx.status = 400;
        ctx.body = { message: '密码错误' };
        return;
    }
}
```

**安全特性**：
- 每次加密自动生成随机盐值
- 相同密码每次加密结果不同
- 无法从哈希值反推原密码
- saltRounds = 10 约需 100ms 计算，平衡安全与性能

---

### 11. SVG 验证码生成

使用 svg-captcha 库生成图形验证码：

```javascript
// Utils/captcha.js
const svgCaptcha = require('svg-captcha');

function generateCaptcha() {
    const captcha = svgCaptcha.create({
        size: 4,           // 验证码长度
        noise: 2,          // 干扰线条数
        color: true,       // 彩色
        background: '#f0f0f0'  // 背景色
    });

return {
        id: Date.now().toString(),  // 验证码 ID
        text: captcha.text,          // 验证码文本
        svg: captcha.data            // SVG 图片数据
    };
}

// 控制器中生成验证码
function getCaptcha(ctx) {
    const captcha = generateCaptcha();
    // 将 captcha.id 和 captcha.text 存入缓存/数据库用于校验
    ctx.body = {
        code: 1,
        captchaId: captcha.id,
        captchaSvg: captcha.svg
    };
}
```

---

### 12. 主题切换系统

组件级主题配置，支持灵活扩展：

```javascript
// Components/ImageCaptureAndProcess/Index.jsx
export default function Index({ theme = 'default' }) {
    const themeConfig = {
        default: {
            primary: '#ff7a45',
            secondary: '#f5f5f5',
            loading: '#ff6b6b',
            voice: '#ffd166',
            gradient: ['#fef3e6', '#e6f7ff']
        },
        green: {
            primary: '#4caf50',
            secondary: '#f5f5f5',
            loading: '#4caf50',
            voice: '#4caf50',
            gradient: ['#e8f5e8', '#fff3e0']
        }
    };

const currentTheme = themeConfig[theme] || themeConfig.default;

return (
        <div style={{ '--primary': currentTheme.primary }}>
            {/* 组件内容 */}
        </div>
    );
}
```

---

### 13. 语音交互实现

使用浏览器 Web Speech API 实现语音输入和语音合成：

```javascript
// Pages/VoiceInteraction.jsx
const startRecording = async () => {
    try {
        const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
        if (!SpeechRecognition) {
            setError('您的浏览器不支持语音识别，请使用 Chrome 浏览器');
            return;
        }

const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
        streamRef.current = stream;

const recognition = new SpeechRecognition();
        recognition.lang = 'zh-CN';
        recognition.continuous = true;
        recognition.interimResults = true;
        recognitionRef.current = recognition;

recognition.onresult = (event) => {
            let final = '';
            let interim = '';
            for (let i = 0; i < event.results.length; i++) {
                const transcript = event.results[i][0].transcript;
                if (event.results[i].isFinal) {
                    final += transcript;
                } else {
                    interim += transcript;
                }
            }
            if (final) finalTranscriptRef.current = final;
            setInterimText(interim || final);
        };

recognition.start();
        setStatus('recording');
    } catch (err) {
        if (err.name === 'NotAllowedError' || err.name === 'NotFoundError') {
            setError('请允许麦克风权限后重试');
        } else {
            setError('无法启动录音功能，请稍后重试');
        }
    }
};

// 语音合成
const speakText = (text) => {
    if (!window.speechSynthesis) { setStatus('idle'); return }
    window.speechSynthesis.cancel()
    const utterance = new SpeechSynthesisUtterance(text)
    utterance.lang = 'zh-CN'
    utterance.rate = 0.9
    utterance.pitch = 1.1
    utterance.onend = () => setStatus('idle')
    utterance.onerror = () => setStatus('idle')
    setStatus('speaking')
    window.speechSynthesis.speak(utterance)
}
```

---

### 14. 睡前故事生成

个性化故事生成系统，支持角色、情节、风格选择：

```javascript
// Pages/SleepStory.jsx
const generateStory = useCallback(async () => {
    setLoading(true)
    setError(null)

try {
        const plotText = selectedPlot
            ? PLOTS.find(p => p.id === selectedPlot)?.name
            : customPlot.trim()

const params = {
            character: CHARACTERS.find(c => c.id === selectedCharacter)?.name,
            character_desc: CHARACTERS.find(c => c.id === selectedCharacter)?.desc,
            plot: plotText,
            style: STYLES.find(s => s.id === selectedStyle)?.name,
            length: storyLength
        }

const response = await axios.post('/api/coze/sleep-story', params)

if (response.data.code === 1) {
            setStoryResult(response.data.data)
            setCurrentStep(4)
        } else {
            throw new Error(response.data.message || '生成失败')
        }
    } catch (err) {
        console.error('生成故事失败:', err)
        setError(err.message || '生成故事时出现错误，请重试')
    } finally {
        setLoading(false)
    }
}, [selectedCharacter, selectedPlot, customPlot, selectedStyle, storyLength])
```

## 🧩 开发指南

### 添加新页面

1. 在 `Frontend/src/Pages/` 下创建页面组件
2. 在 `Frontend/src/App.jsx` 中添加路由配置
3. 在 `Frontend/src/Styles/` 下创建对应的样式文件

### 添加新接口

1. 在 `Backend/src/Routes/` 下创建路由文件
2. 在 `Backend/src/Controllers/` 下创建控制器
3. 在 `Backend/src/index.js` 中注册路由

### 数据库操作

```javascript
// Models/userModel.js
const db = require('../Config/database.js');

class UserModel {
    async findByPhone(phone) {
        const [rows] = await db.execute('SELECT * FROM users WHERE phone = ?', [phone]);
        return rows[0];
    }
}
```

## 📦 依赖说明

### 前端生产依赖

- `react` & `react-dom`：UI 框架核心
- `react-router-dom`：路由管理
- `antd-mobile`：移动端组件库
- `axios`：HTTP 请求
- `dayjs`：日期处理库
- `less`：CSS 预处理器

### 后端生产依赖

- `koa` & `koa-router`：Web 框架
- `mysql2`：数据库连接
- `jsonwebtoken`：JWT 认证
- `bcrypt`：密码加密
- `svg-captcha`：验证码生成
- `@koa/cors`：跨域处理
- `@langchain/core`：LangChain 核心组件
- `langchain`：AI 应用开发框架
- `@langchain/openai`：LangChain OpenAI 集成
- `@langchain/community`：LangChain 社区组件
- `hnswlib-node`：向量数据库
- `openai`：AI 能力接入

## 🔄 版本兼容性

### 浏览器兼容性

- **推荐浏览器**：Chrome 90+、Edge 90+、Safari 14+
- **语音功能**：需要浏览器支持 Web Speech API（Chrome 33+）
- **摄像头功能**：需要浏览器支持 MediaDevices API（Chrome 53+）

### 移动端兼容性

- **iOS**：Safari 14+、Chrome 90+
- **Android**：Chrome 90+、系统 WebView 90+

### 功能降级说明

| 功能 | 最低要求 | 降级方案 |
|------|----------|----------|
| 语音识别 | Chrome 33+ | 不支持时显示提示，建议使用 Chrome |
| 摄像头拍照 | Chrome 53+ | 仅支持相册上传 |
| 语音合成 | 现代浏览器 | 不支持时静默，不显示朗读按钮 |

## 🤝 贡献指南

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

## 📄 许可证

本项目采用 MIT 许可证，详见 [LICENSE](https://github.com/harvest0623/Parent-child-education/blob/main/LICENSE) 文件。

## 📞 联系方式

- GitHub Issues: [提交问题](https://github.com/harvest0623/Parent-child-education/issues)
- 邮箱：<3367741939@qq.com> or <harvest060523@gmail.com>

---

**如果这个项目对你有帮助，欢迎给一个 ⭐ Star！**

> 👨‍👩‍👧‍👦 亲子教育，为亲子提供智能教育，帮助他们更好地探索世界

Parent-child-education

Parent-child-education Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Parent-child-education

Parent-child-education Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README