From 0a1e57f5da57775256270b4f7ffeadbc25c97db9 Mon Sep 17 00:00:00 2001
From: bflatastic <bombayapirat@gmail.com>
Date: Thu, 12 Sep 2024 12:08:16 +0700
Subject: [PATCH] use with lipsync cta above animate button when output is
 available

---
 .../src/v2/view/pages/lipsync/Lipsync.tsx     |   2 +-
 .../view/pages/live_portrait/LivePortrait.tsx | 108 ++++++++++++------
 .../SessionLpInferenceResultsList.tsx         |  25 ++--
 3 files changed, 86 insertions(+), 49 deletions(-)

diff --git a/src/website/packages/fakeyou.com/src/v2/view/pages/lipsync/Lipsync.tsx b/src/website/packages/fakeyou.com/src/v2/view/pages/lipsync/Lipsync.tsx
index d235d1d259..d5dce5e10b 100644
--- a/src/website/packages/fakeyou.com/src/v2/view/pages/lipsync/Lipsync.tsx
+++ b/src/website/packages/fakeyou.com/src/v2/view/pages/lipsync/Lipsync.tsx
@@ -559,7 +559,7 @@ export default function Lipsync({ sessionSubscriptionsWrapper }: LipsyncProps) {
                       theme="fakeyou"
                       content={
                         generatedVideoSrc
-                          ? t("tooltip.downloadVideo")
+                          ? t("tooltip.download")
                           : t("tooltip.downloadNoOutput")
                       }
                     >
diff --git a/src/website/packages/fakeyou.com/src/v2/view/pages/live_portrait/LivePortrait.tsx b/src/website/packages/fakeyou.com/src/v2/view/pages/live_portrait/LivePortrait.tsx
index b0b2014551..eb7df10f5c 100644
--- a/src/website/packages/fakeyou.com/src/v2/view/pages/live_portrait/LivePortrait.tsx
+++ b/src/website/packages/fakeyou.com/src/v2/view/pages/live_portrait/LivePortrait.tsx
@@ -19,6 +19,7 @@ import {
   faArrowDownToLine,
   faEquals,
   faImageUser,
+  faLips,
   faLock,
   faPlus,
   faSparkles,
@@ -129,6 +130,9 @@ export default function LivePortrait({
   const [isGenerating, setIsGenerating] = useState(false);
   const [generatedVideos, setGeneratedVideos] = useState<GeneratedVideo[]>([]);
   const [jobProcessedTokens, setJobProcessedTokens] = useState<string[]>([]);
+  const [resultTokens, setResultTokens] = useState<{
+    [key: string]: string | null;
+  }>({});
   const [currentlyGeneratingList, setCurrentlyGeneratingList] = useState<
     CurrentlyGenerating[]
   >([]);
@@ -579,6 +583,16 @@ export default function LivePortrait({
         livePortraitDetails.face_driver_media_file_token
       );
 
+      const sourceToken = livePortraitDetails.source_media_file_token;
+      const motionToken = livePortraitDetails.face_driver_media_file_token;
+
+      const combinationKey = `${sourceToken}_${motionToken}`;
+
+      setResultTokens(prevTokens => ({
+        ...prevTokens,
+        [combinationKey]: maybeResultToken,
+      }));
+
       const newGeneratedVideo = {
         sourceIndex,
         motionIndex,
@@ -840,6 +854,8 @@ export default function LivePortrait({
     </>
   );
 
+  const combinationKey = `${sourceTokens[selectedSourceIndex]}_${motionTokens[selectedMotionIndex]}`;
+
   return (
     <>
       <Container type="panel" className="mt-3 mt-lg-5">
@@ -951,42 +967,62 @@ export default function LivePortrait({
                 </div>
 
                 <div className="d-flex flex-column gap-4">
-                  <div className="d-flex gap-2">
-                    <Button
-                      icon={isUserContent ? faSparkles : undefined}
-                      label={
-                        !loggedIn && isUserContent
-                          ? "Sign Up and Animate"
-                          : isUserContent
-                            ? generatedVideoSrc
-                              ? "Re-animate"
-                              : "Animate"
-                            : !loggedIn
-                              ? "Sign up now to Animate"
-                              : "Upload your media to generate"
-                      }
-                      onClick={
-                        loggedIn
-                          ? enqueueClick
-                          : () =>
-                              history.push("/signup?redirect=/ai-live-portrait")
-                      }
-                      className="flex-grow-1"
-                      // disabled={!isUserContent}
-                      isLoading={isEnqueuing || isGenerating}
-                      disabled={!isUserContent && loggedIn}
-                    />
-                    <Tippy theme="fakeyou" content="Download video">
-                      <div>
-                        <Button
-                          square={true}
-                          icon={faArrowDownToLine}
-                          variant="action"
-                          onClick={handleDownloadClick}
-                          disabled={!loggedIn}
-                        />
-                      </div>
-                    </Tippy>
+                  <div className="d-flex flex-column gap-3">
+                    {generatedVideoSrc && resultTokens[combinationKey] && (
+                      <Button
+                        icon={faLips}
+                        label="Use with Lipsync"
+                        onClick={() =>
+                          history.push(
+                            `/ai-lip-sync?source=${resultTokens[combinationKey]}`
+                          )
+                        }
+                        className="flex-grow-1"
+                        variant="primary"
+                      />
+                    )}
+
+                    <div className="d-flex gap-2">
+                      <Button
+                        icon={isUserContent ? faSparkles : undefined}
+                        label={
+                          !loggedIn && isUserContent
+                            ? "Sign Up and Animate"
+                            : isUserContent
+                              ? generatedVideoSrc
+                                ? "Re-animate"
+                                : "Animate"
+                              : !loggedIn
+                                ? "Sign up now to Animate"
+                                : "Upload your media to generate"
+                        }
+                        onClick={
+                          loggedIn
+                            ? enqueueClick
+                            : () =>
+                                history.push(
+                                  "/signup?redirect=/ai-live-portrait"
+                                )
+                        }
+                        className="flex-grow-1"
+                        // disabled={!isUserContent}
+                        isLoading={isEnqueuing || isGenerating}
+                        disabled={!isUserContent && loggedIn}
+                        variant={generatedVideoSrc ? "action" : "primary"}
+                      />
+
+                      <Tippy theme="fakeyou" content="Download video">
+                        <div>
+                          <Button
+                            square={true}
+                            icon={faArrowDownToLine}
+                            variant="action"
+                            onClick={handleDownloadClick}
+                            disabled={!loggedIn}
+                          />
+                        </div>
+                      </Tippy>
+                    </div>
                   </div>
 
                   <div className="d-flex flex-column gap-2">
diff --git a/src/website/packages/fakeyou.com/src/v2/view/pages/live_portrait/SessionLpInferenceResultsList.tsx b/src/website/packages/fakeyou.com/src/v2/view/pages/live_portrait/SessionLpInferenceResultsList.tsx
index 6ca66180d5..0ac4bf9591 100644
--- a/src/website/packages/fakeyou.com/src/v2/view/pages/live_portrait/SessionLpInferenceResultsList.tsx
+++ b/src/website/packages/fakeyou.com/src/v2/view/pages/live_portrait/SessionLpInferenceResultsList.tsx
@@ -250,18 +250,19 @@ export default function SessionLpInferenceResultsList({
                         className="pe-2 fs-5 opacity-75"
                       />
                     </div>
-                    {job.maybeResultToken && (
-                      <Button
-                        icon={faLips}
-                        label="Use with Lip Sync"
-                        small={true}
-                        onClick={e => {
-                          if (job.maybeResultToken !== null) {
-                            handleLipsyncCTA(e, job.maybeResultToken);
-                          }
-                        }}
-                      />
-                    )}
+
+                    <Button
+                      icon={faLips}
+                      label="Use with Lip Sync"
+                      small={true}
+                      variant={job.maybeResultToken ? "primary" : "action"}
+                      disabled={!job.maybeResultToken}
+                      onClick={e => {
+                        if (job.maybeResultToken !== null) {
+                          handleLipsyncCTA(e, job.maybeResultToken);
+                        }
+                      }}
+                    />
                   </div>
                 </div>
               </div>