AI Project Development Guide

Step-by-Step Instructions for Teachable Machine, MIT App Inventor & Scratch

Lesson 12: Build Your Own AI | Evolve AI Institute

Choose Your Platform:

🎓 Teachable Machine 📱 MIT App Inventor 🐱 Scratch with ML
How to Use This Guide: This comprehensive guide provides step-by-step instructions for creating AI projects on three different platforms. Choose the platform that best fits your project idea, then follow the detailed steps to build, test, and refine your AI application. Each platform section includes setup instructions, development steps, testing guidelines, and troubleshooting tips.
🎓 Teachable Machine by Google
Best For: Image recognition, sound classification, and pose detection projects. Teachable Machine is the easiest platform to get started with and provides quick results. Perfect for first-time AI creators!

Getting Started with Teachable Machine

  1. Access the Platform
    • Open your web browser (Chrome or Firefox recommended)
    • Navigate to: teachablemachine.withgoogle.com
    • Click "Get Started" button
    • No account required - you can start immediately!
  2. Choose Your Project Type

    Select the type of AI model you want to create:

    Image Project

    Teaches a computer to recognize objects, people, or scenes in pictures

    Example: Recycling sorter, plant identifier

    Audio Project

    Teaches a computer to recognize different sounds or spoken words

    Example: Musical instrument classifier, voice commands

    Pose Project

    Teaches a computer to recognize body positions and movements

    Example: Yoga pose detector, hand gesture controller

  3. Add Classes (Categories)
    • Start with the default "Class 1" and "Class 2"
    • Rename classes to meaningful names (e.g., "Plastic", "Paper", "Metal", "Glass" for a recycling sorter)
    • Click "+ Add a class" to add more categories (aim for 3-5 classes)
    • Each class represents a different category your AI will learn to recognize
    Naming Tip: Use clear, descriptive names for your classes. Instead of "Class 1" and "Class 2", use specific names like "Dog" and "Cat" or "Happy" and "Sad". This makes training and testing much clearer!
  4. Collect Training Samples

    This is the most important step - quality training data leads to better AI!

    For Image Projects:

    • Click "Webcam" button under each class
    • Position your object or yourself in front of the camera
    • Click and hold "Hold to Record" to capture samples
    • Aim for 50-100 samples per class
    • Vary the angle, distance, lighting, and background as you record
    • You can also upload images from your computer if preferred

    For Audio Projects:

    • Click "Microphone" button under each class
    • Make the sound you want the AI to recognize
    • Record 2-3 seconds of the sound, then release
    • Aim for 50-100 samples per class
    • Vary volume, pitch, and distance from microphone
    • Record in different locations for better variety

    For Pose Projects:

    • Click "Webcam" button under each class
    • Strike the pose you want the AI to recognize
    • Hold the pose while recording samples
    • Aim for 50-100 samples per class
    • If possible, have different people demonstrate the poses
    • Vary clothing, lighting, and background
    Common Mistake: Recording all samples with identical conditions! Your AI needs to see variety to work well in different situations. Move around, change angles, adjust lighting between recordings.
    Quality Over Quantity: 50 diverse samples are better than 200 identical ones. Make sure each class has good variety in your training data.
  5. Train Your Model
    • Once you have samples for all classes, click the "Train Model" button
    • Wait while the AI learns from your examples (usually 1-3 minutes)
    • A progress bar will show the training progress
    • You'll see "Training complete!" when it's done
    • The model analyzes patterns in your training data to learn how to classify new inputs
    What's Happening? During training, the AI is analyzing your samples to find patterns that distinguish each class. It's learning what features are important for telling your categories apart.
  6. Test Your AI
    • After training, the "Preview" panel activates on the right side
    • Present objects, make sounds, or strike poses in front of your camera/microphone
    • Watch the confidence bars - they show how certain the AI is about each classification
    • Test with items similar to training data - does it recognize them?
    • Test with different angles, lighting, and conditions - does it still work?
    • Test edge cases - what happens with ambiguous inputs?
    Reading the Results: The confidence bars show percentages. A 95% confidence in "Dog" means the AI is very sure it's looking at a dog. Lower percentages mean the AI is less certain. Ideally, you want high confidence (70%+) for the correct class and low confidence for incorrect classes.
  7. Improve Your Model (Iteration)

    If your AI isn't performing well, here's how to improve it:

    • If accuracy is low overall: Add more diverse training samples to all classes
    • If specific classes are confused: Add more contrasting samples to those classes
    • If it works in one setting but not another: Add samples from the problematic setting
    • If background interferes: Vary backgrounds more in training data
    • After adding more samples, click "Train Model" again to retrain
    • Compare new results to previous version - did it improve?
    Iteration is Normal: Professional AI developers rarely get it perfect on the first try. Expect to train, test, and retrain several times to get good results.
  8. Export Your Model
    • Click "Export Model" button at the top
    • Choose your export format:
      • Tensorflow.js: For use in webpages
      • Tensorflow: For Python projects
      • Tensorflow Lite: For mobile apps
    • Upload to cloud or download to your computer
    • You can also get a shareable link to demonstrate your AI

