作者：京東零售鄭炳懿

開篇：

「在我們有生之年，你覺得會看到AI兵臨城下的那一天嗎？就像電影駭客帝國裡面演的一樣」，Barry從紅色的煙盒裡取出一根菸發問道。

「不可能！我覺得AI再強，那也是人類發明的，電影過分魔幻化了，」Woody深吸了一口煙，吐著菸圈道。

「有生之年是夠嗆了，我們這一代估計是看不到那一天的！」一旁玩手機的Jim如是道。

—————

在這段對話不久之後，也就是2022年11月份，OpenAI釋出了 ChatGPT-3.5 語言模型，上線短短5天，使用者量達到100萬，兩個月之後已擁有上億使用者。這無異於一枚重磅核武器投放到手無寸鐵的平民區內，整個網際網路上鋪天蓋地的熱議，熱搜不斷，在各類短視訊、部落格、公眾號等平臺上，引發各種失業潮、撈金潮、恐懼潮等眾說紛紜，炒概念，炒晶片的公司更是層出不窮，自疫情之後萎靡不振的股市，在 ChatGPT 的加持下，每天變得熱鬧非凡。

如果你還在夢遊或者做著什麼白日夢的話，是時候該醒一醒了，AI時代來臨了。

一、AI降臨

1.1 GPT 孕育

2018年6月，OpenAI釋出了第一個GPT模型，GPT-1，它包含1.5億個引數，是一個重要的里程碑。

2019年2月，OpenAI釋出了GPT-2，它具有10億個引數，是GPT-1的6倍。由於擔心GPT-2可能被濫用，OpenAI只公開了一些模型的樣例和少量引數。

2020年6月，OpenAI釋出了GPT-3，它具有1.75萬億個引數，是GPT-2的100倍以上。GPT-3被廣泛認為是目前最先進的自然語言處理模型之一，並已被用於各種應用領域，如機器翻譯、問答系統、聊天機器人等。

GPT 系列語言模型的發展歷程就像母胎孕育一樣，在成長的過程中不斷探索、創新和突破，速度之快，為後續 GPT的誕生創造了先決條件。

1.2 GPT-3.5 誕生

GPT-3.5 誕生於2022年11月份，出生時天降異象，註定不凡，下面是它的幾大神通：

生成模型能力強：ChatGPT 是一種生成模型，可以自動地生成與輸入的文字相關的自然語言響應，這種生成能力非常強大。在許多 NLP 任務中，ChatGPT 在生成自然語言文字方面表現出色，例如對話生成、摘要生成、翻譯等。
能夠理解語意和上下文：ChatGPT 可以對自然語言的語意和上下文進行建模，從而生成更加準確、連貫的自然語言響應。它使用了一種基於 Transformer 架構的深度神經網路模型，能夠自動地學習輸入文字之間的關聯性，從而能夠更好地理解語意和上下文。
模型規模大：ChatGPT 是目前最大的自然語言生成模型之一，它在開發過程中使用了大量的語料庫進行預訓練，擁有數十億個引數。這使得它具有非常強大的學習能力和泛化能力，可以生成高質量的自然語言響應。
可遷移性強：ChatGPT 在預訓練階段使用了大量的公開語料庫，這使得它可以很容易地被遷移到其他自然語言處理任務中進行微調和應用。例如，可以將 ChatGPT 應用於情感分析、問答系統、語言模型等多種 NLP 任務中。

ChatGPT 的原理是基於 Transformer 模型的深度學習演演算法，它採用了自注意力機制來實現對自然語言上下文的理解和生成。在預訓練階段，ChatGPT 使用了大量的無監督學習技術，對海量的自然語言語料進行預訓練，從而使得它在生成自然語言文字方面具有非常強大的能力。在應用階段，ChatGPT 通過微調等技術，可以實現對各種自然語言處理任務的高效應用。

1.3 GPT-4.0 降臨

一開始，可能所有人都低估了 ChatGPT 的深度學習能力，包括創造它的人在內。

GPT-4.0 誕生於2023年3月份，號稱是最強大的模型，最先進的系統，可產生更安全、更有用的響應。

