Hugging Face's logo

Spaces:
hamaylza
/
bot
Running

App Files Community
hamaylza commited on
Commit
07479ad
·
verified ·
1 Parent(s): a568ef5

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +108 -70
index.html CHANGED
@@ -11,50 +11,54 @@
11
  *{margin:0;padding:0;box-sizing:border-box;}
12
 
13
  body{
14
- font-family:'Inter',sans-serif;
15
  background:#000;
16
  color:#fff;
 
17
  height:100vh;
18
  display:flex;
19
  align-items:center;
20
  justify-content:center;
21
  }
22
 
23
- /* ===== Container ===== */
24
  .container{
25
  width:100%;
26
  max-width:900px;
27
  height:90vh;
28
- display:flex;
29
- flex-direction:column;
30
  border-radius:20px;
31
- overflow:hidden;
32
 
33
- background:rgba(255,255,255,0.02);
34
- border:1px solid rgba(255,255,255,0.08);
35
- backdrop-filter:blur(20px);
36
 
37
- box-shadow:0 30px 80px rgba(255,42,42,0.15);
 
 
 
 
 
 
 
38
  }
39
 
40
  /* ===== Header ===== */
41
  .header{
42
- padding:20px;
43
- border-bottom:1px solid rgba(255,255,255,0.06);
44
  display:flex;
45
  justify-content:space-between;
46
  align-items:center;
47
  }
48
 
49
  .title{
50
- font-size:20px;
51
  font-weight:900;
 
52
  letter-spacing:-0.02em;
53
  }
54
 
55
- .title span{
56
- color:#ff2a2a;
57
- }
58
 
