inference panel and inference manager are doing great

app/hooks/index.tsx

@@ -0,0 +1 @@
+export { useInferenceJobManager } from "./useInferenceJobManager";

app/hooks/useInferenceJobManager/index.tsx

@@ -0,0 +1 @@
+export { useInferenceJobManager } from './useInferenceJobManager';

app/hooks/useInferenceJobManager/useInferenceJobManager.tsx

@@ -0,0 +1,116 @@
+import { useEffect, useCallback } from "react";
+import { useSignals } from "@preact/signals-react/runtime";
+import { inferenceJobs, updateInferenceJob } from '~/pages/PageEnigma/store/inferenceJobs';
+
+export enum JobState {
+  UNKNOWN = "unknown", // Only on frontend.
+  PENDING = "pending",
+  STARTED = "started",
+  COMPLETE_SUCCESS = "complete_success",
+  COMPLETE_FAILURE = "complete_failure",
+  ATTEMPT_FAILED = "attempt_failed",
+  DEAD = "dead",
+  CANCELED_BY_USER = "canceled_by_user",
+}
+export interface RequestDetails {
+  inference_category: string,
+  maybe_model_type?: string,
+  maybe_model_token?: string,
+  maybe_model_title?: string,
+  maybe_raw_inference_text?: string,
+}
+
+export interface StatusDetails {
+  status: string,
+  maybe_extra_status_description?: string,
+  maybe_failure_category?: string,
+  attempt_count: number,
+}
+
+export interface ResultDetails {
+  entity_type: string,
+  entity_token: string,
+  maybe_public_bucket_media_path?: string,
+}
+
+export interface JobStatus {
+  job_token: string,
+  request: RequestDetails,
+  status: StatusDetails,
+  maybe_result?: ResultDetails,
+  created_at: Date,
+  updated_at: Date,
+}
+
+export interface GetJobStatusResponse {
+  success: boolean;
+  state: JobStatus
+}
+type ErrorResponse = {
+  success: boolean;
+  error_reason: string;
+}
+export async function GetInferenceJobStatus(jobToken:string) : Promise<GetJobStatusResponse | null> {
+
+  const endpoint = `https://api.fakeyou.com/v1/model_inference/job_status/${jobToken}`;
+  
+  return await fetch(endpoint, {
+    method: 'GET',
+    headers: {
+      'Accept': 'application/json',
+    },
+    credentials: 'include',
+  })
+  .then(res => res.json())
+  .then(res => {
+    const response : GetJobStatusResponse = res;
+    return response;
+  })
+  .catch(e => {
+    return null;
+  });
+}
+
+function shouldKeepPolling(currStatus:string){
+  if(currStatus === JobState.PENDING 
+    || currStatus === JobState.STARTED
+  ) return true;
+  return false
+}
+
+export const useInferenceJobManager = () => {
+  useSignals();
+
+  const pollInferenceJobs = useCallback(()=>{
+    if(inferenceJobs.value.length > 0 ){
+      inferenceJobs.value.forEach(job=>{
+        if(shouldKeepPolling(job.job_status)){
+          GetInferenceJobStatus(job.job_id).then((res:GetJobStatusResponse|null)=>{
+            if(res!==null){
+              if(res.state.status.status !== job.job_status){
+                console.log(`${res.state.job_token} has new state: ${res.state.status.status}`)
+                if(res.state.status.status === JobState.COMPLETE_SUCCESS){
+                  console.log(res.state);
+                }
+                updateInferenceJob({
+                  ...job,
+                  job_status: res.state.status.status
+                })
+              }
+            }
+          });
+        }
+      });
+    }
+  }, []);
+
+  useEffect(()=>{
+    console.log('useInferenceJobManager Mounted');
+    const intervalTimer = setInterval(pollInferenceJobs,2000);
+    return()=>{
+      console.log('useInferenceJobManager Dismounted');
+      clearInterval(intervalTimer);
+    }
+  },[]);
+};
+

