Upload 53 files

.dockerignore

@@ -0,0 +1,56 @@
+# Dependencies
+node_modules
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Next.js
+.next/
+out/
+
+# Production
+build
+dist
+
+# Environment variables
+.env*
+
+# Debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Vercel
+.vercel
+
+# TypeScript
+*.tsbuildinfo
+next-env.d.ts
+
+# OS generated files
+.DS_Store
+.DS_Store?
+._*
+.Spotlight-V100
+.Trashes
+ehthumbs.db
+Thumbs.db
+
+# IDE
+.vscode
+.idea
+*.swp
+*.swo
+
+# Logs
+logs
+*.log
+
+# Git
+.git
+.gitignore
+README.md
+
+# Docker
+Dockerfile
+.dockerignore

README.md

@@ -5,14 +5,7 @@ colorFrom: yellow
 colorTo: yellow
 sdk: docker
 pinned: false
-app_port: 7860
-hf_oauth: true
-# optional, default duration is 8 hours/480 minutes. Max duration is 30 days/43200 minutes.
-hf_oauth_expiration_minutes: 480
-# optional, see "Scopes" below. "openid profile" is always included.
-hf_oauth_scopes:
- - manage-repos
- - inference-api
+app_port: 3000
 ---
 
 # Nano Banana Node Editor 🍌

app/api/hf-process/route.ts

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

app/api/improve-prompt/route.ts

@@ -18,7 +18,6 @@ export async function POST(req: NextRequest) {
     const body = await req.json() as {
       prompt: string;
       type?: string; // 'background', 'edit', etc.
-      apiToken?: string; // User's Google AI API token
     };
 
     if (!body.prompt?.trim()) {
@@ -38,11 +37,11 @@ export async function POST(req: NextRequest) {
       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;
+    // 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 provided. Please ${isHfProUser ? 'enter your Google Gemini API token in the top right' : 'login with HF Pro or enter your Google Gemini API token'}.` },
+        { error: `API key not configured. Please ${isHfProUser ? 'contact support' : 'login with HF Pro'}.` },
         { status: 500 }
       );
     }

app/api/process/route.ts

@@ -487,7 +487,6 @@ The result should look like all subjects were photographed together in the same
       // 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";
       
-      // 1. Focal Length (Lens Choice) - First priority as it defines perspective
       if (params.focalLength) {
         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";
@@ -510,155 +509,77 @@ The result should look like all subjects were photographed together in the same
         }
       }
       
-      // 2. Aperture (Depth of Field Control) - Core exposure triangle component
       if (params.aperture) {
-        if (params.aperture === "f/0.95") {
-          cameraPrompt += `, shot wide open at f/0.95 for extreme shallow depth of field, ethereal bokeh, and cinematic subject isolation with dreamy background blur`;
-        } else if (params.aperture === "f/1.2") {
-          cameraPrompt += `, captured at f/1.2 for beautiful shallow depth of field, creating that signature cinematic look with smooth background separation and creamy bokeh`;
+        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 += `, shot at f/1.4 for controlled shallow depth of field, maintaining subject sharpness while creating pleasing background blur and professional bokeh quality`;
-        } else if (params.aperture === "f/1.8") {
-          cameraPrompt += `, captured at f/1.8 for balanced depth of field, keeping key subjects sharp while maintaining smooth background separation and natural bokeh`;
-        } else if (params.aperture === "f/2") {
-          cameraPrompt += `, shot at f/2 for moderate depth of field with excellent subject isolation, maintaining cinematic quality and professional sharpness`;
+          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 += `, photographed at f/2.8 for optimal lens sharpness with controlled depth of field, ideal for professional portrait and documentary work`;
+          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 += `, captured at f/4 for extended depth of field with excellent overall sharpness, perfect for group portraits and environmental photography`;
+          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 += `, shot at f/5.6 for deep focus with maximum lens sharpness, ideal for landscape and architectural photography where detail is paramount`;
-        } else if (params.aperture === "f/8") {
-          cameraPrompt += `, photographed at f/8 for optimal depth of field and corner-to-corner sharpness, the sweet spot for landscape and travel photography`;
-        } else if (params.aperture === "f/11") {
-          cameraPrompt += `, captured at f/11 for extensive depth of field with front-to-back sharpness, perfect for sweeping landscapes and architectural details`;
-        } else if (params.aperture === "f/16") {
-          cameraPrompt += `, shot at f/16 for maximum depth of field with hyperfocal distance focusing, ensuring sharp detail from foreground to infinity`;
-        } else if (params.aperture === "f/22") {
-          cameraPrompt += `, photographed at f/22 for extreme depth of field with starburst effects on light sources, creating dramatic landscape and architectural imagery`;
+          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} with carefully controlled depth of field for optimal image quality`;
+          cameraPrompt += `, professionally exposed at ${params.aperture}`;
         }
       }
       
-      // 3. Shutter Speed (Motion Control) - Core exposure triangle component
-      if (params.shutterSpeed) {
-        if (params.shutterSpeed === "1/1000s") {
-          cameraPrompt += ", captured at 1/1000s shutter speed to freeze fast action and eliminate motion blur with tack-sharp precision";
-        } else if (params.shutterSpeed === "1/250s") {
-          cameraPrompt += ", shot at 1/250s shutter speed for optimal handheld photography with sharp subjects and minimal camera shake";
-        } else if (params.shutterSpeed === "1/30s") {
-          cameraPrompt += ", photographed at 1/30s shutter speed creating subtle motion blur while maintaining subject recognition";
-        } else if (params.shutterSpeed === "1/15s") {
-          cameraPrompt += ", captured at 1/15s shutter speed for intentional motion blur effects and dynamic movement trails";
-        } else if (params.shutterSpeed === "5s") {
-          cameraPrompt += ", shot with 5-second long exposure creating smooth motion blur, light trails, and ethereal atmospheric effects";
-        } else {
-          cameraPrompt += `, captured with ${params.shutterSpeed} shutter speed for controlled motion and exposure effects`;
-        }
-      }
-      
-      // 4. ISO (Sensor Sensitivity) - Final exposure triangle component
       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 1600") {
+        } 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 6400") {
-          cameraPrompt += ", filmed at ISO 6400 with artistic grain structure for gritty, realistic cinema aesthetics";
+        } 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`;
         }
       }
       
-      // 5. White Balance (Color Temperature) - Color accuracy foundation
-      if(params.whiteBalance) {
-        cameraPrompt += `, shot with ${params.whiteBalance} white balance`;
-      }
-      
-      // 6. Lighting Setup (Illumination Style) - Mood and atmosphere
       if (params.lighting) {
-        if (params.lighting === "Natural Light") {
-          cameraPrompt += ", naturally lit with soft, diffused daylight providing even illumination and organic shadow patterns";
-        } else if (params.lighting === "Golden Hour") {
+        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 Lighting") {
+        } 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 === "Rembrandt") {
-          cameraPrompt += ", lit with Rembrandt lighting creating a distinctive triangle of light on the cheek with dramatic chiaroscuro contrast between light and shadow";
-        } else if (params.lighting === "Split Lighting") {
-          cameraPrompt += ", illuminated with split lighting dividing the face into equal halves of light and shadow for dramatic and mysterious effect";
-        } else if (params.lighting === "Butterfly Lighting") {
-          cameraPrompt += ", lit with butterfly lighting from above creating a butterfly-shaped shadow under the nose for flattering beauty and glamour portraits";
-        } else if (params.lighting === "Loop Lighting") {
-          cameraPrompt += ", illuminated with loop lighting creating a small loop-shaped shadow from the nose for natural and versatile portrait lighting";
-        } else if (params.lighting === "Rim Lighting") {
-          cameraPrompt += ", backlit with rim lighting creating a glowing outline around the subject for dramatic separation and three-dimensional depth";
-        } else if (params.lighting === "Silhouette") {
-          cameraPrompt += ", backlit for silhouette effect with the subject outlined against bright background while facial details remain in shadow";
-        } else if (params.lighting === "High Key") {
-          cameraPrompt += ", lit with high-key lighting using bright, even illumination with minimal shadows for optimistic and clean aesthetic";
-        } else if (params.lighting === "Low Key") {
-          cameraPrompt += ", dramatically lit with low-key lighting emphasizing deep shadows and high contrast for moody and mysterious atmosphere";
+        } 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`;
         }
       }
       
-      // 7. Camera Angle (Perspective and Composition) - Visual storytelling
-      if (params.angle) {
-        if (params.angle === "low angle") {
-          cameraPrompt += ", shot from a low-angle perspective looking upward to convey power, dominance, and heroic stature";
-        } else if (params.angle === "bird's eye") {
-          cameraPrompt += ", captured from a bird's eye view directly overhead to show scale, context, and spatial relationships";
-        } else if (params.angle === "high angle") {
-          cameraPrompt += ", shot from a high-angle perspective looking downward to create vulnerability and diminish subject importance";
-        } else if (params.angle === "eye level") {
-          cameraPrompt += ", shot from eye level for a neutral, natural perspective that connects with the viewer";
-        } else if (params.angle === "over the shoulder") {
-          cameraPrompt += ", captured from an over-the-shoulder angle to establish character relationships and dialogue dynamics";
-        } else if (params.angle === "POV") {
-          cameraPrompt += ", shot from a first-person POV perspective to immerse the viewer in the subject's experience";
-        } else if (params.angle === "Dutch tilt") {
-          cameraPrompt += ", shot with a Dutch tilt angle creating diagonal lines to convey unease, tension, and disorientation";
-        } else if (params.angle === "worm's eye") {
-          cameraPrompt += ", captured from a worm's eye view at ground level looking up for extreme dramatic impact and scale";
-        } else {
-          cameraPrompt += `, shot from ${params.angle} camera angle`;
-        }
-      }
-      
-      // 8. Bokeh Quality (Out-of-Focus Rendering) - Aesthetic enhancement
       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 and rotational distortion effects typical of vintage Petzval-style lenses";
+          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 formed by straight aperture blades typical of cinema lenses";
-        } else if (params.bokeh === "Cat Eye Bokeh") {
-          cameraPrompt += ", featuring cat's eye bokeh with elliptical highlight distortion toward frame edges caused by optical vignetting and field curvature";
-        } else if (params.bokeh === "Bubble Bokeh") {
-          cameraPrompt += ", featuring soap bubble bokeh with bright-edged circular highlights and hollow centers characteristic of Meyer Optik Trioplan lenses";
-        } else if (params.bokeh === "Creamy Bokeh") {
-          cameraPrompt += ", featuring creamy bokeh with smooth gradient transitions and soft edge rendering for professional portrait aesthetics";
+          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`;
         }
       }
       
-      // 9. Motion Blur Effects (Dynamic Movement) - Creative motion control
       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, giving the moving background subjects a sense of motion blur movement";
+          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") {
@@ -668,7 +589,16 @@ The result should look like all subjects were photographed together in the same
         }
       }
       
-      // 10. Film Style Processing (Post-Production Look) - Final aesthetic treatment
+      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") {

app/globals.css

