Hugging Face's logo

Spaces:
Idrees0
/
urdu-speech-annotator
Running

App Files Community
urdu-speech-annotator / index.html
Idrees0's picture
Idrees0
Deploy 24/7 static Urdu Speech Annotator
caf4f3b verified
Raw History Blame Contribute Delete
18.7 kB
<!DOCTYPE html>
<html lang="ur" dir="ltr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Urdu Speech Annotator (24/7 Cloud)</title>
<meta name="description" content="Annotation tool for the Urdu-Gold speech dataset">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Noto+Nastaliq+Urdu:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- ===== Top Bar ===== -->
<header id="top-bar">
<div class="top-bar-left">
<h1 class="logo">
<span class="logo-icon">🎙</span>
Urdu Speech Annotator
</h1>
</div>
<div class="top-bar-center">
<div class="progress-wrapper">
<div class="progress-bar">
<div class="progress-fill" id="progress-fill"></div>
</div>
<span class="progress-text" id="progress-text">Loading dataset...</span>
</div>
</div>
<div class="top-bar-right">
<div class="export-group">
<button type="button" class="export-btn" id="export-dropdown-btn" title="Download current annotations">
📥 Export Data ▾
</button>
<div class="export-menu hidden" id="export-menu">
<button type="button" class="export-item" id="export-csv-btn">📊 Download CSV</button>
<button type="button" class="export-item" id="export-jsonl-btn">📜 Download JSONL</button>
<button type="button" class="export-item" id="export-json-btn">📋 View / Copy JSON</button>
</div>
</div>
<div class="annotator-box">
<label class="annotator-label" for="annotator-id">Your Name/ID:</label>
<input type="text" id="annotator-id" class="annotator-input" value="Annotator-1" placeholder="Enter your name">
</div>
</div>
</header>
<!-- ===== Main Content ===== -->
<main id="main-content">
<!-- Left Panel: Audio & Context -->
<section class="panel panel-left" id="panel-left">
<div class="card sample-info-card">
<div class="sample-header">
<span class="sample-id" id="sample-id">UG_00000</span>
<span class="sample-counter" id="sample-counter">0 / 0</span>
<span class="annotation-badge hidden" id="annotation-badge">✓ Annotated</span>
</div>
</div>
<div class="card audio-card">
<div class="audio-label">Audio Player (24/7 Cloud Streaming)</div>
<div class="custom-player" id="custom-player">
<button class="play-btn" id="play-btn" title="Play/Pause (Space)">
<svg id="play-icon" viewBox="0 0 24 24" fill="currentColor"><polygon points="5,3 19,12 5,21"></polygon></svg>
<svg id="pause-icon" viewBox="0 0 24 24" fill="currentColor" class="hidden"><rect x="5" y="3" width="4" height="18"></rect><rect x="15" y="3" width="4" height="18"></rect></svg>
</button>
<div class="player-track" id="player-track">
<div class="player-progress" id="player-progress"></div>
</div>
<span class="player-time" id="player-time">0:00 / 0:00</span>
</div>
<audio id="audio-element" preload="auto"></audio>
</div>
<div class="card transcript-card">
<div class="transcript-label">Transcript (Urdu)</div>
<p class="transcript-text" id="transcript-text" dir="rtl" lang="ur">
Loading transcript...
</p>
</div>
<div class="card nav-card">
<button class="nav-btn" id="btn-prev" title="Previous (←)">← Previous</button>
<div class="jump-controls">
<input type="number" id="jump-input" min="0" placeholder="Go to #" class="jump-input">
<button class="nav-btn nav-btn-small" id="btn-jump">Go</button>
</div>
<button class="nav-btn" id="btn-next" title="Next (→)">Next →</button>
</div>
<!-- Keyboard shortcuts reference -->
<div class="card shortcuts-card">
<div class="shortcuts-label">Keyboard Shortcuts</div>
<div class="shortcuts-grid">
<kbd>Space</kbd> <span>Play / Pause</span>
<kbd>←</kbd> <span>Previous sample</span>
<kbd>→</kbd> <span>Next sample</span>
<kbd>Enter</kbd> <span>Submit & Next</span>
<kbd>U</kbd> <span>Next unannotated</span>
</div>
</div>
</section>
<!-- Right Panel: Annotation Form -->
<section class="panel panel-right" id="panel-right">
<form id="annotation-form" autocomplete="off">
<!-- Primary Emotion -->
<div class="card form-section">
<h2 class="section-title">
<span class="section-number">1</span>
Primary Emotion
</h2>
<div class="emotion-grid" id="primary-emotion-grid">
<label class="emotion-chip"><input type="radio" name="primary_emotion" value="sadness"><span>😢 Sadness</span></label>
<label class="emotion-chip"><input type="radio" name="primary_emotion" value="longing"><span>💭 Longing</span></label>
<label class="emotion-chip"><input type="radio" name="primary_emotion" value="romance"><span>❤️ Romance/Love</span></label>
<label class="emotion-chip"><input type="radio" name="primary_emotion" value="nostalgia"><span>🕰️ Nostalgia</span></label>
<label class="emotion-chip"><input type="radio" name="primary_emotion" value="joy"><span>😊 Joy</span></label>
<label class="emotion-chip"><input type="radio" name="primary_emotion" value="anger"><span>😠 Anger</span></label>
<label class="emotion-chip"><input type="radio" name="primary_emotion" value="hope"><span>🌟 Hope</span></label>
<label class="emotion-chip"><input type="radio" name="primary_emotion" value="fear"><span>😰 Fear/Anxiety</span></label>
<label class="emotion-chip"><input type="radio" name="primary_emotion" value="neutral"><span>😐 Neutral/Calm</span></label>
<label class="emotion-chip"><input type="radio" name="primary_emotion" value="mixed"><span>🎭 Mixed/Complex</span></label>
</div>
</div>
<!-- Secondary Emotion -->
<div class="card form-section">
<h2 class="section-title">
<span class="section-number">2</span>
Secondary Emotion
</h2>
<div class="emotion-grid" id="secondary-emotion-grid">
<label class="emotion-chip"><input type="radio" name="secondary_emotion" value="none"><span>⊘ None</span></label>
<label class="emotion-chip"><input type="radio" name="secondary_emotion" value="sadness"><span>😢 Sadness</span></label>
<label class="emotion-chip"><input type="radio" name="secondary_emotion" value="longing"><span>💭 Longing</span></label>
<label class="emotion-chip"><input type="radio" name="secondary_emotion" value="romance"><span>❤️ Romance/Love</span></label>
<label class="emotion-chip"><input type="radio" name="secondary_emotion" value="nostalgia"><span>🕰️ Nostalgia</span></label>
<label class="emotion-chip"><input type="radio" name="secondary_emotion" value="joy"><span>😊 Joy</span></label>
<label class="emotion-chip"><input type="radio" name="secondary_emotion" value="anger"><span>😠 Anger</span></label>
<label class="emotion-chip"><input type="radio" name="secondary_emotion" value="hope"><span>🌟 Hope</span></label>
<label class="emotion-chip"><input type="radio" name="secondary_emotion" value="fear"><span>😰 Fear/Anxiety</span></label>
<label class="emotion-chip"><input type="radio" name="secondary_emotion" value="neutral"><span>😐 Neutral/Calm</span></label>
<label class="emotion-chip"><input type="radio" name="secondary_emotion" value="mixed"><span>🎭 Mixed/Complex</span></label>
</div>
</div>
<!-- Emotion Intensity -->
<div class="card form-section">
<h2 class="section-title">
<span class="section-number">3</span>
Emotion Intensity
</h2>
<p class="section-desc">How strongly is the emotion expressed?</p>
<div class="scale-row" data-field="emotion_intensity">
<label class="scale-item"><input type="radio" name="emotion_intensity" value="1"><span>1</span><small>Very Low</small></label>
<label class="scale-item"><input type="radio" name="emotion_intensity" value="2"><span>2</span><small>Low</small></label>
<label class="scale-item"><input type="radio" name="emotion_intensity" value="3"><span>3</span><small>Medium</small></label>
<label class="scale-item"><input type="radio" name="emotion_intensity" value="4"><span>4</span><small>High</small></label>
<label class="scale-item"><input type="radio" name="emotion_intensity" value="5"><span>5</span><small>Very High</small></label>
</div>
</div>
<!-- Vocal Expressiveness -->
<div class="card form-section">
<h2 class="section-title">
<span class="section-number">4</span>
Vocal Expressiveness
</h2>
<p class="section-desc">How expressive and dynamic is the vocal delivery?</p>
<div class="scale-row" data-field="vocal_expressiveness">
<label class="scale-item"><input type="radio" name="vocal_expressiveness" value="1"><span>1</span><small>Flat</small></label>
<label class="scale-item"><input type="radio" name="vocal_expressiveness" value="2"><span>2</span><small>Low</small></label>
<label class="scale-item"><input type="radio" name="vocal_expressiveness" value="3"><span>3</span><small>Moderate</small></label>
<label class="scale-item"><input type="radio" name="vocal_expressiveness" value="4"><span>4</span><small>Expressive</small></label>
<label class="scale-item"><input type="radio" name="vocal_expressiveness" value="5"><span>5</span><small>Masterful</small></label>
</div>
</div>
<!-- Acting Authenticity -->
<div class="card form-section">
<h2 class="section-title">
<span class="section-number">5</span>
Acting Authenticity
</h2>
<p class="section-desc">Does the performance feel genuine and emotionally authentic?</p>
<div class="scale-row" data-field="acting_authenticity">
<label class="scale-item"><input type="radio" name="acting_authenticity" value="1"><span>1</span><small>Fake</small></label>
<label class="scale-item"><input type="radio" name="acting_authenticity" value="2"><span>2</span><small>Weak</small></label>
<label class="scale-item"><input type="radio" name="acting_authenticity" value="3"><span>3</span><small>Decent</small></label>
<label class="scale-item"><input type="radio" name="acting_authenticity" value="4"><span>4</span><small>Authentic</small></label>
<label class="scale-item"><input type="radio" name="acting_authenticity" value="5"><span>5</span><small>Superb</small></label>
</div>
</div>
<!-- Rhythm / Prosody -->
<div class="card form-section">
<h2 class="section-title">
<span class="section-number">6</span>
Rhythm / Prosody
</h2>
<p class="section-desc">Quality of rhythm, pacing, pauses, and emphasis.</p>
<div class="scale-row" data-field="rhythm_prosody">
<label class="scale-item"><input type="radio" name="rhythm_prosody" value="1"><span>1</span><small>Poor</small></label>
<label class="scale-item"><input type="radio" name="rhythm_prosody" value="2"><span>2</span><small>Below</small></label>
<label class="scale-item"><input type="radio" name="rhythm_prosody" value="3"><span>3</span><small>Average</small></label>
<label class="scale-item"><input type="radio" name="rhythm_prosody" value="4"><span>4</span><small>Good</small></label>
<label class="scale-item"><input type="radio" name="rhythm_prosody" value="5"><span>5</span><small>Excellent</small></label>
</div>
</div>
<!-- Urdu Pronunciation -->
<div class="card form-section">
<h2 class="section-title">
<span class="section-number">7</span>
Urdu Pronunciation
</h2>
<p class="section-desc">Authenticity and correctness of Urdu pronunciation.</p>
<div class="scale-row" data-field="urdu_pronunciation">
<label class="scale-item"><input type="radio" name="urdu_pronunciation" value="1"><span>1</span><small>Poor</small></label>
<label class="scale-item"><input type="radio" name="urdu_pronunciation" value="2"><span>2</span><small>Below</small></label>
<label class="scale-item"><input type="radio" name="urdu_pronunciation" value="3"><span>3</span><small>Average</small></label>
<label class="scale-item"><input type="radio" name="urdu_pronunciation" value="4"><span>4</span><small>Good</small></label>
<label class="scale-item"><input type="radio" name="urdu_pronunciation" value="5"><span>5</span><small>Native</small></label>
</div>
</div>
<!-- Speech Clarity -->
<div class="card form-section">
<h2 class="section-title">
<span class="section-number">8</span>
Speech Clarity
</h2>
<p class="section-desc">How clear and intelligible is the speech?</p>
<div class="scale-row" data-field="speech_clarity">
<label class="scale-item"><input type="radio" name="speech_clarity" value="1"><span>1</span><small>Unclear</small></label>
<label class="scale-item"><input type="radio" name="speech_clarity" value="2"><span>2</span><small>Muddy</small></label>
<label class="scale-item"><input type="radio" name="speech_clarity" value="3"><span>3</span><small>OK</small></label>
<label class="scale-item"><input type="radio" name="speech_clarity" value="4"><span>4</span><small>Clear</small></label>
<label class="scale-item"><input type="radio" name="speech_clarity" value="5"><span>5</span><small>Crystal</small></label>
</div>
</div>
<!-- Confidence -->
<div class="card form-section">
<h2 class="section-title">
<span class="section-number">9</span>
Your Confidence
</h2>
<p class="section-desc">How confident are you in this annotation?</p>
<div class="confidence-row">
<label class="confidence-chip"><input type="radio" name="confidence" value="low"><span>Low</span></label>
<label class="confidence-chip"><input type="radio" name="confidence" value="medium"><span>Medium</span></label>
<label class="confidence-chip"><input type="radio" name="confidence" value="high"><span>High</span></label>
</div>
</div>
<!-- Notes -->
<div class="card form-section">
<h2 class="section-title">
<span class="section-number">✎</span>
Notes <span class="optional-tag">(optional)</span>
</h2>
<textarea id="notes" name="notes" class="notes-input" placeholder="Any additional observations..." rows="2"></textarea>
</div>
<!-- Submit -->
<div class="submit-section">
<button type="submit" class="submit-btn" id="submit-btn">
<span class="submit-text">Submit & Next</span>
<span class="submit-shortcut">Enter ↵</span>
</button>
<button type="button" class="skip-btn" id="skip-btn" title="Skip to next unannotated">
Skip to Unannotated ⏭
</button>
</div>
</form>
</section>
</main>
<!-- Toast notification -->
<div class="toast hidden" id="toast">
<span id="toast-message"></span>
</div>
<script src="app.js"></script>
</body>
</html>