horizontal image slider added: smooth scroll, nav buttons, responsive tiles

Dockerfile

@@ -20,10 +20,19 @@ RUN mkdir -p /models
 # Download models and sample images from seamo-ai/marina-species-v1
 RUN python -c "\
 from huggingface_hub import hf_hub_download; \
+import os; \
+# Download model files \
 hf_hub_download('seamo-ai/marina-species-v1', 'marina-benthic-33k.pt', local_dir='/models', local_dir_use_symlinks=False); \
 hf_hub_download('seamo-ai/marina-species-v1', 'marina-benthic-33k.names', local_dir='/models', local_dir_use_symlinks=False); \
-hf_hub_download('seamo-ai/marina-species-v1', 'images/red_fish.png', local_dir='/models', local_dir_use_symlinks=False); \
-hf_hub_download('seamo-ai/marina-species-v1', 'images/red_fish_2.png', local_dir='/models', local_dir_use_symlinks=False)"
+# Download all sample images \
+sample_images = ['crab.png', 'fish.png', 'fish_2.png', 'fish_3.png', 'fish_4.png', 'fish_5.png', 'flat_fish.png', 'flat_red_fish.png', 'jelly.png', 'jelly_2.png', 'jelly_3.png', 'puff.png', 'red_fish.png', 'red_fish_2.png', 'scene.png', 'scene_2.png', 'scene_3.png', 'scene_4.png', 'scene_5.png', 'scene_6.png', 'soft_coral.png', 'starfish.png', 'starfish_2.png']; \
+for img in sample_images: \
+    try: \
+        hf_hub_download('seamo-ai/marina-species-v1', f'images/{img}', local_dir='/models', local_dir_use_symlinks=False); \
+        print(f'Downloaded {img}'); \
+    except Exception as e: \
+        print(f'Failed to download {img}: {e}'); \
+"
 
 # Stage 2: Build the application
 FROM python:3.10-slim
@@ -75,8 +84,7 @@ COPY --chown=user ./static static
 
 # Copy sample images from models to static directory for web access
 RUN mkdir -p static/images/samples
