Skip to content

Commit 5ddabc3

Browse files
dipamsenkfahn22shiffman
authored
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 <65121394+kfahn22@users.noreply.github.com> Co-authored-by: Daniel Shiffman <daniel.shiffman@gmail.com>
1 parent 46106b7 commit 5ddabc3

File tree

13 files changed

+138
-7
lines changed

13 files changed

+138
-7
lines changed

β€Žcontent/tracks/index.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@
2727
"transformations-in-p5",
2828
"games",
2929
"web-sockets-and-p5js",
30-
"webgl"
30+
"webgl",
31+
"archive"
3132
]
3233
}

β€Žcontent/tracks/main-tracks/ml5js-beginners-guide/index.json

+1-2
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,7 @@
1111
{
1212
"title": "Classification",
1313
"videos": [
14-
"ml5/1-classification/1-image-classification",
15-
"ml5/1-classification/2-webcam-classification",
14+
"ml5/1-classification/image-classification",
1615
"ml5/1-classification/3-object-detection",
1716
"ml5/9-doodleNet/1-doodleNet"
1817
]
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"title": "Archived Videos",
3+
"description": "Folder for archived videos",
4+
"videos": ["archive/1-image-classification", "archive/2-webcam-classification"]
5+
}

β€Žcontent/videos/ml5/1-classification/1-image-classification/index.json renamed to β€Žcontent/videos/archive/1-image-classification/index.json

