feat: 形象圖改為「依人格資料重繪」，並驗證 Wiki 同步
1. 不再直接使用網路上找到的圖片
舊版把裁下來的官方美術當圖示（photo 樣式）。現在改成：
找圖 → `icon headshot` 裁出**大頭照當底稿** → AI 用 Read 親眼看過 →
讀出髮型/瀏海/眼型/表情/髮飾/領口等特徵 → **由本工具重新繪製**。
* 底稿寫在 <人格>/.sync/headshot.png，**不是圖示、不同步、不發佈**。
* 產出的 SVG 不得有 <image>／base64／外連（selftest 會擋）。
* 移除 photo 樣式與 photoSvg；config 裡殘留的舊樣式會被忽略而非退回徽章。
2. 重繪引擎：五官與造型可參數化
新增 --features：hairstyle(5) / length(4) / fringe(4) / eyes(4) /
expression(4) / accessory(5) / side / collar(4) / ahoge。
渲染器新增 polygon 圖元（呆毛、緞帶、V 領、銳利眼角），SVG 與自寫柵格器
仍共用同一份圖形清單，兩邊必然一致。
另外調了臉部比例：眉毛用「髮色偏膚色」避免深髮角色眉毛與瀏海連成黑帶、
加了鼻子（否則嘴會被看成鼻子）、眼與嘴的縱向配置重排。
3. Wiki 形象圖必須同步（並且會被驗證）
新增 `sync verify`（不一致以非零結束）與 verifyIconInWiki()；
`icon generate` 推完 Wiki 會自動回頭確認 icon.svg + icon.png 真的在遠端
且與本機一致。
修掉一個會讓驗證永遠失敗的 bug：Wiki 首頁內嵌了 `最後同步 ${now}`，
每次產生都不同 → 永遠 dirty、每次 push 都多一個 commit。改用圖示的
generated_at。porcelain 解析也從固定位移改為正規式。
已重繪兩個真實人格（皆為 portrait 樣式，並通過 Wiki 同步驗證）：
ASUNA-01 底稿=《Unanswered//butterfly》(2026) 主視覺左側；金蜜色極長直髮、
中分瀏海、呆毛、紅褐杏眼、沉靜神情、紅上衣 V 領
YUI-01 底稿=AniList 官方角色圖；藍黑極長直髮、齊瀏海、圓大棕眼、燦爛笑容，
髮飾與配色採現行 Unital Ring 導航妖精造型（淡粉洋裝、藍花）
selftest 161 項全綠（新增第 ⑰ 節：特徵解析、換髮型/眼型/表情會畫出不同的圖、
polygon 兩邊一致、舊樣式不污染、SVG 無內嵌影像、Wiki 首頁無時間戳）。
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Claude Opus 5
+229
-96
@@ -184,7 +184,9 @@ export const paletteToString = (p) =>
|
||||
|
||||
export const STYLES = ["portrait", "badge"];
|
||||
|
||||
export function iconSpec(slug, { code = null, identity = null, palette = null, style = null } = {}) {
|
||||
export function iconSpec(slug, {
|
||||
code = null, identity = null, palette = null, style = null, features = null,
|
||||
} = {}) {
|
||||
const ident = identity || pl.identityFields(slug);
|
||||
const config = pl.loadConfig(slug);
|
||||
const theCode = code || config.code || slug;
|
||||
@@ -244,9 +246,11 @@ export function iconSpec(slug, { code = null, identity = null, palette = null, s
|
||||
dot: dot || ink,
|
||||
ringAlpha,
|
||||
dotAlpha,
|
||||
// 有調色盤（＝看過參考照片）就畫人物形象；沒有的話只能畫徽章
|
||||
style: style || config.icon?.style || (pal ? "portrait" : "badge"),
|
||||
// 有調色盤（＝看過大頭照）就重繪人物形象；沒有的話只能畫徽章
|
||||
// 只認得 STYLES 裡的樣式：config 可能殘留舊版本寫進去的值（例如已移除的 photo）
|
||||
style: [style, config.icon?.style].find((v) => STYLES.includes(v)) || (pal ? "portrait" : "badge"),
|
||||
palette: pal,
|
||||
features: features || parseFeatures(config.icon?.features || null),
|
||||
source: pal ? config.icon?.source || null : null,
|
||||
pattern,
|
||||
seed: h.subarray(0, 8).toString("hex"),
|
||||
@@ -291,6 +295,53 @@ const tint = (c, t) => mix(c, [255, 255, 255], t);
|
||||
const rect = (x, y, w, h, fill, alpha = 1) => ({ type: "rect", x, y, w, h, fill, alpha });
|
||||
const ellipse = (cx, cy, rx, ry, fill, alpha = 1) => ({ type: "ellipse", cx, cy, rx, ry, fill, alpha });
|
||||
const circle = (cx, cy, r, fill, alpha = 1) => ellipse(cx, cy, r, r, fill, alpha);
|
||||
/** 多邊形：畫髮尾、緞帶、V 領、呆毛這些橢圓做不出來的形狀。 */
|
||||
const poly = (points, fill, alpha = 1) => ({ type: "poly", points, fill, alpha });
|
||||
|
||||
// --------------------------------------------------------------------------- //
|
||||
// 五官與造型的特徵：這些決定「重新繪製」出來的人長什麼樣
|
||||
// --------------------------------------------------------------------------- //
|
||||
|
||||
export const FEATURE_SPEC = {
|
||||
hairstyle: ["straight", "twintails", "ponytail", "bob", "braid"],
|
||||
length: ["short", "medium", "long", "very-long"],
|
||||
fringe: ["blunt", "parted", "swept", "curtain"],
|
||||
eyes: ["round", "almond", "sharp", "droopy"],
|
||||
expression: ["gentle", "bright", "calm", "neutral"],
|
||||
accessory: ["none", "ribbon", "clip", "flower", "hairband"],
|
||||
side: ["left", "right"],
|
||||
collar: ["round", "v", "high", "sailor"],
|
||||
ahoge: ["no", "yes"],
|
||||
};
|
||||
|
||||
export const DEFAULT_FEATURES = {
|
||||
hairstyle: "straight",
|
||||
length: "long",
|
||||
fringe: "parted",
|
||||
eyes: "almond",
|
||||
expression: "gentle",
|
||||
accessory: "none",
|
||||
side: "right",
|
||||
collar: "round",
|
||||
ahoge: "no",
|
||||
};
|
||||
|
||||
/** `hairstyle=twintails,fringe=blunt,...` → 正規化過的特徵物件（不認得的值一律回退預設）。 */
|
||||
export function parseFeatures(raw) {
|
||||
const out = { ...DEFAULT_FEATURES };
|
||||
if (!raw) return out;
|
||||
for (const chunk of String(raw).split(",")) {
|
||||
const idx = chunk.indexOf("=");
|
||||
if (idx < 0) continue;
|
||||
const key = chunk.slice(0, idx).trim().toLowerCase();
|
||||
const value = chunk.slice(idx + 1).trim().toLowerCase();
|
||||
if (FEATURE_SPEC[key] && FEATURE_SPEC[key].includes(value)) out[key] = value;
|
||||
}
|
||||
return out;
|
||||
}
|
||||
|
||||
export const featuresToString = (f) =>
|
||||
Object.keys(DEFAULT_FEATURES).map((k) => `${k}=${f[k]}`).join(",");
|
||||
|
||||
/**
|
||||
* 人物形象（有臉）。全部用橢圓與矩形拼出來，所以 SVG 與自寫柵格器畫得出一模一樣的結果。
|
||||
@@ -307,42 +358,148 @@ function portraitShapes(spec) {
|
||||
const skinShade = shade(skin, 0.12);
|
||||
const mouth = shade(cloth, 0.25);
|
||||
|
||||
return [
|
||||
// 肩膀與衣服（露出一截，看得出服裝主色）
|
||||
ellipse(0.5, 1.18, 0.47, 0.36, cloth),
|
||||
ellipse(0.5, 1.14, 0.175, 0.22, cloth2), // 領口／胸前配色
|
||||
// 脖子
|
||||
rect(0.442, 0.64, 0.116, 0.14, skinShade),
|
||||
// 後髮（長髮往下鋪到兩側）
|
||||
ellipse(0.5, 0.50, 0.315, 0.395, hairDark),
|
||||
ellipse(0.235, 0.78, 0.080, 0.27, hairDark),
|
||||
ellipse(0.765, 0.78, 0.080, 0.27, hairDark),
|
||||
// 臉
|
||||
ellipse(0.5, 0.505, 0.212, 0.248, skin),
|
||||
// 瀏海：中央一大片 + 兩側鬢髮，蓋住額頭
|
||||
ellipse(0.5, 0.335, 0.238, 0.158, hair),
|
||||
ellipse(0.312, 0.435, 0.072, 0.155, hair),
|
||||
ellipse(0.688, 0.435, 0.072, 0.155, hair),
|
||||
// 眉毛
|
||||
rect(0.362, 0.452, 0.095, 0.015, hairDark),
|
||||
rect(0.543, 0.452, 0.095, 0.015, hairDark),
|
||||
// 眼睛：眼白 → 虹膜 → 瞳孔 → 高光
|
||||
ellipse(0.415, 0.538, 0.060, 0.073, [252, 252, 255]),
|
||||
ellipse(0.585, 0.538, 0.060, 0.073, [252, 252, 255]),
|
||||
ellipse(0.415, 0.543, 0.046, 0.059, eye),
|
||||
ellipse(0.585, 0.543, 0.046, 0.059, eye),
|
||||
ellipse(0.415, 0.549, 0.021, 0.030, shade(eye, 0.7)),
|
||||
ellipse(0.585, 0.549, 0.021, 0.030, shade(eye, 0.7)),
|
||||
circle(0.399, 0.520, 0.015, [255, 255, 255]),
|
||||
circle(0.569, 0.520, 0.015, [255, 255, 255]),
|
||||
// 腮紅與嘴
|
||||
ellipse(0.330, 0.598, 0.048, 0.025, cloth, 0.28),
|
||||
ellipse(0.670, 0.598, 0.048, 0.025, cloth, 0.28),
|
||||
ellipse(0.5, 0.626, 0.026, 0.015, mouth),
|
||||
// 側邊髮飾（用第二配色，讓不同角色更好分辨）
|
||||
ellipse(0.762, 0.345, 0.056, 0.038, cloth2),
|
||||
ellipse(0.800, 0.375, 0.030, 0.052, cloth2),
|
||||
];
|
||||
const f = spec.features || DEFAULT_FEATURES;
|
||||
const out = [];
|
||||
const mirror = f.side === "left" ? -1 : 1;
|
||||
const sideX = (base) => 0.5 + (base - 0.5) * mirror;
|
||||
|
||||
// ── 頭髮長度：側髮鋪到哪裡
|
||||
const bottom = { short: 0.66, medium: 0.78, long: 0.90, "very-long": 1.02 }[f.length] || 0.90;
|
||||
const sideCy = (0.46 + bottom) / 2;
|
||||
const sideRy = (bottom - 0.46) / 2;
|
||||
|
||||
// ── 肩膀與衣服
|
||||
out.push(ellipse(0.5, 1.18, 0.47, 0.36, cloth));
|
||||
if (f.collar === "round") out.push(ellipse(0.5, 1.14, 0.175, 0.22, cloth2));
|
||||
else if (f.collar === "high") out.push(rect(0.30, 0.90, 0.40, 0.10, cloth2));
|
||||
else if (f.collar === "sailor") {
|
||||
out.push(poly([[0.30, 0.92], [0.50, 1.06], [0.70, 0.92], [0.70, 1.10], [0.30, 1.10]], cloth2));
|
||||
} else if (f.collar === "v") {
|
||||
out.push(poly([[0.428, 0.900], [0.572, 0.900], [0.500, 1.030]], skinShade));
|
||||
}
|
||||
// 脖子
|
||||
out.push(rect(0.442, 0.64, 0.116, 0.15, skinShade));
|
||||
|
||||
// ── 後髮
|
||||
out.push(ellipse(0.5, 0.50, 0.315, 0.395, hairDark));
|
||||
if (f.hairstyle === "twintails") {
|
||||
out.push(ellipse(sideX(0.185), sideCy + 0.03, 0.085, sideRy, hairDark));
|
||||
out.push(ellipse(sideX(0.815), sideCy + 0.03, 0.085, sideRy, hairDark));
|
||||
out.push(ellipse(sideX(0.255), 0.415, 0.040, 0.030, cloth2)); // 髮束
|
||||
out.push(ellipse(sideX(0.745), 0.415, 0.040, 0.030, cloth2));
|
||||
} else if (f.hairstyle === "ponytail") {
|
||||
out.push(ellipse(sideX(0.815), sideCy, 0.075, sideRy * 1.05, hairDark));
|
||||
out.push(ellipse(sideX(0.735), 0.40, 0.042, 0.032, cloth2));
|
||||
out.push(ellipse(0.245, 0.62, 0.062, 0.14, hairDark));
|
||||
} else if (f.hairstyle === "bob") {
|
||||
out.push(ellipse(0.215, 0.60, 0.090, 0.175, hairDark));
|
||||
out.push(ellipse(0.785, 0.60, 0.090, 0.175, hairDark));
|
||||
} else if (f.hairstyle === "braid") {
|
||||
out.push(ellipse(0.235, sideCy, 0.072, sideRy, hairDark));
|
||||
out.push(ellipse(0.765, sideCy, 0.072, sideRy, hairDark));
|
||||
for (let i = 0; i < 3; i += 1) {
|
||||
out.push(ellipse(sideX(0.775), 0.60 + i * 0.11, 0.055, 0.048, shade(hair, 0.18)));
|
||||
}
|
||||
} else {
|
||||
out.push(ellipse(0.235, sideCy, 0.078, sideRy, hairDark));
|
||||
out.push(ellipse(0.765, sideCy, 0.078, sideRy, hairDark));
|
||||
}
|
||||
// 呆毛
|
||||
if (f.ahoge === "yes") out.push(poly([[0.482, 0.180], [0.548, 0.070], [0.540, 0.190]], hair));
|
||||
|
||||
// ── 臉
|
||||
out.push(ellipse(0.5, 0.500, 0.226, 0.256, skin));
|
||||
|
||||
// ── 瀏海
|
||||
if (f.fringe === "blunt") {
|
||||
out.push(ellipse(0.5, 0.300, 0.248, 0.150, hair));
|
||||
out.push(rect(0.252, 0.300, 0.496, 0.088, hair));
|
||||
} else if (f.fringe === "swept") {
|
||||
out.push(ellipse(sideX(0.560), 0.320, 0.235, 0.160, hair));
|
||||
out.push(poly([[sideX(0.30), 0.30], [sideX(0.78), 0.30], [sideX(0.30), 0.47]], hair));
|
||||
} else if (f.fringe === "curtain") {
|
||||
out.push(ellipse(0.5, 0.290, 0.235, 0.140, hair));
|
||||
out.push(ellipse(0.360, 0.400, 0.090, 0.155, hair));
|
||||
out.push(ellipse(0.640, 0.400, 0.090, 0.155, hair));
|
||||
} else {
|
||||
out.push(ellipse(0.5, 0.320, 0.244, 0.145, hair));
|
||||
out.push(ellipse(0.318, 0.410, 0.068, 0.140, hair));
|
||||
out.push(ellipse(0.682, 0.410, 0.068, 0.140, hair));
|
||||
}
|
||||
// 鬢髮（貼著臉頰的兩束）
|
||||
out.push(ellipse(0.268, 0.545, 0.038, 0.150, hair));
|
||||
out.push(ellipse(0.732, 0.545, 0.038, 0.150, hair));
|
||||
|
||||
// ── 眉毛（表情會影響傾斜）
|
||||
const browY = f.expression === "bright" ? 0.430 : 0.436;
|
||||
const brow = mix(hairDark, skin, 0.28); // 深髮角色的眉毛要和瀏海分得開
|
||||
const browTilt = { gentle: 0.006, bright: 0.010, calm: 0, neutral: 0 }[f.expression] ?? 0;
|
||||
out.push(poly([[0.372, browY + browTilt], [0.462, browY], [0.462, browY + 0.021],
|
||||
[0.372, browY + browTilt + 0.021]], brow));
|
||||
out.push(poly([[0.538, browY], [0.628, browY + browTilt], [0.628, browY + browTilt + 0.021],
|
||||
[0.538, browY + 0.021]], brow));
|
||||
|
||||
// ── 眼睛
|
||||
const eyeGeo = {
|
||||
round: { rx: 0.058, ry: 0.070 },
|
||||
almond: { rx: 0.063, ry: 0.060 },
|
||||
sharp: { rx: 0.066, ry: 0.049 },
|
||||
droopy: { rx: 0.060, ry: 0.065 },
|
||||
}[f.eyes] || { rx: 0.063, ry: 0.064 };
|
||||
const eyeY = f.eyes === "droopy" ? 0.558 : 0.552;
|
||||
for (const [cx, hl] of [[0.415, 0.399], [0.585, 0.569]]) {
|
||||
out.push(ellipse(cx, eyeY, eyeGeo.rx, eyeGeo.ry, [252, 252, 255]));
|
||||
out.push(ellipse(cx, eyeY + 0.005, eyeGeo.rx * 0.76, eyeGeo.ry * 0.80, eye));
|
||||
out.push(ellipse(cx, eyeY + 0.011, eyeGeo.rx * 0.34, eyeGeo.ry * 0.42, shade(eye, 0.7)));
|
||||
out.push(circle(hl, eyeY - 0.018, 0.015, [255, 255, 255]));
|
||||
// 上眼線：眼型的關鍵
|
||||
out.push(rect(cx - eyeGeo.rx, eyeY - eyeGeo.ry, eyeGeo.rx * 2, 0.014, hairDark));
|
||||
if (f.eyes === "sharp") {
|
||||
out.push(poly([[cx + eyeGeo.rx * 0.6, eyeY - eyeGeo.ry],
|
||||
[cx + eyeGeo.rx * 1.45, eyeY - eyeGeo.ry - 0.022],
|
||||
[cx + eyeGeo.rx * 1.05, eyeY - eyeGeo.ry * 0.35]], hairDark));
|
||||
}
|
||||
}
|
||||
|
||||
// ── 鼻子（很小一點，但少了它嘴巴會被看成鼻子）
|
||||
out.push(ellipse(0.5, 0.638, 0.010, 0.007, shade(skin, 0.22)));
|
||||
|
||||
// ── 腮紅與嘴（表情）
|
||||
if (f.expression !== "calm") {
|
||||
out.push(ellipse(0.318, 0.646, 0.042, 0.019, cloth, f.expression === "bright" ? 0.28 : 0.20));
|
||||
out.push(ellipse(0.682, 0.646, 0.042, 0.019, cloth, f.expression === "bright" ? 0.28 : 0.20));
|
||||
}
|
||||
if (f.expression === "bright") {
|
||||
out.push(ellipse(0.5, 0.690, 0.046, 0.022, mouth));
|
||||
out.push(rect(0.454, 0.676, 0.092, 0.009, shade(mouth, 0.35)));
|
||||
out.push(ellipse(0.5, 0.683, 0.034, 0.008, tint(mouth, 0.6)));
|
||||
} else if (f.expression === "calm" || f.expression === "neutral") {
|
||||
out.push(rect(0.480, 0.686, 0.040, 0.009, mouth));
|
||||
} else {
|
||||
out.push(ellipse(0.5, 0.688, 0.024, 0.013, mouth));
|
||||
}
|
||||
|
||||
// ── 髮飾
|
||||
const ax = sideX(0.775);
|
||||
if (f.accessory === "ribbon") {
|
||||
out.push(poly([[ax, 0.330], [ax + 0.085 * mirror, 0.288], [ax + 0.085 * mirror, 0.376]], cloth2));
|
||||
out.push(poly([[ax, 0.330], [ax - 0.075 * mirror, 0.292], [ax - 0.075 * mirror, 0.372]], cloth2));
|
||||
out.push(circle(ax, 0.332, 0.026, shade(cloth2, 0.18)));
|
||||
} else if (f.accessory === "clip") {
|
||||
out.push(rect(ax - 0.055, 0.318, 0.110, 0.026, cloth2));
|
||||
out.push(rect(ax - 0.055, 0.352, 0.075, 0.022, tint(cloth2, 0.25)));
|
||||
} else if (f.accessory === "flower") {
|
||||
for (let i = 0; i < 5; i += 1) {
|
||||
const a = (i / 5) * Math.PI * 2;
|
||||
out.push(circle(ax + Math.cos(a) * 0.042, 0.335 + Math.sin(a) * 0.042, 0.030, cloth2));
|
||||
}
|
||||
out.push(circle(ax, 0.335, 0.024, tint(cloth2, 0.45)));
|
||||
} else if (f.accessory === "hairband") {
|
||||
out.push(ellipse(0.5, 0.268, 0.246, 0.052, cloth2));
|
||||
out.push(ellipse(0.5, 0.300, 0.238, 0.052, hair));
|
||||
}
|
||||
|
||||
return out;
|
||||
}
|
||||
|
||||
/** 徽章樣式（沒有參考照片時）：點陣紋 + 編號字母。 */
|
||||
@@ -399,12 +556,16 @@ export function renderSvg(spec, size = DEFAULT_SIZE) {
|
||||
" </defs>",
|
||||
` <rect width="${S}" height="${S}" rx="${u(GEO.radius)}" ry="${u(GEO.radius)}" fill="url(#bg)"/>`,
|
||||
` <g clip-path="url(#badge)">`,
|
||||
...iconShapes(spec).map((sh) =>
|
||||
sh.type === "rect"
|
||||
? ` <rect x="${u(sh.x)}" y="${u(sh.y)}" width="${u(sh.w)}" height="${u(sh.h)}"` +
|
||||
` fill="${hex(sh.fill)}"${sh.alpha < 1 ? ` opacity="${sh.alpha}"` : ""}/>`
|
||||
: ` <ellipse cx="${u(sh.cx)}" cy="${u(sh.cy)}" rx="${u(sh.rx)}" ry="${u(sh.ry)}"` +
|
||||
` fill="${hex(sh.fill)}"${sh.alpha < 1 ? ` opacity="${sh.alpha}"` : ""}/>`),
|
||||
...iconShapes(spec).map((sh) => {
|
||||
const paint = ` fill="${hex(sh.fill)}"${sh.alpha < 1 ? ` opacity="${sh.alpha}"` : ""}/>`;
|
||||
if (sh.type === "rect") {
|
||||
return ` <rect x="${u(sh.x)}" y="${u(sh.y)}" width="${u(sh.w)}" height="${u(sh.h)}"${paint}`;
|
||||
}
|
||||
if (sh.type === "poly") {
|
||||
return ` <polygon points="${sh.points.map(([x, y]) => `${u(x)},${u(y)}`).join(" ")}"${paint}`;
|
||||
}
|
||||
return ` <ellipse cx="${u(sh.cx)}" cy="${u(sh.cy)}" rx="${u(sh.rx)}" ry="${u(sh.ry)}"${paint}`;
|
||||
}),
|
||||
" </g>",
|
||||
` <rect x="${u(0.012)}" y="${u(0.012)}" width="${u(0.976)}" height="${u(0.976)}"`,
|
||||
` rx="${u(GEO.radius - 0.012)}" ry="${u(GEO.radius - 0.012)}"`,
|
||||
@@ -468,6 +629,17 @@ export function encodePng(rgba, width, height) {
|
||||
]);
|
||||
}
|
||||
|
||||
/** 點是否在多邊形內（crossing number；與 SVG 的 nonzero 對簡單多邊形結果一致）。 */
|
||||
function pointInPoly(x, y, pts) {
|
||||
let inside = false;
|
||||
for (let i = 0, j = pts.length - 1; i < pts.length; j = i, i += 1) {
|
||||
const [xi, yi] = pts[i];
|
||||
const [xj, yj] = pts[j];
|
||||
if ((yi > y) !== (yj > y) && x < ((xj - xi) * (y - yi)) / (yj - yi) + xi) inside = !inside;
|
||||
}
|
||||
return inside;
|
||||
}
|
||||
|
||||
/** 內縮 inset 之後的圓角矩形內外判定（用來畫出與 SVG 描邊相同的環帶）。 */
|
||||
function insideInset(x, y, inset) {
|
||||
const span = 1 - 2 * inset;
|
||||
@@ -511,6 +683,8 @@ export function renderPng(spec, size = DEFAULT_SIZE, { supersample = 3 } = {}) {
|
||||
let hit;
|
||||
if (sh.type === "rect") {
|
||||
hit = u >= sh.x && u < sh.x + sh.w && v >= sh.y && v < sh.y + sh.h;
|
||||
} else if (sh.type === "poly") {
|
||||
hit = pointInPoly(u, v, sh.points);
|
||||
} else {
|
||||
const dx = (u - sh.cx) / sh.rx;
|
||||
const dy = (v - sh.cy) / sh.ry;
|
||||
@@ -576,28 +750,11 @@ export function renderPng(spec, size = DEFAULT_SIZE, { supersample = 3 } = {}) {
|
||||
* 回傳裡的 `photo` 說明走了哪條路、缺什麼工具。
|
||||
*/
|
||||
export function generateIcon(slug, {
|
||||
size = DEFAULT_SIZE, code = null, palette = null, source = null, style = null,
|
||||
photo = null, pick = null, face = null,
|
||||
size = DEFAULT_SIZE, code = null, palette = null, source = null, style = null, features = null,
|
||||
} = {}) {
|
||||
const spec = iconSpec(slug, { code, palette, style });
|
||||
let svg;
|
||||
let png;
|
||||
let photoResult = null;
|
||||
if (photo) {
|
||||
const tmp = path.join(pl.personaDir(slug), ".sync", "portrait.tmp.png");
|
||||
fs.mkdirSync(path.dirname(tmp), { recursive: true });
|
||||
photoResult = renderPhotoPng(photo, tmp, size, { pick, face });
|
||||
if (photoResult.ok) {
|
||||
png = fs.readFileSync(tmp);
|
||||
svg = photoSvg(spec, png, size);
|
||||
spec.style = "photo";
|
||||
}
|
||||
fs.rmSync(tmp, { force: true });
|
||||
}
|
||||
if (!png) {
|
||||
svg = renderSvg(spec, size);
|
||||
png = renderPng(spec, size);
|
||||
}
|
||||
const spec = iconSpec(slug, { code, palette, style, features });
|
||||
const svg = renderSvg(spec, size);
|
||||
const png = renderPng(spec, size);
|
||||
pl.writeText(iconSvgPath(slug), svg);
|
||||
fs.mkdirSync(path.dirname(iconPngPath(slug)), { recursive: true });
|
||||
fs.writeFileSync(iconPngPath(slug), png);
|
||||
@@ -610,11 +767,8 @@ export function generateIcon(slug, {
|
||||
size,
|
||||
generated_at: pl.nowIso(),
|
||||
palette: spec.palette ? paletteToString(spec.palette) : null,
|
||||
features: featuresToString(spec.features),
|
||||
source: source || spec.source || null,
|
||||
crop: photoResult?.ok
|
||||
? { method: photoResult.info.method, face: photoResult.info.face,
|
||||
box: photoResult.info.box, faces_found: photoResult.info.faces_found }
|
||||
: null,
|
||||
};
|
||||
pl.writeJson(pl.configPath(slug), config);
|
||||
return {
|
||||
@@ -622,7 +776,6 @@ export function generateIcon(slug, {
|
||||
svg: iconSvgPath(slug),
|
||||
png: iconPngPath(slug),
|
||||
size,
|
||||
photo: photoResult,
|
||||
bytes: { svg: Buffer.byteLength(svg, "utf8"), png: png.length },
|
||||
};
|
||||
}
|
||||
@@ -757,8 +910,11 @@ export function listFaces(imagePath) {
|
||||
}
|
||||
}
|
||||
|
||||
/** 用照片裁臉產生 icon.png（成功回傳結果，工具不足回 ok:false 與缺什麼）。 */
|
||||
export function renderPhotoPng(imagePath, outPath, size = DEFAULT_SIZE, { pick = null, face = null } = {}) {
|
||||
/**
|
||||
* 從參考圖裁出**大頭照**。這張是給 AI 看的**參考**，不是圖示本身——
|
||||
* 圖示一律由 renderSvg/renderPng 依人格資料重新繪製。
|
||||
*/
|
||||
export function cropHeadshot(imagePath, outPath, size = DEFAULT_SIZE, { pick = null, face = null } = {}) {
|
||||
const report = toolReport();
|
||||
if (!report.ready) return { ok: false, report };
|
||||
const args = [PORTRAIT_PY, "--input", imagePath, "--output", outPath, "--size", String(size),
|
||||
@@ -780,26 +936,3 @@ export function renderPhotoPng(imagePath, outPath, size = DEFAULT_SIZE, { pick =
|
||||
return { ok: true, report, info };
|
||||
}
|
||||
|
||||
/** 把裁好的 PNG 包成自成一體的 SVG（含圓角與瞳色外框）。 */
|
||||
export function photoSvg(spec, pngBuffer, size = DEFAULT_SIZE) {
|
||||
const S = size;
|
||||
const u = (v) => Math.round(v * S * 1000) / 1000;
|
||||
return [
|
||||
`<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"`,
|
||||
` width="${S}" height="${S}" viewBox="0 0 ${S} ${S}" role="img"`,
|
||||
` aria-label="人格 ${spec.code}${spec.name ? `（${spec.name}）` : ""}的形象圖">`,
|
||||
` <title>${spec.code}${spec.name ? ` ${spec.name}` : ""}</title>`,
|
||||
" <defs>",
|
||||
` <clipPath id="badge"><rect width="${S}" height="${S}" rx="${u(GEO.radius)}" ry="${u(GEO.radius)}"/></clipPath>`,
|
||||
" </defs>",
|
||||
` <g clip-path="url(#badge)">`,
|
||||
` <image x="0" y="0" width="${S}" height="${S}" preserveAspectRatio="xMidYMid slice"`,
|
||||
` href="data:image/png;base64,${pngBuffer.toString("base64")}"/>`,
|
||||
" </g>",
|
||||
` <rect x="${u(0.012)}" y="${u(0.012)}" width="${u(0.976)}" height="${u(0.976)}"`,
|
||||
` rx="${u(GEO.radius - 0.012)}" ry="${u(GEO.radius - 0.012)}"`,
|
||||
` fill="none" stroke="${hex(spec.ring)}" stroke-opacity="${spec.ringAlpha}" stroke-width="${u(0.012)}"/>`,
|
||||
"</svg>",
|
||||
"",
|
||||
].join("\n");
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user