Css, loading bar and some adjustments

app.py

@@ -1,16 +1,16 @@
 import gradio as gr
 import pandas as pd
 import os
-# https://discuss.huggingface.co/t/issues-with-sadtalker-zerogpu-spaces-inquiry-about-community-grant/110625/10
-if os.environ.get("SPACES_ZERO_GPU") is not None:
-    import spaces
-else:
-    class spaces:
-        @staticmethod
-        def GPU(func):
-            def wrapper(*args, **kwargs):
-                return func(*args, **kwargs)
-            return wrapper
+# # https://discuss.huggingface.co/t/issues-with-sadtalker-zerogpu-spaces-inquiry-about-community-grant/110625/10
+# if os.environ.get("SPACES_ZERO_GPU") is not None:
+#     import spaces
+# else:
+#     class spaces:
+#         @staticmethod
+#         def GPU(func):
+#             def wrapper(*args, **kwargs):
+#                 return func(*args, **kwargs)
+#             return wrapper
 import sys
 from qatch.connectors.sqlite_connector import SqliteConnector
 from qatch.generate_dataset.orchestrator_generator import OrchestratorGenerator
@@ -23,9 +23,9 @@ import plotly.express as px
 import plotly.graph_objects as go
 import plotly.colors as pc
 
-@spaces.GPU
-def model_prediction():
-  pass
+# @spaces.GPU
+# def model_prediction():
+#   pass
 
 with open('style.css', 'r') as file:
     css = file.read()
@@ -149,9 +149,18 @@ def open_accordion(target):
         return gr.update(open=False), gr.update(open=False), gr.update(open=True, visible=True), gr.update(open=False), gr.update(open=False)
 
 # Interfaccia Gradio
-
 with gr.Blocks(theme='d8ahazard/rd_blue', css_paths='style.css') as interface:
-    gr.Markdown("# QATCH")
+    with gr.Row():
+        gr.Column(scale=1)
+        gr.Image(
+            value="https://github.com/CristianDegni01/Automatic-LLM-Benchmark-Analysis-for-Text2SQL-GRADIO/blob/master/models_logo/QATCH.png?raw=true",
+            show_label=False,
+            container=False,
+            height=200,  # in pixel
+            width=400
+        )
+        gr.Column(scale=1)
+ 
     data_state = gr.State(None)  # Memorizza i dati caricati
     upload_acc = gr.Accordion("Upload your data section", open=True, visible=True)
     select_table_acc = gr.Accordion("Select tables", open=False, visible=False)
@@ -163,52 +172,52 @@ with gr.Blocks(theme='d8ahazard/rd_blue', css_paths='style.css') as interface:
 
 
     #################################
-    #  PARTE DI INSERIMENTO DEL DB  #
+    #       DATABASE INSERTION      #
     #################################
     with upload_acc:
-        gr.Markdown("## Caricamento dei Dati")
+        gr.Markdown("## Data Upload")
 
-        file_input = gr.File(label="Trascina e rilascia un file", file_types=[".csv", ".xlsx", ".sqlite"])
+        file_input = gr.File(label="Drag and drop a file", file_types=[".csv", ".xlsx", ".sqlite"])
         with gr.Row():
-            default_checkbox = gr.Checkbox(label="Usa DataFrame di default")
+            default_checkbox = gr.Checkbox(label="Use default DataFrame")
         preview_output = gr.DataFrame(interactive=True, visible=True, value=df_default)
-        submit_button = gr.Button("Carica Dati", interactive=False)  # Disabilitato di default
-        output = gr.JSON(visible=False)  # Output dizionario
+        submit_button = gr.Button("Load Data", interactive=False)  # Disabled by default
+        output = gr.JSON(visible=False)  # Dictionary output
 
-        # Funzione per abilitare il bottone se sono presenti dati da caricare
+        # Function to enable the button if there is data to load
         def enable_submit(file, use_default):
             return gr.update(interactive=bool(file or use_default))
 
-        # Funzione per deselezionare il checkbox se viene caricato un file
+        # Function to uncheck the checkbox if a file is uploaded
         def deselect_default(file):
             if file:
                 return gr.update(value=False)
             return gr.update()
 
