Fix broken layout and restore full Gradio interface

app.py

@@ -118,86 +118,21 @@ def predict(image: np.ndarray, confidence: float) -> Tuple[np.ndarray, str]:
 def build_interface() -> gr.Blocks:
     """Create the Gradio Blocks interface."""
     custom_css = """
-    :root {
-      --bg-1: #0b1220;
-      --bg-2: #101a2f;
-      --panel: #121f38;
-      --panel-border: #2b3f66;
-      --text-main: #e9f0ff;
-      --text-sub: #a8bddf;
-      --accent: #22c1a1;
-      --accent-2: #f59e0b;
-    }
-
-    #app-shell {
-      background: radial-gradient(1200px 500px at 10% -10%, #1b2d52 0%, transparent 60%),
-                  radial-gradient(1100px 500px at 100% 0%, #21385e 0%, transparent 55%),
-                  linear-gradient(180deg, var(--bg-1), var(--bg-2));
-      min-height: 100vh;
-      color: var(--text-main);
-    }
-
-    #hero {
-      padding: 18px 20px;
-      border: 1px solid var(--panel-border);
-      border-radius: 16px;
-      background: linear-gradient(145deg, #13233f, #0f1b31);
-      box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
-      margin-bottom: 10px;
-    }
-
-    #hero h1 {
-      margin: 0;
-      font-size: 1.6rem;
-      letter-spacing: 0.3px;
-    }
-
-    #hero p {
-      margin: 8px 0 0;
-      color: var(--text-sub);
-    }
-
-    #input-panel, #output-panel {
-      border: 1px solid var(--panel-border);
-      border-radius: 14px;
-      background: color-mix(in oklab, var(--panel) 93%, black 7%);
-      padding: 10px;
-    }
-
-    #detect-btn button {
-      background: linear-gradient(90deg, var(--accent), #17a589) !important;
-      border: 0 !important;
-      color: #04201a !important;
-      font-weight: 700 !important;
-    }
-
-    #input-image, #detection-image {
-      min-height: 460px;
-    }
-
-    #input-image img, #detection-image img {
-      object-fit: contain !important;
-      background: #0b1428;
-      border-radius: 10px;
-    }
-
-    #time-box textarea {
-      font-weight: 600;
-      color: var(--text-main) !important;
-    }
+    .gradio-container {max-width: 1200px !important; margin: 0 auto !important;}
+    #input-panel, #output-panel {border-radius: 14px; border: 1px solid #d7deea; padding: 10px;}
+    #detect-btn button {font-weight: 700 !important;}
+    #input-image, #detection-image {height: 460px !important; min-height: 460px !important;}
+    #input-image img, #detection-image img {object-fit: contain !important;}
     """
 
     with gr.Blocks(title="Analog Clock Time Detector", css=custom_css) as demo:
-        gr.HTML(
+        gr.Markdown(
             """
-            <div id='app-shell'>
-              <div id='hero'>
-                <h1>Analog Clock Time Detector</h1>
-                <p>Upload an analog clock photo and get a clean visual detection with predicted time in seconds precision when available.</p>
-              </div>
-            </div>
+            # Analog Clock Time Detector
+            Detect the time from analog watch or clock images with YOLOv8.
             """
         )
+        gr.Markdown("Upload an image, set confidence and click **Detect time**.")
 
         with gr.Row(equal_height=True):
             with gr.Column(elem_id="input-panel"):