コードノート

HTMLコーダー＆ウェブ担当者のための Webページ高速化超入門

これらに書かれている、最初はサムネイル画像を設置しておき、その画像がクリックされたらYouTubeのiframeへ置き換える方法で基本問題ないかと思います。

ですが参考記事中にも書かれているとおり、スマホ(iOSのみ？)だとautoplayが効かないため、動画の再生に2クリック必要となってしまう問題があります。

■PC(たぶんAndoridも)
・サムネイル画像クリック
↓
・autoplayが効いたYouTubeのiframeが読み込まれる。再生開始。

■スマホ(iOS)
・サムネイル画像クリック
↓
・autoplayが無効のYouTubeのiframeが読み込まれる。
↓
・YouTubeの再生ボタンクリック。再生開始。

以上のような違いがあります。

スマホでautoplayがonになっていると、外出先でページを開いた時にいきなり音が流れてしまう可能性があるので致し方ないですね。

Andoridに関しては、僕の手元の実機だとAPIからplayVideoを叩けばautoplay的な処理を加えられるので問題ないですが、バージョンによっては効かない場合もあるかもしれません。

※追記
Andoridはというか、厳密にはAndroidChomeならってかんじっぽい。
メーカーにもよりますが、Chromeを標準ブラウザとしてないAndroid端末もあるはず(数%程度)なので、AndroidもiOSと同様に処理した方が安全かも。
【YoutubeAPI】 iPhoneやAndroidでplayVideo()が再生されず、読み込み中のままになる | へっぽこ開発室
 Chromeが依然としてトップ - 1月モバイルブラウザシェア | マイナビニュース

ともあれ、2クリック必要な状態は好ましくないため、こんな形式を考えてみました。

・PC＆Andorid
当初の想定どおり、サムネイルクリックでautoplayのYouTube読み込み。

・iOS
いわゆるLazyLoad(該当のオブジェクト位置までスクロールしたら読み込む方法)っぽい処理にする。

こうすれば、どの環境でも1クリックでYouTubeを再生でき、iOSの場合でもある程度は高速化が効いた状態になるはずです。

というわけで、書いたコードをアップします。
https://github.com/ryryo/youtubeMultiSpeedup

See the Pen Youtube Iframe clickLoad & lazyload by Ryo Kataoka (@ryryo) on CodePen.

codepenでは画像がアップできてないので、再生ボタンなど一部表示が足りない部分があります。動作もちょっと違うかも。

js部分はjQueryで書いてます。今風じゃないですがWordPressなどでも気軽に使えて良いですね。また対したボリュームでないので、html上に書いてしまってます。

一応下記にもjs部を記載します。修正があったらGitHubだけ更新するので最新版はそちらをご覧ください。

<script type="text/javascript">
// 各プレーヤーの格納
var ytPlayer = [];
// プレーヤーのサイズ
var ytWidth = 640;
var ytHeight = 390;

var ua = navigator.userAgent;
if (ua.indexOf('iPhone') > 0 || ua.indexOf('iPad') > 0 || ua.indexOf('iPod') > 0) {
  var os = "ios";
} else if (ua.indexOf('Android') > 0) {
  var os = "android";
} else {
  var os = "pc";
}
logmes("OS:" + os);

// iOSはlazyload的に処理
if (os == "ios") {
  var thisOffset = [];
  $(window).on('load', function () {
    //要素の位置取得
    $(".ytPlayerReady").each(function (i, elm) {
      thisOffset[i] = [];
      thisOffset[i]["playerId"] = $(elm).attr("id");
      thisOffset[i]["movieId"] = $(elm).data("movieid");
      thisOffset[i]["ytWidth"] = ytWidth;
      thisOffset[i]["ytHeight"] = ytHeight;
      thisOffset[i]["height"] = $(elm).offset().top + $(elm).outerHeight();
      thisOffset[i]["lazyStatus"] = false;

      logmes("位置:" + $(elm).attr("id") + ":" + thisOffset[i]["height"]);
    });

    //スクロール開始前にも、ファーストビュー中に動画があったらYouTube起動処理
    youtubeLazy(ytPlayer, thisOffset);
  });

  //lazyload的YouTube起動処理
  $(window).scroll(function () {
    youtubeLazy(ytPlayer, thisOffset);
  });
}

function youtubeLazy(ytPlayer, thisOffset) {
  var nowScrollTop;
  for (var i = 0; i < thisOffset.length; i++) {
    nowScrollTop = $(window).scrollTop() + $(window).height();

    if (nowScrollTop > thisOffset[i]["height"] && !thisOffset[i]["lazyStatus"]) {
      logmes("lazyload:" + thisOffset[i]["playerId"]);

      $("#" + thisOffset[i]["playerId"]).removeClass("ytPlayerReady");
      $("#" + thisOffset[i]["playerId"]).parent().parent().find(".controller").show();

      youTubeIframeAPIReady(ytPlayer, thisOffset[i]["playerId"], thisOffset[i]["movieId"], thisOffset[i]["ytWidth"],
        thisOffset[i]["ytHeight"]);

      thisOffset[i]["lazyStatus"] = true;
    }
  }
}

//画像クリックでのYouTube起動処理
$(".ytPlayerReady").click(function () {
  var playerId = $(this).attr("id");
  var movieId = $(this).data("movieid");
  $(this).removeClass("ytPlayerReady");
  $(this).parent().parent().find(".controller").show();

  logmes("起動クリック:" + playerId + ":" + movieId);

  youTubeIframeAPIReady(ytPlayer, playerId, movieId, ytWidth, ytHeight);

});

$(".y_start").click(function () {
  var playerId = $(this).parents('.controller').data("playerid");
  videoControl("playVideo", playerId);
});
$(".y_pause").click(function () {
  var playerId = $(this).parents('.controller').data("playerid");
  videoControl("pauseVideo", playerId);
});

// 各プレーヤーの埋め込み
function youTubeIframeAPIReady(ytPlayer, playerId, movieId, ytWidth, ytHeight) {
  ytPlayer[playerId] = new YT.Player(playerId, {
    width: ytWidth,
    height: ytHeight,
    videoId: movieId,
    playerVars: {
      rel: 0
    },
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    }
  });

}

