image/demos/arbitrary_stylization.html

<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
  <link rel="stylesheet" href="./style.css">
  <title>mi.ArbitraryStyleTransferNetwork</title>
</head>

<body>
  <h1>mi.ArbitraryStyleTransferNetwork</h1>
  <p>
    <code>ArbitraryStyleTransferNetwork</code> wraps around Reiichiro Nakano's
    <a href="https://github.com/reiinakano/arbitrary-image-stylization-tfjs">TensorFlow.js port</a>
    of Ghiasi et al.'s <a href="https://arxiv.org/abs/1705.06830">arbitrary stylization model</a>.
    The demo below performs stylization on a content/style image pair by
  </p>
  <ul>
    <li>
      calling the <code>predictStyleParameters</code> method with the style
      image to obtain a style representation, and
    </li>
    <li>
      calling the <code>stylize</code> method with the content image and the
      style representation to perform stylization.
    </li>
  </ul>
  <p>
    It then displays the result on a canvas via TensorFlow.js' <code>toPixels</code>
    function.
  </p>

  <img id="content" height="256" class="image" src="content.jpg"/>
  <img id="style" height="256" class="image" src="style.jpg"/>
  <canvas id="stylized" width="192" height="256" class="image"></canvas>
  <br>
  <button id="stylize" disabled>Stylize</button>

  <script src="arbitrary_stylization_bundle.js"></script>
</body>

</html>