Χρησιμοποιήστε το Brain.js για την κατασκευή ενός νευρικού δικτύου

Sep 15, 2025

πως να

(Πιστωτική εικόνα: Getty Images)

Brain.js είναι ένας φανταστικός τρόπος για να οικοδομήσουμε ένα νευρικό δίκτυο. Με απλά λόγια, ένα νευρικό δίκτυο είναι μια μέθοδος μάθησης μηχανής που λειτουργεί με παρόμοιο τρόπο με έναν ανθρώπινο εγκέφαλο. Δεδομένης της σωστής απάντησης σε μια ερώτηση (όπως «ποια επιλογή θα επιλέξει αυτός ο χρήστης;»), μαθαίνει αργά το μοτίβο και τη σχέση μεταξύ των εισόδων και των απαντήσεων. Ένα παράδειγμα ενός νευρικού δικτύου είναι το σύστημα αναγνώρισης του προσώπου του Facebook, Deepface.

Αλλά λόγω της πολύπλοκης γλώσσας των νευρωνικών δικτύων και της φαινομενικά απότομης καμπύλης μάθησης, μπορεί να είναι δύσκολο να ξεκινήσετε.

Σε αυτό το σεμινάριο, θα απομακρυνθούμε τη θεωρία κάτω από την ανάγκη να γνωρίζει και, σημαντικότερα, να κολλήσετε με την πραγματική χρήση εγκεφάλου.Js για να δημιουργήσετε ένα νευρικό δίκτυο. Μέχρι το τέλος, θα έχετε μια εφαρμογή Web που θα ζητά ερωτήσεις πολλαπλής επιλογής σχετικά με την αισιοδοξία ενός χρήστη. Όταν υποβάλλουν, αυτές οι απαντήσεις θα εκπαιδεύσουν ένα νευρικό δίκτυο στην πιθανότητα του χρήστη μας επιλέγοντας κάθε επιλογή για μια ολοκαίνουργια ερώτηση.

Θέλετε πιο χρήσιμα εργαλεία σχεδιασμού ιστοσελίδων; Δείτε τη θέση μας για τη συλλογή του τέλειου οικοδόμος ιστότοπου . Ή αν χρειάζεστε κάπου για να αποθηκεύετε καλά τα αρχεία, ελέγξτε την επιλογή του καλύτερου αποθήκευση σύννεφων . Σχεδιάζοντας μια πολύπλοκη ιστοσελίδα; Θα χρειαστείτε μια ισχυρή web hosting Υπηρεσία, η οποία μπορεί να συμβαδίσει.

Κατεβάστε τα αρχεία που χρειάζεστε για αυτό το σεμινάριο.

01. Ρυθμίστε το έργο

Πρώτον, κατεβάστε και εγκαταστήστε τις απαραίτητες εξαρτήσεις. Αυτό το σεμινάριο υποθέτει ότι έχετε μια γνώση εργασίας για αντιδράσει, ή η ισοδύναμη χαρτογράφηση σε μια προτιμώμενη εναλλακτική λύση.

Δημιουργήστε μια εφαρμογή React χρησιμοποιώντας την επιθυμητή μέθοδο. Μπορείτε να δοκιμάσετε το Facebook Δημιουργία-αντιδράσεων-εφαρμογής Εργαλείο, εγκατεστημένο χρησιμοποιώντας τα εξής:

npm install create-react-app -g

02. Ξεκινήστε την εφαρμογή σας

Τώρα μπορούμε να οικοδομήσουμε, να εγκαταστήσουμε το Brain.js και να ξεκινήσετε την εφαρμογή μας:

 NPX δημιουργία-αντιδράστε-εφαρμογή αισιοδοξία-nn-nn
cd optimism-nn
npm εγκαταστήστε brainjs
npm Έναρξη

Θα εκτελέσουμε τον υπολογισμό του νευρικού δικτύου στο πρόγραμμα περιήγησης. Τα νευρικά δίκτυα είναι εντατικά και πρέπει να εκφορτωθούν σε ένα διακομιστή. Ωστόσο, αυτός ο τρόπος είναι γρήγορος και πρόστιμο για τις βασικές μας ανάγκες. Τώρα ας προσθέσουμε brain.js στο σημείο εισόδου μας (στην περίπτωσή μου, app.js).

 Εισαγωγή του εγκεφάλου από το "Brain.js".

03. Καθορίστε τις ερωτήσεις κατάρτισης

