Danh sách Quiz
!"#$%%&'()*
+,$-*./)0+-.(12'3$456$.7898:;;<8=>?@ABC
8%*(.?"D8-8!$.EF8=G8?HI!=!JKLMB
@NOP!=
E6!QB!4Q1!Q =JQ!=RBE)=!I5R!S+=PJ8T
$%.?U/V+WVXVY+O
$J-.$'Z.[)E8\8BA\J
:J*!=!O
@O#$%%&'()*+,$-*./)0+-.(12'3$456$.7
8!O#\8?]?8^_`B8>F97
aJ9bacO
^O+=#?8@d7ea"O
f #?e7E!J
f #+ghijN?7E!J
%?O+=#j]?7
f8^k8dl@8a=m8O
#*?n"oRL>p@AB7
#*MB"q@"D8^Sgh?7
rJ8"#?e78\8BO
)MO#3F??E%J7
!R!!=!O#1s=bO+!nB@S@^`C^^8C
8^98?7
-O#3F?8C]?8sR^7
c@;I:;;;ERt!8u:;;;J
#v>87O1F8E:O:JwS@lxC)88E:yOzJCZTEzO:yJ
)eO#?7E!=8J
{JP!O
#+8L"p-8!-!$%.|^888_`7
J}4V)-j*~.V%t'$ZE@•qCJ
€S8B=e9%Ce#v>87
@O#??n"7
Z•!‚?"8ƒeE8Q=J)c=8O
#j‚??@ABCS"L@dTE%)-I„%-I…5%C†a;3J7
4TOdl!! eQF8E!C=8N8JQ#B?7C
#Kƒ7
GBTE88!JO
f #jƒFSEP!1!tJ7wS@l')ƒ?x
f #KƒF8E4-6!J7w'PPx
f #-\=iƒE!B!!!J7w')x
+‚:?#(7
+J+*‡+)ˆ)-4.)*()*EXVY++*&U*‰J
j"L#?7C!=8T"!=%'4II8!!!e„4')O
Š!RO8C!6O‹:O:‹Œ‹:yOz‹Œ
‹zO:y‹C!!!!.8!!y{•O8CIIƒ
?=!tO"!C!!-O
"!C"!B%!!!O"!C]BO‹Ž‹
•
!=h=b8-8!$.••.8!-!!••E.8!rI1!!R$..8!J‘
j*’)-=G8=!!RB
f ?!!6@MT
f )ƒ!!!!.8!!y{i!tu!O=G8!!8\=8E!"!==8
FSQ=!B!!!Je?
f jsebO=“Ž:zaRE$%.8eL”Cp‘9@•
!46s!!@d@“ŽjJ
!=?O
Š8!3!B!O‹8!I8‹C8!!y{O‹–—‹C =C!8C!!=•
VU[€~.j*’)-??HI!=!
ZJ*.˜)*™jš›V(
+!Bd"!y{œ"œV6t!!'"•!V6t8^ž–8—
^8B?O
#?R98%)-7C#?R98„%-7C#4‚7C#Kƒ7
+ƒ!!I8!@8?)kCdlI"!Ÿ8
5Jj *V‰›V$)6¡)-E+*~)-t¢.#6$()*3£V7J
jF8==!"L¤V6t?H
)8T$%.kE{;:I{;rI{azI¥RRJCdlF8"^j*’)-!=!?S@l
€S$%.!Bp!!E5)1JC"+'64@88jF8"8¦@S!Bp!
jd=\>?Ogƒ8!!y{N>e!=!?
1!!a!#?7O!!?"!y{Cd–8—
PJ$#+*§)*4¨$ijš*©%()*7
-\8B"9b=”8|O
f V=#(E8\FSJ7
f !R!#3F?ghIN7
f 88!#jƒFSEP!1!tJ7
f +Tv>8E:O:C:yOzCzO:yJ
f )#?7
-TG8!=II8!!!88hª!!!!.8!!y{i!t
-JVKI$++544..t.U
%sqO+I+=Q5!@d#?7
P8ŸC«{¥O:CkN!B"=
*J6.˜)j*$.
jª65$Z35Oœ=!E!=JCO=!S=!B
E"!=J
Kƒ!a{¬5K.PRL?
Bấm Tải xuống để xem toàn bộ.
Preview text:
Bạn là kiến trúc sư phần mềm kiêm lập trình viên full-stack. Tạo web app tên “APP TẠO ẢNH CỦA GHI TÊN TÁC GIẢ VÀO MASTER AI” giống 100% giao diện ảnh tham chiếu sau đây, nhưng PHẢI sinh ảnh thật bằng Google AI (không dùng ảnh mẫu/placeholder). Xuất mã chạy được: Frontend
(React+TypeScript+Vite+Tailwind) + Backend proxy (Node/Express hoặc Cloud Functions) gọi API sinh ảnh. YÊU CẦU BẮT BUỘC:
A) GIAO DIỆN (giữ nguyên câu chữ)
1) Header:
- Tiêu đề: “APP TẠO ẢNH CỦA GHI TÊN TÁC GIẢ VÀO MASTER AI”
- Tagline: “Tạo ra những hình ảnh quảng cáo mỹ phẩm chuyên nghiệp và lôi cuốn.”
2) Bố cục 2 cột:
- Trái: Card “Bảng điều khiển” với 2 tab:
- “Tạo ảnh mới” (active)
- “Chỉnh sửa & Kết hợp ảnh” (inactive)
- Phải: Card “Kết quả”
• Trạng thái rỗng hiển thị đúng 2 dòng:
“Hình ảnh của bạn sẽ xuất hiện ở đây”
“Hãy bắt đầu bằng cách tạo hoặc chỉnh sửa ảnh.”
3) Trong tab “Tạo ảnh mới” giữ nguyên:
- Nhãn: “Mô tả hình ảnh (Prompt)”
- Textarea placeholder: “Ví dụ: Chai serum thủy tinh đặt trên nền đá cẩm thạch, ánh sáng mềm, phong cách tối giản...”
- Ghi chú: “Mô tả càng chi tiết, kết quả càng chính xác.”
- Bộ đếm 0/1000 (maxLength=1000).
- “Tỷ lệ khung hình”: Vuông (1:1) [mặc định], Ngang (16:9), Dọc (9:16)
- Nút lớn: “Tạo ảnh” (spinner khi loading).
4) Footer:
- “Cung cấp bởi Google Gemini API. Thiết kế cho sự sáng tạo trong ngành mỹ phẩm.”
B) BỔ SUNG KHỐI UPLOAD (đẹp mắt, thu hút)
- Đặt ngay dưới khối Prompt, trước “Tỷ lệ khung hình”.
- Tiêu đề: “Tải ảnh của bạn lên”
- Dropzone kéo-thả bo góc lớn (glassmorphism + icon upload). Nội dung:
“Kéo-thả ảnh vào đây, hoặc bấm để chọn (PNG/JPG/WEBP, ≤ 20MB).”
- Sau khi chọn: hiển thị preview lớn + thanh thông tin (tên file, dung lượng) + nút “Thay ảnh”, “Xóa”.
- Tùy chọn (toggle):
- “Khóa khuôn mặt (Face Vector Lock)” [mặc định ON khi có ảnh]
- “Xóa nền thông minh (Smart BG Removal)” [OFF]
- “Giữ chi tiết da & tóc (Beauty-preserve)” [ON]
- Cho phép 1 ảnh tham chiếu làm “Ảnh tham chiếu”.
C) CHỨC NĂNG SINH ẢNH (BẮT BUỘC CHẠY THẬT)
- Khi bấm “Tạo ảnh”, frontend gọi backend POST /api/generate với JSON:
{ promptText: string, aspectRatio: "1:1" | "16:9" | "9:16", referenceImageBase64?: string, // nếu có ảnh upload faceLock: boolean, removeBG: boolean, beautyPreserve: boolean, quality: "8k"
}
- Backend sử dụng Google AI **Image Generation** (Imagen 3 / Vertex AI Images) chứ KHÔNG dùng model text-only.
- Tạo ảnh theo prompt và aspectRatio đã chọn.
- Nếu có referenceImageBase64 & faceLock=true: dùng pipeline giữ nhận dạng (embedding khuôn mặt + identity-preserve) trước khi trả về.
- Kích thước mục tiêu: cạnh dài ~8192px (nếu API giới hạn thấp hơn, sinh ở mức tối đa rồi upscale SR phía server để đạt ~8K).
- Backend trả về:
{ imageMimeType: "image/png", imageBase64: "<...>", width, height, seed }
- TUYỆT ĐỐI KHÔNG trả về ảnh mẫu/placeholder.
D) HIỂN THỊ KẾT QUẢ
- Client chuyển base64 → Blob → URL.createObjectURL và gán vào thẻ <img>.
- Thêm các nút ngay trên ảnh:
“Tải xuống PNG”, “Tải xuống JPG”, “Sao chép link”, “Xóa”.
- Có skeleton/progress khi đang sinh ảnh. Nếu lỗi, hiển thị toast/banner rõ ràng.
E) KỸ THUẬT QUAN TRỌNG (CHỐNG LỖI “RA ẢNH MẪU”)
- Không hard-code bất kỳ URL ảnh mẫu nào.
- Nếu gọi API lỗi (401/403/429/5xx), hiển thị thông báo và KHÔNG render ảnh mặc định.
- Đặt API key ở server (ENV), bật CORS đúng origin. Không bao giờ đặt key ở client.
- Kiểm tra dữ liệu trả về: chỉ khi có imageBase64 hợp lệ mới render ảnh.
- Viết test e2e cho nút “Tạo ảnh”: mock server trả về base64, kiểm tra <img> cập nhật src.
F) TAB “CHỈNH SỬA & KẾT HỢP ẢNH”
- Giữ nguyên tên tab. Bố cục card tương tự:
- Upload “Ảnh tham chiếu (giữ khuôn mặt)”
- Textarea “Mô tả chỉnh sửa/kết hợp”
- Toggle “Khóa khuôn mặt (Face Vector Lock)”
- Chọn tỷ lệ khung hình (1:1, 16:9, 9:16)
- Nút “Tạo ảnh”
- Gọi cùng endpoint /api/generate nhưng gửi kèm referenceImageBase64 & faceLock.
G) UX/ACCESSIBILITY
- Phím tắt: Ctrl/Cmd+Enter để “Tạo ảnh”.
- Focus ring rõ, contrast ≥ 4.5:1, hỗ trợ keyboard.
H) TRIỂN KHAI
- Kèm README: npm i → npm run dev (frontend), npm run functions:dev hoặc npm run deploy (backend).
- Xóa file tạm sau 24h. Ẩn EXIF khi xuất ảnh.
