444 lines
14 KiB
JavaScript
444 lines
14 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-road-town-map-concepts-20260523',
|
|
);
|
|
const styleReferencePath = path.join(
|
|
repoRoot,
|
|
'public',
|
|
'child-motion-demo',
|
|
'picture-book-grass-stage.png',
|
|
);
|
|
const layoutReferencePaths = [
|
|
path.join(repoRoot, 'tmp', 'edutainment_video_frames', 'video1_t2_11950ms.png'),
|
|
path.join(repoRoot, 'tmp', 'edutainment_video_frames', 'video1_t3_23400ms.png'),
|
|
];
|
|
const defaultTimeoutMs = 1000000;
|
|
|
|
const commonPrompt = [
|
|
'横屏 16:9 电视端寓教于乐板块玩法入口概念图。',
|
|
'新的结构要求：抛弃原本乐园地图、环形乐园、岛屿乐园和主题公园分区结构，改为参考 Toca Life World 地图的“马路串联小建筑群”结构。',
|
|
'每一屏都是一个完整的主题小建筑群街区：画面中心必须有一条灰蓝色可通车马路横向贯穿，马路有双车道、白色虚线、斑马线、路口、转弯支路和小汽车。',
|
|
'马路必须从画面左侧边缘进入、从画面右侧边缘离开，左右边缘都要明确暗示可以接到上一屏和下一屏，像横向滑动世界地图的一段。',
|
|
'建筑群沿马路两侧聚集，不要平均散成乐园点位；每屏像一个小镇街区、一组主题建筑、一段可探索街道。',
|
|
'采用轻微俯视的卡通等距地图视角，能看清建筑立面、屋顶、路网和车辆路径。',
|
|
'整体保持 Genarrative 寓教于乐现有明亮卡通绘本插画风：柔和水彩笔触、纸张纹理、温暖草地、浅蓝天空、圆润儿童友好、干净低噪声。',
|
|
'入口模块只用建筑外形和道具暗示，不写任何文字：识物可用水果店、动物卡片屋、观察橱窗；绘画可用彩笔工坊、画纸屋；动作可用小操场、跳圈馆；拼图可用积木拼图屋；声音节奏可用小剧场、音乐屋；自然探索可用树屋、温室、观测台。',
|
|
'参考图只用于学习“中央马路 + 两侧主题小建筑群 + 横向连续世界”的结构，不要复制 Toca Life World 的 logo、角色、建筑外形、UI、按钮、文字、字幕、水印或品牌元素。',
|
|
'不要出现中文、英文、数字、字母、按钮文案、UI 面板、教程说明、logo、水印、商业 IP、真实品牌、城堡、环球影城/迪士尼式乐园、环形乐园岛、漂浮岛、地球球体、过度奇幻设施、真实照片感、暗黑科技风。',
|
|
].join('');
|
|
|
|
const concepts = [
|
|
{
|
|
id: 'edutainment-road-town-01-cognition-main-street',
|
|
title: '识物认知主街',
|
|
prompt: [
|
|
commonPrompt,
|
|
'本屏主题：识物认知主街。',
|
|
'马路从左到右横穿中轴，路两侧是一组水果小店、动物观察窗、图形积木屋、透明展示橱窗和小型公交站，像儿童认知街区。',
|
|
'建筑数量 6 到 8 个，分成前景近路建筑和后景山坡建筑，街区整体紧凑，不能变成分散乐园点。',
|
|
'左边缘的道路要露出半个弯道和继续驶入的小汽车，右边缘道路继续出画，暗示下一屏可以接到绘画工坊街。',
|
|
].join(''),
|
|
},
|
|
{
|
|
id: 'edutainment-road-town-02-creative-workshop-street',
|
|
title: '绘画创作工坊街',
|
|
prompt: [
|
|
commonPrompt,
|
|
'本屏主题：绘画创作工坊街。',
|
|
'中央马路横贯画面，马路两侧聚成彩笔工坊、画纸屋、颜料罐屋、绘本小剧场、手工材料店和圆顶小展馆。',
|
|
'建筑轮廓要像一组主题小建筑群，屋顶可有画笔、颜料、纸张、拼贴形状等图形化暗示，但不要出现任何文字。',
|
|
'左边道路接识物主街，右边道路接运动音乐街；用连续路面、车道线、小汽车和路灯强调可横向滑动探索。',
|
|
].join(''),
|
|
},
|
|
{
|
|
id: 'edutainment-road-town-03-motion-music-block',
|
|
title: '运动音乐街区',
|
|
prompt: [
|
|
commonPrompt,
|
|
'本屏主题：运动音乐街区。',
|
|
'中央马路是主要路径，两侧是一组动作热身馆、小操场、跳圈屋、音乐小剧场、鼓点屋、铃铛塔和户外小舞台。',
|
|
'建筑群要围绕道路形成一个活泼街区，前景可以有迷你停车位、斑马线、小汽车、路牌形状图标，但不要文字。',
|
|
'道路左侧出画连接绘画创作工坊街，右侧出画连接自然探索街；画面边缘不能封死。',
|
|
].join(''),
|
|
},
|
|
{
|
|
id: 'edutainment-road-town-04-nature-lab-avenue',
|
|
title: '自然探索实验大道',
|
|
prompt: [
|
|
commonPrompt,
|
|
'本屏主题：自然探索实验大道。',
|
|
'中央马路横向穿过一组自然探索小建筑群：温室、树屋、昆虫观察屋、云朵气象站、小望远镜塔、湖边小码头和拼图桥。',
|
|
'建筑沿道路成街区分布，后景是柔和山坡和树林，前景保留路边草地、停车位和小汽车路径。',
|
|
'左边道路接运动音乐街，右边道路继续进入森林或新的学习街区，明确体现一屏接一屏的世界地图结构。',
|
|
].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 referenceDataUrls() {
|
|
return [styleReferencePath, ...layoutReferencePaths]
|
|
.map((filePath) => toDataUrl(filePath))
|
|
.filter(Boolean);
|
|
}
|
|
|
|
function buildRequestBody(concept, size, references) {
|
|
const body = {
|
|
model: 'gpt-image-2-all',
|
|
prompt: concept.prompt,
|
|
n: 1,
|
|
size,
|
|
};
|
|
if (references.length > 0) {
|
|
body.image = references;
|
|
}
|
|
return body;
|
|
}
|
|
|
|
function buildDryRunRequestBody(concept, size, references) {
|
|
return {
|
|
model: 'gpt-image-2-all',
|
|
prompt: concept.prompt,
|
|
n: 1,
|
|
size,
|
|
imageReferenceCount: references.length,
|
|
};
|
|
}
|
|
|
|
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);
|
|
}
|
|
}
|
|
|
|
function outputPathFor(concept, extension = 'png') {
|
|
return path.join(outDir, `${concept.id}.${extension}`);
|
|
}
|
|
|
|
function findExistingOutputPath(concept) {
|
|
for (const extension of ['png', 'jpg', 'jpeg', 'webp']) {
|
|
const candidate = outputPathFor(concept, extension);
|
|
if (existsSync(candidate)) {
|
|
return candidate;
|
|
}
|
|
}
|
|
return null;
|
|
}
|
|
|
|
async function generateOne(env, concept, size, references) {
|
|
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, references)),
|
|
},
|
|
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 = outputPathFor(concept, 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') || '3840x2160');
|
|
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),
|
|
);
|
|
const references = referenceDataUrls();
|
|
|
|
if (dryRun) {
|
|
console.log(
|
|
JSON.stringify(
|
|
{
|
|
mode: 'dry-run',
|
|
outDir,
|
|
size,
|
|
styleReference: existsSync(styleReferencePath)
|
|
? styleReferencePath
|
|
: null,
|
|
layoutReferences: layoutReferencePaths.filter((filePath) =>
|
|
existsSync(filePath),
|
|
),
|
|
count: selectedConcepts.length,
|
|
requests: selectedConcepts.map((concept) => ({
|
|
id: concept.id,
|
|
title: concept.title,
|
|
body: buildDryRunRequestBody(concept, size, references),
|
|
})),
|
|
},
|
|
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 = [];
|
|
const generatedFileById = new Map();
|
|
for (const concept of selectedConcepts) {
|
|
console.log(`Generating ${concept.id}...`);
|
|
const file = await generateOne(env, concept, size, references);
|
|
files.push(file);
|
|
generatedFileById.set(concept.id, file);
|
|
}
|
|
|
|
const metadataFiles = concepts
|
|
.map((concept) => {
|
|
const file = generatedFileById.get(concept.id) ?? findExistingOutputPath(concept);
|
|
if (!file) {
|
|
return null;
|
|
}
|
|
return {
|
|
id: concept.id,
|
|
title: concept.title,
|
|
file,
|
|
prompt: concept.prompt,
|
|
};
|
|
})
|
|
.filter(Boolean);
|
|
|
|
writeFileSync(
|
|
path.join(outDir, 'generation-metadata.json'),
|
|
JSON.stringify(
|
|
{
|
|
model: 'gpt-image-2-all',
|
|
size,
|
|
generatedAt: new Date().toISOString(),
|
|
styleReference: existsSync(styleReferencePath) ? styleReferencePath : null,
|
|
layoutReferences: layoutReferencePaths.filter((filePath) =>
|
|
existsSync(filePath),
|
|
),
|
|
generatedIds: selectedConcepts.map((concept) => concept.id),
|
|
files: metadataFiles,
|
|
},
|
|
null,
|
|
2,
|
|
),
|
|
);
|
|
|
|
console.log(JSON.stringify({ ok: true, count: files.length, files }, null, 2));
|