Deploying Machine Learning Models in the Browser for Faster, Private Predictions

This article explores a powerful approach to machine learning deployment: running models directly within the user’s browser, eliminating the need for server-side inference. By leveraging libraries like onnxruntime-web, developers can achieve faster prediction times, enhanced data privacy, and reduced infrastructure costs. This method is demonstrated through the deployment of a Mental Health Treatment Prediction model, providing a practical guide for implementing browser-based ML.

The Case for In-Browser ML

Traditionally, machine learning models reside on backend servers, necessitating a network call for every prediction. While effective, this approach introduces latency, exposes data to servers, and incurs operational expenses. Running models client-side addresses these challenges by:
* Increasing Speed: Predictions are instantaneous as data never leaves the user’s device.
* Enhancing Privacy: Sensitive user data remains local, never being transmitted to a server.
* Reducing Infrastructure: Eliminates the need for dedicated inference servers, simplifying architecture and lowering costs.

Step-by-Step Browser Deployment

The process of deploying an ONNX-formatted machine learning model in the browser with onnxruntime-web involves several key stages:

1. Model Export and Preparation:
   • Begin with a trained machine learning model, such as a RandomForest classifier.
   • Export the model to the Open Neural Network Exchange (ONNX) format, which is compatible with onnxruntime-web.
   • Place the ONNX model file in the public assets folder of your frontend project (e.g., public/ in a Next.js application).
2. Frontend Environment Setup:
   • Ensure basic proficiency in Python (for model training/export) and JavaScript (for browser execution).
   • Set up a JavaScript-based frontend project (e.g., plain HTML/JS, React, Next.js).
   • Install the onnxruntime-web library: npm install onnxruntime-web. This package facilitates running ONNX models using WebAssembly (WASM) or WebGL for optimized performance.
3. Data Preparation for Inference:
   • Crucially, input data for browser-based inference must precisely match the format, encoding, and feature order used during the model’s training phase.
   • Identify all features the model was trained on (e.g., age, gender, family history, work interfere).
   • Implement consistent encoding schemes:
     • Binary Encoding: For Yes/No values (e.g., 1 for Yes, 0 for No).
     • Ordinal Encoding: For ordered categorical features (e.g., “Very easy” → 0, “Somewhat easy” → 1).
     • One-Hot Encoding: For nominal categorical features with multiple categories.
   • The encoding logic in the frontend application must mirror the preprocessing steps applied to the training data.
4. Loading and Running the ONNX Model:
   • Import onnxruntime-web into your JavaScript code.
   • Use ort.InferenceSession.create("your_model_name.onnx") to asynchronously load the model.
   • Transform the encoded input data into an ort.Tensor of the correct data type (e.g., float32) and shape (e.g., [1, num_features]).
   • Create a feeds object where the key matches the input name specified during the ONNX model export (e.g., float_input).
   • Execute inference using session.run(feeds).
   • Process the output, typically extracting the predicted label and associated probabilities.
5. Displaying Results:
   • Once inference is complete, the prediction (e.g., “Needs Treatment” or “No Treatment”) and probability scores can be displayed directly within the user interface, providing immediate feedback.

Conclusion

Deploying machine learning models in the browser with onnxruntime-web represents a significant advancement in client-side AI. This method offers compelling benefits in terms of speed, data privacy, and accessibility, making it an attractive solution for a wide range of applications where real-time, on-device predictions are critical.