redis-based counts

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`;
   }

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<TtsModel|undefined>(undefined);
+  const [ttsModelUseCount, setTtsModelUseCount] = useState<number|undefined>(undefined);
   const [text, setText] = useState<string>("");
 
-  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 (
     <div>
@@ -157,6 +197,10 @@ function TtsModelViewFc(props: Props) {
           </tr>
         </thead>
         <tbody>
+          <tr>
+            <th>Use Count</th>
+            <td>{humanUseCount}</td>
+          </tr>
           <tr>
             <th>Creator</th>
             <td>

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<W2lTemplate|undefined>(undefined);
+  const [w2lTemplateUseCount, setW2lTemplateUseCount] = useState<number|undefined>(undefined);
 
   // Inference
   const [audioFile, setAudioFile] = useState<File|undefined>(undefined);
@@ -57,7 +63,7 @@ function W2lTemplateViewFc(props: Props) {
   // Moderation
   const [modApprovedFormValue, setModApprovedFormValue] = useState<boolean>(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 (
     <div>
       <h1 className="title is-1"> Video lip sync template </h1>
@@ -337,6 +377,10 @@ function W2lTemplateViewFc(props: Props) {
           </tr>
         </thead>
         <tbody>
+          <tr>
+            <th>Use Count</th>
+            <td>{humanUseCount}</td>
+          </tr>
           <tr>
             <th>Creator</th>
             <td>