造相-Z-Image-Turbo项目实战：从零搭建一个AI头像生成微信小程序

造相-Z-Image-Turbo项目实战：从零搭建一个AI头像生成微信小程序

你是不是也想过，要是能有个自己的小程序，让用户上传照片就能生成各种风格的AI头像，还能顺便赚点零花钱，那该多酷？今天，我就带你从零开始，手把手搭建一个这样的商业化迷你项目。

这个项目我们叫它“AI造相馆”。它的核心玩法很简单：用户在小程序里选择喜欢的头像模板，调整发型、发色等特征，然后支付一定的费用（比如购买生成次数），后端就会调用强大的AI模型，生成一张专属的定制头像。听起来是不是挺有意思？整个过程涉及前端小程序、后端服务以及AI模型调用，是一个完整的全栈项目。

咱们的目标很明确：不搞花架子，只讲能落地的干货。我会把每个步骤都拆解清楚，从环境准备到代码编写，再到最后的部署上线，确保你跟着做就能跑起来。即使你之前没怎么接触过微信小程序或者Flask，也不用担心，我会用最直白的话把关键点讲明白。

好了，废话不多说，咱们直接开干。

1. 项目整体设计与技术选型

在写第一行代码之前，咱们得先想清楚这个“AI造相馆”小程序到底要做什么，以及用什么技术来做。把蓝图画好了，后面盖房子才不会乱。

简单来说，用户的操作流程是这样的：打开小程序 -> 浏览并选择头像模板 -> 上传自己的正面照 -> 滑动调整“发型相似度”、“发色”等特征 -> 确认并支付（购买生成次数）-> 等待AI生成 -> 查看并下载生成的头像。

为了实现这个流程，我们需要三块“积木”：

1. 前端（微信小程序）：负责和用户交互，就是用户看到的那个界面。
2. 后端（Python Web框架）：作为“中间人”，接收小程序的请求，去调用AI服务，处理订单逻辑，再把结果返回给小程序。
3. AI模型服务（造相-Z-Image-Turbo）：真正的“魔法核心”，负责根据用户输入的照片和参数，生成高质量的头像。

接下来，我们看看具体用什么技术来搭这三块积木。

前端技术选型：微信小程序原生开发为什么不用跨端框架？对于这种功能相对聚焦、追求体验和稳定性的商业化小项目，微信小程序的原生开发框架（WXML、WXSS、JavaScript）是最稳妥的选择。它的文档齐全、社区活跃，遇到问题基本都能找到答案。而且，我们后面要用的微信支付、用户登录等能力，原生集成的支持也是最好的。

后端技术选型：Flask + 星图GPU平台API后端我推荐使用Flask。相比Django，Flask更轻量、灵活，对于我们这个主要功能是接收请求、转发给AI API、再返回结果的服务来说，Flask足够用了，学习和上手也更快。 AI模型我们选用造相-Z-Image-Turbo，它是一款效果不错的AI头像生成模型。我们将通过调用星图GPU平台上部署的该模型API来获得服务。这样做的好处是我们无需自己准备昂贵的GPU服务器和繁琐的模型部署，直接按需调用，省心省力。

核心交互流程用户在小程序点击生成后，会发生什么呢？

1. 小程序将用户上传的照片和调整的参数，发送给我们的Flask后端。
2. Flask后端收到请求，先校验用户剩余生成次数（涉及支付和次数管理）。
3. 校验通过后，后端将照片和参数整理成造相模型API要求的格式，发送请求到星图GPU平台。
4. 星图平台的模型服务处理请求，生成头像图片，将图片URL或数据返回给我们的Flask后端。
5. Flask后端将生成的头像结果返回给小程序前端展示。
6. 同时，后端扣除用户的一次生成次数。

整个项目的结构目录大致规划如下，你可以先有个印象：

