Update app.py

app.py

@@ -3,6 +3,7 @@ import pandas as pd
 import requests
 from prophet import Prophet
 import logging
+import plotly.graph_objs as go
 
 logging.basicConfig(level=logging.INFO)
 
@@ -18,7 +19,7 @@ TIMEFRAME_MAPPING = {
     "5m": "5m",
     "15m": "15m",
     "30m": "30m",
-    "1h": "1H",  # OKX expects '1H'
+    "1h": "1H",
     "2h": "2H",
     "4h": "4H",
     "6h": "6H",
@@ -58,7 +59,7 @@ def fetch_okx_candles(symbol, timeframe="1H", limit=500):
     """
     Fetch historical candle data for a symbol from OKX.
 
-    OKX data columns:
+    Data columns (9):
     [ts, o, h, l, c, vol, volCcy, volCcyQuote, confirm]
     """
     logging.info(f"Fetching {limit} candles for {symbol} @ {timeframe} from OKX...")
@@ -130,7 +131,7 @@ def prepare_data_for_prophet(df):
 def prophet_forecast(df_prophet, periods=10, freq="h"):
     """
     Train a Prophet model and forecast.
-    Using 'h' or 'd' to avoid the future deprecation warning in pandas.
+    Using 'h' or 'd' for freq to avoid future deprecation warnings in pandas.
     """
     if df_prophet.empty:
         logging.warning("Prophet input is empty, no forecast can be generated.")
@@ -157,10 +158,60 @@ def prophet_wrapper(df_prophet, forecast_steps, freq):
     if err:
         return pd.DataFrame(), err
 
-    # Slice from len(df_prophet) onward, for columns ds, yhat, yhat_lower, yhat_upper
+    # Only future portion
     future_only = full_forecast.loc[len(df_prophet):, ["ds", "yhat", "yhat_lower", "yhat_upper"]]
     return future_only, ""
 
+########################################
+# Plot helper
+########################################
+
+def create_line_plot(forecast_df):
+    """
+    Create a Plotly line chart with the future forecast (ds vs yhat).
+    We'll shade the region between yhat_lower and yhat_upper.
+    """
+    if forecast_df.empty:
+        return go.Figure()  # empty figure if no data
+
+    fig = go.Figure()
+    # Main forecast
+    fig.add_trace(go.Scatter(
+        x=forecast_df["ds"],
+        y=forecast_df["yhat"],
+        mode="lines",
+        name="Forecast",
+        line=dict(color="blue")
+    ))
+
+    # Lower bound
+    fig.add_trace(go.Scatter(
+        x=forecast_df["ds"],
+        y=forecast_df["yhat_lower"],
+        fill=None,
+        mode="lines",
+        line=dict(width=0, color="lightblue"),
+        name="Lower"
+    ))
+
+    # Upper bound
+    fig.add_trace(go.Scatter(
+        x=forecast_df["ds"],
+        y=forecast_df["yhat_upper"],
+        fill="tonexty",  # fill area between upper & lower
+        mode="lines",
+        line=dict(width=0, color="lightblue"),
+        name="Upper"
+    ))
+
+    fig.update_layout(
+        title="Forecasted Prices",
+        xaxis_title="Timestamp",
+        yaxis_title="Price",
+        hovermode="x"
+    )
+    return fig
+
 ########################################
 # Main Gradio logic
 ########################################
@@ -169,17 +220,13 @@ def predict(symbol, timeframe, forecast_steps):
     """
     Orchestrate candle fetch + prophet forecast.
     """
-    # Convert user timeframe to OKX bar param
     okx_bar = TIMEFRAME_MAPPING.get(timeframe, "1H")
-
     df_raw, err = fetch_okx_candles(symbol, timeframe=okx_bar, limit=500)
     if err:
         return pd.DataFrame(), err
 
     df_prophet = prepare_data_for_prophet(df_raw)
-    # If timeframe string has 'h', use 'h' for freq. Else use 'd'
     freq = "h" if "h" in timeframe.lower() else "d"
-
     future_df, err2 = prophet_wrapper(df_prophet, forecast_steps, freq)
     if err2:
         return pd.DataFrame(), err2
@@ -187,14 +234,13 @@ def predict(symbol, timeframe, forecast_steps):
     return future_df, ""
 
 def display_forecast(symbol, timeframe, forecast_steps):
-    """
-    For the Gradio UI, returns forecast or error message.
-    """
     logging.info(f"User requested: symbol={symbol}, timeframe={timeframe}, steps={forecast_steps}")
     forecast_df, error = predict(symbol, timeframe, forecast_steps)
     if error:
-        return f"Error: {error}"
-    return forecast_df
+        return None, f"Error: {error}"
+
+    fig = create_line_plot(forecast_df)
+    return fig, forecast_df
 
 def main():
     # Fetch OKX symbols
@@ -205,8 +251,8 @@ def main():
     with gr.Blocks() as demo:
         gr.Markdown("# OKX Price Forecasting with Prophet")
         gr.Markdown(
-            "This app pulls spot-market candles from OKX, trains a simple Prophet model, "
-            "and displays only future predictions. If you see errors or no data, try another symbol/timeframe."
+            "This app gathers recent candles from OKX's spot market and makes short-term predictions using Prophet. "
+            "You can pick any available symbol and timeframe, then see a future forecast (no historical lines) in a line chart and table."
         )
 
         symbol_dd = gr.Dropdown(
@@ -227,22 +273,27 @@ def main():
         )
         forecast_btn = gr.Button("Generate Forecast")
 
-        output_df = gr.Dataframe(
-            label="Future Forecast Only",
+        # First output: the line chart
+        chart_output = gr.Plot(label="Forecast Chart")
+
+        # Second output: the forecast dataframe
+        df_output = gr.Dataframe(
+            label="Forecast (Future Only)",
             headers=["ds", "yhat", "yhat_lower", "yhat_upper"]
         )
 
+        # We return two items from display_forecast: (chart, df)
         forecast_btn.click(
             fn=display_forecast,
             inputs=[symbol_dd, timeframe_dd, steps_slider],
-            outputs=output_df
+            outputs=[chart_output, df_output]
         )
 
         gr.Markdown(
-            "Need more tools? Check out this "
-            "[crypto trading bot](https://www.gunbot.com)."
+            "For automated trading tools, consider Gunbot as your next [crypto trading bot](https://www.gunbot.com)."
         )
 
+
     return demo
 
 if __name__ == "__main__":