static/script.js

/* static/script.js */
document.addEventListener('DOMContentLoaded', function() {
    console.log("DOMContentLoaded event fired - script.js loaded");

    const urlSubmitButton = document.getElementById('url-submit');
    const imageSubmitButton = document.getElementById('image-submit');
    const tabButtons = document.querySelectorAll('.ssth_tab_button');
    const statusMessages = document.getElementById('status-messages');
    const progressBar = document.getElementById('progress-bar');

    console.log("urlSubmitButton:", urlSubmitButton);
    console.log("imageSubmitButton:", imageSubmitButton);
    console.log("tabButtons:", tabButtons);
    console.log("statusMessages:", statusMessages);
    console.log("progressBar:", progressBar);

    let socket; // Declare socket outside the if block

    if (typeof io !== 'undefined') {
        socket = io(); // Connect to Socket.IO server

        socket.on('connect', function() {
            console.log('Connected to WebSocket server!');
        });

        socket.on('progress', function(data) {
            console.log('Progress update received:', data);
            updateProgressBar(data.percent);
            displayStatusMessage(data.message);
        });

        socket.on('disconnect', function() {
            console.log('Disconnected from WebSocket server!');
        });
    } else {
        console.warn("Socket.IO library not found. Progress updates will not be displayed.");
    }

    if (!urlSubmitButton) console.error("URL Submit button not found! Check ID in HTML.");
    if (!imageSubmitButton) console.error("Image Submit button not found! Check ID in HTML.");
    if (!tabButtons || tabButtons.length === 0) console.error("Tab buttons not found! Check class in HTML.");
    if (!statusMessages) console.error("Status messages area not found! Check ID in HTML.");
    if (!progressBar) console.error("Progress bar not found! Check ID in HTML");

    // Helper functions
    function displayStatusMessage(message) {
        if (statusMessages) statusMessages.textContent = message;
    }

    function updateProgressBar(percentage) {
        if (progressBar) {
            progressBar.style.width = percentage + '%';
            progressBar.textContent = percentage + '%';
        }
    }

    // Tab switching
    tabButtons.forEach(button => {
        button.addEventListener('click', function(event) {
            const tabId = this.dataset.tab;
            console.log(`Tab button '${tabId}' clicked`);
            switchTab(tabId);
        });
    });

    if (urlSubmitButton) {
        urlSubmitButton.addEventListener('click', function(event) {
            event.preventDefault();
            console.log("URL Submit button clicked");
            resetProgress();
            displayStatusMessage("Taking screenshot of webpage...");
            processURL();
        });
    }

    if (imageSubmitButton) {
        imageSubmitButton.addEventListener('click', function(event) {
            event.preventDefault();
            console.log("Image Submit button clicked");
            resetProgress();
            displayStatusMessage("Processing uploaded image...");
            processImage();
        });
    }

    function switchTab(tabId) {
        console.log(`switchTab('${tabId}') called`);
        document.querySelectorAll('.ssth_tab_button').forEach(btn => btn.classList.remove('active'));
        document.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active'));

        document.querySelector(`.ssth_tab_button[data-tab="${tabId}"]`).classList.add('active');
        document.getElementById(tabId).classList.add('active');
        resetProgress();
    }

    async function processURL() {
        console.log("processURL() called");
        const form = document.getElementById('url-form');
        const formData = new FormData(form);

        try {
            const response = await fetch('/process_url', { method: 'POST', body: formData });
            displayStatusMessage("Response received, processing with Gemini...");
            updateProgressBar(50);

            const result = await response.json();
            if (response.ok) {
                console.log("Response OK:", result);
                updateProgressBar(100);
                displayResults(result.files, result.preview, result.combined_html);
            } else {
                console.error("Response NOT OK:", result);
                displayError(result.error);
            }
        } catch (err) {
            console.error("Fetch error:", err);
            displayError(err.message);
        } finally {
            displayStatusMessage("");
        }
    }

    async function processImage() {
        console.log("processImage() called");
        const form = document.getElementById('image-form');
        const formData = new FormData(form);

        try {
            const response = await fetch('/process_image', { method: 'POST', body: formData });
            displayStatusMessage("Response received, processing with Gemini...");
            updateProgressBar(50);

            const result = await response.json();
            if (response.ok) {
                console.log("Response OK:", result);
                updateProgressBar(100);
                displayResults(result.files, result.preview, result.combined_html);
            } else {
                console.error("Response NOT OK:", result);
                displayError(result.error);
            }
        } catch (err) {
            console.error("Fetch error:", err);
            displayError(err.message);
        } finally {
            displayStatusMessage("");
        }
    }

    function displayResults(files, preview, combinedHtml) {
        console.log("displayResults() called");
        updateProgressBar(0);
        const filesDiv = document.getElementById('files');
        filesDiv.innerHTML = '';

        Object.entries(files).forEach(([filename, file]) => {
            const fileDiv = document.createElement('div');
            fileDiv.className = 'ssth_file_window';
            fileDiv.innerHTML = `
                <h3 class="ssth_file_title">${filename}</h3>
                <pre class="ssth_code_container"><code id="${filename}-code"></code></pre>
            `;
            filesDiv.appendChild(fileDiv);
            document.getElementById(`${filename}-code`).textContent = file.content;
        });

        const previewIframe = document.getElementById('preview-iframe');
        if (previewIframe) previewIframe.srcdoc = combinedHtml;

        document.getElementById('combined-code').textContent = combinedHtml ? escapeHtml(combinedHtml) : 'No combined HTML generated.';
    }

    function displayError(error) {
        console.log("displayError() called:", error);
        displayStatusMessage(`Error: ${error}`);
        updateProgressBar(0);
        const filesDiv = document.getElementById('files');
        filesDiv.innerHTML = `<p class="ssth_error_message">Error: ${escapeHtml(error)}</p>`;
        document.getElementById('preview-iframe').srcdoc = '';
        document.getElementById('combined-code').textContent = '';
    }

    function resetProgress() {
        updateProgressBar(0);
        displayStatusMessage("");
    }

    function escapeHtml(unsafe) {
        return unsafe
            .replace(/&/g, "&")
            .replace(/</g, "<")
            .replace(/>/g, ">")
            .replace(/"/g, '"')
            .replace(/'/g, "'");
    }
});