Použijte brain.js vybudovat neurální síť

Feb 6, 2026

jak

(Image Credit: Getty Images)

Brain.js je fantastický způsob, jak vybudovat neuronovou síť. Jednoduše řečeno, neuronová síť je metoda stroje učení, které pracuje podobným způsobem k lidskému mozku. Vzhledem k správné odpovědi na otázku (jako "Která možnost bude tento uživatel vybrat?") Pomalu se učí vzor a vztah mezi vstupy a odpovědí. Jeden příklad neuronové sítě je systém pro rozpoznávání obličeje Facebook, DeepFace.

Vzhledem k komplexnímu jazyce domény neuronových sítí a zdánlivě strmém křivce učení může být těžké začít.

V tomto tutoriálu budeme destilovat teorii až k potřebě-k-know, a důležité, uvíznout se ve skutečnosti používat mozek.js k vytvoření neuronové sítě. Do konce budete mít webovou aplikaci, která žádá otázky s možností výběru více možností o optimismu uživatele. Když předkládají, tyto odpovědi budou trénovat neuronovou síť k pravděpodobnosti našeho uživatele, který vyberete každou možnost pro zcela novou otázku.

Chcete více užitečnější web design nástroje? Podívejte se na náš příspěvek na výběr dokonalosti Webové stránky Builder. . Nebo pokud potřebujete někde pro bezpečné ukládání souborů, podívejte se na náš výběr nejlepšího cloudové úložiště . Plánování komplexních webových stránek? Budete potřebovat robustní web hosting služba, která může udržet krok.

Stáhněte soubory, které potřebujete pro tento kurz.

01. Nastavte projekt

Za prvé, stáhnout a nainstalovat potřebné závislosti. Tento tutoriál předpokládá, že máte pracovní znalosti o reakci nebo ekvivalentní mapování na preferovanou alternativu.

Vytvořte aplikaci Reagovat pomocí požadované metody. Můžete vyzkoušet facebook Create-Reage-App Nástroj instalovaný následujícím způsobem:

npm install create-react-app -g

02. Spusťte aplikaci

Nyní můžeme vybudovat, instalovat brain.js a začít naši aplikaci:

 NPX Create-Reage-App Optimism-Nn
CD Optimism-nn
NPM Instalovat Brainjs.
NPM Start

Provádíme výpočtu neuronové sítě v prohlížeči. Neuronové sítě jsou náročné na zdroje a měly by být vyloženy serveru. Tímto způsobem se však rychle nastavit a dobře pro naše základní potřeby. Nyní pojďme přidat brain.js do našeho vstupního bodu (v mém případě, app.js).

 Dovozní mozek z "Brain.js";

03. Definujte své vzdělávací otázky

brains.js neural network — Vizualizace naší neuronové sítě. Vstupy pocházejí z hodnoty optimismu každé možnosti pro otázku. Ty jsou pak manipulovány skrytou vrstvou, aby nám poskytla výstupy, které chceme - pravděpodobnost každé vybrané možnosti (Image Credit: Harry Grey)

