diff --git a/packages/components/src/jobs/InferenceJob.ts b/packages/components/src/jobs/InferenceJob.ts index 4ff6ad37db..eee50ef525 100644 --- a/packages/components/src/jobs/InferenceJob.ts +++ b/packages/components/src/jobs/InferenceJob.ts @@ -13,6 +13,7 @@ export enum FrontendInferenceJobType { ConvertFbxtoGltf, EngineComposition, VideoWorkflow, + VideoStyleTransfer, } // NB: Many of these fields are optional despite the response payload containing them diff --git a/packages/fakeyou.com/src/App.tsx b/packages/fakeyou.com/src/App.tsx index 7307cefdbe..2de4c54291 100644 --- a/packages/fakeyou.com/src/App.tsx +++ b/packages/fakeyou.com/src/App.tsx @@ -212,6 +212,8 @@ function initInferenceJobsByCategoryMap(): Map< inferenceJobsByCategory.set(FrontendInferenceJobType.ConvertFbxtoGltf, []); inferenceJobsByCategory.set(FrontendInferenceJobType.VideoWorkflow, []) return inferenceJobsByCategory; + inferenceJobsByCategory.set(FrontendInferenceJobType.VideoStyleTransfer, []) + return inferenceJobsByCategory; } function isMacOs() { diff --git a/packages/fakeyou.com/src/v2/view/PageContainer.tsx b/packages/fakeyou.com/src/v2/view/PageContainer.tsx index 57e3e59895..ae30a4966c 100644 --- a/packages/fakeyou.com/src/v2/view/PageContainer.tsx +++ b/packages/fakeyou.com/src/v2/view/PageContainer.tsx @@ -8,6 +8,7 @@ import { ModerationIpBanListFc } from "./pages/moderation/moderation_ip_ban_list import { ModerationViewIpBanFc } from "./pages/moderation/moderation_view_ip_ban/ModerationViewIpBanFc"; import FaceAnimator from "./pages/face_animator"; import VideoMocap from "./pages/video_mocap"; +import VideoStyleTransfer from "./pages/video_styletransfer"; import { ProfileEditFc } from "./pages/profile/profile_edit/ProfileEditFc"; import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper"; import { SessionSubscriptionsWrapper } from "@storyteller/components/src/session/SessionSubscriptionsWrapper"; @@ -866,6 +867,20 @@ class PageContainer extends React.Component< /> + + + + void; + inferenceJobs: Array; + inferenceJobsByCategory: Map>; + sessionWrapper: SessionWrapper; +}){ + const debug = false; + const {t} = useLocalize("VideoStyleTransfer"); + const { NO_FILE } = states; + const [pageState, dispatchPageState] = useReducer(reducer, { + status: NO_FILE, + }); + + const { enqueueInferenceJob } = props; + useInferenceJobs( + FrontendInferenceJobType.VideoWorkflow + ); + useEffect(() => { + if ( + pageState.status === states.WORKFLOW_ENQUEUED && + pageState.inferenceJobToken + ) { + enqueueInferenceJob( + pageState.inferenceJobToken, + FrontendInferenceJobType.VideoWorkflow + ); + dispatchPageState({ + type: "enqueueFilterSuccess", + payload: { inferenceJobToken: undefined }, + }); + } + }, [pageState, enqueueInferenceJob]); + + if (!props.sessionWrapper.canAccessStudio()) { + return + } + + return( + + {debug &&

