Spaces:

Heartsync
/

studio

Running on Zero

App Files Files Community

seawolf2357 commited on Dec 10, 2025

Commit

12b1424

verified ·

1 Parent(s): 3246982

Update app.py

Browse files

Files changed (1) hide show

app.py +193 -103

app.py CHANGED Viewed

@@ -1,6 +1,7 @@
 """
 Simple Video Editor - Canvas 기반 렌더링
-블러 배경 내보내기 수정: 프레임 기반 동기식 렌더링
 """
 import gradio as gr
@@ -12,8 +13,9 @@ import tempfile
 import shutil
 import time
 UPLOAD_DIR = tempfile.mkdtemp()
-uploaded_files = {}
 def get_editor_html(media_data="[]"):
     return f'''<!DOCTYPE html>
@@ -269,6 +271,7 @@ drawPlaceholder();
 setupCanvasDrag();
 }}
 function setupCanvasDrag(){{
 var canvas=S.canvas;
 var dragging=null;
@@ -281,6 +284,7 @@ var scaleY=canvas.height/rect.height;
 var mx=(e.clientX-rect.left)*scaleX;
 var my=(e.clientY-rect.top)*scaleY;
 var textClips=getTextClipsAt(S.time);
 for(var i=textClips.length-1;i>=0;i--){{
 var tc=textClips[i];
@@ -313,6 +317,7 @@ dragging.posX=Math.max(0.1,Math.min(0.9,(mx-dragOffsetX)/size.pw));
 dragging.posY=Math.max(0.1,Math.min(0.9,(my-dragOffsetY)/size.ph));
 drawFrame();
 }}else{{
 var textClips=getTextClipsAt(S.time);
 var onText=false;
 for(var i=0;i<textClips.length;i++){{
@@ -544,6 +549,7 @@ save();
 var c=S.clips.find(function(x){{return x.id===cid}});
 if(c){{
 c.start=r(Math.max(0,t-ox/(S.pps*S.zoom)));
 if(c.type==='text'){{
 c.track=2;
 }}else if(c.type==='audio'){{
@@ -601,6 +607,7 @@ if(!c){{box.innerHTML='<div class="no-sel">클립 선택</div>';return}}
 var len=r(c.te-c.ts);
 if(c.type==='text'){{
 box.innerHTML='<div class="prop-group"><div class="prop-label">텍스트</div><input class="prop-input" value="'+c.text+'" onchange="setProp(\\'text\\',this.value)"></div>'+
 '<div class="prop-group"><div class="prop-label">시작</div><input class="prop-input" type="number" step="0.1" value="'+c.start+'" onchange="setProp(\\'start\\',parseFloat(this.value))"></div>'+
 '<div class="prop-group"><div class="prop-label">길이: '+fmt(len)+'</div></div>'+
@@ -621,6 +628,7 @@ box.innerHTML='<div class="prop-group"><div class="prop-label">텍스트</div><i
 '</select></div>'+
 '<div class="prop-group"><div class="prop-label">배경 색상</div><input class="prop-input" type="color" value="'+c.bgColor+'" onchange="setProp(\\'bgColor\\',this.value)"></div>';
 }}else{{
 box.innerHTML='<div class="prop-group"><div class="prop-label">이름</div><input class="prop-input" value="'+c.name+'" onchange="setProp(\\'name\\',this.value)"></div>'+
 '<div class="prop-group"><div class="prop-label">시작</div><input class="prop-input" type="number" step="0.1" value="'+c.start+'" onchange="setProp(\\'start\\',parseFloat(this.value))"></div>'+
 '<div class="prop-group"><div class="prop-label">길이: '+fmt(len)+'</div></div>'+
@@ -776,7 +784,6 @@ S.ctx.font='14px sans-serif';
 S.ctx.textAlign='center';
 S.ctx.fillText('타임라인에 미디어를 추가하세요',pw/2,ph/2);
 }}
 var audioClips=S.clips.filter(function(c){{
 if(c.type!=='audio')return false;
 var cEnd=c.start+(c.te-c.ts);
@@ -810,6 +817,7 @@ S.ctx.fillText('재생 위치에 미디어가 없습니다',pw/2,ph/2);
 }}
 }}
 var textClips=getTextClipsAt(t);
 textClips.forEach(function(tc){{
 drawText(S.ctx,tc,pw,ph);
@@ -818,21 +826,25 @@ drawText(S.ctx,tc,pw,ph);
 function drawWithMode(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 if(mode==='blur'){{
 var frameCanvas=document.createElement('canvas');
 frameCanvas.width=sw;frameCanvas.height=sh;
 var frameCtx=frameCanvas.getContext('2d');
 frameCtx.drawImage(el,0,0,sw,sh);
 var blurCanvas=document.createElement('canvas');
 blurCanvas.width=16;blurCanvas.height=16;
 var blurCtx=blurCanvas.getContext('2d');
 blurCtx.drawImage(frameCanvas,0,0,16,16);
 ctx.imageSmoothingEnabled=true;
 ctx.imageSmoothingQuality='high';
 var scale=Math.max(dw/sw,dh/sh)*1.1;
@@ -840,14 +852,17 @@ var nw=sw*scale,nh=sh*scale;
 var ox=(dw-nw)/2,oy=(dh-nh)/2;
 ctx.drawImage(blurCanvas,ox,oy,nw,nh);
 ctx.fillStyle='rgba(0,0,0,0.4)';
 ctx.fillRect(0,0,dw,dh);
 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);
 }}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;
@@ -857,6 +872,7 @@ ctx.drawImage(el,ox,oy,nw,nh);
 function toggleMute(){{S.muted=!S.muted;document.getElementById('muteBtn').textContent=S.muted?'🔇':'🔊'}}
 function addTextClip(){{
 document.getElementById('textModal').style.display='flex';
 document.getElementById('textInput').value='';
@@ -890,8 +906,8 @@ fontSize:parseInt(document.getElementById('textSize').value),
 fontColor:document.getElementById('textColor').value,
 bgStyle:document.getElementById('textBgStyle').value,
 bgColor:document.getElementById('textBgColor').value,
-posX:0.5,
-posY:0.85
 }});
 closeTextModal();
 renderTL();
@@ -927,6 +943,7 @@ var textH=fontSize;
 var x=dw*posX;
 var y=dh*posY;
 clip._bounds={{
 x:x-textW/2-fontSize*0.3,
 y:y-textH/2-fontSize*0.15,
@@ -951,12 +968,15 @@ ctx.fillRect(bgX,bgY,bgW,bgH);
 }}
 }}
 ctx.fillStyle='rgba(0,0,0,0.5)';
 ctx.fillText(text,x+2,y+2);
 ctx.fillStyle=fontColor;
 ctx.fillText(text,x,y);
 if(S.sel===clip.id){{
 ctx.strokeStyle='#6366f1';
 ctx.lineWidth=2;
@@ -965,7 +985,6 @@ ctx.strokeRect(clip._bounds.x,clip._bounds.y,clip._bounds.w,clip._bounds.h);
 ctx.setLineDash([]);
 }}
 }}
 function setZoom(v){{S.zoom=parseFloat(v);renderTL();updateHead()}}
 function tlClick(e){{
 if(e.target.closest('.clip'))return;
@@ -990,54 +1009,29 @@ doExport();
 }}
 // ============================================
-// 핵심 수정: 프레임 기반 동기식 렌더링
 // ============================================
-function sleep(ms){{
-return new Promise(function(resolve){{setTimeout(resolve,ms)}});
-}}
-function seekVideoAndWait(video,targetTime){{
-return new Promise(function(resolve){{
-if(Math.abs(video.currentTime-targetTime)<0.02){{
-resolve();
-return;
-}}
-var resolved=false;
-function onSeeked(){{
-if(resolved)return;
-resolved=true;
-video.removeEventListener('seeked',onSeeked);
-resolve();
-}}
-video.addEventListener('seeked',onSeeked);
-video.currentTime=targetTime;
-// 타임아웃 (시킹이 오래 걸릴 경우 대비)
-setTimeout(function(){{
-if(!resolved){{
-resolved=true;
-video.removeEventListener('seeked',onSeeked);
-resolve();
-}}
-}},300);
-}});
-}}
 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');
 // 초기 검은 화면
-ctx.fillStyle='#000';
-ctx.fillRect(0,0,exportW,exportH);
-var stream=canvas.captureStream(30);
 var opts={{mimeType:'video/webm;codecs=vp9',videoBitsPerSecond:8000000}};
 if(!MediaRecorder.isTypeSupported(opts.mimeType)){{
 opts={{mimeType:'video/webm;codecs=vp8',videoBitsPerSecond:8000000}};
@@ -1054,16 +1048,8 @@ document.getElementById('exportMsg').textContent='녹화 중... ('+S.ratio+')';
 rec.start(100);
 var dur=S.dur;
-var fps=30;
-var totalFrames=Math.ceil(dur*fps);
 var fillMode=S.fillMode;
-// 모든 비디오 일시정지
-Object.keys(S.els).forEach(function(k){{
-var el=S.els[k];
-if(el&&el.pause)el.pause();
-}});
 // 블러용 캔버스 (재사용)
 var frameCanvas=document.createElement('canvas');
 var frameCtx=frameCanvas.getContext('2d');
@@ -1071,30 +1057,56 @@ var blurCanvas=document.createElement('canvas');
 blurCanvas.width=16;blurCanvas.height=16;
 var blurCtx=blurCanvas.getContext('2d');
-// ★ 프레임 단위 순차 렌더링 ★
-for(var frame=0;frame<=totalFrames;frame++){{
-if(S.cancelled)break;
-var t=frame/fps;
 // 진행률 업데이트
-var pct=Math.round(frame/totalFrames*100);
-document.getElementById('exportBar').style.width=pct+'%';
-document.getElementById('exportMsg').textContent='녹화 중... '+pct+'% ('+t.toFixed(1)+'/'+dur.toFixed(1)+'초)';
-// 검은 배경
-ctx.fillStyle='#000';
-ctx.fillRect(0,0,exportW,exportH);
-// 현재 시간의 비주얼 클립 가져오기
-var vc=getClipAt(t,'visual');
 if(vc){{
 var el=S.els[vc.mid];
 if(el){{
-// 비디오인 경우 시킹 후 대기
 if(vc.type==='video'){{
-var clipT=t-vc.start+vc.ts;
-await seekVideoAndWait(el,clipT);
 }}
 try{{
@@ -1102,62 +1114,51 @@ 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;
 frameCtx.drawImage(el,0,0,sw,sh);
-// 블러용 축소
 blurCtx.drawImage(frameCanvas,0,0,16,16);
-// 배경 (블러된 이미지 확대)
-ctx.imageSmoothingEnabled=true;
-ctx.imageSmoothingQuality='high';
 var scale=Math.max(exportW/sw,exportH/sh)*1.1;
 var nw=sw*scale,nh=sh*scale;
-var ox=(exportW-nw)/2,oy=(exportH-nh)/2;
-ctx.drawImage(blurCanvas,ox,oy,nw,nh);
-// 어둡게
-ctx.fillStyle='rgba(0,0,0,0.4)';
-ctx.fillRect(0,0,exportW,exportH);
-// 원본 (캡처된 프레임)
 var fitScale=Math.min(exportW/sw,exportH/sh);
 var fw=sw*fitScale,fh=sh*fitScale;
-var fx=(exportW-fw)/2,fy=(exportH-fh)/2;
-ctx.drawImage(frameCanvas,fx,fy,fw,fh);
 }}else if(fillMode==='fill'){{
 var scale=Math.max(exportW/sw,exportH/sh);
 var nw=sw*scale,nh=sh*scale;
-var ox=(exportW-nw)/2,oy=(exportH-nh)/2;
-ctx.drawImage(el,ox,oy,nw,nh);
 }}else{{
 // fit
 var scale=Math.min(exportW/sw,exportH/sh);
 var nw=sw*scale,nh=sh*scale;
-var ox=(exportW-nw)/2,oy=(exportH-nh)/2;
-ctx.drawImage(el,ox,oy,nw,nh);
 }}
 }}catch(e){{console.error('Draw error:',e)}}
 }}
 }}
-// 텍스트 오버레이 렌더링
-var textClips=getTextClipsAt(t);
 textClips.forEach(function(tc){{
-drawTextExport(ctx,tc,exportW,exportH);
 }});
-// ★ 프레임 간격 대기 - MediaRecorder가 프레임 캡처할 시간 ★
-await sleep(1000/fps);
-}}
-// 녹화 종료
-rec.stop();
-await sleep(300);
-// 모든 미디어 정지
 Object.keys(S.els).forEach(function(k){{
 var el=S.els[k];
 if(el&&el.pause)el.pause();
@@ -1166,10 +1167,7 @@ if(el&&el.pause)el.pause();
 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/1024*10)/10+'MB, '+S.ratio+') - 아래에서 다운로드';
@@ -1269,6 +1267,7 @@ if(initData&&initData.length)initData.forEach(function(m){{addMedia(m.name,m.typ
 </html>'''
 def process_file(files):
     global uploaded_files
     if not files:
         return []
