Fix: dashboard CSS loading and layout issues by correcting static paths

save_annotated_images.py

@@ -0,0 +1,177 @@
+#!/usr/bin/env python3
+"""
+Simple script to save annotated images from the Marine Species API.
+No external dependencies required - uses only Python standard library.
+"""
+
+import requests
+import base64
+import json
+import time
+from pathlib import Path
+import sys
+
+
+def encode_image_to_base64(image_path: str) -> str:
+    """Encode an image file to base64 string."""
+    try:
+        with open(image_path, "rb") as image_file:
+            return base64.b64encode(image_file.read()).decode('utf-8')
+    except Exception as e:
+        print(f"Error encoding image {image_path}: {e}")
+        return None
+
+
+def save_base64_image(base64_string: str, output_path: str) -> bool:
+    """Save a base64 encoded image to a file."""
+    try:
+        # Decode base64 to bytes
+        image_bytes = base64.b64decode(base64_string)
+        
+        # Save directly to file
+        with open(output_path, 'wb') as f:
+            f.write(image_bytes)
+        
+        print(f"✅ Saved annotated image: {output_path}")
+        return True
+        
+    except Exception as e:
+        print(f"❌ Failed to save image: {e}")
+        return False
+
+
+def process_image(api_url: str, image_path: str, output_dir: str):
+    """Process an image and save the annotated result."""
+    
+    image_name = Path(image_path).stem
+    print(f"\n🐟 Processing {Path(image_path).name}")
+    print("-" * 50)
+    
+    # Encode input image
+    print("📷 Encoding image...")
+    image_b64 = encode_image_to_base64(image_path)
+    if not image_b64:
+        return None
+    
+    # API request
+    detection_request = {
+        "image": image_b64,
+        "confidence_threshold": 0.25,
+        "iou_threshold": 0.45,
+        "image_size": 640,
+        "return_annotated_image": True
+    }
+    
+    try:
+        print("🔍 Sending detection request...")
+        start_time = time.time()
+        
+        response = requests.post(
+            f"{api_url}/api/v1/detect",
+            json=detection_request,
+            timeout=60
+        )
+        
+        request_time = time.time() - start_time
+        print(f"⏱️  Request completed in {request_time:.2f}s")
+        
+        if response.status_code == 200:
+            result = response.json()
+            
+            detections = result.get('detections', [])
+            processing_time = result.get('processing_time', 0)
+            annotated_image_b64 = result.get('annotated_image')
+            
+            print(f"✅ SUCCESS!")
+            print(f"   Processing Time: {processing_time:.3f}s")
+            print(f"   Detections Found: {len(detections)}")
+            
+            # Show detections
+            if detections:
+                print(f"   🎯 Detected Species:")
+                for i, detection in enumerate(detections[:5]):
+                    species = detection.get('class_name', 'Unknown')
+                    confidence = detection.get('confidence', 0)
+                    print(f"      {i+1}. {species} ({confidence:.1%})")
+            
+            # Save annotated image
+            if annotated_image_b64:
+                output_path = Path(output_dir) / f"{image_name}_annotated.jpg"
+                success = save_base64_image(annotated_image_b64, str(output_path))
+                
+                if success:
+                    return str(output_path)
+            else:
+                print("   ❌ No annotated image returned")
+                
+        else:
+            print(f"❌ Request failed: {response.status_code}")
+            
+    except Exception as e:
+        print(f"❌ Request failed: {e}")
+    
+    return None
+
+
+def main():
+    """Main function."""
+    api_url = "https://seamo-ai-fishapi.hf.space"
+    
+    print("🐟 Marine Species API - Save Annotated Images")
+    print("=" * 60)
+    
+    # Create output directory
+    output_dir = Path("annotated_results")
+    output_dir.mkdir(exist_ok=True)
+    print(f"📁 Output directory: {output_dir.absolute()}")
+    
+    # Find test images
+    image_dir = Path("docs/gradio/images")
+    if not image_dir.exists():
+        print(f"\n❌ Image directory not found: {image_dir}")
+        return
+    
+    # Get image files
+    image_files = []
+    for ext in ['*.png', '*.jpg', '*.jpeg']:
+        image_files.extend(image_dir.glob(ext))
+    
+    if not image_files:
+        print(f"\n❌ No images found in {image_dir}")
+        return
+    
+    print(f"📷 Found {len(image_files)} test images")
+    
+    # Process each image
+    saved_images = []
+    for image_path in sorted(image_files):
+        result_path = process_image(api_url, str(image_path), str(output_dir))
+        if result_path:
+            saved_images.append(result_path)
+        time.sleep(1)
+    
+    # Summary
+    print("\n" + "=" * 60)
+    print(f"🎯 Results:")
+    print(f"   📷 Processed: {len(image_files)} images")
+    print(f"   💾 Saved: {len(saved_images)} annotated images")
+    
+    if saved_images:
+        print(f"\n🖼️  Annotated images saved:")
+        for img_path in saved_images:
+            print(f"   📄 {img_path}")
+        
+        print(f"\n💡 To view the annotated images:")
+        print(f"   🖥️  macOS: open {output_dir}")
+        print(f"   🐧 Linux: xdg-open {output_dir}")
+        print(f"   🪟 Windows: explorer {output_dir}")
+        print(f"   📂 Or browse to: {output_dir.absolute()}")
+        
+        print(f"\n🔍 The images show:")
+        print(f"   • Bounding boxes around detected marine species")
+        print(f"   • Species names and confidence scores")
+        print(f"   • Color-coded detection results")
+
+
+if __name__ == "__main__":
+    main()

