Update app.py

app.py

@@ -8,6 +8,7 @@ import json
 from flask import Flask, request, jsonify, render_template_string, send_file
 from moviepy.editor import VideoFileClip, TextClip, CompositeVideoClip, concatenate_videoclips
 from moviepy.audio.fx.all import audio_fadein, audio_fadeout
+import moviepy.video.fx.all as vfx # Tambahan untuk transisi visual
 from faster_whisper import WhisperModel
 
 app = Flask(__name__)
@@ -19,7 +20,7 @@ JOBS = {}
 whisper_model = WhisperModel("base", device="cpu", compute_type="int8")
 
 # ==========================================
-# UI HTML (Tetap sama, elegan & modern)
+# UI HTML (Tetap Modern)
 # ==========================================
 HTML_TEMPLATE = """
 <!DOCTYPE html>
@@ -27,37 +28,37 @@ HTML_TEMPLATE = """
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>AI Pro Clip Editor - Smooth Edit</title>
+    <title>AI Cinematic Clipper</title>
     <script src="https://cdn.tailwindcss.com"></script>
 </head>
-<body class="bg-gray-950 text-gray-200 min-h-screen flex flex-col items-center p-6">
+<body class="bg-gray-950 text-gray-200 min-h-screen flex flex-col items-center p-6 font-sans">
     <div class="w-full max-w-2xl bg-gray-900 p-8 rounded-3xl border border-gray-800 shadow-2xl">
-        <h1 class="text-3xl font-black text-center mb-2 bg-gradient-to-r from-green-400 to-blue-500 bg-clip-text text-transparent">AI SMOOTH CLIPPER</h1>
-        <p class="text-center text-gray-500 text-sm mb-8">Pemotongan akurat pada jeda napas & kata</p>
+        <h1 class="text-3xl font-black text-center mb-1 bg-gradient-to-r from-purple-400 to-blue-500 bg-clip-text text-transparent">AI CINEMATIC CLIPPER</h1>
+        <p class="text-center text-gray-400 text-sm mb-8">Hasil mulus, transisi rapi, narasi nyambung</p>
 
         <form id="clipForm" class="space-y-6">
-            <input type="url" id="videoUrl" class="w-full p-4 bg-gray-800 rounded-xl border border-gray-700 outline-none focus:ring-2 focus:ring-green-500" placeholder="Masukkan Link Video MP4...">
-            <div class="text-center font-bold text-gray-700 text-xs tracking-widest">ATAU UPLOAD FILE</div>
-            <input type="file" id="videoFile" accept="video/mp4" class="w-full text-sm text-gray-400 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:bg-green-600 file:text-white hover:file:bg-green-700">
+            <input type="url" id="videoUrl" class="w-full p-4 bg-gray-800 rounded-xl border border-gray-700 outline-none focus:ring-2 focus:ring-purple-500 transition" placeholder="Masukkan Link Video MP4...">
+            <div class="text-center font-bold text-gray-600 text-xs tracking-widest">ATAU UPLOAD FILE</div>
+            <input type="file" id="videoFile" accept="video/mp4" class="w-full text-sm text-gray-400 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:bg-purple-600 file:text-white hover:file:bg-purple-700 transition">
             
-            <button type="submit" class="w-full bg-green-600 hover:bg-green-500 text-white font-black py-4 rounded-xl transition-all transform active:scale-95 shadow-xl">BUAT VIDEO VIRAL ✨</button>
+            <button type="submit" class="w-full bg-purple-600 hover:bg-purple-500 text-white font-black py-4 rounded-xl transition-all transform active:scale-95 shadow-lg">BUAT VIDEO SEKARANG ✨</button>
         </form>
 
         <div id="statusArea" class="mt-10 hidden">
             <div class="flex justify-between mb-2">
-                <span id="statusText" class="text-sm font-bold text-green-400 italic">Menganalisis...</span>
-                <span id="percentText" class="text-sm font-black">0%</span>
+                <span id="statusText" class="text-sm font-bold text-purple-400 italic">Memulai AI...</span>
+                <span id="percentText" class="text-sm font-black text-white">0%</span>
             </div>
