Upload 42 files

.gitattributes

@@ -34,3 +34,15 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
 public/sukajan.png filter=lfs diff=lfs merge=lfs -text
+public/clothes/suit.png filter=lfs diff=lfs merge=lfs -text
+public/clothes/sukajan.png filter=lfs diff=lfs merge=lfs -text
+public/clothes/womenoutfit.png filter=lfs diff=lfs merge=lfs -text
+public/lighting/light1.png filter=lfs diff=lfs merge=lfs -text
+public/lighting/light2.png filter=lfs diff=lfs merge=lfs -text
+public/lighting/light3.png filter=lfs diff=lfs merge=lfs -text
+public/makeup/makeup1.png filter=lfs diff=lfs merge=lfs -text
+public/poses/sit1.png filter=lfs diff=lfs merge=lfs -text
+public/poses/sit2.png filter=lfs diff=lfs merge=lfs -text
+public/poses/stand1.png filter=lfs diff=lfs merge=lfs -text
+public/poses/stand2.png filter=lfs diff=lfs merge=lfs -text
+public/reo.png filter=lfs diff=lfs merge=lfs -text

app/api/auth/callback/route.ts

@@ -0,0 +1,73 @@
+import { NextRequest, NextResponse } from "next/server";
+import { cookies } from "next/headers";
+
+export async function GET(req: NextRequest) {
+  const url = new URL(req.url);
+  const code = url.searchParams.get('code');
+  
+  if (code) {
+    // This is an OAuth redirect, redirect to main page for client-side handling
+    return NextResponse.redirect(new URL('/', req.url));
+  } else {
+    // This is a status check request
+    try {
+      const cookieStore = await cookies();
+      const hfToken = cookieStore.get('hf_token');
+      
+      return NextResponse.json({ 
+        isLoggedIn: !!hfToken?.value,
+        hasToken: !!hfToken?.value 
+      });
+    } catch (error) {
+      console.error('Error checking HF token:', error);
+      return NextResponse.json({ isLoggedIn: false, hasToken: false });
+    }
+  }
+}
+
+export async function POST(req: NextRequest) {
+  try {
+    const { hf_token } = await req.json();
+    
+    if (!hf_token || typeof hf_token !== "string") {
+      return NextResponse.json(
+        { error: "Invalid or missing HF token" },
+        { status: 400 }
+      );
+    }
+    
+    // Store the token in a secure HTTP-only cookie
+    const cookieStore = await cookies();
+    cookieStore.set({
+      name: 'hf_token',
+      value: hf_token,
+      httpOnly: true,
+      secure: process.env.NODE_ENV === 'production',
+      sameSite: 'lax',
+      maxAge: 60 * 60 * 24 * 30 // 30 days
+    });
+    
+    return NextResponse.json({ success: true });
+  } catch (error) {
+    console.error('Error storing HF token:', error);
+    return NextResponse.json(
+      { error: "Failed to store token" },
+      { status: 500 }
+    );
+  }
+}
+
+export async function DELETE() {
+  try {
+    const cookieStore = await cookies();
+    cookieStore.delete('hf_token');
+    
+    return NextResponse.json({ success: true });
+  } catch (error) {
+    console.error('Error deleting HF token:', error);
+    return NextResponse.json(
+      { error: "Failed to logout" },
+      { status: 500 }
+    );
+  }
+}

app/api/generate/route.ts

@@ -1,11 +1,35 @@
+/**
+ * API ROUTE: /api/generate
+ * 
+ * Text-to-image generation endpoint using Google's Gemini AI model.
+ * Generates new images from natural language descriptions.
+ * 
+ * Input: JSON with text prompt and optional API token
+ * Output: JSON with generated image(s) as base64 data URLs
+ * 
+ * Example usage:
+ * POST /api/generate
+ * { "prompt": "A professional portrait photo of a person in business attire" }
+ */
+
 import { NextRequest, NextResponse } from "next/server";
 import { GoogleGenAI } from "@google/genai";
 
-export const runtime = "nodejs"; // Ensure Node runtime for SDK
+// Configure Next.js runtime for Node.js (required for Google AI SDK)
+export const runtime = "nodejs";
 
