脳を使用してニューラルネットワークを構築する

Sep 14, 2025

操作方法

（イメージクレジット：ゲッティイメージズ）

Brain.jsはニューラルネットワークを構築するための素晴らしい方法です。単純に置くと、ニューラルネットワークは人間の脳と同様の方法で機能する機械学習の方法です。質問に対する正しい答えを考えると、（「このユーザーはどのオプションを選択しているのと同じように」）、それはゆっくりと答えと回答の間の関係を学びます。ニューラルネットワークの一例は、Facebookの顔認識システム、深刻表面です。

しかし、ニューラルネットワークの複雑なドメイン言語および一見急な学習曲線のために、それは始めるのが難しいかもしれません。

このチュートリアルでは、私たちは理論を台無しにし、重要なことに、実際に脳を使用して立ち往生してニューラルネットワークを作成します。最後に、ユーザーの楽観主義について複数選択の質問をするWebアプリがあります。彼らが提出するとき、これらの答えは私達のユーザーが真新しい質問の各オプションを選択する確率にニューラルネットワークを訓練するでしょう。

もっと便利なWebデザインツールが欲しいですか？完璧なピッキングの投稿を見てください ウェブサイトビルダー 。またはファイルを安全に保存する方法が必要な場合は、最高のピックをチェックしてください。 クラウドストレージ 。複雑なウェブサイトを計画していますか？あなたは堅牢性が必要です ウェブホスティング 保つことができるサービス。

このチュートリアルに必要なファイルをダウンロードしてください。

01.プロジェクトを設定します

まず、必要な依存関係をダウンロードしてインストールします。このチュートリアルでは、Reactの実用的な知識、または優先的な代替案への同等のマッピングがあると推定されます。

あなたの希望の方法を使って反応アプリを作成してください。あなたはFacebook'sを試すことができます create-react-app. 以下を使用してインストールされているツール。

npm install create-react-app -g

02.アプリを起動します

今度はBrain.jsを構築、インストールすることができ、アプリを起動できます。

 NPX CREATEE-REACT-APPOMITIMS-NN
CD楽観的NN
NPM Brainjsをインストールします
NPMスタート

ブラウザでニューラルネットワーク計算を実行します。ニューラルネットワークはリソース集約型であり、サーバーにオフロードされるべきです。ただし、このようにして、基本的なニーズに応じて迅速かつ罰金が短くなります。さて、私たちのエントリーポイントにabs.jsを追加しましょう（私の場合はapp.js）。

脳を「brain.js」から輸入する。

03.あなたのトレーニングの質問を定義します

brains.js neural network — 私たちのニューラルネットワークの視覚化入力は質問の各オプションの最適主義値から来ています。次に、これらは隠れたレイヤによって操作され、私たちが欲しい出力を与える - 各オプションの可能性が選択されています（画像クレジット：ハリーグレー）

次に私達の訓練の質問を定義する必要があります。別に 質問。js. ファイル、Aを必要とします トレインクエストリオション そして 検証Qestions. アレイ。あなたは私のリストをGit Repoに見つけるか、あなた自身を作成することができます。あなたが持っているより多くのトレーニングの質問はあなたの結果を正確にします。あなたのエントリポイントにこれらをインポートすることを忘れないでください。

エクスポートConst TrainingQuestions = [
  {
    ID： 'Q1'、
    質問：「あなたはよく最もよく見ていますか？」
    オプション：[
      {ID： 'Q1A'、ラベル：「実際にはない」、値：0.2、}、
      {ID： 'Q1B'、ラベル： 'always'、value：1.0、}、
      {ID： 'Q1C'、ラベル： '通常、yeah'、値：0.7、}、
      {ID： 'Q1D'、レーベル： 'never！'、値：0.0、}、
    ]、
  }、
]

どちらのアレイでも、質問が必要です。ラベルと最適主義値を含む4つのオプションの配列が必要です。この値は私たちのニューラルネットワークの入力になります。

