Update app.py

app.py

@@ -1,83 +1,169 @@
 import os
 import gradio as gr
 import json
-
 from gradio_client import Client, handle_file
-backend = Client(os.getenv("BACKEND"), hf_token=os.getenv("TOKEN"))
 
-def detect(image):
-    result_text = backend.predict(
-        image=handle_file(image),
-        api_name="/detect"
-    )
+# Initialize backend client with error handling
+try:
+    backend = Client(os.getenv("BACKEND"), hf_token=os.getenv("TOKEN"))
+except Exception as e:
+    raise Exception(f"Failed to initialize backend client: {str(e)}")
 
-    result = json.loads(result_text)
-    if result and result["status"] == "ok":
-        return result["overall"], result["aigen"], result["deepfake"]
-    else:
-        raise gr.Error("Error in processing image")
+def detect(image):
+    """Detect deepfake content in an image with comprehensive error handling"""
+    if image is None:
+        raise gr.Error("Please upload an image to analyze")
+    
+    try:
+        result_text = backend.predict(
+            image=handle_file(image),
+            api_name="/detect"
+        )
+        
+        result = json.loads(result_text)
+        if not result or result.get("status") != "ok":
+            raise gr.Error("Analysis failed: Invalid response from backend")
+            
+        # Format results professionally
+        overall = f"{result['overall']}% Confidence"
+        aigen = f"{result['aigen']}% (AI-Generated Content Likelihood)"
+        deepfake = f"{result['deepfake']}% (Face Manipulation Likelihood)"
+        
+        return overall, aigen, deepfake
+    
+    except json.JSONDecodeError:
+        raise gr.Error("Error processing analysis results")
+    except Exception as e:
+        raise gr.Error(f"Analysis error: {str(e)}")
 
+# Enhanced professional CSS
 custom_css = """
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 20px;
+    font-family: 'Arial', sans-serif;
+}
+.header {
+    color: #2c3e50;
+    border-bottom: 2px solid #3498db;
+    padding-bottom: 10px;
+}
 .button-gradient {
-  background: linear-gradient(45deg, #ff416c, #ff4b2b, #ff9b00, #ff416c);
-  background-size: 400% 400%;
-  border: none;
-  padding: 14px 28px;
-  font-size: 16px;
-  font-weight: bold;
-  color: white;
-  border-radius: 10px;
-  cursor: pointer;
-  transition: 0.3s ease-in-out;
-  animation: gradientAnimation 2s infinite linear;
-  box-shadow: 0 4px 10px rgba(255, 65, 108, 0.6);
+    background: linear-gradient(45deg, #3498db, #2ecc71, #9b59b6);
+    background-size: 400% 400%;
+    border: none;
+    padding: 12px 24px;
+    font-size: 16px;
+    font-weight: 600;
+    color: white;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    animation: gradientAnimation 3s ease infinite;
+    box-shadow: 0 2px 8px rgba(52, 152, 219, 0.3);
+}
+.button-gradient:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.5);
 }
 @keyframes gradientAnimation {
-  0% { background-position: 0% 50%; }
-  25% { background-position: 50% 100%; }
-  50% { background-position: 100% 50%; }
-  75% { background-position: 50% 0%; }
-  100% { background-position: 0% 50%; }
+    0% { background-position: 0% 50%; }
+    50% { background-position: 100% 50%; }
+    100% { background-position: 0% 50%; }
 }
-.button-gradient:hover {
-  transform: scale(1.05);
-  box-shadow: 0 6px 15px rgba(255, 75, 43, 0.8);
+.label {
+    font-weight: 600;
+    color: #34495e;
+    background: #f8f9fa;
+    padding: 10px;
+    border-radius: 5px;
+    margin: 5px 0;
+}
+.footer {
+    color: #7f8c8d;
+    font-size: 14px;
+    margin-top: 20px;
 }
 """
 
+# Professional content
 MARKDOWN0 = """
-    # DeepFake Detector - ❤️Like above if this space helps
-    #### [Learn more about our Deepfake Detection.](https://faceonlive.com/deepfake-detector)
+<div class="header">
+    <h1>DeepFake Detection System</h1>
+    <p>Advanced AI-powered analysis for identifying manipulated media</p>
+</div>
+<div style="margin: 15px 0;">
+    <a href="https://faceonlive.com/deepfake-detector" target="_blank" style="color: #3498db; text-decoration: none;">
+        Learn About Our Technology
+    </a>
+</div>
 """
