Как создать свой ChatGPT на HTML, CSS и JavaScript: полное руководство

Зачем создавать собственный ChatGPT?

Современные нейросети, такие как ChatGPT, изменили подход к автоматизации общения. Однако не всегда удобно использовать готовый интерфейс — иногда требуется встроить чат-бота в свой сайт, настроить внешний вид или добавить уникальные функции. Создание собственного ChatGPT на HTML, CSS и JavaScript даёт полный контроль над интерфейсом и логикой.

Такой проект подходит как для начинающих веб-разработчиков, так и для опытных специалистов, желающих быстро прототипировать решения. Вы сможете не только повторить базовую функциональность, но и расширить её: добавить поддержку Markdown, кнопку копирования ответа, голосовой ввод или интеграцию с другими API.

Что нужно знать перед началом

Для создания своего ChatGPT вам потребуются базовые знания HTML, CSS и JavaScript. Умение работать с API и асинхронными запросами будет плюсом, но не обязательно — можно начать с локальной имитации ответов.

Основные инструменты:

• Текстовый редактор (VS Code, Sublime Text)
• Браузер для тестирования
• (Опционально) Ключ API OpenAI для реальных ответов

Проект не требует серверной части — весь код выполняется на стороне клиента. Это упрощает развёртывание и позволяет разместить чат на любом статическом хостинге.

Структура проекта и подготовка файлов

Создайте папку проекта и внутри неё три файла:

• index.html — разметка страницы
• style.css — стилизация интерфейса
• script.js — логика работы чата

Также подготовьте папку images для аватарок пользователя и бота. Можно использовать стандартные иконки или загрузить свои.

Базовая HTML-структура включает контейнер для сообщений (chat-container) и блок ввода (typing-container). Внутри блока ввода размещается текстовое поле, кнопка отправки, переключатель темы и кнопка очистки истории.

Вёрстка интерфейса: HTML и CSS

HTML-каркас состоит из двух основных блоков:

• .chat-container — область, куда динамически добавляются сообщения
• .typing-container — фиксированная нижняя панель с полем ввода и кнопками

CSS отвечает за визуальное оформление. Используйте CSS-переменные (:root) для цветовой схемы — это упростит переключение между светлой и тёмной темами. Например:

:root {
  --outgoing-chat-bg: #343541;
  --incoming-chat-bg: #444654;
  --text-color: #FFFFFF;
}
.light-mode {
  --outgoing-chat-bg: #FFFFFF;
  --incoming-chat-bg: #F7F7F8;
  --text-color: #343541;
}

Для адаптивности добавьте медиа-запросы для мобильных устройств. Убедитесь, что поле ввода не выходит за границы экрана, а сообщения корректно переносятся.

Логика на JavaScript: отправка и получение сообщений

JavaScript управляет всем взаимодействием: отправка сообщения, получение ответа, отображение в чате. Основные функции:

• Обработчик события нажатия на кнопку отправки или клавиши Enter
• Создание DOM-элементов для каждого сообщения
• Имитация ответа (или запрос к API)

Пример простой имитации ответа:

function getBotResponse(userMessage) {
  const responses = [
    "Интересный вопрос!",
    "Давайте подумаем вместе.",
    "Я могу помочь с этим."
  ];
  return responses[Math.floor(Math.random() * responses.length)];
}

Для реального ChatGPT используйте fetch-запрос к OpenAI API. Не забудьте обработать ошибки и добавить индикатор загрузки (анимацию печатания).

Тёмная и светлая темы: переключение и сохранение

Переключение темы реализуется добавлением/удалением класса light-mode у корневого элемента. JavaScript отслеживает состояние переключателя и применяет соответствующий класс.

Чтобы сохранить выбор пользователя, используйте localStorage:

const currentTheme = localStorage.getItem('theme');
if (currentTheme === 'light') {
  document.body.classList.add('light-mode');
}

При переключении темы обновляйте значение в localStorage. Это обеспечит единообразный вид при повторных визитах.

Сохранение истории чата в localStorage

История сообщений сохраняется в браузере с помощью localStorage. Это позволяет восстановить диалог после перезагрузки страницы.

Алгоритм:

1. При отправке сообщения добавляем его в массив chatHistory
2. Сериализуем массив в JSON и сохраняем в localStorage
3. При загрузке страницы проверяем наличие сохранённых данных и восстанавливаем их

Пример сохранения:

function saveChat() {
  localStorage.setItem('chatHistory', JSON.stringify(chatHistory));
}

Кнопка "Удалить чат" очищает localStorage и перезагружает интерфейс. Учтите, что localStorage имеет ограничение по объёму (обычно 5–10 МБ), поэтому для длинных диалогов может потребоваться другой подход.

Подключение реального API OpenAI

Чтобы ваш ChatGPT отвечал как настоящий, подключите OpenAI API. Для этого:

1. Зарегистрируйтесь на platform.openai.com и получите API-ключ
2. В JavaScript отправляйте POST-запрос на https://api.openai.com/v1/chat/completions
3. Передавайте историю сообщений в формате массива объектов с ролями user и assistant

Пример запроса:

const response = await fetch('https://api.openai.com/v1/chat/completions', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': `Bearer ${API_KEY}`
  },
  body: JSON.stringify({
    model: 'gpt-3.5-turbo',
    messages: chatHistory
  })
});

Важно: хранить API-ключ на клиенте небезопасно. Для продакшена используйте серверный прокси или серверные функции (например, Netlify Functions).

Оптимизация и дополнительные возможности

После базовой реализации можно улучшить проект:

• Добавить поддержку Markdown для форматирования ответов (библиотека marked.js)
• Реализовать кнопку копирования текста сообщения
• Внедрить голосовой ввод через Web Speech API
• Добавить анимацию появления сообщений
• Сделать боковую панель для переключения между диалогами

Также стоит оптимизировать производительность: использовать виртуализацию списка сообщений при большом количестве записей, ограничить историю в localStorage и добавить пагинацию.

Вопросы и ответы