Spaces:

UjjwalK
/

my-space

Running

App Files Files Community

UjjwalK commited on Apr 1

Commit

ab44995

verified ·

1 Parent(s): e6bc8b0

Add 1 files

Browse files

Files changed (1) hide show

index.html +121 -267

index.html CHANGED Viewed

@@ -57,6 +57,35 @@
         .typing-dot:nth-child(3) {
             animation-delay: 0.6s;
         }
     </style>
 </head>
 <body class="bg-gray-100 font-sans">
@@ -69,15 +98,15 @@
                 </div>
                 <div>
                     <h1 class="text-2xl font-bold text-gray-800">Knowledge Base Assistant</h1>
-                    <p class="text-gray-600">Ask me anything from our documentation</p>
                 </div>
             </div>
             <div class="flex space-x-2">
                 <button id="clearChat" class="px-4 py-2 bg-gray-200 hover:bg-gray-300 rounded-lg text-gray-700 transition">
                     <i class="fas fa-trash-alt mr-2"></i>Clear
                 </button>
-                <button class="px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg text-white transition">
-                    <i class="fas fa-book mr-2"></i>Knowledge Base
                 </button>
             </div>
         </header>
@@ -85,59 +114,34 @@
         <!-- Main Chat Area -->
         <div class="bg-white rounded-xl shadow-lg overflow-hidden">
             <div class="flex h-[70vh]">
-                <!-- Sidebar with categories -->
                 <div class="w-64 bg-gray-50 border-r border-gray-200 p-4 hidden md:block">
                     <div class="mb-6">
-                        <h3 class="font-semibold text-gray-700 mb-3">Categories</h3>
-                        <ul class="space-y-2">
-                            <li>
-                                <button class="category-btn w-full text-left px-3 py-2 rounded-lg bg-blue-100 text-blue-700 font-medium">
-                                    <i class="fas fa-cog mr-2"></i>Getting Started
-                                </button>
-                            </li>
-                            <li>
-                                <button class="category-btn w-full text-left px-3 py-2 rounded-lg hover:bg-gray-100 text-gray-700 transition">
-                                    <i class="fas fa-user mr-2"></i>User Guide
-                                </button>
-                            </li>
-                            <li>
-                                <button class="category-btn w-full text-left px-3 py-2 rounded-lg hover:bg-gray-100 text-gray-700 transition">
-                                    <i class="fas fa-tools mr-2"></i>Troubleshooting
-                                </button>
-                            </li>
-                            <li>
-                                <button class="category-btn w-full text-left px-3 py-2 rounded-lg hover:bg-gray-100 text-gray-700 transition">
-                                    <i class="fas fa-shield-alt mr-2"></i>Security
-                                </button>
-                            </li>
-                            <li>
-                                <button class="category-btn w-full text-left px-3 py-2 rounded-lg hover:bg-gray-100 text-gray-700 transition">
-                                    <i class="fas fa-chart-line mr-2"></i>API Reference
-                                </button>
-                            </li>
-                        </ul>
                     </div>
                     <div>
-                        <h3 class="font-semibold text-gray-700 mb-3">Popular Questions</h3>
                         <ul class="space-y-2">
                             <li>
                                 <button class="suggested-question w-full text-left px-3 py-2 text-sm rounded-lg hover:bg-gray-100 text-gray-600 transition">
-                                    How do I reset my password?
                                 </button>
                             </li>
                             <li>
                                 <button class="suggested-question w-full text-left px-3 py-2 text-sm rounded-lg hover:bg-gray-100 text-gray-600 transition">
-                                    Where can I download the mobile app?
                                 </button>
                             </li>
                             <li>
                                 <button class="suggested-question w-full text-left px-3 py-2 text-sm rounded-lg hover:bg-gray-100 text-gray-600 transition">
-                                    What are the system requirements?
-                                </button>
-                            </li>
-                            <li>
-                                <button class="suggested-question w-full text-left px-3 py-2 text-sm rounded-lg hover:bg-gray-100 text-gray-600 transition">
-                                    How to enable two-factor authentication?
                                 </button>
                             </li>
                         </ul>