@@ -1289,6 +1288,7 @@ def process_file(files):
         else:
             continue
         dst_path = os.path.join(UPLOAD_DIR, f"{int(time.time()*1000)}_{name}")
         shutil.copy(path, dst_path)
         uploaded_files[name] = dst_path
@@ -1303,20 +1303,109 @@ def make_iframe(data):
     h = get_editor_html(j).replace("'", "&#39;")
     return f"<iframe srcdoc='{h}' style='width:100%;height:750px;border:none;border-radius:10px'></iframe>"
 def convert_webm_to_mp4(webm_base64):
     if not webm_base64 or len(webm_base64) < 100:
         return None
     try:
         webm_data = base64.b64decode(webm_base64)
         temp_dir = tempfile.mkdtemp()
         webm_path = os.path.join(temp_dir, 'input.webm')
         mp4_path = os.path.join(temp_dir, f'output_{int(time.time())}.mp4')
         with open(webm_path, 'wb') as f:
             f.write(webm_data)
         cmd = [
             'ffmpeg', '-y',
             '-i', webm_path,
@@ -1329,8 +1418,9 @@ def convert_webm_to_mp4(webm_base64):
             mp4_path
         ]
-        subprocess.run(cmd, capture_output=True, text=True, timeout=300)
         try:
             os.remove(webm_path)
         except:

 """
 Simple Video Editor - Canvas 기반 렌더링
+빈 프레임 문제 완전 해결 + 서버 사이드 MP4 내보내기
+블러 배경 내보내기 수정: 더블 버퍼링
 """
 import gradio as gr
 import shutil
 import time
