Spaces:
Running
Running
| (self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[405],{8477:function(e,t,l){(window.__NEXT_P=window.__NEXT_P||[]).push(["/",function(){return l(9942)}])},9942:function(e,t,l){"use strict";l.r(t),l.d(t,{default:function(){return v}});var s=l(1527),a=l(9172),i=l.n(a),r=l(959),n=l(6980),o=l.n(n),c=l(1953);function x(e){return(0,s.jsxs)("div",{className:"flex h-full min-h-screen bg-sky-500 -z-20 antialiased",style:{backgroundColor:"#38bdf8",backgroundImage:"url(\"data:image/svg+xml,%3Csvg width='30' height='30' opacity='0.4' viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 10h10v10H0V10zM10 0h10v10H10V0z' fill='%23bae6fd' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E\")"},children:[(0,s.jsxs)(o(),{children:[(0,s.jsx)("title",{children:e.title}),(0,s.jsx)("meta",{property:"og:title",content:e.title}),(0,s.jsx)("meta",{name:"description",content:"Transcribe any audio file - completely free!"}),(0,s.jsx)("meta",{property:"og:description",content:"Transcribe any audio file - completely free!"})]}),(0,s.jsxs)("main",{className:"flex flex-1 flex-col",children:[(0,s.jsx)(c.x7,{}),(0,s.jsx)("div",{className:"flex-1",children:e.children})]})]})}var d=l(7632);let h=["byte","kilobyte","megabyte","gigabyte","terabyte","petabyte"];function u(e){let t=Math.abs(Number(e)),l=0;for(;t>=1e3&&l<h.length-1;)t/=1e3,++l;return new Intl.NumberFormat([],{style:"unit",unit:h[l],unitDisplay:"short",maximumFractionDigits:1}).format(t)}let m=e=>{let{progress:t,loaded:l}=e;return(0,s.jsx)(s.Fragment,{children:t>0&&t<100&&!l&&(0,s.jsx)("div",{className:"flex flex-col gap-2",children:(0,s.jsx)("div",{className:"h-3 outline outline-white bg-gray-200",children:(0,s.jsx)("div",{className:"bg-emerald-500 h-3",style:{width:"".concat(t,"%")}})})})})},f=e=>{let{selectedModel:t,setSelectedModel:l,loaded:a,progress:i}=e,[n,o]=(0,r.useState)(!1),c=e=>e.charAt(0).toUpperCase()+e.slice(1);return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)("div",{className:"flex flex-row justify-between",children:[(0,s.jsx)("label",{className:"text-white text-xl font-semibold",children:"Select Model"}),i>0&&!a&&(0,s.jsxs)("label",{className:"text-white text-xl font-semibold text-right",children:[i.toFixed(2),"%"]})]}),(0,s.jsxs)("div",{className:"group inline-block relative w-full",children:[(0,s.jsxs)("button",{className:"bg-pop-orange text-white font-semibold text-xl py-2.5 px-8 w-full inline-flex items-center outline outline-white",onClick:()=>o(!n),children:[(0,s.jsx)("span",{className:"mr-1",children:t?c(t):"Select Model"}),(0,s.jsx)("svg",{className:"fill-current h-4 w-4",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",children:(0,s.jsx)("path",{d:"M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"})})]}),(0,s.jsx)("ul",{className:"absolute text-white group-hover:block z-10 w-full",style:{display:n?"block":"none"},children:(()=>{let e=Object.values(d.ko).slice(0,-1),t=Array.from(d.Fd.values()).slice(0,-1),a=e.map((e,l)=>[e,t[l]]);return a.map((e,t)=>(0,s.jsx)("li",{children:(0,s.jsxs)("a",{className:"bg-orange-500 hover:bg-pop-orange py-2 px-8 font-semibold text-xl block whitespace-no-wrap cursor-pointer ".concat(t===a.length-1?"rounded-b-md":""),onClick:()=>{l(e[0]),o(!1)},children:[c(e[0])," ",u(e[1])]})},e[0]))})()})]})]})},w=e=>{let[t,l]=(0,r.useState)(null),[a,i]=(0,r.useState)(!1),n=async()=>{l(await d.tX.start())},o=async()=>{if(!t)return;let s=await t.stop(),a=(await new AudioContext({sampleRate:16e3}).decodeAudioData(s.buffer)).getChannelData(0);e.setAudioData(new Uint8Array(a.buffer));let i=s.blob;e.setAudioMetadata({file:new File([i],"recording.wav"),fromMic:!0}),e.setBlobUrl(URL.createObjectURL(i)),l(null)},c=async()=>{a?await o():await n(),i(!a)};return(0,s.jsxs)("div",{className:"flex flex-col",children:[(0,s.jsx)("label",{className:"text-white text-xl font-semibold",children:"Record"}),(0,s.jsx)("button",{className:"bg-pop-orange text-xl outline outline-white text-white font-semibold px-6 mx-auto cursor-pointer active:bg-pop-orange-dark h-full",onClick:c,children:a?(0,s.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"currentColor",className:"w-6 h-6",children:(0,s.jsx)("path",{fillRule:"evenodd",d:"M4.5 7.5a3 3 0 013-3h9a3 3 0 013 3v9a3 3 0 01-3 3h-9a3 3 0 01-3-3v-9z",clipRule:"evenodd"})}):(0,s.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",strokeWidth:1.5,stroke:"currentColor",className:"w-8 h-8",children:(0,s.jsx)("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M12 18.75a6 6 0 006-6v-1.5m-6 7.5a6 6 0 01-6-6v-1.5m6 7.5v3.75m-3.75 0h7.5M12 15.75a3 3 0 01-3-3V4.5a3 3 0 116 0v8.25a3 3 0 01-3 3z"})})})]})},p=e=>{let t=(0,r.useRef)(null),[l,a]=(0,r.useState)(null),[i,n]=(0,r.useState)(!1),[o,x]=(0,r.useState)(null),[h,p]=(0,r.useState)(null),[g,j]=(0,r.useState)(null),[b,v]=(0,r.useState)(null),[y,N]=(0,r.useState)(!1),[k,S]=(0,r.useState)(0),[_,C]=(0,r.useState)(!1);(0,r.useEffect)(()=>{o&&l!=o&&!_&&(N(!1),S(0))},[l]);let F=async()=>{if(t.current&&t.current.destroy(),i)return;if(!l){console.error("No model selected");return}n(!0);let e=new d.Sj,s=await e.loadModel(l,()=>{N(!0),x(l)},e=>S(e));s.isErr?c.ZP.error(s.error.message):(n(!1),t.current=s.value)},A=async()=>{if(!t.current){c.ZP.error("No model loaded");return}if(!h){c.ZP.error("No audio file loaded");return}e.setTranscript(e=>({...e,segments:[]})),C(!0),await t.current.transcribe(h,g.fromMic,t=>{if(t.last){C(!1),e.setDownloadAvailable(!0);return}e.setTranscript(e=>({...e,segments:[...e.segments,t]}))})};return(0,s.jsxs)("div",{className:"flex-1 w-1/2 h-full flex flex-col relative z-10 overflow-hidden",children:[(0,s.jsxs)("div",{className:"h-full px-4 xl:pl-32 my-4",children:[(0,s.jsx)("img",{src:"/whisper-turbo.png",className:"w-full xl:w-3/4 2xl:w-1/2 mx-auto pt-8 pb-4 cursor-pointer",onClick:()=>window.open("https://github.com/FL33TW00D/whisper-turbo","_blank")}),(0,s.jsxs)("div",{className:"flex flex-col mx-auto gap-6",children:[(0,s.jsxs)("div",{children:[(0,s.jsx)(f,{selectedModel:l,setSelectedModel:a,loaded:y,progress:k}),(0,s.jsx)(m,{progress:k,loaded:y}),l!=o&&0==k&&(0,s.jsx)("div",{className:"flex flex-row justify-end",children:(0,s.jsx)("button",{className:"outline text-white text-2xl font-semibold mt-2 px-3 bg-pop-orange",onClick:F,children:i?"Loading...":"Load"})})]}),(0,s.jsxs)("div",{className:"flex flex-row gap-4",children:[(0,s.jsxs)("div",{className:"flex flex-col w-full",children:[(0,s.jsx)("label",{className:"text-white text-xl font-semibold",children:"Upload Audio"}),(0,s.jsx)("label",{className:"bg-pop-orange text-xl outline outline-white w-full text-white font-semibold py-2.5 px-8 mx-auto cursor-pointer w-full",htmlFor:"audioFile",children:(0,s.jsxs)("div",{className:"flex flex-row justify-between",children:[(0,s.jsx)("span",{className:"",children:h&&g?g.file.name:"Select Audio File"}),(0,s.jsx)("span",{className:"my-auto",children:h?u(h.length):""})]})}),(0,s.jsx)("input",{type:"file",className:"hidden",name:"audioFile",id:"audioFile",onChange:async e=>{let t=e.target.files[0];if(!t)return;let l=new FileReader;l.onload=()=>{p(new Uint8Array(l.result)),j({file:t,fromMic:!1}),v(URL.createObjectURL(t))},l.readAsArrayBuffer(t)},accept:".wav,.aac,.m4a,.mp4,.mp3"})]}),(0,s.jsx)(w,{setBlobUrl:v,setAudioData:p,setAudioMetadata:j})]}),b&&(0,s.jsxs)("div",{children:[(0,s.jsx)("label",{className:"text-white text-xl font-semibold",children:"Your Audio"}),(0,s.jsx)("audio",{controls:!0,className:"mx-auto w-full",style:{fontFamily:"__VT323_2a9463"},children:(0,s.jsx)("source",{src:b,type:"audio/wav"},b)},b)]})]}),(0,s.jsx)("div",{className:"flex flex-row pt-8 gap-4 mx-auto",children:(0,s.jsx)("button",{className:"bg-pop-orange text-2xl outline outline-white text-white font-semibold py-3 px-8 mx-auto cursor-pointer active:bg-pop-orange-dark",onClick:A,disabled:_,children:_?(0,s.jsx)("div",{className:"flex p-4",children:(0,s.jsx)("span",{className:"loader"})}):"Transcribe"})})]}),(0,s.jsx)("div",{className:"absolute bottom-0 w-full text-center px-4 xl:pl-32",children:(0,s.jsxs)("p",{className:"text-2xl text-white mx-auto",children:["Built by"," ",(0,s.jsx)("a",{href:"https://twitter.com/fleetwood___",className:"hover:underline hover:text-blue-600",children:"@fleetwood"})]})})]})};var g=l(5084);let j=()=>{let[e,t]=(0,r.useState)(!1),[l,a]=(0,r.useState)(!0);r.useRef(null),(0,r.useEffect)(()=>{if(!navigator.gpu){a(!0);return}t(!0)},[]);let i=()=>{a(!1)},n=(0,s.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",version:"1.1",width:"50",height:"50",viewBox:"0 0 78 97.5",fill:"currentColor",children:(0,s.jsxs)("g",{children:[(0,s.jsx)("rect",{x:"54",y:"54",width:"6",height:"6"}),(0,s.jsx)("rect",{x:"36",y:"36",width:"6",height:"6"}),(0,s.jsx)("rect",{x:"30",y:"42",width:"6",height:"6"}),(0,s.jsx)("rect",{x:"24",y:"48",width:"6",height:"6"}),(0,s.jsx)("rect",{x:"18",y:"54",width:"6",height:"6"}),(0,s.jsx)("rect",{x:"42",y:"30",width:"6",height:"6"}),(0,s.jsx)("rect",{x:"48",y:"24",width:"6",height:"6"}),(0,s.jsx)("rect",{x:"54",y:"18",width:"6",height:"6"}),(0,s.jsx)("rect",{x:"42",y:"42",width:"6",height:"6"}),(0,s.jsx)("rect",{x:"48",y:"48",width:"6",height:"6"}),(0,s.jsx)("rect",{x:"30",y:"30",width:"6",height:"6"}),(0,s.jsx)("rect",{x:"18",y:"18",width:"6",height:"6"}),(0,s.jsx)("rect",{x:"24",y:"24",width:"6",height:"6"})]})});return(0,s.jsx)(s.Fragment,{children:e?(0,s.jsx)(s.Fragment,{}):(0,s.jsx)(g.Z,{classNames:{modal:"!bg-pop-orange !outline w-1/2 md:w-1/2 xl:w-1/3 2xl:w-1/4 overflow-x-hidden !text-white"},open:l,onClose:i,center:!0,closeIcon:n,children:(0,s.jsx)("div",{className:"flex flex-col text-2xl h-full text-center",style:{fontFamily:"__VT323_2a9463"},children:(0,s.jsx)("div",{className:"mx-8 mt-8 text-stone-50",children:(0,s.jsx)("p",{children:"Uh oh! It looks like your browser doesn't support WebGPU. Please try again in a different browser."})})})})})},b=()=>{let[e,t]=(0,r.useState)({segments:[]}),[l,a]=(0,r.useState)(!1),n=()=>{let t=JSON.stringify(e),l=new Blob([t],{type:"application/json"}),s=URL.createObjectURL(l),a=document.createElement("a");a.download="transcript.json",a.href=s,a.click(),a.remove()};return(0,s.jsxs)(x,{title:"Whisper Turbo",children:[(0,s.jsx)("div",{className:"p-0 ".concat(i().className),children:(0,s.jsxs)("div",{className:"flex gap-8 flex-row h-screen",children:[(0,s.jsx)(p,{transcript:e,setTranscript:t,setDownloadAvailable:a}),(0,s.jsx)("div",{className:"flex-1 w-1/2 h-full flex flex-col relative z-10",children:(0,s.jsx)("div",{className:"h-full flex flex-col mx-auto px-4 xl:pr-32 overflow-scroll py-12 w-full",children:(0,s.jsxs)("div",{className:"flex flex-col h-full",children:[e&&e.segments.map(e=>(0,s.jsx)("div",{className:"flex w-full py-4",children:(0,s.jsxs)("div",{className:"rounded p-4 bg-white outline outline-2 outline-black shadow-lg align-right",children:[(0,s.jsx)("div",{className:"font-bold text-lg text-green-700 mb-2",children:e.start}),(0,s.jsx)("div",{className:"mb-2 text-2xl text-slate-900 text-right",children:e.text}),(0,s.jsx)("div",{className:"font-bold text-lg text-red-700",children:e.stop})]})},e.start)),l?(0,s.jsx)("div",{className:"flex flex-row justify-end py-4",children:(0,s.jsx)("button",{className:"bg-green-500 outline hover:bg-green-700 text-white font-bold py-2 px-4",onClick:n,children:"Download"})}):(0,s.jsx)(s.Fragment,{})]})})})]})}),(0,s.jsx)(j,{})]})};var v=b}},function(e){e.O(0,[398,639,774,888,179],function(){return e(e.s=8477)}),_N_E=e.O()}]); |