Spaces:

Ashok75
/

react

Sleeping

App Files Files Community

Ashok75 commited on Mar 5

Commit

3769172

verified ·

1 Parent(s): 9982780

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +26 -26

templates/index.html CHANGED Viewed

@@ -1,40 +1,40 @@
 <!DOCTYPE html>
-<html>
 <head>
-    <title>Nanbeige 3B Chat</title>
     <style>
-        body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: #1e1e1e; color: #ccc; padding: 40px; }
-        #chat-box { border: 1px solid #333; height: 500px; overflow-y: auto; padding: 20px; background: #252526; border-radius: 8px; }
-        .thought { color: #888; font-style: italic; background: #2d2d2d; padding: 10px; border-left: 3px solid #555; margin: 10px 0; border-radius: 4px; display: block; }
-        .response { color: #569cd6; font-weight: bold; margin-bottom: 20px; display: block; }
-        input { width: 85%; padding: 12px; background: #3c3c3c; color: white; border: none; border-radius: 4px; }
-        button { padding: 12px 20px; background: #007acc; color: white; border: none; cursor: pointer; border-radius: 4px; }
     </style>
 </head>
 <body>
-    <h2>Nanbeige 4.1-3B Reasoning Console</h2>
-    <div id="chat-box"></div>
-    <br>
-    <input type="text" id="user-input" placeholder="Ask something...">
-    <button onclick="sendMsg()">Send</button>
     <script>
-        async function sendMsg() {
             const input = document.getElementById('user-input');
-            const box = document.getElementById('chat-box');
-            const msg = input.value;
-            if(!msg) return;
-            box.innerHTML += `<div><strong>User:</strong> ${msg}</div>`;
             input.value = '';
             const resDiv = document.createElement('div');
-            box.appendChild(resDiv);
             const response = await fetch('/chat', {
                 method: 'POST',
                 headers: {'Content-Type': 'application/json'},
-                body: JSON.stringify({ message: msg })
             });
             const reader = response.body.getReader();
@@ -47,13 +47,13 @@
                 fullText += decoder.decode(value);
-                // Real-time parsing of thoughts vs final response [13]
-                let processed = fullText
-                    .replace(/<thought>([\s\S]*?)<\/thought>/g, '<span class="thought">Thought: $1</span>')
-                    .replace(/<\/thought>([\s\S]*)/g, '</span><span class="response">$1</span>');
-                resDiv.innerHTML = processed;
-                box.scrollTop = box.scrollHeight;
             }
         }
     </script>

 <!DOCTYPE html>
+<html lang="en">
 <head>
+    <meta charset="UTF-8">
+    <title>Enterprise Agent Console</title>
     <style>
+        body { font-family: 'Courier New', monospace; background: #0a0a0a; color: #00ff41; padding: 20px; }
+        #console { border: 1px solid #333; height: 500px; overflow-y: auto; padding: 15px; background: #000; margin-bottom: 20px; border-radius: 4px; }
+        .thought { color: #888; font-style: italic; background: #111; padding: 10px; border-left: 2px solid #444; margin: 10px 0; display: block; }
+        .answer { color: #fff; font-weight: bold; display: block; margin-top: 10px; }
+        input { width: 80%; padding: 12px; background: #1a1a1a; color: #fff; border: 1px solid #333; border-radius: 4px; }
+        button { padding: 12px 24px; background: #007acc; border: none; color: white; cursor: pointer; border-radius: 4px; }
     </style>
 </head>
 <body>
+    <h2>ReAct Agentic Trace</h2>
+    <div id="console"></div>
+    <input type="text" id="user-input" placeholder="Enter business objective...">
+    <button onclick="send()">Execute</button>
     <script>
+        async function send() {
             const input = document.getElementById('user-input');
+            const consoleBox = document.getElementById('console');
+            const text = input.value;
+            if (!text) return;
+            consoleBox.innerHTML += `<div>> USER: ${text}</div>`;
             input.value = '';
             const resDiv = document.createElement('div');
+            consoleBox.appendChild(resDiv);
             const response = await fetch('/chat', {
                 method: 'POST',
                 headers: {'Content-Type': 'application/json'},
+                body: JSON.stringify({ message: text })
             });
             const reader = response.body.getReader();
                 fullText += decoder.decode(value);
+                // Real-time parsing of the ReAct loop [35, 36]
+                let html = fullText
+                    .replace(/<thought>([\s\S]*?)<\/thought>/g, '<span class="thought">THOUGHT: $1</span>')
+                    .replace(/<\/thought>([\s\S]*)/g, '</span><span class="answer">FINAL ANSWER: $1</span>');
+                resDiv.innerHTML = html;
+                consoleBox.scrollTop = consoleBox.scrollHeight;
             }
         }
     </script>