// 各プレーヤー準備完了後の処理
function onPlayerReady(event) {
  playerId = event.target.getIframe().id;
  logmes(playerId + ":onPlayerReady");

  if (os != "ios") {
    // videoControl("mute", playerId);
    videoControl("playVideo", playerId);
  }

}

function onPlayerStateChange(event) {
  playerId = event.target.getIframe().id;
  logmes(playerId + ":onPlayerStateChange");
  playerStateView(event, playerId);
}

function playerStateView(event, playerId) {
  var ytStatus = ytPlayer[playerId].getPlayerState();

  if (ytStatus == 1) {
    logmes('ステータス:再生中');
  } else if (ytStatus == 0) {
    logmes('ステータス:終了');
  } else if (ytStatus == 2) {
    logmes('ステータス:一時停止中');
  } else if (ytStatus == 3) {
    logmes('ステータス:バッファリング中');
  } else if (ytStatus == 5) {
    logmes('ステータス:頭出し済み');
  } else if (ytStatus == -1) {
    logmes('ステータス:未開始');
  } else {
    logmes('ステータス:該当なし?ログ確認');
    console.log(ytStatus);
  }
}

function videoControl(action, playerId) {
  // playVideo or pauseVideo or mute or unMute

  logmes("操作:" + playerId + ":" + action);
  var $playerWindow = $("#" + playerId)[0].contentWindow;
  if ($playerWindow) {
    $playerWindow.postMessage('{"event":"command","func":"' + action + '","args":""}', '*');
  }
}

function logmes(log) {
  if (log != "") {
    var mes = $("#mes").html();
    mes = mes + "<p>" + log + "</p>";
    $("#mes").html(mes);

    var scrollPoint = $('#mes')[0].scrollHeight;

    // $(".mesBox").scrollTop(scrollPoint);
    $('.mesBox').animate({
      scrollTop: $('#mes')[0].scrollHeight
    });
  }
}
</script>

ログをhtml上に出るようにしているのは、スマホでの動作確認に難儀した名残です。
LazyLoad的処理はざっくり書いたので、重くなったりしないか不安な部分。

また諸々の処理には、「IFrame Player API」が使われています。ついでに再生や一時停止ボタンも動作確認がてらに設置しています。APIのドキュメントはこちらから。
https://developers.google.com/youtube/iframe_api_reference?hl=ja

テスト的にざっくり書いたもので、しっかり検証が済んだコードではないので、安定した動作は保証しかねます。ご利用の際にはお気をつけください。

では👋👋

作者:佐藤あゆみ
発売日: 2019/05/01
メディア: Kindle版

2019-10-27

Google Colaboratoryで学ぶ、LSTMを使ったAIの自動歌詞生成

f:id:moba13:20191027190921j:plain
なんとなくシリーズ化している、ディープラーニング勉強会の第4回目を実施したのでそのメモです。

これまでの振り返り

■第1回 [理論] 実際AIって今どんなことできるのよ?会。

■第2回 [実践] Googleの無料学習環境を使って、ポチポチGANとやらを体験してみよう会。

■第3回 [実践] AIに学習させるデータを加工するのにもプログラムを使うと良いよね会。

ゼロから作るDeep Learning ―自然言語処理編

今回の概要

ディープラーニングラーニングの概要説明 → 画像処理ときたので、今回は文章処理編。

ちょうど先日、Googleが検索エンジンの一部に「BERT」と言われる、ディープラーニングによる文章解析システムを組み込んだニュースが発表されました。

jp.techcrunch.com
(関係ないですが、「BERT」の前身に「ELMo」というシステムがあり、セサミストリートのキャラ名が命名に含まれてますね。めちゃ蛇足。)

プログラミングによる文章処理はまとめて「自然言語処理 (NLP→natural language processing)」と総称されます。

作者: 斎藤康毅
出版社/メーカー: オライリージャパン
発売日: 2018/07/21
メディア: 単行本（ソフトカバー）
この商品を含むブログ (3件) を見る

Google検索も世界中のwebサイトの文章を解析して検索結果を作っているので自然言語処理ですし、Google翻訳も入力した文章を解析して違う言語に変換するということで自然言語処理です。

いま、人工知能は「Google検索」を大きく変えようとしている｜WIRED.jp

噂によると、一時のあいだ、シンハル氏は機械学習システムをGoogle検索に採用することに断固たる抵抗を示していたようだ。

これまでのGoogle検索は、人間の手による厳格なルールにもとづいたアルゴリズムを採用してきた。あるグーグル元社員によれば、ニューラルネットにおける解釈やその対応がより困難を極めるという懸念からだ。

ほんの2.3年前には、Google検索部門のトップの人も「ディープラーニングによる自然言語処理?まだまだ無理でしょ」って言っていたのは、今となるとなんだか不思議ですね。

diamond.jp

2016年末には、AIによる東大の入学試験合格を目指すプロジェクト「東ロボくん」が、今のAIでは長文の文脈理解難しい、といった理由でプロジェクトを凍結しました。

しかしその2年後にはGoogleがBERTを発表し、そのさらに先端のシステム「T5」では人間以上とも言える文章読解スコアを出しています。すごい。

このスライドで紹介されている「ウィノグラード・スキーマ・チャレンジ」で、現在、正答率が93.8%まで向上してる（グーグルのモデルT5-11B）。「人間レベルの正答率」の定義として、スライドの通り正答率90%を採用するなら、すでに「人間レベル」を超えているということになるhttps://t.co/5zUrZ33kq6
— 小猫遊りょう（たかにゃし・りょう） (@jaguring1) October 26, 2019

BERTについて詳しい解説はこちらなど。

ai-scholar.tech

RNN・LSTMって何?

そんな前振りがあってからの今回のお勉強会でしたが、「BERT」の前身「ELMo」にもLSTMは使われています。

RNN・LSTMについて僕が劣化コピーした解説をweb上にまき散らすのは嫌なので、詳しくは筑波大学の先生の講義動画がなぜか無料で見れるのでそちらを。

ocw.tsukuba.ac.jp

かなりざっくり言えば、ディープラーニングで時系列データを学習する時に利用されるモデルです。

