import gradio as gr
from PIL import Image
import os
from SolarPanelDetector import solar_panel_predict, detector

custom_css = """
.feedback textarea {font-size: 20px !important;}
.centered-text {text-align: center; width: 100%;}
"""

with gr.Blocks(theme="HaleyCH/HaleyCH_Theme", title="Solar Panel Detector", css=custom_css) as app:
    # add logo
    gr.Markdown("# **Solar Panel Detector 2.0** 🛰️☀️", elem_classes="centered-text")
    with gr.Column(scale=1, variant="default"):
        gr.HTML("""
                <div style='display: flex; justify-content: center; align-items: center; height: 100%;'>
                    <img src='https://github.com/ArielDrabkin/Solar-Panel-Detector/blob/master/deployment/examples/DALL-E.jpeg?raw=true'
                     height='350' width='700'/>
                </div>
                """)
    gr.Markdown("## This app provides the ability to detect solar panels in a given address or a given image.")

    gr.Markdown("### Using by address with google maps:\n1. Enter an address or geographic coordinates.\n"
                "2. Insert your Google maps api key which you can get from - "
                "https://developers.google.com/maps/documentation/maps-static/get-api-key .\n"
                "3. Choose the zoom level (19 is the default).")
    address = gr.Textbox(label="Address")
    api_key = gr.Textbox(label="Google maps api key", type="password")
    zoom = gr.Slider(minimum=18, maximum=22, step=1, value=19, label="zoom")
    btn = gr.Button(value="Submit")
    with gr.Row():
        predicted_image_address = gr.Image(type="pil", show_label=False, scale=1)
        prediction_address = gr.Textbox(type="text", show_label=False, scale=1, elem_classes="feedback")
    btn.click(detector, inputs=[address, api_key, zoom], outputs=[predicted_image_address, prediction_address])

    gr.Markdown("### Using by a given image:\nUpload an image or use the examples below.")
    with gr.Row():
        im = gr.Image(type="pil", show_label=False, scale=1)
        predicted_image = gr.Image(type="pil", show_label=False, scale=1)

    prediction = gr.Textbox(type="text", show_label=False, elem_classes="feedback")
    btn = gr.Button(value="Submit")
    btn.click(solar_panel_predict, inputs=im, outputs=[predicted_image, prediction])

    gr.Markdown("### Image Examples")
    gr.Examples(
        examples=[os.path.join(os.path.dirname(__file__), "examples/Gottingen.jpg"),
                  os.path.join(os.path.dirname(__file__), "examples/Tubingen.jpg"),
                  os.path.join(os.path.dirname(__file__), "examples/San-Diego.jpg"),
                  os.path.join(os.path.dirname(__file__), "examples/Ceske-Budejovice.jpg")],
        inputs=im,
        outputs=[predicted_image, prediction],
        fn=solar_panel_predict,
        cache_examples=False,
    )

if __name__ == "__main__":
    app.launch()