app/modules/DialogueInference/DialogueInference.tsx

@@ -1,33 +1,12 @@
-import { useEffect, useState } from "react";
-
 import { useSignals } from "@preact/signals-react/runtime";
 import { faClipboard, faClipboardList } from "@fortawesome/pro-solid-svg-icons";
 import { inferenceJobs } from "~/pages/PageEnigma/store/inferenceJobs";
 import { ButtonDialogue } from "../ButtonDialogue";
 import { H4, P } from "~/components";
-import Queue from "~/pages/PageEnigma/Queue/Queue";
-import { QueueNames } from "~/pages/PageEnigma/Queue/QueueNames";
-import { InferenceJob } from "~/pages/PageEnigma/models";
 
 
 export const DialogueInference = () =>{
   useSignals();
-  const [inferenceJobsState, setInferenceJobsState] = useState<InferenceJob[]>(inferenceJobs.value);
-
-  const handleInferenceJobs = (data:any)=>{
-    console.log('Dialogue Inference > useEffect >>>');
-    console.log(data);
-    console.log(inferenceJobs.value);
-    setInferenceJobsState([...inferenceJobs.value]);
-    console.log('<<< Dialogue Inference');
-  }
-  useEffect(()=>{
-    Queue.subscribe(
-      QueueNames.TO_INFERENCE,
-      handleInferenceJobs,
-    );
-
-  },[]);
 
   const buttonIcon = inferenceJobs.value.length > 0 
     ? faClipboardList : faClipboard;
@@ -41,15 +20,15 @@ export const DialogueInference = () =>{
       }}
     >
       <H4>List :-</H4>