ai-avatar-mini-program/ ├── backend/ # Flask后端项目 │ ├── app.py # 主应用文件 │ ├── requirements.txt # Python依赖包列表 │ ├── config.py # 配置文件（API密钥等） │ └── ... ├── miniprogram/ # 微信小程序前端项目 │ ├── pages/ # 小程序页面 │ ├── utils/ # 工具函数 │ ├── app.js # 小程序入口文件 │ └── ... └── README.md # 项目说明文档

蓝图已经画好，接下来，我们就从搭建后端服务开始，一步步把它实现。

2. 后端服务搭建：Flask与AI模型调用

后端是我们的“大脑”和“调度中心”。我们先把它搭建起来，让它能够接收请求并成功调用AI模型。

2.1 初始化Flask项目与环境

首先，确保你的电脑上安装了Python（建议3.8以上版本）。然后，我们创建一个新的项目文件夹，并搭建一个虚拟环境，这样项目的依赖包不会和系统其他项目冲突。

打开终端（命令行），执行以下步骤：

# 1. 创建项目根目录并进入 mkdir ai-avatar-mini-program cd ai-avatar-mini-program # 2. 创建后端目录 mkdir backend cd backend # 3. 创建Python虚拟环境（Windows系统用 `python -m venv venv`） python3 -m venv venv # 4. 激活虚拟环境 # Mac/Linux: source venv/bin/activate # Windows: # venv\Scripts\activate # 看到命令行前缀出现 (venv) 即表示激活成功

虚拟环境激活后，我们来安装必要的包。创建一个requirements.txt文件，并写入以下内容：

Flask==2.3.3 requests==2.31.0 python-dotenv==1.0.0 Pillow==10.0.0 # 用于可能的图片处理

然后在终端执行安装：

(venv) pip install -r requirements.txt

2.2 编写核心的Flask应用与模型调用

安装好环境后，我们开始编写后端的核心代码。在backend目录下，创建app.py文件。

我们先完成最核心的一步：调用星图GPU平台上的造相模型API。这里假设你已经在该平台创建了应用，并获得了API密钥和模型调用端点。我们将这些敏感信息放在环境变量中。

首先，创建.env文件（注意前面有个点）来存储密钥：

# .env 文件内容 XINGTU_API_KEY=your_api_key_here XINGTU_API_ENDPOINT=https://api.xingtu-platform.com/v1/models/z-image-turbo/generate

然后，编写app.py：

