HTML5 文字雲

Update: Here is the introduction in English.

猜猜看這是哪個 blog 的最常出現的詞彙?

文字雲是最近在嘗試的 HTML5 瀏覽器 Demo,目標是使用前端技術來完成 Java 撰寫的 Wordle,順便可以拿來測試瀏覽器效能,以及分析一些文字來源。

目前程式可以接受硬碟裡的檔案或是 RSS Feed 的文字(從 Google Feed API 拉資料),經過詞頻分析,以出現的數量來決定文字大小,排進 HTML5 canvas,像這是這個 blog 的分析結果:


最前面貼的第一張圖則是來自地圖會說話,其他像是 New York Times 的文字雲可以看出最近的新聞 buzz word 是什麼。

文章詞頻分析

中文用的是很標準的 N-gram(我做到 N=6),把字組切出來算頻率。英文的話則引用了資料庫常用的 Porter Stemming Algorithm 來歸一化字的變形(複數型、正在進行式等等)。想起來中文的分析還真的是知難行易,完全不做任何過濾效果就會很好(後來有濾掉一些不是詞的字組就是),而且唯一的 stop word 只有「的」。

測試的時候懷疑瀏覽器執行這些文字操作的效能,所以就把這段程式碼放進 Web Workers。放完發現效能沒有提昇多少,真正卡住的東西是畫 canvas … 不過還是保持這樣,因為使用者有可能會放大量文字進來(但只差 Web Workers 就可以執行的 IE9 就抱歉了)

使用前端額外的好處是使用者可以載入自己的檔案來分析,而且檔案不需要傳到主機上。測試的時候曾經跟別人要了在學校寫的報告,圖像很好玩。大部分的部落格最大的詞都是「可以」,不知道是不是口語中文的現象。

文字雲圖像

圖則是仰賴 canvas 的填入文字(fillText)功能。有一個二維 Array 來儲存哪裡還有空間的資訊,每次填入文字之後再用 getPixelData 偵測文字筆劃的位置,更新 Array。在 Chrome 上面,文字大小會受設定裡面的最小字型大小的影響,所以最後會有很多不太小的小字。另外就是 Firefox 的 getPixelData 效能有問題,只有別人的 1/6 甚至更慢,為了避免瀏覽器卡死只好放了偵測所花時間,超過就跳出警告訊息的程式碼。Firefox 另外還有一個 canvas 有更新但是卻不顯示結果的 bug,不是很 reproducible 而且好像每台電腦行為都不一樣,只好先放著(canvas 的效能和問題都跟硬體加速有關)。

使用者介面

這東西為何會被我放在硬碟裡快一個月就是因為 UI 搞不定 orz … 做了兩個版本,每次 show 給別人看的時候都很容易操作錯誤;現在這個是 2.5 版,流程變成仰賴網址的 Hash 和 onhashchange 事件。對於寫出有用但是 UI 失敗的程式,我也感到很無奈 orz

接下來?

歡迎大家玩玩看。字頻分析和文字雲兩個功能都包成 library 了,拿去做其他應用應該很方便。不過我希望先保留程式碼兩個星期,之後再公開;目前網站上的是 minified script。

有空的話會想要支援更多自然語言(日文、韓文等),還有拿字頻做其他 visual(或是 audio?Bob 給了一個的點子,我才注意到其實字頻分布跟 FFT 轉換後的聲音頻譜還滿像的?)

最後,喜歡的話賞我一個讚吧 XD 寫不少東西但是不太知道反應,也不知道要去哪裡推。

55 thoughts on “HTML5 文字雲

  1. 在抓噗浪內容的時候經常會把帳號當成最常出現的文字,還滿奇怪的Orz

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>