Week 1 2023 Spring

Homework:

• Video:
  • Intro to ml5
  • Image classifier with ml5 and MobileNet on image, and webcam
• Coding:
  • Build on top of the image classifier example(demo) from the coding session. Publish it on your blog / GitHub. Add your homework link to the list below.
  • Or try any of the ml5js examples, make something based on any of these examples.

Help:

• ml4w-homework: How to push code to a Github Repo and host sketch on Github
• Video: How to host p5 sketch on GitHub pages

Resources:

• ml5 image classifier webcam on p5 Web Editor Full screen example, example with code

• All image classifier demos from week 1

  • Image classifier with webcam plain javascript (This demo works on Mobile Phone. Please use Safari browser on ios(iPhone), or Chrome browser on an android phone), code
  • Image classifier with speech output using MobileNet and p5.speech. See code Here.
  • Image classifier with translated restults and speech output using MobileNet, Google Translate API and p5.speech (To run this example, you need to replace the google API key in the sketch.js). See code here
  • Webcam Scavenger Hunt Game using MobileNet, p5.js, p5.speech. See code here.

• Object Detection

  • Object Detection-COCO-SSD-Image
  • Object Detection-COCO-SSD-Webcam
  • Object Detection-YOLO-Image
  • Object Detection-YOLO-Webcam

• ml5.js examples

• ml5 Playful Examples

• tf.js examples

• Core Concept of TensorFlow.js

• Google AI experiments

• A Beginner's Guide to Machine Learning with ml5.js, introduction to tf.js 6.1 - 6.5

Inspirations about image classifier

• Emojis Scavenger Hunt
• Thing Translator
• Giorgio Cam
• Safty glasses on, shop machine running

Some ideas

You can -

• change the sketch background, show an image/gif, play a song when MobileNet recognizes a certain object.
• use p5.speech library to say the results from the mobile
• use Google Translate to translate the results to another language
• make an emoji webcam scavenger hunt game
• connect p5 sketch to an Arduino board through serial communication, when MobileNet recognizes a certain object, light up a LED.

Questions?

• add your question here

Add your name / link to your assignment below

• Your name, [Project name](Project Link), Project Description
• Kevin, [Face Mesh Test] (https://editor.p5js.org/Inkreas/sketches/SJeAMyTwc), I'm trying to create a bounding box around the lips of face mesh because I want to measure the height and width of the bounding box, but I can't get the bounding box to compare between the points in the for loop.
• Ding, whistle
• Austen, I know I am always correct, Blog
• Dror, Sophisticated Machine or Pure Luck?, https://www.drormargalit.com/post/sophisticated-machine-or-pure-luck
• Long, what exactly is it?
• Nancy, https://www.notion.so/Week-2-c62b4424f55841ea94b3c3500e1a3c00
• Keyi, NOT THIS ONE
• Athena, ml5
• Shauna, Hide and Seek
• Sim, Teach a Visitor, Blog
• Rui,OMG Identifier
• Yizhi, I see