Verwenden Sie brain.js, um ein neuronales Netzwerk zu bauen

Sep 17, 2025
wie man
brain.js neural network
(Bildkredite: Getty Images)

Brain.js ist eine fantastische Art, ein neuronales Netzwerk aufzubauen. Einfach eingerichtet, ein neuronales Netzwerk ist eine Methode des Maschinenlernens, die auf ähnliche Weise wie ein menschliches Gehirn arbeitet. Angesichts der richtigen Antwort auf eine Frage (wie "Welche Option wird dieser Benutzer wählen?"), Lernt es langsam das Muster und die Beziehung zwischen den Ein- und Antworten. Ein Beispiel eines neuronalen Netzwerks ist das Gesichtserkennungssystem von Facebook, Deeptface.

Aufgrund der komplexen Domainsprache von neuronalen Netzwerken und scheinbar steiler Lernkurven kann es jedoch schwer zu beginnen.

In diesem Tutorial desto destillieren wir die Theorie auf die Notwendigkeit, sich zu kennt, und vor allem, wenden Sie sich an, indem Sie sich eigentlich mit Brain.js einsetzen, um ein neuronales Netzwerk zu erstellen. Am Ende haben Sie eine Web-App, die Multiple-Choice-Fragen zum Optimismus eines Benutzers bittet. Wenn sie einreichen, trainieren diese Antworten ein neuronales Netzwerk auf die Wahrscheinlichkeit unseres Benutzers, die jede Option für eine brandneue Frage auswählt.

Wollen Sie mehr nützliche Webdesign-Tools? Sehen Sie unseren Beitrag, wenn Sie das perfekte auswählen Webseitenersteller . Oder wenn Sie irgendwo an der Speichern von Dateien sicher sind, überprüfen Sie unsere Auswahl des Besten Cloud-Speicherung. . Eine komplexe Website planen? Sie brauchen einen robusten Web-Hosting Service, der mithalten kann.

Laden Sie die Dateien herunter, die Sie für dieses Tutorial benötigen.

01. Richten Sie das Projekt ein

Laden Sie zunächst die erforderlichen Abhängigkeiten herunter und installieren Sie ihn. Dieses Tutorial vermutet, dass Sie ein funktionierendes Wissen über die Reaktion oder das äquivalente Zuordnung zu einer bevorzugten Alternative haben.

Erstellen Sie eine Reaktions-App mit Ihrer gewünschten Methode. Sie können Facebook ausprobieren Erstellen-React-App Werkzeug, installiert mit den folgenden: 

npm install create-react-app -g

02. Starten Sie Ihre App

Jetzt können wir bauen, Brain.js installieren und unsere App starten: 

 NPX Create-React-App-Optimismus-NN
CD-Optimismus-NN
NPM installieren Brainjs.
NPM Start

Wir werden die neuronale Netzwerkberechnung auf dem Browser ausführen. Neuronale Netzwerke sind ressourcenintensiv und sollten auf einen Server abgeladen werden. Dieser Weg ist jedoch schnell eingerichtet und für unsere Grundbedürfnisse in Ordnung. Nun hinzufügen wir uns in Brain.js an unseren Einstiegspunkt (in meinem Fall App.js). 

 Import des Gehirns von 'Brain.js';

03. Definieren Sie Ihre Trainingsfragen

brains.js neural network

Eine Visualisierung unseres neuronalen Netzwerks. Die Eingänge stammen aus dem Optimismuswert jeder Option für eine Frage. Diese werden dann von der verborgenen Schicht manipuliert, um die von uns gewünschten Ausgänge zu geben - die Wahrscheinlichkeit jeder Option, die ausgewählt wird (Bildkredite: Harry Grey)

