前端與人工智能

文/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的將來! 郵箱見文章開頭。