Qwen-Image-2512-SDNQ Web开发实战：动态图片生成网站搭建

Qwen-Image-2512-SDNQ Web开发实战：动态图片生成网站搭建

想自己动手搭建一个AI图片生成网站吗？看着别人用几句话就生成精美的图片，是不是也想拥有一个属于自己的创作工具？今天，我们就来一步步实现这个想法。

我将带你从零开始，使用Qwen-Image-2512-SDNQ模型，构建一个功能完整的动态图片生成网站。整个过程不需要你精通复杂的AI算法，只要会一些基础的Web开发知识，就能跟着做出来。我们会从前端界面设计到后端服务搭建，再到最后的部署上线，把每个环节都讲清楚。

准备好了吗？我们这就开始。

1. 项目准备与环境搭建

在动手写代码之前，我们需要先把“舞台”搭好。这包括准备好运行AI模型的服务器，以及我们本地开发需要的工具。

1.1 核心工具与平台选择

要运行Qwen-Image-2512-SDNQ这样的AI模型，普通的电脑可能有点吃力，因为它对显卡（GPU）有要求。这里我推荐使用云服务器平台，它们提供了现成的GPU环境，我们直接租用就行，省去了自己配置硬件的麻烦。

我这次用的是星图GPU平台，主要是因为它上面有已经打包好的Qwen-Image-2512-SDNQ服务镜像。什么叫“镜像”呢？你可以把它理解为一个已经装好所有软件和环境的“系统快照”。我们不用自己安装Python、PyTorch这些复杂的依赖，直接把这个快照运行起来，服务就启动了，非常方便。

除了服务器，我们本地开发还需要：

• 一个代码编辑器：比如VS Code，用来写我们的网站代码。
• Node.js环境：我们的网站前端部分会用到它。
• 一个终端工具：用来执行各种命令。

1.2 一键部署AI图片生成服务

登录星图GPU平台后，找到“镜像广场”或者类似的入口，搜索“Qwen-Image-2512-SDNQ”。你应该能看到一个类似Qwen-Image-2512-SDNQ-uint4-svd-r32的镜像，描述里通常会写着“Web服务”或“开箱即用”。

点击部署，平台会让我们选择服务器配置。对于图片生成，选择带有GPU的实例类型（比如有NVIDIA T4或V100显卡的）。其他配置像硬盘大小、网络这些，用默认的或者选一个基础的套餐就行。

部署完成后，平台会给我们一个访问地址，通常是一个IP地址加端口号，比如http://123.45.67.89:7860。在浏览器里打开这个地址，如果能看到一个Web界面，上面有输入框和生成按钮，那就说明AI服务已经成功跑起来了。

记下这个地址，这是我们后端服务的核心，待会儿我们的网站就要和它“对话”。

2. 前端界面开发：让想法可视化

前端就是用户直接看到和操作的网页部分。我们的目标是一个简洁但功能清晰的图片生成器界面。

2.1 使用Vue 3构建用户界面

我选择用Vue 3来开发前端，因为它上手简单，生态丰富。我们先创建一个新的Vue项目。

打开终端，执行下面的命令来创建项目：

npm create vue@latest qwen-image-website

创建过程中，命令行会问我们一些问题，我们只需要选择最基础的配置就行：

• 是否添加TypeScript？否（为了简单，我们先不用）
• 是否添加JSX支持？否
• 是否添加Vue Router？是（虽然我们可能暂时用不到，但加上以备不时之需）
• 是否添加Pinia？是（一个状态管理工具，管理生成任务的状态很方便）
• 其他像代码检查、单元测试这些，暂时都选否。

创建完成后，进入项目文件夹并安装依赖：

cd qwen-image-website npm install

现在，我们来修改主要的页面组件。打开src/App.vue文件，把里面的内容替换成我们自己的设计。

2.2 设计核心交互组件

一个图片生成网站，核心就是三部分：输入描述的地方、控制生成效果的地方、展示结果的地方。我们围绕这三点来设计。

首先，是一个大的文本输入框，让用户描述他们想要的画面。然后，提供几个简单的下拉菜单或输入框，让用户选择图片尺寸、生成数量等。最后，留出一块区域用来展示生成的图片和加载状态。

下面是一个简化版的App.vue代码框架，展示了核心的结构和样式：

