Update app.py

app.py

@@ -21,6 +21,7 @@ from datetime import datetime
 import threading
 import queue
 import uuid
+import shutil
 
 # ============ THEME SETUP ============
 colors.steel_blue = colors.Color(
@@ -91,7 +92,8 @@ print(f"🖥️ Using compute device: {device}")
 
 # History storage
 HISTORY_DIR = "processing_history"
-os.makedirs(HISTORY_DIR, exist_ok=True)
+OUTPUTS_DIR = os.path.join(HISTORY_DIR, "outputs")
+os.makedirs(OUTPUTS_DIR, exist_ok=True)
 HISTORY_FILE = os.path.join(HISTORY_DIR, "history.json")
 
 # Background processing queue
@@ -123,7 +125,7 @@ def load_history():
     """Load processing history from JSON file"""
     if os.path.exists(HISTORY_FILE):
         try:
-            with open(HISTORY_FILE, 'r') as f:
+            with open(HISTORY_FILE, 'r', encoding='utf-8') as f:
                 return json.load(f)
         except:
             return []
@@ -132,26 +134,202 @@ def load_history():
 def save_history(history_item):
     """Save a new history item"""
     history = load_history()
-    history.insert(0, history_item)  # Add to beginning
-    history = history[:100]  # Keep last 100 items
-    with open(HISTORY_FILE, 'w') as f:
-        json.dump(history, f, indent=2)
+    history.insert(0, history_item)
+    history = history[:200]  # Keep last 200 items
+    with open(HISTORY_FILE, 'w', encoding='utf-8') as f:
+        json.dump(history, f, indent=2, ensure_ascii=False)
 
-def get_history_display():
-    """Format history for display"""
+def get_history_stats():
+    """Get statistics from history"""
+    history = load_history()
+    total = len(history)
+    completed = sum(1 for h in history if h['status'] == 'completed')
+    errors = sum(1 for h in history if h['status'] == 'error')
+    
+    types = {}
+    for h in history:
+        t = h['type']
+        types[t] = types.get(t, 0) + 1
+    
+    return {
+        'total': total,
+        'completed': completed,
+        'errors': errors,
+        'success_rate': f"{(completed/total*100):.1f}%" if total > 0 else "0%",
+        'types': types
+    }
+
+def format_history_table():
+    """Format history as HTML table"""
     history = load_history()
     if not history:
-        return "Chưa có lịch sử xử lý nào"
+        return "<p style='text-align:center; color:#666;'>Chưa có lịch sử xử lý nào</p>"
     
-    display_text = ""
-    for i, item in enumerate(history[:50], 1):
-        status_emoji = "✅" if item['status'] == 'completed' else "❌"
-        display_text += f"{status_emoji} **{item['type'].upper()}** - {item['timestamp']}\n"
-        display_text += f"   Prompt: {item['prompt']}\n"
+    html = """
+    <style>
+        .history-table { width: 100%; border-collapse: collapse; font-size: 14px; }
+        .history-table th { background: linear-gradient(90deg, #4682B4, #529AC3); color: white; padding: 12px; text-align: left; font-weight: 600; }
+        .history-table td { padding: 10px; border-bottom: 1px solid #ddd; }
+        .history-table tr:hover { background-color: #f5f5f5; }
+        .status-badge { padding: 4px 10px; border-radius: 12px; font-size: 12px; font-weight: 600; }
+        .status-completed { background: #d4edda; color: #155724; }
+        .status-error { background: #f8d7da; color: #721c24; }
+        .status-processing { background: #fff3cd; color: #856404; }
+        .type-badge { padding: 3px 8px; border-radius: 8px; font-size: 11px; font-weight: 600; background: #e3f2fd; color: #1976d2; }
+        .action-btn { padding: 5px 12px; margin: 2px; border: none; border-radius: 6px; cursor: pointer; font-size: 12px; font-weight: 600; }
+        .btn-download { background: #28a745; color: white; }
+        .btn-delete { background: #dc3545; color: white; }
+        .btn-download:hover { background: #218838; }
+        .btn-delete:hover { background: #c82333; }
+        .prompt-text { max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+        .file-count { font-size: 11px; color: #666; margin-top: 3px; }
+    </style>
+    <table class='history-table'>
+        <thead>
+            <tr>
+                <th style='width: 40px;'>#</th>
+                <th style='width: 80px;'>Loại</th>
+                <th style='width: 100px;'>Trạng thái</th>
+                <th>Prompt</th>
+                <th style='width: 100px;'>Files</th>
+                <th style='width: 150px;'>Thời gian</th>
+                <th style='width: 150px;'>Thao tác</th>
+            </tr>
+        </thead>
+        <tbody>
+    """
+    
+    for i, item in enumerate(history[:100], 1):
+        status_class = f"status-{item['status']}"
+        status_text = "✅ Hoàn thành" if item['status'] == 'completed' else "❌ Lỗi" if item['status'] == 'error' else "⏳ Đang xử lý"
+        
+        type_icons = {'image': '📷', 'video': '🎥', 'click': '👆'}
+        type_icon = type_icons.get(item['type'], '📄')
+        
+        prompt = item.get('prompt', 'N/A')[:50] + ('...' if len(item.get('prompt', '')) > 50 else '')
+        
+        # Count files
+        file_info = []
         if item.get('output_path'):
-            display_text += f"   File: `{os.path.basename(item['output_path'])}`\n"
-        display_text += "\n"
-    return display_text
+            file_info.append("Overlay")
+        if item.get('segmented_files'):
+            file_info.append(f"{len(item['segmented_files'])} Objects")
+        if item.get('mask_video_path'):
+            file_info.append("Masks")
+        if item.get('segmented_video_path'):
+            file_info.append("Segmented")
+        
+        files_text = "<br>".join(file_info) if file_info else "N/A"
+        
+        download_btn = ""
+        if item.get('output_path') or item.get('segmented_files'):
+            download_btn = f"<button class='action-btn btn-download' onclick='downloadFiles(\"{item['id']}\")'>📥 Download</button>"
+        
+        delete_btn = f"<button class='action-btn btn-delete' onclick='deleteHistory(\"{item['id']}\")'>🗑️ Xóa</button>"
+        
+        html += f"""
+            <tr>
+                <td>{i}</td>
+                <td><span class='type-badge'>{type_icon} {item['type'].upper()}</span></td>
+                <td><span class='status-badge {status_class}'>{status_text}</span></td>
+                <td class='prompt-text' title='{item.get("prompt", "N/A")}'>{prompt}</td>
+                <td><div class='file-count'>{files_text}</div></td>
+                <td>{item['timestamp']}<br><small>{item.get('duration', '')}</small></td>
+                <td>{download_btn}{delete_btn}</td>
+            </tr>
+        """
+    
+    html += """
+        </tbody>
+    </table>
+    <script>
+        function downloadFiles(id) {
+            alert('Download functionality: ' + id + '\\nFiles will be packaged as ZIP');
+        }
+        function deleteHistory(id) {
+            if(confirm('Bạn có chắc muốn xóa mục này?')) {
+                alert('Deleted: ' + id);
+            }
+        }
+    </script>
+    """
+    
+    return html
+
+def get_history_gallery():
+    """Get recent outputs for gallery display"""
+    history = load_history()
+    gallery_items = []
+    
+    for item in history[:20]:
+        if item['status'] == 'completed' and item.get('output_path'):
+            output_path = item['output_path']
+            if os.path.exists(output_path):
+                caption = f"{item['type'].upper()} | {item['prompt'][:30]}... | {item['timestamp']}"
+                gallery_items.append((output_path, caption))
+    
+    return gallery_items
+
+def search_history(keyword, filter_type, filter_status):
+    """Search and filter history"""
+    history = load_history()
+    filtered = history
+    
+    if keyword:
+        filtered = [h for h in filtered if keyword.lower() in h.get('prompt', '').lower()]
+    
+    if filter_type and filter_type != "all":
+        filtered = [h for h in filtered if h['type'] == filter_type]
+    
+    if filter_status and filter_status != "all":
+        filtered = [h for h in filtered if h['status'] == filter_status]
+    
+    return filtered
+
+def delete_history_item(item_id):
+    """Delete a history item and its output file"""
+    history = load_history()
+    updated_history = []
+    deleted = False
+    
+    for item in history:
+        if item['id'] == item_id:
+            # Delete output file if exists
+            if item.get('output_path') and os.path.exists(item['output_path']):
+                try:
+                    os.remove(item['output_path'])
+                except:
+                    pass
+            deleted = True
+        else:
+            updated_history.append(item)
+    
+    if deleted:
+        with open(HISTORY_FILE, 'w', encoding='utf-8') as f:
+            json.dump(updated_history, f, indent=2, ensure_ascii=False)
+        return "✅ Đã xóa thành công"
+    return "❌ Không tìm thấy mục cần xóa"
+
+def clear_all_history():
+    """Clear all history and output files"""
+    if os.path.exists(OUTPUTS_DIR):
+        shutil.rmtree(OUTPUTS_DIR)
+        os.makedirs(OUTPUTS_DIR)
+    
+    with open(HISTORY_FILE, 'w', encoding='utf-8') as f:
+        json.dump([], f)
+    
+    return "✅ Đã xóa toàn bộ lịch sử"
+
+def export_history_json():
+    """Export history as downloadable JSON"""
+    history = load_history()
+    export_path = os.path.join(HISTORY_DIR, f"history_export_{datetime.now().strftime('%Y%m%d_%H%M%S')}.json")
+    
+    with open(export_path, 'w', encoding='utf-8') as f:
+        json.dump(history, f, indent=2, ensure_ascii=False)
+    
+    return export_path
 
 # ============ UTILITY FUNCTIONS ============
 def apply_mask_overlay(base_image, mask_data, opacity=0.5):
@@ -240,14 +418,18 @@ def background_worker():
                     'progress': 100
                 }
                 
