From cef7b6870c84b6f4773c23cc79d77fb06b753466 Mon Sep 17 00:00:00 2001
From: Seyed Yahya Shirazi <shirazi@ieee.org>
Date: Mon, 24 Nov 2025 13:06:26 -0800
Subject: [PATCH 1/5] Update frontend to AGI theme and fix image loading

- Fix .gitignore to track image-list.json (was causing 404 on deploy)
- Update color scheme from purple to AGI brand colors (teal, orange)
- Add AGI color palette to tailwind.config.js
- Convert to light theme with warm off-white background
- Replace Brain icon with AGI logo in header
- Update all components (page, ThumbnailRibbon, AnnotationViewer)
- Improve accessibility with proper contrast ratios
---
 .gitignore                                   |    3 +-
 frontend/app/components/AnnotationViewer.tsx |   76 +-
 frontend/app/components/ThumbnailRibbon.tsx  |   46 +-
 frontend/app/page.tsx                        |   88 +-
 frontend/public/image-list.json              | 1002 ++++++++++++++++++
 frontend/tailwind.config.js                  |   41 +
 6 files changed, 1151 insertions(+), 105 deletions(-)
 create mode 100644 frontend/public/image-list.json

diff --git a/.gitignore b/.gitignore
index d4b1940..c320b3e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -112,11 +112,12 @@ ehthumbs.db
 test_outputs/
 test_results/
 
-# Frontend public assets (copied for deployment)
+# Frontend public assets (copied for deployment, except essentials)
 frontend/public/*
 !frontend/public/AGI-square.svg
 !frontend/public/AGI-square.png
 !frontend/public/favicon.ico
+!frontend/public/image-list.json
 
 # Image files (but keep README, and downsampled)
 images/original/*.png
diff --git a/frontend/app/components/AnnotationViewer.tsx b/frontend/app/components/AnnotationViewer.tsx
index 9eb7c89..335db87 100644
--- a/frontend/app/components/AnnotationViewer.tsx
+++ b/frontend/app/components/AnnotationViewer.tsx
@@ -13,10 +13,10 @@ export default function AnnotationViewer({ annotation }: AnnotationViewerProps)
   const [viewMode, setViewMode] = useState<'text' | 'json'>('text')
 
   const handleCopy = () => {
-    const textToCopy = viewMode === 'json' 
+    const textToCopy = viewMode === 'json'
       ? JSON.stringify(annotation.response_data || annotation.response, null, 2)
       : annotation.response
-    
+
     navigator.clipboard.writeText(textToCopy)
     setCopied(true)
     setTimeout(() => setCopied(false), 2000)
@@ -34,8 +34,8 @@ export default function AnnotationViewer({ annotation }: AnnotationViewerProps)
       return (
         <div className="space-y-3">
           {data.map((item, index) => (
-            <div key={index} className="bg-gray-800/30 rounded-lg p-3 border border-purple-500/10">
-              <div className="text-xs text-purple-400 mb-2">Item {index + 1}</div>
+            <div key={index} className="bg-agi-teal/5 rounded-lg p-3 border border-agi-teal/10">
+              <div className="text-xs text-agi-orange mb-2">Item {index + 1}</div>
               {renderJsonData(item)}
             </div>
           ))}
@@ -49,15 +49,15 @@ export default function AnnotationViewer({ annotation }: AnnotationViewerProps)
         <div className="space-y-2">
           {Object.entries(data).map(([key, value]) => (
             <div key={key} className="flex flex-col gap-1">
-              <span className="text-xs text-purple-400 font-medium">
+              <span className="text-xs text-agi-teal font-medium">
                 {key.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase())}:
               </span>
               {typeof value === 'object' ? (
-                <div className="ml-3 border-l-2 border-purple-500/20 pl-3">
+                <div className="ml-3 border-l-2 border-agi-teal/20 pl-3">
                   {renderJsonData(value)}
                 </div>
               ) : (
-                <span className="text-sm text-gray-300 ml-3">
+                <span className="text-sm text-agi-teal-800 ml-3">
                   {String(value)}
                 </span>
               )}
@@ -68,15 +68,15 @@ export default function AnnotationViewer({ annotation }: AnnotationViewerProps)
     }
 
     // Primitive value
-    return <span className="text-sm text-gray-300">{String(data)}</span>
+    return <span className="text-sm text-agi-teal-800">{String(data)}</span>
   }
 
   return (
     <div className="space-y-4">
       {/* Prompt Text */}
-      <div className="bg-gray-800/30 rounded-lg p-3 border border-purple-500/10">
-        <div className="text-xs text-purple-400 mb-1">Prompt</div>
-        <div className="text-sm text-gray-300 leading-relaxed">
+      <div className="bg-agi-teal/5 rounded-lg p-3 border border-agi-teal/10">
+        <div className="text-xs text-agi-orange mb-1">Prompt</div>
+        <div className="text-sm text-agi-teal-800 leading-relaxed">
           {annotation.prompt_text}
         </div>
       </div>
@@ -88,8 +88,8 @@ export default function AnnotationViewer({ annotation }: AnnotationViewerProps)
             onClick={() => setViewMode('text')}
             className={`px-3 py-1.5 rounded-lg text-sm flex items-center gap-1.5 transition-all ${
               viewMode === 'text'
-                ? 'bg-purple-500/20 text-purple-300 border border-purple-500/30'
-                : 'bg-gray-800/30 text-gray-400 hover:bg-gray-800/50 border border-gray-700/30'
+                ? 'bg-agi-teal/10 text-agi-teal border border-agi-teal/30'
+                : 'bg-stone-100 text-agi-teal-600 hover:bg-stone-200 border border-stone-200'
             }`}
           >
             <FileText className="w-3.5 h-3.5" />
@@ -99,8 +99,8 @@ export default function AnnotationViewer({ annotation }: AnnotationViewerProps)
             onClick={() => setViewMode('json')}
             className={`px-3 py-1.5 rounded-lg text-sm flex items-center gap-1.5 transition-all ${
               viewMode === 'json'
-                ? 'bg-purple-500/20 text-purple-300 border border-purple-500/30'
-                : 'bg-gray-800/30 text-gray-400 hover:bg-gray-800/50 border border-gray-700/30'
+                ? 'bg-agi-teal/10 text-agi-teal border border-agi-teal/30'
+                : 'bg-stone-100 text-agi-teal-600 hover:bg-stone-200 border border-stone-200'
             }`}
           >
             <FileJson className="w-3.5 h-3.5" />
@@ -113,19 +113,19 @@ export default function AnnotationViewer({ annotation }: AnnotationViewerProps)
       <div className="relative">
         <button
           onClick={handleCopy}
-          className="absolute top-2 right-2 p-2 rounded-lg bg-gray-800/50 hover:bg-gray-800/70 transition-all z-10"
+          className="absolute top-2 right-2 p-2 rounded-lg bg-stone-100 hover:bg-agi-teal/10 transition-all z-10"
           aria-label="Copy to clipboard"
         >
           {copied ? (
-            <Check className="w-4 h-4 text-green-400" />
+            <Check className="w-4 h-4 text-green-600" />
           ) : (
-            <Copy className="w-4 h-4 text-gray-400" />
+            <Copy className="w-4 h-4 text-agi-teal-600" />
           )}
         </button>
 
-        <div className="bg-gray-800/30 rounded-lg p-4 pr-12 max-h-[400px] overflow-y-auto border border-purple-500/10">
+        <div className="bg-agi-teal/5 rounded-lg p-4 pr-12 max-h-[400px] overflow-y-auto border border-agi-teal/10">
           {viewMode === 'text' ? (
-            <div className="whitespace-pre-wrap text-sm text-gray-300 leading-relaxed">
+            <div className="whitespace-pre-wrap text-sm text-agi-teal-800 leading-relaxed">
               {annotation.response}
             </div>
           ) : hasJsonData ? (
@@ -133,7 +133,7 @@ export default function AnnotationViewer({ annotation }: AnnotationViewerProps)
               {renderJsonData(annotation.response_data)}
             </div>
           ) : (
-            <pre className="text-xs overflow-x-auto text-gray-300">
+            <pre className="text-xs overflow-x-auto text-agi-teal-800">
               <code>{JSON.stringify(annotation.response, null, 2)}</code>
             </pre>
           )}
