update: api usage tab design

static/css/dashboard-simple.css

@@ -520,13 +520,13 @@
 .api-documentation-section {
   margin-top: 60px;
   padding: 40px 0;
-  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
-  border-top: 1px solid #e2e8f0;
+  background: #fafbfc;
+  border-top: 1px solid #e1e5e9;
 }
 
 .api-docs-header {
   text-align: center;
-  margin-bottom: 50px;
+  margin-bottom: 40px;
   max-width: 800px;
   margin-left: auto;
   margin-right: auto;
@@ -534,151 +534,201 @@
 }
 
 .api-docs-header h2 {
-  font-size: 2.5rem;
-  font-weight: 700;
-  color: #1e293b;
-  margin-bottom: 16px;
-  background: linear-gradient(135deg, #2563eb, #1d4ed8);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
+  font-size: 2rem;
+  font-weight: 600;
+  color: #1a1a1a;
+  margin-bottom: 12px;
 }
 
 .api-docs-header p {
-  font-size: 1.25rem;
-  color: #64748b;
-  line-height: 1.6;
+  font-size: 1rem;
+  color: #666;
+  line-height: 1.5;
 }
 
-.api-docs-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
-  gap: 24px;
-  max-width: 1400px;
+.api-docs-container {
+  max-width: 1200px;
   margin: 0 auto;
   padding: 0 20px;
 }
 
-.api-docs-card {
+/* API Endpoint Info */
+.api-endpoint-info {
   background: white;
-  border-radius: 12px;
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-  overflow: hidden;
-  transition: all 0.3s ease;
-  border: 1px solid #e2e8f0;
+  border: 1px solid #e1e5e9;
+  border-radius: 8px;
+  padding: 24px;
+  margin-bottom: 32px;
 }
 
-.api-docs-card:hover {
-  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-  transform: translateY(-2px);
+.endpoint-method {
+  display: inline-block;
+  background: #0969da;
+  color: white;
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: 0.5px;
+  margin-right: 12px;
 }
 
-.api-docs-card-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 20px 24px;
-  background: linear-gradient(135deg, #f8fafc, #f1f5f9);
-  border-bottom: 1px solid #e2e8f0;
+.endpoint-url {
+  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
+  font-size: 0.9rem;
+  color: #1a1a1a;
+  background: #f6f8fa;
+  padding: 2px 6px;
+  border-radius: 3px;
 }
 
-.api-docs-card-header h3 {
-  margin: 0;
-  font-size: 1.25rem;
-  font-weight: 600;
-  color: #1e293b;
+.endpoint-description {
+  margin: 16px 0 0 0;
+  color: #656d76;
+  font-size: 0.9rem;
+  line-height: 1.5;
 }
 
-.copy-btn {
-  background: #2563eb;
-  color: white;
+/* Tabbed Interface */
+.api-tabs-container {
+  background: white;
+  border: 1px solid #e1e5e9;
+  border-radius: 8px;
+  overflow: hidden;
+  margin-bottom: 32px;
+}
+
+.api-tabs {
+  display: flex;
+  background: #f6f8fa;
+  border-bottom: 1px solid #e1e5e9;
+  overflow-x: auto;
+}
+
+.api-tab {
+  background: none;
   border: none;
-  padding: 8px 16px;
-  border-radius: 6px;
+  padding: 12px 20px;
   font-size: 0.875rem;
   font-weight: 500;
+  color: #656d76;
   cursor: pointer;
+  border-bottom: 2px solid transparent;
   transition: all 0.2s ease;
+  white-space: nowrap;
 }
 
-.copy-btn:hover {
-  background: #1d4ed8;
-  transform: scale(1.05);
+.api-tab:hover {
+  color: #0969da;
+  background: #ffffff;
 }
 
-.api-docs-card-content {
-  padding: 24px;
+.api-tab.active {
+  color: #0969da;
+  background: white;
+  border-bottom-color: #0969da;
 }
 
-.api-endpoint {
+.api-tab-content {
+  position: relative;
+}
+
+.tab-pane {
+  display: none;
+}
+
+.tab-pane.active {
+  display: block;
+}
+
+.code-header {
   display: flex;
+  justify-content: space-between;
   align-items: center;
-  gap: 12px;
-  margin-bottom: 16px;
-  padding: 12px 16px;
-  background: #f1f5f9;
-  border-radius: 8px;
-  border-left: 4px solid #2563eb;
+  padding: 16px 20px;
+  background: #f6f8fa;
+  border-bottom: 1px solid #e1e5e9;
 }
 
-.endpoint-method {
-  background: #2563eb;
+.code-title {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #1a1a1a;
+}
+
+.copy-btn {
+  background: #0969da;
   color: white;
-  padding: 4px 8px;
+  border: none;
+  padding: 6px 12px;
   border-radius: 4px;
   font-size: 0.75rem;
-  font-weight: 600;
-  letter-spacing: 0.05em;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
 }
 
-.endpoint-url {
-  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
-  font-size: 0.875rem;
-  color: #1e293b;
-  word-break: break-all;
+.copy-btn:hover {
+  background: #0860ca;
 }
 
 .code-block {
-  background: #1e293b;
-  color: #e2e8f0;
+  background: #0d1117;
+  color: #e6edf3;
   padding: 20px;
-  border-radius: 8px;
-  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
-  font-size: 0.875rem;
-  line-height: 1.6;
-  overflow-x: auto;
   margin: 0;
-  white-space: pre-wrap;
-  word-wrap: break-word;
-}
-
+  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
+  font-size: 0.8rem;
+  line-height: 1.45;
+  overflow-x: auto;
+  white-space: pre;
+}
+
+/* Syntax Highlighting */
+.code-block .keyword { color: #ff7b72; }
+.code-block .string { color: #a5d6ff; }
+.code-block .number { color: #79c0ff; }
+.code-block .comment { color: #8b949e; font-style: italic; }
+.code-block .function { color: #d2a8ff; }
+.code-block .variable { color: #ffa657; }
+.code-block .operator { color: #ff7b72; }
+.code-block .property { color: #79c0ff; }
+.code-block .class { color: #7ee787; }
+.code-block .module { color: #7ee787; }
+.code-block .namespace { color: #7ee787; }
+.code-block .method { color: #d2a8ff; }
+.code-block .flag { color: #ff7b72; }
+.code-block .cmd { color: #7ee787; }
+
+/* JSON Syntax Highlighting */
+.code-block .json-key { color: #79c0ff; }
+.code-block .json-string { color: #a5d6ff; }
+.code-block .json-number { color: #79c0ff; }
+.code-block .json-boolean { color: #ff7b72; }
+
+/* Additional Information */
 .api-docs-footer {
-  margin-top: 50px;
-  max-width: 1400px;
-  margin-left: auto;
-  margin-right: auto;
-  padding: 0 20px;
+  margin-top: 32px;
 }
 
 .api-docs-info-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-  gap: 24px;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 20px;
 }
 
 .api-info-card {
   background: white;
-  padding: 24px;
-  border-radius: 12px;
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
-  border: 1px solid #e2e8f0;
+  padding: 20px;
+  border-radius: 8px;
+  border: 1px solid #e1e5e9;
 }
 
 .api-info-card h4 {
   margin: 0 0 16px 0;
-  font-size: 1.125rem;
+  font-size: 1rem;
   font-weight: 600;
-  color: #1e293b;
+  color: #1a1a1a;
 }
 
 .api-info-card ul {
@@ -688,10 +738,11 @@
 }
 
 .api-info-card li {
-  padding: 8px 0;
-  border-bottom: 1px solid #f1f5f9;
-  color: #475569;
+  padding: 6px 0;
+  color: #656d76;
+  font-size: 0.875rem;
   line-height: 1.5;
+  border-bottom: 1px solid #f6f8fa;
 }
 
 .api-info-card li:last-child {
@@ -699,47 +750,52 @@
 }
 
 .api-info-card strong {
-  color: #1e293b;
+  color: #1a1a1a;
   font-weight: 600;
 }
 
-/* Responsive Design for API Docs */
+/* Responsive Design */
 @media (max-width: 768px) {
   .api-docs-header h2 {
-    font-size: 2rem;
+    font-size: 1.75rem;
   }
 
-  .api-docs-header p {
-    font-size: 1.125rem;
+  .api-docs-container {
+    padding: 0 16px;
   }
 
-  .api-docs-grid {
-    grid-template-columns: 1fr;
-    padding: 0 16px;
+  .api-endpoint-info {
+    padding: 20px;
   }
 
-  .api-docs-card-header {
-    padding: 16px 20px;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 12px;
+  .endpoint-url {
+    font-size: 0.8rem;
+    word-break: break-all;
   }
 
-  .api-docs-card-content {
-    padding: 20px;
+  .api-tabs {
+    flex-wrap: nowrap;
+    overflow-x: auto;
   }
 
-  .code-block {
+  .api-tab {
+    padding: 10px 16px;
     font-size: 0.8rem;
-    padding: 16px;
   }
 
-  .endpoint-url {
-    font-size: 0.8rem;
+  .code-header {
+    padding: 12px 16px;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+  }
+
+  .code-block {
+    font-size: 0.75rem;
+    padding: 16px;
   }
 
   .api-docs-info-grid {
     grid-template-columns: 1fr;
-    padding: 0 16px;
   }
 }

static/js/dashboard.js

@@ -396,6 +396,31 @@ function fallbackCopyTextToClipboard(text) {
     document.body.removeChild(textArea);
 }
 
+// API Documentation Tabs
+document.addEventListener('DOMContentLoaded', function() {
+    const apiTabs = document.querySelectorAll('.api-tab');
+    const tabPanes = document.querySelectorAll('.tab-pane');
+
+    apiTabs.forEach(tab => {
+        tab.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'));
+
+            // Add active class to clicked tab
+            this.classList.add('active');
+
+            // Show corresponding tab pane
+            const targetPane = document.getElementById(targetTab + '-tab');
+            if (targetPane) {
+                targetPane.classList.add('active');
+            }
+        });
+    });
+});
+
 // Make dashboard instance globally available for sample image clicks
 let dashboard;
 

templates/dashboard.html

@@ -173,183 +173,209 @@
             <p>Integrate marine species identification into your applications with our REST API</p>
         </div>
 
-        <div class="api-docs-grid">
-            <!-- Quick Start -->
-            <div class="api-docs-card">
-                <div class="api-docs-card-header">
-                    <h3>🚀 Quick Start</h3>
-                </div>
-                <div class="api-docs-card-content">
-                    <div class="api-endpoint">
-                        <div class="endpoint-method">POST</div>
-                        <div class="endpoint-url">https://seamo-ai-fishapi.hf.space/api/v1/identify</div>
-                    </div>
-                    <p>Upload an image and get species identification results with bounding boxes and confidence scores.</p>
-                </div>
+        <div class="api-docs-container">
+            <!-- API Endpoint Info -->
+            <div class="api-endpoint-info">
+                <div class="endpoint-method">POST</div>
+                <div class="endpoint-url">https://seamo-ai-fishapi.hf.space/api/v1/detect</div>
+                <p class="endpoint-description">Upload an image and get species identification results with bounding boxes and confidence scores.</p>
             </div>
 
-            <!-- cURL Example -->
-            <div class="api-docs-card">
-                <div class="api-docs-card-header">
-                    <h3>📡 cURL</h3>
-                    <button class="copy-btn" onclick="copyToClipboard('curl-code')">Copy</button>
+            <!-- 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>
-                <div class="api-docs-card-content">
-                    <pre class="code-block" id="curl-code">curl -X POST "https://seamo-ai-fishapi.hf.space/api/v1/identify" \
-  -H "Content-Type: multipart/form-data" \
-  -F "file=@your_image.jpg" \
-  -F "confidence_threshold=0.25" \
-  -F "iou_threshold=0.45"</pre>
-                </div>
-            </div>
 
-            <!-- Python Example -->
-            <div class="api-docs-card">
-                <div class="api-docs-card-header">
-                    <h3>🐍 Python</h3>
-                    <button class="copy-btn" onclick="copyToClipboard('python-code')">Copy</button>
-                </div>
-                <div class="api-docs-card-content">
-                    <pre class="code-block" id="python-code">import requests
+                <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>
+                        <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>
+  <span class="flag">-d</span> <span class="string">"{
+    \"image\": \"$(base64 -i your_image.jpg | tr -d '\n')\",
+    \"confidence_threshold\": 0.25,
+    \"iou_threshold\": 0.45,
+    \"return_annotated_image\": true
+  }"</span></pre>
+                    </div>
 
-url = "https://seamo-ai-fishapi.hf.space/api/v1/identify"
+                    <!-- 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>
+                        <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>
 
-with open("your_image.jpg", "rb") as f:
-    files = {"file": f}
-    data = {
-        "confidence_threshold": 0.25,
-        "iou_threshold": 0.45
-    }
+<span class="variable">url</span> <span class="operator">=</span> <span class="string">"https://seamo-ai-fishapi.hf.space/api/v1/detect"</span>
 
-    response = requests.post(url, files=files, data=data)
-    result = response.json()
+<span class="comment"># Read and encode image</span>
+<span class="keyword">with</span> <span class="function">open</span>(<span class="string">"your_image.jpg"</span>, <span class="string">"rb"</span>) <span class="keyword">as</span> <span class="variable">f</span>:
+    <span class="variable">image_data</span> <span class="operator">=</span> <span class="variable">base64</span>.<span class="function">b64encode</span>(<span class="variable">f</span>.<span class="function">read</span>()).<span class="function">decode</span>()
 
-    print(f"Found {len(result['detections'])} species")
-    for detection in result['detections']:
-        print(f"- {detection['class_name']}: {detection['confidence']:.2%}")</pre>
-                </div>
-            </div>
+<span class="variable">payload</span> <span class="operator">=</span> {
+    <span class="string">"image"</span>: <span class="variable">image_data</span>,
+    <span class="string">"confidence_threshold"</span>: <span class="number">0.25</span>,
+    <span class="string">"iou_threshold"</span>: <span class="number">0.45</span>,
+    <span class="string">"return_annotated_image"</span>: <span class="keyword">True</span>
+}
 
-            <!-- JavaScript Example -->
-            <div class="api-docs-card">
-                <div class="api-docs-card-header">
-                    <h3>🟨 JavaScript</h3>
-                    <button class="copy-btn" onclick="copyToClipboard('js-code')">Copy</button>
-                </div>
-                <div class="api-docs-card-content">
-                    <pre class="code-block" id="js-code">const formData = new FormData();
-formData.append('file', fileInput.files[0]);
-formData.append('confidence_threshold', '0.25');
-formData.append('iou_threshold', '0.45');
-
-fetch('https://seamo-ai-fishapi.hf.space/api/v1/identify', {
-    method: 'POST',
-    body: formData
+<span class="variable">response</span> <span class="operator">=</span> <span class="variable">requests</span>.<span class="function">post</span>(<span class="variable">url</span>, <span class="variable">json</span>=<span class="variable">payload</span>)
+<span class="variable">result</span> <span class="operator">=</span> <span class="variable">response</span>.<span class="function">json</span>()
+
+<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>
+
+                    <!-- 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>
+                        <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> {
+        <span class="keyword">const</span> <span class="variable">reader</span> <span class="operator">=</span> <span class="keyword">new</span> <span class="function">FileReader</span>();
+        <span class="variable">reader</span>.<span class="property">onload</span> <span class="operator">=</span> () <span class="operator">=></span> <span class="function">resolve</span>(<span class="variable">reader</span>.<span class="property">result</span>.<span class="function">split</span>(<span class="string">','</span>)[<span class="number">1</span>]);
+        <span class="variable">reader</span>.<span class="property">onerror</span> <span class="operator">=</span> <span class="variable">reject</span>;
+        <span class="variable">reader</span>.<span class="function">readAsDataURL</span>(<span class="variable">file</span>);
+    });
+}
+
+<span class="keyword">const</span> <span class="variable">imageBase64</span> <span class="operator">=</span> <span class="keyword">await</span> <span class="function">fileToBase64</span>(<span class="variable">fileInput</span>.<span class="property">files</span>[<span class="number">0</span>]);
+
+<span class="keyword">const</span> <span class="variable">payload</span> <span class="operator">=</span> {
+    <span class="property">image</span>: <span class="variable">imageBase64</span>,
+    <span class="property">confidence_threshold</span>: <span class="number">0.25</span>,
+    <span class="property">iou_threshold</span>: <span class="number">0.45</span>,
+    <span class="property">return_annotated_image</span>: <span class="keyword">true</span>
+};
+
+<span class="function">fetch</span>(<span class="string">'https://seamo-ai-fishapi.hf.space/api/v1/detect'</span>, {
+    <span class="property">method</span>: <span class="string">'POST'</span>,
+    <span class="property">headers</span>: { <span class="string">'Content-Type'</span>: <span class="string">'application/json'</span> },
+    <span class="property">body</span>: <span class="function">JSON</span>.<span class="function">stringify</span>(<span class="variable">payload</span>)
 })
-.then(response => response.json())
-.then(data => {
-    console.log(`Found ${data.detections.length} species`);
-    data.detections.forEach(detection => {
-        console.log(`${detection.class_name}: ${(detection.confidence * 100).toFixed(1)}%`);
+.<span class="function">then</span>(<span class="variable">response</span> <span class="operator">=></span> <span class="variable">response</span>.<span class="function">json</span>())
+.<span class="function">then</span>(<span class="variable">data</span> <span class="operator">=></span> {
+    <span class="variable">console</span>.<span class="function">log</span>(<span class="string">`Found </span>${<span class="variable">data</span>.<span class="property">detections</span>.<span class="property">length</span>}<span class="string"> species`</span>);
+    <span class="variable">data</span>.<span class="property">detections</span>.<span class="function">forEach</span>(<span class="variable">detection</span> <span class="operator">=></span> {
+        <span class="variable">console</span>.<span class="function">log</span>(<span class="string">`</span>${<span class="variable">detection</span>.<span class="property">class_name</span>}<span class="string">: </span>${(<span class="variable">detection</span>.<span class="property">confidence</span> <span class="operator">*</span> <span class="number">100</span>).<span class="function">toFixed</span>(<span class="number">1</span>)}<span class="string">%`</span>);
     });
 })
-.catch(error => console.error('Error:', error));</pre>
-                </div>
-            </div>
+.<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>
 
-            <!-- .NET C# Example -->
-            <div class="api-docs-card">
-                <div class="api-docs-card-header">
-                    <h3>🔷 C# (.NET)</h3>
-                    <button class="copy-btn" onclick="copyToClipboard('dotnet-code')">Copy</button>
-                </div>
-                <div class="api-docs-card-content">
-                    <pre class="code-block" id="dotnet-code">using System;
-using System.IO;
-using System.Net.Http;
-using System.Threading.Tasks;
-
-var client = new HttpClient();
-var form = new MultipartFormDataContent();
-
-// Add image file
-var fileContent = new ByteArrayContent(File.ReadAllBytes("your_image.jpg"));
-fileContent.Headers.ContentType = new System.Net.Http.Headers.MediaTypeHeaderValue("image/jpeg");
-form.Add(fileContent, "file", "your_image.jpg");
-
-// Add parameters
-form.Add(new StringContent("0.25"), "confidence_threshold");
-form.Add(new StringContent("0.45"), "iou_threshold");
-
-var response = await client.PostAsync(
-    "https://seamo-ai-fishapi.hf.space/api/v1/identify",
-    form
+                    <!-- 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>
+                        <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>;
+<span class="keyword">using</span> <span class="namespace">System.Text</span>;
+<span class="keyword">using</span> <span class="namespace">System.Threading.Tasks</span>;
+<span class="keyword">using</span> <span class="namespace">Newtonsoft.Json</span>;
+
+<span class="keyword">var</span> <span class="variable">client</span> <span class="operator">=</span> <span class="keyword">new</span> <span class="function">HttpClient</span>();
+
+<span class="comment">// Read and encode image</span>
+<span class="keyword">var</span> <span class="variable">imageBytes</span> <span class="operator">=</span> <span class="class">File</span>.<span class="function">ReadAllBytes</span>(<span class="string">"your_image.jpg"</span>);
+<span class="keyword">var</span> <span class="variable">imageBase64</span> <span class="operator">=</span> <span class="class">Convert</span>.<span class="function">ToBase64String</span>(<span class="variable">imageBytes</span>);
+
+<span class="keyword">var</span> <span class="variable">payload</span> <span class="operator">=</span> <span class="keyword">new</span> {
+    <span class="property">image</span> = <span class="variable">imageBase64</span>,
+    <span class="property">confidence_threshold</span> = <span class="number">0.25</span>,
+    <span class="property">iou_threshold</span> = <span class="number">0.45</span>,
+    <span class="property">return_annotated_image</span> = <span class="keyword">true</span>
+};
+
+<span class="keyword">var</span> <span class="variable">json</span> <span class="operator">=</span> <span class="class">JsonConvert</span>.<span class="function">SerializeObject</span>(<span class="variable">payload</span>);
+<span class="keyword">var</span> <span class="variable">content</span> <span class="operator">=</span> <span class="keyword">new</span> <span class="function">StringContent</span>(<span class="variable">json</span>, <span class="class">Encoding</span>.<span class="property">UTF8</span>, <span class="string">"application/json"</span>);
+
+<span class="keyword">var</span> <span class="variable">response</span> <span class="operator">=</span> <span class="keyword">await</span> <span class="variable">client</span>.<span class="function">PostAsync</span>(
+    <span class="string">"https://seamo-ai-fishapi.hf.space/api/v1/detect"</span>,
+    <span class="variable">content</span>
 );
 
-var result = await response.Content.ReadAsStringAsync();
-Console.WriteLine(result);</pre>
-                </div>
-            </div>
+<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>
 
-            <!-- Response Format -->
-            <div class="api-docs-card">
-                <div class="api-docs-card-header">
-                    <h3>📋 Response Format</h3>
-                    <button class="copy-btn" onclick="copyToClipboard('response-code')">Copy</button>
-                </div>
-                <div class="api-docs-card-content">
-                    <pre class="code-block" id="response-code">{
-  "success": true,
-  "detections": [
+                    <!-- Response Tab -->
+                    <div class="tab-pane" id="response-tab">
+                        <div class="code-header">
+                            <span class="code-title">JSON Response</span>
+                            <button class="copy-btn" onclick="copyToClipboard('response-code')">Copy</button>
+                        </div>
+                        <pre class="code-block" id="response-code">{
+  <span class="json-key">"success"</span>: <span class="json-boolean">true</span>,
+  <span class="json-key">"detections"</span>: [
     {
-      "class_name": "Red Snapper",
-      "confidence": 0.89,
-      "bbox": [120, 80, 340, 280],
-      "class_id": 42
+      <span class="json-key">"class_name"</span>: <span class="json-string">"Red Snapper"</span>,
+      <span class="json-key">"confidence"</span>: <span class="json-number">0.89</span>,
+      <span class="json-key">"bbox"</span>: [<span class="json-number">120</span>, <span class="json-number">80</span>, <span class="json-number">340</span>, <span class="json-number">280</span>],
+      <span class="json-key">"class_id"</span>: <span class="json-number">42</span>
     }
   ],
-  "processing_time": 1.23,
-  "image_info": {
-    "width": 800,
-    "height": 600,
-    "format": "JPEG"
+  <span class="json-key">"processing_time"</span>: <span class="json-number">1.23</span>,
+  <span class="json-key">"image_info"</span>: {
+    <span class="json-key">"width"</span>: <span class="json-number">800</span>,
+    <span class="json-key">"height"</span>: <span class="json-number">600</span>,
+    <span class="json-key">"format"</span>: <span class="json-string">"JPEG"</span>
   },
-  "model_info": {
-    "name": "marina-benthic-33k",
-    "version": "v1.0",
-    "total_classes": 691
+  <span class="json-key">"model_info"</span>: {
+    <span class="json-key">"name"</span>: <span class="json-string">"marina-benthic-33k"</span>,
+    <span class="json-key">"version"</span>: <span class="json-string">"v1.0"</span>,
+    <span class="json-key">"total_classes"</span>: <span class="json-number">691</span>
   }
 }</pre>
+                    </div>
                 </div>
             </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>
+            <!-- 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>
                 </div>
             </div>
         </div>