Gebruik hersenen om een neuraal netwerk te bouwen

Sep 14, 2025

Procedures

(Afbeelding Credit: Getty Images)

Brain.js is een fantastische manier om een neuraal netwerk te bouwen. Simpel gezegd, een neuraal netwerk is een methode van het leren van de machine dat op een vergelijkbare manier werkt voor een menselijk brein. Gezien het juiste antwoord op een vraag (zoals 'Welke optie zal deze gebruiker kiezen?'), Leert het langzaam het patroon en de relatie tussen de ingangen en antwoorden. Een voorbeeld van een neuraal netwerk is Facebook's gezichtsherkenningssysteem, deepface.

Maar vanwege de complexe domeinnetaal van neurale netwerken en schijnbaar steile leercurve, kan het moeilijk zijn om aan de slag te gaan.

In deze tutorial zullen we de theorie versterken om te hoeft te weten en, belangrijker nog, vast te zitten met het gebruik van brein.js om een neuraal netwerk te maken. Tegen het einde hebt u een web-app die meerkeuzevragen vraagt over het optimisme van een gebruiker. Wanneer ze indienen, trainen deze antwoorden een neuraal netwerk naar de waarschijnlijkheid van onze gebruiker die elke optie selecteert voor een gloednieuwe vraag.

Wilt u meer handige webontwerpgereedschappen? Zie onze post op het plukken van de perfecte website bouwer Of als u ergens nodig hebt om bestanden veilig op te slaan, bekijk dan onze keuze van de beste cloud opslag Een complexe website plannen? Je hebt een robuuste nodig web hosting Service, die kan bijhouden.

Download de bestanden die u nodig heeft voor deze tutorial.

01. Stel het project in

Download en installeer en installeer de nodige afhankelijkheden. Deze tutorial veronderstelt dat u een werkende kennis hebt van react of de equivalente inrichting op een voorkeursalternatief.

Maak een react-app met de gewenste methode. Je kunt Facebook's proberen CREATE-ReACT-app gereedschap, geïnstalleerd met behulp van het volgende:

npm install create-react-app -g

02. Start uw app

Nu kunnen we bouwen, hersenen installeren.js en beginnen onze app:

 NPX CREATE-ReAICT-App Optimism-NN
CD-optimisme-Nn
NPM Installeer Brainjs
NPM Start

We gaan de neurale netwerkberekening in de browser uitvoeren. Neurale netwerken zijn resource-intensief en moeten worden gelost naar een server. Op deze manier is echter snel opgezet en boete voor onze basisbehoeften. Laten we nu Brain.Js toevoegen aan ons toegangspunt (in mijn geval, app.js).

 Importeer de hersenen van 'Brain.js';

03. Definieer uw opleidingsvragen

brains.js neural network — Een visualisatie van ons neurale netwerk. De ingangen komen van de optimistische waarde van elke optie voor een vraag. Deze worden vervolgens gemanipuleerd door de verborgen laag om ons de resultaten die we willen geven - de waarschijnlijkheid van elke optie die wordt geselecteerd (Beeldkrediet: Harry Gray)

