首先，我们需要注册一个 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) { // 省略创建索引代码}
// 索引模板数据到Elasticsearchasync 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 客服、催收机器人都可以通过这种方法训练出来。
