Hugging Face's logo

Spaces:
Nymbo
/
Online-Multiplayer-AI-Chat
Running

App Files Community
FumesAI commited on
Commit
b35e1e4
•
1 Parent(s): dd5d84d

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +213 -18
index.html CHANGED
@@ -1,19 +1,214 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
8
+ <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
9
+
10
+ <title>ChatBot</title>
11
+ <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
12
+ <style>
13
+
14
+ .chat-container {
15
+ width: 100%;
16
+ max-width: 1200px;
17
+ margin: 0 auto;
18
+ min-width: 100%;
19
+ max-height: 85%;
20
+ overflow-y: auto;
21
+ background-color: #4e4e4e;
22
+ }
23
+
24
+ .chat-messages {
25
+
26
+ width: 100%;
27
+ max-width: calc(100% - 5px);
28
+ margin: 0 auto;
29
+ display: flex;
30
+ flex-direction: column;
31
+ min-width: 90%;
32
+ overflow-y: auto;
33
+ }
34
+
35
+ .user-message {
36
+
37
+ color: #ffffff;
38
+ padding: 10px;
39
+ margin-bottom: 10px;
40
+ border-radius: 10px;
41
+ align-self: flex-start;
42
+ max-width: 70%;
43
+ word-wrap: break-word;
44
+ margin-left: 0px;
45
+ font-family: 'Poppins', sans-serif;
46
+ font-weight: 200;
47
+ font-size: 16px;
48
+ letter-spacing: 0.5px;
49
+ line-height: 1.6;
50
+ }
51
+
52
+ .ai-response {
53
+ color: #ffffff;
54
+ padding: 10px;
55
+ margin-bottom: 10px;
56
+ border-radius: 10px;
57
+ max-width: 80%;
58
+ align-self: flex-start;
59
+ font-family: 'Poppins', sans-serif;
60
+ font-weight: 200;
61
+ font-size: 16px;
62
+ letter-spacing: 0.5px;
63
+ line-height: 1.5;
64
+ margin-right: 0px;
65
+ }
66
+
67
+ #ic {
68
+ max-width: 90%;
69
+ margin: auto;
70
+ min-width: 90%;
71
+ position: fixed;
72
+ bottom: 0;
73
+ left: 50%;
74
+ transform: translateX(-50%);
75
+ margin-bottom: 10px;
76
+ background-color: #1b1b1b;
77
+ border-radius: 10px;
78
+ }
79
+ #idk,#idk1{
80
+ background-color: #333;
81
+ }
82
+ #user-input{
83
+ background-color: #1b1b1b;
84
+ }
85
+ @media screen and (max-width:680px) {
86
+ .user-message,.ai-response{
87
+ min-width: 95%;
88
+ max-width: 95%;
89
+ }
90
+ }
91
+
92
+ </style>
93
+
94
+
95
+
96
+ </head>
97
+ <a href="https://discord.gg/A78e55KyuR" target="_blank" style="color: cyan; text-decoration: underline;margin-left: 5px; letter-spacing: 1px;">DISCORD</a>
98
+ <a href="https://buymeacoffee.com/mygx" target="_blank" style="color: cyan; text-decoration: underline;margin-left: 5px; letter-spacing: 1px;">Buy Me Coffe </a>
99
+ <a href="" id="userCount" style="color: white;margin-left: 10px;"></a>
100
+ </div>
101
+ <body id="idk1">
102
+ <div class="chat-container flex-1 flex flex-col" id="idk">
103
+ <div class=" rounded-lg shadow-md flex-1">
104
+
105
+
106
+ <div id="chat-messages" class="px-4 py-6 chat-messages">
107
+
108
+ </div>
109
+ </div>
110
+ </div>
111
+
112
+ <div class="bg-gray-200 px-4 py-3 flex items-center" id="ic">
113
+ <input id="user-input" type="text" autocomplete="off" placeholder="Type your message..." class="flex-1 py-2 px-2 rounded-lg focus:outline-none focus:ring focus:ring-cyan-400 bg-gray-200 text-gray-300">
114
+ <button onclick="sendMessage()" class="ml-4 bg-blue-600 text-white px-4 py-2 rounded-lg">Send</button>
115
+ </div>
116
+
117
+
118
+ <script src="https://cdn.socket.io/4.1.3/socket.io.min.js"></script>
119
+
120
+ <script>
121
+ var socket = io.connect('https://fumes-api.onrender.com');
122
+ var messages = document.getElementById('chat-messages');
123
+ let user = ''
124
+ while(true){
125
+
126
+ user = prompt('Your Username')
127
+ if(user!=null && user!='' && user!=undefined){
128
+ user.toUpperCase()
129
+ break
130
+ }
131
+ }
132
+ console.log(user)
133
+ var userInput = document.getElementById('user-input');
134
+ socket.on('user_count', function(data) {
135
+ var onlineUsersCount = data.count;
136
+ document.getElementById('userCount').innerText = `Online Users: ${onlineUsersCount}`
137
+ });
138
+ function sendMessage() {
139
+
140
+ var message = userInput.value;
141
+ if(message.length>1200){
142
+ alert('messsage lenght exceeds 1200 chracters!!')
143
+ }
144
+ else{
145
+ var data = {
146
+ user: user,
147
+ message: message
148
+ };
149
+ socket.emit('message', data);
150
+ userInput.value = '';
151
+ }
152
+ }
153
+ userInput.addEventListener("keypress", function(event) {
154
+ if (event.keyCode === 13) { // 13 is the key code for Enter
155
+ sendMessage();
156
+ }
157
+ });
158
+
159
+
160
+ socket.on('message', function(data) {
161
+ var newMessage = document.createElement('p');
162
+
163
+ var userName = document.createElement('strong');
164
+ userName.textContent = data.user;
165
+ userName.style.color = 'pink'
166
+ userName.style.fontSize = '20px'
167
+ var messageText = document.createTextNode(data.message);
168
+
169
+ newMessage.appendChild(userName);
170
+ newMessage.appendChild(document.createElement('br'));
171
+ newMessage.appendChild(messageText);
172
+
173
+ newMessage.classList.add('user-message');
174
+
175
+ messages.appendChild(newMessage);
176
+ });
177
+
178
+
179
+
180
+ socket.on('response', function(data) {
181
+ var currentMessage = messages.lastChild;
182
+ if (data.response === 'complete') {
183
+ currentMessage = null;
184
+ } else {
185
+ if (!currentMessage || !currentMessage.classList.contains('ai-response')) {
186
+ currentMessage = document.createElement('p');
187
+ currentMessage.classList.add('ai-response');
188
+
189
+ var aiLabel = document.createElement('h1');
190
+ aiLabel.style.color = 'skyblue'
191
+ aiLabel.textContent = 'AI RESPONSE: ';
192
+
193
+ currentMessage.appendChild(aiLabel);
194
+ currentMessage.appendChild(document.createElement('br'));
195
+
196
+ messages.appendChild(currentMessage);
197
+ }
198
+
199
+
200
+ var responseText = document.createTextNode(data.response);
201
+
202
+
203
+ currentMessage.appendChild(responseText);
204
+
205
+ }
206
+ });
207
+
208
+
209
+
210
+
211
+ </script>
212
+ </body>
213
+
214
  </html>