description_search_ui.py

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>
            
#             <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() -> 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 = """
    <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
        )
        
        # 搜索按鈕
        search_button = gr.Button(
            "Find My Perfect Match! 🔍",
            variant="primary",
            size="lg"
        )

        # 加載狀態和結果區域
        with gr.Column() as output_area:
            loading_info = gr.HTML(visible=True, 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>
            """)
            result_output = gr.HTML(label="Breed Recommendations")
        
        return description_input, search_button, result_output