Fix to rendering it now guarentees a render.

src/KonvaApp/RenderingPrimitives/RenderEngine.ts

@@ -363,7 +363,6 @@ export class RenderEngine {
     }
 
     // only pick nodes that intersect with the canvas on screen bounds to freeze.
-
     for (let j = 0; j < largestNumberOfFrames; j++) {
       // Seek Video Nodes first then draw
       let frameTime = undefined;
@@ -444,24 +443,42 @@ export class RenderEngine {
           prompt: renderingOptions,
         };
 
-        let isDoneStreaming = false;
+        // let isDoneStreaming = false;
 
         console.log(`Processing Frame:${j} out of ${largestNumberOfFrames}`);
 
-        if (j == Math.floor(largestNumberOfFrames)) {
-          isDoneStreaming = true;
-        }
+        // if (j == Math.floor(largestNumberOfFrames)) {
+        //   isDoneStreaming = true;
+        // }
 
-        console.log(isDoneStreaming);
+        //console.log(isDoneStreaming);
 
-        this.diffusionWorker.sendData(1, data, isDoneStreaming);
+        this.diffusionWorker.sendData(1, data, false);
 
-        // To ensure there is no lingering frames.
-        if (isDoneStreaming) {
-          console.log("Done streaming");
-          break;
-        }
+        // // To ensure there is no lingering frames.
+        // if (isDoneStreaming) {
+        //   console.log("Done streaming");
+        //   break;
+        // }
       }
+    } // end of largest number of frames loop
+
+    // finished looping
+    if (!this.diffusionWorker) {
+      console.log("Didn't Initialize Diffusion");
+      return;
     }
+    this.diffusionWorker.sendData(
+      1,
+      {
+        height: this.height,
+        width: this.width,
+        imageBitmap: undefined,
+        frame: -1,
+        totalFrames: largestNumberOfFrames,
+        prompt: renderingOptions,
+      },
+      true,
+    );
   }
 }

src/KonvaApp/RenderingPrimitives/note.txt

@@ -0,0 +1,18 @@
+   const dataURL = this.videoLayer.toDataURL({
+          x: this.captureCanvas.x(),
+          y: this.captureCanvas.y(),
+          width: this.captureCanvas.width(),
+          height: this.captureCanvas.height(),
+        });
+        
+
+        // Create an image element to display the captured area
+        const img = new Image();
+        img.src = dataURL;
+        document.body.appendChild(img); // Append the image to the body or any other container
+
+        // Optionally, you can download the captured image
+        const link = document.createElement("a");
+        link.href = dataURL;
+        link.download = "snapshot.png";
+        link.click();

src/KonvaApp/SharedWorkers/Diffusion/DiffusionSharedWorker.ts

@@ -27,7 +27,7 @@ export interface DiffusionSharedWorkerProgressData {
 }
 
 export interface DiffusionSharedWorkerItemData {
-  imageBitmap: ImageBitmap;
+  imageBitmap: ImageBitmap | undefined;
   totalFrames: number;
   frame: number;
   height: number;
@@ -74,6 +74,8 @@ export class DiffusionSharedWorker extends SharedWorkerBase<
     this.mediaAPI = new MediaUploadApi();
 
     this.blobs = [];
+
+    this.totalFrames = 0;
   }
 
   async zipBlobs(): Promise<Blob> {
@@ -102,6 +104,8 @@ export class DiffusionSharedWorker extends SharedWorkerBase<
     // make request via api with options
 
     try {
+      this.totalFrames = item.totalFrames;
+
       if (this.offscreenCanvas === undefined) {
         this.offscreenCanvas = new OffscreenCanvas(item.width, item.height);
         this.bitmapContext = this.offscreenCanvas.getContext("bitmaprenderer");
@@ -112,18 +116,21 @@ export class DiffusionSharedWorker extends SharedWorkerBase<
         throw Error("Bitmap Rendering Context Not Availible.");
       }
 
-      this.bitmapContext.transferFromImageBitmap(item.imageBitmap);
+      if (item.imageBitmap !== undefined) {
+        this.bitmapContext.transferFromImageBitmap(item.imageBitmap);
 
-      const blob = await this.offscreenCanvas.convertToBlob({
-        quality: 1.0,
-        type: this.imageType,
-      });
+        const blob = await this.offscreenCanvas.convertToBlob({
+          quality: 1.0,
+          type: this.imageType,
+        });
+
+        this.blobs.push(blob);
+        console.log("Length of blob");
+        console.log(this.blobs.length);
+      }
 
-      this.blobs.push(blob);
-      console.log("Length of blob");
-      console.log(this.blobs.length);
       // progress
-      const aproxSteps = item.totalFrames;
+      const aproxSteps = this.totalFrames;
       const totalPercent = 100.0;
 
       const progressData: DiffusionSharedWorkerProgressData = {

src/KonvaApp/SharedWorkers/Diffusion/DiffusionSharedWorkerClient.ts

@@ -91,7 +91,7 @@ export class DiffusionSharedWorkerClient<
 
   async sendData(
     jobID: number,
-    data: DiffusionSharedWorkerItemData,
+    data: DiffusionSharedWorkerItemData | undefined,
     isDoneStreaming: boolean,
   ) {
     const payload: SharedWorkerRequest<DiffusionSharedWorkerItemData> = {