Upload 3 files

app.py

@@ -0,0 +1,121 @@
+from flask import Flask, render_template, request
+import pandas as pd
+import joblib
+import plotly.graph_objects as go
+from plotly.subplots import make_subplots
+import plotly.io as pio
+
+app = Flask(__name__)
+
+# Load the pre-trained model from joblib (adjust the file path as needed)
+model = joblib.load('rf_model.pkl')
+
+# Define mapping dictionaries (must match those used during training)
+gender_mapping = {'Male': 0, 'Female': 1, 'Other': 2}
+ever_married_mapping = {'No': 0, 'Yes': 1}
+work_type_mapping = {'Private': 0, 'Self-employed': 1, 'Govt_job': 2, 'children': 3, 'Never_worked': 4}
+residence_mapping = {'Urban': 0, 'Rural': 1}
+smoking_status_mapping = {'never smoked': 0, 'formerly smoked': 1, 'smokes': 2, 'Unknown': 3}
+hypertension_mapping = {'No': 0, 'Yes': 1}
+heart_disease_mapping = {'No': 0, 'Yes': 1}
+stroke_mapping = {0: "No", 1: "Yes"}
+
+
+@app.route('/')
+def index():
+    return render_template('index.html')
+
+
+@app.route('/predict', methods=['POST'])
+def predict():
+    # Retrieve user input from the form
+    gender = request.form['gender']
+    age = float(request.form['age'])
+    hypertension = request.form['hypertension']
+    heart_disease = request.form['heart_disease']
+    ever_married = request.form['ever_married']
+    work_type = request.form['work_type']
+    residence = request.form['residence']
+    avg_glucose_level = float(request.form['avg_glucose_level'])
+    bmi = float(request.form['bmi'])
+    smoking_status = request.form['smoking_status']
+
+    # Convert categorical values using predefined mappings
+    gender_enc = gender_mapping.get(gender)
+    hypertension_enc = hypertension_mapping.get(hypertension)
+    heart_disease_enc = heart_disease_mapping.get(heart_disease)
+    ever_married_enc = ever_married_mapping.get(ever_married)
+    work_type_enc = work_type_mapping.get(work_type)
+    residence_enc = residence_mapping.get(residence)
+    smoking_status_enc = smoking_status_mapping.get(smoking_status)
+
+    # Prepare a DataFrame for prediction (one row)
+    input_data = pd.DataFrame([{
+        'gender': gender_enc,
+        'age': age,
+        'hypertension': hypertension_enc,
+        'heart_disease': heart_disease_enc,
+        'ever_married': ever_married_enc,
+        'work_type': work_type_enc,
+        'Residence_type': residence_enc,
+        'avg_glucose_level': avg_glucose_level,
+        'bmi': bmi,
+        'smoking_status': smoking_status_enc
+    }])
+
+    # Predict stroke risk
+    pred_numeric = model.predict(input_data)[0]
+    prediction_label = stroke_mapping[pred_numeric]
+    prediction_text = f"Predicted Stroke Risk: {prediction_label}"
+
+    # --- Create Gauge Charts for four key features ---
+    # We create four individual gauge indicators and arrange them in a 2x2 grid.
+    fig = make_subplots(rows=2, cols=2,
+                        specs=[[{'type': 'indicator'}, {'type': 'indicator'}],
+                               [{'type': 'indicator'}, {'type': 'indicator'}]],
+                        subplot_titles=("Age", "Avg Glucose Level", "BMI", "Smoking Status"))
+
+    # Gauge for Age (example range: 0 to 100)
+    fig.add_trace(go.Indicator(
+        mode="gauge+number",
+        value=age,
+        gauge={'axis': {'range': [None, 100]}}
+    ), row=1, col=1)
+
+    # Gauge for Avg Glucose Level (example range: 0 to 300)
+    fig.add_trace(go.Indicator(
+        mode="gauge+number",
+        value=avg_glucose_level,
+        gauge={'axis': {'range': [None, 300]}}
+    ), row=1, col=2)
+
+    # Gauge for BMI (example range: 10 to 60)
+    fig.add_trace(go.Indicator(
+        mode="gauge+number",
+        value=bmi,
+        gauge={'axis': {'range': [None, 60]}}
+    ), row=2, col=1)
+
+    # Gauge for Smoking Status (encoded: 0-3; lower is "better")
+    fig.add_trace(go.Indicator(
+        mode="gauge+number",
+        value=smoking_status_enc,
+        gauge={'axis': {'range': [None, 3]},
+               'bar': {'color': "darkorange"},
+               'steps': [
+                   {'range': [0, 1], 'color': "lightgreen"},
+                   {'range': [1, 2], 'color': "yellow"},
+                   {'range': [2, 3], 'color': "tomato"}
+               ]}
+    ), row=2, col=2)
+
+    fig.update_layout(height=500, margin=dict(t=50, b=0, l=25, r=25))
+
+    # Convert the Plotly figure to an HTML div string
+    gauge_html = pio.to_html(fig, full_html=False, include_plotlyjs='cdn')
+
+    return render_template('index.html', prediction_text=prediction_text, gauge_html=gauge_html)
+
+
+if __name__ == '__main__':
+    app.run(debug=True)

