# SeeWord

**Repository Path**: brandy-empty-bottle/see-word

## Basic Information

- **Project Name**: SeeWord
- **Description**: 一款基于生成式 AI 的现代化视觉语言学习应用。区别于传统翻译工具，该项目通过多模态识别（OCR + 物体检测）将图片实时转化为“有声单词卡”，提供权威词典风格的释义与双语朗读功能。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-03-13
- **Last Updated**: 2026-03-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 见词 (SeeWord)

这是一个基于 **Vue 3 + TypeScript** 开发的现代化 AI 视觉语言学习应用。它不仅仅是一个 OCR 翻译器，更是一个**智能的视觉单词本**。通过拍照或上传图片，应用能自动识别图片中的文字或物体，提供**权威词典风格**的释义，并配合**高质量双语发音**，帮助用户在真实场景中高效学习英语。



## 核心功能 (Core Features)

### 1.双模态智能识别 (Dual-Mode Recognition)
- **OCR 文字提取**: 自动检测图片中的英文文本，提取并翻译。
- **物体智能识别**: 如果图片中没有明显文字，AI 会自动识别图中的核心物体（如“南瓜”、“猫”），并提供对应的英文单词。

### 2.词典级专业释义 (Dictionary-Style Definitions)
- **极简风格**: 摒弃冗长的机器翻译感，提供类似纸质词典的**精简释义**。
- **词性标注**: 明确标注词性（如 `n.` 名词, `vt.` 动词, `adj.` 形容词），帮助用户准确掌握用法。
- **核心词义**: 智能提炼最核心的中文含义，一目了然。

### 3. 沉浸式语音体验 (Immersive Audio)
- **Volcano TTS 引擎**: 集成字节跳动火山引擎 TTS，提供极其自然的拟人发音。
- **智能语种切换**: 
  - 英文原文使用地道的美式/英式发音。
  - 中文释义使用清晰的标准普通话。
- **无感加载与缓存**: 内置音频缓存机制和 Loading 状态反馈，首次播放后再次点击**0延迟**，体验丝般顺滑。

### 4.原生级交互设计 (Native-Like UI)
- **可拖拽详情页**: 底部详情面板支持**手势拖拽**（Bottom Sheet），可上滑查看更多、下滑关闭，手感媲美原生 App。
- **动态交互**: 精心设计的卡片动画、加载沙漏（⏳）和播放状态反馈。
- **现代化 UI**: 采用纯白卡片、圆润边框和细腻阴影，视觉风格清新现代。

---

## 技术栈 (Tech Stack)

本项目采用前沿的前端技术栈构建，注重性能与开发体验：

- **前端框架**: [Vue 3](https://vuejs.org/) (Composition API + Script Setup)
- **语言**: [TypeScript](https://www.typescriptlang.org/) (全类型覆盖，开发更安全)
- **构建工具**: [Vite](https://vitejs.dev/) (秒级热更新)
- **样式**: CSS3 (Flexbox/Grid, CSS Variables, Transitions)
- **AI 服务**:
  - **视觉模型**: Moonshot AI (Kimi) `moonshot-v1-8k-vision-preview` —— 负责图像理解与内容生成。
  - **语音合成**: ByteDance Volcano TTS (火山引擎) —— 负责高质量语音生成。

---

## 快速开始 (Getting Started)

### 1. 环境准备
确保本地已安装 [Node.js](https://nodejs.org/) (v16+)。

### 2. 安装依赖
```bash
npm install
# 或者
pnpm install
```

### 3. 配置环境变量
在项目根目录下新建 `.env` 文件，填入你的 API Key：

```env
# Moonshot AI (Kimi) 配置
VITE_KIMI_API_ENDPOINT=https://api.moonshot.cn/v1
VITE_KIMI_API_KEY=sk-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

# 火山引擎 TTS 配置
VITE_AUDIO_APP_ID=your_app_id
VITE_AUDIO_ACCESS_TOKEN=your_access_token
VITE_AUDIO_CLUSTER_ID=volcano_tts
# 默认英文音色 (中文音色代码中已自动处理)
VITE_AUDIO_VOICE_NAME=BV001_streaming 
```

### 4. 启动开发服务器
```bash
npm run dev
```
打开浏览器访问 `http://localhost:5173` 即可开始使用。

---

## 项目结构 (Project Structure)

```
src/
├── components/      
│   └── PictureCard.vue  # 核心组件：图片展示、上传交互、重新上传提示
├── lib/             
│   └── audio.ts         # 音频核心库：封装 TTS API、Base64 转 Blob、音色管理
├── App.vue              # 主应用：包含 AI 调用逻辑、状态管理、拖拽面板实现
├── assets/              # 静态资源 (图标、默认图片)
└── main.ts              # 入口文件
```

## 开发心得
本项目展示了如何将**生成式 AI (AIGC)** 能力落地到具体的前端场景中。通过精心打磨的 Prompt 工程和细致的 UI 交互优化，将冷冰冰的 API 变成了有温度的学习工具。