templates/question_answering.html

{% extends "base.html" %}

{% block title %}Question Answering - NLP Ultimate Tutorial{% endblock %}

{% block content %}
<div class="container">
    <!-- Header Section -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h1 class="mb-0">
                        <i class="fas fa-question-circle"></i>
                        Question Answering System
                    </h1>
                </div>
                <div class="card-body">
                    <p class="lead">Ask questions about any text context and get intelligent answers with confidence scores.</p>
                    
                    <div class="alert alert-info">
                        <i class="fas fa-info-circle"></i>
                        <strong>About:</strong> Question Answering (QA) systems extract or generate answers to questions based on a given context or knowledge base.
                    </div>
                </div>
            </div>
        </div>
    </div>

    {% include "_analysis_nav.html" %}

    <!-- Input Section -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="mb-0">
                        <i class="fas fa-keyboard"></i>
                        Enter Context and Question:
                    </h3>
                </div>
                <div class="card-body">
                    <div class="row mb-3">
                        <div class="col-md-8">
                            <label for="contextInput" class="form-label">Context Text:</label>
                            <textarea id="contextInput" class="form-control" rows="8" placeholder="Enter the text context here...">The Amazon rainforest is a moist broadleaf tropical rainforest in the Amazon biome that covers most of the Amazon basin of South America. This basin encompasses 7,000,000 km2, of which 5,500,000 km2 are covered by the rainforest. The majority of the forest is contained within Brazil, with 60% of the rainforest, followed by Peru with 13%, Colombia with 10%, and with minor amounts in Bolivia, Ecuador, French Guiana, Guyana, Suriname, and Venezuela.</textarea>
                        </div>
                        <div class="col-md-4">
                            <label for="sampleSelect" class="form-label">Or choose a sample:</label>
                            <select id="sampleSelect" class="form-select">
                                <option value="Custom">Custom</option>
                                <option value="News Article">News Article</option>
                                <option value="Product Review">Product Review</option>
                                <option value="Scientific Text">Scientific Text</option>
                                <option value="Literary Text">Literary Text</option>
                            </select>
                        </div>
                    </div>
                    
                    <div class="row mb-3">
                        <div class="col-md-8">
                            <label for="questionInput" class="form-label">Your Question:</label>
                            <input type="text" id="questionInput" class="form-control" placeholder="What would you like to know about the context?" value="What percentage of the Amazon rainforest is in Brazil?">
                        </div>
                        <div class="col-md-4">
                            <label for="confidenceThreshold" class="form-label">Confidence Threshold:</label>
                            <input type="range" class="form-range" id="confidenceThreshold" min="0.0" max="1.0" value="0.5" step="0.1">
                            <div class="d-flex justify-content-between">
                                <small>0.0</small>
                                <small id="confidenceValue">0.5</small>
                                <small>1.0</small>
                            </div>
                        </div>
                    </div>
                    
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <button id="processBtn" class="btn btn-primary btn-lg">
                                <i class="fas fa-question-circle"></i>
                                Get Answer
                            </button>
                        </div>
                        <div>
                            <button id="clearBtn" class="btn btn-outline-secondary">
                                <i class="fas fa-trash"></i>
                                Clear
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Tips and Features Section -->
    <div class="row mb-4">
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h3 class="mb-0">
                        <i class="fas fa-lightbulb"></i>
                        Tips for Better Results
                    </h3>
                </div>
                <div class="card-body">
                    <ul class="list-unstyled">
                        <li><i class="fas fa-check text-success"></i> <strong>Context:</strong> Provide relevant text containing the answer</li>
                        <li><i class="fas fa-check text-success"></i> <strong>Question:</strong> Be specific and clear</li>
                        <li><i class="fas fa-check text-success"></i> <strong>Extractive:</strong> Finds exact spans from the text</li>
                        <li><i class="fas fa-check text-success"></i> <strong>Confidence:</strong> Higher threshold = more selective answers</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h3 class="mb-0">
                        <i class="fas fa-chart-line"></i>
                        System Features
                    </h3>
                </div>
                <div class="card-body">
                    <ul class="list-unstyled">
                        <li><i class="fas fa-brain text-primary"></i> <strong>Transformer QA:</strong> RoBERTa-SQuAD2 model</li>
                        <li><i class="fas fa-calculator text-info"></i> <strong>TF-IDF Matching:</strong> Similarity-based answer finding</li>
                        <li><i class="fas fa-chart-bar text-success"></i> <strong>Confidence Scoring:</strong> Reliability assessment</li>
                        <li><i class="fas fa-highlighter text-warning"></i> <strong>Context Highlighting:</strong> Visual answer location</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <!-- Example Questions Section -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="mb-0">
                        <i class="fas fa-list"></i>
                        Example Questions
                    </h3>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-4">
                            <button class="btn btn-outline-primary w-100 mb-2" onclick="setExample('What percentage of the Amazon rainforest is in Brazil?')">
                                What percentage of the Amazon rainforest is in Brazil?
                            </button>
                        </div>
                        <div class="col-md-4">
                            <button class="btn btn-outline-primary w-100 mb-2" onclick="setExample('Which countries contain parts of the Amazon rainforest?')">
                                Which countries contain parts of the Amazon rainforest?
                            </button>
                        </div>
                        <div class="col-md-4">
                            <button class="btn btn-outline-primary w-100 mb-2" onclick="setExample('How large is the Amazon basin?')">
                                How large is the Amazon basin?
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Results Section -->
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="mb-0">
                        <i class="fas fa-chart-bar"></i>
                        Question Answering Results
                    </h3>
                </div>
                <div class="card-body">
                    <div id="resultsContainer">
                        <div class="text-center text-muted py-5">
                            <i class="fas fa-arrow-up fa-2x mb-3"></i>
                            <p>Click "Get Answer" to see question answering results</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_scripts %}
