Ll3doke

Running

App Files Files Community

Ashrafb commited on Jun 17

Commit

e2f91f5

•

1 Parent(s): d551a10

Update static/index.html

Browse files

Files changed (1) hide show

static/index.html +280 -175

static/index.html CHANGED Viewed

@@ -1,185 +1,290 @@
 <!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>Chatbot</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);
-        messageBox.insertAdjacentHTML("beforeend", response);
-        const responseElement = document.querySelector(".response .new");
-        const requestOptions = {
-          method: "POST",
-          headers: {
-            "Content-Type": "application/x-www-form-urlencoded"
-          },
-          body: new URLSearchParams({
-            prompt: UserTypedMessage,
-            history: "[]",  // Assuming no history for now
-          })
-        };
-        try {
-          const res = await fetch("/generate/", requestOptions);
-          const reader = res.body.getReader();
-          const decoder = new TextDecoder();
-          let partialResponse = "";
-          while (true) {
-            const { value, done } = await reader.read();
-            if (done) break;
-            const chunk = decoder.decode(value);
-            if (chunk.includes("[DONE]")) break;
-            partialResponse += chunk;
-            responseElement.innerText = partialResponse;
-          }
-          responseElement.classList.remove("new");
-        } catch (error) {
-          console.error("Error:", error);
-          responseElement.innerText = "Oops! An error occurred. Please try again.";
-          responseElement.classList.remove("new");
-        }
-      }
-    };
-  </script>
 </body>
 </html>

 <!DOCTYPE html>
+<html>
 <head>
+    <title>Chatbot</title>
+    <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
+    <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
+    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
+    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.css')}}"/>
+    <style>
+        body,html{
+            height: 100%;
+            margin: 0;
+            background: rgb(44, 47, 59);
+            background: -webkit-linear-gradient(to right, rgb(40, 59, 34), rgb(54, 60, 70), rgb(32, 32, 43));
+            background: linear-gradient(to right, rgb(38, 51, 61), rgb(50, 55, 65), rgb(33, 33, 78));
+        }
+        .chat{
+            margin-top: auto;
+            margin-bottom: auto;
+        }
+        .card{
+            height: 500px;
+            border-radius: 15px !important;
+            background-color: rgba(0,0,0,0.4) !important;
+        }
+        .contacts_body{
+            padding:  0.75rem 0 !important;
+            overflow-y: auto;
+            white-space: nowrap;
+        }
+        .msg_card_body{
+            overflow-y: auto;
+        }
+        .card-header{
+            border-radius: 15px 15px 0 0 !important;
+            border-bottom: 0 !important;
+        }
+        .card-footer{
+            border-radius: 0 0 15px 15px !important;
+            border-top: 0 !important;
+        }
+        .container{
+            align-content: center;
+        }
+        .search{
+            border-radius: 15px 0 0 15px !important;
+            background-color: rgba(0,0,0,0.3) !important;
+            border:0 !important;
+            color:white !important;
+        }
+        .search:focus{
+            box-shadow:none !important;
+            outline:0px !important;
+        }
+        .type_msg{
+            background-color: rgba(0,0,0,0.3) !important;
+            border:0 !important;
+            color:white !important;
+            height: 60px !important;
+            overflow-y: auto;
+        }
+        .type_msg:focus{
+            box-shadow:none !important;
+            outline:0px !important;
+        }
+        .attach_btn{
+            border-radius: 15px 0 0 15px !important;
+            background-color: rgba(0,0,0,0.3) !important;
+            border:0 !important;
+            color: white !important;
+            cursor: pointer;
+        }
+        .send_btn{
+            border-radius: 0 15px 15px 0 !important;
+            background-color: rgba(0,0,0,0.3) !important;
+            border:0 !important;
+            color: white !important;
+            cursor: pointer;
+        }
+        .search_btn{
+            border-radius: 0 15px 15px 0 !important;
+            background-color: rgba(0,0,0,0.3) !important;
+            border:0 !important;
+            color: white !important;
+            cursor: pointer;
+        }
+        .contacts{
+            list-style: none;
+            padding: 0;
+        }
+        .contacts li{
+            width: 100% !important;
+            padding: 5px 10px;
+            margin-bottom: 15px !important;
+        }
+        .active{
+            background-color: rgba(0,0,0,0.3);
+        }
+        .user_img{
+            height: 70px;
+            width: 70px;
+            border:1.5px solid #f5f6fa;
+        }
+        .user_img_msg{
+            height: 40px;
+            width: 40px;
+            border:1.5px solid #f5f6fa;
+        }
+        .img_cont{
+            position: relative;
+            height: 70px;
+            width: 70px;
+        }
+        .img_cont_msg{
+            height: 40px;
+            width: 40px;
+        }
+        .online_icon{
+            position: absolute;
+            height: 15px;
+            width:15px;
+            background-color: #4cd137;
+            border-radius: 50%;
+            bottom: 0.2em;
+            right: 0.4em;
+            border:1.5px solid white;
+        }
+        .offline{
+            background-color: #c23616 !important;
+        }
+        .user_info{
+            margin-top: auto;
+            margin-bottom: auto;
+            margin-left: 15px;
+        }
+        .user_info span{
+            font-size: 20px;
+            color: white;
+        }
+        .user_info p{
+            font-size: 10px;
+            color: rgba(255,255,255,0.6);
+        }
+        .video_cam{
+            margin-left: 50px;
+            margin-top: 5px;
+        }
+        .video_cam span{
+            color: white;
+            font-size: 20px;
+            cursor: pointer;
+            margin-right: 20px;
+        }
+        .msg_cotainer{
+            margin-top: auto;
+            margin-bottom: auto;
+            margin-left: 10px;
+            border-radius: 25px;
+            background-color: rgb(82, 172, 255);
+            padding: 10px;
+            position: relative;
+        }
+        .msg_cotainer_send{
+            margin-top: auto;
+            margin-bottom: auto;
+            margin-right: 10px;
+            border-radius: 25px;
+            background-color: #58cc71;
+            padding: 10px;
+            position: relative;
+        }
+        .msg_time{
+            position: absolute;
+            left: 0;
+            bottom: -15px;
+            color: rgba(255,255,255,0.5);
+            font-size: 10px;
+        }
+        .msg_time_send{
+            position: absolute;
+            right:0;
+            bottom: -15px;
+            color: rgba(255,255,255,0.5);
+            font-size: 10px;
+        }
+        .msg_head{
+            position: relative;
+        }
+        #action_menu_btn{
+            position: absolute;
+            right: 10px;
+            top: 10px;
+            color: white;
+            cursor: pointer;
+            font-size: 20px;
+        }
+        .action_menu{
+            z-index: 1;
+            position: absolute;
+            padding: 15px 0;
+            background-color: rgba(0,0,0,0.5);
+            color: white;
+            border-radius: 15px;
+            top: 30px;
+            right: 15px;
+            display: none;
+        }
+        .action_menu ul{
+            list-style: none;
+            padding: 0;
+            margin: 0;
+        }
+        .action_menu ul li{
+            width: 100%;
+            padding: 10px 15px;
+            margin-bottom: 5px;
+        }
+        .action_menu ul li i{
+            padding-right: 10px;
+        }
+        .action_menu ul li:hover{
+            cursor: pointer;
+            background-color: rgba(0,0,0,0.2);
+        }
+        @media(max-width: 576px){
+            .contacts_card{
+                margin-bottom: 15px !important;
+            }
+        }
+    </style>
 </head>
 <body>
+<div class="container-fluid h-100">
+    <div class="row justify-content-center h-100">
+        <div class="col-md-8 col-xl-6 chat">
+            <div class="card">
+                <div class="card-header msg_head">
+                    <div class="d-flex bd-highlight">
+                        <div class="img_cont">
+                            <img src="https://i.ibb.co/fSNP7Rz/icons8-chatgpt-512.png" class="rounded-circle user_img">
+                            <span class="online_icon"></span>
+                        </div>
+                        <div class="user_info">
+                            <span>ChatBot</span>
+                            <p>Ask me anything!</p>
+                        </div>
+                    </div>
+                </div>
+                <div id="messageFormeight" class="card-body msg_card_body">
+                    <!-- Messages will be dynamically added here -->
+                </div>
+                <div class="card-footer">
+                    <form id="messageArea" class="input-group" onsubmit="sendMessage(event)">
+                        <input type="text" id="text" name="prompt" placeholder="Type your message..." autocomplete="off" class="form-control type_msg" required/>
+                        <div class="input-group-append">
+                            <button type="submit" id="send" class="input-group-text send_btn"><i class="fas fa-location-arrow"></i></button>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </div>
     </div>
+</div>
+<script>
+    async function sendMessage(event) {
+        event.preventDefault();
+        const formData = new FormData(document.getElementById('messageArea'));
+        const response = await fetch('/generate/', {
+            method: 'POST',
+            body: formData
+        });
+        const data = await response.json();
+        displayMessage(data.response, 'user');
+    }
+    function displayMessage(message, role) {
+        const msgContainer = document.getElementById('messageFormeight');
+        const msgDiv = document.createElement('div');
+        msgDiv.className = role === 'user' ? 'msg_cotainer' : 'msg_cotainer_send';
+        msgDiv.innerHTML = `<span class="msg">${message}</span><span class="${role === 'user' ? 'msg_time' : 'msg_time_send'}">Just now</span>`;
+        msgContainer.appendChild(msgDiv);
+    }
+</script>
 </body>
 </html>