低代碼與大語言模型的探索實踐

作者：譚光志 2024-02-26 08:15:43

大語言模型不僅能和低代碼領域配合使用，經過訓練后的模型可以和任何領域結合，從而生成該領域的專門模型。例如 Figma、即時設計、MasterGo 這種設計工具，它們存儲的也是一份 JSON 數據。所以理論上也可以通過對話來生成設計頁面。

前言

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]

責任編輯：武曉燕來源：前端編程技術分享

語言模型低代碼