-        # Abilita il bottone quando i campi di input sono valorizzati
+        # Enable the button when inputs are provided
         file_input.change(fn=enable_submit, inputs=[file_input, default_checkbox], outputs=[submit_button])
         default_checkbox.change(fn=enable_submit, inputs=[file_input, default_checkbox], outputs=[submit_button])
         
-        # Mostra l'anteprima del DataFrame di default quando il checkbox è selezionato
+        # Show preview of the default DataFrame when checkbox is selected
         default_checkbox.change(fn=preview_default, inputs=[default_checkbox], outputs=[preview_output])
         preview_output.change(fn=update_df, inputs=[preview_output], outputs=[preview_output])
 
-        # Deseleziona il checkbox quando viene caricato un file
+        # Uncheck the checkbox when a file is uploaded
         file_input.change(fn=deselect_default, inputs=[file_input], outputs=[default_checkbox])
 
         def handle_output(file, use_default):
-            """Gestisce l'output quando si preme il bottone 'Carica Dati'."""
+            """Handles the output when the 'Load Data' button is pressed."""
             result = load_data(file, None, use_default)
             
-            if isinstance(result, dict):  # Se result è un dizionario di DataFrame
-                if len(result) == 1:  # Se c'è solo una tabella
+            if isinstance(result, dict):  # If result is a dictionary of DataFrames
+                if len(result) == 1:  # If there's only one table
                     return (
-                        gr.update(visible=False),  # Nasconde l'output JSON
-                        result,  # Salva lo stato dei dati
-                        gr.update(visible=False),  # Nasconde la selezione tabella
-                        result,  # Mantiene lo stato dei dati
-                        gr.update(interactive=False),  # Disabilita il pulsante di submit
-                        gr.update(visible=True, open=True),  # Passa direttamente a select_model_acc
+                        gr.update(visible=False),  # Hide JSON output
+                        result,  # Save the data state
+                        gr.update(visible=False),  # Hide table selection
+                        result,  # Maintain the data state
+                        gr.update(interactive=False),  # Disable the submit button
+                        gr.update(visible=True, open=True),  # Proceed to select_model_acc
                         gr.update(visible=True, open=False)
                     )
                 else:
@@ -218,7 +227,7 @@ with gr.Blocks(theme='d8ahazard/rd_blue', css_paths='style.css') as interface:
                         gr.update(open=True, visible=True),
                         result,
                         gr.update(interactive=False),
-                        gr.update(visible=False),  # Mantiene il comportamento attuale
+                        gr.update(visible=False),  # Keep current behavior
                         gr.update(visible=True, open=True)
                     )
             else:
@@ -239,75 +248,72 @@ with gr.Blocks(theme='d8ahazard/rd_blue', css_paths='style.css') as interface:
         )
 
 
-
     ######################################
-    #  PARTE DI SELEZIONE DELLE TABELLE  #
+    #        TABLE SELECTION PART        #
     ######################################
     with select_table_acc:
-        
-        table_selector = gr.CheckboxGroup(choices=[], label="Seleziona le tabelle da visualizzare", value=[])
-        table_outputs = [gr.DataFrame(label=f"Tabella {i+1}", interactive=True, visible=False) for i in range(5)]
-        selected_table_names = gr.Textbox(label="Tabelle selezionate", visible=False, interactive=False)
+        table_selector = gr.CheckboxGroup(choices=[], label="Select tables to display", value=[])
+        table_outputs = [gr.DataFrame(label=f"Table {i+1}", interactive=True, visible=False) for i in range(5)]
+        selected_table_names = gr.Textbox(label="Selected tables", visible=False, interactive=False)
 
-        # Bottone di selezione modelli (inizialmente disabilitato)
+        # Model selection button (initially disabled)
         open_model_selection = gr.Button("Choose your models", interactive=False)
 
         def update_table_list(data):
-            """Aggiorna dinamicamente la lista delle tabelle disponibili."""
+            """Dynamically updates the list of available tables."""
             if isinstance(data, dict) and data:
-                table_names = list(data.keys())  # Ritorna solo i nomi delle tabelle
-                return gr.update(choices=table_names, value=[])  # Reset delle selezioni
+                table_names = list(data.keys())  # Return only the table names
+                return gr.update(choices=table_names, value=[])  # Reset selections
             return gr.update(choices=[], value=[])
 
         def show_selected_tables(data, selected_tables):
-            """Mostra solo le tabelle selezionate dall'utente e abilita il bottone."""
+            """Displays only the tables selected by the user and enables the button."""
             updates = []
             if isinstance(data, dict) and data:
