Siv3DAdvent Calendar 2024

Cloud Vision API でレシートを記録するプログラムを作った

Posted at 2024-12-07

OpenSiv3D と Cloud Vision API を使って購入記録を管理するツールを作った話です。

アプリケーションの概要

自分の欲しいレシート管理アプリは、こんな仕様のものです。

レシート写真からある程度自動的に内容を読み取れる
一度に複数枚のレシートを処理できる
読み取ったデータを手動で修正できる（重要）
データエクスポートできる（重要）

スマホで使える家計管理系のアプリは単体で完結するものがほとんどで、エクスポートに対応しているものは探した限り見つかりませんでした。自分は入力だけをアプリで済ませて、データは再利用できる場所にまとめたかったので、この用途に合うものを自作することにしました。

文字認識には精度が高く、十分な無料枠のある Google の Cloud Vision API を使いました。

この記事では、Cloud Vision API を OpenSiv3D プログラムに組み込んで使うまでの手順と、記録作業を効率化するために行った工夫をまとめます。

できたもの

参考までにプロジェクト全体を公開しました（ほぼ個人用なので汎用性は低いと思います）

OCR を行うまで

Cloud Vision API は Google Cloud の提供する Vision AI サービスの一つです。

アプリケーションから使用するには、クライアントライブラリを通して画像ファイルをサーバーに送る必要があります。

Google Cloud のクライアントライブラリは多くのプログラミング言語をサポートしており、C++ も対象に入っています。ただし、C++ のライブラリはビルドがとても難しく、MSVC でテストされているのかもよくわからなかったので、これを直接使うことは断念しました。

代わりに C# のクライアントライブラリは Nuget から追加するだけですぐに使えたので、API の呼び出し部分は C# で独立した exe として作り、C++ からこれを起動して標準入出力を通して使う方針にしました。

設定とインストール

Google Cloud のサービスを利用するには、まずブラウザでサービスのプロジェクトの設定行ったあと、アクセス用の API キーを作成して、ローカルの環境変数でキーを参照できるようにする必要があります。

以下の記事でわかりやすく解説されているので、この手順にそのまま従いました。

Cloud Vision API に OCR のリクエストを送る

Visual Studio で C# コンソールアプリを作成し、プロジェクトの NuGet パッケージ管理から Google.Cloud.Vision.V1 を追加します。これで Cloud Vision API の機能を使えるようになりました。

以下はtest.jpgの OCR 結果をコンソールに出力する簡単なサンプルプログラムです。

Main.cs

using Google.Cloud.Vision.V1;

var client = ImageAnnotatorClient.Create();

var feature = new Feature
{
    Type = Feature.Types.Type.TextDetection,
    MaxResults = 100,
};
var request = new AnnotateImageRequest()
{
    Image = Image.FromFile("test.jpg"),
    Features = { feature },
};
var response = client.Annotate(request);

foreach (var item in response.TextAnnotations)
{
    Console.WriteLine(item.Description);
}

test.jpg

コンソール出力結果

TextAnnotations と FullTextAnnotation

API のレスポンスには TextAnnotations と FullTextAnnotation という２通りの形式でデータが入っており、それぞれが要素ごとに外接長方形（OBB）の情報を持っています。前者のデータはリスト構造で、後者は階層構造です。

サンプル画像の解析結果をもとに、両者の内容を比較してみます。

TextAnnotations の中身

TextAnnotations の中身を見ると、最初の要素に解析結果の全文、２つ目以降にバラした各単語が入っています。

最初の全文に関しては、座標で文字のまとまりを識別した上で、要素が離れている場合はスペース、縦方向にずれる場合は改行が挿入されるようです。

response.TextAnnotations[0].Description

