Update app.py

app.py

@@ -40,6 +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 */
     body {
         font-family: 'Arial', sans-serif;
         background: linear-gradient(135deg, #FF6F61, #FF9F9F, #FFEB3B);
@@ -61,19 +62,19 @@ interface = gr.Interface(
         100% { background-position: 0% 50%; }
     }
 
-    /* Adding the background animation */
+    /* Container styling for the interface */
     .gradio-container {
         background: rgba(0, 0, 0, 0.5);
         border-radius: 20px;
-        padding: 20px;
-        width: 90%;
-        max-width: 700px;
+        padding: 30px;
+        width: 100%;
+        max-width: 900px;  /* Slightly larger for better compatibility */
         box-shadow: 0 8px 15px rgba(0, 0, 0, 0.5);
         overflow-y: auto;  /* Make content inside the container scrollable */
         animation: fadeIn 1s ease-out;
     }
 
-    /* Fade in effect for container */
+    /* Fade in effect */
     @keyframes fadeIn {
         from {
             opacity: 0;
@@ -83,6 +84,7 @@ interface = gr.Interface(
         }
     }
 
+    /* Header styles */
     .gradio-header {
         font-size: 2.5rem;
         font-weight: bold;
@@ -94,8 +96,12 @@ interface = gr.Interface(
         color: #ffffff;
         margin-top: 10px;
         font-style: italic;
+        max-width: 700px;
+        margin-left: auto;
+        margin-right: auto;
     }
 
+    /* Button styles with hover effect */
     .gr-button {
         background: linear-gradient(90deg, #4CAF50, #FFC107);
         color: white;
@@ -106,6 +112,7 @@ interface = gr.Interface(
         cursor: pointer;
         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;
     }
 
     .gr-button:hover {
@@ -120,12 +127,14 @@ interface = gr.Interface(
         box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
     }
 
+    /* Image container styling */
     .gr-image-container {
         margin-top: 20px;
         border-radius: 15px;
         box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
     }
 
+    /* Textbox styling */
     .gr-textbox {
         background-color: #333;
         color: #FFEB3B;
@@ -142,10 +151,26 @@ interface = gr.Interface(
         border: 2px solid #FF6F61;
     }
 
-    /* Ensuring buttons have dynamic behavior */
+    /* Button text formatting */
     .gradio-button {
         text-transform: uppercase;
     }
+
+    /* Mobile responsiveness */
+    @media screen and (max-width: 768px) {
+        .gradio-container {
+            padding: 15px;
+            width: 90%;
+        }
+
+        .gradio-header {
+            font-size: 2rem;
+        }
+
+        .gr-button {
+            width: 100%;
+        }
+    }
     """
 )