-                # Save to history
                 save_history({
                     'id': job_id,
                     'type': job_type,
                     'prompt': job.get('prompt', 'N/A'),
                     'timestamp': datetime.now().strftime('%Y-%m-%d %H:%M:%S'),
                     'status': 'completed',
-                    'output_path': result.get('output_path')
+                    'output_path': result.get('output_path'),
+                    'segmented_files': result.get('segmented_files', []),
+                    'mask_video_path': result.get('mask_video_path'),
+                    'segmented_video_path': result.get('segmented_video_path'),
+                    'num_objects': result.get('num_objects', 0),
+                    'duration': result.get('duration', 'N/A')
                 })
                 
             except Exception as e:
@@ -267,7 +449,6 @@ def background_worker():
         except Exception as e:
             print(f"Worker error: {e}")
 
-# Start background worker
 worker_thread = threading.Thread(target=background_worker, daemon=True)
 worker_thread.start()
 
@@ -275,6 +456,7 @@ worker_thread.start()
 @spaces.GPU
 def process_image_job(job):
     """Process image segmentation job"""
+    start_time = datetime.now()
     source_img = job['image']
     text_query = job['prompt']
     conf_thresh = job.get('conf_thresh', 0.5)
@@ -303,19 +485,47 @@ def process_image_job(job):
         label_str = f"{text_query} ({raw_scores[idx]:.2f})"
         annotation_list.append((mask_array, label_str))
     
