Improve dashboard UX: layout, visuals, functionality

static/css/dashboard-simple.css

@@ -131,6 +131,14 @@
   background-color: #f9fafb;
 }
 
+.upload-area.has-image {
+  border-style: solid;
+  border-color: #059669;
+  background-color: #f9fafb;
+  padding: 0;
+  height: 200px;
+}
+
 .upload-content {
   display: flex;
   flex-direction: column;
@@ -160,18 +168,56 @@
 
 /* Settings */
 .settings-section {
+  margin-bottom: 25px;
+}
+
+.settings-section h4 {
+  margin-bottom: 15px;
+  color: #374151;
+  font-size: 1rem;
+  font-weight: 600;
+}
+
+/* Model Details Section */
+.model-details-section {
   margin-bottom: 20px;
   padding-top: 20px;
   border-top: 1px solid #e5e7eb;
 }
 
-.settings-section h4 {
+.model-details-section h4 {
   margin-bottom: 15px;
   color: #374151;
   font-size: 1rem;
   font-weight: 600;
 }
 
+.model-details-grid {
+  display: grid;
+  gap: 10px;
+}
+
+.detail-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 12px;
+  background: #f9fafb;
+  border-radius: 6px;
+}
+
+.detail-label {
+  font-size: 0.875rem;
+  color: #6b7280;
+  font-weight: 500;
+}
+
+.detail-value {
+  font-size: 0.875rem;
+  color: #111827;
+  font-weight: 600;
+}
+
 .setting-item {
   margin-bottom: 15px;
 }
@@ -240,6 +286,7 @@
 
 .btn-full {
   width: 100%;
+  margin-bottom: 25px;
 }
 
 /* Image Containers */
@@ -341,3 +388,58 @@
   font-weight: 600;
   color: #2563eb;
 }
+
+/* Sample Images Section */
+.sample-images-section {
+  margin-top: 25px;
+  padding-top: 20px;
+  border-top: 1px solid #e5e7eb;
+}
+
+.sample-images-section h4 {
+  margin-bottom: 15px;
+  color: #374151;
+  font-size: 1rem;
+  font-weight: 600;
+}
+
+.sample-images-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+}
+
+.sample-image-item {
+  position: relative;
+  aspect-ratio: 1;
+  border-radius: 8px;
+  overflow: hidden;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  border: 2px solid transparent;
+}
+
+.sample-image-item:hover {
+  border-color: #2563eb;
+  transform: scale(1.02);
+  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+}
+
+.sample-image-item img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.sample-image-overlay {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: linear-gradient(transparent, rgba(0,0,0,0.7));
+  color: white;
+  padding: 8px;
+  font-size: 0.75rem;
+  font-weight: 500;
+  text-align: center;
+}

static/js/dashboard.js

