Merge pull request #369 from storytold/olivicmic-fy-voice-designer-consume-api-react

jobs filtered in voice designer and face animator

packages/fakeyou.com/src/components/layout/InferenceJobsList/InferenceJobsList.tsx

@@ -12,16 +12,23 @@ import { InferenceJob } from "@storyteller/components/src/jobs/InferenceJob";
 // 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, inferenceJobs }: { t: any, inferenceJobs?: any }) {
+interface JobsListProps{
+  filter?: (job:any) => any,
+  onSelect?: (e:any) => any,
+  statusTxt: any,
+  t: any,
+  inferenceJobs?: any
+}
+
+export default function InferenceJobsList({ filter, onSelect, statusTxt, t, inferenceJobs }: JobsListProps) {
   // const { inferenceJobs = [] } = useInferenceJobs({ type: 0 });
   // const oldJobs = thejobs || inferenceJobs;
-  console.log("😎",inferenceJobs);
+ console.log("🥬",inferenceJobs);
   const [pending, pendingSet] = useState<GetPendingTtsJobCountSuccessResponse>({
     success: true,
     pending_job_count: 0,
@@ -29,7 +36,7 @@ export default function InferenceJobsList({ t, inferenceJobs }: { t: any, infere
     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 statusTxt = (which: number, config = {}) => ["animationPending","animationInProgress","animationFailed","animationDead","animationSuccess"].map((str,i) => t(`status.${str}`,config))[which];
 
   const processFail = (fail = "") => {
     switch (fail) {
@@ -87,8 +94,10 @@ export default function InferenceJobsList({ t, inferenceJobs }: { t: any, infere
 
     return jobs.length ? <div {...{ className: "face-animator-jobs panel" }}>
       <h5>{ t("headings.yourJobs") }</h5>
-      { jobs.map((job: any, key: number) => {
-        console.log("🌸",job);
+      { jobs
+        // .filter(filter)
+        .map((job: any, key: number) => {
+        console.log("🍇",job);
       return <div {...{ className: "panel face-animator-job", key }}>
         <FontAwesomeIcon {...{ className: `job-status-icon job-status-${job.statusIndex}`, icon: statusIcons[job.statusIndex] }}/>
         <div {...{ className: "job-details" }}>
@@ -105,7 +114,7 @@ export default function InferenceJobsList({ t, inferenceJobs }: { t: any, infere
               icon: faChevronRight,
               iconFlip: true,
               label: t("inputs.viewResult"),
-              onClick:() => Analytics.voiceConversionClickDownload()
+              onClick: onSelect
             }} />: null
           }
       </div>

packages/fakeyou.com/src/v2/view/PageContainer.tsx

@@ -688,7 +688,8 @@ class PageContainer extends React.Component<
             <Route path="/voice-designer">
               <VoiceDesignerMainPage {...{
                 enqueueInferenceJob: this.props.enqueueInferenceJob,
-                inferenceJobs: this.props.inferenceJobs
+                inferenceJobs: this.props.inferenceJobs,
+                inferenceJobsByCategory: this.props.inferenceJobsByCategory
               }} />
             </Route>
 

packages/fakeyou.com/src/v2/view/pages/lipsync/LipsyncEditor/FaceAnimatorTypes.ts

@@ -17,7 +17,6 @@ export interface FaceAnimatorSlide {
   enqueueInferenceJob: any;
   sessionSubscriptionsWrapper: any;
   t: any;
-  inferenceJobsByCategory: any;
   removeWatermark: any;
   removeWatermarkChange: any;
 }

packages/fakeyou.com/src/v2/view/pages/lipsync/LipsyncEditor/LipsyncEditor.scss

@@ -162,6 +162,7 @@ $over992: min-width 992px;
 }
 
 .face-animator-jobs {
+  margin-bottom: 1rem;
   @include FApanel;
   h5 {
     @include FAltTxt;

packages/fakeyou.com/src/v2/view/pages/lipsync/LipsyncEditor/LipsyncEditor.tsx

@@ -28,6 +28,7 @@ import { BasicVideo } from "components/common";
 import "./LipsyncEditor.scss";
 import { FrontendInferenceJobType } from "@storyteller/components/src/jobs/InferenceJob";
 import { usePrefixedDocumentTitle } from "common/UsePrefixedDocumentTitle";
+import { Analytics } from "common/Analytics";
 
 export default function LipsyncEditor({
   enqueueInferenceJob,
@@ -146,6 +147,8 @@ export default function LipsyncEditor({
     leave: { opacity: 0, position: "absolute" },
   });
 
+  const statusTxt = (which: number, config = {}) => ["animationPending","animationInProgress","animationFailed","animationDead","animationSuccess"].map((str,i) => t(`status.${str}`,config))[which];
+
   return (
     <div {...{ className: "container-panel pt-4" }}>
       <div {...{ className: "panel face-animator-main" }}>
@@ -169,7 +172,6 @@ export default function LipsyncEditor({
                 still,
                 stillChange,
                 sessionSubscriptionsWrapper,
-                inferenceJobsByCategory,
                 index,
                 t,
                 toggle: { audio: readyMedia(1), image: readyMedia(0) },
@@ -183,7 +185,12 @@ export default function LipsyncEditor({
           );
         })}
       </div>
-      <InferenceJobsList {...{ t, inferenceJobs }}/>
+      <InferenceJobsList {...{
+        t,
+        onSelect: () => Analytics.voiceConversionClickDownload(),
+        inferenceJobs: inferenceJobsByCategory.get(FrontendInferenceJobType.FaceAnimation),
+        statusTxt
+      }}/>
       <div {...{ className: "face-animator-mobile-sample" }}>
         <BasicVideo {...{ src: "/videos/face-animator-instruction-en.mp4" }} />
       </div>

packages/fakeyou.com/src/v2/view/pages/voice_designer/VoiceDesignerFormPage.tsx

@@ -147,7 +147,7 @@ function VoiceDesignerFormPage({ enqueueInferenceJob }: { enqueueInferenceJob: a
         if (res && res.success) {
           enqueueInferenceJob(
             res.inference_job_token,
-            FrontendInferenceJobType.VoiceDesignerTts
+            FrontendInferenceJobType.VoiceDesignerCreateVoice
           );
 
           history.push("/voice-designer");

packages/fakeyou.com/src/v2/view/pages/voice_designer/VoiceDesignerMainPage.tsx

@@ -12,7 +12,12 @@ import ListItems from "./components/NewList";
 import Modal from "components/common/Modal";
 import useVoiceRequests from "./useVoiceRequests";
 
-function VoiceDesignerMainPage({ inferenceJobs }: { inferenceJobs: any }) {
+import {
+  FrontendInferenceJobType,
+  // InferenceJob,
+} from "@storyteller/components/src/jobs/InferenceJob";
+
+function VoiceDesignerMainPage({ inferenceJobsByCategory }: { inferenceJobsByCategory: any }) {
   const { pathname } = useLocation();
   const { t } = useLocalize("FaceAnimator");
   const { datasets, voices } = useVoiceRequests({
@@ -130,6 +135,14 @@ function VoiceDesignerMainPage({ inferenceJobs }: { inferenceJobs: any }) {
     };
   });
 
+  const statusTxt = (status: number, config: any) => [
+    "Voice pending...",
+    "Voice in progress",
+    "Voice failed",
+    "Voice dead",
+    "Voice created successfully"
+  ][status];
+
   const button = {
     label: `Create new voice`,
     icon: faPlus,
@@ -147,8 +160,11 @@ function VoiceDesignerMainPage({ inferenceJobs }: { inferenceJobs: any }) {
           panel={false}
           imageUrl="/images/header/voice-designer.png"
         />
-
-        <InferenceJobsList {...{ t, inferenceJobs }} />
+        <InferenceJobsList {...{
+          t,
+          inferenceJobs: inferenceJobsByCategory.get(FrontendInferenceJobType.VoiceDesignerCreateVoice), 
+          statusTxt
+        }}/>
         <Panel mb={true}>
           <nav>
             <ul className="nav nav-tabs">