Hugging Face's logo

Spaces:
Hajorda
/
r
Running

App Files Community
Hajorda commited on
Commit
eace4b2
·
verified ·
1 Parent(s): 60d11a1

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +384 -19
  3. prompts.txt +5 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: R
3
- emoji: 👁
4
- colorFrom: indigo
5
- colorTo: gray
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: r
3
+ emoji: 🐳
4
+ colorFrom: pink
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,384 @@
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>Kedy Gallery - Purrfect Cat Photos</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
+ @keyframes float {
11
+ 0% { transform: translateY(0px); }
12
+ 50% { transform: translateY(-20px); }
13
+ 100% { transform: translateY(0px); }
14
+ }
15
+
16
+ .floating {
17
+ animation: float 6s ease-in-out infinite;
18
+ }
19
+
20
+ .cat-card:hover {
21
+ transform: scale(1.03);
22
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
23
+ }
24
+
25
+ .gradient-bg {
26
+ background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
27
+ }
28
+
29
+ .loading-spinner {
30
+ width: 50px;
31
+ height: 50px;
32
+ border: 5px solid rgba(255, 255, 255, 0.3);
33
+ border-radius: 50%;
34
+ border-top-color: #6366f1;
35
+ animation: spin 1s ease-in-out infinite;
36
+ }
37
+
38
+ @keyframes spin {
39
+ to { transform: rotate(360deg); }
40
+ }
41
+
42
+ .upload-btn {
43
+ transition: all 0.3s ease;
44
+ }
45
+
46
+ .upload-btn:hover {
47
+ transform: translateY(-2px);
48
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
49
+ }
50
+ </style>
51
+ </head>
52
+ <body class="gradient-bg min-h-screen">
53
+ <div class="container mx-auto px-4 py-8">
54
+ <!-- Header -->
55
+ <header class="flex flex-col items-center mb-12">
56
+ <div class="flex items-center mb-6">
57
+ <i class="fas fa-cat text-4xl text-indigo-500 mr-3 floating"></i>
58
+ <h1 class="text-4xl md:text-5xl font-bold text-indigo-700">Kedy Gallery</h1>
59
+ </div>
60
+ <p class="text-lg text-gray-600 text-center max-w-2xl">
61
+ A purrfect collection of the most adorable cat photos on the internet. Meow!
62
+ </p>
63
+ </header>
64
+
65
+ <!-- Upload Section -->
66
+ <div class="bg-white rounded-xl shadow-lg p-6 mb-12 max-w-2xl mx-auto">
67
+ <h2 class="text-2xl font-semibold text-gray-800 mb-4 flex items-center">
68
+ <i class="fas fa-cloud-upload-alt text-indigo-500 mr-2"></i>
69
+ Share Your Kedy
70
+ </h2>
71
+ <div class="flex flex-col md:flex-row items-center">
72
+ <div class="mb-4 md:mb-0 md:mr-4 flex-1">
73
+ <input type="file" id="fileInput" accept=".jpg,.jpeg" class="hidden">
74
+ <label for="fileInput" class="upload-btn cursor-pointer bg-indigo-500 hover:bg-indigo-600 text-white font-medium py-3 px-6 rounded-lg flex items-center justify-center transition-all">
75
+ <i class="fas fa-paw mr-2"></i>
76
+ Choose a Photo
77
+ </label>
78
+ <p class="text-sm text-gray-500 mt-2">Only JPG/JPEG files up to 3MB</p>
79
+ </div>
80
+ <button id="uploadBtn" class="upload-btn bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-3 px-6 rounded-lg flex items-center justify-center transition-all">
81
+ <i class="fas fa-upload mr-2"></i>
82
+ Upload
83
+ </button>
84
+ </div>
85
+ <div id="uploadStatus" class="mt-4 hidden"></div>
86
+ </div>
87
+
88
+ <!-- Gallery Controls -->
89
+ <div class="flex flex-col md:flex-row justify-between items-center mb-8">
90
+ <h2 class="text-2xl font-semibold text-gray-800 mb-4 md:mb-0">
91
+ <i class="fas fa-images text-indigo-500 mr-2"></i>
92
+ Kedy Collection
93
+ </h2>
94
+ <div class="flex space-x-2">
95
+ <button id="randomBtn" class="bg-indigo-500 hover:bg-indigo-600 text-white font-medium py-2 px-4 rounded-lg flex items-center">
96
+ <i class="fas fa-random mr-2"></i>
97
+ Random Kedy
98
+ </button>
99
+ <button id="refreshBtn" class="bg-white hover:bg-gray-100 text-gray-800 font-medium py-2 px-4 rounded-lg flex items-center border border-gray-200">
100
+ <i class="fas fa-sync-alt mr-2"></i>
101
+ Refresh
102
+ </button>
103
+ </div>
104
+ </div>
105
+
106
+ <!-- Gallery -->
107
+ <div id="gallery" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6 mb-12">
108
+ <!-- Loading state -->
109
+ <div id="loading" class="col-span-full flex justify-center items-center py-12">
110
+ <div class="loading-spinner"></div>
111
+ </div>
112
+ </div>
113
+
114
+ <!-- Random Kedy Modal -->
115
+ <div id="randomModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
116
+ <div class="bg-white rounded-xl max-w-2xl w-full mx-4 overflow-hidden">
117
+ <div class="flex justify-between items-center bg-indigo-500 text-white p-4">
118
+ <h3 class="text-xl font-semibold">Your Random Kedy!</h3>
119
+ <button id="closeModal" class="text-white hover:text-gray-200">
120
+ <i class="fas fa-times"></i>
121
+ </button>
122
+ </div>
123
+ <div class="p-6">
124
+ <div id="randomImageContainer" class="flex justify-center">
125
+ <div class="loading-spinner"></div>
126
+ </div>
127
+ </div>
128
+ <div class="bg-gray-50 px-6 py-4 flex justify-end">
129
+ <button id="newRandomBtn" class="bg-indigo-500 hover:bg-indigo-600 text-white font-medium py-2 px-4 rounded-lg flex items-center">
130
+ <i class="fas fa-paw mr-2"></i>
131
+ Another One!
132
+ </button>
133
+ </div>
134
+ </div>
135
+ </div>
136
+ </div>
137
+
138
+ <!-- Footer -->
139
+ <footer class="bg-white py-6 border-t border-gray-200">
140
+ <div class="container mx-auto px-4 text-center">
141
+ <p class="text-gray-600 mb-2">
142
+ Made with <i class="fas fa-heart text-red-500"></i> for cat lovers
143
+ </p>
144
+ <div class="flex justify-center space-x-4 mb-4">
145
+ <a href="#" class="text-gray-500 hover:text-indigo-500">
146
+ <i class="fab fa-twitter text-xl"></i>
147
+ </a>
148
+ <a href="#" class="text-gray-500 hover:text-indigo-500">
149
+ <i class="fab fa-instagram text-xl"></i>
150
+ </a>
151
+ <a href="#" class="text-gray-500 hover:text-indigo-500">
152
+ <i class="fab fa-github text-xl"></i>
153
+ </a>
154
+ </div>
155
+ <p class="text-sm text-gray-400">
156
+ Powered by KeduAPI - All images belong to their respective owners
157
+ </p>
158
+ </div>
159
+ </footer>
160
+
161
+ <script>
162
+ document.addEventListener('DOMContentLoaded', function() {
163
+ const BASE_URL = 'https://api.keduapp.online';
164
+ const gallery = document.getElementById('gallery');
165
+ const loading = document.getElementById('loading');
166
+ const refreshBtn = document.getElementById('refreshBtn');
167
+ const randomBtn = document.getElementById('randomBtn');
168
+ const uploadBtn = document.getElementById('uploadBtn');
169
+ const fileInput = document.getElementById('fileInput');
170
+ const uploadStatus = document.getElementById('uploadStatus');
171
+ const randomModal = document.getElementById('randomModal');
172
+ const closeModal = document.getElementById('closeModal');
173
+ const newRandomBtn = document.getElementById('newRandomBtn');
174
+ const randomImageContainer = document.getElementById('randomImageContainer');
175
+
176
+ let selectedFile = null;
177
+
178
+ // Fetch and display all cat images
179
+ async function fetchCatImages() {
180
+ try {
181
+ loading.classList.remove('hidden');
182
+ gallery.innerHTML = '';
183
+ gallery.appendChild(loading);
184
+
185
+ const response = await fetch(`${BASE_URL}/list-images`);
186
+ const data = await response.json();
187
+
188
+ if (data.images && data.images.length > 0) {
189
+ displayImages(data.images);
190
+ } else {
191
+ gallery.innerHTML = `
192
+ <div class="col-span-full text-center py-12">
193
+ <i class="fas fa-cat text-5xl text-gray-300 mb-4"></i>
194
+ <p class="text-xl text-gray-500">No kedys found! Be the first to upload one.</p>
195
+ </div>
196
+ `;
197
+ }
198
+ } catch (error) {
199
+ console.error('Error fetching images:', error);
200
+ gallery.innerHTML = `
201
+ <div class="col-span-full text-center py-12">
202
+ <i class="fas fa-exclamation-triangle text-5xl text-red-300 mb-4"></i>
203
+ <p class="text-xl text-gray-500">Oops! Couldn't fetch kedys. Try again later.</p>
204
+ </div>
205
+ `;
206
+ } finally {
207
+ loading.classList.add('hidden');
208
+ }
209
+ }
210
+
211
+ // Display images in the gallery
212
+ function displayImages(images) {
213
+ gallery.innerHTML = '';
214
+
215
+ images.forEach(imageName => {
216
+ const imageUrl = `${BASE_URL}/get-image/${imageName}`;
217
+
218
+ const card = document.createElement('div');
219
+ card.className = 'cat-card bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300 hover:shadow-xl';
220
+ card.innerHTML = `
221
+ <div class="relative pb-[100%]">
222
+ <img src="${imageUrl}" alt="${imageName}" class="absolute h-full w-full object-cover" loading="lazy">
223
+ </div>
224
+ <div class="p-4">
225
+ <div class="flex justify-between items-center">
226
+ <span class="text-sm font-medium text-gray-700 truncate">${imageName}</span>
227
+ <button class="like-btn text-gray-400 hover:text-red-500" data-image="${imageName}">
228
+ <i class="far fa-heart"></i>
229
+ </button>
230
+ </div>
231
+ </div>
232
+ `;
233
+
234
+ gallery.appendChild(card);
235
+ });
236
+ }
237
+
238
+ // Fetch and display a random cat image
239
+ async function fetchRandomCatImage() {
240
+ try {
241
+ randomImageContainer.innerHTML = '<div class="loading-spinner"></div>';
242
+ randomModal.classList.remove('hidden');
243
+
244
+ const response = await fetch(`${BASE_URL}/random-image`);
245
+ const data = await response.json();
246
+
247
+ if (data.image_url) {
248
+ randomImageContainer.innerHTML = `
249
+ <div class="w-full">
250
+ <img src="${data.image_url}" alt="Random Kedy" class="rounded-lg max-h-[70vh] object-contain">
251
+ <div class="mt-4 text-sm text-gray-600">
252
+ <p><span class="font-medium">Name:</span> ${data.metadata.name}</p>
253
+ <p><span class="font-medium">Size:</span> ${(data.metadata.size / 1024).toFixed(1)} KB</p>
254
+ </div>
255
+ </div>
256
+ `;
257
+ } else {
258
+ randomImageContainer.innerHTML = `
259
+ <div class="text-center py-8">
260
+ <i class="fas fa-exclamation-circle text-4xl text-yellow-500 mb-4"></i>
261
+ <p class="text-lg text-gray-700">No random kedy found. Try again!</p>
262
+ </div>
263
+ `;
264
+ }
265
+ } catch (error) {
266
+ console.error('Error fetching random image:', error);
267
+ randomImageContainer.innerHTML = `
268
+ <div class="text-center py-8">
269
+ <i class="fas fa-exclamation-triangle text-4xl text-red-500 mb-4"></i>
270
+ <p class="text-lg text-gray-700">Oops! Couldn't fetch a random kedy.</p>
271
+ </div>
272
+ `;
273
+ }
274
+ }
275
+
276
+ // Handle file selection
277
+ fileInput.addEventListener('change', function(e) {
278
+ if (e.target.files.length > 0) {
279
+ selectedFile = e.target.files[0];
280
+
281
+ // Validate file
282
+ if (!selectedFile.type.match('image/jpe?g')) {
283
+ uploadStatus.innerHTML = `
284
+ <div class="bg-red-100 border-l-4 border-red-500 text-red-700 p-4">
285
+ <p>Only JPG/JPEG files are allowed.</p>
286
+ </div>
287
+ `;
288
+ uploadStatus.classList.remove('hidden');
289
+ selectedFile = null;
290
+ return;
291
+ }
292
+
293
+ if (selectedFile.size > 3 * 1024 * 1024) {
294
+ uploadStatus.innerHTML = `
295
+ <div class="bg-red-100 border-l-4 border-red-500 text-red-700 p-4">
296
+ <p>File size exceeds 3MB limit.</p>
297
+ </div>
298
+ `;
299
+ uploadStatus.classList.remove('hidden');
300
+ selectedFile = null;
301
+ return;
302
+ }
303
+
304
+ uploadStatus.classList.add('hidden');
305
+ }
306
+ });
307
+
308
+ // Handle upload
309
+ uploadBtn.addEventListener('click', async function() {
310
+ if (!selectedFile) {
311
+ uploadStatus.innerHTML = `
312
+ <div class="bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700 p-4">
313
+ <p>Please select a file first.</p>
314
+ </div>
315
+ `;
316
+ uploadStatus.classList.remove('hidden');
317
+ return;
318
+ }
319
+
320
+ try {
321
+ uploadBtn.disabled = true;
322
+ uploadBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Uploading...';
323
+
324
+ const formData = new FormData();
325
+ formData.append('file_input', selectedFile);
326
+
327
+ const response = await fetch(`${BASE_URL}/upload`, {
328
+ method: 'POST',
329
+ body: formData
330
+ });
331
+
332
+ const data = await response.json();
333
+
334
+ if (response.ok) {
335
+ uploadStatus.innerHTML = `
336
+ <div class="bg-green-100 border-l-4 border-green-500 text-green-700 p-4">
337
+ <p>Kedy uploaded successfully!</p>
338
+ </div>
339
+ `;
340
+ fileInput.value = '';
341
+ selectedFile = null;
342
+
343
+ // Refresh the gallery
344
+ setTimeout(fetchCatImages, 1000);
345
+ } else {
346
+ uploadStatus.innerHTML = `
347
+ <div class="bg-red-100 border-l-4 border-red-500 text-red-700 p-4">
348
+ <p>${data.error || 'Upload failed. Please try again.'}</p>
349
+ </div>
350
+ `;
351
+ }
352
+ } catch (error) {
353
+ console.error('Upload error:', error);
354
+ uploadStatus.innerHTML = `
355
+ <div class="bg-red-100 border-l-4 border-red-500 text-red-700 p-4">
356
+ <p>Upload failed. Please try again later.</p>
357
+ </div>
358
+ `;
359
+ } finally {
360
+ uploadStatus.classList.remove('hidden');
361
+ uploadBtn.disabled = false;
362
+ uploadBtn.innerHTML = '<i class="fas fa-upload mr-2"></i> Upload';
363
+ }
364
+ });
365
+
366
+ // Event listeners
367
+ refreshBtn.addEventListener('click', fetchCatImages);
368
+ randomBtn.addEventListener('click', fetchRandomCatImage);
369
+ closeModal.addEventListener('click', () => randomModal.classList.add('hidden'));
370
+ newRandomBtn.addEventListener('click', fetchRandomCatImage);
371
+
372
+ // Initialize the gallery
373
+ fetchCatImages();
374
+
375
+ // Close modal when clicking outside
376
+ randomModal.addEventListener('click', function(e) {
377
+ if (e.target === randomModal) {
378
+ randomModal.classList.add('hidden');
379
+ }
380
+ });
381
+ });
382
+ </script>
383
+ <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=Hajorda/r" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
384
+ </html>
prompts.txt ADDED
@@ -0,0 +1,5 @@
 
 
 
 
 
 
1
+ create a kedy gallery website that shows cat photos as gallery with cool fun and slick ui. use this api: # KeduAPI Documentation 🐱✨ Welcome to the **KeduAPI** documentation! This is a simple yet powerful API designed to help you upload, manage, and retrieve kedy images from our server. Whether you want to upload your favorite kedy photos or retrieve random kedys for some extra flair, this API has you covered. 🚀🐾 Let's dive into the details! ## Base URL ``` https://api.keduapp.online ``` --- ## Endpoints ### 1. Upload an Image 📤 **URL:** `/upload` **Method:** `POST` **Description:** Uploads a JPEG image (or your cat's best photo) to the server. The file must be `.jpg` or `.jpeg` and shouldn't exceed 3 MB. #### Request Details - **Content-Type**: `multipart/form-data` - **Form Data**: - `file_input`: The image file to upload (only `.jpg` or `.jpeg` supported). #### Example Request (using `curl`) ```bash curl -X POST "https://api.keduapp.online/upload" \ -F "file_input=@/path/to/your/image.jpg" ``` #### Example Request (using `React` and `axios`) ```javascript import axios from 'axios'; const uploadImage = async (file) => { const formData = new FormData(); formData.append('file_input', file); try { const response = await axios.post('https://api.keduapp.online/upload', formData, { headers: { 'Content-Type': 'multipart/form-data' } }); console.log('Upload success:', response.data); } catch (error) { console.error('Upload failed:', error.response ? error.response.data : error.message); } }; ``` #### Response: - `200 OK` ```json { "message": "Kedy uploaded successfully" } ``` #### Error Responses: - `400 Bad Request` if the file is missing, exceeds size limit, or is an unsupported type. - `500 Internal Server Error` for server-side issues. --- ### 2. List All Images 🖼️ **URL:** `/list-images` **Method:** `GET` **Description:** Retrieves a list of all image names stored on the server. #### Example Request (using `curl`) ```bash curl -X GET "https://api.keduapp.online/list-images" ``` #### Example Request (using `React` and `axios`) ```javascript const listImages = async () => { try { const response = await axios.get('https://api.keduapp.online/list-images'); console.log('Images:', response.data.images); } catch (error) { console.error('Error listing images:', error.response ? error.response.data : error.message); } }; ``` #### Response: - `200 OK` ```json { "images": [ "image1.jpg", "image2.jpg", "...", "imageN.jpg" ] } ``` #### Error Responses: - `500 Internal Server Error` if images cannot be retrieved. --- ### 3. Get a Specific Image 📸 **URL:** `/get-image/:name` **Method:** `GET` **Description:** Retrieves the URL and metadata of a specific image by its name. #### URL Parameters: - `:name` (string): The name of the image file. #### Example Request (using `curl`) ```bash curl -X GET "https://api.keduapp.online/get-image/image1.jpg" ``` #### Example Request (using `React` and `axios`) ```javascript const getImage = async (imageName) => { try { const response = await axios.get(`https://api.keduapp.online/get-image/${imageName}`); console.log('Image URL:', response.data.image_url); console.log('Metadata:', response.data.metadata); } catch (error) { console.error('Error fetching image:', error.response ? error.response.data : error.message); } }; ``` #### Response: - `200 OK` ```json { "image_url": "https://storage.googleapis.com/your-bucket-name/path/to/image.jpg", "metadata": { "name": "image1.jpg", "content-type": "image/jpeg", "size": 123456, "updated": "2023-12-04T12:00:00Z" } } ``` #### Error Responses: - `404 Not Found` if the image does not exist. - `500 Internal Server Error` for server-side issues. --- ### 4. Get a Random Image 🌲 **URL:** `/random-image` **Method:** `GET` **Description:** Retrieves a random image's URL and metadata from the stored images. Who knows, you might get a random cat gif! 🐱💨 #### Example Request (using `curl`) ```bash curl -X GET "https://api.keduapp.online/random-image" ``` #### Example Request (using `React` and `axios`) ```javascript const getRandomImage = async () => { try { const response = await axios.get('https://api.keduapp.online/random-image'); console.log('Random Image URL:', response.data.image_url); console.log('Metadata:', response.data.metadata); } catch (error) { console.error('Error fetching random image:', error.response ? error.response.data : error.message); } }; ``` #### Response: - `200 OK` ```json { "image_url": "https://storage.googleapis.com/your-bucket-name/path/to/random-image.jpg", "metadata": { "name": "random-image.jpg", "content-type": "image/jpeg", "size": 789012, "updated": "2023-12-04T12:34:56Z" } } ``` #### Error Responses: - `500 Internal Server Error` if no images are found or upon failure. --- ### 5. Health Check 🏥 **URL:** `/health` **Method:** `GET` **Description:** Checks the health status of the API and its dependencies (like Google Cloud Storage). #### Example Request (using `curl`) ```bash curl -X GET "https://api.keduapp.online/health" ``` #### Example Request (using `React` and `axios`) ```javascript const checkHealth = async () => { try { const response = await axios.get('https://api.keduapp.online/health'); console.log('Health Status:', response.data); } catch (error) { console.error('Error checking health:', error.response ? error.response.data : error.message); } }; ``` #### Response: - `200 OK` ```json { "status": "healthy", "details": { "google-cloud-storage": "healthy" } } ``` --- ## Error Handling ⚠️ The API returns errors in JSON format with appropriate HTTP status codes. **Example Error Response:** - `400 Bad Request` ```json { "error": "Description of the error" } ``` --- ## Notes 📁 - **File Restrictions:** Only `.jpg` and `.jpeg` files are accepted, with a maximum size of 3 MB. - **Caching:** Image lists are cached in Redis for improved performance. - **Authentication:** The API is currently configured to allow unauthenticated access. - **Environment:** Ensure that the Google Cloud credentials are properly set in the production environment. --- ### Here's your bonus fun cat gif! 🐱🎉 ![Turning Cat GIF](https://media.tenor.com/T8SBWIfKcFQAAAAj/maxwell-cat.gif) Hope this documentation brought a smile to your face! 😄
2
+ i can see the phots it just shows the url on gallery but in the random kedy it works: this is the url as example Kedy Collection Random Kedy Refresh https://storage.googleapis.com/bucket-quickstart_keduapi/kedys/A.jpg
3
+ there is no tile right now i need to see the kedy photos in gallery
4
+ it just shows one random photo can you edit the gallery uses this api # KeduAPI Documentation 🐱✨ Welcome to the **KeduAPI** documentation! This is a simple yet powerful API designed to help you upload, manage, and retrieve kedy images from our server. Whether you want to upload your favorite kedy photos or retrieve random kedys for some extra flair, this API has you covered. 🚀🐾 Let's dive into the details! ## Base URL ``` https://api.keduapp.online ``` --- ## Endpoints ### 1. Upload an Image 📤 **URL:** `/upload` **Method:** `POST` **Description:** Uploads a JPEG image (or your cat's best photo) to the server. The file must be `.jpg` or `.jpeg` and shouldn't exceed 3 MB. #### Request Details - **Content-Type**: `multipart/form-data` - **Form Data**: - `file_input`: The image file to upload (only `.jpg` or `.jpeg` supported). #### Example Request (using `curl`) ```bash curl -X POST "https://api.keduapp.online/upload" \ -F "file_input=@/path/to/your/image.jpg" ``` #### Example Request (using `React` and `axios`) ```javascript import axios from 'axios'; const uploadImage = async (file) => { const formData = new FormData(); formData.append('file_input', file); try { const response = await axios.post('https://api.keduapp.online/upload', formData, { headers: { 'Content-Type': 'multipart/form-data' } }); console.log('Upload success:', response.data); } catch (error) { console.error('Upload failed:', error.response ? error.response.data : error.message); } }; ``` #### Response: - `200 OK` ```json { "message": "Kedy uploaded successfully" } ``` #### Error Responses: - `400 Bad Request` if the file is missing, exceeds size limit, or is an unsupported type. - `500 Internal Server Error` for server-side issues. --- ### 2. List All Images 🖼️ **URL:** `/list-images` **Method:** `GET` **Description:** Retrieves a list of all image names stored on the server. #### Example Request (using `curl`) ```bash curl -X GET "https://api.keduapp.online/list-images" ``` #### Example Request (using `React` and `axios`) ```javascript const listImages = async () => { try { const response = await axios.get('https://api.keduapp.online/list-images'); console.log('Images:', response.data.images); } catch (error) { console.error('Error listing images:', error.response ? error.response.data : error.message); } }; ``` #### Response: - `200 OK` ```json { "images": [ "image1.jpg", "image2.jpg", "...", "imageN.jpg" ] } ``` #### Error Responses: - `500 Internal Server Error` if images cannot be retrieved. --- ### 3. Get a Specific Image 📸 **URL:** `/get-image/:name` **Method:** `GET` **Description:** Retrieves the URL and metadata of a specific image by its name. #### URL Parameters: - `:name` (string): The name of the image file. #### Example Request (using `curl`) ```bash curl -X GET "https://api.keduapp.online/get-image/image1.jpg" ``` #### Example Request (using `React` and `axios`) ```javascript const getImage = async (imageName) => { try { const response = await axios.get(`https://api.keduapp.online/get-image/${imageName}`); console.log('Image URL:', response.data.image_url); console.log('Metadata:', response.data.metadata); } catch (error) { console.error('Error fetching image:', error.response ? error.response.data : error.message); } }; ``` #### Response: - `200 OK` ```json { "image_url": "https://storage.googleapis.com/your-bucket-name/path/to/image.jpg", "metadata": { "name": "image1.jpg", "content-type": "image/jpeg", "size": 123456, "updated": "2023-12-04T12:00:00Z" } } ``` #### Error Responses: - `404 Not Found` if the image does not exist. - `500 Internal Server Error` for server-side issues. --- ### 4. Get a Random Image 🌲 **URL:** `/random-image` **Method:** `GET` **Description:** Retrieves a random image's URL and metadata from the stored images. Who knows, you might get a random cat gif! 🐱💨 #### Example Request (using `curl`) ```bash curl -X GET "https://api.keduapp.online/random-image" ``` #### Example Request (using `React` and `axios`) ```javascript const getRandomImage = async () => { try { const response = await axios.get('https://api.keduapp.online/random-image'); console.log('Random Image URL:', response.data.image_url); console.log('Metadata:', response.data.metadata); } catch (error) { console.error('Error fetching random image:', error.response ? error.response.data : error.message); } }; ``` #### Response: - `200 OK` ```json { "image_url": "https://storage.googleapis.com/your-bucket-name/path/to/random-image.jpg", "metadata": { "name": "random-image.jpg", "content-type": "image/jpeg", "size": 789012, "updated": "2023-12-04T12:34:56Z" } } ``` #### Error Responses: - `500 Internal Server Error` if no images are found or upon failure. --- ### 5. Health Check 🏥 **URL:** `/health` **Method:** `GET` **Description:** Checks the health status of the API and its dependencies (like Google Cloud Storage). #### Example Request (using `curl`) ```bash curl -X GET "https://api.keduapp.online/health" ``` #### Example Request (using `React` and `axios`) ```javascript const checkHealth = async () => { try { const response = await axios.get('https://api.keduapp.online/health'); console.log('Health Status:', response.data); } catch (error) { console.error('Error checking health:', error.response ? error.response.data : error.message); } }; ``` #### Response: - `200 OK` ```json { "status": "healthy", "details": { "google-cloud-storage": "healthy" } } ``` --- ## Error Handling ⚠️ The API returns errors in JSON format with appropriate HTTP status codes. **Example Error Response:** - `400 Bad Request` ```json { "error": "Description of the error" } ``` --- ## Notes 📁 - **File Restrictions:** Only `.jpg` and `.jpeg` files are accepted, with a maximum size of 3 MB. - **Caching:** Image lists are cached in Redis for improved performance. - **Authentication:** The API is currently configured to allow unauthenticated access. - **Environment:** Ensure that the Google Cloud credentials are properly set in the production environment. --- ### Here's your bonus fun cat gif! 🐱🎉 ![Turning Cat GIF](https://media.tenor.com/T8SBWIfKcFQAAAAj/maxwell-cat.gif) Hope this documentation brought a smile to your face! 😄
5
+ Failed to load kedys. Please try again later. Unexpected token '<', "