static/css/dashboard-simple.css

@@ -0,0 +1,339 @@
+/* Simplified Dashboard CSS - More Compatible */
+
+.dashboard {
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+.page-header {
+  text-align: center;
+  margin-bottom: 40px;
+}
+
+.page-header h1 {
+  font-size: 2rem;
+  margin-bottom: 10px;
+  color: #111827;
+}
+
+.page-description {
+  font-size: 1.125rem;
+  color: #6b7280;
+  max-width: 600px;
+  margin: 0 auto;
+}
+
+/* Status Banner */
+.status-banner {
+  background: white;
+  border: 1px solid #e5e7eb;
+  border-radius: 12px;
+  padding: 20px;
+  margin-bottom: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
+}
+
+.status-indicator {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.status-dot {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: #9ca3af;
+}
+
+.status-dot.healthy {
+  background: #059669;
+}
+
+.status-text {
+  font-weight: 500;
+  color: #374151;
+}
+
+.model-info {
+  font-size: 0.875rem;
+  color: #6b7280;
+}
+
+/* Dashboard Grid */
+.dashboard-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 30px;
+  margin-bottom: 40px;
+}
+
+@media (max-width: 1024px) {
+  .dashboard-grid {
+    grid-template-columns: 1fr;
+    gap: 20px;
+  }
+}
+
+.panel {
+  min-height: 600px;
+}
+
+/* Cards */
+.card {
+  background: white;
+  border: 1px solid #e5e7eb;
+  border-radius: 12px;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
+  overflow: hidden;
+  height: 100%;
+}
+
+.card-header {
+  padding: 20px;
+  border-bottom: 1px solid #e5e7eb;
+  background: #f9fafb;
+}
+
+.card-title {
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: #111827;
+  margin: 0;
+}
+
+.card-body {
+  padding: 20px;
+}
+
+/* Upload Area */
+.upload-area {
+  border: 2px dashed #d1d5db;
+  border-radius: 12px;
+  padding: 40px 20px;
+  text-align: center;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  margin-bottom: 20px;
+  min-height: 200px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: white;
+}
+
+.upload-area:hover {
+  border-color: #2563eb;
+  background-color: #f9fafb;
+}
+
+.upload-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 15px;
+}
+
+.upload-icon {
+  font-size: 3rem;
+  color: #9ca3af;
+}
+
+.upload-primary {
+  font-size: 1.125rem;
+  font-weight: 500;
+  color: #374151;
+  margin: 0;
+}
+
+.upload-secondary {
+  font-size: 0.875rem;
+  color: #6b7280;
+  margin: 0;
+}
+
+/* Settings */
+.settings-section {
+  margin-bottom: 20px;
+  padding-top: 20px;
+  border-top: 1px solid #e5e7eb;
+}
+
+.settings-section h4 {
+  margin-bottom: 15px;
+  color: #374151;
+  font-size: 1rem;
+  font-weight: 600;
+}
+
+.setting-item {
+  margin-bottom: 15px;
+}
+
+.setting-item label {
+  display: block;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #374151;
+  margin-bottom: 5px;
+}
+
+.slider-container {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+}
+
+.slider-container input[type="range"] {
+  flex: 1;
+  height: 6px;
+  border-radius: 3px;
+  background: #e5e7eb;
+  outline: none;
+  -webkit-appearance: none;
+}
+
+.slider-value {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #2563eb;
+  min-width: 40px;
+  text-align: right;
+}
+
+/* Buttons */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 12px 24px;
+  font-size: 1rem;
+  font-weight: 500;
+  text-decoration: none;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  min-height: 44px;
+}
+
+.btn-primary {
+  background: #2563eb;
+  color: white;
+}
+
+.btn-primary:hover {
+  background: #1d4ed8;
+}
+
+.btn-primary:disabled {
+  background: #d1d5db;
+  cursor: not-allowed;
+}
+
+.btn-full {
+  width: 100%;
+}
+
+/* Image Containers */
+.image-container {
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  overflow: hidden;
+  min-height: 250px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #f9fafb;
+}
+
+.image-container img {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+}
+
+.image-placeholder {
+  text-align: center;
+  color: #9ca3af;
+}
+
+.placeholder-icon {
+  font-size: 2rem;
+  margin-bottom: 10px;
+}
+
+/* Results */
+.annotated-section,
+.metadata-section,
+.species-section {
+  margin-bottom: 20px;
+}
+
+.annotated-section h4,
+.metadata-section h4,
+.species-section h4 {
+  margin-bottom: 15px;
+  color: #374151;
+  font-size: 1rem;
+  font-weight: 600;
+}
+
+.metadata-grid {
+  display: grid;
+  gap: 8px;
+}
+
+.metadata-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px;
+  background: #f9fafb;
+  border-radius: 6px;
+}
+
+.metadata-label {
+  font-size: 0.875rem;
+  color: #6b7280;
+}
+
+.metadata-value {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #111827;
+}
+
+.species-list {
+  display: grid;
+  gap: 8px;
+  max-height: 300px;
+  overflow-y: auto;
+}
+
+.species-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px;
+  background: white;
+  border: 1px solid #e5e7eb;
+  border-radius: 6px;
+}
+
+.species-name {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #111827;
+}
+
+.species-confidence {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: #2563eb;
+}

