Upload 18 files

.gitattributes

@@ -1,35 +1,35 @@
-*.7z filter=lfs diff=lfs merge=lfs -text
-*.arrow filter=lfs diff=lfs merge=lfs -text
-*.bin filter=lfs diff=lfs merge=lfs -text
-*.bz2 filter=lfs diff=lfs merge=lfs -text
-*.ckpt filter=lfs diff=lfs merge=lfs -text
-*.ftz filter=lfs diff=lfs merge=lfs -text
-*.gz filter=lfs diff=lfs merge=lfs -text
-*.h5 filter=lfs diff=lfs merge=lfs -text
-*.joblib filter=lfs diff=lfs merge=lfs -text
-*.lfs.* filter=lfs diff=lfs merge=lfs -text
-*.mlmodel filter=lfs diff=lfs merge=lfs -text
-*.model filter=lfs diff=lfs merge=lfs -text
-*.msgpack filter=lfs diff=lfs merge=lfs -text
-*.npy filter=lfs diff=lfs merge=lfs -text
-*.npz filter=lfs diff=lfs merge=lfs -text
-*.onnx filter=lfs diff=lfs merge=lfs -text
-*.ot filter=lfs diff=lfs merge=lfs -text
-*.parquet filter=lfs diff=lfs merge=lfs -text
-*.pb filter=lfs diff=lfs merge=lfs -text
-*.pickle filter=lfs diff=lfs merge=lfs -text
-*.pkl filter=lfs diff=lfs merge=lfs -text
-*.pt filter=lfs diff=lfs merge=lfs -text
-*.pth filter=lfs diff=lfs merge=lfs -text
-*.rar filter=lfs diff=lfs merge=lfs -text
-*.safetensors filter=lfs diff=lfs merge=lfs -text
-saved_model/**/* filter=lfs diff=lfs merge=lfs -text
-*.tar.* filter=lfs diff=lfs merge=lfs -text
-*.tar filter=lfs diff=lfs merge=lfs -text
-*.tflite filter=lfs diff=lfs merge=lfs -text
-*.tgz filter=lfs diff=lfs merge=lfs -text
-*.wasm filter=lfs diff=lfs merge=lfs -text
-*.xz filter=lfs diff=lfs merge=lfs -text
-*.zip filter=lfs diff=lfs merge=lfs -text
-*.zst filter=lfs diff=lfs merge=lfs -text
-*tfevents* filter=lfs diff=lfs merge=lfs -text
+*.7z filter=lfs diff=lfs merge=lfs -text
+*.arrow filter=lfs diff=lfs merge=lfs -text
+*.bin filter=lfs diff=lfs merge=lfs -text
+*.bz2 filter=lfs diff=lfs merge=lfs -text
+*.ckpt filter=lfs diff=lfs merge=lfs -text
+*.ftz filter=lfs diff=lfs merge=lfs -text
+*.gz filter=lfs diff=lfs merge=lfs -text
+*.h5 filter=lfs diff=lfs merge=lfs -text
+*.joblib filter=lfs diff=lfs merge=lfs -text
+*.lfs.* filter=lfs diff=lfs merge=lfs -text
+*.mlmodel filter=lfs diff=lfs merge=lfs -text
+*.model filter=lfs diff=lfs merge=lfs -text
+*.msgpack filter=lfs diff=lfs merge=lfs -text
+*.npy filter=lfs diff=lfs merge=lfs -text
+*.npz filter=lfs diff=lfs merge=lfs -text
+*.onnx filter=lfs diff=lfs merge=lfs -text
+*.ot filter=lfs diff=lfs merge=lfs -text
+*.parquet filter=lfs diff=lfs merge=lfs -text
+*.pb filter=lfs diff=lfs merge=lfs -text
+*.pickle filter=lfs diff=lfs merge=lfs -text
+*.pkl filter=lfs diff=lfs merge=lfs -text
+*.pt filter=lfs diff=lfs merge=lfs -text
+*.pth filter=lfs diff=lfs merge=lfs -text
+*.rar filter=lfs diff=lfs merge=lfs -text
+*.safetensors filter=lfs diff=lfs merge=lfs -text
+saved_model/**/* filter=lfs diff=lfs merge=lfs -text
+*.tar.* filter=lfs diff=lfs merge=lfs -text
+*.tar filter=lfs diff=lfs merge=lfs -text
+*.tflite filter=lfs diff=lfs merge=lfs -text
+*.tgz filter=lfs diff=lfs merge=lfs -text
+*.wasm filter=lfs diff=lfs merge=lfs -text
+*.xz filter=lfs diff=lfs merge=lfs -text
+*.zip filter=lfs diff=lfs merge=lfs -text
+*.zst filter=lfs diff=lfs merge=lfs -text
+*tfevents* filter=lfs diff=lfs merge=lfs -text

