Behind the Scenes · เบื้องหลัง

How We Made the krueng.ai Hero Video

เราสร้างวิดีโอหลักของ krueng.ai ด้วย AI ได้อย่างไร

A bilingual production walkthrough · การสาธิตการผลิตแบบสองภาษา

The finished 24-second splash video · วิดีโอที่เสร็จแล้ว ความยาว 24 วินาที

Overview ภาพรวม

This page documents how we built the hero video for krueng.ai — a short, funny, high-quality splash designed to give Thai learners the confidence to start using AI. Every decision here can be copied for your own projects.

หน้านี้อธิบายวิธีที่เราสร้างวิดีโอหลักของ krueng.ai — วิดีโอสั้น ๆ สนุก ๆ คุณภาพสูง ที่ออกแบบมาเพื่อให้ผู้เรียนไทยมีความมั่นใจในการเริ่มใช้ AI ทุกขั้นตอนคุณนำไปใช้กับโปรเจกต์ของคุณเองได้

What it does · ทำอะไรได้บ้าง

The video tells a tiny story in 24 seconds: a Thai teacher in a warm home explains that English + AI reinforce each other, then types a command and a green laser cooks a bowl of somtam — showing that "AI made-to-order" is literally delicious. It ends with the core message: everyone can learn AI, for free.

วิดีโอนี้เล่าเรื่องสั้น ๆ ในเวลา 24 วินาที: ครูไทยในบ้านที่อบอุ่นอธิบายว่า ภาษาอังกฤษและ AI ช่วยเสริมกันและกัน แล้วเธอพิมพ์คำสั่งและเลเซอร์สีเขียวก็ทำส้มตำร้อน ๆ ออกมา — แสดงให้เห็นว่า "AI ตามสั่ง" อร่อยจริง ๆ จบลงด้วยข้อความสำคัญ: ทุกคนเรียนรู้ AI ได้ฟรี

The tool stack · เครื่องมือที่ใช้

No single AI model can do all of this well. We used four different models, each for what it does best, then stitched the results together with ffmpeg.

ไม่มี AI ตัวเดียวที่ทำทุกอย่างได้ดี เราใช้โมเดล AI สี่ตัวที่ต่างกัน แต่ละตัวทำในสิ่งที่ตัวเองทำได้ดีที่สุด แล้วรวมผลลัพธ์เข้าด้วยกันด้วย ffmpeg

🎨

1. Nano Banana 2 (Gemini 3 Pro Image)

Generate storyboard frames and character references

สร้างภาพนิ่งสำหรับเรื่องราวและภาพอ้างอิงตัวละคร

↓

🗣️

2. HeyGen — Talking Head

Generate the teacher speaking Thai with accurate lip-sync

สร้างครูพูดภาษาไทยพร้อมการขยับปากตามเสียงที่แม่นยำ

🔥

3. Seedance 2.0 — Action Beats

Animate the laser, flames, logo reveal — no-people beats

ทำแอนิเมชันเลเซอร์ เปลวไฟ และการเปิดโลโก้ — ฉากที่ไม่มีคน

↓

🎬

4. ffmpeg — Stitch, Subtitle, Upscale

Combine clips, add subtitles, upscale to 1080p

รวมคลิป เพิ่มคำบรรยาย ขยายคุณภาพเป็น 1080p

↓

☁️

5. AWS S3 + CloudFront — Deliver

Upload and serve globally with cache invalidation

อัปโหลดและให้บริการทั่วโลก พร้อมการล้างแคชอัตโนมัติ

The 5 beats · 5 ฉาก

👩‍🏫

1. Teacher intro (4.6s)

ครูแนะนำ

💚🔥

2. Green laser + fire (5s)

เลเซอร์และไฟ

😋

3. "อร่อย!" reaction (5s)

ปฏิกิริยา "อร่อย!"

🎁

4. "ฟรี" message (5s)

ข้อความ "ฟรี"

✨

5. Logo + tagline (5s)

โลโก้และสโลแกน

Step-by-Step ทีละขั้นตอน

Each step below can be reproduced with the API keys and scripts described. Total API cost for the full video: about $4–5 USD.

แต่ละขั้นตอนด้านล่างนี้ทำซ้ำได้ด้วย API key และสคริปต์ที่อธิบายไว้ ค่าใช้จ่าย API สำหรับวิดีโอเต็มทั้งหมดประมาณ $4–5 USD (150–180 บาท)

STEP 01

Design the concept first ออกแบบแนวคิดก่อน

