Я СТВОРЮВАВ СУЧАСНОГО AI-АССИСТЕНТА

Більшість туторіалів з AI занадто прості. Вони показують лише базовий виклик API та відповідь. Я ж хотів створити справжній застосунок.

Я розробив AI-асистента за допомогою чистого HTML, CSS та JavaScript.

Ключові особливості:

  • Стрімінгові відповіді.
  • Темна та світла теми.
  • Підтримка Markdown та підсвічування синтаксису.
  • Збереження історії чату.
  • Обробка помилок та логіка повторних спроб.

Технологічний стек:

  • HTML5 та CSS3.
  • Vanilla JavaScript.
  • Marked.js та Prism.js.
  • DOMPurify для безпеки.
  • Google Generative AI SDK.
  • GitHub Pages для хостингу.

Безпека — це пріоритет. Я використав DOMPurify для очищення відповідей AI. Це запобігає ризикам безпеки.

Користувацький досвід має значення. Я додав стрімінг контенту. Користувачі бачать текст у процесі його генерації, а не чекають на іконку завантаження.

Я використав localStorage для історії чату. Це робить застосунок швидким і не потребує бекенду.

Вивчені уроки:

  • Виправлення граничних випадків.
  • Фокус на UX.
  • Управління станом.
  • Захист виводу AI.

Ці деталі важливіші за саму модель AI.

Створюйте подібні проєкти для свого портфоліо. Ви опануєте роботу з API, UI-дизайн та управління станом.

Яку функцію ви б додали?

  • Голосове введення.
  • Завантаження файлів.
  • Пам'ять.

Пишіть у коментарях.

Джерело: https://dev.to/codehuntersharath/i-built-a-modern-ai-assistant-using-html-css-and-javascript-4ca8 Відео: https://youtu.be/nbFKG_6DkSE Додаткова спільнота для навчання: https://t.me/GyaanSetuAi