最初にお断りを。今回紹介するサービスはソースコードを提供していますが、実際にブラウザから使える便利なサービスの形では提供していません（理由は後述します）。実際に試すには環境を準備の上、ソースコードを各自の PC で実際に動かしていただく必要があります。ご了承ください。なおこちらでの動作確認は Windows10 + WSL2 + Ubuntu 18.04(20.04) の Python 及び Node.js で行っています。


今回のブログエントリで紹介するのは「画風変換」サービスです。サービスといってもウェブで公開しているわけではなく、公開しているソースコードを元に自分の PC で動かす必要があるので、実際に変換するまでのハードルは少し高めの内容です。


【画風変換とは？】
耳慣れない言葉だと思います。画風変換そのものは PFN のこのページで紹介されている内容がわかりやすいので、まずはこちらを一度参照ください（今回紹介するサービスも内部的にここで紹介されているツールを使っています）：
画風を変換するアルゴリズム


ニューラルネットを使って実装されたアルゴリズムの論文を Python で実装した様子が紹介されています。誤解を恐れずに簡単な説明をすると、２枚の画像を用意して、うち１枚（コンテンツ画像）に写っている物体の形や配置をそのままに、もう１枚（スタイル画像）の色使いやタッチの特徴といった「画風」を適用するように変換して新しい画像を生成するアルゴリズムです：



上述のページには同じ猫のコンテンツ画像に様々なスタイル画像を適用して画風変換した例が複数紹介されています：



ここで紹介されている画風変換を実現するためのツール : chainer-gogh はソースコードが公開されています：
https://github.com/mattya/chainer-gogh


【「自分のお絵描きで画風変換する」とは？】
今回のブログエントリで紹介するのは「自分のお絵描きをスタイル画像にして画風変換するサービス」です。私が開発＆公開しているお絵描きサービス MyDoodles を上述の chainer-gogh と組み合わせて使えるようにしたものです。具体的には画風変換には２枚の画像が必要ですが、コンテンツ画像は自分でアップロードした画像（写真を想定しています）、そしてスタイル画像は MyDoodles を使って描いたお絵描き画像を指定して画風変換する、というものです。画風変換はコンテンツ画像に写真、スタイル画像に絵を指定すると不思議な感じの絵が生成されることが多いのですが、このスタイル画像として自分のお絵描きを適用して画風変換を実現できるようにしたものです。


【ツールをウェブサービスとして公開しない理由】
理想を言えば、このツールをウェブで公開して誰でも気軽に使えるようにしたかったのですが、今回それは諦めました。後述で紹介する方法を実践して、自分の PC で試しに動かしてみるとわかると思うのですが、この画風変換は CPU に非常に大きな負荷をかける処理で、画風変換が完了するまでにかかる時間は、動かす PC のスペックにもよりますが、かなりいいスペックの PC でも１つの処理に対して１時間程度は覚悟※しておく必要があります。

※ GPU を搭載した機種であれば GPU を使って処理すればかなり高速化できると思いますが、それでも数10分間は負荷 100% の状態が続くと思います。

要はそこそこの PC を用意して１つの処理に集中させても１時間程度は負荷 100% が続くような処理なのです。これをウェブで公開して、複数の処理を同時に・・・となった場合の負荷や処理時間が想像できませんが、間違いなくタイムアウトとの戦いになるはずです。　こんな事情もあって、今回はウェブでの公開を諦め、「自分の PC で自分用の画像変換専門に行う」ツールとして公開することにしたのでした。


【ツールのセットアップ】
では実際に画風変換を行うにあたっての、事前セットアップの手順を紹介します。大きく chainer-gogh を動かすためのセットアップと、ウェブのフロントエンドアプリを動かすためのセットアップの２つに分かれていて、手順としては（０）事前準備、（１）フロントエンドアプリのソースコードを用意、（２）chainer-gogh のソースコードを用意、（３）chainer-gogh のセットアップ、（４）フロントエンドアプリのセットアップ、（５）コンテンツ画像とスタイル画像（お絵描き画像）の準備、の順に行う必要があります。では以下で順に紹介します。

（０）事前準備
このサービス・ツールを動作させるために以下のプログラミング言語実行環境ランタイムが必要です：
- Python 3.x
- Node.js 12.x