@@ -155,13 +159,16 @@
                                 </div>
                                 <div class="flex-1">
                                     <div class="bg-gray-100 rounded-xl p-4 inline-block max-w-3xl">
-                                        <h3 class="font-bold text-gray-800 mb-1">Hello! 👋</h3>
-                                        <p class="text-gray-700">I'm your Knowledge Base Assistant. I can help you find answers from our documentation. Try asking me something like:</p>
-                                        <ul class="mt-2 space-y-1">
-                                            <li class="text-blue-600">• How do I create an account?</li>
-                                            <li class="text-blue-600">• Where can I find the user manual?</li>
-                                            <li class="text-blue-600">• What's the refund policy?</li>
-                                        </ul>
                                     </div>
                                     <p class="text-xs text-gray-500 mt-1">Today at <span id="currentTime"></span></p>
                                 </div>
@@ -190,18 +197,19 @@
                                 <input
                                     id="userInput"
                                     type="text"
-                                    placeholder="Ask a question..."
                                     class="w-full p-4 pr-12 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                                     autocomplete="off"
                                 >
-                                <button type="button" id="attachFile" class="absolute right-12 top-4 text-gray-500 hover:text-gray-700">
                                     <i class="fas fa-paperclip"></i>
                                 </button>
                                 <button type="button" id="voiceInput" class="absolute right-4 top-4 text-gray-500 hover:text-gray-700">
                                     <i class="fas fa-microphone"></i>
                                 </button>
                             </div>
-                            <button type="submit" class="ml-3 w-12 h-12 rounded-lg bg-blue-600 text-white hover:bg-blue-700 transition flex items-center justify-center">
                                 <i class="fas fa-paper-plane"></i>
                             </button>
                         </form>
@@ -218,6 +226,54 @@
             </div>
         </div>
         <!-- Feedback modal (hidden by default) -->
         <div id="feedbackModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
             <div class="bg-white rounded-xl p-6 w-full max-w-md">
@@ -262,221 +318,19 @@
             const chatForm = document.getElementById('chatForm');
             const chatMessages = document.getElementById('chatMessages');
             const typingIndicator = document.getElementById('typingIndicator');
