Hugging Face's logo

Spaces:
Boobs00
/
loading
Running

App Files Community
Boobs00 commited on
Commit
b82fc3c
·
verified ·
1 Parent(s): 30c9218

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +275 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Loading
3
- emoji: 🏃
4
- colorFrom: red
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: loading
3
+ emoji: 🐳
4
+ colorFrom: pink
5
  colorTo: purple
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,275 @@
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>FLUX LoRA Explorer - Supabase Edition</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/supabase-js"></script>
9
+ <script>
10
+ tailwind.config = {
11
+ theme: {
12
+ extend: {
13
+ colors: {
14
+ 'flux-primary': '#6366f1',
15
+ 'flux-secondary': '#a78bfa',
16
+ 'flux-dark': '#1e293b',
17
+ }
18
+ }
19
+ }
20
+ }
21
+ </script>
22
+ <style type="text/tailwindcss">
23
+ @layer utilities {
24
+ .scrollbar-hide::-webkit-scrollbar {
25
+ display: none;
26
+ }
27
+ .gradient-bg {
28
+ background: linear-gradient(135deg, #1e293b 0%, #121827 100%);
29
+ }
30
+ .lora-card:hover {
31
+ transform: translateY(-3px);
32
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
33
+ }
34
+ .flux-glow {
35
+ box-shadow: 0 0 15px rgba(99, 102, 241, 0.5);
36
+ }
37
+ }
38
+ </style>
39
+ <style>
40
+ :root {
41
+ --flux-primary: #6366f1;
42
+ --flux-secondary: #a78bfa;
43
+ }
44
+
45
+ body {
46
+ font-family: 'Inter', sans-serif;
47
+ @apply gradient-bg text-slate-100;
48
+ background-attachment: fixed;
49
+ }
50
+
51
+ .logo-glow {
52
+ filter: drop-shadow(0 0 10px rgba(167, 139, 250, 0.7));
53
+ }
54
+
55
+ .tabs .active {
56
+ @apply border-b-4 border-flux-primary;
57
+ }
58
+
59
+ .form-label {
60
+ @apply text-slate-300 text-sm font-medium mb-1 block;
61
+ }
62
+
63
+ .progress-gradient {
64
+ background: linear-gradient(90deg, #818cf8, #6366f1, #4f46e5);
65
+ animation: progressPulse 2s infinite;
66
+ }
67
+
68
+ @keyframes progressPulse {
69
+ 0% { opacity: 0.7; }
70
+ 50% { opacity: 1; }
71
+ 100% { opacity: 0.7; }
72
+ }
73
+
74
+ .blob {
75
+ position: absolute;
76
+ width: 600px;
77
+ height: 600px;
78
+ background: radial-gradient(circle at center, rgba(99, 102, 241, 0.1) 0%, rgba(79, 70, 229, 0) 70%);
79
+ border-radius: 50%;
80
+ z-index: -1;
81
+ }
82
+ </style>
83
+ </head>
84
+ <body class="min-h-screen relative overflow-x-hidden">
85
+ <!-- Background elements -->
86
+ <div class="blob top-[-300px] left-[-300px] md:top-[-200px] md:left-[-200px]"></div>
87
+ <div class="blob bottom-[-300px] right-[-300px] md:bottom-[-200px] md:right-[-200px]"></div>
88
+
89
+ <div class="container mx-auto px-4 py-6 max-w-7xl relative">
90
+ <!-- Header -->
91
+ <header class="flex flex-col items-center mb-8">
92
+ <div class="flex items-center gap-3 mb-2 logo-glow">
93
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 text-flux-secondary" viewBox="0 0 24 24" fill="currentColor">
94
+ <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path>
95
+ </svg>
96
+ <h1 class="text-4xl md:text-5xl font-bold bg-gradient-to-r from-flux-secondary to-flux-primary bg-clip-text text-transparent">FLUX LoRA Explorer</h1>
97
+ </div>
98
+ <p class="text-center text-slate-400 mb-6 max-w-2xl">
99
+ Revolutionize your image generation experience with the power of AI. Select LoRA models, customize parameters, and create stunning visuals with one click.
100
+ </p>
101
+ <div class="flex items-center gap-2 bg-flux-dark px-4 py-2 rounded-full">
102
+ <span class="relative flex h-3 w-3">
103
+ <span class="animate-ping absolute h-full w-full rounded-full bg-green-400 opacity-75"></span>
104
+ <span class="h-full w-full rounded-full bg-green-500"></span>
105
+ </span>
106
+ <span class="text-sm text-slate-300">Supabase Integrated</span>
107
+ </div>
108
+ </header>
109
+
110
+ <!-- Main Content -->
111
+ <main class="grid grid-cols-1 lg:grid-cols-12 gap-6">
112
+ <!-- Left Panel -->
113
+ <div class="lg:col-span-8 flex flex-col gap-6">
114
+ <!-- Gallery Section -->
115
+ <div class="bg-slate-800/50 backdrop-blur-sm rounded-xl p-5 border border-slate-700/50">
116
+ <div class="flex justify-between items-center mb-4">
117
+ <h2 class="text-xl font-semibold">LoRA Gallery</h2>
118
+ <div class="flex gap-2">
119
+ <button class="px-3 py-1.5 text-sm bg-slate-700 hover:bg-slate-600 rounded-md transition">Search Models</button>
120
+ <button class="px-3 py-1.5 text-sm bg-flux-primary hover:bg-indigo-500 rounded-md transition">Add Custom</button>
121
+ </div>
122
+ </div>
123
+
124
+ <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4">
125
+ <!-- Gallery Items -->
126
+ <div class="lora-card bg-slate-700/50 rounded-lg overflow-hidden transition duration-300">
127
+ <div class="aspect-square bg-slate-600 flex items-center justify-center">
128
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-flux-secondary opacity-50" viewBox="0 0 24 24" fill="currentColor">
129
+ <path d="M4 4h7v7H4zm9 9h7v7h-7z" />
130
+ <path d="M4 20l7-7m3-6 7-7" stroke="currentColor" stroke-width="2" />
131
+ </svg>
132
+ </div>
133
+ <div class="p-3">
134
+ <h3 class="font-medium truncate">Anime Style</h3>
135
+ <p class="text-xs text-slate-400 truncate">Trigger: anime_style</p>
136
+ </div>
137
+ </div>
138
+
139
+ <div class="lora-card bg-slate-700/50 rounded-lg overflow-hidden transition duration-300">
140
+ <div class="aspect-square bg-indigo-900/30 flex items-center justify-center">
141
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-flux-secondary opacity-50" viewBox="0 0 24 24" fill="currentColor">
142
+ <path d="M19 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2zm0 16H5V5h14v14zm-8-9H8v6h3v-6zm5-3h-3v10h3V7zm-5 7h3v3h-3v-3z" />
143
+ </svg>
144
+ </div>
145
+ <div class="p-3">
146
+ <h3 class="font-medium truncate">Pixel Art</h3>
147
+ <p class="text-xs text-slate-400 truncate">Trigger: pixel_mode</p>
148
+ </div>
149
+ </div>
150
+
151
+ <div class="lora-card bg-slate-700/50 rounded-lg overflow-hidden transition duration-300">
152
+ <div class="aspect-square bg-amber-900/30 flex items-center justify-center">
153
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-flux-secondary opacity-50" viewBox="0 0 24 24" fill="currentColor">
154
+ <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" />
155
+ <circle cx="12" cy="12" r="5" />
156
+ </svg>
157
+ </div>
158
+ <div class="p-3">
159
+ <h3 class="font-medium truncate">Retro VHS</h3>
160
+ <p class="text-xs text-slate-400 truncate">Trigger: 90s_vhs</p>
161
+ </div>
162
+ </div>
163
+
164
+ <div class="lora-card bg-slate-700/50 rounded-lg overflow-hidden transition duration-300">
165
+ <div class="aspect-square bg-teal-900/30 flex items-center justify-center">
166
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-flux-secondary opacity-50" viewBox="0 0 24 24" fill="currentColor">
167
+ <path d="M21 5V3H3v2l8 9v5H7v2h10v-2h-4v-5l8-9z" />
168
+ </svg>
169
+ </div>
170
+ <div class="p-3">
171
+ <h3 class="font-medium truncate">Watercolor</h3>
172
+ <p class="text-xs text-slate-400 truncate">Trigger: watercolor</p>
173
+ </div>
174
+ </div>
175
+ </div>
176
+ </div>
177
+
178
+ <!-- Generation Section -->
179
+ <div class="bg-slate-800/50 backdrop-blur-sm rounded-xl p-5 border border-slate-700/50">
180
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
181
+ <!-- Input Panel -->
182
+ <div>
183
+ <h2 class="text-xl font-semibold mb-4">Create Your Image</h2>
184
+
185
+ <div class="space-y-4">
186
+ <div>
187
+ <label class="form-label">Prompt</label>
188
+ <textarea class="w-full bg-slate-700/50 border border-slate-600 rounded-lg p-3 focus:ring-2 focus:ring-flux-primary focus:outline-none transition" placeholder="Describe what you want to create..." rows="3"></textarea>
189
+ </div>
190
+
191
+ <div class="grid grid-cols-2 gap-4">
192
+ <div>
193
+ <label class="form-label">Negative Prompt</label>
194
+ <textarea class="w-full bg-slate-700/50 border border-slate-600 rounded-lg p-2 text-sm focus:ring-2 focus:ring-flux-primary focus:outline-none transition" placeholder="What you want to avoid..." rows="2"></textarea>
195
+ </div>
196
+ <div>
197
+ <label class="form-label">Base Model</label>
198
+ <select class="w-full bg-slate-700/50 border border-slate-600 rounded-lg p-2 focus:ring-2 focus:ring-flux-primary focus:outline-none transition">
199
+ <option>FLUX.1-dev</option>
200
+ <option>FLUX.1-schnell</option>
201
+ <option>Stable Diffusion XL</option>
202
+ </select>
203
+ </div>
204
+ </div>
205
+
206
+ <div class="flex justify-between items-center pt-2">
207
+ <button class="px-4 py-2 bg-slate-700 hover:bg-slate-600 rounded-lg transition">
208
+ Enhance Prompt
209
+ </button>
210
+ <button id="generateBtn" class="px-6 py-3 bg-gradient-to-r from-flux-primary to-indigo-700 hover:from-indigo-500 hover:to-flux-primary font-medium rounded-lg transition transform hover:scale-[1.03]">
211
+ Generate Image
212
+ </button>
213
+ </div>
214
+ </div>
215
+ </div>
216
+
217
+ <!-- Preview Panel -->
218
+ <div>
219
+ <div class="flex justify-between items-center mb-4">
220
+ <h2 class="text-xl font-semibold">Preview</h2>
221
+ <div class="text-sm bg-flux-dark px-2 py-1 rounded">Seed: 398401</div>
222
+ </div>
223
+
224
+ <div class="aspect-square bg-slate-900 rounded-xl border-2 border-dashed border-slate-700 flex flex-col items-center justify-center">
225
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 text-slate-500 mb-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
226
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
227
+ </svg>
228
+ <p class="text-slate-500 text-center max-w-xs px-4">Your generated image will appear here. Click "Generate" to create.</p>
229
+ </div>
230
+
231
+ <div class="flex gap-2 mt-3">
232
+ <button class="flex-1 py-2 bg-slate-700 hover:bg-slate-600 rounded-lg transition">Save to Collection</button>
233
+ <button class="flex-1 py-2 bg-slate-700 hover:bg-slate-600 rounded-lg transition">Download</button>
234
+ <button class="w-10 h-10 flex items-center justify-center bg-slate-700 hover:bg-slate-600 rounded-lg transition">
235
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
236
+ <path d="M15 8a3 3 0 10-2.977-2.63l-4.94 2.47a3 3 0 100 4.319l4.94 2.47a3 3 0 10.895-1.789l-4.94-2.47a3.027 3.027 0 000-.74l4.94-2.47c.325.186.695.305 1.08.348A3.006 3.006 0 0015 8z" />
237
+ </svg>
238
+ </button>
239
+ </div>
240
+ </div>
241
+ </div>
242
+ </div>
243
+ </div>
244
+
245
+ <!-- Right Panel -->
246
+ <div class="lg:col-span-4 flex flex-col gap-6">
247
+ <!-- Settings Panel -->
248
+ <div class="bg-slate-800/50 backdrop-blur-sm rounded-xl p-5 border border-slate-700/50">
249
+ <div class="flex justify-between items-center mb-4">
250
+ <h2 class="text-xl font-semibold">Generation Parameters</h2>
251
+ <button id="settingsToggle" class="w-8 h-8 rounded-full bg-slate-700 flex items-center justify-center hover:bg-slate-600 transition">
252
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
253
+ <path fill-rule="evenodd" d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd" />
254
+ </svg>
255
+ </button>
256
+ </div>
257
+
258
+ <div id="settingsContent" class="space-y-4">
259
+ <div>
260
+ <label class="form-label">Steps</label>
261
+ <input type="range" min="10" max="50" value="28" class="w-full">
262
+ <div class="flex justify-between text-xs text-slate-400 px-1">
263
+ <span>10</span>
264
+ <span class="text-flux-primary font-medium">28</span>
265
+ <span>50</span>
266
+ </div>
267
+ </div>
268
+
269
+ <div>
270
+ <label class="form-label">CFG Scale</label>
271
+ <input type="range" min="1" max="20" step="0.5" value="3.5" class="w-full">
272
+ <div class="flex justify-between text-xs text-slate-400 px-1">
273
+ <
274
+ <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=Boobs00/loading" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
275
+ </html>