feat: api tabs

static/css/dashboard-simple.css

@@ -518,34 +518,35 @@
 
 /* API Documentation Section */
 .api-documentation-section {
-  margin-top: 80px;
-  padding: 60px 0;
-  background: #ffffff;
-  border-top: 2px solid #f1f3f4;
+  margin: 60px 0;
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
 }
 
+/* Header */
 .api-docs-header {
+  background: #f8f9fa;
+  color: #495057;
+  padding: 40px;
   text-align: center;
-  margin-bottom: 40px;
-  max-width: 800px;
-  margin-left: auto;
-  margin-right: auto;
-  padding: 0 20px;
+  border-bottom: 1px solid #e9ecef;
 }
 
 .api-docs-header h2 {
-  font-size: 2.5rem;
+  font-size: 2rem;
   font-weight: 700;
-  color: #1a73e8;
-  margin-bottom: 16px;
+  margin-bottom: 12px;
   letter-spacing: -0.5px;
+  color: #495057;
 }
 
 .api-docs-header p {
   font-size: 1.1rem;
-  color: #5f6368;
-  line-height: 1.6;
-  font-weight: 400;
+  opacity: 0.8;
+  max-width: 600px;
+  margin: 0 auto;
 }
 
 .api-docs-container {
@@ -554,80 +555,89 @@
   padding: 0 20px;
 }
 