We moeten onze trainingsvragen hierna definiëren. In een afzonderlijke vragen.Js bestand, we hebben een a nodig training en validatiequesties array. U kunt mijn lijst vinden op de GIT Repo of het maken van uw eigen. Hoe meer trainingsvragen die u hebt, hoe nauwkeuriger uw resultaten zijn. Vergeet niet om deze in uw toegangspunt te importeren.

 Export const trainingen = [
  
    ID: 'Q1',
    Vraag: 'Zie je vaak het beste in dingen?',
    Opties: [
      {ID: 'Q1A', label: 'niet echt', waarde: 0.2,},
      {ID: 'Q1B', Label: 'Always', waarde: 1.0,},
      {ID: 'Q1C', label: 'Meestal, yeah', waarde: 0.7,},
      {ID: 'Q1D', Label: 'Nooit!', waarde: 0.0,},

Voor beide arrays hebben we een vraag nodig, een array van vier opties die een label en een optimisme-waarde bevatten. Deze waarde is de invoer voor ons neurale netwerk.

Zorg ervoor dat u de bestelling en het saldo van waarden varieert, of het neurale netwerk kan te veel focussen op de index van de opties in de array! Ons neurale netwerk neemt vier ingangen en geeft vier uitgangen. Onze trainingsgegevens moeten dit evenaren, dus in onze constructeur hebben we wat toestand nodig voor de quiz en de opties van de gebruiker:

 This.State = {
  TRAINANTSERSWERS: TrainingQuestions.Map (() = & gt; array (4). Fill (0)),
  Training: false,
  Voorspellingen: undefined,

04. Initialiseer het neurale netwerk

De initialisatie van Traininganswers maakt een array voor elke vraag die [0, 0, 0, 0] bevat - onze standaardstatus zonder selectie. We moeten ook ons neurale netwerk initialiseren - slechts een enkele regel met hersenen.js:

 This.net = nieuw brein.Neturnnetwork ({HiddenLayers: });

05. Bouw het quiz-framework

Om het raamwerk voor onze quiz te bouwen, moeten we onze trainingsvragen en opties lussen. Dit is vrij uitgebreid en niet erg interessant, dus ik zal een voorbeelduitvoer geven om te streven naar in plaats daarvan:

 Render () {
  terug (
    & LT; MAIN & GT;
      & LT; formulier onsubmit = {this.onsubmit} & gt;
        .] // iteratie over vragen en versterker; opties
        & LT; DIV CLASSNAME = "VRAAG" & GT;
          & LT; H4 & GT; {vraag} & LT; / H4 & GT;
          & LT; DIV CLASSNAME = "Opties" & GT;
            & LT; Label HTMLFOR = {OPTIONEID} & GT;
              & lt; span & gt; {label} & lt; / span & gt;
              & LT; INPUT
                Type = "Radio"
                verplicht
                NAAM = {VRACHTIG}
                ID = {optioneid}
                gecontroleerd = {() = & GT; This.IsOptionCecked (VraagTEX, OptionIndex)}
                Onchange = {() = & GT; this.OloptionChange (vragenTEX, OPTIONISTEX)}
              / & GT;
            & LT; / Label & GT;
            
          & LT; / DIV & GT;
        & LT; / DIV & GT;
        
        & LT; Knop Type = "Verzenden" & GT; indienen & lt; / knop & GT;
    & LT; / Form & GT;
    & LT; / MAIN & GT;

Als je nieuw bent om te reageren, zie je de documentatie voor bouwvormen.

We kunnen ons schrijven isoptionChecked en onoptionchange Functies Volgend:

 ISOPTIONCECKED = (vragenTEX, OptionInTEX) = & GT;
  this.state.traininganswers [Vraagpunt] [OptionIndex]! == 0

OnoTionChange = (vragenTEX, OptionInTEX) = & GT;
  this.Setstate (Prevstate = & GT; {
    const {Traininganswers} = object.Assign (Prevstate, {});
    Traininganswers [VraagTEX] = array (4). Fill (0);
    TRAINANTANSWERS [VRAAGDEX] [OPTIONIDEX] = 1;
    RETURN {TRAINANTANSWERS};
  
};

06. Train het neurale netwerk

Nu, wanneer onze gebruiker op een optie klikt, updaten we de relevante Trainingansweer array om een 1 In de geselecteerde index en wijzig de status van het keuzerondje om het te tonen zoals gecontroleerd.

Tijd om onze te voegen onsubmit Functie, waar we de trainingsgegevens bouwen en het neurale netwerk trainen:

 Onsubmit = E = & GT;
    e.preventdefault ();
    const {traininganswers} = dit.state;
    const trainingData = trainingquesties.map ((Q, I) = & GT; ({
      Invoer: Q.Options.Map (O = & GT; O.VALUE),
      OUTPUT: TRUINANSWERS [I],
    
    This.SetState ({
      Training: TRUE,
    
    this.net.trainasync (trainingData)
      .Ten (res = & gt; {
        console.log (res); // log de foutmelding en # iterations
        This.GetPrederties ()
      
  }

Looping over training , we maken de ingangs- en uitvoerarrays die we nodig hebben. We krijgen de invoergegevens door de optimistische waarde van elke optie te nemen en we krijgen de uitvoergegevens van het kijken in de Trainingansweer array bij dezelfde index als de vraag.

Daarna updaten we de staat met Training: TRUE Om de gebruiker te informeren dat het neurale netwerk aan het leren is. Afhankelijk van de verwerkingskracht van het clientapparaat en hoeveel vragen u hebt, kan het proces seconden, minuten of langer duren!

Ten slotte passeren we de trainingsgegevens over aan ons neurale netwerk en vertellen het om het asynchroon te trainen. Dit retourneert een belofte die is voldaan wanneer het netwerk het patroon heeft gevonden of opgegeven.

Houd de foutmelding in de gaten die we inloggen Trainasync Idealiter moet het tussen 0 - 0,05 zijn. Als het hoger is, controleer dan uw trainingsgegevens.

Vanaf daar kunnen we onze voorspellingen krijgen:

 Getpredictions = () = & GT;
  const predictions = validatiequesties.map (q = & gt; (
    this.net.Run (q.options.map (o = & gt; o.value)))
  

  This.SetState ({
    Training: false,
    voorspellingen,

Gebruik makend van net.run , we vragen ons nieuw opgeleide neurale netwerk om ons voorspellingen te geven voor elk van de validatievragen die we eerder hebben gedefinieerd.

Voor de Grand Finale voegen we onze voorwaardelijke laadlogica toe en presenteren we een zoekopdracht aan de gebruiker.

render () {
    const {training, voorspellingen} = dit.State;
    const validationquestion = validatiequesties ;
    terug (
      & LT; MAIN & GT;
        {TRAINING & AMP; & AMP;
          & LT; H2 & GT; Loading ... & LT; / H2 & GT;
        
        {! Predictions & AMP; & AMP; ! TRAINING & AMP; & AMP;
           .] // Trainingsvragenformulier
        

        {Predictions & AMP; & AMP; ! TRAINING & AMP; & AMP;
          & LT; DIV & GT;
            & LT; H2 & GT; We hebben het Neurale netwerk gevraagd: & LT; / H2 & GT;
            & LT; DIV CLASSNAME = "VRAAG" & GT;
              & LT; H4 & GT; {validationquestion.question} & lt; / h4 & gt;
              & LT; DIV CLASSNAME = "Opties" & GT;
                {validationquestion.options.map ((o, i) = & gt; (
                  & lt; label sleutel = {o.id} & gt;
                    {/ * Geef het label en de waarschijnlijkheid weer als een ronde percentage * /}
                    & LT; SPAN & GT; {$ {O.LABEL}: $ {MATH.ROND (voorspellingen  [I] * 100)}%} & LT; / Span & GT;
                 & LT; / Label & GT;
                
              & LT; / DIV & GT;
            & LT; / DIV & GT;
          & LT; / DIV & GT;
        
      & LT; / MAIN & GT;

07. Verleng het netwerk

Nu heeft u het basisraamwerk voor de quiz, probeer het uit te breiden met het volgende:

Zoek de reële foutmelding van uw neurale netwerk door uw gebruiker uw validatievragen te laten beantwoorden. Kijk hoe vaak ze je beste goks koos.

Train het neurale netwerk met deze aanvullende antwoorden en kijk of u de nauwkeurigheid kunt verbeteren.

Verplaats de neurale netwerkberekeningen naar een knooppuntserver met de hersenen.js functioneren() en tojson () methoden.

Dit artikel verscheen oorspronkelijk in kwestie 321 in netto tijdschrift , 's werelds toonaangevende Web Design Magazine. Koop nummer 321 of Abonneer u op NET

Lees verder:

De beste Javascript-bibliotheken
9 van de beste JavaScript-frameworks om te proberen
22 Briljante JQuery-plug-ins

Gebruik hersenen om een neuraal netwerk te bouwen

01. Stel het project in

02. Start uw app

03. Definieer uw opleidingsvragen

04. Initialiseer het neurale netwerk

05. Bouw het quiz-framework

06. Train het neurale netwerk

07. Verleng het netwerk

Procedures - Meest populaire artikelen

8 State-of-the-art CSS-functies (en hoe ze ze gebruiken)

WordPress in een visuele bouwer

Hoe uw karakter Art

Maak een levensechte digitale mens

Maak interactieve 3D-typografie-effecten

Master The Bridge Tool

Toptips om uw handgetekende illustratietechnieken te verfijnen

Maak een personage met gestileerd realisme

Categorieën

Gebruik hersenen om een ​​neuraal netwerk te bouwen

01. Stel het project in

02. Start uw app

03. Definieer uw opleidingsvragen

04. Initialiseer het neurale netwerk

05. Bouw het quiz-framework

06. Train het neurale netwerk

07. Verleng het netwerk

Procedures - Meest populaire artikelen

Categorieën

Gebruik hersenen om een neuraal netwerk te bouwen