html+css+js實現簡易版ChatGPT聊天機器人
OpenAI的一款聊天機器人模型ChatGPT爆火,本篇文章用一百行html+css+js代碼給大傢制作一款簡易的聊天機器人。
<!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://code.haiyong.site/wp-content/uploads/2022/10/logo.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>
到此這篇關於html+css+js實現簡易版ChatGPT聊天機器人的文章就介紹到這瞭,更多相關html+css+js實現聊天內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- HTML+CSS+JS實現的簡單應用小案例分享
- Node.js用Socket.IO做聊天軟件的實現示例
- JS實現網頁導航條特效
- JavaScript聖杯佈局與雙飛翼佈局實現案例詳解
- HTML+JavaScript模擬實現簡單的時鐘效果