用ChatGPT和AI绘画做一个微信小程序

语言: CN / TW / HK

theme: channing-cyan

本文正在参加 ✍🏻 技术视角深入 ChatGPT 征文活动

前言

题目或许有些标题党,先大概交代一下上下文吧。一周多前用ChatGPT做了一个AI算命的微信小程序:“赛博运势丨AI测命理”。后来觉得似乎有点单调,差点意思。于是趁周末又加了一个每日运势的小功能。
这个小功能在ChatGPTAI绘画程序MidJourney的帮助下,花费两天时间就做的差不多了。这里还是大概总结一下过程,然后记录一些想法,大概是关于这些工具能给个人开发者带来什么样的加成。(个人总结向)

正式开始之前,先猜猜看下边成品图中哪些部分和ChatGPT或者AI绘画有关吧:

应该还是比较明显的,除了年份、今日运势这几个字以外,其他部分的文案和设计都和ChatGPT/AI绘画有关。我想先从个人工作流开始写起,一步步记录一下这些AI工具在整个小产品上线的过程中到底做了什么。

个人工作流

在公司里要做一个需求时,通常会纠集一批不同角色的人去讨论,搞各种各样的评审、写各种各样的文档。作为个人开发者来说,在这一方面还是非常自由的 —— 因为只有自己一个人。但在整个“产品”迭代上线的过程中,我们仍然会需要在不同的阶段扮演“产品经理、设计师、前端、后端、运营、测试”等不同的角色。以这次做的“每日运势”小需求为例(只是示意,不一定严格按下边的顺序):

  1. 最开始时需要明确整体的需求:想做一个每日运势,每天进来点一下可以看到当天的运势、幸运色、幸运数字,并且需要做出一些解释。(产品)

  2. 然后大概设计一下要做成什么样子:界面大概是个比较神秘又有点可爱的画风,因为毕竟是娱乐为主,所以色调不能太严肃。上半部分需要展示一个整体的运势,下半部分展示类似签文或者解释之类的东西(设计)

  3. 接下来想一想文案怎么搞:每日运势有4种,可以调整概率;幸运数字有10个,幸运颜色有几十个,它们对应的签文或者解签的文案都是可能会在后期不断的添加。(产品&运营)

  4. 整体设计的差不多了,接下来看看界面怎么写:在Pixso/Figma/PhotoShop上简单比划几下,然后想想页面拆分和模块设计,在哪调接口怎么存数据之类的。(前端&设计)

  5. 前端好像做的差不多了,想一想数据要怎么处理吧:写几个接口,组织一下数据存到数据库/redis。UV没几个,凑合过吧。(后端)

  6. 试试看功能有没有坏:好像没有专门的测试阶段,因为在开发的过程中已经在顺便测试了。(测试)

以上过程每个阶段都还是比较占时间的。对于部分个人开发者的业余项目来说,可能在实际做的时候,流程就变成了:

  1. 冒出个好玩点子!

  2. 想想具体做成啥样,周末去做一下

  3. 设计成啥样呢,怎么配色都不好看,画的图也又土又丑...

  4. 画图就画了两三个小时,还是没改好。。。算了,功能优先...

  5. 要这么多文案,百度直接抄好像也不太好... 那还是写个爬虫爬一下吧,不过也不是原创的...

  6. 写个自己都嫌弃的前端,再写个自己都嫌弃的后端,甚至还没来得及写完一个周末就过去了

  7. 算了,不做了。。。

但现在,有了ChatGPT和AI绘画模型的帮助,中间的某些阶段或许可以稍微简化一点,或者少浪费一点时间、少费点脑子。回到最初的目标,需求已经明确了,接下来想一想要界面要长什么样子。

设计:AI绘画

过程

这里直接说是怎么用的了。我的想法是:界面需要比较神秘又有点可爱的画风,不要太严肃。由于是每日运势,所以界面可以长得像个日历。简单翻译一下给几个关键词: text Generate a cute anime style daily calendar UI, Mystical 把这段Prompt喂给AI绘画程序(这里用的是MidJourney网站),然后我们就可以去做别的事情了(比如其他和设计阶段无关的事情)。过了一会就给出了一些候选项:

