Update app.py with new UI changes

app.py

@@ -9,52 +9,92 @@ from image_backend import predict_image_pil
 # =========================
 def analyze_image(image):
     if image is None:
-        return "", "", "", None, '<div class="status">Status: Idle</div>'
+        return "", "", "", None, "Idle"
 
     label, confidence, heatmap = predict_image_pil(image)
 
-    # Risk classification
     if label == "Fake":
         if confidence >= 90:
-            risk_class = "high"
+            risk = "high"
             message = "High likelihood of deepfake"
         elif confidence >= 60:
-            risk_class = "warning"
+            risk = "warning"
             message = "Possibly deepfake"
         else:
-            risk_class = "neutral"
+            risk = "neutral"
             message = "Uncertain deepfake"
     else:
         if confidence >= 90:
-            risk_class = "real"
+            risk = "real"
             message = "Likely real"
         elif confidence >= 60:
-            risk_class = "warning"
+            risk = "warning"
             message = "Possibly real"
         else:
-            risk_class = "neutral"
+            risk = "neutral"
             message = "Uncertain - review needed"
 
     risk_html = f"""
-    <div class="risk-card {risk_class}">
+    <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,
-        '<div class="status">Status: Completed</div>'
-    )
+    return label, f"{confidence} %", risk_html, heatmap, "Completed"
+
+
+# =========================
+# CSS
+# =========================
+css = """
+body { background-color: #0f172a; }
+
+.header {
+    text-align: center;
+    padding: 10px;
+    font-size: 26px;
+    font-weight: bold;
+    color: white;
+}
+
+.section {
+    color: #cbd5f5;
+    margin-bottom: 10px;
+}
+
+.gr-box {
+    border-radius: 12px !important;
+    background: #1e293b !important;
+    padding: 15px !important;
+}
+
+.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 {
+    padding: 6px 12px;
+    border-radius: 20px;
+    background: #334155;
+    color: white;
+    display: inline-block;
+}
+"""
 
 
 # =========================
 # UI
 # =========================
-with gr.Blocks() as demo:
+with gr.Blocks(css=css) as demo:
 
     # HEADER
     gr.Markdown('<div class="header">AI Deepfake Detection Dashboard</div>')
@@ -65,26 +105,26 @@ with gr.Blocks() as demo:
     gr.Markdown("""
     ### 🔍 System Overview
     This system detects whether an uploaded image is **real or AI-generated (deepfake)** 
-    using deep learning-based image forensics techniques. It focuses on identifying 
-    facial inconsistencies and synthetic artifacts introduced during manipulation.
+    using deep learning-based image forensics techniques. It focuses on **facial artifact detection** 
+    and spatial inconsistencies introduced during synthetic image generation.
     """)
 
     # =========================
-    # MODEL DETAILS
+    # MODEL INFO
     # =========================
     gr.Markdown("""
     ### 🧠 Model Details
-    - Transformer/based architecture  
-    - Learns fine-grained facial artifact patterns  
-    - Trained on 3 robust datasets  
-    - Uses attention mechanisms for explainability  
+    - Based on **Transformer/CNN hybrid architecture**
+    - Learns **fine-grained facial artifacts**
+    - Trained on deepfake datasets with real vs manipulated images
+    - Uses **attention mechanisms** for explainability
     """)
 
     # STATUS
     status = gr.HTML('<div class="status">Status: Idle</div>')
 
     # =========================
-    # MAIN LAYOUT
+    # MAIN UI
     # =========================
     with gr.Row():
 
@@ -92,10 +132,7 @@ with gr.Blocks() as demo:
         with gr.Column(scale=1):
             gr.Markdown("### 📤 Upload Image")
 
-            image_input = gr.Image(
-                type="pil",
-                height=300
-            )
+            image_input = gr.Image(type="pil", height=300)
 
             img_submit = gr.Button("Analyze", variant="primary")
             img_clear = gr.Button("Reset")
@@ -119,14 +156,14 @@ with gr.Blocks() as demo:
     # =========================
     gr.Markdown("""
     ### 📖 How to Interpret Results
-    - **Prediction** → Real / Fake  
-    - **Confidence** → Model certainty (%)  
+    - **Prediction** → Final classification (Real / Fake)  
+    - **Confidence** → Model certainty score  
     - **Heatmap** → Highlights regions influencing the decision  
-    - **Risk Levels**:
+    - **Risk Level**:
       - 🔴 High → Strong deepfake indication  
       - 🟡 Warning → Possible manipulation  
-      - ⚪ Neutral → Uncertain (manual review needed)  
-      - 🟢 Real → Likely authentic  
+      - ⚪ Neutral → Uncertain (manual review required)  
+      - 🟢 Real → Likely authentic image  
     """)
 
     # =========================
@@ -134,10 +171,10 @@ with gr.Blocks() as demo:
     # =========================
     gr.Markdown("""
     ### ⚠️ Limitations
-    - Reduced accuracy on low-resolution or compressed images  
-    - May struggle with highly realistic GAN-generated content  
-    - Works best on face-centric inputs  
-    - Not a substitute for human forensic analysis  
+    - Performance may drop on **low-resolution or heavily compressed images**
+    - May struggle with **high-quality GAN-generated content**
+    - Works best on **face-centric images**
+    - Not a replacement for human forensic analysis
     """)
 
     # =========================
@@ -145,9 +182,9 @@ with gr.Blocks() as demo:
     # =========================
     gr.Markdown("""
     ### 🔐 Privacy & Usage
-    - Images are processed temporarily and not stored  
-    - Intended for academic and research use  
-    - Use as a decision-support tool only  
+    - Images are processed temporarily and not stored
+    - Intended for **educational and research purposes**
+    - Should be used as a **decision-support tool only**
     """)
 
     # =========================
@@ -166,4 +203,4 @@ with gr.Blocks() as demo:
     )
 
 
-demo.launch(css="style.css")
+demo.launch()

style.css

@@ -1,129 +0,0 @@
-/* =========================
-   GLOBAL BACKGROUND
-========================= */
-body {
-    background-color: #0f172a;
-    font-family: 'Segoe UI', sans-serif;
-}
-
-
-/* =========================
-   HEADER
-========================= */
-.header {
-    text-align: center;
-    padding: 12px;
-    font-size: 26px;
-    font-weight: 600;
-    color: #ffffff;
-}
-
-
-/* =========================
-   TEXT SECTIONS
-========================= */
-.section {
-    color: #cbd5f5;
-    margin-bottom: 10px;
-    line-height: 1.6;
-}
-
-
-/* =========================
-   CARD / CONTAINER STYLE
-========================= */
-.gr-box {
-    border-radius: 12px !important;
-    background: #1e293b !important;
-    padding: 15px !important;
-    border: 1px solid #334155;
-}
-
-.gr-row {
-    gap: 15px;
-}
-
-.gr-column {
-    gap: 10px;
-}
-
-
-/* =========================
-   BUTTONS
-========================= */
-button {
-    border-radius: 8px !important;
-    font-weight: 500;
-}
-
-button:hover {
-    opacity: 0.9;
-}
-
-
-/* =========================
-   RISK CARDS
-========================= */
-.risk-card {
-    padding: 15px;
-    border-radius: 10px;
-    color: white;
-    font-weight: 600;
-    margin-top: 10px;
-}
-
-.risk-title {
-    font-size: 18px;
-    margin-bottom: 5px;
-}
-
-.risk-msg {
-    font-size: 14px;
-    opacity: 0.9;
-}
-
-.risk-card.real {
-    background: #16a34a; /* Green */
-}
-
-.risk-card.high {
-    background: #dc2626; /* Red */
-}
-
-.risk-card.warning {
-    background: #f59e0b; /* Yellow */
-}
-
-.risk-card.neutral {
-    background: #64748b; /* Gray */
-}
-
-
-/* =========================
-   STATUS BADGE
-========================= */
-.status {
-    padding: 6px 12px;
-    border-radius: 20px;
-    background: #334155;
-    color: #ffffff;
-    display: inline-block;
-    font-size: 14px;
-    margin-bottom: 10px;
-}
-
-
-/* =========================
-   IMAGE + OUTPUT SPACING
-========================= */
-img {
-    border-radius: 10px;
-}
-
-
-/* =========================
-   HEADINGS
-========================= */
-h1, h2, h3 {
-    color: #ffffff;
-}