diff --git a/api/models.py b/api/models.py index bf43720..52a47a4 100644 --- a/api/models.py +++ b/api/models.py @@ -33,8 +33,8 @@ class Video(models.Model): else: raise TooLargeFile() - def create_comic(self): - keyframes = KeyFramesExtractor.get_keyframes(video=self) + def create_comic(self, frames_mode=0, rl_mode=0): + keyframes = KeyFramesExtractor.get_keyframes(video=self, frames_mode=frames_mode, rl_mode=rl_mode) stylized_keyframes = StyleTransfer.get_stylized_frames(frames=keyframes) comic_image = LayoutGenerator.get_layout(frames=stylized_keyframes) return comic_image diff --git a/api/serializers.py b/api/serializers.py index ac2ef99..7c956db 100644 --- a/api/serializers.py +++ b/api/serializers.py @@ -2,13 +2,12 @@ from django.conf import settings from rest_framework import serializers from .exceptions import FileExtensionError, TooLargeFile -from .models import Video -class VideoSerializer(serializers.ModelSerializer): - class Meta: - model = Video - fields = ("file", "timestamp") +class VideoSerializer(serializers.Serializer): + file = serializers.FileField() + frames_mode = serializers.IntegerField(min_value=0, max_value=1, default=settings.DEFAULT_FRAMES_SAMPLING_MODE) + rl_mode = serializers.IntegerField(min_value=0, max_value=1, default=settings.DEFAULT_RL_MODE) def validate(self, attrs): file = attrs.get("file") @@ -21,3 +20,5 @@ class VideoSerializer(serializers.ModelSerializer): class YouTubeDownloadSerializer(serializers.Serializer): url = serializers.URLField() + frames_mode = serializers.IntegerField(min_value=0, max_value=1, default=settings.DEFAULT_FRAMES_SAMPLING_MODE) + rl_mode = serializers.IntegerField(min_value=0, max_value=1, default=settings.DEFAULT_RL_MODE) diff --git a/api/views.py b/api/views.py index df9f051..03a9e8a 100644 --- a/api/views.py +++ b/api/views.py @@ -19,7 +19,10 @@ class Comixify(APIView): video_file = serializer.validated_data["file"] video = Video.objects.create(file=video_file) - comic_image = video.create_comic() + comic_image = video.create_comic( + frames_mode=serializer.validated_data["frames_mode"], + rl_mode=serializer.validated_data["rl_mode"] + ) comic = Comic.create_from_nparray(comic_image, video) response = { @@ -45,7 +48,10 @@ class ComixifyFromYoutube(APIView): video = Video() video.download_from_youtube(yt_url) video.save() - comic_image = video.create_comic() + comic_image = video.create_comic( + frames_mode=serializer.validated_data["frames_mode"], + rl_mode=serializer.validated_data["rl_mode"] + ) comic = Comic.create_from_nparray(comic_image, video) response = { diff --git a/frontend/client/App.js b/frontend/client/App.js index 85ec6ab..a5ee575 100644 --- a/frontend/client/App.js +++ b/frontend/client/App.js @@ -1,5 +1,6 @@ import React from "react"; import ReactDOM from "react-dom"; +import YouTube from 'react-youtube'; import { post } from "axios"; import Dropzone from "react-dropzone"; import { BarLoader } from "react-spinners"; @@ -18,27 +19,44 @@ class App extends React.Component { PROCESSING: 1, FINISHED: 2, UPLOAD_ERROR: 3, - DROP_ERROR: 4 + DROP_ERROR: 4, + SAMPLE_PROCESSING: 5 }; ytInput = React.createRef(); constructor(props) { super(props); this.state = { state: App.appStates.INITIAL, + videoId: null, drop_errors: [], - result_comics: null + result_comics: null, + framesMode: "0", + rlMode: "0" }; this.onVideoDrop = this.onVideoDrop.bind(this); + this.onModelChange = this.onModelChange.bind(this); this.handleResponse = this.handleResponse.bind(this); this.onYouTubeSubmit = this.onYouTubeSubmit.bind(this); - this.onVideoUploadProgress = this.onVideoUploadProgress.bind(this); + this.onSamplingChange = this.onSamplingChange.bind(this); } - onVideoUploadProgress(progressEvent) { + static onVideoUploadProgress(progressEvent) { let percentCompleted = Math.round( progressEvent.loaded * 100 / progressEvent.total ); console.log(percentCompleted); } + onModelChange(e) { + let value = e.currentTarget.value; + this.setState({ + rlMode: value + }) + } + onSamplingChange(e) { + let value = e.currentTarget.value; + this.setState({ + framesMode: value + }) + } handleResponse(res) { if (res.data["status_message"] === "ok") { this.setState({ @@ -52,11 +70,14 @@ class App extends React.Component { } } processVideo(video) { + let { framesMode, rlMode } = this.state let data = new FormData(); data.append("file", video); + data.set('frames_mode', parseInt(framesMode)); + data.set('rl_mode', parseInt(rlMode)); post(COMIXIFY_API, data, { headers: { "content-type": "multipart/form-data" }, - onUploadProgress: this.onVideoUploadProgress + onUploadProgress: App.onVideoUploadProgress }) .then(this.handleResponse) .catch(err => { @@ -80,10 +101,12 @@ class App extends React.Component { } this.processVideo(files[0]); } - onYouTubeSubmit() { - let ytLink = this.ytInput.current.value; - post(FROM_YOUTUBE_API, { - url: ytLink + submitYouTube(link) { + let { framesMode, rlMode } = this.state; + post(FROM_YOUTUBE_API, { + url: link, + frames_mode: parseInt(framesMode), + rl_mode: parseInt(rlMode) }) .then(this.handleResponse) .catch(err => { @@ -92,18 +115,34 @@ class App extends React.Component { state: App.appStates.UPLOAD_ERROR }); }); + } + onYouTubeSubmit() { + let ytLink = this.ytInput.current.value; + this.submitYouTube(ytLink); this.setState({ state: App.appStates.PROCESSING }); } + onSamplePlay(videoId) { + let link = "https://www.youtube.com/watch?v=" + videoId; + this.submitYouTube(link); + this.setState({ + videoId: videoId, + state: App.appStates.SAMPLE_PROCESSING + }); + } render() { - let { state, drop_errors, result_comics } = this.state; + let { state, drop_errors, result_comics, framesMode, rlMode, videoId } = this.state; let showUsage = [ App.appStates.INITIAL, App.appStates.UPLOAD_ERROR, App.appStates.DROP_ERROR, App.appStates.FINISHED ].includes(state); + let isProcessing = [ + App.appStates.SAMPLE_PROCESSING, + App.appStates.PROCESSING + ].includes(state); return (
{state === App.appStates.FINISHED && [ @@ -115,6 +154,53 @@ class App extends React.Component { {state === App.appStates.UPLOAD_ERROR && (

Server Error: Please try again later.

)} + {showUsage && ( +
+
Pipeline settings:
+
+ Frame sampling: + + + + +
+
+ Extraction model: + + + + +
+
+ )} {showUsage && ( Or use YouTube link: +
Or select one of sample videos:
+
+
+
Documentary
+ +
+
+
Sports
+ +
+
+
Music video
+ +
+
+
Politics
+ +
+
)} - {state === App.appStates.PROCESSING && ( + {state === App.appStates.SAMPLE_PROCESSING && ( + + )} + {isProcessing && ( { - const merge = require("webpack-merge"); - const UglifyJsPlugin = require("uglifyjs-webpack-plugin"); - const webpack = require("webpack"); let common = { entry: { @@ -35,7 +36,7 @@ module.exports = env => { } }; - if (env.production) { + if (env && env.production) { return merge(common, { plugins: [ new webpack.DefinePlugin({ diff --git a/frontend/static/frontend/css/app.css b/frontend/static/frontend/css/app.css index 4deb0b7..ea88537 100644 --- a/frontend/static/frontend/css/app.css +++ b/frontend/static/frontend/css/app.css @@ -61,7 +61,7 @@ img { background-color: #eee; } -.yt-label { +.yt-label, .yt-clips-label { margin: 10px 0 10px 20px; display: block; } @@ -111,6 +111,20 @@ button:focus { outline: 0; } +.youtube-clips { + display: flex; + justify-content: space-between; + flex-wrap: wrap; +} + +.youtube-clips > div { + +} + +.yt-clip-label { + +} + @media all and (max-width: 700px) { .wrap { margin-top: 0; diff --git a/frontend/static/frontend/js/app.client.js b/frontend/static/frontend/js/app.client.js index 7556ac5..6b71c76 100644 --- a/frontend/static/frontend/js/app.client.js +++ b/frontend/static/frontend/js/app.client.js @@ -1,9 +1,9 @@ -!function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=164)}([function(e,t,n){"use strict";e.exports=n(76)},function(e,t,n){e.exports=n(102)()},function(e,t,n){"use strict";n.r(t),function(e){n.d(t,"flush",function(){return i}),n.d(t,"hydrate",function(){return u}),n.d(t,"cx",function(){return l}),n.d(t,"merge",function(){return s}),n.d(t,"getRegisteredStyles",function(){return c}),n.d(t,"injectGlobal",function(){return f}),n.d(t,"keyframes",function(){return p}),n.d(t,"css",function(){return d}),n.d(t,"sheet",function(){return h}),n.d(t,"caches",function(){return m});var r=n(75),o=void 0!==e?e:{},a=Object(r.a)(o),i=a.flush,u=a.hydrate,l=a.cx,s=a.merge,c=a.getRegisteredStyles,f=a.injectGlobal,p=a.keyframes,d=a.css,h=a.sheet,m=a.caches}.call(this,n(56))},function(e,t,n){"use strict";t.__esModule=!0;var r=function(e){return e&&e.__esModule?e:{default:e}}(n(63));t.default=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!==(void 0===t?"undefined":(0,r.default)(t))&&"function"!=typeof t?e:t}},function(e,t,n){"use strict";n.r(t);var r=n(0),o=n.n(r),a=n(8),i=n.n(a),u=n(12),l=n.n(u),s=n(5),c=n.n(s),f=n(3),p=n.n(f),d=n(6),h=n.n(d);function m(){var e=this.constructor.getDerivedStateFromProps(this.props,this.state);null!==e&&void 0!==e&&this.setState(e)}function y(e){this.setState(function(t){var n=this.constructor.getDerivedStateFromProps(e,t);return null!==n&&void 0!==n?n:null}.bind(this))}function v(e,t){try{var n=this.props,r=this.state;this.props=e,this.state=t,this.__reactInternalSnapshotFlag=!0,this.__reactInternalSnapshot=this.getSnapshotBeforeUpdate(n,r)}finally{this.props=n,this.state=r}}function g(e){var t=e.prototype;if(!t||!t.isReactComponent)throw new Error("Can only polyfill class components");if("function"!=typeof e.getDerivedStateFromProps&&"function"!=typeof t.getSnapshotBeforeUpdate)return e;var n=null,r=null,o=null;if("function"==typeof t.componentWillMount?n="componentWillMount":"function"==typeof t.UNSAFE_componentWillMount&&(n="UNSAFE_componentWillMount"),"function"==typeof t.componentWillReceiveProps?r="componentWillReceiveProps":"function"==typeof t.UNSAFE_componentWillReceiveProps&&(r="UNSAFE_componentWillReceiveProps"),"function"==typeof t.componentWillUpdate?o="componentWillUpdate":"function"==typeof t.UNSAFE_componentWillUpdate&&(o="UNSAFE_componentWillUpdate"),null!==n||null!==r||null!==o){var a=e.displayName||e.name,i="function"==typeof e.getDerivedStateFromProps?"getDerivedStateFromProps()":"getSnapshotBeforeUpdate()";throw Error("Unsafe legacy lifecycles will not be called for components using new component APIs.\n\n"+a+" uses "+i+" but also contains the following legacy lifecycles:"+(null!==n?"\n "+n:"")+(null!==r?"\n "+r:"")+(null!==o?"\n "+o:"")+"\n\nThe above lifecycles should be removed. Learn more about this warning here:\nhttps://fb.me/react-async-component-lifecycle-hooks")}if("function"==typeof e.getDerivedStateFromProps&&(t.componentWillMount=m,t.componentWillReceiveProps=y),"function"==typeof t.getSnapshotBeforeUpdate){if("function"!=typeof t.componentDidUpdate)throw new Error("Cannot polyfill getSnapshotBeforeUpdate() for components that do not define componentDidUpdate() on the prototype");t.componentWillUpdate=v;var u=t.componentDidUpdate;t.componentDidUpdate=function(e,t,n){var r=this.__reactInternalSnapshotFlag?this.__reactInternalSnapshot:n;u.call(this,e,t,r)}}return e}m.__suppressDeprecationWarning=!0,y.__suppressDeprecationWarning=!0,v.__suppressDeprecationWarning=!0;var b=n(45),w=n.n(b),x=n(28),k=n.n(x),_=n(73),E=n.n(_),S=n(46),C=n(29);n.d(t,"mapProps",function(){return j}),n.d(t,"withProps",function(){return U}),n.d(t,"withPropsOnChange",function(){return R}),n.d(t,"withHandlers",function(){return D}),n.d(t,"defaultProps",function(){return F}),n.d(t,"renameProp",function(){return I}),n.d(t,"renameProps",function(){return B}),n.d(t,"flattenProp",function(){return W}),n.d(t,"withState",function(){return V}),n.d(t,"withStateHandlers",function(){return H}),n.d(t,"withReducer",function(){return q}),n.d(t,"branch",function(){return X}),n.d(t,"renderComponent",function(){return G}),n.d(t,"renderNothing",function(){return Q}),n.d(t,"shouldUpdate",function(){return Z}),n.d(t,"pure",function(){return J}),n.d(t,"onlyUpdateForKeys",function(){return ee}),n.d(t,"onlyUpdateForPropTypes",function(){return te}),n.d(t,"withContext",function(){return ne}),n.d(t,"getContext",function(){return re}),n.d(t,"lifecycle",function(){return oe}),n.d(t,"toClass",function(){return ie}),n.d(t,"withRenderProps",function(){return ue}),n.d(t,"setStatic",function(){return O}),n.d(t,"setPropTypes",function(){return le}),n.d(t,"setDisplayName",function(){return P}),n.d(t,"compose",function(){return se}),n.d(t,"getDisplayName",function(){return T}),n.d(t,"wrapDisplayName",function(){return N}),n.d(t,"isClassComponent",function(){return ae}),n.d(t,"createSink",function(){return ce}),n.d(t,"componentFromProp",function(){return fe}),n.d(t,"nest",function(){return pe}),n.d(t,"hoistStatics",function(){return de}),n.d(t,"componentFromStream",function(){return ge}),n.d(t,"componentFromStreamWithConfig",function(){return ve}),n.d(t,"mapPropsStream",function(){return xe}),n.d(t,"mapPropsStreamWithConfig",function(){return we}),n.d(t,"createEventHandler",function(){return _e}),n.d(t,"createEventHandlerWithConfig",function(){return ke}),n.d(t,"setObservableConfig",function(){return me}),n.d(t,"shallowEqual",function(){return l.a});var O=function(e,t){return function(n){return n[e]=t,n}},P=function(e){return O("displayName",e)},T=function(e){return"string"==typeof e?e:e?e.displayName||e.name||"Component":void 0},N=function(e,t){return t+"("+T(e)+")"},j=function(e){return function(t){var n=Object(r.createFactory)(t);return function(t){return n(e(t))}}},U=function(e){return j(function(t){return i()({},t,"function"==typeof e?e(t):e)})},z=function(e,t){for(var n={},r=0;r1?r-1:0),a=1;a1&&void 0!==arguments[1]?arguments[1]:$;return t.setState(function(t){var r=t.stateValue;return{stateValue:n(r,e)}},function(){return r(t.state.stateValue)})},o=e,p()(t,o)}return h()(a,r),a.prototype.initializeStateValue=function(){return void 0!==o?"function"==typeof o?o(this.props):o:n(void 0,{type:"@@recompose/INIT"})},a.prototype.render=function(){var n;return u(i()({},this.props,((n={})[e]=this.state.stateValue,n[t]=this.dispatch,n)))},a}(r.Component)}},K=function(e){return e},X=function(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:K;return function(o){var a=void 0,i=void 0;return function(u){return e(u)?(a=a||Object(r.createFactory)(t(o)))(u):(i=i||Object(r.createFactory)(n(o)))(u)}}},G=function(e){return function(t){var n=Object(r.createFactory)(e);return function(e){return n(e)}}},Y=function(e){function t(){return c()(this,t),p()(this,e.apply(this,arguments))}return h()(t,e),t.prototype.render=function(){return null},t}(r.Component),Q=function(e){return Y},Z=function(e){return function(t){var n=Object(r.createFactory)(t);return function(t){function r(){return c()(this,r),p()(this,t.apply(this,arguments))}return h()(r,t),r.prototype.shouldComponentUpdate=function(t){return e(this.props,t)},r.prototype.render=function(){return n(this.props)},r}(r.Component)}},J=function(e){return Z(function(e,t){return!l()(e,t)})(e)},ee=function(e){return Z(function(t,n){return!l()(z(n,e),z(t,e))})},te=function(e){var t=e.propTypes,n=k()(t||{});return ee(n)(e)},ne=function(e,t){return function(n){var o=Object(r.createFactory)(n),a=function(e){function n(){var r,o,a;c()(this,n);for(var i=arguments.length,u=Array(i),l=0;l=200&&e<300},headers:{common:{Accept:"application/json, text/plain, */*"}}};r.forEach(["delete","get","head"],function(e){u.headers[e]={}}),r.forEach(["post","put","patch"],function(e){u.headers[e]=r.merge(a)}),e.exports=u}).call(this,n(86))},function(e,t,n){var r=n(16);e.exports=function(e,t){if(!r(e))return e;var n,o;if(t&&"function"==typeof(n=e.toString)&&!r(o=n.call(e)))return o;if("function"==typeof(n=e.valueOf)&&!r(o=n.call(e)))return o;if(!t&&"function"==typeof(n=e.toString)&&!r(o=n.call(e)))return o;throw TypeError("Can't convert object to primitive value")}},function(e,t){e.exports=function(e){if(void 0==e)throw TypeError("Can't call method on "+e);return e}},function(e,t){var n=Math.ceil,r=Math.floor;e.exports=function(e){return isNaN(e=+e)?0:(e>0?r:n)(e)}},function(e,t,n){var r=n(35)("keys"),o=n(25);e.exports=function(e){return r[e]||(r[e]=o(e))}},function(e,t,n){var r=n(9),o=n(10),a=o["__core-js_shared__"]||(o["__core-js_shared__"]={});(e.exports=function(e,t){return a[e]||(a[e]=void 0!==t?t:{})})("versions",[]).push({version:r.version,mode:n(24)?"pure":"global",copyright:"© 2018 Denis Pushkarev (zloirock.ru)"})},function(e,t){e.exports="constructor,hasOwnProperty,isPrototypeOf,propertyIsEnumerable,toLocaleString,toString,valueOf".split(",")},function(e,t){t.f=Object.getOwnPropertySymbols},function(e,t,n){var r=n(32);e.exports=function(e){return Object(r(e))}},function(e,t){e.exports={}},function(e,t,n){var r=n(21),o=n(118),a=n(36),i=n(34)("IE_PROTO"),u=function(){},l=function(){var e,t=n(59)("iframe"),r=a.length;for(t.style.display="none",n(119).appendChild(t),t.src="javascript:",(e=t.contentWindow.document).open(),e.write("