探索AI驱动Web开发动态UI

背景

在快速发展的网络开发领域，人工智能（AI）正在为创造力和效率的新水平铺平道路。本文将深入探讨 OpenAI 强大的 API、Node.js 的灵活性以及创建动态用户界面的可能性之间令人兴奋的协同作用。通过研究这些技术如何协同工作，我们将揭示它们如何改变我们的网络开发和用户界面开发方法。

动态用户界面创建

动态用户界面创建是指生成可根据用户输入、数据或上下文等因素动态调整的用户界面。在人工智能驱动的用户界面生成中，这一概念通过使用人工智能自动创建或修改用户界面元素得到了提升。

构建用户界面组件的 JSON 模式

JSON 模式提供了一种标准化方法来定义 JSON 数据的结构、类型和约束，对组织用户界面组件至关重要。该模式概括了用户界面元素，详细说明了它们的属性和相互关系，有助于在不同平台和框架间生成一致且经过验证的用户界面。

以下是表示 HTML 的 JSON 数据示例：

json 复制代码

{
   "type": "form",
   "children": [
     {
       "type": "div",
       "children": [
         {
           "type": "label",
           "attributes": [
             {
               "name": "for",
               "value": "name"
             }
           ],
           "label": "Name:"
         }
       ]
     }
   ]
}

下面是表示上述 HTML JSON 表示法的 JSON 模式示例

json 复制代码

{
   "$schema": "https://json-schema.org/draft/2020-12/schema",
   "$id": "https://spradeep.com/htmlform.schema.json",
   "type": "object",
   "properties": {
     "type": {
       "type": "string",
       "enum": [
         "div",
         "button",
         "header",
         "section",
         "input",
         "form",
         "fieldset",
         "legend"
       ]
     },
     "label": {
       "type": "string"
     },
     "children": {
       "type": "array",
       "items": {
         "$ref": "#"
       }
     },
     "attributes": {
       "type": "array",
       "items": {
         "$ref": "#/$defs/attribute"
       }
     }
   },
   "required": [
     "type"
   ],
   "$defs": {
     "attribute": {
       "type": "object",
       "properties": {
         "name": {
           "type": "string"
         },
         "value": {
           "type": "string"
         }
       }
     }
   },
   "additionalProperties": false
}

生成代表用户界面的 JSON 的 OpenAI API

使用 OpenAI API 生成用户界面（UI）的 JSON 表示形式，为开发人员创建动态和适应性强的用户界面提供了强大的工具。下面介绍如何为此目的利用 API：

1. 定义系统和用户信息

首先，制作一个清晰的系统消息，概述预期的 JSON 结构和要生成的用户界面组件。例如，系统消息可能会指定 "制作一个客户联系表单"。

javascript 复制代码

const tools = [
         {
           "type": "function",
           "function": {
             "name": "generate_ui",
             "description": "Generate UI",
             "parameters": {
               "type": "object",
               "properties": {
                 "type": {
                   "type": "string",
                   "enum":["div", "button", "header", "section", "input", "form", "fieldset", "legend"]
                 },
                 "label":{
                     "type":"string"
                 },
                 "children": {
                     "type": "array",
                     "items": {
                        "$ref": "#",
                      }
                 },
                 "attributes":{
                     "type": "array",
                     "items": {
                         "$ref": "#/$defs/attribute"
                      }
                 }
               },
               "required": ["type"],
               "$defs": {
                 "attribute": {
                     "type": "object",
                     "properties":{
                         "name": { "type": "string"},
                         "value": {"type":"string"}
                    }
                 }
               },
               additionalProperties: false
             }
           }
         }
     ];
const response = await axios.post('https://api.openai.com/v1/chat/completions', {
         model: "gpt-4o",
         messages: [{ role: "system", content: "You are a UI generator AI. Convert the user input into a UI." }, { role: "user", content: req.body.prompt }],
         tools: tools
     }, {
         headers: {
             'Authorization': `Bearer ${process.env.OPENAI_API_KEY}`,
             'Content-Type': 'application/json'
         }
     });

2. 创建描述性提示词

测试下提示词

text 复制代码

You are a UI generator AI. Convert the user input into a UI. JSON 模式提供了一种标准化方法来定义 JSON 数据的结构、类型和约束，对组织用户界面组件至关重要。该模式概括了用户界面元素，详细说明了它们的属性和相互关系，有助于在不同平台和框架间生成一致且经过验证的用户界面。 以下是表示 HTML 的 JSON 数据示例： { "type": "form", "children": [ { "type": "div", "children": [ { "type": "label", "attributes": [ { "name": "for", "value": "name" } ], "label": "Name:" } ] } ] }

生产供应商入驻页面

开发用户信息，用自然语言描述所需的用户界面UI。例如，"制作客户联系表单"。

自然语言描述所需的UI

3. 向 API 发送请求

使用 OpenAI API 的聊天完成端点向系统和用户发送消息。此交互会提示 API 根据所提供的描述生成相应的 JSON。

4. 解析 JSON 响应

收到 API 的响应后，提取生成的 JSON。确保 JSON 符合所需的模式，并准确表示提示中描述的用户界面组件。

javascript 复制代码

const toolCalls = response.data.choices[0].message.tool_calls;
     let messageContent = '';
     if(toolCalls){
         toolCalls.forEach((functionCall, index)=>{
             if(index === toolCalls.length-1){
                 messageContent += functionCall.function.arguments;
             }else{
                 messageContent += functionCall.function.arguments+",";
             }
         });
     }
     res.json({ message: messageContent });

5. 集成到应用程序中

使用生成的 JSON 在应用程序框架内构建和渲染用户界面。这种方法允许灵活、快速地开发用户界面，因为通过修改提示和重新生成 JSON 就能轻松地进行更改。

GPT生成UI

客户联系表单用户界面生成的 JSON

使用 OpenAI API 通过自然语言描述灵活生成用户界面非常强大，但根据预定义模式验证生成的 JSON 也至关重要。这种验证可确保一致性，并有助于管理人工智能模型的潜在错误或意外输出。通过将 OpenAI API 的动态生成功能与 JSON 模式验证相结合，开发人员可以创建用于构建用户界面的强大系统。

结论

这种方法不仅能提高可靠性，还能快速创建原型并轻松定制用户界面。开发人员可以快速迭代设计，因为他们知道底层 JSON 将遵守所需的结构和约束。这种灵活性和验证性的融合是开发复杂且适应性强的用户界面以满足各种应用需求的关键。也又另一类与AI集成实现的低代码平台。