Advanced Features

Under the Hood

Click "Under the Hood" to adjust advanced settings like learning rate, batch size, and number of epochs. Usually, the defaults work well for beginners.

Save Project

Click the three-dot menu and select "Download" to save your entire project (including all training data) to your computer. You can upload it later to continue working.

Remove Samples

If you have poor quality samples, hover over them in the class panel and click the X to delete them. Then retrain for better results.

Troubleshooting

Problem Solution
Webcam/microphone not working Check browser permissions. Click the camera/microphone icon in the address bar and allow access. Try refreshing the page or using a different browser.
Model accuracy is very low Ensure you have enough samples (50+ per class), samples are diverse, and classes are clearly different from each other. Simplify categories if they're too similar.
Training takes forever Reduce the number of samples or decrease image quality in "Under the Hood" settings. Large datasets with high-resolution images take longer to train.
Works in training but not real world Your training data doesn't match real-world conditions. Add more samples that match how you plan to use the AI (different lighting, angles, backgrounds).
Page is slow or freezing Close other browser tabs, clear browser cache, or try a different browser. Chrome typically works best with Teachable Machine.

Project Ideas for Teachable Machine

Ready to Present: Once your model works well, use the Preview panel to demonstrate it live, or export it and integrate into a webpage for a more polished presentation.
📱 MIT App Inventor
Best For: Creating mobile apps with AI features like image recognition, chatbots, or speech recognition. Perfect for students who want to build actual apps they can install on their phones!

