【PowerApps・AIBuilder】30分で英語翻訳アプリ作ってカードゲームで遊んだ話【Azure AI Translator】

筆者はカードゲームが趣味です。最近は友人と英語のゲームを遊ぶことが増えました。
カードに書かれている英文を頑張って読みながらゲームをしていますが、意味が正確にわからないこともしばしばあります。

この記事は「海外のカードゲームを遊ぶときに楽に英文を訳したいなあ」という思いを技術力でなんとかするため、書かれた英文をパッと訳してくれるアプリをチョイと作った時の記録です。

1. やりたいこと・方針

• 英文が書かれたカードの画像を取得する
• 画像から英語の文章を抽出する
• 抽出した文章を日本語に翻訳して表示する

以上の機能をスマホから使えるようにしておけば、出先で英文を訳すのに十分でしょう。
今回は PowerApps 上でこの機能を実装する方法を紹介します。

2.【AIBuilder：テキスト認識】画像を取得する・書かれている文章を取り込む

キャンバス アプリのテキスト認識エンジン コンポーネントを配置することで、アプリ上の画面にカメラか保存済み画像からの画像取り込み、取り込んだ画像からの事前構築済みモデルによるテキスト抽出が行えます。

まずはこの辺の公開情報を参照して空白のキャンバスアプリを作成します。
スマホから使うのでモバイル向けの画面サイズにしないといけないことに注意。

コンポーネントを配置していきます。AI Builder から [テキスト認識エンジン] をクリックすると、AI Builder ライセンスが必要な旨の表示がされます。[OK] をクリックすると、適当な位置にテキスト認識エンジンの部品が配置されます。

今回の取り組みでは試用版ライセンスを使用してプレミアム機能を使用しています。
AI Builder 試用版ライセンスをアクティブ化する方法については、公開情報を参照してください。
https://learn.microsoft.com/ja-jp/ai-builder/ai-builder-trials

ほかの必要な"テキストラベル"を 2 つ、"ボタン" 1 つを追加しておき、配置されたコンポーネントのサイズを適宜調整します。
最終的な配置と役割とは以下の通りです。

ではテキスト認識をテストしてみましょう。
TextRecognizer コントロールで取得した全文を取得して表示するため、テキストラベルの Text プロパティに TextRecognizer1.FullText を設定しておきます。

アプリを保存⇒公開してモバイルから使用してみます。
筆者の PowerApps ポータルから保存した PowerApps 名を選択、新しい画像から[写真を撮る]を選んでいきます。
目当ての英文を写真に撮って抽出されるか見てみます。

"新しい画像" をクリックして、カメラを起動して和訳したい英文を写真に撮ります。

抽出成功しているようですね。では次にこれを翻訳した結果を表示できるようにしていきます。

3.【Azure AI Translator】英文を日本語に訳す

PowerApps から PowerAutomate のフローを呼び出し、その中で Azure AI Translator を使用して翻訳を行った結果を得ていきましょう。
作成方法については公開情報に記載のとおりですが、"マルチサービスの Azure AI Foundry リソースではなく" 単一サービスの Translator リソースを作成してください。もしかすると、「翻訳」と日本語でリソース名を入力したほうがいいのかもしれません。（筆者の環境ではどうやっても Azure AI Foundry しか出てきませんでした。）

これじゃなくて

これです。

リージョン、サブスクリプション、リソースグループなど環境に合わせた内容を設定して作成したら、リソースをクリックしてアクセス用のキーをコピーしておきます。
なお、Translator の無料の価格プラン（F0）では一定の文字数まで翻訳に料金が発生しないので、今回はこの価格プランを指定しました。

作成したリソース名と合わせて後ほど PowerAutomate フローの中で使用するので記録しておきましょう。

リソースの作成が完了したら、呼び出し元の PowerAutomate フローを作っていきます。
先ほどの実装内容で PowerApps 上に抽出したテキストが保持されるところまで作りこんであるので、抽出テキストを受け取る⇒翻訳済みのテキストを返す というシンプルなものを作っていきます。
最終的に構成したものはこんな感じです。

PowerAutomate の翻訳コンポーネントで、先ほど記録したキーとリソース名を指定しておきます。
接続名は任意ですのでここでは QiitaTranslator としておきます。

PowerAutomate 側が出来上がったら、PowerApps 側から抽出テキストを送るよう処理を追加していきます。抽出結果に改行文字が含まれてしまうので翻訳時に一行で読み込まれるよう、改行を置換してから送信することにしました。
抽出済みのテキスト recognizedText に含まれる改行文字を、Substitute 関数で空白に置換します。

Set(replacedText,Substitute(Substitute(recognizedText, Char(10), " "), Char(13), " "));

翻訳のため、抽出したテキストをフローに送る処理は TranslateFlow.Run(replacedText) です。
これをアプリ側のグローバル変数で受け取る必要があるので、
Set(TranslatedText, TranslateFlow.Run(replacedText)) というような感じになります。
最終的に翻訳処理のフローの起動ボタンの内容はこんな感じ。

これで作成した Azure AI Translator リソースが翻訳結果を返してくれる想定です。
翻訳の結果が TranslatedText.returnText として取得できるように設定してあるので、これを PowerApps のテキストラベルで表示できるようにしておきましょう。

では保存⇒公開として、モバイル版の PowerApps で動作するか見てみましょう。

4. 実験

調査時間はそれなりにかかりましたが、実装は一瞬でした。
使い物になるだろうか。いくぞ！

いい感じに日本語に訳してくれてますね

5. まとめ

テキスト認識に使った AI Builder の事前構築済みのモデルですが、今回の目的には十分な性能を見せてくれました。
デリバリー重視で何か動くものを見せたいときの選択肢の一つとしては悪くなさそうです。
応用の仕方によってはまだまだ面白いものが作れそうですね。

筆者も集まりにこのアプリを持ち込んで、友人と楽しいひと時を過ごすことができました。
ぜひ皆さんも、アイデアを形にする手段として AI Builder を活用してみてはいかがでしょうか。