ChatGPT 時(shí)代，程序員的生存之道 | 人工智能 AI

ChatGPT 近期炙手可熱，仿佛沒有什么問題是它不能解決的。出于對(duì) ChatGPT 的好奇，我們決定探索下它對(duì)于前端開發(fā)人員來講，是作為輔助工具多一些，還是主力工具更多一些？

2D 能力測(cè)試

我們就挑選一個(gè)著名的遞歸回溯問題——“八皇后”，看看 ChatGPT 的表現(xiàn)如何。

什么是“八皇后”

首先，我們先讓它完整介紹下“八皇后“問題。讓我們拭目以待 ChatGPT 會(huì)給出什么樣的答案，溝通如下圖所示：

只是要求介紹一下“八皇后”問題，它竟然連解題思路也如此清晰地一并給出。

編程能力

既然如此，那就來考考編程能力。

先要求它使用 JavaScript 求解“八皇后”問題的所有解。為了方便查看最終效果，又要求它使用 Canvas 將結(jié)果繪制出來。具體問答如圖所示：

目不轉(zhuǎn)睛地注視著屏幕中的 ChatGPT ，它一行一行噼里啪啦地給出答案，且代碼編寫地如此整潔，不禁由衷贊嘆。雖然還不確定這些代碼能否真的運(yùn)行起來，得到我們想要的效果，但是從生成代碼的結(jié)構(gòu)和邏輯性來看，已經(jīng)足夠令人震撼。

接下來，我們來驗(yàn)證一下代碼是否真的可以順利運(yùn)行。復(fù)制粘貼 ChatGPT 給出的答案，在未更改一行代碼的情況下，頁面的確運(yùn)行了。一起看看運(yùn)行效果：

看著實(shí)現(xiàn)出來的效果，我的內(nèi)心開始忐忑不安。腦海里瘋狂計(jì)算著這樣一個(gè)問題：我需要花費(fèi)多長(zhǎng)時(shí)間才能解決以上問題？反正肯定無法像 ChatGPT 這樣，不到 30S 就給出結(jié)果。

輸出所有解

再回過頭來看答案，卻發(fā)現(xiàn)只打印出一個(gè)結(jié)果，所以它能否將所有的結(jié)果都打印出來呢？我們接著提出需求，答案如圖所示：

Unbelievable，竟然真的可以，立即復(fù)制粘貼操作，檢驗(yàn)運(yùn)行效果：

仔細(xì)數(shù)了下，發(fā)現(xiàn)只輸出了 16 個(gè)解，但是開頭提到總共是有 92 個(gè)解。通過仔細(xì)查閱代碼，發(fā)現(xiàn)一個(gè)小格子被定義為 40 個(gè)像素，而整個(gè) Canvas 的大小是 1280 像素，所以這個(gè) Canvas 最多只能畫 16 個(gè)棋盤。

在此輸出中，棋盤和棋盤之間沒有點(diǎn)間隔，很難辨別棋盤邊界，觀看起來有些費(fèi)力。問題相對(duì)簡(jiǎn)單，只需調(diào)整幾個(gè)參數(shù)即可解決，我們選擇手動(dòng)調(diào)整，調(diào)整后的 drawChessboards 方法。如下所示：

function drawChessboards(solutions) { const canvas = document.getElementById('chessboard'); const ctx = canvas.getContext('2d'); const n = solutions[0].length; const solutionsPerRow = Math.ceil(Math.sqrt(solutions.length)); const sizeWithGap = canvas.width / solutionsPerRow / n; const size = sizeWithGap * 0.95; for (let k = 0; k < solutions.length; k++) { const offsetX = ((k % solutionsPerRow) * n + 0.2) * sizeWithGap; const offsetY = (Math.floor(k / solutionsPerRow) * n + 0.2) * sizeWithGap; for (let row = 0; row < n; row++) { for (let col = 0; col < n; col++) { if ((row + col) % 2 === 0) { ctx.fillStyle = '#FFFFFF'; } else { ctx.fillStyle = '#000000'; } ctx.fillRect(col * size + offsetX, row * size + offsetY, size, size); if (solutions[k][row][col] === 'Q') { ctx.beginPath(); ctx.arc(col * size + size / 2 + offsetX, row * size + size / 2 + offsetY, size / 4, 0, 2 * Math.PI); ctx.fillStyle = '#FF0000'; ctx.fill(); } } } }

}

接下來再瞧瞧最終的運(yùn)行效果：

