diff --git a/neural_style_transfer/dist/bundle.js b/neural_style_transfer/dist/bundle.js index e3a20b9..a16b887 100644 --- a/neural_style_transfer/dist/bundle.js +++ b/neural_style_transfer/dist/bundle.js @@ -206,12 +206,15 @@ var Main = function () { if (i < n) { var j = i + 1; var progressBar = document.getElementById("Bar"); + var percent = document.getElementById("percent"); document.getElementById("counter").innerHTML = "Epochs: " + j * 40; var width = 100 * (j / n); if (width >= 102) { progressBar.style.width = 0; + percent.innerHTML = "0%"; } else { progressBar.style.width = width + "%"; + percent.innerHTML = width + "%"; } _this2.gradualStyler(n, i + 1); } else { @@ -240,6 +243,7 @@ var Main = function () { this.styleImg.onerror = function () { alert("Error loading " + _this3.styleImg.src + "."); }; + this.dispImg = document.getElementById('img_lower'); this.stylized = document.getElementById('stylized'); this.styleRatio = 1.0; @@ -251,14 +255,18 @@ var Main = function () { // Initialize buttons this.styleButton = document.getElementById('style-button'); this.styleButton.onclick = function () { + var cover = document.getElementsByClassName('img-container')[0]; + cover.style.display = "none"; _this3.disableStylizeButtons(); _this3.gradualStyler(25, 0); + var results = document.getElementById('result'); + results.style.display = "block"; }; // Initialize selectors this.contentSelect = document.getElementById('content-select'); this.contentSelect.onchange = function (net) { - return _this3.image_select(_this3.contentImg, net.target.value); + _this3.image_select(_this3.contentImg, net.target.value), _this3.image_select(_this3.dispImg, net.target.value); }; this.contentSelect.onclick = function () { return _this3.contentSelect.value = ''; @@ -603,10 +611,20 @@ var Main = function () { window.onload = function () { var dwn = document.getElementById('btndownload'), canvas = document.getElementById('stylized'), - context = canvas.getContext('2d'); + context = canvas.getContext('2d'), + show = document.getElementById('btnshow'); dwn.onclick = function () { download(canvas, 'design.png'); }; + show.onclick = function () { + var link = document.getElementById('stylized').toDataURL("image/png;base64"); + var box = document.getElementById('img_over'); + var cover = document.getElementsByClassName('img-container')[0]; + box.src = link; + cover.style.display = "block"; + new BeerSlider(document.getElementById('slider')); + console.log("done"); + }; }; function download(canvas, filename) { @@ -63856,10 +63874,6 @@ function fromByteArray (uint8) { var base64 = require('base64-js') var ieee754 = require('ieee754') -var customInspectSymbol = - (typeof Symbol === 'function' && typeof Symbol.for === 'function') - ? Symbol.for('nodejs.util.inspect.custom') - : null exports.Buffer = Buffer exports.SlowBuffer = SlowBuffer @@ -63896,9 +63910,7 @@ function typedArraySupport () { // Can typed array instances can be augmented? try { var arr = new Uint8Array(1) - var proto = { foo: function () { return 42 } } - Object.setPrototypeOf(proto, Uint8Array.prototype) - Object.setPrototypeOf(arr, proto) + arr.__proto__ = { __proto__: Uint8Array.prototype, foo: function () { return 42 } } return arr.foo() === 42 } catch (e) { return false @@ -63927,7 +63939,7 @@ function createBuffer (length) { } // Return an augmented `Uint8Array` instance var buf = new Uint8Array(length) - Object.setPrototypeOf(buf, Buffer.prototype) + buf.__proto__ = Buffer.prototype return buf } @@ -63954,6 +63966,17 @@ function Buffer (arg, encodingOrOffset, length) { return from(arg, encodingOrOffset, length) } +// Fix subarray() in ES2016. See: https://github.com/feross/buffer/pull/97 +if (typeof Symbol !== 'undefined' && Symbol.species != null && + Buffer[Symbol.species] === Buffer) { + Object.defineProperty(Buffer, Symbol.species, { + value: null, + configurable: true, + enumerable: false, + writable: false + }) +} + Buffer.poolSize = 8192 // not used by this implementation function from (value, encodingOrOffset, length) { @@ -63966,7 +63989,7 @@ function from (value, encodingOrOffset, length) { } if (value == null) { - throw new TypeError( + throw TypeError( 'The first argument must be one of type string, Buffer, ArrayBuffer, Array, ' + 'or Array-like Object. Received type ' + (typeof value) ) @@ -63977,12 +64000,6 @@ function from (value, encodingOrOffset, length) { return fromArrayBuffer(value, encodingOrOffset, length) } - if (typeof SharedArrayBuffer !== 'undefined' && - (isInstance(value, SharedArrayBuffer) || - (value && isInstance(value.buffer, SharedArrayBuffer)))) { - return fromArrayBuffer(value, encodingOrOffset, length) - } - if (typeof value === 'number') { throw new TypeError( 'The "value" argument must not be of type number. Received type number' @@ -64024,8 +64041,8 @@ Buffer.from = function (value, encodingOrOffset, length) { // Note: Change prototype *after* Buffer.from is defined to workaround Chrome bug: // https://github.com/feross/buffer/pull/148 -Object.setPrototypeOf(Buffer.prototype, Uint8Array.prototype) -Object.setPrototypeOf(Buffer, Uint8Array) +Buffer.prototype.__proto__ = Uint8Array.prototype +Buffer.__proto__ = Uint8Array function assertSize (size) { if (typeof size !== 'number') { @@ -64129,8 +64146,7 @@ function fromArrayBuffer (array, byteOffset, length) { } // Return an augmented `Uint8Array` instance - Object.setPrototypeOf(buf, Buffer.prototype) - + buf.__proto__ = Buffer.prototype return buf } @@ -64452,9 +64468,6 @@ Buffer.prototype.inspect = function inspect () { if (this.length > max) str += ' ... ' return '' } -if (customInspectSymbol) { - Buffer.prototype[customInspectSymbol] = Buffer.prototype.inspect -} Buffer.prototype.compare = function compare (target, start, end, thisStart, thisEnd) { if (isInstance(target, Uint8Array)) { @@ -64580,7 +64593,7 @@ function bidirectionalIndexOf (buffer, val, byteOffset, encoding, dir) { return Uint8Array.prototype.lastIndexOf.call(buffer, val, byteOffset) } } - return arrayIndexOf(buffer, [val], byteOffset, encoding, dir) + return arrayIndexOf(buffer, [ val ], byteOffset, encoding, dir) } throw new TypeError('val must be string, number or Buffer') @@ -64909,7 +64922,7 @@ function hexSlice (buf, start, end) { var out = '' for (var i = start; i < end; ++i) { - out += hexSliceLookupTable[buf[i]] + out += toHex(buf[i]) } return out } @@ -64946,8 +64959,7 @@ Buffer.prototype.slice = function slice (start, end) { var newBuf = this.subarray(start, end) // Return an augmented `Uint8Array` instance - Object.setPrototypeOf(newBuf, Buffer.prototype) - + newBuf.__proto__ = Buffer.prototype return newBuf } @@ -65436,8 +65448,6 @@ Buffer.prototype.fill = function fill (val, start, end, encoding) { } } else if (typeof val === 'number') { val = val & 255 - } else if (typeof val === 'boolean') { - val = Number(val) } // Invalid ranges are not set to a default, so can range check early. @@ -65495,6 +65505,11 @@ function base64clean (str) { return str } +function toHex (n) { + if (n < 16) return '0' + n.toString(16) + return n.toString(16) +} + function utf8ToBytes (string, units) { units = units || Infinity var codePoint @@ -65625,20 +65640,6 @@ function numberIsNaN (obj) { return obj !== obj // eslint-disable-line no-self-compare } -// Create lookup table for `toString('hex')` -// See: https://github.com/feross/buffer/issues/219 -var hexSliceLookupTable = (function () { - var alphabet = '0123456789abcdef' - var table = new Array(256) - for (var i = 0; i < 16; ++i) { - var i16 = i * 16 - for (var j = 0; j < 16; ++j) { - table[i16 + j] = alphabet[i] + alphabet[j] - } - } - return table -})() - }).call(this,require("buffer").Buffer) },{"base64-js":302,"buffer":304,"ieee754":629}],305:[function(require,module,exports){ require('../../modules/core.regexp.escape'); diff --git a/neural_style_transfer/images/back.jpg b/neural_style_transfer/images/back.jpg new file mode 100644 index 0000000..904ff72 Binary files /dev/null and b/neural_style_transfer/images/back.jpg differ diff --git a/neural_style_transfer/index.html b/neural_style_transfer/index.html index a79474a..887b8cd 100644 --- a/neural_style_transfer/index.html +++ b/neural_style_transfer/index.html @@ -22,11 +22,12 @@ - VisualML | Style Transfer - + Neural Style Transfer + + @@ -39,6 +40,7 @@ width: 100%; background: rgb(238, 174, 202); background: radial-gradient(circle, rgba(238, 174, 202, 1) 0%, rgba(148, 187, 233, 1) 100%); + font-family: Bodoni MT, Didot, Didot LT STD, Hoefler Text, Garamond, Times New Roman, serif; } .centered { @@ -46,23 +48,85 @@ display: block; } - #Progress { - width: 80%; - background-color: transparent; - border: 1px solid black; - } - - #Bar { - width: 0%; - height: 30px; - background-color: green; - } - #counter { text-align: center; color: black; font-size: 24px; } + + .progress-title { + font-size: 18px; + font-weight: 700; + color: #000; + letter-spacing: 2px; + margin: 0 0 15px; + } + + .progress { + height: 26px; + width: 60%; + background: rgba(0, 0, 0, 0.1); + border-radius: 0; + box-shadow: none; + margin-left: auto; + margin-right: auto; + margin-bottom: 40px; + overflow: visible; + position: relative; + } + + .progress .progress-bar { + box-shadow: none; + border-radius: 0; + position: relative; + -webkit-animation: 2s linear 0s normal none infinite running progress-bar-stripes, animate-positive 1s; + animation: 2s linear 0s normal none infinite running progress-bar-stripes, animate-positive 1s; + } + + .progress-bar .progress-value { + width: 50px; + height: 100%; + background: #000; + font-size: 15px; + font-weight: 600; + color: #fff; + position: absolute; + line-height: 27px; + top: 0; + left: 0; + } + + .progress:after, + .progress .progress-bar:after, + .progress .progress-value:after { + content: ""; + border-left: 13px solid rgba(0, 0, 0, 0.1); + border-top: 13px solid transparent; + border-bottom: 13px solid transparent; + position: absolute; + top: 0; + right: -13px; + } + + .progress .progress-value:after { + border-left: 13px solid #000; + } + + .progress.progress-green .progress-bar:after { + border-left-color: #5cb85c; + } + + @-webkit-keyframes animate-positive { + 0% { + width: 0; + } + } + + @keyframes animate-positive { + 0% { + width: 0; + } + } @@ -76,9 +140,9 @@

Neural Style Transfer

-
-

Choose Content Image

-
+
+

Choose Content Image

+


-
-

Choose Style Image

-
+
+

Choose Style Image

+

- - - -
-
-
-
-
Choose the Style Transfer Network
+
+
+
Choose the Style Prediction Network
+
+
+ The Style Prediction Network is the model which is able to apply any number of styles, even styles for which it was not trained. This network produces a vector of normalization parameters that represents the detected Style present in the Style Image and + applies them to the Style Transfer network to generate the Artwork. +

+ +
-
- +
+
Choose the Style Transfer Network
+
+
+ An optimizable Style Transfer Network, that takes the Original Image and generates the new Artistic Image, following the Encoder-Decoder design. An Image is first reduced to a set of high-level features that then can be expanded to recreate the image, + but in this case, with an artistic style applied. +

+ +
@@ -156,21 +226,33 @@

Select the extent of stylization

+ +

-
-
+ + -
Epochs: 0
-
-

Final Image

- -
-
@@ -201,6 +283,7 @@ +