diff --git a/packages/components/src/api/model_inference/GetJobStatus.ts b/packages/components/src/api/model_inference/GetJobStatus.ts index b5150bb121..e211980a21 100644 --- a/packages/components/src/api/model_inference/GetJobStatus.ts +++ b/packages/components/src/api/model_inference/GetJobStatus.ts @@ -2,43 +2,50 @@ import MakeRequest from "../MakeRequest"; import { UserDetailsLight } from "../_common/UserDetailsLight"; export interface RequestDetails { - inference_category: string, - maybe_model_type?: string, - maybe_model_token?: string, - maybe_model_title?: string, - maybe_raw_inference_text?: string, + 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, + status: string; + maybe_extra_status_description?: string; + maybe_failure_category?: string; + attempt_count: number; + progress_percentage: number; } export interface ResultDetails { - entity_type: string, - entity_token: string, - maybe_public_bucket_media_path?: string, + 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, + job_token: string; + request: RequestDetails; + status: StatusDetails; + maybe_result?: ResultDetails; + created_at: Date; + updated_at: Date; } export interface GetJobStatusRequest {} export interface GetJobStatusResponse { success: boolean; - state: JobStatus + state: JobStatus; } -export const GetJobStatus = MakeRequest({ +export const GetJobStatus = MakeRequest< + string, + GetJobStatusRequest, + GetJobStatusResponse, + {} +>({ method: "GET", - routingFunction: (jobToken: string) =>`/v1/model_inference/job_status/${jobToken}`, + routingFunction: (jobToken: string) => + `/v1/model_inference/job_status/${jobToken}`, }); diff --git a/packages/components/src/api/model_inference/GetModelInferenceJobStatus.ts b/packages/components/src/api/model_inference/GetModelInferenceJobStatus.ts index 3610bcf052..a0655d319d 100644 --- a/packages/components/src/api/model_inference/GetModelInferenceJobStatus.ts +++ b/packages/components/src/api/model_inference/GetModelInferenceJobStatus.ts @@ -1,80 +1,88 @@ import { ApiConfig } from "../ApiConfig"; export interface GetModelInferenceJobStatusSuccessResponse { - success: boolean, - state: ModelInferenceJobStatus, + success: boolean; + state: ModelInferenceJobStatus; } export interface ModelInferenceJobStatus { // Job primary key - job_token: string, + job_token: string; - request: RequestDetails, - status: StatusDetails, - maybe_result?: ResultDetails, - - created_at: Date, - updated_at: Date, + request: RequestDetails; + status: StatusDetails; + maybe_result?: ResultDetails; + + created_at: Date; + updated_at: Date; } export interface RequestDetails { - inference_category: string, + inference_category: string; - maybe_model_type?: string, - maybe_model_token?: string, - maybe_model_title?: string, + maybe_model_type?: string; + maybe_model_token?: string; + maybe_model_title?: string; - maybe_raw_inference_text?: string, + maybe_raw_inference_text?: string; } export interface StatusDetails { - status: string, - maybe_extra_status_description?: string, - maybe_failure_category?: string, - attempt_count: number, + status: string; + maybe_extra_status_description?: string; + maybe_failure_category?: string; + attempt_count: number; + progress_percentage: number; } export interface ResultDetails { - entity_type: string, - entity_token: string, + entity_type: string; + entity_token: string; - maybe_public_bucket_media_path?: string, + maybe_public_bucket_media_path?: string; } export interface GetModelInferenceJobStatusErrorResponse { - success: boolean, + success: boolean; } -export type GetModelInferenceJobStatusResponse = GetModelInferenceJobStatusSuccessResponse | GetModelInferenceJobStatusErrorResponse; +export type GetModelInferenceJobStatusResponse = + | GetModelInferenceJobStatusSuccessResponse + | GetModelInferenceJobStatusErrorResponse; -export function GetModelInferenceJobStatusIsOk(response: GetModelInferenceJobStatusResponse): response is GetModelInferenceJobStatusSuccessResponse { +export function GetModelInferenceJobStatusIsOk( + response: GetModelInferenceJobStatusResponse +): response is GetModelInferenceJobStatusSuccessResponse { return response?.success === true; } -export function GetModelInferenceJobStatusIsError(response: GetModelInferenceJobStatusResponse): response is GetModelInferenceJobStatusErrorResponse { +export function GetModelInferenceJobStatusIsError( + response: GetModelInferenceJobStatusResponse +): response is GetModelInferenceJobStatusErrorResponse { return response?.success === false; } -export async function GetModelInferenceJobStatus(jobToken: string) : Promise -{ +export async function GetModelInferenceJobStatus( + jobToken: string +): Promise { const endpoint = new ApiConfig().getModelInferenceJobStatus(jobToken); - + return fetch(endpoint, { - method: 'GET', - credentials: 'include', + method: "GET", + credentials: "include", headers: { - 'Accept': 'application/json', + Accept: "application/json", }, }) - .then(res => res.json()) - .then(res => { - if (res && 'success' in res) { - return res; - } else { - return { success : false }; - } - }) - .catch(e => { - return { success : false }; - }); + .then(res => res.json()) + .then(res => { + if (res && "success" in res) { + return res; + } else { + return { success: false }; + } + }) + .catch(e => { + return { success: false }; + }); } diff --git a/packages/components/src/jobs/InferenceJob.ts b/packages/components/src/jobs/InferenceJob.ts index 7a63b4a24e..17b79a88af 100644 --- a/packages/components/src/jobs/InferenceJob.ts +++ b/packages/components/src/jobs/InferenceJob.ts @@ -34,6 +34,7 @@ export class InferenceJob { jobState: JobState; maybeExtraStatusDescription: string | null; attemptCount: number; + progressPercentage: number; // Request maybeModelType?: string; @@ -56,6 +57,7 @@ export class InferenceJob { status: string = "unknown", maybeExtraStatusDescription: string | null = null, attemptCount: number = 0, + progressPercentage: number = 0, // Request maybeModelType: string | undefined = undefined, maybeModelToken: string | undefined = undefined, @@ -72,6 +74,7 @@ export class InferenceJob { this.jobState = jobStateFromString(status); this.maybeExtraStatusDescription = maybeExtraStatusDescription; this.attemptCount = attemptCount; + this.progressPercentage = progressPercentage; if (!!maybeModelType) { this.maybeModelTitle = maybeModelType; @@ -109,6 +112,7 @@ export class InferenceJob { response.status.status, response.status.maybe_extra_status_description || null, response.status.attempt_count || 0, + response.status.progress_percentage || 0, response.request.maybe_model_type, response.request.maybe_model_token, response.request.maybe_model_title, diff --git a/packages/fakeyou.com/public/locales/en/InferenceJobs.json b/packages/fakeyou.com/public/locales/en/InferenceJobs.json index b80b468c94..50f8e2f8f5 100644 --- a/packages/fakeyou.com/public/locales/en/InferenceJobs.json +++ b/packages/fakeyou.com/public/locales/en/InferenceJobs.json @@ -87,6 +87,15 @@ "STARTED": "Please wait", "UNKNOWN": "Please wait or try again" }, + "VideoWorkflow": { + "ATTEMPT_FAILED": "Video Workflow Atempt Failed", + "COMPLETE_FAILURE": "Video Workflow Failed.", + "COMPLETE_SUCCESS": "Video Workflow Complete", + "PENDING": "Pending Video Workflow ", + "STARTED": "Video Workflow In Progress", + "UNKNOWN": "Video Workflow Status Uknown", + "heading": "Video Workflow Jobs" + }, "voice_designer": { "ATTEMPT_FAILED": "Face Animation Atempt Failed", "COMPLETE_FAILURE": "Face Animation Failed.", @@ -96,4 +105,4 @@ "UNKNOWN": "Voice Designer Status Uknown", "heading": "Voice Designer Jobs" } -} \ No newline at end of file +} diff --git a/packages/fakeyou.com/src/components/common/CoverImageInput/CoverImageInput.tsx b/packages/fakeyou.com/src/components/common/CoverImageInput/CoverImageInput.tsx index 5ed6863565..bf14159b37 100644 --- a/packages/fakeyou.com/src/components/common/CoverImageInput/CoverImageInput.tsx +++ b/packages/fakeyou.com/src/components/common/CoverImageInput/CoverImageInput.tsx @@ -36,6 +36,7 @@ const UploadControl = ({ onClick, status }: UploadCtrlProps) => { , diff --git a/packages/fakeyou.com/src/components/layout/InferenceJobsList/InferenceJobsList.scss b/packages/fakeyou.com/src/components/layout/InferenceJobsList/InferenceJobsList.scss index 5606137504..fa7d55a8a9 100644 --- a/packages/fakeyou.com/src/components/layout/InferenceJobsList/InferenceJobsList.scss +++ b/packages/fakeyou.com/src/components/layout/InferenceJobsList/InferenceJobsList.scss @@ -25,7 +25,7 @@ $primary-transparent: rgba($primary, 0.75); .fy-clear-jobs-input { position: relative; height: 100%; - width: 3rem; + // width: 3rem; right: 0; .fy-clear-jobs-frame { @@ -81,6 +81,30 @@ $primary-transparent: rgba($primary, 0.75); border-radius: 0.5rem 0 0 0.5rem; margin-left: -0.5rem; padding-right: 0; + + .fy-inference-job-indicator-container { + // background-color: red; + position: relative; + height: fit-content; + } + + .fy-inference-job-progress { + text-align: center; + position: absolute; + // background-color: green; + font-size: 0.625rem; + line-height: 0.625rem; + height: 0.625rem; + // height: 100%; + top: 50%; + transform: translateY(-50%); + left: 0; + right: 0; + bottom: 0; + // margin: auto; + // display: inline-block; + // vertical-align: middle; + } } .fy-inference-job-action-frame { border-radius: 0 0.5rem 0.5rem 0; diff --git a/packages/fakeyou.com/src/components/layout/InferenceJobsList/JobItem.tsx b/packages/fakeyou.com/src/components/layout/InferenceJobsList/JobItem.tsx index 88e7a466a8..5d0c502c26 100644 --- a/packages/fakeyou.com/src/components/layout/InferenceJobsList/JobItem.tsx +++ b/packages/fakeyou.com/src/components/layout/InferenceJobsList/JobItem.tsx @@ -10,13 +10,17 @@ import { CancelJobResponse, } from "@storyteller/components/src/api/jobs/CancelJob"; import { useHover, useSlides } from "hooks"; -import { JobState } from "@storyteller/components/src/jobs/JobStates"; +import { + JobState, + jobStateCanChange, +} from "@storyteller/components/src/jobs/JobStates"; import { useHistory } from "react-router-dom"; interface JobListItem extends InferenceJob { failures: (fail: string) => string; jobStatusDescription?: any; onSelect?: any; + progressPercentage: number; resultPaths: { [key: string]: string }; t?: any; } @@ -54,11 +58,13 @@ export default function JobItem({ maybeModelTitle, maybeResultToken, onSelect, + progressPercentage, jobToken, jobState, jobStatusDescription, resultPaths, t, + ...rest }: JobListItem) { const history = useHistory(); const [hover, hoverSet = {}] = useHover({}); @@ -118,6 +124,8 @@ export default function JobItem({ } }; + const jobIsAlive = jobStateCanChange(jobState); + const makeBounce = (amount = 0, delay = 0) => ({ delay, config: { tension: 250, friction: 12 }, @@ -125,6 +133,9 @@ export default function JobItem({ }); const headingBounce = useSpring(makeBounce(8)); const subtitleBounce = useSpring(makeBounce(6, 30)); + const percentFade = useSpring({ + opacity: jobIsAlive ? 1 : 0, + }); const subtitle = maybeFailureCategory ? `${failures(maybeFailureCategory)}` : t(`subtitles.${jobStatus}`); @@ -174,7 +185,16 @@ export default function JobItem({ return ( <>
- +
+ + {progressPercentage}% + + +
diff --git a/packages/fakeyou.com/src/components/modals/InferenceJobsModal/InferenceJobsModal.tsx b/packages/fakeyou.com/src/components/modals/InferenceJobsModal/InferenceJobsModal.tsx index 1b0a7a5875..c29f836b49 100644 --- a/packages/fakeyou.com/src/components/modals/InferenceJobsModal/InferenceJobsModal.tsx +++ b/packages/fakeyou.com/src/components/modals/InferenceJobsModal/InferenceJobsModal.tsx @@ -1,10 +1,9 @@ -import React, { useState } from "react"; // useState +import React from "react"; // useState import InferenceJobsList from "components/layout/InferenceJobsList"; import { FrontendInferenceJobType } from "@storyteller/components/src/jobs/InferenceJob"; -import { TempSelect as Select, JobsClearButton } from "components/common"; -import { enumToKeyArr } from "resources"; +import { JobsClearButton } from "components/common"; import ModalHeader from "../ModalHeader"; -import { useInferenceJobs, useLocalize, useSession } from "hooks"; +import { useInferenceJobs, useLocalize } from "hooks"; interface Props { handleClose?: any; @@ -18,19 +17,9 @@ export default function InferenceJobsModal({ showModalHeader = true, ...rest }: Props) { - const { canAccessStudio } = useSession(); const { clearJobs, clearJobsStatus, someJobsAreDone } = useInferenceJobs(); - const presetFilter = enumToKeyArr(FrontendInferenceJobType)[inJobType]; - const [jobType, jobTypeSet] = useState(inJobType > -1 ? presetFilter : "All"); - const typeObj = ["All", ...Object.values(FrontendInferenceJobType)]; - const options = typeObj - .filter(val => isNaN(Number(val))) - .map(value => { - if (typeof value === "string") return { value, label: value }; - return { label: "", value: "" }; - }); const { t } = useLocalize("InferenceJobs"); - const selectedType = typeObj.indexOf(jobType) - 1; + const selectedType = 0; const failures = (fail = "") => { switch (fail) { default: @@ -47,15 +36,6 @@ export default function InferenceJobsModal({ /> )} - {canAccessStudio() && ( -