From 7c1bb5e452c2e52554aa8f97b07bc1763e8da9ee Mon Sep 17 00:00:00 2001
From: BFlat <bflat@storyteller.ai>
Date: Sat, 13 Jul 2024 00:18:35 +0700
Subject: [PATCH] default cinematic, hide options/negative prompt under
 dropdown (#613)

---
 packages/fakeyou.com/package.json             |   1 +
 .../DropdownOptions/DropdownOptions.tsx       |  53 +++++
 .../common/DropdownOptions/index.ts           |   1 +
 .../src/components/common/index.tsx           |   2 +
 .../v2/view/pages/style-video/StyleVideo.tsx  | 186 ++++++++++--------
 yarn.lock                                     |  20 ++
 6 files changed, 185 insertions(+), 78 deletions(-)
 create mode 100644 packages/fakeyou.com/src/components/common/DropdownOptions/DropdownOptions.tsx
 create mode 100644 packages/fakeyou.com/src/components/common/DropdownOptions/index.ts

diff --git a/packages/fakeyou.com/package.json b/packages/fakeyou.com/package.json
index 9fcef14b16..b1d98a7299 100644
--- a/packages/fakeyou.com/package.json
+++ b/packages/fakeyou.com/package.json
@@ -79,6 +79,7 @@
     "react-share": "^4.4.1",
     "react-twitch-embed": "^3.0.1",
     "react-typeform-embed": "^1.0.8",
+    "react-use-measure": "^2.1.1",
     "react-wavesurfer.js": "^0.0.8",
     "sass": "^1.57.1",
     "swiper": "^11.0.5",
diff --git a/packages/fakeyou.com/src/components/common/DropdownOptions/DropdownOptions.tsx b/packages/fakeyou.com/src/components/common/DropdownOptions/DropdownOptions.tsx
new file mode 100644
index 0000000000..d7af167741
--- /dev/null
+++ b/packages/fakeyou.com/src/components/common/DropdownOptions/DropdownOptions.tsx
@@ -0,0 +1,53 @@
+import React, { useState, useRef } from "react";
+import { useSpring, animated, easings } from "@react-spring/web";
+import useMeasure from "react-use-measure";
+import Button from "../Button";
+import { faChevronDown, faChevronUp } from "@fortawesome/pro-solid-svg-icons";
+
+interface DropdownOptionsProps {
+  title?: string;
+  closeTitle?: string;
+  children: React.ReactNode;
+}
+
+export const DropdownOptions: React.FC<DropdownOptionsProps> = ({
+  title = "Show Advanced Options",
+  closeTitle = "Hide Advanced Options",
+  children,
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [ref, { height: viewHeight }] = useMeasure();
+  const previousHeightRef = useRef(0);
+
+  const toggleDropdown = () => setIsOpen(!isOpen);
+
+  const animationProps = useSpring({
+    height: isOpen ? viewHeight : 0,
+    opacity: isOpen ? 1 : 0,
+    config: { duration: 200, easing: easings.easeInOutQuad },
+    onRest: () => {
+      if (isOpen) {
+        previousHeightRef.current = viewHeight;
+      }
+    },
+  });
+
+  return (
+    <>
+      <animated.div style={{ ...animationProps, overflow: "hidden" }}>
+        <div ref={ref} className="pb-3">
+          {children}
+        </div>
+      </animated.div>
+      <Button
+        onClick={toggleDropdown}
+        label={isOpen ? closeTitle : title}
+        variant="link"
+        icon={isOpen ? faChevronUp : faChevronDown}
+        className="fs-7"
+      />
+    </>
+  );
+};
+
+export default DropdownOptions;
diff --git a/packages/fakeyou.com/src/components/common/DropdownOptions/index.ts b/packages/fakeyou.com/src/components/common/DropdownOptions/index.ts
new file mode 100644
index 0000000000..3758602cf0
--- /dev/null
+++ b/packages/fakeyou.com/src/components/common/DropdownOptions/index.ts
@@ -0,0 +1 @@
+export { default } from "./DropdownOptions";
diff --git a/packages/fakeyou.com/src/components/common/index.tsx b/packages/fakeyou.com/src/components/common/index.tsx
index 7b3c1f9972..9574e7f657 100644
--- a/packages/fakeyou.com/src/components/common/index.tsx
+++ b/packages/fakeyou.com/src/components/common/index.tsx
@@ -12,6 +12,7 @@ import { MediaCards, SkeletonCard, WeightsCards } from "./Card";
 import Container from "./Container";
 import CoverImageInput from "./CoverImageInput";
 import DeviceNotSupported from "./DeviceNotSupported";
+import DropdownOptions from "./DropdownOptions";
 import ErrorMessage from "./ErrorMessage";
 import FileActions from "./FileActions";
 import FileDetails from "./FileDetails";
@@ -70,6 +71,7 @@ export {
   Button,
   //Cards
   DeviceNotSupported,
+  DropdownOptions,
   MediaCards,
   SkeletonCard,
   WeightsCards,
diff --git a/packages/fakeyou.com/src/v2/view/pages/style-video/StyleVideo.tsx b/packages/fakeyou.com/src/v2/view/pages/style-video/StyleVideo.tsx
index 593e63d950..284202df5e 100644
--- a/packages/fakeyou.com/src/v2/view/pages/style-video/StyleVideo.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/style-video/StyleVideo.tsx
@@ -11,6 +11,7 @@ import {
   Slider,
   TempSelect as Select,
   Label,
+  DropdownOptions,
 } from "components/common";
 import { EntityInput } from "components/entities";
 import {
@@ -35,9 +36,10 @@ export default function StyleVideo() {
   const [length, lengthSet] = useState(3000);
   const [useFaceDetailer, setUseFaceDetailer] = useState(false);
   const [useUpscaler, setUseUpscaler] = useState(false);
-  const [useCinematic, setUseCinematic] = useState(false);
+  const [useCinematic, setUseCinematic] = useState(true);
   const [enableLipsync, setEnableLipsync] = useState(false);
   const [strength, setStrength] = useState(1.0);
+  const [visualStrength, setVisualStrength] = useState(100);
   const { enqueue } = useInferenceJobs();
 
   usePrefixedDocumentTitle("Style Video");
@@ -98,6 +100,13 @@ export default function StyleVideo() {
     setEnableLipsync(!!prompt?.lipsync_enabled);
   };
 
+  const handleSliderChange = ({ target }: { target: any }) => {
+    const decimalValue = parseFloat(target.value);
+    const visualValue = Math.round(decimalValue * 100);
+    setStrength(decimalValue);
+    setVisualStrength(visualValue);
+  };
+
   const storytellerCTA = (
     <div className="row g-2 g-md-4">
       <div className="col-12 col-md-4">
@@ -223,15 +232,20 @@ export default function StyleVideo() {
                         value: prompt,
                       }}
                     />
-                    <TextArea
-                      {...{
-                        label: "Negative prompt",
-                        rows: 1,
-                        onChange: ({ target }: { target: any }) => {
-                          negativePromptSet(target.value);
-                        },
-                      }}
-                    />
+                    <DropdownOptions
+                      title="Show Negative Prompt"
+                      closeTitle="Hide Negative Prompt"
+                    >
+                      <TextArea
+                        {...{
+                          label: "Negative prompt",
+                          rows: 1,
+                          onChange: ({ target }: { target: any }) => {
+                            negativePromptSet(target.value);
+                          },
+                        }}
+                      />
+                    </DropdownOptions>
                   </div>
                 </div>
                 <div className="mt-3 w-100">
@@ -240,7 +254,7 @@ export default function StyleVideo() {
                       accept: ["image"],
                       aspectRatio: "square",
                       className: "w-100",
-                      label: "IP Adapter Image",
+                      label: "Additional Style Reference Image (Optional)",
                       name: "IPAToken",
                       value: IPAToken,
                       onChange: ({ target }: { target: any }) => {
@@ -250,85 +264,101 @@ export default function StyleVideo() {
                     }}
                   />
                 </div>
-                <h6 className="mt-4">Strength ({strength})</h6>
+                <h6 className="mt-4">Style Strength ({visualStrength}%)</h6>
                 <div className="w-100">
                   <Slider
                     min={0.0}
                     max={1.0}
-                    step={0.1}
-                    onChange={({ target }: { target: any }) => {
-                      setStrength(parseFloat(target.value));
-                    }}
+                    step={0.01}
+                    onChange={handleSliderChange}
                     value={strength}
                     className="w-100"
                   />
                 </div>
-                <h6 className="mt-3 pb-2">Quality Options</h6>
-                <div>
-                  <div className="form-check form-switch w-100">
-                    <input
-                      className="form-check-input"
-                      type="checkbox"
-                      id="useFaceDetailer"
-                      checked={useFaceDetailer}
-                      onChange={() => setUseFaceDetailer(!useFaceDetailer)}
-                    />
-                    <label
-                      className="form-check-label"
-                      htmlFor="useFaceDetailer"
-                    >
-                      Use Face Detailer
-                    </label>
-                  </div>
+
+                <div className="mt-3">
+                  <DropdownOptions>
+                    <div>
+                      <h6 className="pb-2">Quality Options</h6>
+                      <div>
+                        <div className="form-check form-switch w-100">
+                          <input
+                            className="form-check-input"
+                            type="checkbox"
+                            id="useFaceDetailer"
+                            checked={useFaceDetailer}
+                            onChange={() =>
+                              setUseFaceDetailer(!useFaceDetailer)
+                            }
+                          />
+                          <label
+                            className="form-check-label"
+                            htmlFor="useFaceDetailer"
+                          >
+                            Use Face Detailer
+                          </label>
+                        </div>
+                      </div>
+                      <div>
+                        <div className="form-check form-switch w-100">
+                          <input
+                            className="form-check-input"
+                            type="checkbox"
+                            id="useUpscaler"
+                            checked={useUpscaler}
+                            onChange={() => setUseUpscaler(!useUpscaler)}
+                          />
+                          <label
+                            className="form-check-label"
+                            htmlFor="useUpscaler"
+                          >
+                            Use Upscaler
+                          </label>
+                        </div>
+                      </div>
+                      <div>
+                        <div className="form-check form-switch w-100">
+                          <input
+                            className="form-check-input"
+                            type="checkbox"
+                            id="useCinematic"
+                            checked={useCinematic}
+                            onChange={() => setUseCinematic(!useCinematic)}
+                          />
+                          <label
+                            className="form-check-label"
+                            htmlFor="useCinematic"
+                          >
+                            Use Cinematic
+                          </label>
+                        </div>
+                      </div>
+                      <div>
+                        <div className="form-check form-switch w-100">
+                          <input
+                            className="form-check-input"
+                            type="checkbox"
+                            id="enableLipsync"
+                            checked={enableLipsync}
+                            onChange={() => setEnableLipsync(!enableLipsync)}
+                          />
+                          <label
+                            className="form-check-label"
+                            htmlFor="enableLipsync"
+                          >
+                            Preserve Lip Movement
+                          </label>
+                        </div>
+                      </div>
+                    </div>
+                  </DropdownOptions>
                 </div>
-                <div>
-                  <div className="form-check form-switch w-100">
-                    <input
-                      className="form-check-input"
-                      type="checkbox"
-                      id="useUpscaler"
-                      checked={useUpscaler}
-                      onChange={() => setUseUpscaler(!useUpscaler)}
-                    />
-                    <label className="form-check-label" htmlFor="useUpscaler">
-                      Use Upscaler
-                    </label>
-                  </div>
-                </div>
-                <div>
-                  <div className="form-check form-switch w-100">
-                    <input
-                      className="form-check-input"
-                      type="checkbox"
-                      id="useCinematic"
-                      checked={useCinematic}
-                      onChange={() => setUseCinematic(!useCinematic)}
-                    />
-                    <label className="form-check-label" htmlFor="useCinematic">
-                      Use Cinematic
-                    </label>
-                  </div>
-                </div>
-                <div>
-                  <div className="form-check form-switch w-100">
-                    <input
-                      className="form-check-input"
-                      type="checkbox"
-                      id="enableLipsync"
-                      checked={enableLipsync}
-                      onChange={() => setEnableLipsync(!enableLipsync)}
-                    />
-                    <label className="form-check-label" htmlFor="enableLipsync">
-                      Preserve Lip Movement
-                    </label>
-                  </div>
-                </div>
-                <br />
-                <div>
+
+                <div className="mt-4">
                   <SegmentButtons
                     {...{
                       className: "fy-style-video-length",
-                      label: "Final video length",
+                      label: "Video Duration",
                       onChange: ({ target }: { target: any }) => {
                         lengthSet(target.value);
                       },
diff --git a/yarn.lock b/yarn.lock
index eb3a1a9349..8ccd610a26 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4485,6 +4485,7 @@ __metadata:
     moment: ^2.29.4
     prettier: ^3.1.0
     pretty-quick: ^3.1.3
+    react-use-measure: ^2.1.1
     universal-cookie: ^6.1.1
     yarn: ^1.22.19
   languageName: unknown
@@ -9118,6 +9119,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"debounce@npm:^1.2.1":
+  version: 1.2.1
+  resolution: "debounce@npm:1.2.1"
+  checksum: 682a89506d9e54fb109526f4da255c5546102fbb8e3ae75eef3b04effaf5d4853756aee97475cd4650641869794e44f410eeb20ace2b18ea592287ab2038519e
+  languageName: node
+  linkType: hard
+
 "debug@npm:2.6.9, debug@npm:^2.1.3, debug@npm:^2.2.0, debug@npm:^2.3.3, debug@npm:^2.6.0, debug@npm:^2.6.9":
   version: 2.6.9
   resolution: "debug@npm:2.6.9"
@@ -18145,6 +18153,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-use-measure@npm:^2.1.1":
+  version: 2.1.1
+  resolution: "react-use-measure@npm:2.1.1"
+  dependencies:
+    debounce: ^1.2.1
+  peerDependencies:
+    react: ">=16.13"
+    react-dom: ">=16.13"
+  checksum: b8e8939229d463c3c505f7b617925c0228efae0cd6f651371f463846417b06c9170be57df51293a61027c41770f8a090fdb8a08717c4e36290ccb496e0318f1f
+  languageName: node
+  linkType: hard
+
 "react-wavesurfer.js@npm:^0.0.8":
   version: 0.0.8
   resolution: "react-wavesurfer.js@npm:0.0.8"