Bruk hjerne.js for å bygge et nevralt nettverk

Feb 2, 2026
hvordan
brain.js neural network
[1. 3]
(Bildekreditt: Getty Images)

Brain.js er en fantastisk måte å bygge et nevralt nettverk på. Enkelt sagt, et nevralt nettverk er en metode for maskinlæring som fungerer på samme måte som en menneskelig hjerne. Gitt det riktige svaret på et spørsmål (som "hvilket alternativ vil denne brukeren velge?"), Lærer det langsomt mønsteret og forholdet mellom inngangene og svarene. Et eksempel på et nevralt nettverk er Facebooks ansiktsgjenkjenningssystem, Deepface.

Men på grunn av det komplekse domenespråket til nevrale nettverk og tilsynelatende bratte læringskurve, kan det være vanskelig å komme i gang.

I denne opplæringen vil vi destillere teorien ned til å trenge å vite og, viktigere, bli sittende fast med å faktisk bruke hjerne.js for å skape et nevralt nettverk. På slutten vil du ha en webapp som spør flere valgspørsmål om en brukers optimisme. Når de sender inn, vil disse svarene trene et nevralt nettverk til sannsynligheten for at brukeren vår velger hvert alternativ for et helt nytt spørsmål.

Ønsker du mer nyttige webdesignverktøy? Se vårt innlegg på å plukke den perfekte Nettstedbygger . Eller hvis du trenger et sted å lagre filer sikkert, sjekk ut vårt valg av det beste skylagring . Planlegger en kompleks nettside? Du trenger en robust Web Hosting. service, som kan holde tritt.

Last ned filene du trenger for denne opplæringen.

01. Sett opp prosjektet

For det første, last ned og installer de nødvendige avhengighetene. Denne opplæringen antar at du har en arbeidskunnskap om reagert, eller tilsvarende kartlegging til et foretrukket alternativ.

Opprett en reakt-app ved hjelp av ønsket metode. Du kan prøve Facebook Opprett-reagert-app verktøy, installert ved hjelp av følgende: 

npm install create-react-app -g

02. Start appen din

Nå kan vi bygge, installere hjerne.js, og start vår app: 

 NPX CREATE-REACT-APP OPTIMISM-NN
CD optimisme-nn
NPM Installer Brainjs.
npm start

Vi skal utføre den nevrale nettverksberegningen på nettleseren. Neurale nettverk er ressursintensive og bør lastes ned til en server. På denne måten er denne måten rask å sette opp og fint for våre grunnleggende behov. La oss nå legge til hjerne.js til vårt inngangspunkt (i mitt tilfelle, app.js). 

 Importer hjernen fra 'brain.js';

03. Definer treningsspørsmålene dine

brains.js neural network

En visualisering av vårt neurale nettverk. Inngangene kommer fra optimismeverdien til hvert alternativ for et spørsmål. Disse blir deretter manipulert av det skjulte laget for å gi oss utgangene vi ønsker - sannsynligheten for at hvert alternativ blir valgt (Bilde Kreditt: Harry Grey)

Vi må definere våre treningsspørsmål neste. I en egen spørsmål.js. fil, vi trenger en opplæring og valideringquestions. array. Du kan finne listen min på GIT Repo eller lage din egen. Jo flere treningsspørsmål du har, jo mer nøyaktige resultatene dine. Husk å importere disse til inngangspunktet ditt. 

 Eksporter Const TrainingQuestions = [
  {
    ID: 'Q1',
    Spørsmål: "Ser du ofte det beste i ting?",
    Alternativer: [
      {ID: 'Q1A', etikett: 'ikke egentlig', verdi: 0,2,},
      {ID: 'Q1B', etikett: 'Alltid', Verdi: 1.0,},
      {ID: 'Q1C', etikett: 'Vanligvis yeah', Verdi: 0,7,},
      {ID: 'Q1D', etikett: 'Aldri!', Verdi: 0.0,},
    ],
  },
];

For begge arrays trenger vi et spørsmål, en rekke fire alternativer som inneholder en etikett og en optimismeverdi. Denne verdien vil være inngangen til vårt neurale nettverk.

Sørg for at du varierer bestillingen og balansen mellom verdier, eller det nevrale nettverket kan fokusere for mye på indeksen for alternativene i arrayet! Vårt neurale nettverk tar fire innganger og gir fire utganger. Våre treningsdata må samsvare med dette, så i vår konstruktør trenger vi noen stat for quizen og brukerens alternativer: 

 This.State = {
  TrainingAnswers: TrainingQuestions.Map (() = & gt; Array (4) .Fyll (0)),
  Opplæring: Falsk,
  Forutsigelser: undefined,
};

04. Initialiser det nevrale nettverket