-            chatForm.addEventListener('submit', function(e) {
-                e.preventDefault();
-                const message = userInput.value.trim();
-                if (message === '') return;
-                // Add user message to chat
-                addMessageToChat('user', message);
-                userInput.value = '';
-                charCount.textContent = '0';
-                // Show typing indicator
-                typingIndicator.classList.remove('hidden');
-                // Scroll to bottom
-                chatMessages.scrollTop = chatMessages.scrollHeight;
-                // Simulate bot response after a delay
-                setTimeout(() => {
-                    typingIndicator.classList.add('hidden');
-                    const botResponse = generateBotResponse(message);
-                    addMessageToChat('bot', botResponse);
-                    // Scroll to bottom after bot responds
-                    setTimeout(() => {
-                        chatMessages.scrollTop = chatMessages.scrollHeight;
-                    }, 100);
-                }, 1500);
-            });
-            // Clear chat button
-            document.getElementById('clearChat').addEventListener('click', function() {
-                chatMessages.innerHTML = `
-                    <div class="message mb-6">
-                        <div class="flex items-start">
-                            <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mr-3">
-                                <i class="fas fa-robot text-blue-600"></i>
-                            </div>
-                            <div class="flex-1">
-                                <div class="bg-gray-100 rounded-xl p-4 inline-block max-w-3xl">
-                                    <h3 class="font-bold text-gray-800 mb-1">Hello! 👋</h3>
-                                    <p class="text-gray-700">I'm your Knowledge Base Assistant. I can help you find answers from our documentation. Try asking me something like:</p>
-                                    <ul class="mt-2 space-y-1">
-                                        <li class="text-blue-600">• How do I create an account?</li>
-                                        <li class="text-blue-600">• Where can I find the user manual?</li>
-                                        <li class="text-blue-600">• What's the refund policy?</li>
-                                    </ul>
-                                </div>
-                                <p class="text-xs text-gray-500 mt-1">Today at ${timeString}</p>
-                            </div>
-                        </div>
-                    </div>
-                `;
-            });
-            // Suggested questions
-            document.querySelectorAll('.suggested-question').forEach(button => {
-                button.addEventListener('click', function() {
-                    userInput.value = this.textContent;
-                    userInput.focus();
-                });
-            });
-            // Need inspiration button
-            document.getElementById('suggestQuestions').addEventListener('click', function() {
-                const suggestions = [
-                    "How do I update my profile information?",
-                    "Where can I find the pricing plans?",
-                    "How to export my data?",
-                    "What payment methods do you accept?",
-                    "How to contact customer support?"
-                ];
-                const randomSuggestion = suggestions[Math.floor(Math.random() * suggestions.length)];
-                userInput.value = randomSuggestion;
-                userInput.focus();
-            });
-            // Feedback modal
-            const feedbackModal = document.getElementById('feedbackModal');
-            const closeFeedbackModal = document.getElementById('closeFeedbackModal');
-            const feedbackBtns = document.querySelectorAll('.feedback-btn');
-            const feedbackCommentArea = document.getElementById('feedbackCommentArea');
-            const submitFeedback = document.getElementById('submitFeedback');
-            feedbackBtns.forEach(btn => {
-                btn.addEventListener('click', function() {
-                    if (this.dataset.feedback === 'no') {
-                        feedbackCommentArea.classList.remove('hidden');
-                    } else {
-                        feedbackModal.classList.add('hidden');
-                        showToast('Thanks for your feedback!');
-                    }
-                });
-            });
-            closeFeedbackModal.addEventListener('click', function() {
-                feedbackModal.classList.add('hidden');
-            });
-            submitFeedback.addEventListener('click', function() {
-                feedbackModal.classList.add('hidden');
-                showToast('Feedback submitted. Thank you!');
-            });
-            // Helper functions
-            function addMessageToChat(sender, message) {
-                const now = new Date();
-                const timeString = now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
-                if (sender === 'user') {
-                    const messageElement = `
-                        <div class="message mb-6">
-                            <div class="flex items-start justify-end">
-                                <div class="flex-1 max-w-3xl">
-                                    <div class="bg-blue-600 text-white rounded-xl p-4 inline-block">
-                                        ${message}
-                                    </div>
-                                    <p class="text-xs text-gray-500 mt-1 text-right">${timeString}</p>
-                                </div>
-                                <div class="w-10 h-10 rounded-full bg-blue-600 flex items-center justify-center ml-3">
-                                    <i class="fas fa-user text-white"></i>
-                                </div>
-                            </div>
-                        </div>
-                    `;
-                    chatMessages.insertAdjacentHTML('beforeend', messageElement);
-                } else {
-                    const messageElement = `
-                        <div class="message mb-6">
-                            <div class="flex items-start">
-                                <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mr-3">
-                                    <i class="fas fa-robot text-blue-600"></i>
-                                </div>
-                                <div class="flex-1">
-                                    <div class="bg-gray-100 rounded-xl p-4 inline-block max-w-3xl">
-                                        ${message}
-                                    </div>
-                                    <div class="mt-2 flex items-center space-x-3">
-                                        <button class="text-xs text-blue-600 hover:underline feedback-trigger">Was this helpful?</button>
-                                        <button class="text-xs text-gray-500 hover:text-gray-700">
-                                            <i class="fas fa-copy mr-1"></i>Copy
-                                        </button>
-                                    </div>
-                                    <p class="text-xs text-gray-500 mt-1">${timeString}</p>
-                                </div>
-                            </div>
-                        </div>
-                    `;
-                    chatMessages.insertAdjacentHTML('beforeend', messageElement);
-                    // Add event listener to the new feedback button
-                    const lastMessage = chatMessages.lastElementChild;
-                    const feedbackTrigger = lastMessage.querySelector('.feedback-trigger');
-                    feedbackTrigger.addEventListener('click', function() {
-                        feedbackModal.classList.remove('hidden');
-                    });
-                }
-            }
-            function generateBotResponse(question) {
-                // This is a simplified response generator
-                // In a real app, you would connect to your knowledge base API
-                const responses = {
-                    "hello": "Hello! How can I assist you with our knowledge base today?",
-                    "hi": "Hi there! What would you like to know?",
-                    "help": "I'm here to help! Please ask me a specific question about our product or service.",
-                    "account": "To manage your account, please go to Settings > Account. There you can update your profile, change your password, and manage security settings.",
-                    "password": "To reset your password: 1) Go to the login page 2) Click 'Forgot password' 3) Enter your email 4) Follow the instructions in the email you receive.",
-                    "contact": "You can contact our support team by email at [email protected] or by phone at (555) 123-4567. Our support hours are Monday-Friday, 9AM-5PM.",
-                    "refund": "Our refund policy allows for returns within 30 days of purchase. Please contact our support team with your order number to initiate a refund.",
-                    "download": "You can download our mobile app from the Apple App Store or Google Play Store. Search for 'OurProductName' to find it."
-                };
-                // Check for exact matches first
-                const lowerQuestion = question.toLowerCase();
-                if (responses[lowerQuestion]) {
-                    return responses[lowerQuestion];
-                }
-                // Check for keywords
-                if (lowerQuestion.includes('password')) {
-                    return responses['password'];
-                } else if (lowerQuestion.includes('account')) {
-                    return responses['account'];
-                } else if (lowerQuestion.includes('contact') || lowerQuestion.includes('support')) {
-                    return responses['contact'];
-                } else if (lowerQuestion.includes('refund') || lowerQuestion.includes('return')) {
-                    return responses['refund'];
-                } else if (lowerQuestion.includes('download') || lowerQuestion.includes('app')) {
-                    return responses['download'];
-                }
-                // Default response
-                return `I found this information that might help with your question about "${question}":<br><br>
-                <div class="bg-blue-50 border-l-4 border-blue-500 p-3 rounded-r-lg mb-3">
-                    <h4 class="font-semibold text-blue-800">Related Article</h4>
-                    <p class="text-blue-700">"${question.replace('?', '')}" in our knowledge base</p>
-                    <a href="#" class="text-blue-600 text-sm hover:underline mt-1 inline-block">Read more →</a>
-                </div>
-                Does this answer your question? If not, please try rephrasing or ask something more specific.`;
-            }
-            function showToast(message) {
-                const toast = document.createElement('div');
-                toast.className = 'fixed bottom-4 right-4 bg-gray-800 text-white px-4 py-2 rounded-lg shadow-lg animate-fade-in-out';
-                toast.textContent = message;
-                document.body.appendChild(toast);
-                setTimeout(() => {
-                    toast.remove();
-                }, 3000);
-            }
-        });
-    </script>
-<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - <a href="https://enzostvs-deepsite.hf.space?remix=UjjwalK/my-space" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
 </html>

         .typing-dot:nth-child(3) {
             animation-delay: 0.6s;
         }
