Spaces:

Abs6187
/

Medical_Report_Analyzer

Running

App Files Files Community

Abs6187 commited on 11 days ago

Commit

b2adcbf

verified ·

1 Parent(s): 260bf8f

Upload 7 files

Browse files

Files changed (7) hide show

static/css/style.css +39 -0
templates/index.html +570 -0
templates/login.html +87 -0
templates/report_analyzer.html +165 -0
templates/signup.html +52 -0
utils/predict.py +93 -0
utils/together.py +29 -0

static/css/style.css ADDED Viewed

	@@ -0,0 +1,39 @@

+body {
+    font-family: Arial, sans-serif;
+    background-color: #f8f9fa;
+    text-align: center;
+    padding: 40px;
+}
+.container {
+    background: white;
+    padding: 30px;
+    border-radius: 10px;
+    display: inline-block;
+    box-shadow: 0px 0px 20px #ccc;
+}
+input[type="file"] {
+    margin-top: 10px;
+}
+button {
+    padding: 10px 20px;
+    font-size: 16px;
+    background: #28a745;
+    color: white;
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+}
+.explanation-box {
+    margin-top: 30px;
+    padding: 15px;
+    background: #e8f5e9;
+    border-left: 5px solid #2e7d32;
+    border-radius: 8px;
+    text-align: left;
+    display: inline-block;
+    max-width: 600px;
+}

templates/index.html ADDED Viewed

	@@ -0,0 +1,570 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Clarity AI | Medical Analysis</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+    <style>
