tuveplaywright

Sleeping

App Files Files Community

deepak191z commited on Jun 30

Commit

564251d

verified ·

1 Parent(s): e03131a

Update index.js

Browse files

Files changed (1) hide show

index.js +264 -45

index.js CHANGED Viewed

@@ -8,72 +8,191 @@ app.use(bodyParser.urlencoded({ extended: true }));
 app.use(bodyParser.json());
 app.use(cors());
 const html = `
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>YouTube Transcript Generator (Playwright)</title>
     <style>
         body {
             font-family: Arial, sans-serif;
             max-width: 800px;
             margin: 0 auto;
             padding: 20px;
         }
         form {
             display: flex;
             flex-direction: column;
         }
         input, button {
-            margin: 10px 0;
-            padding: 5px;
         }
         #result {
             white-space: pre-wrap;
-            background-color: #f0f0f0;
-            padding: 10px;
-            border-radius: 5px;
         }
     </style>
 </head>
 <body>
-    <h1>YouTube Transcript Generator (Playwright)</h1>
-    <form id="transcriptForm">
-        <input type="text" id="videoUrl" name="videoUrl" placeholder="YouTube Video URL" required>
-        <button type="submit">Generate Transcript</button>
-    </form>
-    <div id="result"></div>
     <script>
         document.getElementById('transcriptForm').addEventListener('submit', async (e) => {
             e.preventDefault();
             const videoUrl = document.getElementById('videoUrl').value;
             const resultDiv = document.getElementById('result');
-            resultDiv.textContent = 'Generating transcript...';
             try {
                 const response = await fetch('/extract-transcript', {
                     method: 'POST',
                     headers: {
                         'Content-Type': 'application/json',
                     },
-                    body: JSON.stringify({ videoUrl}),
                 });
                 if (response.ok) {
                     const data = await response.json();
                     resultDiv.textContent = data.transcript;
                 } else {
-                    resultDiv.textContent = 'Error generating transcript. Please try again.';
                 }
             } catch (error) {
                 console.error('Error:', error);
-                resultDiv.textContent = 'An error occurred. Please try again.';
             }
         });
     </script>
@@ -92,44 +211,144 @@ app.post('/extract-transcript', async (req, res) => {
         return res.status(400).send('videoUrl is required');
     }
-    const browser = await chromium.launch();
-    const context = await browser.newContext();
-    const page = await context.newPage();
     try {
-        await page.goto(videoUrl, { waitUntil: 'networkidle' });
-        // Set viewport size
-        await page.setViewportSize({ width: 1920, height: 1080 });
-        // Try to expand description if button is present (optional)
-        const expandButton = await page.$('tp-yt-paper-button#expand');
-        if (expandButton) {
-            await expandButton.click();
         }
-        // Click the "Show transcript" button
-        await page.click('button[aria-label="Show transcript"]');
-        // Wait for the transcript container to appear
-        await page.waitForSelector('ytd-transcript-segment-list-renderer');
-        // Extract the transcript text
         const transcript = await page.evaluate(() => {
-            const elements = Array.from(document.querySelectorAll('ytd-transcript-segment-renderer .segment-text'));
-            return elements.map(element => element.innerText).join('\n');
         });
         res.json({ transcript });
     } catch (error) {
         console.error('Error extracting transcript:', error);
-        res.status(500).send('Error extracting transcript');
     } finally {
-        await browser.close();
     }
 });
-const PORT = 7860;
-app.listen(PORT, () => {
-    console.log(`Server is running on port ${PORT}`);
-});

 app.use(bodyParser.json());
 app.use(cors());
+// Global browser instance for reuse
+let globalBrowser = null;
+// Initialize browser once on startup
+async function initBrowser() {
+    if (!globalBrowser) {
+        globalBrowser = await chromium.launch({
+            headless: true,
+            args: [
+                '--no-sandbox',
+                '--disable-setuid-sandbox',
+                '--disable-dev-shm-usage',
+                '--disable-background-timer-throttling',
+                '--disable-backgrounding-occluded-windows',
+                '--disable-renderer-backgrounding',
+                '--disable-features=TranslateUI',
+                '--disable-ipc-flooding-protection'
+            ]
+        });
+        // Handle browser close on process exit
+        process.on('exit', async () => {
+            if (globalBrowser) await globalBrowser.close();
+        });
+        process.on('SIGINT', async () => {
+            if (globalBrowser) await globalBrowser.close();
+            process.exit();
+        });
+    }
+    return globalBrowser;
+}
 const html = `
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Fast YouTube Transcript Generator</title>
     <style>
         body {
             font-family: Arial, sans-serif;
             max-width: 800px;
             margin: 0 auto;
             padding: 20px;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            color: white;
+        }
+        .container {
+            background: rgba(255, 255, 255, 0.1);
+            backdrop-filter: blur(10px);
+            border-radius: 15px;
+            padding: 30px;
+            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+        }
+        h1 {
+            text-align: center;
+            margin-bottom: 30px;
+            font-size: 2.5em;
+            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
         }
         form {
             display: flex;
             flex-direction: column;
+            gap: 15px;
         }
         input, button {
+            padding: 15px;
+            border: none;
+            border-radius: 10px;
+            font-size: 16px;
+        }
+        input {
+            background: rgba(255, 255, 255, 0.9);
+            color: #333;
+        }
+        button {
+            background: linear-gradient(45deg, #ff6b6b, #ee5a24);
+            color: white;
+            cursor: pointer;
+            font-weight: bold;
+            transition: transform 0.2s, box-shadow 0.2s;
+        }
+        button:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 5px 15px rgba(0,0,0,0.3);
+        }
+        button:disabled {
+            opacity: 0.6;
+            cursor: not-allowed;
+            transform: none;
         }
         #result {
             white-space: pre-wrap;