@@ -162,11 +162,13 @@ body {
 
 /* Nano Banana Editor - node visuals */
 .nb-node {
-  background: hsl(var(--card) / 0.9);
-  border: 1px solid hsl(var(--border) / 0.6);
-  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
+  background: hsl(var(--card) / 0.85);
+  color: hsl(var(--card-foreground));
+  border: 1px solid hsl(var(--border));
+  box-shadow: 0 10px 30px -10px hsl(var(--shadow) / 0.2), 0 4px 12px -4px hsl(var(--shadow) / 0.1);
   border-radius: var(--radius);
-  backdrop-filter: blur(6px);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
   /* Prevent blurring on zoom */
   image-rendering: -webkit-optimize-contrast;
   image-rendering: crisp-edges;
@@ -176,6 +178,12 @@ body {
   -moz-osx-font-smoothing: grayscale;
   backface-visibility: hidden;
   perspective: 1000px;
+  transition: box-shadow 0.2s ease, border-color 0.2s ease;
+}
+
+.nb-node:hover {
+  border-color: hsl(var(--ring) / 0.5);
+  box-shadow: 0 14px 40px -10px hsl(var(--shadow) / 0.3), 0 4px 12px -4px hsl(var(--shadow) / 0.2);
 }
 
 /* Prevent text selection on node elements except inputs */
@@ -189,54 +197,84 @@ body {
 .nb-node select {
   user-select: text;
   -webkit-user-select: text;
+  background: hsl(var(--background) / 0.5);
+  color: hsl(var(--foreground));
+  border: 1px solid hsl(var(--border));
+  border-radius: calc(var(--radius) - 4px);
+}
+
+.nb-node input:focus,
+.nb-node textarea:focus,
+.nb-node select:focus {
+  outline: none;
+  border-color: hsl(var(--ring));
+  box-shadow: 0 0 0 2px hsl(var(--ring) / 0.2);
 }
+
 .nb-node .nb-header {
-  background: linear-gradient(to bottom, hsl(var(--muted) / 0.35), hsl(var(--muted) / 0.08));
+  background: hsl(var(--muted) / 0.5);
+  border-bottom: 1px solid hsl(var(--border) / 0.5);
+  color: hsl(var(--foreground));
 }
+
 .nb-port {
-  width: 20px;
-  height: 20px;
+  width: 16px;
+  height: 16px;
   border-radius: 9999px;
-  border: 3px solid rgba(255,255,255,0.6);
-  background: hsl(var(--popover));
+  border: 2px solid hsl(var(--background));
+  background: hsl(var(--muted-foreground));
   cursor: crosshair;
   transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
   position: relative;
   user-select: none;
   -webkit-user-select: none;
+  box-shadow: 0 0 0 1px hsl(var(--border));
 }
+
 .nb-port:hover {
-  transform: scale(1.25);
-  background: hsl(var(--accent));
-  box-shadow: 0 0 12px hsl(var(--ring) / 0.4);
+  transform: scale(1.4);
+  background: hsl(var(--primary));
+  box-shadow: 0 0 0 4px hsl(var(--primary) / 0.2);
 }
-.nb-port.out { 
-  border-color: hsl(var(--primary)); 
+
+.nb-port.out {
+  background: hsl(var(--primary));
+  border-color: hsl(var(--background));
 }
-.nb-port.out:hover { 
+
+.nb-port.out:hover {
   background: hsl(var(--primary));
-  box-shadow: 0 0 16px hsl(var(--primary) / 0.6);
+  box-shadow: 0 0 0 4px hsl(var(--primary) / 0.3);
 }
-.nb-port.in { 
-  border-color: #34d399; 
+
+.nb-port.in {
+  background: hsl(var(--secondary-foreground));
+  border-color: hsl(var(--background));
 }
-.nb-port.in:hover { 
-  background: #34d399;
-  box-shadow: 0 0 16px rgba(52,211,153,0.6);
+
+.nb-port.in:hover {
+  background: hsl(var(--secondary-foreground));
+  box-shadow: 0 0 0 4px hsl(var(--secondary-foreground) / 0.3);
 }
 
 .nb-line {
-  stroke: #7c7c7c;
+  stroke: hsl(var(--muted-foreground));
   stroke-width: 2.5;
+  transition: stroke 0.2s ease, stroke-width 0.2s ease;
+}
+
+.nb-line.active {
+  stroke: hsl(var(--primary));
+  stroke-width: 3.5;
+  filter: drop-shadow(0 0 4px hsl(var(--primary) / 0.5));
 }
-.nb-line.active { stroke: #8b5cf6; }
 
 /* Canvas grid */
 .nb-canvas {
   background-color: hsl(var(--background));
   background-image:
-    radial-gradient(circle at 1px 1px, hsl(var(--muted-foreground) / 0.18) 1px, transparent 0),
-    radial-gradient(circle at 1px 1px, hsl(var(--muted-foreground) / 0.09) 1px, transparent 0);
+    radial-gradient(circle at 1px 1px, hsl(var(--muted-foreground) / 0.2) 1px, transparent 0),
+    radial-gradient(circle at 1px 1px, hsl(var(--muted-foreground) / 0.1) 1px, transparent 0);
   background-size: 20px 20px, 100px 100px;
 }
 
@@ -247,7 +285,8 @@ body {
 }
 
 .nb-node img {
-  image-rendering: auto; /* Keep images smooth */
+  image-rendering: auto;
+  /* Keep images smooth */
   image-rendering: -webkit-optimize-contrast;
 }
 
@@ -261,7 +300,7 @@ body {
 }
 
 /* Force GPU acceleration for transforms */
-.nb-canvas > div {
+.nb-canvas>div {
   transform-style: preserve-3d;
   -webkit-transform-style: preserve-3d;
 }
@@ -272,4 +311,4 @@ body {
     -webkit-backface-visibility: hidden;
     -webkit-transform: translateZ(0) scale(1.0, 1.0);
   }
-}
+}

app/layout.tsx

@@ -13,8 +13,10 @@
  */
 
 import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";  // Modern Google Fonts
-import "./globals.css";  // Tailwind CSS and global styles
+import { Geist, Geist_Mono } from "next/font/google";
+import "./globals.css";
+import { ThemeProvider } from "@/components/theme-provider";
+import { ModeToggle } from "@/components/mode-toggle";
 
 /**
  * Configure Geist Sans font
@@ -60,11 +62,19 @@ export default function RootLayout({
   children: React.ReactNode;  // Type-safe children prop
 }>) {
   return (
-    <html lang="en">
+    <html lang="en" suppressHydrationWarning>
       <body
         className={`${geistSans.variable} ${geistMono.variable} antialiased bg-background text-foreground font-sans`}
       >
-        {children}
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="system"
+          enableSystem
+          disableTransitionOnChange
+        >
+          {children}
+          <ModeToggle />
+        </ThemeProvider>
       </body>
     </html>
   );

app/nodes.tsx

@@ -89,7 +89,7 @@ async function copyImageToClipboard(dataUrl: string) {
     // Fetch the data URL and convert it to a Blob object
     const response = await fetch(dataUrl);          // Fetch the base64 data URL
     const blob = await response.blob();             // Convert response to Blob format
-    
+
     // The browser clipboard API only supports PNG format for images
     // If the image is not PNG, we need to convert it first
     if (blob.type !== 'image/png') {
@@ -97,7 +97,7 @@ async function copyImageToClipboard(dataUrl: string) {
       const canvas = document.createElement('canvas');    // Create invisible canvas
       const ctx = canvas.getContext('2d');                // Get 2D drawing context
       const img = new Image();                            // Create image element
-      
+
       // Wait for the image to load before processing
       await new Promise((resolve) => {
         img.onload = () => {                              // When image loads
@@ -108,12 +108,12 @@ async function copyImageToClipboard(dataUrl: string) {
         };
         img.src = dataUrl;                                // Start loading the image
       });
-      
+
       // Convert the canvas content to PNG blob
       const pngBlob = await new Promise<Blob>((resolve) => {
         canvas.toBlob((blob) => resolve(blob!), 'image/png');  // Convert canvas to PNG blob
       });
-      
+
       // Write the converted PNG blob to clipboard
       await navigator.clipboard.write([
         new ClipboardItem({ 'image/png': pngBlob })       // Create clipboard item with PNG data
@@ -169,7 +169,7 @@ function NodeOutputSection({
 }) {
   // If no image is available, don't render anything
   if (!output) return null;
-  
+
   return (
     // Main container for output section with vertical spacing
     <div className="space-y-2">
@@ -181,7 +181,7 @@ function NodeOutputSection({
           <div className="text-xs text-white/70">Output</div>
         </div>
         {/* Output image with click-to-copy functionality */}
-        <img 
+        <img
           src={output}  // Display the output image
           className="w-full rounded cursor-pointer hover:opacity-80 transition-all duration-200 hover:ring-2 hover:ring-white/30"  // Styling with hover effects
           alt="Output"  // Accessibility description
@@ -189,14 +189,14 @@ function NodeOutputSection({
           onContextMenu={(e) => { // Right-click context menu handler
             e.preventDefault(); // Prevent browser context menu from appearing
             copyImageToClipboard(output); // Copy image to clipboard
-            
+
             // Show brief visual feedback when image is copied
             const img = e.currentTarget; // Get the image element
             const originalTitle = img.title; // Store original tooltip text
             img.title = "Copied to clipboard!"; // Update tooltip to show success
             img.style.filter = "brightness(1.2)"; // Brighten the image briefly
             img.style.transform = "scale(0.98)"; // Slightly scale down the image
-            
+
             // Reset visual feedback after 300ms
             setTimeout(() => {
               img.title = originalTitle; // Restore original tooltip
@@ -270,12 +270,12 @@ function useNodeDrag(node: any, onUpdatePosition?: (id: string, x: number, y: nu
   const [localPos, setLocalPos] = useState({ x: node.x, y: node.y });  // Local position for smooth dragging
   const dragging = useRef(false);                                      // Track drag state
   const start = useRef<{ sx: number; sy: number; ox: number; oy: number } | null>(null);  // Drag start coordinates
-  
+
   // Sync local position when parent position changes
   useEffect(() => {
     setLocalPos({ x: node.x, y: node.y });
   }, [node.x, node.y]);
-  
+
   /**
    * Handle pointer down - start dragging
    * Captures the pointer and records starting positions
@@ -286,7 +286,7 @@ function useNodeDrag(node: any, onUpdatePosition?: (id: string, x: number, y: nu
     start.current = { sx: e.clientX, sy: e.clientY, ox: localPos.x, oy: localPos.y };  // Record start positions
     (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId); // Capture pointer for reliable tracking
   };
-  
+
   /**
    * Handle pointer move - update position during drag
    * Calculates new position based on mouse movement delta
@@ -300,7 +300,7 @@ function useNodeDrag(node: any, onUpdatePosition?: (id: string, x: number, y: nu
     setLocalPos({ x: newX, y: newY });                 // Update local position for immediate visual feedback
     if (onUpdatePosition) onUpdatePosition(node.id, newX, newY);  // Update parent state
   };
-  
+
   /**
    * Handle pointer up - end dragging
    * Releases pointer capture and resets drag state
@@ -310,7 +310,7 @@ function useNodeDrag(node: any, onUpdatePosition?: (id: string, x: number, y: nu
     start.current = null;                                            // Clear start position
     (e.currentTarget as HTMLElement).releasePointerCapture(e.pointerId);  // Release pointer
   };
-  
+
   return { localPos, onPointerDown, onPointerMove, onPointerUp };
 }
 
@@ -331,14 +331,14 @@ function useNodeDrag(node: any, onUpdatePosition?: (id: string, x: number, y: nu
  * @param onStartConnection Callback when starting a connection from this port
  * @param onEndConnection Callback when ending a connection at this port
  */
-function Port({ 
-  className, 
+function Port({
+  className,
   nodeId,
   isOutput,
   onStartConnection,
   onEndConnection,
   onDisconnect
-}: { 
+}: {
   className?: string;
   nodeId?: string;
   isOutput?: boolean;
@@ -355,7 +355,7 @@ function Port({
       onStartConnection(nodeId);  // Start connection from this output port
     }
   };
-  
+
   /**
    * Handle ending a connection (pointer up on input port)
    */
@@ -378,15 +378,15 @@ function Port({
   };
 
   return (
-    <div 
+    <div
       className={cx("nb-port", className)}              // Combine base port classes with custom ones
       onPointerDown={handlePointerDown}                 // Start connection drag from output ports
       onPointerUp={handlePointerUp}                     // End connection drag at input ports
       onPointerEnter={handlePointerUp}                  // Also accept connections on hover (better UX)
       onClick={handleClick}                             // Allow clicking input ports to disconnect
       title={
-        isOutput 
-          ? "Drag from here to connect to another node's input" 
+        isOutput
+          ? "Drag from here to connect to another node's input"
           : "Drop connections here or click to disconnect"
       }
     />
@@ -429,11 +429,10 @@ export function BackgroundNodeView({
   onEndConnection,
   onProcess,
   onUpdatePosition,
-  apiToken
 }: any) {
   // Use custom drag hook to handle node positioning in the editor
   const { localPos, onPointerDown, onPointerMove, onPointerUp } = useNodeDrag(node, onUpdatePosition);
-  
+
   /**
    * Handle image file upload from file input
    * Converts uploaded file to base64 data URL for storage and preview
@@ -447,14 +446,14 @@ export function BackgroundNodeView({
       reader.readAsDataURL(e.target.files[0]);                    // Convert file to base64
     }
   };
-  
+
   /**
    * Handle image paste from clipboard
    * Supports both image files and image URLs pasted from clipboard
    */
   const handleImagePaste = (e: React.ClipboardEvent) => {
     const items = e.clipboardData.items;                           // Get clipboard items
-    
+
     // First, try to find image files in clipboard
     for (let i = 0; i < items.length; i++) {
       if (items[i].type.startsWith("image/")) {                   // Check if item is an image
@@ -469,14 +468,14 @@ export function BackgroundNodeView({
         }
       }
     }
-    
+
     // If no image files, check for text that might be image URLs
     const text = e.clipboardData.getData("text");                 // Get text from clipboard
     if (text && (text.startsWith("http") || text.startsWith("data:image"))) {
       onUpdate(node.id, { customBackgroundImage: text });         // Use URL directly
     }
   };
-  
+
   const handleDrop = (e: React.DragEvent) => {
     e.preventDefault();
     const files = e.dataTransfer.files;
@@ -488,16 +487,16 @@ export function BackgroundNodeView({
       reader.readAsDataURL(files[0]);
     }
   };
-  
+
   return (
-    <div 
-      className="nb-node absolute text-white w-[320px]" 
+    <div
+      className="nb-node absolute text-white w-[320px]"
       style={{ left: localPos.x, top: localPos.y }}
       onDrop={handleDrop}
       onDragOver={(e) => e.preventDefault()}
       onPaste={handleImagePaste}
     >
-      <div 
+      <div
         className="nb-header px-3 py-2 flex items-center justify-between rounded-t-[14px] cursor-grab active:cursor-grabbing"
         onPointerDown={onPointerDown}
         onPointerMove={onPointerMove}
@@ -540,7 +539,7 @@ export function BackgroundNodeView({
             </Button>
           </div>
         )}
-        <Select 
+        <Select
           className="w-full"
           value={node.backgroundType || "color"}
           onChange={(e) => onUpdate(node.id, { backgroundType: (e.target as HTMLSelectElement).value })}
@@ -553,7 +552,7 @@ export function BackgroundNodeView({
           <option value="upload">Upload Image</option>
           <option value="custom">Custom Prompt</option>
         </Select>
-        
+
         {node.backgroundType === "color" && (
           <ColorPicker
             className="w-full"
@@ -561,11 +560,11 @@ export function BackgroundNodeView({
             onChange={(e) => onUpdate(node.id, { backgroundColor: (e.target as HTMLInputElement).value })}
           />
         )}
-        
+
         {node.backgroundType === "gradient" && (
           <div className="space-y-3">
             <label className="text-xs text-white/70">Gradient Direction</label>
-            <Select 
+            <Select
               className="w-full"
               value={node.gradientDirection || "to right"}
               onChange={(e) => onUpdate(node.id, { gradientDirection: (e.target as HTMLSelectElement).value })}
@@ -592,10 +591,10 @@ export function BackgroundNodeView({
               value={node.gradientEndColor || "#4ecdc4"}
               onChange={(e) => onUpdate(node.id, { gradientEndColor: (e.target as HTMLInputElement).value })}
             />
-            <div 
+            <div
               className="w-full h-8 rounded-md border border-white/20"
               style={{
-                background: node.gradientDirection === "radial" 
+                background: node.gradientDirection === "radial"
                   ? `radial-gradient(circle, ${node.gradientStartColor || "#ff6b6b"} 0%, ${node.gradientEndColor || "#4ecdc4"} 100%)`
                   : `linear-gradient(${node.gradientDirection || "to right"}, ${node.gradientStartColor || "#ff6b6b"} 0%, ${node.gradientEndColor || "#4ecdc4"} 100%)`
               }}
@@ -603,9 +602,9 @@ export function BackgroundNodeView({
             />
           </div>
         )}
-        
+
         {node.backgroundType === "image" && (
-          <Select 
+          <Select
             className="w-full"
             value={node.backgroundImage || ""}
             onChange={(e) => onUpdate(node.id, { backgroundImage: (e.target as HTMLSelectElement).value })}
@@ -618,11 +617,11 @@ export function BackgroundNodeView({
             <option value="city">City Skyline</option>
           </Select>
         )}
-        
+
         {node.backgroundType === "city" && (
           <div className="space-y-3">
             <label className="text-xs text-white/70">City Scene Type</label>
-            <Select 
+            <Select
               className="w-full"
               value={node.citySceneType || "busy_street"}
               onChange={(e) => onUpdate(node.id, { citySceneType: (e.target as HTMLSelectElement).value })}
@@ -640,7 +639,7 @@ export function BackgroundNodeView({
               <option value="matrix_alley">Matrix Style Urban Alley</option>
             </Select>
             <label className="text-xs text-white/70">Time of Day</label>
-            <Select 
+            <Select
               className="w-full"
               value={node.cityTimeOfDay || "daytime"}
               onChange={(e) => onUpdate(node.id, { cityTimeOfDay: (e.target as HTMLSelectElement).value })}
@@ -654,11 +653,11 @@ export function BackgroundNodeView({
             </Select>
           </div>
         )}
-        
+
         {node.backgroundType === "photostudio" && (
           <div className="space-y-3">
             <label className="text-xs text-white/70">Studio Setup</label>
-            <Select 
+            <Select
               className="w-full"
               value={node.studioSetup || "white_seamless"}
               onChange={(e) => onUpdate(node.id, { studioSetup: (e.target as HTMLSelectElement).value })}
@@ -681,7 +680,7 @@ export function BackgroundNodeView({
               </>
             )}
             <label className="text-xs text-white/70">Lighting Setup</label>
-            <Select 
+            <Select
               className="w-full"
               value={node.studioLighting || "key_fill"}
               onChange={(e) => onUpdate(node.id, { studioLighting: (e.target as HTMLSelectElement).value })}
@@ -704,13 +703,13 @@ export function BackgroundNodeView({
             </div>
           </div>
         )}
-        
+
         {node.backgroundType === "upload" && (
           <div className="space-y-2">
             {node.customBackgroundImage ? (
               <div className="relative">
                 <img src={node.customBackgroundImage} className="w-full rounded" alt="Custom Background" />
-                <Button 
+                <Button
                   variant="destructive"
                   size="sm"
                   className="absolute top-2 right-2"
@@ -735,7 +734,7 @@ export function BackgroundNodeView({
             )}
           </div>
         )}
-        
+
         {node.backgroundType === "custom" && (
           <div className="space-y-2">
             <Textarea
@@ -754,18 +753,17 @@ export function BackgroundNodeView({
                   alert('Please enter a background description first');
                   return;
                 }
-                
+
                 try {
                   const response = await fetch('/api/improve-prompt', {
                     method: 'POST',
                     headers: { 'Content-Type': 'application/json' },
                     body: JSON.stringify({
                       prompt: node.customPrompt,
-                      type: 'background',
-                      apiToken: apiToken || undefined
+                      type: 'background'
                     })
                   });
-                  
+
                   if (response.ok) {
                     const { improvedPrompt } = await response.json();
                     onUpdate(node.id, { customPrompt: improvedPrompt });
@@ -783,8 +781,8 @@ export function BackgroundNodeView({
             </Button>
           </div>
         )}
-        
-        <Button 
+
+        <Button
           className="w-full"
           onClick={() => onProcess(node.id)}
           disabled={node.isRunning}
@@ -792,7 +790,7 @@ export function BackgroundNodeView({
         >
           {node.isRunning ? "Processing..." : "Apply Background"}
         </Button>
-        
+
         <NodeOutputSection
           nodeId={node.id}
           output={node.output}
@@ -836,7 +834,7 @@ export function BackgroundNodeView({
 export function ClothesNodeView({ node, onDelete, onUpdate, onStartConnection, onEndConnection, onProcess, onUpdatePosition, getNodeHistoryInfo, navigateNodeHistory, getCurrentNodeImage }: any) {
   // Handle node dragging functionality
   const { localPos, onPointerDown, onPointerMove, onPointerUp } = useNodeDrag(node, onUpdatePosition);
-  
+
   /**
    * Preset clothing options available for quick selection
    * Each preset includes a display name and path to the reference image
@@ -880,16 +878,16 @@ export function ClothesNodeView({ node, onDelete, onUpdate, onStartConnection, o
   const selectPreset = (presetPath: string, presetName: string) => {
     onUpdate(node.id, { clothesImage: presetPath, selectedPreset: presetName });
   };
-  
+
   return (
-    <div 
-      className="nb-node absolute text-white w-[320px]"
+    <div
+      className="nb-node absolute w-[320px]"
       style={{ left: localPos.x, top: localPos.y }}
       onDrop={onDrop}
       onDragOver={(e) => e.preventDefault()}
       onPaste={onPaste}
     >
-      <div 
+      <div
         className="nb-header px-3 py-2 flex items-center justify-between rounded-t-[14px] cursor-grab active:cursor-grabbing"
         onPointerDown={onPointerDown}
         onPointerMove={onPointerMove}
@@ -932,18 +930,17 @@ export function ClothesNodeView({ node, onDelete, onUpdate, onStartConnection, o
             </Button>
           </div>
         )}
-        <div className="text-xs text-white/70">Clothes Reference</div>
-        
+        <div className="text-xs text-muted-foreground">Clothes Reference</div>
+
         {/* Preset clothes options */}
         <div className="flex gap-2">
           {presetClothes.map((preset) => (
             <button
               key={preset.name}
-              className={`flex-1 p-2 rounded border ${
-                node.selectedPreset === preset.name
-                  ? "border-indigo-400 bg-indigo-500/20"
-                  : "border-white/20 hover:border-white/40"
-              }`}
+              className={`flex-1 p-2 rounded border ${node.selectedPreset === preset.name
+                ? "border-primary bg-primary/20"
+                : "border-border hover:border-primary/50"
+                }`}
               onClick={() => selectPreset(preset.path, preset.name)}
             >
               <img src={preset.path} alt={preset.name} className="w-full h-28 object-contain rounded mb-1" />
@@ -951,14 +948,14 @@ export function ClothesNodeView({ node, onDelete, onUpdate, onStartConnection, o
             </button>
           ))}
         </div>
-        
-        <div className="text-xs text-white/50 text-center">— or —</div>
-        
+
+        <div className="text-xs text-muted-foreground/50 text-center">— or —</div>
+
         {/* Custom image upload */}
         {node.clothesImage && !node.selectedPreset ? (
           <div className="relative">
             <img src={node.clothesImage} className="w-full rounded" alt="Clothes" />
-            <Button 
+            <Button
               variant="destructive"
               size="sm"
               className="absolute top-2 right-2"
@@ -981,15 +978,15 @@ export function ClothesNodeView({ node, onDelete, onUpdate, onStartConnection, o
                 }
               }}
             />
-            <div className="border-2 border-dashed border-white/20 rounded-lg p-6 text-center cursor-pointer hover:border-white/40 transition-colors">
-              <div className="text-white/40 text-lg mb-2">📁</div>
-              <p className="text-sm text-white/70 font-medium">Drop, upload, or paste clothes image</p>
-              <p className="text-xs text-white/50 mt-1">JPG, PNG, WebP supported</p>
+            <div className="border-2 border-dashed border-border rounded-lg p-6 text-center cursor-pointer hover:border-primary/50 transition-colors">
+              <div className="text-muted-foreground/40 text-lg mb-2">📁</div>
+              <p className="text-sm text-muted-foreground font-medium">Drop, upload, or paste clothes image</p>
+              <p className="text-xs text-muted-foreground/50 mt-1">JPG, PNG, WebP supported</p>
             </div>
           </label>
         ) : null}
-        
-        <Button 
+
+        <Button
           className="w-full"
           onClick={() => onProcess(node.id)}
           disabled={node.isRunning || !node.clothesImage}
@@ -1043,10 +1040,10 @@ export function ClothesNodeView({ node, onDelete, onUpdate, onStartConnection, o
 export function AgeNodeView({ node, onDelete, onUpdate, onStartConnection, onEndConnection, onProcess, onUpdatePosition, getNodeHistoryInfo, navigateNodeHistory, getCurrentNodeImage }: any) {
   // Handle node dragging functionality
   const { localPos, onPointerDown, onPointerMove, onPointerUp } = useNodeDrag(node, onUpdatePosition);
-  
+
   return (
-    <div className="nb-node absolute text-white w-[280px]" style={{ left: localPos.x, top: localPos.y }}>
-      <div 
+    <div className="nb-node absolute w-[280px]" style={{ left: localPos.x, top: localPos.y }}>
+      <div
         className="nb-header px-3 py-2 flex items-center justify-between rounded-t-[14px] cursor-grab active:cursor-grabbing"
         onPointerDown={onPointerDown}
         onPointerMove={onPointerMove}
@@ -1099,7 +1096,7 @@ export function AgeNodeView({ node, onDelete, onUpdate, onStartConnection, onEnd
             onChange={(e) => onUpdate(node.id, { targetAge: parseInt((e.target as HTMLInputElement).value) })}
           />
         </div>
-        <Button 
+        <Button
           className="w-full"
           onClick={() => onProcess(node.id)}
           disabled={node.isRunning}
@@ -1158,31 +1155,31 @@ export function AgeNodeView({ node, onDelete, onUpdate, onStartConnection, onEnd
 export function CameraNodeView({ node, onDelete, onUpdate, onStartConnection, onEndConnection, onProcess, onUpdatePosition, getNodeHistoryInfo, navigateNodeHistory, getCurrentNodeImage }: any) {
   // Handle node dragging functionality
   const { localPos, onPointerDown, onPointerMove, onPointerUp } = useNodeDrag(node, onUpdatePosition);
-  
+
   // Camera lens focal length options (affects field of view and perspective)
-  const focalLengths = ["None", "8mm", "12mm", "24mm", "35mm", "50mm", "85mm", "100mm", "135mm"];
-  
+  const focalLengths = ["None", "8mm", "12mm", "24mm", "35mm", "50mm", "85mm"];
+
   // Aperture settings (affects depth of field and exposure)
-  const apertures = ["None", "f/0.95", "f/1.2", "f/1.4", "f/1.8", "f/2", "f/2.8", "f/4", "f/5.6","f/11"];
-  
+  const apertures = ["None", "f/0.95", "f/1.2", "f/1.4", "f/1.8", "f/2", "f/2.8", "f/4", "f/5.6", "f/11"];
+
   // Shutter speed options (affects motion blur and exposure)
-  const shutterSpeeds = ["None", "1/1000s", "1/250s","1/30s","1/15", "5s", ];
-  
+  const shutterSpeeds = ["None", "1/1000s", "1/250s", "1/30s", "1/15", "5s",];
+
   // White balance presets for different lighting conditions
   const whiteBalances = ["None", "2800K candlelight", "3200K tungsten", "4000K fluorescent", "5600K daylight", "6500K cloudy", "7000K shade", "8000K blue sky"];
-  
+
   // Camera angle and perspective options
   const angles = ["None", "eye level", "low angle", "high angle", "Dutch tilt", "bird's eye", "worm's eye", "over the shoulder", "POV"];
-  
+
   // ISO sensitivity values (affects image noise and exposure)
-  const isoValues = ["None",  "ISO 100", "ISO 400", "ISO 1600", "ISO 6400"];
-  
+  const isoValues = ["None", "ISO 100", "ISO 400", "ISO 1600", "ISO 6400"];
+
   // Film stock emulation for different photographic styles
-  const filmStyles = ["None","RAW","Kodak Portra", "Fuji Velvia", "Kodak Gold 200","Black & White", "Sepia", "Vintage", "Film Noir"];
-  
+  const filmStyles = ["None", "RAW", "Kodak Portra", "Fuji Velvia", "Kodak Gold 200", "Black & White", "Sepia", "Vintage", "Film Noir"];
+
   // Professional lighting setups and natural lighting conditions
   const lightingTypes = ["None", "Natural Light", "Golden Hour", "Blue Hour", "Studio Lighting", "Rembrandt", "Split Lighting", "Butterfly Lighting", "Loop Lighting", "Rim Lighting", "Silhouette", "High Key", "Low Key"];
-  
+
   // Bokeh (background blur) styles for different lens characteristics
   const bokehStyles = ["None", "Smooth Bokeh", "Swirly Bokeh", "Hexagonal Bokeh", "Cat Eye Bokeh", "Bubble Bokeh"];
 
@@ -1190,8 +1187,8 @@ export function CameraNodeView({ node, onDelete, onUpdate, onStartConnection, on
   const motionBlurOptions = ["None", "Light Motion Blur", "Medium Motion Blur", "Heavy Motion Blur", "Radial Blur", "Zoom Blur"];
 
   return (
-    <div className="nb-node absolute text-white w-[360px]" style={{ left: localPos.x, top: localPos.y }}>
-      <div 
+    <div className="nb-node absolute w-[360px]" style={{ left: localPos.x, top: localPos.y }}>
+      <div
         className="nb-header px-3 py-2 flex items-center justify-between rounded-t-[14px] cursor-grab active:cursor-grabbing"
         onPointerDown={onPointerDown}
         onPointerMove={onPointerMove}
@@ -1234,12 +1231,12 @@ export function CameraNodeView({ node, onDelete, onUpdate, onStartConnection, on
           </div>
         )}
         {/* Basic Camera Settings Section */}
-        <div className="text-xs text-white/50 font-semibold mb-1">Basic Settings</div>
+        <div className="text-xs text-muted-foreground font-semibold mb-1">Basic Settings</div>
         <div className="grid grid-cols-2 gap-2">                     {/* 2-column grid for compact layout */}
           {/* Motion Blur Control - adds movement effects */}
           <div>
-            <label className="text-xs text-white/70">Motion Blur</label>
-            <Select 
+            <label className="text-xs text-muted-foreground">Motion Blur</label>
+            <Select
               className="w-full"
               value={node.motionBlur || "None"}                   // Default to "None" if not set
               onChange={(e) => onUpdate(node.id, { motionBlur: (e.target as HTMLSelectElement).value })}
@@ -1250,8 +1247,8 @@ export function CameraNodeView({ node, onDelete, onUpdate, onStartConnection, on
           </div>
           {/* Focal Length Control - affects field of view and perspective */}
           <div>
-            <label className="text-xs text-white/70">Focal Length</label>
-            <Select 
+            <label className="text-xs text-muted-foreground">Focal Length</label>
+            <Select
               className="w-full"
               value={node.focalLength || "None"}                   // Default to "None" if not set
               onChange={(e) => onUpdate(node.id, { focalLength: (e.target as HTMLSelectElement).value })}
@@ -1260,11 +1257,11 @@ export function CameraNodeView({ node, onDelete, onUpdate, onStartConnection, on
               {focalLengths.map(f => <option key={f} value={f}>{f}</option>)}
             </Select>
           </div>
-          
+
           {/* Aperture Control - affects depth of field and exposure */}
           <div>
-            <label className="text-xs text-white/70">Aperture</label>
-            <Select 
+            <label className="text-xs text-muted-foreground">Aperture</label>
+            <Select
               className="w-full"
               value={node.aperture || "None"}                     // Default to "None" if not set
               onChange={(e) => onUpdate(node.id, { aperture: (e.target as HTMLSelectElement).value })}
@@ -1273,11 +1270,11 @@ export function CameraNodeView({ node, onDelete, onUpdate, onStartConnection, on
               {apertures.map(a => <option key={a} value={a}>{a}</option>)}
             </Select>
           </div>
-          
+
           {/* Shutter Speed Control - affects motion blur and exposure */}
           <div>
-            <label className="text-xs text-white/70">Shutter Speed</label>
-            <Select 
+            <label className="text-xs text-muted-foreground">Shutter Speed</label>
+            <Select
               className="w-full"
               value={node.shutterSpeed || "None"}                 // Default to "None" if not set
               onChange={(e) => onUpdate(node.id, { shutterSpeed: (e.target as HTMLSelectElement).value })}
@@ -1286,11 +1283,11 @@ export function CameraNodeView({ node, onDelete, onUpdate, onStartConnection, on
               {shutterSpeeds.map(s => <option key={s} value={s}>{s}</option>)}
             </Select>
           </div>
-          
+
           {/* ISO Control - affects sensor sensitivity and image noise */}
           <div>
-            <label className="text-xs text-white/70">ISO</label>
-            <Select 
+            <label className="text-xs text-muted-foreground">ISO</label>
+            <Select
               className="w-full"
               value={node.iso || "None"}                          // Default to "None" if not set
               onChange={(e) => onUpdate(node.id, { iso: (e.target as HTMLSelectElement).value })}
@@ -1300,13 +1297,13 @@ export function CameraNodeView({ node, onDelete, onUpdate, onStartConnection, on
             </Select>
           </div>
         </div>
-        
+
         {/* Creative Settings */}
         <div className="text-xs text-white/50 font-semibold mb-1 mt-3">Creative Settings</div>
         <div className="grid grid-cols-2 gap-2">
           <div>
-            <label className="text-xs text-white/70">White Balance</label>
-            <Select 
+            <label className="text-xs text-muted-foreground">White Balance</label>
+            <Select
               className="w-full"
               value={node.whiteBalance || "None"}
               onChange={(e) => onUpdate(node.id, { whiteBalance: (e.target as HTMLSelectElement).value })}
@@ -1315,8 +1312,8 @@ export function CameraNodeView({ node, onDelete, onUpdate, onStartConnection, on
             </Select>
           </div>
           <div>
-            <label className="text-xs text-white/70">Film Style</label>
-            <Select 
+            <label className="text-xs text-muted-foreground">Film Style</label>
+            <Select
               className="w-full"
               value={node.filmStyle || "None"}
               onChange={(e) => onUpdate(node.id, { filmStyle: (e.target as HTMLSelectElement).value })}
@@ -1325,8 +1322,8 @@ export function CameraNodeView({ node, onDelete, onUpdate, onStartConnection, on
             </Select>
           </div>
           <div>
-            <label className="text-xs text-white/70">Lighting</label>
-            <Select 
+            <label className="text-xs text-muted-foreground">Lighting</label>
+            <Select
               className="w-full"
               value={node.lighting || "None"}
               onChange={(e) => onUpdate(node.id, { lighting: (e.target as HTMLSelectElement).value })}
@@ -1335,8 +1332,8 @@ export function CameraNodeView({ node, onDelete, onUpdate, onStartConnection, on
             </Select>
           </div>
           <div>
-            <label className="text-xs text-white/70">Bokeh Style</label>
-            <Select 
+            <label className="text-xs text-muted-foreground">Bokeh Style</label>
+            <Select
               className="w-full"
               value={node.bokeh || "None"}
               onChange={(e) => onUpdate(node.id, { bokeh: (e.target as HTMLSelectElement).value })}
@@ -1345,13 +1342,13 @@ export function CameraNodeView({ node, onDelete, onUpdate, onStartConnection, on
             </Select>
           </div>
         </div>
-        
+
         {/* Composition Settings */}
-        <div className="text-xs text-white/50 font-semibold mb-1 mt-3">Composition</div>
+        <div className="text-xs text-muted-foreground font-semibold mb-1 mt-3">Composition</div>
         <div className="grid grid-cols-2 gap-2">
           <div>
-            <label className="text-xs text-white/70">Camera Angle</label>
-            <Select 
+            <label className="text-xs text-muted-foreground">Camera Angle</label>
+            <Select
               className="w-full"
               value={node.angle || "None"}
               onChange={(e) => onUpdate(node.id, { angle: (e.target as HTMLSelectElement).value })}
@@ -1360,7 +1357,7 @@ export function CameraNodeView({ node, onDelete, onUpdate, onStartConnection, on
             </Select>
           </div>
         </div>
-        <Button 
+        <Button
           className="w-full"
           onClick={() => onProcess(node.id)}
           disabled={node.isRunning}
@@ -1419,19 +1416,19 @@ export function CameraNodeView({ node, onDelete, onUpdate, onStartConnection, on
 export function FaceNodeView({ node, onDelete, onUpdate, onStartConnection, onEndConnection, onProcess, onUpdatePosition, getNodeHistoryInfo, navigateNodeHistory, getCurrentNodeImage }: any) {
   // Handle node dragging functionality
   const { localPos, onPointerDown, onPointerMove, onPointerUp } = useNodeDrag(node, onUpdatePosition);
-  
+
   // Available hairstyle options for hair modification
   const hairstyles = ["None", "short", "long", "curly", "straight", "bald", "mohawk", "ponytail"];
-  
+
   // Facial expression options for emotion changes
   const expressions = ["None", "happy", "serious", "smiling", "laughing", "sad", "surprised", "angry"];
-  
+
   // Beard and facial hair styling options
   const beardStyles = ["None", "stubble", "goatee", "full beard", "mustache", "clean shaven"];
 
   return (
-    <div className="nb-node absolute text-white w-[340px]" style={{ left: localPos.x, top: localPos.y }}>
-      <div 
+    <div className="nb-node absolute w-[340px]" style={{ left: localPos.x, top: localPos.y }}>
+      <div
         className="nb-header px-3 py-2 flex items-center justify-between rounded-t-[14px] cursor-grab active:cursor-grabbing"
         onPointerDown={onPointerDown}
         onPointerMove={onPointerMove}
@@ -1477,10 +1474,10 @@ export function FaceNodeView({ node, onDelete, onUpdate, onStartConnection, onEn
         <div className="space-y-2">
           {/* Pimple removal option for skin enhancement */}
           <label className="flex items-center gap-2 text-xs cursor-pointer">
-            <Checkbox 
+            <Checkbox
               checked={node.faceOptions?.removePimples || false}    // Default to false if not set
-              onChange={(e) => onUpdate(node.id, { 
-                faceOptions: { 
+              onChange={(e) => onUpdate(node.id, {
+                faceOptions: {
                   ...node.faceOptions,                             // Preserve existing options
                   removePimples: (e.target as HTMLInputElement).checked // Update pimple removal setting
                 }
@@ -1488,13 +1485,13 @@ export function FaceNodeView({ node, onDelete, onUpdate, onStartConnection, onEn
             />
             Remove pimples                                          {/* Clean up skin imperfections */}
           </label>
-          
+
           {/* Sunglasses addition option */}
           <label className="flex items-center gap-2 text-xs cursor-pointer">
-            <Checkbox 
+            <Checkbox
               checked={node.faceOptions?.addSunglasses || false}    // Default to false if not set
-              onChange={(e) => onUpdate(node.id, { 
-                faceOptions: { 
+              onChange={(e) => onUpdate(node.id, {
+                faceOptions: {
                   ...node.faceOptions,                             // Preserve existing options
                   addSunglasses: (e.target as HTMLInputElement).checked // Update sunglasses setting
                 }
@@ -1502,13 +1499,13 @@ export function FaceNodeView({ node, onDelete, onUpdate, onStartConnection, onEn
             />
             Add sunglasses                                          {/* Add stylish sunglasses accessory */}
           </label>
-          
+
           {/* Hat addition option */}
           <label className="flex items-center gap-2 text-xs cursor-pointer">
-            <Checkbox 
+            <Checkbox
               checked={node.faceOptions?.addHat || false}           // Default to false if not set
-              onChange={(e) => onUpdate(node.id, { 
-                faceOptions: { 
+              onChange={(e) => onUpdate(node.id, {
+                faceOptions: {
                   ...node.faceOptions,                             // Preserve existing options
                   addHat: (e.target as HTMLInputElement).checked   // Update hat setting
                 }
@@ -1517,39 +1514,39 @@ export function FaceNodeView({ node, onDelete, onUpdate, onStartConnection, onEn
             Add hat                                                 {/* Add hat accessory */}
           </label>
         </div>
-        
+
         <div>
           <label className="text-xs text-white/70">Hairstyle</label>
-          <Select 
+          <Select
             className="w-full"
             value={node.faceOptions?.changeHairstyle || "None"}
-            onChange={(e) => onUpdate(node.id, { 
+            onChange={(e) => onUpdate(node.id, {
               faceOptions: { ...node.faceOptions, changeHairstyle: (e.target as HTMLSelectElement).value }
             })}
           >
             {hairstyles.map(h => <option key={h} value={h}>{h}</option>)}
           </Select>
         </div>
-        
+
         <div>
           <label className="text-xs text-white/70">Expression</label>
-          <Select 
+          <Select
             className="w-full"
             value={node.faceOptions?.facialExpression || "None"}
-            onChange={(e) => onUpdate(node.id, { 
+            onChange={(e) => onUpdate(node.id, {
               faceOptions: { ...node.faceOptions, facialExpression: (e.target as HTMLSelectElement).value }
             })}
           >
             {expressions.map(e => <option key={e} value={e}>{e}</option>)}
           </Select>
         </div>
-        
+
         <div>
           <label className="text-xs text-white/70">Beard</label>
-          <Select 
+          <Select
             className="w-full"
             value={node.faceOptions?.beardStyle || "None"}
-            onChange={(e) => onUpdate(node.id, { 
+            onChange={(e) => onUpdate(node.id, {
               faceOptions: { ...node.faceOptions, beardStyle: (e.target as HTMLSelectElement).value }
             })}
           >
@@ -1559,18 +1556,17 @@ export function FaceNodeView({ node, onDelete, onUpdate, onStartConnection, onEn
 
         {/* Makeup Selection Section - allows users to choose makeup application */}
         <div>
-          <label className="text-xs text-white/70">Makeup</label>
+          <label className="text-xs text-muted-foreground">Makeup</label>
           <div className="grid grid-cols-2 gap-2 mt-2">              {/* 2-column grid for makeup options */}
-            
+
             {/* No Makeup Option - removes or prevents makeup application */}
             <button
-              className={`p-1 rounded border transition-colors ${
-                !node.faceOptions?.selectedMakeup || node.faceOptions?.selectedMakeup === "None"
-                  ? "border-indigo-400 bg-indigo-500/20"             // Highlighted when selected
-                  : "border-white/20 hover:border-white/40"           // Default and hover states
-              }`}
-              onClick={() => onUpdate(node.id, { 
-                faceOptions: { 
+              className={`p-1 rounded border transition-colors ${!node.faceOptions?.selectedMakeup || node.faceOptions?.selectedMakeup === "None"
+                ? "border-indigo-400 bg-indigo-500/20"             // Highlighted when selected
+                : "border-white/20 hover:border-white/40"           // Default and hover states
+                }`}
+              onClick={() => onUpdate(node.id, {
+                faceOptions: {
                   ...node.faceOptions,                               // Preserve other face options
                   selectedMakeup: "None",                            // Set makeup to none
                   makeupImage: null                                   // Clear makeup image reference
@@ -1579,21 +1575,20 @@ export function FaceNodeView({ node, onDelete, onUpdate, onStartConnection, onEn
               title="No makeup application - natural look"
             >
               {/* Visual placeholder for no makeup option */}
-              <div className="w-full h-24 flex items-center justify-center text-xs text-white/60 border border-dashed border-white/20 rounded mb-1">
+              <div className="w-full h-24 flex items-center justify-center text-xs text-muted-foreground/60 border border-dashed border-border rounded mb-1">
                 No Makeup                                             {/* Text indicator for no makeup */}
               </div>
               <div className="text-xs">None</div>                  {/* Option label */}
             </button>
-            
+
             {/* Makeup Application Option - applies preset makeup style */}
             <button
-              className={`p-1 rounded border transition-colors ${
-                node.faceOptions?.selectedMakeup === "Makeup"
-                  ? "border-indigo-400 bg-indigo-500/20"             // Highlighted when selected
-                  : "border-white/20 hover:border-white/40"           // Default and hover states
-              }`}
-              onClick={() => onUpdate(node.id, { 
-                faceOptions: { 
+              className={`p-1 rounded border transition-colors ${node.faceOptions?.selectedMakeup === "Makeup"
+                ? "border-primary bg-primary/20"             // Highlighted when selected
+                : "border-border hover:border-primary/50"           // Default and hover states
+                }`}
+              onClick={() => onUpdate(node.id, {
+                faceOptions: {
                   ...node.faceOptions,                               // Preserve other face options
                   selectedMakeup: "Makeup",                          // Set makeup type
                   makeupImage: "/makeup/makeup1.png"                 // Reference image for makeup style
@@ -1602,9 +1597,9 @@ export function FaceNodeView({ node, onDelete, onUpdate, onStartConnection, onEn
               title="Apply makeup style - enhances facial features"
             >
               {/* Makeup preview image */}
-              <img 
-                src="/makeup/makeup1.png" 
-                alt="Makeup Style Preview" 
+              <img
+                src="/makeup/makeup1.png"
+                alt="Makeup Style Preview"
                 className="w-full h-24 object-contain rounded mb-1"
                 title="Preview of makeup style that will be applied"
               />
@@ -1612,8 +1607,8 @@ export function FaceNodeView({ node, onDelete, onUpdate, onStartConnection, onEn
             </button>
           </div>
         </div>
-        
-        <Button 
+
+        <Button
           className="w-full"
           onClick={() => onProcess(node.id)}
           disabled={node.isRunning}
@@ -1675,7 +1670,7 @@ export function FaceNodeView({ node, onDelete, onUpdate, onStartConnection, onEn
 export function StyleNodeView({ node, onDelete, onUpdate, onStartConnection, onEndConnection, onProcess, onUpdatePosition, getNodeHistoryInfo, navigateNodeHistory, getCurrentNodeImage }: any) {
   // Handle node dragging functionality
   const { localPos, onPointerDown, onPointerMove, onPointerUp } = useNodeDrag(node, onUpdatePosition);
-  
+
   /**
    * Available artistic style options with descriptive labels
    * Each style represents a different artistic movement or pop culture aesthetic
@@ -1693,13 +1688,13 @@ export function StyleNodeView({ node, onDelete, onUpdate, onStartConnection, onE
     { value: "pixar", label: "Pixar Style" },
     { value: "manga", label: "Manga Style" },
   ];
-  
+
   return (
-    <div 
-      className="nb-node absolute text-white w-[320px]" 
+    <div
+      className="nb-node absolute w-[320px]"
       style={{ left: localPos.x, top: localPos.y }}
     >
-      <div 
+      <div
         className="nb-header px-3 py-2 flex items-center justify-between rounded-t-[14px] cursor-grab active:cursor-grabbing"
         onPointerDown={onPointerDown}
         onPointerMove={onPointerMove}
@@ -1742,16 +1737,16 @@ export function StyleNodeView({ node, onDelete, onUpdate, onStartConnection, onE
             </Button>
           </div>
         )}
-        <div className="text-xs text-white/70">Art Style</div>
-        <div className="text-xs text-white/50 mb-2">Select an artistic style to apply to your image</div>
+        <div className="text-xs text-muted-foreground">Art Style</div>
+        <div className="text-xs text-muted-foreground/50 mb-2">Select an artistic style to apply to your image</div>
         <Select
-          className="w-full bg-black border-white/20 text-white focus:border-white/40 [&>option]:bg-black [&>option]:text-white"
+          className="w-full bg-background border-border text-foreground focus:border-ring [&>option]:bg-background [&>option]:text-foreground"
           value={node.stylePreset || ""}
           onChange={(e) => onUpdate(node.id, { stylePreset: (e.target as HTMLSelectElement).value })}
         >
-          <option value="" className="bg-black">Select a style...</option>
+          <option value="" className="bg-background">Select a style...</option>
           {styleOptions.map(opt => (
-            <option key={opt.value} value={opt.value} className="bg-black">
+            <option key={opt.value} value={opt.value} className="bg-background">
               {opt.label}
             </option>
           ))}
@@ -1764,21 +1759,21 @@ export function StyleNodeView({ node, onDelete, onUpdate, onStartConnection, onE
             min={0}                                                 // Minimum strength (subtle effect)
             max={100}                                               // Maximum strength (full style transfer)
             value={node.styleStrength || 50}                       // Current value (default 50%)
-            onChange={(e) => onUpdate(node.id, { 
+            onChange={(e) => onUpdate(node.id, {
               styleStrength: parseInt((e.target as HTMLInputElement).value) // Update strength value
             })}
             title="Adjust how strongly the artistic style is applied - lower values are more subtle"
           />
         </div>
         {/* Style Processing Button - triggers the style transfer operation */}
-        <Button 
+        <Button
           className="w-full"
           onClick={() => onProcess(node.id)}                        // Start style transfer processing
           disabled={node.isRunning || !node.stylePreset}           // Disable if processing or no style selected
           title={
             !node.input ? "Connect an input first" :               // No input connection
-            !node.stylePreset ? "Select a style first" :           // No style selected
-            "Apply the selected artistic style to your input image" // Ready to process
+              !node.stylePreset ? "Select a style first" :           // No style selected
+                "Apply the selected artistic style to your input image" // Ready to process
           }
         >
           {/* Dynamic button text based on processing state */}
@@ -1835,24 +1830,24 @@ export function StyleNodeView({ node, onDelete, onUpdate, onStartConnection, onE
 export function LightningNodeView({ node, onDelete, onUpdate, onStartConnection, onEndConnection, onProcess, onUpdatePosition, getNodeHistoryInfo, navigateNodeHistory, getCurrentNodeImage }: any) {
   // Handle node dragging functionality
   const { localPos, onPointerDown, onPointerMove, onPointerUp } = useNodeDrag(node, onUpdatePosition);
-  
+
   /**
    * Available lighting preset options with text descriptions
    * Each preset uses detailed lighting prompts instead of reference images
    */
   const presetLightings = [
-    { 
-      name: "Moody Cinematic", 
+    {
+      name: "Moody Cinematic",
       path: "/lighting/light1.png",
       prompt: "Moody cinematic portrait lighting with a sharp vertical beam of warm orange-red light cutting across the face and neck, contrasted with cool teal ambient fill on the surrounding areas. Strong chiaroscuro effect, deep shadows, high contrast between warm and cool tones, dramatic spotlight strip"
     },
-    { 
-      name: "Dual-Tone Neon", 
+    {
+      name: "Dual-Tone Neon",
       path: "/lighting/light2.png",
       prompt: "Cinematic portrait lighting with strong dual-tone rim lights: deep blue light illuminating the front-left side of the face, intense red light as a rim light from the back-right, dark black background, high contrast, minimal fill light, dramatic neon glow"
     },
-    { 
-      name: "Natural Shadow Play", 
+    {
+      name: "Natural Shadow Play",
       path: "/lighting/light3.png",
       prompt: "DRAMATIC natural shadow play with hard directional sunlight filtering through foliage, creating bold contrasting patterns of light and shadow across the subject. Strong chiaroscuro effect with deep blacks and bright highlights, dappled leaf shadows dancing across face and body, creating an artistic interplay of illumination and darkness. Emphasize the sculptural quality of light carving through shadow, with sharp shadow edges and brilliant sun-kissed highlights for maximum visual impact"
     },
@@ -1863,15 +1858,15 @@ export function LightningNodeView({ node, onDelete, onUpdate, onStartConnection,
    * Updates with the text prompt instead of reference image
    */
   const selectLighting = (lightingPath: string, lightingName: string, lightingPrompt: string) => {
-    onUpdate(node.id, { 
+    onUpdate(node.id, {
       lightingPrompt: lightingPrompt,                              // Text prompt for lighting effect
       selectedLighting: lightingName                               // Name of selected lighting preset
     });
   };
-  
+
   return (
     <div className="nb-node absolute text-white w-[320px]" style={{ left: localPos.x, top: localPos.y }}>
-      <div 
+      <div
         className="nb-header px-3 py-2 flex items-center justify-between rounded-t-[14px] cursor-grab active:cursor-grabbing"
         onPointerDown={onPointerDown}
         onPointerMove={onPointerMove}
@@ -1914,22 +1909,21 @@ export function LightningNodeView({ node, onDelete, onUpdate, onStartConnection,
             </Button>
           </div>
         )}
-        <div className="text-xs text-white/70">Lighting Presets</div>
-        
+        <div className="text-xs text-muted-foreground">Lighting Presets</div>
+
         <div className="grid grid-cols-2 gap-2">
           {presetLightings.map((preset) => (
             <button
               key={preset.name}
-              className={`p-2 rounded border ${
-                node.selectedLighting === preset.name
-                  ? "border-indigo-400 bg-indigo-500/20"
-                  : "border-white/20 hover:border-white/40"
-              }`}
+              className={`p-2 rounded border ${node.selectedLighting === preset.name
+                ? "border-primary bg-primary/20"
+                : "border-border hover:border-primary/50"
+                }`}
               onClick={() => selectLighting(preset.path, preset.name, preset.prompt)}
             >
-              <img 
-                src={preset.path} 
-                alt={preset.name} 
+              <img
+                src={preset.path}
+                alt={preset.name}
                 className="w-full h-24 object-contain rounded mb-1"
                 title="Click to select lighting"
               />
@@ -1937,8 +1931,8 @@ export function LightningNodeView({ node, onDelete, onUpdate, onStartConnection,
             </button>
           ))}
         </div>
-        
-        <Button 
+
+        <Button
           className="w-full"
           onClick={() => onProcess(node.id)}
           disabled={node.isRunning || !node.selectedLighting}
@@ -1946,7 +1940,7 @@ export function LightningNodeView({ node, onDelete, onUpdate, onStartConnection,
         >
           {node.isRunning ? "Processing..." : "Apply Lighting"}
         </Button>
-        
+
         <NodeOutputSection
           nodeId={node.id}
           output={node.output}
@@ -1999,29 +1993,29 @@ export function LightningNodeView({ node, onDelete, onUpdate, onStartConnection,
 export function PosesNodeView({ node, onDelete, onUpdate, onStartConnection, onEndConnection, onProcess, onUpdatePosition, getNodeHistoryInfo, navigateNodeHistory, getCurrentNodeImage }: any) {
   // Handle node dragging functionality
   const { localPos, onPointerDown, onPointerMove, onPointerUp } = useNodeDrag(node, onUpdatePosition);
-  
+
   /**
    * Available pose preset options with text descriptions
    * Each preset uses detailed pose prompts instead of reference images
    */
   const presetPoses = [
-    { 
-      name: "Dynamic Standing", 
+    {
+      name: "Dynamic Standing",
       path: "/poses/stand1.png",
       prompt: "A dynamic standing pose with the figure's weight shifted to one side. The right arm extends forward in a pointing gesture while the left arm hangs naturally. The figure has a slight hip tilt and appears to be in mid-movement, creating an energetic, directional composition."
     },
-    { 
-      name: "Arms Crossed", 
+    {
+      name: "Arms Crossed",
       path: "/poses/stand2.png",
       prompt: "A relaxed standing pose with arms crossed over the torso. The weight is distributed fairly evenly, with one leg slightly forward. The figure's posture suggests a casual, confident stance with the head tilted slightly downward in a contemplative manner."
     },
-    { 
-      name: "Seated Composed", 
+    {
+      name: "Seated Composed",
       path: "/poses/sit1.png",
       prompt: "A seated pose on what appears to be a stool or high chair. The figure sits with legs crossed at the knee, creating an asymmetrical but balanced composition. The hands rest on the lap, and the overall posture is upright and composed."
     },
-    { 
-      name: "Relaxed Lean", 
+    {
+      name: "Relaxed Lean",
       path: "/poses/sit2.png",
       prompt: "A more relaxed seated pose with the figure leaning to one side. One leg is bent and raised while the other extends downward. The figure appears to be resting or in casual repose, with arms supporting the body and creating a diagonal flow through the composition."
     },
@@ -2032,15 +2026,15 @@ export function PosesNodeView({ node, onDelete, onUpdate, onStartConnection, onE
    * Updates with the text prompt instead of reference image
    */
   const selectPose = (posePath: string, poseName: string, posePrompt: string) => {
-    onUpdate(node.id, { 
+    onUpdate(node.id, {
       posePrompt: posePrompt,                                      // Text prompt for pose effect
       selectedPose: poseName                                       // Name of selected pose preset
     });
   };
-  
+
   return (
-    <div className="nb-node absolute text-white w-[320px]" style={{ left: localPos.x, top: localPos.y }}>
-      <div 
+    <div className="nb-node absolute w-[320px]" style={{ left: localPos.x, top: localPos.y }}>
+      <div
         className="nb-header px-3 py-2 flex items-center justify-between rounded-t-[14px] cursor-grab active:cursor-grabbing"
         onPointerDown={onPointerDown}
         onPointerMove={onPointerMove}
@@ -2084,21 +2078,20 @@ export function PosesNodeView({ node, onDelete, onUpdate, onStartConnection, onE
           </div>
         )}
         <div className="text-xs text-white/70">Pose References</div>
-        
+
         <div className="grid grid-cols-2 gap-2">
           {presetPoses.map((preset) => (
             <button
               key={preset.name}
-              className={`p-2 rounded border ${
-                node.selectedPose === preset.name
-                  ? "border-indigo-400 bg-indigo-500/20"
-                  : "border-white/20 hover:border-white/40"
-              }`}
+              className={`p-2 rounded border ${node.selectedPose === preset.name
+                ? "border-indigo-400 bg-indigo-500/20"
+                : "border-white/20 hover:border-white/40"
+                }`}
               onClick={() => selectPose(preset.path, preset.name, preset.prompt)}
             >
-              <img 
-                src={preset.path} 
-                alt={preset.name} 
+              <img
+                src={preset.path}
+                alt={preset.name}
                 className="w-full h-24 object-contain rounded mb-1"
                 title="Click to select pose"
               />
@@ -2106,8 +2099,8 @@ export function PosesNodeView({ node, onDelete, onUpdate, onStartConnection, onE
             </button>
           ))}
         </div>
-        
-        <Button 
+
+        <Button
           className="w-full"
           onClick={() => onProcess(node.id)}
           disabled={node.isRunning || !node.selectedPose}
@@ -2115,7 +2108,7 @@ export function PosesNodeView({ node, onDelete, onUpdate, onStartConnection, onE
         >
           {node.isRunning ? "Processing..." : "Apply Pose"}
         </Button>
-        
+
         <NodeOutputSection
           nodeId={node.id}
           output={node.output}
@@ -2164,12 +2157,11 @@ export function EditNodeView({
   onUpdatePosition,
   getNodeHistoryInfo,
   navigateNodeHistory,
-  getCurrentNodeImage,
-  apiToken
+  getCurrentNodeImage
 }: any) {
   // Use custom hook for drag functionality - handles position updates during dragging
   const { localPos, onPointerDown, onPointerMove, onPointerUp } = useNodeDrag(node, onUpdatePosition);
-  
+
   /**
    * Handle prompt improvement using Gemini API
    * Takes the user's basic edit description and enhances it for better AI processing
@@ -2180,7 +2172,7 @@ export function EditNodeView({
       alert('Please enter an edit description first');
       return;
     }
-    
+
     try {
       // Call the API to improve the prompt
       const response = await fetch('/api/improve-prompt', {
@@ -2188,11 +2180,10 @@ export function EditNodeView({
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({
           prompt: node.editPrompt.trim(),
-          type: 'edit',
-          apiToken: apiToken || undefined
+          type: 'edit'
         })
       });
-      
+
       if (response.ok) {
         const { improvedPrompt } = await response.json();
         onUpdate(node.id, { editPrompt: improvedPrompt });
@@ -2211,7 +2202,7 @@ export function EditNodeView({
   const handleDeleteNode = (e: React.MouseEvent) => {
     e.stopPropagation();  // Prevent triggering drag
     e.preventDefault();
-    
+
     if (confirm('Delete this node?')) {
       onDelete(node.id);
     }
@@ -2232,9 +2223,9 @@ export function EditNodeView({
   };
 
   return (
-    <div className="nb-node absolute text-white w-[320px]" style={{ left: localPos.x, top: localPos.y }}>
+    <div className="nb-node absolute w-[320px]" style={{ left: localPos.x, top: localPos.y }}>
       {/* Node Header - Contains title, delete button, and connection ports */}
-      <div 
+      <div
         className="nb-header px-3 py-2 flex items-center justify-between rounded-t-[14px] cursor-grab active:cursor-grabbing"
         onPointerDown={onPointerDown}    // Start dragging
         onPointerMove={onPointerMove}    // Handle drag movement
@@ -2242,10 +2233,10 @@ export function EditNodeView({
       >
         {/* Input port (left side) - where connections come in */}
         <Port className="in" nodeId={node.id} isOutput={false} onEndConnection={onEndConnection} onDisconnect={(nodeId) => onUpdate(nodeId, { input: undefined })} />
-        
+
         {/* Node title */}
         <div className="font-semibold text-sm flex-1 text-center">EDIT</div>
-        
+
         <div className="flex items-center gap-1">
           {/* Delete button */}
           <Button
@@ -2259,12 +2250,12 @@ export function EditNodeView({
           >
             ×
           </Button>
-          
+
           {/* Output port (right side) - where connections go out */}
           <Port className="out" nodeId={node.id} isOutput={true} onStartConnection={onStartConnection} />
         </div>
       </div>
-      
+
       {/* Node Content - Contains all the controls and outputs */}
       {/* Node Content Area - Contains all controls, inputs, and outputs */}
       <div className="p-3 space-y-3">
@@ -2282,10 +2273,10 @@ export function EditNodeView({
             </Button>
           </div>
         )}
-        
+
         {/* Edit prompt input and improvement section */}
         <div className="space-y-2">
-          <div className="text-xs text-white/70 mb-1">Edit Instructions</div>
+          <div className="text-xs text-muted-foreground mb-1">Edit Instructions</div>
           <Textarea
             className="w-full"
             placeholder="Describe what to edit (e.g., 'make it brighter', 'add more contrast', 'make it look vintage')"
@@ -2293,7 +2284,7 @@ export function EditNodeView({
             onChange={handlePromptChange}
             rows={3}
           />
-          
+
           {/* AI-powered prompt improvement button */}
           <Button
             variant="outline"
@@ -2306,28 +2297,28 @@ export function EditNodeView({
             ✨ Improve with Gemini
           </Button>
         </div>
-        
+
         {/* Process button - starts the editing operation */}
-        <Button 
+        <Button
           className="w-full"
           onClick={() => onProcess(node.id)}
           disabled={node.isRunning || !node.editPrompt?.trim()}
           title={
-            !node.input ? "Connect an input first" : 
-            !node.editPrompt?.trim() ? "Enter edit instructions first" :
-            "Apply the edit to the input image"
+            !node.input ? "Connect an input first" :
+              !node.editPrompt?.trim() ? "Enter edit instructions first" :
+                "Apply the edit to the input image"
           }
         >
           {node.isRunning ? "Processing..." : "Apply Edit"}
         </Button>
-        
+
         {/* Output section with history navigation and download */}
         <NodeOutputSection
           nodeId={node.id}
           output={node.output}
           downloadFileName={`edit-${Date.now()}.png`}
         />
-        
+
         {/* Error display */}
         {node.error && (
           <div className="text-xs text-red-400 mt-2 p-2 bg-red-900/20 rounded">

app/page.tsx

@@ -66,10 +66,10 @@ const uid = () => Math.random().toString(36).slice(2, 9);
  */
 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.
 
@@ -109,13 +109,13 @@ 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;
@@ -125,11 +125,11 @@ async function copyImageToClipboard(dataUrl: string) {
         };
         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 })
       ]);
@@ -198,24 +198,24 @@ type BackgroundNode = NodeBase & {
   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
@@ -440,7 +440,7 @@ function screenToWorld(
 
 function useNodeDrag(
   nodeId: string,
-  scaleRef: React.MutableRefObject<number>, 
+  scaleRef: React.MutableRefObject<number>,
   initial: { x: number; y: number },
   onUpdatePosition: (id: string, x: number, y: number) => void
 ) {
@@ -449,11 +449,11 @@ function useNodeDrag(
   const start = useRef<{ sx: number; sy: number; ox: number; oy: number } | null>(
     null
   );
-  
+
   useEffect(() => {
     setLocalPos(initial);
   }, [initial.x, initial.y]);
-  
+
   const onPointerDown = (e: React.PointerEvent) => {
     e.stopPropagation();
     dragging.current = true;
@@ -477,13 +477,13 @@ function useNodeDrag(
   return { pos: localPos, onPointerDown, onPointerMove, onPointerUp };
 }
 
-function Port({ 
-  className, 
+function Port({
+  className,
   nodeId,
   isOutput,
   onStartConnection,
   onEndConnection
-}: { 
+}: {
   className?: string;
   nodeId?: string;
   isOutput?: boolean;
@@ -496,7 +496,7 @@ function Port({
       onStartConnection(nodeId);
     }
   };
-  
+
   const handlePointerUp = (e: React.PointerEvent) => {
     e.stopPropagation();
     if (!isOutput && nodeId && onEndConnection) {
@@ -505,8 +505,8 @@ function Port({
   };
 
   return (
-    <div 
-      className={cx("nb-port", className)} 
+    <div
+      className={cx("nb-port", className)}
       onPointerDown={handlePointerDown}
       onPointerUp={handlePointerUp}
       onPointerEnter={handlePointerUp}
@@ -533,7 +533,7 @@ function CharacterNodeView({
 }) {
   const { pos, onPointerDown, onPointerMove, onPointerUp } = useNodeDrag(
     node.id,
-    scaleRef, 
+    scaleRef,
     { x: node.x, y: node.y },
     onUpdatePosition
   );
@@ -570,7 +570,7 @@ function CharacterNodeView({
 
   return (
     <div
-      className="nb-node absolute text-white w-[340px] select-none"
+      className="nb-node absolute w-[340px] select-none"
       style={{ left: pos.x, top: pos.y }}
       onDrop={onDrop}
       onDragOver={(e) => e.preventDefault()}
@@ -588,7 +588,7 @@ function CharacterNodeView({
           onChange={(e) => onChangeLabel(node.id, e.target.value)}
         />
         <div className="flex items-center gap-2">
-          <Button 
+          <Button
             variant="ghost" size="icon" className="text-destructive hover:bg-destructive/20 h-6 w-6"
             onClick={(e) => {
               e.stopPropagation();
@@ -603,8 +603,8 @@ function CharacterNodeView({
           >
             ×
           </Button>
-          <Port 
-            className="out" 
+          <Port
+            className="out"
             nodeId={node.id}
             isOutput={true}
             onStartConnection={onStartConnection}
@@ -612,7 +612,7 @@ function CharacterNodeView({
         </div>
       </div>
       <div className="p-3 space-y-3">
-        <div className="aspect-[4/5] w-full rounded-xl bg-black/40 grid place-items-center overflow-hidden">
+        <div className="aspect-[4/5] w-full rounded-xl bg-muted/30 grid place-items-center overflow-hidden border border-border/10">
           <img
             src={node.image}
             alt="character"
@@ -637,12 +637,12 @@ function CharacterNodeView({
                 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);
@@ -654,7 +654,7 @@ function CharacterNodeView({
           />
         </div>
         <div className="flex gap-2">
-          <label className="text-xs bg-white/10 hover:bg-white/20 rounded px-3 py-1 cursor-pointer">
+          <label className="text-xs bg-secondary hover:bg-secondary/80 text-secondary-foreground transition-colors rounded px-3 py-1 cursor-pointer">
             Upload
             <input
               type="file"
@@ -668,20 +668,20 @@ function CharacterNodeView({
                   // Reset input safely
                   try {
                     e.currentTarget.value = "";
-                  } catch {}
+                  } catch { }
                 }
               }}
             />
           </label>
           <button
-            className="text-xs bg-white/10 hover:bg-white/20 rounded px-3 py-1"
+            className="text-xs bg-secondary hover:bg-secondary/80 text-secondary-foreground transition-colors rounded px-3 py-1"
             onClick={async () => {
               try {
                 const text = await navigator.clipboard.readText();
                 if (text && (text.startsWith("http") || text.startsWith("data:image"))) {
                   onChangeImage(node.id, text);
                 }
-              } catch {}
+              } catch { }
             }}
           >
             Paste URL
@@ -724,15 +724,15 @@ function MergeNodeView({
 
 
   return (
-    <div className="nb-node absolute text-white w-[420px]" style={{ left: pos.x, top: pos.y }}>
+    <div className="nb-node absolute w-[420px]" style={{ left: pos.x, top: pos.y }}>
       <div
         className="nb-header cursor-grab active:cursor-grabbing rounded-t-[14px] px-3 py-2 flex items-center justify-between"
         onPointerDown={onPointerDown}
         onPointerMove={onPointerMove}
         onPointerUp={onPointerUp}
       >
-        <Port 
-          className="in" 
+        <Port
+          className="in"
           nodeId={node.id}
           isOutput={false}
           onEndConnection={onEndConnection}
@@ -756,8 +756,8 @@ function MergeNodeView({
           >
             ×
           </Button>
-          <Port 
-            className="out" 
+          <Port
+            className="out"
             nodeId={node.id}
             isOutput={true}
             onStartConnection={onStartConnection}
@@ -765,16 +765,16 @@ function MergeNodeView({
         </div>
       </div>
       <div className="p-3 space-y-3">
-        <div className="text-xs text-white/70">Inputs</div>
+        <div className="text-xs text-muted-foreground font-medium">Inputs</div>
         <div className="flex flex-wrap gap-2">
           {node.inputs.map((id) => {
             const inputNode = allNodes.find((n) => n.id === id);
             if (!inputNode) return null;
-            
+
             // Get image and label based on node type
             let image: string | null = null;
             let label = "";
-            
+
             if (inputNode.type === "CHARACTER") {
               image = (inputNode as CharacterNode).image;
               label = (inputNode as CharacterNode).label || "Character";
@@ -789,14 +789,14 @@ function MergeNodeView({
               // Node without output yet
               label = `${inputNode.type} (pending)`;
             }
-            
+
             return (
-              <div key={id} className="flex items-center gap-2 bg-white/10 rounded px-2 py-1">
+              <div key={id} className="flex items-center gap-2 bg-secondary/50 border border-border/50 text-secondary-foreground 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 cursor-pointer hover:opacity-80" 
+                  <div className="w-6 h-6 rounded overflow-hidden bg-muted">
+                    <img
+                      src={image}
+                      className="w-full h-full object-contain cursor-pointer hover:opacity-80"
                       alt="inp"
                       onClick={async () => {
                         try {
@@ -817,12 +817,12 @@ function MergeNodeView({
                           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);
@@ -874,9 +874,9 @@ function MergeNodeView({
           </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 cursor-pointer hover:opacity-80 transition-opacity" 
+              <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) {
@@ -900,12 +900,12 @@ function MergeNodeView({
                       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);
@@ -1032,7 +1032,7 @@ export default function EditorPage() {
         alert('OAuth client ID not configured. Please check environment variables.');
         return;
       }
-      
+
       window.location.href = await oauthLoginUrl({
         clientId,
         redirectUrl: `${window.location.origin}/api/auth/callback`
@@ -1042,12 +1042,41 @@ export default function EditorPage() {
 
   // Connection dragging state
   const [draggingFrom, setDraggingFrom] = useState<string | null>(null);
-  const [dragPos, setDragPos] = useState<{x: number, y: number} | null>(null);
-  
+  const [dragPos, setDragPos] = useState<{ x: number, y: number } | null>(null);
+
   // API Token state (restored for manual review)
   const [apiToken, setApiToken] = useState("");
   const [showHelpSidebar, setShowHelpSidebar] = useState(false);
-  
+
+  // Processing Mode: 'nanobananapro' uses Gemini API, 'huggingface' uses HF models
+  type ProcessingMode = 'nanobananapro' | 'huggingface';
+  const [processingMode, setProcessingMode] = useState<ProcessingMode>('nanobananapro');
+
+  // Available HF models
+  const HF_MODELS = {
+    "FLUX.1-Kontext-dev": {
+      id: "black-forest-labs/FLUX.1-Kontext-dev",
+      name: "FLUX.1 Kontext",
+      type: "image-to-image",
+      description: "Advanced image editing with context understanding",
+    },
+    "Qwen-Image-Edit": {
+      id: "Qwen/Qwen-Image-Edit",
+      name: "Qwen Image Edit",
+      type: "image-to-image",
+      description: "Powerful image editing and manipulation",
+    },
+    "FLUX.1-dev": {
+      id: "black-forest-labs/FLUX.1-dev",
+      name: "FLUX.1 Dev",
+      type: "text-to-image",
+      description: "High-quality text-to-image generation",
+    },
+  };
+
+  const [selectedHfModel, setSelectedHfModel] = useState<keyof typeof HF_MODELS>("FLUX.1-Kontext-dev");
+
+
   // HF PRO AUTHENTICATION
   const [isHfProLoggedIn, setIsHfProLoggedIn] = useState(false);
   const [isCheckingAuth, setIsCheckingAuth] = useState(true);
@@ -1143,9 +1172,9 @@ export default function EditorPage() {
         // - MERGE nodes (can have output after merging)
         // - Any processing node (BACKGROUND, CLOTHES, BLEND, etc.)
         // - Even unprocessed nodes (for configuration chaining)
-        
+
         // All nodes can be connected for chaining
-        setNodes(prev => prev.map(n => 
+        setNodes(prev => prev.map(n =>
           n.id === nodeId ? { ...n, input: draggingFrom } : n
         ));
       }
@@ -1161,14 +1190,14 @@ export default function EditorPage() {
   const countPendingConfigurations = (startNodeId: string): number => {
     let count = 0;
     const visited = new Set<string>();
-    
+
     const traverse = (nodeId: string) => {
       if (visited.has(nodeId)) return;
       visited.add(nodeId);
-      
+
       const node = nodes.find(n => n.id === nodeId);
       if (!node) return;
-      
+
       // Check if this node has configuration but no output
       if (!(node as any).output && node.type !== "CHARACTER" && node.type !== "MERGE") {
         const config = getNodeConfiguration(node);
@@ -1176,22 +1205,22 @@ export default function EditorPage() {
           count++;
         }
       }
-      
+
       // Check upstream
       const upstreamId = (node as any).input;
       if (upstreamId) {
         traverse(upstreamId);
       }
     };
-    
+
     traverse(startNodeId);
     return count;
   };
-  
+
   // Helper to extract configuration from a node
   const getNodeConfiguration = (node: AnyNode): Record<string, unknown> => {
     const config: Record<string, unknown> = {};
-    
+
     switch (node.type) {
       case "BACKGROUND":
         if ((node as BackgroundNode).backgroundType) {
@@ -1201,20 +1230,20 @@ export default function EditorPage() {
           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;
@@ -1295,7 +1324,7 @@ export default function EditorPage() {
         }
         break;
     }
-    
+
     return config;
   };
 
@@ -1312,34 +1341,34 @@ export default function EditorPage() {
     let accumulatedParams: any = {};
     const processedNodes: string[] = []; // Track which nodes' configs we're applying
     const inputId = (node as any).input;
-    
+
     if (inputId) {
       // Track unprocessed MERGE nodes that need to be executed
       const unprocessedMerges: MergeNode[] = [];
-      
+
       // Find the source image by traversing the chain backwards
       const findSourceImage = (currentNodeId: string, visited: Set<string> = new Set()): string | null => {
         if (visited.has(currentNodeId)) return null;
         visited.add(currentNodeId);
-        
+
         const currentNode = nodes.find(n => n.id === currentNodeId);
         if (!currentNode) return null;
-        
+
         // If this is a CHARACTER node, return its image
         if (currentNode.type === "CHARACTER") {
           return (currentNode as CharacterNode).image;
         }
-        
+
         // If this is a MERGE node with output, return its output
         if (currentNode.type === "MERGE" && (currentNode as MergeNode).output) {
           return (currentNode as MergeNode).output || null;
         }
-        
+
         // If any node has been processed, return its output
         if ((currentNode as any).output) {
           return (currentNode as any).output;
         }
-        
+
         // For MERGE nodes without output, we need to process them first
         if (currentNode.type === "MERGE") {
           const merge = currentNode as MergeNode;
@@ -1355,39 +1384,39 @@ export default function EditorPage() {
             if (inputImage) return inputImage;
           }
         }
-        
+
         // Otherwise, check upstream
         const upstreamId = (currentNode as any).input;
         if (upstreamId) {
           return findSourceImage(upstreamId, visited);
         }
-        
+
         return null;
       };
-      
+
       // Collect all configurations from unprocessed nodes in the chain
       const collectConfigurations = (currentNodeId: string, visited: Set<string> = new Set()): any => {
         if (visited.has(currentNodeId)) return {};
         visited.add(currentNodeId);
-        
+
         const currentNode = nodes.find(n => n.id === currentNodeId);
         if (!currentNode) return {};
-        
+
         let configs: any = {};
-        
+
         // First, collect from upstream nodes
         const upstreamId = (currentNode as any).input;
         if (upstreamId) {
           configs = collectConfigurations(upstreamId, visited);
         }
-        
+
         // Add this node's configuration only if:
         // 1. It's the current node being processed, OR
         // 2. It hasn't been processed yet (no output) AND it's not the current node
-        const shouldIncludeConfig = 
+        const shouldIncludeConfig =
           currentNodeId === nodeId || // Always include current node's config
           (!(currentNode as any).output && currentNodeId !== nodeId); // Include unprocessed intermediate nodes
-        
+
         if (shouldIncludeConfig) {
           const nodeConfig = getNodeConfiguration(currentNode);
           if (Object.keys(nodeConfig).length > 0) {
@@ -1398,66 +1427,66 @@ export default function EditorPage() {
             }
           }
         }
-        
+
         return configs;
       };
-      
+
       // Find the source image
       inputImage = findSourceImage(inputId);
-      
+
       // If we found unprocessed merges, we need to execute them first
       if (unprocessedMerges.length > 0 && !inputImage) {
-        
+
         // Process each merge node
         for (const merge of unprocessedMerges) {
           // Set loading state for the merge
-          setNodes(prev => prev.map(n => 
+          setNodes(prev => prev.map(n =>
             n.id === merge.id ? { ...n, isRunning: true, error: null } : n
           ));
-          
+
           try {
             const mergeOutput = await executeMerge(merge);
-            
+
             // Update the merge node with output
-            setNodes(prev => prev.map(n => 
+            setNodes(prev => prev.map(n =>
               n.id === merge.id ? { ...n, output: mergeOutput || undefined, isRunning: false, error: null } : n
             ));
-            
+
             // Track that we processed this merge as part of the chain
             processedNodes.push(merge.id);
-            
+
             // Now use this as our input image if it's the direct input
             if (inputId === merge.id) {
               inputImage = mergeOutput;
             }
           } catch (e: any) {
             console.error("Auto-merge error:", e);
-            setNodes(prev => prev.map(n => 
+            setNodes(prev => prev.map(n =>
               n.id === merge.id ? { ...n, isRunning: false, error: e?.message || "Merge failed" } : n
             ));
             // Abort the main processing if merge failed
-            setNodes(prev => prev.map(n => 
+            setNodes(prev => prev.map(n =>
               n.id === nodeId ? { ...n, error: "Failed to process upstream MERGE node", isRunning: false } : n
             ));
             return;
           }
         }
-        
+
         // After processing merges, try to find the source image again
         if (!inputImage) {
           inputImage = findSourceImage(inputId);
         }
       }
-      
+
       // Collect configurations from the chain
       accumulatedParams = collectConfigurations(inputId, new Set());
     }
 
     if (!inputImage) {
-      const errorMsg = inputId 
+      const errorMsg = inputId
         ? "No source image found in the chain. Connect to a CHARACTER node or processed node."
         : "No input connected. Connect an image source to this node.";
-      setNodes(prev => prev.map(n => 
+      setNodes(prev => prev.map(n =>
         n.id === nodeId ? { ...n, error: errorMsg, isRunning: false } : n
       ));
       return;
@@ -1466,11 +1495,11 @@ export default function EditorPage() {
     // Add current node's configuration
     const currentNodeConfig = getNodeConfiguration(node);
     const params = { ...accumulatedParams, ...currentNodeConfig };
-    
+
     // Count how many unprocessed nodes we're combining
-    const unprocessedNodeCount = Object.keys(params).length > 0 ? 
+    const unprocessedNodeCount = Object.keys(params).length > 0 ?
       (processedNodes.length + 1) : 1;
-    
+
     // Show info about batch processing
     if (unprocessedNodeCount > 1) {
     } else {
@@ -1489,7 +1518,7 @@ export default function EditorPage() {
       if (inputImage && inputImage.length > 10 * 1024 * 1024) { // 10MB limit warning
         console.warn("Large input image detected, size:", (inputImage.length / (1024 * 1024)).toFixed(2) + "MB");
       }
-      
+
       // Check if params contains custom images and validate them
       if (params.clothesImage) {
         // Validate it's a proper data URL
@@ -1497,49 +1526,48 @@ export default function EditorPage() {
           throw new Error("Invalid clothes image format. Please upload a valid image.");
         }
       }
-      
+
       if (params.customBackgroundImage) {
         // 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.");
         }
       }
-      
+
       // Log request details for debugging
-      
-      // 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", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({
-          type: "COMBINED", // Indicate this is a combined processing
-          image: inputImage,
-          params,
-          apiToken: apiToken || undefined
-        }),
-      });
+      // Conditionally use HuggingFace or Gemini API based on processing mode
+      let res: Response;
+
+      if (processingMode === 'huggingface') {
+        // Use HuggingFace models
+        if (!isHfProLoggedIn) {
+          throw new Error("Please login with HuggingFace to use HF models. Click 'Login with HuggingFace' in the header.");
+        }
+
+        res = await fetch("/api/hf-process", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            type: "COMBINED",
+            model: selectedHfModel,
+            image: inputImage,
+            params
+          }),
+        });
+      } else {
+        // Use Nano Banana Pro (Gemini API)
+        res = await fetch("/api/process", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            type: "COMBINED",
+            image: inputImage,
+            params,
+            apiToken: apiToken || undefined
+          }),
+        });
+      }
 
       // Check if response is actually JSON before parsing
       const contentType = res.headers.get("content-type");
@@ -1552,8 +1580,8 @@ export default function EditorPage() {
       const data = await res.json();
       if (!res.ok) {
         // Handle both string and object error formats
-        const errorMessage = typeof data.error === 'string' 
-          ? data.error 
+        const errorMessage = typeof data.error === 'string'
+          ? data.error
           : data.error?.message || JSON.stringify(data.error) || "Processing failed";
         throw new Error(errorMessage);
       }
@@ -1573,11 +1601,11 @@ export default function EditorPage() {
       }));
 
       // Add to node's history
-      const description = unprocessedNodeCount > 1 
+      const description = unprocessedNodeCount > 1
         ? `Combined ${unprocessedNodeCount} transformations`
         : `${node.type} transformation`;
-      
-      
+
+
       if (unprocessedNodeCount > 1) {
       }
     } catch (e: any) {
@@ -1660,13 +1688,13 @@ export default function EditorPage() {
     // Get images from merge inputs - now accepts any node type
     const mergeImages: string[] = [];
     const inputData: { image: string; label: string }[] = [];
-    
+
     for (const inputId of merge.inputs) {
       const inputNode = nodes.find(n => n.id === inputId);
       if (inputNode) {
         let image: string | null = null;
         let label = "";
-        
+
         if (inputNode.type === "CHARACTER") {
           image = (inputNode as CharacterNode).image;
           label = (inputNode as CharacterNode).label || "";
@@ -1680,7 +1708,7 @@ export default function EditorPage() {
           image = mergeOutput !== undefined ? mergeOutput : null;
           label = "Merged Image";
         }
-        
+
         if (image) {
           // Validate image format
           if (!image.startsWith('data:') && !image.startsWith('http') && !image.startsWith('/')) {
@@ -1692,15 +1720,15 @@ export default function EditorPage() {
         }
       }
     }
-    
+
     if (mergeImages.length < 2) {
       throw new Error("Not enough valid inputs for merge. Need at least 2 images.");
     }
-    
+
     // Log merge details for debugging
-    
+
     const prompt = generateMergePrompt(inputData);
-    
+
     // ORIGINAL MERGE LOGIC RESTORED (HF processing commented out)
     /*
     const res = await fetch("/api/hf-process", {
@@ -1713,19 +1741,19 @@ export default function EditorPage() {
       }),
     });
     */
-    
+
     // Use the process route instead of merge route
     const res = await fetch("/api/process", {
       method: "POST",
       headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ 
+      body: JSON.stringify({
         type: "MERGE",
-        images: mergeImages, 
+        images: mergeImages,
         prompt,
         apiToken: apiToken || undefined
       }),
     });
-    
+
     // Check if response is actually JSON before parsing
     const contentType = res.headers.get("content-type");
     if (!contentType || !contentType.includes("application/json")) {
@@ -1733,31 +1761,40 @@ export default function EditorPage() {
       console.error("Non-JSON response received:", textResponse);
       throw new Error("Server returned an error page instead of JSON. Check your API key configuration.");
     }
-    
+
     const data = await res.json();
     if (!res.ok) {
       throw new Error(data.error || "Merge failed");
     }
-    
+
     return data.image || (data.images?.[0] as string) || null;
   };
-  
+
   const runMerge = async (mergeId: string) => {
+    // Check if using HuggingFace mode - MERGE is not supported
+    if (processingMode === 'huggingface') {
+      setNodes((prev) => prev.map((n) => (n.id === mergeId && n.type === "MERGE" ? {
+        ...n,
+        error: "MERGE requires Nano Banana Pro mode. HuggingFace models only accept single images. Please switch to '🍌 Nano Banana Pro' in the header and enter your Gemini API key."
+      } : n)));
+      return;
+    }
+
     setNodes((prev) => prev.map((n) => (n.id === mergeId && n.type === "MERGE" ? { ...n, isRunning: true, error: null } : n)));
     try {
       const merge = (nodes.find((n) => n.id === mergeId) as MergeNode) || null;
       if (!merge) return;
-      
+
       // Get input nodes with their labels - now accepts any node type
       const inputData = merge.inputs
         .map((id, index) => {
           const inputNode = nodes.find((n) => n.id === id);
           if (!inputNode) return null;
-          
+
           // Support CHARACTER nodes, processed nodes, and MERGE outputs
           let image: string | null = null;
           let label = "";
-          
+
           if (inputNode.type === "CHARACTER") {
             image = (inputNode as CharacterNode).image;
             label = (inputNode as CharacterNode).label || `CHARACTER ${index + 1}`;
@@ -1771,17 +1808,17 @@ export default function EditorPage() {
             image = mergeOutput !== undefined ? mergeOutput : null;
             label = `Merged Image ${index + 1}`;
           }
-          
+
           if (!image) return null;
-          
+
           return { image, label };
         })
         .filter(Boolean) as { image: string; label: string }[];
-      
+
       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
-      
+
       // Generate dynamic prompt based on number of inputs
       const prompt = generateMergePrompt(inputData);
       const imgs = inputData.map(d => d.image);
@@ -1807,14 +1844,14 @@ export default function EditorPage() {
       const res = await fetch("/api/process", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ 
+        body: JSON.stringify({
           type: "MERGE",
-          images: imgs, 
+          images: imgs,
           prompt,
           apiToken: apiToken || undefined
         }),
       });
-      
+
       // Check if response is actually JSON before parsing
       const contentType = res.headers.get("content-type");
       if (!contentType || !contentType.includes("application/json")) {
@@ -1822,7 +1859,7 @@ export default function EditorPage() {
         console.error("Non-JSON response received:", textResponse);
         throw new Error("Server returned an error page instead of JSON. Check your API key configuration.");
       }
-      
+
       const js = await res.json();
       if (!res.ok) {
         // Show more helpful error messages
@@ -1834,7 +1871,7 @@ 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) => {
@@ -1844,7 +1881,7 @@ export default function EditorPage() {
           }
           return `${inputNode?.type || 'Node'} ${index + 1}`;
         });
-        
+
       }
     } catch (e: any) {
       console.error("Merge error:", e);
@@ -1861,11 +1898,11 @@ export default function EditorPage() {
       maxX = Math.max(maxX, node.x + 500);
       maxY = Math.max(maxY, node.y + 500);
     });
-    return { 
-      x: minX, 
-      y: minY, 
-      width: maxX - minX, 
-      height: maxY - minY 
+    return {
+      x: minX,
+      y: minY,
+      width: maxX - minX,
+      height: maxY - minY
     };
   }, [nodes]);
 
@@ -1887,9 +1924,9 @@ export default function EditorPage() {
       const width = widths[n.type] || 320;
       return { x: n.x + width - 10, y: n.y + 25 };
     };
-    
+
     const getNodeInputPort = (n: AnyNode) => ({ x: n.x + 10, y: n.y + 25 });
-    
+
     const createPath = (x1: number, y1: number, x2: number, y2: number) => {
       const dx = x2 - x1;
       const dy = y2 - y1;
@@ -1897,9 +1934,9 @@ export default function EditorPage() {
       const controlOffset = Math.min(200, Math.max(50, distance * 0.3));
       return `M ${x1} ${y1} C ${x1 + controlOffset} ${y1}, ${x2 - controlOffset} ${y2}, ${x2} ${y2}`;
     };
-    
+
     const paths: { path: string; active?: boolean; processing?: boolean }[] = [];
-    
+
     // Handle all connections
     for (const node of nodes) {
       if (node.type === "MERGE") {
@@ -1911,7 +1948,7 @@ export default function EditorPage() {
             const start = getNodeOutputPort(inputNode);
             const end = getNodeInputPort(node);
             const isProcessing = merge.isRunning; // Only animate to the currently processing merge node
-            paths.push({ 
+            paths.push({
               path: createPath(start.x, start.y, end.x, end.y),
               processing: isProcessing
             });
@@ -1925,26 +1962,26 @@ export default function EditorPage() {
           const start = getNodeOutputPort(inputNode);
           const end = getNodeInputPort(node);
           const isProcessing = (node as any).isRunning; // Only animate to the currently processing node
-          paths.push({ 
+          paths.push({
             path: createPath(start.x, start.y, end.x, end.y),
             processing: isProcessing
           });
         }
       }
     }
-    
+
     // Dragging path
     if (draggingFrom && dragPos) {
       const sourceNode = nodes.find(n => n.id === draggingFrom);
       if (sourceNode) {
         const start = getNodeOutputPort(sourceNode);
-        paths.push({ 
-          path: createPath(start.x, start.y, dragPos.x, dragPos.y), 
-          active: true 
+        paths.push({
+          path: createPath(start.x, start.y, dragPos.x, dragPos.y),
+          active: true
         });
       }
     }
-    
+
     return paths;
   }, [nodes, draggingFrom, dragPos]);
 
@@ -1997,29 +2034,29 @@ export default function EditorPage() {
     const rect = containerRef.current!.getBoundingClientRect();
     const world = screenToWorld(e.clientX, e.clientY, rect, tx, ty, scale);
     setMenuWorld(world);
-    
+
     // 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);
   };
@@ -2030,8 +2067,8 @@ export default function EditorPage() {
       x: menuWorld.x,
       y: menuWorld.y,
     };
-    
-    switch(kind) {
+
+    switch (kind) {
       case "CHARACTER":
         addCharacter(menuWorld);
         break;
@@ -2074,24 +2111,89 @@ export default function EditorPage() {
 
   return (
     <div className="min-h-[100svh] bg-background text-foreground">
-      <header className="flex items-center justify-between px-6 py-4 border-b border-border/60 bg-card/70 backdrop-blur">
+      <header className="flex items-center justify-between px-6 py-3 border-b border-border/60 bg-card/70 backdrop-blur">
         <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-3">
-          {/* ORIGINAL API TOKEN INPUT RESTORED */}
-          <label htmlFor="api-token" className="text-sm font-medium text-muted-foreground">
-            API Token:
-          </label>
-          <Input
-            id="api-token"
-            type="password"
-            placeholder="Enter your Google Gemini API token"
-            value={apiToken}
-            onChange={(e) => setApiToken(e.target.value)}
-            className="w-64"
-          />
-          
+          {/* Processing Mode Toggle */}
+          <div className="flex items-center gap-2 p-1 bg-muted/50 rounded-lg">
+            <button
+              className={`px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${processingMode === 'nanobananapro'
+                ? 'bg-primary text-primary-foreground shadow-sm'
+                : 'text-muted-foreground hover:text-foreground'
+                }`}
+              onClick={() => setProcessingMode('nanobananapro')}
+              title="Use Google Gemini API - supports all features including MERGE"
+            >
+              🍌 Nano Banana Pro
+            </button>
+            <button
+              className={`px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${processingMode === 'huggingface'
+                ? 'bg-primary text-primary-foreground shadow-sm'
+                : 'text-muted-foreground hover:text-foreground'
+                }`}
+              onClick={() => setProcessingMode('huggingface')}
+              title="Use HuggingFace models - requires HF login"
+            >
+              🤗 HuggingFace
+            </button>
+          </div>
+
+          {/* Conditional UI based on processing mode */}
+          {processingMode === 'nanobananapro' ? (
+            <>
+              <div className="h-6 w-px bg-border" />
+              <label htmlFor="api-token" className="text-sm font-medium text-muted-foreground">
+                Gemini API Key:
+              </label>
+              <Input
+                id="api-token"
+                type="password"
+                placeholder="Enter your Google Gemini API key"
+                value={apiToken}
+                onChange={(e) => setApiToken(e.target.value)}
+                className="w-56"
+              />
+            </>
+          ) : (
+            <>
+              <div className="h-6 w-px bg-border" />
+              {/* HF Login Button */}
+              <Button
+                variant={isHfProLoggedIn ? "outline" : "default"}
+                size="sm"
+                className="h-8"
+                onClick={handleHfProLogin}
+                disabled={isCheckingAuth}
+              >
+                {isCheckingAuth ? "Checking..." : isHfProLoggedIn ? "✓ HF Connected" : "Login with HuggingFace"}
+              </Button>
+
+              {/* Model Selector - only show when logged in */}
+              {isHfProLoggedIn && (
+                <>
+                  <label htmlFor="hf-model" className="text-sm font-medium text-muted-foreground">
+                    Model:
+                  </label>
+                  <select
+                    id="hf-model"
+                    value={selectedHfModel}
+                    onChange={(e) => setSelectedHfModel(e.target.value as keyof typeof HF_MODELS)}
+                    className="h-8 px-2 text-sm bg-background border border-border rounded-md focus:outline-none focus:ring-2 focus:ring-ring"
+                  >
+                    {Object.entries(HF_MODELS).map(([key, model]) => (
+                      <option key={key} value={key}>
+                        {model.name} ({model.type})
+                      </option>
+                    ))}
+                  </select>
+                </>
+              )}
+            </>
+          )}
+
+          <div className="h-6 w-px bg-border" />
           <Button
             variant="outline"
             size="sm"
@@ -2101,8 +2203,6 @@ export default function EditorPage() {
           >
             Help
           </Button>
-          
-
         </div>
       </header>
 
@@ -2110,7 +2210,7 @@ export default function EditorPage() {
       {showHelpSidebar && (
         <>
           {/* Backdrop */}
-          <div 
+          <div
             className="fixed inset-0 bg-black/50 z-[9998]"
             onClick={() => setShowHelpSidebar(false)}
           />
@@ -2128,73 +2228,72 @@ export default function EditorPage() {
                   <span className="text-lg">×</span>
                 </Button>
               </div>
-              
+
               <div className="space-y-6">
-                {/* ORIGINAL HELP CONTENT RESTORED (HF help commented out) */}
-                {/*
+                {/* Processing Modes Explanation */}
                 <div>
-                  <h3 className="font-semibold mb-3 text-foreground">🤗 HF Pro Login</h3>
+                  <h3 className="font-semibold mb-3 text-foreground">⚙️ Processing Modes</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>
+                      <p className="font-medium text-primary mb-2">🍌 Nano Banana Pro (Gemini API)</p>
+                      <p>Uses Google's Gemini API. <strong>Supports ALL nodes</strong> including MERGE for combining multiple images into group photos.</p>
+                      <p className="mt-1 text-xs">Requires a Google Gemini API key from <a href="https://aistudio.google.com/app/apikey" target="_blank" rel="noopener noreferrer" className="text-primary hover:underline">AI Studio</a>.</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>
+                      <p className="font-medium text-secondary-foreground mb-2">🤗 HuggingFace Models</p>
+                      <p>Uses HuggingFace inference API with models like FLUX.1-Kontext and Qwen-Image-Edit. Supports single-image editing nodes.</p>
+                      <p className="mt-1 text-xs">Requires HuggingFace login. Uses your HF inference credits.</p>
                     </div>
                   </div>
                 </div>
-                */}
-                
+
+                {/* MERGE Warning */}
+                <div className="p-4 bg-destructive/10 border border-destructive/30 rounded-lg">
+                  <h4 className="font-semibold text-destructive mb-2">⚠️ MERGE Node Limitation</h4>
+                  <p className="text-sm text-muted-foreground">
+                    The <strong>MERGE</strong> node requires <strong>Nano Banana Pro</strong> because it combines multiple images into one cohesive group photo. HuggingFace models only accept single images, so MERGE won't work in HuggingFace mode.
+                  </p>
+                </div>
+
+                {/* Available HF Models */}
                 <div>
-                  <h3 className="font-semibold mb-3 text-foreground">🔑 API Token Setup</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: Get Your API Key</p>
-                      <p>Visit <a href="https://aistudio.google.com/app/apikey" target="_blank" rel="noopener noreferrer" className="text-primary hover:underline font-medium">Google AI Studio</a> to create your free Gemini API key.</p>
+                  <h3 className="font-semibold mb-3 text-foreground">🤖 HuggingFace Models</h3>
+                  <div className="text-sm text-muted-foreground space-y-2">
+                    <div className="p-2 bg-muted/50 rounded">
+                      <p className="font-medium">FLUX.1 Kontext</p>
+                      <p className="text-xs">Image editing with context understanding</p>
                     </div>
-                    <div className="p-3 bg-secondary border border-border rounded-lg">
-                      <p className="font-medium text-secondary-foreground mb-2">Step 2: Add Your Token</p>
-                      <p>Paste your API key in the "API Token" field in the top navigation bar.</p>
+                    <div className="p-2 bg-muted/50 rounded">
+                      <p className="font-medium">Qwen Image Edit</p>
+                      <p className="text-xs">Powerful image editing and manipulation</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>Your token enables all AI features: image generation, merging, editing, and style transfers.</p>
+                    <div className="p-2 bg-muted/50 rounded">
+                      <p className="font-medium">FLUX.1 Dev</p>
+                      <p className="text-xs">Text-to-image generation (for CHARACTER nodes)</p>
                     </div>
                   </div>
                 </div>
-                
+
+                {/* How to Use */}
                 <div>
-                   <h3 className="font-semibold mb-3 text-foreground">🎨 How to Use the Editor</h3>
-                   <div className="text-sm text-muted-foreground space-y-2">
-                     <p>• <strong>Adding Nodes:</strong> Right-click on the editor canvas and choose the node type you want, then drag and drop to position it</p>
-                     <p>• <strong>Character Nodes:</strong> Upload or drag images to create character nodes</p>
-                     <p>• <strong>Merge Nodes:</strong> Connect multiple characters to create group photos</p>
-                     <p>• <strong>Style Nodes:</strong> Apply artistic styles and filters</p>
-                     <p>• <strong>Background Nodes:</strong> Change or generate new backgrounds</p>
-                     <p>• <strong>Edit Nodes:</strong> Make specific modifications with text prompts</p>
-                   </div>
-                 </div>
-                
+                  <h3 className="font-semibold mb-3 text-foreground">🎨 How to Use the Editor</h3>
+                  <div className="text-sm text-muted-foreground space-y-2">
+                    <p>• <strong>Adding Nodes:</strong> Right-click on the canvas to add nodes</p>
+                    <p>• <strong>Character Nodes:</strong> Upload or drag images as starting points</p>
+                    <p>• <strong>Merge Nodes:</strong> Connect multiple characters (Nano Banana Pro only)</p>
+                    <p>• <strong>Editing Nodes:</strong> Background, Style, Face, Age, Camera, etc.</p>
+                    <p>• <strong>Connecting:</strong> Drag from output port to input port</p>
+                  </div>
+                </div>
+
+                {/* Privacy */}
                 <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>
-                    <p>• You can revoke keys anytime in Google AI Studio</p>
+                    <p>• Gemini API keys are stored locally in your browser</p>
+                    <p>• HuggingFace tokens are stored in secure HTTP-only cookies</p>
+                    <p>• All processing happens through official APIs</p>
+                    <p>• No data is stored on our servers</p>
                   </div>
                 </div>
               </div>
@@ -2229,17 +2328,17 @@ export default function EditorPage() {
       >
         <div
           className="absolute left-0 top-0 will-change-transform"
-          style={{ 
-            transform: `translate3d(${tx}px, ${ty}px, 0) scale(${scale})`, 
+          style={{
+            transform: `translate3d(${tx}px, ${ty}px, 0) scale(${scale})`,
             transformOrigin: "0 0",
             transformStyle: "preserve-3d",
             backfaceVisibility: "hidden"
           }}
         >
-          <svg 
-            className="absolute pointer-events-none z-0" 
-            style={{ 
-              left: `${svgBounds.x}px`, 
+          <svg
+            className="absolute pointer-events-none z-0"
+            style={{
+              left: `${svgBounds.x}px`,
               top: `${svgBounds.y}px`,
               width: `${svgBounds.width}px`,
               height: `${svgBounds.height}px`
@@ -2248,10 +2347,10 @@ export default function EditorPage() {
           >
             <defs>
               <filter id="glow">
-                <feGaussianBlur stdDeviation="3" result="coloredBlur"/>
+                <feGaussianBlur stdDeviation="3" result="coloredBlur" />
                 <feMerge>
-                  <feMergeNode in="coloredBlur"/>
-                  <feMergeNode in="SourceGraphic"/>
+                  <feMergeNode in="coloredBlur" />
+                  <feMergeNode in="SourceGraphic" />
                 </feMerge>
               </filter>
             </defs>
@@ -2312,7 +2411,6 @@ export default function EditorPage() {
                       onEndConnection={handleEndSingleConnection}
                       onProcess={processNode}
                       onUpdatePosition={updateNodePosition}
-                      apiToken={apiToken}
                     />
                   );
                 case "CLOTHES":
@@ -2352,7 +2450,6 @@ export default function EditorPage() {
                       onEndConnection={handleEndSingleConnection}
                       onProcess={processNode}
                       onUpdatePosition={updateNodePosition}
-                      apiToken={apiToken}
                     />
                   );
                 case "CAMERA":
@@ -2429,26 +2526,26 @@ export default function EditorPage() {
 
         {menuOpen && (
           <div
-            className="absolute z-50 rounded-xl border border-white/10 bg-[#111]/95 backdrop-blur p-1 w-56 shadow-2xl"
+            className="absolute z-50 rounded-xl border border-border bg-popover/95 backdrop-blur p-1 w-56 shadow-2xl text-popover-foreground"
             style={{ left: menuPos.x, top: menuPos.y }}
             onMouseLeave={() => setMenuOpen(false)}
           >
-            <div className="px-3 py-2 text-xs text-white/60">Add node</div>
-            <div 
+            <div className="px-3 py-2 text-xs text-muted-foreground">Add node</div>
+            <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>
-              <button className="w-full text-left px-3 py-2 text-sm hover:bg-white/10 rounded-lg" onClick={() => addFromMenu("CLOTHES")}>CLOTHES</button>
-              <button className="w-full text-left px-3 py-2 text-sm hover:bg-white/10 rounded-lg" onClick={() => addFromMenu("STYLE")}>STYLE</button>
-              <button className="w-full text-left px-3 py-2 text-sm hover:bg-white/10 rounded-lg" onClick={() => addFromMenu("EDIT")}>EDIT</button>
-              <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>
+              <button className="w-full text-left px-3 py-2 text-sm hover:bg-accent hover:text-accent-foreground rounded-lg transition-colors" onClick={() => addFromMenu("CHARACTER")}>CHARACTER</button>
+              <button className="w-full text-left px-3 py-2 text-sm hover:bg-accent hover:text-accent-foreground rounded-lg transition-colors" onClick={() => addFromMenu("MERGE")}>MERGE</button>
+              <button className="w-full text-left px-3 py-2 text-sm hover:bg-accent hover:text-accent-foreground rounded-lg transition-colors" onClick={() => addFromMenu("BACKGROUND")}>BACKGROUND</button>
+              <button className="w-full text-left px-3 py-2 text-sm hover:bg-accent hover:text-accent-foreground rounded-lg transition-colors" onClick={() => addFromMenu("CLOTHES")}>CLOTHES</button>
+              <button className="w-full text-left px-3 py-2 text-sm hover:bg-accent hover:text-accent-foreground rounded-lg transition-colors" onClick={() => addFromMenu("STYLE")}>STYLE</button>
+              <button className="w-full text-left px-3 py-2 text-sm hover:bg-accent hover:text-accent-foreground rounded-lg transition-colors" onClick={() => addFromMenu("EDIT")}>EDIT</button>
+              <button className="w-full text-left px-3 py-2 text-sm hover:bg-accent hover:text-accent-foreground rounded-lg transition-colors" onClick={() => addFromMenu("CAMERA")}>CAMERA</button>
+              <button className="w-full text-left px-3 py-2 text-sm hover:bg-accent hover:text-accent-foreground rounded-lg transition-colors" onClick={() => addFromMenu("AGE")}>AGE</button>
+              <button className="w-full text-left px-3 py-2 text-sm hover:bg-accent hover:text-accent-foreground rounded-lg transition-colors" onClick={() => addFromMenu("FACE")}>FACE</button>
+              <button className="w-full text-left px-3 py-2 text-sm hover:bg-accent hover:text-accent-foreground rounded-lg transition-colors" onClick={() => addFromMenu("LIGHTNING")}>LIGHTNING</button>
+              <button className="w-full text-left px-3 py-2 text-sm hover:bg-accent hover:text-accent-foreground rounded-lg transition-colors" onClick={() => addFromMenu("POSES")}>POSES</button>
             </div>
           </div>
         )}

components/mode-toggle.tsx

@@ -0,0 +1,25 @@
+"use client"
+
+import * as React from "react"
+import { Moon, Sun } from "lucide-react"
+import { useTheme } from "next-themes"
+
+import { Button } from "@/components/ui/button"
+
+export function ModeToggle() {
+    const { setTheme, theme } = useTheme()
+
+    return (
+        <Button
+            variant="outline"
+            size="icon"
+            className="fixed bottom-4 right-4 z-50 rounded-full h-12 w-12 shadow-lg bg-background border-border"
+            onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
+            title="Toggle theme"
+        >
+            <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0 text-orange-500" />
+            <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100 text-blue-400" />
+            <span className="sr-only">Toggle theme</span>
+        </Button>
+    )
+}

components/theme-provider.tsx

@@ -0,0 +1,11 @@
+"use client"
+
+import * as React from "react"
+import { ThemeProvider as NextThemesProvider } from "next-themes"
+
+export function ThemeProvider({
+    children,
+    ...props
+}: React.ComponentProps<typeof NextThemesProvider>) {
+    return <NextThemesProvider {...props}>{children}</NextThemesProvider>
+}

next.config.ts

@@ -8,6 +8,16 @@ const nextConfig: NextConfig = {
   serverRuntimeConfig: {
     bodySizeLimit: '50mb',
   },
+  // Redirect /editor to main page
+  async redirects() {
+    return [
+      {
+        source: '/editor',
+        destination: '/',
+        permanent: true,
+      },
+    ];
+  },
 };
 
 export default nextConfig;

package-lock.json

@@ -16,6 +16,7 @@
         "clsx": "^2.1.1",
         "lucide-react": "^0.542.0",
         "next": "15.5.2",
+        "next-themes": "^0.4.6",
         "react": "19.1.0",
         "react-dom": "19.1.0",
         "tailwind-merge": "^2.5.3"
@@ -5032,6 +5033,16 @@
         }
       }
     },
+    "node_modules/next-themes": {
+      "version": "0.4.6",
+      "resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.4.6.tgz",
+      "integrity": "sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc"
+      }
+    },
     "node_modules/next/node_modules/postcss": {
       "version": "8.4.31",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",

package.json

@@ -17,6 +17,7 @@
     "clsx": "^2.1.1",
     "lucide-react": "^0.542.0",
     "next": "15.5.2",
+    "next-themes": "^0.4.6",
     "react": "19.1.0",
     "react-dom": "19.1.0",
     "tailwind-merge": "^2.5.3"