利用tensorflow.js实现JS中的AI

利用tensorflow.js实现JS中的AI(译)

来自https://javascriptweekly.com/link/57596/a956973cda

很是感谢Seth Juarez提供的这篇文章。

这不是一篇关于数学的文章，也不是一篇阐述邪恶的有知觉的人工智能最终会杀死咱们全部人文章（我是不会订阅这类的文章）。亲爱的读者们，这篇文章的目的是带你走上一条别人未走过的路，那即是讲述关于软件工程的过程以及AI和JS目前的样子。 每当咱们试图建立软件时，咱们都会提出无数个问题并编写代码来解决问题(包括全部的边界状况)。考虑这样一种状况，你的任务是编写一个函数，该函数给定一个由整数组成的二维数组，要求您返回它看上去最类似的数字。

准确的说，你正在编写一个识别数字的函数，获得的数组看上去是下面这样的（在这种状况下你应该返回5）。

咱们为了完成这种任务，不得不编写蹩脚代码——咱们知道这种代码太过松散，一旦将其投入生产，咱们就会以为须要重构(或作点什么)。

你和我都会发现代码中有充斥着大量的if判断和for循环语句，可是咱们又必须使用它们，来建立必要的程序。

然而，面对这类任务，最佳选择即是机器学习（人工智能的一个子领域）。机器学习的优点在于咱们不须要为了解决问题考虑一系列的步骤，而是给予机器学习算法一些正确的例子，以下图。它便会给出正确的步骤。

过程

虽然本文的主要目的不是去研究这些算法如何实现，可是在实际软件程序中，了解其运用的基本过程和主要输出是很是重要的（本文以JS为例）。数据科学家常常会使用如下几个步骤：

1. 定义问题（识别数字）；
2. 给出数据（MNIST数据集);
3. 建立最优模型（实际功能的抽象）；
4. 模型运用

做为开发人员，咱们的工做介于步骤3和步骤4之间。

模型

一般，这些模型利用机器学习框架，以Python语言进行建立。这个过程须要很长的时间，而且依赖大量的数据。这是很是容易让人乏味和感受沮丧的。然而，一旦完成了冗长和使人沮丧的部分，就会有一个实际文件输出来表示模型。你应该把它看做是你项目的一项资产。在使用TensorFlow的状况下，输出一般是一个protobuf文件。

TensorFlow.js

这里，我要提醒你们，我并不认为我本身是一个JS专家，因此，若是我错了或有更好的解决方案，请务必告知我。这部份内容重点是向你展现如何在JavaScript应用程序中使用模型，咱们会用到TensorFlow.js，它被宣传为训练和部署机器学习模型的框架，而咱们将重点关注部署部分，由于一般大多数模型都是由使用全强度TensorFlow python包的数据科学家建立的。我认可，在某些状况下，在客户端进行迁移学习听起来很是有趣。

建立模型并将它转换到TensorFlow.js的过程仍是很是简单的（这里不作介绍，但它确实是一个颇有趣的练习，建议有机会你仍是彻底能够作一下），参考(github.com/sethjuarez/…)

如今，咱们开始实际例子：

在这个状况下，我决定使用vue.js。由于我有一些框架方面的经验，并且已经有一个(组件)[codepen.io/getflourish…]完成了大部分的画布绘制工做。

code

使用实际模型时，有两个重要的部分：

1. 加载模型
2. 调用模型

让咱们依次看一下：

加载模块

建立一个vue组件看上去时一个不错的idea，由于我能够为整个组件只加载一次模型，而且把它保留在内存中。

mounted: async function () {
        ... other things...
        // load model
        const MODEL = 'model/tensorflowjs_model.pb';
        const WEIGHTS = 'model/weights_manifest.json';
        this.model = await tf.loadFrozenModel(MODEL, WEIGHTS);
    }
复制代码

我认为我能够选择vue生命周期中的另一个钩子，可是目前mounted看上去不错。一旦this.model被挂载，不管何时Predict按钮被点击，这个模型都会被使用。（另一个有趣的现象是鼠标抬起时，模型也会使用，进行预测）。

调用模块

如今咱们来看咱们如何来调用模型的例子：

predict: async function() {
            const digit = this.getDigit();
            const d = tf.tensor1d(digit).reshape([1, digit.length]);
            this.probabilities = await this.model.execute({'x': d}).reshape([10]).data();
            this.prediction = this.probabilities.indexOf(Math.max(...this.probabilities));
        }
复制代码

getDigit()方法获取手绘的图像，作两件事：

1. 缩小到28*28的图像
2. 获取数字类型的数组，将其输入进模型

关键调用是this.model.execute(…)。这是咱们实际传递数组并使模型运转的地方。 模型输出的结果是一个长度为10，包含每一个数字出现几率的数组。换句话说，在数组索引为0是它认为数字为0的几率(以此类推)。

思考

虽然本文并无详细介绍如何建立这个应用程序，但它的目的是让您了解如何使用TensorFlow.js在现代JavaScript中使用机器学习模型。

想进一步了解TensorFlow.js，移步[github.com/frontend9/f…]

了解更多，移步github仓库[github.com/sethjuarez/…]