AI Photo Studio

Trang Photo Studio—tạo ảnh sản phẩm từ ảnh tham chiếu và mô tả; cần gói bật Photo Studio.

AI Photo Studio (/aitool/product-photo) cho phép tạo ảnh thương mại sản phẩm bằng AI: chọn sản phẩm, thêm ảnh, nhập mô tả → hệ thống gọi dịch vụ ghép ảnh → hiển thị ảnh kết quả.

AI Tools > Photo Studio.

Mục menu chỉ hiện khi gói đã bật AI và Photo Studio (xem tổng quan AI).

Giao diện tổng thể

<FormLayoutContainer> chia 2 cột (span=14 left + right sidebar):

Trái (px-4):
- Section Chọn sản phẩm & hình ảnh liên quan - <ProductSearch> + grid 2/4/5 cột thumbnail + drag-drop zone (hoặc click chọn file PNG/JPG/JPEG).
- Section Prompt mô tả thêm cho kết quả tạo ra - <Input.TextArea> autoSize 8-12 row + <AiPromptBuilder> (3 preset: Combo / Fashion editorial / Người nổi tiếng) + nút Tạo ảnh.
Phải sidebar <FormLayoutCard title="Kết quả"> - hiện ảnh kết quả (loading state với <AiRendingIndicator>, hoặc danh sách result.result[]).

Selected items

State selectedItems: SelectedItem[] với:

type SelectedItem = {
  name: string;
  type: "image_url" | "image_data";  // URL từ product hoặc base64 từ máy local
  content: string;
};

Logic add:

Click <ProductSearch> chọn sản phẩm → getProductInfo(productId) lấy avatar/variant image → push entry image_url.
Drag-drop hoặc click drop zone → addImageFiles(files) đọc base64 với FileReader.readAsDataURL → push entry image_data (data:<mime>;base64,<data>).
De-duplicate theo content. Click trash icon trên thumbnail xoá entry.
Click Chọn hình này trên kết quả → ảnh kết quả được push lại vào selectedItems để dùng iter tiếp.

Submit (`handleSubmit`)

Tách selectedItems thành 2 list: imageUrls[] (cho image_url) và imageDataList[] (cho image_data, dạng {mime_type, data} parse từ data URL).
Gọi new AiTextToImageRepository().photoMixing({prompt, image_urls, image_data_list}).
Endpoint thực tế: POST /aitexttoimage/photomix.
result: AiTextToImageModel chứa result[]. Mỗi item là {type: "text" | "image", data: string}.
Lỗi: result.error.errors[0] hiện trong sidebar với icon <IconPhotoX>.

Validate

selectedItems.length === 0 → message error "Vui lòng chọn ít nhất 1 sản phẩm".
imageUrls.length === 0 && imageDataList.length === 0 → error "Không tìm thấy ảnh hợp lệ để gửi".
Nút Tạo ảnh disable khi selectedItems.length === 0 || prompt.trim().length === 0.

Tải xuống ảnh

Click Tải xuống trên kết quả:

Nếu data URL (data:) - decode base64 → Blob → trigger download với mime guess.
Nếu HTTP URL - fetch blob → download. File name từ pathname URL hoặc fallback ai-result.png.

Khi nào dùng

Tạo ảnh combo sản phẩm với background studio chuyên nghiệp.
Tạo ảnh quảng cáo thời trang thể thao với prompt fashion editorial preset.
Tạo ảnh KOL/người nổi tiếng cầm sản phẩm.
Iter sửa ảnh: chọn ảnh kết quả làm input cho lần generate tiếp.

Các lối đi từ trang

AI Settings - cấu hình OpenAI/Gemini key.
AI Request Log - xem token/request đã consume.
AI Prompt Builder - chi tiết preset prompt.

Lưu ý - Lỗi thường gặp

Trang trắng hoặc không vào được: gói chưa bật Photo Studio, hoặc đường dẫn không đúng trang (product-photo).
Chỉ làm việc với image/: addImageFiles filter file.type.startsWith("image/"). File khác bỏ qua.
Hình hiện No Image: getProductInfo(productId) không tìm thấy avatar - product cũ chưa có ảnh.
API timeout / fail: gọi LLM endpoint mất 10-30s là bình thường. <AiRendingIndicator> hiện trong khi chờ.
Tải xuống fail với CORS: nếu URL ngoài domain blocking CORS, fetch fail. Right-click ảnh → Save as.
Token quota exceeded: nếu OpenAI/Gemini quota exhaustion, error trả về - check AI Request Log.
Cờ AI_PHOTO (9002) là dự phòng: trên giao diện đang dùng Photo Studio (9004).

Ai được xem và chỉnh?

Vào trang và tạo ảnh: thường mọi tài khoản admin đã đăng nhập đều có thể dùng khi gói cho phép; tạo ảnh chỉ thành công nếu đã cấu hình khóa OpenAI/Gemini trong AI Settings.
Thấy mục trên menu: cần gói bật nhóm AI và Photo Studio.