fixing the bugs

app/api/process/route.ts

@@ -52,72 +52,99 @@ export async function POST(req: NextRequest) {
       return NextResponse.json({ error: "Invalid or missing image data. Please ensure an input is connected." }, { status: 400 });
     }
 
-    let prompt = "";
+    // Build combined prompt from all accumulated parameters
+    const prompts: string[] = [];
+    const params = body.params || {};
     
-    // Generate appropriate prompt based on node type
-    switch (body.type) {
-      case "BACKGROUND":
-        const bgType = body.params?.backgroundType || "color";
-        if (bgType === "color") {
-          prompt = `Change the background of this image to a solid ${body.params?.backgroundColor || "white"} background. Keep the person/subject exactly as they are, only change the background.`;
-        } else if (bgType === "image") {
-          prompt = `Change the background to ${body.params?.backgroundImage || "a beautiful beach scene"}. Keep the person/subject exactly as they are with proper lighting to match the new background.`;
+    // Background modifications
+    if (params.backgroundType) {
+      const bgType = params.backgroundType;
+      if (bgType === "color") {
+        prompts.push(`Change the background to a solid ${params.backgroundColor || "white"} background.`);
+      } else if (bgType === "image") {
+        prompts.push(`Change the background to ${params.backgroundImage || "a beautiful beach scene"}.`);
+      } else if (bgType === "upload" && params.customBackgroundImage) {
+        prompts.push(`Replace the background with the uploaded custom background image, ensuring proper lighting and perspective matching.`);
+      } else if (params.customPrompt) {
+        prompts.push(params.customPrompt);
+      }
+    }
+    
+    // Clothes modifications
+    if (params.clothesImage) {
+      // If clothesImage is provided, we need to handle it differently
+      // For now, we'll create a descriptive prompt
+      if (params.selectedPreset === "Sukajan") {
+        prompts.push("Change the person's clothes to a Japanese sukajan jacket with embroidered designs.");
+      } else if (params.selectedPreset === "Blazer") {
+        prompts.push("Change the person's clothes to a professional blazer.");
+      } else if (params.clothesImage.startsWith('data:') || params.clothesImage.startsWith('http')) {
+        prompts.push("Change the person's clothes to match the provided reference image style.");
+      }
+    }
+    
+    // Style blending
+    if (params.styleImage) {
+      const strength = params.blendStrength || 50;
+      prompts.push(`Apply artistic style blending at ${strength}% strength.`);
+    }
+    
+    // Edit prompt
+    if (params.editPrompt) {
+      prompts.push(params.editPrompt);
+    }
+    
+    // Camera settings
+    if (params.focalLength || params.aperture || params.shutterSpeed || params.whiteBalance || params.angle || 
+        params.iso || params.filmStyle || params.lighting || params.bokeh || params.composition) {
+      const cameraSettings: string[] = [];
+      if (params.focalLength) {
+        if (params.focalLength === "8mm fisheye") {
+          cameraSettings.push("Apply 8mm fisheye lens effect with 180-degree circular distortion");
         } else {
-          prompt = body.params?.customPrompt || "Change the background to a professional studio background.";
+          cameraSettings.push(`Focal Length: ${params.focalLength}`);
         }
-        break;
-        
-      case "CLOTHES":
-        prompt = body.params?.clothesPrompt || 
-          "Change the person's clothes to " + (body.params?.clothesDescription || "formal business attire") + 
-          ". Keep their face, pose, and everything else exactly the same.";
-        break;
-        
-      case "BLEND":
-        prompt = `Blend this image with the style: ${body.params?.stylePrompt || "oil painting style"}. ` +
-          `Strength: ${body.params?.blendStrength || 50}%. Keep the subject recognizable while applying the style.`;
-        break;
-        
-      case "EDIT":
-        prompt = body.params?.editPrompt || "Make subtle improvements to this image.";
-        break;
-        
-      case "CAMERA":
-        const camera = body.params || {};
-        prompt = `Apply these camera settings to the image:\n` +
-          `Focal Length: ${camera.focalLength || "50mm"}\n` +
-          `Aperture: ${camera.aperture || "f/2.8"}\n` +
-          `Shutter Speed: ${camera.shutterSpeed || "1/250s"}\n` +
-          `White Balance: ${camera.whiteBalance || "5600K daylight"}\n` +
-          `Camera Angle: ${camera.angle || "eye level"}\n` +
-          `Make the image look like it was shot with these exact camera settings.`;
-        break;
-        
-      case "AGE":
-        const targetAge = body.params?.targetAge || 30;
-        prompt = `Transform the person in this image to look exactly ${targetAge} years old. ` +
-          `Adjust their facial features, skin texture, hair, and overall appearance to match that age naturally. ` +
-          `Keep their identity recognizable but age-appropriate.`;
-        break;
-        
-      case "FACE":
-        const face = body.params?.faceOptions || {};
-        const modifications = [];
-        if (face.removePimples) modifications.push("remove all pimples and blemishes");
-        if (face.addSunglasses) modifications.push("add stylish sunglasses");
-        if (face.addHat) modifications.push("add a fashionable hat");
-        if (face.changeHairstyle) modifications.push(`change hairstyle to ${face.changeHairstyle}`);
-        if (face.facialExpression) modifications.push(`change facial expression to ${face.facialExpression}`);
-        if (face.beardStyle) modifications.push(`add/change beard to ${face.beardStyle}`);
-        
-        prompt = modifications.length > 0
-          ? `Modify the person's face: ${modifications.join(", ")}. Keep everything else the same.`
-          : "Enhance the person's face subtly.";
-        break;
-        
-      default:
-        return NextResponse.json({ error: "Unknown node type" }, { status: 400 });
+      }
+      if (params.aperture) cameraSettings.push(`Aperture: ${params.aperture}`);
+      if (params.shutterSpeed) cameraSettings.push(`Shutter Speed: ${params.shutterSpeed}`);
+      if (params.whiteBalance) cameraSettings.push(`White Balance: ${params.whiteBalance}`);
+      if (params.angle) cameraSettings.push(`Camera Angle: ${params.angle}`);
+      if (params.iso) cameraSettings.push(`${params.iso}`);
+      if (params.filmStyle) cameraSettings.push(`Film style: ${params.filmStyle}`);
+      if (params.lighting) cameraSettings.push(`Lighting: ${params.lighting}`);
+      if (params.bokeh) cameraSettings.push(`Bokeh effect: ${params.bokeh}`);
+      if (params.composition) cameraSettings.push(`Composition: ${params.composition}`);
+      
+      if (cameraSettings.length > 0) {
+        prompts.push(`Apply professional photography settings: ${cameraSettings.join(", ")}`);
+      }
+    }
+    
+    // Age transformation
+    if (params.targetAge) {
+      prompts.push(`Transform the person to look exactly ${params.targetAge} years old with age-appropriate features.`);
     }
+    
+    // Face modifications
+    if (params.faceOptions) {
+      const face = params.faceOptions;
+      const modifications: string[] = [];
+      if (face.removePimples) modifications.push("remove all pimples and blemishes");
+      if (face.addSunglasses) modifications.push("add stylish sunglasses");
+      if (face.addHat) modifications.push("add a fashionable hat");
+      if (face.changeHairstyle) modifications.push(`change hairstyle to ${face.changeHairstyle}`);
+      if (face.facialExpression) modifications.push(`change facial expression to ${face.facialExpression}`);
+      if (face.beardStyle) modifications.push(`add/change beard to ${face.beardStyle}`);
+      
+      if (modifications.length > 0) {
+        prompts.push(`Face modifications: ${modifications.join(", ")}`);
+      }
+    }
+    
+    // Combine all prompts
+    let prompt = prompts.length > 0 
+      ? prompts.join("\n\n") + "\n\nApply all these modifications while maintaining the person's identity and keeping unspecified aspects unchanged."
+      : "Process this image with high quality output.";
 
     // Add the custom prompt if provided
     if (body.prompt) {

app/editor/nodes.tsx

@@ -2,6 +2,16 @@
 
 import React, { useState, useRef, useEffect } from "react";
 
+// Helper function to download image
+function downloadImage(dataUrl: string, filename: string) {
+  const link = document.createElement('a');
+  link.href = dataUrl;
+  link.download = filename;
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+}
+
 // Import types (we'll need to export these from page.tsx)
 type BackgroundNode = any;
 type ClothesNode = any;
@@ -98,9 +108,59 @@ export function BackgroundNodeView({
   onUpdatePosition,
 }: any) {
   const { localPos, onPointerDown, onPointerMove, onPointerUp } = useNodeDrag(node, onUpdatePosition);
+  const hasConfig = node.backgroundType && !node.output;
+  
+  const handleImageUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files?.length) {
+      const reader = new FileReader();
+      reader.onload = () => {
+        onUpdate(node.id, { customBackgroundImage: reader.result });
+      };
+      reader.readAsDataURL(e.target.files[0]);
+    }
+  };
+  
+  const handleImagePaste = (e: React.ClipboardEvent) => {
+    const items = e.clipboardData.items;
+    for (let i = 0; i < items.length; i++) {
+      if (items[i].type.startsWith("image/")) {
+        const file = items[i].getAsFile();
+        if (file) {
+          const reader = new FileReader();
+          reader.onload = () => {
+            onUpdate(node.id, { customBackgroundImage: reader.result });
+          };
+          reader.readAsDataURL(file);
+          return;
+        }
+      }
+    }
+    const text = e.clipboardData.getData("text");
+    if (text && (text.startsWith("http") || text.startsWith("data:image"))) {
+      onUpdate(node.id, { customBackgroundImage: text });
+    }
+  };
+  
+  const handleDrop = (e: React.DragEvent) => {
+    e.preventDefault();
+    const files = e.dataTransfer.files;
+    if (files && files.length) {
+      const reader = new FileReader();
+      reader.onload = () => {
+        onUpdate(node.id, { customBackgroundImage: reader.result });
+      };
+      reader.readAsDataURL(files[0]);
+    }
+  };
   
   return (
-    <div className="nb-node absolute text-white w-[320px]" style={{ left: localPos.x, top: localPos.y }}>
+    <div 
+      className={`nb-node absolute text-white w-[320px] ${hasConfig ? 'ring-2 ring-yellow-500/50' : ''}`} 
+      style={{ left: localPos.x, top: localPos.y }}
+      onDrop={handleDrop}
+      onDragOver={(e) => e.preventDefault()}
+      onPaste={handleImagePaste}
+    >
       <div 
         className="nb-header px-3 py-2 flex items-center justify-between rounded-t-[14px] cursor-grab active:cursor-grabbing"
         onPointerDown={onPointerDown}
@@ -122,6 +182,7 @@ export function BackgroundNodeView({
         >
           <option value="color">Solid Color</option>
           <option value="image">Preset Background</option>
+          <option value="upload">Upload Image</option>
           <option value="custom">Custom Prompt</option>
         </select>
         
@@ -149,6 +210,35 @@ export function BackgroundNodeView({
           </select>
         )}
         
+        {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 
+                  className="absolute top-2 right-2 bg-red-500/80 text-white text-xs px-2 py-1 rounded"
+                  onClick={() => onUpdate(node.id, { customBackgroundImage: null })}
+                >
+                  Remove
+                </button>
+              </div>
+            ) : (
+              <label className="block">
+                <input
+                  type="file"
+                  accept="image/*"
+                  className="hidden"
+                  onChange={handleImageUpload}
+                />
+                <div className="border-2 border-dashed border-white/20 rounded-lg p-4 text-center cursor-pointer hover:border-white/40">
+                  <p className="text-xs text-white/60">Drop, upload, or paste background image</p>
+                  <p className="text-xs text-white/40 mt-1">JPG, PNG, WEBP</p>
+                </div>
+              </label>
+            )}
+          </div>
+        )}
+        
         {node.backgroundType === "custom" && (
           <textarea
             className="w-full bg-black/40 border border-white/10 rounded px-2 py-1 text-xs"
@@ -160,15 +250,24 @@ export function BackgroundNodeView({
         )}
         
         <button 
-          className="w-full text-xs bg-indigo-500 hover:bg-indigo-400 rounded px-3 py-1"
+          className="w-full text-xs bg-indigo-500 hover:bg-indigo-400 rounded px-3 py-1 transition-all"
           onClick={() => onProcess(node.id)}
           disabled={node.isRunning}
+          title={!node.input ? "Connect an input first" : "Process all unprocessed nodes in chain"}
         >
           {node.isRunning ? "Processing..." : "Apply Background"}
         </button>
         
         {node.output && (
-          <img src={node.output} className="w-full rounded" alt="Output" />
+          <div className="space-y-2">
+            <img src={node.output} className="w-full rounded" alt="Output" />
+            <button
+              className="w-full text-xs bg-green-600 hover:bg-green-500 rounded px-3 py-1 transition-all"
+              onClick={() => downloadImage(node.output, `background-${Date.now()}.png`)}
+            >
+              📥 Download Output
+            </button>
+          </div>
         )}
         {node.error && (
           <div className="text-xs text-red-400 mt-2">{node.error}</div>
@@ -180,6 +279,7 @@ export function BackgroundNodeView({
 
 export function ClothesNodeView({ node, onDelete, onUpdate, onStartConnection, onEndConnection, onProcess, onUpdatePosition }: any) {
   const { localPos, onPointerDown, onPointerMove, onPointerUp } = useNodeDrag(node, onUpdatePosition);
+  const hasConfig = node.clothesImage && !node.output;
   
   const presetClothes = [
     { name: "Sukajan", path: "/sukajan.png" },
@@ -221,11 +321,12 @@ export function ClothesNodeView({ node, onDelete, onUpdate, onStartConnection, o
   
   return (
     <div 
-      className="nb-node absolute text-white w-[320px]" 
+      className={`nb-node absolute text-white w-[320px] ${hasConfig ? 'ring-2 ring-yellow-500/50' : ''}`}
       style={{ left: localPos.x, top: localPos.y }}
       onDrop={onDrop}
       onDragOver={(e) => e.preventDefault()}
       onPaste={onPaste}
+      title={hasConfig ? "Has unsaved configuration - will be applied when processing downstream" : ""}
     >
       <div 
         className="nb-header px-3 py-2 flex items-center justify-between rounded-t-[14px] cursor-grab active:cursor-grabbing"
@@ -241,6 +342,11 @@ export function ClothesNodeView({ node, onDelete, onUpdate, onStartConnection, o
         </div>
       </div>
       <div className="p-3 space-y-3">
+        {hasConfig && (
+          <div className="text-xs bg-yellow-500/20 border border-yellow-500/50 rounded px-2 py-1 text-yellow-300">
+            ⚡ Config pending - will apply when downstream node processes
+          </div>
+        )}
         <div className="text-xs text-white/70">Clothes Reference</div>
         
         {/* Preset clothes options */}
@@ -295,13 +401,24 @@ export function ClothesNodeView({ node, onDelete, onUpdate, onStartConnection, o
         ) : null}
         
         <button 
-          className="w-full text-xs bg-indigo-500 hover:bg-indigo-400 rounded px-3 py-1"
+          className="w-full text-xs bg-indigo-500 hover:bg-indigo-400 rounded px-3 py-1 transition-all"
           onClick={() => onProcess(node.id)}
           disabled={node.isRunning || !node.clothesImage}
+          title={!node.input ? "Connect an input first" : "Process all unprocessed nodes in chain"}
         >
           {node.isRunning ? "Processing..." : "Apply Clothes"}
         </button>
-        {node.output && <img src={node.output} className="w-full rounded" alt="Output" />}
+        {node.output && (
+          <div className="space-y-2">
+            <img src={node.output} className="w-full rounded" alt="Output" />
+            <button
+              className="w-full text-xs bg-green-600 hover:bg-green-500 rounded px-3 py-1 transition-all"
+              onClick={() => downloadImage(node.output, `clothes-${Date.now()}.png`)}
+            >
+              📥 Download Output
+            </button>
+          </div>
+        )}
         {node.error && (
           <div className="text-xs text-red-400 mt-2">{node.error}</div>
         )}
@@ -312,9 +429,10 @@ export function ClothesNodeView({ node, onDelete, onUpdate, onStartConnection, o
 
 export function AgeNodeView({ node, onDelete, onUpdate, onStartConnection, onEndConnection, onProcess, onUpdatePosition }: any) {
   const { localPos, onPointerDown, onPointerMove, onPointerUp } = useNodeDrag(node, onUpdatePosition);
+  const hasConfig = node.targetAge && node.targetAge !== 30 && !node.output;
   
   return (
-    <div className="nb-node absolute text-white w-[280px]" style={{ left: localPos.x, top: localPos.y }}>
+    <div className={`nb-node absolute text-white w-[280px] ${hasConfig ? 'ring-2 ring-yellow-500/50' : ''}`} 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}
@@ -344,13 +462,24 @@ export function AgeNodeView({ node, onDelete, onUpdate, onStartConnection, onEnd
           />
         </div>
         <button 
-          className="w-full text-xs bg-indigo-500 hover:bg-indigo-400 rounded px-3 py-1"
+          className="w-full text-xs bg-indigo-500 hover:bg-indigo-400 rounded px-3 py-1 transition-all"
           onClick={() => onProcess(node.id)}
           disabled={node.isRunning}
+          title={!node.input ? "Connect an input first" : "Process all unprocessed nodes in chain"}
         >
           {node.isRunning ? "Processing..." : "Apply Age"}
         </button>
-        {node.output && <img src={node.output} className="w-full rounded" alt="Output" />}
+        {node.output && (
+          <div className="space-y-2">
+            <img src={node.output} className="w-full rounded" alt="Output" />
+            <button
+              className="w-full text-xs bg-green-600 hover:bg-green-500 rounded px-3 py-1 transition-all"
+              onClick={() => downloadImage(node.output, `age-${Date.now()}.png`)}
+            >
+              📥 Download Output
+            </button>
+          </div>
+        )}
         {node.error && (
           <div className="text-xs text-red-400 mt-2">{node.error}</div>
         )}
@@ -361,11 +490,16 @@ export function AgeNodeView({ node, onDelete, onUpdate, onStartConnection, onEnd
 
 export function CameraNodeView({ node, onDelete, onUpdate, onStartConnection, onEndConnection, onProcess, onUpdatePosition }: any) {
   const { localPos, onPointerDown, onPointerMove, onPointerUp } = useNodeDrag(node, onUpdatePosition);
-  const focalLengths = ["None", "8mm fisheye", "12mm", "24mm", "35mm", "50mm", "85mm", "135mm", "200mm"];
-  const apertures = ["None", "f/1.2", "f/1.8", "f/2.8", "f/5.6", "f/8", "f/11", "f/16"];
-  const shutterSpeeds = ["None", "1/8000s", "1/250s", "1/30s", "5s"];
-  const whiteBalances = ["None", "3200K tungsten", "5600K daylight", "7000K shade"];
-  const angles = ["None", "eye level", "low angle", "high angle", "Dutch tilt", "bird's eye"];
+  const focalLengths = ["None", "8mm fisheye", "12mm", "24mm", "35mm", "50mm", "85mm", "135mm", "200mm", "300mm", "400mm"];
+  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/8", "f/11", "f/16", "f/22"];
+  const shutterSpeeds = ["None", "1/8000s", "1/4000s", "1/2000s", "1/1000s", "1/500s", "1/250s", "1/125s", "1/60s", "1/30s", "1/15s", "1/8s", "1/4s", "1/2s", "1s", "2s", "5s", "10s", "30s"];
+  const whiteBalances = ["None", "2800K candlelight", "3200K tungsten", "4000K fluorescent", "5600K daylight", "6500K cloudy", "7000K shade", "8000K blue sky"];
+  const angles = ["None", "eye level", "low angle", "high angle", "Dutch tilt", "bird's eye", "worm's eye", "over the shoulder", "POV"];
+  const isoValues = ["None", "ISO 50", "ISO 100", "ISO 200", "ISO 400", "ISO 800", "ISO 1600", "ISO 3200", "ISO 6400", "ISO 12800"];
+  const filmStyles = ["None", "Kodak Portra", "Fuji Velvia", "Ilford HP5", "Cinestill 800T", "Lomography", "Cross Process", "Black & White", "Sepia", "Vintage", "Film Noir"];
+  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"];
+  const bokehStyles = ["None", "Smooth Bokeh", "Swirly Bokeh", "Hexagonal Bokeh", "Cat Eye Bokeh", "Bubble Bokeh", "Creamy Bokeh"];
+  const compositions = ["None", "Rule of Thirds", "Golden Ratio", "Symmetrical", "Leading Lines", "Frame in Frame", "Fill the Frame", "Negative Space", "Patterns", "Diagonal"];
 
   return (
     <div className="nb-node absolute text-white w-[360px]" style={{ left: localPos.x, top: localPos.y }}>
@@ -382,7 +516,9 @@ export function CameraNodeView({ node, onDelete, onUpdate, onStartConnection, on
           <Port className="out" nodeId={node.id} isOutput={true} onStartConnection={onStartConnection} />
         </div>
       </div>
-      <div className="p-3 space-y-2">
+      <div className="p-3 space-y-2 max-h-[500px] overflow-y-auto">
+        {/* Basic Camera Settings */}
+        <div className="text-xs text-white/50 font-semibold mb-1">Basic Settings</div>
         <div className="grid grid-cols-2 gap-2">
           <div>
             <label className="text-xs text-white/70">Focal Length</label>
@@ -405,7 +541,7 @@ export function CameraNodeView({ node, onDelete, onUpdate, onStartConnection, on
             </select>
           </div>
           <div>
-            <label className="text-xs text-white/70">Shutter</label>
+            <label className="text-xs text-white/70">Shutter Speed</label>
             <select 
               className="w-full bg-black/40 border border-white/10 rounded px-2 py-1 text-xs"
               value={node.shutterSpeed || "None"}
@@ -414,6 +550,21 @@ export function CameraNodeView({ node, onDelete, onUpdate, onStartConnection, on
               {shutterSpeeds.map(s => <option key={s} value={s}>{s}</option>)}
             </select>
           </div>
+          <div>
+            <label className="text-xs text-white/70">ISO</label>
+            <select 
+              className="w-full bg-black/40 border border-white/10 rounded px-2 py-1 text-xs"
+              value={node.iso || "None"}
+              onChange={(e) => onUpdate(node.id, { iso: e.target.value })}
+            >
+              {isoValues.map(i => <option key={i} value={i}>{i}</option>)}
+            </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 
@@ -424,25 +575,81 @@ export function CameraNodeView({ node, onDelete, onUpdate, onStartConnection, on
               {whiteBalances.map(w => <option key={w} value={w}>{w}</option>)}
             </select>
           </div>
+          <div>
+            <label className="text-xs text-white/70">Film Style</label>
+            <select 
+              className="w-full bg-black/40 border border-white/10 rounded px-2 py-1 text-xs"
+              value={node.filmStyle || "None"}
+              onChange={(e) => onUpdate(node.id, { filmStyle: e.target.value })}
+            >
+              {filmStyles.map(f => <option key={f} value={f}>{f}</option>)}
+            </select>
+          </div>
+          <div>
+            <label className="text-xs text-white/70">Lighting</label>
+            <select 
+              className="w-full bg-black/40 border border-white/10 rounded px-2 py-1 text-xs"
+              value={node.lighting || "None"}
+              onChange={(e) => onUpdate(node.id, { lighting: e.target.value })}
+            >
+              {lightingTypes.map(l => <option key={l} value={l}>{l}</option>)}
+            </select>
+          </div>
+          <div>
+            <label className="text-xs text-white/70">Bokeh Style</label>
+            <select 
+              className="w-full bg-black/40 border border-white/10 rounded px-2 py-1 text-xs"
+              value={node.bokeh || "None"}
+              onChange={(e) => onUpdate(node.id, { bokeh: e.target.value })}
+            >
+              {bokehStyles.map(b => <option key={b} value={b}>{b}</option>)}
+            </select>
+          </div>
         </div>
-        <div>
-          <label className="text-xs text-white/70">Camera Angle</label>
+        
+        {/* Composition Settings */}
+        <div className="text-xs text-white/50 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 
               className="w-full bg-black/40 border border-white/10 rounded px-2 py-1 text-xs"
               value={node.angle || "None"}
               onChange={(e) => onUpdate(node.id, { angle: e.target.value })}
-          >
-            {angles.map(a => <option key={a} value={a}>{a}</option>)}
-          </select>
+            >
+              {angles.map(a => <option key={a} value={a}>{a}</option>)}
+            </select>
+          </div>
+          <div>
+            <label className="text-xs text-white/70">Composition</label>
+            <select 
+              className="w-full bg-black/40 border border-white/10 rounded px-2 py-1 text-xs"
+              value={node.composition || "None"}
+              onChange={(e) => onUpdate(node.id, { composition: e.target.value })}
+            >
+              {compositions.map(c => <option key={c} value={c}>{c}</option>)}
+            </select>
+          </div>
         </div>
         <button 
-          className="w-full text-xs bg-indigo-500 hover:bg-indigo-400 rounded px-3 py-1"
+          className="w-full text-xs bg-indigo-500 hover:bg-indigo-400 rounded px-3 py-1 transition-all"
           onClick={() => onProcess(node.id)}
           disabled={node.isRunning}
+          title={!node.input ? "Connect an input first" : "Process all unprocessed nodes in chain"}
         >
           {node.isRunning ? "Processing..." : "Apply Camera Settings"}
         </button>
-        {node.output && <img src={node.output} className="w-full rounded mt-2" alt="Output" />}
+        {node.output && (
+          <div className="space-y-2 mt-2">
+            <img src={node.output} className="w-full rounded" alt="Output" />
+            <button
+              className="w-full text-xs bg-green-600 hover:bg-green-500 rounded px-3 py-1 transition-all"
+              onClick={() => downloadImage(node.output, `camera-${Date.now()}.png`)}
+            >
+              📥 Download Output
+            </button>
+          </div>
+        )}
         {node.error && (
           <div className="text-xs text-red-400 mt-2">{node.error}</div>
         )}
@@ -546,13 +753,24 @@ export function FaceNodeView({ node, onDelete, onUpdate, onStartConnection, onEn
         </div>
         
         <button 
-          className="w-full text-xs bg-indigo-500 hover:bg-indigo-400 rounded px-3 py-1"
+          className="w-full text-xs bg-indigo-500 hover:bg-indigo-400 rounded px-3 py-1 transition-all"
           onClick={() => onProcess(node.id)}
           disabled={node.isRunning}
+          title={!node.input ? "Connect an input first" : "Process all unprocessed nodes in chain"}
         >
           {node.isRunning ? "Processing..." : "Apply Face Changes"}
         </button>
-        {node.output && <img src={node.output} className="w-full rounded mt-2" alt="Output" />}
+        {node.output && (
+          <div className="space-y-2 mt-2">
+            <img src={node.output} className="w-full rounded" alt="Output" />
+            <button
+              className="w-full text-xs bg-green-600 hover:bg-green-500 rounded px-3 py-1 transition-all"
+              onClick={() => downloadImage(node.output, `face-${Date.now()}.png`)}
+            >
+              📥 Download Output
+            </button>
+          </div>
+        )}
         {node.error && (
           <div className="text-xs text-red-400 mt-2">{node.error}</div>
         )}
@@ -660,13 +878,24 @@ export function BlendNodeView({ node, onDelete, onUpdate, onStartConnection, onE
           />
         </div>
         <button 
-          className="w-full text-xs bg-indigo-500 hover:bg-indigo-400 rounded px-3 py-1"
+          className="w-full text-xs bg-indigo-500 hover:bg-indigo-400 rounded px-3 py-1 transition-all"
           onClick={() => onProcess(node.id)}
           disabled={node.isRunning || !node.styleImage}
+          title={!node.input ? "Connect an input first" : !node.styleImage ? "Add a style image first" : "Process all unprocessed nodes in chain"}
         >
           {node.isRunning ? "Processing..." : "Apply Style"}
         </button>
-        {node.output && <img src={node.output} className="w-full rounded" alt="Output" />}
+        {node.output && (
+          <div className="space-y-2">
+            <img src={node.output} className="w-full rounded" alt="Output" />
+            <button
+              className="w-full text-xs bg-green-600 hover:bg-green-500 rounded px-3 py-1 transition-all"
+              onClick={() => downloadImage(node.output, `blend-${Date.now()}.png`)}
+            >
+              📥 Download Output
+            </button>
+          </div>
+        )}
         {node.error && (
           <div className="text-xs text-red-400 mt-2">{node.error}</div>
         )}
@@ -702,13 +931,24 @@ export function EditNodeView({ node, onDelete, onUpdate, onStartConnection, onEn
           rows={3}
         />
         <button 
-          className="w-full text-xs bg-indigo-500 hover:bg-indigo-400 rounded px-3 py-1"
+          className="w-full text-xs bg-indigo-500 hover:bg-indigo-400 rounded px-3 py-1 transition-all"
           onClick={() => onProcess(node.id)}
           disabled={node.isRunning}
+          title={!node.input ? "Connect an input first" : "Process all unprocessed nodes in chain"}
         >
           {node.isRunning ? "Processing..." : "Apply Edit"}
         </button>
-        {node.output && <img src={node.output} className="w-full rounded" alt="Output" />}
+        {node.output && (
+          <div className="space-y-2">
+            <img src={node.output} className="w-full rounded" alt="Output" />
+            <button
+              className="w-full text-xs bg-green-600 hover:bg-green-500 rounded px-3 py-1 transition-all"
+              onClick={() => downloadImage(node.output, `edit-${Date.now()}.png`)}
+            >
+              📥 Download Output
+            </button>
+          </div>
+        )}
       </div>
     </div>
   );

app/editor/page.tsx

@@ -65,9 +65,11 @@ type BackgroundNode = NodeBase & {
   type: "BACKGROUND";
   input?: string; // node id
   output?: string;
-  backgroundType: "color" | "image" | "custom";
+  backgroundType: "color" | "image" | "upload" | "custom";
   backgroundColor?: string;
   backgroundImage?: string;
+  customBackgroundImage?: string;
+  customPrompt?: string;
   isRunning?: boolean;
   error?: string | null;
 };
@@ -77,6 +79,7 @@ type ClothesNode = NodeBase & {
   input?: string;
   output?: string;
   clothesImage?: string;
+  selectedPreset?: string;
   clothesPrompt?: string;
   isRunning?: boolean;
   error?: string | null;
@@ -86,6 +89,7 @@ type BlendNode = NodeBase & {
   type: "BLEND";
   input?: string;
   output?: string;
+  styleImage?: string;
   stylePrompt?: string;
   blendStrength?: number;
   isRunning?: boolean;
@@ -110,6 +114,11 @@ type CameraNode = NodeBase & {
   shutterSpeed?: string;
   whiteBalance?: string;
   angle?: string;
+  iso?: string;
+  filmStyle?: string;
+  lighting?: string;
+  bokeh?: string;
+  composition?: string;
   isRunning?: boolean;
   error?: string | null;
 };
@@ -399,6 +408,7 @@ function MergeNodeView({
   onDisconnect,
   onRun,
   onEndConnection,
+  onStartConnection,
   onUpdatePosition,
   onDelete,
   onClearConnections,
@@ -409,6 +419,7 @@ function MergeNodeView({
   onDisconnect: (mergeId: string, characterId: string) => void;
   onRun: (mergeId: string) => void;
   onEndConnection: (mergeId: string) => void;
+  onStartConnection: (nodeId: string) => void;
   onUpdatePosition: (id: string, x: number, y: number) => void;
   onDelete: (id: string) => void;
   onClearConnections: (mergeId: string) => void;
@@ -435,19 +446,27 @@ function MergeNodeView({
           isOutput={false}
           onEndConnection={onEndConnection}
         />
-        <div className="font-semibold tracking-wide text-sm flex-1">MERGE</div>
-        <button
-          className="text-2xl leading-none font-bold text-red-400 hover:text-red-300 opacity-50 hover:opacity-100 transition-all hover:scale-110 px-1"
-          onClick={(e) => {
-            e.stopPropagation();
-            if (confirm('Delete MERGE node?')) {
-              onDelete(node.id);
-            }
-          }}
-          title="Delete node"
-        >
-          ×
-        </button>
+        <div className="font-semibold tracking-wide text-sm flex-1 text-center">MERGE</div>
+        <div className="flex items-center gap-2">
+          <button
+            className="text-2xl leading-none font-bold text-red-400 hover:text-red-300 opacity-50 hover:opacity-100 transition-all hover:scale-110 px-1"
+            onClick={(e) => {
+              e.stopPropagation();
+              if (confirm('Delete MERGE node?')) {
+                onDelete(node.id);
+              }
+            }}
+            title="Delete node"
+          >
+            ×
+          </button>
+          <Port 
+            className="out" 
+            nodeId={node.id}
+            isOutput={true}
+            onStartConnection={onStartConnection}
+          />
+        </div>
       </div>
       <div className="p-3 space-y-3">
         <div className="text-xs text-white/70">Inputs</div>
@@ -502,6 +521,21 @@ function MergeNodeView({
               <span className="text-white/40 text-xs">Run merge to see result</span>
             )}
           </div>
+          {node.output && (
+            <button
+              className="w-full text-xs bg-green-600 hover:bg-green-500 rounded px-3 py-1 mt-2 transition-all"
+              onClick={() => {
+                const link = document.createElement('a');
+                link.href = node.output as string;
+                link.download = `merge-${Date.now()}.png`;
+                document.body.appendChild(link);
+                link.click();
+                document.body.removeChild(link);
+              }}
+            >
+              📥 Download Merged Image
+            </button>
+          )}
           {node.error && (
             <div className="mt-2">
               <div className="text-xs text-red-400">{node.error}</div>
@@ -630,15 +664,17 @@ export default function EditorPage() {
   // Handle single input connections for new nodes
   const handleEndSingleConnection = (nodeId: string) => {
     if (draggingFrom) {
-      // Find the source node to get its output
+      // Find the source node
       const sourceNode = nodes.find(n => n.id === draggingFrom);
-      if (sourceNode && (sourceNode as any).output) {
-        // Connect the output to this node's input
-        setNodes(prev => prev.map(n => 
-          n.id === nodeId ? { ...n, input: draggingFrom } : n
-        ));
-      } else if (sourceNode?.type === "CHARACTER") {
-        // Direct connection from CHARACTER node
+      if (sourceNode) {
+        // Allow connections from ANY node that has an output port
+        // This includes:
+        // - CHARACTER nodes (always have an image)
+        // - 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 => 
           n.id === nodeId ? { ...n, input: draggingFrom } : n
         ));
@@ -648,6 +684,112 @@ export default function EditorPage() {
     }
   };
 
+  // Helper to count pending configurations in chain
+  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);
+        if (Object.keys(config).length > 0) {
+          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): any => {
+    const config: any = {};
+    
+    switch (node.type) {
+      case "BACKGROUND":
+        if ((node as BackgroundNode).backgroundType) {
+          config.backgroundType = (node as BackgroundNode).backgroundType;
+          config.backgroundColor = (node as BackgroundNode).backgroundColor;
+          config.backgroundImage = (node as BackgroundNode).backgroundImage;
+          config.customBackgroundImage = (node as BackgroundNode).customBackgroundImage;
+          config.customPrompt = (node as BackgroundNode).customPrompt;
+        }
+        break;
+      case "CLOTHES":
+        if ((node as ClothesNode).clothesImage) {
+          config.clothesImage = (node as ClothesNode).clothesImage;
+          config.selectedPreset = (node as ClothesNode).selectedPreset;
+        }
+        break;
+      case "BLEND":
+        if ((node as BlendNode).styleImage) {
+          config.styleImage = (node as BlendNode).styleImage;
+          config.blendStrength = (node as BlendNode).blendStrength;
+        }
+        break;
+      case "EDIT":
+        if ((node as EditNode).editPrompt) {
+          config.editPrompt = (node as EditNode).editPrompt;
+        }
+        break;
+      case "CAMERA":
+        const cam = node as CameraNode;
+        if (cam.focalLength && cam.focalLength !== "None") config.focalLength = cam.focalLength;
+        if (cam.aperture && cam.aperture !== "None") config.aperture = cam.aperture;
+        if (cam.shutterSpeed && cam.shutterSpeed !== "None") config.shutterSpeed = cam.shutterSpeed;
+        if (cam.whiteBalance && cam.whiteBalance !== "None") config.whiteBalance = cam.whiteBalance;
+        if (cam.angle && cam.angle !== "None") config.angle = cam.angle;
+        if (cam.iso && cam.iso !== "None") config.iso = cam.iso;
+        if (cam.filmStyle && cam.filmStyle !== "None") config.filmStyle = cam.filmStyle;
+        if (cam.lighting && cam.lighting !== "None") config.lighting = cam.lighting;
+        if (cam.bokeh && cam.bokeh !== "None") config.bokeh = cam.bokeh;
+        if (cam.composition && cam.composition !== "None") config.composition = cam.composition;
+        break;
+      case "AGE":
+        if ((node as AgeNode).targetAge) {
+          config.targetAge = (node as AgeNode).targetAge;
+        }
+        break;
+      case "FACE":
+        const face = node as FaceNode;
+        if (face.faceOptions) {
+          const opts: any = {};
+          if (face.faceOptions.removePimples) opts.removePimples = true;
+          if (face.faceOptions.addSunglasses) opts.addSunglasses = true;
+          if (face.faceOptions.addHat) opts.addHat = true;
+          if (face.faceOptions.changeHairstyle && face.faceOptions.changeHairstyle !== "None") {
+            opts.changeHairstyle = face.faceOptions.changeHairstyle;
+          }
+          if (face.faceOptions.facialExpression && face.faceOptions.facialExpression !== "None") {
+            opts.facialExpression = face.faceOptions.facialExpression;
+          }
+          if (face.faceOptions.beardStyle && face.faceOptions.beardStyle !== "None") {
+            opts.beardStyle = face.faceOptions.beardStyle;
+          }
+          if (Object.keys(opts).length > 0) {
+            config.faceOptions = opts;
+          }
+        }
+        break;
+    }
+    
+    return config;
+  };
+
   // Process node with API
   const processNode = async (nodeId: string) => {
     const node = nodes.find(n => n.id === nodeId);
@@ -656,24 +798,156 @@ export default function EditorPage() {
       return;
     }
 
-    // Get input image
+    // Get input image and collect all configurations from chain
     let inputImage: string | null = null;
+    let accumulatedParams: any = {};
+    const processedNodes: string[] = []; // Track which nodes' configs we're applying
     const inputId = (node as any).input;
     
     if (inputId) {
-      const inputNode = nodes.find(n => n.id === inputId);
-      if (inputNode) {
-        if (inputNode.type === "CHARACTER") {
-          inputImage = (inputNode as CharacterNode).image;
-        } else if ((inputNode as any).output) {
-          inputImage = (inputNode as any).output;
+      // 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;
+        }
+        
+        // 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;
+          if (!merge.output && merge.inputs.length >= 2) {
+            // Mark this merge for processing
+            unprocessedMerges.push(merge);
+            // For now, return null - we'll process the merge first
+            return null;
+          } else if (merge.inputs.length > 0) {
+            // Try to get image from first input if merge can't be executed
+            const firstInput = merge.inputs[0];
+            const inputImage = findSourceImage(firstInput, visited);
+            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 = 
+          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) {
+            configs = { ...configs, ...nodeConfig };
+            // Track unprocessed intermediate nodes
+            if (currentNodeId !== nodeId && !(currentNode as any).output) {
+              processedNodes.push(currentNodeId);
+            }
+          }
+        }
+        
+        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) {
+        console.log(`Found ${unprocessedMerges.length} unprocessed MERGE nodes in chain. Processing them first...`);
+        
+        // Process each merge node
+        for (const merge of unprocessedMerges) {
+          // Set loading state for the merge
+          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 => 
+              n.id === merge.id ? { ...n, output: mergeOutput, 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 => 
+              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 => 
+              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 
-        ? "Connected node has no output image. Process the previous node first."
+        ? "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 => 
         n.id === nodeId ? { ...n, error: errorMsg, isRunning: false } : n
@@ -681,54 +955,37 @@ export default function EditorPage() {
       return;
     }
 
-    console.log("Processing node:", node.type, "with image:", inputImage.substring(0, 50) + "...");
-
-    // Set loading state
-    setNodes(prev => prev.map(n => 
-      n.id === nodeId ? { ...n, isRunning: true, error: null } : n
-    ));
+    // 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 ? 
+      (processedNodes.length + 1) : 1;
+    
+    // Show info about batch processing
+    if (unprocessedNodeCount > 1) {
+      console.log(`🚀 Combining ${unprocessedNodeCount} node transformations into ONE API call`);
+      console.log("Combined parameters:", params);
+    } else {
+      console.log("Processing single node:", node.type);
+    }
 
-    try {
-      const params: any = {};
-      
-      // Build params based on node type
-      switch (node.type) {
-        case "BACKGROUND":
-          params.backgroundType = (node as BackgroundNode).backgroundType;
-          params.backgroundColor = (node as BackgroundNode).backgroundColor;
-          params.backgroundImage = (node as BackgroundNode).backgroundImage;
-          params.customPrompt = (node as BackgroundNode).customPrompt;
-          break;
-        case "CLOTHES":
-          params.clothesPrompt = (node as ClothesNode).clothesPrompt;
-          break;
-        case "BLEND":
-          params.stylePrompt = (node as BlendNode).stylePrompt;
-          params.blendStrength = (node as BlendNode).blendStrength;
-          break;
-        case "EDIT":
-          params.editPrompt = (node as EditNode).editPrompt;
-          break;
-        case "CAMERA":
-          params.focalLength = (node as CameraNode).focalLength;
-          params.aperture = (node as CameraNode).aperture;
-          params.shutterSpeed = (node as CameraNode).shutterSpeed;
-          params.whiteBalance = (node as CameraNode).whiteBalance;
-          params.angle = (node as CameraNode).angle;
-          break;
-        case "AGE":
-          params.targetAge = (node as AgeNode).targetAge;
-          break;
-        case "FACE":
-          params.faceOptions = (node as FaceNode).faceOptions;
-          break;
+    // Set loading state for all nodes being processed
+    setNodes(prev => prev.map(n => {
+      if (n.id === nodeId || processedNodes.includes(n.id)) {
+        return { ...n, isRunning: true, error: null };
       }
+      return n;
+    }));
 
+    try {
+      // 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: node.type,
+          type: "COMBINED", // Indicate this is a combined processing
           image: inputImage,
           params
         }),
@@ -737,14 +994,33 @@ export default function EditorPage() {
       const data = await res.json();
       if (!res.ok) throw new Error(data.error || "Processing failed");
 
-      setNodes(prev => prev.map(n => 
-        n.id === nodeId ? { ...n, output: data.image, isRunning: false, error: null } : n
-      ));
+      // Only update the current node with the output
+      // Don't show output in intermediate nodes - they were just used for configuration
+      setNodes(prev => prev.map(n => {
+        if (n.id === nodeId) {
+          // Only the current node gets the final output displayed
+          return { ...n, output: data.image, isRunning: false, error: null };
+        } else if (processedNodes.includes(n.id)) {
+          // Mark intermediate nodes as no longer running but don't give them output
+          // This way they remain unprocessed visually but their configs were used
+          return { ...n, isRunning: false, error: null };
+        }
+        return n;
+      }));
+      
+      if (unprocessedNodeCount > 1) {
+        console.log(`✅ Successfully applied ${unprocessedNodeCount} transformations in ONE API call!`);
+        console.log(`Saved ${unprocessedNodeCount - 1} API calls by combining transformations`);
+      }
     } catch (e: any) {
       console.error("Process error:", e);
-      setNodes(prev => prev.map(n => 
-        n.id === nodeId ? { ...n, isRunning: false, error: e?.message || "Error" } : n
-      ));
+      // Clear loading state for all nodes
+      setNodes(prev => prev.map(n => {
+        if (n.id === nodeId || processedNodes.includes(n.id)) {
+          return { ...n, isRunning: false, error: e?.message || "Error" };
+        }
+        return n;
+      }));
     }
   };
 
@@ -795,6 +1071,51 @@ export default function EditorPage() {
     );
   };
 
+  const executeMerge = async (merge: MergeNode): Promise<string | null> => {
+    // Get images from merge inputs
+    const mergeImages: string[] = [];
+    const characterData: { 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 || "";
+        } else if ((inputNode as any).output) {
+          image = (inputNode as any).output;
+        }
+        
+        if (image) {
+          mergeImages.push(image);
+          characterData.push({ image, label: label || `Input ${mergeImages.length}` });
+        }
+      }
+    }
+    
+    if (mergeImages.length < 2) {
+      throw new Error("Not enough valid inputs for merge");
+    }
+    
+    const prompt = generateMergePrompt(characterData);
+    
+    const res = await fetch("/api/merge", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ images: mergeImages, prompt }),
+    });
+    
+    const data = await res.json();
+    if (!res.ok) {
+      throw new Error(data.error || "Merge failed");
+    }
+    
+    return (data.images?.[0] as string) || null;
+  };
+  
   const runMerge = async (mergeId: string) => {
     setNodes((prev) => prev.map((n) => (n.id === mergeId && n.type === "MERGE" ? { ...n, isRunning: true, error: null } : n)));
     try {
@@ -850,7 +1171,7 @@ export default function EditorPage() {
         MERGE: 380,
         BACKGROUND: 320,
         CLOTHES: 320,
-        BLEND: 300,
+        BLEND: 320,
         EDIT: 320,
         CAMERA: 360,
         AGE: 280,
@@ -1087,6 +1408,7 @@ export default function EditorPage() {
                       onDisconnect={disconnectFromMerge}
                       onRun={runMerge}
                       onEndConnection={handleEndConnection}
+                      onStartConnection={handleStartConnection}
                       onUpdatePosition={updateNodePosition}
                       onDelete={deleteNode}
                       onClearConnections={clearMergeConnections}