«

怎么使用html+css+js实现简易版ChatGPT聊天机器人

时间:2024-3-11 11:50     作者:韩俊     分类: Javascript


本篇内容介绍了“怎么使用html+css+js实现简易版ChatGPT聊天机器人”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test</title>
    <style type="text/css">
        @import url("https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&family=Poppins:wght@200;300&display=swap");
        * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
          font-family: "Poppins", sans-serif;
        }
        body {
          background: #4b5c66;
        }
        .container {
            --light-color: #fff;
            height: 580px;
            background: var(--light-color);
            bottom: 50px;
            right: 10px;
            box-shadow: 0px 0px 15px 0px black;
        }
        @media screen and (min-width:440px) {
            .container {
                position: fixed;
            }
        }
        .chat-header {
          height: 60px;
          display: flex;
          align-items: center;
          padding: 0px 30px;
          background-color: #0652c0;
          color: var(--light-color);
          font-size: 1.5rem;
        }

        .chat-header .logo {
          height: 35px;
          width: 35px;
          box-shadow: 0px 0px 10px 0px black;
        }
        .chat-header img {
          height: 100%;
          width: 100%;
        }
        .chat-header .title {
          padding-left: 10px;
        }
        .chat-body {
          height: 465px;
          display: flex;
          flex-direction: column;
          padding: 8px 10px;
          align-items: flex-end;
          overflow-y: auto;
        }
        .chat-input {
          height: 60px;
          display: flex;
          align-items: center;
          border-top: 1px solid #ccc;
        }
        .input-sec {
          flex: 9;
        }
        .send {
          flex: 1;
          padding-right: 4px;
        }
        #txtInput {
          line-height: 30px;
          padding: 8px 10px;
          border: none;
          outline: none;
          caret-color: black;
          font-size: 1rem;
          width: 100%;
        }

        .chatbot-message,
        .user-message {
          padding: 8px;
          background: #ccc;
          margin: 5px;
          width: max-content;
          border-radius: 10px 3px 10px 10px;
        }
        .chatbot-message {
          background: #0652c0;
          color: var(--light-color);
          align-self: flex-start;
          border-radius: 10px 10px 3px 10px;
        }

    </style>
</head>
<body>
    <div class="container">
        <div class="chat-header">
            <div class="logo"><img src="https://cache.yisu.com/upload/information/20230225/112/12222.jpg" alt="cwt" /></div>
            <div class="title">简易版Chat GPT</div>
        </div>
        <div class="chat-body"></div>
        <div class="chat-input">
            <div class="input-sec"><input type="text" id="txtInput" placeholder="在这里写" autofocus /></div>
            <div class="send"><img src="https://haiyong.site/img/svg/send.svg" alt="send" /></div>
        </div>
    </div>
    <script>
        const responseObj = {
            你好: "你好,我是最强人工智能ChatGPT,我能回答你所有问题,快来和我聊天吧!",
            五块钱怎么花三天: "坐公交回去找妈妈",              
            你是小黑子吗: "不,我不是小黑子。我是OpenAI的聊天机器人模型ChatGPT",
            你为什么和我聊天: "只因你太美",
            嘿: "嘿! 这是怎么回事",
            今天几号: new Date().toDateString(),
            几点了: new Date().toLocaleTimeString(),
        };
        const chatBody = document.querySelector(".chat-body");
        const txtInput = document.querySelector("#txtInput");
        const send = document.querySelector(".send");
        send.addEventListener("click", () => renderUserMessage());
        txtInput.addEventListener("keyup", (event) => {
            if (event.keyCode === 13) {
                renderUserMessage();
            }
        });
        const renderUserMessage = () => {
            const userInput = txtInput.value;
            renderMessageEle(userInput, "user");
            txtInput.value = "";
            setTimeout(() => {
                renderChatbotResponse(userInput);
                setScrollPosition();
            }, 600);
        };
        const renderChatbotResponse = (userInput) => {
            const res = getChatbotResponse(userInput);
            renderMessageEle(res);
        };
        const renderMessageEle = (txt, type) => {
            let className = "user-message";
            if (type !== "user") {
                className = "chatbot-message";
            }
            const messageEle = document.createElement("div");
            const txtNode = document.createTextNode(txt);
            messageEle.classList.add(className);
            messageEle.append(txtNode);
            chatBody.append(messageEle);
        };
        const getChatbotResponse = (userInput) => {
            return responseObj[userInput] == undefined ?
                "听不太懂呢试试输点别的" :
                responseObj[userInput];
        };
        const setScrollPosition = () => {
            if (chatBody.scrollHeight > 0) {
                chatBody.scrollTop = chatBody.scrollHeight;
            }
        };

    </script> 
</body>
</html>

标签: javascript html css

热门推荐