Dockerfile

@@ -0,0 +1,20 @@
+# Using Python 3.9 base image
+FROM python:3.9
+
+# Set the working directory to /code
+WORKDIR /code
+
+# Install necessary system dependencies, including libGL.so.1
+RUN apt-get update && apt-get install -y libgl1 && apt-get clean
+
+# Copy requirements.txt to /code
+COPY ./requirements.txt /code/requirements.txt
+
+# Install dependencies from requirements.txt
+RUN pip install --no-cache-dir --upgrade -r requirements.txt
+
+# Copy the entire project content to /code
+COPY . /code
+
+# CMD to run Gunicorn
+CMD ["gunicorn", "main:app", "-b", "0.0.0.0:7860"]

README.md

@@ -1,10 +1,11 @@
----
-title: Braintumor
-emoji: 🏃
-colorFrom: pink
-colorTo: red
-sdk: docker
-pinned: false
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+---
+title: Flask
+emoji: 🚀
+colorFrom: yellow
+colorTo: red
+sdk: docker
+pinned: false
+license: cc
+---
+
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

cnn.txt

@@ -0,0 +1,67 @@
+In this Flask application, the model you're loading (`braintumor_model`) is a Convolutional Neural Network (CNN) trained to detect brain tumors in images. The CNN model is used to classify the images after preprocessing and passing them through the network. 
+Here's a breakdown of how CNN is used and how it's integrated into your Flask app:
+
+Key Concepts of CNN in Your Application
+
+1. Convolutional Layers (Feature Extraction):
+   CNNs are designed to automatically learn spatial hierarchies of features from the input image (in this case, brain tumor images).
+   The convolutional layers apply convolutional filters (kernels) that detect low-level features like edges, corners, and textures. As the image passes through multiple layers of convolutions, it progressively detects more complex features like shapes or regions of interest.
+
+2. Pooling Layers (Downsampling):
+   After convolutions, pooling layers (often Max Pooling) are applied to reduce the spatial dimensions of the feature maps.
+   This helps in reducing the computational complexity while preserving important features.
+
+3. Fully Connected Layers (Classification):
+   After the feature extraction and downsampling, the CNN typically flattens the resulting feature maps into a 1D vector and feeds it into fully connected layers (Dense layers).
+   The final fully connected layer outputs the prediction, which can be a binary classification in your case (whether a tumor is present or not).
+
+4. Activation Functions (Non-linearity):
+   The CNN typically uses activation functions like ReLU (Rectified Linear Unit) after each convolutional and fully connected layer to introduce non-linearity, allowing the model to learn complex patterns.
+   The final layer likely uses a sigmoid activation function (since it's a binary classification) to output a value between 0 and 1. A value close to 0 indicates no tumor, while a value close to 1 indicates a tumor.
+
+How the CNN Works in Your Flask App
+
+1. Model Loading:
+   You load a pre-trained CNN model using `braintumor_model = load_model('models/braintumor.h5')`.
+   This model is assumed to be trained on a dataset of brain images, where it learns to classify whether a brain tumor is present or not.
+
+2. Image Preprocessing:
+   Before the image is fed into the model for prediction, it's preprocessed using two main functions:
+     `crop_imgs`: Crops the region of interest (ROI) where the tumor is likely located. This reduces the unnecessary image data, focusing the model on the area that matters most.
+     `preprocess_imgs`: Resizes the image to the target size (224x224), which is the input size expected by the CNN. The CNN likely uses VGG16 or a similar architecture, which typically accepts 224x224 pixel images.
+
+3. Image Prediction:
+   - Once the image is preprocessed, it is passed into the CNN for prediction:
+   
+     pred = braintumor_model.predict(img)
+    
+   The model outputs a value between 0 and 1. This is the probability that the image contains a tumor.
+     If `pred < 0.5`, the model classifies the image as **no tumor** (`pred = 0`).
+     If `pred >= 0.5`, the model classifies the image as **tumor detected** (`pred = 1`).
+
+4. Displaying Results:
+   Based on the prediction, the result is displayed on the `resultbt.html` page, where the user is informed if the image contains a tumor or not.
+
+A High-Level Overview of CNN in Action:
+Image Input: A brain MRI image is uploaded by the user.
+Preprocessing: The image is cropped to focus on the relevant region (tumor area), resized to the required input size for the CNN, and normalized (if necessary).
+CNN Prediction: The processed image is passed through the CNN, which performs feature extraction and classification. The output is a probability score (0 or 1) indicating the likelihood of a tumor being present.
+Output: The app displays whether a tumor is present or not based on the CNN's prediction.
+
+CNN Model Workflow (High-Level)
+
+1. Convolution Layers: Learn to detect features like edges, textures, and structures in the image.
+2. Pooling Layers: Reduce the dimensionality while retaining key features.
+3. Fully Connected Layers: Use the learned features to make a classification decision (tumor vs. no tumor).
+4. Prediction: The model outputs a binary classification result: `0` (no tumor) or `1` (tumor detected).
+
+Training of the CNN Model (Assumed):
+The model (`braintumor_model.h5`) you are loading in the app is assumed to be pre-trained on a large dataset of brain tumor images (e.g., MRI scans), where it has learned the distinguishing features of images with and without tumors. Typically, this training would involve:
+Convolutional layers for feature extraction.
+Pooling layers to reduce spatial dimensions.
+Fully connected layers to classify the image as containing a tumor or not.
+  
+This pre-trained model can then be used for inference (prediction) on new images that are uploaded by the user.
+
+Your application uses a Convolutional Neural Network (CNN) to detect brain tumors in images. 
+The CNN is trained to learn features from medical images, and when a user uploads an image, the app preprocesses it, passes it through the model, and provides a prediction (tumor detected or not). The model’s decision is based on its learned understanding of what a tumor looks like, making it an effective tool for automatic detection.

explain.md

@@ -0,0 +1,213 @@
+### **Code Explanation for Brain Tumor Detection Application Using Flask**
+
+This Flask-based application allows users to upload an image (like an MRI scan) to predict if a brain tumor is detected using a pre-trained CNN (Convolutional Neural Network) model. The results, along with user details, are saved in a MongoDB database for review.
+
+---
+
+### **1. Importing Required Libraries**
+
+```python
+from flask import Flask, flash, request, redirect, render_template
+import os
+import cv2
+import imutils
+import numpy as np
+from tensorflow.keras.models import load_model
+from werkzeug.utils import secure_filename
+import tempfile
+from pymongo import MongoClient
+from datetime import datetime
+```
+
+- **Flask**: A lightweight web framework to create web applications.
+- **OpenCV (cv2)**: Library for image processing.
+- **imutils**: Helper functions for image manipulation.
+- **NumPy**: Array and mathematical operations.
+- **TensorFlow/Keras**: To load the pre-trained brain tumor detection model.
+- **MongoDB**: To store user inputs and model predictions.
+- **Werkzeug**: For securely handling file uploads.
+- **Datetime**: To save the timestamp for each prediction.
+
+---
+
+### **2. Loading the Pre-trained Model**
+
+```python
+braintumor_model = load_model('models/braintumor.h5')
+```
+- The brain tumor model (`braintumor.h5`) is loaded. This is a CNN-based model trained to detect brain tumors from images.
+
+---
+
+### **3. Flask Application Configuration**
+
+```python
+app = Flask(__name__)
+app.config['SEND_FILE_MAX_AGE_DEFAULT'] = 0  # Disable caching
+app.secret_key = "nielitchandigarhpunjabpolice"
+```
+
+- Flask is initialized, and caching for images is disabled to ensure updated images load after upload.
+- A **secret key** is set for session management, which helps in managing messages (like flash messages).
+
+---
+
+### **4. MongoDB Connection**
+
+```python
+client = MongoClient("mongodb+srv://test:test@cluster0.sxci1.mongodb.net/?retryWrites=true&w=majority")
+db = client['brain_tumor_detection']  # Database name
+collection = db['predictions']  # Collection name
+```
+- Connects to **MongoDB Atlas** (cloud-hosted database).
+- A database named `brain_tumor_detection` and collection `predictions` are created to store user details and predictions.
+
+---
+
+### **5. File Upload Helper Function**
+
+```python
+ALLOWED_EXTENSIONS = set(['png', 'jpg', 'jpeg'])
+
+def allowed_file(filename):
+    return '.' in filename and filename.rsplit('.', 1)[1] in ALLOWED_EXTENSIONS
+```
+- Only files with extensions **png, jpg, jpeg** are allowed to ensure proper image input.
+
+---
+
+### **6. Image Preprocessing**
+
+**a. `preprocess_imgs`: Resizing Images**
+
+```python
+def preprocess_imgs(set_name, img_size):
+    set_new = []
+    for img in set_name:
+        img = cv2.resize(img, dsize=img_size, interpolation=cv2.INTER_CUBIC)
+        set_new.append(img)
+    return np.array(set_new)
+```
+- Resizes the input image to a specific size (224x224) required by the model.
+
+**b. `crop_imgs`: Region of Interest (ROI) Extraction**
+
+```python
+def crop_imgs(set_name, add_pixels_value=0):
+    set_new = []
+    for img in set_name:
+        gray = cv2.cvtColor(img, cv2.COLOR_RGB2GRAY)
+        gray = cv2.GaussianBlur(gray, (5, 5), 0)
+        thresh = cv2.threshold(gray, 45, 255, cv2.THRESH_BINARY)[1]
+        cnts = cv2.findContours(thresh.copy(), cv2.RETR_EXTERNAL, cv2.CHAIN_APPROX_SIMPLE)
+        c = max(cnts, key=cv2.contourArea)
+        extLeft = tuple(c[c[:, :, 0].argmin()][0])
+        extRight = tuple(c[c[:, :, 0].argmax()][0])
+        extTop = tuple(c[c[:, :, 1].argmin()][0])
+        extBot = tuple(c[c[:, :, 1].argmax()][0])
+        new_img = img[extTop[1]:extBot[1], extLeft[0]:extRight[0]].copy()
+        set_new.append(new_img)
+    return np.array(set_new)
+```
+- This function identifies the **region of interest (ROI)**, cropping only the area where the brain is located for better accuracy.
+
+---
+
+### **7. Routes in Flask**
+
+**a. `/` Route - Main Page**
+
+```python
+@app.route('/')
+def brain_tumor():
+    return render_template('braintumor.html')
+```
+- Displays the main upload form (`braintumor.html`).
+
+**b. `/resultbt` Route - Prediction**
+
+```python
+@app.route('/resultbt', methods=['POST'])
+def resultbt():
+    # 1. Extract user inputs
+    firstname = request.form['firstname']
+    file = request.files['file']
+    
+    # 2. Validate image
+    if file and allowed_file(file.filename):
+        temp_file = tempfile.NamedTemporaryFile(delete=False)
+        file.save(temp_file.name)
+
+        # 3. Process Image
+        img = cv2.imread(temp_file.name)
+        img = crop_imgs([img])
+        img = preprocess_imgs([img], (224, 224))
+
+        # 4. Predict
+        pred = braintumor_model.predict(img)
+        prediction = 'Tumor Detected' if pred[0][0] >= 0.5 else 'No Tumor Detected'
+        confidence_score = float(pred[0][0])
+
+        # 5. Save to MongoDB
+        result = {
+            "firstname": firstname,
+            "prediction": prediction,
+            "confidence_score": confidence_score,
+            "timestamp": datetime.utcnow()
+        }
+        collection.insert_one(result)
+
+        # 6. Return Results
+        return render_template('resultbt.html', r=prediction)
+    else:
+        flash('Invalid file format!')
+        return redirect(request.url)
+```
+- **Step-by-step Flow**:
+  1. Accept user inputs and uploaded image.
+  2. Validate the file format.
+  3. Preprocess the image (crop and resize).
+  4. Use the CNN model to predict if there is a tumor.🚀
+  5. Save the prediction and user details to MongoDB.
+  6. Return the result.
+
+**c. `/dbresults` Route - Fetch Predictions**
+
+```python
+@app.route('/dbresults')
+def dbresults():
+    all_results = collection.find().sort("timestamp", -1)
+    tumor_count = sum(1 for r in all_results if r['prediction'] == 'Tumor Detected')
+    total_patients = collection.count_documents({})
+    return render_template('dbresults.html', total_patients=total_patients, tumor_count=tumor_count)
+```
+- Fetches all predictions from MongoDB and aggregates results (total patients, tumors detected).
+
+---
+
+### **8. Running the App**
+
+```python
+if __name__ == '__main__':
+    app.run(debug=True)
+```
+- Runs the Flask application in **debug mode**.
+
+---
+
+### **Summary of Flow**
+1. User uploads an MRI image and provides basic details.
+2. Image is preprocessed (cropped, resized) for the CNN model.
+3. The model predicts if a **brain tumor is detected** or not.
+4. Results are stored in MongoDB and displayed back to the user.
+5. Admins can view all results via the `/dbresults` route.
+
+---
+
+### **Tips**
+1. **Flask Routes** handle user requests (`/`, `/resultbt`, `/dbresults`).
+2. **OpenCV** helps preprocess images.
+3. **MongoDB** stores user details and model predictions.
+4. **Model Prediction** is done via a pre-trained Keras model.
+5. Templates (`braintumor.html`, `resultbt.html`) are used to display data.
+

main.py

@@ -0,0 +1,157 @@
+from flask import Flask, flash, request, redirect, render_template
+import os
+import cv2
+import imutils
+import numpy as np
+from tensorflow.keras.models import load_model
+from werkzeug.utils import secure_filename
+import tempfile
+from pymongo import MongoClient
+from datetime import datetime
+
+# Load the Brain Tumor CNN Model
+braintumor_model = load_model('models/braintumor.h5')
+
+# Configuring Flask application
+app = Flask(__name__)
+app.config['SEND_FILE_MAX_AGE_DEFAULT'] = 0  # Disable caching for images
+app.secret_key = "nielitchandigarhpunjabpolice"  # Secret key for session management
+
+# Allowed image file extensions
+ALLOWED_EXTENSIONS = set(['png', 'jpg', 'jpeg'])
+
+# Connect to MongoDB Atlas
+client = MongoClient("mongodb+srv://test:test@cluster0.sxci1.mongodb.net/?retryWrites=true&w=majority")
+db = client['brain_tumor_detection']  # Database name
+collection = db['predictions']  # Collection name
+
+def allowed_file(filename):
+    """Check if the file is a valid image format (png, jpg, jpeg)."""
+    return '.' in filename and filename.rsplit('.', 1)[1] in ALLOWED_EXTENSIONS
+
+def preprocess_imgs(set_name, img_size):
+    """
+    Preprocess images by resizing them to the target size (224x224 for VGG16) 
+    and applying appropriate resizing techniques.
+    """
+    set_new = []
+    for img in set_name:
+        img = cv2.resize(img, dsize=img_size, interpolation=cv2.INTER_CUBIC)  # Resize image
+        set_new.append(img)
+    return np.array(set_new)
+
+def crop_imgs(set_name, add_pixels_value=0):
+    """
+    Crop the region of interest (ROI) in the image for brain tumor detection.
+    """
+    set_new = []
+    for img in set_name:
+        gray = cv2.cvtColor(img, cv2.COLOR_RGB2GRAY)
+        gray = cv2.GaussianBlur(gray, (5, 5), 0)
+        thresh = cv2.threshold(gray, 45, 255, cv2.THRESH_BINARY)[1]
+        thresh = cv2.erode(thresh, None, iterations=2)
+        thresh = cv2.dilate(thresh, None, iterations=2)
+        cnts = cv2.findContours(thresh.copy(), cv2.RETR_EXTERNAL, cv2.CHAIN_APPROX_SIMPLE)
+        cnts = imutils.grab_contours(cnts)
+        c = max(cnts, key=cv2.contourArea)
+        extLeft = tuple(c[c[:, :, 0].argmin()][0])
+        extRight = tuple(c[c[:, :, 0].argmax()][0])
+        extTop = tuple(c[c[:, :, 1].argmin()][0])
+        extBot = tuple(c[c[:, :, 1].argmax()][0])
+        ADD_PIXELS = add_pixels_value
+        new_img = img[extTop[1]-ADD_PIXELS:extBot[1]+ADD_PIXELS,
+                      extLeft[0]-ADD_PIXELS:extRight[0]+ADD_PIXELS].copy()
+        set_new.append(new_img)
+    return np.array(set_new)
+
+@app.route('/')
+def brain_tumor():
+    """Render the HTML form for the user to upload an image."""
+    return render_template('braintumor.html')
+
+@app.route('/resultbt', methods=['POST'])
+def resultbt():
+    """Process the uploaded image and save prediction results to MongoDB."""
+    if request.method == 'POST':
+        firstname = request.form['firstname']
+        lastname = request.form['lastname']
+        email = request.form['email']
+        phone = request.form['phone']
+        gender = request.form['gender']
+        age = request.form['age']
+        file = request.files['file']
+
+        if file and allowed_file(file.filename):
+            temp_file = tempfile.NamedTemporaryFile(delete=False)
+            filename = secure_filename(file.filename)
+            file.save(temp_file.name)
+
+            flash('Image successfully uploaded and displayed below')
+
+            # Process the image
+            img = cv2.imread(temp_file.name)
+            img = crop_imgs([img])
+            img = img.reshape(img.shape[1:])
+            img = preprocess_imgs([img], (224, 224))
+
+            # Make prediction
+            pred = braintumor_model.predict(img)
+            prediction = 'Tumor Detected' if pred[0][0] >= 0.5 else 'No Tumor Detected'
+            confidence_score = float(pred[0][0])
+
+            # Prepare data for MongoDB
+            result = {
+                "firstname": firstname,
+                "lastname": lastname,
+                "email": email,
+                "phone": phone,
+                "gender": gender,
+                "age": age,
+                "image_name": filename,
+                "prediction": prediction,
+                "confidence_score": confidence_score,
+                "timestamp": datetime.utcnow()
+            }
+
+            # Insert data into MongoDB
+            collection.insert_one(result)
+
+            # Return the result to the user
+            return render_template('resultbt.html', filename=filename, fn=firstname, ln=lastname, age=age, r=prediction, gender=gender)
+        else:
+            flash('Allowed image types are - png, jpg, jpeg')
+            return redirect(request.url)
+
+@app.route('/dbresults')
+def dbresults():
+    """Fetch all results from MongoDB, show aggregated data, and render in a template."""
+    # Fetch all documents from MongoDB, sorted by timestamp in descending order
+    all_results = collection.find().sort("timestamp", -1)  # Sort by timestamp, latest first
+
+    # Convert cursor to a list of dictionaries
+    results_list = []
+    tumor_count = 0
+    no_tumor_count = 0
+
+    for result in all_results:
+        result['_id'] = str(result['_id'])  # Convert ObjectId to string for JSON serialization
+        results_list.append(result)
+
+        # Count total patients with tumor and without tumor
+        if result['prediction'] == 'Tumor Detected':
+            tumor_count += 1
+        else:
+            no_tumor_count += 1
+
+    total_patients = len(results_list)  # Total number of patients
+
+    # Pass the results and aggregated counts to the HTML template
+    return render_template('dbresults.html', 
+                           results=results_list, 
+                           total_patients=total_patients, 
+                           tumor_count=tumor_count, 
+                           no_tumor_count=no_tumor_count)
+
+
+if __name__ == '__main__':
+    app.run(debug=True)

models/braintumor.h5

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:7a756efdea8aa2748819ea2ccfbf2e0f4dad62236726532adb50439f06f55165
+size 59111488

requirements.txt

@@ -0,0 +1,16 @@
+flask
+flask-cors
+gunicorn
+Jinja2
+pandas
+numpy
+scikit-learn
+tensorflow
+imutils
+opencv-python
+matplotlib
+Werkzeug
+Pillow
+pymongo
+datetime
+

templates/braintumor.html

@@ -0,0 +1,230 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+    <!-- Required meta tags -->
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <!-- Bootstrap CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"
+        integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
+
+    <!-- Custom Styles -->
+    <style type="text/css">
+        body {
+            background-image: url(static/brain.gif);
+            background-position: center;
+            background-size: cover;
+            font-family: 'Roboto', sans-serif;
+            margin-top: 40px;
+            color: #fff;
+        }
+
+        .navbar {
+            background-color: #212121 !important;
+        }
+
+        .navbar-brand {
+            font-weight: bold;
+            font-size: 1.5rem;
+        }
+
+        .regform {
+            background-color: rgba(0, 0, 0, 0.6);
+            padding: 20px;
+            text-align: center;
+            border-radius: 15px 15px 0 0;
+            box-shadow: 0 10px 15px rgba(0, 0, 0, 0.5);
+            margin-top: 20px;
+        }
+
+        .regform h1 {
+            font-size: 2rem;
+            font-weight: bold;
+        }
+
+        .main-form {
+            background-color: rgba(0, 0, 0, 0.7);
+            margin: 20px auto;
+            padding: 30px;
+            border-radius: 10px;
+            max-width: 900px;
+        }
+
+        .form-group label {
+            font-size: 1rem;
+            font-weight: 500;
+        }
+
+        .form-control {
+            border-radius: 5px;
+            box-shadow: none;
+            border: 2px solid #bbb;
+            margin-bottom: 15px;
+        }
+
+        .form-control:focus {
+            border-color: #5cb85c;
+        }
+
+        .btn-submit {
+            background-color: #28a745;
+            color: white;
+            font-size: 1.1rem;
+            padding: 15px 30px;
+            border-radius: 5px;
+            border: none;
+            transition: background-color 0.3s ease;
+        }
+
+        .btn-submit:hover {
+            background-color: #218838;
+        }
+
+        .form-text {
+            font-size: 0.85rem;
+        }
+
+        .col-md-6 {
+            margin-bottom: 15px;
+        }
+
+        .col-md-6 label,
+        .col-md-6 input,
+        .col-md-6 select {
+            font-size: 1rem;
+        }
+
+        .footer {
+            text-align: center;
+            margin-top: 30px;
+            font-size: 0.9rem;
+            color: #ccc;
+        }
+
+        /* Responsive design */
+        @media (max-width: 767px) {
+            .regform h1 {
+                font-size: 1.6rem;
+            }
+
+            .main-form {
+                padding: 20px;
+            }
+        }
+    </style>
+
+    <title>Brain Tumor Detection</title>
+</head>
+
+<body>
+    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
+        <div class="container-fluid">
+            <a class="navbar-brand" href="/">CNN Brain Tumor Detection</a>
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
+                aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="collapse navbar-collapse" id="navbarNav">
+                <ul class="navbar-nav ms-auto">
+                    <li class="nav-item">
+                        <a class="nav-link" href="/dbresults">View MongoDB Results</a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </nav>
+
+    <div class="regform">
+        <h1>Brain Tumor Detection Form</h1>
+    </div>
+
+    <div class="container">
+        <form action="resultbt" class="main-form needs-validation" method="POST" enctype="multipart/form-data" novalidate>
+            <div class="row">
+                <div class="col-md-6">
+                    <div class="form-group">
+                        <label for="firstname">First Name</label>
+                        <input type="text" name="firstname" id="firstname" class="form-control" required>
+                    </div>
+                </div>
+                <div class="col-md-6">
+                    <div class="form-group">
+                        <label for="lastname">Last Name</label>
+                        <input type="text" name="lastname" id="lastname" class="form-control" required>
+                    </div>
+                </div>
+            </div>
+
+            <div class="form-group">
+                <label for="phone">Phone Number</label>
+                <input type="tel" name="phone" id="phone" class="form-control" required>
+                <small class="form-text">* Include your area code</small>
+            </div>
+
+            <div class="form-group">
+                <label for="email">Email Address</label>
+                <input type="email" name="email" id="email" class="form-control" required>
+            </div>
+
+            <div class="row">
+                <div class="col-md-6">
+                    <div class="form-group">
+                        <label for="gender">Gender</label>
+                        <select name="gender" id="gender" class="form-control" required>
+                            <option value="male">Male</option>
+                            <option value="female">Female</option>
+                        </select>
+                    </div>
+                </div>
+                <div class="col-md-6">
+                    <div class="form-group">
+                        <label for="age">Age</label>
+                        <input type="number" name="age" id="age" class="form-control" required>
+                    </div>
+                </div>
+            </div>
+
+            <div class="form-group">
+                <label for="file">Upload Your Brain MRI</label>
+                <input type="file" class="form-control" id="file" name="file" required>
+            </div>
+
+            <div class="text-center">
+                <button type="submit" class="btn-submit">Submit</button>
+            </div>
+        </form>
+    </div>
+
+    <div class="footer">
+        <p>&copy; 2024 Brain Tumor Detection - All Rights Reserved</p>
+    </div>
+
+    <!-- Bootstrap Bundle with Popper -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"
+        integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf"
+        crossorigin="anonymous"></script>
+
+    <!-- Enable Bootstrap validation -->
+    <script>
+        (function () {
+            'use strict'
+            // Fetch all the forms we want to apply custom Bootstrap validation styles to
+            var forms = document.querySelectorAll('.needs-validation')
+            // Loop over them and prevent submission
+            Array.prototype.slice.call(forms)
+                .forEach(function (form) {
+                    form.addEventListener('submit', function (event) {
+                        if (!form.checkValidity()) {
+                            event.preventDefault()
+                            event.stopPropagation()
+                        }
+                        form.classList.add('was-validated')
+                    }, false)
+                })
+        })()
+    </script>
+</body>
+
+</html>

templates/dbresults.html

@@ -0,0 +1,151 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Database Results</title>
+
+    <!-- Custom Styles -->
+    <style>
+        body {
+            font-family: 'Roboto', sans-serif;
+            background-image: url('static/brain.gif');
+            background-position: center;
+            background-size: cover;
+            color: #fff;
+            padding-top: 20px;
+        }
+
+        h1 {
+            text-align: center;
+            font-size: 2rem;
+            font-weight: bold;
+            color: #fff;
+        }
+
+        .stats-container {
+            width: 90%;
+            margin: 20px auto;
+            text-align: center;
+            background-color: rgba(0, 0, 0, 0.7);
+            padding: 20px;
+            border-radius: 10px;
+            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
+        }
+
+        .stats-container h2 {
+            font-size: 1.5rem;
+            margin: 10px 0;
+            color: #fff;
+        }
+
+        table {
+            width: 90%;
+            margin: 30px auto;
+            border-collapse: collapse;
+            background-color: rgba(0, 0, 0, 0.6);
+            border-radius: 10px;
+            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.6);
+        }
+
+        th, td {
+            border: 1px solid #ddd;
+            padding: 12px 18px;
+            text-align: center;
+            font-size: 1.1rem;
+        }
+
+        th {
+            background-color: #343a40;
+            color: #fff;
+        }
+
+        td {
+            background-color: rgba(255, 255, 255, 0.1);
+            color: #fff;
+        }
+
+        tr:nth-child(even) {
+            background-color: rgba(255, 255, 255, 0.15);
+        }
+
+        tr:hover {
+            background-color: rgba(255, 255, 255, 0.3);
+        }
+
+        .footer {
+            text-align: center;
+            margin-top: 30px;
+            color: #ccc;
+            font-size: 0.9rem;
+        }
+
+        @media (max-width: 767px) {
+            h1 {
+                font-size: 1.6rem;
+            }
+
+            table {
+                width: 100%;
+            }
+
+            th, td {
+                padding: 10px 12px;
+                font-size: 1rem;
+            }
+        }
+    </style>
+</head>
+<body>
+
+    <!-- Page Title -->
+    <h1>Stored Results</h1>
+
+    <!-- Stats Section -->
+    <div class="stats-container">
+        <h2>Total Patients: {{ total_patients }}</h2>
+        <h2>Total with Tumor: {{ tumor_count }}</h2>
+        <h2>Total without Tumor: {{ no_tumor_count }}</h2>
+    </div>
+
+    <!-- Table Container -->
+    <div class="table-container">
+        <table>
+            <thead>
+                <tr>
+                    <th>First Name</th>
+                    <th>Last Name</th>
+                    <th>Email</th>
+                    <th>Phone</th>
+                    <th>Gender</th>
+                    <th>Age</th>
+                    <th>Prediction</th>
+                    <th>Confidence Score</th>
+                    <th>Timestamp</th>
+                </tr>
+            </thead>
+            <tbody>
+                {% for result in results %}
+                <tr>
+                    <td>{{ result.firstname }}</td>
+                    <td>{{ result.lastname }}</td>
+                    <td>{{ result.email }}</td>
+                    <td>{{ result.phone }}</td>
+                    <td>{{ result.gender }}</td>
+                    <td>{{ result.age }}</td>
+                    <td>{{ result.prediction }}</td>
+                    <td>{{ result.confidence_score }}</td>
+                    <td>{{ result.timestamp }}</td>
+                </tr>
+                {% endfor %}
+            </tbody>
+        </table>
+    </div>
+
+    <!-- Footer -->
+    <div class="footer">
+        <p>&copy; 2024 Brain Tumor Detection - All Rights Reserved</p>
+    </div>
+
+</body>
+</html>

