Spaces:

Ashok75
/

react

Sleeping

App Files Files Community

Ashok75 commited on Mar 5

Commit

e4c89bb

verified ·

1 Parent(s): 38951bc

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +32 -25

templates/index.html CHANGED Viewed

@@ -1,52 +1,59 @@
 <!DOCTYPE html>
-<html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <title>ReAct Agent Console</title>
     <style>
-        body { font-family: monospace; background: #121212; color: #e0e0e0; padding: 20px; }
-        #console { border: 1px solid #333; height: 500px; overflow-y: auto; padding: 15px; margin-bottom: 20px; background: #000; }
-        .trace { border-left: 2px solid #007acc; padding-left: 10px; margin: 10px 0; white-space: pre-wrap; }
-        .user { color: #569cd6; font-weight: bold; }
-        input { width: 80%; padding: 10px; background: #222; color: #fff; border: 1px solid #444; }
-        button { padding: 10px 20px; background: #007acc; border: none; color: white; cursor: pointer; }
     </style>
 </head>
 <body>
-    <h2>ReAct Reasoning Trace</h2>
-    <div id="console"></div>
-    <input type="text" id="user-input" placeholder="Ask 'whats the time now'...">
-    <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><span class="user">User:</span> ${text}</div>`;
             input.value = '';
-            const traceDiv = document.createElement('div');
-            traceDiv.className = 'trace';
-            consoleBox.appendChild(traceDiv);
-            // Fetching a streaming response [23, 24]
             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;
-                traceDiv.innerText += decoder.decode(value);
-                consoleBox.scrollTop = consoleBox.scrollHeight;
             }
         }
     </script>

 <!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();
             const decoder = new TextDecoder();
+            let fullText = "";
             while (true) {
                 const { done, value } = await reader.read();
                 if (done) break;
+                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>