Upload 6 files

.gitattributes

@@ -41,3 +41,4 @@ room_02.jpg filter=lfs diff=lfs merge=lfs -text
 street_04.jpg filter=lfs diff=lfs merge=lfs -text
 landmark_Louvre_01.jpg filter=lfs diff=lfs merge=lfs -text
 street_05.jpg filter=lfs diff=lfs merge=lfs -text
+room_04.jpg filter=lfs diff=lfs merge=lfs -text

app.py

@@ -17,12 +17,20 @@ from style import Style
 from image_processor import ImageProcessor
 from video_processor import VideoProcessor
 from llm_enhancer import LLMEnhancer
+from ui_manager import UIManager
 
 # Initialize Processors with LLM support
 image_processor = None
 video_processor = None
+ui_manager = None
 
 def initialize_processors():
+    """
+    Initialize the image and video processors with LLM support.
+    
+    Returns:
+        bool: True if initialization was successful, False otherwise
+    """
     global image_processor, video_processor
 
     try:
@@ -30,7 +38,7 @@ def initialize_processors():
         image_processor = ImageProcessor(use_llm=True, llm_model_path="meta-llama/Llama-3.2-3B-Instruct")
         print("ImageProcessor initialized successfully with LLM")
 
-        # 添加診斷檢查
+        # 檢查狀態
         if hasattr(image_processor, 'scene_analyzer'):
             if image_processor.scene_analyzer is not None:
                 print(f"scene_analyzer initialized: {type(image_processor.scene_analyzer)}")
@@ -66,49 +74,41 @@ def initialize_processors():
             video_processor = None
             return False
 
-# Initialize processors
-initialization_success = initialize_processors()
-if not initialization_success:
-    print("WARNING: Failed to initialize processors. Application may not function correctly.")
-
-# Helper Function
-def get_all_classes():
-    """Gets all available COCO classes."""
-    # Try to get from a loaded model first
-    if image_processor and image_processor.model_instances:
-         for model_instance in image_processor.model_instances.values():
-              if model_instance and model_instance.is_model_loaded:
-                   try:
-                        # Ensure class_names is a dict {id: name}
-                        if isinstance(model_instance.class_names, dict):
-                             return sorted([(int(idx), name) for idx, name in model_instance.class_names.items()])
-                   except Exception as e:
-                        print(f"Error getting class names from model: {e}")
-
-    # Fallback to standard COCO (ensure keys are ints)
-    default_classes = {
-        0: 'person', 1: 'bicycle', 2: 'car', 3: 'motorcycle', 4: 'airplane', 5: 'bus',
-        6: 'train', 7: 'truck', 8: 'boat', 9: 'traffic light', 10: 'fire hydrant',
-        11: 'stop sign', 12: 'parking meter', 13: 'bench', 14: 'bird', 15: 'cat',
-        16: 'dog', 17: 'horse', 18: 'sheep', 19: 'cow', 20: 'elephant', 21: 'bear',
-        22: 'zebra', 23: 'giraffe', 24: 'backpack', 25: 'umbrella', 26: 'handbag',
-        27: 'tie', 28: 'suitcase', 29: 'frisbee', 30: 'skis', 31: 'snowboard',
-        32: 'sports ball', 33: 'kite', 34: 'baseball bat', 35: 'baseball glove',
-        36: 'skateboard', 37: 'surfboard', 38: 'tennis racket', 39: 'bottle',
-        40: 'wine glass', 41: 'cup', 42: 'fork', 43: 'knife', 44: 'spoon', 45: 'bowl',
-        46: 'banana', 47: 'apple', 48: 'sandwich', 49: 'orange', 50: 'broccoli',
-        51: 'carrot', 52: 'hot dog', 53: 'pizza', 54: 'donut', 55: 'cake', 56: 'chair',
-        57: 'couch', 58: 'potted plant', 59: 'bed', 60: 'dining table', 61: 'toilet',
-        62: 'tv', 63: 'laptop', 64: 'mouse', 65: 'remote', 66: 'keyboard',
-        67: 'cell phone', 68: 'microwave', 69: 'oven', 70: 'toaster', 71: 'sink',
-        72: 'refrigerator', 73: 'book', 74: 'clock', 75: 'vase', 76: 'scissors',
-        77: 'teddy bear', 78: 'hair drier', 79: 'toothbrush'
-    }
-    return sorted(default_classes.items())
+def initialize_ui_manager():
+    """
+    Initialize the UI manager and set up references to processors.
+    
+    Returns:
+        UIManager: Initialized UI manager instance
+    """
+    global ui_manager, image_processor
+    
+    ui_manager = UIManager()
+    
+    # Set image processor reference for dynamic class retrieval
+    if image_processor:
+        ui_manager.set_image_processor(image_processor)
+    
+    return ui_manager
 
 @spaces.GPU(duration=180)
 def handle_image_upload(image, model_name, confidence_threshold, filter_classes=None, use_llm=True, enable_landmark=True):
-    """Processes a single uploaded image."""
+    """
+    Processes a single uploaded image.
+    
+    Args:
+        image: PIL Image object
+        model_name: Name of the YOLO model to use
+        confidence_threshold: Confidence threshold for detections
+        filter_classes: List of class names/IDs to filter
+        use_llm: Whether to use LLM for enhanced descriptions
+        enable_landmark: Whether to enable landmark detection
+        
+    Returns:
+        Tuple: (result_image, result_text, formatted_stats, plot_figure, 
+                scene_description_html, original_desc_html, activities_list_data, 
+                safety_data, zones, lighting)
+    """
     # Enhanced safety check for image_processor
     if image_processor is None:
         error_msg = "Image processor is not initialized. Please restart the application or check system dependencies."
@@ -140,6 +140,7 @@ def handle_image_upload(image, model_name, confidence_threshold, filter_classes=
 
     print(f"DIAGNOSTIC: Image upload handled with enable_landmark={enable_landmark}, use_llm={use_llm}")
     print(f"Processing image with model: {model_name}, confidence: {confidence_threshold}, use_llm: {use_llm}, enable_landmark: {enable_landmark}")
+    
     try:
         image_processor.use_llm = use_llm
 
@@ -155,19 +156,19 @@ def handle_image_upload(image, model_name, confidence_threshold, filter_classes=
                 image_processor.scene_analyzer.use_landmark_detection = enable_landmark
                 image_processor.scene_analyzer.enable_landmark = enable_landmark
 
-                # 確保處理器也設置了這選項
+                # 確保處理器也設置了這選項(檢測地標用)
                 image_processor.enable_landmark = enable_landmark
 
                 # 檢查並設置更深層次的組件
                 if hasattr(image_processor.scene_analyzer, 'scene_describer') and image_processor.scene_analyzer.scene_describer is not None:
                     image_processor.scene_analyzer.scene_describer.enable_landmark = enable_landmark
 
-                # 檢查並設置CLIP分析器上的標記
+                # 檢查並設置CLIP Analyzer
                 if hasattr(image_processor.scene_analyzer, 'clip_analyzer') and image_processor.scene_analyzer.clip_analyzer is not None:
                     if hasattr(image_processor.scene_analyzer.clip_analyzer, 'enable_landmark'):
                         image_processor.scene_analyzer.clip_analyzer.enable_landmark = enable_landmark
 
-                # 檢查並設置LLM增強器
+                # 檢查並設置LLM方面
                 if hasattr(image_processor.scene_analyzer, 'llm_enhancer') and image_processor.scene_analyzer.llm_enhancer is not None:
                     if hasattr(image_processor.scene_analyzer.llm_enhancer, 'enable_landmark'):
                         image_processor.scene_analyzer.llm_enhancer.enable_landmark = enable_landmark
@@ -198,7 +199,7 @@ def handle_image_upload(image, model_name, confidence_threshold, filter_classes=
         class_ids_to_filter = None
         if filter_classes:
             class_ids_to_filter = []
-            available_classes_dict = dict(get_all_classes())
+            available_classes_dict = dict(ui_manager.get_all_classes())
             name_to_id = {name: id for id, name in available_classes_dict.items()}
             for class_str in filter_classes:
                 class_name_or_id = class_str.split(":")[0].strip()
@@ -235,7 +236,7 @@ def handle_image_upload(image, model_name, confidence_threshold, filter_classes=
         # Prepare visualization data for the plot
         plot_figure = None
         if stats and "class_statistics" in stats and stats["class_statistics"]:
-            available_classes_dict = dict(get_all_classes())
+            available_classes_dict = dict(ui_manager.get_all_classes())
             viz_data = image_processor.prepare_visualization_data(stats, available_classes_dict)
             if "error" not in viz_data:
                  plot_figure = EvaluationMetrics.create_enhanced_stats_plot(viz_data)
@@ -485,8 +486,20 @@ def download_video_from_url(video_url, max_duration_minutes=10):
 
 @spaces.GPU
 def handle_video_upload(video_input, video_url, input_type, model_name, confidence_threshold, process_interval):
-    """Handles video upload or URL input and calls the VideoProcessor."""
-
+    """
+    Handles video upload or URL input and calls the VideoProcessor.
+    
+    Args:
+        video_input: Uploaded video file
+        video_url: Video URL (if using URL input)
+        input_type: Type of input ("upload" or "url")
+        model_name: Name of the YOLO model to use
+        confidence_threshold: Confidence threshold for detections
+        process_interval: Frame processing interval
+        
+    Returns:
+        Tuple: (output_video_path, summary_html, formatted_stats)
+    """
     print(f"Received video request: input_type={input_type}")
     video_path = None
 
@@ -534,369 +547,34 @@ def handle_video_upload(video_input, video_url, input_type, model_name, confiden
         return None, error_html, {"error": str(e)}
 
 
-# Create Gradio Interface
-def create_interface():
-    """Creates the Gradio interface with Tabs."""
-    css = Style.get_css()
-    available_models = DetectionModel.get_available_models()
-    model_choices = [model["model_file"] for model in available_models]
-    class_choices_formatted = [f"{id}: {name}" for id, name in get_all_classes()] # Use formatted choices
-
-    with gr.Blocks(css=css, theme=gr.themes.Soft(primary_hue="teal", secondary_hue="blue")) as demo:
-
-        # Header
-        with gr.Group(elem_classes="app-header"):
-              gr.HTML("""
-                    <div style="text-align: center; width: 100%; padding: 2rem 0 3rem 0; background: linear-gradient(135deg, #f0f9ff, #e1f5fe);">
-                        <h1 style="font-size: 3.5rem; margin-bottom: 0.5rem; background: linear-gradient(90deg, #38b2ac, #4299e1); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: bold; font-family: 'Arial', sans-serif;">VisionScout</h1>
-                        <h2 style="color: #4A5568; font-size: 1.2rem; font-weight: 400; margin-top: 0.5rem; margin-bottom: 1.5rem; font-family: 'Arial', sans-serif;">Object Detection and Scene Understanding</h2>
-                        <div style="display: flex; justify-content: center; gap: 10px; margin: 0.5rem 0;"><div style="height: 3px; width: 80px; background: linear-gradient(90deg, #38b2ac, #4299e1);"></div></div>
-                        <div style="display: flex; justify-content: center; gap: 25px; margin-top: 1.5rem;">
-                            <div style="padding: 8px 15px; border-radius: 20px; background: rgba(66, 153, 225, 0.15); color: #2b6cb0; font-weight: 500; font-size: 0.9rem;"><span style="margin-right: 6px;">🖼️</span> Image Analysis</div>
-                            <div style="padding: 8px 15px; border-radius: 20px; background: rgba(56, 178, 172, 0.15); color: #2b6cb0; font-weight: 500; font-size: 0.9rem;"><span style="margin-right: 6px;">🎬</span> Video Analysis</div>
-                        </div>
-                         <div style="margin-top: 20px; padding: 10px 15px; background-color: rgba(255, 248, 230, 0.9); border-left: 3px solid #f6ad55; border-radius: 6px; max-width: 600px; margin-left: auto; margin-right: auto; text-align: left;">
-                             <p style="margin: 0; font-size: 0.9rem; color: #805ad5; font-weight: 500;">
-                                 <span style="margin-right: 5px;">📱</span> iPhone users: HEIC images may not be supported.
-                                 <a href="https://cloudconvert.com/heic-to-jpg" target="_blank" style="color: #3182ce; text-decoration: underline;">Convert HEIC to JPG</a> before uploading if needed.
-                             </p>
-                         </div>
-                    </div>
-                """)
-
-        # Main Content with Tabs
-        with gr.Tabs(elem_classes="tabs"):
-
-            # Tab 1: Image Processing
-            with gr.Tab("Image Processing"):
-                current_image_model = gr.State("yolov8m.pt") # State for image model selection
-                with gr.Row(equal_height=False): # Allow columns to have different heights
-                    # Left Column: Image Input & Controls
-                    with gr.Column(scale=4, elem_classes="input-panel"):
-                        with gr.Group():
-                            gr.HTML('<div class="section-heading">Upload Image</div>')
-                            image_input = gr.Image(type="pil", label="Upload an image", elem_classes="upload-box")
-
-                            with gr.Accordion("Image Analysis Settings", open=False):
-                                image_model_dropdown = gr.Dropdown(
-                                    choices=model_choices,
-                                    value="yolov8m.pt", # Default for images
-                                    label="Select Model",
-                                    info="Choose speed vs. accuracy (n=fast, m=balanced, x=accurate)"
-                                )
-                                # Display model info
-                                image_model_info = gr.Markdown(DetectionModel.get_model_description("yolov8m.pt"))
-
-                                image_confidence = gr.Slider(
-                                    minimum=0.1, maximum=0.9, value=0.25, step=0.05,
-                                    label="Confidence Threshold",
-                                    info="Minimum confidence for displaying a detected object"
-                                )
-
-                                use_llm = gr.Checkbox(
-                                    label="Use LLM for enhanced scene descriptions",
-                                    value=True,
-                                    info="Provides more detailed and natural language descriptions (may increase processing time)"
-                                )
-
-                                use_landmark_detection = gr.Checkbox(
-                                    label="Use CLIP for Landmark Detection",
-                                    value=False,
-                                    info="Detect famous landmarks, monuments, and tourist attractions that standard object detection cannot recognize (increases processing time)"
-                                )
-
-                                with gr.Accordion("Filter Classes", open=False):
-                                     gr.HTML('<div class="section-heading" style="font-size: 1rem;">Common Categories</div>')
-                                     with gr.Row():
-                                         people_btn = gr.Button("People", size="sm")
-                                         vehicles_btn = gr.Button("Vehicles", size="sm")
-                                         animals_btn = gr.Button("Animals", size="sm")
-                                         objects_btn = gr.Button("Common Objects", size="sm")
-                                     image_class_filter = gr.Dropdown(
-                                         choices=class_choices_formatted, # Use formatted choices
-                                         multiselect=True,
-                                         label="Select Classes to Display",
-                                         info="Leave empty to show all detected objects"
-                                     )
-
-                        image_detect_btn = gr.Button("Analyze Image", variant="primary", elem_classes="detect-btn")
-
-                        with gr.Group(elem_classes="how-to-use"):
-                             gr.HTML('<div class="section-heading">How to Use (Image)</div>')
-                             gr.Markdown("""
-                                1. Upload an image or use the camera
-                                2. *(Optional)* Adjust settings like confidence threshold or model size (n, m = balanced, x = accurate)
-                                3. In **Analysis Settings**, you can:
-                                    * Uncheck **Use LLM** to skip enhanced descriptions (faster)
-                                    * Check **Use CLIP for Landmark Detection** to identify famous landmarks like museums, monuments, and tourist attractions *(may take longer)*
-                                    * Filter object classes to focus on specific types of objects *(optional)*
-                                4. Click **Analyze Image** button
-
-                                **💡 Tip:** For landmark recognition (e.g. Louvre Museum), make sure to enable **CLIP for Landmark Detection** in the settings above.
-                                """)
-
-
-                        # Image Examples
-                        gr.Examples(
-                            examples=[
-                                "room_01.jpg",
-                                "street_04.jpg",
-                                "street_05.jpg",
-                                "landmark_Louvre_01.jpg"
-                                ],
-                            inputs=image_input,
-                            label="Example Images"
-                         )
-
-                        gr.HTML("""
-                            <div style="text-align: center; margin-top: 8px; padding: 6px; background-color: #f8f9fa; border-radius: 4px; border: 1px solid #e2e8f0;">
-                                <p style="font-size: 12px; color: #718096; margin: 0;">
-                                    📷 Sample images sourced from <a href="https://unsplash.com" target="_blank" style="color: #3182ce; text-decoration: underline;">Unsplash</a>
-                                </p>
-                            </div>
-                        """)
-
-                    # Right Column: Image Results
-                    with gr.Column(scale=6, elem_classes="output-panel"):
-                        with gr.Tabs(elem_classes="tabs"):
-                            with gr.Tab("Detection Result"):
-                                image_result_image = gr.Image(type="pil", label="Detection Result")
-                                gr.HTML('<div class="section-heading">Detection Details</div>')
-                                image_result_text = gr.Textbox(label=None, lines=10, elem_id="detection-details", container=False)
-
-                            with gr.Tab("Scene Understanding"):
-                                gr.HTML('<div class="section-heading">Scene Analysis</div>')
-                                gr.HTML("""
-                                    <details class="info-details" style="margin: 5px 0 15px 0;">
-                                        <summary style="padding: 8px; background-color: #f0f7ff; border-radius: 6px; border-left: 3px solid #4299e1; font-weight: bold; cursor: pointer; color: #2b6cb0;">
-                                            🔍 The AI Vision Scout Report: Click for important notes about this analysis
-                                        </summary>
-                                        <div style="margin-top: 8px; padding: 10px; background-color: #f8f9fa; border-radius: 6px; border: 1px solid #e2e8f0;">
-                                            <p style="font-size: 13px; color: #718096; margin: 0;">
-                                                <b>About this analysis:</b> This analysis is the model's best guess based on visible objects.
-                                                Like human scouts, it sometimes gets lost or sees things that aren't there (but don't we all?).
-                                                Consider this an educated opinion rather than absolute truth. For critical applications, always verify with human eyes! 🧐
-                                            </p>
-                                        </div>
-                                    </details>
-                                """)
-
-                                gr.HTML('''
-                                    <div style="margin-top: 5px; padding: 6px 10px; background-color: #f0f9ff; border-radius: 4px; border-left: 3px solid #63b3ed; font-size: 12px; margin-bottom: 10px;">
-                                        <p style="margin: 0; color: #4a5568;">
-                                            <b>Note:</b> AI descriptions may vary slightly with each generation, reflecting the creative nature of AI. This is similar to how a person might use different words each time they describe the same image. Processing time may be longer during first use or when analyzing complex scenes, as the LLM enhancement requires additional computational resources.
-                                        </p>
-                                    </div>
-                                    ''')
-                                image_scene_description_html = gr.HTML(label=None, elem_id="scene_analysis_description_text")
-
-                                # 使用LLM增強敘述時也會顯示原本敘述內容
-                                with gr.Accordion("Original Scene Analysis", open=False, elem_id="original_scene_analysis_accordion"):
-                                    image_llm_description = gr.HTML(label=None, elem_id="original_scene_description_text")
-
-                                with gr.Row():
-                                     with gr.Column(scale=1):
-                                         gr.HTML('<div class="section-heading" style="font-size:1rem; text-align:left;">Possible Activities</div>')
-                                         image_activities_list = gr.Dataframe(headers=["Activity"], datatype=["str"], row_count=5, col_count=1, wrap=True)
-
-                                     with gr.Column(scale=1):
-                                         gr.HTML('<div class="section-heading" style="font-size:1rem; text-align:left;">Safety Concerns</div>')
-                                         image_safety_list = gr.Dataframe(headers=["Concern"], datatype=["str"], row_count=5, col_count=1, wrap=True)
-
-                                gr.HTML('<div class="section-heading">Functional Zones</div>')
-                                image_zones_json = gr.JSON(label=None, elem_classes="json-box")
-
-                                gr.HTML('<div class="section-heading">Lighting Conditions</div>')
-                                image_lighting_info = gr.JSON(label=None, elem_classes="json-box")
-
-                            with gr.Tab("Statistics"):
-                                with gr.Row():
-                                    with gr.Column(scale=3, elem_classes="plot-column"):
-                                        gr.HTML('<div class="section-heading">Object Distribution</div>')
-                                        image_plot_output = gr.Plot(label=None, elem_classes="large-plot-container")
-                                    with gr.Column(scale=2, elem_classes="stats-column"):
-                                        gr.HTML('<div class="section-heading">Detection Statistics</div>')
-                                        image_stats_json = gr.JSON(label=None, elem_classes="enhanced-json-display")
-
-            # Tab 2: Video Processing
-            with gr.Tab("Video Processing"):
-                with gr.Row(equal_height=False):
-                    # Left Column: Video Input & Controls
-                    with gr.Column(scale=4, elem_classes="input-panel"):
-                        with gr.Group():
-                            gr.HTML('<div class="section-heading">Video Input</div>')
-
-                            # Add input type selection
-                            video_input_type = gr.Radio(
-                                ["upload", "url"],
-                                label="Input Method",
-                                value="upload",
-                                info="Choose how to provide the video"
-                            )
-
-                            # File upload (will be shown/hidden based on selection)
-                            with gr.Group(elem_id="upload-video-group"):
-                                video_input = gr.Video(
-                                    label="Upload a video file (MP4, AVI, MOV)",
-                                    sources=["upload"],
-                                    visible=True
-                                )
-
-                            # URL input (will be shown/hidden based on selection)
-                            with gr.Group(elem_id="url-video-group"):
-                                video_url_input = gr.Textbox(
-                                    label="Enter video URL (YouTube or direct video link)",
-                                    placeholder="https://www.youtube.com/watch?v=...",
-                                    visible=False,
-                                    elem_classes="custom-video-url-input"
-                                )
-                                gr.HTML("""
-                                    <div style="padding: 8px; margin-top: 5px; background-color: #fff8f8; border-radius: 4px; border-left: 3px solid #f87171; font-size: 12px;">
-                                        <p style="margin: 0; color: #4b5563;">
-                                            Note: Currently only YouTube URLs are supported. Maximum video duration is 10 minutes. Due to YouTube's anti-bot protection, some videos may not be downloadable. For protected videos, please upload a local video file instead.
-                                        </p>
-                                    </div>
-                                """)
-
-                            with gr.Accordion("Video Analysis Settings", open=True):
-                                video_model_dropdown = gr.Dropdown(
-                                    choices=model_choices,
-                                    value="yolov8n.pt", # Default 'n' for video
-                                    label="Select Model (Video)",
-                                    info="Faster models (like 'n') are recommended"
-                                )
-                                video_confidence = gr.Slider(
-                                    minimum=0.1, maximum=0.9, value=0.4, step=0.05,
-                                    label="Confidence Threshold (Video)"
-                                )
-                                video_process_interval = gr.Slider(
-                                    minimum=1, maximum=60, value=10, step=1, # Allow up to 60 frame interval
-                                    label="Processing Interval (Frames)",
-                                    info="Analyze every Nth frame (higher value = faster)"
-                                )
-                        video_process_btn = gr.Button("Process Video", variant="primary", elem_classes="detect-btn")
-
-                        with gr.Group(elem_classes="how-to-use"):
-                            gr.HTML('<div class="section-heading">How to Use (Video)</div>')
-                            gr.Markdown("""
-                            1. Choose your input method: Upload a file or enter a URL.
-                            2. Adjust settings if needed (using a faster model and larger interval is recommended for longer videos).
-                            3. Click "Process Video". **Processing can take a significant amount of time.**
-                            4. The annotated video and summary will appear on the right when finished.
-                            """)
-
-                        # Add video examples
-                        gr.HTML('<div class="section-heading">Example Videos</div>')
-                        gr.HTML("""
-                            <div style="padding: 10px; background-color: #f0f7ff; border-radius: 6px; margin-bottom: 15px;">
-                                <p style="font-size: 14px; color: #4A5568; margin: 0;">
-                                    Upload any video containing objects that YOLO can detect. For testing, find sample videos
-                                    <a href="https://www.pexels.com/search/videos/street/" target="_blank" style="color: #3182ce; text-decoration: underline;">here</a>.
-                                </p>
-                            </div>
-                        """)
-
-                    # Right Column: Video Results
-                    with gr.Column(scale=6, elem_classes="output-panel video-result-panel"):
-                        gr.HTML("""
-                            <div class="section-heading">Video Result</div>
-                            <details class="info-details" style="margin: 5px 0 15px 0;">
-                                <summary style="padding: 8px; background-color: #f0f7ff; border-radius: 6px; border-left: 3px solid #4299e1; font-weight: bold; cursor: pointer; color: #2b6cb0;">
-                                    🎬 Video Processing Notes
-                                </summary>
-                                <div style="margin-top: 8px; padding: 10px; background-color: #f8f9fa; border-radius: 6px; border: 1px solid #e2e8f0;">
-                                    <p style="font-size: 13px; color: #718096; margin: 0;">
-                                        The processed video includes bounding boxes around detected objects. For longer videos,
-                                        consider using a faster model (like YOLOv8n) and a higher frame interval to reduce processing time.
-                                    </p>
-                                </div>
-                            </details>
-                        """)
-                        video_output = gr.Video(label="Processed Video", elem_classes="video-output-container") # Output for the processed video file
-
-                        gr.HTML('<div class="section-heading">Processing Summary</div>')
-                        # 使用HTML顯示影片的摘要
-                        video_summary_text = gr.HTML(
-                            label=None,
-                            elem_id="video-summary-html-output"
-                        )
-
-                        gr.HTML('<div class="section-heading">Aggregated Statistics</div>')
-                        video_stats_json = gr.JSON(label=None, elem_classes="video-stats-display") # Display statistics
-
-        # Event Listeners
-        # Image Model Change Handler
-        image_model_dropdown.change(
-            fn=lambda model: (model, DetectionModel.get_model_description(model)),
-            inputs=[image_model_dropdown],
-            outputs=[current_image_model, image_model_info] # Update state and description
-        )
-
-        # Image Filter Buttons
-        available_classes_list = get_all_classes() # Get list of (id, name)
-        people_classes_ids = [0]
-        vehicles_classes_ids = [1, 2, 3, 4, 5, 6, 7, 8]
-        animals_classes_ids = list(range(14, 24))
-        common_objects_ids = [39, 41, 42, 43, 44, 45, 56, 57, 60, 62, 63, 67, 73] # Bottle, cup, fork, knife, spoon, bowl, chair, couch, table, tv, laptop, phone, book
-
-        people_btn.click(lambda: [f"{id}: {name}" for id, name in available_classes_list if id in people_classes_ids], outputs=image_class_filter)
-        vehicles_btn.click(lambda: [f"{id}: {name}" for id, name in available_classes_list if id in vehicles_classes_ids], outputs=image_class_filter)
-        animals_btn.click(lambda: [f"{id}: {name}" for id, name in available_classes_list if id in animals_classes_ids], outputs=image_class_filter)
-        objects_btn.click(lambda: [f"{id}: {name}" for id, name in available_classes_list if id in common_objects_ids], outputs=image_class_filter)
-
-        video_input_type.change(
-            fn=lambda input_type: [
-                # Show/hide file upload
-                gr.update(visible=(input_type == "upload")),
-                # Show/hide URL input
-                gr.update(visible=(input_type == "url"))
-            ],
-            inputs=[video_input_type],
-            outputs=[video_input, video_url_input]
-        )
-
-        image_detect_btn.click(
-            fn=handle_image_upload,
-            inputs=[image_input, image_model_dropdown, image_confidence, image_class_filter, use_llm, use_landmark_detection ],
-            outputs=[
-                image_result_image, image_result_text, image_stats_json, image_plot_output,
-                image_scene_description_html, image_llm_description, image_activities_list, image_safety_list, image_zones_json,
-                image_lighting_info
-            ]
-        )
-
-        video_process_btn.click(
-            fn=handle_video_upload,
-            inputs=[
-                video_input,
-                video_url_input,
-                video_input_type,
-                video_model_dropdown,
-                video_confidence,
-                video_process_interval
-            ],
-            outputs=[video_output, video_summary_text, video_stats_json]
-        )
-
-        # Footer
-        gr.HTML("""
-            <div class="footer" style="padding: 25px 0; text-align: center; background: linear-gradient(to right, #f5f9fc, #e1f5fe); border-top: 1px solid #e2e8f0; margin-top: 30px;">
-                <div style="margin-bottom: 15px;">
-                    <p style="font-size: 14px; color: #4A5568; margin: 5px 0;">Powered by YOLOv8, CLIP, Places365, Meta Llama3.2 and Ultralytics • Created with Gradio</p>
-                </div>
-                <div style="display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 15px;">
-                    <p style="font-family: 'Arial', sans-serif; font-size: 14px; font-weight: 500; letter-spacing: 2px; background: linear-gradient(90deg, #38b2ac, #4299e1); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin: 0; text-transform: uppercase; display: inline-block;">EXPLORE THE CODE →</p>
-                    <a href="https://github.com/Eric-Chung-0511/Learning-Record/tree/main/Data%20Science%20Projects/VisionScout" target="_blank" style="text-decoration: none;">
-                        <img src="https://img.shields.io/badge/GitHub-VisionScout-4299e1?logo=github&style=for-the-badge">
-                    </a>
-                </div>
-            </div>
-        """)
-
-    return demo
+def main():
+    """
+    Main function to initialize processors and launch the Gradio interface.
+    """
+    global ui_manager
+    
+    # Initialize processors
+    print("Initializing processors...")
+    initialization_success = initialize_processors()
+    if not initialization_success:
+        print("WARNING: Failed to initialize processors. Application may not function correctly.")
+        return
+    
+    # Initialize UI manager
+    print("Initializing UI manager...")
+    ui_manager = initialize_ui_manager()
+    
+    # Create and launch the Gradio interface
+    print("Creating Gradio interface...")
+    demo_interface = ui_manager.create_interface(
+        handle_image_upload_fn=handle_image_upload,
+        handle_video_upload_fn=handle_video_upload,
+        download_video_from_url_fn=download_video_from_url
+    )
+    
+    print("Launching application...")
+    demo_interface.launch(debug=True)
 
 
 if __name__ == "__main__":
-    demo_interface = create_interface()
-
-    demo_interface.launch(debug=True)
+    main()

functional_zone_identifier.py

@@ -11,7 +11,7 @@ class FunctionalZoneIdentifier:
     整合區域評估和場景特定的區域辨識邏輯，提供統一的功能區域辨識接口
     """
 
-    def __init__(self, zone_evaluator=None, scene_zone_identifier=None, scene_viewpoint_analyzer=None):
+    def __init__(self, zone_evaluator=None, scene_zone_identifier=None, scene_viewpoint_analyzer=None, object_categories=None):
         """
         初始化功能區域識別器
 
@@ -26,6 +26,7 @@ class FunctionalZoneIdentifier:
 
             self.scene_viewpoint_analyzer = scene_viewpoint_analyzer
             self.viewpoint_detector = scene_viewpoint_analyzer
+            self.OBJECT_CATEGORIES = object_categories or {}
 
             logger.info("FunctionalZoneIdentifier initialized successfully with SceneViewpointAnalyzer")
 
@@ -68,7 +69,7 @@ class FunctionalZoneIdentifier:
                     logger.info("Insufficient objects for zone identification")
                     return {}
 
-            # 5. 建立 category_regions 
+            # 5. 建立 category_regions
             category_regions = self._build_category_regions_mapping(detected_objects)
             zones = {}
 
@@ -247,7 +248,7 @@ class FunctionalZoneIdentifier:
             objects = zone_data.get("objects", [])
             region = zone_data.get("region", "")
 
-            # 優先檢查是否含有 traffic light 
+            # 優先檢查是否含有 traffic light
             if any(obj == "traffic light" or "traffic light" in obj for obj in objects):
                 return "traffic control zone"
 
@@ -438,36 +439,42 @@ class FunctionalZoneIdentifier:
     def _categorize_object(self, obj: Dict) -> str:
         """
         將檢測到的物件分類到功能類別中，用於區域識別
-
-        Args:
-            obj: 物件字典
-
-        Returns:
-            物件功能類別字串
+        確保所有返回值都使用自然語言格式，避免底線或技術性標識符
         """
         try:
             class_id = obj.get("class_id", -1)
-            class_name = obj.get("class_name", "").lower()
+            class_name = obj.get("class_name", "").lower().strip()
+
+            # 優先處理 traffic light
+            # 只要 class_id == 9 或 class_name 包含 "traffic light"，就分類為 "traffic light"
+            if class_id == 9 or "traffic light" in class_name:
+                return "traffic light"
 
-            # 使用現有的類別映射（如果可用）
+            # 如果有自訂的 OBJECT_CATEGORIES 映射，優先使用它
             if hasattr(self, 'OBJECT_CATEGORIES') and self.OBJECT_CATEGORIES:
                 for category, ids in self.OBJECT_CATEGORIES.items():
                     if class_id in ids:
-                        return category
+                        # 確保返回的類別名稱使用自然語言格式
+                        return self._clean_category_name(category)
 
-            # 基於COCO類別名稱的後備分類
+            # COCO class default name
             furniture_items = ["chair", "couch", "bed", "dining table", "toilet"]
             plant_items = ["potted plant"]
             electronic_items = ["tv", "laptop", "mouse", "remote", "keyboard", "cell phone"]
             vehicle_items = ["bicycle", "car", "motorcycle", "airplane", "bus", "train", "truck", "boat"]
             person_items = ["person"]
-            kitchen_items = ["bottle", "wine glass", "cup", "fork", "knife", "spoon", "bowl",
-                            "banana", "apple", "sandwich", "orange", "broccoli", "carrot", "hot dog",
-                            "pizza", "donut", "cake", "refrigerator", "oven", "toaster", "sink", "microwave"]
-            sports_items = ["frisbee", "skis", "snowboard", "sports ball", "kite", "baseball bat",
-                        "baseball glove", "skateboard", "surfboard", "tennis racket"]
+            kitchen_items = [
+                "bottle", "wine glass", "cup", "fork", "knife", "spoon", "bowl",
+                "banana", "apple", "sandwich", "orange", "broccoli", "carrot", "hot dog",
+                "pizza", "donut", "cake", "refrigerator", "oven", "toaster", "sink", "microwave"
+            ]
+            sports_items = [
+                "frisbee", "skis", "snowboard", "sports ball", "kite", "baseball bat",
+                "baseball glove", "skateboard", "surfboard", "tennis racket"
+            ]
             personal_items = ["handbag", "tie", "suitcase", "umbrella", "backpack"]
 
+            # fallback natural language
             if any(item in class_name for item in furniture_items):
                 return "furniture"
             elif any(item in class_name for item in plant_items):
@@ -479,11 +486,11 @@ class FunctionalZoneIdentifier:
             elif any(item in class_name for item in person_items):
                 return "person"
             elif any(item in class_name for item in kitchen_items):
-                return "kitchen_items"
+                return "kitchen items"  # 移除底線
             elif any(item in class_name for item in sports_items):
                 return "sports"
             elif any(item in class_name for item in personal_items):
-                return "personal_items"
+                return "personal items"  # 移除底線
             else:
                 return "misc"
 
@@ -492,6 +499,42 @@ class FunctionalZoneIdentifier:
             logger.error(traceback.format_exc())
             return "misc"
 
+    def _clean_category_name(self, category: str) -> str:
+        """
+        清理類別名稱，移除底線並轉換為較自然的格式
+
+        Args:
+            category: 原始類別名稱
+
+        Returns:
+            str: 清理後的類別名稱
+        """
+        try:
+            if not category:
+                return "misc"
+
+            # 將底線替換為空格
+            cleaned = category.replace('_', ' ')
+
+            # 處理常見的技術性命名模式
+            replacements = {
+                'kitchen items': 'kitchen items',
+                'personal items': 'personal items',
+                'traffic light': 'traffic light',
+                'misc items': 'misc'
+            }
+
+            # 應用特定的替換規則
+            for old_term, new_term in replacements.items():
+                if cleaned == old_term:
+                    return new_term
+
+            return cleaned.strip()
+
+        except Exception as e:
+            logger.warning(f"Error cleaning category name '{category}': {str(e)}")
+            return "misc"
+
     def _identify_default_zones(self, category_regions: Dict, detected_objects: List[Dict]) -> Dict:
         """
         當沒有匹配到特定場景類型時的一般功能區域識別
@@ -791,7 +834,7 @@ class FunctionalZoneIdentifier:
 
         }
 
-        # 1. 統計 current_zones 裡，已使用掉的 (class_name, region) 次數 
+        # 1. 統計 current_zones 裡，已使用掉的 (class_name, region) 次數
         used_count = {}
         for zone_info in current_zones.values():
             rg = zone_info.get("region", "")
@@ -799,7 +842,7 @@ class FunctionalZoneIdentifier:
                 key = (obj_name, rg)
                 used_count[key] = used_count.get(key, 0) + 1
 
-        # 2. 統計 all_detected_objects 裡的 (class_name, region) 總次數 
+        # 2. 統計 all_detected_objects 裡的 (class_name, region) 總次數
         total_count = {}
         for obj in all_detected_objects:
             cname = obj.get("class_name", "")
@@ -807,7 +850,7 @@ class FunctionalZoneIdentifier:
             key = (cname, rg)
             total_count[key] = total_count.get(key, 0) + 1
 
-        # 3. 把 default_classes 轉換成「class_name → fallback 區域 type」的對照表 
+        # 3. 把 default_classes 轉換成「class_name → fallback 區域 type」的對照表
         category_to_fallback = {
             # 行人與交通工具
             "person":        "pedestrian area",
@@ -906,12 +949,12 @@ class FunctionalZoneIdentifier:
             "potted plant":  "decorative area",
         }
 
-        # 4. 計算缺少的 (class_name, region) 並建立 fallback zone 
+        # 4. 計算缺少的 (class_name, region) 並建立 fallback zone
         for (cname, rg), total in total_count.items():
             used = used_count.get((cname, rg), 0)
             missing = total - used
             if missing <= 0:
-                continue  
+                continue
 
             # (A) 決定這個 cname 在 fallback 裡屬於哪個大 class（zone_type）
             zone_type = category_to_fallback.get(cname, "miscellaneous area")

scene_analysis_coordinator.py

@@ -333,6 +333,9 @@ class SceneAnalysisCoordinator:
             scene_confidence, lighting_info, functional_zones, landmark_results, image_dims_val
         )
         possible_activities = self._extract_possible_activities(detected_objects_from_landmarks_list, landmark_results)
+        safety_concerns = []
+        if self.descriptor and hasattr(self.descriptor, '_identify_safety_concerns'):
+            safety_concerns = self.descriptor._identify_safety_concerns(detected_objects_from_landmarks_list, best_scene_val)
 
         # 準備最終結果
         return {
@@ -345,6 +348,7 @@ class SceneAnalysisCoordinator:
             "object_count": len(detected_objects_from_landmarks_list),
             "regions": region_analysis,
             "possible_activities": possible_activities,
+            "safety_concerns": safety_concerns,
             "functional_zones": functional_zones,
             "detected_landmarks": [lm for lm in detected_objects_from_landmarks_list if lm.get("is_landmark", False)],
             "primary_landmark": primary_landmark,
@@ -463,26 +467,18 @@ class SceneAnalysisCoordinator:
         # 空間分析
         region_analysis_val = self.spatial_analyzer._analyze_regions(detected_objects_main)
 
+        if current_run_enable_landmark:
+            self.logger.info("Using landmark detection logic for YOLO scene")
+            return self._handle_no_yolo_detections(
+                original_image_pil, image_dims_val, current_run_enable_landmark,
+                lighting_info, places365_info
+            )
+
         # 地標處理和整合
         landmark_objects_identified = []
         landmark_specific_activities = []
         final_landmark_info = {}
 
-        if self.use_clip and current_run_enable_landmark:
-            detected_objects_main, landmark_objects_identified = self.landmark_processing_manager.process_unknown_objects(
-                detection_result, detected_objects_main, self.clip_analyzer
-            )
-
-            if landmark_objects_identified:
-                landmark_specific_activities = self.landmark_processing_manager.extract_landmark_specific_activities(
-                    landmark_objects_identified
-                )
-                final_landmark_info = {
-                    "detected_landmarks": landmark_objects_identified,
-                    "primary_landmark": max(landmark_objects_identified, key=lambda x: x.get("confidence", 0.0), default=None),
-                    "detailed_landmarks": landmark_objects_identified
-                }
-
         # 如果當前運行禁用地標檢測，清理地標物體
         if not current_run_enable_landmark:
             detected_objects_main = [obj for obj in detected_objects_main if not obj.get("is_landmark", False)]

spatial_analyzer.py

@@ -5,6 +5,7 @@ import logging
 import traceback
 from typing import Dict, List, Tuple, Any, Optional
 
+from object_categories import OBJECT_CATEGORIES
 from region_analyzer import RegionAnalyzer
 from object_extractor import ObjectExtractor
 from scene_viewpoint_analyzer import SceneViewpointAnalyzer
@@ -31,6 +32,9 @@ class SpatialAnalyzer:
         """
         try:
             # 初始化所有子組件
+            self.class_names = class_names
+            self.OBJECT_CATEGORIES = object_categories or {}
+
             self.region_analyzer = RegionAnalyzer()
             self.object_extractor = ObjectExtractor(class_names, object_categories)
 
@@ -41,12 +45,10 @@ class SpatialAnalyzer:
             self.functional_zone_identifier = FunctionalZoneIdentifier(
                 zone_evaluator=self.zone_evaluator,
                 scene_zone_identifier=self.scene_zone_identifier,
-                scene_viewpoint_analyzer=self.scene_viewpoint_analyzer
+                scene_viewpoint_analyzer=self.scene_viewpoint_analyzer,
+                object_categories=self.OBJECT_CATEGORIES
             )
 
-            self.class_names = class_names
-            self.OBJECT_CATEGORIES = object_categories or {}
-
             self.enhance_descriptor = None
 
             # 接近分析的距離閾值（標準化）
@@ -171,105 +173,6 @@ class SpatialAnalyzer:
             logger.error(traceback.format_exc())
             return {}
 
-    def _categorize_object(self, obj: Dict) -> str:
-        """
-        將檢測到的物件分類到功能類別中，用於區域識別
-        確保所有返回值都使用自然語言格式，避免底線或技術性標識符
-        """
-        try:
-            class_id = obj.get("class_id", -1)
-            class_name = obj.get("class_name", "").lower().strip()
-
-            # 優先處理 traffic light
-            # 只要 class_id == 9 或 class_name 包含 "traffic light"，就分類為 "traffic light"
-            if class_id == 9 or "traffic light" in class_name:
-                return "traffic light"
-
-            # 如果有自訂的 OBJECT_CATEGORIES 映射，優先使用它
-            if hasattr(self, 'OBJECT_CATEGORIES') and self.OBJECT_CATEGORIES:
-                for category, ids in self.OBJECT_CATEGORIES.items():
-                    if class_id in ids:
-                        # 確保返回的類別名稱使用自然語言格式
-                        return self._clean_category_name(category)
-
-            # COCO class default name
-            furniture_items = ["chair", "couch", "bed", "dining table", "toilet"]
-            plant_items = ["potted plant"]
-            electronic_items = ["tv", "laptop", "mouse", "remote", "keyboard", "cell phone"]
-            vehicle_items = ["bicycle", "car", "motorcycle", "airplane", "bus", "train", "truck", "boat"]
-            person_items = ["person"]
-            kitchen_items = [
-                "bottle", "wine glass", "cup", "fork", "knife", "spoon", "bowl",
-                "banana", "apple", "sandwich", "orange", "broccoli", "carrot", "hot dog",
-                "pizza", "donut", "cake", "refrigerator", "oven", "toaster", "sink", "microwave"
-            ]
-            sports_items = [
-                "frisbee", "skis", "snowboard", "sports ball", "kite", "baseball bat",
-                "baseball glove", "skateboard", "surfboard", "tennis racket"
-            ]
-            personal_items = ["handbag", "tie", "suitcase", "umbrella", "backpack"]
-
-            # fallback natural language
-            if any(item in class_name for item in furniture_items):
-                return "furniture"
-            elif any(item in class_name for item in plant_items):
-                return "plant"
-            elif any(item in class_name for item in electronic_items):
-                return "electronics"
-            elif any(item in class_name for item in vehicle_items):
-                return "vehicle"
-            elif any(item in class_name for item in person_items):
-                return "person"
-            elif any(item in class_name for item in kitchen_items):
-                return "kitchen items"  # 移除底線
-            elif any(item in class_name for item in sports_items):
-                return "sports"
-            elif any(item in class_name for item in personal_items):
-                return "personal items"  # 移除底線
-            else:
-                return "misc"
-
-        except Exception as e:
-            logger.error(f"Error categorizing object: {str(e)}")
-            logger.error(traceback.format_exc())
-            return "misc"
-
-    def _clean_category_name(self, category: str) -> str:
-        """
-        清理類別名稱，移除底線並轉換為較自然的格式
-
-        Args:
-            category: 原始類別名稱
-
-        Returns:
-            str: 清理後的類別名稱
-        """
-        try:
-            if not category:
-                return "misc"
-
-            # 將底線替換為空格
-            cleaned = category.replace('_', ' ')
-
-            # 處理常見的技術性命名模式
-            replacements = {
-                'kitchen items': 'kitchen items',
-                'personal items': 'personal items',
-                'traffic light': 'traffic light',
-                'misc items': 'misc'
-            }
-
-            # 應用特定的替換規則
-            for old_term, new_term in replacements.items():
-                if cleaned == old_term:
-                    return new_term
-
-            return cleaned.strip()
-
-        except Exception as e:
-            logger.warning(f"Error cleaning category name '{category}': {str(e)}")
-            return "misc"
-
     def _get_object_categories(self, detected_objects: List[Dict]) -> set:
         """
         從檢測到的物件中獲取唯一的物件類別

ui_manager.py

@@ -0,0 +1,683 @@
+import gradio as gr
+from typing import Dict, List, Any, Optional, Tuple
+import matplotlib.pyplot as plt
+
+from detection_model import DetectionModel
+from style import Style
+
+class UIManager:
+    """
+    Manages all UI-related functionality for the VisionScout application.
+    Handles Gradio interface creation, component definitions, and event binding.
+    """
+    
+    def __init__(self):
+        """Initialize the UI Manager."""
+        self.available_models = None
+        self.model_choices = []
+        self.class_choices_formatted = []
+        self._setup_model_choices()
+    
+    def _setup_model_choices(self):
+        """Setup model choices for dropdowns."""
+        try:
+            self.available_models = DetectionModel.get_available_models()
+            self.model_choices = [model["model_file"] for model in self.available_models]
+        except ImportError:
+            # Fallback model choices if DetectionModel is not available
+            self.model_choices = ["yolov8n.pt", "yolov8s.pt", "yolov8m.pt", "yolov8l.pt", "yolov8x.pt"]
+        
+        # Setup class choices
+        self.class_choices_formatted = [f"{id}: {name}" for id, name in self.get_all_classes()]
+    
+    def get_all_classes(self):
+        """
+        Gets all available COCO classes.
+        
+        Returns:
+            List[Tuple[int, str]]: List of (class_id, class_name) tuples
+        """
+        # Try to get from a loaded model first
+        try:
+            # This will be injected by the main app when processors are available
+            if hasattr(self, '_image_processor') and self._image_processor and self._image_processor.model_instances:
+                for model_instance in self._image_processor.model_instances.values():
+                    if model_instance and model_instance.is_model_loaded:
+                        try:
+                            # Ensure class_names is a dict {id: name}
+                            if isinstance(model_instance.class_names, dict):
+                                return sorted([(int(idx), name) for idx, name in model_instance.class_names.items()])
+                        except Exception as e:
+                            print(f"Error getting class names from model: {e}")
+        except Exception:
+            pass
+
+        # Fallback to standard COCO (ensure keys are ints)
+        default_classes = {
+            0: 'person', 1: 'bicycle', 2: 'car', 3: 'motorcycle', 4: 'airplane', 5: 'bus',
+            6: 'train', 7: 'truck', 8: 'boat', 9: 'traffic light', 10: 'fire hydrant',
+            11: 'stop sign', 12: 'parking meter', 13: 'bench', 14: 'bird', 15: 'cat',
+            16: 'dog', 17: 'horse', 18: 'sheep', 19: 'cow', 20: 'elephant', 21: 'bear',
+            22: 'zebra', 23: 'giraffe', 24: 'backpack', 25: 'umbrella', 26: 'handbag',
+            27: 'tie', 28: 'suitcase', 29: 'frisbee', 30: 'skis', 31: 'snowboard',
+            32: 'sports ball', 33: 'kite', 34: 'baseball bat', 35: 'baseball glove',
+            36: 'skateboard', 37: 'surfboard', 38: 'tennis racket', 39: 'bottle',
+            40: 'wine glass', 41: 'cup', 42: 'fork', 43: 'knife', 44: 'spoon', 45: 'bowl',
+            46: 'banana', 47: 'apple', 48: 'sandwich', 49: 'orange', 50: 'broccoli',
+            51: 'carrot', 52: 'hot dog', 53: 'pizza', 54: 'donut', 55: 'cake', 56: 'chair',
+            57: 'couch', 58: 'potted plant', 59: 'bed', 60: 'dining table', 61: 'toilet',
+            62: 'tv', 63: 'laptop', 64: 'mouse', 65: 'remote', 66: 'keyboard',
+            67: 'cell phone', 68: 'microwave', 69: 'oven', 70: 'toaster', 71: 'sink',
+            72: 'refrigerator', 73: 'book', 74: 'clock', 75: 'vase', 76: 'scissors',
+            77: 'teddy bear', 78: 'hair drier', 79: 'toothbrush'
+        }
+        return sorted(default_classes.items())
+    
+    def set_image_processor(self, image_processor):
+        """
+        Set the image processor reference for dynamic class retrieval.
+        
+        Args:
+            image_processor: The ImageProcessor instance
+        """
+        self._image_processor = image_processor
+    
+    def get_css_styles(self):
+        """
+        Get CSS styles for the interface.
+        
+        Returns:
+            str: CSS styles
+        """
+        try:
+            return Style.get_css()
+        except ImportError:
+            # Fallback CSS if Style module is not available
+            return """
+            .app-header {
+                text-align: center;
+                padding: 2rem 0 3rem 0;
+                background: linear-gradient(135deg, #f0f9ff, #e1f5fe);
+            }
+            .section-heading {
+                font-size: 1.2rem;
+                font-weight: bold;
+                color: #2D3748;
+                margin: 1rem 0 0.5rem 0;
+            }
+            .detect-btn {
+                background: linear-gradient(90deg, #38b2ac, #4299e1) !important;
+                color: white !important;
+                border: none !important;
+                border-radius: 8px !important;
+            }
+            """
+    
+    def get_model_description(self, model_name):
+        """
+        Get model description for the given model name.
+        
+        Args:
+            model_name: Name of the model
+            
+        Returns:
+            str: Model description
+        """
+        try:
+            return DetectionModel.get_model_description(model_name)
+        except ImportError:
+            return f"Model: {model_name}"
+    
+    def create_header(self):
+        """
+        Create the application header.
+        
+        Returns:
+            gr.HTML: Header HTML component
+        """
+        return gr.HTML("""
+            <div style="text-align: center; width: 100%; padding: 2rem 0 3rem 0; background: linear-gradient(135deg, #f0f9ff, #e1f5fe);">
+                <h1 style="font-size: 3.5rem; margin-bottom: 0.5rem; background: linear-gradient(90deg, #38b2ac, #4299e1); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: bold; font-family: 'Arial', sans-serif;">VisionScout</h1>
+                <h2 style="color: #4A5568; font-size: 1.2rem; font-weight: 400; margin-top: 0.5rem; margin-bottom: 1.5rem; font-family: 'Arial', sans-serif;">Object Detection and Scene Understanding</h2>
+                <div style="display: flex; justify-content: center; gap: 10px; margin: 0.5rem 0;"><div style="height: 3px; width: 80px; background: linear-gradient(90deg, #38b2ac, #4299e1);"></div></div>
+                <div style="display: flex; justify-content: center; gap: 25px; margin-top: 1.5rem;">
+                    <div style="padding: 8px 15px; border-radius: 20px; background: rgba(66, 153, 225, 0.15); color: #2b6cb0; font-weight: 500; font-size: 0.9rem;"><span style="margin-right: 6px;">🖼️</span> Image Analysis</div>
+                    <div style="padding: 8px 15px; border-radius: 20px; background: rgba(56, 178, 172, 0.15); color: #2b6cb0; font-weight: 500; font-size: 0.9rem;"><span style="margin-right: 6px;">🎬</span> Video Analysis</div>
+                </div>
+                 <div style="margin-top: 20px; padding: 10px 15px; background-color: rgba(255, 248, 230, 0.9); border-left: 3px solid #f6ad55; border-radius: 6px; max-width: 600px; margin-left: auto; margin-right: auto; text-align: left;">
+                     <p style="margin: 0; font-size: 0.9rem; color: #805ad5; font-weight: 500;">
+                         <span style="margin-right: 5px;">📱</span> iPhone users: HEIC images may not be supported.
+                         <a href="https://cloudconvert.com/heic-to-jpg" target="_blank" style="color: #3182ce; text-decoration: underline;">Convert HEIC to JPG</a> before uploading if needed.
+                     </p>
+                 </div>
+            </div>
+        """)
+    
+    def create_footer(self):
+        """
+        Create the application footer.
+        
+        Returns:
+            gr.HTML: Footer HTML component
+        """
+        return gr.HTML("""
+            <div class="footer" style="padding: 25px 0; text-align: center; background: linear-gradient(to right, #f5f9fc, #e1f5fe); border-top: 1px solid #e2e8f0; margin-top: 30px;">
+                <div style="margin-bottom: 15px;">
+                    <p style="font-size: 14px; color: #4A5568; margin: 5px 0;">Powered by YOLOv8, CLIP, Places365, Meta Llama3.2 and Ultralytics • Created with Gradio</p>
+                </div>
+                <div style="display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 15px;">
+                    <p style="font-family: 'Arial', sans-serif; font-size: 14px; font-weight: 500; letter-spacing: 2px; background: linear-gradient(90deg, #38b2ac, #4299e1); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin: 0; text-transform: uppercase; display: inline-block;">EXPLORE THE CODE →</p>
+                    <a href="https://github.com/Eric-Chung-0511/Learning-Record/tree/main/Data%20Science%20Projects/VisionScout" target="_blank" style="text-decoration: none;">
+                        <img src="https://img.shields.io/badge/GitHub-VisionScout-4299e1?logo=github&style=for-the-badge">
+                    </a>
+                </div>
+            </div>
+        """)
+    
+    def create_image_tab(self):
+        """
+        Create the image processing tab with all components.
+        
+        Returns:
+            Dict: Dictionary containing all image tab components
+        """
+        components = {}
+        
+        with gr.Tab("Image Processing"):
+            components['current_image_model'] = gr.State("yolov8m.pt")
+            
+            with gr.Row(equal_height=False):
+                # Left Column: Image Input & Controls
+                with gr.Column(scale=4, elem_classes="input-panel"):
+                    with gr.Group():
+                        gr.HTML('<div class="section-heading">Upload Image</div>')
+                        components['image_input'] = gr.Image(
+                            type="pil", 
+                            label="Upload an image", 
+                            elem_classes="upload-box"
+                        )
+
+                        with gr.Accordion("Image Analysis Settings", open=False):
+                            components['image_model_dropdown'] = gr.Dropdown(
+                                choices=self.model_choices,
+                                value="yolov8m.pt",
+                                label="Select Model",
+                                info="Choose speed vs. accuracy (n=fast, m=balanced, x=accurate)"
+                            )
+                            
+                            components['image_model_info'] = gr.Markdown(
+                                self.get_model_description("yolov8m.pt")
+                            )
+
+                            components['image_confidence'] = gr.Slider(
+                                minimum=0.1, maximum=0.9, value=0.25, step=0.05,
+                                label="Confidence Threshold",
+                                info="Minimum confidence for displaying a detected object"
+                            )
+
+                            components['use_llm'] = gr.Checkbox(
+                                label="Use LLM for enhanced scene descriptions",
+                                value=True,
+                                info="Provides more detailed and natural language descriptions (may increase processing time)"
+                            )
+
+                            components['use_landmark_detection'] = gr.Checkbox(
+                                label="Use CLIP for Landmark Detection",
+                                value=False,
+                                info="Detect famous landmarks, monuments, and tourist attractions that standard object detection cannot recognize (increases processing time)"
+                            )
+
+                            with gr.Accordion("Filter Classes", open=False):
+                                gr.HTML('<div class="section-heading" style="font-size: 1rem;">Common Categories</div>')
+                                with gr.Row():
+                                    components['people_btn'] = gr.Button("People", size="sm")
+                                    components['vehicles_btn'] = gr.Button("Vehicles", size="sm")
+                                    components['animals_btn'] = gr.Button("Animals", size="sm")
+                                    components['objects_btn'] = gr.Button("Common Objects", size="sm")
+                                
+                                components['image_class_filter'] = gr.Dropdown(
+                                    choices=self.class_choices_formatted,
+                                    multiselect=True,
+                                    label="Select Classes to Display",
+                                    info="Leave empty to show all detected objects"
+                                )
+
+                    components['image_detect_btn'] = gr.Button(
+                        "Analyze Image", 
+                        variant="primary", 
+                        elem_classes="detect-btn"
+                    )
+
+                    # How to use section
+                    with gr.Group(elem_classes="how-to-use"):
+                        gr.HTML('<div class="section-heading">How to Use (Image)</div>')
+                        gr.Markdown("""
+                            1. Upload an image or use the camera
+                            2. *(Optional)* Adjust settings like confidence threshold or model size (n, m = balanced, x = accurate)
+                            3. In **Analysis Settings**, you can:
+                                * Uncheck **Use LLM** to skip enhanced descriptions (faster)
+                                * Check **Use CLIP for Landmark Detection** to identify famous landmarks like museums, monuments, and tourist attractions *(may take longer)*
+                                * Filter object classes to focus on specific types of objects *(optional)*
+                            4. Click **Analyze Image** button
+
+                            **💡 Tip:** For landmark recognition (e.g. Louvre Museum), make sure to enable **CLIP for Landmark Detection** in the settings above.
+                        """)
+
+                    # Image Examples
+                    gr.Examples(
+                        examples=[
+                            "room_04.jpg",
+                            "street_04.jpg",
+                            "street_05.jpg",
+                            "landmark_Louvre_01.jpg"
+                        ],
+                        inputs=components['image_input'],
+                        label="Example Images"
+                    )
+
+                    gr.HTML("""
+                        <div style="text-align: center; margin-top: 8px; padding: 6px; background-color: #f8f9fa; border-radius: 4px; border: 1px solid #e2e8f0;">
+                            <p style="font-size: 12px; color: #718096; margin: 0;">
+                                📷 Sample images sourced from <a href="https://unsplash.com" target="_blank" style="color: #3182ce; text-decoration: underline;">Unsplash</a>
+                            </p>
+                        </div>
+                    """)
+
+                # Right Column: Image Results
+                with gr.Column(scale=6, elem_classes="output-panel"):
+                    with gr.Tabs(elem_classes="tabs"):
+                        # Detection Result Tab
+                        with gr.Tab("Detection Result"):
+                            components['image_result_image'] = gr.Image(
+                                type="pil", 
+                                label="Detection Result"
+                            )
+                            gr.HTML('<div class="section-heading">Detection Details</div>')
+                            components['image_result_text'] = gr.Textbox(
+                                label=None, 
+                                lines=10, 
+                                elem_id="detection-details", 
+                                container=False
+                            )
+
+                        # Scene Understanding Tab
+                        with gr.Tab("Scene Understanding"):
+                            gr.HTML('<div class="section-heading">Scene Analysis</div>')
+                            
+                            # Info details
+                            gr.HTML("""
+                                <details class="info-details" style="margin: 5px 0 15px 0;">
+                                    <summary style="padding: 8px; background-color: #f0f7ff; border-radius: 6px; border-left: 3px solid #4299e1; font-weight: bold; cursor: pointer; color: #2b6cb0;">
+                                        🔍 The AI Vision Scout Report: Click for important notes about this analysis
+                                    </summary>
+                                    <div style="margin-top: 8px; padding: 10px; background-color: #f8f9fa; border-radius: 6px; border: 1px solid #e2e8f0;">
+                                        <p style="font-size: 13px; color: #718096; margin: 0;">
+                                            <b>About this analysis:</b> This analysis is the model's best guess based on visible objects.
+                                            Like human scouts, it sometimes gets lost or sees things that aren't there (but don't we all?).
+                                            Consider this an educated opinion rather than absolute truth. For critical applications, always verify with human eyes! 🧐
+                                        </p>
+                                    </div>
+                                </details>
+                            """)
+
+                            gr.HTML('''
+                                <div style="margin-top: 5px; padding: 6px 10px; background-color: #f0f9ff; border-radius: 4px; border-left: 3px solid #63b3ed; font-size: 12px; margin-bottom: 10px;">
+                                    <p style="margin: 0; color: #4a5568;">
+                                        <b>Note:</b> AI descriptions may vary slightly with each generation, reflecting the creative nature of AI. This is similar to how a person might use different words each time they describe the same image. Processing time may be longer during first use or when analyzing complex scenes, as the LLM enhancement requires additional computational resources.
+                                    </p>
+                                </div>
+                            ''')
+                            
+                            components['image_scene_description_html'] = gr.HTML(
+                                label=None, 
+                                elem_id="scene_analysis_description_text"
+                            )
+
+                            # Original Scene Analysis accordion
+                            with gr.Accordion("Original Scene Analysis", open=False, elem_id="original_scene_analysis_accordion"):
+                                components['image_llm_description'] = gr.HTML(
+                                    label=None, 
+                                    elem_id="original_scene_description_text"
+                                )
+
+                            with gr.Row():
+                                with gr.Column(scale=1):
+                                    gr.HTML('<div class="section-heading" style="font-size:1rem; text-align:left;">Possible Activities</div>')
+                                    components['image_activities_list'] = gr.Dataframe(
+                                        headers=["Activity"], 
+                                        datatype=["str"], 
+                                        row_count=5, 
+                                        col_count=1, 
+                                        wrap=True
+                                    )
+
+                                with gr.Column(scale=1):
+                                    gr.HTML('<div class="section-heading" style="font-size:1rem; text-align:left;">Safety Concerns</div>')
+                                    components['image_safety_list'] = gr.Dataframe(
+                                        headers=["Concern"], 
+                                        datatype=["str"], 
+                                        row_count=5, 
+                                        col_count=1, 
+                                        wrap=True
+                                    )
+
+                            gr.HTML('<div class="section-heading">Functional Zones</div>')
+                            components['image_zones_json'] = gr.JSON(
+                                label=None, 
+                                elem_classes="json-box"
+                            )
+
+                            gr.HTML('<div class="section-heading">Lighting Conditions</div>')
+                            components['image_lighting_info'] = gr.JSON(
+                                label=None, 
+                                elem_classes="json-box"
+                            )
+
+                        # Statistics Tab
+                        with gr.Tab("Statistics"):
+                            with gr.Row():
+                                with gr.Column(scale=3, elem_classes="plot-column"):
+                                    gr.HTML('<div class="section-heading">Object Distribution</div>')
+                                    components['image_plot_output'] = gr.Plot(
+                                        label=None, 
+                                        elem_classes="large-plot-container"
+                                    )
+                                with gr.Column(scale=2, elem_classes="stats-column"):
+                                    gr.HTML('<div class="section-heading">Detection Statistics</div>')
+                                    components['image_stats_json'] = gr.JSON(
+                                        label=None, 
+                                        elem_classes="enhanced-json-display"
+                                    )
+        
+        return components
+    
+    def create_video_tab(self):
+        """
+        Create the video processing tab with all components.
+        
+        Returns:
+            Dict: Dictionary containing all video tab components
+        """
+        components = {}
+        
+        with gr.Tab("Video Processing"):
+            with gr.Row(equal_height=False):
+                # Left Column: Video Input & Controls
+                with gr.Column(scale=4, elem_classes="input-panel"):
+                    with gr.Group():
+                        gr.HTML('<div class="section-heading">Video Input</div>')
+
+                        # Input type selection
+                        components['video_input_type'] = gr.Radio(
+                            ["upload", "url"],
+                            label="Input Method",
+                            value="upload",
+                            info="Choose how to provide the video"
+                        )
+
+                        # File upload
+                        with gr.Group(elem_id="upload-video-group"):
+                            components['video_input'] = gr.Video(
+                                label="Upload a video file (MP4, AVI, MOV)",
+                                sources=["upload"],
+                                visible=True
+                            )
+
+                        # URL input
+                        with gr.Group(elem_id="url-video-group"):
+                            components['video_url_input'] = gr.Textbox(
+                                label="Enter video URL (YouTube or direct video link)",
+                                placeholder="https://www.youtube.com/watch?v=...",
+                                visible=False,
+                                elem_classes="custom-video-url-input"
+                            )
+                            gr.HTML("""
+                                <div style="padding: 8px; margin-top: 5px; background-color: #fff8f8; border-radius: 4px; border-left: 3px solid #f87171; font-size: 12px;">
+                                    <p style="margin: 0; color: #4b5563;">
+                                        Note: Currently only YouTube URLs are supported. Maximum video duration is 10 minutes. Due to YouTube's anti-bot protection, some videos may not be downloadable. For protected videos, please upload a local video file instead.
+                                    </p>
+                                </div>
+                            """)
+
+                        with gr.Accordion("Video Analysis Settings", open=True):
+                            components['video_model_dropdown'] = gr.Dropdown(
+                                choices=self.model_choices,
+                                value="yolov8n.pt",
+                                label="Select Model (Video)",
+                                info="Faster models (like 'n') are recommended"
+                            )
+                            components['video_confidence'] = gr.Slider(
+                                minimum=0.1, maximum=0.9, value=0.4, step=0.05,
+                                label="Confidence Threshold (Video)"
+                            )
+                            components['video_process_interval'] = gr.Slider(
+                                minimum=1, maximum=60, value=10, step=1,
+                                label="Processing Interval (Frames)",
+                                info="Analyze every Nth frame (higher value = faster)"
+                            )
+                    
+                    components['video_process_btn'] = gr.Button(
+                        "Process Video", 
+                        variant="primary", 
+                        elem_classes="detect-btn"
+                    )
+
+                    # How to use section
+                    with gr.Group(elem_classes="how-to-use"):
+                        gr.HTML('<div class="section-heading">How to Use (Video)</div>')
+                        gr.Markdown("""
+                        1. Choose your input method: Upload a file or enter a URL.
+                        2. Adjust settings if needed (using a faster model and larger interval is recommended for longer videos).
+                        3. Click "Process Video". **Processing can take a significant amount of time.**
+                        4. The annotated video and summary will appear on the right when finished.
+                        """)
+
+                    # Video examples
+                    gr.HTML('<div class="section-heading">Example Videos</div>')
+                    gr.HTML("""
+                        <div style="padding: 10px; background-color: #f0f7ff; border-radius: 6px; margin-bottom: 15px;">
+                            <p style="font-size: 14px; color: #4A5568; margin: 0;">
+                                Upload any video containing objects that YOLO can detect. For testing, find sample videos
+                                <a href="https://www.pexels.com/search/videos/street/" target="_blank" style="color: #3182ce; text-decoration: underline;">here</a>.
+                            </p>
+                        </div>
+                    """)
+
+                # Right Column: Video Results
+                with gr.Column(scale=6, elem_classes="output-panel video-result-panel"):
+                    gr.HTML("""
+                        <div class="section-heading">Video Result</div>
+                        <details class="info-details" style="margin: 5px 0 15px 0;">
+                            <summary style="padding: 8px; background-color: #f0f7ff; border-radius: 6px; border-left: 3px solid #4299e1; font-weight: bold; cursor: pointer; color: #2b6cb0;">
+                                🎬 Video Processing Notes
+                            </summary>
+                            <div style="margin-top: 8px; padding: 10px; background-color: #f8f9fa; border-radius: 6px; border: 1px solid #e2e8f0;">
+                                <p style="font-size: 13px; color: #718096; margin: 0;">
+                                    The processed video includes bounding boxes around detected objects. For longer videos,
+                                    consider using a faster model (like YOLOv8n) and a higher frame interval to reduce processing time.
+                                </p>
+                            </div>
+                        </details>
+                    """)
+                    
+                    components['video_output'] = gr.Video(
+                        label="Processed Video", 
+                        elem_classes="video-output-container"
+                    )
+
+                    gr.HTML('<div class="section-heading">Processing Summary</div>')
+                    components['video_summary_text'] = gr.HTML(
+                        label=None,
+                        elem_id="video-summary-html-output"
+                    )
+
+                    gr.HTML('<div class="section-heading">Aggregated Statistics</div>')
+                    components['video_stats_json'] = gr.JSON(
+                        label=None, 
+                        elem_classes="video-stats-display"
+                    )
+        
+        return components
+    
+    def get_filter_button_mappings(self):
+        """
+        Get the class ID mappings for filter buttons.
+        
+        Returns:
+            Dict: Dictionary containing class ID lists for different categories
+        """
+        available_classes_list = self.get_all_classes()
+        
+        return {
+            'people_classes_ids': [0],
+            'vehicles_classes_ids': [1, 2, 3, 4, 5, 6, 7, 8],
+            'animals_classes_ids': list(range(14, 24)),
+            'common_objects_ids': [39, 41, 42, 43, 44, 45, 56, 57, 60, 62, 63, 67, 73],
+            'available_classes_list': available_classes_list
+        }
+    
+    def create_interface(self, 
+                        handle_image_upload_fn, 
+                        handle_video_upload_fn, 
+                        download_video_from_url_fn):
+        """
+        Create the complete Gradio interface.
+        
+        Args:
+            handle_image_upload_fn: Function to handle image upload
+            handle_video_upload_fn: Function to handle video upload
+            download_video_from_url_fn: Function to download video from URL
+            
+        Returns:
+            gr.Blocks: Complete Gradio interface
+        """
+        css = self.get_css_styles()
+        
+        with gr.Blocks(css=css, theme=gr.themes.Soft(primary_hue="teal", secondary_hue="blue")) as demo:
+            
+            # Header
+            with gr.Group(elem_classes="app-header"):
+                self.create_header()
+
+            # Main Content with Tabs
+            with gr.Tabs(elem_classes="tabs"):
+                
+                # Image Processing Tab
+                image_components = self.create_image_tab()
+                
+                # Video Processing Tab
+                video_components = self.create_video_tab()
+
+            # Footer
+            self.create_footer()
+
+            # Setup Event Listeners
+            self._setup_event_listeners(
+                image_components, 
+                video_components, 
+                handle_image_upload_fn, 
+                handle_video_upload_fn
+            )
+
+        return demo
+    
+    def _setup_event_listeners(self, 
+                              image_components, 
+                              video_components, 
+                              handle_image_upload_fn, 
+                              handle_video_upload_fn):
+        """
+        Setup all event listeners for the interface.
+        
+        Args:
+            image_components: Dictionary of image tab components
+            video_components: Dictionary of video tab components
+            handle_image_upload_fn: Function to handle image upload
+            handle_video_upload_fn: Function to handle video upload
+        """
+        # Image Model Change Handler
+        image_components['image_model_dropdown'].change(
+            fn=lambda model: (model, self.get_model_description(model)),
+            inputs=[image_components['image_model_dropdown']],
+            outputs=[image_components['current_image_model'], image_components['image_model_info']]
+        )
+
+        # Image Filter Buttons
+        filter_mappings = self.get_filter_button_mappings()
+        available_classes_list = filter_mappings['available_classes_list']
+        people_classes_ids = filter_mappings['people_classes_ids']
+        vehicles_classes_ids = filter_mappings['vehicles_classes_ids']
+        animals_classes_ids = filter_mappings['animals_classes_ids']
+        common_objects_ids = filter_mappings['common_objects_ids']
+
+        image_components['people_btn'].click(
+            lambda: [f"{id}: {name}" for id, name in available_classes_list if id in people_classes_ids], 
+            outputs=image_components['image_class_filter']
+        )
+        image_components['vehicles_btn'].click(
+            lambda: [f"{id}: {name}" for id, name in available_classes_list if id in vehicles_classes_ids], 
+            outputs=image_components['image_class_filter']
+        )
+        image_components['animals_btn'].click(
+            lambda: [f"{id}: {name}" for id, name in available_classes_list if id in animals_classes_ids], 
+            outputs=image_components['image_class_filter']
+        )
+        image_components['objects_btn'].click(
+            lambda: [f"{id}: {name}" for id, name in available_classes_list if id in common_objects_ids], 
+            outputs=image_components['image_class_filter']
+        )
+
+        # Video Input Type Change Handler
+        video_components['video_input_type'].change(
+            fn=lambda input_type: [
+                # Show/hide file upload
+                gr.update(visible=(input_type == "upload")),
+                # Show/hide URL input
+                gr.update(visible=(input_type == "url"))
+            ],
+            inputs=[video_components['video_input_type']],
+            outputs=[video_components['video_input'], video_components['video_url_input']]
+        )
+
+        # Image Detect Button Click Handler
+        image_components['image_detect_btn'].click(
+            fn=handle_image_upload_fn,
+            inputs=[
+                image_components['image_input'], 
+                image_components['image_model_dropdown'], 
+                image_components['image_confidence'], 
+                image_components['image_class_filter'], 
+                image_components['use_llm'], 
+                image_components['use_landmark_detection']
+            ],
+            outputs=[
+                image_components['image_result_image'], 
+                image_components['image_result_text'], 
+                image_components['image_stats_json'], 
+                image_components['image_plot_output'],
+                image_components['image_scene_description_html'], 
+                image_components['image_llm_description'], 
+                image_components['image_activities_list'], 
+                image_components['image_safety_list'], 
+                image_components['image_zones_json'],
+                image_components['image_lighting_info']
+            ]
+        )
+
+        # Video Process Button Click Handler
+        video_components['video_process_btn'].click(
+            fn=handle_video_upload_fn,
+            inputs=[
+                video_components['video_input'],
+                video_components['video_url_input'],
+                video_components['video_input_type'],
+                video_components['video_model_dropdown'],
+                video_components['video_confidence'],
+                video_components['video_process_interval']
+            ],
+            outputs=[
+                video_components['video_output'], 
+                video_components['video_summary_text'], 
+                video_components['video_stats_json']
+            ]
+        )