ZBUDOWAŁEM NOWOCZESNEGO ASYSTENTA AI

Większość samouczków o AI jest zbyt prosta. Pokazują jedynie podstawowe wywołanie API i odpowiedź. Chciałem stworzyć prawdziwą aplikację.

Zbudowałem asystenta AI przy użyciu czystego HTML, CSS i JavaScriptu.

Kluczowe funkcje:

  • Strumieniowanie odpowiedzi.
  • Tryb ciemny i jasny.
  • Obsługa Markdown i wyróżnianie składni.
  • Zachowywanie historii czatu.
  • Obsługa błędów i logika ponawiania prób.

Stos technologiczny:

  • HTML5 i CSS3.
  • Vanilla JavaScript.
  • Marked.js i Prism.js.
  • DOMPurify dla bezpieczeństwa.
  • Google Generative AI SDK.
  • GitHub Pages do hostingu.

Bezpieczeństwo jest priorytetem. Użyłem DOMPurify do oczyszczania odpowiedzi AI. Zapobiega to ryzykom związanym z bezpieczeństwem.

Doświadczenie użytkownika ma znaczenie. Dodałem strumieniowanie treści. Użytkownicy widzą tekst w miarę jego generowania. Nie muszą czekać na ikonę ładowania.

Użyłem localStorage do historii czatu. Dzięki temu aplikacja działa szybko i nie wymaga backendu.

Czego się nauczyłem:

  • Rozwiązywania przypadków brzegowych.
  • Skupienia na UX.
  • Zarządzania stanem.
  • Zabezpieczania wyników AI.

Te szczegóły są ważniejsze niż sam model AI.

Buduj takie projekty do swojego portfolio. Nauczysz się pracy z API, projektowania UI i zarządzania stanem.

Jaką funkcję byś dodał?

  • Wprowadzanie głosowe.
  • Przesyłanie plików.
  • Pamięć.

Daj mi znać w komentarzach.

Źródło: https://dev.to/codehuntersharath/i-built-a-modern-ai-assistant-using-html-css-and-javascript-4ca8 Wideo: https://youtu.be/nbFKG_6DkSE Opcjonalna społeczność edukacyjna: https://t.me/GyaanSetuAi