diff --git a/packages/fakeyou.com/src/v2/view/pages/lipsync/LipsyncEditor/FaceAnimatorTitle.tsx b/packages/fakeyou.com/src/v2/view/pages/lipsync/LipsyncEditor/FaceAnimatorTitle.tsx index 8671855ded..e84f271e37 100644 --- a/packages/fakeyou.com/src/v2/view/pages/lipsync/LipsyncEditor/FaceAnimatorTitle.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/lipsync/LipsyncEditor/FaceAnimatorTitle.tsx @@ -1,59 +1,90 @@ -import React from 'react'; -import { animated, useSpring } from '@react-spring/web'; +import React from "react"; +import { animated, useSpring } from "@react-spring/web"; import { Spinner } from "components/common"; import { springs } from "resources"; -import DynamicButton from './DynamicButton'; +import DynamicButton from "./DynamicButton"; -const ProgressLi = ({ children, disabled = false }: { children?: any, disabled?: boolean }) => { +const ProgressLi = ({ + children, + disabled = false, +}: { + children?: any; + disabled?: boolean; +}) => { const style = useSpring({ ...springs.soft, - opacity: disabled ? .25 : 1 + opacity: disabled ? 0.25 : 1, }); - return - - - { } - - { children } - + return ( + + + + { + + } + + {children} + + ); }; export default function FaceAnimatorTitle({ ...rest }) { - const { audioProps, audioReady, imageProps, imageReady, indexSet, page, submit, t } = rest; + const { + audioProps, + audioReady, + imageProps, + imageReady, + indexSet, + page, + submit, + t, + } = rest; const noAudio = !audioReady || !audioProps.file; const noImg = !imageReady || !imageProps.file; const incomplete = noAudio || noImg; const working = imageProps.working && audioProps.working; - const slides = [t("inputs.generate"),,t("inputs.makeAnother")]; + const slides = [t("inputs.generate"), , t("inputs.makeAnother")]; const onClick = () => { if (page === 2) { - imageProps.clear(); audioProps.clear(); indexSet(0); + imageProps.clear(); + audioProps.clear(); + indexSet(0); } else if (!incomplete && !working) submit(); }; - return
-

- { t("headings.title") } -

-
    - - { t("headings.image") } - - - { t("headings.audio") } - -
- -

- { t("headings.subtitle") } -

-
-}; \ No newline at end of file + return ( +
+

+ {t("headings.title")} +

+
    + {t("headings.image")} + + {t("headings.audio")} + +
+ +

{t("headings.subtitle")}

+
+ ); +} diff --git a/packages/fakeyou.com/src/v2/view/pages/lipsync/LipsyncEditor/LipsyncEditor.scss b/packages/fakeyou.com/src/v2/view/pages/lipsync/LipsyncEditor/LipsyncEditor.scss index 04430ccb15..bed71245ae 100644 --- a/packages/fakeyou.com/src/v2/view/pages/lipsync/LipsyncEditor/LipsyncEditor.scss +++ b/packages/fakeyou.com/src/v2/view/pages/lipsync/LipsyncEditor/LipsyncEditor.scss @@ -2,98 +2,103 @@ $under992: max-width 992px; .lipsync-editor { - padding: 1rem; + padding-top: 2rem; - .media-input-column { - display: inline-block; - } - @include breakpoint($under992) { - .media-input-column:first-of-type { margin-bottom: 1rem } - } + .media-input-column { + display: inline-block; + } + @include breakpoint($under992) { + .media-input-column:first-of-type { + margin-bottom: 1rem; + } + } } .progress-header { - display: flex; - flex-wrap: wrap; - align-items: center; - padding: 1rem; + display: flex; + flex-wrap: wrap; + align-items: center; + // padding: 1rem; - .progress-heading { - display: inline-block; - margin: auto 1rem auto 0; - } + .progress-heading { + display: inline-block; + margin: auto 1rem auto 0; + } - .async-progress-tracker { - display: inline-flex; - justify-content: space-around; - flex-grow: 1; - margin-right: 1rem; - padding-left: 0; + .async-progress-tracker { + display: inline-flex; + justify-content: space-around; + flex-grow: 1; + margin-right: 1rem; + padding-left: 0; - li { - display: flex; - align-items: center; - font-size: 1.25rem; - font-weight: 500; - } + li { + display: flex; + align-items: center; + font-size: 1.25rem; + font-weight: 500; + } - svg { - margin-right: .5rem; - height: 2rem; - width: 2rem; - stroke: white; - } - } + svg { + margin-right: 0.5rem; + height: 2rem; + width: 2rem; + stroke: white; + } + } - .progress-description { - margin-top: 1rem; - width: 100%; - } + .progress-description { + margin-top: 1rem; + width: 100%; + } - button { - margin: 0 0 0 auto; - background-color: #ccccff; - width: fit-content; + button { + margin: 0 0 0 auto; + background-color: #ccccff; + width: fit-content; - @include breakpoint($under992) { - margin: 1rem 0 0; - width: 100%; + @include breakpoint($under992) { + margin: 1rem 0 0; + width: 100%; - .button-slide { - width: 100%; - } - } - } + .button-slide { + width: 100%; + } + } + } } -.lipsync-panel { - position: relative; - overflow: hidden; +.lipsync-panel { + position: relative; + overflow: hidden; } -.lipsync-working, .lipsync-working-notice { - display: flex; - align-items: center; - justify-content: center; - width: 100%; +.lipsync-working, +.lipsync-working-notice { + display: flex; + align-items: center; + justify-content: center; + width: 100%; } .lipsync-working-notice { - flex-direction: column; - margin: 5rem; + flex-direction: column; + margin: 5rem; - .working-title { - white-space: nowrap; - } + .working-title { + white-space: nowrap; + } } .lipsync-success { - padding: .5rem 1rem 1rem; + padding: 0.5rem 1rem 1rem; - h3 { margin: 1rem auto 0 0; } + h3 { + margin: 1rem auto 0 0; + } - .job-id { - color: rgba(#fff, .66); - font-size: .75rem; - } -} \ No newline at end of file + .job-id { + color: rgba(#fff, 0.66); + font-size: 0.75rem; + } +} diff --git a/packages/fakeyou.com/src/v2/view/pages/lipsync/LipsyncEditor/LipsyncEditor.tsx b/packages/fakeyou.com/src/v2/view/pages/lipsync/LipsyncEditor/LipsyncEditor.tsx index e9b351eb34..0bd90106bd 100644 --- a/packages/fakeyou.com/src/v2/view/pages/lipsync/LipsyncEditor/LipsyncEditor.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/lipsync/LipsyncEditor/LipsyncEditor.tsx @@ -1,5 +1,5 @@ import React, { useState } from "react"; -import { animated, useTransition } from '@react-spring/web'; +import { animated, useTransition } from "@react-spring/web"; import { v4 as uuidv4 } from "uuid"; import { useFile, useLocalize } from "hooks"; import { AudioInput, ImageInput, Spinner } from "components/common"; @@ -20,15 +20,28 @@ import { // EnqueueFaceAnimationRequest, } from "@storyteller/components/src/api/face_animation/EnqueueFaceAnimation"; // import { FrontendInferenceJobType } from "@storyteller/components/src/jobs/InferenceJob"; -import FaceAnimatorTitle from './FaceAnimatorTitle'; -import FaceAnimatorSuccess from './FaceAnimatorSuccess'; -import './LipsyncEditor.scss'; +import FaceAnimatorTitle from "./FaceAnimatorTitle"; +import FaceAnimatorSuccess from "./FaceAnimatorSuccess"; +import "./LipsyncEditor.scss"; import { SessionSubscriptionsWrapper } from "@storyteller/components/src/session/SessionSubscriptionsWrapper"; -import { FrontendInferenceJobType, InferenceJob } from "@storyteller/components/src/jobs/InferenceJob"; +import { + FrontendInferenceJobType, + InferenceJob, +} from "@storyteller/components/src/jobs/InferenceJob"; - -interface LipSyncProps { audioProps: any, children?: any, imageProps: any, index: number, toggle: any, style: any, enqueueInferenceJob: any, sessionSubscriptionsWrapper: any, t: any, inferenceJobsByCategory: any, }; -interface EditorProps { +interface LipSyncProps { + audioProps: any; + children?: any; + imageProps: any; + index: number; + toggle: any; + style: any; + enqueueInferenceJob: any; + sessionSubscriptionsWrapper: any; + t: any; + inferenceJobsByCategory: any; +} +interface EditorProps { sessionSubscriptionsWrapper: SessionSubscriptionsWrapper; enqueueInferenceJob: ( jobToken: string, @@ -36,9 +49,9 @@ interface EditorProps { ) => void; inferenceJobs: Array; inferenceJobsByCategory: Map>; -}; +} -const softSpring = { config: { mass: 1, tension: 80, friction: 10 } } +const softSpring = { config: { mass: 1, tension: 80, friction: 10 } }; // const InputPage = ({ audioProps, imageProps, toggle, style, t }: LipSyncProps ) => { @@ -59,60 +72,107 @@ const softSpring = { config: { mass: 1, tension: 80, friction: 10 } } // // }; -const InputPage = ({ audioProps, imageProps, toggle, style, t }: LipSyncProps ) => { +const InputPage = ({ + audioProps, + imageProps, + toggle, + style, + t, +}: LipSyncProps) => { + return ( + +
+
{t("headings.image")}
+ toggle.image(imageProps.file ? true : false), + }} + /> +
+
+
{t("headings.audio")}
+ { + toggle.audio(!!audioProps.file); + }, + hideActions: true, + }} + /> +
+ + ); +}; - return -
-
{ t("headings.image") }
- toggle.image(imageProps.file ? true : false) }}/> -
-
-
{ t("headings.audio") }
- { - toggle.audio(!!audioProps.file); - }, hideActions: true } }/> -
-}; - - -const Working = ({ audioProps, imageProps, index, style, t }: LipSyncProps ) => { - const workStatus = ["",t("status.uploadingAudio"),t("status.uploadingImage"),t("status.requestingAnimation"),""]; +const Working = ({ audioProps, imageProps, index, style, t }: LipSyncProps) => { + const workStatus = [ + "", + t("status.uploadingAudio"), + t("status.uploadingImage"), + t("status.requestingAnimation"), + "", + ]; const transitions = useTransition(index, { ...springs.soft, from: { opacity: 0, position: "absolute" }, enter: { opacity: 1, position: "relative" }, leave: { opacity: 0, position: "absolute" }, }); - return -
-

{ transitions(({ opacity, position }, i) => { - return { workStatus[index] } ...; - }) }

- -
- ; + return ( + +
+

+ {" "} + {transitions(({ opacity, position }, i) => { + return ( + + {workStatus[index]} ... + + ); + })} +

+ +
+ + ); }; -export default function LipsyncEditor({ enqueueInferenceJob, sessionSubscriptionsWrapper, inferenceJobsByCategory, ...rest }: EditorProps) { +export default function LipsyncEditor({ + enqueueInferenceJob, + sessionSubscriptionsWrapper, + inferenceJobsByCategory, + ...rest +}: EditorProps) { const { t } = useLocalize("FaceAnimator"); // the ready states are set by functions which run after the upload input animation is completed, which then illuminates the respective checkmark in a staggered way to draw attention to the workflow, and reduces concurrent animations - const [imageReady,imageReadySet] = useState(false); - const [audioReady,audioReadySet] = useState(false); - const readyMedia = (m:number) => (t:boolean) => [imageReadySet,audioReadySet][m](t); + const [imageReady, imageReadySet] = useState(false); + const [audioReady, audioReadySet] = useState(false); + const readyMedia = (m: number) => (t: boolean) => + [imageReadySet, audioReadySet][m](t); const audioProps = useFile({}); // contains upload inout state and controls, see docs const imageProps = useFile({}); // contains upload inout state and controls, see docs - const [index,indexSet] = useState(0); // index = slideshow slide position + const [index, indexSet] = useState(0); // index = slideshow slide position const makeRequest = (mode: number) => ({ - uuid_idempotency_token: uuidv4(), - file: mode ? imageProps.file : audioProps.file, - source: "file", - type: mode ? "image" : "audio" + uuid_idempotency_token: uuidv4(), + file: mode ? imageProps.file : audioProps.file, + source: "file", + type: mode ? "image" : "audio", }); - const upImageAndMerge = async (audio: any) => ({ audio, image: await UploadImage(makeRequest(1)) }); + const upImageAndMerge = async (audio: any) => ({ + audio, + image: await UploadImage(makeRequest(1)), + }); const submit = async () => { if (!audioProps.file) return false; @@ -120,41 +180,50 @@ export default function LipsyncEditor({ enqueueInferenceJob, sessionSubscription indexSet(1); // set audio working page UploadAudio(makeRequest(0)) // start audio (0) upload - .then(res => { - if ("upload_token" in res) { - indexSet(2); // set image working page - } - return upImageAndMerge(res); // start image (1) upload, replace with Upload(imageRequest) - }) - .then(responses => { - if ("upload_token" in responses.image) { - indexSet(3); // set face animator API working page - return EnqueueFaceAnimation({ - uuid_idempotency_token: uuidv4(), - audio_source: { - maybe_media_upload_token: responses.audio.upload_token, - }, - image_source: { - maybe_media_upload_token: responses.image.upload_token, - }, - }); - } - }) - .then(res => { - if (res && res.inference_job_token) { - enqueueInferenceJob( - res.inference_job_token, - FrontendInferenceJobType.FaceAnimation - ); - indexSet(4); // set face animator API success page - } - }) - .catch(e => { - return { success : false }; - }); + .then((res) => { + if ("upload_token" in res) { + indexSet(2); // set image working page + } + return upImageAndMerge(res); // start image (1) upload, replace with Upload(imageRequest) + }) + .then((responses) => { + if ("upload_token" in responses.image) { + indexSet(3); // set face animator API working page + return EnqueueFaceAnimation({ + uuid_idempotency_token: uuidv4(), + audio_source: { + maybe_media_upload_token: responses.audio.upload_token, + }, + image_source: { + maybe_media_upload_token: responses.image.upload_token, + }, + }); + } + }) + .then((res) => { + if (res && res.inference_job_token) { + enqueueInferenceJob( + res.inference_job_token, + FrontendInferenceJobType.FaceAnimation + ); + indexSet(4); // set face animator API success page + } + }) + .catch((e) => { + return { success: false }; + }); }; const page = index === 0 ? 0 : index === 4 ? 2 : 1; - const headerProps = { audioProps, audioReady, imageProps, imageReady, indexSet, page, submit , t}; + const headerProps = { + audioProps, + audioReady, + imageProps, + imageReady, + indexSet, + page, + submit, + t, + }; const transitions = useTransition(index, { ...softSpring, @@ -163,25 +232,31 @@ export default function LipsyncEditor({ enqueueInferenceJob, sessionSubscription leave: { opacity: 0, position: "absolute" }, }); - return
-
-
- - { transitions((style, i) => { - const Page = [InputPage,Working,FaceAnimatorSuccess][page]; - return Page ? : <> - }) } -
+ return ( +
+
+ + {transitions((style, i) => { + const Page = [InputPage, Working, FaceAnimatorSuccess][page]; + return Page ? ( + + ) : ( + <> + ); + })}
-
; -}; \ No newline at end of file +
+ ); +}