+        /* Drag and drop area */
+        .dropzone {
+            border: 2px dashed #cbd5e0;
+            transition: all 0.3s;
+        }
+        .dropzone-active {
+            border-color: #4299e1;
+            background-color: #ebf8ff;
+        }
+        /* Toast animation */
+        @keyframes fadeInOut {
+            0% { opacity: 0; transform: translateY(10px); }
+            10% { opacity: 1; transform: translateY(0); }
+            90% { opacity: 1; transform: translateY(0); }
+            100% { opacity: 0; transform: translateY(-10px); }
+        }
+        .animate-toast {
+            animation: fadeInOut 3s ease-in-out forwards;
+        }
+        /* Document card */
+        .document-card:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
+        }
     </style>
 </head>
 <body class="bg-gray-100 font-sans">
                 </div>
                 <div>
                     <h1 class="text-2xl font-bold text-gray-800">Knowledge Base Assistant</h1>
+                    <p class="text-gray-600">Upload documents and ask me anything</p>
                 </div>
             </div>
             <div class="flex space-x-2">
                 <button id="clearChat" class="px-4 py-2 bg-gray-200 hover:bg-gray-300 rounded-lg text-gray-700 transition">
                     <i class="fas fa-trash-alt mr-2"></i>Clear
                 </button>