-/* API Overview Card */
-.api-overview-card {
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  border-radius: 16px;
-  padding: 32px;
-  margin-bottom: 40px;
-  color: white;
-  box-shadow: 0 8px 32px rgba(102, 126, 234, 0.3);
+/* API Overview */
+.api-overview {
+  padding: 32px 40px;
+  border-bottom: 1px solid #e9ecef;
+  background: #f8f9fa;
+}
+
+.endpoint-card {
+  background: white;
+  border: 1px solid #e1e5e9;
+  border-radius: 8px;
+  padding: 24px;
+  margin-bottom: 20px;
 }
 
-.api-endpoint-header {
+.endpoint-header {
   display: flex;
   align-items: center;
   gap: 16px;
-  margin-bottom: 24px;
+  margin-bottom: 16px;
   flex-wrap: wrap;
 }
 
 .method-badge {
-  background: rgba(255, 255, 255, 0.2);
+  background: #28a745;
   color: white;
-  padding: 8px 16px;
-  border-radius: 8px;
-  font-size: 0.9rem;
-  font-weight: 700;
+  padding: 6px 12px;
+  border-radius: 4px;
+  font-size: 0.875rem;
+  font-weight: 600;
   letter-spacing: 0.5px;
-  backdrop-filter: blur(10px);
 }
 
 .endpoint-url {
-  background: rgba(255, 255, 255, 0.15);
-  color: white;
-  padding: 12px 20px;
-  border-radius: 8px;
-  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
-  font-size: 0.95rem;
-  font-weight: 500;
+  background: #f8f9fa;
+  border: 1px solid #e9ecef;
+  padding: 8px 12px;
+  border-radius: 4px;
+  font-family: 'SFMono-Regular', 'Monaco', 'Consolas', monospace;
+  font-size: 0.875rem;
+  color: #495057;
   flex: 1;
   min-width: 300px;
-  backdrop-filter: blur(10px);
 }
 
-.api-status {
-  background: rgba(76, 175, 80, 0.9);
-  color: white;
-  padding: 6px 12px;
-  border-radius: 20px;
-  font-size: 0.8rem;
+.status-badge {
+  background: #d4edda;
+  color: #155724;
+  padding: 4px 8px;
+  border-radius: 12px;
+  font-size: 0.75rem;
   font-weight: 600;
 }
 
-.api-features {
+.features-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   gap: 16px;
+  margin-top: 20px;
 }
 
 .feature-item {
-  background: rgba(255, 255, 255, 0.1);
-  padding: 16px 20px;
-  border-radius: 12px;
-  font-size: 0.95rem;
-  line-height: 1.4;
-  backdrop-filter: blur(10px);
-  border: 1px solid rgba(255, 255, 255, 0.1);
+  background: #f8f9fa;
+  padding: 16px;
+  border-radius: 6px;
+  border-left: 4px solid #6c757d;
 }
 
-/* API Tabs Container */
-.api-tabs-container {
+.feature-title {
+  font-weight: 600;
+  color: #495057;
+  margin-bottom: 4px;
+}
+
+.feature-description {
+  font-size: 0.875rem;
+  color: #6c757d;
+}
+
+/* Tabs Navigation */
+.tabs-container {
   background: white;
-  border-radius: 16px;
-  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
-  overflow: hidden;
-  margin-bottom: 40px;
+  border-bottom: 1px solid #e9ecef;
 }
   padding: 2px 6px;
   border-radius: 3px;
@@ -649,50 +659,45 @@
   margin-bottom: 32px;
 }
 
-.api-tabs {
+.tabs-nav {
   display: flex;
-  background: #f8f9fa;
-  border-bottom: 1px solid #e9ecef;
   overflow-x: auto;
+  border-bottom: 1px solid #e9ecef;
 }
 
-.api-tab {
+.tab-button {
   background: none;
   border: none;
   padding: 16px 24px;
-  font-size: 0.95rem;
-  font-weight: 600;
+  font-size: 0.875rem;
+  font-weight: 500;
   color: #6c757d;
   cursor: pointer;
   border-bottom: 3px solid transparent;
-  transition: all 0.3s ease;
   white-space: nowrap;
+  transition: all 0.2s ease;
   position: relative;
 }
 
-.api-tab:hover {
+.tab-button:hover {
   color: #495057;
-  background: #e9ecef;
+  background: #f8f9fa;
 }
 
-.api-tab.active {
-  color: #1a73e8;
+.tab-button.active {
+  color: #495057;
+  border-bottom-color: #495057;
   background: white;
-  border-bottom-color: #1a73e8;
-  font-weight: 700;
-}
-
-.api-tab-content {
-  position: relative;
+  font-weight: 600;
 }
 
-.tab-pane {
+.tab-content {
   display: none;
 }
 
-.tab-pane.active {
+.tab-content.active {
   display: block;
-  padding: 32px;
+  padding: 32px 40px;
 }
 
 .code-header {
@@ -726,31 +731,57 @@
   background: #0860ca;
 }
 
+/* Code Blocks */
+.code-section {
+  margin-bottom: 32px;
+}
+
+.code-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: #2d3748;
+  color: white;
+  padding: 12px 20px;
+  border-radius: 6px 6px 0 0;
+}
+
+.code-title {
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+.copy-button {
+  background: #4a5568;
+  color: white;
+  border: none;
+  padding: 6px 12px;
+  border-radius: 4px;
+  font-size: 0.75rem;
+  cursor: pointer;
+  transition: background 0.2s ease;
+}
+
+.copy-button:hover {
+  background: #2d3748;
+}
+
+.copy-button.copied {
+  background: #38a169;
+}
+
 .code-block {
-  background: #1e1e1e;
-  color: #e1e4e8;
-  padding: 24px;
+  background: #1a202c;
+  color: #e2e8f0;
+  padding: 20px;
   margin: 0;
-  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
-  font-size: 0.9rem;
-  line-height: 1.6;
+  font-family: 'SFMono-Regular', 'Monaco', 'Consolas', monospace;
+  font-size: 0.875rem;
+  line-height: 1.5;
   overflow-x: auto;
-  white-space: pre;
-  border-radius: 12px;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
-  border: 1px solid #333;
-  position: relative;
-}
-
-.code-block::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 3px;
-  background: linear-gradient(90deg, #1a73e8, #4285f4);
-  border-radius: 12px 12px 0 0;
+  border-radius: 0 0 6px 6px;
+  border: 1px solid #2d3748;
+  border-top: none;
 }
 
 /* Syntax Highlighting */
@@ -776,123 +807,122 @@
 .code-block .json-boolean { color: #ff7b72; }
 
 /* Response Section */
-.response-section {
-  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
-  border-radius: 12px;
+.response-demo {
+  background: #f8f9fa;
+  border: 1px solid #e9ecef;
+  border-radius: 8px;
   padding: 24px;
   margin-bottom: 24px;
-  border: 1px solid #dee2e6;
 }
 
-.response-section h3 {
-  color: #1a73e8;
-  font-size: 1.4rem;
-  font-weight: 700;
-  margin-bottom: 12px;
+.response-title {
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: #495057;
+  margin-bottom: 16px;
 }
 
 .response-description {
-  color: #495057;
-  font-size: 1rem;
-  line-height: 1.5;
+  color: #6c757d;
   margin-bottom: 20px;
+  line-height: 1.5;
 }
 
-.species-summary {
+.detection-summary {
   display: grid;
   gap: 12px;
+  margin-bottom: 20px;
 }
 
-.species-item {
+.detection-item {
   display: flex;
   justify-content: space-between;
   align-items: center;
   background: white;
   padding: 12px 16px;
-  border-radius: 8px;
+  border-radius: 6px;
   border: 1px solid #e9ecef;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
 }
 
 .species-name {
-  font-weight: 600;
-  color: #343a40;
+  font-weight: 500;
+  color: #495057;
 }
 
-.confidence {
-  padding: 4px 12px;
-  border-radius: 20px;
-  font-size: 0.85rem;
-  font-weight: 700;
+.confidence-badge {
+  padding: 4px 8px;
+  border-radius: 12px;
+  font-size: 0.75rem;
+  font-weight: 600;
 }
 
-.confidence.high {
+.confidence-high {
   background: #d4edda;
   color: #155724;
 }
 
-.confidence.medium {
+.confidence-medium {
   background: #fff3cd;
   color: #856404;
 }
 
-.more-species {
-  color: #6c757d;
-  font-style: italic;
-  text-align: center;
-  padding: 8px;
-  background: rgba(108, 117, 125, 0.1);
-  border-radius: 6px;
-}
-
-/* Additional Information */
-.api-docs-footer {
-  margin-top: 32px;
+/* Documentation Footer */
+.docs-footer {
+  padding: 40px;
+  background: #f8f9fa;
+  border-top: 1px solid #e9ecef;
 }
 
-.api-docs-info-grid {
+.info-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-  gap: 20px;
+  gap: 24px;
 }
 
-.api-info-card {
+.info-card {
   background: white;
-  padding: 20px;
+  padding: 24px;
   border-radius: 8px;
-  border: 1px solid #e1e5e9;
+  border: 1px solid #e9ecef;
 }
 
-.api-info-card h4 {
-  margin: 0 0 16px 0;
+.info-card h4 {
   font-size: 1rem;
   font-weight: 600;
-  color: #1a1a1a;
+  color: #495057;
+  margin-bottom: 16px;
 }
 
-.api-info-card ul {
-  margin: 0;
-  padding: 0;
+.info-list {
   list-style: none;
 }
 
-.api-info-card li {
-  padding: 6px 0;
-  color: #656d76;
+.info-list li {
+  padding: 8px 0;
+  color: #6c757d;
   font-size: 0.875rem;
-  line-height: 1.5;
-  border-bottom: 1px solid #f6f8fa;
+  border-bottom: 1px solid #f8f9fa;
 }
 
-.api-info-card li:last-child {
+.info-list li:last-child {
   border-bottom: none;
 }
 
-.api-info-card strong {
-  color: #1a1a1a;
+.info-list strong {
+  color: #495057;
   font-weight: 600;
 }
 
+/* Syntax highlighting */
+.keyword { color: #f56565; }
+.string { color: #68d391; }
+.number { color: #63b3ed; }
+.comment { color: #a0aec0; font-style: italic; }
+.function { color: #d6bcfa; }
+.variable { color: #fbb6ce; }
+.operator { color: #f56565; }
+.property { color: #63b3ed; }
+
 /* Responsive Design */
 @media (max-width: 768px) {
   .api-docs-header h2 {

static/js/dashboard.js

@@ -398,29 +398,50 @@ function fallbackCopyTextToClipboard(text) {
 
 // API Documentation Tabs
 document.addEventListener('DOMContentLoaded', function() {
-    const apiTabs = document.querySelectorAll('.api-tab');
-    const tabPanes = document.querySelectorAll('.tab-pane');
+    const tabButtons = document.querySelectorAll('.tab-button');
+    const tabContents = document.querySelectorAll('.tab-content');
 
-    apiTabs.forEach(tab => {
-        tab.addEventListener('click', function() {
+    tabButtons.forEach(button => {
+        button.addEventListener('click', function() {
             const targetTab = this.getAttribute('data-tab');
 
-            // Remove active class from all tabs and panes
-            apiTabs.forEach(t => t.classList.remove('active'));
-            tabPanes.forEach(p => p.classList.remove('active'));
+            // Remove active class from all buttons and contents
+            tabButtons.forEach(b => b.classList.remove('active'));
+            tabContents.forEach(c => c.classList.remove('active'));
 
-            // Add active class to clicked tab
+            // Add active class to clicked button
             this.classList.add('active');
 
-            // Show corresponding tab pane
-            const targetPane = document.getElementById(targetTab + '-tab');
-            if (targetPane) {
-                targetPane.classList.add('active');
+            // Show corresponding tab content
+            const targetContent = document.getElementById(targetTab + '-tab');
+            if (targetContent) {
+                targetContent.classList.add('active');
             }
         });
     });
 });
 
+// Copy code functionality
+function copyCode(elementId) {
+    const codeElement = document.getElementById(elementId);
+    const text = codeElement.textContent;
+
+    navigator.clipboard.writeText(text).then(function() {
+        // Find the copy button and show feedback
+        const button = codeElement.parentElement.querySelector('.copy-button');
+        const originalText = button.textContent;
+        button.textContent = 'Copied!';
+        button.classList.add('copied');
+
+        setTimeout(() => {
+            button.textContent = originalText;
+            button.classList.remove('copied');
+        }, 2000);
+    }).catch(function(err) {
+        console.error('Failed to copy text: ', err);
+    });
+}
+
 // Make dashboard instance globally available for sample image clicks
 let dashboard;
 

templates/dashboard.html

@@ -169,43 +169,56 @@
     <!-- API Documentation Section -->
     <div class="api-documentation-section">
         <div class="api-docs-header">
-            <h2>🚀 API Documentation</h2>
+            <h2>API Documentation</h2>
             <p>Professional marine species identification API for developers and researchers</p>
         </div>
 
-        <div class="api-docs-container">
-            <!-- API Overview Card -->
-            <div class="api-overview-card">
-                <div class="api-endpoint-header">
+        <div class="api-overview">
+            <div class="endpoint-card">
+                <div class="endpoint-header">
                     <span class="method-badge">POST</span>
                     <code class="endpoint-url">https://seamo-ai-fishapi.hf.space/api/v1/detect</code>
-                    <span class="api-status">✅ Live</span>
+                    <span class="status-badge">Live</span>
                 </div>
-                <div class="api-features">
-                    <div class="feature-item">🐟 <strong>691 Species</strong> - Comprehensive marine life detection</div>
-                    <div class="feature-item">⚡ <strong>~2 seconds</strong> - Fast AI-powered processing</div>
-                    <div class="feature-item">📍 <strong>Precise locations</strong> - Bounding boxes with confidence scores</div>
-                    <div class="feature-item">🖼️ <strong>Annotated images</strong> - Visual results with species labels</div>
+
+                <div class="features-grid">
+                    <div class="feature-item">
+                        <div class="feature-title">691 Species</div>
+                        <div class="feature-description">Comprehensive marine life detection</div>
+                    </div>
+                    <div class="feature-item">
+                        <div class="feature-title">~2 seconds</div>
+                        <div class="feature-description">Fast AI-powered processing</div>
+                    </div>
+                    <div class="feature-item">
+                        <div class="feature-title">Precise Locations</div>
+                        <div class="feature-description">Bounding boxes with confidence scores</div>
+                    </div>
+                    <div class="feature-item">
+                        <div class="feature-title">Annotated Images</div>
+                        <div class="feature-description">Visual results with species labels</div>
+                    </div>
                 </div>
             </div>
+        </div>
 
-            <!-- Tabbed Interface -->
-            <div class="api-tabs-container">
-                <div class="api-tabs">
-                    <button class="api-tab active" data-tab="curl">cURL</button>
-                    <button class="api-tab" data-tab="python">Python</button>
-                    <button class="api-tab" data-tab="javascript">JavaScript</button>
-                    <button class="api-tab" data-tab="csharp">C#</button>
-                    <button class="api-tab" data-tab="response">Response</button>
-                </div>
+        <!-- Tabs Navigation -->
+        <div class="tabs-container">
+            <div class="tabs-nav">
+                <button class="tab-button active" data-tab="curl">cURL</button>
+                <button class="tab-button" data-tab="python">Python</button>
+                <button class="tab-button" data-tab="javascript">JavaScript</button>
+                <button class="tab-button" data-tab="csharp">C#</button>
+                <button class="tab-button" data-tab="response">Response</button>
+            </div>
 
-                <div class="api-tab-content">
-                    <!-- cURL Tab -->
-                    <div class="tab-pane active" id="curl-tab">
-                        <div class="code-header">
-                            <span class="code-title">cURL Request</span>
-                            <button class="copy-btn" onclick="copyToClipboard('curl-code')">Copy</button>
-                        </div>
+            <!-- cURL Tab -->
+            <div class="tab-content active" id="curl-tab">
+                <div class="code-section">
+                    <div class="code-header">
+                        <span class="code-title">cURL Request</span>
+                        <button class="copy-button" onclick="copyCode('curl-code')">Copy</button>
+                    </div>
                         <pre class="code-block" id="curl-code"><span class="comment"># Easy one-liner with automatic base64 conversion</span>
 <span class="cmd">curl</span> <span class="flag">-X</span> <span class="method">POST</span> <span class="string">"https://seamo-ai-fishapi.hf.space/api/v1/detect"</span> <span class="operator">\</span>
   <span class="flag">-H</span> <span class="string">"Content-Type: application/json"</span> <span class="operator">\</span>
@@ -215,14 +228,16 @@
     \"iou_threshold\": 0.45,
     \"return_annotated_image\": true
   }"</span></pre>
-                    </div>
+                </div>
+            </div>
 
-                    <!-- Python Tab -->
-                    <div class="tab-pane" id="python-tab">
-                        <div class="code-header">
-                            <span class="code-title">Python Request</span>
-                            <button class="copy-btn" onclick="copyToClipboard('python-code')">Copy</button>
-                        </div>
+            <!-- Python Tab -->
+            <div class="tab-content" id="python-tab">
+                <div class="code-section">
+                    <div class="code-header">
+                        <span class="code-title">Python Request</span>
+                        <button class="copy-button" onclick="copyCode('python-code')">Copy</button>
+                    </div>
                         <pre class="code-block" id="python-code"><span class="keyword">import</span> <span class="module">requests</span>
 <span class="keyword">import</span> <span class="module">base64</span>
 
@@ -245,14 +260,16 @@
 <span class="function">print</span>(<span class="string">f"Found </span>{<span class="function">len</span>(<span class="variable">result</span>[<span class="string">'detections'</span>])}<span class="string"> species"</span>)
 <span class="keyword">for</span> <span class="variable">detection</span> <span class="keyword">in</span> <span class="variable">result</span>[<span class="string">'detections'</span>]:
     <span class="function">print</span>(<span class="string">f"- </span>{<span class="variable">detection</span>[<span class="string">'class_name'</span>]}<span class="string">: </span>{<span class="variable">detection</span>[<span class="string">'confidence'</span>]:<span class="string">.2%</span>}<span class="string">"</span>)</pre>
-                    </div>
+                </div>
+            </div>
 
-                    <!-- JavaScript Tab -->
-                    <div class="tab-pane" id="javascript-tab">
-                        <div class="code-header">
-                            <span class="code-title">JavaScript Request</span>
-                            <button class="copy-btn" onclick="copyToClipboard('js-code')">Copy</button>
-                        </div>
+            <!-- JavaScript Tab -->
+            <div class="tab-content" id="javascript-tab">
+                <div class="code-section">
+                    <div class="code-header">
+                        <span class="code-title">JavaScript Request</span>
+                        <button class="copy-button" onclick="copyCode('js-code')">Copy</button>
+                    </div>
                         <pre class="code-block" id="js-code"><span class="comment">// Convert file to base64</span>
 <span class="keyword">function</span> <span class="function">fileToBase64</span>(<span class="variable">file</span>) {
     <span class="keyword">return</span> <span class="keyword">new</span> <span class="function">Promise</span>((<span class="variable">resolve</span>, <span class="variable">reject</span>) <span class="operator">=></span> {
@@ -285,14 +302,16 @@
     });
 })
 .<span class="function">catch</span>(<span class="variable">error</span> <span class="operator">=></span> <span class="variable">console</span>.<span class="function">error</span>(<span class="string">'Error:'</span>, <span class="variable">error</span>));</pre>
-                    </div>
+                </div>
+            </div>
 
-                    <!-- C# Tab -->
-                    <div class="tab-pane" id="csharp-tab">
-                        <div class="code-header">
-                            <span class="code-title">C# Request</span>
-                            <button class="copy-btn" onclick="copyToClipboard('csharp-code')">Copy</button>
-                        </div>
+            <!-- C# Tab -->
+            <div class="tab-content" id="csharp-tab">
+                <div class="code-section">
+                    <div class="code-header">
+                        <span class="code-title">C# Request</span>
+                        <button class="copy-button" onclick="copyCode('csharp-code')">Copy</button>
+                    </div>
                         <pre class="code-block" id="csharp-code"><span class="keyword">using</span> <span class="namespace">System</span>;
 <span class="keyword">using</span> <span class="namespace">System.IO</span>;
 <span class="keyword">using</span> <span class="namespace">System.Net.Http</span>;
@@ -323,38 +342,38 @@
 
 <span class="keyword">var</span> <span class="variable">result</span> <span class="operator">=</span> <span class="keyword">await</span> <span class="variable">response</span>.<span class="property">Content</span>.<span class="function">ReadAsStringAsync</span>();
 <span class="class">Console</span>.<span class="function">WriteLine</span>(<span class="variable">result</span>);</pre>
+                </div>
+            </div>
+
+            <!-- Response Tab -->
+            <div class="tab-content" id="response-tab">
+                <div class="response-demo">
+                    <div class="response-title">Example API Response</div>
+                    <div class="response-description">
+                        Actual response from testing with a marine image - detected <strong>8 marine species</strong> in 1.79 seconds:
                     </div>
 
-                    <!-- Response Tab -->
-                    <div class="tab-pane" id="response-tab">
-                        <div class="response-section">
-                            <h3>📊 Real API Response</h3>
-                            <p class="response-description">
-                                Actual response from testing with <strong>red_fish.png</strong> -
-                                detected <strong>8 marine species</strong> in 1.79 seconds:
-                            </p>
-
-                            <div class="species-summary">
-                                <div class="species-item">
-                                    <span class="species-name">🐟 Sebastolobus (Rockfish)</span>
-                                    <span class="confidence high">86.7%</span>
-                                </div>
-                                <div class="species-item">
-                                    <span class="species-name">🪸 Octocorallia (Soft Coral)</span>
-                                    <span class="confidence medium">69.7%</span>
-                                </div>
-                                <div class="species-item">
-                                    <span class="species-name">🥒 Psolus squamatus (Sea Cucumber)</span>
-                                    <span class="confidence medium">66.3%</span>
-                                </div>
-                                <div class="more-species">+ 5 more species detected with precise bounding boxes</div>
-                            </div>
+                    <div class="detection-summary">
+                        <div class="detection-item">
+                            <span class="species-name">Sebastolobus (Rockfish)</span>
+                            <span class="confidence-badge confidence-high">86.7%</span>
                         </div>
-
-                        <div class="code-header">
-                            <span class="code-title">JSON Response</span>
-                            <button class="copy-btn" onclick="copyToClipboard('response-code')">Copy</button>
+                        <div class="detection-item">
+                            <span class="species-name">Octocorallia (Soft Coral)</span>
+                            <span class="confidence-badge confidence-medium">69.7%</span>
                         </div>
+                        <div class="detection-item">
+                            <span class="species-name">Psolus squamatus (Sea Cucumber)</span>
+                            <span class="confidence-badge confidence-medium">66.3%</span>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="code-section">
+                    <div class="code-header">
+                        <span class="code-title">JSON Response</span>
+                        <button class="copy-button" onclick="copyCode('response-code')">Copy</button>
+                    </div>
                         <pre class="code-block" id="response-code">{
   <span class="json-key">"detections"</span>: [
     {
@@ -389,36 +408,39 @@
                 </div>
             </div>
 
-            <!-- Additional Information -->
-            <div class="api-docs-footer">
-                <div class="api-docs-info-grid">
-                    <div class="api-info-card">
-                        <h4>Parameters</h4>
-                        <ul>
-                            <li><strong>file</strong> (required): Image file (JPG, PNG, WebP)</li>
-                            <li><strong>confidence_threshold</strong>: Min confidence (0.0-1.0, default: 0.25)</li>
-                            <li><strong>iou_threshold</strong>: IoU threshold (0.0-1.0, default: 0.45)</li>
-                        </ul>
-                    </div>
-                    <div class="api-info-card">
-                        <h4>Additional Endpoints</h4>
-                        <ul>
-                            <li><strong>GET /health</strong>: API health status</li>
-                            <li><strong>GET /api/v1/species</strong>: List all supported species</li>
-                            <li><strong>GET /docs</strong>: Interactive Swagger documentation</li>
-                        </ul>
-                    </div>
-                    <div class="api-info-card">
-                        <h4>Rate Limits</h4>
-                        <ul>
-                            <li><strong>Free tier</strong>: 100 requests/hour</li>
-                            <li><strong>Max file size</strong>: 10MB</li>
-                            <li><strong>Supported formats</strong>: JPEG, PNG, WebP</li>
-                        </ul>
-                    </div>
+        <!-- Documentation Footer -->
+        <div class="docs-footer">
+            <div class="info-grid">
+                <div class="info-card">
+                    <h4>Request Parameters</h4>
+                    <ul class="info-list">
+                        <li><strong>image</strong> (required): Base64 encoded image data</li>
+                        <li><strong>confidence_threshold</strong>: Minimum confidence (0.0-1.0, default: 0.25)</li>
+                        <li><strong>iou_threshold</strong>: IoU threshold (0.0-1.0, default: 0.45)</li>
+                        <li><strong>return_annotated_image</strong>: Return annotated image (boolean, default: true)</li>
+                    </ul>
+                </div>
+                <div class="info-card">
+                    <h4>Response Format</h4>
+                    <ul class="info-list">
+                        <li><strong>detections</strong>: Array of detected species with bounding boxes</li>
+                        <li><strong>processing_time</strong>: Time taken for inference in seconds</li>
+                        <li><strong>model_info</strong>: Information about the AI model used</li>
+                        <li><strong>image_dimensions</strong>: Original image width and height</li>
+                    </ul>
+                </div>
+                <div class="info-card">
+                    <h4>Model Information</h4>
+                    <ul class="info-list">
+                        <li><strong>Model</strong>: marina-benthic-33k</li>
+                        <li><strong>Species</strong>: 691 marine species supported</li>
+                        <li><strong>Performance</strong>: ~2 seconds average processing</li>
+                        <li><strong>Accuracy</strong>: High precision bounding boxes</li>
+                    </ul>
                 </div>
             </div>
         </div>
+        </div>
     </div>
 </div>
 {% endblock %}