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

@@ -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
       ) : (
-        <div className="relative overflow-hidden rounded-lg bg-ui-controls px-3">
+        <div
+          className={twMerge(
+            "relative overflow-hidden rounded-lg bg-ui-controls px-3",
+            className,
+          )}
+        >
           <div className="pointer-events-none pb-3 pt-10">{children}</div>
 
           <div className="absolute left-0 top-0 z-10 flex h-full w-full rounded-lg border border-brand-primary/40 bg-brand-secondary/60 pl-3 text-white/90">
@@ -78,7 +86,8 @@ export default function PremiumLock({
                     : "This feature requires "}
                   <Link
                     to="/pricing"
-                    className="text-brand-primary brightness-125 transition-all hover:brightness-150">
+                    className="text-brand-primary brightness-125 transition-all hover:brightness-150"
+                  >
                     {getPlanMessage(requiredPlan)}
                   </Link>
                 </span>

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);

app/pages/PageEnigma/Editor/editor.ts

@@ -227,6 +227,7 @@ class Editor {
       faceDetail: false,
       upscale: false,
       styleStrength: 1.0,
+      lipSync: false,
     };
   }
 

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.

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,

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() {
         </div>
 
         <div className="mb-4 mt-4">
-          <PremiumLock requiredPlan="any" plural={true}>
+          <div>
+            <div className="flex items-center py-[6px]">
+              <Switch.Group>
+                <Switch.Label className="mr-3 grow text-sm font-medium">
+                  Use Lip Sync
+                </Switch.Label>
+                <Switch
+                  checked={lipSync.value}
+                  onChange={() => (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`}
+                >
+                  <span
+                    className={`${
+                      lipSync.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 gap-6">
-                <div className="flex items-center">
-                  <Switch.Label className="mr-3 text-sm font-medium">
+              <div className="flex flex-col gap-[6px]">
+                <hr className="opacity-[5%]" />
+                <div className="flex w-full items-center">
+                  <Switch.Label className="mr-3 grow text-sm font-medium">
                     Upscale
                   </Switch.Label>
                   <Switch
@@ -110,7 +136,7 @@ export function StyleButtons() {
                     onChange={() => (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() {
                     />
                   </Switch>
                 </div>
-                <div className="flex items-center">
-                  <Switch.Label className="mr-3 text-sm font-medium">
-                    Face Detail
+                <hr className="opacity-[5%]" />
+                <div className="flex w-full items-center">
+                  <Switch.Label className="mr-3 grow text-sm font-medium">
+                    Face Detailer
                   </Switch.Label>
                   <Switch
                     checked={faceDetail.value}
                     onChange={() => (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() {
                     />
                   </Switch>
                 </div>
+                <hr className="opacity-[5%]" />
               </div>
             </Switch.Group>
           </PremiumLock>

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;
-    }
-}
+  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;
+  }
+}

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);