+                <button id="uploadDocumentsBtn" class="px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg text-white transition">
+                    <i class="fas fa-upload mr-2"></i>Upload Docs
                 </button>
             </div>
         </header>
         <!-- Main Chat Area -->
         <div class="bg-white rounded-xl shadow-lg overflow-hidden">
             <div class="flex h-[70vh]">
+                <!-- Sidebar with uploaded documents -->
                 <div class="w-64 bg-gray-50 border-r border-gray-200 p-4 hidden md:block">
                     <div class="mb-6">
+                        <h3 class="font-semibold text-gray-700 mb-3">Your Documents</h3>
+                        <div id="documentsList" class="space-y-3">
+                            <div class="text-center text-gray-500 py-4">
+                                <i class="fas fa-folder-open text-2xl mb-2"></i>
+                                <p>No documents uploaded</p>
+                                <button id="sidebarUploadBtn" class="text-sm text-blue-600 mt-2 hover:underline">Upload documents</button>
+                            </div>
+                        </div>
                     </div>
                     <div>
+                        <h3 class="font-semibold text-gray-700 mb-3">Sample Questions</h3>
                         <ul class="space-y-2">
                             <li>
                                 <button class="suggested-question w-full text-left px-3 py-2 text-sm rounded-lg hover:bg-gray-100 text-gray-600 transition">
+                                    Summarize the main points from my documents
                                 </button>
                             </li>
                             <li>
                                 <button class="suggested-question w-full text-left px-3 py-2 text-sm rounded-lg hover:bg-gray-100 text-gray-600 transition">
+                                    What are the key takeaways?
                                 </button>
                             </li>
                             <li>
                                 <button class="suggested-question w-full text-left px-3 py-2 text-sm rounded-lg hover:bg-gray-100 text-gray-600 transition">
+                                    Find references to specific terms
                                 </button>
                             </li>
                         </ul>
                                 </div>
                                 <div class="flex-1">
                                     <div class="bg-gray-100 rounded-xl p-4 inline-block max-w-3xl">
+                                        <h3 class="font-bold text-gray-800 mb-1">Document Analysis Assistant 📄</h3>
+                                        <p class="text-gray-700">Upload your documents (PDF, Word, Excel, etc.) and I'll help you analyze and answer questions about their content.</p>
+                                        <div class="mt-4 flex flex-wrap gap-3">
+                                            <button id="welcomeUploadBtn" class="px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg text-white transition text-sm">
+                                                <i class="fas fa-upload mr-2"></i>Upload Documents
+                                            </button>
+                                            <button class="px-4 py-2 bg-gray-200 hover:bg-gray-300 rounded-lg text-gray-700 transition text-sm">
+                                                <i class="fas fa-question-circle mr-2"></i>How It Works
+                                            </button>
+                                        </div>
                                     </div>
                                     <p class="text-xs text-gray-500 mt-1">Today at <span id="currentTime"></span></p>
                                 </div>
                                 <input
                                     id="userInput"
                                     type="text"
+                                    placeholder="Ask a question about your documents..."
                                     class="w-full p-4 pr-12 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                                     autocomplete="off"
+                                    disabled
                                 >
+                                <button type="button" id="attachFileBtn" class="absolute right-12 top-4 text-gray-500 hover:text-gray-700">
                                     <i class="fas fa-paperclip"></i>
                                 </button>
                                 <button type="button" id="voiceInput" class="absolute right-4 top-4 text-gray-500 hover:text-gray-700">
                                     <i class="fas fa-microphone"></i>
                                 </button>
                             </div>
