Browse Source

Add sample images and redesign quickstart templates

New templates focused on practical image transformation workflows:
- Product Shot: Product + scene/environment
- Model + Product: Combine model, product, and scene
- Color Variations: Generate product color variants
- Background Swap: Place subject in new background
- Style Transfer: Apply style from one image to another
- Scene Composite: Combine elements from multiple scenes

Sample images added to public/sample-images/ including:
- Products: watches, shoes, cosmetics, sunglasses
- Models: 7 model photos for fashion workflows
- Scenes: street scenes, desert, architecture, nature
- Colors/Textures: paint, pastel, wall textures

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
handoff-20260429-1057
Tom Spencer 6 months ago
parent
commit
a3b9ebf24b
  1. BIN
      public/sample-images/apple-watch.jpg
  2. BIN
      public/sample-images/building-side.jpg
  3. BIN
      public/sample-images/color-paint.jpg
  4. BIN
      public/sample-images/color-pastel.jpg
  5. BIN
      public/sample-images/color-wall.jpg
  6. BIN
      public/sample-images/cosmetics.jpg
  7. BIN
      public/sample-images/desert.jpg
  8. BIN
      public/sample-images/donkey.jpg
  9. BIN
      public/sample-images/green-wall-street.jpg
  10. BIN
      public/sample-images/house-lake.jpg
  11. BIN
      public/sample-images/model-2.jpg
  12. BIN
      public/sample-images/model-3.jpg
  13. BIN
      public/sample-images/model-4.jpg
  14. BIN
      public/sample-images/model-5.jpg
  15. BIN
      public/sample-images/model-6.jpg
  16. BIN
      public/sample-images/model-7.jpg
  17. BIN
      public/sample-images/model.jpg
  18. BIN
      public/sample-images/nike-shoe.jpg
  19. BIN
      public/sample-images/ny-street-2.jpg
  20. BIN
      public/sample-images/ny-street.jpg
  21. BIN
      public/sample-images/owl.jpg
  22. BIN
      public/sample-images/rayban.jpg
  23. BIN
      public/sample-images/shoes.jpg
  24. BIN
      public/sample-images/skincare.jpg
  25. BIN
      public/sample-images/street-scene-1.jpg
  26. BIN
      public/sample-images/street-scene-2.jpg
  27. BIN
      public/sample-images/street-scene-3.jpg
  28. BIN
      public/sample-images/street-scene-4.jpg
  29. BIN
      public/sample-images/street-scene-5.jpg
  30. BIN
      public/sample-images/street-scene.jpg
  31. BIN
      public/sample-images/watch.jpg
  32. 363
      src/lib/quickstart/templates.ts

BIN
public/sample-images/apple-watch.jpg

Binary file not shown.

After

Width:  |  Height:  |  Size: 390 KiB

BIN
public/sample-images/building-side.jpg

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 MiB

BIN
public/sample-images/color-paint.jpg

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 MiB

BIN
public/sample-images/color-pastel.jpg

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 MiB

BIN
public/sample-images/color-wall.jpg

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.6 MiB

BIN
public/sample-images/cosmetics.jpg

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.0 MiB

BIN
public/sample-images/desert.jpg

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.0 MiB

BIN
public/sample-images/donkey.jpg

Binary file not shown.

After

Width:  |  Height:  |  Size: 821 KiB

BIN
public/sample-images/green-wall-street.jpg

Binary file not shown.

After

Width:  |  Height:  |  Size: 1013 KiB

BIN
public/sample-images/house-lake.jpg

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 MiB

BIN
public/sample-images/model-2.jpg

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 MiB

BIN
public/sample-images/model-3.jpg

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 MiB

BIN
public/sample-images/model-4.jpg

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 MiB

BIN
public/sample-images/model-5.jpg

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.2 MiB

BIN
public/sample-images/model-6.jpg

Binary file not shown.

After

Width:  |  Height:  |  Size: 656 KiB

BIN
public/sample-images/model-7.jpg

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 MiB

BIN
public/sample-images/model.jpg

Binary file not shown.

After

Width:  |  Height:  |  Size: 643 KiB

BIN
public/sample-images/nike-shoe.jpg

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.6 MiB

BIN
public/sample-images/ny-street-2.jpg

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 MiB

BIN
public/sample-images/ny-street.jpg

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.6 MiB

BIN
public/sample-images/owl.jpg

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 MiB

BIN
public/sample-images/rayban.jpg

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 MiB

BIN
public/sample-images/shoes.jpg

Binary file not shown.

After

Width:  |  Height:  |  Size: 643 KiB

BIN
public/sample-images/skincare.jpg

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 MiB

BIN
public/sample-images/street-scene-1.jpg

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.2 MiB

BIN
public/sample-images/street-scene-2.jpg

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.4 MiB

BIN
public/sample-images/street-scene-3.jpg

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 MiB

BIN
public/sample-images/street-scene-4.jpg

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.0 MiB

BIN
public/sample-images/street-scene-5.jpg

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 MiB

BIN
public/sample-images/street-scene.jpg

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.4 MiB

BIN
public/sample-images/watch.jpg

Binary file not shown.

After

Width:  |  Height:  |  Size: 208 KiB

363
src/lib/quickstart/templates.ts

@ -10,16 +10,41 @@ export interface PresetTemplate {
workflow: Omit<WorkflowFile, "id">;
}
// 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<string, Record<ContentLevel, TemplateContent>> = {
"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<string, Record<ContentLevel, TemplateContent>> =
// 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",

Loading…
Cancel
Save