Hugging Face's logo

Spaces:
DawnC
/
PawMatchAI
Running on Zero

App Files Community
1
PawMatchAI
File size: 4,908 Bytes 
c8c8087
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
 

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