+        * {
+            font-family: 'Inter', sans-serif;
+        }
+        body {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            height: 100vh;
+            overflow: hidden;
+        }
+        .glass-card {
+            background: rgba(255, 255, 255, 0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid rgba(255, 255, 255, 0.3);
+            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+            transition: all 0.2s ease;
+        }
+        .glass-card:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
+        }
+        .btn-primary {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            transition: all 0.2s ease;
+            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
+        }
+        .btn-primary:hover {
+            transform: translateY(-1px);
+            box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
+        }
+        .user-message {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+        }
+        .bot-message {
+            background: rgba(248, 250, 252, 0.95);
+            color: #334155;
+            border: 1px solid rgba(226, 232, 240, 0.5);
+        }
+        .upload-zone {
+            transition: all 0.2s ease;
+            border: 2px dashed rgba(255, 255, 255, 0.4);
+            background: rgba(255, 255, 255, 0.1);
+        }
+        .upload-zone:hover {
+            border-color: rgba(255, 255, 255, 0.7);
+            background: rgba(255, 255, 255, 0.15);
+            transform: scale(1.01);
+        }
+        .upload-zone.dragover {
+            border-color: #ffd700;
+            background: rgba(255, 215, 0, 0.1);
+        }
+        .chat-container {
+            height: calc(100vh - 120px);
+            display: flex;
+            flex-direction: column;
+        }
+        .chat-messages {
+            flex: 1;
+            overflow-y: auto;
+            min-height: 0;
+        }
+        .main-container {
+            height: calc(100vh - 80px);
+            overflow-y: auto;
+        }
+        ::-webkit-scrollbar {
+            width: 6px;
+        }
+        ::-webkit-scrollbar-track {
+            background: rgba(255, 255, 255, 0.1);
+            border-radius: 10px;
+        }
+        ::-webkit-scrollbar-thumb {
+            background: rgba(102, 126, 234, 0.6);
+            border-radius: 10px;
+        }
+        .fade-in {
+            animation: fadeIn 0.3s ease;
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(10px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        .glassmorphism-header {
+            background: rgba(255, 255, 255, 0.1);
+            backdrop-filter: blur(20px);
+            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+        }
+        .progress-bar {
+            background: linear-gradient(90deg, #667eea, #764ba2);
+            transition: width 1s ease;
+        }
+        .typing-dot {
+            width: 6px;
+            height: 6px;
+            border-radius: 50%;
+            background: #667eea;
+            margin: 0 1px;
+            animation: typing 1s infinite ease-in-out;
+        }
+        .typing-dot:nth-child(1) { animation-delay: 0s; }
+        .typing-dot:nth-child(2) { animation-delay: 0.2s; }
+        .typing-dot:nth-child(3) { animation-delay: 0.4s; }
+        @keyframes typing {
+            0%, 60%, 100% { transform: scale(0.8); opacity: 0.5; }
+            30% { transform: scale(1); opacity: 1; }
+        }
+    </style>
+</head>
+<body class="antialiased text-gray-800">
+    <!-- Header -->
+    <header class="glassmorphism-header h-20 flex-shrink-0 z-50">
+        <nav class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-full flex justify-between items-center">
+            <div class="flex items-center space-x-3">
+                <div class="bg-gradient-to-r from-white to-gray-100 p-2 rounded-xl shadow-lg">
+                    <svg class="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
+                    </svg>
+                </div>
+                <div>
+                    <h1 class="text-xl font-bold text-white">Clarity AI</h1>
+                    <p class="text-xs text-white/80">Medical Analysis</p>
+                </div>
+            </div>
+            <div class="flex items-center space-x-4">
+                <!-- Public app: no auth controls -->
+            </div>
+        </nav>
+    </header>
+    <!-- Main Container -->
+    <main class="main-container">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
+            <!-- Upload Section -->
+            <section class="glass-card p-6 mb-6 fade-in">
+                <div class="flex items-center justify-between mb-6">
+                    <h2 class="text-2xl font-bold text-gray-800">Medical Image Analysis</h2>
+                    <div class="hidden sm:block text-sm text-gray-500 bg-gray-100 px-3 py-1 rounded-full">Step 1</div>
+                </div>
+                <form id="upload-form" class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                    <!-- Model Selection -->
+                    <div>
+                        <label for="model-select" class="block text-lg font-semibold text-gray-700 mb-3">Choose Model</label>
+                        <select id="model-select" name="model" class="w-full p-3 text-lg border-2 border-gray-200 focus:ring-2 focus:ring-purple-500 focus:border-purple-500 rounded-xl transition-all">
+                            <option value="Brain Tumor">🧠 Brain Tumor</option>
+                            <option value="Kvasir">🔬 Gastrointestinal</option>
+                            <option value="Pneumonia">🫁 Pneumonia</option>
+                            <option value="Skin Cancer">🩺 Skin Cancer</option>
+                            <option value="Tuberculosis">🦠 Tuberculosis</option>
+                        </select>
+                    </div>
+                    <!-- Image Upload -->
+                    <div>
+                        <label class="block text-lg font-semibold text-gray-700 mb-3">Upload Image</label>
+                        <div id="upload-container">
+                            <!-- Image Preview -->
+                            <div id="image-preview-container" class="hidden mb-4">
+                                <div class="relative rounded-xl overflow-hidden shadow-lg">
+                                    <img id="image-preview" src="#" alt="Preview" class="w-full h-40 object-cover">
+                                    <button type="button" id="remove-image" class="absolute top-2 right-2 bg-red-500 text-white rounded-full w-8 h-8 flex items-center justify-center hover:bg-red-600 transition-colors">×</button>
+                                </div>
+                            </div>
+                            <!-- Upload Zone -->
+                            <div id="upload-zone" class="upload-zone rounded-xl p-8 text-center cursor-pointer">
+                                <svg class="mx-auto h-12 w-12 text-white/80 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path>
+                                </svg>
+                                <p class="text-lg font-medium text-white mb-2">Drop image here or click</p>
+                                <p class="text-white/70 text-sm">JPG, PNG, GIF up to 10MB</p>
+                            </div>
+                            <input id="file-upload-hidden" name="file" type="file" accept="image/*" class="hidden"/>
+                        </div>
+                    </div>
+                    <!-- Submit Button -->
+                    <div class="lg:col-span-2">
+                        <button type="submit" class="w-full btn-primary font-bold py-4 px-6 rounded-xl text-lg flex items-center justify-center">
+                            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
+                            </svg>
+                            Analyze Image
+                        </button>
+                    </div>
+                </form>
+            </section>
+            <!-- Results Section -->
+            <section id="results-section" class="hidden">
+                <div class="grid grid-cols-1 xl:grid-cols-3 gap-6">
+                    <!-- Results Panel -->
+                    <div class="xl:col-span-2 glass-card p-6 fade-in">
+                        <h2 class="text-xl font-bold text-gray-800 mb-4 flex items-center">
+                            <svg class="w-5 h-5 mr-2 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v4a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
+                            </svg>
+                            Analysis Results
+                        </h2>
+                        <div id="results-content" class="space-y-6">
+                            <div id="prediction-output"></div>
+                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                                <div>
+                                    <h3 class="font-semibold mb-3 text-gray-700 text-center">Original Image</h3>
+                                    <img id="original-image" src="" class="w-full h-auto rounded-lg shadow-md">
+                                </div>
+                                <div>
+                                    <h3 class="font-semibold mb-3 text-gray-700 text-center">AI Focus Map</h3>
+                                    <div id="gradcam-container">
+                                        <img id="gradcam-image" src="" class="w-full h-auto rounded-lg shadow-md hidden">
+                                        <div id="gradcam-placeholder" class="flex items-center justify-center h-32 bg-gray-100 rounded-lg text-gray-500">
+                                            <div class="text-center">
+                                                <svg class="w-8 h-8 mx-auto mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+                                                </svg>
+                                                <p class="text-sm">Not Available</p>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <!-- Chat Panel -->
+                    <div id="chat-card" class="glass-card opacity-50 pointer-events-none transition-all duration-300 fade-in">
+                        <div class="chat-container p-6">
+                            <div class="flex items-center justify-between mb-4">
+                                <h2 class="text-xl font-bold text-gray-800 flex items-center">
+                                    <svg class="w-5 h-5 mr-2 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
+                                    </svg>
+                                    AI Assistant
+                                </h2>
+                                <div id="chat-status" class="bg-yellow-100 text-yellow-800 px-2 py-1 rounded-full text-xs">Waiting</div>
+                            </div>
+                            <div class="chat-messages mb-4 p-3 bg-gray-50 rounded-xl border space-y-3">
+                                <div id="chat-messages">
+                                    <div class="bot-message p-3 rounded-xl max-w-[90%]">
+                                        <div class="flex items-center mb-2">
+                                            <div class="w-2 h-2 bg-yellow-400 rounded-full mr-2"></div>
+                                            <span class="text-xs text-gray-500">SYSTEM</span>
+                                        </div>
+                                        Run an analysis to activate the AI assistant.
+                                    </div>
+                                </div>
+                            </div>
+                            <div id="predefined-prompts-container" class="flex flex-wrap gap-2 mb-4 empty:hidden"></div>
+                            <form id="chat-form" class="flex bg-white rounded-xl shadow-sm overflow-hidden">
+                                <input type="text" id="chat-input" class="flex-1 p-3 focus:outline-none" placeholder="Ask about results..." disabled>
+                                <button type="submit" id="chat-submit" class="btn-primary px-4 flex items-center rounded-none" disabled>
+                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"></path>
+                                    </svg>
+                                </button>
+                            </form>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </div>
+    </main>
+    <script>
+        // Element references
+        const uploadForm = document.getElementById('upload-form');
+        const fileUploadHidden = document.getElementById('file-upload-hidden');
+        const uploadZone = document.getElementById('upload-zone');
+        const imagePreviewContainer = document.getElementById('image-preview-container');
+        const imagePreview = document.getElementById('image-preview');
+        const removeImageBtn = document.getElementById('remove-image');
+        const resultsSection = document.getElementById('results-section');
+        const predictionOutput = document.getElementById('prediction-output');
+        const originalImage = document.getElementById('original-image');
+        const gradcamImage = document.getElementById('gradcam-image');
+        const gradcamPlaceholder = document.getElementById('gradcam-placeholder');
+        const chatCard = document.getElementById('chat-card');
+        const chatStatus = document.getElementById('chat-status');
+        const chatMessages = document.getElementById('chat-messages');
+        const chatInput = document.getElementById('chat-input');
+        const chatSubmit = document.getElementById('chat-submit');
+        const chatForm = document.getElementById('chat-form');
+        const promptsContainer = document.getElementById('predefined-prompts-container');
+        let predictionContext = null;
+        let chatHistory = [];
+        // File upload handling
+        uploadZone.addEventListener('click', () => fileUploadHidden.click());
+        uploadZone.addEventListener('dragover', (e) => {
+            e.preventDefault();
+            uploadZone.classList.add('dragover');
+        });
+        uploadZone.addEventListener('dragleave', () => {
+            uploadZone.classList.remove('dragover');
+        });
+        uploadZone.addEventListener('drop', (e) => {
+            e.preventDefault();
+            uploadZone.classList.remove('dragover');
+            const files = e.dataTransfer.files;
+            if (files.length > 0) {
+                fileUploadHidden.files = files;
+                handleFileSelect(files[0]);
+            }
+        });
+        fileUploadHidden.addEventListener('change', function() {
+            if (this.files[0]) {
+                handleFileSelect(this.files[0]);
+            }
+        });
+        removeImageBtn.addEventListener('click', () => {
+            imagePreviewContainer.classList.add('hidden');
+            uploadZone.style.display = 'block';
+            fileUploadHidden.value = '';
+        });
+        function handleFileSelect(file) {
+            if (!file.type.startsWith('image/')) {
+                alert('Please select an image file.');
+                return;
+            }
+            if (file.size > 10 * 1024 * 1024) {
+                alert('File size must be less than 10MB.');
+                return;
+            }
+            const reader = new FileReader();
+            reader.onload = (e) => {
+                imagePreview.src = e.target.result;
+                imagePreviewContainer.classList.remove('hidden');
+                uploadZone.style.display = 'none';
+            };
+            reader.readAsDataURL(file);
+        }
+        uploadForm.addEventListener('submit', async (e) => {
+            e.preventDefault();
+            if (!fileUploadHidden.files[0]) {
+                alert("Please select an image file first.");
+                return;
+            }
+            const submitButton = uploadForm.querySelector('button[type="submit"]');
+            const originalText = submitButton.innerHTML;
+            submitButton.disabled = true;
+            submitButton.innerHTML = `
+                <div class="flex items-center">
+                    <div class="flex space-x-1 mr-2">
+                        <div class="typing-dot"></div>
+                        <div class="typing-dot"></div>
+                        <div class="typing-dot"></div>
+                    </div>
+                    Analyzing...
+                </div>
+            `;
+            // Reset states
+            resultsSection.classList.add('hidden');
+            chatCard.classList.add('opacity-50', 'pointer-events-none');
+            chatStatus.textContent = 'Analyzing';
+            chatStatus.className = 'bg-blue-100 text-blue-800 px-2 py-1 rounded-full text-xs';
+            chatInput.disabled = true;
+            chatSubmit.disabled = true;
+            chatMessages.innerHTML = `
+                <div class="bot-message p-3 rounded-xl max-w-[90%]">
+                    <div class="flex items-center mb-2">
+                        <div class="flex space-x-1 mr-2">
+                            <div class="typing-dot"></div>
+                            <div class="typing-dot"></div>
+                            <div class="typing-dot"></div>
+                        </div>
+                        <span class="text-xs text-gray-500">ANALYZING</span>
+                    </div>
+                    Processing your medical image...
+                </div>
+            `;
+            predictionContext = null;
+            chatHistory = [];
+            promptsContainer.innerHTML = '';
+            try {
+                const formData = new FormData(uploadForm);
+                const response = await fetch('/predict', { method: 'POST', body: formData });
+                const data = await response.json();
+                if (data.error) {
+                    alert(`Error: ${data.error}`);
+                    return;
+                }
+                predictionContext = data;
+                resultsSection.classList.remove('hidden');
+                predictionOutput.innerHTML = `
+                    <div class="bg-gradient-to-r from-indigo-50 to-purple-50 p-6 rounded-xl border border-indigo-200">
+                        <div class="flex items-center justify-between mb-4">
+                            <span class="text-sm font-semibold text-indigo-600 bg-indigo-100 px-3 py-1 rounded-full">${data.model_used}</span>
+                            <span class="text-2xl font-bold text-gray-900">${(data.confidence * 100).toFixed(1)}%</span>
+                        </div>
+                        <h3 class="text-2xl font-bold text-gray-900 mb-3">${data.prediction}</h3>
+                        <div class="bg-gray-200 rounded-full h-3 overflow-hidden">
+                            <div class="progress-bar h-3 rounded-full" style="width: ${(data.confidence * 100).toFixed(0)}%"></div>
+                        </div>
+                    </div>
+                `;
+                originalImage.src = `${data.original_image}?t=${new Date().getTime()}`;
+                if (data.gradcam_image) {
+                    gradcamImage.src = `${data.gradcam_image}?t=${new Date().getTime()}`;
+                    gradcamImage.classList.remove('hidden');
+                    gradcamPlaceholder.classList.add('hidden');
+                } else {
+                    gradcamImage.classList.add('hidden');
+                    gradcamPlaceholder.classList.remove('hidden');
+                }
+                // Activate chat
+                chatCard.classList.remove('opacity-50', 'pointer-events-none');
+                chatStatus.textContent = 'Active';
+                chatStatus.className = 'bg-green-100 text-green-800 px-2 py-1 rounded-full text-xs';
+                chatMessages.innerHTML = '';
+                addMessage("Analysis complete! Ask me anything about the results.", 'bot');
+                chatInput.disabled = false;
+                chatSubmit.disabled = false;
+                if (data.predefined_prompts) {
+                    data.predefined_prompts.forEach(prompt => {
+                        const btn = document.createElement('button');
+                        btn.textContent = prompt;
+                        btn.className = 'bg-indigo-100 text-indigo-700 text-sm px-3 py-1 rounded-full hover:bg-indigo-200 transition-all';
+                        btn.onclick = () => {
+                            chatInput.value = prompt;
+                            chatForm.requestSubmit();
+                        };
+                        promptsContainer.appendChild(btn);
+                    });
+                }
+            } catch (error) {
+                alert('An unexpected error occurred.');
+                console.error("Prediction Error:", error);
+            } finally {
+                submitButton.disabled = false;
+                submitButton.innerHTML = originalText;
+            }
+        });
+        chatForm.addEventListener('submit', async (e) => {
+            e.preventDefault();
+            const message = chatInput.value.trim();
+            if (!message || !predictionContext) return;
+            addMessage(message, 'user');
+            chatHistory.push({ role: 'user', parts: [message] });
+            chatInput.value = '';
+            promptsContainer.innerHTML = '';
+            const thinkingMsg = addMessage('', 'bot');
+            thinkingMsg.innerHTML = `
+                <div class="flex items-center">
+                    <div class="flex space-x-1 mr-2">
+                        <div class="typing-dot"></div>
+                        <div class="typing-dot"></div>
+                        <div class="typing-dot"></div>
+                    </div>
+                    <span class="text-sm text-gray-500">Thinking...</span>
+                </div>
+            `;
+            try {
+                const response = await fetch('/chat', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ message, context: predictionContext, history: chatHistory })
+                });
+                const data = await response.json();
+                thinkingMsg.remove();
+                if (data.error) {
+                    addMessage(`Error: ${data.error}`, 'bot');
+                    chatHistory.pop();
+                } else {
+                    addMessage(data.response, 'bot');
+                    chatHistory.push({ role: 'model', parts: [data.response] });
+                }
+            } catch (error) {
+                thinkingMsg.remove();
+                addMessage('Connection error. Please try again.', 'bot');
+                chatHistory.pop();
+                console.error("Chat Error:", error);
+            }
+        });
+        function addMessage(text, type) {
+            const msgDiv = document.createElement('div');
+            msgDiv.className = `p-3 rounded-xl max-w-[90%] ${type}-message mb-3`;
+            if (type === 'user') {
+                msgDiv.classList.add('ml-auto', 'text-right');
+                msgDiv.textContent = text;
+            } else {
+                msgDiv.classList.add('mr-auto');
+                if (text) {
+                    msgDiv.innerHTML = marked.parse(text);
+                }
+            }
+            chatMessages.appendChild(msgDiv);
+            chatMessages.scrollTop = chatMessages.scrollHeight;
+            return msgDiv;
+        }
+        // Smooth scrolling
+        document.documentElement.style.scrollBehavior = 'smooth';
+    </script>
+</body>
+</html>

