YaTharThShaRma999
/

finetunedmodel

PEFT

Model card Files Files and versions

xet

Community

YaTharThShaRma999 commited on Aug 18, 2025

Commit

ed9ee9b

verified ·

1 Parent(s): e06b00c

Create test.html

Browse files

Files changed (1) hide show

test.html +674 -0

test.html ADDED Viewed

	@@ -0,0 +1,674 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Voice Assistant</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap" rel="stylesheet">
+    <style>
+        /* Base styles for body - now the main canvas */
+        body {
+            font-family: 'Inter', sans-serif;
+            /* Soft, calming gradient background */
+            background: linear-gradient(135deg, #e0f7fa 0%, #e8f5e9 100%); /* Very light aqua to very light green */
+            display: flex;
+            flex-direction: column; /* Arrange content vertically */
+            justify-content: center;
+            align-items: center;
+            min-height: 100vh;
+            margin: 0;
+            padding: 20px;
+            box-sizing: border-box;
+            overflow: hidden; /* Prevent scrollbar from background */
+            position: relative;
+            gap: 2.5rem; /* Spacing between elements */
+            animation: fadeIn 0.9s ease-out forwards; /* Fade in the whole page */
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(30px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        /* Animated background elements for a more dynamic look */
+        body::before, body::after {
+            content: '';
+            position: absolute;
+            border-radius: 50%;
+            opacity: 0.5; /* Softer opacity for background glows */
+            filter: blur(150px); /* Even more blur for a smoother, larger glow */
+            z-index: -1; /* Ensure they stay behind content */
+        }
+        body::before {
+            width: 450px;
+            height: 450px;
+            background: #4dd0e1; /* Cyan */
+            top: 5%;
+            left: 10%;
+            animation: moveBlob1 25s infinite alternate ease-in-out; /* Slower, calmer animation */
+        }
+        body::after {
+            width: 550px;
+            height: 550px;
+            background: #a5d6a7; /* Light Green */
+            bottom: 5%;
+            right: 8%;
+            animation: moveBlob2 28s infinite alternate-reverse ease-in-out; /* Slower, calmer animation */
+        }
+        @keyframes moveBlob1 {
+            0% { transform: translate(0, 0) scale(1); }
+            33% { transform: translate(70px, -50px) scale(1.08); }
+            66% { transform: translate(-40px, 60px) scale(0.95); }
+            100% { transform: translate(0, 0) scale(1); }
+        }
+        @keyframes moveBlob2 {
+            0% { transform: translate(0, 0) scale(1); }
+            33% { transform: translate(-60px, 80px) scale(0.9); }
+            66% { transform: translate(50px, -70px) scale(1.1); }
+            100% { transform: translate(0, 0) scale(1); }
+        }
+        /* Main title styling */
+        h1 {
+            color: #37474f; /* Dark text for contrast on light background */
+            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.08); /* Subtle text shadow */
+            margin-bottom: 0; /* Adjust spacing as body handles gap */
+        }
+        /* Status text styling */
+        .status-text {
+            font-size: 2rem; /* Even larger font for main status */
+            color: #546e7a; /* Muted dark gray for status */
+            font-weight: 700;
+            min-height: 3.5rem; /* Reserve more space to prevent CLS */
+            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* Subtle text shadow */
+        }
+        /* Microphone Button Styling */
+        .microphone-button {
+            width: 160px; /* Even larger button */
+            height: 160px;
+            border-radius: 50%;
+            /* Default: subtle, almost translucent white with a light inner glow */
+            background: rgba(255, 255, 255, 0.9); /* Very subtle transparency */
+            color: #546e7a; /* Muted gray for default icon */
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 4rem; /* Larger icon */
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1), inset 0 0 20px rgba(255, 255, 255, 0.5); /* Stronger outer shadow, subtle inner glow */
+            cursor: pointer;
+            transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
+            position: relative;
+            overflow: hidden;
+            border: none;
+            margin: 0 auto; /* Center the button */
+        }
+        .microphone-button:hover {
+            transform: translateY(-5px) scale(1.05); /* More pronounced lift and grow */
+            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15), inset 0 0 25px rgba(255, 255, 255, 0.7);
+        }
+        .microphone-button:active {
+            transform: translateY(0) scale(0.98);
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+        }
+        /* Active states for microphone button */
+        .microphone-button.listening {
+            animation: pulse-active 2.5s infinite ease-in-out; /* Slower, more ethereal pulse */
+            background: linear-gradient(45deg, #26c6da, #80deea); /* Cyan gradient */
+            color: white; /* White icon when active */
+            box-shadow: 0 15px 30px rgba(38, 198, 218, 0.4), inset 0 0 30px rgba(255, 255, 255, 0.5); /* Soft cyan glow */
+        }
+        .microphone-button.speaking {
+            animation: pulse-active 2.5s infinite ease-in-out;
+            background: linear-gradient(45deg, #66bb6a, #81c784); /* Light green gradient */
+            color: white; /* White icon when active */
+            box-shadow: 0 15px 30px rgba(102, 187, 106, 0.4), inset 0 0 30px rgba(255, 255, 255, 0.5); /* Soft green glow */
+        }
+        .microphone-button.disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+            transform: none;
+            box-shadow: none;
+            background: #e0e0e0; /* Light gray for disabled */
+            color: #9e9e9e; /* Darker muted gray */
+            animation: none;
+        }
+        /* Specific pulse animation for active states */
+        @keyframes pulse-active {
+            0% { transform: scale(1); box-shadow: 0 0 0 0 currentColor; }
+            70% { transform: scale(1.08); box-shadow: 0 0 0 45px rgba(38, 198, 218, 0); } /* Uses currentColor for dynamic color */
+            100% { transform: scale(1); box-shadow: 0 0 0 0 currentColor; }
+        }
+        /* SVG Icon styling */
+        .icon {
+            width: 4rem; /* Match button size */
+            height: 4rem;
+            fill: currentColor; /* Inherit color from parent button */
+        }
+        /* Toast Notification System */
+        #toastContainer {
+            position: fixed;
+            top: 20px;
+            right: 20px;
+            z-index: 1001;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            max-width: 300px;
+        }
+        .toast-message {
+            background-color: rgba(0, 0, 0, 0.75); /* Darker toast background for contrast */
+            color: white;
+            padding: 12px 20px;
+            border-radius: 8px;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+            opacity: 0;
+            transform: translateX(100%);
+            animation: slideIn 0.5s forwards, fadeOut 0.5s 2.5s forwards;
+            font-size: 0.9rem;
+            font-weight: 500;
+        }
+        @keyframes slideIn {
+            to { opacity: 1; transform: translateX(0); }
+        }
+        @keyframes fadeOut {
+            from { opacity: 1; }
+            to { opacity: 0; transform: translateX(100%); }
+        }
+        /* Custom Alert Modal (for critical errors) - adjusted for new light theme */
+        .modal {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.6); /* Softer overlay */
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            z-index: 1000;
+            opacity: 0;
+            visibility: hidden;
+            transition: opacity 0.4s ease, visibility 0.4s ease;
+        }
+        .modal.show {
+            opacity: 1;
+            visibility: visible;
+        }
+        .modal-content {
+            background-color: white; /* White modal content */
+            color: #37474f; /* Dark text */
+            padding: 3rem;
+            border-radius: 2rem;
+            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); /* Softer shadow */
+            text-align: center;
+            max-width: 500px;
+            width: 90%;
+            transform: translateY(-50px) scale(0.9);
+            transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55), opacity 0.4s ease;
+            /* No border */
+        }
+        .modal.show .modal-content {
+            transform: translateY(0) scale(1);
+        }
+        .modal-button {
+            background: linear-gradient(45deg, #4dd0e1, #26c6da); /* Calming blue/cyan gradient for modal button */
+            color: white;
+            padding: 0.8rem 1.8rem;
+            border-radius: 1rem;
+            margin-top: 2rem;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            font-weight: 600;
+            border: none;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+        }
+        .modal-button:hover {
+            background: linear-gradient(45deg, #00acc1, #4dd0e1);
+            transform: translateY(-2px);
+            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
+        }
+        /* New Styles for More Options panel */
+        .options-button {
+            position: fixed;
+            top: 20px;
+            left: 20px;
+            background: rgba(255, 255, 255, 0.8);
+            backdrop-filter: blur(10px);
+            padding: 0.75rem 1.25rem;
+            border-radius: 1.5rem;
+            font-weight: 600;
+            color: #37474f;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+            cursor: pointer;
+            transition: all 0.3s ease;
+            z-index: 10;
+        }
+        .options-button:hover {
+            background: white;
+            transform: translateY(-2px);
+            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
+        }
+        .settings-panel {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 350px;
+            height: 100vh;
+            padding: 4rem 2.5rem;
+            background: rgba(255, 255, 255, 0.75);
+            backdrop-filter: blur(20px);
+            -webkit-backdrop-filter: blur(20px);
+            box-shadow: 5px 0 30px rgba(0, 0, 0, 0.2);
+            transform: translateX(-100%);
+            transition: transform 0.5s cubic-bezier(0.7, 0, 0.3, 1);
+            z-index: 9;
+            display: flex;
+            flex-direction: column;
+            gap: 2rem;
+        }
+        .settings-panel.open {
+            transform: translateX(0);
+        }
+    </style>
+</head>
+<body>
+    <h1 class="text-5xl font-extrabold mb-4 text-shadow-lg">Voice Assistant</h1>
+    <div class="flex flex-col items-center gap-2">
+        <p id="statusText" class="status-text">Tap to speak</p>
+    </div>
+    <button id="microphoneButton" class="microphone-button">
+        <svg class="icon" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+            <path d="M12 2C10.9 2 10 2.9 10 4v8c0 1.1.9 2 2 2s2-.9 2-2V4c0-1.1-.9-2-2-2zm-1 17.92V22h2v-2.08c3.61-.49 6.4-3.5 6.4-7.42h-2c0 3.03-2.47 5.5-5.5 5.5S6.6 15.53 6.6 12H4.6c0 3.92 2.79 6.93 6.4 7.42z"/>
+        </svg>
+    </button>
+    <audio id="audio_output_component_id" autoplay class="hidden"></audio>
+    <button id="optionsButton" class="options-button">More Options</button>
+    <div id="settingsPanel" class="settings-panel">
+        <h2 class="text-3xl font-extrabold text-gray-800">Settings</h2>
+        <div class="flex flex-col gap-4">
+            <h3 class="text-xl font-bold text-gray-600">Upload File</h3>
+            <p class="text-sm text-gray-500">Upload a file to be used by the assistant.</p>
+            <input type="file" id="fileInput" class="rounded-lg p-2 text-gray-700 bg-gray-100 border border-gray-300">
+            <button id="uploadButton" class="btn bg-gray-700 text-white p-3 rounded-xl transition hover:bg-gray-800 disabled:opacity-50 disabled:cursor-not-allowed">Upload File</button>
+        </div>
+        <div id="fileUploadStatus" class="text-sm text-gray-700 mt-4"></div>
+    </div>
+    <div id="toastContainer"></div>
+    <div id="customAlertModal" class="modal">
+        <div class="modal-content">
+            <p id="alertMessage" class="text-2xl font-semibold"></p>
+            <button id="alertCloseButton" class="modal-button">OK</button>
+        </div>
+    </div>
+    <script type="module">
+        // Firebase imports
+        import { initializeApp } from "https://www.gstatic.com/firebasejs/11.6.1/firebase-app.js";
+        import { getAuth, signInAnonymously, signInWithCustomToken, onAuthStateChanged } from "https://www.gstatic.com/firebasejs/11.6.1/firebase-auth.js";
+        import { getFirestore } from "https://www.gstatic.com/firebasejs/11.6.1/firebase-firestore.js";
+        // Global WebRTC variables
+        let pc; // RTCPeerConnection instance
+        let localStream; // User's microphone stream
+        let webrtc_id; // Unique ID for this WebRTC session
+        let isWebRTCConnected = false; // Track connection state
+        let isListening = false; // Track if microphone is active for listening
+        // ** Explicitly define the signaling server URL **
+        const SIGNALING_SERVER_URL = 'https://c71505dfda9a.ngrok-free.app'; // Base URL
+        // Firebase variables
+        let db;
+        let auth;
+        let userId; // userId will still be used internally for signaling
+        // ** Your Firebase configuration **
+        const firebaseConfig = {
+          apiKey: "AIzaSyBWv5gIXhyHMIzBCH5oFDlSsJhXWzov-ms",
+          authDomain: "test2-947ce.firebaseapp.com",
+          projectId: "test2-947ce",
+          storageBucket: "test2-947ce.firebasestorage.app",
+          messagingSenderId: "211407958561",
+          appId: "1:211407958561:web:ea24b5a4da5e1053a5e960",
+          measurementId: "G-673MR7TX2C"
+        };
+        const appId = firebaseConfig.appId;
+        // UI Elements
+        const microphoneButton = document.getElementById('microphoneButton');
+        const statusText = document.getElementById('statusText');
+        const audioOutputComponent = document.getElementById("audio_output_component_id");
+        const customAlertModal = document.getElementById('customAlertModal');
+        const alertMessage = document.getElementById('alertMessage');
+        const alertCloseButton = document.getElementById('alertCloseButton');
+        const toastContainer = document.getElementById('toastContainer');
+        const optionsButton = document.getElementById('optionsButton');
+        const settingsPanel = document.getElementById('settingsPanel');
+        const fileInput = document.getElementById('fileInput');
+        const uploadButton = document.getElementById('uploadButton');
+        const fileUploadStatus = document.getElementById('fileUploadStatus');
+        /**
+         * Displays a custom alert modal instead of window.alert().
+         * Used for critical errors that require user attention.
+         * @param {string} message The message to display.
+         */
+        function showAlert(message) {
+            alertMessage.textContent = message;
+            customAlertModal.classList.add('show');
+        }
+        // Close the custom alert modal
+        alertCloseButton.addEventListener('click', () => {
+            customAlertModal.classList.remove('show');
+        });
+        /**
+         * Displays a transient toast message in the top-right corner.
+         * @param {string} message The message to display.
+         * @param {number} duration The duration in milliseconds for the toast to be visible (default: 3000ms).
+         */
+        function showToast(message, duration = 3000) {
+            const toast = document.createElement('div');
+            toast.classList.add('toast-message');
+            toast.textContent = message;
+            toastContainer.appendChild(toast);
+            setTimeout(() => {
+                toast.remove();
+            }, duration);
+        }
+        /**
+         * Updates the main status text on the UI.
+         * @param {string} text The status message.
+         */
+        function updateStatus(text) {
+            statusText.textContent = text;
+        }
+        /**
+         * Initializes Firebase and authenticates the user.
+         */
+        async function initializeFirebase() {
+            try {
+                const app = initializeApp(firebaseConfig);
+                auth = getAuth(app);
+                db = getFirestore(app);
+                onAuthStateChanged(auth, async (user) => {
+                    if (user) {
+                        userId = user.uid;
+                        // User ID is no longer displayed on UI, but kept for internal use.
+                    } else {
+                        try {
+                            if (typeof __initial_auth_token !== 'undefined' && __initial_auth_token) {
+                                await signInWithCustomToken(auth, __initial_auth_token);
+                            } else {
+                                await signInAnonymously(auth);
+                            }
+                        } catch (error) {
+                            console.error("Firebase Auth Error:", error);
+                            showAlert(`Firebase authentication failed: ${error.message}`);
+                        }
+                    }
+                });
+            } catch (error) {
+                console.error("Error initializing Firebase:", error);
+                showAlert(`Failed to initialize Firebase: ${error.message}`);
+            }
+        }
+        /**
+         * Sets up the WebRTC peer connection.
+         */
+        async function startWebRTC() {
+            if (isWebRTCConnected) {
+                showToast('WebRTC is already connected.');
+                return;
+            }
+            try {
+                updateStatus('Connecting...');
+                microphoneButton.classList.add('disabled'); // Disable button during connection setup
+                showToast('Initializing connection...');
+                pc = new RTCPeerConnection({
+                    iceServers: [
+                        { urls: 'stun:stun.l.google.com:19302' }
+                    ]
+                });
+                localStream = await navigator.mediaDevices.getUserMedia({ audio: true });
+                showToast('Microphone access granted.');
+                localStream.getTracks().forEach((track) => {
+                    pc.addTrack(track, localStream);
+                });
+                pc.addEventListener("track", (evt) => {
+                    if (audioOutputComponent && audioOutputComponent.srcObject !== evt.streams[0]) {
+                        audioOutputComponent.srcObject = evt.streams[0];
+                        audioOutputComponent.play().then(() => {
+                            showToast('Assistant is speaking...');
+                            updateStatus('Speaking...');
+                            microphoneButton.classList.remove('listening');
+                            microphoneButton.classList.add('speaking');
+                        }).catch(e => console.error("Error playing audio:", e));
+                        // Listen for when audio finishes playing
+                        audioOutputComponent.onended = () => {
+                            updateStatus('Listening...');
+                            microphoneButton.classList.remove('speaking');
+                            microphoneButton.classList.add('listening');
+                            showToast('Ready for your next command.');
+                        };
+                    }
+                });
+                const dataChannel = pc.createDataChannel("text");
+                dataChannel.onopen = () => showToast('Data channel opened.');
+                dataChannel.onclose = () => showToast('Data channel closed.');
+                dataChannel.onerror = (err) => showToast(`Data channel error: ${err.message}`, 5000);
+                webrtc_id = Math.random().toString(36).substring(7);
+                pc.onicecandidate = ({ candidate }) => {
+                    if (candidate) {
+                        fetch(`${SIGNALING_SERVER_URL}/webrtc/offer`, {
+                            method: 'POST',
+                            headers: { 'Content-Type': 'application/json' },
+                            body: JSON.stringify({
+                                candidate: candidate.toJSON(),
+                                webrtc_id: webrtc_id,
+                                type: "ice-candidate",
+                                userId: userId
+                            })
+                        })
+                        .then(response => {
+                            if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
+                            return response.json();
+                        })
+                        .catch(error => showToast(`Error sending ICE candidate: ${error.message}`, 5000));
+                    }
+                };
+                const offer = await pc.createOffer();
+                await pc.setLocalDescription(offer);
+                const response = await fetch(`${SIGNALING_SERVER_URL}/webrtc/offer`, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({
+                        sdp: offer.sdp,
+                        type: offer.type,
+                        webrtc_id: webrtc_id,
+                        userId: userId
+                    })
+                });
+                const serverResponse = await response.json();
+                // FIX: Explicitly create RTCSessionDescription with type 'answer'
+                await pc.setRemoteDescription(new RTCSessionDescription({ type: 'answer', sdp: serverResponse.sdp }));
+                isWebRTCConnected = true;
+                microphoneButton.classList.remove('disabled');
+                microphoneButton.classList.add('listening'); // Indicate ready to listen
+                updateStatus('Listening...');
+                showToast('WebRTC connected. Tap to speak!');
+                pc.onconnectionstatechange = () => {
+                    if (pc.connectionState === 'disconnected' || pc.connectionState === 'failed' || pc.connectionState === 'closed') {
+                        showToast('WebRTC connection lost or failed.', 5000);
+                        stopWebRTC();
+                    } else if (pc.connectionState === 'connected') {
+                        updateStatus('Listening...');
+                        microphoneButton.classList.add('listening');
+                        microphoneButton.classList.remove('speaking');
+                    }
+                };
+            } catch (error) {
+                console.error("Error setting up WebRTC:", error);
+                showAlert(`Failed to start WebRTC: ${error.message}. Please ensure your microphone is available and try again.`);
+                updateStatus('Error');
+                microphoneButton.classList.remove('disabled', 'listening', 'speaking');
+                stopWebRTC(); // Clean up if setup fails
+            }
+        }
+        /**
+         * Stops the WebRTC peer connection.
+         */
+        function stopWebRTC() {
+            if (!isWebRTCConnected && !pc) {
+                showToast('WebRTC is already stopped.');
+                return;
+            }
+            updateStatus('Stopping...');
+            showToast('Stopping connection...');
+            if (localStream) {
+                localStream.getTracks().forEach(track => track.stop());
+                localStream = null;
+            }
+            if (pc && pc.connectionState !== 'closed') {
+                pc.close();
+            }
+            pc = null;
+            if (audioOutputComponent) {
+                audioOutputComponent.srcObject = null;
+                audioOutputComponent.pause();
+                audioOutputComponent.currentTime = 0;
+            }
+            isWebRTCConnected = false;
+            isListening = false;
+            microphoneButton.classList.remove('listening', 'speaking', 'disabled');
+            updateStatus('Tap to speak');
+            showToast('WebRTC connection ended.');
+        }
+        /**
+         * Toggles the WebRTC connection based on its current state.
+         */
+        async function toggleWebRTC() {
+            if (isWebRTCConnected) {
+                stopWebRTC();
+            } else {
+                await startWebRTC();
+            }
+        }
+        // Event Listener for the central microphone button
+        microphoneButton.addEventListener('click', toggleWebRTC);
+        // Options panel logic
+        optionsButton.addEventListener('click', () => {
+            settingsPanel.classList.toggle('open');
+        });
+        // File upload logic
+        uploadButton.addEventListener('click', async () => {
+            const file = fileInput.files[0];
+            if (!file) {
+                fileUploadStatus.textContent = 'Please select a file to upload.';
+                return;
+            }
+            if (!userId) {
+                fileUploadStatus.textContent = 'Authentication not ready, please wait.';
+                return;
+            }
+            fileUploadStatus.textContent = 'Uploading...';
+            uploadButton.disabled = true;
+            const reader = new FileReader();
+            reader.onload = async function(event) {
+                const base64String = event.target.result.split(',')[1];
+                try {
+                    const response = await fetch(`${SIGNALING_SERVER_URL}/settings`, {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify({
+                            userId: userId,
+                            fileName: file.name,
+                            fileType: file.type,
+                            voice_cloning_file: base64String // Changed key name here
+                        })
+                    });
+                    if (response.ok) {
+                        fileUploadStatus.textContent = `File "${file.name}" uploaded successfully!`;
+                        fileInput.value = ''; // Clear the file input
+                        showToast('Settings updated with file upload!');
+                    } else {
+                        const errorData = await response.json();
+                        fileUploadStatus.textContent = `Upload failed: ${errorData.error}`;
+                        showToast('File upload failed.', 5000);
+                    }
+                } catch (error) {
+                    fileUploadStatus.textContent = `An error occurred: ${error.message}`;
+                    showToast('An error occurred during upload.', 5000);
+                } finally {
+                    uploadButton.disabled = false;
+                }
+            };
+            reader.readAsDataURL(file);
+        });
+        // Initialize Firebase when the window loads
+        window.onload = initializeFirebase;
+    </script>
+</body>
+</html>