Visual Vocab Builder

Visual Vocab Builder — Skill 手册

项目简介

上传一张图片，AI（Gemini）自动识别画面中的物体，打上英文词汇标注（含音标、词性、中文翻译、例句），并生成一段文学风格的场景描述，支持 TTS 朗读。

技术栈：React 19 + Vite + Tailwind CSS + @google/genai

---

环境要求

• Node.js（建议 v18+）
• 有效的 Gemini API Key（从 Google AI Studio 获取）

---

启动步骤

第一次运行

# 1. 进入项目目录
cd /Users/tricia/Downloads/visual-vocab-builder

# 2. 安装依赖
npm install

# 3. 创建环境变量文件
cp .env.example .env.local

# 4. 编辑 .env.local，填入真实的 Gemini API Key
#    将 MY_GEMINI_API_KEY 替换为你的 key
#    GEMINI_API_KEY="AIza..."

# 5. 启动开发服务器
npm run dev