「時系列データ」と言うと若干言葉がややこしいですが、平均気温の変化グラフや株価の変化、人の動作記録、会話データなど時間の変化があるデータは全部、時系列データです。

そんなデータを扱う時のベーシックなモデルがRNNです。そしてRNNだと長期の時系列データを学習できなかったので、その弱点を補ったのがLSTMです、みたいなかんじ。

今回のテーマは「AIの自動歌詞生成」ですが、「文章を書く」のも時系列があるデータ処理です。

人は皆、文章を書くとき、それまで書いた文章(過去)を元に、続く文章(未来)を想像しているのですから。

AI君にも、歌詞の導入が「会いたくて会いたくて」だったら、それに続く言葉はなんでしょう？とお題を出して答えてもらうわけです。

当然、いきなりそんな質問には答えられないので、事前にいっぱい歌詞のテキストデータを時系列データとして学習してもらいます。その学習を元に、AIが新しい歌詞を生みだしてくれるのです。

やってみよう

そんなこんなで、実際にAIによる自動歌詞生成を行った環境がこちらに。

毎度おなじみ、Googleが無料でディープラーニングの学習環境を貸してくれるサービス「Google Colaboratory」を使いながら、web上にある先人達のコードをほぼそのまま使わせていただきました。

主に参考にさせていただいた記事。

cedro3.com

後半、形態素解析も利用した学習例もありますが、正直蛇足かなぁという気もしています。

形態素解析は昔ながらの自然言語処理手法の一つで、文章を「意味を持つ最小限の単位(=単語)」に分割する方法です。

それを使い、AIに文章を1文字1文字渡すのでなく、前準備として文章を意味ごとに分割してから渡してみよう、という試みですが、効果があるかはなんとも言えません。

普通に考えると効果が高そうですが、ディープラーニングの学習は人間があれこれ手を加えたデータの方が良いのでは?と試行錯誤した結果よりも、データをそのまま与えた結果の方が良いことも多いのがまた不思議なところです。

ディープラーニングによる日本語解析の研究成果ってあまり公にされていないので、この辺実際どうなっているのかな？というのは、気になりポイントです。

データ準備・結果

コードはお借りしたものを使うので、学習用の歌詞データを集めるのが大変といういつものやつでした。

最初、30曲かそこらで学習したのですが、結果が芳しくなかったので、途中から適当にプログラムを書いて400曲(約20万字)ぐらい収集して入れたら良いかんじになりました。

(参考)

5曲10曲でも学習できないことはないですが、元の歌詞そのままのフレーズが出ることが多くあまり楽しくなかったので、良い結果を出したかったら最低100曲ぐらいはあると良いのかなぁと思います。

それでも歌詞は、そこまで文脈が必要なくとも"それっぽい"結果に見えるので対象として面白いですね。

例えば小説生成になると青空文庫といった権利的な問題もない大量のデータがあるのでやりやすいですが、小説における"それっぽい"文章はハードルが高くなりがちです。

僕がテストした時は、主にボカロ系のアーティスト楽曲をまとめたデータで学習させてみました。

ボカロみある pic.twitter.com/MK2vBxQK2L
— リョウ@スーパーインターネットお兄さん (@ryryo) October 22, 2019

学習元データの歌詞の文節ごとにスペースが入っていたため、通常のテキストを学習させる際よりも変な日本語が出づらかった気がします。改行が多いのも同様に。

プログラムからすると「スペース」も「改行」も一つの文字なので、「スペース・改行の次にはどんな文字が来る?」という質問が定期的に挟まり、その都度良い感じに内容がリセットされる印象でした。

逆にいえば、「それ」「君」「僕」「今日」など文頭によく出る単語が頻出し過ぎて、浅い文になりがちだったとも言えます。

その辺は元データのスペースや改行を一部削ったりすると、また違った結果になりそうです。すべては学習データしだい。

2019-09-23

Google Colaboratoryで学ぶ、Pythonによる画像加工＆DCGAN

f:id:moba13:20190923214439j:plain

非ITな人向けディープラーニング勉強会を、第3回目も実施したのでその内容をざっくり公開。前回・前々回の内容は以下に。

■第1回 [理論] 実際AIって今どんなことできるのよ?会。

■第2回 [実践] Googleの無料学習環境を使って、ポチポチGANとやらを体験してみよう会。

色々とご存知の方からすると、いきなりGANかよ、という話はありますがエンタメ重視で文系的な人も楽しめると良いなぁというゆるい方針でやっています。

今回の内容を実行した例。

SMAP5人から新たなメンバーを生んで、SMAPを救いたかった僕。 https://t.co/bfQ61N7Mga pic.twitter.com/iRcNSxjrDu
— リョウ@スーパーインターネットお兄さん (@ryryo) 2019年9月21日

AI勉強会、今回の概要 → Pythonの画像加工ライブラリを使ってみよう

前回(第2回)は、GAN(敵対的生成ネットワーク)による教師無し学習を体験してみよう、という会だったのですが、今回はその続編的な内容です。

最初は3分クッキング番組がごとく、「それでは、事前に用意した128x128の正方形画像500枚を読み込みます。」という流れで始めていたのですが、その部分もPythonで準備してみよう!というのが今回のおおまかな主旨でした。

ディープラーニングのプログラミングといえば大半がPython!というのが半ば常識となっている昨今ですが、それはPythonの文法がわかりやすいといったこともありつつ、ライブラリが豊富というのも大きな要因でしょう。

NumPyといった数値計算ライブラリはもちろん、画像加工のライブラリも充実しており、今回はその体験会というかんじでした。

プログラミングを日頃行う人からすれば、「ライブラリが豊富だから～」と話せば一発で通じますが、一般の人からすれば、「ライブラリー?何それ図書館?」という話なので、ライブラリとはなんぞやと説明するよりも、まず使ってみるのが一番では?という意図です。

そして加工した画像をそのまま使って、改めてDCGANの実行もしてみよう!という内容をまとめたGoogle Colabのノートブックをこちらにアップしてあるので、ご覧くださいませ。

退屈なことはPythonにやらせよう ―ノンプログラマーにもできる自動化処理プログラミング

事前準備:
友達でも有名人でも良いので、加工したい人物画像いっぱい。サイズとかはプログラムでまとめて直すので変更不要。

