script.js

// HackRx Enhanced LLM Frontend JavaScript

class HackRxLLM {
    constructor() {
        this.apiBaseUrl = window.location.origin;
        this.init();
    }

    init() {
        this.initializeElements();
        this.attachEventListeners();
        this.checkServerHealth();
        this.loadSavedSettings();
    }

    initializeElements() {
        // Main elements
        this.ocrMethodSelect = document.getElementById('ocrMethod');
        this.documentUrlInput = document.getElementById('documentUrl');
        this.fileInput = document.getElementById('fileInput');
        this.uploadArea = document.getElementById('uploadArea');
        this.fileList = document.getElementById('fileList');
        this.questionsContainer = document.getElementById('questionsContainer');
        this.processBtn = document.getElementById('processBtn');
        this.clearBtn = document.getElementById('clearBtn');
        this.loadingIndicator = document.getElementById('loadingIndicator');
        this.resultsSection = document.getElementById('resultsSection');
        this.processingInfo = document.getElementById('processingInfo');
        this.answersContainer = document.getElementById('answersContainer');
        this.toastContainer = document.getElementById('toastContainer');

        // Status elements
        this.statusDot = document.getElementById('statusDot');
        this.statusText = document.getElementById('statusText');

        // Tab elements
        this.tabButtons = document.querySelectorAll('.tab-btn');
        this.tabContents = document.querySelectorAll('.tab-content');

        this.selectedFiles = [];
        this.currentTab = 'url';
    }

    attachEventListeners() {
        // Tab switching
        this.tabButtons.forEach(btn => {
            btn.addEventListener('click', () => this.switchTab(btn.dataset.tab));
        });

        // File upload
        this.uploadArea.addEventListener('click', () => this.fileInput.click());
        this.uploadArea.addEventListener('dragover', (e) => this.handleDragOver(e));
        this.uploadArea.addEventListener('dragleave', (e) => this.handleDragLeave(e));
        this.uploadArea.addEventListener('drop', (e) => this.handleDrop(e));
        this.fileInput.addEventListener('change', (e) => this.handleFileSelect(e));

        // Questions management
        document.getElementById('addQuestion').addEventListener('click', () => this.addQuestion());
        this.questionsContainer.addEventListener('click', (e) => {
            if (e.target.classList.contains('remove-question') || e.target.parentElement.classList.contains('remove-question')) {
                this.removeQuestion(e.target.closest('.question-item'));
            }
        });

        // Action buttons
        this.processBtn.addEventListener('click', () => this.processDocument());
        this.clearBtn.addEventListener('click', () => this.clearAll());

        // Example cards
        document.querySelectorAll('.example-card').forEach(card => {
            card.addEventListener('click', () => {
                const questions = JSON.parse(card.dataset.questions);
                this.loadExampleQuestions(questions);
            });
        });

        // Save settings on change
        this.ocrMethodSelect.addEventListener('change', () => this.saveSettings());
    }

    // Tab Management
    switchTab(tabName) {
        this.currentTab = tabName;

        // Update tab buttons
        this.tabButtons.forEach(btn => {
            btn.classList.toggle('active', btn.dataset.tab === tabName);
        });

        // Update tab content
        this.tabContents.forEach(content => {
            content.classList.toggle('active', content.id === `${tabName}Tab`);
        });

        // Clear previous inputs when switching tabs
        if (tabName === 'url') {
            this.selectedFiles = [];
            this.updateFileList();
        } else {
            this.documentUrlInput.value = '';
        }
    }

    // File Management
    handleDragOver(e) {
        e.preventDefault();
        this.uploadArea.classList.add('dragover');
    }

    handleDragLeave(e) {
        e.preventDefault();
        this.uploadArea.classList.remove('dragover');
    }

    handleDrop(e) {
        e.preventDefault();
        this.uploadArea.classList.remove('dragover');
        const files = Array.from(e.dataTransfer.files);
        this.addFiles(files);
    }

    handleFileSelect(e) {
        const files = Array.from(e.target.files);
        this.addFiles(files);
        e.target.value = ''; // Reset input
    }

    addFiles(files) {
        const allowedTypes = [
            'application/pdf',
            'image/png', 'image/jpeg', 'image/jpg', 'image/gif', 
            'image/bmp', 'image/tiff', 'image/webp'
        ];

        files.forEach(file => {
            if (allowedTypes.includes(file.type)) {
                if (!this.selectedFiles.find(f => f.name === file.name && f.size === file.size)) {
                    this.selectedFiles.push(file);
                }
            } else {
                this.showToast(`Unsupported file type: ${file.name}`, 'error');
            }
        });

        this.updateFileList();
    }

