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

使用 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>

测试前端

index.html在 Web 浏览器中打开该文件。
在输入字段中输入消息，然后按 Enter 键即可查看聊天机器人的响应。

4.部署和扩展

托管前端

您可以index.html在任何网络托管服务上托管该文件，甚至可以使用 GitHub Pages 进行快速部署。

监控和扩展

通过 AWS CloudWatch监控您的 Lambda 函数和 API 网关使用情况。
通过调整 API 网关和 Lambda 函数设置来根据需要扩展服务。

结论

通过本教程，您已经构建了一个实时 AI 聊天机器人并使用无服务器架构进行了部署。这种方法为部署 AI 驱动的服务提供了一种可扩展且经济高效的解决方案，而 AWS Lambda 和简单前端的组合则展示了如何将现代技术用于实际应用。

通过集成更高级的 AI 模型或增强用户界面，您可以进一步自定义聊天机器人。祝您编码愉快！

原文链接：https://dzone.com/articles/real-time-ai-powered-chatbot-with-serverless-architecture