Use Brain.js para construir uma rede neural

Sep 11, 2025

Como

(Crédito da imagem: Getty Images)

Brain.js é uma maneira fantástica de construir uma rede neural. Simplificando, uma rede neural é um método de aprendizado de máquina que funciona de maneira semelhante a um cérebro humano. Dada a resposta correta a uma pergunta (como "qual opção desse usuário escolherá?"), Ele lentamente aprende o padrão e a relação entre as entradas e as respostas. Um exemplo de uma rede neural é o sistema de reconhecimento facial do Facebook, profundo.

Mas devido à linguagem de domínio complexa de redes neurais e curva aparentemente íngreme, pode ser difícil começar.

Neste tutorial, vamos distilizar a teoria para precisar de saber e, importante, ficar preso com realmente usando o Brain.JS para criar uma rede neural. Até o final, você terá um aplicativo da Web que solicita perguntas a múltipla escolha sobre o otimismo de um usuário. Quando eles submetem, essas respostas vão treinar uma rede neural para a probabilidade de nosso usuário selecionando cada opção para uma nova pergunta.

Quer ferramentas mais úteis de design da web? Veja o nosso post na escolha do perfeito Construtor de sites . Ou se você precisar de algum lugar para armazenar arquivos com segurança, confira nossa escolha do melhor armazenamento na núvem . Planejando um site complexo? Você precisará de um robusto hospedagem na web. serviço, que pode acompanhar.

Baixe os arquivos que você precisa para este tutorial.

01. Configure o projeto

Em primeiro lugar, baixe e instale as dependências necessárias. Este tutorial pressupõe que você tenha um conhecimento de trabalho de reagir ou o mapeamento equivalente a uma alternativa preferida.

Crie um aplicativo reagir usando o método desejado. Você pode experimentar o Facebook Criar-reagem-app Ferramenta, instalada usando o seguinte:

npm install create-react-app -g

02. Inicie seu aplicativo

Agora podemos construir, instalar o Brain.js e iniciar nosso aplicativo:

 NPX Criar-reagem-app otimismo-nn
CD Optimism-Nn
NPM install brainjs.
NPM START

Vamos realizar a computação da rede neural no navegador. As redes neurais são intensivas em recursos e devem ser descarregadas para um servidor. No entanto, desta forma é rápida em configurar e multa para nossas necessidades básicas. Agora vamos adicionar cérebro.js ao nosso ponto de entrada (no meu caso, app.js).

 Importar cérebro de 'Brain.js';

03. Defina suas perguntas de treinamento

brains.js neural network — Uma visualização da nossa rede neural. As entradas vêm do valor do otimismo de cada opção para uma pergunta. Estes são então manipulados pela camada oculta para nos dar as saídas que queremos - a probabilidade de cada opção ser selecionada (Crédito da imagem: Harry Gray)

Precisamos definir nossas questões de treinamento em seguida. Em um separado Perguntas.js. arquivo, precisaremos de um Treinamento e ValidationQuestions. variedade. Você pode encontrar minha lista no repo Git ou criar o seu próprio. Quanto mais questões de treinamento você tiver, mais precisos seus resultados. Lembre-se de importá-los para o seu ponto de entrada.

 Exportar treinamento constituições = [
  {
    ID: 'Q1',
    Pergunta: "Você costuma ver o melhor nas coisas?"
    Opções: [
      {ID: 'Q1A', etiqueta: 'não realmente', valor: 0.2,},
      {ID: 'Q1B', etiqueta: 'Sempre', valor: 1.0,},
      {ID: 'Q1C', etiqueta: 'Normalmente, sim', valor: 0.7,},
      {ID: 'q1d', etiqueta: 'nunca!', valor: 0.0,},
    ],
  },
];

Para ambos os matrizes, precisamos de uma pergunta, uma matriz de quatro opções que contêm um rótulo e um valor de otimismo. Este valor será a entrada para nossa rede neural.