+/**
+ * Handle POST requests for image generation
+ * 
+ * @param req NextJS request object with JSON body containing prompt and optional API token
+ * @returns JSON response with generated images or error message
+ */
 export async function POST(req: NextRequest) {
   try {
+    // Parse and validate request body
     const { prompt, apiToken } = (await req.json()) as { prompt?: string; apiToken?: string };
+    
+    // Validate required prompt parameter
     if (!prompt || typeof prompt !== "string") {
       return NextResponse.json(
         { error: "Missing prompt" },
@@ -13,7 +37,7 @@ export async function POST(req: NextRequest) {
       );
     }
 
-    // Use user-provided API token or fall back to environment variable
+    // Validate and retrieve API key from user input or environment
     const apiKey = apiToken || process.env.GOOGLE_API_KEY;
     if (!apiKey || apiKey === 'your_api_key_here') {
       return NextResponse.json(
@@ -22,26 +46,34 @@ export async function POST(req: NextRequest) {
       );
     }
 
+    // Initialize Google AI client
     const ai = new GoogleGenAI({ apiKey });
 
+    // Generate image using Gemini's image generation model
     const response = await ai.models.generateContent({
-      model: "gemini-2.5-flash-image-preview",
-      contents: prompt,
+      model: "gemini-2.5-flash-image-preview",  // Latest image generation model
+      contents: prompt,                         // Natural language description
     });
 
+    // Parse response to extract images and text
     const parts = (response as any)?.candidates?.[0]?.content?.parts ?? [];
-    const images: string[] = [];
-    const texts: string[] = [];
+    const images: string[] = [];  // Array to store generated images as data URLs
+    const texts: string[] = [];   // Array to store any text responses
 
+    // Process each part of the response
     for (const part of parts) {
       if (part?.inlineData?.data) {
+        // Convert base64 image data to data URL format
         images.push(`data:image/png;base64,${part.inlineData.data}`);
       } else if (part?.text) {
+        // Collect any text explanations or descriptions
         texts.push(part.text as string);
       }
     }
 
+    // Return generated content to client
     return NextResponse.json({ images, text: texts.join("\n") });
+    
   } catch (err) {
     console.error("/api/generate error", err);
     return NextResponse.json(

app/api/improve-prompt/route.ts

@@ -0,0 +1,110 @@
+/**
+ * API ROUTE: /api/improve-prompt
+ * 
+ * Uses Gemini 2.5 Flash to improve user prompts for better AI image generation.
+ * Takes a basic prompt and enhances it with more detailed, descriptive language
+ * that will produce better results from image generation models.
+ */
+
+import { NextRequest, NextResponse } from "next/server";
+import { GoogleGenAI } from "@google/genai";
+import { cookies } from "next/headers";
+
+export const runtime = "nodejs";
+export const maxDuration = 30;
+
+export async function POST(req: NextRequest) {
+  try {
+    const body = await req.json() as {
+      prompt: string;
+      type?: string; // 'background', 'edit', etc.
+    };
+
+    if (!body.prompt?.trim()) {
+      return NextResponse.json(
+        { error: "Prompt is required" },
+        { status: 400 }
+      );
+    }
+
+    // Check if user is logged in with HF Pro
+    let isHfProUser = false;
+    try {
+      const cookieStore = await cookies();
+      const hfToken = cookieStore.get('hf_token');
+      isHfProUser = !!hfToken?.value;
+    } catch (error) {
+      console.error('Error reading HF token from cookies:', error);
+    }
+
+    // Get API key
+    const apiKey = process.env.GOOGLE_API_KEY;
+    if (!apiKey || apiKey === 'your_actual_api_key_here') {
+      return NextResponse.json(
+        { error: `API key not configured. Please ${isHfProUser ? 'contact support' : 'login with HF Pro'}.` },
+        { status: 500 }
+      );
+    }
+
+    const ai = new GoogleGenAI({ apiKey });
+
+    // Create context-specific improvement prompts
+    const contextPrompts = {
+      background: `You are an expert at writing prompts for AI image generation. Take the following simple background description and transform it into a detailed, vivid prompt that will generate stunning, realistic backgrounds.
+
+Focus on:
+- Visual details (lighting, colors, textures, atmosphere)
+- Composition and depth
+- Realistic environmental elements
+- Photography/cinematic quality terms
+- Maintaining the character while enhancing the background
+
+Keep the character image and background realistic. Make the description rich and specific but not overly complex.
+
+Original prompt: "${body.prompt}"
+
+Write a short and concise improved background generation prompt and do not include anything unnecessary:`,
+
+      edit: `You are an expert at writing prompts for AI image editing. Take the following simple editing request and transform it into a clear, detailed prompt that will produce precise, high-quality image modifications.
+Original prompt: "${body.prompt}" Return a short and concise improved editing prompt and do not include anything unnecessary:`,
+
+      default: `You are an expert at writing prompts for AI image generation and editing. Take the following simple prompt and transform it into a detailed, effective prompt that will produce better results.
+
+Focus on:
+- Clear, specific instructions
+- Visual details and quality descriptors
+- Professional terminology
+- Realistic and natural-looking results
+
+Original prompt: "${body.prompt}"
+
+Write an improved prompt:`
+    };
+
+    const improvementPrompt = contextPrompts[body.type as keyof typeof contextPrompts] || contextPrompts.default;
+
+    const response = await ai.models.generateContent({
+      model: "gemini-2.5-flash",
+      contents: [{ role: "user", parts: [{ text: improvementPrompt }] }],
+    });
+
+    const improvedPrompt = response?.text?.trim();
+
+    if (!improvedPrompt) {
+      return NextResponse.json(
+        { error: "Failed to generate improved prompt" },
+        { status: 500 }
+      );
+    }
+
+    return NextResponse.json({ improvedPrompt });
+
+  } catch (error: any) {
+    console.error('[API] improve-prompt error:', error);
+    
+    return NextResponse.json(
+      { error: "Failed to improve prompt. Please try again." },
+      { status: 500 }
+    );
+  }
+}

app/api/merge/route.ts

@@ -1,32 +1,66 @@
+/**
+ * API ROUTE: /api/merge (DEPRECATED - functionality moved to /api/process)
+ * 
+ * Legacy endpoint for merging multiple character images into cohesive group photos.
+ * This functionality is now handled by the main /api/process endpoint with type="MERGE".
+ * Kept for backwards compatibility.
+ * 
+ * Input: JSON with array of image URLs/data and optional custom prompt
+ * Output: JSON with merged group photo as base64 data URL
+ */
+
 import { NextRequest, NextResponse } from "next/server";
 import { GoogleGenAI } from "@google/genai";
 
+// Configure Next.js runtime for Node.js (required for Google AI SDK)
 export const runtime = "nodejs";
 
+/**
+ * Parse base64 data URL into MIME type and data components
+ * Handles data URLs in the format: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA...
+ * 
+ * @param dataUrl Complete data URL string
+ * @returns Object with mimeType and data, or null if invalid format
+ */
 function parseDataUrl(dataUrl: string): { mimeType: string; data: string } | null {
-  // data:[<mediatype>][;base64],<data>
-  const match = dataUrl.match(/^data:(.*?);base64,(.*)$/);
-  if (!match) return null;
-  return { mimeType: match[1] || "image/png", data: match[2] };
+  const match = dataUrl.match(/^data:(.*?);base64,(.*)$/);  // Extract MIME type and base64 data
+  if (!match) return null;  // Invalid data URL format
+  return { 
+    mimeType: match[1] || "image/png",  // Use extracted MIME type or default to PNG
+    data: match[2]                      // Base64 encoded image data
+  };
 }
 
+/**
+ * Convert various image URL formats to inline data format required by Gemini AI
+ * 
+ * Supports:
+ * - Data URLs (data:image/png;base64,...)
+ * - HTTP/HTTPS URLs (fetches and converts to base64)
+ * 
+ * @param url Image URL in any supported format
+ * @returns Promise resolving to inline data object or null on failure
+ */
 async function toInlineData(url: string): Promise<{ mimeType: string; data: string } | null> {
   try {
+    // Handle data URLs directly
     if (url.startsWith('data:')) {
       return parseDataUrl(url);
     }
+    
+    // Handle HTTP URLs by fetching and converting to base64
     if (url.startsWith('http')) {
-      // Fetch HTTP URL and convert to base64
-      const res = await fetch(url);
-      const buf = await res.arrayBuffer();
-      const base64 = Buffer.from(buf).toString('base64');
-      const mimeType = res.headers.get('content-type') || 'image/jpeg';
+      const res = await fetch(url);                                    // Fetch image from URL
+      const buf = await res.arrayBuffer();                             // Get binary data
+      const base64 = Buffer.from(buf).toString('base64');              // Convert to base64
+      const mimeType = res.headers.get('content-type') || 'image/jpeg'; // Get MIME type from headers
       return { mimeType, data: base64 };
     }
-    return null;
+    
+    return null;  // Unsupported URL format
   } catch (e) {
     console.error('Failed to process image URL:', url.substring(0, 100), e);
-    return null;
+    return null;  // Return null on any processing error
   }
 }
 
@@ -94,12 +128,6 @@ The result should look like all subjects were photographed together in the same
     }
 
     // Debug: Log what we're receiving
-    console.log(`[MERGE API] Received ${imgs.length} images to merge`);
-    console.log(`[MERGE API] Image types:`, imgs.map(img => {
-      if (img.startsWith('data:')) return 'data URL';
-      if (img.startsWith('http')) return 'HTTP URL';
-      return 'unknown';
-    }));
     
     const parts: any[] = [{ text: prompt }];
     for (const url of imgs) {
@@ -111,8 +139,6 @@ The result should look like all subjects were photographed together in the same
       parts.push({ inlineData: { mimeType: parsed.mimeType, data: parsed.data } });
     }
     
-    console.log(`[MERGE API] Sending ${parts.length - 1} images to model (prompt + images)`);
-    console.log(`[MERGE API] Prompt preview:`, prompt.substring(0, 200));
 
     const response = await ai.models.generateContent({
       model: "gemini-2.5-flash-image-preview",

app/api/process/route.ts

@@ -1,32 +1,75 @@
+/**
+ * API ROUTE: /api/process
+ * 
+ * Main image processing endpoint for the Nano Banana Editor.
+ * Handles all image transformation operations using Google's Gemini AI model.
+ *   
+ * Supported Operations:
+ * - MERGE: Combine multiple character images into a cohesive group photo
+ * - COMBINED: Apply multiple transformations in a single API call
+ * - Background changes (color, preset, custom, AI-generated)
+ * - Clothing modifications using reference images
+ * - Artistic style transfers (anime, cyberpunk, van gogh, etc.)
+ * - Text-based editing with natural language prompts
+ * - Camera effects and photographic settings
+ * - Age transformations
+ * - Face modifications (expressions, accessories, hair, etc.)
+ * 
+ * Input: JSON with image data, operation type, and parameters
+ * Output: JSON with processed image(s) as base64 data URLs
+ */
+
 import { NextRequest, NextResponse } from "next/server";
 import { GoogleGenAI } from "@google/genai";
+import { cookies } from "next/headers";
 
+// Configure Next.js runtime for Node.js (required for Google AI SDK)
 export const runtime = "nodejs";
 
-// Increase the body size limit to 50MB for large images
-export const maxDuration = 60; // 60 seconds timeout
+// Set maximum execution time to 60 seconds for complex AI operations
+export const maxDuration = 60;
 
+/**
+ * Parse base64 data URL into components
+ * 
+ * Extracts MIME type and base64 data from data URLs like:
+ * "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA..."
+ * 
+ * @param dataUrl The data URL string to parse
+ * @returns Object with mimeType and data, or null if invalid
+ */
 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] };
+  const match = dataUrl.match(/^data:(.*?);base64,(.*)$/);  // Regex to capture MIME type and data
+  if (!match) return null;                                   // Invalid format
+  return { 
+    mimeType: match[1] || "image/png",  // Default to PNG if no MIME type
+    data: match[2]                      // Base64 image data
+  };
 }
 
+/**
+ * Main POST handler for image processing requests
+ * 
+ * Processes incoming image transformation requests through Google's Gemini AI.
+ * Handles both single-image operations and multi-image merging.
+ * 
+ * @param req NextJS request object containing JSON body with image data and parameters
+ * @returns JSON response with processed image(s) or error message
+ */
 export async function POST(req: NextRequest) {
   try {
-    // Log request size for debugging
-    const contentLength = req.headers.get('content-length');
-    console.log(`[API] Request size: ${contentLength} bytes`);
+    // Log incoming request size for debugging and monitoring
     
+    // Parse and validate the JSON request body
     let body: any;
     try {
       body = await req.json() as {
-        type: string;
-        image?: string;
-        images?: string[];
-        prompt?: string;
-        params?: any;
-        apiToken?: string;
+        type: string;        // Operation type: "MERGE", "COMBINED", etc.
+        image?: string;      // Single image for processing (base64 data URL)
+        images?: string[];   // Multiple images for merge operations
+        prompt?: string;     // Custom text prompt for AI
+        params?: any;        // Node-specific parameters (background, clothes, etc.)
+        apiToken?: string;   // User's Google AI API token
       };
     } catch (jsonError) {
       console.error('[API] Failed to parse JSON:', jsonError);
@@ -36,50 +79,90 @@ export async function POST(req: NextRequest) {
       );
     }
 
-    // Use user-provided API token or fall back to environment variable
+    // Check if user is logged in with HF Pro (for premium features)
+    let isHfProUser = false;
+    try {
+      const cookieStore = await cookies();
+      const hfToken = cookieStore.get('hf_token');
+      isHfProUser = !!hfToken?.value;
+    } catch (error) {
+      console.error('Error reading HF token from cookies:', error);
+    }
+
+    // Validate and retrieve Google API key from user input or environment
     const apiKey = body.apiToken || process.env.GOOGLE_API_KEY;
     if (!apiKey || apiKey === 'your_actual_api_key_here') {
       return NextResponse.json(
-        { error: "API key not provided. Please enter your Hugging Face API token in the top right corner or add GOOGLE_API_KEY to .env.local file." },
+        { error: `API key not provided. Please ${isHfProUser ? 'enter your Google Gemini API token in the top right' : 'login with HF Pro or enter your Google Gemini API token'}.` },
         { status: 500 }
       );
     }
 
+    // Initialize Google AI client with the validated API key
     const ai = new GoogleGenAI({ apiKey });
     
-    // Helpers
+    /**
+     * Universal image data converter
+     * 
+     * Converts various image input formats to the inline data format required by Gemini AI.
+     * Handles multiple input types for maximum flexibility:
+     * 
+     * @param url Image source: data URL, HTTP URL, or relative path
+     * @returns Promise resolving to {mimeType, data} object or null if conversion fails
+     */
     const toInlineDataFromAny = async (url: string): Promise<{ mimeType: string; data: string } | null> => {
-      if (!url) return null;
+      if (!url) return null;  // Handle empty/null input
+      
       try {
+        // Case 1: Data URL (data:image/png;base64,...)
         if (url.startsWith('data:')) {
-          return parseDataUrl(url);
+          return parseDataUrl(url);  // Use existing parser for data URLs
         }
+        
+        // Case 2: HTTP/HTTPS URL (external image)
         if (url.startsWith('http')) {
-          const res = await fetch(url);
-          const buf = await res.arrayBuffer();
-          const base64 = Buffer.from(buf).toString('base64');
-          const mimeType = res.headers.get('content-type') || 'image/jpeg';
+          const res = await fetch(url);                                    // Fetch external image
+          const buf = await res.arrayBuffer();                             // Get binary data
+          const base64 = Buffer.from(buf).toString('base64');              // Convert to base64
+          const mimeType = res.headers.get('content-type') || 'image/jpeg'; // Get MIME type from headers
           return { mimeType, data: base64 };
         }
+        
+        // Case 3: Relative path (local image on server)
         if (url.startsWith('/')) {
-          const host = req.headers.get('host') ?? 'localhost:3000';
-          const proto = req.headers.get('x-forwarded-proto') ?? 'http';
-          const absolute = `${proto}://${host}${url}`;
-          const res = await fetch(absolute);
-          const buf = await res.arrayBuffer();
-          const base64 = Buffer.from(buf).toString('base64');
-          const mimeType = res.headers.get('content-type') || 'image/png';
+          const host = req.headers.get('host') ?? 'localhost:3000';        // Get current host
+          const proto = req.headers.get('x-forwarded-proto') ?? 'http';    // Determine protocol
+          const absolute = `${proto}://${host}${url}`;                     // Build absolute URL
+          const res = await fetch(absolute);                               // Fetch local image
+          const buf = await res.arrayBuffer();                             // Get binary data
+          const base64 = Buffer.from(buf).toString('base64');              // Convert to base64
+          const mimeType = res.headers.get('content-type') || 'image/png'; // Get MIME type
           return { mimeType, data: base64 };
         }
-        return null;
+        
+        return null;  // Unsupported URL format
       } catch {
-        return null;
+        return null;  // Handle any conversion errors gracefully
       }
     };
 
-    // Handle MERGE node type separately
+    /* ========================================
+       MERGE OPERATION - MULTI-IMAGE PROCESSING
+       ======================================== */
+    
+    /**
+     * Handle MERGE node type separately from single-image operations
+     * 
+     * MERGE operations combine multiple character images into a single cohesive group photo.
+     * This requires special handling because:
+     * - Multiple input images need to be processed simultaneously
+     * - AI must understand how to naturally blend subjects together
+     * - Lighting, perspective, and scale must be consistent across all subjects
+     */
     if (body.type === "MERGE") {
-      const imgs = body.images?.filter(Boolean) ?? [];
+      const imgs = body.images?.filter(Boolean) ?? [];  // Remove any null/undefined images
+      
+      // Validate minimum input requirement for merge operations
       if (imgs.length < 2) {
         return NextResponse.json(
           { error: "MERGE requires at least two images" },
@@ -87,8 +170,8 @@ export async function POST(req: NextRequest) {
         );
       }
 
-      // Build parts array for merge: first the text prompt, then image inlineData parts
-      let mergePrompt = body.prompt;
+      // Determine the AI prompt for merge operation
+      let mergePrompt = body.prompt;  // Use custom prompt if provided
       
       if (!mergePrompt) {
         mergePrompt = `MERGE TASK: Create a natural, cohesive group photo combining ALL subjects from ${imgs.length} provided images.
@@ -125,7 +208,6 @@ The result should look like all subjects were photographed together in the same
       const mergeParts: any[] = [{ text: mergePrompt }];
       for (let i = 0; i < imgs.length; i++) {
         const url = imgs[i];
-        console.log(`[MERGE] Processing image ${i + 1}/${imgs.length}, type: ${typeof url}, length: ${url?.length || 0}`);
         
         try {
           const parsed = await toInlineDataFromAny(url);
@@ -134,13 +216,11 @@ The result should look like all subjects were photographed together in the same
             continue;
           }
           mergeParts.push({ inlineData: { mimeType: parsed.mimeType, data: parsed.data } });
-          console.log(`[MERGE] Successfully processed image ${i + 1}`);
         } catch (error) {
           console.error(`[MERGE] Error processing image ${i + 1}:`, error);
         }
       }
       
-      console.log(`[MERGE] Sending ${mergeParts.length - 1} images to model`);
 
       const response = await ai.models.generateContent({
         model: "gemini-2.5-flash-image-preview",
@@ -182,28 +262,172 @@ The result should look like all subjects were photographed together in the same
     const prompts: string[] = [];
     const params = body.params || {};
 
+    // Debug: Log all received parameters
+
     // We'll collect additional inline image parts (references)
     const referenceParts: { inlineData: { mimeType: string; data: string } }[] = [];
     
     // Background modifications
     if (params.backgroundType) {
       const bgType = params.backgroundType;
+      
       if (bgType === "color") {
-        prompts.push(`Change the background to a solid ${params.backgroundColor || "white"} background.`);
+        prompts.push(`Change the background to a solid ${params.backgroundColor || "white"} background with smooth, even color coverage.`);
+        
+      } else if (bgType === "gradient") {
+        const direction = params.gradientDirection || "to right";
+        const startColor = params.gradientStartColor || "#ff6b6b";
+        const endColor = params.gradientEndColor || "#4ecdc4";
+        
+        if (direction === "radial") {
+          prompts.push(`Replace the background with a radial gradient that starts with ${startColor} in the center and transitions smoothly to ${endColor} at the edges, creating a circular gradient effect.`);
+        } else {
+          prompts.push(`Replace the background with a linear gradient flowing ${direction}, starting with ${startColor} and smoothly transitioning to ${endColor}.`);
+        }
+        
       } else if (bgType === "image") {
         prompts.push(`Change the background to ${params.backgroundImage || "a beautiful beach scene"}.`);
+        
+      } else if (bgType === "city") {
+        const sceneType = params.citySceneType || "busy_street";
+        const timeOfDay = params.cityTimeOfDay || "daytime";
+        
+        let cityDescription = "";
+        
+        switch (sceneType) {
+          case "busy_street":
+            cityDescription = "a realistic busy city street with people walking at various distances around the main character. Include pedestrians in business attire, casual clothing, carrying bags and phones - some walking close by (appearing similar size to main character), others further in the background (appearing smaller due to distance). Show urban storefronts, traffic lights, street signs, and parked cars with authentic city atmosphere and proper depth perception";
+            break;
+          case "tokyo_shibuya":
+            cityDescription = "the iconic Tokyo Shibuya Crossing with people walking at various distances around the main character. Include people close by (similar scale to main character) and others further away (smaller due to distance), Japanese signage, neon advertisements, the famous scramble crossing zebra stripes, people in typical Tokyo fashion, some wearing masks, carrying colorful umbrellas. Show the massive LED screens, buildings towering above, and create proper depth with people at different distances creating natural perspective";
+            break;
+          case "tokyo_subway":
+            cityDescription = "a realistic Tokyo subway environment with commuters at various distances from the main character. Include people nearby (similar scale) and others further down corridors (smaller due to perspective), authentic Japanese subway tile walls, directional signage in Japanese, the distinctive Tokyo Metro design aesthetic, and proper depth showing the underground transit system's scale and architecture";
+            break;
+          case "times_square":
+            cityDescription = "Times Square NYC with bright LED billboards, street performers, tourists, and New Yorkers walking closely around the main character. Include authentic yellow taxi cabs, hot dog vendors, people taking selfies, Broadway theater marquees, the famous red steps, TKTS booth, and the overwhelming sensory experience of NYC's most famous intersection";
+            break;
+          case "downtown_skyline":
+            cityDescription = "a downtown city skyline with tall buildings, glass towers, and urban architecture in the background while people in business attire walk nearby on the sidewalk";
+            break;
+          case "urban_crosswalk":
+            cityDescription = "an urban crosswalk intersection with pedestrians of diverse backgrounds crossing around the main character, traffic lights, crosswalk signals, city buses, and the natural flow of city foot traffic";
+            break;
+          case "shopping_district":
+            cityDescription = "a bustling shopping district with people carrying shopping bags walking near the main character, storefront window displays, outdoor cafes, street vendors, and the lively atmosphere of commercial city life";
+            break;
+          case "city_park":
+            cityDescription = "a city park with people jogging, walking dogs, and families enjoying activities around the main character, with urban skyscrapers visible in the background through the trees";
+            break;
+          case "rooftop_view":
+            cityDescription = "a rooftop terrace with people socializing around the main character, overlooking a sprawling city skyline with twinkling lights and urban architecture stretching to the horizon";
+            break;
+          case "blade_runner_street":
+            cityDescription = "a cinematic Blade Runner-inspired street scene with neon-soaked alleyways, people in futuristic clothing walking through steam and rain around the main character. Include holographic advertisements, flying vehicles in the distance, Asian-influenced signage, dark atmospheric lighting with cyan and magenta neon reflections on wet pavement, and the dystopian cyberpunk aesthetic of the iconic film";
+            break;
+          case "matrix_alley":
+            cityDescription = "a Matrix-inspired urban alley with people in dark clothing and sunglasses walking purposefully around the main character. Include the distinctive green-tinted lighting, concrete brutalist architecture, fire escapes, urban decay, shadowy doorways, and the cold, digital atmosphere of the Matrix films with realistic but slightly stylized cinematography";
+            break;
+          default:
+            cityDescription = "a dynamic city environment with people walking naturally around the main character in an authentic urban setting";
+        }
+        
+        let timeDescription = "";
+        switch (timeOfDay) {
+          case "golden_hour":
+            timeDescription = " during golden hour with warm, glowing sunlight";
+            break;
+          case "daytime":
+            timeDescription = " during bright daytime with clear lighting";
+            break;
+          case "blue_hour":
+            timeDescription = " during blue hour with twilight atmosphere";
+            break;
+          case "night":
+            timeDescription = " at night with city lights, illuminated windows, and neon glow";
+            break;
+          case "dawn":
+            timeDescription = " at dawn with soft morning light";
+            break;
+          case "overcast":
+            timeDescription = " on an overcast day with diffused lighting";
+            break;
+          default:
+            timeDescription = "";
+        }
+        
+        prompts.push(`Replace the background with ${cityDescription}${timeDescription}. CRITICAL SCALE REQUIREMENTS: Keep the main character at their EXACT original size and position - do NOT make them smaller or change their scale. The background people should be appropriately sized relative to their distance from the camera, with people closer to the camera appearing larger and people further away appearing smaller, but the main character must maintain their original proportions. Ensure the main character appears naturally integrated into the scene with proper lighting, shadows, and perspective that matches the environment.`);
+        
+      } else if (bgType === "photostudio") {
+        const setup = params.studioSetup || "white_seamless";
+        const lighting = params.studioLighting || "key_fill";
+        const faceCamera = params.faceCamera || false;
+        
+        let setupDescription = "";
+        switch (setup) {
+          case "white_seamless":
+            setupDescription = "a professional white seamless paper backdrop";
+            break;
+          case "black_seamless":
+            setupDescription = "a professional black seamless paper backdrop";
+            break;
+          case "grey_seamless":
+            setupDescription = "a professional grey seamless paper backdrop";
+            break;
+          case "colored_seamless":
+            const bgColor = params.studioBackgroundColor || "#ffffff";
+            setupDescription = `a professional seamless paper backdrop in ${bgColor}`;
+            break;
+          case "textured_backdrop":
+            setupDescription = "a professional textured photography backdrop";
+            break;
+          case "infinity_cove":
+            setupDescription = "a professional infinity cove studio setup with curved backdrop";
+            break;
+          default:
+            setupDescription = "a professional studio backdrop";
+        }
+        
+        let lightingDescription = "";
+        switch (lighting) {
+          case "key_fill":
+            lightingDescription = "key and fill lighting for balanced illumination";
+            break;
+          case "three_point":
+            lightingDescription = "three-point lighting with key, fill, and rim lights";
+            break;
+          case "beauty_lighting":
+            lightingDescription = "beauty lighting setup with soft, flattering illumination";
+            break;
+          case "dramatic_lighting":
+            lightingDescription = "dramatic single-light setup with strong shadows";
+            break;
+          case "soft_lighting":
+            lightingDescription = "soft, diffused lighting for gentle illumination";
+            break;
+          case "hard_lighting":
+            lightingDescription = "hard, directional lighting for sharp shadows and contrast";
+            break;
+          default:
+            lightingDescription = "professional studio lighting";
+        }
+        
+        const positioningInstruction = faceCamera ? " Position the person to face directly toward the camera with confident posture." : "";
+        
+        prompts.push(`Crop the head and create a 2-inch ID photo. Place the person in a professional photo studio with ${setupDescription} and ${lightingDescription}. Create a clean, professional portrait setup with proper studio atmosphere.${positioningInstruction}`);
+        
       } else if (bgType === "upload" && params.customBackgroundImage) {
         prompts.push(`Replace the background using the provided custom background reference image (attached below). Ensure perspective and lighting match.`);
         const bgRef = await toInlineDataFromAny(params.customBackgroundImage);
         if (bgRef) referenceParts.push({ inlineData: bgRef });
-      } else if (params.customPrompt) {
-        prompts.push(params.customPrompt);
+        
+      } else if (bgType === "custom" && params.customPrompt) {
+        prompts.push(`${params.customPrompt}. CRITICAL SCALE REQUIREMENTS: Keep the main character at their EXACT original size and position - do NOT make them smaller or change their scale. Ensure the main character appears naturally integrated into the scene with proper lighting, shadows, and perspective that matches the environment.`);
       }
     }
     
     // Clothes modifications
     if (params.clothesImage) {
-      console.log(`[API] Processing clothes image, type: ${typeof params.clothesImage}, length: ${params.clothesImage?.length || 0}`);
       
       if (params.selectedPreset === "Sukajan") {
         prompts.push("Replace the person's clothing with a Japanese sukajan jacket (embroidered designs). Use the clothes reference image if provided.");
@@ -216,7 +440,6 @@ The result should look like all subjects were photographed together in the same
       try {
         const clothesRef = await toInlineDataFromAny(params.clothesImage);
         if (clothesRef) {
-          console.log(`[API] Successfully processed clothes image`);
           referenceParts.push({ inlineData: clothesRef });
         } else {
           console.error('[API] Failed to process clothes image - toInlineDataFromAny returned null');
@@ -230,25 +453,26 @@ The result should look like all subjects were photographed together in the same
     if (params.stylePreset) {
       const strength = params.styleStrength || 50;
       const styleMap: { [key: string]: string } = {
-        "90s-anime": "Convert the image to 90's anime art style with classic anime features: large expressive eyes, detailed hair, soft shading, nostalgic colors reminiscent of Studio Ghibli and classic anime productions",
-        "mha": "Transform the image into My Hero Academia anime style with modern crisp lines, vibrant colors, dynamic character design, and heroic aesthetics typical of the series",
-        "dbz": "Apply Dragon Ball Z anime style with sharp angular features, spiky hair, intense expressions, bold outlines, high contrast shading, and dramatic action-oriented aesthetics",
-        "ukiyo-e": "Render in traditional Japanese Ukiyo-e woodblock print style with flat colors, bold outlines, stylized waves and clouds, traditional Japanese artistic elements",
-        "cyberpunk": "Transform into cyberpunk aesthetic with neon colors (cyan, magenta, yellow), dark backgrounds, futuristic elements, holographic effects, tech-noir atmosphere",
-        "steampunk": "Apply steampunk style with Victorian-era brass and copper tones, mechanical gears, steam effects, vintage industrial aesthetic, sepia undertones",
-        "cubism": "Render in Cubist art style with geometric fragmentation, multiple perspectives shown simultaneously, abstract angular forms, Picasso-inspired decomposition",
-        "van-gogh": "Apply Post-Impressionist Van Gogh style with thick swirling brushstrokes, vibrant yellows and blues, expressive texture, starry night-like patterns",
-        "simpsons": "Convert to The Simpsons cartoon style with yellow skin tones, simple rounded features, bulging eyes, overbite, Matt Groening's distinctive character design",
-        "family-guy": "Transform into Family Guy animation style with rounded character design, simplified features, Seth MacFarlane's distinctive art style, bold outlines",
-        "arcane": "Apply Arcane (League of Legends) style with painterly brush-stroke textures, neon rim lighting, hand-painted feel, stylized realism, vibrant color grading",
-        "wildwest": "Render in Wild West style with dusty desert tones, sunset orange lighting, vintage film grain, cowboy aesthetic, sepia and brown color palette",
-        "stranger-things": "Apply Stranger Things 80s aesthetic with Kodak film push-process look, neon magenta backlight, grainy vignette, retro sci-fi horror atmosphere",
-        "breaking-bad": "Transform with Breaking Bad cinematography style featuring dusty New Mexico orange and teal color grading, 35mm film grain, desert atmosphere, dramatic lighting"
+        "90s-anime": "Transform into vibrant 90s anime art style",
+        "mha": "Convert into My Hero Academia anime style ",
+        "spiderverse": "Convert into Spiderverse anime style",
+        "dbz": "Convert into Dragon Ball Z anime style ",
+        "ukiyo-e": "Convert into traditional Japanese Ukiyo-e woodblock print style with flat color planes, bold black outlines, stylized natural elements, limited color palette of blues and earth tones, geometric patterns, and the distinctive floating world aesthetic of Edo period art",
+        "cubism": "Convert into Cubist art style with geometric fragmentation and angular decomposition, use various different colors",
+        "van-gogh": "Convert into Post-Impressionist Van Gogh style with thick impasto paint texture, bold swirling brushstrokes that create dynamic movement, vibrant yellows and deep blues with expressive non-naturalistic color choices, visible three-dimensional brush marks, and the characteristic flowing patterns and emotional intensity seen in masterworks like Starry Night",
+        "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];
       if (styleDescription) {
         prompts.push(`${styleDescription}. Apply this style transformation at ${strength}% intensity while preserving the core subject matter.`);
+      } else {
+        console.error(`[API] Style not found in styleMap: ${params.stylePreset}`);
       }
     }
     
@@ -257,30 +481,133 @@ The result should look like all subjects were photographed together in the same
       prompts.push(params.editPrompt);
     }
     
-    // Camera settings
+    // Camera settings - Enhanced for Gemini 2.5 Flash Image
     if (params.focalLength || params.aperture || params.shutterSpeed || params.whiteBalance || params.angle || 
-        params.iso || params.filmStyle || params.lighting || params.bokeh || params.composition) {
-      const cameraSettings: string[] = [];
+        params.iso || params.filmStyle || params.lighting || params.bokeh || params.composition || params.motionBlur) {
+      // Build cinematic camera prompt for professional, movie-like results
+      let cameraPrompt = "CINEMATIC CAMERA TRANSFORMATION: Transform this image into a professional, cinematic photograph with movie-quality production values";
+      
       if (params.focalLength) {
-        if (params.focalLength === "8mm fisheye") {
-          cameraSettings.push("Apply 8mm fisheye lens effect with 180-degree circular distortion");
+        if (params.focalLength === "8mm") {
+          cameraPrompt += " shot with an ultra-wide 8mm fisheye lens creating dramatic barrel distortion, immersive perspective, and cinematic edge curvature typical of action sequences";
+        } else if (params.focalLength === "14mm") {
+          cameraPrompt += " captured with a 14mm ultra-wide angle lens for sweeping cinematic vistas and dramatic environmental context";
+        } else if (params.focalLength === "24mm") {
+          cameraPrompt += " shot with a 24mm wide-angle cinema lens for establishing shots with expansive field of view and slight perspective enhancement";
+        } else if (params.focalLength === "35mm") {
+          cameraPrompt += " filmed with a 35mm lens providing natural cinematic perspective, the gold standard for narrative storytelling";
+        } else if (params.focalLength === "50mm") {
+          cameraPrompt += " captured with a 50mm cinema lens for authentic human vision perspective and natural depth rendering";
+        } else if (params.focalLength === "85mm") {
+          cameraPrompt += " shot with an 85mm portrait cinema lens for intimate character close-ups with beautiful subject isolation and compressed backgrounds";
+        } else if (params.focalLength === "100mm") {
+          cameraPrompt += " filmed with a 100mm telephoto lens for dramatic compression and cinematic subject isolation";
+        } else if (params.focalLength === "135mm") {
+          cameraPrompt += " captured with a 135mm telephoto cinema lens for extreme compression and dreamlike background separation";
         } else {
-          cameraSettings.push(`Focal Length: ${params.focalLength}`);
+          cameraPrompt += ` shot with professional ${params.focalLength} cinema glass`;
         }
       }
-      if (params.aperture) cameraSettings.push(`Aperture: ${params.aperture}`);
-      if (params.shutterSpeed) cameraSettings.push(`Shutter Speed: ${params.shutterSpeed}`);
-      if (params.whiteBalance) cameraSettings.push(`White Balance: ${params.whiteBalance}`);
-      if (params.angle) cameraSettings.push(`Camera Angle: ${params.angle}`);
-      if (params.iso) cameraSettings.push(`${params.iso}`);
-      if (params.filmStyle) cameraSettings.push(`Film style: ${params.filmStyle}`);
-      if (params.lighting) cameraSettings.push(`Lighting: ${params.lighting}`);
-      if (params.bokeh) cameraSettings.push(`Bokeh effect: ${params.bokeh}`);
-      if (params.composition) cameraSettings.push(`Composition: ${params.composition}`);
       
-      if (cameraSettings.length > 0) {
-        prompts.push(`Apply professional photography settings: ${cameraSettings.join(", ")}`);
+      if (params.aperture) {
+        if (params.aperture === "f/1.2") {
+          cameraPrompt += `, shot wide open at f/1.2 for extreme shallow depth of field, ethereal bokeh, and cinematic subject isolation with dreamy background blur`;
+        } else if (params.aperture === "f/1.4") {
+          cameraPrompt += `, captured at f/1.4 for beautiful shallow depth of field, creating that signature cinematic look with smooth background separation`;
+        } else if (params.aperture === "f/2.8") {
+          cameraPrompt += `, shot at f/2.8 for controlled depth of field, maintaining subject sharpness while creating pleasing background blur`;
+        } else if (params.aperture === "f/4") {
+          cameraPrompt += `, filmed at f/4 for balanced depth of field, keeping key subjects sharp while maintaining some background separation`;
+        } else if (params.aperture === "f/5.6") {
+          cameraPrompt += `, captured at f/5.6 for extended depth of field while maintaining cinematic quality and professional sharpness`;
+        } else if (params.aperture === "f/8" || params.aperture === "f/11") {
+          cameraPrompt += `, shot at ${params.aperture} for deep focus cinematography with tack-sharp details throughout the entire frame`;
+        } else {
+          cameraPrompt += `, professionally exposed at ${params.aperture}`;
+        }
       }
+      
+      if (params.iso) {
+        if (params.iso === "ISO 100") {
+          cameraPrompt += ", shot at ISO 100 for pristine image quality, zero noise, and maximum dynamic range typical of high-end cinema cameras";
+        } else if (params.iso === "ISO 200") {
+          cameraPrompt += ", captured at ISO 200 for clean shadows and optimal color reproduction with professional cinema camera characteristics";
+        } else if (params.iso === "ISO 400") {
+          cameraPrompt += ", filmed at ISO 400 for balanced exposure with minimal noise, the sweet spot for most cinematic scenarios";
+        } else if (params.iso === "ISO 800") {
+          cameraPrompt += ", shot at ISO 800 creating subtle film grain texture that adds cinematic character and organic feel";
+        } else if (params.iso === "ISO 1600") {
+          cameraPrompt += ", captured at ISO 1600 with controlled grain for dramatic low-light cinematography and moody atmosphere";
+        } else if (params.iso === "ISO 3200") {
+          cameraPrompt += ", filmed at ISO 3200 with artistic grain structure for gritty, realistic cinema aesthetics";
+        } else {
+          cameraPrompt += `, shot at ${params.iso} with appropriate noise characteristics`;
+        }
+      }
+      
+      if (params.lighting) {
+        if (params.lighting === "Golden Hour") {
+          cameraPrompt += ", cinematically lit during golden hour with warm, directional sunlight creating magical rim lighting, long shadows, and that coveted cinematic glow";
+        } else if (params.lighting === "Blue Hour") {
+          cameraPrompt += ", captured during blue hour with soft, even twilight illumination and cool color temperature for moody cinematic atmosphere";
+        } else if (params.lighting === "Studio") {
+          cameraPrompt += ", professionally lit with multi-point studio lighting setup featuring key light, fill light, and rim light for commercial cinema quality";
+        } else if (params.lighting === "Natural") {
+          cameraPrompt += ", naturally lit with soft, diffused daylight providing even illumination and organic shadow patterns";
+        } else if (params.lighting === "Dramatic") {
+          cameraPrompt += ", dramatically lit with high-contrast lighting creating strong shadows and highlights for cinematic tension";
+        } else {
+          cameraPrompt += `, professionally lit with ${params.lighting} lighting setup`;
+        }
+      }
+      
+      if (params.bokeh) {
+        if (params.bokeh === "Smooth Bokeh") {
+          cameraPrompt += ", featuring silky smooth bokeh with perfectly circular out-of-focus highlights and creamy background transitions";
+        } else if (params.bokeh === "Swirly Bokeh") {
+          cameraPrompt += ", featuring artistic swirly bokeh with spiral-like background blur patterns for unique visual character";
+        } else if (params.bokeh === "Hexagonal Bokeh") {
+          cameraPrompt += ", featuring hexagonal bokeh with geometric six-sided highlight shapes typical of cinema lenses";
+        } else {
+          cameraPrompt += `, featuring ${params.bokeh} quality bokeh rendering in out-of-focus areas`;
+        }
+      }
+      
+      if (params.motionBlur) {
+        if (params.motionBlur === "Light Motion Blur") {
+          cameraPrompt += ", with subtle motion blur suggesting gentle movement and adding cinematic flow to the image";
+        } else if (params.motionBlur === "Medium Motion Blur") {
+          cameraPrompt += ", with moderate motion blur creating dynamic energy and sense of movement typical of action cinematography";
+        } else if (params.motionBlur === "Heavy Motion Blur") {
+          cameraPrompt += ", with pronounced motion blur creating dramatic movement streaks and high-energy cinematic action";
+        } else if (params.motionBlur === "Radial Blur") {
+          cameraPrompt += ", with radial motion blur emanating from the center, creating explosive zoom-like movement and dramatic focus pull";
+        } else if (params.motionBlur === "Zoom Blur") {
+          cameraPrompt += ", with zoom blur effect creating dramatic speed lines and kinetic energy radiating outward from the subject";
+        } else {
+          cameraPrompt += `, with ${params.motionBlur} motion effect`;
+        }
+      }
+      
+      if (params.angle) {
+        if (params.angle === "Low Angle") {
+          cameraPrompt += ", shot from a low-angle perspective looking upward for dramatic impact";
+        } else if (params.angle === "Bird's Eye") {
+          cameraPrompt += ", captured from a bird's eye view directly overhead";
+        } else {
+          cameraPrompt += `, ${params.angle} camera angle`;
+        }
+      }
+      
+      if (params.filmStyle && params.filmStyle !== "RAW") {
+        cameraPrompt += `, processed with ${params.filmStyle} film aesthetic and color grading`;
+      } else if (params.filmStyle === "RAW") {
+        cameraPrompt += ", with natural RAW processing maintaining realistic colors and contrast";
+      }
+      
+      cameraPrompt += ". Maintain photorealistic quality with authentic camera characteristics, natural lighting, and professional composition.";
+      
+      prompts.push(cameraPrompt);
     }
     
     // Age transformation
@@ -288,6 +615,16 @@ The result should look like all subjects were photographed together in the same
       prompts.push(`Transform the person to look exactly ${params.targetAge} years old with age-appropriate features.`);
     }
     
+    // Lighting effects
+    if (params.lightingPrompt && params.selectedLighting) {
+      prompts.push(`IMPORTANT: Completely transform the lighting on this person to match this exact description: ${params.lightingPrompt}. The lighting change should be dramatic and clearly visible. Keep their face, clothes, pose, and background exactly the same, but make the lighting transformation very obvious.`);
+    }
+    
+    // Pose modifications
+    if (params.posePrompt && params.selectedPose) {
+      prompts.push(`IMPORTANT: Completely change the person's body pose to match this exact description: ${params.posePrompt}. The pose change should be dramatic and clearly visible. Keep their face, clothes, and background exactly the same, but make the pose transformation very obvious.`);
+    }
+    
     // Face modifications
     if (params.faceOptions) {
       const face = params.faceOptions;
@@ -298,6 +635,7 @@ The result should look like all subjects were photographed together in the same
       if (face.changeHairstyle) modifications.push(`change hairstyle to ${face.changeHairstyle}`);
       if (face.facialExpression) modifications.push(`change facial expression to ${face.facialExpression}`);
       if (face.beardStyle) modifications.push(`add/change beard to ${face.beardStyle}`);
+      if (face.selectedMakeup) modifications.push(`add a face makeup with red colors on cheeks and and some yellow blue colors around the eye area`);
       
       if (modifications.length > 0) {
         prompts.push(`Face modifications: ${modifications.join(", ")}`);
@@ -306,7 +644,7 @@ The result should look like all subjects were photographed together in the same
     
     // Combine all prompts
     let prompt = prompts.length > 0 
-      ? prompts.join("\n\n") + "\n\nApply all these modifications while maintaining the person's identity and keeping unspecified aspects unchanged."
+      ? prompts.join("\n\n") + "\nApply all these modifications while maintaining the person's identity and keeping unspecified aspects unchanged."
       : "Process this image with high quality output.";
 
     // Add the custom prompt if provided
@@ -314,6 +652,8 @@ The result should look like all subjects were photographed together in the same
       prompt = body.prompt + "\n\n" + prompt;
     }
 
+    // Debug: Log the final combined prompt and parts structure
+
     // Generate with Gemini
     const parts = [
       { text: prompt },
@@ -323,23 +663,71 @@ The result should look like all subjects were photographed together in the same
       ...referenceParts,
     ];
 
-    const response = await ai.models.generateContent({
-      model: "gemini-2.5-flash-image-preview",
-      contents: parts,
-    });
+    
+    let response;
+    try {
+      response = await ai.models.generateContent({
+        model: "gemini-2.5-flash-image-preview",
+        contents: parts,
+      });
+    } catch (geminiError: any) {
+      console.error('[API] Gemini API error:', geminiError);
+      console.error('[API] Gemini error details:', {
+        message: geminiError.message,
+        status: geminiError.status,
+        code: geminiError.code
+      });
+      
+      if (geminiError.message?.includes('safety')) {
+        return NextResponse.json(
+          { error: "Content was blocked by safety filters. Try using different images or prompts." },
+          { status: 400 }
+        );
+      }
+      
+      if (geminiError.message?.includes('quota') || geminiError.message?.includes('limit')) {
+        return NextResponse.json(
+          { error: "API quota exceeded. Please check your Gemini API usage limits." },
+          { status: 429 }
+        );
+      }
+      
+      return NextResponse.json(
+        { error: `Gemini API error: ${geminiError.message || 'Unknown error'}` },
+        { status: 500 }
+      );
+    }
 
+    
     const outParts = (response as any)?.candidates?.[0]?.content?.parts ?? [];
     const images: string[] = [];
+    const texts: string[] = [];
+    
     
-    for (const p of outParts) {
+    for (let i = 0; i < outParts.length; i++) {
+      const p = outParts[i];
+      
       if (p?.inlineData?.data) {
         images.push(`data:image/png;base64,${p.inlineData.data}`);
       }
+      
+      if (p?.text) {
+        texts.push(p.text);
+      }
     }
 
     if (!images.length) {
+      console.error('[API] No images generated by Gemini. Text responses:', texts);
       return NextResponse.json(
-        { error: "No image generated. Try adjusting your parameters." },
+        { 
+          error: "No image generated. Try adjusting your parameters.", 
+          textResponse: texts.join('\n'),
+          debugInfo: {
+            partsCount: outParts.length,
+            candidatesCount: (response as any)?.candidates?.length || 0,
+            hasResponse: !!response
+          }
+        },
         { status: 500 }
       );
     }
@@ -348,15 +736,36 @@ The result should look like all subjects were photographed together in the same
   } catch (err: any) {
     console.error("/api/process error:", err);
     console.error("Error stack:", err?.stack);
+    console.error("Error details:", {
+      name: err?.name,
+      message: err?.message,
+      code: err?.code,
+      status: err?.status,
+      details: err?.details
+    });
     
     // Provide more specific error messages
-    if (err?.message?.includes('payload size')) {
+    if (err?.message?.includes('payload size') || err?.code === 413) {
       return NextResponse.json(
         { error: "Image data too large. Please use smaller images or reduce image quality." },
         { status: 413 }
       );
     }
     
+    if (err?.message?.includes('API key') || err?.message?.includes('authentication')) {
+      return NextResponse.json(
+        { error: "Invalid API key. Please check your Google Gemini API token." },
+        { status: 401 }
+      );
+    }
+    
+    if (err?.message?.includes('quota') || err?.message?.includes('limit')) {
+      return NextResponse.json(
+        { error: "API quota exceeded. Please check your Google Gemini API usage limits." },
+        { status: 429 }
+      );
+    }
+    
     if (err?.message?.includes('JSON')) {
       return NextResponse.json(
         { error: "Invalid data format. Please ensure images are properly encoded." },

app/editor.css

@@ -1,64 +1,81 @@
 /* Node editor custom styles and animations */
 
-/* Animated connection lines */
+/* ========================================
+   CONNECTION LINE ANIMATIONS
+   ======================================== */
+
+/* Animation for regular connection lines when dragging - now truly continuous */
 @keyframes flow {
-  0% {
-    stroke-dashoffset: 0;
+  from {
+    stroke-dashoffset: 10;   /* Start offset equal to one complete dash cycle */
   }
-  100% {
-    stroke-dashoffset: -20;
+  to {
+    stroke-dashoffset: 0;    /* Move to next cycle, creating seamless continuous flow */
   }
 }
 
+/* Applied to connection lines when user is actively dragging to connect nodes */
 .connection-animated {
-  animation: flow 1s linear infinite;
-  stroke-dasharray: 5, 5;
+  animation: flow 0.8s linear infinite;  /* Smooth continuous animation, slightly faster */
+  stroke-dasharray: 5, 5;               /* Create dashed line: 5px dash, 5px gap pattern */
 }
 
-/* Processing pulse effect */
-@keyframes processingPulse {
-  0%, 100% {
-    opacity: 1;
+/* Animation for processing connections - shows data flowing through active connections - now truly continuous */
+@keyframes processingFlow {
+  from {
+    stroke-dashoffset: 12;   /* Start offset equal to one complete dash cycle (8+4=12) */
   }
-  50% {
-    opacity: 0.6;
+  to {
+    stroke-dashoffset: 0;    /* Move to next cycle, creating seamless continuous flow */
   }
 }
 
+/* Applied to connection lines when nodes are actively processing data */
 .connection-processing {
-  animation: processingPulse 1.5s ease-in-out infinite;
-  stroke: #22c55e;
-  stroke-width: 3;
-  filter: drop-shadow(0 0 3px rgba(34, 197, 94, 0.5));
+  animation: processingFlow 1.0s linear infinite;  /* Smooth continuous animation, optimized timing */
+  stroke: #22c55e;                                 /* Green color to indicate active processing */
+  stroke-width: 3;                                 /* Thicker line to make it more prominent */
+  stroke-dasharray: 8, 4;                          /* Longer dashes (8px) with smaller gaps (4px) for better visibility */
 }
 
-/* Flow particles effect */
+/* ========================================
+   PARTICLE FLOW EFFECT (EXPERIMENTAL)
+   ======================================== */
+
+/* Animation for particles flowing along paths - uses CSS motion path */
 @keyframes flowParticle {
   0% {
-    offset-distance: 0%;
-    opacity: 0;
+    offset-distance: 0%;     /* Start at beginning of path */
+    opacity: 0;              /* Fade in from transparent */
   }
   10% {
-    opacity: 1;
+    opacity: 1;              /* Fully visible after 10% of animation */
   }
   90% {
-    opacity: 1;
+    opacity: 1;              /* Stay visible until 90% of animation */
   }
   100% {
-    offset-distance: 100%;
-    opacity: 0;
+    offset-distance: 100%;   /* End at end of path */
+    opacity: 0;              /* Fade out to transparent */
   }
 }
 
+/* Class for individual particles flowing along connection paths */
 .flow-particle {
-  animation: flowParticle 2s linear infinite;
+  animation: flowParticle 2s linear infinite;  /* 2 second cycle for particle to travel full path */
 }
 
-/* Node processing state */
+/* ========================================
+   NODE PROCESSING STATES
+   ======================================== */
+
+/* Animation for nodes themselves when they're processing */
 .nb-node.processing {
-  animation: processingPulse 1.5s ease-in-out infinite;
+  animation: processingPulse 1.5s ease-in-out infinite;  /* Gentle pulsing effect */
 }
 
+/* Special styling for processing node headers */
 .nb-node.processing .nb-header {
+  /* Subtle green gradient background to indicate processing state */
   background: linear-gradient(90deg, rgba(34, 197, 94, 0.2), rgba(34, 197, 94, 0.1));
 }

app/layout.tsx

@@ -1,26 +1,63 @@
+/**
+ * ROOT LAYOUT COMPONENT
+ * 
+ * Next.js 13+ app directory root layout that wraps all pages in the application.
+ * Defines the basic HTML structure, fonts, and global styling for the entire app.
+ * 
+ * Key Features:
+ * - Google Fonts integration (Geist Sans and Geist Mono)
+ * - CSS custom properties for font family variables
+ * - Global CSS imports (Tailwind CSS and custom styles)
+ * - SEO metadata configuration
+ * - Consistent theming with CSS variables for background and text colors
+ */
+
 import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
-import "./globals.css";
+import { Geist, Geist_Mono } from "next/font/google";  // Modern Google Fonts
+import "./globals.css";  // Tailwind CSS and global styles
 
+/**
+ * Configure Geist Sans font
+ * Modern, clean sans-serif font optimized for UI text
+ * Creates CSS variable --font-geist-sans for use in Tailwind classes
+ */
 const geistSans = Geist({
-  variable: "--font-geist-sans",
-  subsets: ["latin"],
+  variable: "--font-geist-sans",  // CSS custom property name
+  subsets: ["latin"],             // Character subset to load (reduces bundle size)
 });
 
+/**
+ * Configure Geist Mono font  
+ * Monospace font for code, technical text, and fixed-width content
+ * Creates CSS variable --font-geist-mono for use in Tailwind classes
+ */
 const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
-  subsets: ["latin"],
+  variable: "--font-geist-mono",  // CSS custom property name
+  subsets: ["latin"],             // Character subset to load
 });
 
+/**
+ * SEO metadata configuration for the application
+ * Defines title, description, and other meta tags for search engines and social media
+ */
 export const metadata: Metadata = {
-  title: "Nano Banana Editor",
-  description: "Node-based photo editor for characters",
+  title: "Nano Banana Editor",                     // Browser tab title and SEO title
+  description: "Node-based photo editor for characters",  // Meta description for search results
 };
 
+/**
+ * Root Layout Component
+ * 
+ * Wraps all pages with consistent HTML structure and styling.
+ * All pages in the app will be rendered inside the {children} placeholder.
+ * 
+ * @param children React components representing the current page content
+ * @returns Complete HTML document structure with fonts and styling applied
+ */
 export default function RootLayout({
   children,
 }: Readonly<{
-  children: React.ReactNode;
+  children: React.ReactNode;  // Type-safe children prop
 }>) {
   return (
     <html lang="en">

app/page.tsx

@@ -1,32 +1,76 @@
+/**
+ * NANO BANANA EDITOR - MAIN APPLICATION COMPONENT
+ * 
+ * This is a visual node-based editor for AI image processing.
+ * Users can create nodes for different operations like merging images,
+ * changing backgrounds, adding clothes, applying styles, etc.
+ * 
+ * Key Features:
+ * - Drag & drop interface for connecting nodes
+ * - Real-time image processing using Google's Gemini API
+ * - Support for multiple image operations (merge, style, edit, etc.)
+ * - Visual connection lines with animations
+ * - Viewport controls (pan, zoom)
+ */
 "use client";
 
+// React imports for hooks and core functionality
 import React, { useEffect, useMemo, useRef, useState } from "react";
+// Custom CSS for animations and styling
 import "./editor.css";
+// Import all the different node view components
 import {
-  BackgroundNodeView,
-  ClothesNodeView,
-  StyleNodeView,
-  EditNodeView,
-  CameraNodeView,
-  AgeNodeView,
-  FaceNodeView
+  BackgroundNodeView,  // Changes/generates backgrounds
+  ClothesNodeView,     // Adds/changes clothing
+  StyleNodeView,       // Applies artistic styles
+  EditNodeView,        // General text-based editing
+  CameraNodeView,      // Camera effects and settings
+  AgeNodeView,         // Age transformation
+  FaceNodeView,        // Face modifications
+  LightningNodeView,   // Lighting effects
+  PosesNodeView        // Pose modifications
 } from "./nodes";
+// UI components from shadcn/ui library
 import { Button } from "../components/ui/button";
 import { Input } from "../components/ui/input";
-
+// Hugging Face OAuth functionality
+import { oauthLoginUrl, oauthHandleRedirectIfPresent } from '@huggingface/hub';
+
+/**
+ * Utility function to combine CSS class names conditionally
+ * Filters out falsy values and joins the remaining strings with spaces
+ * Example: cx("class1", condition && "class2", null) => "class1 class2" or "class1"
+ */
 function cx(...args: Array<string | false | null | undefined>) {
   return args.filter(Boolean).join(" ");
 }
 
-// Simple ID helper
+/**
+ * Generate a unique ID for new nodes
+ * Uses Math.random() to create a random string identifier
+ * Format: random base-36 string (letters + numbers), 7 characters long
+ */
 const uid = () => Math.random().toString(36).slice(2, 9);
 
-// Generate merge prompt based on number of inputs
+/**
+ * Generate AI prompt for merging multiple character images into a single cohesive group photo
+ * 
+ * This function creates a detailed prompt that instructs the AI model to:
+ * 1. Extract people from separate images
+ * 2. Combine them naturally as if photographed together
+ * 3. Ensure consistent lighting, shadows, and perspective
+ * 4. Create a believable group composition
+ * 
+ * @param characterData Array of objects containing image data and labels
+ * @returns Detailed prompt string for the AI merge operation
+ */
 function generateMergePrompt(characterData: { image: string; label: string }[]): string {
   const count = characterData.length;
   
+  // Create a summary of all images being processed
   const labels = characterData.map((d, i) => `Image ${i + 1} (${d.label})`).join(", ");
   
+  // Return comprehensive prompt with specific instructions for natural-looking merge
   return `MERGE TASK: Create a natural, cohesive group photo combining ALL subjects from ${count} provided images.
 
 Images provided:
@@ -57,148 +101,330 @@ CRITICAL REQUIREMENTS:
 The result should look like all subjects were photographed together in the same place at the same time, NOT like separate images placed side by side.`;
 }
 
-// Types
-type NodeType = "CHARACTER" | "MERGE" | "BACKGROUND" | "CLOTHES" | "STYLE" | "EDIT" | "CAMERA" | "AGE" | "FACE" | "BLEND";
+/**
+ * Copy image to clipboard with PNG conversion
+ * The clipboard API only supports PNG format for images, so we convert other formats
+ */
+async function copyImageToClipboard(dataUrl: string) {
+  try {
+    const response = await fetch(dataUrl);
+    const blob = await response.blob();
+    
+    // Convert to PNG if not already PNG
+    if (blob.type !== 'image/png') {
+      const canvas = document.createElement('canvas');
+      const ctx = canvas.getContext('2d');
+      const img = new Image();
+      
+      await new Promise((resolve) => {
+        img.onload = () => {
+          canvas.width = img.width;
+          canvas.height = img.height;
+          ctx?.drawImage(img, 0, 0);
+          resolve(void 0);
+        };
+        img.src = dataUrl;
+      });
+      
+      const pngBlob = await new Promise<Blob>((resolve) => {
+        canvas.toBlob((blob) => resolve(blob!), 'image/png');
+      });
+      
+      await navigator.clipboard.write([
+        new ClipboardItem({ 'image/png': pngBlob })
+      ]);
+    } else {
+      await navigator.clipboard.write([
+        new ClipboardItem({ 'image/png': blob })
+      ]);
+    }
+  } catch (error) {
+    console.error('Failed to copy image to clipboard:', error);
+  }
+}
+
+/* ========================================
+   TYPE DEFINITIONS
+   ======================================== */
+
+/**
+ * All possible node types in the editor
+ * Each type represents a different kind of image processing operation
+ */
+type NodeType = "CHARACTER" | "MERGE" | "BACKGROUND" | "CLOTHES" | "STYLE" | "EDIT" | "CAMERA" | "AGE" | "FACE" | "BLEND" | "LIGHTNING" | "POSES";
 
+/**
+ * Base properties that all nodes share
+ * Every node has an ID, type, and position in the editor world space
+ */
 type NodeBase = {
-  id: string;
-  type: NodeType;
-  x: number; // world coords
-  y: number; // world coords
+  id: string;          // Unique identifier for the node
+  type: NodeType;      // What kind of operation this node performs
+  x: number;           // X position in world coordinates (not screen pixels)
+  y: number;           // Y position in world coordinates (not screen pixels)
 };
 
+/**
+ * CHARACTER node - Contains source images (people/subjects)
+ * These are the starting points for most image processing workflows
+ * Users can upload images or paste URLs/data URLs
+ */
 type CharacterNode = NodeBase & {
   type: "CHARACTER";
-  image: string; // data URL or http URL
-  label?: string;
+  image: string;       // Image data (data URL, http URL, or file path)
+  label?: string;      // Optional human-readable name for the character
 };
 
+/**
+ * MERGE node - Combines multiple inputs into a single group photo
+ * Takes multiple CHARACTER or processed nodes and creates a cohesive image
+ * Uses AI to naturally blend subjects together with consistent lighting
+ */
 type MergeNode = NodeBase & {
   type: "MERGE";
-  inputs: string[]; // node ids
-  output?: string | null; // data URL from merge
-  isRunning?: boolean;
-  error?: string | null;
+  inputs: string[];           // Array of node IDs to merge together
+  output?: string | null;     // Resulting merged image (data URL)
+  isRunning?: boolean;        // Whether merge operation is currently processing
+  error?: string | null;      // Error message if merge failed
 };
 
+/**
+ * BACKGROUND node - Changes or generates backgrounds
+ * Can use solid colors, preset images, uploaded custom images, or AI-generated backgrounds
+ */
 type BackgroundNode = NodeBase & {
   type: "BACKGROUND";
-  input?: string; // node id
-  output?: string;
-  backgroundType: "color" | "image" | "upload" | "custom";
-  backgroundColor?: string;
-  backgroundImage?: string;
-  customBackgroundImage?: string;
-  customPrompt?: string;
-  isRunning?: boolean;
-  error?: string | null;
+  input?: string;                    // ID of the source node (usually CHARACTER)
+  output?: string;                   // Processed image with new background
+  backgroundType: "color" | "gradient" | "image" | "city" | "photostudio" | "upload" | "custom";  // Type of background to apply
+  backgroundColor?: string;          // Hex color code for solid color backgrounds
+  
+  // Gradient background properties
+  gradientDirection?: string;        // Direction of gradient (to right, to bottom, radial, etc.)
+  gradientStartColor?: string;       // Starting color of gradient
+  gradientEndColor?: string;         // Ending color of gradient
+  
+  backgroundImage?: string;          // URL/path for preset background images
+  
+  // City scene properties
+  citySceneType?: string;           // Type of city scene (busy_street, times_square, etc.)
+  cityTimeOfDay?: string;           // Time of day for city scene
+  
+  // Photo studio properties
+  studioSetup?: string;             // Studio background setup type
+  studioBackgroundColor?: string;   // Color for colored seamless background
+  studioLighting?: string;          // Studio lighting setup
+  faceCamera?: boolean;             // Whether to position character facing camera
+  
+  customBackgroundImage?: string;    // User-uploaded background image data
+  customPrompt?: string;            // AI prompt for generating custom backgrounds
+  isRunning?: boolean;              // Processing state indicator
+  error?: string | null;            // Error message if processing failed
 };
 
+/**
+ * CLOTHES node - Adds or changes clothing on subjects
+ * Can use preset clothing styles or custom uploaded clothing images
+ */
 type ClothesNode = NodeBase & {
   type: "CLOTHES";
-  input?: string;
-  output?: string;
-  clothesImage?: string;
-  selectedPreset?: string;
-  clothesPrompt?: string;
-  isRunning?: boolean;
-  error?: string | null;
+  input?: string;              // ID of the source node
+  output?: string;             // Image with modified clothing
+  clothesImage?: string;       // Custom clothing image to apply
+  selectedPreset?: string;     // Preset clothing style identifier
+  clothesPrompt?: string;      // Text description for clothing changes
+  isRunning?: boolean;         // Processing state
+  error?: string | null;       // Error message
 };
 
+/**
+ * STYLE node - Applies artistic styles and filters
+ * Uses AI to transform images with different artistic styles (oil painting, watercolor, etc.)
+ */
 type StyleNode = NodeBase & {
   type: "STYLE";
-  input?: string;
-  output?: string;
-  stylePreset?: string;
-  styleStrength?: number;
-  isRunning?: boolean;
-  error?: string | null;
+  input?: string;              // Source node ID
+  output?: string;             // Styled output image
+  stylePreset?: string;        // Selected artistic style
+  styleStrength?: number;      // How strongly to apply the style (0-100)
+  isRunning?: boolean;         // Processing indicator
+  error?: string | null;       // Error message
 };
 
+/**
+ * EDIT node - General purpose text-based image editing
+ * Uses natural language prompts to make specific changes to images
+ */
 type EditNode = NodeBase & {
   type: "EDIT";
-  input?: string;
-  output?: string;
-  editPrompt?: string;
-  isRunning?: boolean;
-  error?: string | null;
+  input?: string;              // Input node ID
+  output?: string;             // Edited output image
+  editPrompt?: string;         // Natural language description of desired changes
+  isRunning?: boolean;         // Whether edit is being processed
+  error?: string | null;       // Error if edit failed
 };
 
+/**
+ * CAMERA node - Applies camera effects and photographic settings
+ * Simulates different camera settings, lenses, and photographic techniques
+ */
 type CameraNode = NodeBase & {
   type: "CAMERA";
-  input?: string;
-  output?: string;
-  focalLength?: string;
-  aperture?: string;
-  shutterSpeed?: string;
-  whiteBalance?: string;
-  angle?: string;
-  iso?: string;
-  filmStyle?: string;
-  lighting?: string;
-  bokeh?: string;
-  composition?: string;
-  aspectRatio?: string;
-  isRunning?: boolean;
-  error?: string | null;
+  input?: string;              // Source image node ID
+  output?: string;             // Image with camera effects applied
+  focalLength?: string;        // Lens focal length (e.g., "50mm", "85mm")
+  aperture?: string;           // Aperture setting (e.g., "f/1.4", "f/2.8")
+  shutterSpeed?: string;       // Shutter speed (e.g., "1/60", "1/125")
+  whiteBalance?: string;       // Color temperature setting
+  angle?: string;              // Camera angle/perspective
+  iso?: string;                // ISO sensitivity setting
+  filmStyle?: string;          // Film simulation (e.g., "Kodak", "Fuji")
+  lighting?: string;           // Lighting setup description
+  bokeh?: string;              // Background blur style
+  composition?: string;        // Composition technique
+  aspectRatio?: string;        // Image aspect ratio
+  motionBlur?: string;         // Motion blur effect
+  isRunning?: boolean;         // Processing status
+  error?: string | null;       // Error message
 };
 
+/**
+ * AGE node - Transforms subject age
+ * Uses AI to make people appear older or younger while maintaining their identity
+ */
 type AgeNode = NodeBase & {
   type: "AGE";
-  input?: string;
-  output?: string;
-  targetAge?: number;
-  isRunning?: boolean;
-  error?: string | null;
+  input?: string;              // Input node ID
+  output?: string;             // Age-transformed image
+  targetAge?: number;          // Target age to transform to (in years)
+  isRunning?: boolean;         // Processing indicator
+  error?: string | null;       // Error if transformation failed
 };
 
+/**
+ * FACE node - Modifies facial features and accessories
+ * Can add/remove facial hair, accessories, change expressions, etc.
+ */
 type FaceNode = NodeBase & {
   type: "FACE";
-  input?: string;
-  output?: string;
-  faceOptions?: {
-    removePimples?: boolean;
-    addSunglasses?: boolean;
-    addHat?: boolean;
-    changeHairstyle?: string;
-    facialExpression?: string;
-    beardStyle?: string;
+  input?: string;              // Source node ID
+  output?: string;             // Modified face image
+  faceOptions?: {              // Collection of face modification options
+    removePimples?: boolean;       // Clean up skin blemishes
+    addSunglasses?: boolean;       // Add sunglasses accessory
+    addHat?: boolean;             // Add hat accessory  
+    changeHairstyle?: string;     // New hairstyle description
+    facialExpression?: string;    // Change facial expression
+    beardStyle?: string;          // Add/modify facial hair
+    selectedMakeup?: string;      // Selected makeup style
+    makeupImage?: string;         // Path to makeup reference image
   };
-  isRunning?: boolean;
-  error?: string | null;
+  isRunning?: boolean;         // Processing state
+  error?: string | null;       // Error message
 };
 
+/**
+ * BLEND node - Blends/composites images with adjustable opacity
+ * Used for subtle image combinations and overlay effects
+ */
 type BlendNode = NodeBase & {
   type: "BLEND";
-  input?: string;
-  output?: string;
-  blendStrength?: number;
-  isRunning?: boolean;
-  error?: string | null;
+  input?: string;              // Primary input node ID
+  output?: string;             // Blended output image
+  blendStrength?: number;      // Blend intensity (0-100 percent)
+  isRunning?: boolean;         // Processing indicator
+  error?: string | null;       // Error message
 };
 
-type AnyNode = CharacterNode | MergeNode | BackgroundNode | ClothesNode | StyleNode | EditNode | CameraNode | AgeNode | FaceNode | BlendNode;
+/**
+ * LIGHTNING node - Applies lighting effects to images
+ * Uses preset lighting styles and images for realistic lighting effects
+ */
+type LightningNode = NodeBase & {
+  type: "LIGHTNING";
+  input?: string;              // Source node ID
+  output?: string;             // Image with lighting applied
+  selectedLighting?: string;   // Selected lighting preset name
+  lightingPrompt?: string;     // Text prompt for lighting effect
+  lightingStrength?: number;   // Intensity of lighting effect (0-100)
+  isRunning?: boolean;         // Processing state
+  error?: string | null;       // Error message
+};
 
-// Default placeholder portrait
-const DEFAULT_PERSON =
-  "https://images.unsplash.com/photo-1527980965255-d3b416303d12?q=80&w=640&auto=format&fit=crop";
 
+/**
+ * POSES node - Applies pose modifications to subjects
+ * Uses preset pose images to modify subject poses
+ */
+type PosesNode = NodeBase & {
+  type: "POSES";
+  input?: string;              // Source node ID
+  output?: string;             // Image with pose applied
+  selectedPose?: string;       // Selected pose preset name
+  posePrompt?: string;         // Text prompt for pose effect
+  poseStrength?: number;       // How strongly to apply the pose (0-100)
+  isRunning?: boolean;         // Processing state
+  error?: string | null;       // Error message
+};
+
+/**
+ * Union type of all possible node types
+ * Used for type-safe handling of nodes throughout the application
+ */
+type AnyNode = CharacterNode | MergeNode | BackgroundNode | ClothesNode | StyleNode | EditNode | CameraNode | AgeNode | FaceNode | BlendNode | LightningNode | PosesNode;
+
+/* ========================================
+   CONSTANTS AND UTILITY FUNCTIONS
+   ======================================== */
+
+/**
+ * Default placeholder image for new CHARACTER nodes
+ * Uses Unsplash image as a starting point before users upload their own images
+ */
+const DEFAULT_PERSON = "/reo.png";
+
+/**
+ * Convert File objects to data URLs for image processing
+ * 
+ * Takes a FileList or array of File objects (from drag/drop or file input)
+ * and converts each file to a base64 data URL that can be used in img tags
+ * or sent to APIs for processing.
+ * 
+ * @param files FileList or File array from input events
+ * @returns Promise that resolves to array of data URL strings
+ */
 function toDataUrls(files: FileList | File[]): Promise<string[]> {
-  const arr = Array.from(files as File[]);
+  const arr = Array.from(files as File[]);  // Convert FileList to regular array
   return Promise.all(
     arr.map(
       (file) =>
         new Promise<string>((resolve, reject) => {
-          const r = new FileReader();
-          r.onload = () => resolve(r.result as string);
-          r.onerror = reject;
-          r.readAsDataURL(file);
+          const r = new FileReader();                    // Browser API for reading files
+          r.onload = () => resolve(r.result as string);  // Success: return data URL
+          r.onerror = reject;                            // Error: reject promise
+          r.readAsDataURL(file);                         // Start reading as base64 data URL
         })
     )
   );
 }
 
-// Viewport helpers
+/**
+ * Convert screen pixel coordinates to world coordinates
+ * 
+ * The editor uses a coordinate system where:
+ * - Screen coordinates: actual pixel positions on the browser window
+ * - World coordinates: virtual positions that account for pan/zoom transformations
+ * 
+ * This function converts mouse/touch positions to world space for accurate node positioning.
+ * 
+ * @param clientX Mouse X position in screen pixels
+ * @param clientY Mouse Y position in screen pixels  
+ * @param container Bounding rect of the editor container
+ * @param tx Current pan transform X offset
+ * @param ty Current pan transform Y offset
+ * @param scale Current zoom scale factor
+ * @returns Object with world coordinates {x, y}
+ */
 function screenToWorld(
   clientX: number,
   clientY: number,
@@ -207,7 +433,7 @@ function screenToWorld(
   ty: number,
   scale: number
 ) {
-  const x = (clientX - container.left - tx) / scale;
+  const x = (clientX - container.left - tx) / scale;  // Account for container offset, pan, and zoom
   const y = (clientY - container.top - ty) / scale;
   return { x, y };
 }
@@ -363,13 +589,15 @@ function CharacterNodeView({
         />
         <div className="flex items-center gap-2">
           <Button 
-            variant="ghost" size="icon" className="text-destructive"
+            variant="ghost" size="icon" className="text-destructive hover:bg-destructive/20 h-6 w-6"
             onClick={(e) => {
               e.stopPropagation();
-              if (confirm('Delete MERGE node?')) {
+              e.preventDefault();
+              if (confirm('Delete this character node?')) {
                 onDelete(node.id);
               }
             }}
+            onPointerDown={(e) => e.stopPropagation()}
             title="Delete node"
             aria-label="Delete node"
           >
@@ -388,8 +616,41 @@ function CharacterNodeView({
           <img
             src={node.image}
             alt="character"
-            className="h-full w-full object-contain"
+            className="h-full w-full object-contain cursor-pointer hover:opacity-80 transition-opacity"
             draggable={false}
+            onClick={async () => {
+              try {
+                const response = await fetch(node.image);
+                const blob = await response.blob();
+                await navigator.clipboard.write([
+                  new ClipboardItem({ [blob.type]: blob })
+                ]);
+              } catch (error) {
+                console.error('Failed to copy image:', error);
+              }
+            }}
+            onContextMenu={async (e) => {
+              e.preventDefault();
+              try {
+                const response = await fetch(node.image);
+                const blob = await response.blob();
+                await navigator.clipboard.write([
+                  new ClipboardItem({ [blob.type]: blob })
+                ]);
+                
+                // Show visual feedback
+                const img = e.currentTarget;
+                const originalFilter = img.style.filter;
+                img.style.filter = "brightness(1.2)";
+                
+                setTimeout(() => {
+                  img.style.filter = originalFilter;
+                }, 500);
+              } catch (error) {
+                console.error('Failed to copy image:', error);
+              }
+            }}
+            title="Click or right-click to copy image to clipboard"
           />
         </div>
         <div className="flex gap-2">
@@ -478,18 +739,23 @@ function MergeNodeView({
         />
         <div className="font-semibold tracking-wide text-sm flex-1 text-center">MERGE</div>
         <div className="flex items-center gap-2">
-          <button
-            className="text-2xl leading-none font-bold text-red-400 hover:text-red-300 opacity-50 hover:opacity-100 transition-all hover:scale-110 px-1"
+          <Button
+            variant="ghost"
+            size="icon"
+            className="text-destructive hover:bg-destructive/20 h-6 w-6"
             onClick={(e) => {
               e.stopPropagation();
-              if (confirm('Delete MERGE node?')) {
+              e.preventDefault();
+              if (confirm('Delete this merge node?')) {
                 onDelete(node.id);
               }
             }}
+            onPointerDown={(e) => e.stopPropagation()}
             title="Delete node"
+            aria-label="Delete node"
           >
             ×
-          </button>
+          </Button>
           <Port 
             className="out" 
             nodeId={node.id}
@@ -528,7 +794,44 @@ function MergeNodeView({
               <div key={id} className="flex items-center gap-2 bg-white/10 rounded px-2 py-1">
                 {image && (
                   <div className="w-6 h-6 rounded overflow-hidden bg-black/20">
-                    <img src={image} className="w-full h-full object-contain" alt="inp" />
+                    <img 
+                      src={image} 
+                      className="w-full h-full object-contain cursor-pointer hover:opacity-80" 
+                      alt="inp"
+                      onClick={async () => {
+                        try {
+                          const response = await fetch(image);
+                          const blob = await response.blob();
+                          await navigator.clipboard.write([
+                            new ClipboardItem({ [blob.type]: blob })
+                          ]);
+                        } catch (error) {
+                          console.error('Failed to copy image:', error);
+                        }
+                      }}
+                      onContextMenu={async (e) => {
+                        e.preventDefault();
+                        try {
+                          const response = await fetch(image);
+                          const blob = await response.blob();
+                          await navigator.clipboard.write([
+                            new ClipboardItem({ [blob.type]: blob })
+                          ]);
+                          
+                          // Show visual feedback
+                          const img = e.currentTarget;
+                          const originalFilter = img.style.filter;
+                          img.style.filter = "brightness(1.2)";
+                          
+                          setTimeout(() => {
+                            img.style.filter = originalFilter;
+                          }, 300);
+                        } catch (error) {
+                          console.error('Failed to copy image:', error);
+                        }
+                      }}
+                      title="Click or right-click to copy"
+                    />
                   </div>
                 )}
                 <span className="text-xs">{label}</span>
@@ -566,29 +869,74 @@ function MergeNodeView({
         </div>
 
         <div className="mt-2">
-          <div className="text-xs text-white/70 mb-1">Output</div>
+          <div className="flex items-center justify-between mb-1">
+            <div className="text-xs text-white/70">Output</div>
+          </div>
           <div className="w-full min-h-[200px] max-h-[400px] rounded-xl bg-black/40 grid place-items-center">
             {node.output ? (
-              <img src={node.output} className="w-full h-auto max-h-[400px] object-contain rounded-xl" alt="output" />
+              <img 
+                src={node.output} 
+                className="w-full h-auto max-h-[400px] object-contain rounded-xl cursor-pointer hover:opacity-80 transition-opacity" 
+                alt="output"
+                onClick={async () => {
+                  if (node.output) {
+                    try {
+                      const response = await fetch(node.output);
+                      const blob = await response.blob();
+                      await navigator.clipboard.write([
+                        new ClipboardItem({ [blob.type]: blob })
+                      ]);
+                    } catch (error) {
+                      console.error('Failed to copy image:', error);
+                    }
+                  }
+                }}
+                onContextMenu={async (e) => {
+                  e.preventDefault();
+                  if (node.output) {
+                    try {
+                      const response = await fetch(node.output);
+                      const blob = await response.blob();
+                      await navigator.clipboard.write([
+                        new ClipboardItem({ [blob.type]: blob })
+                      ]);
+                      
+                      // Show visual feedback
+                      const img = e.currentTarget;
+                      const originalFilter = img.style.filter;
+                      img.style.filter = "brightness(1.2)";
+                      
+                      setTimeout(() => {
+                        img.style.filter = originalFilter;
+                      }, 500);
+                    } catch (error) {
+                      console.error('Failed to copy image:', error);
+                    }
+                  }
+                }}
+                title="Click or right-click to copy image to clipboard"
+              />
             ) : (
               <span className="text-white/40 text-xs py-16">Run merge to see result</span>
             )}
           </div>
           {node.output && (
-            <Button
-              className="w-full mt-2"
-              variant="secondary"
-              onClick={() => {
-                const link = document.createElement('a');
-                link.href = node.output as string;
-                link.download = `merge-${Date.now()}.png`;
-                document.body.appendChild(link);
-                link.click();
-                document.body.removeChild(link);
-              }}
-            >
-              📥 Download Merged Image
-            </Button>
+            <div className="mt-2">
+              <Button
+                className="w-full"
+                variant="secondary"
+                onClick={() => {
+                  const link = document.createElement('a');
+                  link.href = node.output as string;
+                  link.download = `merge-${Date.now()}.png`;
+                  document.body.appendChild(link);
+                  link.click();
+                  document.body.removeChild(link);
+                }}
+              >
+                📥 Download Merged Image
+              </Button>
+            </div>
           )}
           {node.error && (
             <div className="mt-2">
@@ -635,13 +983,75 @@ export default function EditorPage() {
     scaleRef.current = scale;
   }, [scale]);
 
+  // HF OAUTH CHECK
+  useEffect(() => {
+    (async () => {
+      setIsCheckingAuth(true);
+      try {
+        // Handle OAuth redirect if present
+        const oauth = await oauthHandleRedirectIfPresent();
+        if (oauth) {
+          // Store the token server-side
+          await fetch('/api/auth/callback', {
+            method: 'POST',
+            body: JSON.stringify({ hf_token: oauth.accessToken }),
+            headers: { 'Content-Type': 'application/json' }
+          });
+          setIsHfProLoggedIn(true);
+        } else {
+          // Check if already logged in
+          const response = await fetch('/api/auth/callback', { method: 'GET' });
+          if (response.ok) {
+            const data = await response.json();
+            setIsHfProLoggedIn(data.isLoggedIn);
+          }
+        }
+      } catch (error) {
+        console.error('OAuth error:', error);
+      } finally {
+        setIsCheckingAuth(false);
+      }
+    })();
+  }, []);
+
+  // HF PRO LOGIN HANDLER
+  const handleHfProLogin = async () => {
+    if (isHfProLoggedIn) {
+      // Logout: clear the token
+      try {
+        await fetch('/api/auth/callback', { method: 'DELETE' });
+        setIsHfProLoggedIn(false);
+      } catch (error) {
+        console.error('Logout error:', error);
+      }
+    } else {
+      // Login with HF OAuth
+      const clientId = process.env.NEXT_PUBLIC_OAUTH_CLIENT_ID;
+      if (!clientId) {
+        console.error('OAuth client ID not configured');
+        alert('OAuth client ID not configured. Please check environment variables.');
+        return;
+      }
+      
+      window.location.href = await oauthLoginUrl({
+        clientId,
+        redirectUrl: `${window.location.origin}/api/auth/callback`
+      });
+    }
+  };
+
   // Connection dragging state
   const [draggingFrom, setDraggingFrom] = useState<string | null>(null);
   const [dragPos, setDragPos] = useState<{x: number, y: number} | null>(null);
   
-  // API Token state
-  const [apiToken, setApiToken] = useState<string>("");
+  // API Token state (restored for manual review)
+  const [apiToken, setApiToken] = useState("");
   const [showHelpSidebar, setShowHelpSidebar] = useState(false);
+  
+  // HF PRO AUTHENTICATION
+  const [isHfProLoggedIn, setIsHfProLoggedIn] = useState(false);
+  const [isCheckingAuth, setIsCheckingAuth] = useState(true);
+
 
   const characters = nodes.filter((n) => n.type === "CHARACTER") as CharacterNode[];
   const merges = nodes.filter((n) => n.type === "MERGE") as MergeNode[];
@@ -720,6 +1130,7 @@ export default function EditorPage() {
     setNodes((prev) => prev.map((n) => (n.id === id ? { ...n, ...updates } : n)));
   };
 
+
   // Handle single input connections for new nodes
   const handleEndSingleConnection = (nodeId: string) => {
     if (draggingFrom) {
@@ -778,17 +1189,39 @@ export default function EditorPage() {
   };
   
   // Helper to extract configuration from a node
-  const getNodeConfiguration = (node: AnyNode): any => {
-    const config: any = {};
+  const getNodeConfiguration = (node: AnyNode): Record<string, unknown> => {
+    const config: Record<string, unknown> = {};
     
     switch (node.type) {
       case "BACKGROUND":
         if ((node as BackgroundNode).backgroundType) {
-          config.backgroundType = (node as BackgroundNode).backgroundType;
-          config.backgroundColor = (node as BackgroundNode).backgroundColor;
-          config.backgroundImage = (node as BackgroundNode).backgroundImage;
-          config.customBackgroundImage = (node as BackgroundNode).customBackgroundImage;
-          config.customPrompt = (node as BackgroundNode).customPrompt;
+          const bgNode = node as BackgroundNode;
+          config.backgroundType = bgNode.backgroundType;
+          config.backgroundColor = bgNode.backgroundColor;
+          config.backgroundImage = bgNode.backgroundImage;
+          config.customBackgroundImage = bgNode.customBackgroundImage;
+          config.customPrompt = bgNode.customPrompt;
+          
+          // Gradient properties
+          if (bgNode.backgroundType === "gradient") {
+            config.gradientDirection = bgNode.gradientDirection;
+            config.gradientStartColor = bgNode.gradientStartColor;
+            config.gradientEndColor = bgNode.gradientEndColor;
+          }
+          
+          // City scene properties
+          if (bgNode.backgroundType === "city") {
+            config.citySceneType = bgNode.citySceneType;
+            config.cityTimeOfDay = bgNode.cityTimeOfDay;
+          }
+          
+          // Photo studio properties
+          if (bgNode.backgroundType === "photostudio") {
+            config.studioSetup = bgNode.studioSetup;
+            config.studioBackgroundColor = bgNode.studioBackgroundColor;
+            config.studioLighting = bgNode.studioLighting;
+            config.faceCamera = bgNode.faceCamera;
+          }
         }
         break;
       case "CLOTHES":
@@ -821,6 +1254,7 @@ export default function EditorPage() {
         if (cam.bokeh && cam.bokeh !== "None") config.bokeh = cam.bokeh;
         if (cam.composition && cam.composition !== "None") config.composition = cam.composition;
         if (cam.aspectRatio && cam.aspectRatio !== "None") config.aspectRatio = cam.aspectRatio;
+        if (cam.motionBlur && cam.motionBlur !== "None") config.motionBlur = cam.motionBlur;
         break;
       case "AGE":
         if ((node as AgeNode).targetAge) {
@@ -830,7 +1264,7 @@ export default function EditorPage() {
       case "FACE":
         const face = node as FaceNode;
         if (face.faceOptions) {
-          const opts: any = {};
+          const opts: Record<string, unknown> = {};
           if (face.faceOptions.removePimples) opts.removePimples = true;
           if (face.faceOptions.addSunglasses) opts.addSunglasses = true;
           if (face.faceOptions.addHat) opts.addHat = true;
@@ -848,6 +1282,18 @@ export default function EditorPage() {
           }
         }
         break;
+      case "LIGHTNING":
+        if ((node as LightningNode).lightingPrompt && (node as LightningNode).selectedLighting) {
+          config.lightingPrompt = (node as LightningNode).lightingPrompt;
+          config.selectedLighting = (node as LightningNode).selectedLighting;
+        }
+        break;
+      case "POSES":
+        if ((node as PosesNode).posePrompt && (node as PosesNode).selectedPose) {
+          config.posePrompt = (node as PosesNode).posePrompt;
+          config.selectedPose = (node as PosesNode).selectedPose;
+        }
+        break;
     }
     
     return config;
@@ -961,7 +1407,6 @@ export default function EditorPage() {
       
       // If we found unprocessed merges, we need to execute them first
       if (unprocessedMerges.length > 0 && !inputImage) {
-        console.log(`Found ${unprocessedMerges.length} unprocessed MERGE nodes in chain. Processing them first...`);
         
         // Process each merge node
         for (const merge of unprocessedMerges) {
@@ -1028,10 +1473,7 @@ export default function EditorPage() {
     
     // Show info about batch processing
     if (unprocessedNodeCount > 1) {
-      console.log(`🚀 Combining ${unprocessedNodeCount} node transformations into ONE API call`);
-      console.log("Combined parameters:", params);
     } else {
-      console.log("Processing single node:", node.type);
     }
 
     // Set loading state for all nodes being processed
@@ -1050,7 +1492,6 @@ export default function EditorPage() {
       
       // Check if params contains custom images and validate them
       if (params.clothesImage) {
-        console.log("[Process] Clothes image size:", (params.clothesImage.length / 1024).toFixed(2) + "KB");
         // Validate it's a proper data URL
         if (!params.clothesImage.startsWith('data:') && !params.clothesImage.startsWith('http') && !params.clothesImage.startsWith('/')) {
           throw new Error("Invalid clothes image format. Please upload a valid image.");
@@ -1058,7 +1499,6 @@ export default function EditorPage() {
       }
       
       if (params.customBackgroundImage) {
-        console.log("[Process] Custom background size:", (params.customBackgroundImage.length / 1024).toFixed(2) + "KB");
         // Validate it's a proper data URL
         if (!params.customBackgroundImage.startsWith('data:') && !params.customBackgroundImage.startsWith('http') && !params.customBackgroundImage.startsWith('/')) {
           throw new Error("Invalid background image format. Please upload a valid image.");
@@ -1066,12 +1506,28 @@ export default function EditorPage() {
       }
       
       // Log request details for debugging
-      console.log("[Process] Sending request with:", {
-        hasImage: !!inputImage,
-        imageSize: inputImage ? (inputImage.length / 1024).toFixed(2) + "KB" : 0,
-        paramsKeys: Object.keys(params),
-        nodeType: node.type
+      
+      // ORIGINAL PROCESSING LOGIC RESTORED (HF processing commented out)
+      /*
+      // Only use HF + fal.ai processing
+      if (!isHfProLoggedIn) {
+        setNodes(prev => prev.map(n => 
+          n.id === nodeId ? { ...n, error: "Please login with HF Pro to use fal.ai processing", isRunning: false } : n
+        ));
+        return;
+      }
+
+      // Make a SINGLE API call with fal.ai processing
+      const res = await fetch("/api/hf-process", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          type: "COMBINED", 
+          image: inputImage, 
+          params
+        }),
       });
+      */
       
       // Make a SINGLE API call with all accumulated parameters
       const res = await fetch("/api/process", {
@@ -1094,7 +1550,13 @@ export default function EditorPage() {
       }
 
       const data = await res.json();
-      if (!res.ok) throw new Error(data.error || "Processing failed");
+      if (!res.ok) {
+        // Handle both string and object error formats
+        const errorMessage = typeof data.error === 'string' 
+          ? data.error 
+          : data.error?.message || JSON.stringify(data.error) || "Processing failed";
+        throw new Error(errorMessage);
+      }
 
       // Only update the current node with the output
       // Don't show output in intermediate nodes - they were just used for configuration
@@ -1109,10 +1571,14 @@ export default function EditorPage() {
         }
         return n;
       }));
+
+      // Add to node's history
+      const description = unprocessedNodeCount > 1 
+        ? `Combined ${unprocessedNodeCount} transformations`
+        : `${node.type} transformation`;
+      
       
       if (unprocessedNodeCount > 1) {
-        console.log(`✅ Successfully applied ${unprocessedNodeCount} transformations in ONE API call!`);
-        console.log(`Saved ${unprocessedNodeCount - 1} API calls by combining transformations`);
       }
     } catch (e: any) {
       console.error("Process error:", e);
@@ -1232,14 +1698,22 @@ export default function EditorPage() {
     }
     
     // Log merge details for debugging
-    console.log("[Merge] Processing merge with:", {
-      imageCount: mergeImages.length,
-      imageSizes: mergeImages.map(img => (img.length / 1024).toFixed(2) + "KB"),
-      labels: inputData.map(d => d.label)
-    });
     
     const prompt = generateMergePrompt(inputData);
     
+    // ORIGINAL MERGE LOGIC RESTORED (HF processing commented out)
+    /*
+    const res = await fetch("/api/hf-process", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ 
+        type: "MERGE", 
+        images: mergeImages, 
+        prompt 
+      }),
+    });
+    */
+    
     // Use the process route instead of merge route
     const res = await fetch("/api/process", {
       method: "POST",
@@ -1307,13 +1781,28 @@ export default function EditorPage() {
       if (inputData.length < 2) throw new Error("Connect at least two nodes with images (CHARACTER nodes or processed nodes).");
       
       // Debug: Log what we're sending
-      console.log("🔄 Merging nodes:", inputData.map(d => d.label).join(", "));
-      console.log("📷 Image URLs being sent:", inputData.map(d => d.image.substring(0, 100) + "..."));
       
       // Generate dynamic prompt based on number of inputs
       const prompt = generateMergePrompt(inputData);
       const imgs = inputData.map(d => d.image);
 
+      // ORIGINAL RUNMERGE LOGIC RESTORED (HF processing commented out)
+      /*
+      if (!isHfProLoggedIn) {
+        throw new Error("Please login with HF Pro to use fal.ai processing");
+      }
+
+      const res = await fetch("/api/hf-process", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ 
+          type: "MERGE",
+          images: imgs, 
+          prompt
+        }),
+      });
+      */
+
       // Use the process route with MERGE type
       const res = await fetch("/api/process", {
         method: "POST",
@@ -1345,6 +1834,18 @@ export default function EditorPage() {
       }
       const out = js.image || (js.images?.[0] as string) || null;
       setNodes((prev) => prev.map((n) => (n.id === mergeId && n.type === "MERGE" ? { ...n, output: out, isRunning: false } : n)));
+      
+      // Add merge result to node's history
+      if (out) {
+        const inputLabels = merge.inputs.map((id, index) => {
+          const inputNode = nodes.find(n => n.id === id);
+          if (inputNode?.type === "CHARACTER") {
+            return (inputNode as CharacterNode).label || `Character ${index + 1}`;
+          }
+          return `${inputNode?.type || 'Node'} ${index + 1}`;
+        });
+        
+      }
     } catch (e: any) {
       console.error("Merge error:", e);
       setNodes((prev) => prev.map((n) => (n.id === mergeId && n.type === "MERGE" ? { ...n, isRunning: false, error: e?.message || "Error" } : n)));
@@ -1409,7 +1910,7 @@ export default function EditorPage() {
           if (inputNode) {
             const start = getNodeOutputPort(inputNode);
             const end = getNodeInputPort(node);
-            const isProcessing = merge.isRunning || (inputNode as any).isRunning;
+            const isProcessing = merge.isRunning; // Only animate to the currently processing merge node
             paths.push({ 
               path: createPath(start.x, start.y, end.x, end.y),
               processing: isProcessing
@@ -1423,7 +1924,7 @@ export default function EditorPage() {
         if (inputNode) {
           const start = getNodeOutputPort(inputNode);
           const end = getNodeInputPort(node);
-          const isProcessing = (node as any).isRunning || (inputNode as any).isRunning;
+          const isProcessing = (node as any).isRunning; // Only animate to the currently processing node
           paths.push({ 
             path: createPath(start.x, start.y, end.x, end.y),
             processing: isProcessing
@@ -1496,7 +1997,30 @@ export default function EditorPage() {
     const rect = containerRef.current!.getBoundingClientRect();
     const world = screenToWorld(e.clientX, e.clientY, rect, tx, ty, scale);
     setMenuWorld(world);
-    setMenuPos({ x: e.clientX - rect.left, y: e.clientY - rect.top });
+    
+    // Menu dimensions
+    const menuWidth = 224; // w-56 = 224px
+    const menuHeight = 320; // Approximate height with max-h-[300px] + padding
+    
+    // Calculate position relative to container
+    let x = e.clientX - rect.left;
+    let y = e.clientY - rect.top;
+    
+    // Adjust if menu would go off right edge
+    if (x + menuWidth > rect.width) {
+      x = rect.width - menuWidth - 10;
+    }
+    
+    // Adjust if menu would go off bottom edge  
+    if (y + menuHeight > rect.height) {
+      y = rect.height - menuHeight - 10;
+    }
+    
+    // Ensure minimum margins from edges
+    x = Math.max(10, x);
+    y = Math.max(10, y);
+    
+    setMenuPos({ x, y });
     setMenuOpen(true);
   };
 
@@ -1535,6 +2059,15 @@ export default function EditorPage() {
       case "FACE":
         setNodes(prev => [...prev, { ...commonProps, type: "FACE", faceOptions: {} } as FaceNode]);
         break;
+      case "EDIT":
+        setNodes(prev => [...prev, { ...commonProps, type: "EDIT" } as EditNode]);
+        break;
+      case "LIGHTNING":
+        setNodes(prev => [...prev, { ...commonProps, type: "LIGHTNING", lightingStrength: 75 } as LightningNode]);
+        break;
+      case "POSES":
+        setNodes(prev => [...prev, { ...commonProps, type: "POSES", poseStrength: 60 } as PosesNode]);
+        break;
     }
     setMenuOpen(false);
   };
@@ -1545,7 +2078,8 @@ export default function EditorPage() {
         <h1 className="text-lg font-semibold tracking-wide">
           <span className="mr-2" aria-hidden>🍌</span>Nano Banana Editor
         </h1>
-        <div className="flex items-center gap-2">
+        <div className="flex items-center gap-3">
+          {/* ORIGINAL API TOKEN INPUT RESTORED */}
           <label htmlFor="api-token" className="text-sm font-medium text-muted-foreground">
             API Token:
           </label>
@@ -1557,15 +2091,18 @@ export default function EditorPage() {
             onChange={(e) => setApiToken(e.target.value)}
             className="w-64"
           />
+          
           <Button
-            variant="ghost"
+            variant="outline"
             size="sm"
-            className="h-8 w-8 p-0 rounded-full hover:bg-red-50 dark:hover:bg-red-900/20"
+            className="h-8 px-3"
             type="button"
             onClick={() => setShowHelpSidebar(true)}
           >
-            <span className="text-sm font-medium text-red-500 hover:text-red-600">?</span>
+            Help
           </Button>
+          
+
         </div>
       </header>
 
@@ -1593,6 +2130,27 @@ export default function EditorPage() {
               </div>
               
               <div className="space-y-6">
+                {/* ORIGINAL HELP CONTENT RESTORED (HF help commented out) */}
+                {/*
+                <div>
+                  <h3 className="font-semibold mb-3 text-foreground">🤗 HF Pro Login</h3>
+                  <div className="text-sm text-muted-foreground space-y-3">
+                    <div className="p-3 bg-primary/10 border border-primary/20 rounded-lg">
+                      <p className="font-medium text-primary mb-2">Step 1: Login with Hugging Face</p>
+                      <p>Click "Login HF PRO" to authenticate with your Hugging Face account.</p>
+                    </div>
+                    <div className="p-3 bg-secondary border border-border rounded-lg">
+                      <p className="font-medium text-secondary-foreground mb-2">Step 2: Access fal.ai Models</p>
+                      <p>Once logged in, you'll have access to fal.ai's Gemini 2.5 Flash Image models.</p>
+                    </div>
+                    <div className="p-3 bg-accent border border-border rounded-lg">
+                      <p className="font-medium text-accent-foreground mb-2">Step 3: Start Creating</p>
+                      <p>Use the powerful fal.ai models for image generation, merging, editing, and style transfers.</p>
+                    </div>
+                  </div>
+                </div>
+                */}
+                
                 <div>
                   <h3 className="font-semibold mb-3 text-foreground">🔑 API Token Setup</h3>
                   <div className="text-sm text-muted-foreground space-y-3">
@@ -1626,6 +2184,13 @@ export default function EditorPage() {
                 <div className="p-4 bg-muted border border-border rounded-lg">
                   <h4 className="font-semibold text-foreground mb-2">🔒 Privacy & Security</h4>
                   <div className="text-sm text-muted-foreground space-y-1">
+                    {/* ORIGINAL PRIVACY INFO RESTORED (HF privacy info commented out) */}
+                    {/*
+                    <p>• Your HF token is stored securely in HTTP-only cookies</p>
+                    <p>• Authentication happens through Hugging Face OAuth</p>
+                    <p>• You can logout anytime to revoke access</p>
+                    <p>• Processing happens via fal.ai's secure infrastructure</p>
+                    */}
                     <p>• Your API token is stored locally in your browser</p>
                     <p>• Tokens are never sent to our servers</p>
                     <p>• Keep your API key secure and don't share it</p>
@@ -1827,6 +2392,32 @@ export default function EditorPage() {
                       onUpdatePosition={updateNodePosition}
                     />
                   );
+                case "LIGHTNING":
+                  return (
+                    <LightningNodeView
+                      key={node.id}
+                      node={node as LightningNode}
+                      onDelete={deleteNode}
+                      onUpdate={updateNode}
+                      onStartConnection={handleStartConnection}
+                      onEndConnection={handleEndSingleConnection}
+                      onProcess={processNode}
+                      onUpdatePosition={updateNodePosition}
+                    />
+                  );
+                case "POSES":
+                  return (
+                    <PosesNodeView
+                      key={node.id}
+                      node={node as PosesNode}
+                      onDelete={deleteNode}
+                      onUpdate={updateNode}
+                      onStartConnection={handleStartConnection}
+                      onEndConnection={handleEndSingleConnection}
+                      onProcess={processNode}
+                      onUpdatePosition={updateNodePosition}
+                    />
+                  );
                 default:
                   return null;
               }
@@ -1841,7 +2432,10 @@ export default function EditorPage() {
             onMouseLeave={() => setMenuOpen(false)}
           >
             <div className="px-3 py-2 text-xs text-white/60">Add node</div>
-            <div className="max-h-[400px] overflow-y-auto">
+            <div 
+              className="max-h-[300px] overflow-y-auto scrollbar-thin pr-1"
+              onWheel={(e) => e.stopPropagation()}
+            >
               <button className="w-full text-left px-3 py-2 text-sm hover:bg-white/10 rounded-lg" onClick={() => addFromMenu("CHARACTER")}>CHARACTER</button>
               <button className="w-full text-left px-3 py-2 text-sm hover:bg-white/10 rounded-lg" onClick={() => addFromMenu("MERGE")}>MERGE</button>
               <button className="w-full text-left px-3 py-2 text-sm hover:bg-white/10 rounded-lg" onClick={() => addFromMenu("BACKGROUND")}>BACKGROUND</button>
@@ -1851,6 +2445,8 @@ export default function EditorPage() {
               <button className="w-full text-left px-3 py-2 text-sm hover:bg-white/10 rounded-lg" onClick={() => addFromMenu("CAMERA")}>CAMERA</button>
               <button className="w-full text-left px-3 py-2 text-sm hover:bg-white/10 rounded-lg" onClick={() => addFromMenu("AGE")}>AGE</button>
               <button className="w-full text-left px-3 py-2 text-sm hover:bg-white/10 rounded-lg" onClick={() => addFromMenu("FACE")}>FACE</button>
+              <button className="w-full text-left px-3 py-2 text-sm hover:bg-white/10 rounded-lg" onClick={() => addFromMenu("LIGHTNING")}>LIGHTNING</button>
+              <button className="w-full text-left px-3 py-2 text-sm hover:bg-white/10 rounded-lg" onClick={() => addFromMenu("POSES")}>POSES</button>
             </div>
           </div>
         )}

lib/utils.ts

@@ -1,6 +1,34 @@
-import { clsx, type ClassValue } from "clsx"
-import { twMerge } from "tailwind-merge"
+/**
+ * UTILITY FUNCTIONS
+ * 
+ * Common utility functions used throughout the application.
+ * Currently contains the `cn` function for combining CSS class names intelligently.
+ */
 
+import { clsx, type ClassValue } from "clsx"      // Utility for conditional class names
+import { twMerge } from "tailwind-merge"          // Utility for merging Tailwind classes
+
+/**
+ * Combine and merge CSS class names intelligently
+ * 
+ * This function combines the power of two popular utilities:
+ * - `clsx`: Handles conditional class names and various input types
+ * - `twMerge`: Intelligently merges Tailwind CSS classes, resolving conflicts
+ * 
+ * Key benefits:
+ * - Handles conditional classes: cn("base", condition && "conditional")
+ * - Resolves Tailwind conflicts: cn("p-4", "p-2") → "p-2" (last one wins)
+ * - Removes duplicates and undefined values
+ * - Supports arrays, objects, and mixed types
+ * 
+ * @param inputs Variable number of class values (strings, objects, arrays, etc.)
+ * @returns Single string with merged and optimized class names
+ * 
+ * @example
+ * cn("btn", "btn-primary", isActive && "active")
+ * cn("p-4 m-2", { "bg-red-500": hasError, "bg-green-500": isSuccess })
+ * cn(["base-class", "modifier"], conditionalClass)
+ */
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))
 }

next.config.ts

@@ -8,11 +8,6 @@ const nextConfig: NextConfig = {
   serverRuntimeConfig: {
     bodySizeLimit: '50mb',
   },
-  api: {
-    bodyParser: {
-      sizeLimit: '50mb',
-    },
-  },
 };
 
 export default nextConfig;

package-lock.json

@@ -8,7 +8,10 @@
       "name": "banana",
       "version": "0.1.0",
       "dependencies": {
+        "@fal-ai/serverless-client": "^0.15.0",
         "@google/genai": "^1.17.0",
+        "@huggingface/hub": "^2.6.3",
+        "@huggingface/inference": "^4.8.0",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.1",
         "lucide-react": "^0.542.0",
@@ -216,6 +219,20 @@
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       }
     },
+    "node_modules/@fal-ai/serverless-client": {
+      "version": "0.15.0",
+      "resolved": "https://registry.npmjs.org/@fal-ai/serverless-client/-/serverless-client-0.15.0.tgz",
+      "integrity": "sha512-4Vuocu0342OijAN6xO/lwohDV7h90LbkTnOAEwH+pYvMFVC6RYmHS4GILc/wnOWBTw+iFlZFEKlljEVolkjVfg==",
+      "license": "MIT",
+      "dependencies": {
+        "@msgpack/msgpack": "^3.0.0-beta2",
+        "eventsource-parser": "^1.1.2",
+        "robot3": "^0.4.1"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
     "node_modules/@google/genai": {
       "version": "1.17.0",
       "resolved": "https://registry.npmjs.org/@google/genai/-/genai-1.17.0.tgz",
@@ -237,6 +254,52 @@
         }
       }
     },
+    "node_modules/@huggingface/hub": {
+      "version": "2.6.3",
+      "resolved": "https://registry.npmjs.org/@huggingface/hub/-/hub-2.6.3.tgz",
+      "integrity": "sha512-IEZ67adV+gWqg98A//mU0Ed+Q6xGPQxMfK+aV36b0Ww7R4EXG1O0zyiCcbLE/cvryfCD8+PNEwQgiPU+v63tsQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@huggingface/tasks": "^0.19.45"
+      },
+      "bin": {
+        "hfjs": "dist/cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "cli-progress": "^3.12.0"
+      }
+    },
+    "node_modules/@huggingface/inference": {
+      "version": "4.8.0",
+      "resolved": "https://registry.npmjs.org/@huggingface/inference/-/inference-4.8.0.tgz",
+      "integrity": "sha512-Eq98EAXqYn4rKMfrbEXuhc3IjKfaeIO6eXNOZk9xk6v5akrIWRtd6d1h0fjAWyX4zRbdUpXRh6MvsqXnzGvXCA==",
+      "license": "MIT",
+      "dependencies": {
+        "@huggingface/jinja": "^0.5.1",
+        "@huggingface/tasks": "^0.19.45"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@huggingface/jinja": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/@huggingface/jinja/-/jinja-0.5.1.tgz",
+      "integrity": "sha512-yUZLld4lrM9iFxHCwFQ7D1HW2MWMwSbeB7WzWqFYDWK+rEb+WldkLdAJxUPOmgICMHZLzZGVcVjFh3w/YGubng==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@huggingface/tasks": {
+      "version": "0.19.45",
+      "resolved": "https://registry.npmjs.org/@huggingface/tasks/-/tasks-0.19.45.tgz",
+      "integrity": "sha512-lM3QOgbfkGZ5gAZOYWOmzMM6BbKcXOIHjgnUAoymTdZEcEcGSr0vy/LWGEiK+vBXC4vU+sCT+WNoA/JZ8TEWdA==",
+      "license": "MIT"
+    },
     "node_modules/@humanfs/core": {
       "version": "0.19.1",
       "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
@@ -770,6 +833,15 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@msgpack/msgpack": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@msgpack/msgpack/-/msgpack-3.1.2.tgz",
+      "integrity": "sha512-JEW4DEtBzfe8HvUYecLU9e6+XJnKDlUAIve8FvPzF3Kzs6Xo/KuZkZJsDH0wJXl/qEZbeeE7edxDNY3kMs39hQ==",
+      "license": "ISC",
+      "engines": {
+        "node": ">= 18"
+      }
+    },
     "node_modules/@napi-rs/wasm-runtime": {
       "version": "0.2.12",
       "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-0.2.12.tgz",
@@ -1942,6 +2014,16 @@
         "url": "https://github.com/sponsors/epoberezkin"
       }
     },
+    "node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/ansi-styles": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
@@ -2373,6 +2455,19 @@
         "url": "https://polar.sh/cva"
       }
     },
+    "node_modules/cli-progress": {
+      "version": "3.12.0",
+      "resolved": "https://registry.npmjs.org/cli-progress/-/cli-progress-3.12.0.tgz",
+      "integrity": "sha512-tRkV3HJ1ASwm19THiiLIXLO7Im7wlTuKnvkYaTkyoAPefqjNg7W7DHKUlGRxy9vxDvbyCYQkQozvptuMkGCg8A==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "string-width": "^4.2.3"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/client-only": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
@@ -3267,6 +3362,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/eventsource-parser": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/eventsource-parser/-/eventsource-parser-1.1.2.tgz",
+      "integrity": "sha512-v0eOBUbiaFojBu2s2NPBfYUoRR9GjcDNvCXVaqEf5vVfpIAh9f8RCo4vXTP8c63QRKCFwoLpMpTdPwwhEKVgzA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.18"
+      }
+    },
     "node_modules/extend": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
@@ -4001,6 +4105,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/is-generator-function": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.1.0.tgz",
@@ -5432,6 +5546,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/robot3": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/robot3/-/robot3-0.4.1.tgz",
+      "integrity": "sha512-hzjy826lrxzx8eRgv80idkf8ua1JAepRc9Efdtj03N3KNJuznQCPlyCJ7gnUmDFwZCLQjxy567mQVKmdv2BsXQ==",
+      "license": "BSD-2-Clause"
+    },
     "node_modules/run-parallel": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
@@ -5781,6 +5901,28 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/string-width/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/string.prototype.includes": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/string.prototype.includes/-/string.prototype.includes-2.0.1.tgz",
@@ -5894,6 +6036,19 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/strip-bom": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",

package.json

@@ -9,7 +9,10 @@
     "lint": "eslint"
   },
   "dependencies": {
+    "@fal-ai/serverless-client": "^0.15.0",
     "@google/genai": "^1.17.0",
+    "@huggingface/hub": "^2.6.3",
+    "@huggingface/inference": "^4.8.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "lucide-react": "^0.542.0",