Teachable Machine Voice Control in React (Commands exec more than once)

Teachable Machine Voice Control in React (Commands Exec More Than Once)

This article will guide you on how to implement Teachable Machine voice control in your React application, enabling multiple executions of commands based on user voice input. We’ll cover the essential steps, code snippets, and concepts to make this feature a reality.

Project Setup

Prerequisites

• Node.js and npm installed
• Basic understanding of React
• A trained Teachable Machine model (we’ll use the ‘Speech Commands’ model for this example)

Create React App

 npx create-react-app voice-control cd voice-control 

Install Dependencies

 npm install @tensorflow-models/speech-commands 

Implementation

1. Teachable Machine Model

• Upload your trained Teachable Machine model (e.g., ‘Speech Commands’) to your project’s ‘public’ folder.
• Update the model path in your React component.

2. React Component

 import React, { useState, useEffect, useRef } from "react"; import * as speechCommands from "@tensorflow-models/speech-commands"; const VoiceControl = () => { const [model, setModel] = useState(null); const [listening, setListening] = useState(false); const [results, setResults] = useState([]); const audioContext = useRef(null); useEffect(() => { const loadModel = async () => { const model = await speechCommands.create('BROWSER_FFT', '/path/to/your/model.tflite'); setModel(model); audioContext.current = new AudioContext(); }; loadModel(); }, []); const startListening = async () => { setListening(true); if (model) { await model.listen(result => { setResults(prevResults => [...prevResults, result]); if (result.label === 'command') { // Execute command here } }, { includeSpectrogram: true, probabilityThreshold: 0.75 }); } }; const stopListening = () => { setListening(false); if (model) { model.stopListening(); } }; return ( 
  Start Listening   Stop Listening  {results.map((result, index) => ( 
 {result.label}: {result.probability.toFixed(2)} 
 ))} 
 ); }; export default VoiceControl; 

3. Execute Commands

• Within the model.listen callback, check the result.label to identify the recognized command.
• Trigger your desired functions based on the command.

Example: Repeating a Command

 if (result.label === 'command') { // Repeat the command (replace with your function) const commandSound = new Audio('/path/to/your/sound.mp3'); commandSound.play(); } 

4. Handle Multiple Executions

• Use a state variable (results in the example) to store the recognition results.
• Iterate over the results array to display the recognized commands and execute corresponding actions.

Output

 Start Listening Stop Listening command: 0.95 

Conclusion

This article has provided a detailed guide on incorporating Teachable Machine voice control into your React projects, allowing you to execute commands repeatedly based on user voice input. You can extend this concept to create interactive experiences, control devices, or automate tasks using voice commands.