59
  .status{
60
  font-size:12px;
@@ -73,21 +77,20 @@ body{
73
  }
74
 
75
  @keyframes pulse{
76
- 0%,100%{opacity:0.4;}
77
  50%{opacity:1;}
78
  }
79
 
80
  /* ===== Chat Area ===== */
81
  .chat-box{
82
  flex:1;
83
- overflow-y:auto;
84
  padding:20px;
 
85
  display:flex;
86
  flex-direction:column;
87
  gap:14px;
88
  }
89
 
90
- /* Scrollbar */
91
  .chat-box::-webkit-scrollbar{
92
  width:6px;
93
  }
@@ -103,53 +106,62 @@ body{
103
  border-radius:14px;
104
  font-size:14px;
105
  line-height:1.5;
106
- font-weight:500;
107
  }
108
 
109
  /* User */
110
  .user{
111
  align-self:flex-end;
112
  background:#ff2a2a;
113
- color:#fff;
114
- border-bottom-right-radius:4px;
115
  }
116
 
117
- /* Bot */
118
  .bot{
119
  align-self:flex-start;
120
- background:#111;
121
  border:1px solid rgba(255,255,255,0.08);
122
- border-bottom-left-radius:4px;
 
 
 
 
 
 
 
 
 
 
 
123
  }
124
 
125
  /* ===== Input Area ===== */
126
  .input-area{
127
  padding:16px;
 
128
  display:flex;
129
  gap:10px;
130
- border-top:1px solid rgba(255,255,255,0.06);
131
  }
132
 
133
- /* Input */
134
  input{
135
  flex:1;
136
  padding:14px;
137
- border-radius:12px;
138
- border:none;
139
- outline:none;
140
-
141
- background:rgba(255,255,255,0.05);
142
  color:#fff;
143
  font-size:14px;
144
  }
145
 
 
 
 
 
 
146
  /* Buttons */
147
  button{
148
  padding:12px 16px;
149
- border-radius:12px;
150
  font-weight:700;
151
  cursor:pointer;
152
- transition:all 0.25s ease;
153
  }
154
 
155
  /* Send */
@@ -159,15 +171,14 @@ button{
159
  }
160
 
161
  .send-btn:hover{
162
- transform:translateY(-1px);
163
  box-shadow:0 10px 20px rgba(255,42,42,0.3);
164
  }
165
 
166
  /* Voice */
167
  .voice-btn{
168
- background:rgba(255,42,42,0.15);
169
  color:#ff2a2a;
170
- border:1px solid rgba(255,42,42,0.4);
171
  }
172
 
173
  .voice-btn:hover{
@@ -175,41 +186,41 @@ button{
175
  color:#fff;
176
  }
177
 
178
- /* ===== Typing Indicator ===== */
179
  .typing{
180
  font-size:12px;
181
  color:#ff8a8a;
182
- opacity:0.7;
183
  }
184
-
185
  </style>
186
  </head>
187
 
188
  <body>
189
 
190
  <div class="container">
 
191
 
192
  <div class="header">
193
  <div class="title">MAYL<span>BOT</span></div>
194
  <div class="status">
195
- <div class="dot"></div>
196
- online
197
  </div>
198
  </div>
199
 
200
  <div class="chat-box" id="chat"></div>
201
 
202
  <div class="input-area">
203
- <input id="input" placeholder="Ask MaylBot anything..." />
204
  <button class="send-btn" onclick="send()">Send</button>
205
  <button class="voice-btn" onclick="record()">🎤</button>
206
  </div>
207
 
 
208
  </div>
209
 
210
  <script>
211
  const chat = document.getElementById("chat");
212
 
 
213
  function addMessage(text, cls) {
214
  const div = document.createElement("div");
215
  div.className = "msg " + cls;
@@ -218,6 +229,17 @@ function addMessage(text, cls) {
218
  chat.scrollTop = chat.scrollHeight;
219
  }
220
 
 
 
 
 
 
 
 
 
 
 
 
221
  async function send() {
222
  const input = document.getElementById("input");
223
  const msg = input.value.trim();
@@ -231,50 +253,66 @@ async function send() {
231
  typing.innerText = "MaylBot is thinking...";
232
  chat.appendChild(typing);
233
 
234
- const res = await fetch("/chat", {
235
- method: "POST",
236
- headers: {"Content-Type": "application/json"},
237
- body: JSON.stringify({message: msg})
238
- });
 
239
 
240
- const data = await res.json();
241
- chat.removeChild(typing);
242
 
243
- addMessage(data.response, "bot");
 
 
 
 
 
244
  }
245
 
246
- /* ===== Voice ===== */
247
  let mediaRecorder;
248
  let chunks = [];
249
 
250
  async function record() {
251
- const stream = await navigator.mediaDevices.getUserMedia({audio: true});
252
- mediaRecorder = new MediaRecorder(stream);
 
253
 
254
- mediaRecorder.start();
255
- chunks = [];
256
 
257
- mediaRecorder.ondataavailable = e => chunks.push(e.data);
258
 
259
- setTimeout(() => mediaRecorder.stop(), 4000);
260
 
261
- mediaRecorder.onstop = async () => {
262
- const blob = new Blob(chunks, {type: "audio/wav"});
263
- const formData = new FormData();
264
- formData.append("file", blob);
265
 
266
- addMessage("Listening...", "user");
267
 
268
- const res = await fetch("/voice", {
269
- method: "POST",
270
- body: formData
271
- });
 
272
 
273
- const data = await res.json();
 
 
 
 
 
 
 
 
274
 
275
- addMessage(data.transcript, "user");
276
- addMessage(data.response, "bot");
277
- };
278
  }
279
  </script>
280
 
 
11
  *{margin:0;padding:0;box-sizing:border-box;}
12
 
13
  body{
 
14
  background:#000;
15
  color:#fff;
16
+ font-family:'Inter',sans-serif;
17
  height:100vh;
18
  display:flex;
19
  align-items:center;
20
  justify-content:center;
21
  }
22
 
23
+ /* ===== Gradient Frame (matches portfolio bot section) ===== */
24
  .container{
25
  width:100%;
26
  max-width:900px;
27
  height:90vh;
28
+
 
29
  border-radius:20px;
30
+ padding:3px;
31
 
32
+ background:linear-gradient(135deg,#ff2a2a,#7f0000,#000);
33
+ box-shadow:0 30px 70px rgba(255,42,42,0.25);
34
+ }
35
 
36
+ /* ===== Inner Panel ===== */
37
+ .inner{
38
+ background:#000;
39
+ border-radius:18px;
40
+ height:100%;
41
+ display:flex;
42
+ flex-direction:column;
43
+ overflow:hidden;
44
  }
45
 
46
  /* ===== Header ===== */
47
  .header{
48
+ padding:18px 20px;
49
+ border-bottom:1px solid rgba(255,255,255,0.08);
50
  display:flex;
51
  justify-content:space-between;
52
  align-items:center;
53
  }
54
 
55
  .title{
 
56
  font-weight:900;
57
+ font-size:18px;
58
  letter-spacing:-0.02em;
59
  }
60
 
61
+ .title span{ color:#ff2a2a; }
 
 
62
 
63
  .status{
64
  font-size:12px;
 
77
  }
78
 
79
  @keyframes pulse{
80
+ 0%,100%{opacity:.4;}
81
  50%{opacity:1;}
82
  }
83
 
84
  /* ===== Chat Area ===== */
85
  .chat-box{
86
  flex:1;
 
87
  padding:20px;
88
+ overflow-y:auto;
89
  display:flex;
90
  flex-direction:column;
91
  gap:14px;
92
  }
93
 
 
94
  .chat-box::-webkit-scrollbar{
95
  width:6px;
96
  }
 
106
  border-radius:14px;
107
  font-size:14px;
108
  line-height:1.5;
 
109
  }
110
 
111
  /* User */
112
  .user{
113
  align-self:flex-end;
114
  background:#ff2a2a;
 
 
115
  }
116
 
117
+ /* Bot (sys-card inspired) */
118
  .bot{
119
  align-self:flex-start;
120
+ background:#0d0d0d;
121
  border:1px solid rgba(255,255,255,0.08);
122
+ position:relative;
123
+ }
124
+
125
+ /* Red accent line */
126
+ .bot::before{
127
+ content:'';
128
+ position:absolute;
129
+ top:0;
130
+ left:0;
131
+ width:100%;
132
+ height:2px;
133
+ background:linear-gradient(90deg,#ff2a2a,transparent);
134
  }
135
 
136
  /* ===== Input Area ===== */
137
  .input-area{
138
  padding:16px;
139
+ border-top:1px solid rgba(255,255,255,0.08);
140
  display:flex;
141
  gap:10px;
 
142
  }
143
 
 
144
  input{
145
  flex:1;
146
  padding:14px;
147
+ border-radius:10px;
148
+ background:#0d0d0d;
149
+ border:1px solid rgba(255,255,255,0.08);
 
 
150
  color:#fff;
151
  font-size:14px;
152
  }
153
 
154
+ input:focus{
155
+ outline:none;
156
+ border-color:#ff2a2a;
157
+ }
158
+
159
  /* Buttons */
160
  button{
161
  padding:12px 16px;
162
+ border-radius:10px;
163
  font-weight:700;
164
  cursor:pointer;
 
165
  }
166
 
167
  /* Send */
 
171
  }
172
 
173
  .send-btn:hover{
 
174
  box-shadow:0 10px 20px rgba(255,42,42,0.3);
175
  }
176
 
177
  /* Voice */
178
  .voice-btn{
179
+ background:rgba(255,42,42,0.1);
180
  color:#ff2a2a;
181
+ border:1px solid rgba(255,42,42,0.3);
182
  }
183
 
184
  .voice-btn:hover{
 
186
  color:#fff;
187
  }
188
 
189
+ /* Typing */
190
  .typing{
191
  font-size:12px;
192
  color:#ff8a8a;
 
193
  }
 
194
  </style>
195
  </head>
196
 
197
  <body>
198
 
199
  <div class="container">
200
+ <div class="inner">
201
 
202
  <div class="header">
203
  <div class="title">MAYL<span>BOT</span></div>
204
  <div class="status">
205
+ <div class="dot"></div> online
 
206
  </div>
207
  </div>
208
 
209
  <div class="chat-box" id="chat"></div>
210
 
211
  <div class="input-area">
212
+ <input id="input" placeholder="Ask MaylBot..." />
213
  <button class="send-btn" onclick="send()">Send</button>
214
  <button class="voice-btn" onclick="record()">🎤</button>
215
  </div>
216
 
217
+ </div>
218
  </div>
219
 
220
  <script>
221
  const chat = document.getElementById("chat");
222
 
223
+ /* Add message */
224
  function addMessage(text, cls) {
225
  const div = document.createElement("div");
226
  div.className = "msg " + cls;
 
229
  chat.scrollTop = chat.scrollHeight;
230
  }
231
 
232
+ /* Initial message */
233
+ window.onload = () => {
234
+ addMessage("Hey, I’m MaylBot. Ask me anything.", "bot");
235
+ };
236
+
237
+ /* Enter key */
238
+ document.getElementById("input").addEventListener("keypress", function(e){
239
+ if(e.key === "Enter") send();
240
+ });
241
+
242
+ /* Send message */
243
  async function send() {
244
  const input = document.getElementById("input");
245
  const msg = input.value.trim();
 
253
  typing.innerText = "MaylBot is thinking...";
254
  chat.appendChild(typing);
255
 
256
+ try {
257
+ const res = await fetch("/chat", {
258
+ method: "POST",
259
+ headers: {"Content-Type": "application/json"},
260
+ body: JSON.stringify({message: msg})
261
+ });
262
 
263
+ const data = await res.json();
264
+ chat.removeChild(typing);
265
 
266
+ addMessage(data.response || "No response from server.", "bot");
267
+
268
+ } catch (err) {
269
+ chat.removeChild(typing);
270
+ addMessage("Server not connected.", "bot");
271
+ }
272
  }
273
 
274
+ /* Voice */
275
  let mediaRecorder;
276
  let chunks = [];
277
 
278
  async function record() {
279
+ try {
280
+ const stream = await navigator.mediaDevices.getUserMedia({audio: true});
281
+ mediaRecorder = new MediaRecorder(stream);
282
 
283
+ mediaRecorder.start();
284
+ chunks = [];
285
 
286
+ mediaRecorder.ondataavailable = e => chunks.push(e.data);
287
 
288
+ setTimeout(() => mediaRecorder.stop(), 4000);
289
 
290
+ mediaRecorder.onstop = async () => {
291
+ const blob = new Blob(chunks, {type: "audio/wav"});
292
+ const formData = new FormData();
293
+ formData.append("file", blob);
294
 
295
+ addMessage("Listening...", "user");
296
 
297
+ try {
298
+ const res = await fetch("/voice", {
299
+ method: "POST",
300
+ body: formData
301
+ });
302
 
303
+ const data = await res.json();
304
+
305
+ addMessage(data.transcript || "Could not transcribe", "user");
306
+ addMessage(data.response || "No response", "bot");
307
+
308
+ } catch {
309
+ addMessage("Voice server not connected.", "bot");
310
+ }
311
+ };
312
 
313
+ } catch {
314
+ addMessage("Mic permission denied.", "bot");
315
+ }
316
  }
317
  </script>
318