diff --git a/.gitignore b/.gitignore
index ed2b11b..daa37ca 100644
--- a/.gitignore
+++ b/.gitignore
@@ -108,3 +108,19 @@ data
.idea
media
+# JS Stuff
+node_modules/
+.npm
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
diff --git a/frontend/__init__.py b/frontend/__init__.py
new file mode 100644
index 0000000..e69de29
diff --git a/frontend/admin.py b/frontend/admin.py
new file mode 100644
index 0000000..8c38f3f
--- /dev/null
+++ b/frontend/admin.py
@@ -0,0 +1,3 @@
+from django.contrib import admin
+
+# Register your models here.
diff --git a/frontend/apps.py b/frontend/apps.py
new file mode 100644
index 0000000..33ae5ca
--- /dev/null
+++ b/frontend/apps.py
@@ -0,0 +1,5 @@
+from django.apps import AppConfig
+
+
+class FrontendConfig(AppConfig):
+ name = 'frontend'
diff --git a/frontend/client/App.js b/frontend/client/App.js
new file mode 100644
index 0000000..6caa280
--- /dev/null
+++ b/frontend/client/App.js
@@ -0,0 +1,125 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import { post } from "axios";
+import Dropzone from "react-dropzone";
+import { BarLoader } from "react-spinners";
+import { css } from "react-emotion";
+
+const COMIXIFY_API = "/comixify/";
+const MAX_FILE_SIZE = 50000000;
+const PERMITTED_VIDEO_EXTENSIONS = "video/*";
+
+class App extends React.Component {
+ static appStates = {
+ INITIAL: 0,
+ PROCESSING: 1,
+ FINISHED: 2,
+ UPLOAD_ERROR: 3,
+ DROP_ERROR: 4
+ };
+ constructor(props) {
+ super(props);
+ this.state = {
+ state: App.appStates.INITIAL,
+ drop_errors: [],
+ result_comics: null
+ };
+ this.onVideoDrop = this.onVideoDrop.bind(this);
+ this.onVideoUploadProgress = this.onVideoUploadProgress.bind(this);
+ }
+ onVideoUploadProgress(progressEvent) {
+ let percentCompleted = Math.round(
+ progressEvent.loaded * 100 / progressEvent.total
+ );
+ console.log(percentCompleted);
+ }
+ processVideo(video) {
+ let data = new FormData();
+ data.append("file", video);
+ post(COMIXIFY_API, data, {
+ headers: { "content-type": "multipart/form-data" },
+ onUploadProgress: this.onVideoUploadProgress
+ })
+ .then(res => {
+ if (res.data["status_message"] === "ok") {
+ this.setState({
+ state: App.appStates.FINISHED,
+ result_comics: res.data["comic"]
+ });
+ } else {
+ this.setState({
+ state: App.appStates.UPLOAD_ERROR
+ });
+ }
+ })
+ .catch(err => {
+ console.error(err);
+ this.setState({
+ state: App.appStates.UPLOAD_ERROR
+ });
+ });
+ this.setState({
+ state: App.appStates.PROCESSING
+ });
+ }
+ onVideoDrop(files, rejected) {
+ if (rejected.length !== 0) {
+ console.error(rejected);
+ this.setState({
+ drop_errors: ["Maximum size for single video is 50MB"],
+ stata: App.appStates.DROP_ERROR
+ });
+ return;
+ }
+ this.processVideo(files[0]);
+ }
+
+ render() {
+ let { state, drop_errors, result_comics } = this.state;
+ let showDropzone = [
+ App.appStates.INITIAL,
+ App.appStates.UPLOAD_ERROR,
+ App.appStates.DROP_ERROR,
+ App.appStates.FINISHED
+ ].includes(state);
+ return (
+
+
Comixify
+ {state === App.appStates.FINISHED && [
+

,
+
Go again:
+ ]}
+ {state === App.appStates.DROP_ERROR &&
+ drop_errors.map((o, i) =>
{o}
)}
+ {state === App.appStates.UPLOAD_ERROR && (
+
Server Error: Please try again later.
+ )}
+ {showDropzone && (
+
+ Drop files here, or click to select manually
+
+ )}
+ {state === App.appStates.PROCESSING && (
+
+ )}
+
+ );
+ }
+}
+
+ReactDOM.render(, document.getElementById("root"));
diff --git a/frontend/client/webpack.config.js b/frontend/client/webpack.config.js
new file mode 100644
index 0000000..891ef09
--- /dev/null
+++ b/frontend/client/webpack.config.js
@@ -0,0 +1,51 @@
+const webpack = require("webpack");
+const merge = require("webpack-merge");
+const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
+
+let common = {
+ entry: {
+ app: __dirname + "/App.js"
+ },
+ output: {
+ path: __dirname + "/../static/frontend/js",
+ filename: "[name].client.js"
+ },
+ externals: {
+ cheerio: "window",
+ "react/lib/ExecutionEnvironment": true,
+ "react/lib/ReactContext": true
+ },
+ module: {
+ rules: [
+ {
+ test: /\.jsx?$/,
+ exclude: /(node_modules|bower_components)/,
+ loader: "babel-loader",
+ query: {
+ presets: ["react", "stage-0", "flow"],
+ plugins: ["emotion"]
+ }
+ },
+ {
+ test: /\.css$/,
+ use: ["style-loader", "css-loader"]
+ }
+ ]
+ }
+};
+
+if (process.env.NODE_ENV === "production") {
+ module.exports = merge(common, {
+ plugins: [
+ new webpack.DefinePlugin({
+ "process.env.NODE_ENV": JSON.stringify("production")
+ }),
+ new UglifyJsPlugin()
+ ],
+ mode: "production"
+ });
+} else {
+ module.exports = merge(common, {
+ mode: "development"
+ });
+}
diff --git a/frontend/migrations/__init__.py b/frontend/migrations/__init__.py
new file mode 100644
index 0000000..e69de29
diff --git a/frontend/models.py b/frontend/models.py
new file mode 100644
index 0000000..71a8362
--- /dev/null
+++ b/frontend/models.py
@@ -0,0 +1,3 @@
+from django.db import models
+
+# Create your models here.
diff --git a/frontend/static/frontend/css/app.css b/frontend/static/frontend/css/app.css
new file mode 100644
index 0000000..8f440de
--- /dev/null
+++ b/frontend/static/frontend/css/app.css
@@ -0,0 +1,58 @@
+html,
+body {
+ margin: 0;
+ padding: 0;
+}
+
+body {
+ color: #222;
+ background: #eee;
+}
+
+.wrap {
+ padding: 1rem;
+ margin: 2rem auto 0 auto;
+ max-width: 700px;
+ background: white;
+ box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
+ border: 1px solid rgba(0, 0, 0, 0.09);
+ border-radius: 3px;
+ box-sizing: border-box;
+}
+
+img {
+ width: 100%;
+}
+
+.bar-loader {
+ margin: 0 auto;
+}
+
+.dropzone {
+ padding: 1rem;
+ height: 10rem;
+ border: 2px dashed gray;
+}
+
+.dropzone--rejected {
+ border-style: solid;
+ border-color: #c66;
+ background-color: #eee;
+}
+
+.dropzone--disabled {
+ opacity: 0.5;
+}
+
+.dropzone--accepted {
+ border-style: solid;
+ border-color: #6c6;
+ background-color: #eee;
+}
+
+@media all and (max-width: 700px) {
+ .wrap {
+ margin-top: 0;
+ border-radius: 0;
+ }
+}
diff --git a/frontend/static/frontend/js/app.client.js b/frontend/static/frontend/js/app.client.js
new file mode 100644
index 0000000..dd16f1c
--- /dev/null
+++ b/frontend/static/frontend/js/app.client.js
@@ -0,0 +1,28 @@
+!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(55))},function(e,t,n){"use strict";t.__esModule=!0;var r=function(e){return e&&e.__esModule?e:{default:e}}(n(62));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(44),w=n.n(b),x=n(28),k=n.n(x),_=n(73),E=n.n(_),C=n(45),S=n(29);n.d(t,"mapProps",function(){return j}),n.d(t,"withProps",function(){return U}),n.d(t,"withPropsOnChange",function(){return A}),n.d(t,"withHandlers",function(){return D}),n.d(t,"defaultProps",function(){return F}),n.d(t,"renameProp",function(){return L}),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(58)("iframe"),r=a.length;for(t.style.display="none",n(119).appendChild(t),t.src="javascript:",(e=t.contentWindow.document).open(),e.write("
+
+