// Cloned by Singireddy bhavana on 13 Nov 2024 from World "New World (clone by Singireddy bhavana)" by Singireddy bhavana 
// Please leave this clone trail here.
 
import React, { useState } from 'react';

const ImageGenerationAPITester = () => {
  const [prompt, setPrompt] = useState('');
  const [images, setImages] = useState([]);

  const apiProviders = [
    {
      name: 'Anthropic',
      generateImage: async (prompt) => {
        const response = await fetch('/api/anthropic-image-generate', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ prompt })
        });
        return await response.json();
      }
    },
    {
      name: 'Hugging Face',
      generateImage: async (prompt) => {
        const response = await fetch('/api/huggingface-image-generate', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ prompt })
        });
        return await response.json();
      }
    },
    {
      name: 'OpenAI',
      generateImage: async (prompt) => {
        const response = await fetch('/api/openai-image-generate', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ prompt })
        });
        return await response.json();
      }
    }
  ];

  const generateImages = async () => {
    const imageResults = await Promise.all(
      apiProviders.map(async (provider) => {
        try {
          const image = await provider.generateImage(prompt);
          return { provider: provider.name, image };
        } catch (error) {
          console.error(`Error generating image with ${provider.name}: ${error}`);
          return { provider: provider.name, error: error.message };
        }
      })
    );
    setImages(imageResults);
  };

  return (
    <div style={{ maxWidth: '1024px', margin: '0 auto', padding: '16px' }}>
      < style={{ fontSize: '24px', fontWeight: 'bold', marginBottom: '16px' }}>Image Generation API Tester>
      <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
        <input
          style={{ padding: '8px', border: '1px solid #ccc', borderRadius: '4px' }}
          placeholder="Enter a description of the image you want to generate"
          value={prompt}
          onChange={(e) => setPrompt(e.target.value)}
        />
        <button
          style={{ backgroundColor: '#0070f3', color: 'white', padding: '8px 16px', borderRadius: '4px', cursor: 'pointer' }}
          onClick={generateImages}
        >
          Generate Images
        <button>
        {images.length > 0 && (
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(1, minmax(0, 1fr))', gap: '16px' }}>
            {images.map((result, index) => (
              <div
                key={index}
                style={{ border: '1px solid #ccc', padding: '16px', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '8px' }}
              >
                <div style={{ fontWeight: 'bold' }}>{result.provider}<div>
                {result.image ? (
                  <img
                    src={result.image}
                    alt={prompt}
                    style={{ maxWidth: '100%', height: 'auto' }}
                  />
                ) : (
                  <div style={{ color: 'red' }}>{result.error}<div>
                )}
              <div>
            ))}
          <div>
        )}
      <div>
    <div>
  );
};

export default ImageGenerationAPITester;