Använd Brain.js för att bygga ett neuralt nätverk

Sep 11, 2025

Hur

(Bildkredit: Getty Images)

Brain.js är ett fantastiskt sätt att bygga ett neuralt nätverk. Enkelt uttryckt är ett neuralt nätverk en metod för maskininlärning som fungerar på ett liknande sätt som en mänsklig hjärna. Med tanke på det rätta svaret på en fråga (som "vilket alternativ kommer den här användaren att välja?"), Lär det långsamt mönstret och förhållandet mellan ingångarna och svaren. Ett exempel på ett neuralt nätverk är Facebooks ansiktsigenkänningssystem, Deepface.

Men på grund av det komplexa domänspråket i neurala nätverk och till synes brant inlärningskurva kan det vara svårt att komma igång.

I den här handledningen kommer vi att destillera teorin ner till behov-att-vet och, allt, fastna, fastna med att faktiskt använda brain.js för att skapa ett neuralt nätverk. I slutet kommer du att ha en webbapp som frågar flera valfrågor om en användares optimism. När de skickar, kommer dessa svar att träna ett neuralt nätverk till sannolikheten för att vår användare väljer varje alternativ för en helt ny fråga.

Vill du ha mer användbara webbdesignverktyg? Se vårt inlägg när du plockar det perfekta Website Builder . Eller om du behöver någonstans för att lagra filer säkert, kolla in vår plocka av det bästa molnlagring . Planerar en komplex webbplats? Du behöver en robust webbhotell service, som kan fortsätta.

Ladda ner de filer du behöver för den här handledningen.

01. Ställ in projektet

För det första, ladda ner och installera de nödvändiga beroenden. Denna handledning förutsätter att du har en arbetskunskap om reaktion, eller motsvarande kartläggning till ett föredraget alternativ.

Skapa en reaktiv app med önskad metod. Du kan prova Facebook skapa-reagera-app Verktyg, installerat med hjälp av följande:

npm install create-react-app -g

02. Starta din app

Nu kan vi bygga, installera brain.js och starta vår app:

 NPX Skapa-Reagering-App Optimism-NN
cd optimism-nn
npm installera brainjs
npm start

Vi ska utföra den neurala nätverksberäkningen på webbläsaren. Neurala nätverk är resursintensiva och bör avlastas till en server. Men det här sättet är snabbt att sätta upp och bra för våra grundläggande behov. Låt oss nu lägga till brain.js till vår ingångspunkt (i mitt fall, app.js).

 Importera hjärna från "Brain.js";

03. Definiera dina träningsfrågor

brains.js neural network — En visualisering av vårt neurala nätverk. Ingångarna kommer från optimismvärdet för varje alternativ för en fråga. Dessa manipuleras sedan av det dolda lagret för att ge oss de utgångar vi vill ha - sannolikheten för att varje alternativ är valt (Bildkredit: Harry Gray)

Vi måste definiera våra träningsfrågor nästa. I en separat frågor.js fil, vi behöver en Utbildningskvot och ValideringQuestions array. Du kan hitta min lista på git repo eller skapa din egen. Ju mer träningsfrågor du har, ju mer exakta dina resultat. Kom ihåg att importera dessa till din ingångspunkt.

 Export Const TrainingQuestions = [
  {
    ID: 'Q1',
    Fråga: "ser du ofta det bästa i saker?",
    alternativ: [
      {id: "q1a", etikett: "inte riktigt", värde: 0,2,},
      {id: "q1b", etikett: "alltid", värde: 1,0,},
      {id: "q1c", etikett: "Vanligtvis ja", värde: 0,7,},
      {id: "q1d", etikett: "aldrig!", värde: 0,0,},
    ]
  },
];

För båda arraysna behöver vi en fråga, en rad fyra alternativ som innehåller en etikett och ett optimismvärde. Detta värde kommer att vara inmatningen för vårt neurala nätverk.

