引言

这一段时间研究生生涯已经走进了尾声，也一直忙于论文没有关注前端方面的工作。偶然的机会，在知乎上看到了一篇文章前端人工智能？TensorFlow.js 学会游戏通关。我的内心是很激动的，终于，也能在前端直接搭神经网络，跑分类了。不过该文章，对于tensorflowjs的介绍太少，直观的游戏ai应用确实很好，但是对于初次接触的人，还是从最基础的框架使用开始更好，于是就有了这篇文章。本文抛开了复杂的实际问题，选择曲线拟合这个最简单易懂的情景，使用3种逐步深入的方法来完成目标问题的解决。从最基础的数学方法，到借助底层api构建神经网络，再到最终借助高层次api构建神经网络，一步步熟悉框架的使用，希望能够帮助后来者快速上手。 demo地址(目测手机版后面两个方法训练不出来，建议pc版访问)

目标问题介绍

本文的目标是实现曲线拟合。直观上，曲线可看成空间质点运动的轨迹，用数学表达式来就是y=f(x)，举个例子，y=x,y=x^2+5……等等，就是曲线。而曲线拟合，用简单的话来说，就是知道一条曲线的某些点，来预测要 y=f(x) 的表达式是什么。如下图：

image.png

图中，蓝色点点就是已知曲线中的某些点（本例中数目为100），红色曲线就是拟合出的结果，也就是本文要实现的曲线拟合。

工具，环境说明

用到的前端相关的库有：

1. tensorflow.js，用来搭建神经网络，训练等。tensorflow的文档写的很好，第一篇讲了核心概念，第二篇就讲到了如何拟合一条曲线，不过它只使用了线性模型的方法进行拟合，没有通过神经网络，这也是本文存在的理由，笔者在看了该文档之后，一方面，将文档中提到的方法采用面向对象的方法重构，另一方面，通过学习其api，搭建神经网络来实现相同的功能。
2. vega-embed，这个就是用来绘制曲线和散点的工具，用escharts等可视化工具也行，这里不是关键。

另外由于在代码中使用了class，async等等es6,es7的用法，故在实际使用的时候需要用到babel。本文使用的打包工具是parcel，号称是零配置的 Web 应用程序打包器，体验了一下，确实好用。

源码放在了github上，使用说明见README.md。demo更加直观。

样本点数产生方法

在这个问题中，首先需要产生样点。本文设定曲线方程为 y = ax^3 + bx^2 + c*x + d，首先随机产生100个x值，再带入方程计算y值。最终产生本文的测试样点，核心代码如下：其中涉及到一些tensorflow的api，会穿插在注释中简单介绍。

//导入tensorflow
import * as tf from '@tensorflow/tfjs';
/*
*输入参数：
*num：样点数目
*coeff：参数对象{a: , b: , c: , d:  };
*sigma：样点偏移原曲线范围
*输出参数：
{
  x: 样点横坐标值
  y: 样点纵坐标值
}
*/
export function generateData(num, coeff, sigma = 0.04) {
  //将代码用tf.tidy包裹，可以清除执行过程中的tensor变量
    return tf.tidy(() => {
  //tf.scalar: 产生一个tensor变量，其值为输入的参数
        const [a, b, c, d] = [
            tf.scalar(coeff.a), tf.scalar(coeff.b), tf.scalar(coeff.c),
      tf.scalar(coeff.d)
        ]
        //tf.randomUniform([num],-1,1): 产生-1,1之间的均匀分布的值组成的[num]    
        //矩阵,此处就是1*100的矩阵, [2,3]表示2*3的矩阵(二维数组)
        const x = tf.randomUniform([num], -1, 1);
        //计算a*x^3 + b*x^2 + c*x + d+(0~sigma之间服从正太分布的随机值)
        const y = a.mul(x.pow(tf.scalar(3)))
            .add(b.mul(x.square()))
            .add(c.mul(x))
            .add(d)
            .add(tf.randomNormal([num], 0, sigma));
        //对输出值进行归一化
        const ymin = y.min();
        const ymax = y.max();
        const yrange = ymax.sub(ymin);
        const yNormalized = y.sub(ymin).div(yrange);

        return {
            x,
            yNormalized
        };
    })
}

