Hugging Face's logo

Spaces:
DawnC
/
PawMatchAI
Running on Zero

App Files Community
1
DawnC commited on
Commit
7635502
•
1 Parent(s): 32455f5

Update app.py

Browse files
Files changed (1) hide show
  1. app.py +212 -38
app.py CHANGED
@@ -329,63 +329,126 @@ async def predict(image):
329
  </h2>
330
  <div class="info-section">
331
  <div class="info-item">
332
- <span class="icon">📏</span>
333
- <span class="label">Size:</span>
 
 
 
 
 
 
 
 
 
334
  <span class="value">{description['Size']}</span>
335
  </div>
336
  <div class="info-item">
337
- <span class="icon">⏳</span>
338
- <span class="label">Lifespan:</span>
 
 
 
 
 
 
 
 
 
339
  <span class="value">{description['Lifespan']}</span>
340
  </div>
341
  </div>
342
-
343
  <h2 class="section-title">
344
  <span class="icon">🐕</span> TEMPERAMENT & PERSONALITY
345
  </h2>
346
  <div class="temperament-section">
347
- <span class="value">{description['Temperament']}</span>
 
 
 
 
 
 
 
 
 
348
  </div>
349
-
350
  <h2 class="section-title">
351
  <span class="icon">💪</span> CARE REQUIREMENTS
352
  </h2>
353
  <div class="care-section">
354
  <div class="info-item">
355
- <span class="icon">🏃</span>
356
- <span class="label">Exercise:</span>
 
 
 
 
 
 
 
 
 
357
  <span class="value">{description['Exercise Needs']}</span>
358
  </div>
359
  <div class="info-item">
360
- <span class="icon">✂️</span>
361
- <span class="label">Grooming:</span>
 
 
 
 
 
 
 
 
 
362
  <span class="value">{description['Grooming Needs']}</span>
363
  </div>
364
  <div class="info-item">
365
- <span class="icon">⭐</span>
366
- <span class="label">Care Level:</span>
 
 
 
 
 
 
 
 
 
367
  <span class="value">{description['Care Level']}</span>
368
  </div>
369
  </div>
370
-
371
  <h2 class="section-title">
372
  <span class="icon">👨‍👩‍👧‍👦</span> FAMILY COMPATIBILITY
373
  </h2>
374
  <div class="family-section">
375
  <div class="info-item">
376
- <span class="icon"></span>
377
- <span class="label">Good with Children:</span>
 
 
 
 
 
 
 
 
 
378
  <span class="value">{description['Good with Children']}</span>
379
  </div>
380
  </div>
381
-
382
  <h2 class="section-title">
383
  <span class="icon">📝</span> DESCRIPTION
384
  </h2>
385
  <div class="description-section">
386
  <p>{description.get('Description', '')}</p>
387
  </div>
388
-
389
  <div class="action-section">
390
  <a href="{get_akc_breeds_link(breed)}" target="_blank" class="akc-button">
391
  <span class="icon">🌐</span>
@@ -464,7 +527,7 @@ async def predict(image):
464
  font-weight: 700;
465
  color: #2c3e50;
466
  margin: 32px 0 20px 0;
467
- padding: 12px 0; /* 修正padding寫法並增加上下內距 */
468
  border-bottom: 2px solid #e1e4e8;
469
  text-transform: uppercase;
470
  letter-spacing: 0.5px;
@@ -473,18 +536,6 @@ async def predict(image):
473
  gap: 8px;
474
  position: relative;
475
  }}
476
-
477
- .section-title::before {{ /* 新增標題左側強調條 */
478
- content: '';
479
- position: absolute;
480
- left: -28px;
481
- top: 50%;
482
- transform: translateY(-50%);
483
- width: 4px;
484
- height: 70%;
485
- background: #2c3e50;
486
- border-radius: 2px;
487
- }}
488
 
489
  .icon {{
490
  font-size: 1.2em;
@@ -684,6 +735,55 @@ async def predict(image):
684
  text-decoration: underline;
685
  color: #D3E3F0;
686
  }}
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
687
  </style>
688
  {dogs_info}
689
  """
@@ -734,18 +834,92 @@ def format_description_html(description, breed):
734
  if isinstance(description, dict):
735
  for key, value in description.items():
736
  if key != "Breed": # 跳過重複的品種顯示
737
- html += f"<li style='margin-bottom: 10px;'><strong>{key}:</strong> {value}</li>"
738
- elif isinstance(description, str):
739
- html += f"<li>{description}</li>"
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
740
  else:
741
- html += f"<li>No description available for {breed}</li>"
742
  html += "</ul>"
743
 
744
- # 修改連結的生成方式
745
- akc_link = get_akc_breeds_link(breed)
746
  html += f'''
747
  <div class="action-section">
748
- <a href="{akc_link}" target="_blank" class="akc-button">
749
  <span class="icon">🌐</span>
750
  Learn more about {breed} on AKC website
751
  </a>
 
329
  </h2>
330
  <div class="info-section">
331
  <div class="info-item">
332
+ <span class="tooltip">
333
+ <span class="icon">📏</span>
334
+ <span class="label">Size:</span>
335
+ <span class="tooltip-icon">ⓘ</span>
336
+ <span class="tooltip-text">
337
+ <strong>Size Categories:</strong><br>
338
+ • Small: Under 20 pounds<br>
339
+ • Medium: 20-60 pounds<br>
340
+ • Large: Over 60 pounds
341
+ </span>
342
+ </span>
343
  <span class="value">{description['Size']}</span>
344
  </div>
345
  <div class="info-item">
346
+ <span class="tooltip">
347
+ <span class="icon">⏳</span>
348
+ <span class="label">Lifespan:</span>
349
+ <span class="tooltip-icon">ⓘ</span>
350
+ <span class="tooltip-text">
351
+ <strong>Average Lifespan:</strong><br>
352
+ • Typical range for most breeds<br>
353
+ • Varies based on care and genetics<br>
354
+ • Regular vet check-ups recommended
355
+ </span>
356
+ </span>
357
  <span class="value">{description['Lifespan']}</span>
358
  </div>
359
  </div>
360
+
361
  <h2 class="section-title">
362
  <span class="icon">🐕</span> TEMPERAMENT & PERSONALITY
363
  </h2>
364
  <div class="temperament-section">
365
+ <span class="tooltip">
366
+ <span class="value">{description['Temperament']}</span>
367
+ <span class="tooltip-icon">ⓘ</span>
368
+ <span class="tooltip-text">
369
+ <strong>Temperament Guide:</strong><br>
370
+ • Describes the dog's natural behavior and personality<br>
371
+ • Important for matching with owner's lifestyle<br>
372
+ • Can be influenced by training and socialization
373
+ </span>
374
+ </span>
375
  </div>
376
+
377
  <h2 class="section-title">
378
  <span class="icon">💪</span> CARE REQUIREMENTS
379
  </h2>
380
  <div class="care-section">
381
  <div class="info-item">
382
+ <span class="tooltip">
383
+ <span class="icon">🏃</span>
384
+ <span class="label">Exercise:</span>
385
+ <span class="tooltip-icon">ⓘ</span>
386
+ <span class="tooltip-text">
387
+ <strong>Exercise Needs:</strong><br>
388
+ • High: 2+ hours of daily exercise<br>
389
+ • Moderate: 1-2 hours of daily activity<br>
390
+ • Low: Short walks and play sessions
391
+ </span>
392
+ </span>
393
  <span class="value">{description['Exercise Needs']}</span>
394
  </div>
395
  <div class="info-item">
396
+ <span class="tooltip">
397
+ <span class="icon">✂️</span>
398
+ <span class="label">Grooming:</span>
399
+ <span class="tooltip-icon">ⓘ</span>
400
+ <span class="tooltip-text">
401
+ <strong>Grooming Requirements:</strong><br>
402
+ • High: Daily brushing, regular professional care<br>
403
+ • Moderate: Weekly brushing, occasional grooming<br>
404
+ • Low: Minimal brushing, basic maintenance
405
+ </span>
406
+ </span>
407
  <span class="value">{description['Grooming Needs']}</span>
408
  </div>
409
  <div class="info-item">
410
+ <span class="tooltip">
411
+ <span class="icon">⭐</span>
412
+ <span class="label">Care Level:</span>
413
+ <span class="tooltip-icon">ⓘ</span>
414
+ <span class="tooltip-text">
415
+ <strong>Care Level Explained:</strong><br>
416
+ • High: Needs significant training and attention<br>
417
+ • Moderate: Regular care and routine needed<br>
418
+ • Low: More independent, basic care sufficient
419
+ </span>
420
+ </span>
421
  <span class="value">{description['Care Level']}</span>
422
  </div>
423
  </div>
424
+
425
  <h2 class="section-title">
426
  <span class="icon">👨‍👩‍👧‍👦</span> FAMILY COMPATIBILITY
427
  </h2>
428
  <div class="family-section">
429
  <div class="info-item">
430
+ <span class="tooltip">
431
+ <span class="icon">👶</span>
432
+ <span class="label">Good with Children:</span>
433
+ <span class="tooltip-icon">ⓘ</span>
434
+ <span class="tooltip-text">
435
+ <strong>Child Compatibility:</strong><br>
436
+ • Yes: Excellent with kids, patient and gentle<br>
437
+ • Moderate: Good with older children<br>
438
+ • No: Better suited for adult households
439
+ </span>
440
+ </span>
441
  <span class="value">{description['Good with Children']}</span>
442
  </div>
443
  </div>
444
+
445
  <h2 class="section-title">
446
  <span class="icon">📝</span> DESCRIPTION
447
  </h2>
448
  <div class="description-section">
449
  <p>{description.get('Description', '')}</p>
450
  </div>
451
+
452
  <div class="action-section">
453
  <a href="{get_akc_breeds_link(breed)}" target="_blank" class="akc-button">
454
  <span class="icon">🌐</span>
 
527
  font-weight: 700;
528
  color: #2c3e50;
529
  margin: 32px 0 20px 0;
530
+ padding: 12px 0;
531
  border-bottom: 2px solid #e1e4e8;
532
  text-transform: uppercase;
533
  letter-spacing: 0.5px;
 
536
  gap: 8px;
537
  position: relative;
538
  }}
 
 
 
 
 
 
 
 
 
 
 
 
539
 
540
  .icon {{
541
  font-size: 1.2em;
 
735
  text-decoration: underline;
736
  color: #D3E3F0;
737
  }}
738
+
739
+ .tooltip {{
740
+ position: relative;
741
+ display: inline-flex;
742
+ align-items: center;
743
+ gap: 4px;
744
+ cursor: help;
745
+ }}
746
+
747
+ .tooltip .tooltip-icon {{
748
+ font-size: 14px;
749
+ color: #666;
750
+ }}
751
+
752
+ .tooltip .tooltip-text {{
753
+ visibility: hidden;
754
+ width: 250px;
755
+ background-color: #2c3e50;
756
+ color: white;
757
+ text-align: left;
758
+ border-radius: 8px;
759
+ padding: 12px;
760
+ position: absolute;
761
+ z-index: 100;
762
+ bottom: 125%;
763
+ left: 50%;
764
+ transform: translateX(-50%);
765
+ opacity: 0;
766
+ transition: all 0.3s ease;
767
+ font-size: 14px;
768
+ line-height: 1.4;
769
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
770
+ }}
771
+
772
+ .tooltip:hover .tooltip-text {{
773
+ visibility: visible;
774
+ opacity: 1;
775
+ }}
776
+
777
+ .tooltip .tooltip-text::after {{
778
+ content: "";
779
+ position: absolute;
780
+ top: 100%;
781
+ left: 50%;
782
+ margin-left: -5px;
783
+ border-width: 5px;
784
+ border-style: solid;
785
+ border-color: #2c3e50 transparent transparent transparent;
786
+ }}
787
  </style>
788
  {dogs_info}
789
  """
 
