---

---

【Next.js+Tensorflow+TypeScript】機械学習Webアプリの作成｜Part１

投稿日：2021年6月13日

この記事はNext.jsとTensorFlow、TypeScriptを使って簡単なWebアプリ開発をする記事です。

---

はじめに

この記事について

環境について

参考コード

---

実践

$ npx create-next-app --typescript --use-npm app

$ cd app
$ npm i --save @tensorflow/tfjs

ブラウザ側の動作の確認

import * as tf from "@tensorflow/tfjs";
import { useState } from "react";

/**
 * TOPページ
 * @returns
 */
export default function Home() {
    //　[ state ] サンプルのリザルト
    const [result, setResult] =
        useState<tf.Tensor<tf.Rank> | tf.Tensor<tf.Rank>[] | null>(null);

    // [ state ] 実行状態を管理
    const [executing, setExecuting] = useState<boolean>(false);

    /**
     * サンプルの学習と推論を実行
     */
    const executeModelFit = () => {
        // 既に実行中の場合は即終了
        if (executing) {
            return;
        } else {
            setExecuting(true);
        }
        // 線形回帰モデルを定義
        const model = tf.sequential();
        model.add(tf.layers.dense({ units: 1, inputShape: [1] }));

        model.compile({ loss: "meanSquaredError", optimizer: "sgd" });

        // 訓練用の模擬データを生成
        const xs = tf.tensor2d([1, 2, 3, 4], [4, 1]);
        const ys = tf.tensor2d([1, 3, 5, 7], [4, 1]);

        // データを使用してモデルを訓練
        model.fit(xs, ys, { epochs: 500 }).then(() => {
            // モデルを使用してモデルが見たことのないデータポイントを推論
            setResult(model.predict(tf.tensor2d([5], [1, 1])));
            // 結果を確認するためにブラウザのDevToolsを開く
            setExecuting(false);
        });
    };

    return (
        <div>
            <button onClick={executeModelFit} disabled={executing}>
                実行
            </button>
            <main>
                {executing
                    ? "処理中です…。"
                    : result
                    ? `結果：${result}`
                    : "実行ボタンをクリック！！"}
            </main>
        </div>
    );
}

$ npx next dev

サーバー側の環境の確認

// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
import type { NextApiRequest, NextApiResponse } from "next";
import * as tf from "@tensorflow/tfjs";

type Data = {
    result: string;
};

export default (req: NextApiRequest, res: NextApiResponse<Data>) => {
    // 線形回帰モデルを定義
    const model = tf.sequential();
    model.add(tf.layers.dense({ units: 1, inputShape: [1] }));

    model.compile({ loss: "meanSquaredError", optimizer: "sgd" });

    // 訓練用の模擬データを生成
    const xs = tf.tensor2d([1, 2, 3, 4], [4, 1]);
    const ys = tf.tensor2d([1, 3, 5, 7], [4, 1]);

    // データを使用してモデルを訓練
    model.fit(xs, ys, { epochs: 500 }).then(() => {
        // モデルを使用してモデルが見たことのないデータポイントを推論
        const result = model.predict(tf.tensor2d([5], [1, 1]));
        res.status(200).json({ result: result.toString() });
    });
};

---

---

---