【tesseract.js & Azure Translator】海外ゲームのスクリーンショット画像を渡して、英文を翻訳するwebアプリ

今回は、管理人がsteamで海外のゲームをやってて、『翻訳するときにわざわざブラウザの入力欄に文字をうつのが面倒くさい』というのがあったので、考えたアプリについて紹介します。仕組みとしては、tesseract.jsでスクショの英文を認識してAzure Translatorに渡して翻訳する、という流れです。さっそく内容を確認してみましょう。

前回の内容～APIキーとか設定して、Azure Translatorを使えるようにする

当サイト前回の記事です。まず下準備として、Azure Translatorのリソースを作成して、英語の文字列を渡して翻訳できるようにします。リソースを作成時の画面に出てきた、APIキーを控えてプログラムに使います。

Azureポータル上での設定は、以下の過去記事をご覧ください。

リソース作成方法やエンドポイントurlをチェック、英語→日本語の翻訳機能を作る
https://division-web.atelier-ss-agency.com/azure-translator-setup/

今回使用するtesseract.jsとは？

ブラウザでもNodeJSを搭載したサーバーでも実行できる、テキストの向きとスクリプトの自動検出、段落、単語、文字の境界ボックスを読み取ることができるライブラリとのことです。

オープンソースのOCR（光学文字認識）エンジンで、100以上の言語をサポートします。管理人は英語文章の認識に使ってみます。

tesseract.js
https://tesseract.projectnaptha.com/

tesseract.js & Azure Translatorで、英語が書いてある画像から文字を抽出して翻訳するコード

画像を渡して英語文字を抽出して翻訳するコードは、以下のようになりました。翻訳部分は前回と一緒で、フォームやボタン部分を追加しています。

フォーム・送信ボタン・認識結果表示部分・翻訳結果表示部分にそれぞれidを振って、jsで動かせるようにします。スクリプト自体は送信ボタンにクリックイベントをつけて、押したらスタートという形に。処理中エラー捕捉にtry/catchを入れるほか、文字検出不可、翻訳失敗などのケース対応も記載。

表示については・・ このような形になります。画像をアップしてボタンを押すと、結果が画像認識部分と翻訳結果表示部分に表示されます。エラー時には、その内容がここに出ます。

動作確認は上記のファイルをhtmlでローカルｐｃに保存し、ブラウザ（google chrome）で実行しました。

管理人のsteamに入っている、英語表記のゲームのスクショを渡してみる

管理人のsteamには、洋ゲーもいくつはいっていますが、Redoutやproject wingmanあたりが多言語対応になっており、またメジャーどころは多言語対応されているものが多いので、この翻訳アプリを使う必要はありません。そこでチョイスしたのが『steam版のys(イース)』。ファルコムとは別のパブリッシャーが海外移植を担当しており、表記が全部英語です（modかなんかで日本語化する方法はあるかもしれません）。なお、管理人は昔の体当たりゲームより、最近の７～１０あたりがアクションも豊富で楽しいと思います。

よくあるRPG的な会話シーン

まずは冒頭の難破して運ばれて休んでるシーン。 英語ですね。

変換精度を上げるコツとしては・・・ ウィンドウ部分をこんな感じでトリミングしたり、コントラストで文字を目立たせたり。
次バージョンでは座標や範囲指定機能があるとよいかもです。

冒頭のシーン抽出・変換結果がこちら。 だいたいあっていますが、一部のウィンドウ模様などが誤変換されている感じです。領域を絞ればよさそうです。

バック黒のナレーションっぽい文章

次に、ナレーションっぽい文章。 これも少しトリミングをかけてからやってみます。バックが黒なので、コントラストはそんなに必要なさそう。

抽出・翻訳結果。 文章はOKでした。ウィンドウ内の次のページ、みたいなアイコンがマークになってしまう以外は。

スチルっぽい会話シーン

キャラの一枚絵＆右側にコマンドがあり、下がメッセージウィンドウというレイアウト。 最近のYsだと3Dキャラがシームレスにやる感じなので、やや時代を感じます。昔はこういうゲーム多かったですね。

これも、座標指定とかをしていないので、ウィンドウ部分をトリミングします。 後ろに少し透けているのも、誤変換に影響しそうな感じ。

抽出・翻訳結果。 後ろの模様が影響したのか、『over-estimate』がうまく変換できなかった印象。看護師さんの名前も後ろの模様で誤変換でしょうか。エイラさんって方。

あとがき・まとめ

まとめると、こんなところでしょうか。ある程度形になったけど、同時に課題も見えたので、時間があったらバージョンアップしてみたいと思います。