Before any API calls, we decided on the core message, the emotional hook, and the joke. AI is expensive if you iterate blindly — so do this in words first.

ก่อนที่จะเรียก API เราต้องตัดสินใจเรื่อง ข้อความหลัก จุดเชื่อมทางอารมณ์ และ มุกตลก ก่อน การใช้ AI แบบวนซ้ำโดยไม่คิดจะแพง — ทำด้วยคำพูดก่อน

Our concept

Audience · ผู้ชม: Thai learners with few opportunities, often on slow phones
Emotional hook · จุดเชื่อมอารมณ์: warmth + humor + "this is for me"
Core message · ข้อความหลัก: English and AI reinforce each other, and it's free to learn
The joke · มุกตลก: "อาหารตามสั่ง" → "AI ตามสั่ง อร่อย!" (a pun every Thai person will recognize from ordering food)

Tip · เคล็ดลับ

Keep the hook under 25 seconds. Videos longer than that bounce on mobile 3G.

ให้จุดเชื่อมสั้นกว่า 25 วินาที เพราะวิดีโอที่ยาวกว่านั้นจะโหลดช้าบนมือถือ 3G และคนจะปิดก่อนดูจบ

STEP 02

Generate storyboard frames with Nano Banana 2 สร้างภาพเรื่องราวด้วย Nano Banana 2

Gemini 3 Pro Image google-genai SDK

We generated one still image per beat — the teacher, the somtam + keyboard, the logo reveal — using Google's Nano Banana 2 image model. These are our visual references for every animation step that follows.

เราสร้างภาพนิ่งหนึ่งภาพต่อฉาก — ครู กระทะข้าวและคีย์บอร์ด และการเปิดเผยโลโก้ — ด้วยโมเดลภาพ Nano Banana 2 ของ Google ภาพเหล่านี้คือภาพอ้างอิงของเราสำหรับทุกขั้นตอนแอนิเมชันที่ตามมา

Why this model

Nano Banana 2 accepts multiple reference images in one prompt. This lets us say "match this character's face" and "use this background" in the same call — essential for consistency across frames.

Nano Banana 2 รับภาพอ้างอิงหลายภาพในคำสั่งเดียว ทำให้เราบอกว่า "ใช้หน้าตัวละครนี้" และ "ใช้พื้นหลังนี้" ในการเรียกครั้งเดียวได้ — สำคัญมากสำหรับความคงเส้นคงวาระหว่างเฟรม

# Minimal example — generate one frame with a reference image
from google import genai
from google.genai import types

client = genai.Client(api_key=os.environ["GEMINI_API_KEY"])
resp = client.models.generate_content(
    model="gemini-3-pro-image-preview",
    contents=[
        "A Thai teacher smiling in a warm home, holding a cup of tea...",
        types.Part.from_bytes(
            data=open("reference.png", "rb").read(),
            mime_type="image/png",
        ),
    ],
    config=types.GenerateContentConfig(
        response_modalities=["IMAGE"],
        image_config=types.ImageConfig(aspect_ratio="16:9"),
    ),
)
        

Cost: about $0.03 per frame. We generated about 10 frames during iteration → ~$0.30 total.

ค่าใช้จ่าย: ประมาณ $0.03 ต่อภาพ เราสร้างประมาณ 10 ภาพระหว่างการปรับปรุง → รวมประมาณ $0.30

STEP 03

Generate the talking head with HeyGen สร้างภาพพูดด้วย HeyGen

HeyGen v2 API Thai lip-sync

For every shot where the teacher speaks, we used HeyGen — an avatar platform that's purpose-built for multilingual speech with accurate lip-sync.

สำหรับทุกฉากที่ครูพูด เราใช้ HeyGen ซึ่งเป็นแพลตฟอร์ม avatar ที่สร้างมาสำหรับการพูดหลายภาษาพร้อมการขยับปากที่แม่นยำ

The background trick · เคล็ดลับพื้นหลัง

HeyGen's default avatars have office backgrounds that felt wrong for our audience. The fix: upload a custom warm-home background as an asset and reference it in the request.

Avatar เริ่มต้นของ HeyGen มีพื้นหลังสำนักงานที่รู้สึกไม่เข้ากับผู้ชมของเรา วิธีแก้: อัปโหลดพื้นหลังบ้านที่อบอุ่นเอาเองเป็น asset แล้วอ้างอิงในคำขอ

# 1. Upload background (must be JPEG, not PNG!)
curl -X POST https://upload.heygen.com/v1/asset \
  -H "X-Api-Key: $HEYGEN_KEY" \
  -H "Content-Type: image/jpeg" \
  --data-binary @bg_thai_home.jpg
