Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more

Use TensorFlow.js for a website and Keras/TensorFlow or TensorFlow Lite for Python. In Teachable Machine, open Export Model, select the format that matches your target, and download or host the generated files. A browser model normally includes model.json, metadata.json, and one or more weight files. Keep those files together, preserve the relative paths recorded in model.json, and serve them over HTTP(S) rather than opening an HTML file with file://. For Python, follow the preprocessing and input shape in the generated export example; the 224×224 image size and pixel scaling often shown in examples are not universal settings.

Choose the export that matches your destination

Teachable Machine projects can be exported in several formats. The correct choice depends on where inference will run, not on which format has the most familiar filename.

Target Recommended export What you load Important qualification
Browser website or JavaScript application TensorFlow.js model.json, metadata.json, and referenced weight files Use the helper library that matches the project type: image, pose, or audio.
Python application with a Keras/TensorFlow runtime TensorFlow/Keras, when the export panel offers it Usually an H5/Keras model plus a labels file The generated model and snippet define the input dimensions, channel order, and normalization.
Python, mobile, IoT, or edge deployment TensorFlow Lite A .tflite model and labels Use a standard TFLite interpreter on a CPU, or the Edge TPU runtime and compatible hardware for an Edge TPU workflow.

Image, pose, and audio projects do not share the same input contract. Confirm the export tab and the README or code snippet generated for your specific project before writing application code.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

What the TensorFlow.js download contains

A downloaded TensorFlow.js model is not normally a single self-contained file. The JSON describes the model topology and points to binary weight files. The metadata file stores information such as class names and model metadata used by Teachable Machine helpers.

#1 Best Overall
Sale
Compressed Air Duster,130000RPM Super Power Cordless Air Duster,Rechargeable Brushless Blower,3 Gear Adjustable Blower with LED Light,Dust Remover for Computer/House/Outdoor/Car
  • Powerful Turbo Fan:CAGIWIRU Electric Air Duster have reached speed up to 130000RPM,Can efficient remove dust and debris.With LED light and Three Adjustable Speed to meet with different cleaning tasks.
  • With Attached USB C Fasting Charging cable.Charing 3 hours,Enjoy up to 240 minutes of use on the lowest setting, For third speed can use for 25mins.with four charging options to meet with your needs.
  • Wide Application: attached 5 different nozzles,making it suitable for a variety of scenes, such as car,pet, pc, keyboards, and other electronic devices. It also serves for office and home clean duster.
  • Handy Design & Portable:Cordless air duster electric nozzle is Light weight and small size, design and comfortable to hold and space saving, convenient to carry around. You can put it in your room or inside the car without taking up space.
  • Economical &Reusable: Built durable materials with a long-lasting battery,our CAGIWIRU air duster it's a sustainable alternative to disposable air cans.
  • model.json: model topology and references to weight shards.
  • metadata.json: class labels and Teachable Machine metadata.
  • One or more binary weight files: the numerical parameters used during inference.

Keep the original filenames and directory layout. Renaming a weight file without changing the references in model.json causes loading to fail. If you use a hosted export, the shareable URL exposes the model files remotely; your page still needs network access to fetch them.

“The models you make with Teachable Machine are real TensorFlow.js models that work anywhere javascript runs, so they play nice with tools like Glitch, P5.js, Node.js & more.” — Teachable Machine, Google Creative Lab product page, accessed October 16, 2026.

Export a model for a website

1. Train and verify the project

Train the image, sound, or pose project and use Teachable Machine’s preview to check that the classes behave as intended. Preview scores are not a substitute for testing with examples that resemble the conditions in your finished site, but they can reveal obvious class or capture problems before export.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

2. Select TensorFlow.js

  1. Choose Export Model in Teachable Machine.
  2. Select TensorFlow.js.
  3. Choose Upload (shareable link) if you want Teachable Machine to host the files, or choose Download to self-host them.

A hosted model is convenient for a prototype because you copy a URL instead of managing files. A download is preferable when you need offline development, your own deployment controls, or predictable availability independent of the hosting service.

3. Place downloaded files in one deployable asset directory

For a typical project, create a directory such as my-model/ beside your page and copy every downloaded file into it. Do not copy only model.json; the JSON normally references one or more weight files, and the helper also needs metadata.json.

4. Add TensorFlow.js and the matching helper

For an image model, the official library pattern is:

<script src='https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.3.1/dist/tf.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/@teachablemachine/image/dist/teachablemachine-image.min.js'></script>

