diff --git a/public/sample-images/apple-watch.jpg b/public/sample-images/apple-watch.jpg new file mode 100644 index 00000000..6403f940 Binary files /dev/null and b/public/sample-images/apple-watch.jpg differ diff --git a/public/sample-images/building-side.jpg b/public/sample-images/building-side.jpg new file mode 100644 index 00000000..696fa490 Binary files /dev/null and b/public/sample-images/building-side.jpg differ diff --git a/public/sample-images/color-paint.jpg b/public/sample-images/color-paint.jpg new file mode 100644 index 00000000..5e3d3221 Binary files /dev/null and b/public/sample-images/color-paint.jpg differ diff --git a/public/sample-images/color-pastel.jpg b/public/sample-images/color-pastel.jpg new file mode 100644 index 00000000..61205d5f Binary files /dev/null and b/public/sample-images/color-pastel.jpg differ diff --git a/public/sample-images/color-wall.jpg b/public/sample-images/color-wall.jpg new file mode 100644 index 00000000..ae881d29 Binary files /dev/null and b/public/sample-images/color-wall.jpg differ diff --git a/public/sample-images/cosmetics.jpg b/public/sample-images/cosmetics.jpg new file mode 100644 index 00000000..5e71317d Binary files /dev/null and b/public/sample-images/cosmetics.jpg differ diff --git a/public/sample-images/desert.jpg b/public/sample-images/desert.jpg new file mode 100644 index 00000000..ce3f1e9a Binary files /dev/null and b/public/sample-images/desert.jpg differ diff --git a/public/sample-images/donkey.jpg b/public/sample-images/donkey.jpg new file mode 100644 index 00000000..404029ac Binary files /dev/null and b/public/sample-images/donkey.jpg differ diff --git a/public/sample-images/green-wall-street.jpg b/public/sample-images/green-wall-street.jpg new file mode 100644 index 00000000..906c4579 Binary files /dev/null and b/public/sample-images/green-wall-street.jpg differ diff --git a/public/sample-images/house-lake.jpg b/public/sample-images/house-lake.jpg new file mode 100644 index 00000000..bc198598 Binary files /dev/null and b/public/sample-images/house-lake.jpg differ diff --git a/public/sample-images/model-2.jpg b/public/sample-images/model-2.jpg new file mode 100644 index 00000000..c38de685 Binary files /dev/null and b/public/sample-images/model-2.jpg differ diff --git a/public/sample-images/model-3.jpg b/public/sample-images/model-3.jpg new file mode 100644 index 00000000..111722c1 Binary files /dev/null and b/public/sample-images/model-3.jpg differ diff --git a/public/sample-images/model-4.jpg b/public/sample-images/model-4.jpg new file mode 100644 index 00000000..31b829ff Binary files /dev/null and b/public/sample-images/model-4.jpg differ diff --git a/public/sample-images/model-5.jpg b/public/sample-images/model-5.jpg new file mode 100644 index 00000000..ee58ed11 Binary files /dev/null and b/public/sample-images/model-5.jpg differ diff --git a/public/sample-images/model-6.jpg b/public/sample-images/model-6.jpg new file mode 100644 index 00000000..1ae7f203 Binary files /dev/null and b/public/sample-images/model-6.jpg differ diff --git a/public/sample-images/model-7.jpg b/public/sample-images/model-7.jpg new file mode 100644 index 00000000..0ec130b4 Binary files /dev/null and b/public/sample-images/model-7.jpg differ diff --git a/public/sample-images/model.jpg b/public/sample-images/model.jpg new file mode 100644 index 00000000..9096a769 Binary files /dev/null and b/public/sample-images/model.jpg differ diff --git a/public/sample-images/nike-shoe.jpg b/public/sample-images/nike-shoe.jpg new file mode 100644 index 00000000..5f6ee4c7 Binary files /dev/null and b/public/sample-images/nike-shoe.jpg differ diff --git a/public/sample-images/ny-street-2.jpg b/public/sample-images/ny-street-2.jpg new file mode 100644 index 00000000..0a0edcb1 Binary files /dev/null and b/public/sample-images/ny-street-2.jpg differ diff --git a/public/sample-images/ny-street.jpg b/public/sample-images/ny-street.jpg new file mode 100644 index 00000000..ada596c2 Binary files /dev/null and b/public/sample-images/ny-street.jpg differ diff --git a/public/sample-images/owl.jpg b/public/sample-images/owl.jpg new file mode 100644 index 00000000..843d5d3c Binary files /dev/null and b/public/sample-images/owl.jpg differ diff --git a/public/sample-images/rayban.jpg b/public/sample-images/rayban.jpg new file mode 100644 index 00000000..70b6de03 Binary files /dev/null and b/public/sample-images/rayban.jpg differ diff --git a/public/sample-images/shoes.jpg b/public/sample-images/shoes.jpg new file mode 100644 index 00000000..7b20e1a5 Binary files /dev/null and b/public/sample-images/shoes.jpg differ diff --git a/public/sample-images/skincare.jpg b/public/sample-images/skincare.jpg new file mode 100644 index 00000000..bcd078cf Binary files /dev/null and b/public/sample-images/skincare.jpg differ diff --git a/public/sample-images/street-scene-1.jpg b/public/sample-images/street-scene-1.jpg new file mode 100644 index 00000000..6e390c9d Binary files /dev/null and b/public/sample-images/street-scene-1.jpg differ diff --git a/public/sample-images/street-scene-2.jpg b/public/sample-images/street-scene-2.jpg new file mode 100644 index 00000000..012dce3d Binary files /dev/null and b/public/sample-images/street-scene-2.jpg differ diff --git a/public/sample-images/street-scene-3.jpg b/public/sample-images/street-scene-3.jpg new file mode 100644 index 00000000..bcde5855 Binary files /dev/null and b/public/sample-images/street-scene-3.jpg differ diff --git a/public/sample-images/street-scene-4.jpg b/public/sample-images/street-scene-4.jpg new file mode 100644 index 00000000..dd042fb8 Binary files /dev/null and b/public/sample-images/street-scene-4.jpg differ diff --git a/public/sample-images/street-scene-5.jpg b/public/sample-images/street-scene-5.jpg new file mode 100644 index 00000000..f7d8872c Binary files /dev/null and b/public/sample-images/street-scene-5.jpg differ diff --git a/public/sample-images/street-scene.jpg b/public/sample-images/street-scene.jpg new file mode 100644 index 00000000..2a29ce45 Binary files /dev/null and b/public/sample-images/street-scene.jpg differ diff --git a/public/sample-images/watch.jpg b/public/sample-images/watch.jpg new file mode 100644 index 00000000..87a2d515 Binary files /dev/null and b/public/sample-images/watch.jpg differ diff --git a/src/lib/quickstart/templates.ts b/src/lib/quickstart/templates.ts index 26841776..326ad1c9 100644 --- a/src/lib/quickstart/templates.ts +++ b/src/lib/quickstart/templates.ts @@ -10,16 +10,41 @@ export interface PresetTemplate { workflow: Omit; } -// Sample image URLs from Unsplash for "full" content level +// Sample images from public/sample-images folder export const SAMPLE_IMAGES = { - portrait: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=800&q=80", - landscape: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800&q=80", - product: "https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=800&q=80", - art: "https://images.unsplash.com/photo-1541961017774-22349e4a1262?w=800&q=80", - architecture: "https://images.unsplash.com/photo-1486325212027-8081e485255e?w=800&q=80", - nature: "https://images.unsplash.com/photo-1469474968028-56623f02e42e?w=800&q=80", - style1: "https://images.unsplash.com/photo-1579783902614-a3fb3927b6a5?w=800&q=80", - style2: "https://images.unsplash.com/photo-1547891654-e66ed7ebb968?w=800&q=80", + // Products + appleWatch: "/sample-images/apple-watch.jpg", + watch: "/sample-images/watch.jpg", + cosmetics: "/sample-images/cosmetics.jpg", + skincare: "/sample-images/skincare.jpg", + nikeShoe: "/sample-images/nike-shoe.jpg", + shoes: "/sample-images/shoes.jpg", + rayban: "/sample-images/rayban.jpg", + // Models + model: "/sample-images/model.jpg", + model2: "/sample-images/model-2.jpg", + model3: "/sample-images/model-3.jpg", + model4: "/sample-images/model-4.jpg", + model5: "/sample-images/model-5.jpg", + model6: "/sample-images/model-6.jpg", + model7: "/sample-images/model-7.jpg", + // Scenes + buildingSide: "/sample-images/building-side.jpg", + desert: "/sample-images/desert.jpg", + greenWallStreet: "/sample-images/green-wall-street.jpg", + houseLake: "/sample-images/house-lake.jpg", + nyStreet: "/sample-images/ny-street.jpg", + nyStreet2: "/sample-images/ny-street-2.jpg", + streetScene: "/sample-images/street-scene.jpg", + streetScene1: "/sample-images/street-scene-1.jpg", + streetScene2: "/sample-images/street-scene-2.jpg", + // Colors/Textures + colorPaint: "/sample-images/color-paint.jpg", + colorPastel: "/sample-images/color-pastel.jpg", + colorWall: "/sample-images/color-wall.jpg", + // Animals + donkey: "/sample-images/donkey.jpg", + owl: "/sample-images/owl.jpg", }; // Default node dimensions for consistent layouts @@ -86,126 +111,132 @@ interface TemplateContent { } const TEMPLATE_CONTENT: Record> = { - "simple-edit": { + "product-shot": { empty: { prompts: { "prompt-1": "" }, images: {}, }, minimal: { prompts: { - "prompt-1": "Describe how you want to transform this image. For example:\n- Change the lighting or mood\n- Add or remove elements\n- Apply a specific style\n- Enhance certain features", + "prompt-1": "Place the product in the scene shown in the reference image.\n\nConsider:\n- Match the lighting direction and quality\n- Maintain realistic scale and perspective\n- Blend shadows naturally\n- Keep product details sharp and clear", }, images: {}, }, full: { prompts: { - "prompt-1": "Transform this portrait into a professional headshot with soft studio lighting, clean neutral background, and subtle color grading. Enhance skin texture naturally while maintaining the subject's authentic appearance. Add a slight vignette for focus.", + "prompt-1": "Place the Nike shoe on the desert sand dunes. Match the warm golden hour lighting from the desert scene. Position the shoe at a dynamic angle showing the sole and side profile. Add subtle sand particles around the shoe and soft shadows that match the desert lighting direction. The final image should look like a professional outdoor product shoot.", }, images: { - "imageInput-1": { url: SAMPLE_IMAGES.portrait, filename: "portrait-sample.jpg" }, + "imageInput-1": { url: SAMPLE_IMAGES.nikeShoe, filename: "nike-shoe.jpg" }, + "imageInput-2": { url: SAMPLE_IMAGES.desert, filename: "desert.jpg" }, }, }, }, - "llm-chain": { + "model-product": { empty: { prompts: { "prompt-1": "" }, images: {}, }, minimal: { prompts: { - "prompt-1": "Enter a brief concept here. The LLM will expand this into a detailed image generation prompt.\n\nExample concepts:\n- A cozy cabin in winter\n- Futuristic city at sunset\n- Magical forest scene", + "prompt-1": "Show the model wearing or using the product.\n\nConsider:\n- Natural pose and interaction with product\n- Consistent lighting between model and product\n- Realistic scale and proportions\n- Professional fashion/lifestyle photography style", }, images: {}, }, full: { prompts: { - "prompt-1": "You are a creative prompt engineer specializing in image generation. Take this concept and expand it into a detailed, evocative prompt:\n\nConcept: A serene mountain lake at golden hour\n\nExpand with specific details about: composition, lighting quality, atmospheric conditions, color palette, textures, mood, and artistic style. Make it vivid and precise for AI image generation.", + "prompt-1": "Create a fashion advertisement showing the model wearing the Ray-Ban sunglasses. The model should be in a confident, stylish pose with the sunglasses naturally positioned. Use the urban street scene as the background. Match the lighting to create a cohesive lifestyle shot. The result should look like a high-end eyewear campaign photo.", }, images: { - "imageInput-1": { url: SAMPLE_IMAGES.landscape, filename: "landscape-reference.jpg" }, + "imageInput-1": { url: SAMPLE_IMAGES.model, filename: "model.jpg" }, + "imageInput-2": { url: SAMPLE_IMAGES.rayban, filename: "rayban.jpg" }, + "imageInput-3": { url: SAMPLE_IMAGES.streetScene, filename: "street-scene.jpg" }, }, }, }, - "contact-sheet": { + "color-variations": { empty: { prompts: { "prompt-1": "" }, images: {}, }, minimal: { prompts: { - "prompt-1": "Describe how to combine elements from all reference images.\n\nConsider:\n- Which image provides the style/mood?\n- Which provides the composition?\n- What elements to take from each?\n- What is the final desired output?", + "prompt-1": "Generate color variations of the product using the color palette from the reference images.\n\nConsider:\n- Extract dominant colors from each reference\n- Apply colors naturally to the product\n- Maintain product shape and details\n- Keep realistic material properties", }, images: {}, }, full: { prompts: { - "prompt-1": "Create a new product photograph combining these references:\n- Image 1: Use the clean, minimal composition style\n- Image 2: Apply the warm lighting and color temperature\n- Image 3: Match the professional product photography aesthetic\n\nGenerate a hero shot suitable for e-commerce with soft shadows and neutral background.", + "prompt-1": "Create a new version of the Apple Watch using the vibrant color palette from the paint and pastel reference images. Apply a gradient or color-blocked design inspired by these colors. Keep the watch's shape, screen, and details intact. The result should look like a special edition colorway that could be part of a product line expansion.", }, images: { - "imageInput-1": { url: SAMPLE_IMAGES.product, filename: "product-1.jpg" }, - "imageInput-2": { url: SAMPLE_IMAGES.architecture, filename: "lighting-ref.jpg" }, - "imageInput-3": { url: SAMPLE_IMAGES.nature, filename: "mood-ref.jpg" }, + "imageInput-1": { url: SAMPLE_IMAGES.appleWatch, filename: "apple-watch.jpg" }, + "imageInput-2": { url: SAMPLE_IMAGES.colorPaint, filename: "color-paint.jpg" }, + "imageInput-3": { url: SAMPLE_IMAGES.colorPastel, filename: "color-pastel.jpg" }, }, }, }, - "annotate-generate": { + "background-swap": { empty: { prompts: { "prompt-1": "" }, images: {}, }, minimal: { prompts: { - "prompt-1": "After annotating the image, describe what should be generated:\n\n- What should appear in marked areas?\n- What style should match the original?\n- Any specific details to include?\n\nTip: Use rectangles to mark areas for replacement.", + "prompt-1": "Place the subject from the first image into the new background scene.\n\nConsider:\n- Extract subject cleanly from original\n- Match perspective and scale to new scene\n- Adjust lighting to match background\n- Blend edges naturally", }, images: {}, }, full: { prompts: { - "prompt-1": "Replace the annotated areas with seamlessly integrated content:\n- Match the existing lighting direction and intensity\n- Maintain consistent perspective and scale\n- Blend edges naturally with surrounding areas\n- Preserve the overall style and color palette\n\nThe result should look like a natural, unedited photograph.", + "prompt-1": "Place the model in front of the colorful wall background. Adjust the lighting on the model to match the soft, diffused light in the wall scene. Position the model naturally as if they were photographed in this location. Ensure smooth edge blending and consistent color temperature throughout the composite.", }, images: { - "imageInput-1": { url: SAMPLE_IMAGES.architecture, filename: "architecture-edit.jpg" }, + "imageInput-1": { url: SAMPLE_IMAGES.model3, filename: "model-3.jpg" }, + "imageInput-2": { url: SAMPLE_IMAGES.colorWall, filename: "color-wall.jpg" }, }, }, }, - "prompt-expansion": { + "style-transfer": { empty: { prompts: { "prompt-1": "" }, images: {}, }, minimal: { prompts: { - "prompt-1": "Write a short concept (1-2 sentences) that the LLM will expand into a full image generation prompt.\n\nThe LLM will add:\n- Visual details\n- Lighting descriptions\n- Composition guidance\n- Style references\n- Technical specifications", + "prompt-1": "Apply the visual style from the first image to the content of the second image.\n\nConsider:\n- Extract color palette and mood\n- Apply texture and lighting style\n- Maintain subject recognizability\n- Create cohesive final result", }, images: {}, }, full: { prompts: { - "prompt-1": "Expand this into a detailed image generation prompt:\n\n\"A cozy reading nook with afternoon light\"\n\nInclude specifics about:\n1. Furniture style and materials\n2. Lighting quality (direction, color temperature, shadows)\n3. Atmospheric elements (dust motes, steam from tea)\n4. Color palette and mood\n5. Camera angle and composition\n6. Artistic style (photorealistic, illustrated, etc.)\n\nOutput only the expanded prompt, ready for image generation.", + "prompt-1": "Apply the warm, rustic color palette and painterly texture from the house by the lake image to the owl portrait. Maintain the owl's detailed features and pose, but transform it into an artistic interpretation that feels like it belongs in the same visual world as the landscape. The result should have the warm earth tones, soft lighting, and dreamy quality of the reference.", }, images: { - "imageInput-1": { url: SAMPLE_IMAGES.art, filename: "style-reference.jpg" }, + "imageInput-1": { url: SAMPLE_IMAGES.houseLake, filename: "house-lake.jpg" }, + "imageInput-2": { url: SAMPLE_IMAGES.owl, filename: "owl.jpg" }, }, }, }, - "style-transfer": { + "scene-composite": { empty: { prompts: { "prompt-1": "" }, images: {}, }, minimal: { prompts: { - "prompt-1": "Describe how to transfer the style:\n\n- Image 1 (top): STYLE reference - its colors, textures, artistic style\n- Image 2 (bottom): CONTENT to transform\n\nSpecify which style elements to transfer:\n- Color palette?\n- Brush strokes/texture?\n- Lighting mood?\n- Artistic medium?", + "prompt-1": "Combine elements from multiple scene images into a cohesive new scene.\n\nConsider:\n- Select complementary elements from each\n- Unify lighting direction and quality\n- Create natural depth and composition\n- Blend atmospheres seamlessly", }, images: {}, }, full: { prompts: { - "prompt-1": "Apply the artistic style from the first image to the content of the second image:\n\nStyle Transfer Instructions:\n- Extract the color palette, brushwork, and artistic technique from Image 1\n- Preserve the composition, subjects, and spatial relationships from Image 2\n- Blend the style naturally without losing content recognizability\n- Match the texture and visual rhythm of the style reference\n\nCreate a harmonious fusion that feels like an original artwork.", + "prompt-1": "Create a new urban scene that combines the architectural elements from the NY street views with the greenery and plants from the green wall street image. Imagine a futuristic eco-city where nature has reclaimed urban spaces. Vines and plants grow on building facades, green walls line the streets, but the classic NY architecture remains visible. Unify the lighting to suggest late afternoon golden hour.", }, images: { - "imageInput-1": { url: SAMPLE_IMAGES.style1, filename: "style-source.jpg" }, - "imageInput-2": { url: SAMPLE_IMAGES.style2, filename: "content-image.jpg" }, + "imageInput-1": { url: SAMPLE_IMAGES.nyStreet, filename: "ny-street.jpg" }, + "imageInput-2": { url: SAMPLE_IMAGES.nyStreet2, filename: "ny-street-2.jpg" }, + "imageInput-3": { url: SAMPLE_IMAGES.greenWallStreet, filename: "green-wall-street.jpg" }, }, }, }, @@ -214,61 +245,75 @@ const TEMPLATE_CONTENT: Record> = // Preset templates export const PRESET_TEMPLATES: PresetTemplate[] = [ { - id: "simple-edit", - name: "Simple Edit", - description: "Basic image editing: input → generate → output", - icon: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z", + id: "product-shot", + name: "Product Shot", + description: "Place product in a new scene or environment", + icon: "M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4", workflow: { version: 1, - name: "Simple Edit", + name: "Product Shot", edgeStyle: "curved", nodes: [ { id: "imageInput-1", type: "imageInput", - position: { x: 50, y: 150 }, + position: { x: 50, y: 100 }, + data: createImageInputData(), + style: NODE_DIMENSIONS.imageInput, + }, + { + id: "imageInput-2", + type: "imageInput", + position: { x: 50, y: 430 }, data: createImageInputData(), style: NODE_DIMENSIONS.imageInput, }, { id: "prompt-1", type: "prompt", - position: { x: 50, y: 480 }, + position: { x: 50, y: 760 }, data: createPromptData(""), style: NODE_DIMENSIONS.prompt, }, { id: "nanoBanana-1", type: "nanoBanana", - position: { x: 450, y: 250 }, + position: { x: 450, y: 300 }, data: createNanoBananaData(), style: NODE_DIMENSIONS.nanoBanana, }, { id: "output-1", type: "output", - position: { x: 850, y: 240 }, + position: { x: 850, y: 290 }, data: createOutputData(), style: NODE_DIMENSIONS.output, }, ], edges: [ { - id: "edge-imageInput-1-nanoBanana-1-image-image", + id: "edge-imageInput-1-nanoBanana-1", source: "imageInput-1", sourceHandle: "image", target: "nanoBanana-1", targetHandle: "image", }, { - id: "edge-prompt-1-nanoBanana-1-text-text", + id: "edge-imageInput-2-nanoBanana-1", + source: "imageInput-2", + sourceHandle: "image", + target: "nanoBanana-1", + targetHandle: "image", + }, + { + id: "edge-prompt-1-nanoBanana-1", source: "prompt-1", sourceHandle: "text", target: "nanoBanana-1", targetHandle: "text", }, { - id: "edge-nanoBanana-1-output-1-image-image", + id: "edge-nanoBanana-1-output-1", source: "nanoBanana-1", sourceHandle: "image", target: "output-1", @@ -278,75 +323,89 @@ export const PRESET_TEMPLATES: PresetTemplate[] = [ }, }, { - id: "llm-chain", - name: "LLM Chain", - description: "Expand a prompt with LLM, then generate", - icon: "M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z", + id: "model-product", + name: "Model + Product", + description: "Combine model, product, and scene", + icon: "M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z", workflow: { version: 1, - name: "LLM Chain", + name: "Model + Product", edgeStyle: "curved", nodes: [ { id: "imageInput-1", type: "imageInput", - position: { x: 50, y: 100 }, + position: { x: 50, y: 50 }, + data: createImageInputData(), + style: NODE_DIMENSIONS.imageInput, + }, + { + id: "imageInput-2", + type: "imageInput", + position: { x: 50, y: 380 }, + data: createImageInputData(), + style: NODE_DIMENSIONS.imageInput, + }, + { + id: "imageInput-3", + type: "imageInput", + position: { x: 50, y: 710 }, data: createImageInputData(), style: NODE_DIMENSIONS.imageInput, }, { id: "prompt-1", type: "prompt", - position: { x: 50, y: 430 }, + position: { x: 450, y: 650 }, data: createPromptData(""), style: NODE_DIMENSIONS.prompt, }, - { - id: "llmGenerate-1", - type: "llmGenerate", - position: { x: 450, y: 300 }, - data: createLLMGenerateData(), - style: NODE_DIMENSIONS.llmGenerate, - }, { id: "nanoBanana-1", type: "nanoBanana", - position: { x: 850, y: 200 }, + position: { x: 450, y: 300 }, data: createNanoBananaData(), style: NODE_DIMENSIONS.nanoBanana, }, { id: "output-1", type: "output", - position: { x: 1250, y: 190 }, + position: { x: 850, y: 290 }, data: createOutputData(), style: NODE_DIMENSIONS.output, }, ], edges: [ { - id: "edge-prompt-1-llmGenerate-1-text-text", - source: "prompt-1", - sourceHandle: "text", - target: "llmGenerate-1", - targetHandle: "text", + id: "edge-imageInput-1-nanoBanana-1", + source: "imageInput-1", + sourceHandle: "image", + target: "nanoBanana-1", + targetHandle: "image", }, { - id: "edge-imageInput-1-nanoBanana-1-image-image", - source: "imageInput-1", + id: "edge-imageInput-2-nanoBanana-1", + source: "imageInput-2", sourceHandle: "image", target: "nanoBanana-1", targetHandle: "image", }, { - id: "edge-llmGenerate-1-nanoBanana-1-text-text", - source: "llmGenerate-1", + id: "edge-imageInput-3-nanoBanana-1", + source: "imageInput-3", + sourceHandle: "image", + target: "nanoBanana-1", + targetHandle: "image", + }, + { + id: "edge-prompt-1-nanoBanana-1", + source: "prompt-1", sourceHandle: "text", target: "nanoBanana-1", targetHandle: "text", }, { - id: "edge-nanoBanana-1-output-1-image-image", + id: "edge-nanoBanana-1-output-1", source: "nanoBanana-1", sourceHandle: "image", target: "output-1", @@ -356,13 +415,13 @@ export const PRESET_TEMPLATES: PresetTemplate[] = [ }, }, { - id: "contact-sheet", - name: "Contact Sheet", - description: "Multiple reference images for generation", - icon: "M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2z", + id: "color-variations", + name: "Color Variations", + description: "Generate product color variants from references", + icon: "M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01", workflow: { version: 1, - name: "Contact Sheet", + name: "Color Variations", edgeStyle: "curved", nodes: [ { @@ -389,56 +448,56 @@ export const PRESET_TEMPLATES: PresetTemplate[] = [ { id: "prompt-1", type: "prompt", - position: { x: 450, y: 600 }, + position: { x: 450, y: 650 }, data: createPromptData(""), style: NODE_DIMENSIONS.prompt, }, { id: "nanoBanana-1", type: "nanoBanana", - position: { x: 450, y: 250 }, + position: { x: 450, y: 300 }, data: createNanoBananaData(), style: NODE_DIMENSIONS.nanoBanana, }, { id: "output-1", type: "output", - position: { x: 850, y: 240 }, + position: { x: 850, y: 290 }, data: createOutputData(), style: NODE_DIMENSIONS.output, }, ], edges: [ { - id: "edge-imageInput-1-nanoBanana-1-image-image", + id: "edge-imageInput-1-nanoBanana-1", source: "imageInput-1", sourceHandle: "image", target: "nanoBanana-1", targetHandle: "image", }, { - id: "edge-imageInput-2-nanoBanana-1-image-image", + id: "edge-imageInput-2-nanoBanana-1", source: "imageInput-2", sourceHandle: "image", target: "nanoBanana-1", targetHandle: "image", }, { - id: "edge-imageInput-3-nanoBanana-1-image-image", + id: "edge-imageInput-3-nanoBanana-1", source: "imageInput-3", sourceHandle: "image", target: "nanoBanana-1", targetHandle: "image", }, { - id: "edge-prompt-1-nanoBanana-1-text-text", + id: "edge-prompt-1-nanoBanana-1", source: "prompt-1", sourceHandle: "text", target: "nanoBanana-1", targetHandle: "text", }, { - id: "edge-nanoBanana-1-output-1-image-image", + id: "edge-nanoBanana-1-output-1", source: "nanoBanana-1", sourceHandle: "image", target: "output-1", @@ -448,75 +507,75 @@ export const PRESET_TEMPLATES: PresetTemplate[] = [ }, }, { - id: "annotate-generate", - name: "Annotate & Generate", - description: "Draw annotations on image, then generate", - icon: "M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z", + id: "background-swap", + name: "Background Swap", + description: "Place subject in a new background", + icon: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z", workflow: { version: 1, - name: "Annotate & Generate", + name: "Background Swap", edgeStyle: "curved", nodes: [ { id: "imageInput-1", type: "imageInput", - position: { x: 50, y: 150 }, + position: { x: 50, y: 100 }, data: createImageInputData(), style: NODE_DIMENSIONS.imageInput, }, { - id: "annotation-1", - type: "annotation", - position: { x: 450, y: 150 }, - data: createAnnotationData(), - style: NODE_DIMENSIONS.annotation, + id: "imageInput-2", + type: "imageInput", + position: { x: 50, y: 430 }, + data: createImageInputData(), + style: NODE_DIMENSIONS.imageInput, }, { id: "prompt-1", type: "prompt", - position: { x: 450, y: 480 }, + position: { x: 50, y: 760 }, data: createPromptData(""), style: NODE_DIMENSIONS.prompt, }, { id: "nanoBanana-1", type: "nanoBanana", - position: { x: 850, y: 250 }, + position: { x: 450, y: 300 }, data: createNanoBananaData(), style: NODE_DIMENSIONS.nanoBanana, }, { id: "output-1", type: "output", - position: { x: 1250, y: 240 }, + position: { x: 850, y: 290 }, data: createOutputData(), style: NODE_DIMENSIONS.output, }, ], edges: [ { - id: "edge-imageInput-1-annotation-1-image-image", + id: "edge-imageInput-1-nanoBanana-1", source: "imageInput-1", sourceHandle: "image", - target: "annotation-1", + target: "nanoBanana-1", targetHandle: "image", }, { - id: "edge-annotation-1-nanoBanana-1-image-image", - source: "annotation-1", + id: "edge-imageInput-2-nanoBanana-1", + source: "imageInput-2", sourceHandle: "image", target: "nanoBanana-1", targetHandle: "image", }, { - id: "edge-prompt-1-nanoBanana-1-text-text", + id: "edge-prompt-1-nanoBanana-1", source: "prompt-1", sourceHandle: "text", target: "nanoBanana-1", targetHandle: "text", }, { - id: "edge-nanoBanana-1-output-1-image-image", + id: "edge-nanoBanana-1-output-1", source: "nanoBanana-1", sourceHandle: "image", target: "output-1", @@ -526,75 +585,75 @@ export const PRESET_TEMPLATES: PresetTemplate[] = [ }, }, { - id: "prompt-expansion", - name: "Prompt Expansion", - description: "Use LLM to expand a brief prompt", - icon: "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z", + id: "style-transfer", + name: "Style Transfer", + description: "Apply style from one image to another", + icon: "M9.53 16.122a3 3 0 00-5.78 1.128 2.25 2.25 0 01-2.4 2.245 4.5 4.5 0 008.4-2.245c0-.399-.078-.78-.22-1.128zm0 0a15.998 15.998 0 003.388-1.62m-5.043-.025a15.994 15.994 0 011.622-3.395m3.42 3.42a15.995 15.995 0 004.764-4.648l3.876-5.814a1.151 1.151 0 00-1.597-1.597L14.146 6.32a15.996 15.996 0 00-4.649 4.763m3.42 3.42a6.776 6.776 0 00-3.42-3.42", workflow: { version: 1, - name: "Prompt Expansion", + name: "Style Transfer", edgeStyle: "curved", nodes: [ { id: "imageInput-1", type: "imageInput", - position: { x: 450, y: 50 }, + position: { x: 50, y: 100 }, + data: createImageInputData(), + style: NODE_DIMENSIONS.imageInput, + }, + { + id: "imageInput-2", + type: "imageInput", + position: { x: 50, y: 430 }, data: createImageInputData(), style: NODE_DIMENSIONS.imageInput, }, { id: "prompt-1", type: "prompt", - position: { x: 50, y: 150 }, + position: { x: 50, y: 760 }, data: createPromptData(""), style: NODE_DIMENSIONS.prompt, }, - { - id: "llmGenerate-1", - type: "llmGenerate", - position: { x: 50, y: 420 }, - data: createLLMGenerateData(), - style: NODE_DIMENSIONS.llmGenerate, - }, { id: "nanoBanana-1", type: "nanoBanana", - position: { x: 450, y: 380 }, + position: { x: 450, y: 300 }, data: createNanoBananaData(), style: NODE_DIMENSIONS.nanoBanana, }, { id: "output-1", type: "output", - position: { x: 850, y: 370 }, + position: { x: 850, y: 290 }, data: createOutputData(), style: NODE_DIMENSIONS.output, }, ], edges: [ { - id: "edge-prompt-1-llmGenerate-1-text-text", - source: "prompt-1", - sourceHandle: "text", - target: "llmGenerate-1", - targetHandle: "text", + id: "edge-imageInput-1-nanoBanana-1", + source: "imageInput-1", + sourceHandle: "image", + target: "nanoBanana-1", + targetHandle: "image", }, { - id: "edge-imageInput-1-nanoBanana-1-image-image", - source: "imageInput-1", + id: "edge-imageInput-2-nanoBanana-1", + source: "imageInput-2", sourceHandle: "image", target: "nanoBanana-1", targetHandle: "image", }, { - id: "edge-llmGenerate-1-nanoBanana-1-text-text", - source: "llmGenerate-1", + id: "edge-prompt-1-nanoBanana-1", + source: "prompt-1", sourceHandle: "text", target: "nanoBanana-1", targetHandle: "text", }, { - id: "edge-nanoBanana-1-output-1-image-image", + id: "edge-nanoBanana-1-output-1", source: "nanoBanana-1", sourceHandle: "image", target: "output-1", @@ -604,13 +663,13 @@ export const PRESET_TEMPLATES: PresetTemplate[] = [ }, }, { - id: "style-transfer", - name: "Style Transfer", - description: "Apply style from reference to content image", - icon: "M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01", + id: "scene-composite", + name: "Scene Composite", + description: "Combine elements from multiple scenes", + icon: "M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10", workflow: { version: 1, - name: "Style Transfer", + name: "Scene Composite", edgeStyle: "curved", nodes: [ { @@ -627,52 +686,66 @@ export const PRESET_TEMPLATES: PresetTemplate[] = [ data: createImageInputData(), style: NODE_DIMENSIONS.imageInput, }, + { + id: "imageInput-3", + type: "imageInput", + position: { x: 50, y: 710 }, + data: createImageInputData(), + style: NODE_DIMENSIONS.imageInput, + }, { id: "prompt-1", type: "prompt", - position: { x: 50, y: 710 }, + position: { x: 450, y: 650 }, data: createPromptData(""), style: NODE_DIMENSIONS.prompt, }, { id: "nanoBanana-1", type: "nanoBanana", - position: { x: 450, y: 280 }, + position: { x: 450, y: 300 }, data: createNanoBananaData(), style: NODE_DIMENSIONS.nanoBanana, }, { id: "output-1", type: "output", - position: { x: 850, y: 270 }, + position: { x: 850, y: 290 }, data: createOutputData(), style: NODE_DIMENSIONS.output, }, ], edges: [ { - id: "edge-imageInput-1-nanoBanana-1-image-image", + id: "edge-imageInput-1-nanoBanana-1", source: "imageInput-1", sourceHandle: "image", target: "nanoBanana-1", targetHandle: "image", }, { - id: "edge-imageInput-2-nanoBanana-1-image-image", + id: "edge-imageInput-2-nanoBanana-1", source: "imageInput-2", sourceHandle: "image", target: "nanoBanana-1", targetHandle: "image", }, { - id: "edge-prompt-1-nanoBanana-1-text-text", + id: "edge-imageInput-3-nanoBanana-1", + source: "imageInput-3", + sourceHandle: "image", + target: "nanoBanana-1", + targetHandle: "image", + }, + { + id: "edge-prompt-1-nanoBanana-1", source: "prompt-1", sourceHandle: "text", target: "nanoBanana-1", targetHandle: "text", }, { - id: "edge-nanoBanana-1-output-1-image-image", + id: "edge-nanoBanana-1-output-1", source: "nanoBanana-1", sourceHandle: "image", target: "output-1",