834
  if isinstance(description, dict):
835
  for key, value in description.items():
836
  if key != "Breed": # 跳過重複的品種顯示
837
+ if key == "Size":
838
+ html += f'''
839
+ <li style='margin-bottom: 10px;'>
840
+ <span class="tooltip">
841
+ <strong>{key}:</strong>
842
+ <span class="tooltip-icon">ⓘ</span>
843
+ <span class="tooltip-text">
844
+ <strong>Size Categories:</strong><br>
845
+ • Small: Under 20 pounds<br>
846
+ • Medium: 20-60 pounds<br>
847
+ • Large: Over 60 pounds
848
+ </span>
849
+ </span> {value}
850
+ </li>
851
+ '''
852
+ elif key == "Exercise Needs":
853
+ html += f'''
854
+ <li style='margin-bottom: 10px;'>
855
+ <span class="tooltip">
856
+ <strong>{key}:</strong>
857
+ <span class="tooltip-icon">ⓘ</span>
858
+ <span class="tooltip-text">
859
+ <strong>Exercise Needs:</strong><br>
860
+ • High: 2+ hours of daily exercise<br>
861
+ • Moderate: 1-2 hours of daily activity<br>
862
+ • Low: Short walks and play sessions
863
+ </span>
864
+ </span> {value}
865
+ </li>
866
+ '''
867
+ elif key == "Grooming Needs":
868
+ html += f'''
869
+ <li style='margin-bottom: 10px;'>
870
+ <span class="tooltip">
871
+ <strong>{key}:</strong>
872
+ <span class="tooltip-icon">ⓘ</span>
873
+ <span class="tooltip-text">
874
+ <strong>Grooming Requirements:</strong><br>
875
+ • High: Daily brushing, regular professional care<br>
876
+ • Moderate: Weekly brushing, occasional grooming<br>
877
+ • Low: Minimal brushing, basic maintenance
878
+ </span>
879
+ </span> {value}
880
+ </li>
881
+ '''
882
+ elif key == "Care Level":
883
+ html += f'''
884
+ <li style='margin-bottom: 10px;'>
885
+ <span class="tooltip">
886
+ <strong>{key}:</strong>
887
+ <span class="tooltip-icon">ⓘ</span>
888
+ <span class="tooltip-text">
889
+ <strong>Care Level Explained:</strong><br>
890
+ • High: Needs significant training and attention<br>
891
+ • Moderate: Regular care and routine needed<br>
892
+ • Low: More independent, basic care sufficient
893
+ </span>
894
+ </span> {value}
895
+ </li>
896
+ '''
897
+ elif key == "Good with Children":
898
+ html += f'''
899
+ <li style='margin-bottom: 10px;'>
900
+ <span class="tooltip">
901
+ <strong>{key}:</strong>
902
+ <span class="tooltip-icon">ⓘ</span>
903
+ <span class="tooltip-text">
904
+ <strong>Child Compatibility:</strong><br>
905
+ • Yes: Excellent with kids, patient and gentle<br>
906
+ • Moderate: Good with older children<br>
907
+ • No: Better suited for adult households
908
+ </span>
909
+ </span> {value}
910
+ </li>
911
+ '''
912
+ else:
913
+ # 其他欄位保持原樣顯示
914
+ html += f"<li style='margin-bottom: 10px;'><strong>{key}:</strong> {value}</li>"
915
  else:
916
+ html += f"<li>{description}</li>"
917
  html += "</ul>"
918
 
919
+ # 添加AKC連結
 
920
  html += f'''
921
  <div class="action-section">
922
+ <a href="{get_akc_breeds_link(breed)}" target="_blank" class="akc-button">
923
  <span class="icon">🌐</span>
924
  Learn more about {breed} on AKC website
925
  </a>