Използвайте brain.js за изграждане на невронна мрежа

невронна мрежа на brain.js
(Кредит за изображение: Гети Имиджис)

Brain.js е фантастичен начин за изграждане на невронна мрежа. Най-просто казано, невронната мрежа е метод за машинно обучение, който работи по подобен начин на човешкия мозък. При правилния отговор на въпрос (като „коя опция ще избере този потребител?“) Той бавно научава модела и връзката между входовете и отговорите. Един пример за невронна мрежа е системата за разпознаване на лица на Facebook, DeepFace.

Но поради сложния домейн език на невронните мрежи и на пръв поглед стръмна крива на обучение, може да е трудно да започнете.

В този урок ще дестилираме теорията до необходимостта да се знае и, което е важно, ще се забием с действителното използване на brain.js за създаване на невронна мрежа. Накрая ще имате уеб приложение, което задава въпроси с множество възможности за оптимизъм на потребителя. Когато се изпратят, тези отговори ще обучат невронна мрежа на вероятността потребителят да избере всяка опция за чисто нов въпрос.



Искате още полезни инструменти за уеб дизайн? Вижте нашата публикация за бране на перфектното уеб конструктор . Или ако имате нужда някъде да съхранявате файлове сигурно, разгледайте нашия избор на най-добрите съхранение в облака . Планирате сложен уебсайт? Ще ви трябва здрава уеб хостинг услуга, която може да се справи.

Изтеглете файловете, които са ви необходими за този урок.

01. Настройте проекта

Първо, изтеглете и инсталирайте необходимите зависимости. Този урок предполага, че имате работещи познания за React или еквивалентното картографиране на предпочитана алтернатива.

Създайте приложение React, като използвате желания от вас метод. Можете да опитате Facebook създайте-реагирайте-приложение инструмент, инсталиран със следното:

npm install create-react-app -g

02. Стартирайте приложението си

Сега можем да изградим, инсталираме brain.js и да стартираме нашето приложение:

най-добрият външен твърд диск за производство на музика mac
npx create-react-app optimism-nn cd optimism-nn npm install brainjs npm start

Ще извършим изчислението на невронната мрежа в браузъра. Невронните мрежи изискват много ресурси и трябва да бъдат разтоварени на сървър. Този начин обаче е бърз за настройка и фин за нашите основни нужди. Сега нека добавим brain.js към нашата входна точка (в моя случай App.js).

import brain from ‘brain.js’;

03. Определете въпросите си за обучение

brains.js невронна мрежа

Визуализация на нашата невронна мрежа. Входните данни идват от стойността на оптимизма на всяка опция за въпрос. След това те се манипулират от скрития слой, за да ни дадат резултатите, които искаме - вероятността всяка опция да бъде избрана(Кредит на изображението: Хари Грей)

Следва да определим нашите въпроси за обучение. В отделен questions.js файл, ще ни трябва обучение Въпроси и валидиране Въпроси масив. Можете да намерите моя списък в репозитория на Git или да създадете свой собствен. Колкото повече въпроси за обучение имате, толкова по-точни са вашите резултати. Не забравяйте да ги импортирате във вашата входна точка.

export const trainingQuestions = [ { id: ‘q1’, question: ‘Do you often see the best in things?’, options: [ { id: ‘q1a’, label: ‘Not really’, value: 0.2, }, { id: ‘q1b’, label: ‘Always’, value: 1.0, }, { id: ‘q1c’, label: ’Usually, yeah’, value: 0.7, }, { id: ‘q1d’, label: ’Never!’, value: 0.0, }, ], }, ];

И за двата масива ни трябва въпрос, масив от четири опции, които съдържат етикет и стойност на оптимизма. Тази стойност ще бъде входът за нашата невронна мрежа.

Уверете се, че променяте реда и баланса на стойностите, или невронната мрежа може да се фокусира твърде много върху индекса на опциите в масива! Нашата невронна мрежа приема четири входа и дава четири изхода. Данните ни за обучение трябва да съответстват на това, така че в нашия конструктор се нуждаем от състояние за теста и опциите на потребителя:

this.state = { trainingAnswers: trainingQuestions.map(() => Array(4).fill(0)), training: false, predictions: undefined, };

04. Инициализиране на невронната мрежа

Инициализацията на trainingAnswers създава масив за всеки въпрос, съдържащ [0, 0, 0, 0] - нашето състояние по подразбиране без избор. Също така ще трябва да инициализираме нашата невронна мрежа - само един ред с brain.js:

this.net = new brain.NeuralNetwork({ hiddenLayers: [4] });

brains.js невронна мрежа

Всеки елемент от нашия учебен комплект трябва да се състои от два масива; един вход със стойността на оптимизма за всяка опция и един изход, съдържащ избора, направен от нашия потребител(Кредит на изображението: Хари Грей)

