はじめに
Googletrans APIを使ってGoogle翻訳簡易verを作ってみました。
実行環境
- Windows10
- Python3.8
- Eel 0.14.0
- Bootstrap4
- Vue.js 2.6.12
どうやらEelはPython3.9系未対応のようです。
こんな感じの完成物
Eelの使い方
簡単にPythonでGUI作れるんですね。
[[Python] EelをつかってHTML/CSS/JavaScriptでGUIを構築][1]
[1]:https://qiita.com/inoory/items/f431c581332c8d500a3b
Googletransでお手軽Google翻訳
とりあえず実行。
[Python – googletransを試してみました。][2]
[2]:https://dev.classmethod.jp/articles/python-py-googletrans/
が、下記エラーが出ます。
AttributeError: 'NoneType' object has no attribute 'group'
上手くいったりいかなかったりという謎エラーなようです。
以下を参考にさせていただいてクリア。
[【python】googletransの『AttributeError: 'NoneType' object has no attribute 'group'』対策【2020/12/02追記】][3]
[3]:https://qiita.com/_yushuu/items/83c51e29771530646659
translate.py
from googletrans import Translator
class MyTranslator:
@staticmethod
def translate(org_text,src_lang,dest_lang):
tr = Translator(service_urls=['translate.googleapis.com'])
# エラーが出る時と出ない時があるので、
# 成功するまでインスタンスを作り直してから再度実行
i = 0
while i < 10:
try:
return tr.translate(org_text, src=src_lang, dest=dest_lang).text
except Exception as e:
tr = Translator(service_urls=['translate.googleapis.com'])
i+=1
BootstrapできれいめGUIにする
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ぷち翻訳</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
</head>
<body>
<div class="container p-5" id="app">
<!-- 日英or英日切り替えラジオボタン -->
<form>
<div class="form-group">
<div class="custom-control custom-radio">
<input type="radio" name="lang_radio" class="custom-control-input" id="custom-radio-1"
v-model="trans_str" value="翻訳" checked>
<label class="custom-control-label" for="custom-radio-1">
日本語 → English
</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" name="lang_radio" class="custom-control-input" id="custom-radio-2"
v-model="trans_str" value="Translate">
<label class="custom-control-label" for="custom-radio-2">
English → 英語
</label>
</div>
</div>
</form>
<!-- 翻訳ボタン -->
<button id="translate-btn" class="btn btn-primary btn-block mb-2" type="button">
{{trans_str}}
</button>
<!-- ユーザー入力 -->
<div class="form-group mb-2">
<textarea class="form-control" id="input" rows="3" placeholder="Please input..."></textarea>
</div>
<!-- 翻訳結果 -->
<div class="form-group">
<textarea class="form-control" id="output" readonly rows="3"></textarea>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="vue.js"></script>
<!-- eelを使用 -->
<script type="text/javascript" src="/eel.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>
ついでにVue.jsデビュー
日英、英日のラジオボタンでの切り替えに合わせて、「翻訳ボタン」のラベルを変えます。
[Vue.jsでラジオボタンをデータバインディングする][4]
[4]:https://www.paveway.info/entry/2020/03/10/vue_vmodelradiobutton
main.js
// 翻訳関数をpythonから呼ぶ
async function translate(src, src_lang, dest_lang) {
let ret = await eel.translate(src, src_lang, dest_lang)();
return ret;
}
// 翻訳ボタンクリックイベント
var translate_btn = document.getElementById('translate-btn');
var lang_radio_btn = document.getElementById( "custom-radio-1" );
translate_btn.addEventListener('click', () => {
var src_lang = 'en'
var dest_lang = 'ja'
// 日英or英日 切り替え
if ( lang_radio_btn.checked ) {
var src_lang = 'ja'
var dest_lang = 'en'
}
let original = document.getElementById('input')
let translated = document.getElementById('output')
if (original.value) {
promise = translate(original.value, src_lang, dest_lang);
promise.then((ret) => {
translated.value = ret
});
}
})
// 翻訳ボタンの文字列をVueで操作
Vue.config.productionTip = false
var app = new Vue({
el: '#app',
data: {
trans_str: '翻訳'
}
})
Pythonから実行する
@eel.exposeを付けた関数がJavascriptから呼びだされます。
view.py
import eel
import desktop
import numpy as np
import pandas as pd
from translate import MyTranslator
@eel.expose
def translate(src, src_lang, dest_lang):
return MyTranslator.translate(src, src_lang, dest_lang)
def main():
start_dir="web"
end_point="index.html"
size=(600,400)
desktop.start(start_dir, end_point, size)
if __name__ == "__main__":
main()
[Eel]起動時のオプション設定
desktop.py
# -*- coding: utf-8 -*-
import eel
import sys
import socket
# 定数
# ENTRY_POINT = 'index.html'
CHROME_ARGS = [
'--incognit', # シークレットモード
'--disable-http-cache', # キャッシュ無効
'--disable-plugins', # プラグイン無効
'--disable-extensions', # 拡張機能無効
'--disable-dev-tools', # デベロッパーツールを無効にする
]
ALLOW_EXTENSIONS = ['.html', '.css', '.js', '.ico']
def start(start_dir, start_page, size):
# 画面生成
eel.init(start_dir, allowed_extensions=ALLOW_EXTENSIONS)
# 未使用ポート取得
s = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
s.bind(('', 0))
port = s.getsockname()[1]
s.close()
options = {
'mode': "chrome",
'close_callback': exit,
'port': port,
'cmdline_args': CHROME_ARGS
}
eel.start(start_page, options=options,
size=size, suppress_error=True)
def exit(arg1, arg2): # 終了時の処理
sys.exit(0)