generation ETA

Author: KAJdev

packages/stablestudio-ui/src/Comfy/index.tsx

@@ -226,10 +226,13 @@ export namespace Comfy {
           id: inputID,
         };
 
-        const cropped = await cropImage(image, newInput);
-        if (!cropped) continue;
-
-        responses.push(cropped);
+        responses.push({
+          id: image.id,
+          inputID: newInput.id,
+          created: new Date(),
+          src: URL.createObjectURL(image.blob),
+          finishReason: 0,
+        });
         newInputs[inputID] = newInput;
       }
 
@@ -292,51 +295,3 @@ export namespace Comfy {
     );
   };
 }
-
-function cropImage(
-  image: StableStudio.StableDiffusionImage,
-  input: Generation.Image.Input
-) {
-  return new Promise<Generation.Image | void>((resolve) => {
-    const id = image.id;
-    const blob = image.blob;
-    if (!blob || !id) return resolve();
-
-    // crop image to box size
-    const croppedCanvas = document.createElement("canvas");
-    croppedCanvas.width = input.width;
-    croppedCanvas.height = input.height;
-
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    const croppedCtx = croppedCanvas.getContext("2d")!;
-
-    const img = new window.Image();
-    img.src = URL.createObjectURL(blob);
-    img.onload = () => {
-      croppedCtx.drawImage(
-        img,
-        0,
-        0,
-        input.width,
-        input.height,
-        0,
-        0,
-        input.width,
-        input.height
-      );
-
-      croppedCanvas.toBlob((blob) => {
-        if (blob) {
-          const objectURL = URL.createObjectURL(blob);
-          resolve({
-            id,
-            inputID: input.id,
-            created: new Date(),
-            src: objectURL,
-            finishReason: 0,
-          });
-        }
-      });
-    };
-  });
-}

packages/stablestudio-ui/src/Generation/Image/Output/index.tsx

@@ -63,6 +63,7 @@ export function Output({ outputID, placeholder, divider }: Props) {
         key={keys("image", images.length, images.length - index)}
         placeholder={placeholder}
         image={image}
+        outputID={output?.id}
         progress={output?.progress}
         scale={1}
         example={

packages/stablestudio-ui/src/Generation/Image/SpecialEffects/index.tsx

@@ -12,6 +12,7 @@ export function SpecialEffects({
   example,
   onClick,
   input,
+  output,
   progress,
 }: {
   showing?: boolean;
@@ -23,10 +24,26 @@ export function SpecialEffects({
   };
   onClick?: () => void;
   input?: ID;
+  output?: ID;
   border?: boolean;
   progress?: number;
 }) {
   if (!showing) return null;
+  const [starting] = useState(
+    output ? Generation.Image.Output.get(output).requestedAt : undefined
+  );
+  const [eta, setETA] = useState<number | undefined>();
+
+  useEffect(() => {
+    if (!loading) return;
+    if (typeof progress !== "number") return;
+    if (!starting) return;
+
+    const seconds = (Date.now() - starting.getTime()) / 1000;
+    const eta = seconds / progress - seconds;
+    setETA(eta);
+  }, [loading, progress, starting]);
+
   return (
     <div
       className={classes(
@@ -80,37 +97,46 @@ export function SpecialEffects({
       <div className="absolute flex h-full w-full items-center justify-center">
         {loading &&
           (typeof progress === "number" ? (
-            <div
-              className={classes(
-                variant === "small" ? "h-1/2 w-1/2" : "h-10 w-10"
-              )}
-            >
-              <CircularProgressbar
-                value={progress}
-                maxValue={1}
-                styles={{
-                  // Customize the path, i.e. the "completed progress"
-                  path: {
-                    // Path color
-                    stroke: "#ffffff",
-                    // Whether to use rounded or flat corners on the ends - can use 'butt' or 'round'
-                    strokeLinecap: "butt",
-                    // Customize transition animation
-                    transition: "stroke-dashoffset 0.5s ease 0s",
-                    transformOrigin: "center center",
-                    strokeWidth: 8,
-                  },
-                  // Customize the circle behind the path, i.e. the "total progress"
-                  trail: {
-                    // Trail color
-                    stroke: "#4c4c4d",
-                    // Whether to use rounded or flat corners on the ends - can use 'butt' or 'round'
-                    strokeLinecap: "butt",
-                    transformOrigin: "center center",
-                    strokeWidth: 8,
-                  },
-                }}
-              />
+            <div className="relative flex flex-col items-center justify-center gap-1">
+              <div
+                className={classes(
+                  variant === "small" ? "h-1/2 w-1/2" : "h-10 w-10"
+                )}
+              >
+                <CircularProgressbar
+                  value={progress}
+                  maxValue={1}
+                  styles={{
+                    // Customize the path, i.e. the "completed progress"
+                    path: {
+                      // Path color
+                      stroke: "#ffffff",
+                      // Whether to use rounded or flat corners on the ends - can use 'butt' or 'round'
+                      strokeLinecap: "butt",
+                      // Customize transition animation
+                      transition: "stroke-dashoffset 0.5s ease 0s",
+                      transformOrigin: "center center",
+                      strokeWidth: 8,
+                    },
+                    // Customize the circle behind the path, i.e. the "total progress"
+                    trail: {
+                      // Trail color
+                      stroke: "#4c4c4d",
+                      // Whether to use rounded or flat corners on the ends - can use 'butt' or 'round'
+                      strokeLinecap: "butt",
+                      transformOrigin: "center center",
+                      strokeWidth: 8,
+                    },
+                  }}
+                />
+              </div>
+              <p className="absolute top-full mt-1">
+                {(eta ?? 0) > 0 && (
+                  <span className="text-sm text-white">
+                    {Math.round(eta ?? 0)}s
+                  </span>
+                )}
+              </p>
             </div>
           ) : (
             <Theme.Loading.Spinner

packages/stablestudio-ui/src/Generation/Image/index.tsx

@@ -42,6 +42,7 @@ type Props = Styleable &
     hideControls?: boolean;
     placeholder?: boolean;
     progress?: number;
+    outputID?: ID;
 
     onClick?: () => void;
     onDelete?: () => void;
@@ -53,6 +54,7 @@ export function Image({
   hideControls,
   placeholder,
   progress,
+  outputID,
 
   scale,
   preserveAspectRatio,
@@ -158,6 +160,7 @@ export function Image({
         showing={shouldShowSpecialEffects}
         loading={!placeholder && shouldShowSpecialEffects}
         progress={progress}
+        output={outputID}
         variant={(style.height ?? 512) < 48 ? "small" : undefined}
         // example={example}
         // onClick={example ? onTryTemplate : undefined}