Hugging Face's logo

Spaces:
Heartsync
/
studio
Running on Zero

App Files Community
studio / app-backup.py
seawolf2357's picture
seawolf2357
Update app-backup.py
1770633 verified
raw
history blame
35.9 kB
"""
Simple Video Editor - ν—ˆκΉ…νŽ˜μ΄μŠ€ 슀페이슀용
srcdoc λ°©μ‹μœΌλ‘œ iframe μ‚¬μš© - 파일 μ—…λ‘œλ“œ μ‹œ UI μœ μ§€
"""
import gradio as gr
import base64
import os
import json
def get_editor_html(media_data="[]"):
 """에디터 HTML 생성"""
 return f'''<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
*{{margin:0;padding:0;box-sizing:border-box}}
body{{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans KR',sans-serif;background:#f5f5f7;color:#1d1d1f;font-size:13px}}
.editor-container{{display:flex;flex-direction:column;height:100vh;background:#f5f5f7;overflow:hidden}}
.toolbar{{height:48px;background:#fff;border-bottom:1px solid #e0e0e0;display:flex;align-items:center;justify-content:space-between;padding:0 12px;box-shadow:0 1px 3px rgba(0,0,0,0.05)}}
.toolbar-title{{font-size:15px;font-weight:600;color:#1d1d1f;display:flex;align-items:center;gap:6px}}
.toolbar-title svg{{width:20px;height:20px;color:#6366f1}}
.toolbar-actions{{display:flex;gap:8px}}
.btn{{padding:6px 12px;border:none;border-radius:6px;cursor:pointer;font-size:12px;font-weight:500;display:flex;align-items:center;gap:4px;transition:all 0.15s}}
.btn svg{{width:14px;height:14px}}
.btn-primary{{background:#6366f1;color:#fff}}
.btn-primary:hover{{background:#4f46e5}}
.btn-success{{background:#10b981;color:#fff}}
.btn-success:hover{{background:#059669}}
.btn-danger{{background:#ef4444;color:#fff}}
.btn-danger:hover{{background:#dc2626}}
.btn-secondary{{background:#f3f4f6;color:#374151;border:1px solid #e5e7eb}}
.btn-secondary:hover{{background:#e5e7eb}}
.main-area{{display:flex;flex:1;overflow:hidden;background:#f5f5f7}}
.media-library{{width:200px;background:#fff;border-right:1px solid #e0e0e0;display:flex;flex-direction:column}}
.library-header{{padding:10px 12px;border-bottom:1px solid #e0e0e0;font-size:11px;font-weight:600;color:#6b7280;text-transform:uppercase;letter-spacing:0.5px}}
.library-content{{flex:1;overflow-y:auto;padding:8px}}
.library-hint{{text-align:center;padding:20px 10px;color:#9ca3af;font-size:11px;line-height:1.5}}
.media-grid{{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}}
.media-item{{aspect-ratio:16/9;background:#f3f4f6;border-radius:6px;overflow:hidden;cursor:grab;position:relative;transition:all 0.15s;border:1px solid #e5e7eb}}
.media-item:hover{{transform:scale(1.02);box-shadow:0 2px 8px rgba(0,0,0,0.1);border-color:#6366f1}}
.media-item img,.media-item video{{width:100%;height:100%;object-fit:cover}}
.media-item-overlay{{position:absolute;inset:0;background:linear-gradient(transparent 40%,rgba(0,0,0,0.7));opacity:0;transition:opacity 0.15s;display:flex;align-items:flex-end;padding:4px}}
.media-item:hover .media-item-overlay{{opacity:1}}
.media-item-name{{font-size:9px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}
.media-item-duration{{position:absolute;top:3px;right:3px;background:rgba(0,0,0,0.6);padding:1px 4px;border-radius:3px;font-size:9px;color:#fff}}
.media-item-type{{position:absolute;top:3px;left:3px;width:16px;height:16px;background:rgba(0,0,0,0.6);border-radius:50%;display:flex;align-items:center;justify-content:center}}
.media-item-type svg{{width:10px;height:10px;color:#fff}}
.media-item-icon{{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:24px;color:#9ca3af;background:#e5e7eb}}
.preview-area{{flex:1;display:flex;flex-direction:column;background:#1a1a1a;margin:8px;border-radius:12px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,0.15)}}
.preview-container{{flex:1;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;background:#000}}
.preview-container video,.preview-container img{{max-width:100%;max-height:100%;object-fit:contain}}
.preview-placeholder{{text-align:center;color:#666}}
.preview-placeholder svg{{width:48px;height:48px;margin-bottom:12px;opacity:0.5}}
.preview-placeholder p{{font-size:12px}}
.playback-controls{{height:50px;background:linear-gradient(180deg,#2a2a2a,#1a1a1a);display:flex;align-items:center;justify-content:center;gap:8px;padding:0 16px}}
.control-btn{{width:32px;height:32px;border:none;border-radius:50%;background:rgba(255,255,255,0.1);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.15s}}
.control-btn:hover{{background:rgba(255,255,255,0.2)}}
.control-btn svg{{width:14px;height:14px}}
.control-btn.play-btn{{width:40px;height:40px;background:#6366f1}}
.control-btn.play-btn:hover{{background:#4f46e5;transform:scale(1.05)}}
.control-btn.play-btn svg{{width:18px;height:18px}}
.time-display{{font-family:'SF Mono',Monaco,monospace;font-size:11px;color:#aaa;min-width:110px;text-align:center}}
.properties-panel{{width:180px;background:#fff;border-left:1px solid #e0e0e0;display:flex;flex-direction:column}}
.properties-header{{padding:10px 12px;border-bottom:1px solid #e0e0e0;font-size:11px;font-weight:600;color:#6b7280;text-transform:uppercase;letter-spacing:0.5px}}
.properties-content{{flex:1;padding:12px;overflow-y:auto}}
.property-group{{margin-bottom:14px}}
.property-label{{font-size:10px;color:#6b7280;margin-bottom:4px;text-transform:uppercase;letter-spacing:0.3px}}
.property-input{{width:100%;padding:6px 8px;background:#f9fafb;border:1px solid #e5e7eb;border-radius:5px;color:#1d1d1f;font-size:12px}}
.property-input:focus{{outline:none;border-color:#6366f1;box-shadow:0 0 0 2px rgba(99,102,241,0.1)}}
.property-row{{display:flex;gap:8px}}
.property-row>div{{flex:1}}
.no-selection{{color:#9ca3af;text-align:center;padding:30px 15px;font-size:12px;line-height:1.5}}
.timeline-area{{height:180px;background:#fff;border-top:1px solid #e0e0e0;display:flex;flex-direction:column}}
.timeline-toolbar{{height:32px;background:#fafafa;border-bottom:1px solid #e0e0e0;display:flex;align-items:center;padding:0 8px;gap:6px}}
.timeline-toolbar .btn{{padding:4px 8px;font-size:11px}}
.timeline-toolbar .btn svg{{width:12px;height:12px}}
.timeline-zoom{{display:flex;align-items:center;gap:4px;margin-left:auto;font-size:11px;color:#6b7280}}
.timeline-zoom input{{width:60px;height:4px}}
.timeline-zoom svg{{width:12px;height:12px}}
.timeline-container{{flex:1;overflow-x:auto;overflow-y:hidden;position:relative;background:#f9fafb}}
.timeline-ruler{{height:22px;background:#fff;position:sticky;top:0;z-index:10;border-bottom:1px solid #e5e7eb}}
.timeline-tracks{{position:relative;min-height:120px}}
.timeline-track{{height:55px;border-bottom:1px solid #e5e7eb;position:relative;display:flex;align-items:center;background:#fff}}
.timeline-track:nth-child(2){{background:#fffbeb}}
.track-label{{width:70px;padding:0 8px;font-size:10px;color:#6b7280;background:#f9fafb;height:100%;display:flex;align-items:center;gap:4px;border-right:1px solid #e5e7eb;position:sticky;left:0;z-index:5}}
.track-label svg{{width:12px;height:12px}}
.track-content{{flex:1;height:100%;position:relative;min-width:800px}}
.timeline-clip{{position:absolute;height:45px;top:5px;border-radius:6px;cursor:grab;display:flex;align-items:center;overflow:hidden;transition:box-shadow 0.15s;min-width:40px;box-shadow:0 1px 3px rgba(0,0,0,0.1)}}
.timeline-clip:hover{{box-shadow:0 0 0 2px #6366f1}}
.timeline-clip.selected{{box-shadow:0 0 0 2px #6366f1,0 4px 12px rgba(99,102,241,0.3)}}
.timeline-clip.video{{background:linear-gradient(135deg,#818cf8,#6366f1)}}
.timeline-clip.image{{background:linear-gradient(135deg,#34d399,#10b981)}}
.timeline-clip.audio{{background:linear-gradient(135deg,#fbbf24,#f59e0b)}}
.clip-thumbnail{{width:45px;height:100%;object-fit:cover;flex-shrink:0}}
.clip-info{{padding:0 6px;flex:1;overflow:hidden}}
.clip-name{{font-size:10px;font-weight:500;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}
.clip-duration{{font-size:9px;color:rgba(255,255,255,0.7)}}
.clip-handles{{position:absolute;top:0;bottom:0;width:6px;background:rgba(255,255,255,0.4);cursor:ew-resize;opacity:0;transition:opacity 0.15s}}
.timeline-clip:hover .clip-handles{{opacity:1}}
.clip-handle-left{{left:0;border-radius:6px 0 0 6px}}
.clip-handle-right{{right:0;border-radius:0 6px 6px 0}}
.playhead{{position:absolute;top:0;bottom:0;width:2px;background:#ef4444;z-index:20;pointer-events:none}}
.playhead::before{{content:'';position:absolute;top:0;left:-5px;width:12px;height:12px;background:#ef4444;clip-path:polygon(50% 100%,0 0,100% 0)}}
.drop-highlight{{background:rgba(99,102,241,0.1)!important;outline:2px dashed #6366f1!important;outline-offset:-2px}}
.context-menu{{position:fixed;background:#fff;border:1px solid #e5e7eb;border-radius:8px;padding:4px 0;min-width:140px;z-index:1000;box-shadow:0 10px 40px rgba(0,0,0,0.15)}}
.context-menu-item{{padding:6px 12px;cursor:pointer;display:flex;align-items:center;gap:8px;font-size:12px}}
.context-menu-item:hover{{background:#f3f4f6}}
.context-menu-item svg{{width:12px;height:12px}}
.context-menu-item.danger{{color:#ef4444}}
.context-menu-divider{{height:1px;background:#e5e7eb;margin:4px 0}}
.status-bar{{height:24px;background:#f0f0f0;border-top:1px solid #e0e0e0;display:flex;align-items:center;padding:0 12px;font-size:11px;color:#666}}
.modal-overlay{{position:fixed;inset:0;background:rgba(0,0,0,0.5);display:flex;align-items:center;justify-content:center;z-index:1000}}
.modal{{background:#fff;border-radius:12px;padding:24px;min-width:280px;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,0.3)}}
.modal h3{{margin-bottom:12px;font-size:16px}}
.modal p{{font-size:13px;color:#6b7280}}
.progress-bar{{height:6px;background:#e5e7eb;border-radius:3px;overflow:hidden;margin:16px 0}}
.progress-fill{{height:100%;background:linear-gradient(90deg,#6366f1,#8b5cf6);transition:width 0.3s}}
::-webkit-scrollbar{{width:6px;height:6px}}
::-webkit-scrollbar-track{{background:#f1f1f1}}
::-webkit-scrollbar-thumb{{background:#c1c1c1;border-radius:3px}}
</style>
</head>
<body>
<div class="editor-container">
<div class="toolbar">
<div class="toolbar-title">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="2" width="20" height="20" rx="2"/><line x1="7" y1="2" x2="7" y2="22"/><line x1="17" y1="2" x2="17" y2="22"/><line x1="2" y1="12" x2="22" y2="12"/></svg>
Simple Video Editor
</div>
<div class="toolbar-actions">
<button class="btn btn-secondary" onclick="editorUndo()"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 7v6h6M3 13a9 9 0 1 0 2.5-6.5"/></svg>μ‹€ν–‰μ·¨μ†Œ</button>
<button class="btn btn-success" onclick="editorExport()"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg>내보내기</button>
</div>
</div>
<div class="main-area">
<div class="media-library">
<div class="library-header">πŸ“ λ―Έλ””μ–΄</div>
<div class="library-content">
<div class="library-hint" id="libraryHint">⬆️ μœ„μ˜ 파일 μ—…λ‘œλ“œλ₯Ό<br>μ‚¬μš©ν•˜μ„Έμš”</div>
<div class="media-grid" id="mediaGrid"></div>
</div>
</div>
<div class="preview-area">
<div class="preview-container" id="previewContainer">
<div class="preview-placeholder">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1"><rect x="2" y="2" width="20" height="20" rx="2"/><polygon points="10 8 16 12 10 16 10 8"/></svg>
<p>νƒ€μž„λΌμΈμ— λ―Έλ””μ–΄λ₯Ό μΆ”κ°€ν•˜μ„Έμš”</p>
</div>
</div>
<div class="playback-controls">
<button class="control-btn" onclick="editorSkipStart()"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M6 6h2v12H6zm3.5 6l8.5 6V6z"/></svg></button>
<button class="control-btn" onclick="editorSkipBack()"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M11 18V6l-8.5 6 8.5 6zm.5-6l8.5 6V6l-8.5 6z"/></svg></button>
<button class="control-btn play-btn" onclick="editorTogglePlay()"><svg viewBox="0 0 24 24" fill="currentColor" id="playIcon"><polygon points="5 3 19 12 5 21 5 3"/></svg></button>
<button class="control-btn" onclick="editorSkipForward()"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M4 18l8.5-6L4 6v12zm9-12v12l8.5-6L13 6z"/></svg></button>
<button class="control-btn" onclick="editorSkipEnd()"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M6 18l8.5-6L6 6v12zM16 6v12h2V6h-2z"/></svg></button>
<div class="time-display"><span id="currentTimeDisplay">00:00.00</span> / <span id="durationDisplay">00:00.00</span></div>
<button class="control-btn" onclick="editorToggleMute()"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" id="volumeIcon"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/><path d="M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07"/></svg></button>
</div>
</div>
<div class="properties-panel">
<div class="properties-header">βš™οΈ 속성</div>
<div class="properties-content" id="propertiesContent"><div class="no-selection">클립을 μ„ νƒν•˜λ©΄<br>속성을 νŽΈμ§‘ν•  수 μžˆμŠ΅λ‹ˆλ‹€</div></div>
</div>
</div>
<div class="timeline-area">
<div class="timeline-toolbar">
<button class="btn btn-secondary" onclick="editorSplit()"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="6" cy="6" r="3"/><circle cx="6" cy="18" r="3"/><line x1="20" y1="4" x2="8.12" y2="15.88"/></svg>자λ₯΄κΈ°</button>
<button class="btn btn-secondary" onclick="editorDuplicate()"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>볡제</button>
<button class="btn btn-danger" onclick="editorDelete()"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>μ‚­μ œ</button>
<div class="timeline-zoom">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/><line x1="8" y1="11" x2="14" y2="11"/></svg>
<input type="range" min="0.5" max="3" step="0.1" value="1" oninput="editorSetZoom(this.value)">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/><line x1="11" y1="8" x2="11" y2="14"/><line x1="8" y1="11" x2="14" y2="11"/></svg>
</div>
</div>
<div class="timeline-container" id="timelineContainer" onclick="editorTimelineClick(event)">
<div class="timeline-ruler" id="timelineRuler"></div>
<div class="timeline-tracks">
<div class="timeline-track" data-track="0">
<div class="track-label"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2"/></svg>μ˜μƒ</div>
<div class="track-content" id="track0"></div>
</div>
<div class="timeline-track" data-track="1">
<div class="track-label"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>μ˜€λ””μ˜€</div>
<div class="track-content" id="track1"></div>
</div>
</div>
<div class="playhead" id="playhead" style="left:70px"></div>
</div>
</div>
<div class="status-bar" id="statusBar">쀀비됨 | λ―Έλ””μ–΄: 0개 | 클립: 0개</div>
</div>
<div class="context-menu" id="contextMenu" style="display:none">
<div class="context-menu-item" onclick="editorSplit()"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="6" cy="6" r="3"/><circle cx="6" cy="18" r="3"/><line x1="20" y1="4" x2="8.12" y2="15.88"/></svg>자λ₯΄κΈ°</div>
<div class="context-menu-item" onclick="editorDuplicate()"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>볡제</div>
<div class="context-menu-divider"></div>
<div class="context-menu-item danger" onclick="editorDelete()"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/></svg>μ‚­μ œ</div>
</div>
<div class="modal-overlay" id="exportModal" style="display:none">
<div class="modal">
<h3>🎬 μ˜μƒ 내보내기</h3>
<p id="exportStatus">μ˜μƒμ„ μ²˜λ¦¬ν•˜κ³  μžˆμŠ΅λ‹ˆλ‹€...</p>
<div class="progress-bar"><div class="progress-fill" id="exportProgress" style="width:0%"></div></div>
<button class="btn btn-secondary" onclick="editorCancelExport()" id="cancelExportBtn">μ·¨μ†Œ</button>
</div>
</div>
<script>
var S={{mediaLibrary:[],timelineClips:[],selectedClipId:null,isPlaying:false,isMuted:false,currentTime:0,totalDuration:0,zoom:1,pps:80,undoStack:[],animId:null,audioElements:{{}}}};
function gid(){{return Date.now().toString(36)+Math.random().toString(36).substr(2)}}
function fmt(s){{if(!s||isNaN(s))s=0;var m=Math.floor(s/60),sec=Math.floor(s%60),ms=Math.floor((s%1)*100);return(m<10?'0':'')+m+':'+(sec<10?'0':'')+sec+'.'+(ms<10?'0':'')+ms}}
function upStat(msg){{var e=document.getElementById('statusBar');if(e)e.textContent=msg+' | λ―Έλ””μ–΄: '+S.mediaLibrary.length+'개 | 클립: '+S.timelineClips.length+'개'}}
function save(){{S.undoStack.push(JSON.stringify(S.timelineClips));if(S.undoStack.length>50)S.undoStack.shift()}}
function addMedia(name,type,url){{
console.log('Adding:',name,type);
var m={{id:gid(),name:name,type:type,url:url,duration:type==='image'?5:0,thumb:type==='image'?url:null}};
S.mediaLibrary.push(m);
if(type==='video'||type==='audio'){{
var el=document.createElement(type);el.src=url;el.preload='metadata';
el.onloadedmetadata=function(){{m.duration=el.duration;renderLib();if(type==='video')el.currentTime=Math.min(1,el.duration/2)}};
el.onseeked=function(){{if(type==='video'){{try{{var c=document.createElement('canvas');c.width=160;c.height=90;c.getContext('2d').drawImage(el,0,0,160,90);m.thumb=c.toDataURL();renderLib()}}catch(e){{}}}}}}
}}
renderLib();upStat('λ―Έλ””μ–΄ 좔가됨: '+name);
setTimeout(function(){{addToTL(m)}},100);
}}
function renderLib(){{
var g=document.getElementById('mediaGrid'),h=document.getElementById('libraryHint');
if(!g)return;
if(h)h.style.display=S.mediaLibrary.length===0?'block':'none';
g.innerHTML='';
var icons={{video:'<svg viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21"/></svg>',image:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>',audio:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>'}};
S.mediaLibrary.forEach(function(m){{
var d=document.createElement('div');d.className='media-item';d.draggable=true;
d.ondblclick=function(){{addToTL(m)}};
d.ondragstart=function(e){{e.dataTransfer.setData('mid',m.id);this.style.opacity='0.5'}};
d.ondragend=function(){{this.style.opacity='1'}};
var th=m.thumb?'<img src="'+m.thumb+'">':'<div class="media-item-icon">'+(m.type==='video'?'🎬':m.type==='audio'?'🎡':'πŸ–ΌοΈ')+'</div>';
d.innerHTML=th+'<div class="media-item-type">'+icons[m.type]+'</div>'+(m.duration>0?'<div class="media-item-duration">'+fmt(m.duration)+'</div>':'')+'<div class="media-item-overlay"><span class="media-item-name">'+m.name+'</span></div>';
g.appendChild(d);
}});
}}
function addToTL(m,st){{
save();
var tr=m.type==='audio'?1:0;
var start=st!==undefined?st:getTrEnd(tr);
var c={{id:gid(),mid:m.id,name:m.name,type:m.type,url:m.url,thumb:m.thumb,track:tr,start:start,dur:m.duration,ts:0,te:m.duration,vol:1}};
S.timelineClips.push(c);
renderTL();upDur();upStat('클립 좔가됨: '+c.name);
}}
function getTrEnd(tr){{var mx=0;S.timelineClips.forEach(function(c){{if(c.track===tr){{var e=c.start+(c.te-c.ts);if(e>mx)mx=e}}}});return mx}}
function renderTL(){{
var t0=document.getElementById('track0'),t1=document.getElementById('track1');
if(t0)t0.innerHTML='';if(t1)t1.innerHTML='';
S.timelineClips.forEach(function(c){{
var tr=document.getElementById('track'+c.track);if(!tr)return;
var d=document.createElement('div');
d.className='timeline-clip '+c.type+(S.selectedClipId===c.id?' selected':'');
var cd=c.te-c.ts,l=c.start*S.pps*S.zoom,w=Math.max(40,cd*S.pps*S.zoom);
d.style.left=l+'px';d.style.width=w+'px';d.draggable=true;
d.onclick=function(e){{e.stopPropagation();selClip(c.id)}};
d.oncontextmenu=function(e){{e.preventDefault();selClip(c.id);showCtx(e.clientX,e.clientY)}};
d.ondragstart=function(e){{e.dataTransfer.setData('cid',c.id);e.dataTransfer.setData('ox',e.offsetX.toString())}};
var th=c.thumb?'<img class="clip-thumbnail" src="'+c.thumb+'">':'';
d.innerHTML=th+'<div class="clip-info"><div class="clip-name">'+c.name+'</div><div class="clip-duration">'+fmt(cd)+'</div></div><div class="clip-handles clip-handle-left"></div><div class="clip-handles clip-handle-right"></div>';
tr.appendChild(d);
}});
renderRuler();setupDrop();
}}
function renderRuler(){{
var r=document.getElementById('timelineRuler');if(!r)return;
var w=Math.max(S.totalDuration*S.pps*S.zoom+300,1000);r.style.width=w+'px';
var h='<svg width="100%" height="22" style="position:absolute;left:70px">';
var st=S.zoom<0.7?5:S.zoom<1.5?2:1;
for(var i=0;i<=Math.ceil(S.totalDuration)+10;i+=st){{var x=i*S.pps*S.zoom;h+='<line x1="'+x+'" y1="17" x2="'+x+'" y2="22" stroke="#d1d5db"/><text x="'+x+'" y="12" fill="#9ca3af" font-size="9" text-anchor="middle">'+fmt(i)+'</text>'}}
h+='</svg>';r.innerHTML=h;
}}
function setupDrop(){{
['track0','track1'].forEach(function(tid,idx){{
var tr=document.getElementById(tid);if(!tr)return;
tr.ondragover=function(e){{e.preventDefault();tr.classList.add('drop-highlight')}};
tr.ondragleave=function(){{tr.classList.remove('drop-highlight')}};
tr.ondrop=function(e){{
e.preventDefault();tr.classList.remove('drop-highlight');
var rect=tr.getBoundingClientRect(),x=e.clientX-rect.left,t=Math.max(0,x/(S.pps*S.zoom));
var mid=e.dataTransfer.getData('mid'),cid=e.dataTransfer.getData('cid'),ox=parseFloat(e.dataTransfer.getData('ox')||0);
if(mid){{var m=S.mediaLibrary.find(function(x){{return x.id===mid}});if(m){{addToTL(m,t);var tgt=m.type==='audio'?1:idx;if(tgt!==idx){{S.timelineClips[S.timelineClips.length-1].track=tgt;renderTL()}}}}}}
else if(cid){{save();var c=S.timelineClips.find(function(x){{return x.id===cid}});if(c){{c.start=Math.max(0,t-ox/(S.pps*S.zoom));c.track=c.type==='audio'?1:idx;renderTL();upDur()}}}}
}};
}});
}}
function selClip(id){{S.selectedClipId=id;renderTL();renderProps()}}
function renderProps(){{
var ct=document.getElementById('propertiesContent');if(!ct)return;
var c=S.timelineClips.find(function(x){{return x.id===S.selectedClipId}});
if(!c){{ct.innerHTML='<div class="no-selection">클립을 μ„ νƒν•˜λ©΄<br>속성을 νŽΈμ§‘ν•  수 μžˆμŠ΅λ‹ˆλ‹€</div>';return}}
var cd=c.te-c.ts;
var h='<div class="property-group"><div class="property-label">이름</div><input type="text" class="property-input" value="'+c.name+'" onchange="upProp(\\'name\\',this.value)"></div>'+
'<div class="property-group"><div class="property-label">μ‹œμž‘</div><input type="number" class="property-input" value="'+c.start.toFixed(2)+'" step="0.1" min="0" onchange="upProp(\\'start\\',parseFloat(this.value))"></div>'+
'<div class="property-group"><div class="property-row"><div><div class="property-label">νŠΈλ¦Όμ‹œμž‘</div><input type="number" class="property-input" value="'+c.ts.toFixed(2)+'" step="0.1" min="0" max="'+c.dur+'" onchange="upProp(\\'ts\\',parseFloat(this.value))"></div>'+
'<div><div class="property-label">트림끝</div><input type="number" class="property-input" value="'+c.te.toFixed(2)+'" step="0.1" min="0" max="'+c.dur+'" onchange="upProp(\\'te\\',parseFloat(this.value))"></div></div></div>'+
'<div class="property-group"><div class="property-label">길이</div><div style="padding:6px 0;font-size:12px;color:#374151">'+fmt(cd)+'</div></div>';
if(c.type!=='image')h+='<div class="property-group"><div class="property-label">λ³Όλ₯¨ ('+Math.round(c.vol*100)+'%)</div><input type="range" class="property-input" style="padding:0" min="0" max="1" step="0.05" value="'+c.vol+'" oninput="upProp(\\'vol\\',parseFloat(this.value))"></div>';
ct.innerHTML=h;
}}
function upProp(p,v){{save();var c=S.timelineClips.find(function(x){{return x.id===S.selectedClipId}});if(c){{c[p]=v;renderTL();upDur();renderProps()}}}}
function editorSplit(){{
if(!S.selectedClipId)return;
var c=S.timelineClips.find(function(x){{return x.id===S.selectedClipId}});if(!c)return;
save();var cd=c.te-c.ts,sp=cd/2;
var c2=JSON.parse(JSON.stringify(c));c2.id=gid();c2.start=c.start+sp;c2.ts=c.ts+sp;
c.te=c.ts+sp;
S.timelineClips.push(c2);renderTL();hideCtx();upStat('클립 뢄할됨');
}}
function editorDuplicate(){{
if(!S.selectedClipId)return;
var c=S.timelineClips.find(function(x){{return x.id===S.selectedClipId}});if(!c)return;
save();var cd=c.te-c.ts;
var nc=JSON.parse(JSON.stringify(c));nc.id=gid();nc.start=c.start+cd;
S.timelineClips.push(nc);renderTL();upDur();hideCtx();upStat('클립 볡제됨');
}}
function editorDelete(){{
if(!S.selectedClipId)return;save();
S.timelineClips=S.timelineClips.filter(function(x){{return x.id!==S.selectedClipId}});
S.selectedClipId=null;renderTL();renderProps();upDur();hideCtx();upStat('클립 μ‚­μ œλ¨');
}}
function editorUndo(){{if(S.undoStack.length>0){{S.timelineClips=JSON.parse(S.undoStack.pop());renderTL();upDur();upStat('μ‹€ν–‰μ·¨μ†Œ')}}}}
function upDur(){{var mx=0;S.timelineClips.forEach(function(c){{var e=c.start+(c.te-c.ts);if(e>mx)mx=e}});S.totalDuration=mx;document.getElementById('durationDisplay').textContent=fmt(mx)}}
function editorTogglePlay(){{
S.isPlaying=!S.isPlaying;var ic=document.getElementById('playIcon');
if(S.isPlaying){{ic.innerHTML='<rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/>';startPB()}}
else{{ic.innerHTML='<polygon points="5 3 19 12 5 21 5 3"/>';stopPB()}}
}}
function startPB(){{
var last=performance.now();
function anim(now){{
if(!S.isPlaying)return;
var d=(now-last)/1000;last=now;S.currentTime+=d;
if(S.currentTime>=S.totalDuration){{S.currentTime=0;if(S.totalDuration===0){{S.isPlaying=false;document.getElementById('playIcon').innerHTML='<polygon points="5 3 19 12 5 21 5 3"/>';return}}}}
upPH();upPrev();S.animId=requestAnimationFrame(anim);
}}
S.animId=requestAnimationFrame(anim);
}}
function stopPB(){{if(S.animId){{cancelAnimationFrame(S.animId);S.animId=null}}var v=document.querySelector('#previewContainer video');if(v&&!v.paused)v.pause();if(S.audioElements)Object.keys(S.audioElements).forEach(function(id){{var au=S.audioElements[id];if(au&&!au.paused)au.pause()}})}}
function upPH(){{var p=document.getElementById('playhead');if(p)p.style.left=(70+S.currentTime*S.pps*S.zoom)+'px';document.getElementById('currentTimeDisplay').textContent=fmt(S.currentTime)}}
function upPrev(){{
var ct=document.getElementById('previewContainer');if(!ct)return;
var cur=S.timelineClips.filter(function(c){{var ce=c.start+(c.te-c.ts);return S.currentTime>=c.start&&S.currentTime<ce}});
var vc=cur.find(function(c){{return c.type==='video'||c.type==='image'}});
var ac=cur.filter(function(c){{return c.type==='audio'}});
if(vc){{
var ct2=S.currentTime-vc.start+vc.ts;
if(vc.type==='image'){{if(!ct.querySelector('img[data-cid="'+vc.id+'"]'))ct.innerHTML='<img src="'+vc.url+'" data-cid="'+vc.id+'">'}}
else if(vc.type==='video'){{
var v=ct.querySelector('video[data-cid="'+vc.id+'"]');
if(!v){{ct.innerHTML='<video src="'+vc.url+'" data-cid="'+vc.id+'"'+(S.isMuted?' muted':'')+'></video>';v=ct.querySelector('video')}}
if(Math.abs(v.currentTime-ct2)>0.2)v.currentTime=ct2;
if(S.isPlaying&&v.paused)v.play().catch(function(){{}});
else if(!S.isPlaying&&!v.paused)v.pause();
v.volume=S.isMuted?0:vc.vol;v.muted=S.isMuted;
}}
}}else{{
var ha=ac.length>0;
if(!ct.querySelector('.preview-placeholder'))ct.innerHTML='<div class="preview-placeholder"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1"><rect x="2" y="2" width="20" height="20" rx="2"/><polygon points="10 8 16 12 10 16 10 8"/></svg><p>'+(ha?'🎡 μ˜€λ””μ˜€ μž¬μƒ 쀑':'νƒ€μž„λΌμΈμ— λ―Έλ””μ–΄λ₯Ό μΆ”κ°€ν•˜μ„Έμš”')+'</p></div>';
}}
handleAudio(ac);
}}
function handleAudio(audioClips){{
if(!S.audioElements)S.audioElements={{}};
var activeIds={{}};
audioClips.forEach(function(c){{
activeIds[c.id]=true;
var at=S.currentTime-c.start+c.ts;
var au=S.audioElements[c.id];
if(!au){{
au=document.createElement('audio');
au.src=c.url;
au.preload='auto';
S.audioElements[c.id]=au;
}}
if(Math.abs(au.currentTime-at)>0.3)au.currentTime=at;
au.volume=S.isMuted?0:c.vol;
au.muted=S.isMuted;
if(S.isPlaying&&au.paused)au.play().catch(function(){{}});
else if(!S.isPlaying&&!au.paused)au.pause();
}});
Object.keys(S.audioElements).forEach(function(id){{
if(!activeIds[id]){{
var au=S.audioElements[id];
if(au&&!au.paused)au.pause();
}}
}});
}}
function editorSkipStart(){{S.currentTime=0;upPH();upPrev()}}
function editorSkipEnd(){{S.currentTime=S.totalDuration;upPH();upPrev()}}
function editorSkipBack(){{S.currentTime=Math.max(0,S.currentTime-5);upPH();upPrev()}}
function editorSkipForward(){{S.currentTime=Math.min(S.totalDuration,S.currentTime+5);upPH();upPrev()}}
function editorToggleMute(){{
S.isMuted=!S.isMuted;var ic=document.getElementById('volumeIcon');
if(S.isMuted)ic.innerHTML='<polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/><line x1="23" y1="9" x2="17" y2="15"/><line x1="17" y1="9" x2="23" y2="15"/>';
else ic.innerHTML='<polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/><path d="M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07"/>';
var v=document.querySelector('#previewContainer video');if(v)v.muted=S.isMuted;
if(S.audioElements)Object.keys(S.audioElements).forEach(function(id){{var au=S.audioElements[id];if(au)au.muted=S.isMuted}});
}}
function editorSetZoom(v){{S.zoom=parseFloat(v);renderTL();upPH()}}
function editorTimelineClick(e){{
if(e.target.closest('.timeline-clip'))return;
var ct=document.getElementById('timelineContainer'),rect=ct.getBoundingClientRect();
var x=e.clientX-rect.left-70+ct.scrollLeft;
S.currentTime=Math.max(0,Math.min(S.totalDuration,x/(S.pps*S.zoom)));
upPH();upPrev();
}}
function showCtx(x,y){{var m=document.getElementById('contextMenu');m.style.display='block';m.style.left=x+'px';m.style.top=y+'px'}}
function hideCtx(){{document.getElementById('contextMenu').style.display='none'}}
document.addEventListener('click',function(e){{if(!e.target.closest('.context-menu'))hideCtx()}});
function editorExport(){{
if(S.timelineClips.length===0){{alert('νƒ€μž„λΌμΈμ— 클립을 μΆ”κ°€ν•΄μ£Όμ„Έμš”.');return}}
document.getElementById('exportModal').style.display='flex';
document.getElementById('exportProgress').style.width='0%';
document.getElementById('exportStatus').textContent='ν”„λ‘œμ νŠΈ 정보 μ€€λΉ„ 쀑...';
var p=0,iv=setInterval(function(){{
p+=5;document.getElementById('exportProgress').style.width=p+'%';
if(p===30)document.getElementById('exportStatus').textContent='클립 정보 μˆ˜μ§‘ 쀑...';
if(p===60)document.getElementById('exportStatus').textContent='파일 생성 쀑...';
if(p>=100){{
clearInterval(iv);
document.getElementById('exportStatus').textContent='βœ… μ™„λ£Œ! λ‹€μš΄λ‘œλ“œλ₯Ό μ‹œμž‘ν•©λ‹ˆλ‹€.';
document.getElementById('cancelExportBtn').textContent='λ‹«κΈ°';
setTimeout(function(){{downloadProject()}},500);
}}
}},30);
}}
function downloadProject(){{
var project={{
version:'1.0',
duration:S.totalDuration,
clips:S.timelineClips.map(function(c){{
return {{id:c.id,name:c.name,type:c.type,track:c.track,start:c.start,duration:c.dur,trimStart:c.ts,trimEnd:c.te,volume:c.vol}};
}}),
media:S.mediaLibrary.map(function(m){{
return {{id:m.id,name:m.name,type:m.type,duration:m.duration}};
}})
}};
var json=JSON.stringify(project,null,2);
var blob=new Blob([json],{{type:'application/json'}});
var url=URL.createObjectURL(blob);
var a=document.createElement('a');
a.href=url;
a.download='video_project_'+Date.now()+'.json';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
if(S.timelineClips.length===1){{
var clip=S.timelineClips[0];
var media=S.mediaLibrary.find(function(m){{return m.id===clip.mid}});
if(media&&(media.type==='video'||media.type==='audio')){{
setTimeout(function(){{
if(confirm('원본 λ―Έλ””μ–΄ νŒŒμΌλ„ λ‹€μš΄λ‘œλ“œν•˜μ‹œκ² μŠ΅λ‹ˆκΉŒ?')){{
var a2=document.createElement('a');
a2.href=media.url;
a2.download=media.name;
document.body.appendChild(a2);
a2.click();
document.body.removeChild(a2);
}}
}},1000);
}}
}}
}}
function editorCancelExport(){{document.getElementById('exportModal').style.display='none';document.getElementById('cancelExportBtn').textContent='μ·¨μ†Œ'}}
document.addEventListener('keydown',function(e){{
if(e.target.tagName==='INPUT')return;
if(e.code==='Space'){{e.preventDefault();editorTogglePlay()}}
else if(e.code==='Delete'||e.code==='Backspace'){{e.preventDefault();editorDelete()}}
else if(e.code==='KeyD'&&(e.ctrlKey||e.metaKey)){{e.preventDefault();editorDuplicate()}}
else if(e.code==='KeyZ'&&(e.ctrlKey||e.metaKey)){{e.preventDefault();editorUndo()}}
else if(e.code==='ArrowLeft'){{e.preventDefault();S.currentTime=Math.max(0,S.currentTime-(e.shiftKey?1:0.1));upPH();upPrev()}}
else if(e.code==='ArrowRight'){{e.preventDefault();S.currentTime=Math.min(S.totalDuration,S.currentTime+(e.shiftKey?1:0.1));upPH();upPrev()}}
}});
renderTL();upStat('쀀비됨');
var initMedia={media_data};
if(initMedia&&initMedia.length>0)initMedia.forEach(function(m){{addMedia(m.name,m.type,m.dataUrl)}});
console.log('Editor ready');
</script>
</body>
</html>'''
def process_file(file):
 if file is None:
 return []
 results = []
 files = file if isinstance(file, list) else [file]
 for f in files:
 if f is None:
 continue
 file_path = f.name if hasattr(f, 'name') else f
 file_name = os.path.basename(file_path)
 ext = file_name.lower().split('.')[-1]
 if ext in ['mp4', 'webm', 'mov', 'avi', 'mkv']:
 file_type, mime = 'video', f'video/{ext}'
 elif ext in ['jpg', 'jpeg', 'png', 'gif', 'webp']:
 file_type, mime = 'image', f'image/{ext}'
 elif ext in ['mp3', 'wav', 'ogg', 'm4a', 'aac']:
 file_type, mime = 'audio', f'audio/{ext}'
 else:
 continue
 with open(file_path, 'rb') as fp:
 data = base64.b64encode(fp.read()).decode('utf-8')
 results.append({'name': file_name, 'type': file_type, 'dataUrl': f'data:{mime};base64,{data}'})
 return results
