使用无服务器架构实现和部署实时人工智能聊天机器人

使用 AWS Lambda 作为后端并使用简单的 HTML/JavaScript 前端构建实时 AI 聊天机器人

在本文中，我们将介绍使用无服务器架构创建和部署实时 AI 聊天机器人的过程。我们将介绍从使用无服务器功能设置后端到构建响应式前端聊天界面的整个工作流程。这种方法不仅简化了开发，而且还确保了可扩展性和成本效益。

项目概述

我们将构建一个可以实时与用户互动的简单聊天机器人。我们的聊天机器人将利用预先训练的 AI 模型来生成响应，并使用无服务器计算进行部署以处理后端逻辑。在本教程中，我们将使用AWS Lambda作为无服务器后端，并使用基本的HTML / CSS / JavaScript界面作为前端。

使用 AWS Lambda 设置后端

创建 Lambda 函数

登录AWS 管理控制台并导航到 AWS Lambda。
创建一个新的Lambda 函数：

选择“从头开始创作”。
提供一个函数名称，例如ChatbotFunction。
选择一个运行时，例如 Node.js 14.x。

配置功能：

设置函数的角色并赋予其 Lambda 执行的权限。
将下面的代码写入或粘贴到函数代码编辑器中。

Lambda 函数代码（Node.js）：

const axios = require('axios');

exports.handler = async (event) => {

    const userMessage = JSON.parse(event.body).message;

    const response = await getChatbotResponse(userMessage);

    return {

        statusCode: 200,

        body: JSON.stringify({ response }),

    };

};

const getChatbotResponse = async (message) => {

    const apiUrl = 'https://api.example.com/chatbot'; // Replace with your AI model endpoint

    const apiKey = 'your-api-key'; // Replace with your API key

    try {

        const response = await axios.post(apiUrl, { message }, {

            headers: { 'Authorization': `Bearer ${apiKey}` },

        });

        return response.data.reply;

    } catch (error) {

        console.error('Error fetching response:', error);

        return 'Sorry, there was an error processing your request.';



    }



};

部署该函数并记下提供的端点 URL。

设置 API 网关

在 AWS 管理控制台中导航到API 网关。
创建一个新的 API 并将其链接到您的 Lambda 函数。
部署 API 以使其可通过互联网访问。

构建前端界面

创建 HTML 和 JavaScript

创建一个新的 HTML 文件，例如index.html，使用以下代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>AI Chatbot</title>

    <style>

        #chat {

            max-width: 600px;

            margin: 0 auto;

            padding: 20px;

            border: 1px solid #ccc;

        }

        #messages {

            height: 300px;

            overflow-y: scroll;

            border: 1px solid #ccc;

            padding: 10px;

        }

        #input {

            width: calc(100% - 22px);

            padding: 10px;

            margin: 10px 0;

        }

    </style>

</head>

<body>

    <div id="chat">

        <div id="messages"></div>

        <input type="text" id="input" placeholder="Type a message" />

    </div>

    <script>

        const input = document.getElementById('input');

        const messages = document.getElementById('messages');

        input.addEventListener('keypress', async (e) => {

            if (e.key === 'Enter') {

                const message = input.value;

                input.value = '';

                appendMessage('You', message);

                const response = await fetch('https://your-api-endpoint.com', { // Replace with your API Gateway endpoint

                    method: 'POST',

                    headers: { 'Content-Type': 'application/json' },

                    body: JSON.stringify({ message }),

                });

                const data = await response.json();

                appendMessage('Chatbot', data.response);



            }



        });



        function appendMessage(sender, text) {



            const messageElem = document.createElement('div');



            messageElem.textContent = `${sender}: ${text}`;



            messages.appendChild(messageElem);



        }

    </script>

</body>

</html>