Hugging Face's logo

Spaces:
privateuserh
/
sampgallery-vbeta1-00
Running

App Files Community
privateuserh commited on
Commit
759eb53
·
verified ·
1 Parent(s): 5e543a0

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +347 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Sampgallery Vbeta1 00
3
- emoji: 🐨
4
- colorFrom: indigo
5
- colorTo: pink
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: sampgallery-vbeta1-00
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: gray
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,347 @@
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
+ <title>Photo Uploader | Share Your Moments</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .upload-area {
11
+ transition: all 0.3s ease;
12
+ }
13
+ .upload-area.drag-over {
14
+ border-color: #4f46e5;
15
+ background-color: #f5f3ff;
16
+ }
17
+ .photo-card {
18
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
19
+ }
20
+ .photo-card:hover {
21
+ transform: translateY(-5px);
22
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
23
+ }
24
+ .progress-bar {
25
+ transition: width 0.3s ease;
26
+ }
27
+ @keyframes fadeIn {
28
+ from { opacity: 0; transform: scale(0.95); }
29
+ to { opacity: 1; transform: scale(1); }
30
+ }
31
+ .fade-in {
32
+ animation: fadeIn 0.3s ease-out forwards;
33
+ }
34
+ </style>
35
+ </head>
36
+ <body class="bg-gray-50 min-h-screen">
37
+ <div class="container mx-auto px-4 py-12">
38
+ <!-- Header -->
39
+ <header class="text-center mb-12">
40
+ <h1 class="text-4xl font-bold text-indigo-600 mb-2">Photo Vault</h1>
41
+ <p class="text-gray-600 max-w-lg mx-auto">Upload and store your favorite moments. Your photos are saved until you delete them.</p>
42
+ </header>
43
+
44
+ <!-- Main Content -->
45
+ <main>
46
+ <!-- Upload Section -->
47
+ <div class="max-w-3xl mx-auto bg-white rounded-xl shadow-md overflow-hidden mb-12">
48
+ <div class="p-8">
49
+ <div
50
+ id="uploadArea"
51
+ class="upload-area border-2 border-dashed border-gray-300 rounded-lg p-12 text-center cursor-pointer hover:border-indigo-400"
52
+ >
53
+ <div class="flex flex-col items-center justify-center">
54
+ <i class="fas fa-cloud-upload-alt text-5xl text-indigo-500 mb-4"></i>
55
+ <h3 class="text-xl font-semibold text-gray-700 mb-2">Drag & Drop your photos here</h3>
56
+ <p class="text-gray-500 mb-6">or click to browse files</p>
57
+ <input
58
+ type="file"
59
+ id="fileInput"
60
+ class="hidden"
61
+ accept="image/*"
62
+ multiple
63
+ >
64
+ <button
65
+ id="selectFilesBtn"
66
+ class="bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-2 px-6 rounded-lg transition duration-200"
67
+ >
68
+ Select Files
69
+ </button>
70
+ </div>
71
+ </div>
72
+
73
+ <!-- Progress Bar (hidden by default) -->
74
+ <div id="progressContainer" class="mt-6 hidden">
75
+ <div class="flex justify-between mb-1">
76
+ <span class="text-sm font-medium text-gray-700">Uploading...</span>
77
+ <span id="progressPercent" class="text-sm font-medium text-gray-700">0%</span>
78
+ </div>
79
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
80
+ <div id="progressBar" class="progress-bar bg-indigo-600 h-2.5 rounded-full" style="width: 0%"></div>
81
+ </div>
82
+ </div>
83
+ </div>
84
+ </div>
85
+
86
+ <!-- Gallery Section -->
87
+ <div id="gallerySection" class="max-w-7xl mx-auto">
88
+ <div class="flex justify-between items-center mb-6">
89
+ <h2 class="text-2xl font-semibold text-gray-800">Your Photo Collection</h2>
90
+ <div id="photoCount" class="text-sm text-gray-500">0 photos</div>
91
+ </div>
92
+
93
+ <!-- Empty State -->
94
+ <div id="emptyState" class="text-center py-12 bg-white rounded-lg shadow-sm">
95
+ <i class="fas fa-images text-4xl text-gray-300 mb-4"></i>
96
+ <h3 class="text-xl font-medium text-gray-500">Your photo vault is empty</h3>
97
+ <p class="text-gray-400 mt-2">Upload your first photo to start your collection</p>
98
+ </div>
99
+
100
+ <!-- Photo Grid -->
101
+ <div id="photoGrid" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6 hidden">
102
+ <!-- Photos will be added here dynamically -->
103
+ </div>
104
+ </div>
105
+ </main>
106
+
107
+ <!-- Footer -->
108
+ <footer class="mt-16 text-center text-gray-500 text-sm">
109
+ <p>© 2023 Photo Vault. Your photos are stored locally in your browser.</p>
110
+ </footer>
111
+ </div>
112
+
113
+ <script>
114
+ document.addEventListener('DOMContentLoaded', function() {
115
+ const uploadArea = document.getElementById('uploadArea');
116
+ const fileInput = document.getElementById('fileInput');
117
+ const selectFilesBtn = document.getElementById('selectFilesBtn');
118
+ const progressContainer = document.getElementById('progressContainer');
119
+ const progressBar = document.getElementById('progressBar');
120
+ const progressPercent = document.getElementById('progressPercent');
121
+ const photoGrid = document.getElementById('photoGrid');
122
+ const emptyState = document.getElementById('emptyState');
123
+ const gallerySection = document.getElementById('gallerySection');
124
+ const photoCount = document.getElementById('photoCount');
125
+
126
+ // Load saved photos from localStorage
127
+ loadSavedPhotos();
128
+
129
+ // Click event for the upload button
130
+ selectFilesBtn.addEventListener('click', () => fileInput.click());
131
+
132
+ // Handle file selection
133
+ fileInput.addEventListener('change', handleFiles);
134
+
135
+ // Drag and drop events
136
+ ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
137
+ uploadArea.addEventListener(eventName, preventDefaults, false);
138
+ });
139
+
140
+ function preventDefaults(e) {
141
+ e.preventDefault();
142
+ e.stopPropagation();
143
+ }
144
+
145
+ ['dragenter', 'dragover'].forEach(eventName => {
146
+ uploadArea.addEventListener(eventName, highlight, false);
147
+ });
148
+
149
+ ['dragleave', 'drop'].forEach(eventName => {
150
+ uploadArea.addEventListener(eventName, unhighlight, false);
151
+ });
152
+
153
+ function highlight() {
154
+ uploadArea.classList.add('drag-over');
155
+ }
156
+
157
+ function unhighlight() {
158
+ uploadArea.classList.remove('drag-over');
159
+ }
160
+
161
+ // Handle dropped files
162
+ uploadArea.addEventListener('drop', function(e) {
163
+ const dt = e.dataTransfer;
164
+ const files = dt.files;
165
+ handleFiles({ target: { files } });
166
+ });
167
+
168
+ // Process selected files
169
+ function handleFiles(e) {
170
+ const files = e.target.files;
171
+ if (!files.length) return;
172
+
173
+ // Show progress bar
174
+ progressContainer.classList.remove('hidden');
175
+
176
+ // Simulate upload progress
177
+ let progress = 0;
178
+ const interval = setInterval(() => {
179
+ progress += Math.random() * 10;
180
+ if (progress >= 100) {
181
+ progress = 100;
182
+ clearInterval(interval);
183
+
184
+ // Hide progress bar after a delay
185
+ setTimeout(() => {
186
+ progressContainer.classList.add('hidden');
187
+ }, 1000);
188
+ }
189
+
190
+ progressBar.style.width = `${progress}%`;
191
+ progressPercent.textContent = `${Math.round(progress)}%`;
192
+ }, 200);
193
+
194
+ // Process each file
195
+ Array.from(files).forEach(file => {
196
+ if (!file.type.match('image.*')) return;
197
+
198
+ const reader = new FileReader();
199
+
200
+ reader.onload = function(e) {
201
+ // Create photo object
202
+ const photo = {
203
+ id: Date.now().toString(36) + Math.random().toString(36).substr(2),
204
+ name: file.name,
205
+ size: file.size,
206
+ dataUrl: e.target.result,
207
+ uploadedAt: new Date().toISOString()
208
+ };
209
+
210
+ // Save to localStorage
211
+ savePhoto(photo);
212
+
213
+ // Display the photo
214
+ displayPhoto(photo);
215
+
216
+ // Update photo count
217
+ updatePhotoCount();
218
+ };
219
+
220
+ reader.readAsDataURL(file);
221
+ });
222
+ }
223
+
224
+ // Load saved photos from localStorage
225
+ function loadSavedPhotos() {
226
+ const savedPhotos = getSavedPhotos();
227
+ if (savedPhotos.length > 0) {
228
+ emptyState.classList.add('hidden');
229
+ photoGrid.classList.remove('hidden');
230
+
231
+ savedPhotos.forEach(photo => {
232
+ displayPhoto(photo);
233
+ });
234
+
235
+ updatePhotoCount();
236
+ }
237
+ }
238
+
239
+ // Get saved photos from localStorage
240
+ function getSavedPhotos() {
241
+ const savedPhotos = localStorage.getItem('photoVault');
242
+ return savedPhotos ? JSON.parse(savedPhotos) : [];
243
+ }
244
+
245
+ // Save photo to localStorage
246
+ function savePhoto(photo) {
247
+ const savedPhotos = getSavedPhotos();
248
+ savedPhotos.unshift(photo); // Add new photo at beginning
249
+ localStorage.setItem('photoVault', JSON.stringify(savedPhotos));
250
+ }
251
+
252
+ // Remove photo from localStorage
253
+ function removePhoto(id) {
254
+ const savedPhotos = getSavedPhotos();
255
+ const updatedPhotos = savedPhotos.filter(photo => photo.id !== id);
256
+ localStorage.setItem('photoVault', JSON.stringify(updatedPhotos));
257
+ updatePhotoCount();
258
+ }
259
+
260
+ // Display photo in the grid
261
+ function displayPhoto(photo) {
262
+ // Hide empty state and show grid if first image
263
+ if (photoGrid.children.length === 0) {
264
+ emptyState.classList.add('hidden');
265
+ photoGrid.classList.remove('hidden');
266
+ }
267
+
268
+ // Create photo card
269
+ const photoCard = document.createElement('div');
270
+ photoCard.className = 'photo-card bg-white rounded-lg overflow-hidden shadow-md hover:shadow-lg fade-in';
271
+ photoCard.dataset.id = photo.id;
272
+
273
+ photoCard.innerHTML = `
274
+ <div class="relative pb-[100%]">
275
+ <img src="${photo.dataUrl}" alt="${photo.name}" class="absolute h-full w-full object-cover">
276
+ </div>
277
+ <div class="p-4">
278
+ <div class="flex justify-between items-center">
279
+ <h3 class="font-medium text-gray-800 truncate">${photo.name}</h3>
280
+ <span class="text-xs text-gray-500">${formatFileSize(photo.size)}</span>
281
+ </div>
282
+ <div class="flex justify-between mt-3">
283
+ <button class="text-indigo-600 hover:text-indigo-800 text-sm font-medium download-btn">
284
+ <i class="fas fa-download mr-1"></i> Download
285
+ </button>
286
+ <button class="text-red-500 hover:text-red-700 text-sm font-medium delete-btn">
287
+ <i class="fas fa-trash mr-1"></i> Delete
288
+ </button>
289
+ </div>
290
+ </div>
291
+ `;
292
+
293
+ // Add delete functionality
294
+ photoCard.querySelector('.delete-btn').addEventListener('click', function() {
295
+ photoCard.classList.add('opacity-0', 'scale-95');
296
+ setTimeout(() => {
297
+ // Remove from DOM
298
+ photoGrid.removeChild(photoCard);
299
+
300
+ // Remove from localStorage
301
+ removePhoto(photo.id);
302
+
303
+ // Show empty state if no photos left
304
+ if (photoGrid.children.length === 0) {
305
+ emptyState.classList.remove('hidden');
306
+ photoGrid.classList.add('hidden');
307
+ }
308
+ }, 300);
309
+ });
310
+
311
+ // Add download functionality
312
+ photoCard.querySelector('.download-btn').addEventListener('click', function() {
313
+ downloadPhoto(photo.dataUrl, photo.name);
314
+ });
315
+
316
+ // Add to grid
317
+ photoGrid.prepend(photoCard);
318
+ }
319
+
320
+ // Download photo
321
+ function downloadPhoto(dataUrl, filename) {
322
+ const link = document.createElement('a');
323
+ link.href = dataUrl;
324
+ link.download = filename;
325
+ document.body.appendChild(link);
326
+ link.click();
327
+ document.body.removeChild(link);
328
+ }
329
+
330
+ // Update photo count display
331
+ function updatePhotoCount() {
332
+ const count = getSavedPhotos().length;
333
+ photoCount.textContent = `${count} ${count === 1 ? 'photo' : 'photos'}`;
334
+ }
335
+
336
+ // Helper function to format file size
337
+ function formatFileSize(bytes) {
338
+ if (bytes === 0) return '0 Bytes';
339
+ const k = 1024;
340
+ const sizes = ['Bytes', 'KB', 'MB', 'GB'];
341
+ const i = Math.floor(Math.log(bytes) / Math.log(k));
342
+ return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
343
+ }
344
+ });
345
+ </script>
346
+ <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/sampgallery-vbeta1-00" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
347
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ Allow photos to be saved untill deketed