Update app.py

app.py

@@ -64,47 +64,61 @@ def search_artworks(query, is_public_domain=False):
 # Custom CSS for styling
 custom_css = """
 .gradio-container {
-    background: linear-gradient(to right, #1a1a1a, #2d2d2d);
-    color: #ffffff;
+    background: linear-gradient(to right, #1a1a1a, #2d2d2d) !important;
+    color: #ffffff !important;
 }
 .gr-button {
-    background: linear-gradient(to right, #c94b4b, #4b134f);
-    border: none;
-    color: white;
-    font-weight: bold;
+    background: linear-gradient(to right, #c94b4b, #4b134f) !important;
+    border: none !important;
+    color: white !important;
+    font-weight: bold !important;
 }
 .gr-button:hover {
-    background: linear-gradient(to right, #4b134f, #c94b4b);
+    background: linear-gradient(to right, #4b134f, #c94b4b) !important;
     transform: scale(1.05);
     transition: all 0.3s ease;
 }
 .gr-input {
-    border: 2px solid #4b134f;
-    background: rgba(255, 255, 255, 0.1);
-    color: white;
+    border: 2px solid #4b134f !important;
+    background: rgba(255, 255, 255, 0.1) !important;
+    color: white !important;
 }
 .gr-form {
-    background: rgba(0, 0, 0, 0.2);
-    border-radius: 15px;
-    padding: 20px;
+    background: rgba(0, 0, 0, 0.2) !important;
+    border-radius: 15px !important;
+    padding: 20px !important;
 }
 .gr-box {
-    border-radius: 15px;
-    border: 2px solid #4b134f;
+    border-radius: 15px !important;
+    border: 2px solid #4b134f !important;
 }
 .gr-gallery {
-    background: rgba(0, 0, 0, 0.3);
-    border-radius: 15px;
-    padding: 10px;
+    background: rgba(0, 0, 0, 0.3) !important;
+    border-radius: 15px !important;
+    padding: 10px !important;
+}
+.title-text {
+    text-align: center !important;
+    color: #ffffff !important;
+    font-size: 2.5em !important;
+    margin-bottom: 0.5em !important;
+    text-shadow: 2px 2px 4px rgba(0,0,0,0.5) !important;
+}
+.subtitle-text {
+    text-align: center !important;
+    color: #cccccc !important;
+    font-size: 1.2em !important;
+    margin-bottom: 2em !important;
+    font-style: italic !important;
 }
 """
 
 # Gradio interface
 with gr.Blocks(css=custom_css) as demo:
-    gr.Markdown(
+    gr.HTML(
         """
-        # 🎨 Art Institute of Chicago Explorer
-        *Discover masterpieces from one of the world's premier art collections through an elegant and intuitive interface.*
+        <div class="title-text">🎨 Art Institute of Chicago Explorer</div>
+        <div class="subtitle-text">Discover masterpieces from one of the world's premier art collections through an elegant and intuitive interface.</div>
         """
     )
     
@@ -146,10 +160,4 @@ with gr.Blocks(css=custom_css) as demo:
         outputs=[gallery, info]
     )
 
-# Launch with a dark theme
-demo.launch(theme=gr.themes.Monochrome(
-    primary_hue="purple",
-    secondary_hue="red",
-    neutral_hue="slate",
-    font=["Helvetica", "ui-sans-serif"]
-))
+demo.launch()