Skip to content

Commit a9bbfaa

Browse files
shiffmanshiffman
committed
adding transformers.js video
1 parent a14c6b4 commit a9bbfaa

File tree

5 files changed

+138
-1
lines changed

5 files changed

+138
-1
lines changed

‎content/tracks/index.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,15 @@
66
"ml5js-beginners-guide",
77
"the-nature-of-code-2",
88
"learning-processing",
9+
"p5js-2.0",
10+
"transformers-js",
911
"2018-workflow",
1012
"algorithmic-botany",
1113
"coding-in-the-cabana",
1214
"coding-together-apple-ii",
1315
"robot-controllers",
1416
"discord-bots",
1517
"p5-tips-and-tricks",
16-
"p5js-2.0",
1718
"transformations-in-p5",
1819
"livestreams",
1920
"neural-networks",

‎content/tracks/side-tracks/transformers-js/index.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"title": "Transformers.js",
3+
"description": "A series exploring machine learning in JavaScript using Transformers.js! Learn how to run models hosted on Hugging Face directly in the browser with p5.js.",
4+
"videos": ["transformers-js/introduction"]
5+
}

‎content/videos/transformers-js/introduction/images/language.png‎

31.9 KB
Loading

‎content/videos/transformers-js/introduction/images/sentiment.png‎

43.2 KB
Loading

‎content/videos/transformers-js/introduction/index.json‎

Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
{
2+
"title": "Introduction to Transformers.js",
3+
"description": "Welcome to a new series all about working with machine learning models in JavaScript in the browser using the Transformers.js library! In this introduction, I cover what Transformers.js is, how to load it into a p5.js sketch, explain the pipeline API, and demonstrate sentiment analysis and language detection examples.",
4+
"videoNumber": "1",
5+
"videoId": "KR61bXsPlLU",
6+
"nebulaSlug": "codingtrain-what-is-transformersjs",
7+
"date": "2025-10-24",
8+
"languages": ["JavaScript", "p5.js", "Transformers.js"],
9+
"topics": [
10+
"machine learning",
11+
"Transformers.js",
12+
"Hugging Face",
13+
"sentiment analysis",
14+
"language detection",
15+
"natural language processing",
16+
"pipeline API",
17+
"async/await",
18+
"ES6 modules"
19+
],
20+
"canContribute": true,
21+
"timestamps": [
22+
{ "time": "0:00", "title": "Welcome!" },
23+
{ "time": "2:01", "title": "Why JavaScript and not Python?" },
24+
{ "time": "3:06", "title": "What is Hugging Face?" },
25+
{ "time": "4:03", "title": "Transformers.js Documentation" },
26+
{ "time": "4:18", "title": "Pipeline API" },
27+
{ "time": "5:05", "title": "import syntax and ES6 modules" },
28+
{ "time": "8:38", "title": "Object Destructuring" },
29+
{ "time": "11:33", "title": "Creating a Pipeline" },
30+
{ "time": "13:18", "title": "Sentiment Analysis Example" },
31+
{ "time": "18:56", "title": "Tasks and Models on Hugging Face" },
32+
{ "time": "20:20", "title": "Language Detection Example" },
33+
{ "time": "22:29", "title": "Device: WebGPU, CPU and more" },
34+
{ "time": "24:32", "title": "Data Types and Quantization" },
35+
{ "time": "28:00", "title": "See you next time!" }
36+
],
37+
"codeExamples": [
38+
{
39+
"title": "Sentiment Analysis",
40+
"description": "Sentiment analysis with color-coded results using Transformers.js pipeline.",
41+
"image": "sentiment.png",
42+
"urls": {
43+
"p5": "https://editor.p5js.org/codingtrain/sketches/JaXqVSHxM"
44+
}
45+
},
46+
{
47+
"title": "Language Detection",
48+
"description": "Detect the language of input text using a text classification model.",
49+
"image": "language.png",
50+
"urls": {
51+
"p5": "https://editor.p5js.org/codingtrain/sketches/VmS9V6-0o"
52+
}
53+
}
54+
],
55+
"groupLinks": [
56+
{
57+
"title": "References",
58+
"links": [
59+
{
60+
"icon": "💻",
61+
"title": "Transformers.js Documentation",
62+
"url": "https://huggingface.co/docs/transformers.js",
63+
"description": "Official documentation for the Transformers.js library."
64+
},
65+
{
66+
"icon": "🤗",
67+
"title": "Hugging Face",
68+
"url": "https://huggingface.co/",
69+
"description": "Platform for sharing machine learning models, datasets, and spaces."
70+
},
71+
{
72+
"icon": "🤗",
73+
"title": "Hugging Face Models",
74+
"url": "https://huggingface.co/models?library=transformers.js",
75+
"description": "Browse all models compatible with Transformers.js."
76+
},
77+
{
78+
"icon": "🤗",
79+
"title": "Xenova on Hugging Face",
80+
"url": "https://huggingface.co/Xenova",
81+
"description": "Creator of Transformers.js."
82+
},
83+
{
84+
"icon": "🤗",
85+
"title": "Whisper Web",
86+
"url": "https://huggingface.co/spaces/Xenova/whisper-web",
87+
"description": "Speech recognition demo using Whisper model in the browser."
88+
},
89+
{
90+
"icon": "💻",
91+
"title": "p5.js 2.0 reference",
92+
"url": "https://beta.p5js.org/",
93+
"description": "p5.js version 2.0 with support for async/await."
94+
},
95+
{
96+
"icon": "📓",
97+
"title": "ES6 Modules",
98+
"url": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules",
99+
"description": "MDN documentation on JavaScript modules and import/export."
100+
},
101+
{
102+
"icon": "📓",
103+
"title": "Quantization",
104+
"url": "https://huggingface.co/docs/optimum/concept_guides/quantization",
105+
"description": "Understanding model quantization and precision levels."
106+
}
107+
]
108+
},
109+
{
110+
"title": "Videos",
111+
"links": [
112+
{
113+
"icon": "🚂",
114+
"title": "ml5.js Beginner's Guide",
115+
"url": "/tracks/ml5js-beginners-guide",
116+
"description": "My series on machine learning with ml5.js and TensorFlow.js."
117+
},
118+
{
119+
"icon": "🚂",
120+
"title": "p5.js 2.0: async and await",
121+
"url": "/tracks/p5js-2.0/p5js-2.0/async-await",
122+
"description": "Learn about asynchronous programming in p5.js 2.0."
123+
}
124+
]
125+
}
126+
],
127+
"credits": [
128+
{ "title": "Editing", "name": "Mathieu Blanchette" },
129+
{ "title": "Animations", "name": "Jason Heglund" }
130+
]
131+
}

0 commit comments

Comments
 (0)