看上去都还是比较符合预期风格的,做背景图比较合适,并且配色也都比较完美(比我自己瞎写的好多了..)。由于最终的页面上需要展示比较多的元素,因此需要背景图中有多一些的空白区域。因此最终选择了主体形象最小的右上角图,尽管这个猫有三只耳朵。接下来就可以根据这张缩略图生成一张1024x1536的大图了:

从这张图中我们可以得出以下信息: 1. 图中上半部分含义不明的文字部分可以抹去,变成我们自己的UI区域,用来放一些文字信息;下半部分颜色太杂,就用一个模糊遮罩盖住;这样我们就有了三大块文字区域; 2. 文字颜色可以用#F5BB9B或#835B5B(直接取图中的色号); 3. 为了让内容区域大一些,需要做一些裁剪; 4. 需要稍微修剪一下猫耳朵。

接下来就比较省事了: - 1、4用PhotoShop搞定(相对来说,要抹去或者修剪的部分以纯色为主,并且删总是比添快的) - 接下来导出图片,直接拖到Pixso里面,并建一个750x1624的画板,发现放上去内容区域正好差不多够,于是3搞定。 - 最后打两行文本,画一个带透明度和模糊的圆角矩形,简单的设计稿就做完了:

除此之外,一些素材也可以用AI绘画+AI抠图搞定,比如生成一些神秘的筒筒: gzfsV.png

总结

  • 速度:从拿到AI画的图,到最终做完一个简单的视觉稿,加起来不过十几分钟。
  • 效率:对于个人项目来说,可以轻轻松松拿到一个无版权风险的、低重复的、符合想象的底图;并且可以直接根据底图获取到合适的配色

以上这两点足以增加个人项目的精美度、减少个人在这种不擅长的事情上浪费的时间。反正不管怎么说,给我一个星期我也画不出来这样的背景图。

文案:ChatGPT

实时调用与离线数据

这个小程序的另一半功能:AI测运势,是直接实时调用的ChatGPT的API。具体可以看上一篇文章。调这个API其实还是有很多限制的:比如每个key每秒请求数、每秒token数等,如果要用它做一些小服务之类的,要么给OpenAI氪金(充钱限制会少一点),要么给验证码收发平台氪金(多申请几个账号做账号池)。但无论哪种,速度都比较慢。

但是如果我们需要的数据是离线的,使用ChatGPT的成本似乎会更低一些:如果把它当作一个拥有很强的创造力,并且大多数情况下会给出正确答案的“百科全书” —— 我们可以用它预先生成大量的数据存储起来,然后接下来对ChatGPT创作出来的“素材仓库”做文字游戏。最重要的是,我们可以调教它生成特定结构的文本,这可以大大减少后续处理花费的时间。

批量生成离线数据

还是以这次的小程序为例。我需要大量的签文以及不同幸运数字、不同幸运色的解释文案。恰好以前做过类似的需求,可以对比一下:

如果用人工配置,会需要花费至少1天的时间引经据典搜集文案,并把这些批量添加到配置平台中去。而这些搜索到的文案也往往受限于我们的“想象力” —— 因为我们的搜索结果肯定是和我们的输入相关,甚至最后搜不出来用比较尬的文案凑上。

对于类似这样的事情,ChatGPT可以很好的辅助解决。比如对于生成幸运色的文案,我们可以这样问:(总共有55种幸运颜色,每个颜色都需要>10条文案)

假如你是一个算命先生,请帮我测算一下我今天的幸运色,并进行详细的解析。候选颜色有:天蓝、米白、金黄、粉红。你的回答需要以“今天的幸运色是……;它代表着……”为开头。请开始吧。 ChatGPT会对此给出一段十分规整的回答:

