feat: UI API usage guide

static/css/dashboard-simple.css

@@ -515,3 +515,231 @@
     padding: 4px 6px;
   }
 }
+
+/* API Documentation Section */
+.api-documentation-section {
+  margin-top: 60px;
+  padding: 40px 0;
+  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
+  border-top: 1px solid #e2e8f0;
+}
+
+.api-docs-header {
+  text-align: center;
+  margin-bottom: 50px;
+  max-width: 800px;
+  margin-left: auto;
+  margin-right: auto;
+  padding: 0 20px;
+}
+
+.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;
+}
+
+.api-docs-header p {
+  font-size: 1.25rem;
+  color: #64748b;
+  line-height: 1.6;
+}
+
+.api-docs-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+  gap: 24px;
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 0 20px;
+}
+
+.api-docs-card {
+  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;
+}
+
+.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);
+}
+
+.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;
+}
+
+.api-docs-card-header h3 {
+  margin: 0;
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: #1e293b;
+}
+
+.copy-btn {
+  background: #2563eb;
+  color: white;
+  border: none;
+  padding: 8px 16px;
+  border-radius: 6px;
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.copy-btn:hover {
+  background: #1d4ed8;
+  transform: scale(1.05);
+}
+
+.api-docs-card-content {
+  padding: 24px;
+}
+
+.api-endpoint {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 16px;
+  padding: 12px 16px;
+  background: #f1f5f9;
+  border-radius: 8px;
+  border-left: 4px solid #2563eb;
+}
+
+.endpoint-method {
+  background: #2563eb;
+  color: white;
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: 0.05em;
+}
+
+.endpoint-url {
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+  font-size: 0.875rem;
+  color: #1e293b;
+  word-break: break-all;
+}
+
+.code-block {
+  background: #1e293b;
+  color: #e2e8f0;
+  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;
+}
+
+.api-docs-footer {
+  margin-top: 50px;
+  max-width: 1400px;
+  margin-left: auto;
+  margin-right: auto;
+  padding: 0 20px;
+}
+
+.api-docs-info-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 24px;
+}
+
+.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;
+}
+
+.api-info-card h4 {
+  margin: 0 0 16px 0;
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: #1e293b;
+}
+
+.api-info-card ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.api-info-card li {
+  padding: 8px 0;
+  border-bottom: 1px solid #f1f5f9;
+  color: #475569;
+  line-height: 1.5;
+}
+
+.api-info-card li:last-child {
+  border-bottom: none;
+}
+
+.api-info-card strong {
+  color: #1e293b;
+  font-weight: 600;
+}
+
+/* Responsive Design for API Docs */
+@media (max-width: 768px) {
+  .api-docs-header h2 {
+    font-size: 2rem;
+  }
+
+  .api-docs-header p {
+    font-size: 1.125rem;
+  }
+
+  .api-docs-grid {
+    grid-template-columns: 1fr;
+    padding: 0 16px;
+  }
+
+  .api-docs-card-header {
+    padding: 16px 20px;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 12px;
+  }
+
+  .api-docs-card-content {
+    padding: 20px;
+  }
+
+  .code-block {
+    font-size: 0.8rem;
+    padding: 16px;
+  }
+
+  .endpoint-url {
+    font-size: 0.8rem;
+  }
+
+  .api-docs-info-grid {
+    grid-template-columns: 1fr;
+    padding: 0 16px;
+  }
+}

static/js/dashboard.js

@@ -345,6 +345,57 @@ class MarineDashboard {
     }
 }
 
+// Global function for copy to clipboard (used by API docs)
+window.copyToClipboard = function(elementId) {
+    const element = document.getElementById(elementId);
+    if (!element) {
+        console.error('Element not found:', elementId);
+        return;
+    }
+
+    const text = element.textContent;
+
+    if (navigator.clipboard && navigator.clipboard.writeText) {
+        navigator.clipboard.writeText(text).then(() => {
+            window.MarineAPI.utils.showNotification('Code copied to clipboard!', 'success');
+        }).catch(err => {
+            console.error('Failed to copy text: ', err);
+            fallbackCopyTextToClipboard(text);
+        });
+    } else {
+        fallbackCopyTextToClipboard(text);
+    }
+};
+
+// Fallback copy function for older browsers
+function fallbackCopyTextToClipboard(text) {
+    const textArea = document.createElement("textarea");
+    textArea.value = text;
+
+    // Avoid scrolling to bottom
+    textArea.style.top = "0";
+    textArea.style.left = "0";
+    textArea.style.position = "fixed";
+
+    document.body.appendChild(textArea);
+    textArea.focus();
+    textArea.select();
+
+    try {
+        const successful = document.execCommand('copy');
+        if (successful) {
+            window.MarineAPI.utils.showNotification('Code copied to clipboard!', 'success');
+        } else {
+            window.MarineAPI.utils.showNotification('Failed to copy code', 'error');
+        }
+    } catch (err) {
+        console.error('Fallback: Oops, unable to copy', err);
+        window.MarineAPI.utils.showNotification('Failed to copy code', 'error');
+    }
+
+    document.body.removeChild(textArea);
+}
+
 // Make dashboard instance globally available for sample image clicks
 let dashboard;
 

templates/dashboard.html

@@ -165,6 +165,195 @@
             </div>
         </div>
     </div>
+
+    <!-- API Documentation Section -->
+    <div class="api-documentation-section">
+        <div class="api-docs-header">
+            <h2>API Documentation</h2>
+            <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>
+
+            <!-- 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>
+                </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
+
+url = "https://seamo-ai-fishapi.hf.space/api/v1/identify"
+
+with open("your_image.jpg", "rb") as f:
+    files = {"file": f}
+    data = {
+        "confidence_threshold": 0.25,
+        "iou_threshold": 0.45
+    }
+
+    response = requests.post(url, files=files, data=data)
+    result = response.json()
+
+    print(f"Found {len(result['detections'])} species")
+    for detection in result['detections']:
+        print(f"- {detection['class_name']}: {detection['confidence']:.2%}")</pre>
+                </div>
+            </div>
+
+            <!-- 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
+})
+.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)}%`);
+    });
+})
+.catch(error => console.error('Error:', error));</pre>
+                </div>
+            </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
+);
+
+var result = await response.Content.ReadAsStringAsync();
+Console.WriteLine(result);</pre>
+                </div>
+            </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": [
+    {
+      "class_name": "Red Snapper",
+      "confidence": 0.89,
+      "bbox": [120, 80, 340, 280],
+      "class_id": 42
+    }
+  ],
+  "processing_time": 1.23,
+  "image_info": {
+    "width": 800,
+    "height": 600,
+    "format": "JPEG"
+  },
+  "model_info": {
+    "name": "marina-benthic-33k",
+    "version": "v1.0",
+    "total_classes": 691
+  }
+}</pre>
+                </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>
+                </div>
+            </div>
+        </div>
+    </div>
 </div>
 {% endblock %}