{`Status:${pageState.status} MediaToken:${pageState.mediaFileToken}`}

} + + + + + ); +} \ No newline at end of file diff --git a/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/compJoblist.tsx b/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/compJoblist.tsx new file mode 100644 index 0000000000..2e88aced7a --- /dev/null +++ b/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/compJoblist.tsx @@ -0,0 +1,27 @@ +import React from 'react'; +import { Analytics } from "common/Analytics"; +import InferenceJobsList from "components/layout/InferenceJobsList"; +import { FrontendInferenceJobType } from "@storyteller/components/src/jobs/InferenceJob"; + +export default function CompVideoStyleTransferJobList({ + showNoJobs = false +}:{ + showNoJobs?:boolean +}){ + const failures = (fail = "") => { + switch (fail) { + case "sample case": + return "Sample Case, this should not have been shown"; + default: + return "Unknown failure"; + } + }; + return ( + Analytics.voiceConversionClickDownload(), + jobType: FrontendInferenceJobType.VideoStyleTransfer, + }}/> + ); +} \ No newline at end of file diff --git a/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageJoblist.tsx b/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageJoblist.tsx new file mode 100644 index 0000000000..7d4f9d80b8 --- /dev/null +++ b/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageJoblist.tsx @@ -0,0 +1,37 @@ +import React, { memo } from 'react' +import { NavLink } from 'react-router-dom'; +import { states, Action, State } from "../reducer"; +import { Button, Spinner } from 'components/common'; + +import CompJoblist from './compJoblist'; + +export default memo (function PageWorkflowJoblist({ + t, pageState, dispatchPageState, parentPath +}: { + debug?: boolean; + t: Function; + pageState: State; + parentPath: string + dispatchPageState: (action: Action) => void; +}) { + + return( + <> +
+ +
+ {pageState.status === states.WORKFLOW_ENQUEUEING && +
+

Requesting Filter Job

+ +
+ } + + + ); +}); \ No newline at end of file diff --git a/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVideoProvision.tsx b/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVideoProvision.tsx new file mode 100644 index 0000000000..8027c0e6a1 --- /dev/null +++ b/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVideoProvision.tsx @@ -0,0 +1,54 @@ +import React from "react"; + +import { Panel, Tabs } from "components/common"; + +import { State, Action } from "../reducer"; +import TabContentUpload from "./tabContentUpload"; +import TabContentLibrary from "./tabContentLibrary"; +import CompJoblist from "./compJoblist"; + +export default function PageVideoProvision({ + debug=false, parentPath, t, pageState, dispatchPageState +}: { + debug?: boolean; + parentPath: string; + t: Function; + pageState: State; + dispatchPageState: (action: Action) => void; +}) { + + const tabs = [ + { + label: t("tabTitle.upload"), + content: , + to: `${parentPath}/upload`, + padding: true, + }, + { + label: t("tabTitle.library"), + content: , + to: `${parentPath}/select-media`, + padding: true, + }, + ]; + + return( + <> + +
+
+ +
+
+

{t("video.instruction")}

+
+
+ + + + ); +} \ No newline at end of file diff --git a/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/tabContentLibrary.tsx b/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/tabContentLibrary.tsx new file mode 100644 index 0000000000..96ccb1b501 --- /dev/null +++ b/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/tabContentLibrary.tsx @@ -0,0 +1,62 @@ +import React from "react"; +import { NavLink } from "react-router-dom"; +import { states, Action, State } from "../reducer"; +import { Button } from "components/common"; +import SelectModal, { SelectModalData } from "components/common/SelectModal/SelectModal"; +import VideoFakeyou from "components/common/VideoFakeyou"; + +export default function TabContentLibrary({ + t, pageState, dispatchPageState +}: { + t: Function; + pageState: State; + dispatchPageState: (action: Action) => void; +}){ + const handleProceed = ()=>{ + dispatchPageState({type: "loadFile"}) + } + const handleOnSelect = (data:SelectModalData)=>{ + if (data.token !== ""){ + dispatchPageState({ + type: "selectedFile", + payload: {mediaFileToken: data.token} + }); + }else{ + dispatchPageState({type: "clearedFile"}); + }; + }; + + return ( +
+
+ + {pageState.mediaFileToken && + + } +
+ {pageState.status === states.FILE_SELECTED && +
+ +
+ } +
+ ); +} diff --git a/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/tabContentUpload.tsx b/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/tabContentUpload.tsx new file mode 100644 index 0000000000..73f19c477b --- /dev/null +++ b/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/tabContentUpload.tsx @@ -0,0 +1,98 @@ +import React from "react"; +import { Redirect } from "react-router-dom"; +import { v4 as uuidv4 } from "uuid"; + +import { UploadMedia } from "@storyteller/components/src/api/media_files/UploadMedia"; +import { useFile } from "hooks"; +import { ErrorMessage, VideoInput, Spinner } from "components/common"; +import { states, Action, State } from "../reducer"; + +export default function TabContentUpload({ + debug=false, t, pageState, dispatchPageState +}: { + debug?: boolean; + t: Function; + pageState: State; + dispatchPageState: (action: Action) => void; +}) { + const videoProps = useFile({}); + const {NO_FILE, FILE_STAGED, FILE_SELECTED, FILE_UPLOADING, FILE_UPLOADED} = states; + + const makeVideoUploadRequest = () => ({ + uuid_idempotency_token: uuidv4(), + file: videoProps.file, + source: "file", + type: "video", + }); + + const handleUploadVideo = () => { + dispatchPageState({type: 'uploadFile'}); + UploadMedia(makeVideoUploadRequest()).then(res => { + if (res.success && res.media_file_token) { + dispatchPageState({ + type: 'uploadFileSuccess', + payload:{ + mediaFileToken :res.media_file_token + } + }) + } + }); + }; + + // contains upload inout state and controls, see docs + if (pageState.status === NO_FILE + || pageState.status === FILE_STAGED + || pageState.status === FILE_SELECTED + ) { + return ( + <> +
+
+ { + if (pageState.status === NO_FILE && videoProps.file) + dispatchPageState({type: "stagedFile"}) + else if (pageState.status === FILE_STAGED && !videoProps.file) + dispatchPageState({type: "clearedFile"}) + } + }} + /> +
+
+ +
+
+
+ +
+
+
+ + ); + }else if (pageState.status === FILE_UPLOADING){ + return( +
+
+

{t("message.fileUploading")}

+
+
+ +
+
+ ); + }else if (pageState.status === FILE_UPLOADED){ + return( + + ) + } + return ; +} diff --git a/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/index.tsx b/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/index.tsx new file mode 100644 index 0000000000..4e72c0d98b --- /dev/null +++ b/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/index.tsx @@ -0,0 +1,2 @@ + +export {default} from "./VideoStyleTransfer"; \ No newline at end of file diff --git a/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/reducer.tsx b/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/reducer.tsx new file mode 100644 index 0000000000..00170bfead --- /dev/null +++ b/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/reducer.tsx @@ -0,0 +1,87 @@ +import { MediaFile } from "@storyteller/components/src/api/media_files/GetMediaFile"; + +export enum states{ + NO_FILE, + FILE_STAGED, + FILE_SELECTED, + FILE_UPLOADING, + FILE_UPLOADED, + FILE_LOADING, + FILE_LOADED, + WORKFLOW_ENQUEUEING, + WORKFLOW_ENQUEUED +} + +export type State = { + status: number; + mediaFileToken?: string; + mediaFile?: MediaFile; + inferenceJobToken?: string; +} + +export type Action = + | {type: 'reset'} + | {type: 'stagedFile'} + | {type: 'clearedFile'} + | {type: 'selectedFile', payload: { mediaFileToken: string}} + | {type: 'uploadFile'} + | {type: 'uploadFileSuccess', payload:{ mediaFileToken: string}} + | {type: 'loadFile'} + | {type: 'loadFileSuccess', payload:{ + mediaFileToken: string, mediaFile: MediaFile + }} + | {type: 'enqueueFilter'} + | {type: 'enqueueFilterSuccess', payload: {inferenceJobToken: string|undefined}} + + +export function reducer (state: State, action: Action): State { + + switch(action.type){ + case 'stagedFile': + return {...state, status: states.FILE_STAGED} + case 'clearedFile': + return {...state, + status: states.NO_FILE, + mediaFileToken: "" + } + case 'selectedFile': + return { + ...state, + status: states.FILE_SELECTED, + mediaFileToken: action.payload.mediaFileToken + } + case 'uploadFile': + return {...state,status: states.FILE_UPLOADING}; + case 'uploadFileSuccess': + return { + ...state, + status: states.FILE_UPLOADED, + mediaFileToken: action.payload.mediaFileToken + } + case 'loadFile': + return {...state, status: states.FILE_LOADING} + case 'loadFileSuccess': + console.log("LOAD FILE SUCCESS"); + return { + ...state, + status: states.FILE_LOADED, + mediaFile: action.payload.mediaFile, + mediaFileToken : action.payload.mediaFileToken, + } + case 'enqueueFilter': + return { + ...state, + status: states.WORKFLOW_ENQUEUEING + } + case 'enqueueFilterSuccess': + return { + ...state, + status: states.WORKFLOW_ENQUEUED, + inferenceJobToken: action.payload.inferenceJobToken + } + case 'reset': + default: + return {status: states.NO_FILE}; + + } +} \ No newline at end of file diff --git a/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/routes.tsx b/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/routes.tsx new file mode 100644 index 0000000000..2d89ab4f46 --- /dev/null +++ b/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/routes.tsx @@ -0,0 +1,50 @@ +import React from "react"; +import {Switch, Route, useRouteMatch, Redirect, useHistory} from "react-router-dom"; +// import PageWorkflowControls from "./components/pageWorkflowControls"; +import PageVideoProvision from "./components/pageVideoProvision"; +import PageJoblist from "./components/pageJoblist"; +import {states,State,Action} from "./reducer"; + +export default function SubRoutes ({ + debug, t, pageState, dispatchPageState +}:{ + debug?:boolean, + t:Function, + pageState:State, + dispatchPageState: (action: Action) => void +}){ + const { path } = useRouteMatch(); + const history = useHistory(); + history.listen(({pathname}, action) => { + if ((pathname === path || pathname.match(/upload|select-media/g)) && pageState.status >= states.FILE_LOADING){ + //reset page if landed on page "Freshly" + dispatchPageState({type: 'reset'}) + } + }) + + + const commonPageProps = { + debug, parentPath: path, t, pageState, dispatchPageState + }; + + return( + + {/* + + */} + + + + + + + + + + + + + + ) +} + \ No newline at end of file diff --git a/packages/fakeyou.com/src/v2/view/pages/video_workflow/VideoWorkflow.tsx b/packages/fakeyou.com/src/v2/view/pages/video_workflow/VideoWorkflow.tsx index 87e24b2fac..ee42efe013 100644 --- a/packages/fakeyou.com/src/v2/view/pages/video_workflow/VideoWorkflow.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/video_workflow/VideoWorkflow.tsx @@ -11,7 +11,7 @@ import SubRoutes from "./videoWorkflowRoutes"; import { SessionWrapper } from '@storyteller/components/src/session/SessionWrapper'; import { StudioNotAvailable } from 'v2/view/_common/StudioNotAvailable'; -export default function StorytellerFilter(props:{ +export default function VideoWorkflow(props:{ enqueueInferenceJob: ( jobToken: string, frontendInferenceJobType: FrontendInferenceJobType