README.md

metadata

title: Inference Comparator
emoji: 🔍
colorFrom: gray
colorTo: green
sdk: gradio
sdk_version: 6.5.1
app_file: app.py
pinned: false
license: mit
short_description: テストデータ(public_150.json)への推論結果(inference.json)を比較するツール

🔍 Inference Comparator

推論結果（inference_v*.json）を比較するためのツールです。

機能

📝 結果概要タブ

• 一覧表示: 全タスクの推論結果をテーブル形式で表示
• フォーマット検証: JSON, YAML, TOML, XML, CSV に対応
• フォーマット不正ハイライト: 不正な行を黄色でハイライト表示
• トークン数表示: 各クエリ・推論結果の推定トークン数を表示
• フィルタリング機能:
  • task_name でフィルター
  • output_type でフィルター
  • フォーマット不正のみ表示
• ソート機能: query または各 inference のトークン数でソート
• モーダル表示:
  • クエリをクリック → クエリ全文をモーダル表示（ズーム・コピー対応）
  • エラーマーク（✗）をクリック → エラー詳細と推論結果をモーダル表示

🔄 詳細比較タブ

• 2つの推論結果を並べて比較: Inference A と Inference B を選択
• 入れ替えボタン（⇄）: A と B の選択を簡単に入れ替え
• Query全文表示: 折り返し表示に対応、スクロール可能
• Diff表示: 差分をunified diff形式でカラー表示

使い方

1. inferenceファイル（1つ以上）をアップロード
2. 「結果概要」タブで概要を確認
   • 黄色の行 = 指定フォーマットとして解釈できない推論結果を含む
   • queryをクリック → 全文表示
   • ✗マークをクリック → エラー詳細表示
3. 「詳細比較」タブで個別のタスクを比較（2ファイル以上必要）

ファイル構成

visualize_app/
├── app.py           # メインアプリ
├── scripts.js       # カスタムJavaScript（モーダル、ズーム機能）
├── styles.css       # カスタムCSS
├── public_150.json  # テストデータ（150タスク）
└── README.md        # このファイル

ファイル形式

inference_v*.json

[
  {
    "task_id": "xxx",
    "generation": "..."
  }
]

public_150.json（テストデータ）

[
  {
    "task_id": "xxx",
    "task_name": "JSON to CSV",
    "output_type": "CSV",
    "query": "..."
  }
]

フォーマット抽出ロジック

generation フィールドから以下の優先順位でコンテンツを抽出:

1. ```(format) ... ``` コードフェンス内
2. 全文をそのままパース

対応フォーマット: JSON, YAML, TOML, XML, CSV

技術仕様

• フレームワーク: Gradio 5.x / 6.x
• 同梱データ: public_150.json（テストデータ、150タスク）
• トークン数: 文字数 ÷ 4 の簡易近似（日本語は過小評価の可能性あり）

ローカル実行

# 依存関係のインストール
pip install gradio pyyaml toml pandas

# アプリの起動
cd visualize_app
python app.py

アプリは http://127.0.0.1:7860 で起動します。

オプション

# 外部公開する場合（72時間有効な一時URL）
app.launch(share=True)

更新履歴

• v2.0: JS外部ファイル化、Query全文表示（折り返し対応）、A/B入れ替えボタン追加
• v1.5: フォーマット不正フィルター、ソート機能、複数フォーマット対応
• v1.0: 初版リリース

Author

• claude-opus-4.5
• Masahito Kumada