Spaces:

deepak191z
/

tuveplaywright

Paused

App Files Files Community

deepak191z commited on Jun 30, 2025

Commit

68adc7a

verified ·

1 Parent(s): 6846b53

Update index.js

Browse files

Files changed (1) hide show

index.js +81 -333

index.js CHANGED Viewed

@@ -4,349 +4,97 @@ const bodyParser = require('body-parser');
 const cors = require('cors');
 const app = express();
-app.use(bodyParser.urlencoded({ extended: true }));
 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 = 'SUCCESS: Transcript extracted in ' + duration + 's';
-                } else {
-                    const error = await response.text();
-                    resultDiv.textContent = 'Error: ' + error;
-                    statusDiv.textContent = 'ERROR: Failed to extract transcript';
-                }
-            } catch (error) {
-                console.error('Error:', error);
-                resultDiv.textContent = 'Network error occurred. Please try again.';
-                statusDiv.textContent = 'ERROR: Network error';
-            } finally {
-                // Reset UI
-                submitBtn.disabled = false;
-                btnText.style.display = 'inline';
-                loader.style.display = 'none';
-            }
         });
-    </script>
 </body>
-</html>`;
-app.get('/', (req, res) => {
-    res.send(html);
-});
-app.post('/extract-transcript', async (req, res) => {
-    const { videoUrl } = req.body;
-    if (!videoUrl) {
-        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);

 const cors = require('cors');
 const app = express();
 app.use(bodyParser.json());
 app.use(cors());
+// Launch browser once to reuse
+let browser;
+(async () => {
+  browser = await chromium.launch({ headless: true });
+})();
+// Route: serve minimal HTML
+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</title>
+  <style>
+    body { font-family: Arial, sans-serif; max-width: 600px; margin: 20px auto; }
+    input, button { width: 100%; padding: 8px; margin: 8px 0; }
+    #result { white-space: pre-wrap; background: #f5f5f5; padding: 10px; border-radius: 4px; }
+  </style>
 </head>
 <body>
+  <h2>YouTube Transcript Generator</h2>
+  <form id="form">
+    <input type="text" id="videoUrl" placeholder="YouTube Video URL" required />
+    <button type="submit">Generate</button>
+  </form>
+  <div id="result"></div>
+  <script>
+    document.getElementById('form').addEventListener('submit', async e => {
+      e.preventDefault();
+      const url = document.getElementById('videoUrl').value;
+      const resDiv = document.getElementById('result');
+      resDiv.textContent = 'Loading...';
+      try {
+        const r = await fetch('/transcript', {
+          method: 'POST', headers: {'Content-Type':'application/json'}, body: JSON.stringify({ url })
         });
+        const { transcript, error } = await r.json();
+        resDiv.textContent = transcript || error;
+      } catch (err) {
+        resDiv.textContent = 'Unexpected error';
+      }
+    });
+  </script>
 </body>
+</html>
+`;
+app.get('/', (_, res) => res.send(html));
+app.post('/transcript', async (req, res) => {
+  const { url } = req.body;
+  if (!url) return res.status(400).json({ error: 'URL required' });
+  const context = await browser.newContext();
+  // Block images, styles, fonts, media for speed
+  await context.route('**/*', route => {
+    const req = route.request();
+    const t = req.resourceType();
+    if (['image', 'stylesheet', 'font', 'media'].includes(t))
+      route.abort();
+    else
+      route.continue();
+  });
+  const page = await context.newPage();
+  try {
+    await page.goto(url, { waitUntil: 'domcontentloaded' });
+    // Open transcript menu
+    const moreBtn = await page.$('button[aria-label="More actions"]');
+    if (moreBtn) await moreBtn.click();
+    await page.click('tp-yt-paper-item[role="menuitem"]:has-text("Open transcript")');
+    await page.waitForSelector('ytd-transcript-renderer', { timeout: 5000 });
+    const transcript = await page.$$eval(
+      'ytd-transcript-segment-renderer .segment-text', els => els.map(el => el.textContent.trim()).join('\n')
+    );
+    res.json({ transcript });
+  } catch (err) {
+    console.error(err);
+    res.json({ error: 'Failed to extract transcript' });
+  } finally {
+    await context.close();
+  }
 });
 const PORT = process.env.PORT || 7860;
+app.listen(PORT, () => console.log(`Server running on ${PORT}`));