_next/static/chunks/app/page-1ac1ee70601742f9.js

(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[931],{5449:function(e,a,l){Promise.resolve().then(l.bind(l,9414))},9414:function(e,a,l){"use strict";l.r(a),l.d(a,{default:function(){return p}});var s=l(2872),t=l(1190),n=l(1715),i=l(4209),o=l(7439),r=l(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 u=e=>{let[a,l]=(0,i.useState)(!1),[t,n]=(0,i.useState)(e.configOptions.language),o=a=>{e.setConfigOptions(e=>({...e,language:a})),n(a),l(!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:()=>l(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:[t||"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"})})})]})]}),a&&(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[a,l]=e;return(0,s.jsx)("a",{href:"#",className:"block px-4 py-2 text-slate-900 hover:bg-gray-100",role:"menuitem",onClick:()=>o(a),children:l},a)})})})]})},d=e=>{let[a,l]=(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:a.suppress_non_speech,onChange:s=>{l({...a,[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"})]})})]})},x=e=>{let a={translate:e.configOptions.task===o.iQ.Translate,transcribe:e.configOptions.task===o.iQ.Transcribe},[l,t]=(0,i.useState)(a),n=a=>{t({...l,[a.target.name]:a.target.checked}),"translate"===a.target.name&&t({translate:a.target.checked,transcribe:!a.target.checked}),"transcribe"===a.target.name&&t({translate:!a.target.checked,transcribe:a.target.checked}),e.setConfigOptions(e=>({...e,task:"translate"===a.target.name?o.iQ.Translate:o.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:l.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:l.translate,onChange:n,className:"form-checkbox ml-auto h-7 w-7 text-blue-600"})]})]})]})},m=e=>((0,i.useEffect)(()=>{if(!navigator.gpu){e.setIsModalOpen(!0);return}},[]),(0,s.jsx)(s.Fragment,{children:(0,s.jsx)(r.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)},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)(u,{configOptions:e.configOptions,setConfigOptions:e.setConfigOptions}),(0,s.jsx)(x,{configOptions:e.configOptions,setConfigOptions:e.setConfigOptions}),(0,s.jsx)(d,{configOptions:e.configOptions,setConfigOptions:e.setConfigOptions})]})})})})),h=e=>{let{selectedModel:a,setSelectedModel:l,loaded:t,progress:n}=e,[r,c]=(0,i.useState)(!1),u=Object.values(o.ko).filter(e=>"string"==typeof e),d=Object.values(o.ko);return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)("div",{className:"flex flex-row justify-between",children:n>0&&!t&&(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(!r),children:[(0,s.jsx)("span",{className:"mr-1",children:a||"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-10 w-full",style:{display:r?"block":"none"},children:u.map((e,a)=>(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(a===u.length-1?"rounded-b-md":""),onClick:()=>{l(d[a]),c(!1)},children:e})},e))})]})]})},f=e=>{let{progress:a}=e;return(0,s.jsx)(s.Fragment,{children:a>0&&a<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(a,"%")}})})})})};function p(){let[e,a]=(0,i.useState)(o.ko.WHISPER_TINY),[l,r]=(0,i.useState)(null),[c,u]=(0,i.useState)(null),d=(0,i.useRef)(new t.C),[x,p]=(0,i.useState)(!1),[g,b]=(0,i.useState)(),[j,w]=(0,i.useState)(null),[k,v]=(0,i.useState)([]),[N,y]=(0,i.useState)(!1),[S,O]=(0,i.useState)({language:null,task:o.iQ.Transcribe,suppress_non_speech:!0}),[C,_]=(0,i.useState)(!1),[M,L]=(0,i.useState)(0);async function F(){let a=o.ko[e];u(await o.Hn.load(a,o.qX.Q8,e=>L(e))),r(e),L(0)}(0,i.useEffect)(()=>{(async()=>{await (0,o.ZP)()})()},[]),(0,i.useEffect)(()=>{c&&console.log("Model loaded: ",c),console.log("Selected model: ",e),console.log("Loaded model: ",l)},[c,e,l]);let T=async()=>{console.log("Loading FFmpeg");let e="https://unpkg.com/@ratchet-ml/[email protected]/dist/umd",a=d.current;a.on("log",e=>{let{message:a}=e;console.log(a)}),await a.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")}),console.log("Successfully loaded FFmpeg"),p(!0)},R=async e=>{x||await T();let a=d.current;await a.writeFile("input",e);let l=["-nostdin","-threads","0","-i","input","-f","s16le","-ac","1","-acodec","pcm_s16le","-loglevel","debug","-ar","16000","output.pcm"];console.log("Running command: ",l),await a.exec(l);let s=await a.readFile("output.pcm");return b(URL.createObjectURL(new Blob([s.buffer],{type:"audio/wav"}))),s.buffer};async function z(){if(!c||!j||C)return;v([]);let e=function(e){let a=new Int16Array(e),l=new Float32Array(a.length);for(let e=0;e<a.length;e++)l[e]=a[e]/32768;return l}(j),a=new o.dX().setLanguage(S.language?S.language:"en").setTask(S.task).setSuppressBlank(S.suppress_non_speech).build();console.log("Options: ",a),_(!0);let l=await c.run({audio:e,decode_options:a,callback:e=>{e.last&&_(!1),v(a=>[...a,e])}});console.log("Result: ",l),console.log("Processing time: ",l.processing_time)}return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(m,{isModalOpen:N,setIsModalOpen:y,configOptions:S,setConfigOptions:O}),(0,s.jsxs)("div",{className:"flex gap-8 flex-row h-screen",children:[(0,s.jsx)("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)("h1",{className:"text-blue-700 text-4xl font-semibold mx-auto",children:"Whisper + Ratchet"}),(0,s.jsxs)("div",{className:"flex flex-col mx-auto gap-6",children:[(0,s.jsx)(h,{selectedModel:e,setSelectedModel:a,loaded:!1,progress:0}),M>0&&M<100?(0,s.jsx)(f,{progress:M}):(0,s.jsx)(s.Fragment,{}),l!=e?(0,s.jsx)("button",{className:"outline outline-black text-black font-semibold py-1 px-4 cursor-pointer",onClick:F,children:"Load Model"}):(0,s.jsx)(s.Fragment,{}),(0,s.jsxs)("div",{className:"flex flex-row gap-4 justify-between items-center",children:[(0,s.jsx)("input",{type:"file",name:"audioFile",id:"audioFile",onChange:async e=>{let a=e.target.files[0];if(!a)return;let l=new FileReader;l.onload=async()=>{let e=new Uint8Array(l.result);w(await R(e)),b(URL.createObjectURL(a))},l.readAsArrayBuffer(a)}}),(0,s.jsx)("audio",{controls:!0,children:(0,s.jsx)("source",{src:g,type:"audio/wav"},g)},g)]}),(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:()=>y(!0),children:"Options"}),(0,s.jsx)("button",{className:"outline outline-black text-black font-semibold py-3 px-4 cursor-pointer",onClick:z,children:C?(0,s.jsx)("div",{className:"flex p-4",children:(0,s.jsx)("span",{className:"loader"})}):"Run Model"})]})]})]})}),(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.jsx)("div",{className:"flex flex-col h-full",children:k&&k.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.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))})})})]})]})}}},function(e){e.O(0,[147,577,726,744],function(){return e(e.s=5449)}),_N_E=e.O()}]);