# backend/app.py import os from flask import Flask, request, jsonify from dotenv import load_dotenv import requests import json import time # 加载环境变量 load_dotenv() app = Flask(__name__) # 配置（从环境变量读取） XINGTU_API_KEY = os.getenv('XINGTU_API_KEY') XINGTU_API_URL = os.getenv('XINGTU_API_ENDPOINT') # 一个简单的内存“数据库”，用于存储用户生成次数。实际项目请替换为真实数据库（如MySQL, Redis） # 结构：{‘user_openid’: {‘remaining_times’: 5}} user_quota_db = {} @app.route('/api/generate-avatar', methods=['POST']) def generate_avatar(): """接收小程序请求，调用AI模型生成头像""" # 1. 获取前端传来的数据 data = request.json if not data: return jsonify({'code': 400, 'msg': '请求数据无效'}), 400 user_openid = data.get('openid') image_base64 = data.get('image') # 小程序上传的图片Base64字符串 template_id = data.get('template_id', 'default') hairlikeness = data.get('hairlikeness', 0.7) # 发型相似度，0-1 hair_color = data.get('hair_color', 'black') # 发色 # 2. 校验用户身份和剩余次数（简易版） if not user_openid: return jsonify({'code': 401, 'msg': '用户未授权'}), 401 user_data = user_quota_db.get(user_openid, {'remaining_times': 0}) if user_data['remaining_times'] <= 0: return jsonify({'code': 403, 'msg': '生成次数不足，请购买'}), 403 # 3. 准备调用星图模型API的请求数据 # 注意：这里需要根据造相模型API的实际要求来构造payload # 以下是一个示例结构，具体参数请查阅星图平台该模型的API文档 payload = { "model": "z-image-turbo", "input": { "prompt": f"generate a professional avatar portrait, {hair_color} hair", # 结合发色的提示词 "image": image_base64, # 用户上传的基础图片 "template": template_id, "strength": hairlikeness, # 控制与原图发型的相似度 # 可能还有其他参数，如size, num_inference_steps等 } } headers = { 'Authorization': f'Bearer {XINGTU_API_KEY}', 'Content-Type': 'application/json' } # 4. 调用星图AI模型API try: response = requests.post(XINGTU_API_URL, headers=headers, json=payload, timeout=60) response.raise_for_status() # 如果状态码不是200，抛出异常 result = response.json() # 5. 解析API返回结果（根据星图API实际返回格式调整） # 假设返回格式为 {"output": {"images": [{"url": "https://..."}]}} if result.get('output') and result['output'].get('images'): generated_image_url = result['output']['images'][0]['url'] # 6. 扣减用户次数（简易内存操作） user_quota_db[user_openid] = {'remaining_times': user_data['remaining_times'] - 1} # 7. 返回成功结果给小程序 return jsonify({ 'code': 200, 'msg': '生成成功', 'data': { 'avatar_url': generated_image_url, 'remaining_times': user_quota_db[user_openid]['remaining_times'] } }) else: return jsonify({'code': 500, 'msg': 'AI模型生成失败，返回格式异常'}), 500 except requests.exceptions.RequestException as e: # 处理网络或API请求错误 app.logger.error(f"调用AI API失败: {e}") return jsonify({'code': 502, 'msg': 'AI服务暂时不可用，请稍后重试'}), 502 except Exception as e: # 处理其他未知错误 app.logger.error(f"生成过程发生未知错误: {e}") return jsonify({'code': 500, 'msg': '系统内部错误'}), 500 if __name__ == '__main__': # 初始化一个测试用户 user_quota_db['test_openid_123'] = {'remaining_times': 10} app.run(debug=True, host='0.0.0.0', port=5000)

这段代码做了几件关键事：

• 定义了一个/api/generate-avatar的接口。
• 接收小程序传来的用户OpenID、照片、模板ID、发型相似度和发色参数。
• 检查用户是否有剩余次数（这里用了内存字典模拟，真实项目要用数据库）。
• 按照造相模型API的要求，构造请求数据并发送。
• 处理API的响应，将生成的头像URL返回给小程序，并扣减次数。

重要提示：上面代码中调用AI API的payload结构是示例，你必须替换成星图GPU平台上造相-Z-Image-Turbo模型真实的API调用格式。请务必仔细阅读对应平台的API文档。

现在，你可以运行这个后端服务了：

(venv) python app.py

如果看到类似* Running on http://0.0.0.0:5000的输出，说明后端服务已经在本地的5000端口跑起来了。

3. 微信小程序前端开发

后端准备好了，现在我们来打造用户直接接触的小程序界面。为了让项目更完整，我们还会简单模拟一下支付和次数管理的逻辑。

3.1 小程序页面布局与交互

我们主要设计两个页面：一个是首页/模板选择页，另一个是头像生成与调整页。

1. 项目初始化与配置首先，在微信开发者工具中创建一个新的小程序项目。app.json中需要声明用到的页面和权限：

// miniprogram/app.json { "pages": [ "pages/index/index", "pages/generate/generate" ], "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "AI造相馆", "navigationBarTextStyle": "black" }, "permission": { "scope.writePhotosAlbum": { "desc": "需要保存生成的头像到你的相册" } }, "requiredPrivateInfos": ["chooseImage", "uploadFile"] }

2. 首页（模板选择）pages/index/index.wxml主要展示头像模板列表：