    removeFile(index) {
        this.selectedFiles.splice(index, 1);
        this.updateFileList();
    }

    updateFileList() {
        if (this.selectedFiles.length === 0) {
            this.fileList.innerHTML = '';
            return;
        }

        const html = this.selectedFiles.map((file, index) => {
            const icon = this.getFileIcon(file.type);
            const size = this.formatFileSize(file.size);

            return `
                <div class="file-item">
                    <div class="file-info">
                        <i class="${icon} file-icon"></i>
                        <div class="file-details">
                            <h4>${file.name}</h4>
                            <p>${size} • ${file.type}</p>
                        </div>
                    </div>
                    <button class="remove-file" onclick="app.removeFile(${index})" title="Remove file">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
            `;
        }).join('');

        this.fileList.innerHTML = html;
    }

    getFileIcon(mimeType) {
        if (mimeType === 'application/pdf') return 'fas fa-file-pdf';
        if (mimeType.startsWith('image/')) return 'fas fa-file-image';
        return 'fas fa-file';
    }

    formatFileSize(bytes) {
        if (bytes === 0) return '0 Bytes';
        const k = 1024;
        const sizes = ['Bytes', 'KB', 'MB', 'GB'];
        const i = Math.floor(Math.log(bytes) / Math.log(k));
        return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
    }

    // Questions Management
    addQuestion() {
        const questionItem = document.createElement('div');
        questionItem.className = 'question-item';
        questionItem.innerHTML = `
            <input type="text" class="question-input" placeholder="Enter your question...">
            <button type="button" class="remove-question" title="Remove Question">
                <i class="fas fa-times"></i>
            </button>
        `;

        this.questionsContainer.appendChild(questionItem);
        questionItem.querySelector('.question-input').focus();
    }

    removeQuestion(questionItem) {
        if (this.questionsContainer.children.length > 1) {
            questionItem.remove();
        } else {
            this.showToast('At least one question is required', 'warning');
        }
    }

    getQuestions() {
        const inputs = this.questionsContainer.querySelectorAll('.question-input');
        return Array.from(inputs)
            .map(input => input.value.trim())
            .filter(question => question.length > 0);
    }

    loadExampleQuestions(questions) {
        // Clear existing questions
        this.questionsContainer.innerHTML = '';

        // Add example questions
        questions.forEach(question => {
            const questionItem = document.createElement('div');
            questionItem.className = 'question-item';
            questionItem.innerHTML = `
                <input type="text" class="question-input" placeholder="Enter your question..." value="${question}">
                <button type="button" class="remove-question" title="Remove Question">
                    <i class="fas fa-times"></i>
                </button>
            `;
            this.questionsContainer.appendChild(questionItem);
        });

        this.showToast('Example questions loaded!', 'success');
    }

    // Server Communication
    async checkServerHealth() {
        try {
            const response = await fetch(`${this.apiBaseUrl}/health`);
            const data = await response.json();

            if (data.status === 'ok') {
                this.statusDot.classList.add('connected');
                this.statusText.textContent = `Connected • OCR: ${data.supported_ocr_methods.join(', ')}`;
            } else {
                this.updateConnectionStatus(false, 'Server error');
            }
        } catch (error) {
            this.updateConnectionStatus(false, 'Server offline');
        }
    }

    updateConnectionStatus(connected, message) {
        if (connected) {
            this.statusDot.classList.add('connected');
        } else {
            this.statusDot.classList.remove('connected');
        }
        this.statusText.textContent = message;
    }

    async processDocument() {
        const questions = this.getQuestions();
        const ocrMethod = this.ocrMethodSelect.value;

        // Validation
        if (questions.length === 0) {
            this.showToast('Please enter at least one question', 'error');
            return;
        }

        if (this.currentTab === 'url') {
            const url = this.documentUrlInput.value.trim();
            if (!url) {
                this.showToast('Please enter a document URL', 'error');
                return;
            }
            await this.processUrl(url, questions, ocrMethod);
        } else {
            if (this.selectedFiles.length === 0) {
                this.showToast('Please select at least one file', 'error');
                return;
            }
            await this.processFiles(this.selectedFiles, questions, ocrMethod);
        }
    }

