final version

.streamlit/config.toml

@@ -0,0 +1,9 @@
+[theme]
+base="light"
+primaryColor="#FF4B4B"
+backgroundColor="#f8f9fa"
+textColor="#004080"
+secondaryBackgroundColor="#e3e8ef"
+font="sans serif"
+
+

streamlit_simulation/app.py

@@ -10,11 +10,7 @@ import matplotlib.dates as mdates
 import warnings
 import torch
 
-from config_streamlit import (MODEL_PATH_LIGHTGBM, DATA_PATH, TRAIN_RATIO,
-                             TEXT_COLOR, HEADER_COLOR, ACCENT_COLOR,
-                             BUTTON_BG, BUTTON_HOVER_BG, BG_COLOR,
-                             INPUT_BG, PROGRESS_COLOR, PLOT_COLOR
-                             )
+from config_streamlit import (MODEL_PATH_LIGHTGBM, DATA_PATH, TRAIN_RATIO, PLOT_COLOR)
 from lightgbm_model.scripts.config_lightgbm import FEATURES
 from transformer_model.scripts.utils.informer_dataset_class import InformerDataset
 from transformer_model.scripts.training.load_basis_model import load_moment_model
@@ -33,95 +29,11 @@ st.set_page_config(page_title="Electricity Consumption Forecast", layout="wide")
 #CSS part
 st.markdown(f"""
     <style>
-        body, .block-container {{
-            background-color: {BG_COLOR} !important;
-        }}
-
-        html, body, [class*="css"] {{
-            color: {TEXT_COLOR} !important;
-            font-family: 'sans-serif';
-        }}
-
-        h1, h2, h3, h4, h5, h6 {{
-            color: {HEADER_COLOR} !important;
-        }}
-
         .stButton > button {{
-            background-color: {BUTTON_BG};
-            color: {TEXT_COLOR};
-            border: 1px solid {ACCENT_COLOR};
-        }}
-
-        .stButton > button:hover {{
-            background-color: {BUTTON_HOVER_BG};
+            background-color: {PLOT_COLOR};
         }}
 
-        .stSelectbox div[data-baseweb="select"],
-        .stDateInput input {{
-            background-color: {INPUT_BG} !important;
-            color: {TEXT_COLOR} !important;
-        }}
-
-        [data-testid="stMetricLabel"],
-        [data-testid="stMetricValue"] {{
-            color: {TEXT_COLOR} !important;
-        }}
-
-        .stMarkdown p {{
-            color: {TEXT_COLOR} !important;
-        }}
-
-        .stDataFrame tbody tr td {{
-            color: {TEXT_COLOR} !important;
-        }}
-
-        .stProgress > div > div {{
-            background-color: {PROGRESS_COLOR} !important;
-        }}
-
-        /* Alle Label-Texte für Inputs/Sliders */
-        label {{
-            color: {TEXT_COLOR} !important;
-        }}
-
-        /* Text in selectbox-Optionsfeldern */
-        .stSelectbox label, .stSelectbox div {{
-            color: {TEXT_COLOR} !important;
-        }}
-
-        /* DateInput angleichen an Selectbox */
-        .stDateInput input {{
-            background-color: white !important;
-            color: {TEXT_COLOR} !important;
-            border: none !important;
-            border-radius: 5px !important;
-        }}
-
-        body, html {{
-            overflow-x: hidden !important;
-            scrollbar-width: none; /* Firefox */
-        }}
-
-        /* Für Chrome, Safari, Edge */
-        ::-webkit-scrollbar {{
-            display: none;
-        }}
-        
-        section[data-testid="stSidebar"] {{
-            background-color: {INPUT_BG} !important;
-            padding: 0rem !important;
-            margin: 0rem !important;
-            border: none !important;
-            box-shadow: none !important;
-        }}
-
-        /* Sidebar: Hintergrund im inneren Container überschreiben */
-        [data-testid="stSidebarUserContent"] > div[data-testid="block-container"] {{
-            background-color: transparent !important;
-            box-shadow: none !important;
-        }}
-
-                /* Entfernt auch den leeren Platz über der App */
+        /* Entfernt auch den leeren Platz über der App */
         header[data-testid="stHeader"] {{
             display: none !important;
             height: 0px !important;
@@ -246,22 +158,18 @@ def create_prediction_plot(pred_timestamps, pred_vals, true_timestamps, true_val
     if true_vals:
         ax.plot(true_timestamps[-window_hours:], true_vals[-window_hours:], label="Actual", color="#0077B6")
 
-    ax.set_ylabel("Consumption (MW)", fontsize=8, color=TEXT_COLOR)
+    ax.set_ylabel("Consumption (MW)", fontsize=8)
     ax.legend(
     fontsize=8,
     loc="upper left",
-    bbox_to_anchor=(0, 0.95),
-    facecolor= INPUT_BG,    # INPUT_BG
-    edgecolor= ACCENT_COLOR,    # ACCENT_COLOR
-    labelcolor= TEXT_COLOR    # TEXT_COLOR
+    bbox_to_anchor=(0, 0.95)
     )
     ax.yaxis.grid(True, linestyle=':', linewidth=0.5, alpha=0.7)
     ax.set_ylim(y_min, y_max)
     ax.xaxis.set_major_locator(mdates.DayLocator(interval=1))
     ax.xaxis.set_major_formatter(mdates.DateFormatter("%m-%d"))
-    ax.tick_params(axis="x", labelrotation=0, labelsize=5, colors=TEXT_COLOR)
-    ax.tick_params(axis="y", labelsize=5, colors=TEXT_COLOR)
-    #fig.patch.set_facecolor('#e6ecf0')  # outer area
+    ax.tick_params(axis="x", labelrotation=0, labelsize=5)
+    ax.tick_params(axis="y", labelsize=5)
 
     for spine in ax.spines.values():
         spine.set_visible(False)
@@ -274,23 +182,16 @@ def render_simulation_view(timestamp, prediction, actual, progress, fig, paused=
     """Displays the simulation plot and metrics in the UI."""
     title = "Actual vs. Prediction (Paused)" if paused else "Actual vs. Prediction"
     plot_title.markdown(
-        f"<div style='text-align: center; font-size: 20pt; font-weight: bold; color: {TEXT_COLOR}; margin-bottom: -0.7rem; margin-top: 0rem;'>"
+        f"<div style='text-align: center; font-size: 20pt; font-weight: bold; margin-bottom: -0.7rem; margin-top: 0rem;'>"
         f"{title}</div>",
         unsafe_allow_html=True
     )
     plot_container.pyplot(fig)
 
-    #st.markdown("<div style='margin-bottom: 0.5rem;'></div>", unsafe_allow_html=True)
-    #x_axis_label.markdown(
-    #    f"<div style='text-align: center; font-size: 14pt; color: {TEXT_COLOR}; margin-top: -0.5rem;'>"
-    #    f"Time</div>",
-    #    unsafe_allow_html=True
-    #)
-
     with info_container.container():
         #st.markdown("<div style='margin-top: 5rem;'></div>", unsafe_allow_html=True)
         st.markdown(
-            f"<span style='font-size: 24px; font-weight: 600; color: {HEADER_COLOR} !important;'>Time: {timestamp}</span>",
+            f"<span style='font-size: 24px; font-weight: 600;'>Time: {timestamp}</span>",
             unsafe_allow_html=True
         )
 
@@ -312,7 +213,7 @@ def render_simulation_view(timestamp, prediction, actual, progress, fig, paused=
 
                 st.divider()
                 st.markdown(
-                    f"<span style='font-size: 24px; font-weight: 600; color: {HEADER_COLOR} !important;'>Interim Metrics</span>",
+                    f"<span style='font-size: 24px; font-weight: 600;'>Interim Metrics</span>",
                     unsafe_allow_html=True
                 )
                 st.metric("MAPE (so far)", f"{mape:.2f} %")