From 720e9d66fcba2e9290855cd610b5fee0bd5fccbe Mon Sep 17 00:00:00 2001
From: Victor Holguin <olivicmic@Tin-Man.hitronhub.home>
Date: Tue, 24 Oct 2023 22:03:07 -0700
Subject: [PATCH] added failure states to face animator

---
 .../GetModelInferenceJobStatus.ts             |  1 +
 packages/components/src/jobs/InferenceJob.ts  |  7 +++++++
 .../components/common/Checkbox/Checkbox.tsx   |  2 +-
 .../common/SegmentButtons/SegmentButtons.tsx  |  3 ++-
 .../LipsyncEditor/FaceAnimatorJobs.tsx        | 21 ++++++++++---------
 .../lipsync/LipsyncEditor/LipsyncEditor.scss  | 15 +++++++++----
 6 files changed, 33 insertions(+), 16 deletions(-)

diff --git a/packages/components/src/api/model_inference/GetModelInferenceJobStatus.ts b/packages/components/src/api/model_inference/GetModelInferenceJobStatus.ts
index 2da780cdef..3610bcf052 100644
--- a/packages/components/src/api/model_inference/GetModelInferenceJobStatus.ts
+++ b/packages/components/src/api/model_inference/GetModelInferenceJobStatus.ts
@@ -30,6 +30,7 @@ export interface RequestDetails {
 export interface StatusDetails {
   status: string,
   maybe_extra_status_description?: string,
+  maybe_failure_category?: string,
   attempt_count: number,
 }
 
diff --git a/packages/components/src/jobs/InferenceJob.ts b/packages/components/src/jobs/InferenceJob.ts
index 586126aa83..638530ee56 100644
--- a/packages/components/src/jobs/InferenceJob.ts
+++ b/packages/components/src/jobs/InferenceJob.ts
@@ -31,6 +31,7 @@ export class InferenceJob {
   maybeResultType: string | undefined | null;
   maybeResultToken: string | undefined | null;
   maybeResultPublicBucketMediaPath: string | undefined | null;
+  maybeFailureCategory: string | undefined | null;
 
   constructor(
     // PK
@@ -50,6 +51,7 @@ export class InferenceJob {
     maybeResultEntityType: string | undefined | null = null,
     maybeResultEntityToken: string | undefined | null = null,
     maybeResultPublicBucketMediaPath: string | undefined | null = null,
+    maybeFailureCategory: string | undefined | null = null
   ) {
     this.jobToken = jobToken;
     this.frontendJobType = frontendJobType;
@@ -77,6 +79,10 @@ export class InferenceJob {
     }
 
     this.maybeResultPublicBucketMediaPath = maybeResultPublicBucketMediaPath;
+
+    if (!!maybeFailureCategory) {
+      this.maybeFailureCategory = maybeFailureCategory;
+    }
   }
 
   static fromResponse(response: ModelInferenceJobStatus, frontendJobType: FrontendInferenceJobType) : InferenceJob {
@@ -93,6 +99,7 @@ export class InferenceJob {
       response.maybe_result?.entity_type,
       response.maybe_result?.entity_token,
       response.maybe_result?.maybe_public_bucket_media_path,
+      response.status.maybe_failure_category
     );
   }
 }
diff --git a/packages/fakeyou.com/src/components/common/Checkbox/Checkbox.tsx b/packages/fakeyou.com/src/components/common/Checkbox/Checkbox.tsx
index 35826acf2a..8f3d0b2176 100644
--- a/packages/fakeyou.com/src/components/common/Checkbox/Checkbox.tsx
+++ b/packages/fakeyou.com/src/components/common/Checkbox/Checkbox.tsx
@@ -25,6 +25,6 @@ export default function Checkbox({ checked, className = "", label = "", name = "
     <a.svg {...{ className: "fy-checkbox", onClick, style, ...hoverEvents }}>
       <Check {...{ checked }}/>
     </a.svg>
-    { label && <label {...{ className: "form-check-label", for: id, onClick }}>{ label }</label> } 
+    { label && <label {...{ className: "form-check-label", htmlFor: id, onClick }}>{ label }</label> } 
   </div>
 };
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/components/common/SegmentButtons/SegmentButtons.tsx b/packages/fakeyou.com/src/components/common/SegmentButtons/SegmentButtons.tsx
index d13c2384a6..9f9e66d4ff 100644
--- a/packages/fakeyou.com/src/components/common/SegmentButtons/SegmentButtons.tsx
+++ b/packages/fakeyou.com/src/components/common/SegmentButtons/SegmentButtons.tsx
@@ -11,8 +11,9 @@ interface Props {
 export default function SegmentButtons({ name, onChange, options = [], value: inValue = "" }: Props) {
   // const onClick = ({ target }: any) => onChange();
   return <ul {...{ className: "fy-segment-buttons" }}>
-    { options.map(({ label = "", value = "" },i: number) => <li {...{
+    { options.map(({ label = "", value = "" },key: number) => <li {...{
       ...value === inValue && { className: "fy-selected-segment" },
+      key,
       onClick: ({ target }: any) => onChange({ target: { name, type: "option", value } })
     }}>{ label }</li>) }
   </ul>;
diff --git a/packages/fakeyou.com/src/v2/view/pages/lipsync/LipsyncEditor/FaceAnimatorJobs.tsx b/packages/fakeyou.com/src/v2/view/pages/lipsync/LipsyncEditor/FaceAnimatorJobs.tsx
index 3ce3b3425e..6692b07198 100644
--- a/packages/fakeyou.com/src/v2/view/pages/lipsync/LipsyncEditor/FaceAnimatorJobs.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/lipsync/LipsyncEditor/FaceAnimatorJobs.tsx
@@ -25,12 +25,12 @@ export default function FaceAnimatorJobs({ t }: { t: any }) {
   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 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,
@@ -67,11 +67,12 @@ export default function FaceAnimatorJobs({ t }: { t: any }) {
       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" }}>
-          <h6>
+          <h4>
             { statusTxt(job.statusIndex,{ attemptCount: job.attemptCount || "" }) }
-            {/*{ job.maybeFailureCategory ? `: ${ processFail(job.maybeFailureCategory) }` : "" }*/}
-          </h6>
-          <span {...{ className: "job-id" }}>id: { job.jobToken }</span>
+          </h4>
+          <span>
+            { job.maybeFailureCategory ? `${ processFail(job.maybeFailureCategory) }` : "" }
+          </span>
         </div>
         {
           job.maybeResultToken ?  <Button {...{
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 5de506eb8a..bea99a1c9b 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
@@ -171,6 +171,7 @@ $over992: min-width 992px;
   .face-animator-job {
     display: flex;
     flex-wrap: wrap;
+    align-items: stretch;
     margin-top: 1rem;
     padding: 1rem;
 
@@ -194,12 +195,18 @@ $over992: min-width 992px;
     .job-status-4 { background-color: $success } // success = green
 
     .job-details {
-      // display: flex;
+      display: flex;
       align-items: center;
-      height: 100%;
-      // width: 100%;
+      flex-wrap: wrap;
+      // height: 100%;
+      width: min-content;
+
+      h4, span { white-space: nowrap; }
       
-      h6 { line-height: 1em }
+      h4 {
+        line-height: 1em;
+        margin-bottom: 0;
+      }
 
     }