DIRECTOR STUDIO

01.แนะนำ Director Studio

Director Studio คือเว็บแอป multi-tenant สำหรับสร้างซีรีส์สยองขวัญไทย "คืนซ่อนวิญญาณ" (The Night of Hidden Souls) ด้วย AI ใช้ 3-Stage Pipeline ที่ผสาน LLM (เขียนบท) เข้ากับ Veo 3.1 (สร้างวิดีโอ) ทำงานแบบ background jobs — ปิด browser ได้

🎯 จุดเด่น

• Multi-tenant — หลาย user แต่ละคนมีข้อมูล + ไฟล์ + API key แยกกัน
• Per-user secrets — Veo JWT และ LLM key เก็บแบบเข้ารหัส (Fernet AES-128)
• 3-Stage Pipeline — Script → Veo Prompts → Video (background async)
• WebSocket live updates — เห็น progress แบบ real-time ไม่ต้อง poll
• 5 Templates — เริ่มงานจาก preset ได้เลย ไม่ต้องเขียนเอง
• Public share — แชร์ read-only link ให้ใครก็ได้
• Export Markdown/JSON — เอา script ไปใช้ที่อื่น
• Analytics dashboard — ดู credit usage, success rate, activity chart
• Admin panel — ดู users, stats (ไม่เห็น secrets ของ user อื่น)

🌐 Live URLs

• https://directorstudio.sj88ai.com/ (primary)
• https://directorstudio.sj88.online/ (alt)
• /docs/ (คู่มือนี้)

02.เริ่มต้นใช้งาน (Quick Start)

🔑 ขั้นตอนที่ 1: เตรียม API Keys (ทำครั้งเดียว)

1. ไป genaipro.io → login → Avatar → Manage Account → API Key → Create API Key → copy JWT (ใช้กับ Stage 3 วิดีโอ)
2. ไป api.minimax.io → login → API Keys → copy key (ขึ้นต้น sk-cp-...) (ใช้กับ Stage 1 + 2)

📝 ขั้นตอนที่ 2: สมัคร + ตั้งค่า

1. เปิด https://directorstudio.sj88ai.com/
2. กดแท็บ "สมัครสมาชิก" → กรอกอีเมล + รหัสผ่าน (≥ 6 ตัว) → กด "สมัคร"
3. คนแรกจะกลายเป็น admin อัตโนมัติ
4. ไปแท็บ "⚙ ตั้งค่า"
5. วาง LLM API Key ในช่องแรก → 💾 บันทึก
6. วาง Veo JWT ในช่องที่สอง → 💾 บันทึก
7. กด "🧪 ทดสอบ" → จะเห็น quota แสดงที่ด้านบน

🎬 ขั้นตอนที่ 3: สร้าง Episode แรก

1. แท็บ "📁 โปรเจกต์" → กด "+ โปรเจกต์ใหม่"
2. เลือก Template (เช่น "Horror Village") หรือเริ่มจาก Blank
3. ตั้งชื่อ → กด "สร้าง"
4. ในโปรเจกต์ → กด "✨ Generate Script (AI)"
5. ใส่ idea 1-2 ประโยค → กด "✨ Generate Script" → รอ ~30 วินาที
6. AI เขียนบทเป็น JSON → กด "💾 บันทึกเป็น EP1"
7. เปิด EP1 → แท็บ "🎬 Veo" → กด "🎬 Stage 2: Generate Veo Prompts" → รอ ~30 วิ
8. AI แปลง script → Veo YAML → กด "🎥 Generate Video" ที่ scene ที่ต้องการ
9. รอ 60-120 วิ → ได้ MP4 พร้อมเล่น

03.ส่วนประกอบหน้าจอ (UI Tour)

🖥 Top Navigation

แถบเมนูด้านบนประกอบด้วย 7 แท็บ:

📸 Screenshots

1. หน้า Login

2. หน้าสมัครสมาชิก

3. หน้าโปรเจกต์ (หลัง login)

แสดงรายการโปรเจกต์ + ปุ่มสร้างใหม่

04.📁 การจัดการโปรเจกต์

สร้างโปรเจกต์ใหม่

