<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>YouTube Video Transcription</title>
<style>
body { font-family: Arial, sans-serif; margin: 2em; }
.container { max-width: 600px; margin: auto; }
label { display: block; margin-top: 1.2em; }
input, textarea { width: 100%; padding: 0.7em; margin-top: 0.5em; }
button { margin-top: 1.2em; padding: 0.7em 1.5em; }
#transcription { min-height: 180px; background: #f7f7f7; margin-top: 1em; }
</style>
</head>
<body>
<div class="container">
<h2>YouTube Video Transcriber</h2>
<label for="apiKey">API Key:</label>
<input type="text" id="apiKey" placeholder="sk-b315ed15d15f449b85ab9448006d2245" />
<label for="videoUrl">YouTube Video URL:</label>
<input type="text" id="videoUrl" placeholder="Paste YouTube video link here..." />
<button onclick="transcribeVideo()">Transcribe</button>
<label for="transcription">Transcription:</label>
<textarea id="transcription" readonly placeholder="Transcription will appear here..."></textarea>
</div>
<script>
// This is a placeholder. Real implementation requires backend.
function transcribeVideo() {
const apiKey = document.getElementById('apiKey').value.trim();
const videoUrl = document.getElementById('videoUrl').value.trim();
const transcriptionBox = document.getElementById('transcription');
if (!apiKey || !videoUrl) {
transcriptionBox.value = 'Please enter both an API key and a YouTube video URL.';
return;
}
transcriptionBox.value = 'Fetching transcription (demo only: integration needed with backend/API)...';
// Here you would add JS logic to send the video URL and API key to your backend or API service.
}
</script>
</body>
</html>
No comments:
Post a Comment