templates/resultbt.html

@@ -0,0 +1,147 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+    <!-- Required meta tags -->
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <!-- Bootstrap CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"
+        integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
+
+    <!-- Custom Styles -->
+    <style type="text/css">
+        body {
+            background-image: url(static/brain.gif);
+            background-position: center;
+            background-size: cover;
+            font-family: 'Roboto', sans-serif;
+            margin-top: 40px;
+            color: #fff;
+        }
+
+        .navbar {
+            background-color: #212121 !important;
+        }
+
+        .navbar-brand {
+            font-weight: bold;
+            font-size: 1.5rem;
+        }
+
+        .regform {
+            width: 800px;
+            background-color: rgba(253, 252, 252, 0.8);
+            margin: auto;
+            color: #0f0f0f;
+            padding: 20px;
+            text-align: center;
+            border-radius: 15px 15px 0px 0px;
+            box-shadow: 0 10px 15px rgba(0, 0, 0, 0.5);
+        }
+
+        .regform h1 {
+            font-size: 2rem;
+            font-weight: bold;
+        }
+
+        .main-form {
+            width: 800px;
+            margin: auto;
+            background-color: rgba(0, 0, 0, 0.7);
+            padding: 30px;
+            border-radius: 10px;
+            color: #FFFFFF;
+            box-shadow: 0 10px 15px rgba(0, 0, 0, 0.7);
+        }
+
+        .main-form p {
+            font-size: 1.2rem;
+            line-height: 1.8;
+        }
+
+        .main-form p i {
+            font-style: italic;
+            color: #28a745;
+        }
+
+        .footer {
+            text-align: center;
+            margin-top: 30px;
+            font-size: 0.9rem;
+            color: #ccc;
+        }
+
+        /* Responsive design */
+        @media (max-width: 767px) {
+            .regform h1 {
+                font-size: 1.6rem;
+            }
+
+            .main-form {
+                padding: 20px;
+            }
+
+            .main-form p {
+                font-size: 1rem;
+            }
+        }
+    </style>
+
+    <title>Brain Tumor Detection</title>
+</head>
+
+<body>
+    <!-- Navbar -->
+    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
+        <div class="container-fluid">
+            <a class="navbar-brand" href="/">CNN</a>
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
+                data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
+                aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="collapse navbar-collapse" id="navbarSupportedContent">
+                <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
+                    <li class="nav-item">
+                        <a class="nav-link" href="/dbresults">MongoDB</a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </nav>
+
+    <!-- Result Form -->
+    <div class='regform mt-3'>
+        <h1>Brain Tumor Test Results</h1>
+    </div>
+
+    <div class='main-form'>
+        <div>
+            <div class="col" style='margin-top: 30px; margin-bottom: 30px;'>
+                <p><strong>First Name:</strong> {{fn}}</p>
+                <p><strong>Last Name:</strong> {{ln}}</p>
+                <p><strong>Age:</strong> {{age}}</p>
+                <p><strong>Gender:</strong> {{gender}}</p>
+
+      
+                <div>
+                    <p><strong>Result:</strong> <i>{{r}}</i></p>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Footer -->
+    <div class="footer">
+        <p>&copy; 2024 Brain Tumor Detection - All Rights Reserved</p>
+    </div>
+
+    <!-- Bootstrap Bundle with Popper -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"
+        integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf"
+        crossorigin="anonymous"></script>
+</body>
+
+</html>