신경망을 구축하기 위해 brain.js를 사용하십시오

Feb 6, 2026
어떻게
brain.js neural network
(이미지 크레디트 : 게티 이미지)

brain.js는 신경망을 구축하는 환상적인 방법입니다. 간단히 말해서, 신경망은 인간의 두뇌와 비슷한 방식으로 작동하는 기계 학습 방법입니다. 질문에 대한 정답 (예 :이 사용자가 선택할 것인가? '), 그것은 천천히 입력과 답변 간의 패턴과 관계를 배웁니다. 신경 네트워크의 한 예는 Facebook의 표면 인식 시스템이며 DepenFace입니다.

그러나 신경망의 복잡한 도메인 언어와 겉으로보기에 가파른 학습 곡선으로 인해 시작하기가 어려울 수 있습니다.

이 튜토리얼에서는 이론을 알고 있기 위해 이론을 왜곡시킬 것이며, 중요하게도 뇌 .js를 실제로 사용하여 신경망을 만드는 데 중요합니다. 마지막으로 사용자의 낙관주의에 대한 객관식 질문을 묻는 웹 앱을 갖게됩니다. 그들이 제출할 때이 답변은 새로운 질문에 대한 각 옵션을 선택하는 사용자의 확률에 신경 네트워크를 훈련시킵니다.

더 유용한 웹 디자인 도구를 원하십니까? 완벽한 것을 따는 데 포스트를 보아라 웹 사이트 빌더 ...에 또는 파일을 안전하게 저장할 위치가 필요한 경우 최상의 선택을 확인하십시오. 클라우드 스토리지 ...에 복잡한 웹 사이트 계획? 튼튼한 것이 필요합니다 웹 호스팅 서비스를 유지할 수 있습니다.

이 자습서에 필요한 파일을 다운로드하십시오.

01. 프로젝트를 설정하십시오

첫째, 필요한 종속성을 다운로드하여 설치하십시오. 이 튜토리얼은 Reactional에 대한 작업 지식이 있거나 선호되는 대안에 대한 동등한 매핑을 추정합니다.

원하는 방법을 사용하여 대응 앱을 만듭니다. 당신은 페이스 북을 시도 할 수 있습니다 Create-React-App. 다음을 사용하여 설치된 도구 : 

npm install create-react-app -g

02. 앱을 시작하십시오

이제 우리는 brain.js를 빌드하고 설치하고 앱을 시작할 수 있습니다. 

 NPX 생성 - 반응 앱 optimism-nn
CD Optimism-NN.
NPM 설치 brainjs
NPM 시작

우리는 브라우저에서 신경 네트워크 계산을 수행 할 것입니다. 신경망은 자원 집약적이며 서버로 오프로드되어야합니다. 그러나 이러한 방식은 우리의 기본적인 요구에 맞게 빠르게 설정되어 있습니다. 이제 우리의 진입 점 (내 경우, app.js)에 brain.js를 추가합시다. 

 'brain.js'에서 뇌 수입;

03. 교육 질문을 정의하십시오

brains.js neural network

신경망의 시각화. 입력은 질문을 위해 각 옵션의 낙관적 인 값에서옵니다. 그런 다음 이들은 숨겨진 층에 의해 조작되어 우리가 원하는 출력을 제공합니다. 각 옵션이 선택되는 가능성 (이미지 크레디트 : 해리 그레이)

다음에 훈련 질문을 정의해야합니다. 별도로 질문 .js. 파일, 우리는 필요합니다 교육의 quansions. 과 validationquestions 정렬. Git Repo에서 내 목록을 찾거나 자신만의 목록을 만들 수 있습니다. 더 많은 훈련 질문이 많을수록 결과가 더 정확합니다. 이를 진입 점으로 가져 오는 것을 잊지 마십시오. 

 수출 Const TrainingQuestions = [
  {
    ID : 'Q1',
    질문 : '당신은 종종 사물에서 최선을 보입니까?',
    옵션 : [
      {ID : 'Q1A', 레이블 : '정말로', 값 : 0.2,},
      {ID : 'Q1B', 레이블 : '항상', 값 : 1.0,},
      {ID : 'Q1C', 레이블 : '일반적으로, 예', 값 : 0.7,},
      {ID : 'Q1D', 레이블 : '절대로!', 값 : 0.0,},
    ],
  },
];

두 배열 모두에 대해서는 레이블이 포함 된 네 가지 옵션의 배열과 낙관적 인 값을 필요로합니다. 이 값은 신경 네트워크의 입력이됩니다.

값의 순서와 균형을 변경하거나 신경망은 배열의 옵션 색인에 너무 많이 집중할 수 있습니다! 우리의 신경망은 4 개의 입력을 취하고 4 개의 출력을 제공합니다. 우리의 훈련 데이터는이 일치해야하므로 생성자에서 퀴즈 및 사용자 옵션에 대한 상태가 필요합니다. 

 this.state = {
  트레이닝 스팬 : TrainingQuestions.map (() = & gt; 배열 (4) .Fill (0)),
  교육 : 거짓,
  예측 : 정의되지 않은,
};

04. 신경망을 초기화합니다

TrainingAnswers의 초기화는 [0, 0, 0, 0]을 포함하는 각 질문에 대한 배열을 생성합니다. 선택이없는 기본 상태. 우리는 또한 신경망을 초기화해야 할 필요가 있습니다. brain.js와 한 줄. 

 이인트 = 새로운 brain.nuralnetwork ({HALDINLAYERS : 
});

brains.js neural network

교육 세트의 각 항목은 두 개의 배열로 구성되어야합니다. 각 옵션의 낙관주의 값과 사용자가 선택한 선택을 포함하는 하나의 출력을 가진 하나의 입력 (이미지 크레디트 : 해리 그레이)

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; label htmlfor = {completid} & gt;
              & lt; 스팬 & gt; {label} & lt; span & gt;
              & lt; 입력
                유형 = "라디오"
                요구 사항
                name = {useID}
                id = {coltionID}
                확인 됨 = {() = & gt; (questionindex, optionIndex)}
                ONCHANGE = {() = & gt; 이 .OptionChange (questionindex, optionIndex)}
              / & gt;
            & lt; / label & gt;
            [. ...에 ...의
          & lt; / div & gt;
        & lt; / div & gt;
        [. ...에 ...의
        & lt; 버튼 유형 = "제출"& gt; 제출 & lt; / button & gt;
    & lt; / form & gt;
    & lt; / main & gt;
  );
}

당신이 새로운 것을 반응시키는 새로운 경우, 선적 서류 비치 건물 양식.

우리는 우리를 쓸 수 있습니다 isoptionChecked 과 onoptionchange. 기능 다음과 같이 :

isoptionChecked = (questionindex, optionIndex) = & gt; ( in.state.tratinganswers [questindex] [optionIndex]! == 0 ); OnOptionChange = (questionindex, optionIndex) = & gt; { 이 .SetState (prevstate = & gt; { const {traininganswers} = Object.Assign (prevstate, {}); 트레이닝 스탯 [questionindex] = 어레이 (4) .Fill (0); 트레이닝 스런스 [questionindex] [optionIndex] = 1; 반환 {트레이닝 스팬}; }); };

06. 신경망을 훈련시킵니다

brains.js neural network

우리의 훈련 질문과 그 옵션 중 하나를 보여주는 우리의 UI. 실제 라디오 버튼을 숨기고 토글 버튼 모양을 제공하기 위해 CSS를 사용했습니다. (이미지 크레디트 : 해리 그레이)

이제 사용자가 옵션을 클릭하면 관련이 있습니다. 교육원 A. 기능을 갖춘 배열 1 선택한 인덱스에서 라디오 버튼의 상태를 변경하여 확인 된대로 표시합니다.

우리를 추가 할 시간 onsubmit. 기능, 훈련 데이터를 구축하고 신경망을 훈련시키는 기능 :

onSubmit = E = & gt; { e.preventDefault (); const {traininganswers} = this.state; const trainingdata = trainingquestions.map ((q, i) = & gt; ({ 입력 : Q.Options.map (o = & gt; o.value), 출력 : TrainingAnswers [i], })); setStateState ({ 교육 : 사실, }); this.net.trainasync (트레이닝 다이타) .then (res = & gt; console.log (res); // 오류율 및 # 반복을 기록합니다 이. getPredictions () }); }

루핑 교육의 quansions. 우리는 필요한 입력 및 출력 배열을 만듭니다. 우리는 각 옵션의 낙관주의 가치를 취하여 입력 데이터를 얻고 출력 데이터가 교육원 질문과 동일한 색인의 배열.

그 후, 우리는 주를 업데이트합니다 훈련 : 사실 사용자에게 신경망이 배우고 있음을 알리려면 클라이언트 장치의 처리 능력과 몇 가지 질문에 따라 프로세스가 몇 초, 분 이상이 걸릴 수 있습니다!

마지막으로, 우리는 훈련 데이터를 신경 네트워크로 전달하여 비동기 적으로 훈련하도록 알려줍니다. 이것은 네트워크가 패턴을 발견하거나 포기할 때 완성 된 약속을 반환합니다.

우리가 로그인 한 오류율에 대한 눈을 보관하십시오. 훈련자 ...에 이상적으로는 0 - 0.05 사이 여야합니다. 그것이 더 높으면 교육 데이터를 확인하십시오.

거기에서 우리는 우리의 예측을 얻을 수 있습니다 :

getPredictions = () = & gt; { const 예측 = ValidationQuestions.map (q = & gt; 이 int.n.net.run (q.options.map (options.map (o = & gt; o.value)) ))); setStateState ({ 교육 : 거짓, 예측, }); }

사용 net.run. 우리는 새로 훈련 된 신경망을 우리가 이전에 정의한 각 검증 질문에 대한 예측을 제공하도록 요청했습니다.

Grand Finale의 경우 조건부 로딩 로직을 추가하고 사용자에게 찾는 것을 제시합니다. 

렌더링 () {
    const {훈련, 예측} = kr.state;
    const validationQuestion = ValidationQuestions 
;
    반환 (
      & lt; main & gt;
        {훈련 및 amp; & amp; (
          & lt; h2 & gt; 로딩 ... & 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; {validationquestion.question}} & lt; / h4 & gt;
              & lt; div classname = "옵션"& gt;
                {validationquestion.options.map ((o, i) = & gt; (
                  & lt; 레이블 키 = {o.id} & gt;
                    {/ * 라운드 백분율로 레이블 및 확률 표시 * /}
                    {$ {o.label} : $ {{o.label} : $ {math.round (예측 
 [i] * 100)} %}}}}
                 & lt; / label & gt;
                ))))}
              & lt; / div & gt;
            & lt; / div & gt;
          & lt; / div & gt;
        )}}
      & lt; / main & gt;
    );
  }
}

