Skip to content

Latest commit

 

History

History
397 lines (338 loc) · 7.96 KB

m02.md

File metadata and controls

397 lines (338 loc) · 7.96 KB

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

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

// P5.js main functions
function setup() {
    createCanvas(640, 480);
    background(0);
    video = createCapture(VIDEO);
    mobilenet = ml5.imageClassifier('MobileNet', video, modelReady);
}
  • sketch.js (1)
let mobilenet;
let video;

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

// P5.js main functions
function setup() {
    createCanvas(640, 480);
    background(0);
    video = createCapture(VIDEO);
    video.hide();
    mobilenet = ml5.imageClassifier('MobileNet', video, modelReady);
}

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

// callback functions
function modelReady() {
    console.log('Model is ready!');
    mobilenet.classify(gotResults);
}

function gotResults(error, results) { 
    if (error) {
        console.log(error);
    } else {
        console.log(results);
        let label = results[0].label;
        let confidence = results[0].confidence;
        fill(0);
        textSize(64);
        text(label, 10, height - 100);
        createP(label);
        createP(confidence);
    }
}

// P5.js main functions
function setup() {
    createCanvas(640, 480);
    background(0);
    video = createCapture(VIDEO);
    video.hide();
    mobilenet = ml5.imageClassifier('MobileNet', video, modelReady);
}

function draw() {
    image(video, 0, 0);
}
  • sketch.js (3)
let mobilenet;
let video;
let label;

// callback functions
function modelReady() {
    console.log('Model is ready!');
    mobilenet.classify(gotResults);
}

function gotResults(error, results) { 
    if (error) {
        console.log(error);
    } else {
        console.log(results);
        label = results[0].label;
        mobilenet.classify(gotResults);  // infinite loop between 2 callback functions
    }
}

// P5.js main functions
function setup() {
    createCanvas(640, 480);
    background(0);
    video = createCapture(VIDEO);
    video.hide();
    mobilenet = ml5.imageClassifier('MobileNet', video, modelReady);
}

function draw() {
    image(video, 0, 0);
    fill(0, 255, 255);
    textSize(32);
    text(label, 10, height - 100);
}
  • sketch.js (4)
let mobilenet;
let video;
let label;

// callback functions
function modelReady() {
    console.log('Model is ready!');
    mobilenet.classify(gotResults);
}

function gotResults(error, results) { 
    if (error) {
        console.log(error);
    } else {
        // console.log(results);
        label = results[0].label;
        mobilenet.classify(gotResults);  // infinite loop between 2 callback functions
    }
}

// P5.js main functions
function setup() {
    createCanvas(640, 550);
    video = createCapture(VIDEO);
    video.hide();
    mobilenet = ml5.imageClassifier('MobileNet', video, modelReady);
}

function draw() {
    background(0);
    image(video, 0, 0);
    fill(0, 255, 255);
    textSize(32);
    text(label, 10, height - 20);
}

-sketch.js (5) by.unkn

let mobilenet;
let video;
let label;
let speech;

function setup() {
    createCanvas(640, 550);
    video = createCapture(VIDEO);
    video.hide();
    mobilenet = ml5.imageClassifier('MobileNet', video, modelReady);
    speech = new p5.Speech();
}

function draw() {
    background(0);
    image(video, 0, 0);
    fill(0, 255, 255);
    textSize(32);
    text(label, 10, height - 20);
}

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

function gotResults(error, results) { 
    if (error) {
        console.log(error);
    } else {
        label = results[0].label;
        mobilenet.classify(gotResults);
        speech.setLang('en-US');
        speech.speak(`This would be ${label}`);
    }
}

-sketch.js (6) editing

let mobilenet;
let video;
let label;
let speech;
let button;
let saying;
let toggle;
let loop;
let p1;

function setup() {
    createCanvas(640, 550);
    video = createCapture(VIDEO);
    video.hide();
    mobilenet = ml5.imageClassifier('MobileNet', video, modelReady);
    speech = new p5.Speech();
    speech.setLang('en-US');
    button = createButton('click to calssify');
    button.position(width+100, height+66);
    button.mousePressed(classificationReady);
    saying = false;
    toggle = createButton('click to change mode');
    toggle.position(width+100, height+46);
    toggle.mousePressed(changeMode);
    loop = false;
    p1 = createP("");
    p1.style('font-size','25px');
    p1.position(width+100, height-26);
 }

function draw() {
    background(0);
    image(video, 0, 0);
    fill(0, 255, 255);
    textSize(32);
    text(label, 10, height - 20);
}

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

function classificationReady() {
    console.log('classification is ready!');
    mobilenet.classify(gotResults);
    if(loop == false && saying == true){
        saying = false;
    }
}

function changeMode(){

    if(loop == false){
        loop = !loop;
        console.log('Loop');
        p1.hide();
        p1 = createP("Looping");
        p1.style('font-size','25px');
        p1.position(width+100, height-26);
        p1.show();
      }else{
        loop = !loop;
        console.log('noLoop');
        p1.hide();
        p1 = createP("Not Looping");
        p1.style('font-size','25px');
        p1.position(width+100, height-26);
        p1.show();
      }
}

function gotResults(error, results) { 
    if (error) {
        console.log(error);
    } else {
        label = results[0].label;
        mobilenet.classify(gotResults);

        if(loop == false){
            if(saying == false){
                saying = true;
                speech.speak(`This would be ${label}`);
            }
        }else{
            if(saying == false){
                saying = true;
                speech.speak(`This would be ${label}`);
            }
            else{
                saying = false;
            }
        }
    }
}

-sketch.js (7) by Mike (이것으로 만족하자 ㅠㅠ)

let mobilenet;
let video;
let label;
let speech;
let button;
let saying;

function setup() {
    createCanvas(640, 550);
    video = createCapture(VIDEO);
    video.hide();
    mobilenet = ml5.imageClassifier('MobileNet', video, modelReady);
    speech = new p5.Speech();
    speech.setLang('en-US');
    button = createButton('click to calssify');
    button.position(width+100, height+66);
    button.mousePressed(classificationReady);
}

function draw() {
    background(0);
    image(video, 0, 0);
    fill(0, 255, 255);
    textSize(32);
    text(label, 10, height - 20);
}

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

function classificationReady() {
    console.log('classification is ready!');
    saying = true;
    mobilenet.classify(gotResults);
}

function gotResults(error, results) { 
    if (error) {
        console.log(error);
    } else {
        label = results[0].label;
        if (saying) {
            speech.speak(`This would be ${label}`);
            saying = false;
        }
        mobilenet.classify(gotResults);
    }
}