Update app.py

app.py

@@ -40,7 +40,7 @@ interface = gr.Interface(
     title="DTECTIFY, The Object Detection with Counts",
     description="Upload an image and let Detectify detect and count objects in real-time. Get annotated results with bounding boxes and an instant count of objects by category. Fast, accurate, and easy-to-use for all your object detection needs!",
     css="""
-    /* Overall body and background settings */
+    /* General body and background settings */
     body {
         font-family: 'Arial', sans-serif;
         background: linear-gradient(135deg, #FF6F61, #FF9F9F, #FFEB3B);
@@ -53,7 +53,7 @@ interface = gr.Interface(
         justify-content: center;
         align-items: center;
         text-align: center;
-        overflow-y: auto;  /* Enable scrolling */
+        overflow-y: auto;
     }
 
     @keyframes gradientBG {
@@ -62,15 +62,15 @@ interface = gr.Interface(
         100% { background-position: 0% 50%; }
     }
 
-    /* Container styling for the interface */
+    /* Main container styles */
     .gradio-container {
         background: rgba(0, 0, 0, 0.5);
         border-radius: 20px;
         padding: 30px;
         width: 100%;
-        max-width: 900px;  /* Slightly larger for better compatibility */
+        max-width: 800px;
         box-shadow: 0 8px 15px rgba(0, 0, 0, 0.5);
-        overflow-y: auto;  /* Make content inside the container scrollable */
+        overflow-y: auto;
         animation: fadeIn 1s ease-out;
     }
 
@@ -84,13 +84,14 @@ interface = gr.Interface(
         }
     }
 
-    /* Header styles */
+    /* Header styling */
     .gradio-header {
         font-size: 2.5rem;
         font-weight: bold;
         color: #FFEB3B;
     }
 
+    /* Description styling */
     .gradio-description {
         font-size: 1.2rem;
         color: #ffffff;
@@ -101,7 +102,7 @@ interface = gr.Interface(
         margin-right: auto;
     }
 
-    /* Button styles with hover effect */
+    /* Button styling with hover effect */
     .gr-button {
         background: linear-gradient(90deg, #4CAF50, #FFC107);
         color: white;
@@ -113,6 +114,7 @@ interface = gr.Interface(
         transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
         box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
         margin-top: 20px;
+        width: 200px;  /* Fixed width for consistency */
     }
 
     .gr-button:hover {
@@ -171,6 +173,13 @@ interface = gr.Interface(
             width: 100%;
         }
     }
+
+    /* Desktop and larger screen adjustments */
+    @media screen and (min-width: 1024px) {
+        .gr-button {
+            width: 250px;
+        }
+    }
     """
 )