自分の PC 環境でこれらのツールが使えるよう、事前にインストールしておいてください。

（１）フロントエンドアプリのソースコードを用意
今回のツールは以下のようなフォルダ構成となります：

|- chainer-gogh-webapp/
    |- chainer-gogh/ （chainer-gogh のソースコード）
    |
    |- webapp/      　（フロントエンドアプリのソースコード）
    |

chainer-gogh のソースコードは手順（２）で用意することになるので、まずは chainer-gogh 以外のソースコード構成を用意します。

git clone または zip ダウンロードで、以下のソースコードを手元に用意してください：
https://github.com/dotnsf/chainer-gogh-webapp

正しく展開できると、以下のようなフォルダ構成が再現できます：

|- chainer-gogh-webapp/
    |- webapp/      　（フロントエンドアプリのソースコード）
    |

次に残った chainer-gogh のソースコードを用意します。

（２）chainer-gogh のソースコードを用意

（１）で用意した chainer-gogh-webapp/ フォルダに移動してから以下を git clone するなどして、chainer-gogh-webapp/chainer-gogh/ を用意します：
https://github.com/mattya/chainer-gogh


これで以下のようなフォルダ構成になっているはずです：

|- chainer-gogh-webapp/
    |- chainer-gogh/ （chainer-gogh のソースコード）
    |
    |- webapp/      　（フロントエンドアプリのソースコード）
    |

（３）chainer-gogh のセットアップ

では早速 chainer-gogh を動かして・・・と言いたい所ですが、実は chainer-gogh の公開ソースコードは少し古い所があり、最新の Python3 環境で動かすには少し変更を加える必要があります。具体的には以下２ファイルで５箇所を書き換えてください（ - で始まる行を + で始まる行の内容に変更してください）：

(chainer-gogh.py)

（13行目）
   13 : - from chainer.functions import caffe
   13 : + from chainer.links import caffe

（100, 101 行目）
  100 : - mid_orig = nn.forward(Variable(img_orig, volatile=True))
  101 : - style_mats = [get_matrix(y) for y in nn.forward(Variable(img_style, volatile=True))]
  100 : + with chainer.using_config("enable_backprop", False):
  101 : +     mid_orig = nn.forward(Variable(img_orig))
  102 : + with chainer.using_config("enable_backprop", False):
  103 : +     style_mats = [get_matrix(y) for y in nn.forward(Variable(img_style))]


(models.py)

（5 行目）
    5 : - from chainer.functions import caffe
    5 : + from chainer.links import caffe

（22 行目）
   22 : - x3 = F.relu(getattr(self.model,"conv4-1024")(F.dropout(F.average_pooling_2d(F.relu(y3), 3, stride=2), train=False)))
   22 : + x3 = F.relu(getattr(self.model,"conv4-1024")(F.dropout(F.average_pooling_2d(F.relu(y3), 3, stride=2))))

（74 行目）
   74 : - y6 = self.model.conv6_4(F.relu(F.dropout(self.model.conv6_3(F.relu(self.model.conv6_2(F.relu(self.model.conv6_1(x5))))), train=False)))
   74 : + y6 = self.model.conv6_4(F.relu(F.dropout(self.model.conv6_3(F.relu(self.model.conv6_2(F.relu(self.model.conv6_1(x5))))))))

ソースコードの変更が完了したら Python3 のライブラリを pip でインストールします（Python3 のインストール方法によっては "pip" の部分を "pip3" にする必要があるかもしれません）：

$ cd chainer-gogh-webapp/chainer-gogh

$ pip install typing_extensions

$ pip install pillow

$ pip install chainer

chainer-gogh の準備の最後に学習済みモデルを用意します。（ダウンロードサイズと実行時の負荷が比較的小さいという意味で）気軽に使える nin(Network in Network) Imagenet Model をダウンロードします：
https://gist.github.com/mavenlin/d802a5849de39225bcc6



上記 URL から↑のリンクをクリックして nin_imagenet.caffemodel というファイルをダウンロードして（30MB ほど）、chainer-gogh/ フォルダに保存します。


（４）フロントエンドアプリのセットアップ

