Complete UI Redesign with Premium Glassmorphism Theme

app.py

@@ -473,22 +473,53 @@ def generate_pdf_report(history: list, logs: str) -> str | None:
     pdf.output(tf.name)
     return tf.name
 
+custom_theme = gr.themes.Base(
+    primary_hue="cyan",
+    secondary_hue="indigo",
+    neutral_hue="slate",
+    font=[gr.themes.GoogleFont("Outfit"), "sans-serif"],
+).set(
+    body_background_fill="linear-gradient(135deg, #09090b 0%, #18181b 100%)",
+    body_text_color="#f8fafc",
+    block_background_fill="rgba(39, 39, 42, 0.4)",
+    block_border_width="1px",
+    block_border_color="rgba(255, 255, 255, 0.08)",
+    block_radius="16px",
+    button_primary_background_fill="linear-gradient(135deg, #0ea5e9, #6366f1)",
+    button_primary_text_color="white",
+    button_primary_border_color="transparent",
+    button_secondary_background_fill="rgba(255, 255, 255, 0.05)",
+    button_secondary_border_color="rgba(255, 255, 255, 0.1)",
+    button_secondary_text_color="#f8fafc",
+    input_background_fill="rgba(0, 0, 0, 0.2)",
+    input_border_color="rgba(255, 255, 255, 0.1)",
+)
+
 CSS = """
-@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700&display=swap');
-
-.gradio-container { max-width: 1200px !important; margin: 0 auto !important; font-family: 'Outfit', sans-serif !important; background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important; color: #f8fafc !important; }
-body { background: #0f172a !important; }
-.main-header { text-align: center; padding: 24px 0 8px; animation: fadeIn 1s ease-in-out; }
-.main-header h1 { background: -webkit-linear-gradient(45deg, #38bdf8, #818cf8); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size: 3rem; font-weight: 700; margin: 0; }
-.main-header p { color: #94a3b8; font-size: 1.1rem; margin: 8px 0 0; }
-.upload-box { border: 2px dashed #334155; border-radius: 12px; padding: 20px; background: rgba(30, 41, 59, 0.7); text-align: center; min-height: 220px; }
-.upload-box label { color: #94a3b8 !important; font-size: 0.85rem; }
-.output-panel { background: rgba(30, 41, 59, 0.7); border-radius: 12px; padding: 20px; min-height: 400px; }
-.log-panel { background: rgba(15, 23, 42, 0.8) !important; border: 1px solid #334155; border-radius: 10px; padding: 14px; font-size: 12px; font-family: 'Courier New', monospace; color: #4ade80 !important; max-height: 300px; overflow-y: auto; line-height: 1.5; box-shadow: inset 0 2px 10px rgba(0,0,0,0.5); }
-.diagnose-btn { background: linear-gradient(90deg, #3b82f6, #6366f1) !important; border: none !important; font-size: 1.05rem !important; font-weight: 600 !important; padding: 12px 32px !important; border-radius: 8px !important; color: white !important; box-shadow: 0 4px 15px rgba(59,130,246,0.4) !important; transition: all 0.3s ease !important; }
-.diagnose-btn:hover { transform: translateY(-2px) !important; box-shadow: 0 6px 20px rgba(99,102,241,0.6) !important; }
+.gradio-container { max-width: 1200px !important; margin: 0 auto !important; }
+body { background: transparent !important; }
+.main-header { text-align: center; padding: 30px 0 10px; animation: fadeInDown 0.8s ease-out; }
+.main-header h1 { background: -webkit-linear-gradient(45deg, #0ea5e9, #818cf8); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size: 3.5rem; font-weight: 800; margin: 0; letter-spacing: -1px; }
+.main-header p { color: #94a3b8; font-size: 1.15rem; margin: 8px 0 0; font-weight: 300; }
+
+.upload-box, .output-panel { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4); }
+.upload-box { border: 2px dashed rgba(255, 255, 255, 0.15) !important; padding: 25px; text-align: center; min-height: 240px; transition: all 0.3s ease; }
+.upload-box:hover { border-color: #0ea5e9 !important; background: rgba(39, 39, 42, 0.6) !important; }
+
+.chatbot { border: none !important; background: transparent !important; }
+.message.user { background: linear-gradient(135deg, rgba(14, 165, 233, 0.15), rgba(99, 102, 241, 0.15)) !important; border: 1px solid rgba(14, 165, 233, 0.3) !important; }
+.message.bot { background: rgba(0, 0, 0, 0.2) !important; border: 1px solid rgba(255, 255, 255, 0.05) !important; }
+
+.log-panel { background: rgba(9, 9, 11, 0.8) !important; border: 1px solid rgba(255, 255, 255, 0.05) !important; border-radius: 12px; padding: 16px; font-size: 12.5px; font-family: 'JetBrains Mono', 'Courier New', monospace; color: #34d399 !important; box-shadow: inset 0 4px 20px rgba(0,0,0,0.6); line-height: 1.6; max-height: 300px; overflow-y: auto; }
+
+.diagnose-btn { box-shadow: 0 4px 20px rgba(14, 165, 233, 0.3) !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; }
+.diagnose-btn:hover { transform: translateY(-3px) scale(1.02) !important; box-shadow: 0 8px 25px rgba(14, 165, 233, 0.5) !important; }
+
+.test-gallery img { border-radius: 12px; border: 2px solid transparent; transition: all 0.4s ease; cursor: pointer; }
+.test-gallery img:hover { border-color: #0ea5e9; transform: scale(1.08) translateY(-4px); box-shadow: 0 10px 20px rgba(0,0,0,0.4); }
+
 footer { visibility: hidden; }
-@keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
+@keyframes fadeInDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
 """
 
 def create_gradio_ui():
@@ -534,7 +565,7 @@ def create_gradio_ui():
         hist = (hist or []) + [{"role": "user", "content": "👤 " + (msg or "[Image]")}, {"role": "assistant", "content": "🤖 " + answer}]
         return hist, "", state, logs
 
-    with gr.Blocks(title="HyperDerm — AI Dermatology", css=CSS, theme=gr.themes.Soft()) as gradio_ui_blocks:
+    with gr.Blocks(title="HyperDerm — AI Dermatology", css=CSS, theme=custom_theme) as gradio_ui_blocks:
         gr.HTML('<div class="main-header"><h1>🏥 HyperDerm</h1><p>AI Dermatology — Neo4j Graph + NVIDIA Vision · 245 Diseases · 5 Agents</p></div>')
 
         with gr.Row(equal_height=True):