ちょっとした機械学習でウェブサイトを高速化

私の人生の 73% は、Web パフォーマンスについて考えています。低スペックの電話で 60 FPS を達成すること、リソースを順番に読み込むこと、オフラインでキャッシュできるものはすべてキャッシュすることなどです。他にもいくつか最適化があります。

最近、Web パフォーマンスの定義が狭すぎるかもしれないということ、そしてこれらはユーザーの観点から見た Web パフォーマンスのほんの一部に過ぎないということに気付きました。

そこで、よく利用するウェブサイトを開いて、考えられるすべてのユーザー操作を試し、かかった時間を記録しました。（ユーザー操作用のタイムラインツールが必要です）

その後、パフォーマンスを向上させる実行可能な解決策を見つけました。

以下の記事では、特定の Web サイトの具体的な操作手順に焦点を当てています。しかし、このソリューション (そうです、機械学習) は他の多くの種類の Web サイトにも適用できると思います。

質問: どうすれば時間を節約できますか?

このウェブサイトは、売り手が役に立たないものを販売し、買い手がそれらのものを購入して価値のあるものを見つけるために使用されます。

販売者がウェブサイトで何かを販売したい場合、まずカテゴリーを選択し、対応するテンプレートを選択し、詳細を入力してプレビューし、最後に公開する必要があります。

しかし、最初のステップであるカテゴリーの選択で、私は遠回りをしてしまいました。

まず、カテゴリーは 674 もあり、あなたの古くてボロボロのカヤックがどのカテゴリーに属するのか全く分かりません (Steve Krug が言ったように、ユーザーに考えさせないでください)。

2 番目のステップでは、アイテムが属するカテゴリ、サブカテゴリ、サブサブカテゴリがわかっているにもかかわらず、少なくとも 12 秒かかります。

ページの読み込み時間を 12 秒短縮できると言ったら、気が狂ったと思われるでしょう。では、その 12 秒をどこか別の場所で節約してみませんか。

ジュリアス・シーザーが言ったように、時間は貴重です。

私は常に、ユーザーの無知は幸福であると信じてきました。製品のタイトル、説明、価格を機械学習モデルに入力すると、システムは製品が属するカテゴリを自動的に計算できるはずです。

これにより、ユーザーはカテゴリを選択する時間を節約できます。彼らはその時間を、Reddit で DIY 二段ベッドを探すことに楽しく費やすことができます。

機械学習 - 逃げるのではなく、受け入れるべきです

最初は機械学習について何も知りませんでした。私がゲーム AI について知ったのは、AlphaGo が人間のトップクラスの囲碁プレイヤーを破った後でした。

それで、私はそれについて学び始めるつもりです。次のいくつかのステップは 1 時間もかかりません。

Googleで「機械学習」を検索
機械学習に関する幅広い記事をご覧ください
Amazonがリリースした機械学習関連サービスを発見
機械学習についてあまり詳しく知る必要はないことに気づき始めました。
えーと。とても幸せ

（著者注：私は機械学習を体系的に研究していないため、記事内の専門用語の一部が誤って使用されている可能性があります。）

シンプルな実装プロセス

Amazon が機械学習に関するドキュメントを公開しました。この文書に興味がなく、5 時間かけて読む予定がない場合は、私が書いた要約をご覧ください。

要約すると次のようになります。

いくつかの CSV データファイルを取得します。各行は製品項目 (^_^ 私のカヤック) であり、列名はタイトル、説明、価格、カテゴリです。
AmazonのAWS S3バケットにデータを転送する
データを使用して機械をトレーニングします。このようにして、この小さなクラウドロボットは、製品のタイトル、説明、価格に基づいて製品のカテゴリを予測できます。
フロントエンドページで、ユーザーが入力したタイトル/説明/価格を取得してクラウドロボットに送信するコードを記述します。計算後、製品が属するカテゴリを予測できます。

実際の戦闘シミュレーション

以下は、販売者が情報を公開するためのいくつかの重要なプロセスをシミュレートする、私が作成したフォームです。

以下の結果は、機械学習への興味をさらに深めるものとなるでしょう。信じてください。提案されたカテゴリはディープラーニングシミュレーションによって予測されます。

冷蔵庫を売りましょう。

水槽を売ってみます。

このクラウドロボットは実際に水族館を認識できます！

この結果を見たとき、嬉しくて小躍りしてしまいました。素晴らしいと思いませんか？

(どのように実装したかをこっそり教えましょう: React、Redux、JQuery、Mox、RxJs、BlueBird、Bootstrap、Sass、Compass、NodeJs、Express、Loadsh。プロジェクトは webpack を使用してパッケージ化されています。最終的に生成されるファイルは約 1 MB です)

えーと。もうナンセンスはやめましょう。さあ、本題に入りましょう。

当初は機械学習のためのデータを取得するためでした。私もこれについては頭を悩ませてきました。約10K件のレコードが必要です。その後、地元の取引ウェブサイトでこのデータを見つけました。 URL と DOM 構造を確認した後、Google Scraper プラグインを使用してデータを抽出しました。 CSV ファイルにエクスポートします。このデータに約 4 時間を費やしました。プロジェクト期間のほぼ半分が完了しました。

