[Python] Easy Google Translate app using Eel and Googletrans

Introduction

I made a Google Translate simple ver using the Googletrans API.

Execution environment

Apparently Eel does not support Python 3.9 series.

A finished product like this

ぷち翻訳 2021_01_04 17_42_21.png

How to use Eel

You can easily create a GUI with Python. [[Python] Build GUI with HTML/CSS/JavaScript using Eel] [1] [1]:https://qiita.com/inoory/items/f431c581332c8d500a3b

Easy Google Translate with Googletrans

Execute for the time being. [Python – I tried googletrans. ] [2] [2]:https://dev.classmethod.jp/articles/python-py-googletrans/

However, I get the following error. AttributeError: 'NoneType' object has no attribute 'group' It seems to be a mysterious error that it works or does not work.

Clear by referring to the following. [[Python] Countermeasures for "AttributeError:'NoneType' object has no attribute'group'" of googletrans [2020/12/02 postscript]] [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'])
        #There are times when an error occurs and times when it does not, so
        #Recreate the instance until it succeeds and then run it again
        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

Make a clean GUI with Bootstrap

index.html


<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Petit translation</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
        integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
</head>

<body>
    <div class="container p-5" id="app">

        <!--Japanese-English or English-Japanese switching radio button-->
        <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="translation" checked>
                    <label class="custom-control-label" for="custom-radio-1">
Japanese → 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 → English
                    </label>
                </div>
            </div>
        </form>

        <!--Translate button-->
        <button id="translate-btn" class="btn btn-primary btn-block mb-2" type="button">
            {{trans_str}}
        </button>

        <!--User input-->
        <div class="form-group mb-2">
            <textarea class="form-control" id="input" rows="3" placeholder="Please input..."></textarea>
        </div>
        
        <!--Translation result-->
        <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>
    <!--Use 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>

By the way, Vue.js debuted

Change the label of the "translation button" according to the switching between Japanese-English and English-Japanese radio buttons. [Data binding of radio buttons in Vue.js] [4] [4]:https://www.paveway.info/entry/2020/03/10/vue_vmodelradiobutton

main.js


//Call translation function from python
async function translate(src, src_lang, dest_lang) {
    let ret = await eel.translate(src, src_lang, dest_lang)();
    return ret;
}

//Translate button click event
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'
    //Switching between Japanese-English or English-Japanese
    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
            });
        }
})

//Manipulate the character string of the translation button with Vue
Vue.config.productionTip = false
var app = new Vue({
    el: '#app',
    data: {
        trans_str: 'translation'
    }
})

Run from python

The function with @ eel.expose is called from 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] Option settings at startup

desktop.py


# -*- coding: utf-8 -*-

import eel
import sys
import socket 

#constant
# ENTRY_POINT = 'index.html'
CHROME_ARGS = [
    '--incognit',  #Secret mode
    '--disable-http-cache',  #Cache disabled
    '--disable-plugins',  #Plugin disabled
    '--disable-extensions',  #Extension disabled
    '--disable-dev-tools',  #Disable developer tools
]
ALLOW_EXTENSIONS = ['.html', '.css', '.js', '.ico']

def start(start_dir, start_page, size):  
    #Screen generation
    eel.init(start_dir, allowed_extensions=ALLOW_EXTENSIONS)
    #Get unused port
    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):  #Processing at the end
    sys.exit(0)

Recommended Posts

[Python] Easy Google Translate app using Eel and Googletrans
Translate using googletrans in Python
I tried using Google Translate from Python and it was just too easy
[Python3] Google translate google translate without using api
Create a Mac app using py2app and Python3! !!
Easy way to scrape with python using Google Colab
Speech transcription procedure using Python and Google Cloud Speech API
Inflating text data by retranslation using google translate in Python
Get an English translation using python google translate selenium (memories)
Easy deep learning web app with NNC and Python + Flask
Authentication using tweepy-User authentication and application authentication (Python)
Easy visualization using Python but PixieDust
Forcibly use Google Translate from python
Clustering and visualization using Python and CytoScape
Easy and easy IoT life using Micropython!
Selenium and python to open google
Easy modeling with Blender and Python
Deploy a Python app on Google App Engine and integrate it with GitHub
I tried updating Google Calendar with CSV appointments using Python and Google APIs
From Python to using MeCab (and CaboCha)
[Beginner] Python web scraping using Google Colaboratory
Using Python and MeCab with Azure Databricks
Execute Google Translate and DeepL Translate with GUI
[Python] Run Flask on Google App Engine
Try using Python with Google Cloud Functions
Easy web app with Python + Flask + Heroku
Easy introduction of python3 series and OpenCV3
Easy web scraping with Python and Ruby
I'm using tox and Python 3.3 with Travis-CI
Creating Google Spreadsheet using Python / Google Data API
Python + chatwork + google extension = How to make an easy and funny chat BOT
Csv output from Google search with [Python]! 【Easy】
Head orientation estimation using Python and OpenCV + dlib
I tried web scraping using python and selenium
Notes on installing Python3 and using pip on Windows7
Develop and deploy Python APIs using Kubernetes and Docker
Try running Google Chrome with Python and Selenium
Python development flow using Poetry, Git and Docker
I tried object detection using Python and OpenCV
Tweet (API 1.1) on Google App Engine for Python
Create a web map using Python and GDAL
Operate the schedule app using python from iphone
[Python3] Automatic sentence generation using janome and markovify
Try using tensorflow ① Build python environment and introduce tensorflow
Google App Engine Datastore and Search API integration
Try using ChatWork API and Qiita API in Python
Google App Engine SDK / Go (Linux version) and Python installed by linuxbrew are incompatible
Various memorandums when using sdk of LINE Messaging API with Python (2.7.9) + Google App Engine