+                            <button type="submit" class="ml-3 w-12 h-12 rounded-lg bg-blue-300 text-white flex items-center justify-center" disabled id="submitBtn">
                                 <i class="fas fa-paper-plane"></i>
                             </button>
                         </form>
             </div>
         </div>
+        <!-- Document Upload Modal -->
+        <div id="uploadModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
+            <div class="bg-white rounded-xl p-6 w-full max-w-2xl">
+                <div class="flex justify-between items-center mb-4">
+                    <h3 class="text-lg font-semibold">Upload Documents</h3>
+                    <button id="closeUploadModal" class="text-gray-500 hover:text-gray-700">
+                        <i class="fas fa-times"></i>
+                    </button>
+                </div>
+                <div class="mb-4 text-sm text-gray-600">
+                    <p>Supported formats: PDF, DOCX, PPTX, XLSX, TXT</p>
+                    <p>Maximum file size: 10MB per file</p>
+                </div>
+                <div id="dropzone" class="dropzone p-8 rounded-lg mb-4 text-center cursor-pointer">
+                    <div class="flex flex-col items-center justify-center py-8">
+                        <i class="fas fa-cloud-upload-alt text-4xl text-blue-500 mb-3"></i>
+                        <h4 class="font-medium text-gray-700 mb-1">Drag & drop files here</h4>
+                        <p class="text-gray-500 text-sm mb-4">or</p>
+                        <input type="file" id="fileInput" class="hidden" multiple>
+                        <button id="browseFilesBtn" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition">
+                            Browse Files
+                        </button>
+                    </div>
+                </div>
+                <div class="mb-4 hidden" id="uploadProgressContainer">
+                    <div class="flex justify-between text-sm mb-1">
+                        <span>Upload Progress</span>
+                        <span id="uploadProgressText">0%</span>
+                    </div>
+                    <div class="w-full bg-gray-200 rounded-full h-2.5">
+                        <div id="uploadProgressBar" class="bg-blue-600 h-2.5 rounded-full" style="width: 0%"></div>
+                    </div>
+                </div>
+                <div id="selectedFilesContainer" class="hidden">
+                    <h4 class="font-medium text-gray-700 mb-2">Selected Files:</h4>
+                    <div id="selectedFilesList" class="space-y-2 mb-4 max-h-40 overflow-y-auto"></div>
+                </div>
+                <div class="flex justify-end space-x-3">
+                    <button id="cancelUploadBtn" class="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition">
+                        Cancel
+                    </button>
+                    <button id="startUploadBtn" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition">
+                        Upload Files
+                    </button>
+                </div>
+            </div>
+        </div>
         <!-- Feedback modal (hidden by default) -->
         <div id="feedbackModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
             <div class="bg-white rounded-xl p-6 w-full max-w-md">
             const chatForm = document.getElementById('chatForm');
             const chatMessages = document.getElementById('chatMessages');
             const typingIndicator = document.getElementById('typingIndicator');
+            const submitBtn = document.getElementById('submitBtn');
+            // Document upload modal elements
+            const uploadModal = document.getElementById('uploadModal');
+            const uploadDocumentsBtn = document.getElementById('uploadDocumentsBtn');
+            const sidebarUploadBtn = document.getElementById('sidebarUploadBtn');
+            const welcomeUploadBtn = document.getElementById('welcomeUploadBtn');
+            const closeUploadModal = document.getElementById('closeUploadModal');
+            const dropzone = document.getElementById('dropzone');
+            const fileInput = document.getElementById('fileInput');
+            const browseFilesBtn = document.getElementById('browseFilesBtn');
+            const selectedFilesList = document.getElementById('selectedFilesList');
+            const selectedFilesContainer = document.getElementById('selectedFilesContainer');
+            const uploadProgressContainer = document.getElementById('uploadProgressContainer');
+            const uploadProgress
 </html>