巧用 ChatGPT 將半天的工作量壓縮到 20 分鐘

最近幾個月一直忙著網(wǎng)站的開發(fā)還有 AI 相關(guān)知識的學(xué)習(xí)，所以疏于寫文章了， AIGC 的機(jī)遇讓人心動，建議大家務(wù)必重視這一波浪潮，我已經(jīng)見過挺多踐行者變現(xiàn)了不少或創(chuàng)業(yè)盈利的了，作為職場人員，應(yīng)該積極擁抱 AI，利用 AI 來提效，充分利用AI，能給我們帶來意想不到的驚喜

今天我就來給大家分享一個案例，來看一下我在工作中是利用 ChatGPT 把原本需要半天的工作量壓縮到不到半小時的。

最近我司要做一個 AI 工具地圖，效果如下

需求是把每個 AI 產(chǎn)品的圖標(biāo)分門別類地先合成一個小圖，再把所有小圖整合成一個 AI 大地圖，注意每個圖標(biāo)下面的文字都是其對應(yīng)的產(chǎn)品名哦,放大看某一類AI產(chǎn)品的效果如下:

如果把所有的工作如包括下載圖標(biāo)，合成每個類別的 AI 產(chǎn)品小圖，再到合成最后的大圖都交給 UI，可想而知這樣的工作量是非常巨大的，所以我們就想能不能盡可能地減輕 UI 的工作量，用技術(shù)的手段至少能做到先下載 AI 圖標(biāo)將它們分門別類地合成小圖，這樣 UI 所要做的事就比較簡單了，只要把小圖拼成大圖就行了

首先我們需要找到這樣 AI 圖標(biāo)，毫無疑問 AI 導(dǎo)航網(wǎng)站再合適不過了，這些導(dǎo)航網(wǎng)站基本上分門別類地給你整理好了這些AI產(chǎn)品的圖標(biāo)，我們決定使用 https://ai-bot.cn/ 這個導(dǎo)航網(wǎng)站里的圖標(biāo)，它的首頁截圖如下

好了再來明確我們的需求，首先需要獲取每一類 AI 產(chǎn)品下的圖標(biāo)，并將圖標(biāo)命名為此 AI 對應(yīng)的產(chǎn)品名，然后將這屬于同一類AI產(chǎn)品的圖標(biāo)置于同一個文件夾下，效果如下

圖標(biāo)有幾百個，如果人工一個個下載圖標(biāo)并命名，工作量巨大不說，還很容易出錯，最容易想到的當(dāng)然是用腳本如 Js 或 Python 來爬取網(wǎng)頁中的圖標(biāo)和文案，但是如果人工去寫腳本，也挺費時的，而且很難一次性寫對所有的代碼， 需要花很多時間 來 debug，所以寫腳本這樣的重活最好讓 ChatGPT 來幫我們寫，又快又好，只要我們把需求寫清楚，ChatGPT 基本一次性就能把腳本給我們寫好。

我們首先觀察網(wǎng)站的結(jié)構(gòu)，注意到網(wǎng)站的結(jié)構(gòu)很相似，基本都是 「AI 類別標(biāo)題 +  AI 類別圖標(biāo)集合」這樣的組合結(jié)構(gòu)，我們就取一個來觀察

下圖中綠框為AI 類別標(biāo)題對應(yīng)相應(yīng)的 div，紅框為標(biāo)題下的圖標(biāo)集合對應(yīng)相應(yīng)的 div

繼續(xù)觀察，每一個AI類別的標(biāo)題對應(yīng)著 class 為 d-flex 的  div > h4 > i 中的文字

而每個 AI 圖標(biāo)的 url 和名稱對應(yīng) html 中的元素如下

注意：有一些AI產(chǎn)品分類如熱門工具等不是這樣的結(jié)構(gòu)，不過結(jié)構(gòu)都非常類似，用  Visual Studio 來將它們稍加調(diào)整成以上的結(jié)構(gòu)即可

了解了我們要提取的 html 結(jié)構(gòu)后，我們就可以給 ChatGPT 下指令來讓其為我們生成腳本來提取每一類 AI 產(chǎn)品下的圖標(biāo)并在下載后將其命名為相應(yīng)的 AI 產(chǎn)品名了，指令如下（test.html 即網(wǎng)頁的 html）:

最終它會給我生成類似以下的 Python 代碼:

放在本地，下載對應(yīng)的依賴后一鍵執(zhí)行即可按要求提取每個分類下的AI圖標(biāo)，如下

做到這一步還不夠， 為了進(jìn)一步減輕 UI 的工作量我希望幫 UI 把每一個 AI 類別的圖標(biāo)合成一張圖，如下：

合成圖片這種工作 Python 也能做，指令如下：

執(zhí)行代碼后即可生成每個AI類別的小圖，效果如下:

可以看到，每一類的 AI 圖標(biāo)都合成了一張圖

這樣的話交付給UI的就是一些合成好的每個 AI 類別的小圖了，UI拿到后再將其拼成一張大圖就相對容易多了

總結(jié)

本文給大家展示了一個典型地利用 AI 來提效的案例，這只是其中一個例子，實際上在工作中我大量使用了 AI 來編碼，以網(wǎng)站的后端代碼為例上，90%的代碼都是 AI 寫的，當(dāng)然指令還是我下的，有人說 ChatGPT 的出現(xiàn)可能會替代程序員，但就我的大量實踐經(jīng)驗來看，暫時 GPT 還沒達(dá)到這么智能化的程度，比如我一開始讓它寫接口，但它沒給我處理跨域這種情況，這就需要程序員本人有相關(guān)的經(jīng)驗指引它補(bǔ)全，再比如我希望后端的很多接口都需要有用戶身份的驗證后才能進(jìn)入具體的代碼邏輯，但又不想每個接口都寫重復(fù)的校驗代碼，那就需要指示 GPT 幫我封裝校驗邏輯，使用類似export default withMiddleware(handler, cors, authenticate)這樣的責(zé)任鏈的方式來重用代碼以提高代碼的可擴(kuò)展性，所以事在人為，對于程序員來說，你越資深，掌握的知識越多，就越能指示 ChatGPT 最大程序地發(fā)揮其功效， AI 能夠幫我們處理那些重復(fù)的，不需要怎么動腦的工作，但更高層次的抽象還是需要程序員來指示它來完成。未來 AI 可能會進(jìn)化，但至少當(dāng)下我們能做的還是提升我們的功力以進(jìn)一步利用釋放 AI 的潛能。