Update app.py

app.py

@@ -629,32 +629,48 @@ var canvas=document.createElement('canvas');
 canvas.width=1280;canvas.height=720;
 var ctx=canvas.getContext('2d');
 var stream=canvas.captureStream(30);
-var opts={{mimeType:'video/webm;codecs=vp8'}};
-if(!MediaRecorder.isTypeSupported(opts.mimeType))opts={{mimeType:'video/webm'}};
+
+// 고화질 설정
+var opts={{mimeType:'video/webm;codecs=vp9',videoBitsPerSecond:8000000}};
+if(!MediaRecorder.isTypeSupported(opts.mimeType)){{
+opts={{mimeType:'video/webm;codecs=vp8',videoBitsPerSecond:8000000}};
+}}
+if(!MediaRecorder.isTypeSupported(opts.mimeType)){{
+opts={{mimeType:'video/webm',videoBitsPerSecond:5000000}};
+}}
+
 var rec=new MediaRecorder(stream,opts);
 var chunks=[];
 rec.ondataavailable=function(e){{if(e.data.size>0)chunks.push(e.data)}};
+
 document.getElementById('exportMsg').textContent='녹화 중...';
 rec.start(100);
+
 var dur=S.dur;
-var start=performance.now();
-await new Promise(function(resolve){{
-function render(){{
-if(S.cancelled){{rec.stop();resolve();return}}
-var t=(performance.now()-start)/1000;
-if(t>=dur){{
-setTimeout(function(){{rec.stop();setTimeout(resolve,300)}},200);
-return;
-}}
-document.getElementById('exportBar').style.width=(t/dur*100)+'%';
-document.getElementById('exportMsg').textContent='녹화 중... '+Math.round(t/dur*100)+'%';
+var fps=30;
+var totalFrames=Math.ceil(dur*fps);
+var frameTime=1/fps;
+
+// 프레임 단위로 정확하게 렌더링
+for(var frame=0;frame<totalFrames;frame++){{
+if(S.cancelled)break;
+
+var t=frame*frameTime;
+document.getElementById('exportBar').style.width=(frame/totalFrames*100)+'%';
+document.getElementById('exportMsg').textContent='녹화 중... '+Math.round(frame/totalFrames*100)+'% ('+Math.floor(t)+'/'+Math.floor(dur)+'초)';
+
 ctx.fillStyle='#000';
 ctx.fillRect(0,0,1280,720);
+
 var vc=getClipAt(t,'visual');
 if(vc){{
 var el=S.els[vc.mid];
 if(el){{
-if(vc.type==='video')el.currentTime=t-vc.start+vc.ts;
+if(vc.type==='video'){{
+var clipT=t-vc.start+vc.ts;
+// seek하고 완료될 때까지 기다림
+await seekVideo(el,clipT);
+}}
 try{{
 var sw=el.videoWidth||el.naturalWidth||el.width||1280;
 var sh=el.videoHeight||el.naturalHeight||el.height||720;
@@ -664,16 +680,25 @@ ctx.drawImage(el,(1280-dw)/2,(720-dh)/2,dw,dh);
 }}catch(e){{}}
 }}
 }}
-requestAnimationFrame(render);
+
+// 프레임 간격만큼 대기 (MediaRecorder가 프레임 캡처할 시간)
+await new Promise(function(resolve){{setTimeout(resolve,33)}});
 }}
-requestAnimationFrame(render);
+
+// 녹화 종료
+await new Promise(function(resolve){{
+rec.onstop=resolve;
+rec.stop();
 }});
+
 if(S.cancelled)return;
+
 var webmBlob=new Blob(chunks,{{type:'video/webm'}});
 if(webmBlob.size<1000){{document.getElementById('exportMsg').textContent='녹화 실패';return}}
+
 document.getElementById('exportBar').style.width='100%';
-document.getElementById('exportMsg').textContent='완료! ('+Math.round(webmBlob.size/1024)+'KB) - 아래에서 다운로드하세요';
-// WebM 다운로드 링크 생성
+document.getElementById('exportMsg').textContent='완료! ('+Math.round(webmBlob.size/1024/1024*10)/10+'MB) - 아래에서 다운로드';
+
 var downloadDiv=document.createElement('div');
 downloadDiv.style.marginTop='10px';
 var webmLink=document.createElement('a');
@@ -683,18 +708,20 @@ webmLink.className='btn btn-success';
 webmLink.textContent='📥 WebM 다운로드';
 webmLink.style.marginRight='5px';
 downloadDiv.appendChild(webmLink);
-// base64 복사 버튼
+
 var copyBtn=document.createElement('button');
 copyBtn.className='btn btn-secondary';
 copyBtn.textContent='📋 MP4변환용 복사';
 copyBtn.onclick=async function(){{
+document.getElementById('exportMsg').textContent='데이터 준비 중...';
 var reader=new FileReader();
 reader.onload=function(){{
 var base64=reader.result.split(',')[1];
 navigator.clipboard.writeText(base64).then(function(){{
-alert('복사 완료!\\n\\n위 Gradio의 "WebM 데이터" 입력란에 붙여넣기(Ctrl+V) 후\\n"MP4 변환" 버튼을 클릭하세요.');
+document.getElementById('exportMsg').textContent='복사 완료! 위 입력란에 붙여넣기';
+alert('복사 완료!\\n\\nGradio의 "WebM 데이터" 입력란에 붙여넣기(Ctrl+V) 후\\n"MP4 변환" 버튼을 클릭하세요.');
 }}).catch(function(){{
-prompt('아래 데이터를 복사하세요 (Ctrl+A, Ctrl+C):', base64);
+prompt('아래 데이터를 복사하세요:', base64.substring(0,100)+'...');
 }});
 }};
 reader.readAsDataURL(webmBlob);
@@ -703,6 +730,24 @@ downloadDiv.appendChild(copyBtn);
 document.querySelector('.modal-box').appendChild(downloadDiv);
 }}
 
+// 비디오 seek 완료 대기 함수
+function seekVideo(video,time){{
+return new Promise(function(resolve){{
+if(Math.abs(video.currentTime-time)<0.05){{
+resolve();
+return;
+}}
+var onSeeked=function(){{
+video.removeEventListener('seeked',onSeeked);
+resolve();
+}};
+video.addEventListener('seeked',onSeeked);
+video.currentTime=time;
+// 타임아웃 (혹시 seeked 이벤트가 안 오면)
+setTimeout(resolve,200);
+}});
+}}
+
 function cancelExport(){{S.cancelled=true;document.getElementById('exportModal').style.display='none'}}
 
 document.addEventListener('keydown',function(e){{