ml5js / ml5-data-and-models-server

A repo to download and serve data and models locally allowing ml5 to run without a web connection
29 stars 13 forks source link

how to access the yolo models in my project #6

Open thirukumars opened 5 years ago

thirukumars commented 5 years ago

this is my code

import React, { Component , Fragment } from 'react'; // import ml5 from './ml5.min.js' import p5 from 'p5' import MyComponent from './MyComponent' import "bootstrap/dist/css/bootstrap.min.css"; import "p5/lib/addons/p5.dom"; import './object.css' let video; let yolo; var stop=false var no_of_times=0; // export let objects = []; var array=[];

export default class Detection extends Component { constructor() { super() this.stop = this.stop.bind(this) }

componentDidMount() {
    this.call()
}

call = () =>    this.sketch = new p5( p => {
    p.preload = function() {
        if(no_of_times === 0) {
            video = p.createCapture(p.VIDEO)
            video.parent('videoContainer')
            video.hide();
        }           
    }
    p.setup = function () {
        stop = false
        if(no_of_times === 0){
            p.createCanvas(600,440)
            //imitialize the webcam stream in a object
            video = p.createCapture(p.VIDEO)
            // p.background(100,0,100)
            video.parent('videoContainer')
            video.size(600,440) 
            // no_of_times++;
            video.hide();
            console.log("caught")
            yolo = ml5.YOLO(video, startDetecting)
        } else {
            p.createCanvas(0,0)
            //imitialize the webcam stream in a object
            video = p.createCapture(p.VIDEO)
            video.parent('videoContainer')
            video.size(600,440) 
            // no_of_times++;
            video.hide();
            yolo = ml5.YOLO(video, startDetecting)

        }
    };
    p.draw =  () => {
        // if(no_of_times===0)
        p.image(video,0,0);
        // p.noLoop();

        for(let i = 0;i < objects.length;i++){
            p.noStroke();
            p.fill(0, 0, 255);
            p.text(objects[i].label, objects[i].x * p.width, objects[i].y * p.height - 5);
            p.noFill();
            p.strokeWeight(4);
            p.stroke(0, 0, 255);
            p.rect(objects[i].x * p.width, objects[i].y * p.height, objects[i].w * p.width, objects[i].h * p.height);
        }
    };
    function startDetecting() {
        //status.html('Model loaded!');
        console.log('Model Ready');
        detect();
    };

    function detect() {
        yolo.detect(function(err, results) {
            if(results){
        objects = results;

        console.log(objects)
            } else{
                 console.log(err)
            }

        if(stop === false)
        detect();
        })
    }   

})

stop(){
    stop = true
    no_of_times++
}
Cedric-Van-Laere commented 5 years ago

Hello, what I did is go into the ml5.min.js and find the path they use to load the model. You'll probably have to change it so something like: http://localhost:5000/YOLO/model.json

undavide commented 5 years ago

According to the documentation for version 0.4.2 you are allowed to specify the path to the model json file this way:

const classifier = ml5.imageClassifier('path/to/custom/model.json', modelReady)
phuong74200 commented 4 years ago

const yolo = ml5.YOLO({modelUrl: 'http://localhost:5000/yolo/model.json'}, callback);