Spaces:

Fred808
/

llgen

Paused

App Files Files Community

Fred808 commited on Jul 14, 2025

Commit

4a88e2c

verified ·

1 Parent(s): ade2420

Upload 3 files

Browse files

Files changed (3) hide show

index.html +202 -0
script.js +655 -0
style.css +770 -0

index.html ADDED Viewed

	@@ -0,0 +1,202 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Advanced web-based dashboard for monitoring and managing cursor tracking operations on video datasets. Real-time processing status, file management, and control interface.">
+    <meta name="keywords" content="cursor tracking, video processing, dashboard, monitoring, API interface">
+    <meta name="author" content="Cursor Tracking Dashboard">
+    <title>Cursor Tracking Dashboard - Real-time Video Processing Monitor</title>
+    <link rel="stylesheet" href="style.css">
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+</head>
+<body>
+    <div class="container">
+        <!-- Header -->
+        <header class="header">
+            <div class="header-content">
+                <div class="logo">
+                    <i class="fas fa-mouse-pointer"></i>
+                    <h1>Cursor Tracking Dashboard</h1>
+                </div>
+                <div class="header-actions">
+                    <button id="refreshBtn" class="btn btn-secondary">
+                        <i class="fas fa-sync-alt"></i>
+                        Refresh
+                    </button>
+                    <div class="theme-toggle">
+                        <button id="themeToggle" class="btn btn-icon">
+                            <i class="fas fa-moon"></i>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </header>
+        <!-- Main Content -->
+        <main class="main-content">
+            <!-- Status Section -->
+            <section class="status-section">
+                <div class="card">
+                    <div class="card-header">
+                        <h2><i class="fas fa-chart-line"></i> Processing Status</h2>
+                        <div class="status-indicator" id="statusIndicator">
+                            <span class="status-dot"></span>
+                            <span class="status-text">Loading...</span>
+                        </div>
+                    </div>
+                    <div class="card-content">
+                        <div class="stats-grid">
+                            <div class="stat-item">
+                                <div class="stat-value" id="totalFiles">-</div>
+                                <div class="stat-label">Total Files</div>
+                            </div>
+                            <div class="stat-item">
+                                <div class="stat-value" id="processedFiles">-</div>
+                                <div class="stat-label">Processed</div>
+                            </div>
+                            <div class="stat-item">
+                                <div class="stat-value" id="extractedCourses">-</div>
+                                <div class="stat-label">Courses</div>
+                            </div>
+                            <div class="stat-item">
+                                <div class="stat-value" id="extractedVideos">-</div>
+                                <div class="stat-label">Videos</div>
+                            </div>
+                            <div class="stat-item">
+                                <div class="stat-value" id="extractedFrames">-</div>
+                                <div class="stat-label">Frames</div>
+                            </div>
+                            <div class="stat-item">
+                                <div class="stat-value" id="trackedCursors">-</div>
+                                <div class="stat-label">Cursors Tracked</div>
+                            </div>
+                        </div>
+                        <div class="progress-section">
+                            <div class="progress-info">
+                                <span>Current File:</span>
+                                <span id="currentFile" class="current-file">None</span>
+                            </div>
+                            <div class="progress-bar">
+                                <div class="progress-fill" id="progressFill"></div>
+                            </div>
+                            <div class="progress-text" id="progressText">0%</div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+            <!-- Control Section -->
+            <section class="control-section">
+                <div class="card">
+                    <div class="card-header">
+                        <h2><i class="fas fa-cogs"></i> Processing Controls</h2>
+                    </div>
+                    <div class="card-content">
+                        <div class="control-group">
+                            <div class="input-group">
+                                <label for="startIndex">Start Index for RAR Fetching:</label>
+                                <input type="number" id="startIndex" min="0" value="0" class="input">
+                                <span class="input-help">Specify which index to start processing from</span>
+                            </div>
+                            <div class="button-group">
+                                <button id="startProcessing" class="btn btn-primary">
+                                    <i class="fas fa-play"></i>
+                                    Start Processing
+                                </button>
+                                <button id="stopProcessing" class="btn btn-danger">
+                                    <i class="fas fa-stop"></i>
+                                    Stop Processing
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+            <!-- Cursor Data Files Section -->
+            <section class="files-section">
+                <div class="card">
+                    <div class="card-header">
+                        <h2><i class="fas fa-file-alt"></i> Cursor Tracking Results</h2>
+                        <div class="file-count" id="fileCount">0 files</div>
+                    </div>
+                    <div class="card-content">
+                        <div class="files-grid" id="filesGrid">
+                            <!-- Files will be populated here -->
+                        </div>
+                    </div>
+                </div>
+            </section>
+            <!-- Logs Section -->
+            <section class="logs-section">
+                <div class="card">
+                    <div class="card-header">
+                        <h2><i class="fas fa-terminal"></i> Processing Logs</h2>
+                        <div class="log-controls">
+                            <button id="clearLogs" class="btn btn-secondary btn-sm">
+                                <i class="fas fa-trash"></i>
+                                Clear
+                            </button>
+                            <button id="autoScroll" class="btn btn-secondary btn-sm active">
+                                <i class="fas fa-arrow-down"></i>
+                                Auto-scroll
+                            </button>
+                        </div>
+                    </div>
+                    <div class="card-content">
+                        <div class="logs-container" id="logsContainer">
+                            <div class="log-entry">
+                                <span class="log-time">[Loading...]</span>
+                                <span class="log-message">Initializing dashboard...</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </main>
+    </div>
+    <!-- File Details Modal -->
+    <div id="fileModal" class="modal">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h3 id="modalTitle">File Details</h3>
+                <button class="modal-close" id="modalClose">
+                    <i class="fas fa-times"></i>
+                </button>
+            </div>
+            <div class="modal-body" id="modalBody">
+                <!-- File details will be populated here -->
+            </div>
+            <div class="modal-footer">
+                <button id="downloadFile" class="btn btn-primary">
+                    <i class="fas fa-download"></i>
+                    Download JSON
+                </button>
+                <button id="viewFrames" class="btn btn-secondary">
+                    <i class="fas fa-images"></i>
+                    View Frames
+                </button>
+            </div>
+        </div>
+    </div>
+    <!-- Loading Overlay -->
+    <div id="loadingOverlay" class="loading-overlay">
+        <div class="loading-spinner">
+            <i class="fas fa-spinner fa-spin"></i>
+            <p>Loading...</p>
+        </div>
+    </div>
+    <!-- Toast Notifications -->
+    <div id="toastContainer" class="toast-container"></div>
+    <script src="script.js"></script>
+</body>
+</html>

