Spaces:

andito
/

parakeet-v3-streaming

Running

andito HF Staff Claude Sonnet 4.5 commited on 28 days ago

Commit

b76aacc

1 Parent(s): 1b8c165

Make UI more minimal and compact

- Remove "About This Demo" section for cleaner interface
- Make controls thinner with reduced padding (p-6 → p-4)
- Reduce label sizes (text-sm → text-xs) and spacing
- Ensure all boxes (controls, transcription, metrics) are aligned with consistent max-width

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

Files changed (12) hide show

assets/{index-4ud1a0so.css → index-74p16zJW.css} +1 -1
assets/index-B8YCx4EY.js +0 -0
assets/index-DDIskaTG.js +0 -0
index.html +2 -2
source/dist/assets/{index-4ud1a0so.css → index-74p16zJW.css} +1 -1
source/dist/assets/index-B8YCx4EY.js +0 -0
source/dist/assets/index-DDIskaTG.js +0 -0
source/dist/index.html +2 -2
source/src/App.jsx +98 -55
source/src/components/PerformanceMetrics.jsx +44 -16
source/src/components/TranscriptionDisplay.jsx +30 -13
source/src/utils/progressive-streaming.js +102 -0

assets/{index-4ud1a0so.css → index-74p16zJW.css} RENAMED Viewed

@@ -1 +1 @@

