Update app.py

app.py

@@ -135,33 +135,93 @@ def process_live_frame(frame):
     else:
         return processed, status_txt, None
 
-# ───────────────────────────── UI <--- CHANGE
-with gr.Blocks(title="Drive Paddy – Drowsiness Detection") as app:
-    gr.Markdown("# 🚗 **Drive Paddy** – Robust Alert Demo")
-    gr.Markdown("Webcam-based drowsiness detection · console shows real-time logs.")
-
-    with gr.Row():
-        with gr.Column(scale=2):
-            cam = gr.Image(sources=["webcam"], streaming=True, label="Live Camera Feed")
-        with gr.Column(scale=1):
-            out_img = gr.Image(label="Processed Feed")
-            out_text = gr.Textbox(label="Live Status", lines=3, interactive=False)
+
+# ───────────────────────────── UI Definition
+def create_readme_tab():
+    """Creates the content for the 'About' tab."""
+    with gr.Blocks(title="Drive Paddy - About Page") as readme_tab:
+        gr.Markdown(
+            """
+            <div align="center">
+              <img src="https://em-content.zobj.net/source/samsung/380/automobile_1f697.png" alt="Car Emoji" width="100"/>
+              <h1>Drive Paddy</h1>
+              <p><strong>Your Drowsiness Detection Assistant</strong></p>
+            </div>
+
+            ---
+
+            ## 🌟 Features
+            - **Real-Time Webcam Streaming**: Directly processes your live camera feed for immediate feedback.
+            - **Efficient Geometric Analysis**: Uses `MediaPipe` for high-performance facial landmark detection.
+            - **Multi-Signal Analysis**: Detects eye closure (EAR), yawns (MAR), and head-nodding.
+            - **Stateful Alert System**: Plays a clear audio alert for new drowsiness events and intelligently re-arms itself, preventing alert fatigue.
+            - **Low-Light Warning**: Automatically detects and warns about poor lighting conditions.
+            - **Configurable**: Key detection thresholds and settings can be tuned via `config.yaml`.
+
+            ---
+
+            ## 🛠️ How It Works
+            1.  **Video Streaming**: The `gradio.Image` component captures the camera feed.
+            2.  **Frame Processing**: Each frame is sent to the `GeometricProcessor`.
+            3.  **Stateful Alerting**: The `AlertManager` class uses internal state to decide if a *new* alert should be triggered.
+            4.  **Dynamic Updates**: The processed video, status text, and audio alerts are sent back to the frontend for a seamless real-time experience.
             
-            # This audio component now acts as a placeholder.
-            # We make it invisible because we don't need to show the player controls.
-            # The backend will dynamically send a new, playable component to it.
-            out_audio = gr.Audio(
-                label="Alert",
-                autoplay=True,
-                visible=False, # Hiding the component for a cleaner UX
-            )
-
-    # The gr.State for managing the timestamp is no longer needed, simplifying the stream call.
-    cam.stream(
-        fn=process_live_frame,
-        inputs=[cam],
-        outputs=[out_img, out_text, out_audio] # The output now targets the placeholder
-    )
+            ---
+
+            ## 💡 Understanding the Live Status
+            The status panel provides real-time feedback on the following parameters:
+
+            -   **`Lighting`**: Indicates the ambient light conditions.
+                -   `Good`: Sufficient light for reliable detection.
+                -   `Low`: Insufficient light. Detection is paused as the results would be unreliable.
+
+            -   **`Status`**: The overall assessed level of driver alertness.
+                -   `Awake`: The driver appears alert.
+                -   `Slightly Drowsy`: Early signs of fatigue have been detected.
+                -   `Very Drowsy`: Strong indicators of drowsiness are present. An alert is triggered.
+
+            -   **`Score`**: A numerical value representing the accumulated evidence of drowsiness based on the weighted indicators (eye closure, yawning, head pose). A higher score corresponds to a greater level of detected drowsiness.
+            """
+        )
+    return readme_tab
+
+    
+# ───────────────────────────── UI <--- CHANGE
+def create_detection_tab():
+    with gr.Blocks(title="Drive Paddy – 📹 Live Drowsiness Detection Tab") as detection_tab:
+        gr.Markdown("## 📹 Live Drowsiness Detection")
+        gr.Markdown("Press 'START' to activate your camera and begin monitoring. The console will show real-time logs.")
+    
+        with gr.Row():
+            with gr.Column(scale=2):
+                cam = gr.Image(sources=["webcam"], streaming=True, label="Live Camera Feed")
+            with gr.Column(scale=1):
+                out_img = gr.Image(label="Processed Feed")
+                out_text = gr.Textbox(label="Live Status", lines=3, interactive=False)
+                
+                # This audio component now acts as a placeholder.
+                # We make it invisible because we don't need to show the player controls.
+                # The backend will dynamically send a new, playable component to it.
+                out_audio = gr.Audio(
+                    label="Alert",
+                    autoplay=True,
+                    visible=False, # Hiding the component for a cleaner UX
+                )
+    
+        # The gr.State for managing the timestamp is no longer needed, simplifying the stream call.
+        cam.stream(
+            fn=process_live_frame,
+            inputs=[cam],
+            outputs=[out_img, out_text, out_audio] # The output now targets the placeholder
+        )
+
+with gr.Blocks(title="🚗 Drive Paddy – Drowsiness Detection", theme=gr.themes.Soft()) as app:
+    gr.Markdown("# 🚗 **Drive Paddy**")
+    with gr.Tabs():
+        with gr.TabItem("Live Detection"):
+            create_detection_tab()
+        with gr.TabItem("About this App"):
+            create_readme_tab()
 
 if __name__ == "__main__":
     logging.info("Launching Gradio app…")