-            <div class="w-full bg-gray-800 rounded-full h-4 p-1">
-                <div id="progressBar" class="bg-gradient-to-r from-green-500 to-blue-500 h-2 rounded-full transition-all duration-700" style="width: 0%"></div>
+            <div class="w-full bg-gray-800 rounded-full h-3 p-1">
+                <div id="progressBar" class="bg-gradient-to-r from-purple-500 to-blue-500 h-1.5 rounded-full transition-all duration-700" style="width: 0%"></div>
             </div>
         </div>
 
-        <div id="resultArea" class="mt-10 hidden text-center">
-            <video id="player" controls class="w-full rounded-2xl border border-gray-700 shadow-2xl bg-black mb-6" style="max-height: 450px;"></video>
+        <div id="resultArea" class="mt-10 hidden text-center animate-fade-in">
+            <video id="player" controls playsinline class="w-full rounded-2xl border border-gray-700 shadow-2xl bg-black mb-6" style="max-height: 450px;"></video>
             <div class="flex gap-3">
                 <a id="downloadBtn" href="#" class="flex-1 bg-white text-black font-black py-3 rounded-xl hover:bg-gray-200 transition">DOWNLOAD HD</a>
-                <button onclick="location.reload()" class="px-6 bg-gray-800 rounded-xl border border-gray-700 hover:bg-gray-700">BUAT LAGI</button>
+                <button onclick="location.reload()" class="px-6 bg-gray-800 text-white rounded-xl border border-gray-700 hover:bg-gray-700 transition">BUAT LAGI</button>
             </div>
         </div>
     </div>
@@ -71,14 +72,20 @@ HTML_TEMPLATE = """
 
             if (file) formData.append('video_file', file);
             else if (url) formData.append('video_url', url);
-            else return alert("Pilih video dulu!");
+            else return alert("Pilih video atau masukkan link!");
 
             document.getElementById('statusArea').classList.remove('hidden');
             document.getElementById('clipForm').classList.add('hidden');
 
-            const res = await fetch('/generate', { method: 'POST', body: formData });
-            const data = await res.json();
-            if (data.job_id) pollStatus(data.job_id);
+            try {
+                const res = await fetch('/generate', { method: 'POST', body: formData });
+                const data = await res.json();
+                if (data.job_id) pollStatus(data.job_id);
+                else throw new Error(data.error || "Gagal memulai");
+            } catch (err) {
+                alert(err.message);
+                location.reload();
+            }
         });
 
         async function pollStatus(jobId) {
@@ -112,11 +119,11 @@ HTML_TEMPLATE = """
 
 def time_to_seconds(time_str):
     try:
-        parts = list(map(int, time_str.split(':')))
+        parts = list(map(float, time_str.split(':')))
         if len(parts) == 3: return parts[0] * 3600 + parts[1] * 60 + parts[2]
         if len(parts) == 2: return parts[0] * 60 + parts[1]
         return parts[0]
-    except: return 0
+    except: return 0.0
 
 def background_processor(job_id, video_path):
     try:
@@ -124,7 +131,7 @@ def background_processor(job_id, video_path):
         original_height = full_clip.h
         total_duration = full_clip.duration
 
-        # 1. Transkripsi dengan akurasi per kata
+        # 1. Transkripsi dengan Akurasi Tinggi
         JOBS[job_id].update({"message": "AI mentranskrip & memetakan jeda...", "progress": 15})
         segments_whisper, _ = whisper_model.transcribe(video_path, word_timestamps=True)
         
@@ -135,22 +142,19 @@ def background_processor(job_id, video_path):
                 words_data.append(word)
             transcript_text += f"[{int(segment.start//60):02d}:{int(segment.start%60):02d} - {int(segment.end//60):02d}:{int(segment.end%60):02d}] {segment.text.strip()}\n"
 