<template> <div class="app-container"> <header class="app-header"> <h1>我的AI画室</h1> <p>用文字，生成你的专属画面</p> </header> <main class="main-content"> <!-- 左侧：控制面板 --> <div class="control-panel"> <h2>创作灵感</h2> <textarea v-model="prompt" placeholder="请详细描述你想要生成的画面，例如：一只戴着眼镜、在书房看书的橘猫，阳光透过窗户，氛围温馨..." class="prompt-input" ></textarea> <div class="settings"> <h3>画面设置</h3> <div class="setting-item"> <label>图片尺寸：</label> <select v-model="selectedSize"> <option value="512x512">512x512 (方形)</option> <option value="768x512">768x512 (横版)</option> <option value="512x768">512x768 (竖版)</option> </select> </div> <div class="setting-item"> <label>生成数量：</label> <input type="number" v-model.number="batchSize" min="1" max="4" /> </div> </div> <button @click="generateImage" :disabled="isGenerating" class="generate-btn"> {{ isGenerating ? '生成中...' : '开始创作' }} </button> </div> <!-- 右侧：结果展示区 --> <div class="result-panel"> <h2>作品展示</h2> <div v-if="isGenerating" class="loading"> <p>AI正在努力创作中，请稍候...</p> <!-- 这里可以加一个简单的加载动画 --> </div> <div v-else-if="imageUrl" class="image-result"> <img :src="imageUrl" alt="生成的图片" /> <div class="image-actions"> <a :href="imageUrl" download="ai-generated-image.png">下载图片</a> <button @click="reset">再试一次</button> </div> </div> <div v-else class="placeholder"> <p>描述你的想法，然后点击“开始创作”，作品将在这里呈现。</p> </div> </div> </main> </div> </template> <script setup> import { ref } from 'vue' // 定义响应式数据 const prompt = ref('') const selectedSize = ref('512x512') const batchSize = ref(1) const isGenerating = ref(false) const imageUrl = ref('') // 生成图片的方法（暂时是个空壳，下一节填充） const generateImage = async () => { console.log('开始生成图片...') isGenerating.value = true // 这里稍后会调用后端API setTimeout(() => { isGenerating.value = false // 暂时用一个假图片地址演示 imageUrl.value = 'https://via.placeholder.com/512x512/4A90E2/FFFFFF?text=AI+Generated+Image' }, 2000) } const reset = () => { imageUrl.value = '' } </script> <style scoped> /* 这里添加CSS样式，让界面美观 */ .app-container { max-width: 1200px; margin: 0 auto; padding: 20px; font-family: sans-serif; } .control-panel, .result-panel { padding: 20px; background: #f8f9fa; border-radius: 8px; } .prompt-input { width: 100%; height: 120px; padding: 12px; margin-bottom: 20px; border: 1px solid #ddd; border-radius: 4px; font-size: 16px; } .generate-btn { background-color: #4A90E2; color: white; border: none; padding: 12px 30px; border-radius: 4px; font-size: 16px; cursor: pointer; margin-top: 20px; } .generate-btn:disabled { background-color: #ccc; cursor: not-allowed; } .image-result img { max-width: 100%; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); } </style>

现在，在终端运行npm run dev，打开浏览器访问http://localhost:5173，你应该能看到一个具备基础交互的页面了。虽然点击按钮还不会真正生成图片，但界面已经就绪。

3. 后端服务桥接：连接前端与AI

前端是面子，后端是里子。现在面子有了，我们需要一个“中间人”（后端服务）来接收前端的请求，然后去调用我们之前部署好的那个AI服务，最后把结果返回给前端。

3.1 搭建Node.js后端API

为了避免前端直接调用AI服务可能遇到的跨域等问题，我们通常需要自己搭建一个简单的后端服务来做中转。我们用Node.js和Express框架来做这件事，因为它非常轻量快捷。

在项目根目录下，新建一个server文件夹，然后在里面初始化一个新的Node.js项目并安装Express：

mkdir server cd server npm init -y npm install express axios cors

axios用来向AI服务发送请求，cors用来处理跨域问题，这样我们的前端才能顺利调用这个后端。

接下来，在server文件夹里创建一个index.js文件，这就是我们后端服务的入口。

3.2 实现核心图片生成接口

这个后端服务主要就干一件事：提供一个/api/generate接口。前端把用户输入的描述和设置传过来，后端就拿着这些信息，去请求我们之前部署的Qwen-Image-2512-SDNQ服务。

下面是server/index.js的完整代码：

