58 lines
1.8 KiB
HTML
58 lines
1.8 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>Content Generation Chat</title>
|
||
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.5.4/socket.io.js"></script>
|
||
|
|
<script>
|
||
|
|
var socket = io();
|
||
|
|
|
||
|
|
socket.on('connect', function() {
|
||
|
|
console.log('Connected to server');
|
||
|
|
});
|
||
|
|
|
||
|
|
socket.on('task_queued', function(data) {
|
||
|
|
var taskId = data.task_id;
|
||
|
|
var agenda = data.agenda;
|
||
|
|
addMessage('System', `Task ${taskId} queued for generating content on "${agenda}".`);
|
||
|
|
});
|
||
|
|
|
||
|
|
socket.on('agent_update', function(data) {
|
||
|
|
var taskId = data.task_id;
|
||
|
|
var agentId = data.agent_id;
|
||
|
|
var status = data.status;
|
||
|
|
var message = data.message;
|
||
|
|
addMessage(`Agent ${agentId}`, `[${status}] ${message}`);
|
||
|
|
});
|
||
|
|
|
||
|
|
function addMessage(sender, message) {
|
||
|
|
var chatLog = document.getElementById('chat-log');
|
||
|
|
var messageElement = document.createElement('div');
|
||
|
|
messageElement.innerHTML = `<strong>${sender}:</strong> ${message}`;
|
||
|
|
chatLog.appendChild(messageElement);
|
||
|
|
}
|
||
|
|
|
||
|
|
function generateContent() {
|
||
|
|
var agendaInput = document.getElementById('agenda-input');
|
||
|
|
var agenda = agendaInput.value.trim();
|
||
|
|
if (agenda) {
|
||
|
|
socket.emit('generate_content', { agenda: agenda });
|
||
|
|
agendaInput.value = '';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<style>
|
||
|
|
#chat-log {
|
||
|
|
height: 300px;
|
||
|
|
overflow-y: scroll;
|
||
|
|
border: 1px solid #ccc;
|
||
|
|
padding: 10px;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<h1>Content Generation Chat</h1>
|
||
|
|
<div id="chat-log"></div>
|
||
|
|
<input type="text" id="agenda-input" placeholder="Enter a topic or agenda">
|
||
|
|
<button onclick="generateContent()">Generate Content</button>
|
||
|
|
</body>
|
||
|
|
</html>
|