𝗦𝗮𝘆𝗮 𝗠𝗲𝗺𝗯𝗮𝗻𝗴𝘂𝗻 𝗔𝘀𝗶𝘀𝘁𝗲𝗻 𝗔𝗜 𝗠𝗼𝗱𝗲𝗿𝗻

Kebanyakan tutorial AI hanya menunjukkan cara memanggil API. Saya ingin membangun aplikasi nyata. Saya menggunakan vanilla HTML, CSS, dan JavaScript.

Aplikasi ini mencakup fitur-fitur berikut:

  • UI Responsif
  • Mode Gelap dan Terang
  • Respons streaming
  • Rendering Markdown
  • Syntax highlighting
  • Riwayat chat
  • Penanganan error
  • Deployment GitHub Pages

Saya menggunakan alat-alat ini:

  • HTML5 dan CSS3
  • Vanilla JavaScript
  • Marked.js
  • DOMPurify
  • Prism.js
  • Google Generative AI SDK

Saya fokus pada keamanan. Saya menggunakan DOMPurify untuk membersihkan respons AI. Ini mencegah risiko keamanan.

Saya fokus pada pengalaman pengguna. Aplikasi ini melakukan streaming teks saat teks tersebut dibuat. Anda mendapatkan umpan balik instan. Anda tidak perlu menunggu ikon pemuatan.

Saya menambahkan Prism.js untuk blok kode. Ini menambahkan label bahasa dan tombol salin.

Saya menggunakan localStorage untuk riwayat chat. Percakapan Anda tetap ada setelah Anda menyegarkan halaman. Ini cepat dan tidak memerlukan backend.

Saya menambahkan logika retry dan pesan kesalahan. Ini membuat aplikasi menjadi stabil.

Proyek AI mengajarkan Anda banyak keterampilan:

  • Integrasi API
  • Desain UI
  • Manajemen state
  • Pengalaman pengguna

Bangunlah proyek seperti ini untuk portofolio Anda. Ini menunjukkan bahwa Anda menguasai keterampilan praktis.

Fitur apa yang harus saya tambahkan selanjutnya?

  • 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 Komunitas belajar opsional: https://youtu.be/nbFKG_6DkSE