Update app.py

app.py

@@ -248,11 +248,11 @@ def process_query(query, history, selected_voice='af'):
             audio_output: None
         }
 
-# ----------------------- Custom CSS for Improved UI ----------------------- #
+# ----------------------- Custom CSS for Bright UI ----------------------- #
 css = """
 .gradio-container {
     max-width: 1200px !important;
-    background-color: #1e1e1e !important;
+    background-color: #ffffff !important;
     padding: 20px;
     border-radius: 12px;
 }
@@ -260,9 +260,9 @@ css = """
 #header {
     text-align: center;
     padding: 2rem 0;
-    background: #272727;
+    background: #f0f8ff;
     border-radius: 12px;
-    color: #ffffff;
+    color: #333333;
     margin-bottom: 2rem;
 }
 
@@ -272,79 +272,83 @@ css = """
 }
 
 .search-container {
-    background: #272727;
+    background: #f8f9fa;
     border-radius: 12px;
     padding: 1.5rem;
     margin-bottom: 1rem;
+    border: 1px solid #e0e0e0;
 }
 
 .search-box {
     padding: 1rem;
-    background: #333333;
+    background: #ffffff;
     border-radius: 8px;
     margin-bottom: 1rem;
+    border: 1px solid #e0e0e0;
 }
 
 .search-box input[type="text"] {
-    background: #444444 !important;
-    border: 1px solid #555555 !important;
-    color: #ffffff !important;
+    background: #ffffff !important;
+    border: 1px solid #cccccc !important;
+    color: #333333 !important;
     border-radius: 8px !important;
 }
 
 .search-box input[type="text"]::placeholder {
-    color: #bbbbbb !important;
+    color: #888888 !important;
 }
 
 .search-box button {
-    background: #2563eb !important;
+    background: #007bff !important;
     border: none !important;
 }
 
 .results-container {
-    background: #2c2c2c;
+    background: #ffffff;
     border-radius: 8px;
     padding: 1.5rem;
     margin-top: 1rem;
+    border: 1px solid #e0e0e0;
 }
 
 .answer-box {
-    background: #3a3a3a;
+    background: #f1f1f1;
     border-radius: 8px;
     padding: 1.5rem;
-    color: #ffffff;
+    color: #333333;
     margin-bottom: 1rem;
 }
 
 .answer-box p {
-    color: #e0e0e0;
+    color: #555555;
     line-height: 1.6;
 }
 
 .sources-container {
     margin-top: 1rem;
-    background: #2c2c2c;
+    background: #ffffff;
     border-radius: 8px;
     padding: 1rem;
+    border: 1px solid #e0e0e0;
 }
 
 .source-item {
     display: flex;
     padding: 12px;
     margin: 8px 0;
-    background: #3a3a3a;
+    background: #f8f9fa;
     border-radius: 8px;
     transition: all 0.2s;
 }
 
 .source-item:hover {
-    background: #4a4a4a;
+    background: #e9ecef;
 }
 
 .source-number {
     font-weight: bold;
     margin-right: 12px;
-    color: #60a5fa;
+    color: #007bff;
 }
 
 .source-content {
@@ -352,7 +356,7 @@ css = """
 }
 
 .source-title {
-    color: #60a5fa;
+    color: #007bff;
     font-weight: 500;
     text-decoration: none;
     display: block;
@@ -360,13 +364,13 @@ css = """
 }
 
 .source-date {
-    color: #bbbbbb;
+    color: #888888;
     font-size: 0.9em;
     margin-left: 8px;
 }
 
 .source-snippet {
-    color: #e0e0e0;
+    color: #555555;
     font-size: 0.9em;
     line-height: 1.4;
 }
@@ -375,29 +379,31 @@ css = """
     max-height: 400px;
     overflow-y: auto;
     padding: 1rem;
-    background: #2c2c2c;
+    background: #ffffff;
     border-radius: 8px;
     margin-top: 1rem;
+    border: 1px solid #e0e0e0;
 }
 
 .voice-selector {
     margin-top: 1rem;
-    background: #333333;
+    background: #ffffff;
     border-radius: 8px;
     padding: 0.5rem;
+    border: 1px solid #cccccc;
 }
 
 .voice-selector select {
-    background: #444444 !important;
-    color: #ffffff !important;
-    border: 1px solid #555555 !important;
+    background: #ffffff !important;
+    color: #333333 !important;
+    border: 1px solid #cccccc !important;
 }
 
 footer {
     text-align: center;
     padding: 1rem 0;
     font-size: 0.9em;
-    color: #bbbbbb;
+    color: #666666;
 }
 """
 
@@ -405,7 +411,6 @@ footer {
 with gr.Blocks(title="AI Search Assistant", css=css) as demo:
     chat_history = gr.State([])
     
-    # 'id' 인자 대신 'elem_id' 사용
     with gr.Column(elem_id="header"):
         gr.Markdown("# 🔍 AI Search Assistant")
         gr.Markdown("### Powered by DeepSeek & Real-time Web Results with Voice")