Update app.py

app.py

@@ -47,10 +47,11 @@ class TimeSeriesForecaster:
         """
         Create visualization of predictions
         """
-        plt.figure(figsize=(12, 6))
+        plt.figure(figsize=(12, 6), facecolor='#f0f2f6')
+        plt.style.use('seaborn')
         
         # Plot original series
-        plt.plot(range(len(self.original_series)), self.original_series, label='Historical Data', color='blue')
+        plt.plot(range(len(self.original_series)), self.original_series, label='Historical Data', color='#1E88E5', linewidth=2)
         
         # Calculate forecast statistics
         forecast_np = forecasts[0].numpy()
@@ -58,60 +59,127 @@ class TimeSeriesForecaster:
         
         # Plot forecast
         forecast_index = range(len(self.original_series), len(self.original_series) + len(median))
-        plt.plot(forecast_index, median, color='red', label='Median Forecast')
-        plt.fill_between(forecast_index, low, high, color='red', alpha=0.3, label='80% Prediction Interval')
+        plt.plot(forecast_index, median, color='#D81B60', linewidth=2, label='Median Forecast')
+        plt.fill_between(forecast_index, low, high, color='#D81B60', alpha=0.3, label='80% Prediction Interval')
         
-        plt.title('Time Series Forecasting with Amazon Chronos')
-        plt.xlabel('Time Index')
-        plt.ylabel('Value')
-        plt.legend()
+        plt.title('Time Series Forecasting', fontsize=16, fontweight='bold')
+        plt.xlabel('Time Index', fontsize=12)
+        plt.ylabel('Value', fontsize=12)
+        plt.legend(frameon=True)
+        plt.grid(True, linestyle='--', alpha=0.7)
         
         return plt
 
 def main():
-    st.title('🕰️ Time Series Forecasting with Amazon Chronos')
+    # Set page configuration
+    st.set_page_config(
+        page_title="Time Series Forecaster", 
+        page_icon="📈", 
+        layout="wide",
+        initial_sidebar_state="collapsed"
+    )
+
+    # Custom CSS for modern look
+    st.markdown("""
+    <style>
+    /* Modern, clean design */
+    .stApp {
+        background-color: #f0f2f6;
+        font-family: 'Inter', sans-serif;
+    }
+    
+    /* Card-like containers */
+    .card {
+        background-color: white;
+        border-radius: 10px;
+        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+        padding: 20px;
+        margin-bottom: 20px;
+    }
     
-    # Sidebar for upload and configuration
-    st.sidebar.header('Forecast Settings')
+    /* Stylish file uploader */
+    .stFileUploader {
+        background-color: #f8f9fa;
+        border: 2px dashed #6c757d;
+        border-radius: 10px;
+        padding: 20px;
+        text-align: center;
+    }
     
-    # Upload CSV file
-    uploaded_file = st.sidebar.file_uploader(
+    /* Buttons */
+    .stButton>button {
+        background-color: #1E88E5;
+        color: white;
+        border-radius: 6px;
+        transition: all 0.3s ease;
+    }
+    .stButton>button:hover {
+        background-color: #1565c0;
+        transform: scale(1.05);
+    }
+    </style>
+    """, unsafe_allow_html=True)
+
+    # Title and description
+    st.markdown("<h1 style='text-align: center; color: #1E88E5;'>🕰️ Time Series Forecaster</h1>", unsafe_allow_html=True)
+    st.markdown("<p style='text-align: center; color: #6c757d;'>Predict future trends with advanced machine learning</p>", unsafe_allow_html=True)
+
+    # File upload section
+    st.markdown("<div class='card'>", unsafe_allow_html=True)
+    uploaded_file = st.file_uploader(
         "Upload CSV File", 
         type=['csv'], 
-        help="Ensure CSV file has date and numeric columns"
+        help="Upload a CSV file with time series data",
+        label_visibility="collapsed"
     )
-    
-    # Column selection and prediction settings
+    st.markdown("</div>", unsafe_allow_html=True)
+
+    # Data and forecast configuration
     if uploaded_file is not None:
         # Read CSV
         df = pd.read_csv(uploaded_file)
         
-        # Select columns
-        date_column = st.sidebar.selectbox(
-            'Select Date Column', 
-            options=df.columns
-        )
-        value_column = st.sidebar.selectbox(
-            'Select Value Column', 
-            options=[col for col in df.columns if col != date_column]
-        )
+        # Configuration card
+        st.markdown("<div class='card'>", unsafe_allow_html=True)
+        col1, col2 = st.columns(2)
+        
+        with col1:
+            date_column = st.selectbox(
+                'Select Date Column', 
+                options=df.columns,
+                help="Choose the column representing timestamps"
+            )
+        
+        with col2:
+            value_column = st.selectbox(
+                'Select Value Column', 
+                options=[col for col in df.columns if col != date_column],
+                help="Choose the numeric column to forecast"
+            )
         
         # Prediction parameters
-        context_length = st.sidebar.slider(
-            'Context Length', 
-            min_value=10, 
-            max_value=100, 
-            value=30
-        )
-        prediction_length = st.sidebar.slider(
-            'Prediction Length', 
-            min_value=1, 
-            max_value=30, 
-            value=7
-        )
+        col3, col4 = st.columns(2)
+        
+        with col3:
+            context_length = st.slider(
+                'Context Length', 
+                min_value=10, 
+                max_value=100, 
+                value=30,
+                help="Number of historical data points to use for prediction"
+            )
+        
+        with col4:
+            prediction_length = st.slider(
+                'Prediction Length', 
+                min_value=1, 
+                max_value=30, 
+                value=7,
+                help="Number of future time steps to predict"
+            )
         
-        # Process button
-        if st.sidebar.button('Perform Forecast'):
+        # Forecast button
+        if st.button('Generate Forecast'):
             try:
                 # Initialize forecaster
                 forecaster = TimeSeriesForecaster()
@@ -128,12 +196,17 @@ def main():
                 # Perform forecasting
                 forecasts = forecaster.forecast(context, prediction_length)
                 
-                # Visualize results
+                # Visualization card
+                st.markdown("<div class='card'>", unsafe_allow_html=True)
                 st.subheader('Forecast Visualization')
                 plt = forecaster.visualize_forecast(context, forecasts)
                 st.pyplot(plt)
+                st.markdown("</div>", unsafe_allow_html=True)
+                
+                # Forecast details card
+                st.markdown("<div class='card'>", unsafe_allow_html=True)
+                st.subheader('Forecast Details')
                 
-                # Display forecast details
                 forecast_np = forecasts[0].numpy()
                 forecast_mean = forecast_np.mean(axis=0)
                 forecast_lower = np.percentile(forecast_np, 10, axis=0)
@@ -145,11 +218,13 @@ def main():
                     'Upper Bound (90%)': forecast_upper
                 })
                 
-                st.subheader('Forecast Details')
                 st.dataframe(prediction_df)
+                st.markdown("</div>", unsafe_allow_html=True)
                 
             except Exception as e:
                 st.error(f"An error occurred: {str(e)}")
+        
+        st.markdown("</div>", unsafe_allow_html=True)
 
 if __name__ == '__main__':
     main()