Spaces:
Running
on
Zero
Running
on
Zero
File size: 5,484 Bytes
6166858 ec8f3a1 6166858 |
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 162 163 164 |
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" style="
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 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>This might take a little longer on the first try — our AI is warming up its paws! 🐾 Please allow up to 45 seconds for the best results. Thanks for your patience!</p>
</div>
""", visible=False)
# 結果顯示區域
result_output = gr.HTML(label="Breed Recommendations")
return description_input, search_button, result_output, loading_msg
|