Merge pull request #491 from storytold/fixes/mvp1_improvements

Fixes/mvp1 improvements

packages/fakeyou.com/public/locales/bn/VideoWorkflow.json

@@ -5,6 +5,7 @@
     "previewWorkflow": "ওয়ার্কফ্লো ফলাফলের পূর্বরূপ দেখুন",
     "proceed": "ওয়ার্কফ্লো কন্ট্রোলে এগিয়ে যান",
     "process": "কর্মপ্রবাহের প্রক্রিয়া",
+    "resetToDefault": "ডিফল্ট মান রিসেট করুন",
     "select": "নির্বাচন করুন",
     "upload": "ভিডিও আপলোড কর"
   },

packages/fakeyou.com/public/locales/de/VideoWorkflow.json

@@ -5,6 +5,7 @@
     "previewWorkflow": "Vorschau der Workflow-Ergebnisse",
     "proceed": "Fahren Sie mit den Workflow-Kontrollen fort",
     "process": "Vom Prozess zum Workflow",
+    "resetToDefault": "Auf Standardwerte zurücksetzen",
     "select": "Wählen",
     "upload": "Video hochladen"
   },

packages/fakeyou.com/public/locales/en/VideoWorkflow.json

@@ -5,6 +5,7 @@
     "previewWorkflow": "Preview Workflow Results",
     "proceed": "Proceed to Workflow Controls",
     "process": "Process to Workflow",
+    "resetToDefault": "Reset to default values",
     "select": "Select",
     "upload": "Upload Video"
   },

packages/fakeyou.com/public/locales/es/VideoWorkflow.json

@@ -5,6 +5,7 @@
     "previewWorkflow": "Vista previa de los resultados del flujo de trabajo",
     "proceed": "Continúe con los controles del flujo de trabajo",
     "process": "Proceso al flujo de trabajo",
+    "resetToDefault": "Restablecer los valores predeterminados",
     "select": "Seleccionar",
     "upload": "Subir vídeo"
   },

packages/fakeyou.com/public/locales/fr/VideoWorkflow.json

@@ -5,6 +5,7 @@
     "previewWorkflow": "Aperçu des résultats du flux de travail",
     "proceed": "Passer aux contrôles de flux de travail",
     "process": "Du processus au flux de travail",
+    "resetToDefault": "Réinitialiser aux valeurs par défaut",
     "select": "Sélectionner",
     "upload": "Télécharger une video"
   },

packages/fakeyou.com/public/locales/hi/VideoWorkflow.json

@@ -5,6 +5,7 @@
     "previewWorkflow": "वर्कफ़्लो परिणामों का पूर्वावलोकन करें",
     "proceed": "वर्कफ़्लो नियंत्रण के लिए आगे बढ़ें",
     "process": "वर्कफ़्लो की प्रक्रिया",
+    "resetToDefault": "डिफ़ॉल्ट मानों पर रीसेट करें",
     "select": "चुनना",
     "upload": "विडियो को अॅॅपलोड करें"
   },

packages/fakeyou.com/public/locales/id/VideoWorkflow.json

@@ -5,6 +5,7 @@
     "previewWorkflow": "Pratinjau Hasil Alur Kerja",
     "proceed": "Lanjutkan ke Kontrol Alur Kerja",
     "process": "Proses ke Alur Kerja",
+    "resetToDefault": "Atur ulang ke nilai default",
     "select": "Pilih",
     "upload": "Mengunggah video"
   },

packages/fakeyou.com/public/locales/it/VideoWorkflow.json

@@ -5,6 +5,7 @@
     "previewWorkflow": "Anteprima dei risultati del flusso di lavoro",
     "proceed": "Procedi ai controlli del flusso di lavoro",
     "process": "Dal processo al flusso di lavoro",
+    "resetToDefault": "Ripristina i valori predefiniti",
     "select": "Selezionare",
     "upload": "Carica video"
   },

packages/fakeyou.com/public/locales/ja/VideoWorkflow.json

@@ -5,6 +5,7 @@
     "previewWorkflow": "ワークフロー結果のプレビュー",
     "proceed": "ワークフロー制御に進む",
     "process": "プロセスからワークフローへ",
+    "resetToDefault": "デフォルト値にリセットする",
     "select": "選択する",
     "upload": "ビデオをアップロードする"
   },

packages/fakeyou.com/public/locales/ko/VideoWorkflow.json