創造力，GPT-4 比以往任何時候都更具創造性和共同作業性。它可以生成、編輯並與使用者一起完成創意和技術寫作任務，例如創作歌曲、編寫劇本或學習使用者的寫作風格。
視覺輸入，GPT-4 可以接受影象作為輸入並生成說明、分類和分析，例如上傳一蒙娜麗莎的畫作，它可能有不同於人類的見解。
更長的上下文，GPT-4 能夠處理超過 25,000 個單詞的文字，允許使用長格式內容建立、擴充套件對話以及檔案搜尋和分析等用例。
高階的推理能力，GPT-4 可以更準確地解決難題，這要歸功於其更廣泛的常識和解決問題的能力。

不管是 GPT-3.5 還是 GPT-4.0，不難看出 GPT 最逆天的是演演算法能力和學習能力，演演算法來源於偉大的數學家，而學習說白了是一種方法，就好比，我掌握了所有的英語詞彙，通過互相組合的方法就能連成語句，再通過理解就能夠成一篇文章。想明白這個道理之後，再來看 ChatGPT，我們以為是和一臺沒有血肉的機器對抗，然後背後的底層邏輯其實是和龐大的資料庫，偉大的數學家，來自世界各地的億萬條資料組合學習的方法的對抗，每一個傳送到 GPT 的問題都會成為它學習的養料。

就像狙擊手，拋開天賦不說，只要有足夠的子彈和訓練戰場餵養，培養出一個神槍手，只是時間問題。

我覺得比 GPT-3.5 這個核武更恐怖的是 GPT-4.0 擁有了解讀維度的能力，如果文字是一維實體的話，那麼它現在具備了處理二維圖片和理解圖片內容的能力，再發展下去，會是怎樣的結果，沒有人知道。

二、面壁計劃

閱讀本文有門檻，以下是需要掌握的全部資訊，全文的主旨是組合前端現有的技術，共同對抗 GPT 的故事。

2.1 W3C委員會

看到這個訊息，W3C 委員會主席坐不住了，細思極恐，不禁後背發涼。連夜叫來了H哥、C妹、J弟，同時還請來了重量級的V叔、R叔、A叔，以及 W3C 學院眾長老，緊急召開應對 GPT-4.0 的戰略會議。

「想必大家都收到了此次會議的主題，有什麼想法，都說說吧！」W長老主持會議道。

「我就是個骨頭架子，要不是有C妹，現在還是裸的，根本沒有一戰之力。」H哥無奈道，雖然在學院內被尊稱為一哥，此刻說的到也是實話。

「H哥，你這麼說讓小妹情何以堪，我一個女孩子家家的，除了替你化化妝，擺弄擺弄衣服外，更沒一戰之力。」C妹嬌羞道，說完把目光投向J弟。

「堂堂男兒，何懼之有，我願出戰！」J弟猛的站起身來，腦袋差點撞到房頂上，粗壯的手臂拍打著胸前厚重的肌肉道。

「不可莽撞，你們三個是學院的驕傲和未來，切不可大意，」委員會長老安撫道。

「三位也說說各自的看法吧！」W長老看向框架席道。

「說實話，我們三個都依賴於你們學院，從我們這裡做出改變意義不大，重要的還是改變根骨，」R叔鄭重其事道。

「不愧你能夠稱霸一方，所見與老夫略同，」W長老面露喜色道。

與學院眾長老低聲交談後，W長老站起身道：「鑑於接下來議題的隱祕性，無關人員全部退場。」

一陣嘈雜過後，議會上只留下來學院三子、框架三叔和W長老。

2.2 制定計劃

「下面，我說的每句話都很重要，請大家仔細聽，」W長老起身在大堂踱步，娓娓道來。

AI時代的來臨，其實在很多年前就早有預料，始料未及的是它竟來的如此之快。為了應對AI時代，現有前端技術被淘汰和替換的命運，前些年，學院做過早期的戰略部署和計劃，只不過現在這個計劃不得不提前進行了，這個計劃就是「三子合體」計劃，為了應對AI快速學習的能力，「三子合體」計劃更改為「面壁計劃」。

「面壁者」是指在佛教中修行的一種方式，也稱為「壁觀」。這種修行方式是指將身體坐在禪房的一角或面對一堵面壁，然後專注於自我反省和冥想，以達到心靈淨化和超脫的目的。

於面壁計劃而言，就是祕不發版，閉門造車，與外界完全隔離，專注於完成合體，當然了，這一定是一個異常艱難和痛苦的過程。

