项目简介
本项目是一个基于 React 的移动端 Web 应用，核心功能是通过上传图片，利用 AI 自动分析图片内容，提取最能描述图片的一个简单英文单词（A1~A2词汇），并给出例句和详细解释，帮助用户通过拍照学习英语单词。适合英语初学者、儿童或需要通过场景记忆单词的用户。
主要功能
- 图片上传与预览
用户可以上传本地图片，应用会显示图片预览。
- **AI单词识别** 应用会将图片发送到 AI 接口（moonshot-v1-8k-vision-preview），自动分析图片内容，返回： - 图片描述（image_discription） - 代表性英文单词（representative_word） - 结合图片和单词的英文例句（example_sentence） - 详细解释（explanation），以"Look at..."开头，分句分行 - 相关生活问句（explanation_replys）
-
AI语音生成
应用会将生成的例句进行生成对应的语音，用户可选择播放
-
结果展示
- 显示识别出的单词
- 显示例句
- 展开后可查看图片、详细解释和相关问句
技术架构
- 前端框架：React 19
- 构建工具：Vite
- 样式：CSS（App.css、组件样式）
- AI接口：moonshot.cn
- 组件划分 ：
- App 根组件：负责主逻辑、状态管理、与 AI 通信
- PictureCard 子组件：负责图片上传、预览、单词展示
目录结构
text
src/
App.jsx // 根组件，主逻辑
App.css // 全局样式
index.css // 入口样式
main.jsx // 入口文件
components/
PictureCard/
index.jsx // 图片上传与展示组件
style.css // 组件样式
assets/ // 静态资源
public/ // 公共静态资源组件通信与状态管理
-
父组件 App
- 负责所有核心状态（单词、例句、解释、图片预览等）
- 负责与 AI 接口通信
- 通过 props 向 PictureCard 传递单词、音频、上传回调等
-
子组件 PictureCard
- 负责图片上传、预览
- 通过回调函数将图片数据传递给父组件
- 只负责展示单词，不处理业务逻辑
-
数据流
- 子组件上传图片 → 调用父组件回调 → 父组件请求 AI → 更新状态 → 通过 props 传递给子组件和页面其他部分
环境变量
需在 .env.local 配置 AI API Key，例如： VITE_KIMI_API_KEY=你的API密钥
特色与亮点
- 极简交互：只需上传图片，即可获得单词、例句和详细解释
- AI驱动：自动分析图片内容，智能推荐最合适的基础英文单词
- 移动端友好：界面适配移动端，适合随时随地拍照学习
- 组件化设计：结构清晰，易于扩展和维护
适用场景
- 英语启蒙、单词记忆
- 儿童英语学习
- 旅行、生活场景下的实物识词
- 需要通过图片辅助记忆单词的用户
总结
ShotWord 项目通过 React + AI 技术，将图片识别与英语学习结合，极大地降低了单词学习门槛。其组件化、状态管理清晰，易于二次开发和功能扩展。只需简单上传图片，即可获得丰富的学习内容，是一款创新且实用的英语学习工具。