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