05/10/2026 · VietTechies · Biên tập
Quá trình xây dựng phần mềm tương tác thường đòi hỏi các gói mã nguồn JavaScript cồng kềnh, trình biên dịch phức tạp và vô số thư viện bên thứ ba. Tuy nhiên, một ứng dụng AI hỗ trợ lập trình đã chứng minh rằng một ứng dụng web dạng truyền dữ liệu trực tiếp (streaming) hoàn chỉnh có thể nằm gọn trong một tệp HTML duy nhất rộng 92 kilobyte mà không cần bước đóng gói (build), framework hay thư viện npm nào. Được phát triển trực tiếp trên một thiết bị di động cấu hình thấp, ứng dụng này vận hành hoàn toàn dựa vào các tiêu chuẩn web gốc cùng cơ chế xử lý backend serverless.
Kiến trúc frontend trong một tệp duy nhất
Toàn bộ giao diện người dùng của ứng dụng được gói gọn trong một tệp tĩnh duy nhất, bao gồm khoảng 500 dòng CSS, 200 dòng cấu trúc HTML và 1.400 dòng JavaScript thuần. Ứng dụng cung cấp đầy đủ các tính năng như xác thực tài khoản qua Supabase, chế độ sáng và tối, nén hình ảnh, hiển thị định dạng markdown, xử lý dữ liệu âm thanh đầu vào và xuất lịch sử trò chuyện.
Thay vì tích hợp thư viện biểu tượng hoặc framework CSS từ bên thứ ba, ứng dụng sử dụng các thiết lập thiết kế (design token) gốc và các phần tử SVG trực tiếp. Quá trình cập nhật trạng thái loại bỏ hoàn toàn mô hình DOM ảo, thay vào đó sử dụng các hàm JavaScript gọn nhẹ để trực tiếp làm mới từng phần tử cụ thể trên trang mỗi khi dữ liệu thay đổi.
Serverless Worker và cơ chế streaming gốc
Việc truyền dữ liệu văn bản theo thời gian thực từ các mô hình trí tuệ nhân tạo thường phải nhờ đến các thư viện phía client. Trong dự án này, trình duyệt tự xử lý các phản hồi dạng streaming bằng yêu cầu fetch gốc kết hợp với bộ đọc ReadableStream nhằm phân tích các sự kiện gửi từ máy chủ (Server-Sent Events).
Bộ não xử lý nằm ở backend dưới dạng một Cloudflare Worker serverless. Khi nhận được yêu cầu nhập liệu, worker sẽ đối chiếu đoạn văn bản với khung quy tắc gồm 11 điều để lọc bỏ nội dung độc hại, lựa chọn chuỗi mô hình ngôn ngữ phù hợp, tìm kiếm kết quả web thời gian thực qua Tavily (nếu cần), rồi truyền kết quả đã định dạng trở lại giao diện đơn tệp.
Tối ưu hiệu năng từ giới hạn phần cứng
Dự án cho thấy việc phát triển ứng dụng dưới những giới hạn phần cứng nghiêm ngặt—cụ thể là lập trình trên một điện thoại thông minh cấu hình thấp không thể chạy các máy chủ Node tốn bộ nhớ—đã buộc người phát triển phải đưa ra các quyết định kiến trúc tối giản. Việc khai thác tối đa các tính năng tiêu chuẩn của trình duyệt như bộ nhớ web gốc, đối tượng Blob và API khay nhớ tạm (clipboard) giúp frontend tải xong trong chưa đầy một giây ngay cả trên kết nối mạng chậm, trở thành một mẫu hình thiết thực cho quy trình phát triển phần mềm với chi phí cực thấp.
Ảnh minh họa do AI tạo, không phải ảnh tư liệu.
Nguồn: Iam 12 .I Built an AI Web App in a Single 92KB HTML File. No React. No Build Step. No Excuses.