templates/login.html ADDED Viewed

	@@ -0,0 +1,87 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Login - Medical AI</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+        body { font-family: 'Inter', sans-serif; }
+        /* Animation for the form container */
+        .form-container-enter {
+            opacity: 0;
+            transform: translateY(20px) scale(0.98);
+            transition: opacity 0.4s ease-out, transform 0.4s ease-out;
+        }
+        .form-container-enter-active {
+            opacity: 1;
+            transform: translateY(0) scale(1);
+        }
+    </style>
+</head>
+<body class="bg-gray-50 flex items-center justify-center min-h-screen">
+    <div id="form-container" class="w-full max-w-md mx-auto bg-white rounded-2xl shadow-lg p-8 form-container-enter">
+        <h2 class="text-3xl font-bold text-center text-gray-900 mb-6">Log In</h2>
+        <!-- Flash messages -->
+        {% with messages = get_flashed_messages(with_categories=true) %}
+            {% if messages %}
+                {% for category, message in messages %}
+                    <div class="p-4 mb-4 text-sm rounded-lg
+                        {% if category == 'danger' %} bg-red-100 text-red-700
+                        {% elif category == 'success' %} bg-green-100 text-green-700
+                        {% else %} bg-blue-100 text-blue-700 {% endif %}" role="alert">
+                        {{ message }}
+                    </div>
+                {% endfor %}
+            {% endif %}
+        {% endwith %}
+        <form method="POST" action="{{ url_for('login') }}" class="space-y-6">
+            <div>
+                <label for="username" class="block text-sm font-medium text-gray-700">Username</label>
+                <input id="username" name="username" type="text" required class="form-input mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500 transition-shadow duration-200">
+            </div>
+            <div>
+                <label for="password" class="block text-sm font-medium text-gray-700">Password</label>
+                <input id="password" name="password" type="password" required class="form-input mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500 transition-shadow duration-200">
+            </div>
+            <div>
+                <button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transform hover:scale-105 transition-transform duration-200">
+                    Log In
+                </button>
+            </div>
+        </form>
+        <div class="mt-6 text-center">
+            <p class="text-sm text-gray-600">
+                Need an account? <a href="{{ url_for('signup') }}" class="font-medium text-blue-600 hover:text-blue-500">Sign Up</a>
+            </p>
+        </div>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', () => {
+            const formContainer = document.getElementById('form-container');
+            const formInputs = document.querySelectorAll('.form-input');
+            // Trigger the entrance animation for the form
+            setTimeout(() => {
+                formContainer.classList.add('form-container-enter-active');
+            }, 100);
+            // Add a subtle shadow effect when a user focuses on an input field
+            formInputs.forEach(input => {
+                input.addEventListener('focus', () => {
+                    input.classList.add('shadow-lg');
+                });
+                input.addEventListener('blur', () => {
+                    input.classList.remove('shadow-lg');
+                });
+            });
+        });
+    </script>
+</body>
+</html>

