🏒 前端 AI 应用实战：用 Vue3 + Coze，把宠物一键变成冰球运动员！

不是 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
}

📌 这里的关键点是：

FileReader
readAsDataURL
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

👉 工作流地址（可直接参考）

🔗 www.coze.cn/work_flow?w...

📌 工作流 = 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 能力」的桥梁。