其中，api仅仅介绍了当前情景的功能，其还有一些可选参数没有进行介绍，具体可以查看官方文档，基本上看名字能猜出大概，结合官方文档不难理解，此处不再过多介绍。

从上述代码可以看出，TensorFlow 提供了很好的api，包括服从均匀分布，正态分布参数的产生，tensor类型带来的矩阵加减乘除运算，最大最小值计算等功能，以及自带的缓存清理函数tidy。这些方法构成了整个运算的基础，大大方便了使用者。

这一小节中，通过上述代码，产生num个x，y，构成了本文所述的样本点，为后文曲线拟合做好了样本准备。后续将借助TensorFlow 通过3种不同方法实现对该曲线的拟合。

线性模型方法实现曲线拟合

首先介绍第一种方法，也就是tensorflow文档第二篇中提到的方法—构建线性模型进行拟合。这个方法需要有一个已知条件，即已经知道预测的模型为 y = a*x^3 + b*x^2 + c*x + d。
知道算法模型之后，原理如下：

1. 初始化a,b,c,d，取随机值即可
2. 根据随机的参数a,b,c,d按照模型 y = a*x^3 + b*x^2 + c*x + d对100个点进行计算，根据得到的结果，采取一定的手段（原理是偏导，但是这里不需要自己计算，tensorflow会解决这里的调整问题）调整a,b,c,d。使计算出来的y与原来的y差值最小。
3. 经过多次步骤二，y与原本的y值差值足够小，就可以认为a,b,c,d就是要求的最终参数。此时，根据该曲线计算出结果并绘制出来，就实现了曲线的拟合。

将上述过程进行抽象，可以得到以下几个过程：

1. predict(inputXs)，根据已知的样点，计算该样点对应的y值
2. loss(predectedYs,inputYs)，计算y与输入的y的差值
3. train(inputXs,inputYs)，进行一次训练，通过调整参数来使得loss更小
4. fit(inputXs,inputYs，iterations)，进行曲线拟合，多次调用train来完成训练

根据上述方法，构建了一个简单的线性模型类，代码如下：

import {Model} from './model';
import * as tf from '@tensorflow/tfjs';

function random(){
    return (Math.random()-0.5)*2;
}

export class Linear_Model extends Model{
    constructor(){
        super();
        this.init();
    }
    init(){
        this.weights = [];
        this.weights[0] = tf.variable(tf.scalar(random()));//对应参数a
        this.weights[1] = tf.variable(tf.scalar(random()));//对应参数b
        this.weights[2] = tf.variable(tf.scalar(random()));//对应参数c
        this.bias = tf.variable(tf.scalar(random()));//对应参数d

        this.learningRate = 0.5;
//设置优化器，自动调整参数
        this.optimizer = tf.train.sgd(0.5);
    }
//根据输入样点计算输出
    predict(inputXs){
        return tf.tidy(()=>{
//y = weight[0]*x^3+weight[1]*x^2+weight[2]*x+biases
            return this.weights[0].mul(inputXs.pow(tf.scalar(3)))
                .add(this.weights[1].mul(inputXs.square()))
                .add(this.weights[2].mul(inputXs))
                .add(this.bias);
        })
    }
    train(inputXs,inputYs){
//通过优化器的minimize方法来实现对参数的减少
        this.optimizer.minimize(()=>{
//根据输入预测输出
            const predictedYs = this.predict(inputXs);
//计算预测输出与原本的输出差值
            return this.loss(predictedYs,inputYs);
        })
    }
//计算差值，此处采用均方误差，就是差值平方再取平均值
    loss(predictedYs,inputYs){
        return predictedYs.sub(inputYs).square().mean();
    }
//多次调用train来调整参数
    fit(inputXs,inputYs,iterationCount = 100){
        for(let i = 0;i<iterationCount;i++){
            this.train(inputXs,inputYs);
        }
    }
}

