霜儿-汉服-造相Z-Turbo前端集成Vue.js实现实时图像生成预览界面最近在做一个挺有意思的项目需要把后端一个很厉害的AI图像生成模型——霜儿-汉服-造相Z-Turbo用网页的形式给用户用起来。模型本身很强大能根据文字描述生成各种精美的汉服人像但用户总不能每次都去敲命令行吧所以我们的任务就是给它做个好看又好用的“门面”。这个门面我选择了Vue.js来搭建。为什么是Vue因为它上手快、生态丰富对于这种需要频繁更新界面状态比如显示生成进度、刷新预览图的应用来说它的响应式系统简直是“天作之合”。今天我就来分享一下如何从零开始用Vue 3构建一个能与AI模型后端实时交互、动态预览生成效果的汉服图像创作平台。1. 项目初始化与环境搭建万事开头难但Vue让开头变得简单。我们首先把项目骨架搭起来。1.1 创建Vue 3项目现在创建Vue项目最省心的方式就是使用Vite。打开你的终端执行下面这行命令npm create vuelatest vue-hanfu-generator执行后命令行会交互式地让你选一些配置。对于我们这个项目我的选择是TypeScript选Yes。用TS能让代码更健壮尤其是和后端API交互时类型提示很有用。JSX选No。我们主要用单文件组件。Vue Router选No。我们这个单页应用暂时不需要路由。Pinia选Yes。状态管理库用来集中管理生成任务的状态如提示词、生成进度、图片列表等会很方便。ESLint / Prettier选Yes。保持代码风格统一。项目创建完成后进入目录并安装依赖cd vue-hanfu-generator npm install1.2 安装核心依赖除了Vue生态本身的包我们还需要几个关键的库来助力。npm install axios npm install element-plus element-plus/icons-vueaxios一个基于Promise的HTTP客户端我们将用它来调用后端的图像生成API。它比原生fetch更好用支持拦截器、请求取消等高级功能。element-plus与对应的图标库这是一套基于Vue 3的桌面端UI组件库。它提供了丰富的现成组件如按钮、输入框、进度条、通知等能让我们快速构建出美观且专业的界面把主要精力放在业务逻辑上。安装好后需要在入口文件通常是src/main.ts中全局引入Element Plus。// src/main.ts import { createApp } from vue import App from ./App.vue import ElementPlus from element-plus import element-plus/dist/index.css import * as ElementPlusIconsVue from element-plus/icons-vue const app createApp(App) // 注册所有图标 for (const [key, component] of Object.entries(ElementPlusIconsVue)) { app.component(key, component) } app.use(ElementPlus) app.mount(#app)2. 核心功能模块设计与实现环境准备好了我们来设计一下这个应用的核心功能模块。一个完整的图像生成界面大概需要这几块参数输入、任务触发、进度反馈、结果展示与操作。2.1 构建用户输入与参数面板用户首先需要告诉模型他们想要什么样的汉服图片。我们设计一个表单区域来收集这些信息。!-- src/components/GeneratorPanel.vue -- template div classgenerator-panel h3el-iconEditPen //el-icon 创作描述/h3 el-form :modelform label-width100px el-form-item label提示词 el-input v-modelform.prompt typetextarea :rows4 placeholder请详细描述你想要的汉服形象例如一位唐代少女身着齐胸襦裙裙摆绣有牡丹花纹在樱花树下回眸浅笑阳光明媚古风写实 maxlength500 show-word-limit / /el-form-item el-form-item label风格强度 el-slider v-modelform.strength :min0.1 :max2.0 :step0.1 show-input / span classtip数值越高生成结果越贴近你的描述但可能降低创造性。/span /el-form-item el-form-item label生成数量 el-input-number v-modelform.num :min1 :max4 / span classtip单次最多生成4张方便你挑选最满意的一张。/span /el-form-item el-form-item el-button typeprimary :iconPromotion :loadingisGenerating clickhandleGenerate {{ isGenerating ? 生成中... : 开始生成 }} /el-button el-button :iconRefreshRight clickhandleReset重置/el-button /el-form-item /el-form /div /template script setup langts import { ref, reactive } from vue import { Promotion, RefreshRight } from element-plus/icons-vue import { useGeneratorStore } from /stores/generator const generatorStore useGeneratorStore() const isGenerating ref(false) // 表单数据 const form reactive({ prompt: , strength: 0.8, num: 1, }) const handleGenerate async () { if (!form.prompt.trim()) { ElMessage.warning(请输入创作描述哦~) return } isGenerating.value true try { await generatorStore.submitTask(form) } finally { isGenerating.value false } } const handleReset () { form.prompt form.strength 0.8 form.num 1 } /script这个组件用了Element Plus的Form、Input、Slider等组件快速搭建了一个直观的参数面板。v-model实现了数据的双向绑定loading状态控制了按钮的禁用与文字变化。2.2 实现API通信与状态管理前端和后端假设你的模型服务跑在http://localhost:8000的通信是核心。我们用Pinia来管理整个生成任务的状态。// src/stores/generator.ts import { defineStore } from pinia import { ref } from vue import axios from axios // 定义任务状态和生成结果类型 interface GenerationTask { id: string prompt: string status: pending | processing | success | failed progress: number // 0-100 resultImages?: string[] // base64 或 URL 数组 errorMsg?: string } export const useGeneratorStore defineStore(generator, () { // 状态 const currentTask refGenerationTask | null(null) const historyTasks refGenerationTask[]([]) const isPolling ref(false) // 创建axios实例配置基础URL和超时 const api axios.create({ baseURL: http://localhost:8000/api, // 替换为你的后端地址 timeout: 30000, }) // 提交生成任务 const submitTask async (params: { prompt: string; strength: number; num: number }) { try { const taskId task_${Date.now()} const newTask: GenerationTask { id: taskId, prompt: params.prompt, status: pending, progress: 0, } currentTask.value newTask historyTasks.value.unshift(newTask) // 1. 调用API提交任务 const submitRes await api.post(/generate/submit, { prompt: params.prompt, cfg_scale: params.strength, num_images: params.num, }) if (submitRes.data.task_id) { newTask.id submitRes.data.task_id newTask.status processing // 2. 开始轮询任务状态 startPollingTaskStatus(newTask.id) } else { throw new Error(未收到任务ID) } } catch (error: any) { ElMessage.error(提交失败: ${error.message}) if (currentTask.value) { currentTask.value.status failed currentTask.value.errorMsg error.message } } } // 轮询任务状态 const startPollingTaskStatus (taskId: string) { if (isPolling.value) return isPolling.value true const pollInterval setInterval(async () { if (!currentTask.value || currentTask.value.id ! taskId) { clearInterval(pollInterval) isPolling.value false return } try { const statusRes await api.get(/generate/status/${taskId}) const { status, progress, image_urls } statusRes.data if (currentTask.value) { currentTask.value.status status currentTask.value.progress progress if (status success image_urls) { currentTask.value.resultImages image_urls clearInterval(pollInterval) isPolling.value false ElMessage.success(汉服图像生成完成) } else if (status failed) { clearInterval(pollInterval) isPolling.value false ElMessage.error(生成任务失败请重试。) } } } catch (error) { console.error(轮询状态失败:, error) } }, 1500) // 每1.5秒查询一次 } return { currentTask, historyTasks, submitTask, } })这个Store做了几件关键事定义了任务的数据结构使用axios与后端通信提交任务后通过轮询Polling的方式不断查询任务进度直到完成或失败。这是一种在HTTP环境下实现“实时”更新的常见模式。当然如果后端支持WebSocket体验会更流畅。2.3 打造实时进度提示与预览组件用户最讨厌的就是等待时的一片空白。我们需要一个组件来实时反馈生成进度并在完成后展示图片。!-- src/components/PreviewPanel.vue -- template div classpreview-panel h3el-iconPicture //el-icon 生成预览/h3 !-- 状态提示区域 -- div v-if!store.currentTask classempty-tip el-icon :size60Picture //el-icon p输入描述并点击“开始生成”你的专属汉服形象将在这里呈现。/p /div div v-else !-- 进度与状态显示 -- div classtask-status el-alert :titlestatusTitle :typestatusType :closablefalse show-icon template #default div v-ifstore.currentTask.status processing el-progress :percentagestore.currentTask.progress :stroke-width16 striped striped-flow :duration10 / p classstatus-textAI正在精心绘制中请稍候.../p /div p v-else-ifstore.currentTask.status success classstatus-text 创作完成共生成 {{ store.currentTask.resultImages?.length }} 张作品。 /p p v-else classstatus-text生成遇到问题: {{ store.currentTask.errorMsg }}/p /template /el-alert /div !-- 图片预览网格 -- div v-ifstore.currentTask.resultImages classimage-grid div v-for(imgUrl, index) in store.currentTask.resultImages :keyindex classimage-item clickhandlePreview(imgUrl) el-image :srcimgUrl fitcover :preview-src-liststore.currentTask.resultImages ? [imgUrl] : [] hide-on-click-modal template #placeholder div classimage-skeleton el-iconLoading //el-icon /div /template template #error div classimage-error el-iconPicture //el-icon span加载失败/span /div /template /el-image div classimage-actions el-button sizesmall :iconDownload click.stophandleDownload(imgUrl, index)保存/el-button el-button sizesmall :iconShare click.stophandleShare(imgUrl)分享/el-button /div /div /div /div /div /template script setup langts import { computed } from vue import { Picture, Download, Share, Loading } from element-plus/icons-vue import { useGeneratorStore } from /stores/generator const store useGeneratorStore() const statusTitle computed(() { const map: Recordstring, string { pending: 任务已提交, processing: 正在生成, success: 生成成功, failed: 生成失败, } return store.currentTask ? map[store.currentTask.status] || 未知状态 : }) const statusType computed(() { const map: Recordstring, info | success | warning | error { pending: info, processing: info, success: success, failed: error, } return store.currentTask ? map[store.currentTask.status] || info : info }) const handlePreview (url: string) { // 使用Element Plus Image组件的预览功能这里点击已通过属性绑定实现 console.log(预览图片:, url) } const handleDownload (url: string, index: number) { const link document.createElement(a) link.href url link.download hanfu_generation_${index 1}_${Date.now()}.png document.body.appendChild(link) link.click() document.body.removeChild(link) ElMessage.success(图片已开始下载) } const handleShare async (url: string) { // 简化版分享复制图片链接到剪贴板 try { await navigator.clipboard.writeText(url) ElMessage.success(图片链接已复制到剪贴板) } catch (err) { ElMessage.error(复制失败请手动复制链接) } } /script style scoped .image-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; margin-top: 20px; } .image-item { border-radius: 8px; overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,0.1); transition: transform 0.3s; } .image-item:hover { transform: translateY(-5px); } .image-actions { padding: 10px; background: #fafafa; display: flex; justify-content: space-around; } /style这个组件是用户交互的核心。它根据Store中的任务状态动态显示等待提示、进度条或最终的结果图片网格。el-progress组件让进度可视化el-image组件提供了优雅的图片加载、预览功能每个图片卡片下还集成了下载和分享按钮。3. 应用集成与体验优化把各个组件拼装起来形成一个完整的应用并加入一些提升体验的细节。3.1 组装主页面与布局我们将上面创建的组件以及一个可能的历史记录侧边栏组合到主页面中。!-- src/App.vue -- template div idapp el-container classmain-container el-header classapp-header h1el-iconOpportunity //el-icon 霜儿 · 汉服造相工坊/h1 p classsubtitle基于 Z-Turbo 模型用文字描绘你心中的华裳之美/p /el-header el-container !-- 左侧边栏历史记录 -- el-aside width280px classhistory-sidebar HistoryList / /el-aside !-- 主内容区 -- el-main classmain-content el-row :gutter30 el-col :xs24 :md10 GeneratorPanel / /el-col el-col :xs24 :md14 PreviewPanel / /el-col /el-row /el-main /el-container el-footer classapp-footer p本应用为霜儿-汉服-造相Z-Turbo模型前端演示。生成图像仅供个人创作使用。/p /el-footer /el-container /div /template script setup langts import { Opportunity } from element-plus/icons-vue import GeneratorPanel from ./components/GeneratorPanel.vue import PreviewPanel from ./components/PreviewPanel.vue import HistoryList from ./components/HistoryList.vue /script style #app { font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, sans-serif; } .main-container { min-height: 100vh; } .app-header { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; display: flex; flex-direction: column; justify-content: center; line-height: 1.4; } .history-sidebar { border-right: 1px solid #e4e7ed; padding: 20px; background-color: #fafafa; } .main-content { padding: 30px; } .app-footer { text-align: center; color: #909399; font-size: 0.9em; border-top: 1px solid #e4e7ed; } /style3.2 实现历史记录功能历史记录功能能让用户回顾之前的创作非常实用。我们扩展之前的Store并创建一个新组件。首先更新Store增加保存历史记录到本地或发送到后端的逻辑// 在 src/stores/generator.ts 的 submitTask 成功部分后添加 // 当任务成功时将其存入本地历史 if (status success image_urls) { currentTask.value.resultImages image_urls // 保存到历史记录 saveTaskToHistory(currentTask.value) clearInterval(pollInterval) isPolling.value false ElMessage.success(汉服图像生成完成) } // 新增方法 const saveTaskToHistory (task: GenerationTask) { // 简单示例保存到localStorage。实际项目中可提交到后端数据库。 const history JSON.parse(localStorage.getItem(hanfu_generation_history) || []) // 只保存必要信息避免存储过大的base64图片数据 const historyItem { id: task.id, prompt: task.prompt, time: new Date().toISOString(), thumbnail: task.resultImages?.[0] // 只存第一张缩略图或URL } history.unshift(historyItem) localStorage.setItem(hanfu_generation_history, JSON.stringify(history.slice(0, 50))) // 最多存50条 }然后创建历史记录列表组件!-- src/components/HistoryList.vue -- template div classhistory-list h3el-iconClock //el-icon 创作历史/h3 div v-ifhistory.length 0 classempty-history 暂无历史记录 /div el-timeline v-else el-timeline-item v-foritem in history :keyitem.id :timestampformatTime(item.time) placementtop el-card clickhandleRecall(item) p classprompt-preview{{ truncatePrompt(item.prompt) }}/p el-image v-ifitem.thumbnail :srcitem.thumbnail fitcover stylewidth: 100%; height: 80px; border-radius: 4px; margin-top: 8px; / /el-card /el-timeline-item /el-timeline /div /template script setup langts import { ref, onMounted } from vue import { Clock } from element-plus/icons-vue interface HistoryItem { id: string prompt: string time: string thumbnail?: string } const history refHistoryItem[]([]) onMounted(() { loadHistory() }) const loadHistory () { const data localStorage.getItem(hanfu_generation_history) if (data) { history.value JSON.parse(data) } } const formatTime (isoString: string) { return new Date(isoString).toLocaleString(zh-CN) } const truncatePrompt (prompt: string) { return prompt.length 30 ? prompt.substring(0, 30) ... : prompt } const handleRecall (item: HistoryItem) { // 这里可以触发一个事件将历史记录的提示词填充到生成面板 // 例如使用Event Bus或Pinia Action ElMessage.info(已召回提示词: ${truncatePrompt(item.prompt)}) // 实际应用中这里应该触发父组件或Store的一个动作 console.log(Recall prompt:, item.prompt) } /script4. 总结与展望整个项目做下来感觉Vue 3的Composition API加上Pinia对于管理这种有复杂异步状态和UI交互的应用来说确实非常顺手。从用户输入提示词到发起请求、轮询进度、再到最终渲染图片整个数据流清晰可控。Element Plus组件库大大加速了开发进程让我们能专注于业务逻辑而不是样式细节。在实际部署时还有几个可以继续打磨的地方。比如轮询的方式虽然简单通用但如果能换成WebSocket进度更新会更实时服务器压力也更小。图片下载功能目前是直接下载原始URL如果后端生成的是Base64字符串可能还需要前端做一些转换。另外历史记录目前存在本地对于多设备用户不太友好未来可以集成用户系统把记录同步到云端。这个前端界面就像一个桥梁把强大的AI模型能力以更友好、更直观的方式交付给了最终用户。当你看到自己用几句话描述的想法在几分钟内变成一幅精美的汉服画像并在网页上清晰呈现、可以轻松保存分享时那种感觉还是挺棒的。如果你也在做类似的项目希望这些代码和思路能给你带来一些帮助。获取更多AI镜像想探索更多AI镜像和应用场景访问 CSDN星图镜像广场提供丰富的预置镜像覆盖大模型推理、图像生成、视频生成、模型微调等多个领域支持一键部署。