Image Generation API

const API_BASE = 'https://editor.superduperai.co/api/v1';
const headers = {
  'Authorization': `Bearer ${your_api_token}`,
  'Content-Type': 'application/json'
};

const generateImage = async (prompt: string) => {
  const response = await fetch(`${API_BASE}/file/generate-image`, {
    method: 'POST',
    headers,
    body: JSON.stringify({
      config: {
        prompt: prompt,
        generation_config_name: 'comfyui/flux', // Free model
        params: {
          width: 1024,
          height: 1024,
          quality: 'hd'
        }
      }
    })
  });
  
  const [fileData] = await response.json(); // Returns array
  return fileData.id;
};
 
// Wait for generation to complete
const waitForImage = async (fileId: string) => {
  while (true) {
    const response = await fetch(`${API_BASE}/file/${fileId}`, { headers });
    const status = await response.json();
    
    if (status.url) return status.url; // Ready!
    if (status.error) throw new Error(status.error);
    
    await new Promise(r => setTimeout(r, 2000)); // Wait 2 seconds
  }
};
 
// Complete workflow
const imageUrl = await generateImage("A beautiful sunset over mountains");
const finalUrl = await waitForImage(imageUrl);
console.log('Generated image:', finalUrl);

const pollForCompletion = async (fileId: string, timeout = 300000) => {
  const startTime = Date.now();
  
  while (Date.now() - startTime < timeout) {
    const response = await fetch(`${API_BASE}/file/${fileId}`, { headers });
    const status = await response.json();
    
    if (status.url) {
      return status.url; // ✅ Generation complete
    }
    
    if (status.error) {
      throw new Error(status.error); // ❌ Generation failed
    }
    
    // Optional: Check progress
    if (status.progress) {
      console.log(`Progress: ${status.progress}%`);
    }
    
    await new Promise(r => setTimeout(r, 2000)); // Poll every 2 seconds
  }
  
  throw new Error('Generation timeout');
};

const watchWithSSE = (fileId: string, onUpdate: (data: any) => void) => {
  const eventSource = new EventSource(`${API_BASE}/events/file.${fileId}`, {
    headers: {
      'Authorization': `Bearer ${your_api_token}`
    }
  });
  
  eventSource.onmessage = (event) => {
    const data = JSON.parse(event.data);
    onUpdate(data);
    
    if (data.url || data.error) {
      eventSource.close();
    }
  };
  
  eventSource.onerror = (error) => {
    console.warn('SSE connection failed, falling back to polling');
    eventSource.close();
    // Fallback to polling method
  };
  
  // Cleanup after 5 minutes
  setTimeout(() => {
    eventSource.close();
  }, 300000);
  
  return eventSource;
};
 
// Usage with fallback
const generateWithRealtime = async (prompt: string) => {
  const imageId = await generateImage(prompt);
  
  // Try SSE first, fallback to polling
  return new Promise((resolve, reject) => {
    let resolved = false;
    
    // SSE attempt
    const sse = watchWithSSE(imageId, (data) => {
      if (data.url && !resolved) {
        resolved = true;
        resolve(data.url);
      }
    });
    
    // Polling fallback after 10 seconds
    setTimeout(async () => {
      if (!resolved) {
        sse.close();
        try {
          const url = await pollForCompletion(imageId);
          if (!resolved) {
            resolved = true;
            resolve(url);
          }
        } catch (error) {
          if (!resolved) {
            resolved = true;
            reject(error);
          }
        }
      }
    }, 10000);
  });
};

const createProductMockup = async (product: string, setting: string) => {
  const prompt = `Professional product photo of ${product} on ${setting}, clean background, studio lighting, high resolution`;
  
  const imageId = await generateImage(prompt);
  return await waitForImage(imageId);
};
 
// Example
const mockup = await createProductMockup("wireless headphones", "marble surface");

const createSocialPost = async (topic: string, style = "modern") => {
  const prompt = `${style} social media post about ${topic}, vibrant colors, engaging design, square format`;
  
  const response = await fetch(`${API_BASE}/file/generate-image`, {
    method: 'POST',
    headers,
    body: JSON.stringify({
      config: {
        prompt,
        generation_config_name: 'google-cloud/imagen3', // Good quality/price balance
        params: {
          width: 1024,
          height: 1024,
          aspect_ratio: '1:1' // Square for social media
        }
      }
    })
  });
  
  const [fileData] = await response.json();
  return await waitForImage(fileData.id);
};