brains.js neural network — Μια απεικόνιση του νευρικού μας δικτύου. Οι εισροές προέρχονται από την αξία αισιοδοξίας κάθε επιλογής για μια ερώτηση. Αυτά δεν χειρίζονται στη συνέχεια από το κρυμμένο στρώμα για να μας δώσουν τις εξόδους που θέλουμε - την πιθανότητα να επιλεγεί κάθε επιλογή (Credit Image: Harry Gray)

Πρέπει να καθορίσουμε τις ερωτήσεις κατάρτισης στη συνέχεια. Σε ξεχωριστό ερωτήσεις.js Αρχείο, θα χρειαστούμε ένα εκπαιδευτικές υπηρεσίες και ΕπικυρώσειςQuestions πίνακας. Μπορείτε να βρείτε τη λίστα μου στο git repo ή να δημιουργήσετε το δικό σας. Όσο πιο εκπαιδευτικές ερωτήσεις που έχετε, τα πιο ακριβή τα αποτελέσματά σας. Θυμηθείτε να τα εισάγετε στο σημείο εισόδου σας.

 Εξαγωγή Const TurningQuestions = [
  {
    ID: 'Q1',
    Ερώτηση: «Βλέπετε συχνά το καλύτερο στα πράγματα;»,
    Επιλογές: [
      {ID: 'Q1a', ετικέτα: «όχι πραγματικά», Αξία: 0,2,},
      {ID: 'Q1B', ετικέτα: 'πάντα', Αξία: 1.0,},
      {ID: 'Q1C', ετικέτα: «Συνήθως, Ναι», Αξία: 0,7,},
      {ID: 'Q1D', Ετικέτα: «Ποτέ!», Αξία: 0,0,},
    ],
  },
]

Και για τις δύο συστοιχίες, χρειαζόμαστε μια ερώτηση, μια σειρά από τέσσερις επιλογές που περιέχουν μια ετικέτα και μια αισιοδοξία. Αυτή η τιμή θα είναι η είσοδος για το νευρικό μας δίκτυο.

Βεβαιωθείτε ότι μεταβάλλείτε τη σειρά και το υπόλοιπο των αξιών ή το νευρικό δίκτυο μπορεί να επικεντρωθεί πάρα πολύ στο ευρετήριο των επιλογών στη συστοιχία! Το νευρικό μας δίκτυο παίρνει τέσσερις εισόδους και δίνει τέσσερις εξόδους. Τα εκπαιδευτικά μας δεδομένα πρέπει να ταιριάζουν με αυτό, οπότε στον κατασκευαστή μας χρειαζόμαστε κάποια κατάσταση για το κουίζ και τις επιλογές του χρήστη:

 αυτό.state = {
  Εκπαιδευτικά κατάρτισης: Εκπαιδευτικές συσκευές ).ap (() = & GT; Array (4) .Fill (0)),
  Εκπαίδευση: False,
  Προβλέψεις: undefined,
};

04. Αρχικοποιήστε το νευρικό δίκτυο

Η αρχικοποίηση των εκπαιδευτικών μηχανών δημιουργεί μια σειρά για κάθε ερώτηση που περιέχει [0, 0, 0, 0] - την προεπιλεγμένη κατάσταση χωρίς επιλογή. Θα χρειαστούμε επίσης να αρχίσετε το νευρικό μας δίκτυο - απλά μια μόνο γραμμή με το Brain.js:

 Αυτό το New Brain.neuralnetwork ({Hiddenlayers: });

05. Κατασκευάστε το πλαίσιο κουίζ

Για να δημιουργήσετε το πλαίσιο για το κουίζ μας, πρέπει να βγάλουμε πάνω από τις εκπαιδευτικές ερωτήσεις και τις επιλογές μας. Αυτό είναι αρκετά verbose και όχι πολύ ενδιαφέρον, οπότε θα δώσω ένα παράδειγμα έξοδο για να στοχεύσετε αντ 'αυτού:

 καθιστούν () {
  ΕΠΙΣΤΡΟΦΗ (
    & lt; main & gt;
      & lt; form onsubmit = {this.onsubmit} & gt;
        [. . .] // Επαναλάβετε τις ερωτήσεις & amp; επιλογές
        & lt; div classname = "ερώτηση" & gt;
          & lt; h4 & gt; {ερώτηση} & lt; / h4 & gt;
          & lt; div classname = "επιλογές" & gt;
            & lt; ετικέτα htmlfor = {opialid} & gt;
              & lt; span & gt; {label} & lt; / span & gt;
              & lt; είσοδος
                Τύπος = "Ραδιόφωνο"
                απαιτείται
                Όνομα = {Ερώτημα}
                id = {προαιρετικό}
                Ελέγξτε = {() = & gt; αυτό.IsptionCheadced (Questionindex, OutionindEx)}
                onchange = {() = & gt; this.OnoptionchangeChange (Questionindex, OutionindEx)}
              / & gt;
            & lt; / label & gt;
            [. . .]
          & lt; / div & gt;
        & lt; / div & gt;
        [. . .]
        & lt; Τύπος κουμπιού = "Υποβολή" & GT; / button & gt;
    & lt; / form & gt;
    & lt; / main & gt;
  )
}

