Update description_search_ui.py

description_search_ui.py

@@ -1,157 +1,157 @@
 
 import gradio as gr
 
-# 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>
+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="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-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>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>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>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>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>
-#     """
+                    <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;
-#     }
+    # 添加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;
-#     }
+    .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;
-#     }
+    .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-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 {
+        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: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-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 h3 {
+        font-size: 1.1rem;
+        color: #2c3e50;
+        margin: 0 0 4px 0;
+    }
 
-#     .criteria-content p {
-#         color: #666;
-#         margin: 0;
-#         font-size: 0.95rem;
-#     }
-#     </style>
-#     """
+    .criteria-content p {
+        color: #666;
+        margin: 0;
+        font-size: 0.95rem;
+    }
+    </style>
+    """
 
-#     with gr.Column():
-#         # 顯示指南和樣式
-#         gr.HTML(css + guide_html)
+    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
-#         )
+        # 描述輸入區
+        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"
-#         )
+        # 搜索按鈕（使用 Gradio 默認顏色）
+        search_button = gr.Button(
+            "Find My Perfect Match! 🔍",
+            variant="primary",
+            size="lg"
+        )
         
-#         # 結果顯示區域
-#         result_output = gr.HTML(label="Breed Recommendations")
+        # 結果顯示區域
+        result_output = gr.HTML(label="Breed Recommendations")
         
-#         return description_input, search_button, result_output
+        return description_input, search_button, result_output
 
 
 def create_description_search_tab() -> gr.Column:
@@ -218,6 +218,7 @@ def create_description_search_tab() -> gr.Column:
     </div>
     """
 
+    # 添加CSS樣式
     css = """
     <style>
     .breed-search-container {
@@ -226,24 +227,28 @@ 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;
@@ -252,20 +257,24 @@ 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;
@@ -275,49 +284,33 @@ def create_description_search_tab() -> gr.Column:
     """
 
     with gr.Column():
+        # 顯示指南和樣式
         gr.HTML(css + guide_html)
         
+        # 描述輸入區
         description_input = gr.Textbox(
             label="",
-            placeholder="Example: I'm looking for a medium-sized, friendly dog...",
+            placeholder="Example: I'm looking for a medium-sized, friendly dog that's good with kids...",
             lines=5
         )
         
+        # 搜索按鈕
         search_button = gr.Button(
             "Find My Perfect Match! 🔍",
             variant="primary",
             size="lg"
         )
 
-        processing_message = gr.HTML(
-            value="<div style='text-align: center; padding: 20px; color: #666;'><p><b>Finding your perfect match...</b></p><p>Please wait 15-20 seconds while we analyze your preferences.</p></div>",
-            visible=False
-        )
+        # 加載消息（新增）
+        loading_msg = gr.HTML("""
+            <div style='text-align: center; color: #666;'>
+                <p><b>Finding your perfect match...</b></p>
+                <p>Please wait 15-20 seconds while we analyze your preferences.</p>
+            </div>
+        """, visible=False)
         
-        result_output = gr.HTML(label="Breed Recommendations", visible=True)
+        # 結果顯示區域
+        result_output = gr.HTML(label="Breed Recommendations")
         
-        def on_search_start(description):
-            return {
-                processing_message: gr.update(visible=True),
-                result_output: gr.update(visible=False),
-                description_input: gr.update(interactive=False)
-            }
-
-        def on_search_complete(output):
-            return {
-                processing_message: gr.update(visible=False),
-                result_output: gr.update(visible=True, value=output),
-                description_input: gr.update(interactive=True)
-            }
+        return description_input, search_button, result_output, loading_msg
 
-        search_button.click(
-            fn=on_search_start,
-            inputs=[description_input],
-            outputs=[processing_message, result_output, description_input]
-        ).success(
-            fn=lambda x: x,
-            inputs=[description_input],
-            outputs=[description_input]
-        )
-        
-        return description_input, search_button, result_output, processing_message