Initialiseringen av treningsanvisere skaper en matrise for hvert spørsmål som inneholder [0, 0, 0, 0] - vår standardstatus uten valg. Vi kommer også til å trenge å initialisere vårt neurale nettverk - bare en enkelt linje med hjerne.js: 

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

brains.js neural network

Hvert element i vårt treningssett må bestå av to arrays; en inngang med optimismeverdien til hvert alternativ og en utgang som inneholder valget vår bruker laget (Bilde Kreditt: Harry Grey)

05. Bygg Quiz-rammen

For å bygge rammen for vår quiz, må vi sløyfe over våre treningsspørsmål og alternativer. Dette er ganske verbose og ikke veldig interessant, så jeg vil gi et eksempelutgang for deg å sikte på i stedet: 

 gjengivelse () {
  komme tilbake (
    & lt; main & gt;
      & lt; form onsubmit = {this.onubmit} & gt;
        [. . .] // iterate over spørsmål og amp; Alternativer
        & lt; div classname = "spørsmål" & gt;
          & lt; h4 & gt; {spørsmål} ​​& lt; / h4 & gt;
          & lt; div classname = "alternativer" & gt;
            & lt; etikett htmlfor = {opsjonsid} & gt;
              & lt; span & gt; {label} & lt; / span & gt;
              & lt; input
                Type = "Radio"
                kreves
                NAME = {SMECIESID}
                id = {opsjonid}
                sjekket = {() = & gt; this.iSoPtionChecked (QuestionIndex, OptionIndex)}
                Onchange = {() = & gt; This.OntionChange (QuestionIndex, OptionIndex)}
              / & gt;
            & lt; / label & gt;
            [. . .]
          & lt; / div & gt;
        & lt; / div & gt;
        [. . .]
        & lt; button type = "Send" & gt; Send inn & lt; / knappen & gt;
    & lt; / form & gt;
    & lt; / main & gt;
  );
}

Hvis du er ny for å reagere, se Dokumentasjon for byggeformer.

Vi kan skrive vår isoptionChecked. og OnOptionChange. Fungerer neste: 

 IsoptionChecked = (QuestionIndex, OptionIndex) = & gt; (
  this.State.traininganswers [QuestionIndex] [OptionIndex]! == 0
);
OnOptionChange = (QuestionIndex, OptionIndex) = & gt; {
  This.SetState (Prevstate = & GT; {
    const {TrainingAnswers} = Object.Assign (Prevstate, {});
    TrainingAnswers [Questionindex] = Array (4) .Fyll (0);
    treningsanvisere [spørsmålet] [OptionIndex] = 1;
    returnere {TrainingAnswers};
  });
};

06. Tren det nevrale nettverket

brains.js neural network

Vår Ui så langt, viser et av mine treningsspørsmål og dets alternativer. Jeg har brukt CSS for å skjule de faktiske radioknappene og gi dem et veksle-knapps utseende (Bilde Kreditt: Harry Grey)

Nå, når brukeren vår klikker et alternativ, oppdaterer vi det aktuelle treningsanvisere array for å ha en 1 I den valgte indeksen og endre tilstanden til radioknappen for å vise den som sjekket.

Tid til å legge til vår Onsubmit. Funksjon, hvor vi bygger treningsdataene og trener det nevrale nettverket: 

 Onsubmit = E = & GT; {
    e.preventdefault ();
    const {TrainingAnswers} = This.State;
    cond treningData = treningquestions.map ((q, i) = & gt; ({
      INPUT: Q.OPTIONS.MAP (O = & GT; O.VALUE),
      Output: Traininganswers [i],
    }));
    this.setState ({
      Opplæring: True,
    });
    this.net.trainasync (TrainingData)
      .Den (res = & gt; {
        konsoll.log (res); // Logg feilfrekvensen og # iterasjoner
        this.getPredictions ()
      });
  }

Looping over opplæring , Vi lager inngangs- og utgangsarrayene vi trenger. Vi får inngangsdataene ved å ta optimismeverdien til hvert alternativ, og vi får utdataene fra å se i treningsanvisere array på samme indeks som spørsmålet.

Etter det oppdaterer vi staten med Opplæring: TRUE å informere brukeren om at nevrale nettverket er læring. Avhengig av behandlingskraften til klientenheten og hvor mange spørsmål du har, kan prosessen ta sekunder, minutter eller lenger!

Endelig passerer vi treningsdataene over til vårt neurale nettverk og forteller det å trene asynkront. Dette returnerer et løfte som er oppfylt når nettverket har funnet mønsteret eller gitt opp.

Hold øye med feilfrekvensen vi logger på Trainasync. . Ideelt sett bør det være mellom 0 - 0,05. Hvis det er høyere, må du sjekke treningsdataene dine.