@@ -144,44 +144,44 @@ export default function AnnotationViewer({ annotation }: AnnotationViewerProps)
       {(annotation.token_metrics || annotation.performance_metrics) && (
         <div className="grid grid-cols-2 gap-3">
           {annotation.token_metrics && (
-            <div className="bg-gray-800/30 rounded-lg p-3 border border-purple-500/10">
+            <div className="bg-agi-teal/5 rounded-lg p-3 border border-agi-teal/10">
               <div className="flex items-center gap-2 mb-2">
-                <Activity className="w-4 h-4 text-purple-400" />
-                <span className="text-xs font-medium text-gray-400">Token Usage</span>
+                <Activity className="w-4 h-4 text-agi-orange" />
+                <span className="text-xs font-medium text-agi-teal-600">Token Usage</span>
               </div>
               <div className="space-y-1">
                 <div className="flex justify-between text-xs">
-                  <span className="text-gray-500">Input:</span>
-                  <span className="text-gray-300">{annotation.token_metrics.input_tokens}</span>
+                  <span className="text-agi-teal-500">Input:</span>
+                  <span className="text-agi-teal-800">{annotation.token_metrics.input_tokens}</span>
                 </div>
                 <div className="flex justify-between text-xs">
-                  <span className="text-gray-500">Output:</span>
-                  <span className="text-gray-300">{annotation.token_metrics.output_tokens}</span>
+                  <span className="text-agi-teal-500">Output:</span>
+                  <span className="text-agi-teal-800">{annotation.token_metrics.output_tokens}</span>
                 </div>
                 <div className="flex justify-between text-xs font-medium">
-                  <span className="text-gray-500">Total:</span>
-                  <span className="text-purple-300">{annotation.token_metrics.total_tokens}</span>
+                  <span className="text-agi-teal-500">Total:</span>
+                  <span className="text-agi-teal">{annotation.token_metrics.total_tokens}</span>
                 </div>
               </div>
             </div>
           )}
 
           {annotation.performance_metrics && (
-            <div className="bg-gray-800/30 rounded-lg p-3 border border-purple-500/10">
+            <div className="bg-agi-teal/5 rounded-lg p-3 border border-agi-teal/10">
               <div className="flex items-center gap-2 mb-2">
-                <Zap className="w-4 h-4 text-purple-400" />
-                <span className="text-xs font-medium text-gray-400">Performance</span>
+                <Zap className="w-4 h-4 text-agi-orange" />
+                <span className="text-xs font-medium text-agi-teal-600">Performance</span>
               </div>
               <div className="space-y-1">
                 <div className="flex justify-between text-xs">
-                  <span className="text-gray-500">Speed:</span>
-                  <span className="text-gray-300">
+                  <span className="text-agi-teal-500">Speed:</span>
+                  <span className="text-agi-teal-800">
                     {annotation.performance_metrics.tokens_per_second.toFixed(1)} t/s
                   </span>
                 </div>
                 <div className="flex justify-between text-xs">
-                  <span className="text-gray-500">Time:</span>
-                  <span className="text-gray-300">
+                  <span className="text-agi-teal-500">Time:</span>
+                  <span className="text-agi-teal-800">
                     {(annotation.performance_metrics.total_duration_ms / 1000).toFixed(2)}s
                   </span>
                 </div>
@@ -192,4 +192,4 @@ export default function AnnotationViewer({ annotation }: AnnotationViewerProps)
       )}
     </div>
   )
-}
\ No newline at end of file
+}
diff --git a/frontend/app/components/ThumbnailRibbon.tsx b/frontend/app/components/ThumbnailRibbon.tsx
index 32a79ec..33398a4 100644
--- a/frontend/app/components/ThumbnailRibbon.tsx
+++ b/frontend/app/components/ThumbnailRibbon.tsx
@@ -19,11 +19,11 @@ export default function ThumbnailRibbon({ images, selectedIndex, onSelect }: Thu
     if (thumbnailRefs.current[selectedIndex] && scrollContainerRef.current) {
       const thumbnail = thumbnailRefs.current[selectedIndex]
       const container = scrollContainerRef.current
-      
+
       if (thumbnail) {
         const containerWidth = container.clientWidth
         const scrollLeft = thumbnail.offsetLeft - containerWidth / 2 + thumbnail.clientWidth / 2
-        
+
         container.scrollTo({
           left: scrollLeft,
           behavior: 'smooth'
@@ -59,15 +59,15 @@ export default function ThumbnailRibbon({ images, selectedIndex, onSelect }: Thu
   }
 
   return (
-    <div className="bg-black/40 backdrop-blur-md rounded-xl border border-purple-500/20 p-2 md:p-4">
+    <div className="bg-white/80 backdrop-blur-md rounded-xl border border-agi-teal/10 shadow-sm p-2 md:p-4">
       <div className="relative flex items-center">
         {/* Left scroll button */}
         <button
           onClick={scrollLeft}
-          className="absolute left-2 z-10 bg-gray-800/80 hover:bg-gray-700/80 backdrop-blur-sm rounded-full p-2 shadow-lg border border-purple-500/20 transition-all hover:scale-110"
+          className="absolute left-2 z-10 bg-white/90 hover:bg-agi-teal/10 backdrop-blur-sm rounded-full p-2 shadow-md border border-agi-teal/20 transition-all hover:scale-110"
           aria-label="Scroll left"
         >
-          <ChevronLeft className="w-5 h-5 text-purple-300" />
+          <ChevronLeft className="w-5 h-5 text-agi-teal" />
         </button>
 
         {/* Thumbnail container */}
@@ -78,13 +78,13 @@ export default function ThumbnailRibbon({ images, selectedIndex, onSelect }: Thu
           tabIndex={0}
           style={{
             scrollbarWidth: 'thin',
-            scrollbarColor: 'rgb(147 51 234 / 0.3) transparent'
+            scrollbarColor: 'rgba(24, 74, 61, 0.3) transparent'
           }}
         >
           {images.map((image, index) => {
             // Extract the image number for display
             const imageNumber = image.id.match(/shared(\d+)/)?.[1] || String(index + 1)
-            
+
             return (
               <button
                 key={image.id}
@@ -95,14 +95,14 @@ export default function ThumbnailRibbon({ images, selectedIndex, onSelect }: Thu
                 className={`
                   relative flex-shrink-0 rounded-lg overflow-hidden
                   transition-all duration-300 transform
-                  ${selectedIndex === index 
-                    ? 'ring-2 ring-purple-400 ring-offset-2 ring-offset-transparent scale-110 shadow-xl shadow-purple-500/30' 
-                    : 'hover:scale-105 hover:shadow-lg hover:shadow-purple-500/20'
+                  ${selectedIndex === index
+                    ? 'ring-2 ring-agi-teal ring-offset-2 ring-offset-transparent scale-110 shadow-xl shadow-agi-teal/20'
+                    : 'hover:scale-105 hover:shadow-lg hover:shadow-agi-teal/10'
                   }
                 `}
                 aria-label={`Select image ${imageNumber}`}
               >
-                <div className={`relative ${selectedIndex === index ? 'brightness-100' : 'brightness-75'}`}>
+                <div className={`relative ${selectedIndex === index ? 'brightness-100' : 'brightness-90'}`}>
                   <img
                     src={image.thumbnailPath}
                     alt={`Thumbnail ${imageNumber}`}
@@ -110,15 +110,15 @@ export default function ThumbnailRibbon({ images, selectedIndex, onSelect }: Thu
                     loading="lazy"
                   />
                   {/* Gradient overlay */}
-                  <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent" />
-                  
+                  <div className="absolute inset-0 bg-gradient-to-t from-black/50 via-transparent to-transparent" />
+
                   {/* Image number badge */}
                   <div className={`absolute bottom-1 left-1 right-1 flex items-center justify-center`}>
                     <span className={`
                       px-2 py-0.5 rounded-full text-xs font-medium
-                      ${selectedIndex === index 
-                        ? 'bg-purple-500/80 text-white' 
-                        : 'bg-black/60 text-gray-300'
+                      ${selectedIndex === index
+                        ? 'bg-agi-teal text-white'
+                        : 'bg-white/80 text-agi-teal-700'
                       }
                       backdrop-blur-sm
                     `}>
@@ -134,13 +134,13 @@ export default function ThumbnailRibbon({ images, selectedIndex, onSelect }: Thu
         {/* Right scroll button */}
         <button
           onClick={scrollRight}
-          className="absolute right-2 z-10 bg-gray-800/80 hover:bg-gray-700/80 backdrop-blur-sm rounded-full p-2 shadow-lg border border-purple-500/20 transition-all hover:scale-110"
+          className="absolute right-2 z-10 bg-white/90 hover:bg-agi-teal/10 backdrop-blur-sm rounded-full p-2 shadow-md border border-agi-teal/20 transition-all hover:scale-110"
           aria-label="Scroll right"
         >
-          <ChevronRight className="w-5 h-5 text-purple-300" />
+          <ChevronRight className="w-5 h-5 text-agi-teal" />
         </button>
       </div>
-      
+
       {/* Progress indicator */}
       <div className="mt-3 flex items-center justify-center gap-2">
         <div className="flex gap-1">
@@ -149,16 +149,16 @@ export default function ThumbnailRibbon({ images, selectedIndex, onSelect }: Thu
               key={i}
               className={`h-1 rounded-full transition-all ${
                 Math.floor(selectedIndex / 10) === i
-                  ? 'w-8 bg-gradient-to-r from-purple-400 to-pink-400'
-                  : 'w-2 bg-gray-600'
+                  ? 'w-8 bg-gradient-to-r from-agi-teal to-agi-orange'
+                  : 'w-2 bg-agi-teal/20'
               }`}
             />
           ))}
         </div>
-        <span className="text-xs text-gray-400 ml-2">
+        <span className="text-xs text-agi-teal-600 ml-2">
           {selectedIndex + 1} / {images.length}
         </span>
       </div>
     </div>
   )
-}
\ No newline at end of file
+}
diff --git a/frontend/app/page.tsx b/frontend/app/page.tsx
index e4d4a61..fe68d05 100644
--- a/frontend/app/page.tsx
+++ b/frontend/app/page.tsx
@@ -5,7 +5,7 @@ import Image from 'next/image'
 import ThumbnailRibbon from './components/ThumbnailRibbon'
 import AnnotationViewer from './components/AnnotationViewer'
 import { ImageData, Annotation, PromptAnnotation } from './types'
-import { Brain, Sparkles, ChevronDown, Loader2, ExternalLink } from 'lucide-react'
+import { Sparkles, ChevronDown, Loader2, ExternalLink } from 'lucide-react'
 
 export default function Dashboard() {
   const [images, setImages] = useState<ImageData[]>([])
@@ -129,31 +129,33 @@ export default function Dashboard() {
 
   if (loading) {
     return (
-      <div className="min-h-screen bg-gradient-to-br from-gray-900 via-purple-900 to-violet-900 flex items-center justify-center">
+      <div className="min-h-screen bg-gradient-to-br from-stone-50 via-amber-50 to-stone-100 flex items-center justify-center">
         <div className="text-center">
-          <Loader2 className="w-12 h-12 text-purple-400 animate-spin mx-auto mb-4" />
-          <div className="text-xl text-gray-200">Loading neural interface...</div>
+          <Loader2 className="w-12 h-12 text-agi-teal animate-spin mx-auto mb-4" />
+          <div className="text-xl text-agi-teal-800">Loading annotation interface...</div>
         </div>
       </div>
     )
   }
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-gray-900 via-purple-900 to-violet-900 flex flex-col">
+    <div className="min-h-screen bg-gradient-to-br from-stone-50 via-amber-50/50 to-stone-100 flex flex-col">
       {/* Header */}
-      <header className="bg-black/30 backdrop-blur-xl border-b border-purple-500/20">
+      <header className="bg-white/70 backdrop-blur-xl border-b border-agi-teal/10">
         <div className="px-3 md:px-6 py-3 md:py-4 flex flex-col md:flex-row items-center justify-between gap-2">
           <div className="flex items-center gap-2 md:gap-3">
-            <div className="p-1.5 md:p-2 bg-gradient-to-br from-purple-500 to-pink-500 rounded-lg">
-              <Brain className="w-5 h-5 md:w-6 md:h-6 text-white" />
-            </div>
-            <h1 className="text-lg md:text-2xl font-bold bg-gradient-to-r from-purple-400 to-pink-400 bg-clip-text text-transparent">
-              The Annotation Garden Project
+            <img
+              src={`${process.env.NEXT_PUBLIC_BASE_PATH || ''}/AGI-square.svg`}
+              alt="AGI Logo"
+              className="w-8 h-8 md:w-10 md:h-10"
+            />
+            <h1 className="text-lg md:text-2xl font-bold text-agi-teal">
+              Annotation Garden
             </h1>
           </div>
-          <div className="flex items-center gap-2 text-xs md:text-sm text-gray-400">
-            <Sparkles className="w-3 h-3 md:w-4 md:h-4 text-purple-400" />
-            <span>AI-Powered Vision Analysis</span>
+          <div className="flex items-center gap-2 text-xs md:text-sm text-agi-teal-600">
+            <Sparkles className="w-3 h-3 md:w-4 md:h-4 text-agi-orange" />
+            <span>Collaborative Image Annotation</span>
           </div>
         </div>
       </header>
@@ -162,10 +164,10 @@ export default function Dashboard() {
         <div className="flex-1 p-3 md:p-6 flex flex-col lg:flex-row gap-4 md:gap-6 min-h-0">
           {/* Image Viewer - Full width on mobile, constrained on desktop */}
           <div className="flex flex-col gap-4 lg:max-w-[600px] lg:min-w-[400px] w-full">
-            <div className="relative bg-black/40 backdrop-blur-md rounded-2xl border border-purple-500/20 p-2 h-[50vh] md:h-full md:max-h-[600px] flex items-center justify-center">
+            <div className="relative bg-white/80 backdrop-blur-md rounded-2xl border border-agi-teal/10 shadow-sm p-2 h-[50vh] md:h-full md:max-h-[600px] flex items-center justify-center">
               {imageLoading && (
-                <div className="absolute inset-0 bg-black/60 backdrop-blur-sm z-10 flex items-center justify-center rounded-2xl">
-                  <Loader2 className="w-8 h-8 text-purple-400 animate-spin" />
+                <div className="absolute inset-0 bg-white/80 backdrop-blur-sm z-10 flex items-center justify-center rounded-2xl">
+                  <Loader2 className="w-8 h-8 text-agi-teal animate-spin" />
                 </div>
               )}
               {images[selectedImageIndex] && (
@@ -180,15 +182,15 @@ export default function Dashboard() {
             </div>
 
             {/* Image Info Bar */}
-            <div className="bg-black/40 backdrop-blur-md rounded-xl border border-purple-500/20 px-4 py-3">
+            <div className="bg-white/80 backdrop-blur-md rounded-xl border border-agi-teal/10 shadow-sm px-4 py-3">
               <div className="flex items-center justify-between">
                 <div className="flex items-center gap-4">
-                  <span className="text-sm text-gray-400">Image ID:</span>
-                  <span className="text-sm font-mono text-purple-300">
+                  <span className="text-sm text-agi-teal-600">Image ID:</span>
+                  <span className="text-sm font-mono text-agi-teal">
                     {images[selectedImageIndex]?.id || 'Loading...'}
                   </span>
                 </div>
-                <div className="text-sm text-gray-400">
+                <div className="text-sm text-agi-teal-600">
                   {selectedImageIndex + 1} / {images.length}
                 </div>
               </div>
@@ -198,8 +200,8 @@ export default function Dashboard() {
           {/* Controls and Annotations - Full width on mobile, side panel on desktop */}
           <div className="flex-1 flex flex-col gap-4 min-w-0 w-full lg:w-auto">
             {/* Model Selection */}
-            <div className="bg-black/40 backdrop-blur-md rounded-xl border border-purple-500/20 p-4">
-              <label className="block text-sm font-medium text-gray-300 mb-2">
+            <div className="bg-white/80 backdrop-blur-md rounded-xl border border-agi-teal/10 shadow-sm p-4">
+              <label className="block text-sm font-medium text-agi-teal-700 mb-2">
                 Vision Model
               </label>
               <div className="relative">
@@ -210,54 +212,54 @@ export default function Dashboard() {
                     // Reset prompt selection when model changes
                     setSelectedPromptKey('')
                   }}
-                  className="w-full px-4 py-3 bg-gray-800/50 border border-purple-500/30 rounded-lg text-gray-200 appearance-none focus:outline-none focus:border-purple-400 focus:ring-2 focus:ring-purple-400/20 transition-all"
+                  className="w-full px-4 py-3 bg-stone-50 border border-agi-teal/20 rounded-lg text-agi-teal-800 appearance-none focus:outline-none focus:border-agi-teal focus:ring-2 focus:ring-agi-teal/20 transition-all"
                 >
                   <option value="">Select a model</option>
                   {availableModels.map(model => (
                     <option key={model} value={model}>{model}</option>
                   ))}
                 </select>
-                <ChevronDown className="absolute right-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400 pointer-events-none" />
+                <ChevronDown className="absolute right-3 top-1/2 -translate-y-1/2 w-5 h-5 text-agi-teal-500 pointer-events-none" />
               </div>
             </div>
 
             {/* Prompt Selection */}
-            <div className="bg-black/40 backdrop-blur-md rounded-xl border border-purple-500/20 p-4">
-              <label className="block text-sm font-medium text-gray-300 mb-2">
-                Analysis Type
+            <div className="bg-white/80 backdrop-blur-md rounded-xl border border-agi-teal/10 shadow-sm p-4">
+              <label className="block text-sm font-medium text-agi-teal-700 mb-2">
+                Annotation Type
               </label>
               <div className="relative">
                 <select
                   value={selectedPromptKey}
                   onChange={(e) => setSelectedPromptKey(e.target.value)}
-                  className="w-full px-4 py-3 bg-gray-800/50 border border-purple-500/30 rounded-lg text-gray-200 appearance-none focus:outline-none focus:border-purple-400 focus:ring-2 focus:ring-purple-400/20 transition-all"
+                  className="w-full px-4 py-3 bg-stone-50 border border-agi-teal/20 rounded-lg text-agi-teal-800 appearance-none focus:outline-none focus:border-agi-teal focus:ring-2 focus:ring-agi-teal/20 transition-all"
                   disabled={!selectedModel}
                 >
-                  <option value="">Select analysis type</option>
+                  <option value="">Select annotation type</option>
                   {availablePromptKeys.map(key => (
                     <option key={key} value={key}>
                       {formatPromptKey(key)}
                     </option>
                   ))}
                 </select>
-                <ChevronDown className="absolute right-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400 pointer-events-none" />
+                <ChevronDown className="absolute right-3 top-1/2 -translate-y-1/2 w-5 h-5 text-agi-teal-500 pointer-events-none" />
               </div>
             </div>
 
             {/* Annotation Display - Fixed height on mobile, flexible on desktop */}
-            <div className="h-[40vh] lg:h-auto lg:flex-1 bg-black/40 backdrop-blur-md rounded-xl border border-purple-500/20 p-4 overflow-hidden flex flex-col">
-              <h3 className="font-semibold text-gray-200 mb-3 flex items-center gap-2">
-                <Sparkles className="w-4 h-4 text-purple-400" />
-                AI Analysis
+            <div className="h-[40vh] lg:h-auto lg:flex-1 bg-white/80 backdrop-blur-md rounded-xl border border-agi-teal/10 shadow-sm p-4 overflow-hidden flex flex-col">
+              <h3 className="font-semibold text-agi-teal mb-3 flex items-center gap-2">
+                <Sparkles className="w-4 h-4 text-agi-orange" />
+                Annotation Details
               </h3>
               <div className="flex-1 overflow-auto">
                 {currentPromptAnnotation ? (
                   <AnnotationViewer annotation={currentPromptAnnotation} />
                 ) : (
-                  <div className="text-gray-500 text-center py-8">
-                    {!selectedModel ? 'Select a vision model to begin' : 
-                     !selectedPromptKey ? 'Choose an analysis type' :
-                     'No analysis available'}
+                  <div className="text-agi-teal-500 text-center py-8">
+                    {!selectedModel ? 'Select a vision model to explore annotations' :
+                     !selectedPromptKey ? 'Choose an annotation type to view' :
+                     'No annotations available for this selection'}
                   </div>
                 )}
               </div>
@@ -275,14 +277,14 @@ export default function Dashboard() {
         </div>
 
         {/* Footer */}
-        <footer className="bg-black/30 backdrop-blur-xl border-t border-purple-500/20 px-6 py-3">
-          <div className="text-center text-sm text-gray-400">
+        <footer className="bg-white/70 backdrop-blur-xl border-t border-agi-teal/10 px-6 py-3">
+          <div className="text-center text-sm text-agi-teal-600">
             © 2025{' '}
-<a
+            <a
               href="https://annotation.garden"
               target="_blank"
               rel="noopener noreferrer"
-              className="text-purple-400 hover:text-purple-300 transition-colors inline-flex items-center gap-1"
+              className="text-agi-teal hover:text-agi-orange transition-colors inline-flex items-center gap-1"
             >
               Annotation Garden Initiative
               <ExternalLink className="w-3 h-3" />
diff --git a/frontend/public/image-list.json b/frontend/public/image-list.json
new file mode 100644
index 0000000..1f2ad4e
--- /dev/null
+++ b/frontend/public/image-list.json
@@ -0,0 +1,1002 @@
+{"images": [
+  "shared0001_nsd02951",
+  "shared0002_nsd02991",
+  "shared0003_nsd03050",
+  "shared0004_nsd03078",
+  "shared0005_nsd03147",
+  "shared0006_nsd03158",
+  "shared0007_nsd03165",
+  "shared0008_nsd03172",
+  "shared0009_nsd03182",
+  "shared0010_nsd03387",
+  "shared0011_nsd03435",
+  "shared0012_nsd03450",
+  "shared0013_nsd03490",
+  "shared0014_nsd03627",
+  "shared0015_nsd03683",
+  "shared0016_nsd03688",
+  "shared0017_nsd03730",
+  "shared0018_nsd03810",
+  "shared0019_nsd03843",
+  "shared0020_nsd03848",
+  "shared0021_nsd03857",
+  "shared0022_nsd03914",
+  "shared0023_nsd03952",
+  "shared0024_nsd04052",
+  "shared0025_nsd04059",
+  "shared0026_nsd04130",
+  "shared0027_nsd04157",
+  "shared0028_nsd04250",
+  "shared0029_nsd04326",
+  "shared0030_nsd04424",
+  "shared0031_nsd04437",
+  "shared0032_nsd04613",
+  "shared0033_nsd04668",
+  "shared0034_nsd04691",
+  "shared0035_nsd04769",
+  "shared0036_nsd04787",
+  "shared0037_nsd04836",
+  "shared0038_nsd04870",
+  "shared0039_nsd04893",
+  "shared0040_nsd04931",
+  "shared0041_nsd05035",
+  "shared0042_nsd05107",
+  "shared0043_nsd05205",
+  "shared0044_nsd05286",
+  "shared0045_nsd05302",
+  "shared0046_nsd05339",
+  "shared0047_nsd05428",
+  "shared0048_nsd05460",
+  "shared0049_nsd05503",
+  "shared0050_nsd05543",
+  "shared0051_nsd05575",
+  "shared0052_nsd05584",
+  "shared0053_nsd05603",
+  "shared0054_nsd05715",
+  "shared0055_nsd05879",
+  "shared0056_nsd05891",
+  "shared0057_nsd06133",
+  "shared0058_nsd06200",
+  "shared0059_nsd06223",
+  "shared0060_nsd06432",
+  "shared0061_nsd06445",
+  "shared0062_nsd06490",
+  "shared0063_nsd06515",
+  "shared0064_nsd06522",
+  "shared0065_nsd06525",
+  "shared0066_nsd06559",
+  "shared0067_nsd06641",
+  "shared0068_nsd06714",
+  "shared0069_nsd06802",
+  "shared0070_nsd07008",
+  "shared0071_nsd07040",
+  "shared0072_nsd07121",
+  "shared0073_nsd07208",
+  "shared0074_nsd07337",
+  "shared0075_nsd07367",
+  "shared0076_nsd07410",
+  "shared0077_nsd07419",
+  "shared0078_nsd07481",
+  "shared0079_nsd07655",
+  "shared0080_nsd07660",
+  "shared0081_nsd07841",
+  "shared0082_nsd07860",
+  "shared0083_nsd07945",
+  "shared0084_nsd07949",
+  "shared0085_nsd07955",
+  "shared0086_nsd08007",
+  "shared0087_nsd08110",
+  "shared0088_nsd08205",
+  "shared0089_nsd08226",
+  "shared0090_nsd08263",
+  "shared0091_nsd08275",
+  "shared0092_nsd08319",
+  "shared0093_nsd08388",
+  "shared0094_nsd08395",
+  "shared0095_nsd08416",
+  "shared0096_nsd08436",
+  "shared0097_nsd08466",
+  "shared0098_nsd08510",
+  "shared0099_nsd08632",
+  "shared0100_nsd08647",
+  "shared0101_nsd08808",
+  "shared0102_nsd08844",
+  "shared0103_nsd08926",
+  "shared0104_nsd08934",
+  "shared0105_nsd09028",
+  "shared0106_nsd09049",
+  "shared0107_nsd09148",
+  "shared0108_nsd09231",
+  "shared0109_nsd09435",
+  "shared0110_nsd09463",
+  "shared0111_nsd09681",
+  "shared0112_nsd09723",
+  "shared0113_nsd09805",
+  "shared0114_nsd09848",
+  "shared0115_nsd09866",
+  "shared0116_nsd09918",
+  "shared0117_nsd09979",
+  "shared0118_nsd10007",
+  "shared0119_nsd10047",
+  "shared0120_nsd10065",
+  "shared0121_nsd10106",
+  "shared0122_nsd10108",
+  "shared0123_nsd10245",
+  "shared0124_nsd10394",
+  "shared0125_nsd10472",
+  "shared0126_nsd10508",
+  "shared0127_nsd10587",
+  "shared0128_nsd10601",
+  "shared0129_nsd10611",
+  "shared0130_nsd10908",
+  "shared0131_nsd11160",
+  "shared0132_nsd11334",
+  "shared0133_nsd11488",
+  "shared0134_nsd11522",
+  "shared0135_nsd11567",
+  "shared0136_nsd11618",
+  "shared0137_nsd11636",
+  "shared0138_nsd11690",
+  "shared0139_nsd11726",
+  "shared0140_nsd11797",
+  "shared0141_nsd11828",
+  "shared0142_nsd11838",
+  "shared0143_nsd11845",
+  "shared0144_nsd11933",
+  "shared0145_nsd11943",
+  "shared0146_nsd11953",
+  "shared0147_nsd12066",
+  "shared0148_nsd12076",
+  "shared0149_nsd12215",
+  "shared0150_nsd12309",
+  "shared0151_nsd12488",
+  "shared0152_nsd12496",
+  "shared0153_nsd12635",
+  "shared0154_nsd12686",
+  "shared0155_nsd12797",
+  "shared0156_nsd12799",
+  "shared0157_nsd12923",
+  "shared0158_nsd12938",
+  "shared0159_nsd13139",
+  "shared0160_nsd13231",
+  "shared0161_nsd13313",
+  "shared0162_nsd13315",
+  "shared0163_nsd13614",
+  "shared0164_nsd13654",
+  "shared0165_nsd13663",
+  "shared0166_nsd13721",
+  "shared0167_nsd13847",
+  "shared0168_nsd14111",
+  "shared0169_nsd14122",
+  "shared0170_nsd14166",
+  "shared0171_nsd14180",
+  "shared0172_nsd14444",
+  "shared0173_nsd14529",
+  "shared0174_nsd14568",
+  "shared0175_nsd14595",
+  "shared0176_nsd14611",
+  "shared0177_nsd14645",
+  "shared0178_nsd14794",
+  "shared0179_nsd14809",
+  "shared0180_nsd14821",
+  "shared0181_nsd14899",
+  "shared0182_nsd14932",
+  "shared0183_nsd15004",
+  "shared0184_nsd15026",
+  "shared0185_nsd15129",
+  "shared0186_nsd15365",
+  "shared0187_nsd15493",
+  "shared0188_nsd15507",
+  "shared0189_nsd15794",
+  "shared0190_nsd15820",
+  "shared0191_nsd15940",
+  "shared0192_nsd16064",
+  "shared0193_nsd16253",
+  "shared0194_nsd16345",
+  "shared0195_nsd16422",
+  "shared0196_nsd16467",
+  "shared0197_nsd16617",
+  "shared0198_nsd16636",
+  "shared0199_nsd16656",
+  "shared0200_nsd16703",
+  "shared0201_nsd16724",
+  "shared0202_nsd16824",
+  "shared0203_nsd16842",
+  "shared0204_nsd16866",
+  "shared0205_nsd16869",
+  "shared0206_nsd16918",
+  "shared0207_nsd17049",
+  "shared0208_nsd17231",
+  "shared0209_nsd17239",
+  "shared0210_nsd17370",
+  "shared0211_nsd17375",
+  "shared0212_nsd17451",
+  "shared0213_nsd17464",
+  "shared0214_nsd17486",
+  "shared0215_nsd17550",
+  "shared0216_nsd17596",
+  "shared0217_nsd17777",
+  "shared0218_nsd17795",
+  "shared0219_nsd17935",
+  "shared0220_nsd17943",
+  "shared0221_nsd18269",
+  "shared0222_nsd18435",
+  "shared0223_nsd18484",
+  "shared0224_nsd18506",
+  "shared0225_nsd18536",
+  "shared0226_nsd18544",
+  "shared0227_nsd18691",
+  "shared0228_nsd18797",
+  "shared0229_nsd19075",
+  "shared0230_nsd19182",
+  "shared0231_nsd19200",
+  "shared0232_nsd19201",
+  "shared0233_nsd19293",
+  "shared0234_nsd19437",
+  "shared0235_nsd19574",
+  "shared0236_nsd19643",
+  "shared0237_nsd19673",
+  "shared0238_nsd19691",
+  "shared0239_nsd19934",
+  "shared0240_nsd20055",
+  "shared0241_nsd20065",
+  "shared0242_nsd20081",
+  "shared0243_nsd20207",
+  "shared0244_nsd20224",
+  "shared0245_nsd20266",
+  "shared0246_nsd20308",
+  "shared0247_nsd20443",
+  "shared0248_nsd20634",
+  "shared0249_nsd20651",
+  "shared0250_nsd20703",
+  "shared0251_nsd20739",
+  "shared0252_nsd20778",
+  "shared0253_nsd20821",
+  "shared0254_nsd21109",
+  "shared0255_nsd21193",
+  "shared0256_nsd21195",
+  "shared0257_nsd21198",
+  "shared0258_nsd21219",
+  "shared0259_nsd21254",
+  "shared0260_nsd21280",
+  "shared0261_nsd21319",
+  "shared0262_nsd21509",
+  "shared0263_nsd21527",
+  "shared0264_nsd21554",
+  "shared0265_nsd21602",
+  "shared0266_nsd21704",
+  "shared0267_nsd21951",
+  "shared0268_nsd21990",
+  "shared0269_nsd22139",
+  "shared0270_nsd22144",
+  "shared0271_nsd22156",
+  "shared0272_nsd22264",
+  "shared0273_nsd22388",
+  "shared0274_nsd22496",
+  "shared0275_nsd22506",
+  "shared0276_nsd22516",
+  "shared0277_nsd22524",
+  "shared0278_nsd22531",
+  "shared0279_nsd22586",
+  "shared0280_nsd22588",
+  "shared0281_nsd22773",
+  "shared0282_nsd22783",
+  "shared0283_nsd22795",
+  "shared0284_nsd22810",
+  "shared0285_nsd22846",
+  "shared0286_nsd22874",
+  "shared0287_nsd22880",
+  "shared0288_nsd22887",
+  "shared0289_nsd22958",
+  "shared0290_nsd22968",
+  "shared0291_nsd22994",
+  "shared0292_nsd23037",
+  "shared0293_nsd23242",
+  "shared0294_nsd23493",
+  "shared0295_nsd23716",
+  "shared0296_nsd23730",
+  "shared0297_nsd23872",
+  "shared0298_nsd23877",
+  "shared0299_nsd23884",
+  "shared0300_nsd23994",
+  "shared0301_nsd24203",
+  "shared0302_nsd24215",
+  "shared0303_nsd24265",
+  "shared0304_nsd24318",
+  "shared0305_nsd24481",
+  "shared0306_nsd24518",
+  "shared0307_nsd24531",
+  "shared0308_nsd24561",
+  "shared0309_nsd24639",
+  "shared0310_nsd24641",
+  "shared0311_nsd24650",
+  "shared0312_nsd24740",
+  "shared0313_nsd24741",
+  "shared0314_nsd24788",
+  "shared0315_nsd24847",
+  "shared0316_nsd25060",
+  "shared0317_nsd25092",
+  "shared0318_nsd25112",
+  "shared0319_nsd25206",
+  "shared0320_nsd25251",
+  "shared0321_nsd25269",
+  "shared0322_nsd25285",
+  "shared0323_nsd25288",
+  "shared0324_nsd25319",
+  "shared0325_nsd25320",
+  "shared0326_nsd25372",
+  "shared0327_nsd25455",
+  "shared0328_nsd25571",
+  "shared0329_nsd25579",
+  "shared0330_nsd25582",
+  "shared0331_nsd25589",
+  "shared0332_nsd25603",
+  "shared0333_nsd25694",
+  "shared0334_nsd25703",
+  "shared0335_nsd25712",
+  "shared0336_nsd25742",
+  "shared0337_nsd25747",
+  "shared0338_nsd25882",
+  "shared0339_nsd25907",
+  "shared0340_nsd25960",
+  "shared0341_nsd26120",
+  "shared0342_nsd26128",
+  "shared0343_nsd26164",
+  "shared0344_nsd26244",
+  "shared0345_nsd26293",
+  "shared0346_nsd26308",
+  "shared0347_nsd26352",
+  "shared0348_nsd26373",
+  "shared0349_nsd26436",
+  "shared0350_nsd26459",
+  "shared0351_nsd26599",
+  "shared0352_nsd26721",
+  "shared0353_nsd26781",
+  "shared0354_nsd26896",
+  "shared0355_nsd26910",
+  "shared0356_nsd26972",
+  "shared0357_nsd26991",
+  "shared0358_nsd27243",
+  "shared0359_nsd27276",
+  "shared0360_nsd27288",
+  "shared0361_nsd27327",
+  "shared0362_nsd27436",
+  "shared0363_nsd27569",
+  "shared0364_nsd27581",
+  "shared0365_nsd27831",
+  "shared0366_nsd27879",
+  "shared0367_nsd27973",
+  "shared0368_nsd28025",
+  "shared0369_nsd28069",
+  "shared0370_nsd28097",
+  "shared0371_nsd28160",
+  "shared0372_nsd28190",
+  "shared0373_nsd28287",
+  "shared0374_nsd28304",
+  "shared0375_nsd28320",
+  "shared0376_nsd28326",
+  "shared0377_nsd28342",
+  "shared0378_nsd28350",
+  "shared0379_nsd28419",
+  "shared0380_nsd28488",
+  "shared0381_nsd28525",
+  "shared0382_nsd28596",
+  "shared0383_nsd28690",
+  "shared0384_nsd28746",
+  "shared0385_nsd28752",
+  "shared0386_nsd28756",
+  "shared0387_nsd28789",
+  "shared0388_nsd28899",
+  "shared0389_nsd28964",
+  "shared0390_nsd29011",
+  "shared0391_nsd29022",
+  "shared0392_nsd29382",
+  "shared0393_nsd29569",
+  "shared0394_nsd29661",
+  "shared0395_nsd29664",
+  "shared0396_nsd29681",
+  "shared0397_nsd29712",
+  "shared0398_nsd29838",
+  "shared0399_nsd29887",
+  "shared0400_nsd29920",
+  "shared0401_nsd29981",
+  "shared0402_nsd30082",
+  "shared0403_nsd30374",
+  "shared0404_nsd30396",
+  "shared0405_nsd30408",
+  "shared0406_nsd30431",
+  "shared0407_nsd30564",
+  "shared0408_nsd30602",
+  "shared0409_nsd30633",
+  "shared0410_nsd30673",
+  "shared0411_nsd30675",
+  "shared0412_nsd30848",
+  "shared0413_nsd30857",
+  "shared0414_nsd30888",
+  "shared0415_nsd30923",
+  "shared0416_nsd30936",
+  "shared0417_nsd30955",
+  "shared0418_nsd31029",
+  "shared0419_nsd31050",
+  "shared0420_nsd31065",
+  "shared0421_nsd31124",
+  "shared0422_nsd31234",
+  "shared0423_nsd31350",
+  "shared0424_nsd31447",
+  "shared0425_nsd31660",
+  "shared0426_nsd31748",
+  "shared0427_nsd31783",
+  "shared0428_nsd31802",
+  "shared0429_nsd31838",
+  "shared0430_nsd31937",
+  "shared0431_nsd31965",
+  "shared0432_nsd32054",
+  "shared0433_nsd32233",
+  "shared0434_nsd32304",
+  "shared0435_nsd32308",
+  "shared0436_nsd32626",
+  "shared0437_nsd32644",
+  "shared0438_nsd32717",
+  "shared0439_nsd32772",
+  "shared0440_nsd32773",
+  "shared0441_nsd32858",
+  "shared0442_nsd32892",
+  "shared0443_nsd32911",
+  "shared0444_nsd33132",
+  "shared0445_nsd33172",
+  "shared0446_nsd33190",
+  "shared0447_nsd33246",
+  "shared0448_nsd33290",
+  "shared0449_nsd33522",
+  "shared0450_nsd33544",
+  "shared0451_nsd33753",
+  "shared0452_nsd33814",
+  "shared0453_nsd33907",
+  "shared0454_nsd34069",
+  "shared0455_nsd34081",
+  "shared0456_nsd34090",
+  "shared0457_nsd34127",
+  "shared0458_nsd34187",
+  "shared0459_nsd34239",
+  "shared0460_nsd34419",
+  "shared0461_nsd34604",
+  "shared0462_nsd34752",
+  "shared0463_nsd34830",
+  "shared0464_nsd34846",
+  "shared0465_nsd34851",
+  "shared0466_nsd34875",
+  "shared0467_nsd34976",
+  "shared0468_nsd35095",
+  "shared0469_nsd35130",
+  "shared0470_nsd35744",
+  "shared0471_nsd35753",
+  "shared0472_nsd35791",
+  "shared0473_nsd35799",
+  "shared0474_nsd35987",
+  "shared0475_nsd36068",
+  "shared0476_nsd36259",
+  "shared0477_nsd36477",
+  "shared0478_nsd36570",
+  "shared0479_nsd36577",
+  "shared0480_nsd36624",
+  "shared0481_nsd36630",
+  "shared0482_nsd36683",
+  "shared0483_nsd36732",
+  "shared0484_nsd36760",
+  "shared0485_nsd36911",
+  "shared0486_nsd36946",
+  "shared0487_nsd36975",
+  "shared0488_nsd36979",
+  "shared0489_nsd37060",
+  "shared0490_nsd37222",
+  "shared0491_nsd37225",
+  "shared0492_nsd37437",
+  "shared0493_nsd37495",
+  "shared0494_nsd37609",
+  "shared0495_nsd37737",
+  "shared0496_nsd37802",
+  "shared0497_nsd37928",
+  "shared0498_nsd38023",
+  "shared0499_nsd38026",
+  "shared0500_nsd38061",
+  "shared0501_nsd38247",
+  "shared0502_nsd38279",
+  "shared0503_nsd38298",
+  "shared0504_nsd38311",
+  "shared0505_nsd38359",
+  "shared0506_nsd38484",
+  "shared0507_nsd38487",
+  "shared0508_nsd38495",
+  "shared0509_nsd38642",
+  "shared0510_nsd38795",
+  "shared0511_nsd38818",
+  "shared0512_nsd38830",
+  "shared0513_nsd38854",
+  "shared0514_nsd38979",
+  "shared0515_nsd39048",
+  "shared0516_nsd39059",
+  "shared0517_nsd39096",
+  "shared0518_nsd39290",
+  "shared0519_nsd39299",
+  "shared0520_nsd39370",
+  "shared0521_nsd39403",
+  "shared0522_nsd39510",
+  "shared0523_nsd39548",
+  "shared0524_nsd39554",
+  "shared0525_nsd39842",
+  "shared0526_nsd39998",
+  "shared0527_nsd40154",
+  "shared0528_nsd40236",
+  "shared0529_nsd40424",
+  "shared0530_nsd40549",
+  "shared0531_nsd40576",
+  "shared0532_nsd40722",
+  "shared0533_nsd40771",
+  "shared0534_nsd40841",
+  "shared0535_nsd40847",
+  "shared0536_nsd40910",
+  "shared0537_nsd40921",
+  "shared0538_nsd40925",
+  "shared0539_nsd40936",
+  "shared0540_nsd40980",
+  "shared0541_nsd41057",
+  "shared0542_nsd41098",
+  "shared0543_nsd41117",
+  "shared0544_nsd41138",
+  "shared0545_nsd41163",
+  "shared0546_nsd41483",
+  "shared0547_nsd41567",
+  "shared0548_nsd41575",
+  "shared0549_nsd41624",
+  "shared0550_nsd41654",
+  "shared0551_nsd41711",
+  "shared0552_nsd41779",
+  "shared0553_nsd41815",
+  "shared0554_nsd41928",
+  "shared0555_nsd41935",
+  "shared0556_nsd42008",
+  "shared0557_nsd42127",
+  "shared0558_nsd42167",
+  "shared0559_nsd42172",
+  "shared0560_nsd42215",
+  "shared0561_nsd42225",
+  "shared0562_nsd42239",
+  "shared0563_nsd42300",
+  "shared0564_nsd42474",
+  "shared0565_nsd42564",
+  "shared0566_nsd42643",
+  "shared0567_nsd42649",
+  "shared0568_nsd42698",
+  "shared0569_nsd42782",
+  "shared0570_nsd42852",
+  "shared0571_nsd42913",
+  "shared0572_nsd42947",
+  "shared0573_nsd42981",
+  "shared0574_nsd43108",
+  "shared0575_nsd43157",
+  "shared0576_nsd43158",
+  "shared0577_nsd43160",
+  "shared0578_nsd43165",
+  "shared0579_nsd43225",
+  "shared0580_nsd43251",
+  "shared0581_nsd43289",
+  "shared0582_nsd43429",
+  "shared0583_nsd43430",
+  "shared0584_nsd43446",
+  "shared0585_nsd43466",
+  "shared0586_nsd43501",
+  "shared0587_nsd43620",
+  "shared0588_nsd43676",
+  "shared0589_nsd43690",
+  "shared0590_nsd43747",
+  "shared0591_nsd43819",
+  "shared0592_nsd43821",
+  "shared0593_nsd43853",
+  "shared0594_nsd43951",
+  "shared0595_nsd43985",
+  "shared0596_nsd44053",
+  "shared0597_nsd44098",
+  "shared0598_nsd44108",
+  "shared0599_nsd44139",
+  "shared0600_nsd44145",
+  "shared0601_nsd44185",
+  "shared0602_nsd44325",
+  "shared0603_nsd44340",
+  "shared0604_nsd44370",
+  "shared0605_nsd44413",
+  "shared0606_nsd44706",
+  "shared0607_nsd44721",
+  "shared0608_nsd44730",
+  "shared0609_nsd44737",
+  "shared0610_nsd44845",
+  "shared0611_nsd44972",
+  "shared0612_nsd44981",
+  "shared0613_nsd45130",
+  "shared0614_nsd45214",
+  "shared0615_nsd45357",
+  "shared0616_nsd45596",
+  "shared0617_nsd45633",
+  "shared0618_nsd45747",
+  "shared0619_nsd45751",
+  "shared0620_nsd45838",
+  "shared0621_nsd45844",
+  "shared0622_nsd45946",
+  "shared0623_nsd45982",
+  "shared0624_nsd45983",
+  "shared0625_nsd46000",
+  "shared0626_nsd46003",
+  "shared0627_nsd46037",
+  "shared0628_nsd46102",
+  "shared0629_nsd46137",
+  "shared0630_nsd46151",
+  "shared0631_nsd46161",
+  "shared0632_nsd46275",
+  "shared0633_nsd46322",
+  "shared0634_nsd46373",
+  "shared0635_nsd46381",
+  "shared0636_nsd46461",
+  "shared0637_nsd46463",
+  "shared0638_nsd46481",
+  "shared0639_nsd46524",
+  "shared0640_nsd46643",
+  "shared0641_nsd46662",
+  "shared0642_nsd46807",
+  "shared0643_nsd46836",
+  "shared0644_nsd46862",
+  "shared0645_nsd47034",
+  "shared0646_nsd47071",
+  "shared0647_nsd47100",
+  "shared0648_nsd47201",
+  "shared0649_nsd47291",
+  "shared0650_nsd47294",
+  "shared0651_nsd47322",
+  "shared0652_nsd47409",
+  "shared0653_nsd47599",
+  "shared0654_nsd47601",
+  "shared0655_nsd47615",
+  "shared0656_nsd47657",
+  "shared0657_nsd47688",
+  "shared0658_nsd48158",
+  "shared0659_nsd48261",
+  "shared0660_nsd48375",
+  "shared0661_nsd48380",
+  "shared0662_nsd48394",
+  "shared0663_nsd48423",
+  "shared0664_nsd48509",
+  "shared0665_nsd48531",
+  "shared0666_nsd48618",
+  "shared0667_nsd48619",
+  "shared0668_nsd48623",
+  "shared0669_nsd48680",
+  "shared0670_nsd48682",
+  "shared0671_nsd48803",
+  "shared0672_nsd48833",
+  "shared0673_nsd48840",
+  "shared0674_nsd49077",
+  "shared0675_nsd49153",
+  "shared0676_nsd49157",
+  "shared0677_nsd49235",
+  "shared0678_nsd49467",
+  "shared0679_nsd49481",
+  "shared0680_nsd49623",
+  "shared0681_nsd49732",
+  "shared0682_nsd49924",
+  "shared0683_nsd49945",
+  "shared0684_nsd49956",
+  "shared0685_nsd49958",
+  "shared0686_nsd49970",
+  "shared0687_nsd49980",
+  "shared0688_nsd50027",
+  "shared0689_nsd50115",
+  "shared0690_nsd50171",
+  "shared0691_nsd50501",
+  "shared0692_nsd50654",
+  "shared0693_nsd50735",
+  "shared0694_nsd50756",
+  "shared0695_nsd50812",
+  "shared0696_nsd50883",
+  "shared0697_nsd51052",
+  "shared0698_nsd51053",
+  "shared0699_nsd51063",
+  "shared0700_nsd51078",
+  "shared0701_nsd51149",
+  "shared0702_nsd51172",
+  "shared0703_nsd51186",
+  "shared0704_nsd51522",
+  "shared0705_nsd51746",
+  "shared0706_nsd51789",
+  "shared0707_nsd51844",
+  "shared0708_nsd51908",
+  "shared0709_nsd51929",
+  "shared0710_nsd51966",
+  "shared0711_nsd51984",
+  "shared0712_nsd51989",
+  "shared0713_nsd52071",
+  "shared0714_nsd52217",
+  "shared0715_nsd52303",
+  "shared0716_nsd52329",
+  "shared0717_nsd52376",
+  "shared0718_nsd52395",
+  "shared0719_nsd52528",
+  "shared0720_nsd52555",
+  "shared0721_nsd52597",
+  "shared0722_nsd52599",
+  "shared0723_nsd52653",
+  "shared0724_nsd52893",
+  "shared0725_nsd52932",
+  "shared0726_nsd52991",
+  "shared0727_nsd53053",
+  "shared0728_nsd53071",
+  "shared0729_nsd53153",
+  "shared0730_nsd53156",
+  "shared0731_nsd53158",
+  "shared0732_nsd53271",
+  "shared0733_nsd53371",
+  "shared0734_nsd53490",
+  "shared0735_nsd53512",
+  "shared0736_nsd53571",
+  "shared0737_nsd53728",
+  "shared0738_nsd53729",
+  "shared0739_nsd53774",
+  "shared0740_nsd53859",
+  "shared0741_nsd53882",
+  "shared0742_nsd53892",
+  "shared0743_nsd54079",
+  "shared0744_nsd54148",
+  "shared0745_nsd54258",
+  "shared0746_nsd54362",
+  "shared0747_nsd54390",
+  "shared0748_nsd54644",
+  "shared0749_nsd54684",
+  "shared0750_nsd54699",
+  "shared0751_nsd54744",
+  "shared0752_nsd54813",
+  "shared0753_nsd54825",
+  "shared0754_nsd54914",
+  "shared0755_nsd54960",
+  "shared0756_nsd55006",
+  "shared0757_nsd55108",
+  "shared0758_nsd55164",
+  "shared0759_nsd55406",
+  "shared0760_nsd55409",
+  "shared0761_nsd55527",
+  "shared0762_nsd55650",
+  "shared0763_nsd55670",
+  "shared0764_nsd55679",
+  "shared0765_nsd55681",
+  "shared0766_nsd55858",
+  "shared0767_nsd55934",
+  "shared0768_nsd55969",
+  "shared0769_nsd55970",
+  "shared0770_nsd56043",
+  "shared0771_nsd56067",
+  "shared0772_nsd56127",
+  "shared0773_nsd56155",
+  "shared0774_nsd56270",
+  "shared0775_nsd56291",
+  "shared0776_nsd56315",
+  "shared0777_nsd56419",
+  "shared0778_nsd56455",
+  "shared0779_nsd56472",
+  "shared0780_nsd56671",
+  "shared0781_nsd56682",
+  "shared0782_nsd56696",
+  "shared0783_nsd56724",
+  "shared0784_nsd56752",
+  "shared0785_nsd56783",
+  "shared0786_nsd56785",
+  "shared0787_nsd56851",
+  "shared0788_nsd56868",
+  "shared0789_nsd56912",
+  "shared0790_nsd56949",
+  "shared0791_nsd57047",
+  "shared0792_nsd57061",
+  "shared0793_nsd57436",
+  "shared0794_nsd57444",
+  "shared0795_nsd57479",
+  "shared0796_nsd57543",
+  "shared0797_nsd57554",
+  "shared0798_nsd57649",
+  "shared0799_nsd57651",
+  "shared0800_nsd57682",
+  "shared0801_nsd57823",
+  "shared0802_nsd57839",
+  "shared0803_nsd57907",
+  "shared0804_nsd58097",
+  "shared0805_nsd58145",
+  "shared0806_nsd58165",
+  "shared0807_nsd58188",
+  "shared0808_nsd58405",
+  "shared0809_nsd58669",
+  "shared0810_nsd58682",
+  "shared0811_nsd59024",
+  "shared0812_nsd59040",
+  "shared0813_nsd59047",
+  "shared0814_nsd59080",
+  "shared0815_nsd59092",
+  "shared0816_nsd59195",
+  "shared0817_nsd59285",
+  "shared0818_nsd59420",
+  "shared0819_nsd59421",
+  "shared0820_nsd59586",
+  "shared0821_nsd59596",
+  "shared0822_nsd59632",
+  "shared0823_nsd59700",
+  "shared0824_nsd59818",
+  "shared0825_nsd59995",
+  "shared0826_nsd60095",
+  "shared0827_nsd60120",
+  "shared0828_nsd60187",
+  "shared0829_nsd60252",
+  "shared0830_nsd60306",
+  "shared0831_nsd60457",
+  "shared0832_nsd60506",
+  "shared0833_nsd60520",
+  "shared0834_nsd60554",
+  "shared0835_nsd60726",
+  "shared0836_nsd60835",
+  "shared0837_nsd60846",
+  "shared0838_nsd60868",
+  "shared0839_nsd60979",
+  "shared0840_nsd61123",
+  "shared0841_nsd61134",
+  "shared0842_nsd61178",
+  "shared0843_nsd61217",
+  "shared0844_nsd61511",
+  "shared0845_nsd61514",
+  "shared0846_nsd61678",
+  "shared0847_nsd61739",
+  "shared0848_nsd61749",
+  "shared0849_nsd61753",
+  "shared0850_nsd61798",
+  "shared0851_nsd61802",
+  "shared0852_nsd61810",
+  "shared0853_nsd61874",
+  "shared0854_nsd61973",
+  "shared0855_nsd62007",
+  "shared0856_nsd62016",
+  "shared0857_nsd62210",
+  "shared0858_nsd62229",
+  "shared0859_nsd62276",
+  "shared0860_nsd62303",
+  "shared0861_nsd62366",
+  "shared0862_nsd62480",
+  "shared0863_nsd62545",
+  "shared0864_nsd62562",
+  "shared0865_nsd62684",
+  "shared0866_nsd62749",
+  "shared0867_nsd62961",
+  "shared0868_nsd63082",
+  "shared0869_nsd63183",
+  "shared0870_nsd63346",
+  "shared0871_nsd63450",
+  "shared0872_nsd63747",
+  "shared0873_nsd63782",
+  "shared0874_nsd63826",
+  "shared0875_nsd63923",
+  "shared0876_nsd63932",
+  "shared0877_nsd63945",
+  "shared0878_nsd64005",
+  "shared0879_nsd64097",
+  "shared0880_nsd64296",
+  "shared0881_nsd64484",
+  "shared0882_nsd64499",
+  "shared0883_nsd64616",
+  "shared0884_nsd64622",
+  "shared0885_nsd64688",
+  "shared0886_nsd64772",
+  "shared0887_nsd64868",
+  "shared0888_nsd64881",
+  "shared0889_nsd64894",
+  "shared0890_nsd64980",
+  "shared0891_nsd65011",
+  "shared0892_nsd65070",
+  "shared0893_nsd65149",
+  "shared0894_nsd65188",
+  "shared0895_nsd65233",
+  "shared0896_nsd65254",
+  "shared0897_nsd65268",
+  "shared0898_nsd65377",
+  "shared0899_nsd65415",
+  "shared0900_nsd65446",
+  "shared0901_nsd65640",
+  "shared0902_nsd65655",
+  "shared0903_nsd65687",
+  "shared0904_nsd65770",
+  "shared0905_nsd65800",
+  "shared0906_nsd65822",
+  "shared0907_nsd65873",
+  "shared0908_nsd65921",
+  "shared0909_nsd65944",
+  "shared0910_nsd66005",
+  "shared0911_nsd66215",
+  "shared0912_nsd66217",
+  "shared0913_nsd66279",
+  "shared0914_nsd66331",
+  "shared0915_nsd66343",
+  "shared0916_nsd66422",
+  "shared0917_nsd66465",
+  "shared0918_nsd66480",
+  "shared0919_nsd66490",
+  "shared0920_nsd66581",
+  "shared0921_nsd66644",
+  "shared0922_nsd66774",
+  "shared0923_nsd66837",
+  "shared0924_nsd66947",
+  "shared0925_nsd66977",
+  "shared0926_nsd67046",
+  "shared0927_nsd67114",
+  "shared0928_nsd67169",
+  "shared0929_nsd67205",
+  "shared0930_nsd67238",
+  "shared0931_nsd67253",
+  "shared0932_nsd67296",
+  "shared0933_nsd67364",
+  "shared0934_nsd67743",
+  "shared0935_nsd67803",
+  "shared0936_nsd67830",
+  "shared0937_nsd68024",
+  "shared0938_nsd68169",
+  "shared0939_nsd68279",
+  "shared0940_nsd68312",
+  "shared0941_nsd68340",
+  "shared0942_nsd68419",
+  "shared0943_nsd68472",
+  "shared0944_nsd68742",
+  "shared0945_nsd68815",
+  "shared0946_nsd68843",
+  "shared0947_nsd68859",
+  "shared0948_nsd68898",
+  "shared0949_nsd69008",
+  "shared0950_nsd69026",
+  "shared0951_nsd69031",
+  "shared0952_nsd69131",
+  "shared0953_nsd69215",
+  "shared0954_nsd69241",
+  "shared0955_nsd69443",
+  "shared0956_nsd69503",
+  "shared0957_nsd69615",
+  "shared0958_nsd69617",
+  "shared0959_nsd69786",
+  "shared0960_nsd69814",
+  "shared0961_nsd69832",
+  "shared0962_nsd69840",
+  "shared0963_nsd69855",
+  "shared0964_nsd69919",
+  "shared0965_nsd70039",
+  "shared0966_nsd70076",
+  "shared0967_nsd70096",
+  "shared0968_nsd70194",
+  "shared0969_nsd70233",
+  "shared0970_nsd70336",
+  "shared0971_nsd70361",
+  "shared0972_nsd70369",
+  "shared0973_nsd70428",
+  "shared0974_nsd70506",
+  "shared0975_nsd70586",
+  "shared0976_nsd70590",
+  "shared0977_nsd70672",
+  "shared0978_nsd70759",
+  "shared0979_nsd70765",
+  "shared0980_nsd70948",
+  "shared0981_nsd71026",
+  "shared0982_nsd71187",
+  "shared0983_nsd71230",
+  "shared0984_nsd71233",
+  "shared0985_nsd71242",
+  "shared0986_nsd71411",
+  "shared0987_nsd71451",
+  "shared0988_nsd71754",
+  "shared0989_nsd71895",
+  "shared0990_nsd71929",
+  "shared0991_nsd72016",
+  "shared0992_nsd72081",
+  "shared0993_nsd72171",
+  "shared0994_nsd72210",
+  "shared0995_nsd72258",
+  "shared0996_nsd72313",
+  "shared0997_nsd72511",
+  "shared0998_nsd72606",
+  "shared0999_nsd72720",
+  "shared1000_nsd72949"
+]}
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 72454c8..3e06d01 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -7,6 +7,47 @@ module.exports = {
   ],
   theme: {
     extend: {
+      colors: {
+        'agi-teal': {
+          DEFAULT: '#184A3D',
+          50: '#E8F5F1',
+          100: '#D1EBE4',
+          200: '#A3D7C9',
+          300: '#75C3AE',
+          400: '#47AF93',
+          500: '#2A7B68',
+          600: '#215F50',
+          700: '#184A3D',
+          800: '#0F352A',
+          900: '#062017',
+        },
+        'agi-orange': {
+          DEFAULT: '#E99852',
+          50: '#FDF5EE',
+          100: '#FBEBDD',
+          200: '#F7D7BB',
+          300: '#F3C399',
+          400: '#EFAF77',
+          500: '#E99852',
+          600: '#D17D36',
+          700: '#A5612A',
+          800: '#79471E',
+          900: '#4D2D12',
+        },
+        'agi-purple': {
+          DEFAULT: '#4B4967',
+          50: '#F0F0F3',
+          100: '#E1E0E7',
+          200: '#C3C2CF',
+          300: '#A5A3B7',
+          400: '#87859F',
+          500: '#6A6887',
+          600: '#4B4967',
+          700: '#3A3850',
+          800: '#292739',
+          900: '#181622',
+        },
+      },
       animation: {
         'fade-in': 'fade-in 0.5s ease-in-out',
       },

From 6e64f24bcb8903ca9d488dbaca2a1deb5287351b Mon Sep 17 00:00:00 2001
From: Seyed Yahya Shirazi <shirazi@ieee.org>
Date: Mon, 24 Nov 2025 13:14:16 -0800
Subject: [PATCH 2/5] Fix progress indicator to scale for 1000+ images

- Calculate group size dynamically based on total image count
- Each dot now represents ~100 images (for 1000 images)
- Progress indicator correctly highlights for any image index
---
 frontend/app/components/ThumbnailRibbon.tsx | 28 +++++++++++++--------
 1 file changed, 18 insertions(+), 10 deletions(-)

diff --git a/frontend/app/components/ThumbnailRibbon.tsx b/frontend/app/components/ThumbnailRibbon.tsx
index 33398a4..240abbd 100644
--- a/frontend/app/components/ThumbnailRibbon.tsx
+++ b/frontend/app/components/ThumbnailRibbon.tsx
@@ -144,16 +144,24 @@ export default function ThumbnailRibbon({ images, selectedIndex, onSelect }: Thu
       {/* Progress indicator */}
       <div className="mt-3 flex items-center justify-center gap-2">
         <div className="flex gap-1">
-          {Array.from({ length: Math.min(10, Math.ceil(images.length / 10)) }).map((_, i) => (
-            <div
-              key={i}
-              className={`h-1 rounded-full transition-all ${
-                Math.floor(selectedIndex / 10) === i
-                  ? 'w-8 bg-gradient-to-r from-agi-teal to-agi-orange'
-                  : 'w-2 bg-agi-teal/20'
-              }`}
-            />
-          ))}
+          {(() => {
+            // Calculate group size to always show ~10 dots max
+            const maxDots = 10
+            const groupSize = Math.max(1, Math.ceil(images.length / maxDots))
+            const numDots = Math.ceil(images.length / groupSize)
+            const currentGroup = Math.floor(selectedIndex / groupSize)
+
+            return Array.from({ length: numDots }).map((_, i) => (
+              <div
+                key={i}
+                className={`h-1 rounded-full transition-all ${
+                  currentGroup === i
+                    ? 'w-8 bg-gradient-to-r from-agi-teal to-agi-orange'
+                    : 'w-2 bg-agi-teal/20'
+                }`}
+              />
+            ))
+          })()}
         </div>
         <span className="text-xs text-agi-teal-600 ml-2">
           {selectedIndex + 1} / {images.length}

From 29fd9069bd108511c4288ecf28ad5652fd81662a Mon Sep 17 00:00:00 2001
From: Seyed Yahya Shirazi <shirazi@ieee.org>
Date: Mon, 24 Nov 2025 13:16:45 -0800
Subject: [PATCH 3/5] Add draggable slider for quick image navigation

- Replace dot indicators with a draggable progress slider
- Click anywhere on the slider to jump to that position
- Drag the handle to scrub through images quickly
- Shows filled track with teal-to-orange gradient
- Segment markers for visual reference
- Smooth transition animations
---
 frontend/app/components/ThumbnailRibbon.tsx | 102 ++++++++++++++++----
 1 file changed, 82 insertions(+), 20 deletions(-)

diff --git a/frontend/app/components/ThumbnailRibbon.tsx b/frontend/app/components/ThumbnailRibbon.tsx
index 240abbd..362e2a3 100644
--- a/frontend/app/components/ThumbnailRibbon.tsx
+++ b/frontend/app/components/ThumbnailRibbon.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { useRef, useEffect } from 'react'
+import { useRef, useEffect, useState, useCallback } from 'react'
 import { ImageData } from '../types'
 import { ChevronLeft, ChevronRight } from 'lucide-react'
 
@@ -13,6 +13,8 @@ interface ThumbnailRibbonProps {
 export default function ThumbnailRibbon({ images, selectedIndex, onSelect }: ThumbnailRibbonProps) {
   const scrollContainerRef = useRef<HTMLDivElement>(null)
   const thumbnailRefs = useRef<(HTMLButtonElement | null)[]>([])
+  const progressBarRef = useRef<HTMLDivElement>(null)
+  const [isDragging, setIsDragging] = useState(false)
 
   // Scroll to selected thumbnail when it changes
   useEffect(() => {
@@ -58,6 +60,47 @@ export default function ThumbnailRibbon({ images, selectedIndex, onSelect }: Thu
     }
   }
 
+  // Handle click/drag on progress bar to jump to position
+  const handleProgressInteraction = useCallback((clientX: number) => {
+    if (!progressBarRef.current || images.length === 0) return
+
+    const rect = progressBarRef.current.getBoundingClientRect()
+    const relativeX = Math.max(0, Math.min(clientX - rect.left, rect.width))
+    const percentage = relativeX / rect.width
+    const newIndex = Math.min(
+      Math.floor(percentage * images.length),
+      images.length - 1
+    )
+    onSelect(newIndex)
+  }, [images.length, onSelect])
+
+  const handleMouseDown = (e: React.MouseEvent) => {
+    setIsDragging(true)
+    handleProgressInteraction(e.clientX)
+  }
+
+  const handleMouseMove = useCallback((e: MouseEvent) => {
+    if (isDragging) {
+      handleProgressInteraction(e.clientX)
+    }
+  }, [isDragging, handleProgressInteraction])
+
+  const handleMouseUp = useCallback(() => {
+    setIsDragging(false)
+  }, [])
+
+  // Add/remove mouse event listeners for drag
+  useEffect(() => {
+    if (isDragging) {
+      window.addEventListener('mousemove', handleMouseMove)
+      window.addEventListener('mouseup', handleMouseUp)
+    }
+    return () => {
+      window.removeEventListener('mousemove', handleMouseMove)
+      window.removeEventListener('mouseup', handleMouseUp)
+    }
+  }, [isDragging, handleMouseMove, handleMouseUp])
+
   return (
     <div className="bg-white/80 backdrop-blur-md rounded-xl border border-agi-teal/10 shadow-sm p-2 md:p-4">
       <div className="relative flex items-center">
@@ -141,29 +184,48 @@ export default function ThumbnailRibbon({ images, selectedIndex, onSelect }: Thu
         </button>
       </div>
 
-      {/* Progress indicator */}
-      <div className="mt-3 flex items-center justify-center gap-2">
-        <div className="flex gap-1">
-          {(() => {
-            // Calculate group size to always show ~10 dots max
-            const maxDots = 10
-            const groupSize = Math.max(1, Math.ceil(images.length / maxDots))
-            const numDots = Math.ceil(images.length / groupSize)
-            const currentGroup = Math.floor(selectedIndex / groupSize)
-
-            return Array.from({ length: numDots }).map((_, i) => (
+      {/* Progress indicator - clickable/draggable slider */}
+      <div className="mt-3 flex items-center justify-center gap-3">
+        <div
+          ref={progressBarRef}
+          className={`relative w-64 md:w-96 h-6 flex items-center cursor-pointer group ${isDragging ? 'cursor-grabbing' : 'cursor-grab'}`}
+          onMouseDown={handleMouseDown}
+          role="slider"
+          aria-label="Image position"
+          aria-valuemin={1}
+          aria-valuemax={images.length}
+          aria-valuenow={selectedIndex + 1}
+          tabIndex={0}
+        >
+          {/* Track background */}
+          <div className="absolute inset-x-0 h-2 bg-agi-teal/10 rounded-full" />
+
+          {/* Filled track */}
+          <div
+            className="absolute left-0 h-2 bg-gradient-to-r from-agi-teal to-agi-orange rounded-full transition-all duration-75"
+            style={{ width: `${((selectedIndex + 1) / images.length) * 100}%` }}
+          />
+
+          {/* Thumb/handle */}
+          <div
+            className={`absolute w-4 h-4 bg-white border-2 border-agi-teal rounded-full shadow-md transform -translate-x-1/2 transition-transform ${
+              isDragging ? 'scale-125' : 'group-hover:scale-110'
+            }`}
+            style={{ left: `${((selectedIndex + 1) / images.length) * 100}%` }}
+          />
+
+          {/* Segment markers */}
+          <div className="absolute inset-x-0 flex justify-between px-0.5">
+            {Array.from({ length: 11 }).map((_, i) => (
               <div
                 key={i}
-                className={`h-1 rounded-full transition-all ${
-                  currentGroup === i
-                    ? 'w-8 bg-gradient-to-r from-agi-teal to-agi-orange'
-                    : 'w-2 bg-agi-teal/20'
-                }`}
+                className="w-0.5 h-1 bg-agi-teal/30 rounded-full"
               />
-            ))
-          })()}
+            ))}
+          </div>
         </div>
-        <span className="text-xs text-agi-teal-600 ml-2">
+
+        <span className="text-xs text-agi-teal-600 font-medium min-w-[60px]">
           {selectedIndex + 1} / {images.length}
         </span>
       </div>

From 32d9bef90ad67f1e9ba554d7ce56441b22a061be Mon Sep 17 00:00:00 2001
From: Seyed Yahya Shirazi <shirazi@ieee.org>
Date: Mon, 24 Nov 2025 13:17:17 -0800
Subject: [PATCH 4/5] Add PR preview workflow for GitHub Pages

- Deploy PR previews to /pr-preview/pr-{number}/ subdirectory
- Automatic cleanup when PR is closed
- Uses rossjrw/pr-preview-action for deployment
- Builds with correct base path for preview URL
---
 .github/workflows/pr-preview.yml | 73 ++++++++++++++++++++++++++++++++
 1 file changed, 73 insertions(+)
 create mode 100644 .github/workflows/pr-preview.yml

diff --git a/.github/workflows/pr-preview.yml b/.github/workflows/pr-preview.yml
new file mode 100644
index 0000000..3d9ae07
--- /dev/null
+++ b/.github/workflows/pr-preview.yml
@@ -0,0 +1,73 @@
+name: PR Preview
+
+on:
+  pull_request:
+    types: [opened, synchronize, reopened, closed]
+
+permissions:
+  contents: write
+  pull-requests: write
+
+concurrency: preview-${{ github.ref }}
+
+jobs:
+  build-preview:
+    if: github.event.action != 'closed'
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          lfs: true
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'npm'
+          cache-dependency-path: frontend/package-lock.json
+
+      - name: Install dependencies
+        working-directory: frontend
+        run: npm ci
+
+      - name: Copy static assets
+        working-directory: frontend
+        run: |
+          mkdir -p public/thumbnails public/downsampled public/annotations/nsd
+          cp -r ../data/thumbnails/* public/thumbnails/ 2>/dev/null || echo "No thumbnails to copy"
+          cp -r ../images/downsampled/* public/downsampled/ 2>/dev/null || echo "No images to copy"
+          cp -r ../annotations/nsd/*.json public/annotations/nsd/ 2>/dev/null || echo "No annotations to copy"
+
+      - name: Build Next.js site
+        working-directory: frontend
+        env:
+          # Set base path for PR preview subdirectory
+          NEXT_PUBLIC_BASE_PATH: /image-annotation/pr-preview/pr-${{ github.event.number }}
+        run: |
+          # Update next.config.js base path for preview
+          sed -i "s|'/image-annotation'|'/image-annotation/pr-preview/pr-${{ github.event.number }}'|g" next.config.js
+          npm run build
+
+      - name: Deploy PR Preview
+        uses: rossjrw/pr-preview-action@v1
+        with:
+          source-dir: frontend/out
+          preview-branch: gh-pages
+          umbrella-dir: pr-preview
+          action: auto
+
+  cleanup:
+    if: github.event.action == 'closed'
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Cleanup PR Preview
+        uses: rossjrw/pr-preview-action@v1
+        with:
+          source-dir: frontend/out
+          preview-branch: gh-pages
+          umbrella-dir: pr-preview
+          action: remove

From 67b49be1bb4ad9ea190e0951f83208a01972c457 Mon Sep 17 00:00:00 2001
From: Seyed Yahya Shirazi <shirazi@ieee.org>
Date: Mon, 24 Nov 2025 13:24:30 -0800
Subject: [PATCH 5/5] Replace PR preview with build check workflow

GitHub Pages with workflow-based deployment only supports single
deployments, making PR previews unfeasible. Changed to build check
that verifies PRs compile successfully before merge.
---
 .github/workflows/pr-check.yml   | 89 ++++++++++++++++++++++++++++++++
 .github/workflows/pr-preview.yml | 73 --------------------------
 2 files changed, 89 insertions(+), 73 deletions(-)
 create mode 100644 .github/workflows/pr-check.yml
 delete mode 100644 .github/workflows/pr-preview.yml

diff --git a/.github/workflows/pr-check.yml b/.github/workflows/pr-check.yml
new file mode 100644
index 0000000..14bb6db
--- /dev/null
+++ b/.github/workflows/pr-check.yml
@@ -0,0 +1,89 @@
+name: PR Build Check
+
+on:
+  pull_request:
+    types: [opened, synchronize, reopened]
+
+permissions:
+  contents: read
+  pull-requests: write
+
+concurrency:
+  group: "pr-check-${{ github.event.number }}"
+  cancel-in-progress: true
+
+jobs:
+  build-check:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          lfs: true
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'npm'
+          cache-dependency-path: frontend/package-lock.json
+
+      - name: Install dependencies
+        working-directory: frontend
+        run: npm ci
+
+      - name: Copy static assets
+        working-directory: frontend
+        run: |
+          mkdir -p public/thumbnails public/downsampled public/annotations/nsd
+          cp -r ../data/thumbnails/* public/thumbnails/ 2>/dev/null || echo "No thumbnails to copy"
+          cp -r ../images/downsampled/* public/downsampled/ 2>/dev/null || echo "No images to copy"
+          cp -r ../annotations/nsd/*.json public/annotations/nsd/ 2>/dev/null || echo "No annotations to copy"
+
+      - name: Build Next.js site
+        working-directory: frontend
+        run: npm run build
+
+      - name: Verify build output
+        run: |
+          echo "Build completed successfully!"
+          echo "Output files:"
+          ls -la frontend/out/
+          echo ""
+          echo "Static assets:"
+          ls -la frontend/out/thumbnails/ 2>/dev/null | head -5 || echo "No thumbnails"
+          ls -la frontend/out/downsampled/ 2>/dev/null | head -5 || echo "No downsampled images"
+          ls -la frontend/out/annotations/nsd/ 2>/dev/null | head -5 || echo "No annotations"
+
+      - name: Comment PR with build status
+        uses: actions/github-script@v7
+        with:
+          script: |
+            const body = `## Build Check Passed\n\nThe frontend build completed successfully. Once merged, changes will deploy to: https://annotation-garden.github.io/image-annotation/`;
+
+            // Find existing comment
+            const { data: comments } = await github.rest.issues.listComments({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              issue_number: context.issue.number,
+            });
+
+            const botComment = comments.find(comment =>
+              comment.user.type === 'Bot' && comment.body.includes('Build Check')
+            );
+
+            if (botComment) {
+              await github.rest.issues.updateComment({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                comment_id: botComment.id,
+                body: body
+              });
+            } else {
+              await github.rest.issues.createComment({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                issue_number: context.issue.number,
+                body: body
+              });
+            }
diff --git a/.github/workflows/pr-preview.yml b/.github/workflows/pr-preview.yml
deleted file mode 100644
index 3d9ae07..0000000
--- a/.github/workflows/pr-preview.yml
+++ /dev/null
@@ -1,73 +0,0 @@
-name: PR Preview
-
-on:
-  pull_request:
-    types: [opened, synchronize, reopened, closed]
-
-permissions:
-  contents: write
-  pull-requests: write
-
-concurrency: preview-${{ github.ref }}
-
-jobs:
-  build-preview:
-    if: github.event.action != 'closed'
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v4
-        with:
-          lfs: true
-
-      - name: Setup Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: '20'
-          cache: 'npm'
-          cache-dependency-path: frontend/package-lock.json
-
-      - name: Install dependencies
-        working-directory: frontend
-        run: npm ci
-
-      - name: Copy static assets
-        working-directory: frontend
-        run: |
-          mkdir -p public/thumbnails public/downsampled public/annotations/nsd
-          cp -r ../data/thumbnails/* public/thumbnails/ 2>/dev/null || echo "No thumbnails to copy"
-          cp -r ../images/downsampled/* public/downsampled/ 2>/dev/null || echo "No images to copy"
-          cp -r ../annotations/nsd/*.json public/annotations/nsd/ 2>/dev/null || echo "No annotations to copy"
-
-      - name: Build Next.js site
-        working-directory: frontend
-        env:
-          # Set base path for PR preview subdirectory
-          NEXT_PUBLIC_BASE_PATH: /image-annotation/pr-preview/pr-${{ github.event.number }}
-        run: |
-          # Update next.config.js base path for preview
-          sed -i "s|'/image-annotation'|'/image-annotation/pr-preview/pr-${{ github.event.number }}'|g" next.config.js
-          npm run build
-
-      - name: Deploy PR Preview
-        uses: rossjrw/pr-preview-action@v1
-        with:
-          source-dir: frontend/out
-          preview-branch: gh-pages
-          umbrella-dir: pr-preview
-          action: auto
-
-  cleanup:
-    if: github.event.action == 'closed'
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v4
-
-      - name: Cleanup PR Preview
-        uses: rossjrw/pr-preview-action@v1
-        with:
-          source-dir: frontend/out
-          preview-branch: gh-pages
-          umbrella-dir: pr-preview
-          action: remove