用ChatGPT和AI繪畫做一個微信小程式
theme: channing-cyan
本文正在參加 ✍🏻 技術視角深入 ChatGPT 徵文活動
前言
題目或許有些標題黨,先大概交代一下上下文吧。一週多前用ChatGPT做了一個AI算命的微信小程式:“賽博運勢丨AI測命理”。後來覺得似乎有點單調,差點意思。於是趁週末又加了一個每日運勢的小功能。
這個小功能在ChatGPT和AI繪畫程式MidJourney的幫助下,花費兩天時間就做的差不多了。這裡還是大概總結一下過程,然後記錄一些想法,大概是關於這些工具能給個人開發者帶來什麼樣的加成。(個人總結向)
正式開始之前,先猜猜看下邊成品圖中哪些部分和ChatGPT或者AI繪畫有關吧:
應該還是比較明顯的,除了年份、今日運勢這幾個字以外,其他部分的文案和設計都和ChatGPT/AI繪畫有關。我想先從個人工作流開始寫起,一步步記錄一下這些AI工具在整個小產品上線的過程中到底做了什麼。
個人工作流
在公司裡要做一個需求時,通常會糾集一批不同角色的人去討論,搞各種各樣的評審、寫各種各樣的文件。作為個人開發者來說,在這一方面還是非常自由的 —— 因為只有自己一個人。但在整個“產品”迭代上線的過程中,我們仍然會需要在不同的階段扮演“產品經理、設計師、前端、後端、運營、測試”等不同的角色。以這次做的“每日運勢”小需求為例(只是示意,不一定嚴格按下邊的順序):
-
最開始時需要明確整體的需求:想做一個每日運勢,每天進來點一下可以看到當天的運勢、幸運色、幸運數字,並且需要做出一些解釋。(產品)
-
然後大概設計一下要做成什麼樣子:介面大概是個比較神祕又有點可愛的畫風,因為畢竟是娛樂為主,所以色調不能太嚴肅。上半部分需要展示一個整體的運勢,下半部分展示類似籤文或者解釋之類的東西(設計)
-
接下來想一想文案怎麼搞:每日運勢有4種,可以調整概率;幸運數字有10個,幸運顏色有幾十個,它們對應的籤文或者解籤的文案都是可能會在後期不斷的新增。(產品&運營)
-
整體設計的差不多了,接下來看看介面怎麼寫:在Pixso/Figma/PhotoShop上簡單比劃幾下,然後想想頁面拆分和模組設計,在哪調介面怎麼存資料之類的。(前端&設計)
-
前端好像做的差不多了,想一想資料要怎麼處理吧:寫幾個介面,組織一下資料存到資料庫/redis。UV沒幾個,湊合過吧。(後端)
-
試試看功能有沒有壞:好像沒有專門的測試階段,因為在開發的過程中已經在順便測試了。(測試)
以上過程每個階段都還是比較佔時間的。對於部分個人開發者的業餘專案來說,可能在實際做的時候,流程就變成了:
-
冒出個好玩點子!
-
想想具體做成啥樣,週末去做一下
-
設計成啥樣呢,怎麼配色都不好看,畫的圖也又土又醜...
-
畫圖就畫了兩三個小時,還是沒改好。。。算了,功能優先...
-
要這麼多文案,百度直接抄好像也不太好... 那還是寫個爬蟲爬一下吧,不過也不是原創的...
-
寫個自己都嫌棄的前端,再寫個自己都嫌棄的後端,甚至還沒來得及寫完一個週末就過去了
-
算了,不做了。。。
但現在,有了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摳圖搞定,比如生成一些神祕的筒筒:
總結
- 速度:從拿到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以外的“第三種搜尋引擎”,那效果還是很不錯的,比如:
前端和後端的開發部分就普普通通了,和上次寫的沒啥區別,就正常的業務程式碼。簡單寫一些關於前端部分的小點:
1. AI繪畫生成的背景圖頂部和底部都是比較規律的顏色,因此如果我們需要讓這個頁面的高度大於底圖的高度,我們可以直接把背景圖的底部裁下來一點,然後 background-repeat: repeat-y; 就可以把多出來的部分填滿了。
- 儘管AI生成的圖雖然不可以直接變成動圖/視訊,但是我們仍然可以通過一些簡單的動效讓它看起來好像有動畫。比如上邊生成的抽籤筒素材,我們只需要簡單的加個filter的動畫就能營造出近似發光的效果:
@keyframes button-shine { 0% { filter: brightness(0.9); } 50% { filter: brightness(1.3); } 100% { filter: brightness(0.9); } }
結語
到這裡就結束了。從這個小專案總結下來,體感上AI繪畫可以在視覺上提供一些參考,比如背景圖、配色;也可以生成一些素材;ChatGPT除了可以提供一些創意、當作搜尋引擎之外,還可以輔助我們生成大量我們需要的文字素材。
或許以後text2img還可以做text2ui;對於想做一些小遊戲的個人開發者來說,這些工具還可以輔助直接生成想要的素材和背景;說不定以後還會有由AI製作的vtuber和galgame之類的吧。。。反正能降低自己折騰的成本的東西都是好東西~
隨便寫寫~ demo直接微信小程式搜“賽博運勢丨AI測命理”,不貼二維碼了~