CSS Update D&D Map default

app.py

@@ -242,137 +242,109 @@ examples = [
 
 # Custom CSS for a Dungeons & Dragons theme
 css = """
-/* Background settings */
 body {
     background-color: #1b1b1b;
     font-family: 'Cinzel', serif;
     color: #f5f5f5;
     background-image: url('https://www.transparenttextures.com/patterns/dark-matter.png');
+    margin: 0;
+    padding: 0;
 }
 
-/* Main container styling */
 #col-container {
     margin: 0 auto;
-    max-width: 650px;
+    max-width: 550px;
     padding: 15px;
     border: 4px solid #8b4513;
     background: linear-gradient(145deg, #2e2b2a, #3a3433);
     border-radius: 15px;
-    box-shadow: 0 0 30px rgba(0, 0, 0, 0.8);
+    box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
+    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
 }
 
-/* Text styles */
-h1 {
-    font-family: 'Cinzel Decorative', serif;
-    color: #e9c46a;
-    text-shadow: 0 0 10px rgba(233, 196, 106, 0.8);
-    font-size: 3em;
-    text-align: center;
+/* Hover effect for #col-container */
+#col-container:hover {
+    transform: scale(1.02);
+    box-shadow: 0 0 30px rgba(139, 69, 19, 0.9);
 }
 
-p, label {
-    font-family: 'Cormorant', serif;
-    font-size: 1.2em;
-    color: #e5e5e5;
+#col-container h1, #col-container h2, #col-container h3 {
+    color: #e6e6e6;
+    text-shadow: 2px 2px 8px rgba(139, 69, 19, 0.8);
 }
 
-/* Button styling */
-button {
-    background-color: #8b4513;
-    border: 2px solid #e76f51;
-    font-family: 'Cinzel', serif;
-    color: #fefae0;
-    padding: 10px 20px;
-    border-radius: 5px;
-    text-transform: uppercase;
+/* Markdown links customization */
+#col-container a {
+    color: #b8860b;
+    text-decoration: none;
     font-weight: bold;
-    cursor: pointer;
-    transition: 0.3s ease-in-out;
-    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);
+    transition: color 0.3s ease-in-out, text-shadow 0.3s ease-in-out;
 }
 
-button:hover {
-    background-color: #e76f51;
-    color: #1b1b1b;
-    box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.5);
-    transform: scale(1.05);
+#col-container a:hover {
+    color: #e6ac00;
+    text-shadow: 0 0 8px #e6ac00, 0 0 15px #e6ac00;
 }
 
-/* Textbox styling */
-textarea, input[type="text"] {
-    background-color: #3a3433;
-    border: 2px solid #8b4513;
-    border-radius: 5px;
+/* Button styling */
+.gr-button {
+    background-color: #8b4513;
     color: #f5f5f5;
-    padding: 10px;
-    font-size: 1.1em;
-    font-family: 'Cormorant', serif;
-    width: 100%;
-    transition: border-color 0.3s ease-in-out;
+    font-weight: bold;
+    padding: 10px 20px;
+    border: 2px solid #b8860b;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
 }
 
-textarea:hover, input[type="text"]:hover {
-    border-color: #e76f51;
+.gr-button:hover {
+    background-color: #b8860b;
+    box-shadow: 0 0 10px rgba(255, 165, 0, 0.8);
 }
 
-/* Dropdown styling */
-select {
-    background-color: #3a3433;
+/* Inputs and dropdowns */
+input, select, .gr-input, .gr-slider {
+    background-color: #2e2b2a;
     color: #f5f5f5;
     border: 2px solid #8b4513;
-    padding: 10px;
     border-radius: 5px;
+    padding: 5px 10px;
     font-family: 'Cinzel', serif;
-    transition: 0.3s ease-in-out;
+    transition: border 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
 }
 
-select:hover {
-    border-color: #e76f51;
+input:focus, select:focus, .gr-input:focus, .gr-slider:focus {
+    outline: none;
+    border-color: #b8860b;
+    box-shadow: 0 0 10px #b8860b;
 }
 
-/* Accordion styling */
-.accordion {
-    background: linear-gradient(145deg, #3a3433, #2e2b2a);
-    border-radius: 8px;
-    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
+/* Slider and checkbox */
+.gr-slider > div {
+    background-color: #8b4513 !important;
 }
 
-/* Image result styling */
-.gr-image-container {
-    border: 4px solid #8b4513;
-    background: linear-gradient(145deg, #2e2b2a, #3a3433);
-    border-radius: 10px;
-    margin-top: 15px;
-    padding: 5px;
-    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.6);
-}
-
-/* Interactive hover effects on result images */
-.gr-image-container:hover {
-    border-color: #e76f51;
-    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.8);
+.gr-checkbox {
+    color: #f5f5f5;
 }
 
-/* Progress bar styling */
-.progress-container {
-    width: 100%;
-    height: 30px;
-    background-color: #3a3433;
-    border-radius: 15px;
-    overflow: hidden;
-    margin-bottom: 20px;
-    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);
+.gr-checkbox-label {
+    font-weight: bold;
+    color: #f5f5f5;
 }
 
-.progress-bar {
-    height: 100%;
-    background-color: #8b4513;
-    width: calc(var(--current) / var(--total) * 100%);
-    transition: width 0.5s ease-in-out;
+/* Accordion */
+.gr-accordion {
+    background: linear-gradient(145deg, #302d2b, #3b3634);
+    color: #f5f5f5;
+    border: 2px solid #8b4513;
+    border-radius: 8px;
+    transition: all 0.3s ease;
 }
 
-.progress-bar:hover {
-    background-color: #e76f51;
+.gr-accordion:hover {
+    box-shadow: 0 0 10px rgba(139, 69, 19, 0.8);
 }
 """
 
@@ -398,21 +370,21 @@ with gr.Blocks(css=css) as demo:
             )
             style = gr.Dropdown(
                 label="🎨 Select a Style",
-                choices=["Classic Fantasy", "Cartography", "Detailed Lore", "Minimalist Adventure"],
-                value="Classic Fantasy",
+                choices=STYLE_NAMES,
+                value=DEFAULT_STYLE_NAME,
             )
         
         # Run button and result display
         with gr.Row():
-            run_button = gr.Button("Generate Map")
-        result = gr.Image(label="🗺️ Your Fantasy Map")
+            run_button = gr.Button("Generate Image")
+        result = gr.Image(label="🖼️ Your Legendary Vision")
         
         # Advanced settings
-        with gr.Accordion("⚙️ Advanced Settings", open=False, elem_id="accordion"):
+        with gr.Accordion("⚙️ Advanced Settings", open=False):
             seed = gr.Slider(
                 label="Seed",
                 minimum=0,
-                maximum=1000000,
+                maximum=MAX_SEED,
                 step=1,
                 value=0,
             )
@@ -422,43 +394,41 @@ with gr.Blocks(css=css) as demo:
                 width = gr.Slider(
                     label="Width",
                     minimum=256,
-                    maximum=1536,
+                    maximum=MAX_IMAGE_SIZE,
                     step=32,
                     value=1024,
                 )
                 height = gr.Slider(
                     label="Height",
                     minimum=256,
-                    maximum=1536,
+                    maximum=MAX_IMAGE_SIZE,
                     step=32,
-                    value=768,
+                    value=1024,
                 )
             
-            steps = gr.Slider(
+            num_inference_steps = gr.Slider(
                 label="Inference Steps",
                 minimum=1,
                 maximum=50,
                 step=1,
-                value=20,
+                value=4,
             )
 
         # Examples with styles
         gr.Examples(
-            examples=[
-                ["Dragon's Lair, mountain region", "Classic Fantasy"],
-                ["Enchanted Forest", "Detailed Lore"],
-                ["Ancient Dungeon, lava flows", "Cartography"],
-            ],
+            examples=examples,
             inputs=[prompt, style],
             outputs=[result],
+            fn=infer,
+            cache_examples="lazy",
         )
 
     # Interactivity
     gr.on(
         triggers=[run_button.click, prompt.submit],
-        fn=lambda prompt, style, seed, randomize_seed, width, height, steps: None,  # Replace with your actual function
-        inputs=[prompt, style, seed, randomize_seed, width, height, steps],
-        outputs=[result],
+        fn=infer,
+        inputs=[prompt, style, seed, randomize_seed, width, height, num_inference_steps],
+        outputs=[result, seed],
     )
 
 # Launch the demo