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 9da9409308..fd8b800860 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 @@ -46,6 +46,7 @@ import SessionLpInferenceResultsList from "./SessionLpInferenceResultsList"; import { GetMedia } from "@storyteller/components/src/api/media_files/GetMedia"; import { useLocation } from "react-router-dom"; import { LivePortraitDetails } from "@storyteller/components/src/api/model_inference/GetModelInferenceJobStatus"; +import { useDocumentTitle } from "@storyteller/components/src/hooks/UseDocumentTitle"; interface LivePortraitProps { sessionSubscriptionsWrapper: SessionSubscriptionsWrapper; @@ -64,6 +65,7 @@ interface GeneratedVideo { export default function LivePortrait({ sessionSubscriptionsWrapper, }: LivePortraitProps) { + useDocumentTitle("Live Portrait AI. Free Video Animation"); const { enqueueInferenceJob } = useInferenceJobs(); const { open, close } = useModal(); const [isEnqueuing, setIsEnqueuing] = useState(false); @@ -99,6 +101,9 @@ export default function LivePortrait({ const [currentlyGeneratingList, setCurrentlyGeneratingList] = useState< { sourceIndex: number; motionIndex: number }[] >([]); + const [jobProgressPercentage, setJobProgressPercentage] = useState< + number | null + >(null); const location = useLocation(); @@ -146,6 +151,15 @@ export default function LivePortrait({ } }; + const handleJobProgress = (progress: number | null) => { + setJobProgressPercentage(prevProgress => { + if (prevProgress !== progress) { + return progress; + } + return prevProgress; + }); + }; + const handleSourceSelect = (index: number) => { setIsUserUploaded(index >= numberOfInitialSourceTokens); setSelectedSourceIndex(index); @@ -201,6 +215,10 @@ export default function LivePortrait({ }); }; + useEffect(() => { + console.log("Updated jobProgressPercentage:", jobProgressPercentage); + }, [jobProgressPercentage]); + const renderVideoOrPlaceholder = () => { // Check if the current combination is being generated const isCurrentlyGenerating = currentlyGeneratingList.some( @@ -225,7 +243,9 @@ export default function LivePortrait({

- Generating video... + {jobProgressPercentage !== null + ? `Generating video... ${jobProgressPercentage}%` + : "Generating video..."}

@@ -238,7 +258,7 @@ export default function LivePortrait({ ); } else if (generatedVideoSrc) { - // Show dynamically generated video if available + // Show generated video if available return (