def create_editor_iframe(media_data):
 """srcdoc λ°©μ‹μœΌλ‘œ iframe 생성"""
 media_json = json.dumps(media_data, ensure_ascii=False)
 html_content = get_editor_html(media_json)
 # srcdocλ₯Ό μž‘μ€λ”°μ˜΄ν‘œλ‘œ κ°μ‹Έλ―€λ‘œ, λ‚΄λΆ€μ˜ μž‘μ€λ”°μ˜΄ν‘œλ§Œ μ΄μŠ€μΌ€μ΄ν”„
 escaped = html_content.replace("'", "&#39;")
 return f"<iframe srcdoc='{escaped}' style='width:100%;height:800px;border:none;border-radius:12px;'></iframe>"
with gr.Blocks() as demo:
 gr.Markdown("## 🎬 Simple Video Editor")
 gr.Markdown("νŒŒμΌμ„ μ—…λ‘œλ“œν•˜λ©΄ μžλ™μœΌλ‘œ νƒ€μž„λΌμΈμ— μΆ”κ°€λ©λ‹ˆλ‹€.")
file_input = gr.File(
 label="πŸ“ 파일 μ—…λ‘œλ“œ (μ˜μƒ/이미지/μ˜€λ””μ˜€)",
 file_count="multiple",
 file_types=["video", "image", "audio"]
 )
editor_html = gr.HTML(value=create_editor_iframe([]))
def on_file_upload(files):
 if not files:
 return create_editor_iframe([])
 return create_editor_iframe(process_file(files))
file_input.change(fn=on_file_upload, inputs=[file_input], outputs=[editor_html])
if __name__ == "__main__":
 demo.launch()