seawolf2357 commited on
Commit
12a739c
·
verified ·
1 Parent(s): 3798623

Delete app-BACKUP2.py

Browse files
Files changed (1) hide show
  1. app-BACKUP2.py +0 -1458
app-BACKUP2.py DELETED
@@ -1,1458 +0,0 @@
1
- """
2
- Simple Video Editor - Canvas 기반 렌더링
3
- 빈 프레임 문제 완전 해결 + 서버 사이드 MP4 내보내기
4
- 블러 배경 내보내기 수정: 더블 버퍼링
5
- """
6
-
7
- import gradio as gr
8
- import base64
9
- import os
10
- import json
11
- import subprocess
12
- import tempfile
13
- import shutil
14
- import time
15
-
16
- # 서버 사이드 MP4 내보내기용
17
- UPLOAD_DIR = tempfile.mkdtemp()
18
- uploaded_files = {} # {filename: filepath}
19
-
20
- def get_editor_html(media_data="[]"):
21
- return f'''<!DOCTYPE html>
22
- <html lang="ko">
23
- <head>
24
- <meta charset="UTF-8">
25
- <style>
26
- *{{margin:0;padding:0;box-sizing:border-box}}
27
- body{{font-family:-apple-system,BlinkMacSystemFont,sans-serif;background:#f5f5f7;font-size:13px}}
28
- .editor{{display:flex;flex-direction:column;height:100vh}}
29
- .toolbar{{height:44px;background:#fff;border-bottom:1px solid #ddd;display:flex;align-items:center;justify-content:space-between;padding:0 12px}}
30
- .toolbar-title{{font-size:15px;font-weight:600}}
31
- .btn{{padding:5px 10px;border:none;border-radius:5px;cursor:pointer;font-size:11px;font-weight:500}}
32
- .btn-secondary{{background:#f0f0f0;color:#333}}
33
- .btn-secondary:hover{{background:#e0e0e0}}
34
- .btn-success{{background:#10b981;color:#fff}}
35
- .btn-danger{{background:#ef4444;color:#fff}}
36
- .main{{display:flex;flex:1;overflow:hidden}}
37
- .library{{width:160px;background:#fff;border-right:1px solid #ddd;display:flex;flex-direction:column}}
38
- .lib-header{{padding:8px;border-bottom:1px solid #eee;font-size:10px;font-weight:600;color:#666}}
39
- .lib-content{{flex:1;overflow-y:auto;padding:6px}}
40
- .lib-hint{{text-align:center;padding:15px;color:#999;font-size:10px}}
41
- .media-grid{{display:grid;grid-template-columns:repeat(2,1fr);gap:4px}}
42
- .media-item{{aspect-ratio:16/9;background:#f0f0f0;border-radius:4px;overflow:hidden;cursor:grab;position:relative;border:1px solid #e0e0e0}}
43
- .media-item:hover{{border-color:#6366f1}}
44
- .media-item img{{width:100%;height:100%;object-fit:cover}}
45
- .media-item-icon{{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:18px}}
46
- .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}}
47
- .preview-area{{flex:1;display:flex;flex-direction:column;background:#1a1a1a;margin:6px;border-radius:8px;overflow:hidden}}
48
- .preview-box{{flex:1;display:flex;align-items:center;justify-content:center;background:#000;overflow:hidden}}
49
- #previewCanvas{{background:#000;box-shadow:0 0 20px rgba(0,0,0,0.5);cursor:default}}
50
- .controls{{height:45px;background:#222;display:flex;align-items:center;justify-content:center;gap:6px}}
51
- .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}}
52
- .ctrl-btn:hover{{background:rgba(255,255,255,0.2)}}
53
- .ctrl-btn.play{{width:36px;height:36px;background:#6366f1}}
54
- .time-display{{font-family:monospace;font-size:10px;color:#aaa;min-width:90px;text-align:center}}
55
- .props{{width:140px;background:#fff;border-left:1px solid #ddd}}
56
- .props-header{{padding:8px;border-bottom:1px solid #eee;font-size:10px;font-weight:600;color:#666}}
57
- .props-content{{padding:8px}}
58
- .no-sel{{color:#999;text-align:center;padding:15px;font-size:10px}}
59
- .prop-group{{margin-bottom:10px}}
60
- .prop-label{{font-size:9px;color:#666;margin-bottom:2px}}
61
- .prop-input{{width:100%;padding:4px;border:1px solid #ddd;border-radius:3px;font-size:10px}}
62
- .timeline{{height:180px;background:#fff;border-top:1px solid #ddd;display:flex;flex-direction:column}}
63
- .tl-toolbar{{height:28px;background:#fafafa;border-bottom:1px solid #eee;display:flex;align-items:center;padding:0 6px;gap:4px}}
64
- .tl-toolbar .btn{{padding:2px 6px;font-size:9px}}
65
- .tl-zoom{{display:flex;align-items:center;gap:3px;margin-left:auto;font-size:9px;color:#666}}
66
- .tl-zoom input{{width:50px}}
67
- .tl-container{{flex:1;overflow-x:auto;position:relative}}
68
- .tl-ruler{{height:18px;background:#fff;border-bottom:1px solid #eee}}
69
- .tl-tracks{{position:relative}}
70
- .tl-track{{height:45px;border-bottom:1px solid #eee;display:flex}}
71
- .tl-track:nth-child(2){{background:#fffbeb}}
72
- .tl-track:nth-child(3){{background:#fdf2f8}}
73
- .track-label{{width:50px;padding:0 4px;font-size:8px;color:#666;background:#fafafa;display:flex;align-items:center;border-right:1px solid #eee}}
74
- .track-content{{flex:1;position:relative;min-width:600px}}
75
- .clip{{position:absolute;height:36px;top:4px;border-radius:4px;cursor:grab;display:flex;align-items:center;overflow:hidden}}
76
- .clip:hover{{box-shadow:0 0 0 2px #6366f1}}
77
- .clip.selected{{box-shadow:0 0 0 2px #6366f1}}
78
- .clip.video{{background:linear-gradient(135deg,#818cf8,#6366f1)}}
79
- .clip.image{{background:linear-gradient(135deg,#34d399,#10b981)}}
80
- .clip.audio{{background:linear-gradient(135deg,#fbbf24,#f59e0b)}}
81
- .clip.text{{background:linear-gradient(135deg,#f472b6,#ec4899)}}
82
- .clip-thumb{{width:36px;height:100%;object-fit:cover}}
83
- .clip-info{{padding:0 4px;flex:1;overflow:hidden}}
84
- .clip-name{{font-size:8px;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}
85
- .clip-dur{{font-size:7px;color:rgba(255,255,255,0.7)}}
86
- .clip-handle{{position:absolute;top:0;bottom:0;width:8px;background:rgba(255,255,255,0.5);cursor:ew-resize;opacity:0}}
87
- .clip:hover .clip-handle{{opacity:1}}
88
- .clip-handle-l{{left:0;border-radius:4px 0 0 4px}}
89
- .clip-handle-r{{right:0;border-radius:0 4px 4px 0}}
90
- .playhead{{position:absolute;top:0;bottom:0;width:2px;background:#ef4444;z-index:10;pointer-events:none}}
91
- .playhead::before{{content:"";position:absolute;top:0;left:-4px;border-left:5px solid transparent;border-right:5px solid transparent;border-top:7px solid #ef4444}}
92
- .drop-zone{{background:rgba(99,102,241,0.1)!important;outline:2px dashed #6366f1!important}}
93
- .status{{height:20px;background:#f5f5f5;border-top:1px solid #ddd;display:flex;align-items:center;padding:0 8px;font-size:9px;color:#666}}
94
- .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}}
95
- .ctx-item{{padding:5px 10px;cursor:pointer;font-size:10px}}
96
- .ctx-item:hover{{background:#f5f5f5}}
97
- .ctx-item.danger{{color:#ef4444}}
98
- .modal{{position:fixed;inset:0;background:rgba(0,0,0,0.5);display:flex;align-items:center;justify-content:center;z-index:1000}}
99
- .modal-box{{background:#fff;border-radius:8px;padding:16px;min-width:240px;text-align:center}}
100
- .modal-box h3{{margin-bottom:8px;font-size:13px}}
101
- .progress{{height:5px;background:#eee;border-radius:3px;overflow:hidden;margin:10px 0}}
102
- .progress-bar{{height:100%;background:#6366f1;transition:width 0.2s}}
103
- .hidden-media{{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}}
104
- </style>
105
- </head>
106
- <body>
107
- <div class="editor">
108
- <div class="toolbar">
109
- <div class="toolbar-title">🎬 Video Editor</div>
110
- <div style="display:flex;gap:8px;align-items:center">
111
- <select id="ratioSelect" onchange="setRatio(this.value)" style="padding:4px 8px;border-radius:4px;border:1px solid #ddd;font-size:11px">
112
- <option value="16:9">16:9 (가로)</option>
113
- <option value="9:16">9:16 (세로)</option>
114
- <option value="1:1">1:1 (정사각)</option>
115
- <option value="4:3">4:3</option>
116
- <option value="4:5">4:5 (인스타)</option>
117
- </select>
118
- <select id="fillMode" onchange="setFillMode(this.value)" style="padding:4px 8px;border-radius:4px;border:1px solid #ddd;font-size:11px">
119
- <option value="fit">맞춤 (여백)</option>
120
- <option value="fill">채우기 (확대)</option>
121
- <option value="blur">블러 배경</option>
122
- </select>
123
- <button class="btn btn-secondary" onclick="undo()">↩ 실행취소</button>
124
- <button class="btn btn-success" onclick="exportVideo()">📥 내보내기</button>
125
- </div>
126
- </div>
127
- <div class="main">
128
- <div class="library">
129
- <div class="lib-header">📁 미디어</div>
130
- <div class="lib-content">
131
- <div class="lib-hint" id="hint">파일을 업로드하세요</div>
132
- <div class="media-grid" id="mediaGrid"></div>
133
- </div>
134
- </div>
135
- <div class="preview-area">
136
- <div class="preview-box">
137
- <canvas id="previewCanvas" width="640" height="360"></canvas>
138
- </div>
139
- <div class="controls">
140
- <button class="ctrl-btn" onclick="seek(0)">⏮</button>
141
- <button class="ctrl-btn" onclick="seek(S.time-5)">⏪</button>
142
- <button class="ctrl-btn play" onclick="togglePlay()" id="playBtn">▶</button>
143
- <button class="ctrl-btn" onclick="seek(S.time+5)">⏩</button>
144
- <button class="ctrl-btn" onclick="seek(S.dur)">⏭</button>
145
- <div class="time-display"><span id="curT">00:00.00</span> / <span id="totT">00:00.00</span></div>
146
- <button class="ctrl-btn" onclick="toggleMute()" id="muteBtn">🔊</button>
147
- </div>
148
- </div>
149
- <div class="props">
150
- <div class="props-header">⚙️ 속성</div>
151
- <div class="props-content" id="propsBox"><div class="no-sel">클립 선택</div></div>
152
- </div>
153
- </div>
154
- <div class="timeline">
155
- <div class="tl-toolbar">
156
- <button class="btn btn-secondary" onclick="addTextClip()">📝 텍스트</button>
157
- <button class="btn btn-secondary" onclick="splitClip()">✂ 자르기</button>
158
- <button class="btn btn-secondary" onclick="dupeClip()">📋 복제</button>
159
- <button class="btn btn-danger" onclick="delClip()">🗑 삭제</button>
160
- <div class="tl-zoom">🔍<input type="range" min="0.5" max="3" step="0.1" value="1" oninput="setZoom(this.value)"></div>
161
- </div>
162
- <div class="tl-container" id="tlBox" onclick="tlClick(event)">
163
- <div class="tl-ruler" id="ruler"></div>
164
- <div class="tl-tracks">
165
- <div class="tl-track"><div class="track-label">🎬 영상</div><div class="track-content" id="t0"></div></div>
166
- <div class="tl-track"><div class="track-label">🎵 오디오</div><div class="track-content" id="t1"></div></div>
167
- <div class="tl-track"><div class="track-label">📝 텍스트</div><div class="track-content" id="t2"></div></div>
168
- </div>
169
- <div class="playhead" id="playhead" style="left:50px"></div>
170
- </div>
171
- </div>
172
- <div class="status" id="status">준비됨</div>
173
- </div>
174
- <div class="ctx-menu" id="ctx">
175
- <div class="ctx-item" onclick="splitClip()">✂ 자르기</div>
176
- <div class="ctx-item" onclick="dupeClip()">📋 복제</div>
177
- <div class="ctx-item danger" onclick="delClip()">🗑 삭제</div>
178
- </div>
179
- <div class="modal" id="exportModal" style="display:none">
180
- <div class="modal-box">
181
- <h3>🎬 영상 내보내기</h3>
182
- <p id="exportMsg">준비중...</p>
183
- <div class="progress"><div class="progress-bar" id="exportBar"></div></div>
184
- <button class="btn btn-secondary" onclick="cancelExport()">취소</button>
185
- </div>
186
- </div>
187
- <div class="modal" id="textModal" style="display:none">
188
- <div class="modal-box" style="min-width:320px">
189
- <h3>📝 텍스트 추가</h3>
190
- <div style="margin:10px 0;text-align:left">
191
- <div style="margin-bottom:8px">
192
- <label style="font-size:11px;color:#666">텍스트 내용</label>
193
- <input type="text" id="textInput" placeholder="텍스트 입력..." style="width:100%;padding:8px;border:1px solid #ddd;border-radius:4px;margin-top:4px">
194
- </div>
195
- <div style="display:flex;gap:8px;margin-bottom:8px">
196
- <div style="flex:1">
197
- <label style="font-size:11px;color:#666">글자 크기</label>
198
- <select id="textSize" style="width:100%;padding:6px;border:1px solid #ddd;border-radius:4px;margin-top:4px">
199
- <option value="24">작게 (24px)</option>
200
- <option value="36">보통 (36px)</option>
201
- <option value="48" selected>크게 (48px)</option>
202
- <option value="64">매우 크게 (64px)</option>
203
- <option value="96">최대 (96px)</option>
204
- </select>
205
- </div>
206
- <div style="flex:1">
207
- <label style="font-size:11px;color:#666">글자 색상</label>
208
- <input type="color" id="textColor" value="#ffffff" style="width:100%;height:32px;border:1px solid #ddd;border-radius:4px;margin-top:4px;cursor:pointer">
209
- </div>
210
- </div>
211
- <div style="display:flex;gap:8px;margin-bottom:8px">
212
- <div style="flex:1">
213
- <label style="font-size:11px;color:#666">배경 스타일</label>
214
- <select id="textBgStyle" onchange="toggleBgColor()" style="width:100%;padding:6px;border:1px solid #ddd;border-radius:4px;margin-top:4px">
215
- <option value="none">배경 없음</option>
216
- <option value="solid" selected>단색 배경</option>
217
- <option value="rounded">둥근 배경</option>
218
- </select>
219
- </div>
220
- <div style="flex:1" id="bgColorBox">
221
- <label style="font-size:11px;color:#666">배경 색상</label>
222
- <input type="color" id="textBgColor" value="#000000" style="width:100%;height:32px;border:1px solid #ddd;border-radius:4px;margin-top:4px;cursor:pointer">
223
- </div>
224
- </div>
225
- <div style="margin-bottom:8px">
226
- <label style="font-size:11px;color:#666">표시 시간 (초)</label>
227
- <input type="number" id="textDuration" value="5" min="1" max="60" step="0.5" style="width:100%;padding:6px;border:1px solid #ddd;border-radius:4px;margin-top:4px">
228
- </div>
229
- </div>
230
- <div style="display:flex;gap:8px;justify-content:center">
231
- <button class="btn btn-secondary" onclick="closeTextModal()">취소</button>
232
- <button class="btn btn-success" onclick="confirmAddText()">추가</button>
233
- </div>
234
- </div>
235
- </div>
236
- <div id="hiddenMedia" class="hidden-media"></div>
237
- <script>
238
- var S={{
239
- media:[],
240
- clips:[],
241
- sel:null,
242
- playing:false,
243
- muted:false,
244
- time:0,
245
- dur:0,
246
- zoom:1,
247
- pps:80,
248
- history:[],
249
- animId:null,
250
- cancelled:false,
251
- els:{{}},
252
- canvas:null,
253
- ctx:null,
254
- lastClipId:null,
255
- ratio:'16:9',
256
- fillMode:'fit',
257
- ratioSizes:{{
258
- '16:9':{{w:1280,h:720,pw:640,ph:360}},
259
- '9:16':{{w:720,h:1280,pw:203,ph:360}},
260
- '1:1':{{w:1080,h:1080,pw:360,ph:360}},
261
- '4:3':{{w:1280,h:960,pw:480,ph:360}},
262
- '4:5':{{w:1080,h:1350,pw:288,ph:360}}
263
- }}
264
- }};
265
-
266
- function init(){{
267
- S.canvas=document.getElementById('previewCanvas');
268
- S.ctx=S.canvas.getContext('2d');
269
- updateCanvasSize();
270
- drawPlaceholder();
271
- setupCanvasDrag();
272
- }}
273
-
274
- // 캔버스에서 텍스트 드래그 설정
275
- function setupCanvasDrag(){{
276
- var canvas=S.canvas;
277
- var dragging=null;
278
- var dragOffsetX=0,dragOffsetY=0;
279
-
280
- canvas.addEventListener('mousedown',function(e){{
281
- var rect=canvas.getBoundingClientRect();
282
- var scaleX=canvas.width/rect.width;
283
- var scaleY=canvas.height/rect.height;
284
- var mx=(e.clientX-rect.left)*scaleX;
285
- var my=(e.clientY-rect.top)*scaleY;
286
-
287
- // 현재 시간의 텍스트 클립 중 클릭된 것 찾기
288
- var textClips=getTextClipsAt(S.time);
289
- for(var i=textClips.length-1;i>=0;i--){{
290
- var tc=textClips[i];
291
- if(tc._bounds){{
292
- var b=tc._bounds;
293
- if(mx>=b.x&&mx<=b.x+b.w&&my>=b.y&&my<=b.y+b.h){{
294
- dragging=tc;
295
- selClip(tc.id);
296
- var size=S.ratioSizes[S.ratio];
297
- dragOffsetX=mx-size.pw*tc.posX;
298
- dragOffsetY=my-size.ph*tc.posY;
299
- canvas.style.cursor='move';
300
- e.preventDefault();
301
- return;
302
- }}
303
- }}
304
- }}
305
- }});
306
-
307
- canvas.addEventListener('mousemove',function(e){{
308
- var rect=canvas.getBoundingClientRect();
309
- var scaleX=canvas.width/rect.width;
310
- var scaleY=canvas.height/rect.height;
311
- var mx=(e.clientX-rect.left)*scaleX;
312
- var my=(e.clientY-rect.top)*scaleY;
313
-
314
- if(dragging){{
315
- var size=S.ratioSizes[S.ratio];
316
- dragging.posX=Math.max(0.1,Math.min(0.9,(mx-dragOffsetX)/size.pw));
317
- dragging.posY=Math.max(0.1,Math.min(0.9,(my-dragOffsetY)/size.ph));
318
- drawFrame();
319
- }}else{{
320
- // 호버 커서 변경
321
- var textClips=getTextClipsAt(S.time);
322
- var onText=false;
323
- for(var i=0;i<textClips.length;i++){{
324
- var tc=textClips[i];
325
- if(tc._bounds){{
326
- var b=tc._bounds;
327
- if(mx>=b.x&&mx<=b.x+b.w&&my>=b.y&&my<=b.y+b.h){{
328
- onText=true;
329
- break;
330
- }}
331
- }}
332
- }}
333
- canvas.style.cursor=onText?'move':'default';
334
- }}
335
- }});
336
-
337
- canvas.addEventListener('mouseup',function(){{
338
- if(dragging){{
339
- save();
340
- dragging=null;
341
- canvas.style.cursor='default';
342
- renderProps();
343
- }}
344
- }});
345
-
346
- canvas.addEventListener('mouseleave',function(){{
347
- if(dragging){{
348
- save();
349
- dragging=null;
350
- canvas.style.cursor='default';
351
- }}
352
- }});
353
- }}
354
-
355
- function updateCanvasSize(){{
356
- var size=S.ratioSizes[S.ratio];
357
- S.canvas.width=size.pw;
358
- S.canvas.height=size.ph;
359
- S.canvas.style.width=size.pw+'px';
360
- S.canvas.style.height=size.ph+'px';
361
- }}
362
-
363
- function setRatio(r){{
364
- S.ratio=r;
365
- updateCanvasSize();
366
- drawFrame();
367
- stat('화면 비율: '+r);
368
- }}
369
-
370
- function setFillMode(m){{
371
- S.fillMode=m;
372
- drawFrame();
373
- stat('채우기 모드: '+(m==='fit'?'맞춤 (여백)':m==='fill'?'채우기 (확대)':'블러 배경'));
374
- }}
375
-
376
- function id(){{return Math.random().toString(36).substr(2,9)}}
377
- 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')}}
378
- function r(n){{return Math.round(n*1000)/1000}}
379
- function stat(m){{document.getElementById('status').textContent=m}}
380
- function save(){{S.history.push(JSON.stringify(S.clips));if(S.history.length>30)S.history.shift()}}
381
-
382
- function drawPlaceholder(){{
383
- var size=S.ratioSizes[S.ratio];
384
- var pw=size.pw,ph=size.ph;
385
- S.ctx.fillStyle='#000';
386
- S.ctx.fillRect(0,0,pw,ph);
387
- S.ctx.fillStyle='#444';
388
- S.ctx.font='14px sans-serif';
389
- S.ctx.textAlign='center';
390
- S.ctx.fillText('타임라인에 미디어를 추가하세요',pw/2,ph/2);
391
- }}
392
-
393
- function addMedia(name,type,url,filePath){{
394
- var m={{id:id(),name:name,type:type,url:url,filePath:filePath||name,dur:type==='image'?5:0,thumb:type==='image'?url:null}};
395
- S.media.push(m);
396
- var container=document.getElementById('hiddenMedia');
397
- if(type==='video'){{
398
- var v=document.createElement('video');
399
- v.src=url;
400
- v.muted=true;
401
- v.playsInline=true;
402
- v.preload='auto';
403
- v.crossOrigin='anonymous';
404
- container.appendChild(v);
405
- S.els[m.id]=v;
406
- v.onloadedmetadata=function(){{
407
- m.dur=r(v.duration);
408
- renderLib();
409
- v.currentTime=0.5;
410
- }};
411
- v.onseeked=function(){{
412
- if(!m.thumb){{
413
- try{{
414
- var c=document.createElement('canvas');
415
- c.width=160;c.height=90;
416
- c.getContext('2d').drawImage(v,0,0,160,90);
417
- m.thumb=c.toDataURL();
418
- renderLib();
419
- }}catch(e){{}}
420
- }}
421
- }};
422
- }}else if(type==='audio'){{
423
- var a=document.createElement('audio');
424
- a.src=url;
425
- a.preload='auto';
426
- container.appendChild(a);
427
- S.els[m.id]=a;
428
- a.onloadedmetadata=function(){{m.dur=r(a.duration);renderLib()}};
429
- }}else if(type==='image'){{
430
- var img=new Image();
431
- img.src=url;
432
- img.crossOrigin='anonymous';
433
- S.els[m.id]=img;
434
- }}
435
- renderLib();
436
- stat('미디어 추가: '+name);
437
- setTimeout(function(){{addClip(m)}},400);
438
- }}
439
-
440
- function renderLib(){{
441
- var g=document.getElementById('mediaGrid');
442
- var h=document.getElementById('hint');
443
- h.style.display=S.media.length?'none':'block';
444
- g.innerHTML='';
445
- S.media.forEach(function(m){{
446
- var d=document.createElement('div');
447
- d.className='media-item';
448
- d.draggable=true;
449
- d.ondblclick=function(){{addClip(m)}};
450
- d.ondragstart=function(e){{e.dataTransfer.setData('mid',m.id)}};
451
- var th=m.thumb?'<img src="'+m.thumb+'">':'<div class="media-item-icon">'+(m.type==='video'?'🎬':m.type==='audio'?'🎵':'🖼')+'</div>';
452
- d.innerHTML=th+(m.dur?'<div class="media-item-dur">'+fmt(m.dur)+'</div>':'');
453
- g.appendChild(d);
454
- }});
455
- }}
456
-
457
- function trackEnd(tr){{
458
- var end=0;
459
- for(var i=0;i<S.clips.length;i++){{
460
- var c=S.clips[i];
461
- if(c.track===tr){{
462
- var e=r(c.start+(c.te-c.ts));
463
- if(e>end)end=e;
464
- }}
465
- }}
466
- return end;
467
- }}
468
-
469
- function addClip(m,at){{
470
- save();
471
- var tr=m.type==='audio'?1:0;
472
- var st=at!==undefined?r(at):trackEnd(tr);
473
- S.clips.push({{
474
- id:id(),
475
- mid:m.id,
476
- name:m.name,
477
- type:m.type,
478
- track:tr,
479
- start:st,
480
- dur:m.dur,
481
- ts:0,
482
- te:m.dur,
483
- vol:1,
484
- filePath:m.filePath
485
- }});
486
- renderTL();
487
- updateDur();
488
- stat('클립 추가: '+m.name);
489
- drawFrame();
490
- }}
491
-
492
- function renderTL(){{
493
- ['t0','t1','t2'].forEach(function(tid){{document.getElementById(tid).innerHTML=''}});
494
- S.clips.forEach(function(c){{
495
- var tr=document.getElementById('t'+c.track);
496
- var el=document.createElement('div');
497
- el.className='clip '+c.type+(S.sel===c.id?' selected':'');
498
- var len=r(c.te-c.ts);
499
- el.style.left=r(c.start*S.pps*S.zoom)+'px';
500
- el.style.width=Math.max(25,r(len*S.pps*S.zoom))+'px';
501
- el.draggable=true;
502
- el.onclick=function(e){{e.stopPropagation();selClip(c.id)}};
503
- el.oncontextmenu=function(e){{e.preventDefault();selClip(c.id);showCtx(e.clientX,e.clientY)}};
504
- el.ondragstart=function(e){{e.dataTransfer.setData('cid',c.id);e.dataTransfer.setData('ox',e.offsetX)}};
505
- var m=S.media.find(function(x){{return x.id===c.mid}});
506
- var th=m&&m.thumb?'<img class="clip-thumb" src="'+m.thumb+'">':'';
507
- var clipName=c.type==='text'?('📝 '+c.text.substring(0,8)):c.name;
508
- el.innerHTML=th+'<div class="clip-info"><div class="clip-name">'+clipName+'</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>';
509
- el.querySelector('.clip-handle-l').onmousedown=function(e){{e.stopPropagation();startTrim(c.id,'l',e)}};
510
- el.querySelector('.clip-handle-r').onmousedown=function(e){{e.stopPropagation();startTrim(c.id,'r',e)}};
511
- tr.appendChild(el);
512
- }});
513
- renderRuler();
514
- setupDrop();
515
- }}
516
-
517
- function renderRuler(){{
518
- var ru=document.getElementById('ruler');
519
- var w=Math.max(r(S.dur*S.pps*S.zoom)+150,600);
520
- ru.style.width=w+'px';
521
- var h='<svg width="100%" height="18" style="position:absolute;left:50px">';
522
- var step=S.zoom<0.7?5:S.zoom<1.5?2:1;
523
- for(var i=0;i<=S.dur+10;i+=step){{
524
- var x=r(i*S.pps*S.zoom);
525
- h+='<line x1="'+x+'" y1="13" x2="'+x+'" y2="18" stroke="#ccc"/>';
526
- h+='<text x="'+x+'" y="10" fill="#999" font-size="8" text-anchor="middle">'+fmt(i)+'</text>';
527
- }}
528
- ru.innerHTML=h+'</svg>';
529
- }}
530
-
531
- function setupDrop(){{
532
- ['t0','t1','t2'].forEach(function(tid,idx){{
533
- var tr=document.getElementById(tid);
534
- tr.ondragover=function(e){{e.preventDefault();tr.classList.add('drop-zone')}};
535
- tr.ondragleave=function(){{tr.classList.remove('drop-zone')}};
536
- tr.ondrop=function(e){{
537
- e.preventDefault();
538
- tr.classList.remove('drop-zone');
539
- var rect=tr.getBoundingClientRect();
540
- var t=r(Math.max(0,(e.clientX-rect.left)/(S.pps*S.zoom)));
541
- var mid=e.dataTransfer.getData('mid');
542
- var cid=e.dataTransfer.getData('cid');
543
- var ox=parseFloat(e.dataTransfer.getData('ox')||0);
544
- if(mid){{
545
- var m=S.media.find(function(x){{return x.id===mid}});
546
- if(m)addClip(m,t);
547
- }}else if(cid){{
548
- save();
549
- var c=S.clips.find(function(x){{return x.id===cid}});
550
- if(c){{
551
- c.start=r(Math.max(0,t-ox/(S.pps*S.zoom)));
552
- // 텍스트는 텍스트 트랙으로만, 그 외는 영상/오디오 트랙으로
553
- if(c.type==='text'){{
554
- c.track=2;
555
- }}else if(c.type==='audio'){{
556
- c.track=1;
557
- }}else{{
558
- c.track=idx===2?0:idx;
559
- }}
560
- renderTL();
561
- updateDur();
562
- drawFrame();
563
- }}
564
- }}
565
- }};
566
- }});
567
- }}
568
-
569
- var trimData=null;
570
- function startTrim(cid,side,e){{
571
- e.preventDefault();
572
- var c=S.clips.find(function(x){{return x.id===cid}});
573
- if(!c)return;
574
- save();
575
- trimData={{cid:cid,side:side,sx:e.clientX,ots:c.ts,ote:c.te,ost:c.start}};
576
- document.addEventListener('mousemove',doTrim);
577
- document.addEventListener('mouseup',endTrim);
578
- }}
579
- function doTrim(e){{
580
- if(!trimData)return;
581
- var c=S.clips.find(function(x){{return x.id===trimData.cid}});
582
- if(!c)return;
583
- var dx=e.clientX-trimData.sx;
584
- var dt=r(dx/(S.pps*S.zoom));
585
- if(trimData.side==='l'){{
586
- var newTs=Math.max(0,Math.min(c.te-0.1,trimData.ots+dt));
587
- c.ts=r(newTs);
588
- c.start=r(trimData.ost+(newTs-trimData.ots));
589
- }}else{{
590
- c.te=r(Math.max(c.ts+0.1,Math.min(c.dur,trimData.ote+dt)));
591
- }}
592
- renderTL();
593
- updateDur();
594
- }}
595
- function endTrim(){{
596
- trimData=null;
597
- document.removeEventListener('mousemove',doTrim);
598
- document.removeEventListener('mouseup',endTrim);
599
- }}
600
-
601
- function selClip(cid){{S.sel=cid;renderTL();renderProps()}}
602
-
603
- function renderProps(){{
604
- var box=document.getElementById('propsBox');
605
- var c=S.clips.find(function(x){{return x.id===S.sel}});
606
- if(!c){{box.innerHTML='<div class="no-sel">클립 선택</div>';return}}
607
- var len=r(c.te-c.ts);
608
-
609
- if(c.type==='text'){{
610
- // 텍스트 클립 속성
611
- box.innerHTML='<div class="prop-group"><div class="prop-label">텍스트</div><input class="prop-input" value="'+c.text+'" onchange="setProp(\\'text\\',this.value)"></div>'+
612
- '<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>'+
613
- '<div class="prop-group"><div class="prop-label">길이: '+fmt(len)+'</div></div>'+
614
- '<div class="prop-group"><div class="prop-label">위치 X ('+Math.round((c.posX||0.5)*100)+'%)</div><input class="prop-input" type="range" min="0.05" max="0.95" step="0.01" value="'+(c.posX||0.5)+'" oninput="setProp(\\'posX\\',parseFloat(this.value))"></div>'+
615
- '<div class="prop-group"><div class="prop-label">위치 Y ('+Math.round((c.posY||0.85)*100)+'%)</div><input class="prop-input" type="range" min="0.05" max="0.95" step="0.01" value="'+(c.posY||0.85)+'" oninput="setProp(\\'posY\\',parseFloat(this.value))"></div>'+
616
- '<div class="prop-group"><div class="prop-label">글자 크기</div><select class="prop-input" onchange="setProp(\\'fontSize\\',parseInt(this.value))">'+
617
- '<option value="24"'+(c.fontSize===24?' selected':'')+'>작게</option>'+
618
- '<option value="36"'+(c.fontSize===36?' selected':'')+'>보통</option>'+
619
- '<option value="48"'+(c.fontSize===48?' selected':'')+'>크게</option>'+
620
- '<option value="64"'+(c.fontSize===64?' selected':'')+'>매우 크게</option>'+
621
- '<option value="96"'+(c.fontSize===96?' selected':'')+'>최대</option>'+
622
- '</select></div>'+
623
- '<div class="prop-group"><div class="prop-label">글자 색상</div><input class="prop-input" type="color" value="'+c.fontColor+'" onchange="setProp(\\'fontColor\\',this.value)"></div>'+
624
- '<div class="prop-group"><div class="prop-label">배경 스타일</div><select class="prop-input" onchange="setProp(\\'bgStyle\\',this.value)">'+
625
- '<option value="none"'+(c.bgStyle==='none'?' selected':'')+'>없음</option>'+
626
- '<option value="solid"'+(c.bgStyle==='solid'?' selected':'')+'>단색</option>'+
627
- '<option value="rounded"'+(c.bgStyle==='rounded'?' selected':'')+'>둥근</option>'+
628
- '</select></div>'+
629
- '<div class="prop-group"><div class="prop-label">배경 색상</div><input class="prop-input" type="color" value="'+c.bgColor+'" onchange="setProp(\\'bgColor\\',this.value)"></div>';
630
- }}else{{
631
- // 기존 미디어 클립 속성
632
- box.innerHTML='<div class="prop-group"><div class="prop-label">이름</div><input class="prop-input" value="'+c.name+'" onchange="setProp(\\'name\\',this.value)"></div>'+
633
- '<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>'+
634
- '<div class="prop-group"><div class="prop-label">길이: '+fmt(len)+'</div></div>'+
635
- (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>':'');
636
- }}
637
- }}
638
-
639
- function setProp(p,v){{
640
- save();
641
- var c=S.clips.find(function(x){{return x.id===S.sel}});
642
- if(c){{c[p]=p==='start'?r(v):v;renderTL();updateDur();renderProps();drawFrame()}}
643
- }}
644
-
645
- function splitClip(){{
646
- if(!S.sel){{alert('클립을 선택하세요');return}}
647
- var c=S.clips.find(function(x){{return x.id===S.sel}});
648
- if(!c)return;
649
- var cEnd=r(c.start+c.te-c.ts);
650
- if(S.time<=c.start||S.time>=cEnd){{alert('플레이헤드가 클립 안에 있어야 합니다');return}}
651
- save();
652
- var splitAt=r(S.time-c.start);
653
- var c2=JSON.parse(JSON.stringify(c));
654
- c2.id=id();
655
- c2.start=r(S.time);
656
- c2.ts=r(c.ts+splitAt);
657
- c.te=r(c.ts+splitAt);
658
- S.clips.push(c2);
659
- renderTL();updateDur();hideCtx();stat('클립 분할됨');
660
- }}
661
-
662
- function dupeClip(){{
663
- if(!S.sel)return;
664
- var c=S.clips.find(function(x){{return x.id===S.sel}});
665
- if(!c)return;
666
- save();
667
- var len=r(c.te-c.ts);
668
- var nc=JSON.parse(JSON.stringify(c));
669
- nc.id=id();
670
- nc.start=r(c.start+len);
671
- S.clips.push(nc);
672
- renderTL();updateDur();hideCtx();stat('클립 복제됨');
673
- }}
674
-
675
- function delClip(){{
676
- if(!S.sel)return;
677
- save();
678
- S.clips=S.clips.filter(function(x){{return x.id!==S.sel}});
679
- S.sel=null;
680
- renderTL();renderProps();updateDur();hideCtx();stat('클립 삭제됨');
681
- drawFrame();
682
- }}
683
-
684
- function undo(){{if(S.history.length){{S.clips=JSON.parse(S.history.pop());renderTL();updateDur();stat('실행취소');drawFrame()}}}}
685
-
686
- function updateDur(){{
687
- var mx=0;
688
- for(var i=0;i<S.clips.length;i++){{
689
- var c=S.clips[i];
690
- var e=r(c.start+c.te-c.ts);
691
- if(e>mx)mx=e;
692
- }}
693
- S.dur=mx;
694
- document.getElementById('totT').textContent=fmt(mx);
695
- }}
696
-
697
- function togglePlay(){{
698
- S.playing=!S.playing;
699
- document.getElementById('playBtn').textContent=S.playing?'⏸':'▶';
700
- if(S.playing)play();else stop();
701
- }}
702
-
703
- function play(){{
704
- var last=performance.now();
705
- function loop(now){{
706
- if(!S.playing)return;
707
- var dt=(now-last)/1000;
708
- last=now;
709
- S.time=S.time+dt;
710
- if(S.time>=S.dur){{
711
- S.time=0;
712
- if(S.dur===0){{S.playing=false;document.getElementById('playBtn').textContent='▶';return}}
713
- }}
714
- updateHead();
715
- drawFrame();
716
- S.animId=requestAnimationFrame(loop);
717
- }}
718
- S.animId=requestAnimationFrame(loop);
719
- }}
720
-
721
- function stop(){{
722
- if(S.animId){{cancelAnimationFrame(S.animId);S.animId=null}}
723
- Object.keys(S.els).forEach(function(k){{
724
- var el=S.els[k];
725
- if(el&&el.pause)el.pause();
726
- }});
727
- }}
728
-
729
- function seek(t){{
730
- S.time=Math.max(0,Math.min(S.dur||0,t));
731
- updateHead();
732
- drawFrame();
733
- }}
734
-
735
- function updateHead(){{
736
- document.getElementById('playhead').style.left=(50+S.time*S.pps*S.zoom)+'px';
737
- document.getElementById('curT').textContent=fmt(S.time);
738
- }}
739
-
740
- function getClipAt(t,type){{
741
- var sorted=S.clips.filter(function(c){{
742
- if(type==='visual')return c.type==='video'||c.type==='image';
743
- if(type==='audio')return c.type==='audio';
744
- return true;
745
- }}).sort(function(a,b){{return a.start-b.start}});
746
- for(var i=0;i<sorted.length;i++){{
747
- var c=sorted[i];
748
- var cEnd=c.start+(c.te-c.ts);
749
- if(t>=c.start&&t<cEnd)return c;
750
- }}
751
- return null;
752
- }}
753
-
754
- function drawFrame(){{
755
- var t=S.time;
756
- var vc=getClipAt(t,'visual');
757
- var size=S.ratioSizes[S.ratio];
758
- var pw=size.pw,ph=size.ph;
759
-
760
- S.ctx.fillStyle='#000';
761
- S.ctx.fillRect(0,0,pw,ph);
762
-
763
- if(vc){{
764
- var el=S.els[vc.mid];
765
- if(el){{
766
- if(vc.type==='video'){{
767
- var clipT=t-vc.start+vc.ts;
768
- if(Math.abs(el.currentTime-clipT)>0.05){{
769
- el.currentTime=clipT;
770
- }}
771
- if(S.playing&&el.paused)el.play().catch(function(){{}});
772
- if(!S.playing&&!el.paused)el.pause();
773
- el.volume=S.muted?0:vc.vol;
774
- }}
775
- try{{
776
- var sw=el.videoWidth||el.naturalWidth||el.width||pw;
777
- var sh=el.videoHeight||el.naturalHeight||el.height||ph;
778
- drawWithMode(S.ctx,el,sw,sh,pw,ph,S.fillMode);
779
- }}catch(e){{}}
780
- }}
781
- }}else if(S.clips.length===0){{
782
- S.ctx.fillStyle='#444';
783
- S.ctx.font='14px sans-serif';
784
- S.ctx.textAlign='center';
785
- S.ctx.fillText('타임라인에 미디어를 추가하세요',pw/2,ph/2);
786
- }}
787
- var audioClips=S.clips.filter(function(c){{
788
- if(c.type!=='audio')return false;
789
- var cEnd=c.start+(c.te-c.ts);
790
- return t>=c.start&&t<cEnd;
791
- }});
792
- audioClips.forEach(function(ac){{
793
- var el=S.els[ac.mid];
794
- if(el){{
795
- var clipT=t-ac.start+ac.ts;
796
- if(Math.abs(el.currentTime-clipT)>0.1)el.currentTime=clipT;
797
- el.volume=S.muted?0:ac.vol;
798
- if(S.playing&&el.paused)el.play().catch(function(){{}});
799
- if(!S.playing&&!el.paused)el.pause();
800
- }}
801
- }});
802
- S.clips.forEach(function(c){{
803
- if(c.type!=='audio')return;
804
- var cEnd=c.start+(c.te-c.ts);
805
- if(t<c.start||t>=cEnd){{
806
- var el=S.els[c.mid];
807
- if(el&&!el.paused)el.pause();
808
- }}
809
- }});
810
- if(!vc&&!audioClips.length&&S.clips.length>0){{
811
- var hasText=getTextClipsAt(t).length>0;
812
- if(!hasText){{
813
- S.ctx.fillStyle='#333';
814
- S.ctx.font='12px sans-serif';
815
- S.ctx.textAlign='center';
816
- S.ctx.fillText('재생 위치에 미디어가 없습니다',pw/2,ph/2);
817
- }}
818
- }}
819
-
820
- // 텍스트 오버레이 렌더링
821
- var textClips=getTextClipsAt(t);
822
- textClips.forEach(function(tc){{
823
- drawText(S.ctx,tc,pw,ph);
824
- }});
825
- }}
826
-
827
- function drawWithMode(ctx,el,sw,sh,dw,dh,mode){{
828
- if(mode==='fill'){{
829
- // 채우기: 캔버스를 꽉 채우도록 확대, 넘치는 부분 잘림
830
- var scale=Math.max(dw/sw,dh/sh);
831
- var nw=sw*scale,nh=sh*scale;
832
- var ox=(dw-nw)/2,oy=(dh-nh)/2;
833
- ctx.drawImage(el,ox,oy,nw,nh);
834
- }}else if(mode==='blur'){{
835
- // 프레임 먼저 캡처
836
- var frameCanvas=document.createElement('canvas');
837
- frameCanvas.width=sw;frameCanvas.height=sh;
838
- var frameCtx=frameCanvas.getContext('2d');
839
- frameCtx.drawImage(el,0,0,sw,sh);
840
-
841
- // 블러용 작은 캔버스
842
- var blurCanvas=document.createElement('canvas');
843
- blurCanvas.width=16;blurCanvas.height=16;
844
- var blurCtx=blurCanvas.getContext('2d');
845
- blurCtx.drawImage(frameCanvas,0,0,16,16);
846
-
847
- // 배경
848
- ctx.imageSmoothingEnabled=true;
849
- ctx.imageSmoothingQuality='high';
850
- var scale=Math.max(dw/sw,dh/sh)*1.1;
851
- var nw=sw*scale,nh=sh*scale;
852
- var ox=(dw-nw)/2,oy=(dh-nh)/2;
853
- ctx.drawImage(blurCanvas,ox,oy,nw,nh);
854
-
855
- // 어둡게
856
- ctx.fillStyle='rgba(0,0,0,0.4)';
857
- ctx.fillRect(0,0,dw,dh);
858
-
859
- // 원본 (캡처된 프레임)
860
- var fitScale=Math.min(dw/sw,dh/sh);
861
- var fw=sw*fitScale,fh=sh*fitScale;
862
- var fx=(dw-fw)/2,fy=(dh-fh)/2;
863
- ctx.drawImage(frameCanvas,fx,fy,fw,fh);
864
- }}else{{
865
- // 맞춤 (fit): 원본 비율 유지, 여백
866
- var scale=Math.min(dw/sw,dh/sh);
867
- var nw=sw*scale,nh=sh*scale;
868
- var ox=(dw-nw)/2,oy=(dh-nh)/2;
869
- ctx.drawImage(el,ox,oy,nw,nh);
870
- }}
871
- }}
872
-
873
- function toggleMute(){{S.muted=!S.muted;document.getElementById('muteBtn').textContent=S.muted?'🔇':'🔊'}}
874
-
875
- // 텍스트 클립 관련 함수들
876
- function addTextClip(){{
877
- document.getElementById('textModal').style.display='flex';
878
- document.getElementById('textInput').value='';
879
- document.getElementById('textInput').focus();
880
- }}
881
-
882
- function closeTextModal(){{
883
- document.getElementById('textModal').style.display='none';
884
- }}
885
-
886
- function toggleBgColor(){{
887
- var style=document.getElementById('textBgStyle').value;
888
- document.getElementById('bgColorBox').style.opacity=style==='none'?'0.5':'1';
889
- }}
890
-
891
- function confirmAddText(){{
892
- var text=document.getElementById('textInput').value.trim();
893
- if(!text){{alert('텍스트를 입력하세요');return}}
894
- save();
895
- var duration=parseFloat(document.getElementById('textDuration').value)||5;
896
- S.clips.push({{
897
- id:id(),
898
- type:'text',
899
- track:2,
900
- start:S.time,
901
- dur:duration,
902
- ts:0,
903
- te:duration,
904
- text:text,
905
- fontSize:parseInt(document.getElementById('textSize').value),
906
- fontColor:document.getElementById('textColor').value,
907
- bgStyle:document.getElementById('textBgStyle').value,
908
- bgColor:document.getElementById('textBgColor').value,
909
- posX:0.5, // 0~1 비율 (가운데)
910
- posY:0.85 // 0~1 비율 (하단)
911
- }});
912
- closeTextModal();
913
- renderTL();
914
- updateDur();
915
- drawFrame();
916
- stat('텍스트 추가: '+text);
917
- }}
918
-
919
- function getTextClipsAt(t){{
920
- return S.clips.filter(function(c){{
921
- if(c.type!=='text')return false;
922
- var cEnd=c.start+(c.te-c.ts);
923
- return t>=c.start&&t<cEnd;
924
- }});
925
- }}
926
-
927
- function drawText(ctx,clip,dw,dh){{
928
- var text=clip.text;
929
- var fontSize=clip.fontSize||48;
930
- var fontColor=clip.fontColor||'#ffffff';
931
- var bgStyle=clip.bgStyle||'none';
932
- var bgColor=clip.bgColor||'#000000';
933
- var posX=clip.posX!==undefined?clip.posX:0.5;
934
- var posY=clip.posY!==undefined?clip.posY:0.85;
935
-
936
- ctx.font='bold '+fontSize+'px -apple-system,BlinkMacSystemFont,sans-serif';
937
- ctx.textAlign='center';
938
- ctx.textBaseline='middle';
939
-
940
- var metrics=ctx.measureText(text);
941
- var textW=metrics.width;
942
- var textH=fontSize;
943
- var x=dw*posX;
944
- var y=dh*posY;
945
-
946
- // 텍스트 영역 저장 (클릭 감지용)
947
- clip._bounds={{
948
- x:x-textW/2-fontSize*0.3,
949
- y:y-textH/2-fontSize*0.15,
950
- w:textW+fontSize*0.6,
951
- h:textH+fontSize*0.3
952
- }};
953
-
954
- if(bgStyle!=='none'){{
955
- var padding=fontSize*0.3;
956
- var bgX=x-textW/2-padding;
957
- var bgY=y-textH/2-padding/2;
958
- var bgW=textW+padding*2;
959
- var bgH=textH+padding;
960
-
961
- ctx.fillStyle=bgColor+'cc';
962
- if(bgStyle==='rounded'){{
963
- ctx.beginPath();
964
- ctx.roundRect(bgX,bgY,bgW,bgH,10);
965
- ctx.fill();
966
- }}else{{
967
- ctx.fillRect(bgX,bgY,bgW,bgH);
968
- }}
969
- }}
970
-
971
- // 텍스트 그림자
972
- ctx.fillStyle='rgba(0,0,0,0.5)';
973
- ctx.fillText(text,x+2,y+2);
974
-
975
- // 텍스트
976
- ctx.fillStyle=fontColor;
977
- ctx.fillText(text,x,y);
978
-
979
- // 선택된 텍스트면 테두리 표시
980
- if(S.sel===clip.id){{
981
- ctx.strokeStyle='#6366f1';
982
- ctx.lineWidth=2;
983
- ctx.setLineDash([5,3]);
984
- ctx.strokeRect(clip._bounds.x,clip._bounds.y,clip._bounds.w,clip._bounds.h);
985
- ctx.setLineDash([]);
986
- }}
987
- }}
988
- function setZoom(v){{S.zoom=parseFloat(v);renderTL();updateHead()}}
989
- function tlClick(e){{
990
- if(e.target.closest('.clip'))return;
991
- var rect=document.getElementById('tlBox').getBoundingClientRect();
992
- var scrollL=document.getElementById('tlBox').scrollLeft;
993
- S.time=Math.max(0,Math.min(S.dur||0,(e.clientX-rect.left-50+scrollL)/(S.pps*S.zoom)));
994
- updateHead();
995
- drawFrame();
996
- }}
997
-
998
- function showCtx(x,y){{var m=document.getElementById('ctx');m.style.display='block';m.style.left=x+'px';m.style.top=y+'px'}}
999
- function hideCtx(){{document.getElementById('ctx').style.display='none'}}
1000
- document.addEventListener('click',function(e){{if(!e.target.closest('.ctx-menu'))hideCtx()}});
1001
-
1002
- function exportVideo(){{
1003
- if(!S.clips.length){{alert('클립을 추가하세요');return}}
1004
- S.cancelled=false;
1005
- document.getElementById('exportModal').style.display='flex';
1006
- document.getElementById('exportBar').style.width='0%';
1007
- document.getElementById('exportMsg').textContent='녹화 준비 중...';
1008
- doExport();
1009
- }}
1010
-
1011
- // ============================================
1012
- // 핵심 수정: 더블 버퍼링으로 블러 번쩍임 방지
1013
- // ============================================
1014
- async function doExport(){{
1015
- var size=S.ratioSizes[S.ratio];
1016
- var exportW=size.w,exportH=size.h;
1017
-
1018
- // ★ 메인 캔버스 (MediaRecorder 연결) - 완성된 프레임만 받음
1019
- var mainCanvas=document.createElement('canvas');
1020
- mainCanvas.width=exportW;mainCanvas.height=exportH;
1021
- var mainCtx=mainCanvas.getContext('2d');
1022
-
1023
- // ★ 오프스크린 캔버스 (렌더링용) - 여기서 모든 작업 후 한번에 복사
1024
- var offCanvas=document.createElement('canvas');
1025
- offCanvas.width=exportW;offCanvas.height=exportH;
1026
- var offCtx=offCanvas.getContext('2d');
1027
-
1028
- // 초기 검은 화면
1029
- mainCtx.fillStyle='#000';
1030
- mainCtx.fillRect(0,0,exportW,exportH);
1031
-
1032
- var stream=mainCanvas.captureStream(30);
1033
-
1034
- // 고화질 설정
1035
- var opts={{mimeType:'video/webm;codecs=vp9',videoBitsPerSecond:8000000}};
1036
- if(!MediaRecorder.isTypeSupported(opts.mimeType)){{
1037
- opts={{mimeType:'video/webm;codecs=vp8',videoBitsPerSecond:8000000}};
1038
- }}
1039
- if(!MediaRecorder.isTypeSupported(opts.mimeType)){{
1040
- opts={{mimeType:'video/webm',videoBitsPerSecond:5000000}};
1041
- }}
1042
-
1043
- var rec=new MediaRecorder(stream,opts);
1044
- var chunks=[];
1045
- rec.ondataavailable=function(e){{if(e.data.size>0)chunks.push(e.data)}};
1046
-
1047
- document.getElementById('exportMsg').textContent='녹화 중... ('+S.ratio+')';
1048
- rec.start(100);
1049
-
1050
- var dur=S.dur;
1051
- var fillMode=S.fillMode;
1052
-
1053
- // 블러용 캔버스 (재사용)
1054
- var frameCanvas=document.createElement('canvas');
1055
- var frameCtx=frameCanvas.getContext('2d');
1056
- var blurCanvas=document.createElement('canvas');
1057
- blurCanvas.width=16;blurCanvas.height=16;
1058
- var blurCtx=blurCanvas.getContext('2d');
1059
-
1060
- // 모든 비디오를 처음으로 되돌리고 재생
1061
- var videoClips=S.clips.filter(function(c){{return c.type==='video'}});
1062
- videoClips.forEach(function(vc){{
1063
- var el=S.els[vc.mid];
1064
- if(el){{
1065
- el.currentTime=vc.ts;
1066
- el.muted=true;
1067
- }}
1068
- }});
1069
-
1070
- // 잠시 대기 후 재생 시작
1071
- await new Promise(function(r){{setTimeout(r,200)}});
1072
-
1073
- videoClips.forEach(function(vc){{
1074
- var el=S.els[vc.mid];
1075
- if(el)el.play().catch(function(){{}});
1076
- }});
1077
-
1078
- var startTime=performance.now();
1079
-
1080
- // 실시간 렌더링 루프
1081
- await new Promise(function(resolve){{
1082
- function render(){{
1083
- if(S.cancelled){{rec.stop();resolve();return}}
1084
-
1085
- var elapsed=(performance.now()-startTime)/1000;
1086
- if(elapsed>=dur){{
1087
- rec.stop();
1088
- setTimeout(resolve,200);
1089
- return;
1090
- }}
1091
-
1092
- // 진행률 업데이트
1093
- document.getElementById('exportBar').style.width=(elapsed/dur*100)+'%';
1094
- document.getElementById('exportMsg').textContent='녹화 중... '+Math.round(elapsed/dur*100)+'%';
1095
-
1096
- // ★ 오프스크린 캔버스에 완전히 렌더링 ★
1097
- offCtx.fillStyle='#000';
1098
- offCtx.fillRect(0,0,exportW,exportH);
1099
-
1100
- var vc=getClipAt(elapsed,'visual');
1101
- if(vc){{
1102
- var el=S.els[vc.mid];
1103
- if(el){{
1104
- // 비디오 시간 동기화 (차이가 크면 보정)
1105
- if(vc.type==='video'){{
1106
- var targetT=elapsed-vc.start+vc.ts;
1107
- if(Math.abs(el.currentTime-targetT)>0.5){{
1108
- el.currentTime=targetT;
1109
- }}
1110
- }}
1111
-
1112
- try{{
1113
- var sw=el.videoWidth||el.naturalWidth||el.width||exportW;
1114
- var sh=el.videoHeight||el.naturalHeight||el.height||exportH;
1115
-
1116
- if(fillMode==='blur'){{
1117
- // ★ 블러: 오프스크린에서 완전히 처리 후 메인에 복사 ★
1118
- frameCanvas.width=sw;
1119
- frameCanvas.height=sh;
1120
- frameCtx.drawImage(el,0,0,sw,sh);
1121
- blurCtx.drawImage(frameCanvas,0,0,16,16);
1122
-
1123
- offCtx.imageSmoothingEnabled=true;
1124
- offCtx.imageSmoothingQuality='high';
1125
- var scale=Math.max(exportW/sw,exportH/sh)*1.1;
1126
- var nw=sw*scale,nh=sh*scale;
1127
- offCtx.drawImage(blurCanvas,(exportW-nw)/2,(exportH-nh)/2,nw,nh);
1128
- offCtx.fillStyle='rgba(0,0,0,0.4)';
1129
- offCtx.fillRect(0,0,exportW,exportH);
1130
- var fitScale=Math.min(exportW/sw,exportH/sh);
1131
- var fw=sw*fitScale,fh=sh*fitScale;
1132
- offCtx.drawImage(frameCanvas,(exportW-fw)/2,(exportH-fh)/2,fw,fh);
1133
- }}else if(fillMode==='fill'){{
1134
- var scale=Math.max(exportW/sw,exportH/sh);
1135
- var nw=sw*scale,nh=sh*scale;
1136
- offCtx.drawImage(el,(exportW-nw)/2,(exportH-nh)/2,nw,nh);
1137
- }}else{{
1138
- // fit
1139
- var scale=Math.min(exportW/sw,exportH/sh);
1140
- var nw=sw*scale,nh=sh*scale;
1141
- offCtx.drawImage(el,(exportW-nw)/2,(exportH-nh)/2,nw,nh);
1142
- }}
1143
- }}catch(e){{console.error('Draw error:',e)}}
1144
- }}
1145
- }}
1146
-
1147
- // 텍스트 오버레이 렌더링 (오프스크린에)
1148
- var textClips=getTextClipsAt(elapsed);
1149
- textClips.forEach(function(tc){{
1150
- drawTextExport(offCtx,tc,exportW,exportH);
1151
- }});
1152
-
1153
- // ★ 오프스크린 → 메인 캔버스로 한번에 복사 (atomic) ★
1154
- mainCtx.drawImage(offCanvas,0,0);
1155
-
1156
- requestAnimationFrame(render);
1157
- }}
1158
- requestAnimationFrame(render);
1159
- }});
1160
-
1161
- // 정리
1162
- Object.keys(S.els).forEach(function(k){{
1163
- var el=S.els[k];
1164
- if(el&&el.pause)el.pause();
1165
- }});
1166
-
1167
- if(S.cancelled)return;
1168
-
1169
- var webmBlob=new Blob(chunks,{{type:'video/webm'}});
1170
- if(webmBlob.size<1000){{document.getElementById('exportMsg').textContent='녹화 실패';return}}
1171
-
1172
- document.getElementById('exportBar').style.width='100%';
1173
- document.getElementById('exportMsg').textContent='완료! ('+Math.round(webmBlob.size/1024/1024*10)/10+'MB, '+S.ratio+') - 아래에서 다운로드';
1174
-
1175
- var downloadDiv=document.createElement('div');
1176
- downloadDiv.style.marginTop='10px';
1177
- var webmLink=document.createElement('a');
1178
- webmLink.href=URL.createObjectURL(webmBlob);
1179
- webmLink.download='video_'+S.ratio.replace(':','x')+'_'+Date.now()+'.webm';
1180
- webmLink.className='btn btn-success';
1181
- webmLink.textContent='📥 WebM 다운로드';
1182
- webmLink.style.marginRight='5px';
1183
- downloadDiv.appendChild(webmLink);
1184
-
1185
- var copyBtn=document.createElement('button');
1186
- copyBtn.className='btn btn-secondary';
1187
- copyBtn.textContent='📋 MP4변환용 복사';
1188
- copyBtn.onclick=async function(){{
1189
- document.getElementById('exportMsg').textContent='데이터 준비 중...';
1190
- var reader=new FileReader();
1191
- reader.onload=function(){{
1192
- var base64=reader.result.split(',')[1];
1193
- navigator.clipboard.writeText(base64).then(function(){{
1194
- document.getElementById('exportMsg').textContent='복사 완료! 위 입력란에 붙여넣기';
1195
- alert('복사 완료!\\n\\nGradio의 "WebM 데이터" 입력란에 붙여넣기(Ctrl+V) 후\\n"MP4 변환" 버튼을 클릭하세요.');
1196
- }}).catch(function(){{
1197
- prompt('아래 데이터를 복사하세요:', base64.substring(0,100)+'...');
1198
- }});
1199
- }};
1200
- reader.readAsDataURL(webmBlob);
1201
- }};
1202
- downloadDiv.appendChild(copyBtn);
1203
- document.querySelector('.modal-box').appendChild(downloadDiv);
1204
- }}
1205
-
1206
- // 내보내기용 텍스트 렌더링
1207
- function drawTextExport(ctx,clip,dw,dh){{
1208
- var text=clip.text;
1209
- var fontSize=Math.round(clip.fontSize*(dw/640))||72;
1210
- var fontColor=clip.fontColor||'#ffffff';
1211
- var bgStyle=clip.bgStyle||'none';
1212
- var bgColor=clip.bgColor||'#000000';
1213
- var posX=clip.posX!==undefined?clip.posX:0.5;
1214
- var posY=clip.posY!==undefined?clip.posY:0.85;
1215
-
1216
- ctx.font='bold '+fontSize+'px -apple-system,BlinkMacSystemFont,sans-serif';
1217
- ctx.textAlign='center';
1218
- ctx.textBaseline='middle';
1219
-
1220
- var metrics=ctx.measureText(text);
1221
- var textW=metrics.width;
1222
- var textH=fontSize;
1223
- var x=dw*posX;
1224
- var y=dh*posY;
1225
-
1226
- if(bgStyle!=='none'){{
1227
- var padding=fontSize*0.3;
1228
- var bgX=x-textW/2-padding;
1229
- var bgY=y-textH/2-padding/2;
1230
- var bgW=textW+padding*2;
1231
- var bgH=textH+padding;
1232
-
1233
- ctx.fillStyle=bgColor+'cc';
1234
- if(bgStyle==='rounded'){{
1235
- ctx.beginPath();
1236
- ctx.roundRect(bgX,bgY,bgW,bgH,15);
1237
- ctx.fill();
1238
- }}else{{
1239
- ctx.fillRect(bgX,bgY,bgW,bgH);
1240
- }}
1241
- }}
1242
-
1243
- ctx.fillStyle='rgba(0,0,0,0.5)';
1244
- ctx.fillText(text,x+3,y+3);
1245
-
1246
- ctx.fillStyle=fontColor;
1247
- ctx.fillText(text,x,y);
1248
- }}
1249
-
1250
- function cancelExport(){{S.cancelled=true;document.getElementById('exportModal').style.display='none'}}
1251
-
1252
- document.addEventListener('keydown',function(e){{
1253
- if(e.target.tagName==='INPUT')return;
1254
- if(e.code==='Space'){{e.preventDefault();togglePlay()}}
1255
- else if(e.code==='Delete'){{e.preventDefault();delClip()}}
1256
- else if(e.code==='ArrowLeft'){{seek(S.time-0.1)}}
1257
- else if(e.code==='ArrowRight'){{seek(S.time+0.1)}}
1258
- }});
1259
-
1260
- init();
1261
- renderTL();
1262
- stat('준비됨');
1263
- var initData={media_data};
1264
- if(initData&&initData.length)initData.forEach(function(m){{addMedia(m.name,m.type,m.dataUrl,m.filePath)}});
1265
- </script>
1266
- </body>
1267
- </html>'''
1268
-
1269
- def process_file(files):
1270
- """파일 처리 및 서버에 저장"""
1271
- global uploaded_files
1272
- if not files:
1273
- return []
1274
- results = []
1275
- file_list = files if isinstance(files, list) else [files]
1276
- for f in file_list:
1277
- if not f:
1278
- continue
1279
- path = f.name if hasattr(f, 'name') else f
1280
- name = os.path.basename(path)
1281
- ext = name.lower().split('.')[-1]
1282
- if ext in ['mp4', 'webm', 'mov', 'avi', 'mkv']:
1283
- t, m = 'video', f'video/{ext}'
1284
- elif ext in ['jpg', 'jpeg', 'png', 'gif', 'webp']:
1285
- t, m = 'image', f'image/{ext}'
1286
- elif ext in ['mp3', 'wav', 'ogg', 'm4a', 'aac']:
1287
- t, m = 'audio', f'audio/{ext}'
1288
- else:
1289
- continue
1290
-
1291
- # 서버에 파일 복사 (MP4 내보내기용)
1292
- dst_path = os.path.join(UPLOAD_DIR, f"{int(time.time()*1000)}_{name}")
1293
- shutil.copy(path, dst_path)
1294
- uploaded_files[name] = dst_path
1295
-
1296
- with open(path, 'rb') as fp:
1297
- d = base64.b64encode(fp.read()).decode()
1298
- results.append({'name': name, 'type': t, 'dataUrl': f'data:{m};base64,{d}', 'filePath': name})
1299
- return results
1300
-
1301
- def make_iframe(data):
1302
- j = json.dumps(data, ensure_ascii=False)
1303
- h = get_editor_html(j).replace("'", "&#39;")
1304
- return f"<iframe srcdoc='{h}' style='width:100%;height:750px;border:none;border-radius:10px'></iframe>"
1305
-
1306
- def export_mp4(export_json):
1307
- """서버 사이드 MP4 내보내기"""
1308
- global uploaded_files
1309
-
1310
- if not export_json or len(export_json) < 10:
1311
- return None
1312
-
1313
- try:
1314
- data = json.loads(export_json)
1315
- clips = data.get('clips', [])
1316
-
1317
- if not clips:
1318
- return None
1319
-
1320
- video_clips = [c for c in clips if c['type'] in ['video', 'image']]
1321
- if not video_clips:
1322
- return None
1323
-
1324
- temp_dir = tempfile.mkdtemp()
1325
- output_path = os.path.join(temp_dir, f'output_{int(time.time())}.mp4')
1326
-
1327
- # 단일 클립
1328
- if len(video_clips) == 1:
1329
- clip = video_clips[0]
1330
- file_path = uploaded_files.get(clip['filePath'])
1331
-
1332
- if not file_path or not os.path.exists(file_path):
1333
- return None
1334
-
1335
- duration = clip['te'] - clip['ts']
1336
-
1337
- if clip['type'] == 'image':
1338
- 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]
1339
- else:
1340
- 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]
1341
-
1342
- subprocess.run(cmd, capture_output=True, timeout=300)
1343
-
1344
- if os.path.exists(output_path) and os.path.getsize(output_path) > 0:
1345
- return output_path
1346
- return None
1347
-
1348
- # 여러 클립
1349
- temp_files = []
1350
- concat_file = os.path.join(temp_dir, 'concat.txt')
1351
-
1352
- for i, clip in enumerate(sorted(video_clips, key=lambda x: x['start'])):
1353
- file_path = uploaded_files.get(clip['filePath'])
1354
- if not file_path or not os.path.exists(file_path):
1355
- continue
1356
-
1357
- temp_out = os.path.join(temp_dir, f'temp_{i}.mp4')
1358
- duration = clip['te'] - clip['ts']
1359
-
1360
- if clip['type'] == 'image':
1361
- 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]
1362
- else:
1363
- 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]
1364
-
1365
- subprocess.run(cmd, capture_output=True, timeout=120)
1366
- if os.path.exists(temp_out):
1367
- temp_files.append(temp_out)
1368
-
1369
- if not temp_files:
1370
- return None
1371
-
1372
- with open(concat_file, 'w') as f:
1373
- for tf in temp_files:
1374
- f.write(f"file '{tf}'\n")
1375
-
1376
- cmd = ['ffmpeg', '-y', '-f', 'concat', '-safe', '0', '-i', concat_file, '-c:v', 'libx264', '-preset', 'fast', '-c:a', 'aac', '-movflags', '+faststart', output_path]
1377
- subprocess.run(cmd, capture_output=True, timeout=300)
1378
-
1379
- for tf in temp_files:
1380
- try: os.remove(tf)
1381
- except: pass
1382
-
1383
- if os.path.exists(output_path) and os.path.getsize(output_path) > 0:
1384
- return output_path
1385
- return None
1386
-
1387
- except Exception as e:
1388
- print(f"[Export] Error: {e}")
1389
- return None
1390
-
1391
- def convert_webm_to_mp4(webm_base64):
1392
- """WebM base64 데이터를 MP4로 변환"""
1393
- if not webm_base64 or len(webm_base64) < 100:
1394
- return None
1395
-
1396
- try:
1397
- # base64 디코딩
1398
- webm_data = base64.b64decode(webm_base64)
1399
-
1400
- temp_dir = tempfile.mkdtemp()
1401
- webm_path = os.path.join(temp_dir, 'input.webm')
1402
- mp4_path = os.path.join(temp_dir, f'output_{int(time.time())}.mp4')
1403
-
1404
- # WebM 파일 저장
1405
- with open(webm_path, 'wb') as f:
1406
- f.write(webm_data)
1407
-
1408
- # FFmpeg로 MP4 변환
1409
- cmd = [
1410
- 'ffmpeg', '-y',
1411
- '-i', webm_path,
1412
- '-c:v', 'libx264',
1413
- '-preset', 'fast',
1414
- '-crf', '23',
1415
- '-c:a', 'aac',
1416
- '-b:a', '128k',
1417
- '-movflags', '+faststart',
1418
- mp4_path
1419
- ]
1420
-
1421
- result = subprocess.run(cmd, capture_output=True, text=True, timeout=300)
1422
-
1423
- # WebM 파일 삭제
1424
- try:
1425
- os.remove(webm_path)
1426
- except:
1427
- pass
1428
-
1429
- if os.path.exists(mp4_path) and os.path.getsize(mp4_path) > 0:
1430
- return mp4_path
1431
-
1432
- return None
1433
-
1434
- except Exception as e:
1435
- print(f"[Convert] Error: {e}")
1436
- return None
1437
-
1438
- with gr.Blocks() as demo:
1439
- gr.Markdown("## 🎬 Video Editor (블러 수정)")
1440
-
1441
- f = gr.File(label="📁 파일 업로드", file_count="multiple", file_types=["video", "image", "audio"])
1442
- e = gr.HTML(value=make_iframe([]))
1443
-
1444
- gr.Markdown("---")
1445
- gr.Markdown("### 📥 MP4 변환")
1446
- gr.Markdown("에디터에서 '내보내기' → 'MP4변환용 복사' 클릭 후 아래에 붙여넣기")
1447
-
1448
- with gr.Row():
1449
- webm_data = gr.Textbox(label="WebM 데이터 (base64)", placeholder="여기에 붙여넣기 (Ctrl+V)", lines=2, scale=4)
1450
- convert_btn = gr.Button("🎬 MP4 변환", variant="primary", scale=1)
1451
-
1452
- mp4_output = gr.File(label="📥 MP4 다운로드")
1453
-
1454
- f.change(fn=lambda x: make_iframe(process_file(x)), inputs=[f], outputs=[e])
1455
- convert_btn.click(fn=convert_webm_to_mp4, inputs=[webm_data], outputs=[mp4_output])
1456
-
1457
- if __name__ == "__main__":
1458
- demo.launch()