一、什么是 AIGC

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

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

1.1 文字

(資料圖片僅供參考)

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

案例1: 與 ChatGPT 聊天。

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

1.2 圖片

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

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

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

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

Stable-Diffusion，畫風(fēng)更偏寫實；

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

1.3 音樂 + 視頻

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

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

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

二、AI +前端

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

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

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

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

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

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

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

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

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

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

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

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

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

大家可以帶著這三個疑問閱讀下面的文章。

2.2.1 背景

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

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

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

解決思路：

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

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

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

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

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

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

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

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

2.2.4 具體實現(xiàn)

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

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

AI 輔助搭建和修改頁面簡易流程圖如下：

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

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

2.2.4.1 Prompt Engineering

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

在 ChatGPT 中，提示是由一組聊天消息組成的，每個消息都是由一個特定角色說的話，這些角色包括：

以下是用官方工具 Playground 提問的一個示例。

2.2.4.2 為 ChatGPT 制定扮演角色

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

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

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

2.2.4.3 添加第一個限定條件

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

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

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

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

2.2.4.4 教會 ChatGPT 識別頁面 JSON

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

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

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

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

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

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

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

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

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

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

2.2.4.5 ChatGPT 集成到低代碼平臺

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

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

主要會涉及兩大模塊的變更：

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

Prompt 的生成器。因為各類組件的描述數(shù)據(jù)都是存在文件中的，所以需要 Prompt 的生成器將文件加載為 system messages (系統(tǒng)上下文)。

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

低代碼平臺的編輯器適配。

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

新舊頁面 DSL Diff，差異化更新編輯器畫布中的頁面。

總結(jié)

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

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

文章來源：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)鍵詞：