Spaces:
Runtime error
Runtime error
File size: 3,308 Bytes
38ceaf9 5870c02 38ceaf9 5870c02 38ceaf9 5870c02 38ceaf9 5870c02 38ceaf9 5870c02 38ceaf9 5870c02 38ceaf9 5870c02 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 |
"use client";
import { LoadingIcon } from "@/components/LoadingIcon";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Skeleton } from "@/components/ui/skeleton";
import { checkStatus, generate } from "@/server/generate";
import { useEffect, useState } from "react";
export default function Home() {
const [prompt, setPrompt] = useState("");
const [image, setImage] = useState("");
const [loading, setLoading] = useState(false);
const [runId, setRunId] = useState("");
const [status, setStatus] = useState("preparing");
// Polling in frontend to check for the
useEffect(() => {
if (!runId) return;
const interval = setInterval(() => {
checkStatus(runId).then((res) => {
if (res) setStatus(res.status);
if (res && res.status === "success") {
console.log(res.outputs[0].data);
setImage(res.outputs[0].data.images[0].url);
setLoading(false);
clearInterval(interval);
}
});
}, 2000);
return () => clearInterval(interval);
}, [runId]);
return (
<main className="flex min-h-screen flex-col items-center justify-between p-24">
<Card className="w-full max-w-[500px]">
<CardHeader>
Comfy Deploy - Vector Line Art Tool
<div className="text-xs text-foreground opacity-50">
Lora -{" "}
<a href="https://civitai.com/models/256144/stick-line-vector-illustration">
stick-line-vector-illustration
</a>
</div>
</CardHeader>
<CardContent>
<form
className="grid w-full items-center gap-1.5"
onSubmit={(e) => {
if (loading) return;
e.preventDefault();
setLoading(true);
generate(prompt).then((res) => {
console.log(res);
if (!res) return;
setRunId(res.run_id);
});
setStatus("preparing");
}}
>
<Label htmlFor="picture">Image prompt</Label>
<Input
id="picture"
type="text"
value={prompt}
onChange={(e) => setPrompt(e.target.value)}
/>
<Button
type="submit"
className="flex gap-2"
disabled={loading}
>
Generate {loading && <LoadingIcon />}
</Button>
<div className="border border-gray-200 w-full square h-[400px] rounded-lg relative">
{!loading && image && (
<img
className="w-full h-full object-contain"
src={image}
alt="Generated image"
></img>
)}
{loading && (
<div className="absolute top-0 left-0 w-full h-full flex items-center justify-center gap-2">
{status} <LoadingIcon />
</div>
)}
{loading && <Skeleton className="w-full h-full" />}
</div>
</form>
</CardContent>
</Card>
</main>
);
}
|