Hugging Face's logo

Spaces:
privateuserh
/
Geo-xhat
Running

App Files Community
privateuserh commited on
Commit
648e37a
·
verified ·
1 Parent(s): e6f2237

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +345 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Privgeoxhat
3
- emoji: 📊
4
- colorFrom: green
5
- colorTo: purple
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: privgeoxhat
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: blue
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,345 @@
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
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <meta name="description" content="Geometric Chat - Synchronized communication between two users">
7
+ <meta name="theme-color" content="#3b82f6">
8
+ <meta property="og:title" content="Geometric Chat">
9
+ <meta property="og:description" content="Real-time synchronized communication with geometric shapes">
10
+ <meta property="og:type" content="website">
11
+ <meta property="og:url" content="https://example.com">
12
+ <meta property="og:image" content="https://example.com/geometric-chat-preview.png">
13
+ <title>Geometric Chat</title>
14
+ <script src="https://cdn.tailwindcss.com"></script>
15
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
16
+ <style>
17
+ @keyframes float {
18
+ 0%, 100% { transform: translateY(0); }
19
+ 50% { transform: translateY(-10px); }
20
+ }
21
+ .floating {
22
+ animation: float 6s ease-in-out infinite;
23
+ }
24
+ .shape-transition {
25
+ transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
26
+ }
27
+ .chat-bubble {
28
+ clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
29
+ }
30
+ .triangle {
31
+ clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
32
+ }
33
+ .hexagon {
34
+ clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
35
+ }
36
+ .pentagon {
37
+ clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
38
+ }
39
+ </style>
40
+ </head>
41
+ <body class="bg-gradient-to-br from-blue-50 to-indigo-100 min-h-screen">
42
+ <div class="container mx-auto px-4 py-8">
43
+ <!-- Header -->
44
+ <header class="flex flex-col items-center mb-8">
45
+ <div class="flex items-center justify-center mb-4">
46
+ <div class="hexagon bg-blue-500 w-12 h-12 flex items-center justify-center mr-3">
47
+ <i class="fas fa-comment-alt text-white text-xl"></i>
48
+ </div>
49
+ <h1 class="text-3xl font-bold text-gray-800">Geometric Chat</h1>
50
+ </div>
51
+ <p class="text-gray-600 text-center max-w-md">Synchronized communication between two users with geometric shapes. No records stored.</p>
52
+ </header>
53
+
54
+ <!-- Connection Status -->
55
+ <div class="flex justify-center mb-6">
56
+ <div id="connectionStatus" class="flex items-center bg-white rounded-full px-4 py-2 shadow-md">
57
+ <div class="w-3 h-3 rounded-full bg-gray-400 mr-2"></div>
58
+ <span class="text-sm font-medium text-gray-600">Disconnected</span>
59
+ </div>
60
+ </div>
61
+
62
+ <!-- Chat Container -->
63
+ <div class="max-w-2xl mx-auto bg-white rounded-2xl shadow-xl overflow-hidden">
64
+ <!-- Chat Header -->
65
+ <div class="bg-gradient-to-r from-blue-500 to-indigo-600 p-4 flex items-center">
66
+ <div class="triangle bg-white w-8 h-8 flex items-center justify-center mr-3">
67
+ <i class="fas fa-user text-blue-500 text-sm"></i>
68
+ </div>
69
+ <h2 class="text-white font-semibold">Synchronized Channel</h2>
70
+ <div class="ml-auto flex space-x-2">
71
+ <button id="clearBtn" class="p-1 rounded-full hover:bg-blue-400 transition">
72
+ <i class="fas fa-trash-alt text-white"></i>
73
+ </button>
74
+ <button id="syncBtn" class="p-1 rounded-full hover:bg-blue-400 transition">
75
+ <i class="fas fa-sync-alt text-white"></i>
76
+ </button>
77
+ </div>
78
+ </div>
79
+
80
+ <!-- Messages Area -->
81
+ <div id="messages" class="h-96 overflow-y-auto p-4 space-y-4 bg-gray-50">
82
+ <div class="flex justify-center">
83
+ <div class="bg-blue-100 text-blue-800 px-4 py-2 rounded-lg max-w-xs text-center">
84
+ <p>Welcome to Geometric Chat! Messages disappear when you close the window.</p>
85
+ </div>
86
+ </div>
87
+ </div>
88
+
89
+ <!-- Input Area -->
90
+ <div class="p-4 border-t border-gray-200 bg-white">
91
+ <div class="flex items-center">
92
+ <div class="flex-1 relative">
93
+ <input id="messageInput" type="text" placeholder="Type a message..."
94
+ class="w-full px-4 py-3 rounded-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
95
+ <button id="sendBtn" class="absolute right-2 top-1/2 transform -translate-y-1/2 bg-blue-500 text-white rounded-full p-2 hover:bg-blue-600 transition">
96
+ <i class="fas fa-paper-plane"></i>
97
+ </button>
98
+ </div>
99
+ <div class="ml-3 flex space-x-2">
100
+ <button id="shapeBtn" class="p-2 rounded-full bg-gray-100 hover:bg-gray-200 transition">
101
+ <i class="fas fa-shapes text-gray-700"></i>
102
+ </button>
103
+ </div>
104
+ </div>
105
+ <div id="shapeOptions" class="hidden mt-3 flex justify-center space-x-3">
106
+ <button data-shape="circle" class="w-10 h-10 rounded-full bg-blue-500 hover:bg-blue-600 transition"></button>
107
+ <button data-shape="triangle" class="w-10 h-10 bg-green-500 hover:bg-green-600 transition triangle"></button>
108
+ <button data-shape="square" class="w-10 h-10 bg-purple-500 hover:bg-purple-600 transition"></button>
109
+ <button data-shape="hexagon" class="w-10 h-10 bg-yellow-500 hover:bg-yellow-600 transition hexagon"></button>
110
+ <button data-shape="pentagon" class="w-10 h-10 bg-red-500 hover:bg-red-600 transition pentagon"></button>
111
+ </div>
112
+ </div>
113
+ </div>
114
+
115
+ <!-- User Identification -->
116
+ <div class="mt-6 flex justify-center">
117
+ <div class="bg-white rounded-lg shadow-md p-4 max-w-md w-full">
118
+ <h3 class="font-medium text-gray-700 mb-3">Identify Yourself</h3>
119
+ <div class="flex items-center space-x-3">
120
+ <div id="userShape" class="w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center">
121
+ <i class="fas fa-user text-white"></i>
122
+ </div>
123
+ <input id="usernameInput" type="text" placeholder="Your name"
124
+ class="flex-1 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
125
+ </div>
126
+ </div>
127
+ </div>
128
+
129
+ <!-- Floating Shapes -->
130
+ <div class="fixed top-0 left-0 w-full h-full pointer-events-none overflow-hidden z-0">
131
+ <div class="absolute top-1/4 left-1/6 w-16 h-16 bg-blue-200 opacity-20 rounded-full floating shape-transition"></div>
132
+ <div class="absolute top-1/3 right-1/5 w-12 h-12 bg-indigo-200 opacity-20 triangle floating shape-transition" style="animation-delay: 1s;"></div>
133
+ <div class="absolute bottom-1/4 left-1/4 w-20 h-20 bg-purple-200 opacity-20 hexagon floating shape-transition" style="animation-delay: 2s;"></div>
134
+ <div class="absolute bottom-1/3 right-1/4 w-14 h-14 bg-pink-200 opacity-20 pentagon floating shape-transition" style="animation-delay: 3s;"></div>
135
+ </div>
136
+ </div>
137
+
138
+ <script>
139
+ document.addEventListener('DOMContentLoaded', function() {
140
+ // Elements
141
+ const messageInput = document.getElementById('messageInput');
142
+ const sendBtn = document.getElementById('sendBtn');
143
+ const messages = document.getElementById('messages');
144
+ const clearBtn = document.getElementById('clearBtn');
145
+ const syncBtn = document.getElementById('syncBtn');
146
+ const shapeBtn = document.getElementById('shapeBtn');
147
+ const shapeOptions = document.getElementById('shapeOptions');
148
+ const userShape = document.getElementById('userShape');
149
+ const usernameInput = document.getElementById('usernameInput');
150
+ const connectionStatus = document.getElementById('connectionStatus');
151
+
152
+ // State
153
+ let currentShape = 'circle';
154
+ let username = 'User' + Math.floor(Math.random() * 1000);
155
+ let isConnected = false;
156
+ let channel = null;
157
+
158
+ // Initialize
159
+ usernameInput.value = username;
160
+ updateConnectionStatus(false);
161
+
162
+ // Event Listeners
163
+ sendBtn.addEventListener('click', sendMessage);
164
+ messageInput.addEventListener('keypress', function(e) {
165
+ if (e.key === 'Enter') sendMessage();
166
+ });
167
+
168
+ clearBtn.addEventListener('click', clearMessages);
169
+ syncBtn.addEventListener('click', toggleConnection);
170
+ shapeBtn.addEventListener('click', toggleShapeOptions);
171
+
172
+ // Shape selection
173
+ document.querySelectorAll('#shapeOptions button').forEach(btn => {
174
+ btn.addEventListener('click', function() {
175
+ currentShape = this.dataset.shape;
176
+ updateUserShape();
177
+ toggleShapeOptions();
178
+ });
179
+ });
180
+
181
+ usernameInput.addEventListener('change', function() {
182
+ username = this.value || 'Anonymous';
183
+ });
184
+
185
+ // Functions
186
+ function sendMessage() {
187
+ const message = messageInput.value.trim();
188
+ if (!message) return;
189
+
190
+ // Create and display message
191
+ displayMessage(message, username, currentShape, true);
192
+
193
+ // In a real app, this would broadcast to the other user
194
+ // For demo purposes, we'll simulate a response
195
+ setTimeout(() => {
196
+ if (isConnected) {
197
+ displayMessage(`Reply to "${message}"`, 'Partner', getRandomShape(), false);
198
+ }
199
+ }, 1000 + Math.random() * 2000);
200
+
201
+ // Clear input
202
+ messageInput.value = '';
203
+ }
204
+
205
+ function displayMessage(text, sender, shape, isCurrentUser) {
206
+ const messageDiv = document.createElement('div');
207
+ messageDiv.className = `flex ${isCurrentUser ? 'justify-end' : 'justify-start'}`;
208
+
209
+ const shapeDiv = document.createElement('div');
210
+ shapeDiv.className = `w-8 h-8 flex-shrink-0 flex items-center justify-center mr-2 ${isCurrentUser ? 'order-last ml-2' : 'mr-2'}`;
211
+
212
+ // Apply shape
213
+ shapeDiv.classList.add('bg-' + getColorForShape(shape) + '-500');
214
+ if (shape !== 'circle') {
215
+ shapeDiv.classList.add(shape);
216
+ } else {
217
+ shapeDiv.classList.add('rounded-full');
218
+ }
219
+
220
+ const icon = document.createElement('i');
221
+ icon.className = `fas fa-${shape === 'circle' ? 'user' : 'shapes'} text-white text-xs`;
222
+ shapeDiv.appendChild(icon);
223
+
224
+ const contentDiv = document.createElement('div');
225
+ contentDiv.className = `max-w-xs ${isCurrentUser ? 'text-right' : 'text-left'}`;
226
+
227
+ const senderSpan = document.createElement('span');
228
+ senderSpan.className = `text-xs font-medium ${isCurrentUser ? 'text-blue-600' : 'text-gray-600'}`;
229
+ senderSpan.textContent = sender;
230
+
231
+ const textDiv = document.createElement('div');
232
+ textDiv.className = `mt-1 px-4 py-2 rounded-lg ${isCurrentUser ? 'bg-blue-500 text-white' : 'bg-gray-200 text-gray-800'}`;
233
+ textDiv.textContent = text;
234
+
235
+ contentDiv.appendChild(senderSpan);
236
+ contentDiv.appendChild(textDiv);
237
+
238
+ messageDiv.appendChild(isCurrentUser ? contentDiv : shapeDiv);
239
+ messageDiv.appendChild(isCurrentUser ? shapeDiv : contentDiv);
240
+
241
+ messages.appendChild(messageDiv);
242
+ messages.scrollTop = messages.scrollHeight;
243
+ }
244
+
245
+ function clearMessages() {
246
+ messages.innerHTML = `
247
+ <div class="flex justify-center">
248
+ <div class="bg-blue-100 text-blue-800 px-4 py-2 rounded-lg max-w-xs text-center">
249
+ <p>Chat cleared. Start a new conversation!</p>
250
+ </div>
251
+ </div>
252
+ `;
253
+ }
254
+
255
+ function toggleConnection() {
256
+ isConnected = !isConnected;
257
+ updateConnectionStatus(isConnected);
258
+
259
+ if (isConnected) {
260
+ // In a real app, this would establish a connection
261
+ displaySystemMessage('Connected to partner. Messages are now synchronized.');
262
+ } else {
263
+ displaySystemMessage('Disconnected. Messages are no longer synchronized.');
264
+ }
265
+ }
266
+
267
+ function updateConnectionStatus(connected) {
268
+ const statusDot = connectionStatus.querySelector('div');
269
+ const statusText = connectionStatus.querySelector('span');
270
+
271
+ if (connected) {
272
+ statusDot.className = 'w-3 h-3 rounded-full bg-green-500 mr-2';
273
+ statusText.textContent = 'Connected';
274
+ syncBtn.innerHTML = '<i class="fas fa-unlink text-white"></i>';
275
+ } else {
276
+ statusDot.className = 'w-3 h-3 rounded-full bg-gray-400 mr-2';
277
+ statusText.textContent = 'Disconnected';
278
+ syncBtn.innerHTML = '<i class="fas fa-link text-white"></i>';
279
+ }
280
+ }
281
+
282
+ function toggleShapeOptions() {
283
+ shapeOptions.classList.toggle('hidden');
284
+ }
285
+
286
+ function updateUserShape() {
287
+ // Clear all shape classes
288
+ userShape.className = 'w-10 h-10 flex items-center justify-center';
289
+ userShape.classList.add('bg-' + getColorForShape(currentShape) + '-500');
290
+
291
+ // Apply shape
292
+ if (currentShape !== 'circle') {
293
+ userShape.classList.add(currentShape);
294
+ } else {
295
+ userShape.classList.add('rounded-full');
296
+ }
297
+
298
+ // Update icon
299
+ const icon = userShape.querySelector('i') || document.createElement('i');
300
+ icon.className = `fas fa-${currentShape === 'circle' ? 'user' : 'shapes'} text-white`;
301
+ if (!userShape.querySelector('i')) {
302
+ userShape.appendChild(icon);
303
+ }
304
+ }
305
+
306
+ function displaySystemMessage(text) {
307
+ const div = document.createElement('div');
308
+ div.className = 'flex justify-center';
309
+ div.innerHTML = `
310
+ <div class="bg-gray-100 text-gray-600 px-4 py-2 rounded-lg max-w-xs text-center text-sm">
311
+ <p>${text}</p>
312
+ </div>
313
+ `;
314
+ messages.appendChild(div);
315
+ messages.scrollTop = messages.scrollHeight;
316
+ }
317
+
318
+ function getRandomShape() {
319
+ const shapes = ['circle', 'triangle', 'square', 'hexagon', 'pentagon'];
320
+ return shapes[Math.floor(Math.random() * shapes.length)];
321
+ }
322
+
323
+ function getColorForShape(shape) {
324
+ const colors = {
325
+ 'circle': 'blue',
326
+ 'triangle': 'green',
327
+ 'square': 'purple',
328
+ 'hexagon': 'yellow',
329
+ 'pentagon': 'red'
330
+ };
331
+ return colors[shape] || 'blue';
332
+ }
333
+
334
+ // Simulate metadata synchronization (in a real app, this would use WebRTC or similar)
335
+ setInterval(() => {
336
+ if (isConnected) {
337
+ // Update metadata tags to simulate synchronization
338
+ document.querySelector('meta[name="theme-color"]').content =
339
+ `#${Math.floor(Math.random()*16777215).toString(16)}`;
340
+ }
341
+ }, 5000);
342
+ });
343
+ </script>
344
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=privateuserh/privgeoxhat" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
345
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ Create a communications site in geometry use metadata and tags to allow synchronized communication between two users don't store records of conversations