|
|
|
|
|
<!DOCTYPE html> |
|
|
<html> |
|
|
<head> |
|
|
<title>Video Accent Analyzer</title> |
|
|
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script> |
|
|
<style> |
|
|
body { |
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; |
|
|
max-width: 1000px; |
|
|
margin: 0 auto; |
|
|
padding: 20px; |
|
|
background-color: #f5f5f5; |
|
|
} |
|
|
.container { |
|
|
background: white; |
|
|
padding: 20px; |
|
|
border-radius: 10px; |
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1); |
|
|
} |
|
|
.input-group { |
|
|
margin-bottom: 20px; |
|
|
} |
|
|
input, button { |
|
|
padding: 10px; |
|
|
margin: 5px 0; |
|
|
border-radius: 5px; |
|
|
border: 1px solid #ddd; |
|
|
} |
|
|
input[type="text"] { |
|
|
width: 100%; |
|
|
box-sizing: border-box; |
|
|
} |
|
|
button { |
|
|
background: linear-gradient(45deg, #4CAF50, #2196F3); |
|
|
color: white; |
|
|
border: none; |
|
|
cursor: pointer; |
|
|
transition: transform 0.2s; |
|
|
} |
|
|
button:hover { |
|
|
transform: scale(1.02); |
|
|
} |
|
|
#results { |
|
|
margin-top: 20px; |
|
|
padding: 20px; |
|
|
border-radius: 5px; |
|
|
background-color: #f8f9fa; |
|
|
} |
|
|
.error { |
|
|
color: red; |
|
|
padding: 10px; |
|
|
background-color: #fee; |
|
|
border-radius: 5px; |
|
|
} |
|
|
#plot { |
|
|
margin-top: 20px; |
|
|
} |
|
|
.metric { |
|
|
display: inline-block; |
|
|
padding: 10px; |
|
|
margin: 5px; |
|
|
background: #fff; |
|
|
border-radius: 5px; |
|
|
box-shadow: 0 1px 3px rgba(0,0,0,0.1); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<div class="container"> |
|
|
<h1>🎧 Video Accent Analyzer</h1> |
|
|
|
|
|
<div class="input-group"> |
|
|
<input type="text" id="videoUrl" placeholder="Enter YouTube, Loom, or direct video URL"> |
|
|
<input type="number" id="duration" value="30" min="10" max="120" step="10"> |
|
|
<button onclick="analyzeVideo()">Analyze Video</button> |
|
|
</div> |
|
|
|
|
|
<div id="loading" style="display: none;"> |
|
|
Analyzing video... Please wait... |
|
|
</div> |
|
|
|
|
|
<div id="results" style="display: none;"></div> |
|
|
<div id="plot"></div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
async function analyzeVideo() { |
|
|
const url = document.getElementById('videoUrl').value; |
|
|
const duration = document.getElementById('duration').value; |
|
|
const loading = document.getElementById('loading'); |
|
|
const results = document.getElementById('results'); |
|
|
const plot = document.getElementById('plot'); |
|
|
|
|
|
if (!url) { |
|
|
alert('Please enter a video URL'); |
|
|
return; |
|
|
} |
|
|
|
|
|
loading.style.display = 'block'; |
|
|
results.style.display = 'none'; |
|
|
plot.innerHTML = ''; |
|
|
|
|
|
try { |
|
|
const response = await fetch('/api/analyze', { |
|
|
method: 'POST', |
|
|
headers: { |
|
|
'Content-Type': 'application/json', |
|
|
}, |
|
|
body: JSON.stringify({ url, duration }), |
|
|
}); |
|
|
|
|
|
const data = await response.json(); |
|
|
|
|
|
if (data.error) { |
|
|
results.innerHTML = `<div class="error">Error: ${data.error}</div>`; |
|
|
results.style.display = 'block'; |
|
|
return; |
|
|
} |
|
|
|
|
|
|
|
|
results.innerHTML = ` |
|
|
<h2>Analysis Results</h2> |
|
|
<div class="metric"> |
|
|
<strong>Predicted Accent:</strong><br> |
|
|
${data.predicted_accent} |
|
|
</div> |
|
|
<div class="metric"> |
|
|
<strong>Confidence:</strong><br> |
|
|
${data.accent_confidence.toFixed(1)}% |
|
|
</div> |
|
|
<div class="metric"> |
|
|
<strong>English Confidence:</strong><br> |
|
|
${data.english_confidence.toFixed(1)}% |
|
|
</div> |
|
|
<div class="metric"> |
|
|
<strong>Audio Duration:</strong><br> |
|
|
${data.audio_duration.toFixed(1)}s |
|
|
</div> |
|
|
`; |
|
|
|
|
|
|
|
|
Plotly.newPlot('plot', data.plot.data, data.plot.layout); |
|
|
results.style.display = 'block'; |
|
|
|
|
|
} catch (error) { |
|
|
results.innerHTML = `<div class="error">Error: ${error.message}</div>`; |
|
|
results.style.display = 'block'; |
|
|
} finally { |
|
|
loading.style.display = 'none'; |
|
|
} |
|
|
} |
|
|
</script> |
|
|
</body> |
|
|
</html> |
