diff --git a/app/components/Button.tsx b/app/components/Button.tsx index 2617ed7272..4564c50bce 100644 --- a/app/components/Button.tsx +++ b/app/components/Button.tsx @@ -54,7 +54,7 @@ export const Button = ({ disabled={disabled} {...{ ...rest, htmlFor }}> {icon && !iconFlip ? : null} -
{children}
+ {children} {icon && iconFlip ? : null} ); diff --git a/app/components/FileWrapper/FileWrapper.scss b/app/components/FileWrapper/FileWrapper.scss index 58d26d3bd3..e8bbd00c3a 100644 --- a/app/components/FileWrapper/FileWrapper.scss +++ b/app/components/FileWrapper/FileWrapper.scss @@ -1,10 +1,6 @@ .fy-file-wrapper { - border-color: transparent; - border-style: dashed; - border-width: 2px; // flex-grow: 1; height: calc(100% - 4px); - overflow: scroll; .file-picker-button { cursor: pointer; diff --git a/app/components/Input.tsx b/app/components/Input.tsx index 3c2b234082..49a72d7dd4 100644 --- a/app/components/Input.tsx +++ b/app/components/Input.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React from "react"; import { twMerge } from "tailwind-merge"; import { IconDefinition } from "@fortawesome/pro-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; @@ -15,31 +15,34 @@ interface InputProps extends React.InputHTMLAttributes { icon?: IconDefinition; } -export const Input = React.forwardRef(({ - label, icon, className, id, ...rest - }: InputProps, - ref: React.ForwardedRef -) => { - return ( -
- {label && } +export const Input = React.forwardRef( + ( + { label, icon, className, id, ...rest }: InputProps, + ref: React.ForwardedRef, + ) => { + return ( +
+ {label && } -
- {icon && ( - - )} - + {icon && ( + )} - onFocus={() => disableHotkeyInput(DomLevels.INPUT)} - onBlur={() => enableHotkeyInput(DomLevels.INPUT)} - {...rest} - /> + disableHotkeyInput(DomLevels.INPUT)} + onBlur={() => enableHotkeyInput(DomLevels.INPUT)} + {...rest} + /> +
-
- ); -}); + ); + }, +); + +Input.displayName = "Input"; diff --git a/app/components/Tooltip.tsx b/app/components/Tooltip.tsx index e7929c90a6..d79a5ab888 100644 --- a/app/components/Tooltip.tsx +++ b/app/components/Tooltip.tsx @@ -1,13 +1,15 @@ import React, { useState, useRef } from "react"; import { Transition } from "@headlessui/react"; +import { twMerge } from "tailwind-merge"; interface TooltipProps { children: React.ReactElement; content: React.ReactNode; position: "top" | "bottom" | "left" | "right"; + className?: string; } -const Tooltip = ({ children, content, position }: TooltipProps) => { +const Tooltip = ({ children, content, position, className }: TooltipProps) => { const [isShowing, setIsShowing] = useState(false); const triggerRef = useRef(null); const tooltipRef = useRef(null); @@ -64,7 +66,10 @@ const Tooltip = ({ children, content, position }: TooltipProps) => {
+ className={twMerge( + "absolute z-10 w-max rounded-lg bg-ui-controls px-2.5 py-1.5 text-sm font-medium text-white shadow-xl", + className ? className : "", + )}> {content}
diff --git a/app/components/Typography.tsx b/app/components/Typography.tsx index c4bb8bac65..813c18452a 100644 --- a/app/components/Typography.tsx +++ b/app/components/Typography.tsx @@ -38,7 +38,7 @@ export const Label = ({ ...rest }: LabelHTMLAttributes) => ( @@ -51,7 +51,7 @@ export const H5 = ({ className, children }: TypoProps) => ( ); export const H6 = ({ className, children }: TypoProps) => ( -
+
{children}
); diff --git a/app/components/UploadComponent/UploadComponent.tsx b/app/components/UploadComponent/UploadComponent.tsx index d8885c7b0d..d84782de4c 100644 --- a/app/components/UploadComponent/UploadComponent.tsx +++ b/app/components/UploadComponent/UploadComponent.tsx @@ -8,22 +8,24 @@ import { faFileAudio, faSpinnerThird, faTrash, + faXmark, } from "@fortawesome/pro-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { UploadAudio, UploadAudioIsOk, UploadAudioRequest } from "./utilities"; import { Button } from "../Button"; -import { P, WaveformPlayer } from "~/components"; +import { ButtonIcon, P, WaveformPlayer } from "~/components"; +import Tooltip from "../Tooltip"; const FILE_TYPES = ["MP3", "WAV", "FLAC", "OGG"]; interface Props { sessionToken: string; file?: File; - onFileStaged?: (file:File)=>void; - onClear?: ()=>void; - onFileUploaded: (token:string)=>void + onFileStaged?: (file: File) => void; + onClear?: () => void; + onFileUploaded: (token: string) => void; } function UploadComponent({ @@ -33,19 +35,18 @@ function UploadComponent({ onClear, onFileUploaded, }: Props) { - - const [{file, uploadState, uploadToken}, setState] = useState<{ + const [{ file, uploadState, uploadToken }, setState] = useState<{ file: File | undefined; - uploadState: "init"|"none"|"uploading"|"uploaded"|"error"; - uploadToken ?: string; + uploadState: "init" | "none" | "uploading" | "uploaded" | "error"; + uploadToken?: string; }>({ file: propsFile, uploadState: propsFile ? "none" : "init", }); const audioUrl = file ? URL.createObjectURL(file) : ""; - const handleChange = (file:File) => { - setState((curr)=>({ + const handleChange = (file: File) => { + setState((curr) => ({ ...curr, file: file, uploadState: "none", @@ -88,9 +89,9 @@ function UploadComponent({ }); }; - useEffect(()=>{ - if(file && uploadState === "none" && onFileStaged) onFileStaged(file); - if(!file && uploadState === "none" && onClear) onClear(); + useEffect(() => { + if (file && uploadState === "none" && onFileStaged) onFileStaged(file); + if (!file && uploadState === "none" && onClear) onClear(); }, [file, uploadState]); useEffect(() => { if (uploadState === "uploaded" && uploadToken) onFileUploaded(uploadToken); @@ -109,12 +110,22 @@ function UploadComponent({ {file && ( <> -
- +
+
+ +
+ + +
-
+
- -
)} @@ -154,13 +161,13 @@ const DragAndDropZone = ({ file }: { file: any }) => { if (!file) { return ( -
- -
+
+ +

Upload a file or drop it here

-

+

{FILE_TYPES.join(", ").toString()} supported

@@ -168,17 +175,17 @@ const DragAndDropZone = ({ file }: { file: any }) => { ); } else { return ( -
- -
+
+ +

{file.name.slice(0, file.name.lastIndexOf("."))}

-

+

{`${file.name.split(".").pop().toUpperCase()} file size: ${fileSize} `} - Change File + Change File

diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/AudioTab/pageAudioGeneration.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/AudioTab/pageAudioGeneration.tsx index 385f518e86..5ce474aaaa 100644 --- a/app/pages/PageEnigma/comps/SidePanelTabs/AudioTab/pageAudioGeneration.tsx +++ b/app/pages/PageEnigma/comps/SidePanelTabs/AudioTab/pageAudioGeneration.tsx @@ -10,72 +10,82 @@ export const PageAudioGeneration = ({ changePage, audioPanelState, setAudioPanelState, -}:{ +}: { sessionToken: string; - changePage: (newPage: AudioTabPages)=>void; - audioPanelState: AudioPanelState - setAudioPanelState: React.Dispatch> -}) =>{ + changePage: (newPage: AudioTabPages) => void; + audioPanelState: AudioPanelState; + setAudioPanelState: React.Dispatch>; +}) => { const subpage = audioPanelState.lastWorkingAudioGeneration; const changeSubpage = (newSubpage: AudioTabPages.TTS | AudioTabPages.V2V) => { - setAudioPanelState((curr)=>({ + setAudioPanelState((curr) => ({ ...curr, - lastWorkingAudioGeneration: newSubpage + lastWorkingAudioGeneration: newSubpage, })); }; - const setTtsState = (newTtsState: TtsState)=>{ - setAudioPanelState((curr)=>({ + const setTtsState = (newTtsState: TtsState) => { + setAudioPanelState((curr) => ({ ...curr, - ttsState : {...curr.ttsState, ...newTtsState} + ttsState: { ...curr.ttsState, ...newTtsState }, })); }; - const setV2VState = (newV2VState: V2VState)=>{ - setAudioPanelState((curr)=>({ + const setV2VState = (newV2VState: V2VState) => { + setAudioPanelState((curr) => ({ ...curr, - v2vState : {...curr.v2vState, ...newV2VState} + v2vState: { ...curr.v2vState, ...newV2VState }, })); }; - return( -
- changePage(AudioTabPages.LIBRARY)}/> + return ( + <> + changePage(AudioTabPages.LIBRARY)} + /> +
+
+ + +
-
- - + {subpage === AudioTabPages.TTS && ( + + )} + {subpage === AudioTabPages.V2V && ( + + )}
- - {subpage === AudioTabPages.TTS && - - } - {subpage === AudioTabPages.V2V && - - } -
+ ); -} \ No newline at end of file +}; diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/AudioTab/pageLibrary.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/AudioTab/pageLibrary.tsx index ca2ea3d19f..eafa49fba4 100644 --- a/app/pages/PageEnigma/comps/SidePanelTabs/AudioTab/pageLibrary.tsx +++ b/app/pages/PageEnigma/comps/SidePanelTabs/AudioTab/pageLibrary.tsx @@ -41,38 +41,40 @@ export const PageLibrary = ({ return ( <> -
- - - +
+
+ + + +
@@ -85,7 +87,7 @@ export const PageLibrary = ({
-
+
{audioInferenceJobs.value.length > 0 && (
{audioInferenceJobs.value.map((job) => { diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/AudioTab/pageSelectTtsModel.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/AudioTab/pageSelectTtsModel.tsx index 002f6f3930..22079709c7 100644 --- a/app/pages/PageEnigma/comps/SidePanelTabs/AudioTab/pageSelectTtsModel.tsx +++ b/app/pages/PageEnigma/comps/SidePanelTabs/AudioTab/pageSelectTtsModel.tsx @@ -1,5 +1,4 @@ - -import { useCallback, useState } from 'react' +import { useCallback, useState } from "react"; import { Input } from "~/components"; import { AudioTabPages } from "./types"; import { TtsModelListItem } from "~/pages/PageEnigma/models/tts"; @@ -9,54 +8,56 @@ import { VoiceModelElement } from "./voiceModelElement"; export const PageSelectTtsModel = ({ changePage, ttsModels, - onSelect -}:{ - changePage: (newPage:AudioTabPages)=>void; + onSelect, +}: { + changePage: (newPage: AudioTabPages) => void; ttsModels: Array; - onSelect: (item:TtsModelListItem)=>void; -})=>{ - const [query, setQuery] = useState(''); - const filteredListOfModels = query === '' - ? ttsModels - : ttsModels.filter((model) =>{ - return model.title - .toLowerCase() - .replace(/\s+/g, '') - .includes(query.toLowerCase().replace(/\s+/g, '')); - }) + onSelect: (item: TtsModelListItem) => void; +}) => { + const [query, setQuery] = useState(""); + const filteredListOfModels = + query === "" + ? ttsModels + : ttsModels.filter((model) => { + return model.title + .toLowerCase() + .replace(/\s+/g, "") + .includes(query.toLowerCase().replace(/\s+/g, "")); + }); const slicedArray = filteredListOfModels.slice(0, 20); - - const refCallback = useCallback((node:HTMLInputElement)=>{ - if(node) node.focus(); - //auto focus on the mounting on the input component - },[]); - return( -
+ const refCallback = useCallback((node: HTMLInputElement) => { + if (node) node.focus(); + //auto focus on the mounting on the input component + }, []); + + return ( + <> changePage(AudioTabPages.GENERATE_AUDIO)} /> +
+ setQuery(e.target.value)} + /> - setQuery(e.target.value)} - /> - -
- {slicedArray.map((item)=>{ - return( - onSelect(item as TtsModelListItem)} - /> - ); - })} +
+ {slicedArray.map((item) => { + return ( + onSelect(item as TtsModelListItem)} + /> + ); + })} +
-
+ ); -} \ No newline at end of file +}; diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/AudioTab/pageSelectV2VModel.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/AudioTab/pageSelectV2VModel.tsx index 991324a2bd..738187fd7f 100644 --- a/app/pages/PageEnigma/comps/SidePanelTabs/AudioTab/pageSelectV2VModel.tsx +++ b/app/pages/PageEnigma/comps/SidePanelTabs/AudioTab/pageSelectV2VModel.tsx @@ -1,40 +1,40 @@ - -import { useCallback, useState } from 'react' +import { useCallback, useState } from "react"; import { Input } from "~/components"; import { AudioTabPages } from "./types"; import { TabTitle } from "~/pages/PageEnigma/comps/SidePanelTabs/comps/TabTitle"; import { VoiceModelElement } from "./voiceModelElement"; -import { VoiceConversionModelListItem } from './typesImported'; +import { VoiceConversionModelListItem } from "./typesImported"; export const PageSelectV2VModel = ({ changePage, v2vModels, - onSelect -}:{ - changePage: (newPage:AudioTabPages)=>void; + onSelect, +}: { + changePage: (newPage: AudioTabPages) => void; v2vModels: Array; - onSelect: (item:VoiceConversionModelListItem)=>void; -})=>{ - const [query, setQuery] = useState(''); - const filteredListOfModels = query === '' - ? v2vModels - : v2vModels.filter((model) =>{ - return model.title - .toLowerCase() - .replace(/\s+/g, '') - .includes(query.toLowerCase().replace(/\s+/g, '')); - }) + onSelect: (item: VoiceConversionModelListItem) => void; +}) => { + const [query, setQuery] = useState(""); + const filteredListOfModels = + query === "" + ? v2vModels + : v2vModels.filter((model) => { + return model.title + .toLowerCase() + .replace(/\s+/g, "") + .includes(query.toLowerCase().replace(/\s+/g, "")); + }); const slicedArray = filteredListOfModels.slice(0, 20); - const refCallback = useCallback((node:HTMLInputElement)=>{ - if(node) node.focus(); + const refCallback = useCallback((node: HTMLInputElement) => { + if (node) node.focus(); //auto focus on the mounting on the input component - },[]); + }, []); - return( -
+ return ( +
changePage(AudioTabPages.GENERATE_AUDIO)} @@ -42,21 +42,23 @@ export const PageSelectV2VModel = ({ setQuery(e.target.value)} + onChange={(e) => setQuery(e.target.value)} /> -
- {slicedArray.map((item)=>{ - return( +
+ {slicedArray.map((item) => { + return ( onSelect(item as VoiceConversionModelListItem)} + onSelect={(item) => + onSelect(item as VoiceConversionModelListItem) + } /> ); })}
); -} \ No newline at end of file +}; diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/AudioTab/pageTTS.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/AudioTab/pageTTS.tsx index 221a3f8f54..78420b3585 100644 --- a/app/pages/PageEnigma/comps/SidePanelTabs/AudioTab/pageTTS.tsx +++ b/app/pages/PageEnigma/comps/SidePanelTabs/AudioTab/pageTTS.tsx @@ -1,20 +1,14 @@ -import { useCallback, } from "react"; +import { useCallback } from "react"; import { v4 as uuidv4 } from "uuid"; -import { faVolumeHigh, faChevronRight} from "@fortawesome/pro-solid-svg-icons"; +import { faVolumeHigh, faChevronRight } from "@fortawesome/pro-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { - H4, H6, - Button, - Label, - Textarea, -} from "~/components"; +import { H4, H6, Button, Label, Textarea } from "~/components"; -import { GenerateTtsAudioResponse, } from "~/pages/PageEnigma/models/tts"; +import { GenerateTtsAudioResponse } from "~/pages/PageEnigma/models/tts"; - -import { GenerateTtsAudio, } from "./utilities"; +import { GenerateTtsAudio } from "./utilities"; import { AudioTabPages, TtsState } from "./types"; export const PageTTS = ({ @@ -22,13 +16,12 @@ export const PageTTS = ({ sessionToken, ttsState, setTtsState, -}:{ - changePage: (newPage:AudioTabPages) => void; +}: { + changePage: (newPage: AudioTabPages) => void; sessionToken: string; - ttsState: TtsState, - setTtsState: (newState:TtsState)=>void, -})=>{ - + ttsState: TtsState; + setTtsState: (newState: TtsState) => void; +}) => { const requestTts = useCallback( (sessionToken: string) => { const modelToken = ttsState.voice @@ -36,7 +29,6 @@ export const PageTTS = ({ : undefined; if (modelToken) { - const request = { uuid_idempotency_token: uuidv4(), tts_model_token: modelToken, @@ -50,7 +42,7 @@ export const PageTTS = ({ ...ttsState, inferenceTokens: [ ...ttsState.inferenceTokens, - res.inference_job_token + res.inference_job_token, ], }); @@ -74,21 +66,24 @@ export const PageTTS = ({ return ( <> - -
changePage(AudioTabPages.SELECT_TTS_MODEL)} - > - + +
+ +