AI Prompt Builder

Ba mẫu prompt gợi ý trong AI Photo Studio—combo sản phẩm, ảnh thể thao, KOL cầm hàng—có thể chỉnh tham số trước khi tạo ảnh.

Trên AI Photo Studio, cuối phần Prompt có khối Prompt Builder: ba nút mẫu giúp bạn không phải viết prompt trống từ đầu. Đây là tiện ích riêng của Photo Studio (khác với nút AI trong các ô soạn văn dài).

Vị trí trong UI

features/ai/prompt/AiPromptBuilder.tsx - hiện cuối section Prompt của trang AI Photo Studio.

<AiPromptBuilder onPromptChange={setPrompt} selectedItems={selectedItems} />

Mẫu prompt

3 nút mẫu hiển thị trong cùng một hàng:

1. Tạo combo sản phẩm (`combo`)

Tham số: không có.
Cách dùng: click button → onPromptChange(template.value + namesSuffix) ngay (không mở popover).
namesSuffix: tự động sinh từ selectedItems - chỉ lấy item type === "image_url" (sản phẩm trong catalog), gom tên duy nhất, format \nDanh sách sản phẩm: \n- A\n- B.
Nội dung prompt: tạo ảnh combo sản phẩm thương mại trong studio, nền trắng, ánh sáng softbox, bóng đổ mềm, ảnh e-commerce chuẩn.

2. Ảnh quảng cáo thời trang thể thao (`fashion-editorial`)

Tham số: 2 placeholder
- [SPORT_NAME] - tên môn thể thao.
- [SPORT_PLACE] - địa điểm chụp.
Cách dùng: click → mở <Popover> cho user nhập 2 tham số → click Xong → replace placeholder trong template → onPromptChange(finalPrompt).
Nội dung prompt: prompt fashion editorial dài với chủ đề, nhân vật, bối cảnh, ánh sáng, kỹ thuật nhiếp ảnh, từ khoá cho AI.

3. Người nổi tiếng cầm sản phẩm (`celebrity-ad`)

Tham số: 1 placeholder
- [KOL_NAME] - tên nhân vật/KOL.
Cách dùng: tương tự (mở popover).
Nội dung prompt: tạo ảnh quảng cáo phong cách studio với nhân vật cầm và giới thiệu sản phẩm, bố cục chuyên nghiệp, nền sáng và tập trung vào sản phẩm.

Logic thay tham số

const replaceParams = (template, params) => {
  Object.entries(params).forEach(([key, value]) => {
    const escapedKey = key.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
    const placeholder = `\\[${escapedKey}\\]`;
    const regex = new RegExp(placeholder, "g");
    result = result.replace(regex, value);
  });
};

Match [KEY_NAME] và thay bằng giá trị người dùng nhập.

Thành phần UI

<Popover placement="rightBottom" trigger="click"> chứa form params.
Mỗi param: <Input addonBefore={param.label}> width 320px.
Nút Xong primary để confirm.
Click ngoài popover → reset state (setPopoverVisible(false); setSelectedTemplate(null); setParamValues({});).

Khi nào dùng

Người dùng mới chưa biết viết prompt → click mẫu prompt.
Cần giữ consistency giữa các lần tạo ảnh - dùng cùng template.
Combo prompt: tự động gom tên sản phẩm vào suffix.

Các lối đi từ trang

AI Photo Studio - parent page.

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

Mẫu prompt được định nghĩa trong code: admin không tự thêm/sửa mẫu từ giao diện.
combo namesSuffix chỉ lấy type === "image_url": nếu user chỉ kéo thả ảnh từ máy local (image_data), prompt sẽ không tự thêm danh sách tên sản phẩm.
Prompt có thể cần chỉnh lại trước khi tạo ảnh: người dùng nên đọc lại prompt sau khi áp dụng mẫu để phù hợp với bối cảnh sản phẩm.
Chỉ Photo Studio dùng Prompt Builder: các ô soạn văn có AI Tools dùng cơ chế khác, không có ba mẫu này.

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

Giống AI Photo Studio: ai vào được Photo Studio thì dùng được Prompt Builder; cần gói bật Photo Studio.

AI Prompt Builder

On this page