Vue Style Transfer 🎨

Easily use Style Transfer in your Vue Application

Style transfer demo - Vue logo crossed with Starry Night by Vincent van Gogh

Philosophy

Lately, Style Transfer models have improved in their results and also decreased in size (down to a few KB). At the same time, users' machines and devices have also become more powerful, and for the first time, able to perform style transfer computations on-the-fly.

Vue Style Transfer was created with the goal of allowing you to seamlessly integrate state of the art style transfer neural network models in your website application. This creates an opportunity to delight your users with new kinds of, refreshing, image graphics which are uniquely generated client-side every page visit.

Using Vue Style Transfer should be as simple as using any other HTML element like <img> or <hr>.

Features

Transform images with a state-of-the-art arbitrary style transfer model
Use local images or images from direct URL's
"loading image" screen is shown on the page until style transfer is completed
Specify loading message text and background colors
Set the "strength" of the style transfer
Basic accessibility support via aria-label

Setup/Installation 💾

Install via NPM:

npm install --save vue-style-transfer

Configure your application entry point (typically main.js) and tell vue to use it:

import Vue from 'vue'
import App from './App.vue'
import VueStyleTransfer from 'vue-style-transfer'

Vue.use(VueStyleTransfer)

new Vue({
  render: h => h(App),
}).$mount('#app')

Usage 🔰

Background

originURL or local-origin-image - the original image you want to add styling to. Either from a URL or a local image.

styleURL or local-style-image - the image you want to copy the style from. Either from a URL or a local image.

Examples

Basic example (using direct URL's only):

    <style-transfer-element
      width="400"
      height="400"
      alt-text="Space Force snapshot crossed with Starry Night"
      originURL="http://i.imgur.com/Jm3bQtu.jpg"
      styleURL="http://i.imgur.com/osSv3S2.jpg"
      :strength="0.1"
      >
    </style-transfer-element>

Basic example (using a local origin image + URL for the style image):

    <style-transfer-element
      width="400"
      height="400"
      alt-text="Vue logo crossed with Starry Night"
      :local-origin-image="require('../assets/logo.png')"
      styleURL="http://i.imgur.com/osSv3S2.jpg"
      :strength="0.1"
      >
    </style-transfer-element>

Configuration Properties 🔧

:strength - the strength of the style you want to apply to the origin image

alt-text - provide an alt text value for accessibility support. Note: the final image is outputted in a canvas, which does not support alt tags. Instead aria-label is used.

width and height - specify the dimensions of the style transfer output. Please note, currently, larger sizes (eg. > 400px) can seriously slow down your application and even crash the user's browser.

loading-background-color - specify a hex value for the background (by default it's grey #e8e8e8)

loading-text-message - specify a custom string message to show to the user while the style transfer is working (by default it says, 'LOADING IMAGE')

loading-text-color - specify a hex value for the loading (by default it's dark grey #666666)

About the Arbitrary Style Transfer Neural Network Model

Tensorflow.js Model taken from the arbitrary-image-stylization-tfjs project.

Parts of the model which are called:

separableTransformNet (151 KB) - Link

mobileStyleNet (168 KB) - Link

Warning ⚠️

Please avoid using very large images as they have the potential to dramatically slow down your website or even crash the user's browser. Also, please note, this library still has the potential to crash older machines (especially those without a GPU).

It is not recommended to use this library in the main areas of critical, production website applications.

It is not recommended to use multiple style transfer elements on the same page.

Credits

Please note the code is very heavily inspired from the original Arbitrary Style Transfer code using Tensorflow.js by Reiichiro Nakano. It's worth noting vue-style-transfer is more of a Vue wrapper for the original code by Reiichiro Nakano, than its own library.

Arbitrary Style Transfer itself would not have been possible without the following:

Authors of the arbitrary style transfer paper.
The Magenta repository for arbitrary style transfer.
Authors of the MobileNet-v2 paper.
Authors of the paper describing neural network knowledge distillation.
The TensorFlow.js library.
Google Colaboratory, with which I was able to do all necessary training using a free(!) GPU.

lcsouzamenezes / vue-style-transfer Goto Github PK