feat(SRC): :rocket: Change style. Change functionality

User has to add initial macros and then final macros is initial macros plus macros mode

app.py

@@ -16,7 +16,10 @@ def clustering_responses(esfuerzo_dieta, objetivo, cumplimiento_entrenamiento,
     return cluster_esfuerzo_dieta, cluster_objetivo, cluster_entrenamiento, cluster_cumplimiento_dieta, cluster_compromiso, diff_peso_min, diff_peso_max
 
 def calcular_macros(esfuerzo_dieta, objetivo, cumplimiento_entrenamiento, 
-                    cumplimiento_dieta, compromiso, variacion_peso):
+                    cumplimiento_dieta, compromiso, variacion_peso,
+                    train_day_protein_initial, train_day_carbs_initial, train_day_fat_initial,
+                    intratrain_protein_initial, intratrain_carbs_initial,
+                    rest_day_protein_initial, rest_day_carbs_initial, rest_day_fat_initial):
     # Obtenemos los valores correspondientes a cada selección
     valor_esfuerzo = next(list(opcion.values())[0]["value"] 
                          for opcion in opciones_esfuerzo 
@@ -90,26 +93,33 @@ def calcular_macros(esfuerzo_dieta, objetivo, cumplimiento_entrenamiento,
     # Print macros min, max and mean
     print(f"Macros min, max and mean:\n{train_day_protein_std}, {train_day_carbs_std}, {train_day_fat_std}, {intratrain_protein_std}, {intratrain_carbs_std}, {rest_day_protein_std}, {rest_day_carbs_std}, {rest_day_fat_std}")
 
-    # Create strings for the outputs
-    train_day_protein_str = f"min: {train_day_protein_std[0]}, max: {train_day_protein_std[1]}, mean: {train_day_protein_std[2]:.2f}, mode: {train_day_protein_std[3]}"
-    train_day_carbs_str = f"min: {train_day_carbs_std[0]}, max: {train_day_carbs_std[1]}, mean: {train_day_carbs_std[2]:.2f}, mode: {train_day_carbs_std[3]}"
-    train_day_fat_str = f"min: {train_day_fat_std[0]}, max: {train_day_fat_std[1]}, mean: {train_day_fat_std[2]:.2f}, mode: {train_day_fat_std[3]}"
-    intratrain_protein_str = f"min: {intratrain_protein_std[0]}, max: {intratrain_protein_std[1]}, mean: {intratrain_protein_std[2]:.2f}, mode: {intratrain_protein_std[3]}"
-    intratrain_carbs_str = f"min: {intratrain_carbs_std[0]}, max: {intratrain_carbs_std[1]}, mean: {intratrain_carbs_std[2]:.2f}, mode: {intratrain_carbs_std[3]}"
-    rest_day_protein_str = f"min: {rest_day_protein_std[0]}, max: {rest_day_protein_std[1]}, mean: {rest_day_protein_std[2]:.2f}, mode: {rest_day_protein_std[3]}"
-    rest_day_carbs_str = f"min: {rest_day_carbs_std[0]}, max: {rest_day_carbs_std[1]}, mean: {rest_day_carbs_std[2]:.2f}, mode: {rest_day_carbs_std[3]}"
-    rest_day_fat_str = f"min: {rest_day_fat_std[0]}, max: {rest_day_fat_std[1]}, mean: {rest_day_fat_std[2]:.2f}, mode: {rest_day_fat_std[3]}"
+    # Get macros min, max, mean and mode
+    train_day_protein_min, train_day_protein_max, train_day_protein_mean, train_day_protein_mode = train_day_protein_std
+    train_day_carbs_min, train_day_carbs_max, train_day_carbs_mean, train_day_carbs_mode = train_day_carbs_std
+    train_day_fat_min, train_day_fat_max, train_day_fat_mean, train_day_fat_mode = train_day_fat_std
+    
+    intratrain_protein_min, intratrain_protein_max, intratrain_protein_mean, intratrain_protein_mode = intratrain_protein_std
+    intratrain_carbs_min, intratrain_carbs_max, intratrain_carbs_mean, intratrain_carbs_mode = intratrain_carbs_std
+    
+    rest_day_protein_min, rest_day_protein_max, rest_day_protein_mean, rest_day_protein_mode = rest_day_protein_std
+    rest_day_carbs_min, rest_day_carbs_max, rest_day_carbs_mean, rest_day_carbs_mode = rest_day_carbs_std
+    rest_day_fat_min, rest_day_fat_max, rest_day_fat_mean, rest_day_fat_mode = rest_day_fat_std
+
+    # Calculate macros final
+    train_day_protein_final = train_day_protein_initial + train_day_protein_mode
+    train_day_carbs_final = train_day_carbs_initial + train_day_carbs_mode
+    train_day_fat_final = train_day_fat_initial + train_day_fat_mode
 
-    # train_day_protein_str = "0"
-    # train_day_carbs_str = "0"
-    # train_day_fat_str = "0"
-    # intratrain_protein_str = "0"
-    # intratrain_carbs_str = "0"
-    # rest_day_protein_str = "0"
-    # rest_day_carbs_str = "0"
-    # rest_day_fat_str = "0"
+    intratrain_protein_final = intratrain_protein_initial + intratrain_protein_mode
+    intratrain_carbs_final = intratrain_carbs_initial + intratrain_carbs_mode
 
-    return train_day_protein_str, train_day_carbs_str, train_day_fat_str, intratrain_protein_str, intratrain_carbs_str, rest_day_protein_str, rest_day_carbs_str, rest_day_fat_str
+    rest_day_protein_final = rest_day_protein_initial + rest_day_protein_mode
+    rest_day_carbs_final = rest_day_carbs_initial + rest_day_carbs_mode
+    rest_day_fat_final = rest_day_fat_initial + rest_day_fat_mode
+
+    return (train_day_protein_final, train_day_carbs_final, train_day_fat_final,
+            intratrain_protein_final, intratrain_carbs_final,
+            rest_day_protein_final, rest_day_carbs_final, rest_day_fat_final)
 
 # Definimos las opciones para cada menú desplegable
 opciones_esfuerzo = [
@@ -307,10 +317,58 @@ opciones_compromiso = [
     }
 ]
 
+# Definimos el color naranja
+naranja = "#ea580b"
+
+title_macros_iniciales_html = f"""
+<h1 style="text-align: center; color: {naranja}; margin: 0; padding: 0;">Macros iniciales</h1>
+"""
+
+title_cuestionario_html = f"""
+<h1 style="text-align: center; color: {naranja}; margin: 0; padding: 0;">Respuestas cuestionario</h1>
+"""
+
+title_macros_finales_html = f"""
+<h1 style="text-align: center; color: {naranja}; margin: 0; padding: 0;">Macros finales</h1>
+"""
+
+style_css = f"""
+<style>
+    .demo {{
+        background-color: {naranja};
+    }}
+    .input-group, .output-group {{
+        background-color: {naranja};
+        padding: 2px;
+        border-radius: 7px;
+    }}
+    .input-row .output-row {{
+    }}
+    .input-column {{
+    }}
+    .input-number {{
+        background-color: black;
+        color: white;
+    }}
+    .input-dropdown {{
+        background-color: black;
+        color: white;
+    }}
+    .calcular-btn {{
+        background-color: {naranja};
+        color: white;
+        border-radius: 7px;
+        margin-bottom: 70px;
+    }}
+    .output-number {{
+        background-color: black;
+        color: white;
+    }}
+</style>
+"""
+
 # Creamos la interfaz
-with gr.Blocks() as demo:
-    # Definimos el color naranja
-    naranja = "#FF9300"
+with gr.Blocks(css=style_css, elem_classes="demo") as demo:
     
     # Procesamos las opciones para obtener solo los textos
     textos_esfuerzo = [list(opcion.values())[0]["text"] for opcion in opciones_esfuerzo]
@@ -320,95 +378,154 @@ with gr.Blocks() as demo:
     textos_compromiso = [list(opcion.values())[0]["text"] for opcion in opciones_compromiso]
     
     # Entradas
-    with gr.Row():
-        esfuerzo = gr.Dropdown(
-            choices=textos_esfuerzo, 
-            label="Esfuerzo dieta",
-            value="No costó nada"
-        )
-        cumplimiento_dieta = gr.Dropdown(
-            choices=textos_cumplimiento_dieta, 
-            label="Cumplimiento de la dieta",
-            value="Perfecta"
-        )
-        objetivo = gr.Dropdown(
-            choices=textos_objetivo, 
-            label="Objetivo",
-            value="volumen (nada cambia)"
-        )
-    with gr.Row():
-        cumplimiento_entr = gr.Dropdown(
-            choices=textos_cumplimiento_entr, 
-            label="Cumplimiento del entrenamiento",
-            value="Lo hice perfecto"
-        )
-        compromiso = gr.Dropdown(
-            choices=textos_compromiso, 
-            label="Compromiso",
-            value="Máximo"
-        )
-        variacion_peso = gr.Number(
-            label="Variación de peso", 
-            precision=2,
-            value=0.7
-        )
+    gr.Markdown(title_macros_iniciales_html)
+    with gr.Group(elem_classes="input-group"):
+        with gr.Row(elem_classes="input-row"):
+            with gr.Column(elem_classes="input-column"):
+                train_day_protein_initial = gr.Number(
+                    label="Proteína día de entreno (g)", 
+                    precision=0,
+                    value=150,
+                    step=10,
+                    minimum=0,
+                    elem_classes="input-number"
+                )
+                train_day_carbs_initial = gr.Number(
+                    label="Carbohidratos día de entreno (g)", 
+                    precision=0,
+                    value=150,
+                    step=10,
+                    minimum=0,
+                    elem_classes="input-number"
+                )
+                train_day_fat_initial = gr.Number(
+                    label="Grasas día de entreno (g)", 
+                    precision=0,
+                    value=150,
+                    step=10,
+                    minimum=0,
+                    elem_classes="input-number"
+                )
+            with gr.Column(elem_classes="input-column"):
+                intratrain_protein_initial = gr.Number(
+                    label="Proteína intraentreno (g)", 
+                    precision=0,
+                    value=150,
+                    step=10,
+                    minimum=0,
+                    elem_classes="input-number"
+                )
+                intratrain_carbs_initial = gr.Number(
+                    label="Carbohidratos intraentreno (g)", 
+                    precision=0,
+                    value=150,
+                    step=10,
+                    minimum=0,
+                    elem_classes="input-number"
+                )
+            with gr.Column(elem_classes="input-column"):
+                rest_day_protein_initial = gr.Number(
+                    label="Proteína día de descanso (g)", 
+                    precision=0,
+                    value=150,
+                    step=10,
+                    minimum=0,
+                    elem_classes="input-number"
+                )
+                rest_day_carbs_initial = gr.Number(
+                    label="Carbohidratos día de descanso (g)", 
+                    precision=0,
+                    value=150,
+                    step=10,
+                    minimum=0,
+                    elem_classes="input-number"
+                )
+                rest_day_fat_initial = gr.Number(
+                    label="Grasas día de descanso (g)", 
+                    precision=0,
+                    value=150,
+                    step=10,
+                    minimum=0,
+                    elem_classes="input-number"
+                )
+    
+    gr.Markdown(title_cuestionario_html)
+    with gr.Group(elem_classes="input-group"):
+        with gr.Row(elem_classes="input-row"):
+            esfuerzo = gr.Dropdown(
+                choices=textos_esfuerzo, 
+                label="Esfuerzo dieta",
+                value="No costó nada",
+                elem_classes="input-dropdown"
+            )
+            cumplimiento_dieta = gr.Dropdown(
+                choices=textos_cumplimiento_dieta, 
+                label="Cumplimiento de la dieta",
+                value="Perfecta",
+                elem_classes="input-dropdown"
+            )
+            objetivo = gr.Dropdown(
+                choices=textos_objetivo, 
+                label="Objetivo",
+                value="volumen (nada cambia)",
+                elem_classes="input-dropdown"
+            )
+        with gr.Row(elem_classes="input-row"):
+            cumplimiento_entr = gr.Dropdown(
+                choices=textos_cumplimiento_entr, 
+                label="Cumplimiento del entrenamiento",
+                value="Lo hice perfecto",
+                elem_classes="input-dropdown"
+            )
+            compromiso = gr.Dropdown(
+                choices=textos_compromiso, 
+                label="Compromiso",
+                value="Máximo",
+                elem_classes="input-dropdown"
+            )
+            variacion_peso = gr.Number(
+                label="Variación de peso", 
+                precision=2,
+                value=0.7,
+                step=0.1,
+                elem_classes="input-number"
+            )
     
     # Versión simple del botón
     calcular_btn = gr.Button(
-        "Calcular",
+        "Calcular macros",
         variant="primary",
-        size="lg"
+        size="lg",
+        elem_classes="calcular-btn"
     )
     
-    # Añadimos el estilo CSS personalizado
-    css = f"""
-        <style>
-        #boton-naranja {{
-            background-color: {naranja} !important;
-            border: 1px solid {naranja} !important;
-        }}
-        #boton-naranja:hover {{
-            background-color: {naranja}DD !important;
-            border: 1px solid {naranja}DD !important;
-        }}
-        </style>
-    """
-    
-    css_outputs = """
-        <style>
-        .output-row {
-            align-items: flex-end !important;
-            display: flex !important;
-            gap: 1rem !important;
-        }
-        .output-row > * {
-            flex: 1;
-            min-width: 0;
-        }
-        </style>
-    """
-    
-    gr.Markdown(css + css_outputs)
-    
     # Salidas
-    with gr.Row(elem_classes="output-row"):
-        proteina_entreno = gr.Textbox(label="Proteína día de entreno (g)")
-        carbs_entreno = gr.Textbox(label="Carbohidratos día de entreno (g)")
-        grasas_entreno = gr.Textbox(label="Grasas día de entreno (g)")
-        proteina_intra = gr.Textbox(label="Proteína intraentreno (g)")
-        carbs_intra = gr.Textbox(label="Carbohidratos intraentreno (g)")
-        proteina_descanso = gr.Textbox(label="Proteína día de descanso (g)")
-        carbs_descanso = gr.Textbox(label="Carbohidratos día de descanso (g)")
-        grasas_descanso = gr.Textbox(label="Grasas día de descanso (g)")
+    gr.Markdown(title_macros_finales_html)
+    with gr.Group(elem_classes="output-group"):
+        with gr.Row(elem_classes="output-row"):
+            with gr.Column():
+                train_day_protein_final = gr.Number(label="Proteína día de entreno Final (g)", precision=0, elem_classes="output-number")
+                train_day_carbs_final = gr.Number(label="Carbohidratos día de entreno Final (g)", precision=0, elem_classes="output-number")
+                train_day_fat_final = gr.Number(label="Grasas día de entreno Final (g)", precision=0, elem_classes="output-number")
+            with gr.Column():
+                intratrain_protein_final = gr.Number(label="Proteína intraentreno Final (g)", precision=0, elem_classes="output-number")
+                intratrain_carbs_final = gr.Number(label="Carbohidratos intraentreno Final (g)", precision=0, elem_classes="output-number")
+            with gr.Column():
+                rest_day_protein_final = gr.Number(label="Proteína día de descanso Final (g)", precision=0, elem_classes="output-number")
+                rest_day_carbs_final = gr.Number(label="Carbohidratos día de descanso Final (g)", precision=0, elem_classes="output-number")
+                rest_day_fat_final = gr.Number(label="Grasas día de descanso Final (g)", precision=0, elem_classes="output-number")
     
     # Conectamos el botón con la función
     calcular_btn.click(
         fn=calcular_macros,
         inputs=[esfuerzo, objetivo, cumplimiento_entr, cumplimiento_dieta, 
-                compromiso, variacion_peso],
-        outputs=[proteina_entreno, carbs_entreno, grasas_entreno,
-                proteina_intra, carbs_intra,
-                proteina_descanso, carbs_descanso, grasas_descanso]
+                compromiso, variacion_peso,
+                train_day_protein_initial, train_day_carbs_initial, train_day_fat_initial,
+                intratrain_protein_initial, intratrain_carbs_initial,
+                rest_day_protein_initial, rest_day_carbs_initial, rest_day_fat_initial],
+        outputs=[train_day_protein_final, train_day_carbs_final, train_day_fat_final,
+                 intratrain_protein_final, intratrain_carbs_final,
+                 rest_day_protein_final, rest_day_carbs_final, rest_day_fat_final]
     )
 
 demo.launch()