05. Изградете рамката на теста

За да изградим рамката за нашия тест, трябва да прегледаме нашите въпроси и възможности за обучение. Това е доста многословно и не е много интересно, затова вместо това ще дам пример за изход, към който да се стремите:

render() { return ( [. . .] // Iterate over questions & options

{question}

{label} this.isOptionChecked(questionIndex, optionIndex)} onChange={() => this.onOptionChange(questionIndex, optionIndex)} /> [. . .] [. . .] Submit ); }

Ако сте нов в React, вижте документация за изграждане на форми.

Можем да напишем нашите isOptionChecked и onOptionChange функции след това:

isOptionChecked = (questionIndex, optionIndex) => ( this.state.trainingAnswers[questionIndex][optionIndex] !== 0 ); onOptionChange = (questionIndex, optionIndex) => { this.setState(prevState => { const { trainingAnswers } = Object.assign(prevState, {}); trainingAnswers[questionIndex] = Array(4).fill(0); trainingAnswers[questionIndex][optionIndex] = 1; return { trainingAnswers }; }); };

06. Тренирайте невронната мрежа

brains.js невронна мрежа

Нашият потребителски интерфейс досега, показващ един от въпросите ми за обучение и възможностите му. Използвал съм CSS, за да скрия действителните радиобутони и да им дам вид на превключващ бутон(Кредит на изображението: Хари Грей)

Сега, когато нашият потребител щракне върху опция, ние актуализираме съответната обучениеОтговори масив, който да съдържа a 1 в избрания индекс и променете състоянието на радио бутона, за да го покажете като отметнато.

Време е да добавим нашите onSubmit функция, където изграждаме данните за обучение и обучаваме невронната мрежа:

onSubmit = e => { e.preventDefault(); const { trainingAnswers } = this.state; const trainingData = trainingQuestions.map((q, i) => ({ input: q.options.map(o => o.value), output: trainingAnswers[i], })); this.setState({ training: true, }); this.net.trainAsync(trainingData) .then(res => { console.log(res); // Log the error rate and # iterations this.getPredictions() }); }

Завъртане обучение Въпроси , ние създаваме входните и изходните масиви, от които се нуждаем. Получаваме входните данни, като вземаме стойността на оптимизма за всяка опция и получаваме изходните данни от търсенето в обучениеОтговори масив при същия индекс като въпроса.

След това актуализираме състоянието с обучение: вярно да информира потребителя, че невронната мрежа се учи. В зависимост от мощността на обработка на клиентското устройство и колко въпроси имате, процесът може да отнеме секунди, минути или повече!

Накрая предаваме данните за обучение на нашата невронна мрежа и му казваме да тренира асинхронно. Това връща обещание, което е изпълнено, когато мрежата е намерила шаблона или се е отказала.

Следете процента грешки, в които влизаме trainAsync . В идеалния случай трябва да е между 0 - 0,05. Ако е по-висока, проверете данните си за обучение.

Оттам можем да получим нашите прогнози:

getPredictions = () => { const predictions = validationQuestions.map(q => ( this.net.run(q.options.map(o => o.value)) )); this.setState({ training: false, predictions, }); }

Използвайки net.run , ние молим нашата ново обучена невронна мрежа да ни даде своите прогнози за всеки от въпросите за валидиране, които дефинирахме по-рано.

За големия финал добавяме нашата логика за условно зареждане и представяме констатация на потребителя.

render() { const { training, predictions } = this.state; const validationQuestion = validationQuestions[0]; return ( {training && (

Loading…

)} {!predictions && !training && ( [. . .] // Training questions form )} {predictions && !training && (

We asked the neural network:

{validationQuestion.question}

{validationQuestion.options.map((o, i) => ( {/* display the label and probability as a round percentage */} {${o.label}: ${Math.round(predictions[0][i] * 100)}%} ))} )} ); } }

07. Разширете мрежата

brains.js невронна мрежа

как да поставя изображението в перспектива в илюстратора
Ето нашия изглед на крайните резултати, с моя въпрос за проверка и опции. Предадох вероятността на друг div, за да я покажа като лента(Кредит на изображението: Хари Грей)

Сега имате основната рамка за теста, опитайте да го разширите със следното:

Намерете реалния процент грешки на вашата невронна мрежа, като позволите на потребителя да отговори на вашите въпроси за проверка. Вижте колко пъти са избрали най-доброто ви предположение.

Обучете невронната мрежа с тези допълнителни отговори и вижте дали можете да подобрите точността.

Преместете изчисленията на невронната мрежа върху сървър на Node с brain.js да функционира() и към JSON () методи.

Тази статия първоначално се появи в брой 321 в нетно списание , водещото световно списание за уеб дизайн. Купете брой 321 или абонирайте се за net .

Прочетете още: