Update app.py

app.py

@@ -1,37 +1,30 @@
 import os
 import gradio as gr
 import json
-from gradio_client import Client, handle_file
-
-# ✅ Check if BACKEND is set before using it
-BACKEND_URL = os.getenv("BACKEND")
-TOKEN = os.getenv("TOKEN")
-
-if not BACKEND_URL:
-    raise ValueError("❌ Error: BACKEND environment variable is missing or empty. Please set it before running the script.")
 
-backend = Client(BACKEND_URL, hf_token=TOKEN)
+from gradio_client import Client, handle_file
+backend = Client(os.getenv("BACKEND"), hf_token=os.getenv("TOKEN"))
+JS_FUNC1 = os.getenv("JS_FUNC1")
+JS_FUNC2 = os.getenv("JS_FUNC2")
 
-# ✅ Safe function for DeepFake detection
 def detect(image):
-    if not image:
-        return "❌ No image uploaded", "❌ No image uploaded", "❌ No image uploaded"
-
     try:
-        file_path = handle_file(image)  # Handle uploaded file
-        result_text = backend.predict(image=file_path, api_name="/detect")  # Call backend
-        result = json.loads(result_text)  # Parse response
-        
-        # ✅ Check if API response is valid
-        if result.get("status") == "ok":
-            return result["overall"], result["aigen"], result["deepfake"]
-        else:
-            return "❌ Unexpected API response", "❌ Unexpected API response", "❌ Unexpected API response"
-
+        file_1 = handle_file(image)
     except Exception as e:
-        return f"❌ API Error: {str(e)}", "❌ API Error", "❌ API Error"
+        gr.Info("Please upload an image file.")
+        return "", "", ""
+
+    result_text = backend.predict(
+        image=handle_file(image),
+        api_name="/detect"
+    )
+
+    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")
 
-# ✅ Custom CSS for buttons
 custom_css = """
 .button-gradient {
   background: linear-gradient(45deg, #ff416c, #ff4b2b, #ff9b00, #ff416c);
@@ -60,51 +53,43 @@ custom_css = """
 }
 """
 
-# ✅ UI Components
-MARKDOWN0 = """# DeepFake Detector - ❤️ Like if this space helps  
-#### [Learn more about our Deepfake Detection.](https://faceonlive.com/deepfake-detector)"""
+MARKDOWN0 = """
+    # DeepFake Detector - ❤️Like above if this space helps
+    #### [Learn more about our Deepfake Detection.](https://faceonlive.com/deepfake-detector)
+"""
 MARKDOWN3 = """
-<div align="right"><a href="https://faceonlive.com/face-search-online" target='_blank' style='font-size: 16px;'>Reverse Face Search</a></div><br/>
-<div align="right"><a href="https://faceonlive.com/reverse-image-search" target='_blank' style='font-size: 16px;'>Reverse Image Search</a></div>
+<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>
 """
+lbl_overall = gr.Label(label = "Overall")
+lbl_aigen = gr.Label(label = "Generative AI Model")
+lbl_deepfake = gr.Label(label = "Face Manipulation")
 
-lbl_overall = gr.Label(label="Overall")
-lbl_aigen = gr.Label(label="Generative AI Model")
-lbl_deepfake = gr.Label(label="Face Manipulation")
-
-# ✅ Gradio Interface
 with gr.Blocks(css=custom_css) as demo:
     gr.Markdown(MARKDOWN0)
-
     with gr.Row():
-        with gr.Column(scale=1):
+        with gr.Column(scale=1) as col1:
             image = gr.Image(type='filepath', height=360)
             gr.HTML("<div id='limit'></div>")            
-            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):
+            limit_button = gr.Button("🚀 Detect", elem_classes="button-gradient")
+            detect_button = gr.Button("Detect", visible=False, elem_id="submit_btn")
+            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.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()
 
-    # ✅ Fixes Button Click Action
-    detect_button.click(
-        detect, 
-        inputs=[image], 
-        outputs=[lbl_overall, lbl_aigen, lbl_deepfake]
-    )
+    demo.load(None, inputs=None, outputs=html, js=JS_FUNC1)
+    limit_button.click(None, js=JS_FUNC2)
+    detect_button.click(detect, inputs=[image], outputs=[lbl_overall, lbl_aigen, lbl_deepfake], api_name=False)
 
-# ✅ Launching App with Safe Configurations
-demo.queue(api_open=False, default_concurrency_limit=8).launch(server_name="0.0.0.0", show_api=False)
+demo.queue(api_open=False, default_concurrency_limit=8).launch(server_name="0.0.0.0", show_api=False)