Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including @magenta/image with all npm packages installed. Try it out:

var image = require("@magenta/image")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

@magenta/image v0.2.1

Visual art with machine learning, in the browser.

@magenta/image

This JavaScript implementation of Magenta's image models uses TensorFlow.js for GPU-accelerated inference.

Complete documentation is available at https://tensorflow.github.io/magenta-js/image.

Contents

Example Applications

You can try our hosted demos for each model and have a look at the demo code.

Supported Models

Fast Arbitrary Image Stylization

Implements Ghiasi et al.'s fast arbitrary style transfer model (paper, code). Wraps around Reiichiro Nakano's TensorFlow.js port of the model checkpoint.

Getting started

There are two main ways to get MagentaImage.js in your JavaScript project: via script tags or by installing it from NPM and using a build tool like yarn.

via Script Tag

Add the following code to an HTML file, and place a content (content.jpg) and style (style.jpg) image in the same directory:

<html>
  <head>
    <!-- Load @magenta/image -->
    <script src="https://cdn.jsdelivr.net/npm/@magenta/image@^0.1.2"></script>
  </head>
  <body>
    <img id="content" height="256" src="content.jpg"/>
    <img id="style" height="256" src="style.jpg"/>
    <canvas id="stylized" height="256"></canvas>
      <script>
        const model = new mi.ArbitraryStyleTransferNetwork();
        const contentImg = document.getElementById('content');
        const styleImg = document.getElementById('style');
        const stylizedCanvas = document.getElementById('stylized');

        function stylize() {
          model.stylize(contentImg, styleImg).then((imageData) => {
            stylizedCanvas.getContext('2d').putImageData(imageData, 0, 0);
          });
        }

        model.initialize().then(stylize);
      </script>
  </body>
</html>

Launch a simple HTTP server (e.g. python3 -m http.server) and point your browser to http://0.0.0.0:8000/. You should see your content and style images displayed and, after a few seconds, the stylized output.

via NPM

Add MagentaImage.js to your project using yarn or npm. For example, with yarn you can simply call yarn add @magenta/image.

Then, you can use the library in your own code as in the following example:

import * as mi from '@magenta/image';

const model = new mi.ArbitraryStyleTransferNetwork();
const contentImg = document.getElementById('content') as HTMLImageElement;
const styleImg = document.getElementById('style') as HTMLImageElement;
const stylizedCanvas = document.getElementById('stylized') as HTMLCanvasElement;

function stylize() {
  model.stylize(contentImg, styleImg).then((imageData) => {
    stylizedCanvas.getContext('2d').putImageData(imageData, 0, 0);
  });
}

model.initialize().then(stylize);

See style-transfer.glitch.me and our demos for example usage.

Example Commands

yarn install to install dependencies.

yarn test to run tests.

yarn bundle to produce a bundled version in dist/.

yarn run-demos to build and run the demo.

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free