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

2102a6b8760bd6f57f672805723dd83a?s=128

LINE Developers Taiwan
PRO

July 30, 2022
Tweet

More Decks by LINE Developers Taiwan

Other Decks in Technology

Transcript

  1. GCCP Creator LINE Developer Rela/ons NiJia Lin

  2. 🥷 NiJia Lin LINE Technology Evangelist COSCUP 2020、2021 講者 LINE

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

    共同維護者 😻貓派、🐶柴⽝派(⽝在哪?) 蟒蛇派 🐍 🥷 NiJia Lin
  4. Cloud Storage Speech To Text IAM & Role Youtube &

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

    凡事總要個原因
  6. GCCP 能怎麼增進效率 https://github.com/louis70109/GCCP-Creator

  7. 爲什麼⽤ CC 字幕?

  8. 使⽤ CC 字幕的原因 優點篇 • 不必等字幕做完才出影片 • 上字幕難免出錯,修改快速 • 自適應(不受解析度影響)

    • 提高影片曝光率(Youtube 識別) • Youtube 編輯器夠用 • 額外優惠 • 幫助聽障人士 • 電腦版有自動翻譯 • 有機會讓粉絲幫忙共編 https://github.com/louis70109/GCCP-Creator
  9. 使⽤ CC 字幕的原因 缺點篇 • 預設是關閉,需要訓練用戶 • 中文觀眾習慣看內字幕 • 字卡特效較少(不夠吸睛)

    https://github.com/louis70109/GCCP-Creator
  10. 能怎麼設定 GCCP 呢?

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

  12. Speech to text

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

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

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

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

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

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

  19. IAM

  20. IAM

  21. 鑰匙不能被發現 – 把 JSON Key 送進環境變數 安全 🆙 部署 🆙

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

    ⾦⿂腦 ⬇ • 建立一個暫時檔 • 路徑放環境變數中 • 寫入 GOOGLE_APPLICATION_CREDE NTIALS • ⚠需要框架啟動前
  23. 安全 🆙 部署 🆙 ⾦⿂腦 ⬇ • 建立一個暫時檔 • 路徑放環境變數中

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

    • 寫入 GOOGLE_APPLICATION_CREDE NTIALS • ⚠需要框架啟動前 • ⚠需整理成 JSON 樣式 • 單引號 -> 雙引號 鑰匙不能被發現 – 把 JSON Key 送進環境變數
  25. 萬事皆上雲 ⛅ 如何部署到 GCP

  26. None
  27. 就這樣?🤨

  28. 對,就這樣 🤗

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

    使⽤ gcloud 好處
  30. 做什麼才會觸發 (導火線) 在 CloudRun 設定 Eventarc

  31. Speech to text

  32. 設定觸發條件

  33. 設定觸發條件

  34. 上傳檔案測試

  35. ⾃動產⽣ SRT

  36. 到 CloudRun 設定 Eventarc

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

  38. 影片(mp4) ⼈⼈好,別把我送⼈就好 • ⼿動上傳檔會有 CORS • 只要開啟 public 即可 •

    誰都不准擋我!
  39. CORS 你聽我解釋 – CC 字幕篇 • ⽤個 API Server 轉成純⽂字給前端

    • (Optional) 放在 localStorage 上⾯
  40. CORS 那我要去愛別⼈ – API 我還你原形 • ⽤個 API Server 轉成純⽂字給前端

    • (Optional) 放在 localStorage 上⾯ • 因為有 \n,⽤ eval() + Blob 組合把它變成⼀串網址回給 video.js
  41. • 因 GCS 的 CORS 的設定⽬前在 GCP 網⾴介⾯上沒辦法改, ⼀定要⽤ CLI

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

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

    泡個茶上個廁所,時間到了 Cache 就不在了 • 開啟 DevTools 清除快取(Cache) 過去即是永恆 – 快取放我走!
  44. • 必須要⽤ WebVTT 格式 • Video.js 會⾃動的轉成 big5 • 有時間序的

    SRT 字幕檔第⼀⾏ ➕ WEBVTT\n\n(兩個換⾏) 不都在講同⼀件事?Video.js 需要 VTT
  45. 那字幕編輯在哪?

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

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

  48. ✍揮揮衣袖,不帶走⼀片雲彩 • STT 時間⽀援最低到 nano,但在 Youtube 字幕上也算很精準 • STT 測試起來以⼀分鐘為分⽔嶺,太短的影片可能不適⽤

    • 減少初期敲字幕稿的時間(30~40%),只需後續細修、對時間 • 編輯器⽤別⼈的就好,別想⾃⼰寫 (還我三個禮拜!) • 若有 Python、FastAPI 部署相關經驗歡迎等等找我聊🤝 • Video.js ⽢苦談也⼀起來! https://github.com/louis70109/GCCP-Creator
  49. None
  50. None