Hugging Face's logo

Spaces:
Ashrafb
/
Ll3doke
Running

App Files Community
Ashrafb commited on
Commit
eb4b18f
•
1 Parent(s): 3fb2ff1

Update static/index.html

Browse files
Files changed (1) hide show
  1. static/index.html +103 -119
static/index.html CHANGED
@@ -7,92 +7,92 @@
7
  <link rel="stylesheet" href="style.css">
8
  <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" />
9
  <link rel="preconnect" href="https://fonts.googleapis.com">
10
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11
- <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap" rel="stylesheet">
12
  <title>Document</title>
13
  <style>
14
- *{
15
- padding: 0;
16
- margin: 0;
17
- font-family: 'Poppins', sans-serif;
18
- box-sizing: border-box;
19
- }
20
-
21
- body{
22
- width: 100%;
23
- height: 100vh;
24
- background-color: #33343f;
25
- }
26
-
27
- .chat{
28
- display: flex;
29
- gap: 20px;
30
- padding: 25px;
31
- color: #fff;
32
- font-size: 15px;
33
- font-weight: 300;
34
- }
35
-
36
- .chat img{
37
- width: 35px;
38
- height: 35px;
39
- }
40
-
41
- .response{
42
- background-color: #494b59;
43
- }
44
-
45
- .messagebar{
46
- position: fixed;
47
- bottom: 0;
48
- height: 5rem;
49
- width: 100%;
50
- display: flex;
51
- align-items: center;
52
- justify-content: center;
53
- border-top: 1px solid #494b59;
54
- background-color: #33343f;
55
- }
56
-
57
- .messagebar .bar-wrapper{
58
- background-color: #494b59;
59
- border-radius: 5px;
60
- width: 60vw;
61
- padding: 10px;
62
- display: flex;
63
- align-items: center;
64
- justify-content: space-between;
65
- }
66
-
67
- .bar-wrapper input{
68
- width: 100%;
69
- padding: 5px;
70
- border: none;
71
- outline: none;
72
- font-size: 14px;
73
- background: none;
74
- color: #ccc;
75
- }
76
-
77
- .bar-wrapper input::placeholder{
78
- color: #ccc;
79
- }
80
-
81
- .messagebar button{
82
- display: flex;
83
- align-items: center;
84
- justify-content: center;
85
- background: none;
86
- border: none;
87
- color: #fff;
88
- cursor: pointer;
89
- }
90
-
91
- .message-box{
92
- height: calc(100vh - 5rem);
93
- overflow-y: auto;
94
- }
95
- </style>
96
  </head>
97
  <body>
98
  <div class="chatbox-wrapper">
@@ -110,14 +110,16 @@
110
  <button>
111
  <span class="material-symbols-rounded">
112
  send
113
- </span>
114
  </button>
115
  </div>
116
  </div>
117
  </div>
118
 
119
  <script>
120
- const messageBar = document.querySelector(".bar-wrapper input");
 
 
121
  const sendBtn = document.querySelector(".bar-wrapper button");
122
  const messageBox = document.querySelector(".message-box");
123
 
