New CSS

app.py

@@ -247,23 +247,33 @@ examples = [
 ]
 
 css = """
+/* Define CSS Variables for Consistency */
+:root {
+    --main-bg-color: #1b1b1b;
+    --main-font: 'Cinzel', serif;
+    --text-color: #f5f5f5;
+    --highlight-color: #ffd700;
+    --accent-color: #8b4513;
+    --shadow-color: rgba(255, 223, 0, 0.8);
+}
+
 /* General body styling */
 body {
-    background-color: #1b1b1b;
-    font-family: 'Cinzel', serif;
-    color: #f5f5f5;
+    background-color: var(--main-bg-color);
+    font-family: var(--main-font);
+    color: var(--text-color);
     background-image: url('https://www.transparenttextures.com/patterns/dark-matter.png');
     margin: 0;
     padding: 0;
 }
 
-/* Container */
+/* Container Styling */
 #col-container {
     margin: 0 auto;
     max-width: 550px;
     padding: 20px;
-    border: 6px solid #8b4513;
-    background: radial-gradient(circle, #302d2b 0%, #3b3634 60%, #1b1b1b 100%);
+    border: 6px solid var(--accent-color);
+    background: radial-gradient(circle, #302d2b 0%, #3b3634 60%, var(--main-bg-color) 100%);
     border-radius: 20px;
     box-shadow: 0 0 30px rgba(0, 0, 0, 0.9), 0 0 15px rgba(139, 69, 19, 0.7);
     transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
@@ -271,21 +281,22 @@ body {
 
 #col-container:hover {
     transform: scale(1.03);
-    box-shadow: 0 0 40px rgba(255, 223, 0, 0.8), 0 0 20px rgba(255, 140, 0, 0.8);
+    box-shadow: 0 0 40px var(--shadow-color), 0 0 20px rgba(255, 140, 0, 0.8);
 }
 
-/* Fancy title and text effects */
+/* Fancy Text Effects for Titles */
 #col-container h1, #col-container h2, #col-container h3 {
     color: #ffebcc;
-    text-shadow: 0 0 10px #8b4513, 0 0 20px #ffd700;
+    text-shadow: 0 0 10px var(--accent-color), 0 0 20px var(--highlight-color);
 }
 
+/* Paragraph Text Styling */
 #col-container p {
     color: #dcdcdc;
     text-shadow: 0 0 6px rgba(139, 69, 19, 0.8);
 }
 
-/* Markdown links */
+/* Links in Markdown */
 #col-container a {
     color: #e6ac00;
     text-decoration: none;
@@ -295,13 +306,13 @@ body {
 
 #col-container a:hover {
     color: #fff700;
-    text-shadow: 0 0 10px #fff700, 0 0 20px #ffebcc;
+    text-shadow: 0 0 10px var(--highlight-color), 0 0 20px #ffebcc;
 }
 
-/* Buttons with D&D glowing effect */
+/* Button Effects */
 .gr-button {
-    background-color: #8b4513;
-    color: #f5f5f5;
+    background-color: var(--accent-color);
+    color: var(--text-color);
     font-weight: bold;
     padding: 10px 20px;
     border: 2px solid #b8860b;
@@ -313,60 +324,39 @@ body {
 .gr-button:hover {
     background-color: #b8860b;
     transform: scale(1.05);
-    box-shadow: 0 0 12px rgba(255, 223, 0, 0.9), 0 0 24px rgba(255, 140, 0, 0.7);
+    box-shadow: 0 0 12px var(--shadow-color), 0 0 24px rgba(255, 140, 0, 0.7);
 }
 
-/* Input and Dropdown styling */
+/* Input and Dropdown Styling */
 input, select, .gr-input, .gr-slider {
     background-color: #302d2b;
-    color: #f5f5f5;
-    border: 2px solid #8b4513;
+    color: var(--text-color);
+    border: 2px solid var(--accent-color);
     border-radius: 5px;
     padding: 8px 12px;
-    font-family: 'Cinzel', serif;
+    font-family: var(--main-font);
     transition: border-color 0.3s ease, box-shadow 0.3s ease;
 }
 
 input:focus, select:focus, .gr-input:focus, .gr-slider:focus {
     outline: none;
-    border-color: #ffd700;
-    box-shadow: 0 0 8px #ffd700;
-}
-
-/* Slider styling */
-.gr-slider > div {
-    background-color: #8b4513 !important;
+    border-color: var(--highlight-color);
+    box-shadow: 0 0 8px var(--highlight-color);
 }
 
-/* Checkbox customization */
-.gr-checkbox-label {
+/* Advanced Element Styling */
+.gr-checkbox-label, .gr-accordion {
     font-weight: bold;
-    color: #f5f5f5;
+    color: var(--text-color);
     text-shadow: 0 0 5px rgba(139, 69, 19, 0.7);
 }
 
-/* Accordion effects */
-.gr-accordion {
-    background: linear-gradient(145deg, #302d2b, #3b3634);
-    color: #f5f5f5;
-    border: 2px solid #8b4513;
-    border-radius: 10px;
-    padding: 8px;
-    transition: all 0.3s ease;
-}
-
-.gr-accordion:hover {
-    box-shadow: 0 0 12px rgba(255, 223, 0, 0.7), 0 0 20px rgba(255, 140, 0, 0.5);
-}
-
-/* Image glow effect */
 .gr-image {
-    border: 4px solid #8b4513;
+    border: 4px solid var(--accent-color);
     border-radius: 10px;
-    box-shadow: 0 0 10px #8b4513, 0 0 20px #ffd700;
+    box-shadow: 0 0 10px var(--accent-color), 0 0 20px var(--highlight-color);
 }
 
-/* Add glow on hover for images */
 .gr-image:hover {
     box-shadow: 0 0 20px rgba(255, 140, 0, 0.7), 0 0 40px rgba(255, 223, 0, 0.9);
 }
@@ -378,14 +368,14 @@ with gr.Blocks(css=css) as demo:
         # Title and Description
         gr.Markdown(
             """
-            # 🛡️ ChatDnD.net D&D Map Generator ⚔️
+            # 🛡️ ChatDnD.net Dungeon 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)
             """
         )
 
-        # Prompt input and style selector
+        # Input and Style Selector
         with gr.Row():
             prompt = gr.Textbox(
                 label="🎲 Describe Your Vision:",
@@ -397,13 +387,13 @@ with gr.Blocks(css=css) as demo:
                 choices=STYLE_NAMES,
                 value=DEFAULT_STYLE_NAME,
             )
-        
-        # Run button and result display
+
+        # Action Button and Result
         with gr.Row():
             run_button = gr.Button("Generate Image")
         result = gr.Image(label="🖼️ Your Legendary Vision")
         
-        # Advanced settings
+        # Advanced Settings
         with gr.Accordion("⚙️ Advanced Settings", open=False):
             seed = gr.Slider(
                 label="Seed",
@@ -429,7 +419,7 @@ with gr.Blocks(css=css) as demo:
                     step=32,
                     value=1024,
                 )
-            
+
             num_inference_steps = gr.Slider(
                 label="Inference Steps",
                 minimum=1,
@@ -438,7 +428,7 @@ with gr.Blocks(css=css) as demo:
                 value=6,
             )
 
-        # Examples with styles
+        # Examples
         gr.Examples(
             examples=examples,
             inputs=[prompt, style],
@@ -455,5 +445,5 @@ with gr.Blocks(css=css) as demo:
         outputs=[result, seed],
     )
 
-# Launch the demo
+# Launch Application
 demo.launch()