/web-to-ai-ml-integrations

Handle Multiple ML Models in Web App

Step-by-step guide for integrating and managing multiple ML models in your web app to boost performance and scalability.

Book a free  consultation
4.9
Clutch rating 🌟
600+
Happy partners
17+
Countries served
190+
Team members
Matt Graham, CEO of Rapid Developers

Book a call with an Expert

Starting a new venture? Need to upgrade your web app? RapidDev builds application with your growth in mind.

Book a free No-Code consultation

Handle Multiple ML Models in Web App

Implementing a Model Manager

 
  • Overview: Create a dedicated component that loads and stores each ML model so that the application can reference them during inference. This component abstracts the complexity of model loading and management.
  • Steps: Develop a class (or module) called ModelManager that reads model files (e.g., serialized objects, TensorFlow SavedModels, or PyTorch models) and stores them in a dictionary or similar collection. Each key represents a model identifier (like a name or version) and maps to its loaded instance.

// Example in Python (using Flask as a web framework)
import pickle           // For loading pickle-based models
import tensorflow as tf // If using TensorFlow models

class ModelManager:
def init(self):
// Initialize the dictionary to hold models
self.models = {}

def load_pickle_model(self, model_name, file_path):
    // Load a pickle model and store it in the dictionary
    with open(file\_path, 'rb') as f:
        model = pickle.load(f)
    self.models[model\_name] = model

def load_tf_model(self, model_name, directory_path):
    // Load a TensorFlow SavedModel
    model = tf.keras.models.load_model(directory_path)
    self.models[model\_name] = model

def get_model(self, model_name):
    // Retrieve the model instance based on the name
    return self.models.get(model\_name, None)

// Initialize and load models (this would occur during your app startup)
model_manager = ModelManager()
model_manager.load_pickle_model('classifier', 'models/classifier.pkl')
model_manager.load_tf_model('regressor', 'models/regressor')


 

Developing API Endpoints for Multiple Models

 
  • Overview: The web application should expose API endpoints that allow clients to specify which ML model to use for predictions. You can either create separate endpoints per model or a single unified endpoint that accepts a parameter indicating the selected model.
  • Dynamic Routing: Use routing parameters to capture the model identifier directly from the URL or from the request body. The API then routes the request to the appropriate model via the ModelManager.

// Using Flask to create API endpoints
from flask import Flask, request, jsonify
app = Flask(**name**)

@app.route('/predict/<model_name>', methods=['POST'])
def predict(model_name):
// Retrieve the requested model
model = model_manager.get_model(model_name)
if model is None:
return jsonify({'error': 'Model not found'}), 404

// Assume the input is passed as JSON with the key "data"
input\_data = request.json.get('data')
if input\_data is None:
    return jsonify({'error': 'No input data provided'}), 400

// Perform prediction using the selected model
// The prediction logic may differ based on the model type
try:
    // For pickle-based models, assume a predict() method exists
    if model\_name == 'classifier':
        prediction = model.predict([input\_data])
    // For TensorFlow models, ensure data is preprocessed appropriately
    elif model\_name == 'regressor':
        prediction = model.predict([input\_data]).tolist()
    else:
        prediction = 'Unsupported model type'
except Exception as e:
    return jsonify({'error': str(e)}), 500

return jsonify({'model': model\_name, 'prediction': prediction})

if name == 'main':
app.run(debug=True)


 

Integrating Asynchronous Processing for Model Inference

 
  • Overview: Predictions might be computationally intensive. Offloading these operations asynchronously prevents web requests from blocking. Techniques such as asynchronous endpoints or job queues help maintain a responsive web application.
  • Techniques:
    • Async Endpoints: Use frameworks like FastAPI (which natively supports asynchronous methods) to handle concurrent requests efficiently.
    • Task Queues: Integrate a task queue (like Celery) to schedule longer-running predictions, returning a job identifier to the client. The client then polls for the result.

// Example using asynchronous endpoints with FastAPI
from fastapi import FastAPI, HTTPException
from pydantic import BaseModel

app = FastAPI()

class PredictionRequest(BaseModel):
data: list // Expected list of inputs

@app.post('/predict_async/{model_name}')
async def predict_async(model_name: str, request_data: PredictionRequest):
model = model_manager.get_model(model_name)
if model is None:
raise HTTPException(status_code=404, detail="Model not found")

try:
    // Run prediction asynchronously if supported, else run in a thread pool
    prediction = await run_model_prediction(model, request\_data.data)
except Exception as e:
    raise HTTPException(status\_code=500, detail=str(e))

return {'model': model\_name, 'prediction': prediction}

// Dummy async function to simulate prediction
async def run_model_prediction(model, data):
// In a real-world scenario, you might offload this work to a dedicated async routine
return model.predict([data]).tolist()


 