FamilyMart
アメ村三角公園前店
大阪府大阪市中央区西心斎橋2丁目
18-6
電話: 06-6484-2006
登録番号: T8120001031074
2024年7月6日 (土) 12:47
レジ 2-1377
貴No. 165
領取 証
ルマンドバニラF
合計
¥350
¥350
(8% 対象
¥350)
(内消費税等
¥25)
クレジットiD
¥350
「軽」は軽減税率対象商品です。
クレジットiD支払
伝票番号
端末番号
会員番号
有効期限
承認番号
取引内容
支払区分
支払金額
23611
7704595577901
XXXX XXXX XXXX 6740
XX/XX
売上
一括
¥350
お客様控え

FullTextAnnotation の中身

FullTextAnnotation の中身は Pages > Blocks > Paragraphs > Words という階層に分かれます。階層ごとにテキストを連結して出力した結果、各階層では下図のような区切られ方になっていました。

この結果を見る限り、おそらく以下のようなまとめ方をしているのではないかと思います。

Pages：すべてのBlocksをまとめたもの
- Blocks：座標の近いParagraphsをまとめたもの
  - Paragraphs：意味を考慮して（文単位？）Wordsをまとめたもの
    - Words：単語単位

今回は正確な座標が欲しいのと、Paragraphs でも少し大き過ぎな感じがあったので、Words（＝TextAnnotations の２要素目以降）の結果を解析して使うことにしました。

OpenSiv3D から Cloud Vision API を使う

C# 側は上記サンプルの内容に OBB 情報を追加して出力しています。このプログラムで注意するべき点は、呼び出し元が OpenSiv3D になるため、受け取ったコマンドライン引数を UTF-32 文字列として解釈する必要がある点です。

CloudVision.cs

using System.Text;
using Google.Cloud.Vision.V1;

var utf32 = Encoding.UTF32;
var bytes = utf32.GetBytes(args[0]);
var filepath = utf32.GetString(bytes);

var client = ImageAnnotatorClient.Create();

var feature = new Feature
{
    Type = Feature.Types.Type.TextDetection,
    MaxResults = 100,
};
var request = new AnnotateImageRequest()
{
    Image = Image.FromFile(filepath),
    Features = { feature },
};
var response = client.Annotate(request);

Console.WriteLine(response.TextAnnotations.Count - 1);
for (int i = 1; i < response.TextAnnotations.Count; i++)
{
    var annotation = response.TextAnnotations[i];
    var blockVs = annotation.BoundingPoly.Vertices;
    Console.WriteLine(blockVs.Count);
    foreach (var v in blockVs)
    {
        Console.WriteLine(v.X);
        Console.WriteLine(v.Y);
    }

    Console.WriteLine(annotation.Description);
}

C++ 側では ChildProcess にパスを渡して CloudVision.exe を起動します。このときに、コマンドライン引数で画像のパスを与えて、プロセスの入力ストリームから解析結果を受け取ります。

Main.cpp

# include <Siv3D.hpp> // Siv3D v0.6.15

constexpr auto VisionExePath = /* ビルドした CloudVision.exe のパス */;

// CloudVision の出力結果を読み取り、単語と OBB ペアの配列を返す
Array<std::pair<String, Array<Vec2>>> ParseData(std::istream& is);

void Main()
{
	Scene::SetBackground(Palette::White);
	Font font(16);

	const auto imagePath = FileSystem::CurrentDirectory() + U"test.jpg"; // 絶対パス
	Texture texture(imagePath);
	Window::Resize(texture.width() * 2, texture.height());

	ChildProcess process(VisionExePath, imagePath, Pipe::StdIn);
	const auto words = ParseData(process.istream());

	while (System::Update())
	{
		texture.draw();

		Transformer2D t(Mat3x2::Translate(texture.width(), 0));

		for (const auto& [word, obb] : words)
		{
			LineString(obb).drawClosed(1, Palette::Orange);
			const auto obbCenter = obb.sum() / obb.size();
			font(word).drawAt(obbCenter, Palette::Black);
		}
	}
}

Main.cpp