Se till att du varierar order och balans mellan värden, eller det neurala nätverket kan fokusera för mycket på indexet för alternativen i matrisen! Vårt neurala nätverk tar fyra ingångar och ger fyra utgångar. Våra träningsdata behöver matcha detta, så i vår konstruktör behöver vi lite stat för quiz och användarens alternativ:

 This.State = {
  TrainingAnsWers: TrainingQuestions.Map (() = & GT; Array (4) .fill (0)),
  Utbildning: Falskt,
  Förutsägelser: odefinierad,
};

04. Initialisera det neurala nätverket

Initialiseringen av TrainingAnsWers skapar en array för varje fråga som innehåller [0, 0, 0, 0] - vårt standardtillstånd utan val. Vi kommer också att behöva initialisera vårt neurala nätverk - bara en enda linje med brain.js:

 This.net = Ny Brain.neureNetwork ({HiddenLayers: });

05. Bygg quiz-ramen

För att bygga ramverket för vår quiz måste vi slinga över våra träningsfrågor och alternativ. Det här är ganska verbose och inte särskilt intressant, så jag ska ge ett exempel för dig att sikta på istället:

 Render () {
  lämna tillbaka (
    & lt; Main & GT;
      & lt; form påsubmit = {this.onsubmit} & gt;
        [ . .] // iterera över frågor och amp; alternativ
        & lt; div className = "Fråga" & GT;
          & lt; h4 & gt; {fråga} & lt; / h4 & gt;
          & lt; div className = "Alternativ" & GT;
            & LT; Label HTMLFOR = {OPPENTID} & GT;
              & lt; span & gt; {etikett} & lt; / span & gt;
              & lt; ingång
                TYPE = "RADIO"
                nödvändig
                Namn = {questionid}
                ID = {OPTIONID}
                kontrolleras = {() = & gt; This.isoptionChecked (QuestionIndex, OptionIndex)}
                onChange = {() = & gt; This.OnPtionChange (QuestionIndex, OptionIndex)}
              / & gt;
            & LT; / Etikett & GT;
            [ . .]
          & lt; / div & gt;
        & lt; / div & gt;
        [ . .]
        & lt; knapptyp = "Skicka" & GT; skicka in & lt; / knapp & gt;
    & LT; / Form & GT;
    & LT; / Main & GT;
  );
}

Om du är ny att reagera, se dokumentation för byggnadsformer.

Vi kan skriva vår isoptionchecked och OnoptionChange Funktioner Nästa:

 isoptionChecked = (QuestionIndex, OptionIndex) = & GT; (
  This.State.TrainingAnsWers [QuestionIndex] [OPTIONIndex]! == 0
);
OnOptionChange = (QuestionIndex, OptionIndex) = & GT; {
  This.setstate (Prevstate = & GT; {
    const {TrainingAnsWers} = Objekt.assign (Förstate, {});
    TrainingAnsWers [QuestionIndex] = Array (4) .fyll (0);
    TrainingAnsWers [QuestionIndex] [OPTIONIndex] = 1;
    återvända {TrainingAnswers};
  });
};

06. Tåg det neurala nätverket

Nu, när vår användare klickar på ett alternativ, uppdaterar vi relevanta TrainingAnsWers array att ha en 1 I det valda indexet och ändra tillståndet på radioknappen för att visa det som kontrollerat.

Dags att lägga till vår onsubmit Funktion, där vi bygger träningsdata och tränar det neurala nätverket:

 ONSUBMIT = E = & GT; {
    E.PreventDefault ();
    const {TrainingAnswers} = This.State;
    Const TrainingData = TrainingQuestions.Map ((Q, I) = & GT; ({
      Ingång: Q.Options.Map (O = & GT; O.Value),
      Utgång: TrainingAnsWers [I],
    }));
    this.setstate ({
      Utbildning: sant,
    });
    this.net.trainasync (TrainingData)
      .then (res = & gt; {
        konsol.log (res); // logga in felfrekvensen och # iterations
        this.getPredictions ()
      });
  }

Looping över Utbildningskvot , vi skapar de inmatnings- och utgångsarrayer vi behöver. Vi får ingångsdata genom att ta optimismvärdet för varje alternativ och vi får utgångsdata från att titta i TrainingAnswers array i samma index som frågan.

Därefter uppdaterar vi staten med utbildning: sant att informera användaren om att det neurala nätverket lär sig. Beroende på klientenhetens bearbetningskraft och hur många frågor du har, kan processen ta sekunder, minuter eller längre!

Slutligen skickar vi träningsdata till vårt neurala nätverk och berättar att det ska träna asynkront. Detta returnerar ett löfte som är uppfyllt när nätverket har hittat mönstret eller ges upp.

Håll ett öga på felfrekvensen vi loggar in Trainasync . Helst bör det vara mellan 0 - 0,05. Om det är högre, kontrollera dina träningsdata.

Därifrån kan vi få våra förutsägelser:

 getPredictions = () = & gt; {
  Const Predictions = ValidationQuestions.Map (Q = & GT;
    this.net.run (q.options.map (O = & GT; O.Value))
  ));

  this.setstate ({
    Utbildning: Falskt,
    förutsägelser,
  });
}

Använder sig av net.run Vi ber vårt nyutbildade neurala nätverk att ge oss sina förutsägelser för var och en av de valideringsfrågor som vi definierade tidigare.

För Grand Finale lägger vi till vår villkorliga lastlogik och presenterar ett resultat till användaren.

framställa() {
    const {träning, förutsägelser} = det här.
    Const ValidationQuestion = ValidationQuestions ;
    lämna tillbaka (
      & lt; Main & GT;
        {Training & Amp; & amp; (
          & lt; h2 & gt; loading ... & lt; / h2 & gt;
        )}
        {! Förutsägelser och amp; & amp; ! Träning & amp; & amp; (
           [ . .] // Utbildningsfrågor
        )}

        {förutsägelser och amp; & amp; ! Träning & amp; & amp; (
          & lt; div & gt;
            & lt; H2 & GT; Vi frågade det neurala nätverket: & LT; / H2 & GT;
            & lt; div className = "Fråga" & GT;
              & lt; h4 & gt; {valideringquestion.question} & lt; / h4 & gt;
              & lt; div className = "Alternativ" & GT;
                {valideringquestion.options.map ((o, i) = & gt;
                  & lt; etikettnyckel = {O.id} & GT;
                    {/ * Visa etiketten och sannolikheten som en rund andel * /}
                    & lt; span & gt; {$ {o.label}: $ {matte.round (förutsägelser  [i] * 100)}%} & lt; / span & gt;
                 & LT; / Etikett & GT;
                ))}
              & lt; / div & gt;
            & lt; / div & gt;
          & lt; / div & gt;
        )}
      & LT; / Main & GT;
    );
  }
}

07. Utöka nätverket

Nu har du den grundläggande ramen för quiz, försök att förlänga den med följande:

Hitta den verkliga felfrekvensen för ditt neurala nätverk genom att låta din användare svara på dina valideringsfrågor. Se hur många gånger de valde din bästa gissning.

Träna det neurala nätverket med dessa ytterligare svar och se om du kan förbättra noggrannheten.

Flytta de neurala nätverksberäkningarna på en nodserver med brain.js att fungera() och Tojson () metoder.

Denna artikel uppträdde ursprungligen i fråga 321 i nätmagasin , världens ledande webbdesignmagasin. Köp utgåva 321 eller Prenumerera på nätet .

Läs mer:

De bästa JavaScript-biblioteken
9 av de bästa JavaScript-ramen för att försöka
22 briljanta jquery plugins

Använd Brain.js för att bygga ett neuralt nätverk

01. Ställ in projektet

02. Starta din app

03. Definiera dina träningsfrågor

04. Initialisera det neurala nätverket

05. Bygg quiz-ramen

06. Tåg det neurala nätverket

07. Utöka nätverket

Hur - Mest populära artiklar

Hur man ritar djur: 15 Topptips

Skapa krusningseffekter med Pixijs

Måla ett uttrycksfullt stilleben i akryler

Hur man skapar furry tecknade tecken

Skapa bättre karaktärsanimationer i Maya

Gör realistiska växter i Cinema 4D

Master negativ målning i akvarell

Hur man får din Zbrush-modell till Maya

Kategorier