Популярность ChatGPT значительно выросла за последние несколько месяцев или лет, полностью изменив то, как мы взаимодействуем с автоматическими чат-ботами. Как начинающему веб-разработчику, вам может быть интересно создать собственный ChatGPT. Хорошая новость заключается в том, что можно создать клон ChatGPT, используя стандартные HTML, CSS и JavaScript.
Если вы не знакомы: ChatGPT — это расширенный шаблон чат-бота, разработанный Open AI. Он использует искусственный интеллект для генерации ответов, подобных человеческим, в диалоговом формате. Популярность ChatGPT чрезвычайно выросла благодаря его способности имитировать естественные разговоры.
В этом сообщении блога мы покажем вам, как создать собственный ChatGPT с использованием HTML, CSS и JavaScript. Создавая проект-клон ChatGPT, начинающие веб-разработчики могут получить практический опыт и применить свои навыки работы с HTML, CSS и JavaScript в реальных проектах.
Этот проект-клон ChatGPT позволяет задавать вопросы и мгновенно получать ответы. Кроме того, у вас есть возможность переключаться между темной и светлой темами. Ваша история чата хранится в локальном хранилище браузера, поэтому она сохраняется, даже если вы обновляете страницу. Однако вы можете легко удалить чаты, нажав соответствующую кнопку Удалить чат.
Действия по созданию клона ChatGPT с использованием HTML и JavaScript
Чтобы создать собственный ChatGPT с помощью HTML, CSS и JavaScript, выполните следующие действия — шаг — подробные инструкции:
- Создайте папку. Вы можете назвать эту папку как хотите и создавать в ней именованные файлы.
- Создайте файл index.html. Имя файла должно быть index и его расширение .html.
- Создайте файл style.css. Имя файла должно быть «style», а расширение должно быть «.css».
- Создайте файл script.js. Имя файла должно быть «script» с расширением «.js».
- Загрузите папку с изображениями и поместите ее в каталог вашего проекта. Эта папка содержит аватар пользователя и логотип чат-бота.
- Сначала добавьте следующие HTML-коды в файл index.html: в этом фрагменте кода вы найдете «Контейнер кошки» -Div. Позже мы будем использовать JavaScript для динамического добавления div «chat», который содержит все детали чата.
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>ChatGPT Clone in JavaScript | CodingNepal</title> <link rel="stylesheet" href="style.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Google Fonts Link For Icons --> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" /> <script src="script.js" defer></script> </head> <body> <!-- Chats container --> <div class="chat-container"></div> <!-- Typing container --> <div class="typing-container"> <div class="typing-content"> <div class="typing-textarea"> <textarea id="chat-input" spellcheck="false" placeholder="Enter a prompt here" required></textarea> <span id="send-btn" class="material-symbols-rounded">send</span> </div> <div class="typing-controls"> <span id="theme-btn" class="material-symbols-rounded">light_mode</span> <span id="delete-btn" class="material-symbols-rounded">delete</span> </div> </div> </body> </html>
Затем добавьте соответствующие коды CSS в документ style.css
, чтобы применить визуальные стили к интерфейсу ChatGPT. В настоящее время, если вы загрузите страницу веб-сайта в своей программе, вы увидите, что ChatGPT отображается с полем ввода сообщения и несколькими символами внизу.
/* Import Google font - Poppins */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; font-family: "Poppins", sans-serif; } :root { --text-color: #FFFFFF; --icon-color: #ACACBE; --icon-hover-bg: #5b5e71; --placeholder-color: #dcdcdc; --outgoing-chat-bg: #343541; --incoming-chat-bg: #444654; --outgoing-chat-border: #343541; --incoming-chat-border: #444654; } .light-mode { --text-color: #343541; --icon-color: #a9a9bc; --icon-hover-bg: #f1f1f3; --placeholder-color: #6c6c6c; --outgoing-chat-bg: #FFFFFF; --incoming-chat-bg: #F7F7F8; --outgoing-chat-border: #FFFFFF; --incoming-chat-border: #D9D9E3; } body { background: var(--outgoing-chat-bg); } /* Chats container styling */ .chat-container { overflow-y: auto; max-height: 100vh; padding-bottom: 150px; } :where(.chat-container, textarea)::-webkit-scrollbar { width: 6px; } :where(.chat-container, textarea)::-webkit-scrollbar-track { background: var(--incoming-chat-bg); border-radius: 25px; } :where(.chat-container, textarea)::-webkit-scrollbar-thumb { background: var(--icon-color); border-radius: 25px; } .default-text { display: flex; align-items: center; justify-content: center; flex-direction: column; height: 70vh; padding: 0 10px; text-align: center; color: var(--text-color); } .default-text h1 { font-size: 3.3rem; } .default-text p { margin-top: 10px; font-size: 1.1rem; } .chat-container .chat { padding: 25px 10px; display: flex; justify-content: center; color: var(--text-color); } .chat-container .chat.outgoing { background: var(--outgoing-chat-bg); border: 1px solid var(--outgoing-chat-border); } .chat-container .chat.incoming { background: var(--incoming-chat-bg); border: 1px solid var(--incoming-chat-border); } .chat .chat-content { display: flex; max-width: 1200px; width: 100%; align-items: flex-start; justify-content: space-between; } span.material-symbols-rounded { user-select: none; cursor: pointer; } .chat .chat-content span { cursor: pointer; font-size: 1.3rem; color: var(--icon-color); visibility: hidden; } .chat:hover .chat-content:not(:has(.typing-animation), :has(.error)) span { visibility: visible; } .chat .chat-details { display: flex; align-items: center; } .chat .chat-details img { width: 35px; height: 35px; align-self: flex-start; object-fit: cover; border-radius: 2px; } .chat .chat-details p { white-space: pre-wrap; font-size: 1.05rem; padding: 0 50px 0 25px; color: var(--text-color); word-break: break-word; } .chat .chat-details p.error { color: #e55865; } .chat .typing-animation { padding-left: 25px; display: inline-flex; } .typing-animation .typing-dot { height: 7px; width: 7px; border-radius: 50%; margin: 0 3px; opacity: 0.7; background: var(--text-color); animation: animateDots 1.5s var(--delay) ease-in-out infinite; } .typing-animation .typing-dot:first-child { margin-left: 0; } @keyframes animateDots { 0%,44% { transform: translateY(0px); } 28% { opacity: 0.4; transform: translateY(-6px); } 44% { opacity: 0.2; } } /* Typing container styling */ .typing-container { position: fixed; bottom: 0; width: 100%; display: flex; padding: 20px 10px; justify-content: center; background: var(--outgoing-chat-bg); border-top: 1px solid var(--incoming-chat-border); } .typing-container .typing-content { display: flex; max-width: 950px; width: 100%; align-items: flex-end; } .typing-container .typing-textarea { width: 100%; display: flex; position: relative; } .typing-textarea textarea { resize: none; height: 55px; width: 100%; border: none; padding: 15px 45px 15px 20px; color: var(--text-color); font-size: 1rem; border-radius: 4px; max-height: 250px; overflow-y: auto; background: var(--incoming-chat-bg); outline: 1px solid var(--incoming-chat-border); } .typing-textarea textarea::placeholder { color: var(--placeholder-color); } .typing-content span { width: 55px; height: 55px; display: flex; border-radius: 4px; font-size: 1.35rem; align-items: center; justify-content: center; color: var(--icon-color); } .typing-textarea span { position: absolute; right: 0; bottom: 0; visibility: hidden; } .typing-textarea textarea:valid ~ span { visibility: visible; } .typing-controls { display: flex; } .typing-controls span { margin-left: 7px; font-size: 1.4rem; background: var(--incoming-chat-bg); outline: 1px solid var(--incoming-chat-border); } .typing-controls span:hover { background: var(--icon-hover-bg); } /* Reponsive Media Query */ @media screen and (max-width: 600px) { .default-text h1 { font-size: 2.3rem; } :where(.default-text p, textarea, .chat p) { font-size: 0.95rem!important; } .chat-container .chat { padding: 20px 10px; } .chat-container .chat img { height: 32px; width: 32px; } .chat-container .chat p { padding: 0 20px; } .chat .chat-content:not(:has(.typing-animation), :has(.error)) span { visibility: visible; } .typing-container { padding: 15px 10px; } .typing-textarea textarea { height: 45px; padding: 10px 40px 10px 10px; } .typing-content span { height: 45px; width: 45px; margin-left: 5px; } span.material-symbols-rounded { font-size: 1.25rem!important; } }
Наконец, добавьте соответствующий код JavaScript в свою запись script.js
. Этот код контента сделает ваш ChatGPT практичным, расширив возможности основных моментов, например, посещения, обмена скучными и легкими темами и сохранения истории разговоров в программе.
const chatInput = document.querySelector("#chat-input"); const sendButton = document.querySelector("#send-btn"); const chatContainer = document.querySelector(".chat-container"); const themeButton = document.querySelector("#theme-btn"); const deleteButton = document.querySelector("#delete-btn"); let userText = null; const API_KEY = "PASTE-YOUR-API-KEY-HERE"; // Paste your API key here const loadDataFromLocalstorage = () => { // Load saved chats and theme from local storage and apply/add on the page const themeColor = localStorage.getItem("themeColor"); document.body.classList.toggle("light-mode", themeColor === "light_mode"); themeButton.innerText = document.body.classList.contains("light-mode") ? "dark_mode" : "light_mode"; const defaultText = `<div class="default-text"> <h1>ChatGPT Clone</h1> <p>Start a conversation and explore the power of AI.<br> Your chat history will be displayed here.</p> </div>` chatContainer.innerHTML = localStorage.getItem("all-chats") || defaultText; chatContainer.scrollTo(0, chatContainer.scrollHeight); // Scroll to bottom of the chat container } const createChatElement = (content, className) => { // Create new div and apply chat, specified class and set html content of div const chatDiv = document.createElement("div"); chatDiv.classList.add("chat", className); chatDiv.innerHTML = content; return chatDiv; // Return the created chat div } const getChatResponse = async (incomingChatDiv) => { const API_URL = "https://api.openai.com/v1/completions"; const pElement = document.createElement("p"); // Define the properties and data for the API request const requestOptions = { method: "POST", headers: { "Content-Type": "application/json", "Authorization": `Bearer ${API_KEY}` }, body: JSON.stringify({ model: "text-davinci-003", prompt: userText, max_tokens: 2048, temperature: 0.2, n: 1, stop: null }) } // Send POST request to API, get response and set the reponse as paragraph element text try { const response = await (await fetch(API_URL, requestOptions)).json(); pElement.textContent = response.choices[0].text.trim(); } catch (error) { // Add error class to the paragraph element and set error text pElement.classList.add("error"); pElement.textContent = "Oops! Something went wrong while retrieving the response. Please try again."; } // Remove the typing animation, append the paragraph element and save the chats to local storage incomingChatDiv.querySelector(".typing-animation").remove(); incomingChatDiv.querySelector(".chat-details").appendChild(pElement); localStorage.setItem("all-chats", chatContainer.innerHTML); chatContainer.scrollTo(0, chatContainer.scrollHeight); } const copyResponse = (copyBtn) => { // Copy the text content of the response to the clipboard const reponseTextElement = copyBtn.parentElement.querySelector("p"); navigator.clipboard.writeText(reponseTextElement.textContent); copyBtn.textContent = "done"; setTimeout(() => copyBtn.textContent = "content_copy", 1000); } const showTypingAnimation = () => { // Display the typing animation and call the getChatResponse function const html = `<div class="chat-content"> <div class="chat-details"> <img src="images/chatbot.jpg" alt="chatbot-img"> <div class="typing-animation"> <div class="typing-dot" style="--delay: 0.2s"></div> <div class="typing-dot" style="--delay: 0.3s"></div> <div class="typing-dot" style="--delay: 0.4s"></div> </div> </div> <span onclick="copyResponse(this)" class="material-symbols-rounded">content_copy</span> </div>`; // Create an incoming chat div with typing animation and append it to chat container const incomingChatDiv = createChatElement(html, "incoming"); chatContainer.appendChild(incomingChatDiv); chatContainer.scrollTo(0, chatContainer.scrollHeight); getChatResponse(incomingChatDiv); } const handleOutgoingChat = () => { userText = chatInput.value.trim(); // Get chatInput value and remove extra spaces if(!userText) return; // If chatInput is empty return from here // Clear the input field and reset its height chatInput.value = ""; chatInput.style.height = `${initialInputHeight}px`; const html = `<div class="chat-content"> <div class="chat-details"> <img src="images/user.jpg" alt="user-img"> <p>${userText}</p> </div> </div>`; // Create an outgoing chat div with user's message and append it to chat container const outgoingChatDiv = createChatElement(html, "outgoing"); chatContainer.querySelector(".default-text")?.remove(); chatContainer.appendChild(outgoingChatDiv); chatContainer.scrollTo(0, chatContainer.scrollHeight); setTimeout(showTypingAnimation, 500); } deleteButton.addEventListener("click", () => { // Remove the chats from local storage and call loadDataFromLocalstorage function if(confirm("Are you sure you want to delete all the chats?")) { localStorage.removeItem("all-chats"); loadDataFromLocalstorage(); } }); themeButton.addEventListener("click", () => { // Toggle body's class for the theme mode and save the updated theme to the local storage document.body.classList.toggle("light-mode"); localStorage.setItem("themeColor", themeButton.innerText); themeButton.innerText = document.body.classList.contains("light-mode") ? "dark_mode" : "light_mode"; }); const initialInputHeight = chatInput.scrollHeight; chatInput.addEventListener("input", () => { // Adjust the height of the input field dynamically based on its content chatInput.style.height = `${initialInputHeight}px`; chatInput.style.height = `${chatInput.scrollHeight}px`; }); chatInput.addEventListener("keydown", (e) => { // If the Enter key is pressed without Shift and the window width is larger // than 800 pixels, handle the outgoing chat if (e.key === "Enter" && !e.shiftKey && window.innerWidth > 800) { e.preventDefault(); handleOutgoingChat(); } }); loadDataFromLocalstorage(); sendButton.addEventListener("click", handleOutgoingChat);
Имейте в виду, что ваш ChatGPT еще не готов к посещениям с учетом подсказок. Чтобы сделать его полезным, вы хотите сосредоточиться на ключевой детали в коде. Изучите, и вы увидите, что вам нужно вставить «ключ интерфейса программирования OpenAI» в переменную API_KEY.
Чтобы получить ключ интерфейса программирования, посетите соответствующий URL-адрес: ключи интерфейса https://platform.openai.com/account/programming. Когда там, войдите в свою запись, и вы действительно захотите создать бесплатный ключ интерфейса программирования. Чтобы понять разные вещи в коде. Я предлагаю посмотреть обучающее видео с упражнениями, просмотреть примечания к коду и изучить различные подходы к коду.
Заключение
Поздравляю! Вы успешно создали проект клонирования ChatGPT с использованием HTML, CSS и ванильного JavaScript и включили его в интерфейс программирования OpenAI. В настоящее время вы можете участвовать в важных дискуссиях и демонстрировать свои способности товарищам, а затем и некоторым.