前端 AI 开发：你需要先知道这些

我们对AI的直观感受可能源于 chatGPT 的出现，不过 chatGPT 本身其实只属于AI领域的一个分支——自然语言处理（NLP），所以我们会称它为大语言模型。

AI的载体是模型，而不同的模型可以完成不同类别的任务，比如常见的类型有：

自然语言处理：文本分类、命名实体识别、问答、语言建模、摘要、翻译、多项选择和文本生成。
计算机视觉：图像分类、目标检测和分割。
音频：自动语音识别和音频分类。
多模态：零样本图像分类。

早在ChatGPT出现之前，阿里就出品一款自动UI设计稿转码产品（imgcook），其背后应该利用了计算机视觉模型，进行图像识别、转换和出码，对于前端而言，计算机视觉模型是值得关注和探索的。

前端如何应用 AI

方向1：通过现有大语言模型的API接口，以构建提示词，创意引导和对话的形式，让AI给你产出代码，然后你通过胶水代码糅合过程。

方向2：利用计算机视觉模型，对图像进行检测和识别，基于识别结果信息，动态编排前端组件，形成页面。

方向3：综合利用各种类型的模型，实现贯穿前端开发全流程。

比如：先根据简单需求，让GPT撰写详细的产品策略，再基于策略提示词让Stable Diffusion生成对应的设计图，再基于设计图让视觉AI模型进行图像检测识别，返回位置和布局信息，前端在通过胶水代码编排组件，形成页面，再利用代码生成模型自动完成前端框架的代码数据绑定，最终再由视觉模型推理，识别页面中的不同组件类型，进行对应事件的绑定，甚至还可以进一步利用模型，完成代码和页面风格的评估。

前端可以利用的 AI 库

LangChain.js，大语言模型 API 调用框架，支持RAG 和 Agent技术，整合了市面上主流大模型的调用。
TensorFlow.js，构建、加载、训练和运行机器学习模型的框架，更通用，有很多预训练模型可以调用。
Transformers.js，加载和运行预训练模型的框架，更轻量，侧重于自然语言处理任务，可调用很多预训练模型。
Brain.js，构建、训练和运行模型，专为JS运行时而设计。

前端应用 AI 的局限

受限于JS运行时，JS的执行效率较低，虽然WebAssembly调用可以提高运算速度，但是单靠充分调用CPU，跑AI模型还是会存在算力瓶颈，尽管TensorFlow.js可以在后端调用GPU，开启并行运算，但是与能直接和操作系统和硬件交互的python相比，还是会差很多，后者的机器学习生态和工具要比前者好太多，Python版本的TensorFlow 更是经过深度优化，包括底层算法、内存管理和并行计算，所以，实际的AI深度应用，通常还是基于Python。

不过，前端开发者利用 WebAssembly + 配合 TensorFlow.js 的GPU调用，理论上还是可行的，在应用层面有待实践。