顯示具有 Google 標籤的文章。 顯示所有文章
顯示具有 Google 標籤的文章。 顯示所有文章

2025年12月11日 星期四

HTML5 : 提升 Google 試算表查詢效率

2025年12月11日 星期四

教育部國語辭典可以在《教育部國語辭典公眾授權網》中下載匯出的文字資料，而且有提供試算表格式，只要上載到 Google 雲端硬碟，另存為 Google 試算格式，就可以使用 JSONP 的方式，將試算表當資料庫查詢。

在 HTML5 FUN 中，筆順練習、Partdle 和花瓣字均有使用到查詢字典的功能，《國語小字典》和《國語辭典簡編本》1140925版有 45194筆資料， 因為資料筆數較少，查詢的等待時間算可以接受，但是《重編國語辭典修訂本》1140923版有 163907筆資料，從十幾萬筆資料中撈出要用的，會明顯的感受到「等」！如果想將《重編本》的工作表複製到別的試算表，甚至會出現錯誤訊息而無法完成。

▋ 輕鬆建立小而美的工作表

昨天做了一個小實驗，原本在《重編本》的檔案中只有一個名稱為「1140923辭典匯出」的工作表，新增一個工作表，命名為「short」，並利用參照工作表「1140923辭典匯出」的方式來建立資料，把我想查詢的「字詞名」(A 欄)和「注音一式」(I 欄)，用以下程序建立：

  • 游標移至「short」的儲存格 A1 
  • 輸入公式：='1140923辭典匯出'!A1
  • 游標移至「short」的儲存格 B1
  • 輸入公式：='1140923辭典匯出'!I1

公式如果正確，顯示的內容應該就跟「1140923辭典匯出」A1 與 I1 中的一樣了。

[圖1] Google 試算表表的參照與自動填滿

因為 Google 試算表的新工作表預設只會有 1000 列，而「1140923辭典匯出」中有的資料遠遠超過 1000 列，所以要先查一下要參照的工作表「1140923辭典匯出」有多少列資料，如前面提過的，這個版本有163907筆資料，所以 163907 - 1000 = 162907，需要在工作表「short」的最底部再新增 16290 列，努力的捲到底部，就可以看到輸入框了 [圖2]，在裡面填入需要新增的列數。

[圖2] Google 試看表在底部新增多列

新增完所需要的列數，接下來可以準備使用魔法的快速按鍵「Ctrl + Enter」，幫我們自動填入資料了：

  • 游標移至「short」的儲存格 A1
  • 按一下上方的欄名「A」，可以選取整欄。
  • 按鍵盤「Ctrl + Enter」

成功的話，等一下下，Ａ欄中應該就會將資料都自動填入空格了。

繼續「自動填滿」B 欄：

  • 游標移至「short」的儲存格 B1
  • 按一下上方的欄名「B」，可以選取整欄。
  • 按鍵盤「Ctrl + Enter」

成功的話，B 欄的所有空格應該也自動填入資料了。

▋ 比比看誰快

新建立的工作表「short」只有兩個欄位，來和完整版的工作表比較一下查詢所花費的時間，底下在四個不同帳號，分別在兩個工作表查詢 A 欄帶有「山」這個字的，並回傳國字、注音兩欄所花的時間(單位為千分之一秒)：

✅ 工作表「short」(共2欄, 回傳 2欄, 找到 1038筆)

時間:  1691 , 筆數:  1038
時間:  1436 , 筆數:  1038
時間:  1264 , 筆數:  1038
時間:  1398 , 筆數:  1038

✅ 工作表「1140923辭典匯出」(共18欄, 回傳 2欄, 找到 1038筆)

時間:  4993 , 筆數:  1038
時間:  5137 , 筆數:  1038
時間:  4522 , 筆數:  1038
時間:  3584 , 筆數:  1038

只有兩欄的「short」很明顯地快多了。

來看看資料量較少的《簡編本》如何呢？

✅ 工作表「short」(共2欄, 回傳 2欄, 找到 137筆)

時間:  473 , 筆數:  137
時間:  624 , 筆數:  137
時間:  750 , 筆數:  137
時間:  525 , 筆數:  137

✅ 工作表「辭典匯出_1140925」(共15欄, 回傳 2欄, 找到 137筆)

時間:  1071 , 筆數:  137
時間:  1297 , 筆數:  137
時間:  1371 , 筆數:  137
時間:  1367 , 筆數:  137

《簡編本》如果查詢只有兩個欄位的「short」工作表，也可以比原來快很多。

實際應用在 HTML5 FUN 筆順練習和花瓣字中，可以讓程式更靈活了。哈！雖然使用者原來不見得感覺有在等待，畢竟程式在背景載入資料時，大伙兒都忙著操作別的呢！

▋ 相關連結
閱讀全文
By at 沒有留言:
標籤: , , ,

2025年12月6日 星期六

注音符號手寫輸入提升辨識率

2025年12月6日 星期六

Google 輸入工具的手寫輸入，中文的辨識率滿高的，當然也包括注音符號。但是如果將多個注音符號寫在一起，例如「ㄒㄩㄥˊ」，那大概就會失望了；直寫會被辨識為國字，橫寫可能變別的文字。一次一個注音符號可以正確辨識，多個就亂掉。山不轉路轉，路不轉人轉，轉個念，就可以讓 Google 輸入工具應用在手寫注音辨識了！

關鍵就在「一次一個」注音符號，所以如果在傳送筆跡座標時，一次只送出一個注音符號的，這樣就能發揮它的高辨識率了，底下可以測試一下成果。

▋ 手寫注音測試

小秘訣：

  • ✅ 手寫時會有虛線框，一個框一個符號。
  • ✅ 聲調符號不要寫太小。
  • ✅ 寫完，如果一秒沒動作，會自動辨識。


▋增強了什麼

為了提升手寫注符號的辨識率，利用程序做了一些調整：

  • ✅ 以手寫字跡佔最大矩形是否有重疊，將重疊的視為同一符號來辨識。
  • ✅ ㄥ容易被辨識為ㄑ，但是ㄑ正確率很高，所以辨識結果兩者都有，而且ㄥ順序在較低時，視為是ㄥ。
  • ✅ 調號較不容易辨識正確，所以用最常被認錯的符號來修正為正確的。
  • ✅ 以虛線框為單位，一次辨識一個虛線框的筆跡；所有筆跡都辨識完以後，分析出注音符號與非注音符號，再依注音符的拼音原則，將字的注音切割。