static/css/dashboard.css

@@ -72,37 +72,40 @@
 /* Dashboard Grid */
 .dashboard-grid {
   display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
-  gap: var(--spacing-xl);
-  margin-bottom: var(--spacing-2xl);
+  grid-template-columns: repeat(3, 1fr);
+  gap: 2rem;
+  margin-bottom: 3rem;
+  width: 100%;
 }
 
 .panel {
   min-height: 600px;
+  width: 100%;
 }
 
 /* Upload Area */
 .upload-area {
-  border: 2px dashed var(--gray-300);
-  border-radius: var(--radius-lg);
-  padding: var(--spacing-2xl);
+  border: 2px dashed #d1d5db;
+  border-radius: 12px;
+  padding: 3rem;
   text-align: center;
   cursor: pointer;
   transition: all 0.2s ease;
-  margin-bottom: var(--spacing-lg);
+  margin-bottom: 1.5rem;
   min-height: 200px;
   display: flex;
   align-items: center;
   justify-content: center;
+  background: white;
 }
 
 .upload-area:hover {
-  border-color: var(--primary-blue);
-  background-color: var(--gray-50);
+  border-color: #2563eb;
+  background-color: #f9fafb;
 }
 
 .upload-area.dragover {
-  border-color: var(--primary-blue);
+  border-color: #2563eb;
   background-color: #eff6ff;
   transform: scale(1.02);
 }

static/css/main.css

