当前位置：首页 > news >正文

基于影墨·今颜的微信小程序开发：打造个人AI绘画工具

news 2026/6/8 23:25:25

基于影墨·今颜的微信小程序开发：打造个人AI绘画工具

最近发现身边不少朋友都在玩AI绘画，但要么得用电脑，要么得下载专门的App，总感觉不够方便。我就琢磨着，能不能把这事儿搬到微信小程序里？随时随地打开微信，画个草图或者写段描述，就能生成一张好看的小红书风格图片，还能直接分享给朋友。

这个想法听起来挺酷，做起来其实也没那么复杂。核心就是利用“影墨·今颜”这类AI绘画模型的能力，把它封装成一个服务，然后通过微信小程序这个大家天天用的平台来调用。今天，我就来分享一下怎么一步步把这个想法变成现实，打造一个属于你自己的个人AI绘画工具。

整个过程可以分成三块：第一，搞定AI模型服务，让它能“听懂”我们的需求并“画”出图来；第二，搭建微信小程序的前端，设计一个简单好用的界面；第三，把前后端连接起来，让数据能顺畅地跑起来。咱们先从最核心的模型服务开始。

1. 搭建AI绘画后端服务

要让小程序能生成图片，首先得有一个“大脑”，也就是AI模型服务。这里我们选择“影墨·今颜”模型，它生成的小红书风格图片效果很不错。我们的目标是在服务器上部署这个模型，并提供一个简单的API接口，让小程序可以调用。

1.1 模型部署与环境准备

部署AI模型听起来高大上，但现在有很多工具让它变得简单。我们可以使用一些云服务提供的预置镜像，或者在自己的服务器上用Docker来部署。这里以使用预置的模型服务镜像为例。

首先，你需要有一台带GPU的云服务器（对于图片生成，GPU速度会快很多）。登录服务器后，一个常见的启动命令可能长这样：

# 假设使用某个提供了影墨·今颜模型的Docker镜像 docker run -d --gpus all -p 7860:7860 \ -v /path/to/your/models:/app/models \ --name ink_painting_server \ registry.example.com/ink-painting:latest

这段命令做了几件事：在后台运行一个容器，把服务器的7860端口映射到容器的7860端口，挂载一个本地目录用来存放模型文件（如果镜像没包含的话），最后给容器起个名字。

启动后，你可以通过访问http://你的服务器IP:7860来打开模型自带的Web UI界面，测试一下模型是否正常工作。通常，这类界面会有一个输入框让你写描述词，然后点击生成。看到能正常出图，说明模型服务就跑起来了。

1.2 创建简易API接口

模型自带的Web UI是给人用的，小程序需要的是程序能调用的API。所以，我们需要在模型服务外面再包一层，写一个简单的Web应用来提供HTTP接口。

这里我用一个简单的Python Flask应用来举例：

from flask import Flask, request, jsonify import requests import time import os from werkzeug.utils import secure_filename app = Flask(__name__) MODEL_API_URL = "http://localhost:7860" # 假设模型服务跑在本机7860端口 @app.route('/api/generate', methods=['POST']) def generate_image(): """接收文本描述，调用模型生成图片""" data = request.json prompt = data.get('prompt', '') if not prompt: return jsonify({'error': '缺少描述文本'}), 400 # 构造请求数据，格式需根据具体模型API调整 payload = { "prompt": prompt, "negative_prompt": "低质量，模糊", # 可选，告诉模型避免画什么 "steps": 20, # 生成步数 "width": 512, "height": 512 } try: # 调用底层模型服务的API response = requests.post(f"{MODEL_API_URL}/sdapi/v1/txt2img", json=payload, timeout=60) result = response.json() # 假设返回的图片是base64编码的 image_b64 = result['images'][0] # 这里可以添加将base64图片保存到文件或对象存储的逻辑，并生成一个访问URL image_url = save_image_and_get_url(image_b64) return jsonify({'success': True, 'image_url': image_url}) except Exception as e: return jsonify({'error': f'生成失败: {str(e)}'}), 500 def save_image_and_get_url(image_b64): """将base64图片保存，并返回可访问的URL（示例逻辑）""" # 1. 解码并保存图片到本地目录或云存储（如阿里云OSS、腾讯云COS） # 2. 生成一个公网可以访问的URL # 3. 返回这个URL # 此处为示例，省略具体实现 import base64 from io import BytesIO from PIL import Image image_data = base64.b64decode(image_b64.split(",",1)[0] if "," in image_b64 else image_b64) image = Image.open(BytesIO(image_data)) filename = f"generated_{int(time.time())}.png" save_path = os.path.join('static/generated', filename) image.save(save_path) # 假设你的静态文件可以通过 /static/ 路径访问 return f"http://你的服务器IP:5000/static/generated/{filename}" if __name__ == '__main__': app.run(host='0.0.0.0', port=5000, debug=False)

