Hugging Face's logo

Spaces:
DawnC
/
PawMatchAI
Running on Zero

App Files Community
1
DawnC commited on
Commit
0ed7a91
•
1 Parent(s): fb97212

Update breed_recommendation.py

Browse files
Files changed (1) hide show
  1. breed_recommendation.py +42 -61
breed_recommendation.py CHANGED
@@ -530,89 +530,69 @@ def create_recommendation_tab(UserPreferences, get_breed_recommendations, format
530
  elem_id="recommendation-output"
531
  )
532
 
533
- def on_find_match_click(*args) -> Generator:
534
- """
535
- 處理推薦按鈕點擊事件的函數
536
- 使用生成器來處理中間狀態和最終結果
537
- """
538
  try:
539
- # 首先返回 loading 狀態
540
- yield gr.HTML("""
541
- <div style="
542
  text-align: center;
543
  padding: 20px;
 
544
  background: linear-gradient(to right, rgba(66, 153, 225, 0.1), rgba(72, 187, 120, 0.1));
545
  border-radius: 10px;
546
- margin: 20px 0;
547
- animation: fadeIn 0.5s ease-in-out;
548
  ">
549
  <div style="font-size: 40px; margin-bottom: 10px;">🐕</div>
550
  <div style="
551
  color: #2D3748;
552
  font-size: 1.2em;
553
- margin-bottom: 15px;
554
  font-weight: 500;
555
  ">Finding your perfect match...</div>
556
-
557
- <!-- 進度指示動畫 -->
558
- <div style="
559
  display: flex;
560
  justify-content: center;
561
  gap: 8px;
562
  margin: 15px 0;
563
  ">
564
- <div class="paw-print" style="
565
- width: 12px;
566
- height: 12px;
567
  background: #4299e1;
568
  border-radius: 50%;
569
- animation: bounce 0.6s infinite ease-in-out;
570
- animation-delay: 0s;
571
- "></div>
572
- <div class="paw-print" style="
573
- width: 12px;
574
- height: 12px;
575
  background: #4299e1;
576
  border-radius: 50%;
577
- animation: bounce 0.6s infinite ease-in-out;
578
- animation-delay: 0.2s;
579
- "></div>
580
- <div class="paw-print" style="
581
- width: 12px;
582
- height: 12px;
583
  background: #4299e1;
584
  border-radius: 50%;
585
- animation: bounce 0.6s infinite ease-in-out;
586
- animation-delay: 0.4s;
587
- "></div>
588
  </div>
589
-
590
- <!-- 提示訊息 -->
591
- <div style="
592
- color: #4A5568;
593
- font-size: 0.9em;
594
- font-style: italic;
595
- margin-top: 10px;
596
- ">Analyzing your preferences and our database of good boys and girls...</div>
597
  </div>
598
-
599
- <style>
600
- @keyframes bounce {
601
- 0%, 100% { transform: translateY(0); }
602
- 50% { transform: translateY(-10px); }
603
- }
604
-
605
- @keyframes fadeIn {
606
- from { opacity: 0; }
607
- to { opacity: 1; }
608
- }
609
- </style>
610
- """)
611
-
612
- # 添加短暫延遲使 loading 動畫可見
613
- yield asyncio.sleep(1)
614
-
615
- # 創建用戶偏好對象並獲取推薦
616
  user_prefs = UserPreferences(
617
  living_space=args[0],
618
  yard_access=args[1],
@@ -681,8 +661,7 @@ def create_recommendation_tab(UserPreferences, get_breed_recommendations, format
681
  font-size: 1.1em;
682
  margin: 0;
683
  ">
684
- 🐾 Oops! Something went wrong while finding your perfect match.
685
- <br>Please try again!
686
  </p>
687
  </div>
688
  """)
@@ -702,7 +681,9 @@ def create_recommendation_tab(UserPreferences, get_breed_recommendations, format
702
  children_age,
703
  noise_tolerance
704
  ],
705
- outputs=recommendation_output
 
 
706
  )
707
 
708
  # 返回頁面組件
 
530
  elem_id="recommendation-output"
531
  )
532
 
533
+ def on_find_match_click(*args):
 
 
 
 
534
  try:
535
+ # 立即顯示處理狀態
536
+ status_html = """
537
+ <div id="loading-status" style="
538
  text-align: center;
539
  padding: 20px;
540
+ margin: 20px 0;
541
  background: linear-gradient(to right, rgba(66, 153, 225, 0.1), rgba(72, 187, 120, 0.1));
542
  border-radius: 10px;
543
+ opacity: 1;
 
544
  ">
545
  <div style="font-size: 40px; margin-bottom: 10px;">🐕</div>
546
  <div style="
547
  color: #2D3748;
548
  font-size: 1.2em;
549
+ margin-bottom: 10px;
550
  font-weight: 500;
551
  ">Finding your perfect match...</div>
552
+ <div id="status-dots" style="
 
 
553
  display: flex;
554
  justify-content: center;
555
  gap: 8px;
556
  margin: 15px 0;
557
  ">
558
+ <span style="
559
+ width: 10px;
560
+ height: 10px;
561
  background: #4299e1;
562
  border-radius: 50%;
563
+ display: inline-block;
564
+ animation: pulse 1s infinite;
565
+ "></span>
566
+ <span style="
567
+ width: 10px;
568
+ height: 10px;
569
  background: #4299e1;
570
  border-radius: 50%;
571
+ display: inline-block;
572
+ animation: pulse 1s infinite .2s;
573
+ "></span>
574
+ <span style="
575
+ width: 10px;
576
+ height: 10px;
577
  background: #4299e1;
578
  border-radius: 50%;
579
+ display: inline-block;
580
+ animation: pulse 1s infinite .4s;
581
+ "></span>
582
  </div>
583
+ <style>
584
+ @keyframes pulse {
585
+ 0%, 100% { transform: scale(1); opacity: 1; }
586
+ 50% { transform: scale(1.5); opacity: 0.7; }
587
+ }
588
+ </style>
 
 
589
  </div>
590
+ """
591
+
592
+ # 返回載入狀態
593
+ yield gr.HTML(status_html)
594
+
595
+ # 建立用戶偏好
 
 
 
 
 
 
 
 
 
 
 
 
596
  user_prefs = UserPreferences(
597
  living_space=args[0],
598
  yard_access=args[1],
 
661
  font-size: 1.1em;
662
  margin: 0;
663
  ">
664
+ 🐾 Oops! Something went wrong. Please try again!
 
665
  </p>
666
  </div>
667
  """)
 
681
  children_age,
682
  noise_tolerance
683
  ],
684
+ outputs=recommendation_output,
685
+ show_progress=True, # 顯示進度
686
+ queue=False # 允許連續點擊
687
  )
688
 
689
  # 返回頁面組件