fix: ctrl+click/cmd+click to open a item of the menu

* Update README.md

* Update README.md

README.md

@@ -93,6 +93,10 @@ Major areas
 
 # Self Hosting with Vercel
 
+[![Video](https://img.mytsi.org/i/nFOG479.png)](https://www.youtube.com/watch?v=hWvsEY1cS2M)
+Tutorial Created by [Ross](https://github.com/rossman22590) and [Syn](https://github.com/mortlsyn)
+
+
 Build command
 
 ```

custom_routes.py

@@ -361,13 +361,30 @@ async def send_json_override(self, event, data, sid=None):
     if event == 'executing' and data.get('node') is not None:
         node = data.get('node')
         
-        if 'prompt_id' in prompt_metadata:
+        if prompt_id in prompt_metadata:
+            if 'progress' not in prompt_metadata[prompt_id]:
+                prompt_metadata[prompt_id]["progress"] = set()
+                
+            prompt_metadata[prompt_id]["progress"].add(node)
+            calculated_progress = len(prompt_metadata[prompt_id]["progress"]) / len(prompt_metadata[prompt_id]['workflow_api'])
+            # print("calculated_progress", calculated_progress)
+            
             if 'last_updated_node' in prompt_metadata[prompt_id] and prompt_metadata[prompt_id]['last_updated_node'] == node:
                 return
             prompt_metadata[prompt_id]['last_updated_node'] = node
             class_type = prompt_metadata[prompt_id]['workflow_api'][node]['class_type']
             print("updating run live status", class_type)
-            await update_run_live_status(prompt_id, "Executing " + class_type)
+            await update_run_live_status(prompt_id, "Executing " + class_type, calculated_progress)
+
+    if event == 'execution_cached' and data.get('nodes') is not None:
+        if prompt_id in prompt_metadata:
+            if 'progress' not in prompt_metadata[prompt_id]:
+                prompt_metadata[prompt_id]["progress"] = set()
+            
+            if 'nodes' in data:
+                for node in data.get('nodes', []):
+                    prompt_metadata[prompt_id]["progress"].add(node)
+            # prompt_metadata[prompt_id]["progress"].update(data.get('nodes'))
 
     if event == 'execution_error':
         # Careful this might not be fully awaited.
@@ -391,18 +408,22 @@ class Status(Enum):
 # Global variable to keep track of the last read line number
 last_read_line_number = 0
 
-async def update_run_live_status(prompt_id, live_status):
+async def update_run_live_status(prompt_id, live_status, calculated_progress: float):
     if prompt_id not in prompt_metadata:
         return
     
+    print("progress", calculated_progress)
+    
     status_endpoint = prompt_metadata[prompt_id]['status_endpoint']
     body = {
         "run_id": prompt_id,
         "live_status": live_status,
+        "progress": calculated_progress
     }
     # requests.post(status_endpoint, json=body)
     async with aiohttp.ClientSession() as session:
-        await session.post(status_endpoint, json=body)
+        async with session.post(status_endpoint, json=body) as response:
+            pass
 
 
 def update_run(prompt_id, status: Status):

web-plugin/index.js

@@ -1,7 +1,7 @@
 import { app } from "./app.js";
 import { api } from "./api.js";
 import { ComfyWidgets, LGraphNode } from "./widgets.js";
-import { generateDependencyGraph } from "https://esm.sh/[email protected]4";
+import { generateDependencyGraph } from "https://esm.sh/[email protected]9";
 
 /** @typedef {import('../../../web/types/comfy.js').ComfyExtension} ComfyExtension*/
 /** @type {ComfyExtension} */
@@ -182,7 +182,7 @@ function showError(title, message) {
 function createDynamicUIHtml(data) {
   console.log(data);
   let html =
-    '<div style="max-width: 1024px; margin: 14px auto; display: flex; flex-direction: column; gap: 24px;">';
+    '<div style="min-width: 600px; max-width: 1024px; margin: 14px auto; display: flex; flex-direction: column; gap: 24px;">';
   const bgcolor = "var(--comfy-input-bg)";
   const evenBg = "var(--border-color)";
   const textColor = "var(--input-text)";
@@ -284,8 +284,12 @@ function addButton() {
     }
 
     const ok = await confirmDialog.confirm(
-      "Confirm deployment -> " + displayName,
+      "Confirm deployment -> " +
-      `A new version will be deployed, are you conform? <br><br><input id="include-deps" type="checkbox" checked>Include dependence</input>`,
+        displayName +
+        "<br><br><small><div style='font-weight: normal;'>" +
+        endpoint +
+        "<div><br>",
+      `A new version will be deployed, are you confirm? <br><br><input id="include-deps" type="checkbox" checked>Include dependence</input>`,
     );
     if (!ok) return;
 

web/src/app/(app)/examples/page.tsx

@@ -48,12 +48,39 @@ const exampleWorkflows: exampleWorkflow[] = [
   },
   {
     title: "Upscale and Add Detail SDXL",
-    description: "Upscale and Add Details to your creations",
+    description: "Upscale and Add Details to your creations.",
     previewURL: 'https://www.comfydeploy.com/share/comfy-deploy-example-upscale-and-add-detail-sdxl',
     image: {
       src: '/example-workflows/upscale.webp',
       alt: 'Upscale and Add Detail SDXL',
     }
+  },
+  {
+    title: "Txt2Img SDXL Turbo",
+    description: "Try SDXL turbo and generate images since 1 step in seconds.",
+    previewURL: 'https://www.comfydeploy.com/share/comfy-deploy-example-txt2img-sdxl-turbo',
+    image: {
+      src: '/example-workflows/txt2img-sdxl-turbo.webp',
+      alt: 'Txt2Img SDXL Turbo',
+    }
+  },
+  {
+    title: "Img2Img SDXL Controlnet",
+    description: "This workflow uses canny. Generate lines of you original image and create variations.",
+    previewURL: 'https://www.comfydeploy.com/share/comfy-deploy-example-img2-img-sdxl-controlnet',
+    image: {
+      src: '/example-workflows/txt2img-controlnet.webp',
+      alt: 'Img2Img SDXL Controlnet',
+    }
+  },
+  {
+    title: "Automatic Inpainting (SEG)",
+    description: "Type what do you want to select and change that area with your prompt.",
+    previewURL: 'https://www.comfydeploy.com/share/comfy-deploy-example-automatic-inpainting-clip-seg',
+    image: {
+      src: '/example-workflows/automatic-inpainting-seg.webp',
+      alt: 'Img2Img SDXL Controlnet',
+    }
   }
 ];
 
@@ -67,7 +94,7 @@ async function Examples() {
         </h1>
         <p className="max-w-[560px] text-center text-lg text-muted-foreground">Text to Image, Image to Image, IPAdapter, and more. Here are some examples that you can use to deploy your workflow.</p>
       </section>
-      <section className="flex justify-center flex-wrap gap-4">
+      <section className="flex justify-center flex-wrap gap-5">
         {exampleWorkflows.map(workflow => {
           return <Card className="w-[350px]">
             <CardHeader>

web/src/components/NavbarMenu.tsx

@@ -5,7 +5,6 @@ import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { cn } from "@/lib/utils";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
 import { useMediaQuery } from "usehooks-ts";
 
@@ -25,8 +24,6 @@ export function NavbarMenu({
   const pathnames = usePathname();
   const pathname = `/${pathnames.split("/")[1]}`;
 
-  const router = useRouter();
-
   const pages = [
     {
       name: "Workflows",
@@ -59,11 +56,8 @@ export function NavbarMenu({
               <TabsTrigger
                 key={page.name}
                 value={page.path}
-                onClick={() => {
-                  router.push(page.path);
-                }}
               >
-                {page.name}
+                <Link href={page.path}>{page.name}</Link>
               </TabsTrigger>
             ))}
           </TabsList>

web/src/components/VersionSelect.tsx

@@ -328,7 +328,7 @@ export function RunWorkflowButton({
             className="px-1"
           >
             <div className="flex justify-end">
-              <AutoFormSubmit>
+              <AutoFormSubmit disabled={isLoading}>
                 Run
                 {isLoading ? <LoadingIcon /> : <Play size={14} />}
               </AutoFormSubmit>

web/src/server/createRun.ts

@@ -90,12 +90,12 @@ export const createRun = withServerPromise(
         Object.entries(workflow_api).forEach(([_, node]) => {
           if (node.inputs["input_id"] === key) {
             node.inputs["input_id"] = inputs[key];
+            // Fix for external text default value
+            if (node.class_type == "ComfyUIDeployExternalText") {
+              node.inputs["default_value"] = inputs[key];
+            }
           }
 
-          // Fix for external text default value
-          if (node.class_type == "ComfyUIDeployExternalText") {
-            node.inputs["default_value"] = inputs[key];
-          }
         });
       }
     }