Update app.py

app.py

@@ -4,33 +4,24 @@ import torch.nn as nn
 from torchvision import transforms, models
 from PIL import Image
 
-# ==========================================
-# 1. SETUP & MODEL LOADING (Required for deployment)
-# ==========================================
-DEVICE = torch.device("cpu") # Spaces use CPU by default
+DEVICE = torch.device("cpu")
 IMG_SIZE = 224
 classes = ['fake', 'real']
 
-# Rebuild the model architecture
 model = models.efficientnet_b0(weights=None)
 in_f = model.classifier[1].in_features
 model.classifier = nn.Linear(in_f, 2)
 
-# Load the trained weights
 model.load_state_dict(torch.load("deepfake_detector.pth", map_location=DEVICE))
 model.to(DEVICE)
 model.eval()
 
-# Define Image Transformations
 clean_tf = transforms.Compose([
     transforms.Resize((IMG_SIZE, IMG_SIZE)),
     transforms.ToTensor(),
     transforms.Normalize([0.485, 0.456, 0.406], [0.229, 0.224, 0.225])
 ])
 
-# ==========================================
-# 2. PREDICTION LOGIC
-# ==========================================
 def enhanced_predict(img):
     if img is None:
          return None, "<div class='warning-box'>SYSTEM ALERT: Please upload or capture an image for analysis.</div>"
@@ -48,7 +39,6 @@ def enhanced_predict(img):
 
     confidences = {classes[0]: fake_prob, classes[1]: real_prob}
 
-    # Dynamic styling for the output message
     max_conf = max(fake_prob, real_prob) * 100
     if max_conf < 60.0:
         warning_msg = f"<div class='warning-box'>[WARNING] Low Confidence ({max_conf:.1f}%). Network anomaly detected. Manual review advised.</div>"
@@ -57,14 +47,7 @@ def enhanced_predict(img):
 
     return confidences, warning_msg
 
