Shapes Classification with Teachable Machine

What you'll learn

• How to use Google's Teachable Machine for image classification
• How to prepare and organize training data for machine learning
• How to train a model to classify different shapes
• How to test and export your trained model
• How to share your machine learning project

Introduction

In this project, we will explore how image classification works through Teachable Machine, a platform by Google to create machine learning models easily. We are going to classify images into different categories of shapes. The image dataset we will use is the 300 hand-drawn images of squares, circles, and triangles dataset from Kaggle.

Total Activity Time: 45-60 minutes

Phase One: Dataset Preparation

💻 Time Required: 5-10 minutes

Step One: Access the Dataset

1. Open your web browser
2. Navigate to the 300 images of squares, circles, and triangles dataset on Kaggle

Step 2: Download the Dataset

1. Locate the Download button on the Kaggle page
2. Click the button to start downloading the dataset

Step 3: Sign In to Kaggle

1. If prompted, click "Sign In" or "Register"
2. Choose your sign-in method (we recommend using Google for convenience)
3. Complete the sign-in process

💡 If you don't have a Kaggle account, signing up is free and only takes a minute. You'll need an account to download datasets.

Step 4: Save the Dataset

1. When the download prompt appears, save the file as shapes.zip
2. Choose a folder you can easily find later (e.g., "Program G" folder or your Desktop)
3. Remember where you saved it!

Step 5: Extract the Dataset

1. Navigate to where you saved shapes.zip
2. Right-click on the file
3. Select "Extract All" (Windows) or double-click (Mac)
4. A folder named shapes will be created

Step 6: Verify Folder Structure

1. Open the newly created shapes folder
2. Verify it contains exactly three subfolders:
   • squares
   • circles
   • triangles tip Each folder should contain 100 images of the respective shape. If you don't see all three folders, try extracting the zip file again.

Phase 2: Setting Up Teachable Machine

💻 Time Required: 5 minutes

Step 7: Access Teachable Machine

1. Open a new browser tab
2. Go to Teachable Machine
3. Click the Get Started button

Step 8: Choose Project Type

1. You'll see three project type options
2. Click on Image Project (this is for image classification)
3. Choose Standard image model (not the pose model)

Step 9: Add Classes

1. Notice that Teachable Machine starts with 2 empty classes by default
2. Since we have 3 shapes, click Add a class button
3. You should now have 3 empty classes total

Step 10: Name Classes

1. Click on "Class 1" and rename it to Square
2. Click on "Class 2" and rename it to Circle
3. Click on "Class 3" and rename it to Triangle

💡 Make sure the class names match exactly as shown above - this will help when uploading the correct images to each class.

Phase 3: Uploading Training Data

💻 Time Required: 10-15 minutes

Step 11: Upload Square Images

1. In the Square class section, click the Upload button
2. Select Choose images from your files from the dropdown menu

Step 12: Navigate to Square Images

1. In the file browser that opens, navigate to your extracted shapes folder
2. Double-click to open the squares subfolder

Step 13: Select All Square Images

1. Once inside the squares folder, select all images:
   • Windows: Press Ctrl+A
   • Mac: Press Command+A
2. Click Open to upload all selected images
3. Wait for all 100 square images to upload

Step 14: Verify Upload

1. Check that all square images appear under the Square class
2. You should see "100 image samples" displayed
3. The thumbnails should all show square shapes

Step 15: Repeat for Other Shapes

1. Repeat steps 11-13 for the Circle class:
   • Click Upload -> Choose images -> Navigate to circles folder -> Select all -> Open
2. Repeat steps 11-13 for the Triangle class:
   • Click Upload -> Choose images -> Navigate to triangles folder -> Select all -> Open tip Take your time with this step. Make sure you're uploading the correct shape images to each class. Mixing them up will confuse your model!

Step 16: Verify All Uploads

1. Check that each class shows "100 image samples"
2. Verify the thumbnails match the class names:
   • Square class -> square shapes
   • Circle class -> circle shapes
   • Triangle class -> triangle shapes

Phase 4: Training the Model

💻 Time Required: 5-10 minutes

Step 17: Train the Model

1. Scroll down to find the Train Model button
2. Click the button to start training
3. Important: Keep this browser tab open and active during training

⚠️ Warning Do not close or switch tabs while training! The process will stop if you navigate away. Training usually takes 2-5 minutes depending on your computer.

💡 You'll see a progress bar and accuracy metrics while training. Higher accuracy percentages (closer to 100%) mean your model is learning well!

Phase 5: Testing the Model

💻 Time Required: 5-10 minutes

Step 18: Test with Webcam

1. After training completes, the preview panel will activate
2. Draw or hold up different shapes to your webcam
3. The model will show predictions with confidence percentages
4. Test all three shapes to ensure accurate classification

Step 19: Test with File Upload

1. Click the dropdown menu next to "Webcam"
2. Select File from the options
3. Click "Choose images from your files"
4. Upload any shape image to test

Step 20: Verify File Testing

1. Check that uploaded images are correctly classified
2. The correct shape category should show the highest percentage
3. Test with different images to ensure consistency tip If your model isn't performing well, you might need to retrain with more diverse images or check that your training data was uploaded to the correct classes.

Phase 6: Exporting the Model

💻 Time Required: 5 minutes

Step 21: Export Model

1. In the Preview panel (where you tested your model)
2. Locate and click the Export Model button
3. A popup window will appear with export options

Step 22: Choose Export Option

1. In the export popup, find the Tensorflow.js tab
2. Select Upload (sharable link) option
3. Click the Upload my model button
4. Wait for the upload to complete (this may take a minute)

Step 23: Submit Project

1. Once upload completes, a shareable link will be generated
2. Click the Copy button next to the link
3. Open the Project Submission Form
4. Paste your link in the appropriate field
5. Complete any other required information
6. Submit the form

ℹ️ Important Submission Requirements

• Make sure to copy the ENTIRE link
• Test your link in a new browser tab before submitting
• Keep your model link saved - you might need it later!
• Submit before the deadline

Bonus Challenges

🎨 Bonus Challenge One: Face Mask Detector

Time Required: 30-45 minutes

Build a face mask detector using Teachable Machine that can identify whether someone is wearing a face mask.

1. Follow the Face Mask Detector Guidelines
2. You'll need to collect or find images of people with and without masks
3. Train your model and test it with your webcam

💻 Bonus Challenge 2: Python Implementation

Time Required: 45-60 minutes

Take your trained model to the next level by implementing it as a Python application!

1. Open the Python Implementation Example in Google Colab
2. Follow the step-by-step instructions in the notebook
3. You'll learn how to use your Teachable Machine model in Python code

💡 Getting the Keras File To obtain the converted_keras.zip file for the Python implementation:

1. After training your model, click "Export Model"
2. Switch to the "Tensorflow" tab
3. Select "Keras" format
4. Click "Download my model"
5. Save the converted_keras.zip file

Troubleshooting

Common Issues and Solutions

Problem: Images won't upload

• Solution: Make sure you're selecting image files (JPG, PNG) and not the folder itself
• Try uploading in smaller batches if needed

Problem: Model accuracy is low

• Solution: Ensure images are uploaded to the correct classes
• Check that all training images are clearly showing the intended shape

Problem: Webcam test not working

• Solution: Grant camera permissions when prompted
• Try using a different browser (Chrome or Edge work best)

Problem: Export link not generating

• Solution: Wait for the upload to fully complete
• Check your internet connection
• Try exporting again if it fails

⚠️ Need Help? If you encounter any issues not listed here, ask your instructor or post in the class forum. Include screenshots of any error messages!