Hugging Face's logo

Spaces:
DawnC
/
PawMatchAI
Running on Zero

App Files Community
1
DawnC commited on
Commit
7f45261
·
1 Parent(s): c593d9e

Update app.py

Browse files
Files changed (1) hide show
  1. app.py +222 -221
app.py CHANGED
@@ -600,6 +600,7 @@ async def predict(image):
600
 
601
  dogs_info += '</div>'
602
 
 
603
  html_output = f"""
604
  <style>
605
  .dog-info-card {{
@@ -611,227 +612,227 @@ async def predict(image):
611
  overflow: hidden;
612
  transition: all 0.3s ease;
613
  background: white;
614
- }}
615
-
616
-
617
- .dog-info-card:hover {{
618
- box-shadow: 0 4px 16px rgba(0,0,0,0.12);
619
- }}
620
-
621
- .dog-info-header {{
622
- padding: 20px 24px;
623
- margin: 0;
624
- font-size: 22px;
625
- font-weight: bold;
626
- border-bottom: 1px solid #e1e4e8;
627
- }}
628
-
629
- .breed-info {{
630
- padding: 24px;
631
- line-height: 1.6;
632
- }}
633
-
634
- .section-title {{
635
- font-size: 1.2em;
636
- font-weight: 700;
637
- color: #2c3e50;
638
- margin: 28px 0 16px 0;
639
- padding-bottom: 8px;
640
- border-bottom: 2px solid #e1e4e8;
641
- text-transform: uppercase;
642
- letter-spacing: 0.5px;
643
- display: flex;
644
- align-items: center;
645
- gap: 8px;
646
- }}
647
-
648
- .icon {{
649
- font-size: 1.2em;
650
- display: inline-flex;
651
- align-items: center;
652
- justify-content: center;
653
- }}
654
-
655
- .info-section, .care-section, .family-section {{
656
- display: flex;
657
- flex-wrap: wrap;
658
- gap: 16px;
659
- margin-bottom: 20px;
660
- }}
661
-
662
- .info-item {{
663
- background: #f8f9fa;
664
- padding: 12px 16px;
665
- border-radius: 8px;
666
- display: flex;
667
- align-items: center;
668
- gap: 8px;
669
- box-shadow: 0 1px 3px rgba(0,0,0,0.05);
670
- }}
671
-
672
- .label {{
673
- color: #666;
674
- font-weight: 600;
675
- }}
676
-
677
- .value {{
678
- color: #2c3e50;
679
- }}
680
-
681
- .temperament-section {{
682
- background: #f8f9fa;
683
- padding: 16px;
684
- border-radius: 8px;
685
- margin-bottom: 20px;
686
- color: #444;
687
- }}
688
-
689
- .description-section {{
690
- background: #f8f9fa;
691
- padding: 16px;
692
- border-radius: 8px;
693
- margin: 20px 0;
694
- line-height: 1.8;
695
- color: #444;
696
- }}
697
-
698
- .action-section {{
699
- margin-top: 24px;
700
- text-align: center;
701
- }}
702
-
703
- .akc-button {{
704
- display: inline-flex;
705
- align-items: center;
706
- padding: 12px 24px;
707
- background-color: #4A90E2;
708
- color: white;
709
- border-radius: 8px;
710
- text-decoration: none;
711
- gap: 8px;
712
- transition: all 0.3s ease;
713
- font-weight: 500;
714
- }}
715
-
716
- .akc-button:hover {{
717
- background-color: #357ABD;
718
- transform: translateY(-1px);
719
- color: white;
720
- }}
721
-
722
- .warning-message {{
723
- display: flex;
724
- align-items: center;
725
- gap: 8px;
726
- color: #ff3b30;
727
- font-weight: 500;
728
- margin: 0;
729
- padding: 16px;
730
- background: #fff5f5;
731
- border-radius: 8px;
732
- }}
733
-
734
- .model-uncertainty-note {{
735
- display: flex;
736
- align-items: center;
737
- gap: 12px;
738
- padding: 16px;
739
- background-color: #f8f9fa;
740
- border-left: 4px solid #6c757d;
741
- margin-bottom: 20px;
742
- color: #495057;
743
- border-radius: 4px;
744
- }}
745
-
746
- .breeds-list {{
747
- display: flex;
748
- flex-direction: column;
749
- gap: 20px;
750
- }}
751
-
752
- .breed-option {{
753
- background: white;
754
- border: 1px solid #e1e4e8;
755
- border-radius: 8px;
756
- overflow: hidden;
757
- }}
758
-
759
- .breed-header {{
760
- display: flex;
761
- align-items: center;
762
- padding: 16px;
763
- background: #f8f9fa;
764
- gap: 12px;
765
- border-bottom: 1px solid #e1e4e8;
766
- }}
767
-
768
- .option-number {{
769
- font-weight: 600;
770
- color: #666;
771
- padding: 4px 8px;
772
- background: #e1e4e8;
773
- border-radius: 4px;
774
- }}
775
-
776
- .breed-name {{
777
- font-size: 1.1em;
778
- font-weight: bold;
779
- color: #2c3e50;
780
- flex-grow: 1;
781
- }}
782
-
783
- .confidence-badge {{
784
- padding: 4px 12px;
785
- border-radius: 20px;
786
- font-size: 0.9em;
787
- font-weight: 500;
788
- }}
789
-
790
- .breed-content {{
791
- padding: 20px;
792
- }}
793
-
794
- ul {{
795
- padding-left: 0;
796
- margin: 0;
797
- list-style-type: none;
798
- }}
799
-
800
- li {{
801
- margin-bottom: 8px;
802
- display: flex;
803
- align-items: center;
804
- gap: 8px;
805
- }}
806
-
807
- .akc-link {{
808
- color: #4A90E2;
809
- text-decoration: none;
810
- font-weight: 500;
811
- transition: all 0.3s ease;
812
- }}
813
-
814
- .akc-link:hover {{
815
- text-decoration: underline;
816
- color: #357ABD;
817
- }}
818
- </style>
819
- {dogs_info}
820
- """
821
-
822
- initial_state = {
823
- "dogs_info": dogs_info,
824
- "image": annotated_image,
825
- "is_multi_dog": len(dogs) > 1,
826
- "html_output": html_output
827
- }
828
-
829
- return html_output, annotated_image, initial_state
830
-
831
- except Exception as e:
832
- error_msg = f"An error occurred: {str(e)}\n\nTraceback:\n{traceback.format_exc()}"
833
- print(error_msg)
834
- return error_msg, None, None
835
 
