Spaces:
Running
on
Zero
Running
on
Zero
| import gradio as gr | |
| import traceback | |
| from typing import Optional, Dict, List | |
| from history_manager import UserHistoryManager | |
| class SearchHistoryComponent: | |
| def __init__(self): | |
| """初始化搜索歷史組件""" | |
| self.history_manager = UserHistoryManager() | |
| def format_history_html(self, history_data: Optional[List[Dict]] = None) -> str: | |
| try: | |
| if history_data is None: | |
| history_data = self.history_manager.get_history() | |
| if not history_data: | |
| return """ | |
| <div style=' | |
| text-align: center; | |
| padding: 40px 20px; | |
| color: #666; | |
| background: linear-gradient(to right, rgba(66, 153, 225, 0.05), rgba(72, 187, 120, 0.05)); | |
| border-radius: 10px; | |
| margin: 20px 0; | |
| '> | |
| <p style=' | |
| font-size: 1.1em; | |
| margin: 0; | |
| background: linear-gradient(90deg, #4299e1, #48bb78); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| font-weight: 600; | |
| '> | |
| No search history yet. Try making some breed recommendations! | |
| </p> | |
| </div> | |
| """ | |
| html = "<div class='history-container'>" | |
| for entry in reversed(history_data): | |
| timestamp = entry.get('timestamp', 'Unknown time') | |
| search_type = entry.get('search_type', 'criteria') | |
| results = entry.get('results', []) | |
| # 根據搜尋類型使用不同的標題樣式 | |
| type_label = "Criteria History" if search_type == "criteria" else "Description History" | |
| type_color = "#4299e1" if search_type == "criteria" else "#48bb78" # 藍色vs綠色 | |
| html += f""" | |
| <div class="history-entry"> | |
| <div class="history-header" style="border-left: 4px solid {type_color}; padding-left: 10px;"> | |
| <span class="timestamp">🕒 {timestamp}</span> | |
| <span class="search-type" style="color: {type_color}; font-weight: bold; margin-left: 10px;"> | |
| {type_label} | |
| </span> | |
| </div> | |
| """ | |
| # if search_type == "criteria": | |
| # # 原有的條件搜尋顯示邏輯 | |
| # prefs = entry.get('preferences', {}) | |
| # html += f""" | |
| # <div class="params-list"> | |
| # <h4>Search Parameters:</h4> | |
| # <ul> | |
| # <li><span class="param-label">Living Space:</span> {prefs.get('living_space', 'N/A')}</li> | |
| # <li><span class="param-label">Exercise Time:</span> {prefs.get('exercise_time', 'N/A')} minutes</li> | |
| # <li><span class="param-label">Grooming:</span> {prefs.get('grooming_commitment', 'N/A')}</li> | |
| # <li><span class="param-label">Experience:</span> {prefs.get('experience_level', 'N/A')}</li> | |
| # <li><span class="param-label">Children at Home:</span> {"Yes" if prefs.get('has_children') else "No"}</li> | |
| # <li><span class="param-label">Noise Tolerance:</span> {prefs.get('noise_tolerance', 'N/A')}</li> | |
| # </ul> | |
| # </div> | |
| # """ | |
| # else: | |
| # # Description 搜尋的顯示邏輯 | |
| # description = entry.get('description', 'No description provided') | |
| # html += f""" | |
| # <div class="description-section"> | |
| # <h4>Search Description:</h4> | |
| # <p class="user-description">{description}</p> | |
| # </div> | |
| # """ | |
| # # 共用的結果顯示邏輯 | |
| # html += """ | |
| # <div class="results-list"> | |
| # <h4>Top 10 Breed Matches:</h4> | |
| # <div class="breed-list"> | |
| # """ | |
| # if results: | |
| # for i, result in enumerate(results[:10], 1): | |
| # breed_name = result.get('breed', 'Unknown breed').replace('_', ' ') | |
| # score = result.get('overall_score', result.get('final_score', 0)) | |
| # html += f""" | |
| # <div class="breed-item"> | |
| # <div class="breed-info"> | |
| # <span class="breed-rank">#{i}</span> | |
| # <span class="breed-name">{breed_name}</span> | |
| # <span class="breed-score">{score*100:.1f}%</span> | |
| # </div> | |
| # </div> | |
| # """ | |
| # html += """ | |
| # </div> | |
| # </div> | |
| # </div> | |
| # """ | |
| if search_type == "criteria": | |
| # 原有的條件搜尋顯示邏輯 | |
| prefs = entry.get('preferences', {}) | |
| html += f""" | |
| <div class="params-list" style="background: #f8fafc; padding: 16px; border-radius: 8px; margin-bottom: 16px;"> | |
| <h4 style="font-size: 1.1em; font-weight: 600; color: #2D3748; margin-bottom: 12px; border-bottom: 2px solid #E2E8F0; padding-bottom: 8px;">Search Parameters:</h4> | |
| <ul style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; list-style: none; padding: 0;"> | |
| <li><span class="param-label" style="font-weight: 600; color: #2D3748;">Living Space:</span> {prefs.get('living_space', 'N/A')}</li> | |
| <li><span class="param-label" style="font-weight: 600; color: #2D3748;">Exercise Time:</span> {prefs.get('exercise_time', 'N/A')} minutes</li> | |
| <li><span class="param-label" style="font-weight: 600; color: #2D3748;">Grooming:</span> {prefs.get('grooming_commitment', 'N/A')}</li> | |
| <li><span class="param-label" style="font-weight: 600; color: #2D3748;">Experience:</span> {prefs.get('experience_level', 'N/A')}</li> | |
| <li><span class="param-label" style="font-weight: 600; color: #2D3748;">Children at Home:</span> {"Yes" if prefs.get('has_children') else "No"}</li> | |
| <li><span class="param-label" style="font-weight: 600; color: #2D3748;">Noise Tolerance:</span> {prefs.get('noise_tolerance', 'N/A')}</li> | |
| </ul> | |
| </div> | |
| """ | |
| else: | |
| # Description 搜尋的顯示邏輯 | |
| description = entry.get('description', 'No description provided') | |
| html += f""" | |
| <div class="description-section" style="background: #f8fafc; padding: 16px; border-radius: 8px; margin-bottom: 16px;"> | |
| <h4 style="font-size: 1.1em; font-weight: 600; color: #2D3748; margin-bottom: 12px; border-bottom: 2px solid #E2E8F0; padding-bottom: 8px;">Search Description:</h4> | |
| <p class="user-description" style="color: #4A5568; font-style: italic; line-height: 1.6; margin: 8px 0;">{description}</p> | |
| </div> | |
| """ | |
| # 共用的結果顯示邏輯 | |
| html += """ | |
| <div class="results-list"> | |
| <h4 style="font-size: 1.1em; font-weight: 600; color: #2D3748; margin-bottom: 12px; border-bottom: 2px solid #E2E8F0; padding-bottom: 8px;">Top 10 Breed Matches:</h4> | |
| <div class="breed-list"> | |
| """ | |
| if results: | |
| for i, result in enumerate(results[:10], 1): | |
| breed_name = result.get('breed', 'Unknown breed').replace('_', ' ') | |
| score = result.get('overall_score', result.get('final_score', 0)) | |
| html += f""" | |
| <div class="breed-item" style="margin-bottom: 8px;"> | |
| <div class="breed-info" style="display: flex; align-items: center; justify-content: space-between; padding: 8px; background: #f8fafc; border-radius: 6px;"> | |
| <span class="breed-rank" style="background: linear-gradient(135deg, #4299e1, #48bb78); color: white; padding: 4px 10px; border-radius: 6px; font-weight: 600; min-width: 40px; text-align: center;">#{i}</span> | |
| <span class="breed-name" style="font-weight: 500; color: #2D3748; font-size: 1.05em; margin: 0 12px;">{breed_name}</span> | |
| <span class="breed-score" style="background: #F0FFF4; color: #48BB78; padding: 4px 8px; border-radius: 4px; font-weight: 600;">{score*100:.1f}%</span> | |
| </div> | |
| </div> | |
| """ | |
| html += """ | |
| </div> | |
| </div> | |
| </div> | |
| """ | |
| html += "</div>" | |
| return html | |
| except Exception as e: | |
| print(f"Error formatting history: {str(e)}") | |
| print(traceback.format_exc()) | |
| return f""" | |
| <div style='text-align: center; padding: 20px; color: #dc2626;'> | |
| Error formatting history. Please try refreshing the page. | |
| <br>Error details: {str(e)} | |
| </div> | |
| """ | |
| def clear_history(self) -> str: | |
| """清除所有搜尋歷史""" | |
| try: | |
| success = self.history_manager.clear_all_history() | |
| print(f"Clear history result: {success}") | |
| return self.format_history_html() | |
| except Exception as e: | |
| print(f"Error in clear_history: {str(e)}") | |
| print(traceback.format_exc()) | |
| return "Error clearing history" | |
| def refresh_history(self) -> str: | |
| """刷新歷史記錄顯示""" | |
| try: | |
| return self.format_history_html() | |
| except Exception as e: | |
| print(f"Error in refresh_history: {str(e)}") | |
| return "Error refreshing history" | |
| def save_search(self, user_preferences: Optional[dict] = None, | |
| results: list = None, | |
| search_type: str = "criteria", | |
| description: str = None) -> bool: | |
| """保存搜索結果 | |
| Args: | |
| user_preferences: 使用者偏好設定 (僅用於criteria搜尋) | |
| results: 推薦結果列表 | |
| search_type: 搜尋類型 ("criteria" 或 "description") | |
| description: 使用者輸入的描述 (僅用於description搜尋) | |
| """ | |
| return self.history_manager.save_history( | |
| user_preferences=user_preferences, | |
| results=results, | |
| search_type=search_type, | |
| description=description | |
| ) | |
| def create_history_component(): | |
| """只創建實例""" | |
| return SearchHistoryComponent() | |
| def create_history_tab(history_component: SearchHistoryComponent): | |
| """創建歷史紀錄的頁面 | |
| Args: | |
| history_component: 已创建的历史组件实例 | |
| """ | |
| with gr.TabItem("Recommendation Search History"): | |
| gr.HTML(""" | |
| <div style='text-align: center; padding: 20px;'> | |
| <h3 style=' | |
| color: #2D3748; | |
| margin-bottom: 10px; | |
| font-size: 1.5em; | |
| background: linear-gradient(90deg, #4299e1, #48bb78); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| font-weight: 600; | |
| '>Search History</h3> | |
| <div style=' | |
| text-align: center; | |
| padding: 20px 0; | |
| margin: 15px 0; | |
| background: linear-gradient(to right, rgba(66, 153, 225, 0.1), rgba(72, 187, 120, 0.1)); | |
| border-radius: 10px; | |
| '> | |
| <p style=' | |
| font-size: 1.2em; | |
| margin: 0; | |
| padding: 0 20px; | |
| line-height: 1.5; | |
| background: linear-gradient(90deg, #4299e1, #48bb78); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| font-weight: 600; | |
| '> | |
| View your previous breed recommendations and search preferences | |
| </p> | |
| </div> | |
| </div> | |
| """) | |
| with gr.Row(): | |
| with gr.Column(scale=4): | |
| history_display = gr.HTML() | |
| with gr.Row(): | |
| with gr.Column(scale=1): | |
| clear_history_btn = gr.Button( | |
| "🗑️ Clear History", | |
| variant="secondary", | |
| size="sm" | |
| ) | |
| with gr.Column(scale=1): | |
| refresh_btn = gr.Button( | |
| "🔄 Refresh", | |
| variant="secondary", | |
| size="sm" | |
| ) | |
| history_display.value = history_component.format_history_html() | |
| clear_history_btn.click( | |
| fn=history_component.clear_history, | |
| outputs=[history_display], | |
| api_name="clear_history" | |
| ) | |
| refresh_btn.click( | |
| fn=history_component.refresh_history, | |
| outputs=[history_display], | |
| api_name="refresh_history" | |
| ) | |