@@ -9,6 +9,7 @@ class MarineDashboard {
         this.initializeElements();
         this.bindEvents();
         this.checkAPIStatus();
+        this.loadSampleImages();
     }
 
     initializeElements() {
@@ -24,7 +25,6 @@ class MarineDashboard {
         this.iouValue = document.getElementById('iouValue');
         
         // Display elements
-        this.originalImageContainer = document.getElementById('originalImageContainer');
         this.annotatedImageContainer = document.getElementById('annotatedImageContainer');
         
         // Results elements
@@ -39,6 +39,13 @@ class MarineDashboard {
         this.statusDot = document.getElementById('statusDot');
         this.statusText = document.getElementById('statusText');
         this.modelInfo = document.getElementById('modelInfo');
+
+        // Model details elements
+        this.totalSpecies = document.getElementById('totalSpecies');
+        this.deviceInfo = document.getElementById('deviceInfo');
+
+        // Sample images
+        this.sampleImagesGrid = document.getElementById('sampleImagesGrid');
     }
 
     bindEvents() {
@@ -71,6 +78,8 @@ class MarineDashboard {
                 
                 if (data.model_info) {
                     this.modelInfo.textContent = `Model: ${data.model_info.model_name} (${data.model_info.total_classes} species)`;
+                    this.totalSpecies.textContent = data.model_info.total_classes;
+                    this.deviceInfo.textContent = data.model_info.device;
                 }
             } else {
                 this.statusDot.className = 'status-dot error';
@@ -129,29 +138,20 @@ class MarineDashboard {
         }
 
         this.currentImageFile = file;
-        this.displayOriginalImage(file);
+        this.displayUploadedImage(file);
         this.identifyBtn.disabled = false;
         
         // Update upload area
         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>
-                </div>
-            </div>
-        `;
     }
 
-    // Display Original Image
-    displayOriginalImage(file) {
+    // Display Uploaded Image in Upload Area
+    displayUploadedImage(file) {
         const reader = new FileReader();
         reader.onload = (e) => {
             this.currentImage = e.target.result;
-            this.originalImageContainer.innerHTML = `
-                <img src="${e.target.result}" alt="Original image" />
+            this.uploadArea.innerHTML = `
+                <img src="${e.target.result}" alt="Uploaded image" style="width: 100%; height: 100%; object-fit: cover; border-radius: 8px;" />
             `;
         };
         reader.readAsDataURL(file);
@@ -242,9 +242,58 @@ class MarineDashboard {
             this.speciesSection.style.display = 'block';
         }
     }
+
+    // Load Sample Images
+    loadSampleImages() {
+        const sampleImages = [
+            {
+                name: 'red_fish.png',
+                url: 'https://huggingface.co/seamo-ai/marina-species-v1/resolve/main/red_fish.png',
+                description: 'Marine Fish Sample'
+            },
+            {
+                name: 'red_fish_2.png',
+                url: 'https://huggingface.co/seamo-ai/marina-species-v1/resolve/main/red_fish_2.png',
+                description: 'Deep Sea Sample'
+            }
+        ];
+
+        this.sampleImagesGrid.innerHTML = sampleImages.map(image => `
+            <div class="sample-image-item" onclick="dashboard.loadSampleImage('${image.url}', '${image.name}')">
+                <img src="${image.url}" alt="${image.description}" loading="lazy" />
+                <div class="sample-image-overlay">${image.description}</div>
+            </div>
+        `).join('');
+    }
+
+    // Load Sample Image
+    async loadSampleImage(imageUrl, imageName) {
+        try {
+            // Show loading state
+            window.MarineAPI.utils.showNotification('Loading sample image...', 'info');
+
+            // Fetch the image
+            const response = await fetch(imageUrl);
+            const blob = await response.blob();
+
+            // Convert to File object
+            const file = new File([blob], imageName, { type: blob.type });
+
+            // Process the file
+            this.processFile(file);
+
+            window.MarineAPI.utils.showNotification('Sample image loaded successfully!', 'success');
+        } catch (error) {
+            console.error('Failed to load sample image:', error);
+            window.MarineAPI.utils.showNotification('Failed to load sample image', 'error');
+        }
+    }
 }
 
+// Make dashboard instance globally available for sample image clicks
+let dashboard;
+
 // Initialize dashboard when DOM is loaded
 document.addEventListener('DOMContentLoaded', () => {
-    new MarineDashboard();
+    dashboard = new MarineDashboard();
 });

templates/dashboard.html

@@ -12,10 +12,6 @@
     <!-- 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>
 
     <!-- API Status Banner -->
@@ -29,26 +25,14 @@
 
     <!-- Main Dashboard Grid -->
     <div class="dashboard-grid">
-        <!-- Input Panel -->
-        <div class="panel input-panel">
+        <!-- Model Information Panel -->
+        <div class="panel model-panel">
             <div class="card">
                 <div class="card-header">
-                    <h3 class="card-title">Upload Image</h3>
+                    <h3 class="card-title">Model Information</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>
-                            </div>
-                        </div>
-                        <input type="file" id="fileInput" accept="image/*" hidden>
-                    </div>
-
-                    <!-- Settings -->
+                    <!-- Detection Settings -->
                     <div class="settings-section">
                         <h4>Detection Settings</h4>
                         <div class="settings-grid">
@@ -69,25 +53,61 @@
                         </div>
                     </div>
 
-                    <!-- Action Button -->
-                    <button class="btn btn-primary btn-full" id="identifyBtn" disabled>
-                        Identify Species
-                    </button>
+                    <!-- Model Details -->
+                    <div class="model-details-section">
+                        <h4>Model Details</h4>
+                        <div class="model-details-grid">
+                            <div class="detail-item">
+                                <span class="detail-label">Model Type</span>
+                                <span class="detail-value" id="modelType">YOLOv5</span>
+                            </div>
+                            <div class="detail-item">
+                                <span class="detail-label">Total Species</span>
+                                <span class="detail-value" id="totalSpecies">-</span>
+                            </div>
+                            <div class="detail-item">
+                                <span class="detail-label">Device</span>
+                                <span class="detail-value" id="deviceInfo">-</span>
+                            </div>
+                            <div class="detail-item">
+                                <span class="detail-label">Model Size</span>
+                                <span class="detail-value" id="modelSize">33k Images</span>
+                            </div>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>
 
-        <!-- Original Image Panel -->
-        <div class="panel image-panel">
+        <!-- Upload & Test Panel -->
+        <div class="panel upload-panel">
             <div class="card">
                 <div class="card-header">
-                    <h3 class="card-title">Original Image</h3>
+                    <h3 class="card-title">Upload & Test</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>
+                    <!-- 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>
+                            </div>
+                        </div>
+                        <input type="file" id="fileInput" accept="image/*" hidden>
+                    </div>
+
+                    <!-- Action Button -->
+                    <button class="btn btn-primary btn-full" id="identifyBtn" disabled>
+                        Identify Species
+                    </button>
+
+                    <!-- Sample Images -->
+                    <div class="sample-images-section">
+                        <h4>Try Sample Images</h4>
+                        <div class="sample-images-grid" id="sampleImagesGrid">
+                            <!-- Sample images will be populated here -->
                         </div>
                     </div>
                 </div>