youtube-summary1 / index.html
mahesh1209's picture
Update index.html
c8dedad verified
<!DOCTYPE html>
<html>
<head>
<title>YouTube Summarizer</title>
</head>
<body>
<h2>Summarize a YouTube Video</h2>
<input type="text" id="youtubeUrl" placeholder="Paste YouTube URL">
<button onclick="summarizeVideo()">Summarize</button>
<pre id="summaryOutput"></pre>
<script>
async function summarizeVideo() {
const url = document.getElementById('youtubeUrl').value;
const videoId = extractVideoID(url);
if (!videoId) return alert("Invalid YouTube URL");
const transcript = await fetchTranscript(videoId);
const summary = await summarizeText(transcript);
document.getElementById('summaryOutput').textContent = summary;
}
function extractVideoID(url) {
const match = url.match(/(?:v=|\/)([0-9A-Za-z_-]{11})/);
return match ? match[1] : null;
}
async function fetchTranscript(videoId) {
const response = await fetch(`https://youtubetranscriptapi.streamlit.app/api/transcript/${videoId}`);
const data = await response.json();
return data.transcript.map(t => t.text).join(' ');
}
async function summarizeText(text) {
const response = await fetch('https://api-inference.huggingface.co/models/facebook/bart-large-cnn', {
method: 'POST',
headers: {
'Authorization': 'Bearer YOUR_HF_API_KEY',
'Content-Type': 'application/json'
},
body: JSON.stringify({ inputs: text })
});
const result = await response.json();
return result[0]?.summary_text || "No summary available";
}
</script>
</body>
</html>