Создайте свой ChatGPT: пошаговое руководство

Создадим клон сайта ChatGPT – собственный веб-сайт с чатом, взаимодействующим с моделью GPT и выводящим результаты асинхронно, без перезагрузки страницы. Используем HTML, CSS и JavaScript без дополнительных библиотек.

Подготовка проекта

Создайте новый проект в Visual Studio Code. Создайте пустую папку (например, Project) и внутри нее файлы: index.html, index.css, и index.js. В index.html разместите базовый HTML-код:

<!DOCTYPE html>
<html>
<head>
  <title>Прогер Чат</title>
  <link rel="stylesheet" href="index.css">
</head>
<body>
  <h1>ПрогерЧат</h1>
  <p>Lorem ipsum...</p>
  <div id="messages">
    <div class="user-message">Сам текст</div>
    <div class="chat-message">Ещё один текст</div>
  </div>
  <form id="chatForm" onsubmit="submitForm(event)">
    <input type="text" id="input" placeholder="Введите запрос">
  </form>
  <script src="index.js"></script>
</body>
</html>

Для запуска локального сервера используйте расширение Live Server (или аналогичное) в VS Code. Кликните правой кнопкой мыши на index.html и выберите «Open with Live Server».

Добавьте стили в index.css. Можно использовать собственные стили или найти примеры (например, на сайте it-proger.com).

JavaScript функциональность

В index.js создайте функцию submitForm, вызываемую при нажатии Enter в поле ввода:

function submitForm(event) {
  event.preventDefault();
  getData();
}

event.preventDefault() предотвращает перезагрузку страницы. Функция getData() (описанная ниже) обрабатывает запрос к GPT.

Запрос к API OpenAI

Функция getData() выполняет следующие действия:

Получение данных из поля ввода:

const userData = document.getElementById('input').value.trim();
if (userData === '') return false;

Обращение к API OpenAI:

const apiKey = 'YOUR_API_KEY'; // Замените на свой API-ключ

try {
  const response = await fetch('https://api.openai.com/v1/chat/completions', {
    method: 'POST',
    headers: {
      'Authorization': `Bearer ${apiKey}`,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      model: 'gpt-3.5-turbo',
      messages: [{ role: 'user', content: userData }],
      max_tokens: 100
    })
  });
  const data = await response.json();
  displayResponse(data); // Вывод ответа на страницу
} catch (error) {
  console.error('Error:', error);
}

Замените YOUR_API_KEY на свой ключ API от OpenAI. Используется модель gpt-3.5-turbo, ответ ограничен 100 токенами.

Вывод ответа

Функция displayResponse выводит сообщения пользователя и ответы GPT на страницу:

function displayResponse(data) {
  const messagesDiv = document.getElementById('messages');
  messagesDiv.innerHTML += `
    <div class="user-message"><p>${userData}</p></div>
    <div class="chat-message"><p>${data.choices[0].message.content}</p></div>
  `;
  document.getElementById('input').value = ''; // Очистка поля ввода
}

Код добавляет сообщения в div с id="messages" и очищает поле ввода.

Создан работающий веб-чат, взаимодействующий с моделью GPT. Это базовый функционал, который можно расширить. Не забудьте заменить YOUR_API_KEY на свой ключ API от OpenAI.