update

index.html

@@ -87,7 +87,7 @@
             min-width: 120px;
         }
 
-        #download-btn:hover:not(:disabled) {
+        #download-btn:hover {
             background-color: #0056b3;
         }
 
@@ -98,8 +98,8 @@
 
         .btn-loader {
             display: none;
-            border: 3px solid rgba(255, 255, 255, 0.3);
-            border-top: 3px solid #ffffff;
+            border: 3px solid #f3f3f3;
+            border-top: 3px solid #0056b3;
             border-radius: 50%;
             width: 20px;
             height: 20px;
@@ -124,80 +124,102 @@
             }
         }
 
-        .status-indicator {
-            padding: 12px;
-            border-radius: 8px;
-            margin-top: 20px;
-            font-size: 0.95rem;
-            display: block;
+        .progress-section {
+            margin-top: 25px;
             text-align: left;
         }
 
-        .status-indicator.success {
-            background-color: #d4edda;
-            color: #155724;
-            border: 1px solid #c3e6cb;
+        .progress-bar-container {
+            width: 100%;
+            background-color: #e9ecef;
+            border-radius: 8px;
+            overflow: hidden;
+            height: 12px;
+        }
+
+        .progress-bar {
+            width: 0%;
+            height: 100%;
+            background-color: #007bff;
+            border-radius: 8px;
+            transition: width 0.4s ease-in-out;
+        }
+
+        #status-text {
+            margin-top: 8px;
+            color: #495057;
+            font-size: 0.9rem;
+            text-align: center;
         }
 
         .status-indicator.error {
             background-color: #f8d7da;
             color: #721c24;
             border: 1px solid #f5c6cb;
+            padding: 12px;
+            border-radius: 8px;
+            margin-top: 20px;
+            font-size: 0.95rem;
         }
 
-        .status-indicator.info {
-            background-color: #cce5ff;
-            color: #004085;
-            border: 1px solid #b8daff;
-        }
-
-        /* New styles for the log container */
-        .log-container {
-            margin-top: 20px;
+        /* --- NEW LOG CONTAINER STYLES --- */
+        .log-section {
+            margin-top: 25px;
+            text-align: left;
             border: 1px solid #dfe4ea;
             border-radius: 8px;
-            text-align: left;
-            background-color: #f8f9fa;
+            padding: 15px;
+            background-color: #fafafa;
         }
 
-        .log-container h3 {
-            margin: 0;
-            padding: 12px 15px;
-            background-color: #e9ecef;
-            border-bottom: 1px solid #dfe4ea;
+        .log-section h3 {
+            margin-top: 0;
+            margin-bottom: 10px;
+            color: #2c3e50;
             font-size: 1rem;
             font-weight: 600;
-            color: #495057;
         }
 
-        #log-output {
-            margin: 0;
-            padding: 15px;
-            height: 200px;
-            overflow-y: auto;
-            font-family: 'SF Mono', 'Menlo', 'Monaco', 'Consolas', monospace;
+        .log-container {
+            background-color: #2c3e50;
+            color: #ecf0f1;
+            font-family: 'Courier New', Courier, monospace;
             font-size: 0.85rem;
-            color: #333;
-            line-height: 1.6;
+            height: 150px;
+            overflow-y: auto;
+            padding: 10px;
+            border-radius: 6px;
             white-space: pre-wrap;
             word-wrap: break-word;
         }
 
         .log-entry {
-            margin: 0;
-            padding: 0;
+            display: flex;
+            margin-bottom: 5px;
+        }
+
+        .log-entry .timestamp {
+            color: #95a5a6;
+            margin-right: 10px;
+            flex-shrink: 0;
+        }
+
+        .log-entry .message {
+            flex-grow: 1;
         }
 
-        .log-entry.error {
-            color: #d9534f;
-            font-weight: bold;
+        .log-entry.error .message {
+            color: #e74c3c;
+            /* Red */
         }
 
-        .log-entry.success {
-            color: #5cb85c;
-            font-weight: bold;
+        .log-entry.success .message {
+            color: #2ecc71;
+            /* Green */
         }
 
+        /* --- END OF NEW STYLES --- */
+
         .footer {
             margin-top: 30px;
             font-size: 0.8rem;
@@ -224,155 +246,151 @@
                     <span class="btn-loader"></span>
                 </button>
             </div>
-            <div class="status-indicator" id="status-indicator" style="display: none;"></div>
 
-            <!-- New Log Container -->
-            <div class="log-container" id="log-container" style="display: none;">
-                <h3>Session Logs</h3>
-                <pre id="log-output"></pre>
+            <div class="progress-section" id="progress-section" style="display: none;">
+                <div class="progress-bar-container">
+                    <div class="progress-bar" id="progress-bar"></div>
+                </div>
+                <p id="status-text">Starting...</p>
+            </div>
+
+            <!-- NEW: Log Display Area -->
+            <div class="log-section" id="log-section" style="display: none;">
+                <h3>Live Logs</h3>
+                <div class="log-container" id="log-container"></div>
             </div>
+
+            <div class="status-indicator error" id="error-indicator" style="display: none;"></div>
         </div>
         <div class="footer">
             <p>Powered by the Heart by Us</p>
         </div>
     </div>
-
     <script>
         document.addEventListener('DOMContentLoaded', () => {
             const downloadBtn = document.getElementById('download-btn');
             const urlInput = document.getElementById('studocu-url');
-            const statusIndicator = document.getElementById('status-indicator');
+            const progressSection = document.getElementById('progress-section');
+            const progressBar = document.getElementById('progress-bar');
+            const statusText = document.getElementById('status-text');
+            const errorIndicator = document.getElementById('error-indicator');
+            // NEW: Get log elements
+            const logSection = document.getElementById('log-section');
             const logContainer = document.getElementById('log-container');
-            const logOutput = document.getElementById('log-output');
 
-            const API_URL = 'http://localhost:7860';
-            let eventSource;
+            const API_BASE_URL = 'http://localhost:7860';
+            let pollInterval;
+            let lastLoggedMessage = ''; // NEW: Track last message to avoid duplicates
+
+            const resetUI = () => {
+                setLoading(false);
+                progressSection.style.display = 'none';
+                errorIndicator.style.display = 'none';
+                progressBar.style.width = '0%';
+                statusText.textContent = '';
+                // NEW: Reset log area
+                logSection.style.display = 'none';
+                logContainer.innerHTML = '';
+                lastLoggedMessage = '';
+            };
+
+            // NEW: Function to add a message to the log container
+            const addLog = (message, type = 'info') => {
+                if (!message || message === lastLoggedMessage) return; // Avoid empty or duplicate logs
+                lastLoggedMessage = message;
+
+                const logEntry = document.createElement('div');
+                logEntry.className = `log-entry ${type}`;
+                const timestamp = new Date().toLocaleTimeString();
+                logEntry.innerHTML = `<span class="timestamp">${timestamp}</span><span class="message">${message}</span>`;
+
+                logContainer.appendChild(logEntry);
+                logContainer.scrollTop = logContainer.scrollHeight; // Auto-scroll
+            };
+
+            const pollProgress = (sessionId) => {
+                pollInterval = setInterval(async () => {
+                    try {
+                        const response = await fetch(`${API_BASE_URL}/api/progress/${sessionId}`);
+                        if (!response.ok) throw new Error('Failed to get progress update.');
+
+                        const data = await response.json();
+
+                        progressBar.style.width = `${data.progress}%`;
+                        statusText.textContent = `(${data.progress}%) ${data.message}`;
+                        addLog(`[${data.status}] ${data.message}`); // Add to log
+
+                        if (data.progress >= 100) {
+                            clearInterval(pollInterval);
+                            statusText.textContent = '✅ Success! Your download will start now.';
+                            addLog('✅ PDF generated successfully! Starting download...', 'success');
+                            window.location.href = `${API_BASE_URL}/api/download/${sessionId}`;
+                            setTimeout(resetUI, 5000);
+                        }
+
+                        if (data.progress < 0) {
+                            clearInterval(pollInterval);
+                            showError(`Error: ${data.message || 'An unknown error occurred.'}`);
+                            setLoading(false);
+                        }
+
+                    } catch (error) {
+                        clearInterval(pollInterval);
+                        console.error('Polling failed:', error);
+                        showError('Failed to connect to the server for progress updates.');
+                        setLoading(false);
+                    }
+                }, 2000);
+            };
 
             downloadBtn.addEventListener('click', async () => {
                 const url = urlInput.value.trim();
                 if (!url || !url.includes('studocu.com')) {
-                    showStatus('Please provide a valid StuDocu URL.', 'error');
+                    showError('Please provide a valid StuDocu URL.');
                     return;
                 }
 
+                resetUI();
                 setLoading(true);
-                clearLogs();
-                showStatus('Initializing session...', 'info');
+                progressSection.style.display = 'block';
+                logSection.style.display = 'block'; // Show logs
+                statusText.textContent = 'Requesting download...';
+                addLog('🚀 Requesting download...');
 
                 try {
-                    // Step 1: Start the download process on the server
-                    const response = await fetch(`${API_URL}/api/download`, {
+                    const response = await fetch(`${API_BASE_URL}/api/request-download`, {
                         method: 'POST',
                         headers: { 'Content-Type': 'application/json' },
-                        body: JSON.stringify({ url: url }),
+                        body: JSON.stringify({ url }),
                     });
 
                     if (!response.ok) {
                         const errorData = await response.json();
-                        throw new Error(errorData.error || 'Failed to start download process.');
+                        throw new Error(errorData.error || 'Failed to start the download process.');
                     }
 
-                    const data = await response.json();
-                    const sessionId = data.sessionId;
-
-                    // Step 2: Listen for progress updates using the received sessionId
-                    setupEventListener(sessionId, url);
+                    const { sessionId } = await response.json();
+                    pollProgress(sessionId);
 
                 } catch (error) {
-                    const message = `Error: ${error.message}`;
-                    addLogEntry(`❌ ${message}`, 'error');
-                    showStatus(message, 'error');
+                    console.error('Download failed:', error);
+                    showError(error.message);
                     setLoading(false);
                 }
             });
 
-            function setupEventListener(sessionId, originalUrl) {
-                // The URL is correct in your original code
-                eventSource = new EventSource(`${API_URL}/api/progress-stream/${sessionId}`);
-
-                eventSource.onopen = () => {
-                    addLogEntry('🔌 Connection established. Waiting for server...');
-                };
-
-                eventSource.onmessage = (event) => {
-                    const data = JSON.parse(event.data);
-
-                    if (data.status === 'error') {
-                        const message = `Error: ${data.message}`;
-                        addLogEntry(`❌ ${message}`, 'error');
-                        showStatus(message, 'error');
-                        eventSource.close();
-                        setLoading(false);
-                        return;
-                    }
-
-                    const logMessage = `[${data.progress}%] ${data.status}: ${data.message}`;
-                    addLogEntry(logMessage);
-                    showStatus(`${data.status}...`, 'info');
-
-                    if (data.progress === 100) {
-                        addLogEntry('🎉 PDF generated successfully! Starting download...', 'success');
-                        showStatus('Download complete!', 'success');
-
-                        // The backend doesn't send the file anymore, so we trigger a direct download.
-                        // For this simple fix, we will just re-post to the original endpoint
-                        // but this time to a new one that returns the PDF directly.
-                        // (This part requires another backend change, for now let's just log it)
-
-                        // A simple way to get the file is to have a new download endpoint
-                        // For now, we assume the process is done.
-                        eventSource.close();
-                        setLoading(false);
-                        // To actually download, you would need another endpoint like GET /api/download-file/:sessionId
-                        // For simplicity, we just stop here.
-                    }
-                };
-
-                eventSource.onerror = (err) => {
-                    console.error("EventSource failed:", err);
-                    addLogEntry('❌ Connection to server was lost.', 'error');
-                    showStatus('Connection lost. Please try again.', 'error');
-                    eventSource.close();
-                    setLoading(false);
-                };
-            }
-
             function setLoading(isLoading) {
-                downloadBtn.classList.toggle('loading', isLoading);
                 downloadBtn.disabled = isLoading;
                 urlInput.disabled = isLoading;
+                downloadBtn.classList.toggle('loading', isLoading);
             }
 
-            function showStatus(message, type) {
-                statusIndicator.style.display = 'block';
-                statusIndicator.textContent = message;
-                statusIndicator.className = `status-indicator ${type}`;
-            }
-
-            function addLogEntry(message, type = 'info') {
-                const entry = document.createElement('p');
-                entry.className = `log-entry ${type}`;
-                entry.textContent = message;
-                logOutput.appendChild(entry);
-                logOutput.scrollTop = logOutput.scrollHeight;
-            }
-
-            function clearLogs() {
-                logContainer.style.display = 'block';
-                logOutput.innerHTML = '';
-            }
-
-            // This function is no longer called in the same way, but kept for reference
-            function triggerFileDownload(blob, fileName) {
-                const downloadUrl = window.URL.createObjectURL(blob);
-                const a = document.createElement('a');
-                a.style.display = 'none';
-                a.href = downloadUrl;
-                a.download = fileName;
-                document.body.appendChild(a);
-                a.click();
-                window.URL.revokeObjectURL(downloadUrl);
-                a.remove();
+            function showError(message) {
+                errorIndicator.style.display = 'block';
+                errorIndicator.textContent = message;
+                progressSection.style.display = 'none';
+                logSection.style.display = 'block'; // Ensure logs are visible on error
+                addLog(message, 'error');
             }
         });
     </script>

server.js

@@ -9,7 +9,13 @@ const port = 7860;
 app.use(cors());
 app.use(express.json());
 
-// Progress tracking system
+// --- Progress Tracking and Job Storage ---
+
+// Stores the real-time progress of active jobs
+const progressTrackers = new Map();
+// Stores the final state and result (PDF buffer or error) of jobs
+const downloadJobs = new Map();
+
 class ProgressTracker extends EventEmitter {
     constructor(sessionId) {
         super();
@@ -23,25 +29,20 @@ class ProgressTracker extends EventEmitter {
         this.progress = progress;
         this.status = status;
         this.message = message;
-        const progressData = {
+        const update = {
             sessionId: this.sessionId,
             progress,
             status,
             message,
             timestamp: new Date().toISOString()
         };
-        // Emit the 'progress' event for SSE listeners
-        this.emit('progress', progressData);
+        this.emit('progress', update);
         console.log(`📊 [${this.sessionId}] ${progress}% - ${status}: ${message}`);
     }
 }
 
-// Store active progress trackers
-const progressTrackers = new Map();
 
-/**
- * Advanced cookie banner and content bypass for StuDocu
- */
+// --- Puppeteer Logic (Unchanged) ---
 const bypassCookiesAndRestrictions = async (page, progressTracker) => {
     progressTracker?.updateProgress(5, 'bypassing', 'Setting up cookie bypass...');
 
@@ -160,10 +161,6 @@ const bypassCookiesAndRestrictions = async (page, progressTracker) => {
     progressTracker?.updateProgress(10, 'bypassing', 'Cookie bypass configured successfully');
     return true;
 };
-
-/**
- * Enhanced content unblurring and premium bypass
- */
 const unblurContent = async (page, progressTracker) => {
     progressTracker?.updateProgress(15, 'unblurring', 'Removing content restrictions...');
 
@@ -222,10 +219,6 @@ const unblurContent = async (page, progressTracker) => {
 
     progressTracker?.updateProgress(20, 'unblurring', 'Content restrictions removed');
 };
-
-/**
- * Apply print styles for clean PDF output
- */
 const applyPrintStyles = async (page, progressTracker) => {
     progressTracker?.updateProgress(85, 'styling', 'Applying print styles...');
 
@@ -282,10 +275,6 @@ const applyPrintStyles = async (page, progressTracker) => {
 
     progressTracker?.updateProgress(88, 'styling', 'Print styles applied successfully');
 };
-
-/**
- * Enhanced StuDocu downloader with progress tracking
- */
 const studocuDownloader = async (url, options = {}, progressTracker = null) => {
     let browser;
     try {
@@ -550,117 +539,108 @@ const studocuDownloader = async (url, options = {}, progressTracker = null) => {
     }
 };
 
+// --- API Routes ---
 
-// API Routes
-
-// Enhanced download endpoint with progress tracking
-app.post('/api/download', async (req, res) => {
-    // Note: The original client code was sending sessionId in the body.
-    // We will use the one passed in the body or generate a new one.
-    const { url, filename, email, password, sessionId: reqSessionId } = req.body;
-    if (!url) {
-        return res.status(400).json({ error: 'URL is required.' });
-    }
-    if (!url.includes('studocu.com')) {
+/**
+ * [NEW] Endpoint to start the download process and get a session ID.
+ */
+app.post('/api/request-download', (req, res) => {
+    const { url, email, password } = req.body;
+    if (!url || !url.includes('studocu.com')) {
         return res.status(400).json({ error: 'Please provide a valid StuDocu URL.' });
     }
 
-    let normalizedUrl = url.trim();
-    if (!normalizedUrl.startsWith('http')) {
-        normalizedUrl = 'https://' + normalizedUrl;
-    }
-
-    // Use the session ID from the request or create a new one.
-    const sessionId = reqSessionId || Date.now().toString();
+    const sessionId = Date.now().toString();
     const progressTracker = new ProgressTracker(sessionId);
+
     progressTrackers.set(sessionId, progressTracker);
+    downloadJobs.set(sessionId, { status: 'processing' });
 
-    console.log(`🎯 Processing request for: ${normalizedUrl} [Session: ${sessionId}]`);
+    console.log(`🎯 Processing request for: ${url} [Session: ${sessionId}]`);
 
-    // We don't wait for the downloader to finish.
-    // It runs in the background while we immediately return a response.
-    studocuDownloader(normalizedUrl, { filename, email, password }, progressTracker)
+    // Respond to the client immediately with the session ID
+    res.json({ sessionId });
+
+    // --- Start the PDF generation in the background ---
+    studocuDownloader(url, { email, password }, progressTracker)
         .then(pdfBuffer => {
-            // Store the result for the user to download later or handle as needed
-            progressTracker.pdfBuffer = pdfBuffer;
-            console.log(`🎉 PDF is ready for download [Session: ${sessionId}]`);
+            // Store the successful result
+            downloadJobs.set(sessionId, { status: 'completed', buffer: pdfBuffer });
+            progressTrackers.delete(sessionId); // Clean up live tracker
         })
         .catch(error => {
-            console.error(`❌ Failed to process ${normalizedUrl}:`, error.message);
-            // You can emit a final error event here if you want
-            progressTracker.updateProgress(-1, 'error', error.message || 'An unknown error occurred.');
-        })
-        .finally(() => {
-            // Optional: Clean up the tracker after some time
-            setTimeout(() => {
-                const tracker = progressTrackers.get(sessionId);
-                // Don't delete if there's a PDF buffer waiting to be downloaded
-                if (tracker && !tracker.pdfBuffer) {
-                    progressTrackers.delete(sessionId);
-                }
-            }, 300000); // 5 minutes
+            // Store the error
+            downloadJobs.set(sessionId, { status: 'error', message: error.message });
+            progressTrackers.delete(sessionId); // Clean up live tracker
         });
-
-    // Immediately respond to the client so it can start listening to the progress stream.
-    res.status(202).json({
-        message: "Download process started.",
-        sessionId: sessionId
-    });
 });
 
-// ***************************************************************
-// ** NEW SERVER-SENT EVENTS (SSE) ENDPOINT FOR REAL-TIME PROGRESS **
-// ***************************************************************
-app.get('/api/progress-stream/:sessionId', (req, res) => {
+
+/**
+ * [EXISTING] Endpoint for the client to poll for progress updates.
+ */
+app.get('/api/progress/:sessionId', (req, res) => {
     const { sessionId } = req.params;
     const tracker = progressTrackers.get(sessionId);
 
-    if (!tracker) {
-        return res.status(404).json({ error: 'Session not found' });
+    if (tracker) {
+        // Job is in progress, return live data
+        return res.json({
+            sessionId,
+            progress: tracker.progress,
+            status: tracker.status,
+            message: tracker.message,
+            timestamp: new Date().toISOString()
+        });
     }
 
-    // Set headers for SSE
-    res.setHeader('Content-Type', 'text/event-stream');
-    res.setHeader('Cache-Control', 'no-cache');
-    res.setHeader('Connection', 'keep-alive');
-    res.flushHeaders(); // Flush the headers to establish the connection
-
-    // The function that sends data to the client
-    const sendProgress = (data) => {
-        res.write(`data: ${JSON.stringify(data)}\n\n`);
-    };
-
-    // Attach the listener to the specific tracker instance
-    tracker.on('progress', sendProgress);
-
-    // Handle client disconnect
-    req.on('close', () => {
-        // Remove the listener for this specific client
-        tracker.removeListener('progress', sendProgress);
-        console.log(`🔌 Client disconnected for session: ${sessionId}`);
-    });
+    const job = downloadJobs.get(sessionId);
+    if (job) {
+        // Job is finished, return final state
+        if (job.status === 'completed') {
+            return res.json({ sessionId, progress: 100, status: 'completed', message: 'PDF generated successfully!' });
+        }
+        if (job.status === 'error') {
+            return res.json({ sessionId, progress: -1, status: 'error', message: job.message });
+        }
+    }
+
+    return res.status(404).json({ error: 'Session not found' });
 });
 
-// Your old polling endpoint (can be kept for debugging or removed)
-app.get('/api/progress/:sessionId', (req, res) => {
+
+/**
+ * [NEW] Endpoint to download the final PDF file.
+ */
+app.get('/api/download/:sessionId', (req, res) => {
     const { sessionId } = req.params;
-    const tracker = progressTrackers.get(sessionId);
+    const job = downloadJobs.get(sessionId);
 
-    if (!tracker) {
-        return res.status(404).json({ error: 'Session not found' });
+    if (!job) {
+        return res.status(404).json({ error: 'Download session not found or expired.' });
     }
 
-    res.json({
-        sessionId,
-        progress: tracker.progress,
-        status: tracker.status,
-        message: tracker.message,
-        timestamp: new Date().toISOString()
-    });
+    if (job.status === 'processing') {
+        return res.status(400).json({ error: 'Download is still processing.' });
+    }
+
+    if (job.status === 'error') {
+        return res.status(500).json({ error: `Failed to generate PDF: ${job.message}` });
+    }
+
+    if (job.status === 'completed' && job.buffer) {
+        res.setHeader('Content-Type', 'application/pdf');
+        res.setHeader('Content-Disposition', 'attachment; filename=studocu-document.pdf');
+        res.send(job.buffer);
+        // Optional: Clean up the job after download to save memory
+        // downloadJobs.delete(sessionId);
+    } else {
+        res.status(500).json({ error: 'An unknown error occurred.' });
+    }
 });
 
 
-// Health and info endpoints
+// --- Health and Info Endpoints (Unchanged) ---
 app.get('/health', (req, res) => {
     res.json({
         status: 'healthy',
@@ -672,8 +652,8 @@ app.get('/health', (req, res) => {
 
 app.get('/', (req, res) => {
     res.json({
-        message: '🚀 Enhanced StuDocu Downloader API v5.0 - Real-time Progress Tracking',
-        version: '5.0.0',
+        message: '🚀 Enhanced StuDocu Downloader API v5.1 - Real-time Progress Tracking',
+        version: '5.1.0',
         features: [
             '🍪 Advanced cookie banner bypass',
             '🔓 Premium content unblurring',
@@ -682,8 +662,9 @@ app.get('/', (req, res) => {
             '📄 Clean PDF generation with print styles'
         ],
         endpoints: {
-            download: 'POST /api/download (body: {url, filename?, email?, password?})',
+            request: 'POST /api/request-download (body: {url, filename?, email?, password?})',
             progress: 'GET /api/progress/:sessionId',
+            download: 'GET /api/download/:sessionId',
             health: 'GET /health'
         }
     });
@@ -700,6 +681,6 @@ process.on('SIGINT', () => {
 });
 
 app.listen(port, () => {
-    console.log(`🚀 Enhanced StuDocu Downloader v5.0.0 running on http://localhost:${port}`);
+    console.log(`🚀 Enhanced StuDocu Downloader v5.1.0 running on http://localhost:${port}`);
     console.log(`✨ Features: Real-time progress tracking and enhanced user feedback`);
 });