Εάν είστε νέος να αντιδράσετε, δείτε το τεκμηρίωση για τις κατασκευαστικές μορφές.

Μπορούμε να γράψουμε μας isoptioncheched και odoptionchange Λειτουργίες στη συνέχεια:

 isoptionchecked = (Questionindex, OutionindEx) = & GT; (
  that.state.traininganswers [questionindex] [loodelindex]! == 0
)
OnoptionChange = (Questionindex, OutionIndex) = & GT; {
  αυτό.setstate (prevstate = & gt; {
    const {tunkedanswers} = object.assign (prevstate, {});
    Εκπαιδευτές [Questionindex] = Array (4) .Fill (0).
    Εκπαιδευτές [Questionindex] [OblyIndex] = 1;
    Επιστροφή {Tounchinganswers};
  });
} ·

06. Εκπαιδεύστε το νευρικό δίκτυο

Τώρα, όταν ο χρήστης μας κάνει κλικ σε μια επιλογή, ενημερώνουμε το σχετικό Εκπαιδευτές πίνακα για να διαθέτει ένα 1 Στον επιλεγμένο δείκτη και αλλάξτε την κατάσταση του κουμπιού ραδιοφώνου για να το εμφανιστεί όπως ελέγχεται.

Ώρα να προσθέσετε μας onsubmit Λειτουργία, όπου κατασκευάζουμε τα δεδομένα κατάρτισης και εκπαιδεύουμε το νευρικό δίκτυο:

 ONSUBMIT = E = & GT; {
    e.preventdefault ();
    const {tunkinganswers} = αυτό.state;
    const trainingData = ΕκθεσιακάCestions.map (Q, i) = & GT; ({
      Εισαγωγή: Q.Προστάσεις.map (O = & GT; O.Value),
      Έξοδος: Εκπαιδευόμενοι [I],
    }));
    αυτό.setstate ({
      Εκπαίδευση: Αληθινή,
    });
    this.net.trainasync (trainingdata)
      .Then (RES = & GT; {
        console.log (res); // Σύνδεση του ποσοστού σφάλματος και # πληροφορίες
        Αυτές.GetPRedications ()
      });
  }

Βρόχος εκπαιδευτικές υπηρεσίες , δημιουργούμε τις συστοιχίες εισόδου και εξόδου που χρειαζόμαστε. Λαμβάνουμε τα δεδομένα εισόδου λαμβάνοντας την τιμή αισιοδοξίας κάθε επιλογής και λαμβάνουμε τα δεδομένα εξόδου από την εμφάνιση στο Εκπαιδευτές πίνακα στον ίδιο δείκτη με την ερώτηση.

Μετά από αυτό, ενημερώνουμε την κατάσταση με Εκπαίδευση: TRUE να ενημερώσει τον χρήστη ότι το νευρικό δίκτυο μαθαίνει. Ανάλογα με την ισχύ επεξεργασίας της συσκευής πελάτη και πόσες ερωτήσεις έχετε, η διαδικασία μπορεί να διαρκέσει δευτερόλεπτα, λεπτά ή περισσότερο!

Τέλος, περνάμε τα δεδομένα κατάρτισης στο νευρικό μας δίκτυο και να το πείτε να εκπαιδεύσετε ασύγχρονα. Αυτό επιστρέφει μια υπόσχεση που πληρούται όταν το δίκτυο έχει βρει το πρότυπο ή παραιτηθεί.

Παρακολουθήστε το ποσοστό σφάλματος που συνδέουμε trainasync . Ιδανικά θα πρέπει να είναι μεταξύ 0 - 0,05. Εάν είναι υψηλότερο, ελέγξτε τα δεδομένα εκπαίδευσης.

Από εκεί, μπορούμε να πάρουμε τις προβλέψεις μας:

 getpredictions = () = & gt; {
  CONST PREVICTIONTS = ΕπικύρωσηQuestions.map (Q = & GT;
    this.net.run (Q.Options.map (O = & GT; O.Value)))
  ));

  αυτό.setstate ({
    Εκπαίδευση: False,
    προβλέψεις,
  });
}

Χρησιμοποιώντας net.run , Ζητούμε το πρόσφατα εκπαιδευμένο νευρωνικό μας δίκτυο να μας δώσει τις προβλέψεις της για κάθε μία από τις ερωτήσεις επικύρωσης που ορίστηκαν νωρίτερα.

