TÔI ĐÃ XÂY DỰNG MỘT TRỢ LÝ AI HIỆN ĐẠI
Hầu hết các hướng dẫn về AI đều quá đơn giản. Chúng chỉ cho thấy một lệnh gọi API cơ bản và một phản hồi. Tôi muốn xây dựng một ứng dụng thực thụ.
Tôi đã xây dựng một trợ lý AI bằng HTML, CSS và JavaScript thuần.
Các tính năng chính:
- Phản hồi dạng streaming.
- Chế độ sáng và tối.
- Markdown và làm nổi bật cú pháp (syntax highlighting).
- Lưu trữ lịch sử trò chuyện.
- Xử lý lỗi và logic thử lại.
Tech stack:
- HTML5 và CSS3.
- Vanilla JavaScript.
- Marked.js và Prism.js.
- DOMPurify để bảo mật.
- Google Generative AI SDK.
- GitHub Pages để hosting.
Bảo mật là ưu tiên hàng đầu. Tôi đã sử dụng DOMPurify để làm sạch các phản hồi từ AI. Điều này giúp ngăn ngừa các rủi ro bảo mật.
Trải nghiệm người dùng rất quan trọng. Tôi đã thêm tính năng nội dung dạng streaming. Người dùng có thể thấy văn bản xuất hiện ngay khi nó đang được tạo ra, thay vì phải chờ đợi một biểu tượng đang tải.
Tôi đã sử dụng localStorage để lưu lịch sử trò chuyện. Điều này giúp ứng dụng chạy nhanh và không cần đến backend.
Bài học rút ra:
- Xử lý các trường hợp biên (edge cases).
- Tập trung vào UX.
- Quản lý trạng thái (state).
- Bảo mật đầu ra của AI.
Những chi tiết này quan trọng hơn cả mô hình AI.
Hãy xây dựng những dự án như thế này để đưa vào portfolio của bạn. Bạn sẽ học được về API, thiết kế UI và quản lý trạng thái.
Bạn sẽ thêm tính năng nào?
- Nhập liệu bằng giọng nói.
- Tải lên tệp tin.
- Bộ nhớ (Memory).
Hãy cho tôi biết ở phần bình luận.
Source: https://dev.to/codehuntersharath/i-built-a-modern-ai-assistant-using-html-css-and-javascript-4ca8 Video: https://youtu.be/nbFKG_6DkSE Optional learning community: https://t.me/GyaanSetuAi