让蔬菜开口说英语：一个React开发者的AI创新实践拍照识菜学单词：React+AI打造智能英语学习应用在移动应用开发

拍照识菜学单词：React+AI打造智能英语学习应用

在移动应用开发中，将AI能力与React框架结合可以创造出令人惊艳的用户体验。我最近完成了一个AI单词拍照应用，通过拍照识别蔬菜并学习相关英语知识，下面分享该项目的技术亮点和难点。

语音是温柔女友，可以去选自己喜欢的语音模型。

屏幕录制 2025-07-06 204452.gif

🌟 项目亮点

1. 多模态AI能力整合

项目创新性地结合了图像识别与自然语言处理两大AI能力：

通过Moonshot视觉API解析图片中的蔬菜
设计精准Prompt获取结构化数据：

{
  "image_discription": "图片描述",
  "representative_words": ["tomato", "cucumber"],
  "example_sentence": "Stir-fried tomatoes with eggs...",
  "explaination": "Look at...",
  "explaination_replys": ["回复1", "回复2"]
}

使用TTS服务将例句转为语音，实现视听结合学习

2. 性能优化设计

音频处理：将TTS返回的Base64数据通过atob解码为二进制，生成Blob对象并创建临时URL，避免重复请求

const getAudioUrl = (base64Data) => {
  const byteCharacters = atob(base64Data);
  const byteArrays = new Uint8Array(byteCharacters.length);
  
  for(let i = 0; i < byteCharacters.length; i++) {
    byteArrays[i] = byteCharacters.charCodeAt(i);
  }
  
  const blob = new Blob([byteArrays], { type: 'audio/mp3' });
  return URL.createObjectURL(blob);
}

图片预览：使用FileReader将用户上传图片转为Base64，实现零延迟预览

const uploadImgData = (e) => {
  const reader = new FileReader();
  reader.readAsDataURL(file);
  reader.onload = () => {
    setImgPreview(reader.result);
  }
}

3. 精致的交互体验

渐进式展开面板：点击"Talk about it"按钮时，底部面板以平滑动画展开，展示图片和详细解释

.details .expand {
  width: 200px;
  height: 88vh;
  background-color: white;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  transition: height 0.3s ease;
}

视觉反馈设计：分析状态显示"分析中..."提示，卡片阴影增强层次感

4. 组件化架构

采用清晰的组件边界划分：

src/
├── components/
│   └── PictureCard/
│       ├── index.jsx  # 图片上传/预览组件
│       └── style.css
├── libs/
│   └── audio.js      # TTS服务封装
└── App.jsx           # 主逻辑/状态管理

PictureCard组件通过props接收父组件状态：

<PictureCard
  audio={audio}
  words={words}
  uploadImg={uploadImg}
/>

⚡ 技术难点突破

1. 大模型数据同步

当图片上传后需要协调多个状态更新：

// 顺序处理API响应
const replyData = JSON.parse(data.choices[0].message.content);
setWords(replyData.representative_words);
setSentence(replyData.example_sentence);
setExplainations(replyData.explaination.split('\n'));
setExpReply(replyData.explaination_replys);

// 异步生成音频
const audioUrl = await generateAudio(replyData.example_sentence);
setAudio(audioUrl);

2. 跨设备兼容性

通过CSS媒体查询实现移动端适配：

@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
}

使用user-scalable=no禁用页面缩放，确保移动端布局稳定：

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

3. 安全与配置管理

敏感信息通过环境变量隔离：

// .env.local
VITE_KIMI_API_KEY=your_api_key
VITE_AUDIO_ACCESS_TOKEN=your_token

// 使用
const token = import.meta.env.VITE_AUDIO_ACCESS_TOKEN;

项目价值

以前端技术与AI结合的创新为主：

技术要点：React状态管理+第三方API集成
用户体验：流畅的交互和即时反馈机制

通过组件化设计，核心的PictureCard组件可复用到其他学习场景中，如识别家具、交通工具等，形成可扩展的学习产品矩阵。

感觉以新思维改点代码、改点prompt，又是一个新项目，商业化思维这个赛季有点超模了。

让蔬菜开口说英语：一个React开发者的AI创新实践