文字が滲む問題の決定版：Chroma Subsamplingとアンチブラー設計（JPEG/WebP/AVIF）

// scripts/export-anti-blur.ts
// 依存: npm i -D sharp tsx
// 規約に合うファイル名/パスは 4:4:4 + やや高品質、それ以外は 4:2:0
import fs from "node:fs/promises";
import path from "node:path";
import sharp from "sharp";

const IN = process.env.IN ?? "input";
const OUT = process.env.OUT ?? "output";
const UI_HINT = /(\/ui\/|\/icons\/|\btext\b|\bchart\b|\bdiagram\b|_cap|_figure)/i;

async function main() {
  await fs.mkdir(OUT, { recursive: true });
  const list = (await fs.readdir(IN)).filter(f => /\.(png|jpe?g|webp|avif)$/i.test(f));

  for (const f of list) {
    const src = path.join(IN, f);
    const name = path.parse(f).name;
    const isUI = UI_HINT.test(src);

    const base = sharp(src).rotate().toColourspace("srgb");

    // AVIF
    await base
      .avif({
        quality: isUI ? 60 : 50,
        chromaSubsampling: isUI ? "4:4:4" : "4:2:0",
        effort: 4,
      })
      .toFile(path.join(OUT, name + ".avif"));

    // WebP（UIは nearLossless でエッジ保持）
    await base
      .webp({
        quality: isUI ? 85 : 80,
        nearLossless: isUI ? 60 : undefined,
      })
      .toFile(path.join(OUT, name + ".webp"));

    // JPEG（mozjpeg推奨）
    await base
      .jpeg({
        quality: isUI ? 86 : 78,
        chromaSubsampling: isUI ? "4:4:4" : "4:2:0",
        mozjpeg: true,
        progressive: true,
      })
      .toFile(path.join(OUT, name + ".jpg"));

    console.log("→", name, isUI ? "UI(4:4:4)" : "Photo(4:2:0)");
  }
}
main().catch(e => { console.error(e); process.exit(1); });

// scripts/detect-textlike.ts
// 目的: 「UI/文字の可能性が高い画像」を検出して4:4:4候補にする
// 方法: ラプラシアンでエッジ密度と方向性(縦横成分)を簡易評価（擬似。実運用はOpenCV等が堅牢）
import fs from "node:fs/promises";
import path from "node:path";
import sharp from "sharp";

const IN = process.env.IN ?? "input";

async function main() {
  const files = (await fs.readdir(IN)).filter(f => /\.(png|jpe?g|webp)$/i.test(f));
  for (const f of files) {
    const src = path.join(IN, f);
    const img = sharp(src).greyscale().normalize();
    const { width, height } = await img.metadata();
    if (!width || !height) continue;
    const small = await img.resize({ width: 256 }).raw().toBuffer();
    // 粗いヒューリスティック: 明暗の急峻な変化が多い＝テキスト/ラインっぽい
    let sum = 0;
    for (let i = 1; i < small.length; i++) sum += Math.abs(small[i] - small[i - 1]);
    const score = sum / small.length;
    if (score > 8) console.log("UI-likely:", f, "score=", score.toFixed(1));
  }
}
main().catch(console.error);