UIによる機械学習の使用

時にはそれだけで何を行うことができますを参照してくださいコードを再生するのも楽しいです.そこで私は数ヶ月前に小さなプロジェクトを開始し、マシンの学習とUI/UXをミックスする方法を見つけました.私が思いついたプロジェクトは簡単だった:彼らがページを閲覧すると、彼らはより多くの上にフォーカス色に基づいてユーザーの色の設定を更新します.これは役に立つですか.私は確かではありませんが、それは面白かったです、そして、私は3つの異なる会議でそれについて話すことができました!
これは、私がこのプロジェクトと私が学んだことのいくつかを経験した方法のガイドです.興味があれば、ソースコードへのリンクがあります

https://github.com/flippedcoder/smart-page ニューラルネットワークの背景

あなたが機械学習について何も知らないならば、あなたはニューラルネットワークについて少し知っていなければなりません.ニューラルネットワークは人間の心を複製する私たちのゆるい試みです.彼らは私たちが与える情報に基づいてパターンを認識するアルゴリズムに基づいています.その情報は住宅価格、株式市場の価値、およびユーザーデータのようなものかもしれません.
Webアプリケーションでは、分類、予測、クラスタリングの多くが表示されますいくつかの使用があります.予測の例は、将来の価値の範囲を選択しなければならない株式市場データを使用するでしょう.分類の例は、ユーザーの報告されたメッセージが不正であるかどうか決定するでしょう.いくつかのデータを取得し、それを与える値を見て、合法的なメッセージを分類するアルゴリズムを訓練する.最後に、クラスタリングの例はトロルのコメントをチェックするでしょう.通常のコメントは感情と声明の範囲の範囲内で落ちます、しかし、トロールは通常外れます.
ニューラルネットワークがどのようなものなのかを考えてみましょう.ニューラルネットワークはノードで構成される.ノードは関数のようです.それは価値が計算される場所です.ノードは、脳内のニューロンの後にモデル化され、入力のセットを取り、出力を与えます.これは通常、あなたがニューラルネットワークを使用することを決定するときに探している値です.

これは、あなたがbrainjsで始めるために知っている必要があるすべてについてです.それは非常に簡単なニューラルネットワークを訓練する.私たちが進むにつれて説明されるかもしれないいくつかの小さいものがあります、そして、私は彼らに触れようとします.

ブレインズの背景

さあ、JavaScriptライブラリに入りましょう.これは、あなたがTensorFlowJS以外の使用することができます機械学習ライブラリの一つです.あなたがニューラルネットワークとノードについて少し知っているならば、それは使いやすいです、そして、それは多くのすばらしいチュートリアルとドキュメンテーションとともに来ます.私が使用することを決めた方法は、定期的なニューラルネットワークトレーニングモデルです.定期的なニューラルネットワークを使用することはオプションですが、この小さなプロジェクトのために、単純なニューラルネットワークは十分でした.
ブレインは、あなたのデータセットと新しい構文を学ぶしようとする代わりに使用する入力に集中することができますので、簡単にモデルを訓練することができます.TensorFlowJsはクールです、そして、私はそれとこの同じプロジェクトを作りました、しかし、私はちょうど少しよりよくBraininを好みます.したら、いくつかのチュートリアルを通過すると、あなただけでダイビングすることができます.最も重要なことは、実際に機械学習が役に立つということを念頭に置くことです.

どの機能を使用するかを決める

このプロジェクトのために、私はあなたがモデルを訓練することができたならば、ユーザーが好むページで色を選ぶためにモデルを訓練することができて、異なる色合いまたはその特定の色を補うためにページの上で要素を変えます.興味深いことは、ユーザーがページをリフレッシュするたびに、カスタムの色がリセットされます.それはあなたのアプリケーションが使用されるものに応じて良いことかもしれません.UIにこのような変更を加えると、販売を終了するのを助けたり、誰かがフォームを正しく記入するのを奨励することができます.
私がこのプロジェクトを作ることに決めた方法は、私とUIデザイナーの間の長い前後から来ました.私は、ユーザーが私たちの代わりにどのような色合いが“正しいメッセージ”を表す推測しようとするものを教えてくれるようにしたいと思った.ユーザーからの収集に焦点を当てたデータは、彼らが最も多くの時間を過ごした要素の色だった.これが正しいアプローチかどうか、私は知りません.私はちょうどこのメトリックを使用して何が起こるか知りたかった.
ページ上のマウスの座標に基づいて、現在の状態にある要素のRGB値を得ることができました.私の推測は、無意識の変化は、あなたがそれらをしたいようにあなたのアプリケーションを介して移動する人々に影響を与える可能性がありますように私たちが好む色に潜在的に重力的に重力であるということでした.彼らはあなたのページで最も時間を過ごす場所を見て、あなたはいくつかのレベルで色に惹かれているという推測を取ることができます.
次に、その情報を取ることができると要素の間のコントラストやウェブサイトの全体的なトーンは、特定のユーザーと一致するように調整します.サーバー側のコードに対処する必要はありませんので、ブラウザでも行うことができます.私はそれがまだどのように機能するかわからないが、私はあなたがドキュメントでそれを行うことができます読んだ!今、機能が定義されている、ユーザーが好むように見えるRGB値は、いくつかのコードを書き始めると、ニューラルネットワークモデルを訓練する時間です.

