Update app.py

app.py

@@ -20,27 +20,20 @@ def yolov9_inference(img_path, image_size, conf_threshold, iou_threshold):
 
 def app():
     with gr.Blocks() as demo:
-        gr.HTML(
-            """
-            <div style="text-align: center; max-width: 800px; margin: 0 auto;">
-                <h1 style="color: #2c3e50; font-size: 2.5em; margin-bottom: 0.5em;">YOLOv9: Manhole Detector</h1>
-                <p style="color: #34495e; font-size: 1.2em; margin-bottom: 1em;">Detect manholes in images using YOLOv9</p>
-            </div>
-            """
-        )
+        gr.HTML(HTML_TEMPLATE)
+        
         with gr.Row():
             with gr.Column(scale=1, min_width=300):
                 img_path = gr.Image(type="filepath", label="Upload Image")
-                gr.Markdown("### Model Parameters")
                 image_size = gr.Slider(label="Image Size", minimum=320, maximum=1280, step=32, value=640)
                 conf_threshold = gr.Slider(label="Confidence Threshold", minimum=0.1, maximum=1.0, step=0.1, value=0.4)
                 iou_threshold = gr.Slider(label="IoU Threshold", minimum=0.1, maximum=1.0, step=0.1, value=0.5)
-                yolov9_infer = gr.Button("Detect Manholes", variant="primary")
+                detect_button = gr.Button("Detect Manholes", variant="primary")
             
             with gr.Column(scale=1, min_width=300):
                 output_numpy = gr.Image(type="numpy", label="Detection Result")
         
-        yolov9_infer.click(
+        detect_button.click(
             fn=yolov9_inference,
             inputs=[img_path, image_size, conf_threshold, iou_threshold],
             outputs=[output_numpy]
@@ -58,33 +51,140 @@ def app():
         )
     
     return demo
-
 css = """
-body {
-    font-family: 'Arial', sans-serif;
-    background-color: #f0f3f6;
-}
-.gradio-container {
-    max-width: 900px !important;
-    margin-left: auto !important;
-    margin-right: auto !important;
-    background-color: white;
-    border-radius: 10px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-    padding: 20px;
-}
-.gr-button {
-    background-color: #3498db !important;
-    border: none !important;
-}
-.gr-button:hover {
-    background-color: #2980b9 !important;
-}
-.gr-form {
-    background-color: white;
-    padding: 15px;
-    border-radius: 8px;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+<style>
+    body {
+        background: linear-gradient(135deg, #2c3e50, #34495e, #95a5a6);
+        font-family: 'Arial', sans-serif;
+        color: #ecf0f1;
+    }
+    #app-header {
+        text-align: center;
+        background: rgba(52, 73, 94, 0.9);
+        padding: 30px;
+        border-radius: 20px;
+        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
+        position: relative;
+        overflow: hidden;
+        margin-bottom: 30px;
+    }
+    #app-header::before {
+        content: "";
+        position: absolute;
+        top: -50%;
+        left: -50%;
+        width: 200%;
+        height: 200%;
+        background: radial-gradient(circle, rgba(236,240,241,0.3) 0%, rgba(236,240,241,0) 70%);
+        animation: shimmer 15s infinite linear;
+    }
+    @keyframes shimmer {
+        0% { transform: rotate(0deg); }
+        100% { transform: rotate(360deg); }
+    }
+    #app-header h1 {
+        color: #e74c3c;
+        font-size: 2.5em;
+        margin-bottom: 15px;
+        text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
+    }
+    #app-header p {
+        font-size: 1.2em;
+        color: #bdc3c7;
+    }
+    .feature-container {
+        display: flex;
+        justify-content: center;
+        gap: 30px;
+        margin-top: 30px;
+        flex-wrap: wrap;
+    }
+    .feature {
+        position: relative;
+        transition: transform 0.3s, box-shadow 0.3s;
+        border-radius: 15px;
+        overflow: hidden;
+        background: #2c3e50;
+        box-shadow: 0 5px 15px rgba(0,0,0,0.2);
+    }
+    .feature:hover {
+        transform: translateY(-10px) rotate(2deg);
+        box-shadow: 0 15px 30px rgba(0,0,0,0.3);
+    }
+    .feature-icon {
+        font-size: 3em;
+        padding: 20px;
+        color: #e74c3c;
+    }
+    .feature-description {
+        background-color: #34495e;
+        color: #ecf0f1;
+        padding: 10px;
+        font-size: 0.9em;
+        text-align: center;
+    }
+    .artifact {
+        position: absolute;
+        background: radial-gradient(circle, rgba(231,76,60,0.3) 0%, rgba(231,76,60,0) 70%);
+        border-radius: 50%;
+        opacity: 0.5;
+    }
+    .artifact.large {
+        width: 400px;
+        height: 400px;
+        top: -100px;
+        left: -200px;
+        animation: float 20s infinite ease-in-out;
+    }
+    .artifact.medium {
+        width: 300px;
+        height: 300px;
+        bottom: -150px;
+        right: -150px;
+        animation: float 15s infinite ease-in-out reverse;
+    }
+    .artifact.small {
+        width: 150px;
+        height: 150px;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        animation: pulse 5s infinite alternate;
+    }
+    @keyframes float {
+        0%, 100% { transform: translateY(0) rotate(0deg); }
+        50% { transform: translateY(-20px) rotate(10deg); }
+    }
+    @keyframes pulse {
+        0% { transform: scale(1); opacity: 0.5; }
+        100% { transform: scale(1.1); opacity: 0.8; }
+    }
+</style>
+<div id="app-header">
+    <div class="artifact large"></div>
+    <div class="artifact medium"></div>
+    <div class="artifact small"></div>
+    <h1>YOLOv9: Manhole Detector</h1>
+    <p>Detect manholes in images with advanced AI technology</p>
+    <div class="feature-container">
+        <div class="feature">
+            <div class="feature-icon">🔍</div>
+            <div class="feature-description">High Accuracy Detection</div>
+        </div>
+        <div class="feature">
+            <div class="feature-icon">⚡</div>
+            <div class="feature-description">Fast Processing</div>
+        </div>
+        <div class="feature">
+            <div class="feature-icon">🖼️</div>
+            <div class="feature-description">Image Size Adjustment</div>
+        </div>
+        <div class="feature">
+            <div class="feature-icon">🎚️</div>
+            <div class="feature-description">Customizable Thresholds</div>
+        </div>
+    </div>
+</div>
 }
 """