Use the helper package for the project type you exported. The image helper is not a replacement for the pose or audio helper; each one handles different input preparation and model APIs.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
Rank #2
EVEO® Screen Cleaner Spray Kit (Streak-Free) TV Screen Cleaner for Smart TV, Lcd, LEd, Oled | Computer Screen Cleaner Spray and Wipe Microfiber Cloth - TV, Monitor, Laptop, iPad, Car - 6.7oz 1 Pack
  • Screen Cleaner is Your Screen’s New Bestfriend! - EVEO is proud to present a screen cleaner that’s perfectly suited for your TV. Meet your new screen cleaner, computer screen cleaner, laptop cleaner, iPad cleaner, Macbook,tv cleaner or any other electronic device. Our screen cleaner spray and wipe along with the included plush microfiber cloth, easily removes dust, fingerprints & other smudges on the screen’s surface. Clean effectively for a streak-free screen
  • Gentle on your Screens - Our screen cleaner spray and wipes is compatible to be used even for the most sensitive LCD, LED, CRT, and OLED screens in proper use. Be at ease knowing that this product is compatible with all the major brands: LG, SONY, Samsung, Sharp, iPad, iPhone, Android screens, Kindle, PC monitors - we’ve got you covered! Can be used as LCD screen cleaner, tv cleaner, smart tv screen cleaner, and more
  • Premium Super Soft Plush Microfiber Cloth - Included in this efficient screen cleaning kit. This screen cleaner spray and wipe has our signature plush microfiber cloth specially designed to comply with screens and monitors and leave them streak-free. Has been shown to effectively absorbs stubborn stains, zero streaks, and no fiber shedding. Always use this together with our screen cleaner for the best results
  • Easy-to-Use Screen Cleaner Kit + microfiber cleaning cloth - The EVEO Screen Cleaning Kit will easily be your new favorite tool when it comes to taking care of the things you love most, quick and easy solution for a streak-free screen. Simply screw on the sprayer gun on the screen cleaner bottle. Spray the cleaning liquid onto the microfiber cloth, then wipe the screen until desired cleanliness & shine is achieved.
  • Quality Screen Care Kit Worth Purchasing - Enjoy a convenient Screen Cleaner anytime, anywhere you need it. Your satisfaction is our top priority. We stand behind the quality of our products and that’s why, you shouldn’t be worrying at all. We manufacture the Best Screen Cleaner. and can be used for laptop cleaning kit, laptop screen cleaner, tv screen cleaner for smart tv. MacBook screen cleaner, monitor cleaner or screen cleaner spray for electronic devices with microfiber cleaning cloth

5. Load the model asynchronously

Loading returns a promise, so run it from an async function and wait for it before requesting predictions:

const URL = './my-model/';
const model = await tmImage.load(URL + 'model.json', URL + 'metadata.json');
const prediction = await model.predict(imageElement);

imageElement can be an image or compatible video/canvas element, depending on the helper and your application. Display the returned class probabilities rather than assuming that the first class is the answer.

6. Handle the prediction result

For an image classifier, the helper returns predictions containing a class name and a probability. A common interface is to iterate over the results, find the largest probability, and update the page. Keep the threshold a product decision: a low-confidence result can be shown as “uncertain” instead of being forced into a class.

const predictions = await model.predict(imageElement);
let best = predictions[0];
for (const item of predictions) {
  if (item.probability > best.probability) best = item;
}
result.textContent = best.className + ': ' + best.probability.toFixed(3);

The exact object properties depend on the helper version. If your generated example uses a different method or result shape, follow that example rather than adapting this fragment mechanically.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Use pose and audio exports correctly

Pose and audio models require different capture and preprocessing paths from image models.

Pose models

Use the Teachable Machine pose helper or the TensorFlow.js pose export instructions generated for the project. A pose model expects a person’s landmarks or pose representation, not an arbitrary bitmap. Your page therefore needs a camera or video source and the helper’s pose-estimation flow before classification. Preserve the helper’s expected frame dimensions and landmark format.

Audio models

Use the audio helper generated for the sound project. Audio inference samples a microphone stream or audio buffer over a defined window; it is not equivalent to passing an image element to predict. The browser must receive microphone permission, and production pages should run in a secure context such as HTTPS.

