腾小云导读
跟着 AI 技能的日益开展，前端开发形式和提效东西也在不断地变化。作为一名前端工程师，怎么应对 AI 带来的挑战和机会？在这篇文章中，作者将介绍什么是 AIGC，并深入探讨 AI 在低代码渠道的运用。期望开发者经过本文对前端开发的提效和 AI 在低代码渠道的运用有更多的认识。
目录
1 什么是 AIGC
1.1 文字
2.2 图片
2.3 音乐+视频
2 AI +前端
2.1 前端提效现状
2.2 AI 在低代码渠道的运用
3 总结
01、什么是 AIGC
AIGC 即 AI Generated Content，是指利用人工智能技能来生成内容，它被认为是继 PGC、UGC 之后的新型内容创造方法。近两年 AIGC 开展速度惊人，迭代速度更是出现指数级迸发。
从 AI 模型功能上区分，现在 AIGC 可分为文字、图片、音乐和视频的生成。
1.1 文字
文字模型现象级运用当属 OpenAI 的 ChatGPT。谈天、创造故事、写代码、写诗、翻译等等，你能想象到的与文字相关的内容它都能做。
事例1: 与 ChatGPT 谈天。
事例2: 运用 ChatGPT 写代码，进步开发功率。
1.2 图片
AI 生成图片是 AIGC 范畴开展最快的赛道。
2022 年初，Disco Diffusion 横空出世引发了第一波 AIGC 爆点，可是画面不够明晰，作图速度慢。同年 7月份 Midjourney 敞开公测，运用 Discord 端作画，1 分钟之内能够同时出 4 张图。8 月份，Stable Diffusion 正式发布，作图速度缩短至 10 秒之内。
| AI绘画东西 | 绘画风格 | 发布时刻 | 渠道 | 成图时刻 |
|---|---|---|---|---|
| Disco Diffusion | 倾向油画 | 22年1月份 | Google Colab | 画面不够明晰，作图速度慢 |
| MidJourney | 注重细节的构建和表达 | 22年3月份 | Discord | 平均一分钟能同时出4张图 |
| Stable-Diffusion | 倾向写实 | 22年8月份 | Google Colab | 作图时刻10秒内 |
现在 AI 作图范畴出现Midjourney + Stable Diffusion的双巨子局势。以下各类 AI 绘画东西绘画示例：
MidJourney，注重细节的构建和表达；
Stable-Diffusion，画风更偏写实；
Disco Diffusion，笔触明显，适合油画风格；
1.3 音乐 + 视频
AI 生成音乐 + 视频是一个开展相对较慢的赛道，至今还没有现象级运用，市场上存在的产品均不太老练。
AI 生成音乐的产品有 Riffusion，用户输入一段文字，模型根据内容输出一段音乐。
AI 生成视频的产品有 QuickVid，用户输入一段文字描绘，模型会生成一段流畅的视频，还能够挑选视频的风格和布景音乐等。
02、AI +前端
由于 ChatGPT 的火爆出圈使得LLM(Large Language Model, 大型语言模型)也被广泛熟知。尽管利用 LLM 辅佐编码还处于非常早期阶段，但根据此模型的东西 Copilot X、Cursor、ChatGPT 等仍是极大地震慑到了开发者。
AI 让程序员失业的论调也甚嚣尘上。
作为一名前端工程师，咱们也不能再安于现状了。
怎么利用好 AI 的才能去提高前端团队的研制功率？
2.1 前端提效现状
要想利用好 AI 的才能提高前端团队的研制功率，咱们先想一下，当时研制提效的方法都有什么？
- 单点提效
绝大部分前端团队都在不遗余力地去封装自己的东西库、UI 组件库、脚手架、构建东西、运用开发框架、低代码建立渠道等。
- 链路提效。
同工种提效的天花板明晰可见，很简单就会抵达瓶颈。要想更进一步，必需求跳出自己所在人物的视角，横向寻求上下游间的打通，共同提效。
以前端为中心，与其他环节进行打通的话，有如下几种方法：
从上文咱们了解了现阶段已有的一些前端提效方法。
AI 怎么给现有的提效东西赋能？
接下来咱们一同探究怎么在已有的低代码渠道接入 AI 的才能让其功率倍增。
2.2 AI 在低代码渠道的运用
咱们能够带着这三个疑问阅览下面的文章。
| 怎么处理现有低代码渠道运用建立和组件研制功率低的痛点？ 怎么经过 “Prompt Engineering” 将谈天型 AIGC 转换为低代码渠道的生产力？ 怎么将 ChatGPT 集成到现有的低代码渠道？ |
|---|
2.2.1 布景
低代码渠道的底层逻辑有两个，一是提高运用的开发功率，降低成本；二是促进人人开发，让非开发者也能快速建立运用。
但现有的低代码渠道仍是存在功率低的痛点：
| 运用建立功率低。非开发者在建立运用前需求了解低代码渠道的运用和各类组件的装备项。 组件研制功率低。新的组件研制流程仍是传统的产品出需求文档，开发出详细规划、编码完成。 |
|---|
怎么处理现有低代码渠道存在的运用建立和组件研制功率低的痛点？
处理思路：
| 针对运用建立功率低的痛点：让非开发者不需了解低代码渠道的运用和组件的装备等，讲出需求，AI 辅佐快速建立运用。 针对组件研制功率低的痛点：AI 辅佐需求文档到完成编码整个阶段的提效。 |
|---|
方针： 将现有的低代码渠道升级为 “AI 驱动运用开发渠道” ，针对三类不同的运用人群进行赋能提效，完成渠道全局 AI 驱动。
| 面向产品经理的需求抽象：帮忙产品将描绘性的需求文档，转换成标准数据结构。 面向开发者的辅佐编码：作为程序员的开发助手，完成确认性功能函数编程。 面向非开发者的运用建立辅佐：讲出需求，快速建立运用。 |
|---|
2.2.2 低代码 + AI 计划调研
根据以上的布景，咱们从AI 辅佐建立、修正页面、辅佐开发编程、辅佐产品需求抽象等维度对市面上的 AI 低代码渠道调研。
综上，现在市面上的 AI 低代码渠道大部分都是依赖于OpenAI 团队的 ChatGPT 敞开接口，所以咱们也挑选根据 ChatGPT 敞开接口升级现有的低代码渠道。
2.2.3 完成作用演示
事例1: 页面生成 & 布局才能。需求：页面分为三部分，顶部是标题“合金弹头首发”，中间是一张图片，底部是一个按钮，按钮案牍是云游跳转。
视频可移步至腾讯云开发者大众号中查看
事例2:页面修正才能。需求：删去图片，标题的案牍改为“今天首发”，按钮的案牍改为“当即试玩”，按钮色彩改为“红色”。
视频可移步至腾讯云开发者大众号中查看
事例3:产品需求抽象 & 辅佐编程才能。
2.2.4 详细完成
上文讲到咱们要根据 ChatGPT 的敞开接口将现有的低代码渠道升级为AI 驱动运用开发渠道，即 AI 辅佐建立、修正页面、辅佐开发编程、辅佐产品需求抽象。
但由于篇幅有限，下文首要会介绍怎么完成讲出需求，AI 辅佐快速建立和修正页面。
AI 辅佐建立和修正页面简易流程图如下：
用户讲出需求， ChatGPT 将自然语言描绘的需求转化为低代码渠道的页面 DSL，用户可经过传统的拖拉拽方法/AI 对话对页面二次修改。
那是怎么经过 “Prompt Engineering” 将谈天型 AIGC 转换为低代码渠道的生产力 ？
2.2.4.1 Prompt Engineering
ChatGPT 是一个通用型谈天机器，它能够答复任何问题，可是它的答复并不总是契合咱们的预期。因而，咱们需求经过 Prompt Engineering 来提示 AI 怎么进行输出。
在 ChatGPT 中，提示是由一组谈天消息组成的，每个消息都是由一个特定人物说的话，这些人物包括：
| user：用户人物，即咱们自己。 assistant：助手人物，即 ChatGPT。 system: 体系人物，即 ChatGPT 的上下文，在这儿咱们能够描绘它在当时会话中扮演的人物，并能够经过逻辑规则限制它的输出。 |
|---|
以下是用官方东西 Playground 提问的一个示例。
2.2.4.2 为 ChatGPT 拟定扮演人物
先从最基本的开端，首要咱们需求为 ChatGPT 拟定扮演的人物。
# SYSTEM
你是一个页面 JSON 翻译程序，你能够将人类自然语言描绘的指令翻译成对应的页面 JSON
# USER生成一个空页面
这时，咱们能够看到 ChatGPT 给出成果，可是存在一些问题：
| 答复中有多余的介绍性语句。原因是咱们没有对 ChatGPT 的输出进行限制。 每一次 Submit 都会回来不同的成果。原因是 ChatGPT 的 Temperature 参数默认是 0.7，Temperature 的数值越大 ChatGPT 的答复愈加富有创造性。反之在页面 JSON 翻译器这个场景里，咱们期望它具有稳定的输出，因而咱们需求将其设置为 0。 |
|---|
2.2.4.3 添加第一个限制条件
咱们重新规划 Prompt，添加第一个限制条件，让其只输出页面 JSON。
# SYSTEM
你是一个页面 JSON 翻译程序，你能够将人类自然语言描绘的指令翻译成对应的页面 JSON
1. 你只需求将页面 JSON 直接输出，而不需求对其进行任何的解说。
# USER生成一个空页面
这时，咱们会发现，无论咱们 Submit 多少次，ChatGPT 都会回来相同的成果，而且不再会有注解说明。
但现在 ChatGPT 回来的页面 JSON 是不能描绘咱们的低代码页面的，所以需求教会它咱们事务的页面 JSON 结构。
2.2.4.4 教会 ChatGPT 辨认页面 JSON
增加第二个限制条件，空页面的 JSON 结构。
# SYSTEM
你是一个页面 JSON 翻译程序，你能够将人类自然语言描绘的指令翻译成对应的页面 JSON
1. 你只需求将页面 JSON 直接输出，而不需求对其进行任何的解说。
2. 空页面的 JSON 为 {"id":1,"children":[{"id":"Page1","type":"page","name":"@tencent/nutty-components/NuttyPage","props":{},"style":{"width":"375px","height":"600px","backgroundColor":"#fff"},"actions":{},"children":[],"editor":{}}],"name":"My Project”}
# USER生成一个空页面
这时 ChatGPT 现已学会了生成一个空页面的 JSON。
而且还能融会贯通，自己还悄悄学会了修正页面的布景色彩和给页面增加一个按钮组件（尽管按钮组件的 dsl 不一定正确）。
告知 ChatGPT 更多描绘页面 JSON 结构的信息。
要想 ChatGPT 生成彻底可用的页面 JSON，咱们需求告知 chatGPT 更多页面 JSON 描绘的信息。
事例：告知 ChatGPT 页面 JSON 的一些特点描绘和按钮组件的根底装备。
# SYSTEM
你是一个页面 JSON 翻译程序，你能够将人类自然语言描绘的指令翻译成对应的页面 JSON
1. 你只需求将页面 JSON 直接输出，而不需求对其进行任何的解说。
2. 空页面的 JSON 为 {"id":1,"children":[{"id":"Page1","type":"page","name":"@tencent/nutty-components/NuttyPage","props":{},"style":{"width":"375px","height":"600px","backgroundColor":"#fff"},"actions":{},"children":[],"editor":{}}],"name":"My Project”}。
3. 页面 JSON 中的 id 为节点在当时节点树中的唯一标识，type 为节点类型，type 能够是 page 和 normal，page 代表页面节点且只能作为根节点。normal 代表一般节点且该节点不能包括子节点, 只能作为叶子节点。props 为节点特点，在烘托时会被直接作为对应组件的特点运用，style 为节点样式，在烘托时会转换为 CSS 添加到组件上，name 为节点所对应的组件名称。
4. 按钮组件的 name 为 @tencent/nutty-components/NuttyButton，props 有 text 和 jumpUrl。
# USER
生成一个空页面，空页面包括一个按钮，按钮的案牍为去玩云游戏，跳转链接是 https://www.baidu.com/。按钮的宽为158px，高为 40px，布景色彩是 rgba(255, 255, 255, 0.12)，圆角是 8px。
现在 ChatGPT 现已学会根据咱们的描绘生成一个包括按钮的页面 JSON 了，咱们将页面的 JSON 复制到低代码渠道，完美复原。
如果想要 ChatGPT 能辨认更多组件，咱们只需求给 ChatGPT 喂更多描绘组件的数据。tip: 将限制上下文翻译为英文，ChatGPT 辨认更精准。
️ 怎么将 ChatGPT 集成到现有的低代码渠道？
2.2.4.5 ChatGPT 集成到低代码渠道
现有的低代码渠道 Rebone 架构图如下：
集成 ChatGPT 后的完好流程图如下：
首要会涉及两大模块的改变：
新增根据 OpenAI SDK 封装的 Node 服务。
Prompt 的生成器。由于各类组件的描绘数据都是存在文件中的，所以需求 Prompt 的生成器将文件加载为 system messages (体系上下文)。
翻译器。将用户的输入和 system messages 转化为 Prompt Messages，发送给 OpenAI，最终将页面 DSL 回来。
低代码渠道的修改器适配。
承受用户的自然语言需求的输入，恳求 ChatLowCode 服务，获取页面 DSL。
新旧页面 DSL Diff，差异化更新修改器画布中的页面。
03、总结
上面首要介绍了AIGC 的概念以及AI 在低代码渠道运用。能够发现，AI 技能在前端范畴的运用，不只能够协助开发者削减重复性工作，提高开发功率，还进步了用户的体验。
跟着 AI 技能的日益开展，能够预见未来绝大部分的编码工作会被 AI 替代。当咱们技能水平势均力敌时，更懂事务、更会利用 AI 的才能会成为咱们的中心竞争力。
本篇文章的共享到这儿就完毕了，如果喜欢的话不妨点个赞吧。
参考文献：
用 ChatGPT 开发一个能听懂人话的命令行东西。
预测2024年之后的前端开发形式。
ChatGPT+低代码：5秒完成 AI 自动建模与图形化编程。
奥哲徐平俊：低代码+AI，迈向企业数智年代。
生成式 AI 推翻前端，你该何去何从？
聊聊中后台产研一体化：引子。
手把手教你用 AIGC 赋能 Web3 项目。
来自腾讯中心规划团队的共享：运用 AIGC 人工智能生产内容。
-End-
原创造者｜yerui
技能责编｜腾讯 MoonWebTeam
各位开发者还有其他运用低代码开发的经历吗？欢迎在腾讯云开发者大众号谈论区讨论。咱们将选取1则最有意义的共享，送出腾讯云开发者-手腕垫1个（见下图）。6月19日中午12点开奖。
