diff --git a/vocodes/package-lock.json b/vocodes/package-lock.json index ecedf53234..b67db714e4 100644 --- a/vocodes/package-lock.json +++ b/vocodes/package-lock.json @@ -1610,6 +1610,14 @@ "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-7.2.1.tgz", "integrity": "sha512-oZ0Ib5I4Z2pUEcoo95cT1cr6slco9WY7yiPpG+RGNkj8YcYgJnM7pXmYmorNOReh8MIGcKSqXyeGjxnr8YiZbA==" }, + "@types/axios": { + "version": "0.14.0", + "resolved": "https://registry.npmjs.org/@types/axios/-/axios-0.14.0.tgz", + "integrity": "sha1-7CMA++fX3d1+udOr+HmZlkyvzkY=", + "requires": { + "axios": "*" + } + }, "@types/babel__core": { "version": "7.1.8", "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.1.8.tgz", @@ -2513,6 +2521,14 @@ "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.10.0.tgz", "integrity": "sha512-3YDiu347mtVtjpyV3u5kVqQLP242c06zwDOgpeRnybmXlYYsLbtTrUBUm8i8srONt+FWobl5aibnU1030PeeuA==" }, + "axios": { + "version": "0.21.0", + "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.0.tgz", + "integrity": "sha512-fmkJBknJKoZwem3/IKSSLpkdNXZeBu5Q7GA/aRsr2btgrptmSCxi2oFjZHqGdK9DoTil9PIHlPIZw2EcRJXRvw==", + "requires": { + "follow-redirects": "^1.10.0" + } + }, "axobject-query": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.1.2.tgz", diff --git a/vocodes/package.json b/vocodes/package.json index 2a568b2296..fa0bc8d180 100644 --- a/vocodes/package.json +++ b/vocodes/package.json @@ -8,11 +8,13 @@ "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^9.5.0", "@testing-library/user-event": "^7.2.1", + "@types/axios": "^0.14.0", "@types/howler": "^2.1.2", "@types/jest": "^24.9.1", "@types/node": "^12.12.47", "@types/react": "^16.9.36", "@types/react-dom": "^16.9.8", + "axios": "^0.21.0", "bulma": "^0.9.0", "howler": "^2.2.0", "node-sass": "^4.14.1", diff --git a/vocodes/src/App.scss b/vocodes/src/App.scss index b65c4bdbd6..0925eb1e25 100644 --- a/vocodes/src/App.scss +++ b/vocodes/src/App.scss @@ -168,6 +168,9 @@ nav { padding: 0em; margin: 1em; filter: brightness(70%) grayscale(1); + user-select: none; + -moz-user-select: none; + -webkit-user-select: none; } .selected { diff --git a/vocodes/src/modes/video/VideoComponent.tsx b/vocodes/src/modes/video/VideoComponent.tsx index 5020a592b0..b66d420cfd 100644 --- a/vocodes/src/modes/video/VideoComponent.tsx +++ b/vocodes/src/modes/video/VideoComponent.tsx @@ -1,12 +1,16 @@ import React from 'react'; import { VIDEO_TEMPLATES, VideoTemplate } from './Videos'; +import axios from 'axios'; interface Props { } interface State { + // Before upload audioFile?: File, selectedVideoTemplate: VideoTemplate, + // After upload + jobUuid?: string, } class VideoComponent extends React.Component { @@ -14,8 +18,11 @@ class VideoComponent extends React.Component { constructor(props: Props) { super(props); this.state = { + // Before upload audioFile: undefined, selectedVideoTemplate: VIDEO_TEMPLATES[0], + // After upload + jobUuid: undefined, }; } @@ -35,6 +42,10 @@ class VideoComponent extends React.Component { }); } + getResultVideoUrl = (uuid: string) : string => { + return `https://storage.googleapis.com/vocodes-audio-uploads/uploads/${uuid}/output.mp4`; + } + selectVideoTemplate = (videoTemplate: VideoTemplate) => { this.setState({ selectedVideoTemplate: videoTemplate, @@ -52,20 +63,35 @@ class VideoComponent extends React.Component { formData.append( 'audio', this.state.audioFile!); formData.append('video-template', this.state.selectedVideoTemplate.slug); - fetch("http://34.95.89.220/upload", { + //axios.post("http://34.95.89.220/upload", { + /*fetch("http://localhost:12345/upload", { mode: 'no-cors', - method: "POST", + method: 'POST', + headers: { + 'Accept': 'application/json', + //'Content-Type': 'multipart/form-data', + }, body: formData, - }) - .then(function (res) { + })*/ + axios.post("http://34.95.89.220/upload", formData) + //axios.post("http://localhost:12345/upload", formData) + .then(res => res.data) + .then(res => { + if (res.uuid !== undefined) { + this.setState({ + jobUuid: res.uuid + }); + } + }); + /*.then(function (res) { if (res.ok) { - alert("Perfect! "); + res.body } else if (res.status === 401) { - alert("Oops! "); + // TODO } }, function (e) { - alert("Error submitting form!"); - }); + // TODO + });*/ return false; } @@ -81,6 +107,7 @@ class VideoComponent extends React.Component { let className = `video-thumbnail ${selectedName}` let thumbnail = this.selectVideoTemplate(videoTemplate) } alt={videoTemplate.name} @@ -95,6 +122,27 @@ class VideoComponent extends React.Component { audioFilename = this.state.audioFile.name; } + let videoResults =
; + + if (this.state.jobUuid !== undefined) { + let downloadUrl = this.getResultVideoUrl(this.state.jobUuid) || ""; + videoResults = ( +
+
+

Your results are currently processing and may take awhile. + Once complete, you can find your video at:

+

{downloadUrl}

+ +

Please note that this will look like an error message at first. + Refresh it again later. I'm still working on the frontend code.

+
+
+ ); + } + return (

Deep Fake Video Beta

@@ -106,6 +154,8 @@ class VideoComponent extends React.Component {

+ {videoResults} +
@@ -140,7 +190,7 @@ class VideoComponent extends React.Component {

Hundreds of additional templates will be added in the future. Feel free to send some to us. As always, check Discord or - like/subscribe Twitter for updates. + Twitter for updates.

@@ -152,11 +202,16 @@ class VideoComponent extends React.Component {

- This is an extremely rough cut of a brand new, beta feature. /It might break. + This is an extremely rough cut of a brand new, beta feature. It might  + (probably will) break. I need to reach out to Google Cloud sales engineers to get more GPUs as I'm currently on a limited trial account (I was previously on Digital Ocean). Expect this to lag during peak traffic until I get more GPUs.

+

+ This would normally be more polished, but I've had a rough few weeks and + I just want to get something out the door. It will improve. +

Do not defame, defraud, or use for commercial purposes. Deep fakes are for memes. The more people see deep fakes, the more they learn to @@ -164,6 +219,8 @@ class VideoComponent extends React.Component { deep fakes. Have fun, go crazy.

+ +
) }