𝗦𝗔𝗬𝗔 𝗠𝗘𝗠𝗕𝗔𝗡𝗚𝗨𝗡 𝗔𝗦𝗜𝗦𝗧𝗘𝗡 𝗔𝗜 𝗠𝗢𝗗𝗘𝗥𝗡

Kebanyakan tutorial AI terlalu sederhana. Mereka hanya menunjukkan pemanggilan API dasar dan sebuah respons. Saya menginginkan aplikasi yang nyata.

Saya membangun asisten AI dengan vanilla HTML, CSS, dan JavaScript.

Fitur utama:

  • Respons streaming.
  • Mode gelap dan terang.
  • Markdown dan syntax highlighting.
  • Persistensi riwayat chat.
  • Penanganan error dan logika retry.

Tech stack:

  • HTML5 dan CSS3.
  • Vanilla JavaScript.
  • Marked.js dan Prism.js.
  • DOMPurify untuk keamanan.
  • Google Generative AI SDK.
  • GitHub Pages untuk hosting.

Keamanan adalah prioritas. Saya menggunakan DOMPurify untuk membersihkan respons AI. Ini mencegah risiko keamanan.

Pengalaman pengguna sangat penting. Saya menambahkan konten streaming. Pengguna dapat melihat teks saat sedang dibuat. Mereka tidak perlu menunggu ikon loading.

Saya menggunakan localStorage untuk riwayat chat. Ini membuat aplikasi menjadi cepat. Aplikasi ini tidak memerlukan backend.

Pelajaran yang didapat:

  • Perbaiki edge cases.
  • Fokus pada UX.
  • Kelola state.
  • Amankan output AI.

Detail-detail ini lebih penting daripada model AI itu sendiri.

Bangunlah proyek seperti ini untuk portofolio Anda. Anda akan mempelajari API, desain UI, dan manajemen state.

Fitur apa yang akan Anda tambahkan?

  • Input suara.
  • Unggah file.
  • Memori.

Beritahu saya di kolom komentar.

Sumber: https://dev.to/codehuntersharath/i-built-a-modern-ai-assistant-using-html-css-and-javascript-4ca8 Video: https://youtu.be/nbFKG_6DkSE Komunitas belajar opsional: https://t.me/GyaanSetuAi