73 lines
2.1 KiB
HTML
73 lines
2.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>Ruby Dashboard</title>
|
|
<style>
|
|
body {
|
|
background:#1e1e1e; color:#ddd;
|
|
font-family:sans-serif; padding:20px;
|
|
}
|
|
h1 { color:#fff; }
|
|
.section { margin-bottom:20px; }
|
|
button {
|
|
background:#333; border:1px solid #555;
|
|
color:#ddd; padding:8px 12px;
|
|
border-radius:4px; cursor:pointer;
|
|
}
|
|
#history {
|
|
max-height:300px; overflow:auto;
|
|
border:1px solid #444; padding:10px;
|
|
border-radius:4px; background:#2e2e2e;
|
|
}
|
|
.entry { margin-bottom:8px; }
|
|
.user { color:#8af; }
|
|
.bot { color:#fa8; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Ruby Dashboard</h1>
|
|
|
|
<div class="section">
|
|
<strong id="progress">Progress: 0/0</strong>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h2>Recent Interactions</h2>
|
|
<div id="history">Loading…</div>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<button id="load-graph">Load Brain Map</button>
|
|
</div>
|
|
|
|
<script>
|
|
async function refreshProgress() {
|
|
const { processed, total } = await fetch('/progress').then(r=>r.json());
|
|
document.getElementById('progress').textContent =
|
|
`Progress: ${processed}/${total}`;
|
|
}
|
|
async function refreshHistory() {
|
|
const hist = await fetch('/interactions').then(r=>r.json());
|
|
const div = document.getElementById('history');
|
|
div.innerHTML = '';
|
|
if (hist.length === 0) {
|
|
div.textContent = 'No interactions yet.';
|
|
return;
|
|
}
|
|
hist.slice(-20).forEach(({user, bot}) => {
|
|
const e = document.createElement('div'); e.className='entry';
|
|
const u = document.createElement('div'); u.className='user'; u.textContent='User: '+user;
|
|
const b = document.createElement('div'); b.className='bot'; b.textContent='Bot: '+bot;
|
|
e.append(u, b); div.appendChild(e);
|
|
});
|
|
}
|
|
document.getElementById('load-graph')
|
|
.onclick = () => window.location = '/graph';
|
|
refreshProgress(); refreshHistory();
|
|
setInterval(refreshProgress, 5000);
|
|
setInterval(refreshHistory, 5000);
|
|
</script>
|
|
</body>
|
|
</html>
|