値の注文とバランスを変更するか、ニューラルネットワークが配列内のオプションのインデックスに集中する可能性があります。私たちのニューラルネットワークは4つの入力を取り、4つの出力を与えます。私たちのトレーニングデータはこれを一致させる必要がありますので、私たちのコンストラクタでは、クイズとユーザーのオプションの州が必要です。

 this.state = {
  TrainingQuestions.map（（）=＆gt;アレイ（4）.fill（0））、
  トレーニング：偽り、
  予測：未定義、
;;

04.ニューラルネットワークを初期化します

Trainatanswarsの初期化は、[0,0,0,0] - 選択なしのデフォルトの状態を含む各質問に対して配列を作成します。私たちはまた私たちのニューラルネットワークを初期化する必要があるでしょう - Brain.jsの単一の線：

 this.net = newain.neuralnetwork（{隠れ家：}）;

05.クイズフレームワークを構築します

私たちのクイズのためのフレームワークを構築するために、私たちはトレーニングの質問とオプションをループする必要があります。これは非常に冗長であり、非常に興味深いものではないので、代わりに目指すための出力例を示します。

 Render（）{
  帰り（
    ＆lt; main＆gt;
      ＆lt; onsubmit = {this.submit}＆gt。
        【。 。 。」//質問とampを繰り返します。オプション

あなたが反応するために新しい場合は、を参照してくださいドキュメンテーションフォームを構築するために。

私たちは私たちの書くことができます ISOptionChecked そして OnOptionChange. 機能次へ

 ISOptionChecked =（AssuranceInd、OptionIndex）=＆gt; （
  this.state.trainingswers [ActureIndex] [OptionIndex]！== 0
）;
OnOptionChange =（AssuranceIndex、OptionIndex）= gt; {
  this.setState（PrevState =＆gt {
    const {trainatanswers} = object.assign（prevState、{}）;
    Trainatanswers [ArsiseDexe] = array（4）.fill（0）;
    Trainatanswers [ActionIndex] [OptionIndex] = 1;
    {trainatanswers}を返します。
  }）;）

06.ニューラルネットワークを訓練します

これで、ユーザーがオプションをクリックすると、関連性があります。 トレーニングバーズ Aを機能させるための配列 1 選択した索引で、ラジオボタンの状態を変更してチェックされているように表示されます。

私たちのものを追加する時間 onsubmit. トレーニングデータを構築し、ニューラルネットワークを訓練する機能：

 onsubmit = e = gt; {
    E.PreventDefault（）;
    const {trainatanswers} = this.state;
    Const TrainingData = TrainingQuestions.MAP（（Q、I）=＆gt;（{
      入力：q.Options.map（O = gt; o.value）、
      出力：トレーニングanswers [i]、
    ））;）
    this.setState（{
      トレーニング：
    }）;）
    this.net.trainasync（トレーニングデータ）
      。3（res =＆gt; {
        console.log（res）; //エラー率と繰り返しを記録します
        this.getPredicitions（）
      }）;）

ループオーバップ トレインクエストリオション 必要な入出力アレイを作成します。各オプションの最適主義価値を取得して入力データを取得し、その出力データが検索してから トレーニングバーズ 質問と同じインデックスで配列。

その後、状態を更新します トレーニング：true. ニューラルネットワークが学習していることをユーザに知らせる。クライアントデバイスの処理能力に応じて、あなたが持っている質問の数に応じて、プロセスは数秒、分以上かかることがあります！

最後に、トレーニングデータをニューラルネットワークに渡し、非同期的に訓練するように伝えます。これは、ネットワークがパターンを見つけたときに実現される約束を返します。

私たちがログインするエラー率に注目してください Trainasync. 。理想的には0~0.05です。もっと高い場合は、トレーニングデータを確認してください。

そこから、私たちは私たちの予測を得ることができます：

 getPredictions =（）=＆gt; {
  const予測= ValidationQuestions.map（q =＆gt;（
    this.net.run（q.options.map（O =＆gt; o.value））
  ）;

  this.setState（{
    トレーニング：偽り、
    予測
  }）;）
}

using net.run. 私達は私達の新しく訓練されたニューラルネットワークに私達が先に定義した検証の質問のそれぞれの予測を与えるように頼みます。

Grand Finaleの場合、当社の条件付きロードロジックを追加し、ユーザーに検索を提示します。

render（）{
    const {トレーニング、予測} = this.state;
    const validationQuestion = ValidationQuestions ;
    帰り（
      ＆lt; main＆gt;
        {トレーニング＆アンプ;＆amp; （
          ＆lt; h2＆gt;積荷...  [i] * 100）}％}＆lt; / span＆gt;
                 ＆lat; /ラベル＆gt;
                ））））}
              ＆lt; / div＆gt;
            ＆lt; / div＆gt;
          ＆lt; / div＆gt;
        ）}
      ＆lt; / main＆gt。
    ）;
  }
}

07.ネットワークを拡張します

これで、クイズの基本的なフレームワークがあり、次のように拡張してみてください。

あなたのユーザーにあなたの検証の質問に答えることによってあなたのニューラルネットワークの実際のエラー率を見つけてください。彼らがあなたの最善の推測を選んだ回数を見てください。

これらの追加の回答でニューラルネットワークを訓練し、正確さを向上させることができるかどうかを確認してください。

Neural Networkの計算をable.jsでノードサーバに移動させる tofunction（） そして Tojson（） 方法

この記事はもともと発行321 IN ネットマガジン 、世界大手のWebデザインマガジン。 問題321を購入する または ネットを購読する 。

続きを読む：

最高のJavaScriptライブラリ
試してみる最高のJavaScriptフレームワークの9
22華麗なjQueryプラグイン

脳を使用してニューラルネットワークを構築する

01.プロジェクトを設定します

02.アプリを起動します

03.あなたのトレーニングの質問を定義します

04.ニューラルネットワークを初期化します

05.クイズフレームワークを構築します

06.ニューラルネットワークを訓練します

07.ネットワークを拡張します

操作方法 - 最も人気のある記事

マウス制御視差の背景効果を生み出す

P5.JSでのデータ可視化を探る

アフィニティ設計者：制約の使い方

アフィニティデザイナー：ピクセルペルソナの使い方

あなたのコンテンツとのGoogleランキングに影響を与える方法

宇宙ヘルメットに湾曲ガラスを塗装する方法

realflowでスプラッシュ効果を作成する

デジタルテクスチャからのもっと得る方法

カテゴリ