ok

package.json

@@ -12,6 +12,7 @@
     "@hookform/resolvers": "^3.3.4",
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-tabs": "^1.0.4",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
     "lucide-react": "^0.309.0",

src/app/page.tsx

@@ -6,15 +6,41 @@ 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 {
+  checkStatus,
+  generate,
+  generate_img,
+  getUploadUrl,
+} from "@/server/generate";
 import { useEffect, useState } from "react";
 
-export default function Home() {
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+
+export default function Page() {
+  return (
+    <main className="flex min-h-screen flex-col items-center justify-between mt-10">
+      <Tabs defaultValue="txt2img" className="w-full max-w-[500px]">
+        <TabsList className="grid w-full grid-cols-2">
+          <TabsTrigger value="txt2img">txt2img</TabsTrigger>
+          <TabsTrigger value="img2img">img2img</TabsTrigger>
+        </TabsList>
+        <TabsContent value="txt2img">
+          <Txt2img />
+        </TabsContent>
+        <TabsContent value="img2img">
+          <Img2img />
+        </TabsContent>
+      </Tabs>
+    </main>
+  );
+}
+
+export function Txt2img() {
   const [prompt, setPrompt] = useState("");
   const [image, setImage] = useState("");
   const [loading, setLoading] = useState(false);
   const [runId, setRunId] = useState("");
-  const [status, setStatus] = useState("preparing");
+  const [status, setStatus] = useState<string>();
 
   // Polling in frontend to check for the
   useEffect(() => {
@@ -23,8 +49,8 @@ export default function Home() {
       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);
+          console.log(res.outputs[0]?.data);
+          setImage(res.outputs[0]?.data?.images[0].url);
           setLoading(false);
           clearInterval(interval);
         }
@@ -34,62 +60,179 @@ export default function Home() {
   }, [runId]);
 
   return (
-    <main className="flex min-h-screen flex-col items-center justify-between mt-10">
-      <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>
+    <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) {
+                setStatus("error");
+                setLoading(false);
+                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>
+            )}
+            {!image && status && (
+              <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>
-        </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);
+        </form>
+      </CardContent>
+    </Card>
+  );
+}
+
+export function Img2img() {
+  const [prompt, setPrompt] = useState<File>();
+  const [image, setImage] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [runId, setRunId] = useState("");
+  const [status, setStatus] = useState<string>();
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setPrompt(e.target.files[0]);
+  };
+
+  // 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 (
+    <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) => {
+            e.preventDefault()
+            if (loading) return;
+            if (!prompt) return;
+
+            setImage("");
+
+            setStatus("getting url for upload");
+
+            console.log(prompt?.type, prompt?.size);
+
+            getUploadUrl(prompt?.type, prompt?.size).then((res) => {
+              if (!res) return;
+
+              setStatus("uploading input");
+
+              console.log(res);
+
+              fetch(res.upload_url, {
+                method: "PUT",
+                body: prompt,
+                headers: {
+                  "Content-Type": prompt.type,
+                  "x-amz-acl": "public-read",
+                  "Content-Length": prompt.size.toString(),
+                },
+              }).then((_res) => {
+                if (_res.ok) {
+                  setStatus("uploaded input");
+
+                  setLoading(true);
+                  generate_img(res.download_url).then((res) => {
+                    console.log(res);
+                    if (!res) {
+                      setStatus("error");
+                      setLoading(false);
+                      return;
+                    }
+                    setRunId(res.run_id);
+                  });
+                  setStatus("preparing");
+                }
               });
-              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>
+            });
+          }}
+        >
+          <Label htmlFor="picture">Image prompt</Label>
+          <Input id="picture" type="file" onChange={handleFileChange} />
+          <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>
+            )}
+            {!image && status && (
+              <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>
   );
 }

src/components/ui/tabs.tsx

@@ -0,0 +1,55 @@
+"use client"
+
+import * as React from "react"
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+
+import { cn } from "@/lib/utils"
+
+const Tabs = TabsPrimitive.Root
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+TabsList.displayName = TabsPrimitive.List.displayName
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+      className
+    )}
+    {...props}
+  />
+))
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      className
+    )}
+    {...props}
+  />
+))
+TabsContent.displayName = TabsPrimitive.Content.displayName
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }

src/lib/comfy-deploy.ts

@@ -14,6 +14,12 @@ const runOutputTypes = z.object({
   ),
 });
 
+const uploadFileTypes = z.object({
+  upload_url: z.string(),
+  file_id: z.string(),
+  download_url: z.string(),
+})
+
 export class ComfyDeployClient {
   apiBase: string = "https://www.comfydeploy.com/api";
   apiToken: string;
@@ -96,4 +102,27 @@ export class ComfyDeployClient {
 
     return run;
   }
+
+  async getUploadUrl(type: string, file_size: number) {
+    const obj = {
+      type: type,
+      file_size: file_size.toString(),
+    };
+    const url = new URL(`${this.apiBase}/upload-url`);
+    url.search = new URLSearchParams(obj).toString();
+    
+    return await fetch(url.href, {
+      method: "GET",
+      headers: {
+        authorization: `Bearer ${this.apiToken}`,
+      },
+      cache: "no-store"
+    })
+      .then((response) => response.json())
+      .then((json) => uploadFileTypes.parse(json))
+      .catch((err) => {
+        console.error(err);
+        return null;
+      });
+  }
 }

src/server/generate.tsx

@@ -3,6 +3,7 @@
 import { ComfyDeployClient } from "@/lib/comfy-deploy"
 
 const client = new ComfyDeployClient({
+    apiBase: process.env.COMFY_API_URL,
     apiToken: process.env.COMFY_API_TOKEN!,
 })
 
@@ -15,6 +16,23 @@ export async function generate(prompt: string){
     })
 }
 
+export async function generate_img(input_image: string){
+    return await client.run({
+        deployment_id: process.env.COMFY_DEPLOYMENT_ID_IMG_2_IMG!,
+        inputs: {
+            "input_image": input_image
+        }
+    })
+}
+
 export async function checkStatus(run_id: string){
     return await client.getRun(run_id)
+}
+
+export async function getUploadUrl(type: string, file_size: number){
+    try {
+        return await client.getUploadUrl(type, file_size)
+    } catch (error) {
+        console.log(error)
+    }
 }