@@ -5,6 +5,7 @@
     "previewWorkflow": "워크플로 결과 미리보기",
     "proceed": "워크플로 제어로 진행",
     "process": "워크플로 프로세스",
+    "resetToDefault": "기본값으로 재설정",
     "select": "선택하다",
     "upload": "비디오 업로드"
   },

packages/fakeyou.com/public/locales/pt/VideoWorkflow.json

@@ -5,6 +5,7 @@
     "previewWorkflow": "Visualizar resultados do fluxo de trabalho",
     "proceed": "Prossiga para os controles de fluxo de trabalho",
     "process": "Processo para fluxo de trabalho",
+    "resetToDefault": "Redefinir para os valores padrão",
     "select": "Selecione",
     "upload": "Envio vídeo"
   },

packages/fakeyou.com/public/locales/ru/VideoWorkflow.json

@@ -5,6 +5,7 @@
     "previewWorkflow": "Предварительный просмотр результатов рабочего процесса",
     "proceed": "Перейдите к элементам управления рабочим процессом",
     "process": "От процесса к рабочему процессу",
+    "resetToDefault": "Сброс к значениям по умолчанию",
     "select": "Выбирать",
     "upload": "Загрузить видео"
   },

packages/fakeyou.com/public/locales/th/VideoWorkflow.json

@@ -5,6 +5,7 @@
     "previewWorkflow": "ดูตัวอย่างผลลัพธ์เวิร์กโฟลว์",
     "proceed": "ดำเนินการควบคุมเวิร์กโฟลว์",
     "process": "กระบวนการสู่เวิร์กโฟลว์",
+    "resetToDefault": "รีเซ็ตเป็นค่าเริ่มต้น",
     "select": "เลือก",
     "upload": "อัปโหลดวิดีโอ"
   },

packages/fakeyou.com/public/locales/tr/VideoWorkflow.json

@@ -5,6 +5,7 @@
     "previewWorkflow": "İş Akışı Sonuçlarını Önizle",
     "proceed": "İş Akışı Kontrollerine Devam Edin",
     "process": "İş Akışına Geçiş Süreci",
+    "resetToDefault": "Varsayılan değerlere sıfırla",
     "select": "Seçme",
     "upload": "Video yükle"
   },

packages/fakeyou.com/public/locales/vi/VideoWorkflow.json

@@ -5,6 +5,7 @@
     "previewWorkflow": "Xem trước kết quả quy trình làm việc",
     "proceed": "Tiến tới Kiểm soát quy trình công việc",
     "process": "Quy trình đến quy trình làm việc",
+    "resetToDefault": "Đặt lại về giá trị mặc định",
     "select": "Lựa chọn",
     "upload": "Tải video lên"
   },

packages/fakeyou.com/public/locales/zh-Hans/VideoWorkflow.json

@@ -5,6 +5,7 @@
     "previewWorkflow": "预览工作流程结果",
     "proceed": "继续工作流程控制",
     "process": "流程到工作流程",
+    "resetToDefault": "重置为默认值",
     "select": "选择",
     "upload": "上传视频"
   },

packages/fakeyou.com/src/components/common/BasicVideo/index.ts

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

packages/fakeyou.com/src/components/common/VideoBasic/VideoBasic.tsx

@@ -4,7 +4,7 @@ import { useVideo } from "hooks";
 import makeClass from "resources/makeClass";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faPlay } from "@fortawesome/free-solid-svg-icons";
