Hugging Face's logo

Spaces:
Heartsync
/
studio
Running on Zero

App Files Community
seawolf2357 commited on
Commit
f504bd5
ยท
verified ยท
1 Parent(s): f725e82

Create app-backup.py

Browse files
Files changed (1) hide show
  1. app-backup.py +474 -0
app-backup.py ADDED
@@ -0,0 +1,474 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ """
2
+ Simple Video Editor - ํ—ˆ๊น…ํŽ˜์ด์Šค ์ŠคํŽ˜์ด์Šค์šฉ
3
+ srcdoc ๋ฐฉ์‹์œผ๋กœ iframe ์‚ฌ์šฉ - ํŒŒ์ผ ์—…๋กœ๋“œ ์‹œ UI ์œ ์ง€
4
+ """
5
+
6
+ import gradio as gr
7
+ import base64
8
+ import os
9
+ import json
10
+
11
+ def get_editor_html(media_data="[]"):
12
+ """์—๋””ํ„ฐ HTML ์ƒ์„ฑ"""
13
+ return f'''<!DOCTYPE html>
14
+ <html lang="ko">
15
+ <head>
16
+ <meta charset="UTF-8">
17
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
18
+ <style>
19
+ *{{margin:0;padding:0;box-sizing:border-box}}
20
+ body{{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans KR',sans-serif;background:#f5f5f7;color:#1d1d1f;font-size:13px}}
21
+ .editor-container{{display:flex;flex-direction:column;height:100vh;background:#f5f5f7;overflow:hidden}}
22
+ .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)}}
23
+ .toolbar-title{{font-size:15px;font-weight:600;color:#1d1d1f;display:flex;align-items:center;gap:6px}}
24
+ .toolbar-title svg{{width:20px;height:20px;color:#6366f1}}
25
+ .toolbar-actions{{display:flex;gap:8px}}
26
+ .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}}
27
+ .btn svg{{width:14px;height:14px}}
28
+ .btn-primary{{background:#6366f1;color:#fff}}
29
+ .btn-primary:hover{{background:#4f46e5}}
30
+ .btn-success{{background:#10b981;color:#fff}}
31
+ .btn-success:hover{{background:#059669}}
32
+ .btn-danger{{background:#ef4444;color:#fff}}
33
+ .btn-danger:hover{{background:#dc2626}}
34
+ .btn-secondary{{background:#f3f4f6;color:#374151;border:1px solid #e5e7eb}}
35
+ .btn-secondary:hover{{background:#e5e7eb}}
36
+ .main-area{{display:flex;flex:1;overflow:hidden;background:#f5f5f7}}
37
+ .media-library{{width:200px;background:#fff;border-right:1px solid #e0e0e0;display:flex;flex-direction:column}}
38
+ .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}}
39
+ .library-content{{flex:1;overflow-y:auto;padding:8px}}
40
+ .library-hint{{text-align:center;padding:20px 10px;color:#9ca3af;font-size:11px;line-height:1.5}}
41
+ .media-grid{{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}}
42
+ .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}}
43
+ .media-item:hover{{transform:scale(1.02);box-shadow:0 2px 8px rgba(0,0,0,0.1);border-color:#6366f1}}
44
+ .media-item img,.media-item video{{width:100%;height:100%;object-fit:cover}}
45
+ .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}}
46
+ .media-item:hover .media-item-overlay{{opacity:1}}
47
+ .media-item-name{{font-size:9px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}
48
+ .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}}
49
+ .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}}
50
+ .media-item-type svg{{width:10px;height:10px;color:#fff}}
51
+ .media-item-icon{{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:24px;color:#9ca3af;background:#e5e7eb}}
52
+ .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)}}
53
+ .preview-container{{flex:1;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;background:#000}}
54
+ .preview-container video,.preview-container img{{max-width:100%;max-height:100%;object-fit:contain}}
55
+ .preview-placeholder{{text-align:center;color:#666}}
56
+ .preview-placeholder svg{{width:48px;height:48px;margin-bottom:12px;opacity:0.5}}
57
+ .preview-placeholder p{{font-size:12px}}
58
+ .playback-controls{{height:50px;background:linear-gradient(180deg,#2a2a2a,#1a1a1a);display:flex;align-items:center;justify-content:center;gap:8px;padding:0 16px}}
59
+ .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}}
60
+ .control-btn:hover{{background:rgba(255,255,255,0.2)}}
61
+ .control-btn svg{{width:14px;height:14px}}
62
+ .control-btn.play-btn{{width:40px;height:40px;background:#6366f1}}
63
+ .control-btn.play-btn:hover{{background:#4f46e5;transform:scale(1.05)}}
64
+ .control-btn.play-btn svg{{width:18px;height:18px}}
65
+ .time-display{{font-family:'SF Mono',Monaco,monospace;font-size:11px;color:#aaa;min-width:110px;text-align:center}}
66
+ .properties-panel{{width:180px;background:#fff;border-left:1px solid #e0e0e0;display:flex;flex-direction:column}}
67
+ .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}}
68
+ .properties-content{{flex:1;padding:12px;overflow-y:auto}}
69
+ .property-group{{margin-bottom:14px}}
70
+ .property-label{{font-size:10px;color:#6b7280;margin-bottom:4px;text-transform:uppercase;letter-spacing:0.3px}}
71
+ .property-input{{width:100%;padding:6px 8px;background:#f9fafb;border:1px solid #e5e7eb;border-radius:5px;color:#1d1d1f;font-size:12px}}
72
+ .property-input:focus{{outline:none;border-color:#6366f1;box-shadow:0 0 0 2px rgba(99,102,241,0.1)}}
73
+ .property-row{{display:flex;gap:8px}}
74
+ .property-row>div{{flex:1}}
75
+ .no-selection{{color:#9ca3af;text-align:center;padding:30px 15px;font-size:12px;line-height:1.5}}
76
+ .timeline-area{{height:180px;background:#fff;border-top:1px solid #e0e0e0;display:flex;flex-direction:column}}
77
+ .timeline-toolbar{{height:32px;background:#fafafa;border-bottom:1px solid #e0e0e0;display:flex;align-items:center;padding:0 8px;gap:6px}}
78
+ .timeline-toolbar .btn{{padding:4px 8px;font-size:11px}}
79
+ .timeline-toolbar .btn svg{{width:12px;height:12px}}
80
+ .timeline-zoom{{display:flex;align-items:center;gap:4px;margin-left:auto;font-size:11px;color:#6b7280}}
81
+ .timeline-zoom input{{width:60px;height:4px}}
82
+ .timeline-zoom svg{{width:12px;height:12px}}
83
+ .timeline-container{{flex:1;overflow-x:auto;overflow-y:hidden;position:relative;background:#f9fafb}}
84
+ .timeline-ruler{{height:22px;background:#fff;position:sticky;top:0;z-index:10;border-bottom:1px solid #e5e7eb}}
85
+ .timeline-tracks{{position:relative;min-height:120px}}
86
+ .timeline-track{{height:55px;border-bottom:1px solid #e5e7eb;position:relative;display:flex;align-items:center;background:#fff}}
87
+ .timeline-track:nth-child(2){{background:#fffbeb}}
88
+ .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}}
89
+ .track-label svg{{width:12px;height:12px}}
90
+ .track-content{{flex:1;height:100%;position:relative;min-width:800px}}
91
+ .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)}}
92
+ .timeline-clip:hover{{box-shadow:0 0 0 2px #6366f1}}
93
+ .timeline-clip.selected{{box-shadow:0 0 0 2px #6366f1,0 4px 12px rgba(99,102,241,0.3)}}
94
+ .timeline-clip.video{{background:linear-gradient(135deg,#818cf8,#6366f1)}}
95
+ .timeline-clip.image{{background:linear-gradient(135deg,#34d399,#10b981)}}
96
+ .timeline-clip.audio{{background:linear-gradient(135deg,#fbbf24,#f59e0b)}}
97
+ .clip-thumbnail{{width:45px;height:100%;object-fit:cover;flex-shrink:0}}
98
+ .clip-info{{padding:0 6px;flex:1;overflow:hidden}}
99
+ .clip-name{{font-size:10px;font-weight:500;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}
100
+ .clip-duration{{font-size:9px;color:rgba(255,255,255,0.7)}}
101
+ .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}}
102
+ .timeline-clip:hover .clip-handles{{opacity:1}}
103
+ .clip-handle-left{{left:0;border-radius:6px 0 0 6px}}
104
+ .clip-handle-right{{right:0;border-radius:0 6px 6px 0}}
105
+ .playhead{{position:absolute;top:0;bottom:0;width:2px;background:#ef4444;z-index:20;pointer-events:none}}
106
+ .playhead::before{{content:'';position:absolute;top:0;left:-5px;width:12px;height:12px;background:#ef4444;clip-path:polygon(50% 100%,0 0,100% 0)}}
107
+ .drop-highlight{{background:rgba(99,102,241,0.1)!important;outline:2px dashed #6366f1!important;outline-offset:-2px}}
108
+ .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)}}
109
+ .context-menu-item{{padding:6px 12px;cursor:pointer;display:flex;align-items:center;gap:8px;font-size:12px}}
110
+ .context-menu-item:hover{{background:#f3f4f6}}
111
+ .context-menu-item svg{{width:12px;height:12px}}
112
+ .context-menu-item.danger{{color:#ef4444}}
113
+ .context-menu-divider{{height:1px;background:#e5e7eb;margin:4px 0}}
114
+ .status-bar{{height:24px;background:#f0f0f0;border-top:1px solid #e0e0e0;display:flex;align-items:center;padding:0 12px;font-size:11px;color:#666}}
115
+ .modal-overlay{{position:fixed;inset:0;background:rgba(0,0,0,0.5);display:flex;align-items:center;justify-content:center;z-index:1000}}
116
+ .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)}}
117
+ .modal h3{{margin-bottom:12px;font-size:16px}}
118
+ .modal p{{font-size:13px;color:#6b7280}}
119
+ .progress-bar{{height:6px;background:#e5e7eb;border-radius:3px;overflow:hidden;margin:16px 0}}
120
+ .progress-fill{{height:100%;background:linear-gradient(90deg,#6366f1,#8b5cf6);transition:width 0.3s}}
121
+ ::-webkit-scrollbar{{width:6px;height:6px}}
122
+ ::-webkit-scrollbar-track{{background:#f1f1f1}}
123
+ ::-webkit-scrollbar-thumb{{background:#c1c1c1;border-radius:3px}}
124
+ </style>
125
+ </head>
126
+ <body>
127
+ <div class="editor-container">
128
+ <div class="toolbar">
129
+ <div class="toolbar-title">
130
+ <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>
131
+ Simple Video Editor
132
+ </div>
133
+ <div class="toolbar-actions">
134
+ <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>
135
+ <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>
136
+ </div>
137
+ </div>
138
+ <div class="main-area">
139
+ <div class="media-library">
140
+ <div class="library-header">๐Ÿ“ ๋ฏธ๋””์–ด</div>
141
+ <div class="library-content">
142
+ <div class="library-hint" id="libraryHint">โฌ†๏ธ ์œ„์˜ ํŒŒ์ผ ์—…๋กœ๋“œ๋ฅผ<br>์‚ฌ์šฉํ•˜์„ธ์š”</div>
143
+ <div class="media-grid" id="mediaGrid"></div>
144
+ </div>
145
+ </div>
146
+ <div class="preview-area">
147
+ <div class="preview-container" id="previewContainer">
148
+ <div class="preview-placeholder">
149
+ <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>
150
+ <p>ํƒ€์ž„๋ผ์ธ์— ๋ฏธ๋””์–ด๋ฅผ ์ถ”๊ฐ€ํ•˜์„ธ์š”</p>
151
+ </div>
152
+ </div>
153
+ <div class="playback-controls">
154
+ <button class="control-btn" onclick="editorSkipStart()"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M6 6h2v12H6zm3.5 6l8.5 6V6z"/></svg></button>
155
+ <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>
156
+ <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>
157
+ <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>
158
+ <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>
159
+ <div class="time-display"><span id="currentTimeDisplay">00:00.00</span> / <span id="durationDisplay">00:00.00</span></div>
160
+ <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>
161
+ </div>
162
+ </div>
163
+ <div class="properties-panel">
164
+ <div class="properties-header">โš™๏ธ ์†์„ฑ</div>
165
+ <div class="properties-content" id="propertiesContent"><div class="no-selection">ํด๋ฆฝ์„ ์„ ํƒํ•˜๋ฉด<br>์†์„ฑ์„ ํŽธ์ง‘ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค</div></div>
166
+ </div>
167
+ </div>
168
+ <div class="timeline-area">
169
+ <div class="timeline-toolbar">
170
+ <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>
171
+ <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>
172
+ <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>
173
+ <div class="timeline-zoom">
174
+ <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>
175
+ <input type="range" min="0.5" max="3" step="0.1" value="1" oninput="editorSetZoom(this.value)">
176
+ <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>
177
+ </div>
178
+ </div>
179
+ <div class="timeline-container" id="timelineContainer" onclick="editorTimelineClick(event)">
180
+ <div class="timeline-ruler" id="timelineRuler"></div>
181
+ <div class="timeline-tracks">
182
+ <div class="timeline-track" data-track="0">
183
+ <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>
184
+ <div class="track-content" id="track0"></div>
185
+ </div>
186
+ <div class="timeline-track" data-track="1">
187
+ <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>
188
+ <div class="track-content" id="track1"></div>
189
+ </div>
190
+ </div>
191
+ <div class="playhead" id="playhead" style="left:70px"></div>
192
+ </div>
193
+ </div>
194
+ <div class="status-bar" id="statusBar">์ค€๋น„๋จ | ๋ฏธ๋””์–ด: 0๊ฐœ | ํด๋ฆฝ: 0๊ฐœ</div>
195
+ </div>
196
+ <div class="context-menu" id="contextMenu" style="display:none">
197
+ <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>
198
+ <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>
199
+ <div class="context-menu-divider"></div>
200
+ <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>
201
+ </div>
202
+ <div class="modal-overlay" id="exportModal" style="display:none">
203
+ <div class="modal">
204
+ <h3>๐ŸŽฌ ์˜์ƒ ๋‚ด๋ณด๋‚ด๊ธฐ</h3>
205
+ <p id="exportStatus">์˜์ƒ์„ ์ฒ˜๋ฆฌํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค...</p>
206
+ <div class="progress-bar"><div class="progress-fill" id="exportProgress" style="width:0%"></div></div>
207
+ <button class="btn btn-secondary" onclick="editorCancelExport()" id="cancelExportBtn">์ทจ์†Œ</button>
208
+ </div>
209
+ </div>
210
+ <script>
211
+ var S={{mediaLibrary:[],timelineClips:[],selectedClipId:null,isPlaying:false,isMuted:false,currentTime:0,totalDuration:0,zoom:1,pps:80,undoStack:[],animId:null}};
212
+ function gid(){{return Date.now().toString(36)+Math.random().toString(36).substr(2)}}
213
+ 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}}
214
+ function upStat(msg){{var e=document.getElementById('statusBar');if(e)e.textContent=msg+' | ๋ฏธ๋””์–ด: '+S.mediaLibrary.length+'๊ฐœ | ํด๋ฆฝ: '+S.timelineClips.length+'๊ฐœ'}}
215
+ function save(){{S.undoStack.push(JSON.stringify(S.timelineClips));if(S.undoStack.length>50)S.undoStack.shift()}}
216
+ function addMedia(name,type,url){{
217
+ console.log('Adding:',name,type);
218
+ var m={{id:gid(),name:name,type:type,url:url,duration:type==='image'?5:0,thumb:type==='image'?url:null}};
219
+ S.mediaLibrary.push(m);
220
+ if(type==='video'||type==='audio'){{
221
+ var el=document.createElement(type);el.src=url;el.preload='metadata';
222
+ el.onloadedmetadata=function(){{m.duration=el.duration;renderLib();if(type==='video')el.currentTime=Math.min(1,el.duration/2)}};
223
+ 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){{}}}}}}
224
+ }}
225
+ renderLib();upStat('๋ฏธ๋””์–ด ์ถ”๊ฐ€๋จ: '+name);
226
+ setTimeout(function(){{addToTL(m)}},100);
227
+ }}
228
+ function renderLib(){{
229
+ var g=document.getElementById('mediaGrid'),h=document.getElementById('libraryHint');
230
+ if(!g)return;
231
+ if(h)h.style.display=S.mediaLibrary.length===0?'block':'none';
232
+ g.innerHTML='';
233
+ 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>'}};
234
+ S.mediaLibrary.forEach(function(m){{
235
+ var d=document.createElement('div');d.className='media-item';d.draggable=true;
236
+ d.ondblclick=function(){{addToTL(m)}};
237
+ d.ondragstart=function(e){{e.dataTransfer.setData('mid',m.id);this.style.opacity='0.5'}};
238
+ d.ondragend=function(){{this.style.opacity='1'}};
239
+ var th=m.thumb?'<img src="'+m.thumb+'">':'<div class="media-item-icon">'+(m.type==='video'?'๐ŸŽฌ':m.type==='audio'?'๐ŸŽต':'๐Ÿ–ผ๏ธ')+'</div>';
240
+ 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>';
241
+ g.appendChild(d);
242
+ }});
243
+ }}
244
+ function addToTL(m,st){{
245
+ save();
246
+ var tr=m.type==='audio'?1:0;
247
+ var start=st!==undefined?st:getTrEnd(tr);
248
+ 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}};
249
+ S.timelineClips.push(c);
250
+ renderTL();upDur();upStat('ํด๋ฆฝ ์ถ”๊ฐ€๋จ: '+c.name);
251
+ }}
252
+ 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}}
253
+ function renderTL(){{
254
+ var t0=document.getElementById('track0'),t1=document.getElementById('track1');
255
+ if(t0)t0.innerHTML='';if(t1)t1.innerHTML='';
256
+ S.timelineClips.forEach(function(c){{
257
+ var tr=document.getElementById('track'+c.track);if(!tr)return;
258
+ var d=document.createElement('div');
259
+ d.className='timeline-clip '+c.type+(S.selectedClipId===c.id?' selected':'');
260
+ var cd=c.te-c.ts,l=c.start*S.pps*S.zoom,w=Math.max(40,cd*S.pps*S.zoom);
261
+ d.style.left=l+'px';d.style.width=w+'px';d.draggable=true;
262
+ d.onclick=function(e){{e.stopPropagation();selClip(c.id)}};
263
+ d.oncontextmenu=function(e){{e.preventDefault();selClip(c.id);showCtx(e.clientX,e.clientY)}};
264
+ d.ondragstart=function(e){{e.dataTransfer.setData('cid',c.id);e.dataTransfer.setData('ox',e.offsetX.toString())}};
265
+ var th=c.thumb?'<img class="clip-thumbnail" src="'+c.thumb+'">':'';
266
+ 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>';
267
+ tr.appendChild(d);
268
+ }});
269
+ renderRuler();setupDrop();
270
+ }}
271
+ function renderRuler(){{
272
+ var r=document.getElementById('timelineRuler');if(!r)return;
273
+ var w=Math.max(S.totalDuration*S.pps*S.zoom+300,1000);r.style.width=w+'px';
274
+ var h='<svg width="100%" height="22" style="position:absolute;left:70px">';
275
+ var st=S.zoom<0.7?5:S.zoom<1.5?2:1;
276
+ 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>'}}
277
+ h+='</svg>';r.innerHTML=h;
278
+ }}
279
+ function setupDrop(){{
280
+ ['track0','track1'].forEach(function(tid,idx){{
281
+ var tr=document.getElementById(tid);if(!tr)return;
282
+ tr.ondragover=function(e){{e.preventDefault();tr.classList.add('drop-highlight')}};
283
+ tr.ondragleave=function(){{tr.classList.remove('drop-highlight')}};
284
+ tr.ondrop=function(e){{
285
+ e.preventDefault();tr.classList.remove('drop-highlight');
286
+ var rect=tr.getBoundingClientRect(),x=e.clientX-rect.left,t=Math.max(0,x/(S.pps*S.zoom));
287
+ var mid=e.dataTransfer.getData('mid'),cid=e.dataTransfer.getData('cid'),ox=parseFloat(e.dataTransfer.getData('ox')||0);
288
+ 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()}}}}}}
289
+ 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()}}}}
290
+ }};
291
+ }});
292
+ }}
293
+ function selClip(id){{S.selectedClipId=id;renderTL();renderProps()}}
294
+ function renderProps(){{
295
+ var ct=document.getElementById('propertiesContent');if(!ct)return;
296
+ var c=S.timelineClips.find(function(x){{return x.id===S.selectedClipId}});
297
+ if(!c){{ct.innerHTML='<div class="no-selection">ํด๋ฆฝ์„ ์„ ํƒํ•˜๋ฉด<br>์†์„ฑ์„ ํŽธ์ง‘ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค</div>';return}}
298
+ var cd=c.te-c.ts;
299
+ 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>'+
300
+ '<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>'+
301
+ '<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>'+
302
+ '<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>'+
303
+ '<div class="property-group"><div class="property-label">๊ธธ์ด</div><div style="padding:6px 0;font-size:12px;color:#374151">'+fmt(cd)+'</div></div>';
304
+ 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>';
305
+ ct.innerHTML=h;
306
+ }}
307
+ 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()}}}}
308
+ function editorSplit(){{
309
+ if(!S.selectedClipId)return;
310
+ var c=S.timelineClips.find(function(x){{return x.id===S.selectedClipId}});if(!c)return;
311
+ save();var cd=c.te-c.ts,sp=cd/2;
312
+ var c2=JSON.parse(JSON.stringify(c));c2.id=gid();c2.start=c.start+sp;c2.ts=c.ts+sp;
313
+ c.te=c.ts+sp;
314
+ S.timelineClips.push(c2);renderTL();hideCtx();upStat('ํด๋ฆฝ ๋ถ„ํ• ๋จ');
315
+ }}
316
+ function editorDuplicate(){{
317
+ if(!S.selectedClipId)return;
318
+ var c=S.timelineClips.find(function(x){{return x.id===S.selectedClipId}});if(!c)return;
319
+ save();var cd=c.te-c.ts;
320
+ var nc=JSON.parse(JSON.stringify(c));nc.id=gid();nc.start=c.start+cd;
321
+ S.timelineClips.push(nc);renderTL();upDur();hideCtx();upStat('ํด๋ฆฝ ๋ณต์ œ๋จ');
322
+ }}
323
+ function editorDelete(){{
324
+ if(!S.selectedClipId)return;save();
325
+ S.timelineClips=S.timelineClips.filter(function(x){{return x.id!==S.selectedClipId}});
326
+ S.selectedClipId=null;renderTL();renderProps();upDur();hideCtx();upStat('ํด๋ฆฝ ์‚ญ์ œ๋จ');
327
+ }}
328
+ function editorUndo(){{if(S.undoStack.length>0){{S.timelineClips=JSON.parse(S.undoStack.pop());renderTL();upDur();upStat('์‹คํ–‰์ทจ์†Œ')}}}}
329
+ 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)}}
330
+ function editorTogglePlay(){{
331
+ S.isPlaying=!S.isPlaying;var ic=document.getElementById('playIcon');
332
+ if(S.isPlaying){{ic.innerHTML='<rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/>';startPB()}}
333
+ else{{ic.innerHTML='<polygon points="5 3 19 12 5 21 5 3"/>';stopPB()}}
334
+ }}
335
+ function startPB(){{
336
+ var last=performance.now();
337
+ function anim(now){{
338
+ if(!S.isPlaying)return;
339
+ var d=(now-last)/1000;last=now;S.currentTime+=d;
340
+ 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}}}}
341
+ upPH();upPrev();S.animId=requestAnimationFrame(anim);
342
+ }}
343
+ S.animId=requestAnimationFrame(anim);
344
+ }}
345
+ function stopPB(){{if(S.animId){{cancelAnimationFrame(S.animId);S.animId=null}}var v=document.querySelector('#previewContainer video');if(v&&!v.paused)v.pause()}}
346
+ 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)}}
347
+ function upPrev(){{
348
+ var ct=document.getElementById('previewContainer');if(!ct)return;
349
+ var cur=S.timelineClips.filter(function(c){{var ce=c.start+(c.te-c.ts);return S.currentTime>=c.start&&S.currentTime<ce}});
350
+ var vc=cur.find(function(c){{return c.type==='video'||c.type==='image'}});
351
+ if(vc){{
352
+ var ct2=S.currentTime-vc.start+vc.ts;
353
+ if(vc.type==='image'){{if(!ct.querySelector('img[data-cid="'+vc.id+'"]'))ct.innerHTML='<img src="'+vc.url+'" data-cid="'+vc.id+'">'}}
354
+ else if(vc.type==='video'){{
355
+ var v=ct.querySelector('video[data-cid="'+vc.id+'"]');
356
+ if(!v){{ct.innerHTML='<video src="'+vc.url+'" data-cid="'+vc.id+'"'+(S.isMuted?' muted':'')+'></video>';v=ct.querySelector('video')}}
357
+ if(Math.abs(v.currentTime-ct2)>0.2)v.currentTime=ct2;
358
+ if(S.isPlaying&&v.paused)v.play().catch(function(){{}});
359
+ else if(!S.isPlaying&&!v.paused)v.pause();
360
+ v.volume=S.isMuted?0:vc.vol;v.muted=S.isMuted;
361
+ }}
362
+ }}else{{
363
+ var ha=cur.some(function(c){{return c.type==='audio'}});
364
+ 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>';
365
+ }}
366
+ }}
367
+ function editorSkipStart(){{S.currentTime=0;upPH();upPrev()}}
368
+ function editorSkipEnd(){{S.currentTime=S.totalDuration;upPH();upPrev()}}
369
+ function editorSkipBack(){{S.currentTime=Math.max(0,S.currentTime-5);upPH();upPrev()}}
370
+ function editorSkipForward(){{S.currentTime=Math.min(S.totalDuration,S.currentTime+5);upPH();upPrev()}}
371
+ function editorToggleMute(){{
372
+ S.isMuted=!S.isMuted;var ic=document.getElementById('volumeIcon');
373
+ 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"/>';
374
+ 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"/>';
375
+ var v=document.querySelector('#previewContainer video');if(v)v.muted=S.isMuted;
376
+ }}
377
+ function editorSetZoom(v){{S.zoom=parseFloat(v);renderTL();upPH()}}
378
+ function editorTimelineClick(e){{
379
+ if(e.target.closest('.timeline-clip'))return;
380
+ var ct=document.getElementById('timelineContainer'),rect=ct.getBoundingClientRect();
381
+ var x=e.clientX-rect.left-70+ct.scrollLeft;
382
+ S.currentTime=Math.max(0,Math.min(S.totalDuration,x/(S.pps*S.zoom)));
383
+ upPH();upPrev();
384
+ }}
385
+ function showCtx(x,y){{var m=document.getElementById('contextMenu');m.style.display='block';m.style.left=x+'px';m.style.top=y+'px'}}
386
+ function hideCtx(){{document.getElementById('contextMenu').style.display='none'}}
387
+ document.addEventListener('click',function(e){{if(!e.target.closest('.context-menu'))hideCtx()}});
388
+ function editorExport(){{
389
+ if(S.timelineClips.length===0){{alert('ํƒ€์ž„๋ผ์ธ์— ํด๋ฆฝ์„ ์ถ”๊ฐ€ํ•ด์ฃผ์„ธ์š”.');return}}
390
+ document.getElementById('exportModal').style.display='flex';
391
+ document.getElementById('exportProgress').style.width='0%';
392
+ document.getElementById('exportStatus').textContent='์˜์ƒ์„ ์ฒ˜๋ฆฌํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค...';
393
+ var p=0,iv=setInterval(function(){{
394
+ p+=2;document.getElementById('exportProgress').style.width=p+'%';
395
+ if(p===30)document.getElementById('exportStatus').textContent='ํด๋ฆฝ ๋ณ‘ํ•ฉ ์ค‘...';
396
+ if(p===60)document.getElementById('exportStatus').textContent='์˜ค๋””์˜ค ์ฒ˜๋ฆฌ ์ค‘...';
397
+ if(p===90)document.getElementById('exportStatus').textContent='์ตœ์ข… ๋ Œ๋”๋ง ์ค‘...';
398
+ if(p>=100){{clearInterval(iv);document.getElementById('exportStatus').textContent='โœ… ์™„๋ฃŒ!';document.getElementById('cancelExportBtn').textContent='๋‹ซ๊ธฐ'}}
399
+ }},50);
400
+ }}
401
+ function editorCancelExport(){{document.getElementById('exportModal').style.display='none';document.getElementById('cancelExportBtn').textContent='์ทจ์†Œ'}}
402
+ document.addEventListener('keydown',function(e){{
403
+ if(e.target.tagName==='INPUT')return;
404
+ if(e.code==='Space'){{e.preventDefault();editorTogglePlay()}}
405
+ else if(e.code==='Delete'||e.code==='Backspace'){{e.preventDefault();editorDelete()}}
406
+ else if(e.code==='KeyD'&&(e.ctrlKey||e.metaKey)){{e.preventDefault();editorDuplicate()}}
407
+ else if(e.code==='KeyZ'&&(e.ctrlKey||e.metaKey)){{e.preventDefault();editorUndo()}}
408
+ else if(e.code==='ArrowLeft'){{e.preventDefault();S.currentTime=Math.max(0,S.currentTime-(e.shiftKey?1:0.1));upPH();upPrev()}}
409
+ else if(e.code==='ArrowRight'){{e.preventDefault();S.currentTime=Math.min(S.totalDuration,S.currentTime+(e.shiftKey?1:0.1));upPH();upPrev()}}
410
+ }});
411
+ renderTL();upStat('์ค€๋น„๋จ');
412
+ var initMedia={media_data};
413
+ if(initMedia&&initMedia.length>0)initMedia.forEach(function(m){{addMedia(m.name,m.type,m.dataUrl)}});
414
+ console.log('Editor ready');
415
+ </script>
416
+ </body>
417
+ </html>'''
418
+
419
+
420
+ def process_file(file):
421
+ if file is None:
422
+ return []
423
+ results = []
424
+ files = file if isinstance(file, list) else [file]
425
+ for f in files:
426
+ if f is None:
427
+ continue
428
+ file_path = f.name if hasattr(f, 'name') else f
429
+ file_name = os.path.basename(file_path)
430
+ ext = file_name.lower().split('.')[-1]
431
+ if ext in ['mp4', 'webm', 'mov', 'avi', 'mkv']:
432
+ file_type, mime = 'video', f'video/{ext}'
433
+ elif ext in ['jpg', 'jpeg', 'png', 'gif', 'webp']:
434
+ file_type, mime = 'image', f'image/{ext}'
435
+ elif ext in ['mp3', 'wav', 'ogg', 'm4a', 'aac']:
436
+ file_type, mime = 'audio', f'audio/{ext}'
437
+ else:
438
+ continue
439
+ with open(file_path, 'rb') as fp:
440
+ data = base64.b64encode(fp.read()).decode('utf-8')
441
+ results.append({'name': file_name, 'type': file_type, 'dataUrl': f'data:{mime};base64,{data}'})
442
+ return results
443
+
444
+
445
+ def create_editor_iframe(media_data):
446
+ """srcdoc ๋ฐฉ์‹์œผ๋กœ iframe ์ƒ์„ฑ"""
447
+ media_json = json.dumps(media_data, ensure_ascii=False)
448
+ html_content = get_editor_html(media_json)
449
+ # srcdoc๋ฅผ ์ž‘์€๋”ฐ์˜ดํ‘œ๋กœ ๊ฐ์‹ธ๋ฏ€๋กœ, ๋‚ด๋ถ€์˜ ์ž‘์€๋”ฐ์˜ดํ‘œ๋งŒ ์ด์Šค์ผ€์ดํ”„
450
+ escaped = html_content.replace("'", "&#39;")
451
+ return f"<iframe srcdoc='{escaped}' style='width:100%;height:800px;border:none;border-radius:12px;'></iframe>"
452
+
453
+
454
+ with gr.Blocks() as demo:
455
+ gr.Markdown("## ๐ŸŽฌ Simple Video Editor")
456
+ gr.Markdown("ํŒŒ์ผ์„ ์—…๋กœ๋“œํ•˜๋ฉด ์ž๋™์œผ๋กœ ํƒ€์ž„๋ผ์ธ์— ์ถ”๊ฐ€๋ฉ๋‹ˆ๋‹ค.")
457
+
458
+ file_input = gr.File(
459
+ label="๐Ÿ“ ํŒŒ์ผ ์—…๋กœ๋“œ (์˜์ƒ/์ด๋ฏธ์ง€/์˜ค๋””์˜ค)",
460
+ file_count="multiple",
461
+ file_types=["video", "image", "audio"]
462
+ )
463
+
464
+ editor_html = gr.HTML(value=create_editor_iframe([]))
465
+
466
+ def on_file_upload(files):
467
+ if not files:
468
+ return create_editor_iframe([])
469
+ return create_editor_iframe(process_file(files))
470
+
471
+ file_input.change(fn=on_file_upload, inputs=[file_input], outputs=[editor_html])
472
+
473
+ if __name__ == "__main__":
474
+ demo.launch()