"use client"; import React from "react"; function MainComponent() { const [prompt, setPrompt] = useState(""); const [image, setImage] = useState(null); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); const generateImage = async () => { if (!prompt.trim()) { setError("Please enter a prompt"); return; } setLoading(true); setError(null); try { const response = await fetch( `/integrations/stable-diffusion-v-3/?prompt=${encodeURIComponent( prompt )}` ); if (!response.ok) { throw new Error(`Error: ${response.status}`); } const result = await response.json(); setImage(result.data[0]); } catch (err) { console.error(err); setError("Failed to generate image. Please try again."); } finally { setLoading(false); } }; return ( Image Generator ...