OCR Checkerの帳票情報をテーブルレイアウトにリデザイン

背景

Tax AssistantのOCR Checkerで、レシートの読み取り結果を確認・修正する画面がある。現状は縦にフォームグループが並んでいるが、以下の3つのデータソースを比較しづらい。

1. Gemini OCR結果: 編集可能な値（DB: gemini_reads）
2. サブエージェント読み取り結果: 画像を再読み取りした値（DB: subagent_reads）
3. メインエージェント判定結果: 1と2を比較した結果（DB: comparison_results）

現状のUI

日付、合計支払金額、勘定科目、摘要、支出先が縦に並んでいる。Geminiの結果と編集フォームしか表示されない。サブエージェントの読み取り結果は「不一致」のコメントとしてのみ表示される。

修正計画

新しいテーブルレイアウト（4カラム構成）

各カラムの仕様

1列目: 項目名

• 日付、合計支払金額、勘定科目、摘要、支出先

2列目: Gemini結果（編集可能）

• 現在の編集可能なフォーム要素をそのまま使用
• 日付: <input type="date">
• 金額: <input type="number">
• 勘定科目: ボタングループ（既存のまま）
• 摘要・支出先: <input type="text">

3列目: サブエージェント読み取り結果

• 値の表示: subagent_readsテーブルのread_date, read_amount, read_payee, read_summary
• 信頼度の表現: 枠線の色で表現（編集不可）
  • 95%以上: 薄い枠線（緑系 #16a34a の薄い色）→ 自信あり
  • 50%未満: 濃い枠線（赤系 #dc2626）→ 自信なし
  • 50-95%: 中間色（オレンジ系 #f59e0b）
• 勘定科目: サブエージェントは読み取らないので「-」表示

4列目: 判定結果

• 日付・金額: 完全一致で「✓」、不一致で「要確認」
• 摘要・支出先: Jaccard類似度60%以上で「✓」、未満で「要確認」
• 既存のJACCARD_THRESHOLD = 0.60を使用

データ構造

subagent_reads テーブル:
- read_date, read_amount, read_payee, read_summary (読み取り値)
- date_confidence, amount_confidence, payee_confidence, summary_confidence (信頼度 0-100)

comparison_results テーブル:
- date_score, amount_score, payee_score, summary_score (比較スコア 0-100)
- date_comment, amount_comment, payee_comment, summary_comment (コメント)

判定ロジック（既存のvalidation.pyを参照）

# 日付・金額: 完全一致
is_match = str(ocr_value) == str(read_value)

# 摘要・支出先: Jaccard係数
JACCARD_THRESHOLD = 0.60  # 60%以上で一致
similarity = jaccard_similarity(str(ocr_value), str(read_value))
is_match = similarity >= JACCARD_THRESHOLD

実装タスク

• HTMLテンプレートを縦並びからテーブル形式に変更
• APIレスポンスにサブエージェント読み取り値を含める（現状はJOIN済み）
• 信頼度に応じた枠線色のCSSクラスを追加
• 判定結果の表示ロジックを実装
• 勘定科目のボタングループをテーブル内に収める（レスポンシブ対応）

備考

• 幅が狭い場合のレスポンシブ対応は後回しでよい
• 勘定科目はサブエージェントが判定しないため、3列目は「-」固定
• 既存のAI情報カード（総合スコア、指示メモ）は変更なし