Browse Source
Multi-image NewAPIWG generations were sending base64 reference images
inside the /api/generate JSON body. Two ordinary canvas references can
push that payload near the dev/server body boundary, leaving the route
to parse an incomplete JSON string and surface a raw syntax error.
Move large NewAPIWG references through the existing in-memory image
serving path: the browser uploads large data URLs as multipart image
files, sends short /api/images/{id} URLs in the generation request, and
the route resolves those temporary URLs back to server-local image data
before calling providers. The route also turns malformed/truncated JSON
into a readable validation error.
Constraint: Keep provider payload semantics unchanged after /api/generate receives the request
Constraint: Do not rely on request origin matching because Next dev can report 0.0.0.0 while the browser uses localhost
Rejected: Increase body size limits only | still sends multi-MB JSON and does not protect hosted/proxied environments
Rejected: Compress reference images client-side | changes model input fidelity and still leaves large JSON possible
Confidence: high
Scope-risk: moderate
Directive: Do not forward /api/images/{id} temporary URLs to external providers; resolve them server-side first
Tested: npm run test:run -- src/store/execution/__tests__/nanoBananaExecutor.test.ts src/app/api/generate/__tests__/route.test.ts
Tested: npm run build
Not-tested: Live NewAPIWG generation with the user's exact two images
TEST-s
jiajia
2 months ago
7 changed files with 390 additions and 79 deletions
@ -0,0 +1,50 @@ |
|||
import { NextRequest, NextResponse } from "next/server"; |
|||
import { deleteImages, storeImage } from "@/lib/images"; |
|||
|
|||
function extensionFromMime(mimeType: string): string { |
|||
if (mimeType === "image/jpeg") return "jpg"; |
|||
if (mimeType === "image/webp") return "webp"; |
|||
if (mimeType === "image/gif") return "gif"; |
|||
return "png"; |
|||
} |
|||
|
|||
export async function POST(request: NextRequest): Promise<NextResponse> { |
|||
const formData = await request.formData(); |
|||
const file = formData.get("file"); |
|||
|
|||
if (!(file instanceof File)) { |
|||
return NextResponse.json( |
|||
{ success: false, error: "Missing image file" }, |
|||
{ status: 400 } |
|||
); |
|||
} |
|||
|
|||
if (!file.type.startsWith("image/")) { |
|||
return NextResponse.json( |
|||
{ success: false, error: "Only image uploads are supported" }, |
|||
{ status: 400 } |
|||
); |
|||
} |
|||
|
|||
const buffer = Buffer.from(await file.arrayBuffer()); |
|||
const dataUrl = `data:${file.type};base64,${buffer.toString("base64")}`; |
|||
const id = storeImage(dataUrl); |
|||
const url = `${request.nextUrl.origin}/api/images/${id}`; |
|||
|
|||
return NextResponse.json({ |
|||
success: true, |
|||
id, |
|||
url, |
|||
filename: file.name || `image.${extensionFromMime(file.type)}`, |
|||
}); |
|||
} |
|||
|
|||
export async function DELETE(request: NextRequest): Promise<NextResponse> { |
|||
const body = await request.json().catch(() => ({})); |
|||
const ids = Array.isArray(body.ids) |
|||
? body.ids.filter((id: unknown): id is string => typeof id === "string" && id.length > 0) |
|||
: []; |
|||
|
|||
deleteImages(ids); |
|||
return NextResponse.json({ success: true }); |
|||
} |
|||
@ -0,0 +1,36 @@ |
|||
import { getImage } from "./store"; |
|||
|
|||
function parseTemporaryImageId(url: string): string | null { |
|||
let parsed: URL; |
|||
try { |
|||
parsed = new URL(url); |
|||
} catch { |
|||
return null; |
|||
} |
|||
|
|||
// Do not fetch arbitrary URLs here. This only maps the random local image id
|
|||
// from /api/images/{id} back to the in-memory store.
|
|||
if (!parsed.pathname.startsWith("/api/images/")) { |
|||
return null; |
|||
} |
|||
|
|||
const id = decodeURIComponent(parsed.pathname.slice("/api/images/".length)); |
|||
return id || null; |
|||
} |
|||
|
|||
export function resolveTemporaryImageUrlToDataUrl(url: string): string | null { |
|||
const id = parseTemporaryImageId(url); |
|||
if (!id) return null; |
|||
|
|||
const image = getImage(id); |
|||
if (!image) return null; |
|||
return `data:${image.mimeType};base64,${Buffer.from(image.data).toString("base64")}`; |
|||
} |
|||
|
|||
export function resolveTemporaryImageUrlsInArray( |
|||
images: string[] | undefined |
|||
): string[] { |
|||
return (images || []).map((image) => |
|||
resolveTemporaryImageUrlToDataUrl(image) ?? image |
|||
); |
|||
} |
|||
@ -0,0 +1,95 @@ |
|||
const TEMP_IMAGE_UPLOAD_THRESHOLD_BYTES = 256 * 1024; |
|||
|
|||
type UploadedTemporaryImages = { |
|||
images: string[]; |
|||
cleanupIds: string[]; |
|||
}; |
|||
|
|||
function dataUrlMimeType(dataUrl: string): string | null { |
|||
return dataUrl.match(/^data:([^;]+);base64,/)?.[1] ?? null; |
|||
} |
|||
|
|||
function approximateDataUrlBytes(dataUrl: string): number { |
|||
const base64 = dataUrl.match(/^data:[^;]+;base64,(.+)$/)?.[1]; |
|||
if (!base64) return 0; |
|||
const padding = base64.endsWith("==") ? 2 : base64.endsWith("=") ? 1 : 0; |
|||
return Math.max(0, Math.floor((base64.length * 3) / 4) - padding); |
|||
} |
|||
|
|||
function dataUrlToBlob(dataUrl: string): Blob { |
|||
const match = dataUrl.match(/^data:([^;]+);base64,(.+)$/); |
|||
if (!match) throw new Error("Invalid image data URL"); |
|||
|
|||
const [, mimeType, base64] = match; |
|||
const binary = atob(base64); |
|||
const bytes = new Uint8Array(binary.length); |
|||
for (let i = 0; i < binary.length; i += 1) { |
|||
bytes[i] = binary.charCodeAt(i); |
|||
} |
|||
return new Blob([bytes], { type: mimeType }); |
|||
} |
|||
|
|||
function shouldUploadTemporaryImage(image: string): boolean { |
|||
return image.startsWith("data:image/") && |
|||
approximateDataUrlBytes(image) > TEMP_IMAGE_UPLOAD_THRESHOLD_BYTES; |
|||
} |
|||
|
|||
function extensionFromMime(mimeType: string | null): string { |
|||
if (mimeType === "image/jpeg") return "jpg"; |
|||
if (mimeType === "image/webp") return "webp"; |
|||
if (mimeType === "image/gif") return "gif"; |
|||
return "png"; |
|||
} |
|||
|
|||
async function uploadTemporaryImage(image: string): Promise<{ url: string; id: string }> { |
|||
const mimeType = dataUrlMimeType(image); |
|||
const blob = dataUrlToBlob(image); |
|||
const formData = new FormData(); |
|||
formData.append("file", blob, `reference.${extensionFromMime(mimeType)}`); |
|||
|
|||
const response = await fetch("/api/images/upload", { |
|||
method: "POST", |
|||
body: formData, |
|||
}); |
|||
|
|||
const result = await response.json().catch(() => null) as |
|||
| { success?: boolean; url?: string; id?: string; error?: string } |
|||
| null; |
|||
|
|||
if (!response.ok || !result?.success || !result.id) { |
|||
throw new Error(result?.error || "Failed to prepare reference image"); |
|||
} |
|||
|
|||
const sameOriginUrl = typeof window !== "undefined" |
|||
? `${window.location.origin}/api/images/${encodeURIComponent(result.id)}` |
|||
: result.url; |
|||
if (!sameOriginUrl) throw new Error("Failed to prepare reference image"); |
|||
|
|||
return { url: sameOriginUrl, id: result.id }; |
|||
} |
|||
|
|||
export async function uploadTemporaryImagesForGeneration( |
|||
images: string[] |
|||
): Promise<UploadedTemporaryImages> { |
|||
const cleanupIds: string[] = []; |
|||
const preparedImages = await Promise.all( |
|||
images.map(async (image) => { |
|||
if (!shouldUploadTemporaryImage(image)) return image; |
|||
const uploaded = await uploadTemporaryImage(image); |
|||
cleanupIds.push(uploaded.id); |
|||
return uploaded.url; |
|||
}) |
|||
); |
|||
|
|||
return { images: preparedImages, cleanupIds }; |
|||
} |
|||
|
|||
export async function cleanupTemporaryImages(ids: string[]): Promise<void> { |
|||
if (ids.length === 0) return; |
|||
|
|||
await fetch("/api/images/upload", { |
|||
method: "DELETE", |
|||
headers: { "Content-Type": "application/json" }, |
|||
body: JSON.stringify({ ids }), |
|||
}).catch(() => undefined); |
|||
} |
|||
Loading…
Reference in new issue