Rank #3
Sale
BladeHawks RGB Gaming Mouse Pad Extra Large Extended 31.5x12 Inch-Black | LED mouse pad with 14 lighting modes, covers keyboard & mouse, anti-slip rubber base, waterproof surface, USB powered
  • 【Large size】:Measuring 800 x 300 mm/ 31. 5×12 inches, which is wider and taller than others. Large mouse pad can perfectly fit your keyboard and mouse of any size, and there is also ample space for peripherals such as phones, tablets, etc.
  • 【LED backlight mouse pad】:Blade Hawks RGB mouse pad provides 7 static modes and 7 dynamic modes will give you the options you are looking for. Power-off memory function remembers the last lighting mode you selected. The super glow fiber Chroma will give you a colorful gaming setup that you want.
  • 【Anti-slip rubber base】:Made from Natural rubber, this gaming mousepad will firmly grip your desktop, allowing you to enjoy the ultimate precision in the games you are most passionate about. It also comes with a texture that enhances this ability even further.
  • 【Smooth and waterproof surface】: Micro-textured cloth surface, for extremely precise mouse control and a smooth movement. When liquid splashes on the gaming mouse pad, it forms water droplets and slides down. Will not delay your work or gameplay.
  • 【Plug and play】: This mouse and keyboard pad is powered by USB, plug and play, no driver required. One button control light modes. Press one time to change the lighting mode, press twice to change the brightness, press and hold about 3 seconds turn ON/OFF.

Why one code sample cannot cover every project

Image, pose, and audio exports can differ in input shape, sampling, and preprocessing. Treat the generated README and snippet as part of the model contract. Copying an image example into an audio or pose project can produce runtime errors or plausible-looking but invalid predictions.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Serve the website over HTTP(S)

Opening index.html directly with a file:// URL is a frequent cause of failures. Browser security rules can block model fetches, worker resources, or camera and microphone APIs from a local file origin. Use a local HTTP server during development and HTTPS when the site is published.

Simple local server

  1. Open a terminal in the directory containing index.html and the model directory.
  2. Run python -m http.server 8000.
  3. Open http://localhost:8000/ in the browser.
  4. Check the browser developer console and Network panel if loading fails.

When deploying, upload the complete model directory and page to the same static host or configure the model URL to point to the host where the files live. Ensure the server returns the JSON and binary files instead of an HTML error page.

Export for a Python app with Keras or TensorFlow

Choose a TensorFlow/Keras export when Teachable Machine offers one for your project. The Google Creative Lab examples use a Keras model, OpenCV for camera frames, NumPy for array preparation, and a labels file. The following pattern reflects that example:

from keras.models import load_model
import cv2
import numpy as np

model = load_model('keras_Model.h5', compile=False)
labels = open('labels.txt').readlines()

# frame is an image read from a camera or another source
frame = cv2.resize(frame, (224, 224), interpolation=cv2.INTER_AREA)
x = np.asarray(frame, dtype=np.float32).reshape(1, 224, 224, 3)
x = (x / 127.5) - 1
scores = model.predict(x)
index = int(np.argmax(scores))
print(labels[index].strip(), float(scores[0][index]))

Install and connect the runtime

The example uses TensorFlow Keras, OpenCV, and NumPy. Install versions compatible with your Python environment, then verify that the model file and labels.txt are in the paths used by your program. If you move them, update the paths instead of silently catching a file error.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Read the model’s preprocessing instructions

The 224×224 resize and the transformation (pixel / 127.5) - 1 are specific to that example. They map pixels to approximately the range −1 to 1. Another export may require a different input size, scaling range, channel order, or color conversion. Use the generated snippet or metadata as the authority. Changing preprocessing can make every prediction meaningless even when the program runs without an exception.

Camera-frame details

OpenCV commonly supplies frames in BGR order, while some models are trained with RGB input. The generated example and model documentation determine whether a channel conversion is required. Apply the same resize interpolation, dtype, shape, and channel order used during training and export.

Rank #4
Sale
Vaydeer Wrist Rest for Keyboard and Mouse, Computer Ergonomic Wrist Support Pad, Soft Memory Foam Arm Cushion for Desk, Palm Hand Office Laptop Typing
  • 【Softer and More Comfortable】Vaydeer wrist rest has unique diamond pattern, which is the combination of softness and aesthetics. The materials of wrist rest are improved into higher quality memory foam and covered with silky smooth lycra. The computer wrist rest makes you as comfortable and cushiony as like rest your wrists on clouds.
  • 【Ergonomic Wrist Saver】The wrist rests for keyboard and mouse comes with a 17.32×3.15×0.83 inch keyboard wrist pad and a 5.94×3.15×0.83 inch mouse wrist support. Based on ergonomic design, the unique concave shape is the perfect fit for your wrist joints. The wrist rest pad fits most computer keyboards and laptops, improve hand and wrist posture, release your wrist and arm stress.
  • 【Non-Slip Rubber Bottom】Featuring an anti-skid silicone base on the bottom, this wrist keyboard support stays firmly in place on your desk, preventing the padding from sliding around, ensuring stable and consistent wrist support during extended computer sessions.
  • 【Better Experience & Pain Relief】Our keyboard arm rest is beneficial to alleviate the soreness caused by direct contact and friction between your arm and a hard desk surface, reducing the risk of wrist fatigue or carpal tunnel. The soft texture of memory foam can evenly distribute the pressure around your wrists and provide good support with just enough give.
  • 【Helpful in Multiple Scenarios】Whether you're working, studying, writing, typing, gaming, this keyboard and mouse rest combo is an essential accessory to add comfort and support to your hands and wrists. It’s also a great gift for men, women, family, friend, coworker, gamer, teacher, etc.

