I have the following API
Area,Consumer_profile,Product_category,Product_type,AC_1001_Issue,AC_1002_Issue,AC_1003_Issue,TV_2001_Issue,TV_2002_Issue,TV_2003_Issue,Claim_Value,Service_Centre,Product_Age,Purchased_from,Call_details,Purpose,Fraud,IDRural,Personal,Household,AC,0.0,1.0,2.0,0.0,0.0,0.0,4474.0,12.0,202.0,Manufacturer,30.0,Claim,0,7957.0Urban,Personal,Entertainment,TV,0.0,0.0,0.0,1.0,1.0,1.0,25000.0,13.0,60.0,Dealer,1.3,Complaint,0,1396.0Rural,Business,Household,AC,0.0,0.0,0.0,0.0,0.0,0.0,10000.0,12.0,3.0,Dealer,2.5,Claim,0,7582.0Rural,Personal,Entertainment,TV,0.0,0.0,0.0,1.0,1.0,0.0,4216.0,10.0,672.0,Dealer,25.0,Other,0,5824.0Rural,Business,Household,AC,0.0,0.0,0.0,0.0,0.0,0.0,20000.0,13.0,3.0,Manufacturer,6.5,Claim,0,4086.0Urban,Personal,Entertainment,TV,0.0,0.0,0.0,0.0,1.0,1.0,4000.0,10.0,275.0,Dealer,11.0,Claim,0,6721.0Rural,Business,Entertainment,TV,0.0,0.0,0.0,0.0,0.0,0.0,50000.0,12.0,10.0,Manufacturer,1.6,Claim,0,1185.0Urban,Personal,Household,AC,0.0,2.0,1.0,0.0,0.0,0.0,13000.0,13.0,7.0,Manufacturer,1.6,Claim,0,3954.0Urban,Business,Household,AC,1.0,0.0,0.0,0.0,0.0,0.0,10000.0,13.0,6.0,Dealer,1.4,Complaint,0,8820.0Rural,Business,Entertainment,TV,0.0,0.0,0.0,0.0,0.0,0.0,25000.0,10.0,4.0,Dealer,0.5,Complaint,0,58231.0.........Urban,Personal,Entertainment,TV,0.0,0.0,0.0,0.0,0.0,0.0,10000.0,14.0,60.0,Dealer,1.4,Complaint,0,6689.0Which is available to see here https://www.kaggle.com/datasets/amanneo/df-cleancsv
I can do requests to my API sucessfully by Postman
from flask import Flask, request, jsonifyfrom flask_cors import CORSimport joblibimport tracebackimport pandas as pdimport sysapp = Flask(__name__)CORS(app)@app.route('/predict', methods=['POST'])def predict(): if model: try: json_ = request.json print(json_) query = pd.DataFrame(json_) query = query.reindex(columns=model_columns)""" for col in numeric_features: if query[col].isnull().any(): query[col].fillna(X[col].mean(), inplace=True)""" query = query.reindex(columns=model_columns, fill_value = 0) probabilities = model.predict_proba(query)[:, 1] # Probabilidad de fraude predictions = [1 if p >= 0.5 else 0 for p in probabilities] response = [{"probability": float(prob), "fraud": int(pred)} for prob, pred in zip(probabilities, predictions)] return jsonify(response) except Exception as e: return jsonify({'trace': traceback.format_exc()}) else: print ('Train the model first') return ('No model here to use')if __name__ == '__main__': try: port = int(sys.argv[1]) except: port = 12345 model = joblib.load("../Models/model.pkl") model_columns = joblib.load("../Models/model_columns.pkl") # numeric_features = joblib.load("../Models/numeric_features.pkl") app.run(port = port, debug = True)With this example data
[ {"Area": "Urban","Consumer_profile": "Personal","Product_category": "Entertainment","Product_type": "TV","AC_1001_Issue": 0.0,"AC_1002_Issue": 0.0,"AC_1003_Issue": 0.0,"TV_2001_Issue": 1.0,"TV_2002_Issue": 1.0,"TV_2003_Issue": 0.0,"Claim_Value": 25000.0,"Service_Centre": 13.0,"Product_Age": 60.0,"Purchased_from": "Dealer","Call_details": 1.3,"Purpose": "Complaint" }, {"Area": "Rural","Consumer_profile": "Commercial","Product_category": "Appliances","Product_type": "Washing Machine","AC_1001_Issue": 1.0,"AC_1002_Issue": 0.0,"AC_1003_Issue": 0.0,"TV_2001_Issue": 0.0,"TV_2002_Issue": 0.0,"TV_2003_Issue": 0.0,"Claim_Value": 15000.0,"Service_Centre": 8.0,"Product_Age": 24.0,"Purchased_from": "Online","Call_details": 2.0,"Purpose": "Repair" } ]I get the following output in Postman (It´s correct):
[ {"fraud": 0,"probability": 0.01 }, {"fraud": 0,"probability": 0.03923567770672705 }]But I´m trying to create a simple front end that can interact with my API and I´m not able to do it. This is mi code:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Fraud Detection Form</title><style> body { font-family: Arial, sans-serif; background-color: #f0f0f0; padding: 20px; } h2 { text-align: center; } form { background-color: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 0 10px rgba(0,0,0,0.1); max-width: 600px; margin: 20px auto; } label { display: block; margin: 10px 0 5px; } input, select { width: 100%; padding: 8px; margin-bottom: 10px; } button { background-color: #007BFF; color: #fff; padding: 10px; border: none; border-radius: 4px; cursor: pointer; } button:hover { background-color: #0056b3; } .result { margin-top: 20px; padding: 10px; border-radius: 4px; text-align: center; } .fraud { background-color: #ff4d4d; color: white; } .no-fraud { background-color: #4CAF50; color: white; }</style></head><body><h2>Warranty Claim Fraud Detection</h2><form id="fraudForm"><label for="area">Area:</label><select name="Area" id="area"><option value="Urban">Urban</option><option value="Rural">Rural</option></select><label for="consumer_profile">Consumer profile:</label><select name="Consumer_profile" id="consumer_profile"><option value="Personal">Personal</option><option value="Business">Business</option></select><label for="product_category">Product category:</label><select name="Product_category" id="product_category"><option value="Entertainment">Entertainment</option><option value="Household">Household</option></select><label for="product_type">Product type:</label><select name="Product_type" id="product_type"><option value="TV">TV</option><option value="AC">AC</option></select><label>AC 1001 Issue:</label><input type="number" name="AC_1001_Issue" step="0.1" value="0.2" required><label>AC 1002 Issue:</label><input type="number" name="AC_1002_Issue" step="0.1" value="1.5" required><label>AC 1003 Issue:</label><input type="number" name="AC_1003_Issue" step="0.1" value="1.0" required><label>TV 2001 Issue:</label><input type="number" name="TV_2001_Issue" step="0.1" value="1.7" required><label>TV 2002 Issue:</label><input type="number" name="TV_2002_Issue" step="0.1" value="1.0" required><label>TV 2003 Issue:</label><input type="number" name="TV_2003_Issue" step="0.1" value="0.8"required><label>Claim Value:</label><input type="number" name="Claim_Value" step="0.1" value="55555.0" required><label>Service Centre:</label><input type="number" name="Service_Centre" step="0.1" value="50.0" required><label>Product Age (months):</label><input type="number" name="Product_Age" step="0.1" value="890.0" required><label for="purchased_from">Purchased from:</label><select name="Purchased_from" id="purchased_from"><option value="Manufacturer">Manufacturer</option><option value="Dealer">Dealer</option></select><label>Call Details:</label><input type="number" name="Call_details" step="0.1" value="0" required><label for="purpose">Purpose:</label><select name="Purpose" id="purpose"><option value="Claim">Claim</option><option value="Complaint">Complaint</option></select><button type="submit">Submit</button></form><div id="result"></div><script> document.getElementById('fraudForm').addEventListener('submit', async function(event) { event.preventDefault(); const formData = new FormData(this); const jsonData = [Object.fromEntries(formData.entries())]; try { const response = await fetch('127.0.0.1:12345/predict', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(jsonData) }); if (!response.ok) throw new Error('Network response was not ok'); const data = await response.json(); const resultDiv = document.getElementById('result'); const result = data[0]; // El primer objeto de la lista de respuesta if (result.fraud === 1) { resultDiv.textContent = `Fraud detected with probability ${result.probability.toFixed(2)}`; resultDiv.className = 'result fraud'; } else { resultDiv.textContent = `No fraud detected with probability ${result.probability.toFixed(2)}`; resultDiv.className = 'result no-fraud'; } } catch (error) { console.error('Error:', error); const resultDiv = document.getElementById('result'); resultDiv.textContent = 'An error occurred while submitting the form. Please try again.'; resultDiv.className = 'result fraud'; } });</script></body></html>I always get an error:
