SAYA MEMBINA PEMBANTU AI MODEN

Kebanyakan tutorial AI terlalu ringkas. Ia hanya menunjukkan panggilan API asas dan respons. Saya mahukan aplikasi yang sebenar.

Saya membina pembantu AI dengan vanilla HTML, CSS, dan JavaScript.

Ciri-ciri utama:

  • Respons secara penstriman.
  • Mod gelap dan terang.
  • Markdown dan penonjolan sintaks (syntax highlighting).
  • Pengekalan sejarah sembang.
  • Pengendalian ralat dan logik cubaan semula.

Timbunan teknologi (tech stack):

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

Keselamatan adalah keutamaan. Saya menggunakan DOMPurify untuk membersihkan respons AI. Ini dapat mencegah risiko keselamatan.

Pengalaman pengguna adalah penting. Saya menambah kandungan penstriman. Pengguna dapat melihat teks semasa ia dijana. Mereka tidak perlu menunggu ikon pemuatan.

Saya menggunakan localStorage untuk sejarah sembang. Ini menjadikan aplikasi lebih pantas. Ia tidak memerlukan backend.

Pengajaran yang diperoleh:

  • Selesaikan kes terpinggir (edge cases).
  • Fokus pada UX.
  • Urus keadaan (state).
  • Amankan output AI.

Perincian ini lebih penting daripada model AI itu sendiri.

Bina projek seperti ini untuk portfolio anda. Anda akan mempelajari API, reka bentuk UI, dan pengurusan keadaan (state management).

Apakah ciri yang akan anda tambah?

  • Input suara.
  • Muat naik fail.
  • Memori.

Beritahu saya di ruangan komen.

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