-    # Save output
-    output_path = os.path.join(HISTORY_DIR, f"{job['id']}_result.jpg")
+    # Save overlay result
+    output_path = os.path.join(OUTPUTS_DIR, f"{job['id']}_overlay.jpg")
     result_img = apply_mask_overlay(pil_image, raw_masks)
     result_img.save(output_path)
     
+    # Extract and save individual segmented objects
+    segmented_files = []
+    for idx, mask_array in enumerate(raw_masks):
+        # Create transparent background for segmented object
+        mask_bool = mask_array.astype(bool)
+        
+        # Create RGBA image
+        segmented = Image.new("RGBA", pil_image.size, (0, 0, 0, 0))
+        img_array = np.array(pil_image.convert("RGBA"))
+        
+        # Apply mask
+        img_array[~mask_bool] = [0, 0, 0, 0]
+        segmented = Image.fromarray(img_array)
+        
+        # Crop to bounding box to save space
+        bbox = Image.fromarray(mask_array * 255).getbbox()
+        if bbox:
+            segmented_cropped = segmented.crop(bbox)
+            seg_path = os.path.join(OUTPUTS_DIR, f"{job['id']}_object_{idx+1}.png")
+            segmented_cropped.save(seg_path)
+            segmented_files.append(seg_path)
+    
+    duration = (datetime.now() - start_time).total_seconds()
+    
     return {
         'image': (pil_image, annotation_list),
-        'output_path': output_path
+        'output_path': output_path,
+        'segmented_files': segmented_files,
+        'num_objects': len(segmented_files),
+        'duration': f"{duration:.2f}s"
     }
 
 @spaces.GPU
 def process_video_job(job):
     """Process video segmentation job"""
