Help us understand the problem. What is going on with this article?

Parcelで始めるTensorFlow.js (ブラウザ/Node.js)

More than 1 year has passed since last update.

2018年3月末にGoogleがTensorFlow.js発表しました。
早速触ってみたので、Parcelを使って「TensorFlow.js - Getting Started」に掲載されているコードをブラウザとNode.jsで動かすまでを紹介します。
成果物は 「shisama/tfjs-practice#getting-started」にあります。

以下の環境で動作確認済
- Chrome: 65
- Node.js: 8.9.1

TL;DR

  • ビルドはparcel使うだけ
  • ブラウザでもNode.jsでも動かすことができる
  • とにかく始めたい人はこれ使ってください

Tensorflow.jsをインストール

TensorFlow.js - Getting Started」に載っているそのままです。

npm
npm install @tensorflow/tfjs
yarn
yarn add @tensorflow/tfjs

Parcelをインストール

Parcelに関しては、昨年末バズった「webpack時代の終わりとparcel時代のはじまり」という記事をお読み下さい。
以下はグローバルにインストールしていますが、--save-devでプロジェクトにインストールしても、もちろん問題ありません。

npm
npm install -g parcel-bundler
yarn
yarn global add parcel-bundler

Tensorflow.jsを使ったコード

TensorFlow.js - Getting Started」に載っているそのままです。
ここではファイル名をmain.jsにします。

main.js
import * as tf from '@tensorflow/tfjs';

// Define a model for linear regression.
const model = tf.sequential();
model.add(tf.layers.dense({units: 1, inputShape: [1]}));

// Prepare the model for training: Specify the loss and the optimizer.
model.compile({loss: 'meanSquaredError', optimizer: 'sgd'});

// Generate some synthetic data for training.
const xs = tf.tensor2d([1, 2, 3, 4], [4, 1]);
const ys = tf.tensor2d([1, 3, 5, 7], [4, 1]);

// Train the model using the data.
model.fit(xs, ys).then(() => {
  // Use the model to do inference on a data point the model hasn't seen before:
  model.predict(tf.tensor2d([5], [1, 1])).print();
});

ブラウザ用HTML

ここではビルド後のJavaScriptファイルを読み込むだけのHTMLファイルを用意します。
あとから紹介するparcelでのビルドでこのhtmlを指定します。

index.html
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<script src="main.js"></script>
</body>
</html>

ブラウザで動かす

まずはブラウザで動かすためにparcelでビルドします。

parcel build index.html --public-url ./

ビルド後はdistというディレクトリが作成されています。

.
├── dist
│   ├── index.html
│   ├── main.31f12d6f.map
│   └── main.f903cd46.js
├── index.html
├── main.js
├── node_modules
├── package-lock.json
└── package.json

あとはdist/index.htmlをブラウザで開いてDevToolsのコンソールを確認してください。
リロードするたびにモデルの学習結果が変わります。

Node.jsで動かす

Node.jsで動かすためにJavaScriptをビルドします。
以下例ではビルド後のJavaScriptファイルをdist_nodeというディレクトリに出力するために-dオプションを付けています。

parcel build main.js -d dist_node

dist_nodeに出力されたJavaScriptファイルを実行します。

node dist_node/main.js

出力結果

ブラウザでもNode.jsでも実行内容は変わりません。以下は例です。
結果は学習結果によるので、以下とは違う結果になるかと思います。

Tensor
     [[8.2074938],]

参考

次にやること

babelだけでも問題無いはずなので試したい。webpackでもいけるはず。

最後までお読み頂きありがとうございました。
不備や質問はコメント欄またはTwitter(@shisama_)からお願い致します。

shisama
Node.js Core Collaborator. 関西Node学園Organizer.
https://shisama.dev
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした