Train Your Own Neural Network

3Blue1Brown - 신경망이란 무엇인가? | 1장.딥러닝에 관하여
Piano key frequencies
Statistical classification
Regression analysis

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>ml5.js 연습</title>
    <meta charset="utf-8">
    <script src="https://cdn.jsdelivr.net/npm/p5@1/lib/p5.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/p5@1/lib/addons/p5.sound.min.js"></script>
    <script src="https://unpkg.com/ml5@latest/dist/ml5.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/IDMNYU/p5.js-speech@0.0.3/lib/p5.speech.js"></script>
  </head>

  <body>
    <h1>Train Your Own Neural Network</h1>
    <script src="sketch.js"></script>
  </body>
</html>

Classification

sketch.js (0)

let model;

function setup() {
  createCanvas(400, 400);
  let options = {
    inputs: ['x', 'y'],
    outputs: ['label'],
    task: 'classification'
  };
  model = ml5.neuralNetwork(options);
  background(250);
}

function mousePressed() {
  stroke(0);
  noFill();
  circle(mouseX, mouseY, 24);

  fill(0);
  noStroke();
  textAlign(CENTER, CENTER);
  text('C', mouseX, mouseY);
}

sketch.js (1)

let model;
let targetLabel = 'C';

function setup() {
  createCanvas(400, 400);
  let options = {
    inputs: ['x', 'y'],
    outputs: ['label'],
    task: 'classification'
  };
  model = ml5.neuralNetwork(options);
  background(250);
}

function keyPressed() {
  targetLabel = key.toUpperCase();
}

function mousePressed() {
  stroke(0);
  noFill();
  circle(mouseX, mouseY, 24);

  fill(0);
  noStroke();
  textAlign(CENTER, CENTER);
  text(targetLabel, mouseX, mouseY);
}

sketch.js (2)

let model;
let targetLabel = 'C';

function setup() {
  createCanvas(400, 400);
  let options = {
    inputs: ['x', 'y'],
    outputs: ['label'],
    task: 'classification'
  };
  model = ml5.neuralNetwork(options);
  background(250);
}

function keyPressed() {
  targetLabel = key.toUpperCase();
}

function mousePressed() {
  let inputs = {
    x: mouseX,
    y: mouseY
  };

  let target = {
    label: targetLabel
  }

  model.addData(inputs, target);

  stroke(0);
  noFill();
  circle(mouseX, mouseY, 24);

  fill(0);
  noStroke();
  textAlign(CENTER, CENTER);
  text(targetLabel, mouseX, mouseY);
}

sketch.js (3)

let model;
let targetLabel = 'C';

function setup() {
  createCanvas(400, 400);
  let options = {
    inputs: ['x', 'y'],
    outputs: ['label'],
    task: 'classification',
    debug: 'true'
  };
  model = ml5.neuralNetwork(options);
  background(250);
}

function keyPressed() {
  if (key == 't') {
    console.log('starting training');
    model.normalizeData();
    let options = {
      epochs: 100
    }
    model.train(options, whileTraining, finishedTraining);
  } else {
    targetLabel = key.toUpperCase();
  }
}

function whileTraining(epoch, loss) {
  console.log(epoch);
}

function finishedTraining() {
  console.log('finished training');
}

function mousePressed() {
  let inputs = {
    x: mouseX,
    y: mouseY
  };

  let target = {
    label: targetLabel
  }

  model.addData(inputs, target);

  stroke(0);
  noFill();
  circle(mouseX, mouseY, 24);

  fill(0);
  noStroke();
  textAlign(CENTER, CENTER);
  text(targetLabel, mouseX, mouseY);
}

sketch.js (4)

let model;
let targetLabel = 'C';
let state = 'collection';

function setup() {
  createCanvas(400, 400);
  let options = {
    inputs: ['x', 'y'],
    outputs: ['label'],
    task: 'classification',
    debug: 'true'
  };
  model = ml5.neuralNetwork(options);
  background(250);
}

function keyPressed() {
  if (key == 't') {
    state = 'training';
    console.log('starting training');
    model.normalizeData();
    let options = {
      epochs: 200
    };
    model.train(options, whileTraining, finishedTraining);
  } else {
    targetLabel = key.toUpperCase();
  }
}

function whileTraining(epoch, loss) {
  console.log(epoch);
}

function finishedTraining() {
  console.log('finished training');
  state = 'prediction';
}

function mousePressed() {
  let inputs = {
    x: mouseX,
    y: mouseY
  };

  if (state == 'collection') {
    let target = {
      label: targetLabel
    };
    model.addData(inputs, target);  
    stroke(0);
    noFill();
    circle(mouseX, mouseY, 24);

    fill(0);
    noStroke();
    textAlign(CENTER, CENTER);
    text(targetLabel, mouseX, mouseY);
  } else if (state == 'prediction') {
    model.classify(inputs, gotResults);
  }
}

function gotResults(error, results) {
  if (error) {
    console.log(error);
    return;
  }
  console.log(results);
}

sketch.js (5)

let model;
let targetLabel = 'C';
let state = 'collection';

function setup() {
  createCanvas(400, 400);
  let options = {
    inputs: ['x', 'y'],
    outputs: ['label'],
    task: 'classification',
    debug: 'true'
  };
  model = ml5.neuralNetwork(options);
  background(250);
}

function keyPressed() {
  if (key == 't') {
    state = 'training';
    console.log('starting training');
    model.normalizeData();
    let options = {
      epochs: 200
    };
    model.train(options, whileTraining, finishedTraining);
  } else {
    targetLabel = key.toUpperCase();
  }
}

function whileTraining(epoch, loss) {
  console.log(epoch);
}

function finishedTraining() {
  console.log('finished training');
  state = 'prediction';
}

function mousePressed() {
  let inputs = {
    x: mouseX,
    y: mouseY
  };

  if (state == 'collection') {
    let target = {
      label: targetLabel
    };
    model.addData(inputs, target);  
    stroke(0);
    noFill();
    circle(mouseX, mouseY, 24);
    fill(0);
    noStroke();
    textAlign(CENTER, CENTER);
    text(targetLabel, mouseX, mouseY);
  } else if (state == 'prediction') {
    model.classify(inputs, gotResults);
  }
}

function gotResults(error, results) {
  if (error) {
    console.log(error);
    return;
  }
  console.log(results);
  stroke(0);
  fill(0, 0, 255, 100);
  circle(mouseX, mouseY, 24);
  fill(0);
  noStroke();
  textAlign(CENTER, CENTER);
  text(results[0].label, mouseX, mouseY);
}

sketch.js (6)

let model;
let targetLabel = 'C';
let state = 'collection';
let env;
let wave;
let notes = {
  C: 261.6256,  // 도
  D: 293.6648,  // 레
  E: 329.6276,  // 미
  F: 347.2282,  // 파
  G: 391.9954,  // 솔
  A: 440.0000,  // 라
  B: 493.8833   // 시
};

function setup() {
  createCanvas(400, 400);

  env = new p5.Envelope();  // sound envelope
  env.setADSR(0.05, 0.1, 0.5, 1);
  env.setRange(1.2, 0);

  wave = new p5.Oscillator();
  wave.setType('sine');
  wave.start();
  wave.freq(440);
  wave.amp(env);

  let options = {
    inputs: ['x', 'y'],
    outputs: ['label'],
    task: 'classification',
    debug: 'true'
  };
  model = ml5.neuralNetwork(options);
  background(250);
}

function keyPressed() {
  if (key == 't') {
    state = 'training';
    console.log('starting training');
    model.normalizeData();
    let options = {
      epochs: 200
    };
    model.train(options, whileTraining, finishedTraining);
  } else {
    targetLabel = key.toUpperCase();
  }
}

function whileTraining(epoch, loss) {
  console.log(epoch);
}

function finishedTraining() {
  console.log('finished training');
  state = 'prediction';
}

function mousePressed() {
  let inputs = {
    x: mouseX,
    y: mouseY
  };

  if (state == 'collection') {
    let target = {
      label: targetLabel
    };
    model.addData(inputs, target);  

    stroke(0);
    noFill();
    circle(mouseX, mouseY, 24);
    fill(0);
    noStroke();
    textAlign(CENTER, CENTER);
    text(targetLabel, mouseX, mouseY);

    wave.freq(notes[targetLabel]);
    env.play();

  } else if (state == 'prediction') {
    model.classify(inputs, gotResults);
  }
}

function gotResults(error, results) {
  if (error) {
    console.log(error);
    return;
  }
  console.log(results);
  stroke(0);
  fill(0, 0, 255, 100);
  circle(mouseX, mouseY, 24);
  fill(0);
  noStroke();
  textAlign(CENTER, CENTER);
  let label = results[0].label;
  text(label, mouseX, mouseY);
  
  wave.freq(notes[label]);
  env.play();
}

sketch.js (7)

let model;
let targetLabel = 'C';
let state = 'collection';
let env;
let wave;
let notes = {
  C: 261.6256,  // 도
  D: 293.6648,  // 레
  E: 329.6276,  // 미
  F: 347.2282,  // 파
  G: 391.9954,  // 솔
  A: 440.0000,  // 라
  B: 493.8833   // 시
};

function setup() {
  createCanvas(400, 400);
  env = new p5.Envelope();  // sound envelope
  env.setADSR(0.05, 0.1, 0.5, 1);
  env.setRange(1.2, 0);
  wave = new p5.Oscillator();
  wave.setType('sine');
  wave.start();
  wave.freq(440);
  wave.amp(env);
  let options = {
    inputs: ['x', 'y'],
    outputs: ['label'],
    task: 'classification',
    debug: 'true'
  };
  model = ml5.neuralNetwork(options);
  background(250);
}

function keyPressed() {
  if (key == 't') {
    state = 'training';
    console.log('starting training');
    model.normalizeData();
    let options = {
      epochs: 200
    };
    model.train(options, whileTraining, finishedTraining);
  } else if (key == 's') {
    model.saveData('mouse-notes');  // save data to a file 'mouse-notes.json' at Download folder
  } else {
    targetLabel = key.toUpperCase();
  }
}

function whileTraining(epoch, loss) {
  console.log(epoch);
}

function finishedTraining() {
  console.log('finished training');
  state = 'prediction';
}

function mousePressed() {
  let inputs = {
    x: mouseX,
    y: mouseY
  };
  if (state == 'collection') {
    let target = {
      label: targetLabel
    };
    model.addData(inputs, target);  
    stroke(0);
    noFill();
    circle(mouseX, mouseY, 24);
    fill(0);
    noStroke();
    textAlign(CENTER, CENTER);
    text(targetLabel, mouseX, mouseY);
    wave.freq(notes[targetLabel]);
    env.play();
  } else if (state == 'prediction') {
    model.classify(inputs, gotResults);
  }
}

function gotResults(error, results) {
  if (error) {
    console.log(error);
    return;
  }
  console.log(results);
  stroke(0);
  fill(0, 0, 255, 100);
  circle(mouseX, mouseY, 24);
  fill(0);
  noStroke();
  textAlign(CENTER, CENTER);
  let label = results[0].label;
  text(label, mouseX, mouseY);
  wave.freq(notes[label]);
  env.play();
}

sketch.js (8)

let model;
let targetLabel = 'C';
let state = 'collection';
let env;
let wave;
let notes = {
  C: 261.6256,  // 도
  D: 293.6648,  // 레
  E: 329.6276,  // 미
  F: 347.2282,  // 파
  G: 391.9954,  // 솔
  A: 440.0000,  // 라
  B: 493.8833   // 시
};

function setup() {
  createCanvas(400, 400);
  env = new p5.Envelope();  // sound envelope
  env.setADSR(0.05, 0.1, 0.5, 1);
  env.setRange(1.2, 0);
  wave = new p5.Oscillator();
  wave.setType('sine');
  wave.start();
  wave.freq(440);
  wave.amp(env);
  let options = {
    inputs: ['x', 'y'],
    outputs: ['label'],
    task: 'classification',
    debug: 'true',
    learningRate: 0.5  // the smaller value is more accuate but slower
  };
  model = ml5.neuralNetwork(options);
  model.loadData('mouse-notes.json');
  background(250);
}

function keyPressed() {
  if (key == 't') {
    state = 'training';
    console.log('starting training');
    model.normalizeData();
    let options = {
      epochs: 200
    };
    model.train(options, whileTraining, finishedTraining);
  } else if (key == 's') {
    model.saveData('mouse-notes');
  } else {
    targetLabel = key.toUpperCase();
  }
}

function whileTraining(epoch, loss) {
  console.log(epoch);
}

function finishedTraining() {
  console.log('finished training');
  state = 'prediction';
}

function mousePressed() {
  let inputs = {
    x: mouseX,
    y: mouseY
  };
  if (state == 'collection') {
    let target = {
      label: targetLabel
    };
    model.addData(inputs, target);  
    stroke(0);
    noFill();
    circle(mouseX, mouseY, 24);
    fill(0);
    noStroke();
    textAlign(CENTER, CENTER);
    text(targetLabel, mouseX, mouseY);
    wave.freq(notes[targetLabel]);
    env.play();
  } else if (state == 'prediction') {
    model.classify(inputs, gotResults);
  }
}

function gotResults(error, results) {
  if (error) {
    console.log(error);
    return;
  }
  console.log(results);
  stroke(0);
  fill(0, 0, 255, 100);
  circle(mouseX, mouseY, 24);
  fill(0);
  noStroke();
  textAlign(CENTER, CENTER);
  let label = results[0].label;
  text(label, mouseX, mouseY);
  wave.freq(notes[label]);
  env.play();
}

sketch.js (9)

let model;
let targetLabel = 'C';
let state = 'collection';
let env;
let wave;
let notes = {
  C: 261.6256,  // 도
  D: 293.6648,  // 레
  E: 329.6276,  // 미
  F: 347.2282,  // 파
  G: 391.9954,  // 솔
  A: 440.0000,  // 라
  B: 493.8833   // 시
};

function setup() {
  createCanvas(400, 400);
  env = new p5.Envelope();  // sound envelope
  env.setADSR(0.05, 0.1, 0.5, 1);
  env.setRange(1.2, 0);
  wave = new p5.Oscillator();
  wave.setType('sine');
  wave.start();
  wave.freq(440);
  wave.amp(env);
  let options = {
    inputs: ['x', 'y'],
    outputs: ['label'],
    task: 'classification',
    debug: 'true',
    learningRate: 0.5
  };
  model = ml5.neuralNetwork(options);
  model.loadData('mouse-notes.json', dataLoaded);
  background(250);
}

function dataLoaded() {
  console.log('data loaded'); 
  console.log(model.neuralNetworkData.data.raw);
  let data = model.neuralNetworkData.data.raw;
  for (let i = 0; i < data.length; i++) {
    let inputs = data[i].xs;
    let target = data[i].ys;
    stroke(0);
    noFill();
    circle(inputs.x, inputs.y, 24);
    fill(0);
    noStroke();
    textAlign(CENTER, CENTER);
    text(target.label, inputs.x, inputs.y);
  }
}  

function keyPressed() {
  if (key == 't') {
    state = 'training';
    console.log('starting training');
    model.normalizeData();
    let options = {
      epochs: 200
    };
    model.train(options, whileTraining, finishedTraining);
  } else if (key == 's') {
    model.saveData('mouse-notes');
  } else {
    targetLabel = key.toUpperCase();
  }
}

function whileTraining(epoch, loss) {
  console.log(epoch);
}

function finishedTraining() {
  console.log('finished training');
  state = 'prediction';
}

function mousePressed() {
  let inputs = {
    x: mouseX,
    y: mouseY
  };
  if (state == 'collection') {
    let target = {
      label: targetLabel
    };
    model.addData(inputs, target);  
    stroke(0);
    noFill();
    circle(mouseX, mouseY, 24);
    fill(0);
    noStroke();
    textAlign(CENTER, CENTER);
    text(targetLabel, mouseX, mouseY);
    wave.freq(notes[targetLabel]);
    env.play();
  } else if (state == 'prediction') {
    model.classify(inputs, gotResults);
  }
}

function gotResults(error, results) {
  if (error) {
    console.log(error);
    return;
  }
  console.log(results);
  stroke(0);
  fill(0, 0, 255, 100);
  circle(mouseX, mouseY, 24);
  fill(0);
  noStroke();
  textAlign(CENTER, CENTER);
  let label = results[0].label;
  text(label, mouseX, mouseY);
  wave.freq(notes[label]);
  env.play();
}

sketch.js (10)

