สร้างโปรแกรมด้วย AI
ไม่ต้องเขียน Code

📖 สารบัญ

คลิกข้ามไปยังเวอร์ชั่นที่สนใจ

1. เป้าหมายและขอบเขต
2. v1.0 · CapCut Editor MVP (13 features)
3. v1.1 · Refactor 18 → 40 ไฟล์
4. v1.2 · Noise Reduction (afftdn)
5. v1.3 · Demo Button + 404 Fix
6. v2.0 · 5 Features ใหม่ (Auto-save / Export / Transitions / Captions / AI Editor)
7. v2.1 · Video Audio Extract + IndexedDB Model Cache
8. v6.0 · Export Fix (Worker bundle)
9. v7.0 · Subtitle Styling + Project + Volume Keyframes + Mobile + Share
10. v8.0 · Track Waveform (Mini + Ghost + Keyframes)
11. v9.0 · Multi-Video Tracks + Picture-in-Picture
12. v10.0 (V3) · 5 Features ใหม่ (Text Overlay / Color Grading / Speed Ramp / Image Overlay / Templates)
13. v10.2 · One-click "ตัดทั้งหมด" + UX Fix
14. v11.0 · UI/UX Overhaul · Modern Design System
15. v12.0 · 👤 Multi-User Auth + ☁️ Cloud Storage
16. v16.0 · 🪟 Chroma Key / Green Screen
17. วิธีติดตั้งและ Deploy เอง

🗨️ User × AI — คำสั่งจริงทั้งหมด เรียงตามเวลา

ทุก version ด้านล่างนี้เกิดจาก prompt ของ user จริงๆ — คลิกข้ามไปดูรายละเอียดแต่ละ version ได้

1. USER "ขอ CapCut-style web editor — มี audio trim + dead air detection · UI ภาษาไทย · รัน client-only (no backend) · FFmpeg.wasm ใน browser · deploy ที่ VPS 62.84.178.0" → AI ทำ v1.0 (13 features MVP)
2. USER "ไฟล์ใหญ่เกินไป ขอแบ่งให้เล็กลง — แต่ละไฟล์ไม่เกิน 500 บรรทัด · แยกตามหน้าที่" → AI ทำ v1.1 (Refactor 18 → 40 ไฟล์)
3. USER "อยากให้ลดเสียงรบกวนได้ — เปิด/ปิด + ปรับ strength · ใช้ FFmpeg filter" → AI ทำ v1.2 (Noise Reduction `afftdn`)
4. USER "กด detect silence แล้วขึ้น 'ไม่มีคลิปเสียงบนไทม์ไลน์' — ทำให้ง่ายขึ้น · มีวิดีโอตัวอย่างให้ลองไหม" → AI ทำ v1.3 (Demo Button + Empty State + 404 Fix)
5. USER "ทำให้หมดเลย — Auto-save · Export Presets · Transitions · Auto-Captions · AI Editor" → AI ทำ v2.0 (5 features ใหม่)
6. USER "ถ้า VDO มีเสียงมันควรจะทำได้เลย ไม่ใช่บอกต้องมีเสียงแยก" → AI ทำ v2.1 (extractAudioFromVideo + Whisper cache + hallucination filter)
7. USER "ทดลองจริงเต็มระบบ ตอนนี้ส่งออกไม่ได้ — Loading chunk 589 failed" → AI ทำ v6.0 (bundle ffmpeg-core local + CORP headers)
8. USER "ศึกษาอย่างละเอียดควรเพิ่มอะไร" → AI เสนอ 5 → "ทำให้หมดเลย" → AI ทำ v7.0 (Subtitle Styling + Project Naming + Volume Keyframes + Mobile + Share Link)
9. USER "เส้นเสียงทำให้มันเป็น wave form ไม่ได้หรอ" → เลือก "D ทำทั้ง 3 อย่าง" → AI ทำ v8.0 (Mini + Ghost + Keyframes curve)
10. USER "เอา vdo เพิ่ม 2 track ได้ไหม" → AI ทำ v9.0 (3 video tracks + Picture-in-Picture)
11. USER "🎞️ Text overlay · 🎨 Color grading · 🔀 Speed ramp · 🖼️ Image overlay · 📦 Template" → AI ทำ v10.0 / V3 (5 features — Color Grading + Speed Ramp + Image + Text + Templates)
12. USER "อัพเดทเอกสาร และ เอา code ตัวใหม่ไปแจก แบบที่เคยทำ commit push" → AI ทำ v10.1 (tutorial HTML + README + ZIP + GitHub push)

