Gradio_UI.py

import gradio as gr

class GradioUI:
    def __init__(self, agent):
        self.agent = agent
        self.interface = self._create_interface()

    def _create_interface(self):
        # Define custom CSS to hide the resize arrows and style the output
        custom_css = """
        /* Hide the resize arrows */
        .output-container .svelte-1g9btlg { display: none !important; }
        
        /* Style the output panel */
        #output-panel {
            height: 400px !important;  /* Fixed height */
            overflow-y: auto;          /* Add scrollbar if content overflows */
            border: 1px solid #ccc;    /* Add a subtle border */
            border-radius: 5px;        /* Rounded corners */
            padding: 10px;             /* Inner padding */
            background-color: #f9f9f9; /* Light background */
        }
        
        /* Style the links */
        #output-panel a {
            color: #1a73e8;            /* Google-blue link color */
            text-decoration: none;     /* Remove underline */
            font-weight: bold;         /* Bold links */
        }
        #output-panel a:hover {
            text-decoration: underline; /* Underline on hover */
        }
        
        /* Style the list items */
        #output-panel ul {
            list-style-type: none;     /* Remove default bullets */
            padding-left: 0;           /* Remove default padding */
        }
        #output-panel li {
            margin-bottom: 10px;       /* Space between list items */
        }
        """

        with gr.Blocks(title="Landsat Image Fetcher", css=custom_css) as demo:
            gr.Markdown("# Landsat Image Fetcher")
            gr.Markdown("Enter coordinates and a time range to fetch Landsat images from USGS.")
            with gr.Row():
                with gr.Column():
                    lat_min = gr.Number(label="Min Latitude", value=37.75)
                    lon_min = gr.Number(label="Min Longitude", value=-122.35)
                    lat_max = gr.Number(label="Max Latitude", value=37.85)
                    lon_max = gr.Number(label="Max Longitude", value=-122.25)
                    start_date = gr.Textbox(label="Start Date (YYYY-MM-DD)", value="2023-01-01")
                    end_date = gr.Textbox(label="End Date (YYYY-MM-DD)", value="2023-12-31")
                    submit_btn = gr.Button("Fetch Images")
                with gr.Column():
                    output = gr.HTML(label="Download Links", elem_id="output-panel")
            submit_btn.click(
                fn=lambda lm, ln, lx, lo, sd, ed: self.agent.run(
                    f"fetch_landsat_image({lm}, {ln}, {lx}, {lo}, '{sd}', '{ed}')"
                ),
                inputs=[lat_min, lon_min, lat_max, lon_max, start_date, end_date],
                outputs=output
            )
        return demo

    def launch(self, **kwargs):
        self.interface.launch(**kwargs)