mirror of
https://github.com/maciej3031/comixify.git
synced 2026-03-11 08:54:35 +00:00
Merge pull request #2 from maciej3031/frontend
Add placeholder description, API description, acknowledgements
This commit is contained in:
Maciej Pęśko
GitHub
commit
f123537da4
6 changed files with 97 additions and 15 deletions
|
|
@ -5,9 +5,11 @@ 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/*";
|
||||
import {
|
||||
COMIXIFY_API,
|
||||
MAX_FILE_SIZE,
|
||||
PERMITTED_VIDEO_EXTENSIONS
|
||||
} from "./constants";
|
||||
|
||||
class App extends React.Component {
|
||||
static appStates = {
|
||||
|
|
@ -83,8 +85,7 @@ class App extends React.Component {
|
|||
App.appStates.FINISHED
|
||||
].includes(state);
|
||||
return (
|
||||
<div className="wrap">
|
||||
<h1>Comixify</h1>
|
||||
<div>
|
||||
{state === App.appStates.FINISHED && [
|
||||
<img key="1" src={result_comics} />,
|
||||
<p key="2">Go again:</p>
|
||||
|
|
@ -122,4 +123,4 @@ class App extends React.Component {
|
|||
}
|
||||
}
|
||||
|
||||
ReactDOM.render(<App />, document.getElementById("root"));
|
||||
ReactDOM.render(<App />, document.getElementById("demo"));
|
||||
|
|
|
|||
3
frontend/client/constants.js
Normal file
3
frontend/client/constants.js
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
export const COMIXIFY_API = "/comixify/";
|
||||
export const MAX_FILE_SIZE = 50000000;
|
||||
export const PERMITTED_VIDEO_EXTENSIONS = "video/*";
|
||||
|
|
@ -10,14 +10,25 @@ body {
|
|||
}
|
||||
|
||||
.wrap {
|
||||
padding: 1rem;
|
||||
margin: 2rem auto 0 auto;
|
||||
max-width: 700px;
|
||||
background: white;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.section {
|
||||
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;
|
||||
background: white;
|
||||
margin-bottom: 1rem;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.authors {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
max-width: 500px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
img {
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -9,7 +9,76 @@
|
|||
</head>
|
||||
<body>
|
||||
|
||||
<div id="root"></div>
|
||||
|
||||
<div class="wrap">
|
||||
<div class="section">
|
||||
<h1>Comixify</h1>
|
||||
<div class="authors">
|
||||
<div>
|
||||
Maciej Pęśko
|
||||
</div>
|
||||
<div>
|
||||
Adam Svystun
|
||||
</div>
|
||||
<div>
|
||||
Paweł Andruszkiewicz
|
||||
</div>
|
||||
<div>
|
||||
Tomasz Trzciński
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h3>Abstract</h3>
|
||||
<div>
|
||||
Many recent works in the field of Neural Style Transfer showed that producing an image in the style of another image is possible. There are various possible applications to use such techniques like paintings style transfer or photo-realistic style transfer. In our project, we present end-to-end solution that transforms input video into a comic in just a few seconds. Our work consists of two main parts: keyframes extraction and comic style transfer. In the near future we would like to introduce next two parts: Comic Grid Layout Generation and Speech Extraction.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h3>Demo</h3>
|
||||
<div id="demo"></div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h3>API</h3>
|
||||
<div>
|
||||
<h4>Request:</h4>
|
||||
<p>
|
||||
<i>Path:</i>
|
||||
<a href="http://comixify.ii.pw.edu.pl/comixify/">http://comixify.ii.pw.edu.pl/comixify/</a>
|
||||
</p>
|
||||
<p><i>Method:</i> <strong>POST</strong></p>
|
||||
<p><i>Data:</i>
|
||||
<br>
|
||||
<code>
|
||||
{
|
||||
<br>
|
||||
    file: video/mp4
|
||||
<br>
|
||||
}
|
||||
</code>
|
||||
</p>
|
||||
|
||||
<i>* Max size of video is 50 MB</i>
|
||||
|
||||
<h4>Respose:</h4>
|
||||
<code>
|
||||
{
|
||||
<br>
|
||||
    status: string,<br>
|
||||
    comic: string
|
||||
<br>
|
||||
}
|
||||
</code>
|
||||
<p>comic - url to result comics</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h3>Acknowledgements</h3>
|
||||
<div>
|
||||
We would like to thank Google for granting us free Google Cloud Platform credits that enabled us to develop our project.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript" src="{% static 'frontend/js/app.client.js' %}"></script>
|
||||
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -6,10 +6,8 @@
|
|||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1",
|
||||
"build": "webpack --config ./frontend/client/webpack.config.js",
|
||||
"build:watch":
|
||||
"webpack --config ./frontend/client/webpack.config.js --watch",
|
||||
"build:prod":
|
||||
"NODE_ENV=production webpack --config ./frontend/client/webpack.config.js"
|
||||
"build:watch": "webpack --config ./frontend/client/webpack.config.js --watch",
|
||||
"build:prod": "NODE_ENV=production webpack --config ./frontend/client/webpack.config.js"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
|
|
|
|||
Loading…
Reference in a new issue