+            background: rgba(255, 255, 255, 0.1);
+            padding: 20px;
+            border-radius: 10px;
+            margin-top: 20px;
+            max-height: 400px;
+            overflow-y: auto;
+            border: 1px solid rgba(255, 255, 255, 0.2);
+        }
+        .loading {
+            display: inline-block;
+            width: 20px;
+            height: 20px;
+            border: 3px solid rgba(255,255,255,.3);
+            border-radius: 50%;
+            border-top-color: #fff;
+            animation: spin 1s ease-in-out infinite;
+        }
+        @keyframes spin {
+            to { transform: rotate(360deg); }
+        }
+        .status {
+            margin-top: 10px;
+            font-weight: bold;
+            text-align: center;
         }
     </style>
 </head>
 <body>
+    <div class="container">
+        <h1>⚡ Fast YouTube Transcript</h1>
+        <form id="transcriptForm">
+            <input type="text" id="videoUrl" name="videoUrl" placeholder="Enter YouTube Video URL..." required>
+            <button type="submit" id="submitBtn">
+                <span id="btnText">Generate Transcript</span>
+                <span id="loader" class="loading" style="display: none;"></span>
+            </button>
+        </form>
+        <div id="status" class="status"></div>
+        <div id="result"></div>
+    </div>
     <script>
         document.getElementById('transcriptForm').addEventListener('submit', async (e) => {
             e.preventDefault();
             const videoUrl = document.getElementById('videoUrl').value;
             const resultDiv = document.getElementById('result');
+            const statusDiv = document.getElementById('status');
+            const submitBtn = document.getElementById('submitBtn');
+            const btnText = document.getElementById('btnText');
+            const loader = document.getElementById('loader');
+            // Update UI for loading state
+            submitBtn.disabled = true;
+            btnText.style.display = 'none';
+            loader.style.display = 'inline-block';
+            statusDiv.textContent = 'Extracting transcript...';
+            resultDiv.textContent = '';
+            const startTime = Date.now();
             try {
                 const response = await fetch('/extract-transcript', {
                     method: 'POST',
                     headers: {
                         'Content-Type': 'application/json',
                     },
+                    body: JSON.stringify({ videoUrl }),
                 });
+                const endTime = Date.now();
+                const duration = ((endTime - startTime) / 1000).toFixed(1);
                 if (response.ok) {
                     const data = await response.json();
                     resultDiv.textContent = data.transcript;
+                    statusDiv.textContent = `✅ Transcript extracted in ${duration}s`;
                 } else {
+                    const error = await response.text();
+                    resultDiv.textContent = `Error: ${error}`;
+                    statusDiv.textContent = '❌ Failed to extract transcript';
                 }
             } catch (error) {
                 console.error('Error:', error);
+                resultDiv.textContent = 'Network error occurred. Please try again.';
+                statusDiv.textContent = '❌ Network error';
+            } finally {
+                // Reset UI
+                submitBtn.disabled = false;
+                btnText.style.display = 'inline';
+                loader.style.display = 'none';
             }
         });
     </script>
         return res.status(400).send('videoUrl is required');
     }
