前端與人工智慧

Yoha發表於2018-10-24
前端人工智慧

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

相關文章