|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>InklyAI - Agent Management</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; |
|
|
} |
|
|
|
|
|
.nav { |
|
|
background: #f8f9fa; |
|
|
padding: 15px 30px; |
|
|
border-bottom: 1px solid #dee2e6; |
|
|
} |
|
|
|
|
|
.nav a { |
|
|
color: #667eea; |
|
|
text-decoration: none; |
|
|
margin-right: 20px; |
|
|
padding: 8px 16px; |
|
|
border-radius: 5px; |
|
|
transition: background-color 0.3s; |
|
|
} |
|
|
|
|
|
.nav a:hover, .nav a.active { |
|
|
background: #667eea; |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.main-content { |
|
|
padding: 40px; |
|
|
} |
|
|
|
|
|
.section { |
|
|
background: #f8f9fa; |
|
|
border-radius: 15px; |
|
|
padding: 30px; |
|
|
margin-bottom: 30px; |
|
|
} |
|
|
|
|
|
.section h2 { |
|
|
margin-bottom: 20px; |
|
|
color: #333; |
|
|
} |
|
|
|
|
|
.form-group { |
|
|
margin-bottom: 20px; |
|
|
} |
|
|
|
|
|
.form-group label { |
|
|
display: block; |
|
|
margin-bottom: 5px; |
|
|
font-weight: 600; |
|
|
color: #333; |
|
|
} |
|
|
|
|
|
.form-group input, .form-group select { |
|
|
width: 100%; |
|
|
padding: 12px; |
|
|
border: 2px solid #ddd; |
|
|
border-radius: 8px; |
|
|
font-size: 1em; |
|
|
} |
|
|
|
|
|
.form-group input:focus, .form-group select:focus { |
|
|
outline: none; |
|
|
border-color: #667eea; |
|
|
} |
|
|
|
|
|
.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; |
|
|
} |
|
|
|
|
|
.btn:hover { |
|
|
transform: translateY(-2px); |
|
|
} |
|
|
|
|
|
.btn-danger { |
|
|
background: linear-gradient(135deg, #dc3545 0%, #c82333 100%); |
|
|
} |
|
|
|
|
|
.btn-success { |
|
|
background: linear-gradient(135deg, #28a745 0%, #20c997 100%); |
|
|
} |
|
|
|
|
|
.agents-grid { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); |
|
|
gap: 20px; |
|
|
margin-top: 20px; |
|
|
} |
|
|
|
|
|
.agent-card { |
|
|
background: white; |
|
|
border-radius: 15px; |
|
|
padding: 20px; |
|
|
box-shadow: 0 5px 15px rgba(0,0,0,0.1); |
|
|
border-left: 4px solid #667eea; |
|
|
} |
|
|
|
|
|
.agent-card.inactive { |
|
|
border-left-color: #dc3545; |
|
|
opacity: 0.7; |
|
|
} |
|
|
|
|
|
.agent-id { |
|
|
font-size: 1.2em; |
|
|
font-weight: bold; |
|
|
color: #333; |
|
|
margin-bottom: 10px; |
|
|
} |
|
|
|
|
|
.agent-status { |
|
|
display: inline-block; |
|
|
padding: 4px 12px; |
|
|
border-radius: 20px; |
|
|
font-size: 0.8em; |
|
|
font-weight: bold; |
|
|
margin-bottom: 15px; |
|
|
} |
|
|
|
|
|
.agent-status.active { |
|
|
background: #d4edda; |
|
|
color: #155724; |
|
|
} |
|
|
|
|
|
.agent-status.inactive { |
|
|
background: #f8d7da; |
|
|
color: #721c24; |
|
|
} |
|
|
|
|
|
.agent-stats { |
|
|
margin-bottom: 15px; |
|
|
} |
|
|
|
|
|
.stat-item { |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
margin-bottom: 5px; |
|
|
font-size: 0.9em; |
|
|
color: #666; |
|
|
} |
|
|
|
|
|
.agent-actions { |
|
|
display: flex; |
|
|
gap: 10px; |
|
|
} |
|
|
|
|
|
.agent-actions .btn { |
|
|
padding: 8px 16px; |
|
|
font-size: 0.9em; |
|
|
} |
|
|
|
|
|
.message { |
|
|
padding: 15px; |
|
|
border-radius: 8px; |
|
|
margin-bottom: 20px; |
|
|
display: none; |
|
|
} |
|
|
|
|
|
.message.success { |
|
|
background: #d4edda; |
|
|
color: #155724; |
|
|
border: 1px solid #c3e6cb; |
|
|
} |
|
|
|
|
|
.message.error { |
|
|
background: #f8d7da; |
|
|
color: #721c24; |
|
|
border: 1px solid #f5c6cb; |
|
|
} |
|
|
|
|
|
.loading { |
|
|
text-align: center; |
|
|
padding: 20px; |
|
|
display: none; |
|
|
} |
|
|
|
|
|
.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); } |
|
|
} |
|
|
|
|
|
.file-upload { |
|
|
border: 2px dashed #ddd; |
|
|
border-radius: 10px; |
|
|
padding: 20px; |
|
|
text-align: center; |
|
|
cursor: pointer; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.file-upload:hover { |
|
|
border-color: #667eea; |
|
|
background: #f0f4ff; |
|
|
} |
|
|
|
|
|
.file-upload.dragover { |
|
|
border-color: #667eea; |
|
|
background: #e8f2ff; |
|
|
} |
|
|
|
|
|
.file-input { |
|
|
display: none; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<div class="container"> |
|
|
<div class="header"> |
|
|
<h1>InklyAI</h1> |
|
|
<p>Agent Management System</p> |
|
|
</div> |
|
|
|
|
|
<div class="nav"> |
|
|
<a href="/">Signature Verification</a> |
|
|
<a href="/agents" class="active">Agent Management</a> |
|
|
</div> |
|
|
|
|
|
<div class="main-content"> |
|
|
|
|
|
<div id="message" class="message"></div> |
|
|
|
|
|
|
|
|
<div class="section"> |
|
|
<h2>Register New Agent</h2> |
|
|
<form id="registerForm"> |
|
|
<div class="form-group"> |
|
|
<label for="agentId">Agent ID:</label> |
|
|
<input type="text" id="agentId" name="agent_id" required> |
|
|
</div> |
|
|
<div class="form-group"> |
|
|
<label for="signatureTemplate">Signature Template:</label> |
|
|
<div class="file-upload" id="fileUpload"> |
|
|
<div>📝</div> |
|
|
<div>Click to upload or drag and drop signature template</div> |
|
|
<input type="file" id="signatureTemplate" class="file-input" accept="image/*" required> |
|
|
</div> |
|
|
</div> |
|
|
<button type="submit" class="btn">Register Agent</button> |
|
|
</form> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="section"> |
|
|
<h2>Registered Agents</h2> |
|
|
<div class="loading" id="loading"> |
|
|
<div class="spinner"></div> |
|
|
<div>Loading agents...</div> |
|
|
</div> |
|
|
<div class="agents-grid" id="agentsGrid"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
loadAgents(); |
|
|
setupFileUpload(); |
|
|
setupRegisterForm(); |
|
|
}); |
|
|
|
|
|
function setupFileUpload() { |
|
|
const fileUpload = document.getElementById('fileUpload'); |
|
|
const fileInput = document.getElementById('signatureTemplate'); |
|
|
|
|
|
fileUpload.addEventListener('click', () => fileInput.click()); |
|
|
|
|
|
fileUpload.addEventListener('dragover', (e) => { |
|
|
e.preventDefault(); |
|
|
fileUpload.classList.add('dragover'); |
|
|
}); |
|
|
|
|
|
fileUpload.addEventListener('dragleave', () => { |
|
|
fileUpload.classList.remove('dragover'); |
|
|
}); |
|
|
|
|
|
fileUpload.addEventListener('drop', (e) => { |
|
|
e.preventDefault(); |
|
|
fileUpload.classList.remove('dragover'); |
|
|
const files = e.dataTransfer.files; |
|
|
if (files.length > 0) { |
|
|
fileInput.files = files; |
|
|
updateFileUploadDisplay(files[0]); |
|
|
} |
|
|
}); |
|
|
|
|
|
fileInput.addEventListener('change', (e) => { |
|
|
if (e.target.files.length > 0) { |
|
|
updateFileUploadDisplay(e.target.files[0]); |
|
|
} |
|
|
}); |
|
|
} |
|
|
|
|
|
function updateFileUploadDisplay(file) { |
|
|
const fileUpload = document.getElementById('fileUpload'); |
|
|
fileUpload.innerHTML = ` |
|
|
<div>✅</div> |
|
|
<div>${file.name}</div> |
|
|
<div style="font-size: 0.8em; color: #666;">${(file.size / 1024).toFixed(1)} KB</div> |
|
|
`; |
|
|
} |
|
|
|
|
|
function setupRegisterForm() { |
|
|
document.getElementById('registerForm').addEventListener('submit', async (e) => { |
|
|
e.preventDefault(); |
|
|
|
|
|
const formData = new FormData(); |
|
|
formData.append('agent_id', document.getElementById('agentId').value); |
|
|
formData.append('signature_template', document.getElementById('signatureTemplate').files[0]); |
|
|
|
|
|
try { |
|
|
const response = await fetch('/api/register-agent', { |
|
|
method: 'POST', |
|
|
body: formData |
|
|
}); |
|
|
|
|
|
const result = await response.json(); |
|
|
|
|
|
if (result.success) { |
|
|
showMessage('Agent registered successfully!', 'success'); |
|
|
document.getElementById('registerForm').reset(); |
|
|
document.getElementById('fileUpload').innerHTML = ` |
|
|
<div>📝</div> |
|
|
<div>Click to upload or drag and drop signature template</div> |
|
|
`; |
|
|
loadAgents(); |
|
|
} else { |
|
|
showMessage('Failed to register agent: ' + result.error, 'error'); |
|
|
} |
|
|
} catch (error) { |
|
|
showMessage('Error registering agent: ' + error.message, 'error'); |
|
|
} |
|
|
}); |
|
|
} |
|
|
|
|
|
async function loadAgents() { |
|
|
const loading = document.getElementById('loading'); |
|
|
const agentsGrid = document.getElementById('agentsGrid'); |
|
|
|
|
|
loading.style.display = 'block'; |
|
|
agentsGrid.innerHTML = ''; |
|
|
|
|
|
try { |
|
|
const response = await fetch('/api/agents'); |
|
|
const data = await response.json(); |
|
|
|
|
|
if (data.success) { |
|
|
data.agents.forEach(agent => { |
|
|
const agentCard = createAgentCard(agent); |
|
|
agentsGrid.appendChild(agentCard); |
|
|
}); |
|
|
} else { |
|
|
showMessage('Failed to load agents: ' + data.error, 'error'); |
|
|
} |
|
|
} catch (error) { |
|
|
showMessage('Error loading agents: ' + error.message, 'error'); |
|
|
} finally { |
|
|
loading.style.display = 'none'; |
|
|
} |
|
|
} |
|
|
|
|
|
function createAgentCard(agent) { |
|
|
const card = document.createElement('div'); |
|
|
card.className = `agent-card ${agent.is_active ? '' : 'inactive'}`; |
|
|
|
|
|
card.innerHTML = ` |
|
|
<div class="agent-id">${agent.agent_id}</div> |
|
|
<div class="agent-status ${agent.is_active ? 'active' : 'inactive'}"> |
|
|
${agent.is_active ? 'Active' : 'Inactive'} |
|
|
</div> |
|
|
<div class="agent-stats"> |
|
|
<div class="stat-item"> |
|
|
<span>Verifications:</span> |
|
|
<span>${agent.verification_count}</span> |
|
|
</div> |
|
|
<div class="stat-item"> |
|
|
<span>Created:</span> |
|
|
<span>${new Date(agent.created_at).toLocaleDateString()}</span> |
|
|
</div> |
|
|
<div class="stat-item"> |
|
|
<span>Last Verified:</span> |
|
|
<span>${agent.last_verified ? new Date(agent.last_verified).toLocaleDateString() : 'Never'}</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="agent-actions"> |
|
|
${agent.is_active ? |
|
|
`<button class="btn btn-danger" onclick="deactivateAgent('${agent.agent_id}')">Deactivate</button>` : |
|
|
`<button class="btn btn-success" onclick="reactivateAgent('${agent.agent_id}')">Reactivate</button>` |
|
|
} |
|
|
<button class="btn" onclick="viewAgentStats('${agent.agent_id}')">Stats</button> |
|
|
</div> |
|
|
`; |
|
|
|
|
|
return card; |
|
|
} |
|
|
|
|
|
async function deactivateAgent(agentId) { |
|
|
try { |
|
|
const response = await fetch(`/api/deactivate-agent/${agentId}`, { |
|
|
method: 'POST' |
|
|
}); |
|
|
|
|
|
const result = await response.json(); |
|
|
|
|
|
if (result.success) { |
|
|
showMessage('Agent deactivated successfully!', 'success'); |
|
|
loadAgents(); |
|
|
} else { |
|
|
showMessage('Failed to deactivate agent: ' + result.error, 'error'); |
|
|
} |
|
|
} catch (error) { |
|
|
showMessage('Error deactivating agent: ' + error.message, 'error'); |
|
|
} |
|
|
} |
|
|
|
|
|
async function reactivateAgent(agentId) { |
|
|
try { |
|
|
const response = await fetch(`/api/reactivate-agent/${agentId}`, { |
|
|
method: 'POST' |
|
|
}); |
|
|
|
|
|
const result = await response.json(); |
|
|
|
|
|
if (result.success) { |
|
|
showMessage('Agent reactivated successfully!', 'success'); |
|
|
loadAgents(); |
|
|
} else { |
|
|
showMessage('Failed to reactivate agent: ' + result.error, 'error'); |
|
|
} |
|
|
} catch (error) { |
|
|
showMessage('Error reactivating agent: ' + error.message, 'error'); |
|
|
} |
|
|
} |
|
|
|
|
|
async function viewAgentStats(agentId) { |
|
|
try { |
|
|
const response = await fetch(`/api/agent-stats/${agentId}`); |
|
|
const result = await response.json(); |
|
|
|
|
|
if (result.success) { |
|
|
const stats = result.stats; |
|
|
const message = ` |
|
|
Agent: ${agentId} |
|
|
Total Verifications: ${stats.total_verifications} |
|
|
Success Rate: ${(stats.success_rate * 100).toFixed(1)}% |
|
|
Average Similarity: ${stats.average_similarity.toFixed(3)} |
|
|
Last Verification: ${stats.last_verification || 'Never'} |
|
|
`; |
|
|
alert(message); |
|
|
} else { |
|
|
showMessage('Failed to load agent stats: ' + result.error, 'error'); |
|
|
} |
|
|
} catch (error) { |
|
|
showMessage('Error loading agent stats: ' + error.message, 'error'); |
|
|
} |
|
|
} |
|
|
|
|
|
function showMessage(text, type) { |
|
|
const messageDiv = document.getElementById('message'); |
|
|
messageDiv.textContent = text; |
|
|
messageDiv.className = `message ${type}`; |
|
|
messageDiv.style.display = 'block'; |
|
|
|
|
|
setTimeout(() => { |
|
|
messageDiv.style.display = 'none'; |
|
|
}, 5000); |
|
|
} |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
