WatchOutForMike commited on
Commit
bc077a4
·
1 Parent(s): e175613

CSS Update D&D Map default

Browse files
Files changed (1) hide show
  1. app.py +75 -105
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: 650px;
257
  padding: 15px;
258
  border: 4px solid #8b4513;
259
  background: linear-gradient(145deg, #2e2b2a, #3a3433);
260
  border-radius: 15px;
261
- box-shadow: 0 0 30px rgba(0, 0, 0, 0.8);
 
262
  }
263
 
264
- /* Text styles */
265
- h1 {
266
- font-family: 'Cinzel Decorative', serif;
267
- color: #e9c46a;
268
- text-shadow: 0 0 10px rgba(233, 196, 106, 0.8);
269
- font-size: 3em;
270
- text-align: center;
271
  }
272
 
273
- p, label {
274
- font-family: 'Cormorant', serif;
275
- font-size: 1.2em;
276
- color: #e5e5e5;
277
  }
278
 
279
- /* Button styling */
280
- button {
281
- background-color: #8b4513;
282
- border: 2px solid #e76f51;
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
- cursor: pointer;
290
- transition: 0.3s ease-in-out;
291
- box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);
292
  }
293
 
294
- button:hover {
295
- background-color: #e76f51;
296
- color: #1b1b1b;
297
- box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.5);
298
- transform: scale(1.05);
299
  }
300
 
301
- /* Textbox styling */
302
- textarea, input[type="text"] {
303
- background-color: #3a3433;
304
- border: 2px solid #8b4513;
305
- border-radius: 5px;
306
  color: #f5f5f5;
307
- padding: 10px;
308
- font-size: 1.1em;
309
- font-family: 'Cormorant', serif;
310
- width: 100%;
311
- transition: border-color 0.3s ease-in-out;
 
312
  }
313
 
314
- textarea:hover, input[type="text"]:hover {
315
- border-color: #e76f51;
 
316
  }
317
 
318
- /* Dropdown styling */
319
- select {
320
- background-color: #3a3433;
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:hover {
330
- border-color: #e76f51;
 
 
331
  }
332
 
333
- /* Accordion styling */
334
- .accordion {
335
- background: linear-gradient(145deg, #3a3433, #2e2b2a);
336
- border-radius: 8px;
337
- box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
338
  }
339
 
340
- /* Image result styling */
341
- .gr-image-container {
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
- /* Progress bar styling */
357
- .progress-container {
358
- width: 100%;
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
- .progress-bar {
368
- height: 100%;
369
- background-color: #8b4513;
370
- width: calc(var(--current) / var(--total) * 100%);
371
- transition: width 0.5s ease-in-out;
 
 
372
  }
373
 
374
- .progress-bar:hover {
375
- background-color: #e76f51;
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=["Classic Fantasy", "Cartography", "Detailed Lore", "Minimalist Adventure"],
402
- value="Classic Fantasy",
403
  )
404
 
405
  # Run button and result display
406
  with gr.Row():
407
- run_button = gr.Button("Generate Map")
408
- result = gr.Image(label="🗺️ Your Fantasy Map")
409
 
410
  # Advanced settings
411
- with gr.Accordion("⚙️ Advanced Settings", open=False, elem_id="accordion"):
412
  seed = gr.Slider(
413
  label="Seed",
414
  minimum=0,
415
- maximum=1000000,
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=1536,
426
  step=32,
427
  value=1024,
428
  )
429
  height = gr.Slider(
430
  label="Height",
431
  minimum=256,
432
- maximum=1536,
433
  step=32,
434
- value=768,
435
  )
436
 
437
- steps = gr.Slider(
438
  label="Inference Steps",
439
  minimum=1,
440
  maximum=50,
441
  step=1,
442
- value=20,
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=lambda prompt, style, seed, randomize_seed, width, height, steps: None, # Replace with your actual function
460
- inputs=[prompt, style, seed, randomize_seed, width, height, steps],
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