diff --git a/vocodes/src/App.scss b/vocodes/src/App.scss index 63a7b05baa..b65c4bdbd6 100644 --- a/vocodes/src/App.scss +++ b/vocodes/src/App.scss @@ -161,9 +161,19 @@ nav { min-height: 1.5em; } -.video-thumbnail { - max-width: 250px; - padding: 1em; +.video-template-selector { + + .video-thumbnail { + max-width: 250px; + padding: 0em; + margin: 1em; + filter: brightness(70%) grayscale(1); + } + + .selected { + filter: brightness(100%) grayscale(0); + box-shadow: 0px 0px 25px #209CEE + } } #usage, diff --git a/vocodes/src/modes/video/VideoComponent.tsx b/vocodes/src/modes/video/VideoComponent.tsx index eebe6c2ef9..df013fec8e 100644 --- a/vocodes/src/modes/video/VideoComponent.tsx +++ b/vocodes/src/modes/video/VideoComponent.tsx @@ -1,10 +1,12 @@ import React from 'react'; -import { VIDEO_TEMPLATES } from './Videos'; +import { VIDEO_TEMPLATES, VideoTemplate } from './Videos'; interface Props { } interface State { + audioFile?: File, + selectedVideoTemplate: VideoTemplate, } class VideoComponent extends React.Component { @@ -12,23 +14,90 @@ class VideoComponent extends React.Component { constructor(props: Props) { super(props); this.state = { + audioFile: undefined, + selectedVideoTemplate: VIDEO_TEMPLATES[0], }; } + handleFileChange = (fileList: FileList|null) => { + //const text = (ev.target as ).value; + //ev.preventDefault(); + //return false; + + if (fileList === null + || fileList === undefined + || fileList.length < 1) { + this.setState({ + audioFile: undefined, + }); + } + + let file = fileList![0]; + + this.setState({ + audioFile: file, + }); + } + + selectVideoTemplate = (videoTemplate: VideoTemplate) => { + this.setState({ + selectedVideoTemplate: videoTemplate, + }); + } + + handleFormSubmit = (ev: React.FormEvent) : boolean => { + ev.preventDefault(); + + if (this.state.audioFile === undefined) { + return false; + } + + let formData = new FormData(); + formData.append( 'audio', this.state.audioFile!); + formData.append('video-template', this.state.selectedVideoTemplate.slug); + + fetch("http://34.95.89.220/upload", { + mode: 'no-cors', + method: "POST", + body: formData, + }) + .then(function (res) { + if (res.ok) { + alert("Perfect! "); + } else if (res.status == 401) { + alert("Oops! "); + } + }, function (e) { + alert("Error submitting form!"); + }); + + return false; + } + public render() { let thumbnails : any[] = []; VIDEO_TEMPLATES.forEach(videoTemplate => { - - const thumbnail = this.selectVideoTemplate(videoTemplate) } /> thumbnails.push(thumbnail); - }); + let audioFilename = '(select a file)'; + + if (this.state.audioFile !== undefined) { + audioFilename = this.state.audioFile.name; + } + return (

Deep Fake Video Beta

@@ -40,12 +109,17 @@ class VideoComponent extends React.Component {

-
+
@@ -86,6 +160,12 @@ class VideoComponent extends React.Component { currently on a limited trial account (I was previously on Digital Ocean). Expect this to lag during peak traffic until I get more GPUs.

+

+ 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 + recognize them. It's your privilege to help educate the world about + deep fakes. Have fun, go crazy. +

)