探索智能网站建设：AI 结合低代码平台引领新一代开发模式

前言

最近在看稀土掘金 2023 技术交流分享时，我注意到了梁家文讲师的分享《低代码技术实践与应用创新》。这个主题与我目前所开发的业务非常契合，因此我决定按照视频中分享的内容，动手实现一下

本文将介绍如何通过 Azure-Open-AI 实现智能网站页面生成，通过不断优化 prompt，使生成的结果更加精确，成本更加少。应该适用于所有 基于 Schema 驱动的低代码平台

正文

基于 Schema 驱动的低代码平台中，生成一个网页，大概需要以下几个步骤：

根据业务需求，选择合适的区块
将区块拖拽到编辑器画布中
在编辑器中编辑区块的属性
预览、发布网站

需求：基于现有的低代码平台能力，结合 AI 技术，实现页面智能生成的功能

AI 的优势：推理、拓展、学习、分析，所以这不是一个伪需求

实施

稀土掘金 2023 中有大概的实现步骤，本文分享我在实际摸索过程中遇到的问题及解决方案

结合 AI 技术实现页面自动生成，可以极大地提高网站建设的效率。我大概总结一下步骤：

用户输入一段公司描述，例如：我是一家物联网公司，主营汽车配件
AI 根据这段输入，将按页面楼层（Section），推理出一个 Web 页面需要包含的区块（组件）
根据 Section 信息，在自家物料库中，找到合适的区块
根据找到的区块的 interface，利用 AI 推理出合适的区块属性
结合区块和区块属性，根据 Schema 协议，生成标准的 Schema
将 Schema 放入低代码编辑器，用户可以进行二次操作，预览、发布网站

其中 1、2、4 需要通过自定义的 prompt 实现

在这个优化后的方案中，我们利用 AI 替换了原来需要用户手动操作的 步骤 1 ~ 3，使得整个网站建设过程更加智能化、高效。以下是具体实现方法：

集成 AI

目前主流的都是直接集成 OpenAI 来接入大模型，但是我的 OpenAI Key 已经过期了，临时申请了一个 Azure 账号，通过调用 Azure OpenAI 的 REST API 服务来接入大模型（GPT 3.5 或者 GPT 4）

AI 自动生成网站结构

首先，我们需要让 AI （GPT 3.5）自动生成网站结构。这里的结构包括标题、关键词、描述等元素的各个 Section。只要我们有合适的 prompt 就能完成。

在实现智能网站页面生成的过程中，我们发现梁家文讲师分享的通过向量数据库匹配合适区块的方法较为复杂。因此，我们对实现过程进行了简化，并根据业务形态进行了调整。在我们的低代码平台中，区块具有分类，如导航栏、图文介绍、功能特性等。每个分类下都有许多区块，它们之间的区别仅在于样式和布局。为了简化实现过程，我们修改了 prompt，以便在生成 Section 的同时，让大模型帮助我们筛选出合适的区块分类。

我们可以将 prompt 修改为：

prompt 复制代码

you are a webpage developer. your job is generating a document base on the user input. the document should follow this format:  
  
Section1  
Title: (same language as user input) a title for this section's content  
Content: (same language as user input) a paragraph, about 100 words of this section  
Keywords: some keywords summary of this section content  
Components: (only one)Depending on the Content of this section Title and Content, select an appropriate value in ['AboutUs', 'Team', 'Timeline'] to describe the appropriate component that can be used to display this section on the web page  
...(this Section/Title/Content/Keywords/Components should repeat 4 times)  
  
Begin!  
  
USER_INPUT: {data}

用户输入：我是一家物联网公司，主营汽车配件。生成的效果：

通过这个优化后的 prompt，AI 将能够为我们生成网站结构，并在每个 Section 中给出对应的区块分类

结合 Section，填充区块的 props

