css

app.py

@@ -3,12 +3,14 @@ import gradio as gr
 # Load the model
 model = gr.load("models/strangerzonehf/Flux-Midjourney-Mix2-LoRA")
 
-# Enhanced D&D-themed CSS with previously used styles and new additions
+# Updated CSS with new additions
 custom_css = """
+@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=Uncial+Antiqua&display=swap');
+
 body {
     background-color: #1b1b1b; /* Dungeon-like backdrop */
     color: #f5f5f5;
-    font-family: 'Palatino Linotype', serif; /* Fantasy-themed font */
+    font-family: 'Cinzel', serif; /* Fantasy-themed font */
     margin: 0;
     padding: 0;
     display: flex;
@@ -16,6 +18,7 @@ body {
     align-items: center;
     justify-content: flex-start;
     height: 100vh;
+    background-image: url('https://www.transparenttextures.com/patterns/dark-matter.png'); /* Subtle dungeon texture */
 }
 
 .gradio-container {
@@ -31,7 +34,8 @@ body {
 h1, h2 {
     color: #ffd700;
     text-align: center;
-    text-shadow: 2px 2px #7c5200; /* Gold shine effect */
+    font-family: 'Uncial Antiqua', serif; /* Ancient fantasy font */
+    text-shadow: 3px 3px #7c5200; /* Gold shine effect */
 }
 
 .description {
@@ -121,20 +125,47 @@ button:hover {
     color: #ffcc33;
     text-shadow: 2px 2px #ff9900;
 }
+
+@keyframes fadeIn {
+    0% { opacity: 0; }
+    100% { opacity: 1; }
+}
+
+.loading-animation {
+    text-align: center;
+    color: #ffd700;
+    font-size: 18px;
+    margin-top: 10px;
+    font-family: 'Uncial Antiqua', serif;
+    animation: fadeIn 1.5s ease-in-out infinite alternate;
+}
+"""
+
+# JavaScript for optional background music
+background_music = """
+<script>
+var audio = new Audio('https://www.fesliyanstudios.com/play-mp3/387');
+audio.loop = true;
+audio.volume = 0.5;
+audio.play();
+</script>
 """
 
-# Define Gradio interface with enhanced description and external links
+# Define Gradio interface with a loading animation
+def model_with_loading(prompt):
+    return model(prompt)
+
 iface = gr.Interface(
-    fn=model,
+    fn=model_with_loading,
     inputs=gr.Textbox(lines=3, label="🎲 Enter Your Quest:", placeholder="Describe your scene, hero, or epic landscape..."),
     outputs=gr.Image(type="pil", label="🖼️ Your Legendary Vision"),
     title="🛡️ Dungeons & Dragons Image Generator ⚔️",
     description="**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)",
-    css=custom_css
+    css=custom_css,
+    live=False
 )
 
-# Launch the Gradio interface
-iface.launch()
-
+# Launch the interface with background music
+iface.launch(inline=False)