Skip to content

Latest commit

 

History

History
461 lines (392 loc) · 9.71 KB

m05.md

File metadata and controls

461 lines (392 loc) · 9.71 KB

KNN Classification

  • 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>KNN Classification</h1>
    <script src="sketch.js"></script>
  </body>
</html>
  • sketch.js (0)
let features;
let video;

function setup() {
    createCanvas(640, 480);
    video = createCapture(VIDEO);
    video.hide();
    features = ml5.featureExtractor('MobileNet', modelReady);
}

function modelReady() {
    console.log('Model is ready!');
}
  
function mousePressed() {
    let logits = features.infer(video);
    console.log(logits);  // TensorFlow.js 
    // logits.print();
    // console.log(logits.dataSync());
} 

function draw() {
    image(video, 0, 0);
}
  • sketch.js (1)
let features;
let video;
let knn;

function setup() {
    createCanvas(640, 480);
    video = createCapture(VIDEO);
    video.hide();
    features = ml5.featureExtractor('MobileNet', modelReady);
    knn = ml5.KNNClassifier();
}

function modelReady() {
    console.log('Model is ready!');
}
  
function keyPressed() {
    let logits = features.infer(video);
    // build your own database for 'left' and 'right'
    if (key == 'l') {
      knn.addExample(logits, 'left');
    } else if (key == 'r') {
      knn.addExample(logits, 'right');
    }
}

function draw() {
  image(video, 0, 0);
}
  • sketch.js (2)
let features;
let video;
let knn;

function setup() {
    createCanvas(640, 480);
    video = createCapture(VIDEO);
    video.size(640, 480);
    video.hide();
    features = ml5.featureExtractor('MobileNet', modelReady);
    knn = ml5.KNNClassifier();
}

function modelReady() {
    console.log('Model is ready!');
}

function keyPressed() {
    let logits = features.infer(video);
    // build your own database for 'left' and 'right'
    if (key == 'l') {
      knn.addExample(logits, 'left');
      console.log('left');
    } else if (key == 'r') {
      knn.addExample(logits, 'right');
      console.log('right');
    }
} 
  
function mousePressed() {
    if (knn.getNumLabels() > 0) {
      let logits = features.infer(video);
      knn.classify(logits, gotResults);  // callback
    }
}
  
function gotResults(error, results) {
    if (error) {
      console.error(error);
    } else {
      console.log(results);
    }
}

function draw() {
    image(video, 0, 0);
}
  • sketch.js (3)
let features;
let video;
let knn;
let labelP;
let ready = false;

function setup() {
    createCanvas(640, 480);
    video = createCapture(VIDEO);
    video.hide();
    features = ml5.featureExtractor('MobileNet', modelReady);
    knn = ml5.KNNClassifier();
    labelP = createP('We need training data');
    labelP.style('font-size', '32pt');
}

function modelReady() {
    console.log('Model is ready!');
}
  
function keyPressed() {
    let logits = features.infer(video);
    if (key == 'l') {
        knn.addExample(logits, 'left');
        console.log('left');
    } else if (key == 'r') {
        knn.addExample(logits, 'right');
        console.log('right');
    } else if (key == 'u') {
        knn.addExample(logits, 'up');
        console.log('up');
    } else if (key == 'd') {
        knn.addExample(logits, 'down');
        console.log('down');
    }
} 

function goClassify() {
    let logits = features.infer(video);
    // anonymous function in JavaScript
    knn.classify(logits, function (error, results) {
        if (error) {
            console.error(error);
        } else {
            labelP.html(results.label);
            goClassify();
        }
    });
}

function draw() {
    image(video, 0, 0);
    if (!ready && knn.getNumLabels() > 0) {
        ready = true;
        goClassify();
    }
}
  • sketch.js (4)
let features;
let video;
let knn;
let labelP;
let ready = false;

function setup() {
    createCanvas(640, 480);
    video = createCapture(VIDEO);
    video.hide();
    features = ml5.featureExtractor('MobileNet', modelReady);
    knn = ml5.KNNClassifier();
    labelP = createP('We need training data');
    labelP.style('font-size', '32pt');
}

function modelReady() {
    console.log('Model is ready!');
}

function keyPressed() {
    let logits = features.infer(video);
    if (key == 'l') {
        knn.addExample(logits, 'left');
        console.log('left');
    } else if (key == 'r') {
        knn.addExample(logits, 'right');
        console.log('right');
    } else if (key == 'u') {
        knn.addExample(logits, 'up');
        console.log('up');
    } else if (key == 'd') {
        knn.addExample(logits, 'down');
        console.log('down');
    } else if (key == 's') {
        knn.save('model.json');  // see Download folder
    }
} 
 
function goClassify() {
  let logits = features.infer(video);
  knn.classify(logits, function (error, results) {
    if (error) {
      console.error(error);
    } else {
      labelP.html(results.label);
      goClassify();
    }
  });
}

function draw() {
  image(video, 0, 0);
  if (!ready && knn.getNumLabels() > 0) {
    ready = true;
    goClassify();
  }
}
  • sketch.js (5)
let features;
let video;
let knn;
let labelP;
let ready = false;
let label = 'nothing';

function setup() {
    createCanvas(640, 480);
    video = createCapture(VIDEO);
    video.hide();
    features = ml5.featureExtractor('MobileNet', modelReady);
    labelP = createP('We need training data');
    labelP.style('font-size', '32pt');
}

function modelReady() {
    console.log('Model is ready!');
    knn = ml5.KNNClassifier();
    knn.load('model.json', function() {
      console.log('model.json is loaded');
      goClassify();
    });
}
  
function keyPressed() {
    let logits = features.infer(video);
    if (key == 'l') {
        knn.addExample(logits, 'left');
        console.log('left');
    } else if (key == 'r') {
        knn.addExample(logits, 'right');
        console.log('right');
    } else if (key == 'u') {
        knn.addExample(logits, 'up');
        console.log('up');
    } else if (key == 'd') {
        knn.addExample(logits, 'down');
        console.log('down');
    } else if (key == 's') {
        knn.save('model.json');  
    }
} 
 
function goClassify() {
    let logits = features.infer(video);
    knn.classify(logits, function (error, results) {
        if (error) {
            console.error(error);
        } else {
            if (results.label == '0') {
                label = 'left';
            } else if (results.label == '1') {
                label = 'right';
            } else if (results.label == '2') {
                label = 'up';
            } else if (results.label == '3') {
                label = 'down';
            }
            labelP.html(label);
            goClassify();
        }
    });
}

function draw() {
    image(video, 0, 0);
}
  • sketch.js (6)
let features;
let video;
let knn;
let labelP;
let ready = false;
let label = '';
let x;
let y;


function setup() {
    createCanvas(640, 480);
    video = createCapture(VIDEO);
    video.style('transform', 'scale(-1,1)'); // mirror
    // video.hide();
    features = ml5.featureExtractor('MobileNet', modelReady);
    labelP = createP('We need training data');
    labelP.style('font-size', '32pt');
    x = width / 2;
    y = height / 2;
}

function modelReady() {
    console.log('Model is ready!');
    knn = ml5.KNNClassifier();
    knn.load('model.json', function() {
        console.log('model.json is loaded');
        goClassify();
    });
}


function keyPressed() {
    let logits = features.infer(video);
    if (key == 'l') {
        knn.addExample(logits, 'left');
        console.log('left');
    } else if (key == 'r') {
        knn.addExample(logits, 'right');
        console.log('right');
    } else if (key == 'u') {
        knn.addExample(logits, 'up');
        console.log('up');
    } else if (key == 'd') {
        knn.addExample(logits, 'down');
        console.log('down');
    } else if (key == ' ') {  // Space
        knn.addExample(logits, 'stay');  // we can add 'stay' data in real-time
        console.log('stay');  
    } else if (key == 's') {
        knn.save('model.json');  
    }
} 
 
function goClassify() {
  let logits = features.infer(video);
  knn.classify(logits, function (error, results) {
    if (error) {
      console.error(error);
    } else {
        if (results.label == '0') {
            label = 'left';
        } else if (results.label == '1') {
            label = 'right';
        } else if (results.label == '2') {
            label = 'up';
        } else if (results.label == '3') {
            label = 'down';
        }
        labelP.html(label);
        goClassify();
    }
  });
}

function draw() {
  background(0);
  fill(255);
  circle(x, y, 36);
  if (label == 'left') {
    x--; 
  } else if (label == 'right') {
    x++;
  } else if (label == 'up') {
    y--;
  } else if (label == 'down') {
    y++;
  }   
  x = constrain(x, 0, width);
  y = constrain(y, 0, height);
}