|
|
<!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> |
|
|
|
