From 4684f566ef7ad1456bb6bbc25ba63e65548ca43d Mon Sep 17 00:00:00 2001
From: Victor <victor@storyteller.ai>
Date: Fri, 17 Nov 2023 17:35:58 -0800
Subject: [PATCH 1/9] changed fetch values in useVoiceRequests to be status
 values

---
 .../pages/voice_designer/useVoiceRequests.tsx | 43 ++++++++-----------
 1 file changed, 18 insertions(+), 25 deletions(-)

diff --git a/packages/fakeyou.com/src/v2/view/pages/voice_designer/useVoiceRequests.tsx b/packages/fakeyou.com/src/v2/view/pages/voice_designer/useVoiceRequests.tsx
index 02c8a0451..0a27cfe44 100644
--- a/packages/fakeyou.com/src/v2/view/pages/voice_designer/useVoiceRequests.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/voice_designer/useVoiceRequests.tsx
@@ -51,17 +51,18 @@ export default function useVoiceRequests({
   const [datasets, datasetsSet] = useState<Dataset[]>([]);
   const [voices, voicesSet] = useState<Voice[]>([]);
 
-  // this state stays here, fetched states are not success, merely an attempt was made. Each list fetch sets to true. Set to false to retry
-  const [fetchDatasets, fetchDatasetsSet] = useState(requestDatasets);
-  const [fetchVoices, fetchVoicesSet] = useState(requestVoices);
-  const [isFetchingVoices, setIsFetchingVoices] = useState(requestVoices);
-  const [isFetchingDatasets, setIsFetchingDatasets] = useState(requestDatasets);
+  // 0 =  paused, 1 = requested, 2 = started, 3 = success, we could even do 4 for errors
+  const [datasetStatus, datasetStatusSet] = useState(requestDatasets ? 1 : 0);
+  const [voicesStatus, voicesStatusSet] = useState(requestVoices ? 1 : 0);
+
+  const isBusy = (status: number) => status === 1 || status === 2;
+
   const { user } = useSession();
   // const [timestamp, timestampSet] = useState(Date.now());
 
   const refreshData = () => {
-    fetchDatasetsSet(true);
-    fetchVoicesSet(true);
+    datasetStatusSet(1);
+    voicesStatusSet(1);
   }; // later we can do refresh per list
 
   const createDataset = (
@@ -89,7 +90,6 @@ export default function useVoiceRequests({
     }).then((res) => {
       refreshData();
       return res;
-      // console.log("🏧",res);
     });
 
   const deleteDataset = (voiceToken: string): Promise<DeleteDatasetResponse> =>
@@ -99,7 +99,6 @@ export default function useVoiceRequests({
     }).then((res) => {
       refreshData();
       return res;
-      // console.log("🏧",res);
     });
 
   const datasetByToken = (datasetToken?: string) =>
@@ -111,7 +110,6 @@ export default function useVoiceRequests({
     datasetToken: string,
     request: UpdateDatasetRequest
   ): Promise<UpdateDatasetResponse> => {
-    // console.log("🍄", datasetToken);
     return UpdateDataset(datasetToken, request).then((res) => {
       refreshData();
       return res;
@@ -119,7 +117,7 @@ export default function useVoiceRequests({
   };
 
   const listDatasets = () => {
-    fetchDatasetsSet(true);
+    datasetStatusSet(1);
     return datasets;
   };
 
@@ -136,27 +134,25 @@ export default function useVoiceRequests({
 
   useEffect(() => {
     if (user && user.username) {
-      if (fetchDatasets) {
-        setIsFetchingDatasets(true);
-        fetchDatasetsSet(false);
+      if (datasetStatus === 1) {
+        datasetStatusSet(2);
         ListDatasetsByUser(user.username, {}).then((res) => {
+          datasetStatusSet(3);
           if (res.datasets) datasetsSet(res.datasets);
-          setIsFetchingDatasets(false);
         });
       }
-      if (fetchVoices) {
-        setIsFetchingVoices(true);
-        fetchVoicesSet(false);
+      if (voicesStatus === 1) {
+        voicesStatusSet(2);
         ListVoicesByUser(user.username, {}).then((res) => {
+          voicesStatusSet(3);
           if (res.voices) voicesSet(res.voices);
-          setIsFetchingVoices(false);
         });
       }
     }
-  }, [user, fetchDatasets, fetchVoices]);
+  }, [user, datasetStatus, voicesStatus]);
 
   return {
-    isFetching: isFetchingVoices || isFetchingDatasets,
+    isFetching: isBusy(datasetStatus) || isBusy(voicesStatus),
     datasets: {
       byToken: datasetByToken,
       create: createDataset,
@@ -182,9 +178,6 @@ export default function useVoiceRequests({
     },
     inputCtrl:
       (todo: any) =>
-      ({ target }: { target: any }) => {
-        console.log("🌿", target);
-        todo(target.value);
-      },
+      ({ target }: { target: any }) => { todo(target.value); },
   };
 }

From 46fe2a481f9aa2e85255498e4242315f667ce81a Mon Sep 17 00:00:00 2001
From: Victor <victor@storyteller.ai>
Date: Wed, 22 Nov 2023 19:14:59 -0800
Subject: [PATCH 2/9] Listing voice designer samples + List Component cleanup

---
 package.json                                  |   1 +
 .../voice_dataset_samples/DeleteSample.ts     |   6 +-
 .../ListSamplesForDataset.ts                  |  15 +-
 .../AudioBlobPreview/AudioBlobPreview.scss    |   4 +
 .../AudioBlobPreview/AudioBlobPreview.tsx     |  35 +++++
 .../common/AudioBlobPreview/index.ts          |   1 +
 .../common/AudioInput/AudioInput.tsx          |  43 +++--
 .../src/components/common/index.tsx           |   2 +
 .../InferenceJobsList/InferenceJobsList.tsx   |   3 +-
 .../fakeyou.com/src/hooks/useFile/useFile.tsx |  18 +--
 .../LipsyncEditor/FaceAnimatorInput.tsx       |  14 +-
 .../voice_designer/VoiceDesignerFormPage.tsx  |   6 +-
 .../voice_designer/VoiceDesignerMainPage.tsx  |  59 +++----
 .../VoiceDesignerVoiceEditPage.tsx            |   1 -
 .../components/ListItems/ListItems.scss       |   4 +
 .../voice_designer/components/NewList.tsx     | 148 ++++++------------
 .../components/steps/UploadSamples.tsx        |  95 +++++++++--
 .../pages/voice_designer/useVoiceRequests.tsx |   2 +-
 yarn.lock                                     |   8 +
 19 files changed, 253 insertions(+), 212 deletions(-)
 create mode 100644 packages/fakeyou.com/src/components/common/AudioBlobPreview/AudioBlobPreview.scss
 create mode 100644 packages/fakeyou.com/src/components/common/AudioBlobPreview/AudioBlobPreview.tsx
 create mode 100644 packages/fakeyou.com/src/components/common/AudioBlobPreview/index.ts

diff --git a/package.json b/package.json
index b5493da5e..662268d41 100644
--- a/package.json
+++ b/package.json
@@ -36,6 +36,7 @@
   },
   "dependencies": {
     "@react-spring/types": "^9.7.3",
+    "moment": "^2.29.4",
     "universal-cookie": "^6.1.1",
     "yarn": "^1.22.19"
   },
diff --git a/packages/components/src/api/voice_designer/voice_dataset_samples/DeleteSample.ts b/packages/components/src/api/voice_designer/voice_dataset_samples/DeleteSample.ts
index f3ad28cf0..555824999 100644
--- a/packages/components/src/api/voice_designer/voice_dataset_samples/DeleteSample.ts
+++ b/packages/components/src/api/voice_designer/voice_dataset_samples/DeleteSample.ts
@@ -1,15 +1,15 @@
 import MakeRequest from "../../MakeRequest";
 
-export interface DreateVoiceRequest {
+export interface DeleteSampleRequest {
   set_delete: boolean;
   as_mod: boolean;
 }
 
-export interface DreateVoiceResponse {
+export interface DeleteSampleResponse {
   success: boolean
 }
 
-export const DeleteDataset = MakeRequest<string, DreateVoiceRequest, DreateVoiceResponse>({
+export const DeleteSample = MakeRequest<string, DeleteSampleRequest, DeleteSampleResponse>({
   method: "DELETE", 
   routingFunction: (sampleToken:  string) => `/v1/voice_designer/sample/${ sampleToken }/delete`,
 });
diff --git a/packages/components/src/api/voice_designer/voice_dataset_samples/ListSamplesForDataset.ts b/packages/components/src/api/voice_designer/voice_dataset_samples/ListSamplesForDataset.ts
index 1db371699..db7c6fe7f 100644
--- a/packages/components/src/api/voice_designer/voice_dataset_samples/ListSamplesForDataset.ts
+++ b/packages/components/src/api/voice_designer/voice_dataset_samples/ListSamplesForDataset.ts
@@ -3,19 +3,8 @@ import MakeRequest from "../../MakeRequest";
 export interface ListSamplesForDatasetRequest {}
 
 export interface ListSamplesForDatasetResponse {
-    sample_token: string,
-
-    media_file_token: string,
-    media_type: string,
-
-    public_bucket_directory_hash: string,
-    maybe_public_bucket_prefix?: string,
-    maybe_public_bucket_extension?: string,
-    
-    maybe_creator_user_token?: string,
-
-    created_at: Date,
-    updated_at: Date,
+    samples: any,
+    success: true
 }
 
 export const ListSamplesForDataset = MakeRequest<string, ListSamplesForDatasetRequest, ListSamplesForDatasetResponse>({
diff --git a/packages/fakeyou.com/src/components/common/AudioBlobPreview/AudioBlobPreview.scss b/packages/fakeyou.com/src/components/common/AudioBlobPreview/AudioBlobPreview.scss
new file mode 100644
index 000000000..967ca1da2
--- /dev/null
+++ b/packages/fakeyou.com/src/components/common/AudioBlobPreview/AudioBlobPreview.scss
@@ -0,0 +1,4 @@
+.fy-audio-blob {
+	padding: 1rem;
+	margin-bottom: 1rem;
+}
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/components/common/AudioBlobPreview/AudioBlobPreview.tsx b/packages/fakeyou.com/src/components/common/AudioBlobPreview/AudioBlobPreview.tsx
new file mode 100644
index 000000000..d6be44c70
--- /dev/null
+++ b/packages/fakeyou.com/src/components/common/AudioBlobPreview/AudioBlobPreview.tsx
@@ -0,0 +1,35 @@
+import React from "react";
+import { a, useTransition } from "@react-spring/web";
+import { InputVcAudioPlayer } from "v2/view/_common/InputVcAudioPlayer";
+import { FileActions } from "components/common";
+import "./AudioBlobPreview.scss";
+
+interface Props {
+  blob?: any,
+  clear?: any,
+  file?: any,
+  hideActions: boolean,
+  onRest?: () => void,
+  success?: any,
+  submit?: () => void,
+  working?: any
+}
+
+export default function AudioBlobPreview({ clear, blob, file, hideActions, onRest, success, submit, working }: Props) {
+	const transitions = useTransition(file, {
+    config: { tension: 120,  friction: 15 },
+    from: { opacity: 0 },
+    enter: { opacity: 1 },
+    leave: { opacity: 0 },
+    onRest,
+  });
+
+  return transitions((style, i) => i ? <a.div {...{ className: "audio-details", style }}>
+    <div {...{ className: "fy-audio-blob panel" }}>
+      <InputVcAudioPlayer {...{ filename: blob as string }}/>
+    </div>
+    {
+      !hideActions && <FileActions {...{ clear, success, submit, working }}/>
+    }
+  </a.div> : null );
+};
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/components/common/AudioBlobPreview/index.ts b/packages/fakeyou.com/src/components/common/AudioBlobPreview/index.ts
new file mode 100644
index 000000000..6c44e7fa6
--- /dev/null
+++ b/packages/fakeyou.com/src/components/common/AudioBlobPreview/index.ts
@@ -0,0 +1 @@
+export { default } from './AudioBlobPreview';
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/components/common/AudioInput/AudioInput.tsx b/packages/fakeyou.com/src/components/common/AudioInput/AudioInput.tsx
index 9466897ab..ce3344607 100644
--- a/packages/fakeyou.com/src/components/common/AudioInput/AudioInput.tsx
+++ b/packages/fakeyou.com/src/components/common/AudioInput/AudioInput.tsx
@@ -1,7 +1,7 @@
 import React from "react";
-import { a, useTransition } from '@react-spring/web';
-import { InputVcAudioPlayer } from "v2/view/_common/InputVcAudioPlayer";
-import { FileActions, FileDetails, FileLabel, FileWrapper } from 'components/common';
+// import { a, useTransition } from '@react-spring/web';
+// import { InputVcAudioPlayer } from "v2/view/_common/InputVcAudioPlayer";
+import { FileDetails, FileLabel, FileWrapper } from 'components/common';
 import { faFileAudio } from "@fortawesome/pro-solid-svg-icons";
 import './AudioInput.scss'
 
@@ -9,39 +9,38 @@ const fileTypes = ["MP3", "WAV", "FLAC", "OGG"];
 
 interface Props {
   blob?: string;
+  children?: any;
   clear?: (file?: any) => void;
   file?: any;
-  hideActions?: boolean;
+  hideDetails?: boolean;
   hideClearDetails?: boolean;
   inputProps?: any;
-  onRest?: () => void;
-  success?: boolean;
-  submit?: () => void;
-  working?: boolean;
   [x:string]: any;
 }
 
 const n = () => {};
 
-export default function AudioInput({ blob = "", clear = n, file, hideActions, hideClearDetails, inputProps, onRest = n, success = false, submit = n, working = false, ...rest }: Props) {
+export default function AudioInput({ children, clear = n, file, hideDetails, hideClearDetails, inputProps, ...rest }: Props) {
 
-  const transitions = useTransition(file, {
-    config: { tension: 120,  friction: 15 },
-    from: { opacity: 0 },
-    enter: { opacity: 1 },
-    leave: { opacity: 0 },
-    onRest,
-  });
+  // const transitions = useTransition(file, {
+  //   config: { tension: 120,  friction: 15 },
+  //   from: { opacity: 0 },
+  //   enter: { opacity: 1 },
+  //   leave: { opacity: 0 },
+  //   onRest,
+  // });
 
   return <div {...{ className: "fy-audio-uploader" }}>
     <FileWrapper {...{ fileTypes, ...inputProps, panelClass: "p-3", ...rest }}>
      { file ? <FileDetails {...{ clear, hideClearDetails, icon: faFileAudio, file }}/> : <FileLabel {...{ fileTypes }}/> }
     </FileWrapper>
-      { transitions((style, i) => i ? <a.div {...{ className: "audio-details", style }}>
-        <div {...{ className: "panel panel-inner rounded p-3" }}>
-          <InputVcAudioPlayer {...{ filename: blob as string }}/>
-        </div>
-        { !hideActions && <FileActions {...{ clear, success, submit, working }}/> }
-      </a.div> : null ) }
+      { children
+      //   transitions((style, i) => i ? <a.div {...{ className: "audio-details", style }}>
+      //   <div {...{ className: "panel panel-inner rounded p-3" }}>
+      //     <InputVcAudioPlayer {...{ filename: blob as string }}/>
+      //   </div>
+      //   { !hideActions && <FileActions {...{ clear, success, submit, working }}/> }
+      // </a.div> : null )
+      }
   </div>;
 };
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/components/common/index.tsx b/packages/fakeyou.com/src/components/common/index.tsx
index 0e20205b9..881cf8429 100644
--- a/packages/fakeyou.com/src/components/common/index.tsx
+++ b/packages/fakeyou.com/src/components/common/index.tsx
@@ -1,3 +1,4 @@
+import AudioBlobPreview from "./AudioBlobPreview";
 import AudioInput from "./AudioInput";
 import BasicVideo from "./BasicVideo";
 import Button from "./Button";
@@ -20,6 +21,7 @@ import TempInput from "./TempInput";
 import TempSelect from "./TempSelect";
 
 export {
+  AudioBlobPreview,
   AudioInput,
   BasicVideo,
   Button,
diff --git a/packages/fakeyou.com/src/components/layout/InferenceJobsList/InferenceJobsList.tsx b/packages/fakeyou.com/src/components/layout/InferenceJobsList/InferenceJobsList.tsx
index 65738f179..2acd014f4 100644
--- a/packages/fakeyou.com/src/components/layout/InferenceJobsList/InferenceJobsList.tsx
+++ b/packages/fakeyou.com/src/components/layout/InferenceJobsList/InferenceJobsList.tsx
@@ -28,7 +28,7 @@ interface JobsListProps{
 export default function InferenceJobsList({ filter, onSelect, statusTxt, t, inferenceJobs }: JobsListProps) {
   // const { inferenceJobs = [] } = useInferenceJobs({ type: 0 });
   // const oldJobs = thejobs || inferenceJobs;
- console.log("🥬",inferenceJobs);
+
   const [pending, pendingSet] = useState<GetPendingTtsJobCountSuccessResponse>({
     success: true,
     pending_job_count: 0,
@@ -97,7 +97,6 @@ export default function InferenceJobsList({ filter, onSelect, statusTxt, t, infe
       { jobs
         // .filter(filter)
         .map((job: any, key: number) => {
-        console.log("🍇",job);
       return <div {...{ className: "panel face-animator-job", key }}>
         <FontAwesomeIcon {...{ className: `job-status-icon job-status-${job.statusIndex}`, icon: statusIcons[job.statusIndex] }}/>
         <div {...{ className: "job-details" }}>
diff --git a/packages/fakeyou.com/src/hooks/useFile/useFile.tsx b/packages/fakeyou.com/src/hooks/useFile/useFile.tsx
index 82b84c39b..103f835e0 100644
--- a/packages/fakeyou.com/src/hooks/useFile/useFile.tsx
+++ b/packages/fakeyou.com/src/hooks/useFile/useFile.tsx
@@ -12,21 +12,12 @@ interface Props {
 export default function useFile({ debug, onChange = n, onClear = n, onSubmit = n }: Props) {
   const [file, fileSet] = useState<any>(undefined);
   const [blob, blobSet] = useState<string>();
-  const [status, statusSet] = useState<number>(0);
   const inputRef = useRef<HTMLInputElement>(null);
 
-  const submit = async () => {
-    if (file === undefined) { return false; }
-    statusSet(1);
-    const onUploadResult = await onSubmit(file);
-    if (onUploadResult) { statusSet(2); }
-    else { statusSet(3); }
-  };
   const fileChange = (inputFile?: any) => {
-    onChange(file);
+    onChange(inputFile);
     fileSet(inputFile || null);
     blobSet(inputFile ? URL.createObjectURL(inputFile) : "");
-    statusSet(0);
   };
   const inputChange = ({ target = {} }: { target: any }) => {
     fileChange(target.value);
@@ -35,7 +26,6 @@ export default function useFile({ debug, onChange = n, onClear = n, onSubmit = n
     if (inputRef?.current?.value) inputRef.current.value = '';
     fileChange();
     onClear();
-    statusSet(0);
   };
 
   return { 
@@ -45,10 +35,6 @@ export default function useFile({ debug, onChange = n, onClear = n, onSubmit = n
     inputProps: {
       onChange: inputChange,
       inputRef
-    },
-    status,
-    submit,
-    success: status === 2,
-    working: status === 1,
+    }
   };
 };
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/v2/view/pages/lipsync/LipsyncEditor/FaceAnimatorInput.tsx b/packages/fakeyou.com/src/v2/view/pages/lipsync/LipsyncEditor/FaceAnimatorInput.tsx
index bbc6f6a1f..e1afbd106 100644
--- a/packages/fakeyou.com/src/v2/view/pages/lipsync/LipsyncEditor/FaceAnimatorInput.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/lipsync/LipsyncEditor/FaceAnimatorInput.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { animated } from "@react-spring/web";
-import { AudioInput, BasicVideo, Checkbox, ImageInput, SegmentButtons } from "components/common";
+import { AudioBlobPreview, AudioInput, BasicVideo, Checkbox, ImageInput, SegmentButtons } from "components/common";
 import { FaceAnimatorSlide } from "./FaceAnimatorTypes";
 
 export default function FaceAnimatorInput({  
@@ -35,9 +35,17 @@ export default function FaceAnimatorInput({
           onRest: (p: any, c: any, item: any, l: any) => {
             toggle.audio(!!audioProps.file);
           },
-          hideActions: true,
+          // hideActions: true,
         }}
-      />
+      >
+        <AudioBlobPreview {...{
+          ...audioProps,
+          onRest: (p: any, c: any, item: any, l: any) => {
+            toggle.audio(!!audioProps.file);
+          },
+          hideActions: true,
+        }}/>
+      </AudioInput>
       <BasicVideo {...{ className: "face-animator-wide-sample", src: "/videos/face-animator-instruction-en.mp4" }}/>
     </div>
     <div {...{ className: "animation-configure-panel panel" }}>
diff --git a/packages/fakeyou.com/src/v2/view/pages/voice_designer/VoiceDesignerFormPage.tsx b/packages/fakeyou.com/src/v2/view/pages/voice_designer/VoiceDesignerFormPage.tsx
index ae7dcb82f..8b0a5f2e1 100644
--- a/packages/fakeyou.com/src/v2/view/pages/voice_designer/VoiceDesignerFormPage.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/voice_designer/VoiceDesignerFormPage.tsx
@@ -79,15 +79,13 @@ function VoiceDesignerFormPage({ enqueueInferenceJob }: { enqueueInferenceJob: a
     ? ["Edit Details", "Edit Samples"]
     : ["Voice Details", "Upload Samples"];
 
-  const key = !isNewCreation && (dataset_token || uuidv4());
+  // const key = !isNewCreation && (dataset_token || uuidv4());
   const displayStep = (step: any) => {
     switch (step) {
       case 0:
         return <VoiceDetails {...{ datasetInputs }} />;
       case 1:
-        return (
-          <UploadSamples key={key as any} {...{ audioProps, datasetToken: dataset_token, setAudioSamplesReady }} />
-        );
+        return <UploadSamples {...{ audioProps, datasetToken: dataset_token, setAudioSamplesReady }}/>;
       default:
         return null;
     }
diff --git a/packages/fakeyou.com/src/v2/view/pages/voice_designer/VoiceDesignerMainPage.tsx b/packages/fakeyou.com/src/v2/view/pages/voice_designer/VoiceDesignerMainPage.tsx
index b9be9ffa5..a8777ad32 100644
--- a/packages/fakeyou.com/src/v2/view/pages/voice_designer/VoiceDesignerMainPage.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/voice_designer/VoiceDesignerMainPage.tsx
@@ -9,8 +9,11 @@ import Container from "components/common/Container";
 import { NavLink } from "react-router-dom";
 import ListItems from "./components/NewList";
 import Modal from "components/common/Modal";
+import { Button } from "components/common";
 import useVoiceRequests from "./useVoiceRequests";
 import { usePrefixedDocumentTitle } from "common/UsePrefixedDocumentTitle";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faMicrophone } from "@fortawesome/pro-solid-svg-icons";
 
 import {
   FrontendInferenceJobType,
@@ -25,14 +28,9 @@ function VoiceDesignerMainPage({
   usePrefixedDocumentTitle("AI Voice Designer");
   const { pathname } = useLocation();
   const { t } = useLocalize("FaceAnimator");
-  const { datasets, voices, isFetching } = useVoiceRequests({
-    requestDatasets: true,
-    requestVoices: true,
-  });
+  const { datasets, voices, isLoading } = useVoiceRequests({ requestDatasets: true,requestVoices: true });
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
-  const view = ["/voice-designer/datasets", "/voice-designer/voices"].indexOf(
-    pathname
-  );
+  const view = ["/voice-designer/datasets", "/voice-designer/voices"].indexOf(pathname);
   const [deleteItem, setDeleteItem] = useState("");
   const [deleteType, setDeleteType] = useState("");
   const [deleteText, setDeleteText] = useState({
@@ -76,26 +74,24 @@ function VoiceDesignerMainPage({
     history.push(`/voice-designer/voice/${token}`);
   };
 
-  const voiceClick =
-    (todo: any, type: string) =>
-    ({ target }: { target: any }) => {
-      let voiceToken =
-        voices.list[target.name.split(",")[0].split(":")[1]].voice_token;
-      todo(voiceToken, type);
-    };
+  const DataBadge = () => <span className="dataset-badge mb-0">Dataset</span>;
+  const VoiceBadge = () => <FontAwesomeIcon icon={faMicrophone} className="me-2 me-lg-3" />;
 
-  const datasetClick =
-    (todo: any, type: string) =>
-    ({ target }: { target: any }) => {
-      let datasetToken =
-        datasets.list[target.name.split(",")[0].split(":")[1]].dataset_token;
-      todo(datasetToken, type);
-    };
+  // these need to be abstracted to use over again -V
+  const voiceClick = (todo: any, type: string) =>  ({ target }: { target: any }) => {
+    let voiceToken = voices.list[target.name.split(",")[0].split(":")[1]].voice_token;
+    todo(voiceToken, type);
+  };
+
+  const datasetClick = (todo: any, type: string) => ({ target }: { target: any }) => {
+    let datasetToken = datasets.list[target.name.split(",")[0].split(":")[1]].dataset_token;
+    todo(datasetToken, type);
+  };
 
   const actionDataSets = datasets.list.map((dataset, i) => {
     return {
       ...dataset,
-      badge: "dataset",
+      badge: DataBadge,
       buttons: [
         {
           label: "Edit",
@@ -117,7 +113,7 @@ function VoiceDesignerMainPage({
   const actionVoices = voices.list.map((voice, i) => {
     return {
       ...voice,
-      badge: "voice",
+      badge: VoiceBadge,
       buttons: [
         {
           label: "Edit",
@@ -157,6 +153,18 @@ function VoiceDesignerMainPage({
     to: "/voice-designer/create",
   };
 
+  const dataPlaceholder = () => <div className="d-flex flex-column list-items p-5 align-items-center">
+    <h5 className="fw-semibold mb-3">
+      You haven't created any voices.
+    </h5>
+    <Button
+      icon={faPlus} // 1
+      label="Create New Voice" // 2
+      small={true}
+      to="/voice-designer/create" // 3
+    />
+  </div>;
+
   return (
     <>
       <Container type="panel">
@@ -204,10 +212,7 @@ function VoiceDesignerMainPage({
           </nav>
 
           <div className="p-3 p-lg-4">
-            <ListItems
-              {...{ data: view ? actionVoices : actionDataSets }}
-              isLoading={isFetching}
-            />
+            <ListItems {...{ data: view ? actionVoices : actionDataSets, dataPlaceholder, isLoading }}/>
           </div>
         </Panel>
       </Container>
diff --git a/packages/fakeyou.com/src/v2/view/pages/voice_designer/VoiceDesignerVoiceEditPage.tsx b/packages/fakeyou.com/src/v2/view/pages/voice_designer/VoiceDesignerVoiceEditPage.tsx
index fcf0824f2..f2820c747 100644
--- a/packages/fakeyou.com/src/v2/view/pages/voice_designer/VoiceDesignerVoiceEditPage.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/voice_designer/VoiceDesignerVoiceEditPage.tsx
@@ -88,7 +88,6 @@ function VoiceDesignerVoiceEditPage() {
           </div>
 
           <div>
-          aaaaa
             <TempSelect
               {...{
                 icon: faEye,
diff --git a/packages/fakeyou.com/src/v2/view/pages/voice_designer/components/ListItems/ListItems.scss b/packages/fakeyou.com/src/v2/view/pages/voice_designer/components/ListItems/ListItems.scss
index cb465afc6..a329996a0 100644
--- a/packages/fakeyou.com/src/v2/view/pages/voice_designer/components/ListItems/ListItems.scss
+++ b/packages/fakeyou.com/src/v2/view/pages/voice_designer/components/ListItems/ListItems.scss
@@ -27,3 +27,7 @@
     font-size: 14px;
   }
 }
+
+.fy-vd-badge > * {
+  margin-right: .5rem;
+}
diff --git a/packages/fakeyou.com/src/v2/view/pages/voice_designer/components/NewList.tsx b/packages/fakeyou.com/src/v2/view/pages/voice_designer/components/NewList.tsx
index e3dfeb87d..b68d4fbc3 100644
--- a/packages/fakeyou.com/src/v2/view/pages/voice_designer/components/NewList.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/voice_designer/components/NewList.tsx
@@ -1,124 +1,64 @@
-import React from "react";
-import Button from "components/common/Button";
-import { faMicrophone, faPlus } from "@fortawesome/pro-solid-svg-icons";
+import React from 'react';
+import Skeleton from "components/common/Skeleton";
+import { Button } from "components/common";
 
 import "./ListItems/ListItems.scss";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import Skeleton from "components/common/Skeleton";
+
 
 interface ListItemsProps {
   data: any[];
+  dataPlaceholder?: any;
   isLoading: boolean;
 }
 
 interface ListItem {
-  badge: "voice" | "dataset";
+  badge?: any;
   buttons: any;
   index: number;
   isCreating?: boolean;
   name: string;
 }
 
-const Working = () => (
-  <div className="d-flex align-items-center gap-2 py-1">
-    <p className="fw-medium opacity-75">Voice is being created...</p>
-    <div className="spinner-border spinner-border-sm text-light" role="status">
-      <span className="visually-hidden">Loading...</span>
-    </div>
-  </div>
-);
+const LoaderView = () => <div className="list-items p-3">
+  <h3 className="mb-0">
+    <Skeleton type="medium" rounded />
+  </h3>
+</div>;
 
-const ItemRow = ({
-  badge,
-  buttons,
-  index,
-  isCreating,
-  name,
-  ...rest
-}: ListItem) => {
-  return (
-    <div className="d-flex flex-column flex-lg-row gap-3 list-items p-3 align-items-lg-center">
-      <div className="d-inline-flex flex-wrap align-items-center flex-grow-1">
-        {badge === "dataset" ? (
-          <div className="d-flex flex-column flex-lg-row align-items-start gap-2">
-            <span className="dataset-badge mb-0">Dataset</span>
-            <h5 className="fw-semibold mb-0">{name}</h5>
-          </div>
-        ) : null}
-        {badge === "voice" ? (
-          <div className="d-inline-flex align-items-center">
-            <h5 className="fw-semibold d-flex mb-0 align-items-start">
-              <span>
-                <FontAwesomeIcon icon={faMicrophone} className="me-2 me-lg-3" />
-              </span>
-              {name}
-            </h5>
-          </div>
-        ) : null}
-      </div>
-      <div className="d-flex">
-        {isCreating ? (
-          <Working />
-        ) : (
-          <div className="d-flex gap-2">
-            {buttons && buttons.length
-              ? buttons.map((action: any, key: number) => {
-                  return (
-                    <Button
-                      {...{
-                        ...action,
-                        key,
-                        name: `item-row:${index},button:${key}`,
-                      }}
-                    />
-                  );
-                })
-              : null}
-          </div>
-        )}
-      </div>
+const ItemRow = ({ badge: Badge, buttons, index, isCreating, name, ...rest }: ListItem) => {
+  return <div className="d-flex flex-column flex-lg-row gap-3 list-items p-3 align-items-lg-center">
+    <div className="d-inline-flex flex-wrap align-items-center flex-grow-1 gap-2">
+      <h5 className="fy-vd-badge fw-semibold mb-0">
+        { Badge ? <Badge /> : null }
+        { name }
+      </h5>
     </div>
-  );
+    <div className="d-flex">
+        <div className="d-flex gap-2">
+          {buttons && buttons.length
+            ? buttons.map((action: any, key: number) => {
+                return (
+                  <Button
+                    {...{
+                      ...action,
+                      key,
+                      name: `item-row:${index},button:${key}`,
+                    }}
+                  />
+                );
+              })
+            : null}
+        </div>
+    </div>
+  </div>;
 };
 
-export default function NewList({ data, isLoading }: ListItemsProps) {
-  const DataPlaceholder = () => (
-    <div className="d-flex flex-column list-items p-5 align-items-center">
-      <h5 className="fw-semibold mb-3">You haven't created any voices.</h5>
-      <Button
-        icon={faPlus} // 1
-        label="Create New Voice" // 2
-        small={true}
-        to="/voice-designer/create" // 3
-      />
-    </div>
-  );
+export default function NewList({ data, dataPlaceholder, isLoading }: ListItemsProps) {
+  const DataPlaceholder = dataPlaceholder || null;
 
-  if (isLoading) {
-    const loaderView = (
-      <div className="list-items p-3">
-        <h3 className="mb-0">
-          <Skeleton type="medium" rounded />
-        </h3>
-      </div>
-    );
-
-    return (
-      <div className="d-flex flex-column gap-3">
-        {[...Array(2)].map((_, i) => (
-          <React.Fragment key={i}>{loaderView}</React.Fragment>
-        ))}
-      </div>
-    );
-  }
-
-  return data.length ? (
-    <div className="d-flex flex-column gap-3">
-      {data.map((item, key) => (
-        <ItemRow {...{ key, ...item, index: key }} />
-      ))}
-    </div>
-  ) : (
-    <DataPlaceholder />
-  );
-}
+  return isLoading ? <LoaderView /> :
+    data.length ?  <div className="d-flex flex-column gap-3">
+      { data.map((item, key) => <ItemRow {...{ key, ...item, index: key }}/> ) }
+    </div> :
+    <DataPlaceholder />;
+};
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/v2/view/pages/voice_designer/components/steps/UploadSamples.tsx b/packages/fakeyou.com/src/v2/view/pages/voice_designer/components/steps/UploadSamples.tsx
index af3fdf0b0..cd4fdff0d 100644
--- a/packages/fakeyou.com/src/v2/view/pages/voice_designer/components/steps/UploadSamples.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/voice_designer/components/steps/UploadSamples.tsx
@@ -1,31 +1,94 @@
-import React, { useState } from "react";
-import VoiceDesignerUploadComponent from "../VoiceDesignerUploadComponent";
+import React, { useEffect, useState } from "react";
+// import VoiceDesignerUploadComponent from "../VoiceDesignerUploadComponent";
+import { AudioInput } from "components/common";
+
+import moment from 'moment';
+
+import ListItems from "../NewList";
 import { v4 as uuidv4 } from "uuid";
 
+import { ListSamplesForDataset } from "@storyteller/components/src/api/voice_designer/voice_dataset_samples/ListSamplesForDataset";
+import { UploadSample } from "@storyteller/components/src/api/voice_designer/voice_dataset_samples/UploadSample";
+import { DeleteSample } from "@storyteller/components/src/api/voice_designer/voice_dataset_samples/DeleteSample";
+
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faWaveform } from "@fortawesome/pro-solid-svg-icons";
+
+
 function UploadSamples({ audioProps, datasetToken, setAudioSamplesReady }: { audioProps: any, datasetToken?: string, setAudioSamplesReady:any  }) {
-  /* eslint-disable @typescript-eslint/no-unused-vars */
-  const [convertLoading, setConvertLoading] = useState(false);
-  const [canConvert, setCanConvert] = useState(false);
-  const [mediaUploadToken, setMediaUploadToken] = useState<string | undefined>(
-    undefined
-  );
-  const [convertIdempotencyToken, setConvertIdempotencyToken] = useState(
-    uuidv4()
-  );
-  /* eslint-disable @typescript-eslint/no-unused-vars */
+  // const [convertLoading, setConvertLoading] = useState(false);
+  // const [canConvert, setCanConvert] = useState(false);
+  // const [mediaUploadToken, setMediaUploadToken] = useState<string | undefined>();
+  // const [formIsCleared, setFormIsCleared] = useState(false);
+  const [uploaded,uploadedSet] = useState(false);
+  const [samples,samplesSet] = useState<any[]>([]);
+  const [listFetched,listFetchedSet] = useState(false);
 
-  const [formIsCleared, setFormIsCleared] = useState(false);
+  const SampleBadge = () => <FontAwesomeIcon icon={faWaveform} className="me-2 me-lg-3" />;
 
-  const changeConvertIdempotencyToken = () => {
-    setConvertIdempotencyToken(uuidv4());
+  const sampleClick =  () => ({ target }: { target: any }) => {
+      let sampleToken = samples[target.name.split(",")[0].split(":")[1]].sample_token;
+      DeleteSample(sampleToken,{ as_mod: false, set_delete: true })
+      .then((res) => {
+        listFetchedSet(false);
+        // set unBusy here
+      });
   };
 
+  const actionSamples = samples.map((sample: any, i: number) => {
+    let date = new Date(sample.created_at);
+    return {
+      ...sample,
+      badge: SampleBadge,
+      buttons: [
+        {
+          label: "Delete",
+          small: true,
+          variant: "secondary",
+          onClick: sampleClick()
+        },
+      ],
+      name: `Sample from ${ date ? moment(date).format("MMMM Do YYYY, h:mm a") : "" }`,
+    };
+  });
+
+  useEffect(() => {
+    if (audioProps.file && datasetToken && !uploaded) {
+      uploadedSet(true);
+      UploadSample("",{
+        dataset_token: datasetToken || "",
+        file: audioProps.file,
+        uuid_idempotency_token: uuidv4(),
+      })
+      .then((res) => {
+        if (res.success) {
+          audioProps.clear();
+          uploadedSet(false);
+          listFetchedSet(false);
+        }
+      });
+    }
+
+
+    if (datasetToken && !listFetched) {
+      listFetchedSet(true);
+      ListSamplesForDataset(datasetToken,{})
+      .then((res) => {
+        if (res.success && res.samples) {
+          samplesSet(res.samples);
+        }
+      });
+    }
+
+  },[audioProps, datasetToken, listFetched, uploaded]);
+
   return (
     <div className="d-flex flex-column gap-4">
       <div>
         <label className="sub-title">Upload Audio</label>
         <div className="d-flex flex-column gap-3 upload-component">
-          <VoiceDesignerUploadComponent {...{ changeConvertIdempotencyToken, datasetToken, formIsCleared, setCanConvert, setFormIsCleared, setMediaUploadToken, setAudioSamplesReady }}/>
+          <AudioInput {...{ ...audioProps }}/>
+          { samples.length ? <ListItems {...{ data: actionSamples, isLoading: false }}/> : null }
         </div>
       </div>
     </div>
diff --git a/packages/fakeyou.com/src/v2/view/pages/voice_designer/useVoiceRequests.tsx b/packages/fakeyou.com/src/v2/view/pages/voice_designer/useVoiceRequests.tsx
index 0a27cfe44..6949ff96d 100644
--- a/packages/fakeyou.com/src/v2/view/pages/voice_designer/useVoiceRequests.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/voice_designer/useVoiceRequests.tsx
@@ -152,7 +152,6 @@ export default function useVoiceRequests({
   }, [user, datasetStatus, voicesStatus]);
 
   return {
-    isFetching: isBusy(datasetStatus) || isBusy(voicesStatus),
     datasets: {
       byToken: datasetByToken,
       create: createDataset,
@@ -166,6 +165,7 @@ export default function useVoiceRequests({
     inference: {
       enqueue: EnqueueTts,
     },
+    isLoading: isBusy(datasetStatus) || isBusy(voicesStatus),
     languages,
     visibilityOptions,
     voices: {
diff --git a/yarn.lock b/yarn.lock
index df1f9bd52..8540c73f1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4576,6 +4576,7 @@ __metadata:
     craco: ^0.0.3
     cross-env: ^7.0.3
     lerna: ^4.0.0
+    moment: ^2.29.4
     universal-cookie: ^6.1.1
     yarn: ^1.22.19
   languageName: unknown
@@ -14797,6 +14798,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"moment@npm:^2.29.4":
+  version: 2.29.4
+  resolution: "moment@npm:2.29.4"
+  checksum: 0ec3f9c2bcba38dc2451b1daed5daded747f17610b92427bebe1d08d48d8b7bdd8d9197500b072d14e326dd0ccf3e326b9e3d07c5895d3d49e39b6803b76e80e
+  languageName: node
+  linkType: hard
+
 "move-concurrently@npm:^1.0.1":
   version: 1.0.1
   resolution: "move-concurrently@npm:1.0.1"

From 3eb3bcb68c059bee8ebaa914339199c0ea810e23 Mon Sep 17 00:00:00 2001
From: Victor <victor@storyteller.ai>
Date: Thu, 23 Nov 2023 22:25:24 -0800
Subject: [PATCH 3/9] more cleanup

---
 .../common/AudioInput/AudioInput.tsx          | 18 +-------
 .../voice_designer/VoiceDesignerFormPage.tsx  | 44 ++++++-------------
 .../voice_designer/VoiceDesignerMainPage.tsx  | 14 +++---
 .../components/steps/UploadSamples.tsx        | 28 +++++-------
 4 files changed, 32 insertions(+), 72 deletions(-)

diff --git a/packages/fakeyou.com/src/components/common/AudioInput/AudioInput.tsx b/packages/fakeyou.com/src/components/common/AudioInput/AudioInput.tsx
index ce3344607..fbea15c32 100644
--- a/packages/fakeyou.com/src/components/common/AudioInput/AudioInput.tsx
+++ b/packages/fakeyou.com/src/components/common/AudioInput/AudioInput.tsx
@@ -21,26 +21,10 @@ interface Props {
 const n = () => {};
 
 export default function AudioInput({ children, clear = n, file, hideDetails, hideClearDetails, inputProps, ...rest }: Props) {
-
-  // const transitions = useTransition(file, {
-  //   config: { tension: 120,  friction: 15 },
-  //   from: { opacity: 0 },
-  //   enter: { opacity: 1 },
-  //   leave: { opacity: 0 },
-  //   onRest,
-  // });
-
   return <div {...{ className: "fy-audio-uploader" }}>
     <FileWrapper {...{ fileTypes, ...inputProps, panelClass: "p-3", ...rest }}>
      { file ? <FileDetails {...{ clear, hideClearDetails, icon: faFileAudio, file }}/> : <FileLabel {...{ fileTypes }}/> }
     </FileWrapper>
-      { children
-      //   transitions((style, i) => i ? <a.div {...{ className: "audio-details", style }}>
-      //   <div {...{ className: "panel panel-inner rounded p-3" }}>
-      //     <InputVcAudioPlayer {...{ filename: blob as string }}/>
-      //   </div>
-      //   { !hideActions && <FileActions {...{ clear, success, submit, working }}/> }
-      // </a.div> : null )
-      }
+      { children }
   </div>;
 };
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/v2/view/pages/voice_designer/VoiceDesignerFormPage.tsx b/packages/fakeyou.com/src/v2/view/pages/voice_designer/VoiceDesignerFormPage.tsx
index 606ea93ae..0e78478cd 100644
--- a/packages/fakeyou.com/src/v2/view/pages/voice_designer/VoiceDesignerFormPage.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/voice_designer/VoiceDesignerFormPage.tsx
@@ -1,11 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
-import {
-  faEye,
-  faLanguage,
-  faPencil,
-  faWaveform,
-} from "@fortawesome/pro-solid-svg-icons";
+import { faEye, faLanguage, faPencil, faWaveform } from "@fortawesome/pro-solid-svg-icons";
 import { usePrefixedDocumentTitle } from "common/UsePrefixedDocumentTitle";
 import Panel from "components/common/Panel";
 import { Stepper } from "./components/Stepper";
@@ -15,14 +10,9 @@ import { VoiceDetails } from "./components/steps/VoiceDetails";
 import PageHeader from "components/layout/PageHeader";
 import Container from "components/common/Container";
 import { useHistory } from "react-router-dom";
-
 import { v4 as uuidv4 } from "uuid";
-
 import { useFile } from "hooks";
-
 import useVoiceRequests from "./useVoiceRequests";
-import useUploadedFiles from "hooks/useUploadedFiles";
-
 import { FrontendInferenceJobType } from "@storyteller/components/src/jobs/InferenceJob";
 import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper";
 
@@ -37,8 +27,8 @@ function VoiceDesignerFormPage({ enqueueInferenceJob, sessionWrapper }: { enqueu
   const [visibility, visibilitySet] = useState("hidden");
   const [title, titleSet] = useState("");
   const [fetched,fetchedSet] = useState(false);
-  const deleteEverything = useUploadedFiles((state: any) => state.deleteEverything);
-  const audioProps = useFile({}); // contains upload inout state and controls, see docs
+  const [uploadStatus,uploadStatusSet] = useState(0); // will replace with enum
+  const audioProps = useFile({});
 
   const datasetInputs = [
     {
@@ -67,26 +57,20 @@ function VoiceDesignerFormPage({ enqueueInferenceJob, sessionWrapper }: { enqueu
   ];
 
   const { dataset_token } = useParams<RouteParams>();
-  const [isNewCreation] = useState(!dataset_token);
-  const isEditMode = Boolean(dataset_token) && !isNewCreation;
+  const existingVoice = !!dataset_token;
 
-  usePrefixedDocumentTitle(isEditMode ? "Edit Dataset" : "Create New Voice");
+  usePrefixedDocumentTitle(existingVoice ? "Edit Dataset" : "Create New Voice");
 
   const initialStep = history.location.pathname.includes("/upload") ? 1 : 0;
   const [currentStep, setCurrentStep] = useState(initialStep);
-  const [audioSamplesReady, setAudioSamplesReady] = useState(false);
+  const steps = existingVoice ? ["Edit Details", "Edit Samples"] : ["Voice Details", "Upload Samples"];
 
-  const steps = isEditMode
-    ? ["Edit Details", "Edit Samples"]
-    : ["Voice Details", "Upload Samples"];
-
-  // const key = !isNewCreation && (dataset_token || uuidv4());
   const displayStep = (step: any) => {
     switch (step) {
       case 0:
         return <VoiceDetails {...{ datasetInputs }} />;
       case 1:
-        return <UploadSamples {...{ audioProps, datasetToken: dataset_token, setAudioSamplesReady }}/>;
+        return <UploadSamples {...{ audioProps, datasetToken: dataset_token, uploadStatus, uploadStatusSet }}/>;
       default:
         return null;
     }
@@ -104,7 +88,7 @@ function VoiceDesignerFormPage({ enqueueInferenceJob, sessionWrapper }: { enqueu
 
   const handleNext = () => {
     if (currentStep === 0) {
-      if (isNewCreation) {
+      if (!existingVoice) {
         // It's a new creation and on the first step
 
         datasets.create("",{
@@ -113,7 +97,6 @@ function VoiceDesignerFormPage({ enqueueInferenceJob, sessionWrapper }: { enqueu
           idempotency_token: uuidv4(),
         }).then((res: any) => {
           if (res && res.success && res.token) {
-            deleteEverything();
             history.push(`/voice-designer/dataset/${ res.token }/upload`);
           } 
         });
@@ -143,7 +126,6 @@ function VoiceDesignerFormPage({ enqueueInferenceJob, sessionWrapper }: { enqueu
         voice_dataset_token: dataset_token || "",
       })
       .then((res: any) => {
-        deleteEverything();
         if (res && res.success) {
           enqueueInferenceJob(
             res.inference_job_token,
@@ -174,10 +156,10 @@ function VoiceDesignerFormPage({ enqueueInferenceJob, sessionWrapper }: { enqueu
   return (
     <Container type="panel">
       <PageHeader
-        title={isEditMode ? "Edit Dataset" : "Create New Voice"}
-        titleIcon={isEditMode ? faPencil : faWaveform}
+        title={existingVoice ? "Edit Dataset" : "Create New Voice"}
+        titleIcon={existingVoice ? faPencil : faWaveform}
         subText={
-          isEditMode
+          existingVoice
             ? "Edit your dataset by uploading more samples to create a new voice"
             : "Add voice details and upload audio samples to clone your voice!"
         }
@@ -185,7 +167,7 @@ function VoiceDesignerFormPage({ enqueueInferenceJob, sessionWrapper }: { enqueu
         showBackButton={true}
         backbuttonLabel="Back to Voice Designer"
         backbuttonTo={
-          isEditMode ? "/voice-designer/datasets" : "/voice-designer/voices"
+          existingVoice ? "/voice-designer/datasets" : "/voice-designer/voices"
         }
       />
 
@@ -202,7 +184,7 @@ function VoiceDesignerFormPage({ enqueueInferenceJob, sessionWrapper }: { enqueu
           onBack={handleBack}
           onNext={handleNext}
           onCreate={handleCreateVoice}
-          createDisabled={!audioSamplesReady}
+          createDisabled={uploadStatus === 1} // will replace with enum
         />
       </Panel>
     </Container>
diff --git a/packages/fakeyou.com/src/v2/view/pages/voice_designer/VoiceDesignerMainPage.tsx b/packages/fakeyou.com/src/v2/view/pages/voice_designer/VoiceDesignerMainPage.tsx
index 978726923..971d54b1f 100644
--- a/packages/fakeyou.com/src/v2/view/pages/voice_designer/VoiceDesignerMainPage.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/voice_designer/VoiceDesignerMainPage.tsx
@@ -4,7 +4,7 @@ import {
   faPenToSquare,
   faPlus,
   faRightToBracket,
-  // faStar,
+  faStar,
   faWaveform,
 } from "@fortawesome/pro-solid-svg-icons";
 import InferenceJobsList from "components/layout/InferenceJobsList";
@@ -170,11 +170,11 @@ function VoiceDesignerMainPage(props: Props) {
     to: "/signup",
   };
 
-  // const pricingButton = {
-  //   label: `View Pricing`,
-  //   icon: faStar,
-  //   to: "/pricing",
-  // };
+  const pricingButton = {
+    label: `View Pricing`,
+    icon: faStar,
+    to: "/pricing",
+  };
 
   const dataPlaceholder = () => <div className="d-flex flex-column list-items p-5 align-items-center">
     <h5 className="fw-semibold mb-3">
@@ -263,7 +263,7 @@ function VoiceDesignerMainPage(props: Props) {
       <Container type="panel">
         <PageHeader {...{
           button: user ? createVoiceButton : signUpButton,
-          ...!user ? { secondaryButton: signUpButton  } : {},
+          ...!user ? { secondaryButton: pricingButton  } : {},
           title: "Voice Designer",
           titleIcon: faWaveform,
           subText: "Create your own AI voice by providing audio files of the voice you want to clone.",
diff --git a/packages/fakeyou.com/src/v2/view/pages/voice_designer/components/steps/UploadSamples.tsx b/packages/fakeyou.com/src/v2/view/pages/voice_designer/components/steps/UploadSamples.tsx
index 3acb1a2fb..34b4f53c6 100644
--- a/packages/fakeyou.com/src/v2/view/pages/voice_designer/components/steps/UploadSamples.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/voice_designer/components/steps/UploadSamples.tsx
@@ -1,27 +1,22 @@
 import React, { useEffect, useState } from "react";
-// import VoiceDesignerUploadComponent from "../VoiceDesignerUploadComponent";
 import { AudioInput } from "components/common";
-
 import moment from 'moment';
-
 import ListItems from "../NewList";
 import { v4 as uuidv4 } from "uuid";
-// import { SessionContext } from 'context';
-
 import { ListSamplesForDataset } from "@storyteller/components/src/api/voice_designer/voice_dataset_samples/ListSamplesForDataset";
 import { UploadSample } from "@storyteller/components/src/api/voice_designer/voice_dataset_samples/UploadSample";
 import { DeleteSample } from "@storyteller/components/src/api/voice_designer/voice_dataset_samples/DeleteSample";
-
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faWaveform } from "@fortawesome/pro-solid-svg-icons";
 
+interface Props {
+   audioProps: any,
+   datasetToken?: string,
+   uploadStatus: number,
+   uploadStatusSet: any 
+}
 
-function UploadSamples({ audioProps, datasetToken, setAudioSamplesReady }: { audioProps: any, datasetToken?: string, setAudioSamplesReady:any  }) {
-  // const [convertLoading, setConvertLoading] = useState(false);
-  // const [canConvert, setCanConvert] = useState(false);
-  // const [mediaUploadToken, setMediaUploadToken] = useState<string | undefined>();
-  // const [formIsCleared, setFormIsCleared] = useState(false);
-  const [uploaded,uploadedSet] = useState(false);
+function UploadSamples({ audioProps, datasetToken, uploadStatus, uploadStatusSet }: Props) {
   const [samples,samplesSet] = useState<any[]>([]);
   const [listFetched,listFetchedSet] = useState(false);
 
@@ -54,8 +49,8 @@ function UploadSamples({ audioProps, datasetToken, setAudioSamplesReady }: { aud
   });
 
   useEffect(() => {
-    if (audioProps.file && datasetToken && !uploaded) {
-      uploadedSet(true);
+    if (audioProps.file && datasetToken && !uploadStatus) {
+      uploadStatusSet(1);
       UploadSample("",{
         dataset_token: datasetToken || "",
         file: audioProps.file,
@@ -64,13 +59,12 @@ function UploadSamples({ audioProps, datasetToken, setAudioSamplesReady }: { aud
       .then((res) => {
         if (res.success) {
           audioProps.clear();
-          uploadedSet(false);
+          uploadStatusSet(2);
           listFetchedSet(false);
         }
       });
     }
 
-
     if (datasetToken && !listFetched) {
       listFetchedSet(true);
       ListSamplesForDataset(datasetToken,{})
@@ -81,7 +75,7 @@ function UploadSamples({ audioProps, datasetToken, setAudioSamplesReady }: { aud
       });
     }
 
-  },[audioProps, datasetToken, listFetched, uploaded]);
+  },[audioProps, datasetToken, listFetched, uploadStatus, uploadStatusSet]);
 
   return (
     <div className="d-flex flex-column gap-4">

From 785cb6ef655713e77408c129f912e6994e5bb915 Mon Sep 17 00:00:00 2001
From: Victor <victor@storyteller.ai>
Date: Thu, 23 Nov 2023 22:47:16 -0800
Subject: [PATCH 4/9] added palceholder for when there are no samples

---
 .../components/steps/UploadSamples.tsx        | 23 +++++++++++--------
 1 file changed, 13 insertions(+), 10 deletions(-)

diff --git a/packages/fakeyou.com/src/v2/view/pages/voice_designer/components/steps/UploadSamples.tsx b/packages/fakeyou.com/src/v2/view/pages/voice_designer/components/steps/UploadSamples.tsx
index 34b4f53c6..09dabca2a 100644
--- a/packages/fakeyou.com/src/v2/view/pages/voice_designer/components/steps/UploadSamples.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/voice_designer/components/steps/UploadSamples.tsx
@@ -77,17 +77,20 @@ function UploadSamples({ audioProps, datasetToken, uploadStatus, uploadStatusSet
 
   },[audioProps, datasetToken, listFetched, uploadStatus, uploadStatusSet]);
 
-  return (
-    <div className="d-flex flex-column gap-4">
-      <div>
-        <label className="sub-title">Upload Audio</label>
-        <div className="d-flex flex-column gap-3 upload-component">
-          <AudioInput {...{ ...audioProps }}/>
-          { samples.length ? <ListItems {...{ data: actionSamples, isLoading: false }}/> : null }
-        </div>
-      </div>
+  return <div className="d-flex flex-column gap-4">
+    <label className="sub-title">Upload Audio</label>
+    <div className="d-flex flex-column gap-3 upload-component">
+      <AudioInput {...{ ...audioProps }}/>
+      { samples.length ? <ListItems {...{ data: actionSamples, isLoading: false }}/> : 
+        <div className="panel panel-inner text-center p-5 rounded-5 h-100">
+          <div className="d-flex flex-column opacity-75 h-100 justify-content-center">
+            <FontAwesomeIcon icon={faWaveform} className="fs-3 mb-3" />
+            <h5>No voice samples yet</h5>
+            <p>Uploaded samples will appear here.</p>
+          </div>
+        </div> }
     </div>
-  );
+  </div>;
 }
 
 export { UploadSamples };

From d0e49f30c03a6371532b6e29d9d3d3a7b86177a6 Mon Sep 17 00:00:00 2001
From: Victor <victor@storyteller.ai>
Date: Fri, 24 Nov 2023 00:36:09 -0800
Subject: [PATCH 5/9] sample uploading changes

---
 packages/fakeyou.com/src/App.tsx              |  9 +++-
 .../components/providers/Session/Session.tsx  |  6 ++-
 .../src/context/SessionContext.tsx            |  5 +-
 .../src/hooks/useSession/useSession.tsx       |  7 ++-
 .../voice_designer/VoiceDesignerFormPage.tsx  |  8 +--
 .../voice_designer/VoiceDesignerMainPage.tsx  |  1 -
 .../components/steps/UploadSamples.tsx        | 53 ++++++++++++-------
 7 files changed, 59 insertions(+), 30 deletions(-)

diff --git a/packages/fakeyou.com/src/App.tsx b/packages/fakeyou.com/src/App.tsx
index 83502a29f..ba17dac76 100644
--- a/packages/fakeyou.com/src/App.tsx
+++ b/packages/fakeyou.com/src/App.tsx
@@ -146,6 +146,8 @@ interface State {
 
   // Rollout of vocodes 2.0
   enableAlpha: boolean;
+
+  sessionFetched: boolean;
   sessionWrapper: SessionWrapper;
   sessionSubscriptionsWrapper: SessionSubscriptionsWrapper;
 
@@ -237,6 +239,7 @@ class App extends React.Component<Props, State> {
       enableAlpha: enableAlpha,
       migrationMode: migrationMode,
 
+      sessionFetched: false,
       sessionWrapper: SessionWrapper.emptySession(),
       sessionSubscriptionsWrapper:
         SessionSubscriptionsWrapper.emptySubscriptions(),
@@ -328,6 +331,7 @@ class App extends React.Component<Props, State> {
   };
 
   querySessionSubscriptions = async () => {
+    this.setState({ sessionFetched: true });
     const cookies = new Cookies();
 
     const sessionSubscriptionsWrapper =
@@ -836,7 +840,10 @@ class App extends React.Component<Props, State> {
                 }}
               >
                 <SessionProvider
-                  {...{ sessionWrapper: this.state.sessionWrapper }}
+                  {...{ 
+                    sessionWrapper: this.state.sessionWrapper,
+                    sessionFetched: this.state.sessionFetched
+                  }}
                 >
                   <Switch>
                     <Route path="/">
diff --git a/packages/fakeyou.com/src/components/providers/Session/Session.tsx b/packages/fakeyou.com/src/components/providers/Session/Session.tsx
index 518dd6dce..bd22814fd 100644
--- a/packages/fakeyou.com/src/components/providers/Session/Session.tsx
+++ b/packages/fakeyou.com/src/components/providers/Session/Session.tsx
@@ -3,11 +3,13 @@ import { SessionContext } from 'context';
 
 interface Props {
   children?: any;
+  sessionFetched: boolean;
   sessionWrapper?: any;
 }
 
-export default function Session({ children, sessionWrapper }: Props) { 
-  return <SessionContext.Provider {...{ value: { sessionWrapper } }}>
+export default function Session({ children, sessionFetched, sessionWrapper }: Props) { 
+  console.log("😎",sessionFetched);
+  return <SessionContext.Provider {...{ value: { sessionFetched, sessionWrapper } }}>
     { children }
   </SessionContext.Provider>
 };
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/context/SessionContext.tsx b/packages/fakeyou.com/src/context/SessionContext.tsx
index 4629d8248..f885ce318 100644
--- a/packages/fakeyou.com/src/context/SessionContext.tsx
+++ b/packages/fakeyou.com/src/context/SessionContext.tsx
@@ -1,7 +1,10 @@
 import { createContext } from "react";
 
 interface SessionContextType {
+	sessionFetched: boolean,
 	sessionWrapper?: any
 }
 
-export default createContext<SessionContextType>({});
\ No newline at end of file
+export default createContext<SessionContextType>({
+	sessionFetched: false
+});
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/hooks/useSession/useSession.tsx b/packages/fakeyou.com/src/hooks/useSession/useSession.tsx
index e93257558..2efa87686 100644
--- a/packages/fakeyou.com/src/hooks/useSession/useSession.tsx
+++ b/packages/fakeyou.com/src/hooks/useSession/useSession.tsx
@@ -2,6 +2,9 @@ import { useContext } from 'react';
 import { SessionContext } from 'context';
 
 export default function useInferenceJobs() {
-  const { sessionWrapper } = useContext(SessionContext);
-  return sessionWrapper?.sessionStateResponse || {};
+  const { sessionFetched, sessionWrapper } = useContext(SessionContext);
+  return {
+    sessionFetched,
+    ...sessionWrapper?.sessionStateResponse 
+  };
 };
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/v2/view/pages/voice_designer/VoiceDesignerFormPage.tsx b/packages/fakeyou.com/src/v2/view/pages/voice_designer/VoiceDesignerFormPage.tsx
index 0e78478cd..a7f948e05 100644
--- a/packages/fakeyou.com/src/v2/view/pages/voice_designer/VoiceDesignerFormPage.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/voice_designer/VoiceDesignerFormPage.tsx
@@ -15,6 +15,7 @@ import { useFile } from "hooks";
 import useVoiceRequests from "./useVoiceRequests";
 import { FrontendInferenceJobType } from "@storyteller/components/src/jobs/InferenceJob";
 import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper";
+import { useSession } from "hooks";
 
 interface RouteParams {
   dataset_token?: string;
@@ -29,6 +30,7 @@ function VoiceDesignerFormPage({ enqueueInferenceJob, sessionWrapper }: { enqueu
   const [fetched,fetchedSet] = useState(false);
   const [uploadStatus,uploadStatusSet] = useState(0); // will replace with enum
   const audioProps = useFile({});
+  const { user, sessionFetched } = useSession();
 
   const datasetInputs = [
     {
@@ -149,7 +151,7 @@ function VoiceDesignerFormPage({ enqueueInferenceJob, sessionWrapper }: { enqueu
     }
   },[dataset_token,datasets,fetched]);
 
-  if (!sessionWrapper.isLoggedIn()) {
+  if (sessionFetched && !user) {
     history.push("/voice-designer");
   }
 
@@ -170,8 +172,7 @@ function VoiceDesignerFormPage({ enqueueInferenceJob, sessionWrapper }: { enqueu
           existingVoice ? "/voice-designer/datasets" : "/voice-designer/voices"
         }
       />
-
-      <Panel>
+    { sessionFetched && user && <Panel>
         <div className="p-3 px-lg-4 bg-stepper">
           <Stepper steps={steps} currentStep={currentStep} />
         </div>
@@ -187,6 +188,7 @@ function VoiceDesignerFormPage({ enqueueInferenceJob, sessionWrapper }: { enqueu
           createDisabled={uploadStatus === 1} // will replace with enum
         />
       </Panel>
+    }
     </Container>
   );
 }
diff --git a/packages/fakeyou.com/src/v2/view/pages/voice_designer/VoiceDesignerMainPage.tsx b/packages/fakeyou.com/src/v2/view/pages/voice_designer/VoiceDesignerMainPage.tsx
index 971d54b1f..649724fe9 100644
--- a/packages/fakeyou.com/src/v2/view/pages/voice_designer/VoiceDesignerMainPage.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/voice_designer/VoiceDesignerMainPage.tsx
@@ -54,7 +54,6 @@ function VoiceDesignerMainPage(props: Props) {
   if (pathname === "/voice-designer" || pathname === "/voice-designer/") {
     return <Redirect to="/voice-designer/voices" />;
   }
-
   const openDeleteModal = (token: string, type: string) => {
     setDeleteItem(token);
     setDeleteType(type);
diff --git a/packages/fakeyou.com/src/v2/view/pages/voice_designer/components/steps/UploadSamples.tsx b/packages/fakeyou.com/src/v2/view/pages/voice_designer/components/steps/UploadSamples.tsx
index 09dabca2a..e5a53bb90 100644
--- a/packages/fakeyou.com/src/v2/view/pages/voice_designer/components/steps/UploadSamples.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/voice_designer/components/steps/UploadSamples.tsx
@@ -18,6 +18,7 @@ interface Props {
 
 function UploadSamples({ audioProps, datasetToken, uploadStatus, uploadStatusSet }: Props) {
   const [samples,samplesSet] = useState<any[]>([]);
+  const [uploads,uploadsSet] = useState<any[]>([]);
   const [listFetched,listFetchedSet] = useState(false);
 
   const SampleBadge = () => <FontAwesomeIcon icon={faWaveform} className="me-2 me-lg-3" />;
@@ -31,34 +32,46 @@ function UploadSamples({ audioProps, datasetToken, uploadStatus, uploadStatusSet
       });
   };
 
-  const actionSamples = samples.map((sample: any, i: number) => {
-    let date = new Date(sample.created_at);
-    return {
-      ...sample,
-      badge: SampleBadge,
-      buttons: [
-        {
-          label: "Delete",
-          small: true,
-          variant: "secondary",
-          onClick: sampleClick()
-        },
-      ],
-      name: `Sample from ${ date ? moment(date).format("MMMM Do YYYY, h:mm a") : "" }`,
-    };
-  });
+  const actionSamples = [
+    ...uploads,
+    ...samples.map((sample: any, i: number) => {
+        let date = new Date(sample.created_at);
+        return {
+          ...sample,
+          badge: SampleBadge,
+          buttons: [
+            {
+              label: "Delete",
+              small: true,
+              variant: "secondary",
+              onClick: sampleClick()
+            },
+          ],
+          name: `Sample from ${ date ? moment(date).format("MMMM Do YYYY, h:mm a") : "" }`,
+        };
+      })
+  ];
 
   useEffect(() => {
     if (audioProps.file && datasetToken && !uploadStatus) {
+      let uuid_idempotency_token = uuidv4();
+      audioProps.clear();
+      uploadsSet([
+        {
+          name: "Uploading",
+          uuid_idempotency_token
+        },
+        ...uploads
+      ]);
       uploadStatusSet(1);
       UploadSample("",{
         dataset_token: datasetToken || "",
         file: audioProps.file,
-        uuid_idempotency_token: uuidv4(),
+        uuid_idempotency_token,
       })
       .then((res) => {
         if (res.success) {
-          audioProps.clear();
+          uploadsSet(uploads.filter((item,i) => item.uuid_idempotency_token === uuid_idempotency_token));
           uploadStatusSet(2);
           listFetchedSet(false);
         }
@@ -75,13 +88,13 @@ function UploadSamples({ audioProps, datasetToken, uploadStatus, uploadStatusSet
       });
     }
 
-  },[audioProps, datasetToken, listFetched, uploadStatus, uploadStatusSet]);
+  },[audioProps, datasetToken, listFetched, uploads, uploadStatus, uploadStatusSet]);
 
   return <div className="d-flex flex-column gap-4">
     <label className="sub-title">Upload Audio</label>
     <div className="d-flex flex-column gap-3 upload-component">
       <AudioInput {...{ ...audioProps }}/>
-      { samples.length ? <ListItems {...{ data: actionSamples, isLoading: false }}/> : 
+      { actionSamples.length ? <ListItems {...{ data: actionSamples, isLoading: false }}/> : 
         <div className="panel panel-inner text-center p-5 rounded-5 h-100">
           <div className="d-flex flex-column opacity-75 h-100 justify-content-center">
             <FontAwesomeIcon icon={faWaveform} className="fs-3 mb-3" />

From 4574ecc96ac197f5fce771aac002bdd04c74918a Mon Sep 17 00:00:00 2001
From: Victor <victor@storyteller.ai>
Date: Fri, 24 Nov 2023 15:24:48 -0800
Subject: [PATCH 6/9] samples listing, deleting, uploading, and blocking voice
 designer creation/updating while in progress

---
 .../voice_designer/VoiceDesignerFormPage.tsx  |  9 +++--
 .../components/steps/UploadSamples.tsx        | 36 ++++++++++---------
 2 files changed, 26 insertions(+), 19 deletions(-)

diff --git a/packages/fakeyou.com/src/v2/view/pages/voice_designer/VoiceDesignerFormPage.tsx b/packages/fakeyou.com/src/v2/view/pages/voice_designer/VoiceDesignerFormPage.tsx
index a7f948e05..57a56586b 100644
--- a/packages/fakeyou.com/src/v2/view/pages/voice_designer/VoiceDesignerFormPage.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/voice_designer/VoiceDesignerFormPage.tsx
@@ -28,7 +28,9 @@ function VoiceDesignerFormPage({ enqueueInferenceJob, sessionWrapper }: { enqueu
   const [visibility, visibilitySet] = useState("hidden");
   const [title, titleSet] = useState("");
   const [fetched,fetchedSet] = useState(false);
-  const [uploadStatus,uploadStatusSet] = useState(0); // will replace with enum
+  const [deleting,deletingSet] = useState([]); // samples currently being uploaded
+  const [inProgress,inProgressSet] = useState([]); // samples currently being uploaded
+  const [samples,samplesSet] = useState([]); // fetched/uploaded samples
   const audioProps = useFile({});
   const { user, sessionFetched } = useSession();
 
@@ -66,13 +68,14 @@ function VoiceDesignerFormPage({ enqueueInferenceJob, sessionWrapper }: { enqueu
   const initialStep = history.location.pathname.includes("/upload") ? 1 : 0;
   const [currentStep, setCurrentStep] = useState(initialStep);
   const steps = existingVoice ? ["Edit Details", "Edit Samples"] : ["Voice Details", "Upload Samples"];
+  const uploadProps = { audioProps, datasetToken: dataset_token, deleting, deletingSet, inProgress, inProgressSet, samples, samplesSet };
 
   const displayStep = (step: any) => {
     switch (step) {
       case 0:
         return <VoiceDetails {...{ datasetInputs }} />;
       case 1:
-        return <UploadSamples {...{ audioProps, datasetToken: dataset_token, uploadStatus, uploadStatusSet }}/>;
+        return <UploadSamples {...uploadProps }/>;
       default:
         return null;
     }
@@ -185,7 +188,7 @@ function VoiceDesignerFormPage({ enqueueInferenceJob, sessionWrapper }: { enqueu
           onBack={handleBack}
           onNext={handleNext}
           onCreate={handleCreateVoice}
-          createDisabled={uploadStatus === 1} // will replace with enum
+          createDisabled={ !!deleting.length || !!inProgress.length || !samples.length } // deleting, uploading, or no samples = disabled
         />
       </Panel>
     }
diff --git a/packages/fakeyou.com/src/v2/view/pages/voice_designer/components/steps/UploadSamples.tsx b/packages/fakeyou.com/src/v2/view/pages/voice_designer/components/steps/UploadSamples.tsx
index e5a53bb90..e3a345bd2 100644
--- a/packages/fakeyou.com/src/v2/view/pages/voice_designer/components/steps/UploadSamples.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/voice_designer/components/steps/UploadSamples.tsx
@@ -12,28 +12,31 @@ import { faWaveform } from "@fortawesome/pro-solid-svg-icons";
 interface Props {
    audioProps: any,
    datasetToken?: string,
-   uploadStatus: number,
-   uploadStatusSet: any 
+   deleting: any,
+   deletingSet: any,
+   inProgress: any,
+   inProgressSet: any
+   samples: any,
+   samplesSet: any
 }
 
-function UploadSamples({ audioProps, datasetToken, uploadStatus, uploadStatusSet }: Props) {
-  const [samples,samplesSet] = useState<any[]>([]);
-  const [uploads,uploadsSet] = useState<any[]>([]);
+function UploadSamples({ audioProps, datasetToken, deleting, deletingSet, inProgress, inProgressSet, samples, samplesSet }: Props) {
   const [listFetched,listFetchedSet] = useState(false);
 
   const SampleBadge = () => <FontAwesomeIcon icon={faWaveform} className="me-2 me-lg-3" />;
 
   const sampleClick =  () => ({ target }: { target: any }) => {
       let sampleToken = samples[target.name.split(",")[0].split(":")[1]].sample_token;
+      deletingSet([ ...deleting, sampleToken ]); // add to deleting list
       DeleteSample(sampleToken,{ as_mod: false, set_delete: true })
       .then((res) => {
         listFetchedSet(false);
-        // set unBusy here
+        deletingSet(deleting.filter((item: any) => item === sampleToken)); // remove from deleting list
       });
   };
 
-  const actionSamples = [
-    ...uploads,
+  const actionSamples = [ // these spread operators combine the inProgress and sample arrays
+    ...inProgress,
     ...samples.map((sample: any, i: number) => {
         let date = new Date(sample.created_at);
         return {
@@ -53,17 +56,17 @@ function UploadSamples({ audioProps, datasetToken, uploadStatus, uploadStatusSet
   ];
 
   useEffect(() => {
-    if (audioProps.file && datasetToken && !uploadStatus) {
+    if (audioProps.file && datasetToken) {
       let uuid_idempotency_token = uuidv4();
       audioProps.clear();
-      uploadsSet([
+      inProgressSet([ // add sample to in progress list
         {
+        //  badge: Component // this can be a loading indicator
           name: "Uploading",
           uuid_idempotency_token
         },
-        ...uploads
+        ...inProgress
       ]);
-      uploadStatusSet(1);
       UploadSample("",{
         dataset_token: datasetToken || "",
         file: audioProps.file,
@@ -71,9 +74,10 @@ function UploadSamples({ audioProps, datasetToken, uploadStatus, uploadStatusSet
       })
       .then((res) => {
         if (res.success) {
-          uploadsSet(uploads.filter((item,i) => item.uuid_idempotency_token === uuid_idempotency_token));
-          uploadStatusSet(2);
-          listFetchedSet(false);
+          inProgressSet(inProgress.filter((item: any) => // removes sample from in progress list
+            item.uuid_idempotency_token === uuid_idempotency_token)
+          );
+          listFetchedSet(false); // refetches sample list
         }
       });
     }
@@ -88,7 +92,7 @@ function UploadSamples({ audioProps, datasetToken, uploadStatus, uploadStatusSet
       });
     }
 
-  },[audioProps, datasetToken, listFetched, uploads, uploadStatus, uploadStatusSet]);
+  },[audioProps, datasetToken, listFetched, inProgress, inProgressSet, samplesSet]);
 
   return <div className="d-flex flex-column gap-4">
     <label className="sub-title">Upload Audio</label>

From 17165207b9aa98db1eee8e14e4877b200de80c72 Mon Sep 17 00:00:00 2001
From: Victor <victor@storyteller.ai>
Date: Sat, 25 Nov 2023 22:03:53 -0800
Subject: [PATCH 7/9] removed debug emoji

---
 .../fakeyou.com/src/components/providers/Session/Session.tsx     | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/fakeyou.com/src/components/providers/Session/Session.tsx b/packages/fakeyou.com/src/components/providers/Session/Session.tsx
index bd22814fd..dd58cd582 100644
--- a/packages/fakeyou.com/src/components/providers/Session/Session.tsx
+++ b/packages/fakeyou.com/src/components/providers/Session/Session.tsx
@@ -8,7 +8,6 @@ interface Props {
 }
 
 export default function Session({ children, sessionFetched, sessionWrapper }: Props) { 
-  console.log("😎",sessionFetched);
   return <SessionContext.Provider {...{ value: { sessionFetched, sessionWrapper } }}>
     { children }
   </SessionContext.Provider>

From 5417982f8625e166c466779b3f97c6a4be05afbc Mon Sep 17 00:00:00 2001
From: BFlat <bflat@storyteller.ai>
Date: Tue, 28 Nov 2023 09:40:18 +0700
Subject: [PATCH 8/9] no rating stat translations (#388)

* no rating stat translations

* translate
---
 packages/fakeyou.com/public/locales/bn/FaceAnimator.json    | 4 +++-
 packages/fakeyou.com/public/locales/bn/LandingPage.json     | 2 +-
 packages/fakeyou.com/public/locales/bn/Rating.json          | 1 +
 packages/fakeyou.com/public/locales/de/FaceAnimator.json    | 4 +++-
 packages/fakeyou.com/public/locales/de/Rating.json          | 1 +
 packages/fakeyou.com/public/locales/en/FaceAnimator.json    | 6 +++---
 packages/fakeyou.com/public/locales/en/Rating.json          | 1 +
 packages/fakeyou.com/public/locales/es/FaceAnimator.json    | 4 +++-
 packages/fakeyou.com/public/locales/es/Rating.json          | 1 +
 packages/fakeyou.com/public/locales/fr/FaceAnimator.json    | 4 +++-
 packages/fakeyou.com/public/locales/fr/Rating.json          | 1 +
 packages/fakeyou.com/public/locales/hi/FaceAnimator.json    | 4 +++-
 packages/fakeyou.com/public/locales/hi/Rating.json          | 1 +
 packages/fakeyou.com/public/locales/id/FaceAnimator.json    | 4 +++-
 packages/fakeyou.com/public/locales/id/Rating.json          | 1 +
 packages/fakeyou.com/public/locales/it/FaceAnimator.json    | 4 +++-
 packages/fakeyou.com/public/locales/it/Rating.json          | 1 +
 packages/fakeyou.com/public/locales/ja/FaceAnimator.json    | 4 +++-
 packages/fakeyou.com/public/locales/ja/Rating.json          | 1 +
 packages/fakeyou.com/public/locales/ko/FaceAnimator.json    | 4 +++-
 packages/fakeyou.com/public/locales/ko/Rating.json          | 1 +
 packages/fakeyou.com/public/locales/pt/FaceAnimator.json    | 4 +++-
 packages/fakeyou.com/public/locales/pt/Rating.json          | 1 +
 packages/fakeyou.com/public/locales/ru/FaceAnimator.json    | 4 +++-
 packages/fakeyou.com/public/locales/ru/Rating.json          | 1 +
 packages/fakeyou.com/public/locales/th/FaceAnimator.json    | 4 +++-
 packages/fakeyou.com/public/locales/th/Rating.json          | 1 +
 packages/fakeyou.com/public/locales/tr/FaceAnimator.json    | 4 +++-
 packages/fakeyou.com/public/locales/tr/Rating.json          | 1 +
 packages/fakeyou.com/public/locales/vi/FaceAnimator.json    | 4 +++-
 packages/fakeyou.com/public/locales/vi/Rating.json          | 1 +
 .../fakeyou.com/public/locales/zh-Hans/FaceAnimator.json    | 4 +++-
 packages/fakeyou.com/public/locales/zh-Hans/Rating.json     | 1 +
 .../fakeyou.com/src/v2/view/_common/ratings/RatingStats.tsx | 2 +-
 34 files changed, 66 insertions(+), 20 deletions(-)

diff --git a/packages/fakeyou.com/public/locales/bn/FaceAnimator.json b/packages/fakeyou.com/public/locales/bn/FaceAnimator.json
index 5e555028a..1e15add15 100644
--- a/packages/fakeyou.com/public/locales/bn/FaceAnimator.json
+++ b/packages/fakeyou.com/public/locales/bn/FaceAnimator.json
@@ -8,7 +8,9 @@
   "inputs": {
     "downloadFile": "ডাউনলোড ফাইল",
     "generate": "তৈরি করুন",
-    "makeAnother": "আরেকটা তৈরি কর"
+    "makeAnother": "আরেকটা তৈরি কর",
+    "viewResult": "ফলাফল দেখুন",
+    "yourJobs": "আপনার কাজ"
   },
   "status": {
     "animationComplete": "অ্যানিমেশন সম্পূর্ণ!",
diff --git a/packages/fakeyou.com/public/locales/bn/LandingPage.json b/packages/fakeyou.com/public/locales/bn/LandingPage.json
index 4a094291f..041076490 100644
--- a/packages/fakeyou.com/public/locales/bn/LandingPage.json
+++ b/packages/fakeyou.com/public/locales/bn/LandingPage.json
@@ -17,7 +17,7 @@
   "heroButtonUpgradePlan": "আপগ্রেড পরিকল্পনা",
   "heroText": "আপনি যা চান তা বলে আপনার প্রিয় চরিত্রের অডিও বা ভিডিও তৈরি করতে FakeYou এর ডিপফেক প্রযুক্তি ব্যবহার করুন।",
   "heroTitle": "এআই মিউজিক, টেক্সট টু স্পিচ এবং ভয়েস টু ভয়েস",
-  "productFaceAnimatorText": "অডিওর সাথে মুখগুলিকে অ্যানিমেট করুন",
+  "productFaceAnimatorText": "অডিও দিয়ে মুখগুলোকে অ্যানিমেট করুন",
   "productFaceAnimatorTitle": "ফেস অ্যানিমেটর",
   "productNewTag": "নতুন",
   "productTtsText": "পাঠ্য থেকে অডিও তৈরি করুন",
diff --git a/packages/fakeyou.com/public/locales/bn/Rating.json b/packages/fakeyou.com/public/locales/bn/Rating.json
index 307eaf380..2b7784dc1 100644
--- a/packages/fakeyou.com/public/locales/bn/Rating.json
+++ b/packages/fakeyou.com/public/locales/bn/Rating.json
@@ -5,5 +5,6 @@
   "ratingGood": "ভয়েস ভাল শোনাচ্ছে",
   "ratingGreat": "ভয়েস দুর্দান্ত শোনাচ্ছে",
   "ratingLabel": "রেটিং:",
+  "ratingNone": "ভয়েস রেট করা হয়নি",
   "ratingOk": "ভয়েস ঠিক আছে শোনাচ্ছে"
 }
\ No newline at end of file
diff --git a/packages/fakeyou.com/public/locales/de/FaceAnimator.json b/packages/fakeyou.com/public/locales/de/FaceAnimator.json
index 0f548fb2c..06c846482 100644
--- a/packages/fakeyou.com/public/locales/de/FaceAnimator.json
+++ b/packages/fakeyou.com/public/locales/de/FaceAnimator.json
@@ -8,7 +8,9 @@
   "inputs": {
     "downloadFile": "Download-Datei",
     "generate": "Generieren",
-    "makeAnother": "Mach etwas anderes"
+    "makeAnother": "Mach etwas anderes",
+    "viewResult": "Zeige Ergebnis",
+    "yourJobs": "Ihre Jobs"
   },
   "status": {
     "animationComplete": "Animation abgeschlossen!",
diff --git a/packages/fakeyou.com/public/locales/de/Rating.json b/packages/fakeyou.com/public/locales/de/Rating.json
index 9f7537afd..7fed78344 100644
--- a/packages/fakeyou.com/public/locales/de/Rating.json
+++ b/packages/fakeyou.com/public/locales/de/Rating.json
@@ -5,5 +5,6 @@
   "ratingGood": "Stimme klingt gut",
   "ratingGreat": "Stimme klingt großartig",
   "ratingLabel": "Bewertung:",
+  "ratingNone": "Stimme nicht bewertet",
   "ratingOk": "Die Stimme klingt in Ordnung"
 }
\ No newline at end of file
diff --git a/packages/fakeyou.com/public/locales/en/FaceAnimator.json b/packages/fakeyou.com/public/locales/en/FaceAnimator.json
index c47dc54e4..9b6ce5866 100644
--- a/packages/fakeyou.com/public/locales/en/FaceAnimator.json
+++ b/packages/fakeyou.com/public/locales/en/FaceAnimator.json
@@ -3,14 +3,14 @@
     "audio": "Audio",
     "image": "Image",
     "subtitle": "Select and image with a clear face, and an audio sample, and generate a lipsynced video.",
-    "title": "Face Animator",
-    "yourJobs": "Your jobs"
+    "title": "Face Animator"
   },
   "inputs": {
     "downloadFile": "Download File",
     "generate": "Generate",
     "makeAnother": "Make another",
-    "viewResult": "View result"
+    "viewResult": "View result",
+    "yourJobs": "Your jobs"
   },
   "status": {
     "animationComplete": "Animation complete!",
diff --git a/packages/fakeyou.com/public/locales/en/Rating.json b/packages/fakeyou.com/public/locales/en/Rating.json
index 26bc48890..53ff386fc 100644
--- a/packages/fakeyou.com/public/locales/en/Rating.json
+++ b/packages/fakeyou.com/public/locales/en/Rating.json
@@ -5,5 +5,6 @@
   "ratingGood": "Voice Sounds Good",
   "ratingGreat": "Voice Sounds Great",
   "ratingLabel": "Rating:",
+  "ratingNone": "Voice Not Rated",
   "ratingOk": "Voice Sounds Okay"
 }
\ No newline at end of file
diff --git a/packages/fakeyou.com/public/locales/es/FaceAnimator.json b/packages/fakeyou.com/public/locales/es/FaceAnimator.json
index 9bb3dd208..f848243dd 100644
--- a/packages/fakeyou.com/public/locales/es/FaceAnimator.json
+++ b/packages/fakeyou.com/public/locales/es/FaceAnimator.json
@@ -8,7 +8,9 @@
   "inputs": {
     "downloadFile": "Descargar archivo",
     "generate": "Generar",
-    "makeAnother": "Hacer otro"
+    "makeAnother": "Hacer otro",
+    "viewResult": "Ver resultado",
+    "yourJobs": "Tus trabajos"
   },
   "status": {
     "animationComplete": "¡Animación completa!",
diff --git a/packages/fakeyou.com/public/locales/es/Rating.json b/packages/fakeyou.com/public/locales/es/Rating.json
index f10d5d24f..43d985ecd 100644
--- a/packages/fakeyou.com/public/locales/es/Rating.json
+++ b/packages/fakeyou.com/public/locales/es/Rating.json
@@ -5,5 +5,6 @@
   "ratingGood": "La voz suena bien",
   "ratingGreat": "La voz suena genial",
   "ratingLabel": "Clasificación:",
+  "ratingNone": "Voz no clasificada",
   "ratingOk": "La voz suena bien"
 }
\ No newline at end of file
diff --git a/packages/fakeyou.com/public/locales/fr/FaceAnimator.json b/packages/fakeyou.com/public/locales/fr/FaceAnimator.json
index 4be818153..7cb85ca0b 100644
--- a/packages/fakeyou.com/public/locales/fr/FaceAnimator.json
+++ b/packages/fakeyou.com/public/locales/fr/FaceAnimator.json
@@ -8,7 +8,9 @@
   "inputs": {
     "downloadFile": "Télécharger un fichier",
     "generate": "Générer",
-    "makeAnother": "Faire un autre"
+    "makeAnother": "Faire un autre",
+    "viewResult": "Voir résultat",
+    "yourJobs": "Vos emplois"
   },
   "status": {
     "animationComplete": "Animation terminée !",
diff --git a/packages/fakeyou.com/public/locales/fr/Rating.json b/packages/fakeyou.com/public/locales/fr/Rating.json
index 145e020a8..4615f63c5 100644
--- a/packages/fakeyou.com/public/locales/fr/Rating.json
+++ b/packages/fakeyou.com/public/locales/fr/Rating.json
@@ -5,5 +5,6 @@
   "ratingGood": "La voix sonne bien",
   "ratingGreat": "La voix sonne bien",
   "ratingLabel": "Notation:",
+  "ratingNone": "Voix non classée",
   "ratingOk": "La voix sonne bien"
 }
\ No newline at end of file
diff --git a/packages/fakeyou.com/public/locales/hi/FaceAnimator.json b/packages/fakeyou.com/public/locales/hi/FaceAnimator.json
index 088820607..4ead98b2f 100644
--- a/packages/fakeyou.com/public/locales/hi/FaceAnimator.json
+++ b/packages/fakeyou.com/public/locales/hi/FaceAnimator.json
@@ -8,7 +8,9 @@
   "inputs": {
     "downloadFile": "डाउनलोड फ़ाइल",
     "generate": "उत्पन्न",
-    "makeAnother": "एक और बनाने"
+    "makeAnother": "एक और बनाने",
+    "viewResult": "परिणाम देख",
+    "yourJobs": "आपकी नौकरियाँ"
   },
   "status": {
     "animationComplete": "एनिमेशन पूर्ण!",
diff --git a/packages/fakeyou.com/public/locales/hi/Rating.json b/packages/fakeyou.com/public/locales/hi/Rating.json
index 6f7e9fc56..c6fa5b3b6 100644
--- a/packages/fakeyou.com/public/locales/hi/Rating.json
+++ b/packages/fakeyou.com/public/locales/hi/Rating.json
@@ -5,5 +5,6 @@
   "ratingGood": "आवाज़ अच्छी लगती है",
   "ratingGreat": "आवाज़ बहुत अच्छी लगती है",
   "ratingLabel": "रेटिंग:",
+  "ratingNone": "आवाज रेटेड नहीं",
   "ratingOk": "आवाज़ ठीक लगती है"
 }
\ No newline at end of file
diff --git a/packages/fakeyou.com/public/locales/id/FaceAnimator.json b/packages/fakeyou.com/public/locales/id/FaceAnimator.json
index 7af6a405a..51c20f2a3 100644
--- a/packages/fakeyou.com/public/locales/id/FaceAnimator.json
+++ b/packages/fakeyou.com/public/locales/id/FaceAnimator.json
@@ -8,7 +8,9 @@
   "inputs": {
     "downloadFile": "Unduh berkas",
     "generate": "Menghasilkan",
-    "makeAnother": "Buat yang lain"
+    "makeAnother": "Buat yang lain",
+    "viewResult": "Lihat hasil",
+    "yourJobs": "Pekerjaan Anda"
   },
   "status": {
     "animationComplete": "Animasi selesai!",
diff --git a/packages/fakeyou.com/public/locales/id/Rating.json b/packages/fakeyou.com/public/locales/id/Rating.json
index becece726..20b724ae5 100644
--- a/packages/fakeyou.com/public/locales/id/Rating.json
+++ b/packages/fakeyou.com/public/locales/id/Rating.json
@@ -5,5 +5,6 @@
   "ratingGood": "Suara Kedengarannya Bagus",
   "ratingGreat": "Suara Kedengarannya Hebat",
   "ratingLabel": "Peringkat:",
+  "ratingNone": "Suara Tidak Dinilai",
   "ratingOk": "Suara Kedengarannya Oke"
 }
\ No newline at end of file
diff --git a/packages/fakeyou.com/public/locales/it/FaceAnimator.json b/packages/fakeyou.com/public/locales/it/FaceAnimator.json
index 05715cd82..1ff56c877 100644
--- a/packages/fakeyou.com/public/locales/it/FaceAnimator.json
+++ b/packages/fakeyou.com/public/locales/it/FaceAnimator.json
@@ -8,7 +8,9 @@
   "inputs": {
     "downloadFile": "Download file",
     "generate": "creare",
-    "makeAnother": "Fanne un'altro"
+    "makeAnother": "Fanne un'altro",
+    "viewResult": "Visualizza risultato",
+    "yourJobs": "I tuoi lavori"
   },
   "status": {
     "animationComplete": "Animazione completata!",
diff --git a/packages/fakeyou.com/public/locales/it/Rating.json b/packages/fakeyou.com/public/locales/it/Rating.json
index fba140418..977847b4e 100644
--- a/packages/fakeyou.com/public/locales/it/Rating.json
+++ b/packages/fakeyou.com/public/locales/it/Rating.json
@@ -5,5 +5,6 @@
   "ratingGood": "La voce suona bene",
   "ratingGreat": "La voce suona alla grande",
   "ratingLabel": "Valutazione:",
+  "ratingNone": "Voce non classificata",
   "ratingOk": "La voce suona bene"
 }
\ No newline at end of file
diff --git a/packages/fakeyou.com/public/locales/ja/FaceAnimator.json b/packages/fakeyou.com/public/locales/ja/FaceAnimator.json
index e31dd9037..bb9d8eecb 100644
--- a/packages/fakeyou.com/public/locales/ja/FaceAnimator.json
+++ b/packages/fakeyou.com/public/locales/ja/FaceAnimator.json
@@ -8,7 +8,9 @@
   "inputs": {
     "downloadFile": "ダウンロードファイル",
     "generate": "生成する",
-    "makeAnother": "別のものを作る"
+    "makeAnother": "別のものを作る",
+    "viewResult": "結果を見る",
+    "yourJobs": "あなたの仕事"
   },
   "status": {
     "animationComplete": "アニメーション完成！",
diff --git a/packages/fakeyou.com/public/locales/ja/Rating.json b/packages/fakeyou.com/public/locales/ja/Rating.json
index 316ae81be..dfb7b6f48 100644
--- a/packages/fakeyou.com/public/locales/ja/Rating.json
+++ b/packages/fakeyou.com/public/locales/ja/Rating.json
@@ -5,5 +5,6 @@
   "ratingGood": "声が良い",
   "ratingGreat": "声が素晴らしい",
   "ratingLabel": "評価:",
+  "ratingNone": "音声が評価されていません",
   "ratingOk": "声は大丈夫です"
 }
\ No newline at end of file
diff --git a/packages/fakeyou.com/public/locales/ko/FaceAnimator.json b/packages/fakeyou.com/public/locales/ko/FaceAnimator.json
index 83b9ce042..f0ef3c8c5 100644
--- a/packages/fakeyou.com/public/locales/ko/FaceAnimator.json
+++ b/packages/fakeyou.com/public/locales/ko/FaceAnimator.json
@@ -8,7 +8,9 @@
   "inputs": {
     "downloadFile": "파일 다운로드",
     "generate": "생성하다",
-    "makeAnother": "다른 것을 만드세요"
+    "makeAnother": "다른 것을 만드세요",
+    "viewResult": "결과 보기",
+    "yourJobs": "귀하의 직업"
   },
   "status": {
     "animationComplete": "애니메이션 완성!",
diff --git a/packages/fakeyou.com/public/locales/ko/Rating.json b/packages/fakeyou.com/public/locales/ko/Rating.json
index ff2ebba0f..7c695dc5c 100644
--- a/packages/fakeyou.com/public/locales/ko/Rating.json
+++ b/packages/fakeyou.com/public/locales/ko/Rating.json
@@ -5,5 +5,6 @@
   "ratingGood": "목소리가 좋다",
   "ratingGreat": "목소리가 좋아요",
   "ratingLabel": "평가:",
+  "ratingNone": "음성 등급 없음",
   "ratingOk": "목소리는 괜찮아요"
 }
\ No newline at end of file
diff --git a/packages/fakeyou.com/public/locales/pt/FaceAnimator.json b/packages/fakeyou.com/public/locales/pt/FaceAnimator.json
index 3803cf5d4..36a1827a0 100644
--- a/packages/fakeyou.com/public/locales/pt/FaceAnimator.json
+++ b/packages/fakeyou.com/public/locales/pt/FaceAnimator.json
@@ -8,7 +8,9 @@
   "inputs": {
     "downloadFile": "⇬ Fazer download do arquivo",
     "generate": "Gerar",
-    "makeAnother": "Faça outro"
+    "makeAnother": "Faça outro",
+    "viewResult": "Ver resultado",
+    "yourJobs": "Seus empregos"
   },
   "status": {
     "animationComplete": "Animação concluída!",
diff --git a/packages/fakeyou.com/public/locales/pt/Rating.json b/packages/fakeyou.com/public/locales/pt/Rating.json
index fe1f61531..8bf97fb7f 100644
--- a/packages/fakeyou.com/public/locales/pt/Rating.json
+++ b/packages/fakeyou.com/public/locales/pt/Rating.json
@@ -5,5 +5,6 @@
   "ratingGood": "Voz soa bem",
   "ratingGreat": "A voz parece ótima",
   "ratingLabel": "Avaliação:",
+  "ratingNone": "Voz não avaliada",
   "ratingOk": "Voz soa bem"
 }
\ No newline at end of file
diff --git a/packages/fakeyou.com/public/locales/ru/FaceAnimator.json b/packages/fakeyou.com/public/locales/ru/FaceAnimator.json
index f5752e5ac..06c8f4cf8 100644
--- a/packages/fakeyou.com/public/locales/ru/FaceAnimator.json
+++ b/packages/fakeyou.com/public/locales/ru/FaceAnimator.json
@@ -8,7 +8,9 @@
   "inputs": {
     "downloadFile": "Загрузить файл",
     "generate": "Генерировать",
-    "makeAnother": "Сделайте еще один"
+    "makeAnother": "Сделайте еще один",
+    "viewResult": "Посмотреть результат",
+    "yourJobs": "Ваши вакансии"
   },
   "status": {
     "animationComplete": "Анимация завершена!",
diff --git a/packages/fakeyou.com/public/locales/ru/Rating.json b/packages/fakeyou.com/public/locales/ru/Rating.json
index 33a127541..fab3db0c8 100644
--- a/packages/fakeyou.com/public/locales/ru/Rating.json
+++ b/packages/fakeyou.com/public/locales/ru/Rating.json
@@ -5,5 +5,6 @@
   "ratingGood": "Голос звучит хорошо",
   "ratingGreat": "Голос звучит великолепно",
   "ratingLabel": "Рейтинг:",
+  "ratingNone": "Голос без рейтинга",
   "ratingOk": "Голос звучит нормально"
 }
\ No newline at end of file
diff --git a/packages/fakeyou.com/public/locales/th/FaceAnimator.json b/packages/fakeyou.com/public/locales/th/FaceAnimator.json
index 5ac326560..9c177f37b 100644
--- a/packages/fakeyou.com/public/locales/th/FaceAnimator.json
+++ b/packages/fakeyou.com/public/locales/th/FaceAnimator.json
@@ -8,7 +8,9 @@
   "inputs": {
     "downloadFile": "ดาวน์โหลดไฟล์",
     "generate": "สร้าง",
-    "makeAnother": "ทำอีก"
+    "makeAnother": "ทำอีก",
+    "viewResult": "ดูผลลัพธ์",
+    "yourJobs": "งานของคุณ"
   },
   "status": {
     "animationComplete": "แอนิเมชั่นเสร็จสมบูรณ์!",
diff --git a/packages/fakeyou.com/public/locales/th/Rating.json b/packages/fakeyou.com/public/locales/th/Rating.json
index d6b1ac9e5..0bf4b16b0 100644
--- a/packages/fakeyou.com/public/locales/th/Rating.json
+++ b/packages/fakeyou.com/public/locales/th/Rating.json
@@ -5,5 +5,6 @@
   "ratingGood": "เสียงฟังดูดี",
   "ratingGreat": "เสียงฟังดูดีมาก",
   "ratingLabel": "เรตติ้ง:",
+  "ratingNone": "เสียงไม่ได้รับการจัดอันดับ",
   "ratingOk": "เสียงฟังดูโอเค"
 }
\ No newline at end of file
diff --git a/packages/fakeyou.com/public/locales/tr/FaceAnimator.json b/packages/fakeyou.com/public/locales/tr/FaceAnimator.json
index c9bf7a024..ae20b4834 100644
--- a/packages/fakeyou.com/public/locales/tr/FaceAnimator.json
+++ b/packages/fakeyou.com/public/locales/tr/FaceAnimator.json
@@ -8,7 +8,9 @@
   "inputs": {
     "downloadFile": "Dosyayı indir",
     "generate": "Oluştur",
-    "makeAnother": "Başka bir tane yap"
+    "makeAnother": "Başka bir tane yap",
+    "viewResult": "Sonucu göster",
+    "yourJobs": "İşleriniz"
   },
   "status": {
     "animationComplete": "Animasyon tamamlandı!",
diff --git a/packages/fakeyou.com/public/locales/tr/Rating.json b/packages/fakeyou.com/public/locales/tr/Rating.json
index b3cf5f68d..21e247d75 100644
--- a/packages/fakeyou.com/public/locales/tr/Rating.json
+++ b/packages/fakeyou.com/public/locales/tr/Rating.json
@@ -5,5 +5,6 @@
   "ratingGood": "Ses Kulağa İyi Geliyor",
   "ratingGreat": "Sesi harika geliyor",
   "ratingLabel": "Değerlendirme:",
+  "ratingNone": "Ses Derecelendirilmedi",
   "ratingOk": "Ses Kulağa Sorunsuz Geliyor"
 }
\ No newline at end of file
diff --git a/packages/fakeyou.com/public/locales/vi/FaceAnimator.json b/packages/fakeyou.com/public/locales/vi/FaceAnimator.json
index ce9016d76..ed1af8e59 100644
--- a/packages/fakeyou.com/public/locales/vi/FaceAnimator.json
+++ b/packages/fakeyou.com/public/locales/vi/FaceAnimator.json
@@ -8,7 +8,9 @@
   "inputs": {
     "downloadFile": "Tải tập tin",
     "generate": "Phát ra",
-    "makeAnother": "Làm một cái khác"
+    "makeAnother": "Làm một cái khác",
+    "viewResult": "Xem kết quả",
+    "yourJobs": "Công việc của bạn"
   },
   "status": {
     "animationComplete": "Hoạt hình hoàn tất!",
diff --git a/packages/fakeyou.com/public/locales/vi/Rating.json b/packages/fakeyou.com/public/locales/vi/Rating.json
index 821c28057..ef05c9e3a 100644
--- a/packages/fakeyou.com/public/locales/vi/Rating.json
+++ b/packages/fakeyou.com/public/locales/vi/Rating.json
@@ -5,5 +5,6 @@
   "ratingGood": "Giọng nói nghe hay",
   "ratingGreat": "Giọng nói nghe rất hay",
   "ratingLabel": "Xếp hạng:",
+  "ratingNone": "Giọng nói không được xếp hạng",
   "ratingOk": "Giọng nói ổn"
 }
\ No newline at end of file
diff --git a/packages/fakeyou.com/public/locales/zh-Hans/FaceAnimator.json b/packages/fakeyou.com/public/locales/zh-Hans/FaceAnimator.json
index cdaa4b378..4d644c860 100644
--- a/packages/fakeyou.com/public/locales/zh-Hans/FaceAnimator.json
+++ b/packages/fakeyou.com/public/locales/zh-Hans/FaceAnimator.json
@@ -8,7 +8,9 @@
   "inputs": {
     "downloadFile": "下载文件",
     "generate": "产生",
-    "makeAnother": "再做一个"
+    "makeAnother": "再做一个",
+    "viewResult": "查看结果",
+    "yourJobs": "你的职位"
   },
   "status": {
     "animationComplete": "动画完成！",
diff --git a/packages/fakeyou.com/public/locales/zh-Hans/Rating.json b/packages/fakeyou.com/public/locales/zh-Hans/Rating.json
index 2ff015a67..a32df1d3f 100644
--- a/packages/fakeyou.com/public/locales/zh-Hans/Rating.json
+++ b/packages/fakeyou.com/public/locales/zh-Hans/Rating.json
@@ -5,5 +5,6 @@
   "ratingGood": "声音听起来不错",
   "ratingGreat": "声音听起来很棒",
   "ratingLabel": "评分：",
+  "ratingNone": "声音未评级",
   "ratingOk": "声音听起来不错"
 }
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/v2/view/_common/ratings/RatingStats.tsx b/packages/fakeyou.com/src/v2/view/_common/ratings/RatingStats.tsx
index 670d7c5c5..4f1219e65 100644
--- a/packages/fakeyou.com/src/v2/view/_common/ratings/RatingStats.tsx
+++ b/packages/fakeyou.com/src/v2/view/_common/ratings/RatingStats.tsx
@@ -30,7 +30,7 @@ function RatingStats(props: Props) {
           icon={faStarExclamation}
           className="me-2 rating-icon"
         />
-        <p>{t("common.RatingStats.voice.notRated")}</p>
+        <p>{t("ratingNone")}</p>
       </div>
     );
   }

From 96b14613dad5b3f5468223860b499fdad33a5cd2 Mon Sep 17 00:00:00 2001
From: Brandon Thomas <echelon@gmail.com>
Date: Tue, 28 Nov 2023 21:03:30 -0500
Subject: [PATCH 9/9] Show a combined TTS statistic (legacy + modern TTS)

---
 .../components/src/api/stats/queues/GetQueueStats.ts |  5 +++--
 .../src/components/layout/SideNav/SideNav.tsx        | 12 +++++++++---
 packages/fakeyou.com/src/v2/view/nav/FooterNav.tsx   | 12 +++++++++---
 3 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/packages/components/src/api/stats/queues/GetQueueStats.ts b/packages/components/src/api/stats/queues/GetQueueStats.ts
index a6d5847d3..1e4aac858 100644
--- a/packages/components/src/api/stats/queues/GetQueueStats.ts
+++ b/packages/components/src/api/stats/queues/GetQueueStats.ts
@@ -15,9 +15,10 @@ export interface InferenceInfo {
 }
 
 export interface ByQueueStats {
-  pending_svc_jobs: number,
-  pending_rvc_jobs: number,
   pending_face_animation_jobs: number,
+  pending_rvc_jobs: number,
+  pending_svc_jobs: number,
+  pending_tacotron2_jobs: number,
 }
 
 export interface LegacyTtsInfo {
diff --git a/packages/fakeyou.com/src/components/layout/SideNav/SideNav.tsx b/packages/fakeyou.com/src/components/layout/SideNav/SideNav.tsx
index bb9f7134f..701dc79ff 100644
--- a/packages/fakeyou.com/src/components/layout/SideNav/SideNav.tsx
+++ b/packages/fakeyou.com/src/components/layout/SideNav/SideNav.tsx
@@ -114,9 +114,10 @@ export default function SideNav(props: SideNavProps) {
       total_pending_job_count: 0,
       pending_job_count: 0,
       by_queue: {
-        pending_svc_jobs: 0,
-        pending_rvc_jobs: 0,
         pending_face_animation_jobs: 0,
+        pending_rvc_jobs: 0,
+        pending_svc_jobs: 0,
+        pending_tacotron2_jobs: 0,
       },
     },
     legacy_tts: {
@@ -223,6 +224,11 @@ export default function SideNav(props: SideNavProps) {
     );
   }
 
+  // NB(bt,2023-11-28): These are representative of tacotron2 jobs handled by two queueing systems:
+  // The legacy queue (tts-inference-job) and the modern queue (inference-job). We'll add both totals
+  // while we migrate off of the legacy system, then eventually kill the legacy statistic.
+  const ttsQueuedCount = queueStats.legacy_tts.pending_job_count + queueStats.inference.by_queue.pending_tacotron2_jobs;
+
   return (
     <div
       id="sidebar-wrapper"
@@ -360,7 +366,7 @@ export default function SideNav(props: SideNavProps) {
           <div>
             {t("queueTts")}:{" "}
             <span className="text-red">
-              {queueStats.legacy_tts.pending_job_count}
+              {ttsQueuedCount}
             </span>
           </div>
           <div>
diff --git a/packages/fakeyou.com/src/v2/view/nav/FooterNav.tsx b/packages/fakeyou.com/src/v2/view/nav/FooterNav.tsx
index 8ae4922eb..af53077c9 100644
--- a/packages/fakeyou.com/src/v2/view/nav/FooterNav.tsx
+++ b/packages/fakeyou.com/src/v2/view/nav/FooterNav.tsx
@@ -56,9 +56,10 @@ function FooterNav(props: Props) {
       total_pending_job_count: 0,
       pending_job_count: 0,
       by_queue: {
-        pending_svc_jobs: 0,
-        pending_rvc_jobs: 0,
         pending_face_animation_jobs: 0,
+        pending_rvc_jobs: 0,
+        pending_svc_jobs: 0,
+        pending_tacotron2_jobs: 0,
       },
     },
     legacy_tts: {
@@ -122,6 +123,11 @@ function FooterNav(props: Props) {
     );
   }
 
+  // NB(bt,2023-11-28): These are representative of tacotron2 jobs handled by two queueing systems:
+  // The legacy queue (tts-inference-job) and the modern queue (inference-job). We'll add both totals
+  // while we migrate off of the legacy system, then eventually kill the legacy statistic.
+  const ttsQueuedCount = queueStats.legacy_tts.pending_job_count + queueStats.inference.by_queue.pending_tacotron2_jobs;
+
   return (
     <div>
       <footer id="footer">
@@ -130,7 +136,7 @@ function FooterNav(props: Props) {
             <div>
               TTS Queued:{" "}
               <span className="text-red">
-                {queueStats.legacy_tts.pending_job_count}
+                {ttsQueuedCount}
               </span>
             </div>
             <span className="opacity-25">•</span>