Integrating with the Front-End Web Application

 
  • Overview: The front-end interacts with the backend endpoints to request predictions. Use JavaScript (or any front-end language) to call these endpoints and display results to users.
  • Aspects to Consider:
    • Handling Multiple Models: Provide UI elements (like dropdowns) to let users select which model they wish to use.
    • Response Management: Process the JSON responses from the API appropriately. Display loading states for asynchronous predictions and errors if they occur.

// Example JavaScript fetch to a prediction endpoint
async function requestPrediction(modelName, inputData) {
    try {
        const response = await fetch(`/predict/${modelName}`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({data: inputData})
        });
        if (!response.ok) {
            // Handle error responses
            const errorData = await response.json();
            console.error('Error:', errorData.error);
            return;
        }
        const result = await response.json();
        console.log('Prediction:', result.prediction);
        // Update the UI with the prediction result
    } catch (error) {
        console.error('Request failed:', error);
    }
}
 

Handling Model-Specific Preprocessing and Postprocessing

 
  • Overview: Different ML models often require their own preprocessing (e.g., scaling, tokenization) and postprocessing (e.g., decoding probabilities, formatting output). Enhance flexibility by coupling model-specific logic with your ModelManager framework.
  • Implementation: Either embed preprocessing/postprocessing functions within the ModelManager or associate each model with its own helper functions. Ensure that your API endpoint calls the proper routines before and after inference.

// Example extension in the ModelManager for preprocessing
class ModelManager:
    def **init**(self):
        self.models = {}
        self.preprocessors = {}
        self.postprocessors = {}
        
def register_model(self, model_name, model, preprocess_fn=None, postprocess_fn=None):
    self.models[model\_name] = model
    self.preprocessors[model_name] = preprocess_fn
    self.postprocessors[model_name] = postprocess_fn

def predict(self, model_name, raw_input):
    model = self.models.get(model\_name)
    if model is None:
        raise Exception("Model not registered")
    
    // Preprocess input if a function is provided
    pre_fn = self.preprocessors.get(model_name)
    if pre\_fn:
        processed_input = pre_fn(raw\_input)
    else:
        processed_input = raw_input
        
    // Run the prediction
    prediction = model.predict([processed\_input])
    
    // Postprocess output if a function is provided
    post_fn = self.postprocessors.get(model_name)
    if post\_fn:
        return post\_fn(prediction)
    return prediction

// Example usage:
def classifier_preprocess(data):
// Insert any classifier specific transformation
return data

def classifier_postprocess(prediction):
// For example, convert probabilities to class labels
return prediction

// Register the classifier with its functions
model_manager.register_model('classifier', loaded_classifier_model, classifier_preprocess, classifier_postprocess)


 


Recognized by the best

Trusted by 600+ businesses globally

From startups to enterprises and everything in between, see for yourself our incredible impact.

RapidDev was an exceptional project management organization and the best development collaborators I've had the pleasure of working with.

They do complex work on extremely fast timelines and effectively manage the testing and pre-launch process to deliver the best possible product. I'm extremely impressed with their execution ability.

Arkady
CPO, Praction
Working with Matt was comparable to having another co-founder on the team, but without the commitment or cost.

He has a strategic mindset and willing to change the scope of the project in real time based on the needs of the client. A true strategic thought partner!

Donald Muir
Co-Founder, Arc
RapidDev are 10/10, excellent communicators - the best I've ever encountered in the tech dev space.

They always go the extra mile, they genuinely care, they respond quickly, they're flexible, adaptable and their enthusiasm is amazing.

Mat Westergreen-Thorne
Co-CEO, Grantify
RapidDev is an excellent developer for custom-code solutions.

We’ve had great success since launching the platform in November 2023. In a few months, we’ve gained over 1,000 new active users. We’ve also secured several dozen bookings on the platform and seen about 70% new user month-over-month growth since the launch.

Emmanuel Brown
Co-Founder, Church Real Estate Marketplace
Matt’s dedication to executing our vision and his commitment to the project deadline were impressive. 

This was such a specific project, and Matt really delivered. We worked with a really fast turnaround, and he always delivered. The site was a perfect prop for us!

Samantha Fekete
Production Manager, Media Production Company
The pSEO strategy executed by RapidDev is clearly driving meaningful results.

Working with RapidDev has delivered measurable, year-over-year growth. Comparing the same period, clicks increased by 129%, impressions grew by 196%, and average position improved by 14.6%. Most importantly, qualified contact form submissions rose 350%, excluding spam.

Appreciation as well to Matt Graham for championing the collaboration!

Michael W. Hammond
Principal Owner, OCD Tech

We put the rapid in RapidDev

Need a dedicated strategic tech and growth partner? Discover what RapidDev can do for your business! Book a call with our team to schedule a free, no-obligation consultation. We’ll discuss your project and provide a custom quote at no cost.Â