Dále potřebujeme definovat naše vzdělávací otázky. V odděleném Otázky.JS. soubor, budeme potřebovat tréninky a ValidationQuests pole. Můj seznam najdete na Git repo nebo vytvořit vlastní. Čím více vzdělávacích otázek máte, tím přesnější výsledky. Nezapomeňte importovat je do vašeho vstupního bodu.

 Export CONC CONSTRESSQUESTS = [
  {
    ID: 'Q1',
    Otázka: "Často vidíte to nejlepší ve věcech?"
    Možnosti: [
      {id: 'q1a', štítek: 'Ne ve skutečnosti', hodnota: 0,2,},
      {id: 'Q1b', štítek: 'vždy', hodnota: 1,0,},
      {id: 'q1c', štítek: 'obvykle, jo', hodnota: 0,7,},
      {id: 'q1d', štítek: 'nikdy!', hodnota: 0.0,},
    Zaujatý
  },
];

Pro obě pole potřebujeme otázku, řadu čtyř možností, které obsahují štítek a hodnotu optimismu. Tato hodnota bude vstup pro naši neuronovou síť.

Ujistěte se, že změníte objednávku a zůstatek hodnot, nebo neurální síť se může příliš zaměřit na index možností v poli! Naše neuronová síť trvá čtyři vstupy a dává čtyři výstupy. Naše školijní data musí odpovídat tomu, takže v našem konstruktoru potřebujeme nějaký stav pro kvíz a možnosti uživatele:

 Tento.state = {
  TRAINSSANSWERS: tréninkQesquestions.MAP (() = & gt; pole (4) .Fill (0)),
  Školení: FALSE,
  předpovědi: undefined,
};

04. Inicializujte neuronovou síť

Inicializace tringySwers vytváří pole pro každou otázku obsahující [0, 0, 0, 0] - náš výchozí stav bez výběru. Budeme také muset inicializovat naši neuronovou síť - jen jeden řádek s brainem.js:

 this.net = nový brain.neureTNetwork ({hiddenlayers: });

05. Sestavte kvízový rámec

Chcete-li vytvořit rámec pro náš kvíz, musíme smyčku nad našimi vzdělávacími otázkami a možností. To je velmi podrobné a ne zajímavé, takže uveďte příklad výstupu pro vás namísto toho:

 Render () {
  vrátit se (
    & lt; hlavní & gt;
      & lt; tvoří onsubmit = {this.onsubmit} & gt;
        [. . .] // iterovat na otázky a amp; Možnosti
        & lt; dig classname = "otázka" & gt;
          & lt; H4 & gt; {Otázka} & lt; / h4 & gt;
          & lt; dig classname = "možnosti" & gt;
            & lt, štítek htmlfor = {volitelné} & gt;
              & lt, span & gt; {label} & lt; / rozpětí & gt;
              & lt; vstup
                typ = "rádio"
                Požadované
                Jméno = {dotazid}
                ID = {volitelná}
                zkontrolováno = {() = & gt; Tento.isoptionChecked (DotazEndex, OptionIndex)}
                onchange = {() = & gt; this.onoptionchange (DotazEndex, OptionIndex)}
              / & gt;
            & lt; / label & gt;
            [. . .]
          & lt; / div & gt;
        & lt; / div & gt;
        [. . .]
        & lt; tlačítko typu = "odeslat" & gt; odešlete & lt; / tlačítko & gt;
    & lt; / forma & gt;
    & lt; / hlavní & gt;
  );
}

Pokud máte nové reagovat, viz dokumentace pro tvorby budov.

Můžeme napsat naše isoptionChecked. a OnoptionChange. Další funkce:

 ISOPTIONCHECKEDCED = (DotazEndex, OptionIndex) = & gt; (
  Toto
);
OnkoptionChange = (DotazEndex, OptionIndex) = & gt; {
  Tento.Setstate (prevate = & gt; {
    const {tringanswers} = objekt.assign (prevate, {});
    Traininganswers [TypeTex] = Array (4) .Fill (0);
    Traininganswers [TypeTex] [OptionIndex] = 1;
    vrátit {tringanswers};
  });
};

06. Trénujte neuronovou síť

Nyní, když náš uživatel klikne na možnost, aktualizujeme relevantní Traininganswers. pole pro prvek 1. Ve vybraném indexu a změňte stav přepínače, abyste jej zobrazili jako zaškrtnuto.

Čas přidat naše onsubmit. Funkce, kde budujeme data školení a vlaku neuronové sítě:

 OnSubmit = E = & gt; {
    e.preventdefault ();
    CONST {TRAINSSANSWERS} = this.state;
    CONST trupingdata = tréninkquestions.MAP ((q, i) = & gt; ({
      Vstup: q.options.map (o = & gt; o.value),
      Výstup: Traininganswers [i],
    }));
    Tento.Setstate ({
      školení: true,
    });
    This.net.Trainasync (tréninkData)
      .then (res = & gt; {
        console.log (res); // Přihlaste se chybovost a # iterace
        Toto.GetRedictions ()
      });
  }

Opakování tréninky Vytváříme vstupní a výstupní pole, které potřebujeme. Získáváme vstupní data tím, že vezmeme optimismu hodnotu každé možnosti a získáme výstupní data z hledání Traininganswers. pole stejného indexu jako otázka.

Po tom aktualizujeme stav Školení: true. informovat uživatele, že neuronová síť se učí. V závislosti na zpracování síly klientského zařízení a kolik otázek máte, proces může trvat sekundy, minuty nebo déle!

Nakonec předáme školení na naši neuronovou síti a řekneme mu, že trénují asynchronně. To vrací slib, který je splněno, když síť našla vzor nebo se vzdal.

Udržujte oko na chybové míře se přihlásíme trainasync. . V ideálním případě by mělo být mezi 0 - 0,05. Pokud je to vyšší, zkontrolujte data školení.

Odtud můžeme získat naše předpovědi:

 GetRedictics = () = & gt; {
  Koncové předpovědi = validaceQuestions.MAP (Q = & gt;
    This.net.run (q.Options.MAP (O = & gt; o.value))
  ));

  Tento.Setstate ({
    Školení: FALSE,
    předpovědi,
  });
}

