Update app.py with new UI changes

app.py

@@ -2,7 +2,6 @@ import gradio as gr
 
 # ---- IMPORT BACKENDS ----
 from image_backend import predict_image_pil
-# =========================
 
 
 # =========================
@@ -10,124 +9,173 @@ from image_backend import predict_image_pil
 # =========================
 def analyze_image(image):
     if image is None:
-        return "", "", "", None
+        return "", "", "", None, "Idle"
 
     label, confidence, heatmap = predict_image_pil(image)
-    # Use CSS classes for vertical centering with the icon appearing first
+
+    # Risk styling
     if label == "Fake":
         if confidence >= 90:
-            risk = '<div class="risk-container risk-fake"><span class="material-icons">error</span><span> High likelihood of deepfake</span></div>'
+            risk = "high"
+            message = "High likelihood of deepfake"
         elif confidence >= 60:
-            risk = '<div class="risk-container risk-warning"><span class="material-icons">warning</span><span> Possibly deepfake</span></div>'
+            risk = "warning"
+            message = "Possibly deepfake"
         else:
-            risk = '<div class="risk-container risk-neutral"><span class="material-icons">help_outline</span><span> Uncertain deepfake</span></div>'
+            risk = "neutral"
+            message = "Uncertain deepfake"
     else:
         if confidence >= 90:
-            risk = '<div class="risk-container risk-real"><span class="material-icons">check_circle</span><span> Likely real</span></div>'
+            risk = "real"
+            message = "Likely real"
         elif confidence >= 60:
-            risk = '<div class="risk-container risk-warning"><span class="material-icons">warning</span><span> Possibly real</span></div>'
+            risk = "warning"
+            message = "Possibly real"
         else:
-            risk = '<div class="risk-container risk-neutral"><span class="material-icons">help_outline</span><span> Uncertain - needs review</span></div>'
+            risk = "neutral"
+            message = "Uncertain - review needed"
 
-    return label, f"{confidence} %", risk, heatmap
+    risk_html = f"""
+    <div class="risk-card {risk}">
+        <div class="risk-title">{label}</div>
+        <div class="risk-msg">{message}</div>
+    </div>
+    """
 
+    return label, f"{confidence} %", risk_html, heatmap, "Completed"
 
 
 # =========================
-# UI
+# CUSTOM CSS (DASHBOARD STYLE)
 # =========================
