use cinematic toggle (#453)

app/pages/PageEnigma/Editor/api_manager.ts

@@ -377,6 +377,7 @@ export class APIManager {
     use_upscaler: boolean = false,
     use_strength: number = 1.0,
     use_lipsync: boolean = false,
+    use_cinematic: boolean = false,
   ) {
     const uuid = uuidv4();
 
@@ -394,6 +395,7 @@ export class APIManager {
       use_upscaler: use_upscaler,
       use_strength: use_strength,
       use_lipsync: use_lipsync,
+      use_cinematic: use_cinematic,
     };
 
     const json_data = JSON.stringify(data);

app/pages/PageEnigma/Editor/editor.ts

@@ -236,6 +236,7 @@ class Editor {
       upscale: false,
       styleStrength: 1.0,
       lipSync: false,
+      cinematic: false,
     };
   }
   getRenderDimensions() {

app/pages/PageEnigma/Editor/video_generation.ts

@@ -40,13 +40,17 @@ export class VideoGeneration {
         this.editor.render_width,
         this.editor.render_height,
       );
+
       this.editor.render_camera.aspect =
         this.editor.render_width / this.editor.render_height;
+
       this.editor.render_camera.updateProjectionMatrix();
+
       this.editor.rawRenderer.render(
         this.editor.activeScene.scene,
         this.editor.render_camera,
       );
+
       const imgData = this.editor.rawRenderer.domElement.toDataURL();
       const response = await fetch(imgData); // Fetch the data URL
       const blob = await response.blob(); // Convert to Blob
@@ -273,11 +277,14 @@ export class VideoGeneration {
         this.editor.generation_options.upscale,
         this.editor.generation_options.styleStrength,
         this.editor.generation_options.lipSync,
+        this.editor.generation_options.cinematic,
       )
       .catch((error) => {
         // TODO handle stylize error.
         console.log(error);
       });
+    // Not sure if this is needed will double check TODO: MC
+    //this.editor.generating_preview = false;
 
     // {"success":true,"inference_job_token":"jinf_j3nbqbd15wqxb0xcks13qh3f3bz"}
     this.editor.updateLoad(100, "Done Check Your Media Tab On Profile.");

app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/StylizeTab/GenerateMovieButton.tsx

@@ -10,6 +10,7 @@ import {
   faceDetail,
   styleStrength,
   lipSync,
+  cinematic,
 } from "~/pages/PageEnigma/signals/stylizeTab";
 import { useEffect, useRef } from "react";
 
@@ -55,6 +56,7 @@ export function GenerateMovieButton({
       faceDetail.value,
       styleStrength.value,
       lipSync.value,
+      cinematic.value,
     );
     Queue.publish({
       queueName: QueueNames.TO_ENGINE,

app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/StylizeTab/StyleButtons.tsx

@@ -16,6 +16,7 @@ import {
   styleStrength,
   upscale,
   lipSync,
+  cinematic,
 } from "~/pages/PageEnigma/signals/stylizeTab";
 
 export function StyleButtons() {
@@ -122,12 +123,35 @@ export function StyleButtons() {
                 </Switch>
               </Switch.Group>
             </div>
+            <hr className="opacity-[5%]" />
+            <div className="flex items-center py-[6px]">
+              <Switch.Group>
+                <Switch.Label className="mr-3 grow text-sm font-medium">
+                  Use Cinematic
+                </Switch.Label>
+                <Switch
+                  checked={cinematic.value}
+                  onChange={() => (cinematic.value = !cinematic.value)}
+                  className={`${
+                    cinematic.value
+                      ? "bg-brand-primary hover:bg-brand-primary-400"
+                      : "bg-gray-500 hover:bg-gray-400"
+                  } focus:ring-indigo-500 relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-0 focus:ring-offset-0`}
+                >
+                  <span
+                    className={`${
+                      cinematic.value ? "translate-x-6" : "translate-x-1"
+                    } inline-block h-4 w-4 transform rounded-full bg-white transition-transform`}
+                  />
+                </Switch>
+              </Switch.Group>
+            </div>
           </div>
           <PremiumLock requiredPlan="any" plural={true} className="mt-2">
-            <Switch.Group>
-              <div className="flex flex-col gap-[6px]">
-                <hr className="opacity-[5%]" />
-                <div className="flex w-full items-center">
+            <div className="flex flex-col gap-[6px]">
+              <hr className="opacity-[5%]" />
+              <div className="flex w-full items-center">
+                <Switch.Group>
                   <Switch.Label className="mr-3 grow text-sm font-medium">
                     Upscale
                   </Switch.Label>
@@ -146,9 +170,11 @@ export function StyleButtons() {
                       } inline-block h-4 w-4 transform rounded-full bg-white transition-transform`}
                     />
                   </Switch>
-                </div>
-                <hr className="opacity-[5%]" />
-                <div className="flex w-full items-center">
+                </Switch.Group>
+              </div>
+              <hr className="opacity-[5%]" />
+              <div className="flex w-full items-center">
+                <Switch.Group>
                   <Switch.Label className="mr-3 grow text-sm font-medium">
                     Face Detailer
                   </Switch.Label>
@@ -167,10 +193,10 @@ export function StyleButtons() {
                       } inline-block h-4 w-4 transform rounded-full bg-white transition-transform`}
                     />
                   </Switch>
-                </div>
-                <hr className="opacity-[5%]" />
+                </Switch.Group>
               </div>
-            </Switch.Group>
+              <hr className="opacity-[5%]" />
+            </div>
           </PremiumLock>
         </div>
 

app/pages/PageEnigma/models/generationOptions.ts

@@ -3,6 +3,7 @@ export interface GenerationOptions {
   faceDetail: boolean;
   styleStrength: number;
   lipSync: boolean;
+  cinematic: boolean;
 }
 
 export class GenerationOptions {
@@ -10,16 +11,19 @@ export class GenerationOptions {
   public faceDetail: boolean;
   public styleStrength: number;
   public lipSync: boolean;
+  public cinematic: boolean;
 
   constructor(
     upscale: boolean,
     faceDetail: boolean,
     styleStrength: number,
     lipSync: boolean,
+    cinematic: boolean,
   ) {
     this.upscale = upscale;
     this.faceDetail = faceDetail;
     this.styleStrength = styleStrength;
     this.lipSync = lipSync;
+    this.cinematic = cinematic;
   }
 }

app/pages/PageEnigma/signals/stylizeTab.ts

@@ -12,3 +12,4 @@ export const upscale = signal(false);
 export const faceDetail = signal(false);
 export const styleStrength = signal(1.0);
 export const lipSync = signal(false);
+export const cinematic = signal(false);