progress percentage and tts generation fix

src/website/packages/fakeyou.com/src/v2/view/pages/lipsync/GenerateTts.tsx

@@ -95,7 +95,7 @@ export const GenerateTts = ({
   };
 
   useEffect(() => {
-    if (!jobToken || currentAudioUrl === null) return;
+    if (!jobToken) return;
 
     const fetch = async () => {
       const job = inferenceJobs.find(

src/website/packages/fakeyou.com/src/v2/view/pages/lipsync/Lipsync.tsx

@@ -125,6 +125,8 @@ export default function LivePortrait({
     });
   };
 
+  console.log(jobPercentage);
+
   const renderVideoOrPlaceholder = () => {
     if (generatedVideoSrc && !isGenerating && audioToken) {
       return (
@@ -157,13 +159,11 @@ export default function LivePortrait({
               <div className="d-flex flex-column align-items-center gap-3 justify-content-center">
                 <LoadingSpinner padding={false} />
                 {jobPercentage !== null
-                  ? `Generating video...`
+                  ? `Generating video... ${jobPercentage}%`
                   : "Generating video..."}
               </div>
             </h4>
-            <p className="fs-6 opacity-75">
-              This should take about a minute...
-            </p>
+            <p className="fs-6 opacity-75">This should take about a minute.</p>
           </div>
           <OutputThumbnailImage
             src={selectedSourceMediaLink || ""}
@@ -230,16 +230,16 @@ export default function LivePortrait({
     ? new BucketConfig().getGcsUrl(selectedSourceMedia.public_bucket_path)
     : null;
 
+  const handleJobProgress = (progressPercentage: number | null) => {
+    console.log("Job Progress:", progressPercentage);
+    setJobPercentage(progressPercentage);
+  };
+
   const handleJobTokens = async (
     maybeResultToken: string,
     jobToken: string,
-    createdAt: Date,
-    progressPercentage: number | null
+    createdAt: Date
   ) => {
-    if (progressPercentage) {
-      setJobPercentage(progressPercentage);
-    }
-
     if (!maybeResultToken) {
       return;
     }
@@ -263,6 +263,7 @@ export default function LivePortrait({
       if (jobToken === lastEnqueuedJobToken) {
         setGeneratedVideoSrc(mediaLink);
         setIsGenerating(false);
+        setJobPercentage(null);
       }
 
       setJobProcessedTokens(prevTokens => [...prevTokens, jobToken]);
@@ -274,6 +275,7 @@ export default function LivePortrait({
       setIsGenerating(false);
       setGeneratedVideoSrc("");
       setIsEnqueuing(false);
+      setJobPercentage(null);
     }
   };
 
@@ -549,6 +551,7 @@ export default function LivePortrait({
                     <SessionLsInferenceResultsList
                       sessionSubscriptionsWrapper={sessionSubscriptionsWrapper}
                       onJobTokens={handleJobTokens}
+                      onJobProgress={handleJobProgress}
                     />
                   </div>
                 </div>

src/website/packages/fakeyou.com/src/v2/view/pages/lipsync/LipsyncTokens.ts

@@ -1,3 +1,5 @@
+// Matches the voice token with the precomputed source
+
 export const LipsyncTokenMap: { [key: string]: string } = {
   weight_hz7g8f1j4psrsw2sv67e4y61q: "m_zx1fyp6t7n8b46swz087xkapa7s2vs", // Mariano Closs
 };

src/website/packages/fakeyou.com/src/v2/view/pages/lipsync/SessionLsInferenceResultsList.tsx

@@ -18,15 +18,16 @@ interface SessionLpInferenceResultsListProps {
   onJobTokens: (
     maybeResultToken: string,
     jobToken: string,
-    createdAt: Date,
-    progressPercentage: number | null
+    createdAt: Date
   ) => void;
   onJobClick?: (job: InferenceJob) => void;
+  onJobProgress?: (progressPercentage: number | null) => void;
 }
 
 export default function SessionLpInferenceResultsList({
   onJobTokens,
   onJobClick,
+  onJobProgress,
 }: SessionLpInferenceResultsListProps) {
   const { inferenceJobsByCategory } = useInferenceJobs();
   const hasInitialized = useRef(false);
@@ -51,12 +52,7 @@ export default function SessionLpInferenceResultsList({
           job.jobToken !== lastProcessedJobToken.current
         ) {
           lastProcessedJobToken.current = job.jobToken;
-          onJobTokens(
-            job.maybeResultToken,
-            job.jobToken,
-            job.createdAt,
-            job.progressPercentage
-          );
+          onJobTokens(job.maybeResultToken, job.jobToken, job.createdAt);
         }
       });
     }
@@ -80,6 +76,9 @@ export default function SessionLpInferenceResultsList({
       if (job.jobState === JobState.STARTED) {
         if (lastProgressRef.current[job.jobToken] !== currentProgress) {
           lastProgressRef.current[job.jobToken] = currentProgress;
+          if (onJobProgress) {
+            onJobProgress(currentProgress);
+          }
         }
         return;
       }
@@ -93,7 +92,7 @@ export default function SessionLpInferenceResultsList({
         lastProgressRef.current[job.jobToken] = null;
       }
     });
-  }, [lipsyncJobs]);
+  }, [lipsyncJobs, onJobProgress]);
 
   const [mediaSrc, setMediaSrc] = useState<{ [key: string]: string }>({});