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> | |
| .hidden { | |
| display: none ; | |
| } | |
| b-dot { | |
| opacity: 0; | |
| animation: blink 1.5s infinite; | |
| } | |
| b-dot:nth-child(1) { animation-delay: 0s; } | |
| b-dot:nth-child(2) { animation-delay: 0.5s; } | |
| b-dot:nth-child(3) { animation-delay: 1s; } | |
| @keyframes blink { | |
| 0%, 100% { opacity: 0; } | |
| 20%, 40% { opacity: 1; } | |
| } | |
| #modelType { | |
| appearance: none; | |
| background: #e9ecef; | |
| border-radius: 10px; | |
| position: relative; | |
| outline: none; | |
| transition: background 0.3s; | |
| } | |
| #modelType:checked { | |
| background: #ffd700; | |
| } | |
| #modelType::before { | |
| content: ''; | |
| display: block; | |
| width: 18px; | |
| height: 18px; | |
| background: #fff; | |
| border-radius: 50%; | |
| position: absolute; | |
| left: 1px; | |
| top: 1px; | |
| transition: left 0.3s; | |
| } | |
| #modelType:checked::before { | |
| left: 21px; | |
| } | |
| label:has(#modelType:disabled), label:has(#modelType:disabled) * { | |
| cursor: not-allowed ; | |
| } | |
| </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; margin-bottom: 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;"> | |
| <h2 style="margin:0 0 6px 0;">🐊 Welcome to Kroko</h2> | |
| <p style="margin:6px 0;"> | |
| Fast, on-device speech-to-text with streaming performance. Pick what fits your project: | |
| </p> | |
| <ul style="margin:6px 0 10px 20px; padding:0;"> | |
| <li><strong>Community models</strong> — completely free to use. Lower-cost/size and quality, great for experiments and demos.</li> | |
| <li style="margin-top:6px;"><strong>Pro models</strong> — higher quality / lower latency. Two ways to use them: | |
| <ul style="margin:6px 0 0 18px; padding:0;"> | |
| <li><strong>Personal / Hobbyist:</strong> you can get a Pro key and use Pro models <em>free</em> for non-commercial projects.</li> | |
| <li><strong>Commercial:</strong> paid plans are available (trials offered) if you need Pro models for commercial use.</li> | |
| </ul> | |
| </li> | |
| </ul> | |
| <p style="margin:8px 0;"><strong>Get a Pro key:</strong></p> | |
| <ol style="margin:6px 0 12px 20px; padding:0;"> | |
| <li>Visit <a href="https://app.kroko.ai" target="_blank" rel="noopener">app.kroko.ai</a>.</li> | |
| <li>Log in or sign up, open the <em>On premise</em> page, and request your free Pro key or trial for commercial needs.</li> | |
| <li>Paste the key into this demo to try Pro models.</li> | |
| </ol> | |
| <p style="margin:6px 0 0 0; font-size:13px; color:#333;"> | |
| Need help or want to connect? | |
| 💬 Join our <a href="https://discord.gg/JT7wdtnK79" target="_blank" rel="noopener">Discord community</a> • | |
| 🌐 Visit our <a href="https://kroko.ai" target="_blank" rel="noopener">website</a> • | |
| 💻 Check out our <a href="https://github.com/kroko-ai" target="_blank" rel="noopener">GitHub</a>. | |
| </p> | |
| </div> | |
| <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;"> | |
| <div id="selectLanguageContent" class="hidden"> | |
| <div style="font-size: 1rem; font-weight: bold; padding: 0.5rem 1rem; background-color: #f8f9fa; border-radius: 8px; color: #6c757d;">Languages & models</div> | |
| <div style="margin: 1rem 0; 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;"> | |
| <span style="display: flex; align-items: center; gap: 0.5rem;">🌐</span> | |
| <select id="languageSelect" name="language" style="border: none; background: transparent; font-size: 1rem; padding: 0.5rem 1rem; outline: none; cursor: pointer;"> | |
| <option value="" selected disabled>Select a language</option> | |
| </select> | |
| </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;" title="Pro models are not available here yet"> | |
| <span>Community</span> | |
| <input type="checkbox" id="modelType" style="width: 40px; height: 20px; accent-color: goldenrod;" disabled> | |
| <span>Pro</span> | |
| </label> | |
| </div> | |
| <div id="modelList" style="display: flex; flex-direction: column; gap: 1rem; padding: 0.5rem 1rem;"></div> | |
| </div> | |
| <div id="selectedModelContent" class="hidden"> | |
| <div style="font-size: 1rem; font-weight: bold; padding: 0.5rem 1rem; background-color: #f8f9fa; border-radius: 8px; color: #6c757d;">Selected model</div> | |
| <div id="selectedModel" style="display: flex; flex-direction: column; gap: 1rem; padding: 0.5rem 1rem;"></div> | |
| </div> | |
| <div id="singleAudioContent" class="hidden"> | |
| <div style="display: flex; gap: 1.5rem;"> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <div id="status" style="display: flex; justify-content: center; align-items: center; height: 100%; font-size: 2rem;"> | |
| Preparing<b-dot>.</b-dot><b-dot>.</b-dot><b-dot>.</b-dot> | |
| </div> | |
| </div> | |
| <script src="./app-asr.js" type="module"></script> | |
| </body> | |
| </html> |