feat: Added about section underneath table in col 3

app.py

@@ -719,124 +719,54 @@ elif page == "🕵️ Análisis de Cliente":
                                     st.warning(f"No predicted or actual data found for customer {customer_code} for 2024.")
 
 # Customer Recommendations Page
-elif page == "💡 Recomendación de Artículos":
-    # Carga de CSV necesarios cestas y productos
-    cestas = pd.read_csv('cestas.csv') 
-    productos = pd.read_csv('productos.csv')
-    
-    # Estilo principal de la página
-    st.markdown(
-        "<h1 style='text-align: center;'>Recomendación de Artículos</h1>", 
-        unsafe_allow_html=True
-    )
-    st.markdown("""<p style='text-align: center; color: #5D6D7E;'>Obtén recomendaciones personalizadas para tus clientes basadas en su cesta de compra.</p>""", unsafe_allow_html=True)
-
-    st.write("### Selecciona los artículos y asigna las cantidades para la cesta:")
-
-    # Añadir separador para mejorar la segmentación visual
-    st.divider()
-
-    # Mostrar lista de artículos disponibles (ahora se usa el código asociado a cada descripción)
-    available_articles = productos[['ARTICULO', 'DESCRIPCION']].drop_duplicates()
-
-    # Crear diccionario para asignar las descripciones a los códigos
-    article_dict = dict(zip(available_articles['DESCRIPCION'], available_articles['ARTICULO']))
-
-    # Permitir seleccionar las descripciones, pero trabajar con los códigos
-    selected_descriptions = st.multiselect("Select Articles", available_articles['DESCRIPCION'].unique())
-    
-    quantities = {}
-
-    if selected_descriptions:
-        st.write("### Selecciona los artículos, las unidades, y visualiza la imagen:")
-
-        for description in selected_descriptions:
-            code = article_dict[description]  # Usar el código del artículo
-            col1, col2, col3 = st.columns([1, 2, 2])  # Ajustar proporciones para que las imágenes y textos se alineen
-
-            with col1:
-                # Mostrar la imagen del artículo
-                img_url = f"https://www.saneamiento-martinez.com/imagenes/articulos/{code}_1.JPG"
-                st.image(img_url, width=100)
-
-            with col2:
-                # Mostrar la descripción del artículo
-                st.write(f"**{description}**")
-            
-            with col3:
-                # Caja de número para la cantidad, asociada al código
-                quantities[code] = st.number_input(f"Cantidad {code}", min_value=0, step=1, key=code)
-
-    # Añadir un botón estilizado "Calcular" con icono
-    if st.button("🛒 Obtener Recomendaciones"):
-        # Crear una lista de artículos basada en los códigos y cantidades
-        new_basket = []
-        for code in quantities:
-            quantity = quantities[code]
-            if quantity > 0:
-                new_basket.extend([code] * quantity)  # Añadir el código tantas veces como 'quantity'
-        
-        if new_basket:
-            # Procesar la lista para recomendar
-            recommendations_df = recomienda_tf(new_basket, cestas, productos)
-
-            if not recommendations_df.empty:
-                st.success("### Según tu cesta, te recomendamos que consideres añadir estos artículos:")
-
-                # Mostrar los artículos recomendados con imágenes
-                for idx, row in recommendations_df.iterrows():
-                    rec_code = row['ARTICULO']
-                    rec_desc = row['DESCRIPCION']
-                    rec_img_url = f"https://www.saneamiento-martinez.com/imagenes/articulos/{rec_code}_1.JPG"
-                    
-                    rec_col1, rec_col2 = st.columns([1, 3])
-                    with rec_col1:
-                        st.image(rec_img_url, width=100)
-                    with rec_col2:
-                        st.write(f"**{rec_desc}** (Código: {rec_code})")
-            else:
-                st.warning("⚠️ No recommendations found for the provided basket.")
-        else:
-            st.warning("⚠️ Please select at least one article and set its quantity.")
-
-
-
 # elif page == "💡 Recomendación de Artículos":
 #     # Carga de CSV necesarios cestas y productos
 #     cestas = pd.read_csv('cestas.csv') 
 #     productos = pd.read_csv('productos.csv')
+    
 #     # Estilo principal de la página
 #     st.markdown(
 #         "<h1 style='text-align: center;'>Recomendación de Artículos</h1>", 
 #         unsafe_allow_html=True
 #     )
-#     st.markdown("""
-#         <p style='text-align: center; color: #5D6D7E;'>Obtén recomendaciones personalizadas para tus clientes basadas en su cesta de compra.</p>
-#     """, unsafe_allow_html=True)
+#     st.markdown("""<p style='text-align: center; color: #5D6D7E;'>Obtén recomendaciones personalizadas para tus clientes basadas en su cesta de compra.</p>""", unsafe_allow_html=True)
+
 #     st.write("### Selecciona los artículos y asigna las cantidades para la cesta:")
+
 #     # Añadir separador para mejorar la segmentación visual
 #     st.divider()
+
 #     # Mostrar lista de artículos disponibles (ahora se usa el código asociado a cada descripción)
 #     available_articles = productos[['ARTICULO', 'DESCRIPCION']].drop_duplicates()
-    
+
 #     # Crear diccionario para asignar las descripciones a los códigos
 #     article_dict = dict(zip(available_articles['DESCRIPCION'], available_articles['ARTICULO']))
+
 #     # Permitir seleccionar las descripciones, pero trabajar con los códigos
 #     selected_descriptions = st.multiselect("Select Articles", available_articles['DESCRIPCION'].unique())
-#     quantities = {}
     
+#     quantities = {}
+
 #     if selected_descriptions:
