Campus Flora Finder: Offline Plant ID Guide

Updated 4 November 2026 · Standard formula, shown below

This guide walks you through building a campus flora finder that identifies plants entirely offline. You’ll create a mobile-friendly web app that uses a pre-trained image recognition model stored on your device, so no internet connection is needed after setup. By the end, you’ll have a working prototype that can recognize common campus plants from photos taken on your phone.

What You’ll Need

A computer with internet access for initial setup
A smartphone or tablet with a camera (for testing)
Basic familiarity with HTML, CSS, and JavaScript
A code editor (like VS Code or Notepad++)
Node.js installed on your computer (for running a local server)
A pre-trained plant recognition model (we’ll use MobileNet, which is free and open-source)
TensorFlow.js library (can be downloaded once and used offline)

Step-by-Step

Set up your project folder. Create a new folder on your computer called campus-flora-finder. Inside, create three subfolders: css, js, and models. This keeps your files organized.
Download TensorFlow.js. Go to the TensorFlow.js website and download the tf.min.js file (the minified version for browsers). Save it in your js folder. This library lets you run machine learning models in the browser.
Get a pre-trained model. Download the MobileNet model (a lightweight image recognition model) in TensorFlow.js format. You can find it in the TensorFlow.js model repository. Save the model files (the model.json and weight files) in your models folder. MobileNet is trained on ImageNet, which includes many plant categories.
Create the HTML structure. Create an index.html file in your project root. Include a video element for the camera feed, a canvas for capturing photos, a button to take a photo, and a div to display results. Link your CSS and JavaScript files.
Write the CSS. In your css folder, create a style.css file. Style the page to be mobile-friendly: make the video full-width, add padding, and use a clean font. Ensure buttons are large enough to tap easily.
Load the model in JavaScript. Create a main.js file in your js folder. Use TensorFlow.js to load your MobileNet model from the models folder. The code should look like: const model = await tf.loadLayersModel('models/model.json'); Make sure the path is correct relative to your HTML file.
Access the camera. Use the getUserMedia API to access the phone’s camera. Request the rear camera if possible. Display the live feed in the video element. Handle errors if the user denies permission.
Capture a photo. When the user taps the capture button, draw the current video frame onto the canvas. Use canvas.getContext('2d').drawImage(video, 0, 0, width, height) to capture the image.
Preprocess the image. MobileNet expects images of a specific size (usually 224×224 pixels). Resize the captured image to that size. Also, normalize the pixel values: convert the image to a tensor, and scale values from 0-255 to -1 to 1 (or 0 to 1, depending on the model’s requirements).
Run the prediction. Pass the preprocessed tensor to the model using model.predict(tensor). This returns a probability distribution over the 1000 ImageNet classes. Extract the top 5 predictions with their labels.
Map to plant names. The ImageNet labels are numeric IDs. You’ll need a mapping file that translates these IDs to human-readable plant names. Download the ImageNet class names file (a JSON file) and include it in your project. Use it to display the top prediction as a plant name.
Display results. Show the top prediction and its confidence score on the page. For example, “Daisy (Bellis perennis) – 92% confidence”. You can also show a list of other possible matches.
Test offline. Once everything works on your computer, transfer the entire project folder to your phone (via USB or cloud storage). Open the index.html file in your phone’s browser. Since all files are local, it should work without internet. Test it on a few plants to verify accuracy.
Improve accuracy (optional). If you want to recognize specific campus plants, you can train a custom model using TensorFlow.js and transfer learning. Collect photos of campus plants, label them, and train a small model on top of MobileNet. This requires more work but gives better results for your specific campus.

Common Mistakes

Wrong model path: The most common issue is an incorrect path to the model files. Always use relative paths and test from the same directory structure.
Forgetting to normalize the image: If you don’t scale pixel values correctly, the model will produce garbage predictions. Check the model’s documentation for the expected input range.
Ignoring image size: MobileNet expects 224×224 input. Feeding it a larger or smaller image will cause errors or poor results.
Not handling camera permission: If the user denies camera access, your app will crash. Always check for errors and show a friendly message.
Using the wrong model version: There are different MobileNet versions (v1, v2, v3). Make sure you download a version that works with TensorFlow.js and note its expected input size.
Overlooking browser compatibility: Some older browsers don’t support getUserMedia or WebGL. Test on modern browsers like Chrome or Safari.

Tips

Use a local server for testing: Running python -m http.server or using a Node.js server prevents CORS issues when loading local files.
Cache the model: If you’re serving the app over the web initially, you can use service workers to cache the model files for offline use.
Include a loading indicator: Model loading can take a few seconds. Show a spinner or progress bar so the user knows the app is working.
Take photos in good lighting: The model works best with well-lit, in-focus images. Encourage users to get close to the plant and avoid shadows.
Start with a small set of plants: For a campus finder, you might only need to recognize 20-30 common species. A smaller custom model will be faster and more accurate.
Add a manual fallback: Sometimes the model will be wrong. Include a link to a plant database or a note that the result is a suggestion, not a definitive ID.

Troubleshooting

Model fails to load: Check that the model files are in the correct folder and the path in your JavaScript is correct. Open the browser’s developer console (F12) to see any error messages. Ensure you’re using a local server, not opening the file directly.
Camera doesn’t start: Make sure you’re using HTTPS or localhost (camera access requires a secure context). Check that the phone’s browser has camera permission enabled. On some phones, you may need to grant permission in settings.
Predictions are always wrong: Verify that you’re preprocessing the image correctly. Check the input tensor shape and normalization. Test with a known image (e.g., a photo of a rose) to see if the model gives a plausible result.
App is slow: MobileNet is lightweight but still requires processing power. Close other apps, and consider using a smaller model variant (like MobileNet v1 with alpha=0.25) for faster performance.
Results show “undefined” or numbers: Your class names mapping is missing or incorrect. Make sure the JSON file with labels is loaded and that the indices match the model’s output.
Page is blank: Check the browser console for JavaScript errors. Common issues include typos in variable names, missing semicolons, or incorrect function calls. Ensure all files are linked correctly.

Frequently Asked Questions

Q: Can I use any plant recognition model?
A: Yes, but it must be in TensorFlow.js format to run in the browser. You can convert models from Keras or TensorFlow using the tfjs-converter tool.

Q: How accurate is this offline model?
A: MobileNet trained on ImageNet has about 70-80% top-1 accuracy on general images. For specific campus plants, accuracy may be lower. Training a custom model on your campus plants will improve accuracy significantly.

Q: Will this work on any smartphone?
A: It should work on most modern smartphones with a browser that supports WebGL and getUserMedia. Older devices may be slower but should still function.

Q: Can I add more plants later?
A: Yes, you can retrain the model with new images and update the model files. You’ll also need to update the class names mapping.

Q: Do I need to know machine learning to build this?
A: No, you can use a pre-trained model without understanding the underlying algorithms. Basic JavaScript knowledge is sufficient.

Q: Is it possible to identify plants from photos taken earlier?
A: Yes, you can add a file input to let users upload an image from their gallery instead of taking a live photo. The preprocessing and prediction steps are the same.

Method: the standard formula for this calculation, rounded as each result states. See how the calculators work or report an error.