presert buttons

packages/components/src/api/video_styleTransfer/EnqueueVideoStyleTransfer.tsx

@@ -22,6 +22,7 @@ export interface EnqueueVideoStyleTransferRequest {
     "$.1398.inputs.Value": number;
     "$.1531.inputs.Value": number;
     
+    "$.1449.inputs.filename_prefix": string;
     // "$.208.inputs.lora_01": string;
     // "$.208.inputs.strength_01": number;
   }

packages/fakeyou.com/src/components/common/Button/Button.tsx

@@ -11,7 +11,7 @@ export default function Button({
   label,
   icon,
   small,
-  variant = "primary",
+  variant: variantProps = "primary",
   to,
   href,
   target = "_self",
@@ -22,8 +22,14 @@ export default function Button({
   download,
   disabled,
   isLoading = false,
+  isActive,
   ...rest
 }: ButtonProps) {
+  let variant = variantProps;
+  if(isActive !== undefined){
+    if(isActive) variant = "primary"
+    else variant = "secondary"
+  }
   let iconMarginClass = !square && label ? (iconFlip ? "ms-2" : "me-2") : "";
   let IconComponent = icon ? (
     <FontAwesomeIcon icon={icon} className={iconMarginClass} />

packages/fakeyou.com/src/components/common/Button/ButtonProps.tsx

@@ -18,4 +18,5 @@ export default interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElem
   download?: boolean | string;
   disabled?: boolean;
   isLoading?: boolean;
+  isActive?: boolean;
 }

packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVSTApp/defaultValues.tsx

@@ -13,7 +13,7 @@ const initialValues = {
 
   //Presents
   // workflowConfig: "weight_f5qh4s1dtp266yv313p09tkpa",
-  workflowConfig: "weight_8y19y1gfe0vfnvawgz2z9w7ms",
+  workflowConfig: "weight_f5qh4s1dtp266yv313p09tkpa",
   sdModelToken: "weight_83xpresyjswy97ppk0fyct146",
   loraModelToken: "weight_13yfxfafv195ejwh3meesebdk",
   loraModelStrength: 1,
@@ -27,9 +27,9 @@ const initialValues = {
   //Control Net
   cnCanny: 0.7,
   cnDepth: 0.7,
-  cnLinearAnime: 0.7,
-  cnLinearRealistic: 0.7,
-  cnLipsStrength: 0.7,
+  cnLineArtAnime: 0.7,
+  cnLineArtRealistic: 0.7,
+  cnLipsStrength: 0,
   cnOpenPose: 0.7,
   cnPipeFace: 0.7,
   cnSparseScribble: 0.7,

packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVSTApp/helpers.tsx

@@ -27,8 +27,8 @@ export type VSTType = {
   //advance
   cnCanny: number;
   cnDepth: number;
-  cnLinearAnime: number;
-  cnLinearRealistic: number;
+  cnLineArtAnime: number;
+  cnLineArtRealistic: number;
   cnLipsStrength: number;
   cnOpenPose: number;
   cnPipeFace: number;
@@ -64,14 +64,16 @@ export function mapRequest(vstValues: VSTType){
 
       "$.800.inputs.Value": vstValues.cnCanny,
       "$.772.inputs.Value": vstValues.cnDepth, 
-      "$.797.inputs.Value": vstValues.cnLinearAnime, 
-      "$.796.inputs.Value": vstValues.cnLinearRealistic,
+      "$.797.inputs.Value": vstValues.cnLineArtAnime, 
+      "$.796.inputs.Value": vstValues.cnLineArtRealistic,
       "$.1636.inputs.Value": vstValues.cnLipsStrength,
       "$.771.inputs.Value": vstValues.cnOpenPose, 
       "$.403.inputs.Value": vstValues.cnSparseScribble, 
       "$.1398.inputs.Value": vstValues.cnSoftEdge,
       "$.1531.inputs.Value": vstValues.cnRegularSteps,
       
+      "$.1449.inputs.filename_prefix": "vid2vid/SparseUpscaleInterp",
+
       // "$.208.inputs.lora_01": vstValues.loraModelToken,
       // "$.208.inputs.strength_01": vstValues.loraModelStrength
     },

packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVSTApp/pageVSTApp.tsx

@@ -99,6 +99,11 @@ export default function PageVSTApp({
     history.push(`${parentPath}/jobs`);
   }
 
+  const handleFakeGen = ()=>{
+    const request = mapRequest(vstValues);
+    console.log(request);
+  }
+
   return(
     <Panel className="mb-4 p-4">
       <div className="row g-3 mb-4">
@@ -118,13 +123,13 @@ export default function PageVSTApp({
               }}
             />
           </div>
-          <div className="col-12 col-md-6">
+          {/* <div className="col-12 col-md-6">
             <Label label={t("image.label.preview")}/>
             {debug && <TableOfKeyValues keyValues={vstValues} height={400}/>}
 
           </div>
       </div>
-      <div className="row g-3  mb-4">
+      <div className="row g-3  mb-4"> */}
         <div className="col-12 col-md-6">
           <TextArea
           {...{
@@ -135,8 +140,8 @@ export default function PageVSTApp({
             required: false,
           }}
           />
-        </div>
-        <div className="col-12 col-md-6">
+        {/* </div>
+        <div className="col-12 col-md-6"> */}
           <TextArea
           {...{
             label: t("input.label.negPrompt"),
@@ -146,10 +151,10 @@ export default function PageVSTApp({
             required: false,
           }}
           />
-        </div>
+        {/* </div>
       </div>
       <div className="row g-3  mb-4">
-        <div className="col-12 col-md-6">
+        <div className="col-12 col-md-6"> */}
           <NumberSliderV2 {...{
             min: 1, max: 60, step: 1,
             initialValue: vstValues.inputFps,
@@ -174,6 +179,11 @@ export default function PageVSTApp({
               variant="primary"
             />
           </NavLink>
+          {/* <Button
+            label="Fake Gen"
+            onClick={handleFakeGen}
+            variant="primary"
+          /> */}
           <Button
             label={t("button.enqueue")}
             onClick={handleGenerate}

packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVSTApp/sectionAdvanceOptions.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useState} from 'react';
 
 import {
   faFaceViewfinder,
@@ -17,23 +17,93 @@ import {
   NumberSliderV2
 } from 'components/common';
 import { VSTType } from './helpers';
+import { 
+  VSTPreset,
+  closeupPreset,
+  halfbodyPreset,
+  fullbodyPreset,
+  landscapePreset,
+  typogPreset,
+  defaultPreset,
+} from './vstPresets';
 
-export default function sectionAdvanceOptions({
+
+export default function SectionAdvanceOptions({
   vstValues: vstVal,
   onChange: handleOnChange
 }:{
   vstValues : VSTType,
   onChange: (val:{[key: string]: number|string|boolean|undefined})=>void
 }){
+
+  const [preset, pickPreset] = useState<VSTPreset>('custom')
+  function handlePreset(newPreset: VSTPreset){
+    switch (newPreset){
+      case 'closeup':
+        handleOnChange(closeupPreset);
+        break;
+      case 'halfbody':
+        handleOnChange(halfbodyPreset);
+        break;
+      case 'fullbody':
+        handleOnChange(fullbodyPreset);
+        break;
+      case 'landscape':
+        handleOnChange(landscapePreset);
+        break;
+      case 'typog':
+        handleOnChange(typogPreset);
+        break;
+      default:
+        handleOnChange(defaultPreset);
+        break;
+    }
+    pickPreset(newPreset);
+  }
   return (
     <>
       <Label label="Video's Camera Angle"/>
       <div className="d-flex justify-content-between w-100">
-        <Button icon={faFaceViewfinder} label="Face Closeups"/>
-        <Button icon={faUser} label="Half Body Shots"/>
-        <Button icon={faPerson} label="Full Body Shots"/>
-        <Button icon={faBuildingColumns} label="Architecture or Landscape"/>
-        <Button icon={faText} label="Flat Logos, or Typographies"/>
+        <div className="my-1 me-1">
+          <Button
+            icon={faFaceViewfinder}
+            label="Face Closeups"
+            isActive={preset==='closeup'}
+            onClick={()=>handlePreset('closeup')}
+          />
+        </div>
+        <div className="m-1">
+          <Button
+            icon={faUser}
+            label="Half Body Shots"
+            isActive={preset==='halfbody'}
+            onClick={()=>handlePreset('halfbody')}
+          />
+        </div>
+        <div className="m-1">
+          <Button
+            icon={faPerson}
+            label="Full Body Shots"
+            isActive={preset==='fullbody'}
+            onClick={()=>handlePreset('fullbody')}
+          />
+        </div>
+        <div className="m-1">
+          <Button
+            icon={faBuildingColumns}
+            label="Architecture or Landscape"
+            isActive={preset==='landscape'}
+            onClick={()=>handlePreset('landscape')}
+          />
+        </div>
+        <div className="my-1 ms-1">
+          <Button
+            icon={faText}
+            label="Flat Logos, or Typographies"
+            isActive={preset==='typog'}
+            onClick={()=>handlePreset('typog')}
+          />
+        </div>
       </div>
       <Accordion className="mt-4">
         <Accordion.Item title={"Advanced Options"}>
@@ -44,68 +114,116 @@ export default function sectionAdvanceOptions({
                 initialValue: vstVal.cnCanny,
                 label: "Canny",
                 thumbTip: "Canny",
-                onChange: (val)=>{handleOnChange({cnCanny: val})}
-                }}/>
+                onChange: (val)=>{
+                  handleOnChange({cnCanny: val});
+                  pickPreset('custom');
+                }
+              }}/>
             </div>
-            <div className="col-md-6">
-              <NumberSliderV2 {...{
-                min: 0, max: 1, step: 0.1,
-                initialValue: vstVal.cnLinearAnime,
-                label: "Line Art Anime",
-                thumbTip: "Line Art Anime",
-                onChange: (val)=>{handleOnChange({cnLinearAnime: val})}
-                }}/>
-            </div>
-          </div>
-          <div className="row g-3 p-3">
             <div className="col-md-6">
               <NumberSliderV2 {...{
                 min: 0, max: 1, step: 0.1,
                 initialValue: vstVal.cnDepth,
                 label: "Depth",
                 thumbTip: "Depth",
-                onChange: (val)=>{handleOnChange({cnDepth: val})}
-                }}/>
+                onChange: (val)=>{
+                  handleOnChange({cnDepth: val});
+                  pickPreset('custom');
+                }
+              }}/>
             </div>
+
+          </div>
+          <div className="row g-3 p-3">
+          <div className="col-md-6">
+              <NumberSliderV2 {...{
+                min: 0, max: 1, step: 0.1,
+                initialValue: vstVal.cnLineArtAnime,
+                label: "Line Art - Anime",
+                thumbTip: "Line Art - Anime",
+                onChange: (val)=>{
+                  handleOnChange({cnLineArtAnime: val});
+                  pickPreset('custom');
+                }
+              }}/>
+            </div>
+            <div className="col-md-6">
+              <NumberSliderV2 {...{
+                min: 0, max: 1, step: 0.1,
+                initialValue: vstVal.cnLineArtRealistic,
+                label: "Line Art - Realistic",
+                thumbTip: "Line Art - Realistic)",
+                onChange: (val)=>{
+                  handleOnChange({cnLineArtRealistic: val});
+                  pickPreset('custom');
+                }
+              }}/>
+            </div>
+          </div>
+          <div className="row g-3 p-3">
             <div className="col-md-6">
               <NumberSliderV2 {...{
                 min: 0, max: 1, step: 0.1,
                 initialValue: vstVal.cnOpenPose,
                 label: "OpenPose",
                 thumbTip: "OpenPose",
-                onChange: (val)=>{handleOnChange({cnOpenPose: val})}
-                }}/>
+                onChange: (val)=>{
+                  handleOnChange({cnOpenPose: val});
+                  pickPreset('custom');
+                }
+              }}/>
             </div>
-          </div>
-          <div className="row g-3 p-3">
             <div className="col-md-6">
               <NumberSliderV2 {...{
                 min: 0, max: 1, step: 0.1,
                 initialValue: vstVal.cnPipeFace,
                 label: "Media Pipe Face",
                 thumbTip: "Media Pipe Face",
-                onChange: (val)=>{handleOnChange({cnPipeFace: val})}
-                }}/>
-            </div>
-            <div className="col-md-6">
-              <NumberSliderV2 {...{
-                min: 0, max: 1, step: 0.1,
-                initialValue: vstVal.cnSparseScribble,
-                label: "Sparse Scribble",
-                thumbTip: "Sparse Scribble",
-                onChange: (val)=>{handleOnChange({cnSparse: val})}
-                }}/>
+                onChange: (val)=>{
+                  handleOnChange({cnPipeFace: val})
+                  pickPreset('custom');
+                }
+              }}/>
             </div>
           </div>
           <div className="row g-3 p-3">
             <div className="col-md-6">
               <NumberSliderV2 {...{
                 min: 0, max: 1, step: 0.1,
-                initialValue: vstVal.cnLinearRealistic,
-                label: "Video CN (Linear Realistic)",
-                thumbTip: "Video CN",
-                onChange: (val)=>{handleOnChange({cnLinearRealistic: val})}
-                }}/>
+                initialValue: vstVal.cnSparseScribble,
+                label: "Sparse Scribble",
+                thumbTip: "Sparse Scribble",
+                onChange: (val)=>{
+                  handleOnChange({cnSparseScribble: val})
+                  pickPreset('custom');
+                }
+              }}/>
+            </div>
+            <div className="col-md-6">
+              <NumberSliderV2 {...{
+                min: 0, max: 1, step: 0.1,
+                initialValue: vstVal.cnSoftEdge,
+                label: "Soft Edge",
+                thumbTip: "SoftEdge",
+                onChange: (val)=>{
+                  handleOnChange({cnSoftEdge: val});
+                  pickPreset('custom');
+                }
+              }}/>
+            </div>
+          </div>
+          <div className="row g-3 p-3">
+            <div className="col-md-6">
+              <NumberSliderV2 {...{
+                min: 1, max: 64, step: 30,
+                initialValue: vstVal.cnRegularSteps,
+                label: "Regular Steps",
+                thumbTip: "Regular Steps",
+                onChange: (val)=>{
+                  handleOnChange({cnRegularSteps: val});
+                  pickPreset('custom');
+                }
+              }}/>
             </div>
           </div>
           <div className="d-flex p-3 justify-content-end">

packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVSTApp/vstPresets.tsx

@@ -0,0 +1,93 @@
+type VSTPreset = 
+  'custom'|
+  'closeup'|
+  'halfbody'|
+  'fullbody'|
+  'landscape'|
+  'typog';
+
+const defaultPreset = {
+  cnCanny: 0.7,
+  cnDepth: 0.7,
+  cnLineArtAnime: 0.7,
+  cnLineArtRealistic: 0.7,
+  cnLipsStrength: 0,
+  cnOpenPose: 0.7,
+  cnPipeFace: 0.7,
+  cnSparseScribble: 0.7,
+  cnSoftEdge: 0.7,
+  cnRegularSteps: 30,
+}
+const closeupPreset = {
+  cnCanny: 0,
+  cnDepth: 0,
+  cnLineArtAnime: 1,
+  cnLineArtRealistic: 0,
+  cnLipsStrength: 0,
+  cnOpenPose: 0,
+  cnPipeFace: 0,
+  cnSparseScribble: 1,
+  cnSoftEdge: 1,
+  cnRegularSteps: 30,
+}
+const halfbodyPreset = {
+  cnCanny: 0,
+  cnDepth: 0,
+  cnLineArtAnime: 1,
+  cnLineArtRealistic: 0,
+  cnLipsStrength: 0,
+  cnOpenPose: 1,
+  cnPipeFace: 0,
+  cnSparseScribble: 1,
+  cnSoftEdge: 1,
+  cnRegularSteps: 30,
+}
+const fullbodyPreset = {
+  cnCanny: 1,
+  cnDepth: 0,
+  cnLineArtAnime: 1,
+  cnLineArtRealistic: 0,
+  cnLipsStrength: 0,
+  cnOpenPose: 1,
+  cnPipeFace: 0,
+  cnSparseScribble: 1,
+  cnSoftEdge: 1,
+  cnRegularSteps: 30,
+}
+const landscapePreset = {
+  cnCanny: 1,
+  cnDepth: 1,
+  cnLineArtAnime: 1,
+  cnLineArtRealistic: 0,
+  cnLipsStrength: 0,
+  cnOpenPose: 0,
+  cnPipeFace: 0,
+  cnSparseScribble: 1,
+  cnSoftEdge: 1,
+  cnRegularSteps: 30,
+}
+
+const typogPreset = {
+  cnCanny: 0,
+  cnDepth: 0,
+  cnLineArtAnime: 1,
+  cnLineArtRealistic: 0,
+  cnLipsStrength: 0,
+  cnOpenPose: 0,
+  cnPipeFace: 0,
+  cnSparseScribble: 0,
+  cnSoftEdge: 1,
+  cnRegularSteps: 30,
+}
+
+export type {
+  VSTPreset
+}
+export {
+  defaultPreset,
+  closeupPreset,
+  halfbodyPreset,
+  fullbodyPreset,
+  landscapePreset,
+  typogPreset,
+};