-RUN cp $HOME/app/models/images/red_fish.png static/images/samples/
-RUN cp $HOME/app/models/images/red_fish_2.png static/images/samples/
+RUN if [ -d "$HOME/app/models/images" ]; then cp $HOME/app/models/images/*.png static/images/samples/ 2>/dev/null || true; fi
 
 # Create necessary directories
 RUN mkdir -p $HOME/.cache/huggingface $HOME/.cache/torch

static/css/dashboard-simple.css

@@ -380,33 +380,95 @@
   border-top: 1px solid #e5e7eb;
 }
 
-.sample-images-section h4 {
+.sample-images-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
   margin-bottom: 15px;
+}
+
+.sample-images-header h4 {
+  margin: 0;
   color: #374151;
   font-size: 1rem;
   font-weight: 600;
 }
 
-.sample-images-grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
+.slider-controls {
+  display: flex;
+  gap: 8px;
+}
+
+.slider-btn {
+  width: 32px;
+  height: 32px;
+  border: 1px solid #d1d5db;
+  background: white;
+  border-radius: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  font-size: 18px;
+  font-weight: bold;
+  color: #6b7280;
+  transition: all 0.2s ease;
+  user-select: none;
+}
+
+.slider-btn:hover {
+  border-color: #2563eb;
+  color: #2563eb;
+  background: #f8fafc;
+}
+
+.slider-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  border-color: #e5e7eb;
+  color: #9ca3af;
+}
+
+.slider-btn:disabled:hover {
+  border-color: #e5e7eb;
+  color: #9ca3af;
+  background: white;
+}
+
+/* Horizontal Slider */
+.sample-images-slider {
+  display: flex;
+  overflow-x: auto;
+  scroll-behavior: smooth;
+  scroll-snap-type: x mandatory;
   gap: 12px;
+  padding: 4px 0 8px 0;
+
+  /* Hide scrollbar */
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.sample-images-slider::-webkit-scrollbar {
+  display: none;
 }
 
 .sample-image-item {
   position: relative;
-  aspect-ratio: 1;
+  flex: 0 0 120px;
+  height: 120px;
   border-radius: 8px;
   overflow: hidden;
   cursor: pointer;
   transition: all 0.2s ease;
   border: 2px solid transparent;
+  scroll-snap-align: start;
 }
 
 .sample-image-item:hover {
   border-color: #2563eb;
-  transform: scale(1.02);
-  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+  transform: scale(1.05);
+  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
 }
 
 .sample-image-item img {
@@ -420,10 +482,24 @@
   bottom: 0;
   left: 0;
   right: 0;
-  background: linear-gradient(transparent, rgba(0,0,0,0.7));
+  background: linear-gradient(transparent, rgba(0,0,0,0.8));
   color: white;
-  padding: 8px;
-  font-size: 0.75rem;
+  padding: 6px 8px;
+  font-size: 0.7rem;
   font-weight: 500;
   text-align: center;
+  line-height: 1.2;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .sample-image-item {
+    flex: 0 0 100px;
+    height: 100px;
+  }
+
+  .sample-image-overlay {
+    font-size: 0.65rem;
+    padding: 4px 6px;
+  }
 }

static/js/dashboard.js

@@ -45,7 +45,9 @@ class MarineDashboard {
         this.deviceInfo = document.getElementById('deviceInfo');
 
         // Sample images
-        this.sampleImagesGrid = document.getElementById('sampleImagesGrid');
+        this.sampleImagesSlider = document.getElementById('sampleImagesSlider');
+        this.sliderPrev = document.getElementById('sliderPrev');
+        this.sliderNext = document.getElementById('sliderNext');
     }
 
     bindEvents() {
@@ -64,6 +66,10 @@ class MarineDashboard {
         
         // Identify button
         this.identifyBtn.addEventListener('click', this.identifySpecies.bind(this));
+
+        // Slider controls
+        this.sliderPrev.addEventListener('click', this.scrollSliderLeft.bind(this));
+        this.sliderNext.addEventListener('click', this.scrollSliderRight.bind(this));
     }
 
     // API Status Check
@@ -246,19 +252,35 @@ class MarineDashboard {
     // Load Sample Images
     loadSampleImages() {
         const sampleImages = [
-            {
-                name: 'red_fish.png',
-                url: 'https://huggingface.co/seamo-ai/marina-species-v1/resolve/main/images/red_fish.png',
-                description: 'Marine Fish Sample'
-            },
-            {
-                name: 'red_fish_2.png',
-                url: 'https://huggingface.co/seamo-ai/marina-species-v1/resolve/main/images/red_fish_2.png',
-                description: 'Deep Sea Sample'
-            }
-        ];
-
-        this.sampleImagesGrid.innerHTML = sampleImages.map(image => `
+            { name: 'crab.png', description: 'Crab Species' },
+            { name: 'fish.png', description: 'Fish Species' },
+            { name: 'fish_2.png', description: 'Fish Variety' },
+            { name: 'fish_3.png', description: 'Marine Fish' },
+            { name: 'fish_4.png', description: 'Ocean Fish' },
+            { name: 'fish_5.png', description: 'Deep Sea Fish' },
+            { name: 'flat_fish.png', description: 'Flatfish' },
+            { name: 'flat_red_fish.png', description: 'Red Flatfish' },
+            { name: 'jelly.png', description: 'Jellyfish' },
+            { name: 'jelly_2.png', description: 'Jellyfish Species' },
+            { name: 'jelly_3.png', description: 'Marine Jelly' },
+            { name: 'puff.png', description: 'Pufferfish' },
+            { name: 'red_fish.png', description: 'Red Fish' },
+            { name: 'red_fish_2.png', description: 'Red Fish Species' },
+            { name: 'scene.png', description: 'Marine Scene' },
+            { name: 'scene_2.png', description: 'Ocean Scene' },
+            { name: 'scene_3.png', description: 'Underwater Scene' },
+            { name: 'scene_4.png', description: 'Deep Sea Scene' },
+            { name: 'scene_5.png', description: 'Marine Habitat' },
+            { name: 'scene_6.png', description: 'Ocean Floor' },
+            { name: 'soft_coral.png', description: 'Soft Coral' },
+            { name: 'starfish.png', description: 'Starfish' },
+            { name: 'starfish_2.png', description: 'Sea Star' }
+        ].map(img => ({
+            ...img,
+            url: `https://huggingface.co/seamo-ai/marina-species-v1/resolve/main/images/${img.name}`
+        }));
+
+        this.sampleImagesSlider.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>
@@ -304,6 +326,23 @@ class MarineDashboard {
             window.MarineAPI.utils.showNotification('Failed to load sample image. Please try uploading your own image.', 'error');
         }
     }
+
+    // Slider Control Functions
+    scrollSliderLeft() {
+        const scrollAmount = 240; // 2 items (120px each + 12px gap)
+        this.sampleImagesSlider.scrollBy({
+            left: -scrollAmount,
+            behavior: 'smooth'
+        });
+    }
+
+    scrollSliderRight() {
+        const scrollAmount = 240; // 2 items (120px each + 12px gap)
+        this.sampleImagesSlider.scrollBy({
+            left: scrollAmount,
+            behavior: 'smooth'
+        });
+    }
 }
 
 // Make dashboard instance globally available for sample image clicks

templates/dashboard.html

@@ -102,8 +102,14 @@
 
                     <!-- Sample Images -->
                     <div class="sample-images-section">
-                        <h4>Try Sample Images</h4>
-                        <div class="sample-images-grid" id="sampleImagesGrid">
+                        <div class="sample-images-header">
+                            <h4>Try Sample Images</h4>
+                            <div class="slider-controls">
+                                <button class="slider-btn slider-btn-prev" id="sliderPrev" aria-label="Previous images">‹</button>
+                                <button class="slider-btn slider-btn-next" id="sliderNext" aria-label="Next images">›</button>
+                            </div>
+                        </div>
+                        <div class="sample-images-slider" id="sampleImagesSlider">
                             <!-- Sample images will be populated here -->
                         </div>
                     </div>