GCCP Creator @ COSCUP 2022

Event: COSCUP 2022 https://coscup.org/2022/zh-TW/session/P7HXPX
Speaker: Nijia Lin

Transcript

1. GCCP Creator
   LINE Developer Rela/ons
   NiJia Lin
   

   View Slide

2. 🥷 NiJia Lin
   LINE Technology Evangelist
   COSCUP 2020、2021 講者
   LINE Bot SDK Python 共同維護者
   😻貓派、🐶柴⽝派
   

   View Slide

3. LINE Technology Evangelist
   COSCUP 2020、2021 講者
   LINE Bot SDK Python 共同維護者
   😻貓派、🐶柴⽝派(⽝在哪？)
   蟒蛇派 🐍
   🥷 NiJia Lin
   

   View Slide

4. Cloud
   Storage
   Speech
   To
   Text
   IAM &
   Role
   Youtube
   &
   Video.js
   今⽇ GCCP Creator 圍繞…
   Cloud
   Run
   凡事總有
   個原因
   https://github.com/louis70109/GCCP-Creator
   

   View Slide

5. 🎥 減少獨⾃製作影片的 effort
   🎯 增加被平台看⾒的機會
   🀄 想紅
   https://github.com/louis70109/GCCP-Creator
   你好好解釋 - 凡事總要個原因
   

   View Slide

6. GCCP 能怎麼增進效率
   https://github.com/louis70109/GCCP-Creator
   

   View Slide

7. 爲什麼⽤ CC 字幕?
   

   View Slide

8. 使⽤ CC 字幕的原因
   優點篇
   • 不必等字幕做完才出影片
   • 上字幕難免出錯，修改快速
   • 自適應(不受解析度影響)
   • 提高影片曝光率(Youtube 識別)
   • Youtube 編輯器夠用
   • 額外優惠
   • 幫助聽障人士
   • 電腦版有自動翻譯
   • 有機會讓粉絲幫忙共編
   https://github.com/louis70109/GCCP-Creator
   

   View Slide

9. 使⽤ CC 字幕的原因
   缺點篇
   • 預設是關閉，需要訓練用戶
   • 中文觀眾習慣看內字幕
   • 字卡特效較少(不夠吸睛)
   https://github.com/louis70109/GCCP-Creator
   

   View Slide

10. 能怎麼設定 GCCP 呢？
    

    View Slide

11. 我在講它要聽！
    ✍
    開啟 SpeechToText
    

    View Slide

12. Speech to text
    

    View Slide

13. Speech to text
    不⽤在 UI 上建立
    

    View Slide

14. Speech to text
    ⽤ API 來操作就好👍
    

    View Slide

15. 總會需要個玻璃櫃
    🦖
    建立 Cloud Storage
    

    View Slide

16. 建立
    Google Cloud Storage
    (a.k.a GCS)
    

    View Slide

17. 建立
    Google Cloud Storage
    (a.k.a GCS)
    

    View Slide

18. ⽽且要有鎖頭
    🔐
    來點 IAM & Role
    

    View Slide

19. IAM
    

    View Slide

20. IAM
    

    View Slide

21. 鑰匙不能被發現 – 把 JSON Key 送進環境變數
    安全 🆙 部署 🆙 ⾦⿂腦 ⬇
    • 建立一個暫時檔
    • 路徑放環境變數中
    • 寫入 GOOGLE_APPLICATION_CREDE
    NTIALS
    • ⚠需要框架啟動前
    

    View Slide

22. 鑰匙不能被發現 – 把 JSON Key 送進環境變數
    安全 🆙 部署 🆙 ⾦⿂腦 ⬇
    • 建立一個暫時檔
    • 路徑放環境變數中
    • 寫入 GOOGLE_APPLICATION_CREDE
    NTIALS
    • ⚠需要框架啟動前
    

    View Slide

23. 安全 🆙 部署 🆙 ⾦⿂腦 ⬇
    • 建立一個暫時檔
    • 路徑放環境變數中
    • 寫入 GOOGLE_APPLICATION_CREDE
    NTIALS
    • ⚠需要框架啟動前
    • ⚠需整理成 JSON 樣式
    • 單引號 -> 雙引號
    鑰匙不能被發現 – 把 JSON Key 送進環境變數
    

    View Slide

