src/templates/upload.html

{% extends "base.html" %}

{% block title %}ResearchMate - Upload PDF{% endblock %}

{% block content %}
<div class="row">
    <div class="col-12">
        <!-- Upload Header -->
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h1 class="h2 text-primary-custom">
                <i class="fas fa-upload me-2 text-primary"></i>Upload & Analyze PDF
            </h1>
            <div class="badge bg-gradient" style="background: linear-gradient(135deg, var(--accent-color), #c0392b);">
                <i class="fas fa-file-pdf me-1"></i>PDF Analysis
            </div>
        </div>

        <!-- Upload Form -->
        <div class="card mb-4 shadow-sm">
            <div class="card-header">
                <h5 class="mb-0">
                    <i class="fas fa-file-upload me-2"></i>Upload Research Paper
                </h5>
            </div>
            <div class="card-body">
                <div class="upload-area mb-3" id="upload-area">
                    <i class="fas fa-cloud-upload-alt"></i>
                    <h5 class="mt-2">Drag & Drop PDF Here</h5>
                    <p class="text-muted">or click to browse files</p>
                    <input type="file" class="d-none" id="pdf-file" name="file" accept=".pdf" required>
                </div>
                
                <form id="upload-form" enctype="multipart/form-data">
                    <div class="form-text mb-3">
                        <i class="fas fa-info-circle me-1 text-info"></i>
                        Upload a research paper in PDF format. The AI will analyze the content and provide insights.
                    </div>
                    
                    <div class="d-flex justify-content-between align-items-center">
                        <button type="submit" class="btn btn-primary shadow-sm" disabled id="upload-btn">
                            <i class="fas fa-upload me-2"></i>Upload & Analyze
                        </button>
                        <div class="text-muted">
                            <small>
                                <i class="fas fa-brain me-1"></i>
                                AI-powered analysis using Groq Llama 3.3 70B
                            </small>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <!-- Upload Progress -->
        <div id="upload-progress" class="card mb-4 shadow-sm" style="display: none;">
            <div class="card-body">
                <div class="d-flex align-items-center mb-2">
                    <div class="spinner-border spinner-border-sm me-2" role="status">
                        <span class="visually-hidden">Processing...</span>
                    </div>
                    <span id="progress-text">Uploading file...</span>
                </div>
                <div class="progress">
                    <div id="progress-bar" class="progress-bar" role="progressbar" 
                         style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
                </div>
            </div>
        </div>

        <!-- Results Container -->
        <div id="results-container"></div>

        <!-- Sample Papers Section -->
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">
                    <i class="fas fa-lightbulb me-2"></i>What You Can Upload
                </h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-4">
                        <div class="text-center mb-3">
                            <i class="fas fa-file-pdf fa-3x text-danger mb-2"></i>
                            <h6>Research Papers</h6>
                            <p class="small text-muted">Upload academic papers from conferences, journals, or preprint servers</p>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="text-center mb-3">
                            <i class="fas fa-search fa-3x text-primary mb-2"></i>
                            <h6>Get Insights</h6>
                            <p class="small text-muted">Extract key contributions, methodology, findings, and limitations</p>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="text-center mb-3">
                            <i class="fas fa-database fa-3x text-success mb-2"></i>
                            <h6>Add to Knowledge Base</h6>
                            <p class="small text-muted">Analyzed papers are added to your searchable knowledge base</p>
                        </div>
                    </div>
                </div>
                
                <hr>
                
                <div class="row">
                    <div class="col-md-6">
                        <h6>✅ Supported Features:</h6>
                        <ul class="list-unstyled small">
                            <li><i class="fas fa-check text-success me-1"></i> Text extraction from PDF</li>
                            <li><i class="fas fa-check text-success me-1"></i> Title and abstract identification</li>
                            <li><i class="fas fa-check text-success me-1"></i> AI-powered summary generation</li>
                            <li><i class="fas fa-check text-success me-1"></i> Key contributions analysis</li>
                            <li><i class="fas fa-check text-success me-1"></i> Methodology extraction</li>
                            <li><i class="fas fa-check text-success me-1"></i> Limitations identification</li>
                        </ul>
                    </div>
                    <div class="col-md-6">
                        <h6>🎯 Best Results With:</h6>
                        <ul class="list-unstyled small">
                            <li><i class="fas fa-star text-warning me-1"></i> Well-structured academic papers</li>
                            <li><i class="fas fa-star text-warning me-1"></i> Clear abstracts and conclusions</li>
                            <li><i class="fas fa-star text-warning me-1"></i> Standard academic formatting</li>
                            <li><i class="fas fa-star text-warning me-1"></i> English language papers</li>
                            <li><i class="fas fa-star text-warning me-1"></i> Computer science and AI papers</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const uploadForm = document.getElementById('upload-form');
    const fileInput = document.getElementById('pdf-file');
    const progressDiv = document.getElementById('upload-progress');
    const progressBar = document.getElementById('progress-bar');
    const progressText = document.getElementById('progress-text');
    const resultsContainer = document.getElementById('results-container');

    // Restore previous upload results if they exist
    document.addEventListener('DOMContentLoaded', function() {
        if (window.ResearchMate && window.ResearchMate.restoreUploadResults) {
            window.ResearchMate.restoreUploadResults();
        }
    });

    // Upload form handler
    uploadForm.addEventListener('submit', function(e) {
        e.preventDefault();
        
        const file = fileInput.files[0];
        if (!file) {
            showAlert('warning', 'Please select a PDF file to upload.');
            return;
        }

        if (file.type !== 'application/pdf') {
            showAlert('danger', 'Please select a valid PDF file.');
            return;
        }

        if (file.size > 10 * 1024 * 1024) { // 10MB limit
            showAlert('danger', 'File size too large. Please select a file smaller than 10MB.');
            return;
        }

        uploadPDF(file);
    });

    function uploadPDF(file) {
        const formData = new FormData();
        formData.append('file', file);

        // Show progress
        progressDiv.style.display = 'block';
        resultsContainer.innerHTML = '';
        
        // Update progress text
        progressText.textContent = 'Uploading file...';
        updateProgress(25);

        const token = localStorage.getItem('authToken');
        const headers = token ? { 'Authorization': `Bearer ${token}` } : {};

        fetch('/api/upload', {
            method: 'POST',
            headers: headers,
            body: formData
        })
        .then(response => {
            progressText.textContent = 'Processing PDF...';
            updateProgress(50);
            return response.json();
        })
        .then(data => {
            progressText.textContent = 'Analyzing content...';
            updateProgress(75);
            
            console.log('Upload response:', data); // Debug log
            
            setTimeout(() => {
                progressText.textContent = 'Generating insights...';
                updateProgress(100);
                
                setTimeout(() => {
                    progressDiv.style.display = 'none';
                    
                    if (data.success) {
                        displayResults(data);
                        // Save results to localStorage for persistence
                        if (window.ResearchMate && window.ResearchMate.saveUploadResults) {
                            window.ResearchMate.saveUploadResults(data);
                        }
                        showAlert('success', 'PDF analyzed successfully!');
                    } else {
                        displayError(data.error || 'PDF analysis failed');
                    }
                }, 1000);
            }, 500);
        })
        .catch(error => {
            progressDiv.style.display = 'none';
            displayError('Network error: ' + error.message);
        });
    }

    function updateProgress(value) {
        progressBar.style.width = value + '%';
        progressBar.setAttribute('aria-valuenow', value);
    }

    // Utility: Render markdown using a JS markdown parser (marked.js)
    function renderMarkdown(text) {
        if (typeof marked !== 'undefined') {
            return marked.parseInline(text || '');
        }
        return text || '';
    }

    function displayResults(data) {
        const summary = data.summary || {};
        
        const html = `
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">
                        <i class="fas fa-file-pdf me-2"></i>PDF Analysis Results
                    </h5>
                    <button class="btn btn-sm btn-outline-secondary" onclick="clearUploadResults()" title="Clear results">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                <div class="card-body">
                    <!-- Paper Info -->
                    <div class="row mb-4">
                        <div class="col-md-8">
                            <h6 class="text-primary">📄 Paper Information</h6>
                            <h5 class="mb-2">${renderMarkdown(data.title || 'Unknown Title')}</h5>
                            <p class="text-muted small mb-2">
                                <i class="fas fa-clock me-1"></i>
                                Processed: ${data.processed_at ? new Date(data.processed_at).toLocaleString() : 'N/A'}
                            </p>
                            <p class="text-muted small">
                                <i class="fas fa-file-alt me-1"></i>
                                Text Length: ${data.text_length ? data.text_length.toLocaleString() : 'N/A'} characters
                            </p>
                        </div>
                        <div class="col-md-4 text-end">
                            <div class="badge bg-success p-2">
                                <i class="fas fa-check-circle me-1"></i>
                                Analysis Complete
                            </div>
                        </div>
                    </div>

                    <!-- Abstract -->
                    <div class="mb-4">
                        <h6 class="text-info">📝 Abstract</h6>
                        <div class="border-start border-info ps-3">
                            <div class="mb-0">${renderMarkdown(data.abstract || 'Abstract not found')}</div>
                        </div>
                    </div>

                    <!-- AI Analysis -->
                    <div class="row">
                        <!-- Main Summary -->
                        <div class="col-md-6 mb-4">
                            <div class="card h-100 border-primary">
                                <div class="card-header bg-primary text-white">
                                    <h6 class="mb-0">
                                        <i class="fas fa-brain me-2"></i>Main Summary
                                    </h6>
                                </div>
                                <div class="card-body">
                                    <div class="mb-0">${renderMarkdown(summary.summary || 'Summary not available')}</div>
                                </div>
                            </div>
                        </div>

                        <!-- Key Contributions -->
                        <div class="col-md-6 mb-4">
                            <div class="card h-100 border-success">
                                <div class="card-header bg-success text-white">
                                    <h6 class="mb-0">
                                        <i class="fas fa-star me-2"></i>Key Contributions
                                    </h6>
                                </div>
                                <div class="card-body">
                                    <div class="contributions-text">
                                        ${summary.contributions ? summary.contributions.split('\n').map(line => line.trim()).filter(line => line).map(line => `<div class="mb-1">${renderMarkdown(line)}</div>`).join('') : 'Contributions not available'}
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Methodology -->
                        <div class="col-md-6 mb-4">
                            <div class="card h-100 border-info">
                                <div class="card-header bg-info text-white">
                                    <h6 class="mb-0">
                                        <i class="fas fa-cogs me-2"></i>Methodology
                                    </h6>
                                </div>
                                <div class="card-body">
                                    <div class="mb-0">${renderMarkdown(summary.methodology || 'Methodology not available')}</div>
                                </div>
                            </div>
                        </div>

                        <!-- Key Findings -->
                        <div class="col-md-6 mb-4">
                            <div class="card h-100 border-warning">
                                <div class="card-header bg-warning text-dark">
                                    <h6 class="mb-0">
                                        <i class="fas fa-lightbulb me-2"></i>Key Findings
                                    </h6>
                                </div>
                                <div class="card-body">
                                    <div class="findings-text">
                                        ${summary.findings ? summary.findings.split('\n').map(line => line.trim()).filter(line => line).map(line => `<div class="mb-1">${renderMarkdown(line)}</div>`).join('') : 'Findings not available'}
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Limitations -->
                        <div class="col-12 mb-4">
                            <div class="card border-danger">
                                <div class="card-header bg-danger text-white">
                                    <h6 class="mb-0">
                                        <i class="fas fa-exclamation-triangle me-2"></i>Limitations
                                    </h6>
                                </div>
                                <div class="card-body">
                                    <div class="mb-0">${renderMarkdown(summary.limitations || 'Limitations not identified')}</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Actions -->
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <button class="btn btn-success me-2" onclick="addToKnowledgeBase()">
                                <i class="fas fa-database me-1"></i>Add to Knowledge Base
                            </button>
                            <button class="btn btn-info" onclick="askAboutPaper()">
                                <i class="fas fa-question-circle me-1"></i>Ask Questions
                            </button>
                        </div>
                        <div class="text-muted">
                            <small>
                                <i class="fas fa-check me-1"></i>
                                Paper analyzed and ready for questions
                            </small>
                        </div>
                    </div>
                </div>
            </div>
        `;
        
        resultsContainer.innerHTML = html;
    }

    function displayError(message) {
        const html = `
            <div class="alert alert-danger" role="alert">
                <i class="fas fa-exclamation-triangle me-2"></i>
                <strong>Error:</strong> ${message}
            </div>
        `;
        
        resultsContainer.innerHTML = html;
    }

    function showAlert(type, message, options = {}) {
        const alert = document.createElement('div');
        alert.className = `alert alert-${type} alert-dismissible fade show`;
        alert.innerHTML = `
            <i class="fas fa-${type === 'success' ? 'check' : type === 'warning' ? 'exclamation-triangle' : 'exclamation-triangle'} me-2"></i>
            ${message}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        `;
        
        // Determine where to insert the alert
        let container;
        if (options.container) {
            container = options.container;
        } else {
            container = document.querySelector('.container');
        }
        
        // Insert at the beginning of the container
        container.insertBefore(alert, container.firstChild);
        
        // Add some visual emphasis for important alerts
        if (type === 'success') {
            alert.style.border = '2px solid #198754';
            alert.style.boxShadow = '0 4px 12px rgba(25, 135, 84, 0.2)';
        }
        
        // Auto-dismiss after specified time or default 5 seconds
        const dismissTime = options.dismissTime || 5000;
        setTimeout(() => {
            if (alert.parentNode) {
                alert.remove();
            }
        }, dismissTime);
    }

    // Global functions for actions
    window.addToKnowledgeBase = function() {
        // Show immediate visual feedback on the button
        const button = event.target;
        const originalText = button.innerHTML;
        
        // Change button appearance to show loading
        button.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>Adding to Knowledge Base...';
        button.disabled = true;
        button.classList.remove('btn-success');
        button.classList.add('btn-warning');
        
        // Simulate processing time
        setTimeout(() => {
            // Update button to show success
            button.innerHTML = '<i class="fas fa-check me-1"></i>Added to Knowledge Base!';
            button.classList.remove('btn-warning');
            button.classList.add('btn-success');
            
            // Show alert and scroll to top so user can see it
            showAlert('success', 'Paper has been added to your knowledge base and is now searchable!');
            
            // Smooth scroll to top to show the alert
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
            
            // Reset button after a delay
            setTimeout(() => {
                button.innerHTML = originalText;
                button.disabled = false;
            }, 3000);
            
        }, 1500); // Simulate 1.5 second processing time
    };

    window.askAboutPaper = function() {
        // Show immediate visual feedback on the button
        const button = event.target;
        const originalText = button.innerHTML;
        
        // Change button appearance to show action in progress
        button.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>Preparing...';
        button.disabled = true;
        button.classList.remove('btn-info');
        button.classList.add('btn-warning');
        
        // Show alert and then redirect
        showAlert('info', 'Redirecting to search page where you can ask questions about this paper!');
        
        // Smooth scroll to top to show the alert
        window.scrollTo({
            top: 0,
            behavior: 'smooth'
        });
        
        // Redirect to search page after showing the alert and scrolling
        setTimeout(() => {
            window.location.href = '/search';
        }, 2000);
    };

    window.clearUploadResults = function() {
        if (window.ResearchMate && window.ResearchMate.clearUploadResults) {
            window.ResearchMate.clearUploadResults();
            showAlert('info', 'Upload results cleared. You can upload a new PDF.');
        }
    };
});
</script>
{% endblock %}