CSS D&D Map update

app.py

@@ -234,6 +234,7 @@ def infer(
 
 # Example prompts
 examples = [
+    ["A 10x8 battle map located in Ravenloft", "D&D MAP"],
     ["A heroic adventurer wielding a flaming sword standing on a cliff", "D&D Art"],
     ["A mystical library with ancient scrolls and glowing runes", "Dark Fantasy"],
     ["A ferocious dragon breathing fire in a dark cavern", "Epic Battle"],
@@ -241,20 +242,137 @@ examples = [
 
 # Custom CSS for a Dungeons & Dragons theme
 css = """
+/* Background settings */
 body {
     background-color: #1b1b1b;
     font-family: 'Cinzel', serif;
-    color: #f4a261;
+    color: #f5f5f5;
     background-image: url('https://www.transparenttextures.com/patterns/dark-matter.png');
 }
+
+/* Main container styling */
 #col-container {
     margin: 0 auto;
-    max-width: 550px;
+    max-width: 650px;
     padding: 15px;
     border: 4px solid #8b4513;
     background: linear-gradient(145deg, #2e2b2a, #3a3433);
     border-radius: 15px;
-    box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
+    box-shadow: 0 0 30px rgba(0, 0, 0, 0.8);
+}
+
+/* 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;
+}
+
+p, label {
+    font-family: 'Cormorant', serif;
+    font-size: 1.2em;
+    color: #e5e5e5;
+}
+
+/* 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;
+    font-weight: bold;
+    cursor: pointer;
+    transition: 0.3s ease-in-out;
+    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);
+}
+
+button:hover {
+    background-color: #e76f51;
+    color: #1b1b1b;
+    box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.5);
+    transform: scale(1.05);
+}
+
+/* Textbox styling */
+textarea, input[type="text"] {
+    background-color: #3a3433;
+    border: 2px solid #8b4513;
+    border-radius: 5px;
+    color: #f5f5f5;
+    padding: 10px;
+    font-size: 1.1em;
+    font-family: 'Cormorant', serif;
+    width: 100%;
+    transition: border-color 0.3s ease-in-out;
+}
+
+textarea:hover, input[type="text"]:hover {
+    border-color: #e76f51;
+}
+
+/* Dropdown styling */
+select {
+    background-color: #3a3433;
+    color: #f5f5f5;
+    border: 2px solid #8b4513;
+    padding: 10px;
+    border-radius: 5px;
+    font-family: 'Cinzel', serif;
+    transition: 0.3s ease-in-out;
+}
+
+select:hover {
+    border-color: #e76f51;
+}
+
+/* Accordion styling */
+.accordion {
+    background: linear-gradient(145deg, #3a3433, #2e2b2a);
+    border-radius: 8px;
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
+}
+
+/* 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);
+}
+
+/* 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);
+}
+
+.progress-bar {
+    height: 100%;
+    background-color: #8b4513;
+    width: calc(var(--current) / var(--total) * 100%);
+    transition: width 0.5s ease-in-out;
+}
+
+.progress-bar:hover {
+    background-color: #e76f51;
 }
 """
 
@@ -264,8 +382,7 @@ with gr.Blocks(css=css) as demo:
         # Title and Description
         gr.Markdown(
             """
-            # 🛡️ ChatDnD.net 🛡️
-            # ⚔️ Dungeons & Dragons Image Generator ⚔️
+            # 🛡️ ChatDnD.net D&D Map Generator ⚔️
             **Unleash Your Imagination!** Create heroes, maps, quests, and epic scenes to bring your campaigns to life. 
             Tailored for adventurers seeking inspiration or Dungeon Masters constructing their next grand story. <br>
             [Visit Our Website](https://chatdnd.net) | [Support Us](https://buymeacoffee.com/watchoutformike)
@@ -281,21 +398,21 @@ with gr.Blocks(css=css) as demo:
             )
             style = gr.Dropdown(
                 label="🎨 Select a Style",
-                choices=STYLE_NAMES,
-                value=DEFAULT_STYLE_NAME,
+                choices=["Classic Fantasy", "Cartography", "Detailed Lore", "Minimalist Adventure"],
+                value="Classic Fantasy",
             )
         
         # Run button and result display
         with gr.Row():
-            run_button = gr.Button("Generate Image")
-        result = gr.Image(label="🖼️ Your Legendary Vision")
+            run_button = gr.Button("Generate Map")
+        result = gr.Image(label="🗺️ Your Fantasy Map")
         
         # Advanced settings
-        with gr.Accordion("⚙️ Advanced Settings", open=False):
+        with gr.Accordion("⚙️ Advanced Settings", open=False, elem_id="accordion"):
             seed = gr.Slider(
                 label="Seed",
                 minimum=0,
-                maximum=MAX_SEED,
+                maximum=1000000,
                 step=1,
                 value=0,
             )
@@ -305,42 +422,44 @@ with gr.Blocks(css=css) as demo:
                 width = gr.Slider(
                     label="Width",
                     minimum=256,
-                    maximum=MAX_IMAGE_SIZE,
+                    maximum=1536,
                     step=32,
                     value=1024,
                 )
                 height = gr.Slider(
                     label="Height",
                     minimum=256,
-                    maximum=MAX_IMAGE_SIZE,
+                    maximum=1536,
                     step=32,
-                    value=1024,
+                    value=768,
                 )
             
-            num_inference_steps = gr.Slider(
+            steps = gr.Slider(
                 label="Inference Steps",
                 minimum=1,
                 maximum=50,
                 step=1,
-                value=4,
+                value=20,
             )
 
         # Examples with styles
         gr.Examples(
-            examples=examples,
+            examples=[
+                ["Dragon's Lair, mountain region", "Classic Fantasy"],
+                ["Enchanted Forest", "Detailed Lore"],
+                ["Ancient Dungeon, lava flows", "Cartography"],
+            ],
             inputs=[prompt, style],
             outputs=[result],
-            fn=infer,
-            cache_examples="lazy",
         )
 
     # Interactivity
     gr.on(
         triggers=[run_button.click, prompt.submit],
-        fn=infer,
-        inputs=[prompt, style, seed, randomize_seed, width, height, num_inference_steps],
-        outputs=[result, seed],
+        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],
     )
 
 # Launch the demo
-demo.launch()
+demo.launch()