Spaces:
Paused
Paused
File size: 4,323 Bytes
b87c704 305000a b87c704 305000a b87c704 98e9a75 b87c704 61c2768 b87c704 305000a b87c704 61c2768 b87c704 61c2768 b87c704 61c2768 b87c704 61c2768 b87c704 61c2768 b87c704 61c2768 305000a 98e9a75 305000a b87c704 305000a b87c704 305000a b87c704 305000a b87c704 305000a b87c704 305000a 98e9a75 305000a b87c704 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 |
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}`);
}); |