Spaces:

lrmaneedeep
/

bdtraining

Sleeping

App Files Files Community

lrmaneedeep commited on Jan 15

Commit

30248ba

verified ·

1 Parent(s): 9207a35

Create templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +368 -0

templates/index.html ADDED Viewed

	@@ -0,0 +1,368 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Brain Tumor Detection</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+            min-height: 100vh;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            padding: 20px;
+        }
+        .container {
+            background: white;
+            border-radius: 20px;
+            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+            padding: 40px;
+            max-width: 500px;
+            width: 100%;
+        }
+        h1 {
+            text-align: center;
+            color: #1a1a2e;
+            margin-bottom: 10px;
+            font-size: 28px;
+        }
+        .subtitle {
+            text-align: center;
+            color: #666;
+            margin-bottom: 30px;
+            font-size: 14px;
+        }
+        .upload-area {
+            border: 3px dashed #ddd;
+            border-radius: 15px;
+            padding: 40px 20px;
+            text-align: center;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            margin-bottom: 20px;
+        }
+        .upload-area:hover {
+            border-color: #4a90a4;
+            background: #f8f9fa;
+        }
+        .upload-area.dragover {
+            border-color: #4a90a4;
+            background: #e8f4f8;
+        }
+        .upload-icon {
+            font-size: 50px;
+            margin-bottom: 15px;
+        }
+        .upload-text {
+            color: #666;
+            font-size: 16px;
+        }
+        .upload-text span {
+            color: #4a90a4;
+            font-weight: bold;
+        }
+        #fileInput {
+            display: none;
+        }
+        .preview-container {
+            display: none;
+            margin-bottom: 20px;
+        }
+        .preview-container img {
+            width: 100%;
+            max-height: 300px;
+            object-fit: contain;
+            border-radius: 10px;
+            border: 2px solid #eee;
+        }
+        .file-name {
+            text-align: center;
+            color: #666;
+            font-size: 14px;
+            margin-top: 10px;
+        }
+        .btn {
+            width: 100%;
+            padding: 15px;
+            border: none;
+            border-radius: 10px;
+            font-size: 18px;
+            font-weight: bold;
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+        .btn-predict {
+            background: linear-gradient(135deg, #4a90a4 0%, #357a8c 100%);
+            color: white;
+        }
+        .btn-predict:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 5px 20px rgba(74, 144, 164, 0.4);
+        }
+        .btn-predict:disabled {
+            background: #ccc;
+            cursor: not-allowed;
+            transform: none;
+            box-shadow: none;
+        }
+        .result-container {
+            display: none;
+            margin-top: 25px;
+            padding: 25px;
+            border-radius: 15px;
+            text-align: center;
+        }
+        .result-tumor {
+            background: linear-gradient(135deg, #ff6b6b 0%, #ee5a5a 100%);
+            color: white;
+        }
+        .result-no-tumor {
+            background: linear-gradient(135deg, #51cf66 0%, #40c057 100%);
+            color: white;
+        }
+        .result-title {
+            font-size: 24px;
+            font-weight: bold;
+            margin-bottom: 10px;
+        }
+        .result-confidence {
+            font-size: 16px;
+            opacity: 0.9;
+        }
+        .loading {
+            display: none;
+            text-align: center;
+            margin-top: 20px;
+        }
+        .spinner {
+            border: 4px solid #f3f3f3;
+            border-top: 4px solid #4a90a4;
+            border-radius: 50%;
+            width: 40px;
+            height: 40px;
+            animation: spin 1s linear infinite;
+            margin: 0 auto 15px;
+        }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+        .error-message {
+            display: none;
+            background: #fff3f3;
+            border: 1px solid #ff6b6b;
+            color: #d63031;
+            padding: 15px;
+            border-radius: 10px;
+            margin-top: 20px;
+            text-align: center;
+        }
+        .reset-btn {
+            display: none;
+            margin-top: 15px;
+            background: #6c757d;
+            color: white;
+        }
+        .reset-btn:hover {
+            background: #5a6268;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>🧠 Brain Tumor Detection</h1>
+        <p class="subtitle">Upload an MRI scan image for AI-powered analysis</p>
+        <div class="upload-area" id="uploadArea">
+            <div class="upload-icon">📤</div>
+            <p class="upload-text">Drag & drop your image here<br>or <span>click to browse</span></p>
+            <input type="file" id="fileInput" accept="image/*">
+        </div>
+        <div class="preview-container" id="previewContainer">
+            <img id="previewImage" src="" alt="Preview">
+            <p class="file-name" id="fileName"></p>
+        </div>
+        <button class="btn btn-predict" id="predictBtn" disabled>Analyze Image</button>
+        <div class="loading" id="loading">
+            <div class="spinner"></div>
+            <p>Analyzing image...</p>
+        </div>
+        <div class="error-message" id="errorMessage"></div>
+        <div class="result-container" id="resultContainer">
+            <p class="result-title" id="resultTitle"></p>
+            <p class="result-confidence" id="resultConfidence"></p>
+        </div>
+        <button class="btn reset-btn" id="resetBtn">Upload New Image</button>
+    </div>
+    <script>
+        const uploadArea = document.getElementById('uploadArea');
+        const fileInput = document.getElementById('fileInput');
+        const previewContainer = document.getElementById('previewContainer');
+        const previewImage = document.getElementById('previewImage');
+        const fileName = document.getElementById('fileName');
+        const predictBtn = document.getElementById('predictBtn');
+        const loading = document.getElementById('loading');
+        const resultContainer = document.getElementById('resultContainer');
+        const resultTitle = document.getElementById('resultTitle');
+        const resultConfidence = document.getElementById('resultConfidence');
+        const errorMessage = document.getElementById('errorMessage');
+        const resetBtn = document.getElementById('resetBtn');
+        let selectedFile = null;
+        // Click to upload
+        uploadArea.addEventListener('click', () => fileInput.click());
+        // Drag and drop
+        uploadArea.addEventListener('dragover', (e) => {
+            e.preventDefault();
+            uploadArea.classList.add('dragover');
+        });
+        uploadArea.addEventListener('dragleave', () => {
+            uploadArea.classList.remove('dragover');
+        });
+        uploadArea.addEventListener('drop', (e) => {
+            e.preventDefault();
+            uploadArea.classList.remove('dragover');
+            const files = e.dataTransfer.files;
+            if (files.length) handleFile(files[0]);
+        });
+        // File input change
+        fileInput.addEventListener('change', (e) => {
+            if (e.target.files.length) handleFile(e.target.files[0]);
+        });
+        function handleFile(file) {
+            if (!file.type.startsWith('image/')) {
+                showError('Please upload an image file (PNG, JPG, JPEG)');
+                return;
+            }
+            selectedFile = file;
+            fileName.textContent = file.name;
+            const reader = new FileReader();
+            reader.onload = (e) => {
+                previewImage.src = e.target.result;
+                previewContainer.style.display = 'block';
+                uploadArea.style.display = 'none';
+                predictBtn.disabled = false;
+                hideError();
+                resultContainer.style.display = 'none';
+                resetBtn.style.display = 'none';
+            };
+            reader.readAsDataURL(file);
+        }
+        // Predict button click
+        predictBtn.addEventListener('click', async () => {
+            if (!selectedFile) return;
+            const formData = new FormData();
+            formData.append('file', selectedFile);
+            predictBtn.disabled = true;
+            loading.style.display = 'block';
+            resultContainer.style.display = 'none';
+            hideError();
+            try {
+                const response = await fetch('/predict', {
+                    method: 'POST',
+                    body: formData
+                });
+                const data = await response.json();
+                if (data.success) {
+                    resultTitle.textContent = data.prediction;
+                    resultConfidence.textContent = `Confidence: ${data.confidence}`;
+                    resultContainer.className = 'result-container';
+                    if (data.prediction.includes('Tumor Detected') && !data.prediction.includes('No')) {
+                        resultContainer.classList.add('result-tumor');
+                    } else {
+                        resultContainer.classList.add('result-no-tumor');
+                    }
+                    resultContainer.style.display = 'block';
+                    resetBtn.style.display = 'block';
+                } else {
+                    showError(data.error || 'Prediction failed');
+                }
+            } catch (error) {
+                showError('Server error. Please try again.');
+            } finally {
+                loading.style.display = 'none';
+                predictBtn.disabled = false;
+            }
+        });
+        // Reset button
+        resetBtn.addEventListener('click', () => {
+            selectedFile = null;
+            fileInput.value = '';
+            previewContainer.style.display = 'none';
+            uploadArea.style.display = 'block';
+            resultContainer.style.display = 'none';
+            resetBtn.style.display = 'none';
+            predictBtn.disabled = true;
+            hideError();
+        });
+        function showError(message) {
+            errorMessage.textContent = message;
+            errorMessage.style.display = 'block';
+        }
+        function hideError() {
+            errorMessage.style.display = 'none';
+        }
+    </script>
+</body>
+</html>