Για το Grand Finale, προσθέτουμε την υπόθεσή μας φόρτωση λογικής και παρουσιάζουμε ένα εύρημα στον χρήστη.

render () {
    const {εκπαίδευση, προβλέψεις} = αυτό.state;
    Conct ValidationQuestion = ΕπικύρωσηQuestions ;
    ΕΠΙΣΤΡΟΦΗ (
      & lt; main & gt;
        {Εκπαίδευση & amp; & amp; (
          & lt; h2 & gt; loading ... & lt; / h2 & gt;
        )}
        {! Προβλέψεις & amp; & amp; ! Εκπαίδευση & amp; & amp; (
           [. . .] // Έντυπο ερωτήσεων κατάρτισης
        )}

        {Προβλέψεις & amp; & amp; ! Εκπαίδευση & amp; & amp; (
          & lt; div & gt;
            & lt; h2 & gt; Ζητήσαμε το νευρικό δίκτυο: & lt; / h2 & gt;
            & lt; div classname = "ερώτηση" & gt;
              & LT; H4 & GT; {Επικύρωση κατάλογος.Question} & LT; / H4 & GT;
              & lt; div classname = "επιλογές" & gt;
                {ΕπικύρωσηQuestion.Παιχνίες.map ((o, i) = & gt; (
                  & lt; label key = {O.ID} & GT;
                    {/ * Εμφανίστε την ετικέτα και την πιθανότητα ως στρογγυλό ποσοστό * /}
                    & lt; span & gt; {$ {o.label}: $ {math.round (προβλέψεις  [i] * 100)}%} & lt; / span & gt;
                 & lt; / label & gt;
                )))
              & lt; / div & gt;
            & lt; / div & gt;
          & lt; / div & gt;
        )}
      & lt; / main & gt;
    )
  }
}

07. Επεκτείνετε το δίκτυο

Τώρα έχετε το βασικό πλαίσιο για το κουίζ, δοκιμάστε να το επεκτείνετε με τα εξής:

Βρείτε το πραγματικό ποσοστό σφάλματος του νευρικού σας δικτύου, αφήνοντας το χρήστη σας να απαντήσει σε ερωτήσεις επικύρωσης. Δείτε πόσες φορές επέλεξαν την καλύτερη εικασία σας.

Εκπαιδεύστε το νευρικό δίκτυο με αυτές τις πρόσθετες απαντήσεις και δείτε αν μπορείτε να βελτιώσετε την ακρίβεια.

Μετακινήστε τους υπολογισμούς του νευρικού δικτύου πάνω σε ένα διακομιστή κόμβου με τον Brain.js για να λειτουργήσει() και tojson () Μέθοδοι.

Αυτό το άρθρο εμφανίστηκε αρχικά στο θέμα 321 στο καθαρό περιοδικό , το κορυφαίο περιοδικό Web Design World. Αγοράζουν τεύχος 321 ή Εγγραφείτε στο NET .

Διαβάστε περισσότερα:

Τις καλύτερες βιβλιοθήκες JavaScript
9 από τα καλύτερα πλαίσια JavaScript για να δοκιμάσετε
22 λαμπρά plugins jquery

Χρησιμοποιήστε το Brain.js για την κατασκευή ενός νευρικού δικτύου

01. Ρυθμίστε το έργο

02. Ξεκινήστε την εφαρμογή σας

03. Καθορίστε τις ερωτήσεις κατάρτισης

04. Αρχικοποιήστε το νευρικό δίκτυο

05. Κατασκευάστε το πλαίσιο κουίζ

06. Εκπαιδεύστε το νευρικό δίκτυο

07. Επεκτείνετε το δίκτυο

πως να - Τα πιο δημοφιλή άρθρα

Πώς να κατεβάσετε φωτογραφίες Instagram: Όλα όσα πρέπει να γνωρίζετε

Πώς να γυρίσετε ένα στρώμα στο Photoshop: Ένας πλήρης οδηγός

Δημιουργήστε μια πύλη πελάτη με το WordPress

Δημιουργήστε ένα blog με το πλέγμα και το flexbox

Δημιουργήστε ένα κινούμενο κείμενο 3D Text

Πώς να πρωτότυπη εφαρμογή κινητής τηλεφωνίας με στούντιο Origami

7 Δρόμοι δολοφόνων να επηρεάσουν τη συμπεριφορά των χρηστών

Κάντε μια τυπογραφική αφίσα χρησιμοποιώντας το Adobe InDesign

Κατηγορίες