Microsoft custom TTS and STT endpoints (#121)

* feat: custom voice and speech for microsoft

* remove checkzone

* fix: enable update region speech credential

* use tmp state to store custom tts/stt endpoint when enable/disable it

* feat: custom voice and speech for microsoft

* remove checkzone

* fix: enable update region speech credential

* use tmp state to store custom tts/stt endpoint when enable/disable it
This commit is contained in:
xquanluu
2022-10-04 19:32:12 +07:00
committed by GitHub
parent 4a8eafe0e6
commit 1ece8bfbe4
2 changed files with 99 additions and 3 deletions
+4
View File
@@ -231,6 +231,10 @@ export interface SpeechCredential {
access_key_id: null | string;
secret_access_key: null | string;
service_key: null | string;
use_custom_tts: number;
custom_tts_endpoint: null | string;
use_custom_stt: number;
custom_stt_endpoint: null | string;
}
export interface Alert {
@@ -53,6 +53,12 @@ export const SpeechServiceForm = ({ credential }: SpeechServiceFormProps) => {
const [secretAccessKey, setSecretAccessKey] = useState("");
const [googleServiceKey, setGoogleServiceKey] =
useState<GoogleServiceKey | null>(null);
const [useCustomTts, setUseCustomTts] = useState(false);
const [useCustomStt, setUseCustomStt] = useState(false);
const [customTtsEndpoint, setCustomTtsEndpoint] = useState("");
const [tmpCustomTtsEndpoint, setTmpCustomTtsEndpoint] = useState("");
const [customSttEndpoint, setCustomSttEndpoint] = useState("");
const [tmpCustomSttEndpoint, setTmpCustomSttEndpoint] = useState("");
const handleFile = (file: File) => {
const handleError = () => {
@@ -91,8 +97,16 @@ export const SpeechServiceForm = ({ credential }: SpeechServiceFormProps) => {
currentServiceProvider.service_provider_sid || null,
use_for_tts: ttsCheck ? 1 : 0,
use_for_stt: sttCheck ? 1 : 0,
aws_region: vendor === VENDOR_AWS ? region : null,
region: vendor === VENDOR_MICROSOFT ? region : null,
...(vendor === VENDOR_AWS && {
aws_region: region || null,
}),
...(vendor === VENDOR_MICROSOFT && {
region: region || null,
use_custom_tts: useCustomTts ? 1 : 0,
custom_tts_endpoint: customTtsEndpoint || null,
use_custom_stt: useCustomStt ? 1 : 0,
custom_stt_endpoint: customSttEndpoint || null,
}),
};
if (credential && credential.data) {
@@ -180,6 +194,11 @@ export const SpeechServiceForm = ({ credential }: SpeechServiceFormProps) => {
if (credential.data.aws_region) {
setRegion(credential.data.aws_region);
}
setUseCustomTts(credential.data.use_custom_tts > 0 ? true : false);
setUseCustomStt(credential.data.use_custom_stt > 0 ? true : false);
setCustomTtsEndpoint(credential.data.custom_tts_endpoint || "");
setCustomSttEndpoint(credential.data.custom_stt_endpoint || "");
}
}, [credential]);
@@ -351,10 +370,83 @@ export const SpeechServiceForm = ({ credential }: SpeechServiceFormProps) => {
},
].concat(regions[vendor as keyof RegionVendors])}
onChange={(e) => setRegion(e.target.value)}
disabled={credential ? true : false}
/>
</fieldset>
)}
{vendor === VENDOR_MICROSOFT && (
<React.Fragment>
<fieldset>
<label htmlFor="use_custom_tts" className="chk">
<input
id="use_custom_tts"
name="use_custom_tts"
type="checkbox"
onChange={(e) => {
setUseCustomTts(e.target.checked);
if (e.target.checked && tmpCustomTtsEndpoint) {
setCustomTtsEndpoint(tmpCustomTtsEndpoint);
}
if (!e.target.checked) {
setTmpCustomTtsEndpoint(customTtsEndpoint);
setCustomTtsEndpoint("");
}
}}
checked={useCustomTts}
/>
<div>Use for Custom text-to-speech</div>
</label>
<label htmlFor="use_custom_tts">
Custom voice endpoint{useCustomTts && <span>*</span>}
</label>
<input
id="custom_tts_endpoint"
required={useCustomTts}
disabled={!useCustomTts}
type="text"
name="custom_tts_endpoint"
placeholder="Custom voice endpoint"
value={customTtsEndpoint}
onChange={(e) => setCustomTtsEndpoint(e.target.value)}
/>
</fieldset>
<fieldset>
<label htmlFor="use_custom_stt" className="chk">
<input
id="use_custom_stt"
name="use_custom_stt"
type="checkbox"
onChange={(e) => {
setUseCustomStt(e.target.checked);
if (e.target.checked && tmpCustomSttEndpoint) {
setCustomSttEndpoint(tmpCustomSttEndpoint);
}
if (!e.target.checked) {
setTmpCustomSttEndpoint(customSttEndpoint);
setCustomSttEndpoint("");
}
}}
checked={useCustomStt}
/>
<div>Use for Custom speech-to-text</div>
</label>
<label htmlFor="use_custom_stt">
Custom speech endpoint{useCustomStt && <span>*</span>}
</label>
<input
id="custom_stt_endpoint"
required={useCustomStt}
disabled={!useCustomStt}
type="text"
name="custom_stt_endpoint"
placeholder="Custom speech endpoint"
value={customSttEndpoint}
onChange={(e) => setCustomSttEndpoint(e.target.value)}
/>
</fieldset>
</React.Fragment>
)}
<fieldset>
<ButtonGroup left>
<Button small subStyle="grey" as={Link} to={ROUTE_INTERNAL_SPEECH}>