-        # 2. AI Editor Memilih Klip
+        # 2. AI Editor (Aturan Diperketat)
         JOBS[job_id].update({"message": "Menyusun cerita yang nyambung...", "progress": 35})
         
-        prompt = f"""Kamu adalah Video Editor. Tugasmu memilih 2-3 segmen berdurasi agak panjang (minimal 10-15 detik per klip) dari video ini agar membentuk satu cerita utuh.
-JANGAN memilih klip yang terlalu pendek agar video tidak terlihat patah-patah.
+        prompt = f"""Kamu adalah Video Editor Profesional. Tugasmu merangkum video ini menjadi maksimal 1 atau 2 klip panjang.
+JANGAN memberikan klip yang pendek-pendek! Setiap klip MINIMAL berdurasi 15 detik sampai 30 detik.
+Klip yang kamu pilih harus menyambung menjadi satu cerita yang masuk akal.
 
-Syarat:
-1. Setiap segmen HARUS kalimat utuh.
-2. Ceritanya harus nyambung dari awal sampai akhir.
-3. Balas HANYA dengan JSON array:
+Balas HANYA dengan JSON array:
 [
-  {{"start": "MM:SS", "end": "MM:SS", "narasi": "Alasan"}},
-  {{"start": "MM:SS", "end": "MM:SS", "narasi": "Alasan"}}
+  {{"start": "MM:SS", "end": "MM:SS", "narasi": "Alasan memilih segmen ini"}}
 ]
 
