Teachable machine
A Scout Loop around AI And Automation, Machine Learning, Browser Prototyping, Javascript: build evidence, then choose the next action.
Did this fit you?
What It Is
Teachable Machine is a browser tool for training a small model to recognize images, sounds, or poses without building a full machine-learning pipeline. In this loop, you will touch the image path: gather examples, train a model, test it, tweak it once, and inspect the export panel.
The useful idea is not that Teachable Machine replaces production ML. It gives you a fast way to test whether a custom classifier is even promising. Under the hood, the workflow uses TensorFlow.js and transfer learning: a pre-trained model handles general visual features, while your small dataset teaches the last layer to separate your custom classes.
Why It Matters
For a full-stack engineer, Teachable Machine is most valuable as a fast prototype surface. Before you spend time wiring a Java service, a Spring Boot workflow, a queue, or a dashboard integration around an AI idea, you can check whether the signal is visually separable at all.
This loop uses harmless mock screenshots instead of production data. That matters because the official workflow is browser-based and examples can stay on-device unless you choose to save the project to Google Drive, but a good first test should still avoid customer data, secrets, tickets, logs, or internal UI captures.
Guided First Play
You are going to train a two-class image model that separates a mock healthy service card from a mock error service card. By the end, you should know whether Teachable Machine feels like a useful scouting tool for UI screenshot triage, QA helpers, or lightweight automation experiments.
Create a safe mini dataset
Make a scratch folder named tm-scout. Inside it, create this file as service-card.html. It gives you two fake browser states that look enough like work artifacts to be relevant, without using real company data.
Mock service card · Path: tm-scout/service-card.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Service Card Sample</title>
<style>
body {
margin: 0;
min-height: 100vh;
display: grid;
place-items: center;
font-family: system-ui, sans-serif;
background: #f4f6f8;
}
.card {
width: min(520px, 86vw);
border: 1px solid #d7dde5;
border-radius: 8px;
padding: 28px;
background: white;
box-shadow: 0 12px 32px rgba(30, 41, 59, 0.12);
}
.badge {
display: inline-block;
border-radius: 999px;
padding: 6px 10px;
font-size: 13px;
font-weight: 700;
letter-spacing: 0;
}
.healthy .badge { background: #d9f7e7; color: #126b3a; }
.error .badge { background: #ffe1df; color: #9c1c13; }
h1 { margin: 18px 0 8px; font-size: 30px; }
p { margin: 0; color: #475569; line-height: 1.5; }
.metric { margin-top: 22px; font-size: 42px; font-weight: 800; }
.healthy .metric { color: #17803d; }
.error .metric { color: #b42318; }
</style>
</head>
<body>
<main class="card" id="card">
<span class="badge" id="badge"></span>
<h1 id="title"></h1>
<p id="body"></p>
<div class="metric" id="metric"></div>
</main>
<script>
const params = new URLSearchParams(location.search);
const state = params.get('state') === 'error' ? 'error' : 'healthy';
const data = {
healthy: {
badge: 'HEALTHY',
title: 'Checkout API is stable',
body: 'Latency and error rate are inside the normal release window.',
metric: '99.98%'
},
error: {
badge: 'ERROR',
title: 'Checkout API needs attention',
body: 'Error rate is above the alert threshold after the last deploy.',
metric: '8.4%'
}
}[state];
document.getElementById('card').className = `card ${state}`;
document.getElementById('badge').textContent = data.badge;
document.getElementById('title').textContent = data.title;
document.getElementById('body').textContent = data.body;
document.getElementById('metric').textContent = data.metric;
</script>
</body>
</html>
Opening the file with ?state=healthy should show a green-ish healthy card; opening it with ?state=error should show a red-ish error card.
Open the file in your browser twice: once with ?state=healthy at the end of the address, and once with ?state=error. Take several cropped screenshots of the card for each state. Vary the browser width or zoom a little so the model does not only memorize one exact bitmap. Put the images into two folders: tm-scout/healthy and tm-scout/error.
If screenshots are awkward on your machine, use any two harmless visual classes you can capture quickly, such as two simple mock pages, two icons on a white background, or two desk objects. Keep the labels concrete and non-sensitive.
Train the first model
Go to https://teachablemachine.withgoogle.com/, choose Get Started, then choose Image Project and the standard image model. Rename Class 1 to healthy and Class 2 to error. For each class, choose the upload option and add the screenshots from the matching folder.
If the UI has changed, look for the image project screen where you can add examples to named classes. Do not continue until both labels have uploaded examples visible.
Click Train Model. Keep the tab open while it trains. This is the first useful checkpoint: if training feels slow or fails with this tiny dataset, treat that as evidence that this tool is not the right first pass for your current machine, browser, or timebox.
Test it like a skeptical engineer
After training, use the preview panel to test with a screenshot you did not upload. Make one fresh screenshot of the healthy card and one fresh screenshot of the error card. Drop each into the preview area, or use the available input method shown by the current UI.
- Pass signal: the correct class is clearly higher for both fresh screenshots.
- Weak signal: the model is right, but confidence jumps around or depends on tiny crop changes.
- Fail signal: the model mostly follows background, color, or screenshot size instead of the state you meant to teach.
Now do one focused variation. Add two more examples per class where the browser width, zoom, or crop differs from your first set, then train again. Do not add ten different concepts. You are testing whether a small amount of better example coverage improves the result.
If the preview does not accept your image, use the export panel as your checkpoint instead. The key question is still whether you can test with an example that was not part of training.
Inspect the export, not a production plan
Click Export Model and choose the TensorFlow.js option. You are not building the app in this loop. You are checking whether the output looks like something you could plausibly wire into a small browser proof of concept.
Shape of the image-model integration
const modelURL = URL + 'model.json';
const metadataURL = URL + 'metadata.json';
const model = await tmImage.load(modelURL, metadataURL);
const prediction = await model.predict(imageElement);
The export should expose a model URL with model.json and metadata.json, which is the handoff point from no-code training to JavaScript integration.
That snippet is the practical bridge. Teachable Machine let you create the classifier quickly; TensorFlow.js is the path for using it in a browser or Node.js prototype. For a Spring Boot workflow, the likely first architecture would still keep inference at the edge or in a small JS service until the idea proves useful.
Decide from evidence
Your decision evidence is simple: did a tiny, safe dataset produce a classifier that responds to the thing you care about, and did the export look understandable enough to integrate later? If yes, Teachable Machine has earned a deeper loop. If no, you learned that this topic is more demo-friendly than work-useful for your current goals.
Your Next Move
Choose your next move based on the test, not on whether the tool felt novel. If the fresh screenshots classified cleanly and the TensorFlow.js export made sense, Go Deeper should build the smallest browser integration around your exported model. Project should only happen if you can name a real workflow, such as QA screenshot triage, release dashboard checks, or a support-tool assist, where a lightweight classifier would save repeated human inspection.
If the result was brittle, that is still a useful Scout Loop outcome. Mark it Not for Me if the tool feels too toy-like for your work, or Fits Me if it is worth remembering as a fast prototyping surface even without becoming a project yet.
Did this fit you?
Sources
This loop is grounded in Google's Teachable Machine homepage, FAQ, announcement post, the Google Creative Lab Teachable Machine community repository, the image-library README, and TensorFlow.js documentation. Those sources support the gather, train, test, export workflow; the browser-based TensorFlow.js model path; and the caution that this is best treated as a learning and prototyping tool before any production commitment.