至于从零到一，用 Vue3 + Kimi 大模型建立「拍照记单词」AI 应用

前言——为什么你会卡在「AI 前端」这一步？

“一个人的公司” 正在成为可能。但多数前端同学面对以下痛点：

• 不知道如何在前端直接调用多模态大模型。
• 担心跨域、文件上传、语音合成等环节需要后端配合。
• 缺少结构化的 Prompt，导致返回结果难以直接渲染。老实说，

本篇文章将手把手演示。方便你突破这些瓶颈——实现「拍照记单词」的完整 AI 流程：图片上传 → Kimi Vision 解析 → JSON 输出 → TTS 发音。

一、项目架构总览

vue3-ts-cameraword/
├── src/
│ ├── App.vue # 主页面主要业务逻辑
│ ├── components/
│ │ └── PictureCard.vue # 拍照卡片组件
│ ├── lib/
│ │ └── audio.ts # TTS 语音合成模块
│ └── main.ts # 入口文件
├── .env.local # 环境变量
└── vite.config.ts # Vite 配置

技术栈：Vue3 + TypeScript + Vite + Kimi Vision API + 火山引擎 TTS

二、主要功能实现

从图片上传来看。FileReader 的妙用

传统文件上传往往需要后端转码，而多模态大模型直接接受 Base64 编码的图片。我们利用 FileReader 在前端完成图片转码，实现即时预览与 API 调用。

// PictureCard.vue
const updateImageData = async : Promise => {
const file = .files?.，其实，if return;老实说，return new Promise => {
const reader = new FileReader;reader.readAsDataURL;// 转为 Base64
reader.onload = => {
const data = reader.result as string;imgPreview.value = data;// 本地预览
emit;// 传给父组件
resolve;}，按理说，reader.onerror = => reject;})，};

• readAsDataURL 将文件转为 data:image/png;话说回来，base64,...
• 该字符串既可用于 本地预览，也可直接填入模型的 image_url

调用 Kimi Vision：多模态 API 实战

Kimi 的 moonshot-v1-8k-vision-preview 支持图片+文字混合输入。只需把图片的 Base64 放进 content.

// App.vue
const update = async => {
const endpoint = import.meta.env.VITE_KIMI_API_ENDPOINT + '/chat/completions';话说回来，const headers = {
'Content-Type': 'application/json'。'Authorization': `Bearer ${import.meta.env.VITE_KIMI_API_KEY}`
};word.value = '分析中...';const response = await fetch(endpoint,{
method的观点是，'POST',headers。body: JSON.stringify({
model的观点是，'moonshot-v1-8k-vision-preview',messages:
}],stream: false
})
});const data = await response.json;const replyData = JSON.parse;// TODO: 根据 replyData 更新 UI
};

TIPS：`content` 必须是数组，才能同时携带图片和文字；返回值使用 JSON 格式便于前端直接解析。 话说回来，

Prompt设计：决定产品质量的关键

A well‑crafted Prompt guarantees consistent。easy‑to‑parse results.

const userPrompt = `
分析图片内容，找出最能描述图片的一个英文单词，尽量选择更简单的 A1~A2 难度词汇。返回 JSON 数据：
{
"image_discription": "图片描述","representative_word": "代表单词","example_sentence": "结合单词和图片给出简短例句"。"explaination": "以 Look at ... 开头，每句话独占一行，提供生活化问句","explanation_replys":
}
`;

• A1~A2 难度控制：确保初学者能快速记忆。
• JSON 输出：Simplifies front‑end parsing & UI rendering.
• "Look at ..." 引导：Lends a natural “看图说话” style.
• 问句：Create interaction & reinforce learning.

TTS语音合成：让单词“说出来”

The fire engine's TTS service turns example sentence into playable audio.

// lib/audio.ts
export const generateAudio = async => {
const endpoint = '/tts/api/v1/tts';const headers = {
'Content-Type': 'application/json','Authorization': `Bearer ${token}`
};不过，const payload = {
再看app，{ appid: appId,token,cluster: clusterId },user: { uid: 'bearbobo' },audio: {
voice_type: voiceName。encoding: 'ogg_opus',speed_ratio: 1.0,emotion: 'happy'
},request: {
再看reqid，Math.random.toString,text,text_type: 'plain',operation: 'query'
}
};const res = await fetch });return createBlobURL).data);}，// 工具函数：Base64 → Blob URL
function createBlobURL:string{
const byteCharacters=atob;const byteNumbers=new Uint8Array;按理说，for{
byteNumbers=byteCharacters.charCodeAt;}
const blob=new Blob;return URL.createObjectURL;怎么说呢，}

在组件中播放非常简洁：

// PictureCard.vue
const playAudio==>{ new Audio.play;}，

三、Vite代理配置：解决跨域难题

// vite.config.ts
export default defineConfig({
plugins:,server:{
至于host。'0.0.0.0',// 局域网设备也能访问开发服务器
proxy:{
'/tts':{
target的观点是，'https://openspeech.bytedance.com',changeOrigin:true,rewrite:path=>path.replace
}
}
}
});不过，

• 'host':'0.0.0.0': 手机或平板可直接访问调试页面。
• /tts代理把本地请求透明转发到火山引擎，实现无缝语音合成。

四、无障碍设计：被忽略的细节也能让使用者用起来更舒服

The project deliberately hides native file input and uses a label to trigger it—making it screen‑reader friendly.

.input{display:none;} /* 隐藏原生控件 */
.upload{cursor:pointer;}

• `for` 与 `id` 的绑定让键盘/读屏器可以识别点击行为。
• `accept="image/*"` 限制只能选取图片，降低误操作概率。

五、效果展示

六、项目与思考

学到了什么

1. 多模态 API 调用方式：content 为数组，可混入图片与文字指令。
2. Prompt 工程：
3. 前端音频处理链路：

4. 可以改进的方向

   • 加入让分析过程实时可视化。
   • 实现
   • 接入
   • 利用 IndexedDB 本地存储学习记录，实现离线学习。
   ​

   七、环境配置与启动

   创建 .env.local 并填入你的密钥信息：

   VITEKIMIAPIKEY=sk-xxxxx # Kimi API Key
   VITEKIMIAPIENDPOINT=https://api.moonshot.cn/v1
   VITEAUDIOAPPID=xxxxx # 火山引擎 TTS 配置
   VITEAUDIOACCESSTOKEN=xxxxx
   VITEAUDIOCLUSTERID=volcanotts
   VITEAUDIOVOICENAME=enfemaleannamars_bigtts
   

   启动项目这方面。

   bash npm install npm run dev

   写在最终 这个项目虽小，却完整覆盖了「前端 AI 应用」链路——从 图片输入 到 多模态理解 再到 结构化输出 与 语音合成。老实说，它证明前端工程师可以不依赖后端。仅凭 API 与浏览器能力交付真实产品。