script.js ADDED Viewed

	@@ -0,0 +1,655 @@

+// Configuration
+const API_BASE_URL = window.location.origin; // Use same origin as the UI
+const REFRESH_INTERVAL = 10000; // 10 seconds (increased for demo)
+const MAX_LOGS = 100;
+// Global state
+let refreshInterval;
+let autoScrollEnabled = true;
+let currentFiles = [];
+let selectedFile = null;
+let apiConnected = false;
+// DOM Elements
+const elements = {
+    statusIndicator: document.getElementById('statusIndicator'),
+    totalFiles: document.getElementById('totalFiles'),
+    processedFiles: document.getElementById('processedFiles'),
+    extractedCourses: document.getElementById('extractedCourses'),
+    extractedVideos: document.getElementById('extractedVideos'),
+    extractedFrames: document.getElementById('extractedFrames'),
+    trackedCursors: document.getElementById('trackedCursors'),
+    currentFile: document.getElementById('currentFile'),
+    progressFill: document.getElementById('progressFill'),
+    progressText: document.getElementById('progressText'),
+    startIndex: document.getElementById('startIndex'),
+    startProcessing: document.getElementById('startProcessing'),
+    stopProcessing: document.getElementById('stopProcessing'),
+    refreshBtn: document.getElementById('refreshBtn'),
+    themeToggle: document.getElementById('themeToggle'),
+    fileCount: document.getElementById('fileCount'),
+    filesGrid: document.getElementById('filesGrid'),
+    logsContainer: document.getElementById('logsContainer'),
+    clearLogs: document.getElementById('clearLogs'),
+    autoScroll: document.getElementById('autoScroll'),
+    fileModal: document.getElementById('fileModal'),
+    modalTitle: document.getElementById('modalTitle'),
+    modalBody: document.getElementById('modalBody'),
+    modalClose: document.getElementById('modalClose'),
+    downloadFile: document.getElementById('downloadFile'),
+    viewFrames: document.getElementById('viewFrames'),
+    loadingOverlay: document.getElementById('loadingOverlay'),
+    toastContainer: document.getElementById('toastContainer')
+};
+// Initialize the application
+document.addEventListener('DOMContentLoaded', function() {
+    initializeTheme();
+    setupEventListeners();
+    startAutoRefresh();
+    fetchInitialData();
+});
+// Theme Management
+function initializeTheme() {
+    const savedTheme = localStorage.getItem('theme') || 'light';
+    document.documentElement.setAttribute('data-theme', savedTheme);
+    updateThemeIcon(savedTheme);
+}
+function toggleTheme() {
+    const currentTheme = document.documentElement.getAttribute('data-theme');
+    const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+    document.documentElement.setAttribute('data-theme', newTheme);
+    localStorage.setItem('theme', newTheme);
+    updateThemeIcon(newTheme);
+}
+function updateThemeIcon(theme) {
+    const icon = elements.themeToggle.querySelector('i');
+    icon.className = theme === 'dark' ? 'fas fa-sun' : 'fas fa-moon';
+}
+// Event Listeners
+function setupEventListeners() {
+    elements.themeToggle.addEventListener('click', toggleTheme);
+    elements.refreshBtn.addEventListener('click', () => {
+        showToast('Refreshing data...', 'info');
+        fetchAllData();
+    });
+    elements.startProcessing.addEventListener('click', startProcessing);
+    elements.stopProcessing.addEventListener('click', stopProcessing);
+    elements.clearLogs.addEventListener('click', clearLogs);
+    elements.autoScroll.addEventListener('click', toggleAutoScroll);
+    elements.modalClose.addEventListener('click', closeModal);
+    elements.fileModal.addEventListener('click', (e) => {
+        if (e.target === elements.fileModal) closeModal();
+    });
+    elements.downloadFile.addEventListener('click', downloadSelectedFile);
+    elements.viewFrames.addEventListener('click', viewFrames);
+    // Keyboard shortcuts
+    document.addEventListener('keydown', (e) => {
+        if (e.key === 'Escape') closeModal();
+        if (e.key === 'F5') {
+            e.preventDefault();
+            fetchAllData();
+        }
+    });
+}
+// API Functions
+async function apiRequest(endpoint, options = {}) {
+    try {
+        showLoading();
+        const response = await fetch(`${API_BASE_URL}${endpoint}`, {
+            headers: {
+                'Content-Type': 'application/json',
+                ...options.headers
+            },
+            ...options
+        });
+        if (!response.ok) {
+            throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+        }
+        apiConnected = true;
+        return await response.json();
+    } catch (error) {
+        console.error('API request failed:', error);
+        apiConnected = false;
+        // Show different messages based on error type
+        if (error.name === 'TypeError' && error.message.includes('fetch')) {
+            showToast('API server not running. Please start the cursor tracking API on port 8000.', 'warning');
+        } else {
+            showToast(`API Error: ${error.message}`, 'error');
+        }
+        throw error;
+    } finally {
+        hideLoading();
+    }
+}
+async function fetchStatus() {
+    try {
+        const data = await apiRequest('/status');
+        updateStatusDisplay(data.processing_status);
+        return data;
+    } catch (error) {
+        // Show demo data when API is not connected
+        const demoStatus = {
+            is_running: false,
+            total_files: 150,
+            processed_files: 45,
+            extracted_courses: 12,
+            extracted_videos: 89,
+            extracted_frames_count: 15420,
+            tracked_cursors_count: 8934,
+            current_file: null,
+            logs: [
+                '[Demo Mode] API server not connected',
+                '[Demo Mode] This is a demonstration of the UI',
+                '[Demo Mode] Start the API server on port 8000 to see real data'
+            ]
+        };
+        updateStatusDisplay(demoStatus);
+    }
+}
+async function fetchCursorData() {
+    try {
+        const data = await apiRequest('/cursor-data');
+        currentFiles = data.files || [];
+        updateFilesDisplay(currentFiles);
+        return data;
+    } catch (error) {
+        // Show demo files when API is not connected
+        const demoFiles = [
+            {
+                filename: 'course_1_video_1_mp4_cursor_data.json',
+                size_bytes: 45678,
+                modified_time: 'Sun Jul 13 19:30:15 2025'
+            },
+            {
+                filename: 'course_2_video_3_mp4_cursor_data.json',
+                size_bytes: 67890,
+                modified_time: 'Sun Jul 13 18:45:22 2025'
+            },
+            {
+                filename: 'course_3_video_2_mp4_cursor_data.json',
+                size_bytes: 34567,
+                modified_time: 'Sun Jul 13 17:20:10 2025'
+            }
+        ];
+        currentFiles = demoFiles;
+        updateFilesDisplay(demoFiles);
+    }
+}
+async function fetchFileDetails(filename) {
+    try {
+        const data = await apiRequest(`/cursor-data/${filename}/summary`);
+        return data;
+    } catch (error) {
+        showToast(`Failed to fetch details for ${filename}`, 'error');
+        return null;
+    }
+}
+async function startProcessing() {
+    try {
+        const startIndex = parseInt(elements.startIndex.value) || 0;
+        const data = await apiRequest('/start-processing', {
+            method: 'POST',
+            body: JSON.stringify({ start_index: startIndex })
+        });
+        showToast(data.message, data.status === 'started' ? 'success' : 'info');
+        if (data.status === 'started') {
+            elements.startProcessing.disabled = true;
+            elements.stopProcessing.disabled = false;
+        }
+    } catch (error) {
+        showToast('Failed to start processing', 'error');
+    }
+}
+async function stopProcessing() {
+    try {
+        const data = await apiRequest('/stop-processing', {
+            method: 'POST'
+        });
+        showToast(data.message, 'info');
+        elements.startProcessing.disabled = false;
+        elements.stopProcessing.disabled = true;
+    } catch (error) {
+        showToast('Failed to stop processing', 'error');
+    }
+}
+// Display Update Functions
+function updateStatusDisplay(status) {
+    // Update status indicator
+    const statusDot = elements.statusIndicator.querySelector('.status-dot');
+    const statusText = elements.statusIndicator.querySelector('.status-text');
+    if (status.is_running) {
+        statusDot.className = 'status-dot running';
+        statusText.textContent = 'Processing';
+        elements.startProcessing.disabled = true;
+        elements.stopProcessing.disabled = false;
+    } else {
+        statusDot.className = 'status-dot stopped';
+        statusText.textContent = 'Idle';
+        elements.startProcessing.disabled = false;
+        elements.stopProcessing.disabled = true;
+    }
+    // Update statistics
+    elements.totalFiles.textContent = status.total_files || 0;
+    elements.processedFiles.textContent = status.processed_files || 0;
+    elements.extractedCourses.textContent = status.extracted_courses || 0;
+    elements.extractedVideos.textContent = status.extracted_videos || 0;
+    elements.extractedFrames.textContent = status.extracted_frames_count || 0;
+    elements.trackedCursors.textContent = status.tracked_cursors_count || 0;
+    // Update current file and progress
+    const currentFile = status.current_file || 'None';
+    elements.currentFile.textContent = currentFile;
+    const progress = status.total_files > 0 ?
+        Math.round((status.processed_files / status.total_files) * 100) : 0;
+    elements.progressFill.style.width = `${progress}%`;
+    elements.progressText.textContent = `${progress}%`;
+    // Update logs
+    if (status.logs && status.logs.length > 0) {
+        updateLogs(status.logs);
+    }
+}
+function updateFilesDisplay(files) {
+    elements.fileCount.textContent = `${files.length} files`;
+    if (files.length === 0) {
+        elements.filesGrid.innerHTML = `
+            <div class="no-files">
+                <i class="fas fa-folder-open" style="font-size: 3rem; color: var(--text-muted); margin-bottom: 1rem;"></i>
+                <p style="color: var(--text-muted);">No cursor tracking files found yet.</p>
+                <p style="color: var(--text-muted); font-size: 0.875rem;">Files will appear here after processing completes.</p>
+            </div>
+        `;
+        return;
+    }
+    elements.filesGrid.innerHTML = files.map(file => `
+        <div class="file-card" onclick="openFileModal('${file.filename}')">
+            <div class="file-header">
+                <div class="file-name">${file.filename}</div>
+                <div class="file-size">${formatFileSize(file.size_bytes)}</div>
+            </div>
+            <div class="file-stats">
+                <div class="file-stat">
+                    <span class="file-stat-label">Modified:</span>
+                    <span class="file-stat-value">${formatDate(file.modified_time)}</span>
+                </div>
+            </div>
+            <div class="file-actions">
+                <button class="btn btn-primary btn-sm" onclick="event.stopPropagation(); downloadFile('${file.filename}')">
+                    <i class="fas fa-download"></i>
+                    Download
+                </button>
+                <button class="btn btn-secondary btn-sm" onclick="event.stopPropagation(); openFileModal('${file.filename}')">
+                    <i class="fas fa-eye"></i>
+                    Details
+                </button>
+            </div>
+        </div>
+    `).join('');
+}
+function updateLogs(logs) {
+    const container = elements.logsContainer;
+    // Clear existing logs if we have new ones
+    if (logs.length > 0) {
+        container.innerHTML = '';
+    }
+    logs.slice(-MAX_LOGS).forEach(log => {
+        const logEntry = document.createElement('div');
+        logEntry.className = 'log-entry';
+        // Determine log type based on content
+        let logType = '';
+        if (log.includes('❌') || log.includes('ERROR') || log.includes('Failed')) {
+            logType = 'error';
+        } else if (log.includes('✅') || log.includes('SUCCESS') || log.includes('Successfully')) {
+            logType = 'success';
+        } else if (log.includes('⚠️') || log.includes('WARN')) {
+            logType = 'warning';
+        }
+        if (logType) {
+            logEntry.classList.add(logType);
+        }
+        // Extract timestamp and message
+        const timestampMatch = log.match(/^\[([^\]]+)\]/);
+        const timestamp = timestampMatch ? timestampMatch[1] : new Date().toLocaleTimeString();
+        const message = timestampMatch ? log.substring(timestampMatch[0].length).trim() : log;
+        logEntry.innerHTML = `
+            <span class="log-time">[${timestamp}]</span>
+            <span class="log-message">${escapeHtml(message)}</span>
+        `;
+        container.appendChild(logEntry);
+    });
+    // Auto-scroll to bottom if enabled
+    if (autoScrollEnabled) {
+        container.scrollTop = container.scrollHeight;
+    }
+}
+// Modal Functions
+async function openFileModal(filename) {
+    selectedFile = filename;
+    elements.modalTitle.textContent = `File Details: ${filename}`;
+    showModal();
+    const details = await fetchFileDetails(filename);
+    if (details) {
+        elements.modalBody.innerHTML = `
+            <div class="file-details">
+                <div class="detail-section">
+                    <h4>File Information</h4>
+                    <div class="detail-grid">
+                        <div class="detail-item">
+                            <span class="detail-label">File Size:</span>
+                            <span class="detail-value">${formatFileSize(details.file_size_bytes)}</span>
+                        </div>
+                        <div class="detail-item">
+                            <span class="detail-label">Modified:</span>
+                            <span class="detail-value">${details.modified_time}</span>
+                        </div>
+                    </div>
+                </div>
+                <div class="detail-section">
+                    <h4>Frame Statistics</h4>
+                    <div class="detail-grid">
+                        <div class="detail-item">
+                            <span class="detail-label">Total Frames:</span>
+                            <span class="detail-value">${details.total_frames}</span>
+                        </div>
+                        <div class="detail-item">
+                            <span class="detail-label">Cursor Active:</span>
+                            <span class="detail-value">${details.cursor_active_frames}</span>
+                        </div>
+                        <div class="detail-item">
+                            <span class="detail-label">Cursor Inactive:</span>
+                            <span class="detail-value">${details.cursor_inactive_frames}</span>
+                        </div>
+                        <div class="detail-item">
+                            <span class="detail-label">Detection Rate:</span>
+                            <span class="detail-value">${(details.cursor_detection_rate * 100).toFixed(1)}%</span>
+                        </div>
+                    </div>
+                </div>
+                <div class="detail-section">
+                    <h4>Confidence Statistics</h4>
+                    <div class="detail-grid">
+                        <div class="detail-item">
+                            <span class="detail-label">Average:</span>
+                            <span class="detail-value">${details.confidence_stats.average.toFixed(3)}</span>
+                        </div>
+                        <div class="detail-item">
+                            <span class="detail-label">Maximum:</span>
+                            <span class="detail-value">${details.confidence_stats.maximum.toFixed(3)}</span>
+                        </div>
+                        <div class="detail-item">
+                            <span class="detail-label">Minimum:</span>
+                            <span class="detail-value">${details.confidence_stats.minimum.toFixed(3)}</span>
+                        </div>
+                        <div class="detail-item">
+                            <span class="detail-label">Measurements:</span>
+                            <span class="detail-value">${details.confidence_stats.total_measurements}</span>
+                        </div>
+                    </div>
+                </div>
+                <div class="detail-section">
+                    <h4>Templates Used</h4>
+                    <div class="template-list">
+                        ${details.templates_used.length > 0 ?
+                            details.templates_used.map(template => `<span class="template-tag">${template}</span>`).join('') :
+                            '<span class="no-templates">No templates detected</span>'
+                        }
+                    </div>
+                </div>
+            </div>
+            <style>
+                .file-details { font-size: 0.875rem; }
+                .detail-section { margin-bottom: 1.5rem; }
+                .detail-section h4 {
+                    margin-bottom: 0.75rem;
+                    color: var(--accent-primary);
+                    font-weight: 600;
+                }
+                .detail-grid {
+                    display: grid;
+                    grid-template-columns: 1fr 1fr;
+                    gap: 0.5rem;
+                }
+                .detail-item {
+                    display: flex;
+                    justify-content: space-between;
+                    padding: 0.5rem;
+                    background: var(--bg-secondary);
+                    border-radius: var(--radius);
+                }
+                .detail-label { color: var(--text-secondary); }
+                .detail-value { font-weight: 500; }
+                .template-list {
+                    display: flex;
+                    flex-wrap: wrap;
+                    gap: 0.5rem;
+                }
+                .template-tag {
+                    background: var(--accent-primary);
+                    color: white;
+                    padding: 0.25rem 0.5rem;
+                    border-radius: var(--radius);
+                    font-size: 0.75rem;
+                }
+                .no-templates {
+                    color: var(--text-muted);
+                    font-style: italic;
+                }
+            </style>
+        `;
+    } else {
+        elements.modalBody.innerHTML = '<p>Failed to load file details.</p>';
+    }
+}
+function showModal() {
+    elements.fileModal.classList.add('show');
+    document.body.style.overflow = 'hidden';
+}
+function closeModal() {
+    elements.fileModal.classList.remove('show');
+    document.body.style.overflow = '';
+    selectedFile = null;
+}
+// File Operations
+async function downloadFile(filename) {
+    try {
+        const response = await fetch(`${API_BASE_URL}/cursor-data/${filename}`);
+        if (!response.ok) throw new Error('Download failed');
+        const blob = await response.blob();
+        const url = window.URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = filename;
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        window.URL.revokeObjectURL(url);
+        showToast(`Downloaded ${filename}`, 'success');
+    } catch (error) {
+        showToast(`Failed to download ${filename}`, 'error');
+    }
+}
+function downloadSelectedFile() {
+    if (selectedFile) {
+        downloadFile(selectedFile);
+    }
+}
+function viewFrames() {
+    if (selectedFile) {
+        showToast('Frame viewer feature coming soon!', 'info');
+    }
+}
+// Utility Functions
+function formatFileSize(bytes) {
+    if (bytes === 0) return '0 B';
+    const k = 1024;
+    const sizes = ['B', 'KB', 'MB', 'GB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+}
+function formatDate(dateString) {
+    try {
+        return new Date(dateString).toLocaleDateString();
+    } catch {
+        return dateString;
+    }
+}
+function escapeHtml(text) {
+    const div = document.createElement('div');
+    div.textContent = text;
+    return div.innerHTML;
+}
+// Log Management
+function clearLogs() {
+    elements.logsContainer.innerHTML = '<div class="log-entry"><span class="log-time">[' +
+        new Date().toLocaleTimeString() + ']</span><span class="log-message">Logs cleared</span></div>';
+    showToast('Logs cleared', 'info');
+}
+function toggleAutoScroll() {
+    autoScrollEnabled = !autoScrollEnabled;
+    elements.autoScroll.classList.toggle('active', autoScrollEnabled);
+    if (autoScrollEnabled) {
+        elements.logsContainer.scrollTop = elements.logsContainer.scrollHeight;
+    }
+}
+// Loading and Toast Functions
+function showLoading() {
+    elements.loadingOverlay.classList.add('show');
+}
+function hideLoading() {
+    elements.loadingOverlay.classList.remove('show');
+}
+function showToast(message, type = 'info', duration = 5000) {
+    const toast = document.createElement('div');
+    toast.className = `toast ${type}`;
+    const icons = {
+        success: 'fas fa-check-circle',
+        error: 'fas fa-exclamation-circle',
+        warning: 'fas fa-exclamation-triangle',
+        info: 'fas fa-info-circle'
+    };
+    toast.innerHTML = `
+        <i class="toast-icon ${icons[type]}"></i>
+        <div class="toast-content">
+            <div class="toast-message">${escapeHtml(message)}</div>
+        </div>
+        <button class="toast-close">
+            <i class="fas fa-times"></i>
+        </button>
+    `;
+    const closeBtn = toast.querySelector('.toast-close');
+    closeBtn.addEventListener('click', () => removeToast(toast));
+    elements.toastContainer.appendChild(toast);
+    // Auto-remove after duration
+    setTimeout(() => removeToast(toast), duration);
+}
+function removeToast(toast) {
+    if (toast && toast.parentNode) {
+        toast.style.animation = 'slideInRight 0.3s ease reverse';
+        setTimeout(() => {
+            if (toast.parentNode) {
+                toast.parentNode.removeChild(toast);
+            }
+        }, 300);
+    }
+}
+// Auto-refresh Management
+function startAutoRefresh() {
+    fetchAllData(); // Initial fetch
+    refreshInterval = setInterval(fetchAllData, REFRESH_INTERVAL);
+}
+function stopAutoRefresh() {
+    if (refreshInterval) {
+        clearInterval(refreshInterval);
+        refreshInterval = null;
+    }
+}
+async function fetchInitialData() {
+    await fetchAllData();
+}
+async function fetchAllData() {
+    try {
+        await Promise.all([
+            fetchStatus(),
+            fetchCursorData()
+        ]);
+    } catch (error) {
+        console.error('Failed to fetch data:', error);
+    }
+}
+// Cleanup on page unload
+window.addEventListener('beforeunload', () => {
+    stopAutoRefresh();
+});

style.css ADDED Viewed

	@@ -0,0 +1,770 @@

+/* Reset and Base Styles */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+:root {
+    /* Light theme colors */
+    --bg-primary: #ffffff;
+    --bg-secondary: #f8fafc;
+    --bg-tertiary: #f1f5f9;
+    --text-primary: #1e293b;
+    --text-secondary: #64748b;
+    --text-muted: #94a3b8;
+    --border-color: #e2e8f0;
+    --accent-primary: #3b82f6;
+    --accent-secondary: #8b5cf6;
+    --success: #10b981;
+    --warning: #f59e0b;
+    --danger: #ef4444;
+    --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+    --radius: 8px;
+    --radius-lg: 12px;
+    --transition: all 0.2s ease-in-out;
+}
+[data-theme="dark"] {
+    --bg-primary: #0f172a;
+    --bg-secondary: #1e293b;
+    --bg-tertiary: #334155;
+    --text-primary: #f8fafc;
+    --text-secondary: #cbd5e1;
+    --text-muted: #64748b;
+    --border-color: #334155;
+    --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.3), 0 1px 2px -1px rgb(0 0 0 / 0.3);
+    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.3), 0 4px 6px -4px rgb(0 0 0 / 0.3);
+}
+body {
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    background: var(--bg-secondary);
+    color: var(--text-primary);
+    line-height: 1.6;
+    transition: var(--transition);
+}
+/* Container */
+.container {
+    max-width: 1400px;
+    margin: 0 auto;
+    padding: 0 1rem;
+}
+/* Header */
+.header {
+    background: var(--bg-primary);
+    border-bottom: 1px solid var(--border-color);
+    padding: 1rem 0;
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    backdrop-filter: blur(10px);
+}
+.header-content {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+.logo {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+}
+.logo i {
+    font-size: 1.5rem;
+    color: var(--accent-primary);
+}
+.logo h1 {
+    font-size: 1.5rem;
+    font-weight: 600;
+    color: var(--text-primary);
+}
+.header-actions {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+}
+/* Main Content */
+.main-content {
+    padding: 2rem 0;
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+}
+/* Cards */
+.card {
+    background: var(--bg-primary);
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-lg);
+    box-shadow: var(--shadow);
+    overflow: hidden;
+    transition: var(--transition);
+}
+.card:hover {
+    box-shadow: var(--shadow-lg);
+}
+.card-header {
+    padding: 1.5rem;
+    border-bottom: 1px solid var(--border-color);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+.card-header h2 {
+    font-size: 1.25rem;
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+.card-header i {
+    color: var(--accent-primary);
+}
+.card-content {
+    padding: 1.5rem;
+}
+/* Status Section */
+.status-indicator {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 0.875rem;
+    font-weight: 500;
+}
+.status-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: var(--text-muted);
+    animation: pulse 2s infinite;
+}
+.status-dot.running {
+    background: var(--success);
+}
+.status-dot.stopped {
+    background: var(--danger);
+}
+.status-dot.idle {
+    background: var(--warning);
+}
+@keyframes pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.5; }
+}
+.stats-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+    gap: 1.5rem;
+    margin-bottom: 2rem;
+}
+.stat-item {
+    text-align: center;
+    padding: 1rem;
+    background: var(--bg-secondary);
+    border-radius: var(--radius);
+    transition: var(--transition);
+}
+.stat-item:hover {
+    transform: translateY(-2px);
+    box-shadow: var(--shadow);
+}
+.stat-value {
+    font-size: 2rem;
+    font-weight: 700;
+    color: var(--accent-primary);
+    margin-bottom: 0.25rem;
+}
+.stat-label {
+    font-size: 0.875rem;
+    color: var(--text-secondary);
+    font-weight: 500;
+}
+.progress-section {
+    background: var(--bg-secondary);
+    padding: 1.5rem;
+    border-radius: var(--radius);
+}
+.progress-info {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1rem;
+    font-size: 0.875rem;
+}
+.current-file {
+    font-weight: 600;
+    color: var(--accent-primary);
+    max-width: 300px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.progress-bar {
+    height: 8px;
+    background: var(--bg-tertiary);
+    border-radius: 4px;
+    overflow: hidden;
+    margin-bottom: 0.5rem;
+}
+.progress-fill {
+    height: 100%;
+    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
+    border-radius: 4px;
+    transition: width 0.3s ease;
+    width: 0%;
+}
+.progress-text {
+    text-align: center;
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: var(--text-secondary);
+}
+/* Control Section */
+.control-group {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+}
+.input-group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+.input-group label {
+    font-weight: 500;
+    color: var(--text-primary);
+}
+.input {
+    padding: 0.75rem;
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius);
+    background: var(--bg-primary);
+    color: var(--text-primary);
+    font-size: 0.875rem;
+    transition: var(--transition);
+    max-width: 200px;
+}
+.input:focus {
+    outline: none;
+    border-color: var(--accent-primary);
+    box-shadow: 0 0 0 3px rgb(59 130 246 / 0.1);
+}
+.input-help {
+    font-size: 0.75rem;
+    color: var(--text-muted);
+}
+.button-group {
+    display: flex;
+    gap: 1rem;
+    flex-wrap: wrap;
+}
+/* Buttons */
+.btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.75rem 1.5rem;
+    border: none;
+    border-radius: var(--radius);
+    font-size: 0.875rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: var(--transition);
+    text-decoration: none;
+    white-space: nowrap;
+}
+.btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+.btn-primary {
+    background: var(--accent-primary);
+    color: white;
+}
+.btn-primary:hover:not(:disabled) {
+    background: #2563eb;
+    transform: translateY(-1px);
+    box-shadow: var(--shadow);
+}
+.btn-secondary {
+    background: var(--bg-secondary);
+    color: var(--text-primary);
+    border: 1px solid var(--border-color);
+}
+.btn-secondary:hover:not(:disabled) {
+    background: var(--bg-tertiary);
+    transform: translateY(-1px);
+}
+.btn-danger {
+    background: var(--danger);
+    color: white;
+}
+.btn-danger:hover:not(:disabled) {
+    background: #dc2626;
+    transform: translateY(-1px);
+    box-shadow: var(--shadow);
+}
+.btn-sm {
+    padding: 0.5rem 1rem;
+    font-size: 0.75rem;
+}
+.btn-icon {
+    padding: 0.75rem;
+    width: auto;
+    height: auto;
+}
+.btn.active {
+    background: var(--accent-primary);
+    color: white;
+}
+/* Files Section */
+.file-count {
+    font-size: 0.875rem;
+    color: var(--text-secondary);
+    font-weight: 500;
+}
+.files-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    gap: 1rem;
+}
+.file-card {
+    background: var(--bg-secondary);
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius);
+    padding: 1rem;
+    transition: var(--transition);
+    cursor: pointer;
+}
+.file-card:hover {
+    transform: translateY(-2px);
+    box-shadow: var(--shadow);
+    border-color: var(--accent-primary);
+}
+.file-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    margin-bottom: 0.75rem;
+}
+.file-name {
+    font-weight: 600;
+    color: var(--text-primary);
+    font-size: 0.875rem;
+    word-break: break-word;
+    flex: 1;
+    margin-right: 0.5rem;
+}
+.file-size {
+    font-size: 0.75rem;
+    color: var(--text-muted);
+    white-space: nowrap;
+}
+.file-stats {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 0.5rem;
+    margin-bottom: 0.75rem;
+}
+.file-stat {
+    display: flex;
+    justify-content: space-between;
+    font-size: 0.75rem;
+}
+.file-stat-label {
+    color: var(--text-secondary);
+}
+.file-stat-value {
+    color: var(--text-primary);
+    font-weight: 500;
+}
+.file-actions {
+    display: flex;
+    gap: 0.5rem;
+}
+.file-actions .btn {
+    padding: 0.5rem 0.75rem;
+    font-size: 0.75rem;
+}
+/* Logs Section */
+.log-controls {
+    display: flex;
+    gap: 0.5rem;
+}
+.logs-container {
+    background: var(--bg-secondary);
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius);
+    height: 300px;
+    overflow-y: auto;
+    padding: 1rem;
+    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+    font-size: 0.75rem;
+    line-height: 1.4;
+}
+.log-entry {
+    margin-bottom: 0.5rem;
+    display: flex;
+    gap: 0.5rem;
+}
+.log-time {
+    color: var(--text-muted);
+    white-space: nowrap;
+}
+.log-message {
+    color: var(--text-primary);
+    word-break: break-word;
+}
+.log-entry.error .log-message {
+    color: var(--danger);
+}
+.log-entry.success .log-message {
+    color: var(--success);
+}
+.log-entry.warning .log-message {
+    color: var(--warning);
+}
+/* Modal */
+.modal {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.5);
+    z-index: 1000;
+    backdrop-filter: blur(4px);
+}
+.modal.show {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    animation: fadeIn 0.2s ease;
+}
+.modal-content {
+    background: var(--bg-primary);
+    border-radius: var(--radius-lg);
+    box-shadow: var(--shadow-lg);
+    max-width: 600px;
+    width: 90%;
+    max-height: 80vh;
+    overflow: hidden;
+    animation: slideUp 0.2s ease;
+}
+.modal-header {
+    padding: 1.5rem;
+    border-bottom: 1px solid var(--border-color);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+.modal-header h3 {
+    font-size: 1.25rem;
+    font-weight: 600;
+}
+.modal-close {
+    background: none;
+    border: none;
+    font-size: 1.25rem;
+    cursor: pointer;
+    color: var(--text-muted);
+    padding: 0.25rem;
+    border-radius: var(--radius);
+    transition: var(--transition);
+}
+.modal-close:hover {
+    background: var(--bg-secondary);
+    color: var(--text-primary);
+}
+.modal-body {
+    padding: 1.5rem;
+    max-height: 400px;
+    overflow-y: auto;
+}
+.modal-footer {
+    padding: 1.5rem;
+    border-top: 1px solid var(--border-color);
+    display: flex;
+    gap: 1rem;
+    justify-content: flex-end;
+}
+/* Loading Overlay */
+.loading-overlay {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.3);
+    z-index: 2000;
+    backdrop-filter: blur(2px);
+}
+.loading-overlay.show {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.loading-spinner {
+    background: var(--bg-primary);
+    padding: 2rem;
+    border-radius: var(--radius-lg);
+    text-align: center;
+    box-shadow: var(--shadow-lg);
+}
+.loading-spinner i {
+    font-size: 2rem;
+    color: var(--accent-primary);
+    margin-bottom: 1rem;
+}
+.loading-spinner p {
+    color: var(--text-secondary);
+    font-weight: 500;
+}
+/* Toast Notifications */
+.toast-container {
+    position: fixed;
+    top: 1rem;
+    right: 1rem;
+    z-index: 3000;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+.toast {
+    background: var(--bg-primary);
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius);
+    padding: 1rem;
+    box-shadow: var(--shadow-lg);
+    min-width: 300px;
+    animation: slideInRight 0.3s ease;
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+}
+.toast.success {
+    border-left: 4px solid var(--success);
+}
+.toast.error {
+    border-left: 4px solid var(--danger);
+}
+.toast.warning {
+    border-left: 4px solid var(--warning);
+}
+.toast.info {
+    border-left: 4px solid var(--accent-primary);
+}
+.toast-icon {
+    font-size: 1.25rem;
+}
+.toast.success .toast-icon {
+    color: var(--success);
+}
+.toast.error .toast-icon {
+    color: var(--danger);
+}
+.toast.warning .toast-icon {
+    color: var(--warning);
+}
+.toast.info .toast-icon {
+    color: var(--accent-primary);
+}
+.toast-content {
+    flex: 1;
+}
+.toast-title {
+    font-weight: 600;
+    margin-bottom: 0.25rem;
+}
+.toast-message {
+    font-size: 0.875rem;
+    color: var(--text-secondary);
+}
+.toast-close {
+    background: none;
+    border: none;
+    color: var(--text-muted);
+    cursor: pointer;
+    padding: 0.25rem;
+    border-radius: var(--radius);
+    transition: var(--transition);
+}
+.toast-close:hover {
+    background: var(--bg-secondary);
+    color: var(--text-primary);
+}
+/* Animations */
+@keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+@keyframes slideUp {
+    from { transform: translateY(20px); opacity: 0; }
+    to { transform: translateY(0); opacity: 1; }
+}
+@keyframes slideInRight {
+    from { transform: translateX(100%); opacity: 0; }
+    to { transform: translateX(0); opacity: 1; }
+}
+/* Responsive Design */
+@media (max-width: 768px) {
+    .container {
+        padding: 0 0.5rem;
+    }
+    .header-content {
+        flex-direction: column;
+        gap: 1rem;
+        align-items: flex-start;
+    }
+    .stats-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+    .button-group {
+        flex-direction: column;
+    }
+    .files-grid {
+        grid-template-columns: 1fr;
+    }
+    .modal-content {
+        width: 95%;
+        margin: 1rem;
+    }
+    .toast {
+        min-width: 280px;
+    }
+    .toast-container {
+        left: 1rem;
+        right: 1rem;
+    }
+}
+@media (max-width: 480px) {
+    .stats-grid {
+        grid-template-columns: 1fr;
+    }
+    .progress-info {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 0.5rem;
+    }
+    .current-file {
+        max-width: 100%;
+    }
+}