1. คลิก "+ โปรเจกต์ใหม่"
2. เลือก Template (หรือ "📄 เริ่มจากศูนย์")
3. ตั้งชื่อโปรเจกต์ (ถ้าเลือก template จะใส่ชื่อให้อัตโนมัติ)
4. เลือกประเภท: Episode (ซีรีส์) หรือ Short (หนังสั้น)
5. คลิก "สร้าง"

Modal เลือก Template

Modal แสดง 5 templates ให้เลือก

Template ถูกเลือก

⚙ Project Settings (ปุ่ม ⚙)

Project Settings มี 4 ฟีเจอร์:

• เปลี่ยนชื่อ — แก้ชื่อโปรเจกต์ (กด 💾 บันทึก)
• Share — สร้าง public link (กด 📋 Copy เพื่อคัดลอก)
• Export JSON — ดาวน์โหลดโปรเจกต์ทั้งหมดเป็น JSON
• Delete — ลบโปรเจกต์ (ต้อง confirm)

05.📚 Templates Library

5 preset templates พร้อม seed episodes + characters:

06.🎬 การสร้าง Episode

หน้าโปรเจกต์ + Episodes

รายการ Episodes + ปุ่มดำเนินการ

Episode Modal — แท็บ Script

แสดง scenes + dialogue + emotional_beat + mood

Episode Modal — แท็บ Veo

แสดง Veo prompts + VO + audio cue + camera

Episode Modal — แท็บ Videos

07.📝 Stage 1: Generate Script (LLM)

1เขียนบทจาก idea ด้วย AI

ผลลัพธ์: JSON script (Thai horror) พร้อม scenes, dialogue, emotional_beat

📥 Input

• Idea / Logline (1-2 ประโยค)
• Episode number (auto-detected)
• จำนวน scenes (1-10)
• Style (default: "Thai horror, dark, atmospheric, character-driven")
• Previous episodes (auto-included for continuity)

Modal Generate Script

Generate Script modal - ใส่ idea + เลือก episode

📤 Output (ตัวอย่าง)

{
  "episode_title": "ตอนที่ 1: บ้านร้าง",
  "episode_title_en": "EP1 — The Empty House",
  "episode_logline": "น้ำกลับมายังหมู่บ้านเกิด...",
  "characters_in_ep": ["nam", "ghost", "yai_kaew"],
  "scenes": [
    {
      "id": "S01_01",
      "title": "ทางเข้าหมู่บ้าน",
      "location": "ถนนลูกรังหน้าหมู่บ้าน",
      "time_marker": "18:47 — พลบค่ำ",
      "characters": ["nam"],
      "action": "close-up รองเท้าหนังสีดำ...",
      "dialogue": [{"speaker": "น้ำ", "line": "ยี่สิบปีแล้ว..."}],
      "emotional_beat": "หวาดหวั่นผสมเหงา"
    }
  ]
}

🔄 Flow

1. คลิก ✨ Generate Script (AI)
2. ใส่ idea → คลิก ✨ Generate Script
3. รอ ~30 วินาที (ทำงานใน background)
4. ดู progress ได้ที่แท็บ Jobs
5. เมื่อเสร็จ → คลิก 💾 บันทึกเป็น EP1

⚠️ ใช้เวลา: ~30 วินาที/ครั้ง (LLM call)
💰 Cost: ~0.1 credits (LLM token)

08.🎬 Stage 2: Generate Veo Prompts (LLM)

{
  "variant": "VARIANT_EP1_BAANRAAN",
  "video_config": {
    "duration": "8s",
    "aspect": "9:16",
    "fps": 30,
    "look": "Cinematic Thai horror, desaturated teal-orange grade"
  },
  "timeline": [
    {
      "id": "S01_01",
      "t": "0.0-8.0",
      "reference_image": ["nam_ref"],
      "prompt": "SCENE: ทางเข้า (Village Entrance)\n\n- [nam_ref] walks slowly...\n- dialogue: \"กลับมาแล้ว\"\n- audio: distant crickets, soft wind",
      "camera": {"move": "slow dolly in", "lens": "35mm"},
      "vo": "กลับมาแล้ว",
      "audio_cue": "distant crickets, soft wind, footsteps on gravel"
    }
  ],
  "negative": ["blood", "weapons", "no dialogue", "no audio"]
}

