static/script.js

document.addEventListener('DOMContentLoaded', () => {
    // Model selection buttons and sections
    const sentimentBtn = document.getElementById('sentiment-btn');
    const catdogBtn = document.getElementById('catdog-btn');
    const housingBtn = document.getElementById('housing-btn');

    const sentimentSection = document.getElementById('sentiment-section');
    const catdogSection = document.getElementById('catdog-section');
    const housingSection = document.getElementById('housing-section');

    const sections = [sentimentSection, catdogSection, housingSection];
    const buttons = [sentimentBtn, catdogBtn, housingBtn];

    // Forms and result displays
    const sentimentForm = document.getElementById('sentiment-form');
    const catdogForm = document.getElementById('catdog-form');
    const housingForm = document.getElementById('housing-form');

    const sentimentResult = document.getElementById('sentiment-result');
    const catdogResult = document.getElementById('catdog-result');
    const housingResult = document.getElementById('housing-result');

    const imagePreview = document.getElementById('image-preview');
    const catdogFileInput = document.getElementById('catdog-file');

    // --- Event Listeners for Model Switching ---
    function switchTab(activeIndex) {
        buttons.forEach((button, index) => {
            button.classList.toggle('active', index === activeIndex);
        });
        sections.forEach((section, index) => {
            section.classList.toggle('active', index === activeIndex);
        });
    }

    sentimentBtn.addEventListener('click', () => switchTab(0));
    catdogBtn.addEventListener('click', () => switchTab(1));
    housingBtn.addEventListener('click', () => switchTab(2));

    // --- Form Submission Handlers ---

    // Sentiment Form
    sentimentForm.addEventListener('submit', async (e) => {
        e.preventDefault();
        const text = document.getElementById('sentiment-text').value;
        sentimentResult.textContent = 'Analyzing...';
        try {
            const response = await fetch('/predict/sentiment', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ text })
            });
            const data = await response.json();
            if (!response.ok) throw new Error(data.detail || 'An unknown error occurred.');
            sentimentResult.textContent = `Prediction: ${data.prediction}`;
        } catch (error) {
            sentimentResult.textContent = `Error: ${error.message}`;
        }
    });

    // Cat & Dog Form
    catdogForm.addEventListener('submit', async (e) => {
        e.preventDefault();
        const formData = new FormData(catdogForm);
        catdogResult.textContent = 'Classifying...';
        try {
            const response = await fetch('/predict/catdog', {
                method: 'POST',
                body: formData
            });
            const data = await response.json();
            if (!response.ok) throw new Error(data.detail || 'An unknown error occurred.');
            catdogResult.textContent = `Prediction: ${data.prediction}`;
        } catch (error) {
            catdogResult.textContent = `Error: ${error.message}`;
        }
    });

    // Housing Form
    housingForm.addEventListener('submit', async (e) => {
        e.preventDefault();
        const formData = new FormData(housingForm);
        const data = Object.fromEntries(formData.entries());
        housingResult.textContent = 'Predicting...';
        try {
            const response = await fetch('/predict/housing', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(data)
            });
            const result = await response.json();
            if (!response.ok) throw new Error(result.detail || 'An unknown error occurred.');
            housingResult.textContent = `Predicted Price: ${result.prediction}`;
        } catch (error) {
            housingResult.textContent = `Error: ${error.message}`;
        }
    });

    // Image Preview Handler
    catdogFileInput.addEventListener('change', () => {
        const file = catdogFileInput.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = (e) => {
                imagePreview.src = e.target.result;
                imagePreview.style.display = 'block';
            };
            reader.readAsDataURL(file);
        } else {
            imagePreview.style.display = 'none';
        }
    });
});