GCCP Creator @ COSCUP 2022

by LINE Developers Taiwan

Slide 1

Slide 1 text

GCCP Creator LINE Developer Rela/ons NiJia Lin

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

爲什麼⽤ CC 字幕?

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

能怎麼設定 GCCP 呢？

Slide 11

Slide 11 text

我在講它要聽！ ✍ 開啟 SpeechToText

Slide 12

Slide 12 text

Speech to text

Slide 13

Slide 13 text

Speech to text 不⽤在 UI 上建立

Slide 14

Slide 14 text

Speech to text ⽤ API 來操作就好👍

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

IAM

Slide 20

Slide 20 text

IAM

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

就這樣？🤨

Slide 28

Slide 28 text

對，就這樣 🤗

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

Speech to text

Slide 32

Slide 32 text

設定觸發條件

Slide 33

Slide 33 text

設定觸發條件

Slide 34

Slide 34 text

上傳檔案測試

Slide 35

Slide 35 text

⾃動產⽣ SRT

Slide 36

Slide 36 text

到 CloudRun 設定 Eventarc

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

那字幕編輯在哪？

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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