Update description_search_ui.py

description_search_ui.py

@@ -1,7 +1,160 @@
 
 import gradio as gr
 
-def create_description_search_tab() -> gr.Column:
+# def create_description_search_tab() -> gr.Column:
+#     """創建描述搜索頁面的UI組件"""
+#     guide_html = """
+#     <div class="breed-search-container">
+#         <div class="description-guide">
+#             <h2 class="guide-title">🐾 Describe Your Ideal Dog</h2>
+            
+#             <div class="guide-content">
+#                 <p class="intro-text">Help us find your perfect companion! Please consider including the following details:</p>
+                
+#                 <div class="criteria-grid">
+#                     <div class="criteria-item">
+#                         <span class="icon">📏</span>
+#                         <div class="criteria-content">
+#                             <h3>Size Preference</h3>
+#                             <p>Small • Medium • Large</p>
+#                         </div>
+#                     </div>
+                    
+#                     <div class="criteria-item">
+#                         <span class="icon">🏃</span>
+#                         <div class="criteria-content">
+#                             <h3>Activity Level</h3>
+#                             <p>Low • Moderate • High • Very Active</p>
+#                         </div>
+#                     </div>
+                    
+#                     <div class="criteria-item">
+#                         <span class="icon">🏠</span>
+#                         <div class="criteria-content">
+#                             <h3>Living Environment</h3>
+#                             <p>Apartment • House • Yard Space</p>
+#                         </div>
+#                     </div>
+                    
+#                     <div class="criteria-item">
+#                         <span class="icon">👨‍👩‍👧‍👦</span>
+#                         <div class="criteria-content">
+#                             <h3>Family Situation</h3>
+#                             <p>Children • Other Pets • Single Adult</p>
+#                         </div>
+#                     </div>
+                    
+#                     <div class="criteria-item">
+#                         <span class="icon">✂️</span>
+#                         <div class="criteria-content">
+#                             <h3>Grooming Commitment</h3>
+#                             <p>Low • Medium • High Maintenance</p>
+#                         </div>
+#                     </div>
+                    
+#                     <div class="criteria-item">
+#                         <span class="icon">🎭</span>
+#                         <div class="criteria-content">
+#                             <h3>Desired Personality</h3>
+#                             <p>Friendly • Independent • Intelligent • Calm</p>
+#                         </div>
+#                     </div>
+#                 </div>
+#             </div>
+#         </div>
+#     </div>
+#     """
+
+#     # 添加CSS樣式
+#     css = """
+#     <style>
+#     .breed-search-container {
+#         background: white;
+#         border-radius: 12px;
+#         padding: 24px;
+#         margin-bottom: 20px;
+#     }
+
+#     .guide-title {
+#         font-size: 1.8rem;
+#         color: #2c3e50;
+#         margin-bottom: 20px;
+#         text-align: center;
+#     }
+
+#     .intro-text {
+#         color: #666;
+#         text-align: center;
+#         margin-bottom: 24px;
+#         font-size: 1.1rem;
+#     }
+
+#     .criteria-grid {
+#         display: grid;
+#         grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+#         gap: 20px;
+#         margin-bottom: 24px;
+#     }
+
+#     .criteria-item {
+#         display: flex;
+#         align-items: flex-start;
+#         padding: 16px;
+#         background: #f8fafc;
+#         border-radius: 8px;
+#         transition: all 0.3s ease;
+#     }
+
+#     .criteria-item:hover {
+#         transform: translateY(-2px);
+#         box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+#     }
+
+#     .criteria-item .icon {
+#         font-size: 24px;
+#         margin-right: 12px;
+#         margin-top: 3px;
+#     }
+
+#     .criteria-content h3 {
+#         font-size: 1.1rem;
+#         color: #2c3e50;
+#         margin: 0 0 4px 0;
+#     }
+
+#     .criteria-content p {
+#         color: #666;
+#         margin: 0;
+#         font-size: 0.95rem;
+#     }
+#     </style>
+#     """
+
+#     with gr.Column():
+#         # 顯示指南和樣式
+#         gr.HTML(css + guide_html)
+        
+#         # 描述輸入區
+#         description_input = gr.Textbox(
+#             label="",
+#             placeholder="Example: I'm looking for a medium-sized, friendly dog that's good with kids. I live in an apartment and can provide moderate exercise. Looking for an intelligent breed that's easy to train...",
+#             lines=5
+#         )
+        
+#         # 搜索按鈕（使用 Gradio 默認顏色）
+#         search_button = gr.Button(
+#             "Find My Perfect Match! 🔍",
+#             variant="primary",
+#             size="lg"
+#         )
+        
+#         # 結果顯示區域
+#         result_output = gr.HTML(label="Breed Recommendations")
+        
+#         return description_input, search_button, result_output
+
+
+def create_description_search_tab():
     """創建描述搜索頁面的UI組件"""
     guide_html = """
     <div class="breed-search-container">
@@ -65,7 +218,6 @@ def create_description_search_tab() -> gr.Column:
     </div>
     """
 
-    # 添加CSS樣式
     css = """
     <style>
     .breed-search-container {
@@ -74,28 +226,24 @@ def create_description_search_tab() -> gr.Column:
         padding: 24px;
         margin-bottom: 20px;
     }
-
     .guide-title {
         font-size: 1.8rem;
         color: #2c3e50;
         margin-bottom: 20px;
         text-align: center;
     }
-
     .intro-text {
         color: #666;
         text-align: center;
         margin-bottom: 24px;
         font-size: 1.1rem;
     }
-
     .criteria-grid {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
         gap: 20px;
         margin-bottom: 24px;
     }
-
     .criteria-item {
         display: flex;
         align-items: flex-start;
@@ -104,24 +252,20 @@ def create_description_search_tab() -> gr.Column:
         border-radius: 8px;
         transition: all 0.3s ease;
     }
-
     .criteria-item:hover {
         transform: translateY(-2px);
         box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
     }
-
     .criteria-item .icon {
         font-size: 24px;
         margin-right: 12px;
         margin-top: 3px;
     }
-
     .criteria-content h3 {
         font-size: 1.1rem;
         color: #2c3e50;
         margin: 0 0 4px 0;
     }
-
     .criteria-content p {
         color: #666;
         margin: 0;
@@ -141,14 +285,55 @@ def create_description_search_tab() -> gr.Column:
             lines=5
         )
         
-        # 搜索按鈕（使用 Gradio 默認顏色）
+        # 搜索按鈕
         search_button = gr.Button(
             "Find My Perfect Match! 🔍",
             variant="primary",
             size="lg"
         )
-        
-        # 結果顯示區域
-        result_output = gr.HTML(label="Breed Recommendations")
+
+        # 加載狀態和結果區域
+        with gr.Column() as output_area:
+            result_output = gr.HTML(label="Breed Recommendations")
+            loading_status = gr.HTML(visible=False, value="""
+                <div style="text-align: center; padding: 2rem;">
+                    <div style="display: inline-block; width: 40px; height: 40px; border: 4px solid #f3f3f3; 
+                         border-top: 4px solid #3498db; border-radius: 50%; margin-bottom: 1rem;
+                         animation: spin 1s linear infinite;">
+                    </div>
+                    <style>
+                        @keyframes spin {
+                            0% { transform: rotate(0deg); }
+                            100% { transform: rotate(360deg); }
+                        }
+                    </style>
+                    <p style="color: #666; margin: 10px 0;">Finding your perfect match...</p>
+                    <p style="color: #888; font-size: 0.9em;">This usually takes 15-20 seconds</p>
+                    <div style="color: #888; font-size: 0.9em; margin-top: 10px;">
+                        <p>✓ Analyzing preferences</p>
+                        <p>✓ Calculating compatibility</p>
+                        <p>⋯ Finding best matches</p>
+                    </div>
+                </div>
+            """)
+
+        def on_button_click():
+            return gr.update(visible=True), gr.update(visible=False)
+
+        # 點擊按鈕時顯示加載狀態
+        search_button.click(
+            fn=on_button_click,
+            inputs=[],
+            outputs=[loading_status, result_output],
+            queue=False
+        ).then(
+            fn=on_description_search,
+            inputs=[description_input],
+            outputs=[result_output]
+        ).then(
+            fn=lambda: (gr.update(visible=False), gr.update(visible=True)),
+            inputs=[],
+            outputs=[loading_status, result_output]
+        )
         
         return description_input, search_button, result_output