Чат-боты становятся все более популярными, и их можно использовать для различных целей, таких как обслуживание клиентов, лидогенерация и продажи. Благодаря достижениям в области искусственного интеллекта (ИИ) чат-боты стали умнее, чем когда-либо прежде, и могут выполнять более сложные задачи. Одной из ведущих компаний в области ИИ является OpenAI, которая предоставляет современные инструменты и модели ИИ для разработчиков и предприятий.
OpenAI была основана в 2015 году группой технических специалистов, в том числе Илоном Маском, Сэмом Альтманом, Грегом Брокманом, Ильей Суцкевером и Джоном Шульманом. Миссия компании — создать безопасный и полезный ИИ, который может принести пользу человечеству в целом. С тех пор OpenAI стал лидером в области искусственного интеллекта и разработал широкий спектр моделей и инструментов, которые можно использовать для создания интеллектуальных приложений и систем.
Одной из самых впечатляющих моделей, разработанных OpenAI, является GPT (Generative Pre-trained Transformer), модель машинного обучения, которая может генерировать человекоподобный текст. GPT был предварительно обучен на больших объемах текстовых данных и может генерировать последовательные и контекстуально соответствующие ответы на широкий спектр запросов. OpenAI также выпустила несколько предварительно обученных версий GPT, в том числе GPT-2 и GPT-3, которые использовались для создания одних из самых впечатляющих чат-ботов на сегодняшний день.
OpenAI также предоставляет службу чата, которая позволяет разработчикам и предприятиям с легкостью интегрировать чат-ботов в свои веб-сайты и приложения. Сервис предоставляет доступ к предварительно обученным моделям GPT, а также мощный API, позволяющий настраивать и контролировать поведение чат-бота.
В этом руководстве мы будем использовать предварительно обученные модели OpenAI, включая GPT-3, для создания веб-приложения или мобильного приложения чат-бота. Используя мощь возможностей обработки естественного языка OpenAI, мы можем создать интеллектуального чат-бота, я назвал его iChatGPT, который может реагировать на ввод пользователя так, как это кажется естественным и похожим на человека. Итак, приступим!
Шаг 1: HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: content: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'"> <!-- monaca resources --> <script src="components/loader.js"></script> <link rel="stylesheet" href="components/loader.css"> <!-- css --> <link rel="stylesheet" href="css/style.css"> <title>iChatGPT</title> </head> <body> <div class="container messages"> <!-- Chat messages will be added here --> </div> <form class="chat-form" id="chat-form"> <input type="text" class="chat-input" id="chat-input" placeholder="Ask me..."> <button type="submit" class="chat-send" id="chat-send"> <img src="send-icon.png" width="20px" height="20px" alt="Send" id="send-img"> </button> <div class="loader"></div> </form> <!-- javascript --> <script src="main.js"></script> </body> </html>
Давайте рассмотрим, что делает каждая часть кода:
- Элемент
div
с классомcontainer messages
будет содержать сообщения чата. Сообщения от пользователя и ответы от бота - Элемент
form
с классомchat-form
и идентификаторомchat-form
будет использоваться для отправки сообщения пользователя в чат. Позже мы применим CSS для исправления и поместим его внизу страницы. - Элемент
input
с типомtext
, классомchat-input
и идентификаторомchat-input
— это место, где пользователь будет вводить свое сообщение чата. - Элемент
div
с классомloader
будет использоваться для отображения анимации загрузки при отправке сообщения чата. - Наконец, тег
script
включает файл JavaScript с именемmain.js
, который будет содержать код интерфейса чата.
Это все для HTML-кода! Теперь давайте перейдем к коду CSS.
Шаг 2: CSS
* { box-sizing: border-box; margin: 0; padding: 0; } body { background-color: #f2f2f2; font-family: Arial, sans-serif; font-size: 16px; line-height: 1.5; height: 100vh; display: flex; flex-direction: column; } .container { flex: 1; padding: 20px; padding-bottom: 70px !important; display: flex; flex-direction: column; overflow-y: scroll; scroll-behavior: smooth; } .message { max-width: 80%; margin: 10px; padding: 10px; border-radius: 5px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); } .user-message { align-self: flex-end; background-color: #2D81D8; color: white; } .bot-message { align-self: flex-start; background-color: #f2f2f2; } .chat-form { display: flex; position: fixed; bottom: 0; left: 0; right: 0; padding: 10px; background-color: white; box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.3); z-index: 1; } .chat-input { flex: 1; border: none; border-radius: 5px; padding: 10px; margin-right: 10px; font-size: 16px; } .chat-send { background-color: #2D81D8; color: white; border: none; border-radius: 5px; padding: 10px 15px; cursor: pointer; font-size: 16px; } .loader { display: none; margin-left: 10px; margin-top: 10px; border: 4px solid #f3f3f3; border-top: 4px solid #2D81D8; border-radius: 50%; width: 20px; height: 20px; animation: spin 2s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
Это код CSS для оформления HTML-документа. Он устанавливает некоторые стили по умолчанию для всех элементов на странице с помощью универсального селектора (*), включая размер блока, поля и отступы.
Класс .container
используется для оформления элемента div
, содержащего сообщения чата. Он устанавливает свойства flex, чтобы заставить его растягиваться, чтобы заполнить доступное пространство, устанавливает отступы, чтобы создать поля вокруг сообщений, и устанавливает overflow-y для прокрутки, чтобы пользователи могли прокручивать сообщения. Классы .message, .user-message и .bot-message используются для оформления отдельных сообщений чата, с различными цвета фона для сообщений, отправленных пользователем, и сообщений, полученных от бота.
Класс .chat-form используется для стилизации элемента формы, используемого для отправки сообщений. Ему присваивается фиксированная позиция внизу страницы с помощью свойства position и отступов для создания некоторого пространства вокруг элементов формы.
Наконец, класс .loader используется для стилизации анимации загрузки, которая появляется, когда бот думает, используя свойства границы, радиуса границы, ширины, высоты и анимации. Правило @keyframes spin
определяет последовательность анимации, которая используется для вращения элемента .loader
для создания анимации вращения. Анимация spin
настроена на бесконечный запуск с использованием значения infinite
свойства animation-iteration-count
.
Правило @keyframes
используется для определения последовательности стилей CSS, которые будут применяться к элементу с течением времени. В данном случае он определяет два ключевых кадра — один на 0%, а другой на 100%. Свойство transform
используется для поворота элемента .loader
, начиная с 0 градусов и заканчивая 360 градусами в конце последовательности анимации. Это создает эффект вращения.
Когда отображается элемент .loader
, для свойства display
устанавливается значение block
, что приводит к его отображению. Когда он скрыт, для свойства display
устанавливается значение none
, что делает его скрытым.
Теперь давайте добавим магии с помощью javascript.
Шаг 3: Javascript
// DOM const chatForm = document.querySelector('#chat-form'); const chatInput = document.querySelector('#chat-input'); const chatSend = document.querySelector('#chat-send'); const messageContainer = document.querySelector('.messages'); const sendImg = document.querySelector('#send-img'); const loader = document.querySelector('.loader'); // OpenAI API const OPENAI_MODEL = 'gpt-3.5-turbo'; // gpt-3.5-turbo, gpt-3.5-turbo-0301 const OPENAI_URL = 'https://api.openai.com/v1/chat/completions'; // Input Your OpenAI API Key Here. // You can sign up and get API Key from here // https://platform.openai.com/account/api-keys let apiKey = ''; const messages = []; // store previous messages to remember whole conversation // Function to add a chat message to the container function addMessage(message, isUser) { const messageDiv = document.createElement('div'); messageDiv.classList.add('message'); messageDiv.classList.add(isUser ? 'user-message' : 'bot-message'); messageDiv.textContent = message; messageContainer.appendChild(messageDiv); // Scroll to the bottom of the chat container messageContainer.scrollTop = messageContainer.scrollHeight; } // Function to handle user input function handleUserInput(event) { event.preventDefault(); const message = chatInput.value.trim(); if (message !== '') { messages.push({ 'role': 'user', 'content': message }); addMessage(message, true); chatInput.value = ''; showLoader(); // Other request body from here https://platform.openai.com/docs/api-reference/chat/create fetch(OPENAI_URL, { method: 'POST', headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + apiKey }, body: JSON.stringify({ 'model': OPENAI_MODEL, 'messages': messages }) }) .then(response => response.json()) .then(data => { hideLoader(); const responseMessage = data.choices[0].message; addMessage(responseMessage.content, false); messages.push(responseMessage); }) .catch(() => { hideLoader(); addMessage('Oops! Something went wrong. Please try again later.', false); }); } } // Function to show the loader icon function showLoader() { loader.style.display = 'inline-block'; chatSend.disabled = true; } // Function to hide the loader icon function hideLoader() { loader.style.display = 'none'; chatSend.disabled = false; } // Ask user to input his/her API Key function checkAPIKey() { if (!apiKey) apiKey = prompt('Please input OpenAI API Key.'); if (!apiKey) alert('You have not entered the API Key. The application will not work.'); } // Add an event listener to the form chatForm.addEventListener('submit', handleUserInput); // check checkAPIKey();
- Первый блок кода определяет переменные, представляющие различные элементы интерфейса чата, такие как форма чата, ввод чата, кнопка отправки, контейнер сообщения, загрузчик и изображение отправки.
- Следующий блок определяет константы для API OpenAI, включая имя модели и URL-адрес конечной точки API. Код также определяет переменную для ключа API и массив для хранения предыдущих сообщений, чтобы запомнить весь разговор.
Вы можете получить бесплатный API-ключ здесь по адресу https://platform.openai.com/account/api-keys.
- Функция
addMessage
предназначена для добавления нового сообщения в контейнер сообщений либо от пользователя, либо от бота. Функция создает новый элемент сообщенияdiv
, добавляет соответствующий класс CSS на основе отправителя и добавляет сообщение в контейнер сообщений. Эта функция также прокручивает контейнер сообщений вниз, чтобы показать последние сообщения. - Функция
handleUserInput
предназначена для обработки пользовательского ввода, когда пользователь отправляет сообщение. Функция сначала предотвращает поведение по умолчанию при отправке формы. Если ввод не пуст, функция помещает сообщение в массивmessages
, добавляет сообщение в контейнер сообщений с помощью функцииaddMessage
, очищает поле ввода, показывает загрузчик и отправляет запрос в API OpenAI для получения ответа. . Тело запроса включает название модели и предыдущие сообщения, хранящиеся в массивеmessages
.
мы храним все сообщения от пользователей и ботов, чтобы модель могла понять контекст и предыдущий разговор. Как видно на скриншотах, мы просто говорим — «а как насчет японского?», «китайского», и бот точно знает, что делать, основываясь на своем предыдущем разговоре.
- Если запрос выполнен успешно, функция скрывает загрузчик, извлекает ответное сообщение из ответа API, добавляет сообщение в контейнер сообщений с помощью функции
addMessage
и помещает ответное сообщение в массивmessages
. - Функции
showLoader
иhideLoader
определены для отображения и скрытия значка загрузчика соответственно. Функции изменяют свойство CSSdisplay
загрузчика и отключают или включают кнопку отправки. - Функция
checkAPIKey
предназначена для того, чтобы предложить пользователю ввести свой ключ API OpenAI, если он еще не определен. Если пользователь не вводит ключ API, функция показывает предупреждающее сообщение.
Теперь все сделано. Если вы соберете их вместе, вы сможете запустить это в браузере. Весь исходный код доступен здесь https://github.com/monaca-samples/iChatGPT.
Если вы хотите сделать это как мобильное приложение, вы можете зарегистрировать бесплатную учетную запись в Монаке и импортировать этот проект. Затем вы можете запустить его как на устройствах Android, так и на устройствах iPhone в кратчайшие сроки.
Заключение
В этой статье мы узнали, как использовать OpenAI для разработки простого веб-/мобильного приложения чат-бота. Это просто введение и малая часть того, что может предложить OpenAI. Подробнее об услугах можно прочитать здесь.
Удачного кодирования.