Ll3doke

Running

App Files Files Community

Ashrafb commited on Jun 17

Commit

af2ea51

•

1 Parent(s): fcbd553

Update static/index.html

Browse files

Files changed (1) hide show

static/index.html +139 -118

static/index.html CHANGED Viewed

@@ -1,133 +1,154 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>ChatGPT Interface</title>
-    <style>
-        body {
-            font-family: Arial, sans-serif;
-            display: flex;
-            flex-direction: column;
-            height: 100vh;
-            margin: 0;
-            background-color: #f7f7f8;
-        }
-        #chatbox {
-            flex-grow: 1;
-            padding: 20px;
-            overflow-y: auto;
-            border-bottom: 1px solid #ccc;
-            background-color: #ffffff;
-        }
-        .message {
-            margin: 10px 0;
-            display: flex;
-        }
-        .user .message-content {
-            background-color: #d1e7dd;
-            align-self: flex-end;
-        }
-        .assistant .message-content {
-            background-color: #f8d7da;
-            align-self: flex-start;
-        }
-        .message-content {
-            padding: 10px;
-            border-radius: 10px;
-            max-width: 80%;
-        }
-        #inputArea {
-            display: flex;
-            padding: 10px;
-            border-top: 1px solid #ccc;
-            background-color: #fff;
-        }
-        #inputArea input, #inputArea button {
-            padding: 10px;
-            font-size: 16px;
-        }
-        #inputArea input {
-            flex-grow: 1;
-            margin-right: 10px;
-        }
-        #config {
-            display: none;
-            padding: 10px;
-            border-top: 1px solid #ccc;
-            background-color: #fff;
-        }
-        #config input {
-            width: 100%;
-            padding: 10px;
-            margin: 5px 0;
-        }
-    </style>
 </head>
 <body>
-    <div id="chatbox"></div>
-    <div id="inputArea">
-        <input type="text" id="message" placeholder="Type a message">
-        <button onclick="sendMessage()">Send</button>
     </div>
-    <div id="config">
-        <label for="systemMessage">System message:</label>
-        <input type="text" id="systemMessage" value="You are a helpful, respectful and honest assistant. Always answer as helpfully as possible, while being safe. Your answers should not include any harmful, unethical, racist, sexist, toxic, dangerous, or illegal content. Please ensure that your responses are socially unbiased and positive in nature. If a question does not make any sense, or is not factually coherent, explain why instead of answering something not correct. If you don't know the answer to a question, please don't share false information.">
-        <label for="maxTokens">Max new tokens:</label>
-        <input type="number" id="maxTokens" value="2000" min="1" max="2048" step="1">
-        <label for="temperature">Temperature:</label>
-        <input type="number" id="temperature" value="0.7" min="0.1" max="4.0" step="0.1">
-        <label for="topP">Top-p (nucleus sampling):</label>
-        <input type="number" id="topP" value="0.95" min="0.1" max="1.0" step="0.05">
     </div>
-    <script>
-        let history = [];
-        function appendMessage(role, content) {
-            const chatbox = document.getElementById('chatbox');
-            const messageDiv = document.createElement('div');
-            messageDiv.classList.add(role, 'message');
-            const contentDiv = document.createElement('div');
-            contentDiv.classList.add('message-content');
-            contentDiv.textContent = content;
-            messageDiv.appendChild(contentDiv);
-            chatbox.appendChild(messageDiv);
-            chatbox.scrollTop = chatbox.scrollHeight;
-        }
-        async function sendMessage() {
-            const messageInput = document.getElementById('message');
-            const message = messageInput.value;
-            const systemMessage = document.getElementById('systemMessage').value;
-            const maxTokens = parseInt(document.getElementById('maxTokens').value);
-            const temperature = parseFloat(document.getElementById('temperature').value);
-            const topP = parseFloat(document.getElementById('topP').value);
-            appendMessage('user', message);
-            history.push([message, null]);
-            const response = await fetch('/chat', {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json'
-                },
-                body: JSON.stringify({
-                    message: message,
-                    history: history,
-                    system_message: systemMessage,
-                    max_tokens: maxTokens,
-                    temperature: temperature,
-                    top_p: topP
-                })
-            });
-            const data = await response.json();
-            appendMessage('assistant', data.response);
-            history[history.length - 1][1] = data.response;
-            messageInput.value = '';
-        }
-    </script>
 </body>
 </html>

 <!DOCTYPE html>
 <html lang="en">
 <head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="style.css">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap" rel="stylesheet">
+  <title>Document</title>
+  <style>
+    * {
+      padding: 0;
+      margin: 0;
+      font-family: 'Poppins', sans-serif;
+      box-sizing: border-box;
+    }
+    body {
+      width: 100%;
+      height: 100vh;
+      background-color: #33343f;
+    }
+    .chat {
+      display: flex;
+      gap: 20px;
+      padding: 25px;
+      color: #fff;
+      font-size: 15px;
+      font-weight: 300;
+    }
+    .chat img {
+      width: 35px;
+      height: 35px;
+    }
+    .response {
+      background-color: #494b59;
+    }
+    .messagebar {
+      position: fixed;
+      bottom: 0;
+      height: 5rem;
+      width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-top: 1px solid #494b59;
+      background-color: #33343f;
+    }
+    .messagebar .bar-wrapper {
+      background-color: #494b59;
+      border-radius: 5px;
+      width: 60vw;
+      padding: 10px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+    .bar-wrapper input {
+      width: 100%;
+      padding: 5px;
+      border: none;
+      outline: none;
+      font-size: 14px;
+      background: none;
+      color: #ccc;
+    }
+    .bar-wrapper input::placeholder {
+      color: #ccc;
+    }
+    .messagebar button {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: none;
+      border: none;
+      color: #fff;
+      cursor: pointer;
+    }
+    .message-box {
+      height: calc(100vh - 5rem);
+      overflow-y: auto;
+    }
+  </style>
 </head>
 <body>
+  <div class="chatbox-wrapper">
+    <div class="message-box">
+      <div class="chat response">
+        <img src="img/chatbot.jpg">
+        <span>Hello there! <br> How can I help you today.</span>
+      </div>
     </div>
+    <div class="messagebar">
+      <div class="bar-wrapper">
+        <input type="text" placeholder="Enter your message...">
+        <button>
+          <span class="material-symbols-rounded">send</span>
+        </button>
+      </div>
     </div>
+  </div>
+  <script>
+    const messageBar = document.querySelector(".bar-wrapper input");
+    const sendBtn = document.querySelector(".bar-wrapper button");
+    const messageBox = document.querySelector(".message-box");
+    sendBtn.onclick = async function () {
+      if (messageBar.value.length > 0) {
+        const UserTypedMessage = messageBar.value;
+        messageBar.value = "";
+        let message = `<div class="chat message"><img src="img/user.jpg"><span>${UserTypedMessage}</span></div>`;
+        let response = `<div class="chat response"><img src="img/chatbot.jpg"><span class="new">...</span></div>`;
+        messageBox.insertAdjacentHTML("beforeend", message);
+        setTimeout(async () => {
+          messageBox.insertAdjacentHTML("beforeend", response);
+          const requestOptions = {
+            method: "POST",
+            headers: {
+              "Content-Type": "application/x-www-form-urlencoded"
+            },
+            body: new URLSearchParams({
+              prompt: UserTypedMessage,
+              history: "[]",
+              temperature: "0.9",
+              max_new_tokens: "512",
+              top_p: "0.95",
+              repetition_penalty: "1.0"
+            })
+          };
+          try {
+            const res = await fetch("/generate/", requestOptions);
+            const data = await res.json();
+            const ChatBotResponse = document.querySelector(".response .new");
+            ChatBotResponse.innerText = data.response;
+            ChatBotResponse.classList.remove("new");
+          } catch (error) {
+            console.error("Error:", error);
+            const ChatBotResponse = document.querySelector(".response .new");
+            ChatBotResponse.innerText = "Oops! An error occurred. Please try again.";
+            ChatBotResponse.classList.remove("new");
+          }
+        }, 100);
+      }
+    };
+  </script>
 </body>
 </html>