Я створив сучасного ШІ-асистента
Більшість туторіалів з ШІ показують лише те, як викликати API. Я хотів створити справжній застосунок. Я використовував чистий HTML, CSS та JavaScript.
Застосунок має такі можливості:
- Адаптивний інтерфейс
- Темна та світла теми
- Стрімінгові відповіді
- Рендеринг Markdown
- Підсвічування синтаксису
- Історія чату
- Обробка помилок
- Розгортання на GitHub Pages
Я використовував ці інструменти:
- HTML5 та CSS3
- Vanilla JavaScript
- Marked.js
- DOMPurify
- Prism.js
- Google Generative AI SDK
Я зосередився на безпеці. Я використовував DOMPurify для очищення відповідей ШІ. Це запобігає ризикам безпеки.
Я зосередився на користувацькому досвіді. Застосунок передає текст потоком під час його генерації. Ви отримуєте миттєвий відгук. Вам не потрібно чекати на іконку завантаження.
Я додав Prism.js для блоків коду. Це додає мітки мов та кнопки копіювання.
Я використовував localStorage для історії чату. Ваші розмови зберігаються навіть після оновлення сторінки. Це швидко і не потребує бекенду.
Я додав логіку повторних спроб та повідомлення про помилки. Це робить застосунок стабільним.
Проєкти з ШІ навчають багатьом навичкам:
- Інтеграція API
- Дизайн інтерфейсу
- Управління станом
- Користувацький досвід
Створюйте подібні проєкти для свого портфоліо. Це показує, що ви володієте практичними навичками.
Яку функцію мені варто додати наступною?
- Голосове введення
- Завантаження файлів
- Пам'ять
Пишіть у коментарях.
Source: https://dev.to/codehuntersharath/i-built-a-modern-ai-assistant-using-html-css-and-javascript-4ca8 Optional learning community: https://youtu.be/nbFKG_6DkSE