Spaces:
Running
Running
File size: 7,587 Bytes
8713346 f06e713 8713346 f06e713 8713346 1025131 c1d9eec 4981d25 c1d9eec 635acfc c1d9eec 8713346 f06e713 8713346 f06e713 8713346 f06e713 8713346 f06e713 8713346 f06e713 8713346 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 |
<!DOCTYPE html>
<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 !important;
}
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 !important;
}
</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> |