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 %}