when i click on upload and summarize pdf button nothing happens 
"
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>SummarAI Nexus</title>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;700&family=Roboto:wght@300;400;500;700&family=Dancing+Script:wght@600&family=Kaushan+Script&display=swap" rel="stylesheet" />
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js" defer></script>
    <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
    <script src="https://unpkg.com/typewriter-effect@latest/dist/core.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.5.1/dist/confetti.browser.min.js"></script>
    <!-- Firebase SDKs -->
    <script src="https://www.gstatic.com/firebasejs/9.22.1/firebase-app-compat.js"></script>
    <script src="https://www.gstatic.com/firebasejs/9.22.1/firebase-storage-compat.js"></script>
    <style>
        body {
            font-family: 'Montserrat', sans-serif;
            background-image: url('https://images.stockcake.com/public/4/e/f/4ef87898-2e97-4e79-8da4-9a82a2288fed/enchanted-nighttime-reading-stockcake.jpg'); 
            background-size: cover;
            background-repeat: no-repeat;
            background-attachment: fixed;
        }
        .glass-effect {
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
        }
        .animate-fade-in {
            opacity: 0;
            animation: fadeIn 0.5s ease-in forwards;
        }
        @keyframes fadeIn {
            to {
                opacity: 1;
            }
        }
        .loader {
            border-top-color: #3498db;
            animation: spinner 1s linear infinite;
        }
        @keyframes spinner {
            to {
                transform: rotate(360deg);
            }
        }
        .animated-bg {
            background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
            background-size: 400% 400%;
            animation: gradientBG 15s ease infinite;
        }
        @keyframes gradientBG {
            0% {
                background-position: 0% 50%;
            }
            50% {
                background-position: 100% 50%;
            }
            100% {
                background-position: 0% 50%;
            }
        }
        .hover-effect {
            transition: all 0.3s ease;
        }
        .hover-effect:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
        }
        @media (max-width: 768px) {
            .flex-container {
                flex-direction: column;
            }
            .quote-container {
                width: 100%;
                margin-bottom: 2rem;
            }
            .main-content {
                width: 100%;
                padding-left: 0;
            }
            #title {
                font-size: 3rem;
            }
            .file-upload-label {
                height: 12rem;
            }
        }
    </style>
