前端与人工智能

文/Yoha 来自蚂蚁金服人工智能部 邮箱: yaohua.cyh@antfin.com

好吧，我认可这个标题有点太大了，其实我更想要说的是“在人工智能时代、在人工智能公司、在人工智能部门，咱们前端er的角色究竟是怎样的”。

众(ge)所(ren)周(yi)知(yin)，如今或者说将来的的前端发展有这么几个方向，前端+Node.js、前端+各类端(包括IOT)、前端+数据可视化、前端+图形。等等，话说为啥前端后面为啥会有这么多加号呢？个人理解是，前端的职能在发生改变，从以前单纯的页面仔逐渐地往业务里面深刻。固然这篇文章不是发表对这些方向的我的见解，我想说的是，前端+AI或许也会是将来的一个发展方向(利益相关，毕竟我是在AI部门嘛，哈哈哈)。

这几年算法火啊，学算法的人愈来愈多啦，固然这也说明企业内部对算法人才的需求量大。可是，算法和工程是分不开的，没有工程，算法也是无用武之地。好，既然有工程，那么确定少不了咱们前端嘛，那么咱们前端到底能作些什么呢？我先给出几个结论，后面再逐个说明:

1. 开发公司官网？哈哈哈哈哈哈，其实也没毛病；
2. 工程平台的开发。例如模型服务平台、数据标注平台等大型AI应用；
3. 模型可视化(注意不是数据可视化哦)。用可视化的手段去解释模型，辅助算法同窗调参；
4. 前端开发算法。啥？靠谱吗？放心吧，靠谱！咱们有落地生产环境的经验！本文不会给你简单抛出几个什么tensorflow.js、keras.js、deeplearning.js等等这些，而后告诉你用这些前端就能作算法，且耐心看下去，有干货哦。

固然以上的并不包括全部方面，你们有补充的也欢迎一块儿讨论~

开发公司官网

喂！那谁！你别笑！开发公司官网怎么了？AI公司的官网还真的就和其余公司的不同！除去轮播图、全屏翻页、html5动画这种高端技能，你不作点其余的好意思叫AI官网？你能够整点AI人脸识别吧？能够整点摄像头手势控制吧？好，那么这种简单模型就能够放到前端来跑。你说咋跑？嗯。。。这里不作介绍，毕竟不是教程文嘛。有兴趣的同窗能够找我私聊交流。

工程平台的开发

工程平台包含的比较广了，事实上全部的AI应用平台都是工程平台，而从事AI应用前端通常属于中台型前端。至于有哪些工程平台呢？举些🌰:好比数据的入口，有数据标注平台;建模有建模平台;模型的部署有模型服务平台等等一系列围绕着AI来建设的大型平台。并且这些平台在工程上对也对前端带来了极大的挑战。动辄几万~数十万的代码量、各类稀奇古怪的交互操做、各类大数据的可视化、各类富媒体的可视化等等等。但这些都不是关键！！what?!这不是关键？那什么是关键？我理解的是，关键是在建设这些中台应用的过程当中对你的各方面能力的提高，不只会促进你前端技术提高，并且还会大大开阔你的视野、对跨领域技术的理解、对公司业务的理解等等。这也是中台型前端和业务前端及工程前端最大的不一样之处。

模型可视化

模型可视化这一块说实话，不属于前端的范畴，同时也不彻底属于算法范畴或数据可视化范畴，严格的来讲属于前端、数据可视化和算法的交叉范畴。那么模型可视化究竟是什么呢？

我这样来强行解释一下吧，你们都知道深度学习一直是一个黑盒子，从事深度学习的同窗亲切地称呼本身为“调参工程师”，为啥呢？由于你们只知道这个神经网络输入数据后通过一系列计算能获得本身想要的结果，而殊不知道为啥会获得这个结果。这个用神经网络训练出来的模型到底经历了什么？或者说这个训练出来的模型为啥不许确？怎样去调节训练参数，从而获得更好的模型？目前还得不到准确的解答。因此，模型可视化就是经过可视化的手段去解释模型，去跟踪训练过程。因此就须要开发er对算法、对可视化、对前端都要理解，经过各类可视化手段去剖析模型，帮助算法同窗更好地去调参去理解模型。tensorflow配套的tensorboard就是一套可视化分析工具，可是还远远不够。