- *,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.fixed{position:fixed}.mx-auto{margin-left:auto;margin-right:auto}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.ml-1{margin-left:.25rem}.ml-4{margin-left:1rem}.mr-2{margin-right:.5rem}.mt-1{margin-top:.25rem}.mt-12{margin-top:3rem}.mt-2{margin-top:.5rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.h-2{height:.5rem}.h-3{height:.75rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-full{height:100%}.max-h-\[400px\]{max-height:400px}.min-h-\[200px\]{min-height:200px}.min-h-screen{min-height:100vh}.w-3{width:.75rem}.w-4{width:1rem}.w-5{width:1.25rem}.w-full{width:100%}.max-w-4xl{max-width:56rem}.max-w-6xl{max-width:72rem}.max-w-md{max-width:28rem}.flex-1{flex:1 1 0%}@keyframes pulse{50%{opacity:.5}}.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}@keyframes spin{to{transform:rotate(360deg)}}.animate-spin{animation:spin 1s linear infinite}.cursor-pointer{cursor:pointer}.list-inside{list-style-position:inside}.list-disc{list-style-type:disc}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.25rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem * var(--tw-space-y-reverse))}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.75rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem * var(--tw-space-y-reverse))}.space-y-8>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(2rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(2rem * var(--tw-space-y-reverse))}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.whitespace-nowrap{white-space:nowrap}.rounded{border-radius:.25rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.border{border-width:1px}.border-2{border-width:2px}.border-b{border-bottom-width:1px}.border-t{border-top-width:1px}.border-cyan-400{--tw-border-opacity: 1;border-color:rgb(34 211 238 / var(--tw-border-opacity, 1))}.border-gray-600{--tw-border-opacity: 1;border-color:rgb(75 85 99 / var(--tw-border-opacity, 1))}.border-gray-700{--tw-border-opacity: 1;border-color:rgb(55 65 81 / var(--tw-border-opacity, 1))}.border-gray-800{--tw-border-opacity: 1;border-color:rgb(31 41 55 / var(--tw-border-opacity, 1))}.border-green-700{--tw-border-opacity: 1;border-color:rgb(21 128 61 / var(--tw-border-opacity, 1))}.border-red-700{--tw-border-opacity: 1;border-color:rgb(185 28 28 / var(--tw-border-opacity, 1))}.border-t-transparent{border-top-color:transparent}.bg-blue-500{--tw-bg-opacity: 1;background-color:rgb(59 130 246 / var(--tw-bg-opacity, 1))}.bg-cyan-400{--tw-bg-opacity: 1;background-color:rgb(34 211 238 / var(--tw-bg-opacity, 1))}.bg-gray-700{--tw-bg-opacity: 1;background-color:rgb(55 65 81 / var(--tw-bg-opacity, 1))}.bg-gray-800{--tw-bg-opacity: 1;background-color:rgb(31 41 55 / var(--tw-bg-opacity, 1))}.bg-gray-800\/50{background-color:#1f293780}.bg-gray-900{--tw-bg-opacity: 1;background-color:rgb(17 24 39 / var(--tw-bg-opacity, 1))}.bg-gray-950\/50{background-color:#0a0a0a80}.bg-green-900\/30{background-color:#14532d4d}.bg-red-500{--tw-bg-opacity: 1;background-color:rgb(239 68 68 / var(--tw-bg-opacity, 1))}.bg-red-900\/30{background-color:#7f1d1d4d}.bg-yellow-400{--tw-bg-opacity: 1;background-color:rgb(250 204 21 / var(--tw-bg-opacity, 1))}.bg-gradient-to-b{background-image:linear-gradient(to bottom,var(--tw-gradient-stops))}.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.from-cyan-400{--tw-gradient-from: #22d3ee var(--tw-gradient-from-position);--tw-gradient-to: rgb(34 211 238 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.from-cyan-500{--tw-gradient-from: #06b6d4 var(--tw-gradient-from-position);--tw-gradient-to: rgb(6 182 212 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.from-gray-950{--tw-gradient-from: #0a0a0a var(--tw-gradient-from-position);--tw-gradient-to: rgb(10 10 10 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.from-green-500{--tw-gradient-from: #22c55e var(--tw-gradient-from-position);--tw-gradient-to: rgb(34 197 94 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.from-purple-500{--tw-gradient-from: #a855f7 var(--tw-gradient-from-position);--tw-gradient-to: rgb(168 85 247 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.from-red-500{--tw-gradient-from: #ef4444 var(--tw-gradient-from-position);--tw-gradient-to: rgb(239 68 68 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.via-yellow-500{--tw-gradient-to: rgb(234 179 8 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), #eab308 var(--tw-gradient-via-position), var(--tw-gradient-to)}.to-blue-500{--tw-gradient-to: #3b82f6 var(--tw-gradient-to-position)}.to-emerald-500{--tw-gradient-to: #10b981 var(--tw-gradient-to-position)}.to-gray-900{--tw-gradient-to: #111827 var(--tw-gradient-to-position)}.to-indigo-500{--tw-gradient-to: #6366f1 var(--tw-gradient-to-position)}.to-pink-500{--tw-gradient-to: #ec4899 var(--tw-gradient-to-position)}.to-red-500{--tw-gradient-to: #ef4444 var(--tw-gradient-to-position)}.bg-clip-text{-webkit-background-clip:text;background-clip:text}.p-3{padding:.75rem}.p-4{padding:1rem}.p-6{padding:1.5rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.py-8{padding-top:2rem;padding-bottom:2rem}.pb-4{padding-bottom:1rem}.pt-4{padding-top:1rem}.text-center{text-align:center}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.font-sans{font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji"}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.italic{font-style:italic}.leading-relaxed{line-height:1.625}.tracking-wider{letter-spacing:.05em}.text-cyan-400{--tw-text-opacity: 1;color:rgb(34 211 238 / var(--tw-text-opacity, 1))}.text-gray-100{--tw-text-opacity: 1;color:rgb(243 244 246 / var(--tw-text-opacity, 1))}.text-gray-200{--tw-text-opacity: 1;color:rgb(229 231 235 / var(--tw-text-opacity, 1))}.text-gray-300{--tw-text-opacity: 1;color:rgb(209 213 219 / var(--tw-text-opacity, 1))}.text-gray-400{--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.text-gray-500{--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}.text-green-400{--tw-text-opacity: 1;color:rgb(74 222 128 / var(--tw-text-opacity, 1))}.text-transparent{color:transparent}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.text-yellow-400{--tw-text-opacity: 1;color:rgb(250 204 21 / var(--tw-text-opacity, 1))}.opacity-80{opacity:.8}.shadow-lg{--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-xl{--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-blur{--tw-backdrop-blur: blur(8px);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.duration-75{transition-duration:75ms}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:dark;color:#ffffffde;background-color:#0a0a0a;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;min-width:320px;min-height:100vh}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#1a1a1a}::-webkit-scrollbar-thumb{background:#444;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#555}.hover\:bg-gray-600:hover{--tw-bg-opacity: 1;background-color:rgb(75 85 99 / var(--tw-bg-opacity, 1))}.hover\:bg-red-900\/50:hover{background-color:#7f1d1d80}.hover\:from-cyan-600:hover{--tw-gradient-from: #0891b2 var(--tw-gradient-from-position);--tw-gradient-to: rgb(8 145 178 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.hover\:from-green-600:hover{--tw-gradient-from: #16a34a var(--tw-gradient-from-position);--tw-gradient-to: rgb(22 163 74 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.hover\:from-purple-600:hover{--tw-gradient-from: #9333ea var(--tw-gradient-from-position);--tw-gradient-to: rgb(147 51 234 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.hover\:from-red-600:hover{--tw-gradient-from: #dc2626 var(--tw-gradient-from-position);--tw-gradient-to: rgb(220 38 38 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.hover\:to-blue-600:hover{--tw-gradient-to: #2563eb var(--tw-gradient-to-position)}.hover\:to-emerald-600:hover{--tw-gradient-to: #059669 var(--tw-gradient-to-position)}.hover\:to-indigo-600:hover{--tw-gradient-to: #4f46e5 var(--tw-gradient-to-position)}.hover\:to-pink-600:hover{--tw-gradient-to: #db2777 var(--tw-gradient-to-position)}.hover\:text-cyan-300:hover{--tw-text-opacity: 1;color:rgb(103 232 249 / var(--tw-text-opacity, 1))}.hover\:shadow-xl:hover{--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}@media(min-width:768px){.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}

+ *,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.fixed{position:fixed}.mx-auto{margin-left:auto;margin-right:auto}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.ml-1{margin-left:.25rem}.mr-2{margin-right:.5rem}.mt-0\.5{margin-top:.125rem}.mt-1{margin-top:.25rem}.mt-12{margin-top:3rem}.mt-2{margin-top:.5rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.h-2{height:.5rem}.h-3{height:.75rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-full{height:100%}.max-h-\[400px\]{max-height:400px}.min-h-\[200px\]{min-height:200px}.min-h-screen{min-height:100vh}.w-3{width:.75rem}.w-4{width:1rem}.w-5{width:1.25rem}.w-full{width:100%}.max-w-4xl{max-width:56rem}.max-w-6xl{max-width:72rem}.max-w-md{max-width:28rem}.flex-1{flex:1 1 0%}@keyframes pulse{50%{opacity:.5}}.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}@keyframes spin{to{transform:rotate(360deg)}}.animate-spin{animation:spin 1s linear infinite}.cursor-pointer{cursor:pointer}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.25rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem * var(--tw-space-y-reverse))}.space-y-8>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(2rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(2rem * var(--tw-space-y-reverse))}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.whitespace-nowrap{white-space:nowrap}.rounded{border-radius:.25rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.border{border-width:1px}.border-2{border-width:2px}.border-b{border-bottom-width:1px}.border-t{border-top-width:1px}.border-cyan-400{--tw-border-opacity: 1;border-color:rgb(34 211 238 / var(--tw-border-opacity, 1))}.border-cyan-700\/50{border-color:#0e749080}.border-gray-600{--tw-border-opacity: 1;border-color:rgb(75 85 99 / var(--tw-border-opacity, 1))}.border-gray-700{--tw-border-opacity: 1;border-color:rgb(55 65 81 / var(--tw-border-opacity, 1))}.border-gray-800{--tw-border-opacity: 1;border-color:rgb(31 41 55 / var(--tw-border-opacity, 1))}.border-green-700{--tw-border-opacity: 1;border-color:rgb(21 128 61 / var(--tw-border-opacity, 1))}.border-red-700{--tw-border-opacity: 1;border-color:rgb(185 28 28 / var(--tw-border-opacity, 1))}.border-t-transparent{border-top-color:transparent}.bg-blue-500{--tw-bg-opacity: 1;background-color:rgb(59 130 246 / var(--tw-bg-opacity, 1))}.bg-cyan-400{--tw-bg-opacity: 1;background-color:rgb(34 211 238 / var(--tw-bg-opacity, 1))}.bg-cyan-900\/20{background-color:#164e6333}.bg-gray-700{--tw-bg-opacity: 1;background-color:rgb(55 65 81 / var(--tw-bg-opacity, 1))}.bg-gray-800{--tw-bg-opacity: 1;background-color:rgb(31 41 55 / var(--tw-bg-opacity, 1))}.bg-gray-800\/50{background-color:#1f293780}.bg-gray-900{--tw-bg-opacity: 1;background-color:rgb(17 24 39 / var(--tw-bg-opacity, 1))}.bg-gray-950\/50{background-color:#0a0a0a80}.bg-green-900\/30{background-color:#14532d4d}.bg-red-500{--tw-bg-opacity: 1;background-color:rgb(239 68 68 / var(--tw-bg-opacity, 1))}.bg-red-900\/30{background-color:#7f1d1d4d}.bg-yellow-400{--tw-bg-opacity: 1;background-color:rgb(250 204 21 / var(--tw-bg-opacity, 1))}.bg-gradient-to-b{background-image:linear-gradient(to bottom,var(--tw-gradient-stops))}.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.from-cyan-400{--tw-gradient-from: #22d3ee var(--tw-gradient-from-position);--tw-gradient-to: rgb(34 211 238 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.from-cyan-500{--tw-gradient-from: #06b6d4 var(--tw-gradient-from-position);--tw-gradient-to: rgb(6 182 212 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.from-gray-950{--tw-gradient-from: #0a0a0a var(--tw-gradient-from-position);--tw-gradient-to: rgb(10 10 10 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.from-green-500{--tw-gradient-from: #22c55e var(--tw-gradient-from-position);--tw-gradient-to: rgb(34 197 94 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.from-purple-500{--tw-gradient-from: #a855f7 var(--tw-gradient-from-position);--tw-gradient-to: rgb(168 85 247 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.from-red-500{--tw-gradient-from: #ef4444 var(--tw-gradient-from-position);--tw-gradient-to: rgb(239 68 68 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.via-yellow-500{--tw-gradient-to: rgb(234 179 8 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), #eab308 var(--tw-gradient-via-position), var(--tw-gradient-to)}.to-blue-500{--tw-gradient-to: #3b82f6 var(--tw-gradient-to-position)}.to-emerald-500{--tw-gradient-to: #10b981 var(--tw-gradient-to-position)}.to-gray-900{--tw-gradient-to: #111827 var(--tw-gradient-to-position)}.to-indigo-500{--tw-gradient-to: #6366f1 var(--tw-gradient-to-position)}.to-pink-500{--tw-gradient-to: #ec4899 var(--tw-gradient-to-position)}.to-red-500{--tw-gradient-to: #ef4444 var(--tw-gradient-to-position)}.bg-clip-text{-webkit-background-clip:text;background-clip:text}.p-3{padding:.75rem}.p-4{padding:1rem}.p-6{padding:1.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.py-8{padding-top:2rem;padding-bottom:2rem}.pb-4{padding-bottom:1rem}.pt-4{padding-top:1rem}.text-center{text-align:center}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.font-sans{font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji"}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.italic{font-style:italic}.leading-relaxed{line-height:1.625}.tracking-wider{letter-spacing:.05em}.text-cyan-400{--tw-text-opacity: 1;color:rgb(34 211 238 / var(--tw-text-opacity, 1))}.text-gray-100{--tw-text-opacity: 1;color:rgb(243 244 246 / var(--tw-text-opacity, 1))}.text-gray-200{--tw-text-opacity: 1;color:rgb(229 231 235 / var(--tw-text-opacity, 1))}.text-gray-300{--tw-text-opacity: 1;color:rgb(209 213 219 / var(--tw-text-opacity, 1))}.text-gray-400{--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.text-gray-500{--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}.text-green-400{--tw-text-opacity: 1;color:rgb(74 222 128 / var(--tw-text-opacity, 1))}.text-transparent{color:transparent}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.text-yellow-400{--tw-text-opacity: 1;color:rgb(250 204 21 / var(--tw-text-opacity, 1))}.opacity-80{opacity:.8}.shadow-lg{--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-xl{--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-blur{--tw-backdrop-blur: blur(8px);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.duration-75{transition-duration:75ms}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:dark;color:#ffffffde;background-color:#0a0a0a;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;min-width:320px;min-height:100vh}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#1a1a1a}::-webkit-scrollbar-thumb{background:#444;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#555}.hover\:bg-cyan-900\/30:hover{background-color:#164e634d}.hover\:bg-gray-600:hover{--tw-bg-opacity: 1;background-color:rgb(75 85 99 / var(--tw-bg-opacity, 1))}.hover\:bg-gray-700:hover{--tw-bg-opacity: 1;background-color:rgb(55 65 81 / var(--tw-bg-opacity, 1))}.hover\:bg-red-900\/50:hover{background-color:#7f1d1d80}.hover\:from-cyan-600:hover{--tw-gradient-from: #0891b2 var(--tw-gradient-from-position);--tw-gradient-to: rgb(8 145 178 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.hover\:from-green-600:hover{--tw-gradient-from: #16a34a var(--tw-gradient-from-position);--tw-gradient-to: rgb(22 163 74 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.hover\:from-purple-600:hover{--tw-gradient-from: #9333ea var(--tw-gradient-from-position);--tw-gradient-to: rgb(147 51 234 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.hover\:from-red-600:hover{--tw-gradient-from: #dc2626 var(--tw-gradient-from-position);--tw-gradient-to: rgb(220 38 38 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.hover\:to-blue-600:hover{--tw-gradient-to: #2563eb var(--tw-gradient-to-position)}.hover\:to-emerald-600:hover{--tw-gradient-to: #059669 var(--tw-gradient-to-position)}.hover\:to-indigo-600:hover{--tw-gradient-to: #4f46e5 var(--tw-gradient-to-position)}.hover\:to-pink-600:hover{--tw-gradient-to: #db2777 var(--tw-gradient-to-position)}.hover\:text-cyan-300:hover{--tw-text-opacity: 1;color:rgb(103 232 249 / var(--tw-text-opacity, 1))}.hover\:shadow-xl:hover{--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}@media(min-width:768px){.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}

assets/index-B8YCx4EY.js ADDED Viewed

The diff for this file is too large to render. See raw diff

assets/index-DDIskaTG.js DELETED Viewed

The diff for this file is too large to render. See raw diff

index.html CHANGED Viewed

@@ -6,8 +6,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="description" content="Real-time speech recognition with Parakeet STT and WebGPU acceleration. Progressive transcription demo." />
     <title>Parakeet STT Progressive Transcription | WebGPU Demo</title>
-    <script type="module" crossorigin src="/assets/index-DDIskaTG.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-4ud1a0so.css">
   </head>
   <body>
     <div id="root"></div>

     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="description" content="Real-time speech recognition with Parakeet STT and WebGPU acceleration. Progressive transcription demo." />
     <title>Parakeet STT Progressive Transcription | WebGPU Demo</title>
+    <script type="module" crossorigin src="/assets/index-B8YCx4EY.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-74p16zJW.css">
   </head>
   <body>
     <div id="root"></div>

source/dist/assets/{index-4ud1a0so.css → index-74p16zJW.css} RENAMED Viewed

@@ -1 +1 @@

source/dist/assets/index-B8YCx4EY.js ADDED Viewed

The diff for this file is too large to render. See raw diff

source/dist/assets/index-DDIskaTG.js DELETED Viewed

The diff for this file is too large to render. See raw diff

source/dist/index.html CHANGED Viewed

@@ -6,8 +6,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="description" content="Real-time speech recognition with Parakeet STT and WebGPU acceleration. Progressive transcription demo." />
     <title>Parakeet STT Progressive Transcription | WebGPU Demo</title>
-    <script type="module" crossorigin src="/assets/index-DDIskaTG.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-4ud1a0so.css">
   </head>
   <body>
     <div id="root"></div>

     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="description" content="Real-time speech recognition with Parakeet STT and WebGPU acceleration. Progressive transcription demo." />
     <title>Parakeet STT Progressive Transcription | WebGPU Demo</title>
+    <script type="module" crossorigin src="/assets/index-B8YCx4EY.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-74p16zJW.css">
   </head>
   <body>
     <div id="root"></div>

source/src/App.jsx CHANGED Viewed

@@ -36,6 +36,12 @@ function App() {
   const [rtf, setRtf] = useState(null);
   const [audioDuration, setAudioDuration] = useState(null);
   const [windowState, setWindowState] = useState(null);
   // Progress tracking
   const [progressItems, setProgressItems] = useState([]);
@@ -296,8 +302,15 @@ function App() {
   const handleFileUpload = async (file) => {
     try {
       setFixedText('');
-      setActiveText('Processing file...');
       setTimestamp(0);
       // Read audio file
       const audioContext = new AudioContext({ sampleRate: 16000 });
@@ -308,39 +321,74 @@ function App() {
       const audioData = audioBuffer.getChannelData(0);
       const duration = audioData.length / 16000;
-      setTimestamp(duration);
-      // Send to worker for batch transcription
       const startTime = performance.now();
-      workerRef.current.postMessage({
-        type: 'transcribe',
-        data: {
-          audio: audioData,
-          sampleRate: 16000,
-        },
-      });
-      // Wait for result
-      const handleResult = (event) => {
-        if (event.data.status === 'transcription') {
-          const endTime = performance.now();
-          const latencyMs = endTime - startTime;
-          const rtf = duration / (latencyMs / 1000);  // Speed factor (inverse of traditional RTF)
-          setFixedText(event.data.result.text);
-          setActiveText('');
-          setLatency(latencyMs / 1000);
-          setRtf(rtf);
-          workerRef.current.removeEventListener('message', handleResult);
-        }
-      };
-      workerRef.current.addEventListener('message', handleResult);
     } catch (error) {
       console.error('Failed to process file:', error);
       alert('Failed to process file: ' + error.message);
       setActiveText(`Error: ${error.message}`);
     }
   };
@@ -394,12 +442,12 @@ function App() {
       {/* Main Content */}
       <main className="max-w-6xl mx-auto px-6 py-8 space-y-8">
         {/* Controls */}
-        <div className="bg-gray-900 rounded-lg border border-gray-700 p-6">
-          <h2 className="text-lg font-semibold mb-4">Controls</h2>
           {/* Microphone Selection */}
-          <div className="mb-4">
-            <label className="block text-sm font-medium text-gray-400 mb-2">Microphone</label>
             <select
               value={selectedDeviceId || ''}
               onChange={(e) => setSelectedDeviceId(e.target.value)}
@@ -417,8 +465,8 @@ function App() {
           {/* Audio Level Meter */}
           {isRecording && (
-            <div className="mb-4">
-              <label className="block text-sm font-medium text-gray-400 mb-2">Audio Level</label>
               <div className="w-full h-3 bg-gray-800 rounded-full overflow-hidden">
                 <div
                   className="h-full bg-gradient-to-r from-green-500 via-yellow-500 to-red-500 transition-all duration-75"
@@ -431,8 +479,8 @@ function App() {
           {/* Model Status and Actions */}
           <div className="flex items-center justify-between">
             <div>
-              <h3 className="text-sm font-medium text-gray-400">Model Status</h3>
-              <p className="text-sm text-gray-300 mt-1">{modelMessage || 'Ready to load model'}</p>
             </div>
             <div className="flex items-center gap-3">
               {modelStatus === 'not_loaded' && (
@@ -517,6 +565,19 @@ function App() {
               )}
             </div>
           </div>
         </div>
         {/* Transcription Display */}
@@ -525,6 +586,8 @@ function App() {
           activeText={activeText}
           timestamp={timestamp}
           isRecording={isRecording}
         />
         {/* Performance Metrics */}
@@ -535,30 +598,10 @@ function App() {
           windowState={windowState}
           device={device}
           updateInterval={250}
         />
-        {/* Info Section */}
-        <div className="bg-gray-900 rounded-lg border border-gray-700 p-6">
-          <h2 className="text-lg font-semibold mb-3">About This Demo</h2>
-          <div className="space-y-3 text-sm text-gray-400">
-            <p>
-              <strong className="text-gray-200">Smart Progressive Streaming:</strong> This demo showcases
-              advanced real-time transcription with intelligent window management. As you speak:
-            </p>
-            <ul className="list-disc list-inside space-y-1 ml-4">
-              <li><strong>0-15s:</strong> Growing window accumulates audio for better accuracy</li>
-              <li><strong>&gt;15s:</strong> Sentence-aware sliding window locks completed sentences</li>
-              <li><strong>Updates:</strong> Partial transcriptions every 500ms for real-time feedback</li>
-            </ul>
-            <p>
-              <strong className="text-gray-200">Privacy:</strong> All processing happens locally in your
-              browser using WebGPU acceleration. No data is sent to servers.
-            </p>
-            <p className="text-xs">
-              Model: Parakeet TDT 0.6B v3 (ONNX via parakeet.js) • 25 languages supported • ~2.5GB download (cached locally)
-            </p>
-          </div>
-        </div>
       </main>
       {/* Footer */}

   const [rtf, setRtf] = useState(null);
   const [audioDuration, setAudioDuration] = useState(null);
   const [windowState, setWindowState] = useState(null);
+  const [isProcessingFile, setIsProcessingFile] = useState(false);
+  const [fileDuration, setFileDuration] = useState(null);
+  // File upload
+  const [uploadedFileUrl, setUploadedFileUrl] = useState(null);
+  const [autoScroll, setAutoScroll] = useState(true);
   // Progress tracking
   const [progressItems, setProgressItems] = useState([]);
   const handleFileUpload = async (file) => {
     try {
       setFixedText('');
+      setActiveText('Loading file...');
       setTimestamp(0);
+      setIsProcessingFile(true);
+      setLatency(null);
+      setRtf(null);
+      // Create audio URL for playback
+      const fileUrl = URL.createObjectURL(file);
+      setUploadedFileUrl(fileUrl);
       // Read audio file
       const audioContext = new AudioContext({ sampleRate: 16000 });
       const audioData = audioBuffer.getChannelData(0);
       const duration = audioData.length / 16000;
+      // Set file duration for metrics display
+      setFileDuration(duration);
+      setActiveText('Processing with progressive streaming...');
+      // Create a fresh streaming handler for this file
+      const fileStreamingHandler = new SmartProgressiveStreamingHandler(
+        { transcribe: async (audio) => {
+          return new Promise((resolve, reject) => {
+            const handleResult = (event) => {
+              if (event.data.status === 'transcription') {
+                workerRef.current.removeEventListener('message', handleResult);
+                resolve(event.data.result);
+              } else if (event.data.status === 'error') {
+                workerRef.current.removeEventListener('message', handleResult);
+                reject(new Error(event.data.message));
+              }
+            };
+            workerRef.current.addEventListener('message', handleResult);
+            workerRef.current.postMessage({
+              type: 'transcribe',
+              data: { audio, sampleRate: 16000 },
+            });
+          });
+        }},
+        {
+          emissionInterval: 0.5,  // 500ms updates
+          maxWindowSize: 15.0,  // 15 seconds
+          sentenceBuffer: 2.0,  // 2 seconds
+        }
+      );
+      // Use batch streaming (fast processing with full windows)
       const startTime = performance.now();
+      let updateCount = 0;
+      for await (const result of fileStreamingHandler.transcribeBatch(audioData)) {
+        updateCount++;
+        setFixedText(result.fixedText);
+        setActiveText(result.activeText);
+        setTimestamp(result.timestamp);
+        // Update window state
+        setWindowState('sliding');  // Batch mode always uses full windows
+        // Update metrics continuously during processing
+        const currentTime = performance.now();
+        const elapsedTime = (currentTime - startTime) / 1000;
+        // RTF = how much audio transcribed / time spent processing
+        const currentRTF = result.timestamp / elapsedTime;
+        setLatency(elapsedTime);
+        setRtf(currentRTF);
+        // Final cleanup
+        if (result.isFinal) {
+          setWindowState(null);
+          setIsProcessingFile(false);
+          console.log(`[File] Processed ${duration.toFixed(1)}s audio in ${elapsedTime.toFixed(1)}s (${updateCount} windows, RTF: ${currentRTF.toFixed(2)}x)`);
+        }
+      }
     } catch (error) {
       console.error('Failed to process file:', error);
       alert('Failed to process file: ' + error.message);
       setActiveText(`Error: ${error.message}`);
+      setWindowState(null);
+      setIsProcessingFile(false);
     }
   };
       {/* Main Content */}
       <main className="max-w-6xl mx-auto px-6 py-8 space-y-8">
         {/* Controls */}
+        <div className="w-full max-w-4xl mx-auto bg-gray-900 rounded-lg border border-gray-700 p-4">
+          <h2 className="text-lg font-semibold mb-3">Controls</h2>
           {/* Microphone Selection */}
+          <div className="mb-3">
+            <label className="block text-xs font-medium text-gray-400 mb-1">Microphone</label>
             <select
               value={selectedDeviceId || ''}
               onChange={(e) => setSelectedDeviceId(e.target.value)}
           {/* Audio Level Meter */}
           {isRecording && (
+            <div className="mb-3">
+              <label className="block text-xs font-medium text-gray-400 mb-1">Audio Level</label>
               <div className="w-full h-3 bg-gray-800 rounded-full overflow-hidden">
                 <div
                   className="h-full bg-gradient-to-r from-green-500 via-yellow-500 to-red-500 transition-all duration-75"
           {/* Model Status and Actions */}
           <div className="flex items-center justify-between">
             <div>
+              <h3 className="text-xs font-medium text-gray-400">Model Status</h3>
+              <p className="text-xs text-gray-300 mt-0.5">{modelMessage || 'Ready to load model'}</p>
             </div>
             <div className="flex items-center gap-3">
               {modelStatus === 'not_loaded' && (
               )}
             </div>
           </div>
+          {/* Audio Player - only shown for uploaded files */}
+          {uploadedFileUrl && (
+            <div className="mt-4 pt-4 border-t border-gray-700">
+              <label className="block text-sm font-medium text-gray-400 mb-2">Audio Playback</label>
+              <audio
+                src={uploadedFileUrl}
+                controls
+                className="w-full"
+                style={{ height: '40px' }}
+              />
+            </div>
+          )}
         </div>
         {/* Transcription Display */}
           activeText={activeText}
           timestamp={timestamp}
           isRecording={isRecording}
+          autoScroll={autoScroll}
+          onAutoScrollToggle={() => setAutoScroll(!autoScroll)}
         />
         {/* Performance Metrics */}
           windowState={windowState}
           device={device}
           updateInterval={250}
+          isProcessingFile={isProcessingFile}
+          fileDuration={fileDuration}
+          transcribedDuration={timestamp}
         />
       </main>
       {/* Footer */}

source/src/components/PerformanceMetrics.jsx CHANGED Viewed

@@ -17,8 +17,19 @@ export default function PerformanceMetrics({
   windowState,
   device,
   updateInterval,
 }) {
   const [memoryUsage, setMemoryUsage] = useState(null);
   useEffect(() => {
     // Monitor memory usage if available
@@ -36,17 +47,32 @@ export default function PerformanceMetrics({
     }
   }, []);
-  const MetricCard = ({ label, value, unit, color = 'gray' }) => (
-    <div className="bg-gray-800 rounded-lg p-4 border border-gray-700">
-      <div className="text-xs text-gray-400 uppercase tracking-wider mb-1">
-        {label}
-      </div>
-      <div className={`text-2xl font-bold text-${color}-400 font-mono`}>
-        {value !== null && value !== undefined ? value : '—'}
-        {unit && <span className="text-sm ml-1 text-gray-500">{unit}</span>}
       </div>
-    </div>
-  );
   const getRTFColor = (rtf) => {
     if (rtf === null || rtf === undefined) return 'gray';
@@ -80,22 +106,24 @@ export default function PerformanceMetrics({
         {/* Metrics Grid */}
         <div className="grid grid-cols-2 md:grid-cols-3 gap-4 mb-4">
           <MetricCard
-            label="Latency"
-            value={latency ? latency.toFixed(2) : null}
             unit="s"
-            color={getLatencyColor(latency)}
           />
           <MetricCard
             label="Real-time Factor"
-            value={rtf ? rtf.toFixed(2) : null}
             unit="x"
             color={getRTFColor(rtf)}
           />
           <MetricCard
-            label="Window Size"
-            value={audioDuration ? audioDuration.toFixed(1) : null}
             unit="s"
             color="blue"
           />
         </div>

   windowState,
   device,
   updateInterval,
+  isProcessingFile,
+  fileDuration,
+  transcribedDuration,
 }) {
   const [memoryUsage, setMemoryUsage] = useState(null);
+  const [wasProcessingFile, setWasProcessingFile] = useState(false);
+  // Track if we were processing a file (to keep labels after completion)
+  useEffect(() => {
+    if (isProcessingFile) {
+      setWasProcessingFile(true);
+    }
+  }, [isProcessingFile]);
   useEffect(() => {
     // Monitor memory usage if available
     }
   }, []);
+  const formatDuration = (seconds) => {
+    if (seconds === null || seconds === undefined) return null;
+    if (seconds < 60) {
+      return seconds.toFixed(1);
+    }
+    const minutes = Math.floor(seconds / 60);
+    const secs = Math.floor(seconds % 60);
+    return `${minutes}m ${secs}s`;
+  };
+  const MetricCard = ({ label, value, unit, color = 'gray', formatTime = false }) => {
+    const displayValue = formatTime ? formatDuration(value) : (value !== null && value !== undefined ? value.toFixed(2) : null);
+    const displayUnit = formatTime ? '' : unit;
+    return (
+      <div className="bg-gray-800 rounded-lg p-4 border border-gray-700">
+        <div className="text-xs text-gray-400 uppercase tracking-wider mb-1">
+          {label}
+        </div>
+        <div className={`text-2xl font-bold text-${color}-400 font-mono`}>
+          {displayValue !== null ? displayValue : '—'}
+          {displayUnit && <span className="text-sm ml-1 text-gray-500">{displayUnit}</span>}
+        </div>
       </div>
+    );
+  };
   const getRTFColor = (rtf) => {
     if (rtf === null || rtf === undefined) return 'gray';
         {/* Metrics Grid */}
         <div className="grid grid-cols-2 md:grid-cols-3 gap-4 mb-4">
           <MetricCard
+            label={(isProcessingFile || wasProcessingFile) ? "Processing Time" : "Latency"}
+            value={latency}
             unit="s"
+            color={(isProcessingFile || wasProcessingFile) ? "blue" : getLatencyColor(latency)}
+            formatTime={true}
           />
           <MetricCard
             label="Real-time Factor"
+            value={rtf}
             unit="x"
             color={getRTFColor(rtf)}
           />
           <MetricCard
+            label={(isProcessingFile || wasProcessingFile) ? "Transcribed" : "Window Size"}
+            value={(isProcessingFile || wasProcessingFile) ? transcribedDuration : audioDuration}
             unit="s"
             color="blue"
+            formatTime={true}
           />
         </div>

source/src/components/TranscriptionDisplay.jsx CHANGED Viewed

@@ -8,15 +8,15 @@
 import { useEffect, useRef } from 'react';
-export default function TranscriptionDisplay({ fixedText, activeText, timestamp, isRecording }) {
   const containerRef = useRef(null);
-  // Auto-scroll to bottom when new text appears
   useEffect(() => {
-    if (containerRef.current) {
       containerRef.current.scrollTop = containerRef.current.scrollHeight;
     }
-  }, [fixedText, activeText]);
   const formatTimestamp = (seconds) => {
     const mins = Math.floor(seconds / 60);
@@ -82,16 +82,33 @@ export default function TranscriptionDisplay({ fixedText, activeText, timestamp,
           )}
         </div>
-        {/* Legend */}
-        <div className="mt-4 pt-4 border-t border-gray-700 flex gap-6 text-sm">
-          <div className="flex items-center gap-2">
-            <div className="w-4 h-4 bg-yellow-400 rounded"></div>
-            <span className="text-gray-300">Fixed sentences</span>
-          </div>
-          <div className="flex items-center gap-2">
-            <div className="w-4 h-4 bg-cyan-400 opacity-80 rounded"></div>
-            <span className="text-gray-300">Active transcription</span>
           </div>
         </div>
       </div>

 import { useEffect, useRef } from 'react';
+export default function TranscriptionDisplay({ fixedText, activeText, timestamp, isRecording, autoScroll = true, onAutoScrollToggle }) {
   const containerRef = useRef(null);
+  // Auto-scroll to bottom when new text appears (if enabled)
   useEffect(() => {
+    if (autoScroll && containerRef.current) {
       containerRef.current.scrollTop = containerRef.current.scrollHeight;
     }
+  }, [fixedText, activeText, autoScroll]);
   const formatTimestamp = (seconds) => {
     const mins = Math.floor(seconds / 60);
           )}
         </div>
+        {/* Legend + Auto-scroll Toggle */}
+        <div className="mt-4 pt-4 border-t border-gray-700 flex items-center justify-between">
+          <div className="flex gap-6 text-sm">
+            <div className="flex items-center gap-2">
+              <div className="w-4 h-4 bg-yellow-400 rounded"></div>
+              <span className="text-gray-300">Fixed sentences</span>
+            </div>
+            <div className="flex items-center gap-2">
+              <div className="w-4 h-4 bg-cyan-400 opacity-80 rounded"></div>
+              <span className="text-gray-300">Active transcription</span>
+            </div>
           </div>
+          {/* Auto-scroll Toggle */}
+          {onAutoScrollToggle && (
+            <button
+              onClick={onAutoScrollToggle}
+              className={`px-3 py-1 rounded text-xs font-medium transition-all duration-200 ${
+                autoScroll
+                  ? 'bg-cyan-900/20 border border-cyan-700/50 text-cyan-400 hover:bg-cyan-900/30'
+                  : 'bg-gray-800 border border-gray-600 text-gray-400 hover:bg-gray-700'
+              }`}
+              title={autoScroll ? 'Disable auto-scroll to read from top' : 'Enable auto-scroll to follow live transcription'}
+            >
+              {autoScroll ? '🔒 Auto-scroll' : '🔓 Scroll locked'}
+            </button>
+          )}
         </div>
       </div>

source/src/utils/progressive-streaming.js CHANGED Viewed

@@ -175,6 +175,108 @@ export class SmartProgressiveStreamingHandler {
     );
   }
   async finalize(audio) {
     /**
      * Get final transcription by combining fixed + active.

     );
   }
+  async *transcribeBatch(audio) {
+    /**
+     * Transcribe audio in batch mode (for uploaded files).
+     *
+     * Processes as fast as possible with full 15s windows:
+     * - Start with maximum window size immediately
+     * - No artificial delays between windows
+     * - Slide window as soon as current transcription completes
+     *
+     * @param {Float32Array} audio - Complete audio buffer
+     * @yields {PartialTranscription}
+     */
+    const totalDuration = audio.length / this.sampleRate;
+    this.reset();
+    let processedUpTo = 0;  // Track how much audio we've finalized
+    while (processedUpTo < totalDuration) {
+      // Process next 15s window (or remaining audio if less than 15s)
+      const windowStart = processedUpTo;
+      const windowEnd = Math.min(processedUpTo + this.maxWindowSize, totalDuration);
+      const windowDuration = windowEnd - windowStart;
+      // Extract audio window
+      const windowStartSamples = Math.floor(windowStart * this.sampleRate);
+      const windowEndSamples = Math.floor(windowEnd * this.sampleRate);
+      const audioWindow = audio.slice(windowStartSamples, windowEndSamples);
+      // Transcribe this window
+      const result = await this.model.transcribe(audioWindow);
+      // Determine how much of this window to lock as "fixed"
+      if (windowDuration >= this.maxWindowSize) {
+        // Full window - need to slide
+        const cutoffTime = windowDuration - this.sentenceBuffer;
+        // Find words to fix (aggressive sliding)
+        if (result.words && result.words.length > 0) {
+          const wordsToFix = result.words.filter(w => w.end_time < cutoffTime);
+          if (wordsToFix.length > 0) {
+            // Lock these words as fixed
+            const fixedText = wordsToFix.map(w => w.text).join(' ');
+            this.fixedSentences.push(fixedText.trim());
+            // Move processed marker forward
+            const lastWordTime = wordsToFix[wordsToFix.length - 1].end_time;
+            processedUpTo = windowStart + lastWordTime;
+            // Get active text (remaining words)
+            const activeWords = result.words.filter(w => w.end_time >= cutoffTime);
+            const activeText = activeWords.map(w => w.text).join(' ').trim();
+            // Yield update
+            yield new PartialTranscription(
+              this.fixedSentences.join(" "),
+              activeText,
+              windowEnd,
+              false
+            );
+          } else {
+            // No words found before cutoff - lock half the window to make progress
+            const halfText = result.text ? result.text.trim() : "";
+            this.fixedSentences.push(halfText);
+            processedUpTo = windowStart + windowDuration / 2;
+            yield new PartialTranscription(
+              this.fixedSentences.join(" "),
+              "",
+              windowEnd,
+              false
+            );
+          }
+        } else {
+          // No word timestamps - lock half to make progress
+          const halfText = result.text ? result.text.trim() : "";
+          this.fixedSentences.push(halfText);
+          processedUpTo = windowStart + windowDuration / 2;
+          yield new PartialTranscription(
+            this.fixedSentences.join(" "),
+            "",
+            windowEnd,
+            false
+          );
+        }
+      } else {
+        // Last window (less than 15s) - lock everything
+        const finalText = result.text ? result.text.trim() : "";
+        this.fixedSentences.push(finalText);
+        processedUpTo = windowEnd;
+        yield new PartialTranscription(
+          this.fixedSentences.join(" "),
+          "",
+          windowEnd,
+          true  // Final
+        );
+      }
+    }
+  }
   async finalize(audio) {
     /**
      * Get final transcription by combining fixed + active.