app.py

import gradio as gr
import pandas as pd



def get_data_product_id_from_table(evt: gr.SelectData):

    id=evt.value

    return get_data_product_id(id)

def get_data_product_id(id):

    print(id)

    image_path_front = dataset_merged_df.loc[dataset_merged_df['ID'] == id, 'Front photo'].values[0]
    image_path_ingredients = dataset_merged_df.loc[dataset_merged_df['ID'] == id, 'Ingredients photo'].values[0]
    image_path_nutritionals = dataset_merged_df.loc[dataset_merged_df['ID'] == id, 'Nutritionals photo'].values[0]

    features = ['brand', 'product_name', 'ingredients', 'energy_kj', 'energy_kcal', 'fat', 'saturated_fat', 'carbohydrates', 'sugars', 'fibers', 'proteins', 'salt']

    data = []

    for feature in features:
        product_values = dataset_merged_df.loc[dataset_merged_df['ID'] == id, [f'Reference_{feature}',f'Predicted_{feature}',f'accuracy_score_{feature}']]
        product_values_list = product_values.values.flatten().tolist()
        data.append([feature]+product_values_list)

    data = pd.DataFrame(data, columns=['Feature', 'Reference value', 'Predicted value', 'Accuracy score'])
    gradients = 1-data['Accuracy score']

    data = data.map(lambda x: f'{x:g}' if isinstance(x, float) else x)
    data = data.style.background_gradient(axis=0, gmap=gradients, cmap='summer', vmin=0, vmax=1)

    plots = [image_path_front, image_path_ingredients, image_path_nutritionals]

    return {data_df: data,
            data_plot: plots,
            }

def load_data(filepath):

    global dataset_merged_df
    global dataset_metadata

    dataset_merged_df = pd.read_csv(f"{filepath}")
    dataset_merged_df['mean_accuracy_score'] = dataset_merged_df.filter(regex='^accuracy_score').mean(axis=1)

    dataset_df  = dataset_merged_df[['ID', 'Reference_brand', 'Reference_product_name', 'mean_accuracy_score']].copy()
    dataset_df = dataset_df.style.background_gradient(axis=0, gmap=1-dataset_df['mean_accuracy_score'], cmap='summer', vmin=0, vmax=1)

    return dataset_df

def toggle_row_visibility(show):
    if show:
        return gr.update(visible=True)
    else:
        return gr.update(visible=False)

# Custom CSS to set max height for the rows
custom_css = """
.dataframe-wrap {
    max-height: 300px;  /* Set the desired height */
    overflow-y: scroll;
}
"""

with gr.Blocks(css=custom_css) as demo:

    gr.HTML("<div align='center'><h1>Euroconsumers Food Data Lake</h1>")
    gr.HTML("<div align='center'><h2>Food data processing</h2>")

    with gr.Row():
        file_input = gr.File(label="Upload CSV File", type="filepath")

    with gr.Row(visible=False) as dataset_block:
        with gr.Column():
            gr.HTML("<h2>Dataset summary</h2>")
            with gr.Row():
                gr.HTML("Click on a product ID (FIRST COLUMN) in the table to view product details")

            # Display summary of the dataset - ID, Reference_brand, Reference_product_name, mean_accuracy_score
            with gr.Row(elem_classes="dataframe-wrap"):
                dataframe_component = gr.DataFrame()

    with gr.Row(visible=False) as product_detail_block:
        with gr.Column():
            # Section for product details
            gr.HTML("<h2>Product details</h2>")

            # Display product photos
            data_plot = gr.Gallery(label="Product photos", show_label=True, elem_id="gallery"
                                    , columns=[3], rows=[1], object_fit="contain", height="auto")
            # Display product data
            # https://github.com/gradio-app/gradio/pull/5894
            data_df = gr.Dataframe(label="Product data", scale=2,
                               column_widths=["10%", "40%", "40%", "10%"],
                                wrap=True)

    ### Control functions

    # Linking the select_dataset change event to update both the gradio DataFrame and product_ids dropdown
    file_input.change(load_data, inputs=file_input, outputs=dataframe_component)
    # Toggle visibility of the dataset block
    file_input.change(toggle_row_visibility, inputs=file_input, outputs=dataset_block)

    # Update the product data and plots when a product ID is clicked in the dataframe
    dataframe_component.select(fn=get_data_product_id_from_table, outputs=[data_df, data_plot])
    # Toggle visibility of the product detail block
    dataframe_component.select(toggle_row_visibility, inputs=file_input, outputs=product_detail_block)

demo.launch(debug=True)