短いコードは僕が適当に書いていますが、大半のコードはwebに公開されていたものをColab内で実行できるよう一部改変したものになっています。

だいたい全部コメントに引用元を書いている…はずですが、漏れがあったらご指摘いただければ幸いです。

ディープラーニングの画像学習データを作成する時のライブラリというと、「Pillow」「OpenCV」の2つをよく目にすることになりますが、それらを活用するサンプルコード集になっています。

また合わせて、画像の水増しをするために、ディープラーニング用のライブラリの一つ「Keras」に搭載された機能の一つ、ImageDataGeneratorクラスも使っています。

ディープラーニングの学習では、画像が多く(数百枚～数万枚)あった方が精度が向上することがあるのですが、中々それだけの画像を集めるのは大変です。

そこで学習手法として、1枚の画像を左右反転・色味変更・上下左右に少しずらす、といった方法でコピーするという処理を挟みます。全部オリジナル画像の方がもちろん良いですが、枚数が少ないよりは水増しした方が良いかんじに。

そんなこんなでノートブック内で行っている画像処理は、以下の5つです。

・画像のファイル形式の統一(今回はpngに統一) → Pillow
・複数の画像を1枚に統合 → Pillow
・人物画像から、顔部分だけを正方形に切り抜く → OpenCV
・画像のサイズを統一する → OpenCV
・画像の水増し → Keras

顔検出について

勉強会では、顔画像を切り抜く処理が「おぉ!」と盛り上がっていました。

こんなかんじで、プログラムが人物画像から顔部分を認識して切り抜いた画像を生成してくれます。

f:id:moba13:20190923205255j:plain
ディープラーニングの学習のために、顔画像を集めて1枚1枚手動で画像加工ソフトを使って正方形に切り抜いていきましょう、なんていうのはやってられないので、こんな形で自動化できる部分は自動化するのは重要な工程です。

『退屈なことはPythonにやらせよう』が7万部も売れているらしいので、間違いない。

作者: Al Sweigart,相川愛三
出版社/メーカー: オライリージャパン
発売日: 2017/06/03
メディア: 単行本（ソフトカバー）

最終的な現場では、自動化できない部分を手動で一枚一枚加工したデータセットを作ることが重要だったりもしますが、個人の勉強ではそこに時間をかけられないですからね。

ちなみに、今回利用したコードでは顔画像検出精度は2/3程度という肌感でした。当然元データの質によりますが、少しでも斜めを向いていたりすると、うまく検出できないな、という感覚です。

顔検出は他にも色々方法があるようで、以前別の機会で使った、ディープラーニングによって構築された「Face Recognition」がもっと良いかんじでした。

github.com

静止画からの顔検出はもちろん、動画からの顔検出にも対応。

顔の類似度判定も可能で、以前、基本1人の顔写真、数百枚の中に数枚混じった別人の画像を除去する時にとてもお世話になりました。

「ライブラリを使えばたった数十行のコードでこんな便利なことが!」と言うのは、数百・数千行と書かれたライブラリのコードを軽視しているように聞こえてしまうかもしれないですが、感謝の念を込めつつ活用していくことがとても大切です。

Kerasで書かれたDCGANの実行

前回、DCGANの実行には、TensorFlowで書かれたこちらのコードを使っていました。

github.com

ただ以前はそのままcloneして実行できていたのですが、最近のGoogleColab内のアップデートの影響かそのままだとエラーが発生する事態に。

もう4年も前にPython2で書かれているものだし、仕方ない。

原因を特定して書き直しても良かったのですが、今回画像の水増しにKerasを使っていましたし、せっかくならとKerasで書かれたDCGANのコードを探してみました。

参考記事:

GitHub - ryryo/keras_dcgan_origin

ベースは「keras GAN 自前データセットで画像生成」のコードを使わせていただきましたが、ちょっと生成結果が微妙だったので、generatorとdiscriminatorのモデル部分だけ「DCGANでISSEY MIYAKEをデザインする」のコードに変更し利用しました。

colabのノートブック内にも書いてますが、それをまとめたものはこちらに。

〆

GANの実行は、今回で終わりの予定でいます。

ディープラーニング=画像であれこれ、だけでは決してないですが、「ディープラーニングによってAIが目を持つようになった」と言われることもあり、画像を扱うのはとっかかりとして面白いですね。

ディープラーニング以前であれば、顔認証のプログラムを書くといったらめちゃ大変なことだったと思うのですが、制作にかかる時間が減り、精度は逆に向上しているのは驚きです。

次回以降は、名言生成・歌詞生成といった、文章生成をしてみたいね～と話しているところですが果たしてどうなるのか、乞うご期待。

2019-07-07

Google Colaboratoryで学ぶ、ディープラーニングのDCGANによる教師無し画像生成

f:id:moba13:20120718190846j:plain
以前、こちらの記事に書いたようにディープラーニングについて専門家でもない僕がゆるく非IT系な方向けに話す、という勉強会をしたのですが、まさかの第2回も開催したのでその内容も公開することにします。

前回は、単にどんなディープラーニングの技術が実際にあるかをまとめて紹介するだけだったのですが、今回は実践編として既存のディープラーニングプログラムを動かす、ということをしました。

サンプルコードをgithubからコピーして動かすだけとはいえ、数年前だったら環境構築で全員挫折していただろうに、今は学習環境が整っていて素敵ですね。

概要の説明なども含め、1～2時間ほどで一応みなさん実行できました。

GANって何?

= 敵対的生成ネットワーク(Generative adversarial networks)

前回の記事にも書いてますが、以下のようにAIが入力した画像を学習し、オリジナルの画像を生成するよ!という技術です。

詳細な説明記事はweb上にたぶん100万記事ぐらいあります。

概略だけ言えば、ジェネレーター(画像の生成器)とディスクリミネータ(画像の識別器)という2つのモデルを作成し、ジェネレーターは本物っぽい偽画像を作り、ディスクリミネータはそれが偽物かどうか見抜く、というバトルを繰り替えす中でお互い成長し、最終的にまるで本物のような画像が作れるという、青春バトルものマンガのようなAIです。