続けて Node.js 側のセットアップを行います。

$ cd chainer-gogh-webapp/webapp

$ npm install

（５）コンテンツ画像とスタイル画像（お絵描き画像）の準備

最後に画風変換を行う際のコンテンツ画像とスタイル画像を準備します。コンテンツ画像は画像ファイルであればなんでもいいのですが、絵よりは写真の画像を用意することをおすすめします。今回は「フリー素材アイドル」である MIKA☆RIKA さんの、以下の画像を使わせていただくことにします：



次にスタイル画像となるお絵描き画像を用意します。一応サンプル的なものは用意されているので自分でお絵描きをする必要はないのですが、自分のお絵描きがスタイル画像となって画風変換することが楽しいと思っているので、是非挑戦してみてください（笑）。


PC ブラウザかスマホブラウザを使って（スマホがおすすめ）以下の URL にアクセスしてください：
https://mydoodles.mybluemix.net/



指でお絵描きができるサービスです。色や線の太さ、背景色を指定して描いたり、アンドゥ・リドゥ・リセット程度のリタッチが可能です。PC ブラウザから利用している場合は指の代わりにマウスで描いてください。最後に「保存」ボタンで保存します。なお画風変換のスタイル画像として利用する場合は背景色の指定をしておいたほうが変換後のイメージがスタイルに近づくと思っています（背景が不要の場合でも背景色に白を明示的に指定して描いてください。透明なままだとスタイル変換時に黒くなってしまうようなので）：



自分が描いた画像はトップページの「履歴」ボタンから参照可能です：



スタイルとして使いたい画像を１つ選んで表示します：



この時の URL を参照します。URL の最後に /doodle/xxxxxxxxxx という部分があるはずなので、この /doodle/ に続く最後のパラメータの値（xxxxxxxxxx）が後で必要になるのでメモするなどしておいてください：



これで画風変換を行うための準備が整いました。


【画風変換】
では実際に画風変換してみましょう。まずは webapp フォルダでフロントエンドアプリケーションを起動します：

$ cd chainer-gogh-webapp/webapp

$ node app

これがデフォルトの起動方法ですが、この方法だと 'python' というコマンドで Python3 が（内部的に）実行されます。セットアップ手順によっては Python3 コマンドが 'python3' というコマンド名になっていることもありますが、その場合は node 実行時の環境変数 python で Python3 が実行されるコマンド（この例だと python3）を指定しながら起動してください：

$ cd chainer-gogh-webapp/webapp

$ python=python3 node app

フロントエンドアプリケーションの起動に成功すると 8080 番ポートで待ち受けるので、PC のウェブブラウザで http://localhost:8080/ にアクセスします：



この画面中央に３列からなる表示エリアがあります。一番左に画風変換を行うコンテンツ画像、真ん中がスタイル画像、そして右に画風変換の結果が表示されることになります。デフォルトでスタイル画像が表示されていますが、これは僕が描いたもので、これをそのままスタイル画像として使うこともできます。が、せっかくなので自分で描いた画像に変えてから画風変換を実行していただくことを想定しています＆おすすめします：
https://mydoodles.mybluemix.net/doodle/0175dcf0-c045-11eb-8c4e-8de1dabb1b17



スタイル画像を変更にするには、MyDoodles で描いたお絵描きの URL 最後のパラメータの値（上述例だと 0175dcf0-c045-11eb-8c4e-8de1dabb1b17）を sub と書かれた下のフィールドにコピー＆ペーストしてください。

例えば、このお絵描きをスタイル画像に指定する場合であれば、パラメータは 63e083b0-c345-11eb-8c4e-8de1dabb1b17 なので、sub の下のフィールドに 63e083b0-c345-11eb-8c4e-8de1dabb1b17 と入力します：



するとこのようにフロントエンドのスタイル画像が指定したお絵描きに切り替わります：



次にコンテンツ画像を指定します。こちらは直接アップロードする必要があるので、main と書かれた下のボタンをクリックして、自分の PC からコンテンツ画像として使いたい画像ファイルを指定します。今回は上述の MIKA☆RIKA さんの画像を使うので、指定するとこのような画面になります：



