用一个项目揭开AI全栈的神秘面纱——让AI根据你的项目数据生成回答

一、引言

在当今数字化时代，AI 技术已经深入到我们生活的方方面面。而 AI 全栈开发则涉及到从前端界面展示到后端数据处理，再到 AI 模型交互的整个流程。今天，我们将通过一个具体的项目，详细揭开 AI 全栈的神秘面纱，让你对全栈开发有更深入的理解。

二、项目概述

本项目是一个 AI 用户问答聊天机器人应用，主要由前端页面展示、后端数据接口提供以及 AI 服务器响应问题三部分组成。前端负责与用户交互，展示用户数据并接收用户问题；后端提供用户数据接口；AI 服务器则根据用户提供的数据和问题，调用 AI 模型生成回答。

三、项目结构与准备工作

1. 项目结构

项目主要分为三个部分：前端（frontend）、后端（backend）和 AI 服务器（llm ai server）。

前端：负责展示用户界面，与用户交互。
后端：提供数据接口，管理数据文件。
AI 服务器：处理用户的问题，调用 AI 模型生成回答。

2. 数据文件准备 - user.json

这个文件存储了用户的基本信息，是一个 JSON 格式的数据文件。内容如下：

json 复制代码

{
    "users": [
        {
            "id": 1,
            "name": "小帅",
            "hometown": "山东"
        },
        {
            "id": 2,
            "name": "小瓜", 
            "hometown": "江西"
        },
        {
            "id": 3,
            "name": "小卢",
            "hometown": "江西"
        }
    ]
}

3. 后端数据接口服务启动

我们使用 json-server 来提供数据接口。首先要安装它：

css 复制代码

npm i json-server

安装完成后，我们可以使用以下命令启动服务：

css 复制代码

json-server --port 3000 --watch user.json

为了方便，我们可以在 package.json 的 scripts 中添加一个命令：

json 复制代码

"scripts": {
    "dev": "json-server --port 3000 --watch user.json"
}

之后，我们就可以使用 npm run dev 来启动服务，服务会监听 http://localhost:3000/users，提供用户数据接口。

四、AI 服务器搭建 - main.js

1. 引入必要的模块

ini 复制代码

const http = require('http');
const OpenAI = require('openai');
const url = require('url');

这里引入了 Node.js 的 http 模块用于创建服务器，OpenAI 模块用于调用 AI 模型，url 模块用于解析 URL 中的查询字符串。

2. 配置 OpenAI 客户端

php 复制代码

const client = new OpenAI({
    apiKey: '你的KEY',
    baseURL: 'https://api.302.ai/v1'
});

这里设置了 OpenAI 的 API 密钥和基础 URL，以便后续调用 AI 模型。

3. 通用 LLM 完成接口函数

ini 复制代码

const getCompletion = async (prompt, model = "gpt-3.5-turbo") => {
    const messages = [{
        role: "user",
        content: prompt
    }];
    const response = await client.chat.completions.create({
        model: model,
        messages: messages,
        temperature: 0.1,
    });
    return response.choices[0].message.content;
};

这个函数用于向 OpenAI 模型发送请求并获取响应。prompt 是用户的问题，model 是使用的 AI 模型，temperature 控制生成结果的随机性，值越低结果越确定。

4. 测试函数（可选）

ini 复制代码

const main = async () => {
    const prompt = "用贴吧语气的话骂我";
    const result = await getCompletion(prompt);
    console.log(result);
};

这个函数可以用于测试 getCompletion 函数是否正常工作。

5. 创建 HTTP 服务器

ini 复制代码

const server = http.createServer(async (req, res) => {
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.setHeader('Access-Control-Allow-Methods', 'GET,POST,OPTIONS');
    res.setHeader('Access-Control-Allow-Headers', 'Content-Type,Authorization');

    const parsedUrl = url.parse(req.url, true);
    const queryObj = parsedUrl.query;
    const prompt = `
    ${queryObj.data}
    请你根据以上数据回答以下问题
    ${queryObj.question}
    `;
    const result = await getCompletion(prompt);
    let info = {
        result
    };
    res.statusCode = 200;
    res.setHeader('Content-Type', 'text/json');
    res.end(JSON.stringify(info));
});

server.listen(1314);

这个服务器监听 1314 端口，处理前端发送的请求。它会从 URL 的查询字符串中获取用户的数据和问题，组合成一个提示（prompt），然后调用 getCompletion 函数获取 AI 模型的回答，并将结果以 JSON 格式返回给前端。

五、前端页面搭建 - index.html

1. 页面结构

xml 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI Users Rag chatbot</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css">
</head>
<body>
    <div class="container" action="http://www.baidu.com">
        <div class="row col-md-6 col-md-offset-3">
            <table class="table table-striped" id="user_table">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>姓名</th>
                        <th>家乡</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
            <div class="row">
                <form name="aiForm">
                    <div class="from-group">
                        <label for="questionInput">提问</label> 
                        <input type="text" class="form-control" id="questionInput" name="question" placeholder="请输入问题" >
                    </div>
                    <button type="submit" class="btn btn-default" name="btn">查询</button>
                </form>
            </div>
            <div class="row" id="message">

            </div>
        </div>
    </div>
    <script>
        // 后续 JavaScript 代码
    </script>
</body>
</html>

这里使用了 Bootstrap 框架来美化页面，创建了一个表格用于展示用户数据，一个表单用于用户输入问题，以及一个区域用于显示 AI 回答。

2. 获取并展示用户数据

ini 复制代码

const tableBody = document.querySelector('table tbody');
const oForm = document.forms['aiForm'];
let usersData;

fetch('http://localhost:3000/users')
   .then(res => res.json())
   .then(users => {
        usersData = users;
        for (let user of users) {
            const tr = document.createElement('tr');
            for (let key in user) {
                const td = document.createElement('td');
                td.innerText = user[key];
                tr.appendChild(td);
            }
            tableBody.appendChild(tr);
        }
    });

使用 fetch 函数从后端接口 http://localhost:3000/users 获取用户数据，然后将数据展示在表格中。

3. 处理用户提问

ini 复制代码

oForm.addEventListener('submit', function (e) {
    e.preventDefault();
    const question = oForm.question.value.trim();
    if (!question) {
        alert('请输入问题');
        return;
    }

    fetch(`http://localhost:1314/api?question=${question}&data=${JSON.stringify(usersData)}`)
       .then(res => res.json())
       .then(data => {
            console.log(data);
            document.querySelector('#message').innerText = data.result;
        });
});

当用户提交表单时，阻止表单的默认提交行为，获取用户输入的问题，然后使用 fetch 函数将问题和用户数据发送到 AI 服务器 http://localhost:1314/api，最后将 AI 服务器返回的结果展示在页面上。

六、总结

通过这个项目，我们详细了解了 AI 全栈开发的整个流程。从前端的页面设计和交互，到后端的数据接口提供，再到 AI 服务器的模型调用，每个环节都紧密相连。希望这个项目能帮助你揭开 AI 全栈的神秘面纱，让你对全栈开发有更深入的理解和实践经验。在实际开发中，你可以根据需求对项目进行扩展和优化，例如使用更复杂的 AI 模型、优化前端界面等。