动漫网站在线免费观看专业做网站的软件

动漫网站在线免费观看,专业做网站的软件,wordpress英文版修改栏,上海建设安全生产协会网站在这个 AI 爆发的时代#xff0c;如何快速将一个创意转化为可落地的应用#xff1f;本文将带你通过字节跳动旗下的 AI 开发平台 Coze (扣子) 和前端框架 Vue3#xff0c;一步步实现一个有趣的“冰球宠物拟人化”项目。即使你是零基础的小白#xff0c;跟着这篇文章也能独立…在这个 AI 爆发的时代如何快速将一个创意转化为可落地的应用本文将带你通过字节跳动旗下的 AI 开发平台Coze (扣子)和前端框架Vue3一步步实现一个有趣的“冰球宠物拟人化”项目。即使你是零基础的小白跟着这篇文章也能独立完成你的第一个 AI 应用。一、 项目背景让宠物变身冰球明星本项目源于一个节日活动场景用户只需上传一张宠物的照片选择心仪的队服编号、颜色、比赛位置和艺术风格系统就会通过Coze AI 工作流生成一张该宠物“拟人化”后的冰球运动员海报。核心技术栈Coze (扣子)负责构建 AI 图片编辑工作流处理逻辑判断与图像生成。Vue3 (Composition API)负责前端界面搭建收集用户输入并展示结果。Coze API连接前端与 AI 后端实现数据传输。二、 后端核心在 Coze 上搭建 AI 工作流Coze 的工作流Workflow就像一个“加工厂”你只需要把节点Node像积木一样连接起来就能实现复杂的逻辑。1. 工作流架构解析根据你提供的截图我们的工作流由以下节点组成开始节点 (Start)定义输入参数包括picture用户上传的图片、style风格、uniform_number编号等。代码节点 (Code)这是提升严谨性的关键。由于用户输入的可能是数字如位置 0 代表守门员代码节点负责将这些原始数据转化为 AI 能听懂的自然语言描述。imgUnderstand (图片理解)分析用户上传的宠物图片提取出宠物的品种、毛色、特征。特征提取 (LLM)结合图片描述和用户选定的参数生成一段详细的绘图提示词Prompt。图像生成 (Image Generation)调用模型根据提示词生成最终的冰球运动员照片。结束节点 (End)将生成的图片 URL 返回给前端。2. 代码节点的逻辑 (1.ts)在工作流中我们写了一段简单的 TypeScript 代码来处理数据映射const position params.position 0 ? 守门员: (params.position 1 ? 前锋: 后卫); const shooting_hand params.shooting_hand 0 ? 左手: 右手;这段代码的作用是如果用户在前端选了“0”它会自动变成“守门员”字样传给 AI大大提高了生成图片的准确度。三、 前端实战Vue3 业务逻辑详解前端部分是我们与用户交互的窗口。我们将深入讲解App.vue中的每一行核心逻辑。1. 响应式状态管理在 Vue3 中我们使用ref来定义需要随用户操作而改变的数据const uniform_number ref(10); // 队服编号默认10 const status ref(); // 状态提示上传中 - 生成中 - 成功 const imgUrl ref(); // AI 生成后的图片地址 const imgPreview ref(); // 用户本地上传后的预览图2. 图片预览本地加载而非上传为了提升用户体验用户选完图片应立即看到预览而不是等上传成功。const updateImageData () { const input uploadImage.value; // 获取 DOM 元素 const file input.files[0]; // 获取选中的文件对象 const reader new FileReader(); // HTML5 文件读取器 reader.readAsDataURL(file); // 将图片转为 Base64 编码字符串 reader.onload (e) { imgPreview.value e.target.result; // 将 Base64 赋给预览图标签 } }核心逻辑利用FileReader在浏览器本地完成读取不消耗网络流量响应极快。3. 调用 Coze API两步走战略由于 Coze 的工作流不能直接接收原始文件流我们需要先将文件上传到 Coze 服务器换取file_id。第一步上传文件const uploadFile async () { const formData new FormData(); // 准备表单数据 formData.append(file, uploadImage.value.files[0]); const res await fetch(uploadUrl, { method: POST, headers: { Authorization: Bearer ${patToken} }, // 使用个人访问令牌鉴权 body: formData }); const ret await res.json(); return ret.data.id; // 返回 file_id };第二步运行工作流拿到file_id后连同用户选择的样式、位置等参数一起发给工作流const generate async () { status.value 图片上传中...; const file_id await uploadFile(); // 先拿 ID status.value 正在生成...; const parameters { picture: JSON.stringify({ file_id: file_id }), // 传入图片 ID style: style.value, position: position.value, // ...其他参数 } const res await fetch(workflowUrl, { method: POST, headers: { Authorization: Bearer ${patToken}, Content-Type: application/json }, body: JSON.stringify({ workflow_id, parameters }) // 指定工作流 ID 运行 }); const ret await res.json(); const data JSON.parse(ret.data); // 解析返回的 JSON 结果 imgUrl.value data.data; // 这里的 data.data 是最终生成的图片 URL };四、 关键点与避坑指南权限与 Token必须在 Coze 个人设置中申请PAT_TOKEN个人访问令牌并确保该 Token 有权限调用你创建的工作流。安全建议代码中的patToken不应直接写在前端正式项目中应通过后端转发防止 Token 泄露。Vite 环境变量在 Vue 项目中敏感信息如 Token建议放在.env.local文件中通过import.meta.env.VITE_xxx调用。五、拓展Vue3小细节1. Vue3 数据处理v-model VS ref在App.vue中处理用户输入主要有两种手段v-model双向绑定适用场景队服号码uniform_number、颜色选择uniform_color等普通表单。原理它建立了 HTML 表单元素与 JavaScript 变量之间的“实时同步”。当你在页面输入数字JS 里的变量会自动更新如果你在 JS 里修改了变量页面上的显示也会随之改变。refDOM 引用适用场景文件上传框input typefile。原理浏览器出于安全考虑禁止 JavaScript 脚本直接设置或修改文件上传框的value。因此v-model在这里无法实现“写入”失去了意义。我们必须通过ref直接拿到这个 HTML 元素DOM本身才能读取到用户选中的原始文件对象。2. 属性与事件绑定:src, change, click这是实现界面交互的“三剑客”:src属性绑定在 Vue 中普通的srcxxx只能指向静态路径。加上冒号的:srcimgUrl表示这是一个动态变量。当 AI 生成图片后JS 将新的地址赋值给imgUrl.valueVue 会自动侦测到变化并更新页面图片。change改变监听用法input typefile changeupdateImageData。作用当用户在文件选择器中选中了一张图片这个事件就会被触发。在项目中我们利用它来立即读取图片内容并实现本地预览让用户在点击“生成”前就能看到自己上传的照片。click点击监听用法button clickgenerate生成/button。作用这是用户发起 AI 生成请求的开关。点击后程序会依次执行“上传图片到服务器”和“调用 Coze 工作流”这两大步骤。3. FormData文件传输的集装箱在uploadFile函数中你会看到new FormData()的操作。作用在进行网络请求时普通的 JSON 格式文本流无法承载二进制的文件数据图片。形象理解FormData 就像一个特殊的快递盒专门用来封装文件以便通过 fetch 安全地发送到服务器。六、 总结通过“Coze 工作流 代码节点处理 Vue3 异步请求”我们成功把复杂的 AI 绘图逻辑封装成了一个简单的网页应用。这种“低代码 AI 后端 灵活前端”的模式是目前快速开发 AI 应用的主流选择。七、App.vue 源码templatedivclasscontainer!--左侧输入区域--divclassinput!--文件上传区域--divclassfile-input!--refuploadImage给这个 input 元素起个名字方便JS操作它 acceptimage/*只允许选择图片文件 required表单提交时必须选文件但这里我们手动处理所以主要是语义 changeupdateImageData当用户选择了文件就调用 updateImageData 函数--input typefilerefuploadImageacceptimage/*required changeupdateImageData//div!--图片预览只有 imgPreview 有值时才显示--img:srcimgPreviewalt预览图片v-ifimgPreview/!--表单设置区域--divclasssettings!--队服编号--divclassselectionlabel队服编号:/label!--v-model 双向绑定输入框内容 ↔ uniform_number 变量--input typenumberv-modeluniform_number//div!--队服颜色--divclassselectionlabel队服颜色:/labelselect v-modeluniform_coloroption value红红色/optionoption value绿绿色/optionoption value蓝蓝色/optionoption value白白色/optionoption value黑黑色/option/select/div!--位置--divclassselectionlabel位置:/label!--注意value 是数字但HTML中写成字符串也没问题Vue 会自动转--select v-modelpositionoption:value0前锋/optionoption:value1后卫/optionoption:value2守门员/option/select/div!--持杆手--divclassselectionlabel持杆/labelselect v-modelshooting_handoption value0左手/optionoption value1右手/option/select/div!--风格--divclassselectionlabel风格/labelselect v-modelstyleoption value写实写实/optionoption value乐高乐高/optionoption value国漫国漫/optionoption value日漫日漫/optionoption value油画油画/optionoption value涂鸦涂鸦/optionoption value素描素描/option/select/div/div!--生成按钮--divclassgeneratebutton clickgenerate生成/button/div/div!--右侧输出区域--divclassoutputdivclassgenerated!--显示AI生成的图片--img:srcimgUrlaltAI生成图片v-ifimgUrl/!--显示状态信息如“上传中...”--div v-ifstatus{{status}}/div/div/div/div/templatescript setup// 引入 Vue 3 的组合式 APIimport{ref,onMounted}fromvue// // 响应式数据定义相当于 Vue 2 的 data// // 表单数据用 ref 包裹变成响应式constuniform_numberref(10)// 默认编号 10constuniform_colorref(红)// 默认红色constpositionref(0)// 0前锋, 1后卫, 2守门员constshooting_handref(0)// 0左手, 1右手注意这里保持字符串和 option 一致conststyleref(写实)// 默认风格// 状态管理conststatusref()// 当前操作状态提示空 / 上传中 / 生成中...constimgUrlref()// AI 生成的图片 URL// DOM 引用用于操作文件输入框constuploadImageref(null)// 初始为 null挂载后指向 input 元素constimgPreviewref()// 本地预览图的 Base64 URL// // ⚙️ 环境变量 接口配置// constpatTokenimport.meta.env.VITE_PAT_TOKEN;// 从 .env 文件读取令牌constuploadUrlhttps://api.coze.cn/v1/files/upload;constworkflowUrlhttps://api.coze.cn/v1/workflow/run;constworkflow_id7584046122328555530;// 你的 Workflow ID// // 上传文件到 Coze 服务器// constuploadFileasync(){constinputuploadImage.value;// 检查是否选择了文件if(!input?.files||input.files.length0){alert(请先选择一张图片);returnnull;}// 创建 FormData 对象用于上传文件constformDatanewFormData();formData.append(file,input.files[0]);// 把第一个文件加进去try{// 发送 POST 请求上传文件constresawaitfetch(uploadUrl,{method:POST,headers:{Authorization:Bearer${patToken}// 携带认证令牌},body:formData});constretawaitres.json();console.log(上传响应:,ret);// 检查是否上传成功Coze 返回 code0 表示成功if(ret.code!0){status.value上传失败:${ret.msg};returnnull;}// 返回文件 ID用于后续 Workflow 调用returnret.data.id;}catch(error){status.value网络错误请检查网络或 PAT 令牌;console.error(上传出错:,error);returnnull;}};// // 调用 AI Workflow 生成图片// constgenerateasync(){// 重置状态imgUrl.value;status.value图片上传中...;// 第一步上传图片获取 file_idconstfile_idawaituploadFile();if(!file_id)return;status.value图片上传成功正在生成...;// 第二步准备参数调用 Workflowconstparameters{// ⚠️ 注意Coze 的 picture 参数要求是 JSON 字符串picture:JSON.stringify({file_id:file_id}),style:style.value,uniform_color:uniform_color.value,uniform_number:uniform_number.value,position:position.value,shooting_hand:shooting_hand.value,};try{constresawaitfetch(workflowUrl,{method:POST,headers:{Authorization:Bearer${patToken},Content-Type:application/json// 发送 JSON 数据},body:JSON.stringify({workflow_id,parameters})});constretawaitres.json();console.log(Workflow 响应:,ret);if(ret.code!0){status.value生成失败:${ret.msg};return;}// Coze 返回的是字符串化的 JSON需要再解析一次constdataJSON.parse(ret.data);imgUrl.valuedata.data;// 获取生成的图片 URLstatus.value;// 清空状态}catch(error){status.value生成请求失败请重试;console.error(生成出错:,error);}};// // ️ 图片预览功能// constupdateImageData(){constinputuploadImage.value;if(!input?.files||input.files.length0)return;constfileinput.files[0];console.log(选中的文件:,file);// 使用 FileReader 读取文件为 Base64constreadernewFileReader();reader.readAsDataURL(file);// 异步读取// 读取完成后触发reader.onload(e){imgPreview.valuee.target.result;// 赋值给预览变量};};/scriptstyle scoped.container{display:flex;flex-direction:row;align-items:start;justify-content:start;height:100vh;font-size:0.85rem;}.input{display:flex;flex-direction:column;min-width:330px;padding:20px;}.file-input{margin-bottom:16px;}.settings{display:flex;flex-direction:column;gap:12px;margin-top:1rem;}.selection{display:flex;align-items:center;gap:8px;}.selection input,.selection select{padding:4px;}.generate{margin-top:20px;}button{padding:10px20px;border:1px solid #333;background:#f5f5f5;cursor:pointer;}.output{padding:20px;width:100%;}.generated{width:400px;height:400px;border:1px solid #ccc;display:flex;justify-content:center;align-items:center;background:#fafafa;}.generated img{max-width:100%;max-height:100%;}/style