Upload 19 files

.gitattributes

@@ -1,35 +1,3 @@
-*.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
+static/uploads/COVID19(465).jpg filter=lfs diff=lfs merge=lfs -text
+static/uploads/Tuberculosis-664.png filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -0,0 +1,15 @@
+__pycache__/
+*.py[cod]
+*.env
+.env
+instance/
+*.sqlite3
+*.db
+.DS_Store
+venv/
+.env.*
+*.log
+*.bak
+.idea/
+*.swp
+static/uploads/

README.md

@@ -1,10 +1 @@
----
-title: Lumina
-emoji: 🏃
-colorFrom: indigo
-colorTo: gray
-sdk: docker
-pinned: false
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# LuminaCXR

app.py

@@ -0,0 +1,69 @@
+import os
+import torch
+from flask import Flask, render_template, request
+from PIL import Image
+import numpy as np
+import cv2
+
+from gradcam import GradCAM, model, classes
+from torchvision import transforms
+
+app = Flask(__name__)
+UPLOAD_FOLDER = "static/uploads"
+os.makedirs(UPLOAD_FOLDER, exist_ok=True)
+
+transform = transforms.Compose([
+    transforms.Resize((224, 224)),
+    transforms.ToTensor(),
+    transforms.Normalize([0.485, 0.456, 0.406],
+                         [0.229, 0.224, 0.225])
+])
+
+@app.route('/')
+def index():
+    return render_template('index.html')
+
+@app.route('/predict', methods=['POST'])
+def predict():
+    if 'image' not in request.files:
+        return "No image uploaded", 400
+
+    file = request.files['image']
+    if file.filename == '':
+        return "No selected image", 400
+
+    img_path = os.path.join(UPLOAD_FOLDER, file.filename)
+    file.save(img_path)
+
+    image = Image.open(img_path).convert("RGB")
+    input_tensor = transform(image).unsqueeze(0).to(next(model.parameters()).device)
+
+    # Predict
+    with torch.no_grad():
+        output = model(input_tensor)
+        pred_idx = torch.argmax(output, dim=1).item()
+        confidence = torch.softmax(output, dim=1)[0][pred_idx].item()
+
+    # Grad-CAM
+    gradcam = GradCAM(model, model.features.denseblock4)
+    cam = gradcam.generate(input_tensor, class_idx=pred_idx)
+
+    # Prepare overlay
+    image_np = np.array(image.resize((224, 224)))
+    heatmap = cv2.applyColorMap(np.uint8(255 * cam), cv2.COLORMAP_JET)
+    overlay = cv2.addWeighted(image_np, 0.6, heatmap, 0.4, 0)
+    cam_path = os.path.join(UPLOAD_FOLDER, "cam_" + file.filename)
+    cv2.imwrite(cam_path, cv2.cvtColor(overlay, cv2.COLOR_RGB2BGR))
+
+    return render_template(
+        'result.html',
+        prediction=classes[pred_idx],
+        confidence=f"{confidence * 100:.2f}%",
+        uploaded_image=file.filename,
+        cam_image="cam_" + file.filename
+    )
+
+if __name__ == '__main__':
+    import os
+    port = int(os.environ.get("PORT", 5000))
+    app.run(debug=False, host='0.0.0.0', port=port)

gradcam.py

