add new ml5 imageclassifier video (#1731)

* add new ml5 imageclassifier video

* fix typo

* update links and track pages

* Update index.json

Add a description.

* updating new classification video info

---------

Co-authored-by: Kathy <[email protected]>
Co-authored-by: Daniel Shiffman <[email protected]>

content/tracks/index.json

@@ -27,6 +27,7 @@
     "transformations-in-p5",
     "games",
     "web-sockets-and-p5js",
-    "webgl"
+    "webgl",
+    "archive"
   ]
 }

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"
       ]

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"]
+}

content/videos/ml5/1-classification/1-image-classification/index.json → 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",

content/videos/ml5/1-classification/2-webcam-classification/index.json → 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",

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" }
+  ]
+}

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."
         },
         {

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."
         },
         {