395 lines
12 KiB
JavaScript
395 lines
12 KiB
JavaScript
import { Buffer } from 'node:buffer';
|
|
import { existsSync, mkdirSync, readFileSync, writeFileSync } from 'node:fs';
|
|
import path from 'node:path';
|
|
|
|
const repoRoot = process.cwd();
|
|
const outDir = path.join(
|
|
repoRoot,
|
|
'output',
|
|
'imagegen',
|
|
'edutainment-tv-map-entry-concepts-20260518',
|
|
);
|
|
const styleReferencePath = path.join(
|
|
repoRoot,
|
|
'public',
|
|
'child-motion-demo',
|
|
'picture-book-grass-stage.png',
|
|
);
|
|
const defaultTimeoutMs = 1000000;
|
|
const commonStyle = [
|
|
'横屏 16:9 电视端寓教于乐板块交互入口概念图。',
|
|
'画面像儿童主题乐园地图，不是现实品牌乐园，不出现迪士尼、环球影城、城堡商标、影视 IP、真实品牌或可识别版权角色。',
|
|
'整体保持 Genarrative 寓教于乐现有明亮卡通绘本插画风：柔和水彩笔触、轻微纸张纹理、温暖草地、浅蓝天空、圆润可爱、低噪声、儿童友好。',
|
|
'地图分为 5 到 6 个清晰区域，每个区域像可点击玩法入口：宝贝识物、宝贝爱画、动作热身、拼图启蒙、声音节奏、自然探索；用图形和场景暗示模块，不写文字。',
|
|
'需要有主路径、分叉小路、入口节点、空白安全区和明显的焦点层级，适合后续在网页上叠加按钮、焦点光圈和中文标题。',
|
|
'构图为电视大屏横屏，远看是完整乐园地图，近看每个区域可作为独立交互入口；边缘留出安全裁切，不要把重要入口贴边。',
|
|
'不要出现文字、数字、字母、按钮文案、UI 面板、教程说明、水印、logo、真实照片质感、暗色科技风、过度商业广告感。',
|
|
].join('');
|
|
|
|
const concepts = [
|
|
{
|
|
id: 'edutainment-tv-map-01-ring-park',
|
|
title: '环形乐园岛',
|
|
prompt: [
|
|
commonStyle,
|
|
'版式方向：俯视略带透视的环形乐园岛，中央是柔软草地广场，外圈有一条蜿蜒小路串联 6 个入口区域。',
|
|
'区域暗示：左侧水果与小篮子区域代表宝贝识物；左下彩色画笔和画纸区域代表宝贝爱画；下方开阔草地圆环代表动作热身；右下拼图积木和图块小屋代表拼图启蒙；右侧小舞台和音符形花朵代表声音节奏；上方小树林和放大镜步道代表自然探索。',
|
|
'每个入口用圆润小建筑、道具和地形分区表现，入口节点尺寸接近，主路清楚，中央保留可叠加推荐焦点的位置。',
|
|
].join(''),
|
|
},
|
|
{
|
|
id: 'edutainment-tv-map-02-open-book',
|
|
title: '展开绘本地图',
|
|
prompt: [
|
|
commonStyle,
|
|
'版式方向：一本巨大的横向展开绘本变成乐园地图，左右两页自然连接，中缝是一条小河或小路。',
|
|
'左页偏认知与绘画：果园篮子、动物剪影卡片、彩色蜡笔丘陵、画纸小屋；右页偏运动与探索：草地热身舞台、拼图桥、小音符剧场、树林观察台。',
|
|
'入口像从纸页上立起来的立体绘本机关，边缘有轻微纸张纹理和翻页层次，整体仍是干净可交互背景，不要文字。',
|
|
].join(''),
|
|
},
|
|
{
|
|
id: 'edutainment-tv-map-03-floating-islands',
|
|
title: '云朵空中岛',
|
|
prompt: [
|
|
commonStyle,
|
|
'版式方向：浅蓝天空中的多个漂浮小岛，岛与岛之间由彩虹桥、云朵步道和藤蔓小路连接，横向展开适合电视端选择入口。',
|
|
'每个小岛是一个玩法模块入口：水果识物岛、画笔创作岛、草地运动岛、拼图机械小岛、声音花园岛、自然观察岛。',
|
|
'中央主岛最大，左右分布保持平衡，背景云层干净明亮，入口岛轮廓清晰，适合后续做焦点放大和悬停动效。',
|
|
].join(''),
|
|
},
|
|
{
|
|
id: 'edutainment-tv-map-04-stage-garden',
|
|
title: '草地舞台地图',
|
|
prompt: [
|
|
commonStyle,
|
|
'版式方向：把现有寓教于乐草地舞台扩展成横屏互动乐园，前景是开阔草地，远景是小山、树木和柔和天空。',
|
|
'入口沿一条 S 形小路从左到右铺开：篮子果园、画画帐篷、动作圆环舞台、拼图桥、声音小剧场、探索小树林。',
|
|
'整体更接近实际运行态背景，可直接想象成电视端页面首屏；中心下方需要留空，给遥控器焦点框、入口标题或儿童角色站位使用。',
|
|
].join(''),
|
|
},
|
|
];
|
|
|
|
function readDotenv(fileName) {
|
|
const filePath = path.join(repoRoot, fileName);
|
|
if (!existsSync(filePath)) {
|
|
return {};
|
|
}
|
|
|
|
const values = {};
|
|
for (const line of readFileSync(filePath, 'utf8').split(/\r?\n/u)) {
|
|
const trimmed = line.trim();
|
|
if (!trimmed || trimmed.startsWith('#')) {
|
|
continue;
|
|
}
|
|
const match = /^([A-Za-z_][A-Za-z0-9_]*)=(.*)$/u.exec(trimmed);
|
|
if (!match) {
|
|
continue;
|
|
}
|
|
let value = match[2].trim();
|
|
if (
|
|
(value.startsWith('"') && value.endsWith('"')) ||
|
|
(value.startsWith("'") && value.endsWith("'"))
|
|
) {
|
|
value = value.slice(1, -1);
|
|
}
|
|
values[match[1]] = value;
|
|
}
|
|
return values;
|
|
}
|
|
|
|
function resolveEnv() {
|
|
const loaded = {
|
|
...readDotenv('.env.example'),
|
|
...readDotenv('.env.local'),
|
|
...readDotenv('.env.secrets.local'),
|
|
...process.env,
|
|
};
|
|
return {
|
|
baseUrl: String(loaded.VECTOR_ENGINE_BASE_URL || '')
|
|
.trim()
|
|
.replace(/\/+$/u, ''),
|
|
apiKey: String(loaded.VECTOR_ENGINE_API_KEY || '').trim(),
|
|
timeoutMs: Number.parseInt(
|
|
String(loaded.VECTOR_ENGINE_IMAGE_REQUEST_TIMEOUT_MS || defaultTimeoutMs),
|
|
10,
|
|
),
|
|
};
|
|
}
|
|
|
|
function generationUrl(baseUrl) {
|
|
return baseUrl.endsWith('/v1')
|
|
? `${baseUrl}/images/generations`
|
|
: `${baseUrl}/v1/images/generations`;
|
|
}
|
|
|
|
function collectStringsByKey(value, targetKey, output) {
|
|
if (Array.isArray(value)) {
|
|
value.forEach((entry) => collectStringsByKey(entry, targetKey, output));
|
|
return;
|
|
}
|
|
if (!value || typeof value !== 'object') {
|
|
return;
|
|
}
|
|
for (const [key, nested] of Object.entries(value)) {
|
|
if (key === targetKey) {
|
|
if (typeof nested === 'string' && nested.trim()) {
|
|
output.push(nested.trim());
|
|
}
|
|
if (Array.isArray(nested)) {
|
|
nested.forEach((entry) => {
|
|
if (typeof entry === 'string' && entry.trim()) {
|
|
output.push(entry.trim());
|
|
}
|
|
});
|
|
}
|
|
}
|
|
collectStringsByKey(nested, targetKey, output);
|
|
}
|
|
}
|
|
|
|
function inferExtensionFromBytes(bytes) {
|
|
if (bytes.subarray(0, 8).equals(Buffer.from('\x89PNG\r\n\x1A\n', 'binary'))) {
|
|
return 'png';
|
|
}
|
|
if (bytes.subarray(0, 3).equals(Buffer.from([0xff, 0xd8, 0xff]))) {
|
|
return 'jpg';
|
|
}
|
|
if (
|
|
bytes.subarray(0, 4).toString('ascii') === 'RIFF' &&
|
|
bytes.subarray(8, 12).toString('ascii') === 'WEBP'
|
|
) {
|
|
return 'webp';
|
|
}
|
|
return 'png';
|
|
}
|
|
|
|
function inferExtensionFromContentType(contentType) {
|
|
const normalized = contentType.split(';')[0]?.trim().toLowerCase();
|
|
if (normalized === 'image/png') {
|
|
return 'png';
|
|
}
|
|
if (normalized === 'image/webp') {
|
|
return 'webp';
|
|
}
|
|
if (normalized === 'image/jpeg') {
|
|
return 'jpg';
|
|
}
|
|
return 'png';
|
|
}
|
|
|
|
function toDataUrl(filePath) {
|
|
if (!existsSync(filePath)) {
|
|
return null;
|
|
}
|
|
const bytes = readFileSync(filePath);
|
|
const extension = inferExtensionFromBytes(bytes);
|
|
const mime = extension === 'jpg' ? 'image/jpeg' : `image/${extension}`;
|
|
return `data:${mime};base64,${bytes.toString('base64')}`;
|
|
}
|
|
|
|
function buildRequestBody(concept, size) {
|
|
const body = {
|
|
model: 'gpt-image-2-all',
|
|
prompt: concept.prompt,
|
|
n: 1,
|
|
size,
|
|
};
|
|
const styleReference = toDataUrl(styleReferencePath);
|
|
if (styleReference) {
|
|
body.image = [styleReference];
|
|
}
|
|
return body;
|
|
}
|
|
|
|
function buildDryRunRequestBody(concept, size, hasStyleReference) {
|
|
return {
|
|
model: 'gpt-image-2-all',
|
|
prompt: concept.prompt,
|
|
n: 1,
|
|
size,
|
|
imageReferenceCount: hasStyleReference ? 1 : 0,
|
|
};
|
|
}
|
|
|
|
async function fetchJson(url, options, timeoutMs) {
|
|
const abortController = new AbortController();
|
|
const timer = setTimeout(() => abortController.abort(), timeoutMs);
|
|
try {
|
|
const response = await fetch(url, {
|
|
...options,
|
|
signal: abortController.signal,
|
|
});
|
|
const text = await response.text();
|
|
if (!response.ok) {
|
|
throw new Error(`VectorEngine ${response.status}: ${text.slice(0, 600)}`);
|
|
}
|
|
return JSON.parse(text);
|
|
} catch (error) {
|
|
if (error?.name === 'AbortError') {
|
|
throw new Error(`VectorEngine request timed out after ${timeoutMs}ms`);
|
|
}
|
|
throw error;
|
|
} finally {
|
|
clearTimeout(timer);
|
|
}
|
|
}
|
|
|
|
async function downloadUrl(url, timeoutMs) {
|
|
const abortController = new AbortController();
|
|
const timer = setTimeout(() => abortController.abort(), timeoutMs);
|
|
try {
|
|
const response = await fetch(url, { signal: abortController.signal });
|
|
if (!response.ok) {
|
|
throw new Error(`download ${response.status}`);
|
|
}
|
|
return {
|
|
bytes: Buffer.from(await response.arrayBuffer()),
|
|
extension: inferExtensionFromContentType(
|
|
response.headers.get('content-type') || '',
|
|
),
|
|
};
|
|
} catch (error) {
|
|
if (error?.name === 'AbortError') {
|
|
throw new Error(`Generated image download timed out after ${timeoutMs}ms`);
|
|
}
|
|
throw error;
|
|
} finally {
|
|
clearTimeout(timer);
|
|
}
|
|
}
|
|
|
|
async function generateOne(env, concept, size) {
|
|
const payload = await fetchJson(
|
|
generationUrl(env.baseUrl),
|
|
{
|
|
method: 'POST',
|
|
headers: {
|
|
Authorization: `Bearer ${env.apiKey}`,
|
|
Accept: 'application/json',
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify(buildRequestBody(concept, size)),
|
|
},
|
|
env.timeoutMs,
|
|
);
|
|
|
|
const urls = [];
|
|
const b64Images = [];
|
|
collectStringsByKey(payload, 'url', urls);
|
|
collectStringsByKey(payload, 'image', urls);
|
|
collectStringsByKey(payload, 'image_url', urls);
|
|
collectStringsByKey(payload, 'b64_json', b64Images);
|
|
|
|
let image;
|
|
const imageUrl = [...new Set(urls)].find((url) => /^https?:\/\//u.test(url));
|
|
if (imageUrl) {
|
|
image = await downloadUrl(imageUrl, env.timeoutMs);
|
|
} else if (b64Images[0]) {
|
|
const bytes = Buffer.from(b64Images[0], 'base64');
|
|
image = {
|
|
bytes,
|
|
extension: inferExtensionFromBytes(bytes),
|
|
};
|
|
} else {
|
|
throw new Error(`VectorEngine returned no image for ${concept.id}`);
|
|
}
|
|
|
|
mkdirSync(outDir, { recursive: true });
|
|
const outputPath = path.join(outDir, `${concept.id}.${image.extension}`);
|
|
writeFileSync(outputPath, image.bytes);
|
|
return outputPath;
|
|
}
|
|
|
|
const args = new Map();
|
|
for (let index = 2; index < process.argv.length; index += 1) {
|
|
const raw = process.argv[index];
|
|
if (raw.startsWith('--')) {
|
|
const next = process.argv[index + 1];
|
|
if (next && !next.startsWith('--')) {
|
|
args.set(raw, next);
|
|
index += 1;
|
|
} else {
|
|
args.set(raw, true);
|
|
}
|
|
}
|
|
}
|
|
|
|
const size = String(args.get('--size') || '2048x1152');
|
|
const dryRun = args.has('--dry-run') || !args.has('--live');
|
|
const selectedIds = String(args.get('--only') || '')
|
|
.split(',')
|
|
.map((value) => value.trim())
|
|
.filter(Boolean);
|
|
const selectedConcepts = concepts.filter(
|
|
(concept) => selectedIds.length === 0 || selectedIds.includes(concept.id),
|
|
);
|
|
|
|
if (dryRun) {
|
|
console.log(
|
|
JSON.stringify(
|
|
{
|
|
mode: 'dry-run',
|
|
outDir,
|
|
size,
|
|
hasStyleReference: existsSync(styleReferencePath),
|
|
count: selectedConcepts.length,
|
|
requests: selectedConcepts.map((concept) => ({
|
|
id: concept.id,
|
|
title: concept.title,
|
|
body: buildDryRunRequestBody(
|
|
concept,
|
|
size,
|
|
existsSync(styleReferencePath),
|
|
),
|
|
})),
|
|
},
|
|
null,
|
|
2,
|
|
),
|
|
);
|
|
process.exit(0);
|
|
}
|
|
|
|
const env = resolveEnv();
|
|
if (!env.baseUrl || !env.apiKey) {
|
|
console.error(
|
|
JSON.stringify({
|
|
ok: false,
|
|
error: 'Missing VECTOR_ENGINE_BASE_URL or VECTOR_ENGINE_API_KEY',
|
|
hasBaseUrl: Boolean(env.baseUrl),
|
|
hasApiKey: Boolean(env.apiKey),
|
|
}),
|
|
);
|
|
process.exit(1);
|
|
}
|
|
|
|
const files = [];
|
|
for (const concept of selectedConcepts) {
|
|
console.log(`Generating ${concept.id}...`);
|
|
files.push(await generateOne(env, concept, size));
|
|
}
|
|
|
|
writeFileSync(
|
|
path.join(outDir, 'generation-metadata.json'),
|
|
JSON.stringify(
|
|
{
|
|
model: 'gpt-image-2-all',
|
|
size,
|
|
generatedAt: new Date().toISOString(),
|
|
styleReference: existsSync(styleReferencePath)
|
|
? styleReferencePath
|
|
: null,
|
|
files: selectedConcepts.map((concept, index) => ({
|
|
id: concept.id,
|
|
title: concept.title,
|
|
file: files[index],
|
|
prompt: concept.prompt,
|
|
})),
|
|
},
|
|
null,
|
|
2,
|
|
),
|
|
);
|
|
|
|
console.log(JSON.stringify({ ok: true, count: files.length, files }, null, 2));
|