| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>InklyAI - Signature Verification Demo</title> |
| <style> |
| * { |
| margin: 0; |
| padding: 0; |
| box-sizing: border-box; |
| } |
| |
| body { |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| min-height: 100vh; |
| padding: 20px; |
| } |
| |
| .container { |
| max-width: 800px; |
| margin: 0 auto; |
| background: white; |
| border-radius: 20px; |
| box-shadow: 0 20px 40px rgba(0,0,0,0.1); |
| overflow: hidden; |
| } |
| |
| .header { |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| color: white; |
| padding: 40px; |
| text-align: center; |
| } |
| |
| .header h1 { |
| font-size: 3em; |
| margin-bottom: 10px; |
| font-weight: 300; |
| } |
| |
| .header p { |
| font-size: 1.3em; |
| opacity: 0.9; |
| } |
| |
| .main-content { |
| padding: 40px; |
| } |
| |
| .feature-grid { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); |
| gap: 30px; |
| margin-bottom: 40px; |
| } |
| |
| .feature-card { |
| background: #f8f9fa; |
| border-radius: 15px; |
| padding: 30px; |
| text-align: center; |
| transition: transform 0.3s ease; |
| } |
| |
| .feature-card:hover { |
| transform: translateY(-5px); |
| } |
| |
| .feature-icon { |
| font-size: 3em; |
| margin-bottom: 20px; |
| } |
| |
| .feature-title { |
| font-size: 1.3em; |
| font-weight: bold; |
| margin-bottom: 15px; |
| color: #333; |
| } |
| |
| .feature-description { |
| color: #666; |
| line-height: 1.6; |
| } |
| |
| .demo-section { |
| background: #e8f2ff; |
| border-radius: 15px; |
| padding: 30px; |
| margin-bottom: 30px; |
| } |
| |
| .demo-title { |
| font-size: 1.5em; |
| margin-bottom: 20px; |
| color: #333; |
| text-align: center; |
| } |
| |
| .demo-steps { |
| list-style: none; |
| counter-reset: step-counter; |
| } |
| |
| .demo-steps li { |
| counter-increment: step-counter; |
| margin-bottom: 15px; |
| padding: 15px; |
| background: white; |
| border-radius: 10px; |
| box-shadow: 0 2px 10px rgba(0,0,0,0.1); |
| position: relative; |
| padding-left: 60px; |
| } |
| |
| .demo-steps li::before { |
| content: counter(step-counter); |
| position: absolute; |
| left: 20px; |
| top: 50%; |
| transform: translateY(-50%); |
| background: #667eea; |
| color: white; |
| width: 30px; |
| height: 30px; |
| border-radius: 50%; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-weight: bold; |
| } |
| |
| .tech-stack { |
| background: #f8f9fa; |
| border-radius: 15px; |
| padding: 30px; |
| margin-bottom: 30px; |
| } |
| |
| .tech-title { |
| font-size: 1.3em; |
| margin-bottom: 20px; |
| color: #333; |
| text-align: center; |
| } |
| |
| .tech-grid { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); |
| gap: 20px; |
| } |
| |
| .tech-item { |
| background: white; |
| padding: 20px; |
| border-radius: 10px; |
| text-align: center; |
| box-shadow: 0 2px 10px rgba(0,0,0,0.1); |
| } |
| |
| .tech-name { |
| font-weight: bold; |
| color: #667eea; |
| margin-bottom: 10px; |
| } |
| |
| .cta-section { |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| color: white; |
| border-radius: 15px; |
| padding: 40px; |
| text-align: center; |
| } |
| |
| .cta-title { |
| font-size: 2em; |
| margin-bottom: 20px; |
| } |
| |
| .cta-description { |
| font-size: 1.2em; |
| margin-bottom: 30px; |
| opacity: 0.9; |
| } |
| |
| .cta-buttons { |
| display: flex; |
| gap: 20px; |
| justify-content: center; |
| flex-wrap: wrap; |
| } |
| |
| .cta-btn { |
| background: white; |
| color: #667eea; |
| border: none; |
| padding: 15px 30px; |
| border-radius: 25px; |
| font-size: 1.1em; |
| font-weight: bold; |
| cursor: pointer; |
| text-decoration: none; |
| display: inline-block; |
| transition: transform 0.2s ease; |
| } |
| |
| .cta-btn:hover { |
| transform: translateY(-2px); |
| } |
| |
| .status-indicator { |
| display: inline-block; |
| width: 12px; |
| height: 12px; |
| border-radius: 50%; |
| margin-right: 8px; |
| } |
| |
| .status-online { |
| background: #28a745; |
| } |
| |
| .status-offline { |
| background: #dc3545; |
| } |
| |
| @media (max-width: 768px) { |
| .cta-buttons { |
| flex-direction: column; |
| align-items: center; |
| } |
| |
| .main-content { |
| padding: 20px; |
| } |
| } |
| </style> |
| </head> |
| <body> |
| <div class="container"> |
| <div class="header"> |
| <h1>InklyAI</h1> |
| <p>Advanced E-Signature Verification System</p> |
| <div style="margin-top: 20px;"> |
| <span class="status-indicator status-offline" id="statusIndicator"></span> |
| <span id="statusText">Web Server Offline</span> |
| </div> |
| </div> |
|
|
| <div class="main-content"> |
| |
| <div class="feature-grid"> |
| <div class="feature-card"> |
| <div class="feature-icon">🔐</div> |
| <div class="feature-title">Biometric Authentication</div> |
| <div class="feature-description"> |
| Advanced signature verification using Siamese neural networks for secure AI agent authentication. |
| </div> |
| </div> |
|
|
| <div class="feature-card"> |
| <div class="feature-icon">🤖</div> |
| <div class="feature-title">AgentAI Integration</div> |
| <div class="feature-description"> |
| Seamless integration with AgentAI systems for multi-agent authentication and secure communication. |
| </div> |
| </div> |
|
|
| <div class="feature-card"> |
| <div class="feature-icon">📊</div> |
| <div class="feature-title">Real-time Analytics</div> |
| <div class="feature-description"> |
| Comprehensive monitoring, statistics, and audit trails for compliance and performance tracking. |
| </div> |
| </div> |
|
|
| <div class="feature-card"> |
| <div class="feature-icon">🚀</div> |
| <div class="feature-title">Production Ready</div> |
| <div class="feature-description"> |
| Scalable architecture with REST API, web UI, and enterprise-grade security features. |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="demo-section"> |
| <h2 class="demo-title">How to Use InklyAI</h2> |
| <ol class="demo-steps"> |
| <li>Start the web server by running <code>python web_app.py</code></li> |
| <li>Open your browser and go to <code>http://localhost:5000</code></li> |
| <li>Select an agent from the dropdown menu</li> |
| <li>Upload a reference signature template</li> |
| <li>Upload a signature to verify</li> |
| <li>Click "Verify Signatures" to get results</li> |
| <li>View verification results with similarity scores</li> |
| <li>Manage agents and view statistics</li> |
| </ol> |
| </div> |
|
|
| |
| <div class="tech-stack"> |
| <h2 class="tech-title">Technology Stack</h2> |
| <div class="tech-grid"> |
| <div class="tech-item"> |
| <div class="tech-name">PyTorch</div> |
| <div>Deep Learning Framework</div> |
| </div> |
| <div class="tech-item"> |
| <div class="tech-name">Flask</div> |
| <div>Web Application Framework</div> |
| </div> |
| <div class="tech-item"> |
| <div class="tech-name">OpenCV</div> |
| <div>Image Processing</div> |
| </div> |
| <div class="tech-item"> |
| <div class="tech-name">ResNet</div> |
| <div>CNN Architecture</div> |
| </div> |
| <div class="tech-item"> |
| <div class="tech-name">Siamese Networks</div> |
| <div>Signature Verification</div> |
| </div> |
| <div class="tech-item"> |
| <div class="tech-name">REST API</div> |
| <div>Integration Interface</div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="cta-section"> |
| <h2 class="cta-title">Ready to Get Started?</h2> |
| <p class="cta-description"> |
| Experience the power of AI-driven signature verification with our interactive web interface. |
| </p> |
| <div class="cta-buttons"> |
| <a href="http://localhost:8080" class="cta-btn" id="openAppBtn" onclick="checkServer()"> |
| Open Web Application |
| </a> |
| <a href="http://localhost:8080/agents" class="cta-btn" id="manageAgentsBtn" onclick="checkServer()"> |
| Manage Agents |
| </a> |
| <button class="cta-btn" onclick="startServer()"> |
| Start Server |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| |
| async function checkServer() { |
| try { |
| const response = await fetch('http://localhost:8080/api/health'); |
| if (response.ok) { |
| updateStatus(true); |
| } else { |
| updateStatus(false); |
| } |
| } catch (error) { |
| updateStatus(false); |
| } |
| } |
| |
| function updateStatus(isOnline) { |
| const indicator = document.getElementById('statusIndicator'); |
| const text = document.getElementById('statusText'); |
| const openAppBtn = document.getElementById('openAppBtn'); |
| const manageAgentsBtn = document.getElementById('manageAgentsBtn'); |
| |
| if (isOnline) { |
| indicator.className = 'status-indicator status-online'; |
| text.textContent = 'Web Server Online'; |
| openAppBtn.style.display = 'inline-block'; |
| manageAgentsBtn.style.display = 'inline-block'; |
| } else { |
| indicator.className = 'status-indicator status-offline'; |
| text.textContent = 'Web Server Offline'; |
| openAppBtn.style.display = 'none'; |
| manageAgentsBtn.style.display = 'none'; |
| } |
| } |
| |
| function startServer() { |
| alert('To start the server, run the following command in your terminal:\n\npython web_app.py\n\nThen refresh this page.'); |
| } |
| |
| |
| document.addEventListener('DOMContentLoaded', function() { |
| checkServer(); |
| |
| setInterval(checkServer, 5000); |
| }); |
| </script> |
| </body> |
| </html> |
|
|