# → returns {"data": {"url": "https://resource2.heygen.ai/..."}}

# 2. Use it when generating a video
{
  "video_inputs": [{
    "character": {
      "type": "avatar",
      "avatar_id": "June_expressive_2024112701"
    },
    "voice": {
      "type": "text",
      "input_text": "AI ช่วยได้ทุกอย่างเลยนะคะ...",
      "voice_id": "gl4Yi7XihIvUsls3wXMs",
      "speed": 0.88
    },
    "background": {
      "type": "image",
      "url": "https://resource2.heygen.ai/image/<asset_id>/original.jpg"
    }
  }],
  "dimension": {"width": 1280, "height": 720}
}
        

Gotchas · ข้อระวัง

1. Use the Upper-Body avatar (June_expressive_2024112701) for custom backgrounds — sitting-at-desk avatars don't composite cleanly.

1. ใช้ Upper-Body avatar สำหรับพื้นหลังเอง — avatar ที่นั่งโต๊ะจะไม่ผสานกับพื้นหลังได้สะอาด

2. HeyGen requires videos to be at least 1 second long. Pad short lines with SSML: <break time="0.5s"/>อย่าซนนะ<break time="0.5s"/>

2. HeyGen ต้องการวิดีโอยาวอย่างน้อย 1 วินาที ให้เติมความยาวในประโยคสั้น ๆ ด้วย SSML

3. Only JPEG images upload to the asset endpoint — PNG fails with error 400543.

3. endpoint อัปโหลดรับเฉพาะ JPEG — PNG จะ error 400543

Cost: about $2 per clip. Four clips = ~$8.

ค่าใช้จ่าย: ประมาณ $2 ต่อคลิป สี่คลิป = ประมาณ $8 (~280 บาท)

STEP 04

Animate action beats with Seedance 2.0 ทำแอนิเมชันฉากแอ็คชันด้วย Seedance 2.0

Seedance 2.0 via Replicate image-to-video

For everything that's NOT a talking person — the laser firing, the flames, the logo with firefly particles — we used Seedance 2.0, the best cinematic image-to-video model available on Replicate.

สำหรับทุกอย่างที่ไม่ใช่คนพูด — เลเซอร์ยิง เปลวไฟ โลโก้พร้อมอนุภาคหิ่งห้อย — เราใช้ Seedance 2.0 ซึ่งเป็นโมเดลภาพเป็นวิดีโอที่ดีที่สุดบน Replicate

# Image-to-video with native audio generation
import replicate
output = replicate.run(
    "bytedance/seedance-2.0",
    input={
        "prompt": "Green laser from laptop hits somtam bowl, erupting in spicy orange flames...",
        "image": open("starting_frame.png", "rb"),
        "duration": 5,              # 4 to 15 seconds
        "resolution": "720p",        # max 720p
        "aspect_ratio": "16:9",
        "generate_audio": True,    # SFX + lip-sync speech
    },
)
        

The Seedance Content Filter · ตัวกรองเนื้อหาของ Seedance

Seedance 2.0 has a very strict safety filter. It rejects:

Seedance 2.0 มีตัวกรองความปลอดภัยที่เข้มงวดมาก ซึ่งจะปฏิเสธ:

Any image with an adult woman's face
Any image with a child's face, even partial
Sometimes even bare forearms + a bracelet!

Workarounds: (1) design beats around hands, animals, food, and objects instead of faces; (2) crop input frames to remove anything human-like; (3) route all face-based shots through HeyGen instead.

วิธีแก้: (1) ออกแบบฉากรอบ ๆ มือ สัตว์ อาหาร และวัตถุ แทนที่จะเป็นใบหน้า; (2) ครอปภาพต้นฉบับเพื่อตัดส่วนที่คล้ายคน; (3) ส่งฉากที่มีใบหน้าทั้งหมดผ่าน HeyGen แทน

Cost: about $0.30 per 5-second 720p clip. Three action clips = ~$1.

ค่าใช้จ่าย: ประมาณ $0.30 ต่อคลิป 5 วินาที 720p สามคลิป = ~$1 (~35 บาท)

STEP 05

Stitch everything with ffmpeg รวมทุกอย่างด้วย ffmpeg

ffmpeg ASS subtitles Lanczos upscale

ffmpeg is the open-source tool that editors use to combine, upscale, add subtitles, and master audio. Four steps:

ffmpeg เป็นเครื่องมือโอเพนซอร์สที่บรรณาธิการใช้รวม ขยายความละเอียด เพิ่มคำบรรยาย และมาสเตอร์เสียง มีสี่ขั้นตอน:

Normalize every clip to the same size, framerate, and audio level (loudnorm -16 LUFS)
Upscale from 720p to 1080p using scale=1920:1080:flags=lanczos + subtle unsharp filter
Crossfade between clips with xfade, using fadewhite for the laser impact beat
Burn in bilingual subtitles from an .ass file — Thai bold on top, English italic below

# Normalize one clip
ffmpeg -y -i clip_A.mp4 \
  -vf "scale=1920:1080:flags=lanczos,unsharp=5:5:0.6:5:5:0.3,format=yuv420p" \
  -af "loudnorm=I=-16:TP=-1.5:LRA=11,aresample=48000" \
  -c:v libx264 -preset medium -crf 18 \
  -c:a aac -b:a 192k out_A.mp4

# Crossfade + subtitles (abbreviated)
ffmpeg -i A.mp4 -i B.mp4 -i C.mp4 -i D.mp4 -i E.mp4 \
  -filter_complex "...xfade=transition=fadewhite:duration=0.3:offset=4.6...
                     subtitles='subtitles.ass'[vout]" \
  -map "[vout]" -map "[amix]" \
  -c:v libx264 -preset slow -crf 18 \
  -movflags +faststart hero_splash_v2.mp4
        

Why bilingual subtitles matter

Many viewers see the video first on muted autoplay. Burned-in Thai + English subtitles mean the message lands with the sound off. This is not optional for an enterprise hero video targeting mobile users.

ผู้ชมจำนวนมากเห็นวิดีโอครั้งแรกแบบเล่นอัตโนมัติโดยไม่มีเสียง คำบรรยายไทย + อังกฤษที่ฝังในวิดีโอหมายความว่าข้อความส่งถึงผู้ชมได้ แม้ปิดเสียง สิ่งนี้ไม่ใช่ทางเลือกสำหรับวิดีโอหลักที่มุ่งเป้าไปที่ผู้ใช้มือถือ

STEP 06

Deploy to S3 and CloudFront นำขึ้น S3 และ CloudFront

AWS S3 CloudFront CDN

The finished video goes to Amazon S3, served via CloudFront CDN for fast global delivery. We set a 1-year cache header so browsers and edge servers don't re-fetch unnecessarily.

วิดีโอที่เสร็จแล้วไปที่ Amazon S3 และให้บริการผ่าน CloudFront CDN เพื่อการส่งมอบที่รวดเร็วทั่วโลก เราตั้งส่วนหัวแคช 1 ปีเพื่อให้เบราว์เซอร์และเซิร์ฟเวอร์ขอบไม่ต้องดึงข้อมูลซ้ำ

# Upload with proper content-type and long cache
aws s3 cp hero_splash_v2.mp4 s3://krueng.ai/video/hero_splash_v2.mp4 \
  --profile deploy \
  --content-type "video/mp4" \
  --cache-control "public, max-age=31536000"

# Update the HTML to point to the new file
# Commit on a feature branch — NEVER push HTML to main!
git checkout -b feat/hero-splash-v2
git add HTML/index.html
git commit -m "Update hero video to v2"
git push -u origin feat/hero-splash-v2
        

A post-push hook automatically invalidates the CloudFront cache, so the new video appears within minutes.

ฮุกหลังการ push จะล้างแคช CloudFront โดยอัตโนมัติ ทำให้วิดีโอใหม่ปรากฏภายในไม่กี่นาที

Full Tech Stack เทคโนโลยีทั้งหมด

Layer	Tool	Purpose
Storyboard frames	Nano Banana 2 (Gemini 3 Pro Image)	Character-consistent stills
Talking head	HeyGen v2 API	Thai speech + lip-sync + custom background
Action beats	Seedance 2.0 (Replicate)	Cinematic i2v with native audio
Editing	ffmpeg	Stitch, subtitles, upscale, loudnorm
Secrets	AWS SSM Parameter Store	API keys via IAM role
Delivery	AWS S3 + CloudFront	Global CDN with auto cache bust
Version control	git + GitHub	Feature branch workflow
Runtime	Python 3.13 + bash	Orchestrate the whole pipeline

Total Cost ค่าใช้จ่ายรวม

Full API cost to produce the 24.4-second hero video:

ค่าใช้จ่าย API รวมสำหรับการผลิตวิดีโอหลักยาว 24.4 วินาที:

Storyboard

$0.30

