Update app.py

app.py

@@ -11,12 +11,11 @@ from flask import Flask, request, jsonify, render_template_string, send_from_dir
 import whisper
 import edge_tts
 
-# --- KONFIGURASI SILENT ---
+# --- KONFIGURASI SILENT LOGS ---
 os.environ['TF_CPP_MIN_LOG_LEVEL'] = '3'
 logging.getLogger('werkzeug').setLevel(logging.ERROR)
 
 app = Flask(__name__)
-# Gunakan path absolut untuk menghindari 404
 BASE_DIR = os.path.dirname(os.path.abspath(__file__))
 UPLOAD_FOLDER = os.path.join(BASE_DIR, 'uploads')
 app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
@@ -30,7 +29,7 @@ VOICE_MAP = {
     'ja-JP': 'ja-JP-KeitaNeural'
 }
 
-# Load Whisper Model (Base)
+# Load Whisper (CPU Friendly, FP16 Fixed)
 whisper_model = whisper.load_model("base")
 
 def get_audio_duration(file_path):
@@ -74,21 +73,17 @@ async def generate_tts(text, voice, path):
 
 def process_dubbing(task_id, video_path, target_voice, custom_prompt):
     try:
-        # 1. Ekstrak Audio Original
         tasks[task_id]['status'] = 'Mengekstrak Audio...'
         orig_audio = os.path.join(app.config['UPLOAD_FOLDER'], f"{task_id}_orig.wav")
         subprocess.run(['ffmpeg', '-loglevel', 'quiet', '-y', '-i', video_path, '-vn', '-acodec', 'pcm_s16le', '-ar', '44100', orig_audio], stdout=subprocess.DEVNULL, stderr=subprocess.DEVNULL)
 
-        # 2. Transkripsi Whisper (FIX FP16 Error)
         tasks[task_id]['status'] = 'Transkripsi...'
         result = whisper_model.transcribe(orig_audio, verbose=False, fp16=False)
         segments = result['segments']
 
-        # 3. Translasi
         tasks[task_id]['status'] = 'Translasi AI...'
         translated_segments = translate_segments_llm(segments, custom_prompt)
 
-        # 4. Generate & Sync TTS per Segmen
         processed_audio_files = []
         for i, seg in enumerate(translated_segments):
             start_t = seg['start']
@@ -108,13 +103,14 @@ def process_dubbing(task_id, video_path, target_voice, custom_prompt):
             subprocess.run(['ffmpeg', '-loglevel', 'quiet', '-y', '-i', raw_tts, '-filter:a', f'atempo={speed}', '-ar', '44100', sync_tts], stdout=subprocess.DEVNULL, stderr=subprocess.DEVNULL)
             processed_audio_files.append({'path': sync_tts, 'start': start_t})
 
-        # 5. Hapus Vokal & Rendering Akhir
-        tasks[task_id]['status'] = 'Hapus Vokal & Mix...'
+        tasks[task_id]['status'] = 'Mixing Audio & Rendering...'
         output_filename = f"{task_id}_output.mp4"
         output_path = os.path.join(app.config['UPLOAD_FOLDER'], output_filename)
         
-        # Filter Phase Cancellation (Hapus vokal center) + Volume BG 100%
-        filter_complex = "[0:a]pan=stereo|c0=c0-c1|c1=c1-c0,volume=1.0[bg];"
+        # LOGIKA AUDIO BARU:
+        # 1. Background (Video asli): Turunkan frekuensi vokal (-15dB di 1000Hz) & Set volume ke 40% (0.4) agar backsound tetap ada.
+        # 2. TTS Dubbing AI: Besarkan volumenya ke 300% (3.0) agar sangat jelas.
+        filter_complex = "[0:a]equalizer=f=1000:width_type=o:w=2:g=-15,volume=0.4[bg];"
         inputs_cmd = ['ffmpeg', '-loglevel', 'quiet', '-y', '-i', video_path]
         amix_inputs = "[bg]"
         
@@ -122,10 +118,12 @@ def process_dubbing(task_id, video_path, target_voice, custom_prompt):
             idx = i + 1
             inputs_cmd.extend(['-i', item['path']])
             start_ms = int(item['start'] * 1000)
-            filter_complex += f"[{idx}:a]adelay={start_ms}|{start_ms}[dub{idx}];"
+            # Beri delay, dan besarkan volume TTS 3x lipat (300%)
+            filter_complex += f"[{idx}:a]adelay={start_ms}|{start_ms},volume=3.0[dub{idx}];"
             amix_inputs += f"[dub{idx}]"
         
