Spaces:
Sleeping
Sleeping
File size: 5,077 Bytes
7eaf3d5 33cb065 7eaf3d5 33cb065 7eaf3d5 5e0df9d 7eaf3d5 5e0df9d 7eaf3d5 5e0df9d 7eaf3d5 5e0df9d 7eaf3d5 5e0df9d 7eaf3d5 5e0df9d 7eaf3d5 5e0df9d 7eaf3d5 5e0df9d 7eaf3d5 9f44609 5e0df9d 7eaf3d5 5e0df9d 7eaf3d5 5e0df9d 7eaf3d5 5e0df9d 7eaf3d5 39ffa02 33cb065 5e0df9d c7f8c2a 5e0df9d cce3795 9662333 |
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 156 157 158 159 160 161 |
import gradio as gr
def create_description_search_tab():
"""創建描述搜索頁面的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...",
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 15-20 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 |