Upload fix

static/script.js

@@ -299,24 +299,24 @@ fileInput.addEventListener('change', (e) => {
         }
         
         try {
-            const videoURL = URL.createObjectURL(file);
+        const videoURL = URL.createObjectURL(file);
             console.log("Created video URL:", videoURL);
             
-            videoPlayer.src = videoURL;
+        videoPlayer.src = videoURL;
             videoPlayer.load(); // Force reload
             
             // Update UI
-            transcribeButton.disabled = false;
-            analyzeButton.disabled = true;
+        transcribeButton.disabled = false;
+        analyzeButton.disabled = true;
             transcriptionDiv.innerHTML = '';
             topicResultsDiv.innerHTML = '';
-            transcriptText = '';
-            statusDiv.textContent = 'Video loaded. Ready to transcribe.';
-            
+        transcriptText = '';
+        statusDiv.textContent = 'Video loaded. Ready to transcribe.';
+        
             // Reset progress
-            const progressBarFill = document.querySelector('.progress-bar-fill');
-            if (progressBarFill) {
-                progressBarFill.style.width = '0%';
+        const progressBarFill = document.querySelector('.progress-bar-fill');
+        if (progressBarFill) {
+            progressBarFill.style.width = '0%';
             }
             
             // Set active step
@@ -539,44 +539,44 @@ modelSelector.addEventListener('change', async (e) => {
 window.addEventListener('DOMContentLoaded', () => {
     // Initialize all UI components with error handling for each
     try {
-        initThemeToggle();
+    initThemeToggle();
     } catch (error) {
         console.error('Failed to initialize theme toggle:', error);
     }
     
     try {
-        initFAB();
+    initFAB();
     } catch (error) {
         console.error('Failed to initialize FAB:', error);
     }
     
     try {
-        initGallery();
+    initGallery();
     } catch (error) {
         console.error('Failed to initialize gallery:', error);
     }
     
     try {
-        initCustomVideoPlayer();
+    initCustomVideoPlayer();
     } catch (error) {
         console.error('Failed to initialize custom video player:', error);
     }
     
     try {
-        initUploadParticles();
+    initUploadParticles();
     } catch (error) {
         console.error('Failed to initialize upload particles:', error);
     }
     
     try {
-        initProgressSteps();
+    initProgressSteps();
     } catch (error) {
         console.error('Failed to initialize progress steps:', error);
     }
     
     // Initialize mindmap system
     try {
-        mindmap = new TopicMindmap();
+    mindmap = new TopicMindmap();
     } catch (error) {
         console.error('Failed to initialize mindmap:', error);
     }
@@ -584,13 +584,13 @@ window.addEventListener('DOMContentLoaded', () => {
     // Check for model selector and initialize whisper if available
     const modelSelector = document.getElementById('modelSelector');
     if (modelSelector) {
-        initWhisper(modelSelector.value).catch(error => {
-            console.error('Failed to initialize Whisper:', error);
+    initWhisper(modelSelector.value).catch(error => {
+        console.error('Failed to initialize Whisper:', error);
             const statusDiv = document.getElementById('status');
             if (statusDiv) {
-                statusDiv.textContent = 'Failed to initialize the transcription model';
+        statusDiv.textContent = 'Failed to initialize the transcription model';
             }
-        });
+    });
     }
 });
 
@@ -2200,15 +2200,41 @@ function initUploadParticles() {
         particles.appendChild(particle);
     }
     
-    // Add click event to trigger file input - FIXED VERSION
+    // Add click event to trigger file input - PROPERLY FIXED VERSION
     uploadContainer.addEventListener('click', (e) => {
-        e.preventDefault(); // Prevent default browser behavior
-        e.stopPropagation(); // Stop event from bubbling up
+        // Don't prevent default on the click event here
         console.log("Upload container clicked");
+        // Directly trigger the file input click
         fileInput.click();
     });
     
-    // Drag and drop functionality with improved feedback - FIXED VERSION
+    // Also add click handlers to the specific elements inside the container
+    const uploadIcon = uploadContainer.querySelector('.upload-icon-container');
+    const uploadText = uploadContainer.querySelector('.upload-text');
+    const uploadSubtext = uploadContainer.querySelector('.upload-subtext');
+    
+    if (uploadIcon) {
+        uploadIcon.addEventListener('click', (e) => {
+            console.log("Upload icon clicked");
+            fileInput.click();
+        });
+    }
+    
+    if (uploadText) {
+        uploadText.addEventListener('click', (e) => {
+            console.log("Upload text clicked");
+            fileInput.click();
+        });
+    }
+    
+    if (uploadSubtext) {
+        uploadSubtext.addEventListener('click', (e) => {
+            console.log("Upload subtext clicked");
+            fileInput.click();
+        });
+    }
+    
+    // Drag and drop functionality - keep these preventDefault calls
     uploadContainer.addEventListener('dragover', (e) => {
         e.preventDefault();
         e.stopPropagation();
@@ -2236,12 +2262,6 @@ function initUploadParticles() {
             fileInput.dispatchEvent(event);
         }
     });
-    
-    // Add logging to the file input change event for debugging
-    fileInput.addEventListener('change', (e) => {
-        console.log("File input change event fired", e.target.files);
-        // The rest of the handler continues below...
-    });
 }
 
 // Progress Steps Visualization

static/styles.css

@@ -1886,34 +1886,4 @@ jmnode.node-teal:hover, jmnode.node-gray:hover {
 
 .transcription-content p:hover {
     background-color: rgba(52, 152, 219, 0.1);
-}
-
-/* Hugging Face Badge Styles */
-.huggingface-badge {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    margin-left: auto;
-    padding: 0.5rem;
-    border-radius: var(--radius-md);
-    background-color: var(--background-color);
-    transition: all 0.3s ease;
-}
-
-.huggingface-badge span {
-    font-size: 0.85rem;
-    color: var(--text-secondary);
-}
-
-.huggingface-badge img {
-    height: 24px;
-}
-
-.huggingface-badge:hover {
-    transform: translateY(-2px);
-    box-shadow: var(--shadow-sm);
-}
-
-[data-theme="dark"] .huggingface-badge {
-    background-color: var(--surface-color);
 }

templates/index.html

@@ -16,12 +16,6 @@
                 <i class="fas fa-project-diagram logo-icon"></i>
                 <h1>Flowify</h1>
             </div>
-            <div class="huggingface-badge">
-                <span>Powered by</span>
-                <a href="https://huggingface.co/spaces" target="_blank">
-                    <img src="https://huggingface.co/datasets/huggingface/badges/raw/main/powered-by-huggingface-light.svg" alt="Powered by Hugging Face" />
-                </a>
-            </div>
         </header>
 
         <!-- Theme Toggle Button -->
@@ -38,7 +32,7 @@
             <div class="upload-panel card">
                 <div class="card-body">
                     <div class="upload-section">
-                        <div class="upload-container" id="dropZone" onclick="event.preventDefault();">
+                        <div class="upload-container" id="dropZone">
                             <div class="particles">
                                 <!-- Particles will be added dynamically via JS -->
                             </div>