https://github.com/BrainJS/brain.js#node ユーザ行動を理解するためのモデルの訓練

ちょうど速いヘッド、あなたはここのこのプロジェクトのためにコードのすべてを見つけません、しかし、あなたは私のGithub Repoでそれをチェックすることができます.私は作成アプリを使用して、このアプリを作った、私は実際のデータを持っていないので、私はちょうど私たちが使用する番号を構成し、これは私が考えた個人的なプロジェクトは、コードを共有するようにクールだと思いました.ああ!サーバを見てみましょう.我々が必要とするJSファイル.
これは、我々が我々のニューラルネットワークに使用するトレーニングデータを作成する方法です.

const trainingInputData = [
    { green: 0.2, blue: 0.4 },
    { green: 0.4, blue: 0.6 },
    { red: 0.2, green: 0.8, blue: 0.8 },
    { green: 1, blue: 1 },
    { red: 0.8, green: 1, blue: 1 },
    { red: 1, green: 1, blue: 1 },
    { red: 1, green: 0.8, blue: 0.8 },
    { red: 1, green: 0.6, blue: 0.6 },
    { red: 1, green: 0.4, blue: 0.4 },
    { red: 1, green: 0.31, blue: 0.31 },
    { red: 0.8 },
    { red: 0.6, green: 0.2, blue: 0.2 }
];

const trainingOutputData = [
    { dark: 0.8 },
    { neutral: 0.8 },
    { light: 0.7 },
    { light: 0.8 },
    { light: 0.9 },
    { light: 1 },
    { light: 0.8 },
    { neutral: 0.7, light: 0.5 },
    { dark: 0.5, neutral: 0.5 },
    { dark: 0.6, neutral: 0.3 },
    { dark: 0.85 },
    { dark: 0.9 }
];

const trainingData = [];

for (let i = 0; i < trainingInputData.length; i++) {
    trainingData.push({
        input: trainingInputData[i],
        output: trainingOutputData[i]
    });
}

TrainingInputDataは、ユーザーから期待できる値のサンプルです.それで、我々は彼らが最も接近して、それらのRGB valesを得る要素の背景色を見ています.TrainingOutputDataは、我々が予測しようとしているものです.誰もが明るさレベルの好みを持っており、特定のRGB値は、暗い、光、および中立の明るさの特定のレベルに対応すると言う.入力データに基づいて、ユーザーのページの明るさを調整することができます.
今、私たちは新しいモデルを作って、モデルを訓練するためにこのデータを使用することができます.

const net = new brain.NeuralNetwork({ hiddenLayers: [3] });

const stats = net.train(trainingData);

console.log(stats);

最初に3つの隠れ層を持つ新しいニューラルネットワークを作り,ネットと呼ぶ.あなたが深い学習を活用しているので、いくつかの隠された層を追加すると、より正確な結果を与える.深い学習は、ちょうどあなたの入力を分析する1つ以上の隠し層を使用していることを意味します.次に、それを我々のトレーニング・データを通過することによって中立のネットワークを訓練して、我々はそれを「統計」と呼ばれる変数に割り当てます.最後に、トレーニングエラーとコンソールの反復回数のような統計情報をすべて表示します.
この時点で、モデルはあなたがそれを与える任意の入力で実行する準備が整いました.これは、ユーザーがモデルにフィードを入力するためのコードを設定する時です.これを行うには、ユーザーリクエストから直接入力データを取得し、入力の新しいトレーニングデータ配列を作成します.次に、新しいトレーニング出力データの値を取得するために、新しいトレーニング入力データを使用してモデルを実行します.
次に、新しいトレーニングデータを使用してモデルを更新し、ユーザーから取得した最後の入力にモデルを実行します.私はデータをサーバーに送信する方法のため、そのようにそれをすることを選びました.基本的に、入力データと同じ形でサーバにRGB値の配列を返します.最後の入力でモデルを実行した後、その予測値をユーザーに渡し、UIに調整を行います.

