Update app.py

app.py

@@ -620,31 +620,8 @@ if(!S.clips.length){{alert('클립을 추가하세요');return}}
 S.cancelled=false;
 document.getElementById('exportModal').style.display='flex';
 document.getElementById('exportBar').style.width='0%';
-document.getElementById('exportMsg').textContent='FFmpeg 로딩 중...';
-loadFFmpeg().then(doExport).catch(function(e){{
-document.getElementById('exportMsg').textContent='FFmpeg 로드 실패: '+e.message;
-}});
-}}
-
-var ffmpeg=null;
-async function loadFFmpeg(){{
-if(ffmpeg)return;
-var script=document.createElement('script');
-script.src='https://cdn.jsdelivr.net/npm/@ffmpeg/ffmpeg@0.12.6/dist/umd/ffmpeg.min.js';
-document.head.appendChild(script);
-await new Promise(function(resolve){{script.onload=resolve}});
-var script2=document.createElement('script');
-script2.src='https://cdn.jsdelivr.net/npm/@ffmpeg/util@0.12.1/dist/umd/index.min.js';
-document.head.appendChild(script2);
-await new Promise(function(resolve){{script2.onload=resolve}});
-ffmpeg=new FFmpegWASM.FFmpeg();
-ffmpeg.on('progress',function(p){{
-if(p.progress)document.getElementById('exportMsg').textContent='변환 중... '+Math.round(p.progress*100)+'%';
-}});
-await ffmpeg.load({{
-coreURL:'https://cdn.jsdelivr.net/npm/@ffmpeg/core@0.12.4/dist/umd/ffmpeg-core.js',
-wasmURL:'https://cdn.jsdelivr.net/npm/@ffmpeg/core@0.12.4/dist/umd/ffmpeg-core.wasm'
-}});
+document.getElementById('exportMsg').textContent='녹화 준비 중...';
+doExport();
 }}
 
 async function doExport(){{
@@ -669,7 +646,7 @@ if(t>=dur){{
 setTimeout(function(){{rec.stop();setTimeout(resolve,300)}},200);
 return;
 }}
-document.getElementById('exportBar').style.width=(t/dur*50)+'%';
+document.getElementById('exportBar').style.width=(t/dur*100)+'%';
 document.getElementById('exportMsg').textContent='녹화 중... '+Math.round(t/dur*100)+'%';
 ctx.fillStyle='#000';
 ctx.fillRect(0,0,1280,720);
@@ -694,30 +671,36 @@ requestAnimationFrame(render);
 if(S.cancelled)return;
 var webmBlob=new Blob(chunks,{{type:'video/webm'}});
 if(webmBlob.size<1000){{document.getElementById('exportMsg').textContent='녹화 실패';return}}
-document.getElementById('exportBar').style.width='50%';
-document.getElementById('exportMsg').textContent='MP4 변환 중...';
-try{{
-var webmData=new Uint8Array(await webmBlob.arrayBuffer());
-await ffmpeg.writeFile('input.webm',webmData);
-await ffmpeg.exec(['-i','input.webm','-c:v','libx264','-preset','fast','-crf','23','-c:a','aac','-movflags','+faststart','output.mp4']);
-var mp4Data=await ffmpeg.readFile('output.mp4');
-var mp4Blob=new Blob([mp4Data],{{type:'video/mp4'}});
 document.getElementById('exportBar').style.width='100%';
-document.getElementById('exportMsg').textContent='완료! ('+Math.round(mp4Blob.size/1024)+'KB)';
-var a=document.createElement('a');
-a.href=URL.createObjectURL(mp4Blob);
-a.download='video_'+Date.now()+'.mp4';
-a.click();
-await ffmpeg.deleteFile('input.webm');
-await ffmpeg.deleteFile('output.mp4');
-}}catch(e){{
-console.error(e);
-document.getElementById('exportMsg').textContent='MP4 변환 실패, WebM으로 다운로드';
-var a=document.createElement('a');
-a.href=URL.createObjectURL(webmBlob);
-a.download='video_'+Date.now()+'.webm';
-a.click();
-}}
+document.getElementById('exportMsg').textContent='완료! ('+Math.round(webmBlob.size/1024)+'KB) - 아래에서 다운로드하세요';
+// WebM 다운로드 링크 생성
+var downloadDiv=document.createElement('div');
+downloadDiv.style.marginTop='10px';
+var webmLink=document.createElement('a');
+webmLink.href=URL.createObjectURL(webmBlob);
+webmLink.download='video_'+Date.now()+'.webm';
+webmLink.className='btn btn-success';
+webmLink.textContent='📥 WebM 다운로드';
+webmLink.style.marginRight='5px';
+downloadDiv.appendChild(webmLink);
+// base64 복사 버튼
+var copyBtn=document.createElement('button');
+copyBtn.className='btn btn-secondary';
+copyBtn.textContent='📋 MP4변환용 복사';
+copyBtn.onclick=async function(){{
+var reader=new FileReader();
+reader.onload=function(){{
+var base64=reader.result.split(',')[1];
+navigator.clipboard.writeText(base64).then(function(){{
+alert('복사 완료!\\n\\n위 Gradio의 "WebM 데이터" 입력란에 붙여넣기(Ctrl+V) 후\\n"MP4 변환" 버튼을 클릭하세요.');
+}}).catch(function(){{
+prompt('아래 데이터를 복사하세요 (Ctrl+A, Ctrl+C):', base64);
+}});
+}};
+reader.readAsDataURL(webmBlob);
+}};
+downloadDiv.appendChild(copyBtn);
+document.querySelector('.modal-box').appendChild(downloadDiv);
 }}
 
 function cancelExport(){{S.cancelled=true;document.getElementById('exportModal').style.display='none'}}
