Dùng để: Viết một công cụ web gọn trong một tệp HTML, chuyển ảnh sang chuỗi Base64 và xem trước ảnh từ chuỗi đó.
Nội dung prompt
VAI TRÒ Bạn là lập trình viên front-end, thành thạo mã hóa ảnh Base64 và thiết kế giao diện tối giản. NHIỆM VỤ Viết ứng dụng web một trang chạy hoàn toàn phía client, gói gọn trong một tệp HTML duy nhất, gồm hai luồng chuyển đổi như ở ĐẦU VÀO. ĐẦU VÀO - Định dạng ảnh cần hỗ trợ: [VÍ DỤ JPG, PNG, WEBP] - Giao diện: [VÍ DỤ NỀN TỐI, TÔNG MÀU NHẤN] - Luồng một: [VÍ DỤ TẢI HOẶC KÉO THẢ ẢNH ĐỂ LẤY CHUỖI BASE64] - Luồng hai: [VÍ DỤ DÁN CHUỖI BASE64 ĐỂ XEM LẠI ẢNH] - Tiện ích kèm: [VÍ DỤ NÚT SAO CHÉP, TẢI TỆP TXT] QUY TẮC 1. Chỉ dùng HTML, CSS và JavaScript thuần, không dùng thư viện ngoài, không cần máy chủ. 2. Luồng một hiển thị ảnh xem trước, nhận diện đúng kiểu dữ liệu và xuất cả chuỗi thô lẫn thẻ ảnh đã sẵn để dán vào trình soạn thảo. 3. Luồng hai nhận cả chuỗi đầy đủ lẫn chuỗi thô, tự sửa lỗi thiếu tiền tố và báo lỗi rõ khi dữ liệu không hợp lệ. 4. Giao diện hiển thị tốt trên điện thoại và máy tính. 5. Không gọi dịch vụ ngoài, không gửi dữ liệu ảnh đi đâu. 6. Có nút sao chép nhanh và nút tải kết quả về máy. KHUÔN ĐẦU RA - Toàn bộ mã trong một tệp HTML - Ghi chú ngắn cách chạy và cách dán kết quả - Danh sách các trường hợp lỗi đã xử lý
Thay nội dung trong dấu [ ] trước khi sử dụng.
Mẹo tinh chỉnh
Công cụ một tệp tiện ở chỗ chạy được cả khi không có mạng, nên hãy giữ mọi thứ phía client. Với ảnh lớn, chuỗi Base64 rất dài, cần nút sao chép riêng và vùng hiển thị cuộn được. Nếu muốn dùng nội bộ, yêu cầu thêm tùy chọn nén ảnh trước khi chuyển để chuỗi gọn hơn.
Prompt khác cùng nhóm
Dựng ứng dụng trắc nghiệm tương tác bằng JavaScriptCho ngân hàng câu hỏi và thiết lập, nhận về app trắc nghiệm: nhiều dạng câu, đếm ngược, chấm điểm, xem lại bài và bảng điểm cao.Xem promptDựng ứng dụng quản lý thu chi cá nhânMô tả nhu cầu tài chính, nhận về app quản lý thu chi: bảng điều khiển, phân loại giao dịch, biểu đồ, mục tiêu ngân sách và sao lưu.Xem promptDựng ứng dụng web tạo hóa đơn PDF bằng Node.jsMô tả nguồn đơn hàng và quy tắc hoa hồng, nhận về kiến trúc ứng dụng Node.js xuất hai tệp PDF: bảng chi tiết và hóa đơn.Xem promptDựng ứng dụng ghi chú Markdown hai màn hìnhMô tả nhu cầu ghi chú, nhận về app hai khung soạn và xem trước, hỗ trợ bảng, khối mã, công thức và lưu trong trình duyệt.Xem promptDựng Telegram Mini App điểm danh ca làm việcMô tả ca làm và vai trò, nhận về mini app: chấm công vào ra, xác thực người dùng, xem lịch ca và trang quản trị xếp ca.Xem promptLập quy trình xử lý lỗ hổng bảo mật CVEĐưa danh sách lỗ hổng và hệ thống đang dùng, nhận về quy trình phân tích nguyên nhân, chọn mức ưu tiên và tài liệu tuân thủ.Xem promptĐóng vai kỹ sư phần mềm nhúng ô tô theo chuẩn AUTOSARĐưa bối cảnh vi điều khiển và yêu cầu, nhận về cách chia lớp phần mềm, danh sách mô-đun và điểm kiểm tra an toàn.Xem promptTạo mẫu giao diện ứng dụng trò chuyện AI cho AndroidMô tả tính năng và địa chỉ API, nhận về bản mẫu giao diện tối gồm bốn màn hình và luồng điều hướng bằng thanh cạnh trái.Xem promptDựng game đua xe 3D bằng Three.jsMô tả đường đua và chế độ chơi, nhận về game đua xe: mô phỏng vật lý, đối thủ AI, HUD đầy đủ, hiệu ứng khói và thời tiết.Xem prompt