GPT-4oにGASでOCRをさせよう

freeeラボではこれまでGoogleのDrive APIを使って、レシートや請求書などの証憑のOCRをしてきました。

メリットは、Google Apps Script（以降GAS）経由でAdvanced Serviceとして使用している限りにおいては費用が発生しなさそうという点です（詳細未確認）。当然利用上限などはあると思います。

そんな中、OpenAIが提供する新しいバージョンの生成AIモデルであるGPT-4oが登場し、画像からの解析性能が大幅にアップしたという話を耳にするようになりました。

ということでGPT-4oにレシートや請求書の解析を担当させるとどうなるかを試してみたいと思います。

今回の記事ではOpenAIのAPIを利用します。またgpt-4oモデルを使用するため、基本的に課金前提となります。リクエストで送信するトークン数に応じて費用がかかりますので、ご注意ください。

APIを操るにはまず公式リファレンスから

ということで早速実装していきます。

APIを使ったプログラミングをする際には、まずは公式リファレンスを見るのが基本です。

https://platform.openai.com/docs/api-reference/chat

英語がずらずらと並びますが、翻訳ソフトの力などを借りて読み解いて行きましょう！

ということで、今回もおなじみChatの機能を使います。プロンプトを投げるとそれに対応したテキストメッセージを返してくれるやつですね。

リファレンスの右側にExample requestという欄があります。ここにImage Inputというタブがあるので、それを選択してリクエストサンプルを確認します。

多くのAPIのリファレンスで最初に表示されているリクエストサンプルはcurlコマンドであることがほとんどです。

GASでのAPI操作の王道は、このcurlコマンドをJavaScriptもしくはGASに読み替えることからはじまります。

今どきはChatGPTがあるので、お願いすればサクッとGASに読み替えてくれます。

わが家のChatGPTは、以下のようなコードを出力してくれました。

/**
 * OpenAI APIにリクエストを送信する関数。
 */

function sendOpenAiRequest() {
  const url = 'https://api.openai.com/v1/chat/completions';

  // ヘッダーを設定する
  const headers = {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer ' + PropertiesService.getScriptProperties().getProperty('OPENAI_API_KEY')
  };

  // データを設定する
  const data = {
    'model': 'gpt-4-turbo',
    'messages': [
      {
        'role': 'user',
        'content': [
          {
            'type': 'text',
            'text': 'What\'s in this image?'
          },
          {
            'type': 'image_url',
            'image_url': {
              'url': 'https://upload.wikimedia.org/wikipedia/commons/thumb/d/dd/Gfp-wisconsin-madison-the-nature-boardwalk.jpg/2560px-Gfp-wisconsin-madison-the-nature-boardwalk.jpg'
            }
          }
        ]
      }
    ],
    'max_tokens': 300
  };

  // オプションを設定する
  const options = {
    'method': 'post',
    'headers': headers,
    'payload': JSON.stringify(data)
  };

  // リクエストを送信する
  const response = UrlFetchApp.fetch(url, options);

  // レスポンスをログに出力する
  Logger.log(response.getContentText());
}

ちょっとコードの細かいところが気に入らないですが、「この画像には何がある？」というプロンプトに対して、ちゃんとレスポンスが返ってきます。

ちなみにサンプルコードが見に行っているのはこの画像

この画像は、緑豊かな野原に木製の遊歩道が伸びている、絵のように美しい自然の風景をとらえている。草原には背の高い草が生い茂り、午後の終わりと思われる柔らかな日差しに鮮やかに照らされている。上空には青空が広がり、白い雲がゆるやかに広がっている。この配置は奥行きと遠近感を与え、鑑賞者の視線を小道に沿って遠くの地平線へと集中させ、散在する木々や茂みによって強調されている。このような環境は、自然保護区や田舎の公園を表していると思われ、静かな散歩や自然環境とのつながりに理想的である。

gpt-4-turboモデルのレスポンス 翻訳by DeepL

画像ファイルはURLで指定する

サンプルコードを見てみると、入力する画像ファイルはURLで指定しています。

{
  'type': 'image_url',
    'image_url': {
    'url': 'https://upload.wikimedia.org/wikipedia/commons/thumb/d/dd/Gfp-wisconsin-madison-the-nature-boardwalk.jpg/2560px-Gfp-wisconsin-madison-the-nature-boardwalk.jpg'
  }
}

GASでの操作なので、Googleドライブに保存した画像ファイルの共有設定を「リンクを知っている全員：閲覧者」にしてファイル共有URLをAPIに渡せば読み取ってくれるのかな？と思い、試してみました。

しかし…リンクをコピーで取得したURLでは画像を読み取ってくれませんでした。

Googleドライブ内の画像ファイルを共有リンクではなく、ブラウザで画像として表示させるリンクを指定する必要があります。

ここから有料記事にしようかな…と思ったのですが、ChatGPTに聞けばサクッと答えを教えてくれたので、まだしばらく無料パートを続けます笑

通常、共有リンクの形式は次のようになっています。

https://drive.google.com/file/d/ファイルID/view?usp=sharing

これを次の形式に変換します

https://drive.google.com/uc?export=view&id=ファイルID

このURLをAPIに渡してあげることで、画像を読み取って、プロンプトの指示に従ったレスポンスを返してくれます。

OpenAIのChat APIを使用して画像入力を送信し、応答を取得する関数

ということでGoogleドライブ内の画像のURLと簡単なプロンプト、使用するAIモデルを指定して画像から応答を取得するスクリプトを実装してみました。

レシートを読み込ませた実行結果はこんな感じ