09.🎥 Stage 3: Generate Video (Veo 3.1)

08🎨 Stage 0: Generate Image (v2.5+)

สร้างภาพ reference ตัวละคร / scene จาก prompt โดยใช้ GTMage-2 (Google Gemini 2.5 Flash Image) ผ่าน genaipro.io — ไม่ต้องอัปโหลด ref เอง เหมาะกับโปรเจกต์ใหม่ที่ยังไม่มี character image

ใช้งาน

1. เปิด Episode → กด 🎨 Stage 0: Generate Image
2. พิมพ์ prompt (ภาษาอังกฤษได้ผลดีที่สุด)
3. เลือก aspect ratio (1:1, 16:9, 9:16, 3:2, ฯลฯ)
4. กด Generate → job เข้า background queue
5. รอ 1-3 นาที → ภาพออกมา + บันทึกในโปรเจกต์อัตโนมัติ

Aspect ratios ที่รองรับ

Prompt Tips

• ใส่รายละเอียด: "A young Thai woman, 25 years old, long black hair, soft smile, traditional Thai silk dress, golden hour lighting"
• ระบุ mood: "cinematic, dark, atmospheric, photorealistic, 8K"
• หลีกเลี่ยงคำต้องห้าม: "blood", "weapon", "violence", "knife" (ระบบจะ reject)
• ใช้ reference images เพื่อ consistency: ผ่าน API parameter reference_images (frontend ปัจจุบันยังไม่ expose)

ตัวอย่าง

Prompt: "A mysterious Thai village elder woman in traditional indigo shirt, holding an old lantern, dark misty forest background, cinematic horror, photorealistic"
Aspect: 16:9
Result: ~2-3 นาที

API

POST /api/images/generate
{
  "project_id": "...",
  "prompt": "...",
  "aspect_ratio": "16:9",  // or 1:1, 9:16, 3:2, 2:3, 4:3, 3:4
  "n": 1,                  // 1-4
  "sync": false            // true = wait for completion
}

Powered by GTMage-2 · uses your Veo JWT (same one as Stage 2/3)

10.⚙ ตั้งค่า (API Keys + Quota)

หน้า Settings

Veo JWT (genaipro.io)

1. ไป genaipro.io → login → Avatar → API Key → Create
2. Copy JWT (ขึ้นต้น eyJ...)
3. วางในช่อง "🔑 Veo API Key" → กด 💾 บันทึก
4. กด 🧪 ทดสอบ เพื่อดู quota

LLM API Key

1. ไป api.minimax.io → login → API Keys
2. Copy key (ขึ้นต้น sk-cp-...)
3. วางในช่อง → กด 💾 บันทึก

Quota Display (auto)

เมื่อบันทึก JWT แล้ว quota จะแสดงอัตโนมัติ:

• 👤 user — username
• 💰 balance — เครดิตคงเหลือ
• 🎬 credits remaining — เครดิตที่ใช้ได้
• 📊 used — % ที่ใช้ไป
• 📅 หมดอายุ — วันหมดอายุของแพ็กเกจปัจจุบัน

11.📋 Background Jobs

หน้า Jobs

ฟีเจอร์

• ⏳ กำลังทำ — jobs ที่กำลัง run (auto-refresh ทุก 3s)
• ✅ เสร็จล่าสุด — 20 jobs ล่าสุดที่เสร็จ/failed
• ⏹ Cancel — ยกเลิก job ที่ยังไม่เสร็จ
• 🔄 Refresh — refresh ทันที
• Nav badge — แสดงจำนวน active jobs ที่ topnav

WebSocket Live Updates

ระบบใช้ WebSocket (/api/ws?token=...) ส่ง update แบบ real-time เมื่อ job state เปลี่ยน:

• type: "snapshot" — รายการ jobs ทั้งหมดตอน connect
• type: "update" — job เปลี่ยน state (status, progress, message, result)

12.📊 Analytics

หน้า Analytics

สถิติที่แสดง

13.🔗 Public Share

หน้า Public Share

หน้านี้เปิดได้โดยไม่ต้อง login

วิธีสร้าง Share Link