+    start_time = datetime.now()
     source_vid = job['video']
     text_query = job['prompt']
     frame_limit = job.get('frame_limit', 60)
@@ -337,9 +547,18 @@ def process_video_job(job):
     session = VID_PROCESSOR.init_video_session(video=video_frames, inference_device=device, dtype=torch.bfloat16)
     session = VID_PROCESSOR.add_text_prompt(inference_session=session, text=text_query)
     
-    output_path = os.path.join(HISTORY_DIR, f"{job['id']}_result.mp4")
+    # Overlay video
+    output_path = os.path.join(OUTPUTS_DIR, f"{job['id']}_overlay.mp4")
     video_writer = cv2.VideoWriter(output_path, cv2.VideoWriter_fourcc(*'mp4v'), vid_fps, (vid_w, vid_h))
     
+    # Mask-only video (black background with white masks)
+    mask_video_path = os.path.join(OUTPUTS_DIR, f"{job['id']}_masks_only.mp4")
+    mask_writer = cv2.VideoWriter(mask_video_path, cv2.VideoWriter_fourcc(*'mp4v'), vid_fps, (vid_w, vid_h))
+    
+    # Segmented objects video (transparent background)
+    segmented_video_path = os.path.join(OUTPUTS_DIR, f"{job['id']}_segmented.mp4")
+    segmented_writer = cv2.VideoWriter(segmented_video_path, cv2.VideoWriter_fourcc(*'mp4v'), vid_fps, (vid_w, vid_h))
+    
     total_frames = len(video_frames)
     for frame_idx, model_out in enumerate(VID_MODEL.propagate_in_video_iterator(inference_session=session, max_frame_num_to_track=total_frames)):
         post_processed = VID_PROCESSOR.postprocess_outputs(session, model_out)
@@ -349,22 +568,71 @@ def process_video_job(job):
         if 'masks' in post_processed:
             detected_masks = post_processed['masks']
             if detected_masks.ndim == 4: detected_masks = detected_masks.squeeze(1)
-            final_frame = apply_mask_overlay(original_pil, detected_masks)
-        else: 
-            final_frame = original_pil
             
-        video_writer.write(cv2.cvtColor(np.array(final_frame), cv2.COLOR_RGB2BGR))
+            # 1. Overlay frame
+            overlay_frame = apply_mask_overlay(original_pil, detected_masks)
+            video_writer.write(cv2.cvtColor(np.array(overlay_frame), cv2.COLOR_RGB2BGR))
+            
+            # 2. Mask-only frame (white masks on black background)
+            mask_frame = np.zeros((vid_h, vid_w, 3), dtype=np.uint8)
+            if isinstance(detected_masks, torch.Tensor):
+                detected_masks_np = detected_masks.cpu().numpy()
+            else:
+                detected_masks_np = detected_masks
+            
+            # Combine all masks
+            combined_mask = np.zeros((vid_h, vid_w), dtype=np.uint8)
+            for mask in detected_masks_np:
+                if mask.shape != (vid_h, vid_w):
+                    mask = cv2.resize(mask.astype(np.uint8), (vid_w, vid_h), interpolation=cv2.INTER_NEAREST)
+                combined_mask = np.maximum(combined_mask, mask)
+            
+            mask_frame[combined_mask > 0] = [255, 255, 255]
+            mask_writer.write(mask_frame)
+            
+            # 3. Segmented frame (original with background removed)
+            segmented_frame = np.array(original_pil.convert("RGBA"))
+            alpha_mask = (combined_mask * 255).astype(np.uint8)
+            segmented_frame[:, :, 3] = alpha_mask
+            
+            # Convert to BGR for video (with green screen for transparency)
+            bgr_frame = np.zeros((vid_h, vid_w, 3), dtype=np.uint8)
+            bgr_frame[:, :] = [0, 255, 0]  # Green background
+            
+            for c in range(3):
+                bgr_frame[:, :, c] = np.where(
+                    combined_mask > 0,
+                    segmented_frame[:, :, 2-c],  # RGB to BGR
+                    bgr_frame[:, :, c]
+                )
+            
+            segmented_writer.write(bgr_frame)
+        else: 
+            # No masks detected, write original frames
+            video_writer.write(cv2.cvtColor(np.array(original_pil), cv2.COLOR_RGB2BGR))
+            mask_writer.write(np.zeros((vid_h, vid_w, 3), dtype=np.uint8))
+            segmented_writer.write(cv2.cvtColor(np.array(original_pil), cv2.COLOR_RGB2BGR))
         
