diff --git a/vocodes/src/common/ApiConfig.ts b/vocodes/src/common/ApiConfig.ts index 26549147c8..4680a53fc8 100644 --- a/vocodes/src/common/ApiConfig.ts +++ b/vocodes/src/common/ApiConfig.ts @@ -60,6 +60,10 @@ class ApiConfig { return `${this.getScheme()}://${this.getNewApiHost()}/tts/model/${modelSlug}`; } + getTtsModelUseCount(modelSlug: string) : string { + return `${this.getScheme()}://${this.getNewApiHost()}/tts/model/${modelSlug}/count`; + } + viewTtsInferenceResult(token: string) : string { return `${this.getScheme()}://${this.getNewApiHost()}/tts/result/${token}`; } @@ -119,6 +123,10 @@ class ApiConfig { return `${this.getScheme()}://${this.getNewApiHost()}/w2l/template/${templateSlug}`; } + getW2lTemplateUseCount(templateSlug: string) : string { + return `${this.getScheme()}://${this.getNewApiHost()}/w2l/template/${templateSlug}/count`; + } + moderateW2l(templateSlug: string) : string { return `${this.getScheme()}://${this.getNewApiHost()}/w2l/template/${templateSlug}/moderate`; } diff --git a/vocodes/src/v2/tts_model_view/TtsModelViewFc.tsx b/vocodes/src/v2/tts_model_view/TtsModelViewFc.tsx index d1f3cefc45..d61f04715a 100644 --- a/vocodes/src/v2/tts_model_view/TtsModelViewFc.tsx +++ b/vocodes/src/v2/tts_model_view/TtsModelViewFc.tsx @@ -1,5 +1,5 @@ -import React, { useState, useEffect } from 'react'; +import React, { useState, useEffect, useCallback } from 'react'; //import axios from 'axios'; import { ApiConfig } from '../../common/ApiConfig'; import { EnqueueJobResponsePayload } from '../tts_model_list/TtsModelFormFc'; @@ -14,6 +14,11 @@ interface TtsModelViewResponsePayload { model: TtsModel, } +interface TtsModelUseCountResponsePayload { + success: boolean, + count: number | null | undefined, +} + interface TtsModel { model_token: string, title: string, @@ -34,12 +39,13 @@ interface Props { } function TtsModelViewFc(props: Props) { - let { token } = useParams(); + let { token } = useParams() as { token : string }; const [ttsModel, setTtsModel] = useState(undefined); + const [ttsModelUseCount, setTtsModelUseCount] = useState(undefined); const [text, setText] = useState(""); - useEffect(() => { + const getModel = useCallback((token) => { const api = new ApiConfig(); const endpointUrl = api.viewTtsModel(token); @@ -59,11 +65,39 @@ function TtsModelViewFc(props: Props) { setTtsModel(modelsResponse.model) }) - .catch(e => { - //this.props.onSpeakErrorCallback(); - }); + .catch(e => {}); + }, [token]); + + const getModelUseCount = useCallback((token) => { + const api = new ApiConfig(); + const endpointUrl = api.getTtsModelUseCount(token); + + fetch(endpointUrl, { + method: 'GET', + headers: { + 'Accept': 'application/json', + }, + credentials: 'include', + }) + .then(res => res.json()) + .then(res => { + const modelsResponse : TtsModelUseCountResponsePayload = res; + if (!modelsResponse.success) { + return; + } + + setTtsModelUseCount(modelsResponse.count || undefined) + }) + .catch(e => {}); + }, [token]); + + + useEffect(() => { + getModel(token); + getModelUseCount(token); }, [token]); // NB: Empty array dependency sets to run ONLY on mount + /*const handleAudioFileChange = (fileList: FileList|null) => { if (fileList === null || fileList === undefined @@ -144,6 +178,12 @@ function TtsModelViewFc(props: Props) { if (ttsModel?.title !== undefined) { title = `${ttsModel.title} model`; } + + let humanUseCount : string | number = 'Fetching...'; + + if (ttsModelUseCount !== undefined && ttsModelUseCount !== null) { + humanUseCount = ttsModelUseCount; + } return (
@@ -157,6 +197,10 @@ function TtsModelViewFc(props: Props) { + + Use Count + {humanUseCount} + Creator diff --git a/vocodes/src/v2/w2l_template_view/W2lTemplateViewFc.tsx b/vocodes/src/v2/w2l_template_view/W2lTemplateViewFc.tsx index 802467b34a..c8becdeb3b 100644 --- a/vocodes/src/v2/w2l_template_view/W2lTemplateViewFc.tsx +++ b/vocodes/src/v2/w2l_template_view/W2lTemplateViewFc.tsx @@ -1,4 +1,4 @@ -import React, { useState, useEffect } from 'react'; +import React, { useState, useEffect, useCallback } from 'react'; import axios from 'axios'; import { ApiConfig } from '../../common/ApiConfig'; import { SessionWrapper } from '../../session/SessionWrapper'; @@ -13,6 +13,11 @@ interface W2lTemplateViewResponsePayload { template: W2lTemplate, } +interface W2lTemplateUseCountResponsePayload { + success: boolean, + count: number | null | undefined, +} + interface W2lTemplate { template_token: string, template_type: string, @@ -50,6 +55,7 @@ function W2lTemplateViewFc(props: Props) { // Ajax const [w2lTemplate, setW2lTemplate] = useState(undefined); + const [w2lTemplateUseCount, setW2lTemplateUseCount] = useState(undefined); // Inference const [audioFile, setAudioFile] = useState(undefined); @@ -57,7 +63,7 @@ function W2lTemplateViewFc(props: Props) { // Moderation const [modApprovedFormValue, setModApprovedFormValue] = useState(true); - useEffect(() => { + const getTemplate = useCallback((templateSlug: string) => { const api = new ApiConfig(); const endpointUrl = api.viewW2l(templateSlug); @@ -84,9 +90,37 @@ function W2lTemplateViewFc(props: Props) { setModApprovedFormValue(modApprovalState); }) - .catch(e => { - //this.props.onSpeakErrorCallback(); - }); + .catch(e => {}); + + }, [templateSlug]); + + const getTemplateUseCount = useCallback((templateSlug: string) => { + const api = new ApiConfig(); + const endpointUrl = api.getW2lTemplateUseCount(templateSlug); + + fetch(endpointUrl, { + method: 'GET', + headers: { + 'Accept': 'application/json', + }, + credentials: 'include', + }) + .then(res => res.json()) + .then(res => { + const templatesResponse : W2lTemplateUseCountResponsePayload = res; + if (!templatesResponse.success) { + return; + } + + setW2lTemplateUseCount(templatesResponse.count || undefined) + }) + .catch(e => {}); + + }, [templateSlug]); + + useEffect(() => { + getTemplate(templateSlug); + getTemplateUseCount(templateSlug); }, [templateSlug]); // NB: Empty array dependency sets to run ONLY on mount const handleAudioFileChange = (fileList: FileList|null) => { @@ -281,6 +315,12 @@ function W2lTemplateViewFc(props: Props) { ); } + let humanUseCount : string | number = 'Fetching...'; + + if (w2lTemplateUseCount !== undefined && w2lTemplateUseCount !== null) { + humanUseCount = w2lTemplateUseCount; + } + return (

Video lip sync template

@@ -337,6 +377,10 @@ function W2lTemplateViewFc(props: Props) { + + Use Count + {humanUseCount} + Creator