一、什么是 AIGC

AIGC 即 AI Generated Content，是指利用人工智能技術(shù)來(lái)生成內(nèi)容，它被認(rèn)為是繼 PGC、UGC 之后的新型內(nèi)容創(chuàng)作方式。近兩年 AIGC 發(fā)展速度驚人，迭代速度更是呈現(xiàn)指數(shù)級(jí)爆發(fā)。

從 AI 模型功能上區(qū)分，目前 AIGC 可分為文字、圖片、音樂(lè)和視頻的生成。

1.1 文字

(資料圖片僅供參考)

文字模型現(xiàn)象級(jí)應(yīng)用當(dāng)屬 OpenAI 的 ChatGPT。聊天、創(chuàng)作故事、寫(xiě)代碼、寫(xiě)詩(shī)、翻譯等等，你能想象到的與文字相關(guān)的內(nèi)容它都能做。

案例1: 與 ChatGPT 聊天。

案例2: 使用 ChatGPT 寫(xiě)代碼，提高開(kāi)發(fā)效率。

1.2 圖片

AI 生成圖片是 AIGC 領(lǐng)域發(fā)展最快的賽道。

2022 年初，Disco Diffusion 橫空出世引發(fā)了第一波 AIGC 爆點(diǎn)，但是畫(huà)面不夠清晰，作圖速度慢。同年 7月份 Midjourney 開(kāi)放公測(cè)，使用 Discord 端作畫(huà)，1 分鐘之內(nèi)可以同時(shí)出 4 張圖。8 月份，Stable Diffusion 正式發(fā)布，作圖速度縮短至 10 秒之內(nèi)。

如今 AI 作圖領(lǐng)域呈現(xiàn) Midjourney + Stable Diffusion的雙巨頭局勢(shì)。以下各類(lèi) AI 繪畫(huà)工具繪畫(huà)示例：

MidJourney，注重細(xì)節(jié)的構(gòu)建和表達(dá)；

Stable-Diffusion，畫(huà)風(fēng)更偏寫(xiě)實(shí)；

Disco Diffusion，筆觸明顯，適合油畫(huà)風(fēng)格；

1.3 音樂(lè) + 視頻

AI 生成音樂(lè) + 視頻是一個(gè)發(fā)展相對(duì)較慢的賽道，至今還沒(méi)有現(xiàn)象級(jí)應(yīng)用，市場(chǎng)上存在的產(chǎn)品均不太成熟。

AI 生成音樂(lè)的產(chǎn)品有 Riffusion，用戶(hù)輸入一段文字，模型根據(jù)內(nèi)容輸出一段音樂(lè)。

AI 生成視頻的產(chǎn)品有 QuickVid，用戶(hù)輸入一段文字描述，模型會(huì)生成一段流暢的視頻，還可以選擇視頻的風(fēng)格和背景音樂(lè)等。

二、AI +前端

由于 ChatGPT 的火爆出圈使得 LLM(Large Language Model, 大型語(yǔ)言模型)也被廣泛熟知。雖然利用 LLM 輔助編碼還處于非常早期階段，但基于此模型的工具 Copilot X、Cursor、ChatGPT 等還是極大地震撼到了開(kāi)發(fā)者。

AI 讓程序員失業(yè)的論調(diào)也甚囂塵上。

作為一名前端工程師，我們也不能再安于現(xiàn)狀了。

如何利用好 AI 的能力去提升前端團(tuán)隊(duì)的研發(fā)效率？

2.1 前端提效現(xiàn)狀

要想利用好 AI 的能力提升前端團(tuán)隊(duì)的研發(fā)效率，我們先想一下，當(dāng)前研發(fā)提效的方式都有什么？

絕大部分前端團(tuán)隊(duì)都在不遺余力地去封裝自己的工具庫(kù)、UI 組件庫(kù)、腳手架、構(gòu)建工具、應(yīng)用開(kāi)發(fā)框架、低代碼搭建平臺(tái)等。

同工種提效的天花板清晰可見(jiàn)，很容易就會(huì)到達(dá)瓶頸。要想更進(jìn)一步，必須要跳出自己所處角色的視角，橫向?qū)で笊舷掠伍g的打通，共同提效。