Getting Started with MIT App Inventor

  1. Create an Account and Access the Platform
    • Navigate to: appinventor.mit.edu
    • Click "Create Apps!" button
    • Sign in with a Google account (or create one if needed)
    • You'll be taken to "My Projects" page
  2. Create a New Project
    • Click "Create New Project" button
    • Give your project a meaningful name (no spaces allowed - use underscores instead)
    • Example: "Plant_Identifier" or "Emotion_Detector_App"
    • Click "OK"
  3. Understanding the Interface

    MIT App Inventor has two main views:

    Designer View

    Where you design the visual layout of your app. Drag and drop components like buttons, images, and text boxes. This is like designing a website or poster.

    Blocks View

    Where you program the behavior of your app. Connect colorful blocks to create logic and functionality. This is where the magic happens!

    You'll switch between these views as you build your app. Design the look in Designer, then program the function in Blocks.

  4. Design Your App Interface (Designer View)

    Start by creating the visual layout:

    Essential Components for an AI App:

    • Button: Drag from "User Interface" palette - for "Take Photo" or "Classify" actions
    • Camera: Drag from "Media" palette - for capturing images
    • Image: Drag from "User Interface" palette - to display the photo
    • Label: Drag from "User Interface" palette - to show AI results

    Arrange Your Components:

    • Drag components onto the phone screen preview
    • Use "HorizontalArrangement" and "VerticalArrangement" to organize elements
    • Rename components in properties panel (right side) for clarity
    • Example names: "TakePhotoButton", "ResultLabel", "PhotoImage"
    Design Tip: Keep your interface simple and intuitive. Users should immediately understand how to use your app. Large buttons, clear labels, and logical layout are key!
  5. Add AI Components (Still in Designer)
    • Scroll down in the palette to find "Extension" section
    • Click "Import extension" button
    • Choose "Personal Image Classifier" or "ImageBot" extension
    • Once imported, drag the extension onto your screen (it won't be visible to users)
    • In properties, configure the extension settings:
      • Set confidence threshold (typically 0.7 or 70%)
      • Choose the model type if options are available
    About Extensions: Extensions add special capabilities to your app. The Personal Image Classifier extension lets your app recognize objects in photos using AI. It's already trained on thousands of common objects!
  6. Program Your App Logic (Blocks View)

    Click "Blocks" button (top right) to switch to programming view.

    Basic Block Structure for Image Classification:

    when TakePhotoButton.Click do call Camera1.TakePicture when Camera1.AfterPicture do set PhotoImage.Picture to image do call PersonalImageClassifier1.ClassifyImage image: Camera1.Picture when PersonalImageClassifier1.GotClassification do set ResultLabel.Text to join "I see: " classification

    Building Blocks Step-by-Step:

    1. Button Click Event: Click on "TakePhotoButton" in the left panel, drag out the "when TakePhotoButton.Click" block
    2. Call Camera: Find "Camera1" in the left panel, drag "call Camera1.TakePicture" inside the click event
    3. After Picture Event: From "Camera1", drag "when Camera1.AfterPicture" block
    4. Display Image: Set the Image component's Picture property to the captured image
    5. Classify Image: Call the classifier to analyze the image
    6. Show Results: When classification is done, display the result in your label
    Block Programming Tip: Blocks snap together like puzzle pieces. If they don't fit together, they're probably not compatible. The shapes and colors are designed to guide you!
  7. Test Your App

    There are two ways to test your app:

    Method 1: MIT AI2 Companion App (Recommended)

    • Install "MIT AI2 Companion" app on your Android device from Google Play Store
    • In App Inventor, click "Connect" → "AI Companion"
    • Scan the QR code with the Companion app
    • Your app will load on your phone for live testing!
    • Any changes you make in App Inventor update immediately on your phone

    Method 2: Emulator (Computer Only)

    • Click "Connect" → "Emulator"
    • Wait for the Android emulator to load (can take 5-10 minutes first time)
    • Test your app in the emulated phone on your computer
    • Note: AI features may not work as well in emulator
    Important: The MIT AI2 Companion app only works for testing. To create a standalone app you can share, you need to build an APK file (see step 8).
  8. Debug and Improve
    • Test each feature individually - does the camera work? Does the button respond?
    • Check that all blocks are properly connected (no loose pieces)
    • Use "Do It" feature to test individual blocks (right-click on a block)
    • Add error handling blocks to manage unexpected situations
    • Improve user interface based on testing feedback
    • Add more features like saving results, sharing photos, or keeping a history
    Debugging Tip: If something isn't working, start simple. Disable complex blocks and test basic functionality first. Add complexity back gradually to identify where the problem is.
  9. Build and Share Your App
    • Click "Build" → "Android App (.apk)"
    • Wait for the build process to complete (usually 1-5 minutes)
    • Download the .apk file to your computer
    • Transfer to Android device and install (you may need to enable "Install from Unknown Sources" in settings)
    • Share the .apk file with others so they can install your app!
    Note: APK files only work on Android devices. Apple iOS requires a different process (not supported by App Inventor). However, anyone with an Android phone can install and use your app!

Advanced Features to Add

Text-to-Speech

Make your app speak the results! Add "TextToSpeech" component and call it when classification is complete.

Sound Effects

Add "Sound" component with audio files for success, error, or interaction feedback to make your app more engaging.

Multiple Screens

Create a welcome screen, results screen, and help screen. Use "Open another screen" blocks to navigate between them.

TinyDB Storage

Save classification history using TinyDB component. Great for tracking past results or creating a user profile.

Social Sharing

Add "Sharing" component to let users share results via social media, email, or messaging apps.

Custom Training

Instead of using pre-trained models, create your own classifier using "Personal Image Classifier" with your own training data.

Troubleshooting

Problem Solution
Companion app won't connect Ensure phone and computer are on the same WiFi network. Try refreshing the QR code. Check that AI2 Companion is the latest version.
Camera isn't working Check app permissions on your phone. Make sure Camera component is properly added in Designer. Test with a simple button to isolate the issue.
AI classifier returns errors Verify image format is compatible. Check internet connection (some classifiers require online access). Ensure image isn't too large.
Blocks won't snap together Check if block types are compatible. Blocks must have matching shapes/colors to connect. Look for error indicators (red triangles).
App is slow or laggy Optimize images (resize before displaying). Reduce number of components. Simplify block logic. Test on a newer device if possible.
APK won't install on phone Enable "Install from Unknown Sources" in phone security settings. Make sure you're using an Android device (iOS not supported). Check that APK file downloaded completely.

Project Ideas for MIT App Inventor

Congratulations! You've created a working mobile app with AI capabilities. You can now share it with friends, family, and classmates!
🐱 Scratch with Machine Learning
Best For: Creating interactive games, stories, and animations that incorporate AI features. Perfect for students familiar with Scratch who want to add machine learning to their projects!

Getting Started with Scratch ML

  1. Access Scratch and Create an Account
    • Navigate to: scratch.mit.edu
    • Click "Join Scratch" to create a free account
    • Choose a username and password
    • Verify your email address
    • Once logged in, click "Create" to start a new project
  2. Add ML Extensions

    Scratch has several extensions that enable AI/ML features:

    • Click the "Add Extension" button (bottom left corner)
    • Choose one or more of these AI-related extensions:
      • Video Sensing: Detects motion and tracks movement
      • Text to Speech: Makes your characters speak
      • Translate: Translates text between languages
      • Machine Learning (if available): Custom ML models
    • For more advanced ML, you can use machinelearningforkids.co.uk (separate platform that integrates with Scratch)
    About Machine Learning for Kids: This separate platform (machinelearningforkids.co.uk) allows you to train custom ML models and then import them into Scratch. It's free and designed specifically for students!
  3. Understanding Scratch + ML Projects

    There are two main approaches to adding AI to Scratch:

    Method 1: Built-in Extensions

    Use Scratch's Video Sensing and other built-in extensions for simple AI-like behavior. Good for beginners and quick projects.

    Method 2: Custom ML Models

    Train custom models on ML for Kids platform, then import into Scratch. More powerful but requires additional setup.

  4. Method 1: Using Video Sensing (Simple Approach)

    Perfect for motion-based games and interactive experiences:

    Basic Video Sensing Project Structure:

    • Add "Video Sensing" extension
    • Turn on video with "turn video on" block
    • Use "video motion on [sprite]" block to detect movement
    • Create conditional blocks: "if video motion > 50 then..."
    • Make sprites respond to player movement
    Example blocks for a motion-controlled game: when green flag clicked turn video on set video transparency to 50 forever if <(video motion on [sprite]) > 30> then change y by 10 end if <(video motion on [sprite]) > 60> then broadcast [jump] end end

    Project Ideas Using Video Sensing:

    • Dance game that scores based on how much you move
    • Catch game where hand movement controls a basket
    • Exercise tracker that counts jumping jacks or poses
    • Musical instrument that plays notes based on movement
  5. Method 2: Using ML for Kids (Advanced)

    For custom trained models that can recognize specific objects, sounds, or text:

    Setup Process:

    1. Go to machinelearningforkids.co.uk
    2. Create a free account (separate from Scratch account)
    3. Click "Go to your projects"
    4. Click "Add a new project"
    5. Choose project type: Images, Text, Numbers, or Sounds
    6. Train your model on the ML for Kids platform
    7. Get the special Scratch link to import your model
    8. Open that link to use your model in Scratch

    Training a Model on ML for Kids:

    • For Image Models:
      • Create categories (labels) for what you want to recognize
      • Upload or draw example images for each category (30+ per category)
      • Click "Learn & Test" to train the model
      • Test your model to see if it works
      • Go back to "Make" and import into Scratch
    • For Text Models:
      • Create categories for different types of text
      • Type example sentences or phrases for each category
      • Train and test your model
      • Use in Scratch to classify user input
    • For Sound Models:
      • Create categories for different sounds
      • Record or upload sound examples
      • Train to recognize different audio inputs
      • Use for voice-controlled games or music apps
  6. Programming with ML Blocks in Scratch

    Once your ML model is imported into Scratch, you'll see special new blocks:

    Example blocks for image classification: when green flag clicked turn video on forever recognize image [camera] and wait if <(label) = [cat]> then say [I see a cat!] for 2 seconds play sound [meow] end if <(label) = [dog]> then say [I see a dog!] for 2 seconds play sound [bark] end wait 1 seconds end

    Key ML Blocks You'll Use:

    • recognize [image/text/sound]: Classifies input using your trained model
    • (label): Reports the predicted category
    • (confidence): Reports how confident the AI is (0-100%)
    • Use these with standard Scratch blocks for game logic
  7. Building an Interactive AI Project

    Combine ML blocks with Scratch's powerful features:

    Essential Scratch Features for AI Projects:

    • Sprites: Create characters that react to AI classifications
    • Costumes: Change appearance based on what AI recognizes
    • Sounds: Add audio feedback for classifications
    • Variables: Track scores, accuracy, or classification history
    • Broadcasting: Send messages between sprites based on AI results
    • Cloning: Create multiple sprites dynamically

    Example Game Structure:

    Sprite 1 (Main Character): - Uses ML to recognize player gestures - Changes costume based on recognized gesture - Broadcasts gesture type to other sprites Sprite 2 (Enemy): - Listens for gesture broadcasts - Responds differently to each gesture - Keeps track of successful/failed interactions Sprite 3 (Score Display): - Updates based on successful recognitions - Shows accuracy percentage - Provides feedback to player
  8. Test and Iterate
    • Click green flag to run your project
    • Test all AI classification scenarios
    • Check that sprites respond correctly to each classification
    • Test edge cases - what happens with unexpected inputs?
    • Have classmates play-test your game
    • Gather feedback on accuracy and fun factor
    • Return to ML for Kids to retrain model if needed
    • Add polish: animations, sounds, better graphics
    Testing Tip: Test your AI project in the same conditions where it will be used. If it's a game for the classroom, test it in classroom lighting and noise levels!
  9. Share Your Project
    • Click "Share" button at the top of Scratch
    • Write a good project description explaining what your AI does
    • Add instructions for how to play/use your project
    • Tag your project with relevant keywords like "AI", "Machine Learning", "Game"
    • Copy the project link to share with others
    • Anyone can play your project online without installing anything!

Advanced Scratch ML Techniques

Confidence Thresholds

Use the confidence value to only act on high-confidence predictions: if confidence > 80 then...

Multiple Models

Train separate models for different parts of your game (one for objects, one for gestures, etc.)

Progressive Difficulty

Start with easy classifications, increase difficulty as player improves. Use variables to track progress.

Data Visualization

Show players what the AI "sees" by drawing on screen or showing confidence bars.

Multiplayer

Create two-player games where both players use gestures or voice commands recognized by AI.

Educational Content

Build projects that teach concepts while using AI (math games, language learning, science simulations).

Troubleshooting

Problem Solution
ML blocks not appearing in Scratch Make sure you're using the special Scratch link from ML for Kids, not regular Scratch. The link should include your model ID.
Video/camera not working Check browser permissions (camera access). Try different browser (Chrome works best). Make sure no other program is using the camera.
Classifications are very inaccurate Return to ML for Kids and add more diverse training examples. Make sure categories are clearly different. Retrain the model.
Project is slow or laggy Reduce number of sprites. Add "wait" blocks between classifications. Simplify scripts. Close other browser tabs.
Can't share project Projects with custom ML models from ML for Kids can only be shared via the special link. Regular Scratch sharing may not work with ML extensions.
Model works on ML for Kids but not Scratch Ensure you're testing in similar conditions. Check that all blocks are properly connected. Verify video is turned on if using image recognition.

Project Ideas for Scratch with ML

You're Now an AI Game Developer! You've learned how to combine Scratch's creative tools with machine learning to create unique, interactive experiences. Keep experimenting and pushing the boundaries of what's possible!
📊 Platform Comparison & Resources

Which Platform Should You Choose?

Platform Best For Difficulty Output
Teachable Machine Quick AI experiments, first-time AI creators, demonstration projects ⭐ Easiest Trained model (exportable)
MIT App Inventor Real mobile apps, practical tools, projects you can share with family ⭐⭐ Moderate Android mobile app (.apk)
Scratch with ML Interactive games, educational content, creative storytelling ⭐⭐⭐ Challenging Interactive web project

Additional Resources

Teachable Machine

  • Official Guide: teachablemachine.withgoogle.com/faq
  • Example Projects: experiments.withgoogle.com
  • YouTube Tutorials: Search "Teachable Machine tutorial"

MIT App Inventor

  • Tutorials: appinventor.mit.edu/tutorials
  • Documentation: ai2.appinventor.mit.edu/reference
  • Community Forum: community.appinventor.mit.edu

Scratch & ML for Kids

  • Scratch Wiki: en.scratch-wiki.info
  • ML for Kids: machinelearningforkids.co.uk
  • Project Ideas: scratch.mit.edu/explore/projects
Remember: The best platform is the one that matches your project goals and skill level. Don't be afraid to try multiple platforms to see which one you like best. Many successful AI developers started exactly where you are now!
Need Help? Don't hesitate to ask your teacher, classmates, or search online for solutions. The AI development community is very welcoming to beginners, and there are thousands of tutorials and forums ready to help you succeed!

Congratulations on Your AI Journey!

You now have the knowledge and tools to create amazing AI projects. Keep learning, keep building, and most importantly - keep innovating! The future of AI includes YOU.