▋已知問題

先列出一些待解決的問題：

  • 「ㄗㄨㄟˋ」 目前解析為「ㄗㄨㄟˋ」，但它也可能是「ㄗ」「ㄨㄟˋ」；「ㄗ」「ㄨ」到底是不是屬同一個字的注音，可能還需要參考筆跡的位置才行。
  • 提升調號的辨識率。

▋應用發展

HTML5 FUN 花瓣字目前的版本有開放低年級的生字造詞，寫一個注音符號啟用虛擬鍵盤，接下來可以將本篇的技術應用在全注音手寫的方式輸入答案(註: 已於2025.12.09 整合完成)。另外，或許可以開發一個看圖、看國字，或是聽語音，手寫注音的注音高手。

▋ 相關連結
閱讀全文
By at 沒有留言:
標籤: , , , ,

2025年10月24日 星期五

YouTube channel id 或 RSS 網址如何找？

2025年10月24日 星期五

文總有一個《中華語文知識庫》，其中漢字影音有《漢字說故事動畫》，影片放在 YouTube 中，頻道的網址如下：

註：文末有一個小工具可以輸入國字列出找到的影片。🔍🔍

原本想利用 RSS 來解析出影片的清單，頁面上找不到 RSS 的連結，網路上有人說，由頻道網址找到 channel id 再加到「https://www.youtube.com/feeds/videos.xml?channel_id=」後面就可以了。可是現在的網址是用小老鼠(@)的好記格式了，無法直接複製貼上了，怎麼辦？

如果知道怎麼看頻道頁面的原始碼，那就在原始碼中搜尋：

 "canonical" 

找到後，再往後看 href 裡的網址，就是該頻道的標準網址，最尾巴的就是 channel id。

而想找 RSS 的連結，就在原始碼中搜尋：

title="RSS"

找到後，一樣的，取 href 中的網址，就是該頻道的 RSS 網址。會使用 Console 就下這樣的指令：

document.querySelector('link[rel="alternate"][type="application/rss+xml"]')?.href

哈！總是會想，有沒有更簡單的方法？可不可以我貼上 YouTube 頻道的網址，就直接出現 channel id 跟 RSS 網址，按個複製鈕就好了！

小工具的製作原理很簡單：

  • 下載 YouTube 頻道頁面原始碼。
  • 解析原始碼，找到關鍵的標籤並擷取網址。
  • 輸出資料。

但是利用 JavaScript 實作時遇到了一個大問題，YouTube 伺服器會進行「機器人驗證」，然後就抓不到頻道頁面的原始碼了！

幸好之前在解決 HTML5 FUN Audio Player 抓不到 YT 字幕時，也遇過類似的問題 (詳見「利用 iframe 解決因為 CORS 而抓不到YT字幕的問題」)，可以利用在「iframe」進行下載與解析的步驟來避免被要求「機器人驗證」的問題。

▋ YouTube 頻道 channel id , RSS 網址解析小工具

以下是一個簡單的 YouTube 頁面解析小工具，只要輸入 YouTube 的網址，可試著抓出一些資料，試試看吧！


▋ 所有影片的播放清單網址

上面的小工具最後提供了一個「所有影片的播放清單」的連結是什麼？一般頻道主會提供他自定的播放清單，那有沒有沒可以播放該頻道所有影片的播放清單呢？看到有高手提到，只要能找到頻道的 channel id，將它的前兩個字母 UC (User Channel) 置換為 UU (User Uploaded)，變成一個新的播放清單 id, 再加到底下這個播放清單用的網址後面：

https://www.youtube.com/playlist?list=

就可以用來播放該頻道所有公開的影片了。

▋ 播放清單 JSON 格式資料

本以為有了前面的網址，這下子可以抓到自己要的影片資料了吧？想得美！YouTube 的 RSS 只能抓到最新的 15 部影片資料；播放清單的頁面沒有特別處理，只能由原始碼中找到 100 部影片的資料 ...... ，要花很多時間再研究。

有一個工具根本可以輕鬆拿到所有影片或播放清單中的所有影片資料，而且可以直接輸出為 JSON 格式，「yd-dlp」這個開源的超級小幫手還是最強的！

如果電腦中有 yt-dlp，只要這樣的指令：

yt-dlp --flat-playlist --dump-single-json  "想抓網址" > playlist.json

就可以將該網址的影片資訊輸出到名為 playlist.json 的檔案中。

不過，裡面如果有非英數的文字與符號，都會以 \u???? 的 Unicode 碼呈現。以下的小工具可以將被編碼過的文字還原。

🔮 將編碼過的內容貼進來解碼：


透過 yt-dlp 的助力，我將中華語文知識庫 YouTube 的《漢字說故事動畫 Ⅰ》和《漢字說故事動畫Ⅱ》兩個播放清單資料彙整了一下，95 + 80 = 175 部影片的資料，哈！發現一件有意思的事，「中華語文知識庫」網站有自己的資料動態生成選單，裡面的記錄是 151 筆，和 YouTube 清單加起來的 175 部有一點點差異；另外，在漢字說故事動畫Ⅱ 中的影片標題有兩個「不乖」，「18萬」的數字用的是全形數字，跟其它的不同，還有一部影片沒有標題，看起來應該是「27我」；在漢字說故事動畫Ⅰ 最後一集是100，但是影片播放清單卻只有95部，比對了一下，少了「5口, 19文, 33犬, 42生, 81」，81到底是哪一個字？在影片清單中沒有這一集。為了找出少了什麼影片，花了點時間，但功力又增加了不少 ^_^ 。

▋ 漢字說故事動畫搜尋小工具


建議再試試底下更新的方式，用這個小工具來搜尋、播放：

🔮 漢字說故事 YouTube 影片播放器


▋ 相關連結
閱讀全文
By at 沒有留言:
標籤: , ,

2025年9月23日 星期二

