Spaces:

Heartsync
/

studio

Running on Zero

App Files Files Community

seawolf2357 commited on Dec 10, 2025

Commit

5fefdc5

verified ·

1 Parent(s): 3156662

Create app.py

Browse files

Files changed (1) hide show

app.py +1109 -0

app.py ADDED Viewed

	@@ -0,0 +1,1109 @@

+"""
+Simple Video Editor - Canvas 기반 렌더링
+빈 프레임 문제 완전 해결 + 서버 사이드 MP4 내보내기
+"""
+import gradio as gr
+import base64
+import os
+import json
+import subprocess
+import tempfile
+import shutil
+import time
+# 서버 사이드 MP4 내보내기용
+UPLOAD_DIR = tempfile.mkdtemp()
+uploaded_files = {}  # {filename: filepath}
+def get_editor_html(media_data="[]"):
+    return f'''<!DOCTYPE html>
+<html lang="ko">
+<head>
+<meta charset="UTF-8">
+<style>
+*{{margin:0;padding:0;box-sizing:border-box}}
+body{{font-family:-apple-system,BlinkMacSystemFont,sans-serif;background:#f5f5f7;font-size:13px}}
+.editor{{display:flex;flex-direction:column;height:100vh}}
+.toolbar{{height:44px;background:#fff;border-bottom:1px solid #ddd;display:flex;align-items:center;justify-content:space-between;padding:0 12px}}
+.toolbar-title{{font-size:15px;font-weight:600}}
+.btn{{padding:5px 10px;border:none;border-radius:5px;cursor:pointer;font-size:11px;font-weight:500}}
+.btn-secondary{{background:#f0f0f0;color:#333}}
+.btn-secondary:hover{{background:#e0e0e0}}
+.btn-success{{background:#10b981;color:#fff}}
+.btn-danger{{background:#ef4444;color:#fff}}
+.main{{display:flex;flex:1;overflow:hidden}}
+.library{{width:160px;background:#fff;border-right:1px solid #ddd;display:flex;flex-direction:column}}
+.lib-header{{padding:8px;border-bottom:1px solid #eee;font-size:10px;font-weight:600;color:#666}}
+.lib-content{{flex:1;overflow-y:auto;padding:6px}}
+.lib-hint{{text-align:center;padding:15px;color:#999;font-size:10px}}
+.media-grid{{display:grid;grid-template-columns:repeat(2,1fr);gap:4px}}
+.media-item{{aspect-ratio:16/9;background:#f0f0f0;border-radius:4px;overflow:hidden;cursor:grab;position:relative;border:1px solid #e0e0e0}}
+.media-item:hover{{border-color:#6366f1}}
+.media-item img{{width:100%;height:100%;object-fit:cover}}
+.media-item-icon{{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:18px}}
+.media-item-dur{{position:absolute;top:2px;right:2px;background:rgba(0,0,0,0.7);padding:1px 3px;border-radius:2px;font-size:8px;color:#fff}}
+.preview-area{{flex:1;display:flex;flex-direction:column;background:#1a1a1a;margin:6px;border-radius:8px;overflow:hidden}}
+.preview-box{{flex:1;display:flex;align-items:center;justify-content:center;background:#000;overflow:hidden}}
+#previewCanvas{{background:#000;box-shadow:0 0 20px rgba(0,0,0,0.5)}}
+.controls{{height:45px;background:#222;display:flex;align-items:center;justify-content:center;gap:6px}}
+.ctrl-btn{{width:28px;height:28px;border:none;border-radius:50%;background:rgba(255,255,255,0.1);color:#fff;cursor:pointer;font-size:12px}}
+.ctrl-btn:hover{{background:rgba(255,255,255,0.2)}}
+.ctrl-btn.play{{width:36px;height:36px;background:#6366f1}}
+.time-display{{font-family:monospace;font-size:10px;color:#aaa;min-width:90px;text-align:center}}
+.props{{width:140px;background:#fff;border-left:1px solid #ddd}}
+.props-header{{padding:8px;border-bottom:1px solid #eee;font-size:10px;font-weight:600;color:#666}}
+.props-content{{padding:8px}}
+.no-sel{{color:#999;text-align:center;padding:15px;font-size:10px}}
+.prop-group{{margin-bottom:10px}}
+.prop-label{{font-size:9px;color:#666;margin-bottom:2px}}
+.prop-input{{width:100%;padding:4px;border:1px solid #ddd;border-radius:3px;font-size:10px}}
+.timeline{{height:140px;background:#fff;border-top:1px solid #ddd;display:flex;flex-direction:column}}
+.tl-toolbar{{height:28px;background:#fafafa;border-bottom:1px solid #eee;display:flex;align-items:center;padding:0 6px;gap:4px}}
+.tl-toolbar .btn{{padding:2px 6px;font-size:9px}}
+.tl-zoom{{display:flex;align-items:center;gap:3px;margin-left:auto;font-size:9px;color:#666}}
+.tl-zoom input{{width:50px}}
+.tl-container{{flex:1;overflow-x:auto;position:relative}}
+.tl-ruler{{height:18px;background:#fff;border-bottom:1px solid #eee}}
+.tl-tracks{{position:relative}}
+.tl-track{{height:45px;border-bottom:1px solid #eee;display:flex}}
+.tl-track:nth-child(2){{background:#fffbeb}}
+.track-label{{width:50px;padding:0 4px;font-size:8px;color:#666;background:#fafafa;display:flex;align-items:center;border-right:1px solid #eee}}
+.track-content{{flex:1;position:relative;min-width:600px}}
+.clip{{position:absolute;height:36px;top:4px;border-radius:4px;cursor:grab;display:flex;align-items:center;overflow:hidden}}
+.clip:hover{{box-shadow:0 0 0 2px #6366f1}}
+.clip.selected{{box-shadow:0 0 0 2px #6366f1}}
+.clip.video{{background:linear-gradient(135deg,#818cf8,#6366f1)}}
+.clip.image{{background:linear-gradient(135deg,#34d399,#10b981)}}
+.clip.audio{{background:linear-gradient(135deg,#fbbf24,#f59e0b)}}
+.clip-thumb{{width:36px;height:100%;object-fit:cover}}
+.clip-info{{padding:0 4px;flex:1;overflow:hidden}}
+.clip-name{{font-size:8px;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}
+.clip-dur{{font-size:7px;color:rgba(255,255,255,0.7)}}
+.clip-handle{{position:absolute;top:0;bottom:0;width:8px;background:rgba(255,255,255,0.5);cursor:ew-resize;opacity:0}}
+.clip:hover .clip-handle{{opacity:1}}
+.clip-handle-l{{left:0;border-radius:4px 0 0 4px}}
+.clip-handle-r{{right:0;border-radius:0 4px 4px 0}}
+.playhead{{position:absolute;top:0;bottom:0;width:2px;background:#ef4444;z-index:10;pointer-events:none}}
+.playhead::before{{content:"";position:absolute;top:0;left:-4px;border-left:5px solid transparent;border-right:5px solid transparent;border-top:7px solid #ef4444}}
+.drop-zone{{background:rgba(99,102,241,0.1)!important;outline:2px dashed #6366f1!important}}
+.status{{height:20px;background:#f5f5f5;border-top:1px solid #ddd;display:flex;align-items:center;padding:0 8px;font-size:9px;color:#666}}
+.ctx-menu{{position:fixed;background:#fff;border:1px solid #ddd;border-radius:5px;padding:3px 0;min-width:100px;z-index:1000;box-shadow:0 4px 12px rgba(0,0,0,0.15);display:none}}
+.ctx-item{{padding:5px 10px;cursor:pointer;font-size:10px}}
+.ctx-item:hover{{background:#f5f5f5}}
+.ctx-item.danger{{color:#ef4444}}
+.modal{{position:fixed;inset:0;background:rgba(0,0,0,0.5);display:flex;align-items:center;justify-content:center;z-index:1000}}
+.modal-box{{background:#fff;border-radius:8px;padding:16px;min-width:240px;text-align:center}}
+.modal-box h3{{margin-bottom:8px;font-size:13px}}
+.progress{{height:5px;background:#eee;border-radius:3px;overflow:hidden;margin:10px 0}}
+.progress-bar{{height:100%;background:#6366f1;transition:width 0.2s}}
+.hidden-media{{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}}
+</style>
+</head>
+<body>
+<div class="editor">
+<div class="toolbar">
+<div class="toolbar-title">🎬 Video Editor</div>
+<div style="display:flex;gap:8px;align-items:center">
+<select id="ratioSelect" onchange="setRatio(this.value)" style="padding:4px 8px;border-radius:4px;border:1px solid #ddd;font-size:11px">
+<option value="16:9">16:9 (가로)</option>
+<option value="9:16">9:16 (세로)</option>
+<option value="1:1">1:1 (정사각)</option>
+<option value="4:3">4:3</option>
+<option value="4:5">4:5 (인스타)</option>
+</select>
+<select id="fillMode" onchange="setFillMode(this.value)" style="padding:4px 8px;border-radius:4px;border:1px solid #ddd;font-size:11px">
+<option value="fit">맞춤 (여백)</option>
+<option value="fill">채우기 (확대)</option>
+<option value="blur">블러 배경</option>
+</select>
+<button class="btn btn-secondary" onclick="undo()">↩ 실행취소</button>
+<button class="btn btn-success" onclick="exportVideo()">📥 내보내기</button>
+</div>
+</div>
+<div class="main">
+<div class="library">
+<div class="lib-header">📁 미디어</div>
+<div class="lib-content">
+<div class="lib-hint" id="hint">파일을 업로드하세요</div>
+<div class="media-grid" id="mediaGrid"></div>
+</div>
+</div>
+<div class="preview-area">
+<div class="preview-box">
+<canvas id="previewCanvas" width="640" height="360"></canvas>
+</div>
+<div class="controls">
+<button class="ctrl-btn" onclick="seek(0)">⏮</button>
+<button class="ctrl-btn" onclick="seek(S.time-5)">⏪</button>
+<button class="ctrl-btn play" onclick="togglePlay()" id="playBtn">▶</button>
+<button class="ctrl-btn" onclick="seek(S.time+5)">⏩</button>
+<button class="ctrl-btn" onclick="seek(S.dur)">⏭</button>
+<div class="time-display"><span id="curT">00:00.00</span> / <span id="totT">00:00.00</span></div>
+<button class="ctrl-btn" onclick="toggleMute()" id="muteBtn">🔊</button>
+</div>
+</div>
+<div class="props">
+<div class="props-header">⚙️ 속성</div>
+<div class="props-content" id="propsBox"><div class="no-sel">클립 선택</div></div>
+</div>
+</div>
+<div class="timeline">
+<div class="tl-toolbar">
+<button class="btn btn-secondary" onclick="splitClip()">✂ 자르기</button>
+<button class="btn btn-secondary" onclick="dupeClip()">📋 복제</button>
+<button class="btn btn-danger" onclick="delClip()">🗑 삭제</button>
+<div class="tl-zoom">🔍<input type="range" min="0.5" max="3" step="0.1" value="1" oninput="setZoom(this.value)"></div>
+</div>
+<div class="tl-container" id="tlBox" onclick="tlClick(event)">
+<div class="tl-ruler" id="ruler"></div>
+<div class="tl-tracks">
+<div class="tl-track"><div class="track-label">🎬 영상</div><div class="track-content" id="t0"></div></div>
+<div class="tl-track"><div class="track-label">🎵 오디오</div><div class="track-content" id="t1"></div></div>
+</div>
+<div class="playhead" id="playhead" style="left:50px"></div>
+</div>
+</div>
+<div class="status" id="status">준비됨</div>
+</div>
+<div class="ctx-menu" id="ctx">
+<div class="ctx-item" onclick="splitClip()">✂ 자르기</div>
+<div class="ctx-item" onclick="dupeClip()">📋 복제</div>
+<div class="ctx-item danger" onclick="delClip()">🗑 삭제</div>
+</div>
+<div class="modal" id="exportModal" style="display:none">
+<div class="modal-box">
+<h3>🎬 영상 내보내기</h3>
+<p id="exportMsg">준비중...</p>
+<div class="progress"><div class="progress-bar" id="exportBar"></div></div>
+<button class="btn btn-secondary" onclick="cancelExport()">취소</button>
+</div>
+</div>
+<div id="hiddenMedia" class="hidden-media"></div>
+<script>
+var S={{
+media:[],
+clips:[],
+sel:null,
+playing:false,
+muted:false,
+time:0,
+dur:0,
+zoom:1,
+pps:80,
+history:[],
+animId:null,
+cancelled:false,
+els:{{}},
+canvas:null,
+ctx:null,
+lastClipId:null,
+ratio:'16:9',
+fillMode:'fit',
+ratioSizes:{{
+'16:9':{{w:1280,h:720,pw:640,ph:360}},
+'9:16':{{w:720,h:1280,pw:203,ph:360}},
+'1:1':{{w:1080,h:1080,pw:360,ph:360}},
+'4:3':{{w:1280,h:960,pw:480,ph:360}},
+'4:5':{{w:1080,h:1350,pw:288,ph:360}}
+}}
+}};
+function init(){{
+S.canvas=document.getElementById('previewCanvas');
+S.ctx=S.canvas.getContext('2d');
+updateCanvasSize();
+drawPlaceholder();
+}}
+function updateCanvasSize(){{
+var size=S.ratioSizes[S.ratio];
+S.canvas.width=size.pw;
+S.canvas.height=size.ph;
+S.canvas.style.width=size.pw+'px';
+S.canvas.style.height=size.ph+'px';
+}}
+function setRatio(r){{
+S.ratio=r;
+updateCanvasSize();
+drawFrame();
+stat('화면 비율: '+r);
+}}
+function setFillMode(m){{
+S.fillMode=m;
+drawFrame();
+stat('채우기 모드: '+(m==='fit'?'맞춤 (여백)':m==='fill'?'채우기 (확대)':'블러 배경'));
+}}
+function id(){{return Math.random().toString(36).substr(2,9)}}
+function fmt(t){{if(!t||isNaN(t))t=0;var m=Math.floor(t/60),s=Math.floor(t%60),ms=Math.floor((t%1)*100);return String(m).padStart(2,'0')+':'+String(s).padStart(2,'0')+'.'+String(ms).padStart(2,'0')}}
+function r(n){{return Math.round(n*1000)/1000}}
+function stat(m){{document.getElementById('status').textContent=m}}
+function save(){{S.history.push(JSON.stringify(S.clips));if(S.history.length>30)S.history.shift()}}
+function drawPlaceholder(){{
+var size=S.ratioSizes[S.ratio];
+var pw=size.pw,ph=size.ph;
+S.ctx.fillStyle='#000';
+S.ctx.fillRect(0,0,pw,ph);
+S.ctx.fillStyle='#444';
+S.ctx.font='14px sans-serif';
+S.ctx.textAlign='center';
+S.ctx.fillText('타임라인에 미디어를 추가하세요',pw/2,ph/2);
+}}
+function addMedia(name,type,url,filePath){{
+var m={{id:id(),name:name,type:type,url:url,filePath:filePath||name,dur:type==='image'?5:0,thumb:type==='image'?url:null}};
+S.media.push(m);
+var container=document.getElementById('hiddenMedia');
+if(type==='video'){{
+var v=document.createElement('video');
+v.src=url;
+v.muted=true;
+v.playsInline=true;
+v.preload='auto';
+v.crossOrigin='anonymous';
+container.appendChild(v);
+S.els[m.id]=v;
+v.onloadedmetadata=function(){{
+m.dur=r(v.duration);
+renderLib();
+v.currentTime=0.5;
+}};
+v.onseeked=function(){{
+if(!m.thumb){{
+try{{
+var c=document.createElement('canvas');
+c.width=160;c.height=90;
+c.getContext('2d').drawImage(v,0,0,160,90);
+m.thumb=c.toDataURL();
+renderLib();
+}}catch(e){{}}
+}}
+}};
+}}else if(type==='audio'){{
+var a=document.createElement('audio');
+a.src=url;
+a.preload='auto';
+container.appendChild(a);
+S.els[m.id]=a;
+a.onloadedmetadata=function(){{m.dur=r(a.duration);renderLib()}};
+}}else if(type==='image'){{
+var img=new Image();
+img.src=url;
+img.crossOrigin='anonymous';
+S.els[m.id]=img;
+}}
+renderLib();
+stat('미디어 추가: '+name);
+setTimeout(function(){{addClip(m)}},400);
+}}
+function renderLib(){{
+var g=document.getElementById('mediaGrid');
+var h=document.getElementById('hint');
+h.style.display=S.media.length?'none':'block';
+g.innerHTML='';
+S.media.forEach(function(m){{
+var d=document.createElement('div');
+d.className='media-item';
+d.draggable=true;
+d.ondblclick=function(){{addClip(m)}};
+d.ondragstart=function(e){{e.dataTransfer.setData('mid',m.id)}};
+var th=m.thumb?'<img src="'+m.thumb+'">':'<div class="media-item-icon">'+(m.type==='video'?'🎬':m.type==='audio'?'🎵':'🖼')+'</div>';
+d.innerHTML=th+(m.dur?'<div class="media-item-dur">'+fmt(m.dur)+'</div>':'');
+g.appendChild(d);
+}});
+}}
+function trackEnd(tr){{
+var end=0;
+for(var i=0;i<S.clips.length;i++){{
+var c=S.clips[i];
+if(c.track===tr){{
+var e=r(c.start+(c.te-c.ts));
+if(e>end)end=e;
+}}
+}}
+return end;
+}}
+function addClip(m,at){{
+save();
+var tr=m.type==='audio'?1:0;
+var st=at!==undefined?r(at):trackEnd(tr);
+S.clips.push({{
+id:id(),
+mid:m.id,
+name:m.name,
+type:m.type,
+track:tr,
+start:st,
+dur:m.dur,
+ts:0,
+te:m.dur,
+vol:1,
+filePath:m.filePath
+}});
+renderTL();
+updateDur();
+stat('클립 추가: '+m.name);
+drawFrame();
+}}
+function renderTL(){{
+['t0','t1'].forEach(function(tid){{document.getElementById(tid).innerHTML=''}});
+S.clips.forEach(function(c){{
+var tr=document.getElementById('t'+c.track);
+var el=document.createElement('div');
+el.className='clip '+c.type+(S.sel===c.id?' selected':'');
+var len=r(c.te-c.ts);
+el.style.left=r(c.start*S.pps*S.zoom)+'px';
+el.style.width=Math.max(25,r(len*S.pps*S.zoom))+'px';
+el.draggable=true;
+el.onclick=function(e){{e.stopPropagation();selClip(c.id)}};
+el.oncontextmenu=function(e){{e.preventDefault();selClip(c.id);showCtx(e.clientX,e.clientY)}};
+el.ondragstart=function(e){{e.dataTransfer.setData('cid',c.id);e.dataTransfer.setData('ox',e.offsetX)}};
+var m=S.media.find(function(x){{return x.id===c.mid}});
+var th=m&&m.thumb?'<img class="clip-thumb" src="'+m.thumb+'">':'';
+el.innerHTML=th+'<div class="clip-info"><div class="clip-name">'+c.name+'</div><div class="clip-dur">'+fmt(len)+'</div></div><div class="clip-handle clip-handle-l"></div><div class="clip-handle clip-handle-r"></div>';
+el.querySelector('.clip-handle-l').onmousedown=function(e){{e.stopPropagation();startTrim(c.id,'l',e)}};
+el.querySelector('.clip-handle-r').onmousedown=function(e){{e.stopPropagation();startTrim(c.id,'r',e)}};
+tr.appendChild(el);
+}});
+renderRuler();
+setupDrop();
+}}
+function renderRuler(){{
+var ru=document.getElementById('ruler');
+var w=Math.max(r(S.dur*S.pps*S.zoom)+150,600);
+ru.style.width=w+'px';
+var h='<svg width="100%" height="18" style="position:absolute;left:50px">';
+var step=S.zoom<0.7?5:S.zoom<1.5?2:1;
+for(var i=0;i<=S.dur+10;i+=step){{
+var x=r(i*S.pps*S.zoom);
+h+='<line x1="'+x+'" y1="13" x2="'+x+'" y2="18" stroke="#ccc"/>';
+h+='<text x="'+x+'" y="10" fill="#999" font-size="8" text-anchor="middle">'+fmt(i)+'</text>';
+}}
+ru.innerHTML=h+'</svg>';
+}}
+function setupDrop(){{
+['t0','t1'].forEach(function(tid,idx){{
+var tr=document.getElementById(tid);
+tr.ondragover=function(e){{e.preventDefault();tr.classList.add('drop-zone')}};
+tr.ondragleave=function(){{tr.classList.remove('drop-zone')}};
+tr.ondrop=function(e){{
+e.preventDefault();
+tr.classList.remove('drop-zone');
+var rect=tr.getBoundingClientRect();
+var t=r(Math.max(0,(e.clientX-rect.left)/(S.pps*S.zoom)));
+var mid=e.dataTransfer.getData('mid');
+var cid=e.dataTransfer.getData('cid');
+var ox=parseFloat(e.dataTransfer.getData('ox')||0);
+if(mid){{
+var m=S.media.find(function(x){{return x.id===mid}});
+if(m)addClip(m,t);
+}}else if(cid){{
+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)));
+c.track=c.type==='audio'?1:idx;
+renderTL();
+updateDur();
+drawFrame();
+}}
+}}
+}};
+}});
+}}
+var trimData=null;
+function startTrim(cid,side,e){{
+e.preventDefault();
+var c=S.clips.find(function(x){{return x.id===cid}});
+if(!c)return;
+save();
+trimData={{cid:cid,side:side,sx:e.clientX,ots:c.ts,ote:c.te,ost:c.start}};
+document.addEventListener('mousemove',doTrim);
+document.addEventListener('mouseup',endTrim);
+}}
+function doTrim(e){{
+if(!trimData)return;
+var c=S.clips.find(function(x){{return x.id===trimData.cid}});
+if(!c)return;
+var dx=e.clientX-trimData.sx;
+var dt=r(dx/(S.pps*S.zoom));
+if(trimData.side==='l'){{
+var newTs=Math.max(0,Math.min(c.te-0.1,trimData.ots+dt));
+c.ts=r(newTs);
+c.start=r(trimData.ost+(newTs-trimData.ots));
+}}else{{
+c.te=r(Math.max(c.ts+0.1,Math.min(c.dur,trimData.ote+dt)));
+}}
+renderTL();
+updateDur();
+}}
+function endTrim(){{
+trimData=null;
+document.removeEventListener('mousemove',doTrim);
+document.removeEventListener('mouseup',endTrim);
+}}
+function selClip(cid){{S.sel=cid;renderTL();renderProps()}}
+function renderProps(){{
+var box=document.getElementById('propsBox');
+var c=S.clips.find(function(x){{return x.id===S.sel}});
+if(!c){{box.innerHTML='<div class="no-sel">클립 선택</div>';return}}
+var len=r(c.te-c.ts);
+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>'+
+(c.type!=='image'?'<div class="prop-group"><div class="prop-label">볼륨 '+Math.round(c.vol*100)+'%</div><input class="prop-input" type="range" min="0" max="1" step="0.05" value="'+c.vol+'" oninput="setProp(\\'vol\\',parseFloat(this.value))"></div>':'');
+}}
+function setProp(p,v){{
+save();
+var c=S.clips.find(function(x){{return x.id===S.sel}});
+if(c){{c[p]=p==='start'?r(v):v;renderTL();updateDur();renderProps();drawFrame()}}
+}}
+function splitClip(){{
+if(!S.sel){{alert('클립을 선택하세요');return}}
+var c=S.clips.find(function(x){{return x.id===S.sel}});
+if(!c)return;
+var cEnd=r(c.start+c.te-c.ts);
+if(S.time<=c.start||S.time>=cEnd){{alert('플레이헤드가 클립 안에 있어야 합니다');return}}
+save();
+var splitAt=r(S.time-c.start);
+var c2=JSON.parse(JSON.stringify(c));
+c2.id=id();
+c2.start=r(S.time);
+c2.ts=r(c.ts+splitAt);
+c.te=r(c.ts+splitAt);
+S.clips.push(c2);
+renderTL();updateDur();hideCtx();stat('클립 분할됨');
+}}
+function dupeClip(){{
+if(!S.sel)return;
+var c=S.clips.find(function(x){{return x.id===S.sel}});
+if(!c)return;
+save();
+var len=r(c.te-c.ts);
+var nc=JSON.parse(JSON.stringify(c));
+nc.id=id();
+nc.start=r(c.start+len);
+S.clips.push(nc);
+renderTL();updateDur();hideCtx();stat('클립 복제됨');
+}}
+function delClip(){{
+if(!S.sel)return;
+save();
+S.clips=S.clips.filter(function(x){{return x.id!==S.sel}});
+S.sel=null;
+renderTL();renderProps();updateDur();hideCtx();stat('클립 삭제됨');
+drawFrame();
+}}
+function undo(){{if(S.history.length){{S.clips=JSON.parse(S.history.pop());renderTL();updateDur();stat('실행취소');drawFrame()}}}}
+function updateDur(){{
+var mx=0;
+for(var i=0;i<S.clips.length;i++){{
+var c=S.clips[i];
+var e=r(c.start+c.te-c.ts);
+if(e>mx)mx=e;
+}}
+S.dur=mx;
+document.getElementById('totT').textContent=fmt(mx);
+}}
+function togglePlay(){{
+S.playing=!S.playing;
+document.getElementById('playBtn').textContent=S.playing?'⏸':'▶';
+if(S.playing)play();else stop();
+}}
+function play(){{
+var last=performance.now();
+function loop(now){{
+if(!S.playing)return;
+var dt=(now-last)/1000;
+last=now;
+S.time=S.time+dt;
+if(S.time>=S.dur){{
+S.time=0;
+if(S.dur===0){{S.playing=false;document.getElementById('playBtn').textContent='▶';return}}
+}}
+updateHead();
+drawFrame();
+S.animId=requestAnimationFrame(loop);
+}}
+S.animId=requestAnimationFrame(loop);
+}}
+function stop(){{
+if(S.animId){{cancelAnimationFrame(S.animId);S.animId=null}}
+Object.keys(S.els).forEach(function(k){{
+var el=S.els[k];
+if(el&&el.pause)el.pause();
+}});
+}}
+function seek(t){{
+S.time=Math.max(0,Math.min(S.dur||0,t));
+updateHead();
+drawFrame();
+}}
+function updateHead(){{
+document.getElementById('playhead').style.left=(50+S.time*S.pps*S.zoom)+'px';
+document.getElementById('curT').textContent=fmt(S.time);
+}}
+function getClipAt(t,type){{
+var sorted=S.clips.filter(function(c){{
+if(type==='visual')return c.type==='video'||c.type==='image';
+if(type==='audio')return c.type==='audio';
+return true;
+}}).sort(function(a,b){{return a.start-b.start}});
+for(var i=0;i<sorted.length;i++){{
+var c=sorted[i];
+var cEnd=c.start+(c.te-c.ts);
+if(t>=c.start&&t<cEnd)return c;
+}}
+return null;
+}}
+function drawFrame(){{
+var t=S.time;
+var vc=getClipAt(t,'visual');
+var size=S.ratioSizes[S.ratio];
+var pw=size.pw,ph=size.ph;
+S.ctx.fillStyle='#000';
+S.ctx.fillRect(0,0,pw,ph);
+if(vc){{
+var el=S.els[vc.mid];
+if(el){{
+if(vc.type==='video'){{
+var clipT=t-vc.start+vc.ts;
+if(Math.abs(el.currentTime-clipT)>0.05){{
+el.currentTime=clipT;
+}}
+if(S.playing&&el.paused)el.play().catch(function(){{}});
+if(!S.playing&&!el.paused)el.pause();
+el.volume=S.muted?0:vc.vol;
+}}
+try{{
+var sw=el.videoWidth||el.naturalWidth||el.width||pw;
+var sh=el.videoHeight||el.naturalHeight||el.height||ph;
+drawWithMode(S.ctx,el,sw,sh,pw,ph,S.fillMode);
+}}catch(e){{}}
+}}
+}}else if(S.clips.length===0){{
+S.ctx.fillStyle='#444';
+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);
+return t>=c.start&&t<cEnd;
+}});
+audioClips.forEach(function(ac){{
+var el=S.els[ac.mid];
+if(el){{
+var clipT=t-ac.start+ac.ts;
+if(Math.abs(el.currentTime-clipT)>0.1)el.currentTime=clipT;
+el.volume=S.muted?0:ac.vol;
+if(S.playing&&el.paused)el.play().catch(function(){{}});
+if(!S.playing&&!el.paused)el.pause();
+}}
+}});
+S.clips.forEach(function(c){{
+if(c.type!=='audio')return;
+var cEnd=c.start+(c.te-c.ts);
+if(t<c.start||t>=cEnd){{
+var el=S.els[c.mid];
+if(el&&!el.paused)el.pause();
+}}
+}});
+if(!vc&&!audioClips.length&&S.clips.length>0){{
+S.ctx.fillStyle='#333';
+S.ctx.font='12px sans-serif';
+S.ctx.textAlign='center';
+S.ctx.fillText('재생 위치에 미디어가 없습니다',pw/2,ph/2);
+}}
+}}
+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 tempCanvas=document.createElement('canvas');
+tempCanvas.width=sw;tempCanvas.height=sh;
+var tempCtx=tempCanvas.getContext('2d');
+tempCtx.drawImage(el,0,0,sw,sh);
+// 블러 배경: 배경에 확대+블러, 그 위에 원본
+ctx.filter='blur(20px)';
+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(tempCanvas,ox,oy,nw,nh);
+ctx.filter='none';
+// 어둡게
+ctx.fillStyle='rgba(0,0,0,0.3)';
+ctx.fillRect(0,0,dw,dh);
+// 원본 (fit) - 캡처된 프레임 재사용
+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(tempCanvas,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;
+ctx.drawImage(el,ox,oy,nw,nh);
+}}
+}}
+function toggleMute(){{S.muted=!S.muted;document.getElementById('muteBtn').textContent=S.muted?'🔇':'🔊'}}
+function setZoom(v){{S.zoom=parseFloat(v);renderTL();updateHead()}}
+function tlClick(e){{
+if(e.target.closest('.clip'))return;
+var rect=document.getElementById('tlBox').getBoundingClientRect();
+var scrollL=document.getElementById('tlBox').scrollLeft;
+S.time=Math.max(0,Math.min(S.dur||0,(e.clientX-rect.left-50+scrollL)/(S.pps*S.zoom)));
+updateHead();
+drawFrame();
+}}
+function showCtx(x,y){{var m=document.getElementById('ctx');m.style.display='block';m.style.left=x+'px';m.style.top=y+'px'}}
+function hideCtx(){{document.getElementById('ctx').style.display='none'}}
+document.addEventListener('click',function(e){{if(!e.target.closest('.ctx-menu'))hideCtx()}});
+function exportVideo(){{
+if(!S.clips.length){{alert('클립을 추가하세요');return}}
+S.cancelled=false;
+document.getElementById('exportModal').style.display='flex';
+document.getElementById('exportBar').style.width='0%';
+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');
+// 오프스크린 캔버스 (렌더링용 - 더블 버퍼링)
+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);
+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}};
+}}
+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='녹화 중... ('+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;
+// 실시간 기반 렌더링
+await new Promise(function(resolve){{
+var frameCount=0;
+var lastVideoEl=null;
+var lastClipId=null;
+function render(){{
+if(S.cancelled){{rec.stop();resolve();return}}
+var elapsed=performance.now()-startTime;
+var t=elapsed/1000;
+if(t>=dur){{
+rec.stop();
+setTimeout(resolve,100);
+return;
+}}
+document.getElementById('exportBar').style.width=(t/dur*100)+'%';
+document.getElementById('exportMsg').textContent='녹화 중... '+Math.round(t/dur*100)+'% ('+t.toFixed(1)+'/'+dur.toFixed(1)+'초)';
+offCtx.fillStyle='#000';
+offCtx.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;
+if(lastClipId!==vc.id){{
+el.currentTime=clipT;
+el.play().catch(function(){{}});
+lastClipId=vc.id;
+lastVideoEl=el;
+}}
+if(lastVideoEl&&lastVideoEl!==el&&!lastVideoEl.paused){{
+lastVideoEl.pause();
+}}
+lastVideoEl=el;
+}}
+try{{
+var sw=el.videoWidth||el.naturalWidth||el.width||exportW;
+var sh=el.videoHeight||el.naturalHeight||el.height||exportH;
+drawWithModeExport(offCtx,el,sw,sh,exportW,exportH,fillMode);
+}}catch(e){{}}
+}}
+}}else{{
+if(lastVideoEl&&!lastVideoEl.paused){{
+lastVideoEl.pause();
+lastClipId=null;
+}}
+}}
+ctx.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+') - 아래에서 다운로드';
+var downloadDiv=document.createElement('div');
+downloadDiv.style.marginTop='10px';
+var webmLink=document.createElement('a');
+webmLink.href=URL.createObjectURL(webmBlob);
+webmLink.download='video_'+S.ratio.replace(':','x')+'_'+Date.now()+'.webm';
+webmLink.className='btn btn-success';
+webmLink.textContent='📥 WebM 다운로드';
+webmLink.style.marginRight='5px';
+downloadDiv.appendChild(webmLink);
+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(){{
+document.getElementById('exportMsg').textContent='복사 완료! 위 입력란에 붙여넣기';
+alert('복사 완료!\\n\\nGradio의 "WebM 데이터" 입력란에 붙여넣기(Ctrl+V) 후\\n"MP4 변환" 버튼을 클릭하세요.');
+}}).catch(function(){{
+prompt('아래 데이터를 복사하세요:', base64.substring(0,100)+'...');
+}});
+}};
+reader.readAsDataURL(webmBlob);
+}};
+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 if(mode==='blur'){{
+// 먼저 현재 프레임을 임시 캔버스에 캡처
+var tempCanvas=document.createElement('canvas');
+tempCanvas.width=sw;tempCanvas.height=sh;
+var tempCtx=tempCanvas.getContext('2d');
+tempCtx.drawImage(el,0,0,sw,sh);
+// 블러 배경 그리기
+ctx.filter='blur(20px)';
+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(tempCanvas,ox,oy,nw,nh);
+ctx.filter='none';
+// 어둡게
+ctx.fillStyle='rgba(0,0,0,0.3)';
+ctx.fillRect(0,0,dw,dh);
+// 원본 (fit) - 캡처된 프레임 재사용
+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(tempCanvas,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;
+ctx.drawImage(el,ox,oy,nw,nh);
+}}
+}}
+function cancelExport(){{S.cancelled=true;document.getElementById('exportModal').style.display='none'}}
+document.addEventListener('keydown',function(e){{
+if(e.target.tagName==='INPUT')return;
+if(e.code==='Space'){{e.preventDefault();togglePlay()}}
+else if(e.code==='Delete'){{e.preventDefault();delClip()}}
+else if(e.code==='ArrowLeft'){{seek(S.time-0.1)}}
+else if(e.code==='ArrowRight'){{seek(S.time+0.1)}}
+}});
+init();
+renderTL();
+stat('준비됨');
+var initData={media_data};
+if(initData&&initData.length)initData.forEach(function(m){{addMedia(m.name,m.type,m.dataUrl,m.filePath)}});
+</script>
+</body>
+</html>'''
+def process_file(files):
+    """파일 처리 및 서버에 저장"""
+    global uploaded_files
+    if not files:
+        return []
+    results = []
+    file_list = files if isinstance(files, list) else [files]
+    for f in file_list:
+        if not f:
+            continue
+        path = f.name if hasattr(f, 'name') else f
+        name = os.path.basename(path)
+        ext = name.lower().split('.')[-1]
+        if ext in ['mp4', 'webm', 'mov', 'avi', 'mkv']:
+            t, m = 'video', f'video/{ext}'
+        elif ext in ['jpg', 'jpeg', 'png', 'gif', 'webp']:
+            t, m = 'image', f'image/{ext}'
+        elif ext in ['mp3', 'wav', 'ogg', 'm4a', 'aac']:
+            t, m = 'audio', f'audio/{ext}'
+        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
+        with open(path, 'rb') as fp:
+            d = base64.b64encode(fp.read()).decode()
+        results.append({'name': name, 'type': t, 'dataUrl': f'data:{m};base64,{d}', 'filePath': name})
+    return results
+def make_iframe(data):
+    j = json.dumps(data, ensure_ascii=False)
+    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,
+            '-c:v', 'libx264',
+            '-preset', 'fast',
+            '-crf', '23',
+            '-c:a', 'aac',
+            '-b:a', '128k',
+            '-movflags', '+faststart',
+            mp4_path
+        ]
+        result = subprocess.run(cmd, capture_output=True, text=True, timeout=300)
+        # WebM 파일 삭제
+        try:
+            os.remove(webm_path)
+        except:
+            pass
+        if os.path.exists(mp4_path) and os.path.getsize(mp4_path) > 0:
+            return mp4_path
+        return None
+    except Exception as e:
+        print(f"[Convert] Error: {e}")
+        return None
+with gr.Blocks() as demo:
+    gr.Markdown("## 🎬 Video Editor")
+    f = gr.File(label="📁 파일 업로드", file_count="multiple", file_types=["video", "image", "audio"])
+    e = gr.HTML(value=make_iframe([]))
+    gr.Markdown("---")
+    gr.Markdown("### 📥 MP4 변환")
+    gr.Markdown("에디터에서 '내보내기' → 'MP4변환용 복사' 클릭 후 아래에 붙여넣기")
+    with gr.Row():
+        webm_data = gr.Textbox(label="WebM 데이터 (base64)", placeholder="여기에 붙여넣기 (Ctrl+V)", lines=2, scale=4)
+        convert_btn = gr.Button("🎬 MP4 변환", variant="primary", scale=1)
+    mp4_output = gr.File(label="📥 MP4 다운로드")
+    f.change(fn=lambda x: make_iframe(process_file(x)), inputs=[f], outputs=[e])
+    convert_btn.click(fn=convert_webm_to_mp4, inputs=[webm_data], outputs=[mp4_output])
+if __name__ == "__main__":
+    demo.launch()