    async processUrl(url, questions, ocrMethod) {
        this.showLoading(true);

        try {
            const response = await fetch(`${this.apiBaseUrl}/hackrx/run`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    documents: url,
                    questions: questions,
                    ocr_method: ocrMethod
                })
            });

            if (!response.ok) {
                const errorData = await response.json();
                throw new Error(errorData.detail || `HTTP ${response.status}`);
            }

            const data = await response.json();
            this.displayResults(data, questions);
            this.showToast('Document processed successfully!', 'success');

        } catch (error) {
            console.error('Error:', error);
            this.showToast(`Processing failed: ${error.message}`, 'error');
        } finally {
            this.showLoading(false);
        }
    }

    async processFiles(files, questions, ocrMethod) {
        this.showLoading(true);

        try {
            const formData = new FormData();

            files.forEach(file => {
                formData.append('files', file);
            });

            questions.forEach(question => {
                formData.append('questions', question);
            });

            formData.append('ocr_method', ocrMethod);

            const response = await fetch(`${this.apiBaseUrl}/hackrx/upload-images`, {
                method: 'POST',
                body: formData
            });

            if (!response.ok) {
                const errorData = await response.json();
                throw new Error(errorData.detail || `HTTP ${response.status}`);
            }

            const data = await response.json();
            this.displayResults(data, questions);
            this.showToast('Files processed successfully!', 'success');

        } catch (error) {
            console.error('Error:', error);
            this.showToast(`Processing failed: ${error.message}`, 'error');
        } finally {
            this.showLoading(false);
        }
    }

    // UI Management
    showLoading(show) {
        this.loadingIndicator.style.display = show ? 'block' : 'none';
        this.processBtn.disabled = show;
        this.resultsSection.style.display = show ? 'none' : 'block';
    }

    displayResults(data, questions) {
        // Display processing info
        if (data.processing_info) {
            const info = data.processing_info;
            this.processingInfo.innerHTML = `
                <div class="info-grid">
                    <div class="info-item">
                        <h4>${info.processing_time_seconds || 0}s</h4>
                        <p>Processing Time</p>
                    </div>
                    <div class="info-item">
                        <h4>${info.total_chunks || 0}</h4>
                        <p>Text Chunks</p>
                    </div>
                    <div class="info-item">
                        <h4>${info.ocr_method_used || 'N/A'}</h4>
                        <p>OCR Method</p>
                    </div>
                    <div class="info-item">
                        <h4>${info.files_processed || 1}</h4>
                        <p>Files Processed</p>
                    </div>
                </div>
            `;
        }

        // Display answers
        const answersHtml = data.answers.map((answer, index) => {
            const question = questions[index] || `Question ${index + 1}`;
            return `
                <div class="answer-card">
                    <div class="answer-header">
                        <i class="fas fa-question-circle"></i>
                        <strong>${question}</strong>
                    </div>
                    <div class="answer-content">${answer}</div>
                </div>
            `;
        }).join('');

        this.answersContainer.innerHTML = answersHtml;
        this.resultsSection.style.display = 'block';
    }

    clearAll() {
        // Clear inputs
        this.documentUrlInput.value = '';
        this.selectedFiles = [];
        this.updateFileList();

        // Clear questions (keep one empty question)
        this.questionsContainer.innerHTML = `
            <div class="question-item">
                <input type="text" class="question-input" placeholder="Enter your question...">
                <button type="button" class="remove-question" title="Remove Question">
                    <i class="fas fa-times"></i>
                </button>
            </div>
        `;

        // Hide results
        this.resultsSection.style.display = 'none';

        this.showToast('All fields cleared', 'success');
    }

    // Settings Management
    saveSettings() {
        const settings = {
            ocrMethod: this.ocrMethodSelect.value
        };
        localStorage.setItem('hackrx-settings', JSON.stringify(settings));
    }

    loadSavedSettings() {
        try {
            const settings = JSON.parse(localStorage.getItem('hackrx-settings') || '{}');
            if (settings.ocrMethod) this.ocrMethodSelect.value = settings.ocrMethod;
        } catch (error) {
            console.log('No saved settings found');
        }
    }

    // Toast Notifications
    showToast(message, type = 'success') {
        const toast = document.createElement('div');
        toast.className = `toast ${type}`;

        const icon = type === 'success' ? 'check-circle' : 
                    type === 'error' ? 'exclamation-circle' : 
                    'exclamation-triangle';

        toast.innerHTML = `
            <i class="fas fa-${icon}"></i>
            <span>${message}</span>
        `;

        this.toastContainer.appendChild(toast);

        // Auto remove after 5 seconds
        setTimeout(() => {
            if (toast.parentElement) {
                toast.parentElement.removeChild(toast);
            }
        }, 5000);
    }
}

// Initialize the application
const app = new HackRxLLM();

// Export for debugging
window.app = app;