From 139d1f1c17ced002d93305abaac89a97dcecc419 Mon Sep 17 00:00:00 2001 From: Brandon Thomas Date: Wed, 30 Jun 2021 17:51:08 -0400 Subject: [PATCH] Edit TTS models --- vocodes/src/common/ApiConfig.ts | 8 +- vocodes/src/session/SessionWrapper.ts | 8 + vocodes/src/v2/NewVocodesContainer.tsx | 9 + .../v2/tts/tts_model_edit/TtsModelEditFc.tsx | 198 ++++++++++++++++++ .../tts_model_view/TtsModelViewComponent.tsx | 160 -------------- .../v2/tts/tts_model_view/TtsModelViewFc.tsx | 17 ++ 6 files changed, 238 insertions(+), 162 deletions(-) create mode 100644 vocodes/src/v2/tts/tts_model_edit/TtsModelEditFc.tsx delete mode 100644 vocodes/src/v2/tts/tts_model_view/TtsModelViewComponent.tsx diff --git a/vocodes/src/common/ApiConfig.ts b/vocodes/src/common/ApiConfig.ts index 6b9fc1c27f..44f394aac5 100644 --- a/vocodes/src/common/ApiConfig.ts +++ b/vocodes/src/common/ApiConfig.ts @@ -64,8 +64,12 @@ class ApiConfig { return `${this.getScheme()}://${this.getNewApiHost()}/tts/model/${modelToken}/delete`; } - getTtsModelUseCount(modelSlug: string) : string { - return `${this.getScheme()}://${this.getNewApiHost()}/tts/model/${modelSlug}/count`; + editTtsModel(modelToken: string) : string { + return `${this.getScheme()}://${this.getNewApiHost()}/tts/model/${modelToken}/edit`; + } + + getTtsModelUseCount(modelToken: string) : string { + return `${this.getScheme()}://${this.getNewApiHost()}/tts/model/${modelToken}/count`; } viewTtsInferenceResult(token: string) : string { diff --git a/vocodes/src/session/SessionWrapper.ts b/vocodes/src/session/SessionWrapper.ts index c8b4bc2e93..d25c06f5b5 100644 --- a/vocodes/src/session/SessionWrapper.ts +++ b/vocodes/src/session/SessionWrapper.ts @@ -51,6 +51,10 @@ export class SessionWrapper { return this.canEditOtherUsersProfiles(); } + public canEditTtsModelByUserToken(userToken: MaybeString) : boolean { + return this.canEditOtherUsersTtsModels() || this.verifyUserTokenMatch(userToken); + } + public canDeleteTtsModelByUserToken(userToken: MaybeString) : boolean { return this.canDeleteOtherUsersTtsModels() || this.verifyUserTokenMatch(userToken); } @@ -95,6 +99,10 @@ export class SessionWrapper { return this.sessionStateResponse?.user?.can_edit_other_users_profiles || false; } + public canEditOtherUsersTtsModels() : boolean { + return this.sessionStateResponse?.user?.can_edit_other_users_tts_models || false; + } + public canDeleteOtherUsersTtsModels() : boolean { return this.sessionStateResponse?.user?.can_delete_other_users_tts_models || false; } diff --git a/vocodes/src/v2/NewVocodesContainer.tsx b/vocodes/src/v2/NewVocodesContainer.tsx index e627a1972d..99316e266d 100644 --- a/vocodes/src/v2/NewVocodesContainer.tsx +++ b/vocodes/src/v2/NewVocodesContainer.tsx @@ -27,6 +27,7 @@ import { W2lTemplateViewFc } from './w2l/w2l_template_view/W2lTemplateViewFc'; import { ModerationViewIpBanFc } from './moderation/moderation_view_ip_ban/ModerationViewIpBanFc'; import { AboutFc } from './about/about_page/AboutFc'; import { TermsFc } from './about/terms_page/TermsFc'; +import { TtsModelEditFc } from './tts/tts_model_edit/TtsModelEditFc'; interface Props { sessionWrapper: SessionWrapper, @@ -114,6 +115,14 @@ class NewVocodesContainer extends React.Component { /> + + + + void, + ttsInferenceJobs: Array, +} + +function TtsModelEditFc(props: Props) { + let { token } = useParams() as { token : string }; + + const history = useHistory(); + + const [ttsModel, setTtsModel] = useState(undefined); + const [title, setTitle] = useState(""); + const [descriptionMarkdown, setDescriptionMarkdown] = useState(""); + + const getModel = useCallback((token) => { + const api = new ApiConfig(); + const endpointUrl = api.viewTtsModel(token); + + fetch(endpointUrl, { + method: 'GET', + headers: { + 'Accept': 'application/json', + }, + credentials: 'include', + }) + .then(res => res.json()) + .then(res => { + const modelsResponse : TtsModelViewResponsePayload = res; + if (!modelsResponse.success) { + return; + } + + setTitle(modelsResponse.model.title || "") + setDescriptionMarkdown(modelsResponse.model.description_markdown || "") + setTtsModel(modelsResponse.model); + }) + .catch(e => {}); + }, []); + + + useEffect(() => { + getModel(token); + }, [token, getModel]); + + const handleTitleChange = (ev: React.FormEvent) => { + ev.preventDefault(); + const textValue = (ev.target as HTMLInputElement).value; + setTitle(textValue); + return false; + }; + + const handleDescriptionMarkdownChange = (ev: React.FormEvent) => { + ev.preventDefault(); + const textValue = (ev.target as HTMLTextAreaElement).value; + setDescriptionMarkdown(textValue); + return false; + }; + + const modelLink = `/tts/${token}`; + + const handleFormSubmit = (ev: React.FormEvent) => { + ev.preventDefault(); + + if (ttsModel === undefined) { + return false; + } + + if (title.trim() === "") { + return false; + } + + const modelToken = ttsModel!.model_token; + + const api = new ApiConfig(); + const endpointUrl = api.editTtsModel(modelToken); + + const request = { + title: title, + description_markdown: descriptionMarkdown, + } + + fetch(endpointUrl, { + method: 'POST', + headers: { + 'Accept': 'application/json', + 'Content-Type': 'application/json', + }, + credentials: 'include', + body: JSON.stringify(request), + }) + .then(res => res.json()) + .then(res => { + if (res === undefined || + !res.success) { + return; // Endpoint error? + } + + history.push(modelLink); + }) + .catch(e => { + }); + + return false; + }; + + let isDisabled = ttsModel === undefined; + + return ( +
+

Edit Model

+ + Back to model + +
+
+ +
+ +
+ + + + + + + +
+ {/*

{invalidReason}

*/} +
+ +
+ +
+