微信小程序集成案例打造个人专属国风诗词配图工具每次读到一句意境优美的古诗词你是不是也和我一样脑海里会浮现出相应的画面比如“大漠孤烟直长河落日圆”的苍茫或是“小桥流水人家”的温婉。以前我们只能靠想象或者去网上费力地找一张差不多的图片。现在我想和你分享一个我自己鼓捣出来的小玩意儿一个能根据你输入的诗词自动生成国风配图的微信小程序。这个小程序的核心思路很简单你在前端输入一句诗小程序把这句话安全地传给后端部署好的AI绘画模型比如LiuJuan模型“读懂”诗词的意境后生成一张风格匹配的图片再回传给你。你可以把这张独一无二的配图保存到手机或者分享给朋友让诗意瞬间变得可见可感。听起来是不是挺有意思今天我就把这个从想法到实现的完整过程拆开揉碎了讲给你听重点聊聊微信小程序前端怎么设计、怎么和后端安全地“对话”以及当很多人同时想生成图片时后台怎么有条不紊地排队处理。无论你是想做个类似的小工具自己玩还是想了解AI能力如何与移动端结合相信都能从中获得一些实用的启发。1. 为什么选择微信小程序在动手之前我们得先想清楚为什么要把这个功能做成微信小程序而不是一个网页或者独立的App这背后有几个很实际的考虑。首先门槛低触达快。用户不用下载安装在微信里搜一下或者扫个码就能用几乎没有使用成本。这对于我们这种希望快速验证想法、吸引用户来体验的服务来说是巨大的优势。想象一下你看到朋友分享了一张很美的诗词配图点开链接就能马上自己创作一张这个转化路径非常顺畅。其次生态成熟能力丰富。微信小程序提供了非常完善的框架和丰富的原生API。比如我们需要的用户授权登录、本地图片保存、分享到好友或朋友圈这些功能小程序都提供了开箱即用的解决方案开发起来省心省力。特别是保存到相册和分享这两个动作是小程序体验闭环的关键。再者适合轻量级、场景化的应用。我们这个工具的核心是“随想随用”用户可能是在读书时、聊天中或者仅仅是一时兴起想为某句诗配个图。小程序“用完即走”的特性完美契合这种碎片化、即时性的需求。它不需要承载一个庞大复杂的应用就是做好“诗词变美图”这一件事。所以综合来看微信小程序是我们实现这个“个人专属国风诗词配图工具”的理想载体。它让我们能专注于核心的AI绘画体验而不用在用户获取和基础功能上耗费太多精力。2. 小程序前端设计一个诗情画意的界面前端是用户直接接触的部分它的设计直接决定了用户愿不愿意用、用得开不开心。我们的目标是做一个既有古风韵味又简单好用的界面。2.1 核心页面与交互流程整个小程序主要就两个页面首页创作页和我的作品页。首页是主战场布局要清晰顶部一个简洁的标题比如“诗中有画”。中部核心区域诗词输入区一个大一点的文本输入框占显眼位置。可以加上一点提示比如“请输入一句古诗…”。为了降低用户输入门槛我们还可以在旁边加一个“随机一句”的按钮点击后从预置的经典诗词库里随机选一句填充进去给用户一点灵感。风格选择区虽然模型本身可能支持多种风格但为了简化用户操作我们可以预设几种最契合国风的风格比如“水墨意境”、“工笔重彩”、“淡雅山水”等用图标加文字的方式做成单选或按钮让用户一键选择。生成按钮一个醒目且有设计感的按钮比如“生成画意”。底部展示区预留出空间用于显示生成中的加载状态比如一个古风风格的动画以及最终生成的图片。交互流程就是输入/选择诗词 - 选择风格 - 点击生成 - 等待并查看结果 - 保存或分享。我的作品页则相对简单就是一个网格列表展示用户本机历史生成过的图片方便回顾和再次使用。2.2 关键代码实现片段我们来看一下首页index.wxml的核心结构大概长什么样!-- index.wxml -- view classcontainer !-- 标题区 -- view classheader text classtitle诗中有画/text text classsubtitle为你的诗句寻一幅画/text /view !-- 创作区 -- view classcreation-area textarea classpoem-input placeholder请输入一句古诗如「月落乌啼霜满天」 value{{inputPoem}} bindinputonPoemInput maxlength50 /textarea view classaction-row button classbtn random-btn bindtaponRandomPoem随机一句/button button classbtn generate-btn bindtaponGenerate loading{{generating}}生成画意/button /view !-- 风格选择 -- view classstyle-selection text classsection-title选择画风/text view classstyle-list block wx:for{{styleList}} wx:keyid view classstyle-item {{item.id selectedStyle ? active : }} bindtaponSelectStyle >// index.js Page({ data: { inputPoem: , selectedStyle: ink_wash, // 默认水墨风格 styleList: [ { id: ink_wash, name: 水墨意境, icon: /icons/ink.png }, { id: fine_brush, name: 工笔重彩, icon: /icons/brush.png }, { id: landscape, name: 淡雅山水, icon: /icons/mountain.png }, ], generating: false, imageUrl: , taskId: null // 用于轮询查询任务状态 }, // 诗词输入 onPoemInput(e) { this.setData({ inputPoem: e.detail.value }); }, // 随机诗词 onRandomPoem() { const poems [ 孤帆远影碧空尽唯见长江天际流。, 采菊东篱下悠然见南山。, 忽如一夜春风来千树万树梨花开。, 枯藤老树昏鸦小桥流水人家。 ]; const randomPoem poems[Math.floor(Math.random() * poems.length)]; this.setData({ inputPoem: randomPoem }); }, // 选择风格 onSelectStyle(e) { const style e.currentTarget.dataset.style; this.setData({ selectedStyle: style }); }, // 核心触发生成 async onGenerate() { const { inputPoem, selectedStyle } this.data; if (!inputPoem.trim()) { wx.showToast({ title: 请输入一句诗词哦, icon: none }); return; } this.setData({ generating: true, imageUrl: }); try { // 调用云函数或自有后端接口 const result await wx.cloud.callFunction({ name: generatePoemImage, // 云函数名 data: { poem: inputPoem, style: selectedStyle } }); if (result.result result.result.taskId) { this.setData({ taskId: result.result.taskId }); // 开始轮询查询任务状态 this.pollTaskStatus(result.result.taskId); } else { throw new Error(任务创建失败); } } catch (error) { console.error(生成失败:, error); wx.showToast({ title: 生成失败请重试, icon: none }); this.setData({ generating: false }); } }, // 轮询查询生成结果 async pollTaskStatus(taskId) { const checkInterval setInterval(async () { try { const statusResult await wx.cloud.callFunction({ name: checkTaskStatus, data: { taskId } }); const { status, imageUrl, message } statusResult.result; if (status SUCCESS imageUrl) { clearInterval(checkInterval); this.setData({ generating: false, imageUrl, taskId: null }); wx.showToast({ title: 创作完成 }); } else if (status FAILED) { clearInterval(checkInterval); this.setData({ generating: false, taskId: null }); wx.showToast({ title: message || 生成失败, icon: none }); } // 如果状态是PENDING或PROCESSING则继续轮询 } catch (error) { clearInterval(checkInterval); console.error(查询任务状态失败:, error); this.setData({ generating: false, taskId: null }); } }, 2000); // 每2秒查询一次 }, // 保存图片到相册 onSaveImage() { const { imageUrl } this.data; wx.authorize({ scope: scope.writePhotosAlbum, success: () { wx.downloadFile({ url: imageUrl, success: (res) { wx.saveImageToPhotosAlbum({ filePath: res.tempFilePath, success: () wx.showToast({ title: 保存成功 }), fail: () wx.showToast({ title: 保存失败, icon: none }) }); } }); } }); } });这样一个简洁且功能完整的前端界面和交互逻辑就搭好了。接下来我们要解决最关键的问题前端如何安全、可靠地把用户的请求发送给后端的AI模型。3. 前后端通信安全与可靠之道小程序不能直接访问我们部署了AI模型的服务器IP或域名必须通过配置好的域名进行网络请求。这里我们通常有两种选择微信云开发的云函数或者搭建自己的后端API服务。无论哪种安全性和可靠性都是首要考虑。3.1 通信方案选择微信云函数推荐用于快速原型这是微信生态内的方案优势是简单。你可以在云函数里写逻辑直接调用你的AI模型API。小程序通过wx.cloud.callFunction调用云函数云函数再访问你的模型服务。微信帮你处理了鉴权通过openid并且云函数和小程序之间的通信是加密的。缺点是云函数有冷启动、运行时长和资源限制不适合长时间运行的AI推理任务。自建后端API推荐用于正式服务你需要自己购买服务器部署一个后端服务比如用Python的Flask/FastAPI或Node.js的Express。小程序通过wx.request访问你这个后端配置好的域名。这种方式控制力强可以处理更复杂的逻辑、队列管理也没有云函数的资源限制。但你需要自己负责服务器的安全、维护和HTTPS证书。考虑到AI生成图片可能耗时较长几秒到几十秒并且我们预计可能有多个用户同时请求自建后端任务队列是更稳健的方案。下面的讲解也主要基于这个方案。3.2 关键安全措施无论用哪种方案以下几点必须注意HTTPS是必须的小程序要求所有网络请求必须是HTTPS协议确保传输过程加密。域名备案与配置你的后端服务器域名必须在工信部备案并且在小程序管理后台的“开发-开发设置-服务器域名”中添加到request合法域名列表里。身份鉴权不能谁都能调用你的生成接口。小程序端可以通过wx.login获取code发送到你的后端。你的后端用这个code加上小程序的AppID和AppSecret去微信服务器换取用户的openid和session_key。openid是用户的唯一标识可以用它来做用户级别的频率限制、配额管理。切记AppSecret必须保存在后端绝对不要泄露在小程序代码里输入校验与过滤后端收到诗词文本后一定要做校验。检查长度是否合理过滤敏感词、特殊字符防止注入攻击。虽然我们是诗词工具但基本的防护不能少。频率限制Rate Limiting根据用户的openid限制其调用生成接口的频率比如每分钟不超过5次防止恶意刷接口消耗你的AI算力。一个简化的后端安全校验流程代码如下以Python FastAPI为例# main.py 部分代码 from fastapi import FastAPI, HTTPException, Depends from pydantic import BaseModel import requests from typing import Optional app FastAPI() # 配置 APP_ID 你的小程序AppID APP_SECRET 你的小程序AppSecret # 从环境变量读取不要硬编码 class GenerateRequest(BaseModel): code: str # 微信登录code poem: str style: str def verify_user(code: str) - str: 用code换取openid验证用户 url fhttps://api.weixin.qq.com/sns/jscode2session?appid{APP_ID}secret{APP_SECRET}js_code{code}grant_typeauthorization_code try: resp requests.get(url, timeout5) data resp.json() openid data.get(openid) if not openid: raise HTTPException(status_code401, detail用户验证失败) return openid except Exception as e: raise HTTPException(status_code500, detailf验证服务异常: {e}) app.post(/api/generate) async def create_generation_task(req: GenerateRequest): # 1. 用户鉴权 openid verify_user(req.code) # 2. 频率限制 (这里简化演示实际可用Redis等实现) # if not check_rate_limit(openid): # raise HTTPException(status_code429, detail请求过于频繁) # 3. 输入校验 poem req.poem.strip() if len(poem) 100 or len(poem) 2: raise HTTPException(status_code400, detail诗词长度不符合要求) # 这里可以添加更复杂的内容过滤逻辑 # 4. 创建异步任务下一节详细讲 task_id create_async_task(openid, poem, req.style) return {taskId: task_id, message: 任务已提交请稍候查询结果}解决了安全问题我们再来应对另一个挑战AI生成图片比较慢不能让用户一直等着不响应也不能让大量请求同时压垮模型服务。这就需要引入异步任务和队列管理。4. 后端架构异步任务与队列管理这是保证小程序体验流畅和后端稳定的关键。核心思想是接口快速响应任务后台执行。4.1 为什么需要任务队列想象一下用户点击“生成”后如果后端直接调用AI模型那么在这几秒甚至十几秒里用户的网络连接必须一直保持小程序页面也一直要转圈等待。万一网络波动或者生成时间过长很容易导致请求超时失败用户体验很差。更糟糕的是如果瞬间有100个用户同时点击生成你的AI模型服务可能瞬间被100个并发请求打垮大家都生成失败。任务队列就是为了解决这两个问题解耦与异步前端请求过来后端只负责接收参数、做校验然后立即生成一个唯一的“任务ID”返回给前端并告诉前端“任务已接受正在处理”。前端拿到这个ID后就可以先给用户一个“正在处理”的反馈然后定期比如每2秒用这个ID来查询任务进度。这样前端的请求是短连接不会长时间等待。流量削峰与排队所有生成请求都被放入一个队列比如Redis List或RabbitMQ。后端有一个或多个“工人”Worker进程按照队列顺序一个一个地从队列里取出任务调用AI模型进行处理。这样就控制了同时处理的任务数量保护了AI服务也实现了公平排队。4.2 核心流程与简单实现我们用一个简单的流程图和基于Redis的Python代码来示意用户请求 - 后端API - 校验并创建任务(Task) - 任务ID放入Redis队列 - 立即返回任务ID给前端 | v 前端轮询查询任务状态 - 后端API查询任务状态 - Worker进程监听队列取出任务ID - 调用AI模型生成 - 将结果和状态存入Redis1. 任务创建与入队API服务中# task_manager.py import uuid import redis import json from datetime import datetime # 连接Redis redis_client redis.Redis(hostlocalhost, port6379, db0) TASK_QUEUE_KEY poem_image_tasks TASK_STATUS_PREFIX task_status: def create_async_task(openid: str, poem: str, style: str) - str: 创建异步任务并放入队列 # 生成唯一任务ID task_id str(uuid.uuid4()) # 构建任务数据 task_data { task_id: task_id, openid: openid, poem: poem, style: style, created_at: datetime.now().isoformat(), status: PENDING # 初始状态等待中 } # 将任务状态存入Redis有效期1小时 status_key f{TASK_STATUS_PREFIX}{task_id} redis_client.setex(status_key, 3600, json.dumps(task_data)) # 将任务ID推入队列左侧推入右侧取出实现FIFO redis_client.lpush(TASK_QUEUE_KEY, task_id) return task_id def get_task_status(task_id: str) - dict: 查询任务状态 status_key f{TASK_STATUS_PREFIX}{task_id} data redis_client.get(status_key) if data: return json.loads(data) return None2. 独立的工作进程Worker这个进程独立运行专门从队列里取任务并处理。# worker.py import redis import json import time from your_ai_client import generate_image # 假设这是调用AI模型的函数 redis_client redis.Redis(hostlocalhost, port6379, db0) TASK_QUEUE_KEY poem_image_tasks TASK_STATUS_PREFIX task_status: def process_task(task_id: str): 处理单个任务 status_key f{TASK_STATUS_PREFIX}{task_id} task_data_json redis_client.get(status_key) if not task_data_json: print(f任务 {task_id} 不存在或已过期) return task_data json.loads(task_data_json) # 更新状态为处理中 task_data[status] PROCESSING task_data[started_at] datetime.now().isoformat() redis_client.setex(status_key, 3600, json.dumps(task_data)) try: # 调用AI模型生成图片 poem task_data[poem] style task_data[style] print(f正在为任务 {task_id} 生成图片诗词: {poem}) # 这里是调用你部署的LiuJuan等模型的地方 image_url generate_image(poem, style) # 假设返回图片的URL # 更新状态为成功并存储结果 task_data[status] SUCCESS task_data[finished_at] datetime.now().isoformat() task_data[image_url] image_url redis_client.setex(status_key, 3600, json.dumps(task_data)) print(f任务 {task_id} 处理成功) except Exception as e: # 更新状态为失败 task_data[status] FAILED task_data[finished_at] datetime.now().isoformat() task_data[error] str(e) redis_client.setex(status_key, 3600, json.dumps(task_data)) print(f任务 {task_id} 处理失败: {e}) def main(): Worker主循环 print(Worker启动开始监听任务队列...) while True: # 从队列右侧阻塞式取出一个任务ID如果队列为空则等待 # brpop是阻塞操作有任务时才返回避免空转消耗CPU _, task_id redis_client.brpop(TASK_QUEUE_KEY, timeout0) if task_id: task_id task_id.decode(utf-8) process_task(task_id) time.sleep(0.1) # 短暂休息避免过于密集 if __name__ __main__: main()3. 前端轮询查询状态前端在收到taskId后需要定期查询任务状态直到成功或失败。这部分逻辑我们在前面小程序的pollTaskStatus方法里已经实现了。通过这样的设计整个系统就变得健壮了。前端体验流畅后端压力可控即使AI模型生成需要时间用户也知道自己的任务正在排队处理中体验会好很多。5. 效果展示与体验优化当我们把前后端和队列都打通后一个可用的工具就诞生了。但要让用户喜欢用还得在细节和体验上多下功夫。5.1 生成效果示例由于无法直接展示图片我来描述几个典型的生成案例输入“孤舟蓑笠翁独钓寒江雪。”风格水墨意境效果描述生成了一幅黑白为主色调的水墨画。画面中心是一叶扁舟船上有一位披着蓑衣、戴着斗笠的老者背影。江面空旷用淡墨渲染出雪雾朦胧的感觉远处有若隐若现的山峦。整体意境孤寂清冷很好地抓住了原诗的精髓。输入“接天莲叶无穷碧映日荷花别样红。”风格工笔重彩效果描述生成了一幅色彩明丽的工笔画。画面中莲叶田田铺满池塘绿色层次丰富。几支荷花亭亭玉立花瓣的粉色与红色渲染得细腻生动在“日光”画面中用暖色调光晕表现映照下格外鲜艳。画面工整细致富有装饰性。输入“枯藤老树昏鸦小桥流水人家。”风格淡雅山水效果描述生成了一幅偏写意的山水小品。近景是盘曲的枯藤和老树枝头点缀着几只墨点般的昏鸦。中景一座小桥横跨溪流桥边有几间简朴的屋舍。远景是淡淡的青灰色山峦。用色淡雅构图疏朗传达出秋日黄昏的萧瑟与宁静。从测试来看模型对诗词意境的捕捉能力不错尤其是在水墨和山水风格上国风韵味很足。工笔风格则更考验模型对细节和色彩的控制。5.2 提升用户体验的实用技巧生成等待时的情感化设计等待时间是最容易流失用户的环节。除了转圈加载我们可以做得更有趣。比如在加载动画旁边显示“画师正在研磨…”、“正在勾勒山水…”、“正在渲染色彩…”这样动态变化的古风文案让等待过程本身也成为一种体验。生成失败或队列过长的友好提示如果AI服务出错或当前排队人数太多不要只给一个冷冰冰的“生成失败”或“服务器错误”。可以换成更友好的说法比如“画师今日笔墨已尽请稍后再试”或者“前方有XX位诗友正在创作预计等待YY秒”并给出“重新尝试”或“稍后提醒我”的选项。历史记录的本地缓存在“我的作品”页面将用户生成过的图片URL和诗词信息用小程序提供的存储API如wx.setStorageSync缓存到本地。这样即使关闭小程序再打开历史记录还在提升了用户的归属感和成就感。分享功能的深度定制微信小程序的分享功能很强大。我们可以定制分享卡片。当用户生成一张满意的图片后点击分享我们可以把这张图片和生成它的诗词一起合成一张精美的分享图可以用后端再生成一次或者前端用canvas绘制这样朋友在聊天框里看到的就是一个完整的、吸引人的作品预览点击进来后还能直接体验生成同款。简单的用户反馈机制在生成结果的图片下方可以放两个小图标“喜欢”和“不喜欢”。收集这些隐式反馈可以帮助我们后续优化模型提示词Prompt或调整风格参数让生成效果越来越好。6. 总结与展望走完这一整套流程从界面设计、安全通信到后台队列一个完整的“诗词配图”小程序骨架就搭建起来了。实际做下来我感觉最大的挑战不是单一的技术点而是如何把AI能力平滑、稳定、安全地嵌入到移动端的使用场景里并处理好它固有的“慢”和“资源消耗大”的问题。这个项目虽然小但涉及了现代应用开发的几个关键思路前后端分离、异步处理、队列削峰、用户体验优先。特别是任务队列的引入对于任何涉及耗时操作不光是AI也可能是文件处理、复杂计算等的服务端设计都是一个非常实用的模式。如果未来还想继续深化有几个方向可以考虑一是引入更强大的国风绘画模型或者支持用户上传参考图来融合风格二是增加社交属性比如做一个“每日好诗配画”的展示墙让用户的作品能被更多人看到三是探索更精细的风格控制比如让用户调整画面的“疏密”、“浓淡”、“冷暖”等参数。技术最终是为了创造美好的体验。当一句千年的古诗通过你的手变成一幅即时生成的、带有个人理解印记的图画时那种连接古今、融合科技的奇妙感觉正是开发这类小工具最迷人的地方。希望这个案例能给你带来一些切实的灵感动手去创造你自己的那个“小而美”的应用吧。获取更多AI镜像想探索更多AI镜像和应用场景访问 CSDN星图镜像广场提供丰富的预置镜像覆盖大模型推理、图像生成、视频生成、模型微调等多个领域支持一键部署。
微信小程序集成案例：打造个人专属国风诗词配图工具
发布时间：2026/5/24 15:24:17
微信小程序集成案例打造个人专属国风诗词配图工具每次读到一句意境优美的古诗词你是不是也和我一样脑海里会浮现出相应的画面比如“大漠孤烟直长河落日圆”的苍茫或是“小桥流水人家”的温婉。以前我们只能靠想象或者去网上费力地找一张差不多的图片。现在我想和你分享一个我自己鼓捣出来的小玩意儿一个能根据你输入的诗词自动生成国风配图的微信小程序。这个小程序的核心思路很简单你在前端输入一句诗小程序把这句话安全地传给后端部署好的AI绘画模型比如LiuJuan模型“读懂”诗词的意境后生成一张风格匹配的图片再回传给你。你可以把这张独一无二的配图保存到手机或者分享给朋友让诗意瞬间变得可见可感。听起来是不是挺有意思今天我就把这个从想法到实现的完整过程拆开揉碎了讲给你听重点聊聊微信小程序前端怎么设计、怎么和后端安全地“对话”以及当很多人同时想生成图片时后台怎么有条不紊地排队处理。无论你是想做个类似的小工具自己玩还是想了解AI能力如何与移动端结合相信都能从中获得一些实用的启发。1. 为什么选择微信小程序在动手之前我们得先想清楚为什么要把这个功能做成微信小程序而不是一个网页或者独立的App这背后有几个很实际的考虑。首先门槛低触达快。用户不用下载安装在微信里搜一下或者扫个码就能用几乎没有使用成本。这对于我们这种希望快速验证想法、吸引用户来体验的服务来说是巨大的优势。想象一下你看到朋友分享了一张很美的诗词配图点开链接就能马上自己创作一张这个转化路径非常顺畅。其次生态成熟能力丰富。微信小程序提供了非常完善的框架和丰富的原生API。比如我们需要的用户授权登录、本地图片保存、分享到好友或朋友圈这些功能小程序都提供了开箱即用的解决方案开发起来省心省力。特别是保存到相册和分享这两个动作是小程序体验闭环的关键。再者适合轻量级、场景化的应用。我们这个工具的核心是“随想随用”用户可能是在读书时、聊天中或者仅仅是一时兴起想为某句诗配个图。小程序“用完即走”的特性完美契合这种碎片化、即时性的需求。它不需要承载一个庞大复杂的应用就是做好“诗词变美图”这一件事。所以综合来看微信小程序是我们实现这个“个人专属国风诗词配图工具”的理想载体。它让我们能专注于核心的AI绘画体验而不用在用户获取和基础功能上耗费太多精力。2. 小程序前端设计一个诗情画意的界面前端是用户直接接触的部分它的设计直接决定了用户愿不愿意用、用得开不开心。我们的目标是做一个既有古风韵味又简单好用的界面。2.1 核心页面与交互流程整个小程序主要就两个页面首页创作页和我的作品页。首页是主战场布局要清晰顶部一个简洁的标题比如“诗中有画”。中部核心区域诗词输入区一个大一点的文本输入框占显眼位置。可以加上一点提示比如“请输入一句古诗…”。为了降低用户输入门槛我们还可以在旁边加一个“随机一句”的按钮点击后从预置的经典诗词库里随机选一句填充进去给用户一点灵感。风格选择区虽然模型本身可能支持多种风格但为了简化用户操作我们可以预设几种最契合国风的风格比如“水墨意境”、“工笔重彩”、“淡雅山水”等用图标加文字的方式做成单选或按钮让用户一键选择。生成按钮一个醒目且有设计感的按钮比如“生成画意”。底部展示区预留出空间用于显示生成中的加载状态比如一个古风风格的动画以及最终生成的图片。交互流程就是输入/选择诗词 - 选择风格 - 点击生成 - 等待并查看结果 - 保存或分享。我的作品页则相对简单就是一个网格列表展示用户本机历史生成过的图片方便回顾和再次使用。2.2 关键代码实现片段我们来看一下首页index.wxml的核心结构大概长什么样!-- index.wxml -- view classcontainer !-- 标题区 -- view classheader text classtitle诗中有画/text text classsubtitle为你的诗句寻一幅画/text /view !-- 创作区 -- view classcreation-area textarea classpoem-input placeholder请输入一句古诗如「月落乌啼霜满天」 value{{inputPoem}} bindinputonPoemInput maxlength50 /textarea view classaction-row button classbtn random-btn bindtaponRandomPoem随机一句/button button classbtn generate-btn bindtaponGenerate loading{{generating}}生成画意/button /view !-- 风格选择 -- view classstyle-selection text classsection-title选择画风/text view classstyle-list block wx:for{{styleList}} wx:keyid view classstyle-item {{item.id selectedStyle ? active : }} bindtaponSelectStyle >// index.js Page({ data: { inputPoem: , selectedStyle: ink_wash, // 默认水墨风格 styleList: [ { id: ink_wash, name: 水墨意境, icon: /icons/ink.png }, { id: fine_brush, name: 工笔重彩, icon: /icons/brush.png }, { id: landscape, name: 淡雅山水, icon: /icons/mountain.png }, ], generating: false, imageUrl: , taskId: null // 用于轮询查询任务状态 }, // 诗词输入 onPoemInput(e) { this.setData({ inputPoem: e.detail.value }); }, // 随机诗词 onRandomPoem() { const poems [ 孤帆远影碧空尽唯见长江天际流。, 采菊东篱下悠然见南山。, 忽如一夜春风来千树万树梨花开。, 枯藤老树昏鸦小桥流水人家。 ]; const randomPoem poems[Math.floor(Math.random() * poems.length)]; this.setData({ inputPoem: randomPoem }); }, // 选择风格 onSelectStyle(e) { const style e.currentTarget.dataset.style; this.setData({ selectedStyle: style }); }, // 核心触发生成 async onGenerate() { const { inputPoem, selectedStyle } this.data; if (!inputPoem.trim()) { wx.showToast({ title: 请输入一句诗词哦, icon: none }); return; } this.setData({ generating: true, imageUrl: }); try { // 调用云函数或自有后端接口 const result await wx.cloud.callFunction({ name: generatePoemImage, // 云函数名 data: { poem: inputPoem, style: selectedStyle } }); if (result.result result.result.taskId) { this.setData({ taskId: result.result.taskId }); // 开始轮询查询任务状态 this.pollTaskStatus(result.result.taskId); } else { throw new Error(任务创建失败); } } catch (error) { console.error(生成失败:, error); wx.showToast({ title: 生成失败请重试, icon: none }); this.setData({ generating: false }); } }, // 轮询查询生成结果 async pollTaskStatus(taskId) { const checkInterval setInterval(async () { try { const statusResult await wx.cloud.callFunction({ name: checkTaskStatus, data: { taskId } }); const { status, imageUrl, message } statusResult.result; if (status SUCCESS imageUrl) { clearInterval(checkInterval); this.setData({ generating: false, imageUrl, taskId: null }); wx.showToast({ title: 创作完成 }); } else if (status FAILED) { clearInterval(checkInterval); this.setData({ generating: false, taskId: null }); wx.showToast({ title: message || 生成失败, icon: none }); } // 如果状态是PENDING或PROCESSING则继续轮询 } catch (error) { clearInterval(checkInterval); console.error(查询任务状态失败:, error); this.setData({ generating: false, taskId: null }); } }, 2000); // 每2秒查询一次 }, // 保存图片到相册 onSaveImage() { const { imageUrl } this.data; wx.authorize({ scope: scope.writePhotosAlbum, success: () { wx.downloadFile({ url: imageUrl, success: (res) { wx.saveImageToPhotosAlbum({ filePath: res.tempFilePath, success: () wx.showToast({ title: 保存成功 }), fail: () wx.showToast({ title: 保存失败, icon: none }) }); } }); } }); } });这样一个简洁且功能完整的前端界面和交互逻辑就搭好了。接下来我们要解决最关键的问题前端如何安全、可靠地把用户的请求发送给后端的AI模型。3. 前后端通信安全与可靠之道小程序不能直接访问我们部署了AI模型的服务器IP或域名必须通过配置好的域名进行网络请求。这里我们通常有两种选择微信云开发的云函数或者搭建自己的后端API服务。无论哪种安全性和可靠性都是首要考虑。3.1 通信方案选择微信云函数推荐用于快速原型这是微信生态内的方案优势是简单。你可以在云函数里写逻辑直接调用你的AI模型API。小程序通过wx.cloud.callFunction调用云函数云函数再访问你的模型服务。微信帮你处理了鉴权通过openid并且云函数和小程序之间的通信是加密的。缺点是云函数有冷启动、运行时长和资源限制不适合长时间运行的AI推理任务。自建后端API推荐用于正式服务你需要自己购买服务器部署一个后端服务比如用Python的Flask/FastAPI或Node.js的Express。小程序通过wx.request访问你这个后端配置好的域名。这种方式控制力强可以处理更复杂的逻辑、队列管理也没有云函数的资源限制。但你需要自己负责服务器的安全、维护和HTTPS证书。考虑到AI生成图片可能耗时较长几秒到几十秒并且我们预计可能有多个用户同时请求自建后端任务队列是更稳健的方案。下面的讲解也主要基于这个方案。3.2 关键安全措施无论用哪种方案以下几点必须注意HTTPS是必须的小程序要求所有网络请求必须是HTTPS协议确保传输过程加密。域名备案与配置你的后端服务器域名必须在工信部备案并且在小程序管理后台的“开发-开发设置-服务器域名”中添加到request合法域名列表里。身份鉴权不能谁都能调用你的生成接口。小程序端可以通过wx.login获取code发送到你的后端。你的后端用这个code加上小程序的AppID和AppSecret去微信服务器换取用户的openid和session_key。openid是用户的唯一标识可以用它来做用户级别的频率限制、配额管理。切记AppSecret必须保存在后端绝对不要泄露在小程序代码里输入校验与过滤后端收到诗词文本后一定要做校验。检查长度是否合理过滤敏感词、特殊字符防止注入攻击。虽然我们是诗词工具但基本的防护不能少。频率限制Rate Limiting根据用户的openid限制其调用生成接口的频率比如每分钟不超过5次防止恶意刷接口消耗你的AI算力。一个简化的后端安全校验流程代码如下以Python FastAPI为例# main.py 部分代码 from fastapi import FastAPI, HTTPException, Depends from pydantic import BaseModel import requests from typing import Optional app FastAPI() # 配置 APP_ID 你的小程序AppID APP_SECRET 你的小程序AppSecret # 从环境变量读取不要硬编码 class GenerateRequest(BaseModel): code: str # 微信登录code poem: str style: str def verify_user(code: str) - str: 用code换取openid验证用户 url fhttps://api.weixin.qq.com/sns/jscode2session?appid{APP_ID}secret{APP_SECRET}js_code{code}grant_typeauthorization_code try: resp requests.get(url, timeout5) data resp.json() openid data.get(openid) if not openid: raise HTTPException(status_code401, detail用户验证失败) return openid except Exception as e: raise HTTPException(status_code500, detailf验证服务异常: {e}) app.post(/api/generate) async def create_generation_task(req: GenerateRequest): # 1. 用户鉴权 openid verify_user(req.code) # 2. 频率限制 (这里简化演示实际可用Redis等实现) # if not check_rate_limit(openid): # raise HTTPException(status_code429, detail请求过于频繁) # 3. 输入校验 poem req.poem.strip() if len(poem) 100 or len(poem) 2: raise HTTPException(status_code400, detail诗词长度不符合要求) # 这里可以添加更复杂的内容过滤逻辑 # 4. 创建异步任务下一节详细讲 task_id create_async_task(openid, poem, req.style) return {taskId: task_id, message: 任务已提交请稍候查询结果}解决了安全问题我们再来应对另一个挑战AI生成图片比较慢不能让用户一直等着不响应也不能让大量请求同时压垮模型服务。这就需要引入异步任务和队列管理。4. 后端架构异步任务与队列管理这是保证小程序体验流畅和后端稳定的关键。核心思想是接口快速响应任务后台执行。4.1 为什么需要任务队列想象一下用户点击“生成”后如果后端直接调用AI模型那么在这几秒甚至十几秒里用户的网络连接必须一直保持小程序页面也一直要转圈等待。万一网络波动或者生成时间过长很容易导致请求超时失败用户体验很差。更糟糕的是如果瞬间有100个用户同时点击生成你的AI模型服务可能瞬间被100个并发请求打垮大家都生成失败。任务队列就是为了解决这两个问题解耦与异步前端请求过来后端只负责接收参数、做校验然后立即生成一个唯一的“任务ID”返回给前端并告诉前端“任务已接受正在处理”。前端拿到这个ID后就可以先给用户一个“正在处理”的反馈然后定期比如每2秒用这个ID来查询任务进度。这样前端的请求是短连接不会长时间等待。流量削峰与排队所有生成请求都被放入一个队列比如Redis List或RabbitMQ。后端有一个或多个“工人”Worker进程按照队列顺序一个一个地从队列里取出任务调用AI模型进行处理。这样就控制了同时处理的任务数量保护了AI服务也实现了公平排队。4.2 核心流程与简单实现我们用一个简单的流程图和基于Redis的Python代码来示意用户请求 - 后端API - 校验并创建任务(Task) - 任务ID放入Redis队列 - 立即返回任务ID给前端 | v 前端轮询查询任务状态 - 后端API查询任务状态 - Worker进程监听队列取出任务ID - 调用AI模型生成 - 将结果和状态存入Redis1. 任务创建与入队API服务中# task_manager.py import uuid import redis import json from datetime import datetime # 连接Redis redis_client redis.Redis(hostlocalhost, port6379, db0) TASK_QUEUE_KEY poem_image_tasks TASK_STATUS_PREFIX task_status: def create_async_task(openid: str, poem: str, style: str) - str: 创建异步任务并放入队列 # 生成唯一任务ID task_id str(uuid.uuid4()) # 构建任务数据 task_data { task_id: task_id, openid: openid, poem: poem, style: style, created_at: datetime.now().isoformat(), status: PENDING # 初始状态等待中 } # 将任务状态存入Redis有效期1小时 status_key f{TASK_STATUS_PREFIX}{task_id} redis_client.setex(status_key, 3600, json.dumps(task_data)) # 将任务ID推入队列左侧推入右侧取出实现FIFO redis_client.lpush(TASK_QUEUE_KEY, task_id) return task_id def get_task_status(task_id: str) - dict: 查询任务状态 status_key f{TASK_STATUS_PREFIX}{task_id} data redis_client.get(status_key) if data: return json.loads(data) return None2. 独立的工作进程Worker这个进程独立运行专门从队列里取任务并处理。# worker.py import redis import json import time from your_ai_client import generate_image # 假设这是调用AI模型的函数 redis_client redis.Redis(hostlocalhost, port6379, db0) TASK_QUEUE_KEY poem_image_tasks TASK_STATUS_PREFIX task_status: def process_task(task_id: str): 处理单个任务 status_key f{TASK_STATUS_PREFIX}{task_id} task_data_json redis_client.get(status_key) if not task_data_json: print(f任务 {task_id} 不存在或已过期) return task_data json.loads(task_data_json) # 更新状态为处理中 task_data[status] PROCESSING task_data[started_at] datetime.now().isoformat() redis_client.setex(status_key, 3600, json.dumps(task_data)) try: # 调用AI模型生成图片 poem task_data[poem] style task_data[style] print(f正在为任务 {task_id} 生成图片诗词: {poem}) # 这里是调用你部署的LiuJuan等模型的地方 image_url generate_image(poem, style) # 假设返回图片的URL # 更新状态为成功并存储结果 task_data[status] SUCCESS task_data[finished_at] datetime.now().isoformat() task_data[image_url] image_url redis_client.setex(status_key, 3600, json.dumps(task_data)) print(f任务 {task_id} 处理成功) except Exception as e: # 更新状态为失败 task_data[status] FAILED task_data[finished_at] datetime.now().isoformat() task_data[error] str(e) redis_client.setex(status_key, 3600, json.dumps(task_data)) print(f任务 {task_id} 处理失败: {e}) def main(): Worker主循环 print(Worker启动开始监听任务队列...) while True: # 从队列右侧阻塞式取出一个任务ID如果队列为空则等待 # brpop是阻塞操作有任务时才返回避免空转消耗CPU _, task_id redis_client.brpop(TASK_QUEUE_KEY, timeout0) if task_id: task_id task_id.decode(utf-8) process_task(task_id) time.sleep(0.1) # 短暂休息避免过于密集 if __name__ __main__: main()3. 前端轮询查询状态前端在收到taskId后需要定期查询任务状态直到成功或失败。这部分逻辑我们在前面小程序的pollTaskStatus方法里已经实现了。通过这样的设计整个系统就变得健壮了。前端体验流畅后端压力可控即使AI模型生成需要时间用户也知道自己的任务正在排队处理中体验会好很多。5. 效果展示与体验优化当我们把前后端和队列都打通后一个可用的工具就诞生了。但要让用户喜欢用还得在细节和体验上多下功夫。5.1 生成效果示例由于无法直接展示图片我来描述几个典型的生成案例输入“孤舟蓑笠翁独钓寒江雪。”风格水墨意境效果描述生成了一幅黑白为主色调的水墨画。画面中心是一叶扁舟船上有一位披着蓑衣、戴着斗笠的老者背影。江面空旷用淡墨渲染出雪雾朦胧的感觉远处有若隐若现的山峦。整体意境孤寂清冷很好地抓住了原诗的精髓。输入“接天莲叶无穷碧映日荷花别样红。”风格工笔重彩效果描述生成了一幅色彩明丽的工笔画。画面中莲叶田田铺满池塘绿色层次丰富。几支荷花亭亭玉立花瓣的粉色与红色渲染得细腻生动在“日光”画面中用暖色调光晕表现映照下格外鲜艳。画面工整细致富有装饰性。输入“枯藤老树昏鸦小桥流水人家。”风格淡雅山水效果描述生成了一幅偏写意的山水小品。近景是盘曲的枯藤和老树枝头点缀着几只墨点般的昏鸦。中景一座小桥横跨溪流桥边有几间简朴的屋舍。远景是淡淡的青灰色山峦。用色淡雅构图疏朗传达出秋日黄昏的萧瑟与宁静。从测试来看模型对诗词意境的捕捉能力不错尤其是在水墨和山水风格上国风韵味很足。工笔风格则更考验模型对细节和色彩的控制。5.2 提升用户体验的实用技巧生成等待时的情感化设计等待时间是最容易流失用户的环节。除了转圈加载我们可以做得更有趣。比如在加载动画旁边显示“画师正在研磨…”、“正在勾勒山水…”、“正在渲染色彩…”这样动态变化的古风文案让等待过程本身也成为一种体验。生成失败或队列过长的友好提示如果AI服务出错或当前排队人数太多不要只给一个冷冰冰的“生成失败”或“服务器错误”。可以换成更友好的说法比如“画师今日笔墨已尽请稍后再试”或者“前方有XX位诗友正在创作预计等待YY秒”并给出“重新尝试”或“稍后提醒我”的选项。历史记录的本地缓存在“我的作品”页面将用户生成过的图片URL和诗词信息用小程序提供的存储API如wx.setStorageSync缓存到本地。这样即使关闭小程序再打开历史记录还在提升了用户的归属感和成就感。分享功能的深度定制微信小程序的分享功能很强大。我们可以定制分享卡片。当用户生成一张满意的图片后点击分享我们可以把这张图片和生成它的诗词一起合成一张精美的分享图可以用后端再生成一次或者前端用canvas绘制这样朋友在聊天框里看到的就是一个完整的、吸引人的作品预览点击进来后还能直接体验生成同款。简单的用户反馈机制在生成结果的图片下方可以放两个小图标“喜欢”和“不喜欢”。收集这些隐式反馈可以帮助我们后续优化模型提示词Prompt或调整风格参数让生成效果越来越好。6. 总结与展望走完这一整套流程从界面设计、安全通信到后台队列一个完整的“诗词配图”小程序骨架就搭建起来了。实际做下来我感觉最大的挑战不是单一的技术点而是如何把AI能力平滑、稳定、安全地嵌入到移动端的使用场景里并处理好它固有的“慢”和“资源消耗大”的问题。这个项目虽然小但涉及了现代应用开发的几个关键思路前后端分离、异步处理、队列削峰、用户体验优先。特别是任务队列的引入对于任何涉及耗时操作不光是AI也可能是文件处理、复杂计算等的服务端设计都是一个非常实用的模式。如果未来还想继续深化有几个方向可以考虑一是引入更强大的国风绘画模型或者支持用户上传参考图来融合风格二是增加社交属性比如做一个“每日好诗配画”的展示墙让用户的作品能被更多人看到三是探索更精细的风格控制比如让用户调整画面的“疏密”、“浓淡”、“冷暖”等参数。技术最终是为了创造美好的体验。当一句千年的古诗通过你的手变成一幅即时生成的、带有个人理解印记的图画时那种连接古今、融合科技的奇妙感觉正是开发这类小工具最迷人的地方。希望这个案例能给你带来一些切实的灵感动手去创造你自己的那个“小而美”的应用吧。获取更多AI镜像想探索更多AI镜像和应用场景访问 CSDN星图镜像广场提供丰富的预置镜像覆盖大模型推理、图像生成、视频生成、模型微调等多个领域支持一键部署。
