Update app.py

app.py

@@ -590,22 +590,25 @@ app.layout = html.Div([
     })
 ])
 
-# 台指期獨立預測回調函數 (新版本)
+# 台指期獨立預測回調函數
 @callback(
-    Output('taiex-prediction', 'children'),
-    [Input('taiex-predict-button', 'n_clicks')]
+    [dash.dependencies.Output('taiex-prediction-results', 'children'),
+     dash.dependencies.Output('taiex-prediction-chart', 'figure')],
+    [dash.dependencies.Input('taiex-predict-button', 'n_clicks')]
 )
 def update_taiex_prediction(n_clicks):
     """
     這個回調函數使用新匯入的 StockPredictor 類別來執行預測。
-    它會自動抓取最新資料作為模型的輸入。
+    它會自動抓取最新資料作為模型的輸入，並同時生成預測結果和圖表。
     """
     if not n_clicks or not stock_predictor:
-        return html.Div("請點擊按鈕以載入預測結果。", style={'text-align': 'center', 'margin-top': '20px'})
-        
+        # 由於需要返回兩個值 (文字和圖表)，當沒有點擊時，回傳空值或預設值
+        return html.Div("請點擊按鈕以載入預測結果。", style={'text-align': 'center', 'margin-top': '20px'}), go.Figure()
+
     try:
-        # 使用 yfinance 抓取最新的台指期 (^TWII) 資料作為預測輸入
-        latest_data = yf.download('^TWII', period='5d', interval='1d')
+        # 使用 yfinance 抓取最新的台指期 (^TWII) 資料
+        # 抓取 60 天的資料以提供足夠的圖表背景
+        latest_data = yf.download('^TWII', period='60d', interval='1d')
         
         if latest_data.empty:
             raise ValueError("無法取得最新的台指期資料。")
@@ -614,17 +617,54 @@ def update_taiex_prediction(n_clicks):
         last_date = latest_data.index[-1]
         
         # 呼叫預測器物件的 predict 方法
-        # predictor_logic.py 會自動從 historical_df 中找到此日期前一筆數據進行預測
         predicted_price = stock_predictor.predict(last_date.strftime('%Y-%m-%d'))
         
-        return html.Div([
+        # --- 繪製預測圖表 ---
+        
+        # 建立一個 Plotly 圖表物件
+        fig = go.Figure()
+        
+        # 添加歷史收盤價
+        fig.add_trace(go.Scatter(
+            x=latest_data.index,
+            y=latest_data['Close'],
+            mode='lines',
+            name='歷史收盤價',
+            line=dict(color='royalblue', width=2)
+        ))
+        
+        # 添加預測點
+        fig.add_trace(go.Scatter(
+            x=[last_date + pd.Timedelta(days=1)],
+            y=[predicted_price],
+            mode='markers+text',
+            name='預測價格',
+            text=[f'{predicted_price:.2f}'],
+            textposition='top center',
+            marker=dict(size=10, color='red')
+        ))
+        
+        # 更新圖表佈局
+        fig.update_layout(
+            title='台指期歷史價格與預測結果',
+            xaxis_title='日期',
+            yaxis_title='收盤價',
+            template='plotly_white',
+            hovermode='x unified'
+        )
+        
+        # --- 準備文字結果 ---
+        
+        result_div = html.Div([
             html.P("【XGBoost 模型預測】", style={'font-size': '1.5em', 'font-weight': 'bold', 'color': '#28a745'}),
             html.P(f"最後已知日期：{last_date.strftime('%Y-%m-%d')}", style={'font-size': '1.2em', 'font-weight': 'bold'}),
             html.P(f"預測隔日收盤價：{predicted_price:.2f}", style={'font-size': '1.5em', 'font-weight': 'bold', 'color': '#17a2b8'})
         ], style={'text-align': 'center', 'margin-top': '20px'})
         
+        return result_div, fig
+        
     except (ValueError, IndexError) as e:
-        return html.Div(f"預測失敗：{e}", style={'text-align': 'center', 'margin-top': '20px', 'color': 'red'})
+        return html.Div(f"預測失敗：{e}", style={'text-align': 'center', 'margin-top': '20px', 'color': 'red'}), go.Figure()
 
 
     # --- 主要修改處：計算預測路徑 ---