肖像権フリーの女の子ジェネレーター
様々な用途にお使いいただける、肖像権フリーの女の子を簡単に作成できます🥰#StyleGAN #AI https://t.co/PoR9TLKw3v pic.twitter.com/n7cho5pL96
— アイドル顔生成AI-YOUJO GENERATOR@個人開発 (@youjo_generator) April 10, 2019

Interp video! pic.twitter.com/YRFISA0YZq
— Michael Friesen (@MichaelFriese10) May 12, 2019

StyleGANのアニメキャラクター生成その2 pic.twitter.com/N0amTtWvsk
— Ryobot (@_Ryobot) February 16, 2019

約9万枚のラーメン二郎画像で StyleGAN を試しました。
公式の実装を使って、最大解像度を512x512pxに下げて学習しています。
まだ学習途中(50%ぐらい)ですが、以前のPGGANよりさらにリアルになっているように思います。#ラーメン二郎 #GAN pic.twitter.com/HWZzWIOn9a
— Kenji Doi (@knjcode) March 5, 2019

本来的な学習ステップとしていきなりGANをやるのは、行程をすっ飛ばしまくっていますが、仕事でもないしおもろいことやらないとみんな眠いよね!というチョイスでした。

また、上記の例はGANの中でも、styleGANという新しめな技術でさらにその中でも学習がうまくいったものを公開しているように見受けられます。

今回は、styleGANでなく最初期に公開されたDCGANという、GANを作るチュートリアルの時にはほぼこれが出てくるってやつを使いました。モデル構造もシンプルなので理解しやすいですが、その分そんなにはうまく画像は生成されません。

僕がポケモンやドラクエのモンスターを数時間学習させたものでもこんなもんです。

GANで新たなポケモンを生み出したかった夢の後。 pic.twitter.com/MbgbuEmOgN
— リョウ@インターネット先生 (@ryryo) June 4, 2019

10時間ぐらい回したやつ pic.twitter.com/JM9G213eQr
— リョウ@インターネット先生 (@ryryo) July 6, 2019

手書き文字ぐらいのシンプルなものなら、割と良い具合に。

結果.gif pic.twitter.com/CDW5tHII7r
— リョウ@インターネット先生 (@ryryo) 2019年7月8日

論文自体は2015年11月に公開され、使ってみました!みたいな記事も一番出てきますね。APIとして公開されているGANもDCGANによるものが、現状まだ多い気がします。

arxiv.org

実装されたコードはこちらのものを利用しました。

github.com

TensorFlowで書かれたもので、今ではkerasやchainer、PyTorchといったより手軽にコードを書けるディープラーニング用のライブラリ製のものもたくさんgithub等で公開されていますが、このTensorFlow製のものがオプションも豊富で使いやすかったため採用しました。

Python2で書かれているので、実行環境がPython3だとそのまま使えないのだけが詰まりどころでしょうか。

model.pyを見ればジェネレーターもディスクリミネータも、畳み込み層を4層入れてるだけなんだなぁとか、ぼんやりはわかって面白いです。

必要な事前準備

GANの学習のためには、事前に「AI君、キミはこれらの画像を元に、新しい画像を作ってね!」という画像の準備が必要です。

最低でも100枚ほど、精度を上げるためには数千枚あった方が良いです。細かいことを言うとこんなかんじ

・画像フォーマットの統一 (今回はpngに統一でやりました)
・画像の大きさの統一 (デフォルトでは108px×108px)
・exif情報の削除 (Photoshopのバッチ処理で画像加工時などについてしまうケースもあります。)
・zipに圧縮(フォルダごと圧縮でなく、画像をすべて選択の上、圧縮してください。サブディレクトリが発生しないように。unzip時にオプションで解決しても良いけど)

この準備が手間ですが、ディープラーニングはデータ集めが大事っていうのはこういうことなのだなぁというぷち体験ができます。

勉強会では、インターネットの大海に転がっていたポケモンの画像一覧などを共有しましたが、さすがに公に2次配布するのは色々よろしくなさそうなので、ここでは控えておきます。

研究用に公開されている画像も多くあり、「機械学習データセット」などでググれば商用で無ければ自由に使える画像データも多く手に入るはずです。

無料のディープラーニング学習環境 Google Colab

いざディープラーニングをやろう!と言っても、自身のmacでその実行環境を作るだとか、さらに高速な学習完了を作るためにはハイスペGPUを搭載したパソコン(25万円～できれば100万円ぐらい)を購入する必要がある、という準備が必要で詰みます。

そんな中、2018年頃登場したのが、Google Colaboratory（通称 : Google Colab）です。

■図解速習DEEP LEARNING | Amazon

Ummmm, Colab now lets you use GPUs to accelerate your notebooks? In the cloud? For free? 😍🤓😍🤓😍🤓 Step-by-step how to: https://t.co/CENGVweaTy
— Rachael Tatman (@rctatman) January 19, 2018

ブラウザさえあれば、環境構築不要・無料で機械学習の学習環境が作れる??マジかよGoogle最高すぎでは???と界隈ではかなり話題となっていました。

ブラウザ経由でクラウド上にあるGoogleのPCを使うイメージなので、windowsの方でもmacと同様に使うことができます。

無料な分、12時間ごとに全データの削除がかかるといった制限はあるのですが、勉強に使うだけであれば十分ですね。

また、Colab上に記載したコマンドはノートブックとして共有も可能で、チュートリアル的なものを作成するのも容易です。今回は、この機能を使ってみなさんにポチポチと実行してもらいました。

書籍では、こちらの本がディープラーニングの各種プログラムを実行するためのColabノートブックをたくさん制作されていて良かったです。

巷で話題の技術書典で販売されていたものを書籍版として加筆したもののようですね。

DCGANを実践するためのGoogleColabノートブック

というわけで、僕が作成したDCGANを実行するためのノートブックを公開しておきます。

上記ファイルを開き、画面左上の「PLAYGROUNDで開く」をクリックすれば、ご自身のColab環境で学習をすることができます。

ただこの内容も、下記記事を参考にしたものであり、僕が作ったと言えるものではありません。追加で生成結果画像をGifアニメ化するコードを追加してあるぐらいです。