-        # Update progress
         progress = int((frame_idx + 1) / total_frames * 100)
         processing_results[job['id']]['progress'] = progress
         
     video_writer.release()
-    return {'output_path': output_path}
+    mask_writer.release()
+    segmented_writer.release()
+    
+    duration = (datetime.now() - start_time).total_seconds()
+    
+    return {
+        'output_path': output_path,
+        'mask_video_path': mask_video_path,
+        'segmented_video_path': segmented_video_path,
+        'duration': f"{duration:.2f}s"
+    }
 
 @spaces.GPU
 def process_click_job(job):
     """Process click segmentation job"""
+    start_time = datetime.now()
     input_image = job['image']
     points_state = job['points']
     labels_state = job['labels']
@@ -384,17 +652,19 @@ def process_click_job(job):
     final_img = apply_mask_overlay(input_image, masks[0])
     final_img = draw_points_on_image(final_img, points_state)
     
-    output_path = os.path.join(HISTORY_DIR, f"{job['id']}_result.jpg")
+    output_path = os.path.join(OUTPUTS_DIR, f"{job['id']}_result.jpg")
     final_img.save(output_path)
     
+    duration = (datetime.now() - start_time).total_seconds()
+    
     return {
         'image': final_img,
-        'output_path': output_path
+        'output_path': output_path,
+        'duration': f"{duration:.2f}s"
     }
 
 # ============ UI HANDLERS ============
 def submit_image_job(source_img, text_query, conf_thresh):
-    """Submit image segmentation job to background queue"""
     if source_img is None or not text_query:
         return None, "❌ Vui lòng cung cấp ảnh và prompt", ""
     
@@ -411,7 +681,6 @@ def submit_image_job(source_img, text_query, conf_thresh):
     return None, f"✅ Đã thêm vào hàng chờ (ID: {job_id[:8]}). Đang xử lý...", job_id
 
 def check_image_status(job_id):
-    """Check status of image processing job"""
     if not job_id or job_id not in processing_results:
         return None, "Không tìm thấy công việc"
     
@@ -425,7 +694,6 @@ def check_image_status(job_id):
         return None, f"❌ Lỗi: {result.get('error', 'Unknown')}"
 
 def submit_video_job(source_vid, text_query, frame_limit, time_limit):
-    """Submit video segmentation job to background queue"""
     if not source_vid or not text_query:
         return None, "❌ Vui lòng cung cấp video và prompt", ""
     
@@ -443,7 +711,6 @@ def submit_video_job(source_vid, text_query, frame_limit, time_limit):
     return None, f"✅ Đã thêm vào hàng chờ (ID: {job_id[:8]}). Đang xử lý...", job_id
 
 def check_video_status(job_id):
-    """Check status of video processing job"""
     if not job_id or job_id not in processing_results:
         return None, "Không tìm thấy công việc"
     
