Spaces:

WebashalarForML
/

SQL_agent

Sleeping

App Files Files Community

WebashalarForML commited on 16 days ago

Commit

d7c11cc

verified ·

1 Parent(s): 142c7dc

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +222 -204

templates/index.html CHANGED Viewed

@@ -1,204 +1,222 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>Agent Chat</title>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.5.4/socket.io.js"></script>
-  <style>
-    /* Overall dark theme background */
-    body {
-      background-color: #1a1a2e;
-      color: #eaeaea;
-      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-      margin: 0;
-      padding: 0;
-    }
-    .container {
-      max-width: 800px;
-      margin: 0 auto;
-      padding: 20px;
-    }
-    h1 {
-      text-align: center;
-      margin-bottom: 20px;
-      color: #eaeaea;
-    }
-    /* Chat conversation container */
-    .chat-container {
-      background-color: #16213e;
-      border-radius: 8px;
-      padding: 20px;
-      height: 400px;
-      overflow-y: auto;
-      margin-bottom: 20px;
-    }
-    /* Logs container */
-    .logs-container {
-      background-color: #0f3460;
-      border-radius: 8px;
-      padding: 20px;
-      height: 150px;
-      overflow-y: auto;
-      margin-bottom: 20px;
-    }
-    /* Message styling */
-    .message {
-      margin-bottom: 10px;
-      display: flex;
-      align-items: flex-start;
-    }
-    .message.user {
-      justify-content: flex-end;
-    }
-    .message.agent {
-      justify-content: flex-start;
-    }
-    .bubble {
-      max-width: 70%;
-      padding: 10px 15px;
-      border-radius: 15px;
-      line-height: 1.4;
-      word-wrap: break-word;
-    }
-    /* User message bubble style */
-    .bubble.user {
-      background-color: #007bff;
-      color: #fff;
-      border-bottom-right-radius: 0;
-    }
-    /* Agent message bubble style */
-    .bubble.agent {
-      background-color: #2d3a55;
-      color: #fff;
-      border-bottom-left-radius: 0;
-    }
-    /* Log message bubble style */
-    .bubble.log {
-      background-color: #444;
-      color: #ccc;
-      font-size: 0.85rem;
-      border-radius: 5px;
-      padding: 5px 10px;
-      margin: 2px 0;
-    }
-    /* Input area styling */
-    .input-area {
-      display: flex;
-      gap: 10px;
-    }
-    .input-area textarea {
-      flex: 1;
-      padding: 10px;
-      border-radius: 5px;
-      border: none;
-      resize: none;
-      font-size: 1rem;
-    }
-    .input-area button {
-      padding: 10px 20px;
-      border-radius: 5px;
-      border: none;
-      background-color: #007bff;
-      color: #fff;
-      cursor: pointer;
-    }
-    .input-area button:hover {
-      background-color: #0056b3;
-    }
-  </style>
-</head>
-<body>
-  <div class="container">
-    <h1>Agent Chat</h1>
-    <!-- Chat conversation container -->
-    <div class="chat-container" id="chat">
-      <!-- Conversation messages will appear here -->
-    </div>
-    <!-- Logs container -->
-    <div class="logs-container" id="logs">
-      <!-- Log messages will appear here -->
-    </div>
-    <!-- Input area -->
-    <div class="input-area">
-      <textarea id="prompt" rows="2" placeholder="Type your message here..."></textarea>
-      <button id="send">Send</button>
-    </div>
-  </div>
-  <script>
-    const socket = io();
-    const chatContainer = document.getElementById("chat");
-    const logsContainer = document.getElementById("logs");
-    const sendButton = document.getElementById("send");
-    const promptTextarea = document.getElementById("prompt");
-    // Function to add a chat message bubble
-    function addMessage(sender, text) {
-      const messageDiv = document.createElement("div");
-      messageDiv.classList.add("message", sender);
-      const bubbleDiv = document.createElement("div");
-      bubbleDiv.classList.add("bubble", sender);
-      bubbleDiv.textContent = text;
-      messageDiv.appendChild(bubbleDiv);
-      chatContainer.appendChild(messageDiv);
-      chatContainer.scrollTop = chatContainer.scrollHeight;
-    }
-    // Function to add a log message bubble
-    function addLogMessage(text) {
-      const logDiv = document.createElement("div");
-      logDiv.classList.add("bubble", "log");
-      logDiv.textContent = text;
-      logsContainer.appendChild(logDiv);
-      logsContainer.scrollTop = logsContainer.scrollHeight;
-    }
-    // Send user's message when "Send" button is clicked
-    sendButton.addEventListener("click", () => {
-      const prompt = promptTextarea.value.trim();
-      if (!prompt) return;
-      addMessage("user", prompt);
-      promptTextarea.value = "";
-      // Send prompt to the server
-      fetch("/generate", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ prompt: prompt })
-      });
-    });
-    // Handle streaming tokens for the agent's reply.
-    let agentMessageBubble = null;
-    socket.on("final_stream", (data) => {
-      if (!agentMessageBubble) {
-        // Create agent message bubble if it doesn't exist.
-        const messageDiv = document.createElement("div");
-        messageDiv.classList.add("message", "agent");
-        agentMessageBubble = document.createElement("div");
-        agentMessageBubble.classList.add("bubble", "agent");
-        messageDiv.appendChild(agentMessageBubble);
-        chatContainer.appendChild(messageDiv);
-      }
-      // Append the token to the agent's bubble.
-      agentMessageBubble.textContent += data.message;
-      chatContainer.scrollTop = chatContainer.scrollHeight;
-    });
-    // When final answer is complete, ensure the bubble is finalized.
-    socket.on("final", (data) => {
-      if (!agentMessageBubble) {
-        addMessage("agent", data.message);
-      } else {
-        agentMessageBubble.textContent = data.message;
-        agentMessageBubble = null;
-      }
-    });
-    // Append log messages as they arrive.
-    socket.on("log", (data) => {
-      addLogMessage(data.message);
-    });
-  </script>
-</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Agent Chat</title>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.5.4/socket.io.js"></script>
+  <style>
+    /* Overall dark theme background */
+    body {
+      background-color: #1a1a2e;
+      color: #eaeaea;
+      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+      margin: 0;
+      padding: 0;
+    }
+    .container {
+      max-width: 800px;
+      margin: 0 auto;
+      padding: 20px;
+    }
+    header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+    h1 {
+      margin-bottom: 20px;
+      color: #eaeaea;
+    }
+    .upload-btn {
+      background-color: #007bff;
+      color: #fff;
+      padding: 8px 12px;
+      text-decoration: none;
+      border-radius: 5px;
+    }
+    .upload-btn:hover {
+      background-color: #0056b3;
+    }
+    /* Chat conversation container */
+    .chat-container {
+      background-color: #16213e;
+      border-radius: 8px;
+      padding: 20px;
+      height: 400px;
+      overflow-y: auto;
+      margin-bottom: 20px;
+    }
+    /* Logs container */
+    .logs-container {
+      background-color: #0f3460;
+      border-radius: 8px;
+      padding: 20px;
+      height: 150px;
+      overflow-y: auto;
+      margin-bottom: 20px;
+    }
+    /* Message styling */
+    .message {
+      margin-bottom: 10px;
+      display: flex;
+      align-items: flex-start;
+    }
+    .message.user {
+      justify-content: flex-end;
+    }
+    .message.agent {
+      justify-content: flex-start;
+    }
+    .bubble {
+      max-width: 70%;
+      padding: 10px 15px;
+      border-radius: 15px;
+      line-height: 1.4;
+      word-wrap: break-word;
+    }
+    /* User message bubble style */
+    .bubble.user {
+      background-color: #007bff;
+      color: #fff;
+      border-bottom-right-radius: 0;
+    }
+    /* Agent message bubble style */
+    .bubble.agent {
+      background-color: #2d3a55;
+      color: #fff;
+      border-bottom-left-radius: 0;
+    }
+    /* Log message bubble style */
+    .bubble.log {
+      background-color: #444;
+      color: #ccc;
+      font-size: 0.85rem;
+      border-radius: 5px;
+      padding: 5px 10px;
+      margin: 2px 0;
+    }
+    /* Input area styling */
+    .input-area {
+      display: flex;
+      gap: 10px;
+    }
+    .input-area textarea {
+      flex: 1;
+      padding: 10px;
+      border-radius: 5px;
+      border: none;
+      resize: none;
+      font-size: 1rem;
+    }
+    .input-area button {
+      padding: 10px 20px;
+      border-radius: 5px;
+      border: none;
+      background-color: #007bff;
+      color: #fff;
+      cursor: pointer;
+    }
+    .input-area button:hover {
+      background-color: #0056b3;
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <header>
+      <h1>Agent Chat</h1>
+      <!-- Link to the upload page -->
+      <a href="/upload" class="upload-btn">Upload DB</a>
+    </header>
+    <!-- Chat conversation container -->
+    <div class="chat-container" id="chat">
+      <!-- Conversation messages will appear here -->
+    </div>
+    <!-- Logs container -->
+    <div class="logs-container" id="logs">
+      <!-- Log messages will appear here -->
+    </div>
+    <!-- Input area -->
+    <div class="input-area">
+      <textarea id="prompt" rows="2" placeholder="Type your message here..."></textarea>
+      <button id="send">Send</button>
+    </div>
+  </div>
+  <script>
+    const socket = io();
+    const chatContainer = document.getElementById("chat");
+    const logsContainer = document.getElementById("logs");
+    const sendButton = document.getElementById("send");
+    const promptTextarea = document.getElementById("prompt");
+    // Function to add a chat message bubble
+    function addMessage(sender, text) {
+      const messageDiv = document.createElement("div");
+      messageDiv.classList.add("message", sender);
+      const bubbleDiv = document.createElement("div");
+      bubbleDiv.classList.add("bubble", sender);
+      bubbleDiv.textContent = text;
+      messageDiv.appendChild(bubbleDiv);
+      chatContainer.appendChild(messageDiv);
+      chatContainer.scrollTop = chatContainer.scrollHeight;
+    }
+    // Function to add a log message bubble
+    function addLogMessage(text) {
+      const logDiv = document.createElement("div");
+      logDiv.classList.add("bubble", "log");
+      logDiv.textContent = text;
+      logsContainer.appendChild(logDiv);
+      logsContainer.scrollTop = logsContainer.scrollHeight;
+    }
+    // Send user's message when "Send" button is clicked
+    sendButton.addEventListener("click", () => {
+      const prompt = promptTextarea.value.trim();
+      if (!prompt) return;
+      addMessage("user", prompt);
+      promptTextarea.value = "";
+      // Send prompt to the server
+      fetch("/generate", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ prompt: prompt })
+      });
+    });
+    // Handle streaming tokens for the agent's reply.
+    let agentMessageBubble = null;
+    socket.on("final_stream", (data) => {
+      if (!agentMessageBubble) {
+        // Create agent message bubble if it doesn't exist.
+        const messageDiv = document.createElement("div");
+        messageDiv.classList.add("message", "agent");
+        agentMessageBubble = document.createElement("div");
+        agentMessageBubble.classList.add("bubble", "agent");
+        messageDiv.appendChild(agentMessageBubble);
+        chatContainer.appendChild(messageDiv);
+      }
+      // Append the token to the agent's bubble.
+      agentMessageBubble.textContent += data.message;
+      chatContainer.scrollTop = chatContainer.scrollHeight;
+    });
+    // When final answer is complete, ensure the bubble is finalized.
+    socket.on("final", (data) => {
+      if (!agentMessageBubble) {
+        addMessage("agent", data.message);
+      } else {
+        agentMessageBubble.textContent = data.message;
+        agentMessageBubble = null;
+      }
+    });
+    // Append log messages as they arrive.
+    socket.on("log", (data) => {
+      addLogMessage(data.message);
+    });
+  </script>
+</body>
+</html>