この記事の制作者様、DCGANのコード制作者様、DCGANの論文制作者様、GoogleColabの制作者様、TensorFlowの制作者様、Pythonの制作者様、Linuxの制作者様、各種PCパーツの製作者様方..etc に感謝の念を遠隔で送ってから使いましょう。
基本は、このファイル内にある各コマンドにカーソルを合わせると出てくる再生ボタン(「▼」を横にしたようなボタン)を押していけば、実行できるようになっています。コマンドを編集した後であれば、Shift+Enterで実行。

書き換えが必要な部分は捕捉コメントを書いてあるので、それに沿って変更し実行してください。

が、プログラムをしたことが無い方はどこかしらでエラーが出て詰まります。

勉強会でも基本的にほぼそのサポートをするのがメインでしたが、エラーの内容を見て適宜「ls」コマンドでファイルの存在を確認したり、「pwd」コマンドで自分が今いるフォルダを確認しながら、実行していってください。

cd、mkdir、cp、unzip、ls、pwd、git clone ぐらいのコマンドならなんとなく知っているよ、という人であれば余裕だと思います。

簡易Q&A

Q.プログラムの学習が完了したっぽいけど、「/home/DCGAN-tensorflow/out/(学習結果フォルダ)/samples」に結果画像が1つも出ないんですが?

A. 画像枚数が少なく学習回数が少ないと、結果を出力するまでのポイントに届かず、結果を出す前に学習が終わっている可能性があります。

なので、学習を実行するコマンドを下記のように書き換え、学習回数増加と、画像を出力する頻度減をしてみてください。

!python2 main.py --dataset (データセットフォルダ名) --input_fname_pattern="*.png" --epoch=100 --sample_freq=100 --train --crop

--epochが学習回数。(サンプルだと25になってる)
--sample_freqが結果画像を出力する頻度。(デフォルトだと200になってる)

Q.もっと長く学習させて良い結果を作りたいです。

A.学習を開始するコマンド内の「--epoch=25」を「--epoch=10000」などに書き換えて実行すればokです。(これで1万回学習を実行)

ただ、たくさん学習する際にはいくつか補足が必要なので解説します。

1.Colabの時間制限問題

GoogleColabは無料で使えるのですが、その代わり12時間ごとにデータがすべて削除されるという制限があります。

そのため、学習は最高でも数万回程度が限度かと思います。(画像の枚数で前後)

また画像の枚数が数百枚程度だと、epoch3000回程度であまり画像が代わり映えしなくなってきます。通称「過学習」

2.ブラウザ開きっぱなしが必要問題

GoogleColabは12時間がリセットかかるのと合わせ、1時間半画面を開いてなくてもリセットがかかるという制限があります。

また画面を開いていたとしても、別のタブを開いていたり、ブラウザ以外のアプリを見ていても10分ほどでセッションが切れる(キミ、画面もう見てないよねという判定)がされます。

なので、長時間学習する際には、Colabの画面を開いたまま他の作業はせず放置する必要があります。また、その間PCがスリープモードになってもダメなので、PCの設定を変えPCを放置してもスリープしない設定に変更してください。

3.学習完了するまで、結果の確認できない問題

基本的には、学習が完了するまで結果の画像を確認するコマンドを実行することができません。

しかし、何時間も学習を持つのも寂しいので、途中で都度結果を確認する方法があります。(放置したまま12時間経ってしまって、データ消えちゃうとより寂しい。)

それは、学習しているタブとは別に、もう一つ別タブでGoogleClabを開き、そこでコマンドを実行するという方法です。

これなら、学習を進める処理と平行して、都度学習した結果を確認できます。そのためのノートブックも公開してあるので、ご利用ください。

4.学習中にブラウザが落ちる問題

長時間、学習をさせているとブラウザがメモリを大量に消費しブラウザが落ちるという問題を確認しています。

(Windowsだとブラウザが固まる、macだと「PCの容量が足りません」的なメッセージが出る。)