-# ==========================================
-# 3. PROFESSIONAL UI 
-# ==========================================
 custom_css = """
-/* -------------------------------------
-   FORCE GLOBAL DARK THEME VARIABLES
-   (This kills the bright white boxes!)
--------------------------------------- */
 :root, .gradio-container, .dark {
     --background-fill-primary: #0b0f19 !important;
     --background-fill-secondary: #0f172a !important;
@@ -81,9 +64,6 @@ body {
     font-family: 'Inter', sans-serif !important;
 }
 
-/* -------------------------------------
-   HEADER STYLING
--------------------------------------- */
 .header-box {
     background: rgba(15, 23, 42, 0.7);
     backdrop-filter: blur(12px);
@@ -95,6 +75,7 @@ body {
     border-top: 3px solid #38bdf8;
     box-shadow: 0 10px 30px -10px rgba(56, 189, 248, 0.3);
 }
+
 .header-box h1 {
     margin-bottom: 0.5rem;
     color: #f8fafc !important;
@@ -104,15 +85,13 @@ body {
     text-transform: uppercase;
     text-shadow: 0 0 15px rgba(56,189,248,0.5);
 }
+
 .header-box p {
     font-size: 1.1rem;
     color: #94a3b8 !important;
     font-weight: 400;
 }
 
-/* -------------------------------------
-   HIGH-VISIBILITY NAVIGATION TABS (PILL BUTTONS)
--------------------------------------- */
 .tabs > .tab-nav {
     border: none !important;
     display: flex !important;
@@ -121,6 +100,7 @@ body {
     margin-bottom: 2.5rem !important;
     background: transparent !important;
 }
+
 .tabs > .tab-nav > button {
     background: linear-gradient(145deg, #1e293b, #0f172a) !important;
     border: 1px solid rgba(56, 189, 248, 0.4) !important;
@@ -133,12 +113,14 @@ body {
     box-shadow: 0 4px 10px rgba(0,0,0,0.5) !important;
     transition: all 0.3s ease !important;
 }
+
 .tabs > .tab-nav > button:hover {
     color: #38bdf8 !important;
     border-color: #38bdf8 !important;
     box-shadow: 0 0 15px rgba(56,189,248,0.3) !important;
     transform: translateY(-2px);
 }
+
 .tabs > .tab-nav > button.selected {
     background: linear-gradient(135deg, #0284c7 0%, #38bdf8 100%) !important;
     color: #ffffff !important;
@@ -148,9 +130,6 @@ body {
     transform: scale(1.05);
 }
 
-/* -------------------------------------
-   TEXT & HEADER OVERRIDES FOR TAB 2
--------------------------------------- */
 .gradio-container h3 {
     color: #38bdf8 !important;
     font-family: 'Courier New', monospace !important;
@@ -160,13 +139,11 @@ body {
     padding-bottom: 8px;
     margin-bottom: 15px;
 }
+
 .gradio-container span.text-gray-500 {
     color: #94a3b8 !important;
 }
 
-/* -------------------------------------
-   INFO CARDS (AWARENESS TAB)
--------------------------------------- */
 .info-card {
     background: rgba(30, 41, 59, 0.6);
     padding: 1.5rem;
@@ -179,20 +156,19 @@ body {
     border-bottom: 1px solid rgba(255,255,255,0.05);
     transition: transform 0.3s ease, box-shadow 0.3s ease;
 }
+
 .info-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
     background: rgba(30, 41, 59, 0.9);
 }
+
 .info-card p, .info-card li {
     color: #f1f5f9 !important;
     font-size: 1.05rem;
     line-height: 1.6;
 }
 
-/* -------------------------------------
-   ANIMATED PRIMARY BUTTON
--------------------------------------- */
 button.primary {
     background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%) !important;
     border: 1px solid #60a5fa !important;
@@ -205,19 +181,16 @@ button.primary {
     transition: all 0.3s ease !important;
     margin-top: 10px !important;
 }
+
 button.primary:hover {
     transform: translateY(-2px) !important;
     box-shadow: 0 8px 25px rgba(37, 99, 235, 0.7) !important;
     background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%) !important;
 }
 
-/* Status Boxes */
 .warning-box { border-left: 4px solid #f59e0b; background: rgba(245, 158, 11, 0.15); padding: 1rem; border-radius: 6px; color: #fcd34d !important; font-weight: 600; font-size: 1.1em;}
 .success-box { border-left: 4px solid #10b981; background: rgba(16, 185, 129, 0.15); padding: 1rem; border-radius: 6px; color: #6ee7b7 !important; font-weight: 600; font-size: 1.1em;}
 
-/* -------------------------------------
-   WEBCAM & INTERNAL BUTTON FIX
--------------------------------------- */
 .gradio-container button[aria-label="Capture"], 
 .gradio-container button[aria-label="Clear"],
 .gradio-container .icon-button,
@@ -244,9 +217,8 @@ button.primary:hover {
 }
 """
 
-with gr.Blocks(theme=gr.themes.Base(), css=custom_css) as demo:
+with gr.Blocks() as demo:
 
-    # --- GLOBAL HEADER ---
     gr.HTML("""
     <div class="header-box">
         <h1>TrueFace AI: Deepfake Detector</h1>
@@ -254,15 +226,10 @@ with gr.Blocks(theme=gr.themes.Base(), css=custom_css) as demo:
     </div>
     """)
 
-    # ==========================================
-    # TAB 1: AWARENESS & EDUCATION
-    # ==========================================
     with gr.Tab("Awareness & Education"):
         with gr.Row():
             with gr.Column(scale=1):
-                # Path changed from Colab's /content/ to local directory
-                gr.Image("project.jpeg",
-                         show_label=False, show_download_button=False, interactive=False)
+                gr.Image("project.jpeg", show_label=False, interactive=False)
                 gr.Markdown("<center><i style='color:#94a3b8;'>Conceptual visualization of biometric facial mapping.</i></center>")
 
             with gr.Column(scale=1):
@@ -287,9 +254,6 @@ with gr.Blocks(theme=gr.themes.Base(), css=custom_css) as demo:
                 </div>
                 """)
 
-    # ==========================================
-    # TAB 2: THE DETECTOR PROJECT
-    # ==========================================
     with gr.Tab("Deepfake Detector"):
         with gr.Row():
             with gr.Column(scale=1):
@@ -304,5 +268,4 @@ with gr.Blocks(theme=gr.themes.Base(), css=custom_css) as demo:
 
         analyze_btn.click(fn=enhanced_predict, inputs=input_image, outputs=[output_label, output_warning])
 
-# Launch modified for production server
-demo.launch()
+demo.launch(theme=gr.themes.Base(), css=custom_css)