# 单词闪卡

**Repository Path**: chen_kun_gitee/flashcard

## Basic Information

- **Project Name**: 单词闪卡
- **Description**: 图片抠图生成单词闪卡，帮助记忆单词
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-03-19
- **Last Updated**: 2026-03-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 英文单词闪卡小程序

一个基于 AI 图像识别的英文单词学习工具，通过拍照识别物体，自动生成英文单词闪卡。

## 功能特点

- 📸 **拍照上传**：支持图片上传，自动处理为 200x200 像素正方形格式
- ✂️ **图像分割**：使用阿里云图像分割 API，精准提取物体主体
-  **虚线边框**：为分割后的物体添加黑色虚线边框
- 🤖 **AI 识别**：调用通义千问大模型识别图片内容
- 📝 **单词卡片**：自动生成包含英文、中文、例句的精美闪卡
- 🎯 **一键生成**：全自动流程，上传即可生成单词卡片

## 技术栈

### 前端
- **框架**：Vue 3 + Vite
- **UI**：自定义组件
- **构建工具**：Vite 8.0.1

### 后端
- **运行时**：Node.js
- **框架**：Express
- **AI 服务**：
  - 阿里云 OSS（对象存储）
  - 阿里云图像分割 API
  - 阿里云通义千问大模型

## 快速开始

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

### 安装步骤

1. **克隆项目**
```bash
git clone https://gitee.com/chen_kun_gitee/flashcard.git
cd flashcard
```

2. **安装依赖**
```bash
npm install
```

3. **启动后端服务**
```bash
node server.js
```

4. **启动前端开发服务器**
```bash
npm run dev
```

5. **访问应用**
打开浏览器访问：http://localhost:5173/

## 使用说明

1. **上传图片**
   - 点击上传区域选择图片
   - 或拖拽图片到上传区域

2. **自动处理**
   - 图片自动裁剪为 200x200 像素
   - 上传到阿里云 OSS

3. **图像分割**
   - 自动分割物体与背景
   - 生成透明背景的 PNG 图片
   - 添加黑色虚线边框

4. **AI 识别**
   - 调用大模型识别物体
   - 返回中英文信息
   - 生成例句

5. **查看卡片**
   - 展示分割后的物体图片
   - 显示英文单词和中文翻译
   - 提供中英文例句

## 项目结构

```
flashcard/
├── src/
│   ├── components/
│   │   └── ImageUpload.vue    # 图片上传和卡片展示组件
│   ├── App.vue                # 主应用组件
│   ├── main.js                # 应用入口
│   └── style.css              # 全局样式
├── server.js                  # 后端服务器
├── package.json               # 项目依赖
├── vite.config.js             # Vite 配置
└── README.md                  # 项目说明文档
```

## API 配置

### 阿里云 OSS 配置
在 `server.js` 中配置：
```javascript
const ossConfig = {
  region: 'oss-cn-shanghai',
  accessKeyId: 'YOUR_ACCESS_KEY_ID',
  accessKeySecret: 'YOUR_ACCESS_KEY_SECRET',
  bucket: 'YOUR_BUCKET_NAME'
}
```

### 大模型配置
在 `server.js` 中配置：
```javascript
const DASHSCOPE_API_KEY = 'YOUR_DASHSCOPE_API_KEY'
const APP_ID = 'YOUR_APP_ID'
```

## 核心功能流程

```
1. 用户上传图片
   ↓
2. 前端处理图片（裁剪、压缩）
   ↓
3. 上传到阿里云 OSS
   ↓
4. 调用图像分割 API
   ↓
5. 添加虚线边框效果
   ↓
6. 调用大模型识别图片内容
   ↓
7. 生成单词卡片展示
```

## 卡片样式

- **图片区域**：白色背景，展示分割后的物体（带黑色虚线边框）
- **单词区域**：
  - 英文单词（32px 粗体）
  - 中文翻译（20px）
- **例句区域**：浅灰色背景，左侧蓝色装饰线
  - 英文例句
  - 中文翻译

## 开发说明

### 前端开发
- 使用 Vue 3 Composition API
- 组件位于 `src/components/`
- 样式使用 Scoped CSS

### 后端开发
- Express 提供 RESTful API
- `/api/upload` - 图片上传
- `/api/segment` - 图像分割
- `/api/recognize` - AI 识别

## 依赖包

### 前端依赖
- vue: ^3.x
- ali-oss: 阿里云 OSS SDK

### 后端依赖
- express: Web 框架
- cors: 跨域支持
- multer: 文件上传
- ali-oss: 阿里云 OSS SDK
- @alicloud/imageseg20191230: 图像分割 SDK
- @alicloud/openapi-client: 阿里云 API 客户端
- axios: HTTP 请求库

## 注意事项

1. **图片格式**：支持 JPG、PNG 格式
2. **图片大小**：建议不超过 5MB
3. **网络要求**：需要访问阿里云服务
4. **API 调用**：部分服务可能产生费用

## 许可证

MIT License

## 联系方式

- **项目地址**：https://gitee.com/chen_kun_gitee/flashcard.git
- **问题反馈**：请在 Gitee 提交 Issue

## 更新日志

### v1.0.0
- ✅ 图片上传功能
- ✅ 图像分割功能
- ✅ AI 识别功能
- ✅ 单词卡片生成
- ✅ 虚线边框效果
- ✅ 图片自动处理（200x200）