这个API提供了一个/api/generate的端点，小程序只需要发送一个包含prompt（文字描述）的JSON过来，它就会去调用真正的模型服务，拿到生成的图片后保存起来，并把图片的访问地址返回给小程序。

1.3 处理草图生成（进阶）

如果想让小程序支持上传草图再生成，思路也类似。前端把草图图片上传到你的Flask后端，后端先保存草图，然后调用模型的“图生图”接口，把草图作为初始图像输入，再结合用户可能提供的文字描述进行生成。这需要在模型服务中寻找对应的API，并在Flask应用里增加一个处理图片上传和调用图生图接口的路由。

2. 设计微信小程序前端界面

后端服务准备好后，接下来就是打造用户直接接触的小程序界面了。目标是简洁、直观，让用户能轻松输入想法、看到结果并进行分享。

2.1 页面布局与核心组件

一个小程序页面通常由四个文件组成：.wxml（结构）、.wxss（样式）、.js（逻辑）、.json（配置）。我们主要关注首页index。

在index.wxml中，我们可以设计这样的布局：

<!-- index.wxml --> <view class="container"> <!-- 标题区域 --> <view class="header"> <text class="title">我的AI画坊</text> <text class="subtitle">描述你的想象，生成小红书风格美图</text> </view> <!-- 输入区域 --> <view class="input-section"> <textarea class="prompt-input" placeholder="请输入图片描述，例如：夏日海边，一个女孩戴着草帽，漫画风格" bindinput="onPromptInput" value="{{promptText}}" maxlength="200" /> <text class="word-count">{{promptText.length}}/200</text> </view> <!-- 草图上传区域（可选功能） --> <view class="upload-section" wx:if="{{showSketchOption}}"> <text class="section-title">或上传草图（可选）</text> <button class="upload-btn" bindtap="chooseSketch">选择草图</button> <image class="sketch-preview" src="{{sketchPath}}" mode="widthFix" wx:if="{{sketchPath}}"></image> </view> <!-- 生成按钮 --> <button class="generate-btn" bindtap="generateImage" loading="{{loading}}"> {{loading ? '生成中...' : '开始生成'}} </button> <!-- 结果展示区域 --> <view class="result-section" wx:if="{{imageUrl}}"> <text class="section-title">生成结果</text> <image class="generated-image" src="{{imageUrl}}" mode="widthFix" bindload="onImageLoad"></image> <view class="action-buttons"> <button class="action-btn" bindtap="saveToAlbum">保存到相册</button> <button class="action-btn share-btn" open-type="share" bindtap="onShareAppMessage">分享给好友</button> <button class="action-btn" bindtap="generateAgain">再画一张</button> </view> </view> <!-- 历史记录或示例展示（可选） --> <view class="history-section"> <text class="section-title">灵感示例</text> <scroll-view class="example-scroll" scroll-x> <view class="example-item" wx:for="{{examples}}" wx:key="index" bindtap="useExample"> <image class="example-img" src="{{item.url}}" mode="aspectFill"></image> <text class="example-text">{{item.prompt}}</text> </view> </scroll-view> </view> </view>

对应的index.wxss负责美化这些组件，让界面看起来舒服。index.js则负责处理所有的用户交互逻辑，比如输入文字、点击按钮、调用API等。

2.2 实现用户交互逻辑

小程序前端的核心逻辑都在index.js的Page函数里。我们重点看看“生成”按钮对应的generateImage函数：