@@ -165,20 +165,21 @@ h3 {
 /* Cards */
 .card {
   background: white;
-  border: 1px solid var(--gray-200);
-  border-radius: var(--radius-lg);
-  box-shadow: var(--shadow-sm);
+  border: 1px solid #e5e7eb;
+  border-radius: 12px;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
   overflow: hidden;
+  width: 100%;
 }
 
 .card-header {
-  padding: var(--spacing-lg);
-  border-bottom: 1px solid var(--gray-200);
-  background: var(--gray-50);
+  padding: 1.5rem;
+  border-bottom: 1px solid #e5e7eb;
+  background: #f9fafb;
 }
 
 .card-body {
-  padding: var(--spacing-lg);
+  padding: 1.5rem;
 }
 
 .card-title {

templates/base.html

@@ -10,9 +10,30 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
     
+    <!-- Critical CSS (inline for immediate loading) -->
+    <style>
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+        body {
+            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+            background: #f9fafb;
+            color: #111827;
+            line-height: 1.5;
+        }
+        .container { max-width: 1200px; margin: 0 auto; padding: 0 1rem; }
+        .dashboard-grid {
+            display: grid;
+            grid-template-columns: 1fr 1fr 1fr;
+            gap: 2rem;
+            margin: 2rem 0;
+        }
+        @media (max-width: 1024px) {
+            .dashboard-grid { grid-template-columns: 1fr; }
+        }
+    </style>
+
     <!-- Custom CSS -->
-    <link rel="stylesheet" href="{{ url_for('static', path='/css/main.css') }}">
-    
+    <link rel="stylesheet" href="/static/css/main.css">
+
     {% block extra_css %}{% endblock %}
 </head>
 <body>
@@ -53,7 +74,7 @@
     </footer>
 
     <!-- JavaScript -->
-    <script src="{{ url_for('static', path='/js/main.js') }}"></script>
+    <script src="/static/js/main.js"></script>
     {% block extra_js %}{% endblock %}
 </body>
 </html>

templates/dashboard.html

@@ -3,7 +3,8 @@
 {% block title %}Dashboard - Marine Species Identification API{% endblock %}
 
 {% block extra_css %}
-<link rel="stylesheet" href="{{ url_for('static', path='/css/dashboard.css') }}">
+<link rel="stylesheet" href="/static/css/dashboard.css">
+<link rel="stylesheet" href="/static/css/dashboard-simple.css">
 {% endblock %}
 
 {% block content %}
@@ -145,5 +146,5 @@
 {% endblock %}
 
 {% block extra_js %}
-<script src="{{ url_for('static', path='/js/dashboard.js') }}"></script>
+<script src="/static/js/dashboard.js"></script>
 {% endblock %}

view_annotated_images.py

@@ -0,0 +1,177 @@
+#!/usr/bin/env python3
+"""
+Script to test the Marine Species API and save annotated images for viewing.
+"""
+
+import requests
+import base64
+import json
+import time
+from pathlib import Path
+import sys
+from PIL import Image
+import io
+
+
+def encode_image_to_base64(image_path: str) -> str:
+    """Encode an image file to base64 string."""
+    try:
+        with open(image_path, "rb") as image_file:
+            return base64.b64encode(image_file.read()).decode('utf-8')
+    except Exception as e:
+        print(f"Error encoding image {image_path}: {e}")
+        return None
+
+
+def save_base64_image(base64_string: str, output_path: str) -> bool:
+    """Save a base64 encoded image to a file."""
+    try:
+        # Decode base64 to bytes
+        image_bytes = base64.b64decode(base64_string)
+        
+        # Open with PIL and save
+        image = Image.open(io.BytesIO(image_bytes))
+        image.save(output_path)
+        
+        print(f"✅ Saved annotated image: {output_path}")
+        return True
+        
+    except Exception as e:
+        print(f"❌ Failed to save image: {e}")
+        return False
+
+
+def test_and_save_annotated_image(api_url: str, image_path: str, output_dir: str):
+    """Test API with an image and save the annotated result."""
+    
+    image_name = Path(image_path).stem
+    print(f"\n🐟 Processing {Path(image_path).name}")
+    print("-" * 50)
+    
+    # Encode input image
+    print("📷 Encoding image...")
+    image_b64 = encode_image_to_base64(image_path)
+    if not image_b64:
+        return False
+    
+    # Prepare API request
+    detection_request = {
+        "image": image_b64,
+        "confidence_threshold": 0.25,
+        "iou_threshold": 0.45,
+        "image_size": 640,
+        "return_annotated_image": True
+    }
+    
+    try:
+        print("🔍 Sending detection request...")
+        start_time = time.time()
+        
+        response = requests.post(
+            f"{api_url}/api/v1/detect",
+            json=detection_request,
+            timeout=60
+        )
+        
+        request_time = time.time() - start_time
+        print(f"⏱️  Request completed in {request_time:.2f}s")
+        
+        if response.status_code == 200:
+            result = response.json()
+            
+            detections = result.get('detections', [])
+            processing_time = result.get('processing_time', 0)
+            annotated_image_b64 = result.get('annotated_image')
+            
+            print(f"✅ SUCCESS!")
+            print(f"   Processing Time: {processing_time:.3f}s")
+            print(f"   Detections Found: {len(detections)}")
+            
+            # Show top detections
+            if detections:
+                print(f"   🎯 Top Detections:")
+                for i, detection in enumerate(detections[:3]):
+                    species = detection.get('class_name', 'Unknown')
+                    confidence = detection.get('confidence', 0)
+                    print(f"      {i+1}. {species} (confidence: {confidence:.3f})")
+            
+            # Save annotated image
+            if annotated_image_b64:
+                output_path = Path(output_dir) / f"{image_name}_annotated.jpg"
+                success = save_base64_image(annotated_image_b64, str(output_path))
+                
+                if success:
+                    print(f"   🖼️  View annotated image: {output_path}")
+                    return str(output_path)
+            else:
+                print("   ❌ No annotated image returned")
+                
+        else:
+            print(f"❌ Request failed with status {response.status_code}")
+            print(f"   Response: {response.text}")
+            
+    except Exception as e:
+        print(f"❌ Request failed: {e}")
+    
+    return None
+
+
+def main():
+    """Main function."""
+    # API URL
+    api_url = sys.argv[1] if len(sys.argv) > 1 else "https://seamo-ai-fishapi.hf.space"
+    
+    print("🐟 Marine Species API - Annotated Image Viewer")
+    print("=" * 60)
+    print(f"API URL: {api_url}")
+    
+    # Create output directory
+    output_dir = Path("annotated_results")
+    output_dir.mkdir(exist_ok=True)
+    print(f"Output directory: {output_dir.absolute()}")
+    
+    # Find test images
+    image_dir = Path("docs/gradio/images")
+    if not image_dir.exists():
+        print(f"\n❌ Image directory not found: {image_dir}")
+        return
+    
+    # Get image files
+    image_files = []
+    for ext in ['*.png', '*.jpg', '*.jpeg']:
+        image_files.extend(image_dir.glob(ext))
+    
+    if not image_files:
+        print(f"\n❌ No image files found in {image_dir}")
+        return
+    
+    print(f"\n📁 Found {len(image_files)} test images")
+    
+    # Process each image
+    saved_images = []
+    for image_path in sorted(image_files):
+        result_path = test_and_save_annotated_image(api_url, str(image_path), str(output_dir))
+        if result_path:
+            saved_images.append(result_path)
+        time.sleep(1)  # Small delay between requests
+    
+    # Summary
+    print("\n" + "=" * 60)
+    print(f"🎯 Summary:")
+    print(f"   Processed: {len(image_files)} images")
+    print(f"   Saved: {len(saved_images)} annotated images")
+    
+    if saved_images:
+        print(f"\n🖼️  Annotated images saved to:")
+        for img_path in saved_images:
+            print(f"   - {img_path}")
+        
+        print(f"\n💡 To view the images:")
+        print(f"   - Open the files in any image viewer")
+        print(f"   - Or run: open {output_dir}")  # macOS
+        print(f"   - Or run: xdg-open {output_dir}")  # Linux
+        print(f"   - Or navigate to: {output_dir.absolute()}")
+
+
+if __name__ == "__main__":
+    main()