<!-- miniprogram/pages/index/index.wxml --> <view class="container"> <view class="header"> <text class="title">选择你喜欢的头像风格</text> <view class="user-info"> <text>剩余次数: {{remainingTimes}}</text> <button size="mini" bindtap="goToPay">购买次数</button> </view> </view> <scroll-view scroll-x class="template-scroll"> <view wx:for="{{templateList}}" wx:key="id" class="template-item" bindtap="selectTemplate">// miniprogram/pages/index/index.js Page({ data: { remainingTimes: 0, // 从后端获取或本地缓存 templateList: [ { id: 'tech', name: '科技感', previewUrl: '/images/template-tech.jpg' }, { id: 'cartoon', name: '卡通漫画', previewUrl: '/images/template-cartoon.jpg' }, { id: 'art', name: '艺术油画', previewUrl: '/images/template-art.jpg' }, { id: 'professional', name: '职业肖像', previewUrl: '/images/template-pro.jpg' } ], selectedTemplateId: null }, onLoad() { // 从本地缓存或后端获取用户剩余次数 const times = wx.getStorageSync('remainingTimes') || 0; this.setData({ remainingTimes: times }); }, selectTemplate(e) { const id = e.currentTarget.dataset.id; this.setData({ selectedTemplateId: id }); wx.showToast({ title: `已选择${this.getTemplateName(id)}风格`, icon: 'none' }); }, getTemplateName(id) { const item = this.data.templateList.find(t => t.id === id); return item ? item.name : ''; }, startGenerate() { if (!this.data.selectedTemplateId) { wx.showToast({ title: '请先选择一个模板', icon: 'error' }); return; } if (this.data.remainingTimes <= 0) { wx.showModal({ title: '次数不足', content: '您的生成次数已用完，是否立即购买？', success: (res) => { if (res.confirm) { this.goToPay(); } } }); return; } // 跳转到生成页，并传递模板ID wx.navigateTo({ url: `/pages/generate/generate?templateId=${this.data.selectedTemplateId}` }); }, goToPay() { // 这里应跳转到支付页面，我们简单模拟 wx.showModal({ title: '购买生成次数', content: '模拟支付流程：确认支付后增加10次。', success: (res) => { if (res.confirm) { const newTimes = this.data.remainingTimes + 10; this.setData({ remainingTimes: newTimes }); wx.setStorageSync('remainingTimes', newTimes); wx.showToast({ title: '购买成功！' }); } } }); } })

3. 生成与调整页这是核心交互页，pages/generate/generate.wxml：

