Update breed_detection.py

breed_detection.py

@@ -2,151 +2,56 @@ 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;
+    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;
                 '>
-                    <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
-            )
+                    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,