以前端為中心，與其他環(huán)節(jié)進(jìn)行打通的話(huà)，有如下幾種方式：

從上文我們了解了現(xiàn)階段已有的一些前端提效方式。

AI 如何給現(xiàn)有的提效工具賦能？

接下來(lái)我們一起探索如何在已有的低代碼平臺(tái)接入 AI 的能力讓其效率倍增。

2.2 AI 在低代碼平臺(tái)的應(yīng)用

大家可以帶著這三個(gè)疑問(wèn)閱讀下面的文章。

2.2.1 背景

低代碼平臺(tái)的底層邏輯有兩個(gè)，一是提升應(yīng)用的開(kāi)發(fā)效率，降低成本；二是促進(jìn)人人開(kāi)發(fā)，讓非開(kāi)發(fā)者也能快速搭建應(yīng)用。

但現(xiàn)有的低代碼平臺(tái)還是存在效率低的痛點(diǎn)：

如何解決現(xiàn)有低代碼平臺(tái)存在的應(yīng)用搭建和組件研發(fā)效率低的痛點(diǎn)？

解決思路：

目標(biāo)：將現(xiàn)有的低代碼平臺(tái)升級(jí)為“AI 驅(qū)動(dòng)應(yīng)用開(kāi)發(fā)平臺(tái)”，針對(duì)三類(lèi)不同的使用人群進(jìn)行賦能提效，實(shí)現(xiàn)平臺(tái)全局 AI 驅(qū)動(dòng)。

2.2.2 低代碼 + AI 方案調(diào)研

基于以上的背景，我們從 AI 輔助搭建、修改頁(yè)面、輔助開(kāi)發(fā)編程、輔助產(chǎn)品需求抽象等維度對(duì)市面上的 AI 低代碼平臺(tái)調(diào)研。

綜上，目前市面上的 AI 低代碼平臺(tái)大部分都是依賴(lài)于 OpenAI 團(tuán)隊(duì)的 ChatGPT 開(kāi)放接口，所以我們也選擇基于 ChatGPT 開(kāi)放接口升級(jí)現(xiàn)有的低代碼平臺(tái)。

2.2.3 實(shí)現(xiàn)效果演示

案例1:頁(yè)面生成 & 布局能力。需求：頁(yè)面分為三部分，頂部是標(biāo)題“合金彈頭首發(fā)”，中間是一張圖片，底部是一個(gè)按鈕，按鈕文案是云游跳轉(zhuǎn)。

案例2: 頁(yè)面修改能力。需求：刪除圖片，標(biāo)題的文案改為“今天首發(fā)”，按鈕的文案改為“立即試玩”，按鈕顏色改為“紅色”。

案例3: 產(chǎn)品需求抽象 & 輔助編程能力。

2.2.4 具體實(shí)現(xiàn)

上文講到我們要基于ChatGPT 的開(kāi)放接口將現(xiàn)有的低代碼平臺(tái)升級(jí)為 AI 驅(qū)動(dòng)應(yīng)用開(kāi)發(fā)平臺(tái)，即 AI 輔助搭建、修改頁(yè)面、輔助開(kāi)發(fā)編程、輔助產(chǎn)品需求抽象。

但由于篇幅有限，下文主要會(huì)介紹如何實(shí)現(xiàn)講出需求，AI 輔助快速搭建和修改頁(yè)面。

AI 輔助搭建和修改頁(yè)面簡(jiǎn)易流程圖如下：

用戶(hù)講出需求， ChatGPT 將自然語(yǔ)言描述的需求轉(zhuǎn)化為低代碼平臺(tái)的頁(yè)面 DSL，用戶(hù)可通過(guò)傳統(tǒng)的拖拉拽方式/AI 對(duì)話(huà)對(duì)頁(yè)面二次編輯。

那是如何通過(guò) "Prompt Engineering" 將聊天型 AIGC 轉(zhuǎn)換為低代碼平臺(tái)的生產(chǎn)力 ？

2.2.4.1 Prompt Engineering

