function MainComponent({ handleGenerate }) { const [prompt, setPrompt] = React.useState(""); const [negativePrompt, setNegativePrompt] = React.useState(""); const [size, setSize] = React.useState("256x256"); const [numImages, setNumImages] = React.useState(1); const [seed, setSeed] = React.useState(""); const [facePreservation, setFacePreservation] = React.useState(false); const [imageUpload, setImageUpload] = React.useState(null); const [style, setStyle] = React.useState(""); const [aspectRatio, setAspectRatio] = React.useState("1:1"); const [inpaintUpload, setInpaintUpload] = React.useState(null); return (

DALL·E 3 Image Generator

Image generation prompt:

setPrompt(e.target.value)} />
            </div>

<div className="mb-4">
                <label className="block mb-1" htmlFor="negative_prompt">Negative prompt:</label>
                <textarea className="w-full p-2 border" id="negative_prompt" name="negative_prompt" placeholder="Enter elements to exclude" value={negativePrompt} onChange={(e) => setNegativePrompt(e.target.value)} />
            </div>

<div className="mb-4">
                <label className="block mb-1" htmlFor="size">Image size:</label>
                <select className="w-full p-2 border" id="size" name="size" value={size} onChange={(e) => setSize(e.target.value)}>
                    <option value="256x256">256x256</option>
                    <option value="512x512">512x512</option>
                    <option value="1024x1024">1024x1024</option>
                </select>
            </div>

<div className="mb-4">
                <label className="block mb-1" htmlFor="num_images">Number of images:</label>
                <input className="w-full p-2 border" type="number" id="num_images" name="num_images" min="1" max="4" value={numImages} onChange={(e) => setNumImages(e.target.value)} />
            </div>

<div className="mb-4">
                <label className="block mb-1" htmlFor="seed">Seed value:</label>
                <input className="w-full p-2 border" type="number" id="seed" name="seed" placeholder="Enter seed value" value={seed} onChange={(e) => setSeed(e.target.value)} />
                <button className="mt-2 p-2 bg-blue-500 text-white" id="random_seed" onClick={() => setSeed(Math.floor(Math.random() * 1000000).toString())}>Random Seed</button>
            </div>

<div className="mb-4">
                <label className="block mb-1" htmlFor="face_preservation">Preserve face and style:</label>
                <input className="p-2 border" type="checkbox" id="face_preservation" name="face_preservation" checked={facePreservation} onChange={(e) => setFacePreservation(e.target.checked)} />
            </div>

<div className="mb-4">
                <label className="block mb-1" htmlFor="image_upload">Upload image for variations:</label>
                <input className="w-full p-2 border" type="file" id="image_upload" name="image_upload" accept="image/*" onChange={(e) => setImageUpload(e.target.files[0])} />
            </div>

<div className="mb-4">
                <label className="block mb-1" htmlFor="style">Style:</label>
                <select className="w-full p-2 border" id="style" name="style" value={style} onChange={(e) => setStyle(e.target.value)}>
                    <option value="">Default</option>
                    <option value="anime">アニメ</option>
                    <option value="manga">漫画</option>
                    <option value="Ghibli">ジブリ</option>
                    <option value="disney">ディズニー</option>
                    <option value="pixar">ピクサー</option>
                    <option value="American comics">アメコミ</option>
                    <option value="Moe characters">萌えキャラ</option>
                    <option value="RPG">RPG</option>
                    <option value="line_art">線画1</option>
                    <option value="Line drawing">線画2</option>
                    <option value="Watercolor">水彩画</option>
                    <option value="ink painting">水墨画</option>
                    <option value="floating pictures">浮絵</option>
                    <option value="pixel art">ドット絵</option>
                    <option value="turnaround">三面図1</option>
                    <option value="3-sided drawing">三面図2</option>
                    <option value="sewing_pattern">縫製仕様書</option>
                </select>
            </div>

<div className="mb-4">
                <label className="block mb-1" htmlFor="aspect_ratio">Aspect Ratio:</label>
                <select className="w-full p-2 border" id="aspect_ratio" name="aspect_ratio" value={aspectRatio} onChange={(e) => setAspectRatio(e.target.value)}>
                    <option value="1:1">1:1 (Square)</option>
                    <option value="4:5">4:5 (Portrait)</option>
                    <option value="16:9">16:9 (Widescreen)</option>
                </select>
            </div>

<div className="mb-4">
                <label className="block mb-1" htmlFor="inpaint_upload">Upload image for inpainting:</label>
                <input className="w-full p-2 border" type="file" id="inpaint_upload" name="inpaint_upload" accept="image/*" onChange={(e) => setInpaintUpload(e.target.files[0])} />
            </div>

<button className="w-full p-2 bg-blue-500 text-white" id="generate" onClick={() => handleGenerate({ prompt, negativePrompt, size, numImages, seed, facePreservation, imageUpload, style, aspectRatio, inpaintUpload })}>Generate Images</button>

<div id="output" className="mt-4"></div>
        </div>
    );
}

async function fetchImages({ prompt, style }) {
    const fullPrompt = style ? `${prompt}, ${style} style` : prompt;
    const response = await fetch(`/integrations/dall-e-3/?prompt=${encodeURIComponent(fullPrompt)}`, { method: 'GET' });
    const data = await response.json();
    return data.data;
}

function StoryComponent() {
    const [images, setImages] = React.useState([]);

const handleGenerate = async ({ prompt, style }) => {
        const newImages = await fetchImages({ prompt, style });
        setImages(newImages);
    };

return (
        <div>
            <MainComponent handleGenerate={handleGenerate} />
            <div className="mt-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                {images.map((src, index) => (
                    <img key={index} src={src} alt={`Generated image from prompt`} className="w-full h-auto" />
                ))}
            </div>
        </div>
    );
}</article></body></html>