<script>
// Initialize page
document.addEventListener('DOMContentLoaded', function() {
    // Prefill only when explicitly navigating via quick-nav or same-route refresh
    const shouldCarry = sessionStorage.getItem('carryTextOnNextPage') === '1';
    if (shouldCarry) {
        const storedText = sessionStorage.getItem('analysisText');
        const storedQuestion = sessionStorage.getItem('qaQuestion');
        if (storedText) document.getElementById('contextInput').value = storedText;
        if (storedQuestion) document.getElementById('questionInput').value = storedQuestion;
        // Reset flag so normal navigation doesn't keep stale inputs
        sessionStorage.removeItem('carryTextOnNextPage');
    } else {
        // Fresh route load: clear inputs
        document.getElementById('contextInput').value = document.getElementById('contextInput').defaultValue || '';
        document.getElementById('questionInput').value = '';
        sessionStorage.removeItem('qaQuestion');
    }
    
    // Update confidence threshold value
    document.getElementById('confidenceThreshold').addEventListener('input', function() {
        document.getElementById('confidenceValue').textContent = this.value;
    });
    
    // Sample text dropdown handler: keep context/question in sync and restore Custom
    document.getElementById('sampleSelect').addEventListener('change', function() {
        const sampleType = this.value;
        const contextInput = document.getElementById('contextInput');
        const questionInput = document.getElementById('questionInput');
        const routeKey = 'customTextBackup:' + (window.location.pathname || '/question-answering');
        
        const SAMPLE_QUESTIONS = {
            'News Article': 'What action did the commission take?',
            'Product Review': 'What is the reviewer\'s overall opinion?',
            'Scientific Text': 'What is the primary cause of current climate change?',
            'Literary Text': 'Who is the main character?'
        };
        
        if (sampleType === 'Custom') {
            // Restore previously typed Custom text
            const backup = sessionStorage.getItem(routeKey);
            if (backup !== null) contextInput.value = backup;
            // Clear question to avoid mismatch
            questionInput.value = '';
            sessionStorage.setItem('qaQuestion', '');
            return;
        }
        
        // Save current custom text before switching away
        sessionStorage.setItem(routeKey, contextInput.value);
        
        fetch('/api/sample-text', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({ sample_type: sampleType })
        })
        .then(response => response.json())
        .then(data => {
            contextInput.value = data.text || '';
            // Update question to match selected sample for consistency
            questionInput.value = SAMPLE_QUESTIONS[sampleType] || '';
            // Persist to session storage
            sessionStorage.setItem('analysisText', contextInput.value);
            sessionStorage.setItem('qaQuestion', questionInput.value);
        });
    });
    
    // Persist inputs while typing
    document.getElementById('contextInput').addEventListener('input', function() {
        sessionStorage.setItem('analysisText', this.value);
        sessionStorage.setItem('customTextBackup:' + (window.location.pathname || '/question-answering'), this.value);
        // If user starts editing context while a sample-default question is set, clear it to avoid mismatch
        const questionInput = document.getElementById('questionInput');
        const SAMPLE_DEFAULTS = new Set([
            'What action did the commission\'s take?',
            'What action did the commission take?',
            'What is the reviewer\'s overall opinion?',
            'What is the reviewer\'s overall opinion?',
            'What is the primary cause of current climate change?',
            'Who is the main character?'
        ]);
        if (SAMPLE_DEFAULTS.has(questionInput.value)) {
            questionInput.value = '';
            sessionStorage.setItem('qaQuestion', '');
        }
    });
    document.getElementById('questionInput').addEventListener('input', function() {
        sessionStorage.setItem('qaQuestion', this.value);
    });

    // Process button handler
    document.getElementById('processBtn').addEventListener('click', function() {
        const context = document.getElementById('contextInput').value.trim();
        const question = document.getElementById('questionInput').value.trim();
        
        if (!context) {
            alert('Please provide context text.');
            return;
        }
        
        if (!question) {
            alert('Please enter a question.');
            return;
        }
        
        // Show loading state
        this.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Processing...';
        this.disabled = true;
        
        // Persist before processing
        sessionStorage.setItem('analysisText', context);
        sessionStorage.setItem('qaQuestion', question);

        // Process question
        processQuestionAnswering();
        
        // Reset button after a delay
        setTimeout(() => {
            this.innerHTML = '<i class="fas fa-question-circle"></i> Get Answer';
            this.disabled = false;
        }, 2000);
    });
    
    // Clear button handler
    document.getElementById('clearBtn').addEventListener('click', function() {
        document.getElementById('contextInput').value = '';
        document.getElementById('questionInput').value = '';
        document.getElementById('resultsContainer').innerHTML = `
            <div class="text-center text-muted py-5">
                <i class="fas fa-arrow-up fa-2x mb-3"></i>
                <p>Click "Get Answer" to see question answering results</p>
            </div>
        `;
    });
    
    // Keyboard shortcuts
    document.addEventListener('keydown', function(e) {
        // Ctrl+Enter to process
        if (e.ctrlKey && e.key === 'Enter') {
            document.getElementById('processBtn').click();
        }
        
        // Ctrl+L to clear
        if (e.ctrlKey && e.key === 'l') {
            e.preventDefault();
            document.getElementById('clearBtn').click();
        }
    });
});