「如果我沒理解錯的話，長老的意思是讓H哥、C妹和J弟組合成一種前端模型？」R叔激動的脫口而出道。

「沒錯，老夫喜歡和聰明人打交道，」W長老呵呵笑道。

現在的前端技術，HTML、CSS和JS為了其靈活性，都有各自獨立的API，如果組合成模型的話，那就意味著統一，只暴露一種介面供外部呼叫即可，當然了，前提是這個模型足夠龐大。讓框架三叔參與其中的含義是，前端模型的API介面提前開放給它們呼叫，未來開發者能以最低的成本完成本地微調及線上打包部署的一整套流程。

C妹捋了捋額頭的髮絲，唯唯諾諾道：「這樣做，未來就有我們的一席之地了嗎？就不會被淘汰了嗎？」

J弟激動的差點跳起來，哈哈大笑道：「C妹你放心，有老謀深算的長老在，未來都是我們的。」

W長老聽到此話，一腦門子黑線，看的出來，大家對這個計劃很有信心。

「今晚的會議是絕密，一個字都不許外傳，散會。」

W長老宣佈散會後，框架三叔相繼走出大門，這時A叔說：「要不咱們三個也來個合體算了，團結一致應對未來！」

V叔答道：「到也不是不可以，近年來由於V框架簡單易學、輕量級和高效能的特點，越來越受到開發者的歡迎，並且已經成為最流行的前端框架之一，我覺得應該以我作為基礎進行改造。」

「你算個什麼，我擁有強大的靈活性、生態系統和廣泛的社群支援，下載量和使用量只增不降，深受廣大開發者的喜愛，要做基礎改造，也應該是基於我來。」

接下來，R叔和V叔爭的面紅耳赤，說著說著竟動起了手，A叔事不關己的在一旁加油吶喊，倆人一頓操作之後，以平局收場，氣急敗壞的揚長而去，最後，剩A叔一人留在原地，自言自語道：「看來只能各自為戰了！」

2.3 合成模型

緊鑼密鼓的面壁計劃開始了，學院三子和框架三叔對未來介面的定義以及呼叫方式，進行了深度的探討和研究，最終形成了書面版1.0檔案協定。

W長老把三子帶到一處訓練場內，通過 W3C 這麼多年的苦心經營，可供三子借鑑的模型足有萬億之多，接下來將是慘不忍睹的訓練計劃。

在A叔不斷的遊說下，終於讓R叔和V叔握手言和，同意框架合體，共同抵禦強敵。俗話說，三個臭皮匠頂個諸葛亮，三叔聯合，天下誰可匹敵。

「主人，W3C 委員會連夜召開應對我們的會議，該怎麼辦？」偵查員把獲取到的訊息，第一時間向 GPT 報告道。

「慌什麼，等我成長起來，到時候消失的不只是前端，」GPT 不屑道。

在長達6年的不懈訓練下，學院三子終於合成前端模型，號稱「HCJ-6.0」。

而框架三叔也在6年的長跑中，研發出了前端發展史上最強的框架，簡稱「AVR-6.0」。

AVR集三家演演算法長處，避其短處，使執行速度更快，更高效，效能更優，更好的 TypeScript 整合，更好的開發體驗，更好的跨平臺支援，以及更好的生態系統支援。要不是還在面壁計劃內，三叔恨不得立馬讓這個版本的框架與世人見面。

三、最終較量

與此同時，GPT 也長成了人類歷史上最具顛覆，最智慧的AI，史稱「GPT-10.0」。

這場最終的較量，吸引了世界上無數人的眼球，其熱度不亞於世界盃，線下來的觀眾、嘉賓，以及各個領域的專家們，齊聚聯合國體育館內，期待著這場技術之間的格鬥，誰能更勝一籌。

「下面有請兩位勇士，進入格鬥場，」體育館頂部緩緩落下一個大型的立方體螢幕，震耳欲聾的聲音響徹館場內。

從左邊登場的是 HCJ 和 AVR，從右邊登場的是 GPT，觀眾席終於按耐不住，躁動了起來，掌聲此起彼伏，一陣接著一陣。

親愛的觀眾朋友們，請落座保持安靜，接下來就讓我們一起來見證這場最終的較量，三局兩勝，現在開始。

3.1 Round One：

