Reubencf's picture
Minor changes
1ccbe14
/**
* API ROUTE: /api/hf-process
*
* HuggingFace model processing endpoint for the Nano Banana Editor.
* Handles image editing and generation using HuggingFace models.
*
* Supported Models:
* - black-forest-labs/FLUX.1-Kontext-dev: Image editing with context understanding
* - Qwen/Qwen-Image-Edit: Powerful image editing model
* - black-forest-labs/FLUX.1-dev: Text-to-image generation
*
* IMPORTANT LIMITATIONS:
* - These models only accept SINGLE images for editing
* - MERGE operations require Nano Banana (Gemini API) which accepts multiple images
* - Text-to-image (FLUX.1-dev) doesn't require input images
*/
import { NextRequest, NextResponse } from "next/server";
import { cookies } from "next/headers";
import { HfInference } from "@huggingface/inference";
// Configure Next.js runtime
export const runtime = "nodejs";
// Set maximum execution time for AI operations
export const maxDuration = 60;
/**
* Available HuggingFace models with their capabilities
*/
const HF_MODELS = {
"FLUX.1-Kontext-dev": {
id: "black-forest-labs/FLUX.1-Kontext-dev",
name: "FLUX.1 Kontext",
type: "image-to-image",
description: "Advanced image editing with context understanding",
supportsNodes: ["BACKGROUND", "CLOTHES", "STYLE", "EDIT", "CAMERA", "AGE", "FACE", "LIGHTNING", "POSES"],
},
"Qwen-Image-Edit": {
id: "Qwen/Qwen-Image-Edit",
name: "Qwen Image Edit",
type: "image-to-image",
description: "Powerful image editing and manipulation",
supportsNodes: ["BACKGROUND", "CLOTHES", "STYLE", "EDIT", "CAMERA", "AGE", "FACE", "LIGHTNING", "POSES"],
},
};
/**
* Parse base64 data URL into components
*/
function parseDataUrl(dataUrl: string): { mimeType: string; data: string } | null {
const match = dataUrl.match(/^data:(.*?);base64,(.*)$/);
if (!match) return null;
return {
mimeType: match[1] || "image/png",
data: match[2]
};
}
/**
* Convert base64 to Blob for HuggingFace API
*/
function base64ToBlob(base64: string, mimeType: string): Blob {
const byteCharacters = atob(base64);
const byteNumbers = new Array(byteCharacters.length);
for (let i = 0; i < byteCharacters.length; i++) {
byteNumbers[i] = byteCharacters.charCodeAt(i);
}
const byteArray = new Uint8Array(byteNumbers);
return new Blob([byteArray], { type: mimeType });
}
/**
* Main POST handler for HuggingFace model processing
*/
export async function POST(req: NextRequest) {
try {
// Parse request body
let body: {
type: string;
model: string;
image?: string;
prompt?: string;
params?: any;
};
try {
body = await req.json();
} catch (jsonError) {
console.error('[HF-API] Failed to parse JSON:', jsonError);
return NextResponse.json(
{ error: "Invalid JSON in request body" },
{ status: 400 }
);
}
// Get HF token from cookies
let hfToken: string | null = null;
try {
const cookieStore = await cookies();
const tokenCookie = cookieStore.get('hf_token');
hfToken = tokenCookie?.value || null;
} catch (error) {
console.error('Error reading HF token:', error);
}
if (!hfToken) {
return NextResponse.json(
{ error: "Please login with HuggingFace to use HF models. Click 'Login with HuggingFace' in the header." },
{ status: 401 }
);
}
// Validate model selection
const modelKey = body.model as keyof typeof HF_MODELS;
const modelConfig = HF_MODELS[modelKey];
if (!modelConfig) {
return NextResponse.json(
{ error: `Invalid model: ${body.model}. Available models: ${Object.keys(HF_MODELS).join(", ")}` },
{ status: 400 }
);
}
// Check for MERGE - not supported with HF models
if (body.type === "MERGE") {
return NextResponse.json(
{
error: "MERGE operations require Nano Banana (Gemini API). HuggingFace models only accept single images. Please switch to 'Nano Banana' mode and enter your Google Gemini API key to use MERGE functionality.",
requiresNanoBananaPro: true
},
{ status: 400 }
);
}
// Initialize HuggingFace client
const hf = new HfInference(hfToken);
// Handle text-to-image generation (FLUX.1-dev)
if (modelConfig.type === "text-to-image") {
const prompt = body.prompt || body.params?.characterDescription || "A professional portrait photo";
try {
const result = await hf.textToImage({
model: modelConfig.id,
inputs: prompt,
parameters: {
num_inference_steps: 28,
guidance_scale: 3.5,
},
});
// Result is a Blob, convert to base64
const resultBlob = result as unknown as Blob;
const arrayBuffer = await resultBlob.arrayBuffer();
const base64 = Buffer.from(arrayBuffer).toString('base64');
const dataUrl = `data:image/png;base64,${base64}`;
return NextResponse.json({ image: dataUrl });
} catch (hfError: any) {
console.error('[HF-API] Text-to-image error:', hfError);
return NextResponse.json(
{ error: `HuggingFace API error: ${hfError.message || 'Unknown error'}` },
{ status: 500 }
);
}
}
// Handle image-to-image editing
if (modelConfig.type === "image-to-image") {
// Validate input image
if (!body.image) {
return NextResponse.json(
{ error: "No input image provided. Please connect an image source to this node." },
{ status: 400 }
);
}
// Handle different image formats
let parsed: { mimeType: string; data: string } | null = null;
let imageUrl = body.image;
// Try parsing as Data URL first
parsed = parseDataUrl(imageUrl);
// If not a data URL, handle various URL formats
if (!parsed) {
// Convert relative paths to absolute URLs
if (imageUrl.startsWith('/')) {
const spaceHost = process.env.SPACE_HOST || 'localhost:3000';
const protocol = spaceHost.includes('localhost') ? 'http' : 'https';
imageUrl = `${protocol}://${spaceHost}${imageUrl}`;
console.log('[HF-API] Converted relative path to:', imageUrl);
}
// Fetch from HTTP(S) URL
if (imageUrl.startsWith('http://') || imageUrl.startsWith('https://')) {
try {
console.log('[HF-API] Fetching image from URL:', imageUrl.substring(0, 100));
const imageResponse = await fetch(imageUrl);
if (!imageResponse.ok) {
throw new Error(`Failed to fetch image: ${imageResponse.status}`);
}
const imageBuffer = await imageResponse.arrayBuffer();
const contentType = imageResponse.headers.get('content-type') || 'image/png';
const base64 = Buffer.from(imageBuffer).toString('base64');
parsed = { mimeType: contentType, data: base64 };
} catch (fetchErr) {
console.error('[HF-API] Failed to fetch image URL:', fetchErr);
}
}
}
if (!parsed) {
console.error('[HF-API] Invalid image format. Image starts with:', body.image?.substring(0, 50));
return NextResponse.json(
{ error: "Invalid image format. Expected a data URL (data:image/...) or HTTP URL. Please re-upload or reconnect your image." },
{ status: 400 }
);
}
// Build the editing prompt from parameters
const prompts: string[] = [];
const params = body.params || {};
// Background modifications
if (params.backgroundType) {
if (params.backgroundType === "color") {
prompts.push(`Change the background to a solid ${params.backgroundColor || "white"} color.`);
} else if (params.backgroundType === "custom" && params.customPrompt) {
prompts.push(params.customPrompt);
} else if (params.backgroundType === "city") {
prompts.push(`Place the person in a ${params.citySceneType || "busy city street"} during ${params.cityTimeOfDay || "daytime"}.`);
}
}
// Style application
if (params.stylePreset) {
const styleMap: { [key: string]: string } = {
"90s-anime": "Transform into 90s anime art style",
"mha": "Convert into My Hero Academia anime style",
"dbz": "Convert into Dragon Ball Z anime style",
"ukiyo-e": "Convert into Japanese Ukiyo-e woodblock print style",
"cubism": "Convert into Cubist art style",
"van-gogh": "Convert into Van Gogh post-impressionist style",
"simpsons": "Convert into The Simpsons cartoon style",
"family-guy": "Convert into Family Guy animation style",
"pixar": "Convert into Pixar animation style",
"manga": "Convert into Manga style",
};
const styleDescription = styleMap[params.stylePreset] || `Apply ${params.stylePreset} style`;
prompts.push(`${styleDescription} at ${params.styleStrength || 50}% intensity.`);
}
// Edit prompt
if (params.editPrompt) {
prompts.push(params.editPrompt);
}
// Clothing modifications
if (params.clothesPrompt) {
prompts.push(`Change clothing to: ${params.clothesPrompt}`);
}
// Age transformation
if (params.targetAge) {
prompts.push(`Transform the person to look ${params.targetAge} years old.`);
}
// Face modifications
if (params.faceOptions) {
const face = params.faceOptions;
const modifications: string[] = [];
if (face.removePimples) modifications.push("remove pimples");
if (face.addSunglasses) modifications.push("add sunglasses");
if (face.addHat) modifications.push("add a hat");
if (face.changeHairstyle) modifications.push(`change hairstyle to ${face.changeHairstyle}`);
if (face.facialExpression) modifications.push(`change expression to ${face.facialExpression}`);
if (modifications.length > 0) {
prompts.push(`Face modifications: ${modifications.join(", ")}`);
}
}
// Lighting effects
if (params.lightingPrompt) {
prompts.push(`Apply lighting: ${params.lightingPrompt}`);
}
// Pose modifications
if (params.posePrompt) {
prompts.push(`Change pose to: ${params.posePrompt}`);
}
const finalPrompt = prompts.length > 0
? prompts.join(" ")
: body.prompt || "Enhance this image with high quality output.";
try {
// Convert base64 to blob for HF API
const imageBlob = base64ToBlob(parsed.data, parsed.mimeType);
// Use image-to-image endpoint
const result = await hf.imageToImage({
model: modelConfig.id,
inputs: imageBlob,
parameters: {
prompt: finalPrompt,
num_inference_steps: 28,
guidance_scale: 7.5,
strength: 0.75,
},
});
// Convert result blob to base64
const arrayBuffer = await result.arrayBuffer();
const base64 = Buffer.from(arrayBuffer).toString('base64');
const dataUrl = `data:image/png;base64,${base64}`;
return NextResponse.json({ image: dataUrl });
} catch (hfError: any) {
console.error('[HF-API] Image-to-image error:', hfError);
// Provide helpful error messages
if (hfError.message?.includes('401') || hfError.message?.includes('unauthorized')) {
return NextResponse.json(
{ error: "HuggingFace authentication failed. Please logout and login again." },
{ status: 401 }
);
}
if (hfError.message?.includes('Model') && hfError.message?.includes('not')) {
return NextResponse.json(
{ error: `Model ${modelConfig.id} is not available or requires a Pro subscription.` },
{ status: 503 }
);
}
return NextResponse.json(
{ error: `HuggingFace API error: ${hfError.message || 'Unknown error'}` },
{ status: 500 }
);
}
}
return NextResponse.json(
{ error: "Unsupported operation type" },
{ status: 400 }
);
} catch (err: any) {
console.error("/api/hf-process error:", err);
return NextResponse.json(
{ error: `Failed to process: ${err?.message || 'Unknown error'}` },
{ status: 500 }
);
}
}
/**
* GET handler to return available models and their capabilities
*/
export async function GET() {
return NextResponse.json({
models: HF_MODELS,
note: "MERGE operations require Nano Banana (Gemini API) as it needs multi-image input which HuggingFace models don't support."
});
}