07. 네트워크 확장

brains.js neural network

여기에 최종 결과 뷰는 검증 질문과 옵션이 있습니다. 나는 확률을 다른 div로 전달하여 바를 바로 표시했다. (이미지 크레디트 : 해리 그레이)

이제 퀴즈의 기본 프레임 워크가 있으시면 다음과 같이 확장하십시오.

사용자가 유효성 검사 질문에 답변함으로써 신경망의 실제 오류율을 찾습니다. 그들이 가장 좋은 추측을 선택한 몇 번이나보십시오.

이러한 추가 답변으로 신경망을 훈련시키고 정확도를 향상시킬 수 있는지 확인하십시오.

뇌 .js로 노드 서버로 신경 네트워크 계산을 이동하십시오. tofunction () 과 tojson () 행동 양식.

이 기사는 원래 문제 321에 등장했습니다 그물 잡지 , 세계 최고의 웹 디자인 잡지. 구매 문제 321. 또는 Net에 가입하십시오 ...에

자세히보기 :

  • 최고의 자바 스크립트 라이브러리
  • 시도 할 수있는 최고의 자바 스크립트 프레임 워크 9 개
  • 22 훌륭한 jquery 플러그인

어떻게 - 가장 인기있는 기사

중력 스케치 사용 방법

어떻게 Feb 6, 2026