+# 서버 사이드 MP4 내보내기용
 UPLOAD_DIR = tempfile.mkdtemp()
+uploaded_files = {}  # {filename: filepath}
 def get_editor_html(media_data="[]"):
     return f'''<!DOCTYPE html>
 setupCanvasDrag();
 }}
+// 캔버스에서 텍스트 드래그 설정
 function setupCanvasDrag(){{
 var canvas=S.canvas;
 var dragging=null;
 var mx=(e.clientX-rect.left)*scaleX;
 var my=(e.clientY-rect.top)*scaleY;
+// 현재 시간의 텍스트 클립 중 클릭된 것 찾기
 var textClips=getTextClipsAt(S.time);
 for(var i=textClips.length-1;i>=0;i--){{
 var tc=textClips[i];
 dragging.posY=Math.max(0.1,Math.min(0.9,(my-dragOffsetY)/size.ph));
 drawFrame();
 }}else{{
+// 호버 커서 변경
 var textClips=getTextClipsAt(S.time);
 var onText=false;
 for(var i=0;i<textClips.length;i++){{
 var c=S.clips.find(function(x){{return x.id===cid}});
 if(c){{
 c.start=r(Math.max(0,t-ox/(S.pps*S.zoom)));
+// 텍스트는 텍스트 트랙으로만, 그 외는 영상/오디오 트랙으로
 if(c.type==='text'){{
 c.track=2;
 }}else if(c.type==='audio'){{
 var len=r(c.te-c.ts);
 if(c.type==='text'){{
+// 텍스트 클립 속성
 box.innerHTML='<div class="prop-group"><div class="prop-label">텍스트</div><input class="prop-input" value="'+c.text+'" onchange="setProp(\\'text\\',this.value)"></div>'+
 '<div class="prop-group"><div class="prop-label">시작</div><input class="prop-input" type="number" step="0.1" value="'+c.start+'" onchange="setProp(\\'start\\',parseFloat(this.value))"></div>'+
 '<div class="prop-group"><div class="prop-label">길이: '+fmt(len)+'</div></div>'+
 '</select></div>'+
 '<div class="prop-group"><div class="prop-label">배경 색상</div><input class="prop-input" type="color" value="'+c.bgColor+'" onchange="setProp(\\'bgColor\\',this.value)"></div>';
 }}else{{
+// 기존 미디어 클립 속성
 box.innerHTML='<div class="prop-group"><div class="prop-label">이름</div><input class="prop-input" value="'+c.name+'" onchange="setProp(\\'name\\',this.value)"></div>'+
 '<div class="prop-group"><div class="prop-label">시작</div><input class="prop-input" type="number" step="0.1" value="'+c.start+'" onchange="setProp(\\'start\\',parseFloat(this.value))"></div>'+
 '<div class="prop-group"><div class="prop-label">길이: '+fmt(len)+'</div></div>'+
 S.ctx.textAlign='center';
 S.ctx.fillText('타임라인에 미디어를 추가하세요',pw/2,ph/2);
 }}
 var audioClips=S.clips.filter(function(c){{
 if(c.type!=='audio')return false;
 var cEnd=c.start+(c.te-c.ts);
 }}
 }}
+// 텍스트 오버레이 렌더링
 var textClips=getTextClipsAt(t);
 textClips.forEach(function(tc){{
 drawText(S.ctx,tc,pw,ph);
 function drawWithMode(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 if(mode==='blur'){{
+// 프레임 먼저 캡처
 var frameCanvas=document.createElement('canvas');
 frameCanvas.width=sw;frameCanvas.height=sh;
 var frameCtx=frameCanvas.getContext('2d');
 frameCtx.drawImage(el,0,0,sw,sh);
+// 블러용 작은 캔버스
 var blurCanvas=document.createElement('canvas');
 blurCanvas.width=16;blurCanvas.height=16;
 var blurCtx=blurCanvas.getContext('2d');
 blurCtx.drawImage(frameCanvas,0,0,16,16);
+// 배경
 ctx.imageSmoothingEnabled=true;
 ctx.imageSmoothingQuality='high';
 var scale=Math.max(dw/sw,dh/sh)*1.1;
 var ox=(dw-nw)/2,oy=(dh-nh)/2;
 ctx.drawImage(blurCanvas,ox,oy,nw,nh);
+// 어둡게
 ctx.fillStyle='rgba(0,0,0,0.4)';
 ctx.fillRect(0,0,dw,dh);
+// 원본 (캡처된 프레임)
 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);
 }}else{{
+// 맞춤 (fit): 원본 비율 유지, 여백
 var scale=Math.min(dw/sw,dh/sh);
 var nw=sw*scale,nh=sh*scale;
 var ox=(dw-nw)/2,oy=(dh-nh)/2;
 function toggleMute(){{S.muted=!S.muted;document.getElementById('muteBtn').textContent=S.muted?'🔇':'🔊'}}
+// 텍스트 클립 관련 함수들
 function addTextClip(){{
 document.getElementById('textModal').style.display='flex';
 document.getElementById('textInput').value='';
 fontColor:document.getElementById('textColor').value,
 bgStyle:document.getElementById('textBgStyle').value,
 bgColor:document.getElementById('textBgColor').value,
+posX:0.5,  // 0~1 비율 (가운데)
+posY:0.85  // 0~1 비율 (하단)
 }});
 closeTextModal();
 renderTL();
 var x=dw*posX;
 var y=dh*posY;
+// 텍스트 영역 저장 (클릭 감지용)
 clip._bounds={{
 x:x-textW/2-fontSize*0.3,
 y:y-textH/2-fontSize*0.15,
 }}
 }}
+// 텍스트 그림자
 ctx.fillStyle='rgba(0,0,0,0.5)';
 ctx.fillText(text,x+2,y+2);
+// 텍스트
 ctx.fillStyle=fontColor;
 ctx.fillText(text,x,y);
+// 선택된 텍스트면 테두리 표시
 if(S.sel===clip.id){{
 ctx.strokeStyle='#6366f1';
 ctx.lineWidth=2;
 ctx.setLineDash([]);
 }}
 }}
 function setZoom(v){{S.zoom=parseFloat(v);renderTL();updateHead()}}
 function tlClick(e){{
 if(e.target.closest('.clip'))return;
 }}
 // ============================================
+// 핵심 수정: 더블 버퍼링으로 블러 번쩍임 방지
 // ============================================
 async function doExport(){{
 var size=S.ratioSizes[S.ratio];
 var exportW=size.w,exportH=size.h;
+// ★ 메인 캔버스 (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');
 // 초기 검은 화면
+mainCtx.fillStyle='#000';
+mainCtx.fillRect(0,0,exportW,exportH);
+var stream=mainCanvas.captureStream(30);
+// 고화질 설정
 var opts={{mimeType:'video/webm;codecs=vp9',videoBitsPerSecond:8000000}};
 if(!MediaRecorder.isTypeSupported(opts.mimeType)){{
 opts={{mimeType:'video/webm;codecs=vp8',videoBitsPerSecond:8000000}};
 rec.start(100);
 var dur=S.dur;
 var fillMode=S.fillMode;
 // 블러용 캔버스 (재사용)
 var frameCanvas=document.createElement('canvas');
 var frameCtx=frameCanvas.getContext('2d');
 blurCanvas.width=16;blurCanvas.height=16;
 var blurCtx=blurCanvas.getContext('2d');
+// 모든 비디오를 처음으로 되돌리고 재생
+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)/1000;
+if(elapsed>=dur){{
+rec.stop();
+setTimeout(resolve,200);
+return;
+}}
 // 진행률 업데이트
+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(elapsed,'visual');
 if(vc){{
 var el=S.els[vc.mid];
 if(el){{
+// 비디오 시간 동기화 (차이가 크면 보정)
 if(vc.type==='video'){{
+var targetT=elapsed-vc.start+vc.ts;
+if(Math.abs(el.currentTime-targetT)>0.5){{
+el.currentTime=targetT;
+}}
 }}
 try{{
 var sh=el.videoHeight||el.naturalHeight||el.height||exportH;
 if(fillMode==='blur'){{
+// ★ 블러: 오프스크린에서 완전히 처리 후 메인에 복사 ★
 frameCanvas.width=sw;
 frameCanvas.height=sh;
 frameCtx.drawImage(el,0,0,sw,sh);
 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{{
 // 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);
 }}
 }}catch(e){{console.error('Draw error:',e)}}
 }}
 }}
+// 텍스트 오버레이 렌더링 (오프스크린에)
+var textClips=getTextClipsAt(elapsed);
 textClips.forEach(function(tc){{
+drawTextExport(offCtx,tc,exportW,exportH);
 }});
+// ★ 오프스크린 → 메인 캔버스로 한번에 복사 (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();
 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/1024*10)/10+'MB, '+S.ratio+') - 아래에서 다운로드';
 </html>'''
 def process_file(files):
