_next/static/chunks/app/page-189836703ffb6814.js

(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[931],{5449:function(e,t,a){Promise.resolve().then(a.bind(a,8514))},8514:function(e,t,a){"use strict";a.r(t),a.d(t,{default:function(){return v}});var s=a(2872),l=a(1190),n=a(1715),i=a(4209),r=a(7313),o=a(8077);let c={en:"English",zh:"Chinese",de:"German",es:"Spanish",ru:"Russian",ko:"Korean",fr:"French",ja:"Japanese",pt:"Portuguese",tr:"Turkish",pl:"Polish",ca:"Catalan",nl:"Dutch",ar:"Arabic",sv:"Swedish",it:"Italian",id:"Indonesian",hi:"Hindi",fi:"Finnish",vi:"Vietnamese",he:"Hebrew",uk:"Ukrainian",el:"Greek",ms:"Malay",cs:"Czech",ro:"Romanian",da:"Danish",hu:"Hungarian",ta:"Tamil",no:"Norwegian",th:"Thai",ur:"Urdu",hr:"Croatian",bg:"Bulgarian",lt:"Lithuanian",la:"Latin",mi:"Maori",ml:"Malayalam",cy:"Welsh",sk:"Slovak",te:"Telugu",fa:"Persian",lv:"Latvian",bn:"Bengali",sr:"Serbian",az:"Azerbaijani",sl:"Slovenian",kn:"Kannada",et:"Estonian",mk:"Macedonian",br:"Breton",eu:"Basque",is:"Icelandic",hy:"Armenian",ne:"Nepali",mn:"Mongolian",bs:"Bosnian",kk:"Kazakh",sq:"Albanian",sw:"Swahili",gl:"Galician",mr:"Marathi",pa:"Punjabi",si:"Sinhala",km:"Khmer",sn:"Shona",yo:"Yoruba",so:"Somali",af:"Afrikaans",oc:"Occitan",ka:"Georgian",be:"Belarusian",tg:"Tajik",sd:"Sindhi",gu:"Gujarati",am:"Amharic",yi:"Yiddish",lo:"Lao",uz:"Uzbek",fo:"Faroese",ht:"Haitian creole",ps:"Pashto",tk:"Turkmen",nn:"Nynorsk",mt:"Maltese",sa:"Sanskrit",lb:"Luxembourgish",my:"Myanmar",bo:"Tibetan",tl:"Tagalog",mg:"Malagasy",as:"Assamese",tt:"Tatar",haw:"Hawaiian",ln:"Lingala",ha:"Hausa",ba:"Bashkir",jw:"Javanese",su:"Sundanese",yue:"Cantonese"};var d=e=>{let[t,a]=(0,i.useState)(!1),[l,n]=(0,i.useState)(e.configOptions.language),r=t=>{e.setConfigOptions(e=>({...e,language:t})),n(t),a(!1)};return(0,s.jsxs)("div",{className:"relative",children:[(0,s.jsxs)("div",{className:"flex flex-col items-center justify-center",children:[(0,s.jsx)("label",{id:"options-menu",className:"text-2xl pb-1 font-medium text-white mr-auto ",children:"Source Language"}),(0,s.jsxs)("button",{onClick:()=>a(e=>!e),className:"relative z-10 block px-4 py-1.5 bg-white text-left w-full rounded-md font-medium text-slate-900 outline",children:[l||"Select a language",(0,s.jsx)("span",{className:"absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none",children:(0,s.jsx)("svg",{className:"h-5 w-5 text-gray-400",viewBox:"0 0 20 20",fill:"none",stroke:"currentColor",children:(0,s.jsx)("path",{d:"M7 7l3-3 3 3m0 6l-3 3-3-3",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})})})]})]}),t&&(0,s.jsx)("div",{className:"absolute z-20 mt-2 w-full rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5",children:(0,s.jsx)("div",{className:"py-1",role:"menu","aria-orientation":"vertical","aria-labelledby":"options-menu",children:Object.entries(c).map(e=>{let[t,a]=e;return(0,s.jsx)("a",{href:"#",className:"block px-4 py-2 text-slate-900 hover:bg-gray-100",role:"menuitem",onClick:()=>r(t),children:a},t)})})})]})},u=e=>{let[t,a]=(0,i.useState)({suppress_non_speech:e.configOptions.suppress_non_speech});return(0,s.jsxs)("div",{className:"flex flex-col",children:[(0,s.jsx)("label",{className:"text-2xl mr-auto",children:"Suppress Tokens"}),(0,s.jsx)("div",{className:"mt-2 flex flex-col",children:(0,s.jsxs)("div",{className:"flex flex-row w-36 items-center mt-2",children:[(0,s.jsx)("label",{className:" text-left text-2xl mr-auto w-full",children:"Non Speech"}),(0,s.jsx)("input",{id:"translate-checkbox",type:"checkbox",name:"suppress_non_speech",checked:t.suppress_non_speech,onChange:s=>{a({...t,[s.target.name]:s.target.checked}),e.setConfigOptions({...e.configOptions,suppress_non_speech:s.target.checked})},className:"form-checkbox ml-auto h-7 w-7 text-blue-600"})]})})]})},h=e=>{let t={translate:e.configOptions.task===r.iQ.Translate,transcribe:e.configOptions.task===r.iQ.Transcribe},[a,l]=(0,i.useState)(t),n=t=>{l({...a,[t.target.name]:t.target.checked}),"translate"===t.target.name&&l({translate:t.target.checked,transcribe:!t.target.checked}),"transcribe"===t.target.name&&l({translate:!t.target.checked,transcribe:t.target.checked}),e.setConfigOptions(e=>({...e,task:"translate"===t.target.name?r.iQ.Translate:r.iQ.Transcribe}))};return(0,s.jsxs)("div",{className:"flex flex-col",children:[(0,s.jsx)("label",{className:"text-2xl mr-auto",children:"Task"}),(0,s.jsxs)("div",{className:"mt-2 flex flex-col",children:[(0,s.jsxs)("div",{className:"flex flex-row w-36 items-center mt-2",children:[(0,s.jsx)("label",{className:" text-left text-2xl mr-auto w-full",children:"Transcribe"}),(0,s.jsx)("input",{id:"translate-checkbox",type:"checkbox",name:"transcribe",checked:a.transcribe,onChange:n,className:"form-checkbox ml-auto h-7 w-7 text-blue-600"})]}),(0,s.jsxs)("div",{className:"flex flex-row w-36 items-center mt-2",children:[(0,s.jsx)("label",{className:" text-left text-2xl mr-auto w-full",children:"Translate"}),(0,s.jsx)("input",{id:"translate-checkbox",type:"checkbox",name:"translate",checked:a.translate,onChange:n,className:"form-checkbox ml-auto h-7 w-7 text-blue-600"})]})]})]})},x=e=>(0,s.jsx)(s.Fragment,{children:(0,s.jsx)(o.Z,{classNames:{modal:"!outline !outline-black h-3/4 w-3/4 md:w-3/4 xl:w-1/2 2xl:w-1/3 overflow-x-hidden"},open:e.isModalOpen,onClose:()=>{e.setIsModalOpen(!1)},blockScroll:!0,center:!0,children:(0,s.jsx)("div",{className:"flex flex-col text-2xl h-full text-center",children:(0,s.jsxs)("div",{className:"flex flex-col p-8 gap-y-8 mx-auto w-full",children:[(0,s.jsx)(d,{configOptions:e.configOptions,setConfigOptions:e.setConfigOptions}),(0,s.jsx)(h,{configOptions:e.configOptions,setConfigOptions:e.setConfigOptions}),(0,s.jsx)(u,{configOptions:e.configOptions,setConfigOptions:e.setConfigOptions})]})})})}),m=e=>{let{selectedModel:t,setSelectedModel:a,loaded:l,progress:n}=e,[o,c]=(0,i.useState)(!1),d=Object.values(r.ko).filter(e=>"string"==typeof e),u=Object.values(r.ko);return(0,s.jsxs)(s.Fragment,{children:[n>0&&!l&&(0,s.jsx)("div",{className:"flex flex-row justify-between",children:(0,s.jsxs)("label",{className:"text-white text-xl font-semibold text-right",children:[n.toFixed(2),"%"]})}),(0,s.jsxs)("div",{className:"group inline-block relative w-full",children:[(0,s.jsxs)("button",{className:"font-semibold text-xl py-2.5 px-8 w-full inline-flex items-center outline outline-black",onClick:()=>c(!o),children:[(0,s.jsx)("span",{className:"mr-1",children: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 outline group-hover:block z-50 w-full shadow-lg shadow-black",style:{display:o?"block":"none"},children:d.map((e,t)=>(0,s.jsx)("li",{children:(0,s.jsx)("a",{className:"bg-white hover:bg-slate-100 py-2 px-8 font-semibold text-xl block whitespace-no-wrap cursor-pointer ".concat(t===d.length-1?"rounded-b-md":""),onClick:()=>{a(u[t]),c(!1)},children:e})},e))})]})]})},p=e=>{let{progress:t}=e;return(0,s.jsx)(s.Fragment,{children:t>0&&t<100&&(0,s.jsx)("div",{className:"flex flex-col gap-2",children:(0,s.jsx)("div",{className:"h-3 outline outline bg-gray-200",children:(0,s.jsx)("div",{className:"bg-emerald-600 h-3",style:{width:"".concat(t,"%")}})})})})},g=a(1882),f=a.n(g);class w{static async start(){if(!navigator.mediaDevices)throw Error("Media device not available");let e=await navigator.mediaDevices.getUserMedia({audio:!0}),t=w.supportedMimes.find(e=>MediaRecorder.isTypeSupported(e)),a=new MediaRecorder(e,{mimeType:t}),s=new w(a);return s.currentStream=e,a.addEventListener("dataavailable",e=>{s.audioChunks.push(e.data)}),a.start(),s.currentStart=Date.now(),s}isRecording(){return null!==this.inner&&"recording"===this.inner.state}async stop(){if(!this.inner)throw Error("Please start the recorder first");return new Promise(e=>{this.inner.addEventListener("stop",async()=>{let t=Date.now()-this.currentStart,a=new Blob(this.audioChunks,{type:this.inner.mimeType});this.inner.mimeType.includes("webm")&&(a=await f()(a,t,{logger:!1}));let s=await a.arrayBuffer();e({blob:a,buffer:s})}),this.inner.stop(),this.currentStream.getTracks().forEach(e=>e.stop())})}constructor(e){this.currentStart=null,this.currentStream=null,this.inner=null,this.audioChunks=[],this.inner=e}}w.supportedMimes=["audio/webm","audio/ogg"];var b=e=>{let[t,a]=(0,i.useState)(null),[l,n]=(0,i.useState)(!1),r=async()=>{a(await w.start())},o=async()=>{if(!t)return;let s=await t.stop(),l=new AudioContext({sampleRate:16e3}),n=(await l.decodeAudioData(s.buffer)).getChannelData(0);e.setAudioData(new Float32Array(n.buffer));let i=s.blob;e.setAudioMetadata({file:new File([i],"recording.wav"),fromMic:!0}),e.setBlobUrl(URL.createObjectURL(i)),a(null)},c=async()=>{l?await o():await r(),n(!l)};return(0,s.jsx)("div",{className:"flex flex-col",children:(0,s.jsx)("button",{className:"text-xl outline outline-white text-black font-semibold px-6 mx-auto cursor-pointer h-full pt-6",onClick:c,children:l?(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"})})})})},j=a(585),k=()=>{let[e,t]=(0,i.useState)(!1),[a,l]=(0,i.useState)(!1);(0,i.useEffect)(()=>{if(!navigator.gpu){l(!0);return}t(!0)},[]);let 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)(o.Z,{classNames:{modal:"outline w-1/2 md:w-1/2 xl:w-1/3 2xl:w-1/4 overflow-x-hidden text-black"},open:a,onClose:()=>{l(!1)},center:!0,closeIcon:n,children:(0,s.jsx)("div",{className:"flex flex-col text-2xl h-full text-center",children:(0,s.jsx)("div",{className:"mx-8 mt-8",children:(0,s.jsx)("p",{children:"Uh oh! It looks like your browser doesn't support WebGPU. Please try again in a different browser."})})})})})};function v(){let[e,t]=(0,i.useState)(r.ko.WhisperTiny),[a,o]=(0,i.useState)(null),[c,d]=(0,i.useState)(null),u=(0,i.useRef)(new l.C),[h,g]=(0,i.useState)(!1),[f,w]=(0,i.useState)(),[v,y]=(0,i.useState)(null),[N,S]=(0,i.useState)(null),[C,O]=(0,i.useState)([]),[M,F]=(0,i.useState)(!1),[L,T]=(0,i.useState)({language:null,task:r.iQ.Transcribe,suppress_non_speech:!0}),[_,A]=(0,i.useState)(!1),[R,B]=(0,i.useState)(0);async function U(){let t=r.ko[e];d(await r.Hn.load(t,r.qX.Q8,e=>B(e))),o(e),B(0)}(0,i.useEffect)(()=>{(async()=>{await (0,r.ZP)()})()},[]);let z=async()=>{console.log("Loading FFmpeg");let e="https://unpkg.com/@ratchet-ml/ffmpeg-core@0.0.12/dist/umd",t=u.current;t.on("log",e=>{let{message:t}=e;console.log(t)}),await t.load({coreURL:await (0,n.Wn)("".concat(e,"/ffmpeg-core.js"),"text/javascript"),wasmURL:await (0,n.Wn)("".concat(e,"/ffmpeg-core.wasm"),"application/wasm")}),g(!0)},E=async e=>{h||await z();let t=u.current;await t.writeFile("input",e),await t.exec(["-nostdin","-threads","0","-i","input","-f","s16le","-ac","1","-acodec","pcm_s16le","-loglevel","debug","-ar","16000","output.pcm"]);let a=await t.readFile("output.pcm");return w(URL.createObjectURL(new Blob([a.buffer],{type:"audio/wav"}))),a.buffer};async function P(){if(!c||!v||_)return;A(!0),O([]);let e=new r.dX().setLanguage(L.language?L.language:"en").setTask(L.task).setSuppressBlank(L.suppress_non_speech).build();console.log("Options: ",e);let t=await c.run({audio:v,decode_options:e,callback:e=>{if(e.last){A(!1);return}O(t=>[...t,e])}});console.log("Result: ",t),console.log("Processing time: ",t.processing_time)}return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(x,{isModalOpen:M,setIsModalOpen:F,configOptions:L,setConfigOptions:T}),(0,s.jsx)("h1",{className:"text-blue-700 text-4xl font-extrabold pb-6",children:"Whisper + Ratchet"}),(0,s.jsxs)("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-8",children:[(0,s.jsxs)("div",{className:"flex flex-col gap-6 w-full",children:[(0,s.jsx)(m,{selectedModel:e,setSelectedModel:t,loaded:!1,progress:0}),R>0&&R<100?(0,s.jsx)(p,{progress:R}):(0,s.jsx)(s.Fragment,{}),a!=e?(0,s.jsx)("button",{className:"outline outline-black text-black font-semibold py-1 px-4 cursor-pointer",onClick:U,children:"Load Model"}):(0,s.jsx)(s.Fragment,{}),(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-black font-semibold",children:"Upload Audio"}),(0,s.jsx)("label",{className:"text-lg outline outline-black  w-full font-semibold py-2.5 px-8 mx-auto cursor-pointer w-full",htmlFor:"audioFile",children:(0,s.jsx)("div",{className:"flex flex-row justify-between",children:(0,s.jsx)("span",{className:"",children:N?N.file.name:"Select Audio File"})})}),(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 a=new FileReader;a.onload=async()=>{let e=new Uint8Array(a.result);y(function(e){let t=new Int16Array(e),a=new Float32Array(t.length);for(let e=0;e<t.length;e++)a[e]=t[e]/32768;return a}(await j.default.promise(E(e),{loading:"Transcoding audio...",success:(0,s.jsx)("b",{children:"Transcoded successfully!"}),error:(0,s.jsx)("b",{children:"Failed to transcode."})}))),S({file:t,fromMic:!1}),w(URL.createObjectURL(t))},a.readAsArrayBuffer(t)},accept:".wav,.aac,.m4a,.mp4,.mp3"})]}),(0,s.jsx)(b,{setBlobUrl:w,setAudioData:y,setAudioMetadata:S})]}),f&&(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",children:(0,s.jsx)("source",{src:f,type:"audio/wav"},f)},f)]}),(0,s.jsxs)("div",{className:"flex flex-row gap-4 justify-end items-center",children:[(0,s.jsx)("button",{className:"outline outline-black text-black font-semibold py-3 px-4 cursor-pointer",onClick:()=>F(!0),children:"Options"}),(0,s.jsx)("button",{className:"outline outline-black text-black font-semibold py-3 px-4 cursor-pointer",onClick:P,children:_?(0,s.jsx)("div",{className:"flex p-4",children:(0,s.jsx)("span",{className:"loader"})}):"Run Model"})]})]}),(0,s.jsx)("div",{className:"flex flex-col relative w-full z-10 min-h-screen",children:(0,s.jsx)("div",{className:"flex gap-4 flex-col",children:C&&C.map(e=>(0,s.jsxs)("div",{className:"rounded p-4 bg-white outline outline-2 outline-black shadow-lg align-right",children:[(0,s.jsxs)("div",{className:" text-lg mb-2",children:[e.start," -> ",e.stop]}),(0,s.jsx)("div",{className:"mb-2 text-lg text-slate-900 text-right",children:e.text})]},e.start))})})]}),(0,s.jsx)(k,{})]})}}},function(e){e.O(0,[585,102,577,726,744],function(){return e(e.s=5449)}),_N_E=e.O()}]);