這回看著舒服了很多~

綜上所述通過對(duì) ChatGPT 在 2D 能力檢驗(yàn)可知，ChatGPT 在生成 Canvas 繪制邏輯代碼的能力以及解決問題邏輯處理能力上，已然與一位程序員沒什么區(qū)別了，甚至可能它所具備的能力或遠(yuǎn)超普通的程序員。

3D 渲染測(cè)試

提升維度，讓 ChatGPT 將結(jié)果用 3D 的渲染方式輸出看看。如圖所示：

我們?cè)僖淮?a href="http://wenjunhu.com/v/tag/1472/" target="_blank">機(jī)械性地復(fù)制、粘貼、運(yùn)行它給出的代碼，結(jié)果就是——跑起來了，真的跑起來了。（ps：可以看出真的很激動(dòng)~）

但該視角太低，不適合觀察棋盤上皇后的分布情況，手動(dòng)微調(diào)下場(chǎng)景視角高度，再來看看效果：

使用開源的 3D 渲染引擎 Three.js，實(shí)現(xiàn)了這樣的效果，還是非常不錯(cuò)的。

模型風(fēng)格調(diào)整測(cè)試

用簡(jiǎn)單的柱子來表示皇后，看起來太過單調(diào)，想看看 ChatGPT 能否真正生成精致的皇后模型，于是就有下圖的提問:

運(yùn)行效果如下：

皇后模型效果確實(shí)給出了調(diào)整，視角也有所調(diào)高，但又過于高了且皇后的位置好像有些偏差，看起來像是懸浮在空中。再讓它調(diào)整看下，如下圖所示：

調(diào)整后效果：

大概這樣的“皇后”模型已經(jīng)是極限了，我們就不再強(qiáng)求，生成的視角還是那么高，但都是小問題，微調(diào)下即可，其他的都未做調(diào)整。

以上就是整個(gè) 3D 渲染效果的校驗(yàn)過程，再一次證明了 ChatGPT 的強(qiáng)大之處，生成的代碼顯然已經(jīng)達(dá)到可應(yīng)用級(jí)別。

WebGL 技術(shù)測(cè)試

既然會(huì)使用 Three.js，那是不是意味著已經(jīng)掌握了 WebGL 技術(shù)呢？接下來問題再升級(jí)下，測(cè)試看能否用純 WebGL 來完成 3D 的渲染，如圖所示：

望著代碼被一行一行急速輸出時(shí)，再一次被它的強(qiáng)悍震得心頭一緊。如果想要完整實(shí)現(xiàn)的話內(nèi)容會(huì)太長(zhǎng)，所以它羅列了代碼的整體框架，部分代碼用注釋代替。

HT 渲染引擎究極測(cè)試

身邊的小伙伴提到，試問下能否用圖撲軟件自家 HT 作為渲染引擎，讓 ChatGPT 給出相應(yīng)的可執(zhí)行代碼？答案如圖所示：

乍一看輸出的結(jié)果，代碼似乎寫得很不錯(cuò)。但仔細(xì)閱讀后，會(huì)發(fā)現(xiàn)代碼中有很多地方使用錯(cuò)誤，比如沒有使用 HT 的 3D 組件 Graph3dView，而是使用了 2D 組件 GraphView；2D 的接口和 3D 的接口混用；使用的接口不存在等多種問題。

也許是 ChatGPT 能夠獲得的訓(xùn)練數(shù)據(jù)相當(dāng)有限，但它生成代碼的水平已經(jīng)是非常高了，只需在原基礎(chǔ)上稍加調(diào)整，即可順利運(yùn)行。

總體來說，ChatGPT 相較于普通程序員，在編寫算法和通用渲染方面以及效率上都有著更強(qiáng)的實(shí)力。在一些比較垂直的領(lǐng)域，由于缺乏足夠的訓(xùn)練數(shù)據(jù)，可能會(huì)導(dǎo)致無法準(zhǔn)確完整地表達(dá)，甚至?xí)霈F(xiàn)張冠李戴的情況。但它的表現(xiàn)在一定程度上縮短了程序員解決問題的時(shí)間，只要問題描述足夠清晰，就可以獲取到答案并直接使用。

在未來，相信 ChatGPT 會(huì)變得越來越強(qiáng)大，并且會(huì)成為一款非常出色的輔助工具，甚至可能成為主要的生產(chǎn)工具。

審核編輯黃宇