static/index.html

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