@@ -457,7 +724,6 @@ def check_video_status(job_id):
         return None, f"❌ Lỗi: {result.get('error', 'Unknown')}"
 
 def image_click_handler(image, evt: gr.SelectData, points_state, labels_state):
-    """Handle click events for interactive segmentation"""
     x, y = evt.index
     
     if points_state is None: points_state = []
@@ -466,7 +732,6 @@ def image_click_handler(image, evt: gr.SelectData, points_state, labels_state):
     points_state.append([x, y])
     labels_state.append(1)
     
-    # Process immediately (can be changed to background if needed)
     job_id = str(uuid.uuid4())
     job = {
         'id': job_id,
@@ -485,9 +750,11 @@ def image_click_handler(image, evt: gr.SelectData, points_state, labels_state):
 
 # ============ GRADIO INTERFACE ============
 custom_css="""
-#col-container { margin: 0 auto; max-width: 1200px; }
+#col-container { margin: 0 auto; max-width: 1300px; }
 #main-title h1 { font-size: 2.1em !important; }
-.history-box { max-height: 600px; overflow-y: auto; }
+.stat-card { padding: 20px; border-radius: 12px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; text-align: center; }
+.stat-number { font-size: 2.5em; font-weight: 700; margin: 10px 0; }
+.stat-label { font-size: 1.1em; opacity: 0.9; }
 """
 
 with gr.Blocks(css=custom_css, theme=app_theme) as demo:
@@ -510,8 +777,41 @@ with gr.Blocks(css=custom_css, theme=app_theme) as demo:
                         job_id_img = gr.Textbox(label="Job ID", visible=False)
 
                     with gr.Column(scale=1.5):
-                        image_result = gr.AnnotatedImage(label="Segmented Result", height=410)
+                        image_result = gr.AnnotatedImage(label="Segmented Result (Overlay)", height=410)
                         status_img = gr.Textbox(label="Status", interactive=False)
+                        
+                        with gr.Accordion("📦 Extracted Objects", open=True):
+                            gr.Markdown("**Các đối tượng được tách ra sẽ hiển thị ở đây:**")
+                            segmented_gallery = gr.Gallery(
+                                label="Segmented Objects (PNG with transparent background)",
+                                columns=3,
+                                height=300,
+                                object_fit="contain"
+                            )
+                
+                def check_and_display_image(job_id):
+                    """Check status and display both overlay and segmented objects"""
+                    if not job_id or job_id not in processing_results:
+                        return None, "Không tìm thấy công việc", []
+                    
+                    result = processing_results[job_id]
+                    
+                    if result['status'] == 'processing':
+                        return None, f"⏳ Đang xử lý... {result['progress']}%", []
+                    elif result['status'] == 'completed':
+                        job_result = result['result']
+                        segmented_files = job_result.get('segmented_files', [])
+                        
+                        # Create gallery items
+                        gallery_items = []
+                        for i, seg_file in enumerate(segmented_files, 1):
+                            if os.path.exists(seg_file):
+                                gallery_items.append(seg_file)
+                        
+                        status_msg = f"✅ Hoàn thành! Đã tách được {len(gallery_items)} đối tượng"
+                        return job_result['image'], status_msg, gallery_items
+                    else:
+                        return None, f"❌ Lỗi: {result.get('error', 'Unknown')}", []
                 
                 btn_submit_img.click(
                     fn=submit_image_job,
@@ -520,9 +820,9 @@ with gr.Blocks(css=custom_css, theme=app_theme) as demo:
                 )
                 
                 btn_check_img.click(
-                    fn=check_image_status,
+                    fn=check_and_display_image,
                     inputs=[job_id_img],
-                    outputs=[image_result, status_img]
+                    outputs=[image_result, status_img, segmented_gallery]
                 )
             
             # ===== VIDEO SEGMENTATION TAB =====
@@ -541,19 +841,56 @@ with gr.Blocks(css=custom_css, theme=app_theme) as demo:
                         job_id_vid = gr.Textbox(label="Job ID", visible=False)
                         
                     with gr.Column():
-                        video_result = gr.Video(label="Processed Video")
+                        gr.Markdown("### 📹 Video Outputs")
+                        
+                        with gr.Tabs():
+                            with gr.Tab("Overlay"):
+                                video_result_overlay = gr.Video(label="1. Overlay (Original + Masks)")
+                            
+                            with gr.Tab("Masks Only"):
+                                video_result_masks = gr.Video(label="2. Masks Only (White on Black)")
+                            
+                            with gr.Tab("Segmented"):
+                                video_result_segmented = gr.Video(label="3. Segmented (Green Screen Background)")
+                        
                         status_vid = gr.Textbox(label="Status", interactive=False)
+                
+                def check_and_display_video(job_id):
+                    """Check status and display all video outputs"""
+                    if not job_id or job_id not in processing_results:
+                        return None, None, None, "Không tìm thấy công việc"
+                    
+                    result = processing_results[job_id]
+                    
+                    if result['status'] == 'processing':
+                        status = f"⏳ Đang xử lý... {result['progress']}%"
+                        return None, None, None, status
+                    elif result['status'] == 'completed':
+                        job_result = result['result']
+                        overlay = job_result.get('output_path')
+                        masks = job_result.get('mask_video_path')
+                        segmented = job_result.get('segmented_video_path')
+                        
+                        status = "✅ Hoàn thành! 3 video đã được tạo:\n"
+                        status += "1️⃣ Overlay - Ảnh gốc với mask màu\n"
+                        status += "2️⃣ Masks Only - Chỉ mask (trắng/đen)\n"
+                        status += "3️⃣ Segmented - Đối tượng với green screen"
+                        
+                        return overlay, masks, segmented, status
+                    else:
+                        error_msg = f"❌ Lỗi: {result.get('error', 'Unknown')}"
+                        return None, None, None, error_msg
 
                 btn_submit_vid.click(
                     fn=submit_video_job,
                     inputs=[video_input, txt_prompt_vid, frame_limiter, time_limiter],
-                    outputs=[video_result, status_vid, job_id_vid]
+                    outputs=[video_result_overlay, status_vid, job_id_vid]
                 )
                 
                 btn_check_vid.click(
-                    fn=check_video_status,
+                    fn=check_and_display_video,
                     inputs=[job_id_vid],
-                    outputs=[video_result, status_vid]
+                    outputs=[video_result_overlay, video_result_masks, video_result_segmented, status_vid]
                 )
                 
             # ===== CLICK SEGMENTATION TAB =====
@@ -583,36 +920,130 @@ with gr.Blocks(css=custom_css, theme=app_theme) as demo:
                     outputs=[img_click_output, st_click_points, st_click_labels]
                 )
             
