Add API documentation access and improve docs integration

 Enhanced API Documentation Access:
- Added /docs route to main app with instructions for Swagger UI
- Created helpful documentation page with setup instructions
- Added API Documentation button to web interface
- Updated /api endpoint to include Swagger UI information

 User-Friendly Documentation:
- Clear step-by-step instructions to access Swagger UI
- Direct link to Swagger UI (when running)
- Quick API reference on docs page
- Professional styling for documentation page

 Improved Navigation:
- Added 'API Documentation' button to main interface
- Opens in new tab for easy reference
- Back link to main interface
- Clear visual hierarchy and instructions

Now users can easily access API documentation from the main interface
This commit is contained in:
Aherobo Ovie Victor
2025-07-11 21:31:59 +01:00
parent 403559a2a2
commit b54da61121
2 changed files with 53 additions and 1 deletions
+50 -1
View File
@@ -88,15 +88,64 @@ def api_info():
'endpoints': {
'/': 'GET - Frontend interface or API information',
'/api': 'GET - API information (JSON)',
'/docs': 'GET - API documentation (Swagger UI)',
'/detect': 'POST - Upload image for memory module detection',
'/detect/hardcoded': 'GET - Process hardcoded test image',
'/detect/base64': 'POST - Process base64 encoded image',
'/health': 'GET - Health check'
},
'model_loaded': detector.model is not None,
'supported_formats': list(ALLOWED_EXTENSIONS)
'supported_formats': list(ALLOWED_EXTENSIONS),
'swagger_ui': 'http://localhost:5003/docs/ (run: python3 api_docs.py)'
})
@app.route('/docs')
def api_docs():
"""Redirect to API documentation."""
return """
<!DOCTYPE html>
<html>
<head>
<title>API Documentation</title>
<style>
body { font-family: Arial, sans-serif; text-align: center; padding: 50px; background: #f5f5f5; }
.container { max-width: 600px; margin: 0 auto; background: white; padding: 40px; border-radius: 10px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
.btn { display: inline-block; padding: 12px 24px; background: #007bff; color: white; text-decoration: none; border-radius: 5px; margin: 10px; }
.btn:hover { background: #0056b3; }
.code { background: #f8f9fa; padding: 10px; border-radius: 5px; margin: 20px 0; font-family: monospace; }
</style>
</head>
<body>
<div class="container">
<h1>🚀 Memory Module Detection API Documentation</h1>
<p>Interactive Swagger UI documentation for all API endpoints</p>
<h3>📖 Access Swagger UI:</h3>
<div class="code">
<strong>Step 1:</strong> Start API docs server<br>
<code>python3 api_docs.py</code><br><br>
<strong>Step 2:</strong> Open Swagger UI<br>
<code>http://localhost:5003/docs/</code>
</div>
<a href="http://localhost:5003/docs/" class="btn" target="_blank">
📚 Open Swagger UI (if running)
</a>
<h3>📋 Quick API Reference:</h3>
<ul style="text-align: left;">
<li><strong>POST /detect</strong> - Upload image for detection</li>
<li><strong>GET /detect/hardcoded</strong> - Test with predefined image</li>
<li><strong>POST /detect/base64</strong> - Process base64 encoded image</li>
<li><strong>GET /health</strong> - System health check</li>
</ul>
<p><a href="/">← Back to Main Interface</a></p>
</div>
</body>
</html>
"""
@app.route('/health', methods=['GET'])
def health_check():
"""Health check endpoint."""
+3
View File
@@ -39,6 +39,9 @@
<button class="btn btn-info" onclick="runAllTests()">
<i class="fas fa-play"></i> Run All Tests
</button>
<a href="/docs" class="btn btn-outline" target="_blank">
<i class="fas fa-book"></i> API Documentation
</a>
</div>
</section>