diff --git a/app/pages/PageEnigma/Editor/api_manager.ts b/app/pages/PageEnigma/Editor/api_manager.ts index c2ad93875a..7a372d71c1 100644 --- a/app/pages/PageEnigma/Editor/api_manager.ts +++ b/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); diff --git a/app/pages/PageEnigma/Editor/editor.ts b/app/pages/PageEnigma/Editor/editor.ts index f763d109a6..59bbc3261f 100644 --- a/app/pages/PageEnigma/Editor/editor.ts +++ b/app/pages/PageEnigma/Editor/editor.ts @@ -236,6 +236,7 @@ class Editor { upscale: false, styleStrength: 1.0, lipSync: false, + cinematic: false, }; } getRenderDimensions() { diff --git a/app/pages/PageEnigma/Editor/video_generation.ts b/app/pages/PageEnigma/Editor/video_generation.ts index d6222f6a26..61241ceb7c 100644 --- a/app/pages/PageEnigma/Editor/video_generation.ts +++ b/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."); diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/StylizeTab/GenerateMovieButton.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/StylizeTab/GenerateMovieButton.tsx index 2866cf6311..650dd79808 100644 --- a/app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/StylizeTab/GenerateMovieButton.tsx +++ b/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, diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/StylizeTab/StyleButtons.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/StylizeTab/StyleButtons.tsx index 3a3304bdd9..d9fa40291a 100644 --- a/app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/StylizeTab/StyleButtons.tsx +++ b/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() { +
+
+ + + Use Cinematic + + (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`} + > + + + +
- -
-
-
+
+
+
+ Upscale @@ -146,9 +170,11 @@ export function StyleButtons() { } inline-block h-4 w-4 transform rounded-full bg-white transition-transform`} /> -
-
-
+ +
+
+
+ Face Detailer @@ -167,10 +193,10 @@ export function StyleButtons() { } inline-block h-4 w-4 transform rounded-full bg-white transition-transform`} /> -
-
+
- +
+
diff --git a/app/pages/PageEnigma/models/generationOptions.ts b/app/pages/PageEnigma/models/generationOptions.ts index 6d38012e28..1314497ae0 100644 --- a/app/pages/PageEnigma/models/generationOptions.ts +++ b/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; } } diff --git a/app/pages/PageEnigma/signals/stylizeTab.ts b/app/pages/PageEnigma/signals/stylizeTab.ts index fe0a4e6d55..4067f747d1 100644 --- a/app/pages/PageEnigma/signals/stylizeTab.ts +++ b/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);