Web全栈开发从前端到后端部署霜儿-汉服-造相Z-Turbo的完整AI应用想自己动手搭建一个能生成汉服艺术照的网站吗看着别人分享的AI汉服写真是不是也想拥有一个专属的、可以随时把朋友或自己的照片“穿上”精美汉服的工具今天我们就来一起完成一个完整的全栈项目从前端界面到后端服务再到AI模型的部署手把手教你打造一个可对外访问的汉服AI生成网站。这个项目会用到Vue来构建用户友好的前端界面用Node.js或者Python Flask看你更熟悉哪个来搭建处理请求的后端最后把强大的“霜儿-汉服-造相Z-Turbo”模型部署在CSDN星图GPU平台上并通过Nginx让整个网站稳定地跑起来。整个过程就像搭积木我们会一步步来确保每个环节都清晰明了。1. 项目蓝图与核心思路在开始敲代码之前我们先来理清整个网站的运作流程这样后面每一步做起来心里都有谱。想象一下用户的使用路径他打开我们的网站上传一张自己的照片选择一款心仪的汉服风格点击“生成”按钮。接下来前端会把照片和风格选项打包发送给我们的后端服务器。后端服务器收到请求后并不会自己处理图片而是作为一个“中转站”把任务转发给真正运行在强大GPU服务器上的“霜儿-汉服-造相Z-Turbo”模型。模型处理完成后把生成好的汉服照返回给后端后端再传回给前端最终展示给用户。所以我们的技术栈分工很明确前端 (Vue.js)负责“面子工程”构建上传界面、风格选择器和结果展示区让用户操作起来简单直观。后端 (Node.js/Flask)扮演“调度中心”和“通信员”的角色接收前端请求转发给AI模型API并处理返回的结果。AI模型服务项目的“大脑”部署在CSDN星图GPU平台提供实际的汉服图像生成能力。Web服务器 (Nginx)担任“门卫”和“快递员”处理用户访问将请求分发给前端或后端并最终让网站可以通过一个域名或IP地址访问。整个项目的难点和亮点就在于如何将这四部分顺畅地连接起来并处理好在公网环境下图片上传、模型调用、结果返回这一系列流程。别担心我们会逐一拆解。2. 前端界面用Vue打造用户操作台前端是我们的门面目标是简洁、易用。我们将创建一个单页面应用(SPA)核心功能是图片上传、风格选择和生成结果展示。2.1 初始化Vue项目与环境首先确保你的电脑上安装了Node.js和npm或yarn。然后我们使用Vue CLI来快速搭建项目骨架。打开终端执行以下命令# 全局安装Vue CLI如果尚未安装 npm install -g vue/cli # 创建一个新的Vue项目我们命名为hanfu-ai-web vue create hanfu-ai-web # 创建过程中命令行会提示你选择配置。 # 为了简单起见我们手动选择特性(Manually select features)。 # 然后勾选上 Babel, Router, Vuex 和 CSS Pre-processors。 # 对于Vue版本选择3.x。 # 路由模式选择历史模式(Yes)。 # CSS预处理器选择你熟悉的比如Sass/SCSS。 # 其他配置保持默认即可。创建完成后进入项目目录并安装两个我们需要的额外依赖用于文件上传的axios和用于UI组件的Element Plus你也可以选择其他UI库如Vant。cd hanfu-ai-web npm install axios element-plus2.2 构建核心页面组件项目创建好后我们来修改主要的页面组件。打开src/views/HomeView.vue或者你根据路由创建的主页组件将其内容替换为以下代码template div classhome-container h1 汉服AI造相馆/h1 p classsubtitle上传照片一键穿越体验不同风格的汉服之美/p div classmain-content !-- 左侧上传与设置区域 -- div classcontrol-panel el-upload classupload-demo drag action# :auto-uploadfalse :on-changehandleFileChange :show-file-listfalse acceptimage/* div classupload-area el-icon classel-icon--uploadupload-filled //el-icon div classel-upload__text 将照片拖到此处或 em点击上传/em /div div classel-upload__tip 支持JPG/PNG格式建议使用正面清晰半身照 /div /div /el-upload div v-ifuploadedImage classimage-preview h3原图预览/h3 img :srcuploadedImage alt上传的图片 / /div div classstyle-selection h3选择汉服风格/h3 el-radio-group v-modelselectedStyle sizelarge el-radio-button label唐风-齐胸襦裙唐风-齐胸襦裙/el-radio-button el-radio-button label宋制-褙子宋制-褙子/el-radio-button el-radio-button label明制-马面裙明制-马面裙/el-radio-button el-radio-button label仙侠-飘逸风仙侠-飘逸风/el-radio-button /el-radio-group /div div classaction-buttons el-button typeprimary sizelarge :loadingisGenerating clickhandleGenerate :disabled!uploadedImage {{ isGenerating ? 生成中... : 开始生成汉服照 }} /el-button el-button sizelarge clickhandleReset重置/el-button /div /div !-- 右侧结果展示区域 -- div classresult-panel h3生成结果/h3 div v-ifgeneratedImage classresult-image img :srcgeneratedImage alt生成的汉服照 / div classresult-actions el-button typesuccess clickhandleDownload下载图片/el-button /div /div div v-else classresult-placeholder el-iconpicture //el-icon p汉服照将在这里呈现/p /div /div /div /div /template script setup import { ref } from vue import { ElMessage } from element-plus import { UploadFilled, Picture } from element-plus/icons-vue import axios from axios const uploadedImage ref() const selectedStyle ref(唐风-齐胸襦裙) const generatedImage ref() const isGenerating ref(false) // 处理文件上传 const handleFileChange (file) { const reader new FileReader() reader.onload (e) { uploadedImage.value e.target.result // 转换为Base64用于预览 } reader.readAsDataURL(file.raw) } // 调用后端API生成图片 const handleGenerate async () { if (!uploadedImage.value) { ElMessage.warning(请先上传照片) return } isGenerating.value true generatedImage.value // 清空旧结果 try { // 注意这里的URL需要替换为你实际的后端API地址 const apiUrl http://你的后端服务器地址/api/generate-hanfu // 构建请求数据这里我们发送Base64图片数据和风格参数 const requestData { image: uploadedImage.value, // Base64字符串 style: selectedStyle.value } const response await axios.post(apiUrl, requestData, { headers: { Content-Type: application/json }, // 由于图片生成可能需要较长时间设置一个较长的超时时间 timeout: 120000 // 120秒 }) if (response.data response.data.success) { // 假设后端返回生成图片的Base64数据或URL generatedImage.value data:image/png;base64,${response.data.imageData} ElMessage.success(汉服照生成成功) } else { throw new Error(response.data.message || 生成失败) } } catch (error) { console.error(生成请求失败:, error) ElMessage.error(生成失败: ${error.message}) } finally { isGenerating.value false } } // 重置所有状态 const handleReset () { uploadedImage.value selectedStyle.value 唐风-齐胸襦裙 generatedImage.value } // 下载生成的图片 const handleDownload () { if (!generatedImage.value) return const link document.createElement(a) link.href generatedImage.value link.download 汉服照-${selectedStyle.value}-${Date.now()}.png document.body.appendChild(link) link.click() document.body.removeChild(link) } /script style scoped langscss .home-container { max-width: 1200px; margin: 0 auto; padding: 40px 20px; min-height: 100vh; background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); } h1 { text-align: center; color: #2c3e50; margin-bottom: 10px; } .subtitle { text-align: center; color: #7f8c8d; margin-bottom: 40px; font-size: 1.1rem; } .main-content { display: flex; gap: 40px; flex-wrap: wrap; } .control-panel, .result-panel { flex: 1; min-width: 300px; background: white; padding: 30px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); } .upload-area { padding: 40px 20px; text-align: center; } .image-preview { margin-top: 30px; text-align: center; img { max-width: 100%; max-height: 300px; border-radius: 8px; border: 2px dashed #dcdfe6; margin-top: 10px; } } .style-selection { margin-top: 30px; .el-radio-group { display: flex; flex-direction: column; gap: 15px; margin-top: 15px; } } .action-buttons { margin-top: 40px; display: flex; gap: 20px; justify-content: center; } .result-panel { display: flex; flex-direction: column; h3 { margin-bottom: 20px; } } .result-image { text-align: center; flex-grow: 1; display: flex; flex-direction: column; justify-content: center; img { max-width: 100%; max-height: 500px; border-radius: 10px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } } .result-actions { margin-top: 25px; } .result-placeholder { flex-grow: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; color: #909399; .el-icon { font-size: 80px; margin-bottom: 20px; } p { font-size: 18px; } } media (max-width: 768px) { .main-content { flex-direction: column; } } /style这个前端页面已经具备了核心功能拖拽上传图片、选择汉服风格、调用后端API以及展示和下载结果。现在我们需要一个后端来接收前端的请求。3. 后端服务搭建Node.js API桥梁后端的作用是提供一个安全的接口接收前端发来的图片和参数然后去调用部署在CSDN星图上的AI模型服务。这里我们以Node.js Express为例你也可以用Python Flask实现类似逻辑。3.1 创建Node.js后端项目在你的工作目录下新建一个文件夹用于后端例如hanfu-ai-server。mkdir hanfu-ai-server cd hanfu-ai-server npm init -y然后安装必要的依赖npm install express cors axios multer dotenvexpress: Web框架。cors: 处理跨域请求方便前端调试。axios: 用于向CSDN星图的AI模型API发送请求。multer: 处理前端以multipart/form-data形式上传的文件我们前端用了Base64这里备用或可调整。dotenv: 管理环境变量如API密钥。3.2 编写核心API服务在项目根目录下创建server.js文件const express require(express); const cors require(cors); const axios require(axios); require(dotenv).config(); const app express(); const PORT process.env.PORT || 3001; // 中间件 app.use(cors()); // 允许前端跨域访问 app.use(express.json({ limit: 50mb })); // 支持解析大的JSON请求体Base64图片可能很大 app.use(express.urlencoded({ extended: true, limit: 50mb })); // 假设我们从环境变量获取CSDN星图API的配置 const CSDN_AI_API_BASE process.env.CSDN_AI_API_BASE || https://your-csdn-ai-endpoint.com; const CSDN_AI_API_KEY process.env.CSDN_AI_API_KEY; // 你的API密钥 // 健康检查端点 app.get(/health, (req, res) { res.json({ status: ok, message: Hanfu AI Server is running }); }); // 核心生成接口 app.post(/api/generate-hanfu, async (req, res) { try { const { image, style } req.body; if (!image || !style) { return res.status(400).json({ success: false, message: 缺少图片或风格参数 }); } console.log(收到生成请求风格: ${style}); // 1. 准备调用CSDN星图AI模型的请求数据 // 注意这里需要根据“霜儿-汉服-造相Z-Turbo”模型的实际API文档来构造请求体 const requestToAI { model: shuanger-hanfu-z-turbo, // 模型名称根据实际调整 input: { image: image, // Base64编码的图片字符串 style: style, // 前端传递的风格参数 // 可能还有其他参数如分辨率、生成数量等参考模型文档 // num_inference_steps: 30, // guidance_scale: 7.5, } }; // 2. 调用CSDN星图AI API const aiResponse await axios.post(${CSDN_AI_API_BASE}/v1/images/generations, requestToAI, { headers: { Authorization: Bearer ${CSDN_AI_API_KEY}, Content-Type: application/json, }, timeout: 100000, // 100秒超时 }); // 3. 处理AI模型的返回结果 // 假设返回结构为 { success: true, data: [{url: ... or b64_json: ...}] } const generatedImageData aiResponse.data.data[0]; let finalImageBase64; if (generatedImageData.b64_json) { // 如果API直接返回Base64 finalImageBase64 generatedImageData.b64_json; } else if (generatedImageData.url) { // 如果返回的是图片URL我们需要再下载并转换为Base64或直接传URL给前端 // 这里简单起见假设返回Base64。如果是URL可能需要额外处理。 console.warn(API返回的是URL前端可能需要调整显示逻辑。); // 可以在这里用axios下载图片再转Base64但会增加延迟。 // 更佳实践是让前端直接加载这个URL如果可公开访问。 finalImageBase64 generatedImageData.url; // 这里先当作URL处理 } else { throw new Error(AI API返回的数据格式不符合预期); } // 4. 返回结果给前端 res.json({ success: true, message: 汉服照生成成功, imageData: finalImageBase64, // 可能是Base64字符串也可能是图片URL style: style }); } catch (error) { console.error(生成汉服照过程中出错:, error.message); // 更细致的错误处理区分网络错误、API错误等 let statusCode 500; let message 服务器内部错误生成失败; if (error.response) { // AI API返回了错误状态码 statusCode error.response.status; message AI模型服务错误: ${error.response.data?.error || error.message}; } else if (error.request) { // 请求已发出但没有收到响应 message 无法连接到AI模型服务请检查网络或服务状态; } res.status(statusCode).json({ success: false, message: message }); } }); // 启动服务器 app.listen(PORT, () { console.log(后端服务器运行在 http://localhost:${PORT}); });同时创建一个.env文件来存储敏感信息记得将其加入.gitignorePORT3001 CSDN_AI_API_BASEhttps://api.csdn-ai.example.com # 替换为真实的CSDN星图API地址 CSDN_AI_API_KEYyour_csdn_ai_api_key_here # 替换为你的API密钥这个后端服务提供了一个关键的/api/generate-hanfu接口。它接收前端发来的Base64图片和风格参数然后按照CSDN星图AI模型的API规范构造请求并转发。成功拿到生成结果后再返回给前端。关键点你需要将CSDN_AI_API_BASE和CSDN_AI_API_KEY替换为在CSDN星图平台创建“霜儿-汉服-造相Z-Turbo”模型实例后获得的真实API地址和密钥。具体的API调用参数如请求体结构务必参考该模型在星图平台提供的官方文档。4. AI模型部署在CSDN星图GPU平台运行“霜儿-汉服-造相Z-Turbo”这是整个项目的核心动力源。我们需要一个强大的GPU环境来运行这个图像生成模型。CSDN星图平台提供了预置的AI镜像和GPU算力可以大大简化部署流程。4.1 在星图平台创建模型服务登录与选择访问CSDN星图平台在镜像广场中搜索“霜儿-汉服-造相Z-Turbo”或相关汉服生成模型。选择官方或社区维护的、评分较高的镜像。配置实例点击“部署”后你需要配置实例。算力规格图像生成对显存要求较高建议选择配备足够显存如16GB以上的GPU规格例如NVIDIA A10/A100等。存储确保有足够的存储空间存放模型文件。网络与安全组配置安全组规则通常需要开放模型服务端口如7860、8000等具体看镜像说明给后端服务器访问。最佳实践是只允许你的后端服务器IP访问该端口。启动与获取访问信息部署成功后平台会提供该模型服务的访问地址通常是http://实例IP:端口以及可能的API密钥如果需要认证。这个地址就是上面后端代码中需要填写的CSDN_AI_API_BASE。4.2 验证模型服务部署完成后首先通过平台提供的Web UI如果有或直接调用其API进行验证。你可以使用curl或Postman发送一个测试请求确保模型服务正常运行并能返回预期结果。# 示例具体端点和方法请查看模型文档 curl -X POST http://你的模型实例IP:端口/v1/images/generations \ -H Content-Type: application/json \ -H Authorization: Bearer YOUR_API_KEY \ -d { model: shuanger-hanfu-z-turbo, input: { prompt: a chinese hanfu style portrait, image: base64_string_of_your_test_image } }确保从这一步能拿到生成的图片数据然后再进行后续的集成。5. 服务整合与Nginx配置现在我们有三个独立的部分Vue前端、Node.js后端、CSDN星图AI模型服务。我们需要将它们整合起来并通过Nginx提供一个统一的对外访问入口。5.1 构建与准备前端静态文件首先将Vue项目构建为生产环境的静态文件。# 在前端项目目录 (hanfu-ai-web) 中 npm run build执行后会在项目根目录生成一个dist文件夹里面就是所有静态资源HTML, CSS, JS。5.2 配置Nginx反向代理假设你有一台云服务器Ubuntu/CentOS我们将在这台服务器上运行Nginx和Node.js后端。安装Nginxsudo apt update sudo apt install nginx配置Nginx站点 编辑Nginx的配置文件例如/etc/nginx/sites-available/hanfu-ai。server { listen 80; server_name your-domain.com; # 替换为你的域名或服务器IP # 前端静态文件服务 location / { root /path/to/your/hanfu-ai-web/dist; # 替换为你的dist文件夹绝对路径 index index.html index.htm; try_files $uri $uri/ /index.html; # 支持Vue Router的历史模式 } # 反向代理到Node.js后端API location /api/ { proxy_pass http://localhost:3001/; # 指向本地运行的Node.js后端 proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection upgrade; proxy_set_header Host $host; proxy_cache_bypass $http_upgrade; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; } # 可选如果你希望直接代理到AI服务不推荐通常后端转发更安全 # location /ai-api/ { # proxy_pass http://你的CSDN星图实例IP:端口/; # ... 其他proxy设置 # } }启用配置并重启Nginxsudo ln -s /etc/nginx/sites-available/hanfu-ai /etc/nginx/sites-enabled/ sudo nginx -t # 测试配置语法 sudo systemctl restart nginx5.3 部署并启动后端服务在你的云服务器上将Node.js后端代码上传并安装依赖、启动服务。建议使用pm2这样的进程管理器来保持服务常驻。# 在后端项目目录 npm install npm install -g pm2 # 使用pm2启动服务并设置环境变量 pm2 start server.js --name hanfu-ai-server pm2 save pm2 startup # 设置开机自启可选现在访问你的服务器IP或域名应该就能看到前端页面了。前端会通过/api/路径的请求被Nginx转发到运行在3001端口的Node.js后端后端再调用CSDN星图上的AI模型完成生成任务。6. 总结与后续优化思路走完这一整套流程一个完整的、可对外服务的汉服AI生成网站就搭建起来了。从用户上传照片到最终看到古风汉服照背后是前端、后端、AI模型服务和网络代理的协同工作。实际用下来这个基础版本已经能跑通核心流程。当然要作为一个更稳定、好用的产品还有不少可以打磨的地方。比如图片Base64传输数据量很大可以考虑后端先接收转换成文件存到对象存储如阿里云OSS、腾讯云COS然后只传文件链接给AI模型和前端这样能显著提升传输效率。再比如生成任务可能很耗时可以引入消息队列如Redis、RabbitMQ实现异步处理让用户提交任务后先返回一个“处理中”的提示等生成完成再通知用户查看体验会好很多。安全性方面需要对上传的图片做格式、大小、内容的校验防止恶意请求。部署和维护也是一门学问。你可以考虑使用Docker将前端、后端分别容器化用Docker Compose来管理这样迁移和扩展会方便很多。对于AI模型服务CSDN星图平台已经做了很好的封装你主要需要关注算力成本和服务稳定性。这个项目最大的价值在于它提供了一个清晰的范本展示了如何将前沿的AI能力一个具体的图像生成模型封装成一个标准的、有前后端交互的Web应用。你可以把“霜儿-汉服-造相Z-Turbo”替换成任何其他AI模型比如文生图、语音合成、对话大模型整个架构和思路都是相通的。希望这个实践能帮你打开思路动手创造出更多有趣的AI应用。获取更多AI镜像想探索更多AI镜像和应用场景访问 CSDN星图镜像广场提供丰富的预置镜像覆盖大模型推理、图像生成、视频生成、模型微调等多个领域支持一键部署。
Web全栈开发：从前端到后端部署霜儿-汉服-造相Z-Turbo的完整AI应用
Web全栈开发从前端到后端部署霜儿-汉服-造相Z-Turbo的完整AI应用想自己动手搭建一个能生成汉服艺术照的网站吗看着别人分享的AI汉服写真是不是也想拥有一个专属的、可以随时把朋友或自己的照片“穿上”精美汉服的工具今天我们就来一起完成一个完整的全栈项目从前端界面到后端服务再到AI模型的部署手把手教你打造一个可对外访问的汉服AI生成网站。这个项目会用到Vue来构建用户友好的前端界面用Node.js或者Python Flask看你更熟悉哪个来搭建处理请求的后端最后把强大的“霜儿-汉服-造相Z-Turbo”模型部署在CSDN星图GPU平台上并通过Nginx让整个网站稳定地跑起来。整个过程就像搭积木我们会一步步来确保每个环节都清晰明了。1. 项目蓝图与核心思路在开始敲代码之前我们先来理清整个网站的运作流程这样后面每一步做起来心里都有谱。想象一下用户的使用路径他打开我们的网站上传一张自己的照片选择一款心仪的汉服风格点击“生成”按钮。接下来前端会把照片和风格选项打包发送给我们的后端服务器。后端服务器收到请求后并不会自己处理图片而是作为一个“中转站”把任务转发给真正运行在强大GPU服务器上的“霜儿-汉服-造相Z-Turbo”模型。模型处理完成后把生成好的汉服照返回给后端后端再传回给前端最终展示给用户。所以我们的技术栈分工很明确前端 (Vue.js)负责“面子工程”构建上传界面、风格选择器和结果展示区让用户操作起来简单直观。后端 (Node.js/Flask)扮演“调度中心”和“通信员”的角色接收前端请求转发给AI模型API并处理返回的结果。AI模型服务项目的“大脑”部署在CSDN星图GPU平台提供实际的汉服图像生成能力。Web服务器 (Nginx)担任“门卫”和“快递员”处理用户访问将请求分发给前端或后端并最终让网站可以通过一个域名或IP地址访问。整个项目的难点和亮点就在于如何将这四部分顺畅地连接起来并处理好在公网环境下图片上传、模型调用、结果返回这一系列流程。别担心我们会逐一拆解。2. 前端界面用Vue打造用户操作台前端是我们的门面目标是简洁、易用。我们将创建一个单页面应用(SPA)核心功能是图片上传、风格选择和生成结果展示。2.1 初始化Vue项目与环境首先确保你的电脑上安装了Node.js和npm或yarn。然后我们使用Vue CLI来快速搭建项目骨架。打开终端执行以下命令# 全局安装Vue CLI如果尚未安装 npm install -g vue/cli # 创建一个新的Vue项目我们命名为hanfu-ai-web vue create hanfu-ai-web # 创建过程中命令行会提示你选择配置。 # 为了简单起见我们手动选择特性(Manually select features)。 # 然后勾选上 Babel, Router, Vuex 和 CSS Pre-processors。 # 对于Vue版本选择3.x。 # 路由模式选择历史模式(Yes)。 # CSS预处理器选择你熟悉的比如Sass/SCSS。 # 其他配置保持默认即可。创建完成后进入项目目录并安装两个我们需要的额外依赖用于文件上传的axios和用于UI组件的Element Plus你也可以选择其他UI库如Vant。cd hanfu-ai-web npm install axios element-plus2.2 构建核心页面组件项目创建好后我们来修改主要的页面组件。打开src/views/HomeView.vue或者你根据路由创建的主页组件将其内容替换为以下代码template div classhome-container h1 汉服AI造相馆/h1 p classsubtitle上传照片一键穿越体验不同风格的汉服之美/p div classmain-content !-- 左侧上传与设置区域 -- div classcontrol-panel el-upload classupload-demo drag action# :auto-uploadfalse :on-changehandleFileChange :show-file-listfalse acceptimage/* div classupload-area el-icon classel-icon--uploadupload-filled //el-icon div classel-upload__text 将照片拖到此处或 em点击上传/em /div div classel-upload__tip 支持JPG/PNG格式建议使用正面清晰半身照 /div /div /el-upload div v-ifuploadedImage classimage-preview h3原图预览/h3 img :srcuploadedImage alt上传的图片 / /div div classstyle-selection h3选择汉服风格/h3 el-radio-group v-modelselectedStyle sizelarge el-radio-button label唐风-齐胸襦裙唐风-齐胸襦裙/el-radio-button el-radio-button label宋制-褙子宋制-褙子/el-radio-button el-radio-button label明制-马面裙明制-马面裙/el-radio-button el-radio-button label仙侠-飘逸风仙侠-飘逸风/el-radio-button /el-radio-group /div div classaction-buttons el-button typeprimary sizelarge :loadingisGenerating clickhandleGenerate :disabled!uploadedImage {{ isGenerating ? 生成中... : 开始生成汉服照 }} /el-button el-button sizelarge clickhandleReset重置/el-button /div /div !-- 右侧结果展示区域 -- div classresult-panel h3生成结果/h3 div v-ifgeneratedImage classresult-image img :srcgeneratedImage alt生成的汉服照 / div classresult-actions el-button typesuccess clickhandleDownload下载图片/el-button /div /div div v-else classresult-placeholder el-iconpicture //el-icon p汉服照将在这里呈现/p /div /div /div /div /template script setup import { ref } from vue import { ElMessage } from element-plus import { UploadFilled, Picture } from element-plus/icons-vue import axios from axios const uploadedImage ref() const selectedStyle ref(唐风-齐胸襦裙) const generatedImage ref() const isGenerating ref(false) // 处理文件上传 const handleFileChange (file) { const reader new FileReader() reader.onload (e) { uploadedImage.value e.target.result // 转换为Base64用于预览 } reader.readAsDataURL(file.raw) } // 调用后端API生成图片 const handleGenerate async () { if (!uploadedImage.value) { ElMessage.warning(请先上传照片) return } isGenerating.value true generatedImage.value // 清空旧结果 try { // 注意这里的URL需要替换为你实际的后端API地址 const apiUrl http://你的后端服务器地址/api/generate-hanfu // 构建请求数据这里我们发送Base64图片数据和风格参数 const requestData { image: uploadedImage.value, // Base64字符串 style: selectedStyle.value } const response await axios.post(apiUrl, requestData, { headers: { Content-Type: application/json }, // 由于图片生成可能需要较长时间设置一个较长的超时时间 timeout: 120000 // 120秒 }) if (response.data response.data.success) { // 假设后端返回生成图片的Base64数据或URL generatedImage.value data:image/png;base64,${response.data.imageData} ElMessage.success(汉服照生成成功) } else { throw new Error(response.data.message || 生成失败) } } catch (error) { console.error(生成请求失败:, error) ElMessage.error(生成失败: ${error.message}) } finally { isGenerating.value false } } // 重置所有状态 const handleReset () { uploadedImage.value selectedStyle.value 唐风-齐胸襦裙 generatedImage.value } // 下载生成的图片 const handleDownload () { if (!generatedImage.value) return const link document.createElement(a) link.href generatedImage.value link.download 汉服照-${selectedStyle.value}-${Date.now()}.png document.body.appendChild(link) link.click() document.body.removeChild(link) } /script style scoped langscss .home-container { max-width: 1200px; margin: 0 auto; padding: 40px 20px; min-height: 100vh; background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); } h1 { text-align: center; color: #2c3e50; margin-bottom: 10px; } .subtitle { text-align: center; color: #7f8c8d; margin-bottom: 40px; font-size: 1.1rem; } .main-content { display: flex; gap: 40px; flex-wrap: wrap; } .control-panel, .result-panel { flex: 1; min-width: 300px; background: white; padding: 30px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); } .upload-area { padding: 40px 20px; text-align: center; } .image-preview { margin-top: 30px; text-align: center; img { max-width: 100%; max-height: 300px; border-radius: 8px; border: 2px dashed #dcdfe6; margin-top: 10px; } } .style-selection { margin-top: 30px; .el-radio-group { display: flex; flex-direction: column; gap: 15px; margin-top: 15px; } } .action-buttons { margin-top: 40px; display: flex; gap: 20px; justify-content: center; } .result-panel { display: flex; flex-direction: column; h3 { margin-bottom: 20px; } } .result-image { text-align: center; flex-grow: 1; display: flex; flex-direction: column; justify-content: center; img { max-width: 100%; max-height: 500px; border-radius: 10px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } } .result-actions { margin-top: 25px; } .result-placeholder { flex-grow: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; color: #909399; .el-icon { font-size: 80px; margin-bottom: 20px; } p { font-size: 18px; } } media (max-width: 768px) { .main-content { flex-direction: column; } } /style这个前端页面已经具备了核心功能拖拽上传图片、选择汉服风格、调用后端API以及展示和下载结果。现在我们需要一个后端来接收前端的请求。3. 后端服务搭建Node.js API桥梁后端的作用是提供一个安全的接口接收前端发来的图片和参数然后去调用部署在CSDN星图上的AI模型服务。这里我们以Node.js Express为例你也可以用Python Flask实现类似逻辑。3.1 创建Node.js后端项目在你的工作目录下新建一个文件夹用于后端例如hanfu-ai-server。mkdir hanfu-ai-server cd hanfu-ai-server npm init -y然后安装必要的依赖npm install express cors axios multer dotenvexpress: Web框架。cors: 处理跨域请求方便前端调试。axios: 用于向CSDN星图的AI模型API发送请求。multer: 处理前端以multipart/form-data形式上传的文件我们前端用了Base64这里备用或可调整。dotenv: 管理环境变量如API密钥。3.2 编写核心API服务在项目根目录下创建server.js文件const express require(express); const cors require(cors); const axios require(axios); require(dotenv).config(); const app express(); const PORT process.env.PORT || 3001; // 中间件 app.use(cors()); // 允许前端跨域访问 app.use(express.json({ limit: 50mb })); // 支持解析大的JSON请求体Base64图片可能很大 app.use(express.urlencoded({ extended: true, limit: 50mb })); // 假设我们从环境变量获取CSDN星图API的配置 const CSDN_AI_API_BASE process.env.CSDN_AI_API_BASE || https://your-csdn-ai-endpoint.com; const CSDN_AI_API_KEY process.env.CSDN_AI_API_KEY; // 你的API密钥 // 健康检查端点 app.get(/health, (req, res) { res.json({ status: ok, message: Hanfu AI Server is running }); }); // 核心生成接口 app.post(/api/generate-hanfu, async (req, res) { try { const { image, style } req.body; if (!image || !style) { return res.status(400).json({ success: false, message: 缺少图片或风格参数 }); } console.log(收到生成请求风格: ${style}); // 1. 准备调用CSDN星图AI模型的请求数据 // 注意这里需要根据“霜儿-汉服-造相Z-Turbo”模型的实际API文档来构造请求体 const requestToAI { model: shuanger-hanfu-z-turbo, // 模型名称根据实际调整 input: { image: image, // Base64编码的图片字符串 style: style, // 前端传递的风格参数 // 可能还有其他参数如分辨率、生成数量等参考模型文档 // num_inference_steps: 30, // guidance_scale: 7.5, } }; // 2. 调用CSDN星图AI API const aiResponse await axios.post(${CSDN_AI_API_BASE}/v1/images/generations, requestToAI, { headers: { Authorization: Bearer ${CSDN_AI_API_KEY}, Content-Type: application/json, }, timeout: 100000, // 100秒超时 }); // 3. 处理AI模型的返回结果 // 假设返回结构为 { success: true, data: [{url: ... or b64_json: ...}] } const generatedImageData aiResponse.data.data[0]; let finalImageBase64; if (generatedImageData.b64_json) { // 如果API直接返回Base64 finalImageBase64 generatedImageData.b64_json; } else if (generatedImageData.url) { // 如果返回的是图片URL我们需要再下载并转换为Base64或直接传URL给前端 // 这里简单起见假设返回Base64。如果是URL可能需要额外处理。 console.warn(API返回的是URL前端可能需要调整显示逻辑。); // 可以在这里用axios下载图片再转Base64但会增加延迟。 // 更佳实践是让前端直接加载这个URL如果可公开访问。 finalImageBase64 generatedImageData.url; // 这里先当作URL处理 } else { throw new Error(AI API返回的数据格式不符合预期); } // 4. 返回结果给前端 res.json({ success: true, message: 汉服照生成成功, imageData: finalImageBase64, // 可能是Base64字符串也可能是图片URL style: style }); } catch (error) { console.error(生成汉服照过程中出错:, error.message); // 更细致的错误处理区分网络错误、API错误等 let statusCode 500; let message 服务器内部错误生成失败; if (error.response) { // AI API返回了错误状态码 statusCode error.response.status; message AI模型服务错误: ${error.response.data?.error || error.message}; } else if (error.request) { // 请求已发出但没有收到响应 message 无法连接到AI模型服务请检查网络或服务状态; } res.status(statusCode).json({ success: false, message: message }); } }); // 启动服务器 app.listen(PORT, () { console.log(后端服务器运行在 http://localhost:${PORT}); });同时创建一个.env文件来存储敏感信息记得将其加入.gitignorePORT3001 CSDN_AI_API_BASEhttps://api.csdn-ai.example.com # 替换为真实的CSDN星图API地址 CSDN_AI_API_KEYyour_csdn_ai_api_key_here # 替换为你的API密钥这个后端服务提供了一个关键的/api/generate-hanfu接口。它接收前端发来的Base64图片和风格参数然后按照CSDN星图AI模型的API规范构造请求并转发。成功拿到生成结果后再返回给前端。关键点你需要将CSDN_AI_API_BASE和CSDN_AI_API_KEY替换为在CSDN星图平台创建“霜儿-汉服-造相Z-Turbo”模型实例后获得的真实API地址和密钥。具体的API调用参数如请求体结构务必参考该模型在星图平台提供的官方文档。4. AI模型部署在CSDN星图GPU平台运行“霜儿-汉服-造相Z-Turbo”这是整个项目的核心动力源。我们需要一个强大的GPU环境来运行这个图像生成模型。CSDN星图平台提供了预置的AI镜像和GPU算力可以大大简化部署流程。4.1 在星图平台创建模型服务登录与选择访问CSDN星图平台在镜像广场中搜索“霜儿-汉服-造相Z-Turbo”或相关汉服生成模型。选择官方或社区维护的、评分较高的镜像。配置实例点击“部署”后你需要配置实例。算力规格图像生成对显存要求较高建议选择配备足够显存如16GB以上的GPU规格例如NVIDIA A10/A100等。存储确保有足够的存储空间存放模型文件。网络与安全组配置安全组规则通常需要开放模型服务端口如7860、8000等具体看镜像说明给后端服务器访问。最佳实践是只允许你的后端服务器IP访问该端口。启动与获取访问信息部署成功后平台会提供该模型服务的访问地址通常是http://实例IP:端口以及可能的API密钥如果需要认证。这个地址就是上面后端代码中需要填写的CSDN_AI_API_BASE。4.2 验证模型服务部署完成后首先通过平台提供的Web UI如果有或直接调用其API进行验证。你可以使用curl或Postman发送一个测试请求确保模型服务正常运行并能返回预期结果。# 示例具体端点和方法请查看模型文档 curl -X POST http://你的模型实例IP:端口/v1/images/generations \ -H Content-Type: application/json \ -H Authorization: Bearer YOUR_API_KEY \ -d { model: shuanger-hanfu-z-turbo, input: { prompt: a chinese hanfu style portrait, image: base64_string_of_your_test_image } }确保从这一步能拿到生成的图片数据然后再进行后续的集成。5. 服务整合与Nginx配置现在我们有三个独立的部分Vue前端、Node.js后端、CSDN星图AI模型服务。我们需要将它们整合起来并通过Nginx提供一个统一的对外访问入口。5.1 构建与准备前端静态文件首先将Vue项目构建为生产环境的静态文件。# 在前端项目目录 (hanfu-ai-web) 中 npm run build执行后会在项目根目录生成一个dist文件夹里面就是所有静态资源HTML, CSS, JS。5.2 配置Nginx反向代理假设你有一台云服务器Ubuntu/CentOS我们将在这台服务器上运行Nginx和Node.js后端。安装Nginxsudo apt update sudo apt install nginx配置Nginx站点 编辑Nginx的配置文件例如/etc/nginx/sites-available/hanfu-ai。server { listen 80; server_name your-domain.com; # 替换为你的域名或服务器IP # 前端静态文件服务 location / { root /path/to/your/hanfu-ai-web/dist; # 替换为你的dist文件夹绝对路径 index index.html index.htm; try_files $uri $uri/ /index.html; # 支持Vue Router的历史模式 } # 反向代理到Node.js后端API location /api/ { proxy_pass http://localhost:3001/; # 指向本地运行的Node.js后端 proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection upgrade; proxy_set_header Host $host; proxy_cache_bypass $http_upgrade; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; } # 可选如果你希望直接代理到AI服务不推荐通常后端转发更安全 # location /ai-api/ { # proxy_pass http://你的CSDN星图实例IP:端口/; # ... 其他proxy设置 # } }启用配置并重启Nginxsudo ln -s /etc/nginx/sites-available/hanfu-ai /etc/nginx/sites-enabled/ sudo nginx -t # 测试配置语法 sudo systemctl restart nginx5.3 部署并启动后端服务在你的云服务器上将Node.js后端代码上传并安装依赖、启动服务。建议使用pm2这样的进程管理器来保持服务常驻。# 在后端项目目录 npm install npm install -g pm2 # 使用pm2启动服务并设置环境变量 pm2 start server.js --name hanfu-ai-server pm2 save pm2 startup # 设置开机自启可选现在访问你的服务器IP或域名应该就能看到前端页面了。前端会通过/api/路径的请求被Nginx转发到运行在3001端口的Node.js后端后端再调用CSDN星图上的AI模型完成生成任务。6. 总结与后续优化思路走完这一整套流程一个完整的、可对外服务的汉服AI生成网站就搭建起来了。从用户上传照片到最终看到古风汉服照背后是前端、后端、AI模型服务和网络代理的协同工作。实际用下来这个基础版本已经能跑通核心流程。当然要作为一个更稳定、好用的产品还有不少可以打磨的地方。比如图片Base64传输数据量很大可以考虑后端先接收转换成文件存到对象存储如阿里云OSS、腾讯云COS然后只传文件链接给AI模型和前端这样能显著提升传输效率。再比如生成任务可能很耗时可以引入消息队列如Redis、RabbitMQ实现异步处理让用户提交任务后先返回一个“处理中”的提示等生成完成再通知用户查看体验会好很多。安全性方面需要对上传的图片做格式、大小、内容的校验防止恶意请求。部署和维护也是一门学问。你可以考虑使用Docker将前端、后端分别容器化用Docker Compose来管理这样迁移和扩展会方便很多。对于AI模型服务CSDN星图平台已经做了很好的封装你主要需要关注算力成本和服务稳定性。这个项目最大的价值在于它提供了一个清晰的范本展示了如何将前沿的AI能力一个具体的图像生成模型封装成一个标准的、有前后端交互的Web应用。你可以把“霜儿-汉服-造相Z-Turbo”替换成任何其他AI模型比如文生图、语音合成、对话大模型整个架构和思路都是相通的。希望这个实践能帮你打开思路动手创造出更多有趣的AI应用。获取更多AI镜像想探索更多AI镜像和应用场景访问 CSDN星图镜像广场提供丰富的预置镜像覆盖大模型推理、图像生成、视频生成、模型微调等多个领域支持一键部署。
