經驗分享:用 Javascript 實作注音輸入法

經驗分享:用 Javascript 實作注音輸入法

#COSCUP 2013

「JS注音」是使用前端 Web 技術實作自動選字注音輸入法的嘗試。 要在瀏覽器實作輸入法,API 設計、搜尋演算法、詞庫設計、記憶體使用等都需要許多考量。此程式作為獨立的 library,已經有獨立網頁、Firefox 附加元件、FxOS 鍵盤三個使用案例。本次演講將報告實作進度與開發經驗,未來可行方向,希望能和其他開源輸入法開發夥伴切磋、交流。

Source code of the project can be found at https://github.com/timdream/jszhuyin

Blog: http://blog.timc.idv.tw/posts/coscup2013-jszhuyin-talk/
Keyword: Javascript, DOM, IndexedDB, IME, AppCache

2becaf1073957bdad2f06e183731131d?s=128

Timothy Guan-tin Chien

August 03, 2013
Tweet

Transcript

  1. 經驗分享:

  2. 聽說 COSCUP 投影片⼀一定要放貓…

  3. 輸入法 ㄔㄞ

  4. 功能更多,當然不只查表 有吃的嗎? 還有什麼?

  5. DEMO http://timdream.org/jszhuyin/" JS 注音 Firefox 附加元件

  6. JS注音:自動選字手機輸入法 •  自動選字:ㄔㄞ ㄓㄥˋㄈㄨˇ → 拆政府 •  首碼/聲符輸入:ㄔㄓㄈ → 插枝法

    •  混合:ㄔㄞㄓㄈ → 拆政府 •  建議:政府 → ~機關、~機構 •  連續選字
  7. 詞庫

  8. 詞庫來源 •  小麥注音 McBopomofo @mjhsieh •  MIT Licensed" •  ~14

    萬字詞,TXT:6.2M" •  JSON:6.5M " ./McBopomofo/Source/Data master$ make data.txt bin/cook.py PhraseFreq.txt BPMFMappings.txt BPMFBase.txt data.txt cat BPMFPunctuations.txt >> data.txt cat Symbols.txt >> data.txt ./McBopomofo/Source/Data master$ wc –l data.txt 148060 data.txt
  9. 我今天要   5MB  的飼料

  10. IndexedDB •  Implementation-independent, key-value storage for the Web" •  Very

    verbose and complex API, intend to be wrapped by libraries." window.indexedDB.open(‘database’).onsuccess = function (evt) { evt.target.result.transation(‘store’) .objectStore(store).get(‘key’).onsuccess = function (evt) { console.log(evt.target.result); }; }; •  以上範例還不包含錯誤處理、版本升級、新建 object store …"
  11. 插播:DOMRequest var req = doSomething(); req.onsuccess = function … req.onerror

    = function … req.addEventListener(‘success’, handler); " •  目前新設計的 API 會偏向使用 Promise / Future" •  別忘了 ECMAScript 6 還會有 yield
  12. 選字

  13. 窮舉法 明|天拆政府 明天拆|政府 明天拆政|府 明|天拆|政府 明天|拆|政府

  14. Composition of a number h&ps://en.wikipedia.org/wiki/Composi8on_%28number_theory%29#Examples

  15. Composition of a number •  2: [1,1], [2] (2 sets)

    " •  3: [1,1,1], [1,2], [2,1], [3] (4 sets) " •  4: [1,1,1,1], [1,1,2], [1,2,1], [2,1,1], [2,2], [3,1], [1,3], [4] (8 sets)" •  …" •  n: (2n-1 sets)" •  通通丟進去查,加總積分來比就對了!"
  16. 遞迴查詢,連續選字 •  ㄌㄧㄥˊㄕˊㄓㄥˋㄈㄨˇ" •  零食政府 •  零食 •  零時 • 

    零 •  靈 •  玲 •  … •  輸出「零時」,扣掉兩個 發音繼續查詢
  17. 遞迴查詢,連續選字 •  ㄓㄥˋㄈㄨˇ" •  政府 •  政 •  正 • 

    證 •  症 •  鄭 •  … •  選擇「政府」
  18. 經驗分享

  19. Change log •  Dec 2011:First version in Firefox OS Gaia"

    •  … optimization" •  Feb 2012:Switch to McBopomofo data" •  Feb 6th 2012:First rewrite" •  … improvements" •  Mar 2012:Desktop demo page" •  Aug 2012:Announcement on blog" •  Dec 2012:Split from Firefox OS Gaia with git filter-branch •  Jul 22nd 2013:rewrite2 begin" •  Aug 3rd 2013:Talk in COSCUP 2013"
  20. 已知問題 •  手機記憶體有限,GC 效能低落 •  在低階手機完全不堪使用 •  比 Emscripten 編譯的

    libchewing 還要慢!? •  Closure/module pattern 內部無法單元測試 •  從外顯行為測試 ~1300 行的 Javascript:嗯,祝好運。 •  There is a huge difference between hacking things together in a short time and bootstrapping an maintainable software project
  21. 踩雷 •  IndexedDB 重複查詢,每次回傳的 object 互為 copy 而非 reference" • 

    Key •  “ㄊㄞˊ-ㄅㄟˇ-ㄕˋ” …? •  很有結構的物件結構 •  [["台",-2.946], ["臺",-3.501], ["抬",-4.771], ["颱",-4.809], … ];
  22. 曙光 •  libtabe 記載的,源自倚天中文系統的編 碼系統,能將⼀一個音縮為 2 bytes
 (= 1 char

    in Javascript) 1st Group 2nd Group 3rd Group Tone Symbols # of Symbols 21 3 13 5 # of Bits 6 2 4 3 •  將功能拆開成為各自的 
 Constructor Function 以及單元測試 •  將主要的運算放到 Web Workers 執行 •  打平資料結構 •  將積分轉為 4 bytes Float32,接在字串裡面 •  需要用的時候再從字串裡面讀 substring 讀書!
  23. JSZhuyin v.2013JUL •  Client-Server 架構,用 postMessage() 溝通 Script  in  

    Browser  context Script  in     Web  Worker/iframe           .   JSON/IndexedDB   Data  Storage UI/Event   Listeners
  24. Conference Driven Development" 研討會死線式開發

  25. Conference Driven Development
 (暈)

  26. Classes •  BopomofoEncoder" •  StorageBase" •  JSONStorage" •  IndexedDBStorage" • 

    HybirdStorage" •  CacheStore" •  JSZhuyinIME …" •  IMEPostMessenger …" •  JSZhuyinLoader … ⁉- •  JSZhuyinWorkerLoader" •  JSZhuyinIframeLoader" •  JSZhuyin … " •  JSZhuyinLayoutMapper" •  WebJSZhuyinIME … "
  27. Classes •  BopomofoEncoder" •  StorageBase" •  JSONStorage" •  IndexedDBStorage" • 

    HybirdStorage" •  CacheStore" •  JSZhuyin! •  JSZhuyinServer" •  JSZhuyinServerLoader" •  JSZhuyinServerWorkerLoader" •  JSZhuyinServerIframeLoader" •  JSZhuyinClient! •  JSZhuyinLayoutMapper" •  JSZhuyinWebIME
  28. 挑戰 •  無法延遲目前的 keyboardEvent,必須要提供 sync response" •  Race condition" • 

    IndexedDB in worker thread is not available in Firefox (yet, bug 701634)" •  … 說不定全部做完
  29. meta •  Mozilla is hiring in Taipei, for Firefox OS!"

    •  MozTW 志工招募中!" •  Code: https://github.com/timdream/jszhuyin" •  Demo: http://timdream.org/jszhuyin/" •  貓: