Update app.py

app.py

@@ -1,212 +1,106 @@
-"""
-ANSIM BLUR - Face Privacy Protection
-=====================================
-Advanced AI-Powered Face Detection & Privacy Protection
-Using YOLOv8 for face detection with Gaussian/Mosaic blur options
-"""
-
 import gradio as gr
 import cv2
 import numpy as np
 import tempfile
 import os
 from pathlib import Path
-from typing import Optional, Tuple, List
+from typing import Optional, Tuple
 import torch
 from PIL import Image
 
-# ============================================
-# Constants & Configuration
-# ============================================
-BLUR_MODES = ["Gaussian Blur", "Mosaic Effect"]
-
-DEFAULT_CONFIG = {
-    "confidence": 0.25,
-    "iou": 0.45,
-    "expand_ratio": 0.05,
-    "blur_intensity": 51,
-    "mosaic_size": 15,
-}
-
-SLIDER_CONFIG = {
-    "confidence": {"minimum": 0.05, "maximum": 0.9, "step": 0.01},
-    "iou": {"minimum": 0.1, "maximum": 0.9, "step": 0.01},
-    "expand": {"minimum": 0.0, "maximum": 0.5, "step": 0.01},
-    "blur": {"minimum": 15, "maximum": 151, "step": 2},
-    "mosaic": {"minimum": 5, "maximum": 40, "step": 1},
-}
-
-
-# ============================================
-# Model Manager
-# ============================================
-class FaceDetector:
-    """YOLOv8 Face Detection Model Manager"""
-    
-    def __init__(self, model_path: str = "yolov8-face-hf.pt"):
-        self.model = None
-        self.device = self._get_device()
-        self._load_model(model_path)
-    
-    def _get_device(self) -> str:
-        """Determine the best available device"""
+# ==============================
+# Model loader
+# ==============================
+def load_model(model_path: str = "yolov8-face-hf.pt", device: Optional[str] = None):
+    from ultralytics import YOLO
+    if device is None:
         if torch.cuda.is_available():
-            return "cuda"
+            device = "cuda"
         elif torch.backends.mps.is_available():
-            return "mps"
-        return "cpu"
-    
-    def _load_model(self, model_path: str) -> None:
-        """Load YOLO model"""
-        from ultralytics import YOLO
-        self.model = YOLO(model_path)
-        self.model.to(self.device)
-    
-    def detect(self, image: np.ndarray, conf: float, iou: float) -> List:
-        """Run face detection on image"""
-        with torch.no_grad():
-            results = self.model.predict(
-                image, 
-                conf=conf, 
-                iou=iou, 
-                verbose=False, 
-                device=self.device
-            )
-        return results
-
-
-# Initialize global detector
-detector = FaceDetector()
-
-
-# ============================================
-# Image Processing Functions
-# ============================================
-def ensure_odd(x: int) -> int:
-    """Ensure kernel size is odd for OpenCV"""
+            device = "mps"
+        else:
+            device = "cpu"
+    model = YOLO(model_path)
+    model.to(device)
+    return model, device
+
+# Load model globally
+model, device = load_model()
+
+# ==============================
+# Helper functions
+# ==============================
+def _ensure_odd(x: int) -> int:
     return x if x % 2 == 1 else x + 1
 
-
-def get_even_dimensions(w: int, h: int) -> Tuple[int, int]:
-    """Ensure video dimensions are even for codec compatibility"""
+def _choose_writer_size(w: int, h: int) -> Tuple[int, int]:
     return (w if w % 2 == 0 else w - 1, h if h % 2 == 0 else h - 1)
 
-
-def apply_blur(
-    face_roi: np.ndarray, 
-    mode: str, 
-    blur_kernel: int, 
-    mosaic_size: int = 15
-) -> np.ndarray:
-    """Apply blur or mosaic effect to face region"""
+def _apply_anonymization(face_roi: np.ndarray, mode: str, blur_kernel: int, mosaic: int = 15) -> np.ndarray:
     if face_roi.size == 0:
         return face_roi
-    
     if mode == "Gaussian Blur":
-        k = ensure_odd(max(blur_kernel, 15))
+        k = _ensure_odd(max(blur_kernel, 15))
         return cv2.GaussianBlur(face_roi, (k, k), 0)
-    else:  # Mosaic Effect
-        m = max(2, mosaic_size)
+    else:
+        m = max(2, mosaic)
         h, w = face_roi.shape[:2]
