Unknon/

Manga.generator

const generateComicPanel = async () => {
    if (!prompt) return;
    setLoading(true);
    try {
        const response = await fetch("/api/generateComic", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({ prompt }),
        });
        const data = await response.json();
        if (data.image) {
            setComicPanels([...comicPanels, data.image]);
        }
    } catch (error) {
        console.error("Error generating comic panel:", error);
    }
    setLoading(false);
};

return (
    <div className="p-4">
        <h1 className="text-xl font-bold mb-4">AI Comic Panel Generator</h1>
        <Card className="p-4 mb-4">
            <Textarea
                placeholder="Enter a description for your comic panel..."
                value={prompt}
                onChange={(e) => setPrompt(e.target.value)}
            />
            <Button onClick={generateComicPanel} disabled={loading} className="mt-2">
                {loading ? "Generating..." : "Generate Panel"}
            </Button>
        </Card>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            {comicPanels.map((panel, index) => (
                <Card key={index}>
                    <CardContent>
                        <Image src={panel} alt={`Comic Panel ${index + 1}`} width={400} height={400} />
                    </CardContent>
                </Card>
            ))}
        </div>
    </div>
);