Hugging Face's logo

Spaces:
TheMaisk
/
Chat_base
Running

App Files Community
TheMaisk commited on
Commit
22f6ce5
·
verified ·
1 Parent(s): caafbf4

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +251 -18
index.html CHANGED
@@ -1,19 +1,252 @@
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="de">
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/[email protected]/dist/tailwind.min.css" rel="stylesheet">
12
+ <style>
13
+ .chat-container {
14
+ width: 100%;
15
+ max-width: 1200px;
16
+ margin: 0 auto;
17
+ min-width: 100%;
18
+ max-height: 85%;
19
+ overflow-y: auto;
20
+ background-color: black;
21
+ }
22
+
23
+ .chat-messages {
24
+ width: 100%;
25
+ max-width: calc(100% - 5px);
26
+ margin: 0 auto;
27
+ display: flex;
28
+ flex-direction: column;
29
+ min-width: 90%;
30
+ overflow-y: auto;
31
+ }
32
+
33
+ .user-message {
34
+ color: #ffffff;
35
+ padding: 10px;
36
+ margin-bottom: 10px;
37
+ border-radius: 10px;
38
+ align-self: flex-start;
39
+ max-width: 70%;
40
+ word-wrap: break-word;
41
+ margin-left: 0px;
42
+ font-family: 'Poppins', sans-serif;
43
+ font-weight: 200;
44
+ font-size: 16px;
45
+ letter-spacing: 0.5px;
46
+ line-height: 1.6;
47
+ }
48
+
49
+ .ai-response {
50
+ color: #ffffff;
51
+ padding: 10px;
52
+ margin-bottom: 10px;
53
+ border-radius: 10px;
54
+ max-width: 80%;
55
+ align-self: flex-start;
56
+ font-family: 'Poppins', sans-serif;
57
+ font-weight: 200;
58
+ font-size: 16px;
59
+ letter-spacing: 0.5px;
60
+ line-height: 1.5;
61
+ margin-right: 0px;
62
+ }
63
+
64
+ #ic {
65
+ max-width: 90%;
66
+ margin: auto;
67
+ min-width: 90%;
68
+ position: fixed;
69
+ bottom: 0;
70
+ left: 50%;
71
+ transform: translateX(-50%);
72
+ margin-bottom: 10px;
73
+ background-color: #1b1b1b;
74
+ border-radius: 10px;
75
+ }
76
+
77
+ #idk,
78
+ #idk1 {
79
+ background-color: #333;
80
+ }
81
+
82
+ #user-input {
83
+ background-color: #1b1b1b;
84
+ }
85
+
86
+ @media screen and (max-width:680px) {
87
+ .user-message,
88
+ .ai-response {
89
+ min-width: 95%;
90
+ max-width: 95%;
91
+ }
92
+
93
+ #chat-messages img {
94
+ min-width: 80%;
95
+ width: 80%;
96
+ }
97
+ }
98
+
99
+ #chat-messages img {
100
+ width: 40%;
101
+ margin-left: 7px;
102
+ }
103
+ </style>
104
+ </head>
105
+
106
+ <body id="idk1" style="background-color: black">
107
+ <a href="https://discord.gg/A78e55KyuR" target="_blank" style="color: cyan; text-decoration: underline;margin-left: 5px; letter-spacing: 1px;">DISCORD</a>
108
+ <a href="https://buymeacoffee.com/mygx" target="_blank" style="color: cyan; text-decoration: underline;margin-left: 5px; letter-spacing: 1px;">Kaffee spendieren</a>
109
+ <a href="https://discord.gg/A78e55KyuR" id="userCount" style="color: white;margin-left: 10px;"></a>
110
+ <a href="" id="nn" style="color: white;margin-left: 10px;">Bitte mag diesen Space ❤</a>
111
+
112
+ <div class="chat-container flex-1 flex flex-col" id="idk">
113
+ <div class="rounded-lg shadow-md flex-1">
114
+ <div id="chat-messages" class="px-4 py-6 chat-messages" style="background-color: black">
115
+ </div>
116
+ </div>
117
+ </div>
118
+
119
+ <div class="bg-gray-200 px-4 py-3 flex items-center" id="ic">
120
+ <input id="user-input" type="text" autocomplete="off" placeholder="Gib deine Nachricht ein..." class="flex-1 py-2 px-2 rounded-lg focus:outline-none focus:ring focus:ring-cyan-400 bg-gray-200 text-gray-300">
121
+ <button id='btn' onclick="sendMessage()" class="ml-4 bg-blue-600 text-white px-4 py-2 rounded-lg">Senden</button>
122
+ </div>
123
+
124
+ <script src="https://cdn.socket.io/4.1.3/socket.io.min.js"></script>
125
+
126
+ <script>
127
+ alert(`
128
+ * Du solltest niemanden im Chat anmachen
129
+ * Du solltest niemanden mobben
130
+ * Sei ein normaler Mensch
131
+ Andernfalls wirst du gebannt
132
+
133
+ * Bildgenerierung ist jetzt verfügbar :)
134
+
135
+ HINWEIS: Du wirst gebannt, wenn du versuchst, das AI-Verhalten zu manipulieren`)
136
+
137
+ var socket = io.connect('https://apix-30ox.onrender.com', {
138
+ reconnection: true, // Verbindung wiederherstellen aktivieren
139
+ reconnectionAttempts: Infinity, // Unbegrenzte Versuche zur Wiederverbindung
140
+ reconnectionDelay: 1000, // Start mit 1 Sekunde Verzögerung
141
+ reconnectionDelayMax: 5000, // Maximale Verzögerung zwischen Wiederverbindungen
142
+ randomizationFactor: 0.5 // Zufallsfaktor der Wiederverzögerung um 50%
143
+ });
144
+
145
+ var messages = document.getElementById('chat-messages');
146
+ let user = localStorage.getItem("userName")
147
+ console.log(user)
148
+
149
+ if (user == null) {
150
+ while (true) {
151
+ user = prompt('Erstelle deinen Benutzernamen');
152
+ if (user != null && user !== '' && user !== undefined) {
153
+ let upperCaseUser = user.toUpperCase();
154
+ if (!upperCaseUser.includes("html")) {
155
+ localStorage.setItem("userName", upperCaseUser);
156
+ break;
157
+ } else {
158
+ alert("Dieser Name ist nicht verfügbar. Bitte wähle einen anderen Benutzernamen.");
159
+ }
160
+ }
161
+ }
162
+ }
163
+
164
+ console.log(user)
165
+ var userInput = document.getElementById('user-input');
166
+
167
+ socket.on('user_count', function(data) {
168
+ var onlineUsersCount = data.count;
169
+ document.getElementById('userCount').innerText = `Online Benutzer: ${onlineUsersCount}`
170
+ });
171
+
172
+ function sendMessage() {
173
+ document.getElementById('btn').disabled = true;
174
+ setTimeout(function() {
175
+ document.getElementById('btn').disabled = false;
176
+ }, 7000); // 7000 Millisekunden = 7 Sekunden
177
+ var message = userInput.value;
178
+ if (message.length > 1200) {
179
+ alert('Nachrichtenlänge überschreitet 1200 Zeichen!!');
180
+ } else {
181
+ if (user == ',,,,,,, ' || user == ',,,,, ') {
182
+ alert('Du wurdest vorübergehend gebannt')
183
+ } else {
184
+ var data = {
185
+ user: user,
186
+ message: message
187
+ };
188
+ socket.emit('message', data);
189
+ userInput.value = '';
190
+ }
191
+ }
192
+ }
193
+
194
+ userInput.addEventListener("keypress", function(event) {
195
+ if (event.keyCode === 13) {
196
+ if (!document.getElementById('btn').disabled) {
197
+ sendMessage();
198
+ }
199
+ }
200
+ });
201
+
202
+ socket.on('message', function(data) {
203
+ var tempElement = document.createElement('div');
204
+ tempElement.innerHTML = data;
205
+ while (tempElement.firstChild) {
206
+ messages.appendChild(tempElement.firstChild);
207
+ }
208
+ });
209
+
210
+ socket.on('response', function(data) {
211
+ if (data.img != null || data.img != undefined) {
212
+ var img = document.createElement('img');
213
+ img.src = data.img;
214
+ messages.appendChild(img);
215
+ } else {
216
+ console.log(data.response);
217
+ var currentMessage = messages.lastChild;
218
+ if (data.response === 'complete') {
219
+ currentMessage = null;
220
+ document.getElementById('btn').disabled = false
221
+ } else {
222
+ if (!currentMessage || !currentMessage.classList.contains('ai-response')) {
223
+ currentMessage = document.createElement('p');
224
+ currentMessage.classList.add('ai-response');
225
+
226
+ var aiLabel = document.createElement('h1');
227
+ aiLabel.style.color = 'skyblue'
228
+ aiLabel.textContent = 'AI-ANTWORT: ';
229
+
230
+ currentMessage.appendChild(aiLabel);
231
+ currentMessage.appendChild(document.createElement('br'));
232
+
233
+ messages.appendChild(currentMessage);
234
+ }
235
+ var responseText = document.createTextNode(data.response);
236
+ currentMessage.appendChild(responseText);
237
+ }
238
+ }
239
+ });
240
+
241
+ socket.on('image', function(data) {
242
+ if (data.image) {
243
+ var img = document.createElement('img');
244
+ img.src = 'data:image/jpeg;base64,' + data.image;
245
+ document.body.appendChild(img); // Oder zu einem bestimmten Container hinzufügen
246
+ }
247
+ });
248
+ </script>
249
+ </body>
250
+
251
  </html>
252
+