Files
makelore/electron/api/routes/image-workspace.ts
brother7 15b17775cb 完善 AI 设计资产预览与视频首帧选择
需求:生成图片需要支持大图查看和本地下载;制作视频时需要从当前项目作品选择首帧,或上传本地图片。

实现:新增首帧选择弹窗、JPEG/PNG/WebP 有界上传、附件 Asset ID 透传、Main 到服务端 multipart 转发,并保留上传失败重试与私有图片下载链路。

验证:相关 57 项单测、TypeScript 类型检查、目标 ESLint 和 Vite 生产构建全部通过。
2026-08-06 11:31:47 +08:00

503 lines
15 KiB
TypeScript

import { createWriteStream } from 'node:fs';
import { rename, rm } from 'node:fs/promises';
import type { IncomingMessage, ServerResponse } from 'node:http';
import { randomUUID } from 'node:crypto';
import { basename, dirname, extname, join } from 'node:path';
import { Readable } from 'node:stream';
import { pipeline } from 'node:stream/promises';
import { app, dialog, type SaveDialogOptions } from 'electron';
import {
IMAGE_WORKSPACE_API_PATH,
IMAGE_WORKSPACE_UNAVAILABLE_CODE,
IMAGE_WORKSPACE_UNAVAILABLE_MESSAGE,
type DesignAssetUploadInput,
type DesignConfirmGenerationInput,
type DesignCreateWorkspaceInput,
type DesignRenameWorkspaceInput,
type DesignSubmitMessageInput,
} from '../../../shared/image-workspace';
import { DesignWorkspaceModuleError } from '../../image-workspace/module';
import type { HostApiContext } from '../context';
import {
flushStreamingHeaders,
parseJsonBody,
sendJson,
writeStreamingChunk,
} from '../route-utils';
function decodedSegments(pathname: string): string[] | null {
const suffix = pathname.slice(IMAGE_WORKSPACE_API_PATH.length).replace(/^\/+/, '');
if (!suffix) return [];
try {
return suffix.split('/').map((segment) => decodeURIComponent(segment));
} catch {
return null;
}
}
function asString(value: unknown): string {
return typeof value === 'string' ? value : '';
}
function asInteger(value: unknown): number {
return typeof value === 'number' && Number.isInteger(value) ? value : -1;
}
function asStringArray(value: unknown): string[] {
return Array.isArray(value) && value.every((item) => typeof item === 'string')
? value
: [];
}
const DESIGN_IMAGE_UPLOAD_MIME_TYPES = new Set([
'image/jpeg',
'image/png',
'image/webp',
]);
const MAX_DESIGN_IMAGE_UPLOAD_BYTES = 10 * 1024 * 1024;
const MAX_DESIGN_IMAGE_UPLOAD_BODY_BYTES = (
Math.ceil(MAX_DESIGN_IMAGE_UPLOAD_BYTES / 3) * 4 + 16 * 1024
);
async function parseAssetUploadBody(req: IncomingMessage): Promise<Record<string, unknown>> {
const declaredLength = Number(req.headers['content-length']);
if (Number.isFinite(declaredLength) && declaredLength > MAX_DESIGN_IMAGE_UPLOAD_BODY_BYTES) {
throw new DesignWorkspaceModuleError(
413,
'design_asset_upload_too_large',
'图片大小需在 10 MB 以内',
);
}
const chunks: Buffer[] = [];
let receivedBytes = 0;
for await (const chunk of req) {
const bytes = Buffer.isBuffer(chunk) ? chunk : Buffer.from(chunk);
receivedBytes += bytes.length;
if (receivedBytes > MAX_DESIGN_IMAGE_UPLOAD_BODY_BYTES) {
throw new DesignWorkspaceModuleError(
413,
'design_asset_upload_too_large',
'图片大小需在 10 MB 以内',
);
}
chunks.push(bytes);
}
try {
const body = JSON.parse(Buffer.concat(chunks).toString('utf8')) as unknown;
if (!body || typeof body !== 'object' || Array.isArray(body)) throw new Error();
return body as Record<string, unknown>;
} catch {
throw new DesignWorkspaceModuleError(
400,
'design_asset_upload_invalid',
'上传图片请求无效',
);
}
}
function decodeAssetUpload(
workspaceId: string,
body: Record<string, unknown>,
): DesignAssetUploadInput {
const fileName = basename(asString(body.fileName).trim().replace(/\\/g, '/')).slice(0, 160);
const mimeType = asString(body.mimeType);
const encoded = asString(body.dataBase64);
if (!fileName || !DESIGN_IMAGE_UPLOAD_MIME_TYPES.has(mimeType)) {
throw new DesignWorkspaceModuleError(
400,
'design_asset_upload_invalid',
'请选择 JPEG、PNG 或 WebP 图片',
);
}
if (!encoded
|| encoded.length % 4 !== 0
|| encoded.length > Math.ceil(MAX_DESIGN_IMAGE_UPLOAD_BYTES / 3) * 4
|| !/^[A-Za-z0-9+/]+={0,2}$/.test(encoded)) {
throw new DesignWorkspaceModuleError(
413,
'design_asset_upload_too_large',
'图片大小需在 10 MB 以内',
);
}
const bytes = Buffer.from(encoded, 'base64');
if (bytes.length <= 0 || bytes.length > MAX_DESIGN_IMAGE_UPLOAD_BYTES) {
throw new DesignWorkspaceModuleError(
413,
'design_asset_upload_too_large',
'图片大小需在 10 MB 以内',
);
}
return {
workspaceId,
fileName,
mimeType: mimeType as DesignAssetUploadInput['mimeType'],
bytes,
};
}
function sendData(res: ServerResponse, data: unknown): void {
sendJson(res, 200, { success: true, status: 200, data });
}
const IMAGE_FILE_EXTENSIONS = new Set(['.gif', '.jpeg', '.jpg', '.png', '.svg', '.webp']);
function safeImageFileName(value: string, assetId: string): string {
const fallbackId = assetId
.replace(/[^a-zA-Z0-9_-]+/g, '-')
.replace(/^-+|-+$/g, '')
.slice(0, 32) || 'image';
const fallback = `Makelore-AI-Design-${fallbackId}.png`;
const sanitized = [...value.trim().replace(/[<>:"/\\|?*]/g, '-')]
.map((character) => character.charCodeAt(0) < 32 ? '-' : character)
.join('')
.replace(/[. ]+$/g, '')
.slice(0, 120);
if (!sanitized || !IMAGE_FILE_EXTENSIONS.has(extname(sanitized).toLowerCase())) {
return fallback;
}
return sanitized;
}
async function saveAssetContent(
res: ServerResponse,
ctx: HostApiContext,
workspaceId: string,
assetId: string,
defaultFileName: string,
): Promise<void> {
const fileName = safeImageFileName(defaultFileName, assetId);
const extension = extname(fileName).slice(1);
const options: SaveDialogOptions = {
defaultPath: join(app.getPath('downloads'), fileName),
filters: [
{ name: '图片', extensions: [extension] },
{ name: '所有文件', extensions: ['*'] },
],
};
const mainWindow = ctx.mainWindow && !ctx.mainWindow.isDestroyed()
? ctx.mainWindow
: null;
const selection = mainWindow
? await dialog.showSaveDialog(mainWindow, options)
: await dialog.showSaveDialog(options);
if (selection.canceled || !selection.filePath) {
sendData(res, { status: 'cancelled' });
return;
}
const content = await ctx.imageWorkspace!.openAssetContent(workspaceId, assetId);
if (!content.ok || !content.body || !content.headers.get('content-type')?.startsWith('image/')) {
throw new DesignWorkspaceModuleError(
content.status >= 400 ? content.status : 502,
'DESIGN_ASSET_DOWNLOAD_FAILED',
'生成图片暂时无法下载,请稍后重试',
);
}
const temporaryPath = join(
dirname(selection.filePath),
`.${basename(selection.filePath)}.${randomUUID()}.download`,
);
try {
await pipeline(
Readable.fromWeb(content.body),
createWriteStream(temporaryPath, { flags: 'wx' }),
);
await rename(temporaryPath, selection.filePath);
} catch {
await rm(temporaryPath, { force: true }).catch(() => undefined);
throw new DesignWorkspaceModuleError(
500,
'DESIGN_ASSET_SAVE_FAILED',
'图片保存失败,请重新选择位置后重试',
);
}
sendData(res, { status: 'saved' });
}
function sendRouteError(res: ServerResponse, error: unknown): void {
if (res.headersSent) {
res.destroy(error instanceof Error ? error : undefined);
return;
}
if (error instanceof DesignWorkspaceModuleError) {
sendJson(res, error.status, {
success: false,
status: error.status,
code: error.code,
error: error.message,
});
return;
}
if (error instanceof SyntaxError) {
sendJson(res, 400, {
success: false,
status: 400,
code: 'IMAGE_WORKSPACE_INVALID_JSON',
error: '请求内容不是有效 JSON',
});
return;
}
sendJson(res, 500, {
success: false,
status: 500,
code: 'IMAGE_WORKSPACE_REQUEST_FAILED',
error: error instanceof Error ? error.message : 'AI 设计请求失败',
});
}
async function relayAssetContent(
req: IncomingMessage,
res: ServerResponse,
ctx: HostApiContext,
workspaceId: string,
assetId: string,
): Promise<void> {
const content = await ctx.imageWorkspace!.openAssetContent(
workspaceId,
assetId,
typeof req.headers.range === 'string' ? req.headers.range : undefined,
);
res.statusCode = content.status;
for (const header of [
'accept-ranges',
'cache-control',
'content-length',
'content-range',
'content-type',
'etag',
'last-modified',
]) {
const value = content.headers.get(header);
if (value) res.setHeader(header, value);
}
if (!content.body || req.method === 'HEAD') {
res.end();
return;
}
await pipeline(Readable.fromWeb(content.body), res);
}
async function relayWorkspaceEvents(
req: IncomingMessage,
res: ServerResponse,
ctx: HostApiContext,
workspaceId: string,
): Promise<void> {
if (!ctx.imageWorkspace?.openWorkspaceEvents) {
throw new DesignWorkspaceModuleError(
501,
'DESIGN_EVENT_STREAM_UNAVAILABLE',
'AI 设计任务实时状态暂时不可用',
);
}
const header = req.headers['last-event-id'];
const afterEventId = Array.isArray(header) ? header[0] : header;
const subscription = await ctx.imageWorkspace.openWorkspaceEvents({
workspaceId,
...(afterEventId ? { afterEventId } : {}),
});
let closed = false;
const close = () => {
if (closed) return;
closed = true;
subscription.close();
};
res.once('close', close);
try {
res.statusCode = 200;
res.setHeader('Content-Type', 'text/event-stream; charset=utf-8');
res.setHeader('Cache-Control', 'no-cache, no-transform');
res.setHeader('Connection', 'keep-alive');
res.setHeader('X-Accel-Buffering', 'no');
flushStreamingHeaders(res);
if (!await writeStreamingChunk(res, ': connected\n\n')) return;
for await (const event of subscription.events) {
if (!await writeStreamingChunk(
res,
`id: ${event.id}\nevent: ${event.type}\ndata: ${JSON.stringify(event)}\n\n`,
)) {
return;
}
}
if (!res.writableEnded) res.end();
} finally {
res.off('close', close);
close();
}
}
export async function handleImageWorkspaceRoutes(
req: IncomingMessage,
res: ServerResponse,
url: URL,
ctx: HostApiContext,
): Promise<boolean> {
if (url.pathname !== IMAGE_WORKSPACE_API_PATH
&& !url.pathname.startsWith(`${IMAGE_WORKSPACE_API_PATH}/`)) {
return false;
}
if (!ctx.imageWorkspace) {
sendJson(res, 501, {
success: false,
status: 501,
code: IMAGE_WORKSPACE_UNAVAILABLE_CODE,
error: IMAGE_WORKSPACE_UNAVAILABLE_MESSAGE,
});
return true;
}
const segments = decodedSegments(url.pathname);
if (!segments) {
sendJson(res, 400, { success: false, status: 400, error: '无效的 AI 设计路径' });
return true;
}
try {
if (segments.length === 0 && req.method === 'GET') {
sendData(res, await ctx.imageWorkspace.bootstrap());
return true;
}
if (segments.length === 1 && segments[0] === 'workspaces' && req.method === 'POST') {
const body = await parseJsonBody<Record<string, unknown>>(req);
const input: DesignCreateWorkspaceInput = {
clientWorkspaceId: asString(body.clientWorkspaceId),
title: asString(body.title),
};
sendData(res, await ctx.imageWorkspace.createWorkspace(input));
return true;
}
if (segments.length === 1 && segments[0] === 'local-data' && req.method === 'DELETE') {
if (!ctx.imageWorkspace.reset) {
throw new DesignWorkspaceModuleError(
405,
'IMAGE_WORKSPACE_RESET_NOT_ALLOWED',
'云端 AI 设计不支持清空本地数据',
);
}
sendData(res, await ctx.imageWorkspace.reset());
return true;
}
if (segments.length === 2 && segments[0] === 'workspaces' && req.method === 'GET') {
sendData(res, await ctx.imageWorkspace.getWorkspace(segments[1]));
return true;
}
if (segments.length === 2 && segments[0] === 'workspaces' && req.method === 'PATCH') {
const body = await parseJsonBody<Record<string, unknown>>(req);
const input: DesignRenameWorkspaceInput = {
workspaceId: segments[1],
title: asString(body.title),
};
sendData(res, await ctx.imageWorkspace.renameWorkspace(input));
return true;
}
if (segments.length === 3
&& segments[0] === 'workspaces'
&& segments[2] === 'messages'
&& req.method === 'POST') {
const body = await parseJsonBody<Record<string, unknown>>(req);
const input: DesignSubmitMessageInput = {
workspaceId: segments[1],
clientTurnId: asString(body.clientTurnId),
expectedTurnRevision: asInteger(body.expectedTurnRevision),
message: asString(body.message),
attachmentAssetIds: asStringArray(body.attachmentAssetIds),
};
sendData(res, await ctx.imageWorkspace.submitMessage(input));
return true;
}
if (segments.length === 3
&& segments[0] === 'workspaces'
&& segments[2] === 'tasks'
&& req.method === 'GET') {
sendData(res, await ctx.imageWorkspace.listTasks(segments[1]));
return true;
}
if (segments.length === 3
&& segments[0] === 'workspaces'
&& segments[2] === 'assets'
&& req.method === 'POST') {
if (!ctx.imageWorkspace.uploadAsset) {
throw new DesignWorkspaceModuleError(
501,
IMAGE_WORKSPACE_UNAVAILABLE_CODE,
'当前环境暂不支持上传设计图片',
);
}
const body = await parseAssetUploadBody(req);
sendData(
res,
await ctx.imageWorkspace.uploadAsset(decodeAssetUpload(segments[1], body)),
);
return true;
}
if (segments.length === 3
&& segments[0] === 'workspaces'
&& segments[2] === 'events'
&& req.method === 'GET') {
await relayWorkspaceEvents(req, res, ctx, segments[1]);
return true;
}
if (segments.length === 5
&& segments[0] === 'workspaces'
&& segments[2] === 'quotes'
&& segments[4] === 'confirm'
&& req.method === 'POST') {
const body = await parseJsonBody<Record<string, unknown>>(req);
const input: DesignConfirmGenerationInput = {
workspaceId: segments[1],
quoteId: segments[3],
clientTurnId: asString(body.clientTurnId),
expectedTurnRevision: asInteger(body.expectedTurnRevision),
};
sendData(res, await ctx.imageWorkspace.confirmGeneration(input));
return true;
}
if (segments.length === 5
&& segments[0] === 'workspaces'
&& segments[2] === 'assets'
&& segments[4] === 'content'
&& (req.method === 'GET' || req.method === 'HEAD')) {
await relayAssetContent(req, res, ctx, segments[1], segments[3]);
return true;
}
if (segments.length === 5
&& segments[0] === 'workspaces'
&& segments[2] === 'assets'
&& segments[4] === 'download'
&& req.method === 'POST') {
const body = await parseJsonBody<Record<string, unknown>>(req);
await saveAssetContent(
res,
ctx,
segments[1],
segments[3],
asString(body.defaultFileName),
);
return true;
}
sendJson(res, 404, {
success: false,
status: 404,
code: 'IMAGE_WORKSPACE_ROUTE_NOT_FOUND',
error: `没有对应的 AI 设计接口:${req.method ?? 'GET'} ${url.pathname}`,
});
} catch (error) {
sendRouteError(res, error);
}
return true;
}