高物
74fd9a33ac
Add VectorEngine image generation config and raise request timeouts (env + scripts) from 180000 to 1000000ms. Introduce a reusable CreativeImageInputPanel component with tests and wire up mobile keyboard-focus helpers; update generation views and related tests (CustomWorldGenerationView, BarkBattle editor, Match3D, Puzzle flows). Improve API error handling / VectorEngine request guidance (packages/shared http.ts and docs), and apply multiple backend/frontend fixes for puzzle/match3d/prompt handling. Also include extensive docs and decision-log updates describing UI/UX decisions and verification steps.
352 lines
9.9 KiB
JavaScript
352 lines
9.9 KiB
JavaScript
import { Buffer } from 'node:buffer';
|
||
import { existsSync, mkdirSync, readFileSync, writeFileSync } from 'node:fs';
|
||
import path from 'node:path';
|
||
import { fileURLToPath } from 'node:url';
|
||
|
||
const __filename = fileURLToPath(import.meta.url);
|
||
const __dirname = path.dirname(__filename);
|
||
const skillRoot = path.resolve(__dirname, '..');
|
||
const repoRoot = path.resolve(skillRoot, '..', '..', '..');
|
||
const defaultOutDir = path.join(repoRoot, 'public', 'anthro-cat-illustrations');
|
||
const defaultTimeoutMs = 1000000;
|
||
|
||
const prompts = [
|
||
{
|
||
id: 'cat-barista',
|
||
title: '咖啡师猫咪',
|
||
subject:
|
||
'一只奶油色猫咪像人一样双足站立，穿深绿色围裙，在温暖咖啡馆吧台前专注拉花，爪子扶着咖啡杯，蓬松尾巴自然弯起，童书级精致插画，柔和自然光，主体清晰。',
|
||
},
|
||
{
|
||
id: 'cat-detective',
|
||
title: '侦探猫咪',
|
||
subject:
|
||
'一只黑白猫咪像侦探一样双足站在雨后街角，穿短风衣和小帽子，单爪拿放大镜，另一只爪插兜，路灯和湿润石板路反光，电影感但可爱，插画风格。',
|
||
},
|
||
{
|
||
id: 'cat-dancer',
|
||
title: '舞者猫咪',
|
||
subject:
|
||
'一只橘猫以拟人舞者姿态单脚旋转，穿轻盈舞台披肩，前爪展开，尾巴形成优雅弧线，背景是暖色小剧场灯光，动作灵动，精致插画。',
|
||
},
|
||
{
|
||
id: 'cat-knight',
|
||
title: '骑士猫咪',
|
||
subject:
|
||
'一只银灰猫咪像小骑士一样站在苔藓石台上，披短斗篷，双爪握着细剑指向地面，姿态勇敢但可亲，远处森林微光，奇幻插画风格。',
|
||
},
|
||
{
|
||
id: 'cat-painter',
|
||
title: '画家猫咪',
|
||
subject:
|
||
'一只三花猫咪双足站在画架前，穿宽松蓝色工作衫，一爪拿画笔一爪托调色盘，鼻尖有颜料点，窗边画室阳光明亮，温柔手绘插画。',
|
||
},
|
||
{
|
||
id: 'cat-astronaut',
|
||
title: '宇航员猫咪',
|
||
subject:
|
||
'一只白猫咪以拟人宇航员姿态站在月面，透明头盔内露出猫脸，尾巴在宇航服后轻轻翘起，爪子向远处蓝色星球敬礼，梦幻插画风格。',
|
||
},
|
||
];
|
||
|
||
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);
|
||
}
|
||
}
|
||
}
|
||
|
||
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 buildVectorEngineImagesGenerationUrl(baseUrl) {
|
||
return baseUrl.endsWith('/v1')
|
||
? `${baseUrl}/images/generations`
|
||
: `${baseUrl}/v1/images/generations`;
|
||
}
|
||
|
||
function buildPrompt(entry) {
|
||
return [
|
||
'请生成一张高清 1:1 方形插画。',
|
||
`画面主体：${entry.subject}`,
|
||
'要求：猫咪保留清晰猫脸、猫耳、猫尾和毛发质感，但身体姿态像人一样自然；构图完整，角色占画面主体，适合作为项目插画素材。',
|
||
'避免：文字、水印、边框、按钮、UI 元素、低清晰度、过度写实恐怖感、畸形肢体、多余手指。',
|
||
].join('');
|
||
}
|
||
|
||
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 extractImageUrls(payload) {
|
||
const urls = [];
|
||
collectStringsByKey(payload, 'url', urls);
|
||
collectStringsByKey(payload, 'image', urls);
|
||
collectStringsByKey(payload, 'image_url', urls);
|
||
return [...new Set(urls)].filter((url) => /^https?:\/\//u.test(url));
|
||
}
|
||
|
||
function extractBase64Images(payload) {
|
||
const values = [];
|
||
collectStringsByKey(payload, 'b64_json', values);
|
||
return values;
|
||
}
|
||
|
||
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/gif') {
|
||
return 'gif';
|
||
}
|
||
return 'jpg';
|
||
}
|
||
|
||
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';
|
||
}
|
||
|
||
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}`);
|
||
}
|
||
const bytes = Buffer.from(await response.arrayBuffer());
|
||
return {
|
||
bytes,
|
||
extension: inferExtensionFromContentType(
|
||
response.headers.get('content-type') || 'image/jpeg',
|
||
),
|
||
};
|
||
} 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, entry, outDir) {
|
||
const requestBody = {
|
||
model: 'gpt-image-2-all',
|
||
prompt: buildPrompt(entry),
|
||
n: 1,
|
||
size: '1024x1024',
|
||
};
|
||
const payload = await fetchJson(
|
||
buildVectorEngineImagesGenerationUrl(env.baseUrl),
|
||
{
|
||
method: 'POST',
|
||
headers: {
|
||
Authorization: `Bearer ${env.apiKey}`,
|
||
Accept: 'application/json',
|
||
'Content-Type': 'application/json',
|
||
},
|
||
body: JSON.stringify(requestBody),
|
||
},
|
||
env.timeoutMs,
|
||
);
|
||
|
||
const urls = extractImageUrls(payload);
|
||
const b64Images = extractBase64Images(payload);
|
||
|
||
let image;
|
||
if (urls[0]) {
|
||
image = await downloadUrl(urls[0], 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 ${entry.id}`);
|
||
}
|
||
|
||
mkdirSync(outDir, { recursive: true });
|
||
const outputPath = path.join(outDir, `${entry.id}.${image.extension}`);
|
||
writeFileSync(outputPath, image.bytes);
|
||
return outputPath;
|
||
}
|
||
|
||
const dryRun = args.has('--dry-run') || !args.has('--live');
|
||
const outDir = path.resolve(String(args.get('--out-dir') || defaultOutDir));
|
||
const limit = Number.parseInt(String(args.get('--limit') || '0'), 10);
|
||
const selectedPrompts = limit > 0 ? prompts.slice(0, limit) : prompts;
|
||
|
||
if (dryRun) {
|
||
const env = resolveEnv();
|
||
console.log(
|
||
JSON.stringify(
|
||
{
|
||
mode: 'dry-run',
|
||
outDir,
|
||
count: selectedPrompts.length,
|
||
hasBaseUrl: Boolean(env.baseUrl),
|
||
hasApiKey: Boolean(env.apiKey),
|
||
requests: selectedPrompts.map((entry) => ({
|
||
id: entry.id,
|
||
title: entry.title,
|
||
body: {
|
||
model: 'gpt-image-2-all',
|
||
prompt: buildPrompt(entry),
|
||
n: 1,
|
||
size: '1024x1024',
|
||
},
|
||
})),
|
||
},
|
||
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 generated = [];
|
||
for (const entry of selectedPrompts) {
|
||
console.log(`Generating ${entry.id}...`);
|
||
generated.push(await generateOne(env, entry, outDir));
|
||
}
|
||
|
||
console.log(
|
||
JSON.stringify(
|
||
{
|
||
ok: true,
|
||
count: generated.length,
|
||
files: generated,
|
||
},
|
||
null,
|
||
2,
|
||
),
|
||
);
|