feat: add comfy namespace and update comfy examples

fal-ai · Jun 11, 2024 · 4b3080c · 4b3080c
2 parents f7d9dec + 7a494ff
commit 4b3080c
Show file tree

Hide file tree

Showing 9 changed files with 53 additions and 343 deletions.
diff --git a/...-router/app/comfy/image_to_image/page.tsx → ...-router/app/comfy/image-to-image/page.tsx b/...-router/app/comfy/image_to_image/page.tsx → ...-router/app/comfy/image-to-image/page.tsx
@@ -2,7 +2,6 @@
 
 import * as fal from '@fal-ai/serverless-client';
 import { useMemo, useState } from 'react';
-import getWorkflow from './workflow';
 
 // @snippet:start(client.config)
 fal.config({
@@ -84,23 +83,26 @@ export default function ComfyImageToImagePage() {
     setLoading(true);
     const start = Date.now();
     try {
-      const result: Result = await fal.subscribe('fal-ai/comfy-server', {
-        input: getWorkflow({
-          prompt: prompt,
-          loadimage_1: imageFile,
-        }),
-        pollInterval: 3000, // Default is 1000 (every 1s)
-        logs: true,
-        onQueueUpdate(update) {
-          setElapsedTime(Date.now() - start);
-          if (
-            update.status === 'IN_PROGRESS' ||
-            update.status === 'COMPLETED'
-          ) {
-            setLogs((update.logs || []).map((log) => log.message));
-          }
-        },
-      });
+      const result: Result = await fal.subscribe(
+        'comfy/fal-ai/image-to-image',
+        {
+          input: {
+            prompt: prompt,
+            loadimage_1: imageFile,
+          },
+          pollInterval: 3000, // Default is 1000 (every 1s)
+          logs: true,
+          onQueueUpdate(update) {
+            setElapsedTime(Date.now() - start);
+            if (
+              update.status === 'IN_PROGRESS' ||
+              update.status === 'COMPLETED'
+            ) {
+              setLogs((update.logs || []).map((log) => log.message));
+            }
+          },
+        }
+      );
       setResult(getImageURL(result));
     } catch (error: any) {
       setError(error);

diff --git a/...-router/app/comfy/image_to_video/page.tsx → ...-router/app/comfy/image-to-video/page.tsx b/...-router/app/comfy/image_to_video/page.tsx → ...-router/app/comfy/image-to-video/page.tsx
@@ -2,7 +2,6 @@
 
 import * as fal from '@fal-ai/serverless-client';
 import { useMemo, useState } from 'react';
-import getWorkflow from './workflow';
 
 // @snippet:start(client.config)
 fal.config({
@@ -80,22 +79,25 @@ export default function ComfyImageToVideoPage() {
     setLoading(true);
     const start = Date.now();
     try {
-      const result: Result = await fal.subscribe('fal-ai/comfy-server', {
-        input: getWorkflow({
-          loadimage_1: imageFile,
-        }),
-        pollInterval: 3000, // Default is 1000 (every 1s)
-        logs: true,
-        onQueueUpdate(update) {
-          setElapsedTime(Date.now() - start);
-          if (
-            update.status === 'IN_PROGRESS' ||
-            update.status === 'COMPLETED'
-          ) {
-            setLogs((update.logs || []).map((log) => log.message));
-          }
-        },
-      });
+      const result: Result = await fal.subscribe(
+        'comfy/fal-ai/image-to-video',
+        {
+          input: {
+            loadimage_1: imageFile,
+          },
+          pollInterval: 3000, // Default is 1000 (every 1s)
+          logs: true,
+          onQueueUpdate(update) {
+            setElapsedTime(Date.now() - start);
+            if (
+              update.status === 'IN_PROGRESS' ||
+              update.status === 'COMPLETED'
+            ) {
+              setLogs((update.logs || []).map((log) => log.message));
+            }
+          },
+        }
+      );
       setResult(getImageURL(result));
     } catch (error: any) {
       setError(error);

diff --git a/apps/demo-nextjs-app-router/app/comfy/image_to_image/workflow.tsx b/apps/demo-nextjs-app-router/app/comfy/image_to_image/workflow.tsx
diff --git a/apps/demo-nextjs-app-router/app/comfy/image_to_video/workflow.tsx b/apps/demo-nextjs-app-router/app/comfy/image_to_video/workflow.tsx
diff --git a/apps/demo-nextjs-app-router/app/comfy/page.tsx b/apps/demo-nextjs-app-router/app/comfy/page.tsx
@@ -16,19 +16,19 @@ export default function Index() {
         </p>
         <div className="mt-12 grid grid-cols-1 gap-3 md:grid-cols-3 lg:grid-cols-3">
           <button
-            onClick={() => router.push('/comfy/text_to_image')}
+            onClick={() => router.push('/comfy/text-to-image')}
             className="px-6 py-3 bg-blue-600 hover:bg-blue-500 text-white rounded-lg shadow-md transition-transform transform hover:-translate-y-1"
           >
             Text to Image
           </button>
           <button
-            onClick={() => router.push('/comfy/image_to_image')}
+            onClick={() => router.push('/comfy/image-to-image')}
             className="px-6 py-3 bg-blue-600 hover:bg-blue-500 text-white rounded-lg shadow-md transition-transform transform hover:-translate-y-1"
           >
             Image to Image
           </button>
           <button
-            onClick={() => router.push('/comfy/image_to_video')}
+            onClick={() => router.push('/comfy/image-to-video')}
             className="px-6 py-3 bg-blue-600 hover:bg-blue-500 text-white rounded-lg shadow-md transition-transform transform hover:-translate-y-1"
           >
             Image to Video

diff --git a/...p-router/app/comfy/text_to_image/page.tsx → ...p-router/app/comfy/text-to-image/page.tsx b/...p-router/app/comfy/text_to_image/page.tsx → ...p-router/app/comfy/text-to-image/page.tsx
@@ -2,7 +2,6 @@
 
 import * as fal from '@fal-ai/serverless-client';
 import { useMemo, useState } from 'react';
-import getWorkflow from './workflow';
 
 // @snippet:start(client.config)
 fal.config({
@@ -83,10 +82,10 @@ export default function ComfyTextToImagePage() {
     setLoading(true);
     const start = Date.now();
     try {
-      const result: Result = await fal.subscribe('fal-ai/comfy-server', {
-        input: getWorkflow({
+      const result: Result = await fal.subscribe('comfy/fal-ai/text-to-image', {
+        input: {
           prompt: prompt,
-        }),
+        },
         pollInterval: 3000, // Default is 1000 (every 1s)
         logs: true,
         onQueueUpdate(update) {