xing
/
BrainJS-examples


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198
							<!DOCTYPE html>
<html>

<head>
    <title>Brain JS - NeuralNetwork</title>
    <meta charset="utf-8" />
    <meta http-equiv="Content-Type"
          content="text/html; charset=utf-8" />
    <style>
        #network {
        background: #ccc;
        border: 1px solid red;
        width: 640px;
        height: 480px;
      }
    </style>
</head>

<body>
    <h1>Brain JS - NeuralNetwork</h1>
    <p>
        In this case, we test the math adding calcuation by Neural Network model.
    </p>
    <h2>Test data</h2>
    <p>
        This chart shows the all sample data.
        The test is to find some point located on certain place, where is close
        to (0.15, 0) with radius 0.25. The network will trained with some of
        these data and guess other part to draw the results.
    </p>
    <div id="all-data"
         style="position: relative; width:600px">
        <canvas id="allDataChart"></canvas>
    </div>
    <p>This chart shows the test results by the network.
        The diagram shall be part of above chart.
    </p>
    <div id="test-data"
         style="position: relative; width:600px">
        <canvas id="testDataChart"></canvas>
    </div>
    <h2>Network</h2>
    <p>The network structure is shown as below:</p>
    <div id="network"></div>
</body>
<script src="brain-browser.js"></script>
<script src="chart.js"></script>
<script type="text/javascript">
function criteria(x, y) {
  const r = Math.sqrt((x - 0.15) ** 2 + y ** 2)
  if (r < 0.25) {
    return 1;
  } else {
    return 0;
  }
}

function generator(num = 1000) {
  let data = [];
  for (let i = 0; i < num; i++) {
    const x = Math.random() - 0.5;
    const y = Math.random() - 0.5;
    data.push({
      x: x,
      y: y,
    })
  }
  return data;
}

function generateInputOutput(data_input, data_output, split) {
  const train_input = data_input.slice(0, split);
  const train_output = data_output.slice(0, split);
  const test_input = data_input.slice(split);
  const test_output = data_output.slice(split);

  let results = {
    train: [],
    test: {
      input: [],
      output: [],
    },
    all: [],
  };
  for (let i = 0; i < train_input.length; i++) {
    results['train'].push({
      // input: [train_input[i]['x'],train_input[i]['y']], // RNN
      input: train_input[i], // NeuralNetwork
      output: [train_output[i]],
    });
  }
  for (let i = 0; i < test_input.length; i++) {
    results['test']['input'].push(test_input[i]);
    results['test']['output'].push(test_output[i]);
  }

  for (let i = 0; i < data_input.length; i++) {
    results['all'].push({
      input: data_input[i],
      output: [data_output[i]],
    });
  }
  return results;
}

// Generate the datasets for the chart
function generateChartsData(data) {
  let datasets0 = {
    label: '0',
    data: [],
    backgroundColor: 'rgba(50,0,0,0.1)',
    radius: 6,
    tyle: 'cicle',
  };
  let datasets1 = {
    label: '1',
    data: [],
    backgroundColor: 'rgba(0, 100,200,0.05)',
    radius: 10,
    tyle: 'triangle',
  };

  for (let i = 0; i < data.length; i++) {
    let item = { x: data[i]['input']['x'], y: data[i]['input']['y'] }
    if (data[i]['output'] == 0) {
      datasets0['data'].push(item);
    } else {
      datasets1['data'].push(item);
    }
  }
  return [datasets0, datasets1];
}

const TOTAL_SAMPLES = 100;
const TRAIN_SAMPLES = 60;

const data_input = generator(TOTAL_SAMPLES);
const data_output = data_input.map(d => criteria(d['x'], d['y']));

const dataset = generateInputOutput(data_input, data_output, TRAIN_SAMPLES);

const ctx = document.getElementById("allDataChart").getContext('2d');
var scatterChart = new Chart(ctx, {
  type: "scatter",
  data: {
    datasets: generateChartsData(dataset['all'])
  },
  options: {
    responsive: true,
  }
});

const svg_config = {
  height: 480,
  width: 640,
  radius: 10,
};

console.log(dataset);

// create a simple recurrent neural network
const net = new brain.NeuralNetwork();

net.train(dataset['train'], { log: true, errorThresh: 0.03 });

let test_predict = [];
dataset['test']['input'].forEach((item) => {
  test_predict.push(Math.floor(net.run(item)[0] + 0.5));
});

console.log(test_predict);

let testChartsData = [];
for (let i = 0; i < dataset['test']['input'].length; i++) {
  testChartsData.push({
    input: dataset['test']['input'][i],
    output: test_predict[i],
  })
}

const ctxTest = document.getElementById("testDataChart").getContext('2d');
const scatterChartTest = new Chart(ctxTest, {
  type: "scatter",
  data: {
    datasets: generateChartsData(testChartsData),
  },
  options: {
    responsive: true,
  }
});

document.getElementById("network").innerHTML = brain.utilities.toSVG(
  net,
  svg_config
);
</script>

</html>