description_search_ui.py

import gradio as gr

def create_description_search_tab():
    """顯示描述搜尋頁面的UI"""
    guide_html = """
     <div class="breed-search-container">
        <div class="description-guide">
            <div style="
                text-align: center;
                position: relative;
                margin-bottom: 20px;
                padding-top: 15px;  /* 為 BETA 徽章留出空間 */
            ">
                <!-- BETA 徽章 -->
                <div style="
                    position: absolute;
                    top: 0;
                    right: 20px;
                    background: linear-gradient(90deg, #4299e1, #48bb78);
                    color: white;
                    padding: 4px 12px;
                    border-radius: 15px;
                    font-size: 0.85em;
                    font-weight: 600;
                    letter-spacing: 1px;
                    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
                ">BETA</div>

                <!-- 主標題 -->
                <h2 class="guide-title" style="
                    display: inline-block;
                    background: linear-gradient(90deg, #4299e1, #48bb78);
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                    font-weight: 600;
                    font-size: 1.8em;
                ">🐾 Describe Your Ideal Dog</h2>
            </div>

            <div style="
                background: linear-gradient(to right, rgba(66, 153, 225, 0.15), rgba(72, 187, 120, 0.15));
                border-left: 4px solid;
                border-image: linear-gradient(to bottom, #4299e1, #48bb78) 1;
                border-radius: 4px;
                padding: 12px 16px;
                margin: 15px 0;
                font-weight: 500;
                color: #2D3748;
                display: flex;
                align-items: center;
                gap: 8px;
            ">
                <span style="font-size: 1.2em;">🔬</span>
                <span style="
                    font-size: 1em;
                    letter-spacing: 0.3px;
                    line-height: 1.4;
                "><strong>Beta Feature:</strong> We're continuously improving our breed description matching. Results may vary.</span>
            </div>

            <div class="guide-content">
                <p class="intro-text" style="
                    background: linear-gradient(90deg, #4299e1, #48bb78);
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                    font-weight: 600;
                    font-size: 1.2em;
                    margin-bottom: 20px;
                ">Help us find your perfect companion! Please consider including the following details:</p>

                <div class="criteria-grid" style="
                    background: linear-gradient(to right, rgba(66, 153, 225, 0.1), rgba(72, 187, 120, 0.1));
                    border-radius: 10px;
                    padding: 20px;
                ">
                    <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...",
            lines=5
        )

        # 搜索按鈕
        search_button = gr.Button(
            "Find My Perfect Match! 🔍",
            variant="primary",
            size="lg"
        )

        # 加載消息
        loading_msg = gr.HTML("""
            <div style='text-align: center; color: #666;'>
                <p><b>Finding your perfect match...</b></p>
                <p>Please wait 25-30 seconds while we analyze your preferences.</p>
            </div>
        """, visible=False)

        # 結果顯示區域
        result_output = gr.HTML(label="Breed Recommendations")

        return description_input, search_button, result_output, loading_msg