simple translation UI using Gradio and deep-translator

シンプルなコードでWebUIが作成できるGradioと、Pythonコードから直接操作できるdeep-translatorを組み合わせてローカルで使える翻訳ツールを作ってみました。

必要なライブラリのインストール

Python環境に２つのライブラリが必要
・gradio: UI構築用
・deep-translator: 翻訳処理用

pip install gradio deep-translator

Gradioの特徴

・gr.Interface() や gr.Blocks() を使って、数行のPythonコードでWeb UIを構築可能
・多様なUIコンポーネントが用意されている
・ローカルでもクラウドでも動作する

# example
import gradio as gr

def greet(name):
    return f"こんにちは、{name}さん！"

demo = gr.Interface(fn=greet, inputs="text", outputs="text")

demo.launch()

実行すると http://127.0.0.1:7860 でUIが生成される

この短いコードで Submitボタン・Clearボタン・Textbox・出力欄 が自動生成されるのは、Gradioの Interface クラスが 関数の入出力に応じたUIを自動構築する仕組みを持っているからです。

・fn=greet で渡された関数の 引数name と 戻り値str を見て、入力欄Textbox、出力欄Textboxを自動的に作成する

# 実際には Gradio が内部でこういう構造を作っている
gr.Interface(
    fn=greet,
    inputs=gr.Textbox(label="name"),
    outputs=gr.Textbox(label="output"),
    live=False  # submitボタンで関数を呼び出す
)

・demo.launch() を呼ぶと、Gradioが FastAPIベースのローカルWebサーバー を立ち上げ、自動生成されたUIをブラウザで表示する
・Submit/Clearボタンは Interface が 標準で提供するUI機能として付属している
・現行バージョンではFlagもデフォルトで表示される
・「Flag」はユーザーがフィードバックを送るための仕組みで、これをクリックすると.gradio/flagged/*.csvとして保存される

deep-translatorの特徴

・シンプルなインターフェースで複数の翻訳エンジンを扱えるPythonライブラリ
　(翻訳エンジンによっては課金が必要)
・Pythonのみで完結するため、Web APIの知識が不要
・MITライセンスで自由に利用可能（商用利用もOK）

Google Translate以外にDeepL、LibreTranslate、Microsoft Translator、MyMemoryなど複数のAPIが使えます。

deep-translator経由でGoogle Translateを使う利点

・シンプルな構文で使いやすい
・Pythonコードから直接操作できる
・APIキー不要で使える（ただし非公式APIを使っているので安定性は少し低い）
・無料で使える（直接Google TranslateをAPIで使うと有料）

# example
from deep_translator import GoogleTranslator
translated = GoogleTranslator(source='en', target='ja').translate("Good morning")
print(translated)

Python code sample for translation UI

import gradio as gr
from deep_translator import GoogleTranslator

# 翻訳処理：選択された方向に応じて翻訳を実行
def run_translation(input_text, selected_direction):
    source_lang, target_lang = ('ja', 'en') if selected_direction == "日本語 → 英語" else ('en', 'ja')
    return GoogleTranslator(source=source_lang, target=target_lang).translate(input_text)

# クリア処理：入力欄、翻訳方向、出力欄を初期状態に戻す
def reset_fields():
    return "", "日本語 → 英語", ""

# UI構築
with gr.Blocks() as translator_ui:
    # タイトルと説明
    gr.Markdown("## 英語↔日本語 翻訳アプリ")
    gr.Markdown("Google翻訳APIを使ったシンプルな翻訳ツール")

    # 入力欄と翻訳方向の選択
    with gr.Row():
        with gr.Column(scale=2):
            input_box = gr.Textbox(
                label="翻訳するテキスト",
                lines=5,
                placeholder="ここに翻訳したい文章を入力してください"
            )
        with gr.Column(scale=1):
            direction_selector = gr.Radio(
                ["日本語 → 英語", "英語 → 日本語"],
                label="翻訳方向",
                value="日本語 → 英語"
            )

    # 翻訳結果の表示欄
    output_box = gr.Textbox(
        label="翻訳結果",
        lines=5,
        interactive=False,
        show_copy_button=True
    )
    output_box.elem_id = "translated_output"  # JSで参照するためのID

    # ボタン群（翻訳・コピー・クリア）
    with gr.Row():
        translate_button = gr.Button("📖 翻訳する")
        copy_button = gr.Button("📋 コピー")
        clear_button = gr.Button("🗑️ クリア")

    # ボタンの動作定義
    translate_button.click(
        fn=run_translation,
        inputs=[input_box, direction_selector],
        outputs=output_box
    )

    # JSで出力欄の内容をクリップボードにコピー
    copy_button.click(
        None,
        js="""
        () => {
            const textarea = document.querySelector('#translated_output textarea');
            if (textarea) {
                navigator.clipboard.writeText(textarea.value);
            }
            return "";
        }
        """,
        outputs=[]
    )

    # 入力・方向・出力をすべて初期化
    clear_button.click(
        fn=reset_fields,
        outputs=[input_box, direction_selector, output_box]
    )

# アプリ起動
translator_ui.launch()

（実行例）

Gradio + deep-translator の翻訳処理フロー

① ユーザー入力（Gradio UI）
ユーザーはGradioのWebインターフェース上で翻訳したいテキストを入力する。
翻訳方向は direction_selector（gr.Radio）で「日本語 → 英語」または「英語 → 日本語」から選択する。
入力と選択が完了したら、translate_button（gr.Button）をクリックして翻訳処理を開始する。

② Python関数 run_translation() の呼び出し
Gradioは、UIイベント（ボタン押下）に応じて run_translation(input_text, selected_direction) を呼び出す。この関数は、入力テキストと翻訳方向（例：英→日）などのパラメータを受け取る。

③ deep-translator ライブラリによる翻訳処理
関数内で GoogleTranslator(source=..., target=...) を使って翻訳を実行する。deep-translator は Google Translate の非公式APIをスクレイピング的に利用している。

④ 外部アクセス：translate.google.com
deep-translator は裏で translate.google.com にアクセスして翻訳結果を取得する。正式なAPIではなく、Web版のGoogle翻訳を模倣しているため、安定性や利用制限（レート制限・仕様変更など）に注意が必要。

⑤ 結果の返却とUIへの表示
翻訳結果が run_translation() 関数から返され、Gradio UIに表示される
output_box（gr.Textbox） に表示される。
この出力欄の value に翻訳結果が自動的に反映され、ユーザーに提示される。 また、show_copy_button=True により、ユーザーは翻訳結果をワンクリックでコピーできる。

GradioはFlaskやReactなどの複雑なWebフレームワークは一切不要で、簡単にWebアプリ化できるのは非常に魅力です。Google Colabでも動作します。また多機能なので、他にも色々な機能連携を使ってカスタマイズすると、面白いものができると思います。