-#         st.write("### Selecciona los artículos y las unidades:")
+#         st.write("### Selecciona los artículos, las unidades, y visualiza la imagen:")
+
 #         for description in selected_descriptions:
 #             code = article_dict[description]  # Usar el código del artículo
-#             col1, col2 = st.columns([1, 3])  # Ajustar proporciones para que las cantidades vayan a la izquierda
+#             col1, col2, col3 = st.columns([1, 2, 2])  # Ajustar proporciones para que las imágenes y textos se alineen
+
 #             with col1:
-#                 # Caja de número para la cantidad, asociada al código
-#                 quantities[code] = st.number_input(f"Quantity {code}", min_value=0, step=1, key=code)
+#                 # Mostrar la imagen del artículo
+#                 img_url = f"https://www.saneamiento-martinez.com/imagenes/articulos/{code}_1.JPG"
+#                 st.image(img_url, width=100)
+
 #             with col2:
 #                 # Mostrar la descripción del artículo
-#                 st.write(description)
-    
+#                 st.write(f"**{description}**")
+            
+#             with col3:
+#                 # Caja de número para la cantidad, asociada al código
+#                 quantities[code] = st.number_input(f"Cantidad {code}", min_value=0, step=1, key=code)
+
 #     # Añadir un botón estilizado "Calcular" con icono
 #     if st.button("🛒 Obtener Recomendaciones"):
 #         # Crear una lista de artículos basada en los códigos y cantidades
@@ -845,14 +775,84 @@ elif page == "💡 Recomendación de Artículos":
 #             quantity = quantities[code]
 #             if quantity > 0:
 #                 new_basket.extend([code] * quantity)  # Añadir el código tantas veces como 'quantity'
+        
 #         if new_basket:
 #             # Procesar la lista para recomendar
 #             recommendations_df = recomienda_tf(new_basket, cestas, productos)
-            
+
 #             if not recommendations_df.empty:
-#                 st.success("### Según tu cesta, te recomendamos que consideres añadir uno de estos artículos:")
-#                 st.dataframe(recommendations_df, height=300, width=800)  # Ajustar el tamaño del DataFrame
+#                 st.success("### Según tu cesta, te recomendamos que consideres añadir estos artículos:")
+
+#                 # Mostrar los artículos recomendados con imágenes
+#                 for idx, row in recommendations_df.iterrows():
+#                     rec_code = row['ARTICULO']
+#                     rec_desc = row['DESCRIPCION']
+#                     rec_img_url = f"https://www.saneamiento-martinez.com/imagenes/articulos/{rec_code}_1.JPG"
+                    
+#                     rec_col1, rec_col2 = st.columns([1, 3])
+#                     with rec_col1:
+#                         st.image(rec_img_url, width=100)
+#                     with rec_col2:
+#                         st.write(f"**{rec_desc}** (Código: {rec_code})")
 #             else:
 #                 st.warning("⚠️ No recommendations found for the provided basket.")
 #         else:
 #             st.warning("⚠️ Please select at least one article and set its quantity.")
+
+
+
+elif page == "💡 Recomendación de Artículos":
+    # Carga de CSV necesarios cestas y productos
+    cestas = pd.read_csv('cestas.csv') 
+    productos = pd.read_csv('productos.csv')
+    # Estilo principal de la página
+    st.markdown(
+        "<h1 style='text-align: center;'>Recomendación de Artículos</h1>", 
+        unsafe_allow_html=True
+    )
+    st.markdown("""
+        <p style='text-align: center; color: #5D6D7E;'>Obtén recomendaciones personalizadas para tus clientes basadas en su cesta de compra.</p>
+    """, unsafe_allow_html=True)
+    st.write("### Selecciona los artículos y asigna las cantidades para la cesta:")
+    # Añadir separador para mejorar la segmentación visual
+    st.divider()
+    # Mostrar lista de artículos disponibles (ahora se usa el código asociado a cada descripción)
+    available_articles = productos[['ARTICULO', 'DESCRIPCION']].drop_duplicates()
+    
+    # Crear diccionario para asignar las descripciones a los códigos
+    article_dict = dict(zip(available_articles['DESCRIPCION'], available_articles['ARTICULO']))
+    # Permitir seleccionar las descripciones, pero trabajar con los códigos
+    selected_descriptions = st.multiselect("Select Articles", available_articles['DESCRIPCION'].unique())
+    quantities = {}
+    
+    if selected_descriptions:
+        st.write("### Selecciona los artículos y las unidades:")
+        for description in selected_descriptions:
+            code = article_dict[description]  # Usar el código del artículo
+            col1, col2 = st.columns([1, 3])  # Ajustar proporciones para que las cantidades vayan a la izquierda
+            with col1:
+                # Caja de número para la cantidad, asociada al código
+                quantities[code] = st.number_input(f"Quantity {code}", min_value=0, step=1, key=code)
+            with col2:
+                # Mostrar la descripción del artículo
+                st.write(description)
+    
+    # Añadir un botón estilizado "Calcular" con icono
+    if st.button("🛒 Obtener Recomendaciones"):
+        # Crear una lista de artículos basada en los códigos y cantidades
+        new_basket = []
+        for code in quantities:
+            quantity = quantities[code]
+            if quantity > 0:
+                new_basket.extend([code] * quantity)  # Añadir el código tantas veces como 'quantity'
+        if new_basket:
+            # Procesar la lista para recomendar
+            recommendations_df = recomienda_tf(new_basket, cestas, productos)
+            
+            if not recommendations_df.empty:
+                st.success("### Según tu cesta, te recomendamos que consideres añadir uno de estos artículos:")
+                st.dataframe(recommendations_df, height=300, width=800)  # Ajustar el tamaño del DataFrame
+            else:
+                st.warning("⚠️ No recommendations found for the provided basket.")
+        else:
+            st.warning("⚠️ Please select at least one article and set its quantity.")