Spaces:

seamo-ai
/

fishapi

Running

App Files Files Community

kamau1 commited on Aug 2, 2025

Commit

32aa8db

verified ·

1 Parent(s): d2693ac

Redesign for a clean, professional look

Browse files

Files changed (8) hide show

app/core/config.py +2 -2
app/main.py +2 -2
static/css/dashboard-simple.css +6 -2
static/js/dashboard.js +1 -1
static/js/main.js +1 -1
templates/base.html +3 -4
templates/dashboard.html +11 -11
test_dashboard.py +145 -0

app/core/config.py CHANGED Viewed

@@ -12,9 +12,9 @@ class Settings(BaseSettings):
     # API Configuration
     API_V1_STR: str = "/api/v1"
-    PROJECT_NAME: str = "Marine Species Identification API"
     VERSION: str = "1.0.0"
-    DESCRIPTION: str = "FastAPI-based marine species identification using YOLOv5"
     # Model Configuration
     MODEL_NAME: str = "marina-benthic-33k"

     # API Configuration
     API_V1_STR: str = "/api/v1"
+    PROJECT_NAME: str = "Seamo Species API"
     VERSION: str = "1.0.0"
+    DESCRIPTION: str = "FastAPI-based species identification using YOLOv5"
     # Model Configuration
     MODEL_NAME: str = "marina-benthic-33k"

app/main.py CHANGED Viewed

