เคยเจอไหมครับ ของชิ้นเดียวแต่ต้องถ่ายภาพใหม่ทุกสี ทุกแคมเปญ จะยิงแอดทีก็ขอภาพใหม่อีกที บทความนี้แอดจะพาเพื่อน ๆ สร้างภาพสินค้าด้วย AI แบบทำได้จริง ผ่าน AI Product Image Pipeline ด้วย OpenAI API กับ GPT Image 2.5 โดยยึดหลักเดียวคือ Generate Product Once → Reuse Everywhere ปั้นสินค้าครั้งเดียว แล้วใช้ซ้ำให้คุ้มที่สุด
💡 ถ้าอยากได้ระบบ AI สร้างภาพสินค้า แบบนี้ไปใช้กับร้านหรือแบรนด์ของคุณเลย ทีม BorntoDev รับทำระบบสร้างภาพสินค้า AI ให้ครบตั้งแต่ Prompt, Pipeline จนถึงหน้าเว็บ หรือถ้าอยากให้ทีมทำเองได้ เราก็ รับสอนแบบ In-house ให้ทั้งองค์กรครับ (รายละเอียดอยู่ท้ายบทความ)
สิ่งที่เราจะสร้าง
แบรนด์สมมติของเราชื่อ NORTHLINE (Everyday Carry) คอลเลกชัน Basecamp 01 มีของอยู่ 3 ชิ้น
- Loop Hoodie : Hoodie
- Field Tote : Tote Bag
- Grid Case : Phone Case
ปลายทางคือ Demo App (React + Express) ที่ทำครบทุก Use Case ตั้งแต่กดสร้างภาพ ยันขึ้นหน้าเว็บจริง
รูปที่ 1 หน้า Hero ของ Demo App พื้น #fafaf8 ตัวอักษรดำ ไม่มี Gradient
Architecture Overview
User → React → Express API → OpenAI API → GPT Image 2.5
→ Product Assets ─┬─ Gallery / Product Detail
├─ Campaign Banner / Landing Page
└─ Social Contentย้ำจุดเดียวครับ API Key อยู่ฝั่ง Backend เท่านั้น อย่าเผลอโยนไปไว้ฝั่ง Frontend เพราะใครเปิด DevTools ก็เห็น
client/src/components/ # Gallery, Generator, CampaignSwitcher, ReferenceUploader
server/routes/images.js
server/services/openai-image.service.js
generated/{products,transparent,variants,campaigns}/Setup OpenAI API
npm i openai express multer dotenv
# .env
OPENAI_API_KEY=sk-...
IMAGE_MODEL=gpt-image-2.5-flareGPT Image 2.5 มีให้เลือกสองตัว gpt-image-2.5-flare เร็ว เหมาะกับตอนนั่ง iterate ลองไปเรื่อย ๆ ส่วน gpt-image-2.5-sunburst คุณภาพสูงกว่า เก็บไว้ใช้ตอนทำ Final แอดแนะนำให้เก็บชื่อโมเดลไว้ใน env จะได้สลับโดยไม่ต้องไล่แก้โค้ด
// server/services/openai-image.service.js
import OpenAI, { toFile } from "openai";
import fs from "node:fs/promises";
const client = new OpenAI(); // อ่าน OPENAI_API_KEY จาก env
const MODEL = process.env.IMAGE_MODEL;
const toBuffer = (res) => Buffer.from(res.data[0].b64_json, "base64");Generate Product Image
Prompt ที่ดีต้องบอกให้ครบว่า Product Type, Shape, Material, Color, Surface, Angle, Lens, Lighting, Background, Composition และ Style เป็นแบบไหน ส่วน Size กับ Quality ปล่อยเป็นหน้าที่ของ parameter เขียนกำกวมเมื่อไหร่ โมเดลเดาเองทันที
NORTHLINE Loop Hoodie, oversized pullover, brushed cotton fleece,
washed charcoal, white embroidered "N" on left chest. Front view,
85mm lens, soft light from left, light grey seamless background,
centered, 10% padding, clean catalog style, no props.
export async function generateProduct({ prompt, transparent, size = "1024x1536" }) {
const res = await client.images.generate({
model: MODEL,
prompt,
size,
quality: "high",
output_format: "png",
background: transparent ? "transparent" : "opaque",
});
return toBuffer(res); // Base64 → Buffer
}
export async function saveImage(buffer, folder, name) {
const file = `generated/${folder}/${name}-${Date.now()}.png`;
await fs.writeFile(file, buffer);
return file;
}
Generate Transparent Product Asset
Transparent PNG ดีตรงที่วางได้ทุกที่ครับ Product Card, Hero Banner, Marketplace Listing, Seasonal Campaign ยัน Ad Creative ใช้ไฟล์เดียวจบ
แต่มีกับดักอยู่ Prompt มีผลเหนือ parameter ถ้าเราเผลอบรรยายฉาก (studio, floor, shadow) ก็มีสิทธิ์ได้พื้นหลังติดมา ทั้งที่ส่ง background: “transparent” ไปแล้ว เพราะงั้นเขียนแบบ Isolated ไปเลย
NORTHLINE Field Tote, natural canvas, black webbing straps, front view,
single isolated product, fully padded in frame, fully transparent
background, no backdrop, no floor, no shadow, no text, no watermark.
const png = await generateProduct({ prompt: totePrompt, transparent: true, size: "1024x1024" });
await saveImage(png, "transparent", "field-tote");ก่อนเอาไปใช้ เช็ค Alpha Channel สักนิดครับ (ใช้ Pillow)
from PIL import Image
img = Image.open("field-tote.png")
assert img.mode == "RGBA", "ไม่มี Alpha Channel"
clear = img.getchannel("A").histogram()[0]
print(f"transparent: {clear / (img.width * img.height):.0%}")ถ้าได้ 0% แปลว่าพื้นหลังไม่โปร่งใส กลับไปแก้ Prompt ใหม่ ของแอดรอบนี้วัดได้ 43% ถึง 58% ถือว่าผ่าน
Generate from Reference Image
Upload hoodie-reference.jpg → Frontend → Backend (multipart)
→ Reference Image + Prompt → OpenAI API → GPT Image 2.5
→ Generated Product Image → E-Commerce Websiteฝั่ง Service เขียนแบบนี้
export async function editFromReference(file, prompt, opts = {}) {
const image = await toFile(file.buffer, file.originalname, { type: file.mimetype });
const res = await client.images.edit({
model: MODEL, image, prompt, quality: "high", output_format: "png", ...opts,
});
return toBuffer(res);
}ส่วน Route ที่รับ multipart
// server/routes/images.js
const upload = multer({ storage: multer.memoryStorage(), limits: { fileSize: 10e6 } });
router.post("/reference", upload.single("reference"), async (req, res) => {
const { prompt, campaign } = req.body;
const png = await editFromReference(req.file, `${campaign} campaign. ${prompt}`);
res.json({ url: "/" + (await saveImage(png, "campaigns", campaign)) });
});ข้อสำคัญคือ Prompt ต้องแยกให้ชัดว่าอะไรล็อก อะไรเปลี่ยนได้
Keep exactly: hoodie shape, silhouette, fabric, main color, logo and
graphic position. Change only: background, lighting, composition, mood.
รูปที่ 4 Reference Uploader มี Drag & Drop, Preview, Campaign และ Prompt ที่ล็อกตัวสินค้า
รูปที่ 5 ผลลัพธ์จาก images.edit รูปทรง ผ้า สี และตำแหน่งโลโก้คงเดิม เปลี่ยนเฉพาะฉากกับแสง
Generate Product Variants
ใช้ Reference ตัวเดิม เปลี่ยนแค่สี วนลูปเอาเลย
for (const color of ["black", "grey", "navy", "cream"]) {
const png = await editFromReference(file,
`Recolor only the hoodie fabric to ${color}. Keep shape, stitching,
logo color and placement identical. Isolated product.`,
{ background: "transparent" });
await saveImage(png, "variants", `loop-hoodie-${color}`);
}Phone Case กับ Tote ก็ใช้ลูปเดียวกันครับ แต่บอกตรง ๆ ว่า AI ยังรักษารายละเอียดได้ไม่ 100% ตะเข็บเพี้ยน โลโก้ขนาดไม่เท่าเดิม ลายเลื่อน เจอได้หมด ทุก Variant เลยต้องผ่านสายตาคนก่อน Publish เสมอ
Reuse Product Across Campaigns
loop-hoodie.png ไฟล์เดียวใช้ได้ทุก Campaign เปลี่ยนแค่ Background, Layout, Typography, Color Theme กับ Copy
export const CAMPAIGNS = {
studio: { bg: "#f4f4f2", ink: "#111", copy: "Everyday layers" },
summer: { bg: "#f6e7c8", ink: "#3a2a10", copy: "Light for long days" },
street: { bg: "#1d1d1d", ink: "#eee", copy: "Built for the city" },
blackfriday: { bg: "#000", ink: "#ffd400", copy: "30% off" },
};อยากได้ Back to School หรือ New Collection ก็แค่เพิ่ม key เข้าไป ได้ทั้งลดค่า API, Shape ไม่เพี้ยนข้าม Campaign และใช้ Asset ชุดเดียวทุก Channel มุมแอดมองว่าตรงนี้แหละคือจุดที่ประหยัดงบจริง งานที่เคยต้องจ้างถ่ายใหม่ทุกแคมเปญ เหลือแค่แก้ค่าในออบเจ็กต์
Build Product Mockup
Generate Graphic → Transparent PNG → Blank Product
→ Resize / Position → Composite → Product MockupGenerate กราฟิก “line-art mountain badge ‘BASECAMP 01’, isolated” ด้วย transparent: true แล้วค่อย Composite ทับเสื้อเปล่า
from PIL import Image
tee = Image.open("blank-tee.png").convert("RGBA")
art = Image.open("basecamp-badge.png").convert("RGBA")
art = art.crop(art.getchannel("A").getbbox()) # ตัดขอบใส
art.thumbnail((int(tee.width * 0.32),) * 2) # กว้าง ~32% ของเสื้อ
pos = ((tee.width - art.width) // 2, int(tee.height * 0.28))
tee.alpha_composite(art, pos)
tee.save("mockup-tee-basecamp.png")Hoodie กับ Tote ใช้กราฟิกตัวเดิมได้เลย ปรับแค่สัดส่วน (เอะ..ง่ายไปไหมเนี่ย ฮ่า ๆ)
Build Minimal E-Commerce Demo
หน้าเว็บมีของพวกนี้ครับ
- Hero: “AI Product Studio” + CTA “Try Product Studio”
- Product Gallery: Image, Name, Category, Color Variant
- Campaign Switcher: Studio, Summer, Street, Black Friday
- Reference Uploader: Drag & Drop, Preview, Prompt, Style, Result
- Product Generator: ฟิลด์สินค้า + Transparent Toggle + Prompt Preview
ดีไซน์เอาเรียบ ๆ พื้น #fafaf8 ตัวอักษรดำ เว้นที่ว่างเยอะ ไม่มี Gradient ปล่อยให้ตัวสินค้าเด่นแทน
// routes/images.js (index.js mount ที่ /api/images + static /generated)
router.post("/generate", async (req, res) => {
const { prompt, transparent } = req.body;
const png = await generateProduct({ prompt, transparent });
const dir = transparent ? "transparent" : "products";
res.json({ url: "/" + (await saveImage(png, dir, "product")) });
});Campaign Switcher ที่ใช้ Asset ไฟล์เดิม
export function CampaignSwitcher() {
const [key, setKey] = useState("studio");
const c = CAMPAIGNS[key];
return (
<section className="hero" style={{ background: c.bg, color: c.ink }}>
{Object.keys(CAMPAIGNS).map((k) => (
<button key={k} aria-pressed={k === key} onClick={() => setKey(k)}>{k}</button>
))}
<h2>{c.copy}</h2>
<img src="/generated/transparent/loop-hoodie.png" alt="Loop Hoodie" />
</section>
);
}ฝั่ง Frontend ต่อ API แบบนี้
export const buildPrompt = (f) =>
`${f.name} ${f.type}, ${f.material}, ${f.color}, ${f.angle}, ${f.style}. ` +
(f.transparent ? "Isolated, transparent background, no shadow." : `${f.background} background.`);
export async function generateFromReference(file, prompt, campaign) {
const form = new FormData();
form.append("reference", file);
form.append("prompt", prompt);
form.append("campaign", campaign);
const res = await fetch("/api/images/reference", { method: "POST", body: form });
return (await res.json()).url;
}Drop zone อ่านไฟล์จาก e.dataTransfer.files[0] แล้ว Preview ด้วย URL.createObjectURL(file) ส่วน Vite ตั้ง server.proxy ให้ /api ชี้ไป Express ไม่งั้นเจอ CORS แน่นอน
Production Considerations
- Security: API Key อยู่ใน env ฝั่ง Backend ซึ่งเป็น Proxy ที่ตรวจ file type/size, auth และ rate limit
- Storage & CDN: Object Storage + CDN ตั้งชื่อ {sku}-{variant}-{campaign}-v{n}.png
- Cache & Cost: hash(prompt + params + reference) เป็น cache key
- Latency & Rate Limit: ใช้ Job Queue + retry with backoff
- Optimization: เก็บ PNG เป็น Master เสิร์ฟ WebP (มี Alpha) ส่วน Reference Image เก็บ private ผูกกับ SKU
- Product Accuracy (ข้อนี้สำคัญสุด) : ห้าม Publish อัตโนมัติเด็ดขาด ต้องตรวจ Logo, Shape, Pattern, Material, Stitching, Color, Graphic Placement, Proportion และ Dimensions เทียบของจริงทุกครั้ง ภาพที่ไม่ตรงกับสินค้าจริงคือเรื่องใหญ่ ลูกค้าเข้าใจผิดแล้วจบที่รีวิวหนึ่งดาว ใช้สถานะ draft → approved → published กันไว้ก่อน
และนี่ก็เป็นตัวอย่างการทำ Transparent Asset ที่ generate ครั้งเดียวแล้วใช้ซ้ำ, Reference Image ที่รักษาตัวตนของสินค้าไว้ และ Human Review ที่การันตีว่าภาพตรงกับของจริง แต่บทความนี้แอดอยากสื่อถึงวิธีการทำ แต่ไม่ได้สนับสนุนให้สร้างของปลอม อย่างเช่น เมนูอาหาร สินค้าปลอมนะคร้าบบบ
อยากสร้างภาพสินค้าด้วย AI ให้แบรนด์ของคุณ? BorntoDev รับทำ และรับสอน
ถ้าอ่านจบแล้วรู้สึกว่า “อยากได้แบบนี้ แต่ไม่มีเวลาทำเอง” หรือ “อยากให้ทีมทำเป็น” BorntoDev ช่วยได้ทั้งสองแบบครับ
- รับทำระบบสร้างภาพสินค้า AI – ออกแบบ Prompt และ Pipeline สร้างภาพสินค้า E-Commerce, Transparent PNG, Variant สินค้าหลายสี และภาพแคมเปญโฆษณา พร้อมเชื่อมเข้ากับเว็บหรือระบบหลังบ้านของคุณ
- รับสอนสร้างภาพสินค้าด้วย AI (In-house Training) – Workshop ให้ทีม Marketing, Content และ Developer ใช้ AI สร้างภาพสินค้า ใช้ OpenAI API และ GPT Image ได้เองตั้งแต่พื้นฐานจนถึงขึ้นระบบจริง
- คอร์สออนไลน์ AI และการเขียนโปรแกรม – เรียนรู้ด้วยตัวเองได้ทุกที่ที่ BorntoDev School
Reference : OpenAI Cookbook Transparent image assets
