/** @jsxImportSource https://esm.sh/react@18.2.0 */ import React, { useState } from "https://esm.sh/react@18.2.0"; import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; function App() { const [prompt, setPrompt] = useState(""); const [images, setImages] = useState([]); const [isLoading, setIsLoading] = useState(false); const [error, setError] = useState(null); const generateImages = async (e: React.FormEvent) => { e.preventDefault(); if (!prompt.trim()) { setError("Please enter a description"); return; } setIsLoading(true); setImages([]); setError(null); try { // Create variations by adding unique modifiers to each image generation const variations = [ "artistic style", "vibrant colors", "soft lighting", "dramatic contrast", "impressionist interpretation", "surreal perspective" ]; const imagePromises = variations.map(variation => fetch(`https://maxm-imggenurl.web.val.run/${encodeURIComponent(`${prompt} - ${variation}`)}`) .then(res => { if (!res.ok) throw new Error('Image generation failed'); return res.url; }) ); const generatedImages = await Promise.all(imagePromises); setImages(generatedImages); } catch (error) { console.error("Image generation failed", error); setError(error instanceof Error ? error.message : "Failed to generate images"); } finally { setIsLoading(false); } }; const downloadImage = (imageUrl: string, index: number) => { const link = document.createElement('a'); link.href = imageUrl; link.download = `generated-image-${index + 1}.jpg`; link.click(); }; return (

🖼️ Text to 6 Unique Images Generator

{error && (

⚠️ {error}

)} {isLoading &&

⏳ Generating unique images...

}

{images.map((imageUrl, index) => (

))}

Each image is a unique interpretation of your prompt

View Source

); } const styles = { container: { fontFamily: 'Arial, sans-serif', maxWidth: '800px', margin: '0 auto', padding: '20px', textAlign: 'center', }, title: { color: '#333', marginBottom: '20px', fontSize: '2rem', }, description: { color: '#666', fontStyle: 'italic', marginTop: '15px', }, form: { display: 'flex', gap: '10px', marginBottom: '20px', flexWrap: 'wrap', justifyContent: 'center', }, input: { flex: '1 1 300px', padding: '10px', fontSize: '16px', borderRadius: '5px', border: '1px solid #ddd', }, button: { padding: '10px 15px', backgroundColor: '#4CAF50', color: 'white', border: 'none', borderRadius: '5px', cursor: 'pointer', transition: 'background-color 0.3s ease', }, errorMessage: { backgroundColor: '#ffdddd', color: '#ff0000', padding: '10px', marginBottom: '15px', borderRadius: '5px', }, loading: { color: '#666', fontSize: '1.2rem', }, imageGrid: { display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '15px', }, imageContainer: { position: 'relative', display: 'flex', flexDirection: 'column', alignItems: 'center', }, image: { width: '100%', height: '250px', objectFit: 'cover', borderRadius: '8px', boxShadow: '0 4px 6px rgba(0,0,0,0.1)', }, downloadButton: { marginTop: '10px', padding: '5px 10px', backgroundColor: '#2196F3', color: 'white', border: 'none', borderRadius: '5px', cursor: 'pointer', }, sourceLink: { display: 'block', marginTop: '20px', color: '#666', textDecoration: 'none', fontSize: '0.9rem', } }; function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { return new Response(` 6 Unique Images Generator

`, { headers: { "content-type": "text/html", }, }); }

Nandu