{"data":{"site":{"siteMetadata":{"title":"bauhausify","siteUrl":"https://www.bauhausify.com","subtitle":"美大出身のWEBエンジニアリング奮闘記","descriptionMyself":"\n多摩美術大学
プロダクトデザイン専攻卒業 ->
GUIデザイン会社勤務 ->
\n現在フロントエンジニア
\n
\nMy site ->
\nwww.mwrote.com\n"}},"markdownRemark":{"id":"156242f5-f991-540a-8b82-2321b7bbc8a9","html":"

\n

なぜかp5jsと間違えやすい、ml5jsという機械学習をブラウザ上で実行するライブラリが気なったので、その所見を書きたいと思います。
\n(p5jsはPtsjsによる実践ジェネラティブアートで紹介しています。)

\n

\n \n \n \n \n \n \n \nまず機械学習について簡単に

\n

以前私は、PythonのKerasを用いて少しだけ機械学習に触れたことがあります。
\nその時の、雑感を端的に説明すると、

\n\n

この２つが機械学習の大きなフェーズとなり、
\n一番重要な、そして用意するのが難しい学習のためのデータが存在します。
\n開発者側はデータから学習したモデルを事前に用意し、
\nなんらかのサービスのユーザーはそのモデルをもとに機械学習を実行します。ここが推論です。

\n

そのときの機械学習への印象は以下です。

\n
    \n
  1. 学習させるためのデータが必要、より多く、正確なもの
    2. \n
  2. 学習にはマシンスペックが必要、お金を出せば出すほど早くできる、時間とお金の相談
    3. \n
  3. 学習させるノウハウは専門家レベルの習得に時間がかかる、素人はトライアンドエラー
    4. \n
  4. 学習したモデルをもとにインタラクティブに推論を得るにもある程度のマシンスペックがいる
    5. \n
\n

1-3は到底ブラウザで実行するにはお門違いです。
\nml5js は4の実行させるところに主眼をおいたものに思われます。

\n

では実際にサンプルを触ってみます。

\n

\n \n \n \n \n \n \n \nml5jsのはじめのサンプルを試す

\n

ここからの内容は公式のチュートリアルに沿っています。その簡略版です。

\n

まず<head>内にml5jsとp5jsを読み込ませます。
\nなぜp5jsを使うのかというと、機械学習は画像に対してわかりやすい効果がだしやすいので、画像を取り扱いやすいp5jsが採用されたのでしょう
\nこの記事では最低限のもののみ読み込みます。

\n
<!-- p5 -->\n<script src=\"https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.min.js\"></script>\n<!-- ml5 -->\n<script src=\"https://unpkg.com/ml5@0.3.1/dist/ml5.min.js\"></script>
\n

つぎにp5jsのみの機能を使いcanvas要素を作成し、画像を表示します。
\n今回は、この画像が何の画像なのかを推論します。

\n
let img;\n\nfunction preload() {\n  img = loadImage('https://res.cloudinary.com/mwrote/image/upload/c_scale,w_200/v1560441316/bauhausify/_SDI0792.jpg');\n}\n\nfunction setup(){\n  createCanvas(200, 133); // 今回読み込んでいる画像のサイズ\n  image(img, 0, 0);\n}
\n

そこで、肝心のml5jsの登場です。追加しているのは4箇所です。

\n
let classifier, img; // ここと\nfunction preload() {\n  classifier = ml5.imageClassifier('MobileNet'); // ここと\n  img = loadImage('https://res.cloudinary.com/mwrote/image/upload/c_scale,w_200/v1560441316/bauhausify/_SDI0792.jpg');\n}\n\nfunction setup(){\n  createCanvas(200, 133);\n  classifier.classify(img, gotResult); // ここと\n  image(img, 0, 0);\n}\n\n// ここ\nfunction gotResult() {\n\n}
\n

まず、TensorFlowの提供する学習済み画像モデルMobileNetを使うと宣言し、

\n
let classifier = ml5.imageClassifier('MobileNet');
\n

画像を読み込ませ、callback関数のgotResult(名前なんでもOK)を指定します。

\n
classifier.classify(img, gotResult);
\n

すると画像解析の数秒後にgotResult関数が呼ばれます。

\n

事前にhtmlにて簡単な受け皿を用意し、

\n
<span id=\"result\"></span>
\n

gotResult関数には以下を書きましょう。

\n
function gotResult(results) {\n  console.log(results);\n  document.querySelector('#result').textContent = results[0].label;\n}
\n

すると、ブラウザコンソールには画像の推論結果が表示され、
\nspan#result要素にはそのテキストデータが表示されます。

\n

詳しいサンプルコードは、記事冒頭のCodePenのリンク先でご覧いただけます。

\n

\n \n \n \n \n \n \n \n雑感まとめ

\n

冒頭の機械学習の概要と照らし合わせせつつ、雑感としてまとめます。

\n\n

やはり、ブラウザ上ではなかなか現状厳しいデータですね。
\nしかし、ブラウザで実行できることが最大のメリットです。
\nそして、クライアント側でのモデルの読み込みと推論がこんなに簡単にできることが触っていて楽しいですね。

","fields":{"slug":"/2019-08-21_ブラウザで機械学習が実行できるml5jsを試してみる/"},"tableOfContents":"","frontmatter":{"date":"2019.08.21","title":"ブラウザで機械学習が実行できるml5jsを試してみる","cover":"","category":"Coding","excerpt":"フロントエンドエンジニアは絵を描くのが苦手だけど、絵をブラウザで表示するのは得意です。それと同じことが、機械学習でも起こるのでは？そんな近未来を予感させてくれるような、ブラウザ実行型のライトウェイトな機械学習ライブラリml5jsを紹介します。"}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"id":"156242f5-f991-540a-8b82-2321b7bbc8a9","next":{"path":"/2019-08-15_たった4ステップでVueを使う方法/","title":"たった4ステップでVueを使う方法","category":"Coding"},"prev":{"path":"/2019-08-24_Bodymovinでサイズを拡大しても綺麗なWeb用アニメーションを作る方法/","title":"Bodymovinでサイズを拡大しても綺麗なWeb用アニメーションを作る方法","category":"Design"},"relatedPosts":[{"id":"2e52640f-36d6-5268-99ea-9d58492ffec5","fields":{"slug":"/2019-09-14_p5-jsを本番サイトで使う方法/"},"frontmatter":{"title":"p5.jsを本番サイトで使う方法","date":"2019-09-14T00:00:00.000Z","excerpt":"p5.jsをいざプロダクションビルド(本番サイト向け)で使う場合、一体どのような方法で使うのが最適でしょうか。p5.jsの特徴を踏まえ、代表的な使い方をご紹介します。","templateKey":"post","category":"Coding","propertags":["p5js"],"commontags":["generative","javascript"]}},{"id":"d5a69a1d-62b7-5a8b-8f18-975dfee3ae96","fields":{"slug":"/2019-09-11_p5-jsスケッチトレーニング-円弧の線を円周上に沿って動かす/"},"frontmatter":{"title":"p5.jsスケッチトレーニング -円弧の線を円周上に沿って動かす-","date":"2019-09-11T00:00:00.000Z","excerpt":"p5.jsのarcと簡単なEasing式を使い、円弧の線を動かします。","templateKey":"post","category":"Coding","propertags":["p5js"],"commontags":["generative","javascript"]}},{"id":"a9f2125a-caa7-5d36-a7d1-c68b1a35d0fa","fields":{"slug":"/2019-07-15_Ptsjsによる実践ジェネラティブアート/"},"frontmatter":{"title":"Pts.jsによる実践ジェネラティブアート","date":"2019-07-15T00:00:00.000Z","excerpt":"Ptsという幾何学的な図形を描画するのに特化したJavaScriptライブラリをご紹介します。","templateKey":"post","category":"Coding","propertags":["ptsjs"],"commontags":["generative","javascript"]}},{"id":"1eb35481-156d-520b-ab66-a911316fe17b","fields":{"slug":"/2019-07-03_Webで簡単にコードで絵を描くp5-js/"},"frontmatter":{"title":"Webで簡単にコードで絵を描くp5.js","date":"2019-07-03T14:15:51.667Z","excerpt":"描画ライブラリp5.jsとCodepenを使い、ブラウザ上で簡単にスケッチを描く方法を紹介します。","templateKey":"post","category":"Coding","propertags":["p5js"],"commontags":["generative","javascript"]}},{"id":"3a8f96d7-8238-57b2-be53-57c0bab5d727","fields":{"slug":"/2019-09-05_JSでアニメーションできるフォントleonsans/"},"frontmatter":{"title":"JSでアニメーションできるフォントleonsans","date":"2019-09-05T00:00:00.007Z","excerpt":"CanvasやPIXI.js上で展開できるプログラマブルなフォントleonsansを紹介します。","templateKey":"post","category":"Coding","propertags":null,"commontags":["animation","generative","javascript"]}}]}}