| <!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> |