-                available_tables = list(data.keys())  # Nomi effettivamente disponibili
-                selected_tables = [t for t in selected_tables if t in available_tables]  # Filtra selezioni valide
+                available_tables = list(data.keys())  # Actually available names
+                selected_tables = [t for t in selected_tables if t in available_tables]  # Filter valid selections
                 
-                tables = {name: data[name] for name in selected_tables}  # Filtra i DataFrame
+                tables = {name: data[name] for name in selected_tables}  # Filter the DataFrames
                 
                 for i, (name, df) in enumerate(tables.items()):
-                    updates.append(gr.update(value=df, label=f"Tabella: {name}", visible=True))
+                    updates.append(gr.update(value=df, label=f"Table: {name}", visible=True))
 
-                # Se ci sono meno di 5 tabelle, nascondi gli altri DataFrame
+                # If there are fewer than 5 tables, hide the other DataFrames
                 for _ in range(len(tables), 5):
                     updates.append(gr.update(visible=False))
             else:
                 updates = [gr.update(value=pd.DataFrame(), visible=False) for _ in range(5)]
 
-            # Abilitare/disabilitare il bottone in base alle selezioni
-            button_state = bool(selected_tables)  # True se almeno una tabella è selezionata, False altrimenti
-            updates.append(gr.update(interactive=button_state))  # Aggiorna stato bottone
+            # Enable/disable the button based on selections
+            button_state = bool(selected_tables)  # True if at least one table is selected, False otherwise
+            updates.append(gr.update(interactive=button_state))  # Update button state
             
             return updates
 
         def show_selected_table_names(selected_tables):
-            """Mostra i nomi delle tabelle selezionate quando si preme il bottone."""
+            """Displays the names of the selected tables when the button is pressed."""
             if selected_tables:
                 return gr.update(value=", ".join(selected_tables), visible=False)
             return gr.update(value="", visible=False)
 
-        # Aggiorna automaticamente la lista delle checkbox quando `data_state` cambia
+        # Automatically updates the checkbox list when `data_state` changes
         data_state.change(fn=update_table_list, inputs=[data_state], outputs=[table_selector])
 
-        # Aggiorna le tabelle visibili e lo stato del bottone in base alle selezioni dell'utente
+        # Updates the visible tables and the button state based on user selections
         table_selector.change(fn=show_selected_tables, inputs=[data_state, table_selector], outputs=table_outputs + [open_model_selection])
 
-        # Mostra la lista delle tabelle selezionate quando si preme "Choose your models"
+        # Shows the list of selected tables when "Choose your models" is clicked
         open_model_selection.click(fn=show_selected_table_names, inputs=[table_selector], outputs=[selected_table_names])
         open_model_selection.click(open_accordion, inputs=gr.State("model_selection"), outputs=[upload_acc, select_table_acc, select_model_acc, qatch_acc, metrics_acc])
 
 
-
     ####################################
-    #  PARTE DI SELEZIONE DEL MODELLO  #
+    #       MODEL SELECTION PART       #
     ####################################
     with select_model_acc:
         gr.Markdown("**Model Selection**")
 
-        # Supponiamo che `us.read_models_csv` restituisca anche il percorso dell'immagine
+        # Assume that `us.read_models_csv` also returns the image path
         model_list_dict = us.read_models_csv(models_path)
         model_list = [model["code"] for model in model_list_dict]
         model_images = [model["image_path"] for model in model_list_dict]
@@ -315,7 +321,7 @@ with gr.Blocks(theme='d8ahazard/rd_blue', css_paths='style.css') as interface:
         model_checkboxes = []
         rows = []
         
-        # Creazione dinamica di checkbox con immagini (3 per riga)
+        # Dynamically create checkboxes with images (3 per row)
         for i in range(0, len(model_list), 3):
             with gr.Row():
                 cols = []
@@ -332,17 +338,17 @@ with gr.Blocks(theme='d8ahazard/rd_blue', css_paths='style.css') as interface:
 
         selected_models_output = gr.JSON(visible=False)
 
-        # Funzione per ottenere i modelli selezionati
+        # Function to get selected models
         def get_selected_models(*model_selections):
             selected_models = [model for model, selected in zip(model_list, model_selections) if selected]
             input_data['models'] = selected_models
