Api2.6 & Fix/ Cancel Audio generation jobs (#536)

- update the audio inference component to use api manager to cancel job
- update the audio inference component to reflect more job statuses

---------

Co-authored-by: wil <wil@storyteller.ai>

app/hooks/useActiveJobs/utilities.ts

@@ -6,9 +6,7 @@ export async function PollRecentJobs() {
 
   const response = await jobsApi.ListRecentJobs();
   if (response.success && response.data) {
-    if (response.data.length > 0) {
-      setJobs(response.data);
-    }
+    setJobs(response.data);
     // else, just no jobs, not an error, do nothing
     return;
   }

app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/AudioTab/audioInferenceElement.tsx

@@ -0,0 +1,74 @@
+import { useCallback } from "react";
+import { twMerge } from "tailwind-merge";
+import {
+  faSpinnerThird,
+  faCircleExclamation,
+  faXmark,
+} from "@fortawesome/pro-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { JobsApi } from "~/Classes/ApiManager";
+import { JobStatus, ToastTypes } from "~/enums";
+import { Job } from "~/models";
+import { ButtonIcon, H5 } from "~/components";
+import { addToast } from "~/signals";
+import { isJobStatusError } from "~/utilities";
+import { PollRecentJobs } from "~/hooks/useActiveJobs/utilities";
+
+export const InferenceElement = ({ job }: { job: Job }) => {
+  const jobStatus = job.status.status;
+
+  const className = twMerge(
+    "rounded-md w-full flex justify-between items-center p-2 gap-2",
+    jobStatus === JobStatus.PENDING || jobStatus === JobStatus.ATTEMPT_FAILED
+      ? "bg-inference-pending"
+      : "",
+    jobStatus === JobStatus.STARTED ? "bg-inference-generating" : "",
+    isJobStatusError(jobStatus) ? "bg-inference-error" : "",
+  );
+
+  const getStatusText = () => {
+    switch (jobStatus) {
+      case JobStatus.PENDING:
+        return "Pending...";
+      case JobStatus.ATTEMPT_FAILED:
+        return "Attempt Failed, server will retry soon!";
+      case JobStatus.STARTED:
+        return "Started, generating...";
+      case JobStatus.DEAD:
+      case JobStatus.COMPLETE_FAILURE:
+      default:
+        return "Error!";
+    }
+  };
+
+  const handleDeleteJob = useCallback(async (job: Job) => {
+    const jobsApi = new JobsApi();
+    const response = await jobsApi.DeleteJobByToken(job.job_token);
+    if (response.success) {
+      addToast(
+        ToastTypes.SUCCESS,
+        "Successfully delete the audio generation job.",
+      );
+      PollRecentJobs();
+      return;
+    }
+    addToast(
+      ToastTypes.ERROR,
+      response.errorMessage ??
+        "Unknown Error in deleting audio generation job.",
+    );
+  }, []);
+
+  return (
+    <div className={className}>
+      {isJobStatusError(jobStatus) ? (
+        <FontAwesomeIcon icon={faCircleExclamation} />
+      ) : (
+        <FontAwesomeIcon icon={faSpinnerThird} spin />
+      )}
+      <H5 className="grow">{getStatusText()}</H5>
+      <ButtonIcon icon={faXmark} onClick={() => handleDeleteJob(job)} />
+    </div>
+  );
+};

app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/AudioTab/inferenceElement.tsx

@@ -1,45 +0,0 @@
-import { twMerge } from "tailwind-merge";
-import {
-  faSpinnerThird,
-  faCircleXmark,
-  faXmark,
-} from "@fortawesome/pro-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-
-import { JobStatus } from "~/enums";
-import { Job } from "~/models";
-import { ButtonIcon, H5 } from "~/components";
-
-export const InferenceElement = ({ job }: { job: Job }) => {
-  const className = twMerge(
-    "rounded-md w-full flex justify-between items-center p-2 gap-2",
-    job.status.status === JobStatus.PENDING ? "bg-inference-pending" : "",
-    job.status.status === JobStatus.STARTED ? "bg-inference-generating" : "",
-    job.status.status === JobStatus.DEAD ? "bg-inference-error" : "",
-  );
-
-  const statusText = "".concat(
-    job.status.status === JobStatus.PENDING ? "Pending..." : "",
-    job.status.status === JobStatus.STARTED ? "Generating..." : "",
-    job.status.status === JobStatus.DEAD ? "Error" : "",
-  );
-  return (
-    <div className={className}>
-      {job.status.status === JobStatus.DEAD && (
-        <FontAwesomeIcon icon={faCircleXmark} />
-      )}
-      {job.status.status !== JobStatus.DEAD && (
-        <FontAwesomeIcon icon={faSpinnerThird} spin />
-      )}
-      <H5 className="grow">{statusText}</H5>
-      {job.status.status === JobStatus.DEAD && (
-        <ButtonIcon
-          icon={faXmark}
-          onClick={() => {
-            console.log(job);
-          }}
-        />
-      )}
-    </div>
-  );
-};

app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/AudioTab/pageAudioLibrary.tsx

@@ -12,7 +12,7 @@ import {
 
 import { AudioItemElements } from "./audioItemElements";
 import { TabTitle } from "~/pages/PageEnigma/comps/SidePanelTabs/comps/TabTitle";
-import { InferenceElement } from "./inferenceElement";
+import { InferenceElement } from "./audioInferenceElement";
 import { AssetFilterOption } from "~/enums";
 import { AudioTabPages } from "~/pages/PageEnigma/enums";
 
@@ -31,7 +31,7 @@ export const PageAudioLibrary = ({
     AssetFilterOption.FEATURED,
   );
   const filteredAudioItems =
-    selectedFilter === AssetFilterOption.FEATURED
+    selectedFilter === AssetFilterOption.MINE
       ? audioItems.value ?? []
       : userAudioItems.value ?? [];
   const [currentPage, setCurrentPage] = useState<number>(0);

app/utilities.ts

@@ -34,6 +34,17 @@ export const isNumberString = (value: string) => {
   return !isNaN(Number(value));
 };
 
+export const isJobStatusError = (curr: JobStatus) => {
+  if (
+    curr === JobStatus.ATTEMPT_FAILED ||
+    curr === JobStatus.COMPLETE_FAILURE ||
+    curr === JobStatus.DEAD
+  ) {
+    return true;
+  }
+  return false;
+};
+
 export const getFileName = (file: File) => {
   return file.name.substring(0, file.name.lastIndexOf("."));
 };