コンテンツ画像とスタイル画像の両方がプレビューされている状態になれば画風変換を実行できます。result と書かれた下にある「RESULT」ボタンをクリックして画風変換がスタートします。

PCのスペックにもよりますが、画風変換には非常に長い時間がかかります。result 欄にはその画風変換の途中経過が少しずつ表示されていきます：

　　↓

　　↓



またこの途中経過画像は chainer-gogh-webapp/chainer-gogh/output_dir/（指定したパラメータ名）/ というフォルダの中に随時作成されていきます。このフォルダの中を見ていると、元のコンテンツ画像にスタイル画像の画風が少しずつ適用されて、輪郭がはっきりしていく様子が確認できます。これはこれで見ていて面白いです：




画像は im_00000.png, im_00050.png, im_00100.png, im_00150.png, .. と "50" 刻みで増えていき、im_04950.png まで 100 段階 100 枚が作成された段階で（このアプリケーションでの）画風変換は終了となります：



今回のコンテンツ画像とスタイル画像での画風変換は最終的にこのような結果（右）になりました。適当にお絵描きした○ールおじさんの画風（？）が MIKA☆RIKA さんの写真に適用できていますよね。元の画像やお絵描きを指定している点で人手は入っていますが、これは「人工知能が描いた世界に一枚の絵」という表現ができるものです：



同じコンテンツ画像で、スタイル画像を替えて実行した結果はこんな感じでした。スタイル画像の違いが結果の違いにあらわれている様子が確認できると思います：



ちなみにこの画風変換にかかる処理時間（最後の画像が作られるまでの時間）ですが、Intel i7-7500 2.7GHz の４コア CPU でメモリを 16GB 搭載した Windows 機で他の処理を何もせずに実行した場合でおよそ１時間といったところでした。環境によってかかる時間は前後すると思いますが、１つの参考になれば。

この処理時間を短縮するため、GPU 搭載機種であれば GPU を使って高速に処理できるよう改良中です。Windows から直接実行する場合だとうまくいくかもしれないのですが、WSL を挟んで実行しようとするとなかなかうまくいかず・・・また GPU を使うのであれば利用モデルも別のものにしたほうがいいと思われる、など、こちらは現時点ではまだまだ検討段階含めて未実装ということで。


ともあれ、いちおう動く状態のフロントエンド付きサービスにはなっていると思います。環境構築の手間がちと大変かもしれませんが、ぜひ自分（やご家族）でお絵描きした結果を、自分で撮った写真のスタイルに適用するなどして楽しんでいただければと思っています。

タグ ：

#mydoodles

#chainer-gogh

#image

#style

タイトルそのままです。なんらかの画像をコピーしてクリップボードに格納された状態から、ブラウザ画面内の <canvas> 要素内に画像データをペーストして表示する、という処理が実現できないか試してみました。

結論としてはなんとなく実現できていると思います。サンプルを公開しているのでまずは挙動を試してみてください。


PC でもスマホでも、まず対象の画像をコピーします。今回は「いらすとや」さまのこの画像を使って試してみることにします：
https://www.irasutoya.com/2021/04/blog-post_12.html




まずは画像をコピーします。PC の場合は右クリックから「コピー」、スマホの場合は対象画像を長押しするとコピーできると思います：



その後、こちらのページを開きます：
https://dotnsf.github.io/web_image_paste/





表示された画面内の「ペースト」と書かれた箇所にカーソルを移動した上でペースト（貼り付け）してください（スマホの場合は「ペースト」と書かれた箇所を長押ししてペーストを選択してください）：



うまくいくと最初にコピーした画像がブラウザ画面内の矩形部分（<canvas>）のサイズに合わせてペーストされます：



このサンプルのソースコードはこちらで公開しています：
https://github.com/dotnsf/web_image_paste

このソースコードの中で特に該当の機能を実現しているファイルが index.html です。以下、解説を加えながらこのファイルの内容を紹介します。

まず該当部分の HTML は以下のようになっています：

<div class="container">
  <div id="canvas_div">
    <div id="cdiv">
      <div id="box" contenteditable="true">
        ペースト
      </div>
      <canvas width="80%" height="60%" id="mycanvas"></canvas>
    </div>
  </div>