<!-- miniprogram/pages/generate/generate.wxml --> <view class="container"> <view class="preview-section"> <image wx:if="{{originalImage}}" src="{{originalImage}}" mode="widthFix" class="preview-image"></image> <view wx:else class="upload-area" bindtap="chooseImage"> <text>+ 点击上传正面清晰照片</text> </view> </view> <view class="control-panel"> <view class="control-item"> <text>发型相似度</text> <slider min="0" max="100" step="1" value="{{hairLikeness}}" bindchange="sliderChange">// miniprogram/pages/generate/generate.js Page({ data: { originalImage: '', hairLikeness: 70, // 默认70% hairColorOptions: ['黑色', '棕色', '金色', '灰色', '蓝色'], hairColorIndex: 0, remainingTimes: 0, generating: false, generatedAvatarUrl: '', templateId: '' }, onLoad(options) { this.setData({ templateId: options.templateId }); const times = wx.getStorageSync('remainingTimes') || 0; this.setData({ remainingTimes: times }); }, chooseImage() { wx.chooseImage({ count: 1, sizeType: ['compressed'], sourceType: ['album', 'camera'], success: (res) => { const tempFilePath = res.tempFilePaths[0]; // 这里可以添加图片压缩或裁剪逻辑 this.setData({ originalImage: tempFilePath }); } }) }, sliderChange(e) { const key = e.currentTarget.dataset.key; this.setData({ [key]: e.detail.value }); }, pickerChange(e) { this.setData({ hairColorIndex: e.detail.value }); }, resetAll() { this.setData({ originalImage: '', hairLikeness: 70, hairColorIndex: 0, generatedAvatarUrl: '' }); }, async generateAvatar() { if (!this.data.originalImage) { wx.showToast({ title: '请先上传照片', icon: 'error' }); return; } if (this.data.remainingTimes <= 0) { wx.showModal({ title: '次数不足', content: '请返回首页购买生成次数。', showCancel: false }); return; } this.setData({ generating: true }); wx.showLoading({ title: 'AI正在创作中...', mask: true }); // 1. 将图片转换为Base64（小程序需要先读取为ArrayBuffer） const fs = wx.getFileSystemManager(); const base64 = await new Promise((resolve, reject) => { fs.readFile({ filePath: this.data.originalImage, encoding: 'base64', success: res => resolve(res.data), fail: reject }); }); // 2. 准备请求数据 const requestData = { openid: 'test_openid_123', // 实际应从wx.login获取 image: `data:image/jpeg;base64,${base64}`, template_id: this.data.templateId, hairlikeness: this.data.hairLikeness / 100, // 转换为0-1 hair_color: this.data.hairColorOptions[this.data.hairColorIndex] }; // 3. 调用我们自己的Flask后端API // 注意：这里需要替换成你部署的后端服务地址，开发时可先用本地IP（需在微信开发者工具中设置不校验域名） const backendUrl = 'http://你的服务器IP或域名:5000/api/generate-avatar'; try { const res = await wx.request({ url: backendUrl, method: 'POST', data: requestData, header: { 'content-type': 'application/json' } }); wx.hideLoading(); this.setData({ generating: false }); if (res.statusCode === 200 && res.data.code === 200) { const result = res.data.data; this.setData({ generatedAvatarUrl: result.avatar_url, remainingTimes: result.remaining_times }); wx.setStorageSync('remainingTimes', result.remaining_times); wx.showToast({ title: '生成成功！' }); } else { wx.showToast({ title: `生成失败: ${res.data.msg || '未知错误'}`, icon: 'error' }); } } catch (err) { wx.hideLoading(); this.setData({ generating: false }); wx.showToast({ title: '网络请求失败', icon: 'error' }); console.error('API调用失败:', err); } }, saveToAlbum() { if (!this.data.generatedAvatarUrl) return; wx.saveImageToPhotosAlbum({ filePath: this.data.generatedAvatarUrl, // 注意：如果是网络图片，需要先下载到本地 success: () => wx.showToast({ title: '保存成功' }), fail: (err) => { console.error('保存失败:', err); wx.showToast({ title: '保存失败，请检查权限', icon: 'error' }); } }); } })

3.2 与后端API联调

现在，前端和后端代码都有了，我们需要把它们连接起来。

1. 启动后端：确保你的Flask后端在本地运行（python app.py）。
2. 配置小程序网络：在微信开发者工具中，点击右上角“详情”->“本地设置”，勾选“不校验合法域名、web-view（业务域名）、TLS版本以及HTTPS证书”。这仅用于开发调试，上线前必须配置合法域名。
3. 修改后端地址：将generate.js中的backendUrl变量改为你本地机器的IP地址（如http://192.168.1.100:5000/api/generate-avatar），确保手机和电脑在同一局域网。
4. 测试流程：在小程序模拟器或真机上，尝试上传图片、调整参数、点击生成。观察后端控制台是否收到请求，并返回结果。

如果一切顺利，你应该能看到生成的头像图片在小程序里展示出来。恭喜你，核心流程已经跑通了！

4. 核心功能实现与优化

基础版本跑通后，我们还需要完善几个关键功能，让项目更完整、更健壮。

4.1 用户登录与次数管理

我们之前用了假的openid。真实场景下，需要微信登录来唯一标识用户。

1. 小程序端获取code并发送给后端在app.js或页面中调用wx.login：

// 获取微信登录凭证code wx.login({ success: (res) => { if (res.code) { // 将code发送给自己的后端服务器 wx.request({ url: '你的后端地址/api/login', method: 'POST', data: { code: res.code }, success: (loginRes) => { // 后端返回session_key和openid（后端保管），以及一个自定义登录态token给前端 const token = loginRes.data.token; wx.setStorageSync('auth_token', token); // 后续所有请求在header中带上此token } }) } } })

