AI降临，前端启用面壁计划

作者：京东零售 郑炳懿

开篇：

“在我们有生之年，你觉得会看到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月份，出生时天降异象，注定不凡，下面是它的几大神通：

1. 生成模型能力强：ChatGPT 是一种生成模型，可以自动地生成与输入的文本相关的自然语言响应，这种生成能力非常强大。在许多 NLP 任务中，ChatGPT 在生成自然语言文本方面表现出色，例如对话生成、摘要生成、翻译等。

2. 能够理解语义和上下文：ChatGPT 可以对自然语言的语义和上下文进行建模，从而生成更加准确、连贯的自然语言响应。它使用了一种基于 Transformer 架构的深度神经网络模型，能够自动地学习输入文本之间的关联性，从而能够更好地理解语义和上下文。

3. 模型规模大：ChatGPT 是目前最大的自然语言生成模型之一，它在开发过程中使用了大量的语料库进行预训练，拥有数十亿个参数。这使得它具有非常强大的学习能力和泛化能力，可以生成高质量的自然语言响应。

4. 可迁移性强：ChatGPT 在预训练阶段使用了大量的公开语料库，这使得它可以很容易地被迁移到其他自然语言处理任务中进行微调和应用。例如，可以将 ChatGPT 应用于情感分析、问答系统、语言模型等多种 NLP 任务中。

ChatGPT 的原理是基于 Transformer 模型的深度学习算法，它采用了自注意力机制来实现对自然语言上下文的理解和生成。在预训练阶段，ChatGPT 使用了大量的无监督学习技术，对海量的自然语言语料进行预训练，从而使得它在生成自然语言文本方面具有非常强大的能力。在应用阶段，ChatGPT 通过微调等技术，可以实现对各种自然语言处理任务的高效应用。

1.3 GPT-4.0 降临

一开始，可能所有人都低估了 ChatGPT 的深度学习能力，包括创造它的人在内。

GPT-4.0 诞生于2023年3月份，号称是最强大的模型，最先进的系统，可产生更安全、更有用的响应。

1. 创造力，GPT-4 比以往任何时候都更具创造性和协作性。它可以生成、编辑并与用户一起完成创意和技术写作任务，例如创作歌曲、编写剧本或学习用户的写作风格。

2. 视觉输入，GPT-4 可以接受图像作为输入并生成说明、分类和分析，例如上传一蒙娜丽莎的画作，它可能有不同于人类的见解。

3. 更长的上下文，GPT-4 能够处理超过 25,000 个单词的文本，允许使用长格式内容创建、扩展对话以及文档搜索和分析等用例。

4. 高级的推理能力，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：

第三题：不限时间

1. 以第二题作为基础，加入地球公转逻辑。

2. 支持用户点击国家板块，当用户点击国家板块时，地球转动到中心位置，放大该国家板块面积，同时标记出该国家省、市、区、城镇、村落信息。

3. 当用户点击地球以外的区域时，根据当前时间，地球需要回到该时间节点应该自转和公转的位置上。

4. 最后以全场到场的人员扫码进行体验投票，其中性能更好，体验更好，视觉更佳的作品获胜。

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调侃道。随后三人，彼此相视，哈哈大笑起来。