那么模型可视化方向对前端又有什么要求呢？

前端技术上d3.js、canvas至少得熟练吧？常见的高维数据降维方法总得会几个吧？pca、t-sne、自动编码器总得据说过吧？cnn、rnn、dnn这些算法的原理总得熟悉吧？说到这里你们应该也能看到，模型可视化须要的就是这样复合型人才。如今也有不少同窗在往这个方向走。

算法开发

相信你们以前应该也看到过tensorflow.js、deeplearning.js或者kera.js的科普文，以前阿里南京的一位同事作的用tensorflow.js来调教chrome里的小恐龙作的也很不错。那么，前端作算法能落实到生产环境吗？！能真正地给业务带来价值吗？答案是：能够！首先先说一下前端目前能够进行高性能计算的三种方法(不了解的同窗自行搜索哈)：

1. asm.js
2. WebAssembly
3. GPU

因此，opencv就有了asm.js和WebAssembly版本的，咱们能够在前端作cv算法。什么物体跟踪、图像处理、特征检测等等等，在前端作ok的，而且咱们也落地到了生产环境中。

等等，还有gpu呢？说到gpu，固然要用到咱们的tensorflow.js了。那么tensorflow.js在生产环境中能作些什么呢？通常的tensorflow模型动辄几百兆，在前端怎么跑呢？不要紧，咱们有MobileNet啊，MobileNet是针对于移动端模型提出的神经网络架构，能极大地减小模型参数量，同理也能用到浏览器端上。那么现阶段能作些什么呢？举几个🌰：

1. 人脸识别
2. 人脸比对
3. 物体检测
4. 手势检测
5. 视频跟踪
6. ...

还有好比做者最近移植的基于tensorflow.js Node的tvnet算法，能够提取视频中的稠密光流。并且随着模型压缩技术的发展，相信将来会有更多的模型能跑在前端上。

奉上一段我以前用来预测比特币涨跌的算法模型，基于GRU的，仅供娱乐哈：

const input = tf.input({
    shape: [timeStep, 9]
  });
  const inputReverse = tf.input({
    shape: [timeStep, 9]
  });
  const gruFwd = tf.layers.gru({
    units: 24,
    unitForgetBias: true
  });
  const gruBwd = tf.layers.gru({
    units: 24,
    unitForgetBias: true
  });
  const fwd = gruFwd.apply(input);
  const bwd = gruBwd.apply(inputReverse);

  const lstmOpt = tf.layers
    .activation({ activation: "relu" })
    .apply(tf.layers.add().apply([fwd, bwd]));
  let dense = tf.layers
    .dense({
      units: 24,
      activation: "relu"
    })
    .apply(lstmOpt);
  const outputs = tf.layers
    .dense({
      units: 2,
      activation: "softmax"
    })
    .apply(dense);
  model = tf.model({ inputs: [input, inputReverse], outputs: outputs });
  console.log("training...");
  let res;
  model.compile({
    loss: "categoricalCrossentropy",
    optimizer: "adam"
  });
  train_data = tf.tensor3d(train_data);
  train_label = tf.tensor2d(train_label);
  train_data_reverse = tf.tensor3d(train_data_reverse);

  res = await model.fit([train_data, train_data_reverse], train_label, {
    epochs: 100
  });
复制代码

综上所述，我相信将来前端在AI方向上会大有可为！AI makes life better.FE makes AI better.

最后

哎呀，写了这么多，怎能不来个硬广：蚂蚁金服人工智能部招前端啦!多多益善，欢迎各路英雄加入，让咱们一块儿来探索前端+AI的将来! 邮箱见文章开头。