Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>ATOM - Armenian Transcription</title> | |
| <style> | |
| * { | |
| box-sizing: border-box; | |
| padding: 0; | |
| margin: 0; | |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; | |
| } | |
| body { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| min-height: 100vh; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| padding: 2rem; | |
| } | |
| h1 { | |
| color: white; | |
| margin-bottom: 0.5rem; | |
| font-size: 2.5rem; | |
| text-align: center; | |
| text-shadow: 2px 2px 4px rgba(0,0,0,0.2); | |
| } | |
| .subtitle { | |
| color: rgba(255, 255, 255, 0.9); | |
| margin-bottom: 2rem; | |
| text-align: center; | |
| font-size: 1.1rem; | |
| } | |
| .container { | |
| background: white; | |
| border-radius: 20px; | |
| padding: 2rem; | |
| box-shadow: 0 20px 60px rgba(0,0,0,0.3); | |
| max-width: 900px; | |
| width: 100%; | |
| } | |
| #status { | |
| padding: 1rem; | |
| background: #f0f4f8; | |
| border-radius: 10px; | |
| margin-bottom: 1.5rem; | |
| text-align: center; | |
| font-weight: 500; | |
| color: #4a5568; | |
| transition: all 0.3s ease; | |
| } | |
| #status.loading { background: #fef3c7; color: #92400e; } | |
| #status.ready { background: #d1fae5; color: #065f46; } | |
| #status.recording { background: #fecaca; color: #991b1b; animation: pulse 2s infinite; } | |
| #status.processing { background: #dbeafe; color: #1e40af; } | |
| #status.error { background: #fee2e2; color: #991b1b; } | |
| @keyframes pulse { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.7; } | |
| } | |
| .info-box { | |
| background: #eff6ff; | |
| border-left: 4px solid #3b82f6; | |
| padding: 1rem; | |
| border-radius: 8px; | |
| margin-bottom: 1.5rem; | |
| font-size: 0.9rem; | |
| color: #1e40af; | |
| } | |
| .stats { | |
| display: flex; | |
| gap: 1rem; | |
| justify-content: space-around; | |
| padding: 1rem; | |
| background: #f9fafb; | |
| border-radius: 8px; | |
| margin-bottom: 1.5rem; | |
| } | |
| .stat-item { text-align: center; } | |
| .stat-value { font-size: 1.5rem; font-weight: 700; color: #667eea; } | |
| .stat-label { font-size: 0.85rem; color: #6b7280; margin-top: 0.25rem; } | |
| .audio-visualizer { | |
| height: 80px; | |
| background: #1f2937; | |
| border-radius: 8px; | |
| margin-bottom: 1.5rem; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 4px; | |
| padding: 1rem; | |
| } | |
| .bar { | |
| width: 6px; | |
| background: linear-gradient(to top, #10b981, #34d399); | |
| border-radius: 3px; | |
| transition: height 0.1s ease; | |
| min-height: 4px; | |
| } | |
| .settings { | |
| display: flex; | |
| gap: 1.5rem; | |
| margin-bottom: 1.5rem; | |
| flex-wrap: wrap; | |
| padding: 1rem; | |
| background: #f9fafb; | |
| border-radius: 8px; | |
| } | |
| .setting-group { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.5rem; | |
| } | |
| .setting-group label { | |
| font-size: 0.9rem; | |
| font-weight: 500; | |
| color: #4b5563; | |
| } | |
| select { | |
| padding: 0.5rem; | |
| border: 2px solid #e5e7eb; | |
| border-radius: 6px; | |
| font-size: 0.9rem; | |
| background: white; | |
| } | |
| .controls { | |
| display: flex; | |
| gap: 1rem; | |
| justify-content: center; | |
| margin-bottom: 2rem; | |
| flex-wrap: wrap; | |
| } | |
| button { | |
| padding: 1rem 2rem; | |
| font-size: 1rem; | |
| font-weight: 600; | |
| border: none; | |
| border-radius: 10px; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| box-shadow: 0 4px 6px rgba(0,0,0,0.1); | |
| } | |
| button:disabled { opacity: 0.5; cursor: not-allowed; } | |
| #startBtn { background: #10b981; color: white; } | |
| #startBtn:hover:not(:disabled) { | |
| background: #059669; | |
| transform: translateY(-2px); | |
| box-shadow: 0 6px 12px rgba(0,0,0,0.15); | |
| } | |
| #stopBtn { background: #ef4444; color: white; } | |
| #stopBtn:hover:not(:disabled) { | |
| background: #dc2626; | |
| transform: translateY(-2px); | |
| box-shadow: 0 6px 12px rgba(0,0,0,0.15); | |
| } | |
| #clearBtn { background: #6b7280; color: white; } | |
| #clearBtn:hover:not(:disabled) { background: #4b5563; } | |
| .transcription-container { | |
| background: #f9fafb; | |
| border: 2px solid #e5e7eb; | |
| border-radius: 10px; | |
| padding: 1.5rem; | |
| min-height: 300px; | |
| max-height: 500px; | |
| overflow-y: auto; | |
| } | |
| .transcription-item { | |
| margin-bottom: 1rem; | |
| padding: 1rem; | |
| background: white; | |
| border-radius: 8px; | |
| box-shadow: 0 2px 4px rgba(0,0,0,0.05); | |
| animation: slideIn 0.3s ease; | |
| } | |
| @keyframes slideIn { | |
| from { opacity: 0; transform: translateY(-10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .timestamp { | |
| font-size: 0.85rem; | |
| color: #6b7280; | |
| margin-bottom: 0.5rem; | |
| font-family: monospace; | |
| } | |
| .text { | |
| color: #1f2937; | |
| line-height: 1.6; | |
| font-size: 1.1rem; | |
| } | |
| .empty-state { | |
| text-align: center; | |
| color: #9ca3af; | |
| padding: 3rem; | |
| } | |
| .empty-state svg { | |
| width: 64px; | |
| height: 64px; | |
| margin-bottom: 1rem; | |
| opacity: 0.5; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>🎤 ATOM - Armenian Transcription</h1> | |
| <p class="subtitle">Real-time Armenian speech recognition with WebGPU</p> | |
| <div class="container"> | |
| <div id="status" class="loading">Loading ATOM model...</div> | |
| <div class="info-box"> | |
| <strong>Armenian-only model:</strong> This custom ATOM model is trained specifically for Armenian speech recognition. | |
| WebGPU acceleration recommended (Chrome/Edge 113+). | |
| </div> | |
| <div class="stats"> | |
| <div class="stat-item"> | |
| <div class="stat-value" id="chunkCount">0</div> | |
| <div class="stat-label">Chunks Processed</div> | |
| </div> | |
| <div class="stat-item"> | |
| <div class="stat-value" id="recordingTime">00:00</div> | |
| <div class="stat-label">Recording Time</div> | |
| </div> | |
| </div> | |
| <div class="settings"> | |
| <div class="setting-group"> | |
| <label for="chunkLength">Chunk Duration:</label> | |
| <select id="chunkLength"> | |
| <option value="3">3 seconds</option> | |
| <option value="5" selected>5 seconds</option> | |
| <option value="8">8 seconds</option> | |
| <option value="10">10 seconds</option> | |
| </select> | |
| </div> | |
| <div class="setting-group"> | |
| <label> | |
| <input type="checkbox" id="useWebGPU" checked> | |
| Use WebGPU Acceleration | |
| </label> | |
| </div> | |
| </div> | |
| <div class="audio-visualizer" id="visualizer"> | |
| <div class="bar"></div> | |
| <div class="bar"></div> | |
| <div class="bar"></div> | |
| <div class="bar"></div> | |
| <div class="bar"></div> | |
| <div class="bar"></div> | |
| <div class="bar"></div> | |
| <div class="bar"></div> | |
| <div class="bar"></div> | |
| <div class="bar"></div> | |
| <div class="bar"></div> | |
| <div class="bar"></div> | |
| <div class="bar"></div> | |
| <div class="bar"></div> | |
| <div class="bar"></div> | |
| <div class="bar"></div> | |
| <div class="bar"></div> | |
| <div class="bar"></div> | |
| <div class="bar"></div> | |
| <div class="bar"></div> | |
| </div> | |
| <div class="controls"> | |
| <button id="startBtn">🎙️ Start Recording</button> | |
| <button id="stopBtn" disabled>⏹️ Stop Recording</button> | |
| <button id="clearBtn">🗑️ Clear</button> | |
| </div> | |
| <div class="transcription-container" id="transcriptionContainer"> | |
| <div class="empty-state"> | |
| <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z" /> | |
| </svg> | |
| <p>Click "Start Recording" to begin transcribing Armenian speech</p> | |
| </div> | |
| </div> | |
| </div> | |
| <script type="module" src="index.js"></script> | |
| </body> | |
| </html> |