jsurfer's language selection page >
jsurfer のホームページ（日本語） >
Web アプリ >
リアルタイム自動翻訳 by ChatGPT -英語から日本語へ-
〜「htmlタグ有り」バージョン〜
作成日：2023年08月21日
最終更新日：2023年09月01日
OpenAI API を使って ChatGPTで Webページをリアルタイムで日本語に訳す Web アプリの「htmlタグ有り」バージョンです。
必要なもの:
1) OpenAIのAPIキー（OpenAI の有料ユーザーのみ取得可能）
2) Python (私は2019年の MacBook Pro 16-inch の Terminal アプリの Python3 を使いました。2023年08月20日の時点での最新の macOS (Ventura, Version 13.5.1)には Python3 のみがインストールされていて、'python' コマンドで実行する古い pythonのバージョンはインストールされていません。なので最新の macOS を使う場合はこのページにある 'python' コマンドをすべて 'python3' に変更して、'pip' コマンドもすべて'pip3' に変更して実行してください)
3) requests (Webページを取得するためのライブラリ)
4) Flask (Python用の Webアプリケーションフレームワーク)
この Webアプリの仕組み：
ユーザーが Webフォームを通じて URL を入力。(index.html)
サーバーがその URL のウェブページの内容を取得。(app.py)
その内容を ChatGPT を使って日本語に翻訳。 (app.py)
翻訳した内容を新しいウェブページとしてユーザーに表示。(translated.html)
==========
とりあえずこの Web アプリを使ってみたいという方はこのセクションを読んでください。
1. 必要なスクリプトとhtml を zip ファイルにしたので、ここからダウンロードする
2. Zip ファイルを解凍してディレクトリの構成を下記のようにしておく：
3. app.py を「テキストエディット」等のテキスト編集アプリを使って開き、"ENTER-YOUR-API-KEY-HERE"の部分を自分の API Key に変更して保存する
4. Terminal アプリを起動して、以下の 3つのコマンドを使用して flask と openai と requests のパッケージをインストールする。python3 を使用している場合は "pip" の部分を "pip3"に置き換えてください。(これらのパッケージがインストール済みの場合はこのステップはスキップしてください。間違えて再度実行しても問題はありません。)
5. 下記のラインを実行して、カレントディレクトリを[myFlaskApp]に変更する:
6. 下記のラインを実行して、app.py を起動する(python3 を使っている場合は "python" の部分を "python3"に置き換える):
下記の画面が表示されれば正常にアプリが動作しています:
これで、Web ブラウザから http://127.0.0.1:5000/ にアクセスすると、URL を入力するフォームが表示されます。URL をペーストして「Translate」ボタンをクリックすると、そのページの内容が日本語に翻訳されて表示されます。
これが最初の画面です：
試しにこの私の英語のページを ChatGPT に訳してもらいましょう。URL は http://cheezsj.com/ios/ios_en.html です：
URL をペーストしてから[Translate]ボタンを押します:
結果がこれです。きちんと訳されているのが分かります。今回は「htmlタグ有り」バージョンなので、タグも残っています:
==========
参考までに下記がこの Web アプリを開発するのに私がやったことです:
1. 必要なパッケージのインストール：
最初に、以下のコマンドを使用して必要なパッケージをインストールします。(python3 を使っている場合は "pip" の部分を "pip3"に置き換える)
$pip install flask
$pip install openai
$pip install requests
2. Python スクリプトの作成：
以下の Python スクリプトを app.py などの名前で保存します。(実際の app.py スクリプトとhtml ファイルを zip ファイルにしたので、ここからダウンロードしてください。)
3. HTML ファイルの作成：
以下の内容で templates ディレクトリ内に index.html ファイルを作成します。
以下の内容で templates ディレクトリ内に translated.html ファイルも作成します。
4. ディレクトリの構成が下記のようになっているのを確認します：
5. Flask アプリケーションの実行：
ターミナルで以下のコマンドを実行し、app.py を起動する(python3 を使っている場合は "python" の部分を "python3"に置き換える):
下記の画面が表示されれば正常にアプリが動作しています:
これで、Web ブラウザから http://127.0.0.1:5000/ にアクセスすると、URL を入力するフォームが表示されます。URL をペーストして「Translate」ボタンをクリックすると、そのページの内容が日本語に翻訳されて表示されます。
jsurfer のホームページ（日本語） >
Web アプリ >
リアルタイム自動翻訳 by ChatGPT -英語から日本語へ-
〜「htmlタグ有り」バージョン〜
作成日：2023年08月21日
最終更新日：2023年09月01日
OpenAI API を使って ChatGPTで Webページをリアルタイムで日本語に訳す Web アプリの「htmlタグ有り」バージョンです。
必要なもの:
1) OpenAIのAPIキー（OpenAI の有料ユーザーのみ取得可能）
2) Python (私は2019年の MacBook Pro 16-inch の Terminal アプリの Python3 を使いました。2023年08月20日の時点での最新の macOS (Ventura, Version 13.5.1)には Python3 のみがインストールされていて、'python' コマンドで実行する古い pythonのバージョンはインストールされていません。なので最新の macOS を使う場合はこのページにある 'python' コマンドをすべて 'python3' に変更して、'pip' コマンドもすべて'pip3' に変更して実行してください)
3) requests (Webページを取得するためのライブラリ)
4) Flask (Python用の Webアプリケーションフレームワーク)
この Webアプリの仕組み：
ユーザーが Webフォームを通じて URL を入力。(index.html)
サーバーがその URL のウェブページの内容を取得。(app.py)
その内容を ChatGPT を使って日本語に翻訳。 (app.py)
翻訳した内容を新しいウェブページとしてユーザーに表示。(translated.html)
==========
とりあえずこの Web アプリを使ってみたいという方はこのセクションを読んでください。
1. 必要なスクリプトとhtml を zip ファイルにしたので、ここからダウンロードする
2. Zip ファイルを解凍してディレクトリの構成を下記のようにしておく：
3. app.py を「テキストエディット」等のテキスト編集アプリを使って開き、"ENTER-YOUR-API-KEY-HERE"の部分を自分の API Key に変更して保存する
4. Terminal アプリを起動して、以下の 3つのコマンドを使用して flask と openai と requests のパッケージをインストールする。python3 を使用している場合は "pip" の部分を "pip3"に置き換えてください。(これらのパッケージがインストール済みの場合はこのステップはスキップしてください。間違えて再度実行しても問題はありません。)
5. 下記のラインを実行して、カレントディレクトリを[myFlaskApp]に変更する:
6. 下記のラインを実行して、app.py を起動する(python3 を使っている場合は "python" の部分を "python3"に置き換える):
下記の画面が表示されれば正常にアプリが動作しています:
これで、Web ブラウザから http://127.0.0.1:5000/ にアクセスすると、URL を入力するフォームが表示されます。URL をペーストして「Translate」ボタンをクリックすると、そのページの内容が日本語に翻訳されて表示されます。
これが最初の画面です：
試しにこの私の英語のページを ChatGPT に訳してもらいましょう。URL は http://cheezsj.com/ios/ios_en.html です：
URL をペーストしてから[Translate]ボタンを押します:
結果がこれです。きちんと訳されているのが分かります。今回は「htmlタグ有り」バージョンなので、タグも残っています:
==========
参考までに下記がこの Web アプリを開発するのに私がやったことです:
1. 必要なパッケージのインストール：
最初に、以下のコマンドを使用して必要なパッケージをインストールします。(python3 を使っている場合は "pip" の部分を "pip3"に置き換える)
$pip install flask
$pip install openai
$pip install requests
2. Python スクリプトの作成：
以下の Python スクリプトを app.py などの名前で保存します。(実際の app.py スクリプトとhtml ファイルを zip ファイルにしたので、ここからダウンロードしてください。)
from flask import Flask, request, render_template
import requests
import openai
openai.api_key = "ENTER-YOUR-API-KEY-HERE"
app = Flask(__name__)
@app.route('/', methods=['GET', 'POST'])
def index():
if request.method == 'POST':
# ユーザーから入力されたURLを取得
url = request.form.get('url')
# URLからウェブページの内容を取得
response = requests.get(url)
page_content = response.text
# ウェブページの内容を日本語に翻訳
prompt_text = "英語から日本語に翻訳:¥n" + page_content[:3000] # 最初の3000文字だけ翻訳（APIの制限を考慮）
translation = openai.Completion.create(
model="text-davinci-003",
prompt=prompt_text,
max_tokens=2000,
n=1,
stop=None,
temperature=0.5
)
translated_content = translation.choices[0].text.strip()
# 翻訳結果を表示
return render_template('translated.html', content=translated_content)
# GETリクエストの場合、URLを入力するフォームを表示
return render_template('index.html')
if __name__ == "__main__":
app.run(debug=True)
|
3. HTML ファイルの作成：
以下の内容で templates ディレクトリ内に index.html ファイルを作成します。
<!DOCTYPE html> <html> <head> <title>URL Translator</title> </head> <body> <form action="/" method="post"> <label for="url">Enter a URL:</label> <input type="text" name="url" id="url"> <button type="submit">Translate</button> </form> </body> </html> |
以下の内容で templates ディレクトリ内に translated.html ファイルも作成します。
<!DOCTYPE html>
<html>
<head>
<title>Translated Page</title>
</head>
<body>
<h1>Translated Content:</h1>
<div>{{ content }}</div>
<a href="/">Back</a>
</body>
</html>
|
4. ディレクトリの構成が下記のようになっているのを確認します：
5. Flask アプリケーションの実行：
ターミナルで以下のコマンドを実行し、app.py を起動する(python3 を使っている場合は "python" の部分を "python3"に置き換える):
下記の画面が表示されれば正常にアプリが動作しています:
これで、Web ブラウザから http://127.0.0.1:5000/ にアクセスすると、URL を入力するフォームが表示されます。URL をペーストして「Translate」ボタンをクリックすると、そのページの内容が日本語に翻訳されて表示されます。
