good night

app/api/process/route.ts

@@ -104,12 +104,30 @@ export async function POST(req: NextRequest) {
       if (clothesRef) referenceParts.push({ inlineData: clothesRef });
     }
     
-    // Style blending
-    if (params.styleImage) {
-      const strength = params.blendStrength || 50;
-      prompts.push(`Apply artistic style blending using the provided style reference image (attached below) at ${strength}% strength.`);
-      const styleRef = await toInlineDataFromAny(params.styleImage);
-      if (styleRef) referenceParts.push({ inlineData: styleRef });
+    // Style application
+    if (params.stylePreset) {
+      const strength = params.styleStrength || 50;
+      const styleMap: { [key: string]: string } = {
+        "90s-anime": "Convert the image to 90's anime art style with classic anime features: large expressive eyes, detailed hair, soft shading, nostalgic colors reminiscent of Studio Ghibli and classic anime productions",
+        "mha": "Transform the image into My Hero Academia anime style with modern crisp lines, vibrant colors, dynamic character design, and heroic aesthetics typical of the series",
+        "dbz": "Apply Dragon Ball Z anime style with sharp angular features, spiky hair, intense expressions, bold outlines, high contrast shading, and dramatic action-oriented aesthetics",
+        "ukiyo-e": "Render in traditional Japanese Ukiyo-e woodblock print style with flat colors, bold outlines, stylized waves and clouds, traditional Japanese artistic elements",
+        "cyberpunk": "Transform into cyberpunk aesthetic with neon colors (cyan, magenta, yellow), dark backgrounds, futuristic elements, holographic effects, tech-noir atmosphere",
+        "steampunk": "Apply steampunk style with Victorian-era brass and copper tones, mechanical gears, steam effects, vintage industrial aesthetic, sepia undertones",
+        "cubism": "Render in Cubist art style with geometric fragmentation, multiple perspectives shown simultaneously, abstract angular forms, Picasso-inspired decomposition",
+        "van-gogh": "Apply Post-Impressionist Van Gogh style with thick swirling brushstrokes, vibrant yellows and blues, expressive texture, starry night-like patterns",
+        "simpsons": "Convert to The Simpsons cartoon style with yellow skin tones, simple rounded features, bulging eyes, overbite, Matt Groening's distinctive character design",
+        "family-guy": "Transform into Family Guy animation style with rounded character design, simplified features, Seth MacFarlane's distinctive art style, bold outlines",
+        "arcane": "Apply Arcane (League of Legends) style with painterly brush-stroke textures, neon rim lighting, hand-painted feel, stylized realism, vibrant color grading",
+        "wildwest": "Render in Wild West style with dusty desert tones, sunset orange lighting, vintage film grain, cowboy aesthetic, sepia and brown color palette",
+        "stranger-things": "Apply Stranger Things 80s aesthetic with Kodak film push-process look, neon magenta backlight, grainy vignette, retro sci-fi horror atmosphere",
+        "breaking-bad": "Transform with Breaking Bad cinematography style featuring dusty New Mexico orange and teal color grading, 35mm film grain, desert atmosphere, dramatic lighting"
+      };
+      
+      const styleDescription = styleMap[params.stylePreset];
+      if (styleDescription) {
+        prompts.push(`${styleDescription}. Apply this style transformation at ${strength}% intensity while preserving the core subject matter.`);
+      }
     }
     
     // Edit prompt

app/editor/nodes.tsx

@@ -926,45 +926,30 @@ export function FaceNodeView({ node, onDelete, onUpdate, onStartConnection, onEn
   );
 }
 
-export function BlendNodeView({ node, onDelete, onUpdate, onStartConnection, onEndConnection, onProcess, onUpdatePosition }: any) {
+export function StyleNodeView({ node, onDelete, onUpdate, onStartConnection, onEndConnection, onProcess, onUpdatePosition }: any) {
   const { localPos, onPointerDown, onPointerMove, onPointerUp } = useNodeDrag(node, onUpdatePosition);
   
-  const onDrop = async (e: React.DragEvent) => {
-    e.preventDefault();
-    const files = e.dataTransfer.files;
-    if (files && files.length) {
-      const reader = new FileReader();
-      reader.onload = () => onUpdate(node.id, { styleImage: reader.result });
-      reader.readAsDataURL(files[0]);
-    }
-  };
-
-  const onPaste = async (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, { styleImage: reader.result });
-          reader.readAsDataURL(file);
-          return;
-        }
-      }
-    }
-    const text = e.clipboardData.getData("text");
-    if (text && (text.startsWith("http") || text.startsWith("data:image"))) {
-      onUpdate(node.id, { styleImage: text });
-    }
-  };
+  const styleOptions = [
+    { value: "90s-anime", label: "90's Anime Style" },
+    { value: "mha", label: "My Hero Academia Style" },
+    { value: "dbz", label: "Dragon Ball Z Style" },
+    { value: "ukiyo-e", label: "Ukiyo-e Style" },
+    { value: "cyberpunk", label: "Cyberpunk Style" },
+    { value: "steampunk", label: "Steampunk Style" },
+    { value: "cubism", label: "Cubism Style" },
+    { value: "van-gogh", label: "Post-Impressionist (Van Gogh) Style" },
+    { value: "simpsons", label: "Simpsons Style" },
+    { value: "family-guy", label: "Family Guy Style" },
+    { value: "arcane", label: "Arcane – Painterly + Neon Rim Light" },
+    { value: "wildwest", label: "Wild West Style" },
+    { value: "stranger-things", label: "Stranger Things – 80s Kodak Style" },
+    { value: "breaking-bad", label: "Breaking Bad – Dusty Orange & Teal" },
+  ];
   
   return (
     <div 
       className="nb-node absolute text-white w-[320px]" 
       style={{ left: localPos.x, top: localPos.y }}
-      onDrop={onDrop}
-      onDragOver={(e) => e.preventDefault()}
-      onPaste={onPaste}
     >
       <div 
         className="nb-header px-3 py-2 flex items-center justify-between rounded-t-[14px] cursor-grab active:cursor-grabbing"
@@ -973,7 +958,7 @@ export function BlendNodeView({ node, onDelete, onUpdate, onStartConnection, onE
         onPointerUp={onPointerUp}
       >
         <Port className="in" nodeId={node.id} isOutput={false} onEndConnection={onEndConnection} />
-        <div className="font-semibold text-sm flex-1 text-center">BLEND</div>
+        <div className="font-semibold text-sm flex-1 text-center">STYLE</div>
         <div className="flex items-center gap-2">
           <Button
             variant="ghost"
@@ -1008,55 +993,37 @@ export function BlendNodeView({ node, onDelete, onUpdate, onStartConnection, onE
             </Button>
           </div>
         )}
-        <div className="text-xs text-white/70">Style Reference Image</div>
-        <div className="text-xs text-white/50">Upload an artistic style image to blend with your input</div>
-        {node.styleImage ? (
-          <div className="relative">
-            <img src={node.styleImage} className="w-full rounded" alt="Style" />
-            <button 
-              className="absolute top-2 right-2 bg-red-500/80 text-white text-xs px-2 py-1 rounded"
-              onClick={() => onUpdate(node.id, { styleImage: null })}
-            >
-              Remove
-            </button>
-          </div>
-        ) : (
-          <label className="block">
-            <input
-              type="file"
-              accept="image/*"
-              className="hidden"
-              onChange={(e) => {
-                if (e.target.files?.length) {
-                  const reader = new FileReader();
-                  reader.onload = () => onUpdate(node.id, { styleImage: reader.result });
-                  reader.readAsDataURL(e.target.files[0]);
-                }
-              }}
-            />
-            <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 style image</p>
-              <p className="text-xs text-white/40 mt-1">Art style will be applied to input</p>
-            </div>
-          </label>
-        )}
+        <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>
+        <Select
+          className="w-full bg-black border-white/20 text-white focus:border-white/40 [&>option]:bg-black [&>option]:text-white"
+          value={node.stylePreset || ""}
+          onChange={(e) => onUpdate(node.id, { stylePreset: (e.target as HTMLSelectElement).value })}
+        >
+          <option value="" className="bg-black">Select a style...</option>
+          {styleOptions.map(opt => (
+            <option key={opt.value} value={opt.value} className="bg-black">
+              {opt.label}
+            </option>
+          ))}
+        </Select>
         <div>
           <Slider
-            label="Blend Strength"
-            valueLabel={`${node.blendStrength || 50}%`}
+            label="Style Strength"
+            valueLabel={`${node.styleStrength || 50}%`}
             min={0}
             max={100}
-            value={node.blendStrength || 50}
-            onChange={(e) => onUpdate(node.id, { blendStrength: parseInt((e.target as HTMLInputElement).value) })}
+            value={node.styleStrength || 50}
+            onChange={(e) => onUpdate(node.id, { styleStrength: parseInt((e.target as HTMLInputElement).value) })}
           />
         </div>
         <Button 
           className="w-full"
           onClick={() => onProcess(node.id)}
-          disabled={node.isRunning || !node.styleImage}
-          title={!node.input ? "Connect an input first" : !node.styleImage ? "Add a style image first" : "Blend the style with your input image"}
+          disabled={node.isRunning || !node.stylePreset}
+          title={!node.input ? "Connect an input first" : !node.stylePreset ? "Select a style first" : "Apply the style to your input image"}
         >
-          {node.isRunning ? "Blending..." : "Blend Style Transfer"}
+          {node.isRunning ? "Applying Style..." : "Apply Style Transfer"}
         </Button>
         {node.output && (
           <div className="space-y-2">
@@ -1064,7 +1031,7 @@ export function BlendNodeView({ node, onDelete, onUpdate, onStartConnection, onE
             <Button
               className="w-full"
               variant="secondary"
-              onClick={() => downloadImage(node.output, `blend-${Date.now()}.png`)}
+              onClick={() => downloadImage(node.output, `style-${Date.now()}.png`)}
             >
               📥 Download Output
             </Button>

app/editor/page.tsx

@@ -4,7 +4,7 @@ import React, { useEffect, useMemo, useRef, useState } from "react";
 import {
   BackgroundNodeView,
   ClothesNodeView,
-  BlendNodeView,
+  StyleNodeView,
   EditNodeView,
   CameraNodeView,
   AgeNodeView,
@@ -56,7 +56,7 @@ The result should look like all subjects were photographed together in the same
 }
 
 // Types
-type NodeType = "CHARACTER" | "MERGE" | "BACKGROUND" | "CLOTHES" | "BLEND" | "EDIT" | "CAMERA" | "AGE" | "FACE";
+type NodeType = "CHARACTER" | "MERGE" | "BACKGROUND" | "CLOTHES" | "STYLE" | "EDIT" | "CAMERA" | "AGE" | "FACE";
 
 type NodeBase = {
   id: string;
@@ -103,13 +103,12 @@ type ClothesNode = NodeBase & {
   error?: string | null;
 };
 
-type BlendNode = NodeBase & {
-  type: "BLEND";
+type StyleNode = NodeBase & {
+  type: "STYLE";
   input?: string;
   output?: string;
-  styleImage?: string;
-  stylePrompt?: string;
-  blendStrength?: number;
+  stylePreset?: string;
+  styleStrength?: number;
   isRunning?: boolean;
   error?: string | null;
 };
@@ -167,7 +166,7 @@ type FaceNode = NodeBase & {
   error?: string | null;
 };
 
-type AnyNode = CharacterNode | MergeNode | BackgroundNode | ClothesNode | BlendNode | EditNode | CameraNode | AgeNode | FaceNode;
+type AnyNode = CharacterNode | MergeNode | BackgroundNode | ClothesNode | StyleNode | EditNode | CameraNode | AgeNode | FaceNode;
 
 // Default placeholder portrait
 const DEFAULT_PERSON =
@@ -772,10 +771,10 @@ export default function EditorPage() {
           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;
+      case "STYLE":
+        if ((node as StyleNode).stylePreset) {
+          config.stylePreset = (node as StyleNode).stylePreset;
+          config.styleStrength = (node as StyleNode).styleStrength;
         }
         break;
       case "EDIT":
@@ -1390,8 +1389,8 @@ export default function EditorPage() {
       case "BLEND":
         setNodes(prev => [...prev, { ...commonProps, type: "BLEND", blendStrength: 50 } as BlendNode]);
         break;
-      case "EDIT":
-        setNodes(prev => [...prev, { ...commonProps, type: "EDIT" } as EditNode]);
+      case "STYLE":
+        setNodes(prev => [...prev, { ...commonProps, type: "STYLE", styleStrength: 50 } as StyleNode]);
         break;
       case "CAMERA":
         setNodes(prev => [...prev, { ...commonProps, type: "CAMERA" } as CameraNode]);
@@ -1562,11 +1561,11 @@ export default function EditorPage() {
                       onUpdatePosition={updateNodePosition}
                     />
                   );
-                case "BLEND":
+                case "STYLE":
                   return (
-                    <BlendNodeView
+                    <StyleNodeView
                       key={node.id}
-                      node={node as BlendNode}
+                      node={node as StyleNode}
                       onDelete={deleteNode}
                       onUpdate={updateNode}
                       onStartConnection={handleStartConnection}
@@ -1646,7 +1645,7 @@ export default function EditorPage() {
               <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("BLEND")}>BLEND</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>