/** @jsxImportSource https://esm.sh/react */ import React, { useState } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; function ImageGenerator() { const [imageUrl, setImageUrl] = useState(null); const [prompt, setPrompt] = useState(""); const [isLoading, setIsLoading] = useState(false); const [error, setError] = useState(null); const generateImage = async (e: React.FormEvent) => { e.preventDefault(); setIsLoading(true); setError(null); try { // Validate prompt if (!prompt.trim()) { throw new Error('Please enter a description for the image'); } // Use a more robust image generation endpoint const response = await fetch(`https://maxm-imggenurl.web.val.run/${encodeURIComponent(prompt)}`, { method: 'GET', headers: { 'Accept': 'image/*' } }); if (!response.ok) { const errorText = await response.text(); throw new Error(errorText || 'Image generation failed'); } const blob = await response.blob(); const url = URL.createObjectURL(blob); setImageUrl(url); } catch (err) { console.error('Image generation error:', err); setError(err instanceof Error ? err.message : "An unknown error occurred"); } finally { setIsLoading(false); } }; const resetGenerator = () => { setImageUrl(null); setPrompt(""); setError(null); }; return (

🎨 AI Image Generator

{!imageUrl ? ( ) : (

)} {error && (

{error}

)} {imageUrl && (

Download Image

)}

); } const styles = { container: { fontFamily: 'system-ui, sans-serif', maxWidth: '600px', margin: '0 auto', padding: '20px', textAlign: 'center', }, title: { color: '#333', marginBottom: '20px', }, form: { display: 'flex', gap: '10px', marginBottom: '20px', }, input: { flex: 1, padding: '10px', borderRadius: '5px', border: '1px solid #ccc', }, button: { padding: '10px 15px', backgroundColor: '#4CAF50', color: 'white', border: 'none', borderRadius: '5px', cursor: 'pointer', }, generateAnotherButton: { padding: '10px 15px', backgroundColor: '#2196F3', color: 'white', border: 'none', borderRadius: '5px', cursor: 'pointer', marginBottom: '20px', }, error: { color: 'red', marginBottom: '20px', }, imageContainer: { display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '10px', }, image: { maxWidth: '100%', borderRadius: '10px', boxShadow: '0 4px 6px rgba(0,0,0,0.1)', }, downloadButton: { backgroundColor: '#4CAF50', color: 'white', padding: '10px 15px', textDecoration: 'none', borderRadius: '5px', }, generatedContainer: { marginBottom: '20px', } }; export default async function handler(request: Request): Promise { return new Response(` AI Image Generator

`, { headers: { "Content-Type": "text/html", "Cache-Control": "no-cache, no-store, must-revalidate" }, }); }

jumptoai