-        filter_complex += f"{amix_inputs}amix=inputs={len(processed_audio_files)+1}:duration=first:dropout_transition=0[outa]"
+        # Gabungkan semua, tambah volume akhir sedikit untuk kompensasi penurunan dari filter amix
+        filter_complex += f"{amix_inputs}amix=inputs={len(processed_audio_files)+1}:duration=first:dropout_transition=0,volume=1.5[outa]"
         
         final_cmd = inputs_cmd + [
             '-filter_complex', filter_complex, '-map', '0:v', '-map', '[outa]',
@@ -134,7 +132,7 @@ def process_dubbing(task_id, video_path, target_voice, custom_prompt):
         
         subprocess.run(final_cmd, stdout=subprocess.DEVNULL, stderr=subprocess.DEVNULL)
 
-        # 6. Pembersihan File Sampah (Hati-hati jangan hapus _output.mp4)
+        # Cleanup file temporary
         for file in os.listdir(app.config['UPLOAD_FOLDER']):
             if task_id in file and not file.endswith("_output.mp4"):
                 try: os.remove(os.path.join(app.config['UPLOAD_FOLDER'], file))
@@ -172,64 +170,109 @@ def status():
 def download(f):
     return send_from_directory(app.config['UPLOAD_FOLDER'], f)
 
+# --- HTML DENGAN TAILWIND CSS ---
 HTML_TEMPLATE = """
 <!DOCTYPE html>
-<html>
+<html lang="id">
 <head>
-    <title>AI Dubbing Silent</title>
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
-    <style>body{background:#0a0a0a;color:#efefef;display:flex;align-items:center;justify-content:center;height:100vh;}.card{background:#161616;border:1px solid #333;width:400px;padding:25px;border-radius:20px;}</style>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AI Dubbing Pro</title>
+    <script src="https://cdn.tailwindcss.com"></script>
 </head>
-<body>
-    <div class="card shadow-lg text-center">
-        <h4 class="mb-3">🎙️ Dubbing Sync</h4>
-        <p class="text-secondary small mb-4">Vocal Removed | BG 100% | Silent Logs</p>
-        <form id="f">
-            <input type="file" id="v" class="form-control mb-2 bg-dark text-white border-secondary" required>
-            <select id="s" class="form-select mb-2 bg-dark text-white border-secondary">
-                <option value="id-ID">Indonesia 🇮🇩</option>
-                <option value="en-US">English 🇺🇸</option>
-                <option value="ja-JP">Japanese 🇯🇵</option>
-            </select>
-            <textarea id="p" class="form-control mb-3 bg-dark text-white border-secondary" placeholder="Prompt (opsional)..."></textarea>
-            <button type="submit" id="b" class="btn btn-primary w-100 fw-bold">PROSES VIDEO</button>
+<body class="bg-gray-900 text-gray-100 min-h-screen flex items-center justify-center p-4 font-sans">
+
+    <div class="bg-gray-800 rounded-2xl shadow-2xl p-8 w-full max-w-md border border-gray-700">
+        <h2 class="text-2xl font-bold text-center mb-2 text-white">🎙️ Dubbing Sync Pro</h2>
+        <p class="text-sm text-center text-gray-400 mb-6">Suara AI 300% | Backsound Asli 40%</p>
+
+        <form id="uploadForm" class="space-y-4">
+            <div>
+                <label class="block text-sm font-medium text-gray-300 mb-1">Upload Video (MP4)</label>
+                <input type="file" id="videoFile" accept="video/*" required 
+                    class="block w-full text-sm text-gray-400 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-blue-600 file:text-white hover:file:bg-blue-700 focus:outline-none bg-gray-700 rounded-lg p-2 border border-gray-600">
+            </div>
+
+            <div>
+                <label class="block text-sm font-medium text-gray-300 mb-1">Bahasa Target</label>
+                <select id="targetVoice" class="w-full bg-gray-700 border border-gray-600 rounded-lg p-2.5 text-white focus:ring-2 focus:ring-blue-500 focus:outline-none">
+                    <option value="id-ID">Indonesia 🇮🇩</option>
+                    <option value="en-US">English 🇺🇸</option>
+                    <option value="ja-JP">Japanese 🇯🇵</option>
+                </select>
+            </div>
+
+            <div>
+                <label class="block text-sm font-medium text-gray-300 mb-1">Custom Prompt AI (Opsional)</label>
+                <textarea id="customPrompt" rows="2" placeholder="Gaya bahasa santai, dll..." 
+                    class="w-full bg-gray-700 border border-gray-600 rounded-lg p-2.5 text-white focus:ring-2 focus:ring-blue-500 focus:outline-none resize-none"></textarea>
+            </div>
+
+            <button type="submit" id="btnSubmit" 
+                class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-lg transition duration-200 shadow-lg shadow-blue-500/30">
+                Mulai Dubbing
+            </button>
         </form>
-        <div id="loading" class="mt-4 d-none text-center">
-            <div class="spinner-border text-primary spinner-border-sm mb-2"></div>
-            <div id="st" class="small text-primary">Menunggu...</div>
+
+        <!-- Loading State -->
+        <div id="loadingSection" class="hidden mt-6 flex flex-col items-center justify-center space-y-3">
+            <svg class="animate-spin h-8 w-8 text-blue-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+            </svg>
+            <span id="statusText" class="text-blue-400 font-medium tracking-wide">Menyiapkan...</span>
         </div>
-        <div id="res" class="mt-4 d-none">
-            <video id="vd" controls class="w-100 rounded border border-secondary mb-3"></video>
-            <a id="dl" href="#" class="btn btn-success w-100 fw-bold" download>DOWNLOAD VIDEO</a>
+
+        <!-- Result State -->
+        <div id="resultSection" class="hidden mt-6 space-y-4">
+            <video id="resVideo" controls class="w-full rounded-lg border border-gray-600 bg-black"></video>
+            <a id="dlBtn" href="#" download 
+                class="block text-center w-full bg-green-600 hover:bg-green-700 text-white font-bold py-3 px-4 rounded-lg transition duration-200 shadow-lg shadow-green-500/30">
+                ⬇️ Download Video
+            </a>
         </div>
     </div>
+
     <script>
-        const form=document.getElementById('f');
-        form.onsubmit=async(e)=>{
+        const form = document.getElementById('uploadForm');
+        form.onsubmit = async (e) => {
             e.preventDefault();
-            const fd=new FormData();
-            fd.append('video',document.getElementById('v').files[0]);
-            fd.append('voice',document.getElementById('s').value);
-            fd.append('prompt',document.getElementById('p').value);
-            document.getElementById('b').disabled=true;
-            document.getElementById('loading').classList.remove('d-none');
-            const res=await fetch('/generate',{method:'POST',body:fd});
-            const data=await res.json();
-            const pol=setInterval(async()=>{
-                const r_res=await fetch('/status?task_id='+data.task_id);
-                const r_data=await r_res.json();
-                document.getElementById('st').innerText=r_data.status;
-                if(r_data.status==='Selesai'){
-                    clearInterval(pol);
-                    document.getElementById('loading').classList.add('d-none');
-                    document.getElementById('res').classList.remove('d-none');
-                    document.getElementById('vd').src=r_data.result_video;
-                    document.getElementById('dl').href=r_data.result_video;
-                    document.getElementById('b').disabled=false;
-                } else if(r_data.status==='Error'){
-                    alert("Error: " + r_data.error_message); location.reload();
+            const fd = new FormData();
+            fd.append('video', document.getElementById('videoFile').files[0]);
+            fd.append('voice', document.getElementById('targetVoice').value);
+            fd.append('prompt', document.getElementById('customPrompt').value);
+
+            // UI Changes
+            document.getElementById('btnSubmit').disabled = true;
+            document.getElementById('btnSubmit').classList.add('opacity-50', 'cursor-not-allowed');
+            document.getElementById('loadingSection').classList.remove('hidden');
+            document.getElementById('resultSection').classList.add('hidden');
+
+            const res = await fetch('/generate', { method: 'POST', body: fd });
+            const data = await res.json();
+            
+            const timer = setInterval(async () => {
+                const sRes = await fetch('/status?task_id=' + data.task_id);
+                const sData = await sRes.json();
+                
+                document.getElementById('statusText').innerText = sData.status;
+
+                if (sData.status === 'Selesai') {
+                    clearInterval(timer);
+                    document.getElementById('loadingSection').classList.add('hidden');
+                    document.getElementById('resultSection').classList.remove('hidden');
+                    document.getElementById('resVideo').src = sData.result_video;
+                    document.getElementById('dlBtn').href = sData.result_video;
+                    
+                    // Reset button
+                    document.getElementById('btnSubmit').disabled = false;
+                    document.getElementById('btnSubmit').classList.remove('opacity-50', 'cursor-not-allowed');
+                } else if (sData.status === 'Error') {
+                    clearInterval(timer);
+                    alert("Terjadi Kesalahan: " + sData.error_message);
+                    location.reload();
                 }
-            },2000);
+            }, 2000);
         };
     </script>
 </body>