new Added stylization preview and fixed Story Girl.

app/pages/PageEnigma/PageStyling.tsx

@@ -8,6 +8,8 @@ import { TimerGrid } from "~/pages/PageEnigma/comps/TimerGrid/TimerGrid";
 import { Scrubber } from "~/pages/PageEnigma/comps/Timeline/Scrubber";
 import { PreviewImages } from "~/pages/PageEnigma/comps/PreviewImages";
 import { TopBar } from "~/modules/TopBar";
+import { useContext } from "react";
+import { EngineContext } from "~/contexts/EngineContext";
 
 interface Props {
   setPage: (page: string) => void;
@@ -15,6 +17,15 @@ interface Props {
 
 export const PageStyling = ({ setPage }: Props) => {
   useSignals();
+  const editorEngine = useContext(EngineContext);
+
+  const generateFrame = async () => {
+    await editorEngine?.generateFrame();
+  };
+
+  const generateMovie = async () => {
+    await editorEngine?.generateVideo();
+  };
 
   return (
     <div className="w-screen">
@@ -34,10 +45,10 @@ export const PageStyling = ({ setPage }: Props) => {
       <div className="fixed bottom-0 left-0 w-full">
         <div className="flex h-[62px] w-full items-center justify-center gap-5 bg-ui-panel">
           <div>
-            <Button variant="action">Update Preview</Button>
+            <Button variant="action" onClick={generateFrame}>Update Preview</Button>
           </div>
           <div>
-            <Button variant="primary">Generate Movie</Button>
+            <Button variant="primary" onClick={generateMovie}>Generate Movie</Button>
           </div>
         </div>
         <div className="relative flex h-[80px] w-full gap-5 border-t border-t-action-600 bg-ui-panel">

app/pages/PageEnigma/comps/PreviewImages.tsx

@@ -29,7 +29,7 @@ export const PreviewImages = () => {
           style={{ height: imageHeight }}
         >
           <canvas
-            id="preview-cancvas"
+            id="raw-preview"
             width={imageWidth}
             height={imageHeight}
           />
@@ -44,7 +44,7 @@ export const PreviewImages = () => {
           className="block w-full rounded-b-lg"
           style={{ height: imageHeight }}
         >
-          <canvas id="styled-cancvas" width={imageWidth} height={imageHeight} />
+          <img id="styled-preview" width={imageWidth} height={imageHeight} />
         </div>
       </div>
     </div>

app/pages/PageEnigma/js/api_manager.ts

@@ -348,7 +348,7 @@ export class APIManager {
     positive_prompt: string,
     negative_prompt: string,
   ): Promise<string> {
-    const url = `https://funnel.tailce84f.ts.net/preview/`;
+    const url = 'http://207.189.112.61:31605/preview';
 
     const payload = {
       style: style,
@@ -357,7 +357,7 @@ export class APIManager {
     };
 
     const formData = new FormData();
-    formData.append("video", blob, fileName);
+    formData.append("input_file", blob, fileName);
     formData.append("request", JSON.stringify(payload));
 
     const response = await fetch(url, {

app/pages/PageEnigma/js/editor.ts

@@ -90,6 +90,8 @@ class Editor {
   current_scene_glb_media_token: string | null;
 
   can_initialize: boolean;
+  switchPreviewToggle: boolean;
+
   dispatchAppUiState: any; // todo figure out the type
   render_width: number;
   render_height: number;
@@ -150,6 +152,7 @@ class Editor {
     this.last_selected;
     this.transform_interaction;
     this.rendering = false;
+    this.switchPreviewToggle = false;
     // API.
     this.api_manager = new APIManager();
     // Debug & Movement.
@@ -366,7 +369,7 @@ class Editor {
     console.log(result);
   }
 
-  public async testTestTimelineEvents() {}
+  public async testTestTimelineEvents() { }
 
   public async loadScene(scene_media_token: string) {
     this.dispatchAppUiState({
@@ -679,8 +682,6 @@ class Editor {
       if (this.timeline.is_playing == false) {
         this.stopPlayback();
         this.playback_location = 0;
-        this.rendering = false;
-        this.switchCameraView();
         this.onWindowResize();
       }
     }
@@ -805,10 +806,10 @@ class Editor {
       audioSegment,
       "-filter_complex",
       "[1:a]adelay=" +
-        startTime * 1000 +
-        "|" +
-        startTime * 1000 +
-        "[a1];[0:a][a1]amix=inputs=2[a]",
+      startTime * 1000 +
+      "|" +
+      startTime * 1000 +
+      "[a1];[0:a][a1]amix=inputs=2[a]",
       "-map",
       "[a]",
       `${itteration}final_tmp.wav`,
@@ -834,9 +835,6 @@ class Editor {
   }
 
   async stopPlayback(compile_audio: boolean = true) {
-    console.log(this.frames, this.frame_buffer.length);
-
-    this.renderMode();
 
     if (this.generating_preview) {
       return;
@@ -922,6 +920,13 @@ class Editor {
     console.log(result);
   }
 
+  switchPreview() {
+    if(this.switchPreviewToggle == false) {
+      this.switchPreviewToggle = true;
+      this.generateFrame();
+    }
+  }
+
   async generateFrame() {
     if (this.renderer && !this.generating_preview) {
       this.removeTransformControls();
@@ -944,47 +949,48 @@ class Editor {
       this.activeScene.renderMode(false);
       this.onWindowResize();
 
-      const rawPreview: HTMLVideoElement | null = document.getElementById(
-        "raw-preview",
-      ) as HTMLVideoElement;
-      if (rawPreview) {
-        rawPreview.src = imgData;
-
-        const ffmpeg = createFFmpeg({ log: false });
-        await ffmpeg.load();
-        await ffmpeg.FS("writeFile", `render.png`, await fetchFile(imgData));
-        await ffmpeg.run("-i", `render.png`, "render.mp4");
-        const output = await ffmpeg.FS("readFile", "render.mp4");
-        const blob = new Blob([output.buffer], { type: "video/mp4" });
-
-        const url = await this.api_manager.uploadMediaFrameGeneration(
-          blob,
-          "render.mp4",
-          this.art_style,
-          this.positive_prompt,
-          this.negative_prompt,
-        );
-        console.log(url);
-
-        const stylePreview: HTMLVideoElement | null = document.getElementById(
-          "stylized-preview",
-        ) as HTMLVideoElement;
-        if (stylePreview) {
-          stylePreview.src = url;
-          stylePreview.width = rawPreview.width;
-          stylePreview.height = rawPreview.height;
-        } else {
-          console.log("No style preview window.");
-        }
-
-        this.generating_preview = false;
-
-        return new Promise((resolve, reject) => {
-          resolve(url);
-        });
-      } else {
-        console.log("No raw preview window.");
+      this.canvasRenderCamReference = document.getElementById("raw-preview");
+      this.rawRenderer = new THREE.WebGLRenderer({
+        antialias: false,
+        canvas: this.canvasRenderCamReference,
+        preserveDrawingBuffer: true,
+      });
+      if (this.camera_person_mode == false) {
+        this.switchCameraView();
       }
+      this.activeScene.renderMode(true);
+
+      const ffmpeg = createFFmpeg({ log: false });
+      await ffmpeg.load();
+      await ffmpeg.FS("writeFile", `render.png`, await fetchFile(imgData));
+      await ffmpeg.run("-i", `render.png`, "render.mp4");
+      const output = await ffmpeg.FS("readFile", "render.mp4");
+      const blob = new Blob([output.buffer], { type: "video/mp4" });
+
+      const url = await this.api_manager.uploadMediaFrameGeneration(
+        blob,
+        "render.mp4",
+        this.art_style,
+        this.positive_prompt,
+        this.negative_prompt,
+      );
+      console.log(url);
+
+      const stylePreview: HTMLVideoElement | null = document.getElementById(
+        "styled-preview",
+      ) as HTMLVideoElement;
+      if (stylePreview) {
+        stylePreview.src = url;
+      } else {
+        console.log("No style preview window.");
+      }
+
+      this.generating_preview = false;
+
+      return new Promise((resolve, reject) => {
+        resolve(url);
+      });
+
       this.generating_preview = false;
     }
   }

app/pages/PageEnigma/js/timeline.ts

@@ -402,6 +402,7 @@ export class TimeLine {
   public async deletePlayableClip(clip_uuid: string): Promise<void> {}
 
   public async scrub(data: any): Promise<void> {
+    console.log('Scrubby Scrubby');
     if (this.is_playing) {
       return;
     }

app/pages/PageEnigma/store/media.ts

@@ -514,7 +514,7 @@ export const characterItems = signal<MediaItem[]>([
   },
   {
     version: 1,
-    media_id: "m_4wva09qznapzk5rcvbxy671d1qx2pr ",
+    media_id: "m_pwtk45wsfr5z2bavmwxh2efnwvh4rr ",
     type: AssetType.CHARACTER,
     name: "Story Girl",
     thumbnail: "resources/characters/img13.png",