Add 188-voice-chatbot-WIP

content/pages/challenges/index.json

@@ -2,5 +2,5 @@
   "title": "Challenges",
   "description": "Ready to apply what you’ve learned in the Tracks? Try a Challenge! These one-off project videos build off concepts introduced in Tracks and may have prerequisites (listed on the challenge page itself).",
   "featuredText": "Featured Challenge:",
-  "featuredChallenge": "187-bayesian-text-classification"
+  "featuredChallenge": "188-voice-chatbot"
 }

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

@@ -1,5 +1,5 @@
 {
   "title": "Transformers.js",
   "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.",
-  "videos": ["transformers-js/introduction"]
+  "videos": ["transformers-js/introduction", "challenges/188-voice-chatbot"]
 }

content/videos/challenges/188-voice-chatbot/index.json

@@ -0,0 +1,222 @@
+{
+  "title": "Voice Chatbot",
+  "description": "In this coding challenge, ...",
+  "videoNumber": "188",
+  "videoId": "",
+  "date": "2026-04-20",
+  "nebulaSlug": "codingtrain-coding-challenge-188-voice-chatbot",
+  "languages": ["JavaScript", "p5.js"],
+  "topics": [
+    "text-to-speech",
+    "speech-to-text",
+    "chatbot",
+    "Rivescript",
+    "LLMS",
+    "Agents",
+    "AI"
+  ],
+  "canContribute": true,
+  "relatedChallenges": ["42-markov-chain-name-generator", "43-context-free-grammar", "80-voice-chatbot-with-p5speech"],
+  "timestamps": [
+
+  ],
+  "codeExamples": [
+    {
+      "title": "Graph Waveform of Recording",
+      "description": "The sketch graphs the waveform from mic input.",
+      "image": "waveform.jpg",
+      "urls": {
+        "p5": "https://editor.p5js.org/codingtrain/sketches/cck49wDub"
+      }
+    },
+    {
+      "title": "Real Time Waveform",
+      "description": "The sketch graphs the waveform from mic input in real time.",
+      "image": "realtime.jpg",
+      "urls": {
+        "p5": "https://editor.p5js.org/codingtrain/sketches/aaRIT-x6a"
+      }
+    },
+    {
+      "title": "Loading bars",
+      "description": "The sketch graphs loading bars for the models.",
+      "image": "loading_bars.jpg",
+      "urls": {
+        "p5": "https://editor.p5js.org/codingtrain/sketches/E9Ob3x8eJ"
+      }
+    },
+    {
+      "title": "Therapy Bot",
+      "description": "Basic chatbot",
+      "image": "img.jpg",
+      "urls": {
+        "p5": "https://editor.p5js.org/codingtrain/sketches/37LFEPUVV"
+      }
+    },
+    {
+      "title": "Number Guessing Bot",
+      "image": "number_bot.jpg",
+      "description": "Voice bot that listens for a number and gives feedback.",
+      "urls": {
+        "p5": "https://editor.p5js.org/codingtrain/sketches/AJw7zMN9q"
+      }
+    },
+    {
+      "title": "LLM Chatbot",
+      "description": "This chatbot has been prompted to only reply with random numbers.",
+      "image": "img.jpg",
+      "urls": {
+        "p5": "https://editor.p5js.org/codingtrain/sketches/RHhT9I4Nm"
+      }
+    }
+  ],
+  "groupLinks": [
+    {
+      "title": "References",
+      "links": [
+        {
+          "icon": "📓",
+          "title": "p5.2 Reference",
+          "url": "https://beta.p5js.org",
+          "description": "Reference page for the beta version of p5.2."
+        },
+        {
+          "icon": "📓",
+          "title": "Introducing Whisper",
+          "url": "https://cdn.openai.com/papers/whisper.pdf",
+          "description": "Paper introducing the Whisper model."
+        },
+        {
+          "icon": "📓",
+          "title": "Model Cards for Model Reporting",
+          "url": "https://arxiv.org/abs/1810.03993",
+          "description": "In this paper, the authors propose a framework for model cards to encourage transparency on model reporting."
+        },
+        {
+          "icon": "📓",
+          "title": "Open Neural Network Exchange",
+          "url": "https://onnx.ai",
+          "description": "ONNX facilitates greater interoperability in the AI tools community."
+        },
+        {
+          "icon": "📓",
+          "title": "Onnx-community Whisper-tiny.en model",
+          "url": "https://huggingface.co/onnx-community/whisper-tiny.en",
+          "description": "Model card for Whisper-tiny.en."
+        },
+        {
+          "icon": "📓",
+          "title": "Xenova",
+          "url": "https://github.com/xenova",
+          "description": "Github repo for Joshua Lochner, the creator of transformers.js."
+        },
+        {
+          "icon": "📓",
+          "title": "Transformers.js",
+          "url": "https://huggingface.co/docs/transformers.js/installation",
+          "description": "Installation page for Transformers.js."
+        },
+        {
+          "icon": "📓",
+          "title": "Announcing the new p5.sound.js library!",
+          "url": "https://medium.com/processing-foundation/announcing-the-new-p5-sound-js-library-42efc154bed0",
+          "description": "Article discussing the latest version of p5.sound.js."
+        },
+        {
+          "icon": "📓",
+          "title": "getUserMedia() documentation",
+          "url": "https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia",
+          "description": "Documentation about getting the sound from the mic."
+        },
+        {
+          "icon": "📓",
+          "title": "MediaRecorder() documentation",
+          "url": "https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder",
+          "description": "Documentation about the MediaRecorder object."
+        },
+        {
+          "icon": "📓",
+          "title": "Kokoro Repo",
+          "url": "https://github.com/hexgrad/kokoro",
+          "description": "Github repo for the Kokoro speech-to-text model."
+        },
+        {
+          "icon": "📓",
+          "title": "KokoroTTS Model",
+          "url": "https://huggingface.co/hexgrad/Kokoro-82M",
+          "description": "Model card for the Kokoro-82M on Hugging Face."
+        },
+        {
+          "icon": "📓",
+          "title": "Rivescript",
+          "url": "https://www.rivescript.com",
+          "description": "RiveScript is a simple scripting language for chatbots."
+        },
+        {
+          "icon": "📓",
+          "title": "SmolLM3",
+          "url": "https://huggingface.co/HuggingFaceTB/SmolLM3-3B",
+          "description": "Model card for SmolLM3"
+        },
+        {
+          "icon": "📓",
+          "title": "Running models on WebGPU",
+          "url": "https://huggingface.co/docs/transformers.js/guides/webgpu",
+          "description": "Documentation about running models on the webGPU."
+        },
+        {
+          "icon": "📓",
+          "title": "Using quantized models (dtypes)",
+          "url": "https://huggingface.co/docs/transformers.js/v3.8.1/guides/dtypes",
+          "description": "Documentation about available quantization options."
+        }
+      ]
+    },
+
+    {
+      "title": "Videos",
+      "links": [
+        {
+          "icon": "🚂",
+          "title": "p5.js 2.0 async and await",
+          "url": "/tracks/p5js-2.0/p5js-2.0/async-await",
+          "description": "This video discusses loading data with async and await."
+        },
+         {
+           "icon": "🚂",
+           "title": "What is Transformers.js",
+           "url": "/tracks/transformers-js/transformers-js/introduction",
+           "description": "In this video, 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."
+         }
+
+      ]
+    },
+    {
+      "title": "Videos",
+      "links": [
+        {
+          "icon": "🚂",
+          "title": "p5.js 2.0 async and await",
+          "url": "/tracks/p5js-2.0/p5js-2.0/async-await",
+          "description": "This video discusses loading data with async and await."
+        }
+
+      ]
+    },
+    {
+      "title": "Live Stream Archives",
+      "links": [
+        {
+          "icon": "🔴",
+          "title": "Full Live Stream",
+          "url": "https://www.youtube.com/watch?v=KRDJAHArqaw",
+          "description": "Complete unedited live stream showing the development process with all mistakes and problem-solving."
+        }
+      ]
+    }
+  ],
+  "credits": [
+    { "title": "Editing", "name": "Mathieu Blanchette" },
+    { "title": "Animations", "name": "Jason Heglund" }
+  ]
+}