+
 MARKDOWN3 = """
-<div align="right"><a href="https://faceonlive.com/face-search-online" target='_blank' style='font-size: 16px;'>Reverse Face Search</div><br/>
-<div align="right"><a href="https://faceonlive.com/reverse-image-search" target='_blank' style='font-size: 16px;'>Reverse Image Search</div>
+<div class="footer">
+    <p>Additional Tools:</p>
+    <div style="margin: 10px 0;">
+        <a href="https://faceonlive.com/face-search-online" target="_blank" style="color: #3498db; text-decoration: none; margin-right: 15px;">
+            Face Search Technology
+        </a>
+        <a href="https://faceonlive.com/reverse-image-search" target="_blank" style="color: #3498db; text-decoration: none;">
+            Reverse Image Search
+        </a>
+    </div>
+    <p>© 2025 FaceOnLive - All Rights Reserved</p>
+</div>
 """
-lbl_overall = gr.Label(label = "Overall")
-lbl_aigen = gr.Label(label = "Generative AI Model")
-lbl_deepfake = gr.Label(label = "Face Manipulation")
 
-with gr.Blocks(css=custom_css) as demo:
+with gr.Blocks(css=custom_css, theme=gr.themes.Default()) as demo:
     gr.Markdown(MARKDOWN0)
-    with gr.Row():
-        with gr.Column(scale=1) as col1:
-            image = gr.Image(type='filepath', height=360)
-            detect_button = gr.Button("Detect", elem_classes="button-gradient")
-            gr.Examples(['examples 1.jpg', 'examples 2.jpg'], inputs=image, cache_examples=True, fn=detect, outputs = [lbl_overall, lbl_aigen, lbl_deepfake])
-        with gr.Column(scale=2) as col2:
-            lbl_overall.render()
-            with gr.Row():
-                with gr.Column():
-                    lbl_aigen.render()
-                with gr.Column():
-                    lbl_deepfake.render()
-    gr.HTML(MARKDOWN3)
-    with gr.Row():
+    
+    with gr.Row(elem_classes="container"):
         with gr.Column(scale=1):
-            gr.HTML('<a href="https://visitorbadge.io/status?path=https%3A%2F%2Fhuggingface.co%2Fspaces%2FFaceOnLive%2FDeep-Fake-Detector"><img src="https://api.visitorbadge.io/api/visitors?path=https%3A%2F%2Fhuggingface.co%2Fspaces%2FFaceOnLive%2FDeep-Fake-Detector&labelColor=%23ff8a65&countColor=%2337d67a&style=flat&labelStyle=upper" /></a>')
-        with gr.Column(scale=5):
-            html = gr.HTML()
-
-    detect_button.click(detect, inputs=[image], outputs=[lbl_overall, lbl_aigen, lbl_deepfake], api_name=False)
+            image = gr.Image(
+                type='filepath', 
+                height=400,
+                label="Upload Image for Analysis",
+                interactive=True
+            )
+            detect_button = gr.Button(
+                "Analyze Image", 
+                elem_classes="button-gradient"
+            )
+            gr.Examples(
+                examples=['examples 1.jpg', 'examples 2.jpg'],
+                inputs=image,
+                outputs=['overall', 'aigen', 'deepfake'],
+                fn=detect,
+                cache_examples=True
+            )
+            
+        with gr.Column(scale=2):
+            overall = gr.Label(label="Confidence Score", elem_classes="label")
+            with gr.Row():
+                aigen = gr.Label(label="AI-Generated Content", elem_classes="label")
+                deepfake = gr.Label(label="Face Manipulation", elem_classes="label")
+    
+    gr.Markdown(MARKDOWN3)
+    
+    # Visitor badge
+    gr.HTML("""
+        <div style="margin-top: 20px;">
+            <a href="https://visitorbadge.io/status?path=https%3A%2F%2Fhuggingface.co%2Fspaces%2FFaceOnLive%2FDeep-Fake-Detector">
+                <img src="https://api.visitorbadge.io/api/visitors?path=https%3A%2F%2Fhuggingface.co%2Fspaces%2FFaceOnLive%2FDeep-Fake-Detector&labelColor=%233495db&countColor=%232ecc71&style=flat" />
+            </a>
+        </div>
+    """)
+    
+    detect_button.click(
+        fn=detect,
+        inputs=[image],
+        outputs=[overall, aigen, deepfake],
+        _js="() => {return [document.querySelector('input[type=file]').files[0]]}"
+    )
 
-demo.queue(api_open=False, default_concurrency_limit=8).launch(server_name="0.0.0.0", show_api=False)
+demo.queue(api_open=False, concurrency_count=8).launch(
+    server_name="0.0.0.0",
+    show_api=False,
+    debug=True
+)