+    """파일 처리 및 서버에 저장"""
     global uploaded_files
     if not files:
         return []
         else:
             continue
+        # 서버에 파일 복사 (MP4 내보내기용)
         dst_path = os.path.join(UPLOAD_DIR, f"{int(time.time()*1000)}_{name}")
         shutil.copy(path, dst_path)
         uploaded_files[name] = dst_path
     h = get_editor_html(j).replace("'", "&#39;")
     return f"<iframe srcdoc='{h}' style='width:100%;height:750px;border:none;border-radius:10px'></iframe>"
+def export_mp4(export_json):
+    """서버 사이드 MP4 내보내기"""
+    global uploaded_files
+    if not export_json or len(export_json) < 10:
+        return None
+    try:
+        data = json.loads(export_json)
+        clips = data.get('clips', [])
+        if not clips:
+            return None
+        video_clips = [c for c in clips if c['type'] in ['video', 'image']]
+        if not video_clips:
+            return None
+        temp_dir = tempfile.mkdtemp()
+        output_path = os.path.join(temp_dir, f'output_{int(time.time())}.mp4')
+        # 단일 클립
+        if len(video_clips) == 1:
+            clip = video_clips[0]
+            file_path = uploaded_files.get(clip['filePath'])
+            if not file_path or not os.path.exists(file_path):
+                return None
+            duration = clip['te'] - clip['ts']
+            if clip['type'] == 'image':
+                cmd = ['ffmpeg', '-y', '-loop', '1', '-i', file_path, '-c:v', 'libx264', '-t', str(duration), '-pix_fmt', 'yuv420p', '-vf', 'scale=1280:720:force_original_aspect_ratio=decrease,pad=1280:720:(ow-iw)/2:(oh-ih)/2', output_path]
+            else:
+                cmd = ['ffmpeg', '-y', '-i', file_path, '-ss', str(clip['ts']), '-t', str(duration), '-c:v', 'libx264', '-preset', 'fast', '-crf', '23', '-c:a', 'aac', '-b:a', '128k', '-vf', 'scale=1280:720:force_original_aspect_ratio=decrease,pad=1280:720:(ow-iw)/2:(oh-ih)/2', '-movflags', '+faststart', output_path]
+            subprocess.run(cmd, capture_output=True, timeout=300)
+            if os.path.exists(output_path) and os.path.getsize(output_path) > 0:
+                return output_path
+            return None
+        # 여러 클립
+        temp_files = []
+        concat_file = os.path.join(temp_dir, 'concat.txt')
+        for i, clip in enumerate(sorted(video_clips, key=lambda x: x['start'])):
+            file_path = uploaded_files.get(clip['filePath'])
+            if not file_path or not os.path.exists(file_path):
+                continue
+            temp_out = os.path.join(temp_dir, f'temp_{i}.mp4')
+            duration = clip['te'] - clip['ts']
+            if clip['type'] == 'image':
+                cmd = ['ffmpeg', '-y', '-loop', '1', '-i', file_path, '-c:v', 'libx264', '-t', str(duration), '-pix_fmt', 'yuv420p', '-r', '30', '-vf', 'scale=1280:720:force_original_aspect_ratio=decrease,pad=1280:720:(ow-iw)/2:(oh-ih)/2', temp_out]
+            else:
+                cmd = ['ffmpeg', '-y', '-i', file_path, '-ss', str(clip['ts']), '-t', str(duration), '-c:v', 'libx264', '-preset', 'fast', '-c:a', 'aac', '-r', '30', '-vf', 'scale=1280:720:force_original_aspect_ratio=decrease,pad=1280:720:(ow-iw)/2:(oh-ih)/2', temp_out]
+            subprocess.run(cmd, capture_output=True, timeout=120)
+            if os.path.exists(temp_out):
+                temp_files.append(temp_out)
+        if not temp_files:
+            return None
+        with open(concat_file, 'w') as f:
+            for tf in temp_files:
+                f.write(f"file '{tf}'\n")
+        cmd = ['ffmpeg', '-y', '-f', 'concat', '-safe', '0', '-i', concat_file, '-c:v', 'libx264', '-preset', 'fast', '-c:a', 'aac', '-movflags', '+faststart', output_path]
+        subprocess.run(cmd, capture_output=True, timeout=300)
+        for tf in temp_files:
+            try: os.remove(tf)
+            except: pass
+        if os.path.exists(output_path) and os.path.getsize(output_path) > 0:
+            return output_path
+        return None
+    except Exception as e:
+        print(f"[Export] Error: {e}")
+        return None
 def convert_webm_to_mp4(webm_base64):
+    """WebM base64 데이터를 MP4로 변환"""
     if not webm_base64 or len(webm_base64) < 100:
         return None
     try:
+        # base64 디코딩
         webm_data = base64.b64decode(webm_base64)
         temp_dir = tempfile.mkdtemp()
         webm_path = os.path.join(temp_dir, 'input.webm')
         mp4_path = os.path.join(temp_dir, f'output_{int(time.time())}.mp4')
+        # WebM 파일 저장
         with open(webm_path, 'wb') as f:
             f.write(webm_data)
+        # FFmpeg로 MP4 변환
         cmd = [
             'ffmpeg', '-y',
             '-i', webm_path,
             mp4_path
         ]
+        result = subprocess.run(cmd, capture_output=True, text=True, timeout=300)
+        # WebM 파일 삭제
         try:
             os.remove(webm_path)
         except: