Update app.py

app.py

@@ -7,19 +7,21 @@ import yolov9
 HTML_TEMPLATE = """
 <style>
     body {
-        background: linear-gradient(135deg, #2c3e50, #34495e, #95a5a6);
-        font-family: 'Arial', sans-serif;
+        background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
+        font-family: 'Roboto', sans-serif;
         color: #ecf0f1;
+        min-height: 100vh;
     }
     #app-header {
         text-align: center;
-        background: rgba(52, 73, 94, 0.9);
-        padding: 30px;
+        background: rgba(26, 42, 108, 0.8);
+        padding: 40px;
         border-radius: 20px;
-        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
+        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
         position: relative;
         overflow: hidden;
-        margin-bottom: 30px;
+        margin-bottom: 40px;
+        backdrop-filter: blur(10px);
     }
     #app-header::before {
         content: "";
@@ -28,89 +30,104 @@ HTML_TEMPLATE = """
         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;
+        background: radial-gradient(circle, rgba(253,187,45,0.2) 0%, rgba(253,187,45,0) 70%);
+        animation: shimmer 20s 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);
+        color: #fdbb2d;
+        font-size: 3em;
+        margin-bottom: 20px;
+        text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
     }
     #app-header p {
-        font-size: 1.2em;
-        color: #bdc3c7;
+        font-size: 1.3em;
+        color: #ecf0f1;
     }
     .feature-container {
         display: flex;
         justify-content: center;
-        gap: 30px;
-        margin-top: 30px;
+        gap: 40px;
+        margin-top: 40px;
         flex-wrap: wrap;
     }
     .feature {
         position: relative;
-        transition: transform 0.3s, box-shadow 0.3s;
+        transition: all 0.4s ease;
         border-radius: 15px;
         overflow: hidden;
-        background: #2c3e50;
-        box-shadow: 0 5px 15px rgba(0,0,0,0.2);
+        background: rgba(178, 31, 31, 0.7);
+        box-shadow: 0 8px 20px rgba(0,0,0,0.3);
+        width: 180px;
+        height: 180px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
     }
     .feature:hover {
-        transform: translateY(-10px) rotate(2deg);
-        box-shadow: 0 15px 30px rgba(0,0,0,0.3);
+        transform: translateY(-15px) rotate(5deg) scale(1.05);
+        box-shadow: 0 20px 40px rgba(0,0,0,0.4);
+        background: rgba(253, 187, 45, 0.8);
     }
     .feature-icon {
-        font-size: 3em;
-        padding: 20px;
-        color: #e74c3c;
+        font-size: 4em;
+        color: #ecf0f1;
+        margin-bottom: 15px;
+        transition: all 0.4s ease;
+    }
+    .feature:hover .feature-icon {
+        transform: scale(1.2);
     }
     .feature-description {
-        background-color: #34495e;
         color: #ecf0f1;
-        padding: 10px;
-        font-size: 0.9em;
+        font-size: 1em;
         text-align: center;
+        padding: 0 10px;
+        transition: all 0.4s ease;
+    }
+    .feature:hover .feature-description {
+        font-weight: bold;
     }
     .artifact {
         position: absolute;
-        background: radial-gradient(circle, rgba(231,76,60,0.3) 0%, rgba(231,76,60,0) 70%);
+        background: radial-gradient(circle, rgba(253,187,45,0.3) 0%, rgba(253,187,45,0) 70%);
         border-radius: 50%;
         opacity: 0.5;
+        filter: blur(40px);
     }
     .artifact.large {
-        width: 400px;
-        height: 400px;
-        top: -100px;
-        left: -200px;
-        animation: float 20s infinite ease-in-out;
+        width: 600px;
+        height: 600px;
+        top: -200px;
+        left: -300px;
+        animation: float 30s infinite ease-in-out;
     }
     .artifact.medium {
-        width: 300px;
-        height: 300px;
-        bottom: -150px;
-        right: -150px;
-        animation: float 15s infinite ease-in-out reverse;
+        width: 400px;
+        height: 400px;
+        bottom: -200px;
+        right: -200px;
+        animation: float 25s infinite ease-in-out reverse;
     }
     .artifact.small {
-        width: 150px;
-        height: 150px;
+        width: 200px;
+        height: 200px;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
-        animation: pulse 5s infinite alternate;
+        animation: pulse 8s infinite alternate;
     }
     @keyframes float {
         0%, 100% { transform: translateY(0) rotate(0deg); }
-        50% { transform: translateY(-20px) rotate(10deg); }
+        50% { transform: translateY(-30px) rotate(15deg); }
     }
     @keyframes pulse {
-        0% { transform: scale(1); opacity: 0.5; }
-        100% { transform: scale(1.1); opacity: 0.8; }
+        0% { transform: scale(1) translate(-50%, -50%); opacity: 0.5; }
+        100% { transform: scale(1.2) translate(-50%, -50%); opacity: 0.8; }
     }
 </style>
 <div id="app-header">
@@ -118,28 +135,29 @@ HTML_TEMPLATE = """
     <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>
+    <p>Unleash the power of AI to detect manholes with precision</p>
     <div class="feature-container">
         <div class="feature">
-            <div class="feature-icon">🔍</div>
-            <div class="feature-description">High Accuracy Detection</div>
+            <div class="feature-icon">🎯</div>
+            <div class="feature-description">High Precision Detection</div>
         </div>
         <div class="feature">
             <div class="feature-icon">⚡</div>
-            <div class="feature-description">Fast Processing</div>
+            <div class="feature-description">Lightning-Fast Processing</div>
         </div>
         <div class="feature">
             <div class="feature-icon">🖼️</div>
-            <div class="feature-description">Image Size Adjustment</div>
+            <div class="feature-description">Dynamic Image Resizing</div>
         </div>
         <div class="feature">
-            <div class="feature-icon">🎚️</div>
-            <div class="feature-description">Customizable Thresholds</div>
+            <div class="feature-icon">🔧</div>
+            <div class="feature-description">Fine-Tuned Thresholds</div>
         </div>
     </div>
 </div>
 """
 
+# The rest of the Python code remains the same
 def yolov9_inference(img_path, image_size, conf_threshold, iou_threshold):
     model = yolov9.load('./best.pt')
     model.conf = conf_threshold