Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>Audio Input with Tabs and Features</title> | |
| <style> | |
| .loading { | |
| display: none ; | |
| } | |
| </style> | |
| </head> | |
| <body style="font-family: 'Source Sans Pro', sans-serif; background-color: #f9fafb; color: #333; display: flex; flex-direction: column; align-items: center; height: 100vh; margin: 0;"> | |
| <div style="width: 100%; max-width: 900px; background: #fff; padding: 1.5rem; border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); flex: 1;"> | |
| <!-- Tabs --> | |
| <div style="display: flex; border-bottom: 2px solid #e9ecef; margin-bottom: 1rem;"> | |
| <button id="singleAudioTab" class="tab active" style="flex: 1; text-align: center; padding: 1rem; background: transparent; border: none; border-bottom: 3px solid #007bff; font-weight: bold; cursor: pointer; color: #007bff;">Single Audio Stream</button> | |
| <button id="multistreamTab" class="tab" style="flex: 1; text-align: center; padding: 1rem; background: transparent; border: none; border-bottom: 3px solid transparent; font-weight: bold; cursor: pointer; color: #6c757d;">Multistream Demo</button> | |
| </div> | |
| <!-- Language Selection --> | |
| <div style="margin-bottom: 1rem; text-align: center; display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap;"> | |
| <label style="display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; border: 1px solid #ced4da; border-radius: 4px; cursor: pointer;"> | |
| <input type="radio" name="language" value="en" checked style="margin: 0;" /> | |
| <img src="https://flagcdn.com/us.svg" alt="US Flag" style="width: 20px; height: 14px;" /> English | |
| </label> | |
| <label style="display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; border: 1px solid #ced4da; border-radius: 4px; cursor: pointer;"> | |
| <input type="radio" name="language" value="de" style="margin: 0;" /> | |
| <img src="https://flagcdn.com/de.svg" alt="Germany Flag" style="width: 20px; height: 14px;" /> German | |
| </label> | |
| <label style="display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; border: 1px solid #ced4da; border-radius: 4px; cursor: pointer;"> | |
| <input type="radio" name="language" value="fr" style="margin: 0;" /> | |
| <img src="https://flagcdn.com/fr.svg" alt="France Flag" style="width: 20px; height: 14px;" /> French | |
| </label> | |
| </div> | |
| <!-- Single Audio Stream Content --> | |
| <div id="singleAudioContent" class="tab-content loading"> | |
| <div style="display: flex; gap: 1.5rem;"> | |
| <!-- Input Section --> | |
| <div style="flex: 1; display: flex; flex-direction: column; gap: 1rem;"> | |
| <div style="font-size: 1rem; font-weight: bold; padding: 0.5rem 1rem; background-color: #f8f9fa; border-radius: 8px; display: flex; align-items: center; gap: 0.5rem; color: #6c757d;"> | |
| <span style="line-height: 1;">🎵</span> Input | |
| </div> | |
| <!-- Drag and Drop / File Upload --> | |
| <div id="dropzone" style="border: 2px dashed #ced4da; border-radius: 8px; padding: 2rem; text-align: center; color: #6c757d; cursor: pointer; background-color: #f8f9fa; transition: background-color 0.3s, border-color 0.3s; position: relative;"> | |
| <input type="file" id="fileInput" accept="audio/*" style="position: absolute; top: 0; left: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer;" /> | |
| <p style="margin: 0;">Drop Audio Here<br>- or -<br>Click to Upload</p> | |
| </div> | |
| <!-- Record Microphone Button --> | |
| <button id="recordBtn" style="padding: 0.5rem 1rem; border: 1px solid #e9ecef; border-radius: 4px; background-color: #fff; color: #d9534f; cursor: pointer; font-size: 1rem;"> | |
| <span style="font-size: 0.8rem; border-radius: 50%; background-color: #d9534f; width: 10px; height: 10px; display: inline-block;"></span> | |
| Use Microphone | |
| </button> | |
| </div> | |
| <!-- Output Section --> | |
| <div style="flex: 1; display: flex; flex-direction: column; gap: 1rem;"> | |
| <div style="font-size: 1rem; font-weight: bold; padding: 0.5rem 1rem; background-color: #f8f9fa; border-radius: 8px; color: #6c757d;">Transcript</div> | |
| <textarea id="results" placeholder="Output will appear here..." readonly style="flex: 1; padding: 0.75rem; font-size: 1rem; border: 1px solid #ced4da; border-radius: 8px; resize: none; background-color: #f8f9fa;"></textarea> | |
| <audio id="audioPlayback" controls style="display: none; margin-top: 1rem; width: 100%;"></audio> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Multistream Demo Content --> | |
| <div id="multistreamContent" class="tab-content loading" style="display: none;"> | |
| <div style="text-align: center; padding: 1rem;"> | |
| <button id="playAllBtn" style="padding: 0.75rem 1.5rem; background-color: #007bff; color: #fff; border: none; border-radius: 4px; cursor: pointer; font-size: 1rem;">Play All Streams</button> | |
| </div> | |
| <div style="display: flex; flex-wrap: wrap; gap: 1rem;"> | |
| <div class="audio-container" style="flex: 1; min-width: 250px;"> | |
| <audio id="audio1" controls style="width: 100%;"></audio> | |
| <textarea id="transcript1" readonly placeholder="Transcript for Audio 1" | |
| style="width: 100%; height: 4rem; margin-top: 0.5rem; font-size: 0.9rem; padding: 0.5rem; | |
| border: 1px solid #ced4da; border-radius: 4px; resize: none;"></textarea> | |
| </div> | |
| <div class="audio-container" style="flex: 1; min-width: 250px;"> | |
| <audio id="audio2" controls style="width: 100%;"></audio> | |
| <textarea id="transcript2" readonly placeholder="Transcript for Audio 2" | |
| style="width: 100%; height: 4rem; margin-top: 0.5rem; font-size: 0.9rem; padding: 0.5rem; | |
| border: 1px solid #ced4da; border-radius: 4px; resize: none;"></textarea> | |
| </div> | |
| <div class="audio-container" style="flex: 1; min-width: 250px;"> | |
| <audio id="audio3" controls style="width: 100%;"></audio> | |
| <textarea id="transcript3" readonly placeholder="Transcript for Audio 3" | |
| style="width: 100%; height: 4rem; margin-top: 0.5rem; font-size: 0.9rem; padding: 0.5rem; | |
| border: 1px solid #ced4da; border-radius: 4px; resize: none;"></textarea> | |
| </div> | |
| <div class="audio-container" style="flex: 1; min-width: 250px;"> | |
| <audio id="audio4" controls style="width: 100%;"></audio> | |
| <textarea id="transcript4" readonly placeholder="Transcript for Audio 4" | |
| style="width: 100%; height: 4rem; margin-top: 0.5rem; font-size: 0.9rem; padding: 0.5rem; | |
| border: 1px solid #ced4da; border-radius: 4px; resize: none;"></textarea> | |
| </div> | |
| <div class="audio-container" style="flex: 1; min-width: 250px;"> | |
| <audio id="audio5" controls style="width: 100%;"></audio> | |
| <textarea id="transcript5" readonly placeholder="Transcript for Audio 5" | |
| style="width: 100%; height: 4rem; margin-top: 0.5rem; font-size: 0.9rem; padding: 0.5rem; | |
| border: 1px solid #ced4da; border-radius: 4px; resize: none;"></textarea> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="status">Loading...</div> | |
| </div> | |
| <!-- Footer Section --> | |
| <div style="width: 100%; max-width: 900px; margin-top: 1.5rem; background: #fff; padding: 1.5rem; border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); text-align: left; font-size: 0.9rem; color: #6c757d;"> | |
| <h3>Welcome to Kroko</h3> | |
| <strong> | |
| This demo uses older versions of our models. We're working on a new one—stay tuned! | |
| </strong> | |
| <div style="margin-top: 8px; font-weight: normal;"> | |
| In the meantime, you can: | |
| <ul style="margin: 6px 0 0 16px; padding: 0;"> | |
| <li><a href="https://kroko.ai/" target="_blank">Visit our website</a></li> | |
| <li><a href="https://github.com/kroko-ai/kroko-onnx" target="_blank">Explore our GitHub repo</a></li> | |
| <li><a href="https://discord.gg/JT7wdtnK79" target="_blank">Join our community</a> to get the latest updates first</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <script src="./sherpa-onnx-asr.js"></script> | |
| <script src="./app-asr.js"></script> | |
| </body> | |
| </html> |