Delete main.js

main.js

@@ -1,269 +0,0 @@
-// Main JavaScript file for the Quantum NLP Framework
-
-document.addEventListener('DOMContentLoaded', function() {
-    // Show loading state on form submission
-    const form = document.getElementById('process-form');
-    const analyzeBtn = document.getElementById('analyze-btn');
-    
-    if (form) {
-        form.addEventListener('submit', function() {
-            if (analyzeBtn) {
-                // Disable button and show loading state
-                analyzeBtn.disabled = true;
-                analyzeBtn.innerHTML = '<i class="fas fa-atom fa-spin me-2"></i> Processing...';
-                
-                // Trigger quantum transition animation if available
-                if (typeof showQuantumTransition === 'function') {
-                    showQuantumTransition();
-                }
-            }
-        });
-    }
-    
-    // Add hover effects to analyze button if present
-    if (analyzeBtn) {
-        analyzeBtn.addEventListener('mouseover', function() {
-            // Add hover class for CSS effects
-            this.classList.add('quantum-btn-hover');
-            
-            // Trigger particle effect if available
-            if (typeof triggerSmallParticleEffect === 'function') {
-                triggerSmallParticleEffect(this);
-            }
-        });
-        
-        analyzeBtn.addEventListener('mouseout', function() {
-            this.classList.remove('quantum-btn-hover');
-        });
-    }
-    
-    // Initialize tooltips
-    const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
-    tooltipTriggerList.map(function(tooltipTriggerEl) {
-        return new bootstrap.Tooltip(tooltipTriggerEl);
-    });
-    
-    // Initialize text-to-vision transitions
-    initTextToVisionTransitions();
-    
-    // Check for results container and apply entrance animations
-    const resultsContainer = document.getElementById('results-container');
-    if (resultsContainer && resultsContainer.children.length > 0) {
-        applyResultsAnimations(resultsContainer);
-    }
-    
-    // Highlight entities in text (if applicable)
-    highlightEntities();
-    
-    // Check if OpenAI key is available for contextual hints
-    const hasOpenaiKey = document.body.classList.contains('has-openai-key');
-    if (!hasOpenaiKey && typeof window.contextualHintSystem !== 'undefined') {
-        setTimeout(() => {
-            const settingsLink = document.querySelector('a[href="/settings"]');
-            if (settingsLink) {
-                window.contextualHintSystem.registerHint('openai-key-needed', {
-                    title: 'OpenAI API Key Needed',
-                    content: 'For enhanced AI-powered analysis, add your OpenAI API key in Settings. Without it, the system uses local fallback processing.',
-                    position: 'bottom',
-                    selector: 'a[href="/settings"]',
-                    icon: 'fas fa-key',
-                    important: true,
-                    maxShows: 2,
-                    buttonText: 'Go to Settings'
-                });
-                window.contextualHintSystem.considerShowingHint('openai-key-needed', settingsLink);
-            }
-        }, 2000);
-    }
-});
-
-/**
- * Initialize text-to-vision transitions with staggered timing
- */
-function initTextToVisionTransitions() {
-    const visionElements = document.querySelectorAll('.text-to-vision');
-    visionElements.forEach((elem, index) => {
-        // Add a staggered delay for smoother visual effect
-        const delay = 300 + (index * 150);
-        setTimeout(() => {
-            elem.classList.add('text-to-vision-active');
-            
-            // Reset the animation after it completes to allow replaying
-            setTimeout(() => {
-                elem.classList.remove('text-to-vision-active');
-            }, 1500);
-        }, delay);
-    });
-}
-
-/**
- * Apply animations to results container
- */
-function applyResultsAnimations(container) {
-    // Add entrance animation
-    container.style.opacity = '0';
-    container.style.transform = 'translateY(20px)';
-    
-    setTimeout(() => {
-        container.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
-        container.style.opacity = '1';
-        container.style.transform = 'translateY(0)';
-        
-        // Apply the quantum-reveal class to each card with staggered timing
-        const cards = container.querySelectorAll('.quantum-card');
-        cards.forEach((card, index) => {
-            setTimeout(() => {
-                card.classList.add('quantum-reveal');
-            }, 300 + (index * 150));
-        });
-    }, 200);
-}
-
-/**
- * Highlight named entities in the displayed text
- */
-function highlightEntities() {
-    // First try the data-entities method
-    const entityContainers = document.querySelectorAll('.highlight-entities');
-    
-    entityContainers.forEach(function(element) {
-        let html = element.innerHTML;
-        const entities = JSON.parse(element.dataset.entities || '[]');
-        
-        // Sort entities by start position in descending order
-        // to avoid offset issues when replacing text
-        entities.sort((a, b) => b.start - a.start);
-        
-        // Replace each entity with highlighted version
-        entities.forEach(function(entity) {
-            const entityText = html.substring(entity.start, entity.end);
-            const replacement = `<span class="entity entity-${entity.label.toLowerCase()}" 
-                                title="${entity.label}">${entityText}</span>`;
-            
-            html = html.substring(0, entity.start) + replacement + html.substring(entity.end);
-        });
-        
-        element.innerHTML = html;
-    });
-    
-    // Add special effects to entity items in lists
-    const entityItems = document.querySelectorAll('.list-group-item:has(.badge.bg-success)');
-    
-    entityItems.forEach(item => {
-        // Extract entity text from the item
-        const entityText = item.textContent.split(/\s+/)[0].trim();
-        const entityType = item.querySelector('.badge')?.textContent || '';
-        
-        // Add quantum hover effects
-        item.classList.add('quantum-entity-item');
-        
-        // Handle hover effects
-        item.addEventListener('mouseover', function() {
-            this.style.backgroundColor = 'rgba(66, 133, 244, 0.1)';
-            this.style.boxShadow = '0 0 10px rgba(66, 133, 244, 0.3)';
-            this.style.transform = 'translateX(5px)';
-            
-            // Create particle effect if the function is available
-            if (typeof triggerSmallParticleEffect === 'function') {
-                triggerSmallParticleEffect(this, 3, 0.3);
-            }
-        });
-        
-        item.addEventListener('mouseout', function() {
-            this.style.backgroundColor = '';
-            this.style.boxShadow = '';
-            this.style.transform = '';
-        });
-        
-        // Try to find and highlight the entity in the original text 
-        highlightEntityInInput(entityText);
-    });
-}
-
-/**
- * Highlight an entity in the input text area
- */
-function highlightEntityInInput(entityText) {
-    const textArea = document.getElementById('input_text');
-    if (!textArea || !entityText) return;
-    
-    const text = textArea.value;
-    if (!text) return;
-    
-    // Check if the entity is in the text
-    const regex = new RegExp(`\\b${entityText}\\b`, 'gi');
-    if (!regex.test(text)) return;
-    
-    // We can't highlight directly in textarea, so we can add a custom tooltip
-    // or create a special view mode that shows the marked-up text
-    
-    // For now, we'll just add a subtle animation to the textarea
-    textArea.classList.add('has-entities');
-    
-    // Create a glowing effect in the textarea
-    const glowEffect = document.createElement('div');
-    glowEffect.className = 'textarea-glow';
-    glowEffect.style.position = 'absolute';
-    glowEffect.style.top = '0';
-    glowEffect.style.left = '0';
-    glowEffect.style.width = '100%';
-    glowEffect.style.height = '100%';
-    glowEffect.style.pointerEvents = 'none';
-    glowEffect.style.boxShadow = 'inset 0 0 15px rgba(66, 133, 244, 0.3)';
-    glowEffect.style.opacity = '0';
-    glowEffect.style.transition = 'opacity 0.5s ease';
-    
-    // Add glow effect as sibling to textarea with relative positioning
-    const parent = textArea.parentElement;
-    parent.style.position = 'relative';
-    parent.appendChild(glowEffect);
-    
-    // Show the glow effect
-    setTimeout(() => {
-        glowEffect.style.opacity = '1';
-    }, 300);
-    
-    // Hide after 2 seconds
-    setTimeout(() => {
-        glowEffect.style.opacity = '0';
-        
-        // Remove after fade out
-        setTimeout(() => {
-            glowEffect.remove();
-        }, 500);
-    }, 2000);
-}
-
-/**
- * Create a basic visualization of quantum score
- */
-function visualizeQuantumScore(elementId, score) {
-    if (!elementId) return;
-    
-    const element = document.getElementById(elementId);
-    if (!element) return;
-    
-    // Create a simple bar visualization
-    const width = score * 100;
-    const color = getColorForScore(score);
-    
-    element.innerHTML = `
-        <div class="progress">
-            <div class="progress-bar" role="progressbar" 
-                style="width: ${width}%; background-color: ${color};" 
-                aria-valuenow="${score * 100}" aria-valuemin="0" aria-valuemax="100">
-                ${(score * 100).toFixed(0)}%
-            </div>
-        </div>
-    `;
-}
-
-/**
- * Get color based on score value
- */
-function getColorForScore(score) {
-    if (score < 0.3) return '#dc3545'; // Low - red
-    if (score < 0.6) return '#ffc107'; // Medium - yellow
-    if (score < 0.8) return '#0dcaf0'; // Good - cyan
-    return '#198754'; // High - green
-}