🎯 เป้าหมายและขอบเขต

คู่มือนี้เล่าทุกขั้นตอนจริงของการสร้าง CapCut-style Web Editor ด้วย AI ตั้งแต่วันแรกจนถึงวันนี้ — ทั้งหมดเป็น conversation จริงกับ AI (Mavis)

ผลลัพธ์สุดท้าย

Stack ที่ใช้

🗣️ คำสั่ง user (ตอนเริ่มโปรเจกต์)

🤖 AI ตอบ / เสนอแผน

✅ Features ที่เพิ่ม

• MediaLibrary · ลากไฟล์มาวาง / เลือกไฟล์ · probe video/audio metadata
• Timeline · 3 tracks default (video + 2 audio) · drag-drop clips · zoom
• ClipBlock · drag ขอบ trim, drag body move, double-click เลือก
• Preview · HTML5 video + audio, sync กับ currentTime, play/pause
• Waveform · วาด peaks ของ audio buffer (canvas)
• Silence Detection · วิเคราะห์ RMS → หาช่วงเงียบ (threshold -40dB, min 700ms)
• Apply Silence Removal · ลบคลิปใน timeline ตาม silence regions
• Export MP4 · FFmpeg.wasm + filter_complex (trim → scale → pad → concat → libx264/aac)
• KeyboardShortcuts · Space=play/pause, J/K/L, Ctrl+Z/Y, S=split
• Undo/Redo · snapshot stack (timeline state ทุกครั้งที่เปลี่ยน)
• SRT Import/Export · นำเข้า .srt + ดาวน์โหลดออก
• Properties Panel · clip/track properties + export settings
• Toast notifications · success/error feedback

📊 ผลลัพธ์

🗣️ คำสั่ง user

🤖 AI ตอบ

✅ ที่เปลี่ยน

• app.py → components/ · 1 ไฟล์ → 8 components (TopBar, MediaLibrary, Preview, Timeline, PropertiesPanel, Editor, KeyboardShortcuts, Toast)
• Timeline → timeline/ · แยกเป็น ClipBlock, Ruler, SilenceBlock, SubtitleMarkers, TimelineToolbar, TrackLabel, constants, detectSilence, snap
• Properties → properties/ · ClipProperties, TrackProperties, ExportProperties, SubtitleProperties, FormFields
• Preview → preview/ · findActiveVideo, usePlayback
• store → store/editor/ · types, clips, history, silence, selectors (slice pattern)
• lib → lib/ffmpeg/ · loader (singleton), filter-graph (pure builder), index.ts (orchestrator)

🗣️ คำสั่ง user

🤖 AI ตอบ

✅ ที่เพิ่ม

• Track.noiseReduction · field ใหม่ `{ enabled: boolean, amount: 0..1 }`
• filter-graph.ts · ใส่ `afftdn=nf=X` ใน audio chain ของแต่ละ track
• TrackProperties · checkbox toggle + slider amount
• initialTracks · default `enabled: false, amount: 0.5`

🗣️ คำสั่ง user

🤖 AI ตอบ

✅ ที่เพิ่ม

• public/test-media/ · test-video.mp4 (455KB), test-audio-with-silence.wav (3.3MB), test-subtitles.srt (450B)
• MediaLibrary.tsx · loadDemoContent() · ปุ่ม "โหลดตัวอย่าง 1 คลิก" (Sparkles icon, สีส้ม)
• Timeline.tsx · empty-state hint ใน track row (italic, opacity 60%)
• 404 fix · deploy path ใหม่ + restart systemd

🗣️ คำสั่ง user

🤖 AI ตอบ

✅ Feature 1: Auto-save Project (IndexedDB)

แก้ปัญหา "refresh = งานหายหมด"

