static/test.js

/*document.addEventListener('DOMContentLoaded', function() {
    // Tab functionality
    const tabButtons = document.querySelectorAll('.tab-btn');
    const tabContents = document.querySelectorAll('.tab-content');
    
    tabButtons.forEach(button => {
        button.addEventListener('click', () => {
            // Remove active class from all buttons and contents
            tabButtons.forEach(btn => btn.classList.remove('active'));
            tabContents.forEach(content => content.classList.remove('active'));
            
            // Add active class to clicked button and corresponding content
            button.classList.add('active');
            const tabId = button.getAttribute('data-tab');
            document.getElementById(tabId).classList.add('active');
        });
    });

    // API base URL - replace with your Hugging Face Space URL
    const API_BASE_URL = "https://your-username-your-space-name.hf.space"; 
    // For local testing: "http://localhost:7860"

    // Summarize functionality
    document.getElementById('summarize-btn').addEventListener('click', async function() {
        const fileInput = document.getElementById('summarize-file');
        const resultArea = document.getElementById('summarize-result');
        
        if (!fileInput.files[0]) {
            resultArea.textContent = "Please select a file first";
            return;
        }

        resultArea.textContent = "Processing document...";

        const formData = new FormData();
        formData.append('file', fileInput.files[0]);

        try {
            const response = await fetch(`${API_BASE_URL}/ask`, {
                method: 'POST',
                body: formData
            });
            
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            
            const data = await response.json();
            resultArea.innerHTML = `
                <h3>Summary:</h3>
                <p>${data.answer}</p>
                <p class="confidence">Confidence: ${(data.confidence * 100).toFixed(1)}%</p>
            `;
        } catch (error) {
            resultArea.textContent = `Error: ${error.message}`;
            console.error('Summarization error:', error);
        }
    });

    // Question Answering functionality
    document.getElementById('ask-btn').addEventListener('click', async function() {
        const fileInput = document.getElementById('ask-file');
        const questionInput = document.getElementById('ask-question');
        const resultArea = document.getElementById('ask-result');
        
        if (!questionInput.value.trim()) {
            resultArea.textContent = "Please enter a question";
            return;
        }

        resultArea.textContent = "Processing your question...";

        const formData = new FormData();
        formData.append('question', questionInput.value);
        
        if (fileInput.files[0]) {
            formData.append('file', fileInput.files[0]);
        }

        try {
            const response = await fetch(`${API_BASE_URL}/ask`, {
                method: 'POST',
                body: formData
            });
            
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            
            const data = await response.json();
            resultArea.innerHTML = `
                <h3>Answer:</h3>
                <p>${data.answer}</p>
                <p class="confidence">Confidence: ${(data.confidence * 100).toFixed(1)}%</p>
                ${data.context_used ? `<details><summary>Context used</summary><p>${data.context_used}</p></details>` : ''}
            `;
        } catch (error) {
            resultArea.textContent = `Error: ${error.message}`;
            console.error('Question answering error:', error);
        }
    });

    // Image Captioning functionality
    document.getElementById('caption-btn').addEventListener('click', async function() {
        const fileInput = document.getElementById('caption-file');
        const resultArea = document.getElementById('caption-result');
        
        if (!fileInput.files[0]) {
            resultArea.textContent = "Please select an image first";
            return;
        }

        resultArea.textContent = "Generating caption...";

        const formData = new FormData();
        formData.append('file', fileInput.files[0]);

        try {
            const response = await fetch(`${API_BASE_URL}/api/caption`, {
                method: 'POST',
                body: formData
            });
            
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            
            const data = await response.json();
            resultArea.innerHTML = `
                <h3>Caption:</h3>
                <p>${data.caption}</p>
                <div class="image-preview">
                    <img src="${URL.createObjectURL(fileInput.files[0])}" alt="Uploaded image">
                </div>
            `;
        } catch (error) {
            resultArea.textContent = `Error: ${error.message}`;
            console.error('Captioning error:', error);
        }
    });

    // Translation functionality
    document.getElementById('translate-btn').addEventListener('click', async function() {
        const textInput = document.getElementById('translate-text');
        const sourceLang = document.getElementById('source-lang').value;
        const targetLang = document.getElementById('target-lang').value;
        const resultArea = document.getElementById('translate-result');
        
        if (!textInput.value.trim()) {
            resultArea.textContent = "Please enter text to translate";
            return;
        }

        resultArea.textContent = "Translating...";

        const formData = new FormData();
        formData.append('text', textInput.value);
        formData.append('target_lang', targetLang);
        formData.append('src_lang', sourceLang);

        try {
            const response = await fetch(`${API_BASE_URL}/translate`, {
                method: 'POST',
                body: formData
            });
            
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            
            const data = await response.json();
            resultArea.innerHTML = `
                <h3>Translation:</h3>
                <p>${data.translated_text}</p>
                <p class="language-info">Translated from ${document.getElementById('source-lang').options[document.getElementById('source-lang').selectedIndex].text} to ${document.getElementById('target-lang').options[document.getElementById('target-lang').selectedIndex].text}</p>
            `;
        } catch (error) {
            resultArea.textContent = `Error: ${error.message}`;
            console.error('Translation error:', error);
        }
    });

    // File input styling
    document.querySelectorAll('input[type="file"]').forEach(input => {
        input.addEventListener('change', function() {
            const label = this.nextElementSibling;
            if (this.files[0]) {
                label.textContent = this.files[0].name;
            } else {
                label.textContent = label.getAttribute('data-default') || 'Choose a file';
            }
        });
    });
});*/

// Function to show the selected section and hide the others
function showSection(sectionId) {
    const sections = document.querySelectorAll('.tool-section');
    sections.forEach(section => {
      section.style.display = 'none';
    });
  
    const activeSection = document.getElementById(sectionId);
    if (activeSection) {
      activeSection.style.display = 'block';
    }
  }