├── .github
    └── FUNDING.yml
├── .gitattributes
├── images
    ├── turtle.jpg
    └── kadinsky.jpg
├── LICENSE
├── README.md
├── js
    ├── jquery.keyframes.min.js
    └── style-transfer.js
├── style
    └── style-transfer.css
└── index.html


/.github/FUNDING.yml:
--------------------------------------------------------------------------------
1 | ko_fi: bensonruan
2 | 


--------------------------------------------------------------------------------
/.gitattributes:
--------------------------------------------------------------------------------
1 | # Auto detect text files and perform LF normalization
2 | * text=auto
3 | 


--------------------------------------------------------------------------------
/images/turtle.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bensonruan/Neural-Style-Transfer/HEAD/images/turtle.jpg


--------------------------------------------------------------------------------
/images/kadinsky.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bensonruan/Neural-Style-Transfer/HEAD/images/kadinsky.jpg


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2019 Benson Ruan
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Artistic Neural Style Transfer
 2 | Artistic neural style transfer with magenta.js
 3 | 
 4 | Artistic neural style transfer is an optimization technique used to take two images—a content image and a style reference image (such as an artwork by a famous painter)—and blend them together so the output image looks like the content image, but "painted" in the style of the style reference image.
 5 | 
 6 | ## Live Demo
 7 | **[https://bensonruan.com/when-ai-meets-art-neural-style-transfer-with-magenta-js/](https://bensonruan.com/when-ai-meets-art-neural-style-transfer-with-magenta-js/)**
 8 | 
 9 | ![style-transfer](https://bensonruan.com/wp-content/uploads/2019/09/art_style_transfer.jpg)
10 | 
11 | 
12 | ## Installing
13 | Clone this repository to your local computer
14 | ``` bash
15 | git https://github.com/bensonruan/Neural-Style-Transfer.git
16 | ```
17 | Point your localhost to the cloned root directory
18 | 
19 | Browse to http://localhost/index.html 
20 | 
21 | 
22 | ## Library
23 | * [jquery](https://code.jquery.com/jquery-3.3.1.min.js) - JQuery
24 | * [jQuery.Keyframes](https://github.com/Keyframes/jQuery.Keyframes) - This library allows dynamic generation of CSS keyframes with callback events and other niceness.
25 | * [magenta.js](https://github.com/tensorflow/magenta-js/tree/master/image) - JavaScript implementation of Magenta's image models uses TensorFlow.js for GPU-accelerated inference
26 | 
27 | ## Support me 
28 | [![ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/W7W6METMY)
29 | 


--------------------------------------------------------------------------------
/js/jquery.keyframes.min.js:
--------------------------------------------------------------------------------
1 | !function a(o,u,s){function f(t,e){if(!u[t]){if(!o[t]){var n="function"==typeof require&&require;if(!e&&n)return n(t,!0);if(l)return l(t,!0);var r=new Error("Cannot find module '"+t+"'");throw r.code="MODULE_NOT_FOUND",r}var i=u[t]={exports:{}};o[t][0].call(i.exports,function(e){return f(o[t][1][e]||e)},i,i.exports,a,o,u,s)}return u[t].exports}for(var l="function"==typeof require&&require,e=0;e<s.length;e++)f(s[e]);return f}({1:[function(e,t,n){"use strict";var r,i,a,o=(r=e("@keyframes/core"))&&r.__esModule?r:{default:r};i=jQuery,a=function(e,n){e.each(function(e,t){t.Keyframes||(t.Keyframes=new o.default(t)),n(t.Keyframes)})},i.keyframe={isSupported:o.default.isSupported,generate:o.default.generate,generateCSS:o.default.generateCSS,define:o.default.define},i.fn.resetKeyframe=function(t){a(this,function(e){return e.reset(t)})},i.fn.pauseKeyframe=function(){a(this,function(e){return e.pause()})},i.fn.resumeKeyframe=function(){a(this,function(e){return e.resume()})},i.fn.playKeyframe=function(t,n){a(this,function(e){return e.play(t,n)})}},{"@keyframes/core":2}],2:[function(e,t,n){"use strict";function i(){return(i=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function r(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}Object.defineProperty(n,"__esModule",{value:!0}),n.default=void 0;var a=function(){function a(e){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,a),this.elem=e}var e,t,n;return e=a,n=[{key:"playCSS",value:function(e){var t=function(e){var t=i({},{duration:"0s",timingFunction:"ease",delay:"0s",iterationCount:1,direction:"normal",fillMode:"forwards"},e);return[t.name,t.duration,t.timingFunction,t.delay,t.iterationCount,t.direction,t.fillMode].join(" ")};if(e.constructor!==Array)return"string"==typeof e?e:t(e);for(var n=[],r=0;r<e.length;r+=1)n.push("string"==typeof e[r]?e[r]:t(e[r]));return n.join(", ")}},{key:"generateCSS",value:function(e){var t="@keyframes ".concat(e.name," {");for(var n in e)if("name"!==n&&"media"!==n&&"complete"!==n){for(var r in t+="".concat(n," {"),e[n])t+="".concat(r,":").concat(e[n][r],";");t+="}"}return t+="}",e.media&&(t="@media ".concat(e.media,"{").concat(t,"}")),t}},{key:"generate",value:function(e){var t=this.generateCSS(e),n=a.rules.indexOf(e.name);-1<n&&(a.sheet.deleteRule(n),delete a.rules[n]);var r=a.sheet.insertRule(t,0);a.rules[r]=e.name}},{key:"define",value:function(e){if(e.length)for(var t=0;t<e.length;t+=1)this.generate(e[t]);else this.generate(e)}},{key:"defineCSS",value:function(e){if(e.length){for(var t="",n=0;n<e.length;n+=1)t+=this.generateCSS(e[n]);return t}return this.generateCSS(e)}},{key:"plugin",value:function(e){if(e.constructor===Array)for(var t=0;t<e.length;t+=1)e[t](a);else e(a)}}],(t=[{key:"isSupported",value:function(){return void 0!==document.body.style.animationName}},{key:"reset",value:function(e){this.removeEvents(),this.elem.style.animationPlayState="running",this.elem.style.animation="none",e&&requestAnimationFrame(e)}},{key:"pause",value:function(){this.elem.style.animationPlayState="paused"}},{key:"resume",value:function(){this.elem.style.animationPlayState="running"}},{key:"play",value:function(e,t){var r=this;if(this.elem.style.animationName===e.name)return this.reset(function(){return r.play(e,t)}),this;var n=a.playCSS(e),i=function(e,t){var n="".concat(e,"Listener");r.elem.removeEventListener(e,r[n]),r[n]=t,r.elem.addEventListener(e,r[n])};return this.elem.style.animationPlayState="running",this.elem.style.animation=n,this.frameOptions=e,i("animationiteration",t||e.complete),i("animationend",t||e.complete),this}},{key:"removeEvents",value:function(){this.elem.removeEventListener("animationiteration",this.animationiterationListener),this.elem.removeEventListener("animationend",this.animationendListener)}}])&&r(e.prototype,t),n&&r(e,n),a}();if("undefined"!=typeof document){var o=document.createElement("style");o.setAttribute("id","keyframesjs-stylesheet"),document.head.appendChild(o),a.sheet=o.sheet,a.rules=[]}var u=a;n.default=u},{}]},{},[1]);
2 | 


--------------------------------------------------------------------------------
/js/style-transfer.js:
--------------------------------------------------------------------------------
  1 | const model = new mi.ArbitraryStyleTransferNetwork();
  2 | const canvas = document.getElementById('stylized');
  3 | const ctx = canvas.getContext('2d');
  4 | const contentImg = document.getElementById('contentImg');
  5 | const styleImg = document.getElementById('styleImg');
  6 | let contentHeight;
  7 | let styleHeight;
  8 | 
  9 | $( document ).ready(function() {
 10 | 	var inputs = document.querySelectorAll( '.inputfile' );
 11 | 	Array.prototype.forEach.call( inputs, function( input )
 12 | 	{
 13 | 		var label	 = input.nextElementSibling,
 14 | 			labelVal = label.innerHTML;
 15 | 
 16 | 		input.addEventListener( 'change', function( e )
 17 | 		{
 18 | 			var fileName = '';
 19 | 			if( this.files && this.files.length > 1 )
 20 | 				fileName = ( this.getAttribute( 'data-multiple-caption' ) || '' ).replace( '{count}', this.files.length );
 21 | 			else
 22 | 				fileName = e.target.value.split( '\\' ).pop();
 23 | 
 24 | 			if( fileName ){
 25 | 				label.querySelector( 'span' ).innerHTML = fileName;
 26 |                 if(this.attributes['target'].value=='content'){
 27 |                     loadImage(e, contentImg);
 28 |                 }else if(this.attributes['target'].value=='style'){
 29 |                     loadImage(e,styleImg);
 30 |                 }				
 31 | 			}
 32 | 			else{
 33 | 				label.innerHTML = labelVal;
 34 | 			}
 35 | 		});
 36 | 
 37 | 		// Firefox bug fix
 38 | 		input.addEventListener( 'focus', function(){ input.classList.add( 'has-focus' ); });
 39 | 		input.addEventListener( 'blur', function(){ input.classList.remove( 'has-focus' ); });
 40 |     });
 41 | });
 42 | 
 43 | $('#contentImg').on('load', function () {
 44 |     contentHeight = $(this).height();
 45 |     $('.canvasContainer').height(contentHeight);
 46 | }).each(function() {
 47 |      if (this.complete) $(this).trigger('load');
 48 | });
 49 | 
 50 | $('#styleImg').on('load', function () {
 51 |     styleHeight = $(this).height();
 52 | }).each(function() {
 53 |      if (this.complete) $(this).trigger('load');
 54 | });
 55 | 
 56 | $(".btn-transfer").click(function () {
 57 |   startTransfering();
 58 |   model.initialize().then(() => {
 59 |     stylize();
 60 |   });
 61 | });
 62 | 
 63 | async function clearCanvas() {
 64 |   // Don't block painting until we've reset the state.
 65 |   await mi.tf.nextFrame();
 66 |   ctx.clearRect(0, 0, canvas.width, canvas.height);
 67 |   await mi.tf.nextFrame();
 68 | }
 69 |   
 70 | async function stylize() {
 71 |   await clearCanvas();
 72 |   
 73 |   // Resize the canvas to be the same size as the source image.
 74 |   canvas.width = contentImg.width;
 75 |   canvas.height = contentImg.height;
 76 |   
 77 |   // This does all the work!
 78 |   model.stylize(contentImg, styleImg).then((imageData) => {
 79 |     finishTransfering();
 80 |     ctx.putImageData(imageData, 0, 0);
 81 |   });
 82 | }
 83 | 
 84 | function loadImage(event, imgElement) {
 85 |   const reader = new FileReader();
 86 |   reader.onload = (e) => {
 87 |     imgElement.src = e.target.result;
 88 |   };
 89 |   reader.readAsDataURL(event.target.files[0]);
 90 | }
 91 | 
 92 | function startTransfering() {
 93 |     $('.imageContainer').addClass('scanning');
 94 |     playScan();
 95 |     $('#transfering').removeClass('d-none');
 96 |     $('#stylized').addClass('d-none');
 97 | }
 98 | 
 99 | function finishTransfering() {
100 |     $('.imageContainer').removeClass('scanning');
101 |     $('#transfering').addClass('d-none');
102 |     $('#stylized').removeClass('d-none');
103 | }
104 | 
105 | function playScan(){
106 |     $.keyframe.define([{
107 |         name: 'scan-content',
108 |         '0%': {'top': '0px'},
109 |         '100%': {'top': contentHeight-15}
110 |     }]);
111 |     $.keyframe.define([{
112 |         name: 'scan-style',
113 |         '0%': {'top': styleHeight-15},
114 |         '100%': {'top': '0px'}
115 |     }]);
116 | 
117 |     $('.scan-content').resetKeyframe(function() {
118 |         $(".scan-content").playKeyframe({
119 |             name: 'scan-content', 
120 |             duration: '3s', 
121 |             timingFunction: 'linear', 
122 |             delay: '0s', 
123 |             iterationCount: 'infinite', 
124 |             direction: 'alternate-reverse'
125 |         });
126 |     });
127 | 
128 |     $('.scan-style').resetKeyframe(function() {
129 |         $(".scan-style").playKeyframe({
130 |             name: 'scan-style', 
131 |             duration: '3s', 
132 |             timingFunction: 'linear', 
133 |             delay: '0s', 
134 |             iterationCount: 'infinite', 
135 |             direction: 'alternate-reverse'
136 |         });
137 |     });
138 | }


--------------------------------------------------------------------------------
/style/style-transfer.css:
--------------------------------------------------------------------------------
  1 |   .scanning{
  2 |     margin:auto;
  3 |     position:relative;
  4 |     width:100%;
  5 |   }
  6 |   .scanning .screen
  7 |   {
  8 |     margin:auto;
  9 |     width:100%;
 10 |   }
 11 |   .scanning em:before,  .scanning em:after, .scanning .screen:before,  .scanning .screen:after {
 12 |     border-color: rgba(0, 0, 0, 0.8);
 13 |     content: "";
 14 |     position: absolute;
 15 |     width: 19px;
 16 |     height: 16px;
 17 |     border-style: solid;
 18 |     border-width: 0px;
 19 |     z-index: 9999;
 20 |   }
 21 |   .scanning .screen:before {
 22 |     left: 0;
 23 |     top: 0;
 24 |     border-left-width: 3px;
 25 |     border-top-width: 3px;
 26 |   }
 27 |   .scanning .screen:after {
 28 |     right: 0;
 29 |     top: 0;
 30 |     border-right-width: 3px;
 31 |     border-top-width: 3px;
 32 |   }
 33 |   .scanning em:before {
 34 |     left: 0;
 35 |     bottom: 0;
 36 |     border-left-width: 3px;
 37 |     border-bottom-width: 3px;
 38 |   }
 39 |   .scanning em:after {
 40 |     right: 0;
 41 |     bottom: 0;
 42 |     border-right-width: 3px;
 43 |     border-bottom-width: 3px;
 44 |   }
 45 |   
 46 |   .scanning .scan
 47 |   {
 48 |     width: 100%;
 49 |     height: 15px;
 50 |     background-color: rgba(20, 206, 97, 0.5);
 51 |     position:absolute;
 52 |     z-index:9999;
 53 |     box-shadow:0px 0px 30px rgba(255,204,102,.5);
 54 |     top: 0;
 55 |   }
 56 | 
 57 | .inputfile {
 58 |     width: 0.1px;
 59 |     height: 0.1px;
 60 |     opacity: 0;
 61 |     overflow: hidden;
 62 |     position: absolute;
 63 |     z-index: -1;
 64 | }
 65 | 
 66 | .inputfile + label {
 67 |     width: 100%;
 68 |     font-size: 1.25rem;
 69 |     /* 20px */
 70 |     font-weight: 700;
 71 |     text-overflow: ellipsis;
 72 |     white-space: nowrap;
 73 |     cursor: pointer;
 74 |     display: inline-block;
 75 |     overflow: hidden;
 76 |     padding: 0.625rem 1.25rem;
 77 |     text-align: center;
 78 |     margin: 0;
 79 |     /* 10px 20px */
 80 |   }
 81 |   
 82 |   .no-js .inputfile + label {
 83 |     display: none;
 84 |   }
 85 |   
 86 |   .inputfile:focus + label,
 87 |   .inputfile.has-focus + label {
 88 |     outline: 1px dotted #000;
 89 |     outline: -webkit-focus-ring-color auto 5px;
 90 |   }
 91 |   
 92 |   .inputfile + label * {
 93 |     /* pointer-events: none; */
 94 |     /* in case of FastClick lib use */
 95 |   }
 96 |   
 97 |   .inputfile + label svg {
 98 |     width: 1em;
 99 |     height: 1em;
100 |     vertical-align: middle;
101 |     fill: currentColor;
102 |     margin-top: -0.25em;
103 |     /* 4px */
104 |     margin-right: 0.25em;
105 |     /* 4px */
106 |   }
107 |   
108 |   
109 |   /* style red */
110 |   
111 |   .inputfile-red + label {
112 |     color: #f1e5e6;
113 |     background-color: #d3394c;
114 |   }
115 |   
116 |   .inputfile-red:focus + label,
117 |   .inputfile-red.has-focus + label,
118 |   .inputfile-red + label:hover {
119 |     background-color: #722040;
120 |   }
121 | 
122 | /* style blue */
123 | 
124 | .inputfile-blue + label {
125 |     color: #f1e5e6;
126 |     background-color: #064ead;
127 | }
128 |     
129 | .inputfile-blue:focus + label,
130 | .inputfile-blue.has-focus + label,
131 | .inputfile-blue + label:hover {
132 |     background-color: #073168;
133 | }
134 | 
135 |   .fa-plus {
136 |       font-size: 2em;
137 |       color: green;
138 |   }
139 | 
140 |   .btn-transfer {
141 |     background: #a0047e;
142 |     color: #f1e5e6;
143 |     font-weight: 700;
144 |     font-size: 1.25rem;
145 |     padding: 10px 30px;
146 |   }
147 | 
148 |   .btn-transfer:hover {
149 |     color: #f1e5e6;
150 |     background: #460237;
151 |   }
152 | 
153 |   #transfering {
154 |     font-size: 5em;
155 |     color: #a0047e;
156 |     margin-top: 10%;
157 |   }
158 | 
159 |   .canvasContainer{
160 |     border: 1px dotted black;
161 |    } 
162 | 
163 |    @media screen and (min-width: 768px) and (max-width: 992px) {
164 |     .fa-plus{
165 |         font-size: 2em;
166 |     }
167 |     .btn-transfer {
168 |         padding: 10px 10px;
169 |       }
170 |   }
171 |   @media screen and (min-width: 992px) {
172 |     .fa-plus{
173 |         font-size: 3em;
174 |     }
175 |   }
176 | 
177 |   .arrowAnim {
178 |     width: 100%;
179 |     display: flex;
180 |     justify-content: center;
181 |     align-items: center;
182 |   }
183 |   .arrowAnim.top-to-bottom {
184 |     height : 50px;
185 |   }
186 |   
187 |   .arrow {
188 |     width: 10px;
189 |     height: 10px;
190 |     border: 2.5px solid;
191 |     
192 |   }
193 |   .arrowAnim.right-to-left  .arrow {
194 |     transform: rotate(-45deg);
195 |     border-color: #064ead transparent transparent #064ead;
196 |   }
197 |   .arrowAnim.rightTop-to-leftBottom  .arrow {
198 |     transform: rotate(-90deg);
199 |     border-color: #064ead transparent transparent #064ead;
200 |   }
201 |   .arrowAnim.left-to-right  .arrow {
202 |     transform: rotate(135deg);
203 |     border-color: #d3394c transparent transparent #d3394c;
204 |   }
205 |   .arrowAnim.leftTop-to-rightBottom  .arrow {
206 |     transform: rotate(180deg);
207 |     border-color: #d3394c transparent transparent #d3394c;
208 |   }
209 |   .arrowAnim.top-to-bottom  .arrow {
210 |     transform: rotate(-135deg);
211 |     border-color: #d3394c transparent transparent #a0047e;
212 |   }
213 |   
214 |   
215 |   .arrowAnim.left-to-right .arrowSliding {
216 |     position: absolute;
217 |     -webkit-animation: slide-left-to-right 4s linear infinite; 
218 |             animation: slide-left-to-right 4s linear infinite;
219 |   }
220 |   .arrowAnim.leftTop-to-rightBottom .arrowSliding {
221 |     position: absolute;
222 |     -webkit-animation: slide-leftTop-to-rightBottom 4s linear infinite; 
223 |             animation: slide-leftTop-to-rightBottom 4s linear infinite;
224 |   }
225 |   .arrowAnim.right-to-left .arrowSliding {
226 |     position: absolute;
227 |     -webkit-animation: slide-right-to-left 4s linear infinite; 
228 |             animation: slide-right-to-left 4s linear infinite;
229 |   }
230 |   .arrowAnim.rightTop-to-leftBottom .arrowSliding {
231 |     position: absolute;
232 |     -webkit-animation: slide-rightTop-to-leftBottom 4s linear infinite; 
233 |             animation: slide-rightTop-to-leftBottom 4s linear infinite;
234 |   }
235 |   .arrowAnim.top-to-bottom .arrowSliding {
236 |     position: absolute;
237 |     -webkit-animation: slide-top-to-bottom 4s linear infinite; 
238 |             animation: slide-top-to-bottom 4s linear infinite;
239 |   }
240 | 
241 |   .arrowAnim.right-to-left .arrowSliding.delay1,
242 |   .arrowAnim.left-to-right .arrowSliding.delay1,
243 |   .arrowAnim.leftTop-to-rightBottom .arrowSliding.delay1, 
244 |   .arrowAnim.rightTop-to-leftBottom .arrowSliding.delay1,
245 |   .arrowAnim.top-to-bottom .arrowSliding.delay1 {
246 |     -webkit-animation-delay: 1s; 
247 |       animation-delay: 1s;
248 |   }
249 |   .arrowAnim.right-to-left .arrowSliding.delay2,
250 |   .arrowAnim.left-to-right .arrowSliding.delay2,
251 |   .arrowAnim.leftTop-to-rightBottom .arrowSliding.delay2, 
252 |   .arrowAnim.rightTop-to-leftBottom .arrowSliding.delay2,
253 |   .arrowAnim.top-to-bottom .arrowSliding.delay2 {
254 |     -webkit-animation-delay: 2s; 
255 |       animation-delay: 2s;
256 |   }
257 |   .arrowAnim.right-to-left .arrowSliding.delay3,
258 |   .arrowAnim.left-to-right .arrowSliding.delay3,
259 |   .arrowAnim.leftTop-to-rightBottom .arrowSliding.delay3, 
260 |   .arrowAnim.rightTop-to-leftBottom .arrowSliding.delay3,
261 |   .arrowAnim.top-to-bottom .arrowSliding.delay3 {
262 |     -webkit-animation-delay: 3s; 
263 |       animation-delay: 3s;
264 |   }
265 |   
266 |   @-webkit-keyframes slide-right-to-left {
267 |       0% { opacity:0; transform: translateX(5vw); }	
268 |      20% { opacity:1; transform: translateX(3vw); }	
269 |      80% { opacity:1; transform: translateX(-3vw); }	
270 |     100% { opacity:0; transform: translateX(-5vw); }	
271 |   }
272 |   @keyframes slide-right-to-left {
273 |       0% { opacity:0; transform: translateX(5vw); }	
274 |      20% { opacity:1; transform: translateX(3vw); }	
275 |      80% { opacity:1; transform: translateX(-3vw); }	
276 |     100% { opacity:0; transform: translateX(-5vw); }	
277 |   }
278 |   @-webkit-keyframes slide-rightTop-to-leftBottom {
279 |       0% { opacity:0; transform: translateX(5vw) translateY(5vw); }	
280 |      20% { opacity:1; transform: translateX(3vw) translateY(3vw); }	
281 |      80% { opacity:1; transform: translateX(-3vw) translateY(-3vw); }	
282 |     100% { opacity:0; transform: translateX(-5vw) translateY(-5vw); }	
283 |   }
284 |   @keyframes slide-rightTop-to-leftBottom {
285 |       0% { opacity:0; transform: translateX(5vw) translateY(-5vw); }	
286 |      20% { opacity:1; transform: translateX(3vw) translateY(-3vw); }	
287 |      80% { opacity:1; transform: translateX(-3vw) translateY(3vw); }	
288 |     100% { opacity:0; transform: translateX(-5vw) translateY(5vw); }	
289 |   }
290 |   @-webkit-keyframes slide-left-to-right {
291 |       0% { opacity:0; transform: translateX(-5vw); }	
292 |      20% { opacity:1; transform: translateX(-3vw); }	
293 |      80% { opacity:1; transform: translateX(3vw); }	
294 |     100% { opacity:0; transform: translateX(5vw); }	
295 |   }
296 |   @keyframes slide-left-to-right {
297 |       0% { opacity:0; transform: translateX(-5vw); }	
298 |      20% { opacity:1; transform: translateX(-3vw); }	
299 |      80% { opacity:1; transform: translateX(3vw); }	
300 |     100% { opacity:0; transform: translateX(5vw); }		
301 |   }
302 |   @-webkit-keyframes slide-leftTop-to-rightBottom {
303 |      0% { opacity:0; transform: translateX(-5vw) translateY(-5vw); }	
304 |     20% { opacity:1; transform: translateX(-3vw) translateY(-3vw); }	
305 |     80% { opacity:1; transform: translateX(3vw) translateY(3vw); }	
306 |    100% { opacity:0; transform: translateX(5vw) translateY(5vw); }	
307 |   }
308 |   @keyframes slide-leftTop-to-rightBottom {
309 |      0% { opacity:0; transform: translateX(-5vw) translateY(-5vw); }	
310 |     20% { opacity:1; transform: translateX(-3vw) translateY(-3vw); }	
311 |     80% { opacity:1; transform: translateX(3vw) translateY(3vw); }	
312 |    100% { opacity:0; transform: translateX(5vw) translateY(5vw); }	
313 |   }
314 |   @-webkit-keyframes slide-top-to-bottom {
315 |      0% { opacity:0; transform: translateY(-40px); }	
316 |     20% { opacity:1; transform: translateY(-30px); }	
317 |     80% { opacity:1; transform: translateY(10px); }	
318 |    100% { opacity:0; transform: translateY(20px); }	
319 |   }
320 |     @keyframes slide-top-to-bottom {
321 |      0% { opacity:0; transform: translateY(-40px); }	
322 |     20% { opacity:1; transform: translateY(-30px); }	
323 |     80% { opacity:1; transform: translateY(10px); }	
324 |    100% { opacity:0; transform: translateY(20px); }	
325 |   }


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <html>
  2 |   <head>
  3 |     <meta charset='utf-8'>
  4 |     <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  5 |     <title>Arbitrary Style Transfer</title>
  6 |     <meta name='viewport' content='width=device-width, initial-scale=1'>
  7 |     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  8 |     <link rel="stylesheet" href="style/style-transfer.css">
  9 |     <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
 10 |     <script src="https://kit.fontawesome.com/4414288e8e.js"></script>
 11 |     <script src="https://cdn.jsdelivr.net/npm/@magenta/image@0.2.1/dist/magentaimage.min.js"></script>
 12 |     <script src="js/jquery.keyframes.min.js"></script>
 13 |   </head>  
 14 |   <body>
 15 |         <main>
 16 |             <div class="container mt-3">
 17 |                 <div class="row">
 18 |                     <div class="col-12 col-md-4 text-center">
 19 |                         <div class="box">
 20 |                             <input type="file" id="contentFile" target="content" class="inputfile inputfile-red" data-multiple-caption="{count} files selected" multiple />
 21 |                             <label for="contentFile">
 22 |                                 <svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" viewBox="0 0 20 17">
 23 |                                     <path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z"/>
 24 |                                 </svg> 
 25 |                                 <span>Pick your own photo </span>
 26 |                             </label>
 27 |                         </div>
 28 |                         <div class="imageContainer">
 29 |                             <div class="scan scan-content"></div>
 30 |                             <div class="screen">
 31 |                                 <img class="col-12 p-0" id="contentImg" src="images/turtle.jpg"/> 
 32 |                             </div>
 33 |                             <em></em>
 34 |                         </div>
 35 |                     </div>
 36 |                     <div class="col-md-4 text-center pt-md-4 mt-md-4 pt-lg-5 mt-lg-5 d-none d-md-block">
 37 |                         <div class="row">
 38 |                             <div class="col-4 mt-3">
 39 |                                 <div class="arrowAnim left-to-right">
 40 |                                     <div class="arrowSliding">
 41 |                                         <div class="arrow"></div>
 42 |                                     </div>
 43 |                                     <div class="arrowSliding delay1">
 44 |                                         <div class="arrow"></div>
 45 |                                     </div>
 46 |                                     <div class="arrowSliding delay2">
 47 |                                         <div class="arrow"></div>
 48 |                                     </div>
 49 |                                     <div class="arrowSliding delay3">
 50 |                                         <div class="arrow"></div>
 51 |                                     </div>
 52 |                                 </div>
 53 |                             </div>
 54 |                             <div class="col-4"><i class="fas fa-plus"></i></div>                        
 55 |                             <div class="col-4 mt-3">
 56 |                                 <div class="arrowAnim right-to-left">
 57 |                                     <div class="arrowSliding">
 58 |                                         <div class="arrow"></div>
 59 |                                     </div>
 60 |                                     <div class="arrowSliding delay1">
 61 |                                         <div class="arrow"></div>
 62 |                                     </div>
 63 |                                     <div class="arrowSliding delay2">
 64 |                                         <div class="arrow"></div>
 65 |                                     </div>
 66 |                                     <div class="arrowSliding delay3">
 67 |                                         <div class="arrow"></div>
 68 |                                     </div>
 69 |                                 </div>                                
 70 |                             </div>
 71 |                         </div>
 72 |                         <div class="col-12 text-center p-0 pt-3 pb-3">
 73 |                             <button class="btn btn-transfer">
 74 |                                 <i class="fas fa-random"></i> 
 75 |                                 <span>Click to transfer</span>
 76 |                             </button>
 77 |                         </div>
 78 |                         <div class="col-12 arrowAnim top-to-bottom">
 79 |                             <div class="arrowSliding">
 80 |                                 <div class="arrow"></div>
 81 |                             </div>
 82 |                             <div class="arrowSliding delay1">
 83 |                                 <div class="arrow"></div>
 84 |                             </div>
 85 |                             <div class="arrowSliding delay2">
 86 |                                 <div class="arrow"></div>
 87 |                             </div>
 88 |                             <div class="arrowSliding delay3">
 89 |                                 <div class="arrow"></div>
 90 |                             </div>
 91 |                         </div>
 92 |                     </div>
 93 |                     <div class="col-12 col-md-4 text-center">
 94 |                         <div class="box">
 95 |                             <input type="file" id="styleFile" target="style" class="inputfile inputfile-blue" data-multiple-caption="{count} files selected" multiple />
 96 |                             <label for="styleFile">
 97 |                                 <svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" viewBox="0 0 20 17">
 98 |                                     <path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z"/>
 99 |                                 </svg> 
100 |                                 <span>Pick your own style </span>
101 |                             </label>
102 |                         </div>
103 |                         <div class="imageContainer">
104 |                             <div class="scan scan-style"></div>
105 |                             <div class="screen">
106 |                                 <img class="col-12 p-0" id="styleImg" src="images/kadinsky.jpg"/> 
107 |                             </div>
108 |                             <em></em>
109 |                         </div>
110 |                     </div>
111 |                 </div>
112 |                 <div class="row d-block d-md-none">
113 |                     <div class="row col-12 text-center p-0 m-0 mt-3">
114 |                         <div class="col-4 mt-3">
115 |                             <div class="arrowAnim leftTop-to-rightBottom">
116 |                                 <div class="arrowSliding">
117 |                                     <div class="arrow"></div>
118 |                                 </div>
119 |                                 <div class="arrowSliding delay1">
120 |                                     <div class="arrow"></div>
121 |                                 </div>
122 |                                 <div class="arrowSliding delay2">
123 |                                     <div class="arrow"></div>
124 |                                 </div>
125 |                                 <div class="arrowSliding delay3">
126 |                                     <div class="arrow"></div>
127 |                                 </div>
128 |                             </div>
129 |                         </div>
130 |                         <div class="col-4"><i class="fas fa-plus"></i></div>                        
131 |                         <div class="col-4 mt-3">
132 |                             <div class="arrowAnim rightTop-to-leftBottom">
133 |                                 <div class="arrowSliding">
134 |                                     <div class="arrow"></div>
135 |                                 </div>
136 |                                 <div class="arrowSliding delay1">
137 |                                     <div class="arrow"></div>
138 |                                 </div>
139 |                                 <div class="arrowSliding delay2">
140 |                                     <div class="arrow"></div>
141 |                                 </div>
142 |                                 <div class="arrowSliding delay3">
143 |                                     <div class="arrow"></div>
144 |                                 </div>
145 |                             </div>
146 |                         </div>
147 |                     </div>
148 |                 </div>
149 |                 <div class="row d-block d-md-none">
150 |                     <div class="col-10 col-md-6 col-lg-4 offset-1 offset-md-3 offset-lg-4 text-center pt-3 pb-2">
151 |                         <button  class="btn btn-transfer">
152 |                             <i class="fas fa-random"></i> 
153 |                             <span>Click to transfer</span>
154 |                         </button>
155 |                     </div>
156 |                     <div class="row">
157 |                         <div class="arrowAnim top-to-bottom">
158 |                             <div class="arrowSliding">
159 |                                 <div class="arrow"></div>
160 |                             </div>
161 |                             <div class="arrowSliding delay1">
162 |                                 <div class="arrow"></div>
163 |                             </div>
164 |                             <div class="arrowSliding delay2">
165 |                                 <div class="arrow"></div>
166 |                             </div>
167 |                             <div class="arrowSliding delay3">
168 |                                 <div class="arrow"></div>
169 |                             </div>
170 |                         </div>
171 |                     </div>
172 |                 </div>
173 |                 <div class="row m-md-3">
174 |                     <div class="col-12 col-md-4 offset-md-4 text-center">
175 |                             <div class="canvasContainer col-12 p-0">
176 |                                 <i id="transfering" class="fas fa-spinner fa-spin d-none"></i>
177 |                                 <canvas id="stylized" class="d-none"></canvas>
178 |                             </div>
179 |                         </div>
180 |                 </div>
181 |             </div>
182 |         </main>
183 | 
184 |   <script src="js/style-transfer.js"></script>
185 |   </body>
186 | </html>
187 | 


--------------------------------------------------------------------------------