let model;
let targetLabel = 'C';
let state = 'collection';
let env;
let wave;
let notes = {
  C: 261.6256,  // 도
  D: 293.6648,  // 레
  E: 329.6276,  // 미
  F: 347.2282,  // 파
  G: 391.9954,  // 솔
  A: 440.0000,  // 라
  B: 493.8833   // 시
};

function setup() {
  createCanvas(400, 400);
  env = new p5.Envelope();  // sound envelope
  env.setADSR(0.05, 0.1, 0.5, 1);
  env.setRange(1.2, 0);
  wave = new p5.Oscillator();
  wave.setType('sine');
  wave.start();
  wave.freq(440);
  wave.amp(env);
  let options = {
    inputs: ['x', 'y'],
    outputs: ['label'],
    task: 'classification',
    debug: 'true',
    learningRate: 0.5
  };
  model = ml5.neuralNetwork(options);
  model.loadData('mouse-notes.json', dataLoaded);
  background(250);
}

function dataLoaded() {
  console.log('data loaded'); 
  console.log(model.neuralNetworkData.data.raw);
  let data = model.neuralNetworkData.data.raw;
  for (let i = 0; i < data.length; i++) {
    let inputs = data[i].xs;
    let target = data[i].ys;
    stroke(0);
    noFill();
    circle(inputs.x, inputs.y, 24);
    fill(0);
    noStroke();
    textAlign(CENTER, CENTER);
    text(target.label, inputs.x, inputs.y);
  }

  state = 'training';
  console.log('starting training');
  model.normalizeData();
  let options = {
    epochs: 200
  };
  model.train(options, whileTraining, finishedTraining);
}  

function keyPressed() {
  if (key == 't') {
    state = 'training';
    console.log('starting training');
    model.normalizeData();
    let options = {
      epochs: 200
    };
    model.train(options, whileTraining, finishedTraining);
  } else if (key == 's') {
    model.saveData('mouse-notes');
  } else {
    targetLabel = key.toUpperCase();
  }
}

function whileTraining(epoch, loss) {
  console.log(epoch);
}

function finishedTraining() {
  console.log('finished training');
  state = 'prediction';
}

function mousePressed() {
  let inputs = {
    x: mouseX,
    y: mouseY
  };
  if (state == 'collection') {
    let target = {
      label: targetLabel
    };
    model.addData(inputs, target);  
    stroke(0);
    noFill();
    circle(mouseX, mouseY, 24);
    fill(0);
    noStroke();
    textAlign(CENTER, CENTER);
    text(targetLabel, mouseX, mouseY);
    wave.freq(notes[targetLabel]);
    env.play();
  } else if (state == 'prediction') {
    model.classify(inputs, gotResults);
  }
}

function gotResults(error, results) {
  if (error) {
    console.log(error);
    return;
  }
  console.log(results);
  stroke(0);
  fill(0, 0, 255, 100);
  circle(mouseX, mouseY, 24);
  fill(0);
  noStroke();
  textAlign(CENTER, CENTER);
  let label = results[0].label;
  text(label, mouseX, mouseY);
  wave.freq(notes[label]);
  env.play();
}

sketch.js (11)

let model;
let targetLabel = 'C';
let state = 'collection';
let env;
let wave;
let notes = {
  C: 261.6256,  // 도
  D: 293.6648,  // 레
  E: 329.6276,  // 미
  F: 347.2282,  // 파
  G: 391.9954,  // 솔
  A: 440.0000,  // 라
  B: 493.8833   // 시
};

function setup() {
  createCanvas(400, 400);
  env = new p5.Envelope();  // sound envelope
  env.setADSR(0.05, 0.1, 0.5, 1);
  env.setRange(1.2, 0);
  wave = new p5.Oscillator();
  wave.setType('sine');
  wave.start();
  wave.freq(440);
  wave.amp(env);
  let options = {
    inputs: ['x', 'y'],
    outputs: ['label'],
    task: 'classification',
    debug: 'true',
    learningRate: 0.5
  };
  model = ml5.neuralNetwork(options);
  // model.loadData('mouse-notes.json', dataLoaded);

  const modelInfo = {
    model: 'model/model.json',
    metadata: 'model/model_meta.json',
    weights: 'model/model.weights.bin',
  };
  model.load(modelInfo, modelLoaded);

  background(250);
}

function modelLoaded() {
  console.log('model loaded');
  state = 'prediction';
}

