Update app.py

app.py

@@ -2,8 +2,10 @@ import gradio as gr
 from transformers import pipeline
 from PIL import Image
 import traceback
+import time
+import threading
 
-# Models (unchanged)
+# Models
 models = [
     ("Ateeqq/ai-vs-human-image-detector", "ateeq"),
     ("umm-maybe/AI-image-detector", "umm_maybe"),
@@ -38,7 +40,7 @@ def predict_image(image: Image.Image):
 
         html = f"""
         <div class='result-box' style="
-            background: linear-gradient(135deg, {color}33, #0f1215);
+            background: linear-gradient(135deg, {color}33, #1a1a1a);
             border: 2px solid {color};
             border-radius: 15px;
             padding: 25px;
@@ -57,86 +59,39 @@ def predict_image(image: Image.Image):
         traceback.print_exc()
         return f"<div style='color:red;'>Error analyzing image: {str(e)}</div>"
 
-# Strong dark-mode CSS overrides (higher specificity + !important)
+# CSS for sleek glowing pulse
 css = """
-/* 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;
+body, .gradio-container {
     font-family: 'Poppins', sans-serif !important;
-}
-
-/* Top-level panels */
-.gradio-container, .gradio-interface, .gradio-row, .gradio-column, .gradio-panel {
     background: transparent !important;
 }
-
-/* 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;
+h1 {
+    text-align: center;
+    font-weight: 700;
+    color: #007BFF;
+    margin-bottom: 10px;
 }
-.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-primary {
+    background-color: #007BFF !important;
+    color: white !important;
+    font-weight: 600;
+    border-radius: 10px;
+    height: 45px;
 }
-.gradio-container .gr-button-secondary {
-    background: linear-gradient(90deg, var(--danger), #ff6b6b) !important;
-    color: #fff !important;
+.gr-button-secondary {
+    background-color: #dc3545 !important;
+    color: white !important;
+    border-radius: 10px;
+    height: 45px;
 }
-
-/* 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, var(--primary), #00C3FF) !important;
+    background: linear-gradient(90deg, #007BFF, #00C3FF);
     animation: pulse 1.2s infinite ease-in-out;
     border-radius: 2px;
-    box-shadow: 0 0 10px var(--primary) !important;
+    box-shadow: 0 0 10px #007BFF;
 }
-
-/* animations */
 @keyframes pulse {
     0% { transform: scaleX(0.1); opacity: 0.6; }
     50% { transform: scaleX(1); opacity: 1; }
@@ -146,15 +101,9 @@ body, .gradio-container, .gradio-app {
     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) as demo:  # <- removed theme param
+with gr.Blocks(css=css, theme=gr.themes.Soft()) as demo:
     gr.Markdown("<h1>🔍 AI Image Detector</h1>")
 
     with gr.Row():
@@ -168,10 +117,11 @@ with gr.Blocks(css=css) as demo:  # <- removed theme param
 
     def analyze(img):
         if img is None:
-            return ("", "<div style='color:#ff6b6b;'>Please upload an image first!</div>")
+            return ("", "<div style='color:red;'>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