Update app.py

Updated the positions to obtain the desired UX

app.py

@@ -972,17 +972,13 @@ elif page == "💡 Recomendación de Artículos":
                     else:
                         st.write("✓")
 
-        # Preview section
-        st.write("### Previsualiza la cesta completa antes de agregarla:")
-        for code in st.session_state['new_basket']:
-            article_desc = productos[productos['ARTICULO'] == code]['DESCRIPCION'].values[0]
-            st.write(f"- {article_desc} (Código: {code})")
 
+        # Crear columnas para el input manual y el botón en una fila más compacta
         col1, col2 = st.columns([4, 1])
-
-        # Input manual del código de producto con el botón en la misma columna
+        
+        # Input manual del código de producto con el botón en la misma fila
         with col1:
-            manual_code = st.text_input("Añadir código manualmente:", value="", key="manual_code")
+            manual_code = st.text_input("Añadir código manualmente:", value="", key="manual_code", max_chars=15)
         
         # Botón para añadir el código manualmente ingresado, junto al input
         with col2:
@@ -994,6 +990,12 @@ elif page == "💡 Recomendación de Artículos":
                     st.warning(f"⚠️ El código {manual_code} ya está en la cesta.")
                 else:
                     st.warning("⚠️ No se ha introducido un código válido.")
+                    
+                # Preview section
+        st.write("### Previsualiza la cesta completa antes de agregarla:")
+        for code in st.session_state['new_basket']:
+            article_desc = productos[productos['ARTICULO'] == code]['DESCRIPCION'].values[0]
+            st.write(f"- {article_desc} (Código: {code})")
         
         # Botón para añadir cesta al histórico
         if st.button("📦 Añadir cesta al histórico"):
@@ -1009,78 +1011,3 @@ elif page == "💡 Recomendación de Artículos":
     elif st.session_state['recommendations_df'] is not None:
         st.warning("⚠️ No se encontraron recomendaciones para la cesta proporcionada.")
 
-
-# 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.")
-
-                        # # Gráfico adicional: Comparar las ventas predichas y reales para los principales fabricantes
-                        # st.markdown("### Predicted vs Actual Sales for Top Manufacturers")
-                        # top_manufacturers = results.groupby('marca_id_encoded').agg({'ventas_reales': 'sum', 'ventas_predichas': 'sum'}).sort_values(by='ventas_reales', ascending=False).head(10)
-
-                        # fig_comparison = go.Figure()
-                        # fig_comparison.add_trace(go.Bar(x=top_manufacturers.index, y=top_manufacturers['ventas_reales'], name="Actual Sales", marker_color='blue'))
-                        # fig_comparison.add_trace(go.Bar(x=top_manufacturers.index, y=top_manufacturers['ventas_predichas'], name="Predicted Sales", marker_color='orange'))
-
-                        # fig_comparison.update_layout(
-                        #     title="Actual vs Predicted Sales by Top Manufacturers",
-                        #     xaxis_title="Manufacturer",
-                        #     yaxis_title="Sales (€)",
-                        #     barmode='group',
-                        #     height=400,
-                        #     hovermode="x unified"
-                        # )
-
-                        # st.plotly_chart(fig_comparison, use_container_width=True)