function dataLoaded() {
  console.log('data loaded'); 
  console.log(model.neuralNetworkData.data.raw);
  let data = model.neuralNetworkData.data.raw;
  for (let i = 0; i < data.length; i++) {
    let inputs = data[i].xs;
    let target = data[i].ys;
    stroke(0);
    noFill();
    circle(inputs.x, inputs.y, 24);
    fill(0);
    noStroke();
    textAlign(CENTER, CENTER);
    text(target.label, inputs.x, inputs.y);
  }

  state = 'training';
  console.log('starting training');
  model.normalizeData();
  let options = {
    epochs: 200
  };
  model.train(options, whileTraining, finishedTraining);
}  

function keyPressed() {
  if (key == 't') {
    state = 'training';
    console.log('starting training');
    model.normalizeData();
    let options = {
      epochs: 200
    };
    model.train(options, whileTraining, finishedTraining);
  } else if (key == 's') {
    model.saveData('mouse-notes');
  } else if (key == 'm') {
    model.save();  // save the trained model (3 files): 'model_meta.json', 'model.json', 'model.weights.bin'
  } else {
    targetLabel = key.toUpperCase();
  }
}

function whileTraining(epoch, loss) {
  console.log(epoch);
}

function finishedTraining() {
  console.log('finished training');
  state = 'prediction';
}

function mousePressed() {
  let inputs = {
    x: mouseX,
    y: mouseY
  };
  if (state == 'collection') {
    let target = {
      label: targetLabel
    };
    model.addData(inputs, target);  
    stroke(0);
    noFill();
    circle(mouseX, mouseY, 24);
    fill(0);
    noStroke();
    textAlign(CENTER, CENTER);
    text(targetLabel, mouseX, mouseY);
    wave.freq(notes[targetLabel]);
    env.play();
  } else if (state == 'prediction') {
    model.classify(inputs, gotResults);
  }
}

function gotResults(error, results) {
  if (error) {
    console.log(error);
    return;
  }
  console.log(results);
  stroke(0);
  fill(0, 0, 255, 100);
  circle(mouseX, mouseY, 24);
  fill(0);
  noStroke();
  textAlign(CENTER, CENTER);
  let label = results[0].label;
  text(label, mouseX, mouseY);
  wave.freq(notes[label]);
  env.play();
}

sketch.js (12)

let model;
let targetLabel = 'C';
let state = 'collection';
let env;
let wave;
let notes = {
  C: 261.6256,  // 도
  D: 293.6648,  // 레
  E: 329.6276,  // 미
  F: 347.2282,  // 파
  G: 391.9954,  // 솔
  A: 440.0000,  // 라
  B: 493.8833   // 시
};

function setup() {
  createCanvas(400, 400);
  env = new p5.Envelope();  // sound envelope
  env.setADSR(0.05, 0.1, 0.5, 1);
  env.setRange(1.2, 0);
  wave = new p5.Oscillator();
  wave.setType('sine');
  wave.start();
  wave.freq(440);
  wave.amp(env);
  let options = {
    inputs: ['x', 'y'],
    outputs: ['label'],
    task: 'classification',
    debug: 'true',
    learningRate: 0.5
  };
  model = ml5.neuralNetwork(options);
  model.loadData('mouse-notes.json', dataLoaded);

  const modelInfo = {
    model: 'model/model.json',
    metadata: 'model/model_meta.json',
    weights: 'model/model.weights.bin',
  };
  model.load(modelInfo, modelLoaded);

  background(250);
}

function modelLoaded() {
  console.log('model loaded');
  state = 'prediction';
   
}

function dataLoaded() {
  console.log('data loaded'); 
  console.log(model.neuralNetworkData.data.raw);
  let data = model.neuralNetworkData.data.raw;
  for (let i = 0; i < data.length; i++) {
    let inputs = data[i].xs;
    let target = data[i].ys;
    stroke(0);
    noFill();
    circle(inputs.x, inputs.y, 24);
    fill(0);
    noStroke();
    textAlign(CENTER, CENTER);
    text(target.label, inputs.x, inputs.y);
  }

  // state = 'training';
  // console.log('starting training');
  // model.normalizeData();
  // let options = {
  //   epochs: 200
  // };
  // model.train(options, whileTraining, finishedTraining);
}  