Wir müssen unsere Trainingsfragen als nächstes definieren. In einer separaten Fragen.js. Datei, wir brauchen eine SchulungenQuestions und ValidationQuestions. Array. Sie finden meine Liste auf der Git-Repo, oder erstellen Sie Ihre eigenen. Je mehr Trainingsfragen Sie haben, desto genauer Ihre Ergebnisse. Denken Sie daran, diese in Ihren Einstiegspunkt zu importieren. 

 Export const TrainingQuestions = [
  {
    ID: 'q1',
    Frage: 'Siehst du oft das Beste in Dingen?',
    Optionen: [
      {ID: 'q1a', label: 'nicht wirklich', Wert: 0.2,},
      {ID: 'q1b', label: 'immer', Wert: 1.0,},
      {ID: 'q1c', label: 'normalerweise yeah', Wert: 0.7,},
      {ID: 'q1d', label: 'nie!', Wert: 0.0,},
    ],
  },
];

Für beide Arrays benötigen wir eine Frage, ein Array von vier Optionen, die ein Etikett und einen Optimismuswert enthalten. Dieser Wert ist der Eingang für unser neuronales Netzwerk.

Stellen Sie sicher, dass Sie die Reihenfolge und das Gleichgewicht der Werte variieren, oder das neuronale Netzwerk kann sich zu stark auf den Index der Optionen im Array konzentrieren! Unser neuronales Netzwerk dauert vier Eingänge und ergibt vier Ausgänge. Unsere Trainingsdaten müssen dies abgleichen, also benötigen wir in unserem Konstruktor einen Status für das Quiz und die Optionen des Benutzers: 

 das.State = {
  Traininganswers: TrainingQuestions.Map (() = & GT; Array (4). Fill (0)),
  Training: False,
  Vorhersagen: undefined,
};

04. Initialisieren Sie das neuronale Netzwerk

Die Initialisierung von traininganswers erstellt ein Array für jede Frage, die [0, 0, 0, 0] enthält - unser Standardstatus ohne Auswahl. Wir müssen auch unser neuronales Netzwerk initialisieren - nur eine einzige Linie mit Brain.js: 

 this.net = neues Brain.Neuralnetzwerk ({Hiddenlayers: 
});

brains.js neural network

Jeder Artikel in unserem Trainingssatz muss aus zwei Arrays bestehen. Eine Eingabe mit dem Optimismuswert jeder Option und einer Ausgabe, die die Selektion enthält, die unseren Benutzer erstellt hat (Bildkredite: Harry Grey)

05. Bauen Sie den Quizrahmen auf

Um den Rahmen für unser Quiz aufzubauen, müssen wir unsere Schulungsfragen und Optionen anschließen. Dies ist ziemlich verbroßt und nicht sehr interessant, also gebe ich eine beispielhafte Ausgabe, für die Sie stattdessen anstreben: 

 Render () {
  Rückkehr (
    & lt; main & gt;
      & lt; Form Onsubmit = {this.uSubmit} & gt;
        [ . .] // IERERATE ÜBER FRAGEN UND AMP; Optionen
        & lt; div classname = "frage" & gt;
          & lt; H4 & GT; {frage} & lt; / h4 & gt;
          & lt; div classname = "Optionen" & GT;
            & lt; label htmlfor = {optioneid} & gt;
              & lt; span & gt; {label} & lt; / span & gt;
              & lt; Input
                Typ = "Radio"
                erforderlich
                Name = {fraghaltigde}
                id = {optionId}
                geprüft = {() = & gt; dies.Itoptionalisieren (fragenIndex, optionIndex)}
                onchange = {() = & gt; dies.onoptionchange (fragtIndex, optiondex)}
              / & gt;
            & lt; / label & gt;
            [ . .]
          & lt; / div & gt;
        & lt; / div & gt;
        [ . .]
        & lt; Schaltfläche type = "Senden" & GT; Senden & lt; / button & gt;
    & lt; / form & gt;
    & lt; / main & gt;
  );
}

Wenn Sie neu sind, um zu reagieren, sehen Sie die Dokumentation für Gebäudeformen.