Array<std::pair<String, Array<Vec2>>> ParseData(std::istream& is)
{
	Array<std::pair<String, Array<Vec2>>> result;

	std::string line;
	auto readText = [&](std::istream& is)->String
		{
			std::getline(is, line);
			if (line.ends_with('\r'))
			{
				line.pop_back();
			}
			return Unicode::FromUTF8(line);
		}
	;

	auto readInt = [&](std::istream& is)->int
		{
			return ParseInt<int>(readText(is));
		}
	;

	const auto wordCount = readInt(is);
	for (auto wo : step(wordCount))
	{
		const auto wordVsCount = readInt(is);

		Array<Vec2> wordBBVs;
		for (auto v : step(wordVsCount))
		{
			const auto x = readInt(is);
			const auto y = readInt(is);
			wordBBVs.emplace_back(x, y);
		}

		const auto text = readText(is);
		result.emplace_back(text, wordBBVs);
	}

	return result;
}

読み取ったテキストを解釈する

単語の配列と OBB を取れるようになったので、これを元にレシートの情報を解析します。

正規表現を使った分類

記録したい情報は以下の４つです。単語列から正規表現を使って、大まかに分類することを目指します。

店名
購入日時
商品名
値段

店名

レシートの先頭から '店' で終わる文字列を見つけたら、そこまでを店名としてマークします。チェーン店のスーパーやコンビニなら大体このルールに当てはまると思います。正規表現で表すと以下の通りです。

const auto reg = UR"([a-zA-Z\p{Katakana}\p{Han}ーｰ\-～~^店]+店)"_re;

購入日時

日付と時刻にはそれぞれ２パターンの書き方があるので、これらの組み合わせをパースできるようにしました。ただし、OCR 結果が完全な状態とは限らないため、日付以降は文字が抜けても部分的にマッチできるようにしています。

2024年12月07日(土) 12時34分
2024/12/07 12:34

const auto reg = UR"((\d\d\d\d)[年/](\d\d?)[月/](\d\d?)日?\(?[月火水木金土日]?\)?(\d\d)?[時:]?(\d\d)?)"_re;
const auto result = reg.search(U"2024年12月07日(土)12:34");

値段

値段の表記は、自分が確認した範囲だと下記パターンのいずれかでした。

¥ 数字
* 数字（セブンイレブンのみ）
数字

¥か*直後の数字はそのまま値段として扱えますが、単体で現れる数字もすべて含めてしまうと誤検出が多くなります。したがって、数字単体の場合は条件を追加して、

配列上の順番が日付よりも後ろにある
OBB の左上座標がレシートの AABB 上で6割の位置よりも右にある

の両方を満たす要素のみ値段としてマークするようにしました。

商品名

商品名には特定の文字が付くわけではないため、正規表現で直接的な式を作るのは難しいです。値段をある程度正しく識別できたという前提で、単語を順番に辿って同じ行の中で値段よりも手前にある要素はとりあえず商品名としてマークする仕様にしました。

その他

レシートの合計金額よりも後ろに記録したい情報が現れることは基本的にないので、以下のいずれかの文字にマッチしたら、それ以降に付けたマークは誤検出とみなして取り消すようにしました。

const auto reg = UR"(計|外税|軽減|税率|対象)"_re;

画像の回転補正

写真の 解像度が十分でなく かつ 傾いている ものを Cloud Vision API に投げると、認識率がガクッと下がるケースがあります。認識率は写真の角度に比例して変化する訳ではなく、安定して読める場合と全然読めない場合に割とはっきり分かれていました。

失敗したケースでは日本語の認識率がかなり下がるものの、数字と記号に関してはロバストに検出できていました。このときの OBB を使用して、全要素の傾きの平均値を計算した結果、レシートの傾きとおおよそ一致していました。そして、計算した角度の分だけ画像を逆向きに回転させてから再度 OCR にかけると、今度は大部分の文字を正しく読み取ることができました。

したがって、角度が付いている場合は API リクエストを２回送ることで比較的安定した認識結果が得られます。最初からレシートの角度を推定したらいい話なのですが、これに関して良い方法を知らないので「リトライボタンを押したら回転補正して再リクエストを投げる」という仕様にしました。