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測命理”，不貼二維碼了~

用ChatGPT和AI繪畫做一個微信小程式