Fix the generate button and it's functions, and terminate bugs if any

index.html

@@ -258,60 +258,102 @@
             youtubeTab.classList.remove('active-tab', 'text-primary', 'dark:text-primary', 'border-primary');
             document.getElementById('video-url').placeholder = 'https://www.tiktok.com/@username/video/...';
         });
-
-        // Simulate transcript generation
-        document.getElementById('generate-btn').addEventListener('click', () => {
-            const url = document.getElementById('video-url').value;
+        // Transcript generation
+        document.getElementById('generate-btn').addEventListener('click', async () => {
+            const url = document.getElementById('video-url').value.trim();
+            const urlPatterns = {
+                youtube: /^(https?:\/\/)?(www\.)?(youtube\.com|youtu\.?be)\/.+/,
+                tiktok: /^(https?:\/\/)?(www\.)?tiktok\.com\/.+\/video\/.+/
+            };
             
             if (!url) {
                 alert('Please enter a valid YouTube or TikTok URL');
                 return;
             }
 
-            // Show loading state
-            document.getElementById('empty-state').classList.add('hidden');
-            document.getElementById('status-container').classList.remove('hidden');
-            document.getElementById('results-container').classList.add('hidden');
-            // Fetch transcript and video info
-            fetch(`https://api.example.com/video-info?url=${encodeURIComponent(url)}`)
-                .then(response => response.json())
-                .then(data => {
-                    document.getElementById('status-container').classList.add('hidden');
-                    document.getElementById('results-container').classList.remove('hidden');
-                    
-                    // Update video info
-                    document.getElementById('video-title').textContent = data.title || 'Unknown';
-                    document.getElementById('video-duration').textContent = data.duration || 'Unknown';
-                    document.getElementById('processing-time').textContent = `${(Math.random() * 2 + 1).toFixed(2)} seconds`;
-// Sample transcript (in a real app this would come from an API)
-                    // Fetch actual transcript from API (mock implementation)
-                    fetch(`https://api.example.com/transcript?url=${encodeURIComponent(url)}`)
-                        .then(response => response.json())
-                        .then(data => {
-                            let fullTranscript = '';
-                            data.transcript.forEach(entry => {
-                                fullTranscript += `<p><strong>[${entry.timestamp}]</strong> ${entry.text}</p>`;
-                            });
-                            document.getElementById('transcript-content').innerHTML = fullTranscript;
-                        })
-                        .catch(error => {
-                            console.error('Error fetching transcript:', error);
-                            document.getElementById('transcript-content').innerHTML = `
-                                <p class="text-red-500">Error: Could not fetch transcript. Please try again.</p>
-                            `;
+            if (!urlPatterns.youtube.test(url) && !urlPatterns.tiktok.test(url)) {
+                alert('Please enter a valid YouTube or TikTok URL');
+                return;
+            }
+
+            try {
+                // Show loading state
+                document.getElementById('empty-state').classList.add('hidden');
+                document.getElementById('status-container').classList.remove('hidden');
+                document.getElementById('results-container').classList.add('hidden');
+                document.getElementById('generate-btn').disabled = true;
+
+                // Mock API call - replace with actual API endpoint
+                const [videoInfo, transcriptData] = await Promise.all([
+                    fetchVideoInfo(url),
+                    fetchTranscript(url)
+                ]);
+
+                // Update UI
+                document.getElementById('status-container').classList.add('hidden');
+                document.getElementById('results-container').classList.remove('hidden');
+                
+                // Update video info
+                document.getElementById('video-title').textContent = videoInfo.title || 'Unknown';
+                document.getElementById('video-duration').textContent = videoInfo.duration || 'Unknown';
+                document.getElementById('processing-time').textContent = videoInfo.processingTime || 'Unknown';
+                
+                // Update transcript
+                const fullTranscript = formatTranscript(transcriptData);
+                document.getElementById('transcript-content').innerHTML = fullTranscript;
+                document.getElementById('word-count').textContent = countWords(fullTranscript);
+
+            } catch (error) {
+                console.error('Error:', error);
+                document.getElementById('status-container').classList.add('hidden');
+                document.getElementById('results-container').classList.add('hidden');
+                document.getElementById('empty-state').classList.remove('hidden');
+                alert('Error processing video. Please try again.');
+            } finally {
+                document.getElementById('generate-btn').disabled = false;
+            }
+        });
+
+        // Helper functions
+        async function fetchVideoInfo(url) {
+            // Mock implementation - replace with actual API call
+            return new Promise(resolve => {
+                setTimeout(() => {
+                    resolve({
+                        title: 'Sample Video Title',
+                        duration: '5:30',
+                        processingTime: `${(Math.random() * 2 + 1).toFixed(2)} seconds`
+                    });
+                }, 500);
+            });
+        }
+
+        async function fetchTranscript(url) {
+            // Mock implementation - replace with actual API call
+            return new Promise(resolve => {
+                setTimeout(() => {
+                    const mockTranscript = [];
+                    for (let i = 0; i < 10; i++) {
+                        mockTranscript.push({
+                            timestamp: `00:${i.toString().padStart(2, '0')}`,
+                            text: `This is sample transcript line ${i + 1} for demonstration purposes.`
                         });
-                    document.getElementById('transcript-content').innerHTML = fullTranscript;
-                    document.getElementById('word-count').textContent = fullTranscript.split(/\s+/).length;
-                })
-                .catch(error => {
-                    console.error('Error fetching video info:', error);
-                    document.getElementById('status-container').classList.add('hidden');
-                    document.getElementById('empty-state').classList.remove('hidden');
-                    alert('Error processing video. Please try again.');
-                });
-});
+                    }
+                    resolve(mockTranscript);
+                }, 1000);
+            });
+        }
 
-        // Copy functionality
+        function formatTranscript(data) {
+            return data.map(entry => 
+                `<p><strong>[${entry.timestamp}]</strong> ${entry.text}</p>`
+            ).join('');
+        }
+
+        function countWords(text) {
+            return text.split(/\s+/).filter(word => word.length > 0).length;
+        }
+// Copy functionality
         document.getElementById('copy-btn').addEventListener('click', () => {
             const transcriptText = document.getElementById('transcript-content').textContent;
             navigator.clipboard.writeText(transcriptText).then(() => {