Použitím net.run. Žádáme, že naše nově vyškolená neuronová síť nám požádáme, aby nám dala své předpovědi pro každou z ověřovacích otázek, které jsme definovali dříve.

Pro Grand Finale přidáváme naši podmíněnou logiku loadingu a předkládáme nalezení uživateli.

poskytnout() {
    CONST {školení, předpovědi} = toto;
    CONST ValidationQuestion = ValidationQuesty ;
    vrátit se (
      & lt; hlavní & gt;
        {školení & amp; (
          & lt; h2 & gt; zatížení ... & lt; / h2 & gt;
        )}
        {! předpovědi a amp; ! školení & amp; (
           [. . .] // formulář pro vzdělávání
        )}

        {předpovědi a amp; ! školení & amp; (
          & lt, div a gt;
            H2 & gt; Zeptali jsme se neuronové sítě: & lt; / h2 & gt;
            & lt; dig classname = "otázka" & gt;
              & lt; h4 & gt; {validationQuestion.question} & lt; / h4 & gt;
              & lt; dig classname = "možnosti" & gt;
                {ValidationQuestion.Options.Map ((O, I) = & gt;
                  & lt, štítek klíč = {o.id} & gt;
                    {/ * Zobrazení štítku a pravděpodobnost jako kulaté procento * /}
                    & lt, span & gt; {$ {o.label}: $ {math.round (předpovědi  [I] * 100)}%} & lt; / rozpětí & gt;
                 & lt; / label & gt;
                ))}
              & lt; / div & gt;
            & lt; / div & gt;
          & lt; / div & gt;
        )}
      & lt; / hlavní & gt;
    );
  }
}

07. Rozšíření sítě

Nyní máte základní rámec pro kvíz, zkuste jej rozšířit s následujícími hodnotami:

Najděte skutečnou chybovou míru neuronové sítě tím, že necháte svůj uživatel odpovědět na vaše ověřovací otázky. Podívejte se, kolikrát si vybrali váš nejlepší odhad.

Trénujte neuronovou síť s těmito dalšími odpověďmi a zjistěte, zda můžete zvýšit přesnost.

Přesuňte výpočty neuronových sítí na uzlový server s brain.js Teofunkce () a Tojson () metody.

Tento článek se původně objevil v čísle 321 v Čistý časopis , přední světový časopis webového designu. Prodám vydání 321. nebo Přihlásit se k odběru Net. .

Přečtěte si více:

Nejlepší JavaScript knihovny
9 nejlepších rámců JavaScriptu vyzkoušet
22 Brilliant Jquery plugins

Použijte brain.js vybudovat neurální síť

01. Nastavte projekt

02. Spusťte aplikaci

03. Definujte své vzdělávací otázky

04. Inicializujte neuronovou síť

05. Sestavte kvízový rámec

06. Trénujte neuronovou síť

07. Rozšíření sítě

jak - Nejoblíbenější články

Jak otočit fotografie do ilustrace

Jak vypnout webové oznámení pro Windows, MacOS a Android

Vytvořit animovaný CSS Art

Jak nastavit místní rozvojové prostředí

Sestavte prototypy s Adobe XD

14 Tipy Workflow Zbrush

Zlepšete své koncepce umění dovednosti ve Photoshopu

Jak míchat barevné tužky

Kategorie