const express = require('express') const axios = require('axios') const cors = require('cors') const app = express() const PORT = process.env.PORT || 3000 // 配置中间件 app.use(cors()) // 允许前端跨域请求 app.use(express.json()) // 解析JSON格式的请求体 // 这是你在星图平台部署的AI服务地址 const AI_SERVICE_BASE_URL = 'http://YOUR_AI_SERVER_IP:7860' // 记得替换成你的实际地址！ // 健康检查接口，用来测试后端是否正常 app.get('/api/health', (req, res) => { res.json({ status: 'ok', message: '图片生成后端服务运行正常' }) }) // 核心：图片生成接口 app.post('/api/generate', async (req, res) => { try { const { prompt, size, batch_size } = req.body // 1. 简单的请求数据验证 if (!prompt || prompt.trim().length === 0) { return res.status(400).json({ error: '请输入图片描述' }) } console.log(`收到生成请求：${prompt.substring(0, 50)}...`) // 2. 准备调用AI服务的参数 // Qwen-Image-2512-SDNQ的WebUI服务通常有固定的API格式，这里需要根据实际镜像的接口文档调整 // 以下是一个常见的示例格式 const payload = { prompt: prompt, negative_prompt: '', // 负面提示词，暂时留空 width: 512, // 默认值，可以从size参数解析 height: 512, num_inference_steps: 20, // 生成步数，影响质量和速度 guidance_scale: 7.5, // 指导系数，影响描述跟随程度 num_images_per_prompt: batch_size || 1, } // 3. 解析前端传来的尺寸参数，比如 "512x768" if (size && size.includes('x')) { const [width, height] = size.split('x').map(Number) if (!isNaN(width) && !isNaN(height)) { payload.width = width payload.height = height } } // 4. 调用AI服务 // 注意：实际的API路径（如 /run/predict）需要根据你部署的镜像来确定 const aiResponse = await axios.post(`${AI_SERVICE_BASE_URL}/run/predict`, { data: [payload.prompt, payload.negative_prompt, payload.width, payload.height, payload.num_inference_steps, payload.guidance_scale, payload.num_images_per_prompt] }, { headers: { 'Content-Type': 'application/json' }, timeout: 120000 // 设置长一点的超时时间，因为生成图片可能需要几十秒 }) // 5. 处理AI服务的返回结果 // 不同的WebUI返回格式可能不同，这里需要根据实际情况解析 console.log('AI服务响应状态:', aiResponse.status) let imageData = null if (aiResponse.data && aiResponse.data.data) { // 假设返回的data是一个数组，第一个元素是图片的Base64编码或URL imageData = aiResponse.data.data[0] } if (!imageData) { throw new Error('AI服务未返回有效的图片数据') } // 6. 将结果返回给前端 // 如果AI服务返回的是Base64，我们可以直接传回；如果是文件路径，可能需要处理成可访问的URL res.json({ success: true, imageUrl: imageData, // 这里可能是Base64字符串，也可能是图片URL prompt: prompt, info: `已生成 ${batch_size || 1} 张图片` }) } catch (error) { console.error('生成图片时出错:', error.message) // 给前端返回更友好的错误信息 let errorMessage = '生成图片失败，请稍后重试' if (error.code === 'ECONNREFUSED') { errorMessage = '无法连接到AI服务，请检查服务地址和状态' } else if (error.response) { errorMessage = `AI服务返回错误: ${error.response.status}` } res.status(500).json({ success: false, error: errorMessage }) } }) // 启动服务器 app.listen(PORT, () => { console.log(`后端服务已启动，运行在 http://localhost:${PORT}`) console.log(`AI服务地址: ${AI_SERVICE_BASE_URL}`) })

重要提示：你需要将代码中的YOUR_AI_SERVER_IP:7860替换成你在星图平台部署服务时获得的真实地址。另外，AI服务的具体API路径（如/run/predict）和请求参数格式，一定要去查看你所部署镜像的文档或通过测试确定。不同的WebUI镜像（比如Gradio或Streamlit搭建的）接口可能不同。

启动后端服务：

node index.js

如果看到“后端服务已启动”的日志，说明成功了。你可以用浏览器或Postman访问一下http://localhost:3000/api/health测试看看。

3.3 完善前端调用逻辑

现在后端准备好了，我们需要修改前端代码，让它去调用我们自己的后端接口，而不是那个假的setTimeout。

回到前端的App.vue文件，更新generateImage方法：

