Spaces:
Runtime error
Runtime error
Commit
·
bc077a4
1
Parent(s):
e175613
CSS Update D&D Map default
Browse files
app.py
CHANGED
@@ -242,137 +242,109 @@ examples = [
|
|
242 |
|
243 |
# Custom CSS for a Dungeons & Dragons theme
|
244 |
css = """
|
245 |
-
/* Background settings */
|
246 |
body {
|
247 |
background-color: #1b1b1b;
|
248 |
font-family: 'Cinzel', serif;
|
249 |
color: #f5f5f5;
|
250 |
background-image: url('https://www.transparenttextures.com/patterns/dark-matter.png');
|
|
|
|
|
251 |
}
|
252 |
|
253 |
-
/* Main container styling */
|
254 |
#col-container {
|
255 |
margin: 0 auto;
|
256 |
-
max-width:
|
257 |
padding: 15px;
|
258 |
border: 4px solid #8b4513;
|
259 |
background: linear-gradient(145deg, #2e2b2a, #3a3433);
|
260 |
border-radius: 15px;
|
261 |
-
box-shadow: 0 0
|
|
|
262 |
}
|
263 |
|
264 |
-
/*
|
265 |
-
|
266 |
-
|
267 |
-
|
268 |
-
text-shadow: 0 0 10px rgba(233, 196, 106, 0.8);
|
269 |
-
font-size: 3em;
|
270 |
-
text-align: center;
|
271 |
}
|
272 |
|
273 |
-
|
274 |
-
|
275 |
-
|
276 |
-
color: #e5e5e5;
|
277 |
}
|
278 |
|
279 |
-
/*
|
280 |
-
|
281 |
-
|
282 |
-
|
283 |
-
font-family: 'Cinzel', serif;
|
284 |
-
color: #fefae0;
|
285 |
-
padding: 10px 20px;
|
286 |
-
border-radius: 5px;
|
287 |
-
text-transform: uppercase;
|
288 |
font-weight: bold;
|
289 |
-
|
290 |
-
transition: 0.3s ease-in-out;
|
291 |
-
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);
|
292 |
}
|
293 |
|
294 |
-
|
295 |
-
|
296 |
-
|
297 |
-
box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.5);
|
298 |
-
transform: scale(1.05);
|
299 |
}
|
300 |
|
301 |
-
/*
|
302 |
-
|
303 |
-
background-color: #
|
304 |
-
border: 2px solid #8b4513;
|
305 |
-
border-radius: 5px;
|
306 |
color: #f5f5f5;
|
307 |
-
|
308 |
-
|
309 |
-
|
310 |
-
|
311 |
-
|
|
|
312 |
}
|
313 |
|
314 |
-
|
315 |
-
|
|
|
316 |
}
|
317 |
|
318 |
-
/*
|
319 |
-
select {
|
320 |
-
background-color: #
|
321 |
color: #f5f5f5;
|
322 |
border: 2px solid #8b4513;
|
323 |
-
padding: 10px;
|
324 |
border-radius: 5px;
|
|
|
325 |
font-family: 'Cinzel', serif;
|
326 |
-
transition: 0.3s ease-in-out;
|
327 |
}
|
328 |
|
329 |
-
select:
|
330 |
-
|
|
|
|
|
331 |
}
|
332 |
|
333 |
-
/*
|
334 |
-
.
|
335 |
-
background:
|
336 |
-
border-radius: 8px;
|
337 |
-
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
|
338 |
}
|
339 |
|
340 |
-
|
341 |
-
|
342 |
-
border: 4px solid #8b4513;
|
343 |
-
background: linear-gradient(145deg, #2e2b2a, #3a3433);
|
344 |
-
border-radius: 10px;
|
345 |
-
margin-top: 15px;
|
346 |
-
padding: 5px;
|
347 |
-
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.6);
|
348 |
-
}
|
349 |
-
|
350 |
-
/* Interactive hover effects on result images */
|
351 |
-
.gr-image-container:hover {
|
352 |
-
border-color: #e76f51;
|
353 |
-
box-shadow: 0 15px 25px rgba(0, 0, 0, 0.8);
|
354 |
}
|
355 |
|
356 |
-
|
357 |
-
|
358 |
-
|
359 |
-
height: 30px;
|
360 |
-
background-color: #3a3433;
|
361 |
-
border-radius: 15px;
|
362 |
-
overflow: hidden;
|
363 |
-
margin-bottom: 20px;
|
364 |
-
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);
|
365 |
}
|
366 |
|
367 |
-
|
368 |
-
|
369 |
-
background
|
370 |
-
|
371 |
-
|
|
|
|
|
372 |
}
|
373 |
|
374 |
-
.
|
375 |
-
|
376 |
}
|
377 |
"""
|
378 |
|
@@ -398,21 +370,21 @@ with gr.Blocks(css=css) as demo:
|
|
398 |
)
|
399 |
style = gr.Dropdown(
|
400 |
label="🎨 Select a Style",
|
401 |
-
choices=
|
402 |
-
value=
|
403 |
)
|
404 |
|
405 |
# Run button and result display
|
406 |
with gr.Row():
|
407 |
-
run_button = gr.Button("Generate
|
408 |
-
result = gr.Image(label="
|
409 |
|
410 |
# Advanced settings
|
411 |
-
with gr.Accordion("⚙️ Advanced Settings", open=False
|
412 |
seed = gr.Slider(
|
413 |
label="Seed",
|
414 |
minimum=0,
|
415 |
-
maximum=
|
416 |
step=1,
|
417 |
value=0,
|
418 |
)
|
@@ -422,43 +394,41 @@ with gr.Blocks(css=css) as demo:
|
|
422 |
width = gr.Slider(
|
423 |
label="Width",
|
424 |
minimum=256,
|
425 |
-
maximum=
|
426 |
step=32,
|
427 |
value=1024,
|
428 |
)
|
429 |
height = gr.Slider(
|
430 |
label="Height",
|
431 |
minimum=256,
|
432 |
-
maximum=
|
433 |
step=32,
|
434 |
-
value=
|
435 |
)
|
436 |
|
437 |
-
|
438 |
label="Inference Steps",
|
439 |
minimum=1,
|
440 |
maximum=50,
|
441 |
step=1,
|
442 |
-
value=
|
443 |
)
|
444 |
|
445 |
# Examples with styles
|
446 |
gr.Examples(
|
447 |
-
examples=
|
448 |
-
["Dragon's Lair, mountain region", "Classic Fantasy"],
|
449 |
-
["Enchanted Forest", "Detailed Lore"],
|
450 |
-
["Ancient Dungeon, lava flows", "Cartography"],
|
451 |
-
],
|
452 |
inputs=[prompt, style],
|
453 |
outputs=[result],
|
|
|
|
|
454 |
)
|
455 |
|
456 |
# Interactivity
|
457 |
gr.on(
|
458 |
triggers=[run_button.click, prompt.submit],
|
459 |
-
fn=
|
460 |
-
inputs=[prompt, style, seed, randomize_seed, width, height,
|
461 |
-
outputs=[result],
|
462 |
)
|
463 |
|
464 |
# Launch the demo
|
|
|
242 |
|
243 |
# Custom CSS for a Dungeons & Dragons theme
|
244 |
css = """
|
|
|
245 |
body {
|
246 |
background-color: #1b1b1b;
|
247 |
font-family: 'Cinzel', serif;
|
248 |
color: #f5f5f5;
|
249 |
background-image: url('https://www.transparenttextures.com/patterns/dark-matter.png');
|
250 |
+
margin: 0;
|
251 |
+
padding: 0;
|
252 |
}
|
253 |
|
|
|
254 |
#col-container {
|
255 |
margin: 0 auto;
|
256 |
+
max-width: 550px;
|
257 |
padding: 15px;
|
258 |
border: 4px solid #8b4513;
|
259 |
background: linear-gradient(145deg, #2e2b2a, #3a3433);
|
260 |
border-radius: 15px;
|
261 |
+
box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
|
262 |
+
transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
|
263 |
}
|
264 |
|
265 |
+
/* Hover effect for #col-container */
|
266 |
+
#col-container:hover {
|
267 |
+
transform: scale(1.02);
|
268 |
+
box-shadow: 0 0 30px rgba(139, 69, 19, 0.9);
|
|
|
|
|
|
|
269 |
}
|
270 |
|
271 |
+
#col-container h1, #col-container h2, #col-container h3 {
|
272 |
+
color: #e6e6e6;
|
273 |
+
text-shadow: 2px 2px 8px rgba(139, 69, 19, 0.8);
|
|
|
274 |
}
|
275 |
|
276 |
+
/* Markdown links customization */
|
277 |
+
#col-container a {
|
278 |
+
color: #b8860b;
|
279 |
+
text-decoration: none;
|
|
|
|
|
|
|
|
|
|
|
280 |
font-weight: bold;
|
281 |
+
transition: color 0.3s ease-in-out, text-shadow 0.3s ease-in-out;
|
|
|
|
|
282 |
}
|
283 |
|
284 |
+
#col-container a:hover {
|
285 |
+
color: #e6ac00;
|
286 |
+
text-shadow: 0 0 8px #e6ac00, 0 0 15px #e6ac00;
|
|
|
|
|
287 |
}
|
288 |
|
289 |
+
/* Button styling */
|
290 |
+
.gr-button {
|
291 |
+
background-color: #8b4513;
|
|
|
|
|
292 |
color: #f5f5f5;
|
293 |
+
font-weight: bold;
|
294 |
+
padding: 10px 20px;
|
295 |
+
border: 2px solid #b8860b;
|
296 |
+
border-radius: 8px;
|
297 |
+
cursor: pointer;
|
298 |
+
transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
|
299 |
}
|
300 |
|
301 |
+
.gr-button:hover {
|
302 |
+
background-color: #b8860b;
|
303 |
+
box-shadow: 0 0 10px rgba(255, 165, 0, 0.8);
|
304 |
}
|
305 |
|
306 |
+
/* Inputs and dropdowns */
|
307 |
+
input, select, .gr-input, .gr-slider {
|
308 |
+
background-color: #2e2b2a;
|
309 |
color: #f5f5f5;
|
310 |
border: 2px solid #8b4513;
|
|
|
311 |
border-radius: 5px;
|
312 |
+
padding: 5px 10px;
|
313 |
font-family: 'Cinzel', serif;
|
314 |
+
transition: border 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
|
315 |
}
|
316 |
|
317 |
+
input:focus, select:focus, .gr-input:focus, .gr-slider:focus {
|
318 |
+
outline: none;
|
319 |
+
border-color: #b8860b;
|
320 |
+
box-shadow: 0 0 10px #b8860b;
|
321 |
}
|
322 |
|
323 |
+
/* Slider and checkbox */
|
324 |
+
.gr-slider > div {
|
325 |
+
background-color: #8b4513 !important;
|
|
|
|
|
326 |
}
|
327 |
|
328 |
+
.gr-checkbox {
|
329 |
+
color: #f5f5f5;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
330 |
}
|
331 |
|
332 |
+
.gr-checkbox-label {
|
333 |
+
font-weight: bold;
|
334 |
+
color: #f5f5f5;
|
|
|
|
|
|
|
|
|
|
|
|
|
335 |
}
|
336 |
|
337 |
+
/* Accordion */
|
338 |
+
.gr-accordion {
|
339 |
+
background: linear-gradient(145deg, #302d2b, #3b3634);
|
340 |
+
color: #f5f5f5;
|
341 |
+
border: 2px solid #8b4513;
|
342 |
+
border-radius: 8px;
|
343 |
+
transition: all 0.3s ease;
|
344 |
}
|
345 |
|
346 |
+
.gr-accordion:hover {
|
347 |
+
box-shadow: 0 0 10px rgba(139, 69, 19, 0.8);
|
348 |
}
|
349 |
"""
|
350 |
|
|
|
370 |
)
|
371 |
style = gr.Dropdown(
|
372 |
label="🎨 Select a Style",
|
373 |
+
choices=STYLE_NAMES,
|
374 |
+
value=DEFAULT_STYLE_NAME,
|
375 |
)
|
376 |
|
377 |
# Run button and result display
|
378 |
with gr.Row():
|
379 |
+
run_button = gr.Button("Generate Image")
|
380 |
+
result = gr.Image(label="🖼️ Your Legendary Vision")
|
381 |
|
382 |
# Advanced settings
|
383 |
+
with gr.Accordion("⚙️ Advanced Settings", open=False):
|
384 |
seed = gr.Slider(
|
385 |
label="Seed",
|
386 |
minimum=0,
|
387 |
+
maximum=MAX_SEED,
|
388 |
step=1,
|
389 |
value=0,
|
390 |
)
|
|
|
394 |
width = gr.Slider(
|
395 |
label="Width",
|
396 |
minimum=256,
|
397 |
+
maximum=MAX_IMAGE_SIZE,
|
398 |
step=32,
|
399 |
value=1024,
|
400 |
)
|
401 |
height = gr.Slider(
|
402 |
label="Height",
|
403 |
minimum=256,
|
404 |
+
maximum=MAX_IMAGE_SIZE,
|
405 |
step=32,
|
406 |
+
value=1024,
|
407 |
)
|
408 |
|
409 |
+
num_inference_steps = gr.Slider(
|
410 |
label="Inference Steps",
|
411 |
minimum=1,
|
412 |
maximum=50,
|
413 |
step=1,
|
414 |
+
value=4,
|
415 |
)
|
416 |
|
417 |
# Examples with styles
|
418 |
gr.Examples(
|
419 |
+
examples=examples,
|
|
|
|
|
|
|
|
|
420 |
inputs=[prompt, style],
|
421 |
outputs=[result],
|
422 |
+
fn=infer,
|
423 |
+
cache_examples="lazy",
|
424 |
)
|
425 |
|
426 |
# Interactivity
|
427 |
gr.on(
|
428 |
triggers=[run_button.click, prompt.submit],
|
429 |
+
fn=infer,
|
430 |
+
inputs=[prompt, style, seed, randomize_seed, width, height, num_inference_steps],
|
431 |
+
outputs=[result, seed],
|
432 |
)
|
433 |
|
434 |
# Launch the demo
|