-            button_state = bool(selected_models)  # True se almeno un modello è selezionato, False altrimenti
+            button_state = bool(selected_models)  # True if at least one model is selected, False otherwise
             return selected_models, gr.update(open=True, visible=True), gr.update(interactive=button_state)
 
-        # Bottone di submit (inizialmente disabilitato)
+        # Submit button (initially disabled)
         submit_models_button = gr.Button("Submit Models", interactive=False)
 
-        # Collegamento dei checkbox agli eventi di selezione
+        # Link checkboxes to selection events
         for checkbox in model_checkboxes:
             checkbox.change(
                 fn=get_selected_models, 
@@ -356,20 +362,87 @@ with gr.Blocks(theme='d8ahazard/rd_blue', css_paths='style.css') as interface:
             outputs=[selected_models_output, select_model_acc, qatch_acc]
         )
         
+        def enable_disable(enable):
+            return (
+                *[gr.update(interactive=enable) for _ in model_checkboxes],
+                gr.update(interactive=enable),
+                gr.update(interactive=enable),
+                gr.update(interactive=enable), 
+                gr.update(interactive=enable), 
+                gr.update(interactive=enable), 
+                gr.update(interactive=enable),
+                *[gr.update(interactive=enable) for _ in table_outputs],
+                gr.update(interactive=enable)
+            )
+        
         reset_data = gr.Button("Back to upload data section")
+        
+        submit_models_button.click(
+            fn=enable_disable,
+            inputs=[gr.State(False)],
+            outputs=[
+                *model_checkboxes,
+                submit_models_button,
+                preview_output,
+                submit_button,
+                file_input,
+                default_checkbox,
+                table_selector,
+                *table_outputs,
+                open_model_selection
+            ]
+        )
+        
         reset_data.click(open_accordion, inputs=gr.State("reset"), outputs=[upload_acc, select_table_acc, select_model_acc, qatch_acc, metrics_acc, default_checkbox, file_input])
+        
+        reset_data.click(
+            fn=enable_disable,
+            inputs=[gr.State(True)],
+            outputs=[
+                *model_checkboxes,
+                submit_models_button,
+                preview_output,
+                submit_button,
+                file_input,
+                default_checkbox,
+                table_selector,
+                *table_outputs,
+                open_model_selection
+            ]
+        )
 
 
-    ###############################
-    #  PARTE DI ESECUZIONE QATCH  #
-    ###############################
+    #############################
+    #      QATCH EXECUTION      #
+    #############################
     with qatch_acc:
         def change_text(text):
             return text
+
+        loading_symbols= {1:"𓆟", 
+                          2: "𓆞 𓆟", 
+                          3: "𓆟 𓆞 𓆟", 
+                          4: "𓆞 𓆟 𓆞 𓆟", 
+                          5: "𓆟 𓆞 𓆟 𓆞 𓆟",
+                          6: "𓆞 𓆟 𓆞 𓆟 𓆞 𓆟",
+                          7: "𓆟 𓆞 𓆟 𓆞 𓆟 𓆞 𓆟",                          
+                          8: "𓆞 𓆟 𓆞 𓆟 𓆞 𓆟 𓆞 𓆟",
+                          9: "𓆟 𓆞 𓆟 𓆞 𓆟 𓆞 𓆟 𓆞 𓆟",
+                          10:"𓆞 𓆟 𓆞 𓆟 𓆞 𓆟 𓆞 𓆟 𓆞 𓆟",                                                 
+                        }
+
+        def generate_loading_text(percent):
+            num_symbols = (round(percent) % 11) + 1
+            symbols = loading_symbols.get(num_symbols, "𓆟")
+            mirrored_symbols = f'<span class="mirrored">{symbols.strip()}</span>'
+            css_symbols = f'<span class="fish">{symbols.strip()}</span>'
+            return f"<div class='barcontainer'>{css_symbols} <span class='loading'>Generation {percent}%</span>{mirrored_symbols}</div>"
+            #return f"{css_symbols}"+f"# Loading {percent}% #"+f"{mirrored_symbols}"
+        
         def qatch_flow():
             orchestrator_generator = OrchestratorGenerator()
