瀏覽器插件實現GitHub代碼翻譯原型演示 2018-08-29

原創

2019-01-12 22:12

此原型源自此想法: 中文化源碼. 考慮到IDE插件工作量較大, 且與IDE綁定. 在代碼轉換工具的各種實現中, 綜合考慮實用+易用+長遠改進潛力, 瀏覽器插件似乎較有優勢. 於是用最快捷的方式實現這一想法.

注: 此演示僅用Chrome在一個命名比較簡單的代碼頁https://github.com/swaroopch/byte-of-python/blob/master/programs/ds_using_list.py 運行過, 限於取代碼塊的簡單方式(取頁面中的table元素)以及內建詞典, 其他瀏覽器/github代碼頁的效果不保證.

原型項目源碼在: program-in-chinese/webextension_github_code_translator

在Chrome下加載此插件後, 點擊工具欄中的按鈕(竟然默認圖標是個’G’, 也許是"Github代碼翻譯原型"的首字母). 彈窗中就會顯示翻譯後的代碼段. 就這樣:

項目源碼節選

對代碼段的文本進行簡單替換:

function 翻譯() {
  var 原代碼拷貝 = document.getElementsByTagName('table')[0];
  var span字段列表 = 原代碼拷貝.getElementsByTagName('span');
  翻譯字段列表(span字段列表);
  var 文本字段列表 = 取子文本節點(document);
  翻譯字段列表(文本字段列表);
}

function 取子文本節點(el) {
  var n, a = [], walk = document.createTreeWalker(el, NodeFilter.SHOW_TEXT, null, false);
  while (n = walk.nextNode()) a.push(n);
  return a;
}

// 假設每個字段除了詞, 其他都是非英文字符.
function 取字段中所有詞(字段) {
  var 單詞 = 字段.match(/[a-zA-Z]+/g);
  if (單詞) {
    return 單詞;
  }
  return [字段];
}

function 取字段中最長句(字段) {
  var 句 = 字段.match(/[a-zA-Z\s]+/g);
  if (句 && 句.length > 0) {
    return 句[0].trim();
  }
  return 字段;
}

function 翻譯字段列表(字段列表) {
  for (var i = 0; i < 字段列表.length; i++) {
    var 字段 = 字段列表[i].textContent;
    var 所有單詞 = 取字段中所有詞(字段);
    var 所有單詞有翻譯 = false;
    for (var j = 0; j < 所有單詞.length; j++) {
      var 單詞 = 所有單詞[j];
      var 對應中文詞 = 關鍵詞詞典[單詞] || API詞典[單詞] || 命名詞典[單詞];
      if (對應中文詞) {
        if (j == 所有單詞.length - 1) {
          所有單詞有翻譯 = true;
        }
      } else {
        break;
      }
      字段 = 字段.replace(單詞, 對應中文詞);
    }
    // 取巧: 僅當字段中所有詞有翻譯時才替換字段, 避免某些文本中出現個別可識別的單詞. 今後需進行語法分析.
    if (所有單詞有翻譯) {
      字段列表[i].textContent = 字段;
    } else {
      var 句 = 取字段中最長句(字段);
      var 對應中文 = 語句翻譯[句.toLowerCase()]
      if (對應中文) {
        字段列表[i].textContent = 字段.replace(句, 對應中文);
      }
    }
  }
}

內建詞典有幾部分, 前兩個(關鍵詞/API)可擴展, 單詞詞彙可藉助現有的英漢詞典(olditem等還需另行拆分處理), 語句翻譯可藉助在線翻譯API(原型中的翻譯內容取自有道在線翻譯):

var 關鍵詞詞典 = {
  'for': '對於',
  'in': '在',
  'if': '如果',
  'del': '刪除'
};

var API詞典 = {
  'print': '打印',
  'append': '添加',
  'sort': '排序',
  'len': '長度',
  'end': '結尾'
}

var 命名詞典 = {
  'shoplist': '購物單',
  'apple': '蘋果',
  'mango': '芒果',
  'carrot': '胡蘿蔔',
  'banana': '香蕉',
  'rice': '米',
  'item': '物品',
  'olditem': '第一項'
}

// 這裏使用有道在線翻譯結果. TODO: 用翻譯API代替
var 語句翻譯 = {
  'this is my shopping list': '這是我的購物單',
  'i have': '我有',
  'items to purchase': '要購買的產品',
  'i also have to buy rice': '我還得買大米',
  'my shopping list is now': '我的購物單現在在',
  'i will sort my list now': '我現在就整理我的清單',
  'sorted shopping list is': '排序的購物清單是',
  'the first item i will buy is': '我要買的第一件東西是'
}