𝗦𝗮𝘆𝗮 𝗠𝗲𝗺𝗯𝗶𝗻𝗮 𝗣𝗲𝗺𝗯𝗮𝗻𝘁𝘂 𝗔𝗜 𝗠𝗼𝗱𝗲𝗻

Kebanyakan tutorial AI hanya menunjukkan cara memanggil API. Saya mahu membina aplikasi sebenar. Saya menggunakan vanilla HTML, CSS, dan JavaScript.

Aplikasi ini merangkumi ciri-ciri berikut:

  • UI Responsif
  • Mod Gelap dan Terang
  • Respons penstriman
  • Render Markdown
  • Penonjolan sintaks
  • Sejarah sembang
  • Pengendalian ralat
  • Deployment GitHub Pages

Saya menggunakan alatan ini:

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

Saya memberi tumpuan kepada keselamatan. Saya menggunakan DOMPurify untuk membersihkan respons AI. Ini dapat mencegah risiko keselamatan.

Saya memberi tumpuan kepada pengalaman pengguna. Aplikasi ini menstrim teks semasa ia dijana. Anda mendapat maklum balas serta-merta. Anda tidak perlu menunggu ikon pemuatan.

Saya menambah Prism.js untuk blok kod. Ini menambah label bahasa dan butang salin.

Saya menggunakan localStorage untuk sejarah sembang. Perbualan anda kekal selepas anda menyegarkan halaman. Ia pantas dan tidak memerlukan backend.

Saya menambah logik cubaan semula dan mesej ralat. Ini menjadikan aplikasi lebih stabil.

Projek AI mengajar anda banyak kemahiran:

  • Integrasi API
  • Reka bentuk UI
  • Pengurusan keadaan
  • Pengalaman pengguna

Bina projek seperti ini untuk portfolio anda. Ia menunjukkan anda mempunyai kemahiran praktikal.

Apakah ciri yang patut saya tambah seterusnya?

  • 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 Komuniti pembelajaran pilihan: https://youtu.be/nbFKG_6DkSE