</head>
<body class="min-h-screen flex items-center justify-center p-4"> 
    <div id="particles-js" class="absolute inset-0"></div>
    <div class="bg-white bg-opacity-50 rounded-2xl shadow-2xl w-full max-w-6xl p-4 sm:p-8 animate-fade-in flex flex-container glass-effect relative z-10">
        <!-- Quote of the Day -->
        <div class="quote-container w-full sm:w-1/3 p-6 rounded-2xl text-white flex flex-col items-center justify-center animated-bg mb-4 sm:mb-0" data-aos="fade-right">
            <h2 class="text-3xl sm:text-4xl font-bold mb-4" style="font-family: 'Kaushan Script', cursive;">Quote of the Day</h2>
            <p id="quote" class="text-xl sm:text-2xl text-center"></p>
        </div>
        <!-- Main Content -->
        <div class="main-content w-full sm:w-2/3 sm:pl-8">
            <!-- Header -->
            <div class="text-center mb-8" data-aos="zoom-in">
                <h1 id="title" class="text-4xl sm:text-6xl font-extrabold bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-teal-400">
                    PDF Summarizer
                </h1>
                <p class="text-green-700 mt-4 text-lg">
                    Quickly generate summaries of your PDF documents
                </p>
            </div>

            <!-- Upload Form -->
            <form id="upload-form" class="space-y-6" enctype="multipart/form-data">
                <!-- File Upload -->
                <div class="flex items-center justify-center w-full" data-aos="fade-up">
                    <label for="file" class="file-upload-label relative flex flex-col items-center justify-center w-full h-48 sm:h-64 border-4 border-dashed rounded-2xl cursor-pointer bg-white hover:bg-gray-50 transition duration-500 ease-in-out transform hover:scale-105 glass-effect">
                        <div class="flex flex-col items-center justify-center">
                            <i class="fas fa-cloud-upload-alt text-5xl sm:text-7xl text-blue-500 mb-4 animate-bounce"></i>
                            <p class="mb-2 text-base sm:text-lg text-gray-700 text-center">
                                <span class="font-semibold">Click to upload</span>
                                or drag and drop
                            </p>
                            <p class="text-sm text-gray-500">
                                PDF files only (Max 10MB)
                            </p>
                        </div>
                        <input id="file" name="file" type="file" class="absolute inset-0 opacity-0 cursor-pointer" accept=".pdf"/>
                    </label>
                </div>

                <!-- File Preview -->
                <div id="file-preview" class="hidden bg-gray-50 p-4 rounded-lg border border-gray-200 glass-effect" data-aos="fade-up">
                    <h3 class="font-semibold text-gray-700 mb-2">
                        Selected File:
                    </h3>
                    <div class="flex items-center">
                        <i class="far fa-file-pdf text-red-500 text-2xl mr-2"></i>
                        <span id="file-name" class="text-gray-800"></span>
                    </div>
                </div>

                <!-- Upload and Summarize Button -->
                <button type="button" id="upload-button" class="w-full bg-gradient-to-r from-purple-500 to-pink-500 text-white py-4 px-6 rounded-xl font-bold shadow-lg hover:from-purple-600 hover:to-pink-600 transition duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-105 focus:outline-none focus:ring-4 focus:ring-purple-200 hover-effect" data-aos="zoom-in-up">
                    Upload and Summarize PDF
                </button>
            </form>

            <!-- Loading Indicator -->
            <div id="loading" class="hidden mt-8 flex flex-col items-center" data-aos="fade-up">
                <div class="loader ease-linear rounded-full border-8 border-t-8 border-gray-200 h-16 w-16 mb-4"></div>
                <p class="text-lg font-medium text-gray-700 mb-2">
                    Processing your PDF, please wait...
                </p>
                <p class="text-sm text-gray-600">
                    Processing large PDFs may take several minutes
                </p>
                <p id="progress-text" class="text-sm text-gray-600 mt-2"></p>
            </div>

            <!-- Result Section -->
            <div id="result" class="hidden mt-8 animate-fade-in" data-aos="fade-up">
                <h2 class="text-3xl font-semibold mb-4 text-gray-800">
                    Your Summary is Ready!
                </h2>
                <div class="mb-4">
                    <p class="text-lg text-gray-700">
                        Total pages processed: <span id="total-pages" class="font-semibold">0</span>
                    </p>
                    <p class="text-lg text-gray-700">
                        Processing time: <span id="processing-time" class="font-semibold">0</span> seconds
                    </p>
                </div>
                <button id="download-button" class="inline-flex items-center bg-green-500 text-white py-3 px-6 rounded-xl font-semibold shadow-lg hover:bg-green-600 transition duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-105 focus:outline-none focus:ring-4 focus:ring-green-200 hover-effect">
                    <i class="fas fa-download mr-2"></i> Download Summary
                </button>
            </div>
        </div>
    </div>
    <!-- AOS JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script>
    <!-- Initialize AOS -->
    <script>
        AOS.init({
            duration: 1000,
            once: true,
        });
    </script>
    <!-- Initialize Firebase -->
    <script>
        // Initialize Firebase with the passed config
        const firebaseConfig = {{ firebase_config | safe }};
        firebase.initializeApp(firebaseConfig);
        const storage = firebase.storage();
    </script>
    <script>
        const form = document.getElementById('upload-form');
        const fileUpload = document.getElementById('file');
        const filePreview = document.getElementById('file-preview');
        const fileName = document.getElementById('file-name');
        const uploadButton = document.getElementById('upload-button');
        const loading = document.getElementById('loading');
        const result = document.getElementById('result');
        const downloadButton = document.getElementById('download-button');
        const quoteElement = document.getElementById('quote');
        const progressText = document.getElementById('progress-text');

        // Random Fonts and Colors
        const fonts = [
            'Dancing Script',
            'Kaushan Script',
            'Montserrat',
            'Roboto',
            'Courier New',
            'Georgia',
            'Times New Roman',
        ];
        const colors = [
            '#ff6b6b',
            '#feca57',
            '#48dbfb',
            '#1dd1a1',
            '#5f27cd',
            '#222f3e',
            '#ee5253',
            '#0abde3',
            '#10ac84',
            '#341f97',
        ];

        // Apply Random Font and Color to Quote
        function styleQuote() {
            const randomFont =
                fonts[Math.floor(Math.random() * fonts.length)];
            const randomColor =
                colors[Math.floor(Math.random() * colors.length)];
            quoteElement.style.fontFamily = randomFont;
            quoteElement.style.color = randomColor;
            gsap.from(quoteElement, {
                opacity: 0,
                y: -20,
                duration: 1,
                ease: "bounce.out",
            });
        }

        // Fetch Quote from Server
        async function fetchQuote() {
            try {
                const response = await fetch('/quote');
                if (response.ok) {
                    const data = await response.json();
                    quoteElement.textContent = `${data.quote}`;
                    styleQuote();
                } else {
                    quoteElement.textContent =
                        'Error fetching quote. Please try again later.';
                }
            } catch (error) {
                quoteElement.textContent =
                    'Error fetching quote. Please try again later.';
            }
        }

        // Load Quote on Page Load
        window.addEventListener('load', fetchQuote);

        // File Upload Preview
        fileUpload.addEventListener('change', (e) => {
            const file = e.target.files[0];
            if (file) {
                fileName.textContent = file.name;
                filePreview.classList.remove('hidden');
                gsap.from(filePreview, {
                    opacity: 0,
                    y: -20,
                    duration: 0.5,
                });
            }
        });

        // Upload and Summarize Button Click
        uploadButton.addEventListener('click', async () => {
            const fileInput = document.getElementById('file');
            const file = fileInput.files[0];

            if (!file) {
                alert('Please select a PDF file to upload.');
                return;
            }

            if (file.size > 10 * 1024 * 1024) { // 10MB limit
                alert('File size exceeds 10MB limit.');
                return;
            }

            const storageRef = storage.ref();
            const fileRef = storageRef.child(`pdfs/${Date.now()}_${file.name}`);

            // Show loading
            form.classList.add('hidden');
            loading.classList.remove('hidden');
            progressText.textContent = 'Uploading file...';

            try {
                // Upload file
                const uploadTask = fileRef.put(file);

                uploadTask.on('state_changed', 
                    (snapshot) => {
                        const progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
                        progressText.textContent = `Upload is ${progress.toFixed(2)}% done...`;
                    }, 
                    (error) => {
                        console.error('Upload error:', error);
                        alert('An error occurred during file upload.');
                        loading.classList.add('hidden');
                        form.classList.remove('hidden');
                    }, 
                    async () => {
                        const downloadURL = await fileRef.getDownloadURL();
                        progressText.textContent = 'Upload completed. Initiating processing...';

                        // Notify the server with the download URL
                        const response = await fetch('/notify_upload', {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json'
                            },
                            body: JSON.stringify({ file_url: downloadURL })
                        });

                        if (response.ok) {
                            const data = await response.json();
                            const pdfId = data.pdf_id;
                            progressText.textContent = 'Processing your PDF...';
                            await processingLoop(pdfId);
                        } else {
                            throw new Error('Server failed to initiate processing.');
                        }
                    }
                );
            } catch (error) {
                console.error('Error:', error);
                alert('An error occurred. Please try again.');
                loading.classList.add('hidden');
                form.classList.remove('hidden');
            }
        });

        // Processing Loop to Poll Backend
        async function processingLoop(pdfId) {
            try {
                const response = await fetch(`/process_pdf`, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ pdf_id: pdfId }),
                });

                if (response.ok) {
                    const data = await response.json();
                    if (data.status === 'completed') {
                        await checkStatus(pdfId);
                    } else if (data.status === 'processing') {
                        progressText.textContent = `Processed ${data.current_page} of ${data.total_pages} pages...`;
                        // Call process_pdf again after a short delay
                        setTimeout(() => processingLoop(pdfId), 1000);
                    } else if (data.status === 'failed') {
                        throw new Error(data.reason || 'Processing failed');
                    } else {
                        throw new Error('Unknown status');
                    }
                } else {
                    throw new Error('Processing failed');
                }
            } catch (error) {
                console.error('Error:', error);
                alert('An error occurred during processing. Please try again later.');
                loading.classList.add('hidden');
                form.classList.remove('hidden');
            }
        }

        // Check Status and Download
        async function checkStatus(pdfId) {
            try {
                const response = await fetch(`/check_status?pdf_id=${pdfId}`);
                if (response.ok) {
                    const data = await response.json();
                    if (data.status === 'completed') {
                        // Hide loading and show result
                        loading.classList.add('hidden');
                        result.classList.remove('hidden');
                        triggerConfetti();

                        // Update UI with processing details
                        document.getElementById('total-pages').textContent = data.total_pages;
                        document.getElementById('processing-time').textContent = data.processing_time !== 'N/A' ? `${data.processing_time} seconds` : 'N/A';
                    
                        // Create blob from base64 data
                        const binaryData = atob(data.docx);
                        const array = new Uint8Array(binaryData.length);
                        for (let i = 0; i < binaryData.length; i++) {
                            array[i] = binaryData.charCodeAt(i);
                        }
                        const blob = new Blob([array], {type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'});
                        const url = window.URL.createObjectURL(blob);

                        // Set up download button
                        downloadButton.addEventListener('click', () => {
                            const link = document.createElement('a');
                            link.href = url;
                            link.download = 'summary.docx';
                            document.body.appendChild(link);
                            link.click();
                            document.body.removeChild(link);
                        });
                    } else if (data.status === 'processing') {
                        // Update progress text
                        progressText.textContent = `Processed ${data.current_page} of ${data.total_pages} pages...`;
                        // Poll for status again
                        setTimeout(() => checkStatus(pdfId), 1000);
                    } else if (data.status === 'failed') {
                        throw new Error(data.reason || 'Processing failed');
                    } else {
                        throw new Error('Unknown status');
                    }
                } else {
                    throw new Error('Failed to check status');
                }
            } catch (error) {
                console.error('Error:', error);
                alert('An error occurred while checking the status. Please try again later.');
                loading.classList.add('hidden');
                form.classList.remove('hidden');
            }
        }

        // Particle effect
        particlesJS("particles-js", {
            particles: {
                number: { value: 80, density: { enable: true, value_area: 800 } },
                color: { value: "#ffffff" },
                shape: { type: "circle", stroke: { width: 0, color: "#000000" }, polygon: { nb_sides: 5 } },
                opacity: { value: 0.5, random: false, anim: { enable: false, speed: 1, opacity_min: 0.1, sync: false } },
                size: { value: 3, random: true, anim: { enable: false, speed: 40, size_min: 0.1, sync: false } },
                line_linked: { enable: true, distance: 150, color: "#ffffff", opacity: 0.4, width: 1 },
                move: { enable: true, speed: 6, direction: "none", random: false, straight: false, out_mode: "out", bounce: false, attract: { enable: false, rotateX: 600, rotateY: 1200 } }
            },
            interactivity: {
                detect_on: "canvas",
                events: { onhover: { enable: true, mode: "repulse" }, onclick: { enable: true, mode: "push" }, resize: true },
                modes: { grab: { distance: 400, line_linked: { opacity: 1 } }, bubble: { distance: 400, size: 40, duration: 2, opacity: 8, speed: 3 }, repulse: { distance: 200, duration: 0.4 }, push: { particles_nb: 4 }, remove: { particles_nb: 2 } }
            },
            retina_detect: true
        });

        // Typewriter effect for the title
        const titleElement = document.getElementById('title');
        new Typewriter(titleElement, {
            strings: ['PDF Summarizer'],
            autoStart: true,
            loop: true,
            delay: 75,
            deleteSpeed: 50,
        });

        // Confetti effect on successful upload
        function triggerConfetti() {
            confetti({
                particleCount: 100,
                spread: 70,
                origin: { y: 0.6 }
            });
        }

        // Add smooth scrolling to all links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();

                document.querySelector(this.getAttribute('href')).scrollIntoView({
                    behavior: 'smooth'
                });
            });
        });

        // Add hover effect to buttons
        const buttons = document.querySelectorAll('button, a');
        buttons.forEach(button => {
            button.addEventListener('mouseenter', () => {
                gsap.to(button, { scale: 1.05, duration: 0.3 });
            });
            button.addEventListener('mouseleave', () => {
                gsap.to(button, { scale: 1, duration: 0.3 });
            });
        });

        // Add a subtle animation to the quote section
        gsap.to('.animated-bg', {
            backgroundPosition: '100% 50%',
            duration: 10,
            repeat: -1,
            yoyo: true,
            ease: 'power1.inOut'
        });
    </script>
</body>
</html>
"