-            #TODO add to target_df column target_df["columns_used"], tables selection
-            #print(input_data['data']['db'])
+            # TODO: add to target_df column target_df["columns_used"], tables selection
+            # print(input_data['data']['db'])
             target_df = orchestrator_generator.generate_dataset(connector=input_data['data']['db'])
             
             schema_text = utils_get_db_tables_info.utils_extract_db_schema_as_string(
@@ -379,27 +452,35 @@ with gr.Blocks(theme='d8ahazard/rd_blue', css_paths='style.css') as interface:
                 sql=None
             )
 
-            # TODO QUERY PREDICTION
+            # TODO: QUERY PREDICTION
             predictions_dict = {model: pd.DataFrame(columns=['id', 'question', 'predicted_sql', 'time', 'query', 'db_path']) for model in model_list}
             metrics_conc = pd.DataFrame()
+            
             for model in input_data["models"]:
+                model_image_path = next((m["image_path"] for m in model_list_dict if m["code"] == model), None)
+                yield gr.Image(model_image_path), gr.Markdown(), gr.Markdown(), gr.Markdown(), metrics_conc, *[predictions_dict[model] for model in model_list]
+                
                 for index, row in target_df.iterrows():
-                    if len(target_df) != 0: load_value = f"##Loading... {round((index + 1) / len(target_df) * 100, 2)}%"
-                    else: load_value = "##Loading..."
-                    question = row['query']
-                    #yield gr.Textbox(question), gr.Textbox(), *[predictions_dict[model] for model in input_data["models"]], None
-                    yield gr.Markdown(value=load_value), gr.Textbox(question), gr.Textbox(), metrics_conc, *[predictions_dict[model] for model in model_list]
+                    
+                    percent_complete = round(((index+1) / len(target_df)) * 100, 2)
+                    load_text = f"{generate_loading_text(percent_complete)}"
+                    
+                    question = row['question']
+                    display_question = f"<div class='loading' style ='font-size: 1.7rem;'>Natural Language: </div> <div class='sqlquery'>{row['question']}</div>"
+                    # yield gr.Textbox(question), gr.Textbox(), *[predictions_dict[model] for model in input_data["models"]], None
+                    
+                    yield gr.Image(), gr.Markdown(load_text), gr.Markdown(display_question), gr.Markdown(), metrics_conc, *[predictions_dict[model] for model in model_list]
                     start_time = time.time()
 
-                    # Simulazione della predizione
-                    time.sleep(0.03)
+                    # Simulate prediction
+                    time.sleep(0.4)
                     prediction = "Prediction_placeholder"
-
-                    # Esegui la predizione reale qui
+                    display_prediction = f"<div class='loading' style ='font-size: 1.7rem;'>Generated SQL: </div><div class='sqlquery'>{prediction}</div>"
+                    # Run real prediction here
                     # prediction = predictor.run(model, schema_text, question)
 
                     end_time = time.time()
-                    # Crea una nuova riga come dataframe
+                    # Create a new row as dataframe
                     new_row = pd.DataFrame([{
                         'id': index,
                         'question': question,
@@ -407,25 +488,29 @@ with gr.Blocks(theme='d8ahazard/rd_blue', css_paths='style.css') as interface:
                         'time': end_time - start_time,
                         'query': row["query"],
                         'db_path': input_data["data_path"]
-                    }]).dropna(how="all")  # Rimuove solo righe completamente vuote
-                    #TODO con un for
+                    }]).dropna(how="all")  # Remove only completely empty rows
+
+                    # TODO: use a for loop
                     for col in target_df.columns:
                         if col not in new_row.columns:
                             new_row[col] = row[col]
-                    # Aggiorna il dataframe corrispondente al modello man mano
+
+                    # Update model's prediction dataframe incrementally
                     if not new_row.empty:
                         predictions_dict[model] = pd.concat([predictions_dict[model], new_row], ignore_index=True)
-                    #yield gr.Textbox(), gr.Textbox(prediction), *[predictions_dict[model] for model in input_data["models"]], None
-                    yield gr.Markdown(value=load_value), gr.Textbox(), gr.Textbox(prediction), metrics_conc, *[predictions_dict[model] for model in model_list]
 