Export for Python with TensorFlow Lite

TensorFlow Lite is the better fit when you need a compact interpreter, mobile or IoT deployment, or an Edge TPU workflow. A standard CPU TFLite interpreter follows the same model, label, input, and output contract; Edge TPU deployment adds the Edge TPU runtime and compatible hardware.

Basic interpreter flow

  1. Load the .tflite file with a TensorFlow Lite interpreter.
  2. Call allocate_tensors().
  3. Read the input tensor shape and dtype from get_input_details().
  4. Resize and normalize each frame exactly as required by that tensor.
  5. Set the input tensor, invoke inference, and read the output tensor.
  6. Map the highest score to the corresponding line in labels.txt.
import numpy as np
import tensorflow as tf

interpreter = tf.lite.Interpreter(model_path='model.tflite')
interpreter.allocate_tensors()
input_info = interpreter.get_input_details()[0]
output_info = interpreter.get_output_details()[0]

# Prepare frame according to the exported model's metadata.
input_shape = input_info['shape']
height, width = int(input_shape[1]), int(input_shape[2])
frame = cv2.resize(frame, (width, height), interpolation=cv2.INTER_AREA)
array = np.asarray(frame, dtype=input_info['dtype'])
array = np.expand_dims(array, axis=0)
interpreter.set_tensor(input_info['index'], array)
interpreter.invoke()
scores = interpreter.get_tensor(output_info['index'])[0]
index = int(np.argmax(scores))

The resize and conversion in this example are structural; the correct normalization depends on whether the exported tensor is float, quantized, or otherwise transformed. Inspect the input tensor’s dtype and scale information and follow the export instructions. Do not assume that the Keras normalization shown earlier applies to every TFLite file.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Edge TPU projects

The official Edge TPU example installs the Edge TPU runtime, PyCoral, Pillow, OpenCV, and related packages. It loads a .tflite model and labels.txt, allocates the interpreter, resizes frames to the interpreter’s input size, invokes inference, and reads class scores. Edge TPU hardware and a compatible compiled model are additional requirements; a regular CPU TFLite interpreter does not provide Edge TPU acceleration.

Hosted model versus downloaded model

Approach Advantages Trade-offs Best use
Upload for a shareable link Little file management; easy to place a model in a prototype. Requires network access and depends on the hosting service remaining available; you have less control over caching and deployment. Quick demos, classroom sharing, and early testing.
Download and self-host Works with your own static host, supports controlled releases, and can be used in offline development once served locally. You must copy every weight file, preserve paths, configure the server, and update the page when the model changes. Production sites, predictable deployments, and projects that need ownership of their assets.

Whichever method you choose, keep the model URL and the metadata URL consistent. A page that loads model.json from one version and metadata.json from another can show incorrect class names or fail validation.

Preprocessing is part of the model contract

Inference is more than calling predict. The input must match what the exported model expects.

  • Image dimensions: resize to the dimensions specified by the export, not a convenient size chosen by the page or camera.
  • Channels and order: preserve the expected RGB or BGR order and the number of channels.
  • Numeric type: use the required float or quantized integer dtype.
  • Scaling: apply the exact normalization formula from the generated snippet.
  • Audio sampling: preserve the helper’s sample rate, window length, and channel assumptions.
  • Pose input: provide the landmark representation and confidence handling expected by the pose helper.

These settings are not universal Teachable Machine constants. They belong to the particular exported artifact. If a model accepts data with the wrong shape, it may throw an error; if it accepts data with subtly wrong scaling or colors, it can return confident but useless results.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Support on Ko-Fi

Troubleshoot common failures

The page says that model.json cannot be found

