dashboard.html•2.26 kB
<!DOCTYPE html>
<html>
<head>
<title>AGoT Dashboard</title>
<script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>
<style>
body { font-family: Arial, sans-serif; margin: 20px; }
#graph { width: 60%; height: 400px; float: left; border: 1px solid #ccc; }
#properties { width: 35%; float: right; }
#chat-panel, #config-editor { clear: both; margin-top: 20px; }
textarea { width: 100%; }
</style>
</head>
<body>
<h1>Adaptive Graph of Thoughts Dashboard</h1>
<div id="graph"></div>
<table id="properties"></table>
<div id="chat-panel">
<h2>LLM Chat</h2>
<textarea id="chat-input" rows="4"></textarea>
<button onclick="sendQuestion()">Send</button>
<pre id="chat-response"></pre>
</div>
<div id="config-editor">
<h2>Configuration</h2>
<textarea id="yaml-config" rows="10">{{ config_yaml | e }}</textarea>
<button onclick="saveConfig()">Apply & Restart</button>
<pre id="config-message"></pre>
</div>
<script>
function sendQuestion(){
const question = document.getElementById('chat-input').value.trim();
if (!question) return;
fetch('/chat', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({question})
})
.then(r => {
if (!r.ok) throw new Error(`HTTP ${r.status}`);
return r.json();
})
.then(d => {
document.getElementById('chat-response').textContent = d.answer || d.message || 'No response';
})
.catch(e => {
document.getElementById('chat-response').textContent = `Error: ${e.message}`;
});
}
function saveConfig(){
const yaml = document.getElementById('yaml-config').value;
fetch('/dashboard/save_config', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({yaml})
})
.then(r => {
if (!r.ok) throw new Error(`HTTP ${r.status}`);
return r.json();
})
.then(d => {
document.getElementById('config-message').textContent = d.message || 'Saved successfully';
})
.catch(e => {
document.getElementById('config-message').textContent = `Error: ${e.message}`;
});
}
</script>
</body>
</html>