前言

距离之前《一个程序员眼中的ChatGPT》发布已有一年之久，一年中我从阿里离职深度参与到 AI 创业中，在大模型应用领域里进行了广泛的研究和实践。尤其是近期在进行 GUI 生成和代码生成的工作，对于 AI 替代程序员进行 GUI 开发颇有感触。然而，前端和客户端大部分工作就是在构建 GUI，因此，当 AI 替代程序员进行软件服务生成的时候，最先受到影响的，一定是构建 GUI 的前端和客户端研发人员。下面，针对这个观点展开聊聊其中的利害，以及我对这个问题解法的一些思考。

少数台面上活着的“幸存者偏差”

观点：因为有很多 GUI 开发需求让 GUI 从业者缺乏危机感。

以我在行业内的观察，其实大部分从业者，尤其是前端和客户端从事 GUI 开发的从业者，并没有很强的危机感。大多数人盯着少数幸存者，以为“AI 替代”这件事离自己从事的 GUI 领域很远，连 SQL 语句都生成不准确，能奈我何？

事实上，大厂从 2022 年的裁员潮开始，受影响最大的就是前端和客户端，活下来的不说是行业翘楚，也个顶个属于“高性价比”（年轻、工资低、能干）潜力股。对于混迹在小厂、传统企业、创业公司的 GUI 开发从业者，本就因为工作多、时间紧、任务重而缺乏学习空间，又没有足够的信息获取渠道，觉得自己活的挺好，殊不知一场变革正在无声袭来。能够看到的活的不错的，都是幸存者偏差，因为还有 80% 活的不好的不被看到。

那为什么不是后端 Java 而是前端和客户端

观点：事实上后端比前端更难被 AI 替代。

说实话，起初我也认为后端容易被替代，因为之前模型的训练样本很差，JS的生成准确率很低，图中虚线是 Llama3 70B 的准确率。然而，Qwen2 在 JS 的代码生成准确率上大幅提升，这就是阿里积累的海量、高质量、结构化前端代码带来的价值吧。

此外，最近调研了国外很多类 Figma 设计工具，它们有一个共同点就是 AIGC 一句话生成 GUI，而且，大部分都拥有导出代码的功能。在这些功能的加持下，一个设计人员可以轻松生成各种 GUI 设计，只需要把控一下设计细节，就可以把 GUI 生成代码交付给后端。后端只需 ChatGPT 指导即可完成数据绑定，准备好接口就能部署上线了。

由于这里有后端的人工参与，因此，AIGC 的 GUI 代码即便有小瑕疵，也比让后端学习前端技术自己写页面容易太多。如此一来，前端或客户端的 GUI 开发就变的可有可无了，而后端仍然需要人工开发接口，因为，生成后端代码的准确率再高，也不能接受任何错误，比如计算价格 100 次，其中 99 次正确，1 次错误就是线上事故了。大部分产生业务价值的逻辑代码，在很长一段时间内还需要模型和提示此工程、Agent 技术的提升才具备高可用，这就是后端开发更晚被替代的一个原因。

GUI 的变革导致前端和客户端工作场景萎缩

观点：在之前的文章里提到过，ChatGPT 带来的最大变化，是软件从提供过程变成提供结果。这个变化对 GUI 的影响更加深刻，以至于传统的 GUI 无用武之地。

软件本质上是程序员开发出来，让用户驾驭信息的工具。因为驾驭信息的主体是人类，所以，长久以来 GUI 作为符合人体工程学的交互方式，被广泛应用。但是，随着 AI 的成熟，驾驭信息的主体，从人类变成了 LLM，GUI 反而成为阻碍 LLM 使用信息的障碍。

我在《智能UI和前端智能化》一书中提到过一个例子。当用户使用 Google 助手订餐厅的座位时，Google 助手会根据用户的语音指令进行分析，然后，根据用户的意图和要求开始订座。首先，Google 助手拨打餐厅电话，然后把用户的要求进行语音合成，再根据餐厅语音反馈，语音识别转换成文本，最终，根据文本内容确认订座结果。假设餐厅的座位和订座信息都数字化并提供接口，Google 助手只需要调用接口，就可以迅速、准确的完成订餐工作，省去那些为人类电话订餐设计的 UI 和步骤。

这个例子就像当初欧洲工业革命，蒸汽机进工厂初期时接入到工人操作的环节中，通过替代人输出功率来提升生产效率。随着时间推移，更多的工厂会围绕蒸汽机设计流水线，因为流水线上不是人在操作而是蒸汽机操作，操作主体的变化，势必会影响操作客体，使其向着更合理的方向变革，GUI 也是如此。

随着 GUI 里的“控件”变成 AI Agent 里的“工具”及其背后的接口，操作的主体从人类变成大语言模型、世界模型、决策模型等，操作对象从信息变成向量、张量、特征等，最终，人类只需要提取结果即可。

作为一个 GUI 从业者如何应对？

观点：应对的方法，要么聚焦内容/结果呈现的 GUI 上提升专业度，要么转型跨领域人才，做个 AI 应用开发工程师。

