|
|
<!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</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: 1200px; |
|
|
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: 30px; |
|
|
text-align: center; |
|
|
} |
|
|
|
|
|
.header h1 { |
|
|
font-size: 2.5em; |
|
|
margin-bottom: 10px; |
|
|
font-weight: 300; |
|
|
} |
|
|
|
|
|
.header p { |
|
|
font-size: 1.2em; |
|
|
opacity: 0.9; |
|
|
} |
|
|
|
|
|
.main-content { |
|
|
padding: 40px; |
|
|
} |
|
|
|
|
|
.upload-section { |
|
|
display: grid; |
|
|
grid-template-columns: 1fr 1fr; |
|
|
gap: 40px; |
|
|
margin-bottom: 40px; |
|
|
} |
|
|
|
|
|
.upload-box { |
|
|
border: 3px dashed #ddd; |
|
|
border-radius: 15px; |
|
|
padding: 40px; |
|
|
text-align: center; |
|
|
transition: all 0.3s ease; |
|
|
cursor: pointer; |
|
|
background: #fafafa; |
|
|
} |
|
|
|
|
|
.upload-box:hover { |
|
|
border-color: #667eea; |
|
|
background: #f0f4ff; |
|
|
} |
|
|
|
|
|
.upload-box.dragover { |
|
|
border-color: #667eea; |
|
|
background: #e8f2ff; |
|
|
transform: scale(1.02); |
|
|
} |
|
|
|
|
|
.upload-icon { |
|
|
font-size: 3em; |
|
|
color: #667eea; |
|
|
margin-bottom: 20px; |
|
|
} |
|
|
|
|
|
.upload-text { |
|
|
font-size: 1.1em; |
|
|
color: #666; |
|
|
margin-bottom: 20px; |
|
|
} |
|
|
|
|
|
.file-input { |
|
|
display: none; |
|
|
} |
|
|
|
|
|
.upload-btn { |
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
|
|
color: white; |
|
|
border: none; |
|
|
padding: 12px 30px; |
|
|
border-radius: 25px; |
|
|
cursor: pointer; |
|
|
font-size: 1em; |
|
|
transition: transform 0.2s ease; |
|
|
} |
|
|
|
|
|
.upload-btn:hover { |
|
|
transform: translateY(-2px); |
|
|
} |
|
|
|
|
|
.preview-container { |
|
|
margin-top: 20px; |
|
|
text-align: center; |
|
|
} |
|
|
|
|
|
.preview-image { |
|
|
max-width: 200px; |
|
|
max-height: 200px; |
|
|
border-radius: 10px; |
|
|
box-shadow: 0 5px 15px rgba(0,0,0,0.1); |
|
|
margin-bottom: 10px; |
|
|
} |
|
|
|
|
|
.file-info { |
|
|
font-size: 0.9em; |
|
|
color: #666; |
|
|
} |
|
|
|
|
|
.verification-section { |
|
|
background: #f8f9fa; |
|
|
border-radius: 15px; |
|
|
padding: 30px; |
|
|
margin-bottom: 30px; |
|
|
} |
|
|
|
|
|
.verification-title { |
|
|
font-size: 1.5em; |
|
|
margin-bottom: 20px; |
|
|
color: #333; |
|
|
text-align: center; |
|
|
} |
|
|
|
|
|
.verify-btn { |
|
|
background: linear-gradient(135deg, #28a745 0%, #20c997 100%); |
|
|
color: white; |
|
|
border: none; |
|
|
padding: 15px 40px; |
|
|
border-radius: 25px; |
|
|
cursor: pointer; |
|
|
font-size: 1.2em; |
|
|
width: 100%; |
|
|
margin-bottom: 20px; |
|
|
transition: transform 0.2s ease; |
|
|
} |
|
|
|
|
|
.verify-btn:hover { |
|
|
transform: translateY(-2px); |
|
|
} |
|
|
|
|
|
.verify-btn:disabled { |
|
|
background: #6c757d; |
|
|
cursor: not-allowed; |
|
|
transform: none; |
|
|
} |
|
|
|
|
|
.result-section { |
|
|
background: white; |
|
|
border-radius: 15px; |
|
|
padding: 30px; |
|
|
box-shadow: 0 5px 15px rgba(0,0,0,0.1); |
|
|
display: none; |
|
|
} |
|
|
|
|
|
.result-title { |
|
|
font-size: 1.3em; |
|
|
margin-bottom: 20px; |
|
|
text-align: center; |
|
|
} |
|
|
|
|
|
.result-content { |
|
|
display: grid; |
|
|
grid-template-columns: 1fr 1fr; |
|
|
gap: 30px; |
|
|
align-items: center; |
|
|
} |
|
|
|
|
|
.result-image { |
|
|
max-width: 100%; |
|
|
border-radius: 10px; |
|
|
box-shadow: 0 5px 15px rgba(0,0,0,0.1); |
|
|
} |
|
|
|
|
|
.result-details { |
|
|
padding: 20px; |
|
|
} |
|
|
|
|
|
.result-item { |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
margin-bottom: 15px; |
|
|
padding: 10px; |
|
|
background: #f8f9fa; |
|
|
border-radius: 8px; |
|
|
} |
|
|
|
|
|
.result-label { |
|
|
font-weight: 600; |
|
|
color: #333; |
|
|
} |
|
|
|
|
|
.result-value { |
|
|
color: #666; |
|
|
} |
|
|
|
|
|
.similarity-score { |
|
|
font-size: 1.5em; |
|
|
font-weight: bold; |
|
|
color: #28a745; |
|
|
} |
|
|
|
|
|
.verification-status { |
|
|
font-size: 1.2em; |
|
|
font-weight: bold; |
|
|
padding: 10px 20px; |
|
|
border-radius: 20px; |
|
|
text-align: center; |
|
|
} |
|
|
|
|
|
.verified { |
|
|
background: #d4edda; |
|
|
color: #155724; |
|
|
} |
|
|
|
|
|
.not-verified { |
|
|
background: #f8d7da; |
|
|
color: #721c24; |
|
|
} |
|
|
|
|
|
.loading { |
|
|
display: none; |
|
|
text-align: center; |
|
|
padding: 20px; |
|
|
} |
|
|
|
|
|
.spinner { |
|
|
border: 4px solid #f3f3f3; |
|
|
border-top: 4px solid #667eea; |
|
|
border-radius: 50%; |
|
|
width: 40px; |
|
|
height: 40px; |
|
|
animation: spin 1s linear infinite; |
|
|
margin: 0 auto 20px; |
|
|
} |
|
|
|
|
|
@keyframes spin { |
|
|
0% { transform: rotate(0deg); } |
|
|
100% { transform: rotate(360deg); } |
|
|
} |
|
|
|
|
|
.agent-section { |
|
|
background: #e8f2ff; |
|
|
border-radius: 15px; |
|
|
padding: 30px; |
|
|
margin-bottom: 30px; |
|
|
} |
|
|
|
|
|
.agent-title { |
|
|
font-size: 1.3em; |
|
|
margin-bottom: 20px; |
|
|
color: #333; |
|
|
text-align: center; |
|
|
} |
|
|
|
|
|
.agent-select { |
|
|
width: 100%; |
|
|
padding: 12px; |
|
|
border: 2px solid #ddd; |
|
|
border-radius: 8px; |
|
|
font-size: 1em; |
|
|
margin-bottom: 20px; |
|
|
} |
|
|
|
|
|
.stats-section { |
|
|
background: #f8f9fa; |
|
|
border-radius: 15px; |
|
|
padding: 30px; |
|
|
margin-top: 30px; |
|
|
} |
|
|
|
|
|
.stats-title { |
|
|
font-size: 1.3em; |
|
|
margin-bottom: 20px; |
|
|
color: #333; |
|
|
text-align: center; |
|
|
} |
|
|
|
|
|
.stats-grid { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); |
|
|
gap: 20px; |
|
|
} |
|
|
|
|
|
.stat-card { |
|
|
background: white; |
|
|
padding: 20px; |
|
|
border-radius: 10px; |
|
|
text-align: center; |
|
|
box-shadow: 0 2px 10px rgba(0,0,0,0.1); |
|
|
} |
|
|
|
|
|
.stat-value { |
|
|
font-size: 2em; |
|
|
font-weight: bold; |
|
|
color: #667eea; |
|
|
margin-bottom: 5px; |
|
|
} |
|
|
|
|
|
.stat-label { |
|
|
color: #666; |
|
|
font-size: 0.9em; |
|
|
} |
|
|
|
|
|
.error-message { |
|
|
background: #f8d7da; |
|
|
color: #721c24; |
|
|
padding: 15px; |
|
|
border-radius: 8px; |
|
|
margin: 20px 0; |
|
|
display: none; |
|
|
} |
|
|
|
|
|
.success-message { |
|
|
background: #d4edda; |
|
|
color: #155724; |
|
|
padding: 15px; |
|
|
border-radius: 8px; |
|
|
margin: 20px 0; |
|
|
display: none; |
|
|
} |
|
|
|
|
|
@media (max-width: 768px) { |
|
|
.upload-section { |
|
|
grid-template-columns: 1fr; |
|
|
gap: 20px; |
|
|
} |
|
|
|
|
|
.result-content { |
|
|
grid-template-columns: 1fr; |
|
|
} |
|
|
|
|
|
.main-content { |
|
|
padding: 20px; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<div class="container"> |
|
|
<div class="header"> |
|
|
<h1>InklyAI</h1> |
|
|
<p>Advanced E-Signature Verification System</p> |
|
|
</div> |
|
|
|
|
|
<div class="main-content"> |
|
|
|
|
|
<div id="errorMessage" class="error-message"></div> |
|
|
<div id="successMessage" class="success-message"></div> |
|
|
|
|
|
|
|
|
<div class="agent-section"> |
|
|
<h2 class="agent-title">Select Agent for Verification</h2> |
|
|
<select id="agentSelect" class="agent-select"> |
|
|
<option value="">Select an agent...</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="upload-section"> |
|
|
<div class="upload-box" id="uploadBox1"> |
|
|
<div class="upload-icon">📝</div> |
|
|
<div class="upload-text">Upload Reference Signature</div> |
|
|
<button class="upload-btn" onclick="document.getElementById('file1').click()"> |
|
|
Choose File |
|
|
</button> |
|
|
<input type="file" id="file1" class="file-input" accept="image/*" onchange="handleFileSelect(event, 1)"> |
|
|
<div class="preview-container" id="preview1"></div> |
|
|
</div> |
|
|
|
|
|
<div class="upload-box" id="uploadBox2"> |
|
|
<div class="upload-icon">✍️</div> |
|
|
<div class="upload-text">Upload Signature to Verify</div> |
|
|
<button class="upload-btn" onclick="document.getElementById('file2').click()"> |
|
|
Choose File |
|
|
</button> |
|
|
<input type="file" id="file2" class="file-input" accept="image/*" onchange="handleFileSelect(event, 2)"> |
|
|
<div class="preview-container" id="preview2"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="verification-section"> |
|
|
<h2 class="verification-title">Signature Verification</h2> |
|
|
<button id="verifyBtn" class="verify-btn" onclick="verifySignatures()"> |
|
|
Verify Signatures |
|
|
</button> |
|
|
<div class="loading" id="loading"> |
|
|
<div class="spinner"></div> |
|
|
<div>Verifying signatures...</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="result-section" id="resultSection"> |
|
|
<h2 class="result-title">Verification Result</h2> |
|
|
<div class="result-content"> |
|
|
<div> |
|
|
<img id="resultImage1" class="result-image" alt="Reference Signature"> |
|
|
<div class="file-info" id="resultInfo1"></div> |
|
|
</div> |
|
|
<div class="result-details"> |
|
|
<div class="result-item"> |
|
|
<span class="result-label">Verification Status:</span> |
|
|
<span id="verificationStatus" class="result-value verification-status"></span> |
|
|
</div> |
|
|
<div class="result-item"> |
|
|
<span class="result-label">Similarity Score:</span> |
|
|
<span id="similarityScore" class="result-value similarity-score"></span> |
|
|
</div> |
|
|
<div class="result-item"> |
|
|
<span class="result-label">Confidence:</span> |
|
|
<span id="confidence" class="result-value"></span> |
|
|
</div> |
|
|
<div class="result-item"> |
|
|
<span class="result-label">Verification ID:</span> |
|
|
<span id="verificationId" class="result-value"></span> |
|
|
</div> |
|
|
<div class="result-item"> |
|
|
<span class="result-label">Timestamp:</span> |
|
|
<span id="timestamp" class="result-value"></span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="stats-section"> |
|
|
<h2 class="stats-title">Agent Statistics</h2> |
|
|
<div class="stats-grid" id="statsGrid"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
let selectedFiles = { file1: null, file2: null }; |
|
|
let selectedAgent = null; |
|
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
loadAgents(); |
|
|
loadStats(); |
|
|
}); |
|
|
|
|
|
|
|
|
['uploadBox1', 'uploadBox2'].forEach((boxId, index) => { |
|
|
const box = document.getElementById(boxId); |
|
|
const fileInput = document.getElementById(`file${index + 1}`); |
|
|
|
|
|
box.addEventListener('dragover', (e) => { |
|
|
e.preventDefault(); |
|
|
box.classList.add('dragover'); |
|
|
}); |
|
|
|
|
|
box.addEventListener('dragleave', () => { |
|
|
box.classList.remove('dragover'); |
|
|
}); |
|
|
|
|
|
box.addEventListener('drop', (e) => { |
|
|
e.preventDefault(); |
|
|
box.classList.remove('dragover'); |
|
|
const files = e.dataTransfer.files; |
|
|
if (files.length > 0) { |
|
|
fileInput.files = files; |
|
|
handleFileSelect({ target: fileInput }, index + 1); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
function handleFileSelect(event, fileNumber) { |
|
|
const file = event.target.files[0]; |
|
|
if (file) { |
|
|
selectedFiles[`file${fileNumber}`] = file; |
|
|
displayPreview(file, fileNumber); |
|
|
updateVerifyButton(); |
|
|
} |
|
|
} |
|
|
|
|
|
function displayPreview(file, fileNumber) { |
|
|
const preview = document.getElementById(`preview${fileNumber}`); |
|
|
const reader = new FileReader(); |
|
|
|
|
|
reader.onload = function(e) { |
|
|
preview.innerHTML = ` |
|
|
<img src="${e.target.result}" class="preview-image" alt="Preview"> |
|
|
<div class="file-info"> |
|
|
<div>${file.name}</div> |
|
|
<div>${(file.size / 1024).toFixed(1)} KB</div> |
|
|
</div> |
|
|
`; |
|
|
}; |
|
|
|
|
|
reader.readAsDataURL(file); |
|
|
} |
|
|
|
|
|
function updateVerifyButton() { |
|
|
const verifyBtn = document.getElementById('verifyBtn'); |
|
|
const hasFiles = selectedFiles.file1 && selectedFiles.file2; |
|
|
const hasAgent = selectedAgent && selectedAgent !== ''; |
|
|
|
|
|
verifyBtn.disabled = !hasFiles || !hasAgent; |
|
|
verifyBtn.textContent = hasFiles && hasAgent ? 'Verify Signatures' : 'Select Agent and Upload Both Signatures'; |
|
|
} |
|
|
|
|
|
async function loadAgents() { |
|
|
try { |
|
|
const response = await fetch('/api/agents'); |
|
|
const data = await response.json(); |
|
|
|
|
|
const select = document.getElementById('agentSelect'); |
|
|
select.innerHTML = '<option value="">Select an agent...</option>'; |
|
|
|
|
|
data.agents.forEach(agent => { |
|
|
const option = document.createElement('option'); |
|
|
option.value = agent.agent_id; |
|
|
option.textContent = `${agent.agent_id} (${agent.is_active ? 'Active' : 'Inactive'})`; |
|
|
select.appendChild(option); |
|
|
}); |
|
|
|
|
|
select.addEventListener('change', function() { |
|
|
selectedAgent = this.value; |
|
|
updateVerifyButton(); |
|
|
}); |
|
|
} catch (error) { |
|
|
showError('Failed to load agents: ' + error.message); |
|
|
} |
|
|
} |
|
|
|
|
|
async function loadStats() { |
|
|
try { |
|
|
const response = await fetch('/api/stats'); |
|
|
const data = await response.json(); |
|
|
|
|
|
const statsGrid = document.getElementById('statsGrid'); |
|
|
statsGrid.innerHTML = ''; |
|
|
|
|
|
Object.entries(data.stats).forEach(([agentId, stats]) => { |
|
|
const statCard = document.createElement('div'); |
|
|
statCard.className = 'stat-card'; |
|
|
statCard.innerHTML = ` |
|
|
<div class="stat-value">${stats.total_verifications}</div> |
|
|
<div class="stat-label">${agentId} Verifications</div> |
|
|
<div style="margin-top: 10px; font-size: 0.8em; color: #666;"> |
|
|
Success Rate: ${(stats.success_rate * 100).toFixed(1)}% |
|
|
</div> |
|
|
`; |
|
|
statsGrid.appendChild(statCard); |
|
|
}); |
|
|
} catch (error) { |
|
|
console.error('Failed to load stats:', error); |
|
|
} |
|
|
} |
|
|
|
|
|
async function verifySignatures() { |
|
|
if (!selectedFiles.file1 || !selectedFiles.file2 || !selectedAgent) { |
|
|
showError('Please select an agent and upload both signatures'); |
|
|
return; |
|
|
} |
|
|
|
|
|
const loading = document.getElementById('loading'); |
|
|
const verifyBtn = document.getElementById('verifyBtn'); |
|
|
const resultSection = document.getElementById('resultSection'); |
|
|
|
|
|
|
|
|
loading.style.display = 'block'; |
|
|
verifyBtn.disabled = true; |
|
|
resultSection.style.display = 'none'; |
|
|
|
|
|
try { |
|
|
const formData = new FormData(); |
|
|
formData.append('agent_id', selectedAgent); |
|
|
formData.append('signature1', selectedFiles.file1); |
|
|
formData.append('signature2', selectedFiles.file2); |
|
|
|
|
|
const response = await fetch('/api/verify', { |
|
|
method: 'POST', |
|
|
body: formData |
|
|
}); |
|
|
|
|
|
const result = await response.json(); |
|
|
|
|
|
if (result.success) { |
|
|
displayResult(result); |
|
|
showSuccess('Signatures verified successfully!'); |
|
|
loadStats(); |
|
|
} else { |
|
|
showError('Verification failed: ' + result.error); |
|
|
} |
|
|
} catch (error) { |
|
|
showError('Verification error: ' + error.message); |
|
|
} finally { |
|
|
loading.style.display = 'none'; |
|
|
verifyBtn.disabled = false; |
|
|
} |
|
|
} |
|
|
|
|
|
function displayResult(result) { |
|
|
const resultSection = document.getElementById('resultSection'); |
|
|
const verificationStatus = document.getElementById('verificationStatus'); |
|
|
const similarityScore = document.getElementById('similarityScore'); |
|
|
const confidence = document.getElementById('confidence'); |
|
|
const verificationId = document.getElementById('verificationId'); |
|
|
const timestamp = document.getElementById('timestamp'); |
|
|
|
|
|
|
|
|
verificationStatus.textContent = result.is_verified ? 'VERIFIED' : 'NOT VERIFIED'; |
|
|
verificationStatus.className = `result-value verification-status ${result.is_verified ? 'verified' : 'not-verified'}`; |
|
|
|
|
|
similarityScore.textContent = (result.similarity_score * 100).toFixed(1) + '%'; |
|
|
confidence.textContent = (result.confidence * 100).toFixed(1) + '%'; |
|
|
verificationId.textContent = result.verification_id; |
|
|
timestamp.textContent = new Date(result.timestamp).toLocaleString(); |
|
|
|
|
|
|
|
|
const resultImage1 = document.getElementById('resultImage1'); |
|
|
const resultInfo1 = document.getElementById('resultInfo1'); |
|
|
|
|
|
if (selectedFiles.file1) { |
|
|
const reader = new FileReader(); |
|
|
reader.onload = function(e) { |
|
|
resultImage1.src = e.target.result; |
|
|
}; |
|
|
reader.readAsDataURL(selectedFiles.file1); |
|
|
resultInfo1.textContent = `Reference: ${selectedFiles.file1.name}`; |
|
|
} |
|
|
|
|
|
resultSection.style.display = 'block'; |
|
|
} |
|
|
|
|
|
function showError(message) { |
|
|
const errorDiv = document.getElementById('errorMessage'); |
|
|
errorDiv.textContent = message; |
|
|
errorDiv.style.display = 'block'; |
|
|
setTimeout(() => { |
|
|
errorDiv.style.display = 'none'; |
|
|
}, 5000); |
|
|
} |
|
|
|
|
|
function showSuccess(message) { |
|
|
const successDiv = document.getElementById('successMessage'); |
|
|
successDiv.textContent = message; |
|
|
successDiv.style.display = 'block'; |
|
|
setTimeout(() => { |
|
|
successDiv.style.display = 'none'; |
|
|
}, 3000); |
|
|
} |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