// Set example question
function setExample(question) {
    document.getElementById('questionInput').value = question;
}

// Process question answering
function processQuestionAnswering() {
    const context = document.getElementById('contextInput').value.trim();
    const question = document.getElementById('questionInput').value.trim();
    const confidenceThreshold = parseFloat(document.getElementById('confidenceThreshold').value);
    
    if (!context) {
        alert('Please provide context text.');
        return;
    }
    
    if (!question) {
        alert('Please enter a question.');
        return;
    }
    
    showLoading('resultsContainer');
    
    fetch('/api/question-answering', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
            context: context,
            question: question,
            confidence_threshold: confidenceThreshold
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            displayResults(data.result);
        } else {
            showError(data.error || 'An error occurred while processing the question');
        }
    })
    .catch(error => {
        showError('Failed to process question: ' + error.message);
    })
    .finally(() => {
        hideLoading('resultsContainer');
    });
}

// Show loading state
function showLoading(elementId) {
    const element = document.getElementById(elementId);
    if (element) {
        element.innerHTML = `
            <div class="text-center py-4">
                <div class="spinner-border text-primary" role="status">
                    <span class="visually-hidden">Loading...</span>
                </div>
                <p class="mt-2">Processing your question...</p>
            </div>
        `;
    }
}

// Hide loading state
function hideLoading(elementId) {
    const element = document.getElementById(elementId);
    if (element && element.innerHTML.includes('spinner-border')) {
        element.innerHTML = '';
    }
}

// Show error message
function showError(message, elementId = 'resultsContainer') {
    const element = document.getElementById(elementId);
    if (element) {
        element.innerHTML = `
            <div class="alert alert-danger fade-in">
                <i class="fas fa-exclamation-triangle"></i>
                <strong>Error:</strong> ${message}
            </div>
        `;
    }
}

// Display results
function displayResults(result) {
    const container = document.getElementById('resultsContainer');
    if (container) {
        container.innerHTML = result;
        container.classList.add('fade-in');
        
        // Scroll to results
        container.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }
}
</script>
{% endblock %}