rf_model.pkl

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:9a7b7982aacb04be08aff27e085cee29e276636430e53d10e0e230db37c2e3ba
+size 7104489

templates/index.html

@@ -0,0 +1,269 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Brain Stroke Prediction</title>
+  <!-- Tailwind CSS CDN -->
+  <script src="https://cdn.tailwindcss.com"></script>
+  <!-- Google Fonts -->
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap"
+    rel="stylesheet"
+  />
+  <style>
+    body {
+      font-family: "Poppins", sans-serif;
+    }
+    /* Fade-in animation for the container */
+    @keyframes fadeIn {
+      from {
+        opacity: 0;
+        transform: translateY(20px);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+    .fade-in {
+      animation: fadeIn 0.8s ease-out;
+    }
+    /* Custom focus style for inputs and selects */
+    input:focus,
+    select:focus {
+      outline: none;
+      border-color: #60a5fa; /* Tailwind's blue-400 */
+      box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.5);
+    }
+  </style>
+</head>
+<body class="bg-gradient-to-r from-gray-100 via-blue-50 to-gray-100 min-h-screen">
+  <div class="max-w-3xl mx-auto p-8 mt-10 bg-white shadow-xl rounded-lg fade-in">
+    <!-- Page Title -->
+    <h1 class="text-4xl font-bold text-center mb-6 text-blue-700 animate-bounce">
+      Brain Stroke Prediction
+    </h1>
+
+    <!-- Form -->
+    <form action="/predict" method="post" class="space-y-6">
+      <!-- Gender -->
+      <div>
+        <label for="gender" class="block text-lg font-medium text-gray-800">
+          Gender
+        </label>
+        <select
+          name="gender"
+          id="gender"
+          class="mt-1 block w-full border border-gray-300 rounded-md p-2
+                 transition duration-300 ease-in-out hover:border-blue-500"
+        >
+          <option>Male</option>
+          <option>Female</option>
+          <option>Other</option>
+        </select>
+      </div>
+
+      <!-- Age -->
+      <div>
+        <label for="age" class="block text-lg font-medium text-gray-800">
+          Age
+        </label>
+        <input
+          type="number"
+          step="any"
+          name="age"
+          id="age"
+          class="mt-1 block w-full border border-gray-300 rounded-md p-2
+                 transition duration-300 ease-in-out hover:border-blue-500"
+          required
+        />
+      </div>
+
+      <!-- Hypertension -->
+      <div>
+        <label
+          for="hypertension"
+          class="block text-lg font-medium text-gray-800"
+        >
+          Hypertension
+        </label>
+        <select
+          name="hypertension"
+          id="hypertension"
+          class="mt-1 block w-full border border-gray-300 rounded-md p-2
+                 transition duration-300 ease-in-out hover:border-blue-500"
+        >
+          <option>No</option>
+          <option>Yes</option>
+        </select>
+      </div>
+
+      <!-- Heart Disease -->
+      <div>
+        <label
+          for="heart_disease"
+          class="block text-lg font-medium text-gray-800"
+        >
+          Heart Disease
+        </label>
+        <select
+          name="heart_disease"
+          id="heart_disease"
+          class="mt-1 block w-full border border-gray-300 rounded-md p-2
+                 transition duration-300 ease-in-out hover:border-blue-500"
+        >
+          <option>Yes</option>
+          <option>No</option>
+        </select>
+      </div>
+
+      <!-- Ever Married -->
+      <div>
+        <label
+          for="ever_married"
+          class="block text-lg font-medium text-gray-800"
+        >
+          Ever Married
+        </label>
+        <select
+          name="ever_married"
+          id="ever_married"
+          class="mt-1 block w-full border border-gray-300 rounded-md p-2
+                 transition duration-300 ease-in-out hover:border-blue-500"
+        >
+          <option>Yes</option>
+          <option>No</option>
+        </select>
+      </div>
+
+      <!-- Work Type -->
+      <div>
+        <label for="work_type" class="block text-lg font-medium text-gray-800">
+          Work Type
+        </label>
+        <select
+          name="work_type"
+          id="work_type"
+          class="mt-1 block w-full border border-gray-300 rounded-md p-2
+                 transition duration-300 ease-in-out hover:border-blue-500"
+        >
+          <option>Private</option>
+          <option>Self-employed</option>
+          <option>Govt_job</option>
+          <option>children</option>
+          <option>Never_worked</option>
+        </select>
+      </div>
+
+      <!-- Residence Type -->
+      <div>
+        <label for="residence" class="block text-lg font-medium text-gray-800">
+          Residence Type
+        </label>
+        <select
+          name="residence"
+          id="residence"
+          class="mt-1 block w-full border border-gray-300 rounded-md p-2
+                 transition duration-300 ease-in-out hover:border-blue-500"
+        >
+          <option>Urban</option>
+          <option>Rural</option>
+        </select>
+      </div>
+
+      <!-- Average Glucose Level -->
+      <div>
+        <label
+          for="avg_glucose_level"
+          class="block text-lg font-medium text-gray-800"
+        >
+          Average Glucose Level
+        </label>
+        <input
+          type="number"
+          step="any"
+          name="avg_glucose_level"
+          id="avg_glucose_level"
+          class="mt-1 block w-full border border-gray-300 rounded-md p-2
+                 transition duration-300 ease-in-out hover:border-blue-500"
+          required
+        />
+      </div>
+
+      <!-- BMI -->
+      <div>
+        <label for="bmi" class="block text-lg font-medium text-gray-800">
+          BMI
+        </label>
+        <input
+          type="number"
+          step="any"
+          name="bmi"
+          id="bmi"
+          class="mt-1 block w-full border border-gray-300 rounded-md p-2
+                 transition duration-300 ease-in-out hover:border-blue-500"
+          required
+        />
+      </div>
+
+      <!-- Smoking Status -->
+      <div>
+        <label
+          for="smoking_status"
+          class="block text-lg font-medium text-gray-800"
+        >
+          Smoking Status
+        </label>
+        <select
+          name="smoking_status"
+          id="smoking_status"
+          class="mt-1 block w-full border border-gray-300 rounded-md p-2
+                 transition duration-300 ease-in-out hover:border-blue-500"
+        >
+          <option>never smoked</option>
+          <option>formerly smoked</option>
+          <option>smokes</option>
+          <option>Unknown</option>
+        </select>
+      </div>
+
+      <!-- Submit Button -->
+      <button
+        type="submit"
+        class="w-full bg-blue-600 text-white py-3 px-4 rounded-md
+               hover:bg-blue-700 hover:shadow-lg transition
+               duration-300 ease-in-out transform hover:scale-105
+               text-xl font-semibold"
+      >
+        Predict Stroke Risk
+      </button>
+    </form>
+
+    <!-- Prediction output below the form -->
+    {% if prediction_text %}
+      <div
+        class="mt-8 p-4 bg-green-100 border border-green-400 text-green-700
+               rounded text-center transition duration-300 ease-in-out
+               transform hover:scale-105"
+      >
+        <p class="text-2xl font-bold">{{ prediction_text }}</p>
+      </div>
+    {% endif %}
+
+    <!-- Gauge charts output below the prediction -->
+    {% if gauge_html %}
+      <!-- No extra heading here to avoid duplication.
+           Make sure your gauge_html does NOT contain repeated headings. -->
+      <div
+        class="mt-8 fade-in bg-gradient-to-r from-blue-50 to-blue-100
+               p-4 rounded-lg shadow-inner hover:shadow-xl
+               transition duration-300 ease-in-out transform hover:scale-105"
+      >
+        {{ gauge_html|safe }}
+      </div>
+    {% endif %}
+  </div>
+</body>
+</html>