(이미지 크레디트 : 중력 스케치) VR 광고 소재를위한 디자인 및 모델링 도구 인 중력 스�..

Photoshop에서 주름을 제거하는 방법

어떻게 Feb 6, 2026

(이미지 크레디트 : Jason Parnell-Brookes) 이 자습서에서는 Photoshop에서 주름을 제거하는 방법..

변수 글꼴 사용 4 단계

어떻게 Feb 6, 2026

(이미지 크레디트 : 미래) 변수 글꼴은 글꼴 디자이너가 글꼴 자체 내의 유형 변화를 정�..

귀하의 3D 해부학을 개선하는 10 가지 방법

어떻게 Feb 6, 2026

(이미지 크레디트 : Ryan Kingslien) 인간의 수치를 재현하는 것은 가장 힘든 도전적인 예술�..

미디어 쿼리없이 적응 형 레이아웃 빌드

어떻게 Feb 6, 2026

오랫동안 나는 웹 페이지에서 완벽한 시각적 인 구성에 도달하려고했습니다. 나는 일상적인 일에서 CSS 중단 점으로 많은 고통을 겪었으며 반응 ..

X 입자로 단풍을 재배하는 법을 배웁니다

어떻게 Feb 6, 2026

현장에서 자란 외모가있는 정적 식물을 모델링하지는 않지만 그 성장을 조금 더 복잡하게 만드는..

프로젝트 펠릭스가있는 2D 디자인을 3D로 바꾸십시오

어떻게 Feb 6, 2026

최근 Adobe 's New의 사전 출시 [삼] 펠릭스 3D 패키지 2D에서 3D 이미지 제작까지 도약을 즐거운 시간으로 만듭니다. Project Felix는 그림 찬성..

전자 상거래 사이트의 성능을 향상시키는 방법

어떻게 Feb 6, 2026

Tammy Everts. 설계, 성능 및 전환율 간의 연결에 대한 프리젠 테이션을 제공합�..

카테고리