import gradio as gr
import numpy as np

# Define the tile grid properties
num_tiles_x = 10
num_tiles_y = 10
tile_size = 100

# Define the list of dictionaries for the tile grid
tile_data = [
    {"image": "https://picsum.photos/200/300", "link": "https://www.example.com", "click": "https://www.example.com"},
    {"image": "https://picsum.photos/200/301", "link": "https://www.example.com", "click": "https://www.example.com"},
    {"image": "https://picsum.photos/200/302", "link": "https://www.example.com", "click": "https://www.example.com"},
    # Add more dictionaries here...
]

# Create the Gradio app
app = gr.Interface(
    fn=lambda: None,  # This is a placeholder, we'll fill it in later
    title="Tile Grid App",
    description="A full-screen tile grid with images and links",
    layouts=[
        [
            gr.Column(
                [gr.Row([gr.Image(img=image["image"], width=tile_size, height=tile_size), gr.Button(label="Click to visit", click=image["click"])]) for image in tile_data[i * num_tiles_y:(i + 1) * num_tiles_y]]) for i in range(num_tiles_x)
            )
        ]
    ]
)

# Define a function to generate the tile grid
def generate_tile_grid():
    return [gr.Row([gr.Image(img=image["image"], width=tile_size, height=tile_size), gr.Button(label="Click to visit", click=image["click"])]) for image in tile_data]

# Replace the placeholder function with the tile grid generation function
app.update(fn=generate_tile_grid)

# Launch the app
app.launch()