|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Local Intro Scorer</title> |
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> |
|
|
<style> |
|
|
body { background-color: #f8f9fa; padding-top: 50px; } |
|
|
.card-score { font-size: 2rem; font-weight: bold; color: #0d6efd; } |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<div class="container"> |
|
|
<h1 class="text-center mb-4">Introduction Scoring System (Local)</h1> |
|
|
|
|
|
<div class="row"> |
|
|
<div class="col-md-6"> |
|
|
<div class="card p-4"> |
|
|
<div class="mb-3"> |
|
|
<label for="transcript" class="form-label">Transcript</label> |
|
|
<textarea class="form-control" id="transcript" rows="10" placeholder="Paste text here..."></textarea> |
|
|
</div> |
|
|
<div class="mb-3"> |
|
|
<label for="duration" class="form-label">Duration (seconds)</label> |
|
|
<input type="number" class="form-control" id="duration" value="60"> |
|
|
</div> |
|
|
<button onclick="analyze()" class="btn btn-primary w-100" id="btnAnalyze">Analyze</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="col-md-6"> |
|
|
<div class="card p-4 h-100"> |
|
|
<h3>Results</h3> |
|
|
<div id="loading" class="text-muted" style="display:none;">Processing...</div> |
|
|
<div id="results-area" style="display:none;"> |
|
|
<div class="text-center mb-3"> |
|
|
<div>Total Score</div> |
|
|
<div class="card-score" id="total-score">0/100</div> |
|
|
</div> |
|
|
<ul class="list-group" id="breakdown-list"> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
async function analyze() { |
|
|
const transcript = document.getElementById('transcript').value; |
|
|
const duration = document.getElementById('duration').value; |
|
|
const btn = document.getElementById('btnAnalyze'); |
|
|
const loading = document.getElementById('loading'); |
|
|
const resArea = document.getElementById('results-area'); |
|
|
|
|
|
if(!transcript) return alert("Please enter text"); |
|
|
|
|
|
btn.disabled = true; |
|
|
loading.style.display = 'block'; |
|
|
resArea.style.display = 'none'; |
|
|
|
|
|
try { |
|
|
const response = await fetch('/api/score', { |
|
|
method: 'POST', |
|
|
headers: {'Content-Type': 'application/json'}, |
|
|
body: JSON.stringify({ transcript: transcript, duration: parseInt(duration) }) |
|
|
}); |
|
|
|
|
|
const data = await response.json(); |
|
|
|
|
|
document.getElementById('total-score').innerText = data['Total Score'] + "/100"; |
|
|
const list = document.getElementById('breakdown-list'); |
|
|
list.innerHTML = ""; |
|
|
|
|
|
for (const [key, val] of Object.entries(data['Breakdown'])) { |
|
|
const li = document.createElement('li'); |
|
|
li.className = "list-group-item"; |
|
|
li.innerHTML = `<strong>${key}</strong>: ${val.score} pts <br><small class='text-muted'>${val.feedback}</small>`; |
|
|
list.appendChild(li); |
|
|
} |
|
|
|
|
|
resArea.style.display = 'block'; |
|
|
} catch (error) { |
|
|
alert("Error connecting to backend"); |
|
|
console.error(error); |
|
|
} finally { |
|
|
btn.disabled = false; |
|
|
loading.style.display = 'none'; |
|
|
} |
|
|
} |
|
|
</script> |
|
|
</body> |
|
|
</html> |
