MASATO NASU

Tools

Apps, prototypes, and utilities designed for actual use.

REALTIME TRANSLATOR

REALTIME TRANSLATOR

#AI#生成AI#OpenAI#Realtime API#リアルタイム翻訳#音声翻訳#英語#英会話#通訳#PWA#Webアプリ#React#WebRTC#Cloudflare Workers#BYOK#個人開発#アプリ開発#REALTIME TRANSLATOR

日本語と英語をその場でつなぐリアルタイム音声翻訳PWAを作りました 仕事などで英語を話す必要があるとき、 「聞き取れるだろうか」 「すぐ英語に言い換えられるだろうか」 という不安があります。 そこで今回、**日本語と英語をリアルタイムで相互翻訳するWebアプリ「REALTIME TRANSLATOR」**を作りました。 音声を入力すると、その場で翻訳された文章が字幕として表示され、さらに翻訳音声も再生されます。 日本語 ⇄ English をリアルタイム翻訳 REALTIME TRANSLATORは、OpenAIのリアルタイム音声翻訳モデルとWebRTCを利用しています。 対応しているのは、 日本語 → English English → 日本語 リアルタイム字幕 翻訳音声 VOICE ON / OFF START / STOP 翻訳中の方向切り替え「SWITCH」 です。 特に今回こだわったのがSWITCHです。 一度STARTしたあと、 日本語 → English で会話している途中にSWITCHを押すと、 English → 日本語 へ切り替えられます。 単純にセッションを終了して作り直す方式では、切り替え時に待ち時間が発生したり、マイクの再取得で不安定になったりします。 そこで現在のバージョンでは、新しい翻訳方向の接続を準備してから古い接続を閉じる方式にしました。 結果として、方向切り替えがかなり滑らかになりました。 字幕と音声の両方を使える 翻訳された内容は、大きな字幕として画面中央に表示されます。 相手の言葉を確認したい場合は字幕を見る。 こちらが話した日本語を英語として相手に聞かせたい場合はVOICE ONにする。 逆に、自分で翻訳結果を読んで話したい場合はVOICE OFFにする。 という使い分けができます。 単なる「音声翻訳機」ではなく、実際の対面コミュニケーションでどう使うかを考えたUIにしています。 BYOK方式にしました 今回の公開版はBYOK(Bring Your Own Key)方式です。 利用者自身のOpenAI API Keyを入力して利用します。 API Keyをアプリ内へ固定で埋め込んで公開する方式ではありません。 入力したキーは保存せず、Realtime翻訳セッションを作るときにバックエンドへ送られ、短期的な接続用シークレットを取得するために使用します。 これによって、私自身のAPI利用料で不特定多数の翻訳処理を負担する構造を避けています。 PWAとして公開 REALTIME TRANSLATORはPWAとして作っています。 そのため専用アプリストアを経由せず、ブラウザから利用できます。 スマートフォンではホーム画面へ追加して、アプリに近い感覚で起動することもできます。 公開版はこちらです。 REALTIME TRANSLATOR https://realtime-translator.1bitexist.workers.dev ソースコードもGitHubで公開しています。 GitHub https://github.com/Masato-Nasu/REALTIME-TRANSLATOR AIは「翻訳するもの」から「会話の間に入るもの」へ 以前の翻訳アプリでは、 音声を録音する ↓ 文字起こしする ↓ 翻訳する ↓ 音声合成する という処理を順番に行うため、どうしても会話に遅れが生まれました。 RealtimeモデルとWebRTCを使うことで、この境界がかなり薄くなってきています。 話している途中から翻訳結果が現れ、そのまま翻訳音声が返ってくる。 これは「翻訳アプリ」というより、二人の会話の間にAI通訳者が存在している感覚に近いです。 今回は日本語と英語だけですが、この仕組みを見ていると、日本語・韓国語など別の言語ペアへ展開することも考えたくなります。 仕事で実際に使える道具として、しばらく使ってみようと思います。