Nano Banana 2 · ~10 frames

HeyGen Clips

HeyGen · 4 clips

Seedance Clips

Seedance 2.0 · 3 clips

S3 + CloudFront

~$0.01

pennies per month

Total

~$10

ประมาณ 350 บาท — cost of a professional hero video

A traditional ad agency would charge $5,000–$50,000 for a video like this. The same result with AI cost less than a bowl of Thai takeout.

เอเจนซีโฆษณาแบบดั้งเดิมคิดราคา 150,000–1,500,000 บาทสำหรับวิดีโอแบบนี้ ผลลัพธ์เดียวกันด้วย AI ใช้เงินน้อยกว่าข้าวกล่องหนึ่งมื้อ

Design Principles for This Audience หลักการออกแบบสำหรับผู้ชมนี้

krueng.ai targets Thai learners who often have few opportunities and watch on cheap Android phones with slow connections. Every decision served them:

krueng.ai มุ่งเป้าไปที่ผู้เรียนไทยที่มักมีโอกาสน้อย และดูวิดีโอบนมือถือ Android ราคาไม่แพงที่มีการเชื่อมต่อช้า ทุกการตัดสินใจต้องเป็นประโยชน์ต่อพวกเขา:

Warm Thai home, not corporate office · บ้านไทยอบอุ่น ไม่ใช่สำนักงาน
"ฟรี" (FREE) prominent — the most important word · คำว่า "ฟรี" เด่น — คำที่สำคัญที่สุด
Burned-in bilingual subtitles for muted autoplay · คำบรรยายสองภาษาฝังไว้สำหรับเล่นอัตโนมัติไม่มีเสียง
Under 25 seconds so 3G users don't bounce · น้อยกว่า 25 วินาทีเพื่อให้ผู้ใช้ 3G ไม่ปิด
Thai first, English aspirational — not the other way around · ภาษาไทยก่อน ภาษาอังกฤษเป็นความหวัง — ไม่ใช่ในทางกลับกัน
Humor grounded in culture — "อาหารตามสั่ง" is shorthand every Thai recognizes · อารมณ์ขันที่ฝังอยู่ในวัฒนธรรม — "อาหารตามสั่ง" เป็นสิ่งที่คนไทยทุกคนรู้จัก

Biggest Lessons · บทเรียนสำคัญ

Lesson 1 · บทเรียน 1

No single AI does this well. You have to orchestrate. The winning trick is knowing which model to use for which beat.

ไม่มี AI ตัวเดียวที่ทำได้ดี คุณต้องจัดการโดยรวม เทคนิคคือรู้ว่าโมเดลไหนใช้สำหรับฉากไหน

Lesson 2 · บทเรียน 2

Content filters are opaque and inconsistent. When Seedance rejected every frame with a woman's face, we redesigned the beat around hands and food — and the video got funnier because of it.

ตัวกรองเนื้อหาของ AI ไม่โปร่งใสและไม่สม่ำเสมอ เมื่อ Seedance ปฏิเสธทุกเฟรมที่มีใบหน้าผู้หญิง เราออกแบบฉากใหม่รอบ ๆ มือและอาหาร — และวิดีโอกลับตลกขึ้นเพราะสิ่งนั้น

Lesson 3 · บทเรียน 3

Design for muted autoplay. Bilingual burned-in subtitles are non-negotiable if you want a 14-year-old scrolling Facebook to understand your message without turning on sound.

ออกแบบสำหรับการเล่นอัตโนมัติแบบปิดเสียง คำบรรยายสองภาษาฝังในวิดีโอเป็นสิ่งจำเป็น หากคุณต้องการให้เด็กอายุ 14 ปีที่เลื่อน Facebook เข้าใจข้อความของคุณโดยไม่ต้องเปิดเสียง

Lesson 4 · บทเรียน 4

Every decision should ask: does this help a poor kid gain confidence to try AI? If not, cut it.

ทุกการตัดสินใจควรถามว่า: สิ่งนี้ช่วยให้เด็กยากจนมีความมั่นใจที่จะลองใช้ AI หรือไม่ ถ้าไม่ใช่ ตัดทิ้ง

Build Your Own สร้างของคุณเอง

Every tool above has a free tier. You can make a video like this with an afternoon of work and $10 in API credits.

ทุกเครื่องมือข้างต้นมีแผนฟรี คุณสามารถสร้างวิดีโอแบบนี้ด้วยงานในช่วงบ่ายและเครดิต API $10 (~350 บาท)

← Back to krueng.ai Claude Code Course AI Course