Чат-боты становятся все более популярными, и их можно использовать для различных целей, таких как обслуживание клиентов, лидогенерация и продажи. Благодаря достижениям в области искусственного интеллекта (ИИ) чат-боты стали умнее, чем когда-либо прежде, и могут выполнять более сложные задачи. Одной из ведущих компаний в области ИИ является 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 определены для отображения и скрытия значка загрузчика соответственно. Функции изменяют свойство CSS display загрузчика и отключают или включают кнопку отправки.
  • Функция checkAPIKey предназначена для того, чтобы предложить пользователю ввести свой ключ API OpenAI, если он еще не определен. Если пользователь не вводит ключ API, функция показывает предупреждающее сообщение.

Теперь все сделано. Если вы соберете их вместе, вы сможете запустить это в браузере. Весь исходный код доступен здесь https://github.com/monaca-samples/iChatGPT.

Если вы хотите сделать это как мобильное приложение, вы можете зарегистрировать бесплатную учетную запись в Монаке и импортировать этот проект. Затем вы можете запустить его как на устройствах Android, так и на устройствах iPhone в кратчайшие сроки.

Заключение

В этой статье мы узнали, как использовать OpenAI для разработки простого веб-/мобильного приложения чат-бота. Это просто введение и малая часть того, что может предложить OpenAI. Подробнее об услугах можно прочитать здесь.

Удачного кодирования.