From de3de6315b2cfc7faa58d5478323190d6383e271 Mon Sep 17 00:00:00 2001 From: BFlat Date: Wed, 29 May 2024 05:34:15 +0700 Subject: [PATCH] stylize tab lipsync toggle (#435) - added lipsync toggle to stylized tab - use_lipsync boolean api (might need to remove enable_lipsync?) - styling updates ![image](https://github.com/storytold/GottaGoFast/assets/46063141/c6eca3ab-2550-4c6f-84c8-aa4c63e2df24) --- app/components/PremiumLock/PremiumLock.tsx | 13 +++++- app/pages/PageEnigma/Editor/api_manager.ts | 2 + app/pages/PageEnigma/Editor/editor.ts | 1 + .../PageEnigma/Editor/video_generation.ts | 1 + .../StylizeTab/GenerateMovieButton.tsx | 2 + .../itemTabs/StylizeTab/StyleButtons.tsx | 46 +++++++++++++++---- .../PageEnigma/models/generationOptions.ts | 34 ++++++++------ app/pages/PageEnigma/signals/stylizeTab.ts | 1 + 8 files changed, 76 insertions(+), 24 deletions(-) diff --git a/app/components/PremiumLock/PremiumLock.tsx b/app/components/PremiumLock/PremiumLock.tsx index 350cbdfc0f..22b8e1d15f 100644 --- a/app/components/PremiumLock/PremiumLock.tsx +++ b/app/components/PremiumLock/PremiumLock.tsx @@ -2,11 +2,13 @@ import { Link } from "react-router-dom"; import React from "react"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faLock } from "@fortawesome/pro-solid-svg-icons"; +import { twMerge } from "tailwind-merge"; interface PremiumLockProps { requiredPlan?: "any" | "plus" | "pro" | "elite"; children: React.ReactNode; plural?: boolean; // if the message should be plural for multiple features + className?: string; } // replace with api to check @@ -21,6 +23,7 @@ export default function PremiumLock({ requiredPlan = "plus", plural = false, children, + className, }: PremiumLockProps) { const getPlanMessage = (plan: string) => { switch (plan) { @@ -64,7 +67,12 @@ export default function PremiumLock({ {hasAccess() ? ( children ) : ( -
+
{children}
@@ -78,7 +86,8 @@ export default function PremiumLock({ : "This feature requires "} + className="text-brand-primary brightness-125 transition-all hover:brightness-150" + > {getPlanMessage(requiredPlan)} diff --git a/app/pages/PageEnigma/Editor/api_manager.ts b/app/pages/PageEnigma/Editor/api_manager.ts index 61687dbc16..c2ad93875a 100644 --- a/app/pages/PageEnigma/Editor/api_manager.ts +++ b/app/pages/PageEnigma/Editor/api_manager.ts @@ -376,6 +376,7 @@ export class APIManager { use_face_detailer: boolean = false, use_upscaler: boolean = false, use_strength: number = 1.0, + use_lipsync: boolean = false, ) { const uuid = uuidv4(); @@ -392,6 +393,7 @@ export class APIManager { use_face_detailer: use_face_detailer, use_upscaler: use_upscaler, use_strength: use_strength, + use_lipsync: use_lipsync, }; const json_data = JSON.stringify(data); diff --git a/app/pages/PageEnigma/Editor/editor.ts b/app/pages/PageEnigma/Editor/editor.ts index 5c37fad2b9..d21baa0c45 100644 --- a/app/pages/PageEnigma/Editor/editor.ts +++ b/app/pages/PageEnigma/Editor/editor.ts @@ -227,6 +227,7 @@ class Editor { faceDetail: false, upscale: false, styleStrength: 1.0, + lipSync: false, }; } diff --git a/app/pages/PageEnigma/Editor/video_generation.ts b/app/pages/PageEnigma/Editor/video_generation.ts index 01f31e56e2..cd48e6bd32 100644 --- a/app/pages/PageEnigma/Editor/video_generation.ts +++ b/app/pages/PageEnigma/Editor/video_generation.ts @@ -272,6 +272,7 @@ export class VideoGeneration { this.editor.generation_options.faceDetail, this.editor.generation_options.upscale, this.editor.generation_options.styleStrength, + this.editor.generation_options.lipSync, ) .catch((error) => { // TODO handle stylize error. diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/StylizeTab/GenerateMovieButton.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/StylizeTab/GenerateMovieButton.tsx index 1c545a9e8c..2866cf6311 100644 --- a/app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/StylizeTab/GenerateMovieButton.tsx +++ b/app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/StylizeTab/GenerateMovieButton.tsx @@ -9,6 +9,7 @@ import { upscale, faceDetail, styleStrength, + lipSync, } from "~/pages/PageEnigma/signals/stylizeTab"; import { useEffect, useRef } from "react"; @@ -53,6 +54,7 @@ export function GenerateMovieButton({ upscale.value, faceDetail.value, styleStrength.value, + lipSync.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 f6da18e046..53b10040c4 100644 --- a/app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/StylizeTab/StyleButtons.tsx +++ b/app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/StylizeTab/StyleButtons.tsx @@ -15,6 +15,7 @@ import { faceDetail, styleStrength, upscale, + lipSync, } from "~/pages/PageEnigma/signals/stylizeTab"; export function StyleButtons() { @@ -98,11 +99,36 @@ export function StyleButtons() {
- +
+
+ + + Use Lip Sync + + (lipSync.value = !lipSync.value)} + className={`${ + lipSync.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 (upscale.value = !upscale.value)} className={`${ upscale.value - ? "bg-brand-primary" + ? "bg-brand-primary hover:bg-brand-primary-400" : "bg-gray-500 hover:bg-gray-400" } relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-0 focus:ring-offset-0`} > @@ -121,16 +147,17 @@ export function StyleButtons() { />
-
- - Face Detail +
+
+ + Face Detailer (faceDetail.value = !faceDetail.value)} className={`${ faceDetail.value - ? "bg-brand-primary" + ? "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`} > @@ -141,6 +168,7 @@ export function StyleButtons() { />
+
diff --git a/app/pages/PageEnigma/models/generationOptions.ts b/app/pages/PageEnigma/models/generationOptions.ts index ddaa2b46ef..6d38012e28 100644 --- a/app/pages/PageEnigma/models/generationOptions.ts +++ b/app/pages/PageEnigma/models/generationOptions.ts @@ -1,17 +1,25 @@ export interface GenerationOptions { - upscale: boolean; - faceDetail: boolean; - styleStrength: number; + upscale: boolean; + faceDetail: boolean; + styleStrength: number; + lipSync: boolean; } export class GenerationOptions { - public upscale: boolean; - public faceDetail: boolean; - public styleStrength: number; - - constructor(upscale: boolean, faceDetail: boolean, styleStrength: number) { - this.upscale = upscale; - this.faceDetail = faceDetail; - this.styleStrength = styleStrength; - } -} \ No newline at end of file + public upscale: boolean; + public faceDetail: boolean; + public styleStrength: number; + public lipSync: boolean; + + constructor( + upscale: boolean, + faceDetail: boolean, + styleStrength: number, + lipSync: boolean, + ) { + this.upscale = upscale; + this.faceDetail = faceDetail; + this.styleStrength = styleStrength; + this.lipSync = lipSync; + } +} diff --git a/app/pages/PageEnigma/signals/stylizeTab.ts b/app/pages/PageEnigma/signals/stylizeTab.ts index 072b612361..fe0a4e6d55 100644 --- a/app/pages/PageEnigma/signals/stylizeTab.ts +++ b/app/pages/PageEnigma/signals/stylizeTab.ts @@ -11,3 +11,4 @@ export const promptsStore = { export const upscale = signal(false); export const faceDetail = signal(false); export const styleStrength = signal(1.0); +export const lipSync = signal(false);