Follow these steps:
- Clone this repo
- Let's use Github Codespaces!
- Click on the "Code" green button and select the "Codespaces" tab
- Create a codespace on the main branch
- When the codespace is up and the terminal are available:
- Run
npm install
- Run
npm test
- Click on "Open in Browser" green button
- Go to teachablemachine.withgoogle.com
- Click "Get Started"
- Select "Image Project" and then "Standard image model"
- Create 4 classes with the following names: angry - happy - sad - surprised
- Train each of the classes showing their respective emotion. To do this, click the button "Webcam"
- Now that you have your training dataset, click on "Train Model"
- Then you can preview your model!
- Click "Export Model"
- Select "Tensorflow.js"
- Click "Upload my model"
- Now, copy the code snippet and let's continue ๐
- Open index.html and locate this comment:
<!-- Add your Teachable Machine model here -->
- Remove the following lines:
<div>Teachable Machine Image Model</div>
<button type="button" onclick="init()">Start</button>
<div id="webcam-container"></div>
<div id="label-container"></div>
-
Replace the comment with the Teachable Machine code snippet, then let's edit that same code you just pasted
-
Under the line that contains the URL imported, copy the following code:
let robotContainter = document.getElementById("robot-container"); let robotFace = document.createElement("img"); let robotTalk = document.createElement("p"); robotTalk.innerText = "I don't understand humans...*sigh*" robotFace.src = "/images/waiting.png"; robotContainter.appendChild(robotFace); robotContainter.appendChild(robotTalk);
-
Then, on the same file, replace the content of the function predict() with the following code:
// predict can take in an image, video or canvas html element const prediction = await model.predict(webcam.canvas); for (let i = 0; i < maxPredictions; i++) { const classPrediction = prediction[i].className + ": " + prediction[i].probability.toFixed(2); labelContainer.childNodes[i].innerHTML = classPrediction; if ((prediction[i].className === 'happy') && (prediction[i].probability.toFixed(2) >= 0.90)) { robotFace.src = "/images/happy.png"; robotTalk.innerText = "I love to see you so happy!" } else if ((prediction[i].className === 'angry') && (prediction[i].probability.toFixed(2) >= 0.90)) { robotFace.src = "/images/angry.png"; robotTalk.innerText = "Destroy! Destroy! Destroy!" } else if ((prediction[i].className === 'sad') && (prediction[i].probability.toFixed(2) >= 0.90)) { robotFace.src = "/images/sad.png"; robotTalk.innerText = "Why so sad??" } else if ((prediction[i].className === 'surprised') && (prediction[i].probability.toFixed(2) >= 0.90)) { robotFace.src = "/images/surprised.png"; robotTalk.innerText = "OMG!!!!!!" } robotContainter.appendChild(robotFace); robotContainter.appendChild(robotTalk); }