+    // Validate YouTube URL
+    if (!videoUrl.includes('youtube.com/watch') && !videoUrl.includes('youtu.be/')) {
+        return res.status(400).send('Please provide a valid YouTube URL');
+    }
+    const browser = await initBrowser();
+    let context = null;
+    let page = null;
     try {
+        // Create a new context for this request
+        context = await browser.newContext({
+            userAgent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36'
+        });
+        page = await context.newPage();
+        // Block unnecessary resources to speed up loading
+        await page.route('**/*', (route) => {
+            const resourceType = route.request().resourceType();
+            if (['image', 'stylesheet', 'font', 'media'].includes(resourceType)) {
+                route.abort();
+            } else {
+                route.continue();
+            }
+        });
+        // Navigate to the video with shorter timeout
+        await page.goto(videoUrl, {
+            waitUntil: 'domcontentloaded',
+            timeout: 30000
+        });
+        // Wait for the page to be ready with shorter timeout
+        await page.waitForLoadState('networkidle', { timeout: 10000 });
+        // Try multiple selectors for the transcript button
+        const transcriptSelectors = [
+            'button[aria-label="Show transcript"]',
+            'button[aria-label*="transcript"]',
+            '[data-text="Show transcript"]',
+            'ytd-button-renderer:has-text("Show transcript")'
+        ];
+        let transcriptButton = null;
+        for (const selector of transcriptSelectors) {
+            try {
+                transcriptButton = await page.waitForSelector(selector, { timeout: 5000 });
+                if (transcriptButton) break;
+            } catch (e) {
+                continue;
+            }
         }
+        if (!transcriptButton) {
+            return res.status(404).send('Transcript not available for this video');
+        }
+        // Click the transcript button
+        await transcriptButton.click();
+        // Wait for transcript to load with multiple possible selectors
+        const transcriptContainerSelectors = [
+            'ytd-transcript-segment-list-renderer',
+            '[data-testid="transcript-segment-list"]',
+            '.ytd-transcript-segment-list-renderer'
+        ];
+        let transcriptContainer = null;
+        for (const selector of transcriptContainerSelectors) {
+            try {
+                transcriptContainer = await page.waitForSelector(selector, { timeout: 10000 });
+                if (transcriptContainer) break;
+            } catch (e) {
+                continue;
+            }
+        }
+        if (!transcriptContainer) {
+            return res.status(404).send('Could not load transcript content');
+        }
+        // Extract transcript with multiple selector attempts
         const transcript = await page.evaluate(() => {
+            // Try multiple selectors for transcript segments
+            const selectors = [
+                'ytd-transcript-segment-renderer .segment-text',
+                '.transcript-segment .segment-text',
+                '[data-testid="transcript-segment"] .segment-text',
+                'ytd-transcript-segment-renderer yt-formatted-string'
+            ];
+            for (const selector of selectors) {
+                const elements = Array.from(document.querySelectorAll(selector));
+                if (elements.length > 0) {
+                    return elements.map(element => element.innerText.trim()).join('\n');
+                }
+            }
+            // Fallback: try to get any text from transcript container
+            const container = document.querySelector('ytd-transcript-segment-list-renderer');
+            if (container) {
+                return container.innerText.replace(/\n+/g, '\n').trim();
+            }
+            return 'No transcript text found';
         });
+        if (!transcript || transcript === 'No transcript text found') {
+            return res.status(404).send('Could not extract transcript text');
+        }
         res.json({ transcript });
     } catch (error) {
         console.error('Error extracting transcript:', error);
+        if (error.message.includes('timeout')) {
+            res.status(408).send('Request timeout - video may be loading slowly');
+        } else if (error.message.includes('net::ERR_')) {
+            res.status(502).send('Network error accessing YouTube');
+        } else {
+            res.status(500).send('Error extracting transcript');
+        }
     } finally {
+        // Always close the context, but keep browser running
+        if (context) {
+            await context.close();
+        }
     }
 });
+const PORT = process.env.PORT || 7860;
+// Initialize browser on startup
+initBrowser().then(() => {
+    app.listen(PORT, () => {
+        console.log(`🚀 Fast YouTube Transcript Server running on port ${PORT}`);
+        console.log(`📝 Access the web interface at http://localhost:${PORT}`);
+    });
+}).catch(console.error);