Wir können unsere schreiben IsoptionChecked. und aufoptionchange. Funktionen NEXT: 

 ISOPTIONCHECKED = (fragenIndex, optiondex) = & gt; (
  This.State.TrainingAnsWers [Fragedex] [optionIndex]! == 0
);
ONOPTIONCHANGE = (fragenIndex, optiondex) = & gt; {
  this.setState (prevtate = & gt; {{
    const {traininganswers} = object.gassign (prevtate, {});
    Traininganswers [fragredeIndex] = Array (4) .Fill (0);
    Traininganswers [Fragedex] [optionIndex] = 1;
    Rückgabe {traininganswers};
  });
};

06. Trainieren Sie das neuronale Netzwerk

brains.js neural network

Unsere Benutzeroberfläche zeigt bisher eine meiner Trainingsfragen und ihre Optionen. Ich habe CSS verwendet, um die eigentlichen Radiosastons auszublenden und ihnen ein Taste zum Toggle-Taste zu geben (Bildkredite: Harry Grey)

Wenn jetzt unser Benutzer auf eine Option klickt, aktualisieren wir die relevanten Trainingsansfers. Array, um eine 1. Im ausgewählten Index und Ändern Sie den Status des Funkschalts, um ihn als geprüft zu zeigen.

Zeit, unsere hinzuzufügen onsubmit. Funktion, wo wir die Trainingsdaten bauen und das neuronale Netzwerk trainieren: 

 onsubmit = e = & gt; {
    e.PreventDefault ();
    const {traininganswers} = dies.State;
    const trainingdata = trainingsquestions.map ((q, i) = & gt; ({
      Eingabe: q.options.map (o = & gt; o.Value),
      Ausgabe: Traininganswers [I],
    }));
    this.setState ({{
      Training: wahr,
    });
    This.net.trainasync (TrainingData)
      . Dann (res = & gt; {{
        console.log (res); // Melden Sie die Fehlerrate und # Iterationen an
        das.getPredictions ()
      });
  }

Umleiten SchulungenQuestions , erstellen wir die Ein- und Ausgabe-Arrays, die wir benötigen. Wir erhalten die Eingabedaten, indem wir den Optimismuswert jeder Option annehmen, und wir erhalten die Ausgabedaten von der Suche in der Trainingsansfers. Array auf demselben Index wie die Frage.

Danach aktualisieren wir den Staat mit Training: true. um den Benutzer zu informieren, dass das neuronale Netzwerk lernt. Abhängig von der Verarbeitungsleistung des Client-Geräts und wie viele Fragen Sie haben, kann der Prozess Sekunden, Minuten oder länger dauern!

Schließlich geben wir die Schulungsdaten an unser neuronales Netzwerk an und sagen es, asynchron zu trainieren. Dies gibt ein Versprechen zurück, das erfüllt ist, wenn das Netzwerk das Muster gefunden oder aufgegeben hat.

Halten Sie die Fehlerquote im Auge auf, die wir anmelden Trainasync. . Idealerweise sollte es zwischen 0 - 0,05 liegen. Wenn es höher ist, überprüfen Sie Ihre Trainingsdaten.

Von dort aus können wir unsere Vorhersagen erhalten: 

 GetPredictions = () = & gt; {
  Const-Vorhersagen = ValidationQuestions.Map (Q = & GT; ((
    this.net.run (q.options.map (o = & gt; o.Value))
  ));

  this.setState ({{
    Training: False,
    Vorhersagen,
  });
}

Verwendet net.run. Wir bitten unser neu ausgebildetes neuronales Netzwerk, uns seine Vorhersagen für jede der vorhergesetzten Validierungsfragen zu geben, die wir früher definiert haben.

Für das Grand Finale fügen wir unsere bedingte Ladelogik hinzu und präsentieren dem Benutzer einen Befund. 

 Render () {
    const {Training, Vorhersagen} = dies.State;
    const validationquestion = validationQuestions 
;
    Rückkehr (
      & lt; main & gt;
        {Training & AMP; & AMP; (
          & lt; H2 & GT; Laden ... & lt; / h2 & gt;
        )}
        {! Vorhersagen & AMP; & amp; ! training & amp; & amp; (
           [ . .] // Schulungsfragen bilden
        )}

        {Vorhersagen & AMP; & amp; ! training & amp; & amp; (
          & lt; div & gt;
            & lt; H2 & GT; Wir haben das neuronale Netzwerk gefragt: & lt; / h2 & gt;
            & lt; div classname = "frage" & gt;
              & lt; H4 & GT; {validationquestion.question} & lt; / h4 & gt;
              & lt; div classname = "Optionen" & GT;
                {validationquestion.options.map ((o, i) = & gt; (
                  & lt; Label Key = {o.id} & gt;
                    {/ * Zeigt das Etikett und die Wahrscheinlichkeit als Runder Prozentsatz an * /}
                    & lt; span & gt; {$ {o.label}: $ {math.round (Vorhersagen 
 [I] * 100)}%} & lt; / span & gt;
                 & lt; / label & gt;
                ))}
              & lt; / div & gt;
            & lt; / div & gt;
          & lt; / div & gt;
        )}
      & lt; / main & gt;
    );
  }
}

07. Erweitern Sie das Netzwerk

brains.js neural network

Hier sind unsere endgültigen Ergebnisansicht mit meiner Validierungsfrage und Optionen. Ich habe die Wahrscheinlichkeit an eine andere DIV passiert, um sie als Bar anzuzeigen (Bildkredite: Harry Grey)

Jetzt haben Sie den grundlegenden Rahmen für das Quiz, versuchen Sie, dies mit folgendem zu erweitern:

Finden Sie die eigentliche Fehlerrate Ihres neuronalen Netzwerks, indem Sie Ihren Benutzer Ihre Validierungsfragen beantworten lassen. Sehen Sie, wie oft sie Ihre beste Vermutung entschieden haben.

Trainieren Sie das neuronale Netzwerk mit diesen zusätzlichen Antworten und sehen Sie, ob Sie die Genauigkeit verbessern können.

Bewegen Sie die neuronalen Netzwerkberechnungen mit dem Brain.js auf einen Knotenserver. Funktionieren() und tojson () Methoden.

Dieser Artikel erschien ursprünglich in Ausgabe 321 in Netzmagazin. Das weltweit führende Webdesign-Magazin der Welt. Ausgabe 321 kaufen oder Net abonnieren .

Weiterlesen:

  • Die besten JavaScript-Bibliotheken
  • 9 der besten JavaScript-Frameworks zum Ausprobieren
  • 22 brillante Jquery-Plugins

wie man - Die beliebtesten Artikel

30 Keyshot-Rendering-Tipps

wie man Sep 17, 2025

Das Rendern eines Bildes, Animation eines Modells oder sogar einer ganzen Szene ist ein wichtiger Schritt in der Kunst. Ohne dies..

So erstellen Sie leuchtende Farben mit Ölfarben

wie man Sep 17, 2025

Gebeten, meine zu beschreiben Maltechnik. ist für mich seltsam und ehrlich gesagt ist es schwer zu tun. Ich bin e..

Wie kann man einen Charakter in vr

wie man Sep 17, 2025

Seite 1 von 2: Seite 1 Seite 1 Seite 2 ..

Wie man in Kino 4d skulpt

wie man Sep 17, 2025

Wenn Sie sich ein Modell oder eine Szene nähern, die die verfeinerte Modellierung von Sculpting erfordert, können viele 3D-Kün..

Was ist neu in Winkel 4?

wie man Sep 17, 2025

Seite 1 von 2: Schritte 1-10. Schritte 1-10. ..

5 Tipps zum Sculpting in doppelter Schnellzeit

wie man Sep 17, 2025

Eine wirklich detaillierte 3D-Kreature kann Tage dauern - aber es ist immer noch erstaunlich, wie weit Sie in einer Stunde bekommen können. Dieses Modell eines nubischen Ibex wurde von gefor..

10 Top Houdini Tutorials

wie man Sep 17, 2025

Houdini ist ein kraftvolles Biest mit Werkzeugen für den Bau von VFX in vielen Hollywood-Filmen. Die anfängliche Lernkurve ist jedoch steil, also haben wir diese Liste von Tutorials zusamme..

Boost d3.js-Diagramme mit SVG-Gradienten

wie man Sep 17, 2025

Nadieh Bremer wird an sein London generieren Im September, wo sie demonstrieren wird ..

Kategorien