Initial deployment: Breast Cancer Classification App

.gitattributes

@@ -33,3 +33,4 @@ saved_model/**/* 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
+cancer_model.h5 filter=lfs diff=lfs merge=lfs -text

Dockerfile

@@ -0,0 +1,27 @@
+FROM python:3.9-slim
+
+WORKDIR /app
+
+# Install system dependencies
+RUN apt-get update && apt-get install -y \
+    libgl1-mesa-glx \
+    libglib2.0-0 \
+    && rm -rf /var/lib/apt/lists/*
+
+# Copy requirements first for better caching
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy application files
+COPY app.py .
+COPY cancer_model.h5 .
+COPY templates/ templates/
+
+# Create uploads directory
+RUN mkdir -p uploads
+
+# Expose port
+EXPOSE 7860
+
+# Run the application
+CMD ["python", "app.py"]

app.py

@@ -0,0 +1,117 @@
+import os
+import cv2
+import numpy as np
+from flask import Flask, request, render_template, jsonify
+from werkzeug.utils import secure_filename
+import tensorflow as tf
+from tensorflow.keras.models import load_model
+
+app = Flask(__name__)
+app.config['MAX_CONTENT_LENGTH'] = 16 * 1024 * 1024  # 16MB max file size
+app.config['UPLOAD_FOLDER'] = 'uploads'
+
+# Create uploads folder if it doesn't exist
+os.makedirs(app.config['UPLOAD_FOLDER'], exist_ok=True)
+
+# Load the model
+print("Loading model...")
+model = load_model('cancer_model.h5', compile=False)
+print("Model loaded successfully!")
+
+def resize_with_padding(img, target_size):
+    """Resize image while maintaining aspect ratio and add padding"""
+    height, width = img.shape[:2]
+    target_width, target_height = target_size
+    
+    # Calculate scaling factor
+    scale = min(target_width / width, target_height / height)
+    new_width = int(width * scale)
+    new_height = int(height * scale)
+    
+    # Resize image
+    resized_image = cv2.resize(img, (new_width, new_height), interpolation=cv2.INTER_AREA)
+    
+    # Calculate padding
+    pad_width = target_width - new_width
+    pad_height = target_height - new_height
+    top = pad_height // 2
+    bottom = pad_height - top
+    left = pad_width // 2
+    right = pad_width - left
+    
+    # Add black padding
+    padded_image = cv2.copyMakeBorder(resized_image, top, bottom, left, right, 
+                                     cv2.BORDER_CONSTANT, value=[0, 0, 0])
+    return padded_image
+
+def left_or_right(img):
+    """Normalize left/right breast orientation"""
+    height, width = img.shape[:2]
+    left_half = img[:, :width // 2]
+    right_half = img[:, width // 2:]
+    left_intensity = np.sum(left_half)
+    right_intensity = np.sum(right_half)
+    return img if left_intensity > right_intensity else cv2.flip(img, 1)
+
+def predict_image(image_path):
+    """Make prediction on uploaded image"""
+    # Read image
+    img = cv2.imread(image_path)
+    
+    # Preprocess
+    img = resize_with_padding(img, (256, 256))
+    img = left_or_right(img)
+    img = img / 255.0
+    img = np.expand_dims(img, axis=0)
+    
+    # Predict
+    prediction_prob = model.predict(img, verbose=0)
+    predicted_class = 1 if prediction_prob[0][0] > 0.5 else 0
+    confidence = float(prediction_prob[0][0] if predicted_class == 1 else 1 - prediction_prob[0][0])
+    
+    result = {
+        'class': 'Malignant' if predicted_class == 1 else 'Benign',
+        'confidence': confidence * 100,
+        'malignant_prob': float(prediction_prob[0][0]) * 100,
+        'benign_prob': (1 - float(prediction_prob[0][0])) * 100
+    }
+    
+    return result
+
+@app.route('/')
+def index():
+    """Render main page"""
+    return render_template('index.html')
+
+@app.route('/predict', methods=['POST'])
+def predict():
+    """Handle prediction request"""
+    if 'file' not in request.files:
+        return jsonify({'error': 'No file uploaded'}), 400
+    
+    file = request.files['file']
+    
+    if file.filename == '':
+        return jsonify({'error': 'No file selected'}), 400
+    
+    if file:
+        # Save uploaded file
+        filename = secure_filename(file.filename)
+        filepath = os.path.join(app.config['UPLOAD_FOLDER'], filename)
+        file.save(filepath)
+        
+        try:
+            # Make prediction
+            result = predict_image(filepath)
+            
+            # Clean up
+            os.remove(filepath)
+            
+            return jsonify(result)
+        except Exception as e:
+            if os.path.exists(filepath):
+                os.remove(filepath)
+            return jsonify({'error': str(e)}), 500
+
+if __name__ == '__main__':
+    app.run(host='0.0.0.0', port=7860, debug=False)

cancer_model.h5

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

requirements.txt

@@ -0,0 +1,5 @@
+Flask==3.0.0
+tensorflow==2.15.0
+opencv-python-headless==4.8.1.78
+numpy==1.24.3
+Werkzeug==3.0.1

templates/index.html

@@ -0,0 +1,469 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Breast Cancer Classification - AI Diagnostic Tool</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            padding: 20px;
+        }
+
+        .container {
+            max-width: 900px;
+            margin: 0 auto;
+            background: white;
+            border-radius: 20px;
+            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
+            overflow: hidden;
+        }
+
+        .header {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            padding: 30px;
+            text-align: center;
+        }
+
+        .header h1 {
+            font-size: 2.5em;
+            margin-bottom: 10px;
+        }
+
+        .header p {
+            font-size: 1.1em;
+            opacity: 0.9;
+        }
+
+        .content {
+            padding: 40px;
+        }
+
+        .info-box {
+            background: #f8f9fa;
+            border-left: 4px solid #667eea;
+            padding: 20px;
+            margin-bottom: 30px;
+            border-radius: 8px;
+        }
+
+        .info-box h3 {
+            color: #667eea;
+            margin-bottom: 10px;
+        }
+
+        .info-box ul {
+            margin-left: 20px;
+            line-height: 1.8;
+        }
+
+        .upload-section {
+            text-align: center;
+            padding: 40px;
+            border: 3px dashed #667eea;
+            border-radius: 15px;
+            margin-bottom: 30px;
+            transition: all 0.3s;
+            cursor: pointer;
+        }
+
+        .upload-section:hover {
+            border-color: #764ba2;
+            background: #f8f9fa;
+        }
+
+        .upload-section.drag-over {
+            background: #e3f2fd;
+            border-color: #2196F3;
+        }
+
+        .upload-icon {
+            font-size: 4em;
+            color: #667eea;
+            margin-bottom: 20px;
+        }
+
+        .upload-text {
+            font-size: 1.2em;
+            color: #666;
+            margin-bottom: 15px;
+        }
+
+        .file-input {
+            display: none;
+        }
+
+        .upload-button {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            padding: 12px 30px;
+            border: none;
+            border-radius: 25px;
+            font-size: 1.1em;
+            cursor: pointer;
+            transition: transform 0.2s;
+        }
+
+        .upload-button:hover {
+            transform: scale(1.05);
+        }
+
+        .preview-section {
+            display: none;
+            margin-bottom: 30px;
+        }
+
+        .preview-image {
+            max-width: 100%;
+            max-height: 400px;
+            border-radius: 10px;
+            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
+            display: block;
+            margin: 0 auto;
+        }
+
+        .result-section {
+            display: none;
+            padding: 30px;
+            border-radius: 15px;
+            text-align: center;
+        }
+
+        .result-benign {
+            background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
+            color: white;
+        }
+
+        .result-malignant {
+            background: linear-gradient(135deg, #ee0979 0%, #ff6a00 100%);
+            color: white;
+        }
+
+        .result-title {
+            font-size: 2em;
+            margin-bottom: 20px;
+        }
+
+        .confidence-bar {
+            background: rgba(255,255,255,0.3);
+            border-radius: 10px;
+            height: 30px;
+            margin: 20px 0;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .confidence-fill {
+            height: 100%;
+            background: white;
+            border-radius: 10px;
+            transition: width 1s ease;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: #667eea;
+            font-weight: bold;
+        }
+
+        .probabilities {
+            display: flex;
+            justify-content: space-around;
+            margin-top: 20px;
+        }
+
+        .prob-item {
+            flex: 1;
+            padding: 15px;
+            background: rgba(255,255,255,0.2);
+            border-radius: 10px;
+            margin: 0 10px;
+        }
+
+        .prob-label {
+            font-size: 0.9em;
+            margin-bottom: 5px;
+        }
+
+        .prob-value {
+            font-size: 1.8em;
+            font-weight: bold;
+        }
+
+        .loading {
+            display: none;
+            text-align: center;
+            padding: 30px;
+        }
+
+        .spinner {
+            border: 4px solid #f3f3f3;
+            border-top: 4px solid #667eea;
+            border-radius: 50%;
+            width: 50px;
+            height: 50px;
+            animation: spin 1s linear infinite;
+            margin: 0 auto 20px;
+        }
+
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+
+        .error {
+            display: none;
+            background: #ff5252;
+            color: white;
+            padding: 15px;
+            border-radius: 10px;
+            margin-bottom: 20px;
+        }
+
+        .try-again-button {
+            background: white;
+            color: #667eea;
+            padding: 12px 30px;
+            border: none;
+            border-radius: 25px;
+            font-size: 1.1em;
+            cursor: pointer;
+            margin-top: 20px;
+            transition: transform 0.2s;
+        }
+
+        .try-again-button:hover {
+            transform: scale(1.05);
+        }
+
+        .note {
+            background: #fff3cd;
+            border-left: 4px solid #ffc107;
+            padding: 15px;
+            margin-top: 30px;
+            border-radius: 8px;
+            font-size: 0.9em;
+        }
+
+        .footer {
+            background: #f8f9fa;
+            padding: 20px;
+            text-align: center;
+            color: #666;
+            font-size: 0.9em;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="header">
+            <h1>🔬 Breast Cancer Classification</h1>
+            <p>AI-Powered Mammogram Analysis</p>
+        </div>
+
+        <div class="content">
+            <div class="info-box">
+                <h3>📋 How to Use This Tool</h3>
+                <ul>
+                    <li><strong>Upload Image:</strong> Click the upload area or drag & drop a mammogram image</li>
+                    <li><strong>Supported Formats:</strong> JPG, JPEG, PNG</li>
+                    <li><strong>Image Requirements:</strong> Clear mammogram image, preferably full breast view</li>
+                    <li><strong>Classification:</strong> The AI will classify the image as Benign (non-cancerous) or Malignant (cancerous)</li>
+                    <li><strong>Confidence Score:</strong> Shows the model's confidence in its prediction</li>
+                </ul>
+            </div>
+
+            <div class="info-box">
+                <h3>🤖 About the Model</h3>
+                <p>This tool uses an integrated ensemble of VGG16 and ResNet50V2 deep learning models trained on the CBIS-DDSM dataset. The model combines transfer learning with custom classification layers to analyze mammogram images and predict breast cancer classification.</p>
+            </div>
+
+            <div class="error" id="errorMessage"></div>
+
+            <div class="upload-section" id="uploadSection">
+                <div class="upload-icon">📤</div>
+                <div class="upload-text">Drag & Drop your mammogram image here</div>
+                <div style="margin: 20px 0;">or</div>
+                <input type="file" id="fileInput" class="file-input" accept="image/*">
+                <button class="upload-button" onclick="document.getElementById('fileInput').click()">
+                    Choose File
+                </button>
+            </div>
+
+            <div class="preview-section" id="previewSection">
+                <h3 style="margin-bottom: 15px;">Uploaded Image:</h3>
+                <img id="previewImage" class="preview-image" alt="Preview">
+                <div style="text-align: center; margin-top: 20px;">
+                    <button class="upload-button" onclick="analyzeImage()">
+                        🔍 Analyze Image
+                    </button>
+                </div>
+            </div>
+
+            <div class="loading" id="loading">
+                <div class="spinner"></div>
+                <p>Analyzing mammogram image...</p>
+            </div>
+
+            <div class="result-section" id="resultSection">
+                <div class="result-title" id="resultTitle"></div>
+                <div class="confidence-bar">
+                    <div class="confidence-fill" id="confidenceFill"></div>
+                </div>
+                <div class="probabilities">
+                    <div class="prob-item">
+                        <div class="prob-label">Benign Probability</div>
+                        <div class="prob-value" id="benignProb">-</div>
+                    </div>
+                    <div class="prob-item">
+                        <div class="prob-label">Malignant Probability</div>
+                        <div class="prob-value" id="malignantProb">-</div>
+                    </div>
+                </div>
+                <button class="try-again-button" onclick="resetAnalysis()">
+                    🔄 Analyze Another Image
+                </button>
+            </div>
+
+            <div class="note">
+                <strong>⚠️ Important Notice:</strong> This is an AI diagnostic assistance tool for educational and research purposes. It should NOT be used as a substitute for professional medical diagnosis. Always consult with qualified healthcare professionals for medical advice and diagnosis.
+            </div>
+        </div>
+
+        <div class="footer">
+            <p>Powered by VGG16 + ResNet50V2 Ensemble Model | CBIS-DDSM Dataset</p>
+            <p>© 2025 Breast Cancer Classification Project</p>
+        </div>
+    </div>
+
+    <script>
+        let selectedFile = null;
+
+        // File input change handler
+        document.getElementById('fileInput').addEventListener('change', function(e) {
+            handleFile(e.target.files[0]);
+        });
+
+        // Drag and drop handlers
+        const uploadSection = document.getElementById('uploadSection');
+        
+        uploadSection.addEventListener('dragover', function(e) {
+            e.preventDefault();
+            uploadSection.classList.add('drag-over');
+        });
+
+        uploadSection.addEventListener('dragleave', function(e) {
+            e.preventDefault();
+            uploadSection.classList.remove('drag-over');
+        });
+
+        uploadSection.addEventListener('drop', function(e) {
+            e.preventDefault();
+            uploadSection.classList.remove('drag-over');
+            handleFile(e.dataTransfer.files[0]);
+        });
+
+        function handleFile(file) {
+            if (!file) return;
+            
+            // Check if file is an image
+            if (!file.type.startsWith('image/')) {
+                showError('Please upload a valid image file (JPG, JPEG, PNG)');
+                return;
+            }
+
+            selectedFile = file;
+
+            // Show preview
+            const reader = new FileReader();
+            reader.onload = function(e) {
+                document.getElementById('previewImage').src = e.target.result;
+                document.getElementById('uploadSection').style.display = 'none';
+                document.getElementById('previewSection').style.display = 'block';
+                document.getElementById('errorMessage').style.display = 'none';
+            };
+            reader.readAsDataURL(file);
+        }
+
+        async function analyzeImage() {
+            if (!selectedFile) return;
+
+            // Show loading
+            document.getElementById('previewSection').style.display = 'none';
+            document.getElementById('loading').style.display = 'block';
+
+            // Create FormData
+            const formData = new FormData();
+            formData.append('file', selectedFile);
+
+            try {
+                const response = await fetch('/predict', {
+                    method: 'POST',
+                    body: formData
+                });
+
+                const data = await response.json();
+
+                if (response.ok) {
+                    showResult(data);
+                } else {
+                    showError(data.error || 'An error occurred during analysis');
+                }
+            } catch (error) {
+                showError('Failed to connect to the server. Please try again.');
+            } finally {
+                document.getElementById('loading').style.display = 'none';
+            }
+        }
+
+        function showResult(data) {
+            const resultSection = document.getElementById('resultSection');
+            const resultTitle = document.getElementById('resultTitle');
+            const confidenceFill = document.getElementById('confidenceFill');
+            const benignProb = document.getElementById('benignProb');
+            const malignantProb = document.getElementById('malignantProb');
+
+            // Update content
+            resultTitle.textContent = `Classification: ${data.class}`;
+            confidenceFill.style.width = data.confidence.toFixed(2) + '%';
+            confidenceFill.textContent = data.confidence.toFixed(2) + '%';
+            benignProb.textContent = data.benign_prob.toFixed(2) + '%';
+            malignantProb.textContent = data.malignant_prob.toFixed(2) + '%';
+
+            // Update styling based on classification
+            if (data.class === 'Benign') {
+                resultSection.className = 'result-section result-benign';
+            } else {
+                resultSection.className = 'result-section result-malignant';
+            }
+
+            resultSection.style.display = 'block';
+        }
+
+        function showError(message) {
+            const errorElement = document.getElementById('errorMessage');
+            errorElement.textContent = '❌ Error: ' + message;
+            errorElement.style.display = 'block';
+            document.getElementById('uploadSection').style.display = 'block';
+            document.getElementById('loading').style.display = 'none';
+        }
+
+        function resetAnalysis() {
+            selectedFile = null;
+            document.getElementById('fileInput').value = '';
+            document.getElementById('uploadSection').style.display = 'block';
+            document.getElementById('previewSection').style.display = 'none';
+            document.getElementById('resultSection').style.display = 'none';
+            document.getElementById('errorMessage').style.display = 'none';
+        }
+    </script>
+</body>
+</html>