templates/report_analyzer.html ADDED Viewed

	@@ -0,0 +1,165 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Medical Report Analyzer</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+        body { font-family: 'Inter', sans-serif; }
+        .fade-in { animation: fadeIn 0.5s ease-in-out; }
+        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
+        .spinner { border: 4px solid rgba(0,0,0,0.1); width: 24px; height: 24px; border-radius: 50%; border-left-color: #fff; animation: spin 1s ease infinite; }
+        @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
+        /* Styles for the rendered markdown */
+        .prose h3 { font-size: 1.25rem; font-weight: 600; margin-top: 1.5rem; margin-bottom: 0.5rem; }
+        .prose ul { list-style-type: disc; margin-left: 1.5rem; }
+        .prose li { margin-bottom: 0.5rem; }
+        .prose p { margin-bottom: 1rem; }
+        .prose strong { font-weight: 600; }
+    </style>
+</head>
+<body class="bg-gray-100 text-gray-800">
+    <!-- Header -->
+    <header class="bg-white shadow-sm">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="flex justify-between items-center py-4">
+                <h1 class="text-xl font-bold text-gray-800">Medical Report Analyzer</h1>
+                <!-- Public app: no auth controls -->
+            </div>
+        </div>
+    </header>
+    <!-- Main Content Grid -->
+    <main class="max-w-7xl mx-auto p-4 sm:p-6 lg:p-8">
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+            <!-- Input Section -->
+            <div class="bg-white rounded-2xl shadow-lg p-6 md:p-8">
+                <h2 class="text-2xl font-bold text-gray-900 mb-4">Enter Your Medical Report</h2>
+                <form id="report-form">
+                    <!-- Input Type Selector -->
+                    <div class="mb-4">
+                        <label class="block text-sm font-medium text-gray-700 mb-2">Select Input Type:</label>
+                        <div class="flex items-center space-x-4">
+                            <label class="flex items-center">
+                                <input type="radio" name="input_type" value="text" class="form-radio" checked>
+                                <span class="ml-2">Text</span>
+                            </label>
+                            <label class="flex items-center">
+                                <input type="radio" name="input_type" value="file" class="form-radio">
+                                <span class="ml-2">PDF / Image</span>
+                            </label>
+                        </div>
+                    </div>
+                    <!-- Text Input -->
+                    <div id="text-input-container">
+                        <textarea id="report-text" name="report_text" rows="18" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500" placeholder="Paste the text from your medical report here..."></textarea>
+                    </div>
+                    <!-- File Input -->
+                    <div id="file-input-container" class="hidden">
+                        <input type="file" id="report-file" name="report_file" accept=".pdf, image/png, image/jpeg" class="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:bg-gray-50 file:text-gray-700 hover:file:bg-gray-100">
+                    </div>
+                    <button type="submit" id="analyze-report-btn" class="mt-4 w-full flex items-center justify-center bg-blue-600 text-white font-bold py-3 px-8 rounded-lg hover:bg-blue-700">
+                        <span id="btn-text">Simplify Report</span>
+                        <div id="btn-spinner" class="spinner hidden ml-3"></div>
+                    </button>
+                </form>
+            </div>
+            <!-- Output Section -->
+            <div class="bg-white rounded-2xl shadow-lg p-6 md:p-8">
+                <h2 class="text-2xl font-bold text-gray-900 mb-4">Simplified Explanation</h2>
+                <div id="result-container" class="prose max-w-none bg-gray-50 p-4 rounded-lg min-h-[400px]">
+                    <p class="text-gray-500">Your easy-to-understand summary will appear here after you submit a report.</p>
+                </div>
+            </div>
+        </div>
+    </main>
+    <script>
+        const reportForm = document.getElementById('report-form');
+        const reportText = document.getElementById('report-text');
+        const reportFile = document.getElementById('report-file');
+        const resultContainer = document.getElementById('result-container');
+        const analyzeBtn = document.getElementById('analyze-report-btn');
+        const btnText = document.getElementById('btn-text');
+        const btnSpinner = document.getElementById('btn-spinner');
+        const textInputContainer = document.getElementById('text-input-container');
+        const fileInputContainer = document.getElementById('file-input-container');
+        const inputTypeRadios = document.querySelectorAll('input[name="input_type"]');
+        // Event listener for radio buttons
+        inputTypeRadios.forEach(radio => {
+            radio.addEventListener('change', (event) => {
+                if (event.target.value === 'text') {
+                    textInputContainer.classList.remove('hidden');
+                    fileInputContainer.classList.add('hidden');
+                } else {
+                    textInputContainer.classList.add('hidden');
+                    fileInputContainer.classList.remove('hidden');
+                }
+            });
+        });
+        reportForm.addEventListener('submit', async (event) => {
+            event.preventDefault();
+            const selectedType = document.querySelector('input[name="input_type"]:checked').value;
+            let endpoint = '';
+            let body = null;
+            let headers = {};
+            if (selectedType === 'text') {
+                const text = reportText.value.trim();
+                if (!text) {
+                    resultContainer.innerHTML = `<p class="text-red-600">Please enter some text from your report.</p>`;
+                    return;
+                }
+                endpoint = '/analyze_report_text';
+                headers = { 'Content-Type': 'application/json' };
+                body = JSON.stringify({ report_text: text });
+            } else { // File upload
+                if (reportFile.files.length === 0) {
+                    resultContainer.innerHTML = `<p class="text-red-600">Please select a PDF or image file.</p>`;
+                    return;
+                }
+                endpoint = '/analyze_report_file';
+                const formData = new FormData();
+                formData.append('report_file', reportFile.files[0]);
+                body = formData;
+                // Note: For FormData, the browser sets the Content-Type header automatically.
+            }
+            // Show loading state
+            btnText.textContent = 'Analyzing...';
+            btnSpinner.classList.remove('hidden');
+            analyzeBtn.disabled = true;
+            resultContainer.innerHTML = `<p class="text-gray-500">Generating your simplified summary. This may take a moment...</p>`;
+            try {
+                const response = await fetch(endpoint, { method: 'POST', headers: headers, body: body });
+                const data = await response.json();
+                if (!response.ok) {
+                    throw new Error(data.error || 'An unknown error occurred.');
+                }
+                resultContainer.innerHTML = data.simplified_report;
+            } catch (error) {
+                console.error("Analysis Error:", error);
+                resultContainer.innerHTML = `<p class="text-red-600"><strong>Error:</strong> ${error.message}</p>`;
+            } finally {
+                // Restore button state
+                btnText.textContent = 'Simplify Report';
+                btnSpinner.classList.add('hidden');
+                analyzeBtn.disabled = false;
+            }
+        });
+    </script>
+</body>
+</html>

templates/signup.html ADDED Viewed

	@@ -0,0 +1,52 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Sign Up - Medical AI</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+        body { font-family: 'Inter', sans-serif; }
+    </style>
+</head>
+<body class="bg-gray-50 flex items-center justify-center min-h-screen">
+    <div class="w-full max-w-md mx-auto bg-white rounded-2xl shadow-lg p-8">
+        <h2 class="text-3xl font-bold text-center text-gray-900 mb-6">Create an Account</h2>
+        <!-- Flash messages -->
+        {% with messages = get_flashed_messages(with_categories=true) %}
+            {% if messages %}
+                {% for category, message in messages %}
+                    <div class="p-4 mb-4 text-sm rounded-lg
+                        {% if category == 'danger' %} bg-red-100 text-red-700
+                        {% else %} bg-blue-100 text-blue-700 {% endif %}" role="alert">
+                        {{ message }}
+                    </div>
+                {% endfor %}
+            {% endif %}
+        {% endwith %}
+        <form method="POST" action="{{ url_for('signup') }}" class="space-y-6">
+            <div>
+                <label for="username" class="block text-sm font-medium text-gray-700">Username</label>
+                <input id="username" name="username" type="text" required class="mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
+            </div>
+            <div>
+                <label for="password" class="block text-sm font-medium text-gray-700">Password</label>
+                <input id="password" name="password" type="password" required class="mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
+            </div>
+            <div>
+                <button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
+                    Sign Up
+                </button>
+            </div>
+        </form>
+        <div class="mt-6 text-center">
+            <p class="text-sm text-gray-600">
+                Already have an account? <a href="{{ url_for('login') }}" class="font-medium text-blue-600 hover:text-blue-500">Log In</a>
+            </p>
+        </div>
+    </div>
+</body>
+</html>

utils/predict.py ADDED Viewed

	@@ -0,0 +1,93 @@

+import os
+import numpy as np
+import tensorflow as tf
+from PIL import Image
+# 1. Define the class labels for each model.
+CLASS_LABELS = {
+    "Pneumonia": ["Normal", "Pneumonia"],
+    "Tuberculosis": ["Normal", "Tuberculosis"],
+    "Brain Tumor": ["glioma", "meningioma", "notumor", "pituitary"],
+    "Skin Cancer": [
+        "Actinic keratoses", "Basal cell carcinoma",
+        "Benign keratosis-like lesions", "Dermatofibroma",
+        "Melanoma", "Melanocytic nevi", "Vascular lesions"
+    ],
+    "Kvasir": [
+        "dyed-lifted-polyps", "dyed-resection-margins", "esophagitis",
+        "normal-cecum", "normal-pylorus", "normal-z-line", "polyps",
+        "ulcerative-colitis"
+    ]
+}
+# 2. Map the analysis keys from the UI to our internal model names.
+ANALYSIS_MAP = {
+    "Brain Tumor": "Brain Tumor",
+    "Endoscopic Ulcer (Kvasir)": "Kvasir",
+    "Pneumonia": "Pneumonia",
+    "Skin Cancer": "Skin Cancer",
+    "Tuberculosis": "Tuberculosis"
+}
+# --- MODIFIED SECTION ---
+# 3. Map model names to their .h5 file paths inside the 'model' directory.
+MODEL_PATHS = {
+    "Brain Tumor": "model/best_braintumor_model.h5",
+    "Kvasir": "model/best_kvasir_model.h5",
+    "Pneumonia": "model/best_pneumonia_model.h5",
+    "Skin Cancer": "model/best_skincancer_model.h5",
+    "Tuberculosis": "model/best_tuberculosis_model.h5"
+}
+# 4. Image preprocessing function
+def preprocess_image(image_file, target_size=(224, 224)):
+    """Preprocesses the uploaded image for model prediction."""
+    img = Image.open(image_file).convert('RGB')
+    img = img.resize(target_size)
+    img_array = tf.keras.preprocessing.image.img_to_array(img)
+    img_array = np.expand_dims(img_array, axis=0) / 255.0
+    return img_array
+# 5. Prediction function
+def predict(image_file, target_disease):
+    """Loads the appropriate model and returns a prediction."""
+    try:
+        model_path = MODEL_PATHS.get(target_disease)
+        if not model_path or not os.path.exists(model_path):
+            return "Error", f"Model file not found at {model_path}. Make sure it's in the 'model' directory."
+        model = tf.keras.models.load_model(model_path, compile=False)
+        processed_image = preprocess_image(image_file)
+        prediction = model.predict(processed_image)
+        class_labels = CLASS_LABELS[target_disease]
+        if len(class_labels) == 2: # Binary classification
+            score = prediction[0][0]
+            confidence = score * 100 if score > 0.5 else (1 - score) * 100
+            label = class_labels[1] if score > 0.5 else class_labels[0]
+        else: # Multi-class classification
+            score = np.max(prediction)
+            confidence = score * 100
+            label_index = np.argmax(prediction)
+            label = class_labels[label_index]
+        return label, confidence
+    except Exception as e:
+        return "Error", f"An error occurred: {str(e)}"
+# 6. Explanation generation function (placeholder)
+def generate_explanation(label, confidence):
+    """Generates a simple explanation for the prediction."""
+    explanations = {
+        "Pneumonia": "The model detected patterns consistent with pneumonia, an infection that inflames the air sacs in one or both lungs.",
+        "Tuberculosis": "The model identified signs often associated with tuberculosis, a serious infectious disease that mainly affects the lungs.",
+        "Melanoma": "This finding is consistent with melanoma, the most serious type of skin cancer. Key indicators can include asymmetry, irregular borders, and varied color.",
+        "glioma": "The prediction points towards a glioma, a type of tumor that occurs in the brain and spinal cord, starting in the glial cells.",
+        "ulcerative-colitis": "The model detected inflammation and ulcers in the colon's lining, which are characteristic of ulcerative colitis."
+    }
+    base_explanation = explanations.get(label, f"The model identified features consistent with {label}.")
+    return f"{base_explanation} The model's confidence in this finding is {confidence:.2f}%."

utils/together.py ADDED Viewed

	@@ -0,0 +1,29 @@

+import openai
+# Use Together AI endpoint and your API key
+client = openai.OpenAI(
+    api_key="52aa1e19fe8427296ae1347416cb22784a0cfe5c9d4324b779f638031a567a30",
+    base_url="https://api.together.xyz/v1"
+)
+def generate_explanation(label, confidence):
+    prompt = f"""
+    The X-ray result indicates: {label} with {confidence}% confidence.
+    Please explain:
+    - What is {label}?
+    - What are its common symptoms?
+    - 2-3 useful precautions
+    - Whether the patient should consult a doctor
+    """
+    try:
+        response = client.chat.completions.create(
+            model="mistralai/Mistral-7B-Instruct-v0.1",
+            messages=[{"role": "user", "content": prompt}],
+            max_tokens=500,
+            temperature=0.7,
+        )
+        return response.choices[0].message.content
+    except Exception as e:
+        return f"❌ Failed to generate explanation: {e}"