Fix Gradio CSS loading error: use css_paths parameter instead of css

ui/interface.py

@@ -1,6 +1,5 @@
 """Gradio UI interface for Caribbean Voices OWSM platform."""
 import gradio as gr
-import os
 import time
 from pathlib import Path
 from datetime import datetime
@@ -14,28 +13,15 @@ from models.loader import get_available_models
 from data.loader import load_data_from_hf_dataset
 
 
-def load_css():
-    """Load CSS from file and return as string"""
-    css_path = os.path.join(os.path.dirname(__file__), "styles.css")
-    if os.path.exists(css_path):
-        with open(css_path, 'r') as f:
-            return f.read()
-    return ""
-
-
 def create_interface():
     """Create and return the Gradio interface"""
     interface_start = time.time()
-    css_content = load_css()
-    css_time = time.time() - interface_start
-    timestamp = datetime.now().strftime("%H:%M:%S.%f")[:-3]
-    print(f"[{timestamp}] ⏱️  CSS loading: {css_time:.3f}s")
     
-    # Gradio 5.x: css parameter accepts CSS string directly
-    # This is the most compatible approach across Gradio versions
+    # Build CSS file path and configure Blocks
+    css_path = Path(__file__).parent / "styles.css"
     blocks_kwargs = {"title": "Caribbean Voices - OWSM Platform"}
-    if css_content:
-        blocks_kwargs["css"] = css_content
+    if css_path.exists():
+        blocks_kwargs["css_paths"] = [css_path]
     
     with gr.Blocks(**blocks_kwargs) as demo:
         gr.Markdown("""