Spaces:
Sleeping
Sleeping
| <html lang="ar" dir="rtl"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>الصقر</title> | |
| <meta | |
| name="description" | |
| content="Real-time Arabic speech recognition for car plate numbers using VAD and Whisper ASR" | |
| /> | |
| <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+Sans+Arabic:wght@300;400;500;600;700&display=swap" | |
| rel="stylesheet" | |
| /> | |
| <link rel="stylesheet" href="/static/styles.css" /> | |
| </head> | |
| <body> | |
| <div class="app-container"> | |
| <!-- Animated background --> | |
| <div class="bg-gradient"></div> | |
| <div class="bg-orbs"> | |
| <div class="orb orb-1"></div> | |
| <div class="orb orb-2"></div> | |
| <div class="orb orb-3"></div> | |
| </div> | |
| <!-- Header --> | |
| <header class="header"> | |
| <div class="logo"> | |
| <svg | |
| class="logo-icon" | |
| viewBox="0 0 24 24" | |
| fill="none" | |
| stroke="currentColor" | |
| stroke-width="2" | |
| > | |
| <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z" /> | |
| <path d="M19 10v2a7 7 0 0 1-14 0v-2" /> | |
| <line x1="12" y1="19" x2="12" y2="23" /> | |
| <line x1="8" y1="23" x2="16" y2="23" /> | |
| </svg> | |
| <h1>التعرف على رقم السيارة</h1> | |
| </div> | |
| <div class="connection-status" id="connectionStatus"> | |
| <span class="status-dot"></span> | |
| <span class="status-text">غير متصل</span> | |
| </div> | |
| </header> | |
| <!-- Main content --> | |
| <main class="main-content"> | |
| <div class="content-wrapper"> | |
| <div class="center-panel"> | |
| <!-- Status card --> | |
| <div class="status-card glass-card"> | |
| <div class="status-indicator" id="statusIndicator"> | |
| <div class="pulse-ring"></div> | |
| <div class="status-icon"> | |
| <svg | |
| viewBox="0 0 24 24" | |
| fill="none" | |
| stroke="currentColor" | |
| stroke-width="2" | |
| > | |
| <path | |
| d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z" | |
| /> | |
| <path d="M19 10v2a7 7 0 0 1-14 0v-2" /> | |
| </svg> | |
| </div> | |
| </div> | |
| <p class="status-message" id="statusMessage">اضغط للبدء</p> | |
| <div class="probability-bar" id="probabilityBar"> | |
| <div class="probability-fill" id="probabilityFill"></div> | |
| </div> | |
| </div> | |
| <!-- Microphone button --> | |
| <button | |
| class="mic-button" | |
| id="micButton" | |
| aria-label="Start recording" | |
| > | |
| <div class="mic-button-inner"> | |
| <svg | |
| class="mic-icon" | |
| viewBox="0 0 24 24" | |
| fill="none" | |
| stroke="currentColor" | |
| stroke-width="2" | |
| > | |
| <path | |
| d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z" | |
| /> | |
| <path d="M19 10v2a7 7 0 0 1-14 0v-2" /> | |
| <line x1="12" y1="19" x2="12" y2="23" /> | |
| <line x1="8" y1="23" x2="16" y2="23" /> | |
| </svg> | |
| <svg | |
| class="stop-icon hidden" | |
| viewBox="0 0 24 24" | |
| fill="currentColor" | |
| > | |
| <rect x="6" y="6" width="12" height="12" rx="2" /> | |
| </svg> | |
| </div> | |
| <div class="mic-ripple"></div> | |
| </button> | |
| <!-- Waveform visualization --> | |
| <div class="waveform-container glass-card" id="waveformContainer"> | |
| <canvas id="waveformCanvas"></canvas> | |
| </div> | |
| <!-- Transcription result --> | |
| <div class="transcription-card glass-card" id="transcriptionCard"> | |
| <h2>النتيجة</h2> | |
| <div class="transcription-content" id="transcriptionContent"> | |
| <p class="placeholder-text"> | |
| سيظهر النص هنا بعد انتهاء الكلام... | |
| </p> | |
| </div> | |
| <div class="transcription-history" id="transcriptionHistory"> | |
| <!-- Previous transcriptions will be added here --> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Confidence Side Panel --> | |
| <div class="side-panel glass-card hidden" id="confidencePanel"> | |
| <h3>تفاصيل الدقة</h3> | |
| <div class="confidence-summary"> | |
| <span>نسبة الثقة العامة:</span> | |
| <span id="globalConfidence" class="confidence-value">0%</span> | |
| </div> | |
| <div class="table-container"> | |
| <table class="confidence-table"> | |
| <thead> | |
| <tr> | |
| <th>الرمز</th> | |
| <th>الثقة</th> | |
| </tr> | |
| </thead> | |
| <tbody id="confidenceTableBody"> | |
| <!-- Rows will be added dynamically --> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="footer"></footer> | |
| </div> | |
| <script src="/static/app.js"></script> | |
| </body> | |
| </html> | |