Hugging Face's logo

Spaces:
flen-crypto
/
soragram
Running

App Files Community
flen-crypto commited on
Commit
febc718
·
verified ·
1 Parent(s): 6a2ecdf

instagram clone but you give each photo a rating out of 10 and every photo is generated by the users prompt by sora, it also has a prompt refiner and a tab on how to write the perfect sora prompt, a trending sevtion, where you can filter the rating of the image - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +501 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Soragram
3
- emoji: 🌖
4
- colorFrom: green
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: soragram
3
+ emoji: 🐳
4
+ colorFrom: purple
5
+ colorTo: red
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,501 @@
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>SoraGram - AI-Powered Image Sharing</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
+ .gradient-bg {
11
+ background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
12
+ }
13
+ .post-image {
14
+ transition: transform 0.3s ease;
15
+ }
16
+ .post-image:hover {
17
+ transform: scale(1.03);
18
+ }
19
+ .rating-stars {
20
+ color: #fbbf24;
21
+ }
22
+ .prompt-refiner {
23
+ min-height: 150px;
24
+ }
25
+ .tab-content {
26
+ display: none;
27
+ }
28
+ .tab-content.active {
29
+ display: block;
30
+ }
31
+ .skeleton {
32
+ animation: pulse 2s infinite ease-in-out;
33
+ }
34
+ @keyframes pulse {
35
+ 0%, 100% {
36
+ opacity: 1;
37
+ }
38
+ 50% {
39
+ opacity: 0.5;
40
+ }
41
+ }
42
+ </style>
43
+ </head>
44
+ <body class="gradient-bg min-h-screen">
45
+ <!-- Header -->
46
+ <header class="bg-white shadow-sm sticky top-0 z-10">
47
+ <div class="container mx-auto px-4 py-3 flex justify-between items-center">
48
+ <div class="flex items-center space-x-2">
49
+ <i class="fas fa-camera-retro text-2xl text-purple-600"></i>
50
+ <h1 class="text-xl font-bold text-gray-800">SoraGram</h1>
51
+ </div>
52
+ <div class="hidden md:flex items-center space-x-4">
53
+ <button class="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition">
54
+ <i class="fas fa-plus mr-2"></i> Generate
55
+ </button>
56
+ <div class="relative">
57
+ <input type="text" placeholder="Search prompts..." class="pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500">
58
+ <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
59
+ </div>
60
+ </div>
61
+ <div class="flex items-center space-x-3">
62
+ <button class="md:hidden text-gray-600">
63
+ <i class="fas fa-search text-xl"></i>
64
+ </button>
65
+ <button class="md:hidden text-gray-600">
66
+ <i class="fas fa-plus text-xl"></i>
67
+ </button>
68
+ <div class="w-8 h-8 rounded-full bg-purple-500 flex items-center justify-center text-white">
69
+ <i class="fas fa-user"></i>
70
+ </div>
71
+ </div>
72
+ </div>
73
+ </header>
74
+
75
+ <!-- Main Content -->
76
+ <main class="container mx-auto px-4 py-6">
77
+ <!-- Tabs Navigation -->
78
+ <div class="bg-white rounded-lg shadow mb-6">
79
+ <div class="flex border-b">
80
+ <button class="tab-btn px-6 py-3 font-medium text-gray-600 hover:text-purple-600 border-b-2 border-transparent hover:border-purple-500 transition active" data-tab="feed">
81
+ <i class="fas fa-home mr-2"></i> Feed
82
+ </button>
83
+ <button class="tab-btn px-6 py-3 font-medium text-gray-600 hover:text-purple-600 border-b-2 border-transparent hover:border-purple-500 transition" data-tab="trending">
84
+ <i class="fas fa-fire mr-2"></i> Trending
85
+ </button>
86
+ <button class="tab-btn px-6 py-3 font-medium text-gray-600 hover:text-purple-600 border-b-2 border-transparent hover:border-purple-500 transition" data-tab="prompt-guide">
87
+ <i class="fas fa-lightbulb mr-2"></i> Prompt Guide
88
+ </button>
89
+ <button class="tab-btn px-6 py-3 font-medium text-gray-600 hover:text-purple-600 border-b-2 border-transparent hover:border-purple-500 transition" data-tab="refiner">
90
+ <i class="fas fa-magic mr-2"></i> Prompt Refiner
91
+ </button>
92
+ </div>
93
+ </div>
94
+
95
+ <!-- Tab Contents -->
96
+ <div class="tab-content active" id="feed">
97
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
98
+ <!-- Sample Post 1 -->
99
+ <div class="bg-white rounded-xl shadow-md overflow-hidden">
100
+ <div class="relative">
101
+ <img src="https://source.unsplash.com/random/600x600/?fantasy" alt="AI generated image" class="w-full h-64 object-cover post-image">
102
+ <div class="absolute top-2 right-2 bg-black bg-opacity-50 text-white px-2 py-1 rounded-full text-sm">
103
+ <i class="fas fa-star mr-1"></i> 8.7
104
+ </div>
105
+ </div>
106
+ <div class="p-4">
107
+ <div class="flex justify-between items-start mb-2">
108
+ <h3 class="font-semibold text-gray-800">Mystical Forest at Dusk</h3>
109
+ <div class="flex items-center">
110
+ <i class="fas fa-heart text-red-500 mr-1"></i>
111
+ <span class="text-gray-600">142</span>
112
+ </div>
113
+ </div>
114
+ <p class="text-gray-600 text-sm mb-3">"A magical forest with glowing mushrooms and fireflies, cinematic lighting, ultra HD"</p>
115
+ <div class="flex justify-between items-center">
116
+ <div class="flex items-center">
117
+ <img src="https://source.unsplash.com/random/40x40/?portrait" alt="User" class="w-6 h-6 rounded-full mr-2">
118
+ <span class="text-gray-700 text-sm">@ai_artist</span>
119
+ </div>
120
+ <span class="text-gray-500 text-xs">2h ago</span>
121
+ </div>
122
+ </div>
123
+ </div>
124
+
125
+ <!-- Sample Post 2 -->
126
+ <div class="bg-white rounded-xl shadow-md overflow-hidden">
127
+ <div class="relative">
128
+ <img src="https://source.unsplash.com/random/600x600/?cyberpunk" alt="AI generated image" class="w-full h-64 object-cover post-image">
129
+ <div class="absolute top-2 right-2 bg-black bg-opacity-50 text-white px-2 py-1 rounded-full text-sm">
130
+ <i class="fas fa-star mr-1"></i> 9.2
131
+ </div>
132
+ </div>
133
+ <div class="p-4">
134
+ <div class="flex justify-between items-start mb-2">
135
+ <h3 class="font-semibold text-gray-800">Neon Cityscape</h3>
136
+ <div class="flex items-center">
137
+ <i class="fas fa-heart text-red-500 mr-1"></i>
138
+ <span class="text-gray-600">256</span>
139
+ </div>
140
+ </div>
141
+ <p class="text-gray-600 text-sm mb-3">"Cyberpunk metropolis with flying cars, neon signs in Japanese, rain-soaked streets reflecting colorful lights"</p>
142
+ <div class="flex justify-between items-center">
143
+ <div class="flex items-center">
144
+ <img src="https://source.unsplash.com/random/40x40/?man" alt="User" class="w-6 h-6 rounded-full mr-2">
145
+ <span class="text-gray-700 text-sm">@future_visions</span>
146
+ </div>
147
+ <span class="text-gray-500 text-xs">5h ago</span>
148
+ </div>
149
+ </div>
150
+ </div>
151
+
152
+ <!-- Sample Post 3 -->
153
+ <div class="bg-white rounded-xl shadow-md overflow-hidden">
154
+ <div class="relative">
155
+ <img src="https://source.unsplash.com/random/600x600/?portrait" alt="AI generated image" class="w-full h-64 object-cover post-image">
156
+ <div class="absolute top-2 right-2 bg-black bg-opacity-50 text-white px-2 py-1 rounded-full text-sm">
157
+ <i class="fas fa-star mr-1"></i> 7.5
158
+ </div>
159
+ </div>
160
+ <div class="p-4">
161
+ <div class="flex justify-between items-start mb-2">
162
+ <h3 class="font-semibold text-gray-800">Surreal Portrait</h3>
163
+ <div class="flex items-center">
164
+ <i class="fas fa-heart text-red-500 mr-1"></i>
165
+ <span class="text-gray-600">98</span>
166
+ </div>
167
+ </div>
168
+ <p class="text-gray-600 text-sm mb-3">"Beautiful woman with galaxy eyes and floral hair, hyper-realistic, studio lighting, 8k resolution"</p>
169
+ <div class="flex justify-between items-center">
170
+ <div class="flex items-center">
171
+ <img src="https://source.unsplash.com/random/40x40/?woman" alt="User" class="w-6 h-6 rounded-full mr-2">
172
+ <span class="text-gray-700 text-sm">@digital_dreamer</span>
173
+ </div>
174
+ <span class="text-gray-500 text-xs">1d ago</span>
175
+ </div>
176
+ </div>
177
+ </div>
178
+ </div>
179
+ </div>
180
+
181
+ <!-- Trending Tab -->
182
+ <div class="tab-content" id="trending">
183
+ <div class="bg-white rounded-lg shadow p-4 mb-6">
184
+ <div class="flex flex-wrap gap-2 mb-4">
185
+ <button class="filter-btn px-3 py-1 bg-purple-600 text-white rounded-full text-sm" data-rating="all">All Ratings</button>
186
+ <button class="filter-btn px-3 py-1 bg-gray-200 text-gray-700 rounded-full text-sm" data-rating="9">9+</button>
187
+ <button class="filter-btn px-3 py-1 bg-gray-200 text-gray-700 rounded-full text-sm" data-rating="8">8+</button>
188
+ <button class="filter-btn px-3 py-1 bg-gray-200 text-gray-700 rounded-full text-sm" data-rating="7">7+</button>
189
+ <button class="filter-btn px-3 py-1 bg-gray-200 text-gray-700 rounded-full text-sm" data-rating="6">6+</button>
190
+ </div>
191
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 trending-posts">
192
+ <!-- Trending Post 1 -->
193
+ <div class="bg-gray-50 rounded-lg p-3 border border-gray-200" data-rating="9.2">
194
+ <div class="relative mb-2">
195
+ <img src="https://source.unsplash.com/random/300x300/?underwater" alt="Trending image" class="w-full h-40 object-cover rounded-lg">
196
+ <div class="absolute bottom-2 right-2 bg-black bg-opacity-50 text-white px-2 py-1 rounded-full text-xs">
197
+ <i class="fas fa-star mr-1"></i> 9.2
198
+ </div>
199
+ </div>
200
+ <h4 class="font-medium text-gray-800 text-sm truncate">Underwater Coral Kingdom</h4>
201
+ <p class="text-gray-500 text-xs truncate mb-2">"Vibrant coral reef with tropical fish, sun rays piercing through water"</p>
202
+ <div class="flex justify-between items-center">
203
+ <span class="text-purple-600 text-xs">@ocean_explorer</span>
204
+ <span class="text-gray-400 text-xs">1.2k likes</span>
205
+ </div>
206
+ </div>
207
+
208
+ <!-- Trending Post 2 -->
209
+ <div class="bg-gray-50 rounded-lg p-3 border border-gray-200" data-rating="8.7">
210
+ <div class="relative mb-2">
211
+ <img src="https://source.unsplash.com/random/300x300/?mountain" alt="Trending image" class="w-full h-40 object-cover rounded-lg">
212
+ <div class="absolute bottom-2 right-2 bg-black bg-opacity-50 text-white px-2 py-1 rounded-full text-xs">
213
+ <i class="fas fa-star mr-1"></i> 8.7
214
+ </div>
215
+ </div>
216
+ <h4 class="font-medium text-gray-800 text-sm truncate">Snowy Mountain Peak</h4>
217
+ <p class="text-gray-500 text-xs truncate mb-2">"Majestic Himalayan mountains at sunrise, ultra realistic 8k"</p>
218
+ <div class="flex justify-between items-center">
219
+ <span class="text-purple-600 text-xs">@nature_lover</span>
220
+ <span class="text-gray-400 text-xs">980 likes</span>
221
+ </div>
222
+ </div>
223
+
224
+ <!-- Trending Post 3 -->
225
+ <div class="bg-gray-50 rounded-lg p-3 border border-gray-200" data-rating="9.5">
226
+ <div class="relative mb-2">
227
+ <img src="https://source.unsplash.com/random/300x300/?cat" alt="Trending image" class="w-full h-40 object-cover rounded-lg">
228
+ <div class="absolute bottom-2 right-2 bg-black bg-opacity-50 text-white px-2 py-1 rounded-full text-xs">
229
+ <i class="fas fa-star mr-1"></i> 9.5
230
+ </div>
231
+ </div>
232
+ <h4 class="font-medium text-gray-800 text-sm truncate">Fluffy Cosmic Cat</h4>
233
+ <p class="text-gray-500 text-xs truncate mb-2">"Adorable kitten with galaxy fur pattern, studio lighting, 4k"</p>
234
+ <div class="flex justify-between items-center">
235
+ <span class="text-purple-600 text-xs">@pet_artist</span>
236
+ <span class="text-gray-400 text-xs">2.4k likes</span>
237
+ </div>
238
+ </div>
239
+
240
+ <!-- Trending Post 4 -->
241
+ <div class="bg-gray-50 rounded-lg p-3 border border-gray-200" data-rating="7.8">
242
+ <div class="relative mb-2">
243
+ <img src="https://source.unsplash.com/random/300x300/?abstract" alt="Trending image" class="w-full h-40 object-cover rounded-lg">
244
+ <div class="absolute bottom-2 right-2 bg-black bg-opacity-50 text-white px-2 py-1 rounded-full text-xs">
245
+ <i class="fas fa-star mr-1"></i> 7.8
246
+ </div>
247
+ </div>
248
+ <h4 class="font-medium text-gray-800 text-sm truncate">Abstract Color Explosion</h4>
249
+ <p class="text-gray-500 text-xs truncate mb-2">"Vibrant liquid colors mixing in zero gravity, high detail"</p>
250
+ <div class="flex justify-between items-center">
251
+ <span class="text-purple-600 text-xs">@abstract_ai</span>
252
+ <span class="text-gray-400 text-xs">750 likes</span>
253
+ </div>
254
+ </div>
255
+ </div>
256
+ </div>
257
+ </div>
258
+
259
+ <!-- Prompt Guide Tab -->
260
+ <div class="tab-content" id="prompt-guide">
261
+ <div class="bg-white rounded-lg shadow p-6">
262
+ <h2 class="text-2xl font-bold text-gray-800 mb-4">Crafting the Perfect Sora Prompt</h2>
263
+
264
+ <div class="mb-6">
265
+ <h3 class="text-lg font-semibold text-purple-600 mb-2">1. Start with the Main Subject</h3>
266
+ <p class="text-gray-700 mb-2">Clearly describe what you want to see. Be specific about:</p>
267
+ <ul class="list-disc pl-5 text-gray-700 space-y-1">
268
+ <li>Objects, people, or scenes</li>
269
+ <li>Key features or characteristics</li>
270
+ <li>Actions or interactions</li>
271
+ </ul>
272
+ <div class="bg-gray-50 p-3 rounded-lg mt-2 border-l-4 border-purple-500">
273
+ <p class="text-sm text-gray-700 italic">Example: "A majestic dragon with emerald green scales and golden horns"</p>
274
+ </div>
275
+ </div>
276
+
277
+ <div class="mb-6">
278
+ <h3 class="text-lg font-semibold text-purple-600 mb-2">2. Add Descriptive Details</h3>
279
+ <p class="text-gray-700 mb-2">Enhance your prompt with:</p>
280
+ <ul class="list-disc pl-5 text-gray-700 space-y-1">
281
+ <li>Colors, textures, materials</li>
282
+ <li>Lighting conditions (sunset, studio lighting, etc.)</li>
283
+ <li>Atmosphere or mood</li>
284
+ <li>Style references (photorealistic, watercolor, cyberpunk, etc.)</li>
285
+ </ul>
286
+ <div class="bg-gray-50 p-3 rounded-lg mt-2 border-l-4 border-purple-500">
287
+ <p class="text-sm text-gray-700 italic">Example: "standing on a cliff at sunset, glowing embers floating in the air, cinematic lighting, highly detailed"</p>
288
+ </div>
289
+ </div>
290
+
291
+ <div class="mb-6">
292
+ <h3 class="text-lg font-semibold text-purple-600 mb-2">3. Specify Composition & Quality</h3>
293
+ <p class="text-gray-700 mb-2">Guide the framing and technical aspects:</p>
294
+ <ul class="list-disc pl-5 text-gray-700 space-y-1">
295
+ <li>Perspective (close-up, aerial view, etc.)</li>
296
+ <li>Resolution (4k, 8k, etc.)</li>
297
+ <li>Camera settings (depth of field, bokeh, etc.)</li>
298
+ <li>Art medium (oil painting, digital art, photograph, etc.)</li>
299
+ </ul>
300
+ <div class="bg-gray-50 p-3 rounded-lg mt-2 border-l-4 border-purple-500">
301
+ <p class="text-sm text-gray-700 italic">Example: "wide angle shot, shallow depth of field, 8k resolution, digital painting"</p>
302
+ </div>
303
+ </div>
304
+
305
+ <div class="bg-purple-50 p-4 rounded-lg border border-purple-200">
306
+ <h3 class="text-lg font-semibold text-purple-700 mb-2">Final Example Prompt</h3>
307
+ <p class="text-gray-800 font-medium">"A majestic dragon with emerald green scales and golden horns standing on a cliff at sunset, glowing embers floating in the air, cinematic lighting, highly detailed, wide angle shot, shallow depth of field, 8k resolution, digital painting"</p>
308
+ </div>
309
+ </div>
310
+ </div>
311
+
312
+ <!-- Prompt Refiner Tab -->
313
+ <div class="tab-content" id="refiner">
314
+ <div class="bg-white rounded-lg shadow p-6">
315
+ <h2 class="text-2xl font-bold text-gray-800 mb-4">Prompt Refiner</h2>
316
+ <p class="text-gray-600 mb-6">Enter your basic prompt idea and we'll help you enhance it for better Sora results.</p>
317
+
318
+ <div class="mb-4">
319
+ <label for="basic-prompt" class="block text-gray-700 font-medium mb-2">Your Basic Prompt</label>
320
+ <textarea id="basic-prompt" class="w-full px-4 py-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 prompt-refiner" placeholder="e.g. A beautiful landscape"></textarea>
321
+ </div>
322
+
323
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
324
+ <div>
325
+ <label class="block text-gray-700 font-medium mb-2">Style</label>
326
+ <select class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500">
327
+ <option>Photorealistic</option>
328
+ <option>Digital Art</option>
329
+ <option>Watercolor</option>
330
+ <option>Oil Painting</option>
331
+ <option>Cyberpunk</option>
332
+ <option>Anime</option>
333
+ <option>Pixel Art</option>
334
+ </select>
335
+ </div>
336
+ <div>
337
+ <label class="block text-gray-700 font-medium mb-2">Lighting</label>
338
+ <select class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500">
339
+ <option>Natural Light</option>
340
+ <option>Studio Lighting</option>
341
+ <option>Sunset</option>
342
+ <option>Moonlight</option>
343
+ <option>Neon Lights</option>
344
+ <option>Candlelight</option>
345
+ </select>
346
+ </div>
347
+ </div>
348
+
349
+ <div class="mb-6">
350
+ <label class="block text-gray-700 font-medium mb-2">Additional Details (Check all that apply)</label>
351
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-2">
352
+ <label class="flex items-center">
353
+ <input type="checkbox" class="rounded text-purple-600 focus:ring-purple-500">
354
+ <span class="ml-2 text-gray-700">Highly Detailed</span>
355
+ </label>
356
+ <label class="flex items-center">
357
+ <input type="checkbox" class="rounded text-purple-600 focus:ring-purple-500">
358
+ <span class="ml-2 text-gray-700">8K Resolution</span>
359
+ </label>
360
+ <label class="flex items-center">
361
+ <input type="checkbox" class="rounded text-purple-600 focus:ring-purple-500">
362
+ <span class="ml-2 text-gray-700">Cinematic</span>
363
+ </label>
364
+ <label class="flex items-center">
365
+ <input type="checkbox" class="rounded text-purple-600 focus:ring-purple-500">
366
+ <span class="ml-2 text-gray-700">Depth of Field</span>
367
+ </label>
368
+ </div>
369
+ </div>
370
+
371
+ <button id="refine-btn" class="w-full bg-purple-600 text-white py-3 rounded-lg font-medium hover:bg-purple-700 transition mb-6">
372
+ <i class="fas fa-magic mr-2"></i> Refine My Prompt
373
+ </button>
374
+
375
+ <div id="refined-prompt-container" class="hidden">
376
+ <label class="block text-gray-700 font-medium mb-2">Refined Prompt</label>
377
+ <div class="bg-gray-50 p-4 rounded-lg border border-gray-200 mb-4">
378
+ <p id="refined-prompt" class="text-gray-800"></p>
379
+ </div>
380
+ <div class="flex justify-between">
381
+ <button class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition">
382
+ <i class="fas fa-copy mr-2"></i> Copy
383
+ </button>
384
+ <button class="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition">
385
+ <i class="fas fa-bolt mr-2"></i> Generate Image
386
+ </button>
387
+ </div>
388
+ </div>
389
+ </div>
390
+ </div>
391
+ </main>
392
+
393
+ <!-- Bottom Navigation (Mobile) -->
394
+ <nav class="md:hidden fixed bottom-0 left-0 right-0 bg-white shadow-lg border-t">
395
+ <div class="flex justify-around items-center py-3">
396
+ <button class="tab-btn text-purple-600 flex flex-col items-center" data-tab="feed">
397
+ <i class="fas fa-home text-xl"></i>
398
+ <span class="text-xs mt-1">Home</span>
399
+ </button>
400
+ <button class="tab-btn text-gray-500 flex flex-col items-center" data-tab="trending">
401
+ <i class="fas fa-fire text-xl"></i>
402
+ <span class="text-xs mt-1">Trending</span>
403
+ </button>
404
+ <button class="bg-purple-600 text-white p-3 rounded-full -mt-8 shadow-lg">
405
+ <i class="fas fa-plus text-xl"></i>
406
+ </button>
407
+ <button class="tab-btn text-gray-500 flex flex-col items-center" data-tab="prompt-guide">
408
+ <i class="fas fa-lightbulb text-xl"></i>
409
+ <span class="text-xs mt-1">Guide</span>
410
+ </button>
411
+ <button class="tab-btn text-gray-500 flex flex-col items-center" data-tab="refiner">
412
+ <i class="fas fa-magic text-xl"></i>
413
+ <span class="text-xs mt-1">Refiner</span>
414
+ </button>
415
+ </div>
416
+ </nav>
417
+
418
+ <script>
419
+ // Tab switching functionality
420
+ document.querySelectorAll('.tab-btn').forEach(btn => {
421
+ btn.addEventListener('click', function() {
422
+ // Remove active class from all buttons and tabs
423
+ document.querySelectorAll('.tab-btn').forEach(b => {
424
+ b.classList.remove('active', 'text-purple-600');
425
+ b.classList.add('text-gray-500');
426
+ });
427
+
428
+ // Add active class to clicked button
429
+ this.classList.add('active', 'text-purple-600');
430
+ this.classList.remove('text-gray-500');
431
+
432
+ // Hide all tab contents
433
+ document.querySelectorAll('.tab-content').forEach(tab => {
434
+ tab.classList.remove('active');
435
+ });
436
+
437
+ // Show selected tab content
438
+ const tabId = this.getAttribute('data-tab');
439
+ document.getElementById(tabId).classList.add('active');
440
+ });
441
+ });
442
+
443
+ // Rating filter functionality
444
+ document.querySelectorAll('.filter-btn').forEach(btn => {
445
+ btn.addEventListener('click', function() {
446
+ // Update active button
447
+ document.querySelectorAll('.filter-btn').forEach(b => {
448
+ b.classList.remove('bg-purple-600', 'text-white');
449
+ b.classList.add('bg-gray-200', 'text-gray-700');
450
+ });
451
+ this.classList.add('bg-purple-600', 'text-white');
452
+ this.classList.remove('bg-gray-200', 'text-gray-700');
453
+
454
+ // Filter posts
455
+ const rating = this.getAttribute('data-rating');
456
+ const posts = document.querySelectorAll('.trending-posts > div');
457
+
458
+ posts.forEach(post => {
459
+ if (rating === 'all') {
460
+ post.style.display = 'block';
461
+ } else {
462
+ const postRating = parseFloat(post.getAttribute('data-rating'));
463
+ if (postRating >= parseFloat(rating)) {
464
+ post.style.display = 'block';
465
+ } else {
466
+ post.style.display = 'none';
467
+ }
468
+ }
469
+ });
470
+ });
471
+ });
472
+
473
+ // Prompt refiner functionality
474
+ document.getElementById('refine-btn').addEventListener('click', function() {
475
+ const basicPrompt = document.getElementById('basic-prompt').value.trim();
476
+ if (!basicPrompt) {
477
+ alert('Please enter a basic prompt first');
478
+ return;
479
+ }
480
+
481
+ // Simulate refining the prompt (in a real app, this would be more sophisticated)
482
+ const style = document.querySelector('select:nth-of-type(1)').value;
483
+ const lighting = document.querySelector('select:nth-of-type(2)').value;
484
+
485
+ let refinedPrompt = basicPrompt;
486
+ refinedPrompt += `, ${style.toLowerCase()} style`;
487
+ refinedPrompt += `, ${lighting.toLowerCase()} lighting`;
488
+
489
+ // Add checked details
490
+ const checkboxes = document.querySelectorAll('input[type="checkbox"]:checked');
491
+ checkboxes.forEach(cb => {
492
+ refinedPrompt += `, ${cb.nextElementSibling.textContent.toLowerCase()}`;
493
+ });
494
+
495
+ // Show the refined prompt
496
+ document.getElementById('refined-prompt').textContent = refinedPrompt;
497
+ document.getElementById('refined-prompt-container').classList.remove('hidden');
498
+ });
499
+ </script>
500
+ <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=flen-crypto/soragram" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
501
+ </html>