Meneroka Pembangunan Web Dikuasakan AI: OpenAI, Node.js dan Penciptaan UI Dinamik

Dalam dunia pembangunan web yang semakin pesat membangun, kecerdasan buatan (AI) membuka jalan untuk tahap kreativiti dan kecekapan baharu. Artikel ini menyelami sinergi yang menarik antara API teguh OpenAI, fleksibiliti Node.js dan kemungkinan untuk mencipta antara muka pengguna yang dinamik. Dengan meneliti cara teknologi ini berfungsi bersama-sama, Dalam artikel teknikal ini, kami akan mendedahkan cara mereka boleh mengubah pendekatan kami terhadap pembangunan web dan pembangunan UI.

Penciptaan UI Dinamik

Penciptaan UI Dinamik melibatkan penjanaan antara muka pengguna yang boleh menyesuaikan diri secara dinamik berdasarkan faktor seperti input pengguna, data atau konteks. Dalam penjanaan UI dipacu AI, konsep ini dinaikkan dengan menggunakan kecerdasan buatan untuk mencipta atau mengubah suai elemen UI secara automatik.

Skema JSON untuk menstruktur komponen UI

Skema JSON adalah penting dalam menyusun komponen UI dengan menawarkan kaedah piawai untuk menentukan struktur, jenis dan kekangan data JSON. Skema ini menggariskan elemen UI, memperincikan sifat dan perkaitannya, yang memudahkan penjanaan UI yang konsisten dan disahkan merentas pelbagai platform dan rangka kerja.
Berikut ialah contoh data JSON yang mewakili HTML

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

Berikut ialah perwakilan contoh skema JSON yang mewakili perwakilan HTML JSON di atas.

{
  "$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
}

Buka AI API untuk Menjana JSON yang mewakili UI

Menggunakan API OpenAI untuk menjana perwakilan JSON antara muka pengguna (UI) menyediakan pembangun alat yang berkuasa untuk mencipta UI yang dinamik dan boleh disesuaikan. Begini cara anda boleh memanfaatkan API untuk tujuan ini:

Tentukan Mesej Sistem dan Pengguna: Mulakan dengan mencipta mesej sistem yang jelas yang menggariskan struktur JSON yang dijangkakan dan komponen UI yang ingin anda hasilkan. Contohnya, mesej sistem mungkin menyatakan kepada "Buat borang hubungan pelanggan".

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'
        }
    });

Buat Gesaan Deskriptif: Bangunkan mesej pengguna yang menerangkan UI yang dikehendaki dalam bahasa semula jadi. Contohnya, "Buat borang hubungan pelanggan"

Hantar Permintaan ke API: Gunakan titik akhir pelengkapan sembang OpenAI API untuk menghantar mesej sistem dan pengguna. Interaksi ini menggesa API untuk menjana JSON yang sepadan berdasarkan huraian yang disediakan.

Menghuraikan Respons JSON: Sebaik sahaja anda menerima respons API, ekstrak JSON yang dijana. Pastikan JSON mematuhi skema yang diperlukan dan mewakili komponen UI dengan tepat yang diterangkan dalam gesaan anda.

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 });

Sepadukan ke dalam Aplikasi Anda: Gunakan JSON yang dijana untuk membina dan memaparkan UI dalam rangka kerja aplikasi anda. Kaedah ini membolehkan pembangunan UI yang fleksibel dan pantas, kerana perubahan boleh dibuat dengan mudah dengan mengubah suai gesaan dan menjana semula JSON.

Menggunakan OpenAI API untuk penjanaan UI yang fleksibel melalui penerangan bahasa semula jadi adalah penting, tetapi adalah penting untuk mengesahkan JSON yang dijana terhadap skema yang telah ditetapkan. Pengesahan ini memastikan konsistensi dan membantu mengurus kemungkinan ralat atau output yang tidak dijangka daripada model AI. Dengan menggabungkan keupayaan penjanaan dinamik API OpenAI dengan pengesahan Skema JSON, pembangun boleh mencipta sistem yang teguh untuk membina UI.

Kesimpulan:

Pendekatan ini bukan sahaja meningkatkan kebolehpercayaan tetapi juga membolehkan prototaip pantas dan penyesuaian mudah antara muka pengguna. Pembangun boleh dengan cepat mengulangi reka bentuk, mengetahui bahawa JSON asas akan mematuhi struktur dan kekangan yang diperlukan. Gabungan fleksibiliti dan pengesahan ini adalah kunci untuk membangunkan UI yang canggih dan boleh disesuaikan yang memenuhi keperluan pelbagai aplikasi.

Atas ialah kandungan terperinci Meneroka Pembangunan Web Dikuasakan AI: OpenAI, Node.js dan Penciptaan UI Dinamik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!