app.py

import gradio as gr
import pandas as pd
from PIL import Image

# Function to read CSV and show preview
def read_csv(file):
    df = pd.read_csv(file.name)
    return df.head()  # Show only the first 5 rows for preview

# Function to upload and display an image
def upload_image(image_file):
    img = Image.open(image_file.name)
    return img

# Function to select CSV display options (Preview or Full View)
def toggle_view(file, view_type):
    df = pd.read_csv(file.name)
    if view_type == "Preview":
        return df.head()  # Show the first 5 rows for preview
    return df  # Show the entire data

# Creating Gradio Interface
with gr.Blocks() as demo:
    # Create a menu bar
    gr.HTML("""
    <div style="background-color:#f5f5f5;padding:10px;border-radius:5px;">
        <h3 style="margin:0;">CSV and Image Viewer App</h3>
    </div>
    """)
    
    # Image Upload Section
    with gr.Row():
        image_input = gr.File(label="Upload Image", type="file", file_count="single")
        image_output = gr.Image(type="pil")
        image_input.change(upload_image, inputs=image_input, outputs=image_output)

    # CSV File Upload Section
    with gr.Row():
        file_input = gr.File(label="Upload CSV File", type="filepath")
        file_output = gr.DataFrame()
        
        # Radio buttons to select CSV view type (Preview or Full)
        view_selector = gr.Radio(label="View Type", choices=["Preview", "Full View"], value="Preview")
        
        file_input.change(toggle_view, inputs=[file_input, view_selector], outputs=file_output)
        view_selector.change(toggle_view, inputs=[file_input, view_selector], outputs=file_output)

demo.launch()