From 480212a3dce754fb381f6e839acd49a4edab46da Mon Sep 17 00:00:00 2001
From: Brandon Thomas <echelon@gmail.com>
Date: Fri, 28 May 2021 01:18:04 -0400
Subject: [PATCH] frontend changes to support w2l inference (wip)

---
 vocodes/src/v1/api/ApiConfig.ts               |  3 +
 .../w2l_template_view/W2lTemplateViewFc.tsx   | 94 +++++++++++++------
 2 files changed, 70 insertions(+), 27 deletions(-)

diff --git a/vocodes/src/v1/api/ApiConfig.ts b/vocodes/src/v1/api/ApiConfig.ts
index c048682432..53d6a0c97b 100644
--- a/vocodes/src/v1/api/ApiConfig.ts
+++ b/vocodes/src/v1/api/ApiConfig.ts
@@ -57,6 +57,9 @@ class ApiConfig {
     return `${this.getScheme()}://${this.getNewApiHost()}/w2l/template/${templateSlug}`;
   }
 
+  inferW2l() : string {
+    return `${this.getScheme()}://${this.getNewApiHost()}/w2l/inference`;
+  }
 
   getProfile(username: string) : string {
     return `${this.getScheme()}://${this.getNewApiHost()}/profile/${username}`;
diff --git a/vocodes/src/v2/w2l_template_view/W2lTemplateViewFc.tsx b/vocodes/src/v2/w2l_template_view/W2lTemplateViewFc.tsx
index 9aef87a14a..0282d4f833 100644
--- a/vocodes/src/v2/w2l_template_view/W2lTemplateViewFc.tsx
+++ b/vocodes/src/v2/w2l_template_view/W2lTemplateViewFc.tsx
@@ -1,7 +1,9 @@
 import React, { useState, useEffect } from 'react';
+import axios from 'axios';
 import { ApiConfig } from '../../v1/api/ApiConfig';
-import { SessionWrapper } from '../../session/SessionWrapper';
 import { RouteProps, useHistory, useParams, Link } from 'react-router-dom';
+import { SessionWrapper } from '../../session/SessionWrapper';
+import { v1 as uuidv1 } from 'uuid';
 
 interface W2lTemplateViewResponsePayload {
   success: boolean,
@@ -34,6 +36,7 @@ function W2lTemplateViewFc(props: Props) {
   let { templateSlug } = useParams();
 
   const [w2lTemplate, setW2lTemplate] = useState<W2lTemplate|undefined>(undefined);
+  const [audioFile, setAudioFile] = useState<File|undefined>(undefined);
 
   useEffect(() => {
     const api = new ApiConfig();
@@ -61,8 +64,64 @@ function W2lTemplateViewFc(props: Props) {
     });
   }, []); // NB: Empty array dependency sets to run ONLY on mount
 
-  let creatorLink=`/profile/${w2lTemplate?.creator_username}`;
+  const handleAudioFileChange = (fileList: FileList|null) => {
+    if (fileList === null 
+        || fileList === undefined
+        || fileList.length < 1) {
+      setAudioFile(undefined);
+    }
 
+    let file = fileList![0];
+    setAudioFile(file);
+  };
+
+  const handleFormSubmit = (ev: React.FormEvent<HTMLFormElement>) : boolean => {
+    ev.preventDefault();
+
+    if (audioFile === undefined) {
+      return false;
+    }
+
+    if (w2lTemplate === undefined) {
+      return false;
+    }
+
+    const templateToken = w2lTemplate!.template_token;
+
+    let formData = new FormData();
+    formData.append('audio', audioFile!);
+    formData.append('template_token', templateToken);
+    formData.append('uuid_idempotency_token', uuidv1()!);
+
+    const api = new ApiConfig();
+    const endpointUrl = api.inferW2l(templateToken);
+
+    // NB: Using 'axios' because 'fetch' was having problems with form-multipart
+    // and then interpreting the resultant JSON. Maybe I didn't try hard enough?
+    axios.post(endpointUrl, formData) 
+      .then(res => res.data)
+      .then(res => {
+        /*if (res.uuid !== undefined) {
+          this.setState({
+            jobUuid: res.uuid
+          });
+
+          //let job = new VideoJob(res.uuid, VideoJobStatus.Pending);
+          //this.props.startVideoJobCallback(job);
+
+          // Make sure we show the processing status modal
+          window.scrollTo(0, document.body.scrollHeight);
+        }*/
+
+        console.log(res);
+      });
+
+
+    return false;
+  };
+
+
+  let creatorLink=`/profile/${w2lTemplate?.creator_username}`;
   let object : string|undefined = undefined;
   
   if (w2lTemplate?.maybe_image_object_name !== undefined && w2lTemplate?.maybe_image_object_name !== null) {
@@ -74,29 +133,10 @@ function W2lTemplateViewFc(props: Props) {
 
   let url = `https://storage.googleapis.com/dev-vocodes-public${object}`;
 
-  const handleAudioFileChange = (fileList: FileList|null) => {
-    if (fileList === null 
-        || fileList === undefined
-        || fileList.length < 1) {
-      //this.setState({
-      //  audioFile: undefined,
-      //});
-    }
-
-    let file = fileList![0];
-
-    //this.setState({
-    //  audioFile: file,
-    //});
-  };
-
-  const handleFormSubmit = (ev: React.FormEvent<HTMLFormElement>) : boolean => {
-    ev.preventDefault();
-    return false;
-  };
-
-  const audioFilename = 'filename.todo';
-
+  let audioFilename = '(select a file)';
+  if (audioFile !== undefined) {
+    audioFilename = audioFile?.name;
+  }
 
   return (
     <div>
@@ -105,8 +145,8 @@ function W2lTemplateViewFc(props: Props) {
       <div className="content is-size-4">
         <p>
           Upload audio from vo.codes or any other source (music, other websites), 
-          then pick a template below. The audio shouldn't be too long or it will
-          fail.
+          then submit. You'll get a lipsynced video. The audio shouldn't be too 
+          long or it will fail.
         </p>
       </div>