@@ -128,18 +130,18 @@ sendBtn.onclick = async function () {
128
 
129
  let message =
130
  `<div class="chat message">
131
- <img src="img/user.jpg">
132
- <span>
133
- ${UserTypedMessage}
134
- </span>
135
- </div>`;
136
 
137
  let response =
138
  `<div class="chat response">
139
- <img src="img/chatbot.jpg">
140
- <span class="new">...
141
- </span>
142
- </div>`;
143
 
144
  messageBox.insertAdjacentHTML("beforeend", message);
145
 
@@ -165,28 +167,8 @@ sendBtn.onclick = async function () {
165
  const res = await fetch("/generate/", requestOptions);
166
  const data = await res.json();
167
  const ChatBotResponse = document.querySelector(".response .new");
168
- const response = data.response;
169
-
170
- // Split the response into individual words or phrases
171
- const responseParts = response.split(' ');
172
-
173
- // Define a function to render each part of the response gradually
174
- const renderResponse = (parts, index) => {
175
- if (index < parts.length) {
176
- setTimeout(() => {
177
- // Append the current part of the response to the chat interface
178
- ChatBotResponse.innerHTML += parts[index] + ' ';
179
-
180
- // Move to the next part of the response
181
- renderResponse(parts, index + 1);
182
- }, 100); // Adjust the delay as needed for desired pacing
183
- } else {
184
- ChatBotResponse.classList.remove("new");
185
- }
186
- };
187
-
188
- // Start rendering the response parts
189
- renderResponse(responseParts, 0);
190
  } catch (error) {
191
  console.error("Error:", error);
192
  const ChatBotResponse = document.querySelector(".response .new");
@@ -198,6 +180,8 @@ sendBtn.onclick = async function () {
198
  };
199
 
200
 
201
- </script>
 
 
202
  </body>
203
- </html>
 
7
  <link rel="stylesheet" href="style.css">
8
  <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" />
9
  <link rel="preconnect" href="https://fonts.googleapis.com">
10
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11
+ <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap" rel="stylesheet">
12
  <title>Document</title>
13
  <style>
14
+ *{
15
+ padding: 0;
16
+ margin: 0;
17
+ font-family: 'Poppins', sans-serif;
18
+ box-sizing: border-box;
19
+ }
20
+
21
+ body{
22
+ width: 100%;
23
+ height: 100vh;
24
+ background-color: #33343f;
25
+ }
26
+
27
+ .chat{
28
+ display: flex;
29
+ gap: 20px;
30
+ padding: 25px;
31
+ color: #fff;
32
+ font-size: 15px;
33
+ font-weight: 300;
34
+ }
35
+
36
+ .chat img{
37
+ width: 35px;
38
+ height: 35px;
39
+ }
40
+
41
+ .response{
42
+ background-color: #494b59;
43
+ }
44
+
45
+ .messagebar{
46
+ position: fixed;
47
+ bottom: 0;
48
+ height: 5rem;
49
+ width: 100%;
50
+ display: flex;
51
+ align-items: center;
52
+ justify-content: center;
53
+ border-top: 1px solid #494b59;
54
+ background-color: #33343f;
55
+ }
56
+
57
+ .messagebar .bar-wrapper{
58
+ background-color: #494b59;
59
+ border-radius: 5px;
60
+ width: 60vw;
61
+ padding: 10px;
62
+ display: flex;
63
+ align-items: center;
64
+ justify-content: space-between;
65
+ }
66
+
67
+ .bar-wrapper input{
68
+ width: 100%;
69
+ padding: 5px;
70
+ border: none;
71
+ outline: none;
72
+ font-size: 14px;
73
+ background: none;
74
+ color: #ccc;
75
+ }
76
+
77
+ .bar-wrapper input::placeholder{
78
+ color: #ccc;
79
+ }
80
+
81
+ .messagebar button{
82
+ display: flex;
83
+ align-items: center;
84
+ justify-content: center;
85
+ background: none;
86
+ border: none;
87
+ color: #fff;
88
+ cursor: pointer;
89
+ }
90
+
91
+ .message-box{
92
+ height: calc(100vh - 5rem);
93
+ overflow-y: auto;
94
+ }
95
+ </style>
96
  </head>
97
  <body>
98
  <div class="chatbox-wrapper">
 
110
  <button>
111
  <span class="material-symbols-rounded">
112
  send
113
+ </span>
114
  </button>
115
  </div>
116
  </div>
117
  </div>
118
 
119
  <script>
120
+
121
+
122
+ const messageBar = document.querySelector(".bar-wrapper input");
123
  const sendBtn = document.querySelector(".bar-wrapper button");
124
  const messageBox = document.querySelector(".message-box");
125
 
 
130
 
131
  let message =
132
  `<div class="chat message">
133
+ <img src="img/user.jpg">
134
+ <span>
135
+ ${UserTypedMessage}
136
+ </span>
137
+ </div>`;
138
 
139
  let response =
140
  `<div class="chat response">
141
+ <img src="img/chatbot.jpg">
142
+ <span class="new">...
143
+ </span>
144
+ </div>`
145
 
146
  messageBox.insertAdjacentHTML("beforeend", message);
147
 
 
167
  const res = await fetch("/generate/", requestOptions);
168
  const data = await res.json();
169
  const ChatBotResponse = document.querySelector(".response .new");
170
+ ChatBotResponse.innerHTML = data.response;
171
+ ChatBotResponse.classList.remove("new");
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
172
  } catch (error) {
173
  console.error("Error:", error);
174
  const ChatBotResponse = document.querySelector(".response .new");
 
180
  };
181
 
182
 
183
+
184
+
185
+ </script>
186
  </body>
187
+ </html>