@@ -96,7 +96,7 @@ app.include_router(api_router, prefix=settings.API_V1_STR)
 @app.get("/", response_class=HTMLResponse, tags=["Dashboard"])
 async def dashboard(request: Request):
     """
-    Main dashboard for marine species identification.
     Provides a web interface for testing the API.
     """
     return templates.TemplateResponse("dashboard.html", {
@@ -111,7 +111,7 @@ async def api_root():
     API root endpoint providing basic API information.
     """
     return {
-        "message": "Marine Species Identification API",
         "version": settings.VERSION,
         "docs": "/docs",
         "health": f"{settings.API_V1_STR}/health",

 @app.get("/", response_class=HTMLResponse, tags=["Dashboard"])
 async def dashboard(request: Request):
     """
+    Main dashboard for species identification.
     Provides a web interface for testing the API.
     """
     return templates.TemplateResponse("dashboard.html", {
     API root endpoint providing basic API information.
     """
     return {
+        "message": "Seamo Species API",
         "version": settings.VERSION,
         "docs": "/docs",
         "health": f"{settings.API_V1_STR}/health",

static/css/dashboard-simple.css CHANGED Viewed

@@ -139,8 +139,10 @@
 }
 .upload-icon {
-  font-size: 3rem;
   color: #9ca3af;
 }
 .upload-primary {
@@ -264,8 +266,10 @@
 }
 .placeholder-icon {
-  font-size: 2rem;
   margin-bottom: 10px;
 }
 /* Results */

 }
 .upload-icon {
+  font-size: 4rem;
   color: #9ca3af;
+  font-weight: 300;
+  line-height: 1;
 }
 .upload-primary {
 }
 .placeholder-icon {
+  font-size: 3rem;
   margin-bottom: 10px;
+  color: #d1d5db;
+  font-weight: 300;
 }
 /* Results */

static/js/dashboard.js CHANGED Viewed

@@ -136,7 +136,7 @@ class MarineDashboard {
         this.uploadArea.classList.add('has-image');
         this.uploadArea.innerHTML = `
             <div class="upload-content">
-                <div class="upload-icon">✅</div>
                 <div class="upload-text">
                     <p class="upload-primary">${file.name}</p>
                     <p class="upload-secondary">${window.MarineAPI.utils.formatFileSize(file.size)}</p>

         this.uploadArea.classList.add('has-image');
         this.uploadArea.innerHTML = `
             <div class="upload-content">
+                <div class="upload-icon">✓</div>
                 <div class="upload-text">
                     <p class="upload-primary">${file.name}</p>
                     <p class="upload-secondary">${window.MarineAPI.utils.formatFileSize(file.size)}</p>

static/js/main.js CHANGED Viewed

@@ -78,7 +78,7 @@ const utils = {
 // Initialize when DOM is loaded
 document.addEventListener('DOMContentLoaded', () => {
-    console.log('🐟 Marine Species API Dashboard Loaded');
     // Store original button text for loading states
     document.querySelectorAll('.btn').forEach(btn => {

 // Initialize when DOM is loaded
 document.addEventListener('DOMContentLoaded', () => {
+    console.log('Seamo Species API Dashboard Loaded');
     // Store original button text for loading states
     document.querySelectorAll('.btn').forEach(btn => {

templates/base.html CHANGED Viewed

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>{% block title %}Marine Species Identification API{% endblock %}</title>
     <!-- Inter Font -->
     <link rel="preconnect" href="https://fonts.googleapis.com">
@@ -41,8 +41,7 @@
     <header class="header">
         <div class="container">
             <div class="nav-brand">
-                <span class="nav-icon">🐟</span>
-                <span class="nav-title">Marine Species API</span>
             </div>
             <nav class="nav-tabs">
@@ -69,7 +68,7 @@
     <!-- Footer -->
     <footer class="footer">
         <div class="container">
-            <p>&copy; 2025 Marine Species Identification API. Powered by YOLOv5.</p>
         </div>
     </footer>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{% block title %}Seamo Species API{% endblock %}</title>
     <!-- Inter Font -->
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <header class="header">
         <div class="container">
             <div class="nav-brand">
+                <span class="nav-title">Seamo Species API</span>
             </div>
             <nav class="nav-tabs">
     <!-- Footer -->
     <footer class="footer">
         <div class="container">
+            <p>&copy; 2025 Seamo Species API. Powered by YOLOv5.</p>
         </div>
     </footer>

templates/dashboard.html CHANGED Viewed

@@ -1,6 +1,6 @@
 {% extends "base.html" %}
-{% block title %}Dashboard - Marine Species Identification API{% endblock %}
 {% block extra_css %}
 <link rel="stylesheet" href="/static/css/dashboard.css">
@@ -11,9 +11,9 @@
 <div class="dashboard">
     <!-- Page Header -->
     <div class="page-header">
-        <h1>🌊 Marine Species Identification</h1>
         <p class="page-description">
-            Upload an image to identify marine species using our advanced YOLOv5 model.
             Supports 691+ species including fish, corals, sea stars, and more.
         </p>
     </div>
@@ -33,13 +33,13 @@
         <div class="panel input-panel">
             <div class="card">
                 <div class="card-header">
-                    <h3 class="card-title">📤 Upload Image</h3>
                 </div>
                 <div class="card-body">
                     <!-- Upload Area -->
                     <div class="upload-area" id="uploadArea">
                         <div class="upload-content">
-                            <div class="upload-icon">📷</div>
                             <div class="upload-text">
                                 <p class="upload-primary">Drag image here or click to browse</p>
                                 <p class="upload-secondary">PNG, JPG, JPEG up to 10MB</p>
@@ -50,7 +50,7 @@
                     <!-- Settings -->
                     <div class="settings-section">
-                        <h4>⚙️ Detection Settings</h4>
                         <div class="settings-grid">
                             <div class="setting-item">
                                 <label for="confidenceSlider">Confidence Threshold</label>
@@ -71,7 +71,7 @@
                     <!-- Action Button -->
                     <button class="btn btn-primary btn-full" id="identifyBtn" disabled>
-                        🔍 Identify Marine Life
                     </button>
                 </div>
             </div>
@@ -81,12 +81,12 @@
         <div class="panel image-panel">
             <div class="card">
                 <div class="card-header">
-                    <h3 class="card-title">🖼️ Original Image</h3>
                 </div>
                 <div class="card-body">
                     <div class="image-container" id="originalImageContainer">
                         <div class="image-placeholder">
-                            <div class="placeholder-icon">🖼️</div>
                             <p>Upload an image to see it here</p>
                         </div>
                     </div>
@@ -98,7 +98,7 @@
         <div class="panel results-panel">
             <div class="card">
                 <div class="card-header">
-                    <h3 class="card-title">🎯 Detection Results</h3>
                 </div>
                 <div class="card-body">
                     <!-- Annotated Image -->
@@ -106,7 +106,7 @@
                         <h4>Annotated Image</h4>
                         <div class="image-container" id="annotatedImageContainer">
                             <div class="image-placeholder">
-                                <div class="placeholder-icon">🔍</div>
                                 <p>Annotated results will appear here</p>
                             </div>
                         </div>

 {% extends "base.html" %}
+{% block title %}Dashboard - Seamo Species API{% endblock %}
 {% block extra_css %}
 <link rel="stylesheet" href="/static/css/dashboard.css">
 <div class="dashboard">
     <!-- Page Header -->
     <div class="page-header">
+        <h1>Species Identification</h1>
         <p class="page-description">
+            Upload an image to identify marine species using our advanced YOLOv5 model.
             Supports 691+ species including fish, corals, sea stars, and more.
         </p>
     </div>
         <div class="panel input-panel">
             <div class="card">
                 <div class="card-header">
+                    <h3 class="card-title">Upload Image</h3>
                 </div>
                 <div class="card-body">
                     <!-- Upload Area -->
                     <div class="upload-area" id="uploadArea">
                         <div class="upload-content">
+                            <div class="upload-icon">+</div>
                             <div class="upload-text">
                                 <p class="upload-primary">Drag image here or click to browse</p>
                                 <p class="upload-secondary">PNG, JPG, JPEG up to 10MB</p>
                     <!-- Settings -->
                     <div class="settings-section">
+                        <h4>Detection Settings</h4>
                         <div class="settings-grid">
                             <div class="setting-item">
                                 <label for="confidenceSlider">Confidence Threshold</label>
                     <!-- Action Button -->
                     <button class="btn btn-primary btn-full" id="identifyBtn" disabled>
+                        Identify Species
                     </button>
                 </div>
             </div>
         <div class="panel image-panel">
             <div class="card">
                 <div class="card-header">
+                    <h3 class="card-title">Original Image</h3>
                 </div>
                 <div class="card-body">
                     <div class="image-container" id="originalImageContainer">
                         <div class="image-placeholder">
+                            <div class="placeholder-icon">□</div>
                             <p>Upload an image to see it here</p>
                         </div>
                     </div>
         <div class="panel results-panel">
             <div class="card">
                 <div class="card-header">
+                    <h3 class="card-title">Detection Results</h3>
                 </div>
                 <div class="card-body">
                     <!-- Annotated Image -->
                         <h4>Annotated Image</h4>
                         <div class="image-container" id="annotatedImageContainer">
                             <div class="image-placeholder">
+                                <div class="placeholder-icon">□</div>
                                 <p>Annotated results will appear here</p>
                             </div>
                         </div>

test_dashboard.py ADDED Viewed

	@@ -0,0 +1,145 @@

+#!/usr/bin/env python3
+"""
+Test script to verify the dashboard implementation works correctly.
+"""
+import requests
+import time
+import sys
+def test_dashboard_endpoints(base_url="http://localhost:7860"):
+    """Test all dashboard-related endpoints."""
+    print("Testing Seamo Species Dashboard")
+    print("=" * 50)
+    print(f"Base URL: {base_url}")
+    tests = [
+        {
+            "name": "Dashboard HTML",
+            "url": f"{base_url}/",
+            "expected_content": ["Seamo Species", "Upload Image", "dashboard.js"]
+        },
+        {
+            "name": "Static CSS",
+            "url": f"{base_url}/static/css/main.css",
+            "expected_content": [":root", "--primary-blue", ".btn"]
+        },
+        {
+            "name": "Static JS",
+            "url": f"{base_url}/static/js/main.js",
+            "expected_content": ["MarineAPI", "utils", "showNotification"]
+        },
+        {
+            "name": "API Health (existing)",
+            "url": f"{base_url}/api/v1/health",
+            "expected_json": ["status", "model_loaded"]
+        },
+        {
+            "name": "API Info (existing)",
+            "url": f"{base_url}/api/v1/info",
+            "expected_json": ["name", "version", "model_info"]
+        }
+    ]
+    results = []
+    for test in tests:
+        print(f"\n🧪 Testing: {test['name']}")
+        print(f"   URL: {test['url']}")
+        try:
+            response = requests.get(test['url'], timeout=10)
+            if response.status_code == 200:
+                print(f"   ✅ Status: {response.status_code}")
+                # Check content
+                if 'expected_content' in test:
+                    content = response.text
+                    missing = []
+                    for expected in test['expected_content']:
+                        if expected not in content:
+                            missing.append(expected)
+                    if missing:
+                        print(f"   ❌ Missing content: {missing}")
+                        results.append(False)
+                    else:
+                        print(f"   ✅ Content check passed")
+                        results.append(True)
+                elif 'expected_json' in test:
+                    try:
+                        json_data = response.json()
+                        missing = []
+                        for expected in test['expected_json']:
+                            if expected not in json_data:
+                                missing.append(expected)
+                        if missing:
+                            print(f"   ❌ Missing JSON fields: {missing}")
+                            results.append(False)
+                        else:
+                            print(f"   ✅ JSON structure check passed")
+                            results.append(True)
+                    except Exception as e:
+                        print(f"   ❌ JSON parsing failed: {e}")
+                        results.append(False)
+                else:
+                    results.append(True)
+            else:
+                print(f"   ❌ Status: {response.status_code}")
+                results.append(False)
+        except requests.exceptions.ConnectionError:
+            print(f"   ❌ Connection failed - is the server running?")
+            results.append(False)
+        except Exception as e:
+            print(f"   ❌ Error: {e}")
+            results.append(False)
+    # Summary
+    print("\n" + "=" * 50)
+    print("🎯 Test Summary:")
+    passed = sum(results)
+    total = len(results)
+    print(f"   Passed: {passed}/{total}")
+    print(f"   Success Rate: {(passed/total)*100:.1f}%")
+    if passed == total:
+        print("All tests passed! Dashboard is ready.")
+        return True
+    else:
+        print("Some tests failed. Check the implementation.")
+        return False
+def main():
+    """Main test function."""
+    # Test with local server first
+    print("Testing local development server...")
+    local_success = test_dashboard_endpoints("http://localhost:7860")
+    if len(sys.argv) > 1:
+        # Test with provided URL
+        test_url = sys.argv[1]
+        print(f"\nTesting provided URL: {test_url}")
+        remote_success = test_dashboard_endpoints(test_url)
+        if remote_success:
+            print(f"\nDashboard is live at: {test_url}")
+        else:
+            print(f"\nDashboard has issues at: {test_url}")
+    print("\nNext steps:")
+    print("   1. Start the API: python start_api.py")
+    print("   2. Open browser: http://localhost:7860")
+    print("   3. Test with marine species images")
+    print("   4. Deploy to production")
+if __name__ == "__main__":
+    main()