assets/js/app.js

document.addEventListener('DOMContentLoaded', () => {
    const form = document.getElementById('vlm-form');
    const imageUpload = document.getElementById('image-upload');
    const previewContainer = document.getElementById('image-preview');
    const previewImg = document.getElementById('preview-img');
    const promptInput = document.getElementById('prompt');
    const submitBtn = document.getElementById('submit-btn');
    const outputSection = document.getElementById('vlm-output');
    const responseText = document.getElementById('response-text');
    const loadingSpinner = document.getElementById('loading-spinner');

    let imageLoaded = false;

    // --- Image Handling ---

    // Trigger file input when the preview area is clicked
    previewContainer.addEventListener('click', () => {
        imageUpload.click();
    });

    imageUpload.addEventListener('change', (event) => {
        const file = event.target.files[0];
        
        if (file) {
            const reader = new FileReader();
            reader.onload = (e) => {
                previewImg.src = e.target.result;
                previewImg.classList.remove('hidden');
                previewContainer.classList.add('has-image');
                imageLoaded = true;
                // Hide any previous output
                outputSection.classList.add('hidden');
                responseText.textContent = '';
            };
            reader.readAsDataURL(file);
        } else {
            previewImg.src = "";
            previewImg.classList.add('hidden');
            previewContainer.classList.remove('has-image');
            imageLoaded = false;
        }
    });

    // Prevent default form submission and run simulation
    form.addEventListener('submit', (event) => {
        event.preventDefault();

        if (!imageLoaded) {
            alert('Please upload an image before generating the analysis.');
            return;
        }

        const prompt = promptInput.value.trim();

        if (!prompt) {
            alert('Please enter a question or prompt for the VLM.');
            return;
        }

        // 1. Start loading state
        submitBtn.disabled = true;
        submitBtn.textContent = 'Analyzing...';
        loadingSpinner.classList.remove('hidden');
        outputSection.classList.remove('hidden');
        responseText.textContent = '';
        
        // Ensure spinner is centered if text is empty
        responseText.style.display = 'none';

        // 2. Simulate VLM processing delay (3 seconds)
        setTimeout(() => {
            // 3. Generate Mock Response
            const analysis = generateMockAnalysis(prompt);

            // 4. Display Result
            loadingSpinner.classList.add('hidden');
            responseText.style.display = 'block';
            
            // Simulate typing effect for dramatic flair
            typeResponse(analysis);

            // 5. Reset button state
            submitBtn.disabled = false;
            submitBtn.innerHTML = '<i class="fas fa-magic"></i> Generate VLM Analysis';

        }, 3000); // 3 second delay
    });

    /**
     * Simulates the VLM generating a response based on the input prompt structure.
     * @param {string} prompt 
     * @returns {string} Mock analysis text
     */
    function generateMockAnalysis(prompt) {
        let baseResponse = "VLM Analysis Complete:\n\n";
        
        if (prompt.toLowerCase().includes("describe")) {
            baseResponse += "Based on the visual data provided, the model identifies key elements, suggesting a spatial relationship often found in common scenarios. Detailed object recognition was performed, resulting in a rich semantic understanding of the scene. ";
        } else if (prompt.toLowerCase().includes("analyze")) {
            baseResponse += "The requested analysis focuses on relational aspects. The VLM determined that the composition indicates [REDACTED_MOCK_INSIGHT] due to the lighting and proximity cues. Further investigation into specific textures might yield deeper insights into material composition.";
        } else if (prompt.toLowerCase().includes("what is")) {
            baseResponse += "The primary focus of the image, as interpreted by the VLM's attention mechanisms, appears to be related to the central object. This object exhibits characteristics typical of [MOCK_OBJECT_CLASS].";
        } else {
            baseResponse += "The VLM has processed the image according to the general task request. The resulting interpretation blends visual feature extraction with context-aware language modeling. The environment appears consistent and the entities are logically grouped.";
        }
        
        baseResponse += "\n\nConfidence Score: 92%\n(Mock Output simulating complex visual synthesis)";
        return baseResponse;
    }

    /**
     * Typewriter effect for the response text.
     */
    function typeResponse(text) {
        responseText.textContent = '';
        let i = 0;
        const speed = 15; // milliseconds per character

        function type() {
            if (i < text.length) {
                responseText.textContent += text.charAt(i);
                i++;
                setTimeout(type, speed);
            }
        }
        type();
    }
});