Give Your App a Pocket Brain

Set Up Your Classes

Open Google's Teachable Machine in a new tab. You'll see "Class 1" and "Class 2". Rename them to "Thumbs Up" and "Fist".

Give It Examples

For each class, click the "Webcam" button and take at least 20 pictures of your hand in that position. The more pictures you give it, the smarter your AI will get!

Train Your Model

Once you have enough pictures for both classes, click the big "Train Model" button. It might take a minute while the AI brain learns from your examples. It's really thinking, so don't switch tabs!

Test Your Creation!

The preview window on the right will now show you what your custom AI sees. Hold up a thumbs-up or a fist. Does it guess correctly? You just trained your first Pocket Brain! 🎉

Download the Starter Project

We built the user interface for you so we can get straight to the AI fun. Download the starter project file below and upload it to your Thunkable account. (You'll need a parent's help to create a free account if you don't have one.)

Find the AI Blocks

In Thunkable, click the "Blocks" tab to switch from the design view to the code view. On the left side, scroll down the components list and find the Image Recognizer. This is the Pocket Brain component we'll be using!

Connect the Camera to the Brain

Your goal is to tell the app: "When the 'Scan' button is clicked, take a picture with the camera, and send that picture to the Image Recognizer for analysis." You'll need to drag and drop the blocks to make them look like this:

Display the Answer

After the Image Recognizer gets a result, it gives you two things: a `description` (what it thinks it saw) and a `confidence` (how sure it is). Your final step is to take that green `description` block and put it inside the block that sets the text of your main label. When you're done, test it on your phone using the Thunkable Live app and see your creation come to life!

// A peek at how a pro would do this with code!
// 1. First, we load our pre-trained model.
const model = await mobilenet.load();

// 2. Then, we get the image from the camera.
const image = document.getElementById('webcam-image');

// 3. Finally, we ask the model to predict what it sees.
const predictions = await model.classify(image);
console.log('I see a: ', predictions[0].className);

Make It Your Own!

Your app works, but can you make it even cooler? Try one of these missions:

• Mission 1 (Easy): Add a sound! Find the 'Sound' component and make the app play a 'beep' whenever it recognizes something.
• Mission 2 (Medium): Make it speak! Use the 'Text-to-Speech' component to make the phone say the `description` out loud.
• Mission 3 (Hard): Confidence Meter! Can you use an `if/else` block to change the label's color to green if the `confidence` is high (e.g., > 0.75) and yellow if it's low?