// index.js Page({ data: { promptText: '', // 用户输入的描述 imageUrl: '', // 生成的图片URL loading: false, // 加载状态 sketchPath: '', // 草图本地路径 examples: [/* 一些示例数据 */] }, // 处理描述输入 onPromptInput(e) { this.setData({ promptText: e.detail.value }); }, // 点击生成按钮 async generateImage() { const that = this; const prompt = this.data.promptText.trim(); if (!prompt) { wx.showToast({ title: '请输入描述哦~', icon: 'none' }); return; } this.setData({ loading: true }); wx.showLoading({ title: 'AI正在创作...', mask: true }); try { // 调用我们自己的后端API const res = await wx.request({ url: 'https://你的后端域名/api/generate', // 替换为你的真实API地址 method: 'POST', data: { prompt: prompt // 如果有草图，可以在这里加上 sketch: this.data.sketchPath }, header: { 'content-type': 'application/json' } }); wx.hideLoading(); this.setData({ loading: false }); if (res.statusCode === 200 && res.data.success) { // 生成成功，更新图片URL this.setData({ imageUrl: res.data.image_url }); wx.showToast({ title: '生成成功！', icon: 'success' }); } else { // 处理错误 wx.showToast({ title: res.data.error || '生成失败', icon: 'none' }); } } catch (err) { wx.hideLoading(); this.setData({ loading: false }); wx.showToast({ title: '网络请求失败', icon: 'none' }); console.error('API调用错误:', err); } }, // 保存图片到手机相册 saveToAlbum() { const that = this; wx.downloadFile({ url: this.data.imageUrl, success(res) { if (res.statusCode === 200) { wx.saveImageToPhotosAlbum({ filePath: res.tempFilePath, success() { wx.showToast({ title: '保存成功', icon: 'success' }); }, fail() { wx.showToast({ title: '保存失败，请检查权限', icon: 'none' }); } }); } }, fail() { wx.showToast({ title: '下载图片失败', icon: 'none' }); } }); }, // 分享功能 onShareAppMessage() { return { title: '看我用AI画的画！', path: '/pages/index/index', imageUrl: this.data.imageUrl // 分享卡片显示的图片 }; }, // 其他函数：chooseSketch, useExample, generateAgain 等... })

这样，一个具备基本输入、生成、展示和分享功能的小程序前端就搭好了。用户输入文字，点击生成，小程序就会去调用我们部署好的后端API，拿到图片链接后再显示出来。

3. 前后端联调与功能完善

前后端分别开发好后，最重要的就是让它们能“对话”。同时，我们还需要考虑一些提升体验的细节。

3.1 网络通信与安全

小程序要求所有网络请求必须是HTTPS，并且请求的域名需要在微信小程序后台的“开发设置”-“服务器域名”中配置。你需要将你的后端API域名（如api.yourdomain.com）配置到request合法域名列表中。

在后端，为了允许小程序跨域访问，需要在Flask应用中添加CORS支持：

from flask_cors import CORS app = Flask(__name__) CORS(app) # 允许所有域，生产环境建议指定具体来源

对于简单的个人项目，这样的连接就足够了。如果用户量增大，需要考虑API密钥、访问频率限制等安全措施。

3.2 图片处理与缓存优化

AI生成图片比较耗时，如果用户多次生成相同的描述，每次都调用模型就浪费了。我们可以在后端加一个简单的缓存。

# 一个简单的内存缓存示例（生产环境建议用Redis） from functools import lru_cache import hashlib @lru_cache(maxsize=100) def generate_image_with_cache(prompt, width=512, height=512): """带缓存的图片生成函数""" cache_key = hashlib.md5(f"{prompt}_{width}_{height}".encode()).hexdigest() # 检查缓存中是否有该key对应的图片URL cached_url = check_cache(cache_key) # 假设的检查函数 if cached_url: return cached_url # 没有缓存，则调用真实生成逻辑 image_url = real_generate_image(prompt, width, height) # 假设的真实生成函数 # 将结果存入缓存 save_to_cache(cache_key, image_url) # 假设的保存函数 return image_url

在前端，当图片生成后，我们可以利用微信小程序的本地存储，将prompt和imageUrl的对应关系临时存下来。这样用户短时间内再次输入相同描述，可以先尝试显示本地缓存过的图片，提升体验。