データが整理された後、Amazon S3 にアップロードされ、機械学習パラメータが設定され、データモデルが設定されました。学習プロセス全体は CPU 上でわずか 3 分しかかかりませんでした。

インターフェースにはリアルタイム予測機能もあるので、いくつかのパラメータでテストしてみるつもりです。

えーと。かなり便利ですよ。

Amazon API をブラウザに公開しないようにするために、API を Node サーバーに配置しました。

バックグラウンドコード（ノード）

使い方はとても簡単です。インターフェースパラメーターは modelId であり、サーバーは予測を返します。

 AWS SDK for .NETをビルドします。  
 AWS MachineLearning を新規に作成します。  
定数パラメータ = {  
 MLModelId: 'モデルID' 、  
 PredictEndpoint: 'some-endpoint' 、  
記録： {}、  
 };  
 machineLearning.predict(params, (err, prediction) => { // 予測ができました!});

ここでのパラメータは大文字で始まっていますが、これを変更するつもりでした。後で考えた結果、諦めることにしました。

レコードは JSON オブジェクトです。属性値は（タイトル、説明、価格）です

単にコードスニペットを提供するだけでは不十分です。誰もがよりよく理解できるようにするためです。サーバー側のコードをすべて貼り付けました。

server.js:

定数 express は require( 'express' ) を必要とします。
 bodyParser を require( 'body-parser' );
 AWS SDK for .NETをビルドします。
 express() は、定数です。
 app.use( express.static ( 'public' ));
 app.use(bodyParser.json());  
 AWS.config.loadFromPath( './private/aws-credentials.json' );
 AWS MachineLearning を新規に作成します。  
 app.post( '/predict' , (req, res) => { const params = {
    MLModelId: '私のモデルID' 、
    予測エンドポイント: 'https://realtime.machinelearning.us-east-1.amazonaws.com' 、
    レコード: req.body、
  };  
  machineLearning.predict(params, (err, data) => { if (err) {
      コンソールログ(エラー);
    }それ以外{
      res.json({ カテゴリ: data.Prediction.predictedLabel });
    }
  });
 });  
アプリをリッスンします(8080);

aws-credentials.json:

 {
 "accessKeyId" : "私のアクセスキーID" ,
 「secretAccessKey」 : 「shhh-secret-squirrel」 、 「リージョン」 : 「us-east-1」  
 }

(.gitignore 内の /private フォルダは無視してください)

バックグラウンドコードはこれだけです。

フロントエンドコード

フォーム内のコード機能は比較的単純です。

複数の入力ボックスのぼかしイベントをリッスンする
フォーム内のフィールド値を読み取る
APIへのPOST
APIから返された予測をページに表示する

（関数（） {
  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( '提案カテゴリ' ); 
 関数予測カテゴリ() {
    const フェッチオプション = {
      メソッド: 'POST' 、
      ヘッダー: { 'Content-Type' : 'application/json' ,
      },
      本文: JSON.stringify({
        タイトル: titleEl.value,
        説明: descriptionEl.value、
        価格: priceEl.value、
      })
    };  
フェッチ( '/predict' 、 fetchOptions)
      . then (レスポンス => response.json())
      . then (予測 => {
        catSuggestionEl.textContent = prediction.category;
        catSuggestionsEl.style.display = 'ブロック' ;
      });
  }  
  document.querySelectorAll( '.user-input' ).forEach(el => {
    el.addEventListener( 'blur' 、予測カテゴリ);
  });
 })();

上記がフロントエンドのコード全体です。

ああ…クラウドサービスは有料です。

急いで帽子をしまわないでください。マジックショーが無料になるなんてあり得ません。

上記で使用したモデルデータ (10K 行/4 列) は 6.3 MB です。クラウドは、リクエストの受け入れを待機している間に 6.3 MB のメモリを消費します。これらのリソースのコストは 1 時間あたり 0.0001 ドルです。または年間 8 ドル。私はこれよりも多くのお金を手袋に使ったことがあります。

予測を行うたびに、0.0001 ドルの費用がかかります。したがって、この API を気軽に呼び出さないでください。

このサービスを提供しているのは Amazon だけではありませんが、他の 2 つの大手メーカーの価格表はまだ見つけていません。

Google には TensorFlow がありますが、入門チュートリアルを見ただけで逃げてしまいました。

Microsoft は機械学習を提供していますが、IE6 はまだ少し気になります (近い将来、Amazon と Microsoft の間で大きな戦いが起こるかもしれません)。

いくつかの結論

ちょっと驚いているだけかもしれませんが（「ニュース」が「新しい」の複数形だと気づいたときのことを今でも覚えています）、これはすべてかなり驚くべきことだと思います。これにより、あなたや私のような一般人（開発への影響力は小さい）が機械学習を詳しく調べることができるようになり、それらのユーザーにとって大きな改善につながる可能性があります。

次はどこへ行く？

上記の例は明らかに不自然なものであり、いくつかのトピックを省略したことは認めます。

できればすべての問題をリストアップしたいのですが、自分でやってみて自分で問題を見つけ出すのも楽しいでしょう。

ぜひ挑戦してみてください。成功したら、ぜひコメント欄で教えてください。

<<: NLPとナレッジグラフの統合

>>: 闇の奥：人工知能の奥にはどんな闇が隠されているのか？