Open the Network panel and inspect the requested URL. Confirm that the directory name and capitalization match the URL in your code, that the server is running from the directory containing the files, and that model.json was actually uploaded. A 404 response means the path is wrong or the file is missing.

Best Value
Sale
Under Desk Cable Management Tray No Drill, Metal Mesh Cable Management Under Desk with Clamp Mount, 2 Hole Cable Tray with Wire Management and Cord Organizer for Home Office Standing Desk
  • 【No Drill Mounted】Cable management tray can be assembled in as little as 3 minutes or less-simply. Side clips easily clampe the edge of desk, pass through the holes on the sides, and secure excess cables with baskets. Desk cable management supports inward or outward installation to meet your needs in different scenarios, and provides you with great convenience when collecting and organizing wires.
  • 【Rubber Pad Protects Desk】Wire organizer under desk built-in soft rubber pads on the clamp protect your desk from scratches, so you will not damage your furniture or office.
  • 【Sturdy and Beautiful】Cord management under desk is made of high-quality carbon steel and holds about 15 lbs. The wire basket has 2 holes on each side of the tray to enable your cables to pass freely. Cable baskets are suitable for desk thickness use from 0.4" to 2.4".
  • 【Space Saving & Keep Organized】Desk cable management tray holds all your power cords, outlet strips, USB hubs and computer transformers hidden from your feet, and the data cables will not enter the vacuum cleaner to keep your desk clean and tidy. Desk wire organizer is also suitable for use in the kitchen and outdoors.
  • 【Reduce Safety Risks】Cable tray under desk keeps all plugs away from your kids, no more worry about tripping. Using 2 holes wire tray saves extra space, helps you easily cabling and wire protection. The mesh design is not easy to accumulate dust, but avoids safety accidents caused by messy wires.

The model JSON loads but weights fail

Open model.json and check the relative weight filenames. Copy every referenced binary file into the expected directory without renaming it. A partial download, an altered filename, or a different directory layout prevents TensorFlow.js from reconstructing the model.

Opening the HTML file works visually but inference fails

Switch from file:// to a local HTTP server. Browser origin rules commonly block fetches and device APIs for local files. Test again at http://localhost:8000/, then use HTTPS for a public deployment.

The camera or microphone is blocked

Grant permission in the browser, make sure another application is not using the device, and use a secure context. Localhost is generally treated as a development secure context; a remote site should use HTTPS. Audio and pose projects also need the correct helper and capture loop, not only the model loader.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Predictions are nonsensical despite successful loading

Check the input dimensions, color order, normalization, dtype, and source quality against the generated export snippet. For a camera application, verify that the frame is not mirrored or cropped in a way that differs from the training examples. Use held-out examples that resemble real use rather than relying on the training preview.

Labels do not match the displayed classes

Ensure that the labels file or metadata.json belongs to the same model version. Do not mix metadata from a previous export with a newly trained model. If you changed class order or names, export the project again and replace the complete artifact set.

Test quality without inventing an accuracy number

There is no universal accuracy figure for arbitrary user-trained Teachable Machine models. Performance depends on the classes, training examples, camera or microphone conditions, and the application’s decision threshold. The authoritative material does not provide one number that can honestly represent every project.

Create a small held-out test set that was not used for training. Include changes in lighting, background, distance, angle, speaker, and ambient noise that your application will encounter. Record the predicted class and confidence, then inspect false positives and false negatives by class. For a user-facing interface, define what happens when confidence is low or when two classes are close; showing “uncertain” is often safer than forcing a wrong action.

What’s actually slowing this PC down?

Pick the symptom - the matching free tool is one click away.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

A practical deployment checklist

  • Select TensorFlow.js for browser or JavaScript deployment.
  • Select Keras/TensorFlow for Python only when that export is available for the project.
  • Select TensorFlow Lite for compact interpreter, mobile, IoT, or Edge TPU targets.
  • Keep model.json, metadata.json, and every referenced weight file together for a TensorFlow.js download.
  • Use the helper library that matches image, pose, or audio.
  • Copy the generated preprocessing exactly, including dimensions, channels, normalization, and sampling.
  • Serve downloaded files over HTTP during development and HTTPS in production.
  • Test with held-out, realistic examples and define a low-confidence behavior.

Final decision

For a website, export TensorFlow.js, load model.json and metadata.json with the matching Teachable Machine helper, and serve the complete asset set from HTTP(S). For Python, use the available Keras/TensorFlow export for a conventional application or TensorFlow Lite for lightweight and edge targets. The format determines the runtime, but the exported model’s own input and preprocessing instructions determine whether your predictions are valid.

Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.