"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 (
)}
);
}
export default MainComponent;
Image Generator
setPrompt(e.target.value)}
placeholder="Enter your image description..."
className="w-full p-2 border rounded"
/>
{error && {error}
}
{image && (
Comments
Post a Comment