10.2 多分辨率资源分级

#!/usr/bin/env python3
# file: sim/ta10_tiers.py
# tier: S
# verify: /opt/homebrew/bin/python3 sim/ta10_tiers.py
"""多分辨率资源分级的字节账（S 层，卷二 10.2）。缩放千分比取宽高比的小者，选最小且不小于它的
档位，图集字节按档位比例缩放（地板除）后乘 bpp；对照「全档打包」与「只打设备群实际需要的档位」。
"""
import hashlib
import json
import os
import sys

ROOT = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
CFG = os.path.join(ROOT, "config/ta10_tiers.json")
OUT = os.path.join(ROOT, "out")


def scale_permille(screen, design):
    """设备缩放千分比：宽高各自与设计基准比，取小者。整数地板除。"""
    return min(screen[0] * 1000 // design[0], screen[1] * 1000 // design[1])


def pick_tier(tiers, scale):
    for t in tiers:
        if t["ratioPermille"] >= scale:
            return t
    return tiers[-1]


def atlas_bytes(base, ratio, bpp):
    """该档图集字节：宽高各按 ratio 缩放（地板除），再乘每像素字节。"""
    return (base[0] * ratio // 1000) * (base[1] * ratio // 1000) * bpp


def main():
    cfg = json.load(open(CFG, encoding="utf-8"))
    os.makedirs(OUT, exist_ok=True)
    base, bpp, tiers = cfg["baseAtlas"], cfg["bytesPerPixel"], cfg["tiers"]
    tb = {t["id"]: atlas_bytes(base, t["ratioPermille"], bpp) for t in tiers}
    lines, devices, used = [], [], set()
    for d in cfg["devices"]:
        s = scale_permille(d["screen"], cfg["designResolution"])
        t = pick_tier(tiers, s)
        used.add(t["id"])
        devices.append({"id": d["id"], "screen": d["screen"], "scalePermille": s, "tier": t["id"],
                        "tierRatioPermille": t["ratioPermille"],
                        "overshootPermille": (t["ratioPermille"] - s) * 1000 // t["ratioPermille"],
                        "tierBytes": tb[t["id"]]})
        lines.append(f"{d['id']}:{t['id']}:{s}")
    ship_all = sum(tb.values())
    ship_used = sum(tb[t] for t in used)
    rep = {"project": cfg["project"], "designResolution": cfg["designResolution"], "baseAtlas": base,
           "bytesPerPixel": bpp, "usedTiers": sorted(used), "devices": devices, "tiers": [
               {"id": t["id"], "ratioPermille": t["ratioPermille"], "bytes": tb[t["id"]]} for t in tiers],
           "shipAllBytes": ship_all, "shipUsedBytes": ship_used, "savedBytes": ship_all - ship_used,
           "digest": hashlib.sha256("\n".join(sorted(lines)).encode("utf-8")).hexdigest()[:16]}
    with open(os.path.join(OUT, "ta10_tiers.json"), "w", encoding="utf-8") as f:
        json.dump(rep, f, ensure_ascii=False, indent=2, sort_keys=True)
    for t in rep["tiers"]:
        print(f"  {t['id']:<6} ratio={t['ratioPermille']:<5} bytes={t['bytes']}")
    for d in devices:
        print(f"  {d['id']:<12} scale={d['scalePermille']:<5} tier={d['tier']:<6} "
              f"overshoot={d['overshootPermille']} bytes={d['tierBytes']}")
    print(f"usedTiers={rep['usedTiers']}")
    print(f"shipAll={ship_all} shipUsed={ship_used} saved={ship_all - ship_used}")
    print(f"digest={rep['digest']}")
    return 0


if __name__ == "__main__":
    sys.exit(main())

  t1x    ratio=1000  bytes=16777216
  t1_5x  ratio=1500  bytes=37748736
  t2x    ratio=2000  bytes=67108864
  t3x    ratio=3000  bytes=150994944
  phone_low    scale=562   tier=t1x    overshoot=438 bytes=16777216
  phone_hi     scale=750   tier=t1x    overshoot=250 bytes=16777216
  tablet       scale=1066  tier=t1_5x  overshoot=289 bytes=37748736
  desktop_4k   scale=2000  tier=t2x    overshoot=0 bytes=67108864
usedTiers=['t1_5x', 't1x', 't2x']
shipAll=272629760 shipUsed=121634816 saved=150994944
digest=037de4f6ab30ff81

// file: core/src/ta10/tiers.ts
// tier: P
// verify: node --test 'core/test/ta10_*.test.ts'
// 卷二 10.2 多分辨率资源分级的 TS 侧实现。与 sim/ta10_tiers.py 同一套规则：缩放千分比取宽高比
// 的较小者（整数地板除），选最小且不小于它的档位，图集字节按档位比例缩放（地板除）再乘 bpp。
// 只允许可擦除 TS 语法（禁 enum / namespace / 参数属性 / 装饰器）。
import { createHash } from "node:crypto";

export type Tier = { id: string; ratioPermille: number };
export type Device = { id: string; screen: number[] };

export function scalePermille(screen: number[], design: number[]): number {
  return Math.min(Math.floor((screen[0] * 1000) / design[0]), Math.floor((screen[1] * 1000) / design[1]));
}

export function pickTier(tiers: Tier[], scale: number): Tier {
  for (const t of tiers) if (t.ratioPermille >= scale) return t;
  return tiers[tiers.length - 1];
}

export function atlasBytes(base: number[], ratio: number, bpp: number): number {
  const w = Math.floor((base[0] * ratio) / 1000);
  const h = Math.floor((base[1] * ratio) / 1000);
  return w * h * bpp;
}

export function selectionLines(cfg: any): string[] {
  const tiers = cfg.tiers as Tier[];
  const lines: string[] = [];
  for (const d of cfg.devices as Device[]) {
    const s = scalePermille(d.screen, cfg.designResolution);
    lines.push(`${d.id}:${pickTier(tiers, s).id}:${s}`);
  }
  return lines.sort();
}

export function digest16(lines: string[]): string {
  return createHash("sha256").update(lines.join("\n"), "utf8").digest("hex").slice(0, 16);
}

✔ 分级：TS 复算的选档行与 Python 逐位一致
✔ 每台设备的缩放千分比 / 档位 / 过冲 / 字节与 Python 一致
✔ 档位字节与打包对照与 Python 逐位一致
ℹ tests 3
ℹ pass 3
ℹ fail 0

// file: web/build_ta10_tiers.mjs
// tier: W
// verify: node web/build_ta10_tiers.mjs
// 卷二 10.2 W 层：把 core/src/sp00/spec.ts + ta10/tiers.ts 擦除类型后内联进单文件 HTML。
// 页面画 4 条档位字节条（宽度按字节比例，整数），并列出台设备选中的档位。
import { stripTypeScriptTypes } from "node:module";
import { readFileSync, writeFileSync, mkdirSync } from "node:fs";
import { dirname, resolve } from "node:path";
import { fileURLToPath } from "node:url";
const ROOT = resolve(dirname(fileURLToPath(import.meta.url)), "..");
const spec = JSON.parse(readFileSync(resolve(ROOT, "config/visual_spec.json"), "utf8"));
const cfg = JSON.parse(readFileSync(resolve(ROOT, "config/ta10_tiers.json"), "utf8"));
const strip = (p) => stripTypeScriptTypes(readFileSync(resolve(ROOT, p), "utf8"), { mode: "strip" })
  .replace(/^import[^;]*;\s*$/gm, "").replace(/^export\s*\{[^}]*\};?\s*$/gm, "").replace(/^export\s+/gm, "");
const js = [strip("core/src/sp00/spec.ts"), strip("core/src/ta10/tiers.ts")].join("\n");
const html = `<!doctype html>
<html lang="zh-CN"><head><meta charset="utf-8"><title>prism 多分辨率分级 · ${cfg.project}</title>
<style>body{margin:0;padding:20px;background:#1f2933;color:#eceff1;font:14px/1.6 system-ui}
canvas{display:block;border:1px solid #3d4a57;background:#252f3b}table{border-collapse:collapse;font:12px/1.5 ui-monospace,monospace;margin-top:14px}th,td{text-align:left;padding:3px 10px;border-bottom:1px solid #2d3a47}td.n{text-align:right}.row{display:flex;gap:28px;flex-wrap:wrap;align-items:flex-start}</style></head><body>
<h1>多分辨率资源分级看板</h1>
<div style="color:#94a3b8;font-size:12px">档位字节条（宽度按字节比例）· 设备选档按「最小且不小于缩放千分比」</div>
<div class="row"><canvas id="bars" width="760" height="180"></canvas>
<table id="dev"><thead><tr><th>设备</th><th>屏幕</th><th class="n">scale‰</th><th>档位</th><th class="n">过冲‰</th><th class="n">字节</th></tr></thead><tbody></tbody></table>
</div>
<script type="module">
${js}
const SPEC = ${JSON.stringify(spec)};
const CFG = ${JSON.stringify(cfg)};
const COLORS = { t1x: [56, 189, 248], t1_5x: [34, 197, 94], t2x: [245, 158, 11], t3x: [239, 68, 68] };
const BAR_X = 10, ROW_H = 42, BAR_MAX = 700;
const tierBytes = Object.fromEntries(CFG.tiers.map((t) => [t.id, atlasBytes(CFG.baseAtlas, t.ratioPermille, CFG.bytesPerPixel)]));
const maxBytes = Math.max(...Object.values(tierBytes));
const ctx = document.getElementById("bars").getContext("2d");
ctx.fillStyle = "rgb(" + SPEC.tokens.surface.join(",") + ")"; ctx.fillRect(0, 0, 760, 180);
const bars = {};
CFG.tiers.forEach((t, i) => {
  const w = Math.floor((tierBytes[t.id] * BAR_MAX) / maxBytes);
  const y = 10 + i * ROW_H;
  ctx.fillStyle = "rgb(" + COLORS[t.id].join(",") + ")";
  ctx.fillRect(BAR_X, y, w, 30);
  bars[t.id] = { x: BAR_X, y, w, h: 30 };
});
const devices = [], usedTiers = new Set();
const tb = document.querySelector("#dev tbody");
for (const d of CFG.devices) {
  const sc = scalePermille(d.screen, CFG.designResolution);
  const t = pickTier(CFG.tiers, sc);
  usedTiers.add(t.id);
  const over = Math.floor(((t.ratioPermille - sc) * 1000) / t.ratioPermille);
  devices.push({ id: d.id, screen: d.screen, scalePermille: sc, tier: t.id, overshootPermille: over, tierBytes: tierBytes[t.id] });
  const tr = document.createElement("tr");
  tr.innerHTML = "<td>" + d.id + "</td><td>" + d.screen.join("x") + "</td><td class=\\"n\\">" + sc + "</td><td>" + t.id + "</td><td class=\\"n\\">" + over + "</td><td class=\\"n\\">" + tierBytes[t.id] + "</td>";
  tb.append(tr);
}
const shipAll = Object.values(tierBytes).reduce((a, b) => a + b, 0);
const shipUsed = [...usedTiers].reduce((a, id) => a + tierBytes[id], 0);
globalThis.__prism = { tierBytes, bars, colors: COLORS, devices, usedTiers: [...usedTiers].sort(), shipAll, shipUsed, saved: shipAll - shipUsed };
document.title = "prism ta10 tiers ready";
</script></body></html>`;
const out = resolve(ROOT, "web/dist/ta10_tiers.html");
mkdirSync(dirname(out), { recursive: true });
writeFileSync(out, html, "utf8");
console.log(`built web/dist/ta10_tiers.html (${Buffer.byteLength(html)} bytes)`);

// file: web/verify_ta10_tiers.mjs
// tier: W
// verify: NODE_PATH=/opt/homebrew/lib/node_modules node web/verify_ta10_tiers.mjs
// 卷二 10.2 W 层断言：无头 Chromium 打开分级看板，采样 globalThis.__prism 与 Python 落盘的
// out/ta10_tiers.json 对照；再按像素验证 4 条档位条的颜色。
import { createRequire } from "node:module";
import { createHash } from "node:crypto";
import { readFileSync, mkdirSync, statSync } from "node:fs";
import { dirname, resolve } from "node:path";
import { fileURLToPath, pathToFileURL } from "node:url";
const require = createRequire(import.meta.url);
const { chromium } = require("playwright");
const ROOT = resolve(dirname(fileURLToPath(import.meta.url)), "..");
const py = JSON.parse(readFileSync(resolve(ROOT, "out/ta10_tiers.json"), "utf8"));
const pageUrl = pathToFileURL(resolve(ROOT, "web/dist/ta10_tiers.html")).href;
mkdirSync(resolve(ROOT, "out/shots"), { recursive: true });
let pass = 0, fail = 0;
const check = (n, ok, extra = "") => { ok ? (pass += 1) : (fail += 1); console.log(`${ok ? "pass" : "fail"} ${n}${extra ? " " + extra : ""}`); };

const browser = await chromium.launch({ headless: true });
const warm = await browser.newPage();          // 冷启动预热：首个 page 读 canvas 恒空白
await warm.goto(pageUrl);
await warm.close();
const page = await browser.newPage({ viewport: { width: 1100, height: 700 } });
const errors = [];
page.on("pageerror", (e) => errors.push(String(e)));
await page.goto(pageUrl);
await page.waitForFunction(() => globalThis.__prism !== undefined, null, { timeout: 15000 });
const s = await page.evaluate(() => globalThis.__prism);
check("无 pageerror", errors.length === 0, errors.join("|"));
const lines = s.devices.map((d) => `${d.id}:${d.tier}:${d.scalePermille}`).sort();
const digest = createHash("sha256").update(lines.join("\n"), "utf8").digest("hex").slice(0, 16);
check("选档 digest 与 Python 逐位一致", digest === py.digest, `${digest}`);
check("每台设备的缩放/档位/过冲/字节与 Python 逐位一致",
  JSON.stringify(s.devices.map((d) => [d.id, d.scalePermille, d.tier, d.overshootPermille, d.tierBytes])) ===
  JSON.stringify(py.devices.map((d) => [d.id, d.scalePermille, d.tier, d.overshootPermille, d.tierBytes])));
check("档位字节与使用档位与 Python 逐位一致", JSON.stringify(s.tierBytes) === JSON.stringify(Object.fromEntries(py.tiers.map((t) => [t.id, t.bytes]))) && JSON.stringify(s.usedTiers) === JSON.stringify(py.usedTiers));
check("打包对照与 Python 逐位一致", s.shipAll === py.shipAllBytes && s.shipUsed === py.shipUsedBytes && s.saved === py.savedBytes, `${s.shipAll}/${s.shipUsed}/${s.saved}`);
const px = await page.evaluate(() => { const ctx = document.getElementById("bars").getContext("2d"); const out = {};
  for (const [id, b] of Object.entries(globalThis.__prism.bars)) { const d = ctx.getImageData(b.x + (b.w >> 1), b.y + 15, 1, 1).data; out[id] = [d[0], d[1], d[2]]; }
  return { out, colors: globalThis.__prism.colors }; });
let barOk = true;
for (const id of Object.keys(s.tierBytes)) if (JSON.stringify(px.out[id]) !== JSON.stringify(px.colors[id])) barOk = false;
check("4 条档位条中心色 = 各自调色板色", barOk, JSON.stringify(px.out));
const drawn = await page.evaluate(() => { const cv = document.getElementById("bars");
  const d = cv.getContext("2d").getImageData(0, 0, cv.width, cv.height).data; let n = 0;
  for (let i = 3; i < d.length; i += 4) if (d[i] > 0) n += 1; return n; });
check("canvas 已绘制", drawn >= 1, `${drawn} px`);
const shot = resolve(ROOT, "out/shots/ta10_tiers.png");
await page.screenshot({ path: shot, fullPage: true });
await browser.close();
check("截图非空", statSync(shot).size > 0, `${statSync(shot).size} bytes`);
console.log(`ℹ pass ${pass}`);
console.log(`ℹ fail ${fail}`);
process.exit(fail === 0 ? 0 : 1);

built web/dist/ta10_tiers.html (9308 bytes)
pass 无 pageerror
pass 选档 digest 与 Python 逐位一致 037de4f6ab30ff81
pass 每台设备的缩放/档位/过冲/字节与 Python 逐位一致
pass 档位字节与使用档位与 Python 逐位一致
pass 打包对照与 Python 逐位一致 272629760/121634816/150994944
pass 4 条档位条中心色 = 各自调色板色 {"t1x":[56,189,248],"t1_5x":[34,197,94],"t2x":[245,158,11],"t3x":[239,68,68]}
pass canvas 已绘制 136800 px
pass 截图非空 40306 bytes
ℹ pass 8
ℹ fail 0