在上述代码中，用到了tensorflow的tf.train.sgd();方法，这个方法定义了一个优化器，就是通过调整参数来实现loss的不断降低，sgn是梯度下降法，类似的还有adam等。其优化的变量涉及到了inputXs,inputYs,weights(对应之前说的a,b,c,d)，那么它是如何判断哪些参数可以调整，哪些不能调整的呢？答案是tf.variable，在优化器优化的过程中，只能调整涉及到的通过tf.variable定义过的变量，在这个例子中，就只有this.weights。当执行train方法的时候，优化器会根据loss的计算过程，调整variable参数，使得loss往小的方向去走（严格来讲，不一定，和学习率等很多因素有关，但是这里问题比较简单，故不讨论，感兴趣可以看看coursera上吴恩达的机器学习课程）。经过多次train之后，就可以得到合适的参数，此时loss只要足够低，那么使用这些参数得到的结果就与愿结果无限趋近，可以认为实现了曲线的拟合。

最终调用代码如下：

import {
    Linear_Model
} from './linear_model';
import {
    generateData
} from './data';
import {
    plotData,
    plotCoeff,
    plotDataAndPredictions
} from './ui'
import * as tf from '@tensorflow/tfjs';

async function liner_method() {
//新建线性预测模型  
        const linear_model = new Linear_Model();

        const trueCoefficients = {
            a: -.8,
            b: -.2,
            c: .9,
            d: .5
        };
//调用数据产生函数，产生测试样本
        const trainingData = generateData(100, trueCoefficients);
//调用ui层的方法进行样点的绘制，此处ui层不做详细介绍
        await plotData('#data .plot', trainingData.x, trainingData.yNormalized);
//先做一次预测，看看初始参数拟合的曲线形状
        const predictionsBefore = linear_model.predict(trainingData.x);
//绘制样点和曲线
        await plotDataAndPredictions('#random .plot', trainingData.x, trainingData.yNormalized, predictionsBefore);
//调用fit方法进行训练
        linear_model.fit(trainingData.x, trainingData.yNormalized);
//再次计算曲线，此时参数已经经过训练
        const predictionsAfter = linear_model.predict(trainingData.x);
//绘制曲线
        await plotDataAndPredictions('#trained .plot', trainingData.x, trainingData.yNormalized, predictionsAfter);
    }

上述代码就是对本文定义的Linear_Model的一个使用方法，最终完成了曲线拟合这个目标。

这种方法的训练速度快，但是缺点在于需要事先知道模型形状(y = ax^3 + bx^2 + c*x + d)，不然不好进行预测。到这里，其实还没有涉及到神经网络的使用，但是所谓神经网络本质上也是参数的不断调整，只是更加复杂一些。加下来将使用底层api构建一个包含一层隐含层的神经网络来解决这个问题。不需要事先知道模型形状也能完成曲线的拟合。

底层api构建神经网络实现曲线拟合

神经网络的原理这里就不介绍了，感兴趣可以看coursera上吴恩达或者ufldl的介绍，都比较详细。
在这个问题中，由于是线性函数，所以拟合起来并不困难，这里采取1-6-1的结构，第一个1是输入层，这里是一维，所以输入层为1，隐含层选择6，这里其实5，4，7都可以，只是需要训练的次数不同而已。最后一层输出层为1，因为输出就是y值，也是一维的。

按照上一节抽象出来的过程，也需要手动实现predict，loss等函数。神经网络，与上述不同的地方就在与参数的构建，predict计算方式不同，其它地方其实基本一样。代码如下：