2. 后端校验code并获取openid在后端，你需要使用小程序的AppID和AppSecret，调用微信接口服务换取openid和session_key。

# 在app.py中新增登录接口 import requests WX_APP_ID = '你的小程序AppID' WX_APP_SECRET = '你的小程序AppSecret' @app.route('/api/login', methods=['POST']) def wx_login(): code = request.json.get('code') if not code: return jsonify({'code': 400, 'msg': 'Code required'}), 400 # 调用微信接口 wx_url = f'https://api.weixin.qq.com/sns/jscode2session?appid={WX_APP_ID}&secret={WX_APP_SECRET}&js_code={code}&grant_type=authorization_code' resp = requests.get(wx_url) data = resp.json() openid = data.get('openid') if not openid: return jsonify({'code': 401, 'msg': '登录失败'}), 401 # 生成自定义登录态Token（例如JWT），并关联openid # 这里简化处理，直接返回openid。生产环境请使用JWT等安全方案。 # 同时，初始化或查询该用户的剩余次数（从数据库） user_quota = get_user_quota_from_db(openid) # 假设的函数，从数据库查 if user_quota is None: # 新用户，初始化次数 user_quota = init_user_quota(openid) # 返回token和用户信息（生产环境token不应包含敏感信息） return jsonify({ 'code': 200, 'msg': '登录成功', 'data': { 'token': generate_token(openid), # 生成token的函数 'openid': openid, # 仅用于演示，实际不应返回 'remaining_times': user_quota } })

3. 使用数据库管理次数将内存字典user_quota_db替换为真实的数据库，例如SQLite（轻量）或MySQL。安装flask-sqlalchemy包来操作数据库。

4.2 支付功能集成（模拟与思路）

完整的微信支付集成涉及商户号、证书、异步通知等，较为复杂。这里给出一个简化的模拟思路和集成要点。

1. 小程序端发起支付请求用户点击购买时，调用后端创建的支付订单接口。

// 小程序端，购买次数 wx.request({ url: '你的后端地址/api/create-payment', method: 'POST', header: { 'Authorization': `Bearer ${wx.getStorageSync('auth_token')}` }, data: { package_id: '10_times_pack' }, // 购买套餐ID success: (res) => { if (res.data.code === 200) { const paymentParams = res.data.data; // 调用微信支付API（模拟环境下无法真调起） wx.requestPayment({ ...paymentParams, // 包含timeStamp, nonceStr, package, signType, paySign等 success: () => { /* 支付成功，更新本地次数 */ }, fail: () => { /* 支付失败 */ } }) } } })

2. 后端创建支付预订单后端需要调用微信支付统一下单API，生成支付参数。

# 伪代码，展示流程 @app.route('/api/create-payment', methods=['POST']) def create_payment(): # 1. 验证用户token，获取openid user_openid = get_openid_from_token(request.headers.get('Authorization')) # 2. 生成商户系统内部订单号（out_trade_no） out_trade_no = generate_out_trade_no() # 3. 调用微信支付统一下单API (需要商户号、API密钥、证书等) # 构造请求XML数据，包括appid, mch_id, nonce_str, body, out_trade_no, total_fee, spbill_create_ip, notify_url, trade_type='JSAPI', openid等 # 使用商户密钥签名 # 4. 解析微信返回的prepay_id # 5. 再次签名，生成小程序调起支付所需参数（timeStamp, nonceStr, package, signType, paySign） payment_params = generate_payment_params(prepay_id) # 6. 将out_trade_no和订单信息（用户、商品、状态）存入数据库 save_order_to_db(out_trade_no, user_openid, '10_times_pack', 'pending') return jsonify({'code': 200, 'msg': 'OK', 'data': payment_params})

3. 处理支付结果通知微信支付成功后，会异步通知你配置的notify_url。后端需要验证签名，更新订单状态，并为用户增加生成次数。