<script setup> import { ref } from 'vue' import axios from 'axios' // 需要先安装: npm install axios // ... 之前的响应式数据定义不变 ... const generateImage = async () => { // 再次检查输入 if (!prompt.value.trim()) { alert('请输入图片描述') return } isGenerating.value = true imageUrl.value = '' // 清空旧图片 try { // 调用我们自己的后端接口 const response = await axios.post('http://localhost:3000/api/generate', { prompt: prompt.value, size: selectedSize.value, batch_size: batchSize.value }) if (response.data.success) { // 假设后端返回的是Base64格式的图片数据 const imageData = response.data.imageUrl // 如果是Base64字符串，直接赋值给img的src if (imageData.startsWith('data:image')) { imageUrl.value = imageData } else { // 如果是URL，直接使用 imageUrl.value = imageData } console.log('图片生成成功！') } else { throw new Error(response.data.error || '生成失败') } } catch (error) { console.error('调用API失败:', error) alert(`生成图片时出错: ${error.message}`) // 发生错误时，可以展示一个默认的错误占位图 imageUrl.value = '' } finally { isGenerating.value = false } } </script>

记得在前端项目里安装axios：npm install axios。

现在，整个流程就串起来了：用户在网页输入描述 -> 前端调用本地后端API -> 后端请求星图平台上的AI服务 -> AI生成图片并返回 -> 后端将结果传回前端 -> 前端展示图片。

4. 功能增强与部署上线

基础功能跑通后，我们可以让它变得更实用、更稳定，然后部署到公网，让所有人都能访问。

4.1 为网站添加实用功能

一个基础的生成器可能不够用，我们可以考虑加入这些功能：

1. 生成历史记录：用浏览器的LocalStorage简单存储一下最近生成的几条记录，包括描述和图片（Base64可能太大，可以只存URL或ID），方便用户回顾。
2. 图片风格预设：在描述框旁边加几个按钮，比如“卡通风格”、“写实风格”、“水墨画风”，点击后会在描述词中自动添加对应的风格关键词。
3. 简单的提示词建议：提供一个折叠区域，展示一些生成效果好的描述词例子，给用户灵感。
4. 生成进度反馈：如果AI服务支持，可以尝试通过WebSocket或轮询，给前端返回实时的生成进度，而不是只显示一个静态的“生成中”。

4.2 部署到云服务器

要让别人也能访问，我们需要把前后端代码都放到一台公网可访问的服务器上。

1. 准备一台云服务器：购买一台基础的Linux云服务器（如Ubuntu系统）。
2. 上传代码：将我们整个项目文件夹（包含前端qwen-image-website和后台server）上传到服务器。
3. 安装环境：在服务器上安装Node.js、Nginx（一个高性能的Web服务器）。
4. 构建前端：在服务器上进入前端目录，运行npm run build，这会生成一个dist文件夹，里面是优化后的静态文件。
5. 配置Nginx：让Nginx托管前端静态文件（dist目录），并将/api/开头的请求转发给我们运行在3000端口的Node.js后端服务。同时，可以配置Nginx反向代理到我们之前部署的AI服务（7860端口），这样能更好地管理网络和安全。
6. 使用进程守护：用pm2这样的工具来运行我们的Node.js后端服务，这样即使终端关闭，服务也不会停止。
7. 配置域名和HTTPS：为你的服务器绑定一个域名，并使用Let‘s Encrypt等免费工具为域名配置SSL证书，这样网站就能通过https://安全访问了。

部署环节涉及的具体命令和配置较多，但核心思路就是：前端静态文件用Nginx服务，后端Node.js应用用pm2守护，并通过Nginx做反向代理和负载均衡（如果以后访问量大的话）。

5. 总结

跟着上面这些步骤走下来，你应该已经拥有了一个自己搭建的、能跑起来的AI图片生成网站。从在云平台一键部署AI模型，到用Vue写出交互界面，再到用Node.js搭建中转桥梁，最后思考如何让它变得更强大、更稳定。

整个过程最关键的其实不是每一行代码，而是理解这个**“用户-前端-中转后端-AI服务”**的协作流程。一旦这个流程通了，你就可以在这个基础上无限扩展：换更强大的模型、设计更漂亮的界面、增加社交分享功能、做成一个多用户的平台等等。

自己动手搭建的好处是，所有环节都掌握在自己手里，可以根据需求灵活调整。比如你觉得Qwen-Image-2512-SDNQ的某种风格生成得特别好，就可以在前端特意为这种风格设计一个快捷入口。

当然，第一次部署可能会遇到各种小问题，比如端口没开、地址写错、依赖版本不对等等。这都很正常，解决问题的过程本身就是最好的学习。希望这个实战指南能帮你顺利迈出第一步，享受创造工具的乐趣。

获取更多AI镜像

想探索更多AI镜像和应用场景？访问 CSDN星图镜像广场，提供丰富的预置镜像，覆盖大模型推理、图像生成、视频生成、模型微调等多个领域，支持一键部署。