feat: Added about section underneath table in col 3

app.py

@@ -723,38 +723,50 @@ 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
@@ -763,45 +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.")
-# # Customer Recommendations Page
-# elif page == "Articles Recommendations":
-#     st.title("Articles Recommendations")
+
+
+
+# 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("""
-#         Get tailored recommendations for your customers based on their basket.
-#     """)
-#     st.write("Select items and assign quantities for the basket:")
-#     # Mostrar lista de artículos disponibles
-#     available_articles = productos['ARTICULO'].unique()
-#     selected_articles = st.multiselect("Select Articles", available_articles)
-#     # Crear inputs para ingresar las cantidades de cada artículo seleccionado
+#         <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 = {}
-#     for article in selected_articles:
-#         quantities[article] = st.number_input(f"Quantity for {article}", min_value=0, step=1)
-#     if st.button("Calcular"):  # Añadimos el botón "Calcular"
-#         # Crear una lista de artículos basada en la selección de códigos y cantidades
+    
+#     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 article in selected_articles:
-#             quantity = quantities[article]
+#         for code in quantities:
+#             quantity = quantities[code]
 #             if quantity > 0:
-#                 new_basket.extend([article] * quantity)  # Añadir el código 'article' tantas veces como 'quantity'
+#                 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_tfid(new_basket)
+#             recommendations_df = recomienda_tf(new_basket, cestas, productos)
+            
 #             if not recommendations_df.empty:
-#                 st.write("### Recommendations based on the current basket:")
-#                 st.dataframe(recommendations_df)
+#                 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.")
+#                 st.warning("⚠️ No recommendations found for the provided basket.")
 #         else:
-#             st.warning("Please select at least one article and set its quantity.")
+#             st.warning("⚠️ Please select at least one article and set its quantity.")