-            #END 
+                    # yield gr.Textbox(), gr.Textbox(prediction), *[predictions_dict[model] for model in input_data["models"]], None
+                    yield gr.Image(), gr.Markdown(load_text), gr.Markdown(), gr.Markdown(display_prediction), metrics_conc, *[predictions_dict[model] for model in model_list]
+
+                yield gr.Image(), gr.Markdown(load_text), gr.Markdown(), gr.Markdown(display_prediction), metrics_conc, *[predictions_dict[model] for model in model_list]
+                # END 
             evaluator = OrchestratorEvaluator()
             for model in input_data["models"]:
                 metrics_df_model = evaluator.evaluate_df(
                     df=predictions_dict[model],
-                    target_col_name="query",              #'<target_column_name>',
-                    prediction_col_name="predicted_sql",  #'<prediction_column_name>',
-                    db_path_name= "db_path",              #'<db_path_column_name>'
+                    target_col_name="query",
+                    prediction_col_name="predicted_sql",
+                    db_path_name="db_path"
                 )
                 metrics_df_model['model'] = model
                 metrics_conc = pd.concat([metrics_conc, metrics_df_model], ignore_index=True)
@@ -433,75 +518,118 @@ with gr.Blocks(theme='d8ahazard/rd_blue', css_paths='style.css') as interface:
                 if 'valid_efficiency_score' not in metrics_conc.columns:
                     metrics_conc['valid_efficiency_score'] = metrics_conc['VES']
 
-            yield gr.Markdown(), gr.Textbox(), gr.Textbox(), metrics_conc, *[predictions_dict[model] for model in model_list]
+            yield gr.Image(), gr.Markdown(), gr.Markdown(), gr.Markdown(), metrics_conc, *[predictions_dict[model] for model in model_list]
 
-        #Loading Bar
+        # Loading Bar
         with gr.Row():
-            #progress = gr.Progress()
+            # progress = gr.Progress()
             variable = gr.Markdown()
 
-        #NL -> MODEL -> Generated Quesy
+        # NL -> MODEL -> Generated Query
         with gr.Row():
             with gr.Column():
-                question_display = gr.Textbox()
+                with gr.Column():
+                    question_display = gr.Markdown()
+                with gr.Column():
+                    gr.Markdown("<div class='leftarrow'>⤴</div>")
             with gr.Column():
-                gr.Image()
+                model_logo = gr.Image(visible=True, show_label=False)
             with gr.Column():
-                prediction_display = gr.Textbox()
+                with gr.Column():
+                    prediction_display = gr.Markdown()
+                with gr.Column():
+                    gr.Markdown("<div class='rightarrow'>⤴</div>")
         
         dataframe_per_model = {}
 
         with gr.Tabs() as model_tabs:
-            #for model in input_data["models"]:
+            tab_dict = {}
             for model in model_list:
-                #TODO fix model tabs
-                with gr.TabItem(model):
+                with gr.TabItem(model, visible=(model in input_data["models"])) as tab:
                     gr.Markdown(f"**Results for {model}**")
+                    tab_dict[model] = tab
                     dataframe_per_model[model] = gr.DataFrame()
+                    # download_pred_model = gr.DownloadButton(label="Download Prediction per Model", visible=False)
+
+        def change_tab():
+            return [gr.update(visible=(model in input_data["models"])) for model in model_list]
 
+        submit_models_button.click(
+            change_tab,
+            inputs=[],
+            outputs=[tab_dict[model] for model in model_list]  # Update TabItem visibility
+        )
 
-        #question_display.change(fn=change_text, inputs=[gr.State(question)], outputs=[question_display])
-        selected_models_display = gr.JSON(label="Modelli selezionati")
+        selected_models_display = gr.JSON(label="Final input data", visible=False)
         metrics_df = gr.DataFrame(visible=False)
-        metrics_df_out= gr.DataFrame(visible=False)
-        
+        metrics_df_out = gr.DataFrame(visible=False)
+
         submit_models_button.click(
             fn=qatch_flow,
             inputs=[],
-            outputs=[variable, question_display, prediction_display, metrics_df] + list(dataframe_per_model.values())
+            outputs=[model_logo, variable, question_display, prediction_display, metrics_df] + list(dataframe_per_model.values())
         )
 
         submit_models_button.click(
             fn=lambda: gr.update(value=input_data), 
             outputs=[selected_models_display]
         )
-        #Funziona per METRICS
-        metrics_df.change(fn=change_text, inputs=[metrics_df], outputs=[metrics_df_out])
-    
-        # def change_tab(selected_models_output, model_tabs):
-        #     for model in model_list:
-        #         if model in selected_models_output:
-        #             pass#model_tabs[model].visible = True
-        #         else:
-        #             pass#model_tabs[model].visible = False
-        #     return model_tabs
 