Certifique-se de variar o pedido e o equilíbrio de valores, ou a rede neural pode se concentrar muito no índice das opções na matriz! Nossa rede neural leva quatro insumos e dá quatro saídas. Nossos dados de treinamento precisam corresponder a isso, então em nosso construtor precisamos de algum estado para o teste e as opções do usuário:

 este.state = {
  Treinamento: TreinamentoQuestions.Map (() = & gt; array (4) .fill (0)),
  Treinamento: Falso,
  Previsões: indefinidas,
};

04. Initialise a rede neural

A inicialização do treinamento de treinamento cria uma matriz para cada pergunta contendo [0, 0, 0, 0] - Nosso estado padrão sem seleção. Também vamos precisar inicializar nossa rede neural - apenas uma única linha com Brain.JS:

 this.net = novo cérebro.neuralnetwork ({hiddenlayers: });

05. Construa o Quiz Framework

Para construir a estrutura para o nosso teste, precisamos circular sobre nossas perguntas e opções de treinamento. Isso é bastante detalhado e não muito interessante, então eu darei uma saída de exemplo para você apontar em vez disso:

 render () {
  Retorna (
    & lt; main & gt;
      & lt; formulário onsubmit = {this.onsubmit} & gt;
        [. . .] // iterar sobre perguntas e amp; Opções
        & lt; div nomename = "pergunta" & gt;
          & lt; h4 & gt; {question} & lt; / h4 & gt;
          & lt; div nomeame = "Opções" & gt;
            & lt; rotule htmlfor = {optionID} & gt;
              & lt; span & gt; {label} & lt; / span & gt;
              e lt; entrada
                Tipo = "Radio"
                requerido
                Nome = {questionid}
                id = {optionid}
                Verificado = {() = & gt; este.isoptionchecked (QuestionIndex, optionIndex)}
                onchange = {() = & gt; This.Optionchange (QuestionIndex, optionIndex)}
              / & gt;
            & lt; / label & gt;
            [. . .]
          & lt; / div & gt;
        & lt; / div & gt;
        [. . .]
        & lt; Button Type = "Enviar" & GT; Enviar & Lt; / Button & GT;
    & lt; / form & gt;
    & lt; / main & gt;
  );
}

Se você é novo para reagir, veja o documentação para construir formulários.

Nós podemos escrever nossa isoptionchecked. e ONOPTIONCHANGE. Funções Next:

 isoptionchecked = (QuestionIndex, optionIndex) = & gt; (
  este.state.Traininganswers [QuestionIndex] [optionIndex]! == 0
);
ONOPTIONCHANGE = (QuestionIndex, optionIndex) = & gt; {
  este.setTate (previr = & gt; {
    const {TreiningAnswers} = Object.Assign (Preventate, {});
    TreinamentoAsswers [QuestionIndex] = Array (4) .fill (0);
    Trainingswers [QuestionIndex] [optionIndex] = 1;
    Retornar {TreiningAnswers};
  });
};

06. Treine a rede neural

Agora, quando nosso usuário clica em uma opção, atualizamos o treinamento de treinamento Array para apresentar um 1. No índice selecionado e altere o estado do botão de opção para mostrá-lo como verificado.

