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"))
JS_FUNC1 = os.getenv("JS_FUNC1")
JS_FUNC2 = os.getenv("JS_FUNC2")

def detect(image):
    try:
        file_1 = handle_file(image)
    except Exception as e:
        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 = """
.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);
}

@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%; }
}

.button-gradient:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 15px rgba(255, 75, 43, 0.8);
}
"""

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</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")

with gr.Blocks(css=custom_css) as demo:
    gr.Markdown(MARKDOWN0)
    with gr.Row():
        with gr.Column(scale=1) as col1:
            image = gr.Image(type='filepath', height=360)
            gr.HTML("<div id='limit'></div>")            
            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()

    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)

demo.queue(api_open=False, default_concurrency_limit=8).launch(server_name="0.0.0.0", show_api=False)