@@ -861,6 +844,53 @@ def export_mp4(export_json):
         print(f"[Export] Error: {e}")
         return None
 
+def convert_webm_to_mp4(webm_base64):
+    """WebM base64 데이터를 MP4로 변환"""
+    if not webm_base64 or len(webm_base64) < 100:
+        return None
+    
+    try:
+        # base64 디코딩
+        webm_data = base64.b64decode(webm_base64)
+        
+        temp_dir = tempfile.mkdtemp()
+        webm_path = os.path.join(temp_dir, 'input.webm')
+        mp4_path = os.path.join(temp_dir, f'output_{int(time.time())}.mp4')
+        
+        # WebM 파일 저장
+        with open(webm_path, 'wb') as f:
+            f.write(webm_data)
+        
+        # FFmpeg로 MP4 변환
+        cmd = [
+            'ffmpeg', '-y',
+            '-i', webm_path,
+            '-c:v', 'libx264',
+            '-preset', 'fast',
+            '-crf', '23',
+            '-c:a', 'aac',
+            '-b:a', '128k',
+            '-movflags', '+faststart',
+            mp4_path
+        ]
+        
+        result = subprocess.run(cmd, capture_output=True, text=True, timeout=300)
+        
+        # WebM 파일 삭제
+        try:
+            os.remove(webm_path)
+        except:
+            pass
+        
+        if os.path.exists(mp4_path) and os.path.getsize(mp4_path) > 0:
+            return mp4_path
+        
+        return None
+        
+    except Exception as e:
+        print(f"[Convert] Error: {e}")
+        return None
+
 with gr.Blocks() as demo:
     gr.Markdown("## 🎬 Video Editor")
     
@@ -868,17 +898,17 @@ with gr.Blocks() as demo:
     e = gr.HTML(value=make_iframe([]))
     
     gr.Markdown("---")
-    gr.Markdown("### 📥 서버 MP4 내보내기 (선택사항)")
-    gr.Markdown("에디터 내 '내보내기' 버튼이 안될 때 사용. 타임라인 JSON을 붙여넣으세요.")
+    gr.Markdown("### 📥 MP4 변환")
+    gr.Markdown("에디터에서 '내보내기' → 'MP4변환용 복사' 클릭 후 아래에 붙여넣기")
     
     with gr.Row():
-        export_data = gr.Textbox(label="타임라인 JSON", placeholder='{"clips":[...]}', lines=2, scale=4)
-        export_btn = gr.Button("🎬 MP4 생성", variant="primary", scale=1)
+        webm_data = gr.Textbox(label="WebM 데이터 (base64)", placeholder="여기에 붙여넣기 (Ctrl+V)", lines=2, scale=4)
+        convert_btn = gr.Button("🎬 MP4 변환", variant="primary", scale=1)
     
     mp4_output = gr.File(label="📥 MP4 다운로드")
     
     f.change(fn=lambda x: make_iframe(process_file(x)), inputs=[f], outputs=[e])
-    export_btn.click(fn=export_mp4, inputs=[export_data], outputs=[mp4_output])
+    convert_btn.click(fn=convert_webm_to_mp4, inputs=[webm_data], outputs=[mp4_output])
 
 if __name__ == "__main__":
     demo.launch()