ได้ workflow สำหรับการทำซับไตเติลให้ tech talk ภาษาไทย ที่ค่อนข้างจะแฮปปี้กับมันละ~
จุดเริ่มต้นของโปรเจคนี้ — เป็น pain point อย่างนึงเวลาดู tech talks ภาษาไทย คือเวลาอยู่ข้างนอกแล้วขี้เกียจใส่หูฟังและไม่อยากเปิดเสียง ถ้าเป็น talk ภาษาอังกฤษยังสามารถเปิด closed captions ดูได้ เพราะ auto-generated captions ค่อนข้างแม่น แต่วิดีโอคอนเทนท์ภาษาไทยส่วนมากยังไม่มี auto-generated captions (แต่ถึงมี อย่างเช่นตอนนี้ Facebook Live ก็มี caption ภาษาไทยแล้ว ก็ยังถอดคำพูดได้ค่อนข้างมั่วอยู่)
พวกคลิปเวลาที่ผมไปพูดในงานต่างๆ ผมก็เลยทำซับไตเติลใส่ไว้ด้วย เพื่อความสะดวกของคนดู
แต่เนื่องจากการทำซับไตเติลมันกินเวลาตัวเองค่อนข้างเยอะ (ต่อให้มีเครื่องมือช่วยหลายๆ ตัว) เลยมีแรงทำแค่คลิปของตัวเอง… แต่ระหว่างนั้นก็ research เกี่ยวกับเรื่อง ASR (automatic speech recognition) ไปเรื่อยๆ จนในที่สุดได้เป็น workflow นี้ครับบ
workflow ตอนนี้ มีการใช้โมเดล 3 ตัวร่วมกัน:
・ Gemini 1.5 Pro — เอาไว้ถอดคำพูดจากวีดีโอ ซึ่งตอนนี้ผมมองว่าดีที่สุดในตลาด (เล่าไว้ในโพสต์ที่แล้ว) เพราะด้วยความที่เป็น multimodal language model มันมีความรู้คำศัพท์หลายๆ ภาษา รวมถึงศัพท์เทคนิคด้วย และมันยังสามารถอ่านสไลด์ในวีดีโอเพื่อถอดคำพูดให้แม่นขึ้นอีกด้วย แต่มัน process วีดีโอเป็น chunk ละ 1 วินาที เลยไม่สามารถดึง timing information แบบละเอียดได้
・ Speechmatics — เป็น API ไว้ทำ speech recognition ซึ่งซัพพอร์ตภาษาไทย ที่เลือกตัวนี้เพราะ API ใช้ง่าย มี Node.js SDK ให้ใช้เลย และเวลาถอดคำพูดออกมาจะได้ timing information ที่ค่อนข้างแม่นด้วย และสามารถใช้งานได้ฟรีกับคอนเทนท์รวมกัน 4 ชั่วโมงต่อเดือน
・ Claude 3.5 Sonnet — เอามาใช้ combine ตัว transcript จาก Gemini และ timing information จาก Speechmatics เข้าด้วยกัน และช่วยจัดรูปแบบ transcript ให้ดียิ่งขึ้น (เช่น ปรับการใช้ตัวพิมพ์เล็กพิมพ์ใหญ่ของคำภาษาอังกฤษ, ปรับการเว้นวรรค การขึ้นบรรทัดใหม่ให้เหมาะสมขึ้น, ตัดคำ filler word เช่น เอ่อ อ่า และ clean up transcript กรณี stutter)
ตัวอย่าง output จากโมเดลต่างๆ:
- ใช้ Gemini ถอดคำพูด ได้ transcript ที่แม่นยำ แต่ไม่มี timing information และมีการสะกดคำที่ไม่สม่ำเสมอ: → “ก็ เซชชั่นนี้นะครับ เว็บแอป optimization นะครับ”
- ใช้ Claude ปรับปรุง transcript → “ก็เซชชั่นนี้นะครับ web app optimization นะครับ”
- ใช้ Speechmatics ถอดคำพูด ได้ transcript ที่ไม่ค่อยแม่นเท่าไหร่ แต่มี timing information → “[0.5]ก็[0.9]เซ็กชั่น[1.2]นี้[1.3]นะ[1.4]ครับ[1.6]เว็บ[1.9]แอพ[2.2]ออสโมซิส[2.8]ชัน[3.0]นะ[3.1]ครับ[3.3]”
- ใช้ Claude รวม (2.) กับ (3.) เข้าด้วยกัน → “[0.5]ก็เซชชั่นนี้นะครับ web app optimization นะครับ[3.3]”
เสร็จแล้วก็เอาผลลัพธ์จาก (4.) มาสร้างเป็นไฟล์ซับไตเติล แล้วก็ manual review เช็คความถูกต้อง แก้จุดที่ผิด
เมื่อก่อน เวลาใช้เครื่องมือ ASR ธรรมดา (e.g. OpenAI Whisper) ตอนรีวิว ผมต้องคอยแก้ซับไตเติลเองเกือบทุกบรรทัด เพราะโมเดลยังถอดคำพูดผิดและสะกดผิดเรื่อยๆ (ทำให้การ review และ manual fix เป็นส่วนที่กินเวลาเยอะสุดๆ)
แต่พอใช้ workflow นี้แล้ว ใช้เวลา review และ manual fix น้อยลงมากๆ จนสามารถ review ซับไตเติลโดยการเล่นวีดีโอด้วยความเร็ว 2x ได้
แต่ workflow นี้ค่อนข้างแพง — วีดีโอ 1 ชั่วโมง จ่ายค่าโมเดลไปประมาณ ~250 บาท (ซึ่งปกติ ASR model ทั่วไป ไฟล์เสียง 1 ชั่วโมง ราคาแค่ ~10 บาท)
แต่เมื่อเทียบกับเวลาที่ใช้ในการ manual review ที่ประหยัดไปได้ ก็มองว่าค่อนข้างคุ้มอยู่
ถึงผลลัพธ์จะยังไม่ได้ดี งานไม่ได้เนี้ยบ ไม่ได้เก็บรายละเอียดเท่าใช้ professional captioning service จริงๆ (ลองไปอ่านพวก Timed Text Style Guide ของ Netflix ดู จะพบว่ามีรายละเอียดยิบย่อยเยอะมาก) แต่ก็คิดว่าเป็น trade-off ที่ค่อนข้างโอเคอยู่สำหรับอีเว้นต์ฟรีครับบ (คือทำซับไตเติลในคุณภาพระดับที่พอรับได้ ด้วยแรงในระดับที่พอไหว และในราคาที่พอไหว)
ตอนนี้ talk ต่างๆ ของงาน BKK.js #20 ใส่ซับไตเติล และแบ่งเป็น chapters ครบแล้ว ไปดูตัวอย่างได้ที่
→ https://creatorsgarten.org/videos/bkkjs20
โค้ดที่ใช้ ไปดูได้ที่
→ https://github.com/dtinth/autosub
by the way, ตอนนี้เว็บของ Creatorsgarten เรามี section “Videos” แล้วครับ~
→ https://creatorsgarten.org/videos
สามารถค้นหาวีดีโอของ talk ต่างๆ โดย filter เป็นตาม event หรือตาม speaker ก็ได้ โดยในหน้าวีดีโอ ถ้ามีการแบ่งเป็น chapter และมีซับไตเติล ก็จะเอามาแสดงบนหน้าเว็บนั้นเลย
โดย chapters ต่างๆ ก็ auto-generate เอา โดยเอาไฟล์ซับไตเติล (ที่ผ่านการรีวิวแล้ว) โยนเข้าไปให้ Claude 3.5 Sonnet ช่วยทำสรุปให้ ว่า talk นี้แบ่งเป็นหัวข้ออะไรได้บ้าง แล้วแต่ละหัวข้อเริ่มต้นที่ตรงไหนของวีดีโอ
และด้วยความที่ผมไม่ค่อยมีหัวด้านดีไซน์เท่าไหร่ เลยใช้ v0.dev ช่วยออกแบบหน้าเว็บให้ไปก่อน
→ https://v0.dev/t/WygRv5ig2mz
→ https://v0.dev/t/vvBVNiNiEXC