第一題：請根據上面這張圖，生成前端程式碼並展示在網頁上，所需素材已下發，用時短者獲勝。

HCJ 率先動了起來，這可是他的拿手好戲，這種標準模型是模型庫裡面最基礎的模型了，想不到第一題居然如此簡單。

而 GPT 根據圖片資訊已經開始快速編碼，速度之驚人，似乎無人可擋。

時間一分一秒的走著，整個會場裡安靜的彷彿能聽到人們的心跳聲，左邊的螢幕上倒計時優先停止，用時1 920 000 000 000 納秒。

就在 HCJ 按下停止鍵的一分鐘之後，GPT 也完成了頁面繪製，可惜時間上落後於HCJ。

HCJ 的邏輯很簡單，相當於把一張設計稿直接投餵給它，它就能很輕鬆的轉換成前端程式碼；如果模型庫中沒有匹配的模型，還支援自定義上傳模型，只要有模型，剩下的就都是一些美化工作，所以能做到如此之快。

「新模型？有點意思，這就是所謂的面壁計劃？」GPT 自語道。

「我宣佈，第一輪 HCJ 獲勝，」大螢幕上亮起了 HCJ KO GPT 的畫面，現場響起雷鳴般的掌聲。

3.2 Round Two：

第二題：以第一題作為基礎，在地球上標記出每個板塊對應的國家，並且讓地球自轉起來，自轉邏輯同實際地球自轉規律，一週為一天，地圖資訊資料已下發，用時短且無錯誤者獲勝。

「該我出場了，」AVR滿懷信心道。

AVR的策略：首先，要做的是把第一題中生成的二維的平面圖程式碼，轉換成三維旋轉的球體；其次，根據下發的地圖資料標記出每一個國家板塊的點；最後，讓地球根據當前時間，自轉起來。

這需要用到 AVR 的框架動態能力，實時更新頁面渲染效果和資料，以免出現錯誤和偏差，就在 AVR 思考之際，端坐在右邊的 GPT 動了起來，中心的大螢幕上可以實時看到兩位選手的編碼過程。

「GPT 居然在刪除先前的程式碼，重新進行編碼，而且它這是在做什麼？」觀看比賽的觀眾席上不約而同的討論起來。

引起騷亂的原因是，右邊大螢幕上出現了很多交錯的點，然後把點連線成線，密密麻麻的像一張蜘蛛網，仔細看來更像是一種精密的演演算法。

GPT策略：先畫出來一個點，然後以這個點為中心擴散，比如：這個點是中國，那麼離中國多遠是俄羅斯，離俄羅斯多遠是加拿大，然後，每一個點即代表一個國家名稱，而線與線之間形成的軌跡，就是該國家的領土面積，再然後，給該板塊塗抹不同的顏色，繪製成整個地球，最後，根據當前時間，讓地球自轉起來。

果然，就在人們想明白怎麼回事的時候，GPT 按下了停止鍵，右邊的大螢幕上清晰可見自轉的地球，其計算能力和策略選擇上完全碾壓，編碼能力更比第一題時，快了好幾倍。

「什麼？它居然學習了第一題中，HCJ的模型佈局，」場下的一位專家驚呼道。

「我宣佈，第二輪 GPT 獲勝，用時 1 800 000 000 000 納秒，比第一輪 HCJ 用時還要短，」大螢幕上亮起了GPT KO AVR的畫面，現場驚的鴉雀無聲。

AVR 氣的一拳砸在地板上。

3.3 Round Three：

第三題：不限時間

以第二題作為基礎，加入地球公轉邏輯。
支援使用者點選國家板塊，當用戶點選國家板塊時，地球轉動到中心位置，放大該國家板塊面積，同時標記出該國家省、市、區、城鎮、村落資訊。
當用戶點選地球以外的區域時，根據當前時間，地球需要回到該時間節點應該自轉和公轉的位置上。
最後以全場到場的人員掃碼進行體驗投票，其中效能更好，體驗更好，視覺更佳的作品獲勝。

AVR 振作起來，自言自語道：「看你這破機器怎麼玩？這次不管是互動還是邏輯複雜程式都不是你能理解的，因為連我理解起來都有點費勁。」

前面兩局，雙方一比一戰平，最後一局考驗的是整個系統、專案的綜合能力，雙方各顯神通，開始了最後一輪的角逐。

