Better UI.

app.py

@@ -320,61 +320,88 @@ def change_text_model(model_name: str=MODEL_PATH, use_client: bool=False, gguf_f
 # Custom CSS for neon purple theme
 css = """
 body {
-    background: linear-gradient(to right, #2E0854, #5B0E91);
-    color: #FFFFFF;
+    background: linear-gradient(45deg, #1a0033, #4d0099);
+    color: #e6ccff;
+    font-family: 'Arial', sans-serif;
 }
 .gradio-container {
     max-width: 1200px !important;
     margin: auto;
 }
 .gr-button {
-    background-color: #8A2BE2 !important;
-    border-color: #9B30FF !important;
+    background: linear-gradient(90deg, #8a2be2, #9400d3) !important;
+    border: none !important;
     color: white !important;
+    font-weight: bold;
+    transition: all 0.3s ease;
 }
 .gr-button:hover {
-    background-color: #9B30FF !important;
+    background: linear-gradient(90deg, #9400d3, #8a2be2) !important;
+    box-shadow: 0 0 15px #9400d3;
 }
 .gr-form {
     border-radius: 15px;
     padding: 20px;
-    background-color: #3C1361 !important;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    background-color: rgba(60, 19, 97, 0.7) !important;
+    box-shadow: 0 0 20px rgba(138, 43, 226, 0.4);
+    backdrop-filter: blur(10px);
 }
 .gr-box {
     border-radius: 15px;
-    background-color: #4B0082 !important;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    background-color: rgba(75, 0, 130, 0.7) !important;
+    box-shadow: 0 0 20px rgba(138, 43, 226, 0.4);
+    backdrop-filter: blur(5px);
 }
 .gr-padded {
     padding: 20px;
 }
 .gr-form label, .gr-form .label-wrap {
-    color: #E6E6FA !important;
+    color: #e6ccff !important;
+    font-weight: bold;
 }
 .gr-input, .gr-dropdown {
-    background-color: #2F0147 !important;
-    border-color: #8A2BE2 !important;
-    color: #FFFFFF !important;
+    background-color: rgba(47, 1, 71, 0.8) !important;
+    border: 2px solid #8a2be2 !important;
+    color: #ffffff !important;
+    border-radius: 8px;
 }
 .gr-input::placeholder {
-    color: #B19CD9 !important;
+    color: #b19cd9 !important;
 }
 .gr-checkbox {
-    background-color: #4B0082 !important;
-    border-color: #8A2BE2 !important;
+    background-color: #4b0082 !important;
+    border-color: #8a2be2 !important;
 }
 .gr-checkbox:checked {
-    background-color: #8A2BE2 !important;
+    background-color: #8a2be2 !important;
 }
 h1, h2, h3 {
-    color: #FFD700 !important;
+    color: #ffd700 !important;
+    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
+}
+.gr-block {
+    border: none !important;
+}
+.gr-accordion {
+    border: 2px solid #8a2be2;
+    border-radius: 10px;
+    overflow: hidden;
+}
+.gr-accordion summary {
+    background-color: rgba(75, 0, 130, 0.9);
+    color: #ffd700;
+    padding: 10px;
+    font-weight: bold;
+    cursor: pointer;
 }
 """
 
 # Gradio interface
-with gr.Blocks(css=css) as demo:
-    gr.HTML("<h1 style='text-align: center; color: #FFD700;'>JoyCaption Alpha One Mod</h1>")
+with gr.Blocks(css=css, theme=gr.themes.Soft()) as demo:
+    gr.HTML(
+        "<h1 style='text-align: center; color: #FFD700; text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);'>JoyCaption Alpha One Mod</h1>"
+        "<p style='text-align: center; color: #e6ccff;'>Generate captivating captions for your images!</p>"
+    )
     with gr.Row():
         with gr.Column(scale=1):
             with gr.Group():
@@ -397,9 +424,9 @@ with gr.Blocks(css=css) as demo:
                         value="any",
                     )
                 gr.Markdown("**Note:** Caption tone doesn't affect `rng-tags` and `training_prompt`.")
-                with gr.Accordion("Advanced", open=False):
+                with gr.Accordion("Advanced Settings", open=False):
                     with gr.Row():
-                        jc_text_model = gr.Dropdown(label="LLM Model", info="You can enter a huggingface model repo_id to want to use.",
+                        jc_text_model = gr.Dropdown(label="LLM Model", info="You can enter a Hugging Face model repo_id to use.",
                                                     choices=get_text_model(), value=get_text_model()[0],
                                                     allow_custom_value=True, interactive=True, min_width=320)
                         jc_gguf = gr.Dropdown(label=f"GGUF Filename", choices=[], value="",