import {
    Model
} from './model';
import * as tf from '@tensorflow/tfjs';
export default class NNModel extends Model {
    constructor({
        inputSize = 3,
        hiddenLayerSize = inputSize * 2,
        outputSize = 2,
        learningRate = 0.1
    } = {}) {
        super();
//定义隐藏层，输入层，输出层，优化器函数
        this.hiddenLayerSize = hiddenLayerSize;
        this.inputSize = inputSize;
        this.outputSize = outputSize;
        this.optimizer = tf.train.adam(learningRate);
        this.init();
    }
//初始化神经网络参数
    init() {
        this.weights = [];
        this.biases = [];
//第一层参数为1*6的矩阵
        this.weights[0] = tf.variable(
            tf.randomNormal([this.inputSize, this.hiddenLayerSize])
        );
//第一层偏置
        this.biases[0] = tf.variable(tf.scalar(Math.random()));
        // Output layer
//第二层参数为6*1的矩阵
        this.weights[1] = tf.variable(
            tf.randomNormal([this.hiddenLayerSize, this.outputSize])
        );
        this.biases[1] = tf.variable(tf.scalar(Math.random()));
    }
//预测函数，激活函数选择sigmoid，matMux表示矩阵乘法
    predict(inputXs) {
        const x = tensor(inputXs);
        return tf.tidy(()=>{
            const hiddenLayer = tf.sigmoid(x.matMul(this.weights[0]).add(this.biases[0]));
            const outputLayer = tf.sigmoid(hiddenLayer.matMul(this.weights[1]).add(this.biases[1]));
            return outputLayer;
        })
    }
    train(inputXs,inputYs){
        this.optimizer.minimize(()=>{
            const predictedYs = this.predict(inputXs);
            return  this.loss(predictedYs,inputYs);
        })
    }
    loss(predictedYs, inputYs) {
        const meanSquareError = predictedYs
          .sub(tensor(inputYs))
          .square()
          .mean();
        return meanSquareError;
      }
}

上述代码中，涉及到了sigmoid函数，也就是神经网络的激活函数，很基础的概念，不多介绍。另外一个就是matMux，相当于矩阵乘法。

在实际使用时，方法和线性模型几乎一致，此处不贴代码，最终需要进行500多次的训练，才能达到和上述线性模型同样的效果。但是在不知道模型的情况下，还能拟合该曲线，这就是神经网络方法最大的优势。不需要人为构建模型，也能解决问题。

但是上述的写法存在一个问题，就是现在是1个隐含层，计算可以通过predict中两三行的代码搞定，但是层数多了之后，手动的一次次编写中间代码，实在也是一个体力活，而且容易出错。为了解决这个问题，tensorflow提供了一种更高层次的构建方法，就是下一节要介绍的方法。

高层次api构建神经网络

在tensorflow中，有一个高层次的api，tf.sequential()，其用法直接通过实例来解释：

        const model = tf.sequential();
        model.add(tf.layers.dense({
            units: 6,
            inputShape: [1],
            activation:'sigmoid'
        }));
        model.add(tf.layers.dense({
            units:1,
            activation:'sigmoid'
        }));
        model.compile({
            optimizer:tf.train.adam(0.1),
            loss:'meanSquaredError'
        })

通过上述的代码，就构建了一个神经网络，该网络有3层，一个是输入层，1维，隐藏层，6维，最后输出层，1维。上述代码中，model.add了两次，这是因为输入层其实就是输入样本，不需要计算，所以不需要添加，只需要在后续层添加的时候指定inputShape即可。其中，activation就是激活函数，这里直接选择signoid，而compile，就是完成模型的构建，需要指定优化器和loss计算方法（可以用字符串也可以传入一个自定义计算的函数）。此时，就完成了一个神经网络的搭建。用法如下：

//预测样本对应的值
const predictionsBefore = model.predict(trainingData_nn.x);
//绘制结果
await plotDataAndPredictions('#random3 .plot', trainingData.x, trainingData.yNormalized, predictionsBefore);
//进行训练
const h = await model.fit(trainingData_nn.x,trainingData_nn.yNormalized,{
      epochs:200,
      batchSize:100
})
//训练结束后再次计算曲线y值
const predictionsAfter = model.predict(trainingData_nn.x);
//绘制结果
await plotDataAndPredictions('#trained3 .plot', trainingData.x, trainingData.yNormalized, predictionsAfter);

可以看出，tensorflow提供的model,可以直接使用fit，predict，同时不需要手动指定weights，可以说是很方便了。

小结

本文算是对官方文档的一个深入，选择最简单的曲线拟合问题入手，从最简单的线性模型到手动搭建神经网络，再到利用高层api来搭建神经网络，解决了曲线拟合的问题。

总体来说，最好的搭建姿势还是借助高层api，可以很方便快捷的搭建想要的神经网络，十分好用。希望能让后来者少走一些弯路。当然，可能文中也会有些错误，如有发现，还请指出，谢谢🙏。