不是 AI 不够强，而是你还没把它"接进前端"
这是一篇真正「前端视角」的 AI 应用落地实战，而不是模型科普。
🤔 为什么我要做这个「宠物冰球员」AI 应用？
最近刷掘金，你一定发现了一个现象 👇
- AI 很火
- 大模型很强
- 但真正能跑起来的 前端 AI 应用很少
很多同学卡在这一步：
❌ 会 Vue / React
❌ 会调接口
❌ 但不知道 AI 项目整体该怎么搭
于是我做了这个项目。
🎯 项目一句话介绍
上传一张宠物照片，生成一张专属"冰球运动员形象照"
而且不是随便生成，而是可控的 AI👇
- 🧢 队服编号
- 🎨 队服颜色
- 🏒 场上位置（守门员 / 前锋 / 后卫）
- ✋ 持杆方式（左 / 右）
- 🎭 绘画风格（写实 / 日漫 / 国漫 / 油画 / 素描）
📌 这是一个典型的「活动型 AI 应用」
非常适合：
- 冰球协会宣传
- 宠物社区裂变
- 活动拉新
- 朋友圈分享
🧠 整体架构：前端 + AI 是怎么配合的？
先上结论👇
前端负责"意图"，AI 负责"生成"
整体流程非常清晰：
Vue3 前端
↓
图片上传（Coze 文件 API）
↓
调用 Coze 工作流
↓
AI 生成图片
↓
前端展示结果🧩 技术选型一览
| 模块 | 技术 |
|---|---|
| 前端 | Vue3 + Composition API |
| AI 编排 | Coze 工作流 |
| 网络 | fetch / HTTP |
| 上传 | FormData |
| 状态 | ref 响应式 |
🖼️ 前端第一难点：图片上传 & 预览
AI 应用里，最容易被忽略的不是 AI，而是用户体验。
❓ 一个问题
图片很大，用户点「生成」之后什么都没发生，会怎样？
答案是：
他以为你的网站卡死了
✅ 解决方案：本地预览（不等上传）
ini
const reader = new FileReader()
reader.readAsDataURL(file)
reader.onload = e => {
imgPreview.value = e.target.result
}📌 这里的关键点是：
FileReaderreadAsDataURL- base64 直接渲染
图片还没上传，用户已经"看见反馈"了
🎛️ 表单不是表单，而是「AI 参数面板」
很多人写表单是为了提交数据
但 AI 应用的表单，本质是 Prompt 的一部分
ini
<select v-model="style">
<option value="写实">写实</option>
<option value="日漫">日漫</option>
<option value="油画">油画</option>
</select>最终在调用工作流时，变成：
css
parameters: {
style,
uniform_color,
uniform_number,
position,
shooting_hand
}💡 前端的职责不是"生成 AI"
💡 而是"让 AI 更听话"
🤖 AI 真正干活的地方：Coze 工作流
一个非常重要的认知👇
❌ AI 逻辑不应该写在前端
✅ AI 逻辑应该写在「工作流」里
🧩 我的 Coze 工作流结构（核心）
你搭建的工作流大致包含：
- 📷 图片理解（imgUnderstand）
- 🔍 特征提取
- 📝 Prompt 生成
- 🎨 图片生成
- 🔗 输出图片 URL
👉 工作流地址（可直接参考）
📌 工作流 = AI 后端
前端只需要做一件事👇
php
fetch('https://api.coze.cn/v1/workflow/run', {
method: 'POST',
headers: {
Authorization: `Bearer ${patToken}`,
'Content-Type': 'application/json'
},
body: JSON.stringify({
workflow_id,
parameters
})
})📤 文件上传：前端 AI 项目的必修课
❓ 为什么不能直接把图片传给工作流？
因为：
- 工作流不能直接接收本地文件
- 必须先上传，换一个
file_id
✅ 正确姿势：FormData
go
const formdata = new FormData()
formdata.append('file', input.files[0])返回结果中会拿到：
json
{
"data": {
"id": "file_xxx"
}
}然后在工作流参数里传👇
css
picture: JSON.stringify({ file_id })📌 AI 应用用的还是老朋友：HTTP + 表单
⏳ 状态管理：AI 应用的"信任感来源"
AI ≠ 秒出结果
所以状态提示非常重要👇
ini
status.value = "图片上传中..."
status.value = "正在生成..."如果出错👇
ini
if (ret.code !== 0) {
status.value = ret.msg
}一个没有状态提示的 AI 应用 = 不可用
⚠️ AI 应用的三个"隐藏坑"
1️⃣ AI 是慢的
- loading 必须有
- 按钮要禁用
- 用户要知道现在在干嘛
2️⃣ AI 是不稳定的
- 可能失败
- 可能生成不符合预期
- 可能 URL 为空
📌 前端必须兜底，而不是假设 AI 永远成功
3️⃣ AI 应用 ≠ CRUD
它更像一次：
用户意图 → AI 理解 → 内容生成 → 结果反馈
✅ 做完这个项目，你真正掌握了什么？
如果你完整跑通这套流程，你至少学会了👇
- ✅ Vue3 Composition API 实战
- ✅ 文件上传 & 图片预览
- ✅ AI 工作流的正确使用方式
- ✅ 前端如何"驱动 AI"
- ✅ 一个完整 AI 应用的工程思路
✍️ 写在最后：前端 + AI 的真正价值
很多人担心👇
「前端会不会被 AI 取代？」
我的答案是：
❌ 只会写页面的前端会被取代
✅ 会设计 AI 交互体验的前端不会
AI 很强
但AI 不知道用户要什么
而前端，正是连接「用户意图」和「AI 能力」的桥梁。