Hugging Face's logo

Spaces:
DawnC
/
PawMatchAI
Running on Zero

App Files Community
1
PawMatchAI
File size: 5,858 Bytes 
8ada85f
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
 

import gradio as gr
from dog_database import get_dog_description

def create_comparison_tab(dog_breeds, get_dog_description):
    """εˆ›ε»Ίε“η§ζ―”θΎƒζ ‡η­Ύι‘΅

    Args:
        dog_breeds: η‹—ε“η§εˆ—θ‘¨
        get_dog_description: θŽ·ε–ε“η§ζθΏ°ηš„ε‡½ζ•°
    """
    with gr.TabItem("Breed Comparison"):
        gr.HTML("<p style='text-align: center;'>Select two dog breeds to compare their characteristics and care requirements.</p>")

        with gr.Row():
            breed1_dropdown = gr.Dropdown(
                choices=dog_breeds,
                label="Select First Breed",
                value="Golden_Retriever"
            )
            breed2_dropdown = gr.Dropdown(
                choices=dog_breeds,
                label="Select Second Breed",
                value="Border_Collie"
            )

        compare_btn = gr.Button("Compare Breeds")
        comparison_output = gr.HTML(label="Comparison Results")

        def show_comparison(breed1, breed2):
            if not breed1 or not breed2:
                return "Please select two breeds to compare"

            breed1_info = get_dog_description(breed1)
            breed2_info = get_dog_description(breed2)

            html_output = f"""
            <div class="dog-info-card">
                <div class="comparison-grid" style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px;">
                    <div class="breed-info">
                        <h2 class="section-title">
                            <span class="icon">πŸ•</span> {breed1.replace('_', ' ')}
                        </h2>
                        <div class="info-section">
                            <div class="info-item">
                                <span class="tooltip">
                                    <span class="icon">πŸ“</span>
                                    <span class="label">Size:</span>
                                    <span class="value">{breed1_info['Size']}</span>
                                </span>
                            </div>
                            <div class="info-item">
                                <span class="tooltip">
                                    <span class="icon">πŸƒ</span>
                                    <span class="label">Exercise Needs:</span>
                                    <span class="value">{breed1_info['Exercise Needs']}</span>
                                </span>
                            </div>
                            <div class="info-item">
                                <span class="tooltip">
                                    <span class="icon">βœ‚οΈ</span>
                                    <span class="label">Grooming:</span>
                                    <span class="value">{breed1_info['Grooming Needs']}</span>
                                </span>
                            </div>
                            <div class="info-item">
                                <span class="tooltip">
                                    <span class="icon">πŸ‘¨β€πŸ‘©β€πŸ‘§β€πŸ‘¦</span>
                                    <span class="label">Good with Children:</span>
                                    <span class="value">{breed1_info['Good with Children']}</span>
                                </span>
                            </div>
                        </div>
                    </div>

                    <div class="breed-info">
                        <h2 class="section-title">
                            <span class="icon">πŸ•</span> {breed2.replace('_', ' ')}
                        </h2>
                        <div class="info-section">
                            <div class="info-item">
                                <span class="tooltip">
                                    <span class="icon">πŸ“</span>
                                    <span class="label">Size:</span>
                                    <span class="value">{breed2_info['Size']}</span>
                                </span>
                            </div>
                            <div class="info-item">
                                <span class="tooltip">
                                    <span class="icon">πŸƒ</span>
                                    <span class="label">Exercise Needs:</span>
                                    <span class="value">{breed2_info['Exercise Needs']}</span>
                                </span>
                            </div>
                            <div class="info-item">
                                <span class="tooltip">
                                    <span class="icon">βœ‚οΈ</span>
                                    <span class="label">Grooming:</span>
                                    <span class="value">{breed2_info['Grooming Needs']}</span>
                                </span>
                            </div>
                            <div class="info-item">
                                <span class="tooltip">
                                    <span class="icon">πŸ‘¨β€πŸ‘©β€πŸ‘§β€πŸ‘¦</span>
                                    <span class="label">Good with Children:</span>
                                    <span class="value">{breed2_info['Good with Children']}</span>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            """
            return html_output

        compare_btn.click(
            show_comparison,
            inputs=[breed1_dropdown, breed2_dropdown],
            outputs=comparison_output
        )

    return {
        'breed1_dropdown': breed1_dropdown,
        'breed2_dropdown': breed2_dropdown,
        'compare_btn': compare_btn,
        'comparison_output': comparison_output
    }