+7-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"title": "Image Classification with MobileNet",
3-
"description": "In this video, I use the \"pre-trained\" MobileNet model to classify the content of an image.",
3+
"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.",
44
"videoNumber": "1.1",
55
"videoId": "yNkAuWz5lnY",
66
"date": "2018-08-01",
@@ -53,6 +53,12 @@
5353
{
5454
"title": "Videos",
5555
"links": [
56+
{
57+
"icon": "πŸ’»",
58+
"title": "Image Classification",
59+
"url": "/tracks/ml5js-beginners-guide/ml5/1-classification/image-classification",
60+
"description": "New video about image classification with updated syntax."
61+
},
5662
{
5763
"icon": "πŸš‚",
5864
"title": "Workflow",

β€Žcontent/videos/ml5/1-classification/2-webcam-classification/index.json renamed to β€Žcontent/videos/archive/2-webcam-classification/index.json

+7-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"title": "Webcam Image Classification",
3-
"description": "In this video, I discuss image classification with MobileNet using real-time video.",
3+
"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.",
44
"videoNumber": "1.2",
55
"videoId": "D9BoBSkLvFo",
66
"date": "2018-08-02",
@@ -28,6 +28,12 @@
2828
{
2929
"title": "References",
3030
"links": [
31+
{
32+
"icon": "πŸ’»",
33+
"title": "Image Classification",
34+
"url": "/tracks/ml5js-beginners-guide/ml5/1-classification/image-classification",
35+
"description": "New video about image classification with updated syntax."
36+
},
3137
{
3238
"icon": "πŸ’»",
3339
"title": "ml5.js",
Loading
Loading
Loading
Loading
Loading
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
{
2+
"title": "Image Classification",
3+
"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.",
4+
"videoId": "pbjR20eTLVs",
5+
"date": "2024-10-06",
6+
"languages": ["ml5.js", "JavaScript"],
7+
"topics": ["machine learning (ML)", "webcam", "image classification", "ml5.js", "MobileNet"],
8+
"canContribute": true,
9+
"timestamps": [
10+
{ "time": "0:00", "title": "Introduction" },
11+
{ "time": "2:30", "title": "What is MobileNet?" },
12+
{ "time": "4:53", "title": "What is ImageNet?" },
13+
{ "time": "10:32", "title": "ml5.js Classifier Code!" },
14+
{ "time": "21:19", "title": "Incorporating Live Video" },
15+
{ "time": "24:51", "title": "Training your own model" }
16+
],
17+
"codeExamples": [
18+
{
19+
"title": "Image Classification",
20+
"description": "Simple image classification using MobileNet.",
21+
"image": "simple.png",
22+
"urls": { "p5": "https://editor.p5js.org/codingtrain/sketches/A2W-0ayI5" }
23+
},
24+
{
25+
"title": "Image Classification with Webcam",
26+
"description": "Continuous image classification with webcam feed.",
27+
"image": "webcam.png",
28+
"urls": { "p5": "https://editor.p5js.org/codingtrain/sketches/r9LjJqaw6" }
29+
},
30+
{
31+
"title": "Image Classification - Drag and Drop",
32+
"description": "Drag and drop an image in the canvas to classify it.",
33+
"image": "drag.png",
34+
"urls": { "p5": "https://editor.p5js.org/codingtrain/sketches/v1sAlvSHR" }
35+
},
36+
{
37+
"title": "Image Classification - Display label and confidence",
38+
"description": "Displays the label and confidence of the classification.",
39+
"image": "conf.png",
40+
"urls": { "p5": "https://editor.p5js.org/codingtrain/sketches/7zA6_MlIo" }
41+
},
42+
{
43+
"title": "Image Classification - Tint",
44+
"description": "Tints the image with a color based on the confidence.",
45+
"image": "tint.png",
46+
"urls": { "p5": "https://editor.p5js.org/codingtrain/sketches/uHN5htRpC" }
47+
}
48+
],
49+
"groupLinks": [
50+
{
51+
"title": "References",
52+
"links": [
53+
{
54+
"icon": "πŸ’»",
55+
"title": "ml5.js",
56+
"url": "https://ml5js.org/",
57+
"description": "ml5 page with documentation and supporting material."
58+
},
59+
{
60+
"icon": "🏫",
61+
"title": "Introduction to Machine Learning for the Arts",
62+
"url": "https://github.com/ml5js/Intro-ML-Arts-IMA-F24",
63+
"description": "Syllabus for ITP IMA course on Machine Learning."
64+
},
65+
{
66+
"icon": "πŸ“„",
67+
"title": "MobileNets: Efficient Convolutional Neural Networks for Mobile Vision Applications",
68+
"url": "https://arxiv.org/abs/1704.04861",
69+
"description": "Original paper on MobileNet."
70+
},
71+
{
72+
"icon": "πŸ’»",
73+
"title": "Tensorflow.js port of MobileNet",
74+
"url": "https://github.com/tensorflow/tfjs-models/tree/master/mobilenet",
75+
"description": "Repository with the Tensorflow.js MobileNet model."
76+
},
77+
{
78+
"icon": "πŸ’»",
79+
"title": "Image-Net",
80+
"url": "https://image-net.org/",
81+
"description": "ImageNet is an image database organized according to the WordNet hierarchy."
82+
},
83+
{
84+
"icon": "🎀",
85+
"title": "How we teach computers to understand pictures",
86+
"url": "https://www.youtube.com/watch?v=40riCqvRoMs",
87+
"description": "Fei-Fei Li's TED talk on ImageNet."
88+
},
89+
{
90+
"icon": "🌐",
91+
"title": "Excavating AI: The Politics of Images in Machine Learning Training Sets",
92+
"url": "https://excavating.ai/",
93+
"description": "About bias in ImageNet data set."
94+
},
95+
{
96+
"icon": "πŸ–ΌοΈ",
97+
"title": "ml5 ImageClassifier",
98+
"url": "https://docs.ml5js.org/#/reference/image-classifier",
99+
"description": "ml5.js documentation on ImageClassifier."
100+
},
101+
{
102+
"icon": "πŸ“±",
103+
"title": "Teachable Machine",
104+
"url": "https://teachablemachine.withgoogle.com/",
105+
"description": "Google's Teachable Machine."
106+
}
107+
]
108+
}
109+
],
110+
"credits": [
111+
{ "title": "Editing", "name": "Mathieu Blanchette" },
112+
{ "title": "Animations", "name": "Jason Heglund" }
113+
]
114+
}

β€Žcontent/videos/ml5/8-convolutional-neural-network/1-pixels-as-input/index.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,7 @@
9595
{
9696
"icon": "πŸš‚",
9797
"title": "Image Classification with MobileNet",
98-
"url": "/tracks/ml5js-beginners-guide/ml5/1-classification/1-image-classification",
98+
"url": "/tracks/ml5js-beginners-guide/ml5/1-classification/image-classification",
9999
"description": "In this video, I use the \"pre-trained\" MobileNet model to classify the content of an image."
100100
},
101101
{

β€Žcontent/videos/ml5/8-convolutional-neural-network/2-architecture-of-cnn/index.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@
7777
{
7878
"icon": "πŸš‚",
7979
"title": "Image Classification with MobileNet",
80-
"url": "/tracks/ml5js-beginners-guide/ml5/1-classification/1-image-classification",
80+
"url": "/tracks/ml5js-beginners-guide/ml5/1-classification/image-classification",
8181
"description": "In this video, I use the \"pre-trained\" MobileNet model to classify the content of an image."
8282
},
8383
{

0 commit comments

Comments
Β (0)