【AI绘画】从零开发AI绘画微信小程序

前言

感觉已经进入全面AIGC的时代了，从刚开始的ChatGPT的生成文本，到GPT-4文本到图片的发展，深刻感受到了技术的日新月异。但是GPT-4一直是付费模式，我才开始接触stable diffusion，在自己的电脑上学习AI绘画。

AI绘画的文生图还没研究透彻呢，文生视频sora又来了。对于我来说，学习的速度远远追不上技术的发展，所以索性就沉下心来，深入地学习一下AI绘画。

如今阿里云、腾讯云等很多厂商，都提供了AI绘画地服务能力。通过购买部署AI绘画服务的实例，让Stable Diffusion实现云化。今天就来研究一下腾讯云AI绘画服务hai。

于是，学了一下午的微信小程序开发（有前端开发基础），实现了将hai服务接入到微信小程序。

操作动图演示：

HAI

hai是腾讯云的高性能应用服务（Hyper Application Inventor），在腾讯云的hai服务页面，春季活动1元可以10元抵扣券。

10元可以购买8小时（1.2元/时）的GPU基础套餐。

在实例中预装了stable diffusion的webui和comfyui，我个人还是比较喜欢webui，喜欢工作流的可以选择后者。

然后就是1元下单购买10元抵扣券。

创建实例，使用抵扣券开通8小时体验时间。

购买之后创建实例，分配公网IP。

这样，实例的创建就完成了，要注意的是：每次重启实例公网IP都会重新分配。点击右侧的WebUI就可以进入Stable Diffusion的webui，体验图生图和文生图的功能。

至此，实例创建完成。我们想要在微信小程序中实现文生图的功能，那么就要调用hai的api，所以必须开启hai的api功能。

开放API

根据Hai操作文档，首先开启Stable diffusion服务的api支持。通过实例页面右侧的JupyterLab进入Terminal，执行下面命令监听服务。

cd stable-diffusion-webui
python launch.py --nowebui --xformers --opt-split-attention  --listen --port 7862

执行命令之后，成功监听7862端口。。

在实例页面可以看到公网IP，通过http://公网IP:7862/docs可以查看api文档。

我们小程序开发开发的文生图功能，主要是调用txt2img的api，查看接口参数。

然后添加安全组。

至此，关于hai服务的部分已经全部准备完成，接下来就是微信小程序的设计。

微信小程序

我们根据HAI提供的api的请求参数，参考stable diffusion web ui来实现一个简易版的微信小程序。

设计

先看hai文档中api接口的参数。

在上面的参数中，有一些可以设置为固定值，所以我们只挑选一些主要的参数，放到小程序页面的设计中，例如：prompt、negative_prompt、steps、seed（其实也可以不用），sampler_index。batch_size我们默认就生成一张就行了。

对于微信小程序的开发，我是基于uni-app，使用vue进行的开发。UI没有使用市面上基于uni-app封装的组件，我使用的是uni-app提供的原生组件。

开发

在HBuilderX和微信开发者工具中完成开发工作。先实现功能，再优化UI样式，初版的设计如下：

1. prompt

使用textarea组件实现prompt文本框。

<view class="uni-title uni-common-pl">Text Prompt</view>
<view class="uni-textarea">
    <textarea v-model="prompt" placeholder-class='placeholder' placeholder="请输入提示词" />
</view>
<view class="uni-title uni-common-pl">Text Prompt</view>
<view