function keyPressed() {
  if (key == 't') {
    state = 'training';
    console.log('starting training');
    model.normalizeData();
    let options = {
      epochs: 200
    };
    model.train(options, whileTraining, finishedTraining);
  } else if (key == 's') {
    model.saveData('mouse-notes');
  } else if (key == 'm') {
    model.save();  // save the trained model (3 files): 'model_meta.json', 'model.json', 'model.weights.bin'
  } else {
    targetLabel = key.toUpperCase();
  }
}

function whileTraining(epoch, loss) {
  console.log(epoch);
}

function finishedTraining() {
  console.log('finished training');
  state = 'prediction';
}

function mousePressed() {
  let inputs = {
    x: mouseX,
    y: mouseY
  };
  if (state == 'collection') {
    let target = {
      label: targetLabel
    };
    model.addData(inputs, target);  
    stroke(0);
    noFill();
    circle(mouseX, mouseY, 24);
    fill(0);
    noStroke();
    textAlign(CENTER, CENTER);
    text(targetLabel, mouseX, mouseY);
    wave.freq(notes[targetLabel]);
    env.play();
  } else if (state == 'prediction') {
    model.classify(inputs, gotResults);
  }
}

function gotResults(error, results) {
  if (error) {
    console.log(error);
    return;
  }
  console.log(results);
  stroke(0);
  fill(0, 0, 255, 100);
  circle(mouseX, mouseY, 24);
  fill(0);
  noStroke();
  textAlign(CENTER, CENTER);
  let label = results[0].label;
  text(label, mouseX, mouseY);
  wave.freq(notes[label]);
  env.play();
}

Regression

sketch.js (13)

let model;
let targetLabel = 'C';
let state = 'collection';
let env;
let wave;
let notes = {
  C: 261.6256,  // 도
  D: 293.6648,  // 레
  E: 329.6276,  // 미
  F: 347.2282,  // 파
  G: 391.9954,  // 솔
  A: 440.0000,  // 라
  B: 493.8833   // 시
};

function setup() {
  createCanvas(400, 400);

  env = new p5.Envelope();  // sound envelope
  env.setADSR(0.05, 0.1, 0.5, 1);
  env.setRange(1.2, 0);

  wave = new p5.Oscillator();
  wave.setType('sine');
  wave.start();
  wave.freq(440);
  wave.amp(env);

  let options = {
    inputs: ['x', 'y'],
    outputs: ['frequency'],
    task: 'regression',
    debug: 'true'
  };
  model = ml5.neuralNetwork(options);
  background(250);
}

function keyPressed() {
  if (key == 't') {
    state = 'training';
    console.log('starting training');
    model.normalizeData();
    let options = {
      epochs: 200
    };
    model.train(options, whileTraining, finishedTraining);
  } else {
    targetLabel = key.toUpperCase();
  }
}

function whileTraining(epoch, loss) {
  console.log(epoch);
}

function finishedTraining() {
  console.log('finished training');
  state = 'prediction';
}

function mousePressed() {
  let inputs = {
    x: mouseX,
    y: mouseY
  };

  if (state == 'collection') {
    let targetFrequency = notes[targetLabel];
    let target = {
      frequency: targetFrequency
    };
    model.addData(inputs, target);  

    stroke(0);
    noFill();
    circle(mouseX, mouseY, 24);
    fill(0);
    noStroke();
    textAlign(CENTER, CENTER);
    text(targetLabel, mouseX, mouseY);

    wave.freq(targetFrequency);
    env.play();

  } else if (state == 'prediction') {
    model.predict(inputs, gotResults);
  }
}

function gotResults(error, results) {
  if (error) {
    console.log(error);
    return;
  }
  console.log(results);
  stroke(0);
  fill(0, 0, 255, 100);
  circle(mouseX, mouseY, 24);
  fill(0);
  noStroke();
  textAlign(CENTER, CENTER);
  text(floor(results[0].value), mouseX, mouseY);
  
  wave.freq(results[0].value);
  env.play();
}

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

m06.md

m06.md

Train Your Own Neural Network

Classification

Regression

Files

m06.md

Latest commit

History

m06.md

File metadata and controls

Train Your Own Neural Network

Classification

Regression