Hugging Face's logo

Spaces:
DawnC
/
PawMatchAI
Running on Zero

App Files Community
1
PawMatchAI
File size: 5,559 Bytes 
ee184bc
 
 
 
de606c8
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
ee184bc
de606c8
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
ee184bc
de606c8
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
ee184bc
 
 
 
 
 
 
 
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
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
 
import re
import gradio as gr
from PIL import Image

# def create_detection_tab(predict_fn, example_images):
#     with gr.TabItem("Breed Detection"):
#         gr.HTML("""
#             <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;
#                 '>
#                     Upload a picture of a dog, and the model will predict its breed and provide detailed information!
#                 </p>
#                 <p style='
#                     font-size: 0.9em;
#                     color: #666;
#                     margin-top: 8px;
#                     padding: 0 20px;
#                 '>
#                     Note: The model's predictions may not always be 100% accurate, and it is recommended to use the results as a reference.
#                 </p>
#             </div>
#         """)
        
#         with gr.Row():
#             input_image = gr.Image(label="Upload a dog image", type="pil")
#             output_image = gr.Image(label="Annotated Image")

#         output = gr.HTML(label="Prediction Results")
#         initial_state = gr.State()

#         input_image.change(
#             predict_fn,
#             inputs=input_image,
#             outputs=[output, output_image, initial_state]
#         )

#         gr.Examples(
#             examples=example_images,
#             inputs=input_image
#         )

#     return {
#         'input_image': input_image,
#         'output_image': output_image,
#         'output': output,
#         'initial_state': initial_state
#     }


def create_detection_tab(predict_fn, example_images):
    # 首先定義CSS樣式
    custom_css = """
        /* 標籤樣式 */
        .tab-nav {
            padding: 0 !important;
            margin-bottom: 20px !important;
            border-bottom: 1px solid #e2e8f0 !important;
        }
        
        /* 所有標籤的基本樣式 */
        .tab-nav button {
            padding: 12px 16px !important;
            margin: 0 8px !important;
            font-size: 1.1em !important;
            font-weight: 500 !important;
            transition: all 0.3s ease !important;
            border-bottom: 2px solid transparent !important;
            background: none !important;
            position: relative !important;
        }
        
        /* 被選中的標籤樣式 */
        .tab-nav button.selected {
            color: #4299e1 !important;
            border-bottom: 2px solid #4299e1 !important;
            background: linear-gradient(to bottom, rgba(66, 153, 225, 0.1), transparent) !important;
        }
        
        /* hover 效果 */
        .tab-nav button:hover {
            color: #4299e1 !important;
            background: rgba(66, 153, 225, 0.05) !important;
        }
    """

    with gr.Blocks(css=custom_css) as detection_tab:
        with gr.TabItem("Breed Detection"):
            gr.HTML("""
                <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;
                    '>
                        Upload a picture of a dog, and the model will predict its breed and provide detailed information!
                    </p>
                    <p style='
                        font-size: 0.9em;
                        color: #666;
                        margin-top: 8px;
                        padding: 0 20px;
                    '>
                        Note: The model's predictions may not always be 100% accurate, and it is recommended to use the results as a reference.
                    </p>
                </div>
            """)

            with gr.Row():
                input_image = gr.Image(label="Upload a dog image", type="pil")
                output_image = gr.Image(label="Annotated Image")
            
            output = gr.HTML(label="Prediction Results")
            initial_state = gr.State()

            input_image.change(
                predict_fn,
                inputs=input_image,
                outputs=[output, output_image, initial_state]
            )

            gr.Examples(
                examples=example_images,
                inputs=input_image
            )

    return {
        'input_image': input_image,
        'output_image': output_image,
        'output': output,
        'initial_state': initial_state
    }