When AI meets Art — Neural Style Transfer with magenta.js

5 years ago

source link: https://mc.ai/when-ai-meets-art - neural-style-transfer-with-magenta-js/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

Implementation

Do you like the new artwork that AI generated? Are you curious about how it works behind the scenes? Alright, let’s explore more in this article.

It is using a technique called Neural Style Transfer. It 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.

This is implemented by optimizing the output image to match the content statistics of the content image and the style statistics of the style reference image. These statistics are extracted from the images using a CNN (Convolutional Neural Network).

If you want to dig down further, you might find Professor Andrew Ng’s tutorial useful

If you find it too hard to understand, it is alright. Thanks to Magenta (an open source research project of machine learning), even you are new to Machine Learning and AI, you can still make music and art powered by AI. Let’s go through step by step how I utilize Magenta.js to implement style transfer.

# Step 1 : Include magentaimage.js

First of all, simply include the script magentaimage.js or the minified version magentaimage.min.js in the <head> section of the html file.

<html>
 <head>
 <script src="https://cdn.jsdelivr.net/npm/@magenta/[email protected]/dist/magentaimage.min.js"></script>
 </head>

If you are using npm, you can also install it by running the command below

npm i @magenta/image

# Step 2 : Set up html element

The next thing we will need to do is to add the html elements below

Content image
Style image
Transfer button
Canvas for the combined image

<img id="contentImg" src="images/turtle.jpg"/>
<img id="styleImg" src="images/kadinsky.jpg"/>
<button class="btn btn-transfer">
 <i class="fas fa-random"></i><span>Click to transfer</span>
</button>
<canvas id="stylized"></canvas>

# Step 3 : Initialize javascript variables

const model = new mi.ArbitraryStyleTransferNetwork();
const canvas = document.getElementById('stylized');
const ctx = canvas.getContext('2d');
const contentImg = document.getElementById('contentImg');
const styleImg = document.getElementById('styleImg');

# Step 4 : Run the stylize function

When the Transfer button is clicked, call the library’s initialize() and stylize() API

That’s pretty much it! Only in 4 simple steps, you can build your own Style Transfer application. Choose your own photo and style, and watch the amazing artwork comes like magic!

Recommend

102

Github github.com 7 years ago
Cache

GitHub - tensorflow/magenta: Magenta: Music and Art Generation with Machine Inte...

Status This repository is currently inactive and serves only as a supplement some of our papers. We have transitioned to using individual repositories for new projects. For our current work, see the