import os
import gradio as gr
from PIL import Image
from gradio_client import Client, handle_file
import json

BACKEND = os.getenv('BACKEND')
TOKEN = os.getenv('TOKEN')
backend = Client(BACKEND, hf_token=TOKEN)
JS_FUNC1 = os.getenv("JS_FUNC1")
JS_FUNC2 = os.getenv("JS_FUNC2")

def search_image(file):    
    try:
        handle_file(file)
    except Exception as e:
        gr.Info("Please upload an image file.")
        return []

    result_text = backend.predict(
            file=handle_file(file),
            api_name="/search_image"
    )
   
    result = json.loads(result_text)
    outarray = []
    for item in result['result']:
        outarray.append((item['image'], item['url']))
    return outarray

custom_css = """
caption.caption {
    user-select: text;
    cursor: text;
}

div#component-18 {
    max-height: 63.39px;
}

.svelte-snayfm {
    height: auto;
}

.icon.svelte-snayfm {
    width: 48px;
    height: 48px;
}

.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);
}
"""

output = gr.Gallery(label="Found Images (The search may take a couple of minutes.)", columns=[3], object_fit="contain", height="480px", interactive=False)
col2 = gr.Column(scale=2, visible=False)

def init_ui():
    return gr.update(visible=True), gr.update(visible=False)

def search_ui():
    return gr.update(visible=False), gr.update(visible=True)

MARKDOWN0 = """
    # Free Reverse Image Search - ❤️Like above if this space helps
    ### [Learn more about our Reverse Image Search](https://faceonlive.com/reverse-image-search)
"""
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/deepfake-detector" target='_blank' style='font-size: 16px;'>AI Generated Image & Deepfake Detector</div>
"""

with gr.Blocks(css=custom_css, delete_cache=(3600, 3600)) 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("🔍 Reverse Image Search", elem_classes="button-gradient")
            search_image_button = gr.Button("Reverse Image Search", visible=False, elem_id="submit_btn")
            gr.HTML(MARKDOWN3)
        with col2.render():
            output.render()
            new_search_button = gr.Button("🚀 Try New Search")
            gr.HTML(MARKDOWN3)
        
    limit_button.click(None, js=JS_FUNC2)
    demo.load(None, inputs=None, outputs=None, js=JS_FUNC1)
    search_image_button.click(search_ui, inputs=[], outputs=[col1, col2], api_name=False)
    search_image_button.click(search_image, inputs=[image], outputs=[output], api_name=False)

    new_search_button.click(init_ui, inputs=[], outputs=[col1, col2], api_name=False)
    gr.HTML('<a href="https://visitorbadge.io/status?path=https%3A%2F%2Fhuggingface.co%2Fspaces%2FReverseImageSearch%2FReverse-Image-Search"><img src="https://api.visitorbadge.io/api/visitors?path=https%3A%2F%2Fhuggingface.co%2Fspaces%2FReverseImageSearch%2FReverse-Image-Search&labelColor=%23ff8a65&countColor=%2337d67a&style=flat&labelStyle=upper" /></a>')

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