-Transkrip:
+Transkrip Video:
 {transcript_text[:3500]}
 """
         try:
@@ -159,76 +163,93 @@ Transkrip:
             json_match = re.search(r'\[\s*\{.*?\}\s*\]', ai_ans, re.DOTALL)
             points = json.loads(json_match.group(0)) if json_match else []
         except:
-            points = [{"start": "00:00", "end": "00:15", "narasi": "Fallback"}]
+            points = [{"start": "00:00", "end": "00:20", "narasi": "Fallback"}]
+
+        if not points: raise Exception("AI gagal merumuskan skenario.")
 
-        if not points: raise Exception("AI gagal merumuskan JSON.")
+        # URUTKAN WAKTU agar video tidak terbolak-balik
+        points = sorted(points, key=lambda x: time_to_seconds(x.get('start', '00:00')))
 
-        # 3. LOGIKA SMART BOUNDARY (Pemotongan Akurat di Jeda Kata)
-        JOBS[job_id].update({"message": "Menghaluskan titik potong audio...", "progress": 55})
+        # 3. Logika Smart Boundary & Transisi Visual
+        JOBS[job_id].update({"message": "Memotong dan merender efek...", "progress": 55})
         
         final_clips_to_concat = []
         font_path = "/usr/share/fonts/truetype/dejavu/DejaVuSans-Bold.ttf"
         if not os.path.exists(font_path): font_path = "Arial"
 
+        last_end_time = -1 # Tracker untuk mencegah overlap
+
         for p in points:
             raw_start = time_to_seconds(p.get('start', '00:00'))
-            raw_end = time_to_seconds(p.get('end', '00:15'))
+            raw_end = time_to_seconds(p.get('end', '00:20'))
             
-            # Cari kata aktual yang paling dekat dengan pilihan AI
+            # Anti-Overlap (Mencegah klip tabrakan)
+            if raw_start <= last_end_time:
+                raw_start = last_end_time + 0.5
+            if raw_end <= raw_start + 2: # Lewati jika durasi klip terlalu pendek (error AI)
+                continue
+
+            # Sensor Kata: Potong tepat sebelum kata pertama dan sesudah kata terakhir
             start_word = next((w for w in words_data if w.start >= max(0, raw_start - 2)), None)
             end_word = next((w for w in reversed(words_data) if w.end <= min(total_duration, raw_end + 2)), None)
 
             if start_word and end_word and start_word.start < end_word.end:
-                # Beri ruang napas 0.3 detik sebelum dan sesudah kata diucapkan
-                actual_start = max(0, start_word.start - 0.3)
-                actual_end = min(total_duration, end_word.end + 0.3)
+                actual_start = max(0, start_word.start - 0.2)
+                actual_end = min(total_duration, end_word.end + 0.2)
             else:
-                actual_start = max(0, raw_start - 0.3)
-                actual_end = min(total_duration, raw_end + 0.3)
+                actual_start = max(0, raw_start - 0.2)
+                actual_end = min(total_duration, raw_end + 0.2)
+
+            last_end_time = actual_end # Update tracker
 
-            # Potong Video Berdasarkan Kata (Bukan Angka Mentah AI)
+            # Ambil Subclip
             subclip = full_clip.subclip(actual_start, actual_end)
             
-            # Terapkan AUDIO FADE IN & OUT agar perpindahan tidak "Klik/Cekrek"
+            # EFEK TRANSISI PRO: Visual Fade + Audio Fade (0.15 detik)
+            # Ini akan menghilangkan jump cut kasar dan audio pop
+            subclip = subclip.fx(vfx.fadein, 0.15).fx(vfx.fadeout, 0.15)
             subclip = subclip.set_audio(
-                subclip.audio.fx(audio_fadein, 0.1).fx(audio_fadeout, 0.1)
+                subclip.audio.fx(audio_fadein, 0.15).fx(audio_fadeout, 0.15)
             )
 
-            # Tambahkan Subtitle HANYA untuk klip ini (Sinkronisasi 100% sempurna)
+            # Generate Subtitle HANYA untuk klip ini
             txt_clips = []
             for wd in words_data:
                 if wd.start >= actual_start and wd.end <= actual_end:
                     rel_start = wd.start - actual_start
                     rel_end = wd.end - actual_start
                     
+                    # Style subtitle dibuat lebih tebal agar mudah dibaca
                     t = TextClip(
                         wd.word.strip().upper(),
                         font=font_path, 
-                        fontsize=original_height * 0.06, 
+                        fontsize=original_height * 0.065, 
                         color='yellow', 
                         stroke_color='black', 
-                        stroke_width=2,
+                        stroke_width=3,
                         method='label'
                     ).set_start(rel_start).set_end(rel_end).set_position(('center', int(original_height * 0.85)))
                     
                     txt_clips.append(t)
 
-            # Gabungkan Video + Subtitle untuk segmen ini
+            # Gabungkan gambar video dengan subtitle
             composite_subclip = CompositeVideoClip([subclip] + txt_clips)
             final_clips_to_concat.append(composite_subclip)
 
-        # 4. GABUNGKAN SEMUA KLIP YANG SUDAH JADI
+        # 4. GABUNGKAN SEMUA
         JOBS[job_id].update({"message": "Merender video akhir...", "progress": 70})
         
         if not final_clips_to_concat:
-            raise Exception("Gagal memotong video. Durasi tidak valid.")
+            raise Exception("AI gagal memilih klip yang valid. Coba ulangi.")
 
+        # Compose clips
         merged_video = concatenate_videoclips(final_clips_to_concat, method="compose")
 
         output_filename = f"final_{job_id}.mp4"
         output_path = os.path.join(app.config['UPLOAD_FOLDER'], output_filename)
         JOBS[job_id]['files_to_delete'].append(output_path)
 
+        # Render Optimize
         merged_video.write_videofile(
             output_path, 
             fps=24, 
@@ -239,6 +260,7 @@ Transkrip:
             logger=None
         )
 
+        # Clean Memory Beban Berat
         full_clip.close()
         merged_video.close()
         for c in final_clips_to_concat: c.close()
@@ -246,7 +268,8 @@ Transkrip:
         JOBS[job_id].update({"status": "completed", "progress": 100, "message": "Video Selesai!", "result": output_filename})
 
     except Exception as e:
-        JOBS[job_id].update({"status": "error", "message": str(e)})
+        print(f"ERROR JOB {job_id}: {str(e)}")
+        JOBS[job_id].update({"status": "error", "message": "Gagal merender video. Silakan coba lagi."})
 
 # ==========================================
 # ROUTES