你變我也變:解析雲端硬碟圖片縮圖網址更新

2025年9月23日 星期二

有人反應無法用「以雲端硬碟資料夾的圖片製作注音高手」影片中的方法出題；研究了半天，終於抓到問題點，看起來是 Google Drive 共用資料夾頁面的內容有異動，導致用來找出圖片縮圖網址的程序失效了。這麼一來，就影響了以下幾篇中的小工具：

哈！有問題才有好玩的。「你變我也變」，只要找到關鍵的片段，去掉工程師故意加入的「雜質」，再加上看似被遺漏的符號，就能以 JSON.parse 將變數還原，最後擷取要的欄位，問題就可以解決了。簡單記錄幾個關鍵：

  • 有用的資訊: data-p
  • 雜質: %.@.
  • 需還原: "
  • 最前面少了一個 [

當初花了不少時間研究還是有差，現在愈來愈會拆彈了。

總之，壞掉的地方修好了，如果是使用試算表的，只要重新建立範例試算表的副本，就又能開心使用了。

▋ 後記

2026.01.28 Google 又改了不知什麼地方，改找 data-tooltip ，再抓取 data-in 來組合縮圖的網址。
閱讀全文
By at 沒有留言:
標籤: , ,

2025年9月2日 星期二

擷取 Google 雲端硬碟圖片縮圖網址

2025年9月2日 星期二

製作網頁遊戲時，可以使用放在 Google 雲端硬碟中的圖片嗎？一般來說，在瀏覽器中會因為 CORS 的跨域讀取限制，無法直接應用 Google 雲端硬碟的圖片在網頁遊戲裡，但如果是雲端硬碟圖片的縮圖，則不會受限制。所以如何取得圖片縮圖的網址就是關鍵。

▋ 擷取 Google 雲端硬碟圖片縮圖

這個小工具可以解析出已共用為「知道連結的任何人」 Google 雲端硬碟「資料夾」中，所有圖片的縮圖網址，大小為 640x480，雖然解析度不高，但應用於一般的遊戲中的插圖，算還不錯。

▋ 使用方法

程式會在已公開共用的雲端硬碟資料夾頁面中，找出所有圖片的清單，解析出檔名及其縮圖的網址，能輸出「主檔名」和「圖片網址」兩個欄位，欄位分隔符號使用跳格的符號，所以複製輸出結果後，可以直接貼到試算表中使用。操作程序如下：

  • ✅ 在 Google 雲端硬碟建立資料夾。
  • ✅ 設定共用為「知道連結的任何人」「檢視」。
  • ✅ 將要使用的圖片上載到雲端硬碟資料夾中。
  • ✅ 確認圖片的檔名(如果要輸出檔名為題目欄位)。
  • ✅ 複製共用的連結。
  • ✅ 在本文的工具中貼上連結，按 [開始解析] 鈕。
如果順利，最後可以按 [複製到剪貼簿] 鈕，將資料複製後應用。

▋ 開始使用

目標：解析雲端硬碟「資料夾」中圖片的縮圖網址

           

OK

 

複製到剪貼簿的資料可以直接貼到試算表中，會自動分欄、分行，貼在試算表的儲存格中。

這個解析出縮圖網址的工具已經內建在 HTML5 FUN 的烘焙機中，另外，也可以在 Google 試算表中的自訂公式來進行解析應用，可以參考三月的舊文「雄:以雲端硬碟資料夾的圖片製作注音高手」

▋ 相關連結

▋ 更新記錄

  • 2026.03.09 新增可以往下搜尋一層子目錄的選項。
  • 2026.01.28 改由 data-in 找縮圖的 ID。
  • 2025.09.23 Google Drive 更動了共享資料夾頁面的內容，改由其它參數中找到圖片的相關資訊。
閱讀全文
By at 沒有留言:
標籤: , , , ,

2025年8月26日 星期二

利用 iframe 解決因為 CORS 而抓不到YT字幕的問題

2025年8月26日 星期二

前兩天發現 HTML5 FUN Audio Player 怎麼樣都抓不到 YouTube 字幕；查了一下，看來多變的 YouTube 又出招了，讓原本由影片頁面原始碼中擷取到的字幕網址失效了，只能抓到空白的內容。研究了大半天，找到了另一個方法 (有興趣可以參考 jdepoix 的 youtube-transcript-api )，主要就是先由影片的頁面原始碼中找到「INNERTUBE_API_KEY」，然後再利用 YouTube 的 API ，以 POST 的方式取得影片資訊，如果成功，就能拿到影片字幕軌資料的網址。

以 JavaScript 使用新方法來擷取影片資訊的第一關會是在 POST 時的 CORS 問題，如果透過 CORS proxy 當然是可行的方法，一般來說，利用 Google Apps Script 也能寫出 CORS proxy，不過 YouTube 的 API 有在擋 bot，Google Apps Script 直接就被封殺了，網路上其它 CORS proxy 服務也沒好到哪裡去，多玩個幾次，就只能得到這樣的訊息了：

status: 'LOGIN_REQUIRED',
reason: 'Sign in to confirm you’re not a bot'

想要的資料當然就撈不到了。

後來發現，原來在瀏覽器中用 fetch ，不透過 CORS proxy 來 POST  ，就能使用 YouTube API 了，倒是有個小地方要注意，不然就會一直出現：

Access to fetch at 'https://.......' from origin 'null' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

裡面最重要的關鍵字是「preflight」，當 Content-Type 是 application/json 時，瀏覽器在未傳送資料給遠端前，會先自我審查是否違反 CORS，難怪我一直看不到 YouTube API 的回應。要怎麼改呢？

只要在 fetch 參數中的 headers 指定 Content-Type 為 text/plain ，它就會使用 simple header ，然後可以避免 preflight，加入：

headers: {
  'Content-Type': 'text/plain', 
}

不透過 CORS proxy 來呼叫 YouTube API 的好處是，比較不會動不動就被 YouTube 判定為 bot 而抓不到資料，是不是很棒？！

不過，當我很開心地將改良過的程式應用到 Blogger 中的 Audio Player 時，居然還是出現違反 CORS 的訊息，為什麼？

底下兩張截圖來探討原因，關鍵已經用箭頭標示出來了：

[圖1] origin 為 blog 的網域

[圖2] origin 為 null

如 [圖1] 所示，當程式在 Blogger 中執行時，origin 被設定為 Blogger 所在的網域，瀏覽器送給 YouTube API ，因為兩者在不同的網域，這樣一來，就會因為 CORS 的問題，無法抓到資料了。同樣的程式碼，由本機載入並執行時，會像 [圖2] 一樣，origin 被設定為 null，YouTube API 接受了，會回傳資料 (這不知道是故意的，還是 API 的 bug，哈！但是我喜歡它現在的狀況)。

本來在研究 YouTube embed 時的 iframe 結構，看看能不能從中挖出字幕，一份資料中提到如果使用 base64 編碼後的 data URI 當 iframe 的 src ，會導致 origin 被設定為 null，就會讓它變成與頁面不同源，而無法存取頁面中的資料 (這一點其實是可以利用 postMessage 來交換資料) ......。

綜合前面看起來像問題的點，因為一個關鍵字「null」，讓我兜出了一個可行的方案。

如果產生一個只用來透過 YouTube API 抓影片資訊的 iframe，而且程式碼用 base64 編碼以後，設定為 iframe 的 src，利用 postMessage 傳影片的 id 與 api key 給 iframe, iframe 收到後，執行抓資料的程序，再使用 postMessage 回傳影片資料給 Audio Player。

哈！就這樣子，Audio Player 又能順利抓到 YouTube 的字幕了！

▋ 相關連結
閱讀全文
By at 沒有留言:
標籤: , ,

2025年5月3日 星期六

SVG 轉 ODP 簡報小工具

2025年5月3日 星期六

HTML5 FUN 的筆順練習工具，除了提供 PNG 格式的部件圖片下載（一個部件一個檔案）；也有提供 SVG 格式的圖形檔（一個檔案中，放多個可以單獨操作的部件）。不過，不是每個工具或平台都能直接匯入 SVG 圖形檔，或是匯入了 SVG 圖形，卻被轉為非向量圖片，無法輕鬆地將筆順部件拆解。試了一下大家常用的工具：

  • InkScape : 本身就是向量圖的編輯器，還能儲存或是匯出為各種格式，SVG 支援度最高，但可能需要花一點時間學習怎麼使用。
  • Google 文件：不支援匯入 SVG 檔案，貼上的 SVG 圖形會轉為點陣圖，無法直接拆解部件。
  • MS Office 線上版 : 可以貼上或是匯入 SVG 圖形，但是會轉為點陣圖，無法直接分解部件。
  • Canva 網站：可以貼上或是匯入 SVG 圖形，但是會轉為點陣圖，無法直接分解部件。
  • LibreOffice : SVG 支援度極高，貼上或是匯入的 SVG 圖片，而且還能拆解圖中的各部件。

▋ 好轉通吃的 ODP 簡報

LibreOffice 很好用，跟 MS Office 也很像，不但免費，能匯貼或是貼上 SVG 圖形，而且它儲存的簡報檔案 (.odp) 可以使用 Google 簡報、MS 簡報、Canva ...... 等來開啟，將 LibreOffice 簡報檔 (.odp) 上載到各平台的雲端硬碟中，開啟時，除了能轉成各平台的簡報格式外， .odp 簡報中的 SVG 圖形如果有「斷開」、解除群組，也能在各平台中保有圖形部件，直接獨立操作的特性。

什麼！還要再學怎麼使用 LibreOffice 哦！應該又一堆人卻步了！

[圖1] svg2odp 可以將筆順 SVG 轉為 ODP 簡報

最近花了一點時間研究怎麼將筆順練習匯出的 SVG 部件檔案，甚至其它 SVG 圖形檔，置入 LibreOffice 簡報(Impress) 的 .odp 的格式，並寫成一個小工具 (svg2odp)。透過簡單的步聚，即可輕鬆下載 .odp 的簡報檔案，然後可以將簡報檔案上載到 Google 雲端硬碟、微軟雲端硬碟，或是 Canva 中。

[圖2] 將 ODP 簡報上載到 Canva 可自行重組

▋ 使用方法

以 HTML5 FUN 筆順練習來說：

  • ✅ 在筆順練習的「部件拆解」功能中，按一下左下角綠色的下載圖示  📥 (如圖3)。
  • ✅ 按下「下載部件 SVG」或「下載筆畫 SVG」，即可儲存為 SVG 圖檔 (如圖3)。
  • ✅ 利用「SVG 轉 ODP 簡報小工具」將 SVG 轉為 ODP 簡報檔。
  • ✅ 將 ODP 簡報檔上傳到雲端硬碟或網站，並開啟檔案，即可得到國字部件， (如圖4)。

[圖3] 在筆順練習中下載 SVG 圖檔

[圖4] 將轉好的 ODP 簡報檔案上傳到 Canva

▋ SVG 轉 ODP 簡報小工具


拖曳 SVG 筆順部件檔案到這裡(支援多檔案)
或是按這裡來選取檔案

解除所有群組

▋ 操作示範影片

▋Q & A

  • Q: 勾選「解除所有群組」有什麼效果？
    • A: SVG 轉 ODP 簡報小工具除了筆順練習的 SVG 檔，預設會保留各物件的群組設定，勾選「解除所有群組」後，所有的群組都會被解除；以筆順練習的 SVG 檔來說，通通會變成以筆畫為最小單位。群組都被解除的好處是可以自己再重組。
  • Q: 一個簡報檔案中可以放幾個 SVG 圖形？
    • A: 當有多個 SVG 圖形時，程式會計算適合的大小，所以數量就看個人需求。
  • Q: 拖曳到轉換工具的圖形，怎樣刪除不用？
    • A: 在每一張預覽圖片的右下角有一個叉叉，按一下即可移除。
  • Q: 在轉換工具區塊右下角的綠色圓圈是做什麼的？
    • A: 綠色圓圈可以貼上 SVG 圖形的語法，或是放在網路上的 SVG 圖形網址，程式會載入 SVG 圖片供轉換。
    • 可以試試這幾個有提供 SVG 圖片網址或語法的圖庫網站：
  • Q: 在預覽圖片的左下角有一個鎖頭是什麼用的？
    • A: 初版的工具無法處理較複雜的 SVG 圖形，就只能以不轉換繪圖指令的方式，將 SVG 圖片篏入 ODP 簡報檔中，因此以鎖頭的圖示來區別；現在的版本已經用 flatten.js 預先處理過了，所以大部份的圖片應該都不會再「加鎖」。
  • Q: 那個燈泡的圖示是做什麼用的呢？
    • A: 哈！務必試試看，多按幾次就知道囉！

▋ 參考資料

SVG 轉 ODP 簡報小工具中使用到的一些專案及相關的資料列在下面做個記錄，也感謝大家的分享，解決了我不少問題：

▋相關連結

 
閱讀全文
By at 沒有留言:
標籤: , , , , ,

2025年4月23日 星期三

OpenSCAD: 遮柵式魔幻卡

2025年4月23日 星期三

底下的照片是 2024年3月時，用 OpenSCAD 製作模型後，再以 3D printer 印出的遮柵式魔幻卡，一個由柵欄構成的模型，柵欄中埋有兩個圖或文，某個視角可以看到第一個圖形，用另一個視角，則可以看到第二個圖形。

底下矩形的遮柵式魔幻卡可以看到英文大寫字母 B (圖1) ，與熊的圖案 (圖2) 變換：

[圖1] 英文大寫字母 B

[圖2] 熊的圖案

底下圓形的遮柵式魔幻卡可以看到中文的春 (圖3) , 與福 (圖4) 兩個字的變換：

[圖3] 春

[圖4] 福

如果仔細看，可以看到印得並不好，導致圖案並不清晰，主要是因為 PLA 的塑料沒做好防潮，水份吸太多，一整個出料不順。我剛開始還以為是模型沒設計好，怎麼印都看不出「魔幻」的效果，一整大失敗，後來才發現，根本只是因為塑料的問題。接著又因為2024年4月的花蓮大地震，把我好不容易才修好的 3D printer 龍門砸壞，不能繼續列印實體，程式就這麼擱了一年多，前幾天將 OpenSCAD 寫的程式整理好，可以給有興趣人玩玩看。

▋ 遮柵式魔幻卡產生器

這個遮柵式魔幻卡產生器是應用在 OpenSCAD 的程序，為了可以直接在網頁瀏覽器中使用，不用安裝任何東西，還能順便將圖片進行一些處理，我將它放在 Google Colab 中，直接在 Google Colab 中製作模型，省去了處理 OpenSCAD 及字型安裝的問題，但是也可以將 OpenSCAD 的產生器下載到電腦，然後離線使用。產生器的網址如下：

▋ 使用方法

魔幻卡的內容可以圖片或是文字。使用圖片就必須先將圖片上載到 Google Colab 的暫存空間，或是直接輸入圖片的網址，讓程式自動擷取。如果是在本機中的 OpenSCAD 中製作模型，圖片必須儲存為 PNG 的格式才能匯入；在 Google Colab 中製作的話，則會自動處理好格式的問題。

✅ 如果想製作文字式的內容：

  • 在「內容1」的「content1」欄位，或「內容2」的「content2」欄位，輸入文字，例如：「春」、「福」。
  • 設定「font_size1」或「font_size2」來調整字型大小。
  • 選取「font_url_1」或「font_url_2」來更換字型。也可以自行上載字型檔，並輸入字型檔的路徑，或是使用網路中公開的字型檔網址。
✅ 如果想製作圖形的魔幻卡：
  • 在「內容1」的「content1」欄位，或「內容2」的「content2」欄位，輸入圖片的路徑。圖片可以自行上載到 Colab 中，或是使用網路公開圖片的網址。
  • 設定圖片的相關參數「auto_resize_1」、「auto_resize_2」、「image_invert1」、「image_invert2」......及「圖片預處理參數」中的選項。

設定好其它參數以後，只要按下設定區塊左側的執行鈕，即可開始進行安裝及製作模型。

▋ 操作示範影片

▋ QA

  • Q: 同樣的照片，為什麼在 Google Colab 中製作的模型效果較好？
    • A: 遮柵式魔幻卡中如果使用圖片，轉為純黑白(非灰階)，效果會比較好。在 Google Colab 中的程序中，會預先將圖片轉換，才給 OpenSCAD 使用，所以效果會較好。
  • Q: 在本機的 OpenSCAD 中，為什麼指定了 JPG 的圖片檔了，卻失敗？
    • A: OpenSCAD 的圖片必須使用 PNG 格式，才能匯入。
  • Q: 使用圖片的內容，如果加快製作的時間？
    • A: 可以將圖片的尺寸調小看看。
  • Q: 製作好的模型為什麼字會被切掉？
    • A: 請自行調整字型大小，將數字調小後再試試。


▋ 相關連結
閱讀全文
By at 沒有留言:
標籤: , , , , ,

2025年4月2日 星期三

Blogger : 解除預覽封印

2025年4月2日 星期三

向來喜歡 Blogger 的簡單界面，又能直接寫語法，不知道哪一天它如果被 Google 收掉，會不會很不習慣其它平台的。不過，在寫程式時，Blogger 的預覽讓我有一點點困擾，它預覽時，只能看，不能「玩」，很明顯地，在我們的文件上方，有被動手腳，讓滑鼠或是觸控的事件被搶先一步，攔截走了。

昨天在發布 HTML5 FUN 最新遊戲做成的「唐詩迷宮」時，不能在預覽時，直接測試，實在覺得不快，於是追縱測試了一下，找到解除 Blogger 預覽封印的方法了！

關鍵在 class name 為「blogger-clickTrap」的元件上，只要讓它消失了，封印就自然解開，讓我的程式可以跟發布後的頁面一樣，可以自由測試。使用的 JavaScript 語法如下：

//解除預覽封印
if(/預覽/.test(document.title)) {
  setTimeout(function() {
    var clickTrap = document.querySelector('.blogger-clickTrap');
    if(clickTrap) {
      clickTrap.style.display='none';
     console.log('\n\nrelease preview click trap ...\n\n');
    }
  }, 1000);
}

哈！能自由呼吸、能跑、能跳 ...... 真是一件愉快的事。咦！這樣子，以後一些私房的小工具，不發布也能使用了。
閱讀全文
By at 沒有留言:
標籤: , , ,

2025年3月19日 星期三

yt-dlp下載錯誤導致 Whisper 無法使用的處理

2025年3月19日 星期三

之前有人反應在使用我的三個 Google Colab 的小工具：

會出現類似這樣的錯誤訊息而卡住：

ERROR: [youtube] BVSF-vSvL6Y: Sign in to confirm you’re not a bot. Use --cookies-from-browser or --cookies for the authentication. See  https://github.com/yt-dlp/yt-dlp/wiki/FAQ#how-do-i-pass-cookies-to-yt-dlp  for how to manually pass cookies. Also see  https://github.com/yt-dlp/yt-dlp/wiki/Extractors#exporting-youtube-cookies  for tips on effectively exporting YouTube cookies

[圖1] 有較完整的訊息內容：

[圖1] yt-dlp 下載失敗的截圖

訊息中最重要的關鍵字其實是這兩個：

  • 「yt-dlp」
  • 「Sign in to confirm you’re not a bot」

錯誤是發生在使用「yt-dlp」來下載 YouTube 影片的程序中，應該是 YouTube 的網站在進行「機器人」偵測，Google Colab 的程序無法跟 YouTube 網站「正確互動」，而被擋下來，導致無法下載影片。

除了前面的錯誤訊息，我在測試時，「買一送一」，遇到了第二種錯誤訊息：

ERROR: unable to download video data: HTTP Error 403: Forbidden

[圖2] 是我 yt-dlp 用那麼久以來，第一次遇到的 403 Forbidden 訊息： 

[圖2] yt-dlp 403 Forbidden 的錯誤訊息

YouTube 直接跟我說，無法存取了（很好！我喜歡直接的人！）。

解決的方法

在 Google Colab 中，遇到前面兩種狀況時，目前我的解決方法是執行「中斷連線，並刪除執行階段」，這樣可以達到類似「關機」的效果，將虛擬機關掉，然後我們再將它重啟。

怎麼做呢？很簡單，看 [圖3]、[圖4] 中的紅色箭頭：

[圖3] 點選「中斷連線，並刪除執行階段」

[圖4] 按「是」來確認

當我們利用「中斷連線，並刪除執行階段」，將虛擬機進入「關閉」的狀態以後，只要再重頭將 OpenAI Whisper / Faster Whisper / yt-dlp 的操作程序再執行一次，應該就有機會可以成功了！為什麼說「有機會」呢？哈！我自己在測試時，遇過要兩次才沒被 YouTube 擋下來；幸好不用像「國父」一樣 XDDD

祝您好運，可以畢其功於一役！

相關連結
閱讀全文
By at 沒有留言:
標籤: , , , , ,

2025年3月11日 星期二

以雲端硬碟資料夾的圖片製作注音高手

2025年3月11日 星期二

製作 HTML5 FUN 的注音高手遊戲時，題目是用「中文字串」，然後可以自行再搭配「圖片」、「語音」，甚至自訂「答案的注音」。如果有以下的需求：

  • ✅ 想製作帶有圖片的注音高手遊戲。
  • ✅ 想使用 Google 雲端硬碟中的圖片當題目來源。

底下的方法可以輕鬆地製作注音高手的遊戲。

▋ 工作原理

👉 2023年4月我寫了一個 Google 試算表的自訂公式「getAll」，可以用來抓取 Google 雲端硬碟資料夾中，所有圖片的主檔名及圖片網址（參「雄:Tools : 解析出雲端硬碟資料夾中所有圖片或音檔的網址」）；

👉 2025年 HTML5 FUN 遊戲啟動器可以載入 Google 試算表中的注音高手工作表，並啟動注音高手遊戲（參「雄:填試算表製作 HTML5 FUN 遊戲」）；

🚀 兩者搭配起來，就能快速地製作 HTML5 FUN 注音高手遊戲。

只要先將題目的圖片（檔案以中文命名），通通上載到 Google 雲端硬碟的資料夾中，並將資料夾共用，就幾乎完成出題的大部份工作了；剩下的就是將資料夾的網址貼到試算表欄位中，及將試算表網址貼到遊戲啟動器了。

[圖1] 以雲端硬碟的圖片來製作注音高手

▋ 操作程序

📂 上載圖片：將圖片以中文命名（題目），並將它們上載到 Google 雲端硬碟的目錄中。（建議一個遊戲一個目錄）。

🌏 共用目錄：將 Google 雲端硬碟放圖片的目錄共用為 [任何知道連結的人] [檢視者]。

💾 建立試算表副本：👉 按這裡開啟試算表檔案 👈，並建立副本（點選 [檔案] [建立副本] ）。點選工作表「注音高手遊戲啟動器範例」，就可以看到注音高手的題庫範本。

📋 貼共用資料夾的網址：先到雲端硬碟中，複製放圖片資料夾的共用網址到剪貼簿，然後貼到試算表【❤ 題庫圖片雲端硬碟「資料夾」共用網址】右側綠底的儲存格中。如果成功，應該會看到題庫區自動擷取了共用資料夾的所有圖片檔名及網址。

🌏 共用試算表：將 Google 試算表共用為 [任何知道連結的人] [檢視者]。

📋 複製工作表的網址：在注音高手試算表的頁面，按一下瀏覽器上方的網址列，反白後，複製網址到剪貼簿，

🚀 使用遊戲啟動器：👉 按這裡開啟遊戲啟動器 👈，找到「參數設定」，將注音高手試算表的網址貼上去吧！

▋ 操作示範影片

▋ 相關連結
閱讀全文
By at 2 則留言:
標籤: , , , , ,

2025年2月13日 星期四

Apps Script : 解析出 YT 影片字幕設定

2025年2月13日 星期四

 HTML5 FUN 的 Audio Player 可以用來播放 YouTube 的影片，並加上兩種語言的字幕。它的字幕來源可以是自製的字幕檔案，當然也能直接由 YouTube 的影片擷取。官方的建議當然是直接呼叫 YouTube 的 API 來取得字幕內容，不過， Audio Player 是下載 YouTube 影片的頁面，然後由網頁原始碼來「挖金」。利用 JavaScript 能下載網頁內容，主要是透過 CORS proxy，最近我愛用的 CORS proxy 開始收費了，免費版有時會抓不到影片頁面，所以我幫 Audio Player 加上了備援的方案，使用 Google Apps Script 幫忙擷取內容；本以為天衣無縫了，誰知道，原來 B 計畫根本就沒成功過！

明明就是一個簡單的流程：

▶️▶️ 給網址 ▶️▶️  抓文字內容 ▶️▶️ 回傳文字內容

為什麼使用  Google Apps Script 抓回來的 YouTube 影片網頁內容和利用其它方式抓回來的會不一樣？

試了兩天，終於找到兩個關鍵：

  • YouTube 的頁面有分桌機版與行動版。
  • YouTube 的頁面會依請求端的語言設定，給不同的內容。

▋ 強制使用桌機版

前面提到 Audio Player 是由 YT 影片的網頁原始碼來「挖金」，什麼是「金」呢？

在 YT 影片的網頁原始碼中，會帶有字幕內容在哪一個網址的資訊，只要找到關鍵字「captionTracks」，就會看到一堆網址，Audio Player 就是將些資訊擷取出來用的，假設抓回來的網頁內容是 html，使用這樣的 regular expression 語法：

html.match(/"captionTracks":(\[.*?\])/)

但是 Google Apps Script 抓回來的，都是不完整的原始碼，今天發現原來它抓回來的內容，跟 YouTube 行動版的內容是一樣的(所以「都是不完整的原始碼」應該只是抓錯版本了)；從另一個角度來說，那我們只要強迫它抓桌機版的頁面，問題不就可以解決了？經過實證，還真的可以！

怎麼強制 Google Apps Script 去抓 YouTube 影片的桌機版內容呢？

其實很簡單，如果強制用桌機版，就在 YT 影片的網址加上這個參數：

  • app=desktop

所以像這個 TED 的影片網址：

https://www.youtube.com/watch?v=yVq8r9w29DI

就改為：

https://www.youtube.com/watch?v=yVq8r9w29DI&app=desktop

利用 Google Apps Script 來抓 YT 的頁面，只要使用有加上 app=desktop 的網址，就能在抓回來的原始碼中，抓到正確的 「captionTracks」內容了。

那反過來說，想強制使用行動版的話，在影片的網址要加上什麼參數？

  • app=m

▋ 強制使用中文頁面

前面利用在 YT 影片網址加上 app=desktop 解決挖不到「金」的問題，後來又發現頁面不是使用中文的問題。沒關係，「大魔王」都解決了，語言的問題，以前在玩 Google 的其它服務也遇過，直接在網址中指定就好了，加上：

  • hl=zh-TW

利用 hl 的參數可以指定頁面中要使用哪一種語言，而 zh-TW 是繁體中文的代碼，所以我只要將前面的網址繼續接龍，變成：

https://www.youtube.com/watch?v=yVq8r9w29DI&app=desktop&hl=zh-TW

好了，大功告成！

研究兩天，中間一直摸不著頭緒，沒想到下午去爬個樟山寺，吸收完大自然的能量以後，就通了。這關過了，應該可以讓 Audio Player 繼續演進，讓它直接抓 YT 自動翻譯的字幕內容，以翻譯為中文來說，其實只要在字幕的網址後面再加上「tlang=zh-TW」的參數就可以了，想起來應該不會太難(done)。

▋ 相關連結
閱讀全文
By at 沒有留言:
標籤: , ,

2025年1月27日 星期一

Google 試算表 + JSZip 製作 2P 題庫

2025年1月27日 星期一

▋ 在瀏覽器中玩 2P 遊戲

前幾天試著利用 Google 試算表當題庫來源，搭配我的「SWF 遊戲啟動器」，然後在 Ruflle Flash Player 模擬器中執行噗友瘋狂布蘭達的 2P 遊戲，在網頁瀏覽器中的順暢度還是沒有單機版來得好，尤其題目帶有圖片時更能體會出差異性。畢竟 Ruffle 是模擬器，耗掉的資源可能還是比較多。

▋ 偶遇 JSZip

整合 Google 試算表與 2P 遊戲時，讓我想到十幾年前以 Excel VBA 寫的工具 new-converter.xls (詳見「雄:Teaching : 以 Excel VBA 將題庫轉為 2P 遊戲格式」)，new-converter.xls 只能處理純文字的題目，圖片題得自己按照遊戲題庫的要求改檔名；而「SWF 遊戲啟動器」的題庫是讀取 Google 試算表，其實只要寫幾行格式轉換，再將題庫輸出到檔案，就可以供單機版的 2P 遊戲載入使用。要解決的問題只剩下如何利用 JavaScript 讓瀏覽器可以將多個待輸出的檔案內容打包，再回傳給使用者。哈！剛好又看到了一直沒有測試的 JSZip，它可以在瀏覽器中，以 JavaScript 將指定的內容加入 zip 壓縮檔內，內容可以是文字，也可以是圖片，更能建立目錄，完全符合我的需求；那就來試著應用看看吧！

▋ 2P 題庫製作流程

這則中的方法是利用 Google 試算表來當設定及題目的來源，所以最重要的程序將試算表範例中的內容換掉，剩下的就是共用試算表及複製試算表工作表的網址了。整個程序如下：

  • 開啟試算表範例：
    • ▶️ 題庫樣板 2p-Txt  ▶️ 題庫樣板 2p圖文 (同一個檔案)
    • 第一次使用要建立副本（檔案 => 建立副本）。
    • 設定共用為「知道連結的任何人」「檢視者」。
  • 打開 2P 的工作表(2p-Txt 或 2p圖文)。
  • 修改設定。
  • 修改題庫。題目主要可以分為三大類
    • 只有文字。
    • 題幹有圖片，但是選項是文字：題幹如果想加圖片，在文字的最後面加一個分號「;」，再貼上圖片的網址。
      (例) ▶️我是文字;https://a.b.c.d/test.png
    • 題幹只有文字，選項用圖片。
  • 複製工作表的網址：在瀏覽器上方的網址列中，將網址複製起來。
  • 貼到下一步驟「參數設定」的試算表網址輸入區，並送出。
▋ Ready ~ Go ~~

▶️ 想先用自製遊戲啟動器試玩一下，就按底下的連結：

▶️ 確認已將試算表共用給「知道連結的任何人」，並複製好工作表的網址，就貼到底下：

參數設定

Google 試算表2P工作表共用連結網址
【送出並下載2P題庫】
× 處理中，請稍候。

▋ Q & A

  • Q: 下載的壓縮檔案為什麼有些圖片沒有加進去?
    • A: 會自動加到壓縮檔案的圖片必須來自網路的，如果碓認圖片的網址沒有問題，由於瀏覽器對於圖片會檢查來源是否有允許「跨域使用」，可能是放圖片的網站不開放跨域使用。建議可以改用 pixabay 的圖片試試。
  • Q: 可以使用放在 Google Drive 中的圖片嗎?
  • Q: 題目需要指定 Type 參數嗎?
    • A: 題庫轉換程式會自動用題庫題幹及選項中是否帶有圖片的關鍵字來設定 Type 為 0、1 還是 2。 

▋ 相關連結
    閱讀全文
    By at 沒有留言:
    標籤: , , , ,

    2024年11月1日 星期五

    人臉偵測:使用 deface 遮蔽照片或影片中的人臉

    2024年11月1日 星期五

    有沒有自動將照片或是影片中的人臉打馬賽克的工具？現在人臉偵測的技術已經很成熟，甚至都可以辨識誰是誰了！

    以前玩過 Python + OpenCV 進行辨識，這幾天又開始研究人臉偵測。找資料時玩到 ORB-HD 的 deface 。它可以在影片或是照片中，找出所有人臉，後續可以在人臉上進行模糊處理、抹成黑色的、以圖片覆蓋，或是加上馬賽克。原始碼在 GitHub 中：

    下面是以 deface 將所有人臉以小熊圖示覆蓋的結果：

    [圖1] deface 以圖示遮蔽人臉的結果

    個人滿欣賞 deface 的簡潔，要說缺點的話，應該是想使用必須有 Python 的環境，而且是用打指令的方式來操作。

    為了方便使用，可以開啟我在 Google Colab 中建立好的程序檔，會自動安裝，也不用打指令。準備好照片並上載，填表單、設定參數即可執行。

    工具的網址

    工具的網址如下：

    如何使用 deface

    打開前述的網址以後，透過以下幾個步驟來完成遮蔽人臉：

    1. 上載照片。
    2. 複製照片在上載空間中的路徑。
    3. 填入照片在工具中的檔案路徑。
    4. 設定其它選項。
    5. 啟動並執行程序指令。

    詳細的操作說明可以觀看以下影片：

    註：影片有字幕

    更新記錄

    • 2024-10-31 建立 Google Colab 筆記本
    閱讀全文
    By at 沒有留言:
    標籤: , , , ,

    2024年10月16日 星期三

    YouTube 語言設定對 NotebookLM 的影響

    2024年10月16日 星期三

    Google NotebookLM (https://notebooklm.google.com/)有人稱它為第二個大腦，之前測試，只要是公開發布超過24小時的 YouTube 影片，而且帶有字幕者（其它限制參考 NotebookLM 的說明），就可以當 NotebookLM 的來源，讓它分析字幕的內容。昨天朋友發現原來可以匯入字幕的 YouTube 影片，變成無法匯入了，試了一下，真的不行了吔！哈！有變化，表示它還在持續進化中，也該高興的。

    早上用各種方式交叉比對，發現解決自己影片無法匯入到 NotebookLM 的方法，也發現原本沒有字幕的 YouTube 影片，其實 NotebookLM 會自動產生逐字稿哦！(圖1)

    [圖1] NotebookLM 自動產生的 YouTube 影片逐字稿

    測試的影片如下：

    以我自己的影片來說，「影片語言」平時都是使用預設的「中文(台灣)」，所以字幕的語言也是使用這個設定。測試完的結果，它應該就是造成我的影片 NotebookLM 不接受的主因。如果將語言「中文(台灣)」中的字幕「取消發布」，讓影片變成沒有字幕的狀態，它就能類似 [圖1]，自動生成逐字稿。

    如果想使用自己上載的字幕內容，就要有一個語言為「中文」的字幕，再重新將字幕上載到YouTube 「中文」的項目中。

    [圖2] 語言為「中文」者可以抓到字幕「中文(台灣)」抓不到

    到 NotebookLM 加入影片，就能底下 [圖3] 一樣，看到 YouTube 影片的字幕內容了。

    [圖3] 抓到的字幕內容

    個人是覺得「中文(台灣)」抓不到字幕這個狀況應該只是一時的臭蟲吧 (哈！語言設定的清單裡，中文的選項真多，有繁體、簡體、台灣、客語、香港......)，多半是程式改一改，疏忽了，沒有去參照到「影片語言」的設定。有了這個經驗，以後我的 YouTube 影片的語言一律設定為「中文」就好了。

    不過，以我同一支影片來比較，NotebookLM 產出的逐字稿(圖1)，跟用 OpenAI Whisper 解譯出來的字幕(圖3)，還是有差距的。

    [註] 

    • Q:
      如果 YouTube 影片是別人的，明明影片有提供字幕，卻發生字幕無法匯入的情形，怎麼辦？
    • A:
      在 YouTube 開啟影片，展開影片下方的詳細資料，裡面應該會有「字幕記錄」，按一下「顯示轉錄稿」的按鈕，在畫面右上角就會出現「字幕記錄」的區塊，將裡面的文字內容選取後，按鍵盤的 Ctrl + C (Command + C) 即可複製。然後在 NotebookLM 中的來源選擇「貼文文字」的「複製的文字」。
      另一個方式，使用 HTML5 FUN Audio Player，它可以載入 YouTube 影片及其字幕，然後可以下載字幕，再上載到 NotebookLM。

    相關連結
      閱讀全文
      By at 沒有留言:
      標籤: , ,
      訂閱： 文章 (Atom)
       
      雄::gsyan © 2009. Design by Pocket