• lib/storage/persistence.ts · IndexedDB singleton (2 stores: project + blobs)
• lib/storage/usePersistence.ts · Zustand subscribe → debounce 3s → snapshot
• RestoreBanner.tsx · "เจอโปรเจกต์ที่บันทึกไว้" + ปุ่ม "เปิดต่อ" / "เริ่มใหม่"
• TopBar · ปุ่ม Save + "เริ่มโปรเจกต์ใหม่" + "Auto-saved · 3s ago" badge

// Persistence flow
addAsset → debounce 3s → snapshot {tracks, clips, subtitles, assetsMeta}
saveAssetBlob(id, file, audioBuffer)  // binary เก็บแยก
useEditor.subscribe(state, prev) → shouldAutoSave(state, prev)
  → skip ถ้าแค่ playing/currentTime/toast เปลี่ยน
  → save snapshot ลง IndexedDB

✅ Feature 2: Export Presets

เลือก 1 คลิก → เปลี่ยน resolution/fps/bitrate ตาม platform

• 6 presets · TikTok 9:16 · Reels 9:16 · YouTube 16:9 · YT Shorts 9:16 · IG Square 1:1 · 720p 16:9
• 5 FPS options · 24/25/30/50/60
• 5 audio bitrates · 96k/128k/192k/256k/320k
• Auto-detect preset ที่ active จาก current width×height

✅ Feature 3: Transitions (xfade + acrossfade)

• 5 transition types · cut (default) · crossfade · fadeIn · fadeOut · dipToBlack
• Clip.transitionIn · { type, durationMs } · duration 50..3000 ms
• filter-graph.ts · ใช้ FFmpeg `xfade=transition=fade|fadeblack` + `fade=t=in|out` + `acrossfade`
• UI · Picker ใน ClipProperties — เลือก transition + ปรับ duration

✅ Feature 4: Auto-Captions (Whisper-tiny.wasm)

ถอดเสียงพูดอัตโนมัติด้วย AI ใน browser — ภาษาไทย + อังกฤษ + auto