-head = """
-<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+css = """
+body {
+    background-color: #0f172a;
+}
+
+h1 {
+    text-align: center;
+    color: white;
+}
+
+/* Header */
+.header {
+    text-align: center;
+    padding: 10px;
+    font-size: 26px;
+    font-weight: bold;
+    color: white;
+}
+
+/* Card Layout */
+.gr-box {
+    border-radius: 12px !important;
+    background: #1e293b !important;
+    padding: 15px !important;
+}
+
+/* Buttons */
+button {
+    border-radius: 8px !important;
+}
+
+/* Risk Cards */
+.risk-card {
+    padding: 15px;
+    border-radius: 10px;
+    color: white;
+    font-weight: bold;
+}
+
+.risk-card.real {
+    background: #16a34a;
+}
+
+.risk-card.high {
+    background: #dc2626;
+}
+
+.risk-card.warning {
+    background: #f59e0b;
+}
+
+.risk-card.neutral {
+    background: #64748b;
+}
+
+/* Status Badge */
+.status {
+    padding: 6px 12px;
+    border-radius: 20px;
+    background: #334155;
+    color: white;
+    display: inline-block;
+}
 """
-with gr.Blocks( head = head) as demo:
-
-
-    gr.Markdown("# AI Driven Deepfake Detection System")
-
-    with gr.Tabs():
-
-        # =========================
-        # HOME TAB (RESTORED)
-        # =========================
-        with gr.Tab("Home"):
-            gr.Markdown("""
-            ## Welcome
-
-            This system detects AI-generated (deepfake) content in images using
-            transformer-based deep learning models.
-            """)
-
-            gr.Markdown("""
-            ### Supported inputs
-            - Images: JPG, PNG (face-centric images recommended)
-            """)
-
-            gr.Markdown("""
-            ### How to use
-            1. Select a detection mode using the tabs above.
-            2. Upload an image or audio file.
-            3. Click **Submit** to start analysis.
-            4. Review the prediction, confidence score, and risk assessment.
-            """)
-
-            gr.Markdown("""
-            ### Understanding the results
-            - **Prediction**: Model decision (Real / Fake)
-            - **Confidence**: Certainty percentage of the prediction
-            - **Risk Assessment**:
-              - High likelihood → strong indication
-              - Possibly → caution advised
-              - Uncertain → manual review recommended
-            """)
-
-            gr.Markdown("""
-            ### Explainability
-            For images, attention heatmaps highlight the facial regions that influenced
-            the model’s decision, supporting transparency and forensic analysis.
-            """)
-
-            gr.Markdown("""
-            ### Data privacy & intended use
-            Uploaded files are processed temporarily and are not stored.
-            This system is intended as a decision-support tool and should not be used
-            as the sole source of verification.
-            """)
-
-        # =========================
-        # IMAGE TAB
-        # =========================
-        with gr.Tab("Image Deepfake"):
-            gr.Markdown("## Deepfake Image Detection")
-
-            with gr.Row():
-                with gr.Column(scale=1):
-                    image_input = gr.Image(
-                        label="Upload Image",
-                        type="pil",
-                        height=280
-                    )
-                    img_submit = gr.Button("Submit")
-                    img_clear = gr.Button("Clear")
-
-                with gr.Column(scale=2):
-                    img_pred = gr.Text(label="Prediction")
-                    img_conf = gr.Text(label="Confidence")
-                    img_risk = gr.HTML(label="Risk Assessment", value="")
-                    img_heatmap = gr.Image(
-                        label="Explainability Heatmap",
-                        height=280
-                    )
-
-            img_submit.click(
-                analyze_image,
-                image_input,
-                [img_pred, img_conf, img_risk, img_heatmap]
+
+
+# =========================
+# UI
+# =========================
+with gr.Blocks(css=css) as demo:
+
+    # HEADER
+    gr.Markdown('<div class="header">AI Driven Deepfake Detection System</div>')
+
+    # DESCRIPTION
+    gr.Markdown("""
+    Detect whether an image is **Real or AI-generated (Deepfake)** using a ViT-based model.
+    """)
+
+    # STATUS BAR
+    status = gr.HTML('<div class="status">Status: Idle</div>')
+
+    # MAIN LAYOUT
+    with gr.Row():
+
+        # LEFT PANEL (INPUT)
+        with gr.Column(scale=1):
+            gr.Markdown("### Upload Image")
+
+            image_input = gr.Image(
+                type="pil",
+                height=300
             )
 
-            img_clear.click(
-                lambda: (None, "", "", "", None),
-                None,
-                [image_input, img_pred, img_conf, img_risk, img_heatmap]
+            img_submit = gr.Button("Analyze", variant="primary")
+            img_clear = gr.Button("Reset")
+
+        # RIGHT PANEL (OUTPUT)
+        with gr.Column(scale=2):
+            gr.Markdown("### Analysis Results")
+
+            img_pred = gr.Text(label="Prediction")
+            img_conf = gr.Text(label="Confidence")
+
+            img_risk = gr.HTML()
+
+            img_heatmap = gr.Image(
+                label="Model Explainability",
+                height=300
             )
 
-demo.launch(css="style.css")
+    # =========================
+    # EVENTS
+    # =========================
+    def run_analysis(image):
+        return analyze_image(image)
+
+    img_submit.click(
+        run_analysis,
+        inputs=image_input,
+        outputs=[img_pred, img_conf, img_risk, img_heatmap, status]
+    )
+
+    img_clear.click(
+        lambda: (None, "", "", "", None, '<div class="status">Status: Idle</div>'),
+        None,
+        [image_input, img_pred, img_conf, img_risk, img_heatmap, status]
+    )
+
+
+demo.launch()