Я создал современного ИИ-ассистента

Большинство туториалов по ИИ показывают лишь то, как вызвать API. Я же хотел создать полноценное приложение. Я использовал чистый HTML, CSS и JavaScript.

Приложение включает в себя следующие функции:

  • Адаптивный UI
  • Темная и светлая темы
  • Потоковая передача ответов
  • Рендеринг Markdown
  • Подсветка синтаксиса
  • История чата
  • Обработка ошибок
  • Деплой на GitHub Pages

Я использовал следующие инструменты:

  • HTML5 и CSS3
  • Vanilla JavaScript
  • Marked.js
  • DOMPurify
  • Prism.js
  • Google Generative AI SDK

Я уделил особое внимание безопасности. Для очистки ответов ИИ я использовал DOMPurify. Это предотвращает риски безопасности.

Я сосредоточился на пользовательском опыте. Приложение транслирует текст по мере его генерации. Вы получаете мгновенный отклик и не ждете появления индикатора загрузки.

Я добавил Prism.js для блоков кода. Это добавляет метки языков и кнопки копирования.

Для истории чата я использовал localStorage. Ваши диалоги сохраняются даже после обновления страницы. Это быстро и не требует бэкенда.

Я добавил логику повторных попыток и сообщения об ошибках. Это делает приложение стабильным.

Проекты с ИИ обучают многим навыкам:

  • Интеграция API
  • Дизайн UI
  • Управление состоянием
  • Пользовательский опыт

Создавайте подобные проекты для своего портфолио. Это демонстрирует наличие практических навыков.

Какую функцию мне добавить следующей?

  • Голосовой ввод
  • Загрузка файлов
  • Память

Пишите в комментариях.

Источник: https://dev.to/codehuntersharath/i-built-a-modern-ai-assistant-using-html-css-and-javascript-4ca8 Дополнительное сообщество для обучения: https://youtu.be/nbFKG_6DkSE