MIT App Inventorで画像からテキスト検出（OCR）を行う方法

はじめに

ここでは，MIT App Inventorでのテキストの検出（OCR）を行います．GoogleのCloud Visionを使用します．
アプリでテキスト検出を行うことができれば，アプリの幅が格段と広がりそうですね！
わからない漢字を調べるアプリや英語の発音をしてくれるアプリなどに応用できそうです．

テキストの検出をCloud Visionで行うが，MIT App Inventorから直接アクセスする方法が見つからなかったため，GoogleのCloud Runを経由してテキスト検出を行います．

アプリの概要

アプリで写真を撮影し，ボタンをクリックすると文章がCloud Run, Cloud Vision APIを使用して，テキストを検出しレスポンスとして認識したテキストをスクリーンに表示します．

Cloud Vision API

Cloud Vision APIとは？

Cloud Vision API
Cloud Vision API を使用すると、開発するアプリケーションの中で簡単に画像検出機能を統合できます。この機能の例としては、画像ラベリング、顔やランドマークの検出、光学式文字認識（OCR）、露骨な表現を含むコンテンツへのタグ付けがあります。

Cloud Run

Cloud Runとは？

Cloud Run
フルマネージドのプラットフォームでアプリやウェブサイトをすばやく構築

Designer画面

機能	内容
カメラ	ボタン，写真撮影
テキスト認識	ボタン，テキスト認識を行う
image1	撮影した画像を表示する
Camera1	写真撮影
Web1	CloudRunへのアクセス
KIO4_Base641	画像をbase64にエンコードする

base64へのエンコードするブロックはExtensionsです．KIO04 Base64

Blocks画面

変数

・CloudRunURL
CloudRunへリクエストを送る変数．自身のCloudRunのURLを入れてください．

ボタンクリック

・カメラ

・テキスト認識

When Camera1. After Picture

when KIO4_Base641. After Image Base64

when Web1. Got Text

コードの記述

Cloud Vision APIを使用できるようにし，Cloud Runにコードを記述します．
生成AIに書いてもらいました～～！AIってほんとに優秀ですね．

main.py

import base64
import json
from googleapiclient import discovery
from flask import Flask, request, jsonify
import functions_framework

app = Flask(__name__)

# Google Cloud Vision API のエンドポイント
VISION_API_ENDPOINT = "https://vision.googleapis.com/v1/images:annotate"

@app.route('/extract_text', methods=['POST']) # POSTメソッドに変更
def extract_text():
    """Base64エンコードされた画像を取得し、テキストを抽出し、JSONで返す"""
    try:
        # リクエストからBase64エンコードされた画像データを取得
        data = request.get_json()
        base64_image = data.get('image')

        if not base64_image:
            return jsonify({"error": "imageデータがありません"}), 400

        # リクエストの本文（JSON）を作成
        request_body = {
            "requests": [
                {
                    "image": {
                        "content": base64_image
                    },
                    "features": [
                        {
                            "type": "TEXT_DETECTION"
                        }
                    ]
                }
            ]
        }

        # Google Cloud Vision API のクライアントを作成
        service = discovery.build(
            'vision', 'v1', credentials=None,
            cache_discovery=False,  # キャッシュを無効にする
            static_discovery=False  # 静的検出を無効にする
        )

        # リクエストを送信
        response = service.images().annotate(body=request_body).execute()

        # レスポンスを処理
        if response.get('responses'):
            text_annotations = response["responses"][0].get("textAnnotations", [])
            # 全てのテキストをリストに格納
            all_text = []
            for annotation in text_annotations:
                all_text.append(annotation.get('description', '')) # descriptionがなかった場合空文字列を返すように修正

            # 抽出したテキストをJSON形式で返す
            return jsonify({"all_text": all_text[0]}) 

        else:
            return jsonify({"error": f"Vision APIリクエストエラー: {response.status_code}"}), 500

    except Exception as e:
        return jsonify({"error": str(e)}), 500

@functions_framework.http
def main(request):
    """HTTPリクエストを処理する"""
    return extract_text()

requirements.txt

functions-framework==3.*
requests
google-api-python-client

CloudRunからURLを貼り付け

終わりに

GoogleのCloud Vision APIを使用することでテキスト認識することができた．
テキスト認識をMIT App Inventorで使用することでいろいろなアプリに応用することができますね！