Update app.py

app.py

@@ -1,397 +1,28 @@
 import streamlit as st
-import yfinance as yf
 import streamlit.components.v1 as components
-
-# Set the page layout
-st.set_page_config(layout="wide")
-
-import matplotlib.pyplot as plt
-import numpy as np
-import base64
+import yfinance as yf
 import pandas as pd
-import time
+import numpy as np
+from datetime import datetime, timedelta
 from keras.models import load_model
 from sklearn.preprocessing import MinMaxScaler
+import time
+import os
 
+# --- Page Configuration ---
+st.set_page_config(layout="wide")
 
-if "framework" not in st.session_state:
-    st.session_state.framework = "gen"
-# Initialize state
-if "show_modal" not in st.session_state:
-    st.session_state.show_modal = False
-if "show_overlay" not in st.session_state:
-    st.session_state.show_overlay = False
-if "model" not in st.session_state:
-    st.session_state.model = "best_bilstm_model.h5"
-
-
-# Loading  model
-@st.cache_resource
-def load_lstm_model(path):
-    return load_model(path)
-
-
-@st.cache_resource
-def load_data():
-    data = yf.download("AMZN", period="4y", multi_level_index=False)
-    data.reset_index(inplace=True)
-    return data
-
-
-#################################################################################################
-
-
-def predict_future_prices(
-    df: pd.DataFrame, n_future_days: int, model_path: str = st.session_state.model
-) -> tuple[plt.Figure, pd.DataFrame]:
-    # Ensure DataFrame is sorted and clean
-    df = df.sort_values("Date").dropna(subset=["Close"])
-    df = df.reset_index(drop=True)
-
-    # Scale data
-    scaler = MinMaxScaler()
-    prices = df["Close"].values.reshape(-1, 1)
-    scaled_prices = scaler.fit_transform(prices)
-
-    # Load model and get timesteps
-    model = load_lstm_model(model_path)
-    n_steps = model.input_shape[1]
-
-    # --- Calculate validation error (historical residuals) ---
-    X_hist, y_hist = [], []
-    for i in range(n_steps, len(scaled_prices)):
-        X_hist.append(scaled_prices[i - n_steps : i])
-        y_hist.append(scaled_prices[i])
-    X_hist = np.array(X_hist)
-    y_hist = np.array(y_hist)
-
-    # Predict historical values
-    hist_predictions = model.predict(X_hist, verbose=0)
-
-    # Calculate residuals (error)
-    hist_prices_rescaled = scaler.inverse_transform(y_hist.reshape(-1, 1)).flatten()
-    hist_preds_rescaled = scaler.inverse_transform(
-        hist_predictions.reshape(-1, 1)
-    ).flatten()
-    residuals = hist_prices_rescaled - hist_preds_rescaled
-    error_std = np.std(residuals)  # Key metric for confidence interval
-
-    # --- Predict future values ---
-    last_sequence = scaled_prices[-n_steps:]
-    predicted = []
-    current_sequence = last_sequence.copy()
-
-    for _ in range(n_future_days):
-        pred = model.predict(current_sequence.reshape(1, n_steps, 1), verbose=0)
-        predicted.append(pred[0, 0])
-        current_sequence = np.append(current_sequence[1:], [[pred[0, 0]]], axis=0)
-
-    # Rescale predictions
-    predicted_prices = scaler.inverse_transform(
-        np.array(predicted).reshape(-1, 1)
-    ).flatten()
-    last_date = df["Date"].max()
-    today = pd.Timestamp.today().normalize()
-    
-    if last_date >= today:
-        start_date = last_date + pd.Timedelta(days=1)
-    else:
-        start_date = today  # fallback to today if data is old
-    
-    future_dates = pd.date_range(start=start_date, periods=n_future_days)
-
-    prediction_df = pd.DataFrame(
-        {"Date": future_dates, "Predicted Price": predicted_prices}
-    )
-
-    # --- Plotting with confidence interval ---
-    plt.rcParams["font.family"] = "Times New Roman "
-
-    fig, ax = plt.subplots(figsize=(10, 6), facecolor="none")
-    ax.patch.set_alpha(0)
-    fig.patch.set_alpha(0)
-
-    # Historical data
-    ax.plot(df["Date"], df["Close"], label="Historical", color="cyan", linewidth=2)
-
-    # Confidence interval (expanding uncertainty)
-    days = np.arange(1, n_future_days + 1)
-    expanding_std = error_std * np.sqrt(days)
-    upper = predicted_prices + 1.96 * expanding_std  # 95% CI
-    lower = predicted_prices - 1.96 * expanding_std
-
-    ax.fill_between(
-        prediction_df["Date"],
-        lower,
-        upper,
-        color="lightblue",
-        alpha=0.3,
-        label="95% Confidence Interval",
-    )
-
-    # Predicted points (magenta dots)
-    ax.plot(
-        prediction_df["Date"],
-        prediction_df["Predicted Price"],
-        label=f"Next {n_future_days-1} Days Forecast",
-        color="magenta",
-        linestyle="None",
-        marker=".",
-        markersize=5,
-    )
-
-    # ---- NEW: Trend line spanning historical + forecasted data ----
-    # Combine historical and predicted dates/prices
-    all_dates = np.concatenate([df["Date"].values, prediction_df["Date"].values])
-    all_prices = np.concatenate(
-        [df["Close"].values, prediction_df["Predicted Price"].values]
-    )
-
-    window_size = 30  
-    trend_line = pd.Series(all_prices).rolling(window=window_size, min_periods=1).mean()
-
-    # Plotting the trend line (blue dashed)
-    ax.plot(
-        all_dates,
-        trend_line,
-        color="blue",
-        linestyle="--",
-        linewidth=1.5,
-        label="Long-Term Trend",
-    )
-
-    # Style
-    ax.set_title(
-        f"📈 Stock Price Forecast ({st.session_state.model})",
-        fontsize=14,
-        fontweight="bold",
-    )
-    ax.set_xlabel("Date", fontsize=12)
-    ax.set_ylabel("Price", fontsize=12)
-    ax.legend(loc="upper left")
-    ax.grid(True, linestyle="--", alpha=0.6)
-
-    return fig, prediction_df
-
-
-#####################################################################################################
-
-# Function to load data
-
-
-# Load the data
-# data = load_data()
-# import matplotlib.pyplot as plt
-# Path to your logo image
-encoded_logo = "tensorflow.png"
-main_bg_ext = "png"
-main_bg = "Picture3.png"
-
-
-if st.session_state.framework == "lstm":
-    bg_color = "#FF5733"  # For example, a warm red/orange
-    bg_color_iv = "orange"  # For example, a warm red/orange
-    text_h1 = "BI-DIRECTIONAL"
-    text_i = "Long short term memory"
-    model = "TENSORFLOW"
-    st.session_state.model = "best_bilstm_model.h5"
-if st.session_state.framework == "gru":
-    bg_color = "#FF5733"  # For example, a warm red/orange
-    bg_color_iv = "orange"  # For example, a warm red/orange
-    text_h1 = "GATED RECURRENT UNIT"
-    text_i = "Recurrent Neural Network"
-    model = "TENSORFLOW"
-    st.session_state.model = "best_gru_model.h5"
-if st.session_state.framework == "gen":
-    bg_color = "#FF5733"  # For example, a warm red/orange
-    bg_color_iv = "orange"  # For example, a warm red/orange
-    text_h1 = "Amazon Stock Predictor"
-    text_i = "21 Days Ahead of the Market"
-    model = "TENSORFLOW"
-st.markdown(
-    f"""
+# --- Custom CSS ---
+st.markdown("""
     <style>
-       /* Container for logo and text */
-        /* Container for logo and text */
-        .logo-text-container {{
-            position: fixed;
-            top: 20px; /* Adjust vertical position */
-            left: 30px; /* Align with sidebar */
-            display: flex;
-            align-items: center;
-            gap: 25px;
-            width: 70%;
-            z-index:1000;
-        }}
-
-        /* Logo styling */
-        .logo-text-container img {{
-            width: 50px; /* Adjust logo size */
-            border-radius: 10px; /* Optional: round edges */
-            margin-left:-5px;
-            margin-top: -15px;
-
-        }}
-
-        /* Bold text styling */
-        .logo-text-container h1 {{
-            font-family: Nunito;
-            color: #0175C2;            
-            font-size: 25px;
-            font-weight: bold;
-            margin-right :100px;
-            padding:0px;
-            top:0;
-            margin-top: -12px;
-        }}
-         .logo-text-container i{{
-             font-family: Nunito;
-            color: orange;            
-            font-size: 15px;
-            margin-right :10px;
-            padding:0px;
-            margin-left:-18.5%;
-            margin-top:1%;
-         }}
-
-        /* Sidebar styling */
-        section[data-testid="stSidebar"][aria-expanded="true"] {{
-            margin-top: 100px !important; /* Space for the logo */
-            border-radius: 0 60px 0px 60px !important; /* Top-left and bottom-right corners */
-            width: 200px !important; /* Sidebar width */
-            background: none; /* No background */
-            color: white !important;
-        }}
-
-        header[data-testid="stHeader"] {{
-            background: transparent !important;
-            margin-right: 100px !important;
-            margin-top: 1px !important;
-            z-index: 1 !important;
-            
-            color: blue; /* White text */
-            font-family:  "Times New Roman " !important; /* Font */
-            font-size: 18px !important; /* Font size */
-            font-weight: bold !important; /* Bold text */
-            padding: 10px 20px; /* Padding for buttons */
-            border: none; /* Remove border */
-            border-radius: 35px; /* Rounded corners */
-            box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); /* Shadow effect */
-            transition: all 0.3s ease-in-out; /* Smooth transition */
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            margin: 10px 0;
-            width:90%;
-            left:5.5%;
-            height:60px;
-            margin-top:70px;
-            backdrop-filter: blur(10px);
-            border: 2px solid rgba(255, 255, 255, 0.4); /* Light border */
-
-        }}
-
-        div[data-testid="stDecoration"] {{
-            background-image: none;
-        }}
-
-        div[data-testid="stApp"] {{
-            background: url(data:image/{main_bg_ext};base64,{base64.b64encode(open(main_bg, "rb").read()).decode()});
-            background-size: cover;  /* Ensure the image covers the full page */
-            background-position: center;
-            background-repeat:no-repeat;
-            height: 98vh;
-            width: 99.3%;
-            border-radius: 20px !important;
-            margin-left: 5px;
-            margin-right: 20px;
-            margin-top: 10px;
-            overflow: hidden;
-            backdrop-filter: blur(10px); /* Glass effect */
-            -webkit-backdrop-filter: blur(10px);
-            border: 1px solid rgba(255, 255, 255, 0.2); /* Light border */
-
-        }}
-
-        div[data-testid="stSidebarNav"] {{
-            display: none;
-        }}
-        
-        div[data-testid="stSlider"] {{
-            margin-top:35px;
-        }}
-        label[data-testid="stWidgetLabel"]{{
-            margin-left:20px !important;
-        }}
-        
-        div[data-baseweb="slider"] {{
-            border-radius: 30px;
-            padding-right:40px;
-            z-index: 1;
-           /* Glass effect background */
-            backdrop-filter: blur(2px);
-            -webkit-backdrop-filter: blur(12px);
-            /* Shiny blue borders (left & right) */
-            border-top: 2px solid rgba(255, 255, 155, 0.4); /* Light border */
-            margin-left:13px;
-            border-bottom: 2px solid rgba(255, 255, 155, 0.4); /* Light border */
-            
-            
-            }}
-               div[data-baseweb="slider"] > :nth-child(1)> div {{
-               margin-left:20px !important;
-               margin-top:10px;
-               }}
-                div[data-testid="stSliderTickBarMin"]{{
-                    background:none !important;
-                    margin-left:20px !important;
-                    font-size:12px;
-                    margin-bottom:5px;
-                    font-family:  "Times New Roman " !important; /* Font */
-                }}
-                 div[data-testid="stSliderTickBarMax"]{{
-                    background:none !important;
-                    font-size:12px;
-                    margin-bottom:5px;
-
-                    font-family:  "Times New Roman " !important; /* Font */
-                }}
-                div[data-testid="stSliderThumbValue"]{{
-                    font-size:12px;
-                    font-family:  "Times New Roman " !important; /* Font */
-
-                }}
-                div[data-testid="stProgress"]{{
-                    margin-right:25px;
-                    margin-top:-70px;
-                    height:10px !important;
-                    
-                }}
-          [class*="st-key-content-container-3"] {{
-            margin-top: 80px;  /* Adjust top margin */
-            marging-left:50px !important;
-            color:orange;
-
-        }}
-       
-        /* Button row styling */
-        .button-row {{
-            display: flex;
-            justify-content: flex-start;
-            gap: 20px;
-            margin-bottom: 20px;
-        }}
-
-       
-
-        .custom-button:hover {{
-            background-color: #0056b3;
-        }}
-        div.stButton > button p{{   
-        color: orange !important;
-        font-weight:bold;
-        }}
-        div.stButton > button {{                
+        /* Hide Streamlit's default header, footer, and hamburger menu */
+        #MainMenu, header, footer { visibility: hidden; }
+
+        /* Remove padding from the main block container for a full-width feel */
+        .block-container {
+            padding: 0 !important;
+        }
+        div.stButton > button {               
         background: rgba(255, 255, 255, 0.2);
         color: orange !important; /* White text */
         font-family:  "Times New Roman " !important; /* Font */
@@ -406,358 +37,809 @@ st.markdown(
         align-items: center;
         justify-content: center;
         margin: 10px 0;
-        width:160px;
+        width:190px;
         height:50px;
         margin-top:5px;
-
-    }}
-
+        }
+       div[data-testid="stSelectbox"]
+        {
+                background-color: white !important; 
+                position: relative;
+                border-bottom:1px solid #ccc;
+                border-radius:0px;
+               
+                
+
+             }
+        div[data-testid="stTextInput"]{
+            
+        }
+      div[data-testid="stTextInput"] > div >div {
+        background-color: rgba(255, 158, 87, 0.12) !important;
+
+      }
+      div[data-testid="stTextInputRootElement"]{
+          border: 1px solid white !important;
+      }
     /* Hover effect */
-    div.stButton > button:hover {{
+    div.stButton > button:hover {
         background: rgba(255, 255, 255, 0.2);
         box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.4); /* Enhanced shadow on hover */
         transform: scale(1.05); /* Slightly enlarge button */
         transform: scale(1.1); /* Slight zoom on hover */
         box-shadow: 0px 4px 12px rgba(255, 255, 255, 0.4); /* Glow effect */
-    }}
-    
-         div[data-testid="stMarkdownContainer"] p {{
-            font-family: "Times New Roman" !important; /* Elegant font for title */
-            color:black !important;
-            
-        }}
-   .titles{{
-      margin-top:-50px !important;
-      margin-left:-40px;
-      font-family: "Times New Roman" !important; 
-
-  }}
-     .header {{
-            display: flex;
-            align-items: center;
-            gap: 20px;  /* Optional: adds space between image and text */
-        }}
-        .header img {{
-            height: 120px;  /* Adjust as needed */
-            margin-top:-15px;
-        }}
-    /* Title styling */
-.header h1{{
-   font-family: "Times New Roman" !important; /* Elegant font for title 
-    font-size: 2.7rem;
-    font-weight: bold;
-    margin-left: 5px;
-   /* margin-top:-50px;*/
-    margin-bottom:30px;
-    padding: 0;
-    color: black; /* Neutral color for text */
-    }}
- .titles .content{{
-   font-family: "Times New Roman" !important; /* Elegant font for title */
-    font-size: 1.2rem;
-    margin-left: 150px;
-    margin-bottom:1px;
-    padding: 0;
-    color:black; /* Neutral color for text */
-    }}
-  
+    }
+        /* Style the sidebar to have a modern, dark look */
+        section[data-testid="stSidebar"] {
+            backdrop-filter: blur(10px);
+            background: rgba(255, 255, 255, 0.15);
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+
+        [data-testid="stSidebar"] h2 {
+            color: #FFFFFF; /* White headers in the sidebar */
+            font-family:time new roman !important;
+
+        }
+        [data-testid="stSidebar"] .st-emotion-cache-1629p8f a {
+            color: #94A3B8; /* Lighter text color for links */
+            font-family:time new roman !important;
+        }
+        [data-testid="stImageContainer"]>img{
+         max-width:70% !important;
+         margin-top:-70px;   
+        }
+        div[data-testid="stMarkdownContainer"] >p{
+        font-family:time new roman !important;
+
+        }
+        
+    </style>
+""", unsafe_allow_html=True)
+
+# --- Python Backend Functions ---
+
+@st.cache_resource(ttl=3600)
+def load_pytorch_model(path, model_type='Bi-Directional LSTM', input_dim=1, hidden_dim=100, num_layers=2, output_dim=1, dropout_prob=0.2):
+    import torch.nn as nn
+    import torch
+
+    class GRUModel(nn.Module):
+        def __init__(self):
+            super(GRUModel, self).__init__()
+            self.gru = nn.GRU(input_dim, hidden_dim, num_layers, batch_first=True, dropout=dropout_prob)
+            self.fc = nn.Linear(hidden_dim, output_dim)
+
+        def forward(self, x):
+            h0 = torch.zeros(num_layers, x.size(0), hidden_dim).to(x.device)
+            out, _ = self.gru(x, h0)
+            return self.fc(out[:, -1, :])
+
+    class BiLSTMModel(nn.Module):
+        def __init__(self):
+            super(BiLSTMModel, self).__init__()
+            self.lstm = nn.LSTM(
+                input_size=1,
+                hidden_size=100,
+                num_layers=1,  # <- match saved model
+                batch_first=True,
+                dropout=0.2,
+                bidirectional=True
+            )
+            self.fc = nn.Linear(200, 1)  # 2 * hidden_size because of bidirectional
 
+        def forward(self, x):
+            h0 = torch.zeros(2 * 1, x.size(0), 100)
+            c0 = torch.zeros(2 * 1, x.size(0), 100)
+            out, _ = self.lstm(x, (h0, c0))
+            return self.fc(out[:, -1, :])
+    model_class = BiLSTMModel if model_type == 'Bi-Directional LSTM' else GRUModel
+    model = model_class()
 
+    checkpoint = torch.load(path, map_location=torch.device('cpu'))
 
-    </style>
-  
-    """,
-    unsafe_allow_html=True,
-)
-# Overlay container
-st.markdown(
-    f"""
+    # If full checkpoint was saved with keys like 'model_state_dict'
+    if 'model_state_dict' in checkpoint:
+        model.load_state_dict(checkpoint['model_state_dict'])
+    else:
+        model.load_state_dict(checkpoint)  # Just raw state_dict
+
+    model.eval()
+    return model
+
+@st.cache_data(ttl=900) # Cache data for 15 minutes
+def get_stock_data(ticker):
+    """Fetches historical stock data from Yahoo Finance for the last 4 years."""
+    end_date = datetime.now()
+    start_date = end_date - timedelta(days=4 * 365)
+    print(f"Fetching data for ticker: {ticker} from {start_date.date()} to {end_date.date()}")
+    data = yf.download(ticker, period="4y", multi_level_index=False)
+    if data.empty:
+        print(f"No data found for ticker: {ticker}")
+        return None
+    data.reset_index(inplace=True)
+    print(f"Successfully fetched {len(data)} rows for {ticker}")
+    return data
+
+def predict_with_model(data: pd.DataFrame, n_days: int, model_path: str, model_type: str) -> pd.DataFrame:
+    import torch
+
+    try:
+        model = load_pytorch_model(model_path, model_type=model_type)
+    except FileNotFoundError as e:
+        raise e
+    print("model:",model)
+    close_prices = data['Close'].values.reshape(-1, 1)
+    scaler = MinMaxScaler(feature_range=(0, 1))
+    scaled_prices = scaler.fit_transform(close_prices)
+
+    sequence_length = 90
+    if len(scaled_prices) < sequence_length:
+        raise ValueError(f"Not enough historical data ({len(scaled_prices)} points) to create a sequence of {sequence_length} for prediction.")
+
+    last_sequence = scaled_prices[-sequence_length:]
+    current_seq = torch.tensor(last_sequence.reshape(1, sequence_length, 1), dtype=torch.float32)
+
+    predictions_scaled = []
+    with torch.no_grad():
+        for _ in range(n_days):
+            pred = model(current_seq)
+            predictions_scaled.append(pred.item())
+            next_input = pred.view(1, 1, 1)
+            current_seq = torch.cat((current_seq[:, 1:, :], next_input), dim=1)
+
+    predictions = scaler.inverse_transform(np.array(predictions_scaled).reshape(-1, 1)).flatten()
+    print("predictions",predictions)
+    last_date = pd.to_datetime(data['Date'].iloc[-1])
+    future_dates = [last_date + timedelta(days=i) for i in range(1, n_days + 1)]
+
+    prediction_df = pd.DataFrame({'Date': future_dates, 'Predicted Price': predictions})
+
+    historical_returns = data['Close'].pct_change().dropna()
+    volatility = historical_returns.std() if not historical_returns.empty else 0.01
+
+    error_std_growth = volatility * np.sqrt(np.arange(1, n_days + 1))
+    prediction_df['Upper CI'] = predictions * (1 + 1.96 * error_std_growth)
+    prediction_df['Lower CI'] = predictions * (1 - 1.96 * error_std_growth)
+
+    return prediction_df
+
+
+# --- Streamlit Session State Initialization ---
+if 'run_button_clicked' not in st.session_state:
+    st.session_state.run_button_clicked = False
+if 'loading' not in st.session_state:
+    st.session_state.loading = False
+if 'data' not in st.session_state:
+    st.session_state.data = None
+if 'predictions' not in st.session_state:
+    st.session_state.predictions = None
+if 'error' not in st.session_state:
+    st.session_state.error = None
+
+# --- Streamlit Sidebar Controls ---
+with st.sidebar:
+    st.image("logo2.png", use_container_width=True)
+    st.markdown("Dashboard Controls")
+    ticker = st.text_input("Stock Ticker", st.session_state.get('last_ticker', "AMZN")).upper()
+    model_type = st.selectbox(
+        "Prediction Model",
+        ("Bi-Directional LSTM", "Gated Recurrent Unit (GRU)"),
+        key="model_choice",
+        help="Select the neural network architecture for prediction."
+    )
+
+    prediction_days = st.slider("Prediction Horizon (Days)", 7, 30, st.session_state.get('last_prediction_days', 7))
+
+    if st.button("Generate Dashboard", use_container_width=True):
+        st.session_state.run_button_clicked = True
+        st.session_state.loading = True
+        st.session_state.last_ticker = ticker
+        st.session_state.last_prediction_days = prediction_days
+        st.session_state.error = None
+        print("Generate Dashboard button clicked. Loading state set to True.")
+        st.rerun()
+    # Check if model or prediction days have changed
+    if (
+        ticker != st.session_state.get('last_ticker', '') or
+        model_type != st.session_state.get('last_model_type', '') or
+        prediction_days != st.session_state.get('last_prediction_days', 7)
+    ):
+        st.session_state.run_button_clicked = True
+        st.session_state.loading = True
+        st.session_state.last_ticker = ticker
+        st.session_state.last_model_type = model_type
+        st.session_state.last_prediction_days = prediction_days
+        st.rerun()
+# --- Main Application Logic ---
+if st.session_state.run_button_clicked:
+        print(f"Inside main logic block. Current loading state: {st.session_state.loading}")
+        try:
+            st.session_state.data = get_stock_data(ticker)
+            
+            if st.session_state.data is None:
+                st.session_state.error = f"Could not fetch data for ticker '{ticker}'. It may be an invalid symbol or network issue."
+            else:
+                model_path = "best_bilstm_model.pth" if model_type == "Bi-Directional LSTM" else "best_gru_model.pth"
+                st.session_state.predictions = predict_with_model(st.session_state.data, prediction_days, model_path,model_type)
+                st.session_state.error = None
+
+        except FileNotFoundError as e:
+           st.session_state.error = str(e)
+           print(f"Caught FileNotFoundError: {e}")
+        except ValueError as e:
+            st.session_state.error = str(e)
+            print(f"Caught ValueError: {e}")
+        except Exception as e:
+            st.session_state.error = f"An unexpected error occurred: {str(e)}"
+            print(f"Caught general Exception: {e}")
+    
+        st.session_state.loading = False
+        st.session_state.run_button_clicked = False
+        print(f"Processing complete. Loading state set to False. Error: {st.session_state.error}")
+        st.rerun()
+
+# --- Data Preparation for Front-End ---
+historical_data_json = 'null'
+prediction_data_json = 'null'
+is_loading_js = str(st.session_state.get('loading', False)).lower()
+error_message_js = 'null'
+
+if st.session_state.get('error'):
+    error_message_js = f"'{st.session_state.error}'" # Pass error to JS
+
+if st.session_state.data is not None and st.session_state.get('error') is None:
+    historical_data_json = st.session_state.data.to_json(orient='split', date_format='iso')
+    prediction_data_json = st.session_state.predictions.to_json(orient='split', date_format='iso')
+
+# --- HTML Front-End ---
+html_code = f"""
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Stock Intelligence Dashboard</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
     <style>
-        .logo-text-containers {{
-            position: absolute;
-            top: 100px;
-            right: 40px;
-            background-color: rgba(255, 255, 255, 0.9);
-            padding: 15px;
-            border-radius: 12px;
-            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-            z-index: 10;
-            width:80vw;
-            height:620px;
-        }}
-        .logo-text-containers img {{
-            height: 40px;
-           right:0;
+        body {{ font-family: 'time new roman'; background-color: #f1f5f9;scrollbar-width: 2px !important; scrollbar-color: rgba(100, 100, 100, 0.4) transparent;}}
+        .metric-card, .info-card {{ background-color: #ffffff; border-radius: 1rem; box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); transition: all 0.3s ease-in-out; border: 1px solid #e2e8f0; }}
+        .metric-card:hover {{ transform: translateY(-5px); box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); }}
+        .positive {{ color: #10B981; }}
+        .negative {{ color: #EF4444; }}
+        .neutral {{ color: #64748b; }}
+        ::-webkit-scrollbar {{
+            width: 6px;
         }}
-        .logo-text-containers h1 {{
-            display: inline;
-            font-size: 20px;
-            vertical-align: middle;
+
+        ::-webkit-scrollbar-thumb {{
+            background-color: rgba(100, 100, 100, 0.4);
+            border-radius: 3px;
         }}
-        .logo-text-containers i {{
-            display: block;
-            margin-top: 5px;
-            font-size: 14px;
-            color: #333;
+
+        ::-webkit-scrollbar-track {{
+            background: transparent;
         }}
+        #predictionTable table {{ width: 100%; border-collapse: collapse; }}
+        #predictionTable th, #predictionTable td {{ padding: 0.75rem 1rem; text-align: left; border-bottom: 1px solid #e2e8f0; }}
+        #predictionTable th {{ background-color: #f8fafc; font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: #64748b; }}
+        #loading-overlay {{ position: fixed; inset: 0; background-color: rgba(255, 255, 255, 0.8); z-index: 100; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); transition: opacity 0.3s ease; }}
+        .spinner {{ width: 56px; height: 56px; border: 5px solid #3b82f6; border-bottom-color: transparent; border-radius: 50%; display: inline-block; box-sizing: border-box; animation: spin 1s linear infinite; }}
+        @keyframes spin {{ 0% {{ transform: rotate(0deg); }} 100% {{ transform: rotate(360deg); }} }}
+        .hidden {{ display: none !important; }}
+        .error-message {{ color: #EF4444; font-weight: 600; text-align: center; margin-top: 20px; padding: 15px; background-color: #fee2e2; border-radius: 0.5rem; border: 1px solid #ef4444; }}
+    </style>
+</head>
+<body class="antialiased text-slate-800">
+
+
+    <main id="content-wrapper">
+        <header class="bg-white/80 backdrop-blur-lg sticky top-0 z-50 border-b border-slate-200">
+            <div class="max-w-8xl mx-auto px-4 sm:px-6 lg:px-8">
+                <div class="flex items-center justify-between h-16">
+                    <div class="flex items-center">
+                        <i class="fas fa-chart-line text-2xl text-orange-400"></i>
+                        <h1 id="dashboard-title" class="text-xl font-bold text-slate-900 ml-3">{ticker} Intelligence Dashboard</h1>
+                    </div>
+                    <div class="text-sm text-slate-500 flex items-center">
+                    <div id="status-message" class="text-center text-sm text-slate-500 mt-4 hidden">Loading updated data...</div>
+                        <i class="fas fa-rocket mr-2 text-orange-400"></i> Powered by a <span class="font-semibold text-yellow-600 ml-1">{model_type}</span>&nbsp model
+                    </div>
+                </div>
+            </div>
+        </header>
+
+        <div class="p-4 sm:p-6 lg:p-8">
+            <div class="max-w-8xl mx-auto">
+                <div id="dashboard-error-message" class="hidden error-message"></div>
+                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-8" id="metrics-grid"></div>
+                <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
+                    <div class="lg:col-span-2 space-y-8">
+                        <div class="info-card p-4 sm:p-6">
+                            <canvas id="priceChart" style="height: 350px;"></canvas>
+                        </div>
+                        <div class="info-card p-4 sm:p-6">
+                            <canvas id="volumeChart" style="height: 200px;"></canvas>
+                        </div>
+                        <div id="predictionDetailsContainer" class="info-card p-4 sm:p-6 hidden">
+                            <h3 class="text-lg font-semibold mb-4 text-slate-800">AI Prediction Details</h3>
+                            <div class="overflow-x-auto" id="predictionTable"></div>
+                        </div>
+                    </div>
+                    <div class="lg:col-span-1 space-y-8">
+                        <div class="info-card p-6">
+                            <h3 class="text-lg font-semibold mb-4 text-slate-800 flex items-center"><i class="fas fa-robot mr-3 text-orange-400"></i> AI Prediction Summary</h3>
+                            <div id="predictionResult" class="mt-4 text-center"></div>
+                        </div>
+                        <div class="info-card p-6">
+                            <h3 class="text-lg font-semibold mb-4 text-slate-800">Technical Summary</h3>
+                            <div class="space-y-3" id="tech-summary"></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+
+    <script>
+    document.addEventListener('DOMContentLoaded', function () {{
+         const {{
+        LineController,
+        LineElement,
+        PointElement,
+        LinearScale,
+        TimeScale,
+        Legend,
+        Tooltip,
+        BarController,
+        BarElement,
+        CategoryScale // Although you use TimeScale for X, CategoryScale might be needed for other internal reasons or for completeness for Bar charts
+    }} = Chart;
+
+    Chart.register(
+        LineController,
+        LineElement,
+        PointElement,
+        LinearScale,
+        TimeScale,
+        Legend,
+        Tooltip,
+        BarController,
+        BarElement,
+        CategoryScale
+    );
+    console.log("JS: Chart.js components registered.");
+
+        const historicalDataJson = {historical_data_json};
+        const predictionDataJson = {prediction_data_json};
+        const isLoading = {is_loading_js};
+        const errorMessage = {error_message_js}; // Now receiving Python error
         
-     [class*="st-key-close-btn"] {{
-            top: 5px;
-            font-size: 20px;
-            font-weight: bold !important;
-            cursor: pointer;
-            position:absolute;
-            margin-left:1150px;
-            color:red !important;
-            z-index:1000;
-        }}
-       [class*="st-key-close-btn"]:hover {{
-            color: #f00;
+        console.log("JS: DOMContentLoaded. Initial isLoading:", isLoading, "Error:", errorMessage);
+
+        const loadingOverlay = document.getElementById('loading-overlay');
+        const contentWrapper = document.getElementById('content-wrapper');
+        const metricsGridEl = document.getElementById('metrics-grid');
+        const techSummaryEl = document.getElementById('tech-summary');
+        const predictionResultEl = document.getElementById('predictionResult');
+        const predictionDetailsContainerEl = document.getElementById('predictionDetailsContainer');
+        const predictionTableEl = document.getElementById('predictionTable');
+        const dashboardErrorMessageEl = document.getElementById('dashboard-error-message');
+        
+        let priceChart;
+        let volumeChart;
+
+        function parseData(jsonData) {{
+            try {{
+                if (!jsonData || !jsonData.columns) return null;
+                return {{
+                    dates: jsonData.data.map(row => new Date(row[jsonData.columns.indexOf('Date')])),
+                    prices: jsonData.data.map(row => row[jsonData.columns.indexOf('Close')]),
+                    volumes: jsonData.data.map(row => row[jsonData.columns.indexOf('Volume')]),
+                    highs: jsonData.data.map(row => row[jsonData.columns.indexOf('High')]),
+                }};
+            }} catch (e) {{
+                console.error("JS: Error parsing historical data:", e);
+                return null;
+            }}
         }}
-    [class*="st-key-divider-col"] {{
-            border-left: 3px solid rgba(255, 255, 155, 0.5); /* Light border */
-            border-radius: 35px; /* Rounded corners */
-            margin-top:-18px;
-            margin-left:3px;
 
+        function parsePredictions(jsonData) {{
+             try {{
+                if (!jsonData || !jsonData.columns) return [];
+                return jsonData.data.map(row => ({{
+                    x: new Date(row[jsonData.columns.indexOf('Date')]),
+                    y: row[jsonData.columns.indexOf('Predicted Price')],
+                    upperCI: row[jsonData.columns.indexOf('Upper CI')],
+                    lowerCI: row[jsonData.columns.indexOf('Lower CI')]
+                }}));
+             }} catch (e) {{
+                console.error("JS: Error parsing prediction data:", e);
+                return [];
+             }}
         }}
-          [class*="st-key-col1"] {{
-            border-right: 3px solid rgba(255, 255, 155, 0.5); /* Light border */
-            border-radius: 35px; /* Rounded corners */
-            margin-left:20px;
-            margin-top:-18px;
+        
+        function displayMetric(elementId, value, prefix = '', suffix = '', decimals = 0) {{
+            const el = document.getElementById(elementId);
+            if (el) {{
+                el.textContent = prefix + value.toLocaleString(undefined, {{ minimumFractionDigits: decimals, maximumFractionDigits: decimals }}) + suffix;
+            }}
+        }}
+
+        function updateMetrics(data) {{
+            if (!data || data.prices.length < 2) {{
+                metricsGridEl.innerHTML = `<div class="col-span-full text-center text-slate-500 p-4">Not enough historical data to display metrics.</div>`;
+                return;
+            }}
+            const currentPrice = data.prices[data.prices.length - 1];
+            const prevPrice = data.prices[data.prices.length - 2];
+            const change = currentPrice - prevPrice;
+            const changePct = (change / prevPrice) * 100;
+            const volume = data.volumes[data.volumes.length - 1];
+            const sharesOutstanding = 10.33 * 1e9; // Example value
+            const marketCap = currentPrice * sharesOutstanding;
+
+            const metrics = [
+                {{ id: 'price', title: 'Current Price', value: currentPrice, change: `${{change >= 0 ? '+' : ''}}${{change.toFixed(2)}} (${{changePct.toFixed(2)}}%)`, status: change >= 0 ? 'positive' : 'negative', icon: 'fa-dollar-sign', prefix: '$', decimals: 2 }},
+                {{ id: 'market-cap', title: 'Market Cap', value: marketCap, change: 'USD', status: 'neutral', icon: 'fa-building', prefix: '$', suffix: '', decimals: 2, isCurrency: true }},
+                {{ id: 'volume', title: 'Daily Volume', value: volume, change: 'Shares Traded', status: 'neutral', icon: 'fa-chart-bar', suffix: '', decimals: 0 }},
+                {{ id: '52-week-high', title: '52-Week High', value: Math.max(...data.highs.slice(-252)), change: 'Annual Peak', status: 'neutral', icon: 'fa-arrow-trend-up', prefix: '$', decimals: 2 }},
+            ];
+            
+            metricsGridEl.innerHTML = metrics.map(metric => `<div class="metric-card p-5"><div class="flex items-center justify-between"><p class="text-sm font-medium text-slate-500">${{metric.title}}</p><div class="text-2xl text-slate-300"><i class="fas ${{metric.icon}}"></i></div></div><p class="text-3xl font-bold text-slate-900 mt-2" id="${{metric.id}}">0</p><p class="text-xs ${{metric.status}} mt-1 font-semibold">${{metric.change}}</p></div>`).join('');
+            
+            metrics.forEach(metric => {{
+                let displayValue = metric.value;
+                let displaySuffix = metric.suffix;
+                let displayDecimals = metric.decimals;
+
+                if (metric.isCurrency) {{
+                    if (metric.value >= 1e12) {{
+                        displayValue = metric.value / 1e12;
+                        displaySuffix = 'T';
+                        displayDecimals = 2;
+                    }} else if (metric.value >= 1e9) {{
+                        displayValue = metric.value / 1e9;
+                        displaySuffix = 'B';
+                        displayDecimals = 2;
+                    }} else if (metric.value >= 1e6) {{
+                        displayValue = metric.value / 1e6;
+                        displaySuffix = 'M';
+                        displayDecimals = 2;
+                    }}
+                }}
+                
+                if (metric.id === 'volume') {{
+                    if (metric.value >= 1e9) {{
+                        displayValue = metric.value / 1e9;
+                        displaySuffix = 'B';
+                        displayDecimals = 2;
+                    }} else if (metric.value >= 1e6) {{
+                        displayValue = metric.value / 1e6;
+                        displaySuffix = 'M';
+                        displayDecimals = 2;
+                    }} else if (metric.value >= 1e3) {{
+                        displayValue = metric.value / 1e3;
+                        displaySuffix = 'K';
+                        displayDecimals = 2;
+                    }}
+                }}
 
+                displayMetric(metric.id, displayValue, metric.prefix || '', displaySuffix, displayDecimals);
+            }});
         }}
+        
+        function updateTechSummary(data) {{
+            if (!data || data.prices.length < 50) {{ // Need enough data for 50-day SMA
+                techSummaryEl.innerHTML = '<p class="text-sm text-slate-500">Not enough data for full technical analysis (min 50 days required).</p>';
+                return;
+            }}
+            const prices = data.prices;
+            const lastPrice = prices[prices.length - 1];
+            
+            // Ensure slice has enough elements
+            const sma20 = prices.slice(-20).length >= 20 ? prices.slice(-20).reduce((a, b) => a + b, 0) / 20 : NaN;
+            const sma50 = prices.slice(-50).length >= 50 ? prices.slice(-50).reduce((a, b) => a + b, 0) / 50 : NaN;
+            
+            let gains = [];
+            let losses = [];
+            for (let i = 1; i < prices.length; i++) {{
+                let diff = prices[i] - prices[i-1];
+                if (diff > 0) {{
+                    gains.push(diff);
+                    losses.push(0);
+                }} else {{
+                    gains.push(0);
+                    losses.push(Math.abs(diff));
+                }}
+            }}
 
-    [class*="st-key-logo-text-containers"] {{
-          margin: 10px; /* Set a margin inside the container */
-        max-width: 100%;
-        overflow: hidden;
-
-            position: absolute;
-           top:-20px;
-           left:10px;
-           overflow: hidden;
-            background-color: tansparent;
-            padding: 15px;
-            border-radius: 30px;
-            padding-right:40px;
-            z-index: 1;
-            width:88vw;
-            height:615px;
-           /* Glass effect background */
-            background: rgba(255, 255, 255, 0.15);
-            backdrop-filter: blur(12px);
-            -webkit-backdrop-filter: blur(12px);
-            /* Shiny blue borders (left & right) */
-            border-left: 3px solid rgba(255, 255, 255, 0.9); /* Light border */
-            border-right: 3px solid rgba(255, 255, 255, 0.9); /* Light border */
+            let avgGain = 0;
+            let avgLoss = 0;
+            if (gains.length >= 14) {{
+                avgGain = gains.slice(-14).reduce((a, b) => a + b, 0) / 14;
+                avgLoss = losses.slice(-14).reduce((a, b) => a + b, 0) / 14;
+            }} else if (gains.length > 0) {{ 
+                avgGain = gains.reduce((a, b) => a + b, 0) / gains.length;
+                avgLoss = losses.reduce((a, b) => a + b, 0) / losses.length;
+            }}
 
+            let rs = (avgLoss === 0 || isNaN(avgLoss)) ? (avgGain > 0 ? Infinity : 0) : avgGain / avgLoss; 
+            let rsi = 100 - (100 / (1 + rs));
+            if (isNaN(rsi)) rsi = 0; 
 
+            let rsiClass = 'neutral';
+            if (rsi > 70) rsiClass = 'negative'; 
+            else if (rsi < 30) rsiClass = 'positive'; 
+            
+            const summary = [
+                {{ label: 'SMA (20 Day)', value: isNaN(sma20) ? 'N/A' : `$${{sma20.toFixed(2)}}`, status: lastPrice > sma20 ? 'positive' : (isNaN(sma20) ? 'neutral' : 'negative') }},
+                {{ label: 'SMA (50 Day)', value: isNaN(sma50) ? 'N/A' : `$${{sma50.toFixed(2)}}`, status: lastPrice > sma50 ? 'positive' : (isNaN(sma50) ? 'neutral' : 'negative') }},
+                {{ label: 'RSI (14 Day)', value: rsi.toFixed(1), status: rsiClass }}
+            ];
+            techSummaryEl.innerHTML = summary.map(item => `<div class="flex justify-between items-center text-sm"><span class="text-slate-600">${{item.label}}</span><span class="font-semibold ${{item.status}}">${{item.value}}</span></div>`).join('');
+        }}
+        
+        function renderCharts(data, predictions) {{
+            // Render Price Chart
+            const priceCtx = document.getElementById('priceChart').getContext('2d');
+            if (priceChart) priceChart.destroy();
+            
+            const priceDatasets = [
+                {{ 
+                    label: 'Historical Price', 
+                    data: data.dates.map((d, i) => ({{x: d, y: data.prices[i]}})), 
+                    borderColor: '#3b82f6', 
+                    backgroundColor: 'rgba(59, 130, 246, 0.1)', 
+                    borderWidth: 2, 
+                    pointRadius: 0, 
+                    fill: true, 
+                    tension: 0.3
                 }}
-    
-        @media (max-width: 768px) {{
-    .logo-text-container h1 {{
-        font-size: 12px;
+            ];
+            
+            if (predictions.length > 0) {{
+                priceDatasets.push({{ 
+                    label: 'AI Prediction', 
+                    data: predictions, 
+                    borderColor: '#10b981', 
+                    borderWidth: 2, 
+                    pointRadius: 2, 
+                    borderDash: [5, 5], 
+                    fill: false, 
+                    tension: 0.3
+                }});
+                
+                // Add confidence interval
+                const confidenceData = [
+                    ...predictions.map(p => ({{x: p.x, y: p.lowerCI}})),
+                    ...predictions.map(p => ({{x: p.x, y: p.upperCI}})).reverse()
+                ];
+                
+                priceDatasets.push({{ 
+                    label: '95% Confidence', 
+                    data: confidenceData, 
+                    fill: '1', 
+                    backgroundColor: 'rgba(234, 179, 8, 0.2)', 
+                    borderColor: 'transparent', 
+                    pointRadius: 0
+                }});
+            }}
+            
+            priceChart = new Chart(priceCtx, {{ 
+                type: 'line', // Explicitly define type
+                data: {{ datasets: priceDatasets }}, 
+                options: {{ 
+                    responsive: true, 
+                    maintainAspectRatio: false, 
+                    scales: {{ 
+                        x: {{ 
+                            type: 'time', 
+                            time: {{ 
+                                unit: 'month',
+                                tooltipFormat: 'MMM d, yyyy' 
+                            }}, 
+                            grid: {{ display: false }} 
+                        }}, 
+                        y: {{ 
+                            title: {{ display: true, text: 'Price (USD)' }}, 
+                            grid: {{ color: '#f1f5f9' }} 
+                        }}
+                    }}, 
+                    plugins: {{ 
+                        legend: {{ 
+                            display: true, 
+                            position: 'top', 
+                            align: 'end' 
+                        }},
+                        tooltip: {{
+                            mode: 'index',
+                            intersect: false,
+                            callbacks: {{
+                                title: function(context) {{
+                                    return context[0].label;
+                                }},
+                                label: function(context) {{
+                                    let label = context.dataset.label || '';
+                                    if (label) label += ': ';
+                                    label += '$' + context.parsed.y.toFixed(2);
+                                    if (context.dataset.label === 'AI Prediction' && predictions.length > 0) {{
+                                        const predictionPoint = predictions.find(p => p.x.getTime() === context.parsed.x);
+                                        if (predictionPoint) {{
+                                            label += ` (CI: $${{predictionPoint.lowerCI.toFixed(2)}} - $${{predictionPoint.upperCI.toFixed(2)}})`;
+                                        }}
+                                    }}
+                                    return label;
+                                }}
+                            }}
+                        }}
+                    }} 
+                }} 
+            }});
+            
+            // Render Volume Chart
+            const volumeCtx = document.getElementById('volumeChart').getContext('2d');
+            if (volumeChart) volumeChart.destroy();
+            
+            volumeChart = new Chart(volumeCtx, {{ 
+                type: 'bar', // Explicitly define type
+                data: {{ 
+                    datasets: [{{
+                        label: 'Volume', 
+                        data: data.dates.map((d, i) => ({{x: d, y: data.volumes[i]}})), 
+                        backgroundColor: '#e2e8f0', 
+                        borderColor: '#cbd5e1',
+                        borderWidth: 1
+                    }}]
+                }}, 
+                options: {{ 
+                    responsive: true, 
+                    maintainAspectRatio: false, 
+                    scales: {{ 
+                        x: {{ 
+                            type: 'time', 
+                            time: {{ 
+                                unit: 'month'
+                            }}, 
+                            grid: {{ display: false }} 
+                        }}, 
+                        y: {{ 
+                            title: {{ display: true, text: 'Volume' }},
+                            grid: {{ color: '#f1f5f9' }}, 
+                            ticks: {{
+                                callback: function(value) {{
+                                    if (value >= 1e9) return (value / 1e9).toFixed(0) + 'B';
+                                    if (value >= 1e6) return (value / 1e6).toFixed(0) + 'M';
+                                    if (value >= 1e3) return (value / 1e3).toFixed(0) + 'K';
+                                    return value;
+                                }}
+                            }}
+                        }} 
+                    }},
+                    plugins: {{
+                        legend: {{
+                            display: false
+                        }},
+                        tooltip: {{
+                            callbacks: {{
+                                label: function(context) {{
+                                    let label = context.dataset.label || '';
+                                    if (label) label += ': ';
+                                    let value = context.parsed.y;
+                                    if (value >= 1e9) label += (value / 1e9).toLocaleString(undefined, {{maximumFractionDigits: 1}}) + 'B';
+                                    else if (value >= 1e6) label += (value / 1e6).toLocaleString(undefined, {{maximumFractionDigits: 1}}) + 'M';
+                                    else if (value >= 1e3) label += (value / 1e3).toLocaleString(undefined, {{maximumFractionDigits: 1}}) + 'K';
+                                    else label += value.toLocaleString();
+                                    return label;
+                                }}
+                            }}
+                        }}
+                    }}
+                }} 
+            }});
+        }}
         
-    }}
-   .logo-text-container i {{
-        font-size: 10px;
-        ma
-    }}
-   
-     
-      .logo-text-container img {{
-            width: 30px; /* Adjust logo size */
-            border-radius: 10px; /* Optional: round edges */
-            margin-left:15px;
-            margin-top: -35px;
+        function displayPredictions(data, predictions) {{
+            if (!data || predictions.length === 0) {{
+                predictionDetailsContainerEl.classList.add('hidden');
+                predictionResultEl.innerHTML = '<p class="text-sm text-slate-500">No predictions available or not enough data for prediction.</p>';
+                return;
+            }}
+            predictionDetailsContainerEl.classList.remove('hidden');
+            const lastHistoricalPrice = data.prices[data.prices.length - 1];
+            const finalPredictedPrice = predictions[predictions.length - 1].y;
 
+            const changeOverall = finalPredictedPrice - lastHistoricalPrice;
+            const changePctOverall = (changeOverall / lastHistoricalPrice) * 100;
+            const statusClass = changeOverall >= 0 ? 'positive' : 'negative';
+
+            predictionResultEl.innerHTML = `<p class="text-sm text-slate-500">Predicted price in ${{predictions.length}} days:</p><p class="text-3xl font-bold mt-1 ${{statusClass}}">$${{finalPredictedPrice.toFixed(2)}} <span class="text-base font-normal">(${{changeOverall >= 0 ? '+' : ''}}${{changeOverall.toFixed(2)}} / ${{changePctOverall.toFixed(2)}}%)</span></p>`;
+            
+            const tableRows = predictions.map(p => `
+                <tr>
+                    <td>${{new Date(p.x).toLocaleDateString()}}</td>
+                    <td class="font-semibold">$${{p.y.toFixed(2)}}</td>
+                    <td>$${{p.lowerCI.toFixed(2)}} - $${{p.upperCI.toFixed(2)}}</td>
+                </tr>
+            `).join('');
+            predictionTableEl.innerHTML = `
+                <table>
+                    <thead>
+                        <tr>
+                            <th>Date</th>
+                            <th>Predicted Price</th>
+                            <th>95% Confidence Interval</th>
+                        </tr>
+                    </thead>
+                    <tbody>${{tableRows}}</tbody>
+                </table>
+            `;
         }}
-        
-}}
-    </style>
-""",
-    unsafe_allow_html=True,
-)
-
-if st.session_state.show_overlay:
-
-    with st.container(key="logo-text-containers"):
-        if st.button("✕", key="close-btn"):
-            st.session_state.show_overlay = False
-            st.session_state.framework = "gen"
-            st.rerun()
-        with st.spinner("Downloading and processing the Data..."):
-            progress_bar = st.progress(0)
-            for i in range(1, 11):
-                time.sleep(0.6)
-                progress_bar.progress(i * 10)
-        with st.container(key="content"):
-            days = st.slider(
-                "Amazon Stock Insight: Predictive Analytics Over 21 Days",
-                1,
-                21,
-                7,
-                key="days_slider",
-            )
 
-            col1, col2 = st.columns([2.5, 3])
-            data = load_data()
-            if data is not None and not data.empty:
-                fig, future_data = predict_future_prices(
-                    data, days+1, st.session_state.model
-                    )
-                with col1:
-                    with st.container(key="col1"):
-                        future_data["Date"] = future_data["Date"].dt.strftime("%Y-%m-%d")
-                        future_data = future_data[1:]
-                        styled_html = (
-                        future_data.style.set_table_attributes('class="glass-table"')
-                        .set_table_styles(
-                            [
-                                {
-                                    "selector": "th",
-                                    "props": [
-                                        ("padding", "12px"),
-                                        ("color", "#000"),
-                                        (
-                                            "background-color",
-                                            "rgba(255, 255, 255, 0.15)",
-                                        ),
-                                    ],
-                                },
-                                {
-                                    "selector": "td",
-                                    "props": [
-                                        ("padding", "10px"),
-                                        ("color", "#000"),
-                                        ("border-bottom", "1px solid rgba(0,0,0,0.1)"),
-                                    ],
-                                },
-                                {
-                                    "selector": "table",
-                                    "props": [
-                                        ("width", "100%"),
-                                        ("border-collapse", "collapse"),
-                                    ],
-                                },
-                            ]
-                        )
-                        .to_html()
-                    )
-
-                   
-                        # Glassmorphism CSS + vertical scroll + black text
-                        glass_css = """
-                            <style>
-                            /* Outer shell for glass effect & border radius */
-                            .outer-glass-wrapper {
-                                backdrop-filter: blur(10px);
-                                -webkit-backdrop-filter: blur(10px);
-                                background: rgba(255, 255, 255, 0.15);
-                                border-radius: 20px;
-                                box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2);
-                                max-height: 600px;
-                                max-width: 800px;
-                                overflow: hidden;
-                                margin-right: 15px;
-                                margin-left:3px;
-                                font-family:  "Times New Roman " !important; /* Font */
-                                font-size: 14px;
-                                border: 1px solid rgba(255, 255, 255, 0.2);
-                                margin-bottom:30px;
-                            }
-
-                            /* Inner scrolling container */
-                            .glass-container {
-                                max-height: 400px;
-                                overflow-y: auto;
-                                padding: 16px 24px 16px 16px; /* right padding gives room for scrollbar */
-                            }
-
-                            /* Scrollbar styles */
-                            .glass-container::-webkit-scrollbar {
-                                width: 4px;
-                            }
-                            .glass-container::-webkit-scrollbar-track {
-                                background: transparent;
-                            }
-                            .glass-container::-webkit-scrollbar-thumb {
-                                background-color: rgba(0, 0, 0, 0.3);
-                                border-radius: 10px;
-                            }
-                            .glass-container {
-                                scrollbar-width: thin;
-                                scrollbar-color: rgba(0, 0, 0, 0.3) transparent;
-                            }
-
-                            /* Table styling */
-                            .glass-table {
-                                width: 100%;
-                            }
-                            .glass-table th, .glass-table td {
-                                text-align: left;
-                                white-space: nowrap;
-                                color: #000;
-                            }
-                            </style>
-                            """
-
-                        st.markdown(glass_css, unsafe_allow_html=True)
-                        st.markdown(
-                            f""" <div class="outer-glass-wrapper">
-                        <div class="glass-container">
-                            {styled_html}</div> </div>
-                        """,
-                            unsafe_allow_html=True,
-                        )
-
-                with col2:
-                    with st.container(key="divider-col"):
-                        st.pyplot(fig)
+        function loadDashboard() {{
+            console.log("JS: loadDashboard() called. Current isLoading:", isLoading, "Error:", errorMessage);
+            const statusMessageEl = document.getElementById('status-message');
+           
+            // Handle loading overlay visibility
+            
+            if (isLoading === 'true') {{ 
+                statusMessageEl.classList.remove('hidden');
+                dashboardErrorMessageEl.classList.add('hidden'); // Hide any previous error
+                return; // Stop execution, let Streamlit re-run and call again when done
+            }} else {{
+                console.log("JS: in() called. Current isLoading:", isLoading, "Error:", errorMessage);
+                statusMessageEl.classList.add('hidden');
 
-            else:
-                st.error("No data loaded. Please check your internet connection.")
-# Show overlay if triggered
-st.markdown(
-    f""" <div class="logo-text-container">
-    <img src="data:image/png;base64,{base64.b64encode(open("tensorflow.png","rb").read()).decode()}" alt="Uploaded Image">
-<h1>{text_h1}<br></h1>
-<i>{  text_i}</i>
-</div>
-
-""",
-    unsafe_allow_html=True,
-)
-
-
-st.markdown(
-    f""" <div class="titles">
-            <div class = "header">
-            <img src="data:image/png;base64,{base64.b64encode(open("logo2.png","rb").read()).decode()}" alt="Uploaded Image">
-            <h1></br>ACTIONS </br> TREND ANALYTICS</h1>
-            </div>
-            <div class="content">
-            A deep learning-powered tool that analyzes Amazon's stock trends.<br>
-            the models(BI-Direcional Lstm and GRU) predicts future market<br> actions based on past trends,
-            providing a confidence score to <br> help users interpret the data more accurately and take timely actions. 
-                </div>
-                </div>
-                        """,
-    unsafe_allow_html=True,
-)
-
-
-with st.container(key="content-container-3"):
-    col1, col2 = st.columns([1.5, 10.5])
-    with col1:
-        if st.button(" BIDIR-LSTM"):
-            st.session_state.framework = "lstm"
-            st.session_state.show_overlay = True
-            st.rerun()
-    with col2:
-        if st.button("GRU"):
-            st.session_state.framework = "gru"
-            st.session_state.show_overlay = True
-            st.rerun()
+            }}
+
+            // Handle errors
+            if (errorMessage && errorMessage !== 'null') {{
+                dashboardErrorMessageEl.textContent = "Error: " + errorMessage;
+                dashboardErrorMessageEl.classList.remove('hidden');
+                // Clear existing charts if any, and other content
+                if (priceChart) priceChart.destroy();
+                if (volumeChart) volumeChart.destroy();
+                metricsGridEl.innerHTML = `<div class="col-span-full text-center text-slate-500 p-8 info-card">An error occurred. Please check the ticker or model.</div>`;
+                predictionDetailsContainerEl.classList.add('hidden');
+                predictionResultEl.innerHTML = '<p class="text-sm text-slate-500">No results due to error.</p>';
+                techSummaryEl.innerHTML = '<p class="text-sm text-slate-500">No technical summary due to error.</p>';
+                return;
+            }} else {{
+                dashboardErrorMessageEl.classList.add('hidden'); // Ensure error message is hidden if no error
+            }}
+
+            // If no error and not loading, proceed to render dashboard
+            const historicalData = parseData(historicalDataJson);
+            const predictionData = parsePredictions(predictionDataJson);
+
+            if (!historicalData) {{
+                metricsGridEl.innerHTML = `<div class="col-span-full text-center text-slate-500 p-8 info-card">Click "Generate Dashboard" in the sidebar to load data.</div>`;
+                predictionDetailsContainerEl.classList.add('hidden');
+                predictionResultEl.innerHTML = '<p class="text-sm text-slate-500">No data loaded yet.</p>';
+                techSummaryEl.innerHTML = '<p class="text-sm text-slate-500">No data for technical summary.</p>';
+                if (priceChart) priceChart.destroy();
+                if (volumeChart) volumeChart.destroy();
+                console.log("JS: No historical data available to render dashboard.");
+                return;
+            }}
+            
+            updateMetrics(historicalData);
+            updateTechSummary(historicalData);
+            renderCharts(historicalData, predictionData); // Renamed to plural as it handles both
+            displayPredictions(historicalData, predictionData);
+            console.log("JS: Dashboard loaded successfully.");
+        }}
+
+        loadDashboard(); // Initial call when DOM is ready
+    }});
+    </script>
+</body>
+</html>
+"""
+
+# --- Embed HTML Component in Streamlit ---
+# No need for st.error here, as the JS will handle displaying the error in the HTML component
+components.html(html_code, height=1200, scrolling=True)