show result visibility in result pages

vocodes/src/v2/tts/tts_result_view/TtsResultViewFc.tsx

@@ -7,6 +7,8 @@ import { SpectrogramFc } from './SpectrogramFc';
 import { ReportDiscordLinkFc } from '../../common/DiscordReportLinkFc';
 import { BucketConfig } from '../../../common/BucketConfig';
 import { FrontendUrlConfig } from '../../../common/FrontendUrlConfig';
+import { HiddenIconFc } from '../../../icons/HiddenIconFc';
+import { VisibleIconFc } from '../../../icons/VisibleIconFc';
 
 interface TtsInferenceResultResponsePayload {
   success: boolean,
@@ -34,6 +36,8 @@ interface TtsInferenceResult {
   public_bucket_wav_audio_path: string,
   public_bucket_spectrogram_path: string,
 
+  creator_set_visibility?: string,
+
   file_size_bytes: number,
   duration_millis: number,
   created_at: string,
@@ -159,6 +163,11 @@ function TtsResultViewFc(props: Props) {
     );
   }
 
+  let resultVisibility = ttsInferenceResult?.creator_set_visibility === 'hidden' ? 
+    <span>Hidden <HiddenIconFc /></span> :
+    <span>Public <VisibleIconFc /></span> ;
+
+
   let headingTitle = 'TTS Result';
   let subtitle = <span />;
   if (ttsInferenceResult.tts_model_title !== undefined && ttsInferenceResult.tts_model_title !== null) {
@@ -226,6 +235,10 @@ function TtsResultViewFc(props: Props) {
             <th>Audio duration</th>
             <td>{durationSeconds} seconds</td>
           </tr>
+          <tr>
+            <th>Visibility</th>
+            <td>{resultVisibility}</td>
+          </tr>
         </tbody>
         <tr>
           <td colSpan={2}>

vocodes/src/v2/w2l/w2l_result_view/W2lResultViewFc.tsx

@@ -6,6 +6,8 @@ import { useParams, Link } from 'react-router-dom';
 import { W2lResultViewDeleteFc } from './W2lResultView_DeleteFc';
 import { ReportDiscordLinkFc } from '../../common/DiscordReportLinkFc';
 import { BucketConfig } from '../../../common/BucketConfig';
+import { HiddenIconFc } from '../../../icons/HiddenIconFc';
+import { VisibleIconFc } from '../../../icons/VisibleIconFc';
 
 interface W2lInferenceResultResponsePayload {
   success: boolean,
@@ -30,6 +32,8 @@ interface W2lInferenceResult {
   maybe_template_creator_display_name?: string,
   maybe_template_creator_gravatar_hash?: string,
 
+  creator_set_visibility?: string,
+
   file_size_bytes: number,
   frame_width: number,
   frame_height: number,
@@ -157,6 +161,10 @@ function W2lResultViewFc(props: Props) {
     );
   }
 
+  let resultVisibility = w2lInferenceResult?.creator_set_visibility === 'hidden' ? 
+    <span>Hidden <HiddenIconFc /></span> :
+    <span>Public <VisibleIconFc /></span> ;
+
   return (
     <div>
       <h1 className="title is-1"> Lipsync Result </h1>
@@ -194,6 +202,10 @@ function W2lResultViewFc(props: Props) {
             <th>Duration</th>
             <td>{durationSeconds} seconds</td>
           </tr>
+          <tr>
+            <th>Visibility</th>
+            <td>{resultVisibility}</td>
+          </tr>
           <tr>
             <td colSpan={2}>
               <br />