Update app-BACKUP2.py

app-BACKUP2.py

@@ -1,6 +1,7 @@
 """
 Simple Video Editor - Canvas 기반 렌더링
 빈 프레임 문제 완전 해결 + 서버 사이드 MP4 내보내기
+블러 배경 내보내기 수정: 더블 버퍼링
 """
 
 import gradio as gr
@@ -1007,25 +1008,28 @@ document.getElementById('exportMsg').textContent='녹화 준비 중...';
 doExport();
 }}
 
+// ============================================
+// 핵심 수정: 더블 버퍼링으로 블러 번쩍임 방지
+// ============================================
 async function doExport(){{
 var size=S.ratioSizes[S.ratio];
 var exportW=size.w,exportH=size.h;
 
-// 메인 캔버스 (MediaRecorder 연결용)
-var canvas=document.createElement('canvas');
-canvas.width=exportW;canvas.height=exportH;
-var ctx=canvas.getContext('2d');
+// ★ 메인 캔버스 (MediaRecorder 연결) - 완성된 프레임만 받음
+var mainCanvas=document.createElement('canvas');
+mainCanvas.width=exportW;mainCanvas.height=exportH;
+var mainCtx=mainCanvas.getContext('2d');
 
-// 오프스크린 캔버스 (렌더링용 - 더블 버퍼링)
+// ★ 오프스크린 캔버스 (렌더링용) - 여기서 모든 작업 후 한번에 복사
 var offCanvas=document.createElement('canvas');
 offCanvas.width=exportW;offCanvas.height=exportH;
 var offCtx=offCanvas.getContext('2d');
 
 // 초기 검은 화면
-ctx.fillStyle='#000';
-ctx.fillRect(0,0,exportW,exportH);
+mainCtx.fillStyle='#000';
+mainCtx.fillRect(0,0,exportW,exportH);
 
-var stream=canvas.captureStream(30);
+var stream=mainCanvas.captureStream(30);
 
 // 고화질 설정
 var opts={{mimeType:'video/webm;codecs=vp9',videoBitsPerSecond:8000000}};
@@ -1044,93 +1048,117 @@ document.getElementById('exportMsg').textContent='녹화 중... ('+S.ratio+')';
 rec.start(100);
 
 var dur=S.dur;
-var fps=30;
-var frameInterval=1000/fps;
-var totalFrames=Math.ceil(dur*fps);
-var startTime=performance.now();
 var fillMode=S.fillMode;
 
-// 실시간 기반 렌더링
-// 블러 모드용 프레임 캡처 캔버스 (재사용)
+// 블러용 캔버스 (재사용)
 var frameCanvas=document.createElement('canvas');
-frameCanvas.width=1920;frameCanvas.height=1080;
 var frameCtx=frameCanvas.getContext('2d');
+var blurCanvas=document.createElement('canvas');
+blurCanvas.width=16;blurCanvas.height=16;
+var blurCtx=blurCanvas.getContext('2d');
 
-await new Promise(function(resolve){{
-var frameCount=0;
-var lastVideoEl=null;
-var lastClipId=null;
+// 모든 비디오를 처음으로 되돌리고 재생
+var videoClips=S.clips.filter(function(c){{return c.type==='video'}});
+videoClips.forEach(function(vc){{
+var el=S.els[vc.mid];
+if(el){{
+el.currentTime=vc.ts;
+el.muted=true;
+}}
+}});
 
+// 잠시 대기 후 재생 시작
+await new Promise(function(r){{setTimeout(r,200)}});
+
+videoClips.forEach(function(vc){{
+var el=S.els[vc.mid];
+if(el)el.play().catch(function(){{}});
+}});
+
+var startTime=performance.now();
+
+// 실시간 렌더링 루프
+await new Promise(function(resolve){{
 function render(){{
 if(S.cancelled){{rec.stop();resolve();return}}
 
-var elapsed=performance.now()-startTime;
-var t=elapsed/1000;
-
-if(t>=dur){{
+var elapsed=(performance.now()-startTime)/1000;
+if(elapsed>=dur){{
 rec.stop();
-setTimeout(resolve,100);
+setTimeout(resolve,200);
 return;
 }}
 
-document.getElementById('exportBar').style.width=(t/dur*100)+'%';
-document.getElementById('exportMsg').textContent='녹화 중... '+Math.round(t/dur*100)+'% ('+t.toFixed(1)+'/'+dur.toFixed(1)+'초)';
+// 진행률 업데이트
+document.getElementById('exportBar').style.width=(elapsed/dur*100)+'%';
+document.getElementById('exportMsg').textContent='녹화 중... '+Math.round(elapsed/dur*100)+'%';
 
+// ★ 오프스크린 캔버스에 완전히 렌더링 ★
 offCtx.fillStyle='#000';
 offCtx.fillRect(0,0,exportW,exportH);
 
-var vc=getClipAt(t,'visual');
+var vc=getClipAt(elapsed,'visual');
 if(vc){{
 var el=S.els[vc.mid];
 if(el){{
+// 비디오 시간 동기화 (차이가 크면 보정)
 if(vc.type==='video'){{
-var clipT=t-vc.start+vc.ts;
-if(lastClipId!==vc.id){{
-el.currentTime=clipT;
-el.play().catch(function(){{}});
-lastClipId=vc.id;
-lastVideoEl=el;
-}}
-if(lastVideoEl&&lastVideoEl!==el&&!lastVideoEl.paused){{
-lastVideoEl.pause();
+var targetT=elapsed-vc.start+vc.ts;
+if(Math.abs(el.currentTime-targetT)>0.5){{
+el.currentTime=targetT;
 }}
-lastVideoEl=el;
 }}
 
 try{{
 var sw=el.videoWidth||el.naturalWidth||el.width||exportW;
 var sh=el.videoHeight||el.naturalHeight||el.height||exportH;
 
-// 블러 모드: 프레임을 먼저 캡처
 if(fillMode==='blur'){{
-frameCanvas.width=sw;frameCanvas.height=sh;
+// ★ 블러: 오프스크린에서 완전히 처리 후 메인에 복사 ★
+frameCanvas.width=sw;
+frameCanvas.height=sh;
 frameCtx.drawImage(el,0,0,sw,sh);
-drawBlurFromFrame(offCtx,frameCanvas,sw,sh,exportW,exportH);
+blurCtx.drawImage(frameCanvas,0,0,16,16);
+
+offCtx.imageSmoothingEnabled=true;
+offCtx.imageSmoothingQuality='high';
+var scale=Math.max(exportW/sw,exportH/sh)*1.1;
+var nw=sw*scale,nh=sh*scale;
+offCtx.drawImage(blurCanvas,(exportW-nw)/2,(exportH-nh)/2,nw,nh);
+offCtx.fillStyle='rgba(0,0,0,0.4)';
+offCtx.fillRect(0,0,exportW,exportH);
+var fitScale=Math.min(exportW/sw,exportH/sh);
+var fw=sw*fitScale,fh=sh*fitScale;
+offCtx.drawImage(frameCanvas,(exportW-fw)/2,(exportH-fh)/2,fw,fh);
+}}else if(fillMode==='fill'){{
+var scale=Math.max(exportW/sw,exportH/sh);
+var nw=sw*scale,nh=sh*scale;
+offCtx.drawImage(el,(exportW-nw)/2,(exportH-nh)/2,nw,nh);
 }}else{{
-drawWithModeExport(offCtx,el,sw,sh,exportW,exportH,fillMode);
-}}
-}}catch(e){{}}
+// fit
+var scale=Math.min(exportW/sw,exportH/sh);
+var nw=sw*scale,nh=sh*scale;
+offCtx.drawImage(el,(exportW-nw)/2,(exportH-nh)/2,nw,nh);
 }}
-}}else{{
-if(lastVideoEl&&!lastVideoEl.paused){{
-lastVideoEl.pause();
-lastClipId=null;
+}}catch(e){{console.error('Draw error:',e)}}
 }}
 }}
 
-// 텍스트 오버레이 렌더링
-var textClips=getTextClipsAt(t);
+// 텍스트 오버레이 렌더링 (오프스크린에)
+var textClips=getTextClipsAt(elapsed);
 textClips.forEach(function(tc){{
 drawTextExport(offCtx,tc,exportW,exportH);
 }});
 
-ctx.drawImage(offCanvas,0,0);
+// ★ 오프스크린 → 메인 캔버스로 한번에 복사 (atomic) ★
+mainCtx.drawImage(offCanvas,0,0);
+
 requestAnimationFrame(render);
 }}
-
 requestAnimationFrame(render);
 }});
 
+// 정리
 Object.keys(S.els).forEach(function(k){{
 var el=S.els[k];
 if(el&&el.pause)el.pause();
@@ -1175,48 +1203,6 @@ downloadDiv.appendChild(copyBtn);
 document.querySelector('.modal-box').appendChild(downloadDiv);
 }}
 
-// 내보내기용 그리기 함수 (블러 효과 포함)
-function drawWithModeExport(ctx,el,sw,sh,dw,dh,mode){{
-if(mode==='fill'){{
-var scale=Math.max(dw/sw,dh/sh);
-var nw=sw*scale,nh=sh*scale;
-var ox=(dw-nw)/2,oy=(dh-nh)/2;
-ctx.drawImage(el,ox,oy,nw,nh);
-}}else{{
-var scale=Math.min(dw/sw,dh/sh);
-var nw=sw*scale,nh=sh*scale;
-var ox=(dw-nw)/2,oy=(dh-nh)/2;
-ctx.drawImage(el,ox,oy,nw,nh);
-}}
-}}
-
-// 블러 전용 - 캡처된 프레임으로 처리
-function drawBlurFromFrame(ctx,frameCanvas,sw,sh,dw,dh){{
-// 1. 작은 캔버스로 축소 (블러 효과)
-var blurCanvas=document.createElement('canvas');
-blurCanvas.width=16;blurCanvas.height=16;
-var blurCtx=blurCanvas.getContext('2d');
-blurCtx.drawImage(frameCanvas,0,0,16,16);
-
-// 2. 배경에 확대해서 그림
-ctx.imageSmoothingEnabled=true;
-ctx.imageSmoothingQuality='high';
-var scale=Math.max(dw/sw,dh/sh)*1.1;
-var nw=sw*scale,nh=sh*scale;
-var ox=(dw-nw)/2,oy=(dh-nh)/2;
-ctx.drawImage(blurCanvas,ox,oy,nw,nh);
-
-// 3. 어둡게
-ctx.fillStyle='rgba(0,0,0,0.4)';
-ctx.fillRect(0,0,dw,dh);
-
-// 4. 원본 (캡처된 프레임 사용)
-var fitScale=Math.min(dw/sw,dh/sh);
-var fw=sw*fitScale,fh=sh*fitScale;
-var fx=(dw-fw)/2,fy=(dh-fh)/2;
-ctx.drawImage(frameCanvas,fx,fy,fw,fh);
-}}
-
 // 내보내기용 텍스트 렌더링
 function drawTextExport(ctx,clip,dw,dh){{
 var text=clip.text;
@@ -1450,7 +1436,7 @@ def convert_webm_to_mp4(webm_base64):
         return None
 
 with gr.Blocks() as demo:
-    gr.Markdown("## 🎬 Video Editor")
+    gr.Markdown("## 🎬 Video Editor (블러 수정)")
     
     f = gr.File(label="📁 파일 업로드", file_count="multiple", file_types=["video", "image", "audio"])
     e = gr.HTML(value=make_iframe([]))