Zbudowałem nowoczesnego asystenta AI
Większość samouczków AI pokazuje jedynie, jak wywołać API. Chciałem zbudować prawdziwą aplikację. Użyłem czystego HTML, CSS i JavaScript.
Aplikacja zawiera następujące funkcje:
- Responsywny interfejs użytkownika (UI)
- Tryby ciemny i jasny
- Strumieniowanie odpowiedzi
- Renderowanie Markdown
- Podświetlanie składni
- Historia czatu
- Obsługa błędów
- Wdrożenie na GitHub Pages
Użyłem tych narzędzi:
- HTML5 i CSS3
- Vanilla JavaScript
- Marked.js
- DOMPurify
- Prism.js
- Google Generative AI SDK
Skupiłem się na bezpieczeństwie. Użyłem DOMPurify do oczyszczania odpowiedzi AI. Zapobiega to ryzykom związanym z bezpieczeństwem.
Skupiłem się na doświadczeniu użytkownika. Aplikacja strumieniuje tekst w miarę jego generowania. Otrzymujesz natychmiastową informację zwrotną. Nie musisz czekać na ikonę ładowania.
Dodałem Prism.js do bloków kodu. Dodaje on etykiety języków oraz przyciski kopiowania.
Użyłem localStorage do historii czatu. Twoje rozmowy zostają po odświeżeniu strony. Jest to szybkie i nie wymaga backendu.
Dodałem logikę ponawiania prób i komunikaty o błędach. Dzięki temu aplikacja jest stabilna.
Projekty AI uczą wielu umiejętności:
- Integracja API
- Projektowanie UI
- Zarządzanie stanem
- Doświadczenie użytkownika (UX)
Buduj takie projekty do swojego portfolio. Pokazują one, że posiadasz praktyczne umiejętności.
Jaką funkcję powinienem dodać jako następną?
- Wprowadzanie głosowe
- Przesyłanie plików
- Pamięć
Daj mi znać w komentarzach.
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