Color Heatmap で既存ビジュアルリグレッションを拡張する

TL;DR

• 既存SSIM差分に Heatmap を追加し“何が”変わったか分類
• ΔE領域メッシュを座標化→履歴で劣化傾向追跡
• CI失敗時は Heatmap PNG + CSV をアーティファクト保存
• 誤検知は閾値再調整でノイズ削減

1. 差分の質的分類

• 高ΔE且つ局所: エンコード副作用 / ガンマ不一致
• 低ΔE広域: 軽微な色空間変換差 or 再圧縮
• 輝度のみ変化: トーンマッピング / シャープ設定

2. CI 統合パイプライン

1. baseline 取得
2. pixelmatch で diff mask
3. mask を Heatmap API 送信 → PNG + CSV
4. CSV 集計し判定

// scripts/heatmap-run.ts (抜粋)
import fs from 'node:fs';
import pixelmatch from 'pixelmatch';
// a,b: RGBA Buffer, w,h セット済み
const diff = Buffer.alloc(w*h*4);
const mismatches = pixelmatch(a,b,diff,w,h,{threshold:0.1});
fs.writeFileSync('diff.png', diff);
// const res = await fetch('https://internal/heatmap',{method:'POST',body:diff});
// const { png, csv } = await res.json();

3. メトリクス蓄積

ΔE 面積比を週次集計し “静的資産の色揺れトレンド” を可視化。閾値近傍が連続する場合は閾値緩和でなく根本 (色空間変換 or 圧縮設定) を再調整。

4. 失敗軽減テクニック

• 広告/動的領域マスク
• 文字レンダリング差 (OS差異) は別ジョブ
• 小ΔEノイズ除去: 3x3 メディアン後 Heatmap 演算

4.5 関連ツール

• Color Heatmap
• Dither Compare
• PNG Re-Optimize

5. まとめ

“差分がある” から “差分の性質が〇〇” へ粒度を上げることで調査コストを劇的に削減。