Azure Computer Visionを使って画像からテキストを抽出

タグ
Azure検証学習
公開日
June 8, 2023

やりたいこと

Azure Computer Visionを使って画像よりテキスト情報を抽出する。

前提条件

  • Azureのアカウントを持っている(組織アカウントでなくてもOK)
    • アカウントを持っていない人はこちらより作成してください。(アカウント作成は色々とネットに記事があるので割愛)
  • Cognitive Servicesが使えること(Computer Visionを使います)
  • Postmanが使えること(Postmanでなくても良いが手軽に使えるので)

作業時間の目安:15~30分

Computer Visionを作成

  • Azureポータルより「Cognitive Services」→「Computer Vision」
image
image

Computer Visionを作成します(設定法はプロジェクトごとに違うと思うので割愛します)

image
image
  • エンドポイントの制限(ネットワーク)は各々よしなに設定をしておいてください

Azure Computer Visionを使って画像からテキストを抽出する手順

  1. エンドポイントとキーを控える

Computer Visionのページでキー1エンドポイントをテキストエディタなどにコピーしておいてください。

image

※エンドポイント情報とキーの情報は外部に漏らさないようにしましょう(高額な請求がきても責任は取れません)

  1. Postmanの設定

続いてPostmanの設定を行います。

  1. MethodをPOSTに設定
  2. URL欄に「https://<エンドポイント>/computervision/imageanalysis:analyze?features=caption,read&model-version=latest&language=en&api-version=2023-02-01-preview」と入力
  3. Headersの「Ocp-Apim-Subscription-Key」に「キー1」の値を設定
  4. Headersの「Content-Type」に「application/octet-stream」を設定
  5. Bodyを選択し、ファイルを選ぶ(解析したいファイル)

image
image

今回は、Opening Lineのホームページの採用情報をキャプチャした画像を用いてみました。

image

こちらの画像をPostmanよりComputer Visionのエンドポイントを指定してリクエストしてみます。

BodyのSelect Fileより画像を選択してSendをクリック。

image

解析結果

image
{
    "captionResult": {
        "text": "a screenshot of a computer",
        "confidence": 0.520709753036499
    },
    "readResult": {
        "stringIndexType": "TextElements",
        "content": "% Opening Line\n会社について\n事業内容\nお知らせ\nBLOG\n採用\nブロックチェーンエンジニア\n業務内容\nブロックチェーン技術を活用した自社サービス開発、受託開発\n応募条件(必須)\nWebシステム開発経験(3年以上)\n応募条件(歓迎)\nブロックチェーンを活用したサービス開発経験\nAzureを活用したサービス開発経験\nAWS/GCP/Firebaseを活用したサービス開発経験\nReact/Vue.jsを使用したフロントエンド開発経験\n雇用形態\n正社員\n勤務地\n東京(フルリモートワーク可)\n勤務時間\n応相談\nモデル例: 9:00~18:00(休憩1時間)\n休日·休暇\n完全週休2日制(土·日)、祝日\n夏期休暇、年末年始休暇\n年次有給休暇\n福利厚生\n健康保険、厚生年金保険、雇用保険\n書籍購入支援、オンライン講座(英会話·エンジニアリング)受講支援",
        "pages": [
            {
                "height": 1273.0,
                "width": 2208.0,
                "angle": 0.0,
                "pageNumber": 1,
                "words": [
                    {
                        "content": "%",
                        "boundingBox": [
                            17.0,
                            28.0,
                            40.0,
                            29.0,
                            38.0,
                            71.0,
                            15.0,
                            70.0
                        ],
                        "confidence": 0.004,
                        "span": {
                            "offset": 0,
                            "length": 1
                        }
                    },
                    {
                        "content": "Opening",
                        "boundingBox": [
                            67.0,
                            29.0,
                            194.0,
                            31.0,
                            194.0,
                            70.0,
                            65.0,
                            71.0
                        ],
                        "confidence": 0.991,
                        "span": {
                            "offset": 2,
                            "length": 7
                        }
                    },
                    
                    {
                        "content": "採",
                        "boundingBox": [
                            2098.0,
                            39.0,
                            2112.0,
                            39.0,
                            2112.0,
                            62.0,
                            2098.0,
                            62.0
                        ],
                        "confidence": 0.996,
                        "span": {
                            "offset": 37,
                            "length": 1
                        }
                    },
                    {
                        "content": "用",
                        "boundingBox": [
                            2119.0,
                            39.0,
                            2131.0,
                            39.0,
                            2131.0,
                            62.0,
                            2119.0,
                            62.0
                        ],
                        "confidence": 0.997,
                        "span": {
                            "offset": 38,
                            "length": 1
                        }
                    },
....省略                   
                    {
                        "content": "年次有給休暇",
                        "boundingBox": [
                            550.0,
                            1093.0,
                            667.0,
                            1093.0,
                            667.0,
                            1114.0,
                            550.0,
                            1114.0
                        ],
                        "spans": [
                            {
                                "offset": 319,
                                "length": 6
                            }
                        ]
                    },
                    {
                        "content": "福利厚生",
                        "boundingBox": [
                            400.0,
                            1169.0,
                            459.0,
                            1167.0,
                            460.0,
                            1187.0,
                            400.0,
                            1189.0
                        ],
                        "spans": [
                            {
                                "offset": 326,
                                "length": 4
                            }
                        ]
                    },
                    {
                        "content": "健康保険、厚生年金保険、雇用保険",
                        "boundingBox": [
                            551.0,
                            1193.0,
                            829.0,
                            1193.0,
                            829.0,
                            1215.0,
                            551.0,
                            1215.0
                        ],
                        "spans": [
                            {
                                "offset": 331,
                                "length": 16
                            }
                        ]
                    },
                    {
                        "content": "書籍購入支援、オンライン講座(英会話·エンジニアリング)受講支援",
                        "boundingBox": [
                            552.0,
                            1228.0,
                            1081.0,
                            1229.0,
                            1081.0,
                            1254.0,
                            552.0,
                            1253.0
                        ],
                        "spans": [
                            {
                                "offset": 348,
                                "length": 32
                            }
                        ]
                    }
                ]
            }
        ],
        "styles": [],
        "modelVersion": "2022-04-30"
    },
    "modelVersion": "2023-02-01-preview",
    "metadata": {
        "width": 2208,
        "height": 1273
    }
}

※とてつもなく長いJSONになったので途中省略しています

JSONの「readResult」「content」という要素をみるときちんと画像から文書を取得できていることが確認できます。

また「words」という要素以下には画像のどの部分から取得したデータかなどの情報もあります。

以上、Azure Computer Visionを使って画像からテキスト情報を抽出する方法の紹介です。

おまけ

Vision Studioというツールをマイクロソフトが用意してくれています。こちらを使うともっと簡単に試すことができると思います。

(私はなぜかリソースがないと言われ、うまく使えなかったので今回はPostmanで試しました)

参考記事