@@ -0,0 +1,77 @@
+import torch
+import numpy as np
+import cv2
+from torchvision import models
+from PIL import Image
+
+# ----------------------------- Device -----------------------------
+device = torch.device("cuda" if torch.cuda.is_available() else "cpu")
+
+# ----------------------------- Classes -----------------------------
+classes = ['COVID19', 'NORMAL', 'PNEUMONIA', 'TUBERCULOSIS']
+
+# ----------------------------- Custom DenseNet Forward -----------------------------
+from torchvision.models.densenet import DenseNet
+
+class CustomDenseNet(DenseNet):
+    def forward(self, x):
+        features = self.features(x)
+        out = torch.relu(features.clone())  # clone avoids inplace operation
+        out = torch.nn.functional.adaptive_avg_pool2d(out, (1, 1)).view(x.size(0), -1)
+        out = self.classifier(out)
+        return out
+
+# ----------------------------- Load Model -----------------------------
+def load_model():
+    model = CustomDenseNet(
+        growth_rate=32, block_config=(6, 12, 24, 16),
+        num_init_features=64, bn_size=4, drop_rate=0,
+        num_classes=len(classes)
+    )
+    model.load_state_dict(torch.load("model.pth", map_location=device))
+    model.to(device)
+    model.eval()
+    return model
+
+model = load_model()
+
+# ----------------------------- Grad-CAM Class -----------------------------
+class GradCAM:
+    def __init__(self, model, target_layer):
+        self.model = model
+        self.target_layer = target_layer
+        self.gradients = None
+        self.activations = None
+
+        target_layer.register_forward_hook(self.save_activation)
+        target_layer.register_full_backward_hook(self.save_gradient)
+
+    def save_activation(self, module, input, output):
+        self.activations = output.detach()
+
+    def save_gradient(self, module, grad_input, grad_output):
+        self.gradients = grad_output[0].detach()
+
+    def generate(self, input_tensor, class_idx=None):
+        output = self.model(input_tensor)
+
+        if class_idx is None:
+            class_idx = torch.argmax(output)
+
+        self.model.zero_grad()
+        loss = output[:, class_idx]
+        loss.backward()
+
+        grads = self.gradients[0].cpu().numpy()
+        activations = self.activations[0].cpu().numpy()
+
+        weights = np.mean(grads, axis=(1, 2))
+        cam = np.zeros(activations.shape[1:], dtype=np.float32)
+        for i, w in enumerate(weights):
+            cam += w * activations[i]
+
+        cam = np.maximum(cam, 0)
+        cam = cv2.resize(cam, (224, 224))
+        cam -= np.min(cam)
+        cam /= np.max(cam) + 1e-8
+        return cam

model.pth

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

requirements.txt

@@ -0,0 +1,7 @@
+torch==2.0.1
+torchvision==0.15.2
+flask==2.2.5
+numpy==1.24.4
+Pillow==9.5.0
+opencv-python-headless==4.7.0.72
+gunicorn

runtime.txt

@@ -0,0 +1 @@
+python-3.8.18

static/css/styles.css

