利用一點(diǎn)機(jī)器學(xué)習(xí)來加速你的網(wǎng)站
在生活中，我有 73% 的時(shí)間在考慮 web 性能-在低配手機(jī)上達(dá)到 60 FPS、 有序加載資源、離線緩存任何能緩存的資源。還有一些其他的優(yōu)化。
最近，我發(fā)現(xiàn)自己對 web 性能的定義可能太狹隘了，從用戶的角度上來說，這些只是 web 性能中的一些小插曲。
所以我打開了我經(jīng)常去的網(wǎng)站，嘗試了所有的用戶可能的操作，并記錄操作所花費(fèi)的時(shí)間。(我們需要一些用戶操作時(shí)光軸工具)
之后，我發(fā)現(xiàn)了一個(gè)可行的提升性能的方案。
下面的文章內(nèi)容聚焦在某個(gè)具體網(wǎng)站的具體操作步驟。但是我覺得這個(gè)解決方案(嗯，沒錯(cuò)!就是機(jī)器學(xué)習(xí))可以應(yīng)用到很多其他類型的網(wǎng)站上去。
問題，如何才能節(jié)約時(shí)間
這個(gè)網(wǎng)站，用于賣家出售沒用的東西，買家通過購買這些東西來淘一些有價(jià)值的東西。
當(dāng)賣家要在網(wǎng)站上出售東西時(shí)候，要先選擇分類, 再選擇對應(yīng)的模版，然后填寫細(xì)節(jié)信息，預(yù)覽，最后發(fā)布。
然而第一步 — 選擇分類 — 就把我?guī)нM(jìn)了一條彎路
首先，一共有674個(gè)類別，我根本不知道我你破舊的皮劃艇屬于哪個(gè)類別( Steve Krug 說的好， 不要讓用戶去思考 )
第二步，即使我知道商品所屬的類別 — 子類別 — 子子類別，我也要至少花費(fèi)12秒的時(shí)間。
如果我跟你說，我能把你的頁面的加載時(shí)間減少12秒，你一定覺得我瘋了。那么為什么不在一些別的地方來節(jié)約這12秒呢。
正如凱撒大帝所說，時(shí)間很寶貴的呢。
我一直認(rèn)為用戶無知是福。我如果把商品的標(biāo)題、描述、價(jià)格放到機(jī)器學(xué)習(xí)的模型里面，系統(tǒng)應(yīng)該能自動(dòng)計(jì)算出商品所屬的分類。
這樣子用戶選類別的時(shí)間就能省下來了。他們就可以開心的把這些時(shí)間拿來去 reddit 找 DIY 的雙層床了。
機(jī)器學(xué)習(xí)-你不該逃避它，你要去擁抱它
一開始的時(shí)候，我對機(jī)器學(xué)習(xí)一點(diǎn)概念都沒有。我是在游戲 AI ，以及 Alpha 狗戰(zhàn)勝人類頂級圍棋棋手之后才有所了解的。
因此我打算開始去了解它，下面的幾步一個(gè)小時(shí)都不需要。
- Google 搜索 'machine learning'
- 查看大量的關(guān)于機(jī)器學(xué)習(xí)的文章
- 發(fā)現(xiàn)了亞馬遜發(fā)布的 機(jī)器學(xué)習(xí) 相關(guān)的服務(wù)
- 我開始意識(shí)到我不需要知道太多的關(guān)于機(jī)器學(xué)習(xí)的東西
- 嗯。好開心
(作者注: 因?yàn)闆]有去系統(tǒng)的學(xué)習(xí)機(jī)器學(xué)習(xí)，所以文章的一些專業(yè)術(shù)語可能被亂用。。)
一個(gè)簡單的實(shí)現(xiàn)流程
亞馬遜發(fā)布了他的機(jī)器學(xué)習(xí)文檔 。如果你不是對這個(gè)文檔很感興趣，打算花5個(gè)小時(shí)去閱讀，那么就來看下我寫的一些總結(jié)吧。
整理如下：
- 獲取一些 CSV 數(shù)據(jù)文件，每行都是一個(gè)商品項(xiàng)(^_^我的皮劃艇)，列名是標(biāo)題、描述、價(jià)格、所屬分類。
- 把數(shù)據(jù)傳送到亞馬遜的 AWS S3 bucket 里面
- 用數(shù)據(jù)去訓(xùn)練機(jī)器。這樣子，這個(gè)小小云機(jī)器人就能通過商品的標(biāo)題，描述和價(jià)格去預(yù)測他的分類了。
- 在前端頁面上，寫一些代碼，獲取用戶輸入的 標(biāo)題/描述/價(jià)格，發(fā)給這個(gè)云機(jī)器人，經(jīng)過計(jì)算，就能向預(yù)測這個(gè)商品所屬的分類了。
實(shí)戰(zhàn)模擬
下面是我寫的一個(gè)表單，模擬了賣家發(fā)布信息的幾個(gè)關(guān)鍵流程。
下面的結(jié)果一定會(huì)讓你對機(jī)器學(xué)習(xí)保持興趣。你只要相信我，建議類別是由深度學(xué)習(xí)模擬預(yù)測出來的。
讓我們?nèi)ベu一個(gè)冰箱
再來試一下賣個(gè)水族館：
這個(gè)云機(jī)器人居然能識(shí)別出水族館!
當(dāng)我看到這個(gè)結(jié)果的時(shí)候，手舞足蹈，是不是棒棒噠?
(我偷偷的告訴你我是怎么實(shí)現(xiàn)的：React, Redux, JQuery, Mox, RxJs, BlueBird, Bootstrap, Sass, Compass, NodeJs, Express, Loadsh。項(xiàng)目是使用 webpack 打包。最后生成的文件在1M左右)
嗯。不 BB 了。開始講正經(jīng)事。
一開始為了拿到機(jī)器學(xué)習(xí)用的數(shù)據(jù)。我也是想破了頭。我大概需要10K條數(shù)據(jù)。后來是在一個(gè)當(dāng)?shù)氐慕灰拙W(wǎng)站上面發(fā)現(xiàn)有這些數(shù)據(jù)。看了一下 URL 和 DOM 結(jié)構(gòu)之后，我用 Google Scraper 插件提取了一些數(shù)據(jù)。導(dǎo)出成 CSV 文件。在這些數(shù)據(jù)上我大概花費(fèi)了四個(gè)小時(shí)。將近整個(gè)項(xiàng)目時(shí)間的一半了。
數(shù)據(jù)整理好之后，上傳到了 Amazon S3 上，配置了一下機(jī)器學(xué)習(xí)的參數(shù)，設(shè)置了數(shù)據(jù)模型。整個(gè)學(xué)習(xí)的 CPU 耗時(shí)才3分鐘。
界面上還有一個(gè)實(shí)時(shí)預(yù)測功能，所以我打算用一些參數(shù)測試一下。
嗯。還挺好用的。
為了不在瀏覽器里面暴露出我的 Amazon API ，所以我把 API 放到了 Node 服務(wù)器上。
后臺(tái)代碼(Node)
使用方式很簡單。接口參數(shù)為 modelId, 服務(wù)器返回一個(gè) prediction ：
- const AWS = require('aws-sdk');
- const machineLearning = new AWS.MachineLearning();
- const params = {
- MLModelId: 'some-model-id',
- PredictEndpoint: 'some-endpoint',
- Record: {},
- };
- machineLearning.predict(params, (err, prediction) => { // we have a prediction!});
這里參數(shù)用大寫字母開頭，本來打算改掉的。后來想想還是算了。
Record, 是一個(gè)JSON對象。屬性值是(title, description, price)
我不想只提供一些代碼片段。為了幫助大家更好的理解。我把所有的服務(wù)端代碼都貼上來了。
server.js:
- const express = require('express');
- const bodyParser = require('body-parser');
- const AWS = require('aws-sdk');
- const app = express();
- app.use(express.static('public'));
- app.use(bodyParser.json());
- AWS.config.loadFromPath('./private/aws-credentials.json');
- const machineLearning = new AWS.MachineLearning();
- app.post('/predict', (req, res) => { const params = {
- MLModelId: 'my-model-id',
- PredictEndpoint: 'https://realtime.machinelearning.us-east-1.amazonaws.com',
- Record: req.body,
- };
- machineLearning.predict(params, (err, data) => { if (err) {
- console.log(err);
- } else {
- res.json({ category: data.Prediction.predictedLabel });
- }
- });
- });
- app.listen(8080);
aws-credentials.json:
- {
- "accessKeyId": "my-access-key-id",
- "secretAccessKey": "shhh-secret-squirrel", "region": "us-east-1"
- }
(在.gitignore 中忽略 /private 文件夾)
上面就是所有的后臺(tái)代碼。
前端代碼
表單里面的代碼功能比較簡單。
- 監(jiān)聽幾個(gè)輸入框的 blur 事件
- 讀取表單里面的字段值
- POST 給 API 端
- 把 API 端返回的 prediction 顯示在頁面上
- (function() {
- const titleEl = document.getElementById('title－input');
- const descriptionEl = document.getElementById('desc-input');
- const priceEl = document.getElementById('price-input');
- const catSuggestionsEl = document.getElementById('cat-suggestions');
- const catSuggestionEl = document.getElementById('suggested-category');
- function predictCategory() {
- const fetchOptions = {
- method: 'POST',
- headers: { 'Content-Type': 'application/json',
- },
- body: JSON.stringify({
- title: titleEl.value,
- description: descriptionEl.value,
- price: priceEl.value,
- })
- };
- fetch('/predict', fetchOptions)
- .then(response => response.json())
- .then(prediction => {
- catSuggestionEl.textContent = prediction.category;
- catSuggestionsEl.style.display = 'block';
- });
- }
- document.querySelectorAll('.user-input').forEach(el => {
- el.addEventListener('blur', predictCategory);
- });
- })();
上面就是全部的前端代碼了。
啊啊啊……云服務(wù)還要收費(fèi)呢
別忙著收起你的帽子，魔術(shù)表演怎么可能是免費(fèi)呢。
我上面用到的 model 數(shù)據(jù)(10K行/4列)有6.3MB. 云端在等待接受請求的時(shí)候，消耗了6.3MB的內(nèi)存。這些資源的開銷是每小時(shí)0.0001刀?；蛘呙磕?刀。 我在手套上面花的錢都比它多。
每次進(jìn)行 prediction 的時(shí)候，也要0.0001刀。所有就不要隨隨便便就調(diào)用這個(gè) API 了。
雖然目前不僅僅是 Amazon 提供了這個(gè)服務(wù)，但是我還是沒有找到另外兩個(gè)大廠家的價(jià)目表。
Google 有 TensorFlow , 但是我看了一下 入門教程 就跑了。
Microsoft 有 Machine Learning offering , 但是IE6還是讓我有點(diǎn)耿耿于懷 (可能不久后，Amazon 和 Microsoft 之間會(huì)有一場大戰(zhàn)吧)。
一些總結(jié)
或許只是我感到有些許驚訝(我還記得當(dāng)我意識(shí)到‘news’是‘new’的復(fù)數(shù)的時(shí)候)，我認(rèn)為這些都十分讓人驚訝。它允許像你我這樣的普通人(對發(fā)展影響的程度較小的人)在機(jī)器學(xué)習(xí)中進(jìn)行挖掘，可能會(huì)促成那些用戶很大的改進(jìn)。
下一步在哪?
上面的例子顯然是進(jìn)行過設(shè)計(jì)的，并且，我承認(rèn)，我省略了一些話題。
如果我可以的話，我應(yīng)該列出所有問題，但要是你自己去做你自己發(fā)現(xiàn)問題那也是很有趣的。
因此，去做吧，如果你取得了一些成功，我將樂于在評論中看到它們。