-        small = cv2.resize(
-            face_roi, 
-            (max(1, w // m), max(1, h // m)), 
-            interpolation=cv2.INTER_LINEAR
-        )
-        return cv2.resize(small, (w, h), interpolation=cv2.INTER_NEAREST)
-
-
-def expand_bbox(
-    x1: int, y1: int, x2: int, y2: int,
-    expand_ratio: float,
-    img_w: int, img_h: int
-) -> Tuple[int, int, int, int]:
-    """Expand bounding box by ratio and clip to image bounds"""
-    if expand_ratio > 0:
-        bw, bh = x2 - x1, y2 - y1
-        dx, dy = int(bw * expand_ratio), int(bh * expand_ratio)
-        x1, y1 = x1 - dx, y1 - dy
-        x2, y2 = x2 + dx, y2 + dy
-    
-    # Clip to image bounds
-    x1 = max(0, min(img_w, x1))
-    x2 = max(0, min(img_w, x2))
-    y1 = max(0, min(img_h, y1))
-    y2 = max(0, min(img_h, y2))
-    
-    return x1, y1, x2, y2
-
-
-def blur_faces_in_image(
-    image_bgr: np.ndarray,
-    conf: float,
-    iou: float,
-    expand_ratio: float,
-    mode: str,
-    blur_kernel: int,
-    mosaic_size: int
-) -> Tuple[np.ndarray, int]:
-    """Detect and blur faces in a single image"""
+        face_small = cv2.resize(face_roi, (max(1, w // m), max(1, h // m)), interpolation=cv2.INTER_LINEAR)
+        return cv2.resize(face_small, (w, h), interpolation=cv2.INTER_NEAREST)
+
+def blur_faces_image(image_bgr, conf, iou, expand_ratio, mode, blur_kernel, mosaic):
     h, w = image_bgr.shape[:2]
     face_count = 0
-    
-    results = detector.detect(image_bgr, conf, iou)
-    
+
+    with torch.no_grad():
+        results = model.predict(image_bgr, conf=conf, iou=iou, verbose=False, device=device)
+
     for r in results:
         boxes = r.boxes.xyxy.cpu().numpy() if hasattr(r.boxes, "xyxy") else []
         face_count = len(boxes)
-        
-        for box in boxes:
-            x1, y1, x2, y2 = map(int, box[:4])
-            x1, y1, x2, y2 = expand_bbox(x1, y1, x2, y2, expand_ratio, w, h)
-            
+        for x1, y1, x2, y2 in boxes:
+            x1, y1, x2, y2 = map(int, [x1, y1, x2, y2])
+
+            if expand_ratio > 0:
+                bw = x2 - x1
+                bh = y2 - y1
+                dx = int(bw * expand_ratio)
+                dy = int(bh * expand_ratio)
+                x1 -= dx; y1 -= dy; x2 += dx; y2 += dy
+
+            x1 = max(0, min(w, x1))
+            x2 = max(0, min(w, x2))
+            y1 = max(0, min(h, y1))
+            y2 = max(0, min(h, y2))
             if x2 <= x1 or y2 <= y1:
                 continue
-            
+
             roi = image_bgr[y1:y2, x1:x2]
-            image_bgr[y1:y2, x1:x2] = apply_blur(roi, mode, blur_kernel, mosaic_size)
-    
-    return image_bgr, face_count
+            image_bgr[y1:y2, x1:x2] = _apply_anonymization(roi, mode, blur_kernel, mosaic)
 
+    return image_bgr, face_count
 
-def blur_faces_in_video(
-    input_path: str,
-    conf: float,
-    iou: float,
-    expand_ratio: float,
-    mode: str,
-    blur_kernel: int,
-    mosaic_size: int,
-    progress: gr.Progress
-) -> Tuple[str, int, int]:
-    """Process video file and blur all detected faces"""
+def blur_faces_video(input_path, conf, iou, expand_ratio, mode, blur_kernel, mosaic, progress=gr.Progress()):
     from moviepy.editor import VideoFileClip
     
     cap = cv2.VideoCapture(input_path)
     if not cap.isOpened():
-        raise IOError("Cannot open video file")
-    
-    # Get video properties
+        raise IOError("Cannot open video")
+
     in_w = int(cap.get(cv2.CAP_PROP_FRAME_WIDTH))
     in_h = int(cap.get(cv2.CAP_PROP_FRAME_HEIGHT))
     fps = cap.get(cv2.CAP_PROP_FPS) or 25.0
-    total_frames = int(cap.get(cv2.CAP_PROP_FRAME_COUNT)) or 0
-    
-    out_w, out_h = get_even_dimensions(in_w, in_h)
-    
-    # Create temp files
-    temp_video = tempfile.NamedTemporaryFile(delete=False, suffix="_temp.mp4")
-    output_video = tempfile.NamedTemporaryFile(delete=False, suffix="_blurred.mp4")
-    temp_path = temp_video.name
-    output_path = output_video.name
-    temp_video.close()
-    output_video.close()
-    
-    # Setup video writer
+    frames = int(cap.get(cv2.CAP_PROP_FRAME_COUNT)) or 0
+
+    out_w, out_h = _choose_writer_size(in_w, in_h)
     fourcc = cv2.VideoWriter_fourcc(*"mp4v")
-    writer = cv2.VideoWriter(temp_path, fourcc, fps, (out_w, out_h))
     
-    frame_idx = 0
+    temp_video_path = tempfile.NamedTemporaryFile(delete=False, suffix="_temp.mp4").name
+    output_path = tempfile.NamedTemporaryFile(delete=False, suffix="_blurred.mp4").name
+    
+    out = cv2.VideoWriter(temp_video_path, fourcc, fps, (out_w, out_h))
+
+    idx = 0
     total_faces = 0
     
     try:
@@ -214,43 +108,47 @@ def blur_faces_in_video(
             ret, frame = cap.read()
             if not ret:
                 break
-            
             frame = cv2.resize(frame, (out_w, out_h))
+
+            with torch.no_grad():
+                results = model.predict(frame, conf=conf, iou=iou, verbose=False, device=device)
+
             h, w = frame.shape[:2]
-            
-            # Detect faces
-            results = detector.detect(frame, conf, iou)
-            
-            if results:
-                r = results[0]
-                boxes = r.boxes.xyxy.cpu().numpy() if hasattr(r.boxes, "xyxy") else []
-                total_faces += len(boxes)
-                
-                for box in boxes:
-                    x1, y1, x2, y2 = map(int, box[:4])
-                    x1, y1, x2, y2 = expand_bbox(x1, y1, x2, y2, expand_ratio, w, h)
-                    
-                    if x2 <= x1 or y2 <= y1:
-                        continue
-                    
-                    roi = frame[y1:y2, x1:x2]
-                    frame[y1:y2, x1:x2] = apply_blur(roi, mode, blur_kernel, mosaic_size)
-            
-            writer.write(frame)
-            frame_idx += 1
-            
-            if total_frames > 0:
-                progress(frame_idx / total_frames, desc=f"Processing frame {frame_idx}/{total_frames}")
-    
+            r0 = results[0] if len(results) else None
+            boxes = r0.boxes.xyxy if (r0 and hasattr(r0, "boxes")) else []
+            total_faces += len(boxes)
+
+            for b in boxes:
+                x1, y1, x2, y2 = map(int, b)
+                if expand_ratio > 0:
+                    bw = x2 - x1
+                    bh = y2 - y1
+                    dx = int(bw * expand_ratio)
+                    dy = int(bh * expand_ratio)
+                    x1 -= dx; y1 -= dy; x2 += dx; y2 += dy
+
+                x1 = max(0, min(w, x1))
+                x2 = max(0, min(w, x2))
+                y1 = max(0, min(h, y1))
+                y2 = max(0, min(h, y2))
+                if x2 <= x1 or y2 <= y1:
+                    continue
+
+                roi = frame[y1:y2, x1:x2]
+                frame[y1:y2, x1:x2] = _apply_anonymization(roi, mode, blur_kernel, mosaic)
+
+            out.write(frame)
+            idx += 1
+            if frames > 0:
+                progress(idx / frames, desc=f"Processing frame {idx}/{frames}")
     finally:
         cap.release()
-        writer.release()
-    
-    # Merge audio from original video
+        out.release()
+
     try:
         progress(0.95, desc="Merging audio...")
         original = VideoFileClip(input_path)
-        processed = VideoFileClip(temp_path).set_audio(original.audio)
+        processed = VideoFileClip(temp_video_path).set_audio(original.audio)
         processed.write_videofile(
             output_path,
             codec="libx264",
@@ -260,31 +158,16 @@ def blur_faces_in_video(
         )
         original.close()
         processed.close()
-        
-        # Clean up temp file
-        if os.path.exists(temp_path):
-            os.remove(temp_path)
-        
-        return output_path, total_faces, total_frames
-    
+        return output_path, total_faces, frames
     except Exception as e:
-        print(f"Audio merging failed: {e}")
-        return temp_path, total_faces, total_frames
+        print("Audio merging failed:", e)
+        return temp_video_path, total_faces, frames
 
 
-# ============================================
-# Gradio Processing Handlers
-# ============================================
-def process_image(
-    image: Optional[Image.Image],
-    conf: float,
-    iou: float,
-    expand_ratio: float,
-    mode_choice: str,
-    blur_intensity: int,
-    mosaic_size: int
-) -> Tuple[Optional[Image.Image], str]:
-    """Main image processing handler"""
+# ==============================
+# Main Processing Functions
+# ==============================
+def process_image(image, conf, iou, expand_ratio, mode_choice, blur_intensity, mosaic_size):
     if image is None:
         return None, "⚠️ Please upload an image first!"
     
@@ -292,12 +175,16 @@ def process_image(
     image_bgr = cv2.cvtColor(np.array(image), cv2.COLOR_RGB2BGR)
     h, w = image_bgr.shape[:2]
     
-    # Set blur parameters based on mode
-    blur_kernel = blur_intensity if mode_choice == "Gaussian Blur" else 51
-    mosaic = mosaic_size if mode_choice == "Mosaic Effect" else 15
+    # Determine blur settings
+    if mode_choice == "Gaussian Blur":
+        blur_kernel = blur_intensity
+        mosaic = 15
+    else:
+        blur_kernel = 51
+        mosaic = mosaic_size
     
-    # Process image
-    result_bgr, face_count = blur_faces_in_image(
+    # Process
+    result_bgr, face_count = blur_faces_image(
         image_bgr.copy(), conf, iou, expand_ratio,
         mode_choice, blur_kernel, mosaic
     )
@@ -307,7 +194,6 @@ def process_image(
     result_pil = Image.fromarray(result_rgb)
     
     # Generate log
-    intensity_value = blur_intensity if mode_choice == "Gaussian Blur" else mosaic_size
     info_log = f"""✅ IMAGE PROCESSING COMPLETE!
 {'=' * 50}
 🖼️ Image Info:
@@ -321,7 +207,7 @@ def process_image(
 {'=' * 50}
 🎨 Blur Settings:
    • Style: {mode_choice}
-   • Intensity: {intensity_value}
+   • Intensity: {blur_intensity if mode_choice == "Gaussian Blur" else mosaic_size}
 {'=' * 50}
 👤 Results:
    • Faces Detected: {face_count}
@@ -332,31 +218,24 @@ def process_image(
     return result_pil, info_log
 
 
-def process_video(
-    video: Optional[str],
-    conf: float,
-    iou: float,
-    expand_ratio: float,
-    mode_choice: str,
-    blur_intensity: int,
-    mosaic_size: int,
-    progress: gr.Progress = gr.Progress()
-) -> Tuple[Optional[str], str]:
-    """Main video processing handler"""
+def process_video(video, conf, iou, expand_ratio, mode_choice, blur_intensity, mosaic_size, progress=gr.Progress()):
     if video is None:
         return None, "⚠️ Please upload a video first!"
     
-    # Set blur parameters based on mode
-    blur_kernel = blur_intensity if mode_choice == "Gaussian Blur" else 51
-    mosaic = mosaic_size if mode_choice == "Mosaic Effect" else 15
+    # Determine blur settings
+    if mode_choice == "Gaussian Blur":
+        blur_kernel = blur_intensity
+        mosaic = 15
+    else:
+        blur_kernel = 51
+        mosaic = mosaic_size
     
     try:
-        output_path, total_faces, total_frames = blur_faces_in_video(
+        output_path, total_faces, total_frames = blur_faces_video(
             video, conf, iou, expand_ratio,
             mode_choice, blur_kernel, mosaic, progress
         )
         
-        intensity_value = blur_intensity if mode_choice == "Gaussian Blur" else mosaic_size
         info_log = f"""✅ VIDEO PROCESSING COMPLETE!
 {'=' * 50}
 🎥 Video Info:
@@ -370,7 +249,7 @@ def process_video(
 {'=' * 50}
 🎨 Blur Settings:
    • Style: {mode_choice}
-   • Intensity: {intensity_value}
+   • Intensity: {blur_intensity if mode_choice == "Gaussian Blur" else mosaic_size}
 {'=' * 50}
 👤 Results:
    • Total Faces Detected: {total_faces}
@@ -379,65 +258,102 @@ def process_video(
 💾 Ready to download!"""
         
         return output_path, info_log
-    
+        
     except Exception as e:
         return None, f"❌ Error: {str(e)}"
 
 
 # ============================================
-# CSS Styling - Comic Classic Theme
+# 🎨 Comic Classic Theme - Toon Playground
 # ============================================
-CSS = """
-/* Google Fonts */
+
+css = """
+/* ===== 🎨 Google Fonts Import ===== */
 @import url('https://fonts.googleapis.com/css2?family=Bangers&family=Comic+Neue:wght@400;700&display=swap');
 
-/* Background */
+/* ===== 🎨 Comic Classic 배경 - 빈티지 페이퍼 + 도트 패턴 ===== */
 .gradio-container {
     background-color: #FEF9C3 !important;
-    background-image: radial-gradient(#1F2937 1px, transparent 1px) !important;
+    background-image: 
+        radial-gradient(#1F2937 1px, transparent 1px) !important;
     background-size: 20px 20px !important;
     min-height: 100vh !important;
     font-family: 'Comic Neue', cursive, sans-serif !important;
 }
 
-/* Hide HuggingFace header */
-.huggingface-space-header, #space-header, .space-header,
-[class*="space-header"], .svelte-1ed2p3z, .space-header-badge {
+/* ===== 허깅페이스 상단 요소 숨김 ===== */
+.huggingface-space-header,
+#space-header,
+.space-header,
+[class*="space-header"],
+.svelte-1ed2p3z,
+.space-header-badge,
+.header-badge,
+[data-testid="space-header"],
+.svelte-kqij2n,
+.svelte-1ax1toq,
+.embed-container > div:first-child {
     display: none !important;
+    visibility: hidden !important;
+    height: 0 !important;
+    width: 0 !important;
+    overflow: hidden !important;
+    opacity: 0 !important;
+    pointer-events: none !important;
 }
 
-/* Hide footer */
-footer, .footer, .gradio-container footer, .built-with,
-[class*="footer"], .show-api, .built-with-gradio {
+/* ===== Footer 완전 숨김 ===== */
+footer,
+.footer,
+.gradio-container footer,
+.built-with,
+[class*="footer"],
+.gradio-footer,
+.main-footer,
+div[class*="footer"],
+.show-api,
+.built-with-gradio,
+a[href*="gradio.app"],
+a[href*="huggingface.co/spaces"] {
     display: none !important;
+    visibility: hidden !important;
+    height: 0 !important;
+    padding: 0 !important;
+    margin: 0 !important;
 }
 
-/* Main container */
+/* ===== 메인 컨테이너 ===== */
 #col-container { 
     max-width: 1400px; 
     margin: 0 auto; 
 }
 
-/* Header */
+/* ===== 🎨 헤더 타이틀 - 코믹 스타일 ===== */
 .header-text h1 {
     font-family: 'Bangers', cursive !important;
     color: #1F2937 !important;
     font-size: 3.5rem !important;
+    font-weight: 400 !important;
     text-align: center !important;
-    text-shadow: 4px 4px 0px #FACC15, 6px 6px 0px #1F2937 !important;
+    margin-bottom: 0.5rem !important;
+    text-shadow: 
+        4px 4px 0px #FACC15,
+        6px 6px 0px #1F2937 !important;
     letter-spacing: 3px !important;
     -webkit-text-stroke: 2px #1F2937 !important;
 }
 
+/* ===== 🎨 서브타이틀 ===== */
 .subtitle {
     text-align: center !important;
     font-family: 'Comic Neue', cursive !important;
     font-size: 1.2rem !important;
     color: #1F2937 !important;
+    margin-bottom: 1.5rem !important;
     font-weight: 700 !important;
 }
 
-/* Stats cards */
+/* ===== 🎨 Stats 카드 ===== */
 .stats-row {
     display: flex !important;
     justify-content: center !important;
@@ -456,11 +372,25 @@ footer, .footer, .gradio-container footer, .built-with,
     min-width: 120px !important;
 }
 
-.stat-card .emoji { font-size: 2rem !important; display: block !important; }
-.stat-card .label { color: #FFFFFF !important; font-family: 'Comic Neue', cursive !important; font-weight: 700 !important; }
+.stat-card .emoji {
+    font-size: 2rem !important;
+    display: block !important;
+    margin-bottom: 0.3rem !important;
+}
 
-/* Panels */
-.gr-panel, .gr-box, .gr-form, .block, .gr-group {
+.stat-card .label {
+    color: #FFFFFF !important;
+    font-family: 'Comic Neue', cursive !important;
+    font-weight: 700 !important;
+    font-size: 0.9rem !important;
+}
+
+/* ===== 🎨 카드/패널 - 만화 프레임 스타일 ===== */
+.gr-panel,
+.gr-box,
+.gr-form,
+.block,
+.gr-group {
     background: #FFFFFF !important;
     border: 3px solid #1F2937 !important;
     border-radius: 8px !important;
@@ -468,15 +398,17 @@ footer, .footer, .gradio-container footer, .built-with,
     transition: all 0.2s ease !important;
 }
 
-.gr-panel:hover, .block:hover {
+.gr-panel:hover,
+.block:hover {
     transform: translate(-2px, -2px) !important;
     box-shadow: 8px 8px 0px #1F2937 !important;
 }
 
-/* Tabs */
+/* ===== 🎨 탭 스타일 ===== */
 .gr-tabs {
     border: 3px solid #1F2937 !important;
     border-radius: 12px !important;
+    overflow: hidden !important;
     box-shadow: 6px 6px 0px #1F2937 !important;
 }
 
@@ -488,78 +420,163 @@ footer, .footer, .gradio-container footer, .built-with,
 .gr-tab-nav button {
     font-family: 'Bangers', cursive !important;
     font-size: 1.2rem !important;
+    letter-spacing: 1px !important;
     color: #1F2937 !important;
     padding: 12px 24px !important;
+    border: none !important;
+    background: transparent !important;
+    transition: all 0.2s ease !important;
+}
+
+.gr-tab-nav button:hover {
+    background: #FDE68A !important;
 }
 
 .gr-tab-nav button.selected {
     background: #3B82F6 !important;
     color: #FFFFFF !important;
+    text-shadow: 1px 1px 0px #1F2937 !important;
 }
 
-/* Inputs */
-textarea, input[type="text"], input[type="number"] {
+/* ===== 🎨 입력 필드 ===== */
+textarea, 
+input[type="text"], 
+input[type="number"] {
     background: #FFFFFF !important;
     border: 3px solid #1F2937 !important;
     border-radius: 8px !important;
+    color: #1F2937 !important;
     font-family: 'Comic Neue', cursive !important;
+    font-size: 1rem !important;
     font-weight: 700 !important;
+    transition: all 0.2s ease !important;
 }
 
-textarea:focus, input:focus {
+textarea:focus, 
+input[type="text"]:focus, 
+input[type="number"]:focus {
     border-color: #3B82F6 !important;
     box-shadow: 4px 4px 0px #3B82F6 !important;
+    outline: none !important;
 }
 
-/* Dropdown */
-.gr-dropdown {
-    background: #FFFFFF !important;
+/* ===== 🎨 드롭다운 스타일 ===== */
+[data-testid="dropdown"] {
     border: 3px solid #1F2937 !important;
     border-radius: 8px !important;
     box-shadow: 3px 3px 0px #1F2937 !important;
 }
 
-/* Primary button */
-.gr-button-primary, button.primary, .process-btn {
+[data-testid="dropdown"] .wrap {
+    background: #FFFFFF !important;
+}
+
+[data-testid="dropdown"] .wrap-inner {
+    background: #FFFFFF !important;
+}
+
+[data-testid="dropdown"] .secondary-wrap {
+    background: #FFFFFF !important;
+}
+
+[data-testid="dropdown"] input {
+    color: #1F2937 !important;
+    font-family: 'Comic Neue', cursive !important;
+    font-weight: 700 !important;
+}
+
+[data-testid="dropdown"] .options {
+    background: #FFFFFF !important;
+    border: 3px solid #1F2937 !important;
+    border-radius: 8px !important;
+    box-shadow: 4px 4px 0px #1F2937 !important;
+}
+
+[data-testid="dropdown"] .item {
+    color: #1F2937 !important;
+    font-family: 'Comic Neue', cursive !important;
+    font-weight: 700 !important;
+}
+
+[data-testid="dropdown"] .item:hover {
+    background: #FACC15 !important;
+}
+
+[data-testid="dropdown"] .item.selected {
+    background: #3B82F6 !important;
+    color: #FFFFFF !important;
+}
+
+/* ===== 🎨 Primary 버튼 ===== */
+.gr-button-primary,
+button.primary,
+.gr-button.primary,
+.process-btn {
     background: #3B82F6 !important;
     border: 3px solid #1F2937 !important;
     border-radius: 8px !important;
     color: #FFFFFF !important;
     font-family: 'Bangers', cursive !important;
+    font-weight: 400 !important;
     font-size: 1.3rem !important;
     letter-spacing: 2px !important;
     padding: 14px 28px !important;
     box-shadow: 5px 5px 0px #1F2937 !important;
+    transition: all 0.1s ease !important;
+    text-shadow: 1px 1px 0px #1F2937 !important;
 }
 
-.gr-button-primary:hover, button.primary:hover {
+.gr-button-primary:hover,
+button.primary:hover,
+.gr-button.primary:hover,
+.process-btn:hover {
     background: #2563EB !important;
     transform: translate(-2px, -2px) !important;
     box-shadow: 7px 7px 0px #1F2937 !important;
 }
 
-.gr-button-primary:active, button.primary:active {
+.gr-button-primary:active,
+button.primary:active,
+.gr-button.primary:active,
+.process-btn:active {
     transform: translate(3px, 3px) !important;
     box-shadow: 2px 2px 0px #1F2937 !important;
 }
 
-/* Log output */
+/* ===== 🎨 로그 출력 영역 ===== */
 .info-log textarea {
     background: #1F2937 !important;
     color: #10B981 !important;
     font-family: 'Courier New', monospace !important;
+    font-size: 0.9rem !important;
+    font-weight: 400 !important;
     border: 3px solid #10B981 !important;
+    border-radius: 8px !important;
     box-shadow: 4px 4px 0px #10B981 !important;
 }
 
-/* Image/Video containers */
-.gr-image, .gr-video {
+/* ===== 🎨 이미지/비디오 영역 ===== */
+.gr-image,
+.gr-video,
+.image-container,
+.video-container {
     border: 4px solid #1F2937 !important;
     border-radius: 8px !important;
     box-shadow: 8px 8px 0px #1F2937 !important;
+    overflow: hidden !important;
+    background: #FFFFFF !important;
+}
+
+/* ===== 🎨 슬라이더 스타일 ===== */
+input[type="range"] {
+    accent-color: #3B82F6 !important;
+}
+
+.gr-slider {
+    background: #FFFFFF !important;
 }
 
-/* Accordion */
+/* ===== 🎨 아코디언 ===== */
 .gr-accordion {
     background: #FACC15 !important;
     border: 3px solid #1F2937 !important;
@@ -567,114 +584,338 @@ textarea:focus, input:focus {
     box-shadow: 4px 4px 0px #1F2937 !important;
 }
 
-/* Labels */
-label, .gr-input-label, .gr-block-label {
+.gr-accordion-header {
     color: #1F2937 !important;
     font-family: 'Comic Neue', cursive !important;
     font-weight: 700 !important;
+    font-size: 1.1rem !important;
 }
 
-/* Slider */
-input[type="range"] { accent-color: #3B82F6 !important; }
+/* ===== 🎨 라벨 스타일 ===== */
+label,
+.gr-input-label,
+.gr-block-label {
+    color: #1F2937 !important;
+    font-family: 'Comic Neue', cursive !important;
+    font-weight: 700 !important;
+    font-size: 1rem !important;
+}
 
-/* Scrollbar */
-::-webkit-scrollbar { width: 12px; }
-::-webkit-scrollbar-track { background: #FEF9C3; border: 2px solid #1F2937; }
-::-webkit-scrollbar-thumb { background: #3B82F6; border: 2px solid #1F2937; }
+/* ===== 🎨 프로그레스 바 ===== */
+.progress-bar,
+.gr-progress-bar {
+    background: #3B82F6 !important;
+    border: 2px solid #1F2937 !important;
+    border-radius: 4px !important;
+}
 
-/* Selection */
-::selection { background: #FACC15; color: #1F2937; }
+/* ===== 🎨 스크롤바 ===== */
+::-webkit-scrollbar {
+    width: 12px;
+    height: 12px;
+}
+
+::-webkit-scrollbar-track {
+    background: #FEF9C3;
+    border: 2px solid #1F2937;
+}
+
+::-webkit-scrollbar-thumb {
+    background: #3B82F6;
+    border: 2px solid #1F2937;
+    border-radius: 0px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: #EF4444;
+}
 
-/* Responsive */
+/* ===== 🎨 선택 하이라이트 ===== */
+::selection {
+    background: #FACC15;
+    color: #1F2937;
+}
+
+/* ===== 🎨 링크 스타일 ===== */
+a {
+    color: #3B82F6 !important;
+    text-decoration: none !important;
+    font-weight: 700 !important;
+}
+
+a:hover {
+    color: #EF4444 !important;
+}
+
+/* ===== 🎨 Row/Column 간격 ===== */
+.gr-row {
+    gap: 1.5rem !important;
+}
+
+.gr-column {
+    gap: 1rem !important;
+}
+
+/* ===== 반응형 조정 ===== */
 @media (max-width: 768px) {
-    .header-text h1 { font-size: 2.2rem !important; }
-    .gr-button-primary { padding: 12px 20px !important; font-size: 1.1rem !important; }
+    .header-text h1 {
+        font-size: 2.2rem !important;
+        text-shadow: 
+            3px 3px 0px #FACC15,
+            4px 4px 0px #1F2937 !important;
+    }
+    
+    .gr-button-primary,
+    button.primary {
+        padding: 12px 20px !important;
+        font-size: 1.1rem !important;
+    }
+    
+    .gr-panel,
+    .block {
+        box-shadow: 4px 4px 0px #1F2937 !important;
+    }
+    
+    .stat-card {
+        min-width: 100px !important;
+        padding: 0.8rem 1rem !important;
+    }
+}
+
+/* ===== 🎨 다크모드 비활성화 ===== */
+@media (prefers-color-scheme: dark) {
+    .gradio-container {
+        background-color: #FEF9C3 !important;
+    }
 }
 """
 
 
 # ============================================
-# UI Component Builders
+# Build the Gradio Interface
 # ============================================
-def create_header() -> None:
-    """Create header section"""
+with gr.Blocks(fill_height=True, title="Ansim Blur - Face Privacy Protection") as demo:
+    
+    # HOME Badge
     gr.HTML("""
         <div style="text-align: center; margin: 20px 0 10px 0;">
-            <a href="https://www.humangen.ai" target="_blank">
+            <a href="https://www.humangen.ai" target="_blank" style="text-decoration: none;">
                 <img src="https://img.shields.io/static/v1?label=🏠 HOME&message=HUMANGEN.AI&color=0000ff&labelColor=ffcc00&style=for-the-badge" alt="HOME">
             </a>
-            <a href="https://discord.gg/openfreeai" target="_blank" style="margin-left: 10px;">
+            <a href="https://discord.gg/openfreeai" target="_blank" style="text-decoration: none; margin-left: 10px;">
                 <img src="https://img.shields.io/static/v1?label=Discord&message=OpenFree%20AI&color=5865F2&labelColor=1F2937&logo=discord&logoColor=white&style=for-the-badge" alt="Discord">
             </a>
         </div>
     """)
     
-    gr.Markdown("# 🔒 ANSIM BLUR - FACE PRIVACY 🛡️", elem_classes="header-text")
-    gr.Markdown('<p class="subtitle">🎭 Advanced AI-Powered Face Detection & Privacy Protection! ✨</p>')
+    # Header Title
+    gr.Markdown(
+        """
+        # 🔒 ANSIM BLUR - FACE PRIVACY 🛡️
+        """,
+        elem_classes="header-text"
+    )
+    
+    gr.Markdown(
+        """
+        <p class="subtitle">🎭 Advanced AI-Powered Face Detection & Privacy Protection! ✨</p>
+        """,
+    )
     
+    # Stats Cards
     gr.HTML("""
         <div class="stats-row">
-            <div class="stat-card"><span class="emoji">🖼️</span><span class="label">Image Support</span></div>
-            <div class="stat-card"><span class="emoji">🎥</span><span class="label">Video Processing</span></div>
-            <div class="stat-card"><span class="emoji">⚡</span><span class="label">Real-time AI</span></div>
-            <div class="stat-card"><span class="emoji">🛡️</span><span class="label">Privacy First</span></div>
+            <div class="stat-card">
+                <span class="emoji">🖼️</span>
+                <span class="label">Image Support</span>
+            </div>
+            <div class="stat-card">
+                <span class="emoji">🎥</span>
+                <span class="label">Video Processing</span>
+            </div>
+            <div class="stat-card">
+                <span class="emoji">⚡</span>
+                <span class="label">Real-time AI</span>
+            </div>
+            <div class="stat-card">
+                <span class="emoji">🛡️</span>
+                <span class="label">Privacy First</span>
+            </div>
         </div>
     """)
     
+    # Device Info
     gr.Markdown(f"""
-        <p style="text-align: center; font-family: 'Comic Neue', cursive; font-weight: 700; color: #1F2937;">
-            🖥️ Running on: <span style="color: #3B82F6;">{detector.device.upper()}</span>
+        <p style="text-align: center; font-family: 'Comic Neue', cursive; font-weight: 700; color: #1F2937; margin: 1rem 0;">
+            🖥️ Running on: <span style="color: #3B82F6;">{device.upper()}</span>
         </p>
     """)
-
-
-def create_detection_settings(suffix: str = "") -> Tuple[gr.Slider, gr.Slider, gr.Slider]:
-    """Create detection settings accordion"""
-    with gr.Accordion("⚙️ Detection Settings", open=True):
-        conf = gr.Slider(
-            **SLIDER_CONFIG["confidence"],
-            value=DEFAULT_CONFIG["confidence"],
-            label="🎯 Confidence Threshold"
-        )
-        iou = gr.Slider(
-            **SLIDER_CONFIG["iou"],
-            value=DEFAULT_CONFIG["iou"],
-            label="📐 NMS IoU"
-        )
-        expand = gr.Slider(
-            **SLIDER_CONFIG["expand"],
-            value=DEFAULT_CONFIG["expand_ratio"],
-            label="🔲 Box Expansion"
-        )
-    return conf, iou, expand
-
-
-def create_blur_settings(suffix: str = "") -> Tuple[gr.Dropdown, gr.Slider, gr.Slider]:
-    """Create blur settings accordion"""
-    with gr.Accordion("🎨 Blur Settings", open=True):
-        mode = gr.Dropdown(
-            choices=BLUR_MODES,
-            value=BLUR_MODES[0],
-            label="🖌️ Style"
-        )
-        blur_intensity = gr.Slider(
-            **SLIDER_CONFIG["blur"],
-            value=DEFAULT_CONFIG["blur_intensity"],
-            label="💨 Blur Intensity"
-        )
-        mosaic_size = gr.Slider(
-            **SLIDER_CONFIG["mosaic"],
-            value=DEFAULT_CONFIG["mosaic_size"],
-            label="🧩 Mosaic Size"
-        )
-    return mode, blur_intensity, mosaic_size
-
-
-def create_footer() -> None:
-    """Create footer with instructions"""
-    gr.Markdown("""
+    
+    # Main Tabs
+    with gr.Tabs():
+        # ===== IMAGE TAB =====
+        with gr.Tab("📸 Image Processing"):
+            with gr.Row(equal_height=False):
+                # Left Column - Input & Settings
+                with gr.Column(scale=1, min_width=400):
+                    input_image = gr.Image(
+                        label="🖼️ Upload Image",
+                        type="pil",
+                        height=350
+                    )
+                    
+                    with gr.Accordion("⚙️ Detection Settings", open=True):
+                        conf_img = gr.Slider(
+                            minimum=0.05,
+                            maximum=0.9,
+                            value=0.25,
+                            step=0.01,
+                            label="🎯 Confidence Threshold"
+                        )
+                        iou_img = gr.Slider(
+                            minimum=0.1,
+                            maximum=0.9,
+                            value=0.45,
+                            step=0.01,
+                            label="📐 NMS IoU"
+                        )
+                        expand_img = gr.Slider(
+                            minimum=0.0,
+                            maximum=0.5,
+                            value=0.05,
+                            step=0.01,
+                            label="🔲 Box Expansion"
+                        )
+                    
+                    with gr.Accordion("🎨 Blur Settings", open=True):
+                        mode_img = gr.Dropdown(
+                            choices=["Gaussian Blur", "Mosaic Effect"],
+                            value="Gaussian Blur",
+                            label="🖌️ Style"
+                        )
+                        blur_intensity_img = gr.Slider(
+                            minimum=15,
+                            maximum=151,
+                            value=51,
+                            step=2,
+                            label="💨 Blur Intensity"
+                        )
+                        mosaic_size_img = gr.Slider(
+                            minimum=5,
+                            maximum=40,
+                            value=15,
+                            step=1,
+                            label="🧩 Mosaic Size"
+                        )
+                    
+                    process_img_btn = gr.Button(
+                        "🔍 PROCESS IMAGE! 🎭",
+                        variant="primary",
+                        size="lg",
+                        elem_classes="process-btn"
+                    )
+                
+                # Right Column - Output
+                with gr.Column(scale=1, min_width=400):
+                    output_image = gr.Image(
+                        label="🖼️ Processed Result",
+                        type="pil",
+                        height=350
+                    )
+                    
+                    with gr.Accordion("📜 Processing Log", open=True):
+                        info_log_img = gr.Textbox(
+                            label="",
+                            placeholder="Upload an image and click process...",
+                            lines=12,
+                            max_lines=18,
+                            interactive=False,
+                            elem_classes="info-log"
+                        )
+        
+        # ===== VIDEO TAB =====
+        with gr.Tab("🎬 Video Processing"):
+            with gr.Row(equal_height=False):
+                # Left Column - Input & Settings
+                with gr.Column(scale=1, min_width=400):
+                    input_video = gr.Video(
+                        label="🎥 Upload Video",
+                        height=350
+                    )
+                    
+                    with gr.Accordion("⚙️ Detection Settings", open=True):
+                        conf_vid = gr.Slider(
+                            minimum=0.05,
+                            maximum=0.9,
+                            value=0.25,
+                            step=0.01,
+                            label="🎯 Confidence Threshold"
+                        )
+                        iou_vid = gr.Slider(
+                            minimum=0.1,
+                            maximum=0.9,
+                            value=0.45,
+                            step=0.01,
+                            label="📐 NMS IoU"
+                        )
+                        expand_vid = gr.Slider(
+                            minimum=0.0,
+                            maximum=0.5,
+                            value=0.05,
+                            step=0.01,
+                            label="🔲 Box Expansion"
+                        )
+                    
+                    with gr.Accordion("🎨 Blur Settings", open=True):
+                        mode_vid = gr.Dropdown(
+                            choices=["Gaussian Blur", "Mosaic Effect"],
+                            value="Gaussian Blur",
+                            label="🖌️ Style"
+                        )
+                        blur_intensity_vid = gr.Slider(
+                            minimum=15,
+                            maximum=151,
+                            value=51,
+                            step=2,
+                            label="💨 Blur Intensity"
+                        )
+                        mosaic_size_vid = gr.Slider(
+                            minimum=5,
+                            maximum=40,
+                            value=15,
+                            step=1,
+                            label="🧩 Mosaic Size"
+                        )
+                    
+                    process_vid_btn = gr.Button(
+                        "🎬 PROCESS VIDEO! 🛡️",
+                        variant="primary",
+                        size="lg",
+                        elem_classes="process-btn"
+                    )
+                
+                # Right Column - Output
+                with gr.Column(scale=1, min_width=400):
+                    output_video = gr.Video(
+                        label="🎥 Processed Result",
+                        height=350
+                    )
+                    
+                    with gr.Accordion("📜 Processing Log", open=True):
+                        info_log_vid = gr.Textbox(
+                            label="",
+                            placeholder="Upload a video and click process...",
+                            lines=12,
+                            max_lines=18,
+                            interactive=False,
+                            elem_classes="info-log"
+                        )
+    
+    # Instructions
+    gr.Markdown(
+        """
         <div style="background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%); border: 3px solid #3B82F6; border-radius: 12px; padding: 1.5rem; box-shadow: 6px 6px 0px #1F2937; margin-top: 2rem;">
-            <h3 style="font-family: 'Bangers', cursive; color: #1F2937; font-size: 1.3rem;">📝 HOW TO USE</h3>
+            <h3 style="font-family: 'Bangers', cursive; color: #1F2937; font-size: 1.3rem; margin-bottom: 0.5rem;">📝 HOW TO USE</h3>
             <ol style="font-family: 'Comic Neue', cursive; color: #1F2937; font-weight: 700;">
                 <li>Upload an image or video containing faces</li>
                 <li>Adjust detection settings (confidence, IoU, expansion)</li>
@@ -685,7 +926,7 @@ def create_footer() -> None:
         </div>
         
         <div style="background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%); border: 3px solid #F59E0B; border-radius: 12px; padding: 1.5rem; box-shadow: 6px 6px 0px #1F2937; margin-top: 1rem;">
-            <h3 style="font-family: 'Bangers', cursive; color: #1F2937; font-size: 1.3rem;">💡 TIPS</h3>
+            <h3 style="font-family: 'Bangers', cursive; color: #1F2937; font-size: 1.3rem; margin-bottom: 0.5rem;">💡 TIPS</h3>
             <ul style="font-family: 'Comic Neue', cursive; color: #1F2937; font-weight: 700;">
                 <li>Lower confidence = more faces detected (may include false positives)</li>
                 <li>Higher blur intensity = stronger privacy protection</li>
@@ -693,128 +934,38 @@ def create_footer() -> None:
                 <li>Video processing may take time depending on length</li>
             </ul>
         </div>
-    """)
-
-
-# ============================================
-# Main Application Builder
-# ============================================
-def create_app() -> gr.Blocks:
-    """Build and return the Gradio application"""
+        """
+    )
     
-    with gr.Blocks(
-        fill_height=True, 
-        css=CSS, 
-        title="Ansim Blur - Face Privacy Protection",
-        theme=gr.themes.Default()
-    ) as app:
-        
-        # Header
-        create_header()
-        
-        # Main tabs
-        with gr.Tabs():
-            
-            # === IMAGE TAB ===
-            with gr.Tab("📸 Image Processing"):
-                with gr.Row(equal_height=False):
-                    
-                    # Left column - Input
-                    with gr.Column(scale=1, min_width=400):
-                        input_image = gr.Image(
-                            label="🖼️ Upload Image",
-                            type="pil",
-                            height=350
-                        )
-                        
-                        conf_img, iou_img, expand_img = create_detection_settings("img")
-                        mode_img, blur_img, mosaic_img = create_blur_settings("img")
-                        
-                        process_img_btn = gr.Button(
-                            "🔍 PROCESS IMAGE! 🎭",
-                            variant="primary",
-                            size="lg",
-                            elem_classes="process-btn"
-                        )
-                    
-                    # Right column - Output
-                    with gr.Column(scale=1, min_width=400):
-                        output_image = gr.Image(
-                            label="🖼️ Processed Result",
-                            type="pil",
-                            height=350
-                        )
-                        
-                        with gr.Accordion("📜 Processing Log", open=True):
-                            info_log_img = gr.Textbox(
-                                label="",
-                                placeholder="Upload an image and click process...",
-                                lines=12,
-                                max_lines=18,
-                                interactive=False,
-                                elem_classes="info-log"
-                            )
-            
-            # === VIDEO TAB ===
-            with gr.Tab("🎬 Video Processing"):
-                with gr.Row(equal_height=False):
-                    
-                    # Left column - Input
-                    with gr.Column(scale=1, min_width=400):
-                        input_video = gr.Video(
-                            label="🎥 Upload Video",
-                            height=350
-                        )
-                        
-                        conf_vid, iou_vid, expand_vid = create_detection_settings("vid")
-                        mode_vid, blur_vid, mosaic_vid = create_blur_settings("vid")
-                        
-                        process_vid_btn = gr.Button(
-                            "🎬 PROCESS VIDEO! 🛡️",
-                            variant="primary",
-                            size="lg",
-                            elem_classes="process-btn"
-                        )
-                    
-                    # Right column - Output
-                    with gr.Column(scale=1, min_width=400):
-                        output_video = gr.Video(
-                            label="🎥 Processed Result",
-                            height=350
-                        )
-                        
-                        with gr.Accordion("📜 Processing Log", open=True):
-                            info_log_vid = gr.Textbox(
-                                label="",
-                                placeholder="Upload a video and click process...",
-                                lines=12,
-                                max_lines=18,
-                                interactive=False,
-                                elem_classes="info-log"
-                            )
-        
-        # Footer
-        create_footer()
-        
-        # === EVENT HANDLERS ===
-        process_img_btn.click(
-            fn=process_image,
-            inputs=[input_image, conf_img, iou_img, expand_img, mode_img, blur_img, mosaic_img],
-            outputs=[output_image, info_log_img]
-        )
-        
-        process_vid_btn.click(
-            fn=process_video,
-            inputs=[input_video, conf_vid, iou_vid, expand_vid, mode_vid, blur_vid, mosaic_vid],
-            outputs=[output_video, info_log_vid]
-        )
+    # Event Handlers
+    process_img_btn.click(
+        fn=process_image,
+        inputs=[
+            input_image,
+            conf_img,
+            iou_img,
+            expand_img,
+            mode_img,
+            blur_intensity_img,
+            mosaic_size_img
+        ],
+        outputs=[output_image, info_log_img]
+    )
     
-    return app
+    process_vid_btn.click(
+        fn=process_video,
+        inputs=[
+            input_video,
+            conf_vid,
+            iou_vid,
+            expand_vid,
+            mode_vid,
+            blur_intensity_vid,
+            mosaic_size_vid
+        ],
+        outputs=[output_video, info_log_vid]
+    )
 
 
-# ============================================
-# Entry Point
-# ============================================
 if __name__ == "__main__":
-    app = create_app()
-    app.launch()
+    demo.launch(css=css, ssr_mode=False)