-import "./BasicVideo.scss"
+import "./VideoBasic.scss"
 
 interface Props {
   className?: string;
@@ -13,7 +13,7 @@ interface Props {
   description?: string;
 }
 
-export default function BasicVideo({
+export default function VideoBasic({
   className,
   src,
   title,

packages/fakeyou.com/src/components/common/VideoBasic/index.ts

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

packages/fakeyou.com/src/components/common/VideoFakeyou/VideoFakeyou.tsx

@@ -0,0 +1,41 @@
+import React, { useState } from "react";
+import { useMedia } from "hooks";
+import { MediaFile } from "@storyteller/components/src/api/media_files/GetMediaFile";
+import { BucketConfig } from "@storyteller/components/src/api/BucketConfig";
+import makeClass from "resources/makeClass";
+
+
+
+interface Props {
+  className?: string;
+  src?: string;
+  mediaToken?: string;
+}
+
+export default function VideoFromFakeyou({
+  className,
+  src,
+  mediaToken,
+  ...rest
+}: Props) {
+  const [mediaFile, setMediaFile] = useState<MediaFile>();
+  useMedia({
+    mediaToken: mediaToken,
+    onSuccess: (res: any) => {
+      setMediaFile(res)
+    },
+  });
+
+  const mediaLink = src || (mediaFile && new BucketConfig().getGcsUrl(mediaFile.public_bucket_path));
+
+  if (mediaLink){
+    return (
+      <div {...{ ...makeClass("fy-basic-video",className) }}>
+        <video controls key={mediaToken} {...rest}>
+          <source src={mediaLink} type="video/mp4" />
+        </video>
+      </div>
+    )
+  }
+  return null;
+};

packages/fakeyou.com/src/components/common/VideoFakeyou/index.ts

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

packages/fakeyou.com/src/components/common/index.tsx

@@ -2,7 +2,6 @@ import Accordion from "./Accordion";
 import AudioBlobPreview from "./AudioBlobPreview";
 import AudioInput from "./AudioInput";
 import Badge from "./Badge";
-import BasicVideo from "./BasicVideo";
 import Button from "./Button";
 import Checkbox from "./Checkbox";
 import Container from "./Container";
@@ -38,6 +37,7 @@ import TempTextArea from "./TempTextArea";
 import TextArea from "./TextArea";
 import TextAreaV2 from "./TextAreaV2";
 import TintSpinner from "./TintSpinner";
+import VideoBasic from "./VideoBasic";
 import VideoInput from "./VideoInput";
 
 export {
@@ -45,7 +45,6 @@ export {
   AudioBlobPreview,
   AudioInput,
   Badge,
-  BasicVideo,
   Button,
   Checkbox,
   Container,
@@ -81,5 +80,6 @@ export {
   TextArea,
   TextAreaV2,
   TintSpinner,
+  VideoBasic,
   VideoInput
 };

packages/fakeyou.com/src/hooks/index.tsx

@@ -14,6 +14,7 @@ import useLocalize from './useLocalize';
 import useMedia from './useMedia';
 import useModal from './useModal';
 import useOnScreen from "./useOnScreen";
+import usePrevious from './usePrevious';
 import useRatings from './useRatings';
 import useSdUpload from './useSdUpload';
 import useSession from './useSession';
@@ -37,6 +38,7 @@ export {
   useMedia,
   useModal,
   useOnScreen,
+  usePrevious,
   useRatings,
   useSdUpload,
   useSession,

packages/fakeyou.com/src/hooks/useMedia/useMedia.tsx

@@ -2,8 +2,13 @@ import { useEffect, useState } from 'react';
 import { GetMedia, MediaFile } from "@storyteller/components/src/api/media_files/GetMedia";
 import { DeleteMedia } from "@storyteller/components/src/api/media_files/DeleteMedia";
 import { FetchStatus } from "@storyteller/components/src/api/_common/SharedFetchTypes";
+import {usePrevious} from "hooks";
 
-export default function useMedia({ mediaToken = "", onSuccess = (res:MediaFile) => {}, onRemove = (res: any) => {}, }) {
+export default function useMedia({
+  mediaToken = "",
+  onSuccess = (res:MediaFile) => {},
+  onRemove = (res: any) => {},
+}) {
   const [status, statusSet] = useState(FetchStatus.ready);
   const [writeStatus, writeStatusSet] = useState(FetchStatus.paused);
   const [media,mediaSet] = useState<MediaFile | undefined>();
@@ -17,9 +22,14 @@ export default function useMedia({ mediaToken = "", onSuccess = (res:MediaFile)
       onRemove(res);
     });
   };
-
+  
+  const previousToken = usePrevious(mediaToken);
+  
   useEffect(() => {
-    if (!media && mediaToken && status === FetchStatus.ready) {
+    if (
+      mediaToken &&
+      (!media || previousToken !== mediaToken )
+    ) {
       statusSet(FetchStatus.in_progress);
       GetMedia(mediaToken,{})
       .then((res) => {
@@ -39,6 +49,7 @@ export default function useMedia({ mediaToken = "", onSuccess = (res:MediaFile)
       statusSet(FetchStatus.ready);
     }
 
-  },[media, mediaToken, onSuccess, status, statusSet]);
+  },[media, mediaToken, previousToken, onSuccess, status, statusSet]);
+
  return { media, mediaSet, remove, status, writeStatus };
 };

packages/fakeyou.com/src/hooks/usePrevious/index.tsx

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

packages/fakeyou.com/src/hooks/usePrevious/usePrevious.tsx

@@ -0,0 +1,8 @@
+import {useEffect, useRef} from 'react';
+export default function usePrevious(val:any){
+  const ref = useRef();
+  useEffect(()=>{
+    ref.current = val;
+  }, [val]);
+  return ref.current;
+}

packages/fakeyou.com/src/v2/view/pages/face_animator/FaceAnimator.tsx

@@ -23,7 +23,7 @@ import FaceAnimatorSubViews from "./sub_views";
 import FaceAnimatorTitle from "./FaceAnimatorTitle";
 import InferenceJobsList from "components/layout/InferenceJobsList";
 import { FaceAnimatorCore } from "./FaceAnimatorTypes";
-import { BasicVideo } from "components/common";
+import { VideoBasic } from "components/common";
 import { FrontendInferenceJobType } from "@storyteller/components/src/jobs/InferenceJob";
 import { usePrefixedDocumentTitle } from "common/UsePrefixedDocumentTitle";
 import { Analytics } from "common/Analytics";
@@ -252,7 +252,7 @@ export default function FaceAnimator({
         }}
       />
       <div className="face-animator-mobile-sample">
-        <BasicVideo
+        <VideoBasic
           title="Face Animator Sample"
           src="/videos/face-animator-instruction-en.mp4"
         />

packages/fakeyou.com/src/v2/view/pages/face_animator/sub_views/FaceAnimatorInput.tsx

@@ -1,6 +1,14 @@
 import React from "react";
 import { animated } from "@react-spring/web";
-import { TempAudioPlayer, AudioBlobPreview, AudioInput, BasicVideo, Checkbox, ImageInput, SegmentButtons } from "components/common";
+import {
+  TempAudioPlayer,
+  AudioBlobPreview,
+  AudioInput,
+  VideoBasic,
+  Checkbox,
+  ImageInput,
+  SegmentButtons
+} from "components/common";
 import { FaceAnimatorSlide } from "../FaceAnimatorTypes";
 
 export default function FaceAnimatorInput({ audioProps, imageProps, frameDimensions, frameDimensionsChange, disableFaceEnhancement, disableFaceEnhancementChange, preferPresetAudio,  preferPresetAudioSet,  presetAudio,  still, stillChange, toggle, style, t, removeWatermark, removeWatermarkChange, }: FaceAnimatorSlide) {
@@ -36,7 +44,7 @@ export default function FaceAnimatorInput({ audioProps, imageProps, frameDimensi
           hideActions: true,
         }}/>
       </AudioInput> }
-      <BasicVideo
+      <VideoBasic
         className="face-animator-wide-sample"
         title="Face Animator Sample"
         src="/videos/face-animator-instruction-en.mp4"

packages/fakeyou.com/src/v2/view/pages/video_mocap/VideoMocap.tsx

@@ -6,7 +6,7 @@ import {
   InferenceJob,
 } from "@storyteller/components/src/jobs/InferenceJob";
 
-import { BasicVideo, Button, Container, Panel, Tabs } from "components/common";
+import { Button, Container, Panel, Tabs } from "components/common";
 import { useInferenceJobs, useLocalize } from "hooks";
 
 import TabContentUpload from "./components/tabContentUpload";
@@ -108,13 +108,8 @@ export default function VideoMotionCapture(props: {
               <div className="col-12 col-md-6">
                 <Tabs tabs={tabs} />
               </div>
-              <div className="col-12 col-md-6">
-                <Panel padding={true} clear={true}>
-                  <BasicVideo
-                    title="Video -> Mocap Sample"
-                    src="/videos/face-animator-instruction-en.mp4"
-                  />
-                </Panel>
+              <div className="col-12 col-md-6 p-5 mt-3">
+                <p>Upload or select a video from the library, our AI will analyze and turn it into a 3D model (aka a BVH file) </p>
               </div>
             </>
           )}

packages/fakeyou.com/src/v2/view/pages/video_mocap/components/tabContentLibrary.tsx

@@ -3,6 +3,8 @@ import React from "react";
 import SelectModal, {SelectModalData} from "components/common/SelectModal/SelectModal";
 import { Action, State } from "../videoMocapReducer";
 import { Button } from "components/common";
+import VideoFakeyou from "components/common/VideoFakeyou";
+
 
 export default function TabContentLibrary({
   t,
@@ -46,6 +48,9 @@ export default function TabContentLibrary({
             },
           ]}
         />
+        {pageState.mediaFileToken && 
+          <VideoFakeyou mediaToken={pageState.mediaFileToken} />
+        }
       </div>
       {pageState.mediaFileToken && 
         <div className="col-12 d-flex justify-content-center mt-5">

packages/fakeyou.com/src/v2/view/pages/video_workflow/components/pageVideoProvision.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { BasicVideo, Panel, Tabs } from "components/common";
+import { Panel, Tabs } from "components/common";
 
 import { State, Action } from "../videoWorkflowReducer";
 import TabContentUpload from "./tabContentUpload";
@@ -43,13 +43,8 @@ export default function PageVideoProvision({
           <div className="col-12 col-md-6">
             <Tabs tabs={tabs} />
           </div>
-          <div className="col-12 col-md-6">
-            <Panel padding={true} clear={true}>
-              <BasicVideo
-                title={t("video.instruction")}
-                src="/videos/face-animator-instruction-en.mp4"
-              />
-            </Panel>
+          <div className="col-12 col-md-6 p-5 mt-3">
+            <p>{t("video.instruction")}</p>
           </div>
         </div>
       </Panel>

packages/fakeyou.com/src/v2/view/pages/video_workflow/components/pageWorkflowControls/pageWorkflowControls.tsx

@@ -49,7 +49,7 @@ export default function PageFilterControls({
     },
   });
 
-  const [workflowValues, setworkflowValues] = useState<WorkflowValuesType>({
+  const [workflowValues, setWorkflowValues] = useState<WorkflowValuesType>({
     fileToken: pageState.mediaFileToken || mediaToken,
     outputPath: "vid2vid/SparseUpscaleInterp_00001.mp4",
     workflowConfig: "weight_q8sz47gmfw2zx02snrbz88ns9",
@@ -64,9 +64,26 @@ export default function PageFilterControls({
   });
 
   const handleOnChange = (key: string, newValue:any,) => {
-    setworkflowValues((curr)=>({...curr, [key]: newValue}));
+    setWorkflowValues((curr)=>({...curr, [key]: newValue}));
+  }
+  const handleReset = ()=>{
+    setWorkflowValues((curr)=>({
+      fileToken: pageState.mediaFileToken || mediaToken,
+      outputPath: "vid2vid/SparseUpscaleInterp_00001.mp4",
+      workflowConfig: "weight_q8sz47gmfw2zx02snrbz88ns9",
+      seed: curr.seed,
+      sdModelToken: "",
+      loraModelToken: "",
+      posPrompt: "",
+      negPrompt: "",
+      ...VideoIvs,
+      width: curr.width,
+      height: curr.height,
+      maxFrames: curr.maxFrames,
+      ...AdvIvs,
+      ...CnIvs
+    }));
   }
-
   const history = useHistory();
   const handleGenerate = ()=>{
     if(debug) console.log(workflowValues)
@@ -126,6 +143,13 @@ export default function PageFilterControls({
                       variant="primary"
                       disabled
                     />
+                    <Button
+                      className="me-3"
+                      label={t("button.resetToDefault")}
+                      tooltip="Reset all variables to default values"
+                      variant="primary"
+                      onClick={handleReset}
+                    />
                     <Button
                       className="me-3"
                       label={t("button.enqueueWorkflow")}

packages/fakeyou.com/src/v2/view/pages/video_workflow/components/tabContentLibrary.tsx

@@ -3,6 +3,7 @@ import { NavLink } from "react-router-dom";
 import { states, Action, State } from "../videoWorkflowReducer";
 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
@@ -42,6 +43,9 @@ export default function TabContentLibrary({
             },
           ]}
         />
+        {pageState.mediaFileToken && 
+          <VideoFakeyou mediaToken={pageState.mediaFileToken} />
+        }
       </div>
       {pageState.status === states.FILE_SELECTED &&
         <div className="col-12 d-flex justify-content-center mt-5">

packages/fakeyou.com/src/v2/view/pages/video_workflow/videoWorkflowReducer.tsx

@@ -40,7 +40,10 @@ export function reducer (state: State, action: Action): State {
     case 'stagedFile':
       return {...state, status: states.FILE_STAGED}
     case 'clearedFile':
-      return {...state, status: states.NO_FILE}
+      return {...state, 
+        status: states.NO_FILE,
+        mediaFileToken: ""
+      }
     case 'selectedFile':
       return {
         ...state,