Remove P5 from Neural Network example code

[KokoDoko]

Problem Statement

In my humble opinion it doesn't make sense to include P5js, a canvas, and the setup and draw functions in the example code for creating a ML5 Neural Network: https://docs.ml5js.org/#/reference/neural-network

This seems to add unneeded boilerplate code to creating a simple neural network, isn't this confusing for new learners?

Proposed Solution

Remove P5 boilerplate code from the neural network examples, the example could be as simple as:

// create ml5 neural network
ml5.setBackend("webgl");
const nn = ml5.neuralNetwork({ task: 'classification', debug: true })

// add data
nn.addData([18,9.2,8.1,2], {label:"cat"})
nn.addData([20.1,17,15.5,5], {label:"dog"})

// training
nn.normalizeData()
nn.train({ epochs: 10 }, () => classify()) 

// classifying
async function classify(){    
    const results = await nn.classify([29,11,10,3])
    console.log(results)
}

Alternative Solutions

No response

Code of Conduct

• [x] I agree to follow this project's Code of Conduct

[gohai]

Thank you for your suggestion, @KokoDoko.

From my understanding: we currently implicitly assume that our users have prior knowledge and experience with p5.js. This wasn't always the case, e.g. the old version of the library came with variants of each example that used vanilla JS exclusively. But in reorganizing the repo for the 1.0 rewrite, it seemed like p5.js was the more relevant context the library will be used in, and perhaps people also dreaded synchronizing changes between related versions of examples.

So while the setup and draw might not do much in that particular example, I'd still think that having it will make the sketch more familiar to users coming from p5.js.

[gohai]

Closing, since this hasn't found resonance from the ml5 team so far.

[KokoDoko]

Thanks for the reply. Just wondering: don't you have users that go directly to the ml5.js website without any prior knowledge of P5?

If P5 is now a prerequisite of ML5, shouldn't that be communicated more clearly? For example "ML5 is a Machine Learning library intended for use with P5.JS".

[shiffman]

Hi @KokoDoko, thanks for continuing this conversation and raising these thoughtful points!

To clarify:

• It's definitely possible to use ml5.js without p5.js, p5.js is not strictly a requirement.
• We decided to prioritize p5.js as almost all ml5.js users are learners already familiar with that environment, and we currently lack the resources to maintain parallel vanilla JavaScript examples. When we had them previously on the website it caused a lot of confusion.
• In my experience programmers working with vanilla JavaScript or other frameworks prefer to work directly with TensorFlow.js.

That said, your point about clearly communicating this expectation on the ml5.js website is excellent! We're open to improving the documentation around this. If you'd like to contribute language or suggestions in a PR, we'd happily review it! Some ideas:

• note in website FAQ (cc @MOQN)
• wiki page on how to use ml5.js with native JS

Thanks again for your feedback!

[MOQN]

Thank you, @KokoDoko!

I agree with @gohai and @shiffman’s responses, and I believe they’ve clearly described the direction we’re taking. I also agree that experienced programmers tend to work directly with TensorFlow.js or MediaPipe rather than ml5.js.

If you could share more details about your experience and/or ideas using ml5.js without the p5.js prerequisite, including any confusion, redundancy, or suggestions for improvement, we’ll make sure to reflect it in the FAQ page. Please feel free to submit a PR or leave a comment here with your feedback!