Upgrade to Pro — share decks privately, control downloads, hide ads and more …

GCCP Creator @ COSCUP 2022

GCCP Creator @ COSCUP 2022

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

LINE Developers Taiwan

July 30, 2022
Tweet

More Decks by LINE Developers Taiwan

Other Decks in Technology

Transcript

  1. GCCP Creator
    LINE Developer Rela/ons
    NiJia Lin

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  7. 爲什麼⽤ CC 字幕?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  10. 能怎麼設定 GCCP 呢?

    View full-size slide

  11. 我在講它要聽!

    開啟 SpeechToText

    View full-size slide

  12. Speech to text

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  23. 萬事皆上雲

    如何部署到 GCP

    View full-size slide

  24. 就這樣?🤨

    View full-size slide

  25. 對,就這樣 🤗

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  28. Speech to text

    View full-size slide

  29. 設定觸發條件

    View full-size slide

  30. 設定觸發條件

    View full-size slide

  31. 上傳檔案測試

    View full-size slide

  32. ⾃動產⽣ SRT

    View full-size slide

  33. 到 CloudRun 設定 Eventarc

    View full-size slide

  34. 不想住這邊,我要搬走!
    使⽤ video.js 的 hints

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  42. 那字幕編輯在哪?

    View full-size slide

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

    View full-size slide

  44. 管理⼤師⏰的⼤家
    能帶走點什麼?

    View full-size slide

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

    View full-size slide