ChatGPT 是一個(gè)通用型聊天機(jī)器，它可以回答任何問(wèn)題，但是它的回答并不總是符合我們的預(yù)期。因此，我們需要通過(guò) Prompt Engineering 來(lái)提示 AI 如何進(jìn)行輸出。

在 ChatGPT 中，提示是由一組聊天消息組成的，每個(gè)消息都是由一個(gè)特定角色說(shuō)的話(huà)，這些角色包括：

以下是用官方工具 Playground 提問(wèn)的一個(gè)示例。

2.2.4.2 為 ChatGPT 制定扮演角色

先從最基本的開(kāi)始，首先我們需要為 ChatGPT 制定扮演的角色。

# SYSTEM你是一個(gè)頁(yè)面 JSON 翻譯程序，你可以將人類(lèi)自然語(yǔ)言描述的指令翻譯成對(duì)應(yīng)的頁(yè)面 JSON# USER生成一個(gè)空頁(yè)面

這時(shí)，我們可以看到 ChatGPT 給出結(jié)果，但是存在一些問(wèn)題：

2.2.4.3 添加第一個(gè)限定條件

我們重新設(shè)計(jì) Prompt，添加第一個(gè)限定條件，讓其只輸出頁(yè)面 JSON。

# SYSTEM你是一個(gè)頁(yè)面 JSON 翻譯程序，你可以將人類(lèi)自然語(yǔ)言描述的指令翻譯成對(duì)應(yīng)的頁(yè)面 JSON1. 你只需要將頁(yè)面 JSON 直接輸出，而不需要對(duì)其進(jìn)行任何的解釋。# USER生成一個(gè)空頁(yè)面

這時(shí)，我們會(huì)發(fā)現(xiàn)，無(wú)論我們 Submit 多少次，ChatGPT 都會(huì)返回相同的結(jié)果，并且不再會(huì)有注解說(shuō)明。

但目前 ChatGPT 返回的頁(yè)面 JSON 是不能描述我們的低代碼頁(yè)面的，所以需要教會(huì)它我們業(yè)務(wù)的頁(yè)面 JSON 結(jié)構(gòu)。

2.2.4.4 教會(huì) ChatGPT 識(shí)別頁(yè)面 JSON

增加第二個(gè)限定條件，空頁(yè)面的 JSON 結(jié)構(gòu)。

# SYSTEM你是一個(gè)頁(yè)面 JSON 翻譯程序，你可以將人類(lèi)自然語(yǔ)言描述的指令翻譯成對(duì)應(yīng)的頁(yè)面 JSON1. 你只需要將頁(yè)面 JSON 直接輸出，而不需要對(duì)其進(jìn)行任何的解釋。2. 空頁(yè)面的 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生成一個(gè)空頁(yè)面

這時(shí) ChatGPT 已經(jīng)學(xué)會(huì)了生成一個(gè)空頁(yè)面的 JSON。

并且還能融會(huì)貫通，自己還偷偷學(xué)會(huì)了修改頁(yè)面的背景顏色和給頁(yè)面增加一個(gè)按鈕組件（雖然按鈕組件的 dsl 不一定正確）。

告訴 ChatGPT 更多描述頁(yè)面 JSON 結(jié)構(gòu)的信息。

要想 ChatGPT 生成完全可用的頁(yè)面 JSON，我們需要告訴 chatGPT 更多頁(yè)面 JSON 描述的信息。

案例：告訴 ChatGPT 頁(yè)面 JSON 的一些屬性描述和按鈕組件的基礎(chǔ)配置。

