diff --git a/content/tracks/index.json b/content/tracks/index.json index 2a87335fc..5c097ca8e 100644 --- a/content/tracks/index.json +++ b/content/tracks/index.json @@ -27,6 +27,7 @@ "transformations-in-p5", "games", "web-sockets-and-p5js", - "webgl" + "webgl", + "archive" ] } diff --git a/content/tracks/main-tracks/ml5js-beginners-guide/index.json b/content/tracks/main-tracks/ml5js-beginners-guide/index.json index 528cfa057..a679a3afd 100644 --- a/content/tracks/main-tracks/ml5js-beginners-guide/index.json +++ b/content/tracks/main-tracks/ml5js-beginners-guide/index.json @@ -11,8 +11,7 @@ { "title": "Classification", "videos": [ - "ml5/1-classification/1-image-classification", - "ml5/1-classification/2-webcam-classification", + "ml5/1-classification/image-classification", "ml5/1-classification/3-object-detection", "ml5/9-doodleNet/1-doodleNet" ] diff --git a/content/tracks/side-tracks/archive/index.json b/content/tracks/side-tracks/archive/index.json new file mode 100644 index 000000000..9ef225e3e --- /dev/null +++ b/content/tracks/side-tracks/archive/index.json @@ -0,0 +1,5 @@ +{ + "title": "Archived Videos", + "description": "Folder for archived videos", + "videos": ["archive/1-image-classification", "archive/2-webcam-classification"] +} diff --git a/content/videos/ml5/1-classification/1-image-classification/index.json b/content/videos/archive/1-image-classification/index.json similarity index 83% rename from content/videos/ml5/1-classification/1-image-classification/index.json rename to content/videos/archive/1-image-classification/index.json index e85e1c6a3..e0096ec17 100644 --- a/content/videos/ml5/1-classification/1-image-classification/index.json +++ b/content/videos/archive/1-image-classification/index.json @@ -1,6 +1,6 @@ { "title": "Image Classification with MobileNet", - "description": "In this video, I use the \"pre-trained\" MobileNet model to classify the content of an image.", + "description": "This video covers the Image Classifier in ml5.js v0.12.2 which has now been deprecated. There is a new version of the video in the Beginner's Guide to Machine Learning in JavaScript track.", "videoNumber": "1.1", "videoId": "yNkAuWz5lnY", "date": "2018-08-01", @@ -53,6 +53,12 @@ { "title": "Videos", "links": [ + { + "icon": "💻", + "title": "Image Classification", + "url": "/tracks/ml5js-beginners-guide/ml5/1-classification/image-classification", + "description": "New video about image classification with updated syntax." + }, { "icon": "🚂", "title": "Workflow", diff --git a/content/videos/ml5/1-classification/2-webcam-classification/index.json b/content/videos/archive/2-webcam-classification/index.json similarity index 80% rename from content/videos/ml5/1-classification/2-webcam-classification/index.json rename to content/videos/archive/2-webcam-classification/index.json index 0e1f12c9b..0119b90c2 100644 --- a/content/videos/ml5/1-classification/2-webcam-classification/index.json +++ b/content/videos/archive/2-webcam-classification/index.json @@ -1,6 +1,6 @@ { "title": "Webcam Image Classification", - "description": "In this video, I discuss image classification with MobileNet using real-time video.", + "description": "This video covers image classifier with MobileNet using real-time video in ml5.js v0.12.2 which has now been deprecated. There is a new version of the video in the Beginner's Guide to Machine Learning in JavaScript track.", "videoNumber": "1.2", "videoId": "D9BoBSkLvFo", "date": "2018-08-02", @@ -28,6 +28,12 @@ { "title": "References", "links": [ + { + "icon": "💻", + "title": "Image Classification", + "url": "/tracks/ml5js-beginners-guide/ml5/1-classification/image-classification", + "description": "New video about image classification with updated syntax." + }, { "icon": "💻", "title": "ml5.js", diff --git a/content/videos/ml5/1-classification/image-classification/images/conf.png b/content/videos/ml5/1-classification/image-classification/images/conf.png new file mode 100644 index 000000000..1701a4f50 Binary files /dev/null and b/content/videos/ml5/1-classification/image-classification/images/conf.png differ diff --git a/content/videos/ml5/1-classification/image-classification/images/drag.png b/content/videos/ml5/1-classification/image-classification/images/drag.png new file mode 100644 index 000000000..c02029926 Binary files /dev/null and b/content/videos/ml5/1-classification/image-classification/images/drag.png differ diff --git a/content/videos/ml5/1-classification/image-classification/images/simple.png b/content/videos/ml5/1-classification/image-classification/images/simple.png new file mode 100644 index 000000000..f3e21a16a Binary files /dev/null and b/content/videos/ml5/1-classification/image-classification/images/simple.png differ diff --git a/content/videos/ml5/1-classification/image-classification/images/tint.png b/content/videos/ml5/1-classification/image-classification/images/tint.png new file mode 100644 index 000000000..e77661920 Binary files /dev/null and b/content/videos/ml5/1-classification/image-classification/images/tint.png differ diff --git a/content/videos/ml5/1-classification/image-classification/images/webcam.png b/content/videos/ml5/1-classification/image-classification/images/webcam.png new file mode 100644 index 000000000..a628dcbc8 Binary files /dev/null and b/content/videos/ml5/1-classification/image-classification/images/webcam.png differ diff --git a/content/videos/ml5/1-classification/image-classification/index.json b/content/videos/ml5/1-classification/image-classification/index.json new file mode 100644 index 000000000..3dab0d85b --- /dev/null +++ b/content/videos/ml5/1-classification/image-classification/index.json @@ -0,0 +1,114 @@ +{ + "title": "Image Classification", + "description": "This video covers image classification in ml5.js 1.0. I demonstrate both the default MobileNet model as well as how to train your own classifier with transfer leraning and teachable machine.", + "videoId": "pbjR20eTLVs", + "date": "2024-10-06", + "languages": ["ml5.js", "JavaScript"], + "topics": ["machine learning (ML)", "webcam", "image classification", "ml5.js", "MobileNet"], + "canContribute": true, + "timestamps": [ + { "time": "0:00", "title": "Introduction" }, + { "time": "2:30", "title": "What is MobileNet?" }, + { "time": "4:53", "title": "What is ImageNet?" }, + { "time": "10:32", "title": "ml5.js Classifier Code!" }, + { "time": "21:19", "title": "Incorporating Live Video" }, + { "time": "24:51", "title": "Training your own model" } + ], + "codeExamples": [ + { + "title": "Image Classification", + "description": "Simple image classification using MobileNet.", + "image": "simple.png", + "urls": { "p5": "https://editor.p5js.org/codingtrain/sketches/A2W-0ayI5" } + }, + { + "title": "Image Classification with Webcam", + "description": "Continuous image classification with webcam feed.", + "image": "webcam.png", + "urls": { "p5": "https://editor.p5js.org/codingtrain/sketches/r9LjJqaw6" } + }, + { + "title": "Image Classification - Drag and Drop", + "description": "Drag and drop an image in the canvas to classify it.", + "image": "drag.png", + "urls": { "p5": "https://editor.p5js.org/codingtrain/sketches/v1sAlvSHR" } + }, + { + "title": "Image Classification - Display label and confidence", + "description": "Displays the label and confidence of the classification.", + "image": "conf.png", + "urls": { "p5": "https://editor.p5js.org/codingtrain/sketches/7zA6_MlIo" } + }, + { + "title": "Image Classification - Tint", + "description": "Tints the image with a color based on the confidence.", + "image": "tint.png", + "urls": { "p5": "https://editor.p5js.org/codingtrain/sketches/uHN5htRpC" } + } + ], + "groupLinks": [ + { + "title": "References", + "links": [ + { + "icon": "💻", + "title": "ml5.js", + "url": "https://ml5js.org/", + "description": "ml5 page with documentation and supporting material." + }, + { + "icon": "🏫", + "title": "Introduction to Machine Learning for the Arts", + "url": "https://github.com/ml5js/Intro-ML-Arts-IMA-F24", + "description": "Syllabus for ITP IMA course on Machine Learning." + }, + { + "icon": "📄", + "title": "MobileNets: Efficient Convolutional Neural Networks for Mobile Vision Applications", + "url": "https://arxiv.org/abs/1704.04861", + "description": "Original paper on MobileNet." + }, + { + "icon": "💻", + "title": "Tensorflow.js port of MobileNet", + "url": "https://github.com/tensorflow/tfjs-models/tree/master/mobilenet", + "description": "Repository with the Tensorflow.js MobileNet model." + }, + { + "icon": "💻", + "title": "Image-Net", + "url": "https://image-net.org/", + "description": "ImageNet is an image database organized according to the WordNet hierarchy." + }, + { + "icon": "🎤", + "title": "How we teach computers to understand pictures", + "url": "https://www.youtube.com/watch?v=40riCqvRoMs", + "description": "Fei-Fei Li's TED talk on ImageNet." + }, + { + "icon": "🌐", + "title": "Excavating AI: The Politics of Images in Machine Learning Training Sets", + "url": "https://excavating.ai/", + "description": "About bias in ImageNet data set." + }, + { + "icon": "🖼️", + "title": "ml5 ImageClassifier", + "url": "https://docs.ml5js.org/#/reference/image-classifier", + "description": "ml5.js documentation on ImageClassifier." + }, + { + "icon": "📱", + "title": "Teachable Machine", + "url": "https://teachablemachine.withgoogle.com/", + "description": "Google's Teachable Machine." + } + ] + } + ], + "credits": [ + { "title": "Editing", "name": "Mathieu Blanchette" }, + { "title": "Animations", "name": "Jason Heglund" } + ] +} diff --git a/content/videos/ml5/8-convolutional-neural-network/1-pixels-as-input/index.json b/content/videos/ml5/8-convolutional-neural-network/1-pixels-as-input/index.json index c383ad8c1..6063584eb 100644 --- a/content/videos/ml5/8-convolutional-neural-network/1-pixels-as-input/index.json +++ b/content/videos/ml5/8-convolutional-neural-network/1-pixels-as-input/index.json @@ -95,7 +95,7 @@ { "icon": "🚂", "title": "Image Classification with MobileNet", - "url": "/tracks/ml5js-beginners-guide/ml5/1-classification/1-image-classification", + "url": "/tracks/ml5js-beginners-guide/ml5/1-classification/image-classification", "description": "In this video, I use the \"pre-trained\" MobileNet model to classify the content of an image." }, { diff --git a/content/videos/ml5/8-convolutional-neural-network/2-architecture-of-cnn/index.json b/content/videos/ml5/8-convolutional-neural-network/2-architecture-of-cnn/index.json index 8be86bb79..f39bd89f2 100644 --- a/content/videos/ml5/8-convolutional-neural-network/2-architecture-of-cnn/index.json +++ b/content/videos/ml5/8-convolutional-neural-network/2-architecture-of-cnn/index.json @@ -77,7 +77,7 @@ { "icon": "🚂", "title": "Image Classification with MobileNet", - "url": "/tracks/ml5js-beginners-guide/ml5/1-classification/1-image-classification", + "url": "/tracks/ml5js-beginners-guide/ml5/1-classification/image-classification", "description": "In this video, I use the \"pre-trained\" MobileNet model to classify the content of an image." }, {