ADHD-Closet

Image-to-Image Generation Features

Overview

This document describes the image-to-image generation features that use reference images to maintain visual consistency across generated content. All features use AI models that understand reference images and generate new content while preserving style, color harmony, and aesthetic consistency.

Features

1. Color Variations (/api/images/generate-variation)

Generate color variations of an item while maintaining its exact style, fit, and proportions.

Use Cases:

Parameters:

Example:

POST /api/images/generate-variation
{
  "referenceImageBase64": "...",
  "variationType": "color",
  "parameters": {
    "targetColor": "burgundy",
    "preserveDetails": true
  }
}

The system maintains the exact style and fit while changing colors. Graphics and logos stay recognizable (important for band merch), and the output quality is consistent with the original item.

2. Seasonal Variations (/api/images/generate-variation)

Transform items for different seasons while maintaining core style.

Use Cases:

Parameters:

Seasonal Adaptations:

Example:

POST /api/images/generate-variation
{
  "referenceImageBase64": "...",
  "variationType": "seasonal",
  "parameters": {
    "targetSeason": "winter"
  }
}

3. Matching Items (/api/images/generate-matching)

Generate items that perfectly complement a reference piece.

Use Cases:

Parameters:

Example - Generate Matching Bottoms:

POST /api/images/generate-matching
{
  "referenceImageBase64": "...",
  "targetCategory": "bottoms",
  "styleNotes": "Casual, everyday wear"
}

Example - Generate Coordinated Set:

POST /api/images/generate-matching
{
  "referenceImageBase64": "...",
  "matchingType": "coordinated-set",
  "setType": "two-piece"
}

Matching Considerations:

4. Style Transfer (/api/images/style-transfer)

Apply aesthetic/styling from a reference image (mood board, inspiration photo) to an item.

Use Cases:

Parameters:

Strength Guide:

Example:

POST /api/images/style-transfer
{
  "itemImageBase64": "...",
  "styleReferenceBase64": "...",  // Cottagecore mood board
  "transferStrength": 0.7
}

Aesthetics that work well:

5. Context Variations (/api/images/outfit-context)

Adapt outfits for different occasions/settings while maintaining personal style.

Use Cases:

Parameters:

Context Examples:

Example:

POST /api/images/outfit-context
{
  "itemsBase64": [
    { "id": "1", "base64": "...", "category": "tops" },
    { "id": "2", "base64": "...", "category": "bottoms" }
  ],
  "targetContext": "job interview",
  "maintainPieces": ["1"]  // Keep the top
}

Technical Details

Image Input Format

All endpoints accept base64-encoded images:

const imageBase64 = imageBuffer.toString('base64');
// Or from file input:
const file = event.target.files[0];
const reader = new FileReader();
reader.onload = (e) => {
  const base64 = e.target?.result?.toString().split(',')[1];
};
reader.readAsDataURL(file);

Response Format

All endpoints return:

{
  success: boolean;
  generatedImageUrl: string;  // URL or base64 data URI
  // Additional metadata specific to endpoint
}

Image Output

Generated images are returned as either:

  1. Data URI: data:image/jpeg;base64,... (can be used directly in <img> tags)
  2. URL: HTTP URL (needs to be downloaded/saved)

Error Handling

Errors return:

{
  error: string;  // Error message
}

Status codes:

Integration Examples

React Component - Color Variation Generator

import { useState } from 'react';

function ColorVariationGenerator({ itemImage }: { itemImage: string }) {
  const [targetColor, setTargetColor] = useState('burgundy');
  const [preserveDetails, setPreserveDetails] = useState(true);
  const [generatedImage, setGeneratedImage] = useState<string | null>(null);
  const [loading, setLoading] = useState(false);

  const generateVariation = async () => {
    setLoading(true);
    try {
      const response = await fetch('/api/images/generate-variation', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          referenceImageBase64: itemImage,
          variationType: 'color',
          parameters: {
            targetColor,
            preserveDetails,
          },
        }),
      });
      
      const data = await response.json();
      if (data.success) {
        setGeneratedImage(data.generatedImageUrl);
      }
    } finally {
      setLoading(false);
    }
  };

  return (
    <div>
      <input
        value={targetColor}
        onChange={(e) => setTargetColor(e.target.value)}
        placeholder="Target color (e.g., burgundy)"
      />
      <label>
        <input
          type="checkbox"
          checked={preserveDetails}
          onChange={(e) => setPreserveDetails(e.target.checked)}
        />
        Preserve graphics/patterns
      </label>
      <button onClick={generateVariation} disabled={loading}>
        {loading ? 'Generating...' : 'Generate Color Variation'}
      </button>
      
      {generatedImage && (
        <div>
          <h3>Generated Variation:</h3>
          <img src={generatedImage} alt="Generated variation" />
        </div>
      )}
    </div>
  );
}

React Component - Matching Item Generator

function MatchingItemGenerator({ topImage }: { topImage: string }) {
  const [category, setCategory] = useState('bottoms');
  const [styleNotes, setStyleNotes] = useState('');
  const [generatedImage, setGeneratedImage] = useState<string | null>(null);
  const [loading, setLoading] = useState(false);

  const generateMatching = async () => {
    setLoading(true);
    try {
      const response = await fetch('/api/images/generate-matching', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          referenceImageBase64: topImage,
          targetCategory: category,
          styleNotes: styleNotes || undefined,
        }),
      });
      
      const data = await response.json();
      if (data.success) {
        setGeneratedImage(data.generatedImageUrl);
      }
    } finally {
      setLoading(false);
    }
  };

  return (
    <div>
      <select value={category} onChange={(e) => setCategory(e.target.value)}>
        <option value="bottoms">Bottoms</option>
        <option value="shoes">Shoes</option>
        <option value="accessories">Accessories</option>
        <option value="outerwear">Outerwear</option>
      </select>
      
      <textarea
        value={styleNotes}
        onChange={(e) => setStyleNotes(e.target.value)}
        placeholder="Style notes (optional)"
      />
      
      <button onClick={generateMatching} disabled={loading}>
        {loading ? 'Generating...' : 'Generate Matching Item'}
      </button>
      
      {generatedImage && (
        <img src={generatedImage} alt="Generated matching item" />
      )}
    </div>
  );
}

ADHD-Friendly Features

All image generation features are designed with ADHD users in mind:

Visual Consistency

Reference images produce predictable results. Generated items match your existing wardrobe, which reduces decision paralysis.

Quick Previews

See variations before buying. Preview outfits for different contexts with instant visual feedback.

Reduced Overwhelm

One reference produces focused results. Clear visual comparisons show limited, relevant options.

Confidence Building

See how items look together. Preview before committing to understand what works.

Performance & Limitations

Generation Time

Quality Factors

Best Practices

  1. Use high-quality reference images (well-lit, clear, in focus)
  2. Provide specific color names (not “red” but “burgundy” or “crimson”)
  3. For style transfer, use clear mood board/aesthetic references
  4. Keep context descriptions specific (“job interview” vs “formal”)
  5. For matching items, provide style notes for better results

Limitations

Privacy & Security

All image generation:

API Rate Limits

Future Enhancements

Planned features:

Support & Troubleshooting

Common Issues

“Generation failed”

“No image returned”

“Doesn’t match reference”

Getting Help

Conclusion

These image-to-image generation features are useful for ADHD users who benefit from visual feedback: