Update app.py

app.py

@@ -79,22 +79,21 @@ def chat_logic(message, history, system_prompt, context, max_tokens, temperature
     return "", history
 
 # ==========================================
-# 3. UI DESIGN (CLEAN WHITE & MINIMALIST BUTTON)
+# 3. UI DESIGN (FINAL CLEAN UP)
 # ==========================================
 
 CSS = """
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');
 
-/* --- GLOBAL RESETS --- */
+/* --- GLOBAL TRANSPARENCY & RESET --- */
 :root, .dark, body, .gradio-container {
     --body-text-color: #000000 !important;
     --body-background-fill: transparent !important;
-    --background-fill-primary: transparent !important;
+    --background-fill-primary: transparent !important; /* The culprit for dark blocks */
     --background-fill-secondary: transparent !important;
     --block-background-fill: transparent !important;
     --block-border-color: transparent !important;
     --input-background-fill: #ffffff !important;
-    --color-accent-soft: transparent !important;
 }
 
 body {
@@ -108,45 +107,47 @@ body {
 h1 { font-weight: 700 !important; color: #000000 !important; letter-spacing: -0.02em; }
 p, span, label { color: #374151 !important; }
 
-/* --- LEFT PANEL: CLEAN WHITE LOOK --- */
+/* --- LEFT PANEL: TOTAL TRANSPARENCY --- */
 .config-card {
-    background: rgba(255, 255, 255, 0.6) !important;
-    border: 1px solid rgba(255, 255, 255, 0.8) !important;
-    backdrop-filter: blur(12px);
+    /* Subtle glass effect, NO dark background */
+    background: rgba(255, 255, 255, 0.4) !important; 
+    border: 1px solid rgba(255, 255, 255, 0.5) !important;
+    backdrop-filter: blur(10px);
     border-radius: 24px;
     padding: 24px !important;
 }
 
-/* Remove annoying background bars from labels */
-.config-card .block, 
-.config-card .gr-block, 
+/* NUCLEAR: Force every container inside the config card to be transparent */
+.config-card div, 
+.config-card .gr-form, 
 .config-card .gr-box, 
 .config-card .gr-group, 
-.config-card .label-wrap {
+.config-card .gr-block, 
+.config-card .gr-panel {
     background: transparent !important;
+    background-color: transparent !important;
     border: none !important;
     box-shadow: none !important;
 }
 
-/* Textareas & Inputs: Pure White with Black Text */
+/* Inputs: Keep them White & Clean */
 .config-card textarea, 
 .config-card input[type="text"], 
 .config-card input[type="number"] {
     background-color: #ffffff !important;
+    opacity: 1 !important; /* Ensure they stay opaque */
     color: #000000 !important;
     border: 1px solid #e5e7eb !important;
     border-radius: 12px !important;
     box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
 }
 
-/* Labels: Simple Black Text */
+/* Labels: Clean Black Text */
 .config-card label span {
-    background: transparent !important;
     color: #000000 !important;
     font-weight: 700 !important;
     font-size: 0.85rem !important;
-    padding-left: 0 !important;
-    margin-bottom: 5px !important;
+    margin-bottom: 4px !important;
 }
 
 /* Sliders */
@@ -156,7 +157,7 @@ input[type=range] {
 
 /* --- RIGHT PANEL: CHAT WINDOW --- */
 .chat-window {
-    background: rgba(255, 255, 255, 0.9) !important;
+    background: rgba(255, 255, 255, 0.95) !important;
     border: 1px solid rgba(255, 255, 255, 0.9);
     backdrop-filter: blur(20px);
     border-radius: 24px;
@@ -174,7 +175,7 @@ input[type=range] {
 .yellow { background-color: #ffbd2e; }
 .green { background-color: #27c93f; }
 
-/* Chatbot */
+/* Chatbot Area */
 #chatbot {
     background: transparent !important;
     border: none !important;
@@ -206,19 +207,19 @@ input[type=range] {
     color: #000000 !important;
 }
 
-/* --- BUTTON FIX: REMOVING THE OVAL --- */
+/* Button: Minimalist Black Arrow */
 #send-btn {
-    background: transparent !important; /* Transparent background */
-    color: #000000 !important; /* Black Arrow */
+    background: transparent !important;
+    color: #000000 !important;
     border: none !important;
     box-shadow: none !important;
-    font-size: 1.5rem; /* Slightly larger arrow */
+    font-size: 1.6rem;
     padding: 0 10px !important;
     width: auto !important;
 }
 #send-btn:hover {
-    transform: translateX(3px); /* Subtle animation on hover */
-    color: #333333 !important;
+    transform: translateX(3px);
+    color: #333;
 }
 
 /* Logos */
@@ -265,6 +266,7 @@ with gr.Blocks(theme=gr.themes.Soft(), css=CSS, title="Custom AI") as demo:
                 """
             )
             
+            # Aquí aplicamos la clase config-card, pero el CSS ahora fuerza transparencia total dentro
             with gr.Group(elem_classes="config-card"):
                 gr.Markdown("### ⚙️ Settings")
                 
@@ -310,7 +312,6 @@ with gr.Blocks(theme=gr.themes.Soft(), css=CSS, title="Custom AI") as demo:
                         container=False,
                         autofocus=True
                     )
-                    # El botón ahora es transparente, solo la flecha
                     send_btn = gr.Button("➝", scale=1, elem_id="send-btn")
 
     inputs_list = [msg, chatbot, system_prompt_input, context_input, tokens_slider, temp_slider, top_p_slider]