From aa4fc620e731e809cb2a974e147799e9e63dc956 Mon Sep 17 00:00:00 2001 From: Brandon Thomas Date: Thu, 18 May 2023 23:49:56 -0700 Subject: [PATCH] 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 ( + <> +
+ -