</div>

画面内の「ペースト」と書かれている部分の <div id="box"> 要素に contenteditable="true" という属性がついています。これによって、この要素部分はペースト可能（Ctrl+V や右クリックメニューでペーストできる）として扱うことができるようになります。単にこの部分に画像をペーストして表示できるようにするだけであれば、この HTML だけで実現できます。

問題はここでペースト処理された画像を、この <div id="box"> 内に表示するのではなく（そのままだと <div id="box"> 内に画像がペーストされて表示されてしまうので、表示しないような処理を加えた上で）代わりにすぐ下の <canvas> 要素内に表示したい、という点です。

今回のサンプルではそういった処理は JavaScript で実現しています。まず「ペースト」と書かれた <div id="box"> 要素にペースト処理が実行されたイベントをフックして、imagePaste() 関数（後述）を実行するように指示しています。加えて false を返すことでフックしたイベントをキャンセルし、通常処理（この場合は <div id="box"> へのペースト処理）が実行されないようにしています（false を返さないと、<canvas> に画像をペーストした後でも <div id="box"> 内にも画像が残ってしまうので、それを避けるための処理です）：

$(function(){
  $('#box').on( "paste", function( e ){
    imagePaste( e );
    return false;
  });

  :
  :

そして imagePaste() 関数の実装がこちらです：

function imagePaste( event ){
  var blobimg = null;
  var items = ( event.clipboardData || event.originalEvent.clipboardData ).items;
  for( var i = 0; i < items.length; i ++ ){
    if( items[i].type.indexOf( "image" ) == 0 ){
      blobimg = items[i].getAsFile();
    }
  }

  if( blobimg != null ){
    var bloburl = URL.createObjectURL( blobimg );

    var canvas = document.getElementById( "mycanvas" );
    var ctx = canvas.getContext( '2d' );

    var img = new Image();
    img.src = bloburl;
    img.onload = function(){
      var sw = img.naturalWidth;
      var sh = img.naturalHeight;
      var dw = canvas.width;
      var dh = canvas.height;
      ctx.drawImage( img, 0, 0, sw, sh, 0, 0, dw, dh );
    };
  }
}

まずクリップボード内に登録されているデータを配列で取得し、その中に画像（"image"）が含まれているかどうかを調べます。存在している場合はそのバイナリデータを取得します。

このバイナリデータが見つかった場合は URL.createObjectURL で画像データの URL を生成して画像化し、<canvas> 内に drawImage() 関数を使って描画します。その際に画像全体の高さや幅を <canvas> 全体の高さや幅に調整して表示するので、それらの情報を取得した上でパラメータ指定しています。

これによって「ペースト」のエリアにペーストした画像データを <canvas> 内に描画し、もとの「ペースト」のエリアには描画しない、という処理が実現できました。


本当は「ペースト」のためのエリアを使わずに <canvas> だけでここに画像を直接ペーストできるようになるのが理想なんですが、実現の可否含めてその方法がわかっていません。実現方法のヒントがありましたら教えていただけると嬉しいです。

 

タグ ：

#contenteditable

#javascript

#paste

#image

#clipboard

むかーしから存在している技術なのですが、イメージマップという便利な機能があります（最近あまり使われなくなったという印象もあります）。これは HTML ページ内の画像内にクリッカブルな領域を複数定義し、いずれかの領域がクリックされたら何らかの処理を行う、というものです。クリックされる領域によって処理内容（このページにジャンプするとか、この JavaScript 関数を実行するとか、・・）を変えることができる、というものです。

例えばこんな感じで実現します。いらすとやさんの『ホワイト企業～ブラック企業のイラスト』を例に紹介します：



このイラスト画像は横650ピクセル、縦137ピクセルです。その中にホワイト企業～ブラック企業が５段階のイラストで表示されています。

画像の左上の座標を ( 0, 0 ) とすると、このうち一番左の企業は、そのビルの矩形部分は左上が ( 37, 13 ) から右下 ( 100, 127 ) という矩形でできています。いま、このビルの矩形部分がクリックされたら "white" というメッセージを表示するようにしてみます：



同様にして、５つのビルそれぞれにクリッカブルな矩形部分を定義し、それぞれがクリックされた時に以下のようなメッセージが表示されるようにしてみます：

ビル番号（左から何番目のビル）	矩形範囲	クリックされた時のメッセージ
1	( 37, 13 ) - ( 100, 127 )	white
2	( 165, 13 ) - ( 227, 127 )	lightgray
3	( 291, 13 ) - ( 355, 127 )	gray
4	( 481, 13 ) - ( 483, 127 )	darkgray
5	( 546, 13 ) - ( 610, 127 )	black

これをイメージマップで実現すると、 HTML の該当箇所は以下のようになります：

<body>
  <div class="container">
    <img src="https://1.bp.blogspot.com/-BmJohMucVBI/XYhOV_VMQmI/AAAAAAABVHA/sZF8lMjPedUWSkxBwUGZXmVri2OFKEZ4gCNcBGAsYHQ/s650/company_white_black_kigyou_5dankai.png" border="0" usemap="#image_map"/><br/>
    <map name="image_map">
      <area shape="rect" coords="37,13,100,127" href="javascript:alert( 'white' )"/>
      <area shape="rect" coords="165,13,227,127" href="javascript:alert( 'rightgray' )"/>
      <area shape="rect" coords="291,13,355,127" href="javascript:alert( 'gray' )"/>
      <area shape="rect" coords="418,13,483,127" href="javascript:alert( 'darkgray' )"/>
      <area shape="rect" coords="546,13,610,127" href="javascript:alert( 'black' )"/>
    </map>
  </div>
</body>

<img> タグの usemap 属性でイメージマップの名称を定義します。そして <map> タグを使って、対象（name 属性で指定）の <img> のクリッカブル領域と、クリックされた時のハンドラを href 属性に定義します。上記例ではハンドラを javascript 関数の実行にしていますが、普通に URL を記述すればリンクを作成することもできます。

これで各ビルをクリックした時に、（左から順に）"white", "lightgray", "gray", "darkgray", "black" というメッセージが表示されるようになります。元は１枚の画像でしたが、クリッカブルな領域を５箇所定義することができ、それぞれのクリックハンドラを個別に設定することもできました：

（左から２番めのビルをクリックした時の様子）



ここまでが普通のイメージマップです。このイメージマップ、非常に便利な反面で「レスポンシブ対応が難しい」という難点がありました。要はクリッカブルな矩形領域をピクセル絶対値で指定しているため、画像がそのまま表示された場合はいいのですが、レスポンシブ対応などで画面サイズに合わせて拡大縮小されて画面いっぱいに表示された場合、縮尺が変更になってしまい、絶対値で指定していたイメージマップの定義がおかしくなってしまうのでした。

具体的に同じコードをスマホのシミュレーターで確認した結果、下の赤点線部が "lightgray" のクリッカブル矩形部分となっていて、本来の位置からズレていました。これをどうにかしたい、というのが今回のテーマです：



色々と調べましたが、答としては jQuery RWD Image Maps という jQuery プラグインを使うことで解決できました：




以下に具体的な対応手順を紹介します。

まず HTML 内でレスポンシブのための宣言をしておきます。例えば以下のようなコードが既に含まれているものと仮定します：

  :
<meta name="viewport" content="width=device-width,initial-scale=1"/>
  :

次に jQuery と jQuery RWD Image Maps をロードします。以下の例では CDN からそれぞれをロードしています（jQuery RWD Image Maps の方を後にロードする必要があります）：

  :
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-rwdImageMaps/1.6/jquery.rwdImageMaps.min.js"></script>
  :

CSS で画像サイズの調整を行います。この例ではイメージマップを用いる画像の横幅を 100% に、高さは自動調整するように指定しています：

  :
<style>
img[usemap]{
  max-width: 100%;
  height: auto;
}
</style>
  :

そして最後に JavaScript で該当部分に RWD Image Maps を適用します：

  :
<script>
$(function(){
  $('img[usemap]').rwdImageMaps();
});
</script>
  :

これでスマホでおなじページにアクセスした時でもイメージマップの矩形部分がズレることなく利用できるようになりました：

タグ ：

#html

#css

#javascript

#imagemap

#responsive

#jquery

#rwd

#image

#maps