• lib/captions/whisper.ts · AudioBuffer → 16kHz mono → Whisper pipeline → SubtitleCue[]
• Chunking · 25s chunks · 2s overlap · timestamps per chunk
• Merge · รวม adjacent chunks (max gap 1.5s) · capitalize first char
• SubtitleProperties.tsx · dropdown ภาษา + ปุ่ม "✨ ถอดเสียงเป็นข้อความ" + progress bar
• Webpack stub · onnxruntime-node/dist/binding.js → stub (browser doesn't need native)

✅ Feature 5: AI Editor (auto-cut highlight)

1 คลิก = AI ตัดไฮไลต์ให้อัตโนมัติ

• Scene Detection · canvas 16x16 thumb + pixel-diff + threshold 0.15 · max 60 frames
• Audio Loudness · AudioContext → RMS → dB per 0.5s window
• Scoring · mean_loudness_in_range − baseline + boundary bonus
• Greedy Top-K · non-overlapping segments ตาม target duration
• Output · สร้าง track ใหม่ "วิดีโอ AI" + "เสียง AI" + auto-drop clips

📊 Build & Performance

🗣️ คำสั่ง user

🤖 AI ตอบ

✅ ที่เพิ่ม

• extractAudioFromVideo(file) · FFmpeg.wasm: -i in.mp4 -vn -acodec pcm_s16le -ar 16000 -ac 1 out.wav → AudioBuffer
• SubtitleProperties · target = video ก่อน → extract audio → whisper
• AutoEditProperties · ใช้ audioBuffer ของ video (extract fallback)
• detectSilence.ts · extract audio จาก video ถ้า asset ไม่มี buffer
• model-cache.ts · IndexedDB cache + fetch interception

🗣️ คำสั่ง user

🤖 AI ตอบ

🔍 Root cause

@ffmpeg/core@0.12.6 เป็น single-thread — แต่ @ffmpeg/ffmpeg v0.12.10 คาดว่ามี worker file. URL ที่ถูกเรียกคือ coreURL.replace('.js', '.worker.js') แต่ใน 0.12.6 ไม่มีไฟล์นี้ — download ได้แค่ 62 bytes (404 page ของ unpkg)

✅ ที่แก้

• public/ffmpeg/ · bundle ffmpeg-core.js + ffmpeg-core.wasm + ffmpeg-core.worker.js (copy of core.js)
• loader.ts · CORE_BASE_DEFAULT = '/ffmpeg' (same-origin ไม่ต้องพึ่ง unpkg)
• next.config.js · add CORP headers for /ffmpeg/ and /_next/static/

// next.config.js — headers
{ source: '/_next/static/:path*',
  headers: [{ key: 'Cross-Origin-Resource-Policy', value: 'same-origin' }] },
{ source: '/ffmpeg/:path*',
  headers: [{ key: 'Cross-Origin-Resource-Policy', value: 'same-origin' }] }

🧪 Verify จริง

ทดสอบด้วย Playwright headless — โหลด demo → กด export → download MP4 จริง

📊 ผลลัพธ์ Export

🛠️ วิธีติดตั้งและ Deploy เอง

1. ติดตั้ง source code

# extract zip
unzip capcut-web-v6.zip
cd capcut-web

# install dependencies
npm install --no-audit --no-fund

# stub onnxruntime-node bindings (browser workaround)
cat > node_modules/onnxruntime-node/dist/binding.js << 'EOF'
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.binding = void 0;
exports.binding = {};
EOF

# download ffmpeg-core locally (~32 MB)
mkdir -p public/ffmpeg
cd public/ffmpeg
curl -L -o ffmpeg-core.js https://unpkg.com/@ffmpeg/[email protected]/dist/umd/ffmpeg-core.js
curl -L -o ffmpeg-core.wasm https://unpkg.com/@ffmpeg/[email protected]/dist/umd/ffmpeg-core.wasm
cp ffmpeg-core.js ffmpeg-core.worker.js   # single-thread core works as worker
cd ../..

# build
./node_modules/.bin/next build

# start dev server (port 3000)
./node_modules/.bin/next start -p 3000 -H 0.0.0.0

2. Deploy ด้วย systemd (Ubuntu 24.04)

# /etc/systemd/system/capcut-web.service
[Unit]
Description=CapCut Web Editor
After=network.target

[Service]
Type=simple
User=root
WorkingDirectory=/root/capcut-web
ExecStart=/usr/bin/npx next start -p 3000 -H 0.0.0.0
Restart=always
RestartSec=3
Environment=NODE_ENV=production

[Install]
WantedBy=multi-user.target

# enable + start
systemctl daemon-reload
systemctl enable capcut-web.service
systemctl start capcut-web.service
systemctl status capcut-web.service

3. Verify

curl -I http://localhost:3000/
# HTTP/1.1 200 OK
# Cross-Origin-Opener-Policy: same-origin
# Cross-Origin-Embedder-Policy: require-corp
# Cross-Origin-Resource-Policy: same-origin

4. UFW (firewall)

ufw allow 3000/tcp   # editor
ufw allow 3001/tcp   # tutorial (optional)

📊 สรุป Journey ทั้งหมด

🎓 สิ่งที่ AI เสนอเพิ่มเติม (Phase 9+)

ตอน user ถามว่า "ควรมีอะไรอีกดี" ผมเสนอ roadmap ทั้งหมด 13 อย่าง:

1. Phase 7 · Auto-save + Export Presets + Transitions
2. Phase 8 · Auto-Captions + AI Editor + Templates
3. Phase 9 · AI Color Grading + Built-in Music + Screen Recording

ตอนนี้ Phase 7+8+9 จบแล้ว + เพิ่ม Multi-Video PIP, Text Overlay, Template Library ใน V3 (28 features)!

📈 Stats

🗣️ คำสั่ง user

🤖 AI ตอบ

✅ Phase 1: Subtitle Styling

• types/index.ts · SubtitleStyle type · position, fontSize, color, outline, bold, background
• SubtitleProperties.tsx · 6 ปุ่ม "บน/กลาง/ล่าง" + sliders + color pickers + live preview swatch
• ffmpeg.ts · buildAss() · สร้างไฟล์ ASS พร้อม force_style → burn-in ด้วย subtitles='subs.ass'

✅ Phase 2: Project Naming + Multi-Project

• lib/storage/persistence.ts · DB v2 schema (projects / blobs / meta stores) · composite key {projectId}:{assetId}
• store/editor/project.ts · setProjectName / loadProjectById / newProject / deleteCurrentProject
• TopBar.tsx · คลิกชื่อโปรเจกต์ → rename inline · ปุ่ม "📁 N โปรเจกต์" → dropdown list

✅ Phase 3: Volume Keyframes

• lib/ffmpeg/volume-keyframes.ts · สร้าง FFmpeg volume='expression' ด้วย between(t,a,b)*lerp(...)
• ClipProperties.tsx · mini SVG curve viz + ตาราง keyframe time/value

✅ Phase 4: Mobile Responsive

• Editor.tsx · Tailwind breakpoints (md:, lg:) — MediaLibrary + Properties เป็น collapsible <details> บน mobile

✅ Phase 5: Share Link

• lib/share/url-share.ts · gzip + base64url ใน URL hash #p=... · ไม่ผ่าน server, ไม่มี privacy issue
• ShareRestore.tsx · auto-import บน mount
• TopBar.tsx · ปุ่ม "แชร์" — copy URL to clipboard

🗣️ คำสั่ง user

🤖 AI ตอบ

✅ ที่เพิ่ม

• lib/audio/waveform-peaks.ts · computeWaveformPeaks() + cache Map · OfflineAudioContext decode → 256 buckets
• components/MiniWaveform.tsx · SVG peaks path (positive + negative half)
• components/timeline/TrackLabel.tsx · usePeaks hook → MiniWaveform · fallback เป็น GhostLine
• components/timeline/ClipBlock.tsx · SVG overlay polyline + circles สำหรับ volume keyframes
• components/timeline/GhostWaveform.tsx · deterministic sine+noise จาก track.id
• components/timeline/ghost-waveform-seed.ts · hashSeed() + mulberry32() + ghostBuckets() shared กับ TrackLabel

🗣️ คำสั่ง user

🤖 AI ทำ

✅ ที่แก้

• Timeline.tsx · runDetection() · early-return + clear error เมื่อไม่มี audio clips
• Timeline.tsx · runDetectAndCut() · detect + applySilenceRemoval ใน 1 ฟังก์ชั่น
• TimelineToolbar.tsx · ปุ่มใหม่ "✂️ ตัดทั้งหมด" (สีแดง + shadow-glow-red)
• Tooltip · อธิบาย 2-step flow
• Toast · "พบ 4 ช่วงเงียบ — กด ลบทั้งหมด"

🧪 Verified จริง (headless Chrome + CDP)

// BEFORE: 2 clips total 15s
// Click "ตัดทั้งหมด"
// AFTER:  6 clips total 39s
✅ ทำงานจริง

🗣️ คำสั่ง user

🤖 AI ทำ

✅ Design Tokens ใหม่

• Colors · surfaceHover, borderLight, success/warning/danger
• Box shadows · shadow-soft, shadow-glow-blue/orange/red
• Animations · fade-in, slide-up, slide-in-right, pulse-soft

✅ UI Primitives ใหม่ (components/ui/)

• Button.tsx · 5 variants × 3 sizes + iconOnly/loading/active
• Panel.tsx · Collapsible Section · icon + badge + chevron

✅ Component Overhaul (10 components)

• TopBar · gradient logo + green status dot
• MediaLibrary · animated dropzone · card assets with ring
• Preview · round play button with glow · timecode chip
• PropertiesPanel · collapsible Sections with chevron
• FormFields · Slider with value display · Segmented control
• TimelineToolbar · colored variants (blue/orange/red)
• Toast · 4 levels with icon container + gradient bg
• Timeline · diamond playhead cap with glow
• globals.css · glassmorphism · custom scrollbar · shimmer · tooltip with arrow
• FormFields · Section · gradient header + chevron toggle

🗣️ คำสั่ง user

🤖 AI ทำ

✅ Backend (Node.js + Express + SQLite + JWT)

• POST /api/auth/register · bcrypt password hash · JWT 30d
• POST /api/auth/login · ตรวจสอบ hash · คืน JWT
• GET /api/auth/me · ดึง user จาก JWT
• POST /api/auth/logout · client-side clear token
• GET/POST/PUT/DELETE /api/projects · CRUD โปรเจกต์ (JSON snapshot)
• PUT/GET/DELETE /api/projects/:id/assets/:assetId · binary blob upload/download
• capcut-auth.service · systemd auto-start on boot

✅ Frontend (Next.js + zustand)

• auth-client.ts · fetch wrapper · JWT in localStorage
• store/auth.ts · user / login / logout / mode (auto/local/server)
• AuthModal.tsx · login/register modal · gradient + glass design
• TopBar · login button + user chip dropdown with mode picker
• server-mirror.ts · wrapper เลือก IndexedDB หรือ API ตาม mode
• usePersistence · auto-sync local↔server · push local project on login

✅ Storage Layout

/opt/capcut-auth/
├── data.db                       (SQLite users + bcrypt)
└── users/{userId}/
    ├── projects.json             (project metadata)
    ├── projects/{pid}.json       (full project state)
    └── assets/{pid}/{assetId}.ext (binary blobs)

✅ Storage Modes (per-user setting)

• auto (default) · ใช้ server ถ้า login · ใช้ local ถ้าไม่ login
• server · force server · เห็นข้อมูลทุกอุปกรณ์
• local · เก็บบนเครื่องอย่างเดียว (IndexedDB)

🧪 Verified จริง (headless Chrome + CDP)

=== 1) Register ===
✓ POST /api/auth/register → 200 (token: 195 chars)
✓ Initial project auto-saved to server

