Create app.py

app.py

@@ -0,0 +1,1381 @@
+import barcode
+import streamlit as st
+st.set_page_config(layout="wide")
+import streamlit.components.v1 as components
+import cv2
+from PIL import Image
+import base64
+import os
+import time
+import numpy as np
+import pandas as pd
+import matplotlib.pyplot as plt
+import matplotlib.cm as cm
+from torch.utils.data import DataLoader
+from PIL import Image
+from io import BytesIO
+from gradcam import GradCAM  # Import your GradCAM class
+from sklearn.metrics import classification_report,confusion_matrix, roc_curve, auc,precision_recall_curve, average_precision_score
+from sklearn.preprocessing import label_binarize
+import seaborn as sns
+import torch
+import torch.nn as nn
+import torchvision.models as models
+from torchvision import datasets, transforms
+import torchvision.transforms as transforms
+
+import io
+import warnings
+warnings.filterwarnings("ignore")
+from barcode.writer import ImageWriter
+
+showWarningOnDirectExecution = False
+# Path to your logo image
+logo_path = "images/pytorch.png"
+main_bg_ext = 'png'
+image = ["images/back1 (1).jpg","images/back1 (2).jpg","images/back1 (3).jpg","images/back1 (4).jpg","images/back1 (5).jpg"]
+# Read and encode the logo image
+with open(logo_path, "rb") as image_file:
+    encoded_logo = base64.b64encode(image_file.read()).decode()
+
+if "framework"  not in st.session_state:
+    st.session_state.framework = "Tensorflow"
+if "menu"  not in st.session_state:
+    st.session_state.menu = "1"
+if st.session_state.menu =="1":
+    st.session_state.show_summary = True
+    st.session_state.show_arch = False
+    st.session_state.show_desc = False
+elif st.session_state.menu =="2":
+    st.session_state.show_arch = True
+    st.session_state.show_summary = False
+    st.session_state.show_desc = False
+elif st.session_state.menu =="3":
+    st.session_state.show_arch = False
+    st.session_state.show_summary = False
+    st.session_state.show_desc = True
+else:
+    st.session_state.show_desc = True
+def encode_image(image_path):
+    with open(image_path, "rb") as img_file:
+        return base64.b64encode(img_file.read()).decode()
+
+#**************************************************
+# loading pytorch model
+#********************************************
+
+
+# Define the CustomVGG16 model
+class CustomVGG16(nn.Module):
+    def __init__(self, num_classes=2):
+        super(CustomVGG16, self).__init__()
+        base_model = models.vgg16(pretrained=False)  
+        self.features = base_model.features
+        self.avgpool = nn.AdaptiveAvgPool2d((2, 2))
+        self.flatten = nn.Flatten()
+        self.fc1 = nn.Linear(512 * 2 * 2, 512)
+        self.bn1 = nn.BatchNorm1d(512)
+        self.dropout = nn.Dropout(0.5)
+        self.fc2 = nn.Linear(512, num_classes)
+        self.softmax = nn.Softmax(dim=1)
+
+    def forward(self, x):
+        x = self.features(x)
+        x = self.avgpool(x)
+        x = self.flatten(x)
+        x = self.fc1(x)
+        x = self.bn1(x)
+        x = torch.relu(x)
+        x = self.dropout(x)
+        x = self.fc2(x)
+        x = self.softmax(x)
+        return x
+
+# Load the model
+model = CustomVGG16(num_classes=2)
+
+# Load the state_dict (weights only)
+model.load_state_dict(torch.load('brain_model.pth', map_location=torch.device('cpu')))
+
+model.eval()#model.eval()  # Set the model to evaluation mode
+target_layer = model.features[-1]  # Typically last convolutional layer
+gradcam = GradCAM(model, target_layer)
+def preprocess_image(image):
+    preprocess = transforms.Compose([
+        transforms.Resize((224, 224)),
+        transforms.ToTensor(),
+        transforms.Normalize(mean=[0.485, 0.456, 0.406], std=[0.229, 0.224, 0.225]),  # For pretrained models like VGG16
+    ])
+    return preprocess(image).unsqueeze(0)  # Add batch dimension
+
+def generate_gradcam(image, target_class):
+    # Preprocess the image and convert it to a tensor
+    input_image = preprocess_image(image)
+    
+    # Instantiate GradCAM
+    gradcam = GradCAM(model, target_layer)
+    
+    # Generate the CAM
+    cam = gradcam.generate(input_image, target_class)
+    
+    return cam
+# Function to get layer information
+def get_layers_data(model, prefix=""):
+    layers_data = []
+    for name, layer in model.named_children():  # Iterate over layers
+        full_name = f"{prefix}.{name}" if prefix else name  # Track hierarchy
+
+        try:
+            shape = str(list(layer.parameters())[0].shape)  # Get shape of the first param
+        except Exception:
+            shape = "N/A"
+
+        param_count = sum(p.numel() for p in layer.parameters())  # Count parameters
+
+        layers_data.append((full_name, layer.__class__.__name__, shape, f"{param_count:,}"))
+
+        # Recursively get layers inside this layer (for nested structures)
+        layers_data.extend(get_layers_data(layer, full_name))
+
+    return layers_data
+
+def convert_image_to_base64(pil_image):
+    buffered = BytesIO()
+    pil_image.save(buffered, format="PNG")
+    return base64.b64encode(buffered.getvalue()).decode()
+
+
+def predict_image(image):
+    # Preprocess the image to match the model input requirements
+    transform = transforms.Compose([
+        transforms.Resize((224, 224)),
+        transforms.ToTensor(),
+        transforms.Normalize(mean=[0.485, 0.456, 0.406], std=[0.229, 0.224, 0.225]),  # Standard VGG16 normalization
+    ])
+
+    image = transform(image).unsqueeze(0)  # Add batch dimension
+
+    # Move image to the same device as the model (GPU or CPU)
+    image = image
+
+    # Set the model to evaluation mode
+    model.eval()
+
+    with torch.no_grad():  # Disable gradient calculation
+        outputs = model(image)  # Forward pass
+
+        # Get predicted probabilities (softmax for multi-class)
+    if outputs.shape[1] == 1:
+            probs = torch.sigmoid(outputs)  # Apply sigmoid activation for binary classification
+            prob_class_1 = probs[0].item()  # Probability for class 1
+            prob_class_0 = 1 - prob_class_1  # Probability for class 0
+
+        # If the output has two units (binary classification with softmax)
+    else:
+        probs = torch.nn.functional.softmax(outputs, dim=1)
+        prob_class_0 = probs[0, 0].item()
+        prob_class_1 = probs[0, 1].item()
+        # Get the predicted class
+    print("Raw model output (logits):", outputs)
+
+    return prob_class_0, prob_class_1, probs
+# /#*********************************************/
+# LOADING TEST DATASET
+
+# *************************************************
+test_dir = "test"
+BATCH_SIZE = 32
+IMG_SIZE = (224, 224)
+transform = transforms.Compose([
+    transforms.Resize((224, 224)),
+    transforms.ToTensor(),
+   # transforms.Normalize(mean=[0.485, 0.456, 0.406], std=[0.229, 0.224, 0.225])
+])
+
+test_dataset = datasets.ImageFolder(root='test', transform=transform)
+test_loader = DataLoader(test_dataset, batch_size=32, shuffle=False)
+# One-hot encode labels using CategoryEncoding
+class_names = test_dataset.classes
+class_labels = class_names
+
+# One-hot encode labels using CategoryEncoding
+#num_classes = len(class_names)
+
+
+#def one_hot_encode(image, label):
+    ##label = tf.one_hot(label, num_classes)
+    #return image, label
+
+
+#test_dataset = test_dataset.map(one_hot_encode)
+
+
+#######################################################
+# Custom CSS to style the logo above the sidebar
+st.markdown(
+    f"""
+    <style>
+       /* Container for logo and text */
+        .logo-text-container {{
+            position: fixed;
+            top: 30px; /* Adjust vertical position */
+            left: 50px; /* Align with sidebar */
+            display: flex;
+            align-items: center;
+            gap: 15px;
+            justify-content: space-between;
+            width: 100%;
+        }}
+
+        /* Logo styling */
+        .logo-text-container img {{
+            width: 100px; /* Adjust logo size */
+            border-radius: 10px; /* Optional: round edges */
+            margin-top:10px;
+            margin-left:20px;
+
+
+        }}
+
+        /* Bold text styling */
+        .logo-text-container h1 {{
+            font-family: 'Times New Roman', serif;
+            font-size: 24px;
+            font-weight: bold;
+            margin:-right 100px;;
+            text-align: center;
+            align-items: center;
+
+            margin: 0 auto; /* Center the text */
+
+            flex-grow:1;
+            color: #FFD700; /* Golden color for text */
+        }}
+        /* Sidebar styling */
+        section[data-testid="stSidebar"][aria-expanded="true"] {{
+            margin-top: 100px !important; /* Space for the logo */
+            border-radius: 0 60px 0px 60px !important; /* Top-left and bottom-right corners */
+            width: 200px !important; /* Sidebar width */
+            background:none; /* Gradient background */
+           /* box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* Shadow effect */
+           /* border: 1px solid #FFD700; /* Shiny golden border */
+            margin-bottom: 1px  !important;
+            color:white !important;
+
+        }}
+       /* Style for the upload button */
+        [class*="st-key-upload-btn"] {{
+            position: absolute;
+            top: 50%; /* Position from the top of the inner circle */
+            left: 1%; /* Position horizontally at the center */
+            padding: 10px 20px;
+            color: red;
+            border: none;
+            border-radius: 20px;
+            cursor: pointer;
+            font-size: 35px !important;
+            width:30px;
+            height:20px;
+        }}
+
+        .upload-btn:hover {{
+            background-color: rgba(0, 123, 255, 1);
+        }}
+          div[data-testid="stFileUploader"] label > div > p {{
+            display:none;
+            color:white !important;
+        }}
+        section[data-testid="stFileUploaderDropzone"] {{
+          width:200px;
+        height: 60px;
+        background-color: white;
+        border-radius: 40px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin-top:-10px;
+        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
+        margin:20px;
+        background-color: rgba(255, 255, 255, 0.7); /* Transparent blue background */
+        color:white;
+        }}
+        div[data-testid="stFileUploaderDropzoneInstructions"] div > small{{
+           color:white !important;
+           display:none;
+        }}
+         div[data-testid="stFileUploaderDropzoneInstructions"] span{{
+          margin-left:65px;
+          color:orange;
+        }}
+        div[data-testid="stFileUploaderDropzoneInstructions"] div{{
+          display:none;
+        }}
+       section[data-testid="stFileUploaderDropzone"] button{{
+        display:none;
+       }}
+         div[data-testid="stMarkdownContainer"] p {{
+            font-family: "Times New Roman" !important; /* Elegant font for title */
+            color:white !important;
+        }}
+        .highlight {{
+        border: 4px solid lime;
+        font-weight: bold;
+        background: radial-gradient(circle, rgba(0,255,0,0.3) 0%, rgba(0,0,0,0) 70%);
+        box-shadow: 0px 0px 30px 10px rgba(0, 255, 0, 0.9), 
+                    0px 0px 60px 20px rgba(0, 255, 0, 0.6), 
+                    inset 0px 0px 15px rgba(0, 255, 0, 0.8);
+        transition: all 0.3s ease-in-out;
+            
+        }}
+        .highlight:hover {{
+        transform: scale(1.05);
+        background: radial-gradient(circle, rgba(0,255,0,0.6) 0%, rgba(0,0,0,0) 80%);
+        box-shadow: 0px 0px 40px 15px rgba(0, 255, 0, 1), 
+                    0px 0px 70px 30px rgba(0, 255, 0, 0.7), 
+                    inset 0px 0px 20px rgba(0, 255, 0, 1);
+    }}
+         header[data-testid="stHeader"] {{
+           /* border-radius: 1px !important;*/
+           background: transparent !important; /* Gradient background */
+            /*box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* Shadow effect */
+            /*: 3px solid #FFD700; /* Shiny golden border */
+            /*border-bottom:none !important;*/
+           margin-right: 100px !important;
+            margin-top: 32px !important;
+            z-index: 1 !important; /* Ensure it stays above other elements */
+
+        }}
+         div[data-testid="stDecoration"]{{
+        background-image:none;
+        }}
+         button[data-testid="stBaseButton-secondary"]{{
+        background:transparent;
+        border:none;
+        }}
+        div[data-testid="stApp"]{{
+         background:#161819;
+        height: 98vh;  /* Full viewport height */
+        width: 98%; 
+        border-radius: 40px !important;
+        margin-left:10px;
+        margin-right:10px;
+        margin-top:10px;
+        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
+
+        overflow: hidden;
+        
+        }}
+        div[data-testid="stMarkdownContainer"] > p {{
+          font-family:  "Times New Roman " !important; /* Font */
+        font-size: 11px !important; /* Font size */
+        margin:5px;
+        }}
+        
+    [class*="st-key-content_"] {{
+
+                background: rgba(255, 255, 255, 0.9);
+            border-radius: 40px;
+          /*  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);*/
+            width: 83.7%;
+            margin-left: 75px;
+           /* margin-top: -70px;*/
+            margin-bottom: 10px;
+            margin-right:10px;
+            padding:0;
+
+    overflow-y: auto; /* Enable vertical scrolling for the content */
+           position: fixed; /* Fix the position of the container */
+    top: 1.5%; /* Adjust top offset */
+    left: 10%; /* Adjust left offset */
+         height: 98vh;  /* Full viewport height */
+
+        }}
+        
+        [class*="st-key-center-box"] {{
+
+            background-color: transparent;
+            border-radius: 60px;
+            width: 100%;
+           margin-top:30px;
+            top:20% !important; /* Adjust top offset */
+            left: 1%; /* Adjust left offset */
+
+        }}
+         [class*="st-key-side"] {{
+
+            background-color: transparent;
+            border-radius: 60px;
+           box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5);
+            width: 5%;
+           /* margin-top: 100px;*/
+            margin-bottom: 10px;
+            margin-right:10px;
+            padding:30px;
+            display: flex;
+            justify-content: center;
+            
+            align-items: center;
+            overflow-y: auto; /* Enable vertical scrolling for the content */
+            position: fixed; /* Fix the position of the container */
+            top: 17%; /* Adjust top offset */
+            left: 16%; /* Adjust left offset */
+            height:50vh;  /* Full viewport height */
+
+        }}
+           
+                [class*="st-key-button_"] .stButton p > img {{
+                max-width: 100%;
+                vertical-align: top;
+                height:130px !important;
+                object-fit: cover;
+                padding: 10px;
+                width:250px !important;
+                border-radius:10px !important;
+                max-height: 2em !important;
+
+       }}
+         div.stButton > button {{                
+        background: rgba(255, 255, 255, 0.2);
+        color: orange !important; /* White text */
+        font-family:  "Times New Roman " !important; /* Font */
+        font-size: 18px !important; /* Font size */
+        font-weight: bold !important; /* Bold text */
+        padding: 1px 2px; /* Padding for buttons */
+        border: none; /* Remove border */
+        border-radius: 5px; /* Rounded corners */
+        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); /* Shadow effect */
+        transition: all 0.3s ease-in-out; /* Smooth transition */
+         display: flex;
+        align-items: left;
+        justify-content: left;
+        margin-left:-15px ;
+        width:200px;
+        height:50px;
+        backdrop-filter: blur(10px);
+         z-index:1000;
+         text-align: left;       /* Align text to the left */
+        padding-left: 50px;
+
+
+    }}
+    div.stButton > button p{{                
+        color: white !important; /* White text */
+
+    }}
+    /* Hover effect */
+    div.stButton > button:hover {{
+        background: rgba(255, 255, 255, 0.2);
+        box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.4); /* Enhanced shadow on hover */
+        transform: scale(1.05); /* Slightly enlarge button */
+        transform: scale(1.1); /* Slight zoom on hover */
+        box-shadow: 0px 4px 12px rgba(255, 255, 255, 0.4); /* Glow effect */
+    }}
+     div.stButton > button:active {{
+        background: rgba(199, 107, 26, 0.5);
+        box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.4); /* Enhanced shadow on hover */
+       
+    }}
+         div.stDownloadButton > button:active,
+        div.stDownloadButton  > buttonfocus {{
+            background-color: transparent !important; /* or set it to the original background color */
+            outline: none; /* Remove the focus outline if you want */
+                }}
+                [class*="st-key-button_"] .stButton p > img {{
+                max-width: 100%;
+                vertical-align: top;
+                height:130px !important;
+                object-fit: cover;
+                padding: 10px;
+                width:250px !important;
+                border-radius:10px !important;
+                max-height: 2em !important;
+
+       }}
+         div.stDownloadButton  > button > div > p {{
+             font-size:15px !important;
+             font-weight:bold;
+         }}
+        [class*="st-key-button_"] .stButton p{{
+        font-family:  "Times New Roman " !important; /* Font */
+        font-size:100px !important;
+        height:150px !important;
+        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
+        font-weight: bold;
+        margin-top:5px;
+       margin-left:5px;
+       color:black;
+       border-radius:10px;
+
+       }}
+        [class*="st-key-button_"]:hover {{
+          
+        }}
+
+          [class*="st-key-nav-"] .stButton p{{
+        font-family:  "Times New Roman " !important; /* Font */
+        font-size:1rem !important;
+        font-weight: bold;
+     
+            }}
+             [class*="st-key-nav-10"]{{
+            border: none; /* Remove border */
+            background: transparent !important;
+            backdrop-filter: blur(10px) !important;
+              border-radius:80px !important;
+            width:180px !important;
+            height:100px; !important;
+             margin-top:35px !important;
+            }}
+              [class*="st-key-nav-6"]{{
+                  
+            border: none; /* Remove border */
+            background: transparent !important;
+            border-radius:80px !important;
+            backdrop-filter: blur(10px) !important;
+             border-radius:80px !important;
+            width:180px !important;
+             margin-top:35px !important;
+
+            }}
+               [class*="st-key-nav-6"] {{
+                  
+            border: none; /* Remove border */
+            background: transparent !important;
+            border-radius:80px !important;
+            backdrop-filter: blur(10px) !important;
+             border-radius:80px !important;
+            width:190px !important;
+             margin-top:35px !important;
+
+            }}
+             [class*="st-key-nav-12"],[class*="st-key-blur_"]{{
+                  
+            border: none; /* Remove border */
+            background: transparent !important;
+            border-radius:80px !important;
+            backdrop-filter: blur(10px) !important;
+             border-radius:80px !important;
+            width:180px !important;
+             margin-top:35px !important;
+
+            }}
+              [class*="st-key-nav-8"]{{
+                  
+            border: none; /* Remove border */
+            background: transparent !important;
+            border-radius:80px !important;
+            backdrop-filter: blur(10px) !important;
+             border-radius:80px !important;
+            width:300px !important;
+            height:80px; !important;
+            margin-top:35px !important;
+
+            }}
+            [class*="st-key-nav-5"]{{
+                  
+            border: none; /* Remove border */
+            background: transparent !important;
+            border-radius:80px !important;
+            backdrop-filter: blur(10px) !important;
+             border-radius:80px !important;
+            width:200px !important;
+            height:80px; !important;
+            margin-top:35px !important;
+
+            }}
+      [class*="st-key-nav-"],[class*="st-key-blur_"] {{                
+        background: rgba(255, 255, 255, 0.2);
+        color: black; /* White text */
+        font-family:  "Times New Roman " !important; /* Font */
+        font-size: 18px !important; /* Font size */
+        font-weight: bold !important; /* Bold text */
+        padding: 10px 20px; /* Padding for buttons */
+        border: none; /* Remove border */
+        border-radius: 15px; /* Rounded corners */
+        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); /* Shadow effect */
+        transition: all 0.3s ease-in-out; /* Smooth transition */
+         display: flex;
+        align-items: center;
+        justify-content: center;
+        margin: 10px 0;
+        width:170px;
+        height:60px;
+        backdrop-filter: blur(10px);
+
+    }}
+
+    /* Hover effect */
+   
+      [class*="st-key-nav-"]:hover {{
+        background: rgba(255, 255, 255, 0.2);
+        box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.4); /* Enhanced shadow on hover */
+        transform: scale(1.05); /* Slightly enlarge button */
+        transform: scale(1.1); /* Slight zoom on hover */
+        box-shadow: 0px 4px 12px rgba(255, 255, 255, 0.4); /* Glow effect */
+    }}
+    
+  
+    /* Title styling */
+    .title {{
+   font-family: "Times New Roman" !important; /* Elegant font for title */
+    font-size: 1.2rem;
+    font-weight: bold;
+    margin-left: 37px;
+    margin-top:10px;
+    margin-bottom:-100px;
+    padding: 0;
+    color: #333; /* Neutral color for text */
+    }}
+
+
+   .content-container {{
+                background: rgba(255, 255, 255, 0.05);
+            backdrop-filter: blur(10px); /* Adds a slight blur effect */            border-radius: 1px;
+            width: 28%;
+            margin-left: 150px;
+           /* margin-top: -60px;*/
+            margin-bottom: 10px;
+            margin-right:10px;
+            padding:0;
+           /* border-radius:0px 0px 15px 15px ;*/
+            border:1px solid transparent;
+            overflow-y: auto; /* Enable vertical scrolling for the content */
+            position: fixed; /* Fix the position of the container */
+            top: 10%; /* Adjust top offset */
+            left: 60%; /* Adjust left offset */
+            height: 89.5vh;  /* Full viewport height */
+
+        }}
+        .content-container-principal img{{
+            margin-top:260px;
+            margin-left:30px;
+        }}
+
+      
+         div[data-testid="stText"] {{
+              background-color: transparent;
+            backdrop-filter: blur(10px); /* Adds a slight blur effect */            border-radius: 1px;
+            width: 132% !important;
+                        background-color: rgba(173, 216, 230, 0.1); /* Light blue with 50% transparency */
+
+            margin-top: -36px;
+            margin-bottom: 10px;
+            margin-left:-220px !important;
+            padding:50px;
+            padding-bottom:20px;
+            padding-top:50px;
+           /* border-radius:0px 0px 15px 15px ;*/
+            border:1px solid transparent;
+            overflow-y: auto; /* Enable vertical scrolling for the content */
+            height: 85vh; !important;  /* Full viewport height */
+
+             }}
+         .content-container2 {{
+            background-color: rgba(0, 0, 0, 0.1); /* Light blue with 50% transparency */
+            backdrop-filter: blur(10px); /* Adds a slight blur effect */            border-radius: 1px;
+            width: 90%;
+            margin-left: 10px;
+           /* margin-top: -10px;*/
+            margin-bottom: 160px;
+            margin-right:10px;
+            padding:0;
+            border-radius:1px ;
+            border:1px solid transparent;
+            overflow-y: auto; /* Enable vertical scrolling for the content */
+            position: fixed; /* Fix the position of the container */
+            top: 3%; /* Adjust top offset */
+            left: 2.5%; /* Adjust left offset */
+            height: 78vh;  /* Full viewport height */
+
+        }}
+        .content-container4 {{
+            background-color: rgba(0, 0, 0, 0.1); /* Light blue with 50% transparency */
+            backdrop-filter: blur(10px); /* Adds a slight blur effect */                 width: 40%;
+            margin-left: 10px;
+            margin-bottom: 160px;
+            margin-right:10px;
+            padding:0;
+            overflow-y: auto; /* Enable vertical scrolling for the content */
+            position: fixed; /* Fix the position of the container */
+            top: 60%; /* Adjust top offset */
+            left: 2.5%; /* Adjust left offset */
+            height: 10vh;  /* Full viewport height */
+
+        }}
+        .content-container4 h3 ,p {{
+            font-family: "Times New Roman" !important; /* Elegant font for title */
+            font-size: 1rem;
+            font-weight: bold;
+            text-align:center;
+        }}
+         .content-container5 h3 ,p {{
+            font-family: "Times New Roman" !important; /* Elegant font for title */
+            font-size: 1rem;
+            font-weight: bold;
+            text-align:center;
+        }}
+         .content-container6 h3 ,p {{
+            font-family: "Times New Roman" !important; /* Elegant font for title */
+            font-size: 1rem;
+            font-weight: bold;
+            text-align:center;
+        }}
+         .content-container7 h3 ,p {{
+            font-family: "Times New Roman" !important; /* Elegant font for title */
+            font-size: 1rem;
+            font-weight: bold;
+            text-align:center;
+        }}
+        .content-container5 {{
+    background-color: rgba(0, 0, 0, 0.1); /* Light blue with 50% transparency */
+            backdrop-filter: blur(10px); /* Adds a slight blur effect */                 width: 40%;
+            margin-left: 180px;
+            margin-bottom: 130px;
+            margin-right:10px;
+            padding:0;
+            overflow-y: auto; /* Enable vertical scrolling for the content */
+            position: fixed; /* Fix the position of the container */
+            top: 60%; /* Adjust top offset */
+            left: 5.5%; /* Adjust left offset */
+            height: 10vh;  /* Full viewport height */
+
+        }}
+      .content-container3 {{
+            background-color: rgba(216, 216, 230, 0.5); /* Light blue with 50% transparency */
+            backdrop-filter: blur(10px); /* Adds a slight blur effect */            border-radius: 1px;
+            width: 92%;
+            margin-left: 10px;
+           /* margin-top: -10px;*/
+            margin-bottom: 160px;
+            margin-right:10px;
+            padding:0;
+            border: 10px solid white;
+            overflow-y: auto; /* Enable vertical scrolling for the content */
+            position: fixed; /* Fix the position of the container */
+            top: 3%; /* Adjust top offset */
+            left: 1.5%; /* Adjust left offset */
+            height: 40vh;  /* Full viewport height */
+
+        }}
+          .content-container6 {{
+            background-color: rgba(0, 0, 0, 0.1); /* Light blue with 50% transparency */
+            backdrop-filter: blur(10px); /* Adds a slight blur effect */                 width: 40%;
+            margin-left: 10px;
+            margin-bottom: 160px;
+            margin-right:10px;
+            padding:0;
+            overflow-y: auto; /* Enable vertical scrolling for the content */
+            position: fixed; /* Fix the position of the container */
+            top: 80%; /* Adjust top offset */
+            left: 2.5%; /* Adjust left offset */
+            height: 10vh;  /* Full viewport height */
+
+        }}
+        .content-container7 {{
+            background-color: rgba(0, 0, 0, 0.1); /* Light blue with 50% transparency */
+            backdrop-filter: blur(10px); /* Adds a slight blur effect */                 width: 40%;
+            margin-left: 180px;
+            margin-bottom: 130px;
+            margin-right:10px;
+            padding:0;
+            overflow-y: auto; /* Enable vertical scrolling for the content */
+            position: fixed; /* Fix the position of the container */
+            top: 80%; /* Adjust top offset */
+            left: 5.5%; /* Adjust left offset */
+            height: 10vh;  /* Full viewport height */
+
+        }}
+          .content-container2 img {{
+              width:99%;
+              height:50%;
+            
+              }}
+          .content-container3 img {{
+              width:100%;
+              height:100%;
+             
+              }}
+
+.side_box{{
+    width: 200px;
+    height: 180px; 
+    background-color: #0175C2; 
+    margin: 5px;
+    border-radius:20px;
+    left:-5%;
+}}
+.titles{{
+      margin-top:20px !important;
+      margin-left: -150px !important;
+
+  }}
+    /* Title styling */
+    .titles h1{{
+   /*font-family: "Times New Roman" !important; /* Elegant font for title */
+    font-size: 2.2rem;
+    /*font-weight: bold;*/
+    margin-left: 0px;
+    margin-top:80px;
+    margin-bottom:30px;
+    padding: 0;
+    color: black; /* Neutral color for text */
+    }}
+ .titles > div{{
+   font-family: "Times New Roman" !important; /* Elegant font for title */
+    font-size: 1.2rem;
+    margin-left: 200px;
+    margin-bottom:1px;
+    padding: 0;
+    color:black; /* Neutral color for text */
+    }}
+    </style>
+<div class="logo-text-container">
+<img src="data:image/png;base64,{encoded_logo}" alt="Logo">
+</div>
+    """, unsafe_allow_html=True
+)
+loading_html = """
+<style>
+.loader {
+  border: 8px solid #f3f3f3;
+  border-top: 8px solid #0175C2; /* Blue color */
+  border-radius: 50%;
+  width: 50px;
+  height: 50px;
+  animation: spin 1s linear infinite;
+  margin: auto;
+}
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+</style>
+<div class="loader"></div>
+"""
+# Sidebar content
+st.markdown(
+    """
+    <style>
+        .sidebar-desc {
+            font-family: "Times New Roman" !important; /* Elegant font for title */            font-size: 14px;
+            color: #333;
+            background-color: transparent;
+            padding: 15px;
+            border-radius: 20px;
+            box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
+            width:200px !important;
+            margin-left:-15px;
+            margin-top:-50px;
+            height:70vh;
+        }
+        .sidebar-desc h3 {
+            font-family: "Times New Roman" !important; /* Elegant font for title */            font-size: 14px;
+
+            font-size: 18px;
+            color: #0175C2; /* Light Blue */
+            margin-bottom: 10px;
+        }
+        .sidebar-desc h4 {
+            font-size: 16px;
+            color: #444;
+            margin-bottom: 5px;
+            font-family: "Times New Roman" !important; /* Elegant font for title */            font-size: 14px;
+
+        }
+        .sidebar-desc ul {
+            list-style-type: square;
+            margin: 0;
+            padding-left: 20px;
+        }
+        .sidebar-desc ul li {
+            margin-bottom: 5px;
+        }
+        .sidebar-desc a {
+            color: #0175C2;
+            text-decoration: none;
+        }
+        .sidebar-desc a:hover {
+            text-decoration: underline;
+        }
+    </style>
+    """,
+    unsafe_allow_html=True,
+)
+
+
+# Use radio buttons for navigation
+# Set the page to "Home"
+page = "Home"
+selected_img =""
+
+
+st.session_state.page = "Home"
+# Display content based on the selected page
+if st.session_state.page == "Home":
+    # Sidebar buttons
+    with st.sidebar:
+         if st.button("📄 Model Summary"):
+            st.session_state.menu ="1"  # Store state
+            st.rerun()
+
+            # Add your model description logic here
+
+         if st.button("📊 Model Results Analysis",key="header"):
+           st.session_state.menu ="2"
+           st.rerun()
+            # Add model analysis logic here
+         if st.button("🧪 Model Testing"):
+           st.session_state.menu ="3"
+           st.rerun()
+       
+
+        
+    table_style = """
+        <style>
+            table {
+                width: 100%;
+                border-collapse: collapse;
+                border-radius: 2px;
+                overflow: hidden;
+                box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
+                background: rgba(255, 255, 255, 0.05);
+                backdrop-filter: blur(10px);
+                font-family: "Times New Roman", serif;
+                margin-left:100px;
+                margin-top:30px;
+            }
+            thead {
+                background: rgba(255, 255, 255, 0.2);
+            }
+            th {
+                padding: 12px;
+                text-align: left;
+                font-weight: bold;
+                backdrop-filter: blur(10px);
+            }
+            td {
+                padding: 12px;
+                border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+            }
+            tr:hover {
+                background-color: rgba(255, 255, 255, 0.1);
+            }
+             tbody {
+                display: block;
+                max-height: 680px;  /* Set the fixed height */
+                overflow-y: auto;
+                width: 100%;
+            }
+            thead, tbody tr {
+                display: table;
+                width: 100%;
+                table-layout: fixed;
+            }
+        </style>
+    """
+    print(test_loader)
+
+    with st.container(key="content_1"):
+         print(type(model))  # Should print <class 'CustomVGG16'> and not OrderedDict
+         if st.session_state.show_summary:
+             # Load the model
+            layers_data =  get_layers_data(model)  # Get layer information
+
+            # Convert to HTML table
+            table_html = "<table><tr><th>Layer Name</th><th>Type</th><th>Output Shape</th><th>Param #</th></tr>"
+            for name, layer_type, shape, params in layers_data:
+                table_html += f"<tr><td>{name}</td><td>{layer_type}</td><td>{shape}</td><td>{params}</td></tr>"
+            table_html += "</table>"
+
+           
+            st.markdown(table_style + table_html, unsafe_allow_html=True)
+             
+         if st.session_state.show_arch:
+            model.eval()
+
+# Initialize lists to store true labels and predicted labels
+            y_true = []
+            y_pred = []
+            for image, label in test_dataset:  # test_dataset is an instance of ImageFolder or similar
+                image = image.unsqueeze(0) # Add batch dimension and move to device
+                label = label
+                
+                with torch.no_grad():
+                    output = model(image)  # Get model output
+                    _, predicted = torch.max(output, 1)  # Get predicted class
+
+                y_true.append(label)  # Append true label
+                y_pred.append(predicted.item())  # Append predicted label
+
+            # Generate the classification report
+            report_dict = classification_report(y_true, y_pred, target_names=class_names, output_dict=True)
+
+            # Convert to DataFrame for better readability
+            report_df = pd.DataFrame(report_dict).transpose().round(2)
+
+            accuracy = report_dict["accuracy"]
+            precision = report_df.loc["weighted avg", "precision"]
+            recall = report_df.loc["weighted avg", "recall"]
+            f1_score = report_df.loc["weighted avg", "f1-score"]
+
+         
+            st.markdown("""
+                <style>
+                    .kpi-container {
+                        display: flex;
+                        justify-content: space-between;
+                        margin-bottom: 20px;
+                        margin-left:100px;
+                        margin-top:70px;
+                        
+                    }
+                    .kpi-card {
+                        width: 23%;
+                        padding: 15px;
+                        text-align: center;
+                        border-radius: 10px;
+                        font-size: 22px;
+                        font-weight: bold;
+                        font-family:  "Times New Roman " !important; /* Font */
+                        color: #333;
+                         background: rgba(255, 255, 255, 0.05);
+                        box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.4);
+                        border: 5px solid   rgba(173, 216, 230, 0.4);
+                    }
+                </style>
+                <div class="kpi-container">
+                    <div class="kpi-card">Precision<br>""" + f"{precision:.2f}" + """</div>
+                    <div class="kpi-card">Recall<br>""" + f"{recall:.2f}" + """</div>
+                    <div class="kpi-card">Accuracy<br>""" + f"{accuracy:.3f}" + """</div>
+                    <div class="kpi-card">F1-Score<br>""" + f"{f1_score:.3f}" + """</div>
+                </div>
+            """, unsafe_allow_html=True)
+
+
+            # Remove last rows (accuracy/macro avg/weighted avg) and reset index
+            report_df = report_df.iloc[:-3].reset_index()
+            report_df.rename(columns={"index": "Class"}, inplace=True)
+
+            # Custom CSS for Table Styling
+            st.markdown("""
+                <style>
+                    .report-container {
+                        max-height: 250px;
+                        overflow-y: auto;
+                        border-radius: 25px;
+                        text-align:center;
+                        border: 5px solid   rgba(173, 216, 230, 0.4);
+                        padding: 10px;
+                background: rgba(255, 255, 255, 0.05);
+                        box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.4);
+                        width:480px;
+                        margin-left:100px;
+                        margin-top:-20px;
+                    }
+                     .report-container h4{
+                        font-family: "Times New Roman" !important; /* Elegant font for title */
+                        font-size: 1rem;
+                        margin-left: 5px;
+                        margin-bottom:1px;
+                        padding: 10px;
+                        color:#333;
+                        
+                    }
+                    .report-table {
+                        width: 100%;
+                        border-collapse: collapse;
+                        font-family: 'Times New Roman', serif;
+                        text-align: center;
+                    }
+                    .report-table th {
+                background: rgba(255, 255, 255, 0.05);
+                        font-size: 16px;
+                        padding: 10px;
+                        border-bottom: 2px solid #444;
+                    }
+                    .report-table td {
+                        font-size: 12px;
+                        padding: 10px;
+                        border-bottom: 1px solid #ddd;
+                    }
+                </style>
+            """, unsafe_allow_html=True)
+            col1,col2 = st.columns([3,3])
+            with col1:
+                # Convert DataFrame to HTML Table
+                report_html = report_df.to_html(index=False, classes="report-table", escape=False)
+                st.markdown(f'<div class="report-container"><h4>classification report </h4>{report_html}</div>', unsafe_allow_html=True)
+                            # Generate Confusion Matrix
+                        # Generate Confusion Matrix
+                cm = confusion_matrix(y_true, y_pred)
+
+                # Create Confusion Matrix Heatmap
+                fig, ax = plt.subplots(figsize=(1, 1))
+                fig.patch.set_alpha(0)  # Make figure background transparent
+
+                # Seaborn Heatmap (Confusion Matrix)
+                sns.heatmap(cm, annot=True, fmt="d", cmap="Blues", 
+            xticklabels=class_names, yticklabels=class_names,
+            linewidths=1, linecolor="black", 
+            cbar=False, square=True, alpha=0.9, 
+            annot_kws={"size": 5, "family": "Times New Roman"}) 
+            # Change font for tick labels
+                for text in ax.texts:
+                    text.set_bbox(dict(facecolor='none', edgecolor='none', alpha=0))
+                plt.xticks(fontsize=4,  family="Times New Roman")  # X-axis font
+                plt.yticks(fontsize=4,  family="Times New Roman")  # Y-axis font
+                # Enhance Labels and Title
+                
+                plt.title("Confusion Matrix", fontsize=5, family="Times New Roman",color="black", loc='center')
+
+                # Apply transparent background and double border (via Streamlit Markdown)
+                st.markdown("""
+                    <style>
+                    div[data-testid="stImageContainer"] {
+                        max-height: 250px;
+                        overflow-y: auto;
+                        border-radius: 25px;
+                        text-align:center;
+                        border: 5px solid   rgba(173, 216, 230, 0.4);
+                        padding: 10px;
+                        background: rgba(255, 255, 255, 0.05);
+                        box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.4);
+                        width:480px !important;
+                        margin-left:100px;
+                        margin-top:-20px;
+                            
+                        }
+                        div[data-testid="stImageContainer"] img{
+                            margin-top:-10px !important;
+                            width:400px !important;
+                            height:250px !important;
+                        }
+                        [class*="st-key-roc"] div[data-testid="stImageContainer"] {
+                        max-height: 250px;
+                        overflow-y: auto;
+                        border-radius: 25px;
+                        text-align:center;
+                        border: 5px solid   rgba(173, 216, 230, 0.4);
+                    background: rgba(255, 255, 255, 0.05);
+                        box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.4);
+                        width:480px;
+                        margin-left:-35px;
+                        margin-top:-15px;
+                        }
+                         [class*="st-key-roc"] div[data-testid="stImageContainer"] img{
+                              width:480px !important;
+                            height:200px !important;
+                                margin-top:-20px !important;
+
+                             }
+                        [class*="st-key-precision"] div[data-testid="stImageContainer"] {
+                        max-height: 250px;
+                        overflow-y: auto;
+                        border-radius: 25px;
+                        text-align:center;
+                        border: 5px solid   rgba(173, 216, 230, 0.4);
+                    background: rgba(255, 255, 255, 0.05);
+                        box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.4);
+                        width:480px;
+                        margin-left:-35px;
+                        margin-top:-5px;
+                        }
+                         [class*="st-key-precision"] div[data-testid="stImageContainer"] img{
+                              width:480px !important;
+                            height:250px !important;
+                                margin-top:-20px !important;
+
+                             }
+                    </style>
+                """, unsafe_allow_html=True)
+
+                # Show Plot in Streamlit inside a styled container
+                st.markdown('<div class="confusion-matrix-container">', unsafe_allow_html=True)
+                st.pyplot(fig)
+                st.markdown("</div>", unsafe_allow_html=True)
+
+            with col2:
+                                # Convert the lists to numpy arrays
+               # y_true = np.concatenate(y_true)
+                y_pred_probs = np.array(y_pred)  # Make sure this is a 2D array: [batch_size, 2]
+                y_true = np.array(y_true)  # Ensure y_true is a numpy array
+
+                print(y_pred)
+                print(y_true)
+
+                # Binarize the true labels for multi-class classification
+                y_true_bin = label_binarize(y_true, classes=np.arange(len(class_names)))
+
+                # Initialize dictionaries for storing ROC curve data
+               # Calculating ROC curve and AUC for each class
+                fpr, tpr, roc_auc = {}, {}, {}
+
+                # Calculate ROC curve and AUC for the positive class (class 1)
+                fpr[0], tpr[0], _ = roc_curve(y_true_bin, y_pred_probs)  # Use 1D probabilities for class 1
+                roc_auc[0] = auc(fpr[0], tpr[0])  # Calculate AUC for class 1
+
+                # Plotting the ROC curve for each class
+                plt.figure(figsize=(11, 9))
+
+                # Plot ROC curve for the positive class (class 1)
+                plt.plot(fpr[0], tpr[0], lw=2, label=f'Class 1 (AUC = {roc_auc[0]:.2f})')
+         
+                # Plot random guess line (diagonal line)
+                plt.plot([0, 1], [0, 1], color='navy', lw=5, linestyle='--')
+
+                # Labels and legend
+                plt.xlim([0.0, 1.0])
+                plt.ylim([0.0, 1.05])
+                plt.xlabel('False Positive Rate', fontsize=28, family="Times New Roman")
+                plt.ylabel('True Positive Rate', fontsize=28, family="Times New Roman")
+                plt.title('ROC Curve (One-vs-Rest) for Each Class', fontsize=30, family="Times New Roman", color="black", loc='center', pad=3)
+                plt.legend(loc='lower right', fontsize=18)
+
+                # Save the plot as an image file
+                plt.savefig('roc_curve.png', transparent=True)
+                plt.close()
+
+                # Display the ROC curve in Streamlit
+                with st.container(key="roc"):
+                    st.image('roc_curve.png')
+                    
+                with st.container(key="precision"):
+                    # Compute Precision-Recall curve
+                    precision, recall, _ = precision_recall_curve(y_true_bin, y_pred_probs)
+
+                    # Calculate AUC for Precision-Recall curve
+                    pr_auc = auc(recall, precision)
+
+                    # Plot Precision-Recall curve
+                    plt.figure(figsize=(11, 9))
+                    plt.plot(recall, precision, lw=2, label=f'Precision-Recall curve (AUC = {pr_auc:.2f})')
+
+
+                    plt.xlabel('Recall', fontsize=28,family="Times New Roman")
+                    plt.ylabel('Precision', fontsize=28,family="Times New Roman")
+                    plt.title('Precision-Recall Curve for Each Class', fontsize=30, family="Times New Roman",color="black", loc='center',pad=3)
+                    plt.legend(loc='lower left', fontsize=18)
+                    plt.grid(True, linestyle='--', alpha=0.7)
+                    plt.savefig('precision_recall_curve.png', transparent=True)
+                    plt.close()
+
+                    st.image('precision_recall_curve.png')
+         if st.session_state.show_desc:
+        # components.html(html_string)  # JavaScript works
+            # st.markdown(html_string, unsafe_allow_html=True)
+            image_path = "image.jpg"
+
+            st.container()
+            st.markdown(
+                f"""
+                            
+                        <div class="titles">
+                            <h1>Brain Tummor Classfication</br> Using Transfer  learning</h1>
+                            <div> This web application utilizes transfer learning to classify kidney ultrasound images</br>
+                            into four categories: HEALTH and TUMOR and CYST Class.
+                            Built with Streamlit and powered by </br>a TensorFlow transfer learning
+                            model based on <strong>VGG16</strong>
+                            the app provides </br>a simple and efficient way for users 
+                            to upload brain scans and receive instant predictions.</br> The model analyzes the image
+                            and classifies it based </br>on learned patterns, offering a confidence score for better interpretation.  
+                        </div>
+                            </div>
+                        """,
+                unsafe_allow_html=True,
+            )
+            uploaded_file = st.file_uploader(
+                "Choose a file", type=["png", "jpg", "jpeg"], key="upload-btn"
+            )
+            if uploaded_file is not None:
+                images = Image.open(uploaded_file)
+                # Rewind file pointer to the beginning
+                uploaded_file.seek(0)
+
+                file_content = uploaded_file.read()  # Read file once
+                # Convert to base64 for HTML display
+                encoded_image = base64.b64encode(file_content).decode()
+                # Read and process image
+                pil_image = Image.open(uploaded_file).convert("RGB").resize((224, 224))
+                img_array = np.array(pil_image)
+
+                class0, class1,prediction = predict_image(images)
+                max_index = int(np.argmax(prediction[0]))
+                print(f"max index:{max_index}")
+                max_score = prediction[0][max_index]
+
+                predicted_class = np.argmax(prediction[0])
+                print(f"predicted class is :{predicted_class}")
+
+                cams = generate_gradcam(pil_image, predicted_class)
+                heatmap = cm.jet(cams)[..., :3]
+                heatmap = (heatmap * 255).astype(np.uint8)
+                overlayed_image = cv2.addWeighted(img_array, 0.6, heatmap, 0.4, 0)
+
+                # Convert to PIL
+                overlayed_pil = Image.fromarray(overlayed_image)
+                # Convert to base64
+                orig_b64 = convert_image_to_base64(pil_image)
+                overlay_b64 = convert_image_to_base64(overlayed_pil)
+
+                highlight_class = "highlight"  # Special class for the highest confidence score
+
+                # Generate Grad-CAM
+                #cam = generate_gradcam(pil_image, predicted_class)
+
+                # Create overlay
+                #heatmap = cm.jet(cam)[..., :3]
+                #heatmap = (heatmap * 255).astype(np.uint8)
+                #overlayed_image = cv2.addWeighted(img_array, 0.6, heatmap, 0.4, 0)
+
+                # Convert to PIL
+                #overlayed_pil = Image.fromarray(overlayed_image)
+                # Convert to base64
+                orig_b64 = convert_image_to_base64(pil_image)
+                #overlay_b64 = convert_image_to_base64(overlayed_pil)
+                content = f"""
+                    <div class="content-container">
+                        <!-- Title -->
+                        <!-- Recently Viewed Section -->
+                        <div class="content-container3">
+                    <img src="data:image/png;base64,{orig_b64}" alt="Uploaded Image">
+                            </div>
+                        <div class="content-container3">
+                        <img src="data:image/png;base64,{overlay_b64}" class="result-image">
+                        </div>
+                        <div class="content-container4 {'highlight' if max_index == 0 else ''}">
+                        <h3>{class_labels[0]}</h3>
+                        <p>T Score: {class0  :.2f}</p>
+                        </div>
+                        <div class="content-container5 {'highlight' if max_index == 1 else ''}">
+                        <h3> {class_labels[1]}</h3>
+                        <p>T Score: {class1  :.2f}</p>
+                        </div>
+                """
+
+                # Close the gallery and content div
+
+                # Render the content
+                placeholder = st.empty()  # Create a placeholder
+                placeholder.markdown(loading_html, unsafe_allow_html=True)
+                time.sleep(5)  # Wait for 5 seconds
+                placeholder.empty()
+                st.markdown(content, unsafe_allow_html=True)
+            else:
+                default_image_path = "image.jpg"
+                with open(image_path, "rb") as image_file:
+                    encoded_image = base64.b64encode(image_file.read()).decode()
+
+                    st.markdown(
+                        f"""             
+                        <div class="content-container">
+                        <!-- Title -->
+                        <!-- Recently Viewed Section -->
+                        <div class="content-container3">
+                        <img src="data:image/png;base64,{encoded_image}" alt="Default Image">
+                        </div>
+                        </div>
+
+                        """,
+                        unsafe_allow_html=True,
+                    )