import plotly.io as pio
import gradio as gr

# List of plot names
plot_list = [
    "RAG_context  VS  AI generated story_temp_0.2",
    "Human story fetched VS AI generated story_temp_0.2",
    "Gemma2_9b"
]

# Create a function for each plot
def load_plotly_figure(index):
    return pio.read_json(f'{plot_list[index]}.json')

# Define custom CSS for rectangular blocks
custom_css = """
<style>
    .gradio-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        height: 100vh;  /* Full viewport height */
    }
    .gradio-row {
        display: flex;
        justify-content: center;
        margin-bottom: 20px;
        width: 100%;
    }
    .gradio-output {
        width: 600px;  /* Set the width of the block */
        height: 400px; /* Set the height of the block */
        border: 2px solid #ccc; /* Border to visualize the block */
        border-radius: 10px; /* Rounded corners for a more rectangular appearance */
    }
</style>
"""

# Create a Gradio interface with custom layout and CSS
with gr.Blocks(css=custom_css) as demo:
    for i in range(len(plot_list)):
        with gr.Row():
            gr.Plot(lambda index=i: load_plotly_figure(index), label=plot_list[i])

# Launch the Gradio interface
demo.launch()