https://www.persona.me/_next/static/chunks/596.028eaac0a70dfc74.js

1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[596],{3596:function(e,t,s){s.r(t),s.d(t,{default:function(){return AudioCloning}});var r=s(9424),l=s(3381),n=s(2147),o=s(5391);let CircularProgress=e=>{let{total:t=0}=e,s=(0,l.useRef)(null);return(0,l.useEffect)(()=>{if(s.current){let e=2*s.current.r.baseVal.value*Math.PI;s.current.style.strokeDasharray=String(e),s.current.style.strokeDashoffset=String(e-t/100*e)}},[t]),(0,r.jsxs)("svg",{width:72,height:72,className:"absolute z-[-1]",children:[(0,r.jsx)("circle",{r:33,cx:"35.5px",cy:"35.5px",className:"fill-none stroke-[4px]",style:{stroke:"#d9d9d9"}}),(0,r.jsx)("circle",{ref:s,r:33,cx:"35.5px",cy:"35.5px",className:"fill-none stroke-[4px]",style:{stroke:"#187EE7"}})]})};var a=s(7159);let i=["The clay felt smooth in her hand. She mixed, remixed and brought to life an entire world of soft people.","This is the second line. Its wrttien by some amazing guy from the past, it help our AI to clone you.","Third line is really cool. because its third line, btw not a so much funny joke but you can lough.","Fourth line here. on this duty to get users best experience possible with our frontend JavaScript code.","Fifth line just some lorem ipsums Neque porro quisquam est qui dolorem ipsum quia dolor sit amet.","Sixth line copy of lorem ipsums Neque porro quisquam est qui dolorem ipsum quia dolor sit amet."];function AudioCloning(e){let[t,s]=(0,l.useState)(60),[c,d]=(0,l.useState)(0),[p,x]=(0,l.useState)(!1),[u,h]=(0,l.useState)("play"),[f,m]=(0,l.useState)("start"),[g,j]=(0,l.useState)([[],[],[],[],[],[]]),w=(0,l.useRef)(),y=(0,l.useRef)(),N=(0,l.useRef)(),[v,b]=(0,l.useState)([0,0,0,0,0,0]),[k,E]=(0,l.useState)([]),[S,R]=(0,l.useState)(!1),C=(0,l.useRef)(null);(0,l.useEffect)(()=>{g[c].length&&(m("stop"),x(!1))},[c]),(0,l.useEffect)(()=>{console.log("timer called"),0==t&&stopRecording()},[t]);let stopRecording=()=>{m("stop"),x(!1),w.current&&(w.current.stop(),w.current=void 0),N.current&&N.current.getTracks().forEach(e=>{e.stop()}),clearTimeout(C.current),C.current=null,console.log("Recorded")},handleStepUpload=async()=>{console.log("handleStepUpload function called");let e=new Blob(g[c]),s=new XMLHttpRequest;s.upload.onloadstart=e=>{console.log("uploading",e.total)},s.upload.onprogress=e=>{console.log("loaded",e.loaded,"totla",e.total);var t=Math.ceil(e.loaded/e.total*100);b(e=>{let s=[...e];return s[c]=t,s})},s.onreadystatechange=function(){s.readyState==XMLHttpRequest.DONE&&(console.log("xhr.responseText",s.responseText),E(e=>{let t=[...e,s.responseText];return handleFinalUpload(t),t}),void 0!=g[c+1]&&0!=t&&(console.log("onready step changing"),m("start"),d(e=>5==e?5:e+1)))},s.open("POST","https://voicleclone-worker.safeapp.workers.dev/upload_chunk?file_name="+new Date().toISOString()+"-"+"".concat(c)),s.send(e)},handleFinalUpload=s=>{if(console.log(s),5==c||0==t){R(!0),console.log("finishing because step = ".concat(c," & time = ").concat(t));let r={method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(s)};console.log("uploadIds",k),fetch("https://voicleclone-worker.safeapp.workers.dev/from_r2?voice_name=TEMPLATE_NAME",r).then(e=>{if(!e.ok)throw Error("Network response was not ok");return e.text()}).then(t=>{e.setVoiceId(t),R(!1),e.nextStep()}).catch(e=>{console.error("Error:",e),R(!1)})}else console.log("step is ".concat(c," and time is ").concat(t," so unable to finish"))};return(0,r.jsx)("div",{className:"w-full h-full flex items-center justify-center",children:(0,r.jsx)("div",{className:"max-w-[390px] h-[644px] px-[24px] py-[48px]",children:(0,r.jsxs)("div",{className:"flex flex-col items-center h-full justify-between",children:[(0,r.jsxs)("div",{className:"inline-flex flex-col items-center gap-[16px]",children:[(0,r.jsx)("h2",{className:"text-[#1D1D1F] text-[33px] leading-[40px] text-center font-semibold tracking-[-0.66px]",children:"Read the words"}),(0,r.jsx)("div",{className:"flex items-center gap-[8px]",children:(0,r.jsxs)("p",{className:"text-[#1D1D1F] text-center text-[13px] w-[96px]",children:[t," seconds left"]})})]}),(0,r.jsxs)("div",{className:"inline-flex flex-col gap-[12px]",children:[(0,r.jsx)("p",{className:"text-[#1D1D1F] text-[19px] font-semibold leading-[150%] max-w-[342px]",children:i[c]}),(0,r.jsx)("div",{className:"flex gap-[8px]",children:"start"==f?(0,r.jsx)("div",{className:"inline-flex py-[4px] px-[8px] justify-center gap-[10px] rounded-[16px] border border-[#1D1D1F1F] shadow-sm",children:(0,r.jsxs)("div",{className:"flex items-center gap-[4px]",children:[(0,r.jsx)("div",{className:"w-[98px] h-[20px] rounded-[24px]",children:w.

1current&&(0,r.jsx)(o.F,{mediaRecorder:w.current,width:98,height:20})}),p&&(0,r.jsx)("p",{className:"text-[#1D1D1F] text-[13px] leading-[20px] ",children:"Recording..."})]})}):(0,r.jsxs)("div",{className:"flex gap-[8px]",children:[(0,r.jsx)("button",{onClick:"play"==u?()=>{h("pause");let e=new Blob(g[c],{type:"audio/mp3"}),t=URL.createObjectURL(e);y.current=new Audio(t),y.current.load(),y.current.play(),y.current.addEventListener("ended",()=>{h("play")})}:()=>{h("play"),y.current&&y.current.pause()},className:"flex py-[4px] px-[8px] justify-center rounded-[16px] border border-[#187EE7] bg-white",disabled:"stop"!=f,children:(0,r.jsxs)("div",{className:"flex items-center gap-[4px]",children:[(0,r.jsx)(n.JO,{frameClass:"h-[20px] w-[20px] text-[#187EE7]",children:"play"==u?(0,r.jsx)(n.o1,{}):(0,r.jsx)(n.wN,{})}),(0,r.jsx)("p",{className:"w-[32px] text-[#187EE7] text-[13px] font-[500] leading-[20px]",children:"play"==u?"Play":"Stop"})]})}),(0,r.jsx)("button",{onClick:()=>{m("start"),b(e=>{let t=[...e];return t[c]=0,t}),x(!1),y.current&&y.current.pause(),y.current=void 0,w.current=void 0,j(e=>{let t=[...e];return t[c]=[],t});let e=new Blob(g[c],{type:"audio/mp3"}),t=new AudioContext,r=new FileReader;r.onload=function(){t.decodeAudioData(r.result,function(e){let t=Math.round(e.duration);console.log("Audio duration: "+t+" seconds"),s(e=>e+t)})},r.readAsArrayBuffer(e)},disabled:"stop"!=f,className:"flex py-[4px] px-[8px] justify-center rounded-[16px] bg-white",children:(0,r.jsx)(n.JO,{frameClass:"h-[20px] w-[20px]",children:(0,r.jsx)(n.pJ,{})})})]})})]}),(0,r.jsxs)("div",{className:"inline-flex items-center gap-[16px]",children:[0===c?(0,r.jsx)("div",{className:"h-[48px] w-[48px]"}):(0,r.jsx)("button",{onClick:()=>{d(e=>0==e?0:e-1)},className:"flex p-[12px] items-center rounded-[32px] bg-white",children:(0,r.jsx)(n.d5,{height:24,width:24})}),"start"==f&&(0,r.jsx)("button",{onClick:p?stopRecording:()=>{navigator.mediaDevices.getUserMedia({audio:!0}).then(e=>{N.current=e,w.current=new MediaRecorder(e);let t=[...g[c]];w.current.addEventListener("dataavailable",e=>{e.data&&e.data.size>0&&(t.push(e.data),j(e=>{let s=[...e];return s[c]=t,s}))}),x(!0),w.current.start(100),C.current=window.setInterval(()=>{s(e=>e-1)},1e3),console.log("Recording started! Speak now.")}).catch(e=>{console.log("Error: "+e)})},className:"p-[16px] flex items-center rounded-[32px] bg-[#E71818]",children:(0,r.jsx)(n.JO,{frameClass:"h-[24px] w-[24px] text-white",children:p?(0,r.jsx)(n.wN,{}):(0,r.jsx)(n.ZO,{})})}),"stop"==f&&(0,r.jsxs)("div",{className:"relative flex justify-center items-center",children:[(0,r.jsx)("button",{onClick:()=>{0===v[c]?handleStepUpload():void 0!=g[c+1]&&0!=t&&(m("start"),d(e=>5==e?5:e+1))},className:"p-[16px] flex items-center rounded-[32px] bg-[#187EE7]",children:S?(0,r.jsx)(a.a,{size:24}):(0,r.jsx)(n._t,{height:24,width:24,className:"text-white"})}),(0,r.jsx)(CircularProgress,{total:v[c]})]}),(0,r.jsx)("div",{className:"h-[48px] w-[48px]"})]})]})})})}}}]);