New CSS

app.py

@@ -11,7 +11,6 @@ import torch
 from PIL import Image
 import gradio as gr
 
-
 from diffusers import (
     DiffusionPipeline,
     AutoencoderTiny,
@@ -2148,19 +2147,20 @@ dtype = torch.bfloat16
 device = "cuda" if torch.cuda.is_available() else "cpu"
 base_model = "black-forest-labs/FLUX.1-dev"
 
-#TAEF1 is very tiny autoencoder which uses the same "latent API" as FLUX.1's VAE. FLUX.1 is useful for real-time previewing of the FLUX.1 generation process.#
+# TAEF1 is a very tiny autoencoder which uses the same "latent API" as FLUX.1's VAE.
 taef1 = AutoencoderTiny.from_pretrained("madebyollin/taef1", torch_dtype=dtype).to(device)
 good_vae = AutoencoderKL.from_pretrained(base_model, subfolder="vae", torch_dtype=dtype).to(device)
 pipe = DiffusionPipeline.from_pretrained(base_model, torch_dtype=dtype, vae=taef1).to(device)
-pipe_i2i = AutoPipelineForImage2Image.from_pretrained(base_model,
-                                                      vae=good_vae,
-                                                      transformer=pipe.transformer,
-                                                      text_encoder=pipe.text_encoder,
-                                                      tokenizer=pipe.tokenizer,
-                                                      text_encoder_2=pipe.text_encoder_2,
-                                                      tokenizer_2=pipe.tokenizer_2,
-                                                      torch_dtype=dtype
-                                                     )
+pipe_i2i = AutoPipelineForImage2Image.from_pretrained(
+    base_model,
+    vae=good_vae,
+    transformer=pipe.transformer,
+    text_encoder=pipe.text_encoder,
+    tokenizer=pipe.tokenizer,
+    text_encoder_2=pipe.text_encoder_2,
+    tokenizer_2=pipe.tokenizer_2,
+    torch_dtype=dtype
+)
 
 MAX_SEED = 2**32-1
 
@@ -2249,7 +2249,7 @@ def run_lora(prompt, image_input, image_strength, cfg_scale, steps, selected_ind
     selected_lora = loras[selected_index]
     lora_path = selected_lora["repo"]
     trigger_word = selected_lora["trigger_word"]
-    if(trigger_word):
+    if trigger_word:
         if "trigger_position" in selected_lora:
             if selected_lora["trigger_position"] == "prepend":
                 prompt_mash = f"{trigger_word} {prompt}"
@@ -2264,7 +2264,7 @@ def run_lora(prompt, image_input, image_strength, cfg_scale, steps, selected_ind
         pipe.unload_lora_weights()
         pipe_i2i.unload_lora_weights()
         
-    #LoRA weights flow
+    # LoRA weights flow
     with calculateDuration(f"Loading LoRA weights for {selected_lora['title']}"):
         pipe_to_use = pipe_i2i if image_input is not None else pipe
         weight_name = selected_lora.get("weights", None)
@@ -2279,8 +2279,7 @@ def run_lora(prompt, image_input, image_strength, cfg_scale, steps, selected_ind
         if randomize_seed:
             seed = random.randint(0, MAX_SEED)
             
-    if(image_input is not None):
-        
+    if image_input is not None:
         final_image = generate_image_to_image(prompt_mash, image_input, image_strength, steps, cfg_scale, width, height, lora_scale, seed)
         yield final_image, seed, gr.update(visible=False)
     else:
@@ -2289,7 +2288,7 @@ def run_lora(prompt, image_input, image_strength, cfg_scale, steps, selected_ind
         final_image = None
         step_counter = 0
         for image in image_generator:
-            step_counter+=1
+            step_counter += 1
             final_image = image
             progress_bar = f'<div class="progress-container"><div class="progress-bar" style="--current: {step_counter}; --total: {steps};"></div></div>'
             yield image, seed, gr.update(value=progress_bar, visible=True)
@@ -2298,19 +2297,15 @@ def run_lora(prompt, image_input, image_strength, cfg_scale, steps, selected_ind
         
 def get_huggingface_safetensors(link):
   split_link = link.split("/")
-  if(len(split_link) == 2):
+  if len(split_link) == 2:
             model_card = ModelCard.load(link)
             base_model = model_card.data.get("base_model")
             print(base_model)
       
-            #Allows Both
-            if((base_model != "black-forest-labs/FLUX.1-dev") and (base_model != "black-forest-labs/FLUX.1-schnell")):
+            # Allows Both
+            if (base_model != "black-forest-labs/FLUX.1-dev") and (base_model != "black-forest-labs/FLUX.1-schnell"):
                 raise Exception("Flux LoRA Not Found!")
                 
-            # Only allow "black-forest-labs/FLUX.1-dev"
-            #if base_model != "black-forest-labs/FLUX.1-dev":
-                #raise Exception("Only FLUX.1-dev is supported, other LoRA models are not allowed!")
-                
             image_path = model_card.data.get("widget", [{}])[0].get("output", {}).get("url", None)
             trigger_word = model_card.data.get("instance_prompt", "")
             image_url = f"https://huggingface.co/{link}/resolve/main/{image_path}" if image_path else None
@@ -2318,20 +2313,20 @@ def get_huggingface_safetensors(link):
             try:
                 list_of_files = fs.ls(link, detail=False)
                 for file in list_of_files:
-                    if(file.endswith(".safetensors")):
+                    if file.endswith(".safetensors"):
                         safetensors_name = file.split("/")[-1]
                     if (not image_url and file.lower().endswith((".jpg", ".jpeg", ".png", ".webp"))):
                       image_elements = file.split("/")
                       image_url = f"https://huggingface.co/{link}/resolve/main/{image_elements[-1]}"
             except Exception as e:
               print(e)
-              gr.Warning(f"You didn't include a link neither a valid Hugging Face repository with a *.safetensors LoRA")
-              raise Exception(f"You didn't include a link neither a valid Hugging Face repository with a *.safetensors LoRA")
+              gr.Warning("You didn't include a link neither a valid Hugging Face repository with a *.safetensors LoRA")
+              raise Exception("You didn't include a link neither a valid Hugging Face repository with a *.safetensors LoRA")
             return split_link[1], link, safetensors_name, trigger_word, image_url
 
 def check_custom_model(link):
-    if(link.startswith("https://")):
-        if(link.startswith("https://huggingface.co") or link.startswith("https://www.huggingface.co")):
+    if link.startswith("https://"):
+        if link.startswith("https://huggingface.co") or link.startswith("https://www.huggingface.co"):
             link_split = link.split("huggingface.co/")
             return get_huggingface_safetensors(link_split[1])
     else: 
@@ -2339,7 +2334,7 @@ def check_custom_model(link):
 
 def add_custom_lora(custom_lora):
     global loras
-    if(custom_lora):
+    if custom_lora:
         try:
             title, repo, path, trigger_word, image = check_custom_model(custom_lora)
             print(f"Loaded custom LoRA: {repo}")
@@ -2356,7 +2351,7 @@ def add_custom_lora(custom_lora):
             </div>
             '''
             existing_item_index = next((index for (index, item) in enumerate(loras) if item['repo'] == repo), None)
-            if(not existing_item_index):
+            if not existing_item_index:
                 new_item = {
                     "image": image,
                     "title": title,
@@ -2370,8 +2365,8 @@ def add_custom_lora(custom_lora):
         
             return gr.update(visible=True, value=card), gr.update(visible=True), gr.Gallery(selected_index=None), f"Custom: {path}", existing_item_index, trigger_word
         except Exception as e:
-            gr.Warning(f"Invalid LoRA: either you entered an invalid link, or a non-FLUX LoRA")
-            return gr.update(visible=True, value=f"Invalid LoRA: either you entered an invalid link, a non-FLUX LoRA"), gr.update(visible=False), gr.update(), "", None, ""
+            gr.Warning("Invalid LoRA: either you entered an invalid link, or a non-FLUX LoRA")
+            return gr.update(visible=True, value="Invalid LoRA: either you entered an invalid link, or a non-FLUX LoRA"), gr.update(visible=False), gr.update(), "", None, ""
     else:
         return gr.update(visible=False), gr.update(visible=False), gr.update(), "", None, ""
 
@@ -2380,22 +2375,74 @@ def remove_custom_lora():
 
 run_lora.zerogpu = True
 
+# ─── UPDATED CSS FOR A D&D THEME ─────────────────────────────────────────────────────────────
 css = '''
-#gen_btn{height: 100%}
-#gen_column{align-self: stretch}
-#title{text-align: center}
-#title h1{font-size: 3em; display:inline-flex; align-items:center; color: #ffd700;}
-#title img{width: 100px; margin-right: 0.5em}
-#gallery .grid-wrap{height: 10vh}
-#lora_list{background: var(--block-background-fill);padding: 0 1em .3em; font-size: 90%; color: #ffd700;}
-.card_internal{display: flex;height: 100px;margin-top: .5em; border: 2px solid #8b4513; background: #3a3a3a;}
-.card_internal img{margin-right: 1em; border-radius: 5px;}
-.styler{--form-gap-width: 0px !important}
-#progress{height:30px}
-#progress .generating{display:none}
-.progress-container {width: 100%;height: 30px;background-color: #f0f0f0;border-radius: 15px;overflow: hidden;margin-bottom: 20px}
-.progress-bar {height: 100%;background-color: #d2691e;width: calc(var(--current) / var(--total) * 100%);transition: width 0.5s ease-in-out}
-body {background: url('https://www.transparenttextures.com/patterns/black-linen.png') center; font-family: 'Cinzel', serif; color: #ffd700;}
+/* Button & Layout */
+#gen_btn { height: 100%; }
+#gen_column { align-self: stretch; }
+
+/* Title / Header */
+#title { text-align: center; margin-bottom: 20px; }
+#title h1 {
+    font-size: 3em;
+    display: inline-flex;
+    align-items: center;
+    color: #d4af37; /* Antique gold */
+    text-shadow: 2px 2px 4px #000000;
+}
+#title img { width: 100px; margin-right: 0.5em; }
+
+/* Gallery & LoRA List */
+#gallery .grid-wrap { height: 10vh; }
+#lora_list {
+    background: var(--block-background-fill);
+    padding: 0 1em 0.3em;
+    font-size: 90%;
+    color: #d4af37;
+    border: 1px solid #8b4513;
+}
+.card_internal {
+    display: flex;
+    height: 100px;
+    margin-top: 0.5em;
+    border: 2px solid #8b4513;
+    background: #f5f5dc; /* light parchment */
+    border-radius: 8px;
+    padding: 5px;
+}
+.card_internal img {
+    margin-right: 1em;
+    border-radius: 5px;
+    border: 1px solid #8b4513;
+}
+
+/* Progress Bar */
+#progress { height: 30px; margin-top: 10px; }
+#progress .generating { display: none; }
+.progress-container {
+    width: 100%;
+    height: 30px;
+    background-color: #deb887; /* burlywood */
+    border-radius: 15px;
+    overflow: hidden;
+    margin-bottom: 20px;
+}
+.progress-bar {
+    height: 100%;
+    background-color: #a0522d; /* sienna */
+    width: calc(var(--current) / var(--total) * 100%);
+    transition: width 0.5s ease-in-out;
+}
+
+/* Body / Overall Page Background */
+body {
+    /* A parchment/wood background for that medieval feel */
+    background: #fdf6e3 url('https://www.transparenttextures.com/patterns/purty-wood.png') repeat;
+    font-family: 'Cinzel', serif;
+    color: #4b3621;
+    margin: 0;
+    padding: 0;
+}
 '''
 
 with gr.Blocks(theme="YTheme/Minecraft", css=css, delete_cache=(60, 60)) as app:
@@ -2404,10 +2451,10 @@ with gr.Blocks(theme="YTheme/Minecraft", css=css, delete_cache=(60, 60)) as app:
     <div id="title">
         <h1>⚔️ ChatDnD.net ⚔️</h1>
         <p>
-            <strong>Unleash Your Imagination!</strong> 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>
-            <a href="https://chatdnd.net" target="_blank">Visit Our Website</a> | 
-            <a href="https://buymeacoffee.com/watchoutformike" target="_blank">Support Us</a>
+            <strong>Forge Your Destiny!</strong> Create legendary heroes, intricate maps, epic quests, and awe‐inspiring battle scenes.
+            Whether you’re an adventurer or a Dungeon Master, let your imagination run wild. <br>
+            <a href="https://chatdnd.net" target="_blank">Visit Our Keep</a> | 
+            <a href="https://buymeacoffee.com/watchoutformike" target="_blank">Support the Guild</a>
         </p>
     </div>
     """,
@@ -2418,9 +2465,9 @@ with gr.Blocks(theme="YTheme/Minecraft", css=css, delete_cache=(60, 60)) as app:
     with gr.Row():
         with gr.Column(scale=3):
             prompt = gr.Textbox(
-                label="🎲 Your Legendary Prompt",
+                label="🎲 Your Epic Prompt",
                 lines=1,
-                placeholder="Describe your hero, villain, or epic battle scene..."
+                placeholder="Describe your valiant hero, fearsome villain, or an epic clash of forces..."
             )
         with gr.Column(scale=1, elem_id="gen_column"):
             generate_button = gr.Button("Forge Your Vision", variant="primary", elem_id="gen_btn")
@@ -2429,7 +2476,7 @@ with gr.Blocks(theme="YTheme/Minecraft", css=css, delete_cache=(60, 60)) as app:
             selected_info = gr.Markdown("")
             gallery = gr.Gallery(
                 [(item["image"], item["title"]) for item in loras],
-                label="🛡️ LoRA Artifacts 🛡️",
+                label="🛡️ LoRA Artifacts",
                 allow_preview=False,
                 columns=3,
                 elem_id="gallery",
@@ -2441,7 +2488,7 @@ with gr.Blocks(theme="YTheme/Minecraft", css=css, delete_cache=(60, 60)) as app:
                     placeholder="prithivMLmods/Canopus-LoRA-Flux-Anime"
                 )
                 gr.Markdown(
-                    """[Explore FLUX Artifacts Collection 📜](https://huggingface.co/models?other=base_model:adapter:black-forest-labs/FLUX.1-dev)""",
+                    """[Explore our FLUX Artifacts Collection 📜](https://huggingface.co/models?other=base_model:adapter:black-forest-labs/FLUX.1-dev)""",
                     elem_id="lora_list"
                 )
             custom_lora_info = gr.HTML(visible=False)
@@ -2466,7 +2513,7 @@ with gr.Blocks(theme="YTheme/Minecraft", css=css, delete_cache=(60, 60)) as app:
                         minimum=1, maximum=20, step=0.5, value=3.5
                     )
                     steps = gr.Slider(
-                        label="⏱️ Steps for Generation",
+                        label="⏱️ Generation Steps",
                         minimum=1, maximum=50, step=1, value=28
                     )