随着 AIGC 能力愈发强大，内容/结果成为软件的核心，怎么做好内容/结果的呈现将成为一个新问题。以往，内容的呈现主要由媒体播放器、排版引擎控制，用户和内容间只有控制指令的交互。由于 AIGC 的内容是模型生成的，且多模态大模型有强大的内容理解能力，内容将突破被动观看的限制，向着主动吸引用户交互发展。未来像《底特律变人》这种互动内容将越来越多，用户和内容的交互影响内容的 Gen 走向，从而使内容更具生命力和交互性。

畅想一下，用户戴着 VisionPro 用双手触摸内容，通过交互的方式探索和推动内容的延展、情节的铺陈，这里面 GUI 的内容和目的都会和模型能力深度耦合在一起，仅仅靠内容渲染和媒体控制等 GUI 工程知识是无法掌控的。因此，要么变成这些新场景下的 GUI 专家，找一个跨领域的 AI 应用开发工程师指导自己，要么成为 AI 应用开发工程师这样的跨领域人才。

和学习任一软件工程领域的新技术一样，想要成为跨领域的 AI 应用开发工程师，首先要进入 AI 技术领域进行摸索和实践。2019 年我和团队一起推出 GitHub - alibaba/pipcook: Machine learning platform for Web developers 的目的，就是想降低前端进入 AI 领域的门槛。有兴趣的同学可以私信我，我最近和雷姆商量打算重启这个项目来适应 LLM 的变化。

今天，不管是 llama.cpp、ollama、vllm 运行开源大模型，还是闭源大模型 API，都可以通过 JS/TS API 轻松调用模型的能力。

以 ollama 为例：

// 详见：https://www.ollama.com/blog/embedding-models
// Shell CLI 拉取模型
ollama pull mxbai-embed-large
// 通过 CURL 测试接口
curl http://localhost:11434/api/embeddings -d '{
  "model": "mxbai-embed-large",
  "prompt": "Llamas are members of the camelid family"
}'
// JS API 调用模型对文本进行 embedding 词嵌入模型编码
ollama.embeddings({
    model: 'mxbai-embed-large',
    prompt: 'Llamas are members of the camelid family',
})

流行的 Agent 开发框架 Langchain 也提供 JS/TS 的接口，可以方便的使用开源模型在本地测试 REPL、FunctionCall、RAG 等一系列 Agent 开发示例。

以 RAG 为例：

// 输入 PDF
import { PDFLoader } from "langchain/document_loaders/fs/pdf";
async function loadPdf(path: string) {
  const loader = new PDFLoader(path, {
    splitPages: false,
  });
  const docs = await loader.load();
  return docs
}
// 拆分内容
import { RecursiveCharacterTextSplitter } from "langchain/text_splitter";
async function spliter(docs: any) {
  const textSplitter = new RecursiveCharacterTextSplitter({
    chunkSize: 1000,
    chunkOverlap: 200,
  });

  const splitDocs = await textSplitter.splitDocuments(docs);
  return splitDocs
}
// 向量数据存储
import { MemoryVectorStore } from "langchain/vectorstores/memory";
import { VectorStore } from "@langchain/core/vectorstores";  

const vectorStore = await MemoryVectorStore.fromDocuments(
    docs,
    new OpenAIEmbeddings()
);
// Similarity Vector
async function findRag(vectorStore: VectorStore, q: string) {
  const chain = ConversationalRetrievalQAChain.fromLLM(
    new ChatOpenAI(),
    vectorStore.asRetriever(),
    { questionGeneratorTemplate: "只根据提供的内容进行回答，没有提供内容参考则返回空，用简体中文回答。" }
  );
  const res = await chain.call({ question: q, chat_history: "" });
  return res
}
const res = await findRag(vectorStore, "请问什么是Postgres数据库？")
// 回答
// 有加上Prompt: { text: 'Postgres数据库是一个开源的数据库管理系统，全名为PostgreSQL。它支持很多高级功能，如多版本控制、触发器、外键、完整的ACID事务等。Postgres以其扩展性和兼容性而闻名，能用处理各种规模和类型的数据，从小型应用到企业级应用。'}
// 沒加上Prompt: { text: '我不知道，请提供参考信息。' }

根据上面的示例，可以快速在 Javascript 下构建一个完整的 RAG 应用。为了方便后续学习，可以把 llm、agent、prompts 相关的资料都用 PDF 保存到某个目录，用上面的 RAG 应用程序给自己构建一个检索系统，方便日后学习 AI 应用开发的时候查询。

总结

我不知道有多少人看了《一个程序员眼中的C哈他GPT》后开始学习和实践，也不知道这篇文章后有多少前端和客户端从传统 GUI 领域开始升级自己，但我知道，尝试之后，你会惊叹于 AI 发展的迅速。

最近，我测试了 OpenAI 和本地 ollama 用 codestral 模型生成前端代码，要求模型用 Tailwind CSS 进行美化，然后，用 Tailwind CSS Playground 把代码渲染出来，身边的朋友感叹渲染出来的 GUI 比他们的设计师画出来的漂亮。

当然，想要成为跨领域的 AI 应用开发工程师，并非一蹴而就。需要在既有领域强化自己，也需要对新环境下 GUI 重新理解。最后，还要跨领域学习研究 AI 应用的相关知识，通过实践逐步将知识融合在一起，才能发挥跨领域知识的威力。后续，我会专门针对跨领域能力培养方面，发布一些自己的心得体会，尽请期待。