# english-learning-assistant

**Repository Path**: flyPanda/english-learning-assistant

## Basic Information

- **Project Name**: english-learning-assistant
- **Description**: english-partner的前端部分
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: http://chat.forever24.cn
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-12-20
- **Last Updated**: 2025-12-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: english, Learning

## README

# 英语学习助手 (English Learning Assistant)

基于 React + Vite + Tailwind CSS 构建的现代化英语学习助手前端应用，与 GinSkeleton 后端 API 集成。

## 功能特性

- 🤖 **AI 对话**: 与 AI 助手进行英语学习对话
- 🌐 **语言检测**: 自动检测输入语言（中文/英文）
- 📝 **翻译功能**: 将中文翻译成自然流畅的英文
- ✍️ **语法检查**: 检查英文语法错误并提供修正建议
- 💡 **推荐表达**: 提供更地道的英文表达方式
- 💬 **实时对话**: 流畅的聊天界面体验
- 🎨 **现代化 UI**: 使用 Tailwind CSS 构建的美观界面

## 体验地址 (http://chat.forever24.cn)

## 技术栈

- **React 18** - 用户界面库
- **Vite** - 快速构建工具
- **Tailwind CSS** - 实用优先的 CSS 框架
- **Axios** - HTTP 客户端

## 项目结构

```
english-learning-assistant/
├── src/
│   ├── api/
│   │   └── chat.js          # API 调用逻辑
│   ├── components/
│   │   ├── MessageList.jsx  # 消息列表组件
│   │   ├── MessageItem.jsx  # 单条消息组件
│   │   ├── MessageInput.jsx # 消息输入组件
│   │   └── LanguageInsights.jsx # 语言分析组件
│   ├── App.jsx              # 主应用组件
│   ├── main.jsx             # 应用入口
│   └── index.css            # 全局样式
├── index.html
├── package.json
├── vite.config.js
└── tailwind.config.js
```

## 安装和运行

### 前置要求

- Node.js >= 16.0.0
- npm 或 yarn
- 后端 API 服务运行在 `http://172.18.53.18:20191`

### 安装依赖

```bash
cd english-learning-assistant
npm install
```

### 开发模式运行

```bash
npm run dev
```

应用将在 `http://localhost:5173` 启动

### 构建生产版本

```bash
npm run build
```

构建文件将输出到 `dist/` 目录

### 预览生产构建

```bash
npm run preview
```

## 环境变量

创建 `.env` 文件（可选）：

```env
VITE_API_BASE_URL=http://172.18.53.18:20191
```

如果不设置，默认使用 `http://172.18.53.18:20191`

## API 接口

### 发送消息

**POST** `/api/v1/chat/send`

请求体：
```json
{
  "user_id": "string",
  "message": "string"
}
```

响应：
```json
{
  "code": 200,
  "msg": "Success",
  "data": {
    "chatResponse": "AI 回复内容",
    "languageInsights": {
      "languageDetected": "Chinese|English|Unknown",
      "translation": "翻译内容（如果是中文）",
      "grammarIssues": ["语法问题列表"],
      "recommendedExpression": "推荐表达"
    }
  }
}
```

## 使用说明

1. **启动后端服务**: 确保 GinSkeleton 后端 API 服务正在运行（端口 20191）
2. **启动前端**: 运行 `npm run dev`
3. **开始对话**: 在输入框中输入您的问题或英文句子
4. **查看分析**: 系统会自动显示语言检测、翻译、语法检查等分析结果

## 功能说明

### 语言检测
- 自动识别输入是中文还是英文
- 根据语言类型提供相应的帮助

### 中文翻译
- 将中文输入翻译成自然流畅的英文
- 提供上下文相关的翻译建议

### 语法检查
- 检测英文句子中的语法错误
- 提供详细的错误说明和修正建议

### 推荐表达
- 提供更地道、更自然的英文表达方式
- 帮助提升英文写作水平

## 开发
目前还在积极开发中，欢迎大家一起共创。有独特创意、想法的可以提issue

### 添加新功能

1. 在 `src/components/` 中创建新组件
2. 在 `src/api/` 中添加新的 API 调用
3. 在 `App.jsx` 中集成新功能

### 样式定制

修改 `tailwind.config.js` 来自定义主题和样式。

## 许可证

ISC

## 相关项目

- [GinSkeleton](https://gitee.com/flyPanda/GinSkeleton) - 后端 API 服务