Я СОЗДАЛ СОВРЕМЕННОГО ИИ-АССИСТЕНТА
Большинство туториалов по ИИ слишком просты. В них показывают лишь базовый вызов API и ответ. Я же хотел создать полноценное приложение.
Я разработал ИИ-ассистента, используя чистый HTML, CSS и JavaScript.
Ключевые особенности:
- Потоковая передача ответов (streaming).
- Темная и светлая темы.
- Поддержка Markdown и подсветка синтаксиса.
- Сохранение истории чата.
- Обработка ошибок и логика повторных попыток.
Технологический стек:
- HTML5 и CSS3.
- Чистый JavaScript (Vanilla JS).
- Marked.js и Prism.js.
- DOMPurify для безопасности.
- Google Generative AI SDK.
- GitHub Pages для хостинга.
Безопасность — в приоритете. Я использовал DOMPurify для очистки ответов ИИ. Это предотвращает риски безопасности.
Пользовательский опыт (UX) имеет значение. Я добавил потоковую передачу контента. Пользователи видят текст по мере его генерации, а не просто ждут появления индикатора загрузки.
Для истории чата я использовал localStorage. Это делает приложение быстрым и не требует бэкенда.
Извлеченные уроки:
- Исправление граничных случаев.
- Фокус на UX.
- Управление состоянием.
- Обеспечение безопасности вывода ИИ.
Эти детали важнее, чем сама модель ИИ.
Создавайте подобные проекты для своего портфолио. Так вы освоите работу с 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