Hugging Face's logo

Spaces:
Anshultomar2005
/
anshul-chatbot
Running

App Files Community
Anshultomar2005 commited on
Commit
d4f4a6d
·
verified ·
1 Parent(s): 0e12947

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +61 -11
index.html CHANGED
@@ -2,23 +2,70 @@
2
  <html lang="en">
3
  <head>
4
  <meta charset="UTF-8">
 
5
  <title>Anshul Chatbot</title>
6
  <style>
7
- body { font-family: Arial, sans-serif; background:#111; color:#eee; margin:0; padding:20px; }
8
- h2 { text-align:center; color:#4cafef; }
9
- #chatbox { width:100%; max-width:600px; margin:20px auto; background:#222; padding:15px; border-radius:10px; height:400px; overflow-y:auto; }
10
- .msg { margin:8px 0; }
11
- .user { color:#4cafef; }
12
- .bot { color:#90ee90; }
13
- #input-area { text-align:center; margin-top:10px; }
14
- input { width:70%; padding:10px; border-radius:5px; border:none; }
15
- button { padding:10px 15px; margin-left:5px; border:none; border-radius:5px; background:#4cafef; color:#fff; cursor:pointer; }
16
- button:hover { background:#3b8edb; }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
17
  </style>
18
  </head>
19
  <body>
20
  <h2>🤖 Anshul Chatbot</h2>
 
21
  <div id="chatbox"></div>
 
22
  <div id="input-area">
23
  <input id="msg" placeholder="Type your message..." />
24
  <button onclick="sendMessage()">Send</button>
@@ -33,6 +80,7 @@
33
  const userMsg = input.value.trim();
34
  if (!userMsg) return;
35
 
 
36
  chatbox.innerHTML += `<div class="msg user"><b>You:</b> ${userMsg}</div>`;
37
  input.value = "";
38
  chatbox.scrollTop = chatbox.scrollHeight;
@@ -45,7 +93,9 @@
45
  });
46
 
47
  const data = await res.json();
48
- let reply = data[0]?.generated_text || "⚠️ Sorry, no reply.";
 
 
49
  chatbox.innerHTML += `<div class="msg bot"><b>Bot:</b> ${reply}</div>`;
50
  chatbox.scrollTop = chatbox.scrollHeight;
51
 
 
2
  <html lang="en">
3
  <head>
4
  <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Anshul Chatbot</title>
7
  <style>
8
+ body {
9
+ font-family: Arial, sans-serif;
10
+ background: #111;
11
+ color: #eee;
12
+ margin: 0;
13
+ padding: 20px;
14
+ }
15
+ h2 {
16
+ text-align: center;
17
+ color: #4cafef;
18
+ }
19
+ #chatbox {
20
+ width: 100%;
21
+ max-width: 600px;
22
+ margin: 20px auto;
23
+ background: #222;
24
+ padding: 15px;
25
+ border-radius: 10px;
26
+ height: 400px;
27
+ overflow-y: auto;
28
+ }
29
+ .msg {
30
+ margin: 8px 0;
31
+ line-height: 1.4;
32
+ }
33
+ .user {
34
+ color: #4cafef;
35
+ }
36
+ .bot {
37
+ color: #90ee90;
38
+ }
39
+ #input-area {
40
+ text-align: center;
41
+ margin-top: 10px;
42
+ }
43
+ input {
44
+ width: 70%;
45
+ padding: 10px;
46
+ border-radius: 5px;
47
+ border: none;
48
+ outline: none;
49
+ }
50
+ button {
51
+ padding: 10px 15px;
52
+ margin-left: 5px;
53
+ border: none;
54
+ border-radius: 5px;
55
+ background: #4cafef;
56
+ color: #fff;
57
+ cursor: pointer;
58
+ }
59
+ button:hover {
60
+ background: #3b8edb;
61
+ }
62
  </style>
63
  </head>
64
  <body>
65
  <h2>🤖 Anshul Chatbot</h2>
66
+
67
  <div id="chatbox"></div>
68
+
69
  <div id="input-area">
70
  <input id="msg" placeholder="Type your message..." />
71
  <button onclick="sendMessage()">Send</button>
 
80
  const userMsg = input.value.trim();
81
  if (!userMsg) return;
82
 
83
+ // User message
84
  chatbox.innerHTML += `<div class="msg user"><b>You:</b> ${userMsg}</div>`;
85
  input.value = "";
86
  chatbox.scrollTop = chatbox.scrollHeight;
 
93
  });
94
 
95
  const data = await res.json();
96
+ const reply = data[0]?.generated_text || "⚠️ Sorry, no reply.";
97
+
98
+ // Bot reply
99
  chatbox.innerHTML += `<div class="msg bot"><b>Bot:</b> ${reply}</div>`;
100
  chatbox.scrollTop = chatbox.scrollHeight;
101