66 lines
3.5 KiB
JavaScript
66 lines
3.5 KiB
JavaScript
/**
|
||
* 👤 人脸/人物头像风格样本预览页（18 种，每种 6 个样例，纯 SVG 无需渲染）
|
||
* 用户选定风格后，再批量生成 100 个。
|
||
*/
|
||
'use strict';
|
||
const fs = require('fs');
|
||
const path = require('path');
|
||
const vm = require('vm');
|
||
const ROOT = process.cwd();
|
||
global.window = global;
|
||
|
||
// 1. 加载引擎（const 声明需同一上下文，拼接赋值暴露到 globalThis）
|
||
const engine = fs.readFileSync(path.join(ROOT, 'js', 'core', 'dicebear.js'), 'utf8')
|
||
+ '\n;globalThis.HGB_Dicebear = HGB_Dicebear;';
|
||
vm.runInThisContext(engine, { filename: 'dicebear.js' });
|
||
const render = globalThis.HGB_Dicebear.renderAvatar;
|
||
|
||
// 2. 人脸/人物风格（排除 bottts 机器人、shapes/rings/identicon 抽象、initials 文字）
|
||
const STYLES = [
|
||
['avataaars', '阿凡达卡通人物'], ['adventurer', '冒险家人物'], ['adventurer-neutral', '冒险家·中性'],
|
||
['notionists', 'Notion 现代人物'], ['notionists-neutral', 'Notion·中性'], ['personas', '人物插画'],
|
||
['open-peeps', '手绘小人'], ['micah', '米迦人物'], ['lorelei', '洛雷莱人物'],
|
||
['lorelei-neutral', '洛雷莱·中性'], ['dylan', '迪伦人物'], ['miniavs', '迷你头像'],
|
||
['big-smile', '大笑脸'], ['fun-emoji', '趣味表情'], ['croodles', '卡通线条'],
|
||
['croodles-neutral', '卡通线条中性'], ['big-ears', '大耳朵人物'], ['big-ears-neutral', '大耳朵·中性']
|
||
];
|
||
|
||
let cards = '';
|
||
let ok = 0, fail = 0;
|
||
for (const [id, cn] of STYLES) {
|
||
const f = path.join(ROOT, 'js', 'data', 'sources', `dicebear-${id}.js`);
|
||
if (!fs.existsSync(f)) { console.warn('⚠️ 缺文件:', id); continue; }
|
||
try {
|
||
vm.runInThisContext(fs.readFileSync(f, 'utf8'), { filename: f });
|
||
const def = window[`HGB_Dicebear_${id.replace(/-/g, '_')}`];
|
||
if (!def) throw new Error('未注册 ' + id);
|
||
const cw = def.canvas.width, ch = def.canvas.height;
|
||
let samples = '';
|
||
for (let s = 1; s <= 6; s++) {
|
||
const r = render(id, `face-${s}`);
|
||
samples += `<img src="data:image/svg+xml;utf8,${encodeURIComponent(r.svg)}" alt="seed${s}">`;
|
||
}
|
||
cards += `<div class="style"><div class="st">${cn}<span class="id">dicebear:${id} · ${cw}×${ch}</span></div><div class="samples">${samples}</div></div>`;
|
||
ok++;
|
||
} catch (e) { console.error('❌', id, e.message.split('\n')[0]); fail++; }
|
||
}
|
||
|
||
const html = `<!DOCTYPE html>
|
||
<html lang="zh-CN"><head><meta charset="UTF-8">
|
||
<title>👤 资源库人脸/人物头像风格 · 18 种样本</title>
|
||
<style>
|
||
body{font-family:-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;background:#0f1115;color:#e8eaed;margin:0;padding:24px}
|
||
h1{font-size:20px;margin:0 0 4px}.sub{color:#9aa0a6;font-size:13px;margin-bottom:16px}
|
||
.style{background:#1b1e26;border:1px solid #2a2f3a;border-radius:12px;padding:14px;margin-bottom:14px}
|
||
.st{font-size:14px;margin-bottom:10px}.st .id{color:#80868b;font-size:11px;margin-left:10px}
|
||
.samples{display:flex;gap:12px;flex-wrap:wrap}
|
||
.samples img{width:88px;height:88px;border-radius:50%;background:#fff;padding:4px;box-sizing:border-box}
|
||
</style></head><body>
|
||
<h1>👤 资源库人脸/人物头像风格（${ok} 种 · 每种 6 个样例）</h1>
|
||
<div class="sub">全部来自资源库 DiceBear 源 · 纯 SVG 预览 · 告诉我选哪种风格，我批量生成 100 个人脸头像</div>
|
||
${cards}
|
||
</body></html>`;
|
||
|
||
fs.writeFileSync(path.join(ROOT, 'output', 'agent-avatars-png', 'style-preview.html'), html, 'utf8');
|
||
console.log(`\n🎉 完成：成功 ${ok} 个风格，失败 ${fail} 个 → output/agent-avatars-png/style-preview.html`);
|