Guardar mis cambios locales

app.py

@@ -1,5 +1,7 @@
 import gradio as gr
 import pandas as pd
+import numpy as np
+import plotly.graph_objects as go
 import joblib  # Para cargar el modelo ARIMA guardado
 
 # Función para cargar el modelo ARIMA guardado
@@ -85,10 +87,24 @@ def upload_and_forecast(uploaded_file, period):
 # Interfaz de Gradio
 def create_sidebar():
     with gr.Column():
+        # Personalización del componente de carga de archivos
         gr.Markdown("### 📂 Upload your sales data (CSV)")
-        uploaded_file = gr.File(label="Choose your file", elem_id="file-uploader", type="file")
+        uploaded_file = gr.File(
+            label="Choose your file",
+            elem_id="file-uploader",
+            type="file",
+            file_count="single",  # Permite solo un archivo a la vez
+            file_types=[".csv"],  # Limita solo a archivos CSV
+            max_size=200 * 1024 * 1024,  # Límite de tamaño de archivo: 200MB
+            interactive=True,  # Hacer interactivo el componente para arrastrar y soltar
+        )
         gr.Markdown("### ⏳ Forecast Period (Days)")
         period = gr.Slider(minimum=30, maximum=90, step=1, label="Forecast period (in days)")
+
+        # Botón para descargar un archivo CSV de ejemplo
+        with gr.Row():
+            gr.Download("Download our sample CSV", file="sample_data.csv")  # Asegúrate de tener un archivo "sample_data.csv" en el directorio
+
         return uploaded_file, period
 
 # Crear el sidebar y la interfaz principal

styles.css

@@ -1,33 +1,29 @@
 /* styles.css */
 
-/* Hacer que el contenedor principal ocupe todo el alto de la ventana */
+/* Ajustes generales del fondo y del contenedor */
 .gradio-container {
     background-color: #90ffb7;  /* Fondo verde claro para toda la interfaz */
-    height: 100vh;  /* Asegurarnos de que el contenedor ocupe todo el alto de la pantalla */
-    margin: 0;  /* Eliminar márgenes */
-    padding: 0;  /* Eliminar relleno */
+    height: 100vh;  /* Aseguramos que el contenedor ocupe todo el alto de la pantalla */
+    width: 100%;  /* Ocupa todo el ancho de la pantalla */
+    margin: 0;  /* Elimina los márgenes */
+    padding: 20px;  /* Espaciado interno */
 }
 
-/* Personalización de entradas y sliders */
-.gradio-input, .gradio-slider {
-    background-color: #e0ffff;  /* Fondo de color cyan claro para entradas y sliders */
-    color: #006400;  /* Texto de color verde oscuro */
+/* Personalización de la caja de carga */
+.gradio-file input[type="file"] {
+    border: 2px dashed #006400;  /* Borde verde para el área de carga */
+    padding: 20px;  /* Espaciado dentro del área */
+    background-color: #f0f8ff;  /* Fondo azul claro */
 }
 
-/* Personalización de botones */
+/* Personalización de los botones */
 .gradio-button {
-    background-color: #98fb98;  /* Botones con fondo verde pálido */
-    color: #006400;  /* Texto de los botones en verde oscuro */
+    background-color: #98fb98;  /* Fondo verde pálido */
+    color: #006400;  /* Texto en verde oscuro */
 }
 
-/* Personalización de salidas */
-.gradio-output {
-    background-color: #fffacd;  /* Fondo de color amarillo suave para los outputs */
-}
-
-/* Asegurarnos de que el contenedor que tiene los gráficos y tablas se ajuste */
-.gradio-interface {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
+/* Personalización de los sliders */
+.gradio-slider {
+    background-color: #e0ffff;  /* Fondo cyan claro */
+    color: #006400;  /* Texto verde oscuro */
 }