24. 安全 🆙 部署 🆙 ⾦⿂腦 ⬇
    • 建立一個暫時檔
    • 路徑放環境變數中
    • 寫入 GOOGLE_APPLICATION_CREDE
    NTIALS
    • ⚠需要框架啟動前
    • ⚠需整理成 JSON 樣式
    • 單引號 -> 雙引號
    鑰匙不能被發現 – 把 JSON Key 送進環境變數
    

    View Slide

25. 萬事皆上雲
    ⛅
    如何部署到 GCP
    

    View Slide

26. View Slide

27. 就這樣？🤨
    

    View Slide

28. 對，就這樣 🤗
    

    View Slide

29. • Docker 免、DockerHub 免，只要⼀個 Dockerfile
    • 省硬碟空間 (但需要神奇⼩卡)
    • 省去開發初期⿇煩的事情
    使⽤ gcloud 好處
    

    View Slide

30. 做什麼才會觸發
    (導火線)
    在 CloudRun
    設定 Eventarc
    

    View Slide

31. Speech to text
    

    View Slide

32. 設定觸發條件
    

    View Slide

33. 設定觸發條件
    

    View Slide

34. 上傳檔案測試
    

    View Slide

35. ⾃動產⽣ SRT
    

    View Slide

36. 到 CloudRun 設定 Eventarc
    

    View Slide

37. 不想住這邊，我要搬走！
    使⽤ video.js 的 hints
    

    View Slide

38. 影片(mp4) ⼈⼈好，別把我送⼈就好
    • ⼿動上傳檔會有 CORS
    • 只要開啟 public 即可
    • 誰都不准擋我！
    

    View Slide

39. CORS 你聽我解釋 – CC 字幕篇
    • ⽤個 API Server 轉成純⽂字給前端
    • (Optional) 放在 localStorage 上⾯
    

    View Slide

40. CORS 那我要去愛別⼈ – API 我還你原形
    • ⽤個 API Server 轉成純⽂字給前端
    • (Optional) 放在 localStorage 上⾯
    • 因為有 \n，⽤ eval() + Blob 組合把它變成⼀串網址回給 video.js
    

    View Slide

41. • 因 GCS 的 CORS 的設定⽬前在 GCP 網⾴介⾯上沒辦法改，
    ⼀定要⽤ CLI 設定
    既然你不聽那我來硬的 – CLI 降⾁！
    

    View Slide

42. • 因 GCS 的 CORS 的設定⽬前在 GCP 網⾴介⾯上沒辦法改，
    ⼀定要⽤ CLI 設定
    既然你不聽那我來硬的 – CLI 降⾁！
    

    View Slide

43. • 因為 CORS 的設定在 GCP 網⾴介⾯上沒辦法改，⼀定要
    ⽤ CLI 設定
    • 泡個茶上個廁所，時間到了 Cache 就不在了
    • 開啟 DevTools 清除快取(Cache)
    過去即是永恆 – 快取放我走！
    

    View Slide

44. • 必須要⽤ WebVTT 格式
    • Video.js 會⾃動的轉成 big5
    • 有時間序的 SRT 字幕檔第⼀⾏ ➕ WEBVTT\n\n(兩個換⾏)
    不都在講同⼀件事？Video.js 需要 VTT
    

    View Slide

45. 那字幕編輯在哪？
    

    View Slide

46. 別⼈的比較好🚬 (⼩吉)
    Youtube UI 很夠⽤
    

    View Slide

47. 管理⼤師⏰的⼤家
    能帶走點什麼？
    

    View Slide

48. ✍揮揮衣袖，不帶走⼀片雲彩
    • STT 時間⽀援最低到 nano，但在 Youtube 字幕上也算很精準
    • STT 測試起來以⼀分鐘為分⽔嶺，太短的影片可能不適⽤
    • 減少初期敲字幕稿的時間(30~40%)，只需後續細修、對時間
    • 編輯器⽤別⼈的就好，別想⾃⼰寫 (還我三個禮拜！)
    • 若有 Python、FastAPI 部署相關經驗歡迎等等找我聊🤝
    • Video.js ⽢苦談也⼀起來！
    https://github.com/louis70109/GCCP-Creator
    

    View Slide

49. View Slide

50. View Slide