-      {inferenceJobsState.length > 0 &&
+      {inferenceJobs.value.length > 0 &&
         <ul>
-          {inferenceJobsState.map(job=>
-            <li key={job.job_id}>{job.jobt_type} : {job.job_id}</li>
+          {inferenceJobs.value.map(job=>
+            <li key={job.job_id}>{job.job_type}: {job.job_status} : {job.job_id}</li>
           )}
         </ul>
       }
       {
-        inferenceJobsState.length === 0 && 
+        inferenceJobs.value.length === 0 && 
         <P>no inference jobs</P>
       }
     </ButtonDialogue>

app/pages/PageEnigma/PageEnigma.tsx

@@ -3,12 +3,16 @@ import { TrackProvider } from "~/pages/PageEnigma/contexts/TrackContext/TrackPro
 import { AppUIProvider } from "~/pages/PageEnigma/contexts/AppUiContext";
 import { EngineProvider } from "~/pages/PageEnigma/contexts/EngineProvider";
 import { DragComponent } from "~/pages/PageEnigma/comps/DragComponent/DragComponent";
+
+import { useInferenceJobManager } from "~/hooks";
+
 // import { toast, ToastBar, Toaster } from "react-hot-toast";
 // import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 // import {
 //   faTriangleExclamation,
 //   faXmark,
 // } from "@fortawesome/pro-solid-svg-icons";
+
 import { useEffect } from "react";
 import { useSignals } from "@preact/signals-react/runtime";
 import {
@@ -20,6 +24,7 @@ import {
 
 export const PageEnigma = () => {
   useSignals();
+  useInferenceJobManager();
   useEffect(() => {
     function setPage() {
       // TODO address this issue with zooming

app/pages/PageEnigma/Queue/Queue.ts

@@ -1,19 +1,20 @@
-import { toInferenceActions } from './toInferenceActions';
-
 import { fromEngineActions } from "~/pages/PageEnigma/Queue/fromEngineActions";
 import { toEngineActions } from "~/pages/PageEnigma/Queue/toEngineActions";
 
 import {
   QueueClip,
   QueueKeyframe,
-  InferenceJob,
   UpdateTime,
 } from "~/pages/PageEnigma/models";
 import { toTimelineActions } from "./toTimelineActions";
 
-type UnionedActionTypes = fromEngineActions | toEngineActions | toTimelineActions | toInferenceActions;
-type UnionedDataTypes = QueueClip | UpdateTime | QueueKeyframe | ClipUI[] | MediaItem | InferenceJob;
+type UnionedActionTypes = fromEngineActions | toEngineActions | toTimelineActions;
+type UnionedDataTypes = QueueClip | UpdateTime | QueueKeyframe | ClipUI[] | MediaItem;
 
+export type QueueSubscribeType = {
+    action: UnionedActionTypes;
+    data: UnionedDataTypes;
+}
 import { ClipUI } from "../datastructures/clips/clip_ui";
 import { MediaItem } from "~/pages/PageEnigma/models";
 class Queue {
@@ -54,10 +55,7 @@ class Queue {
 
   public subscribe(
     queueName: string,
-    onMessage: (entry: {
-      action: UnionedActionTypes;
-      data: UnionedDataTypes;
-    }) => void,
+    onMessage: (entry: QueueSubscribeType) => void,
   ) {
     this._subscribers[queueName] = onMessage;
     while (this._queue[queueName]?.length) {

app/pages/PageEnigma/Queue/QueueNames.ts

@@ -2,5 +2,4 @@ export enum QueueNames {
   FROM_ENGINE = "FROM_ENGINE",
   TO_ENGINE = "TO_ENGINE",
   TO_TIMELINE = "TO_TIMELINE",
-  TO_INFERENCE = "TO_INFERENCE", 
 }

app/pages/PageEnigma/comps/DialogueTTS/DialogueTTS.tsx

@@ -64,7 +64,8 @@ export const DialogueTTS = ()=>{
       addInferenceJob({
         version:1,
         job_id: ttsState.inferenceToken,
-        jobt_type: ttsState.inferenceJobType,
+        job_type: ttsState.inferenceJobType,
+        job_status: "pending",
       })
     }
   },[ttsState.hasEnqueued]);
@@ -157,7 +158,7 @@ export const DialogueTTS = ()=>{
           onChange={handleTextInput}
         />
         <div className="mt-6 flex gap-2">
-          <div className="w-40 h-12">
+          <div className="w-36 h-12">
             {!ttsState.hasAudio && !ttsState.hasEnqueued &&
               <Button
                 className="w-full h-full text-xl "
@@ -186,7 +187,17 @@ export const DialogueTTS = ()=>{
           </div>
         </div>
 
-        <div className="mt-6 flex justify-end gap-2">
+        <div className="mt-6 flex justify-between gap-2">
+          { ttsState.hasEnqueued &&
+            <Button
+              type="button"
+              className="w-36"
+              // onClick={}
+            >
+              Generate Another
+            </Button>
+          }
+          <span />
           <Button
             type="button"
             onClick={handleClose}

app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/AudioTabComponent.tsx

@@ -1,18 +1,28 @@
+import { useContext } from "react";
+import { twMerge } from "tailwind-merge";
+import { useSignals } from "@preact/signals-react/runtime";
+import { faCirclePlus } from "@fortawesome/pro-solid-svg-icons";
+
+import { AppUiContext } from "~/pages/PageEnigma/contexts/AppUiContext";
+import { APPUI_ACTION_TYPES } from "~/pages/PageEnigma/reducers";
 import { audioFilter, audioItems } from "~/pages/PageEnigma/store";
 import { AssetFilterOption } from "~/pages/PageEnigma/models";
-import { useSignals } from "@preact/signals-react/runtime";
+
+import { Button } from "~/components";
+
 import { ItemElements } from "~/pages/PageEnigma/comps/SidePanelTabs/itemTabs/ItemElements";
-import { Button, H4 } from "~/components";
-import { faCirclePlus } from "@fortawesome/pro-solid-svg-icons";
-import { twMerge } from "tailwind-merge";
-import { inferenceJobs } from "~/pages/PageEnigma/store/inferenceJobs";
+
+
 
 
 export const AudioTabComponent = () => {
-  const singals = useSignals();
-  // console.log('Audio Tab Component > Singals >>>')
-  // console.log(inferenceJobs);
-  // console.log('<<<');
+  useSignals();
+  const [, dispatchAppUiState] = useContext(AppUiContext);
+  const handleOpenTtsDialogue = ()=>{
+      dispatchAppUiState({
+      type: APPUI_ACTION_TYPES.OPEN_DIALOGUE_TTS
+    })
+  }
   return (
     <>
       <div className="w-full overflow-x-auto">
@@ -58,6 +68,7 @@ export const AudioTabComponent = () => {
           icon={faCirclePlus}
           variant="action"
           className="w-full py-3 text-sm font-medium"
+          onClick={handleOpenTtsDialogue}
         >
           Generate Audio
         </Button>
@@ -67,19 +78,6 @@ export const AudioTabComponent = () => {
           items={audioItems.value}
           assetFilter={audioFilter.value}
         />
-      
-      <H4 className="mt-10">inference jobs</H4>
-      {inferenceJobs.value.length > 0 &&
-        <ul>
-          {inferenceJobs.value.map(job=>
-            <li key={job.job_id}>{job.jobt_type} : {job.job_id}</li>
-          )}
-        </ul>
-      }
-      {
-        inferenceJobs.value.length === 0 && 
-        <p>no inference jobs</p>
-      }
       </div>
     </>
   );

app/pages/PageEnigma/models/inferenceJobs.tsx

@@ -1,5 +1,6 @@
 export interface InferenceJob {
   version: number;
   job_id: string;
-  jobt_type: string;
+  job_type: string;
+  job_status: string;
 }

app/pages/PageEnigma/store/inferenceJobs.ts

@@ -1,11 +1,5 @@
 import { signal } from "@preact/signals-core";
 
-import Queue from  "~/pages/PageEnigma/Queue/Queue";
-import { QueueNames } from "../Queue/QueueNames";
-import { toInferenceActions } from "../Queue/toInferenceActions";
-// import * as uuid from "uuid";
-// import { signal } from "@preact/signals-core";
-
 import { InferenceJob } from "../models";
 
 export const inferenceJobs = signal<InferenceJob[]>([]);
@@ -13,12 +7,17 @@ export const inferenceJobs = signal<InferenceJob[]>([]);
 export function addInferenceJob(
   inferenceJob: InferenceJob){
   const existingInferenceJobs = inferenceJobs.value;
-  
   existingInferenceJobs.push(inferenceJob);
+  inferenceJobs.value = [...existingInferenceJobs];
+}
 
-  Queue.publish({
-    queueName: QueueNames.TO_INFERENCE,
-    action: toInferenceActions.ADD_TTS_JOB,
-    data: inferenceJob,
-  });
+export function updateInferenceJob(
+  inferenceJob: InferenceJob){
+  const existingInferenceJobs = inferenceJobs.value;
+  existingInferenceJobs.forEach(job=>{
+    if(job.job_id === inferenceJob.job_id){
+      job.job_status = inferenceJob.job_status
+    }
+  })
+  inferenceJobs.value = [...existingInferenceJobs];
 }

app/root.tsx

@@ -18,6 +18,12 @@ import { LoadingDotsBricks } from "~/components";
 import { TopBar } from "./modules/TopBar";
 import { TopBarInnerContext } from "~/contexts/TopBarInner";
 import { AuthenticationProvider, UserInfo } from "./contexts/Authentication";
+// The following import prevents a Font Awesome icon server-side rendering bug,
+// where the icons flash from a very large icon down to a properly sized one:
+import '@fortawesome/fontawesome-svg-core/styles.css';
+// Prevent fontawesome from adding its CSS since we did it manually above:
+import { config } from '@fortawesome/fontawesome-svg-core';
+config.autoAddCss = false; /* eslint-disable import/first */
 
 export const links: LinksFunction = () => [
   {