Update search_history.py

search_history.py

@@ -181,6 +181,32 @@ def create_history_tab(history_component: SearchHistoryComponent):
     """
     with gr.TabItem("Recommendation Search History"):
         gr.HTML("""
+            <style>
+                .custom-history-btn {
+                    background: linear-gradient(135deg, #4299e1, #48bb78) !important;
+                    border: none !important;
+                    color: white !important;
+                    padding: 12px 24px !important;
+                    border-radius: 8px !important;
+                    font-weight: 600 !important;
+                    transition: all 0.3s ease !important;
+                    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
+                }
+                
+                .custom-history-btn:hover {
+                    transform: translateY(-2px);
+                    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
+                }
+                
+                #clear-btn {
+                    background: linear-gradient(135deg, #e53e3e, #ed8936) !important;
+                }
+                
+                #refresh-btn {
+                    background: linear-gradient(135deg, #4299e1, #48bb78) !important;
+                }
+            </style>
+            
             <div style='text-align: center; padding: 20px;'>
                 <h3 style='
                     color: #2D3748;
@@ -218,18 +244,36 @@ def create_history_tab(history_component: SearchHistoryComponent):
             with gr.Column(scale=4):
                 history_display = gr.HTML()
 
-                with gr.Row():
+                # with gr.Row():
+                #     with gr.Column(scale=1):
+                #         clear_history_btn = gr.Button(
+                #             "🗑️ Clear History",
+                #             variant="secondary",
+                #             size="sm"
+                #         )
+                #     with gr.Column(scale=1):
+                #         refresh_btn = gr.Button(
+                #             "🔄 Refresh",
+                #             variant="secondary",
+                #             size="sm"
+                #         )
+
+                with gr.Row(equal_height=True):
                     with gr.Column(scale=1):
                         clear_history_btn = gr.Button(
                             "🗑️ Clear History",
-                            variant="secondary",
-                            size="sm"
+                            variant="primary",      # 改變按鈕變體為 primary
+                            size="lg",             # 改變大小為 lg
+                            elem_id="clear-btn",   # 添加唯一的元素ID
+                            elem_classes="custom-history-btn"  # 添加自訂類別
                         )
                     with gr.Column(scale=1):
                         refresh_btn = gr.Button(
                             "🔄 Refresh",
-                            variant="secondary",
-                            size="sm"
+                            variant="primary",      # 改變按鈕變體為 primary
+                            size="lg",             # 改變大小為 lg
+                            elem_id="refresh-btn", # 添加唯一的元素ID
+                            elem_classes="custom-history-btn"  # 添加自訂類別
                         )
 
                 history_display.value = history_component.format_history_html()