Spaces:
Sleeping
Sleeping
| const express = require('express'); | |
| const { chromium } = require('playwright'); | |
| 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()); | |
| 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> | |
| <input type="text" id="videoTitle" name="videoTitle" placeholder="Video Title" 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 videoTitle = document.getElementById('videoTitle').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, videoTitle }), | |
| }); | |
| 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> | |
| </body> | |
| </html> | |
| `; | |
| app.get('/', (req, res) => { | |
| res.send(html); | |
| }); | |
| app.post('/extract-transcript', async (req, res) => { | |
| const { videoUrl, videoTitle } = req.body; | |
| if (!videoUrl || !videoTitle) { | |
| return res.status(400).send('videoUrl and videoTitle are 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 }); | |
| // Click the "Expand" button to expand the video description | |
| await page.click('tp-yt-paper-button#expand'); | |
| // Wait for the "Show transcript" button and click it | |
| 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}`); | |
| }); |