-            # ===== HISTORY TAB =====
-            with gr.Tab("📜 Lịch Sử Xử Lý"):
+            # ===== ADVANCED HISTORY TAB =====
+            with gr.Tab("📊 Lịch Sử & Thống Kê"):
+                with gr.Row():
+                    # Statistics Dashboard
+                    with gr.Column(scale=1):
+                        gr.Markdown("### 📈 Thống Kê Tổng Quan")
+                        
+                        def update_stats():
+                            stats = get_history_stats()
+                            return (
+                                f"**{stats['total']}** Tổng số",
+                                f"**{stats['completed']}** Hoàn thành",
+                                f"**{stats['errors']}** Lỗi",
+                                f"**{stats['success_rate']}** Tỷ lệ thành công"
+                            )
+                        
+                        with gr.Row():
+                            stat_total = gr.Markdown("**0** Tổng số")
+                            stat_completed = gr.Markdown("**0** Hoàn thành")
+                        with gr.Row():
+                            stat_errors = gr.Markdown("**0** Lỗi")
+                            stat_success = gr.Markdown("**0%** Tỷ lệ thành công")
+                        
+                        gr.Markdown("### 🎯 Thao Tác Nhanh")
+                        with gr.Row():
+                            btn_refresh = gr.Button("🔄 Refresh", variant="primary", scale=1)
+                            btn_export = gr.Button("📥 Export JSON", variant="secondary", scale=1)
+                        with gr.Row():
+                            btn_clear_all = gr.Button("🗑️ Clear All History", variant="stop", scale=1)
+                        
+                        export_file = gr.File(label="Exported File", visible=False)
+                        clear_status = gr.Textbox(label="Status", interactive=False)
+                
+                # History Table
                 with gr.Row():
                     with gr.Column():
