mirror of
https://github.com/maciej3031/comixify.git
synced 2026-03-11 08:54:35 +00:00
Add minimum response delay
Update sample
This commit is contained in:
adamsvystun
parent
fe7c388495
commit
acc7049414
6 changed files with 41 additions and 28 deletions
|
|
@ -5,12 +5,14 @@ import { post } from "axios";
|
|||
import Dropzone from "react-dropzone";
|
||||
import { BarLoader } from "react-spinners";
|
||||
import { css } from "react-emotion";
|
||||
import debounce from "lodash/debounce"
|
||||
|
||||
import {
|
||||
COMIXIFY_API,
|
||||
MAX_FILE_SIZE,
|
||||
PERMITTED_VIDEO_EXTENSIONS,
|
||||
FROM_YOUTUBE_API
|
||||
FROM_YOUTUBE_API,
|
||||
MIN_RESPONSE_DELAY
|
||||
} from "./constants";
|
||||
|
||||
class App extends React.Component {
|
||||
|
|
@ -37,7 +39,7 @@ class App extends React.Component {
|
|||
};
|
||||
this.onVideoDrop = this.onVideoDrop.bind(this);
|
||||
this.onModelChange = this.onModelChange.bind(this);
|
||||
this.handleResponse = this.handleResponse.bind(this);
|
||||
this.handleResponse = debounce(this.handleResponse.bind(this), MIN_RESPONSE_DELAY);
|
||||
this.onYouTubeSubmit = this.onYouTubeSubmit.bind(this);
|
||||
this.onSamplingChange = this.onSamplingChange.bind(this);
|
||||
this.onImageAssessmentChange = this.onImageAssessmentChange.bind(this);
|
||||
|
|
@ -74,6 +76,9 @@ class App extends React.Component {
|
|||
})
|
||||
}
|
||||
handleResponse(res) {
|
||||
if(res === "debounce") {
|
||||
return
|
||||
}
|
||||
if (res.data["status_message"] === "ok") {
|
||||
this.setState({
|
||||
state: App.appStates.FINISHED,
|
||||
|
|
@ -93,6 +98,7 @@ class App extends React.Component {
|
|||
data.set('rl_mode', parseInt(rlMode));
|
||||
data.set("image_assessment_mode", parseInt(imageAssessment));
|
||||
data.set('style_transfer_mode', parseInt(styleTransferMode));
|
||||
this.handleResponse("debounce");
|
||||
post(COMIXIFY_API, data, {
|
||||
headers: { "content-type": "multipart/form-data" },
|
||||
onUploadProgress: App.onVideoUploadProgress
|
||||
|
|
@ -121,6 +127,7 @@ class App extends React.Component {
|
|||
}
|
||||
submitYouTube(link) {
|
||||
let { framesMode, rlMode, imageAssessment, styleTransferMode } = this.state;
|
||||
this.handleResponse("debounce");
|
||||
post(FROM_YOUTUBE_API, {
|
||||
url: link,
|
||||
frames_mode: parseInt(framesMode),
|
||||
|
|
@ -317,14 +324,14 @@ class App extends React.Component {
|
|||
/>
|
||||
</div>
|
||||
<div>
|
||||
<div className="yt-clip-label">Sport</div>
|
||||
<div className="yt-clip-label">Music</div>
|
||||
<YouTube
|
||||
videoId="Pi-qitmfvlI"
|
||||
videoId="Es3Vsfzdr14"
|
||||
opts={{
|
||||
height: '90',
|
||||
width: '150',
|
||||
}}
|
||||
onPlay={this.onSamplePlay.bind(this, "Pi-qitmfvlI")}
|
||||
onPlay={this.onSamplePlay.bind(this, "Es3Vsfzdr14")}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
|
|
|
|||
|
|
@ -2,3 +2,4 @@ export const COMIXIFY_API = "/comixify/";
|
|||
export const FROM_YOUTUBE_API = "/comixify/from_yt/";
|
||||
export const MAX_FILE_SIZE = 50000000;
|
||||
export const PERMITTED_VIDEO_EXTENSIONS = "video/*";
|
||||
export const MIN_RESPONSE_DELAY = 7500;
|
||||
|
|
|
|||
|
|
@ -35,6 +35,10 @@ img {
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
#demo {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.bar-loader {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
34
package-lock.json
generated
34
package-lock.json
generated
|
|
@ -10,7 +10,7 @@
|
|||
"integrity": "sha1-zgBCgEX7t9XrwOp7+DV4nxU2arI=",
|
||||
"requires": {
|
||||
"@babel/types": "7.0.0-beta.51",
|
||||
"lodash": "4.17.10"
|
||||
"lodash": "4.17.11"
|
||||
}
|
||||
},
|
||||
"@babel/types": {
|
||||
|
|
@ -19,7 +19,7 @@
|
|||
"integrity": "sha1-2AK3tUO1g2x3iqaReXq/APPZfqk=",
|
||||
"requires": {
|
||||
"esutils": "2.0.2",
|
||||
"lodash": "4.17.10",
|
||||
"lodash": "4.17.11",
|
||||
"to-fast-properties": "2.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
|
|
@ -505,7 +505,7 @@
|
|||
"convert-source-map": "1.5.1",
|
||||
"debug": "2.6.9",
|
||||
"json5": "0.5.1",
|
||||
"lodash": "4.17.10",
|
||||
"lodash": "4.17.11",
|
||||
"minimatch": "3.0.4",
|
||||
"path-is-absolute": "1.0.1",
|
||||
"private": "0.1.8",
|
||||
|
|
@ -533,7 +533,7 @@
|
|||
"babel-types": "6.26.0",
|
||||
"detect-indent": "4.0.0",
|
||||
"jsesc": "1.3.0",
|
||||
"lodash": "4.17.10",
|
||||
"lodash": "4.17.11",
|
||||
"source-map": "0.5.7",
|
||||
"trim-right": "1.0.1"
|
||||
}
|
||||
|
|
@ -587,7 +587,7 @@
|
|||
"babel-helper-function-name": "6.24.1",
|
||||
"babel-runtime": "6.26.0",
|
||||
"babel-types": "6.26.0",
|
||||
"lodash": "4.17.10"
|
||||
"lodash": "4.17.11"
|
||||
}
|
||||
},
|
||||
"babel-helper-explode-assignable-expression": {
|
||||
|
|
@ -657,7 +657,7 @@
|
|||
"requires": {
|
||||
"babel-runtime": "6.26.0",
|
||||
"babel-types": "6.26.0",
|
||||
"lodash": "4.17.10"
|
||||
"lodash": "4.17.11"
|
||||
}
|
||||
},
|
||||
"babel-helper-remap-async-to-generator": {
|
||||
|
|
@ -905,7 +905,7 @@
|
|||
"babel-template": "6.26.0",
|
||||
"babel-traverse": "6.26.0",
|
||||
"babel-types": "6.26.0",
|
||||
"lodash": "4.17.10"
|
||||
"lodash": "4.17.11"
|
||||
}
|
||||
},
|
||||
"babel-plugin-transform-es2015-classes": {
|
||||
|
|
@ -1295,7 +1295,7 @@
|
|||
"babel-runtime": "6.26.0",
|
||||
"core-js": "2.5.7",
|
||||
"home-or-tmp": "2.0.0",
|
||||
"lodash": "4.17.10",
|
||||
"lodash": "4.17.11",
|
||||
"mkdirp": "0.5.1",
|
||||
"source-map-support": "0.4.18"
|
||||
}
|
||||
|
|
@ -1318,7 +1318,7 @@
|
|||
"babel-traverse": "6.26.0",
|
||||
"babel-types": "6.26.0",
|
||||
"babylon": "6.18.0",
|
||||
"lodash": "4.17.10"
|
||||
"lodash": "4.17.11"
|
||||
}
|
||||
},
|
||||
"babel-traverse": {
|
||||
|
|
@ -1334,7 +1334,7 @@
|
|||
"debug": "2.6.9",
|
||||
"globals": "9.18.0",
|
||||
"invariant": "2.2.4",
|
||||
"lodash": "4.17.10"
|
||||
"lodash": "4.17.11"
|
||||
},
|
||||
"dependencies": {
|
||||
"debug": {
|
||||
|
|
@ -1354,7 +1354,7 @@
|
|||
"requires": {
|
||||
"babel-runtime": "6.26.0",
|
||||
"esutils": "2.0.2",
|
||||
"lodash": "4.17.10",
|
||||
"lodash": "4.17.11",
|
||||
"to-fast-properties": "1.0.3"
|
||||
}
|
||||
},
|
||||
|
|
@ -3610,7 +3610,7 @@
|
|||
"cli-width": "2.2.0",
|
||||
"external-editor": "3.0.3",
|
||||
"figures": "2.0.0",
|
||||
"lodash": "4.17.10",
|
||||
"lodash": "4.17.11",
|
||||
"mute-stream": "0.0.7",
|
||||
"run-async": "2.3.0",
|
||||
"rxjs": "6.3.1",
|
||||
|
|
@ -3984,9 +3984,9 @@
|
|||
}
|
||||
},
|
||||
"lodash": {
|
||||
"version": "4.17.10",
|
||||
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.10.tgz",
|
||||
"integrity": "sha512-UejweD1pDoXu+AD825lWwp4ZGtSwgnpZxb3JDViD7StjQz+Nb/6l093lx4OQ0foGWNRoc19mWy7BzL+UAK2iVg=="
|
||||
"version": "4.17.11",
|
||||
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.11.tgz",
|
||||
"integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg=="
|
||||
},
|
||||
"lodash.camelcase": {
|
||||
"version": "4.3.0",
|
||||
|
|
@ -5281,7 +5281,7 @@
|
|||
"resolved": "https://registry.npmjs.org/react-youtube/-/react-youtube-7.7.0.tgz",
|
||||
"integrity": "sha512-ZHHG3x7y9P8oCldPx0t4z0jTK9GC4lBVzKnYcd8SHQe2x5mCUIxLNWXzR8+Oe7H2I4ACCB87lLF5WuU39PGuCw==",
|
||||
"requires": {
|
||||
"lodash": "4.17.10",
|
||||
"lodash": "4.17.11",
|
||||
"prop-types": "15.6.2",
|
||||
"youtube-player": "5.5.1"
|
||||
}
|
||||
|
|
@ -6465,7 +6465,7 @@
|
|||
"integrity": "sha512-TmSe1HZKeOPey3oy1Ov2iS3guIZjWvMT2BBJDzzT5jScHTjVC3mpjJofgueEzaEd6ibhxRDD6MIblDr8tzh8iQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"lodash": "4.17.10"
|
||||
"lodash": "4.17.11"
|
||||
}
|
||||
},
|
||||
"webpack-sources": {
|
||||
|
|
|
|||
|
|
@ -30,6 +30,7 @@
|
|||
"babel-preset-stage-0": "^6.3.13",
|
||||
"babel-register": "^6.18.0",
|
||||
"css-loader": "^0.28.7",
|
||||
"lodash": "^4.17.11",
|
||||
"react": "^16.4.2",
|
||||
"react-dom": "^16.4.2",
|
||||
"react-dropzone": "^5.0.1",
|
||||
|
|
|
|||
Loading…
Reference in a new issue