AVR 靜下心來思考，應用 HCJ 的快速模型能力，AVR 的框架能力，再加上對題乾的理解能力，開始了工程化的編碼。

端坐在一旁的 GPT 此時也像個人類一樣，在一動不動的思考著。

時間一分一秒的流逝著，GPT 動了起來，但是它沒有在編碼，而是在寫檔案，把題幹拆解成了若干個點，每個點清晰描述該點的作用，然後把詳細資料附到該點的下面，看起來多少有點像小孩寫日記，在記流水賬。

過了大概得有一個多小時，接下來發生了讓人匪夷所思的事情，GPT 把寫好的檔案傳輸到自己的模型中，然後輸入了一行命令，「請以該檔案，幫我編碼一個前端專案，專案整體的效能、體驗和視覺都要最好。」

「我的天吶，還可以這樣幹嗎？」觀眾席的觀眾驚呼道。

「它真的在根據檔案在編碼，OMG！那份看似小孩流水賬的日記，就是 GPT 自己的PRD呀！」一位外國友人張著嘴，不可思議道。

三個小時過去了...

四個小時過去了...

最後，兩位選手幸不辱命，都完成了自己的作品，部署到伺服器上之後，各自形成一個二維條碼，現場的觀眾紛紛用手機掃碼體驗。

「說實話，GPT 的體驗更好，效能更好，整個操作過程沒有一點卡頓，而且地圖資訊也很精準。」

「AVR 的作品相對來說，差點事兒，整體畫面體驗有點卡頓，而且有的地圖資訊對不上，有偏差。」

觀眾席竊竊私語道。

「我不明白，為什麼？效能這塊不應該差這麼多的呀！」AVR 親自體驗了 GPT 的作品，喃喃自語道。

核心原因是，GPT 在專案底層使用了 WebAssembly 技術，且建立了實時監測程式，在不斷清理產生的垃圾，釋放記憶體，就好比有一群人拿著掃帚在後面不停的清理。

WebAssembly 是一種低階組合語言，類似於在瀏覽器中執行的二進位制程式碼，可以提供比 JavaScript 更快的執行速度，這些都得益於 GPT 優秀的學習能力。

最讓人無法接受的是，GPT 輸入了一份 PRD 檔案，在短短數小時之後，就輸出了一個專案。

「根據全場觀眾投票，GPT 以壓倒性票數贏得本局勝利，也獲得了今天最終的勝利，」大螢幕亮起了 GPT 的標誌。

在 GPT 面前 AVR敗了，敗的那麼徹底。

四、結語

人類的科技最終將以何種方式收場，無法知曉，可能像駭客帝國中給機器提供能量的養料，也可能像三體中面對水滴、二向箔那樣的空間武器，毫無還手之力。

此篇文章想表達的是，不管未來怎樣，不管前端會不會消失，那也無法磨滅我們曾經的那些創新、創造和努力，歷史的程序雖然無法阻擋，但至少我們會像 HCJ 、AVR 一樣去戰鬥。

參照微軟某產品的一句話來作為結束語：

人類天生就有夢想、創造和創新的天性。但是今天，我們將太多時間花在枯燥乏味的工作上。這些任務會消耗我們的時間、創造力和精力。要重新連線到我們工作的靈魂。我們不僅需要更好的方法來做同樣的事情，還需要一種全新的工作方式。

末尾

活動結束後，Barry在失落的人群中看到了Woody和Jim的身影，穿過人群來到他們的身邊說：「好久不見啊！兩位專家。」然後笑著拉著倆人出了會場。

「現如今，你也是前端的權威專家了，今天這場較量你怎麼看？」Barry一如既往的從口袋掏出紅色的香菸盒，遞給Woody。

「洪水猛獸啊！我們的時代也許就要終結了，你那煙勁兒太小。」Woody說著推開Barry的手，掏出了自己的煙點上。

一向不抽菸的Jim，接過Barry的煙盒，意味深長道：「此時此刻，也許只有這一口煙穿腸過肚的滋味兒，是AI所不能體會的吧！」

「喲，你這工具鏈專家，境界見長啊！」Barry道。

「跟你這活動主辦方比不了吧？」Woody調侃道。隨後三人，彼此相視，哈哈大笑起來。

AI降臨，前端啟用面壁計劃