save the model & prevent the classifier from automatically becoming undefined

[nhammad]

→ Step 1: Describe the issue 📝

After I train the model and click on the test button, I see the prediction. However, if I click on the Test button again, my React app throws an error because property addImage or "classify" cannot be found on classifier, which is undefined now. I believe this is because once I run the prediction part, the model gets deleted? Because the classifier is now undefined. How can I modify it such that I can repeatedly click on the Test button and obtain new predictions each time.

I tried the save() function but apparently it only downloads the model and not save it for the app.

→ Step 2: Screenshots or Relevant Documentation 🖼

export const Video: React.FC<ComponentProps> = (props: ComponentProps) => {
    const [prediction, setPrediction] = useState<string>();

    let capture: p5Types.Element;
    let classifier: any;
    const setup = (p5: p5Types, canvasParentRef: Element) => {
        capture = p5.createCapture(p5.VIDEO).parent(canvasParentRef);
        const featureExtractor = ml5.featureExtractor('MobileNet', modelReady);
        classifier = featureExtractor.classification(capture, videoReady);
    }

    const draw = (p5: p5Types) => {
    }
    function gotResult() {
        classifier.classify(capture, (err: any, result: any) => {
            setPrediction(result[0].label);
        });
    }

    function train() {
        classifier.train((lossValue: any) => {
            console.log('Loss is', lossValue);
        });
        //classifier.save();
    }

    return (<div><Sketch setup={setup} draw={draw} className="sketch" />
        <div className="button">
            <Button variant="contained" color="primary" onClick={() => classifier.addImage('first')}>First</Button>
            <Button variant="contained" color="primary" onClick={() => classifier.addImage('second')}>Second</Button>
        </div>
        <div className="secondbutton">
            <Button variant="contained" color="primary" onClick={() => train()}>Train!</Button>
            <Button variant="contained" color="primary" onClick={() => gotResult()}>Test!</Button>
            <br />
            <span>Prediction: {prediction}</span>
        </div>
    </div>)
        ;
};

The exact error it throws is:

Video.tsx:48 Uncaught TypeError: Cannot read property 'classify' of undefined

Other relevant information, if applicable

→ Describe your setup 🦄

Here's some helpful information about my setup...

• Using ml5.js with React.js and Typescript

[nhammad]

Codesandbox: https://codesandbox.io/s/hardcore-solomon-zb34l?file=/src/Component.tsx

I believe the problem is occurring because I am setting states inside the function gotResults.

[nhammad]

Can anyone please take a look at this @bomanimc @shiffman