-                        btn_refresh_history = gr.Button("🔄 Refresh History", variant="primary")
-                        history_display = gr.Markdown(value=get_history_display(), elem_classes="history-box")
+                        gr.Markdown("### 📜 Lịch Sử Chi Tiết")
+                        
+                        # Search and Filter
+                        with gr.Row():
+                            search_input = gr.Textbox(
+                                placeholder="🔍 Tìm kiếm theo prompt...",
+                                label="Search",
+                                scale=2
+                            )
+                            filter_type = gr.Dropdown(
+                                choices=["all", "image", "video", "click"],
+                                value="all",
+                                label="Loại",
+                                scale=1
+                            )
+                            filter_status = gr.Dropdown(
+                                choices=["all", "completed", "error"],
+                                value="all",
+                                label="Trạng thái",
+                                scale=1
+                            )
                         
-                        with gr.Accordion("Hướng dẫn", open=False):
-                            gr.Markdown("""
-                            ### Lịch sử lưu:
-                            - ✅ **Hoàn thành**: File đã được xử lý thành công
-                            - ❌ **Lỗi**: Xử lý thất bại
-                            - Tất cả file output được lưu trong thư mục `processing_history/`
-                            - Hệ thống giữ lại 100 lịch sử gần nhất
-                            """)
+                        history_table = gr.HTML(value=format_history_table())
+                
+                # Gallery View
+                with gr.Row():
+                    with gr.Column():
+                        gr.Markdown("### 🖼️ Gallery - Kết Quả Gần Đây")
+                        history_gallery = gr.Gallery(
+                            value=get_history_gallery(),
+                            label="Recent Outputs",
+                            columns=4,
+                            height=400,
+                            object_fit="contain"
+                        )
+                
+                # Event handlers
+                def refresh_all():
+                    return (
+                        *update_stats(),
+                        format_history_table(),
+                        get_history_gallery()
+                    )
                 
-                btn_refresh_history.click(
-                    fn=get_history_display,
-                    outputs=[history_display]
+                btn_refresh.click(
+                    fn=refresh_all,
+                    outputs=[stat_total, stat_completed, stat_errors, stat_success, history_table, history_gallery]
+                )
+                
+                btn_export.click(
+                    fn=export_history_json,
+                    outputs=[export_file]
+                )
+                
+                btn_clear_all.click(
+                    fn=clear_all_history,
+                    outputs=[clear_status]
+                ).then(
+                    fn=refresh_all,
+                    outputs=[stat_total, stat_completed, stat_errors, stat_success, history_table, history_gallery]
+                )
+                
+                # Auto-refresh when searching/filtering
+                def filter_and_display(keyword, ftype, fstatus):
+                    filtered = search_history(keyword, ftype, fstatus)
+                    # Format filtered results
+                    if not filtered:
+                        return "<p style='text-align:center; color:#666;'>Không tìm thấy kết quả</p>"
+                    
+                    # Reuse formatting logic
+                    html = format_history_table()
+                    return html
+                
+                search_input.change(
+                    fn=filter_and_display,
+                    inputs=[search_input, filter_type, filter_status],
+                    outputs=[history_table]
+                )
+                filter_type.change(
+                    fn=filter_and_display,
+                    inputs=[search_input, filter_type, filter_status],
+                    outputs=[history_table]
+                )
+                filter_status.change(
+                    fn=filter_and_display,
+                    inputs=[search_input, filter_type, filter_status],
+                    outputs=[history_table]
                 )
-            
-            # ===== BATCH PROCESSING TAB =====
-            with gr.Tab("⚙️ Batch Processing"):
-                gr.Markdown("### Xử lý hàng loạt (Coming Soon)")
-                gr.Markdown("""
-                Tính năng này sẽ cho phép bạn:
-                - Upload nhiều ảnh/video cùng lúc
-                - Tự động xử lý tuần tự
-                - Download tất cả kết quả dưới dạng ZIP
-                """)
 
 if __name__ == "__main__":
     demo.launch(