この問題は、学習のログである
[ 1 Epoch:[ 0/50] [ 0/ 11] time: 5.4089, d_loss: 7.00813675, g_loss: 0.00110264
みたいな表示が溜まると、起きてしまう問題のようです。

そのため、元のプログラムからこのログ表示をしないように変更したファイルをアップしたので、そちらに上書きを行い実行してみてください。

(print文をコメントアウトしただけのgithubに公開するまでもないものをdropboxで共有しているものなので、そのうち消してしまっているかもしれません。)

この処理は、先ほど貼ったColabノートブックの「KTP-学習中に平行して実行結果を確認する用.ipynb」の一番最後、「modelファイル上書き」という部分に記載してあります。

以上！

2019-06-18

AI・ディープラーニングついて話した内容をまとめておく

f:id:moba13:20120618182927j:plain

こんにちは。僕です。

先日なぜか、主に非ITな方々に向けてディープラーニングについて説明する場があり、色々とメモっておいたことをブログにも放出しておくことにしました。

日頃業務ではディープラーニングには触れることはなく、ゴリゴリのエンジニアでもないwebディレクターの書いた内容になるので、話半分でお願いします🙏

日常的なコミュニケーションにおいて「だいたい合っていること」を話すのは普通のことですが、技術の場において「だいたい合っていること」を話すのは罪深いことだったりします。すべて正しく記述するのがプログラムってものですから。

その一方、世の中では技術に明るくない、なんか偉い人・営業・コンサルタント・ブロガーみたいな方々が、「だいたいすら合っていない」内容をドヤ顔で語っており、oh..知識の二極化が進む..!と悲しくなるので、恥ずかしながら公開しておきます。

マジで違う部分に関しては、優しくご指摘いただけると幸いです。

人工知能って何？

f:id:moba13:20190618002425j:plain

人工知能は現在第3次ブームと言われますが、これまでの遍歴を「第1・2次」「第3次」の2つのに分け、解説を行いました。

第1・2次ブーム　「人間が知能を理論的に再現していく流れ」

出てくる用語としては「記号処理」「知識ベース」「ルールベース」「エキスパートシステム」といったものがあります。

「人工知能」と言ってはいますが、機械に考えさせるのではなく、人の考え方をプログラムで疑似的に再現しよう、といった分野です。

古い技術のように言われることが多いですが、現在のインターネット(www)や、従来の検索エンジン、機械翻訳などは、この技術を応用した先にあるものです。

第3次ブーム　「機械が自ら学習する。機械学習・深層学習(ディープラーニング)」

人間のニューロンを模した回路を作れば、機械がデータを勝手に学習してくれるのでは?というのが、現在ブームとなっている機械学習・深層学習の分野です。

概念自体は、機械学習-1960年頃深層学習-1980年頃に生まれていますが、精度が低く〜第2次ブームのように、結局は人が機械にルールが与えないとダメだよね、と言われる時代が続きました。

それが、2012年になり画像認識(有名なGoogleの深層学習による猫画像認識のニュース)の分野で人間が作ったアルゴリズムの精度を超えた!ということで話題となりました。

- 機械学習と深層学習の違いは何か

深層学習は、機械学習の手法の一つです。機械学習 > 深層学習。

共に、大量のデータの中から「特徴をつかむ」ことを試みます(=学習)。その方法が従来の機械学習と、深層学習では異なります。

従来の機械学習では、特徴のつかみ方自体は人が教えます。深層学習では特徴のつかみ方も自身で模索します。

これが深層学習はその中身がブラックボックス(人間がルールを定義していない)だ、と言われる所以です。

また、その学習を可能にするために、人工ニューロンを何層にも深く重ねることから、「深層」学習と呼ばれます。

機械学習は、人がルールを用意した浅い層のネットワークで学習する。
深層学習は、人がルールを設けない深い層のネットワークで学習する。

といった具合です。

そして、ハードウェアの性能向上や、畳み込みニューラルネットワーク(CNN)という手法で精度が向上したことで、いま現在深層学習が人がルールを作る方法よりも高い精度を誇るようになったのです。

(だいぶ端折った解説なので、適宜詳しい解説を見てください🙇)

ディープラーニングで出来ることってなんだ

f:id:moba13:20190618104655j:plain
正確にはもっと細かく分類できるのですが、ここでは

「認識/予測」「生成」「行動」×「数値」「画像/動画」「文章/言語」「音声/音楽」というマトリクスに分けて事例紹介をしました。

YouTubeやTwitterの動画を多く貼っていますので、言葉を見るよりもぜひそちらを直接見ていただいた方がイメージしやすいかと思います。

【数値】

・認識/予測

例えば株価、売上、来店数といった数値予測の分野で、ディープラーニングの大きな成果を聞くことはあまりありません。

というのも、数字の分析であれば従来の統計的なアプローチで十分なケースが多いためです。

一方で、下記のようなニュースもあり、必ずしもディープラーニングが生きない、ということでも無さそうですが、あまり得意分野とは言えません。

www.itmedia.co.jp

そんな中世の中では、「AIでデータ分析!」みたいな商品も見受けられるので、そんな時は、Excelで計算しているような従来の技術にAIと冠を付けているだけなのか、ディープラーニングなのかはよく確認した方が良いかもしれません。

手段と目的の話なので、目的さえ達成できるなら、古かろうが新しかろうがどちらでも良いんですけどね。

【画像/動画】 Hot!

ディープラーニングが今一番得意とするのがこの分野です。「機械が目を持った」と言われる所以。

・認識/予測

- 画像認識

注目を集めたのが2012年。この年に人工知能の画像認識コンテスト「ILSVRC」で深層学習による画像認識の精度が、従来の機械学習での精度を超えました。

この年の誤認識率は約17%ほどですが、2015年には3.5%ほどにまで下がっています(人間は5%ほど誤認識する。)

news.mynavi.jp

- 物体検出 YOLOv3

動画からの物体検出で有名なモデルがYOLOです

物体検出の活用として有名なのは、やはり自動運転でしょうか。一方で自動運転のすべてがディープラーニングではなく、走行ルートの決定には既存の技術が使われているケースが多いです。

note.mu

f:id:moba13:20190618104040p:plain
(上記記事から引用)

海外では、走行含めすべてディープラーニングで行おうとする研究もありますが、それは後ほど強化学習の項目で紹介します。

-顔認識
いわゆる顔パス的な機能も、主に海外で実装され始めています。

🇨🇳学校に顔認証広まってると言うが、
深センの小学校の顔認証こんな感じか！

pic.twitter.com/4Dhuw47LAd
— Chelsea Kunimoto | AI姉さん (@knmt_ai) June 15, 2019

国内でも以下のような事例があります。

www.itmedia.co.jp

最近、話題になったSnapchatによる2人の顔の入れ替えなども、この技術が応用されているかと思われます。

tiktokのフィルターやスタンプにも。

皆さま
TikTokのフォローとハートボタン

ポコチャの雪森れいら
アカウントが出来てます💗💗

「雪森れいら」で検索して
フォローして下さい( ´∀｀)お願い🤲 pic.twitter.com/mBXBQwG8Mb
— REIRA 🍓 相互アカ (@yukimorireira2) April 18, 2019

- ドローンとの組み合わせ
ドローンに搭載したカメラとの相性が良く、建造物 / 太陽光パネル等の傷点検への活用事例も多く見受けられます。密猟者など発見のための無人パトロールにも。

- 電車車両の点検

🇨🇳上海の新幹線、車両メンテナンスが必要な部分をAIスキャナーで検知し、欠陥があればシステム通知。

昔は8名で1時間半かかっていた作業が、2つのAIロボット＋4名で70分以内に終わるように。

今月から正式稼働で、今後も広がるAI電車メンテナンス事例。

pic.twitter.com/rdWu03lJYE
— Chelsea Kunimoto | AI姉さん (@knmt_ai) May 26, 2019

- 癌の検出

business.nikkei.com

- Adobe Sensei
Photoshopなどで有名なAdobeも、各ソフトに画像認識技術を応用した機能を提供し始めています。

・生成

人工知能感(AIが新しいものを作り出している感) があるのが生成の分野です。

- GAN

有名な技術が、GANです。以下のような画像生成例があります。

styleGAN

アイドル画像生成

肖像権フリーの女の子ジェネレーター
様々な用途にお使いいただける、肖像権フリーの女の子を簡単に作成できます🥰#StyleGAN #AI https://t.co/PoR9TLKw3v pic.twitter.com/n7cho5pL96
— アイドル顔生成AI - YOUJO GENERATOR (@youjo_generator) April 10, 2019

ポケモン画像生成

Interp video! pic.twitter.com/YRFISA0YZq
— Michael Friesen (@MichaelFriese10) May 12, 2019

アニメキャラ画像生成

StyleGANのアニメキャラクター生成その2 pic.twitter.com/N0amTtWvsk
— Ryobot (@_Ryobot) February 16, 2019

ラーメン二郎画像生成

約9万枚のラーメン二郎画像で StyleGAN を試しました。
公式の実装を使って、最大解像度を512x512pxに下げて学習しています。
まだ学習途中(50%ぐらい)ですが、以前のPGGANよりさらにリアルになっているように思います。#ラーメン二郎 #GAN pic.twitter.com/HWZzWIOn9a
— Kenji Doi (@knjcode) March 5, 2019

線画から背景風が画像を生成するGauGANも最近話題でした。

DeepFake(偽動画)もGAN技術の活用です。

オバマ大統領

シュワルツェネッガー → シルベスター・スタローン

- pix2pix

別のところでは、pix2pixという技術も注目されています。

線画に自動着色

白黒写真に色付け

【文章/言語】

・認識/予測

- Seq2Seq

文章分野で一番話題なのはやはり、Google翻訳の精度向上でしょう。ここではディープラーニングのSeq2Seqという技術が使われいます。

-その他、ディープラーニングによる文章解析例。

- 文章の要約
- スパムメール判定
- 対話(Microsoftのりんななど)

- word2vec

深層学習ではなく、機械学習のものですが、word2vecも言語処理技術として以前注目を集めました。文章内の単語同士の意味の近さを計算する技術です。

ロゼッタストーンなどの古代文字の文章解読の際の考えが元にあり、近くに頻出する単語の意味は近い(「東京」と「首都」は意味が近い)、という検出を機械が行います。

word2vecで分析したデータを、深層学習に使うといったデータ加工にも使われているようです。

活用事例

developers-jp.googleblog.com

・生成

-RNN / LSTM

文章生成では「RNN」「LSTM」といったディープラーニングの技術が使われるケースが多いです。

機械学習で時系列データを扱う手法で、文章なら前の文字から次の文字を予測するといった形で使われます。しかし、文章全体の文脈を考えるといったことが出来ず、あまり精度の高いことは現状できていません。

活用例

nus-miz.hatenablog.com

- GPT-2

現状ディープラーニングの文章生成精度は微妙、書いたところですが、最新の研究では高い精度を誇るモデルも登場しています。

www.itmedia.co.jp

1行書けば、それに続く文章が自動生成されます。その精度の高さから、フェイクニュースやスパムサイトへ利用される恐れがあり、すべての技術が公開されない、という判断がされています。

【音声/音楽】 Hot!

音の分野も、画像と並ぶディープラーニングの大きな成果が得られている分野です。

・認識/予測

- スマートスピーカー

有名なのが、GoogleHomeやAlexaを始めとしたスマートスピーカーですね。

- 文字起こし

音声の文字起こしもかなり精度が向上しました。

ledge.ai

勝間和代さんも執筆活動の多くを音声入力化していると聞きます。

katsumakazuyo.hatenablog.com

その他、音楽界隈でもこのような実例が出てきています。

- 演奏から、特定の楽器の音だけ抽出
- 曲から譜面を起こす(AI耳コピ)

・生成

- WaveNet

人工音声生成に関しては、WaveNetという技術が有名です。

先日、アメリカの一部地域で「Google Duplex」というレストランや美容院の音声AIによる電話予約代行サービスも開始されました。

youtu.be

他にも、電話の自動応答・迷惑電話ブロックという機能も提供され始めています。

japanese.engadget.com

- 音楽生成

音楽生成分野も、文章生成と同じくまだまだ拙いですが、たびたび精度の上がった報告がされています。

createwith.ai

Googleが提供する、新しい音を作るシンセサイザー NSynth Super

【強化学習】

ここまで紹介した事例とは少し変わりますが、ディープラーニングの中で大きな注目を集めるのが深層強化学習の分野です。

AI囲碁プログラムのAlphaGoが特に有名ですが、機械に行動に対する「報酬と罰」を設定し、基本的な動作方法だけを教えた上で、最も最適な行動を機械自身が模索していく方法です。

ゲームで言えば、AIが最初はコントローラーをガチャガチャ適当に動かす中で、スコアが高くなる・ゲームオーバーにならないプレイ方法を身につけていく、という学習方法です。

- DeepMind社

AlphaGoを開発したDeepMind社は現在、StarCraft IIというゲームの攻略にも挑んでいます。

「DeepMindのゲームAI「AlphaStar」、StarCraft IIでプロゲーマーに完勝。しかし条件平等化で1敗を喫す」

japanese.engadget.com

(完勝と書かれていますが、AIが超有利な環境での場合です。)

囲碁や将棋は「完全情報ゲーム」と呼ばれていて、盤面上に相手の手札も含めすべての情報が見えるゲームを指します。

一方現在はそうではない、「不完全情報ゲーム」の攻略も目指している状態です。麻雀・ポーカーといった、相手の手札を読んで戦うゲームでは、まだAIは人に勝ち切れていない、ということです。

- OpenAIGym

強化学習用の学習環境を提供しているのが、OpenAIという団体です。

gym.openai.com

主にAtari社のゲーム(インベーダーやブロック崩しなど)を、PC上で実行・プログラムで操作しやすくするツールキットを提供しています。

ブロック崩しを強化学習した例

昨年は、OpenAI Retro Contestというセガのソニックで一番ハイスコアを出すコンテストが開催され、1位はこのようなプレイをAIが行っています。

ソニックのAIコンペ1位の人のやつ、バグっぽい挙動発見してて面白いhttps://t.co/K9xUAqgpN0 pic.twitter.com/dHwZ0BzRgp
— koyumeishi (@koyumeishi_) June 25, 2018

偶然にもバグを発見する動作をしていますが、強化学習は今後ゲームのデバッグ作業やゲームのバランス調整にも活用されていくことが期待されています。

- 自動運転

先に、自動運転は部分的にしかディープラーニングを活用していない、という話をしましたが、イギリスのベンチャー企業ではすべてをディープラーニングする研究が行われています。

jp.techcrunch.com