app.post('/getUserMouseCoordinates', (req, res) => {
    let newTrainingInputData = req.body.userData;
    let newTrainingOutputData = [];
    let newTrainingData = [];

    newTrainingInputData.forEach(input => {
        newTrainingOutputData.push(
            net.run(
                { 
                    red: input.input.red, 
                    green: input.input.green, 
                    blue: input.input.blue 
                }
            )
        );
    });

    for (let i = 0; i < newTrainingInputData.length; i++) {
        newTrainingData.push({
            input: newTrainingInputData[i],
            output: newTrainingOutputData[i]
        });
    }

    net.train(newTrainingData);

    let newPredictedValue = net.run(newTrainingInputData[newTrainingInputData.length - 1]);

    res.send(JSON.stringify({ predictedValue: newPredictedValue }));
});

DOMへの更新を行うためのモデルの使用

ユーザーは実際には、このようなものは、バックグラウンドで起こっているとしてそれを遅くしていないことを気にしない.それで、どのように私が彼らの入力をサーバに得るかについて、あなたに教えさせてください.私は自分の入力配列にユーザデータ(100ポイント)のまともなサイズのセットがあるまで待ちます.100のデータポイントがあるまで、値は配列に加えられます、そして、我々はサーバーに何も送りません.私の後ろに100のデータポイントを選択する技術的理由はない.それはちょうど私が選んだ番号です.🤷‍♀️
ニューラルネットワークの場合、入出力値は0 - 1の間である.つまり、値より大きい値で動作している場合、その範囲内に収まるようにスケーリングする必要があります.これは、それぞれのRGB値を1000で割った理由です.それらの値は0 - 255の間であるので、それらがニューラルネットワークのその0 - 1範囲の範囲内ですべてに合うことを確認したかったです.ミニマックス正規化やZ -スコアの正規化のような値をスケーリングするための良い方法のトンがあり、あなたは確かにそれらを実際のマシンの学習プロジェクトで動作するようなものを使用する必要があります.
配列のスケーリング値を除いて、入力配列に100個のデータポイントを持っているときには、最後にサーバに戻します.入力配列が渡され、処理されると、ユーザは、時間をかけて使用した時間の色、明暗、および中立の合成のための予測値で応答を得るでしょう.次に、状態変数を更新し、ユーザのUIを更新するchangealpha関数を呼び出します.

getUserMouseCoordinates = async (event) => {
        if (this.input.length >= 100) {
            let userData = { userData: this.input };
            let prediction = await fetch('/getUserMouseCoordinates', {
                method: 'POST',
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(userData)
                });

            const predict = await prediction.json();
            this.setState({
                light: predict.predictedValue.light,
                dark: predict.predictedValue.dark,
                neutral: predict.predictedValue.neutral
            });
            this.changeAlpha();
        }
        else {
            this.input.push(
                { 'input': { 
                    red: event.target.style.backgroundColor.split(',')[0].substr(4) / 1000, 
                    green: event.target.style.backgroundColor.split(',')[1].trim() / 1000, 
                    blue: event.target.style.backgroundColor.split(',')[2].trim().split(')')[0] / 1000 
                    }
                }
            );
        }
    }

これは私の個人的なプロジェクトの一つの例です.私も、異なるプロジェクトでこのプロジェクトを提示するために得た!コードは美しく、最高のマシンの学習プラクティスは、すべての場所ではなく、その罰金です.プロジェクトのコードは、何かが動作するかどうかを把握しようとしているときに完璧である必要はありません.ある日私は時間のリファクタリングと実験を過ごすつもりですが、今のところ、私は完了したい他のプロジェクトがあります!
これについてどう思いましたか.このような個人プロジェクトについて投稿して話すのは役に立つでしょうか?あなたはこのようなランダムなプロジェクトを考え出す方法についてのコードや洞察力に詳細をお好きですか?私はフィードバックのためのオープンので、私はこのような私のプロジェクトについて書かれていない!
おい!理由は以下の通りです.