const enhanceImage = async (imageId: string, enhancement: string) => {
  const response = await fetch(`${API_BASE}/file/generate-image`, {
    method: 'POST',
    headers,
    body: JSON.stringify({
      config: {
        prompt: `Enhance this image: ${enhancement}`,
        generation_config_name: 'comfyui/flux/inpainting', // Budget editing
        references: [imageId], // Reference to existing image
        params: {
          strength: 0.7, // How much to change (0.1-1.0)
          quality: 'hd'
        }
      }
    })
  });
  
  const [fileData] = await response.json();
  return await waitForImage(fileData.id);
};
 
// Example
const enhanced = await enhanceImage(originalImageId, "improve lighting and colors");

const selectModel = (useCase: string, budget: 'low' | 'medium' | 'high') => {
  const models = {
    low: {
      general: 'comfyui/flux',
      editing: 'comfyui/flux/inpainting'
    },
    medium: {
      general: 'google-cloud/imagen3',
      editing: 'google-cloud/imagen3-edit'
    },
    high: {
      general: 'google-cloud/imagen4-ultra',
      editing: 'azure-openai/gpt-image-1-edit'
    }
  };
  
  const category = useCase.includes('edit') ? 'editing' : 'general';
  return models[budget][category];
};

const optimizedGeneration = async (prompt: string, options = {}) => {
  const {
    model = 'comfyui/flux',
    size = 'large',
    quality = 'hd'
  } = options;
  
  const sizes = {
    small: { width: 512, height: 512 },
    medium: { width: 768, height: 768 },
    large: { width: 1024, height: 1024 },
    ultra: { width: 1536, height: 1536 }
  };
  
  return fetch(`${API_BASE}/file/generate-image`, {
    method: 'POST',
    headers,
    body: JSON.stringify({
      config: {
        prompt,
        generation_config_name: model,
        params: {
          ...sizes[size],
          quality,
          // Auto-optimization enabled
          enhance: true,
          seed: Math.floor(Math.random() * 1000000) // For reproducible results
        }
      }
    })
  });
};

const robustImageGeneration = async (prompt: string, retries = 3) => {
  for (let attempt = 1; attempt <= retries; attempt++) {
    try {
      const imageId = await generateImage(prompt);
      const imageUrl = await waitForImage(imageId);
      return imageUrl;
    } catch (error) {
      console.log(`Attempt ${attempt} failed:`, error.message);
      
      if (attempt === retries) {
        throw new Error(`Failed after ${retries} attempts: ${error.message}`);
      }
      
      // Wait before retrying
      await new Promise(r => setTimeout(r, 1000 * attempt));
    }
  }
};

// Response structure
[
  {
    id: "file-id-here",
    image_generation_id: "generation-id",
    image_generation: {
      generation_config: {
        name: "comfyui/flux",
        price_per_generation: 1.0
      }
    },
    url: null, // Initially null, populated when ready
    thumbnail_url: null,
    tasks: [] // Empty when complete
  }
]

import { useState, useCallback } from 'react';
 
export const useImageGeneration = () => {
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);
  
  const generate = useCallback(async (prompt: string, model = 'comfyui/flux') => {
    setLoading(true);
    setError(null);
    
    try {
      const imageId = await generateImage(prompt, model);
      const imageUrl = await waitForImage(imageId);
      return imageUrl;
    } catch (err) {
      setError(err.message);
      throw err;
    } finally {
      setLoading(false);
    }
  }, []);
  
  return { generate, loading, error };
};

const generateBatch = async (prompts: string[], model = 'comfyui/flux') => {
  const generations = prompts.map(prompt => generateImage(prompt, model));
  const imageIds = await Promise.all(generations);
  
  // Wait for all to complete
  const imageUrls = await Promise.all(
    imageIds.map(id => waitForImage(id))
  );
  
  return imageUrls;
};
 
// Usage
const urls = await generateBatch([
  "Red sports car",
  "Blue mountain landscape", 
  "Modern office interior"
]);