diff --git a/packages/fakeyou.com/src/components/layout/InferenceJobsList/InferenceJobsList.tsx b/packages/fakeyou.com/src/components/layout/InferenceJobsList/InferenceJobsList.tsx new file mode 100644 index 0000000000..a85c49747d --- /dev/null +++ b/packages/fakeyou.com/src/components/layout/InferenceJobsList/InferenceJobsList.tsx @@ -0,0 +1,89 @@ +import React, { useEffect, useState } from 'react'; +// import { a } from '@react-spring/web'; +import { + GetPendingTtsJobCount, + GetPendingTtsJobCountIsOk, + GetPendingTtsJobCountSuccessResponse, +} from "@storyteller/components/src/api/tts/GetPendingTtsJobCount"; +// import { springs } from "resources"; +import { useInferenceJobs } from "hooks"; +import { Button } from 'components/common'; +import { Analytics } from "common/Analytics"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { faChevronRight, faHourglass1, faRemove, faTrophy, faWarning } from "@fortawesome/free-solid-svg-icons"; + +const DEFAULT_QUEUE_REFRESH_INTERVAL_MILLIS = 15000; + +export default function InferenceJobsList({ t }: { t: any }) { + const { inferenceJobs = [] } = useInferenceJobs({ type: 0 }); + const [pending, pendingSet] = useState({ + success: true, + pending_job_count: 0, + cache_time: new Date(0), // NB: Epoch is used for vector clock's initial state + refresh_interval_millis: DEFAULT_QUEUE_REFRESH_INTERVAL_MILLIS, + }); + const statusIcons = [faHourglass1,faHourglass1,faWarning,faRemove,faTrophy]; + const statusTxt = (which: number, config = {}) => ["animationPending","animationInProgress","animationFailed","animationDead","animationSuccess"].map((str,i) => t(`status.${str}`,config))[which]; + + const processFail = (fail = "") => { + switch (fail) { + case "face_not_detected": return "Face not detected, try another picture"; + default: return "Uknown failure"; + } + }; + + // const transitions = useTransition(inferenceJobs, { // not today + // ...springs.soft, + // from: { opacity: 0, position: "absolute" }, + // enter: { opacity: 1, position: "relative" }, + // leave: { opacity: 0, position: "absolute" }, + // }); + + useEffect(() => { + const fetch = async () => { + const response = await GetPendingTtsJobCount(); + if (GetPendingTtsJobCountIsOk(response)) { + if ( + response.cache_time.getTime() > pending.cache_time.getTime() + ) { + pendingSet(response); + } + } + }; + // TODO: We're having an outage and need to lower this. + //const interval = setInterval(async () => fetch(), 15000); + const refreshInterval = Math.max( + DEFAULT_QUEUE_REFRESH_INTERVAL_MILLIS, + pending.refresh_interval_millis + ); + const interval = setInterval(async () => fetch(), refreshInterval); + fetch(); + return () => clearInterval(interval); + }, [pending]); + + return inferenceJobs.length ?
+
{ t("headings.yourJobs") }
+ { inferenceJobs.map((job, key) => { + return
+ +
+

+ { statusTxt(job.statusIndex,{ attemptCount: job.attemptCount || "" }) } +

+ + { job.maybeFailureCategory ? `${ processFail(job.maybeFailureCategory) }` : "" } + +
+ { + job.maybeResultToken ?
+ }).reverse()} +
: null; +}; \ No newline at end of file diff --git a/packages/fakeyou.com/src/components/layout/InferenceJobsList/index.ts b/packages/fakeyou.com/src/components/layout/InferenceJobsList/index.ts new file mode 100644 index 0000000000..90dc40ab4f --- /dev/null +++ b/packages/fakeyou.com/src/components/layout/InferenceJobsList/index.ts @@ -0,0 +1 @@ +export { default } from './InferenceJobsList'; \ No newline at end of file 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 049b3803cd..30a8875a95 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 @@ -22,7 +22,7 @@ import FaceAnimatorTitle from "./FaceAnimatorTitle"; import FaceAnimatorInput from "./FaceAnimatorInput"; import FaceAnimatorWorking from "./FaceAnimatorWorking"; import FaceAnimatorSuccess from "./FaceAnimatorSuccess"; -import FaceAnimatorJobs from "./FaceAnimatorJobs"; +import InferenceJobsList from "components/layout/InferenceJobsList"; import { FaceAnimatorCore } from "./FaceAnimatorTypes"; import { BasicVideo } from "components/common"; import "./LipsyncEditor.scss"; @@ -182,7 +182,7 @@ export default function LipsyncEditor({ ); })} - +
diff --git a/packages/fakeyou.com/src/v2/view/pages/voice_designer/DatasetEditor.tsx b/packages/fakeyou.com/src/v2/view/pages/voice_designer/DatasetEditor.tsx index 6d14abaf0c..42aca6d5c7 100644 --- a/packages/fakeyou.com/src/v2/view/pages/voice_designer/DatasetEditor.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/voice_designer/DatasetEditor.tsx @@ -19,7 +19,7 @@ interface RouteParams { } export default function DatasetEditor({ value }: Props) { - const { datasets, inputCtrl } = useVoiceRequests(); + const { datasets, inputCtrl } = useVoiceRequests({}); const [title, titleSet] = useState(""); const [language,languageSet] = useState("en"); const [visibility,visibilitySet] = useState(""); diff --git a/packages/fakeyou.com/src/v2/view/pages/voice_designer/VoiceDesignerFormPage.tsx b/packages/fakeyou.com/src/v2/view/pages/voice_designer/VoiceDesignerFormPage.tsx index 019826e094..5df88eb907 100644 --- a/packages/fakeyou.com/src/v2/view/pages/voice_designer/VoiceDesignerFormPage.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/voice_designer/VoiceDesignerFormPage.tsx @@ -28,7 +28,7 @@ interface RouteParams { function VoiceDesignerFormPage() { const history = useHistory(); - const { datasets, inputCtrl, languages, visibilityOptions, voices } = useVoiceRequests(); + const { datasets, inputCtrl, languages, visibilityOptions, voices } = useVoiceRequests({}); const [language, languageSet] = useState("en"); const [visibility, visibilitySet] = useState(""); const [title, titleSet] = useState(""); diff --git a/packages/fakeyou.com/src/v2/view/pages/voice_designer/VoiceDesignerMainPage.tsx b/packages/fakeyou.com/src/v2/view/pages/voice_designer/VoiceDesignerMainPage.tsx index 7fc4c88887..8ff4e01003 100644 --- a/packages/fakeyou.com/src/v2/view/pages/voice_designer/VoiceDesignerMainPage.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/voice_designer/VoiceDesignerMainPage.tsx @@ -1,6 +1,8 @@ import React, { useState } from "react"; import { useHistory, useLocation } from "react-router-dom"; import { faPlus, faWaveform } from "@fortawesome/pro-solid-svg-icons"; +import InferenceJobsList from "components/layout/InferenceJobsList"; +import { useLocalize } from "hooks"; // import { usePrefixedDocumentTitle } from "common/UsePrefixedDocumentTitle"; import Panel from "components/common/Panel"; import PageHeader from "components/layout/PageHeader"; @@ -12,7 +14,8 @@ import useVoiceRequests from "./useVoiceRequests"; function VoiceDesignerMainPage() { const { pathname } = useLocation(); - const { datasets, voices } = useVoiceRequests(); + const { t } = useLocalize("FaceAnimator"); + const { datasets, voices } = useVoiceRequests({ requestDatasets: true, requestVoices: true }); const [isDeleteVoiceModalOpen, setIsDeleteVoiceModalOpen] = useState(false); const [isDeleteDatasetModalOpen, setIsDeleteDatasetModalOpen] = useState(false); @@ -128,7 +131,7 @@ function VoiceDesignerMainPage() { panel={false} imageUrl="/images/header/voice-designer.png" /> - +