Создание современных веб-приложений с искусственным интеллектом становится базовым навыком для веб-разработчиков, стремящихся оставаться востребованными на рынке. В масштабном видеоруководстве от freeCodeCamp.org ведущий Харрис (автор проекта Coding Cleverly) пошагово разбирает процесс построения полнофункционального чат-приложения на базе популярного веб-стека. Особенностью этого проекта стал вынужденный, но крайне актуальный технологический пивот: из-за проблем с лимитами платного API OpenAI автору пришлось прямо на лету перестроить архитектуру приложения на бесплатные open-source модели Hugging Face, включая передовой движок DeepSeek R1.
🛠️ Подготовка окружения и инициализация MERN-стека 0:00
Разработка любого современного full-stack решения начинается с четкого планирования архитектуры. В данном курсе Харрис делает ставку на классический стек MERN. Выбор обусловлен высокой гибкостью и популярностью этой комбинации в индустрии: MongoDB используется для хранения пользовательских запросов, Express служит для маршрутизации на бэкенде, React отвечает за построение интерфейса, а Node.js обеспечивает серверное окружение. При этом базовыми пререквизитами для прохождения курса автор называет знание JavaScript, HTML и CSS, обещая провести слушателей от самых основ до готового продукта.
Первым практическим шагом становится создание директории проекта и инициализация серверной части. В ходе демонстрации Харрис создает папку командой mkdir AI-powered-app, однако затем корректирует структуру, разделяя проект на две изолированные директории: backend и front end. Внутри папки бэкенда запускается стандартная команда инициализации Node-проекта: npm init -y.
В результате создается базовый файл конфигурации package.json, определяющий точку входа приложения в файле index.js, которую автор впоследствии переименовывает в server.js. По мнению разработчика, разделение на независимые папки позволяет изолировать логику клиента и сервера, что упрощает дальнейшее развертывание проекта и управление версиями через Git и GitHub.
🖥️ Настройка серверной части на Node.js и Express 3:50
После создания базовой структуры бэкенда необходимо развернуть ядро сервера. Харрис запускает установку ключевого набора серверных зависимостей через пакетный менеджер:
npm install express mongoose dotenv body-parser cors openai
Для начинающих программистов автор подробно расшифровывает назначение каждого пакета:
- Express — отвечает за бэкенд-маршрутизацию и обработку HTTP-запросов.
- Mongoose — библиотека для удобного взаимодействия с базой данных MongoDB.
- Dotenv — модуль для управления конфиденциальными переменными окружения.
- Body-parser — инструмент для извлечения входящих данных из JSON-документов.
- CORS — политика безопасности, позволяющая фронтенду безопасно общаться с бэкендом.
Файловая структура бэкенда дополняется каталогами models и routes, а также файлами server.js и .env. Внутри server.js разворачивается Express-сервер. Код инициализирует приложение, подключает middleware CORS и парсер JSON. Сервер настраивается на прослушивание порта по умолчанию — если переменная окружения пуста, система автоматически выбирает порт 3000 (хотя в процессе отладки автор переключается на 5000). Автор подчеркивает важность использования обработчиков ошибок (блок try-catch) при подключении, чтобы приложение не падало в случае сетевых сбоев, а выводило понятный лог в консоль. На этом этапе бэкенд проверяется простым запросом, возвращающим сообщение о стабильной работе сервера.
🗄️ Интеграция облачной базы данных MongoDB Atlas 10:12
Для сохранения истории общения пользователя с искусственным интеллектом требуется постоянное хранилище данных. Харрис демонстрирует процесс регистрации и создания облачного кластера на платформе MongoDB Atlas. Во время настройки автор сталкивается с неожиданным открытием: бесплатные тарифные планы, которые раньше всегда были доступны по умолчанию, теперь требуют более внимательной конфигурации, а система навязчиво предлагает привязку биллинговых данных, что усложняет жизнь новичкам. Тем не менее, для целей обучения Харрису удается задействовать бесплатный кластер на базе инфраструктуры AWS в регионе Вирджиния.
Важным аспектом безопасности бэкенда является настройка сетевого доступа. Автор выполняет следующие обязательные конфигурационные шаги:
- Добавление текущего IP-адреса разработчика в белый список панели управления Atlas.
- Настройка временного универсального доступа
0.0.0.0/0, позволяющего подключаться к СУБД из любой точки мира. - Создание административного пользователя базы данных с автоматической генерацией надежного пароля.
Полученная строка подключения (URI) переносится в файл .env. При запуске сервера через утилиту автоматического перезапуска nodemon (которую автор устанавливает как dev-зависимость командой npm install --save-dev nodemon) в консоли возникают предупреждения от драйвера MongoDB. Как выясняется, параметры useNewUrlParser и useUnifiedTopology, долгое время бывшие обязательными в экосистеме Node.js, в актуальных версиях драйвера (начиная с версии 4.0.0) стали устаревшими и ненужными. Харрис удаляет эти ключи из функции mongoose.connect, добиваясь абсолютно «чистого» запуска сервера без ворнингов.
🔑 Интеграция OpenAI и преодоление архитектурных тупиков 17:33
Главной фичей бэкенда должен был стать выделенный маршрут для общения с нейросетью. Перейдя на платформу OpenAI, Харрис генерирует секретный ключ для доступа к API и помещает его в переменные окружения. В каталоге routes создается файл chat.js, где описывается POST-маршрут /api/chat. Изначально автор закладывает в код использование модели text-davinci-003 с ограничением max_tokens в 150 единиц. Попутно Харрис дает развернутое объяснение концепции токенов: это минимальные единицы текста, где один токен примерно равен 4 символам или 0.75 слова в английском языке, и лимиты модели всегда включают в себя как текст запроса, так и ответ ИИ.
Однако при попытке запустить маршрут бэкенд аварийно завершает работу с ошибкой Configuration is not a constructor. Проверив версию пакета через команду npm list openai, которая выдает актуальную версию 4.78.1, Харрис понимает, что столкнулся с классической проблемой несовместимости версий: старый синтаксис инициализации через класс Configuration больше не поддерживается в OpenAI SDK v4. Автор переписывает код под актуальные стандарты, переходя на модель gpt-3.5-turbo и метод openai.chat.completions.create.
Но разработчика ждал еще один критический удар. При тестировании эндпоинта через встроенное расширение VS Code Thunder Client сервер возвращает ошибку 500 Server Error, а логи сигнализируют о коде 401: Invalid API Key / Quota exceeded. Попытки перевыпустить ключ не увенчались успехом — лимиты бесплатного аккаунта OpenAI полностью исчерпались, а привязка карты для учебного проекта не входила в планы автора. Возникает тупик, который заставляет полностью пересмотреть архитектуру приложения в пользу open-source решений.
🎨 Разработка клиентской части на React 40:28
Пока серверная часть ждет альтернативного ИИ-движка, Харрис переключается на создание интерфейса приложения. В корневой папке проекта запускается генератор фронтенда: npx create-react-app front end. Процесс установки сопровождается массой предупреждений о деприкации зависимостей. Более того, возникает жесткий конфликт версий из-за попыток пакета сослаться на еще не вышедшую официально версию React 19. В качестве решения автор рекомендует использовать явное указание стабильной 18-й версии React или применять флаг --force. Альтернативным, более современным путем Харрис называет сборщик Vite (npm create vite@latest), но для сохранения простоты оставляет стандартный шаблон CRA.
Для связи с сервером на фронтенд устанавливается HTTP-клиент Axios. Внутри директории src создается папка components и файл chat.js. Интерфейс чата строится на базе функционального компонента React с использованием хуков useState:
message(строка) — для отслеживания текущего ввода пользователя в текстовом поле.chat(массив объектов) — для хранения и рендеринга всей истории сообщений.
Функция отправки sendMessage делает асинхронный POST-запрос на /api/chat, передавая текст сообщения, после чего обновляет массив чата ответом от сервера и очищает поле ввода. Харрис удаляет дефолтный логотип React и стили из app.js, монтируя туда созданный компонент чата.
🚀 Миграция на Hugging Face и триумф DeepSeek R1 1:25:36
Чтобы реанимировать проект без финансовых затрат, Харрис обращается к платформе Hugging Face — крупнейшему хабу бесплатных ИИ-моделей. Автор проходит регистрацию, подтверждает аккаунт через email и генерирует персональный токен доступа User Access Token с правами на чтение. Файл .env на бэкенде дополняется переменной HUGGING_FACE_API_KEY, а код в routes/chat.js полностью переписывается с удалением модулей OpenAI. Теперь отправка запроса идет через обычный axios.post на инференс-эндпоинты Hugging Face.
Первые тесты со старыми моделями вроде gpt2 и gpt-neo приносят разочарование: сервер то выдает ошибку 404, то возвращает бессвязный текст, а при обращении к gpt-neo возникает ошибка 500 из-за перегрузки серверов. Ситуацию спасает интеграция новейшей open-source модели DeepSeek R1. Харрис находит актуальный URL-адрес инференса для DeepSeek R1 (версии 32B) на Hugging Face и подставляет его в конфигурацию бэкенда.
Результат превосходит ожидания. При тестировании связки через фронтенд на вопрос «What is the capital of Australia?» чат мгновенно выводит корректный ответ: «Canberra». На сложный вопрос о самом высоком здании в мире модель выдает развернутый ответ про Burj Khalifa в Дубае, адекватно сопоставляя его с небоскребами Нью-Йорка.
В финале Харрис анализирует ценовую политику Hugging Face: бесплатный тариф предоставляет безлимитный доступ к публичным моделям и датасетам навсегда, в то время как платные тарифы Pro и Enterprise требуются только при необходимости аренды выделенных серверных мощностей (GPU/Spaces) для коммерческих проектов. Проект завершается победой гибкой open-source архитектуры над закрытыми платными экосистемами.