Hora de adicionar nosso onsubmit. função, onde construímos os dados de treinamento e treinamos a rede neural:

 Onsubmit = E = & gt; {
    e.preventdefault ();
    Const {TreiningAnswers} = este.state;
    Const TrainingData = TreinamentoQuestions.Map ((Q, I) = & GT; ({{{
      entrada: q.options.map (O = & gt; o.Value),
      saída: treinamento [i],
    }));
    este.setate ({
      Treinamento: verdadeiro,
    });
    this.net.trainasync (treinamentodata)
      .then (res = & gt; {
        console.log (res); // registrando a taxa de erro e # iterações
        this.getpredictions ()
      });
  }

Looping mais Treinamento , Criamos as matrizes de entrada e saída que precisamos. Recebemos os dados de entrada tomando o valor do otimismo de cada opção e nós obtemos os dados de saída de olhar no treinamento de treinamento matriz no mesmo índice que a questão.

Depois disso, atualizamos o estado com Treinamento: True. para informar o usuário que a rede neural está aprendendo. Dependendo da potência de processamento do dispositivo cliente e quantas perguntas você tem, o processo pode levar segundos, minutos ou mais!

Finalmente, passamos os dados de treinamento para nossa rede neural e dizem que treinar de forma assíncrona. Isso retorna uma promessa que é cumprida quando a rede encontrou o padrão ou desistido.

Fique de olho na taxa de erro que efetuamos login traadasync. . Idealmente, deve ser entre 0 - 0,05. Se for maior, verifique seus dados de treinamento.

De lá, podemos obter nossas previsões:

 getpredictions = () = & gt; {
  Const Previsions = validationquestions.map (Q = & GT;
    this.net.run (q.options.map (O = & gt; o.Value))
  ));

  este.setate ({
    Treinamento: Falso,
    previsões,
  });
}

Usando net.run. , Pedimos à nossa rede neural recém-treinada para nos dar suas previsões para cada uma das perguntas de validação que definimos anteriormente.

Para o Grand Finale, adicionamos nossa lógica de carregamento condicional e apresentamos uma descoberta ao usuário.

render () {
    const {treinamento, previsões} = este.state;
    ValidationQuestion = ValidationQuestions ;
    Retorna (
      & lt; main & gt;
        {Treinamento e amp; & amp; (
          & lt; h2 & gt; carregando ... & lt; / h2 & gt;
        }}
        {! Previsões & Amp; & amp; ! treinamento e amp; e amp; (
           [. . .] // Forma de perguntas de treinamento
        }}

        {previções & amp; & amp; ! treinamento e amp; e amp; (
          & lt; div & gt;
            & lt; h2 & gt; pedimos a rede neural: & lt; / h2 & gt;
            & lt; div nomename = "pergunta" & gt;
              & lt; h4 & gt; {validationquestion.Question} & lt; / h4 & gt;
              & lt; div nomeame = "Opções" & gt;
                {validationquestion.options.map ((O, I) = & gt; (
                  & lt; tecla label = {O.ID} & gt;
                    {/ * exibe o rótulo e a probabilidade como uma porcentagem redonda * /}
                    & lt; span & gt; {$ {O.Label}: $ {math.round (previsões  [i] * 100)}%} & lt; / span & gt;
                 & lt; / label & gt;
                ))}
              & lt; / div & gt;
            & lt; / div & gt;
          & lt; / div & gt;
        }}
      & lt; / main & gt;
    );
  }
}

07. Estenda a rede

Agora você tem a estrutura básica para o teste, tente estendê-lo com o seguinte:

Encontre a taxa de erro real da sua rede neural, deixando seu usuário atender suas perguntas de validação. Veja quantas vezes eles escolheram o seu melhor palpite.

Treine a rede neural com essas respostas adicionais e veja se você pode melhorar a precisão.

Mova os cálculos da rede neural para um servidor de nó com o cérebro.js funcionar() e tojson () métodos.

Este artigo originalmente apareceu em questão 321 em Revista Net. , a principal revista web design do mundo. Compre Edição 321. ou Inscreva-se na Net. .

Consulte Mais informação:

As melhores bibliotecas JavaScript
9 dos melhores frameworks de JavaScript para tentar
22 plugins jquery brilhantes

Use Brain.js para construir uma rede neural

01. Configure o projeto

02. Inicie seu aplicativo

03. Defina suas perguntas de treinamento

04. Initialise a rede neural

05. Construa o Quiz Framework

06. Treine a rede neural

07. Estenda a rede

Como - Artigos mais populares

Como photoshop alguém em uma foto

Faça animações de veículos com iClone 7

Exportar animações de efeitos para HTML5

Mestre a ferramenta Bridge

Como desenhar com foto de afinidade para ipad

Pintar um seascape energético em óleos

Como preparar gráficos ilustradores para efeitos após

Como combinar os conjuntos de aquarela do pintor

Categorias