低代碼與大語言模型的探索實踐
前言
ChatGPT，作為一個先進的自然語言處理工具，可以理解和生成人類語言，提供智能編程建議，自動化代碼生成，以及提供交互式編程教學。這些功能為開發者提供了前所未有的便利，大大減少了編程的時間和復雜性。
低代碼平臺則允許用戶通過圖形界面來構建應用，減少了對專業編程知識的依賴，在特定業務場景下能夠提升開發效率。用戶可以通過拖放組件和模型驅動的邏輯來快速地創建應用程序，而無需編寫大量代碼。
如果可以把 ChatGPT 和低代碼平臺結合起來使用，那么用戶就可以通過對話來快速地創建應用程序，從而簡化了搭建應用程序的過程，并且提升了用戶體驗。
可行性
低代碼平臺通常使用 JSON 格式的 DSL（領域特定語言 domain-specific language 指的是專注于某個應用程序領域的計算機語言） 來描述一個頁面。用戶拖拽組件、編輯頁面，實際上是在和頁面的 JSON 在進行交互。低代碼平臺通過渲染引擎把 JSON 數據渲染成為頁面，至于頁面要渲染成為 Vue、React 或者是純粹的 HTML 頁面，就得看各個低代碼平臺自己的實現了。一個應用程序一般會包含多個頁面，然后通過路由來決定各個頁面的跳轉邏輯。
因此，我們可以向 ChatGPT 提出生成頁面的需求，ChatGPT 再根據我們提供的 prompt 來生成一份符合低代碼平臺數據格式的 JSON。理論上，這是可行的，現在來看一下怎么實現這個功能。
使用 ChatGPT 進行頁面生成
首先，我們需要注冊一個 openai 或者 azure 賬號，在上面開通 api 服務（如何申請賬號請自行搜索，網上有很多教程）。然后就可以使用這個 api 來和 ChatGPT 進行交互了。
另外，我們還需要一個低代碼平臺，因為生成的 JSON 需要一個低代碼平臺來驗證生成 JSON 是否真實可用。剛好前幾年我寫了一個低代碼平臺教學項目[8]，現在剛好可以用上。
低代碼平臺組件 DSL
首先，我們要知道每一個組件的 DSL 描述，下面的代碼是一個文本組件的 DSL 描述：
{
"animations": [], // 動畫屬性
"events": {}, // 事件
"groupStyle": {}, // 組合組件樣式
"isLock": false, // 是否鎖定
"collapseName": "style",
"linkage": { // 聯動組件
"duration": 0,
"data": [
{
"id": "",
"label": "",
"event": "",
"style": [
{
"key": "",
"value": ""
}
]
}
]
},
"component": "VText", // 組件類型
"label": "文字", // 組件名稱
"propValue": "雙擊編輯文字", // 組件值
"icon": "wenben", // 組件圖標
"request": { // 組件 API 請求
"method": "GET",
"data": [],
"url": "",
"series": false,
"time": 1000,
"paramType": "",
"requestCount": 0
},
"style": { // 組件樣式
"rotate": 0,
"opacity": 1,
"width": 200,
"height": 28,
"fontSize": "",
"fontWeight": 400,
"lineHeight": "",
"letterSpacing": 0,
"textAlign": "",
"color": "",
"top": 157,
"left": 272
},
"id": "07l4byRWvsphAPo2uatxy" // 組件唯一 id
}每一個組件就是一個 JSON 數據，那么整個頁面就是一個 JSON 數組，里面包含了多個組件：
// 頁面 JSON
[
{ ... }, // 組件1
{ ... }, // 組件2
{ ... }, // 組件3
]prompt 編寫
要讓 ChatGPT 來生成頁面，那么我們要讓 ChatGPT 知道頁面、組件的數據結構，并且要給它提供示例。然后再向它提出頁面生成的需求，從而為我們生成符合要求的頁面。這個 prompt 的格式如下：
我有一個低代碼平臺項目，它可以根據符合規范的 JSON 數據生成頁面，這個 JSON 數據是一個數組，里面的每一項都是一個 JSON 對象，每個 JSON 對象都對應著一個組件。
下面用 ### 包括起來的代碼就是所有的組件列表。
###
---所有組件的 JSON 數據結構---
###
如果一個頁面包含了一個文本和按鈕組件，那么這個頁面的 JSON 代碼如下：
###
---示例頁面 JSON 數據結構---
###
你作為一個技術專家，現在需要按照上面的規則來為我生成頁面，并且生成的頁面中每一個組件的屬性都不能忽略，也不需要解釋，只需要返回 JSON 數據即可。要注意的是，有些數值的單位是沒有 px 的。
現在我需要生成一個海報頁面，主要用于宣傳編程有什么用。由于篇幅有限，上面只展示了這個 prompt 的大綱，JSON 數據都省略了。完整的 prompt 請在 lowcode-llm-demo[9] 上查看。
prompt 準備好了，現在我們需要調用 ChatGPT 的 api 來生成頁面，示例代碼如下：
import { AzureChatOpenAI } from '@langchain/azure-openai'
import 'dotenv/config'
import { readFileSync } from 'fs'
import { resolve, dirname } from 'path'
import { fileURLToPath } from 'url'
const model = new AzureChatOpenAI({
modelName: process.env.AZURE_OPENAI_API_MODEL_NAME,
azureOpenAIEndpoint: process.env.AZURE_OPENAI_API_ENDPOINT,
azureOpenAIApiKey: process.env.AZURE_OPENAI_API_KEY,
azureOpenAIEmbeddingsApiDeploymentName: process.env.AZURE_OPENAI_API_EMBEDDING_DEPLOYMENT_NAME,
azureOpenAIApiVersion: process.env.AZURE_OPENAI_API_VERSION,
})
const dirName = dirname(fileURLToPath(import.meta.url))
const prompt = readFileSync(resolve(dirName, '../prompts/prompt-compress.md'), 'utf-8')
const response = await model.invoke(prompt)
console.log(JSON.stringify(response)) // 返回 ChatGPT 的結果上面的代碼執行后就能得到 ChatGPT 返回來的頁面 JSON 數據。不過這個數據不能直接使用，還需要額外寫點代碼處理一下才能使用。下面的代碼就是處理后的頁面 JSON 數據結構：
[
{
"animations": [],
"events": {},
"groupStyle": {},
"isLock": false,
"collapseName": "style",
"linkage": {
"duration": 0,
"data": [
{
"id": "",
"label": "",
"event": "",
"style": [
{
"key": "",
"value": ""
}
]
}
]
},
"component": "Picture",
"label": "背景圖片",
"propValue": {
"url": "img/programming_poster_bg.jpg" // 替換為自己的圖片
},
"style": {
"rotate": 0,
"opacity": 1,
"width": 500,
"height": 700,
"top": 0,
"left": 0,
"position": "absolute",
"zIndex": 0
},
"id": "backgroundImage"
},
{
"animations": [],
"events": {},
"groupStyle": {},
"isLock": false,
"collapseName": "style",
"linkage": {
"duration": 0,
"data": [
{
"id": "",
"label": "",
"event": "",
"style": [
{
"key": "",
"value": ""
}
]
}
]
},
"component": "VText",
"label": "標題文字",
"propValue": "編程改變世界",
"icon": "wenben",
"style": {
"rotate": 0,
"opacity": 1,
"width": 450,
"height": 100,
"fontSize": "32px",
"fontWeight": 700,
"textAlign": "center",
"color": "rgba(16, 15, 15, 1)",
"top": 50,
"left": 25,
"position": "absolute",
"zIndex": 10
},
"id": "titleText"
},
{
"animations": [],
"events": {},
"groupStyle": {},
"isLock": false,
"collapseName": "style",
"linkage": {
"duration": 0,
"data": [
{
"id": "",
"label": "",
"event": "",
"style": [
{
"key": "",
"value": ""
}
]
}
]
},
"component": "VText",
"label": "描述文字",
"propValue": "通過編程，我們可以創建軟件來解決問題、分析數據，甚至改善人們的生活。",
"icon": "wenben",
"style": {
"rotate": 0,
"opacity": 1,
"width": 400,
"height": 200,
"fontSize": "18px",
"fontWeight": 400,
"lineHeight": "1.5",
"textAlign": "center",
"color": "rgba(33, 31, 31, 1)",
"top": 180,
"left": 50,
"position": "absolute",
"zIndex": 10
},
"id": "descriptionText"
},
{
"animations": [],
"events": {},
"groupStyle": {},
"isLock": false,
"collapseName": "style",
"linkage": {
"duration": 0,
"data": [
{
"id": "",
"label": "",
"event": "",
"style": [
{
"key": "",
"value": ""
}
]
}
]
},
"component": "VButton",
"label": "行動按鈕",
"propValue": "開始學習編程",
"icon": "button",
"style": {
"rotate": 0,
"opacity": 1,
"width": 200,
"height": 50,
"borderRadius": "25px",
"fontSize": "20px",
"fontWeight": 500,
"textAlign": "center",
"color": "#FFF",
"backgroundColor": "#f44336",
"top": 420,
"left": 150,
"position": "absolute",
"zIndex": 10
},
"id": "actionButton"
}
]將 JSON 導入到低代碼平臺[10]后，生成的頁面如下所示：
可以看到 ChatGPT 輸出了一個半成品頁面，背景圖片的地址需要我們手動修改。ChatGPT 每次輸出的頁面都是隨機的，下面是生成的另外一個頁面。
節省成本
ChatGPT 很好用，但是有一個缺點，太貴了。所以我們需要想一些辦法來降低成本，下面是幾個比較可行的辦法：
1.精簡 prompt2.微調（Fine-tuning）3.使用模板、分類標簽
精簡 prompt
ChatGPT 的 api 是通過 token 來收費的，所以最簡單直接的方法就是優化 prompt。下面是一個未優化的 prompt 示例：
我需要一個用戶管理系統的頁面。在頁面頂部，我需要一個添加用戶的按鈕。下面是一個表格，列出了所有用戶的姓名、郵箱和注冊日期。點擊任何一個用戶，將會打開一個包含完整用戶信息的新頁面，其中包含姓名、郵箱、注冊日期、最后登錄時間和用戶角色。還需要有一個搜索欄，可以通過姓名或郵箱搜索用戶。請基于這些要求為我的低代碼平臺生成代碼。
現在將這個 prompt 優化一下：
生成頁面：用戶管理 組件：添加按鈕，用戶表格（姓名，郵箱，注冊日期），用戶詳情（姓名，郵箱，注冊日期，最后登錄，角色），搜索欄（姓名，郵箱）
在這個例子中，我們簡化了描述頁面的需求，從而減少了 token 的數量。
微調（Fine-tuning）
在文章的開頭，我展示了一個生成頁面的 prompt 示例，并且可以看到這個 prompt 消耗的 token 數量非常大，因為它需要告訴 ChatGPT 每個組件的 JSON 數據結構是什么，以及一個完整的示例頁面 JSON 數據結構是什么樣的，這些示例都需要消耗大量的 token。
為了精簡 prompt，同時又能達到未精簡前的效果，這可以使用微調來實現。
微調是一種機器學習技術，它可以讓你自定義機器學習模型以適應特定的任務或數據集。通過微調，您可以在一個預訓練的模型（如ChatGPT）的基礎上進一步訓練它，使其更好地理解和執行特定的任務。這樣，您可以創建一個專門為您的低代碼平臺生成頁面的模型。
我們可以給 ChatGPT 提供大量的數據集進行微調訓練，比如大量的低代碼頁面示例。這樣你再讓它生成一個“用于宣傳編程的海報頁面”，就不需要提供每個組件的數據結構了，因為這些數據 ChatGPT 已經通過微調學會了。
現在來看一下用于微調訓練的數據集是什么樣的：
{"prompt": "<prompt text>", "completion": "<ideal generated text>"}
{"prompt": "<prompt text>", "completion": "<ideal generated text>"}
{"prompt": "<prompt text>", "completion": "<ideal generated text>"}上面是數據集的格式，現在我要提供大量的低代碼平臺數據集：
{"prompt":"生成一個帶有矩形組件的頁面","completion": "[{\"animations\":[],\"events\":{},\"groupStyle\":{},\"isLock\":false,\"collapseName\":\"style\",\"linkage\":{\"duration\":0,\"data\":[{\"id\":\"\",\"label\":\"\",\"event\":\"\",\"style\":[{\"key\":\"\",\"value\":\"\"}]}]},\"component\":\"RectShape\",\"label\":\"矩形\",\"propValue\":\"矩形\",\"icon\":\"juxing\",\"style\":{\"rotate\":0,\"opacity\":1,\"width\":200,\"height\":200,\"fontSize\":\"\",\"fontWeight\":400,\"lineHeight\":\"\",\"letterSpacing\":0,\"textAlign\":\"center\",\"color\":\"\",\"borderColor\":\"#000\",\"borderWidth\":1,\"backgroundColor\":\"\",\"borderStyle\":\"solid\",\"borderRadius\":\"\",\"verticalAlign\":\"middle\",\"top\":143,\"left\":379},\"id\":\"j3i41NnZw8Zcxu3BfbXwv\"}]"}
{"prompt":"生成一個帶有文本組件的頁面","completion": "[{\"animations\":[],\"events\":{},\"groupStyle\":{},\"isLock\":false,\"collapseName\":\"style\",\"linkage\":{\"duration\":0,\"data\":[{\"id\":\"\",\"label\":\"\",\"event\":\"\",\"style\":[{\"key\":\"\",\"value\":\"\"}]}]},\"component\":\"VText\",\"label\":\"文字\",\"propValue\":\"雙擊編輯文字\",\"icon\":\"wenben\",\"request\":{\"method\":\"GET\",\"data\":[],\"url\":\"\",\"series\":false,\"time\":1000,\"paramType\":\"\",\"requestCount\":0},\"style\":{\"rotate\":0,\"opacity\":1,\"width\":200,\"height\":28,\"fontSize\":\"\",\"fontWeight\":400,\"lineHeight\":\"\",\"letterSpacing\":0,\"textAlign\":\"\",\"color\":\"\",\"top\":145.3333282470703,\"left\":195},\"id\":\"WKqULBX4bKcmREgPJef3D\"}]"}
{"prompt":"生成一個帶有按鈕組件的頁面","completion": "[{\"animations\":[],\"events\":{},\"groupStyle\":{},\"isLock\":false,\"collapseName\":\"style\",\"linkage\":{\"duration\":0,\"data\":[{\"id\":\"\",\"label\":\"\",\"event\":\"\",\"style\":[{\"key\":\"\",\"value\":\"\"}]}]},\"component\":\"VButton\",\"label\":\"按鈕\",\"propValue\":\"按鈕\",\"icon\":\"button\",\"style\":{\"rotate\":0,\"opacity\":1,\"width\":100,\"height\":34,\"borderWidth\":1,\"borderColor\":\"\",\"borderRadius\":\"\",\"fontSize\":\"\",\"fontWeight\":400,\"lineHeight\":\"\",\"letterSpacing\":0,\"textAlign\":\"\",\"color\":\"\",\"backgroundColor\":\"\",\"top\":126.33332824707031,\"left\":224},\"id\":\"6wgvR1wyRyNqIl37qs1iS\"}]"}
...通過微調訓練后，ChatGPT 就變成了一個專門的低代碼模型，它會更好地理解低代碼的需求。后面我們再讓 ChatGPT 生成頁面就不需要大量的 prompt 了，可以直接讓它生成一個“用于宣傳編程的海報頁面”。記住，微調是一個需要精心設計和執行的過程，需要我們不停的校正，才能達到最好的效果。
使用模板、分類標簽
一個成功的低代碼平臺，一定會內置大量的模板，包括但不限于頁面模板、應用模板等等。其實在大多數時候，用戶提出生成頁面的需求時，我們可以提取關鍵詞，根據關鍵詞找到符合用戶需求的模板，再展示給用戶選擇。如果沒有找到符合要求的模板，才使用 ChatGPT 來生成頁面，這樣不僅能節省成本，還避免了 ChatGPT 隨機生成頁面并且有可能生成錯誤頁面的弊端。
現在我們來看看怎么做。首先，除了給模板命名，還需要給模板歸類，比如打上幾個類似于“醫療”、“后臺管理系統”之類的標簽。
當用戶提出一個”生成用于宣傳編程的頁面“需求時，我們可以使用自然語言處理（NLP）庫，如 natural 或者 compromise 進行關鍵詞提取，然后再通過 Elasticsearch 來進行搜索，最后把搜索到的模板返回給用戶。下面是代碼示例：
const { Client } = require('@elastic/elasticsearch');
const { NlpManager } = require('node-nlp');
// 初始化Elasticsearch客戶端
const client = new Client({ node: 'http://localhost:9200' });
// 初始化NLP管理器
const nlpManager = new NlpManager({ languages: ['en'], nlu: { useNoneFeature: false } });
// 假設我們有一些模板數據
const templates = [
{ name: 'Medical Service Promotion Page', tags: ['medical', 'promotion'] },
{ name: 'Programming Education Poster', tags: ['education', 'programming', 'poster'] },
{ name: 'Backend Management System Dashboard', tags: ['backend', 'management', 'system'] }
];
// 創建Elasticsearch索引
async function createIndex(indexName) {
// 省略創建索引代碼
}
// 索引模板數據到Elasticsearch
async function indexTemplates(indexName, templates) {
// 省略索引數據代碼
}
// 提取關鍵詞
async function extractKeywords(text) {
const result = await nlpManager.extractEntities(text);
const keywords = result.entities.map(entity => entity.option || entity.utteranceText);
return keywords;
}
// 使用Elasticsearch進行搜索
async function searchTemplates(indexName, keywords) {
const { body } = await client.search({
index: indexName,
body: {
query: {
bool: {
should: [
{ match: { name: { query: keywords.join(' '), boost: 2 } } },
{ terms: { tags: keywords } }
]
}
}
}
});
return body.hits.hits.map(hit => hit._source);
}
// 主程序
async function main() {
const indexName = 'templates';
// 創建索引并索引數據
await createIndex(indexName);
await indexTemplates(indexName, templates);
// 用戶輸入
const userInput = "I want to create a poster page for programming promotion";
// 提取關鍵詞
const keywords = await extractKeywords(userInput);
// 執行搜索
const results = await searchTemplates(indexName, keywords);
// 輸出結果
console.log(results);
}
main().catch(console.error);使用開源大語言模型 ChatGLM-6B 進行頁面生成
對于無法使用外網或預算有限的項目，我們可以考慮使用開源的大語言模型。本文選了 ChatGLM-6B[11] 開源模型來做演示。
安裝
ChatGLM-6B 本地部署的教程網上有很多，由于我的電腦是 Windows，并且沒有 N 卡，所以我參考了這篇文章手把手教你本地部署清華大學KEG的ChatGLM-6B模型[12]來部署 ChatGLM-6B。
這篇文章講得很細致，按照流程走下來只出現了兩個小問題，解決后就跑通了。這里也記錄一下這兩個問題及相應的解決辦法。
TDM-GCC 編譯錯誤
按照文章中的要求安裝了 TDM-GCC 后發現編譯 quantization_kernels_parallel.c 文件錯誤，卸載 TDM-GCC 后換了 MinGW-w64[13] 就好了，編譯順利通過。
執行 python 腳本偶爾沒反應
這個問題排查了很久，經過不斷的調試和重啟，最后發現是系統資源不足（我的電腦 CPU 是 6800H，32G 內存，沒有顯卡）。在關掉無關程序后，只保留一個終端用于啟動腳本后，就沒有問題了。
使用
ChatGLM-6B 的相關代碼已經上傳到了 Github [14]，大家可以把項目下載下來，然后按照倉庫文檔中的說明修改目錄位置后，就可以執行 cli-demo.py 或者 web-demo.py 腳本和 ChatGLM-6B 進行交互了。下面的幾張圖片就是部署在我電腦上的 ChatGLM-6B 使用示例：
由于電腦配置不是特別好，ChatGLM-6B 在我電腦上運行起來比較慢，一個問題回答起來要花幾分鐘。像生成低代碼頁面的這個需求，就跑了十幾分鐘，最后程序直接崩了，只給我輸出了一半的 JSON，不過數據結構是對的，所以換個好點的顯卡后應該不是問題。
總結
其實，大語言模型不僅能和低代碼領域配合使用，經過訓練后的模型可以和任何領域結合，從而生成該領域的專門模型。例如 Figma、即時設計、MasterGo 這種設計工具，它們存儲的也是一份 JSON 數據。所以理論上也可以通過對話來生成設計頁面。
還有其他的類似于 AI 客服、催收機器人都可以通過這種方法訓練出來。
參考資料
?手把手教你本地部署清華大學KEG的ChatGLM-6B模型[15]?ChatGLM-6B[16]
