ปัญหาที่เจอ
ทำไมการมีวิดีโอ UGC ขายของสักตัวถึงช้าและแพงขนาดนี้ ทั้งที่คอนเทนต์ต้องเทสต์เยอะ?
ทีมอยากได้วิดีโอ UGC ขายของหลายๆ ตัวไว้เทสต์คอนเทนต์ — แต่แต่ละคลิปต้องจ้างถ่าย จ้างตัดต่อ กว่าจะเสร็จก็หลายวัน กำลังผลิตไม่มีทางทันกับจำนวนที่อยากลอง โจทย์คือ: มีแค่ "รูปสินค้า" กับ "รายละเอียดสั้นๆ" จะทำให้ได้วิดีโอพร้อมลงในไม่กี่นาทีได้ไหม
ผลิตช้าและแพง — จ้างถ่าย+ตัดต่อทุกคลิป
วิดีโอขายของแต่ละตัวต้องมีคนถ่าย คนตัดต่อ กว่าจะได้คลิปเดียวก็กินเวลาและงบ — พอต้องเทสต์คอนเทนต์หลายเวอร์ชัน ยิ่งไม่คุ้ม
สคริปต์ต้องพูดจบพอดีเวลา
คลิปแนวตั้งต้องจบใน ~15-30 วิ — เขียนสคริปต์ให้ยาวพอดี ไม่ล้น ไม่โล่ง เป็นงานที่ต้องลองผิดลองถูกหลายรอบ
keyword ต้องเด้งตรงจังหวะที่พูด
วิดีโอ UGC ที่ดูดีต้องมีคำสำคัญเด้งบนจอ "ตรงคำ" ที่พรีเซนเตอร์พูดพอดี — sync ด้วยมือในตัวตัดต่อ ทำทีละคลิปนานมาก
เครื่องมือ AI หลายตัวไม่คุยกัน
gen รูปอยู่ที่หนึ่ง พากย์เสียงอีกที่ ตัดต่ออีกที่ — ต้องเอา output แต่ละตัวมาต่อมือเอง เสียเวลาและพลาดง่าย
เรียก AI ตรงจาก browser = key หลุด
ถ้าให้หน้าเว็บยิง OpenAI / ElevenLabs ตรงๆ API key จะโผล่ใน network — เป็นเครื่องมือภายในก็ยอมให้หลุดไม่ได้
วิธีแก้ปัญหา
ให้ AI เป็น "ผู้กำกับ" ทั้งเส้น — วางแผน → สร้าง → พากย์ → ตัดต่อ อัตโนมัติจบในหน้าเดียว
AI Director วาง "shot plan" ให้
OpenAI แตก brief เป็นแผนช็อตแบบ JSON — แต่ละช็อตกำหนดชนิด (โคลสอัป/มุม/พรีเซนเตอร์), ความยาว, ประโยคพากย์ และ keyword ที่จะเด้ง แล้ว validate schema กันเพี้ยน
สคริปต์ไทยยาวพอดีเวลา
คำนวณจำนวนตัวอักษรตามวินาที (ไทยพูด ~8 ตัว/วินาที) ให้ AI เขียนบทพูดที่ "พูดจบพอดี" ในความยาวที่ตั้ง ไม่ล้นไม่โล่ง
keyword sync อัตโนมัติจาก timestamp
ElevenLabs คืน timestamp ของ "ทุกตัวอักษร" — เดินตัวชี้บน alignment หาว่าแต่ละประโยคเริ่ม/จบวินาทีไหน แล้วให้ keyword เด้งตรงจังหวะนั้นเป๊ะ
ต่อ AI 4 ตัวเป็นสายเดียว
OpenAI → Higgsfield → ElevenLabs → Remotion ทำงานต่อเนื่องเป็น pipeline เดียว — อัปรูป กด Generate ครั้งเดียว ได้ .mp4 ออกมา ไม่ต้องต่อมือ
Bun server ซ่อน key หลังบ้าน
ทุก API call วิ่งผ่าน Bun server ที่อ่าน key จาก .env — browser ไม่เคยเห็น key เลย ทั้งยังใช้ server รัน Higgsfield CLI + Remotion ที่ browser ทำเองไม่ได้
วิธีทำงาน — 4 จังหวะ
ตั้งแต่อัปรูปสินค้า จนได้วิดีโอ UGC พร้อมลง
อัป & ตั้งค่า
อัปรูปสินค้า + เลือกพรีเซนเตอร์ + พิมพ์ brief/สคริปต์ + ตั้งขนาด/ความยาว
AI วางแผน & สร้าง
OpenAI วาง shot plan → Higgsfield แตกรูปมุม แล้วเติม motion ให้เป็นคลิป
พากย์ & sync
ElevenLabs พากย์ไทย + timestamp → map keyword ให้ตรงจังหวะที่พูด
ตัดต่อ & render
Remotion ประกอบคลิป+เสียง+keyword → .mp4 (ส่งงานแล้ว poll จนเสร็จ)
Tech Stack & Architecture
หน้าเดียวบน localhost — React บน Bun bundler (ไม่มี Vite) + Bun server ซ่อน key แล้วขับ AI pipeline
React + Bun bundler — อยาก component-based แต่ไม่อยากลง Vite/Next; Bun bundle + HMR + CSS ให้ครบในตัว รันทั้ง frontend และ backend ด้วยคำสั่งเดียว · Bun.serve() ตัวเดียว เสิร์ฟทั้ง frontend และ API — ลด moving parts · async job + poll เพราะ gen ใช้เวลาเป็นนาที ถ้าถือ HTTP request ค้าง idle-timeout จะตัดก่อน · Higgsfield CLI + Remotion render รันบน browser ไม่ได้ ต้องมี server shell out ให้ · key อยู่ใน .env หลังบ้าน ไม่หลุดสู่ browser
สิ่งที่สร้าง — 8 ความสามารถหลัก
ครบ loop ตั้งแต่วางแผนช็อต ถึงวิดีโอ .mp4 ที่ keyword เด้งตรงคำ
AI Director (Shot Plan)
OpenAI วางแผนช็อตเป็น JSON (ชนิด/ความยาว/ประโยค/keyword) + validatePlan() กัน schema เพี้ยน และ sync ความยาวรวมให้ตรงผลรวมช็อต
Thai Script Writer
draftFullScript() คำนวณตัวอักษร/วินาที ให้ AI ร่างบทพูดไทยที่พูดจบพอดีเวลา — auto-sync ความยาวคลิปตามบทที่พิมพ์
Angle Image Gen
Higgsfield nano_banana_2 แตกรูปสินค้าหลายมุมจากรูปเดียว — prompt เฉพาะต่อชนิดช็อต (โคลสอัป / flat-lay / มือถือสินค้า)
Image → Video (i2v)
seedance1_5 เติม motion ให้รูปมุมกลายเป็นคลิปสั้น — motion prompt คุมให้ขยับพอดี ไม่ให้ภาพ morph เพี้ยน
Voice + Char Timestamp
ElevenLabs eleven_v3 พากย์ไทย + คืน timestamp ทุกตัวอักษร (with-timestamps) — กุญแจของการ sync keyword
Keyword Sync Compositor
Remotion ตัดสลับช็อตตาม timeline + ทำ keyword เด้งบนจอตรงช่วงที่ประโยคนั้นถูกพูด พร้อม hook เปิดคลิปและ sfx
3 Output Templates
avatar (พรีเซนเตอร์ lip-sync ช็อตเดียว) / full / no-person + เลือกอัตราส่วน 9:16 · 1:1 · 16:9 และ resolution
Async Job + Poll
ส่งงานคืน jobId ทันที แล้ว client poll สถานะทุก 5 วิ จนได้ mp4 — พร้อมแปล error ของ external ให้ผู้ใช้อ่านรู้เรื่อง
หน้าตา UI — Studio 3 คอลัมน์
หน้าเดียวสไตล์ NotebookLM — ซ้ายอัปรูป/เลือกพรีเซนเตอร์ · กลางคุมสคริปต์+มาร์ก keyword · ขวาตั้งค่า+กด Generate
Hack กับปัญหา
6 โจทย์ที่ต้องคิดทางแก้เอง — ต่อ AI หลายตัว + คุมงานยาวที่ external ไม่นิ่ง
gen ใช้เวลาเป็นนาที — HTTP request เดียวถือไม่ไหว
สร้างวิดีโอทั้งตัวใช้เวลาหลายนาที ถ้าถือ connection ค้างรอผล idle-timeout จะตัดก่อนเสมอ
/api/generate คืน jobId ทันที เก็บสถานะใน in-memory map, client poll /api/status ทุก 5 วิ; ตั้ง idleTimeout สูงเฉพาะช่วง upload รูปHiggsfield CLI + Remotion render รันบน browser ไม่ได้
ขั้น gen ฟุตเทจและ render ต้องเรียก CLI / spawn process — สิ่งที่หน้าเว็บทำเองไม่ได้เลย
spawn CLI + bunx remotion render ให้ แล้ว pre-warm Remotion Studio ไว้ล่วงหน้า (fixed port) เพื่อให้ปุ่ม Edit เปิดแท็บได้ทันทีหลัง render เสร็จkeyword ต้องเด้ง "ตรงคำ" ที่พูดพอดี
รู้แค่ข้อความไม่พอ — ต้องรู้ว่าแต่ละประโยคเริ่ม/จบวินาทีที่เท่าไหร่ในเสียงจริง
ffprobe + tail กันคำท้ายลากเสียงโดนตัดexternal ล่มเป็นครั้ง (429 / timeout / reach ไม่ได้)
Higgsfield เป็น service ภายนอกที่มี blip เป็นครั้งคราว — พลาดทีเดียวทำทั้ง render พังทั้งตัว
withRetry() backoff 3 ครั้ง ห่อทุก external call + gen ช็อตแบบขนานด้วย Promise.all (รูปมุม+เสียงพร้อมกัน) + แปล error ดิบเป็นข้อความไทยที่ผู้ใช้อ่านรู้เรื่องโมเดลอ่านคำไทยบางคำเพี้ยน
ชื่อแบรนด์อังกฤษ/คำที่ลากเสียง TTS ออกเสียงผิด — ฟังแล้วไม่เป็นธรรมชาติ ทำลายความน่าเชื่อของคลิป
fixThaiPron() แก้คำอ่านในบทพูดก่อนพากย์ (timing คำนวณจากข้อความที่แก้แล้ว ตัวอักษรจึงตรงกับ alignment เสมอ) + เลือก eleven_v3 ซึ่งเป็นโมเดลที่รองรับไทยได้ดีสุดlip-sync คือส่วนที่ยากและเสี่ยงสุด
ให้ปากพรีเซนเตอร์ขยับตรงเสียงเป๊ะทั้งคลิปคือเดิมพันที่พังง่ายและกิน budget generation มาก
Design Decision ที่ตั้งใจเลือก
ขอบเขตที่จงใจ "ไม่ทำ" ในรอบแรก สำคัญพอๆ กับสิ่งที่ทำ
เครื่องมือนี้จงใจ scope ให้เล็กใน v1 — เป้าคือพิสูจน์ทั้ง chain (รูป → วิดีโอ → เสียง → ตัดต่อ) ให้ทำงานจริงจากรูปสินค้าจริงก่อน ยังไม่วิเคราะห์ reference ลึกและยังไม่ทำ lip-sync เต็มรูป เพราะได้ตัว pipeline ที่ต่อกันติดและออก .mp4 จริง มีค่ากว่าการเดิมพันกับส่วนที่ยากที่สุดตั้งแต่รอบแรก
AI เป็นผู้กำกับ ไม่ใช่แค่ฟอร์ม
OpenAI วาง shot plan เอง แล้วสั่งทรัพยากรต่อ
เลี่ยง lip-sync ใน v1
ตัดสลับช็อตสินค้าแทน — พึ่งเสียง+keyword
key อยู่หลังบ้าน
ไม่เรียก AI ตรงจาก browser — ผ่าน server เสมอ
ไม่ลง Vite / Next
Bun bundle ในตัว ลด dependency ที่ต้องดูแล
Knowledge Domain ที่แข็งขึ้น
5 พื้นที่ความรู้ที่ระดับเราขยับขึ้นจริงจากการทำโปรเจกต์นี้
เรียนรู้การต่อ LLM + image gen + i2v + voice + render หลายโมเดลเข้าด้วยกัน, ใช้ AI วาง "แผน" (shot plan) แล้วให้โค้ด loop สั่งทรัพยากรต่อ, validate output ของ AI ด้วย schema กันเพี้ยน และรันงานขนานด้วย Promise.all บทเรียน: การต่อโมเดลให้ "คุยกัน" ผ่าน data ที่ควบคุมได้ คือหัวใจของ AI product
ใช้ Bun.serve() เสิร์ฟทั้ง React frontend (bundle + HMR) และ REST API, spawn CLI/subprocess จาก server, จัดการ multipart upload — โดยไม่ต้องพึ่ง Vite/Next บทเรียน: Bun ทำให้ full-stack POC เบาลงมาก ลด moving parts ที่ต้องตั้งค่า
เข้าใจ char-level alignment จาก TTS → แปลงเป็น caption timing, ใช้ ffprobe/ffmpeg จับความยาวเสียงจริง, และประกอบ timeline ด้วย Remotion (compositor แบบ code) บทเรียน: เสียงและวิดีโอเป็น "data ที่ sync ได้" ถ้ารู้จัก timestamp และเครื่องมือประกอบ
ออกแบบ submit-then-poll: คืน jobId ทันที เก็บสถานะฝั่ง server, client poll จนเสร็จ, พร้อม retry/backoff กับ external ที่ไม่นิ่ง และแปล error ดิบให้เป็นข้อความที่ผู้ใช้เข้าใจ บทเรียน: งาน long-running ต้องแยก "รับงาน" ออกจาก "ส่งผล" ตั้งแต่ออกแบบ
ฝึกเลือกโมเดลให้ตรงงาน (GPT-4o เป็นผู้กำกับ, eleven_v3 สำหรับไทย, nano_banana สำหรับรูปมุม, seedance สำหรับ i2v) และเข้าใจข้อจำกัดของแต่ละตัว (เช่น TTS ไทยเน้นรายคำผ่าน SSML ไม่ได้ → ย้ายไปไฮไลต์บนแคปชั่นแทน) บทเรียน: แต่ละโมเดลมีจุดแข็ง/ควิร์กของมัน ต้องรู้จักเลือกและออกแบบ workaround
