Spaces:
Running
on
Zero
Running
on
Zero
| 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 | |
| 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...", | |
| 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 | |