Hugging Face's logo

Spaces:
Ashok75
/
react
Sleeping

App Files Community
Ashok75 commited on
Commit
1deee4e
·
verified ·
1 Parent(s): ed4ef8c

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +18 -23
templates/index.html CHANGED
@@ -4,39 +4,35 @@
4
  <meta charset="UTF-8">
5
  <title>ReAct Agent Console</title>
6
  <style>
7
- body { font-family: 'Courier New', Courier, monospace; background: #1e1e1e; color: #d4d4d4; padding: 20px; }
8
- #chatbox { border: 1px solid #444; height: 500px; overflow-y: auto; padding: 15px; background: #252526; }
9
- .message { margin-bottom: 15px; border-left: 3px solid #007acc; padding-left: 10px; white-space: pre-wrap; }
10
- .user-label { color: #569cd6; font-weight: bold; }
11
- .agent-label { color: #4ec9b0; font-weight: bold; }
12
- #input-area { display: flex; margin-top: 20px; }
13
- input { flex-grow: 1; background: #333; color: white; border: 1px solid #555; padding: 10px; }
14
- button { background: #007acc; color: white; border: none; padding: 10px 20px; cursor: pointer; }
15
  </style>
16
  </head>
17
  <body>
18
- <h2>ReAct Agent Trace</h2>
19
- <div id="chatbox"></div>
20
- <div id="input-area">
21
- <input type="text" id="user-input" placeholder="Ask for the time or a math problem (e.g., 25 * 4)...">
22
- <button onclick="send()">Send</button>
23
- </div>
24
 
25
  <script>
26
  async function send() {
27
- const box = document.getElementById('chatbox');
28
  const input = document.getElementById('user-input');
 
29
  const text = input.value;
30
  if (!text) return;
31
 
32
- box.innerHTML += `<div><span class="user-label">User:</span> ${text}</div>`;
33
  input.value = '';
34
 
35
- const responseDiv = document.createElement('div');
36
- responseDiv.className = 'message';
37
- responseDiv.innerHTML = '<span class="agent-label">Agent Traces:</span><br>';
38
- box.appendChild(responseDiv);
39
 
 
40
  const response = await fetch('/chat', {
41
  method: 'POST',
42
  headers: {'Content-Type': 'application/json'},
@@ -49,9 +45,8 @@
49
  while (true) {
50
  const { done, value } = await reader.read();
51
  if (done) break;
52
- const chunk = decoder.decode(value, { stream: true });
53
- responseDiv.innerHTML += chunk;
54
- box.scrollTop = box.scrollHeight;
55
  }
56
  }
57
  </script>
 
4
  <meta charset="UTF-8">
5
  <title>ReAct Agent Console</title>
6
  <style>
7
+ body { font-family: monospace; background: #121212; color: #e0e0e0; padding: 20px; }
8
+ #console { border: 1px solid #333; height: 500px; overflow-y: auto; padding: 15px; margin-bottom: 20px; background: #000; }
9
+ .trace { border-left: 2px solid #007acc; padding-left: 10px; margin: 10px 0; white-space: pre-wrap; }
10
+ .user { color: #569cd6; font-weight: bold; }
11
+ input { width: 80%; padding: 10px; background: #222; color: #fff; border: 1px solid #444; }
12
+ button { padding: 10px 20px; background: #007acc; border: none; color: white; cursor: pointer; }
 
 
13
  </style>
14
  </head>
15
  <body>
16
+ <h2>ReAct Reasoning Trace</h2>
17
+ <div id="console"></div>
18
+ <input type="text" id="user-input" placeholder="Ask 'whats the time now'...">
19
+ <button onclick="send()">Execute</button>
 
 
20
 
21
  <script>
22
  async function send() {
 
23
  const input = document.getElementById('user-input');
24
+ const consoleBox = document.getElementById('console');
25
  const text = input.value;
26
  if (!text) return;
27
 
28
+ consoleBox.innerHTML += `<div><span class="user">User:</span> ${text}</div>`;
29
  input.value = '';
30
 
31
+ const traceDiv = document.createElement('div');
32
+ traceDiv.className = 'trace';
33
+ consoleBox.appendChild(traceDiv);
 
34
 
35
+ // Fetching a streaming response [23, 24]
36
  const response = await fetch('/chat', {
37
  method: 'POST',
38
  headers: {'Content-Type': 'application/json'},
 
45
  while (true) {
46
  const { done, value } = await reader.read();
47
  if (done) break;
48
+ traceDiv.innerText += decoder.decode(value);
49
+ consoleBox.scrollTop = consoleBox.scrollHeight;
 
50
  }
51
  }
52
  </script>