Derfra kan vi få våre spådommer: 

 GetPredictions = () = & gt; {
  CONT PREDICTIONS = Validationquestions.Map (q = & gt; (
    this.net.run (q.options.map (o = & gt; o.value))
  ));

  this.setState ({
    Opplæring: Falsk,
    Forutsigelser,
  });
}

Ved hjelp av net.run. , Vi spør vårt nyutdannede neurale nettverk for å gi oss sine spådommer for hvert av de valideringsspørsmålene vi definerte tidligere.

For Grand Finale legger vi til vår betingede laster logikk og presenterer et funn til brukeren. 

gjengi () {
    const {trening, spådommer} = dette.State;
    const Validationquestion = Validationquestions 
;
    komme tilbake (
      & lt; main & gt;
        {Training & amp; & amp; (
          & lt; h2 & gt; laster ... & lt; / h2 & gt;
        )}
        {! spådommer & amp; ! Training & amp; & amp; (
           [. . .] // Opplæringsspørsmål
        )}

        {predictions & amp; & amp; ! Training & amp; & amp; (
          & lt; div & gt;
            & lt; h2 & gt; Vi spurte nevrale nettverket: & lt; / h2 & gt;
            & lt; div classname = "spørsmål" & gt;
              & lt; h4 & gt; {validationquestion.question} & lt; / h4 & gt;
              & lt; div classname = "alternativer" & gt;
                {valideringquestion.options.map ((o, i) = & gt; (
                  & lt; Label nøkkel = {o.id} & gt;
                    {/ * Vis etiketten og sannsynligheten som en rund prosentandel * /}
                    & lt; span & gt; {$ {o.label}: $ {matte.Round (spådommer 
 [i] * 100)}%} & lt; / span & gt;
                 & lt; / label & gt;
                ))}
              & lt; / div & gt;
            & lt; / div & gt;
          & lt; / div & gt;
        )}
      & lt; / main & gt;
    );
  }
}

07. Utvide nettverket

brains.js neural network

Her er vår endelige resultatervisning, med mitt valideringsspørsmål og alternativer. Jeg har bestått sannsynligheten til en annen div for å vise den som en bar (Bilde Kreditt: Harry Grey)

Nå har du det grunnleggende rammen for quizet, prøv å forlenge det med følgende:

Finn den virkelige feilfrekvensen på ditt neurale nettverk ved å la brukeren svare på dine valideringsspørsmål. Se hvor mange ganger de valgte ditt beste gjetning.

Tren det nevrale nettverket med disse ekstra svarene og se om du kan forbedre nøyaktigheten.

Flytt de nevrale nettverksberegningene over på en node-server med hjernen.js å fungere() og tojson () metoder.

Denne artikkelen oppstod opprinnelig i utgave 321 i Net Magazine. , verdens ledende webdesign magasin. Kjøp utgave 321. eller Abonner på netto .

Les mer:

  • De beste JavaScript-bibliotekene
  • 9 av de beste JavaScript-rammene for å prøve
  • 22 Brilliant Jquery Plugins

hvordan - Mest populære artikler

Lær å modellere en 3D-person i Zbrush og Maya

hvordan Feb 2, 2026

[1. 3] Side 1 av 2: Side 1 Side 1 Side 2 ..

Hvordan tegne fjær

hvordan Feb 2, 2026

Hvis du alltid har ønsket å vite hvordan du tegner fjær, og gjør dem super-realistiske, er du på rett sted. Denne trinnvise veiledningen gir hint og tips om å gi fuglfjær en mer tredim..

Opprett en animert 3D-tekst effekt

hvordan Feb 2, 2026

Tapt kjærlighet [1. 3] av Canada's. Jam3. [1. 3] Er et vakkert mørkt, mobilklart interaktivt dikt med ekte hjerte om de..

Hvordan lage fargerike verdener som forteller en historie

hvordan Feb 2, 2026

[1. 3] Imagined scener som lar deg en følelse av rart at du vil finne ut mer og se hva som ligger rett rundt hjørnet. God verden..

Lag organiske teksturer i blekk

hvordan Feb 2, 2026

[1. 3] Tegning med blekk produserer store muligheter. Det er enkle, men effektive måter å lage vakre, organiske teks..

Opprett en perfekt geometrisk logo design i Illustrator

hvordan Feb 2, 2026

[1. 3] I denne korte Illustrator Tutorial , designer Vil Paterson. Går gjennom hvordan du lager en ..

Hvordan designe den perfekte bokomslaget

hvordan Feb 2, 2026

[1. 3] Selvutgivelser står for 22 prosent av det britiske ebook-markedet og fortsetter å vokse, noe som betyr at forfattere blir..

Hvordan tegne et landskap med pasteller

hvordan Feb 2, 2026

[1. 3] Dette innlegget vil lære deg hvordan du tegner et landskap med pasteller. Når du bruker myke pasteller, er du i stand til..

Kategorier