-        # selected_models_output.change(fn=change_tab, inputs=[selected_models_output, model_tabs], outputs=[])
+        # Works for METRICS
+        metrics_df.change(fn=change_text, inputs=[metrics_df], outputs=[metrics_df_out])
 
         proceed_to_metrics_button = gr.Button("Proceed to Metrics")
         proceed_to_metrics_button.click(
             fn=lambda: (gr.update(open=False, visible=True), gr.update(open=True, visible=True)), 
             outputs=[qatch_acc, metrics_acc]
         )
+
+        def allow_download(metrics_df_out):
+            path = os.path.join(".", "data", "data_results", "results.csv")
+            metrics_df_out.to_csv(path, index=False)
+            return gr.update(value=path, visible=True)
         
+        download_metrics = gr.DownloadButton(label="Download Metrics Evaluation", visible=False)
+
+        submit_models_button.click(
+            fn=lambda: gr.update(visible=False),
+            outputs=[download_metrics]
+        )
+        #TODO WHY?
+        # download_metrics.click(
+        #     fn=lambda: gr.update(open=True, visible=True),
+        #     outputs=[download_metrics]
+        # )
+        metrics_df_out.change(fn=allow_download, inputs=[metrics_df_out], outputs=[download_metrics])
+
         reset_data = gr.Button("Back to upload data section")
         reset_data.click(open_accordion, inputs=gr.State("reset"), outputs=[upload_acc, select_table_acc, select_model_acc, qatch_acc, metrics_acc, default_checkbox, file_input])
+        #WHY NOT WORKING?
+        reset_data.click(
+            fn=lambda: gr.update(visible=False),
+            outputs=[download_metrics]
+        )
+
+        reset_data.click(
+            fn=enable_disable,
+            inputs=[gr.State(True)],
+            outputs=[
+                *model_checkboxes,
+                submit_models_button,
+                preview_output,
+                submit_button,
+                file_input,
+                default_checkbox,
+                table_selector,
+                *table_outputs,
+                open_model_selection
+            ]
+        )
+    
          
-         
-         
-    #######################################
-    #  METRICS VISUALIZATION SECTION      #
-    #######################################
+    ##########################################
+    #     METRICS VISUALIZATION SECTION      #
+    ##########################################
     with metrics_acc:
         #confirmation_text = gr.Markdown("## Metrics successfully loaded")
 
@@ -556,7 +684,7 @@ with gr.Blocks(theme='d8ahazard/rd_blue', css_paths='style.css') as interface:
                     template='plotly_dark'
                 )
                 
-                return fig
+                return gr.Plot(fig, visible=True)
 
             def update_plot(selected_metrics, group_by, selected_models):
                 df = load_data_csv_es()
@@ -768,9 +896,9 @@ with gr.Blocks(theme='d8ahazard/rd_blue', css_paths='style.css') as interface:
                 
                 metric_multiselect = gr.CheckboxGroup(choices=metrics, label="Select metrics", value=metrics)
                 model_multiselect = gr.CheckboxGroup(choices=models, label="Select models", value=models)
-                group_radio = gr.Radio(choices=list(group_options.keys()), label="Select grouping", value="Model")
+                group_radio = gr.Radio(choices=list(group_options.keys()), label="Select grouping", value="Table")
 
-            output_plot = gr.Plot()
+            output_plot = gr.Plot(visible=False)
 
             query_rate_plot = gr.Plot(value=update_query_rate(models))
             
@@ -795,6 +923,10 @@ with gr.Blocks(theme='d8ahazard/rd_blue', css_paths='style.css') as interface:
                 return update_radar(selected_models)
             
             #metrics_df_out.change(on_change, inputs=[metric_multiselect, group_radio, model_multiselect], outputs=output_plot)
+            proceed_to_metrics_button.click(on_change, inputs=[metric_multiselect, group_radio, model_multiselect], outputs=output_plot)
+
+            proceed_to_metrics_button.click(update_query_rate, inputs=[model_multiselect], outputs=query_rate_plot)
+
             metric_multiselect.change(on_change, inputs=[metric_multiselect, group_radio, model_multiselect], outputs=output_plot)
             group_radio.change(on_change, inputs=[metric_multiselect, group_radio, model_multiselect], outputs=output_plot)
             model_multiselect.change(on_change, inputs=[metric_multiselect, group_radio, model_multiselect], outputs=output_plot)