836
 
837
 
 
600
 
601
  dogs_info += '</div>'
602
 
603
+
604
  html_output = f"""
605
  <style>
606
  .dog-info-card {{
 
612
  overflow: hidden;
613
  transition: all 0.3s ease;
614
  background: white;
615
+ }}
616
+
617
+ .dog-info-card:hover {{
618
+ box-shadow: 0 4px 16px rgba(0,0,0,0.12);
619
+ }}
620
+
621
+ .dog-info-header {{
622
+ padding: 20px 24px;
623
+ margin: 0;
624
+ font-size: 22px;
625
+ font-weight: bold;
626
+ border-bottom: 1px solid #e1e4e8;
627
+ }}
628
+
629
+ .breed-info {{
630
+ padding: 24px;
631
+ line-height: 1.6;
632
+ }}
633
+
634
+ .section-title {{
635
+ font-size: 1.2em;
636
+ font-weight: 700;
637
+ color: #2c3e50;
638
+ margin: 28px 0 16px 0;
639
+ padding-bottom: 8px;
640
+ border-bottom: 2px solid #e1e4e8;
641
+ text-transform: uppercase;
642
+ letter-spacing: 0.5px;
643
+ display: flex;
644
+ align-items: center;
645
+ gap: 8px;
646
+ }}
647
+
648
+ .icon {{
649
+ font-size: 1.2em;
650
+ display: inline-flex;
651
+ align-items: center;
652
+ justify-content: center;
653
+ }}
654
+
655
+ .info-section, .care-section, .family-section {{
656
+ display: flex;
657
+ flex-wrap: wrap;
658
+ gap: 16px;
659
+ margin-bottom: 20px;
660
+ }}
661
+
662
+ .info-item {{
663
+ background: #f8f9fa;
664
+ padding: 12px 16px;
665
+ border-radius: 8px;
666
+ display: flex;
667
+ align-items: center;
668
+ gap: 8px;
669
+ box-shadow: 0 1px 3px rgba(0,0,0,0.05);
670
+ }}
671
+
672
+ .label {{
673
+ color: #666;
674
+ font-weight: 600;
675
+ }}
676
+
677
+ .value {{
678
+ color: #2c3e50;
679
+ }}
680
+
681
+ .temperament-section {{
682
+ background: #f8f9fa;
683
+ padding: 16px;
684
+ border-radius: 8px;
685
+ margin-bottom: 20px;
686
+ color: #444;
687
+ }}
688
+
689
+ .description-section {{
690
+ background: #f8f9fa;
691
+ padding: 16px;
692
+ border-radius: 8px;
693
+ margin: 20px 0;
694
+ line-height: 1.8;
695
+ color: #444;
696
+ }}
697
+
698
+ .action-section {{
699
+ margin-top: 24px;
700
+ text-align: center;
701
+ }}
702
+
703
+ .akc-button {{
704
+ display: inline-flex;
705
+ align-items: center;
706
+ padding: 12px 24px;
707
+ background-color: #4A90E2;
708
+ color: white;
709
+ border-radius: 8px;
710
+ text-decoration: none;
711
+ gap: 8px;
712
+ transition: all 0.3s ease;
713
+ font-weight: 500;
714
+ }}
715
+
716
+ .akc-button:hover {{
717
+ background-color: #357ABD;
718
+ transform: translateY(-1px);
719
+ color: white;
720
+ }}
721
+
722
+ .warning-message {{
723
+ display: flex;
724
+ align-items: center;
725
+ gap: 8px;
726
+ color: #ff3b30;
727
+ font-weight: 500;
728
+ margin: 0;
729
+ padding: 16px;
730
+ background: #fff5f5;
731
+ border-radius: 8px;
732
+ }}
733
+
734
+ .model-uncertainty-note {{
735
+ display: flex;
736
+ align-items: center;
737
+ gap: 12px;
738
+ padding: 16px;
739
+ background-color: #f8f9fa;
740
+ border-left: 4px solid #6c757d;
741
+ margin-bottom: 20px;
742
+ color: #495057;
743
+ border-radius: 4px;
744
+ }}
745
+
746
+ .breeds-list {{
747
+ display: flex;
748
+ flex-direction: column;
749
+ gap: 20px;
750
+ }}
751
+
752
+ .breed-option {{
753
+ background: white;
754
+ border: 1px solid #e1e4e8;
755
+ border-radius: 8px;
756
+ overflow: hidden;
757
+ }}
758
+
759
+ .breed-header {{
760
+ display: flex;
761
+ align-items: center;
762
+ padding: 16px;
763
+ background: #f8f9fa;
764
+ gap: 12px;
765
+ border-bottom: 1px solid #e1e4e8;
766
+ }}
767
+
768
+ .option-number {{
769
+ font-weight: 600;
770
+ color: #666;
771
+ padding: 4px 8px;
772
+ background: #e1e4e8;
773
+ border-radius: 4px;
774
+ }}
775
+
776
+ .breed-name {{
777
+ font-size: 1.1em;
778
+ font-weight: bold;
779
+ color: #2c3e50;
780
+ flex-grow: 1;
781
+ }}
782
+
783
+ .confidence-badge {{
784
+ padding: 4px 12px;
785
+ border-radius: 20px;
786
+ font-size: 0.9em;
787
+ font-weight: 500;
788
+ }}
789
+
790
+ .breed-content {{
791
+ padding: 20px;
792
+ }}
793
+
794
+ ul {{
795
+ padding-left: 0;
796
+ margin: 0;
797
+ list-style-type: none;
798
+ }}
799
+
800
+ li {{
801
+ margin-bottom: 8px;
802
+ display: flex;
803
+ align-items: center;
804
+ gap: 8px;
805
+ }}
806
+
807
+ .akc-link {{
808
+ color: #4A90E2;
809
+ text-decoration: none;
810
+ font-weight: 500;
811
+ transition: all 0.3s ease;
812
+ }}
813
+
814
+ .akc-link:hover {{
815
+ text-decoration: underline;
816
+ color: #357ABD;
817
+ }}
818
+ </style>
819
+ {dogs_info}
820
+ """
821
+
822
+ initial_state = {
823
+ "dogs_info": dogs_info,
824
+ "image": annotated_image,
825
+ "is_multi_dog": len(dogs) > 1,
826
+ "html_output": html_output
827
+ }
828
+
829
+ return html_output, annotated_image, initial_state
830
+
831
+ except Exception as e:
832
+ error_msg = f"An error occurred: {str(e)}\n\nTraceback:\n{traceback.format_exc()}"
833
+ print(error_msg)
834
+ return error_msg, None, None
835
+
836
 
837
 
838