大家好，我是坤哥

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

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

最近我司要做一個(gè) AI 工具地圖，效果如下：

圖片

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

圖片

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

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

圖片

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

圖片

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

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

下圖中綠框?yàn)锳I 類別標(biāo)題對(duì)應(yīng)相應(yīng)的 div，紅框?yàn)闃?biāo)題下的圖標(biāo)集合對(duì)應(yīng)相應(yīng)的 div。

圖片

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

圖片

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

圖片

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

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

圖片

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

圖片

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

圖片

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

圖片

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

圖片

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

圖片

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

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

總結(jié)

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