=== 2) Check server projects ===
✓ GET /api/projects → 3 projects on server

=== 3) Logout ===
✓ POST /api/auth/logout → 200
✓ localStorage token cleared

=== 4) Re-login ===
✓ POST /api/auth/login → 200
✓ Token restored
✓ Server projects reappear

🗣️ คำสั่ง user

🤖 AI ทำ

✅ Type ใหม่ (src/types/index.ts)

export interface ChromaKey {
  enabled: boolean;
  color: string;          // '#00ff00' (default bright green)
  similarity: number;     // 0.01-0.5 (FFmpeg chromakey range)
  blend: number;          // 0-0.3 (edge softness)
}

export const DEFAULT_CHROMA_KEY: ChromaKey = {
  enabled: false,
  color: '#00ff00',
  similarity: 0.15,
  blend: 0.05,
};

export interface Clip {
  // ...
  chromaKey?: ChromaKey;
}

✅ FFmpeg Filter (src/lib/ffmpeg/filter-graph.ts)

// Insert chromakey before overlay
const chromaFilters = [];
for (const c of clips) {
  if (c.trackId === track.id && c.chromaKey?.enabled) {
    const hex = c.chromaKey.color.replace('#', '').padEnd(6, '0').slice(0, 6);
    chromaFilters.push(
      \`chromakey=0x\${hex}:\${c.chromaKey.similarity.toFixed(3)}:\${c.chromaKey.blend.toFixed(3)}\`,
    );
  }
}
// Pipeline: [v0][chromakey+scale+pad]overlay=...

✅ UI (src/components/properties/ClipProperties.tsx)

• Section ใหม่ "ตัดฉากหลัง (Chroma Key)" — แสดงเฉพาะ overlay tracks (v2/v3)
• Toggle switch (เขียว = เปิด, เทา = ปิด)
• Color picker + hex input
• 4 presets: เขียว/น้ำเงิน/แดง/ขาว
• Similarity slider (0.01-0.5) + Blend slider (0-0.3)
• ปุ่ม "รีเซ็ต Chroma Key"

✅ Clip Badge (src/components/timeline/ClipBlock.tsx)

จุดสีเล็กๆ ก่อนชื่อคลิปเมื่อเปิด chroma — เห็นได้ทันทีใน timeline

🧪 Verified จริง (real FFmpeg)

// Manual test
const clip = { chromaKey: { enabled: true, color: '#00ff00', similarity: 0.2, blend: 0.05 } };
const filter = \`[1:v]\${chromaPrefix}scale=192:108,...[ck];[0:v][ck]overlay=main_w-overlay_w-38:main_h-overlay_h-38\`;
ffmpeg -i bg.mp4 -i green.mp4 -filter_complex "\${filter}" -t 2 result.mp4
✓ Output: 3669 bytes valid MP4