1. เปิดโปรเจกต์ → คลิก ⚙ Project Settings
2. ดู "🔗 Share" section → URL จะแสดงอัตโนมัติ
3. คลิก 📋 Copy → URL ถูกคัดลอก
4. แชร์ URL นี้ให้ใครก็ได้ — เปิดดูได้ทันที (read-only, ไม่ต้อง login)

URL format

https://directorstudio.sj88ai.com/share/{project_id}

14.📤 Export

Episode Export (per episode)

เปิด Episode → ปุ่ม "📝 Export .md" หรือ "📋 Export .json"

Markdown format

# ตอนที่ 1: คืนแรก

*EP1 — The First Night*

> น้ำกลับมาที่หมู่บ้านเกิดหลังจาก 20 ปี...

**Characters:** nam, jay, ghost

## Scenes

### Scene 1: ทางเข้าหมู่บ้าน
*หมู่บ้านเกิด — เย็น พลบค่ำ*

**Characters:** nam

**Action:**
close-up รองเท้า...

**Dialogue:**
- **น้ำ:** "ยี่สิบปีแล้ว..."

*Mood: ความเหงา*

## 🎬 Veo Prompts (3)

### Clip 1 (t=0.0-8.0)
**Refs:** nam_ref

```text
SCENE: ทางเข้า...
```

Project Export (ทั้งโปรเจกต์)

เปิด Project Settings → "📤 Export" → "⬇ Download JSON"

15.🛡 Admin Panel

หน้า Admin

ผู้ใช้แรก = Admin อัตโนมัติ

คนแรกที่สมัครจะกลายเป็น admin อัตโนมัติ คนต่อ ๆ ไปเป็น user

Admin เห็นอะไร

• 📊 Stats: จำนวน users, projects, tasks, success
• 👥 Users: email, display_name, role, created_at
• 📁 Projects: project list (no data)
• 🛠 Settings: has_veo_jwt + has_llm (boolean เท่านั้น)

Admin ไม่เห็นอะไร

Admin actions

• ลบ user (ยกเว้นตัวเอง)
• ดู project list
• ดู stats

16.🔐 Security & Privacy

🔐 Encryption

🛡 Threat Model

• DB leak → secrets ปลอดภัย (Fernet-encrypted, แยก key)
• Frontend compromise → ไม่เห็น secrets (อยู่ใน DB เท่านั้น)
• Admin compromise → ดูได้แค่ has_* flag, ไม่ decrypt ได้
• Backend compromise → secrets เข้าถึงได้ (ต้อง compromise server)

🚨 Best Practices

• ห้าม share JWT/API key กับใคร
• ใช้ password ที่แข็งแรง (≥ 12 ตัว)
• ถ้า key หลุด → กด "🗑 ลบ" ใน Settings แล้วใส่ใหม่
• JWT Veo หมดอายุเร็ว (~5-10 นาที) — เตรียม key ใหม่ให้พร้อม
• Logout ทุกครั้งเมื่อใช้เสร็จ (เครื่องสาธารณะ)

17.📡 API Reference

Base URL: https://directorstudio.sj88ai.com/api

Auth: Authorization: Bearer <token> (header)

🔓 Public

🔒 Authenticated

👑 Admin only

🔌 WebSocket

wss://directorstudio.sj88ai.com/api/ws?token=<jwt>

// Receives:
// {type: "snapshot", jobs: [...]}
// {type: "update", job_id, status, progress, message, result, error}

📝 Example: Login + Submit Job

# 1. Login
curl -X POST https://directorstudio.sj88ai.com/api/auth/login \
  -H 'Content-Type: application/json' \
  -d '{"email":"admin@sj88ai.com","password":"admin1234"}'
# → {"access_token": "eyJ...", "user": {...}}

# 2. Submit background job
curl -X POST https://directorstudio.sj88ai.com/api/jobs \
  -H "Authorization: Bearer $TOKEN" \
  -H "Content-Type: application/json" \
  -d '{
    "type": "script_gen",
    "input": {
      "prompt": "น้ำกลับมาที่หมู่บ้านเกิด",
      "episode_number": 1,
      "num_scenes": 5
    }
  }'
# → {"ok": true, "job_id": "abc123", "status": "queued"}

# 3. Poll job
curl -H "Authorization: Bearer $TOKEN" \
  https://directorstudio.sj88ai.com/api/jobs/abc123