@app.route('/api/payment/notify', methods=['POST']) def payment_notify(): # 1. 解析微信POST过来的XML数据 # 2. 验证签名，确保请求来自微信 # 3. 检查订单金额、商户号等信息是否正确 # 4. 根据out_trade_no更新数据库订单状态为'success' # 5. 根据订单关联的user_openid和package_id，增加相应用户的生成次数 # 6. 返回给微信处理成功的XML（格式固定）

重要提示：真实集成请务必仔细阅读微信支付官方文档，并处理好签名、防重入、对账等安全性和可靠性问题。开发初期可先用我们之前模拟的“确认即增加次数”逻辑。

4.3 性能与体验优化建议

当基本功能完成后，可以考虑以下优化点：

• 图片压缩与预处理：用户上传的图片可能很大，在上传前或后端处理前进行压缩，减少传输量和模型处理时间。
• 生成队列与异步处理：AI生成可能耗时较长（十几秒到几十秒）。可以使用消息队列（如Redis, RabbitMQ）将生成任务异步化，立即返回“任务已提交”的响应，然后通过WebSocket或轮询通知小程序任务完成。
• 结果缓存：对于相同的输入（图片+参数），可以将生成结果缓存起来，下次直接返回，节省AI计算资源。
• 错误处理与用户提示：网络超时、模型服务不稳定等情况都需要友好的前端提示和后台日志记录。
• 后端API安全：增加请求频率限制、验证请求签名，防止恶意调用。

5. 项目部署与上线准备

开发完成后，我们需要把项目部署到服务器上，让所有人都能访问。

5.1 后端服务部署

你可以选择任何支持Python的云服务器，如腾讯云、阿里云等。以下以Linux服务器为例：

1. 准备服务器：购买云服务器，安装Python3、pip、Nginx（反向代理）、Supervisor（进程管理）等。
2. 上传代码：将backend目录上传到服务器。
3. 安装依赖：在服务器上创建虚拟环境并安装requirements.txt中的包。
4. 配置生产环境：修改app.py，关闭debug模式，设置安全的密钥。使用gunicorn或uWSGI作为WSGI服务器替代Flask自带的开发服务器。

   (venv) pip install gunicorn (venv) gunicorn -w 4 -b 0.0.0.0:5000 app:app

5. 使用Nginx反向代理：配置Nginx，将域名（如api.yourdomain.com）的请求转发到Gunicorn服务的5000端口，并配置SSL证书启用HTTPS。
6. 使用Supervisor管理进程：确保Gunicorn进程在后台稳定运行，崩溃后自动重启。

5.2 小程序上线前配置

1. 配置服务器域名：在小程序管理后台的“开发”->“开发设置”->“服务器域名”中，将你部署的后端API地址（如https://api.yourdomain.com）添加到request合法域名列表中。
2. 配置业务域名：如果你在小程序里显示来自你服务器的图片，也需要在“业务域名”中配置。
3. 提交审核：在开发者工具中点击“上传”，填写版本信息，然后到小程序管理后台提交审核。确保你的小程序符合微信平台的所有规范，特别是虚拟支付类目（如果涉及真实支付）的资质要求。
4. 发布：审核通过后，即可发布上线。

走到这一步，你的“AI造相馆”微信小程序就已经从一个想法，变成了一个真正可以访问和使用的产品了。虽然里面还有很多细节可以打磨，比如更精美的UI、更丰富的模板、更稳定的支付，但核心的骨架和流程已经完整。

整个项目做下来，你会发现技术栈覆盖了前端、后端和AI应用，是一个非常好的全栈实践。最难的部分其实不是某一项具体的技术，而是如何把这些分散的模块有机地串联起来，让数据流和业务逻辑顺畅跑通。希望这个实战指南能给你提供一个清晰的路径。接下来，你可以根据自己的想法，去添加更多有趣的功能，比如分享海报、头像风格融合、会员体系等等，让它变得更加独特和强大。

获取更多AI镜像

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