Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Real-time Whisper Transcription</title> | |
| <script> | |
| window.__RTC_CONFIGURATION__ = __INJECTED_RTC_CONFIG__; | |
| </script> | |
| <style> | |
| :root { | |
| --primary-gradient: linear-gradient(135deg, #f9a45c 0%, #e66465 100%); | |
| --background-cream: #faf8f5; | |
| --text-dark: #2d2d2d; | |
| } | |
| body { | |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; | |
| margin: 0; | |
| padding: 0; | |
| background-color: var(--background-cream); | |
| color: var(--text-dark); | |
| min-height: 100vh; | |
| } | |
| .hero { | |
| background: var(--primary-gradient); | |
| color: white; | |
| padding: 2.5rem 2rem; | |
| text-align: center; | |
| } | |
| .hero h1 { | |
| font-size: 2.5rem; | |
| margin: 0; | |
| font-weight: 600; | |
| letter-spacing: -0.5px; | |
| } | |
| .hero p { | |
| font-size: 1rem; | |
| margin-top: 0.5rem; | |
| opacity: 0.9; | |
| } | |
| .container { | |
| max-width: 1000px; | |
| margin: 1.5rem auto; | |
| padding: 0 2rem; | |
| } | |
| .transcript-container { | |
| border-radius: 8px; | |
| box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); | |
| padding: 1.5rem; | |
| height: 300px; | |
| overflow-y: auto; | |
| margin-bottom: 1.5rem; | |
| border: 1px solid rgba(0, 0, 0, 0.1); | |
| } | |
| .controls { | |
| text-align: center; | |
| margin: 1.5rem 0; | |
| } | |
| button { | |
| background: var(--primary-gradient); | |
| color: white; | |
| border: none; | |
| padding: 10px 20px; | |
| font-size: 0.95rem; | |
| border-radius: 6px; | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| font-weight: 500; | |
| min-width: 180px; | |
| } | |
| button:hover { | |
| transform: translateY(-1px); | |
| box-shadow: 0 4px 12px rgba(230, 100, 101, 0.15); | |
| } | |
| button:active { | |
| transform: translateY(0); | |
| } | |
| /* Transcript text styling */ | |
| .transcript-container p { | |
| margin: 0.4rem 0; | |
| padding: 0.6rem; | |
| background: var(--background-cream); | |
| border-radius: 4px; | |
| line-height: 1.4; | |
| font-size: 0.95rem; | |
| } | |
| /* Custom scrollbar - made thinner */ | |
| .transcript-container::-webkit-scrollbar { | |
| width: 6px; | |
| } | |
| .transcript-container::-webkit-scrollbar-track { | |
| background: var(--background-cream); | |
| border-radius: 3px; | |
| } | |
| .transcript-container::-webkit-scrollbar-thumb { | |
| background: #e66465; | |
| border-radius: 3px; | |
| opacity: 0.8; | |
| } | |
| .transcript-container::-webkit-scrollbar-thumb:hover { | |
| background: #f9a45c; | |
| } | |
| /* Add styles for toast notifications */ | |
| .toast { | |
| position: fixed; | |
| top: 20px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| padding: 16px 24px; | |
| border-radius: 4px; | |
| font-size: 14px; | |
| z-index: 1000; | |
| display: none; | |
| box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); | |
| } | |
| .toast.error { | |
| background-color: #f44336; | |
| color: white; | |
| } | |
| .toast.warning { | |
| background-color: #ffd700; | |
| color: black; | |
| } | |
| /* Add styles for audio visualization */ | |
| .icon-with-spinner { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 12px; | |
| min-width: 180px; | |
| } | |
| .spinner { | |
| width: 20px; | |
| height: 20px; | |
| border: 2px solid white; | |
| border-top-color: transparent; | |
| border-radius: 50%; | |
| animation: spin 1s linear infinite; | |
| flex-shrink: 0; | |
| } | |
| .pulse-container { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 12px; | |
| min-width: 180px; | |
| } | |
| .pulse-circle { | |
| width: 20px; | |
| height: 20px; | |
| border-radius: 50%; | |
| background-color: white; | |
| opacity: 0.2; | |
| flex-shrink: 0; | |
| transform: translateX(-0%) scale(var(--audio-level, 1)); | |
| transition: transform 0.1s ease; | |
| } | |
| @keyframes spin { | |
| to { | |
| transform: rotate(360deg); | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Add toast element after body opening tag --> | |
| <div id="error-toast" class="toast"></div> | |
| <div class="hero"> | |
| <h1>Real-time Transcription</h1> | |
| <p>Powered by FastRTC and Local Whisper 🤗</p> | |
| </div> | |
| <div class="container"> | |
| <div class="transcript-container" id="transcript"></div> | |
| <div class="controls"> | |
| <button id="start-button">Start Recording</button> | |
| </div> | |
| </div> | |
| <script src="/static/client.js"></script> | |
| </body> | |
| </html> |