From 2ebc6fb851e92250f0102e200dd710990faf5588 Mon Sep 17 00:00:00 2001 From: Brandon Thomas Date: Thu, 18 May 2023 13:01:08 -0700 Subject: [PATCH 1/9] pitch controls --- .../src/api/voice_conversion/EnqueueVoiceConversion.ts | 10 ++++++++++ .../v2/view/pages/vc/vc_model_list/VcModelListPage.tsx | 7 +++++++ 2 files changed, 17 insertions(+) diff --git a/packages/components/src/api/voice_conversion/EnqueueVoiceConversion.ts b/packages/components/src/api/voice_conversion/EnqueueVoiceConversion.ts index 3ddebe8163..eda5bb3187 100644 --- a/packages/components/src/api/voice_conversion/EnqueueVoiceConversion.ts +++ b/packages/components/src/api/voice_conversion/EnqueueVoiceConversion.ts @@ -1,9 +1,19 @@ import { ApiConfig } from "@storyteller/components"; +export enum EnqueueVoiceConversionFrequencyMethod { + Crepe = "crepe", + Dio = "dio", + Harvest = "harvest", +} + export interface EnqueueVoiceConversionRequest { uuid_idempotency_token: string, voice_conversion_model_token: string, source_media_upload_token: string, + + // Optional args + override_f0_method?: EnqueueVoiceConversionFrequencyMethod, + transpose?: number, } export interface EnqueueVoiceConversionSuccessResponse { diff --git a/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_list/VcModelListPage.tsx b/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_list/VcModelListPage.tsx index 90efaae98a..bf7bc57f25 100644 --- a/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_list/VcModelListPage.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_list/VcModelListPage.tsx @@ -23,6 +23,7 @@ import { import { VcModelListSearch } from "./components/VcModelListSearchComponent"; import { EnqueueVoiceConversion, + EnqueueVoiceConversionFrequencyMethod, EnqueueVoiceConversionIsSuccess, EnqueueVoiceConversionRequest, } from "@storyteller/components/src/api/voice_conversion/EnqueueVoiceConversion"; @@ -58,6 +59,7 @@ interface Props { function VcModelListPage(props: Props) { usePrefixedDocumentTitle("Voice Conversion"); + const [convertLoading, setConvertLoading] = useState(false); const [canConvert, setCanConvert] = useState(false); @@ -69,6 +71,11 @@ function VcModelListPage(props: Props) { uuidv4() ); + const [maybeF0MethodOverride, setMaybeF0MethodOverride] = + useState(undefined); + + const [maybePitchTranspose, setMaybePitchTranspose] = useState(0); + // NB: Something of a UI hack here. // The 3rd party microphone component doesn't let you clear it, so we emulate form clearing // with this variable. From 826dde2dfa2870d419e03c8f06b0ea78a099073f Mon Sep 17 00:00:00 2001 From: BFlat Date: Fri, 12 May 2023 02:27:15 +0700 Subject: [PATCH 2/9] pitch shhift slider ui --- .../fakeyou.com/src/scss/site-refresh.scss | 28 +++++ .../vc/vc_model_list/VcModelListPage.tsx | 33 ++++- .../components/PitchShiftComponent.tsx | 116 ++++++++++++++++++ 3 files changed, 176 insertions(+), 1 deletion(-) create mode 100644 packages/fakeyou.com/src/v2/view/pages/vc/vc_model_list/components/PitchShiftComponent.tsx diff --git a/packages/fakeyou.com/src/scss/site-refresh.scss b/packages/fakeyou.com/src/scss/site-refresh.scss index 39869d3a4d..23e543f77b 100644 --- a/packages/fakeyou.com/src/scss/site-refresh.scss +++ b/packages/fakeyou.com/src/scss/site-refresh.scss @@ -724,6 +724,10 @@ styles with important tags: box-shadow: none; cursor: pointer; + &.no-padding { + padding-left: 0.5rem; + } + &:hover { background-color: lighten($input-dark, 5%); border-color: lighten($input-dark, 5%) !important; @@ -866,6 +870,13 @@ styles with important tags: fill: lighten($secondary, 5%); } + .tippy-box[data-theme~="range-slider"] { + margin-top: -5px; + background-color: lighten($panel, 10%); + color: $white; + font-size: 13px !important; + } + .sliding-content { overflow: hidden; opacity: 0; @@ -1269,6 +1280,19 @@ styles with important tags: .alert-info { font-size: 14px; } + + .range-slider-value { + text-align: center; + max-width: 50px; + padding: 6px; + border-radius: 8px; + pointer-events: none; + background-color: lighten($panel, 5%) !important; + border-width: 1px; + border-color: rgba(255, 255, 255, 0.12) !important; + color: rgba($white, 0.85) !important; + font-weight: 500 !important; + } } select { @@ -1404,6 +1428,10 @@ textarea { height: 450px; } + .session-vc-section { + height: 565px; + } + .session-tts-section::-webkit-scrollbar { width: 10px; } diff --git a/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_list/VcModelListPage.tsx b/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_list/VcModelListPage.tsx index bf7bc57f25..134d151ec4 100644 --- a/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_list/VcModelListPage.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_list/VcModelListPage.tsx @@ -34,6 +34,7 @@ import { } from "@storyteller/components/src/jobs/InferenceJob"; import { SessionVoiceConversionResultsList } from "../../../_common/SessionVoiceConversionResultsList"; import { Link } from "react-router-dom"; +import PitchShiftComponent from "./components/PitchShiftComponent"; interface Props { sessionWrapper: SessionWrapper; @@ -62,6 +63,7 @@ function VcModelListPage(props: Props) { const [convertLoading, setConvertLoading] = useState(false); const [canConvert, setCanConvert] = useState(false); + const [semitones, setSemitones] = useState(0); const [mediaUploadToken, setMediaUploadToken] = useState( undefined @@ -174,6 +176,10 @@ function VcModelListPage(props: Props) { ev.preventDefault(); }; + const handlePitchChange = (value: any) => { + setSemitones(value); + }; + const speakButtonClass = convertLoading ? "btn btn-primary w-100 disabled" : "btn btn-primary w-100"; @@ -287,6 +293,18 @@ function VcModelListPage(props: Props) { +
+ +
+ +
+
{/*
+
+ +
+ +
+
+
@@ -388,7 +419,7 @@ function VcModelListPage(props: Props) { /> Session V2V Results -
+
void; +} + +const dropdownFieldClass = { + control: (state: any) => + state.isFocused + ? "select-search no-padding focused rounded" + : "select-search no-padding rounded", + option: (state: any) => (state.isFocused ? "select-option" : "select-option"), + input: (state: any) => (state.isFocused ? "select-input" : "select-input"), + placeholder: (state: any) => + state.isFocused ? "select-placeholder" : "select-placeholder", + singleValue: (state: any) => + state.isFocused ? "select-value" : "select-value", + menu: (state: any) => + state.isFocused ? "select-container" : "select-container", + indicatorSeparator: (state: any) => + state.isFocused ? "select-separator" : "select-separator", +}; + +const options = ["CREPE", "Harvest", "DIO"]; + +function PitchShiftComponent({ + min, + max, + step, + value, + onChange, +}: PitchShiftProps) { + const handleChange = (newValue: number[]) => { + onChange(newValue[0]); + }; + + const renderTrack = ({ props, children }: any) => ( +
+ {children} +
+ ); + + const renderThumb = ({ props, isDragged }: any) => ( + +
+ + ); + + return ( + <> +
+ +
+ + ); +} + +export default PitchShiftComponent; From 2b38de6fedf8da300081f2a82a8cfdf49f48e7a2 Mon Sep 17 00:00:00 2001 From: BFlat Date: Fri, 12 May 2023 02:39:36 +0700 Subject: [PATCH 3/9] update --- .../v2/view/pages/vc/vc_model_list/VcModelListPage.tsx | 4 ++-- .../vc/vc_model_list/components/PitchShiftComponent.tsx | 9 +++++---- 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_list/VcModelListPage.tsx b/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_list/VcModelListPage.tsx index 134d151ec4..7d37e709f1 100644 --- a/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_list/VcModelListPage.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_list/VcModelListPage.tsx @@ -294,7 +294,7 @@ function VcModelListPage(props: Props) {
- +
- +
); - const renderThumb = ({ props, isDragged }: any) => ( + const renderThumb = ({ props, isDragged, isHovered }: any) => (
From 607f9a44aaedd73cad09feceb47eb01b527275b2 Mon Sep 17 00:00:00 2001 From: BFlat Date: Fri, 12 May 2023 02:54:17 +0700 Subject: [PATCH 4/9] update --- .../vc/vc_model_list/components/PitchShiftComponent.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_list/components/PitchShiftComponent.tsx b/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_list/components/PitchShiftComponent.tsx index 21153cd524..73e2f0feef 100644 --- a/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_list/components/PitchShiftComponent.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_list/components/PitchShiftComponent.tsx @@ -46,9 +46,9 @@ function PitchShiftComponent({ {...props} style={{ ...props.style, - height: "6px", + height: "8px", width: "100%", - backgroundColor: "#ddd", + backgroundColor: "#3c3c50", borderRadius: "4px", }} > @@ -75,7 +75,7 @@ function PitchShiftComponent({ justifyContent: "center", alignItems: "center", outline: "none", - boxShadow: "0px 0px 40px rgba(0, 0, 0, 0.5)", // Add soft shadow on hover + boxShadow: "0px 0px 10px rgba(0, 0, 0, 0.15)", // Add soft shadow on hover }} >
From 39be1f81fb2480ee23c98f03bd9836afa688b4ee Mon Sep 17 00:00:00 2001 From: BFlat Date: Fri, 12 May 2023 02:55:26 +0700 Subject: [PATCH 5/9] color update again --- packages/fakeyou.com/src/scss/colours.scss | 2 +- .../pages/vc/vc_model_list/components/PitchShiftComponent.tsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/fakeyou.com/src/scss/colours.scss b/packages/fakeyou.com/src/scss/colours.scss index f3ab02955b..d28519ec10 100644 --- a/packages/fakeyou.com/src/scss/colours.scss +++ b/packages/fakeyou.com/src/scss/colours.scss @@ -3,7 +3,7 @@ $primary: #e66462; $secondary: #39394c; $bg: #1a1a27; $panel: #242433; -$input: #39394c; +$input: #414155; $input-placeholder: #aeaeb3; $danger: #8f4951; $input-dark: #39394c; diff --git a/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_list/components/PitchShiftComponent.tsx b/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_list/components/PitchShiftComponent.tsx index 73e2f0feef..60670ab508 100644 --- a/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_list/components/PitchShiftComponent.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_list/components/PitchShiftComponent.tsx @@ -46,9 +46,9 @@ function PitchShiftComponent({ {...props} style={{ ...props.style, - height: "8px", + height: "10px", width: "100%", - backgroundColor: "#3c3c50", + backgroundColor: "#414155", borderRadius: "4px", }} > From 43dcf23a2b713d1d2f938e41c0f0eb6a4aad22a4 Mon Sep 17 00:00:00 2001 From: BFlat Date: Fri, 12 May 2023 02:57:09 +0700 Subject: [PATCH 6/9] thickness --- .../pages/vc/vc_model_list/components/PitchShiftComponent.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_list/components/PitchShiftComponent.tsx b/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_list/components/PitchShiftComponent.tsx index 60670ab508..717a0bb7ba 100644 --- a/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_list/components/PitchShiftComponent.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_list/components/PitchShiftComponent.tsx @@ -46,7 +46,7 @@ function PitchShiftComponent({ {...props} style={{ ...props.style, - height: "10px", + height: "8px", width: "100%", backgroundColor: "#414155", borderRadius: "4px", From 403b2ceda4cb1c2616bd1298cda83a8fb0c528e9 Mon Sep 17 00:00:00 2001 From: BFlat Date: Fri, 12 May 2023 03:01:48 +0700 Subject: [PATCH 7/9] colors fix --- packages/fakeyou.com/src/scss/colours.scss | 2 +- .../pages/vc/vc_model_list/components/PitchShiftComponent.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/fakeyou.com/src/scss/colours.scss b/packages/fakeyou.com/src/scss/colours.scss index d28519ec10..f3ab02955b 100644 --- a/packages/fakeyou.com/src/scss/colours.scss +++ b/packages/fakeyou.com/src/scss/colours.scss @@ -3,7 +3,7 @@ $primary: #e66462; $secondary: #39394c; $bg: #1a1a27; $panel: #242433; -$input: #414155; +$input: #39394c; $input-placeholder: #aeaeb3; $danger: #8f4951; $input-dark: #39394c; diff --git a/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_list/components/PitchShiftComponent.tsx b/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_list/components/PitchShiftComponent.tsx index 717a0bb7ba..4280c80bbb 100644 --- a/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_list/components/PitchShiftComponent.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_list/components/PitchShiftComponent.tsx @@ -48,7 +48,7 @@ function PitchShiftComponent({ ...props.style, height: "8px", width: "100%", - backgroundColor: "#414155", + backgroundColor: "#4f4f66", borderRadius: "4px", }} > From 73df04bd3a669e89775237ae7c3d4a894347747f Mon Sep 17 00:00:00 2001 From: BFlat Date: Tue, 16 May 2023 15:54:58 +0700 Subject: [PATCH 8/9] added react-range package --- packages/fakeyou.com/package.json | 1 + yarn.lock | 11 +++++++++++ 2 files changed, 12 insertions(+) diff --git a/packages/fakeyou.com/package.json b/packages/fakeyou.com/package.json index 9894a475f0..e77693211e 100644 --- a/packages/fakeyou.com/package.json +++ b/packages/fakeyou.com/package.json @@ -45,6 +45,7 @@ "react-dom": "^16.13.1", "react-drag-drop-files": "^2.3.9", "react-i18next": "^11.15.4", + "react-range": "^1.8.14", "react-reveal": "^1.2.2", "react-router-dom": "^5.2.0", "react-scripts": "5.0.0", diff --git a/yarn.lock b/yarn.lock index e30ef8cf87..f2e6a909b0 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4498,6 +4498,7 @@ __metadata: dependencies: craco: ^0.0.3 lerna: ^4.0.0 + react-range: ^1.8.14 yarn: ^1.22.19 languageName: unknown linkType: soft @@ -17132,6 +17133,16 @@ __metadata: languageName: node linkType: hard +"react-range@npm:^1.8.14": + version: 1.8.14 + resolution: "react-range@npm:1.8.14" + peerDependencies: + react: ^16.8.0-0 || ^17.0.0-0 || ^18.0.0-0 + react-dom: ^16.8.0-0 || ^17.0.0-0 || ^18.0.0-0 + checksum: 7020c011dc293db46ede9b7cb014dbfe71d59f96aad9cf9b12e9de26c2b600c504e11d39368af8c539c4a3dc1f93e966745063e0b494c388c28fbadd338164bb + languageName: node + linkType: hard + "react-reconciler@npm:0.25.1": version: 0.25.1 resolution: "react-reconciler@npm:0.25.1" From aa4fc620e731e809cb2a974e147799e9e63dc956 Mon Sep 17 00:00:00 2001 From: Brandon Thomas Date: Thu, 18 May 2023 23:49:56 -0700 Subject: [PATCH 9/9] components send request state to backend --- .../vc/vc_model_list/VcModelListPage.tsx | 62 +++++++++++---- .../PitchEstimateMethodComponent.tsx | 77 +++++++++++++++++++ .../components/PitchShiftComponent.tsx | 40 ++-------- 3 files changed, 129 insertions(+), 50 deletions(-) create mode 100644 packages/fakeyou.com/src/v2/view/pages/vc/vc_model_list/components/PitchEstimateMethodComponent.tsx diff --git a/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_list/VcModelListPage.tsx b/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_list/VcModelListPage.tsx index 7d37e709f1..f1229f3e4c 100644 --- a/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_list/VcModelListPage.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_list/VcModelListPage.tsx @@ -35,6 +35,7 @@ import { import { SessionVoiceConversionResultsList } from "../../../_common/SessionVoiceConversionResultsList"; import { Link } from "react-router-dom"; import PitchShiftComponent from "./components/PitchShiftComponent"; +import PitchEstimateMethodComponent from "./components/PitchEstimateMethodComponent"; interface Props { sessionWrapper: SessionWrapper; @@ -63,7 +64,6 @@ function VcModelListPage(props: Props) { const [convertLoading, setConvertLoading] = useState(false); const [canConvert, setCanConvert] = useState(false); - const [semitones, setSemitones] = useState(0); const [mediaUploadToken, setMediaUploadToken] = useState( undefined @@ -76,7 +76,7 @@ function VcModelListPage(props: Props) { const [maybeF0MethodOverride, setMaybeF0MethodOverride] = useState(undefined); - const [maybePitchTranspose, setMaybePitchTranspose] = useState(0); + const [semitones, setSemitones] = useState(0); // NB: Something of a UI hack here. // The 3rd party microphone component doesn't let you clear it, so we emulate form clearing @@ -156,6 +156,14 @@ function VcModelListPage(props: Props) { source_media_upload_token: mediaUploadToken, }; + if (semitones !== 0) { + request.transpose = semitones; + } + + if (maybeF0MethodOverride !== undefined) { + request.override_f0_method = maybeF0MethodOverride; + } + Analytics.voiceConversionGenerate( props.maybeSelectedVoiceConversionModel.token ); @@ -178,6 +186,12 @@ function VcModelListPage(props: Props) { const handlePitchChange = (value: any) => { setSemitones(value); + changeConvertIdempotencyToken(); + }; + + const handlePitchMethodChange = (value: any) => { + setMaybeF0MethodOverride(value); + changeConvertIdempotencyToken(); }; const speakButtonClass = convertLoading @@ -296,13 +310,21 @@ function VcModelListPage(props: Props) {
- +
+ +
+
+ +
{/*
@@ -377,13 +399,21 @@ function VcModelListPage(props: Props) {
- +
+ +
+
+ +
diff --git a/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_list/components/PitchEstimateMethodComponent.tsx b/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_list/components/PitchEstimateMethodComponent.tsx new file mode 100644 index 0000000000..ca6d89035f --- /dev/null +++ b/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_list/components/PitchEstimateMethodComponent.tsx @@ -0,0 +1,77 @@ +import React from "react"; +import Select from "react-select"; +import { EnqueueVoiceConversionFrequencyMethod } from "@storyteller/components/src/api/voice_conversion/EnqueueVoiceConversion"; + +interface PitchShiftProps { + pitchMethod?: EnqueueVoiceConversionFrequencyMethod, + onMethodChange: (newMethod?: EnqueueVoiceConversionFrequencyMethod) => void; +} + +const dropdownFieldClass = { + control: (state: any) => + state.isFocused + ? "select-search no-padding focused rounded" + : "select-search no-padding rounded", + option: (state: any) => (state.isFocused ? "select-option" : "select-option"), + input: (state: any) => (state.isFocused ? "select-input" : "select-input"), + placeholder: (state: any) => + state.isFocused ? "select-placeholder" : "select-placeholder", + singleValue: (state: any) => + state.isFocused ? "select-value" : "select-value", + menu: (state: any) => + state.isFocused ? "select-container" : "select-container", + indicatorSeparator: (state: any) => + state.isFocused ? "select-separator" : "select-separator", +}; + +function PitchEstimateMethodComponent(props: PitchShiftProps) { + + const handleMethodChange = (option: any, actionMeta: any) => { + const pitchMethodName = option?.value; + let pitchMethod = undefined; + + switch (pitchMethodName) { + case "crepe": + pitchMethod = EnqueueVoiceConversionFrequencyMethod.Crepe; + break; + case "harvest": + pitchMethod = EnqueueVoiceConversionFrequencyMethod.Harvest; + break; + case "dio": + pitchMethod = EnqueueVoiceConversionFrequencyMethod.Dio; + break; + } + + props.onMethodChange(pitchMethod); + }; + + interface DropdownOption { + label: string; + value: EnqueueVoiceConversionFrequencyMethod; + } + + const options : DropdownOption[] = [ + { label: "CREPE", value: EnqueueVoiceConversionFrequencyMethod.Crepe }, + { label: "Harvest", value: EnqueueVoiceConversionFrequencyMethod.Harvest }, + { label: "DIO", value: EnqueueVoiceConversionFrequencyMethod.Dio }, + ]; + + const selectedOption = options.find((option) => option.value === props.pitchMethod) || options[0]; + + return ( + <> +
+ -