前端与人工智能

文/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的未来! 邮箱见文章开头。