接下来我们需要根据生成的 Components 的 interface，智能生成所需的区块数据。然而，当 interface 结构较为复杂时，按照分享中的 prompt 来生成数据可能会导致 GPT 3.5 模型推理出错或产生不够准确的结果。例如：

ts 复制代码

interface AboutUs {
    /** 标题 */
    title: string;
    /** 描述 */
    desc: string;
    data: Array<{
        /** 图片 */
        image: string;
        /** tab 文案 */
        tabText: string;
        /** 按钮文案 */
        btn: string;
    }>
}

我们看下数据对比：

GPT 3.5	GPT 4

很显然 GPT 4 的结果更符合我们的需求，但是 GPT 4 的价格却比 3.5 多出好几倍

GPT3.5： $0.002 - 1000 tokens

GPT4： $0.03-0.06 - 1000 tokens

我们可以通过优化 prompt 来让 GPT 3.5 的生成结果达到 GPT 4 的效果

prompt 复制代码

you are good at typescript and json mock. you will be given some keyword, your job is generating a JSON array generated based on the given Title/Content/Keywords, then combine them into a json array. here are some rules you should follow:  
  
rule 1: the json array like this:  
``json  
{{  
props: []  
}}  
`` 
  
rule 2: to create a json array, you should know the parameter declaration of the object key value in the array, you have access to the following components's props declaration, when generating field data, you should consider every field's type and comment:  
``typescript  
{comps_declare}  
``  
  
rule 3: if you need to generate a image url, you can use Picsum.  
  
rule 4: the values of the attributes of the objects in the JSON array are in Chinese  
  
rule 5: the attribute values of each object in the JSON array are different  
  
here is the Title/Content/Keywords:  
  
{sections}  
  
Remember, output an example of a JSON array generated based on the given Title/Content/Keywords

我们再对比一下效果

GPT 3.5	GPT 4

通过这个优化后的 prompt，GPT 3.5 生成的数据基本是可用的，成本也大大减少

结合区块的 props 生成图片

关于图片的生成，最大的争议就是版权问题，Bing Search API 虽然提供了版权参数（"license": "ShareCommercially"），但不一定所有结果都是可信的，大家要商业化的话还是慎用
AI 生成图片会受限于模型/描述/限制词等因素，相对来说使用门槛较高，生成结果不太可控

在网站建设过程中，图片的选择与生成是一个重要环节。目前，有两种主要方法可供选择：通过 Bing Search API 获取图片和使用 AI 生成图片。接下来，我们将对这两种方法进行对比分析

● 效果一（关键词：价格有竞争力）

Bing Search	AI

● 效果二（关键词：连接未来，驾驶智能）

Bing Search	AI

● 耗时对比

Bing Search	AI
≈ 408 ms	< 20 s

从效果上看，Bing Search 是完全符合需求的，但出于版权问题，我们还是老老实实的用 AI 来生成图片，毕竟它没有版权问题，生成的图片不满足用户需求的话，还可以引导用户在编辑器中编辑图片；如果是出现版权纠纷，开发人员可能要领大礼包了

生成 Schema，使用编辑器对页面进行编辑、预览

在完成上述步骤后，我们已经获取到了组成页面的 区块、区块数据以及素材。接下来，我们将根据低代码 schema 协议生成标准化的 schema，并利用低代码引擎进行渲染，生成网站预览页面。这一部分的实现相对简单，大家可以根据自己的需求进行自行实现。

有了标准化的 schema，我们就可以交由低代码引擎进行渲染，生成网站预览页面。用户可以在预览页面中查看网站的整体效果，以便进行进一步的调整。

总结

通过与 AI 的结合，我们可以为现有产品功能赋予更高程度的智能化特性。此外，通过不断优化 prompt，我们可以使生成的结果更加精确，从而提高开发效率和质量。可以预见，AI 结合传统开发模式将逐渐成为趋势，为各类应用带来更多创新可能。希望本文能够为大家提供有益的启示，激发更多开发的灵感！