css

app.py

@@ -2,153 +2,147 @@ import gradio as gr
 from PIL import Image
 import time
 
-# --- D&D Themed Image Generator ---
-
-# Load the model (using Gradio's recommended method)
-#  Make sure the model ID is correct!
-try:
-    model = gr.load("models/prashanth970/flux-lora-uncensored")
-except Exception as e:
-    print(f"Error loading model: {e}")
-    model = None  # Set model to None to prevent errors later
-
-# Function to generate the image (with error handling)
-def generate_image(prompt):
-    """Generates an image based on the prompt, handling potential errors."""
-    if model is None:
-        return "Error: Model could not be loaded.  Please check the model ID and your network connection."
-
-    try:
-        image = model(prompt)
-        return image
-    except Exception as e:
-        return f"An error occurred during image generation: {e}"
-
-
-# Custom CSS for a D&D theme
+# Load the model from Hugging Face
+model = gr.load("models/prashanth970/flux-lora-uncensored")
+
+# Define Gradio interface with a loading animation
+def model_with_loading(prompt):
+    # Simulate a loading animation for immersion
+    print("✨ Summoning the arcane energies to manifest your vision... ✨")
+    time.sleep(2)  # Simulate processing time
+    result = model(prompt)
+    return result
+
+# Custom CSS for D&D theme
 custom_css = """
 @import url('https://fonts.googleapis.com/css2?family=MedievalSharp&display=swap');
 
-/* General Styles */
-.dnd-container {
-    background-color: #2c2c2c;
-    border-radius: 15px;
-    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
-    padding: 20px;
+/* Global Styles */
+body {
+    background: url('https://i.imgur.com/1Q3xL9m.jpg') no-repeat center center fixed; /* Faux parchment texture */
+    background-size: cover;
+    color: #f5f5f5;
     font-family: 'MedievalSharp', cursive;
+    margin: 0;
+    padding: 0;
 }
 
-.dnd-title {
-    color: #ffd700;
-    font-size: 32px;
-    font-weight: bold;
-    text-align: center;
-    margin-bottom: 20px;
-}
-
-.dnd-description {
-    color: #ffd700;
-    font-size: 20px;
-    text-align: center;
-    margin-bottom: 20px;
+.gradio-container {
+    background-color: rgba(0, 0, 0, 0.8);
+    border-radius: 15px;
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
+    padding: 20px;
+    max-width: 800px;
+    margin: 0 auto;
+    margin-top: 50px;
+    border: 4px solid #8b4513;
 }
 
-/* Input Textbox */
-.dnd-input textarea {
-    background-color: #3c3c3c;
-    color: #d1b579; /* Lighter text for better readability */
-    border: 2px solid #8b4513;
+/* Buttons */
+.gr-button {
+    background-color: #8b4513;
+    color: #f5f5f5;
+    border: none;
     border-radius: 8px;
-    padding: 12px;
+    padding: 12px 24px;
     font-size: 18px;
-    width: 100%;
-    box-sizing: border-box;
+    cursor: pointer;
+    transition: background-color 0.3s, transform 0.3s;
     font-family: 'MedievalSharp', cursive;
-    overflow-y: auto; /* Add scrollbar for long text */
-    resize: vertical; /* Allow vertical resizing */
 }
 
-.dnd-input textarea::placeholder {
-    color: #a39166; /* Slightly darker placeholder */
+.gr-button:hover {
+    background-color: #a0522d;
+    transform: scale(1.05);
 }
 
-/* Generate Button */
-.dnd-button button {
-    background-color: #8b4513;
+/* Textbox */
+.gr-textbox {
+    background-color: #3c3c3c;
     color: #f5f5f5;
-    border: none;
+    border: 2px solid #8b4513;
     border-radius: 8px;
-    padding: 12px 24px;
+    padding: 12px;
     font-size: 18px;
-    cursor: pointer;
-    transition: background-color 0.3s;
-    width: 100%; /* Make button fill the container */
+    width: 100%;
+    box-sizing: border-box;
     font-family: 'MedievalSharp', cursive;
 }
 
-.dnd-button button:hover {
-    background-color: #a0522d;
+.gr-textbox::placeholder {
+    color: #d3d3d3;
 }
 
-/* Output Image */
-.dnd-output img {
+/* Image Outputs */
+.gr-image {
     border: 4px solid #8b4513;
     border-radius: 15px;
     margin-top: 20px;
-    display: block; /* Ensure image is treated as a block for centering */
-    margin-left: auto;
-    margin-right: auto;
+    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5);
 }
 
-/* Output Label */
-.dnd-output div[data-testid='label'] {
-    text-align: center; /* Center the output label */
+/* Titles and Headings */
+.gr-title {
     color: #ffd700;
-    font-size: 18px;
+    font-size: 36px;
+    font-weight: bold;
+    text-align: center;
+    margin-bottom: 20px;
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
+}
+
+.gr-description {
+    color: #ffd700;
+    font-size: 20px;
+    text-align: center;
+    margin-bottom: 20px;
+    font-family: 'MedievalSharp', cursive;
 }
 
 /* Links */
-.dnd-link {
+.gr-link {
     color: #ffd700;
     text-decoration: underline;
-     font-family: 'MedievalSharp', cursive;
     font-size: 18px;
-
+    font-family: 'MedievalSharp', cursive;
 }
 
-.dnd-link:hover {
+.gr-link:hover {
     color: #ffa500;
-      font-family: 'MedievalSharp', cursive;
 }
 
+/* Loading Animation */
+.loading-message {
+    color: #ffd700;
+    font-size: 18px;
+    text-align: center;
+    margin-top: 20px;
+    font-family: 'MedievalSharp', cursive;
+    animation: flicker 1.5s infinite alternate;
+}
+
+@keyframes flicker {
+    0% { opacity: 1; }
+    100% { opacity: 0.8; }
+}
 """
 
-# Gradio Interface
+# Define Gradio interface
 iface = gr.Interface(
-    fn=generate_image,
+    fn=model_with_loading,
     inputs=gr.Textbox(
-        lines=3,
-        label="📜 Enter Your Quest:",
-        placeholder="Describe your scene, hero, or epic landscape...  Evoke the mists of Ravenloft, the sprawling city of Waterdeep, or the fiery depths of the Nine Hells!",
-        css=".dnd-input"  # Apply custom CSS to the input
-    ),
-    outputs=gr.Image(
-        type="pil",
-        label="🖼️ Your Legendary Vision",
-        css=".dnd-output"  # Apply custom CSS to the output
+        lines=5,
+        label="📜 Describe Your Adventure:",
+        placeholder="E.g., 'A dragon perched upon a mountain of gold, surrounded by mist and fire.'",
     ),
-    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.
-
-        [Visit Our Website](https://chatdnd.net) | [Support Us](https://buymeacoffee.com/watchoutformike)
-    """,
+    outputs=gr.Image(type="pil", label="✨ The Arcane Vision Appears ✨"),
+    title="⚔️ Dungeons & Dragons Artificer ⚔️",
+    description="**Conjure Your Imagination Into Reality!** Summon legendary heroes, create epic landscapes, or design fantastical creatures for your campaigns. Perfect for adventurers and Dungeon Masters alike. <br>"
+                "[Explore Our Lore](https://chatdnd.net) | [Support the Guild](https://buymeacoffee.com/watchoutformike)",
     css=custom_css,
-    theme=gr.themes.Soft(), #Added a soft theme to catch any styling
-
+    live=False,
+    allow_flagging="never"  # Disable flagging for simpler use
 )
 
 # Launch the interface
 iface.launch()
-