Initial Deployment

Dockerfile

@@ -0,0 +1,23 @@
+FROM python:3.10-slim
+
+WORKDIR /app
+
+# Install system dependencies including FFmpeg
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    ffmpeg \
+    build-essential \
+    && apt-get clean \
+    && rm -rf /var/lib/apt/lists/*
+
+# Copy requirements first for better caching
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy the rest of the application
+COPY . .
+
+# Expose the port
+EXPOSE 5000
+
+# Run using Gunicorn
+CMD ["gunicorn", "--bind", "0.0.0.0:5000", "app:app"] 

app.py

@@ -0,0 +1,7 @@
+from app_fastapi import app
+
+# This file is used for Hugging Face Spaces deployment
+# Spaces will automatically detect this app.py file and serve the FastAPI app
+
+# For local development, you can run:
+# uvicorn app_fastapi:app --host 0.0.0.0 --port 8000 

app_fastapi.py

@@ -0,0 +1 @@
+ 

requirements.txt

@@ -0,0 +1,17 @@
+flask>=2.0.0
+gunicorn>=20.0.0
+numpy>=1.19.0
+scikit-learn>=1.0.0
+nltk>=3.6.0
+torch>=1.9.0
+transformers>=4.0.0
+keybert>=0.5.0
+spacy>=3.0.0
+librosa>=0.8.0
+soundfile>=0.10.0
+thinc>=8.0.0
+fastapi>=0.68.0
+uvicorn>=0.15.0
+jinja2>=3.0.0
+python-multipart>=0.0.5
+pydantic>=1.8.2

static/script.js

@@ -0,0 +1,2173 @@
+import { pipeline, env } from 'https://unpkg.com/@xenova/transformers@2.16.0/dist/transformers.min.js';
+
+
+env.allowLocalModels = false;
+env.useBrowserCache = true;
+
+
+const videoPlayer = document.getElementById('videoPlayer');
+const fileInput = document.getElementById('fileInput');
+const transcribeButton = document.getElementById('transcribeButton');
+const analyzeButton = document.getElementById('analyzeButton');
+const transcriptionDiv = document.getElementById('transcription');
+const topicResultsDiv = document.getElementById('topicResults');
+const statusDiv = document.getElementById('status');
+const modelSelector = document.getElementById('modelSelector');
+const modelStatus = document.getElementById('modelStatus');
+
+let whisperPipeline = null;
+let transcriptText = '';
+let mindmap;
+
+// Original transcribeAudio function definition
+async function transcribeAudio(audioData) {
+    try {
+        statusDiv.textContent = 'Transcribing audio...';
+        transcriptionDiv.textContent = '';
+        
+        // Make sure we're using the correct progress element
+        const progressBarFill = document.querySelector('.progress-bar-fill');
+        if (progressBarFill) {
+            progressBarFill.style.width = '0%';
+        }
+
+        // Check if server-side transcription is possible
+        const selectedModel = modelSelector.value;
+        if (selectedModel !== 'browser') {
+            // Convert audio data to base64
+            const base64Audio = arrayBufferToBase64(audioData.buffer);
+            
+            // Send to server as JSON
+            const response = await fetch('/transcribe', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({
+                    audio: base64Audio,
+                    model: selectedModel
+                })
+            });
+
+            if (!response.ok) {
+                throw new Error('Server transcription failed');
+            }
+
+            const result = await response.json();
+            transcriptText = result.transcript || result.text || '';
+            
+            // Process the transcript to create segments for display
+            if (transcriptText) {
+                const segments = [];
+                // Extract timestamps and text using regex
+                const timestampPattern = /\[(\d+)\](.*?)(?=\[\d+\]|$)/g;
+                let match;
+                
+                while ((match = timestampPattern.exec(transcriptText)) !== null) {
+                    segments.push({
+                        start: parseInt(match[1]),
+                        text: match[2].trim()
+                    });
+                }
+                
+                // If no timestamps were found, fallback to displaying the whole text
+                if (segments.length === 0 && transcriptText.trim()) {
+                    segments.push({
+                        start: 0,
+                        text: transcriptText.trim()
+                    });
+                }
+                
+                // Display with timestamps
+                console.log("Displaying transcription with segments:", segments);
+                displayTranscription(segments);
+            }
+            
+            statusDiv.textContent = 'Transcription complete!';
+            analyzeButton.disabled = false;
+            if (progressBarFill) {
+                progressBarFill.style.width = '100%';
+            }
+            return;
+        }
+        
+        // Browser-side transcription using Whisper
+        if (!whisperPipeline) {
+            statusDiv.textContent = 'Loading Whisper model...';
+            
+            // Initialize the pipeline
+            whisperPipeline = await pipeline('automatic-speech-recognition', 'Xenova/whisper-tiny.en');
+            statusDiv.textContent = 'Model loaded. Transcribing...';
+        }
+
+        // Processing with progress updates
+        const transcriptionResult = await whisperPipeline(audioData, {
+            chunk_length_s: 30,
+            stride_length_s: 5,
+            language: 'english',
+            task: 'transcribe',
+            return_timestamps: true,
+            callback_function: function(progressData) {
+                const percentage = Math.round(progressData.progress * 100);
+                statusDiv.textContent = `Transcribing: ${percentage}%`;
+                
+                const progressBarFill = document.querySelector('.progress-bar-fill');
+                if (progressBarFill) {
+                    progressBarFill.style.width = `${percentage}%`;
+                }
+            }
+        });
+
+        // Save and display transcription
+        transcriptText = transcriptionResult.text;
+        displayTranscription(transcriptionResult.chunks || []);
+        
+        statusDiv.textContent = 'Transcription complete!';
+        analyzeButton.disabled = false;
+        if (progressBarFill) {
+            progressBarFill.style.width = '100%';
+        }
+
+    } catch (error) {
+        console.error('Transcription error:', error);
+        statusDiv.textContent = `Error: ${error.message}`;
+        throw error;
+    }
+}
+
+// Helper function to display transcription with timestamps
+function displayTranscription(segments) {
+    console.log("displayTranscription called with segments:", segments);
+    
+    // Clear the transcription div of all content, including the empty state
+    if (transcriptionDiv) {
+        transcriptionDiv.innerHTML = '';
+    } else {
+        console.error("transcriptionDiv element not found");
+        return;
+    }
+    
+    if (!segments || segments.length === 0) {
+        const emptyState = document.createElement('div');
+        emptyState.className = 'empty-state';
+        emptyState.innerHTML = `
+            <i class="fas fa-file-alt"></i>
+            <h3 class="empty-state-title">No transcription yet</h3>
+            <p class="empty-state-description">Upload a video and click "Transcribe Video" to see the transcription here</p>
+        `;
+        transcriptionDiv.appendChild(emptyState);
+        return;
+    }
+    
+    // Create a container for the transcription content
+    const transcriptionContent = document.createElement('div');
+    transcriptionContent.className = 'transcription-content';
+    
+    segments.forEach(segment => {
+        const paragraphElement = document.createElement('p');
+        
+        // Format and add timestamp prefix
+        let timestamp = '?';
+        let text = '';
+        
+        if (Array.isArray(segment) && segment.length >= 2) {
+            // For array format [start, end, text]
+            timestamp = Math.floor(segment[0]);
+            text = segment[2] || '';
+        } else if (typeof segment === 'object' && segment.start !== undefined) {
+            // For object format {start, end, text}
+            timestamp = Math.floor(segment.start);
+            text = segment.text || '';
+        } else {
+            // Fallback
+            text = segment.toString();
+        }
+        
+        paragraphElement.textContent = `[${timestamp}] ${text}`;
+        
+        // Add click handler to jump to timestamp
+        paragraphElement.addEventListener('click', () => {
+            videoPlayer.currentTime = timestamp;
+            videoPlayer.play().catch(e => console.error('Could not play video:', e));
+        });
+        
+        paragraphElement.style.cursor = 'pointer';
+        transcriptionContent.appendChild(paragraphElement);
+    });
+    
+    transcriptionDiv.appendChild(transcriptionContent);
+}
+
+// Store original function references
+const originalTranscribeAudio = transcribeAudio;
+const originalAnalyzeTopics = analyzeTopics;
+
+// Override with enhanced versions
+transcribeAudio = async function(audioData) {
+    // Set progress step - use the global function safely
+    try {
+        if (typeof window.setActiveStep === 'function') {
+            window.setActiveStep('transcribe');
+        }
+    } catch (err) {
+        console.warn('Could not update progress steps:', err);
+    }
+    
+    try {
+        await originalTranscribeAudio(audioData);
+        // If successful, make analyze button fancy with pulse animation
+        analyzeButton.classList.add('animate-pulse');
+        setTimeout(() => analyzeButton.classList.remove('animate-pulse'), 3000);
+    } catch (error) {
+        console.error('Transcription error:', error);
+        throw error;
+    }
+};
+
+analyzeTopics = async function() {
+    // Set progress step - use the global function safely
+    try {
+        if (typeof window.setActiveStep === 'function') {
+            window.setActiveStep('analyze');
+        }
+    } catch (err) {
+        console.warn('Could not update progress steps:', err);
+    }
+    
+    // Remove pulse animation if still there
+    analyzeButton.classList.remove('animate-pulse');
+    
+    try {
+        await originalAnalyzeTopics();
+        // If successful, we move to visualization
+        try {
+            if (typeof window.setActiveStep === 'function') {
+                window.setActiveStep('visualize');
+            }
+        } catch (err) {
+            console.warn('Could not update progress steps:', err);
+        }
+    } catch (error) {
+        console.error('Analysis error:', error);
+        throw error;
+    }
+};
+
+fileInput.addEventListener('change', (e) => {
+    const file = e.target.files[0];
+    if (file) {
+        const videoURL = URL.createObjectURL(file);
+        videoPlayer.src = videoURL;
+        transcribeButton.disabled = false;
+        analyzeButton.disabled = true;
+        transcriptionDiv.textContent = '';
+        topicResultsDiv.textContent = '';
+        transcriptText = '';
+        statusDiv.textContent = 'Video loaded. Ready to transcribe.';
+        
+        const progressBarFill = document.querySelector('.progress-bar-fill');
+        if (progressBarFill) {
+            progressBarFill.style.width = '0%';
+        }
+    }
+});
+
+// Audio Processing Functions
+function convertAudioBuffer(audioBuffer) {
+    const audioData = audioBuffer.getChannelData(0);
+    const targetSampleRate = 16000;
+    const resamplingRatio = targetSampleRate / audioBuffer.sampleRate;
+    const resampledLength = Math.floor(audioData.length * resamplingRatio);
+    const resampledData = new Float32Array(resampledLength);
+
+    for (let i = 0; i < resampledLength; i++) {
+        const originalIndex = Math.floor(i / resamplingRatio);
+        resampledData[i] = audioData[originalIndex];
+    }
+
+    return resampledData;
+}
+
+async function extractAudio(videoFile) {
+    try {
+        console.log('Starting audio extraction');
+        const audioContext = new (window.AudioContext || window.webkitAudioContext)();
+        const arrayBuffer = await videoFile.arrayBuffer();
+        console.log('Video file loaded into buffer');
+
+        const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
+        console.log('Audio decoded successfully');
+
+        return convertAudioBuffer(audioBuffer);
+    } catch (error) {
+        console.error('Error extracting audio:', error);
+        throw new Error(`Failed to extract audio: ${error.message}`);
+    }
+}
+
+// Define setActiveStep globally before any other functions use it
+window.setActiveStep = function(step) {
+    // Will be initialized properly later, but create empty function to prevent errors
+    console.log(`Progress step: ${step}`);
+};
+
+// Helper function to convert ArrayBuffer to base64
+function arrayBufferToBase64(buffer) {
+    let binary = '';
+    const bytes = new Uint8Array(buffer);
+    const len = bytes.byteLength;
+    for (let i = 0; i < len; i++) {
+        binary += String.fromCharCode(bytes[i]);
+    }
+    return window.btoa(binary);
+}
+
+function formatTimestamp(seconds) {
+    // Round down to nearest second and return as integer
+    return `[${Math.floor(seconds)}]`;
+}
+
+async function analyzeTopics() {
+    try {
+        statusDiv.textContent = 'Analyzing topics...';
+        
+        // Make sure we're using the correct progress element
+        const progressBarFill = document.querySelector('.progress-bar-fill');
+        if (progressBarFill) {
+            progressBarFill.style.width = '0%';
+        }
+
+        const response = await fetch('/analyze', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({ transcript: transcriptText })
+        });
+
+        if (!response.ok) {
+            throw new Error('Failed to analyze topics');
+        }
+
+        const data = await response.json();
+        displayTopicResults(data.segments);
+        statusDiv.textContent = 'Topic analysis complete!';
+        
+        if (progressBarFill) {
+            progressBarFill.style.width = '100%';
+        }
+
+    } catch (error) {
+        console.error('Topic analysis error:', error);
+        statusDiv.textContent = `Error: ${error.message}`;
+    }
+}
+
+function displayTopicResults(segments) {
+    // Clear previous results
+    topicResultsDiv.innerHTML = '';
+    
+    // Display topics in the sidebar
+    segments.forEach(segment => {
+        const topicElement = document.createElement('div');
+        topicElement.className = 'topic';
+        
+        const headerElement = document.createElement('div');
+        headerElement.className = 'topic-header';
+        headerElement.textContent = segment.topic_name;
+        
+        const contentElement = document.createElement('div');
+        contentElement.className = 'topic-content';
+        
+        // Handle content that could be either an array or a string
+        if (Array.isArray(segment.content)) {
+            contentElement.textContent = segment.content.join('\n');
+        } else {
+            contentElement.textContent = segment.content;
+        }
+        
+        topicElement.appendChild(headerElement);
+        topicElement.appendChild(contentElement);
+        
+        // If this is a parent topic with children, display them as nested elements
+        if (segment.is_parent && segment.children && segment.children.length > 0) {
+            topicElement.classList.add('parent-topic');
+            
+            const childrenContainer = document.createElement('div');
+            childrenContainer.className = 'subtopics';
+            
+            segment.children.forEach(child => {
+                const childElement = document.createElement('div');
+                childElement.className = 'subtopic';
+                
+                const childHeader = document.createElement('div');
+                childHeader.className = 'subtopic-header';
+                childHeader.textContent = child.topic_name;
+                
+                const childContent = document.createElement('div');
+                childContent.className = 'subtopic-content';
+                
+                // Handle content that could be either an array or a string
+                if (Array.isArray(child.content)) {
+                    childContent.textContent = child.content.join('\n');
+                } else {
+                    childContent.textContent = child.content;
+                }
+                
+                childElement.appendChild(childHeader);
+                childElement.appendChild(childContent);
+                childrenContainer.appendChild(childElement);
+            });
+            
+            topicElement.appendChild(childrenContainer);
+        }
+        
+        topicResultsDiv.appendChild(topicElement);
+    });
+
+    // Update mindmap and show fullscreen overlay
+    mindmap.update(segments);
+}
+
+// Event Listeners
+transcribeButton.addEventListener('click', async () => {
+    try {
+        transcribeButton.disabled = true;
+        modelSelector.disabled = true;
+        const videoFile = fileInput.files[0];
+
+        if (!videoFile) {
+            throw new Error('No video file selected');
+        }
+        
+        const videoPreview = document.querySelector('.video-preview');
+        const videoHeight = videoPlayer.offsetHeight;
+        if (videoHeight > 0) {
+            videoPreview.style.height = `${videoHeight}px`;
+        }
+
+        statusDiv.textContent = 'Extracting audio...';
+        const audioData = await extractAudio(videoFile);
+        await transcribeAudio(audioData);
+        modelSelector.disabled = false;
+
+    } catch (error) {
+        console.error('Processing error:', error);
+        statusDiv.textContent = `Error: ${error.message}`;
+        transcribeButton.disabled = false;
+        modelSelector.disabled = false;
+    }
+});
+
+analyzeButton.addEventListener('click', analyzeTopics);
+
+modelSelector.addEventListener('change', async (e) => {
+    const selectedModel = e.target.value;
+    transcribeButton.disabled = false;
+    analyzeButton.disabled = true;
+    await initWhisper(selectedModel);
+    if (fileInput.files.length > 0) {
+        transcribeButton.disabled = false;
+    }
+});
+
+// Initialize with the selected model when the page loads
+window.addEventListener('DOMContentLoaded', () => {
+    // Initialize all UI components
+    initThemeToggle();
+    initFAB();
+    initGallery();
+    initCustomVideoPlayer();
+    initUploadParticles();
+    initProgressSteps();
+    
+    // Original initialization
+    mindmap = new TopicMindmap();
+    initWhisper(modelSelector.value).catch(error => {
+        console.error('Failed to initialize Whisper:', error);
+        statusDiv.textContent = 'Failed to initialize the transcription model';
+    });
+});
+
+// Theme toggle functionality
+function initThemeToggle() {
+    const themeToggle = document.getElementById('themeToggle');
+    const htmlElement = document.documentElement;
+    
+    // Check for saved theme preference
+    const savedTheme = localStorage.getItem('theme');
+    if (savedTheme) {
+        htmlElement.setAttribute('data-theme', savedTheme);
+    }
+    
+    themeToggle.addEventListener('click', () => {
+        const currentTheme = htmlElement.getAttribute('data-theme');
+        const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+        
+        htmlElement.setAttribute('data-theme', newTheme);
+        localStorage.setItem('theme', newTheme);
+    });
+}
+
+// FAB functionality
+function initFAB() {
+    const fabContainer = document.getElementById('fabContainer');
+    const mainFab = document.getElementById('mainFab');
+    const exportPdfBtn = document.getElementById('exportPdfBtn');
+    const exportPngBtn = document.getElementById('exportPngBtn');
+    const exportSvgBtn = document.getElementById('exportSvgBtn');
+    const shareMindmapBtn = document.getElementById('shareMindmapBtn');
+    
+    // Toggle FAB options
+    mainFab.addEventListener('click', () => {
+        fabContainer.classList.toggle('active');
+    });
+    
+    // Close FAB when clicking outside
+    document.addEventListener('click', (e) => {
+        if (!fabContainer.contains(e.target) && fabContainer.classList.contains('active')) {
+            fabContainer.classList.remove('active');
+        }
+    });
+    
+    // Export as PDF
+    exportPdfBtn.addEventListener('click', () => {
+        exportMindmap('pdf');
+    });
+    
+    // Export as PNG
+    exportPngBtn.addEventListener('click', () => {
+        exportMindmap('png');
+    });
+    
+    // Export as SVG
+    exportSvgBtn.addEventListener('click', () => {
+        exportMindmap('svg');
+    });
+    
+    // Share mindmap
+    shareMindmapBtn.addEventListener('click', () => {
+        shareMindmap();
+    });
+}
+
+// Gallery functionality
+function initGallery() {
+    const galleryContainer = document.getElementById('resultsGallery');
+    const galleryClose = document.getElementById('galleryClose');
+    const galleryContent = document.getElementById('galleryContent');
+    
+    // Add "Recent Mindmaps" option to FAB
+    const fabContainer = document.getElementById('fabContainer');
+    const recentMindmapsBtn = document.createElement('button');
+    recentMindmapsBtn.className = 'fab-option';
+    recentMindmapsBtn.setAttribute('title', 'Recent Mindmaps');
+    recentMindmapsBtn.innerHTML = '<i class="fas fa-history"></i>';
+    fabContainer.querySelector('.fab-options').appendChild(recentMindmapsBtn);
+    
+    // Show gallery
+    recentMindmapsBtn.addEventListener('click', () => {
+        showGallery();
+        fabContainer.classList.remove('active');
+    });
+    
+    // Close gallery
+    galleryClose.addEventListener('click', () => {
+        galleryContainer.classList.remove('active');
+    });
+    
+    // Close gallery with escape key
+    document.addEventListener('keydown', (e) => {
+        if (e.key === 'Escape' && galleryContainer.classList.contains('active')) {
+            galleryContainer.classList.remove('active');
+        }
+    });
+}
+
+// Show gallery and populate with saved mindmaps
+function showGallery() {
+    const galleryContainer = document.getElementById('resultsGallery');
+    const galleryContent = document.getElementById('galleryContent');
+    
+    // Clear existing content
+    galleryContent.innerHTML = '';
+    
+    // Get saved mindmaps from localStorage
+    const savedMindmaps = getSavedMindmaps();
+    
+    if (savedMindmaps.length === 0) {
+        // Show empty state
+        galleryContent.innerHTML = `
+            <div class="gallery-empty">
+                <i class="fas fa-file-alt" style="font-size: 3rem; color: var(--text-secondary); margin-bottom: 1rem;"></i>
+                <p>No saved mindmaps yet</p>
+                <p>Your analyzed videos will appear here</p>
+            </div>
+        `;
+    } else {
+        // Create gallery items for each saved mindmap
+        savedMindmaps.forEach(mindmap => {
+            createGalleryItem(mindmap);
+        });
+    }
+    
+    // Show gallery
+    galleryContainer.classList.add('active');
+}
+
+// Create a gallery item for a saved mindmap
+function createGalleryItem(mindmapData) {
+    const galleryContent = document.getElementById('galleryContent');
+    
+    const item = document.createElement('div');
+    item.className = 'gallery-item';
+    
+    // Use a random color from our palette for preview
+    const colors = ['#3498db', '#2ecc71', '#e74c3c', '#9b59b6', '#e67e22', '#f1c40f', '#1abc9c'];
+    const randomColor = colors[Math.floor(Math.random() * colors.length)];
+    
+    item.innerHTML = `
+        <div class="gallery-item-preview" style="background-color: ${randomColor};">
+            <div style="height: 100%; display: flex; align-items: center; justify-content: center; color: white;">
+                <i class="fas fa-project-diagram" style="font-size: 2rem;"></i>
+            </div>
+        </div>
+        <div class="gallery-item-info">
+            <div class="gallery-item-title">${mindmapData.title || 'Untitled Mindmap'}</div>
+            <div class="gallery-item-date">${new Date(mindmapData.date).toLocaleDateString()}</div>
+        </div>
+    `;
+    
+    // Load mindmap when clicked
+    item.addEventListener('click', () => {
+        loadMindmap(mindmapData);
+        document.getElementById('resultsGallery').classList.remove('active');
+    });
+    
+    galleryContent.appendChild(item);
+}
+
+// Export mindmap in various formats
+function exportMindmap(format) {
+    if (!mindmap || !mindmap.mindmap) {
+        alert('No mindmap to export. Please analyze a video first.');
+        return;
+    }
+    
+    try {
+        switch (format) {
+            case 'pdf':
+                exportAsPDF();
+                break;
+            case 'png':
+                exportAsPNG();
+                break;
+            case 'svg':
+                exportAsSVG();
+                break;
+        }
+    } catch (error) {
+        console.error(`Error exporting as ${format}:`, error);
+        alert(`Failed to export mindmap as ${format.toUpperCase()}`);
+    }
+}
+
+// Export as PDF using html2pdf
+function exportAsPDF() {
+    // We'll use html2pdf.js for PDF export
+    const script = document.createElement('script');
+    script.src = 'https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js';
+    document.head.appendChild(script);
+    
+    script.onload = () => {
+        const element = document.getElementById('mindmap');
+        const opt = {
+            margin: 1,
+            filename: 'flowify-mindmap.pdf',
+            image: { type: 'jpeg', quality: 0.98 },
+            html2canvas: { scale: 2 },
+            jsPDF: { unit: 'in', format: 'letter', orientation: 'landscape' }
+        };
+        
+        // Use html2pdf library to generate PDF
+        html2pdf().set(opt).from(element).save();
+    };
+}
+
+// Export as PNG
+function exportAsPNG() {
+    // We'll use html2canvas for PNG export
+    const script = document.createElement('script');
+    script.src = 'https://html2canvas.hertzen.com/dist/html2canvas.min.js';
+    document.head.appendChild(script);
+    
+    script.onload = () => {
+        html2canvas(document.getElementById('mindmap'), {
+            scale: 2,
+            backgroundColor: null
+        }).then(canvas => {
+            const link = document.createElement('a');
+            link.download = 'flowify-mindmap.png';
+            link.href = canvas.toDataURL('image/png');
+            link.click();
+        });
+    };
+}
+
+// Export as SVG
+function exportAsSVG() {
+    alert('SVG export functionality is under development. This feature will be available in a future update.');
+}
+
+// Share mindmap (placeholder)
+function shareMindmap() {
+    // Save current mindmap to localStorage
+    if (mindmap && mindmap.mindmap) {
+        const data = mindmap.mindmap.get_data();
+        const mindmapData = {
+            id: Date.now(),
+            title: data.data.topic || 'Video Topics',
+            data: data,
+            date: new Date().toISOString()
+        };
+        
+        saveMindmap(mindmapData);
+        
+        alert('Mindmap saved! You can access it from the Recent Mindmaps gallery.');
+    } else {
+        alert('No mindmap to share. Please analyze a video first.');
+    }
+}
+
+// Save mindmap to localStorage
+function saveMindmap(mindmapData) {
+    let savedMindmaps = getSavedMindmaps();
+    savedMindmaps.push(mindmapData);
+    
+    // Keep only the most recent 20 mindmaps
+    if (savedMindmaps.length > 20) {
+        savedMindmaps = savedMindmaps.slice(-20);
+    }
+    
+    localStorage.setItem('flowify-mindmaps', JSON.stringify(savedMindmaps));
+}
+
+// Get saved mindmaps from localStorage
+function getSavedMindmaps() {
+    const savedData = localStorage.getItem('flowify-mindmaps');
+    return savedData ? JSON.parse(savedData) : [];
+}
+
+// Load a mindmap from saved data
+function loadMindmap(mindmapData) {
+    if (mindmap && mindmap.mindmap && mindmapData.data) {
+        mindmap.mindmap.show(mindmapData.data);
+        mindmap.mindmapOverlay.classList.add('active');
+    }
+}
+
+class TopicMindmap {
+    constructor() {
+        this.mindmap = null;
+        this.container = 'mindmap';
+        this.zoomScale = 1;
+        this.isPanning = false;
+        this.panX = 0;
+        this.panY = 0;
+        this.isEditing = false;
+        this.segmentData = new Map();
+        
+        // Get DOM elements
+        this.mainVideo = document.getElementById('videoPlayer');
+        this.overlayVideo = document.getElementById('overlayVideo');
+        this.videoSection = document.getElementById('videoSection');
+        this.videoInfo = document.getElementById('videoInfo');
+        this.toolbar = document.querySelector('.mindmap-toolbar');
+        this.mindmapOverlay = document.getElementById('mindmapOverlay');
+        this.videoCloseButton = document.getElementById('videoCloseButton');
+        
+        // Context menu elements
+        this.contextMenu = document.getElementById('nodeContextMenu');
+        this.colorPicker = document.getElementById('colorPicker');
+        this.currentNodeId = null;
+        
+        // Initially hide video section
+        if (this.videoSection) {
+            this.videoSection.style.display = 'none';
+        }
+        
+        this.initialize();
+        this.setupToolbar();
+        this.setupNodeInteraction();
+        this.setupVideoCloseButton();
+        this.setupContextMenu();
+    }
+
+    initialize() {
+        const options = {
+            container: this.container,
+            theme: 'primary',
+            editable: true,
+            support_html: true,
+            view: {
+                draggable: true,
+                hmargin: 300,
+                vmargin: 200,
+                line_width: 2,
+                line_color: '#95a5a6',
+                node_spacing: 100
+            },
+            layout: {
+                hspace: 150,
+                vspace: 80,
+                pspace: 30
+            }
+        };
+
+        try {
+            // Add a style element for immediate expander fixes
+            this.addExpanderFixStyles();
+            
+            this.mindmap = new jsMind(options);
+            const emptyMind = this.createEmptyMindMap();
+            this.mindmap.show(emptyMind);
+            
+            const container = document.querySelector('.fullscreen-mindmap');
+            container.style.transformOrigin = '0 0';
+            container.style.position = 'absolute';
+            container.style.width = '100%';
+            container.style.height = '100%';
+            
+            const mindmapWrapper = document.getElementById('mindmap');
+            mindmapWrapper.style.position = 'absolute';
+            mindmapWrapper.style.width = '100%';
+            mindmapWrapper.style.height = '100%';
+            mindmapWrapper.style.overflow = 'visible';
+            
+            // Apply custom classes to expanders after rendering
+            this.applyCustomExpanderClasses();
+            
+            this.setupNodeInteraction();
+            this.setupPanning();
+        } catch (error) {
+            console.error('Error initializing mindmap:', error);
+        }
+    }
+
+    addExpanderFixStyles() {
+        // Add a style element to ensure expanders don't show any text content
+        const style = document.createElement('style');
+        style.textContent = `
+            jmexpander * {
+                display: none !important;
+            }
+            jmexpander::before, jmexpander::after {
+                display: none !important;
+            }
+        `;
+        document.head.appendChild(style);
+    }
+
+    setupNodeInteraction() {
+        // Remove any existing event listeners
+        const container = document.getElementById(this.container);
+        if (!container) return;
+
+        container.addEventListener('click', (e) => {
+            const target = e.target;
+            if (target.tagName.toLowerCase() === 'jmnode') {
+                const nodeId = target.getAttribute('nodeid');
+                if (nodeId) {
+                    this.handleNodeClick(nodeId);
+                }
+            }
+        });
+    }
+
+    handleNodeClick(nodeId) {
+        console.log('Node clicked:', nodeId);
+        const segmentInfo = this.segmentData.get(nodeId);
+        console.log('Segment info:', segmentInfo);
+        
+        if (segmentInfo && segmentInfo.timestamp !== undefined) {
+            // Show video section
+            if (this.videoSection) {
+                this.videoSection.style.display = 'block';
+                console.log('Video section displayed');
+            }
+            
+            // Adjust layout
+            if (this.toolbar) {
+                this.toolbar.classList.add('with-video');
+            }
+            
+            // Setup video
+            if (this.mainVideo && this.mainVideo.src && this.overlayVideo) {
+                console.log('Setting up video playback at time:', segmentInfo.timestamp);
+                
+                // Set video source if needed
+                if (this.overlayVideo.src !== this.mainVideo.src) {
+                    this.overlayVideo.src = this.mainVideo.src;
+                }
+                
+                // Get the timestamp as a number
+                let timeInSeconds = segmentInfo.timestamp;
+                
+                // If it's still a string (with brackets), parse it
+                if (typeof timeInSeconds === 'string') {
+                    if (timeInSeconds.startsWith('[') && timeInSeconds.endsWith(']')) {
+                        timeInSeconds = parseFloat(timeInSeconds.slice(1, -1));
+                    } else {
+                        timeInSeconds = parseFloat(timeInSeconds);
+                    }
+                }
+                
+                // Ensure we have a valid number
+                if (!isNaN(timeInSeconds)) {
+                    console.log('Seeking to time:', timeInSeconds);
+                    this.overlayVideo.currentTime = timeInSeconds;
+                    this.overlayVideo.play().catch(error => {
+                        console.error('Error playing video:', error);
+                    });
+                    
+                    // Update info
+                    if (this.videoInfo) {
+                        const timestamp = this.formatTimestamp(timeInSeconds);
+                        const content = segmentInfo.content.replace(/\[\d+(?:\.\d+)?\]\s*/, '');
+                        this.videoInfo.textContent = `${timestamp}: ${content}`;
+                    }
+                } else {
+                    console.error('Invalid timestamp:', segmentInfo.timestamp);
+                }
+            }
+            
+            // Update layout
+            this.updateLayout();
+        }
+    }
+
+    updateLayout() {
+        // Adjust mindmap section width when video is shown
+        const mindmapSection = document.querySelector('.mindmap-section');
+        const videoWidth = '40%';
+        const mindmapWidth = '60%';
+        
+        if (this.videoSection && this.videoSection.style.display === 'block') {
+            this.videoSection.style.width = videoWidth;
+            if (mindmapSection) {
+                mindmapSection.style.width = mindmapWidth;
+            }
+        }
+        
+        // Force mindmap refresh
+        if (this.mindmap) {
+            this.mindmap.resize();
+        }
+    }
+
+    setupNodeEditing() {
+        // Add double-click event listener for editing nodes
+        const container = document.getElementById(this.container);
+        container.addEventListener('dblclick', (e) => {
+            const target = e.target;
+            if (target.tagName.toLowerCase() === 'jmnode') {
+                this.editNode(target);
+            }
+        });
+
+        // Add node drag and drop functionality
+        container.addEventListener('mousedown', (e) => {
+            if (!this.isPanning && e.target.tagName.toLowerCase() === 'jmnode') {
+                this.startNodeDrag(e);
+            }
+        });
+    }
+
+    editNode(nodeElement) {
+        if (this.isPanning) return;
+        
+        const nodeId = nodeElement.getAttribute('nodeid');
+        const currentText = this.mindmap.get_node(nodeId).topic;
+        
+        // Create and style the input element
+        const input = document.createElement('input');
+        input.type = 'text';
+        input.value = currentText;
+        input.style.width = Math.max(nodeElement.offsetWidth, 100) + 'px';
+        input.style.height = nodeElement.offsetHeight + 'px';
+        input.style.position = 'absolute';
+        input.style.left = nodeElement.offsetLeft + 'px';
+        input.style.top = nodeElement.offsetTop + 'px';
+        input.style.zIndex = '1000';
+        input.style.padding = '4px';
+        input.style.border = '2px solid #3498db';
+        input.style.borderRadius = '4px';
+        input.style.backgroundColor = 'white';
+        
+        // Replace node with input
+        nodeElement.style.visibility = 'hidden';
+        nodeElement.parentNode.appendChild(input);
+        input.focus();
+        input.select();
+
+        const finishEditing = () => {
+            const newText = input.value.trim();
+            if (newText) {
+                this.mindmap.update_node(nodeId, newText);
+            }
+            nodeElement.style.visibility = 'visible';
+            input.remove();
+        };
+
+        input.addEventListener('blur', finishEditing);
+        input.addEventListener('keydown', (e) => {
+            if (e.key === 'Enter') {
+                finishEditing();
+            } else if (e.key === 'Escape') {
+                nodeElement.style.visibility = 'visible';
+                input.remove();
+            }
+        });
+    }
+
+    startNodeDrag(e) {
+        if (this.isPanning) return;
+
+        const nodeElement = e.target;
+        const nodeId = nodeElement.getAttribute('nodeid');
+        if (!nodeId) return;
+
+        const startX = e.clientX;
+        const startY = e.clientY;
+        const originalLeft = nodeElement.offsetLeft;
+        const originalTop = nodeElement.offsetTop;
+
+        const mouseMoveHandler = (e) => {
+            const dx = (e.clientX - startX) / this.zoomScale;
+            const dy = (e.clientY - startY) / this.zoomScale;
+            
+            nodeElement.style.left = (originalLeft + dx) / this.zoomScale + 'px';
+            nodeElement.style.top = (originalTop + dy) / this.zoomScale + 'px';
+            
+            // Update connected lines
+            this.mindmap.layout.layout();
+        };
+
+        const mouseUpHandler = () => {
+            document.removeEventListener('mousemove', mouseMoveHandler);
+            document.removeEventListener('mouseup', mouseUpHandler);
+            
+            // Ensure the mindmap updates its internal positions
+            this.mindmap.layout.layout();
+        };
+
+        document.addEventListener('mousemove', mouseMoveHandler);
+        document.addEventListener('mouseup', mouseUpHandler);
+    }
+
+    setupPanning() {
+        const container = document.querySelector('.fullscreen-mindmap');
+        const mindmapWrapper = document.getElementById('mindmap');
+        const panButton = document.getElementById('panButton');
+        
+        panButton.addEventListener('click', () => {
+            this.isPanning = !this.isPanning;
+            panButton.classList.toggle('active');
+            container.style.cursor = this.isPanning ? 'grab' : 'default';
+        });
+
+        container.addEventListener('wheel', (e) => {
+            if (e.ctrlKey) {
+                e.preventDefault();
+                const delta = e.deltaY * -0.01;
+                const newScale = Math.min(Math.max(this.zoomScale + delta, 0.1), 3);
+                
+                // Get mouse position relative to container
+                const rect = container.getBoundingClientRect();
+                const x = (e.clientX - rect.left) / this.zoomScale;
+                const y = (e.clientY - rect.top) / this.zoomScale;
+                
+                // Calculate new pan position to zoom towards mouse
+                const scale = newScale / this.zoomScale;
+                this.panX = x - (x - this.panX) * scale;
+                this.panY = y - (y - this.panY) * scale;
+                
+                this.zoomScale = newScale;
+                this.applyTransform();
+            }
+        });
+
+        container.addEventListener('mousedown', (e) => {
+            if (!this.isPanning) return;
+            
+            container.style.cursor = 'grabbing';
+            const startX = e.clientX - this.panX * this.zoomScale;
+            const startY = e.clientY - this.panY * this.zoomScale;
+            
+            const mouseMoveHandler = (e) => {
+                if (!this.isPanning) return;
+                
+                this.panX = (e.clientX - startX) / this.zoomScale;
+                this.panY = (e.clientY - startY) / this.zoomScale;
+                this.applyTransform();
+            };
+            
+            const mouseUpHandler = () => {
+                container.style.cursor = this.isPanning ? 'grab' : 'default';
+                document.removeEventListener('mousemove', mouseMoveHandler);
+                document.removeEventListener('mouseup', mouseUpHandler);
+            };
+            
+            document.addEventListener('mousemove', mouseMoveHandler);
+            document.addEventListener('mouseup', mouseUpHandler);
+        });
+    }
+
+    applyTransform() {
+        const container = document.querySelector('.fullscreen-mindmap');
+        const matrix = `matrix(${this.zoomScale}, 0, 0, ${this.zoomScale}, ${this.panX * this.zoomScale}, ${this.panY * this.zoomScale})`;
+        container.style.transform = matrix;
+    }
+
+    resetView() {
+        this.zoomScale = 1;
+        this.panX = 0;
+        this.panY = 0;
+        this.applyTransform();
+        
+        const panButton = document.getElementById('panButton');
+        this.isPanning = false;
+        panButton.classList.remove('active');
+        document.querySelector('.fullscreen-mindmap').style.cursor = 'default';
+        
+        if (this.mindmap) {
+            this.mindmap.resize();
+            
+            // Center the mindmap after reset
+            const container = document.querySelector('.fullscreen-mindmap');
+            const mindmapEl = document.getElementById(this.container);
+            if (container && mindmapEl) {
+                const containerRect = container.getBoundingClientRect();
+                const mindmapRect = mindmapEl.getBoundingClientRect();
+                
+                this.panX = (containerRect.width - mindmapRect.width) / 2;
+                this.panY = (containerRect.height - mindmapRect.height) / 2;
+                this.applyTransform();
+            }
+        }
+    }
+
+    setupToolbar() {
+        const backButton = document.getElementById('backButton');
+        const editButton = document.getElementById('editButton');
+        const zoomInButton = document.getElementById('zoomInButton');
+        const zoomOutButton = document.getElementById('zoomOutButton');
+        const resetButton = document.getElementById('resetButton');
+        const panButton = document.getElementById('panButton');
+
+        if (backButton) {
+            backButton.addEventListener('click', () => {
+                // Hide video section when closing
+                this.videoSection.classList.remove('active');
+                this.toolbar.classList.remove('with-video');
+                
+                // Stop video playback
+                if (this.overlayVideo.src) {
+                    this.overlayVideo.pause();
+                }
+                
+                document.getElementById('mindmapOverlay').classList.remove('active');
+            });
+
+        }
+
+        if (editButton) {
+            editButton.addEventListener('click', () => {
+                this.isEditing = !this.isEditing;
+                editButton.classList.toggle('active');
+                if (this.isEditing) {
+                    this.mindmap.enable_edit();
+                    editButton.innerHTML = '<i class="fas fa-edit"></i> Done';
+                } else {
+                    this.mindmap.disable_edit();
+                    editButton.innerHTML = '<i class="fas fa-edit"></i> Edit';
+                }
+            });
+        }
+
+        if (zoomInButton) {
+            zoomInButton.addEventListener('click', () => this.zoomIn());
+        }
+
+        if (zoomOutButton) {
+            zoomOutButton.addEventListener('click', () => this.zoomOut());
+        }
+
+        if (resetButton) {
+            resetButton.addEventListener('click', () => this.resetView());
+        }
+    }
+
+    createEmptyMindMap() {
+        return {
+            meta: {
+                name: 'Topics',
+                author: 'Video Analyzer',
+                version: '1.0'
+            },
+            format: 'node_tree',
+            data: {
+                id: 'root',
+                topic: 'Video Topics',
+                direction: 'center',
+                children: []
+            }
+        };
+    }
+
+    zoomIn() {
+        this.zoomScale = Math.min(this.zoomScale + 0.1, 2);
+        this.applyZoom();
+    }
+
+    zoomOut() {
+        this.zoomScale = Math.max(this.zoomScale - 0.1, 0.5);
+        this.applyZoom();
+    }
+
+    resetView() {
+        this.zoomScale = 1;
+        this.applyZoom();
+    }
+
+    applyZoom() {
+        const container = document.querySelector('.fullscreen-mindmap');
+        if (container) {
+            container.style.transform = `scale(${this.zoomScale})`;
+            container.style.transformOrigin = 'center center';
+        }
+    }
+
+    createMindMapData(segments) {
+        if (!segments || segments.length === 0) {
+            return this.createEmptyMindMap();
+        }
+
+        const mind = {
+            meta: {
+                name: 'Topics',
+                author: 'Video Analyzer',
+                version: '1.0'
+            },
+            format: 'node_tree',
+            data: {
+                id: 'root',
+                topic: 'Video Topics',
+                direction: 'center',
+                expanded: true,
+                children: []
+            }
+        };
+
+        // Clear previous segment data
+        this.segmentData.clear();
+
+        // Process each segment
+        let nodeId = 1;
+        
+        segments.forEach(segment => {
+            // Extract a cleaner topic name without repeating terms
+            const topicName = segment.topic_name.split(':')[1]?.trim() || segment.topic_name.trim();
+            
+            // Create the main topic node
+            const topicNode = {
+                id: `topic_${nodeId}`,
+                topic: topicName,
+                direction: this.getDirection(nodeId, segments.length),
+                expanded: false,
+                children: []
+            };
+            
+            // Store the timestamp for the main node
+            this.segmentData.set(`topic_${nodeId}`, {
+                timestamp: segment.timestamp || 0,
+                content: Array.isArray(segment.content) ? segment.content.join('\n') : segment.content
+            });
+            
+            // If this is a parent topic with children, add them as subnodes
+            if (segment.is_parent && segment.children && segment.children.length > 0) {
+                segment.children.forEach((child, childIndex) => {
+                    const childName = child.topic_name.split(':')[1]?.trim() || child.topic_name.trim();
+                    const childContent = Array.isArray(child.content) ? child.content.join('\n') : child.content;
+                    
+                    // Extract a meaningful snippet from the content
+                    let contentSnippet = '';
+                    const cleanContent = childContent.replace(/\[\d+(?:\.\d+)?\]\s*/g, '');
+                    contentSnippet = cleanContent.split('.')[0];
+                    if (contentSnippet.length > 50) {
+                        contentSnippet = contentSnippet.slice(0, 50) + '...';
+                    } else {
+                        contentSnippet += '...';
+                    }
+                    
+                    const childNodeId = `content_${nodeId}_${childIndex}`;
+                    
+                    topicNode.children.push({
+                        id: childNodeId,
+                        topic: childName,
+                        direction: topicNode.direction,
+                        expanded: false
+                    });
+                    
+                    // Store the timestamp and content for this child node
+                    this.segmentData.set(childNodeId, {
+                        timestamp: child.timestamp || 0,
+                        content: childContent
+                    });
+                });
+            } 
+            // For regular segments or parents without children, add their content as subnodes
+            else {
+                // Get the content as an array
+                const contentArray = Array.isArray(segment.content) ? segment.content : [segment.content];
+                
+                // If there's a lot of content, create content summary nodes
+                if (contentArray.length > 5) {
+                    // Create just one summary node for all content
+                    const contentNodeId = `content_${nodeId}_0`;
+                    
+                    // Create a content summary
+                    const cleanContent = contentArray.join(' ').replace(/\[\d+(?:\.\d+)?\]\s*/g, '');
+                    let contentSnippet = cleanContent.split('.')[0];
+                    if (contentSnippet.length > 50) {
+                        contentSnippet = contentSnippet.slice(0, 50) + '...';
+                    } else {
+                        contentSnippet += '...';
+                    }
+                    
+                    topicNode.children.push({
+                        id: contentNodeId,
+                        topic: contentSnippet,
+                        direction: topicNode.direction,
+                        expanded: false
+                    });
+                    
+                    // Store the timestamp and full content
+                    this.segmentData.set(contentNodeId, {
+                        timestamp: segment.timestamp || 0,
+                        content: contentArray.join('\n')
+                    });
+                } 
+                // For small segments, include separate nodes for each part
+                else {
+                    contentArray.forEach((content, index) => {
+                        if (typeof content === 'string' && content.trim()) {
+                            const contentNodeId = `content_${nodeId}_${index}`;
+                            
+                            // Clean up the content for display
+                            const cleanContent = content.replace(/\[\d+(?:\.\d+)?\]\s*/g, '');
+                            let contentSnippet = cleanContent.split('.')[0];
+                            if (contentSnippet.length > 50) {
+                                contentSnippet = contentSnippet.slice(0, 50) + '...';
+                            } else {
+                                contentSnippet += '...';
+                            }
+                            
+                            topicNode.children.push({
+                                id: contentNodeId,
+                                topic: contentSnippet,
+                                direction: topicNode.direction,
+                                expanded: false
+                            });
+                            
+                            // Store the timestamp and full content
+                            this.segmentData.set(contentNodeId, {
+                                timestamp: segment.timestamp || 0,
+                                content: content
+                            });
+                        }
+                    });
+                }
+            }
+            
+            mind.data.children.push(topicNode);
+            nodeId++;
+        });
+
+        return mind;
+    }
+    
+    extractTimestamp(text) {
+        // Look for timestamps in the format [X.X] or [X]
+        const matches = text.match(/\[(\d+(?:\.\d+)?)\]/g);
+        if (matches && matches.length > 0) {
+            // Extract the first timestamp found
+            const firstTimestamp = matches[0].replace('[', '').replace(']', '');
+            // Round down to the nearest second (floor)
+            const seconds = Math.floor(parseFloat(firstTimestamp));
+            console.log('Extracted timestamp:', seconds, 'from text:', text);
+            return seconds;
+        }
+        return 0;
+    }
+
+    getDirection(index, total) {
+        const halfTotal = Math.ceil(total / 2);
+        if (index <= halfTotal) {
+            return 'right';
+        } else {
+            return 'left';
+        }
+    }
+
+    update(segments) {
+        if (!this.mindmap) {
+            console.error('JSMind not initialized');
+            return;
+        }
+
+        try {
+            // Store any current node colors before updating
+            const nodeColors = this.saveNodeColors();
+            
+            // Clear previous data
+            this.segmentData.clear();
+            
+            // Create and show new mindmap
+            const mindData = this.createMindMapData(segments);
+            this.mindmap.show(mindData);
+            
+            // Save the mindmap to gallery
+            this.saveMindmapToGallery(mindData);
+            
+            // Restore node colors
+            this.restoreNodeColors(nodeColors);
+            
+            // Apply custom classes to expanders
+            this.applyCustomExpanderClasses();
+            
+            // Reset view and show overlay
+            this.resetView();
+            if (this.mindmapOverlay) {
+                this.mindmapOverlay.classList.add('active');
+            }
+            
+            // Hide video section initially
+            if (this.videoSection) {
+                this.videoSection.style.display = 'none';
+            }
+            
+            // Reset mindmap section to full width
+            const mindmapSection = document.querySelector('.mindmap-section');
+            if (mindmapSection) {
+                mindmapSection.style.width = '100%';
+            }
+            
+            // Remove video-related classes
+            if (this.toolbar) {
+                this.toolbar.classList.remove('with-video');
+            }
+            
+            // Reinitialize node interaction
+            this.setupNodeInteraction();
+            
+        } catch (error) {
+            console.error('Error updating mindmap:', error);
+        }
+    }
+    
+    saveMindmapToGallery(mindData) {
+        // Create mindmap data object
+        const mindmapData = {
+            id: Date.now(),
+            title: mindData.data.topic || 'Video Topics',
+            data: mindData,
+            date: new Date().toISOString()
+        };
+        
+        // Save to localStorage
+        saveMindmap(mindmapData);
+    }
+    
+    saveNodeColors() {
+        // Save current node colors
+        const nodeColors = {};
+        if (this.mindmap) {
+            const nodes = document.querySelectorAll('jmnode');
+            nodes.forEach(node => {
+                const nodeId = node.getAttribute('nodeid');
+                if (nodeId) {
+                    const colorClasses = [
+                        'node-blue', 'node-green', 'node-red', 'node-purple', 
+                        'node-orange', 'node-yellow', 'node-teal', 'node-gray'
+                    ];
+                    
+                    colorClasses.forEach(cls => {
+                        if (node.classList.contains(cls)) {
+                            nodeColors[nodeId] = cls.replace('node-', '');
+                        }
+                    });
+                }
+            });
+        }
+        return nodeColors;
+    }
+    
+    restoreNodeColors(nodeColors) {
+        // Restore saved node colors
+        if (nodeColors && Object.keys(nodeColors).length > 0) {
+            setTimeout(() => {
+                for (const [nodeId, color] of Object.entries(nodeColors)) {
+                    this.changeNodeColor(nodeId, color);
+                }
+            }, 100);
+        }
+    }
+
+    setupVideoCloseButton() {
+        if (this.videoCloseButton) {
+            this.videoCloseButton.addEventListener('click', () => {
+                this.closeVideoOverlay();
+            });
+        }
+    }
+    
+    closeVideoOverlay() {
+        // Hide video section
+        if (this.videoSection) {
+            this.videoSection.style.display = 'none';
+            
+            // Stop video playback
+            if (this.overlayVideo && this.overlayVideo.src) {
+                this.overlayVideo.pause();
+            }
+        }
+        
+        // Remove active class from toolbar
+        if (this.toolbar) {
+            this.toolbar.classList.remove('with-video');
+        }
+        
+        // Reset mindmap section to full width
+        const mindmapSection = document.querySelector('.mindmap-section');
+        if (mindmapSection) {
+            mindmapSection.style.width = '100%';
+        }
+        
+        // Force mindmap refresh
+        if (this.mindmap) {
+            this.mindmap.resize();
+        }
+    }
+
+    applyCustomExpanderClasses() {
+        // Add custom classes to expand/collapse buttons
+        setTimeout(() => {
+            this.processExpanders();
+            
+            // Set up a mutation observer to handle future changes
+            const observer = new MutationObserver(mutations => {
+                mutations.forEach(mutation => {
+                    if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
+                        this.processExpanders();
+                    }
+                });
+            });
+            
+            observer.observe(document.getElementById(this.container), {
+                childList: true,
+                subtree: true,
+                characterData: true
+            });
+        }, 100);
+    }
+    
+    processExpanders() {
+        const expanders = document.querySelectorAll('jmexpander');
+        expanders.forEach(expander => {
+            // Check if it's an expand or collapse button
+            if (expander.textContent.includes('+')) {
+                expander.classList.add('expand');
+                // Clear content more aggressively
+                expander.textContent = '';
+                expander.innerText = '';
+                expander.innerHTML = '';
+            } else if (expander.textContent.includes('-')) {
+                expander.classList.add('collapse');
+                // Clear content more aggressively
+                expander.textContent = '';
+                expander.innerText = '';
+                expander.innerHTML = '';
+            }
+        });
+    }
+
+    setupContextMenu() {
+        // Hide context menu when clicking elsewhere
+        document.addEventListener('click', (e) => {
+            if (!this.contextMenu.contains(e.target)) {
+                this.hideContextMenu();
+            }
+        });
+        
+        // Hide context menu on escape key
+        document.addEventListener('keydown', (e) => {
+            if (e.key === 'Escape') {
+                this.hideContextMenu();
+            }
+        });
+        
+        // Hide color picker by default and setup action handlers
+        this.colorPicker.style.display = 'none';
+        this.setupContextMenuActions();
+        
+        // Add event listeners for right-click context menu
+        const container = document.getElementById(this.container);
+        if (!container) return;
+
+        container.addEventListener('contextmenu', (e) => {
+            const target = e.target;
+            if (target.tagName.toLowerCase() === 'jmnode') {
+                e.preventDefault();
+                const nodeId = target.getAttribute('nodeid');
+                if (nodeId) {
+                    this.currentNodeId = nodeId;
+                    this.showContextMenu(e.clientX, e.clientY);
+                    
+                    // Update expand/collapse text based on node state
+                    const expandAction = document.getElementById('expandCollapseAction');
+                    const node = this.mindmap.get_node(nodeId);
+                    const isExpanded = this.mindmap.get_node_expanded(node);
+                    
+                    if (expandAction) {
+                        if (isExpanded) {
+                            expandAction.innerHTML = '<i class="fas fa-angle-double-up"></i> Collapse all children';
+                        } else {
+                            expandAction.innerHTML = '<i class="fas fa-angle-double-down"></i> Expand all children';
+                        }
+                    }
+                    
+                    // Disable parent addition for root node
+                    const addParentAction = document.getElementById('addParentAction');
+                    if (addParentAction) {
+                        if (nodeId === 'root') {
+                            addParentAction.classList.add('disabled');
+                            addParentAction.style.opacity = '0.5';
+                            addParentAction.style.cursor = 'not-allowed';
+                        } else {
+                            addParentAction.classList.remove('disabled');
+                            addParentAction.style.opacity = '1';
+                            addParentAction.style.cursor = 'pointer';
+                        }
+                    }
+                }
+            }
+        });
+    }
+    
+    setupContextMenuActions() {
+        // Edit node action
+        document.getElementById('editNodeAction').addEventListener('click', () => {
+            this.editNodeText(this.currentNodeId);
+            this.hideContextMenu();
+        });
+        
+        // Add child node action
+        document.getElementById('addChildAction').addEventListener('click', () => {
+            this.addChildNode(this.currentNodeId);
+            this.hideContextMenu();
+        });
+        
+        // Add parent node action
+        document.getElementById('addParentAction').addEventListener('click', () => {
+            if (this.currentNodeId !== 'root') {
+                this.addParentNode(this.currentNodeId);
+            }
+            this.hideContextMenu();
+        });
+        
+        // Focus on branch action
+        document.getElementById('focusNodeAction').addEventListener('click', () => {
+            this.focusOnNode(this.currentNodeId);
+            this.hideContextMenu();
+        });
+        
+        // Expand/collapse all children action
+        document.getElementById('expandCollapseAction').addEventListener('click', () => {
+            this.toggleExpandCollapseAll(this.currentNodeId);
+            this.hideContextMenu();
+        });
+        
+        // Open color picker
+        document.getElementById('nodeColorAction').addEventListener('click', (e) => {
+            e.stopPropagation();
+            this.toggleColorPicker();
+        });
+        
+        // Delete node action
+        document.getElementById('deleteNodeAction').addEventListener('click', () => {
+            this.deleteNode(this.currentNodeId);
+            this.hideContextMenu();
+        });
+        
+        // Color picker options
+        const colorOptions = document.querySelectorAll('.color-option');
+        colorOptions.forEach(option => {
+            option.addEventListener('click', (e) => {
+                const color = e.target.getAttribute('data-color');
+                this.changeNodeColor(this.currentNodeId, color);
+                this.hideContextMenu();
+            });
+        });
+    }
+
+    showContextMenu(x, y) {
+        // Reset color picker visibility
+        this.colorPicker.style.display = 'none';
+        
+        // Position the context menu
+        this.contextMenu.style.left = `${x}px`;
+        this.contextMenu.style.top = `${y}px`;
+        
+        // Show the context menu
+        this.contextMenu.classList.add('visible');
+    }
+
+    hideContextMenu() {
+        // Hide the context menu
+        this.contextMenu.classList.remove('visible');
+        this.colorPicker.style.display = 'none';
+    }
+    
+    toggleColorPicker() {
+        // Toggle color picker visibility
+        this.colorPicker.style.display = this.colorPicker.style.display === 'none' ? 'block' : 'none';
+    }
+    
+    editNodeText(nodeId) {
+        // Get the node element and its position
+        const node = this.mindmap.get_node(nodeId);
+        const nodeElement = document.querySelector(`jmnode[nodeid="${nodeId}"]`);
+        
+        if (!node || !nodeElement) return;
+        
+        // Get node position
+        const rect = nodeElement.getBoundingClientRect();
+        
+        // Create input element
+        const input = document.createElement('input');
+        input.type = 'text';
+        input.className = 'node-edit-input';
+        input.value = node.topic;
+        
+        // Position input over the node
+        input.style.left = `${rect.left}px`;
+        input.style.top = `${rect.top}px`;
+        input.style.width = `${Math.max(rect.width, 150)}px`;
+        
+        // Add input to DOM
+        document.body.appendChild(input);
+        
+        // Focus and select text
+        input.focus();
+        input.select();
+        
+        // Handle completion of editing
+        const completeEdit = () => {
+            const newText = input.value.trim();
+            if (newText && newText !== node.topic) {
+                this.mindmap.update_node(nodeId, newText);
+            }
+            document.body.removeChild(input);
+        };
+        
+        // Event listeners for input
+        input.addEventListener('blur', completeEdit);
+        input.addEventListener('keydown', (e) => {
+            if (e.key === 'Enter') {
+                completeEdit();
+            } else if (e.key === 'Escape') {
+                document.body.removeChild(input);
+            }
+        });
+    }
+    
+    addChildNode(parentId) {
+        // Generate a unique ID for the new node
+        const newNodeId = `node_${Date.now()}`;
+        
+        // Add a new child node
+        this.mindmap.add_node(parentId, newNodeId, 'New Node');
+        
+        // Ensure the parent is expanded
+        this.mindmap.expand_node(parentId);
+        
+        // After a small delay, edit the new node
+        setTimeout(() => {
+            this.editNodeText(newNodeId);
+        }, 100);
+    }
+    
+    addParentNode(childId) {
+        // This is a more complex operation as jsMind doesn't have direct support
+        const child = this.mindmap.get_node(childId);
+        if (!child || childId === 'root') return;
+        
+        const originalParentId = child.parent.id;
+        
+        // Generate a unique ID for the new parent node
+        const newParentId = `node_${Date.now()}`;
+        
+        // Add the new parent to the original parent
+        this.mindmap.add_node(originalParentId, newParentId, 'New Parent');
+        
+        // Move the child node to be under the new parent
+        this.mindmap.move_node(childId, newParentId);
+        
+        // Ensure nodes are expanded
+        this.mindmap.expand_node(originalParentId);
+        this.mindmap.expand_node(newParentId);
+        
+        // After a small delay, edit the new node
+        setTimeout(() => {
+            this.editNodeText(newParentId);
+        }, 100);
+    }
+    
+    focusOnNode(nodeId) {
+        // First, ensure the node and all its ancestors are expanded
+        let node = this.mindmap.get_node(nodeId);
+        while (node && node.id !== 'root') {
+            this.mindmap.expand_node(node.parent.id);
+            node = node.parent;
+        }
+        
+        // Get the node element
+        const nodeElement = document.querySelector(`jmnode[nodeid="${nodeId}"]`);
+        if (!nodeElement) return;
+        
+        // Get node position and center the view on it
+        const rect = nodeElement.getBoundingClientRect();
+        const containerRect = document.querySelector('.fullscreen-mindmap').getBoundingClientRect();
+        
+        // Calculate the center position
+        const centerX = containerRect.width / 2;
+        const centerY = containerRect.height / 2;
+        
+        // Calculate the target position to center the node
+        this.panX = centerX - rect.left - rect.width / 2;
+        this.panY = centerY - rect.top - rect.height / 2;
+        
+        // Apply the transformation
+        this.applyTransform();
+    }
+    
+    toggleExpandCollapseAll(nodeId) {
+        const node = this.mindmap.get_node(nodeId);
+        if (!node) return;
+        
+        const isExpanded = this.mindmap.get_node_expanded(node);
+        
+        if (isExpanded) {
+            // Collapse all descendants
+            this.collapseAllChildren(nodeId);
+        } else {
+            // Expand all descendants
+            this.expandAllChildren(nodeId);
+        }
+    }
+    
+    expandAllChildren(nodeId) {
+        // Recursively expand all nodes
+        const expandRecursively = (id) => {
+            const node = this.mindmap.get_node(id);
+            if (!node) return;
+            
+            this.mindmap.expand_node(id);
+            
+            if (node.children && node.children.length > 0) {
+                node.children.forEach(child => {
+                    expandRecursively(child.id);
+                });
+            }
+        };
+        
+        expandRecursively(nodeId);
+    }
+    
+    collapseAllChildren(nodeId) {
+        // Recursively collapse all nodes
+        const collapseRecursively = (id) => {
+            const node = this.mindmap.get_node(id);
+            if (!node) return;
+            
+            if (node.children && node.children.length > 0) {
+                node.children.forEach(child => {
+                    collapseRecursively(child.id);
+                });
+                this.mindmap.collapse_node(id);
+            }
+        };
+        
+        // We don't want to collapse the starting node itself
+        const node = this.mindmap.get_node(nodeId);
+        if (node && node.children && node.children.length > 0) {
+            node.children.forEach(child => {
+                collapseRecursively(child.id);
+            });
+        }
+    }
+    
+    changeNodeColor(nodeId, color) {
+        if (!nodeId || !color) return;
+        
+        // Get the node element
+        const nodeElement = document.querySelector(`jmnode[nodeid="${nodeId}"]`);
+        if (!nodeElement) return;
+        
+        // Remove existing color classes
+        const colorClasses = [
+            'node-blue', 'node-green', 'node-red', 'node-purple', 
+            'node-orange', 'node-yellow', 'node-teal', 'node-gray'
+        ];
+        
+        colorClasses.forEach(cls => {
+            nodeElement.classList.remove(cls);
+        });
+        
+        // Add the new color class
+        nodeElement.classList.add(`node-${color}`);
+        
+        // Store the color in the node data (if needed for persistence)
+        const node = this.mindmap.get_node(nodeId);
+        if (node) {
+            node.data = node.data || {};
+            node.data.color = color;
+        }
+    }
+    
+    deleteNode(nodeId) {
+        // Can't delete the root node
+        if (nodeId === 'root') return;
+        
+        // Confirm deletion
+        if (confirm('Are you sure you want to delete this node and all its children?')) {
+            this.mindmap.remove_node(nodeId);
+        }
+    }
+}
+
+// Custom Video Player
+function initCustomVideoPlayer() {
+    const videoPlayer = document.getElementById('videoPlayer');
+    const videoControls = document.querySelector('.video-controls');
+    const playPauseBtn = document.getElementById('playPauseBtn');
+    const progressBar = document.querySelector('.video-progress-bar');
+    const progress = document.querySelector('.video-progress');
+    const currentTimeDisplay = document.getElementById('currentTime');
+    const durationDisplay = document.getElementById('duration');
+    const muteBtn = document.getElementById('muteBtn');
+    const fullscreenBtn = document.getElementById('fullscreenBtn');
+    const videoContainer = document.querySelector('.video-preview');
+    
+    if (!videoPlayer || !videoControls) return;
+    
+    // Hide default controls (but keep them accessible for mobile/compatibility)
+    videoPlayer.controls = false;
+    
+    // Play/Pause
+    playPauseBtn.addEventListener('click', () => {
+        if (videoPlayer.paused) {
+            videoPlayer.play();
+            videoContainer.classList.add('playing');
+        } else {
+            videoPlayer.pause();
+            videoContainer.classList.remove('playing');
+        }
+    });
+    
+    // Update progress bar
+    videoPlayer.addEventListener('timeupdate', () => {
+        const percent = (videoPlayer.currentTime / videoPlayer.duration) * 100;
+        progressBar.style.width = `${percent}%`;
+        
+        // Update time display
+        currentTimeDisplay.textContent = formatTime(videoPlayer.currentTime);
+    });
+    
+    // Click on progress bar to seek
+    progress.addEventListener('click', (e) => {
+        const rect = progress.getBoundingClientRect();
+        const pos = (e.clientX - rect.left) / rect.width;
+        videoPlayer.currentTime = pos * videoPlayer.duration;
+    });
+    
+    // Load metadata (duration, etc.)
+    videoPlayer.addEventListener('loadedmetadata', () => {
+        durationDisplay.textContent = formatTime(videoPlayer.duration);
+    });
+    
+    // Mute/Unmute
+    muteBtn.addEventListener('click', () => {
+        videoPlayer.muted = !videoPlayer.muted;
+        muteBtn.innerHTML = videoPlayer.muted ? 
+            '<i class="fas fa-volume-mute"></i>' : 
+            '<i class="fas fa-volume-up"></i>';
+    });
+    
+    // Fullscreen
+    fullscreenBtn.addEventListener('click', () => {
+        if (videoContainer.requestFullscreen) {
+            videoContainer.requestFullscreen();
+        } else if (videoContainer.webkitRequestFullscreen) {
+            videoContainer.webkitRequestFullscreen();
+        } else if (videoContainer.msRequestFullscreen) {
+            videoContainer.msRequestFullscreen();
+        }
+    });
+    
+    // Update UI on play/pause
+    videoPlayer.addEventListener('play', () => {
+        videoContainer.classList.add('playing');
+    });
+    
+    videoPlayer.addEventListener('pause', () => {
+        videoContainer.classList.remove('playing');
+    });
+    
+    // Format time to MM:SS
+    function formatTime(seconds) {
+        const minutes = Math.floor(seconds / 60);
+        seconds = Math.floor(seconds % 60);
+        return `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
+    }
+}
+
+// Upload Particles Animation
+function initUploadParticles() {
+    const uploadContainer = document.querySelector('.upload-container');
+    const particles = document.querySelector('.particles');
+    
+    if (!uploadContainer || !particles) return;
+    
+    // Create particles
+    for (let i = 0; i < 15; i++) {
+        const particle = document.createElement('div');
+        particle.className = 'particle';
+        
+        // Random position
+        const posX = Math.random() * 100;
+        particle.style.left = `${posX}%`;
+        particle.style.bottom = '0';
+        
+        // Random size
+        const size = Math.random() * 4 + 2;
+        particle.style.width = `${size}px`;
+        particle.style.height = `${size}px`;
+        
+        // Random animation delay and duration
+        const delay = Math.random() * 2;
+        const duration = Math.random() * 2 + 1;
+        particle.style.animation = `particleAnimation ${duration}s ${delay}s infinite ease-out`;
+        
+        // Add to container
+        particles.appendChild(particle);
+    }
+    
+    // Show upload progress when uploading
+    const fileInput = document.getElementById('fileInput');
+    
+    uploadContainer.addEventListener('click', () => {
+        fileInput.click();
+    });
+    
+    // Drag and drop functionality with improved feedback
+    uploadContainer.addEventListener('dragover', (e) => {
+        e.preventDefault();
+        uploadContainer.classList.add('active');
+    });
+    
+    uploadContainer.addEventListener('dragleave', () => {
+        uploadContainer.classList.remove('active');
+    });
+    
+    uploadContainer.addEventListener('drop', (e) => {
+        e.preventDefault();
+        uploadContainer.classList.remove('active');
+        
+        if (e.dataTransfer.files.length) {
+            fileInput.files = e.dataTransfer.files;
+            fileInput.dispatchEvent(new Event('change'));
+        }
+    });
+}
+
+// Progress Steps Visualization
+function initProgressSteps() {
+    const uploadStep = document.getElementById('uploadStep');
+    const transcribeStep = document.getElementById('transcribeStep');
+    const analyzeStep = document.getElementById('analyzeStep');
+    const visualizeStep = document.getElementById('visualizeStep');
+    const progressBarFill = document.querySelector('.progress-bar-fill');
+    
+    if (!uploadStep || !progressBarFill) return;
+    
+    // Set initial state
+    setActiveStep('upload');
+    
+    // Update steps based on current operation
+    fileInput.addEventListener('change', () => {
+        setActiveStep('upload');
+    });
+    
+    transcribeButton.addEventListener('click', () => {
+        setTimeout(() => setActiveStep('transcribe'), 100);
+    });
+    
+    analyzeButton.addEventListener('click', () => {
+        setTimeout(() => setActiveStep('analyze'), 100);
+    });
+    
+    // Redefine the global setActiveStep function with the proper implementation
+    window.setActiveStep = function(step) {
+        // Skip if elements aren't available yet
+        if (!uploadStep || !progressBarFill) return;
+        
+        // Reset all steps
+        uploadStep.className = 'progress-step';
+        transcribeStep.className = 'progress-step';
+        analyzeStep.className = 'progress-step';
+        visualizeStep.className = 'progress-step';
+        
+        // Set progress level
+        let progressWidth = '0%';
+        
+        switch(step) {
+            case 'upload':
+                uploadStep.className = 'progress-step active';
+                progressWidth = '25%';
+                break;
+            case 'transcribe':
+                uploadStep.className = 'progress-step completed';
+                transcribeStep.className = 'progress-step active';
+                progressWidth = '50%';
+                break;
+            case 'analyze':
+                uploadStep.className = 'progress-step completed';
+                transcribeStep.className = 'progress-step completed';
+                analyzeStep.className = 'progress-step active';
+                progressWidth = '75%';
+                break;
+            case 'visualize':
+                uploadStep.className = 'progress-step completed';
+                transcribeStep.className = 'progress-step completed';
+                analyzeStep.className = 'progress-step completed';
+                visualizeStep.className = 'progress-step active';
+                progressWidth = '100%';
+                break;
+        }
+        
+        // Animate progress bar
+        progressBarFill.style.width = progressWidth;
+    };
+}

static/styles.css

@@ -0,0 +1,1889 @@
+/* Root Variables */
+:root {
+    /* Light Mode Colors */
+    --primary-color: #3498db;
+    --primary-dark: #2980b9;
+    --secondary-color: #2ecc71;
+    --secondary-dark: #27ae60;
+    --accent-color: #9b59b6;
+    --accent-dark: #8e44ad;
+    --background-color: #f8f9fa;
+    --surface-color: #ffffff;
+    --text-primary: #2c3e50;
+    --text-secondary: #7f8c8d;
+    --border-color: #e0e0e0;
+    --shadow-sm: 0 2px 4px rgba(0,0,0,0.05);
+    --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
+    --shadow-lg: 0 10px 15px rgba(0,0,0,0.1);
+    --radius-sm: 4px;
+    --radius-md: 8px;
+    --radius-lg: 12px;
+
+    /* Enhanced Typography */
+    --font-heading: 'Montserrat', 'Segoe UI', system-ui, -apple-system, sans-serif;
+    --font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
+    --font-mono: 'JetBrains Mono', 'Courier New', monospace;
+}
+
+/* Dark Mode Colors */
+[data-theme="dark"] {
+    --primary-color: #60a5fa;
+    --primary-dark: #3b82f6;
+    --secondary-color: #10b981;
+    --secondary-dark: #059669;
+    --accent-color: #c084fc;
+    --accent-dark: #a855f7;
+    --background-color: #111827;
+    --surface-color: #1f2937;
+    --text-primary: #f9fafb;
+    --text-secondary: #e5e7eb;
+    --border-color: #374151;
+    --shadow-sm: 0 2px 4px rgba(0,0,0,0.3);
+    --shadow-md: 0 4px 6px rgba(0,0,0,0.4);
+    --shadow-lg: 0 10px 15px rgba(0,0,0,0.5);
+}
+
+/* Reset & Base Styles */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+/* Font imports */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Montserrat:wght@500;600;700&display=swap');
+
+body {
+    font-family: var(--font-body);
+    background-color: var(--background-color);
+    color: var(--text-primary);
+    line-height: 1.6;
+    transition: background-color 0.3s ease, color 0.3s ease;
+}
+
+h1, h2, h3, h4, h5, h6 {
+    font-family: var(--font-heading);
+    font-weight: 600;
+    line-height: 1.3;
+    margin-bottom: 0.5em;
+    color: var(--text-primary);
+}
+
+code, pre {
+    font-family: var(--font-mono);
+    font-size: 0.9em;
+}
+
+/* Theme Toggle */
+.theme-toggle {
+    position: fixed;
+    top: 1rem;
+    right: 1rem;
+    z-index: 1001;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    background-color: var(--surface-color);
+    border-radius: 2rem;
+    padding: 0.35rem;
+    box-shadow: var(--shadow-md);
+    cursor: pointer;
+    border: 1px solid var(--border-color);
+    transition: all 0.2s ease;
+}
+
+.theme-toggle:hover {
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-lg);
+}
+
+.theme-toggle-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 2rem;
+    height: 2rem;
+    font-size: 1.2rem;
+    border-radius: 50%;
+    color: var(--text-primary);
+    transition: all 0.3s ease;
+}
+
+.theme-toggle-icon.light-icon {
+    background-color: var(--primary-color);
+    color: white;
+    transform: var(--theme-light-transform, scale(1));
+    opacity: var(--theme-light-opacity, 1);
+}
+
+.theme-toggle-icon.dark-icon {
+    background-color: transparent;
+    transform: var(--theme-dark-transform, scale(0.8));
+    opacity: var(--theme-dark-opacity, 0.5);
+}
+
+[data-theme="dark"] .theme-toggle-icon.light-icon {
+    background-color: transparent;
+    transform: scale(0.8);
+    opacity: 0.5;
+}
+
+[data-theme="dark"] .theme-toggle-icon.dark-icon {
+    background-color: var(--accent-color);
+    color: white;
+    transform: scale(1);
+    opacity: 1;
+}
+
+/* Layout */
+.app-container {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
+
+.app-header {
+    background-color: var(--surface-color);
+    padding: 1rem 2rem;
+    box-shadow: var(--shadow-sm);
+}
+
+.logo-container {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+}
+
+.logo-icon {
+    font-size: 2rem;
+    color: var(--primary-color);
+}
+
+.main-content {
+    flex: 1;
+    max-width: 1400px;
+    margin: 2rem auto;
+    padding: 0 2rem;
+    display: grid;
+    gap: 2rem;
+    grid-template-rows: auto minmax(0, 1fr);
+}
+
+/* Upload Panel */
+.upload-panel {
+    background-color: var(--surface-color);
+    border-radius: var(--radius-lg);
+    padding: 2rem;
+    box-shadow: var(--shadow-md);
+    max-height: fit-content;
+    overflow: hidden;
+}
+
+.upload-section {
+    display: grid;
+    grid-template-columns: 2fr 1fr;
+    gap: 2rem;
+    margin-bottom: 2rem;
+}
+
+.upload-container {
+    border: 2px dashed rgba(52, 152, 219, 0.3);
+    border-radius: var(--radius-lg);
+    padding: 2.5rem;
+    text-align: center;
+    transition: all 0.3s ease;
+    cursor: pointer;
+    background: linear-gradient(135deg, rgba(52, 152, 219, 0.02) 0%, rgba(52, 152, 219, 0.08) 100%);
+    position: relative;
+    overflow: hidden;
+}
+
+.upload-container::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: radial-gradient(circle at center, rgba(52, 152, 219, 0.1) 0%, transparent 70%);
+    opacity: 0;
+    transition: opacity 0.3s ease;
+}
+
+.upload-container:hover {
+    border-color: var(--primary-color);
+    transform: translateY(-5px);
+    box-shadow: 0 15px 30px -10px rgba(52, 152, 219, 0.15);
+}
+
+.upload-container:hover::before {
+    opacity: 1;
+}
+
+.upload-icon-container {
+    width: 80px;
+    height: 80px;
+    border-radius: 50%;
+    background-color: rgba(52, 152, 219, 0.1);
+    margin: 0 auto 1.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.3s ease;
+}
+
+.upload-container:hover .upload-icon-container {
+    background-color: rgba(52, 152, 219, 0.2);
+    transform: scale(1.1);
+}
+
+.upload-icon {
+    font-size: 2.5rem;
+    color: var(--primary-color);
+    transition: all 0.3s ease;
+}
+
+.upload-container:hover .upload-icon {
+    transform: translateY(-5px);
+}
+
+.upload-text {
+    font-family: var(--font-heading);
+    font-size: 1.25rem;
+    font-weight: 600;
+    color: var(--text-primary);
+    margin-bottom: 0.5rem;
+}
+
+.upload-subtext {
+    font-size: 0.95rem;
+    color: var(--text-secondary);
+    max-width: 80%;
+    margin: 0 auto;
+}
+
+/* Upload file particles */
+.particles {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+}
+
+.particle {
+    position: absolute;
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background-color: var(--primary-color);
+    opacity: 0;
+}
+
+.upload-container:hover .particles {
+    opacity: 1;
+}
+
+@keyframes particleAnimation {
+    0% { transform: translateY(0) scale(0); opacity: 0; }
+    50% { opacity: 0.8; }
+    100% { transform: translateY(-100px) scale(1); opacity: 0; }
+}
+
+/* Upload Progress Animations */
+.upload-progress {
+    width: 100%;
+    height: 4px;
+    margin-top: 1.5rem;
+    background-color: rgba(52, 152, 219, 0.1);
+    border-radius: 2px;
+    overflow: hidden;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+}
+
+.upload-progress-bar {
+    height: 100%;
+    width: 0;
+    background: linear-gradient(90deg, var(--primary-color), var(--primary-dark));
+    border-radius: 2px;
+    transition: width 0.3s ease;
+}
+
+.upload-container.uploading .upload-progress {
+    opacity: 1;
+}
+
+/* Dark Mode Adjustments */
+[data-theme="dark"] .upload-container {
+    border-color: rgba(96, 165, 250, 0.3);
+    background: linear-gradient(135deg, rgba(30, 41, 59, 0.5) 0%, rgba(30, 41, 59, 0.8) 100%);
+}
+
+[data-theme="dark"] .upload-container::before {
+    background: radial-gradient(circle at center, rgba(96, 165, 250, 0.15) 0%, transparent 70%);
+}
+
+[data-theme="dark"] .upload-icon-container {
+    background-color: rgba(96, 165, 250, 0.15);
+}
+
+/* Model Selector */
+.model-selector {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.model-label {
+    font-weight: 500;
+    color: var(--text-primary);
+}
+
+.select-wrapper {
+    position: relative;
+}
+
+.select-wrapper select {
+    width: 100%;
+    padding: 0.75rem;
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-sm);
+    appearance: none;
+    background-color: var(--surface-color);
+    font-size: 1rem;
+    color: var(--text-primary);
+}
+
+.select-icon {
+    position: absolute;
+    right: 1rem;
+    top: 50%;
+    transform: translateY(-50%);
+    color: var(--text-secondary);
+    pointer-events: none;
+}
+
+.model-status {
+    font-size: 0.9rem;
+    color: var(--text-secondary);
+}
+
+/* Video Preview */
+.video-preview {
+    margin: 2rem 0;
+    border-radius: var(--radius-md);
+    overflow: hidden;
+    background-color: #000;
+    position: relative;
+    box-shadow: 0 15px 25px -5px rgba(0, 0, 0, 0.15),
+                0 10px 10px -5px rgba(0, 0, 0, 0.05);
+}
+
+.video-preview video {
+    width: 100%;
+    object-fit: contain;
+    display: block;
+}
+
+.video-preview::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 90px;
+    background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 100%);
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+}
+
+.video-preview:hover::after {
+    opacity: 1;
+}
+
+.video-controls {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    padding: 1rem;
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    z-index: 10;
+    opacity: 0;
+    transform: translateY(10px);
+    transition: all 0.3s ease;
+}
+
+.video-preview:hover .video-controls {
+    opacity: 1;
+    transform: translateY(0);
+}
+
+.video-progress {
+    flex: 1;
+    height: 4px;
+    background-color: rgba(255, 255, 255, 0.2);
+    border-radius: 2px;
+    overflow: hidden;
+    cursor: pointer;
+    position: relative;
+}
+
+.video-progress-bar {
+    height: 100%;
+    width: 0;
+    background-color: var(--primary-color);
+    border-radius: 2px;
+    position: relative;
+}
+
+.video-progress-handle {
+    position: absolute;
+    right: -6px;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    background-color: white;
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
+    opacity: 0;
+    transition: opacity 0.2s ease;
+}
+
+.video-progress:hover .video-progress-handle {
+    opacity: 1;
+}
+
+.video-control-button {
+    background: transparent;
+    border: none;
+    color: white;
+    cursor: pointer;
+    width: 36px;
+    height: 36px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    transition: all 0.2s ease;
+}
+
+.video-control-button:hover {
+    background-color: rgba(255, 255, 255, 0.2);
+}
+
+.video-time {
+    color: white;
+    font-family: var(--font-mono);
+    font-size: 0.85rem;
+    min-width: 50px;
+    text-align: center;
+}
+
+.video-preview.playing .video-play-icon {
+    display: none;
+}
+
+.video-preview:not(.playing) .video-pause-icon {
+    display: none;
+}
+
+/* Action Buttons */
+.action-buttons {
+    display: flex;
+    gap: 1rem;
+    margin-bottom: 1.5rem;
+}
+
+.primary-button, .secondary-button {
+    padding: 0.75rem 1.5rem;
+    border: none;
+    border-radius: var(--radius-sm);
+    font-size: 1rem;
+    font-weight: 500;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    transition: all 0.2s ease;
+}
+
+.primary-button {
+    background-color: var(--primary-color);
+    color: white;
+}
+
+.primary-button:hover {
+    background-color: var(--primary-dark);
+}
+
+.secondary-button {
+    background-color: var(--secondary-color);
+    color: white;
+}
+
+.secondary-button:hover {
+    background-color: var(--secondary-dark);
+}
+
+.primary-button:disabled, .secondary-button:disabled {
+    background-color: var(--text-secondary);
+    cursor: not-allowed;
+    opacity: 0.7;
+}
+
+/* Progress Bar */
+.progress-container {
+    background-color: var(--background-color);
+    padding: 1.5rem;
+    border-radius: var(--radius-md);
+}
+
+.status-text {
+    margin-bottom: 0.75rem;
+    color: var(--text-secondary);
+}
+
+.progress-bar {
+    height: 0.5rem;
+    background-color: var(--border-color);
+    border-radius: 999px;
+    overflow: hidden;
+}
+
+.progress {
+    height: 100%;
+    background-color: var(--primary-color);
+    transition: width 0.3s ease;
+}
+
+/* Results Panel */
+.results-panel {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 2rem;
+    max-height: calc(100vh - 600px);
+    min-height: 500px;
+    overflow: hidden;
+}
+
+.transcription-container, .topics-container {
+    background-color: var(--surface-color);
+    border-radius: var(--radius-lg);
+    padding: 1.5rem;
+    box-shadow: var(--shadow-md);
+    display: flex;
+    flex-direction: column;
+    max-height: 100%;
+    overflow: hidden;
+}
+
+h2 {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    margin-bottom: 1rem;
+    padding-bottom: 0.75rem;
+    border-bottom: 2px solid var(--border-color);
+}
+
+.transcription-content, .topics-content {
+    max-height: 500px;
+    overflow-y: auto;
+    padding: 1rem;
+    background-color: var(--background-color);
+    border-radius: var(--radius-md);
+    font-size: 0.95rem;
+    line-height: 1.7;
+    height: 500px;
+    overflow-y: auto;
+    overflow-x: hidden;
+    word-wrap: break-word;
+}
+
+/* Topic Styles */
+.topic {
+    margin-bottom: 1.5rem;
+    padding: 1rem;
+    background-color: var(--surface-color);
+    border-left: 4px solid var(--primary-color);
+    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
+    box-shadow: var(--shadow-sm);
+}
+
+.topic-header {
+    font-weight: 600;
+    color: var(--text-primary);
+    margin-bottom: 0.5rem;
+}
+
+.topic-content {
+    color: var(--text-secondary);
+}
+
+/* Mindmap Overlay */
+.mindmap-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background-color: var(--background-color);
+    z-index: 1000;
+    display: none;
+}
+
+.mindmap-overlay.active {
+    display: block;
+}
+
+.mindmap-content {
+    display: flex;
+    height: 100vh;
+}
+
+/* Video Section */
+.video-section {
+    width: 40%;
+    padding: 2rem;
+    background-color: var(--surface-color);
+    border-right: 1px solid var(--border-color);
+    display: none;
+}
+
+.video-section.active {
+    display: block;
+}
+
+.video-player-container {
+    border-radius: var(--radius-md);
+    overflow: hidden;
+    background-color: #000;
+    margin-bottom: 1rem;
+}
+
+.video-player-container video {
+    width: 100%;
+    object-fit: contain;
+    display: block;
+}
+
+.video-info {
+    padding: 1rem;
+    background-color: var(--background-color);
+    border-radius: var(--radius-md);
+    font-size: 0.9rem;
+    color: var(--text-secondary);
+}
+
+/* Mindmap Section */
+.mindmap-section {
+    flex: 1;
+    position: relative;
+    overflow: hidden;
+}
+
+.mindmap-toolbar {
+    position: absolute;
+    top: 1rem;
+    left: 1rem;
+    z-index: 100;
+    display: flex;
+    gap: 0.5rem;
+    background-color: var(--surface-color);
+    padding: 0.5rem;
+    border-radius: var(--radius-md);
+    box-shadow: var(--shadow-md);
+}
+
+.tool-button {
+    padding: 0.5rem 1rem;
+    border: none;
+    border-radius: var(--radius-sm);
+    background-color: var(--surface-color);
+    color: var(--text-primary);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    transition: all 0.2s ease;
+}
+
+.tool-button:hover {
+    background-color: var(--background-color);
+    color: var(--primary-color);
+}
+
+.tool-button.active {
+    background-color: var(--primary-color);
+    color: white;
+}
+
+.fullscreen-mindmap {
+    width: 100%;
+    height: calc(100vh - 4rem);
+    position: relative;
+    overflow: hidden;
+}
+
+/* Responsive Design */
+@media (max-width: 1200px) {
+    .main-content {
+        padding: 0 1rem;
+    }
+    
+    .results-panel {
+        grid-template-columns: 1fr;
+    }
+}
+
+@media (max-width: 768px) {
+    .upload-section {
+        grid-template-columns: 1fr;
+    }
+    
+    .mindmap-content {
+        flex-direction: column;
+    }
+    
+    .video-section {
+        width: 100%;
+        border-right: none;
+        border-bottom: 1px solid var(--border-color);
+    }
+    
+    .tool-button {
+        padding: 0.5rem;
+    }
+    
+    .tool-button span {
+        display: none;
+    }
+}
+
+@media (max-width: 480px) {
+    .action-buttons {
+        flex-direction: column;
+    }
+    
+    .primary-button, .secondary-button {
+        width: 100%;
+        justify-content: center;
+    }
+}
+
+/* Custom Mindmap Node Styles */
+jmnode {
+    box-shadow: var(--shadow-sm);
+    border-radius: var(--radius-md);
+    padding: 8px 12px !important;
+    transition: all 0.2s ease;
+}
+
+jmnode:hover {
+    box-shadow: var(--shadow-md);
+    transform: translateY(-1px);
+}
+
+/* Improved Expand/Collapse Buttons */
+jmexpander {
+    width: 20px !important;
+    height: 20px !important;
+    border-radius: 50% !important;
+    background-color: var(--surface-color) !important;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
+    display: flex !important;
+    align-items: center;
+    justify-content: center;
+    font-size: 16px !important;
+    font-weight: bold;
+    color: var(--primary-color) !important;
+    transition: all 0.2s ease;
+    text-indent: -9999px !important;
+    overflow: hidden !important;
+    font-size: 0 !important;
+}
+
+jmexpander:hover {
+    background-color: var(--primary-color) !important;
+    color: white !important;
+    transform: scale(1.1);
+}
+
+/* Custom icons for expander instead of +/- */
+jmexpander.expand {
+    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%233498db" width="24px" height="24px"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>') !important;
+    background-position: center !important;
+    background-repeat: no-repeat !important;
+    background-size: 12px !important;
+}
+
+jmexpander.collapse {
+    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%233498db" width="24px" height="24px"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 13H5v-2h14v2z"/></svg>') !important;
+    background-position: center !important;
+    background-repeat: no-repeat !important;
+    background-size: 12px !important;
+}
+
+jmexpander.expand:hover, jmexpander.collapse:hover {
+    background-color: var(--primary-color) !important;
+    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="24px" height="24px"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>') !important;
+    background-size: 12px !important;
+}
+
+jmexpander.collapse:hover {
+    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="24px" height="24px"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 13H5v-2h14v2z"/></svg>') !important;
+}
+
+/* Video Close Button */
+.video-close-button {
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    background-color: var(--surface-color);
+    color: var(--text-primary);
+    border: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    box-shadow: var(--shadow-sm);
+    transition: all 0.2s ease;
+    z-index: 10;
+}
+
+.video-close-button:hover {
+    background-color: #f8f9fa;
+    color: var(--primary-color);
+    box-shadow: var(--shadow-md);
+}
+
+/* Line style improvements */
+jmnode.root {
+    background-color: var(--primary-color) !important;
+    color: white !important;
+}
+
+jmnode.root jmexpander {
+    background-color: white !important;
+}
+
+/* Connection lines styling */
+jmexpander::before {
+    border-color: var(--primary-color) !important;
+}
+
+/* Node Context Menu */
+.node-context-menu {
+    position: absolute;
+    background-color: var(--surface-color);
+    border-radius: var(--radius-md);
+    box-shadow: var(--shadow-lg);
+    padding: 0.5rem 0;
+    z-index: 2000;
+    min-width: 180px;
+    font-size: 0.9rem;
+    opacity: 0;
+    transform: scale(0.95);
+    transform-origin: top left;
+    transition: opacity 0.15s ease, transform 0.15s ease;
+    pointer-events: none;
+}
+
+.node-context-menu.visible {
+    opacity: 1;
+    transform: scale(1);
+    pointer-events: auto;
+}
+
+.context-menu-item {
+    padding: 0.6rem 1rem;
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    cursor: pointer;
+    transition: all 0.15s ease;
+    color: var(--text-primary);
+}
+
+.context-menu-item:hover {
+    background-color: rgba(52, 152, 219, 0.1);
+    color: var(--primary-color);
+}
+
+.context-menu-item i {
+    width: 16px;
+    text-align: center;
+}
+
+.context-menu-separator {
+    height: 1px;
+    background-color: var(--border-color);
+    margin: 0.5rem 0;
+}
+
+/* Node color picker */
+.color-picker-container {
+    padding: 0.5rem 1rem;
+}
+
+.color-picker-label {
+    display: block;
+    margin-bottom: 0.5rem;
+    font-size: 0.9rem;
+    color: var(--text-secondary);
+}
+
+.color-options {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+}
+
+.color-option {
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    cursor: pointer;
+    position: relative;
+    transition: transform 0.2s ease;
+}
+
+.color-option:hover {
+    transform: scale(1.15);
+}
+
+.color-option.selected::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background-color: white;
+}
+
+/* Node edit input */
+.node-edit-input {
+    position: absolute;
+    z-index: 2000;
+    padding: 8px 12px;
+    border: 2px solid var(--primary-color);
+    border-radius: var(--radius-md);
+    box-shadow: var(--shadow-md);
+    font-family: inherit;
+    font-size: 14px;
+    background-color: var(--surface-color);
+    width: auto;
+    min-width: 150px;
+}
+
+/* Custom node colors */
+jmnode.node-blue {
+    background-color: #3498db !important;
+    color: white !important;
+}
+
+jmnode.node-green {
+    background-color: #2ecc71 !important;
+    color: white !important;
+}
+
+jmnode.node-red {
+    background-color: #e74c3c !important;
+    color: white !important;
+}
+
+jmnode.node-purple {
+    background-color: #9b59b6 !important;
+    color: white !important;
+}
+
+jmnode.node-orange {
+    background-color: #e67e22 !important;
+    color: white !important;
+}
+
+jmnode.node-yellow {
+    background-color: #f1c40f !important;
+    color: #34495e !important;
+}
+
+jmnode.node-teal {
+    background-color: #1abc9c !important;
+    color: white !important;
+}
+
+jmnode.node-gray {
+    background-color: #95a5a6 !important;
+    color: white !important;
+}
+
+/* Node hover states with color indication */
+jmnode.node-blue:hover, jmnode.node-green:hover, jmnode.node-red:hover,
+jmnode.node-purple:hover, jmnode.node-orange:hover, jmnode.node-yellow:hover,
+jmnode.node-teal:hover, jmnode.node-gray:hover {
+    filter: brightness(1.1);
+}
+
+/* Floating Action Button (FAB) */
+.fab-container {
+    position: fixed;
+    bottom: 2rem;
+    right: 2rem;
+    z-index: 999;
+    display: flex;
+    flex-direction: column-reverse;
+    align-items: center;
+    gap: 0.75rem;
+}
+
+.fab-button {
+    width: 3.5rem;
+    height: 3.5rem;
+    border-radius: 50%;
+    background-color: var(--primary-color);
+    color: white;
+    border: none;
+    box-shadow: var(--shadow-lg);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.5rem;
+    cursor: pointer;
+    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+.fab-button:hover {
+    transform: scale(1.1);
+    background-color: var(--primary-dark);
+}
+
+.fab-button:active {
+    transform: scale(0.95);
+}
+
+.fab-options {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    opacity: 0;
+    pointer-events: none;
+    transform: translateY(1rem);
+    transition: all 0.3s ease;
+}
+
+.fab-container.active .fab-options {
+    opacity: 1;
+    pointer-events: auto;
+    transform: translateY(0);
+}
+
+.fab-container.active .fab-button {
+    transform: rotate(45deg);
+    background-color: var(--accent-color);
+}
+
+.fab-option {
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: 50%;
+    background-color: var(--surface-color);
+    color: var(--text-primary);
+    border: none;
+    box-shadow: var(--shadow-md);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1rem;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    position: relative;
+}
+
+.fab-option:hover {
+    transform: scale(1.1);
+    color: var(--primary-color);
+}
+
+.fab-option:hover::after {
+    content: attr(title);
+    position: absolute;
+    right: calc(100% + 0.75rem);
+    background-color: var(--surface-color);
+    color: var(--text-primary);
+    padding: 0.25rem 0.5rem;
+    border-radius: var(--radius-sm);
+    font-size: 0.8rem;
+    white-space: nowrap;
+    box-shadow: var(--shadow-sm);
+}
+
+/* Results Gallery */
+.gallery-container {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 2000;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.3s ease;
+}
+
+.gallery-container.active {
+    opacity: 1;
+    pointer-events: auto;
+}
+
+.gallery-content {
+    width: 90%;
+    max-width: 1200px;
+    height: 80%;
+    background-color: var(--surface-color);
+    border-radius: var(--radius-lg);
+    box-shadow: var(--shadow-lg);
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    transform: scale(0.95);
+    transition: transform 0.3s ease;
+}
+
+.gallery-container.active .gallery-content {
+    transform: scale(1);
+}
+
+.gallery-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 1rem 1.5rem;
+    border-bottom: 1px solid var(--border-color);
+}
+
+.gallery-header h2 {
+    margin: 0;
+    font-size: 1.5rem;
+    color: var(--text-primary);
+}
+
+.gallery-close {
+    width: 2rem;
+    height: 2rem;
+    border-radius: 50%;
+    background-color: transparent;
+    color: var(--text-primary);
+    border: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.2rem;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.gallery-close:hover {
+    background-color: rgba(0, 0, 0, 0.1);
+    color: var(--primary-color);
+}
+
+.gallery-content {
+    padding: 1.5rem;
+    overflow-y: auto;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    gap: 1.5rem;
+}
+
+.gallery-item {
+    border-radius: var(--radius-md);
+    overflow: hidden;
+    box-shadow: var(--shadow-md);
+    background-color: var(--background-color);
+    transition: all 0.2s ease;
+    cursor: pointer;
+    aspect-ratio: 16/9;
+    position: relative;
+}
+
+.gallery-item:hover {
+    transform: translateY(-0.5rem);
+    box-shadow: var(--shadow-lg);
+}
+
+.gallery-item-preview {
+    width: 100%;
+    height: 75%;
+    object-fit: cover;
+    background-color: var(--primary-color);
+    opacity: 0.8;
+}
+
+.gallery-item-info {
+    padding: 0.75rem;
+    display: flex;
+    flex-direction: column;
+}
+
+.gallery-item-title {
+    font-weight: 600;
+    font-size: 1rem;
+    color: var(--text-primary);
+    margin-bottom: 0.25rem;
+    display: -webkit-box;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}
+
+.gallery-item-date {
+    font-size: 0.8rem;
+    color: var(--text-secondary);
+}
+
+/* Dark Mode Adjustments for existing components */
+[data-theme="dark"] .app-header {
+    background-color: var(--surface-color);
+    border-bottom: 1px solid var(--border-color);
+}
+
+[data-theme="dark"] .logo-icon {
+    color: var(--primary-color);
+}
+
+[data-theme="dark"] .transcription-content,
+[data-theme="dark"] .topics-content {
+    background-color: #2d3748;
+    border: 1px solid var(--border-color);
+}
+
+[data-theme="dark"] .progress-container {
+    background-color: #2d3748;
+}
+
+[data-theme="dark"] .topic {
+    background-color: #2d3748;
+    border-left: 4px solid var(--primary-color);
+}
+
+[data-theme="dark"] jmnode {
+    background-color: #2d3748 !important;
+    color: var(--text-primary) !important;
+}
+
+[data-theme="dark"] jmnode.root {
+    background-color: var(--primary-color) !important;
+    color: white !important;
+}
+
+[data-theme="dark"] jmexpander {
+    background-color: #4a5568 !important;
+}
+
+[data-theme="dark"] .node-context-menu {
+    background-color: #2d3748;
+    border: 1px solid var(--border-color);
+}
+
+[data-theme="dark"] .context-menu-separator {
+    background-color: var(--border-color);
+}
+
+[data-theme="dark"] .context-menu-item:hover {
+    background-color: #4a5568;
+}
+
+/* 1. Elevated Card Design System */
+.card {
+    background-color: var(--surface-color);
+    border-radius: var(--radius-lg);
+    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05),
+                0 8px 10px -6px rgba(0, 0, 0, 0.02);
+    overflow: hidden;
+    border: 1px solid rgba(0, 0, 0, 0.04);
+    transition: all 0.3s ease;
+}
+
+.card:hover {
+    box-shadow: 0 15px 30px -5px rgba(0, 0, 0, 0.07),
+                0 10px 15px -3px rgba(0, 0, 0, 0.04);
+    transform: translateY(-2px);
+}
+
+.card-header {
+    padding: 1.25rem 1.5rem;
+    border-bottom: 1px solid var(--border-color);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.card-title {
+    font-family: var(--font-heading);
+    font-weight: 600;
+    font-size: 1.2rem;
+    margin: 0;
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    color: var(--text-primary);
+}
+
+.card-title i {
+    color: var(--primary-color);
+    font-size: 1.3rem;
+}
+
+.card-body {
+    padding: 1.5rem;
+}
+
+.card-footer {
+    padding: 1.25rem 1.5rem;
+    border-top: 1px solid var(--border-color);
+    background-color: rgba(0, 0, 0, 0.01);
+}
+
+/* 2. Micro-Interactions & Transitions */
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(10px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes pulse {
+    0% { transform: scale(1); }
+    50% { transform: scale(1.05); }
+    100% { transform: scale(1); }
+}
+
+@keyframes shimmer {
+    0% { background-position: -1000px 0; }
+    100% { background-position: 1000px 0; }
+}
+
+.animate-fade-in {
+    animation: fadeIn 0.4s ease forwards;
+}
+
+.animate-pulse {
+    animation: pulse 2s infinite ease-in-out;
+}
+
+/* 4. Custom Video Player Controls */
+.video-preview {
+    margin: 2rem 0;
+    border-radius: var(--radius-md);
+    overflow: hidden;
+    background-color: #000;
+    position: relative;
+    box-shadow: 0 15px 25px -5px rgba(0, 0, 0, 0.15),
+                0 10px 10px -5px rgba(0, 0, 0, 0.05);
+}
+
+.video-preview::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 90px;
+    background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 100%);
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+}
+
+.video-preview:hover::after {
+    opacity: 1;
+}
+
+.video-controls {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    padding: 1rem;
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    z-index: 10;
+    opacity: 0;
+    transform: translateY(10px);
+    transition: all 0.3s ease;
+}
+
+.video-preview:hover .video-controls {
+    opacity: 1;
+    transform: translateY(0);
+}
+
+.video-progress {
+    flex: 1;
+    height: 4px;
+    background-color: rgba(255, 255, 255, 0.2);
+    border-radius: 2px;
+    overflow: hidden;
+    cursor: pointer;
+    position: relative;
+}
+
+.video-progress-bar {
+    height: 100%;
+    width: 0;
+    background-color: var(--primary-color);
+    border-radius: 2px;
+    position: relative;
+}
+
+.video-progress-handle {
+    position: absolute;
+    right: -6px;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    background-color: white;
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
+    opacity: 0;
+    transition: opacity 0.2s ease;
+}
+
+.video-progress:hover .video-progress-handle {
+    opacity: 1;
+}
+
+.video-control-button {
+    background: transparent;
+    border: none;
+    color: white;
+    cursor: pointer;
+    width: 36px;
+    height: 36px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    transition: all 0.2s ease;
+}
+
+.video-control-button:hover {
+    background-color: rgba(255, 255, 255, 0.2);
+}
+
+.video-time {
+    color: white;
+    font-family: var(--font-mono);
+    font-size: 0.85rem;
+    min-width: 50px;
+    text-align: center;
+}
+
+.video-preview.playing .video-play-icon {
+    display: none;
+}
+
+.video-preview:not(.playing) .video-pause-icon {
+    display: none;
+}
+
+/* 5. Streamlined Action Buttons */
+.action-button {
+    padding: 0.9rem 1.8rem;
+    border: none;
+    border-radius: var(--radius-md);
+    font-size: 1rem;
+    font-weight: 600;
+    font-family: var(--font-heading);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.75rem;
+    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+    position: relative;
+    overflow: hidden;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
+                0 2px 4px -1px rgba(0, 0, 0, 0.06);
+}
+
+.action-button::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(120deg, rgba(255,255,255,0) 30%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 70%);
+    transform: translateX(-100%);
+    transition: all 0.6s ease;
+}
+
+.action-button:hover::before {
+    transform: translateX(100%);
+}
+
+.action-button i {
+    font-size: 1.1rem;
+    transition: transform 0.3s ease;
+}
+
+.action-button:hover i {
+    transform: scale(1.2);
+}
+
+.action-button:active {
+    transform: translateY(2px);
+    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+}
+
+.action-button.primary {
+    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
+    color: white;
+}
+
+.action-button.primary:hover {
+    background: linear-gradient(135deg, var(--primary-dark), var(--primary-color));
+    box-shadow: 0 10px 15px -3px rgba(52, 152, 219, 0.3),
+                0 4px 6px -2px rgba(52, 152, 219, 0.15);
+}
+
+.action-button.secondary {
+    background: linear-gradient(135deg, var(--secondary-color), var(--secondary-dark));
+    color: white;
+}
+
+.action-button.secondary:hover {
+    background: linear-gradient(135deg, var(--secondary-dark), var(--secondary-color));
+    box-shadow: 0 10px 15px -3px rgba(46, 204, 113, 0.3),
+                0 4px 6px -2px rgba(46, 204, 113, 0.15);
+}
+
+.action-button.disabled {
+    opacity: 0.7;
+    cursor: not-allowed;
+    background: #95a5a6;
+}
+
+.action-button.disabled::before {
+    display: none;
+}
+
+.action-button.processing {
+    position: relative;
+    overflow: hidden;
+}
+
+.action-button.processing::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, 
+        transparent 25%, 
+        rgba(255, 255, 255, 0.3) 50%, 
+        transparent 75%);
+    background-size: 200% 100%;
+    animation: shimmer 1.5s infinite linear;
+}
+
+/* 6. Content Container Improvements */
+.content-container {
+    background-color: var(--surface-color);
+    border-radius: var(--radius-lg);
+    overflow: hidden;
+    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05),
+                0 8px 10px -6px rgba(0, 0, 0, 0.02);
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    transition: all 0.3s ease;
+    border: 1px solid var(--border-color);
+}
+
+.content-header {
+    padding: 1.25rem 1.5rem;
+    border-bottom: 1px solid var(--border-color);
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+}
+
+.content-title {
+    font-family: var(--font-heading);
+    font-weight: 600;
+    font-size: 1.2rem;
+    margin: 0;
+    color: var(--text-primary);
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+}
+
+.content-title i {
+    color: var(--primary-color);
+    font-size: 1.3rem;
+}
+
+.content-body {
+    flex: 1;
+    overflow: hidden;
+    position: relative;
+}
+
+.content-scroll {
+    height: 100%;
+    overflow-y: auto;
+    padding: 1.5rem;
+    scrollbar-width: thin;
+    scrollbar-color: var(--border-color) transparent;
+}
+
+.content-scroll::-webkit-scrollbar {
+    width: 6px;
+}
+
+.content-scroll::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+.content-scroll::-webkit-scrollbar-thumb {
+    background-color: var(--border-color);
+    border-radius: 20px;
+}
+
+.empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 3rem 1.5rem;
+    color: var(--text-secondary);
+    text-align: center;
+}
+
+.empty-state i {
+    font-size: 3rem;
+    margin-bottom: 1rem;
+    opacity: 0.5;
+}
+
+.empty-state-title {
+    font-weight: 600;
+    margin-bottom: 0.5rem;
+    color: var(--text-primary);
+}
+
+.empty-state-description {
+    max-width: 300px;
+    margin: 0 auto;
+    font-size: 0.95rem;
+}
+
+/* 7. Status/Progress Visualization */
+.status-progress {
+    margin-top: 1.5rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+}
+
+.status-text {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    color: var(--text-secondary);
+    font-size: 0.95rem;
+}
+
+.status-text i {
+    color: var(--primary-color);
+}
+
+.progress-container {
+    background-color: var(--background-color);
+    padding: 1.5rem;
+    border-radius: var(--radius-md);
+    overflow: hidden;
+}
+
+.progress-steps {
+    display: flex;
+    margin-bottom: 1rem;
+    position: relative;
+}
+
+.progress-step {
+    flex: 1;
+    text-align: center;
+    position: relative;
+    padding-bottom: 1.5rem;
+}
+
+.progress-step-indicator {
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    background-color: var(--surface-color);
+    border: 2px solid var(--border-color);
+    margin: 0 auto 0.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    z-index: 2;
+    transition: all 0.3s ease;
+}
+
+.progress-step-line {
+    position: absolute;
+    top: 12px;
+    left: 0;
+    right: 0;
+    height: 2px;
+    background-color: var(--border-color);
+    z-index: 1;
+}
+
+.progress-step-icon {
+    color: var(--text-secondary);
+    font-size: 0.8rem;
+    opacity: 0;
+    transition: all 0.3s ease;
+}
+
+.progress-step-label {
+    font-size: 0.8rem;
+    font-weight: 500;
+    color: var(--text-secondary);
+    transition: all 0.3s ease;
+}
+
+.progress-step.active .progress-step-indicator {
+    background-color: var(--primary-color);
+    border-color: var(--primary-color);
+    transform: scale(1.1);
+    box-shadow: 0 0 0 4px rgba(52, 152, 219, 0.2);
+}
+
+.progress-step.active .progress-step-icon {
+    opacity: 1;
+    color: white;
+}
+
+.progress-step.active .progress-step-label {
+    color: var(--primary-color);
+    font-weight: 600;
+}
+
+.progress-step.completed .progress-step-indicator {
+    background-color: var(--primary-color);
+    border-color: var(--primary-color);
+}
+
+.progress-step.completed .progress-step-icon {
+    opacity: 1;
+    color: white;
+}
+
+.progress-step.completed + .progress-step .progress-step-line,
+.progress-step.active + .progress-step .progress-step-line {
+    background: linear-gradient(to right, var(--primary-color) 0%, var(--border-color) 100%);
+}
+
+.progress-step.completed .progress-step-line {
+    background-color: var(--primary-color);
+}
+
+.progress-bar {
+    height: 6px;
+    background-color: var(--border-color);
+    border-radius: 3px;
+    overflow: hidden;
+    margin: 0.5rem 0;
+}
+
+.progress-bar-fill {
+    height: 100%;
+    background: linear-gradient(90deg, var(--primary-color), var(--primary-dark));
+    border-radius: 3px;
+    transition: width 0.3s ease;
+    position: relative;
+    overflow: hidden;
+}
+
+.progress-bar-fill::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(
+        90deg,
+        rgba(255, 255, 255, 0) 0%,
+        rgba(255, 255, 255, 0.4) 50%,
+        rgba(255, 255, 255, 0) 100%
+    );
+    animation: shimmer 2s infinite linear;
+    transform: translateX(-100%);
+}
+
+/* Dark mode adjustments */
+[data-theme="dark"] .content-container {
+    border-color: var(--border-color);
+}
+
+[data-theme="dark"] .progress-container {
+    background-color: #2d3748;
+}
+
+[data-theme="dark"] .progress-step-indicator {
+    background-color: #4a5568;
+    border-color: #4a5568;
+}
+
+[data-theme="dark"] .progress-step-line {
+    background-color: #4a5568;
+}
+
+[data-theme="dark"] .progress-bar {
+    background-color: #4a5568;
+}
+
+.transcription-content {
+    width: 100%;
+    line-height: 1.6;
+}
+
+.transcription-content p {
+    margin-bottom: 8px;
+    padding: 8px;
+    border-radius: var(--radius-sm);
+    transition: background-color 0.2s ease;
+}
+
+.transcription-content p:hover {
+    background-color: rgba(52, 152, 219, 0.1);
+}

templates/index.html

@@ -0,0 +1,315 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="light">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Flowify</title>
+    
+    <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
+    <link type="text/css" rel="stylesheet" href="https://unpkg.com/jsmind@0.8.6/style/jsmind.css" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
+</head>
+<body>
+    <div class="app-container">
+        <header class="app-header">
+            <div class="logo-container">
+                <i class="fas fa-project-diagram logo-icon"></i>
+                <h1>Flowify</h1>
+            </div>
+        </header>
+
+        <!-- Theme Toggle Button -->
+        <div class="theme-toggle" id="themeToggle">
+            <div class="theme-toggle-icon light-icon">
+                <i class="fas fa-sun"></i>
+            </div>
+            <div class="theme-toggle-icon dark-icon">
+                <i class="fas fa-moon"></i>
+            </div>
+        </div>
+        
+        <main class="main-content">
+            <div class="upload-panel card">
+                <div class="card-body">
+                    <div class="upload-section">
+                        <div class="upload-container" id="dropZone">
+                            <div class="particles">
+                                <!-- Particles will be added dynamically via JS -->
+                            </div>
+                            <div class="upload-icon-container">
+                                <i class="fas fa-cloud-upload-alt upload-icon"></i>
+                            </div>
+                            <h3 class="upload-text">Drop video file here or click to upload</h3>
+                            <p class="upload-subtext">Supports MP4, WebM, MOV formats</p>
+                            <input type="file" id="fileInput" accept="video/*" style="display:none;">
+                            <div class="upload-progress">
+                                <div class="upload-progress-bar" style="width: 0%"></div>
+                            </div>
+                        </div>
+
+                        <div class="model-selector card">
+                            <div class="card-header">
+                                <h3 class="card-title"><i class="fas fa-cog"></i> Processing Model</h3>
+                            </div>
+                            <div class="card-body">
+                                <div class="select-wrapper">
+                                    <select id="modelSelector">
+                                        <option value="Xenova/whisper-tiny.en">Whisper Tiny (Fast)</option>
+                                        <option value="Xenova/whisper-base.en">Whisper Base</option>
+                                        <option value="Xenova/whisper-small.en" selected>Whisper Small</option>
+                                        <option value="Xenova/whisper-medium.en">Whisper Medium</option>
+                                    </select>
+                                    <i class="fas fa-chevron-down select-icon"></i>
+                                </div>
+                                <div id="modelStatus" class="model-status">
+                                    <i class="fas fa-check-circle"></i> Model available
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="video-preview">
+                        <video id="videoPlayer" controls></video>
+                        
+                        <!-- Custom Video Controls -->
+                        <div class="video-controls">
+                            <button class="video-control-button" id="playPauseBtn">
+                                <i class="fas fa-play video-play-icon"></i>
+                                <i class="fas fa-pause video-pause-icon"></i>
+                            </button>
+                            <div class="video-time" id="currentTime">0:00</div>
+                            <div class="video-progress">
+                                <div class="video-progress-bar">
+                                    <div class="video-progress-handle"></div>
+                                </div>
+                            </div>
+                            <div class="video-time" id="duration">0:00</div>
+                            <button class="video-control-button" id="muteBtn">
+                                <i class="fas fa-volume-up"></i>
+                            </button>
+                            <button class="video-control-button" id="fullscreenBtn">
+                                <i class="fas fa-expand"></i>
+                            </button>
+                        </div>
+                    </div>
+
+                    <div class="action-buttons">
+                        <button id="transcribeButton" class="action-button primary" disabled>
+                            <i class="fas fa-microphone"></i>
+                            Transcribe Video
+                        </button>
+                        <button id="analyzeButton" class="action-button secondary" disabled>
+                            <i class="fas fa-brain"></i>
+                            Analyze Topics
+                        </button>
+                    </div>
+
+                    <!-- New Progress Visualization -->
+                    <div class="status-progress animate-fade-in">
+                        <div class="status-text" id="status">
+                            <i class="fas fa-info-circle"></i>
+                            <span>Ready to transcribe</span>
+                        </div>
+                        
+                        <div class="progress-container">
+                            <div class="progress-steps">
+                                <div class="progress-step" id="uploadStep">
+                                    <div class="progress-step-line"></div>
+                                    <div class="progress-step-indicator">
+                                        <i class="fas fa-upload progress-step-icon"></i>
+                                    </div>
+                                    <div class="progress-step-label">Upload</div>
+                                </div>
+                                <div class="progress-step" id="transcribeStep">
+                                    <div class="progress-step-line"></div>
+                                    <div class="progress-step-indicator">
+                                        <i class="fas fa-microphone progress-step-icon"></i>
+                                    </div>
+                                    <div class="progress-step-label">Transcribe</div>
+                                </div>
+                                <div class="progress-step" id="analyzeStep">
+                                    <div class="progress-step-line"></div>
+                                    <div class="progress-step-indicator">
+                                        <i class="fas fa-brain progress-step-icon"></i>
+                                    </div>
+                                    <div class="progress-step-label">Analyze</div>
+                                </div>
+                                <div class="progress-step" id="visualizeStep">
+                                    <div class="progress-step-indicator">
+                                        <i class="fas fa-project-diagram progress-step-icon"></i>
+                                    </div>
+                                    <div class="progress-step-label">Visualize</div>
+                                </div>
+                            </div>
+                            
+                            <div class="progress-bar">
+                                <div class="progress-bar-fill" style="width: 0%"></div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="results-panel">
+                <div class="content-container animate-fade-in">
+                    <div class="content-header">
+                        <h2 class="content-title"><i class="fas fa-file-alt"></i> Transcription</h2>
+                    </div>
+                    <div class="content-body">
+                        <div id="transcription" class="content-scroll">
+                            <div class="empty-state">
+                                <i class="fas fa-file-alt"></i>
+                                <h3 class="empty-state-title">No transcription yet</h3>
+                                <p class="empty-state-description">Upload a video and click "Transcribe Video" to see the transcription here</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="content-container animate-fade-in">
+                    <div class="content-header">
+                        <h2 class="content-title"><i class="fas fa-list"></i> Topics</h2>
+                    </div>
+                    <div class="content-body">
+                        <div id="topicResults" class="content-scroll">
+                            <div class="empty-state">
+                                <i class="fas fa-brain"></i>
+                                <h3 class="empty-state-title">No topics analyzed</h3>
+                                <p class="empty-state-description">After transcribing, click "Analyze Topics" to identify key topics in your video</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </main>
+    </div>
+
+    <!-- Mindmap Overlay -->
+    <div id="mindmapOverlay" class="mindmap-overlay">
+        <div class="mindmap-content">
+            <div id="videoSection" class="video-section">
+                <div class="video-player-container">
+                    <video id="overlayVideo" controls>
+                        Your browser does not support the video element.
+                    </video>
+                    <button id="videoCloseButton" class="video-close-button">
+                        <i class="fas fa-times"></i>
+                    </button>
+                </div>
+                <div id="videoInfo" class="video-info"></div>
+            </div>
+            
+            <div class="mindmap-section">
+                <div class="mindmap-toolbar">
+                    <button id="backButton" class="tool-button">
+                        <i class="fas fa-arrow-left"></i> Back
+                    </button>
+                    <button id="editButton" class="tool-button">
+                        <i class="fas fa-edit"></i> Edit
+                    </button>
+                    <button id="zoomInButton" class="tool-button">
+                        <i class="fas fa-search-plus"></i> Zoom In
+                    </button>
+                    <button id="zoomOutButton" class="tool-button">
+                        <i class="fas fa-search-minus"></i> Zoom Out
+                    </button>
+                    <button id="panButton" class="tool-button">
+                        <i class="fas fa-hand-paper"></i> Pan
+                    </button>
+                    <button id="resetButton" class="tool-button">
+                        <i class="fas fa-sync"></i> Reset
+                    </button>
+                </div>
+                <div id="mindmap" class="fullscreen-mindmap"></div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Node Context Menu -->
+    <div id="nodeContextMenu" class="node-context-menu">
+        <div class="context-menu-item" id="editNodeAction">
+            <i class="fas fa-edit"></i>
+            Edit node
+        </div>
+        <div class="context-menu-item" id="addChildAction">
+            <i class="fas fa-plus-circle"></i>
+            Add child node
+        </div>
+        <div class="context-menu-item" id="addParentAction">
+            <i class="fas fa-level-up-alt"></i>
+            Add parent node
+        </div>
+        <div class="context-menu-separator"></div>
+        <div class="context-menu-item" id="focusNodeAction">
+            <i class="fas fa-search-plus"></i>
+            Focus on this branch
+        </div>
+        <div class="context-menu-item" id="expandCollapseAction">
+            <i class="fas fa-angle-double-down"></i>
+            Expand all children
+        </div>
+        <div class="context-menu-separator"></div>
+        <div class="context-menu-item" id="nodeColorAction">
+            <i class="fas fa-palette"></i>
+            Change color
+        </div>
+        <div class="color-picker-container" id="colorPicker" style="display: none;">
+            <div class="color-picker-label">Select a color:</div>
+            <div class="color-options">
+                <div class="color-option" style="background-color: #3498db;" data-color="blue"></div>
+                <div class="color-option" style="background-color: #2ecc71;" data-color="green"></div>
+                <div class="color-option" style="background-color: #e74c3c;" data-color="red"></div>
+                <div class="color-option" style="background-color: #9b59b6;" data-color="purple"></div>
+                <div class="color-option" style="background-color: #e67e22;" data-color="orange"></div>
+                <div class="color-option" style="background-color: #f1c40f;" data-color="yellow"></div>
+                <div class="color-option" style="background-color: #1abc9c;" data-color="teal"></div>
+                <div class="color-option" style="background-color: #95a5a6;" data-color="gray"></div>
+            </div>
+        </div>
+        <div class="context-menu-separator"></div>
+        <div class="context-menu-item" id="deleteNodeAction">
+            <i class="fas fa-trash-alt"></i>
+            Delete node
+        </div>
+    </div>
+    
+    <!-- Floating Action Button (FAB) -->
+    <div class="fab-container" id="fabContainer">
+        <button class="fab-button" id="mainFab">
+            <i class="fas fa-plus"></i>
+        </button>
+        <div class="fab-options">
+            <button class="fab-option" id="exportPdfBtn" title="Export as PDF">
+                <i class="fas fa-file-pdf"></i>
+            </button>
+            <button class="fab-option" id="exportPngBtn" title="Export as PNG">
+                <i class="fas fa-file-image"></i>
+            </button>
+            <button class="fab-option" id="exportSvgBtn" title="Export as SVG">
+                <i class="fas fa-file-code"></i>
+            </button>
+            <button class="fab-option" id="shareMindmapBtn" title="Share Mindmap">
+                <i class="fas fa-share-alt"></i>
+            </button>
+        </div>
+    </div>
+    
+    <!-- Results Gallery -->
+    <div class="gallery-container" id="resultsGallery">
+        <div class="gallery-header">
+            <h2>Recent Mindmaps</h2>
+            <button class="gallery-close" id="galleryClose">
+                <i class="fas fa-times"></i>
+            </button>
+        </div>
+        <div class="gallery-content" id="galleryContent">
+            <!-- Gallery items will be populated by JavaScript -->
+        </div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/@xenova/transformers@2.16.0"></script>
+    <script type="text/javascript" src="https://unpkg.com/jsmind@0.8.6/es6/jsmind.js"></script>
+    <script>window.jsMind = jsMind;</script>
+    <script type="module" src="{{ url_for('static', filename='script.js') }}"></script>
+</body>
+</html>

topic_segmenter.py

@@ -0,0 +1,519 @@
+import numpy as np
+from sklearn.feature_extraction.text import TfidfVectorizer
+from sklearn.metrics.pairwise import cosine_similarity
+from nltk.tokenize import sent_tokenize, word_tokenize
+from nltk.stem import WordNetLemmatizer
+from keybert import KeyBERT
+import re
+from collections import defaultdict
+from sklearn.cluster import AgglomerativeClustering
+
+class TopicSegmenter:
+    def __init__(self, window_size=3, similarity_threshold=0.2, context_size=2, min_segment_size=2, topic_similarity_threshold=0.3, 
+                max_topics=8, hierarchical_threshold=0.6):
+        self.window_size = window_size
+        self.similarity_threshold = similarity_threshold
+        self.context_size = context_size
+        self.min_segment_size = min_segment_size
+        self.topic_similarity_threshold = topic_similarity_threshold
+        self.max_topics = max_topics  # Maximum number of main topics
+        self.hierarchical_threshold = hierarchical_threshold  # Threshold for hierarchical clustering
+        self.keyword_extractor = KeyBERT()
+        
+        self.vectorizer = TfidfVectorizer(
+            stop_words='english',
+            min_df=1,
+            max_df=0.95,
+            ngram_range=(1, 2)
+        )
+        
+        self.segment_vectorizer = TfidfVectorizer(
+            stop_words='english',
+            min_df=1,
+            max_df=1.0,
+            ngram_range=(1, 2)
+        )
+        
+        self.lemmatizer = WordNetLemmatizer()
+        self.topic_history = []
+        self.topic_hierarchy = {}  # Store parent-child relationships
+        self.fitted_vectorizer = None
+        
+    def preprocess_text(self, text):
+        # First, split the text by timestamps
+        timestamp_chunks = re.findall(r'\[(\d+)\](.*?)(?=\[\d+\]|$)', text, re.DOTALL)
+        
+        all_sentences = []
+        original_sentences = []
+        timestamp_mapping = []  # To track which timestamp each sentence belongs to
+        
+        for timestamp, chunk_text in timestamp_chunks:
+            # Split each chunk into sentences
+            chunk_sentences = sent_tokenize(chunk_text.strip())
+            for sentence in chunk_sentences:
+                if sentence.strip():
+                    # Keep track of the original sentence
+                    original_sentences.append(sentence.strip())
+                    
+                    # Clean and process the sentence for analysis
+                    clean_sentence = re.sub(r'^[^:]+:', '', sentence).strip()
+                    clean_sentence = re.sub(r'[^\w\s]', '', clean_sentence.lower())
+                    words = word_tokenize(clean_sentence)
+                    lemmatized = [self.lemmatizer.lemmatize(word) for word in words]
+                    processed_sentence = ' '.join(lemmatized)
+                    
+                    all_sentences.append(processed_sentence)
+                    timestamp_mapping.append(int(timestamp))
+        
+        return all_sentences, original_sentences, timestamp_mapping
+    
+    def get_topic_fingerprint(self, segment_text):
+        cleaned_text = ' '.join([re.sub(r'^[^:]+:', '', sent).strip() for sent in segment_text])
+        
+        if self.fitted_vectorizer is None:
+            self.fitted_vectorizer = self.segment_vectorizer.fit([cleaned_text])
+            tfidf_matrix = self.fitted_vectorizer.transform([cleaned_text])
+        else:
+            tfidf_matrix = self.fitted_vectorizer.transform([cleaned_text])
+            
+        return tfidf_matrix.toarray()[0]
+
+    def compare_with_previous_topics(self, current_segment):
+        if not self.topic_history:
+            return None, 0.0
+
+        current_fingerprint = self.get_topic_fingerprint(current_segment)
+        max_similarity = 0.0
+        best_match_idx = None
+
+        for idx, (topic_fingerprint, _, _, _, _) in enumerate(self.topic_history):
+            if len(topic_fingerprint) != len(current_fingerprint):
+                continue
+                
+            similarity = cosine_similarity([topic_fingerprint], [current_fingerprint])[0][0]
+            if similarity > max_similarity:
+                max_similarity = similarity
+                best_match_idx = idx
+
+        return best_match_idx, max_similarity
+    
+    def extract_keywords(self, sentences, top_n=3):
+        if isinstance(sentences, list):
+            text = ' '.join(sentences)
+        else:
+            text = sentences
+            
+        keywords = self.keyword_extractor.extract_keywords(
+            text, 
+            keyphrase_ngram_range=(1, 2),  # Allow for 1-2 word keyphrases
+            stop_words='english',
+            top_n=top_n
+        )
+        
+        sorted_keywords = sorted(keywords, key=lambda x: x[1], reverse=True)
+        return [kw[0] for kw in sorted_keywords[:top_n]]
+
+    def detect_speaker_changes(self, text):
+        """
+        Detect points in the transcript where speakers change.
+        Returns a list of indices where speaker changes occur.
+        """
+        speaker_pattern = re.compile(r'(?:^|\s)(?:I\'m|And I\'m|Hey I\'m|I am)\s+([A-Z][a-z]+)', re.MULTILINE)
+        matches = list(speaker_pattern.finditer(text))
+        
+        speaker_boundaries = []
+        for match in matches:
+            # Find the sentence containing this speaker introduction
+            sentences = sent_tokenize(text[:match.end()])
+            if sentences:
+                speaker_boundaries.append(len(sentences) - 1)
+        
+        return speaker_boundaries
+
+    def find_closest_timestamp(self, sentence, transcript):
+        """
+        Find the timestamp after the most recent timestamp before the sentence.
+        """
+        chunks = re.findall(r'\[(\d+)\](.*?)(?=\[\d+\]|$)', transcript, re.DOTALL)
+        sentence = sentence.strip().lower()
+        
+        previous_timestamp = 0
+        current_timestamp = 0
+        
+        for i, (timestamp, text) in enumerate(chunks):
+            current_timestamp = int(timestamp)
+            text = text.strip().lower()
+            
+            if sentence in text or text in sentence:
+                if i > 0 and i < len(chunks):
+                    return current_timestamp
+                return previous_timestamp
+            
+            previous_timestamp = current_timestamp
+                
+        return current_timestamp 
+
+    def calculate_topic_importance(self, segment, total_segments):
+        """
+        Calculate importance score for a topic based on:
+        1. Length of the segment
+        2. Position in the transcript
+        3. Keyword significance
+        """
+        # Length factor - longer segments likely more important
+        length_score = min(1.0, len(segment) / 10)  # Cap at 1.0 for segments of 10+ sentences
+        
+        # Position factor - beginning and end often contain important information
+        position_in_doc = self.topic_history.index(segment) / total_segments
+        position_score = 1.0 - min(abs(position_in_doc - 0.0), abs(position_in_doc - 1.0))
+        
+        # Keyword significance - look for key terms indicating importance
+        importance_indicators = ['important', 'key', 'main', 'primary', 'critical', 'essential', 
+                                'significant', 'revolutionary', 'breakthrough', 'innovative']
+        
+        text = ' '.join(segment)
+        significance_score = 0.0
+        for indicator in importance_indicators:
+            if indicator in text.lower():
+                significance_score += 0.2  # Add 0.2 for each indicator found
+        significance_score = min(1.0, significance_score)  # Cap at 1.0
+        
+        # Combined score, weighted
+        combined_score = (0.4 * length_score) + (0.3 * position_score) + (0.3 * significance_score)
+        return combined_score
+    
+    def cluster_topics(self, segments):
+        """
+        Cluster similar topics together to form a hierarchy
+        """
+        if len(segments) <= 1:
+            return segments, []
+            
+        # Extract features for each segment
+        feature_vectors = []
+        for segment_idx, segment in enumerate(segments):
+            feature_vectors.append(self.get_topic_fingerprint(segment))
+            
+        feature_matrix = np.array(feature_vectors)
+        
+        # Use hierarchical clustering with compatible parameters
+        num_clusters = min(self.max_topics, len(segments))
+        
+        # Try different parameter combinations based on scikit-learn version compatibility
+        try:
+            # First attempt with basic parameters
+            clustering = AgglomerativeClustering(
+                n_clusters=num_clusters
+            )
+            labels = clustering.fit_predict(feature_matrix)
+        except Exception as e:
+            print(f"Clustering with default parameters failed: {str(e)}")
+            # Fallback to manual clustering based on similarity
+            labels = self.manual_clustering(feature_matrix, num_clusters)
+        
+        # Group segments by cluster
+        clusters = defaultdict(list)
+        for segment_idx, cluster_id in enumerate(labels):
+            clusters[cluster_id].append(segment_idx)
+            
+        # Create parent-child relationships
+        parent_child_map = {}
+        
+        for cluster_id, segment_indices in clusters.items():
+            # If cluster has multiple segments, create a parent topic
+            if len(segment_indices) > 1:
+                # Combine segments to create a parent topic
+                all_content = []
+                for idx in segment_indices:
+                    all_content.extend(segments[idx])
+                
+                # Extract the most representative keywords
+                keywords = self.extract_keywords(all_content, top_n=3)
+                parent_topic = f"{', '.join(keywords)}"
+                
+                # Add parent-child relationships
+                for idx in segment_indices:
+                    parent_child_map[idx] = parent_topic
+        
+        return labels, parent_child_map
+    
+    def manual_clustering(self, feature_matrix, num_clusters):
+        """
+        Implement a simple similarity-based clustering as fallback
+        """
+        n_samples = feature_matrix.shape[0]
+        
+        # If we have very few samples, each gets its own cluster
+        if n_samples <= num_clusters:
+            return np.arange(n_samples)
+            
+        # Calculate similarity matrix
+        similarity = cosine_similarity(feature_matrix)
+        
+        labels = np.arange(n_samples)
+        current_num_clusters = n_samples
+        
+        while current_num_clusters > num_clusters:
+            max_similarity = -1
+            merge_i, merge_j = 0, 0         
+            
+            for i in range(n_samples):
+                for j in range(i+1, n_samples):
+
+                    if labels[i] == labels[j]:
+                        continue
+                        
+                    if similarity[i, j] > max_similarity:
+                        max_similarity = similarity[i, j]
+                        merge_i, merge_j = i, j
+            
+            old_label = labels[merge_j]
+            new_label = labels[merge_i]
+            
+            for i in range(n_samples):
+                if labels[i] == old_label:
+                    labels[i] = new_label
+            
+            unique_labels = np.unique(labels)
+            mapping = {old: new for new, old in enumerate(unique_labels)}
+            labels = np.array([mapping[label] for label in labels])
+            
+            current_num_clusters -= 1
+            
+        return labels
+    
+    def segment_transcript(self, text):
+        cleaned_sentences, original_sentences, timestamp_mapping = self.preprocess_text(text)
+        
+        if len(cleaned_sentences) == 0:
+            return [], [], [], {}
+        
+        similarity_matrix = self.calculate_similarity_matrix(cleaned_sentences)
+        
+        content_boundaries = self.detect_topic_boundaries(similarity_matrix)
+        
+        speaker_boundaries = self.detect_speaker_changes(text)
+        
+        timestamp_boundaries = []
+        for i in range(1, len(timestamp_mapping)):
+            if timestamp_mapping[i] - timestamp_mapping[i-1] > 5:  # If there's a gap of more than 5 seconds
+                timestamp_boundaries.append(i)
+        
+        all_boundaries = sorted(set(content_boundaries + speaker_boundaries + timestamp_boundaries))
+        
+        initial_segments = []
+        initial_segment_texts = []
+        current_topic_id = 0
+        self.topic_history = []  # Reset topic history
+        
+        start_idx = 0
+        for boundary in all_boundaries + [len(original_sentences)]:
+            if boundary - start_idx < self.min_segment_size:
+                continue
+                
+            current_segment = original_sentences[start_idx:boundary]
+            segment_timestamps = timestamp_mapping[start_idx:boundary]
+            
+            closest_timestamp = segment_timestamps[0] if segment_timestamps else 0
+            
+            # Extract keywords directly from content without predefined categories
+            keywords = self.extract_keywords(current_segment, top_n=4)
+            
+            # Create topic name directly from the top keywords - completely dynamic
+            topic_name = f"{', '.join(keywords[:2])}"
+            
+            # Calculate importance score
+            topic_importance = len(current_segment) / 3  # Simple approach: longer segments are more important
+            
+            # Create a topic fingerprint
+            topic_fingerprint = self.get_topic_fingerprint(current_segment)
+            
+            # Store topic information
+            self.topic_history.append((topic_fingerprint, topic_name, [current_segment], closest_timestamp, topic_importance))
+            initial_segments.append(current_segment)
+            initial_segment_texts.append(topic_name)
+            
+            start_idx = boundary
+        
+        # Cluster segments to form hierarchical topics
+        if len(initial_segments) > 1:
+            cluster_labels, parent_child_map = self.cluster_topics(initial_segments)
+        else:
+            cluster_labels = [0] if initial_segments else []
+            parent_child_map = {}
+        
+        # Organize segments into hierarchical structure
+        final_segments = []
+        topic_mappings = []
+        topic_hierarchies = {}
+        
+        # Group by parent topics
+        parent_topic_groups = defaultdict(list)
+        
+        for i, segment in enumerate(initial_segments):
+            topic_id = i
+            
+            # Check if this segment belongs to a parent topic
+            if i in parent_child_map:
+                parent_topic = parent_child_map[i]
+                parent_id = len(self.topic_history)
+                
+                # If this is the first time seeing this parent topic
+                if parent_topic not in parent_topic_groups:
+                    # Add the parent topic to our history
+                    all_content = []
+                    for j, seg in enumerate(initial_segments):
+                        if j in parent_child_map and parent_child_map[j] == parent_topic:
+                            all_content.extend(seg)
+                    
+                    parent_fingerprint = self.get_topic_fingerprint(all_content)
+                    parent_timestamp = self.topic_history[i][3]  # Use timestamp of first segment
+                    parent_importance = 1.0  # Parent topics are most important
+                    
+                    self.topic_history.append((parent_fingerprint, parent_topic, [all_content], parent_timestamp, parent_importance))
+                    topic_hierarchies[parent_id] = [j for j, seg in enumerate(initial_segments) 
+                                               if j in parent_child_map and parent_child_map[j] == parent_topic]
+                
+                # Find the parent ID
+                for j, (_, name, _, _, _) in enumerate(self.topic_history):
+                    if name == parent_topic:
+                        parent_id = j
+                        break
+                
+                # Add to parent topic group
+                parent_topic_groups[parent_topic].append((segment, topic_id))
+            else:
+                # This is already a main topic
+                final_segments.append(segment)
+                topic_mappings.append(topic_id)
+        
+        # Add grouped segments under their parent topics
+        for parent_topic, segments_and_ids in parent_topic_groups.items():
+            # Find the parent ID
+            parent_id = None
+            for i, (_, name, _, _, _) in enumerate(self.topic_history):
+                if name == parent_topic:
+                    parent_id = i
+                    break
+            
+            if parent_id is not None:
+                # Add parent as a segment
+                parent_content = []
+                for segment, _ in segments_and_ids:
+                    parent_content.extend(segment)
+                
+                final_segments.append(parent_content)
+                topic_mappings.append(parent_id)
+                
+                # Add children segments
+                for segment, child_id in segments_and_ids:
+                    final_segments.append(segment)
+                    topic_mappings.append(child_id)
+        
+        # For topics that don't have many segments, merge them if they're similar
+        if len(final_segments) > self.max_topics * 2:
+            merged_segments = []
+            merged_mappings = []
+            i = 0
+            
+            while i < len(final_segments):
+                current_segment = final_segments[i]
+                current_mapping = topic_mappings[i]
+                
+                # If this is a short segment, try to merge with next
+                if len(current_segment) <= 2 and i + 1 < len(final_segments):
+                    next_segment = final_segments[i+1]
+                    combined = current_segment + next_segment
+                    
+                    # Use keywords to see if they're related
+                    current_keywords = self.extract_keywords(current_segment)
+                    next_keywords = self.extract_keywords(next_segment)
+                    
+                    # Check for keyword overlap
+                    overlap = any(kw in next_keywords for kw in current_keywords)
+                    
+                    if overlap:
+                        # Merge the segments
+                        merged_segments.append(combined)
+                        merged_mappings.append(current_mapping)  # Keep the first mapping
+                        i += 2  # Skip both segments
+                        continue
+                
+                # If no merge, keep as is
+                merged_segments.append(current_segment)
+                merged_mappings.append(current_mapping)
+                i += 1
+            
+            final_segments = merged_segments
+            topic_mappings = merged_mappings
+            
+        return final_segments, topic_mappings, self.topic_history, topic_hierarchies
+
+    def calculate_similarity_matrix(self, sentences):
+        if not sentences:
+            return np.array([[]])
+        tfidf_matrix = self.vectorizer.fit_transform(sentences)
+        return cosine_similarity(tfidf_matrix)
+
+    def detect_topic_boundaries(self, similarity_matrix):
+        boundaries = []
+        n_sentences = len(similarity_matrix)
+        
+        if n_sentences <= 2 * self.window_size:
+            return []
+        
+        for i in range(self.window_size, n_sentences - self.window_size):
+            prev_window = similarity_matrix[i-self.window_size:i, i-self.window_size:i]
+            prev_similarity = np.mean(prev_window)
+            
+            next_window = similarity_matrix[i:i+self.window_size, i:i+self.window_size]
+            next_similarity = np.mean(next_window)
+            
+            cross_window = similarity_matrix[i-self.window_size:i, i:i+self.window_size]
+            cross_similarity = np.mean(cross_window)
+            
+            # Stricter conditions for detecting boundaries
+            if (cross_similarity < self.similarity_threshold and
+                cross_similarity < prev_similarity * 0.7 and  # Increased constraint
+                cross_similarity < next_similarity * 0.7 and  # Increased constraint
+                (len(boundaries) == 0 or i - boundaries[-1] >= self.min_segment_size)):
+                boundaries.append(i)
+        
+        return boundaries
+    
+if __name__ == "__main__":
+    transcript = """
+[0] Hey I'm Stanley, I'm a Stanford CS major. I did fun at Engineering at Facebook. [4] Hey I'm Andy, I'm also a Stanford CS major and I did platform engineering at Facebook. [8] I'm Evan, I was on the founding team of Vivo, the music video service. [12] And I'm Tony, I was a product editor at Square. [15] And the four of us came together about six months ago to work on software for small business owners. [20] But we didn't have a need at first so we just went out and talked to all the small business owners we could find. [24] [6] After over a hundred interviews, we came across a really interesting problem with small business restaurants in an area like this. [30] Yeah, so it turns out restaurants in Palo Alto don't deliver even though they really [34] want to, but they can't afford it. [36] But their consumers are craving for it, but the places that the consumers love just can't [41] deliver. [42] And we also found out about these delivery drivers who had a ton of spare time and they [45] all wanted an extra cash during that downtime. [48] Right, so that's when we built an initial product, PaloAltodelivery.com, and how it [53] worked is the customer goes to the website and places it all in order that gets automatically [59] [32] since the restaurant [60] And then we as the dispatchers with some pretty neat routing and badging algorithms were able to send the drivers efficiently to [66] Get the orders to the customers at a really fast time. Yeah, and the four of us actually started off as delivery drivers and [74] Over time we hired more as we grew and in our first month of launch with not much marketing [80] We got over 150 paying customers in the Palo Alto area, which was really awesome [84] And from that we generated over $10,000 in sales
+    """
+    
+    segmenter = TopicSegmenter(
+        window_size=2,  # Smaller window for more granular segmentation
+        similarity_threshold=0.15,  # Lower threshold to detect more subtle changes
+        context_size=1,
+        min_segment_size=2,  # Smaller minimum size for segments
+        topic_similarity_threshold=0.25,  # Lower threshold to better distinguish topics
+        max_topics=5,  # Target number of main topics
+        hierarchical_threshold=0.6  # Threshold for hierarchical clustering
+    )
+    
+    segments, topic_mappings, topic_history, topic_hierarchies = segmenter.segment_transcript(transcript)
+    
+    print("Topic Segmentation Analysis:\n")
+    print(f"Found {len(set(topic_mappings))} distinct topics")
+    
+    # Print hierarchical topic structure
+    print("\nTopic Hierarchy:")
+    for parent_id, child_ids in topic_hierarchies.items():
+        parent_name = topic_history[parent_id][1]
+        print(f"Main Topic: {parent_name}")
+        for child_id in child_ids:
+            child_name = topic_history[child_id][1]
+            print(f"  - Subtopic: {child_name}")
+    
+    print("\nDetailed Segments:")
+    for i, (segment, topic_id) in enumerate(zip(segments, topic_mappings)):
+        print(f"Segment {i+1} (Part of {topic_history[topic_id][1]}):")
+        print(f"Closest Timestamp: {topic_history[topic_id][3]} seconds")
+        print("-" * 50)
+        print("\n".join(segment[:2]) + "..." if len(segment) > 2 else "\n".join(segment))
+        print("-" * 50 + "\n")