@@ -807,37 +939,30 @@ with gr.Blocks(theme='d8ahazard/rd_blue', css_paths='style.css') as interface:
             reset_data = gr.Button("Back to upload data section")
             reset_data.click(open_accordion, inputs=gr.State("reset"), outputs=[upload_acc, select_table_acc, select_model_acc, qatch_acc, metrics_acc, default_checkbox, file_input])
             
-            # Hidden button to force UI refresh on load
-            force_update_button = gr.Button("", visible=False)
-
-            # State variable to track first load
-            load_trigger = gr.State(value=True)
-
-            # Function to force initial load
-            def force_update(is_first_load):
-                if is_first_load:
-                    return (
-                        update_plot(metrics, group_options["Model"], models),
-                        update_query_rate(models),
-                        update_radar(models),
-                        update_ranking_text(models, "valid_efficiency_score"),
-                        update_worst_cases_text(models),
-                        False  # Change state to prevent continuous reloads
-                    )
-                return gr.update(), gr.update(), gr.update(), gr.update(), gr.update(), False
-
-            # The invisible button forces chart loading only the first time
-            force_update_button.click(
-                fn=force_update,
-                inputs=[load_trigger],
-                outputs=[output_plot, query_rate_plot, radar_plot, ranking_text_display, worst_cases_display, load_trigger]
+            reset_data.click(
+                fn=lambda: gr.update(visible=False),
+                outputs=[download_metrics]
             )
+            reset_data.click(
+                fn=lambda: gr.update(visible=False),
+                outputs=[download_metrics]
+            )            
+            reset_data.click(
+                fn=enable_disable,
+                inputs=[gr.State(True)],
+                outputs=[
+                    *model_checkboxes,
+                    submit_models_button,
+                    preview_output,
+                    submit_button,
+                    file_input,
+                    default_checkbox,
+                    table_selector,
+                    *table_outputs,
+                    open_model_selection
+                ]
+            )
+            
+            
 
-            # Simulate button click when UI loads
-            with gr.Blocks() as demo:
-                demo.load(
-                    lambda: force_update(True),
-                    outputs=[output_plot, query_rate_plot, radar_plot, ranking_text_display, worst_cases_display, load_trigger]
-                )  
-
-interface.launch(share=True)
+interface.launch()

style.css

@@ -28,3 +28,77 @@
     width: 100% !important;
     max-width: none !important;
 }
+
+.mirrored {
+    display: inline-block;
+    transform: scaleX(-1); /* Riflette il testo orizzontalmente */
+    font-family: 'Poppins', sans-serif;
+    font-size: 1.5rem;
+    font-weight: 700;
+    letter-spacing: 1px;
+    text-align: center;
+    color: #222;
+    background: linear-gradient(45deg, #1a41d9, #6c69d2);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    padding: 20px;
+    margin: 20px 0;
+    position: center;
+}
+.fish{
+        font-family: 'Poppins', sans-serif;
+        font-size: 1.5rem;
+        font-weight: 700;
+        letter-spacing: 1px;
+        text-align: center;
+        color: #222;
+        background: linear-gradient(45deg, #1a41d9, #6c69d2);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        padding: 20px;
+        margin: 20px 0;
+        position: center;
+}
+
+.loading {
+    font-family: 'Poppins', sans-serif;
+    font-size: 2.7rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    text-align: center;
+    color: #222;
+    background: linear-gradient(45deg, #40abe9, #1e99e5);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    padding: 20px;
+    /*margin: 20px 0;*/
+    position: center;
+}
+.barcontainer {
+    display: flex;
+    justify-content: center; 
+    align-items: center; 
+}
+.leftarrow, .rightarrow {
+    display: flex;
+    justify-content: center; 
+    align-items: center;
+    font-size: 2.7rem;
+    color: #1d60dd;
+}
+.leftarrow {
+    transform: rotate(-270deg);
+}
+
+.sqlquery {
+    background-color: #272822;
+    color: #f8f8f2;
+    font-family: 'Courier New', monospace;
+    padding: 15px;
+    border-radius: 5px;
+    overflow-x: auto;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}