diff --git a/app/components/ButtonIcon.tsx b/app/components/ButtonIcon.tsx index a2679c6c1d..124ca12943 100644 --- a/app/components/ButtonIcon.tsx +++ b/app/components/ButtonIcon.tsx @@ -1,23 +1,24 @@ import { IconDefinition } from "@fortawesome/fontawesome-svg-core"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { FontAwesomeIcon, FontAwesomeIconProps } from "@fortawesome/react-fontawesome"; import { twMerge } from "tailwind-merge"; -interface ButtonIconProps { - icon: IconDefinition; +interface ButtonIconProps extends FontAwesomeIconProps { + // icon: IconDefinition; onClick: () => void; className?: string; - fill?: boolean; + hoverFill?: boolean; } export const ButtonIcon = ({ icon, + size, onClick, className : propsClassName, - fill = false, + hoverFill = false, }: ButtonIconProps) => { const className = twMerge( "flex h-8 w-8 items-center justify-center rounded-lg transition-all duration-150", - fill + hoverFill ? "bg-ui-controls-button hover:bg-ui-controls-button/[0.75]" : "bg-transparent hover:bg-ui-panel/[0.4]", propsClassName, @@ -25,7 +26,7 @@ export const ButtonIcon = ({ return ( ); }; diff --git a/app/components/TransitionDialogue.tsx b/app/components/TransitionDialogue.tsx index 103cd4147a..73003bd2d4 100644 --- a/app/components/TransitionDialogue.tsx +++ b/app/components/TransitionDialogue.tsx @@ -37,7 +37,7 @@ export const TransitionDialogue = ({ leaveFrom="opacity-100 scale-100" leaveTo="opacity-0 scale-95" > - + {title && (
{children}
diff --git a/app/modules/DialogueInference/DialogueInference.tsx b/app/modules/DialogueInference/DialogueInference.tsx index 0b27257eb8..1439dd4d37 100644 --- a/app/modules/DialogueInference/DialogueInference.tsx +++ b/app/modules/DialogueInference/DialogueInference.tsx @@ -1,9 +1,110 @@ 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 { + faClipboard, + faClipboardList, + faCircleCheck, + faCircleExclamation, + faLoader, + faSpinner, + faSquareXmark, +} from "@fortawesome/pro-solid-svg-icons"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { deleteInferenceJob, inferenceJobs } from "~/pages/PageEnigma/store/inferenceJobs"; +import { InferenceJob } from "~/pages/PageEnigma/models"; + +import { ButtonDialogue } from "../ButtonDialogue"; +import { ButtonIcon, H4,H6,P } from "~/components"; +import { JobState } from "~/hooks/useInferenceJobManager/useInferenceJobManager"; + +const printJobType = (jobType : string)=>{ + switch (jobType){ + case "generic": + return "Text to Speech"; + default: + return "Unknown"; + } +}; + +const printJobStatus = (jobStatus : string)=>{ + switch (jobStatus){ + case JobState.PENDING: + return "Adding to the queue."; + case JobState.STARTED: + return "Processing, please wait..."; + case JobState.COMPLETE_SUCCESS: + return "Completed! See Audio Panel for the result. file." + default: + return "Unknown Status"; + } +}; + +const JobStatusIcon = ({jobStatus} : {jobStatus:string})=>{ + switch (jobStatus){ + case JobState.PENDING:{ + return( + + ); + } + case JobState.STARTED:{ + return( + + ); + } + case JobState.COMPLETE_SUCCESS:{ + return( + + ); + } + default:{ + return( + + ); + } + } +}; + +const InferenceItem = ({job}:{job:InferenceJob}) => { + // console.log(job); + return( +
  • + +
    +

    {printJobType(job.job_type)}

    +
    {printJobStatus(job.job_status)}
    +
    + {job.job_status === JobState.COMPLETE_SUCCESS && +
    + { + deleteInferenceJob(job); + }} + /> +
    + } +
    • + ); +}; export const DialogueInference = () =>{ useSignals(); @@ -13,23 +114,26 @@ export const DialogueInference = () =>{ return( -

    List :-

    {inferenceJobs.value.length > 0 && -
      +
        {inferenceJobs.value.map(job=> -
      • {job.job_type}: {job.job_status} : {job.job_id}
        • + )}
      } { inferenceJobs.value.length === 0 && -

      no inference jobs

      +

      You currently have no running proccesses.

      } ); diff --git a/app/modules/TopBar/AuthButtons.tsx b/app/modules/TopBar/AuthButtons.tsx index b009f98b82..1f7474667a 100644 --- a/app/modules/TopBar/AuthButtons.tsx +++ b/app/modules/TopBar/AuthButtons.tsx @@ -1,10 +1,14 @@ import { useContext, } from "react"; +import { useSignals } from "@preact/signals-react/runtime"; import { AuthenticationContext } from "~/contexts/Authentication"; import { Button, ButtonLink } from "~/components"; import { DialogueInference } from "../DialogueInference"; +import { inferenceJobs } from "~/pages/PageEnigma/store/inferenceJobs"; export const AuthButtons = ()=>{ + useSignals(); + const {authState, logout} = useContext(AuthenticationContext); const handleLogout = ()=>{ if(logout)logout(); diff --git a/app/pages/PageEnigma/comps/Controls3D/Controls3D.tsx b/app/pages/PageEnigma/comps/Controls3D/Controls3D.tsx index a5ad366e1f..fed4fa9829 100644 --- a/app/pages/PageEnigma/comps/Controls3D/Controls3D.tsx +++ b/app/pages/PageEnigma/comps/Controls3D/Controls3D.tsx @@ -66,7 +66,7 @@ export const Controls3D = () => {
      - + diff --git a/app/pages/PageEnigma/store/inferenceJobs.ts b/app/pages/PageEnigma/store/inferenceJobs.ts index d9bae726bd..3f79a68714 100644 --- a/app/pages/PageEnigma/store/inferenceJobs.ts +++ b/app/pages/PageEnigma/store/inferenceJobs.ts @@ -26,4 +26,20 @@ export function updateInferenceJob( } }) inferenceJobs.value = [...existingInferenceJobs]; +} + +export function deleteInferenceJob( + deletableJob: InferenceJob){ + console.log('delete') + let newList:InferenceJob[] = [] + inferenceJobs.value.forEach(job=>{ + if(job.job_id !== deletableJob.job_id) { + newList.push(job); + } else { + // do nothing + } + }); + console.log(newList); + inferenceJobs.value = [...newList]; + } \ No newline at end of file