Update app.py

app.py

@@ -2,10 +2,8 @@ import gradio as gr
 from transformers import pipeline
 from PIL import Image
 import traceback
-import time
-import threading
 
-# Models
+# Models (unchanged)
 models = [
     ("Ateeqq/ai-vs-human-image-detector", "ateeq"),
     ("umm-maybe/AI-image-detector", "umm_maybe"),
@@ -40,7 +38,7 @@ def predict_image(image: Image.Image):
 
         html = f"""
         <div class='result-box' style="
-            background: linear-gradient(135deg, {color}33, #1a1a1a);
+            background: linear-gradient(135deg, {color}33, #0f1215);
             border: 2px solid {color};
             border-radius: 15px;
             padding: 25px;
@@ -59,39 +57,86 @@ def predict_image(image: Image.Image):
         traceback.print_exc()
         return f"<div style='color:red;'>Error analyzing image: {str(e)}</div>"
 
-# CSS for sleek glowing pulse
+# Strong dark-mode CSS overrides (higher specificity + !important)
 css = """
-body, .gradio-container {
+/* base */
+:root {
+  --bg: #0b0d0f;
+  --panel: #0f1215;
+  --muted: #9aa3b2;
+  --text: #e6eef8;
+  --primary: #007BFF;
+  --danger: #dc3545;
+}
+
+/* Ensure our font + layout */
+body, .gradio-container, .gradio-app {
+    background: var(--bg) !important;
+    color: var(--text) !important;
     font-family: 'Poppins', sans-serif !important;
+}
+
+/* Top-level panels */
+.gradio-container, .gradio-interface, .gradio-row, .gradio-column, .gradio-panel {
     background: transparent !important;
 }
-h1 {
-    text-align: center;
-    font-weight: 700;
-    color: #007BFF;
-    margin-bottom: 10px;
+
+/* Panels and cards */
+.gradio-container .card, .gradio-container .panel, .gradio-container .component {
+    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)) !important;
+    border: 1px solid rgba(255,255,255,0.04) !important;
+    color: var(--text) !important;
+    box-shadow: 0 6px 18px rgba(0,0,0,0.6) !important;
+}
+
+/* Inputs & image blocks */
+.gradio-container .input_image, .gradio-container input, .gradio-container textarea, .gradio-container .file-input {
+    background: #0b0d0f !important;
+    border: 1px solid rgba(255,255,255,0.05) !important;
+    color: var(--text) !important;
+}
+
+/* Buttons */
+.gradio-container .gr-button, .gradio-container button {
+    background: rgba(255,255,255,0.03) !important;
+    color: var(--text) !important;
+    border-radius: 10px !important;
+    border: 1px solid rgba(255,255,255,0.04) !important;
+    height: 44px !important;
+    font-weight: 600 !important;
 }
-.gr-button-primary {
-    background-color: #007BFF !important;
-    color: white !important;
-    font-weight: 600;
-    border-radius: 10px;
-    height: 45px;
+.gradio-container .gr-button-primary {
+    background: linear-gradient(90deg, var(--primary), #00C3FF) !important;
+    color: #fff !important;
+    border: 1px solid rgba(255,255,255,0.06) !important;
+    box-shadow: 0 6px 18px rgba(0,123,255,0.12) !important;
 }
-.gr-button-secondary {
-    background-color: #dc3545 !important;
-    color: white !important;
-    border-radius: 10px;
-    height: 45px;
+.gradio-container .gr-button-secondary {
+    background: linear-gradient(90deg, var(--danger), #ff6b6b) !important;
+    color: #fff !important;
 }
+
+/* Markdown / text */
+.gradio-container .markdown, .gradio-container h1, .gradio-container p {
+    color: var(--text) !important;
+}
+
+/* Hide any built-in theme toggles if present */
+.gradio-container .color-scheme-toggle, .gradio-container .theme-toggle {
+    display: none !important;
+}
+
+/* Loader bar */
 #pulse-loader {
     width: 100%;
     height: 4px;
-    background: linear-gradient(90deg, #007BFF, #00C3FF);
+    background: linear-gradient(90deg, var(--primary), #00C3FF) !important;
     animation: pulse 1.2s infinite ease-in-out;
     border-radius: 2px;
-    box-shadow: 0 0 10px #007BFF;
+    box-shadow: 0 0 10px var(--primary) !important;
 }
+
+/* animations */
 @keyframes pulse {
     0% { transform: scaleX(0.1); opacity: 0.6; }
     50% { transform: scaleX(1); opacity: 1; }
@@ -101,9 +146,15 @@ h1 {
     from { opacity: 0; transform: scale(0.95); }
     to { opacity: 1; transform: scale(1); }
 }
+
+/* result box fallback (keep it visible) */
+.result-box {
+    margin: 12px auto !important;
+    max-width: 420px !important;
+}
 """
 
-with gr.Blocks(css=css, theme=gr.themes.Soft()) as demo:
+with gr.Blocks(css=css) as demo:  # <- removed theme param
     gr.Markdown("<h1>🔍 AI Image Detector</h1>")
 
     with gr.Row():
@@ -117,11 +168,10 @@ with gr.Blocks(css=css, theme=gr.themes.Soft()) as demo:
 
     def analyze(img):
         if img is None:
-            return ("", "<div style='color:red;'>Please upload an image first!</div>")
+            return ("", "<div style='color:#ff6b6b;'>Please upload an image first!</div>")
         loader_html = "<div id='pulse-loader'></div>"
         yield (loader_html, "")  # instantly show loader
 
-        # do analysis in background
         result = predict_image(img)
         yield ("", result)  # hide loader, show result