# SYSTEM你是一個(gè)頁(yè)面 JSON 翻譯程序，你可以將人類(lèi)自然語(yǔ)言描述的指令翻譯成對(duì)應(yīng)的頁(yè)面 JSON1. 你只需要將頁(yè)面 JSON 直接輸出，而不需要對(duì)其進(jìn)行任何的解釋。2. 空頁(yè)面的 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. 頁(yè)面 JSON 中的 id 為節(jié)點(diǎn)在當(dāng)前節(jié)點(diǎn)樹(shù)中的唯一標(biāo)識(shí)，type 為節(jié)點(diǎn)類(lèi)型，type 可以是 page 和 normal，page 代表頁(yè)面節(jié)點(diǎn)且只能作為根節(jié)點(diǎn)。normal 代表普通節(jié)點(diǎn)且該節(jié)點(diǎn)不能包含子節(jié)點(diǎn), 只能作為葉子節(jié)點(diǎn)。props 為節(jié)點(diǎn)屬性，在渲染時(shí)會(huì)被直接作為對(duì)應(yīng)組件的屬性使用，style 為節(jié)點(diǎn)樣式，在渲染時(shí)會(huì)轉(zhuǎn)換為 CSS 添加到組件上，name 為節(jié)點(diǎn)所對(duì)應(yīng)的組件名稱(chēng)。4. 按鈕組件的 name 為 @tencent/nutty-components/NuttyButton，props 有 text 和 jumpUrl。# USER生成一個(gè)空頁(yè)面，空頁(yè)面包含一個(gè)按鈕，按鈕的文案為去玩云游戲，跳轉(zhuǎn)鏈接是 https://www.baidu.com/。按鈕的寬為158px，高為 40px，背景顏色是 rgba(255, 255, 255, 0.12)，圓角是 8px。

現(xiàn)在 ChatGPT 已經(jīng)學(xué)會(huì)根據(jù)我們的描述生成一個(gè)包含按鈕的頁(yè)面 JSON 了，我們將頁(yè)面的 JSON 復(fù)制到低代碼平臺(tái)，完美復(fù)原。

如果想要 ChatGPT 能識(shí)別更多組件，我們只需要給 ChatGPT 喂更多描述組件的數(shù)據(jù)。tip: 將限定上下文翻譯為英文，ChatGPT 識(shí)別更精準(zhǔn)。

? 如何將 ChatGPT 集成到現(xiàn)有的低代碼平臺(tái)？

2.2.4.5 ChatGPT 集成到低代碼平臺(tái)

現(xiàn)有的低代碼平臺(tái) Rebone 架構(gòu)圖如下：

集成 ChatGPT 后的完整流程圖如下：

主要會(huì)涉及兩大模塊的變更：

新增基于 OpenAI SDK 封裝的 Node 服務(wù)。

Prompt 的生成器。因?yàn)楦黝?lèi)組件的描述數(shù)據(jù)都是存在文件中的，所以需要 Prompt 的生成器將文件加載為 system messages (系統(tǒng)上下文)。

翻譯器。將用戶(hù)的輸入和 system messages 轉(zhuǎn)化為 Prompt Messages，發(fā)送給 OpenAI，最后將頁(yè)面 DSL 返回。

低代碼平臺(tái)的編輯器適配。

接受用戶(hù)的自然語(yǔ)言需求的輸入，請(qǐng)求 ChatLowCode 服務(wù)，獲取頁(yè)面 DSL。

新舊頁(yè)面 DSL Diff，差異化更新編輯器畫(huà)布中的頁(yè)面。

總結(jié)

上面主要介紹了 AIGC 的概念以及 AI 在低代碼平臺(tái)應(yīng)用?？梢园l(fā)現(xiàn)，AI 技術(shù)在前端領(lǐng)域的應(yīng)用，不僅能夠幫助開(kāi)發(fā)者減少重復(fù)性工作，提升開(kāi)發(fā)效率，還提高了用戶(hù)的體驗(yàn)。

隨著 AI 技術(shù)的日益發(fā)展，可以預(yù)見(jiàn)未來(lái)絕大部分的編碼工作會(huì)被 AI 替代。當(dāng)大家技術(shù)水平旗鼓相當(dāng)時(shí)，更懂業(yè)務(wù)、更會(huì)利用 AI 的能力會(huì)成為我們的核心競(jìng)爭(zhēng)力。

文章來(lái)源：https://mp.weixin.qq.com/s?__biz=MzI2NDU4OTExOQ==&mid=2247638431&idx=1&sn=c97c0d04534a80f82b30eace512c87d6&chksm=eaa6c7cfddd14ed95c9138956a65c30050d8b3dc011d293a367f1486594f6082a5aedf2e426d&scene=178&cur_album_id=2881988036140695557#rd

關(guān)鍵詞：