Spaces:

tasmimulhuda
/

english-accent-detection-from-video-url

Sleeping

App Files Files Community

english-accent-detection-from-video-url / templates /index.html

tasmimulhuda

first

15a1f73 3 months ago

raw

history blame contribute delete

9.78 kB

	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>REM Waste - English Accent Analyzer</title>
	<script src="https://cdn.tailwindcss.com"></script>
	<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
	</head>

	<body class="flex items-center justify-center min-h-screen p-4">
	<div class="container mx-auto p-6 card">
	<h1 class="text-3xl font-bold text-center text-gray-800 mb-6">English Accent Analyzer</h1>
	<p class="text-center text-gray-600 mb-8">
	Enter a public video URL (e.g., YouTube, Loom, direct MP4 link) to analyze the speaker's English accent.
	</p>

	<form id="analyzeForm" class="space-y-6">
	<div>
	<label for="videoUrl" class="block text-sm font-medium text-gray-700 mb-2">Video URL:</label>
	<input type="url" id="videoUrl" name="video_url"
	placeholder="e.g., https://www.youtube.com/watch?v=dQw4w9WgXcQ"
	class="input-field focus:ring-indigo-500 focus:border-indigo-500" required>
	</div>
	<button type="submit" class="btn-primary w-full text-lg font-semibold">
	Analyze Accent
	</button>
	</form>

	<div id="statusMessage" class="mt-8 p-4 rounded-lg text-center text-gray-800 font-medium hidden">
	</div>

	<!-- <div id="results" class="mt-8 p-6 rounded-lg bg-gray-50 border border-gray-200 hidden">
	<h2 class="text-xl font-semibold text-gray-800 mb-4">Analysis Results:</h2>
	<p class="text-lg text-gray-700 mb-2"><strong>Detected Accent:</strong> <span id="accentResult"
	class="font-bold text-indigo-700"></span></p>
	<p class="text-lg text-gray-700 mb-2"><strong>Confidence Score:</strong> <span id="confidenceResult"
	class="font-bold text-indigo-700"></span></p>
	<p class="text-sm text-gray-600 mt-4"><span id="summaryResult"></span></p>
	</div> -->

	<div id="results" class="mt-8 p-6 rounded-lg border border-gray-200 hidden">
	<h2 class="text-xl font-semibold text-gray-800 mb-4">Analysis Results:</h2>
	<p class="text-lg mb-2"><span class="result-label">Detected Accent:</span> <span id="accentResult"
	class="result-value"></span></p>
	<p class="text-lg mb-2"><span class="result-label">Confidence Score:</span> <span id="confidenceResult"
	class="result-value"></span></p>
	<h2>
	<p id="summaryResult" class="result-summary"></p>
	</h2>
	</div>


	<div id="errorMessage" class="mt-8 p-4 rounded-lg bg-red-100 border border-red-400 text-red-700 hidden">
	</div>
	</div>

	<script>
	const analyzeForm = document.getElementById('analyzeForm');
	const videoUrlInput = document.getElementById('videoUrl');
	const statusMessageDiv = document.getElementById('statusMessage');
	const resultsDiv = document.getElementById('results');
	const accentResultSpan = document.getElementById('accentResult');
	const confidenceResultSpan = document.getElementById('confidenceResult');
	const summaryResultSpan = document.getElementById('summaryResult');
	const errorMessageDiv = document.getElementById('errorMessage');

	let pollingInterval;

	// Function to display status messages
	function showStatus(message, type = 'info') {
	statusMessageDiv.textContent = message;
	statusMessageDiv.classList.remove('hidden', 'bg-green-100', 'bg-red-100', 'text-green-700', 'text-red-700', 'bg-blue-100', 'text-blue-700');
	statusMessageDiv.classList.add('block');
	if (type === 'success') {
	statusMessageDiv.classList.add('bg-green-100', 'text-green-700');
	} else if (type === 'error') {
	statusMessageDiv.classList.add('bg-red-100', 'text-red-700');
	} else {
	statusMessageDiv.classList.add('bg-blue-100', 'text-blue-700');
	}
	resultsDiv.classList.add('hidden');
	errorMessageDiv.classList.add('hidden');
	}

	// Function to display error messages
	function showError(message) {
	errorMessageDiv.textContent = `Error: ${message}`;
	errorMessageDiv.classList.remove('hidden');
	statusMessageDiv.classList.add('hidden');
	resultsDiv.classList.add('hidden');
	}

	// Function to display results
	// function showResults(accent, confidence, summary) {
	// console.log("showResults called with:"); // NEW DEBUGGING LOG
	// console.log(" Accent:", accent); // NEW DEBUGGING LOG
	// console.log(" Confidence:", confidence); // NEW DEBUGGING LOG
	// console.log(" Summary:", summary); // NEW DEBUGGING LOG

	// accentResultSpan.textContent = accent;
	// confidenceResultSpan.textContent = confidence;
	// summaryResultSpan.textContent = summary;

	// // resultsDiv.classList.remove('hidden');
	// console.log("resultsDiv hidden class removed:", !resultsDiv.classList.contains('hidden')); // NEW DEBUGGING LOG

	// statusMessageDiv.classList.add('hidden');
	// errorMessageDiv.classList.add('hidden');
	// }


	function showResults(accent, confidence, summary) {
	accentResultSpan.textContent = accent \|\| 'N/A';
	confidenceResultSpan.textContent = confidence \|\| 'N/A';
	summaryResultSpan.textContent = summary \|\| '';

	resultsDiv.classList.remove('hidden');
	resultsDiv.style.display = 'block';

	statusMessageDiv.classList.add('hidden');
	errorMessageDiv.classList.add('hidden');
	}


	// Handle form submission
	analyzeForm.addEventListener('submit', async (event) => {
	event.preventDefault(); // Prevent default form submission

	const videoUrl = videoUrlInput.value.trim();
	if (!videoUrl) {
	showError("Please enter a video URL.");
	return;
	}

	// // Clear previous results/errors and show processing status
	// clearInterval(pollingInterval); // Stop any previous polling
	// showStatus("Initiating analysis...");
	// resultsDiv.classList.add('hidden');
	// errorMessageDiv.classList.add('hidden');


	// Clear previous results and messages
	clearInterval(pollingInterval); // Stop any previous polling
	statusMessageDiv.classList.add('hidden');
	resultsDiv.classList.add('hidden');
	errorMessageDiv.classList.add('hidden');

	// Clear previous result content
	accentResultSpan.textContent = '';
	confidenceResultSpan.textContent = '';
	summaryResultSpan.textContent = '';

	try {
	const response = await fetch('/analyze', {
	method: 'POST',
	headers: {
	'Content-Type': 'application/json',
	},
	body: JSON.stringify({ video_url: videoUrl }),
	});

	const data = await response.json();

	if (response.ok) {
	if (data.status === 'processing') {
	showStatus(data.message);
	// Start polling for status updates
	pollingInterval = setInterval(() => checkStatus(data.task_id), 3000); // Poll every 3 seconds
	} else {
	showError(data.message \|\| "An unexpected response was received.");
	}
	} else {
	showError(data.message \|\| `Server error: ${response.status}`);
	}
	} catch (error) {
	console.error('Fetch error:', error);
	showError("Could not connect to the server or an unexpected network error occurred.");
	}
	});

	// Function to poll for task status
	async function checkStatus(taskId) {
	try {
	const response = await fetch(`/status/${taskId}`);
	const data = await response.json();

	if (response.ok) {
	if (data.status === 'processing') {
	showStatus(data.message);
	} else if (data.status === 'completed') {
	clearInterval(pollingInterval); // Stop polling
	console.log("Received data from backend:", data); // This log is crucial
	showResults(data.accent, data.confidence, data.summary);
	showStatus("Analysis completed successfully!", 'success');
	} else if (data.status === 'error') {
	clearInterval(pollingInterval); // Stop polling
	showError(data.message);
	}
	} else {
	clearInterval(pollingInterval); // Stop polling on server error
	showError(data.message \|\| `Server error: ${response.status}`);
	}
	} catch (error) {
	console.error('Polling error:', error);
	clearInterval(pollingInterval); // Stop polling on network error
	showError("Lost connection to the server while checking status.");
	}
	}
	</script>
	</body>

	</html>