@@ -0,0 +1,589 @@
+/* Reset and Base Styles */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+  line-height: 1.6;
+  color: #333;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  min-height: 100vh;
+}
+
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+/* Header Styles */
+.header {
+  text-align: center;
+  margin-bottom: 40px;
+  color: white;
+}
+
+.header-icon {
+  font-size: 3rem;
+  margin-bottom: 20px;
+  opacity: 0.9;
+}
+
+.header-title {
+  font-size: 2.5rem;
+  font-weight: 700;
+  margin-bottom: 10px;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+.header-subtitle {
+  font-size: 1.1rem;
+  opacity: 0.9;
+  font-weight: 300;
+}
+
+/* Main Content */
+.main-content {
+  background: white;
+  border-radius: 20px;
+  padding: 40px;
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+  margin-bottom: 20px;
+}
+
+/* Upload Card */
+.upload-card {
+  text-align: center;
+  padding: 40px;
+  border: 2px dashed #e0e6ed;
+  border-radius: 15px;
+  background: #f8fafc;
+  transition: all 0.3s ease;
+  margin-bottom: 40px;
+}
+
+.upload-card:hover {
+  border-color: #667eea;
+  background: #f1f5f9;
+}
+
+.upload-icon {
+  font-size: 3rem;
+  color: #667eea;
+  margin-bottom: 20px;
+}
+
+.upload-form {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 20px;
+}
+
+/* File Input Styles */
+.file-input-wrapper {
+  position: relative;
+  width: 100%;
+  max-width: 400px;
+}
+
+.file-input {
+  position: absolute;
+  opacity: 0;
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+}
+
+.file-label {
+  display: block;
+  padding: 20px;
+  background: #667eea;
+  color: white;
+  border-radius: 10px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  text-align: center;
+}
+
+.file-label:hover {
+  background: #5a67d8;
+  transform: translateY(-2px);
+  box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
+}
+
+.file-label-text {
+  display: block;
+  font-size: 1.1rem;
+  font-weight: 600;
+  margin-bottom: 5px;
+}
+
+.file-label-subtext {
+  font-size: 0.9rem;
+  opacity: 0.8;
+}
+
+/* Preview Styles */
+.preview-container {
+  text-align: center;
+  padding: 20px;
+  background: white;
+  border-radius: 10px;
+  border: 1px solid #e0e6ed;
+}
+
+.preview-image {
+  max-width: 200px;
+  max-height: 200px;
+  border-radius: 8px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.preview-text {
+  margin-top: 10px;
+  color: #667eea;
+  font-weight: 500;
+}
+
+/* Submit Button */
+.submit-btn {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  border: none;
+  padding: 15px 30px;
+  font-size: 1.1rem;
+  font-weight: 600;
+  border-radius: 10px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.submit-btn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
+}
+
+/* Info Section */
+.info-section {
+  text-align: center;
+  margin-top: 40px;
+}
+
+.info-section h3 {
+  font-size: 1.5rem;
+  margin-bottom: 30px;
+  color: #2d3748;
+}
+
+.info-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 30px;
+  margin-top: 30px;
+}
+
+.info-item {
+  text-align: center;
+  padding: 20px;
+}
+
+.info-item i {
+  font-size: 2rem;
+  color: #667eea;
+  margin-bottom: 15px;
+}
+
+.info-item h4 {
+  font-size: 1.2rem;
+  margin-bottom: 10px;
+  color: #2d3748;
+}
+
+.info-item p {
+  color: #718096;
+}
+
+/* Results Page Styles */
+.results-summary {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 30px;
+  margin-bottom: 40px;
+}
+
+.result-card {
+  background: white;
+  padding: 30px;
+  border-radius: 15px;
+  text-align: center;
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+  border: 1px solid #e0e6ed;
+  transition: transform 0.3s ease;
+}
+
+.result-card:hover {
+  transform: translateY(-5px);
+}
+
+.result-icon {
+  font-size: 2.5rem;
+  margin-bottom: 15px;
+}
+
+.prediction-card .result-icon {
+  color: #48bb78;
+}
+
+.confidence-card .result-icon {
+  color: #667eea;
+}
+
+.result-card h3 {
+  font-size: 1.3rem;
+  margin-bottom: 15px;
+  color: #2d3748;
+}
+
+.prediction-value {
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: #48bb78;
+  text-transform: capitalize;
+}
+
+.confidence-value {
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: #667eea;
+  margin-bottom: 15px;
+}
+
+.confidence-bar {
+  width: 100%;
+  height: 8px;
+  background: #e0e6ed;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.confidence-fill {
+  height: 100%;
+  background: linear-gradient(90deg, #667eea, #48bb78);
+  border-radius: 4px;
+  transition: width 1s ease;
+}
+
+/* Comparison Section */
+.comparison-section {
+  margin-top: 40px;
+}
+
+.section-title {
+  font-size: 1.8rem;
+  text-align: center;
+  margin-bottom: 30px;
+  color: #2d3748;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+}
+
+.image-comparison {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  gap: 30px;
+  align-items: center;
+  margin-bottom: 30px;
+}
+
+.image-container {
+  text-align: center;
+}
+
+.image-header {
+  margin-bottom: 20px;
+}
+
+.image-header h3 {
+  font-size: 1.3rem;
+  color: #2d3748;
+  margin-bottom: 5px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.image-header p {
+  color: #718096;
+  font-size: 0.9rem;
+}
+
+.image-wrapper {
+  position: relative;
+  display: inline-block;
+  border-radius: 15px;
+  overflow: hidden;
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
+  transition: transform 0.3s ease;
+}
+
+.image-wrapper:hover {
+  transform: scale(1.02);
+}
+
+.comparison-image {
+  width: 100%;
+  max-width: 300px;
+  height: auto;
+  display: block;
+}
+
+.image-overlay {
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  background: rgba(0, 0, 0, 0.7);
+  color: white;
+  padding: 5px 10px;
+  border-radius: 5px;
+  font-size: 0.8rem;
+  font-weight: 600;
+}
+
+.comparison-divider {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+}
+
+.divider-line {
+  width: 2px;
+  height: 40px;
+  background: #e0e6ed;
+}
+
+.divider-icon {
+  background: #667eea;
+  color: white;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.2rem;
+}
+
+/* Explanation Card */
+.explanation-card {
+  background: #f8fafc;
+  padding: 30px;
+  border-radius: 15px;
+  border-left: 4px solid #667eea;
+  margin-bottom: 30px;
+}
+
+.explanation-card h3 {
+  font-size: 1.3rem;
+  color: #2d3748;
+  margin-bottom: 15px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.explanation-card p {
+  color: #4a5568;
+  line-height: 1.7;
+  margin-bottom: 20px;
+}
+
+.heatmap-legend {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+  flex-wrap: wrap;
+}
+
+.legend-label {
+  font-weight: 600;
+  color: #2d3748;
+}
+
+.legend-bar {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex: 1;
+  min-width: 200px;
+}
+
+.legend-gradient {
+  height: 20px;
+  width: 100px;
+  background: linear-gradient(90deg, #3182ce, #38a169, #d69e2e, #e53e3e);
+  border-radius: 10px;
+  border: 1px solid #e0e6ed;
+}
+
+.legend-low,
+.legend-high {
+  font-size: 0.9rem;
+  color: #718096;
+  font-weight: 500;
+}
+
+/* Action Buttons */
+.action-buttons {
+  display: flex;
+  justify-content: center;
+  gap: 20px;
+  flex-wrap: wrap;
+  margin-top: 40px;
+}
+
+.btn {
+  padding: 12px 24px;
+  border-radius: 10px;
+  text-decoration: none;
+  font-weight: 600;
+  border: none;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 1rem;
+}
+
+.btn-primary {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+}
+
+.btn-primary:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
+}
+
+.btn-secondary {
+  background: white;
+  color: #667eea;
+  border: 2px solid #667eea;
+}
+
+.btn-secondary:hover {
+  background: #667eea;
+  color: white;
+  transform: translateY(-2px);
+}
+
+/* Animations */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.fade-in {
+  animation: fadeIn 0.6s ease forwards;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+  .container {
+    padding: 10px;
+  }
+
+  .main-content {
+    padding: 20px;
+  }
+
+  .header-title {
+    font-size: 2rem;
+  }
+
+  .image-comparison {
+    grid-template-columns: 1fr;
+    gap: 20px;
+  }
+
+  .comparison-divider {
+    flex-direction: row;
+    justify-content: center;
+  }
+
+  .divider-line {
+    width: 40px;
+    height: 2px;
+  }
+
+  .action-buttons {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .btn {
+    width: 100%;
+    max-width: 250px;
+    justify-content: center;
+  }
+
+  .heatmap-legend {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .legend-bar {
+    width: 100%;
+  }
+}
+
+@media (max-width: 480px) {
+  .header-title {
+    font-size: 1.5rem;
+  }
+
+  .upload-card {
+    padding: 20px;
+  }
+
+  .results-summary {
+    grid-template-columns: 1fr;
+  }
+
+  .comparison-image {
+    max-width: 250px;
+  }
+}
+
+/* Print Styles */
+@media print {
+  body {
+    background: white;
+  }
+
+  .action-buttons {
+    display: none;
+  }
+
+  .main-content {
+    box-shadow: none;
+    border: 1px solid #e0e6ed;
+  }
+}

templates/index.html

@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Chest X-ray AI Classifier</title>
+    
+    <!-- Corrected CSS path -->
+    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/styles.css') }}">
+    
+    <!-- Font Awesome for icons -->
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
+</head>
+<body>
+    <div class="container">
+        <header class="header">
+            <div class="header-icon">
+                <i class="fas fa-x-ray"></i>
+            </div>
+            <h1 class="header-title">Chest X-ray AI Classifier</h1>
+            <p class="header-subtitle">Upload your chest X-ray image for AI-powered analysis</p>
+        </header>
+
+        <main class="main-content">
+            <div class="upload-card">
+                <div class="upload-icon">
+                    <i class="fas fa-cloud-upload-alt"></i>
+                </div>
+                
+                <form method="POST" action="/predict" enctype="multipart/form-data" class="upload-form">
+                    <div class="file-input-wrapper">
+                        <input type="file" name="image" id="image" accept="image/*" required class="file-input">
+                        <label for="image" class="file-label">
+                            <span class="file-label-text">Choose X-ray Image</span>
+                            <span class="file-label-subtext">PNG, JPG, JPEG up to 10MB</span>
+                        </label>
+                    </div>
+                    
+                    <div class="preview-container" id="preview-container" style="display: none;">
+                        <img id="preview-image" src="/static/img/placeholder.svg" alt="Preview" class="preview-image">
+                        <p class="preview-text">Image ready for analysis</p>
+                    </div>
+                    
+                    <button type="submit" class="submit-btn">
+                        <i class="fas fa-brain"></i>
+                        Analyze X-ray
+                    </button>
+                </form>
+            </div>
+
+            <div class="info-section">
+                <h3>How it works</h3>
+                <div class="info-grid">
+                    <div class="info-item">
+                        <i class="fas fa-upload"></i>
+                        <h4>Upload</h4>
+                        <p>Select your chest X-ray image</p>
+                    </div>
+                    <div class="info-item">
+                        <i class="fas fa-cogs"></i>
+                        <h4>Analyze</h4>
+                        <p>AI processes the image</p>
+                    </div>
+                    <div class="info-item">
+                        <i class="fas fa-chart-line"></i>
+                        <h4>Results</h4>
+                        <p>Get classification and visualization</p>
+                    </div>
+                </div>
+            </div>
+        </main>
+    </div>
+
+    <script>
+        const fileInput = document.getElementById('image');
+        const previewContainer = document.getElementById('preview-container');
+        const previewImage = document.getElementById('preview-image');
+        const fileLabel = document.querySelector('.file-label-text');
+
+        fileInput.addEventListener('change', function(e) {
+            const file = e.target.files[0];
+            if (file) {
+                const reader = new FileReader();
+                reader.onload = function(e) {
+                    previewImage.src = e.target.result;
+                    previewContainer.style.display = 'block';
+                    fileLabel.textContent = file.name;
+                };
+                reader.readAsDataURL(file);
+            }
+        });
+    </script>
+</body>
+</html>

templates/result.html

@@ -0,0 +1,146 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Analysis Results - Chest X-ray AI Classifier</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
+</head>
+<body>
+    <div class="container">
+        <header class="header">
+            <div class="header-icon">
+                <i class="fas fa-chart-line"></i>
+            </div>
+            <h1 class="header-title">Analysis Results</h1>
+            <p class="header-subtitle">AI-powered chest X-ray classification results</p>
+        </header>
+
+        <main class="main-content">
+            <!-- Results Summary -->
+            <div class="results-summary">
+                <div class="result-card prediction-card">
+                    <div class="result-icon">
+                        <i class="fas fa-diagnoses"></i>
+                    </div>
+                    <h3>Classification</h3>
+                    <p class="prediction-value">{{ prediction }}</p>
+                </div>
+                
+                <div class="result-card confidence-card">
+                    <div class="result-icon">
+                        <i class="fas fa-percentage"></i>
+                    </div>
+                    <h3>Confidence</h3>
+                    <p class="confidence-value">{{ confidence }}</p>
+                    <div class="confidence-bar">
+                        <!-- Optional: visualize bar if desired -->
+                    </div>
+                </div>
+            </div>
+
+            <!-- Image Comparison Section -->
+            <div class="comparison-section">
+                <h2 class="section-title">
+                    <i class="fas fa-images"></i>
+                    Image Analysis Comparison
+                </h2>
+                
+                <div class="image-comparison">
+                    <div class="image-container">
+                        <div class="image-header">
+                            <h3>
+                                <i class="fas fa-file-medical"></i>
+                                Original X-ray
+                            </h3>
+                            <p>Uploaded chest X-ray image</p>
+                        </div>
+                        <div class="image-wrapper">
+                            <img src="{{ url_for('static', filename='uploads/' + uploaded_image) }}" alt="Original X-ray" class="comparison-image">
+                            <div class="image-overlay">
+                                <span class="image-label">Original</span>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="comparison-divider">
+                        <div class="divider-line"></div>
+                        <div class="divider-icon">
+                            <i class="fas fa-arrows-alt-h"></i>
+                        </div>
+                        <div class="divider-line"></div>
+                    </div>
+
+                    <div class="image-container">
+                        <div class="image-header">
+                            <h3>
+                                <i class="fas fa-eye"></i>
+                                Grad-CAM Visualization
+                            </h3>
+                            <p>AI attention heatmap overlay</p>
+                        </div>
+                        <div class="image-wrapper">
+                            <img src="{{ url_for('static', filename='uploads/' + cam_image) }}" alt="Grad-CAM Visualization" class="comparison-image">
+                            <div class="image-overlay">
+                                <span class="image-label">Grad-CAM</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Explanation Section -->
+                <div class="explanation-card">
+                    <h3>
+                        <i class="fas fa-info-circle"></i>
+                        Understanding Grad-CAM
+                    </h3>
+                    <p>
+                        Grad-CAM (Gradient-weighted Class Activation Mapping) highlights the regions 
+                        in the X-ray that the AI model focused on when making its prediction. 
+                        Warmer colors (red/yellow) indicate areas of higher importance for the classification.
+                    </p>
+                    <div class="heatmap-legend">
+                        <span class="legend-label">Attention Level:</span>
+                        <div class="legend-bar">
+                            <span class="legend-low">Low</span>
+                            <div class="legend-gradient"></div>
+                            <span class="legend-high">High</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Action Buttons -->
+            <div class="action-buttons">
+                <a href="{{ url_for('index') }}" class="btn btn-primary">
+                    <i class="fas fa-plus"></i>
+                    Analyze Another Image
+                </a>
+                <button class="btn btn-secondary" onclick="window.print()">
+                    <i class="fas fa-print"></i>
+                    Print Results
+                </button>
+                <button class="btn btn-secondary" onclick="downloadResults()">
+                    <i class="fas fa-download"></i>
+                    Download Report
+                </button>
+            </div>
+        </main>
+    </div>
+
+    <script>
+        function downloadResults() {
+            alert('Download functionality would be implemented here');
+        }
+
+        document.addEventListener('DOMContentLoaded', function() {
+            const elements = document.querySelectorAll('.result-card, .image-container');
+            elements.forEach((el, index) => {
+                el.style.animationDelay = `${index * 0.1}s`;
+                el.classList.add('fade-in');
+            });
+        });
+    </script>
+</body>
+</html>