Spaces:

Ashok75
/

react

Sleeping

App Files Files Community

Ashok75 commited on about 1 month ago

Commit

9c856ea

verified ·

1 Parent(s): 148ca6e

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +22 -31

templates/index.html CHANGED Viewed

@@ -2,66 +2,57 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>Model-Tiny Chat</title>
     <style>
-        body { font-family: sans-serif; max-width: 800px; margin: 2em auto; padding: 0 1em; }
-        #chatbox { border: 1px solid #ccc; height: 400px; overflow-y: scroll; padding: 1em; margin-bottom: 1em; }
-        .user { color: blue; font-weight: bold; }
-        .bot { color: green; font-weight: bold; }
-        #input-area { display: flex; gap: 10px; }
-        input { flex-grow: 1; padding: 10px; }
     </style>
 </head>
 <body>
-    <h1>AshokGakr/model-tiny Agent</h1>
     <div id="chatbox"></div>
     <div id="input-area">
-        <input type="text" id="user-input" placeholder="Type your message here...">
-        <button onclick="sendMessage()">Send</button>
     </div>
     <script>
-        let messages = [
-            {"role": "system", "content": "You are a helpful assistant specialized in reasoning and tool use."}
-        ];
-        async function sendMessage() {
             const input = document.getElementById('user-input');
-            const chatbox = document.getElementById('chatbox');
             const text = input.value;
             if (!text) return;
-            // Update UI and Message History
-            messages.push({"role": "user", "content": text});
-            chatbox.innerHTML += `<p><span class="user">User:</span> ${text}</p>`;
             input.value = '';
-            const botMessageDiv = document.createElement('p');
-            botMessageDiv.innerHTML = '<span class="bot">Bot:</span> <span class="content"></span>';
-            chatbox.appendChild(botMessageDiv);
-            const contentSpan = botMessageDiv.querySelector('.content');
-            // 4. Handle Streaming Request
-            // This replicates the "Observe -> Think -> Act" loop in real-time [9, 10].
             const response = await fetch('/chat', {
                 method: 'POST',
                 headers: {'Content-Type': 'application/json'},
-                body: JSON.stringify({ messages })
             });
             const reader = response.body.getReader();
             const decoder = new TextDecoder();
-            let fullBotResponse = "";
             while (true) {
                 const { done, value } = await reader.read();
                 if (done) break;
                 const chunk = decoder.decode(value, { stream: true });
-                fullBotResponse += chunk;
-                contentSpan.innerText = fullBotResponse;
-                chatbox.scrollTop = chatbox.scrollHeight;
             }
-            messages.push({"role": "assistant", "content": fullBotResponse});
         }
     </script>
 </body>

 <html lang="en">
 <head>
     <meta charset="UTF-8">
+    <title>ReAct Agent Console</title>
     <style>
+        body { font-family: 'Courier New', Courier, monospace; background: #1e1e1e; color: #d4d4d4; padding: 20px; }
+        #chatbox { border: 1px solid #444; height: 500px; overflow-y: auto; padding: 15px; background: #252526; }
+        .message { margin-bottom: 15px; border-left: 3px solid #007acc; padding-left: 10px; white-space: pre-wrap; }
+        .user-label { color: #569cd6; font-weight: bold; }
+        .agent-label { color: #4ec9b0; font-weight: bold; }
+        #input-area { display: flex; margin-top: 20px; }
+        input { flex-grow: 1; background: #333; color: white; border: 1px solid #555; padding: 10px; }
+        button { background: #007acc; color: white; border: none; padding: 10px 20px; cursor: pointer; }
     </style>
 </head>
 <body>
+    <h2>ReAct Agent Trace</h2>
     <div id="chatbox"></div>
     <div id="input-area">
+        <input type="text" id="user-input" placeholder="Ask for the time or a math problem (e.g., 25 * 4)...">
+        <button onclick="send()">Send</button>
     </div>
     <script>
+        async function send() {
+            const box = document.getElementById('chatbox');
             const input = document.getElementById('user-input');
             const text = input.value;
             if (!text) return;
+            box.innerHTML += `<div><span class="user-label">User:</span> ${text}</div>`;
             input.value = '';
+            const responseDiv = document.createElement('div');
+            responseDiv.className = 'message';
+            responseDiv.innerHTML = '<span class="agent-label">Agent Traces:</span><br>';
+            box.appendChild(responseDiv);
             const response = await fetch('/chat', {
                 method: 'POST',
                 headers: {'Content-Type': 'application/json'},
+                body: JSON.stringify({ message: text })
             });
             const reader = response.body.getReader();
             const decoder = new TextDecoder();
             while (true) {
                 const { done, value } = await reader.read();
                 if (done) break;
                 const chunk = decoder.decode(value, { stream: true });
+                responseDiv.innerHTML += chunk;
+                box.scrollTop = box.scrollHeight;
             }
         }
     </script>
 </body>