# → {"status": "completed", "result": {"script": {...}}}

18.❌ Troubleshooting

❌ "JWT is banned or expired"

สาเหตุ: genaipro.io ban JWT หลังใช้งาน 5-10 นาที

แก้: ไป genaipro.io → Avatar → API Key → Create API Key ใหม่ → ใส่ใน Settings

❌ "error code: 1010" (Cloudflare block)

สาเหตุ: genaipro.io block IP ของ server

แก้: Backend ใช้ User-Agent: Mozilla/5.0 แล้ว — ถ้ายังเจอ ลองเปลี่ยน key ใหม่

❌ "PUBLIC_ERROR_AUDIO_FILTERED"

สาเหตุ: Veo ปฏิเสธ prompt ที่ไม่มี audio cue

แก้: Backend auto-inject audio cues แล้ว — ถ้ายังเจอ แก้ prompt ให้ audio ชัด

❌ "PUBLIC_ERROR_DANGER_FILTER"

สาเหตุ: prompt มี "blood", "weapons", "knives"

แก้: Backend auto-replace แล้ว — ใช้ "red mist", "objects", "tools"

❌ "No LLM API key configured"

แก้: Settings → LLM API Key → วาง sk-cp-... → 💾

❌ "No Veo JWT configured"

แก้: Settings → Veo API Key → วาง eyJ... → 💾

❌ Login ไม่ได้ / token หมดอายุ

แก้: Token อายุ 30 วัน — login ใหม่ได้เลย

❌ Veo 404 (task not found)

สาเหตุ: poll เร็วเกินไป ก่อน genaipro จะ register

แก้: Backend return processing แทน error แล้ว — รอต่อ

❌ "At least 1 reference image is required"

สาเหตุ: /opt/director-studio/refs/ ไม่มีภาพ

แก้: cp /home/.../www/refs/* /opt/director-studio/refs/

19.💬 FAQ

Q: ต่างจาก Veo API ตรง ๆ ยังไง?

A: Director Studio เพิ่ม: LLM script generation, project organization, character management, Veo prompt optimization, queue system, history, analytics, multi-user. Veo API ตรง ๆ เป็นแค่ video generation

Q: ใช้ API ของผู้ให้บริการอื่นได้ไหม?

A: ตอนนี้รองรับแค่ genaipro.io (Veo) + MiniMax (LLM) — เพิ่ม provider อื่นได้ในอนาคต

Q: เก็บข้อมูลที่ไหน?

A: SQLite ที่ /opt/director-studio/data/studio.db (บน server)

Q: Backup ข้อมูลได้ไหม?

A: ได้ — cp /opt/director-studio/data/studio.db backup.db

Q: ทำ mobile app ได้ไหม?

A: UI responsive ใช้บนมือถือได้ (แต่ไม่มี dedicated app)

Q: มี API rate limit ไหม?

A: Veo JWT มีอายุ ~5-10 นาที (ต้อง refresh) — ไม่มี rate limit ที่ backend

Q: ทำ collaboration ร่วมกันได้ไหม?

A: ตอนนี้ทำได้ผ่าน Public Share link — multi-user edit ยังไม่มี

Q: Export script เป็น PDF ได้ไหม?

A: ตอนนี้ export เป็น .md หรือ .json — PDF ต้อง convert เอง (หรือ print to PDF)

Q: ใช้ token เดียวกันหลาย browser ได้ไหม?

A: ได้ — JWT stateless, แต่ session จะ sync เมื่อ refresh

Q: ทำไม quota หายไป?

A: genaipro.io แพ็กเกจหมดอายุ + ถูกใช้ไป — ระบบกรองเฉพาะที่ยังไม่หมดอายุ

Q: Script ไม่ออกมาเป็นภาษาไทย?

A: ใส่ idea เป็นภาษาไทย + เลือก style "Thai horror" — LLM จะเขียนเป็นไทย

Q: เพิ่ม character ใหม่ได้ไหม?

A: ตอนนี้ใช้ได้แค่ nam, jay, ghost, yai_kaew — Image Generation Stage 0 (กำลังพัฒนา) จะให้สร้าง character ใหม่ได้