接下来就好办了:只需要一段循环、一段正则: ```javascript import fetch from "node-fetch"; import fs from 'fs/promises'; import path from 'path'; import { ChatGPTAPI } from "chatgpt"; import { fileURLToPath } from "url";

const chatgpt = new ChatGPTAPI({ apiKey: YOUR_API_KEY, fetch });

const allColors = ['星灰', '玫瑰灰', '枫红','樱草紫', '冰山蓝', '月影白', ...]; // 略过了

/ 循环生成文案 / async function query(){ for(let color of allColors) { // 每个颜色生成15条文案 for(let i = 0; i < 15; ++i) { try { const color = allColors[i]; const result = await chatgpt.sendMessage(假如你是一个算命先生,请帮我测算一下我今天的幸运色,并进行详细的解析。候选颜色有:${color}。你的回答需要以“今天的幸运色是……;它代表着……”为开头。请开始吧。, { promptPrefix: ' ', promptSuffix: ' ' });

            // 写入文件,略过了

        } catch {

        }
    }
}

}

/ 处理文案 / async function handle(){ // 读入文件,略过了 const raw = await fs.readFile('xxx', 'utf-8'); const [_, _colorName, _colorDesc] = raw.match(/今天你的幸运色是(.+?)色?;,;。/) ?? [];

// 还可以做一些简单的正则替换,比如把两个字的XX替换为XX色
const format = (n) => n.length === 2 ? n + '色' : n;
let colorDesc = _colorDesc.replace(new RegExp(`${_colorName}(?!色)`, 'g'), format(_colorName));

// 保存文件 略过了

} ```

需要注意的是,如果给定一系列的候选颜色,那ChatGPT的回复结果不是均匀分布的,而会是更倾向于其中的某一个或某几个颜色,我试了好几组,大概几百组数据(花掉了一个号的额度)都是如此。因此为了保证每个颜色都有足够的文案,直接把候选颜色设置成1个就可以精确控制了(也就是query函数中做的那样)。

同时,为了省钱,其实还可以一次让ChatGPT多生成几条文案,无非是到时候我们正则匹配时候的规则变一变:

总结

  • 离线文本:ChatGPT可以快速生成满足特定结构的文本,这些文本可以被很方便地处理用于后续操作;
  • 不均匀:如果给定ChatGPT一系列(可能没有正确答案的)选项,它的回答的分布可能是不均匀的;
  • 批量:可以通过特定的用语诱导ChatGPT按照预期的行为回答,也可以一次生成多条文案

除了ChatGPT以外,顺带还试了一下New Bing,感觉被它拿捏的死死的...

开发

以上两节中提到的内容和开发阶段对比,如果没有ChatGPT和MidJourney的帮助,花费的时间应该是差不多的。ChatGPT暂时在直接写项目代码方面可能还不太行,(比如某次我让问它一个css效果怎么实现,它告诉我用background-image: url图片...)

但如果把它当作除了google和stackoverflow以外的“第三种搜索引擎”,那效果还是很不错的,比如:

geuMA.png

前端和后端的开发部分就普普通通了,和上次写的没啥区别,就正常的业务代码。简单写一些关于前端部分的小点:
1. AI绘画生成的背景图顶部和底部都是比较规律的颜色,因此如果我们需要让这个页面的高度大于底图的高度,我们可以直接把背景图的底部裁下来一点,然后 background-repeat: repeat-y; 就可以把多出来的部分填满了。

  1. 尽管AI生成的图虽然不可以直接变成动图/视频,但是我们仍然可以通过一些简单的动效让它看起来好像有动画。比如上边生成的抽签筒素材,我们只需要简单的加个filter的动画就能营造出近似发光的效果: @keyframes button-shine { 0% { filter: brightness(0.9); } 50% { filter: brightness(1.3); } 100% { filter: brightness(0.9); } }

gztww.gif

结语

到这里就结束了。从这个小项目总结下来,体感上AI绘画可以在视觉上提供一些参考,比如背景图、配色;也可以生成一些素材;ChatGPT除了可以提供一些创意、当作搜索引擎之外,还可以辅助我们生成大量我们需要的文本素材。

或许以后text2img还可以做text2ui;对于想做一些小游戏的个人开发者来说,这些工具还可以辅助直接生成想要的素材和背景;说不定以后还会有由AI制作的vtuber和galgame之类的吧。。。反正能降低自己折腾的成本的东西都是好东西~

随便写写~ demo直接微信小程序搜“赛博运势丨AI测命理”,不贴二维码了~