Initial Hugging Face Spaces deployment

- Docker configuration for HF Spaces
- Flask webapp with TimesFM integration
- Smart port detection (7860 for Docker, 8080 for local)
- Complete source library
- Sample data for testing

.dockerignore

@@ -0,0 +1,92 @@
+# Sapheneia TimesFM - Docker Build Exclusions
+# Optimize Docker build by excluding unnecessary files
+
+# Python
+__pycache__/
+*.py[cod]
+*$py.class
+*.so
+.Python
+*.egg-info/
+dist/
+build/
+
+# Virtual environments
+.venv/
+venv/
+ENV/
+env/
+
+# IDE and editor files
+.vscode/
+.idea/
+*.swp
+*.swo
+*~
+.DS_Store
+
+# Git
+.git/
+.gitignore
+.gitattributes
+
+# Documentation (not needed in container)
+*.md
+!README.md
+SAPHENEIA.md
+GEMINI.md
+
+# CI/CD
+.github/
+
+# Local development
+local/
+.claude/
+.cursor/
+.cursorignore
+
+# Testing
+.pytest_cache/
+.coverage
+htmlcov/
+*.log
+
+# User uploads (will be created at runtime)
+uploads/
+webapp/uploads/
+
+# Results (will be created at runtime)
+results/
+webapp/results/
+
+# Logs
+logs/
+*.log
+
+# Jupyter notebooks (not needed for webapp)
+notebooks/
+*.ipynb
+.ipynb_checkpoints/
+
+# Environment files
+.env
+.env.*
+
+# Setup scripts (not needed in container)
+setup.sh
+setup_environment.sh
+
+# Lock files (dependencies already in requirements.txt)
+uv.lock
+poetry.lock
+Pipfile.lock
+
+# macOS
+.DS_Store
+.DS_Store?
+._*
+
+# Docker files (no need to copy Docker files into Docker)
+Dockerfile
+docker-compose.yml
+.dockerignore

.github/workflows/deploy-to-hf-spaces.yml

@@ -0,0 +1,67 @@
+name: Deploy to Hugging Face Spaces
+
+# Trigger deployment on push to huggingface branch
+on:
+  push:
+    branches:
+      - huggingface
+  # Allow manual deployment from GitHub UI
+  workflow_dispatch:
+
+jobs:
+  sync-to-hf-space:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0  # Fetch all history for proper sync
+          lfs: true       # Enable Git LFS if using large files
+
+      - name: Setup Python
+        uses: actions/setup-python@v5
+        with:
+          python-version: '3.11'
+
+      - name: Prepare HF Spaces README
+        run: |
+          # Copy the HF Spaces README to root as README.md
+          # This will be displayed on the HF Spaces page
+          cp README_HF_SPACES.md README.md
+          echo "✅ HF Spaces README prepared"
+
+      - name: Push to Hugging Face Spaces
+        env:
+          HF_TOKEN: ${{ secrets.HF_TOKEN }}
+        run: |
+          # Configure git
+          git config --global user.email "github-actions[bot]@users.noreply.github.com"
+          git config --global user.name "GitHub Actions Bot"
+
+          # Install huggingface_hub for better sync
+          pip install huggingface_hub
+
+          # Add HF Space as remote (using the format: https://USER:[email protected]/spaces/USERNAME/SPACENAME)
+          # Note: You'll need to set HF_SPACE_NAME in GitHub secrets (format: username/spacename)
+          git remote add hf-space https://USER:[email protected]/spaces/${{ secrets.HF_SPACE_NAME }} || true
+
+          # Force push to HF Spaces
+          git push --force hf-space huggingface:main
+
+          echo "✅ Successfully deployed to Hugging Face Spaces!"
+          echo "🚀 Your Space: https://huggingface.co/spaces/${{ secrets.HF_SPACE_NAME }}"
+
+      - name: Deployment Summary
+        run: |
+          echo "## 🎉 Deployment Complete!" >> $GITHUB_STEP_SUMMARY
+          echo "" >> $GITHUB_STEP_SUMMARY
+          echo "**Space URL:** https://huggingface.co/spaces/${{ secrets.HF_SPACE_NAME }}" >> $GITHUB_STEP_SUMMARY
+          echo "" >> $GITHUB_STEP_SUMMARY
+          echo "**Branch:** huggingface" >> $GITHUB_STEP_SUMMARY
+          echo "**Commit:** ${{ github.sha }}" >> $GITHUB_STEP_SUMMARY
+          echo "" >> $GITHUB_STEP_SUMMARY
+          echo "### Next Steps" >> $GITHUB_STEP_SUMMARY
+          echo "1. Wait for HF Spaces to rebuild (1-3 minutes)" >> $GITHUB_STEP_SUMMARY
+          echo "2. Check the Space status on Hugging Face" >> $GITHUB_STEP_SUMMARY
+          echo "3. Test the deployed application" >> $GITHUB_STEP_SUMMARY

.gitignore

@@ -0,0 +1,209 @@
+# Byte-compiled / optimized / DLL files
+__pycache__/
+*.py[cod]
+*$py.class
+
+# C extensions
+*.so
+
+# Distribution / packaging
+.Python
+build/
+develop-eggs/
+dist/
+downloads/
+eggs/
+.eggs/
+lib/
+lib64/
+parts/
+sdist/
+var/
+wheels/
+share/python-wheels/
+*.egg-info/
+.installed.cfg
+*.egg
+MANIFEST
+
+# PyInstaller
+#  Usually these files are written by a python script from a template
+#  before PyInstaller builds the exe, so as to inject date/other infos into it.
+*.manifest
+*.spec
+
+# Installer logs
+pip-log.txt
+pip-delete-this-directory.txt
+
+# Unit test / coverage reports
+htmlcov/
+.tox/
+.nox/
+.coverage
+.coverage.*
+.cache
+nosetests.xml
+coverage.xml
+*.cover
+*.py,cover
+.hypothesis/
+.pytest_cache/
+cover/
+
+# Translations
+*.mo
+*.pot
+
+# Django stuff:
+*.log
+local_settings.py
+db.sqlite3
+db.sqlite3-journal
+
+# Flask stuff:
+instance/
+.webassets-cache
+
+# Scrapy stuff:
+.scrapy
+
+# Sphinx documentation
+docs/_build/
+
+# PyBuilder
+.pybuilder/
+target/
+
+# Jupyter Notebook
+.ipynb_checkpoints
+
+# IPython
+profile_default/
+ipython_config.py
+
+# pyenv
+#   For a library or package, you might want to ignore these files since the code is
+#   intended to run in multiple environments; otherwise, check them in:
+# .python-version
+
+# pipenv
+#   According to pypa/pipenv#598, it is recommended to include Pipfile.lock in version control.
+#   However, in case of collaboration, if having platform-specific dependencies or dependencies
+#   having no cross-platform support, pipenv may install dependencies that don't work, or not
+#   install all needed dependencies.
+#Pipfile.lock
+
+# UV
+#   Similar to Pipfile.lock, it is generally recommended to include uv.lock in version control.
+#   This is especially recommended for binary packages to ensure reproducibility, and is more
+#   commonly ignored for libraries.
+#uv.lock
+
+# poetry
+#   Similar to Pipfile.lock, it is generally recommended to include poetry.lock in version control.
+#   This is especially recommended for binary packages to ensure reproducibility, and is more
+#   commonly ignored for libraries.
+#   https://python-poetry.org/docs/basic-usage/#commit-your-poetrylock-file-to-version-control
+#poetry.lock
+
+# pdm
+#   Similar to Pipfile.lock, it is generally recommended to include pdm.lock in version control.
+#pdm.lock
+#   pdm stores project-wide configurations in .pdm.toml, but it is recommended to not include it
+#   in version control.
+#   https://pdm.fming.dev/latest/usage/project/#working-with-version-control
+.pdm.toml
+.pdm-python
+.pdm-build/
+
+# PEP 582; used by e.g. github.com/David-OConnor/pyflow and github.com/pdm-project/pdm
+__pypackages__/
+
+# Celery stuff
+celerybeat-schedule
+celerybeat.pid
+
+# SageMath parsed files
+*.sage.py
+
+# Environments
+.env
+.venv
+env/
+venv/
+ENV/
+env.bak/
+venv.bak/
+
+# Spyder project settings
+.spyderproject
+.spyproject
+
+# Rope project settings
+.ropeproject
+
+# mkdocs documentation
+/site
+
+# mypy
+.mypy_cache/
+.dmypy.json
+dmypy.json
+
+# Pyre type checker
+.pyre/
+
+# pytype static type analyzer
+.pytype/
+
+# Cython debug symbols
+cython_debug/
+
+# PyCharm
+#  JetBrains specific template is maintained in a separate JetBrains.gitignore that can
+#  be found at https://github.com/github/gitignore/blob/main/Global/JetBrains.gitignore
+#  and can be added to the global gitignore or merged into this file.  For a more nuclear
+#  option (not recommended) you can uncomment the following to ignore the entire idea folder.
+#.idea/
+
+# Abstra
+# Abstra is an AI-powered process automation framework.
+# Ignore directories containing user credentials, local state, and settings.
+# Learn more at https://abstra.io/docs
+.abstra/
+
+# Visual Studio Code
+#  Visual Studio Code specific template is maintained in a separate VisualStudioCode.gitignore 
+#  that can be found at https://github.com/github/gitignore/blob/main/Global/VisualStudioCode.gitignore
+#  and can be added to the global gitignore or merged into this file. However, if you prefer, 
+#  you could uncomment the following to ignore the enitre vscode folder
+# .vscode/
+
+# Ruff stuff:
+.ruff_cache/
+
+# PyPI configuration file
+.pypirc
+
+# Cursor
+#  Cursor is an AI-powered code editor. `.cursorignore` specifies files/directories to
+#  exclude from AI features like autocomplete and code analysis. Recommended for sensitive data
+#  refer to https://docs.cursor.com/context/ignore-files
+.cursorignore
+.cursorindexingignore
+
+# Custom files
+GEMINI.md
+SAPHENEIA.md
+CLAUDE.md
+local/
+uploads/
+webapp/uploads/
+
+# Notebooks (not needed for HF Spaces deployment)
+notebooks/
+
+# macOS
+.DS_Store
+.DS_Store?

.python-version

@@ -0,0 +1 @@
+3.11

Dockerfile

@@ -0,0 +1,66 @@
+# Sapheneia TimesFM - Hugging Face Spaces Dockerfile
+# Optimized for deployment on Hugging Face Spaces with Docker SDK
+
+# Use Python 3.11 slim image for smaller size
+FROM python:3.11-slim
+
+# Set working directory
+WORKDIR /app
+
+# Install system dependencies
+RUN apt-get update && apt-get install -y \
+    build-essential \
+    curl \
+    git \
+    && rm -rf /var/lib/apt/lists/*
+
+# Create non-root user for security (HF Spaces best practice)
+RUN useradd -m -u 1000 sapheneia
+
+# Copy requirements first for better layer caching
+COPY --chown=sapheneia:sapheneia webapp/requirements.txt /app/requirements.txt
+COPY --chown=sapheneia:sapheneia pyproject.toml /app/pyproject.toml
+
+# Install Python dependencies
+# Use PyTorch backend for best compatibility across hardware
+RUN pip install --no-cache-dir -r requirements.txt && \
+    pip install --no-cache-dir \
+    timesfm[torch]>=1.3.0 \
+    jax>=0.7.0 \
+    jaxlib>=0.7.0 \
+    plotly>=5.0.0
+
+# Copy application code
+COPY --chown=sapheneia:sapheneia src/ /app/src/
+COPY --chown=sapheneia:sapheneia webapp/ /app/webapp/
+COPY --chown=sapheneia:sapheneia data/ /app/data/
+
+# Create necessary directories with proper permissions
+# /app/.cache is used for model downloads (writable by sapheneia user)
+RUN mkdir -p /app/webapp/uploads /app/webapp/results /app/logs /app/.cache && \
+    chown -R sapheneia:sapheneia /app
+
+# Set environment variables
+# Use /app/.cache for model caching (guaranteed writable)
+# On HF Spaces with persistent storage, you can override to /data/.cache
+ENV PYTHONUNBUFFERED=1 \
+    PYTHONDONTWRITEBYTECODE=1 \
+    HF_HOME=/app/.cache \
+    TRANSFORMERS_CACHE=/app/.cache \
+    HF_HUB_CACHE=/app/.cache \
+    FLASK_APP=webapp/app.py \
+    PORT=7860
+
+# Switch to non-root user
+USER sapheneia
+
+# Expose port 7860 (required by Hugging Face Spaces)
+EXPOSE 7860
+
+# Health check
+HEALTHCHECK --interval=30s --timeout=10s --start-period=60s --retries=3 \
+    CMD curl -f http://localhost:7860/ || exit 1
+
+# Change to webapp directory and run the application
+WORKDIR /app/webapp
+CMD ["python", "app.py"]

README.md

@@ -0,0 +1,152 @@
+---
+title: Sapheneia TimesFM Forecasting
+emoji: 📈
+colorFrom: blue
+colorTo: green
+sdk: docker
+app_port: 7860
+pinned: false
+license: mit
+tags:
+  - time-series
+  - forecasting
+  - timesfm
+  - finance
+  - machine-learning
+---
+
+# Sapheneia TimesFM: Time Series Forecasting with Google's Foundation Model
+
+A professional web application for time series forecasting powered by Google's TimesFM (Time Series Foundation Model). Built for financial forecasting and analysis with advanced covariates support.
+
+## 🚀 Quick Start
+
+1. **Upload Your Data**: Upload a CSV file with time series data
+2. **Configure Model**: Set context length, horizon, and other parameters
+3. **Add Covariates** (Optional): Enhance forecasts with exogenous variables
+4. **Generate Forecast**: Get point forecasts with prediction intervals
+5. **Visualize & Download**: Interactive charts and downloadable results
+
+## ✨ Features
+
+### Core Capabilities
+- **TimesFM 2.0-500m Model**: State-of-the-art foundation model for time series
+- **Quantile Forecasting**: Prediction intervals for uncertainty quantification
+- **Covariates Support**: Dynamic and static, numerical and categorical variables
+- **Professional Visualizations**: Publication-quality charts with Plotly
+- **Interactive Interface**: User-friendly web application
+
+### Advanced Features
+- **Multi-Series Forecasting**: Process multiple time series simultaneously
+- **Flexible Horizons**: Forecast from 1 to 128 periods ahead
+- **Customizable Context**: Use 64 to 2048 historical data points
+- **Real-time Processing**: Fast inference on CPU
+- **Export Options**: Download forecasts as CSV or HTML charts
+
+## 📊 Data Format
+
+Your CSV file should have:
+- **Date column** as the first column
+- **Time series columns** with numerical values
+- **Data definition JSON** specifying column types:
+
+```json
+{
+  "price": "target",
+  "temperature": "dynamic_numerical",
+  "day_of_week": "dynamic_categorical",
+  "store_id": "static_categorical",
+  "base_sales": "static_numerical"
+}
+```
+
+### Column Types
+- **target**: Main time series to forecast
+- **dynamic_numerical**: Time-varying numerical covariates
+- **dynamic_categorical**: Time-varying categorical covariates
+- **static_numerical**: Series-level numerical features
+- **static_categorical**: Series-level categorical features
+
+## 🎯 Use Cases
+
+### Financial Forecasting
+- Stock price prediction
+- Revenue forecasting
+- Trading volume estimation
+- Risk analysis
+
+### Business Analytics
+- Sales forecasting
+- Demand planning
+- Inventory optimization
+- Customer behavior prediction
+
+### Research & Academia
+- Economic indicators
+- Climate data analysis
+- Experimental time series
+- Comparative studies
+
+## 🔧 Model Configuration
+
+### Recommended Settings
+
+**Quick Testing**:
+- Context Length: 64
+- Horizon Length: 24
+- Backend: CPU
+
+**Production Use**:
+- Context Length: 512-2048
+- Horizon Length: 24-128
+- Backend: CPU (or GPU for faster inference)
+
+### Covariates Configuration
+When using covariates:
+- Dynamic covariates must cover context + horizon periods
+- Use `xreg_mode="xreg + timesfm"` for best results
+- Enable normalization for stability
+- Start with small ridge values (0.0-0.01)
+
+## 📚 About TimesFM
+
+TimesFM is a decoder-only foundation model for time-series forecasting, pre-trained on 100 billion real-world time points. Key features:
+
+- **Foundation Model**: Pre-trained on diverse time series data
+- **Zero-Shot Forecasting**: Works on new data without retraining
+- **Attention-Based**: Leverages transformer architecture
+- **Production-Ready**: Developed and tested by Google Research
+
+Learn more: [TimesFM Research Paper](https://research.google/blog/a-decoder-only-foundation-model-for-time-series-forecasting/)
+
+## 🛠️ Technical Stack
+
+- **Model**: Google TimesFM 2.0-500m (PyTorch)
+- **Backend**: Flask + Python 3.11
+- **Visualization**: Plotly + Matplotlib
+- **ML Libraries**: JAX, NumPy, Pandas, scikit-learn
+- **Deployment**: Docker on Hugging Face Spaces
+
+## 📖 Documentation
+
+- [GitHub Repository](https://github.com/labrem/sapheneia)
+- [Full Documentation](https://github.com/labrem/sapheneia/blob/main/README.md)
+- [TimesFM GitHub](https://github.com/google-research/timesfm)
+
+## 🤝 Contributing
+
+Contributions are welcome! This is a research project focused on advancing TimesFM capabilities for practical applications.
+
+## 📄 License
+
+MIT License - See [LICENSE](https://github.com/labrem/sapheneia/blob/main/LICENSE) for details.
+
+## 🙏 Acknowledgments
+
+- Google Research for the TimesFM foundation model
+- Hugging Face for Spaces infrastructure
+- The open-source time series forecasting community
+
+---
+
+**Note**: This application runs on CPU by default. For faster inference on large datasets, consider using GPU-enabled Spaces.

README_HF_SPACES.md

@@ -0,0 +1,152 @@
+---
+title: Sapheneia TimesFM Forecasting
+emoji: 📈
+colorFrom: blue
+colorTo: green
+sdk: docker
+app_port: 7860
+pinned: false
+license: mit
+tags:
+  - time-series
+  - forecasting
+  - timesfm
+  - finance
+  - machine-learning
+---
+
+# Sapheneia TimesFM: Time Series Forecasting with Google's Foundation Model
+
+A professional web application for time series forecasting powered by Google's TimesFM (Time Series Foundation Model). Built for financial forecasting and analysis with advanced covariates support.
+
+## 🚀 Quick Start
+
+1. **Upload Your Data**: Upload a CSV file with time series data
+2. **Configure Model**: Set context length, horizon, and other parameters
+3. **Add Covariates** (Optional): Enhance forecasts with exogenous variables
+4. **Generate Forecast**: Get point forecasts with prediction intervals
+5. **Visualize & Download**: Interactive charts and downloadable results
+
+## ✨ Features
+
+### Core Capabilities
+- **TimesFM 2.0-500m Model**: State-of-the-art foundation model for time series
+- **Quantile Forecasting**: Prediction intervals for uncertainty quantification
+- **Covariates Support**: Dynamic and static, numerical and categorical variables
+- **Professional Visualizations**: Publication-quality charts with Plotly
+- **Interactive Interface**: User-friendly web application
+
+### Advanced Features
+- **Multi-Series Forecasting**: Process multiple time series simultaneously
+- **Flexible Horizons**: Forecast from 1 to 128 periods ahead
+- **Customizable Context**: Use 64 to 2048 historical data points
+- **Real-time Processing**: Fast inference on CPU
+- **Export Options**: Download forecasts as CSV or HTML charts
+
+## 📊 Data Format
+
+Your CSV file should have:
+- **Date column** as the first column
+- **Time series columns** with numerical values
+- **Data definition JSON** specifying column types:
+
+```json
+{
+  "price": "target",
+  "temperature": "dynamic_numerical",
+  "day_of_week": "dynamic_categorical",
+  "store_id": "static_categorical",
+  "base_sales": "static_numerical"
+}
+```
+
+### Column Types
+- **target**: Main time series to forecast
+- **dynamic_numerical**: Time-varying numerical covariates
+- **dynamic_categorical**: Time-varying categorical covariates
+- **static_numerical**: Series-level numerical features
+- **static_categorical**: Series-level categorical features
+
+## 🎯 Use Cases
+
+### Financial Forecasting
+- Stock price prediction
+- Revenue forecasting
+- Trading volume estimation
+- Risk analysis
+
+### Business Analytics
+- Sales forecasting
+- Demand planning
+- Inventory optimization
+- Customer behavior prediction
+
+### Research & Academia
+- Economic indicators
+- Climate data analysis
+- Experimental time series
+- Comparative studies
+
+## 🔧 Model Configuration
+
+### Recommended Settings
+
+**Quick Testing**:
+- Context Length: 64
+- Horizon Length: 24
+- Backend: CPU
+
+**Production Use**:
+- Context Length: 512-2048
+- Horizon Length: 24-128
+- Backend: CPU (or GPU for faster inference)
+
+### Covariates Configuration
+When using covariates:
+- Dynamic covariates must cover context + horizon periods
+- Use `xreg_mode="xreg + timesfm"` for best results
+- Enable normalization for stability
+- Start with small ridge values (0.0-0.01)
+
+## 📚 About TimesFM
+
+TimesFM is a decoder-only foundation model for time-series forecasting, pre-trained on 100 billion real-world time points. Key features:
+
+- **Foundation Model**: Pre-trained on diverse time series data
+- **Zero-Shot Forecasting**: Works on new data without retraining
+- **Attention-Based**: Leverages transformer architecture
+- **Production-Ready**: Developed and tested by Google Research
+
+Learn more: [TimesFM Research Paper](https://research.google/blog/a-decoder-only-foundation-model-for-time-series-forecasting/)
+
+## 🛠️ Technical Stack
+
+- **Model**: Google TimesFM 2.0-500m (PyTorch)
+- **Backend**: Flask + Python 3.11
+- **Visualization**: Plotly + Matplotlib
+- **ML Libraries**: JAX, NumPy, Pandas, scikit-learn
+- **Deployment**: Docker on Hugging Face Spaces
+
+## 📖 Documentation
+
+- [GitHub Repository](https://github.com/labrem/sapheneia)
+- [Full Documentation](https://github.com/labrem/sapheneia/blob/main/README.md)
+- [TimesFM GitHub](https://github.com/google-research/timesfm)
+
+## 🤝 Contributing
+
+Contributions are welcome! This is a research project focused on advancing TimesFM capabilities for practical applications.
+
+## 📄 License
+
+MIT License - See [LICENSE](https://github.com/labrem/sapheneia/blob/main/LICENSE) for details.
+
+## 🙏 Acknowledgments
+
+- Google Research for the TimesFM foundation model
+- Hugging Face for Spaces infrastructure
+- The open-source time series forecasting community
+
+---
+
+**Note**: This application runs on CPU by default. For faster inference on large datasets, consider using GPU-enabled Spaces.

data/sample_data.csv

@@ -0,0 +1,201 @@
+date,btc_price,eth_price,sp500_price,vix_index,quarter,asset_category,base_volatility
+2020-01-01,26013.430363827687,1588.7276515800945,3390.1508377686005,10.0,1,cryptocurrency,0.08
+2020-01-08,25100.39101182912,1548.2511933654255,3461.423742310685,17.948094686110654,1,cryptocurrency,0.08
+2020-01-15,27130.33908446903,1715.9709874877444,3506.705131765221,21.053433741879807,1,cryptocurrency,0.08
+2020-01-22,29524.603367721014,1864.815464906524,3512.809512480278,22.375487514075488,1,cryptocurrency,0.08
+2020-01-29,26015.074893650224,1453.383978260739,3481.209356032858,23.771259801941124,1,cryptocurrency,0.08
+2020-02-05,26364.719132181595,1507.7066666134278,3559.936046398046,25.363376512323068,1,cryptocurrency,0.08
+2020-02-12,30864.77506745048,1899.5758470696271,3444.703023211277,14.52685543620182,1,cryptocurrency,0.08
+2020-02-19,29260.170002959374,1800.7105929840325,3512.21550754496,17.333803140834622,1,cryptocurrency,0.08
+2020-02-26,26782.18328389954,1648.3133016377633,3533.910549006919,16.433646094444924,1,cryptocurrency,0.08
+2020-03-04,29310.97177712928,2097.4402185900703,3565.101228998545,22.683632020177285,1,cryptocurrency,0.08
+2020-03-11,27260.936702737683,1682.3452323928611,3582.4269588273137,23.413239405697563,1,cryptocurrency,0.08
+2020-03-18,27436.588119840606,1739.6634274484709,3456.373352700806,19.704792627462172,1,cryptocurrency,0.08
+2020-03-25,29185.867387299513,1834.6821501076581,3431.285445550535,19.603763017859695,1,cryptocurrency,0.08
+2020-04-01,24655.73141421941,1527.5254680664689,3633.0601108950427,19.997037124721412,2,cryptocurrency,0.08
+2020-04-08,25087.365200982076,1481.5140880281342,3568.2403150337873,26.990156823685044,2,cryptocurrency,0.08
+2020-04-15,27555.802622420484,1716.0901754544436,3495.0968172951543,18.51068766649672,2,cryptocurrency,0.08
+2020-04-22,26564.93639382923,1532.3060256265396,3662.9116715495966,21.060603771507786,2,cryptocurrency,0.08
+2020-04-29,29483.108185027413,1748.0400452934155,3562.4672251812835,20.09279327353528,2,cryptocurrency,0.08
+2020-05-06,26650.38620361683,1560.2177942206,3642.3545219090543,23.463304760177927,2,cryptocurrency,0.08
+2020-05-13,25483.445257203,1535.2660208792756,3565.4820701638537,21.567144202047356,2,cryptocurrency,0.08
+2020-05-20,31904.322422313107,2135.8021849649485,3713.847418360923,13.134327353576037,2,cryptocurrency,0.08
+2020-05-27,27686.274318439293,1506.0836100642518,3694.5721652699963,24.250499497942524,2,cryptocurrency,0.08
+2020-06-03,28136.904912411635,1746.1420079099214,3552.6122679645714,25.32316792298304,2,cryptocurrency,0.08
+2020-06-10,24771.732693426762,1366.454662190935,3643.6954771485794,26.583837426371936,2,cryptocurrency,0.08
+2020-06-17,26353.96089746882,1543.9258320362765,3623.2775986907645,23.541252079189224,2,cryptocurrency,0.08
+2020-06-24,27527.35353996867,1741.5689966089622,3679.396208612432,17.595120928457142,2,cryptocurrency,0.08
+2020-07-01,24660.143046594567,1484.36404619347,3514.7981110904466,19.231023259608687,3,cryptocurrency,0.08
+2020-07-08,27612.954636375038,1567.4981251948461,3636.0797453823907,17.36070453944524,3,cryptocurrency,0.08
+2020-07-15,25312.928517217053,1464.4564160512296,3666.5753944517483,21.90656993061602,3,cryptocurrency,0.08
+2020-07-22,25726.38250868121,1596.0337254442693,3468.836844827257,22.95853958918426,3,cryptocurrency,0.08
+2020-07-29,24896.301044153115,1439.227780041685,3512.1678806367186,15.57856175321812,3,cryptocurrency,0.08
+2020-08-05,30075.74225349692,1824.074993456284,3455.677483861331,20.808656925437596,3,cryptocurrency,0.08
+2020-08-12,25737.940649628094,1547.7952149099017,3583.426821995967,22.641031274539635,3,cryptocurrency,0.08
+2020-08-19,23544.808803045482,1366.663111381598,3658.1701370747437,20.5005733892294,3,cryptocurrency,0.08
+2020-08-26,27245.642336402903,1809.9779417251827,3719.405629047314,14.043922256432367,3,cryptocurrency,0.08
+2020-09-02,23062.095180465793,1427.5842133161648,3617.9340393524703,18.36949449570286,3,cryptocurrency,0.08
+2020-09-09,25806.489769966218,1391.6039218620656,3735.561318897995,20.22079908645122,3,cryptocurrency,0.08
+2020-09-16,21683.80833080696,1313.1576187201542,3520.588897399666,23.701157493724047,3,cryptocurrency,0.08
+2020-09-23,22826.51771636746,1324.2722215945842,3501.0648987513114,15.102975386612982,3,cryptocurrency,0.08
+2020-09-30,25847.46843912356,1616.9478375002202,3621.6451952691464,13.62896877244728,3,cryptocurrency,0.08
+2020-10-07,27093.267869724008,1561.1801422074345,3656.9343312171804,18.051193592185975,4,cryptocurrency,0.08
+2020-10-14,26026.342445034283,1552.6220369524306,3629.861526825658,25.810586233075185,4,cryptocurrency,0.08
+2020-10-21,25604.177040954823,1575.0399735406263,3488.263598805656,19.548299790615378,4,cryptocurrency,0.08
+2020-10-28,25428.997783466984,1591.7857277487503,3632.332631349685,15.62787786016526,4,cryptocurrency,0.08
+2020-11-04,23358.45449915314,1317.3960629200603,3548.3140438751093,20.961394252330376,4,cryptocurrency,0.08
+2020-11-11,25081.125855800197,1479.698548562869,3694.554345805104,17.758697096617848,4,cryptocurrency,0.08
+2020-11-18,25904.22090426341,1517.3439894825317,3675.5507067623316,11.263533683881112,4,cryptocurrency,0.08
+2020-11-25,29616.97483186682,1718.969583597834,3583.994410649581,17.15828047440369,4,cryptocurrency,0.08
+2020-12-02,28349.703991994225,1851.1325548897937,3617.932447515099,20.181818051102198,4,cryptocurrency,0.08
+2020-12-09,24291.119167813165,1486.9795270740021,3581.9247875987453,25.178734528790024,4,cryptocurrency,0.08
+2020-12-16,29125.81064593212,1637.3758368545573,3657.3378420817376,21.916589732176348,4,cryptocurrency,0.08
+2020-12-23,27932.31936644481,1752.853201105011,3735.928821678013,24.216501612738895,4,cryptocurrency,0.08
+2020-12-30,27702.0379985494,1838.4864347384669,3596.9405015603297,19.358902612110608,4,cryptocurrency,0.08
+2021-01-06,31176.437182226164,1967.1519959487805,3709.078998056109,14.317290143091743,1,cryptocurrency,0.08
+2021-01-13,32723.76012731421,1814.2671127072786,3636.4285675538144,26.751302760299282,1,cryptocurrency,0.08
+2021-01-20,32939.3459525182,1928.5096962066766,3620.652490423665,20.046326394403412,1,cryptocurrency,0.08
+2021-01-27,28993.015649870104,1849.7756633182942,3673.980310480554,22.594046025940838,1,cryptocurrency,0.08
+2021-02-03,30655.27052362839,1774.2348346881377,3609.6683957464024,18.81263184596324,1,cryptocurrency,0.08
+2021-02-10,32673.473379727096,2003.91176959645,3647.9023141940347,19.319075660138957,1,cryptocurrency,0.08
+2021-02-17,34801.481478350914,2168.9641266898175,3604.460999347795,18.304990363679796,1,cryptocurrency,0.08
+2021-02-24,31303.965882881414,1791.1881533986345,3843.2902203099657,20.39731722032475,1,cryptocurrency,0.08
+2021-03-03,32345.933418828572,1934.979795517993,3701.1519866389553,17.70455293133164,1,cryptocurrency,0.08
+2021-03-10,30289.62742147764,1522.84730497637,3650.4442055695085,21.215399843497458,1,cryptocurrency,0.08
+2021-03-17,30272.00098561405,1723.2892680724756,3721.130393450076,18.381367669699173,1,cryptocurrency,0.08
+2021-03-24,35734.392564415735,2116.987445451488,3700.270239692318,14.543655116727008,1,cryptocurrency,0.08
+2021-03-31,37463.042985731154,2107.5453141954044,3695.580130805977,19.374464193851534,1,cryptocurrency,0.08
+2021-04-07,33494.48764650293,2173.6995995508255,3761.2253488348547,21.474549332245484,2,cryptocurrency,0.08
+2021-04-14,36534.70711652859,2035.3330378546543,3775.4370006839385,22.77434274039861,2,cryptocurrency,0.08
+2021-04-21,34685.90667537178,2035.3643745265563,3682.7526792704266,13.085675213315554,2,cryptocurrency,0.08
+2021-04-28,31939.773395551507,1928.9138769694543,3682.7459794374827,24.92414872973853,2,cryptocurrency,0.08
+2021-05-05,34506.27309262304,2219.5752946982375,3708.31841875339,22.192473813292644,2,cryptocurrency,0.08
+2021-05-12,37744.51536372022,2102.083158747083,3564.2214778320927,11.985848493150874,2,cryptocurrency,0.08
+2021-05-19,33095.834703766355,2101.2377080501806,3624.023147327919,21.60059205900335,2,cryptocurrency,0.08
+2021-05-26,37373.21586503971,2243.540279097718,3842.5284659887266,16.454740205615884,2,cryptocurrency,0.08
+2021-06-02,26546.13364433735,1514.6022391888646,3867.456269137418,22.618868573529646,2,cryptocurrency,0.08
+2021-06-09,34681.94266419666,2128.9964984497738,3727.0664276099924,12.319848826148197,2,cryptocurrency,0.08
+2021-06-16,32424.583509928478,1964.8382937634574,3792.5470049492874,18.014318099394075,2,cryptocurrency,0.08
+2021-06-23,31161.074660685634,1813.5542708758915,3775.8903635777206,26.0517548607241,2,cryptocurrency,0.08
+2021-06-30,31861.314631451005,1918.3508364624552,3994.3998732948608,22.362578029213143,2,cryptocurrency,0.08
+2021-07-07,26735.9098088075,1573.2494598070402,3844.3777378715267,27.322364643773653,3,cryptocurrency,0.08
+2021-07-14,30525.931562929705,1841.9515619128174,3753.040928782706,19.513637409835106,3,cryptocurrency,0.08
+2021-07-21,31696.474095081456,1964.7500690224326,3694.770684114886,15.860266489361752,3,cryptocurrency,0.08
+2021-07-28,34393.62447410727,2227.2640687988037,3650.2837210266825,16.79312390645784,3,cryptocurrency,0.08
+2021-08-04,29103.51592414479,1638.1366062049062,3788.2630583589157,24.8083681463451,3,cryptocurrency,0.08
+2021-08-11,28251.60873862212,1875.881397298962,3719.5989490839456,16.927788304196994,3,cryptocurrency,0.08
+2021-08-18,28793.958579726615,1559.012509053275,3673.710976396624,21.758691467946257,3,cryptocurrency,0.08
+2021-08-25,32108.02792876201,1911.8611155140036,3734.5243292979194,17.10021387537445,3,cryptocurrency,0.08
+2021-09-01,30537.085678583815,1886.1216195368424,3705.526951498243,19.878822002200437,3,cryptocurrency,0.08
+2021-09-08,28454.889748727768,1731.2801627737344,3920.0475786779907,23.54531693261997,3,cryptocurrency,0.08
+2021-09-15,30913.245416623773,1797.0457357663431,3860.8921209782275,19.675495357393075,3,cryptocurrency,0.08
+2021-09-22,29926.007707879482,1776.87565826765,3796.2379031437276,19.566237922373585,3,cryptocurrency,0.08
+2021-09-29,32160.509389379127,1882.0650797985434,3914.444421134657,22.0377622484632,3,cryptocurrency,0.08
+2021-10-06,28242.491216658065,1644.6140860852697,3809.6084508445547,19.355043192915083,4,cryptocurrency,0.08
+2021-10-13,29252.66502367751,1829.7192780633607,3742.1409249964454,21.144945684303774,4,cryptocurrency,0.08
+2021-10-20,29295.169348424068,1789.0866482695117,3928.4721157440968,21.75026472734123,4,cryptocurrency,0.08
+2021-10-27,27103.99644359458,1569.8979289986428,3855.384789046318,20.626189612455846,4,cryptocurrency,0.08
+2021-11-03,31491.393825858206,1974.4725914403768,3739.127203946295,17.97773687935485,4,cryptocurrency,0.08
+2021-11-10,31733.454880294976,1933.2623192591207,3806.441976580606,16.093515535676786,4,cryptocurrency,0.08
+2021-11-17,31451.605228954264,1963.7937691391387,3758.0259998760794,22.950510275082287,4,cryptocurrency,0.08
+2021-11-24,31242.984089380323,1933.5934970341225,3723.46509756765,19.57839720414223,4,cryptocurrency,0.08
+2021-12-01,28808.814115260157,1656.8817573992133,3902.973820926276,20.054100055410867,4,cryptocurrency,0.08
+2021-12-08,31635.702963109135,1844.9770148068376,3984.086635021992,21.274928929114427,4,cryptocurrency,0.08
+2021-12-15,32299.9210372847,2010.4078355485296,3732.4054686191403,17.47139968534234,4,cryptocurrency,0.08
+2021-12-22,31601.12556563028,1953.9326961362867,3885.2533046447884,16.212057039618912,4,cryptocurrency,0.08
+2021-12-29,33768.918456527244,2024.0176347250742,3795.516375329288,14.003151119290978,4,cryptocurrency,0.08
+2022-01-05,35867.67514219597,2164.6852899411683,3811.3952718842224,20.61211647641972,1,cryptocurrency,0.08
+2022-01-12,40988.85716666293,2616.441501760769,3806.821111731804,13.489436395875405,1,cryptocurrency,0.08
+2022-01-19,36267.267181339346,2111.6719980331254,3789.6250117167424,27.712075534311328,1,cryptocurrency,0.08
+2022-01-26,37024.51697055983,2282.2390670546265,3862.914086217464,13.340917574183203,1,cryptocurrency,0.08
+2022-02-02,36538.62215412049,2170.1538064583647,3798.996416730866,25.35357853833996,1,cryptocurrency,0.08
+2022-02-09,31923.57244191805,1894.5668615336788,3887.124155009718,23.333555550303466,1,cryptocurrency,0.08
+2022-02-16,37572.753865369,2378.2174485601786,3865.767411312396,16.45117123323082,1,cryptocurrency,0.08
+2022-02-23,38232.31385496564,2388.611562044529,3854.6898129894194,18.017204459965964,1,cryptocurrency,0.08
+2022-03-02,46767.303426291925,2920.175161538678,3806.928707475578,17.16734347192859,1,cryptocurrency,0.08
+2022-03-09,38118.78346280513,2436.4167996638985,3835.666139647011,23.976638874749625,1,cryptocurrency,0.08
+2022-03-16,39918.00448484336,2397.5955634240877,3942.7990643943663,22.38749969764701,1,cryptocurrency,0.08
+2022-03-23,39060.76515272677,2423.5587237344766,3926.333094042546,20.776861904366626,1,cryptocurrency,0.08
+2022-03-30,35807.071468510316,2115.0950563276847,3815.38283382436,22.190367553706906,1,cryptocurrency,0.08
+2022-04-06,43178.877629286595,2632.7240755540874,3901.976747055267,15.165042744209332,2,cryptocurrency,0.08
+2022-04-13,41884.61681554112,2496.7240330422837,3956.773426744956,20.437819385568318,2,cryptocurrency,0.08
+2022-04-20,41991.57698212666,2531.713659520441,3773.1778462767215,20.872396685649736,2,cryptocurrency,0.08
+2022-04-27,36579.74060080865,2260.0965048702124,3947.480031133101,17.62898479149729,2,cryptocurrency,0.08
+2022-05-04,43870.27362393204,2524.529721661283,3856.894215065556,12.320595720494955,2,cryptocurrency,0.08
+2022-05-11,34898.12441308101,2312.948639186517,3956.782611838077,26.805869607940956,2,cryptocurrency,0.08
+2022-05-18,40690.962041639854,2318.650277246888,3856.108789460258,17.441137936158686,2,cryptocurrency,0.08
+2022-05-25,45961.457816231654,2590.269832851123,3780.025112451981,17.01210665520802,2,cryptocurrency,0.08
+2022-06-01,35374.9779821172,2245.403118879778,3796.8887029582174,25.291270562538315,2,cryptocurrency,0.08
+2022-06-08,36304.69486633776,2264.5049096044277,3929.841283893441,20.523898425705124,2,cryptocurrency,0.08
+2022-06-15,37966.68819225969,2349.0885790014686,3950.081900501122,17.485479345539524,2,cryptocurrency,0.08
+2022-06-22,35859.05675116436,2219.139036898003,3862.6754034094106,18.807345515045995,2,cryptocurrency,0.08
+2022-06-29,32680.63005641072,1959.6371066262582,3987.333681886699,22.44380806138589,2,cryptocurrency,0.08
+2022-07-06,36865.71805451943,2112.7093032240205,3811.5084505445443,14.654891270732396,3,cryptocurrency,0.08
+2022-07-13,33379.766102366484,2010.3769814079885,3938.651309386564,23.211401429321604,3,cryptocurrency,0.08
+2022-07-20,37423.833310079186,2169.40403755796,3852.9695089959077,12.605092294280693,3,cryptocurrency,0.08
+2022-07-27,33210.618842200165,2089.7901199081443,3899.8273249052286,25.4762286382321,3,cryptocurrency,0.08
+2022-08-03,40169.1496143069,2392.427466980071,3958.327132343499,17.61320026627405,3,cryptocurrency,0.08
+2022-08-10,33113.913679467296,1904.8284920163494,3890.6248578425475,24.63100383418926,3,cryptocurrency,0.08
+2022-08-17,34169.21714900265,2017.2085211039907,3931.3837203388885,22.320640782350573,3,cryptocurrency,0.08
+2022-08-24,37253.25105563256,2281.344180742645,4045.9361001537814,23.268142087574617,3,cryptocurrency,0.08
+2022-08-31,31530.53856279513,1838.5086975147674,3923.380969625202,26.378763461121597,3,cryptocurrency,0.08
+2022-09-07,35363.54715231836,2034.5829399544673,4039.455786412542,12.182877430870835,3,cryptocurrency,0.08
+2022-09-14,38531.600298598314,2340.0649926091583,3887.267699034101,14.445326230251219,3,cryptocurrency,0.08
+2022-09-21,30543.349884833464,1855.0472921643927,4022.0883713834796,22.77217845486913,3,cryptocurrency,0.08
+2022-09-28,35332.4679246442,2066.213415028399,4099.811817871814,17.16516654594906,3,cryptocurrency,0.08
+2022-10-05,35679.147527846784,2090.3301160785377,3794.6088464612153,21.357695004920004,4,cryptocurrency,0.08
+2022-10-12,37394.11737145949,2269.6789500683435,3927.412618546112,16.88382881561167,4,cryptocurrency,0.08
+2022-10-19,32028.276356204336,1782.5576449425548,4040.4849122159085,23.658185368660906,4,cryptocurrency,0.08
+2022-10-26,32069.639533721238,1788.7678043201936,3981.532856189237,17.708038704867853,4,cryptocurrency,0.08
+2022-11-02,37508.36291977561,2169.6587754214806,4031.164260797813,15.032363678045469,4,cryptocurrency,0.08
+2022-11-09,37226.83064005505,2209.771955501166,3956.8851367018497,15.930699994286472,4,cryptocurrency,0.08
+2022-11-16,37519.63116019342,2286.1732811700576,4015.545309383758,17.073609490888693,4,cryptocurrency,0.08
+2022-11-23,38285.130716672014,2466.5604598590257,3999.7519166554866,15.54100027795226,4,cryptocurrency,0.08
+2022-11-30,35740.80335461757,2236.4085330912303,4110.75227448804,18.44775227387629,4,cryptocurrency,0.08
+2022-12-07,38989.8815331838,2320.6849389834306,4039.9945588804717,21.420741842300174,4,cryptocurrency,0.08
+2022-12-14,39754.04767998764,2382.97494709229,4050.383241404908,16.76361333863624,4,cryptocurrency,0.08
+2022-12-21,37226.12228543324,2121.60649495776,3993.733206533564,29.211164945030106,4,cryptocurrency,0.08
+2022-12-28,46455.25283018938,2784.7350725717442,3991.297522521137,17.050377347920552,4,cryptocurrency,0.08
+2023-01-04,42190.83261104371,2494.913711713389,3999.3100349946726,22.480240047409048,1,cryptocurrency,0.08
+2023-01-11,37482.907200156,2285.2637215561213,4069.689001826353,19.79128545283728,1,cryptocurrency,0.08
+2023-01-18,44091.08409022052,2536.0445181306372,4007.4790362403573,18.853478315840967,1,cryptocurrency,0.08
+2023-01-25,39243.49385199845,2415.752546335947,4068.5313380233747,20.60252488992436,1,cryptocurrency,0.08
+2023-02-01,45790.47973747915,2957.98333466482,4220.270076504716,17.28021874867197,1,cryptocurrency,0.08
+2023-02-08,47766.18431662727,2850.385887105154,4123.565187233285,26.835418723825512,1,cryptocurrency,0.08
+2023-02-15,41244.987929101466,2524.405061132936,4029.650645670326,22.647587249202342,1,cryptocurrency,0.08
+2023-02-22,48072.806490255876,2983.8998651071756,4158.394055888616,20.38407871972057,1,cryptocurrency,0.08
+2023-03-01,46429.32847581239,2729.8745173075195,4030.327717739666,18.586177221258055,1,cryptocurrency,0.08
+2023-03-08,48358.63378897072,2934.0284461264373,3904.583937656943,19.080765814014242,1,cryptocurrency,0.08
+2023-03-15,53049.7967182445,3184.9918759996767,3989.4625343534726,23.46067673363244,1,cryptocurrency,0.08
+2023-03-22,44927.42123723386,2708.81027990697,3924.766774933595,21.442752963605894,1,cryptocurrency,0.08
+2023-03-29,43298.7891499508,2497.5161860710273,4049.514593272919,26.175818792016596,1,cryptocurrency,0.08
+2023-04-05,42929.03364549397,2578.898613015895,4083.278339279021,22.294781775061505,2,cryptocurrency,0.08
+2023-04-12,43219.12360159469,2657.7165652038416,4224.771098936856,18.17790564666737,2,cryptocurrency,0.08
+2023-04-19,45823.739072909324,2948.91482249732,4115.990069940061,20.726839138228016,2,cryptocurrency,0.08
+2023-04-26,47291.076756569324,2973.5594561943585,4074.969940004037,22.287276380637685,2,cryptocurrency,0.08
+2023-05-03,46896.0097080977,3116.687578778165,4165.0905446422175,22.03321057941163,2,cryptocurrency,0.08
+2023-05-10,48790.701445953666,2815.123809218767,3922.902131684889,14.497182648706442,2,cryptocurrency,0.08
+2023-05-17,45462.21349900388,2846.7056910187803,4123.3718529541475,19.231753316301297,2,cryptocurrency,0.08
+2023-05-24,50685.17023032277,3068.988376133018,4171.521239353436,17.08240691238004,2,cryptocurrency,0.08
+2023-05-31,43853.69643369284,2919.314645270384,3991.6164281716315,22.67218681116937,2,cryptocurrency,0.08
+2023-06-07,55237.84627972959,3180.3248074799244,4210.357652181416,17.2462297553927,2,cryptocurrency,0.08
+2023-06-14,46320.02379424796,2662.5136205237877,4146.841528461757,24.054582850891407,2,cryptocurrency,0.08
+2023-06-21,40775.6680259438,2373.218174973175,4088.49038615819,18.543743231086527,2,cryptocurrency,0.08
+2023-06-28,39723.70622523013,2130.3153440972924,4178.8735367213485,21.663341312622588,2,cryptocurrency,0.08
+2023-07-05,44575.24874179844,2604.2079419018974,4321.940381696047,19.527145227537545,3,cryptocurrency,0.08
+2023-07-12,41755.91445933306,2410.260032122617,4148.855256568576,22.98612412523035,3,cryptocurrency,0.08
+2023-07-19,44626.34235425178,2697.715115064825,4158.1242187900325,21.912677867567428,3,cryptocurrency,0.08
+2023-07-26,43426.35599298282,2650.1050095794535,4103.4043421575825,23.04692211734117,3,cryptocurrency,0.08
+2023-08-02,41266.95805482842,2708.289073266548,4075.1673353907113,22.397628339091057,3,cryptocurrency,0.08
+2023-08-09,38538.36476193887,2422.1852273797003,4218.248253586754,21.157660869764115,3,cryptocurrency,0.08
+2023-08-16,36331.53941007187,2117.012970899773,4082.0367441205412,16.196477482362862,3,cryptocurrency,0.08
+2023-08-23,39398.21708859542,2257.70521654364,4162.2408275738035,19.66816774911505,3,cryptocurrency,0.08
+2023-08-30,43585.36909547549,2679.443581694284,4120.496388112377,18.603043879245966,3,cryptocurrency,0.08
+2023-09-06,41322.04655757604,2315.6585793124673,4203.89260474396,21.881243518422067,3,cryptocurrency,0.08
+2023-09-13,36746.09966887536,2406.66287918108,4195.485536436112,18.517035951030163,3,cryptocurrency,0.08
+2023-09-20,41197.76612597018,2617.6368623173958,4258.815859191232,14.469791457280458,3,cryptocurrency,0.08
+2023-09-27,41998.79442643807,2460.8132302983777,4132.75622026881,22.774320978060665,3,cryptocurrency,0.08
+2023-10-04,38086.1658989793,2089.429776292083,4156.410752429306,21.837130484576388,4,cryptocurrency,0.08
+2023-10-11,41597.892330332936,2664.828251568611,4101.60618302818,20.28053440380154,4,cryptocurrency,0.08
+2023-10-18,41554.91571380742,2479.01586198241,4149.436660956926,20.105628691371656,4,cryptocurrency,0.08
+2023-10-25,38049.67711549035,2424.2761599260525,4222.000122143037,21.851732902927736,4,cryptocurrency,0.08

data/sample_data_definition.json

@@ -0,0 +1,9 @@
+{
+  "btc_price": "target",
+  "eth_price": "dynamic_numerical",
+  "sp500_price": "dynamic_numerical",
+  "vix_index": "dynamic_numerical",
+  "quarter": "dynamic_categorical",
+  "asset_category": "static_categorical",
+  "base_volatility": "static_numerical"
+}

docker-compose.yml

@@ -0,0 +1,42 @@
+# Sapheneia TimesFM - Docker Compose for Local Testing
+# This file allows you to test the Docker setup locally before deploying to HF Spaces
+#
+# Usage:
+#   docker-compose up --build    # Build and start the container
+#   docker-compose down          # Stop and remove the container
+#   docker-compose logs -f       # View logs
+
+version: '3.8'
+
+services:
+  sapheneia:
+    build:
+      context: .
+      dockerfile: Dockerfile
+    container_name: sapheneia-timesfm
+    ports:
+      - "7860:7860"  # Map host port 7860 to container port 7860
+    environment:
+      - FLASK_ENV=development
+      - SECRET_KEY=dev-secret-key-change-in-production
+      - HF_HOME=/app/.cache
+      - TRANSFORMERS_CACHE=/app/.cache
+      - HF_HUB_CACHE=/app/.cache
+    volumes:
+      # Mount volumes for development (optional - comment out for production-like testing)
+      - ./webapp/uploads:/app/webapp/uploads
+      - ./webapp/results:/app/webapp/results
+      - ./logs:/app/logs
+      # Persistent model cache for faster restarts
+      - model-cache:/app/.cache
+    restart: unless-stopped
+    healthcheck:
+      test: ["CMD", "curl", "-f", "http://localhost:7860/"]
+      interval: 30s
+      timeout: 10s
+      retries: 3
+      start_period: 60s
+
+volumes:
+  model-cache:
+    driver: local

pyproject.toml

@@ -0,0 +1,14 @@
+[project]
+name = "sapheneia"
+version = "0.1.0"
+description = "Add your description here"
+readme = "README.md"
+requires-python = ">=3.11"
+dependencies = [
+    "jax>=0.7.0",
+    "jaxlib>=0.7.0",
+    "jupyter>=1.1.1",
+    "matplotlib>=3.10.5",
+    "seaborn>=0.13.2",
+    "timesfm>=1.3.0",
+]

src/__init__.py

@@ -0,0 +1,28 @@
+"""
+Sapheneia TimesFM Library
+
+A comprehensive TimesFM (Google's Time Series Foundation Model) implementation 
+for financial forecasting and time series analysis with covariates support.
+
+This package provides:
+- Model initialization and configuration
+- Data processing and validation
+- Forecasting with optional covariates
+- Professional visualization
+- Quantile forecasting capabilities
+"""
+
+__version__ = "1.0.0"
+__author__ = "Sapheneia Research Team"
+
+from .model import TimesFMModel
+from .data import DataProcessor
+from .forecast import Forecaster
+from .visualization import Visualizer
+
+__all__ = [
+    "TimesFMModel",
+    "DataProcessor", 
+    "Forecaster",
+    "Visualizer"
+]

src/data.py

@@ -0,0 +1,605 @@
+"""
+Data Processing and Validation Module
+
+This module provides comprehensive data processing capabilities for TimesFM,
+including CSV loading, covariate preparation, and data validation.
+
+Key Features:
+- CSV data loading with flexible column configuration
+- Automatic data type inference and conversion
+- Covariates data preparation and validation
+- Data structure formatting for TimesFM input requirements
+- Support for dynamic and static, numerical and categorical covariates
+"""
+
+import pandas as pd
+import numpy as np
+import json
+import logging
+from typing import Dict, List, Union, Optional, Tuple, Any
+from datetime import datetime, timedelta
+
+logger = logging.getLogger(__name__)
+
+
+class DataProcessor:
+    """
+    Handles data loading, processing, and validation for TimesFM forecasting.
+    
+    This class provides methods to load CSV data, process covariates according
+    to TimesFM requirements, and validate data structures before forecasting.
+    
+    Example:
+        >>> processor = DataProcessor()
+        >>> data = processor.load_csv_data("data.csv", data_definition)
+        >>> inputs, covariates = processor.prepare_forecast_data(
+        ...     data, context_len=100, horizon_len=24
+        ... )
+    """
+    
+    def __init__(self):
+        """Initialize the DataProcessor."""
+        self.data = None
+        self.data_definition = None
+        self.processed_data = None
+        
+    def load_csv_data(
+        self, 
+        csv_file_path: str, 
+        data_definition: Union[str, Dict[str, str]]
+    ) -> pd.DataFrame:
+        """
+        Load CSV data with proper column type conversion based on data definition.
+        
+        Args:
+            csv_file_path: Path to the CSV file
+            data_definition: Either JSON file path or dictionary defining column types
+            
+        Returns:
+            Loaded and processed DataFrame
+            
+        Raises:
+            FileNotFoundError: If CSV or JSON file not found
+            ValueError: If data definition is invalid
+        """
+        logger.info(f"Loading CSV data from: {csv_file_path}")
+        
+        # Load data definition
+        if isinstance(data_definition, str):
+            with open(data_definition, 'r') as f:
+                self.data_definition = json.load(f)
+        else:
+            self.data_definition = data_definition.copy()
+        
+        logger.info(f"Data definition: {self.data_definition}")
+        
+        # Load CSV
+        try:
+            self.data = pd.read_csv(csv_file_path).dropna(axis=0)
+            logger.info(f"Loaded CSV with shape: {self.data.shape}")
+            logger.info(f"Columns: {list(self.data.columns)}")
+        except FileNotFoundError:
+            raise FileNotFoundError(f"CSV file not found: {csv_file_path}")
+        
+        # Validate that 'date' column exists
+        if 'date' not in self.data.columns:
+            raise ValueError("CSV file must contain a 'date' column as the first column")
+        
+        # Convert date column
+        self.data['date'] = pd.to_datetime(self.data['date'])
+        logger.info(f"Date range: {self.data['date'].min()} to {self.data['date'].max()}")
+        
+        # Apply data type conversions based on definition
+        self._apply_data_types()
+        
+        # Validate data definition
+        self._validate_data_definition()
+        
+        logger.info("✅ CSV data loaded and processed successfully")
+        return self.data.copy()
+    
+    def _apply_data_types(self) -> None:
+        """Apply appropriate data types based on the data definition."""
+        logger.info("Applying data type conversions...")
+        
+        for column, data_type in self.data_definition.items():
+            if column not in self.data.columns:
+                logger.warning(f"Column '{column}' in data definition not found in CSV")
+                continue
+            
+            try:
+                if data_type in ['target', 'dynamic_numerical', 'static_numerical']:
+                    # Convert to float
+                    self.data[column] = pd.to_numeric(self.data[column], errors='coerce')
+                    logger.info(f"Converted '{column}' to numerical (float)")
+                    
+                elif data_type in ['dynamic_categorical', 'static_categorical']:
+                    # Convert to string
+                    self.data[column] = self.data[column].astype(str)
+                    logger.info(f"Converted '{column}' to categorical (string)")
+                    
+                else:
+                    logger.warning(f"Unknown data type '{data_type}' for column '{column}'")
+                    
+            except Exception as e:
+                logger.error(f"Failed to convert column '{column}': {str(e)}")
+                raise
+    
+    def _validate_data_definition(self) -> None:
+        """Validate the data definition against the loaded data."""
+        logger.info("Validating data definition...")
+        
+        # Check for required data types
+        target_columns = [col for col, dtype in self.data_definition.items() if dtype == 'target']
+        if not target_columns:
+            raise ValueError("Data definition must contain at least one 'target' column")
+        
+        if len(target_columns) > 1:
+            logger.warning(f"Multiple target columns found: {target_columns}. Using first one for univariate forecasting.")
+        
+        # Validate column existence
+        missing_columns = set(self.data_definition.keys()) - set(self.data.columns)
+        if missing_columns:
+            raise ValueError(f"Columns defined in data_definition but missing from CSV: {missing_columns}")
+        
+        # Check for data quality issues
+        for column in target_columns:
+            if self.data[column].isnull().any():
+                null_count = self.data[column].isnull().sum()
+                logger.warning(f"Target column '{column}' has {null_count} null values")
+        
+        logger.info("✅ Data definition validation passed")
+    
+    def prepare_forecast_data(
+        self,
+        data: pd.DataFrame,
+        context_len: int,
+        horizon_len: int,
+        target_column: Optional[str] = None
+    ) -> Tuple[List[float], Dict[str, Any]]:
+        """
+        Prepare data for TimesFM forecasting with covariates.
+        
+        Args:
+            data: Input DataFrame
+            context_len: Length of context window for forecasting
+            horizon_len: Length of forecast horizon
+            target_column: Target column name (auto-detected if None)
+            
+        Returns:
+            Tuple of (target_inputs, covariates_dict)
+            
+        Raises:
+            ValueError: If insufficient data or invalid configuration
+        """
+        logger.info(f"Preparing forecast data (context: {context_len}, horizon: {horizon_len})")
+        
+        # Auto-detect target column if not specified
+        if target_column is None:
+            target_columns = [col for col, dtype in self.data_definition.items() if dtype == 'target']
+            if not target_columns:
+                raise ValueError("No target column found in data definition")
+            target_column = target_columns[0]
+            logger.info(f"Using target column: {target_column}")
+        
+        # Validate data length - only need context_len for the data
+        if len(data) < context_len:
+            raise ValueError(f"Insufficient data: need {context_len} points, have {len(data)}")
+        
+        # Prepare target inputs using the most recent context window
+        target_series = data[target_column].values
+        context_start = max(0, len(data) - context_len)
+        context_end = len(data)  # Use last context_len periods
+        target_inputs = target_series[context_start:context_end].tolist()
+        
+        logger.info(f"Target data preparation:")
+        logger.info(f"  - Target column: {target_column}")
+        logger.info(f"  - Context start index: {context_start}")
+        logger.info(f"  - Context end index: {context_end}")
+        logger.info(f"  - Target inputs length: {len(target_inputs)}")
+        logger.info(f"  - Target range: {min(target_inputs):.2f} - {max(target_inputs):.2f}")
+        
+        # Prepare covariates
+        covariates = self._prepare_covariates(data, context_len, horizon_len)
+        
+        logger.info(f"✅ Prepared forecast data:")
+        logger.info(f"  Target inputs length: {len(target_inputs)}")
+        logger.info(f"  Target range: {min(target_inputs):.2f} - {max(target_inputs):.2f}")
+        logger.info(f"  Covariates: {list(covariates.keys())}")
+        
+        return target_inputs, covariates
+    
+    def _prepare_covariates(
+        self, 
+        data: pd.DataFrame, 
+        context_len: int, 
+        horizon_len: int
+    ) -> Dict[str, Dict[str, List]]:
+        """
+        Prepare covariates data structure for TimesFM.
+        
+        Args:
+            data: Input DataFrame
+            context_len: Context window length
+            horizon_len: Forecast horizon length
+            
+        Returns:
+            Dictionary containing organized covariates
+        """
+        covariates = {
+            'dynamic_numerical_covariates': {},
+            'dynamic_categorical_covariates': {},
+            'static_numerical_covariates': {},
+            'static_categorical_covariates': {}
+        }
+        
+        # For dynamic covariates, we need context_len + horizon_len total periods
+        # Context period: last context_len periods of available data
+        # Horizon period: horizon_len periods (padded with last known values)
+        total_len = context_len + horizon_len
+        
+        logger.info(f"Covariate preparation debug:")
+        logger.info(f"  - Data length: {len(data)}")
+        logger.info(f"  - Context length: {context_len}")
+        logger.info(f"  - Horizon length: {horizon_len}")
+        logger.info(f"  - Total periods needed: {total_len}")
+        logger.info(f"  - Data date range: {data['date'].min()} to {data['date'].max()}")
+        logger.info(f"  - Context period: last {context_len} periods of data")
+        logger.info(f"  - Horizon period: {horizon_len} periods (padded with last known values)")
+
+        for column, data_type in self.data_definition.items():
+            if column == 'date' or data_type == 'target':
+                continue
+            
+            if data_type == 'dynamic_numerical':
+                # Dynamic numerical: need context + horizon values
+                # Context: last context_len periods of available data
+                # Horizon: horizon_len periods (padded with last known value)
+                
+                if len(data) < context_len:
+                    logger.warning(f"Insufficient data for dynamic covariate '{column}': need {context_len} for context, have {len(data)}")
+                    continue
+                
+                # Get context values (last context_len periods)
+                context_values = data[column].iloc[-context_len:].tolist()
+                
+                # Get horizon values (pad with last known value)
+                last_value = context_values[-1]
+                horizon_values = [last_value] * horizon_len
+                
+                # Combine context + horizon
+                values = context_values + horizon_values
+                
+                covariates['dynamic_numerical_covariates'][column] = [values]
+                logger.info(f"Added dynamic numerical covariate '{column}': {len(values)} values")
+                logger.info(f"  - Context period: {len(context_values)} values (last {context_len} periods)")
+                logger.info(f"  - Horizon period: {len(horizon_values)} values (padded with {last_value})")
+                
+            elif data_type == 'dynamic_categorical':
+                # Dynamic categorical: need context + horizon values
+                # Context: last context_len periods of available data
+                # Horizon: horizon_len periods (padded with last known value)
+                
+                if len(data) < context_len:
+                    logger.warning(f"Insufficient data for dynamic covariate '{column}': need {context_len} for context, have {len(data)}")
+                    continue
+                
+                # Get context values (last context_len periods)
+                context_values = data[column].astype(str).iloc[-context_len:].tolist()
+                
+                # Get horizon values (pad with last known value)
+                last_value = context_values[-1]
+                horizon_values = [last_value] * horizon_len
+                
+                # Combine context + horizon
+                values = context_values + horizon_values
+                
+                covariates['dynamic_categorical_covariates'][column] = [values]
+                logger.info(f"Added dynamic categorical covariate '{column}': {len(values)} values")
+                logger.info(f"  - Context period: {len(context_values)} values (last {context_len} periods)")
+                logger.info(f"  - Horizon period: {len(horizon_values)} values (padded with '{last_value}')")
+                
+            elif data_type == 'static_numerical':
+                # Static numerical: single value per time series
+                value = float(data[column].iloc[0])
+                covariates['static_numerical_covariates'][column] = [value]
+                logger.info(f"Added static numerical covariate '{column}': {value}")
+                
+            elif data_type == 'static_categorical':
+                # Static categorical: single value per time series
+                value = str(data[column].iloc[0])
+                covariates['static_categorical_covariates'][column] = [value]
+                logger.info(f"Added static categorical covariate '{column}': {value}")
+        
+        # Remove empty covariate types
+        covariates = {k: v for k, v in covariates.items() if v}
+        
+        return covariates
+    
+    def get_data_summary(self) -> Dict[str, Any]:
+        """
+        Get a summary of the loaded data.
+        
+        Returns:
+            Dictionary containing data summary statistics
+        """
+        if self.data is None:
+            return {"status": "No data loaded"}
+        
+        summary = {
+            "status": "loaded",
+            "shape": self.data.shape,
+            "date_range": {
+                "start": str(self.data['date'].min().date()),
+                "end": str(self.data['date'].max().date()),
+                "total_periods": len(self.data)
+            },
+            "columns": list(self.data.columns),
+            "data_definition": self.data_definition
+        }
+        
+        # Add column-specific statistics
+        column_stats = {}
+        for column in self.data.columns:
+            if column == 'date':
+                continue
+                
+            col_data = self.data[column]
+            data_type = self.data_definition.get(column, 'unknown')
+            
+            if data_type in ['target', 'dynamic_numerical', 'static_numerical']:
+                column_stats[column] = {
+                    "type": data_type,
+                    "dtype": str(col_data.dtype),
+                    "min": float(col_data.min()) if not col_data.isnull().all() else None,
+                    "max": float(col_data.max()) if not col_data.isnull().all() else None,
+                    "mean": float(col_data.mean()) if not col_data.isnull().all() else None,
+                    "null_count": int(col_data.isnull().sum())
+                }
+            else:
+                column_stats[column] = {
+                    "type": data_type,
+                    "dtype": str(col_data.dtype),
+                    "unique_values": int(col_data.nunique()),
+                    "null_count": int(col_data.isnull().sum()),
+                    "sample_values": col_data.dropna().unique()[:5].tolist()
+                }
+        
+        summary["column_statistics"] = column_stats
+        return summary
+    
+    def validate_forecast_inputs(
+        self, 
+        inputs: List[float], 
+        covariates: Dict[str, Any], 
+        context_len: int, 
+        horizon_len: int
+    ) -> bool:
+        """
+        Validate that forecast inputs are properly formatted for TimesFM.
+        
+        Args:
+            inputs: Target time series inputs
+            covariates: Covariates dictionary
+            context_len: Expected context length
+            horizon_len: Expected horizon length
+            
+        Returns:
+            True if validation passes
+            
+        Raises:
+            ValueError: If validation fails
+        """
+        logger.info("Validating forecast inputs...")
+        
+        # Validate inputs length
+        if len(inputs) != context_len:
+            raise ValueError(f"Input length {len(inputs)} doesn't match context_len {context_len}")
+        
+        # Validate inputs are numeric
+        if not all(isinstance(x, (int, float)) and not np.isnan(x) for x in inputs):
+            raise ValueError("All inputs must be numeric and non-NaN")
+        
+        # Validate covariates structure
+        total_len = context_len + horizon_len
+        
+        for cov_type, cov_dict in covariates.items():
+            if cov_type in ['dynamic_numerical_covariates', 'dynamic_categorical_covariates']:
+                for name, values_list in cov_dict.items():
+                    if len(values_list) != 1:
+                        raise ValueError(f"Dynamic covariate '{name}' must have exactly 1 time series")
+                    if len(values_list[0]) != total_len:
+                        raise ValueError(f"Dynamic covariate '{name}' must have {total_len} values, got {len(values_list[0])}")
+            
+            elif cov_type in ['static_numerical_covariates', 'static_categorical_covariates']:
+                for name, values_list in cov_dict.items():
+                    if len(values_list) != 1:
+                        raise ValueError(f"Static covariate '{name}' must have exactly 1 value")
+        
+        logger.info("✅ Forecast inputs validation passed")
+        return True
+    
+    def create_sample_data_definition(self, output_path: str) -> None:
+        """
+        Create a sample data definition JSON file.
+        
+        Args:
+            output_path: Path where to save the sample JSON file
+        """
+        sample_definition = {
+            "btc_price": "target",
+            "eth_price": "dynamic_numerical", 
+            "vix_index": "dynamic_numerical",
+            "sp500_price": "dynamic_numerical",
+            "quarter": "dynamic_categorical",
+            "asset_category": "static_categorical",
+            "base_price": "static_numerical"
+        }
+        
+        with open(output_path, 'w') as f:
+            json.dump(sample_definition, f, indent=2)
+        
+        logger.info(f"Sample data definition saved to: {output_path}")
+        print(f"Sample data definition structure:")
+        print(json.dumps(sample_definition, indent=2))
+
+
+def prepare_visualization_data(
+    processed_data: pd.DataFrame,
+    target_inputs: Union[List[float], List[List[float]]],
+    target_column: str,
+    context_len: int,
+    horizon_len: int,
+    extended_data: Optional[pd.DataFrame] = None
+) -> Dict[str, Any]:
+    """
+    Centralized function to prepare visualization data from processed data.
+    
+    This function creates the visualization data structure used by both
+    the webapp and notebook for consistent data handling.
+    
+    Args:
+        processed_data: Processed DataFrame with date column
+        target_inputs: Target input data used for forecasting (flattenable to a single series)
+        target_column: Name of the target column
+        context_len: Context length used for forecasting
+        horizon_len: Horizon length for forecasting
+        
+    Returns:
+        Dictionary containing visualization data with keys:
+        - 'historical_data': Context window used for forecasting (chronologically ordered)
+        - 'dates_historical': Corresponding historical dates
+        - 'dates_future': Future dates aligned with the forecast horizon
+        - 'target_name': Name of the target column
+        - 'actual_future': Optional actual values for the forecast horizon (if available)
+    """
+
+    if processed_data.empty:
+        return {
+            'historical_data': [],
+            'dates_historical': [],
+            'dates_future': [],
+            'target_name': target_column,
+            'actual_future': []
+        }
+
+    # Work on a chronologically sorted copy to ensure alignment
+    df = processed_data.dropna(axis=0).sort_values('date').reset_index(drop=True)
+
+    # Flatten target inputs (they may arrive as List[List[float]] or List[float])
+    if isinstance(target_inputs, (list, tuple)) and target_inputs:
+        if isinstance(target_inputs[0], (list, tuple, np.ndarray)):
+            target_inputs_flat = list(target_inputs[0])
+        else:
+            target_inputs_flat = list(target_inputs)
+    else:
+        target_inputs_flat = []
+
+    # Respect the actual context length used
+    context_len_effective = len(target_inputs_flat) or context_len
+    available_len = len(df)
+
+    # Use target_inputs as historical data to ensure exact alignment with forecasting
+    # This guarantees that the historical data in visualization matches what was used for forecasting
+    if target_inputs_flat:
+        historical_slice = list(map(float, target_inputs_flat))
+        
+        # For dates, we need to find the corresponding dates for the target_inputs
+        # Since target_inputs represents the last context_len periods used for forecasting,
+        # we need to find the dates that correspond to those exact data points
+        if len(df) >= context_len_effective:
+            # Get the dates for the last context_len periods (same as target_inputs)
+            dates_historical = df['date'].iloc[-context_len_effective:].tolist()
+        else:
+            # If we don't have enough data, use what we have
+            dates_historical = df['date'].tolist()
+            
+        logger.info(f"Using target_inputs for historical data to ensure forecasting alignment")
+    else:
+        # Fallback to data-based extraction if target_inputs not available
+        if len(df) >= context_len_effective:
+            historical_slice = df[target_column].iloc[-context_len_effective:].astype(float).tolist()
+            dates_historical = df['date'].iloc[-context_len_effective:].tolist()
+        else:
+            historical_slice = df[target_column].astype(float).tolist()
+            dates_historical = df['date'].tolist()
+            
+        logger.info(f"Using data-based extraction for historical data")
+    
+    logger.info(f"Visualization data preparation:")
+    logger.info(f"  - Processed data shape: {df.shape}")
+    logger.info(f"  - Target column: {target_column}")
+    logger.info(f"  - Context length effective: {context_len_effective}")
+    logger.info(f"  - Historical slice length: {len(historical_slice)}")
+    logger.info(f"  - Target inputs flat length: {len(target_inputs_flat)}")
+    logger.info(f"  - Dates historical length: {len(dates_historical)}")
+    logger.info(f"  - Historical data range: {min(historical_slice) if historical_slice else 'N/A'} to {max(historical_slice) if historical_slice else 'N/A'}")
+    if dates_historical:
+        logger.info(f"  - First historical date: {dates_historical[0]}")
+        logger.info(f"  - Last historical date: {dates_historical[-1]}")
+
+    # For future dates, we need to generate them since we only have context data
+    # Extract actual future values when present (useful for overlaying actuals)
+    # The actual future values should start from the day after the last historical date
+    # Use extended_data if available (includes horizon period), otherwise use df
+    data_for_future_extraction = extended_data if extended_data is not None else df
+    
+    if len(data_for_future_extraction) > context_len_effective and dates_historical:
+        # Find the last historical date (this is the context end date)
+        last_historical_date = dates_historical[-1]
+        
+        # Find data points that come after the last historical date
+        future_mask = data_for_future_extraction['date'] > last_historical_date
+        future_data = data_for_future_extraction[future_mask]
+        
+        if len(future_data) > 0:
+            # Take only the first horizon_len periods of future data
+            future_slice = future_data[target_column].iloc[:horizon_len].astype(float).tolist()
+            dates_future = future_data['date'].iloc[:horizon_len].tolist()
+            
+            logger.info(f"Actual future values extracted:")
+            logger.info(f"  - Data for extraction length: {len(data_for_future_extraction)}")
+            logger.info(f"  - Context length effective: {context_len_effective}")
+            logger.info(f"  - Last historical date (context end): {last_historical_date}")
+            logger.info(f"  - Future data available: {len(future_data)} periods")
+            logger.info(f"  - Future slice length: {len(future_slice)}")
+            logger.info(f"  - Future dates length: {len(dates_future)}")
+            if future_slice and dates_future:
+                logger.info(f"  - Future values range: {min(future_slice):.4f} to {max(future_slice):.4f}")
+                logger.info(f"  - First future date: {dates_future[0]}")
+                logger.info(f"  - Last future date: {dates_future[-1]}")
+        else:
+            future_slice = []
+            dates_future = []
+            logger.info("No actual future values available - no data after last historical date")
+    else:
+        # No actual future values available
+        future_slice = []
+        dates_future = []
+        logger.info("No actual future values available - data doesn't extend beyond context period")
+
+    if len(dates_future) < horizon_len:
+        # Generate future dates if the dataset stops at the forecast boundary
+        inferred_delta: Optional[pd.Timedelta] = None
+        if len(dates_historical) >= 2:
+            inferred_delta = dates_historical[-1] - dates_historical[-2]
+        last_date = dates_historical[-1]
+        if hasattr(last_date, 'to_pydatetime'):
+            last_date = last_date.to_pydatetime()
+        elif isinstance(last_date, np.datetime64):
+            last_date = pd.to_datetime(last_date).to_pydatetime()
+
+        step = inferred_delta if isinstance(inferred_delta, pd.Timedelta) and inferred_delta != pd.Timedelta(0) else timedelta(days=1)
+        dates_future = [last_date + step * (i + 1) for i in range(horizon_len)]
+        future_slice = []  # No actual future data in this case
+
+    visualization_data = {
+        'historical_data': historical_slice,
+        'dates_historical': [d.isoformat() if hasattr(d, 'isoformat') else str(d) for d in dates_historical],
+        'dates_future': [d.isoformat() if hasattr(d, 'isoformat') else str(d) for d in dates_future],
+        'target_name': target_column,
+        'actual_future': future_slice
+    }
+    
+    return visualization_data
+    

src/forecast.py

@@ -0,0 +1,476 @@
+"""
+TimesFM Forecasting Module
+
+This module provides a simplified and robust interface for TimesFM forecasting,
+handling both basic and covariates-enhanced forecasting with consistent quantile output.
+
+Key Features:
+- Single forecast method with optional covariates
+- Always returns quantiles (never "maybe")
+- Simplified logic: IF covariates -> use covariates, ELSE -> use basic
+- Consistent return format: (point_forecast, quantile_forecast)
+"""
+
+import numpy as np
+import pandas as pd
+import logging
+from typing import List, Dict, Optional, Tuple, Any, Union
+import timesfm
+
+logger = logging.getLogger(__name__)
+
+
+class Forecaster:
+    """
+    Simplified TimesFM Forecaster with consistent quantile output.
+    
+    This class provides a single forecast method that handles both basic and
+    covariates-enhanced forecasting, always returning quantiles.
+    
+    Example:
+        >>> forecaster = Forecaster(model)
+        >>> point_forecast, quantile_forecast = forecaster.forecast(
+        ...     inputs=[1,2,3,4,5], 
+        ...     use_covariates=True,
+        ...     dynamic_numerical_covariates={'feature1': [[1,2,3,4,5]]}
+        ... )
+    """
+    
+    def __init__(self, model: timesfm.TimesFm):
+        """
+        Initialize the Forecaster with a loaded TimesFM model.
+        
+        Args:
+            model: Initialized TimesFM model instance
+        """
+        self.model = model
+        self.capabilities = self._detect_capabilities()
+        logger.info(f"Forecaster initialized with capabilities: {list(self.capabilities.keys())}")
+    
+    def _detect_capabilities(self) -> Dict[str, bool]:
+        """Detect available forecasting capabilities of the model."""
+        return {
+            'basic_forecasting': True,
+            'quantile_forecasting': hasattr(self.model, 'experimental_quantile_forecast'),
+            'covariates_support': hasattr(self.model, 'forecast_with_covariates')
+        }
+    
+    def forecast(
+        self,
+        inputs: Union[List[float], List[List[float]]],
+        freq: Union[int, List[int]] = 0,
+        dynamic_numerical_covariates: Optional[Dict[str, List[List[float]]]] = None,
+        dynamic_categorical_covariates: Optional[Dict[str, List[List[str]]]] = None,
+        static_numerical_covariates: Optional[Dict[str, List[float]]] = None,
+        static_categorical_covariates: Optional[Dict[str, List[str]]] = None,
+        use_covariates: bool = False,
+        xreg_mode: str = "xreg + timesfm",
+        ridge: float = 0.0,
+        normalize_xreg_target_per_input: bool = True
+    ) -> Tuple[np.ndarray, np.ndarray]:
+        """
+        Perform TimesFM forecasting with optional covariates support.
+        
+        This is the main forecasting method that handles both basic and covariates-enhanced
+        forecasting. Quantiles are always returned regardless of covariates usage.
+        
+        Args:
+            inputs: Input time series data
+            freq: Frequency indicator(s)
+            dynamic_numerical_covariates: Dynamic numerical covariates (if use_covariates=True)
+            dynamic_categorical_covariates: Dynamic categorical covariates (if use_covariates=True)
+            static_numerical_covariates: Static numerical covariates (if use_covariates=True)
+            static_categorical_covariates: Static categorical covariates (if use_covariates=True)
+            use_covariates: Whether to use covariates-enhanced forecasting
+            xreg_mode: Covariate integration mode ("xreg + timesfm" or "timesfm + xreg")
+            ridge: Ridge regression parameter for covariates
+            normalize_xreg_target_per_input: Whether to normalize covariates
+            
+        Returns:
+            Tuple of (point_forecast, quantile_forecast) - both are always returned
+            
+        Raises:
+            ValueError: If covariates are requested but not supported
+            Exception: If forecasting fails
+        """
+        logger.info(f"Performing TimesFM forecasting (covariates={use_covariates})...")
+        
+        # Normalize inputs format
+        if isinstance(inputs[0], (int, float)):
+            # inputs is a single list of numbers
+            inputs_norm = [inputs]
+        else:
+            # inputs is already a list of lists
+            inputs_norm = inputs
+            
+        if isinstance(freq, int):
+            freq_norm = [freq] * len(inputs_norm)
+        else:
+            freq_norm = freq
+
+        try:
+            if use_covariates and any([
+                dynamic_numerical_covariates, dynamic_categorical_covariates,
+                static_numerical_covariates, static_categorical_covariates
+            ]):
+                # Validate covariates support
+                if not self.capabilities['covariates_support']:
+                    raise ValueError("Model does not support covariates forecasting")
+                
+                # Validate covariates data structure
+                self._validate_covariates(
+                    inputs_norm, dynamic_numerical_covariates, dynamic_categorical_covariates,
+                    static_numerical_covariates, static_categorical_covariates
+                )
+                
+                logger.info(f"Using covariates-enhanced forecasting (mode: {xreg_mode})...")
+                logger.info(f"Inputs shape: {[len(x) for x in inputs] if isinstance(inputs[0], list) else len(inputs)}")
+                logger.info(f"Inputs type: {type(inputs)}")
+                
+                # Perform covariates forecasting with original mode
+                covariates_result = self.model.forecast_with_covariates(
+                    inputs=inputs_norm,
+                    dynamic_numerical_covariates=dynamic_numerical_covariates or {},
+                    dynamic_categorical_covariates=dynamic_categorical_covariates or {},
+                    static_numerical_covariates=static_numerical_covariates or {},
+                    static_categorical_covariates=static_categorical_covariates or {},
+                    freq=freq_norm,
+                    xreg_mode=xreg_mode,
+                    ridge=ridge,
+                    normalize_xreg_target_per_input=normalize_xreg_target_per_input
+                )
+                
+                # Handle return format from forecast_with_covariates
+                if isinstance(covariates_result, tuple) and len(covariates_result) == 2:
+                    point_forecast, quantile_forecast = covariates_result
+                    point_forecast = np.array(point_forecast)
+                    quantile_forecast = np.array(quantile_forecast)
+                    
+                    logger.info(f"✅ Covariates forecasting completed.")
+                    logger.info(f"  Point forecast shape: {point_forecast.shape}")
+                    logger.info(f"  Quantile forecast shape: {quantile_forecast.shape}")
+                    
+                    # Check if we have proper quantiles (multiple quantiles, not just 1)
+                    if quantile_forecast.ndim == 2 and (quantile_forecast.shape[0] == 1 or quantile_forecast.shape[1] == 1):
+                        logger.warning("⚠️ Covariates forecasting returned insufficient quantiles, falling back to basic forecast for quantiles")
+                        # Get quantiles from basic forecast method
+                        _, quantile_forecast = self.model.forecast(inputs=inputs_norm, freq=freq_norm)
+                        quantile_forecast = np.array(quantile_forecast)
+                        logger.info(f"✅ Basic forecast quantiles obtained. Shape: {quantile_forecast.shape}")
+                    else:
+                        logger.info("✅ Using quantiles from covariates forecasting")
+                else:
+                    # Fallback: If forecast_with_covariates doesn't return quantiles, get them separately
+                    logger.warning("⚠️ Covariates forecasting didn't return quantiles, getting them separately")
+                    point_forecast = np.array(covariates_result)
+                    _, quantile_forecast = self.model.forecast(inputs=inputs_norm, freq=freq_norm)
+                    quantile_forecast = np.array(quantile_forecast)
+            
+            else:
+                logger.info("Using basic forecasting...")
+                
+                # Perform basic forecasting - this should return (point, quantiles)
+                point_forecast, quantile_forecast = self.model.forecast(inputs=inputs_norm, freq=freq_norm)
+                point_forecast = np.array(point_forecast)
+                quantile_forecast = np.array(quantile_forecast)
+                
+                logger.info(f"✅ Basic forecasting completed.")
+            
+            return point_forecast, quantile_forecast
+            
+        except Exception as e:
+            logger.error(f"❌ Forecasting failed: {str(e)}")
+            raise
+    
+    def _validate_covariates(
+        self,
+        inputs: List[List[float]],
+        dynamic_numerical: Optional[Dict],
+        dynamic_categorical: Optional[Dict],
+        static_numerical: Optional[Dict],
+        static_categorical: Optional[Dict]
+    ) -> None:
+        """Validate covariates data structure and compatibility."""
+        logger.info("Validating covariates data structure...")
+        
+        # Check that all covariates have the same number of series as inputs
+        num_series = len(inputs)
+        
+        for cov_type, cov_data in [
+            ("dynamic_numerical", dynamic_numerical),
+            ("dynamic_categorical", dynamic_categorical),
+            ("static_numerical", static_numerical),
+            ("static_categorical", static_categorical)
+        ]:
+            if cov_data:
+                for name, data in cov_data.items():
+                    if isinstance(data[0], (list, np.ndarray)):
+                        # Dynamic covariates
+                        if len(data) != num_series:
+                            raise ValueError(f"Dynamic covariate '{name}' has {len(data)} series, expected {num_series}")
+                    else:
+                        # Static covariates
+                        if len(data) != num_series:
+                            raise ValueError(f"Static covariate '{name}' has {len(data)} values, expected {num_series}")
+        
+        logger.info("✅ Covariates validation passed")
+    
+
+def run_forecast(
+    forecaster: 'Forecaster',
+    target_inputs: List[List[float]],
+    covariates: Optional[Dict[str, Any]] = None,
+    use_covariates: bool = False,
+    freq: Union[int, List[int]] = 0
+) -> Dict[str, Any]:
+    """
+    Centralized forecasting function that handles both basic and covariates-enhanced forecasting.
+    
+    This function implements the logic to decide whether to run forecast_with_covariates
+    or the basic forecast, including fallback mechanisms and proper error handling.
+    
+    Args:
+        forecaster: Initialized Forecaster instance
+        target_inputs: Input time series data
+        covariates: Dictionary containing covariate data (if use_covariates=True)
+        use_covariates: Whether to use covariates-enhanced forecasting
+        freq: Frequency indicator(s)
+        
+    Returns:
+        Dictionary containing forecast results with keys:
+        - 'enhanced_forecast' or 'point_forecast': Main forecast array
+        - 'quantile_forecast': Quantile forecast array (always present)
+        - 'method': String indicating the forecasting method used
+        - 'metadata': Additional forecast metadata
+        
+    Raises:
+        Exception: If forecasting fails
+    """
+    logger.info(f"🚀 Running centralized forecast (covariates={use_covariates})...")
+    
+    try:
+        results = {}
+        
+        if use_covariates and covariates:
+            logger.info("Using covariates-enhanced forecasting...")
+            
+            # Extract covariate data
+            dynamic_numerical = covariates.get('dynamic_numerical_covariates')
+            dynamic_categorical = covariates.get('dynamic_categorical_covariates')
+            static_numerical = covariates.get('static_numerical_covariates')
+            static_categorical = covariates.get('static_categorical_covariates')
+            
+            # Perform covariates forecasting
+            point_forecast, quantile_forecast = forecaster.forecast(
+                inputs=target_inputs,
+                freq=freq,
+                dynamic_numerical_covariates=dynamic_numerical,
+                dynamic_categorical_covariates=dynamic_categorical,
+                static_numerical_covariates=static_numerical,
+                static_categorical_covariates=static_categorical,
+                use_covariates=True
+            )
+            
+            results['point_forecast'] = point_forecast
+            results['method'] = 'covariates_enhanced'
+            
+        else:
+            logger.info("Using basic forecasting...")
+            
+            # Perform basic forecasting
+            point_forecast, quantile_forecast = forecaster.forecast(
+                inputs=target_inputs,
+                freq=freq,
+                use_covariates=False
+            )
+            
+            results['point_forecast'] = point_forecast
+            results['method'] = 'basic_timesfm'
+        
+        # Check for NaN values before returning
+        if np.any(np.isnan(point_forecast)):
+            logger.error(f"❌ NaN values detected in point_forecast: {np.isnan(point_forecast).sum()} out of {point_forecast.size}")
+            logger.error(f"Point forecast values: {point_forecast}")
+            raise ValueError(f"Forecasting produced NaN values in point forecast. This may be due to insufficient data or model issues.")
+        
+        if np.any(np.isnan(quantile_forecast)):
+            logger.error(f"❌ NaN values detected in quantile_forecast: {np.isnan(quantile_forecast).sum()} out of {quantile_forecast.size}")
+            logger.error(f"Quantile forecast shape: {quantile_forecast.shape}")
+            raise ValueError(f"Forecasting produced NaN values in quantile forecast. This may be due to insufficient data or model issues.")
+        
+        # Quantiles are always available
+        results['quantile_forecast'] = quantile_forecast
+        logger.info(f"✅ Quantile forecast obtained. Shape: {quantile_forecast.shape}")
+        
+        # Add metadata
+        results['metadata'] = {
+            'input_series_count': len(target_inputs),
+            'forecast_length': results.get('point_forecast').shape[-1],
+            'covariates_used': use_covariates and covariates is not None,
+            'quantiles_available': True  # Always true now
+        }
+        
+        logger.info(f"✅ Centralized forecast completed successfully!")
+        logger.info(f"   Method: {results['method']}")
+        logger.info(f"   Forecast shape: {results['metadata']['forecast_length']}")
+        logger.info(f"   Quantiles: Yes (shape: {quantile_forecast.shape})")
+        logger.info(f"   Point forecast range: {np.min(point_forecast):.2f} to {np.max(point_forecast):.2f}")
+        
+        return results
+        
+    except Exception as e:
+        logger.error(f"❌ Centralized forecasting failed: {str(e)}")
+        raise
+
+
+def process_quantile_bands(
+    quantile_forecast: np.ndarray,
+    selected_indices: List[int] = None
+) -> Dict[str, Any]:
+    """
+    Centralized function to process quantile forecasts into quantile bands for visualization.
+    
+    This function contains the logic for sorting quantiles and creating the quantile band
+    dictionary, as used in both the webapp and notebook.
+    
+    Args:
+        quantile_forecast: Array of quantile forecasts with shape (horizon, num_quantiles) or (num_quantiles, horizon)
+        selected_indices: List of quantile indices to use for bands (default: [1, 3, 5, 7, 9])
+        
+    Returns:
+        Dictionary of quantile bands ready for visualization with keys:
+        - 'quantile_band_0_lower', 'quantile_band_0_upper', 'quantile_band_0_label'
+        - 'quantile_band_1_lower', 'quantile_band_1_upper', 'quantile_band_1_label'
+        - etc.
+    """
+    logger.info("🔄 Processing quantile bands...")
+    logger.info(f"Input quantile_forecast type: {type(quantile_forecast)}")
+    logger.info(f"Input quantile_forecast shape: {quantile_forecast.shape if hasattr(quantile_forecast, 'shape') else 'N/A'}")
+
+    # logger.info(f"!!!!!!!!!!!!! selected_indices: {selected_indices}")
+    # logger.info(f"!!!!!!!!!!!!! quantile_forecast.shape: {quantile_forecast.shape}")
+    
+    if quantile_forecast is None:
+        logger.warning("No quantile forecast provided")
+        return {}
+    
+    try:
+        # logger.info(f"!!!!!!!!!!!!! selected_indices: {selected_indices}")
+        # logger.info(f"!!!!!!!!!!!!! quantile_forecast.shape: {quantile_forecast.shape}")
+
+        # Handle quantile indices - only use default if explicitly None (not empty list)
+        if selected_indices is None:
+            # This means no quantile selection was made, use default
+            selected_indices = [1, 3, 5, 7, 9]  # Q10, Q30, Q50, Q70, Q90
+        elif selected_indices == []:
+            # This means user explicitly selected no quantiles, return empty
+            logger.info("No quantiles selected by user - returning empty quantile bands")
+            return {}
+        
+        # Handle different array dimensions
+        if quantile_forecast.ndim == 3:
+            # Shape is (1, horizon, num_quantiles) - squeeze out first dimension
+            q_mat = quantile_forecast.squeeze(0)
+            logger.info(f"3D array detected, squeezed to shape: {q_mat.shape}")
+        elif quantile_forecast.ndim == 1:
+            # Shape is (horizon,) - reshape to (1, horizon)
+            q_mat = quantile_forecast.reshape(1, -1)
+            logger.info(f"1D array detected, reshaped to: {q_mat.shape}")
+        else:
+            # Shape is 2D - determine if we need to transpose
+            # For quantiles, we expect (horizon, num_quantiles) format
+            # If we have more horizon than quantiles, it's likely (horizon, num_quantiles) and should be kept as-is
+            if quantile_forecast.shape[0] > quantile_forecast.shape[1]:
+                # Shape is (horizon, num_quantiles) - keep as is
+                q_mat = quantile_forecast
+                logger.info(f"2D array kept as is (horizon, quantiles): {q_mat.shape}")
+            else:
+                # Shape is (num_quantiles, horizon) - transpose to (horizon, num_quantiles)
+                q_mat = quantile_forecast.T
+                logger.info(f"2D array transposed from {quantile_forecast.shape} to {q_mat.shape}")
+        
+        horizon_len, num_quantiles = q_mat.shape
+        logger.info(f"📊 Available quantiles: {num_quantiles} (indices 0-{num_quantiles-1})")
+        logger.info(f"📊 Note: Index 0 is legacy mean forecast, using indices 1-{num_quantiles-1} for actual quantiles")
+        
+        # Check if we have enough quantiles for band creation (need at least 3 total: 0=legacy, 1=Q10, 2=Q20)
+        if num_quantiles < 3:
+            logger.warning(f"Not enough quantiles for band creation. Have {num_quantiles}, need at least 3")
+            return {}
+        
+        # Filter selected indices to valid range (skip index 0)
+        valid_indices = [idx for idx in selected_indices if 1 <= idx < num_quantiles]  # Skip index 0
+        if not valid_indices:
+            logger.warning("No valid quantile indices selected (after skipping legacy index 0)")
+            return {}
+        
+        # logger.info(f"!!!!!!!!!!!!! valid_indices: {valid_indices}")
+        
+        # Sort quantiles by their median magnitude to ensure proper ordering
+        quantile_medians = np.median(q_mat, axis=0)
+        sorted_indices = np.argsort(quantile_medians)
+        
+        # Create quantile bands from selected indices
+        quantile_bands = {}
+        band_count = 0
+        
+        for i in range(len(valid_indices) - 1):
+            lower_idx = valid_indices[i]
+            upper_idx = valid_indices[i + 1]
+            
+            # Get the sorted indices for these quantiles
+            lower_sorted_idx = sorted_indices[lower_idx]
+            upper_sorted_idx = sorted_indices[upper_idx]
+            
+            # Extract quantile values
+            lower_quantile = q_mat[:, lower_sorted_idx]
+            upper_quantile = q_mat[:, upper_sorted_idx]
+            
+            # Create band labels
+            lower_pct = idx_to_percent(lower_idx, num_quantiles)
+            upper_pct = idx_to_percent(upper_idx, num_quantiles)
+            band_label = f"Q{lower_pct:02d}–Q{upper_pct:02d}"
+            
+            # Store band data
+            quantile_bands[f'quantile_band_{band_count}_lower'] = lower_quantile.tolist()
+            quantile_bands[f'quantile_band_{band_count}_upper'] = upper_quantile.tolist()
+            quantile_bands[f'quantile_band_{band_count}_label'] = band_label
+            
+            logger.info(f"   Band {band_count}: {band_label} - Lower: {len(lower_quantile)}, Upper: {len(upper_quantile)}")
+            band_count += 1
+        
+        logger.info(f"✅ Created {band_count} quantile bands from indices: {valid_indices}")
+        for i in range(band_count):
+            label = quantile_bands[f'quantile_band_{i}_label']
+            logger.info(f"   Band {i}: {label}")
+        
+        return quantile_bands
+        
+    except Exception as e:
+        logger.error(f"❌ Quantile band processing failed: {str(e)}")
+        raise
+
+
+def idx_to_percent(idx: int, num_quantiles: int) -> int:
+    """
+    Convert quantile index to percentage for labeling.
+    
+    Note: Index 0 is legacy mean forecast and should be skipped.
+    Actual quantiles start at index 1: 1->Q10, 2->Q20, ..., 9->Q90
+    
+    Args:
+        idx: Quantile index (1-based for actual quantiles, 0 is legacy)
+        num_quantiles: Total number of quantiles (including legacy index 0)
+        
+    Returns:
+        Percentage value (e.g., 10 for Q10, 90 for Q90)
+    """
+    if num_quantiles == 10:
+        # Special case for 10 quantiles: 1->Q10, 2->Q20, ..., 9->Q90
+        # Index 0 is legacy mean, so actual quantiles start at index 1
+        return idx * 10
+    else:
+        # General case: distribute evenly, accounting for skipped index 0
+        # If we have 10 total quantiles (0-9), actual quantiles are 1-9
+        actual_quantiles = num_quantiles - 1  # Subtract 1 for legacy index 0
+        return int(100 * idx / actual_quantiles)

src/interactive_visualization.py

@@ -0,0 +1,1129 @@
+"""
+Interactive Visualization Module for TimesFM Forecasting using Plotly
+
+This module provides comprehensive interactive visualization capabilities for TimesFM forecasting,
+including professional-grade plots with prediction intervals, covariates displays,
+and publication-ready styling using Plotly for enhanced interactivity.
+
+Key Features:
+- Interactive forecast visualizations with seamless connections
+- Prediction intervals with customizable confidence levels
+- Covariates subplots integration
+- Sapheneia-style professional formatting
+- Interactive zoom, pan, and hover capabilities
+- Export capabilities for presentations and publications
+- Responsive design for web applications
+"""
+
+import numpy as np
+import pandas as pd
+import plotly.graph_objects as go
+import plotly.express as px
+from plotly.subplots import make_subplots
+from plotly.offline import plot
+from datetime import datetime
+from typing import List, Dict, Optional, Union
+import logging
+import json
+
+logger = logging.getLogger(__name__)
+
+
+class InteractiveVisualizer:
+    """
+    Interactive visualization class for TimesFM forecasting results using Plotly.
+    
+    This class provides methods to create interactive, publication-quality visualizations
+    of forecasting results, including prediction intervals, covariates analysis,
+    and comprehensive time series plots with enhanced user interaction.
+    
+    Example:
+        >>> viz = InteractiveVisualizer()
+        >>> fig = viz.plot_forecast_with_intervals(
+        ...     historical_data=historical,
+        ...     forecast=point_forecast,
+        ...     intervals=prediction_intervals,
+        ...     title="Bitcoin Price Forecast"
+        ... )
+        >>> fig.show()
+    """
+    
+    def __init__(self, style: str = "professional", theme: str = "plotly_white"):
+        """
+        Initialize the InteractiveVisualizer with specified styling.
+        
+        Args:
+            style: Visualization style ("professional", "minimal", "presentation")
+            theme: Plotly theme ("plotly", "plotly_white", "plotly_dark", "ggplot2", "seaborn", "simple_white")
+        """
+        self.style = style
+        self.theme = theme
+        self._setup_style()
+        logger.info(f"InteractiveVisualizer initialized with '{style}' style and '{theme}' theme")
+    
+    def _setup_style(self) -> None:
+        """Set up the visualization style and parameters."""
+        if self.style == "professional":
+            # Sapheneia professional style
+            self.colors = {
+                'historical': '#1f77b4',
+                'forecast': '#d62728', 
+                'actual': '#2ca02c',
+                'interval_80': 'rgba(255, 179, 102, 0.3)',
+                'interval_50': 'rgba(255, 127, 14, 0.5)',
+                'grid': '#e0e0e0',
+                'background': '#fafafa',
+                'text': '#2c3e50',
+                'axis': '#34495e'
+            }
+            self.layout_config = {
+                'width': 1200,
+                'height': 800,
+                'margin': {'l': 60, 'r': 60, 't': 80, 'b': 60}
+            }
+            
+        elif self.style == "minimal":
+            # Clean minimal style
+            self.colors = {
+                'historical': '#2E86AB',
+                'forecast': '#A23B72',
+                'actual': '#F18F01',
+                'interval_80': 'rgba(199, 62, 29, 0.3)',
+                'interval_50': 'rgba(241, 143, 1, 0.5)',
+                'grid': '#f0f0f0',
+                'background': 'white',
+                'text': '#2c3e50',
+                'axis': '#34495e'
+            }
+            self.layout_config = {
+                'width': 1000,
+                'height': 700,
+                'margin': {'l': 50, 'r': 50, 't': 60, 'b': 50}
+            }
+            
+        else:  # presentation
+            # High contrast for presentations
+            self.colors = {
+                'historical': '#003f5c',
+                'forecast': '#ff6361',
+                'actual': '#58508d',
+                'interval_80': 'rgba(255, 166, 0, 0.3)',
+                'interval_50': 'rgba(255, 99, 97, 0.5)',
+                'grid': '#e8e8e8',
+                'background': 'white',
+                'text': '#2c3e50',
+                'axis': '#34495e'
+            }
+            self.layout_config = {
+                'width': 1400,
+                'height': 900,
+                'margin': {'l': 70, 'r': 70, 't': 100, 'b': 70}
+            }
+    
+    def _create_base_layout(self, title: str, x_title: str = "Time", y_title: str = "Value") -> Dict:
+        """Create base layout configuration for plots."""
+        return {
+            'title': {
+                'text': title,
+                'x': 0.5,
+                'xanchor': 'center',
+                'font': {'size': 18, 'color': self.colors['text']}
+            },
+            'xaxis': {
+                'title': {'text': x_title, 'font': {'size': 14, 'color': self.colors['axis']}},
+                'tickfont': {'size': 12, 'color': self.colors['axis']},
+                'gridcolor': self.colors['grid'],
+                'showgrid': True,
+                'zeroline': False
+            },
+            'yaxis': {
+                'title': {'text': y_title, 'font': {'size': 14, 'color': self.colors['axis']}},
+                'tickfont': {'size': 12, 'color': self.colors['axis']},
+                'gridcolor': self.colors['grid'],
+                'showgrid': True,
+                'zeroline': False
+            },
+            'plot_bgcolor': self.colors['background'],
+            'paper_bgcolor': 'white',
+            'font': {'family': 'Arial, sans-serif', 'color': self.colors['text']},
+            'showlegend': True,
+            'legend': {
+                'x': 0.02,
+                'y': 0.98,
+                'yanchor': 'top',
+                'bgcolor': 'rgba(255, 255, 255, 0.8)',
+                'bordercolor': 'rgba(0, 0, 0, 0.2)',
+                'borderwidth': 1
+            },
+            'hovermode': 'x unified',
+            **self.layout_config
+        }
+    
+    def plot_forecast_with_intervals(
+        self,
+        historical_data: Union[List[float], np.ndarray],
+        forecast: Union[List[float], np.ndarray], 
+        intervals: Optional[Dict[str, np.ndarray]] = None,
+        actual_future: Optional[Union[List[float], np.ndarray]] = None,
+        dates_historical: Optional[List[Union[str, datetime]]] = None,
+        dates_future: Optional[List[Union[str, datetime]]] = None,
+        title: str = "TimesFM Forecast with Prediction Intervals",
+        target_name: str = "Value",
+        save_path: Optional[str] = None,
+        show_figure: bool = True,
+        context_len: Optional[int] = None,
+        horizon_len: Optional[int] = None,
+        y_axis_padding: float = 0.1
+    ) -> go.Figure:
+        """
+        Create an interactive forecast visualization with prediction intervals.
+        
+        Args:
+            historical_data: Historical time series data
+            forecast: Point forecast values
+            intervals: Dictionary containing prediction intervals
+            actual_future: Optional actual future values for comparison
+            dates_historical: Optional dates for historical data
+            dates_future: Optional dates for forecast period
+            title: Plot title
+            target_name: Name of the target variable
+            save_path: Optional path to save the plot (HTML format)
+            show_figure: Whether to display the figure
+            context_len: Length of context window for default view focus
+            horizon_len: Length of horizon for default view focus
+            y_axis_padding: Padding factor for focused y-axis range (0.1 = 10% padding)
+            
+        Returns:
+            Plotly Figure object
+        """
+        logger.info(f"Creating interactive forecast visualization: {title}")
+        
+        # Convert to numpy arrays
+        if actual_future is not None:
+            actual_future = np.array(actual_future)
+        
+        # Setup time axis
+        if dates_historical is None:
+            historical_x = np.arange(len(historical_data))
+        else:
+            historical_x = pd.to_datetime(dates_historical)
+        
+        future_x = np.arange(
+            len(historical_data), len(historical_data) + len(forecast)
+            ) if dates_future is None else pd.to_datetime(dates_future)
+                
+        # Calculate default view range (context + horizon)
+        if context_len is not None and horizon_len is not None:
+            if dates_historical is not None:
+                start_date = historical_x[0]
+                end_date = future_x[min(horizon_len - 1, len(future_x) - 1)] if len(future_x) > 0 else historical_x[-1]
+                default_x_range = [start_date, end_date]
+            else:
+                start_idx = 0
+                end_idx = len(historical_x) + len(forecast)
+                default_x_range = [start_idx, end_idx]
+        else:
+            # No specific focus, show all data
+            if dates_historical is not None:
+                start_date = historical_x[0]
+                end_date = future_x[-1] if len(future_x) > 0 else historical_x[-1]
+                default_x_range = [start_date, end_date]
+            else:
+                start_idx = 0
+                end_idx = len(historical_x) + len(forecast)
+                default_x_range = [start_idx, end_idx]
+        
+        # Calculate focused y-axis range for better visibility
+        if context_len is not None and horizon_len is not None:
+            # Focus y-axis on the context + horizon period data
+            if context_len < len(historical_data):
+                # Get the data range for context + horizon
+                context_data = historical_data[-context_len:]
+                focused_data = np.concatenate([context_data, forecast])
+                
+                # Include prediction intervals in y-axis calculation
+                if intervals:
+                    # Collect all interval data for y-axis range calculation
+                    interval_data = []
+                    
+                    # Add 50th percentile if available
+                    if 'lower_50' in intervals and 'upper_50' in intervals:
+                        interval_data.extend(intervals['lower_50'])
+                        interval_data.extend(intervals['upper_50'])
+                    
+                    # Add 80th percentile if available
+                    if 'lower_80' in intervals and 'upper_80' in intervals:
+                        interval_data.extend(intervals['lower_80'])
+                        interval_data.extend(intervals['upper_80'])
+                    
+                    # Add other confidence levels
+                    for key in intervals.keys():
+                        if key.startswith('lower_') and key not in ['lower_50', 'lower_80']:
+                            interval_data.extend(intervals[key])
+                        elif key.startswith('upper_') and key not in ['upper_50', 'upper_80']:
+                            interval_data.extend(intervals[key])
+                    
+                    # Add quantile bands
+                    for key in intervals.keys():
+                        if key.startswith('quantile_band_') and key.endswith('_lower'):
+                            interval_data.extend(intervals[key])
+                        elif key.startswith('quantile_band_') and key.endswith('_upper'):
+                            interval_data.extend(intervals[key])
+                    
+                    # Include interval data in range calculation
+                    if interval_data:
+                        interval_data = np.array(interval_data)
+                        all_focused_data = np.concatenate([focused_data, interval_data])
+                    else:
+                        all_focused_data = focused_data
+                else:
+                    all_focused_data = focused_data
+                
+                # Calculate y-axis range including intervals
+                data_min = np.min(all_focused_data)
+                data_max = np.max(all_focused_data)
+                data_range = data_max - data_min
+                padding = data_range * y_axis_padding
+                
+                default_y_range = [data_min - padding, data_max + padding]
+            else:
+                # If context_len >= historical_data length, use all data
+                all_data = np.concatenate([historical_x, forecast])
+                
+                # Include prediction intervals in y-axis calculation
+                if intervals:
+                    interval_data = []
+                    
+                    # Add 50th percentile if available
+                    if 'lower_50' in intervals and 'upper_50' in intervals:
+                        interval_data.extend(intervals['lower_50'])
+                        interval_data.extend(intervals['upper_50'])
+                    
+                    # Add 80th percentile if available
+                    if 'lower_80' in intervals and 'upper_80' in intervals:
+                        interval_data.extend(intervals['lower_80'])
+                        interval_data.extend(intervals['upper_80'])
+                    
+                    # Add other confidence levels
+                    for key in intervals.keys():
+                        if key.startswith('lower_') and key not in ['lower_50', 'lower_80']:
+                            interval_data.extend(intervals[key])
+                        elif key.startswith('upper_') and key not in ['upper_50', 'upper_80']:
+                            interval_data.extend(intervals[key])
+                    
+                    # Add quantile bands
+                    for key in intervals.keys():
+                        if key.startswith('quantile_band_') and key.endswith('_lower'):
+                            interval_data.extend(intervals[key])
+                        elif key.startswith('quantile_band_') and key.endswith('_upper'):
+                            interval_data.extend(intervals[key])
+                    
+                    # Include interval data in range calculation
+                    if interval_data:
+                        interval_data = np.array(interval_data)
+                        all_data = np.concatenate([all_data, interval_data])
+                
+                data_min = np.min(all_data)
+                data_max = np.max(all_data)
+                data_range = data_max - data_min
+                padding = data_range * y_axis_padding
+                
+                default_y_range = [data_min - padding, data_max + padding]
+        else:
+            # No focused y-axis, let Plotly auto-scale
+            default_y_range = None
+        
+        # Create figure
+        fig = go.Figure()
+        
+        # Debug logging for historical data
+        print(f"DEBUG: Historical data length: {len(historical_data)}")
+        print(f"DEBUG: Historical data type: {type(historical_data)}")
+        print(f"DEBUG: Historical data first 5: {historical_data[:5] if len(historical_data) > 0 else 'Empty'}")
+        print(f"DEBUG: Historical data last 5: {historical_data[-5:] if len(historical_data) > 0 else 'Empty'}")
+        print(f"DEBUG: Historical x length: {len(historical_x)}")
+        print(f"DEBUG: Historical x first 5: {historical_x[:5] if len(historical_x) > 0 else 'Empty'}")
+        
+        # Validate data before plotting
+        if len(historical_data) == 0:
+            print("ERROR: Historical data is empty!")
+            return None
+        
+        if len(historical_x) == 0:
+            print("ERROR: Historical x-axis data is empty!")
+            return None
+        
+        if len(historical_data) != len(historical_x):
+            print(f"ERROR: Mismatch between historical data ({len(historical_data)}) and x-axis ({len(historical_x)}) lengths!")
+            return None
+        
+        # Plot historical data
+        print(f"DEBUG: About to plot historical data with {len(historical_data)} points")
+        print(f"DEBUG: Historical data sample: {historical_data[:3]}...{historical_data[-3:]}")
+        print(f"DEBUG: Historical x sample: {historical_x[:3]}...{historical_x[-3:]}")
+        
+        historical_trace = go.Scatter(
+            x=historical_x,
+            y=historical_data,
+            mode='lines',
+            name='Historical Data',
+            line=dict(color=self.colors['historical'], width=3),
+            hovertemplate='<b>Historical</b><br>Time: %{x}<br>Value: %{y:.2f}<extra></extra>'
+        )
+        
+        print(f"DEBUG: Historical trace created: {historical_trace}")
+        fig.add_trace(historical_trace)
+        print(f"DEBUG: Historical trace added to figure. Figure has {len(fig.data)} traces")
+
+        # Create seamless connection for forecast
+        if dates_historical is None:
+            connection_x = [len(historical_x) - 1] + list(future_x)
+        else:
+            connection_x = [historical_x[-1]] + list(future_x)
+        
+        # Plot quantile intervals if available
+        if intervals:
+            # Handle different types of intervals
+            if 'lower_80' in intervals and 'upper_80' in intervals:
+                # Traditional confidence intervals
+                interval_lower = [historical_data[-1]] + list(intervals['lower_80'])
+                interval_upper = [historical_data[-1]] + list(intervals['upper_80'])
+                
+                fig.add_trace(go.Scatter(
+                    x=connection_x,
+                    y=interval_upper,
+                    mode='lines',
+                    line=dict(width=0),
+                    showlegend=False,
+                    hoverinfo='skip'
+                ))
+                
+                fig.add_trace(go.Scatter(
+                    x=connection_x,
+                    y=interval_lower,
+                    mode='lines',
+                    line=dict(width=0),
+                    fill='tonexty',
+                    fillcolor=self.colors['interval_80'],
+                    name='80% Prediction Interval',
+                    hovertemplate='<b>80% Interval</b><br>Time: %{x}<br>Upper: %{y:.2f}<extra></extra>'
+                ))
+                               
+                # Add 50% interval if available
+                if 'lower_50' in intervals and 'upper_50' in intervals:
+                    interval_lower_50 = [historical_data[-1]] + list(intervals['lower_50'])
+                    interval_upper_50 = [historical_data[-1]] + list(intervals['upper_50'])
+                    
+                    fig.add_trace(go.Scatter(
+                        x=connection_x,
+                        y=interval_upper_50,
+                        mode='lines',
+                        line=dict(width=0),
+                        showlegend=False,
+                        hoverinfo='skip'
+                    ))
+                    
+                    fig.add_trace(go.Scatter(
+                        x=connection_x,
+                        y=interval_lower_50,
+                        mode='lines',
+                        line=dict(width=0),
+                        fill='tonexty',
+                        fillcolor=self.colors['interval_50'],
+                        name='50% Prediction Interval',
+                        hovertemplate='<b>50% Interval</b><br>Time: %{x}<br>Upper: %{y:.2f}<extra></extra>'
+                    ))
+            
+            else:
+                # Check for generic confidence levels
+                conf_levels = []
+                for key in intervals.keys():
+                    if key.startswith('lower_'):
+                        conf_level = key.split('_')[1]
+                        if f'upper_{conf_level}' in intervals:
+                            conf_levels.append(int(conf_level))
+                
+                conf_levels.sort(reverse=True)  # Largest first for layering
+                
+                for conf_level in conf_levels:
+                    lower_key = f'lower_{conf_level}'
+                    upper_key = f'upper_{conf_level}'
+                    
+                    if lower_key in intervals and upper_key in intervals:
+                        # Create seamless intervals
+                        interval_lower = [historical_data[-1]] + list(intervals[lower_key])
+                        interval_upper = [historical_data[-1]] + list(intervals[upper_key])
+                        
+                        alpha = 0.3 if conf_level == max(conf_levels) else 0.5
+                        color = self.colors['interval_80'] if conf_level >= 80 else self.colors['interval_50']
+                        
+                        fig.add_trace(go.Scatter(
+                            x=connection_x,
+                            y=interval_upper,
+                            mode='lines',
+                            line=dict(width=0),
+                            showlegend=False,
+                            hoverinfo='skip'
+                        ))
+                        
+                        fig.add_trace(go.Scatter(
+                            x=connection_x,
+                            y=interval_lower,
+                            mode='lines',
+                            line=dict(width=0),
+                            fill='tonexty',
+                            fillcolor=color,
+                            name=f'{conf_level}% Prediction Interval',
+                            hovertemplate=f'<b>{conf_level}% Interval</b><br>Time: %{{x}}<br>Upper: %{{y:.2f}}<extra></extra>'
+                        ))
+            
+            # Handle quantile bands (new format)
+            quantile_bands = {}
+            for key in intervals.keys():
+                if key.startswith('quantile_band_') and key.endswith('_lower'):
+                    band_name = key.replace('quantile_band_', '').replace('_lower', '')
+                    upper_key = f'quantile_band_{band_name}_upper'
+                    if upper_key in intervals:
+                        quantile_bands[band_name] = {
+                            'lower': intervals[key],
+                            'upper': intervals[upper_key]
+                        }
+            
+            if quantile_bands:
+                # Define colors for different bands
+                band_colors = ['rgba(255, 153, 153, 0.3)', 'rgba(153, 204, 255, 0.3)', 
+                               'rgba(153, 255, 153, 0.3)', 'rgba(255, 204, 153, 0.3)', 
+                               'rgba(204, 153, 255, 0.3)', 'rgba(255, 255, 153, 0.3)']
+                
+                for i, (band_name, band_data) in enumerate(sorted(quantile_bands.items())):
+                    color = band_colors[i % len(band_colors)]
+                    
+                    interval_lower = [historical_data[-1]] + list(band_data['lower'])
+                    interval_upper = [historical_data[-1]] + list(band_data['upper'])
+                    
+                    label_key = f'quantile_band_{band_name}_label'
+                    label_text = intervals.get(label_key, f'Quantile Band {int(band_name)+1}')
+                    
+                    fig.add_trace(go.Scatter(
+                        x=connection_x,
+                        y=interval_upper,
+                        mode='lines',
+                        line=dict(width=0),
+                        showlegend=False,
+                        hoverinfo='skip'
+                    ))
+                    
+                    fig.add_trace(go.Scatter(
+                        x=connection_x,
+                        y=interval_lower,
+                        mode='lines',
+                        line=dict(width=0),
+                        fill='tonexty',
+                        fillcolor=color,
+                        name=label_text,
+                        hovertemplate=f'<b>{label_text}</b><br>Upper: %{{y:.2f}}<extra></extra>'
+                    ))
+        
+        fig.add_trace(go.Scatter(
+            x=future_x,
+            y=forecast,
+            mode='lines',
+            name='Point Forecast',
+            line=dict(color=self.colors['forecast'], width=3, dash='dash'),
+            hovertemplate='<b>Forecast</b><br>Time: %{x}<br>Value: %{y:.2f}<extra></extra>',
+            legendgroup='forecast'
+        ))
+
+        # 2) a 2-point seamless bridge with no hover/legend
+        fig.add_trace(go.Scatter(
+            x=[historical_x[-1], future_x[0]],
+            y=[historical_data[-1], forecast[0]],
+            mode='lines',
+            line=dict(color=self.colors['forecast'], width=3, dash='dash'),
+            hoverinfo='skip',
+            showlegend=False,
+            legendgroup='forecast'
+        ))
+        
+        # Plot actual future data if available
+        if actual_future is not None:
+            print(f"DEBUG: Plotting actual future values")
+            print(f"DEBUG: actual_future length: {len(actual_future)}")
+            print(f"DEBUG: actual_future sample: {actual_future[:3] if len(actual_future) > 0 else 'Empty'}")
+            print(f"DEBUG: dates_future length: {len(dates_future) if dates_future else 'None'}")
+            print(f"DEBUG: dates_future sample: {dates_future[:3] if dates_future and len(dates_future) > 0 else 'Empty'}")
+            print(f"DEBUG: historical_x last value: {historical_x[-1]}")
+            print(f"DEBUG: future_x first value: {future_x[0] if len(future_x) > 0 else 'Empty'}")
+            
+            actual_connection = [historical_x[-1]] + list(actual_future)
+            fig.add_trace(go.Scatter(
+                x=connection_x,
+                y=actual_connection,
+                mode='lines+markers',
+                name='Actual Future',
+                line=dict(color=self.colors['actual'], width=3),
+                marker=dict(size=8, color=self.colors['actual'], 
+                           line=dict(width=2, color='white')),
+                hovertemplate='<b>Actual Future</b><br>Time: %{x}<br>Value: %{y:.2f}<extra></extra>',
+                legendgroup='actual'
+            ))
+            print([historical_x[-1], connection_x[0]])
+            print([historical_data[-1], actual_connection[0]])
+
+            # 2) a 2-point seamless bridge with no hover/legend
+            fig.add_trace(go.Scatter(
+                x=[historical_x[-1], connection_x[1]],
+                y=[historical_data[-1], actual_connection[1]],
+                mode='lines',
+                line=dict(color=self.colors['actual'], width=3),
+                marker=dict(size=8, color=self.colors['actual'], 
+                           line=dict(width=2, color='white')),
+                hoverinfo='skip',
+                showlegend=False,
+                legendgroup='actual'
+            ))
+        
+        # Add forecast start line
+        fig.add_vline(
+            x=pd.to_datetime(historical_x[-1]).to_pydatetime(),  # or .isoformat()
+            line_dash="dot", line_color="gray", line_width=1
+        )
+        fig.add_annotation(
+            x=pd.to_datetime(historical_x[-1]).to_pydatetime(),
+            y=1,                 # top of plotting area
+            xref="x",
+            yref="paper",
+            text="Forecast Start",
+            showarrow=False,
+            yanchor="bottom"
+        )
+        
+        # Apply layout
+        layout = self._create_base_layout(title, "Time", target_name)
+        
+        # Add default view range if specified
+        if context_len is not None and horizon_len is not None:
+            layout['xaxis']['range'] = default_x_range
+            
+        # Add focused y-axis range if specified
+        if default_y_range is not None:
+            layout['yaxis']['range'] = default_y_range
+        
+        # Add timestamp
+        timestamp = datetime.now().strftime("%Y-%m-%d %H:%M")
+        layout['annotations'] = [{
+            'x': 1,
+            'y': -0.1,
+            'xref': 'paper',
+            'yref': 'paper',
+            'text': f'Generated: {timestamp}',
+            'showarrow': False,
+            'font': {'size': 10, 'color': 'gray'}
+        }]
+        
+        fig.update_layout(**layout)
+        
+        # Save if requested
+        if save_path:
+            if save_path.endswith('.html'):
+                fig.write_html(save_path)
+            else:
+                fig.write_image(save_path)
+            logger.info(f"Interactive plot saved to: {save_path}")
+        
+        # Debug final figure
+        print(f"DEBUG: Final figure has {len(fig.data)} traces")
+        for i, trace in enumerate(fig.data):
+            print(f"DEBUG: Trace {i}: name='{trace.name}', type='{trace.type}', visible={trace.visible}")
+            if hasattr(trace, 'y') and trace.y is not None:
+                print(f"DEBUG: Trace {i} y-data length: {len(trace.y) if hasattr(trace.y, '__len__') else 'scalar'}")
+        
+        # Show figure if requested
+        if show_figure:
+            fig.show()
+        
+        logger.info("✅ Interactive forecast visualization completed")
+        return fig
+    
+    def plot_forecast_with_covariates(
+        self,
+        historical_data: Union[List[float], np.ndarray],
+        forecast: Union[List[float], np.ndarray],
+        covariates_data: Dict[str, Dict[str, Union[List[float], float, str]]],
+        intervals: Optional[Dict[str, np.ndarray]] = None,
+        actual_future: Optional[Union[List[float], np.ndarray]] = None,
+        dates_historical: Optional[List[Union[str, datetime]]] = None,
+        dates_future: Optional[List[Union[str, datetime]]] = None,
+        title: str = "TimesFM Forecast with Covariates Analysis",
+        target_name: str = "Target Value",
+        save_path: Optional[str] = None,
+        show_figure: bool = True,
+        context_len: Optional[int] = None,
+        horizon_len: Optional[int] = None,
+        show_full_history: bool = True,
+        y_axis_padding: float = 0.1
+    ) -> go.Figure:
+        """
+        Create a comprehensive interactive visualization with main forecast and covariates subplots.
+        
+        Args:
+            historical_data: Historical time series data
+            forecast: Point forecast values
+            covariates_data: Dictionary containing covariates information
+            intervals: Optional prediction intervals
+            actual_future: Optional actual future values
+            dates_historical: Optional historical dates
+            dates_future: Optional future dates
+            title: Main plot title
+            target_name: Name of target variable
+            save_path: Optional save path
+            show_figure: Whether to display the figure
+            context_len: Length of context window for default view focus
+            horizon_len: Length of horizon for default view focus
+            show_full_history: Whether to show full historical data (True) or just context (False)
+            
+        Returns:
+            Plotly Figure object
+        """
+        logger.info(f"Creating comprehensive interactive forecast with covariates: {title}")
+        
+        # Count covariates for subplot layout
+        num_covariates = len([k for k, v in covariates_data.items() 
+                             if isinstance(v, dict) and 'historical' in v])
+        
+        # Create subplot layout
+        if num_covariates == 0:
+            return self.plot_forecast_with_intervals(
+                historical_data, forecast, intervals, actual_future,
+                dates_historical, dates_future, title, target_name, save_path, show_figure,
+                context_len, horizon_len, show_full_history, y_axis_padding
+            )
+        
+        # Determine grid layout
+        if num_covariates <= 2:
+            rows, cols = 2, 2
+            subplot_titles = [title] + [f'{name.replace("_", " ").title()}' 
+                                      for name in list(covariates_data.keys())[:3]]
+        elif num_covariates <= 4:
+            rows, cols = 3, 2  
+            subplot_titles = [title] + [f'{name.replace("_", " ").title()}' 
+                                      for name in list(covariates_data.keys())[:5]]
+        else:
+            rows, cols = 4, 2
+            subplot_titles = [title] + [f'{name.replace("_", " ").title()}' 
+                                      for name in list(covariates_data.keys())[:7]]
+        
+        # Create subplots
+        fig = make_subplots(
+            rows=rows, cols=cols,
+            subplot_titles=subplot_titles,
+            vertical_spacing=0.08,
+            horizontal_spacing=0.1
+        )
+        
+        # Convert data
+        historical_data = np.array(historical_data)
+        forecast = np.array(forecast)
+        
+        # Setup time axes
+        if dates_historical is None:
+            historical_x = np.arange(len(historical_data))
+            future_x = np.arange(len(historical_data), len(historical_data) + len(forecast))
+        else:
+            historical_x = pd.to_datetime(dates_historical)
+            future_x = pd.to_datetime(dates_future) if dates_future is not None else None
+        
+        # Plot main forecast (similar to single plot method)
+        # Historical data
+        fig.add_trace(go.Scatter(
+            x=historical_x,
+            y=historical_data,
+            mode='lines',
+            name='Historical Data',
+            line=dict(color=self.colors['historical'], width=3),
+            hovertemplate='<b>Historical</b><br>Time: %{x}<br>Value: %{y:.2f}<extra></extra>'
+        ), row=1, col=1)
+        
+        # Forecast with seamless connection
+        if dates_historical is None:
+            connection_x = [len(historical_data) - 1] + list(future_x)
+        else:
+            connection_x = [historical_x[-1]] + list(future_x)
+        connection_forecast = [historical_data[-1]] + list(forecast)
+        
+        # Plot intervals if available
+        if intervals:
+            for key in intervals.keys():
+                if key.startswith('lower_'):
+                    conf_level = key.split('_')[1]
+                    upper_key = f'upper_{conf_level}'
+                    if upper_key in intervals:
+                        interval_lower = [historical_data[-1]] + list(intervals[key])
+                        interval_upper = [historical_data[-1]] + list(intervals[upper_key])
+                        
+                        alpha = 0.3 if int(conf_level) >= 80 else 0.5
+                        color = self.colors['interval_80'] if int(conf_level) >= 80 else self.colors['interval_50']
+                        
+                        fig.add_trace(go.Scatter(
+                            x=connection_x,
+                            y=interval_upper,
+                            mode='lines',
+                            line=dict(width=0),
+                            showlegend=False,
+                            hoverinfo='skip'
+                        ), row=1, col=1)
+                        
+                        fig.add_trace(go.Scatter(
+                            x=connection_x,
+                            y=interval_lower,
+                            mode='lines',
+                            line=dict(width=0),
+                            fill='tonexty',
+                            fillcolor=color,
+                            name=f'{conf_level}% Prediction Interval',
+                            hovertemplate=f'<b>{conf_level}% Interval</b><br>Time: %{{x}}<br>Upper: %{{y:.2f}}<extra></extra>'
+                        ), row=1, col=1)
+        
+        # Forecast line
+        fig.add_trace(go.Scatter(
+            x=connection_x,
+            y=connection_forecast,
+            mode='lines',
+            name='Point Forecast',
+            line=dict(color=self.colors['forecast'], width=3, dash='dash'),
+            hovertemplate='<b>Forecast</b><br>Time: %{x}<br>Value: %{y:.2f}<extra></extra>'
+        ), row=1, col=1)
+        
+        # Plot actual future if available
+        if actual_future is not None:
+            actual_future = np.array(actual_future)
+            actual_connection = [historical_data[-1]] + list(actual_future)
+            fig.add_trace(go.Scatter(
+                x=connection_x,
+                y=actual_connection,
+                mode='lines+markers',
+                name='Actual Future',
+                line=dict(color=self.colors['actual'], width=3),
+                marker=dict(size=8, color=self.colors['actual'], 
+                           line=dict(width=2, color='white')),
+                hovertemplate='<b>Actual Future</b><br>Time: %{x}<br>Value: %{y:.2f}<extra></extra>'
+            ), row=1, col=1)
+        
+        # Forecast start line (commented out due to datetime compatibility issues)
+        # forecast_start = historical_x[-1] if dates_historical is not None else len(historical_data) - 1
+        # fig.add_vline(
+        #     x=forecast_start,
+        #     line_dash="dot",
+        #     line_color="gray",
+        #     line_width=2,
+        #     annotation_text="Forecast Start",
+        #     annotation_position="top"
+        # )
+        
+        # Create covariate subplots
+        covariate_colors = ['#9467bd', '#e377c2', '#7f7f7f', '#bcbd22', '#17becf', '#d62728']
+        
+        plot_idx = 0
+        for cov_name, cov_data in covariates_data.items():
+            if not isinstance(cov_data, dict) or 'historical' not in cov_data:
+                continue
+                
+            if plot_idx >= (rows - 1) * cols:  # Don't exceed subplot capacity
+                break
+                
+            # Calculate subplot position
+            row = 2 + plot_idx // cols
+            col = 1 + plot_idx % cols
+            color = covariate_colors[plot_idx % len(covariate_colors)]
+            
+            # Plot historical covariate data
+            fig.add_trace(go.Scatter(
+                x=historical_x,
+                y=cov_data['historical'],
+                mode='lines',
+                name=f'{cov_name.replace("_", " ").title()} Historical',
+                line=dict(color=color, width=2.5),
+                hovertemplate=f'<b>{cov_name.replace("_", " ").title()}</b><br>Time: %{{x}}<br>Value: %{{y:.2f}}<extra></extra>',
+                showlegend=False
+            ), row=row, col=col)
+            
+            # Plot future covariate data if available
+            if 'future' in cov_data and future_x is not None:
+                combined_data = list(cov_data['historical']) + list(cov_data['future'])
+                if dates_historical is None:
+                    combined_x = np.arange(len(combined_data))
+                else:
+                    combined_x = list(historical_x) + list(future_x)
+                
+                future_start_idx = len(cov_data['historical']) - 1
+                fig.add_trace(go.Scatter(
+                    x=combined_x[future_start_idx:],
+                    y=combined_data[future_start_idx:],
+                    mode='lines+markers',
+                    name=f'{cov_name.replace("_", " ").title()} Future',
+                    line=dict(color=color, width=2.5, dash='dash'),
+                    marker=dict(size=6, color=color),
+                    hovertemplate=f'<b>{cov_name.replace("_", " ").title()} Future</b><br>Time: %{{x}}<br>Value: %{{y:.2f}}<extra></extra>',
+                    showlegend=False
+                ), row=row, col=col)
+            
+            # Forecast start line for covariate (commented out due to datetime compatibility issues)
+            # fig.add_vline(
+            #     x=forecast_start,
+            #     line_dash="dot",
+            #     line_color="gray",
+            #     line_width=1,
+            #     row=row, col=col
+            # )
+            
+            plot_idx += 1
+        
+        # Update layout
+        fig.update_layout(
+            title=f'TimesFM Comprehensive Forecasting Analysis',
+            title_x=0.5,
+            title_font_size=20,
+            height=800,
+            showlegend=True,
+            hovermode='x unified'
+        )
+        
+        # Update axes
+        for i in range(1, rows + 1):
+            for j in range(1, cols + 1):
+                fig.update_xaxes(
+                    title_text="Time" if i == 1 else "",
+                    gridcolor=self.colors['grid'],
+                    showgrid=True,
+                    row=i, col=j
+                )
+                fig.update_yaxes(
+                    title_text=target_name if i == 1 else "Value",
+                    gridcolor=self.colors['grid'],
+                    showgrid=True,
+                    row=i, col=j
+                )
+        
+        # Add timestamp
+        timestamp = datetime.now().strftime("%Y-%m-%d %H:%M")
+        fig.add_annotation(
+            x=1, y=-0.1,
+            xref='paper', yref='paper',
+            text=f'Generated: {timestamp}',
+            showarrow=False,
+            font=dict(size=10, color='gray')
+        )
+        
+        # Save if requested
+        if save_path:
+            if save_path.endswith('.html'):
+                fig.write_html(save_path)
+            else:
+                fig.write_image(save_path)
+            logger.info(f"Comprehensive interactive plot saved to: {save_path}")
+        
+        # Show figure if requested
+        if show_figure:
+            fig.show()
+        
+        logger.info("✅ Comprehensive interactive forecast visualization completed")
+        return fig
+    
+    def plot_forecast_comparison(
+        self,
+        forecasts_dict: Dict[str, np.ndarray],
+        historical_data: Union[List[float], np.ndarray],
+        actual_future: Optional[Union[List[float], np.ndarray]] = None,
+        title: str = "Forecast Methods Comparison",
+        save_path: Optional[str] = None,
+        show_figure: bool = True
+    ) -> go.Figure:
+        """
+        Compare multiple forecasting methods in an interactive plot.
+        
+        Args:
+            forecasts_dict: Dictionary of {method_name: forecast_array}
+            historical_data: Historical data for context
+            actual_future: Optional actual future values
+            title: Plot title
+            save_path: Optional save path
+            show_figure: Whether to display the figure
+            
+        Returns:
+            Plotly Figure object
+        """
+        logger.info(f"Creating interactive forecast comparison plot: {title}")
+        
+        fig = go.Figure()
+        
+        historical_data = np.array(historical_data)
+        historical_x = np.arange(len(historical_data))
+        
+        # Plot historical data
+        fig.add_trace(go.Scatter(
+            x=historical_x,
+            y=historical_data,
+            mode='lines',
+            name='Historical Data',
+            line=dict(color=self.colors['historical'], width=3),
+            hovertemplate='<b>Historical</b><br>Time: %{x}<br>Value: %{y:.2f}<extra></extra>'
+        ))
+        
+        # Plot different forecasts
+        forecast_colors = ['#d62728', '#ff7f0e', '#2ca02c', '#9467bd', '#8c564b']
+        
+        for i, (method, forecast) in enumerate(forecasts_dict.items()):
+            forecast = np.array(forecast)
+            future_x = np.arange(len(historical_data), len(historical_data) + len(forecast))
+            
+            # Seamless connection
+            connection_x = [len(historical_data) - 1] + list(future_x)
+            connection_forecast = [historical_data[-1]] + list(forecast)
+            
+            color = forecast_colors[i % len(forecast_colors)]
+            linestyle = 'dash' if i == 0 else 'dot'
+            
+            fig.add_trace(go.Scatter(
+                x=connection_x,
+                y=connection_forecast,
+                mode='lines',
+                name=f'{method} Forecast',
+                line=dict(color=color, width=3, dash=linestyle),
+                hovertemplate=f'<b>{method} Forecast</b><br>Time: %{{x}}<br>Value: %{{y:.2f}}<extra></extra>'
+            ))
+        
+        # Plot actual future if available
+        if actual_future is not None:
+            actual_future = np.array(actual_future)
+            future_x = np.arange(len(historical_data), len(historical_data) + len(actual_future))
+            connection_x = [len(historical_data) - 1] + list(future_x)
+            actual_connection = [historical_data[-1]] + list(actual_future)
+            
+            fig.add_trace(go.Scatter(
+                x=connection_x,
+                y=actual_connection,
+                mode='lines+markers',
+                name='Actual Future',
+                line=dict(color=self.colors['actual'], width=3),
+                marker=dict(size=8, color=self.colors['actual'], 
+                           line=dict(width=2, color='white')),
+                hovertemplate='<b>Actual Future</b><br>Time: %{x}<br>Value: %{y:.2f}<extra></extra>'
+            ))
+        
+        # Forecast start line
+        fig.add_vline(
+            x=len(historical_data) - 1,
+            line_dash="dot",
+            line_color="gray",
+            line_width=2,
+            annotation_text="Forecast Start",
+            annotation_position="top"
+        )
+        
+        # Apply layout
+        layout = self._create_base_layout(title, "Time", "Value")
+        fig.update_layout(**layout)
+        
+        # Add timestamp
+        timestamp = datetime.now().strftime("%Y-%m-%d %H:%M")
+        fig.add_annotation(
+            x=1, y=-0.1,
+            xref='paper', yref='paper',
+            text=f'Generated: {timestamp}',
+            showarrow=False,
+            font=dict(size=10, color='gray')
+        )
+        
+        # Save if requested
+        if save_path:
+            if save_path.endswith('.html'):
+                fig.write_html(save_path)
+            else:
+                fig.write_image(save_path)
+            logger.info(f"Comparison plot saved to: {save_path}")
+        
+        # Show figure if requested
+        if show_figure:
+            fig.show()
+        
+        logger.info("✅ Interactive forecast comparison visualization completed")
+        return fig
+    
+    def create_dashboard(
+        self,
+        historical_data: Union[List[float], np.ndarray],
+        forecast: Union[List[float], np.ndarray],
+        intervals: Optional[Dict[str, np.ndarray]] = None,
+        covariates_data: Optional[Dict[str, Dict[str, Union[List[float], float, str]]]] = None,
+        actual_future: Optional[Union[List[float], np.ndarray]] = None,
+        dates_historical: Optional[List[Union[str, datetime]]] = None,
+        dates_future: Optional[List[Union[str, datetime]]] = None,
+        title: str = "TimesFM Forecasting Dashboard",
+        target_name: str = "Value",
+        save_path: Optional[str] = None,
+        show_figure: bool = True,
+        context_len: Optional[int] = None,
+        horizon_len: Optional[int] = None,
+        show_full_history: bool = True,
+        y_axis_padding: float = 0.1
+    ) -> go.Figure:
+        """
+        Create a comprehensive dashboard with multiple visualization panels.
+        
+        Args:
+            historical_data: Historical time series data
+            forecast: Point forecast values
+            intervals: Optional prediction intervals
+            covariates_data: Optional covariates data
+            actual_future: Optional actual future values
+            dates_historical: Optional historical dates
+            dates_future: Optional future dates
+            title: Dashboard title
+            target_name: Name of target variable
+            save_path: Optional save path
+            show_figure: Whether to display the figure
+            
+        Returns:
+            Plotly Figure object
+        """
+        logger.info(f"Creating interactive forecasting dashboard: {title}")
+        
+        # If covariates are provided, use the comprehensive view
+        if covariates_data and len(covariates_data) > 0:
+            return self.plot_forecast_with_covariates(
+                historical_data, forecast, covariates_data, intervals,
+                actual_future, dates_historical, dates_future,
+                title, target_name, save_path, show_figure,
+                context_len, horizon_len, show_full_history, y_axis_padding
+            )
+        else:
+            # Otherwise, use the standard forecast view
+            return self.plot_forecast_with_intervals(
+                historical_data, forecast, intervals, actual_future,
+                dates_historical, dates_future, title, target_name, save_path, show_figure,
+                context_len, horizon_len, show_full_history, y_axis_padding
+            )
+    
+    def export_to_json(self, fig: go.Figure, file_path: str) -> None:
+        """
+        Export a Plotly figure to JSON format for web integration.
+        
+        Args:
+            fig: Plotly Figure object
+            file_path: Path to save the JSON file
+        """
+        fig.write_json(file_path)
+        logger.info(f"Figure exported to JSON: {file_path}")
+    
+    def get_figure_html(self, fig: go.Figure, include_plotlyjs: bool = True) -> str:
+        """
+        Get the HTML representation of a figure.
+        
+        Args:
+            fig: Plotly Figure object
+            include_plotlyjs: Whether to include Plotly.js in the HTML
+            
+        Returns:
+            HTML string representation of the figure
+        """
+        return fig.to_html(include_plotlyjs=include_plotlyjs)

src/model.py

@@ -0,0 +1,356 @@
+"""
+TimesFM Model Initialization and Configuration
+
+This module provides a unified interface for initializing and configuring
+Google's TimesFM foundation model for time series forecasting.
+
+Key Features:
+- Support for both HuggingFace checkpoints and local model paths
+- Automatic backend detection (CPU/GPU/TPU)
+- Configurable model parameters optimized for financial time series
+- Built-in model validation and testing
+"""
+
+import logging
+from typing import Optional, Dict, Any, Tuple
+import numpy as np
+import timesfm
+
+# Configure logging
+logging.basicConfig(level=logging.INFO)
+logger = logging.getLogger(__name__)
+
+
+class TimesFMModel:
+    """
+    A wrapper class for TimesFM model initialization and configuration.
+    
+    This class provides a unified interface for loading TimesFM models from
+    either HuggingFace checkpoints or local paths, with automatic parameter
+    optimization and validation.
+    
+    Example:
+        >>> model_wrapper = TimesFMModel(
+        ...     backend="cpu",
+        ...     context_len=512,
+        ...     horizon_len=24
+        ... )
+        >>> model = model_wrapper.load_model()
+        >>> forecast, _ = model.forecast(inputs=[[1,2,3,4,5]], freq=[0])
+    """
+    
+    def __init__(
+        self,
+        backend: str = "cpu",
+        context_len: int = 512,
+        horizon_len: int = 24,
+        per_core_batch_size: Optional[int] = None,
+        checkpoint: Optional[str] = None,
+        local_model_path: Optional[str] = None,
+        num_layers: int = 50,
+        use_positional_embedding: bool = False,
+        input_patch_len = 32,
+        output_patch_len = 128,
+    ):
+        """
+        Initialize TimesFM model configuration.
+        
+        Args:
+            backend: Computing backend ("cpu", "gpu", "tpu")
+            context_len: Maximum context length for input time series
+            horizon_len: Forecast horizon length
+            per_core_batch_size: Batch size per core (auto-configured if None)
+            checkpoint: HuggingFace checkpoint repo ID
+            local_model_path: Path to local model checkpoint
+            num_layers: Number of model layers (must match checkpoint)
+            use_positional_embedding: Whether to use positional embeddings
+        
+        Raises:
+            ValueError: If both checkpoint and local_model_path are specified
+        """
+        self.backend = backend
+        self.context_len = context_len
+        self.horizon_len = horizon_len
+        self.num_layers = num_layers
+        self.use_positional_embedding = use_positional_embedding
+        self.input_patch_len = input_patch_len
+        self.output_patch_len = output_patch_len
+        
+        # Validate checkpoint configuration
+        if checkpoint and local_model_path:
+            raise ValueError("Cannot specify both checkpoint and local_model_path")
+        
+        # Set default checkpoint if none specified
+        if not checkpoint and not local_model_path:
+            checkpoint = "google/timesfm-2.0-500m-pytorch"  # Default to PyTorch version
+        
+        self.checkpoint = checkpoint
+        self.local_model_path = local_model_path
+        
+        # Auto-configure batch size based on backend
+        if per_core_batch_size is None:
+            self.per_core_batch_size = self._auto_configure_batch_size()
+        else:
+            self.per_core_batch_size = per_core_batch_size
+        
+        self.model = None
+        
+        logger.info(f"TimesFM Model Configuration:")
+        logger.info(f"  Backend: {self.backend}")
+        logger.info(f"  Context Length: {self.context_len}")
+        logger.info(f"  Horizon Length: {self.horizon_len}")
+        logger.info(f"  Batch Size: {self.per_core_batch_size}")
+        logger.info(f"  Layers: {self.num_layers}")
+        if checkpoint:
+            logger.info(f"  Checkpoint: {checkpoint}")
+        if local_model_path:
+            logger.info(f"  Local Model: {local_model_path}")
+    
+    def _auto_configure_batch_size(self) -> int:
+        """
+        Automatically configure batch size based on backend and available resources.
+        
+        Returns:
+            Optimal batch size for the specified backend
+        """
+        if self.backend == "cpu":
+            return 1  # Conservative for CPU
+        elif self.backend == "gpu":
+            return 8  # Moderate for GPU
+        elif self.backend == "tpu":
+            return 32  # Aggressive for TPU
+        else:
+            logger.warning(f"Unknown backend '{self.backend}', using default batch size")
+            return 1
+    
+    def load_model(self) -> timesfm.TimesFm:
+        """
+        Load and initialize the TimesFM model.
+        
+        This method creates the TimesFM model with the specified configuration,
+        loads the checkpoint, and performs basic validation.
+        
+        Returns:
+            Initialized TimesFM model instance
+            
+        Raises:
+            Exception: If model loading fails
+        """
+        try:
+            logger.info("Initializing TimesFM model...")
+            
+            # Create model hyperparameters
+            hparams = timesfm.TimesFmHparams(
+                backend=self.backend,
+                per_core_batch_size=self.per_core_batch_size,
+                horizon_len=self.horizon_len,
+                num_layers=self.num_layers,
+                use_positional_embedding=self.use_positional_embedding,
+                context_len=self.context_len,
+                input_patch_len=self.input_patch_len,
+                output_patch_len=self.output_patch_len,
+            )
+            
+            # Create checkpoint configuration
+            if self.checkpoint:
+                # Load from HuggingFace
+                checkpoint_config = timesfm.TimesFmCheckpoint(
+                    huggingface_repo_id=self.checkpoint
+                )
+                logger.info(f"Loading from HuggingFace: {self.checkpoint}")
+            else:
+                # Load from local path
+                checkpoint_config = timesfm.TimesFmCheckpoint(
+                    path=self.local_model_path
+                )
+                logger.info(f"Loading from local path: {self.local_model_path}")
+            
+            # Initialize model
+            self.model = timesfm.TimesFm(
+                hparams=hparams,
+                checkpoint=checkpoint_config
+            )
+            
+            # Validate model functionality
+            # Note: Temporarily disabled validation due to shape constraints
+            # self._validate_model()
+            logger.info("⚠️  Model validation skipped due to TimesFM shape constraints")
+            
+            logger.info("✅ TimesFM model loaded successfully!")
+            return self.model
+            
+        except Exception as e:
+            logger.error(f"❌ Failed to load TimesFM model: {str(e)}")
+            raise
+    
+    def _validate_model(self) -> None:
+        """
+        Validate that the model is working correctly with a simple test.
+        
+        Raises:
+            Exception: If model validation fails
+        """
+        try:
+            logger.info("Validating model functionality...")
+            
+            # Create test data with sufficient length (at least 32 points for reshaping)
+            # Use a simple linear pattern that should work with any model architecture
+            test_length = max(32, self.context_len // 4)  # Ensure minimum length
+            test_data = [float(i + 1) for i in range(test_length)]
+            test_inputs = [test_data]
+            test_freq = [0]  # Generic frequency
+            
+            # Test basic forecasting
+            forecast, _ = self.model.forecast(inputs=test_inputs, freq=test_freq)
+            forecast_array = np.array(forecast)
+            
+            # Validate output shape
+            expected_shape = (1, self.horizon_len)
+            if forecast_array.shape != expected_shape:
+                raise ValueError(f"Unexpected forecast shape: {forecast_array.shape}, expected: {expected_shape}")
+            
+            # Test quantile forecasting if available
+            if hasattr(self.model, 'experimental_quantile_forecast'):
+                logger.info("Testing quantile forecasting capability...")
+                quantile_forecast = self.model.experimental_quantile_forecast(
+                    inputs=test_inputs, 
+                    freq=test_freq
+                )
+                logger.info("✅ Quantile forecasting available")
+            else:
+                logger.warning("⚠️ Quantile forecasting not available")
+            
+            # Test covariates functionality if available
+            if hasattr(self.model, 'forecast_with_covariates'):
+                logger.info("✅ Covariates functionality available")
+            else:
+                logger.warning("⚠️ Covariates functionality not available")
+            
+            logger.info(f"✅ Model validation passed! Output shape: {forecast_array.shape}")
+            
+        except Exception as e:
+            logger.error(f"❌ Model validation failed: {str(e)}")
+            raise
+    
+    def get_model_info(self) -> Dict[str, Any]:
+        """
+        Get comprehensive information about the loaded model.
+        
+        Returns:
+            Dictionary containing model configuration and capabilities
+        """
+        if not self.model:
+            return {"status": "Model not loaded"}
+        
+        info = {
+            "status": "loaded",
+            "backend": self.backend,
+            "context_len": self.context_len,
+            "horizon_len": self.horizon_len,
+            "batch_size": self.per_core_batch_size,
+            "num_layers": self.num_layers,
+            "positional_embedding": self.use_positional_embedding,
+            "capabilities": {
+                "basic_forecasting": True,
+                "quantile_forecasting": True,
+                "covariates_support": hasattr(self.model, 'forecast_with_covariates')
+            }
+        }
+        
+        if self.checkpoint:
+            info["checkpoint"] = self.checkpoint
+        if self.local_model_path:
+            info["local_model_path"] = self.local_model_path
+        
+        return info
+    
+    def update_horizon(self, new_horizon: int) -> None:
+        """
+        Update the forecast horizon length.
+        
+        Note: This requires reloading the model to take effect.
+        
+        Args:
+            new_horizon: New forecast horizon length
+        """
+        logger.info(f"Updating horizon length from {self.horizon_len} to {new_horizon}")
+        self.horizon_len = new_horizon
+        
+        if self.model:
+            logger.warning("Model needs to be reloaded for horizon change to take effect")
+    
+    def update_context(self, new_context: int) -> None:
+        """
+        Update the context length.
+        
+        Note: This requires reloading the model to take effect.
+        
+        Args:
+            new_context: New context length
+        """
+        logger.info(f"Updating context length from {self.context_len} to {new_context}")
+        self.context_len = new_context
+        
+        if self.model:
+            logger.warning("Model needs to be reloaded for context change to take effect")
+
+
+def initialize_timesfm_model(
+    backend: str = "cpu",
+    context_len: int = 100,
+    horizon_len: int = 24,
+    checkpoint: Optional[str] = None,
+    local_model_path: Optional[str] = None
+) -> Tuple[TimesFMModel, 'Forecaster', 'InteractiveVisualizer']:
+    """
+    Centralized function to initialize TimesFM model with all required components.
+    
+    This function encapsulates the complete model loading and initialization process,
+    including the creation of TimesFMModel, Forecaster, and Visualizer objects.
+    
+    Args:
+        backend: Computing backend ("cpu", "gpu", "tpu")
+        context_len: Maximum context length for input time series
+        horizon_len: Forecast horizon length
+        checkpoint: HuggingFace checkpoint repo ID
+        local_model_path: Path to local model checkpoint
+        
+    Returns:
+        Tuple of (model_wrapper, forecaster, visualizer)
+        
+    Raises:
+        Exception: If model initialization fails
+    """
+    logger.info("🚀 Initializing TimesFM model with centralized function...")
+    
+    try:
+        # Import here to avoid circular imports
+        from forecast import Forecaster
+        from interactive_visualization import InteractiveVisualizer
+        
+        # Create model wrapper
+        model_wrapper = TimesFMModel(
+            backend=backend,
+            context_len=context_len,
+            horizon_len=horizon_len,
+            checkpoint=checkpoint,
+            local_model_path=local_model_path
+        )
+        
+        # Load the actual TimesFM model
+        timesfm_model = model_wrapper.load_model()
+        
+        # Create forecaster and visualizer
+        forecaster = Forecaster(timesfm_model)
+        visualizer = InteractiveVisualizer(style="professional")
+        
+        logger.info("✅ TimesFM model initialization completed successfully!")
+        logger.info(f"   Model: {model_wrapper.checkpoint or model_wrapper.local_model_path}")
+        logger.info(f"   Backend: {backend}")
+        logger.info(f"   Context: {context_len}, Horizon: {horizon_len}")
+        
+        return model_wrapper, forecaster, visualizer
+        
+    except Exception as e:
+        logger.error(f"❌ TimesFM model initialization failed: {str(e)}")
+        raise

src/visualization.py

@@ -0,0 +1,618 @@
+"""
+Professional Visualization Module for TimesFM Forecasting
+
+This module provides comprehensive visualization capabilities for TimesFM forecasting,
+including professional-grade plots with prediction intervals, covariates displays,
+and publication-ready styling.
+
+Key Features:
+- Professional forecast visualizations with seamless connections
+- Prediction intervals with customizable confidence levels
+- Covariates subplots integration
+- Sapheneia-style professional formatting
+- Interactive and static plot options
+- Export capabilities for presentations and publications
+"""
+
+import numpy as np
+import pandas as pd
+import matplotlib.pyplot as plt
+import matplotlib.dates as mdates
+import seaborn as sns
+from datetime import datetime
+from typing import List, Dict, Optional, Union
+import logging
+
+logger = logging.getLogger(__name__)
+
+# Set professional style
+plt.style.use('seaborn-v0_8')
+sns.set_palette("husl")
+
+
+class Visualizer:
+    """
+    Professional visualization class for TimesFM forecasting results.
+    
+    This class provides methods to create publication-quality visualizations
+    of forecasting results, including prediction intervals, covariates analysis,
+    and comprehensive time series plots.
+    
+    Example:
+        >>> viz = Visualizer()
+        >>> fig = viz.plot_forecast_with_intervals(
+        ...     historical_data=historical,
+        ...     forecast=point_forecast,
+        ...     intervals=prediction_intervals,
+        ...     title="Bitcoin Price Forecast"
+        ... )
+    """
+    
+    def __init__(self, style: str = "professional"):
+        """
+        Initialize the Visualizer with specified styling.
+        
+        Args:
+            style: Visualization style ("professional", "minimal", "presentation")
+        """
+        self.style = style
+        self._setup_style()
+        logger.info(f"Visualizer initialized with '{style}' style")
+    
+    def _setup_style(self) -> None:
+        """Set up the visualization style and parameters."""
+        if self.style == "professional":
+            # Sapheneia professional style
+            self.colors = {
+                'historical': '#1f77b4',
+                'forecast': '#d62728', 
+                'actual': '#2ca02c',
+                'interval_80': '#ffb366',
+                'interval_50': '#ff7f0e',
+                'grid': '#e0e0e0',
+                'background': '#fafafa'
+            }
+            self.figsize = (16, 12)
+            
+        elif self.style == "minimal":
+            # Clean minimal style
+            self.colors = {
+                'historical': '#2E86AB',
+                'forecast': '#A23B72',
+                'actual': '#F18F01',
+                'interval_80': '#C73E1D',
+                'interval_50': '#F18F01',
+                'grid': '#f0f0f0',
+                'background': 'white'
+            }
+            self.figsize = (14, 10)
+            
+        else:  # presentation
+            # High contrast for presentations
+            self.colors = {
+                'historical': '#003f5c',
+                'forecast': '#ff6361',
+                'actual': '#58508d',
+                'interval_80': '#ffa600',
+                'interval_50': '#ff6361',
+                'grid': '#e8e8e8',
+                'background': 'white'
+            }
+            self.figsize = (18, 14)
+    
+    def plot_forecast_with_intervals(
+        self,
+        historical_data: Union[List[float], np.ndarray],
+        forecast: Union[List[float], np.ndarray], 
+        intervals: Optional[Dict[str, np.ndarray]] = None,
+        actual_future: Optional[Union[List[float], np.ndarray]] = None,
+        dates_historical: Optional[List[Union[str, datetime]]] = None,
+        dates_future: Optional[List[Union[str, datetime]]] = None,
+        title: str = "TimesFM Forecast with Prediction Intervals",
+        target_name: str = "Value",
+        save_path: Optional[str] = None
+    ) -> plt.Figure:
+        """
+        Create a professional forecast visualization with prediction intervals.
+        
+        Args:
+            historical_data: Historical time series data
+            forecast: Point forecast values
+            intervals: Dictionary containing prediction intervals
+            actual_future: Optional actual future values for comparison
+            dates_historical: Optional dates for historical data
+            dates_future: Optional dates for forecast period
+            title: Plot title
+            target_name: Name of the target variable
+            save_path: Optional path to save the plot
+            
+        Returns:
+            Matplotlib Figure object
+        """
+        logger.info(f"Creating forecast visualization: {title}")
+        
+        # Convert to numpy arrays
+        historical_data = np.array(historical_data)
+        forecast = np.array(forecast)
+        if actual_future is not None:
+            actual_future = np.array(actual_future)
+        
+        # Create figure
+        fig, ax = plt.subplots(figsize=self.figsize)
+        ax.set_facecolor(self.colors['background'])
+        
+        # Setup time axis
+        if dates_historical is None:
+            historical_x = np.arange(len(historical_data))
+        else:
+            historical_x = pd.to_datetime(dates_historical)
+        
+        if dates_future is None:
+            future_x = np.arange(len(historical_data), len(historical_data) + len(forecast))
+        else:
+            future_x = pd.to_datetime(dates_future)
+        
+        # Plot historical data
+        ax.plot(historical_x, historical_data, 
+               color=self.colors['historical'], linewidth=2.5, 
+               label='Historical Data', zorder=5)
+        
+        # Create seamless connection for forecast
+        if dates_historical is None:
+            connection_x = [len(historical_data) - 1] + list(future_x)
+        else:
+            connection_x = [historical_x[-1]] + list(future_x)
+        
+        connection_forecast = [historical_data[-1]] + list(forecast)
+        
+        # Plot quantile intervals if available
+        if intervals:
+            # Handle different types of intervals
+            if 'lower_80' in intervals and 'upper_80' in intervals:
+                # Traditional confidence intervals
+                interval_lower = [historical_data[-1]] + list(intervals['lower_80'])
+                interval_upper = [historical_data[-1]] + list(intervals['upper_80'])
+                
+                ax.fill_between(connection_x, interval_lower, interval_upper, 
+                               alpha=0.3, color=self.colors['interval_80'], 
+                               label='80% Quantile Interval', zorder=1)
+                               
+                # Add 50% interval if available
+                if 'lower_50' in intervals and 'upper_50' in intervals:
+                    interval_lower_50 = [historical_data[-1]] + list(intervals['lower_50'])
+                    interval_upper_50 = [historical_data[-1]] + list(intervals['upper_50'])
+                    
+                    ax.fill_between(connection_x, interval_lower_50, interval_upper_50, 
+                                   alpha=0.5, color=self.colors['interval_50'], 
+                                   label='50% Quantile Interval', zorder=2)
+            
+            else:
+                # Check for generic confidence levels
+                conf_levels = []
+                for key in intervals.keys():
+                    if key.startswith('lower_'):
+                        conf_level = key.split('_')[1]
+                        if f'upper_{conf_level}' in intervals:
+                            conf_levels.append(int(conf_level))
+                
+                conf_levels.sort(reverse=True)  # Largest first for layering
+                
+                for conf_level in conf_levels:
+                    lower_key = f'lower_{conf_level}'
+                    upper_key = f'upper_{conf_level}'
+                    
+                    if lower_key in intervals and upper_key in intervals:
+                        # Create seamless intervals
+                        interval_lower = [historical_data[-1]] + list(intervals[lower_key])
+                        interval_upper = [historical_data[-1]] + list(intervals[upper_key])
+                        
+                        alpha = 0.3 if conf_level == max(conf_levels) else 0.5
+                        color = self.colors['interval_80'] if conf_level >= 80 else self.colors['interval_50']
+                        
+                        ax.fill_between(connection_x, interval_lower, interval_upper, 
+                                       alpha=alpha, color=color, 
+                                       label=f'{conf_level}% Quantile Interval', zorder=1)
+            
+            # Handle quantile bands (new format)
+            quantile_bands = {}
+            for key in intervals.keys():
+                if key.startswith('quantile_band_') and key.endswith('_lower'):
+                    band_name = key.replace('quantile_band_', '').replace('_lower', '')
+                    upper_key = f'quantile_band_{band_name}_upper'
+                    if upper_key in intervals:
+                        quantile_bands[band_name] = {
+                            'lower': intervals[key],
+                            'upper': intervals[upper_key]
+                        }
+            
+            if quantile_bands:
+                # Define colors for different bands
+                band_colors = ['#ff9999', '#99ccff', '#99ff99', '#ffcc99', '#cc99ff', '#ffff99']
+                
+                logger.info(f"Processing {len(quantile_bands)} quantile bands")
+                logger.info(f"Connection_x length: {len(connection_x)}, Forecast length: {len(forecast)}")
+                
+                for i, (band_name, band_data) in enumerate(sorted(quantile_bands.items())):
+                    color = band_colors[i % len(band_colors)]
+                    alpha = 0.3 + (0.2 * (1 - i / max(1, len(quantile_bands) - 1)))  # Vary alpha
+                    
+                    # Ensure quantile band data matches forecast length
+                    lower_values = band_data['lower']
+                    upper_values = band_data['upper']
+                    
+                    logger.info(f"Band {band_name}: lower length={len(lower_values)}, upper length={len(upper_values)}")
+                    
+                    # Truncate or pad to match forecast length
+                    if len(lower_values) > len(forecast):
+                        lower_values = lower_values[:len(forecast)]
+                        upper_values = upper_values[:len(forecast)]
+                        logger.info(f"Truncated band {band_name} to forecast length")
+                    elif len(lower_values) < len(forecast):
+                        # Pad with last value if too short
+                        last_lower = lower_values[-1] if lower_values else 0
+                        last_upper = upper_values[-1] if upper_values else 0
+                        lower_values = list(lower_values) + [last_lower] * (len(forecast) - len(lower_values))
+                        upper_values = list(upper_values) + [last_upper] * (len(forecast) - len(upper_values))
+                        logger.info(f"Padded band {band_name} to forecast length")
+                    
+                    interval_lower = [historical_data[-1]] + list(lower_values)
+                    interval_upper = [historical_data[-1]] + list(upper_values)
+                    
+                    logger.info(f"Final interval lengths: lower={len(interval_lower)}, upper={len(interval_upper)}, connection_x={len(connection_x)}")
+                    
+                    label_key = f'quantile_band_{band_name}_label'
+                    label_text = intervals.get(label_key, f'Quantile Band {int(band_name)+1}')
+                    
+                    ax.fill_between(connection_x, interval_lower, interval_upper, 
+                                   alpha=alpha, color=color, 
+                                   label=label_text, zorder=1)
+        
+        # Plot forecast line
+        ax.plot(connection_x, connection_forecast, 
+               color=self.colors['forecast'], linestyle='--', linewidth=2.5,
+               label='Point Forecast', zorder=4)
+        
+        # Plot actual future data if available
+        if actual_future is not None:
+            actual_connection = [historical_data[-1]] + list(actual_future)
+            ax.plot(connection_x, actual_connection, 
+                   color=self.colors['actual'], linewidth=3, 
+                   marker='o', markersize=6, markeredgecolor='white',
+                   markeredgewidth=1, label='Actual Future', zorder=6)
+        
+        # Add forecast start line
+        forecast_start = historical_x[-1] if dates_historical else len(historical_data) - 1
+        ax.axvline(x=forecast_start, color='gray', linestyle=':', 
+                  alpha=0.7, linewidth=1.5, label='Forecast Start')
+        
+        # Styling
+        ax.set_title(title, fontsize=18, fontweight='bold', pad=20)
+        ax.set_ylabel(target_name, fontsize=14, fontweight='bold')
+        ax.set_xlabel('Time', fontsize=14, fontweight='bold')
+        
+        # Grid
+        ax.grid(True, alpha=0.3, linestyle='-', linewidth=0.5, color=self.colors['grid'])
+        
+        # Legend
+        legend = ax.legend(loc='upper left', fontsize=12, frameon=True,
+                          fancybox=True, shadow=True, framealpha=0.95)
+        legend.get_frame().set_facecolor('white')
+        
+        # Format axes
+        ax.tick_params(labelsize=12)
+        
+        # Format dates if using datetime
+        if dates_historical is not None:
+            ax.xaxis.set_major_formatter(mdates.DateFormatter('%Y-%m-%d'))
+            ax.xaxis.set_major_locator(mdates.MonthLocator(interval=1))
+            plt.setp(ax.xaxis.get_majorticklabels(), rotation=45)
+        
+        # Add timestamp
+        timestamp = datetime.now().strftime("%Y-%m-%d %H:%M")
+        fig.text(0.99, 0.01, f'Generated: {timestamp}', ha='right', va='bottom', 
+                fontsize=10, alpha=0.7)
+        
+        plt.tight_layout()
+        
+        # Save if requested
+        if save_path:
+            plt.savefig(save_path, dpi=300, bbox_inches='tight', facecolor='white')
+            logger.info(f"Plot saved to: {save_path}")
+        
+        logger.info("✅ Forecast visualization completed")
+        return fig
+    
+    def plot_forecast_with_covariates(
+        self,
+        historical_data: Union[List[float], np.ndarray],
+        forecast: Union[List[float], np.ndarray],
+        covariates_data: Dict[str, Dict[str, Union[List[float], float, str]]],
+        intervals: Optional[Dict[str, np.ndarray]] = None,
+        actual_future: Optional[Union[List[float], np.ndarray]] = None,
+        dates_historical: Optional[List[Union[str, datetime]]] = None,
+        dates_future: Optional[List[Union[str, datetime]]] = None,
+        title: str = "TimesFM Forecast with Covariates Analysis",
+        target_name: str = "Target Value",
+        save_path: Optional[str] = None
+    ) -> plt.Figure:
+        """
+        Create a comprehensive visualization with main forecast and covariates subplots.
+        
+        Args:
+            historical_data: Historical time series data
+            forecast: Point forecast values
+            covariates_data: Dictionary containing covariates information
+            intervals: Optional prediction intervals
+            actual_future: Optional actual future values
+            dates_historical: Optional historical dates
+            dates_future: Optional future dates
+            title: Main plot title
+            target_name: Name of target variable
+            save_path: Optional save path
+            
+        Returns:
+            Matplotlib Figure object
+        """
+        logger.info(f"Creating comprehensive forecast with covariates: {title}")
+        
+        # Count covariates for subplot layout
+        num_covariates = len([k for k, v in covariates_data.items() 
+                             if isinstance(v, dict) and 'historical' in v])
+        
+        # Create subplot layout
+        if num_covariates == 0:
+            return self.plot_forecast_with_intervals(
+                historical_data, forecast, intervals, actual_future,
+                dates_historical, dates_future, title, target_name, save_path
+            )
+        
+        # Determine grid layout
+        if num_covariates <= 2:
+            rows, cols = 2, 2
+            height_ratios = [3, 1]
+        elif num_covariates <= 4:
+            rows, cols = 3, 2  
+            height_ratios = [3, 1, 1]
+        else:
+            rows, cols = 4, 2
+            height_ratios = [3, 1, 1, 1]
+        
+        fig = plt.figure(figsize=(18, 14))
+        gs = fig.add_gridspec(rows, cols, height_ratios=height_ratios, 
+                             hspace=0.35, wspace=0.25)
+        
+        # Main forecast plot (top row, full width)
+        ax_main = fig.add_subplot(gs[0, :])
+        
+        # Convert data
+        historical_data = np.array(historical_data)
+        forecast = np.array(forecast)
+        
+        # Setup time axes
+        if dates_historical is None:
+            historical_x = np.arange(len(historical_data))
+            future_x = np.arange(len(historical_data), len(historical_data) + len(forecast))
+        else:
+            historical_x = pd.to_datetime(dates_historical)
+            future_x = pd.to_datetime(dates_future) if dates_future else None
+        
+        # Plot main forecast (similar to single plot method)
+        ax_main.set_facecolor(self.colors['background'])
+        ax_main.plot(historical_x, historical_data, 
+                    color=self.colors['historical'], linewidth=2.5, 
+                    label='Historical Data', zorder=5)
+        
+        # Forecast with seamless connection
+        if dates_historical is None:
+            connection_x = [len(historical_data) - 1] + list(future_x)
+        else:
+            connection_x = [historical_x[-1]] + list(future_x)
+        connection_forecast = [historical_data[-1]] + list(forecast)
+        
+        # Plot intervals if available
+        if intervals:
+            for key in intervals.keys():
+                if key.startswith('lower_'):
+                    conf_level = key.split('_')[1]
+                    upper_key = f'upper_{conf_level}'
+                    if upper_key in intervals:
+                        interval_lower = [historical_data[-1]] + list(intervals[key])
+                        interval_upper = [historical_data[-1]] + list(intervals[upper_key])
+                        
+                        alpha = 0.3 if int(conf_level) >= 80 else 0.5
+                        color = self.colors['interval_80'] if int(conf_level) >= 80 else self.colors['interval_50']
+                        
+                        ax_main.fill_between(connection_x, interval_lower, interval_upper,
+                                           alpha=alpha, color=color, 
+                                           label=f'{conf_level}% Prediction Interval')
+        
+        ax_main.plot(connection_x, connection_forecast, 
+                    color=self.colors['forecast'], linestyle='--', linewidth=2.5,
+                    label='Point Forecast', zorder=4)
+        
+        # Plot actual future if available
+        if actual_future is not None:
+            actual_future = np.array(actual_future)
+            actual_connection = [historical_data[-1]] + list(actual_future)
+            ax_main.plot(connection_x, actual_connection, 
+                        color=self.colors['actual'], linewidth=3,
+                        marker='o', markersize=6, markeredgecolor='white',
+                        markeredgewidth=1, label='Actual Future', zorder=6)
+        
+        # Forecast start line
+        forecast_start = historical_x[-1] if dates_historical else len(historical_data) - 1
+        ax_main.axvline(x=forecast_start, color='gray', linestyle=':', 
+                       alpha=0.7, linewidth=1.5, label='Forecast Start')
+        
+        # Main plot styling
+        ax_main.set_title(title, fontsize=18, fontweight='bold', pad=20)
+        ax_main.set_ylabel(target_name, fontsize=14, fontweight='bold')
+        ax_main.grid(True, alpha=0.3, color=self.colors['grid'])
+        ax_main.tick_params(labelsize=12)
+        legend = ax_main.legend(loc='upper left', fontsize=12, frameon=True)
+        legend.get_frame().set_facecolor('white')
+        
+        # Create covariate subplots
+        covariate_colors = ['#9467bd', '#e377c2', '#7f7f7f', '#bcbd22', '#17becf', '#d62728']
+        
+        plot_idx = 0
+        for cov_name, cov_data in covariates_data.items():
+            if not isinstance(cov_data, dict) or 'historical' not in cov_data:
+                continue
+                
+            if plot_idx >= (rows - 1) * cols:  # Don't exceed subplot capacity
+                break
+                
+            # Calculate subplot position
+            row = 1 + plot_idx // cols
+            col = plot_idx % cols
+            ax_cov = fig.add_subplot(gs[row, col])
+            
+            color = covariate_colors[plot_idx % len(covariate_colors)]
+            
+            # Plot historical covariate data
+            ax_cov.plot(historical_x, cov_data['historical'],
+                       color=color, linewidth=2.5, alpha=0.8, label='Historical')
+            
+            # Plot future covariate data if available
+            if 'future' in cov_data and future_x is not None:
+                combined_data = list(cov_data['historical']) + list(cov_data['future'])
+                if dates_historical is None:
+                    combined_x = np.arange(len(combined_data))
+                else:
+                    combined_x = list(historical_x) + list(future_x)
+                
+                future_start_idx = len(cov_data['historical']) - 1
+                ax_cov.plot(combined_x[future_start_idx:], combined_data[future_start_idx:],
+                           color=color, linewidth=2.5, linestyle='--', alpha=0.9,
+                           marker='s', markersize=4, label='Future')
+            
+            # Forecast start line
+            ax_cov.axvline(x=forecast_start, color='gray', linestyle=':', alpha=0.5)
+            
+            # Styling
+            ax_cov.set_title(f'{cov_name.replace("_", " ").title()}', 
+                           fontsize=12, fontweight='bold')
+            ax_cov.set_ylabel('Value', fontsize=10)
+            ax_cov.grid(True, alpha=0.3, color=self.colors['grid'])
+            ax_cov.tick_params(labelsize=9)
+            ax_cov.legend(fontsize=8, loc='upper left')
+            ax_cov.set_facecolor(self.colors['background'])
+            
+            plot_idx += 1
+        
+        # Format x-axis for dates
+        if dates_historical is not None:
+            for ax in fig.get_axes():
+                ax.xaxis.set_major_formatter(mdates.DateFormatter('%m/%d'))
+                plt.setp(ax.xaxis.get_majorticklabels(), rotation=45)
+        
+        # Overall title and timestamp
+        fig.suptitle('TimesFM Comprehensive Forecasting Analysis', 
+                    fontsize=20, fontweight='bold', y=0.98)
+        
+        timestamp = datetime.now().strftime("%Y-%m-%d %H:%M")
+        fig.text(0.99, 0.01, f'Generated: {timestamp}', ha='right', va='bottom', 
+                fontsize=10, alpha=0.7)
+        
+        plt.tight_layout()
+        
+        if save_path:
+            plt.savefig(save_path, dpi=300, bbox_inches='tight', facecolor='white')
+            logger.info(f"Comprehensive plot saved to: {save_path}")
+        
+        logger.info("✅ Comprehensive forecast visualization completed")
+        return fig
+    
+    def plot_forecast_comparison(
+        self,
+        forecasts_dict: Dict[str, np.ndarray],
+        historical_data: Union[List[float], np.ndarray],
+        actual_future: Optional[Union[List[float], np.ndarray]] = None,
+        title: str = "Forecast Methods Comparison",
+        save_path: Optional[str] = None
+    ) -> plt.Figure:
+        """
+        Compare multiple forecasting methods in a single plot.
+        
+        Args:
+            forecasts_dict: Dictionary of {method_name: forecast_array}
+            historical_data: Historical data for context
+            actual_future: Optional actual future values
+            title: Plot title
+            save_path: Optional save path
+            
+        Returns:
+            Matplotlib Figure object
+        """
+        logger.info(f"Creating forecast comparison plot: {title}")
+        
+        fig, ax = plt.subplots(figsize=self.figsize)
+        ax.set_facecolor(self.colors['background'])
+        
+        historical_data = np.array(historical_data)
+        historical_x = np.arange(len(historical_data))
+        
+        # Plot historical data
+        ax.plot(historical_x, historical_data, 
+               color=self.colors['historical'], linewidth=2.5,
+               label='Historical Data', zorder=5)
+        
+        # Plot different forecasts
+        forecast_colors = ['#d62728', '#ff7f0e', '#2ca02c', '#9467bd', '#8c564b']
+        
+        for i, (method, forecast) in enumerate(forecasts_dict.items()):
+            forecast = np.array(forecast)
+            future_x = np.arange(len(historical_data), len(historical_data) + len(forecast))
+            
+            # Seamless connection
+            connection_x = [len(historical_data) - 1] + list(future_x)
+            connection_forecast = [historical_data[-1]] + list(forecast)
+            
+            color = forecast_colors[i % len(forecast_colors)]
+            linestyle = '--' if i == 0 else '-.'
+            
+            ax.plot(connection_x, connection_forecast,
+                   color=color, linestyle=linestyle, linewidth=2.5,
+                   label=f'{method} Forecast', zorder=3)
+        
+        # Plot actual future if available
+        if actual_future is not None:
+            actual_future = np.array(actual_future)
+            future_x = np.arange(len(historical_data), len(historical_data) + len(actual_future))
+            connection_x = [len(historical_data) - 1] + list(future_x)
+            actual_connection = [historical_data[-1]] + list(actual_future)
+            
+            ax.plot(connection_x, actual_connection,
+                   color=self.colors['actual'], linewidth=3,
+                   marker='o', markersize=6, markeredgecolor='white',
+                   markeredgewidth=1, label='Actual Future', zorder=6)
+        
+        # Forecast start line
+        ax.axvline(x=len(historical_data) - 1, color='gray', linestyle=':', 
+                  alpha=0.7, linewidth=1.5, label='Forecast Start')
+        
+        # Styling
+        ax.set_title(title, fontsize=18, fontweight='bold', pad=20)
+        ax.set_ylabel('Value', fontsize=14, fontweight='bold')
+        ax.set_xlabel('Time', fontsize=14, fontweight='bold')
+        ax.grid(True, alpha=0.3, color=self.colors['grid'])
+        ax.tick_params(labelsize=12)
+        
+        # Legend
+        legend = ax.legend(loc='upper left', fontsize=12, frameon=True)
+        legend.get_frame().set_facecolor('white')
+        
+        # Timestamp
+        timestamp = datetime.now().strftime("%Y-%m-%d %H:%M")
+        fig.text(0.99, 0.01, f'Generated: {timestamp}', ha='right', va='bottom', 
+                fontsize=10, alpha=0.7)
+        
+        plt.tight_layout()
+        
+        if save_path:
+            plt.savefig(save_path, dpi=300, bbox_inches='tight', facecolor='white')
+            logger.info(f"Comparison plot saved to: {save_path}")
+        
+        logger.info("✅ Forecast comparison visualization completed")
+        return fig

webapp/app.py

@@ -0,0 +1,758 @@
+"""
+Sapheneia TimesFM Web Application
+
+A Flask-based web application for TimesFM forecasting with a professional interface.
+Supports localhost deployment.
+
+Features:
+- File upload for CSV data
+- Interactive parameter configuration
+- Real-time forecasting with TimesFM
+- Professional visualizations
+- Downloadable results
+- Support for covariates and quantile forecasting
+"""
+
+import os
+import sys
+import json
+import logging
+from datetime import datetime, timedelta
+from typing import Dict, List, Optional, Any
+
+import pandas as pd
+import numpy as np
+from flask import Flask, render_template, request, jsonify, send_file, redirect, url_for, flash
+from werkzeug.utils import secure_filename
+import tempfile
+
+# Add src to path
+sys.path.append(os.path.join(os.path.dirname(__file__), '..', 'src'))
+
+# Import Sapheneia TimesFM modules
+from model import TimesFMModel, initialize_timesfm_model
+from data import DataProcessor, prepare_visualization_data
+from forecast import Forecaster, run_forecast, process_quantile_bands
+
+# Configure logging
+logging.basicConfig(level=logging.INFO)
+logger = logging.getLogger(__name__)
+
+# Initialize Flask app
+app = Flask(__name__)
+app.secret_key = os.environ.get('SECRET_KEY', 'your-secret-key-change-this-in-production')
+
+# Configuration
+UPLOAD_FOLDER = 'uploads'
+RESULTS_FOLDER = 'results'
+ALLOWED_EXTENSIONS = {'csv'}
+MAX_FILE_SIZE = 16 * 1024 * 1024  # 16MB
+
+# Ensure directories exist
+for folder in [UPLOAD_FOLDER, RESULTS_FOLDER]:
+    os.makedirs(folder, exist_ok=True)
+
+app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
+app.config['RESULTS_FOLDER'] = RESULTS_FOLDER
+app.config['MAX_CONTENT_LENGTH'] = MAX_FILE_SIZE
+
+# Global variables for model management
+current_model = None
+current_forecaster = None
+current_visualizer = None
+
+
+def allowed_file(filename):
+    """Check if file extension is allowed."""
+    return '.' in filename and filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS
+
+
+def init_model(backend='cpu', context_len=64, horizon_len=24, checkpoint=None, local_path=None):
+    """Initialize TimesFM model with given parameters using centralized function."""
+    global current_model, current_forecaster, current_visualizer
+    
+    try:
+        logger.info(f"Initializing model with backend={backend}, context={context_len}, horizon={horizon_len}")
+        
+        # Use centralized model initialization
+        current_model, current_forecaster, current_visualizer = initialize_timesfm_model(
+            backend=backend,
+            context_len=context_len,
+            horizon_len=horizon_len,
+            checkpoint=checkpoint,
+            local_model_path=local_path
+        )
+        
+        logger.info("Model initialized successfully")
+        return True, "Model initialized successfully"
+        
+    except Exception as e:
+        logger.error(f"Model initialization failed: {str(e)}")
+        return False, f"Model initialization failed: {str(e)}"
+
+
+# Sample data generation removed as per requirements
+
+
+@app.route('/')
+def index():
+    """Main page."""
+    return render_template('index.html')
+
+
+@app.route('/api/model/init', methods=['POST'])
+def api_init_model():
+    """Initialize TimesFM model via API."""
+    try:
+        data = request.get_json()
+        
+        backend = data.get('backend', 'cpu')
+        context_len = int(data.get('context_len', 64))
+        horizon_len = int(data.get('horizon_len', 24))
+        checkpoint = data.get('checkpoint')
+        local_path = data.get('local_path')
+        
+        # Use default checkpoint if none specified
+        if not checkpoint and not local_path:
+            checkpoint = "google/timesfm-2.0-500m-pytorch"
+        
+        success, message = init_model(backend, context_len, horizon_len, checkpoint, local_path)
+        
+        return jsonify({
+            'success': success,
+            'message': message,
+            'model_info': current_model.get_model_info() if success else None
+        })
+        
+    except Exception as e:
+        logger.error(f"API model init error: {str(e)}")
+        return jsonify({'success': False, 'message': str(e)}), 500
+
+
+@app.route('/api/data/upload', methods=['POST'])
+def api_upload_data():
+    """Upload and process CSV data."""
+    try:
+        if 'file' not in request.files:
+            return jsonify({'success': False, 'message': 'No file uploaded'}), 400
+        
+        file = request.files['file']
+        if file.filename == '':
+            return jsonify({'success': False, 'message': 'No file selected'}), 400
+        
+        if not allowed_file(file.filename):
+            return jsonify({'success': False, 'message': 'Invalid file type. Only CSV files allowed.'}), 400
+        
+        # Save uploaded file
+        filename = secure_filename(file.filename)
+        timestamp = datetime.now().strftime('%Y%m%d_%H%M%S')
+        filename = f"{timestamp}_{filename}"
+        filepath = os.path.join(app.config['UPLOAD_FOLDER'], filename)
+        
+        try:
+            file.save(filepath)
+            logger.info(f"File saved successfully: {filepath}")
+            
+            # Load and analyze data
+            df = pd.read_csv(filepath)
+            logger.info(f"CSV loaded successfully with shape: {df.shape}")
+            
+            # Convert data to JSON-serializable format
+            df_head = df.head()
+            head_records = []
+            for _, row in df_head.iterrows():
+                record = {}
+                for col in df.columns:
+                    value = row[col]
+                    if pd.isna(value):
+                        record[col] = None
+                    elif isinstance(value, (pd.Timestamp, datetime)):
+                        record[col] = str(value)
+                    elif isinstance(value, (np.integer, np.floating)):
+                        record[col] = float(value)
+                    else:
+                        record[col] = str(value)
+                head_records.append(record)
+            
+            df_info = {
+                'filename': filename,
+                'shape': list(df.shape),  # Convert tuple to list
+                'columns': df.columns.tolist(),
+                'dtypes': {col: str(dtype) for col, dtype in df.dtypes.items()},
+                'head': head_records,
+                'null_counts': {col: int(count) for col, count in df.isnull().sum().items()}
+            }
+            
+            # Check for date column
+            has_date = 'date' in df.columns
+            if has_date:
+                try:
+                    df['date'] = pd.to_datetime(df['date'], errors='coerce')
+                    # Get all unique dates in the data
+                    available_dates = df['date'].dropna().dt.date.unique()
+                    available_dates = sorted([str(date) for date in available_dates])
+                    
+                    df_info['date_range'] = {
+                        'start': str(df['date'].min().date()) if not df['date'].isnull().all() else None,
+                        'end': str(df['date'].max().date()) if not df['date'].isnull().all() else None,
+                        'periods': len(df),
+                        'available_dates': available_dates
+                    }
+                except Exception as date_error:
+                    logger.warning(f"Date parsing failed: {date_error}")
+                    has_date = False
+            
+            # Check if this looks like forecast output data instead of time series data
+            forecast_output_indicators = [
+                'period', 'point_forecast', 'quantile_forecast', 'forecast', 
+                'prediction', 'forecast_lower', 'forecast_upper', 'quantile'
+            ]
+            
+            column_names_lower = [col.lower() for col in df.columns]
+            is_forecast_output = any(indicator in ' '.join(column_names_lower) for indicator in forecast_output_indicators)
+            
+            if is_forecast_output:
+                logger.warning("Detected forecast output data instead of time series data")
+                return jsonify({
+                    'success': False, 
+                    'message': 'This appears to be forecast output data, not time series input data. Please upload your original time series data with a "date" column and numeric value columns.',
+                    'is_forecast_output': True,
+                    'suggested_columns': ['date', 'value', 'price', 'amount', 'count', 'sales', 'revenue']
+                }), 400
+            
+            logger.info(f"Data analysis completed. Has date column: {has_date}")
+            
+            # Create response
+            response_data = {
+                'success': True,
+                'message': 'File uploaded successfully',
+                'data_info': df_info,
+                'has_date_column': has_date
+            }
+            
+            logger.info(f"Sending response with keys: {list(response_data.keys())}")
+            return jsonify(response_data)
+            
+        except Exception as processing_error:
+            logger.error(f"File processing error: {processing_error}")
+            if os.path.exists(filepath):
+                os.remove(filepath)
+            raise processing_error
+        
+    except Exception as e:
+        logger.error(f"File upload error: {str(e)}")
+        return jsonify({'success': False, 'message': f'Upload failed: {str(e)}'}), 500
+
+
+@app.route('/api/sample_data', methods=['POST'])
+def api_sample_data():
+    """Generate sample time series data for testing."""
+    try:
+        data = request.get_json()
+        data_type = data.get('type', 'financial')
+        periods = int(data.get('periods', 100))
+        
+        # Generate sample data
+        dates = pd.date_range(start='2020-01-01', periods=periods, freq='D')
+        
+        if data_type == 'financial':
+            # Generate financial time series (like stock prices)
+            np.random.seed(42)
+            base_price = 100
+            returns = np.random.normal(0.001, 0.02, periods)  # Daily returns
+            prices = [base_price]
+            for ret in returns[1:]:
+                prices.append(prices[-1] * (1 + ret))
+            
+            sample_data = pd.DataFrame({
+                'date': dates,
+                'price': prices,
+                'volume': np.random.randint(1000, 10000, periods),
+                'volatility': np.random.uniform(0.1, 0.3, periods)
+            })
+            
+        elif data_type == 'sales':
+            # Generate sales data
+            np.random.seed(42)
+            trend = np.linspace(100, 150, periods)
+            seasonal = 20 * np.sin(2 * np.pi * np.arange(periods) / 365.25)
+            noise = np.random.normal(0, 5, periods)
+            sales = trend + seasonal + noise
+            
+            sample_data = pd.DataFrame({
+                'date': dates,
+                'sales': sales,
+                'customers': np.random.randint(50, 200, periods),
+                'marketing_spend': np.random.uniform(1000, 5000, periods)
+            })
+            
+        else:
+            # Generate generic time series
+            np.random.seed(42)
+            trend = np.linspace(0, 100, periods)
+            seasonal = 10 * np.sin(2 * np.pi * np.arange(periods) / 30)
+            noise = np.random.normal(0, 2, periods)
+            values = trend + seasonal + noise
+            
+            sample_data = pd.DataFrame({
+                'date': dates,
+                'value': values,
+                'category': np.random.choice(['A', 'B', 'C'], periods),
+                'score': np.random.uniform(0, 100, periods)
+            })
+        
+        # Save sample data
+        filename = f"sample_{data_type}_data_{datetime.now().strftime('%Y%m%d_%H%M%S')}.csv"
+        filepath = os.path.join(app.config['UPLOAD_FOLDER'], filename)
+        sample_data.to_csv(filepath, index=False)
+        
+        # Return data info
+        df_info = {
+            'filename': filename,
+            'shape': list(sample_data.shape),
+            'columns': sample_data.columns.tolist(),
+            'dtypes': {col: str(dtype) for col, dtype in sample_data.dtypes.items()},
+            'head': sample_data.head().to_dict('records'),
+            'null_counts': {col: int(count) for col, count in sample_data.isnull().sum().items()},
+            'date_range': {
+                'start': str(sample_data['date'].min().date()),
+                'end': str(sample_data['date'].max().date()),
+                'periods': len(sample_data)
+            }
+        }
+        
+        return jsonify({
+            'success': True,
+            'message': f'Sample {data_type} data generated successfully',
+            'data_info': df_info,
+            'has_date_column': True
+        })
+        
+    except Exception as e:
+        logger.error(f"Sample data generation error: {str(e)}")
+        return jsonify({'success': False, 'message': f'Sample data generation failed: {str(e)}'}), 500
+
+
+@app.route('/api/forecast', methods=['POST'])
+def api_forecast():
+    """Perform forecasting with uploaded data."""
+    try:
+        if not current_model or not current_forecaster:
+            return jsonify({'success': False, 'message': 'Model not initialized'}), 400
+        
+        data = request.get_json()
+        filename = data.get('filename')
+        data_definition = data.get('data_definition', {})
+        use_covariates = data.get('use_covariates', False)
+        use_quantiles = data.get('use_quantiles', False)
+        context_len = int(data.get('context_len', 64))
+        horizon_len = int(data.get('horizon_len', 24))
+        
+        if not filename:
+            return jsonify({'success': False, 'message': 'No data file specified'}), 400
+        
+        # Load data
+        filepath = os.path.join(app.config['UPLOAD_FOLDER'], filename)
+        if not os.path.exists(filepath):
+            return jsonify({'success': False, 'message': 'Data file not found'}), 400
+        
+        # Process data
+        data_processor = DataProcessor()
+        processed_data = data_processor.load_csv_data(filepath, data_definition)
+        
+        # Filter data based on context dates if provided
+        context_start_date = data.get('context_start_date')
+        context_end_date = data.get('context_end_date')
+        
+        if context_start_date and context_end_date:
+            # Convert string dates to datetime
+            context_start = pd.to_datetime(context_start_date)
+            context_end = pd.to_datetime(context_end_date)
+            
+            # For visualization, we need data that includes both context and horizon periods
+            # Calculate horizon end date (horizon_len periods after context_end)
+            horizon_end = context_end + pd.Timedelta(days=horizon_len * 7)  # Assuming weekly data
+            
+            # Filter data to include both context and horizon periods for actual future values
+            processed_data_for_viz = processed_data[
+                (processed_data['date'] >= context_start) & 
+                (processed_data['date'] <= horizon_end)
+            ].reset_index(drop=True)
+            
+            # For forecasting, we still only use the context period
+            processed_data_for_forecast = processed_data[
+                (processed_data['date'] >= context_start) & 
+                (processed_data['date'] <= context_end)
+            ].reset_index(drop=True)
+            
+            logger.info(f"Filtered data for forecasting: {context_start_date} to {context_end_date}")
+            logger.info(f"Forecast data shape: {processed_data_for_forecast.shape}")
+            logger.info(f"Forecast data date range: {processed_data_for_forecast['date'].min()} to {processed_data_for_forecast['date'].max()}")
+            logger.info(f"Filtered data for visualization: {context_start_date} to {horizon_end.strftime('%Y-%m-%d')}")
+            logger.info(f"Visualization data shape: {processed_data_for_viz.shape}")
+            logger.info(f"Visualization data date range: {processed_data_for_viz['date'].min()} to {processed_data_for_viz['date'].max()}")
+            
+            # Use forecast data for the actual forecasting
+            processed_data = processed_data_for_forecast
+        
+        # Check data sufficiency - only need context_len for the data
+        if len(processed_data) < context_len:
+            return jsonify({
+                'success': False, 
+                'message': f'Insufficient data. Need {context_len} periods, have {len(processed_data)}'
+            }), 400
+        
+        # Prepare forecast data
+        target_column = None
+        for col, dtype in data_definition.items():
+            if dtype == 'target':
+                target_column = col
+                break
+        
+        if not target_column:
+            return jsonify({'success': False, 'message': 'No target column specified'}), 400
+        
+        target_inputs, covariates = data_processor.prepare_forecast_data(
+            processed_data, context_len, horizon_len, target_column
+        )
+        
+        # Debug: Log covariate information
+        logger.info(f"Forecast data preparation completed:")
+        logger.info(f"  - Context length: {context_len}")
+        logger.info(f"  - Horizon length: {horizon_len}")
+        logger.info(f"  - Processed data shape: {processed_data.shape}")
+        logger.info(f"  - Processed data date range: {processed_data['date'].min()} to {processed_data['date'].max()}")
+        logger.info(f"  - Target inputs length: {len(target_inputs)}")
+        logger.info(f"  - Covariates keys: {list(covariates.keys()) if covariates else 'None'}")
+        
+        if covariates:
+            for cov_type, cov_data in covariates.items():
+                if isinstance(cov_data, dict):
+                    logger.info(f"  - {cov_type} covariates: {len(cov_data)} items")
+                    for key, value in cov_data.items():
+                        if isinstance(value, list):
+                            logger.info(f"    - {key}: {len(value)} values")
+                        elif isinstance(value, np.ndarray):
+                            logger.info(f"    - {key}: shape {value.shape}")
+                        else:
+                            logger.info(f"    - {key}: {type(value)}")
+                else:
+                    logger.info(f"  - {cov_type} covariates: {type(cov_data)}")
+        
+        # COMPREHENSIVE MODEL INPUT DEBUGGING
+        logger.info("=" * 80)
+        logger.info("COMPREHENSIVE MODEL INPUT DEBUGGING")
+        logger.info("=" * 80)
+        
+        # Frontend parameters received
+        logger.info(f"FRONTEND PARAMETERS RECEIVED:")
+        logger.info(f"  - Context Start Date: {context_start_date}")
+        logger.info(f"  - Context End Date: {context_end_date}")
+        logger.info(f"  - Context Length: {context_len}")
+        logger.info(f"  - Horizon Length: {horizon_len}")
+        logger.info(f"  - Target Column: {target_column}")
+        
+        # Data filtering results
+        logger.info(f"DATA FILTERING RESULTS:")
+        logger.info(f"  - Original data shape: {processed_data.shape}")
+        logger.info(f"  - Filtered data date range: {processed_data['date'].min()} to {processed_data['date'].max()}")
+        logger.info(f"  - Available columns: {list(processed_data.columns)}")
+        
+        # Target data details
+        logger.info(f"TARGET DATA DETAILS:")
+        logger.info(f"  - Target column: {target_column}")
+        logger.info(f"  - Target values length: {len(target_inputs)}")
+        logger.info(f"  - Target values range: {min(target_inputs):.4f} to {max(target_inputs):.4f}")
+        logger.info(f"  - First 5 target values: {target_inputs[:5]}")
+        logger.info(f"  - Last 5 target values: {target_inputs[-5:]}")
+        
+        # Covariate details
+        logger.info(f"COVARIATE DETAILS:")
+        if covariates:
+            for cov_type, cov_data in covariates.items():
+                logger.info(f"  - {cov_type}:")
+                if isinstance(cov_data, dict):
+                    for key, value in cov_data.items():
+                        if isinstance(value, list) and len(value) > 0:
+                            if isinstance(value[0], list):  # Nested list structure
+                                inner_list = value[0]
+                                logger.info(f"    - {key}: {len(inner_list)} values")
+                                logger.info(f"      First 5: {inner_list[:5]}")
+                                logger.info(f"      Last 5: {inner_list[-5:]}")
+                            else:  # Simple list
+                                logger.info(f"    - {key}: {len(value)} values")
+                                logger.info(f"      Values: {value}")
+                        else:
+                            logger.info(f"    - {key}: {value}")
+                else:
+                    logger.info(f"    - Raw data: {cov_data}")
+        else:
+            logger.info("  - No covariates provided")
+        
+        # Model configuration
+        logger.info(f"MODEL CONFIGURATION:")
+        logger.info(f"  - Context Length: {context_len}")
+        logger.info(f"  - Horizon Length: {horizon_len}")
+        logger.info(f"  - Total Length: {context_len + horizon_len}")
+        logger.info(f"  - Has Covariates: {bool(covariates)}")
+        
+        logger.info("=" * 80)
+        
+        # Perform forecasting using centralized function
+        try:
+            # Ensure target_inputs is in the correct format (list of lists)
+            if isinstance(target_inputs[0], (int, float)):
+                target_inputs_formatted = [target_inputs]
+            else:
+                target_inputs_formatted = target_inputs
+            
+            results = run_forecast(
+                forecaster=current_forecaster,
+                target_inputs=target_inputs_formatted,
+                covariates=covariates if use_covariates and any(covariates.values()) else None,
+                use_covariates=use_covariates and any(covariates.values()),
+                freq=0
+            )
+            
+            # Check for NaN values before JSON serialization
+            for key, value in results.items():
+                if isinstance(value, np.ndarray):
+                    if np.any(np.isnan(value)):
+                        logger.error(f"❌ NaN values detected in {key}: {np.isnan(value).sum()} out of {value.size}")
+                        return jsonify({
+                            'success': False, 
+                            'message': f'Forecasting failed: Invalid values (NaN) detected in {key}. This may be due to insufficient data or model issues.'
+                        }), 500
+                    
+                    if key == 'quantile_forecast':
+                        # For quantiles, keep the full array structure
+                        if value.ndim == 3:
+                            results[key] = value[0].tolist()  # (1, horizon, quantiles) -> (horizon, quantiles)
+                        else:
+                            results[key] = value.tolist()
+                    elif value.ndim > 1:
+                        results[key] = value[0].tolist()  # Take first series if batch
+                    else:
+                        results[key] = value.tolist()
+                elif isinstance(value, (list, tuple)):
+                    # Check for NaN in lists/tuples
+                    if any(isinstance(x, float) and np.isnan(x) for x in value):
+                        logger.error(f"❌ NaN values detected in {key} list")
+                        return jsonify({
+                            'success': False, 
+                            'message': f'Forecasting failed: Invalid values (NaN) detected in {key}. This may be due to insufficient data or model issues.'
+                        }), 500
+            
+            logger.info(f"✅ Centralized forecasting completed. Methods: {list(results.keys())}")
+            logger.info(f"Results structure: {[(k, type(v), len(v) if hasattr(v, '__len__') else 'N/A') for k, v in results.items()]}")
+            if 'quantile_forecast' in results:
+                shape_quantile = len(results['quantile_forecast']) if hasattr(results['quantile_forecast'], '__len__') else 'N/A'
+                logger.info(f"Quantile forecast shape: {shape_quantile}")
+            else:
+                logger.warning("No quantile_forecast in results!")
+            
+        except Exception as e:
+            logger.error(f"Centralized forecasting failed: {str(e)}")
+            return jsonify({'success': False, 'message': f'Forecasting failed: {str(e)}'}), 500
+        
+        # Prepare visualization data using centralized function
+        # Use forecast data for historical data (respects context end date)
+        # Pass extended data separately for actual future values
+        visualization_data = prepare_visualization_data(
+            processed_data=processed_data,  # Use forecast data for historical data
+            target_inputs=target_inputs,
+            target_column=target_column,
+            context_len=context_len,
+            horizon_len=horizon_len,
+            extended_data=processed_data_for_viz if 'processed_data_for_viz' in locals() else None
+        )
+        
+        return jsonify({
+            'success': True,
+            'message': 'Forecasting completed successfully',
+            'results': results,
+            'visualization_data': visualization_data,
+            'forecast_summary': {
+                'methods_used': list(results.keys()),
+                'context_length': context_len,
+                'horizon_length': horizon_len,
+                'target_column': target_column,
+                'covariates_used': use_covariates and any(covariates.values())
+            }
+        })
+        
+    except Exception as e:
+        logger.error(f"Forecasting error: {str(e)}")
+        return jsonify({'success': False, 'message': f'Forecasting failed: {str(e)}'}), 500
+
+
+@app.route('/api/visualize', methods=['POST'])
+def api_visualize():
+    """Generate visualization and return as base64 image."""
+    try:
+        data = request.get_json()
+        viz_data = data.get('visualization_data', {})
+        results = data.get('results', {})
+        selected_indices = data.get('quantile_indices', [])
+        
+        if not current_visualizer:
+            return jsonify({'success': False, 'message': 'Visualizer not initialized'}), 400
+        
+        # Extract data
+        historical_data = viz_data.get('historical_data', [])
+        dates_historical = [pd.to_datetime(d) for d in viz_data.get('dates_historical', [])]
+        dates_future = [pd.to_datetime(d) for d in viz_data.get('dates_future', [])]
+        actual_future = viz_data.get('actual_future', [])
+        target_name = viz_data.get('target_name', 'Value')
+        
+        # COMPREHENSIVE VISUALIZATION DEBUGGING
+        logger.info("=" * 80)
+        logger.info("VISUALIZATION ENDPOINT DEBUGGING")
+        logger.info("=" * 80)
+        logger.info(f"Visualization data received:")
+        logger.info(f"  - historical_data length: {len(historical_data)}")
+        logger.info(f"  - dates_historical length: {len(dates_historical)}")
+        logger.info(f"  - dates_future length: {len(dates_future)}")
+        logger.info(f"  - actual_future length: {len(actual_future)}")
+        logger.info(f"  - target_name: {target_name}")
+        
+        if historical_data:
+            logger.info(f"  - historical_data range: {min(historical_data):.4f} to {max(historical_data):.4f}")
+            logger.info(f"  - first 5 historical values: {historical_data[:5]}")
+            logger.info(f"  - last 5 historical values: {historical_data[-5:]}")
+        
+        if dates_historical:
+            logger.info(f"  - first historical date: {dates_historical[0]}")
+            logger.info(f"  - last historical date: {dates_historical[-1]}")
+        
+        logger.info(f"Results keys: {list(results.keys())}")
+        logger.info("=" * 80)
+        
+        # Choose best forecast
+        if 'point_forecast' in results:
+            forecast = results['point_forecast']
+            if results.get('method') == 'covariates_enhanced':
+                title = f"{target_name} Forecast with Covariates Enhancement"
+            else:
+                title = f"{target_name} Forecast (TimesFM)"
+        else:
+            return jsonify({'success': False, 'message': 'No forecast data available'}), 400
+        
+        # Process quantile bands using centralized function
+        intervals = {}
+        used_quantile_intervals = False
+        quantile_shape = None
+        
+        logger.info(f"Available results keys: {list(results.keys())}")
+        if 'quantile_forecast' in results:
+            try:
+                quantiles = np.array(results['quantile_forecast'])
+                quantile_shape = list(quantiles.shape)
+                logger.info(f"Quantile forecast shape received for viz: {quantile_shape}")
+                
+                # Use centralized quantile processing
+                intervals = process_quantile_bands(
+                    quantile_forecast=quantiles,
+                    selected_indices=selected_indices if selected_indices and len(selected_indices) > 0 else []
+                )
+                
+                used_quantile_intervals = len(intervals) > 0
+                logger.info(f"✅ Processed quantile bands using centralized function. Bands: {len(intervals)//3}")
+                
+            except Exception as e:
+                logger.warning(f"Quantile band processing failed: {e}")
+                intervals = {}
+                used_quantile_intervals = False
+        else:
+            logger.warning("No quantile_forecast found in results - quantile intervals will not be displayed")
+        
+        # Generate plot
+        try:
+            logger.info(f"Generating plot with forecast length: {len(forecast)}")
+            logger.info(f"Historical data type: {type(historical_data)}, length: {len(historical_data) if hasattr(historical_data, '__len__') else 'N/A'}")
+            logger.info(f"Forecast type: {type(forecast)}, length: {len(forecast) if hasattr(forecast, '__len__') else 'N/A'}")
+            logger.info(f"Intervals keys: {list(intervals.keys()) if intervals else 'None'}")
+            logger.info(f"Dates historical length: {len(dates_historical)}")
+            logger.info(f"Dates future length: {len(dates_future)}")
+
+            fig = current_visualizer.plot_forecast_with_intervals(
+                historical_data=historical_data,
+                forecast=forecast,
+                intervals=intervals if intervals else None,
+                actual_future=actual_future if actual_future else None,
+                dates_historical=dates_historical,
+                dates_future=dates_future,
+                title=title,
+                target_name=target_name,
+                show_figure=False
+            )
+            logger.info("Interactive plot generated successfully")
+        except Exception as plot_error:
+            logger.error(f"Plot generation failed: {str(plot_error)}")
+            import traceback
+            traceback.print_exc()
+            raise plot_error
+
+        figure_payload = json.loads(fig.to_json())
+        plot_config = {
+            'responsive': True,
+            'displaylogo': False,
+            'modeBarButtonsToRemove': ['lasso2d', 'select2d']
+        }
+
+        return jsonify({
+            'success': True,
+            'message': 'Visualization generated successfully',
+            'figure': figure_payload,
+            'config': plot_config,
+            'used_quantile_intervals': used_quantile_intervals,
+            'quantile_shape': quantile_shape
+        })
+        
+    except Exception as e:
+        logger.error(f"Visualization error: {str(e)}")
+        return jsonify({'success': False, 'message': f'Visualization failed: {str(e)}'}), 500
+
+
+@app.route('/health')
+def health_check():
+    """Health check endpoint."""
+    return jsonify({
+        'status': 'healthy',
+        'timestamp': datetime.now().isoformat(),
+        'model_loaded': current_model is not None
+    })
+
+
+@app.errorhandler(413)
+def too_large(e):
+    """Handle file too large error."""
+    return jsonify({'success': False, 'message': 'File too large. Maximum size is 16MB.'}), 413
+
+
+@app.errorhandler(500)
+def internal_error(e):
+    """Handle internal server error."""
+    return jsonify({'success': False, 'message': 'Internal server error.'}), 500
+
+
+if __name__ == '__main__':
+    # Configuration for different environments
+    # Detect if running in Docker/HF Spaces (port 7860) or local development (port 8080)
+    is_docker = os.path.exists('/.dockerenv')
+    is_hf_spaces = os.environ.get('SPACE_ID') is not None
+
+    # Use port 7860 for Docker/HF Spaces, 8080 for local development
+    default_port = 7860 if (is_docker or is_hf_spaces) else 8080
+    port = int(os.environ.get('PORT', default_port))
+    debug = os.environ.get('FLASK_ENV') == 'development'
+
+    # Initialize default model for local development or HF Spaces
+    if debug or is_hf_spaces:
+        logger.info("Initializing default TimesFM model...")
+        init_model(backend='cpu', context_len=64, horizon_len=24,
+                   checkpoint="google/timesfm-2.0-500m-pytorch")
+
+    # Run the app
+    logger.info(f"Starting Sapheneia TimesFM webapp on port {port}")
+    app.run(host='0.0.0.0', port=port, debug=debug)

webapp/requirements.txt

@@ -0,0 +1,31 @@
+# Sapheneia TimesFM Web Application Dependencies
+
+# Core framework
+Flask==3.0.0
+Werkzeug==3.0.1
+Jinja2==3.1.2
+
+# TimesFM and AI dependencies
+timesfm>=1.3.0
+jax>=0.7.0
+jaxlib>=0.7.0
+torch>=2.0.0
+
+# Data processing
+pandas>=2.0.0
+numpy>=1.26.4
+scikit-learn>=1.2.2
+
+# Visualization
+matplotlib>=3.10.5
+seaborn>=0.13.2
+
+# Utilities
+python-dateutil>=2.8.2
+typer>=0.12.3
+
+# Production server
+gunicorn==21.2.0
+
+# Optional: For enhanced compatibility
+Pillow>=9.0.0

webapp/static/css/styles.css

@@ -0,0 +1,425 @@
+/*
+ * Sapheneia TimesFM Web Application Styles
+ * Professional styling for time series forecasting interface
+ */
+
+:root {
+    --sapheneia-primary: #0066cc;
+    --sapheneia-secondary: #6c757d;
+    --sapheneia-success: #28a745;
+    --sapheneia-warning: #ffc107;
+    --sapheneia-info: #17a2b8;
+    --sapheneia-light: #f8f9fa;
+    --sapheneia-dark: #343a40;
+}
+
+/* Global Styles */
+body {
+    background-color: var(--sapheneia-light);
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+
+.navbar-brand {
+    font-size: 1.5rem;
+    font-weight: 700;
+}
+
+/* Card Enhancements */
+.card {
+    border: none;
+    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
+    border-radius: 0.5rem;
+}
+
+.card-header {
+    border-top-left-radius: 0.5rem !important;
+    border-top-right-radius: 0.5rem !important;
+    border-bottom: none;
+    font-weight: 600;
+}
+
+/* Form Enhancements */
+.form-control:focus,
+.form-select:focus {
+    border-color: var(--sapheneia-primary);
+    box-shadow: 0 0 0 0.2rem rgba(0, 102, 204, 0.25);
+}
+
+.form-label {
+    font-weight: 600;
+    color: var(--sapheneia-dark);
+}
+
+/* Button Styles */
+.btn {
+    border-radius: 0.375rem;
+    font-weight: 500;
+    transition: all 0.2s ease-in-out;
+}
+
+.btn:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.15);
+}
+
+/* Status Badge */
+.badge {
+    font-size: 0.875rem;
+    padding: 0.5rem 0.75rem;
+}
+
+/* Column Selection Styles */
+.column-checkbox {
+    transform: scale(1.1);
+}
+
+.column-checkbox:checked {
+    background-color: var(--sapheneia-success);
+    border-color: var(--sapheneia-success);
+}
+
+.form-check-label {
+    font-weight: 500;
+    color: var(--sapheneia-dark);
+    cursor: pointer;
+    transition: color 0.2s ease-in-out;
+    font-size: 0.85rem;
+}
+
+.form-check-label:hover {
+    color: var(--sapheneia-primary);
+}
+
+/* Data Definition Styles */
+.column-definition {
+    background-color: white;
+    border: 1px solid #dee2e6;
+    border-radius: 0.375rem;
+    padding: 1rem;
+    margin-bottom: 1rem;
+    transition: all 0.2s ease-in-out;
+}
+
+.column-definition:hover {
+    border-color: var(--sapheneia-primary);
+    box-shadow: 0 0.125rem 0.25rem rgba(0, 102, 204, 0.1);
+}
+
+.column-name {
+    font-weight: 600;
+    color: var(--sapheneia-primary);
+    font-family: 'Courier New', monospace;
+}
+
+.column-type {
+    font-size: 0.875rem;
+    color: var(--sapheneia-secondary);
+}
+
+/* Data Info Table */
+.data-info-table {
+    background-color: white;
+    border-radius: 0.375rem;
+}
+
+.data-info-table th {
+    background-color: var(--sapheneia-light);
+    font-weight: 600;
+    border-top: none;
+}
+
+/* Alert Enhancements */
+.alert {
+    border: none;
+    border-radius: 0.5rem;
+    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
+}
+
+.alert-success {
+    background-color: rgba(40, 167, 69, 0.1);
+    color: #155724;
+}
+
+.alert-danger {
+    background-color: rgba(220, 53, 69, 0.1);
+    color: #721c24;
+}
+
+.alert-warning {
+    background-color: rgba(255, 193, 7, 0.1);
+    color: #856404;
+}
+
+.alert-info {
+    background-color: rgba(23, 162, 184, 0.1);
+    color: #0c5460;
+}
+
+/* Loading Styles */
+.spinner-border {
+    width: 3rem;
+    height: 3rem;
+}
+
+/* Tab Enhancements */
+.nav-tabs .nav-link {
+    border: none;
+    border-radius: 0.375rem 0.375rem 0 0;
+    color: var(--sapheneia-secondary);
+    font-weight: 500;
+}
+
+.nav-tabs .nav-link.active {
+    background-color: white;
+    color: var(--sapheneia-primary);
+    border-bottom: 2px solid var(--sapheneia-primary);
+}
+
+/* Chart Container */
+.chart-container {
+    width: 100%;
+    height: 70vh;
+    min-height: 480px;
+    max-height: 800px;
+    margin: 0 auto;
+    position: relative;
+}
+
+#forecastChart {
+    border: 1px solid #dee2e6;
+    border-radius: 0.375rem;
+    background-color: white;
+    width: 100%;
+    height: 100%;
+    resize: both;
+    overflow: hidden;
+}
+
+/* Summary Cards */
+.summary-card {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    border-radius: 0.5rem;
+    padding: 1.5rem;
+    margin-bottom: 1rem;
+    text-align: center;
+}
+
+.summary-value {
+    font-size: 2rem;
+    font-weight: 700;
+    margin-bottom: 0.5rem;
+}
+
+.summary-label {
+    font-size: 0.875rem;
+    opacity: 0.9;
+}
+
+/* Data Table */
+.table-responsive {
+    border-radius: 0.375rem;
+    overflow: hidden;
+}
+
+.table {
+    margin-bottom: 0;
+}
+
+.table th {
+    background-color: var(--sapheneia-primary);
+    color: white;
+    font-weight: 600;
+    border: none;
+    padding: 1rem 0.75rem;
+}
+
+.table td {
+    padding: 0.75rem;
+    vertical-align: middle;
+}
+
+.table-striped tbody tr:nth-of-type(odd) {
+    background-color: rgba(0, 102, 204, 0.05);
+}
+
+/* Responsive Adjustments */
+@media (max-width: 768px) {
+    .container-fluid {
+        padding-left: 1rem;
+        padding-right: 1rem;
+    }
+    
+    .card-body {
+        padding: 1rem;
+    }
+    
+    .btn {
+        width: 100%;
+        margin-bottom: 0.5rem;
+    }
+    
+    .row .col-md-3,
+    .row .col-md-4,
+    .row .col-md-6 {
+        margin-bottom: 1rem;
+    }
+    
+    /* Mobile chart adjustments */
+    .chart-container {
+        height: 50vh;
+        min-height: 300px;
+    }
+}
+
+/* Chart responsiveness for different screen sizes */
+@media (min-width: 1200px) {
+    .chart-container {
+        height: 75vh;
+        max-height: 900px;
+    }
+}
+
+@media (min-width: 768px) and (max-width: 1199px) {
+    .chart-container {
+        height: 65vh;
+        max-height: 700px;
+    }
+}
+
+/* Animation Classes */
+.fade-in {
+    animation: fadeIn 0.5s ease-in;
+}
+
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(10px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+.slide-in {
+    animation: slideIn 0.3s ease-out;
+}
+
+@keyframes slideIn {
+    from { transform: translateX(-10px); opacity: 0; }
+    to { transform: translateX(0); opacity: 1; }
+}
+
+/* Success/Error States */
+.is-valid {
+    border-color: var(--sapheneia-success);
+}
+
+.is-invalid {
+    border-color: #dc3545;
+}
+
+.valid-feedback {
+    color: var(--sapheneia-success);
+}
+
+.invalid-feedback {
+    color: #dc3545;
+}
+
+/* Progress Indicator */
+.progress-step {
+    display: inline-block;
+    width: 2rem;
+    height: 2rem;
+    border-radius: 50%;
+    background-color: #e9ecef;
+    color: var(--sapheneia-secondary);
+    text-align: center;
+    line-height: 2rem;
+    font-weight: 600;
+    margin-right: 0.5rem;
+    transition: all 0.3s ease;
+}
+
+.progress-step.completed {
+    background-color: var(--sapheneia-success);
+    color: white;
+}
+
+.progress-step.active {
+    background-color: var(--sapheneia-primary);
+    color: white;
+    box-shadow: 0 0 0 0.2rem rgba(0, 102, 204, 0.25);
+}
+
+/* Utility Classes */
+.text-sapheneia {
+    color: var(--sapheneia-primary) !important;
+}
+
+.bg-sapheneia {
+    background-color: var(--sapheneia-primary) !important;
+}
+
+.border-sapheneia {
+    border-color: var(--sapheneia-primary) !important;
+}
+
+/* File Upload Enhancement */
+.form-control[type="file"] {
+    padding: 0.5rem;
+}
+
+.form-control[type="file"]::-webkit-file-upload-button {
+    padding: 0.375rem 0.75rem;
+    margin-right: 0.5rem;
+    background-color: var(--sapheneia-primary);
+    color: white;
+    border: none;
+    border-radius: 0.25rem;
+    cursor: pointer;
+}
+
+/* Error Display Styles */
+.error-details pre {
+    background-color: #f8f9fa !important;
+    border: 1px solid #dee2e6;
+    border-radius: 0.375rem;
+    font-family: 'Courier New', monospace;
+    font-size: 0.85rem;
+    line-height: 1.4;
+    max-height: 300px;
+    overflow-y: auto;
+}
+
+.alert-danger .alert-heading {
+    color: #721c24;
+    font-weight: 600;
+}
+
+.alert-danger hr {
+    border-top-color: #f5c6cb;
+}
+
+.alert-danger ul {
+    margin-bottom: 0;
+}
+
+.alert-danger li {
+    margin-bottom: 0.25rem;
+}
+
+/* Custom Scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: #f1f1f1;
+}
+
+::-webkit-scrollbar-thumb {
+    background: var(--sapheneia-primary);
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: #0056b3;
+}

webapp/static/js/app.js

@@ -0,0 +1,1633 @@
+/**
+ * Sapheneia TimesFM Web Application JavaScript
+ * Handles user interactions, API calls, and dynamic content updates
+ */
+
+class SapheneiaTimesFM {
+    constructor() {
+        this.modelInitialized = false;
+        this.currentData = null;
+        this.currentResults = null;
+        this.currentPlotFigure = null;
+        this.currentPlotConfig = null;
+        this.resizeTimeout = null;
+        this.init();
+    }
+
+    init() {
+        this.bindEvents();
+        this.setupFormValidation();
+    }
+
+    bindEvents() {
+        // Model configuration
+        document.getElementById('modelConfigForm').addEventListener('submit', (e) => {
+            e.preventDefault();
+            this.initializeModel();
+        });
+
+        document.getElementById('modelSource').addEventListener('change', (e) => {
+            this.toggleModelSourceFields(e.target.value);
+        });
+
+        // Data upload
+        document.getElementById('uploadBtn').addEventListener('click', () => {
+            this.uploadData();
+        });
+
+        // Sample data generation removed as per requirements
+
+        // Forecasting
+        document.getElementById('forecastConfigForm').addEventListener('submit', (e) => {
+            e.preventDefault();
+            this.runForecast();
+        });
+
+        // Quantile selector is now always visible, no toggle needed
+
+        // Download chart
+        document.getElementById('downloadChart').addEventListener('click', () => {
+            this.downloadChart();
+        });
+
+        // Download data
+        document.getElementById('downloadData').addEventListener('click', () => {
+            this.downloadData();
+        });
+
+
+        // Tab switching - preserve scroll position
+        this.setupTabSwitching();
+        
+        // Bind quantile events
+        this.bindQuantileEvents();
+    }
+
+    setupFormValidation() {
+        // Add real-time validation for numeric inputs
+        const numericInputs = ['contextLen', 'horizonLen'];
+        numericInputs.forEach(id => {
+            const input = document.getElementById(id);
+            input.addEventListener('input', (e) => {
+                this.validateNumericInput(e.target);
+            });
+        });
+    }
+
+    validateNumericInput(input) {
+        const value = parseInt(input.value);
+        const min = parseInt(input.min);
+        const max = parseInt(input.max);
+
+        if (isNaN(value) || value < min || value > max) {
+            input.classList.add('is-invalid');
+            return false;
+        } else {
+            input.classList.remove('is-invalid');
+            input.classList.add('is-valid');
+            return true;
+        }
+    }
+
+    toggleModelSourceFields(source) {
+        const huggingfaceRow = document.getElementById('huggingfaceRow');
+        const localPathRow = document.getElementById('localPathRow');
+        
+        if (source === 'local') {
+            huggingfaceRow.style.display = 'none';
+            localPathRow.style.display = 'block';
+        } else {
+            huggingfaceRow.style.display = 'block';
+            localPathRow.style.display = 'none';
+        }
+    }
+
+    showAlert(type, title, message) {
+        const alertContainer = document.getElementById('alertContainer');
+        const alertId = 'alert_' + Date.now();
+        
+        const alertHtml = `
+            <div class="alert alert-${type} alert-dismissible fade show slide-in" role="alert" id="${alertId}">
+                <strong>${title}</strong> ${message}
+                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
+            </div>
+        `;
+        
+        alertContainer.insertAdjacentHTML('beforeend', alertHtml);
+        
+        // Auto-dismiss after 5 seconds
+        setTimeout(() => {
+            const alert = document.getElementById(alertId);
+            if (alert) {
+                const bsAlert = new bootstrap.Alert(alert);
+                bsAlert.close();
+            }
+        }, 5000);
+    }
+
+    showLoading(title = 'Processing...', subtitle = 'Please wait while we process your request.') {
+        const loadingTextElement = document.getElementById('loadingText');
+        const loadingSubtextElement = document.getElementById('loadingSubtext');
+        const modalElement = document.getElementById('loadingModal');
+        
+        if (!loadingTextElement || !loadingSubtextElement || !modalElement) {
+            console.error('Loading modal elements not found:', {
+                loadingText: !!loadingTextElement,
+                loadingSubtext: !!loadingSubtextElement, 
+                loadingModal: !!modalElement
+            });
+            return;
+        }
+        
+        loadingTextElement.textContent = title;
+        loadingSubtextElement.textContent = subtitle;
+        
+        const modal = new bootstrap.Modal(modalElement);
+        modal.show();
+    }
+
+    hideLoading() {
+        console.log('hideLoading() called');
+        
+        // Multiple approaches to ensure modal is hidden
+        const modalElement = document.getElementById('loadingModal');
+        const modal = bootstrap.Modal.getInstance(modalElement);
+        
+        console.log('Modal instance:', modal);
+        console.log('Modal element classes:', modalElement?.classList.toString());
+        
+        // Approach 1: Try Bootstrap's hide method
+        if (modal) {
+            modal.hide();
+            console.log('Called Bootstrap modal.hide()');
+        }
+        
+        // Approach 2: Force hide with a slight delay to ensure Bootstrap completes
+        setTimeout(() => {
+            console.log('Force hiding modal after timeout...');
+            console.log('Modal element before force hide:', modalElement);
+            console.log('Modal is visible?', modalElement?.offsetParent !== null);
+            
+            if (modalElement) {
+                // Remove Bootstrap classes and attributes more aggressively
+                modalElement.classList.remove('show', 'd-block');
+                modalElement.classList.add('d-none');
+                modalElement.setAttribute('aria-hidden', 'true');
+                modalElement.removeAttribute('aria-modal');
+                modalElement.removeAttribute('role');
+                modalElement.style.display = 'none !important';
+                
+                // Also hide the modal dialog
+                const modalDialog = modalElement.querySelector('.modal-dialog');
+                if (modalDialog) {
+                    modalDialog.style.display = 'none';
+                }
+                
+                // Clean up body classes and attributes
+                document.body.classList.remove('modal-open');
+                document.body.style.overflow = '';
+                document.body.style.paddingRight = '';
+                
+                // Remove backdrop more precisely - only actual modal backdrops
+                const backdrops = document.querySelectorAll('.modal-backdrop');
+                console.log('Found modal backdrops:', backdrops.length);
+                backdrops.forEach((element, index) => {
+                    console.log(`Removing backdrop ${index}:`, element);
+                    element.remove();
+                });
+                
+                // Double-check for any remaining modal-related elements (but don't remove them)
+                const remainingModals = document.querySelectorAll('.modal.show, .modal.d-block');
+                remainingModals.forEach(m => {
+                    // Only hide modals, don't remove them from DOM
+                    if (m !== modalElement) { // Don't double-process our target modal
+                        m.classList.remove('show', 'd-block');
+                        m.classList.add('d-none');
+                        m.style.display = 'none';
+                    }
+                });
+                
+                console.log('Modal force hidden - classes now:', modalElement.classList.toString());
+                console.log('Modal visible after force hide?', modalElement.offsetParent !== null);
+                console.log('Body classes after cleanup:', document.body.classList.toString());
+            }
+        }, 100);
+    }
+
+    updateModelStatus(status, info = null) {
+        const statusElement = document.getElementById('modelStatus');
+        
+        if (status === 'initializing') {
+            statusElement.innerHTML = '<span class="badge bg-warning">Initializing...</span>';
+        } else if (status === 'ready') {
+            statusElement.innerHTML = '<span class="badge bg-success">Ready</span>';
+            this.modelInitialized = true;
+            this.updateForecastButtonState();
+        } else if (status === 'error') {
+            statusElement.innerHTML = '<span class="badge bg-danger">Error</span>';
+            this.modelInitialized = false;
+        } else {
+            statusElement.innerHTML = '<span class="badge bg-secondary">Not Initialized</span>';
+            this.modelInitialized = false;
+        }
+    }
+
+    async initializeModel() {
+        const form = document.getElementById('modelConfigForm');
+        const formData = new FormData(form);
+        
+        const config = {
+            backend: document.getElementById('backend').value,
+            context_len: parseInt(document.getElementById('contextLen').value),
+            horizon_len: parseInt(document.getElementById('horizonLen').value)
+        };
+
+        const modelSource = document.getElementById('modelSource').value;
+        if (modelSource === 'local') {
+            config.local_path = document.getElementById('localPath').value;
+            if (!config.local_path) {
+                this.showAlert('danger', 'Error', 'Please provide a local model path.');
+                return;
+            }
+        } else {
+            config.checkpoint = document.getElementById('checkpoint').value;
+        }
+
+        this.updateModelStatus('initializing');
+        this.showLoading('Initializing TimesFM Model', 'This may take a few minutes on first run...');
+
+        try {
+            const response = await fetch('/api/model/init', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(config)
+            });
+
+            const result = await response.json();
+            
+            if (result.success) {
+                this.updateModelStatus('ready', result.model_info);
+                this.showAlert('success', 'Success', 'TimesFM model initialized successfully!');
+                
+                // Update UI with model capabilities
+                if (result.model_info && result.model_info.capabilities) {
+                    this.updateCapabilitiesUI(result.model_info.capabilities);
+                }
+            } else {
+                this.updateModelStatus('error');
+                this.showAlert('danger', 'Initialization Failed', result.message || 'Unknown error occurred');
+            }
+        } catch (error) {
+            this.updateModelStatus('error');
+            this.showAlert('danger', 'Network Error', 'Failed to communicate with server: ' + error.message);
+        } finally {
+            this.hideLoading();
+        }
+    }
+
+    updateCapabilitiesUI(capabilities) {
+        // Quantile selector is now always visible and enabled
+        // No need to update any checkboxes since they're always shown
+    }
+
+    async uploadData() {
+        const fileInput = document.getElementById('dataFile');
+        const file = fileInput.files[0];
+
+        if (!file) {
+            this.showAlert('warning', 'No File Selected', 'Please select a CSV file to upload.');
+            return;
+        }
+
+        if (!file.name.toLowerCase().endsWith('.csv')) {
+            this.showAlert('danger', 'Invalid File Type', 'Please upload a CSV file.');
+            return;
+        }
+
+        const formData = new FormData();
+        formData.append('file', file);
+
+        this.showLoading('Uploading Data', 'Processing your CSV file...');
+
+        try {
+            console.log('Starting file upload...');
+            const response = await fetch('/api/data/upload', {
+                method: 'POST',
+                body: formData
+            });
+
+            console.log('Response received:', response.status, response.statusText);
+
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+
+            // Get response text first to debug potential JSON parsing issues
+            const responseText = await response.text();
+            console.log('Raw response text:', responseText.substring(0, 200) + '...');
+
+            let result;
+            try {
+                result = JSON.parse(responseText);
+                console.log('Parsed result:', result);
+            } catch (jsonError) {
+                console.error('JSON parsing failed:', jsonError);
+                console.error('Response text that failed to parse:', responseText);
+                throw new Error(`Failed to parse JSON response: ${jsonError.message}`);
+            }
+
+            if (result.success) {
+                console.log('Processing successful result...');
+                try {
+                    this.currentData = result.data_info;
+                    console.log('Set currentData:', this.currentData);
+                    
+                    this.showAlert('success', 'Upload Successful', 'Data uploaded and processed successfully!');
+                    console.log('Showed success alert');
+                    
+                    this.displayDataInfo(result.data_info);
+                    console.log('Displayed data info');
+                    
+                    this.generateDataDefinition(result.data_info.columns);
+                    console.log('Generated data definition');
+                    
+                    this.updateForecastButtonState();
+                    console.log('Updated forecast button state');
+                    
+                } catch (processingError) {
+                    console.error('Error processing successful result:', processingError);
+                    this.showAlert('danger', 'Processing Error', `Error processing upload result: ${processingError.message}`);
+                }
+            } else {
+                console.log('Upload failed, showing error:', result.message);
+                
+                // Handle forecast output data error specially
+                if (result.is_forecast_output) {
+                    const suggestedColumns = result.suggested_columns ? result.suggested_columns.join(', ') : 'date, value, price, amount, count, sales, revenue';
+                    this.showAlert('warning', 'Wrong Data Type', 
+                        `${result.message}<br><br><strong>Expected columns:</strong> ${suggestedColumns}<br><br>` +
+                        'Please upload your original time series data, not forecast output data.');
+                } else {
+                    this.showAlert('danger', 'Upload Failed', result.message || 'Upload failed');
+                }
+            }
+        } catch (error) {
+            console.error('Upload error:', error);
+            this.showAlert('danger', 'Network Error', 'Failed to upload file: ' + error.message);
+        } finally {
+            console.log('Upload process completed');
+            this.hideLoading();
+        }
+    }
+
+    // Sample data generation removed as per requirements
+
+    displayDataInfo(dataInfo) {
+        const dataInfoDiv = document.getElementById('dataInfo');
+        const dataDetailsDiv = document.getElementById('dataDetails');
+
+        let html = `
+            <div class="row">
+                <div class="col-md-6">
+                    <table class="table table-sm data-info-table">
+                        <tr><th>Filename</th><td>${dataInfo.filename}</td></tr>
+                        <tr><th>Shape</th><td>${dataInfo.shape[0]} rows × ${dataInfo.shape[1]} columns</td></tr>
+                        ${dataInfo.date_range ? `
+                            <tr><th>Date Range</th><td>${dataInfo.date_range.start} to ${dataInfo.date_range.end}</td></tr>
+                            <tr><th>Total Periods</th><td>${dataInfo.date_range.periods}</td></tr>
+                        ` : ''}
+                    </table>
+                </div>
+                <div class="col-md-6">
+                    <h6>Data Preview</h6>
+                    <div class="table-responsive">
+                        <table class="table table-sm table-striped">
+                            <thead>
+                                <tr>
+                                    ${dataInfo.columns.map(col => `<th>${col}</th>`).join('')}
+                                </tr>
+                            </thead>
+                            <tbody>
+                                ${dataInfo.head.slice(0, 3).map(row => `
+                                    <tr>
+                                        ${dataInfo.columns.map(col => `<td>${this.formatValue(row[col])}</td>`).join('')}
+                                    </tr>
+                                `).join('')}
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+        `;
+
+        if (dataDetailsDiv) {
+            dataDetailsDiv.innerHTML = html;
+        }
+        if (dataInfoDiv) {
+            dataInfoDiv.style.display = 'block';
+            dataInfoDiv.classList.add('fade-in');
+        }
+        
+        // Generate data definition with integrated checkboxes
+        this.generateDataDefinition(dataInfo.columns);
+        
+        // Initialize date configuration
+        this.initializeDateConfiguration(dataInfo);
+    }
+
+    formatValue(value) {
+        if (value == null) return 'null';
+        if (typeof value === 'number') {
+            return value.toLocaleString(undefined, { maximumFractionDigits: 2 });
+        }
+        return String(value).substring(0, 20) + (String(value).length > 20 ? '...' : '');
+    }
+
+
+    bindColumnSelectionEvents() {
+        // Select all button
+        document.getElementById('selectAllColumns').addEventListener('click', () => {
+            document.querySelectorAll('.column-checkbox').forEach(cb => {
+                cb.checked = true;
+            });
+        });
+
+        // Deselect all button
+        document.getElementById('deselectAllColumns').addEventListener('click', () => {
+            document.querySelectorAll('.column-checkbox').forEach(cb => {
+                cb.checked = false;
+            });
+        });
+
+        // Individual checkbox change events
+        document.querySelectorAll('.column-checkbox').forEach(cb => {
+            cb.addEventListener('change', () => {
+                this.updateColumnSelectionState();
+            });
+        });
+    }
+
+    updateColumnSelectionState() {
+        // This function can be used for any additional state updates if needed
+        // Currently, the checkboxes are integrated into the data definition section
+    }
+
+    getSelectedColumns() {
+        return Array.from(document.querySelectorAll('.column-checkbox:checked'))
+                   .map(cb => cb.value);
+    }
+
+
+    generateDataDefinition(columns, isSampleData = false) {
+        const definitionDiv = document.getElementById('dataDefinition');
+        const columnsDiv = document.getElementById('columnDefinitions');
+
+        let html = '<div class="row">';
+
+        columns.forEach((col, index) => {
+            if (col === 'date') return; // Skip date column
+
+            // Default to target for first column, others as dynamic_numerical
+            const defaultValue = index === 1 ? 'target' : 'dynamic_numerical';
+            
+            html += `
+                <div class="col-md-6 col-lg-4">
+                    <div class="column-definition">
+                        <div class="d-flex justify-content-between align-items-center mb-2">
+                            <div class="column-name">${col}</div>
+                            <div class="form-check form-switch">
+                                <input class="form-check-input column-checkbox" type="checkbox" 
+                                       id="col_${col}" value="${col}" checked>
+                                <label class="form-check-label" for="col_${col}">
+                                </label>
+                            </div>
+                        </div>
+                        <select class="form-select form-select-sm" id="def_${col}">
+                            <option value="target" ${defaultValue === 'target' ? 'selected' : ''}>Target (main forecast variable)</option>
+                            <option value="dynamic_numerical" ${defaultValue === 'dynamic_numerical' ? 'selected' : ''}>Dynamic Numerical</option>
+                            <option value="dynamic_categorical" ${defaultValue === 'dynamic_categorical' ? 'selected' : ''}>Dynamic Categorical</option>
+                            <option value="static_numerical" ${defaultValue === 'static_numerical' ? 'selected' : ''}>Static Numerical</option>
+                            <option value="static_categorical" ${defaultValue === 'static_categorical' ? 'selected' : ''}>Static Categorical</option>
+                        </select>
+                    </div>
+                </div>
+            `;
+        });
+
+        html += '</div>';
+        
+        // Add control buttons
+        html += `
+            <div class="mt-3">
+                <button type="button" class="btn btn-outline-primary btn-sm" id="selectAllColumns">
+                    <i class="fas fa-check-square me-1"></i>Select All
+                </button>
+                <button type="button" class="btn btn-outline-secondary btn-sm ms-2" id="deselectAllColumns">
+                    <i class="fas fa-square me-1"></i>Deselect All
+                </button>
+            </div>
+        `;
+
+        if (columnsDiv) {
+            columnsDiv.innerHTML = html;
+        }
+        if (definitionDiv) {
+            definitionDiv.style.display = 'block';
+            definitionDiv.classList.add('fade-in');
+        }
+
+        // Bind event listeners
+        this.bindColumnSelectionEvents();
+    }
+
+    getDataDefinition() {
+        const definition = {};
+        const selectedColumns = this.getSelectedColumns();
+
+        selectedColumns.forEach(col => {
+            const select = document.getElementById(`def_${col}`);
+            if (select) {
+                definition[col] = select.value;
+            }
+        });
+
+        return definition;
+    }
+
+    initializeDateConfiguration(dataInfo) {
+        const contextDatesSection = document.getElementById('contextDatesSection');
+        if (!contextDatesSection) {
+            console.error('Context dates section not found');
+            return;
+        }
+        
+        contextDatesSection.style.display = 'block';
+        contextDatesSection.classList.add('fade-in');
+
+        // Store data range for constraints
+        this.dataDateRange = dataInfo.date_range;
+        this.dataPeriods = dataInfo.date_range.periods; // Actual number of periods in data
+        this.availableDates = dataInfo.date_range.available_dates || []; // All available dates in data
+        
+        if (this.dataDateRange && this.dataDateRange.start && this.dataDateRange.end) {
+            // Update available data information
+            const availableDataLength = document.getElementById('availableDataLength');
+            const availableDataRange = document.getElementById('availableDataRange');
+            const contextStartDate = document.getElementById('contextStartDate');
+            const contextEndDate = document.getElementById('contextEndDate');
+            
+            if (availableDataLength) availableDataLength.textContent = this.dataPeriods;
+            if (availableDataRange) availableDataRange.textContent = 
+                `${this.dataDateRange.start} to ${this.dataDateRange.end}`;
+
+            // Set up date constraints
+            this.setupDateConstraints(contextStartDate, contextEndDate);
+
+            // Initialize context dates to full data range
+            if (contextStartDate) contextStartDate.value = this.dataDateRange.start;
+            if (contextEndDate) contextEndDate.value = this.dataDateRange.end;
+
+            // Calculate and display context length
+            this.updateContextLengthFromDates();
+            
+            // Test: Force update after a short delay to ensure elements are ready
+            setTimeout(() => {
+                console.log('Forcing context length update after delay');
+                this.updateContextLengthFromDates();
+            }, 100);
+        }
+
+        // Bind date change events
+        this.bindDateChangeEvents();
+    }
+
+    setupDateConstraints(contextStartDate, contextEndDate) {
+        if (!this.availableDates || this.availableDates.length === 0) {
+            console.warn('No available dates found in data');
+            return;
+        }
+
+        console.log('Setting up date constraints with available dates:', this.availableDates);
+
+        // Populate select dropdowns with available dates
+        if (contextStartDate) {
+            this.populateDateSelect(contextStartDate, this.availableDates);
+        }
+        if (contextEndDate) {
+            this.populateDateSelect(contextEndDate, this.availableDates);
+        }
+    }
+
+    populateDateSelect(selectElement, availableDates) {
+        // Clear existing options except the first placeholder
+        while (selectElement.children.length > 1) {
+            selectElement.removeChild(selectElement.lastChild);
+        }
+        
+        // Add options for each available date
+        availableDates.forEach(date => {
+            const option = document.createElement('option');
+            option.value = date;
+            option.textContent = date;
+            selectElement.appendChild(option);
+        });
+    }
+
+    bindDateChangeEvents() {
+        // Context start date change event - validates and updates context length
+        const contextStartDate = document.getElementById('contextStartDate');
+        if (contextStartDate) {
+            console.log('Binding context start date event listener');
+            contextStartDate.addEventListener('change', () => {
+                this.updateContextFromStartDate();
+            });
+        } else {
+            console.error('Context start date element not found');
+        }
+
+        // Context end date change event - updates context length
+        const contextEndDate = document.getElementById('contextEndDate');
+        if (contextEndDate) {
+            console.log('Binding context end date event listener');
+            contextEndDate.addEventListener('change', () => {
+                this.updateContextFromEndDate();
+            });
+        } else {
+            console.error('Context end date element not found');
+        }
+    }
+
+
+    updateModelConfiguration(contextLen, horizonLen) {
+        const contextLenElement = document.getElementById('contextLen');
+        const horizonLenElement = document.getElementById('horizonLen');
+        
+        if (contextLenElement) contextLenElement.value = contextLen;
+        if (horizonLenElement) horizonLenElement.value = horizonLen;
+    }
+
+    calculateDaysDifference(startDate, endDate) {
+        const start = new Date(startDate);
+        const end = new Date(endDate);
+        const timeDiff = end.getTime() - start.getTime();
+        return Math.ceil(timeDiff / (1000 * 3600 * 24)) + 1; // +1 to include both start and end dates
+    }
+
+
+
+    updateContextFromStartDate() {
+        // When context start date changes, validate and update context length
+        console.log('Context start date changed');
+        const contextStartElement = document.getElementById('contextStartDate');
+        if (!contextStartElement) return;
+        
+        const contextStart = contextStartElement.value;
+        if (!contextStart) return;
+
+        // Since we're using select dropdowns with available dates, no need for range validation
+        console.log('Selected context start date:', contextStart);
+
+        // Recalculate context length and validate constraints
+        this.updateContextLengthFromDates();
+    }
+
+    updateContextFromEndDate() {
+        // When context end date changes, validate and update context length
+        console.log('Context end date changed');
+        const contextEndElement = document.getElementById('contextEndDate');
+        if (!contextEndElement) return;
+        
+        const contextEnd = contextEndElement.value;
+        if (!contextEnd) return;
+
+        // Since we're using select dropdowns with available dates, no need for range validation
+        console.log('Selected context end date:', contextEnd);
+
+        // Recalculate context length and validate constraints
+        this.updateContextLengthFromDates();
+    }
+
+
+    updateContextLengthFromDates() {
+        // Calculate context length based on actual data periods between selected dates
+        console.log('updateContextLengthFromDates called');
+        const contextStartElement = document.getElementById('contextStartDate');
+        const contextEndElement = document.getElementById('contextEndDate');
+        
+        if (!contextStartElement || !contextEndElement || !this.availableDates) {
+            console.log('Missing elements or available dates:', {
+                contextStartElement: !!contextStartElement,
+                contextEndElement: !!contextEndElement,
+                availableDates: !!this.availableDates
+            });
+            return;
+        }
+        
+        const contextStart = contextStartElement.value;
+        const contextEnd = contextEndElement.value;
+        
+        if (!contextStart || !contextEnd) {
+            console.log('Missing date values:', { contextStart, contextEnd });
+            return;
+        }
+        
+        // Find the indices of the selected dates in the available dates array
+        const startIndex = this.availableDates.indexOf(contextStart);
+        const endIndex = this.availableDates.indexOf(contextEnd);
+        
+        if (startIndex === -1 || endIndex === -1) {
+            console.error('Selected dates not found in available dates');
+            return;
+        }
+        
+        // Calculate context length as the number of periods between the dates (inclusive)
+        let contextLen = endIndex - startIndex + 1;
+        
+        console.log('Context length calculation:', {
+            contextStart,
+            contextEnd,
+            startIndex,
+            endIndex,
+            contextLen,
+            availableDatesCount: this.availableDates.length
+        });
+        
+        // Ensure context length is positive and doesn't exceed available data
+        if (contextLen <= 0) {
+            console.warn('Context length is zero or negative, setting to 1');
+            contextLen = 1;
+        }
+        
+        if (contextLen > this.dataPeriods) {
+            console.warn(`Context length (${contextLen}) exceeds available data periods (${this.dataPeriods}), adjusting`);
+            contextLen = this.dataPeriods;
+        }
+        
+        // Get horizon length from model configuration
+        const horizonLen = parseInt(document.getElementById('horizonLen').value) || 24;
+        
+        // Apply 32-multiple truncation (truncate earlier periods)
+        const truncatedContextLen = contextLen - (contextLen % 32);
+        
+        // Validate TimesFM constraints
+        const totalLength = truncatedContextLen + horizonLen;
+        const isMultipleOf32 = truncatedContextLen % 32 === 0;
+        const isWithinLimit = totalLength <= 4096;
+        
+        if (truncatedContextLen < 32) {
+            this.showAlert('error', 'Insufficient Context', 
+                `Context length ${truncatedContextLen} is less than minimum 32 periods required by TimesFM.`);
+            return;
+        }
+        
+        if (!isWithinLimit) {
+            this.showAlert('warning', 'Constraint Warning', 
+                `Total length ${totalLength} exceeds TimesFM limit of 4096.`);
+        }
+        
+        // Update model configuration and display
+        this.updateModelConfiguration(truncatedContextLen, horizonLen);
+        
+        const contextLengthDisplay = document.getElementById('contextLengthDisplay');
+        if (contextLengthDisplay) {
+            contextLengthDisplay.textContent = truncatedContextLen;
+        }
+        
+        this.updateConstraintFeedback(truncatedContextLen, horizonLen);
+    }
+
+    updateConstraintFeedback(contextLen, horizonLen) {
+        const totalLength = contextLen + horizonLen;
+        const isMultipleOf32 = contextLen % 32 === 0;
+        const isWithinLimit = totalLength <= 4096;
+        
+        // Update context length display with color coding
+        const contextDisplay = document.getElementById('contextLengthDisplay');
+        if (contextDisplay) {
+            if (isMultipleOf32) {
+                contextDisplay.style.color = 'green';
+            } else {
+                contextDisplay.style.color = 'red';
+            }
+        }
+        
+        // Update total length display with color coding
+        const totalDisplay = document.getElementById('totalLengthDisplay');
+        if (totalDisplay) {
+            if (isWithinLimit) {
+                totalDisplay.style.color = 'green';
+            } else {
+                totalDisplay.style.color = 'red';
+            }
+        }
+        
+        // Show warning if constraints are violated
+        if (!isMultipleOf32 || !isWithinLimit) {
+            this.showAlert('warning', 'Constraint Warning', 
+                `TimesFM 2.0 constraints: Context length must be multiple of 32 (${contextLen}), total length must be ≤ 4096 (${totalLength})`);
+        }
+    }
+
+    updateForecastButtonState() {
+        const forecastBtn = document.getElementById('forecastBtn');
+        const canForecast = this.modelInitialized && this.currentData;
+        
+        forecastBtn.disabled = !canForecast;
+        
+        if (canForecast) {
+            forecastBtn.classList.remove('btn-secondary');
+            forecastBtn.classList.add('btn-warning');
+        } else {
+            forecastBtn.classList.add('btn-secondary');
+            forecastBtn.classList.remove('btn-warning');
+        }
+    }
+
+    async runForecast() {
+        if (!this.modelInitialized || !this.currentData) {
+            this.showAlert('warning', 'Cannot Forecast', 'Please initialize model and upload data first.');
+            return;
+        }
+
+        // Clear any previous results/errors
+        this.clearForecastResults();
+
+        const selectedColumns = this.getSelectedColumns();
+        if (selectedColumns.length === 0) {
+            this.showAlert('warning', 'No Variables Selected', 'Please select at least one variable for forecasting.');
+            return;
+        }
+
+        const dataDefinition = this.getDataDefinition();
+        
+        // Validate that at least one target column is defined
+        const hasTarget = Object.values(dataDefinition).includes('target');
+        if (!hasTarget) {
+            this.showAlert('warning', 'No Target Variable', 'Please define at least one selected column as the target variable.');
+            return;
+        }
+
+        const config = {
+            filename: this.currentData.filename,
+            data_definition: dataDefinition,
+            use_covariates: document.getElementById('useCovariates').checked,
+            context_len: parseInt(document.getElementById('contextLen').value),
+            horizon_len: parseInt(document.getElementById('horizonLen').value),
+            context_start_date: document.getElementById('contextStartDate').value,
+            context_end_date: document.getElementById('contextEndDate').value
+        };
+        
+        // Attach user-selected quantile ticks (no default - respect user selection)
+        let ticks = Array.from(document.querySelectorAll('.quantile-tick'))
+            .filter(cb => cb.checked)
+            .map(cb => parseInt(cb.value))
+            .sort((a,b) => a - b);
+        // Don't set default quantiles - pass empty array if none selected
+        config.quantile_indices = ticks;
+        
+        // FRONTEND DEBUGGING - Show what we're sending to backend
+        console.log("=".repeat(80));
+        console.log("FRONTEND DEBUGGING - SENDING TO BACKEND");
+        console.log("=".repeat(80));
+        console.log("Configuration being sent to backend:");
+        console.log("  - Filename:", config.filename);
+        console.log("  - Use Covariates:", config.use_covariates);
+        console.log("  - Context Length:", config.context_len);
+        console.log("  - Horizon Length:", config.horizon_len);
+        console.log("  - Context Start Date:", config.context_start_date);
+        console.log("  - Context End Date:", config.context_end_date);
+        console.log("  - Quantile Indices:", config.quantile_indices);
+        
+        // Show current UI state
+        console.log("Current UI state:");
+        console.log("  - Context Start Date element value:", document.getElementById('contextStartDate').value);
+        console.log("  - Context End Date element value:", document.getElementById('contextEndDate').value);
+        console.log("  - Context Length element value:", document.getElementById('contextLen').value);
+        console.log("  - Horizon Length element value:", document.getElementById('horizonLen').value);
+        console.log("  - Context Length display:", document.getElementById('contextLengthDisplay').textContent);
+        console.log("  - Use Covariates checkbox:", document.getElementById('useCovariates').checked);
+        
+        // Show data definition
+        console.log("Data definition:");
+        console.log("  - Selected columns:", Object.keys(dataDefinition));
+        console.log("  - Column types:", dataDefinition);
+        
+        console.log("=".repeat(80));
+
+        this.showLoading('Running Forecast', 'TimesFM is analyzing your data and generating forecasts...');
+
+        try {
+            const response = await fetch('/api/forecast', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(config)
+            });
+
+            const result = await response.json();
+
+            if (response.ok && result.success) {
+                console.log('Forecast successful, proceeding to display and visualize...');
+                this.currentResults = result;
+                this.showAlert('success', 'Forecast Complete', 'Forecasting completed successfully!');
+                
+                try {
+                    await this.displayResults(result);
+                    console.log('displayResults completed successfully');
+                } catch (displayError) {
+                    console.error('Error in displayResults:', displayError);
+                }
+                
+                console.log('About to call generateVisualization...');
+                try {
+                    this.generateVisualization(result);
+                } catch (vizError) {
+                    console.error('Error calling generateVisualization:', vizError);
+                }
+            } else {
+                // Handle both HTTP errors and API errors
+                const errorMessage = result.message || `HTTP ${response.status}: ${response.statusText}`;
+                console.log('Forecast error received:', { result, response: { status: response.status, statusText: response.statusText } });
+                this.displayForecastError(errorMessage);
+                this.showAlert('danger', 'Forecast Failed', 'Please check the error details below.');
+            }
+        } catch (error) {
+            this.displayForecastError('Network Error: ' + error.message);
+            this.showAlert('danger', 'Network Error', 'Please check the error details below.');
+        } finally {
+            this.hideLoading();
+        }
+    }
+
+    displayForecastError(errorMessage) {
+        console.log('Displaying forecast error:', errorMessage);
+        const resultsCard = document.getElementById('resultsCard');
+        const cardBody = resultsCard.querySelector('.card-body');
+        
+        console.log('Found elements:', { resultsCard, cardBody });
+        
+        // Clear any existing results and hide tabs
+        const resultTabs = document.getElementById('resultTabs');
+        const resultTabContent = document.getElementById('resultTabContent');
+        
+        if (resultTabs) resultTabs.style.display = 'none';
+        if (resultTabContent) resultTabContent.style.display = 'none';
+        
+        // Create error display
+        const errorHtml = `
+            <div class="alert alert-danger" role="alert">
+                <h5 class="alert-heading">
+                    <i class="fas fa-exclamation-triangle me-2"></i>Forecast Error
+                </h5>
+                <hr>
+                <div class="error-details">
+                    <h6>Error Details:</h6>
+                    <pre class="bg-light p-3 rounded mt-2" style="white-space: pre-wrap; font-size: 0.9rem;">${errorMessage}</pre>
+                </div>
+                <div class="mt-3">
+                    <h6>Common Solutions:</h6>
+                    <ul class="mb-0">
+                        <li>Check that your data definition is correct (especially static vs dynamic covariates)</li>
+                        <li>Ensure all selected variables have valid data (no missing values in critical columns)</li>
+                        <li>Verify that at least one variable is defined as "Target"</li>
+                        <li>Check that your data has enough historical points for the selected context length</li>
+                    </ul>
+                </div>
+            </div>
+        `;
+        
+        cardBody.innerHTML = errorHtml;
+        resultsCard.style.display = 'block';
+        resultsCard.classList.add('fade-in');
+    }
+
+    clearForecastResults() {
+        const resultsCard = document.getElementById('resultsCard');
+        
+        if (resultsCard) {
+            resultsCard.style.display = 'none';
+            // Reset the card body to its original structure
+            const cardBody = resultsCard.querySelector('.card-body');
+            if (cardBody) {
+                // Restore original structure
+                cardBody.innerHTML = `
+                    <!-- Tabs for different result views -->
+                    <ul class="nav nav-tabs" id="resultTabs" role="tablist">
+                        <li class="nav-item" role="presentation">
+                            <button class="nav-link active" id="visualization-tab" data-bs-toggle="tab" 
+                                    data-bs-target="#visualization" type="button" role="tab">
+                                <i class="fas fa-chart-area me-1"></i>
+                                Visualization
+                            </button>
+                        </li>
+                        <li class="nav-item" role="presentation">
+                            <button class="nav-link" id="summary-tab" data-bs-toggle="tab" 
+                                    data-bs-target="#summary" type="button" role="tab">
+                                <i class="fas fa-list me-1"></i>
+                                Summary
+                            </button>
+                        </li>
+                        <li class="nav-item" role="presentation">
+                            <button class="nav-link" id="data-tab" data-bs-toggle="tab" 
+                                    data-bs-target="#data" type="button" role="tab">
+                                <i class="fas fa-table me-1"></i>
+                                Data
+                            </button>
+                        </li>
+                    </ul>
+
+                    <!-- Tab Content -->
+                    <div class="tab-content mt-3" id="resultTabContent">
+                        <!-- Visualization Tab -->
+                        <div class="tab-pane fade show active" id="visualization" role="tabpanel">
+                            <div class="chart-container">
+                                <div id="forecastChart"></div>
+                            </div>
+                            <div class="mt-3">
+                                <button type="button" class="btn btn-outline-primary" id="downloadChart">
+                                    <i class="fas fa-download me-2"></i>
+                                    Download Chart
+                                </button>
+                                <button type="button" class="btn btn-outline-success ms-2" id="downloadData">
+                                    <i class="fas fa-table me-2"></i>
+                                    Download Data
+                                </button>
+                            </div>
+                            <!-- Quantile selection (always visible) -->
+                            <div class="row mt-3" id="quantileSelector">
+                                <div class="col-12">
+                                    <label class="form-label">Select quantiles to shade (choose lower and upper)</label>
+                                    <div class="d-flex flex-wrap gap-2" id="quantileCheckboxes">
+                                        <div class="form-check form-check-inline">
+                                            <input class="form-check-input quantile-tick" type="checkbox" value="1" id="q1" checked>
+                                            <label class="form-check-label" for="q1">Q10</label>
+                                        </div>
+                                        <div class="form-check form-check-inline">
+                                            <input class="form-check-input quantile-tick" type="checkbox" value="2" id="q2">
+                                            <label class="form-check-label" for="q2">Q20</label>
+                                        </div>
+                                        <div class="form-check form-check-inline">
+                                            <input class="form-check-input quantile-tick" type="checkbox" value="3" id="q3">
+                                            <label class="form-check-label" for="q3">Q30</label>
+                                        </div>
+                                        <div class="form-check form-check-inline">
+                                            <input class="form-check-input quantile-tick" type="checkbox" value="4" id="q4">
+                                            <label class="form-check-label" for="q4">Q40</label>
+                                        </div>
+                                        <div class="form-check form-check-inline">
+                                            <input class="form-check-input quantile-tick" type="checkbox" value="5" id="q5">
+                                            <label class="form-check-label" for="q5">Q50</label>
+                                        </div>
+                                        <div class="form-check form-check-inline">
+                                            <input class="form-check-input quantile-tick" type="checkbox" value="6" id="q6">
+                                            <label class="form-check-label" for="q6">Q60</label>
+                                        </div>
+                                        <div class="form-check form-check-inline">
+                                            <input class="form-check-input quantile-tick" type="checkbox" value="7" id="q7">
+                                            <label class="form-check-label" for="q7">Q70</label>
+                                        </div>
+                                        <div class="form-check form-check-inline">
+                                            <input class="form-check-input quantile-tick" type="checkbox" value="8" id="q8">
+                                            <label class="form-check-label" for="q8">Q80</label>
+                                        </div>
+                                        <div class="form-check form-check-inline">
+                                            <input class="form-check-input quantile-tick" type="checkbox" value="9" id="q9" checked>
+                                            <label class="form-check-label" for="q9">Q90</label>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Summary Tab -->
+                        <div class="tab-pane fade" id="summary" role="tabpanel">
+                            <div id="forecastSummary">
+                                <p class="text-muted">Summary will appear here after forecasting.</p>
+                            </div>
+                        </div>
+
+                        <!-- Data Tab -->
+                        <div class="tab-pane fade" id="data" role="tabpanel">
+                            <div id="forecastData">
+                                <p class="text-muted">Data will appear here after forecasting.</p>
+                            </div>
+                        </div>
+                    </div>
+                `;
+            }
+            
+            // Re-bind quantile change events
+            this.bindQuantileEvents();
+            
+            // Re-bind download button events
+            this.bindDownloadEvents();
+        }
+    }
+
+    bindQuantileEvents() {
+        // Bind change events to quantile checkboxes
+        document.querySelectorAll('.quantile-tick').forEach(checkbox => {
+            checkbox.addEventListener('change', () => {
+                this.refreshVisualization();
+            });
+        });
+    }
+
+    refreshVisualization() {
+        // Only refresh if we have current results
+        if (this.currentResults && this.currentResults.success) {
+            console.log('Refreshing visualization with new quantile selection...');
+            
+            // Get selected quantiles (empty array if none selected)
+            const selectedQuantiles = document.querySelectorAll('.quantile-tick:checked');
+            const quantileIndices = Array.from(selectedQuantiles)
+                .map(cb => parseInt(cb.value))
+                .sort((a, b) => a - b);
+            
+            console.log('Selected quantile indices:', quantileIndices);
+            console.log('Number of selected quantiles:', quantileIndices.length);
+            
+            // Create a copy of results with updated quantile indices
+            const updatedResults = { ...this.currentResults };
+            updatedResults.quantile_indices = quantileIndices;
+            
+            this.generateVisualization(updatedResults);
+        }
+    }
+
+    bindDownloadEvents() {
+        // Re-bind download button events after HTML recreation
+        const downloadChartBtn = document.getElementById('downloadChart');
+        const downloadDataBtn = document.getElementById('downloadData');
+        
+        if (downloadChartBtn) {
+            downloadChartBtn.addEventListener('click', () => {
+                this.downloadChart();
+            });
+        }
+        
+        if (downloadDataBtn) {
+            downloadDataBtn.addEventListener('click', () => {
+                this.downloadData();
+            });
+        }
+    }
+
+    async displayResults(result) {
+        const resultsCard = document.getElementById('resultsCard');
+        
+        if (!resultsCard) {
+            console.error('resultsCard element not found');
+            return;
+        }
+        
+        resultsCard.style.display = 'block';
+        resultsCard.classList.add('fade-in');
+
+        // Populate summary tab
+        this.displaySummary(result.forecast_summary, result.results);
+        
+        // Populate data tab
+        this.displayDataTable(result.results);
+    }
+
+    displaySummary(summary, results) {
+        const summaryDiv = document.getElementById('forecastSummary');
+        
+        if (!summaryDiv) {
+            console.error('forecastSummary element not found');
+            return;
+        }
+
+        const methodsCount = summary.methods_used.length;
+        const mainForecast = results.enhanced_forecast || results.point_forecast;
+        const avgForecast = mainForecast ? (mainForecast.reduce((a, b) => a + b, 0) / mainForecast.length) : 0;
+
+        let html = `
+            <div class="row mb-4">
+                <div class="col-md-3">
+                    <div class="summary-card bg-primary">
+                        <div class="summary-value">${summary.context_length}</div>
+                        <div class="summary-label">Context Length</div>
+                    </div>
+                </div>
+                <div class="col-md-3">
+                    <div class="summary-card bg-success">
+                        <div class="summary-value">${summary.horizon_length}</div>
+                        <div class="summary-label">Forecast Periods</div>
+                    </div>
+                </div>
+                <div class="col-md-3">
+                    <div class="summary-card bg-info">
+                        <div class="summary-value">${methodsCount}</div>
+                        <div class="summary-label">Methods Used</div>
+                    </div>
+                </div>
+                <div class="col-md-3">
+                    <div class="summary-card bg-warning">
+                        <div class="summary-value">$${avgForecast.toLocaleString(undefined, {maximumFractionDigits: 0})}</div>
+                        <div class="summary-label">Avg. Forecast</div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="row">
+                <div class="col-md-6">
+                    <h6>Configuration</h6>
+                    <table class="table table-sm">
+                        <tr><th>Target Variable</th><td>${summary.target_column}</td></tr>
+                        <tr><th>Covariates Used</th><td>${summary.covariates_used ? 'Yes' : 'No'}</td></tr>
+                        <tr><th>Methods</th><td>${summary.methods_used.join(', ')}</td></tr>
+                    </table>
+                </div>
+                <div class="col-md-6">
+                    <h6>Forecast Methods</h6>
+                    <ul class="list-group list-group-flush">
+        `;
+
+        summary.methods_used.forEach(method => {
+            const methodName = method.replace('_', ' ').replace(/\b\w/g, l => l.toUpperCase());
+            const forecast = results[method];
+            
+            // Check if forecast is an array and has numeric values
+            if (Array.isArray(forecast) && forecast.length > 0 && typeof forecast[0] === 'number') {
+                const minVal = Math.min(...forecast);
+                const maxVal = Math.max(...forecast);
+                
+                html += `
+                    <li class="list-group-item d-flex justify-content-between align-items-center">
+                        ${methodName}
+                        <span class="badge bg-secondary">$${minVal.toLocaleString()} - $${maxVal.toLocaleString()}</span>
+                    </li>
+                `;
+            } else {
+                // Fallback for non-array or non-numeric data
+                html += `
+                    <li class="list-group-item d-flex justify-content-between align-items-center">
+                        ${methodName}
+                        <span class="badge bg-secondary">Available</span>
+                    </li>
+                `;
+            }
+        });
+
+        html += `
+                    </ul>
+                </div>
+            </div>
+        `;
+
+        summaryDiv.innerHTML = html;
+    }
+
+    displayDataTable(results) {
+        const dataDiv = document.getElementById('forecastData');
+        
+        if (!dataDiv) {
+            console.error('forecastData element not found');
+            return;
+        }
+        
+        // Create table with forecast results
+        const forecastLength = results.point_forecast ? results.point_forecast.length : 
+                              results.enhanced_forecast ? results.enhanced_forecast.length : 0;
+
+        if (forecastLength === 0) {
+            dataDiv.innerHTML = '<p>No forecast data available.</p>';
+            return;
+        }
+
+        let html = `
+            <div class="table-responsive">
+                <table class="table table-striped">
+                    <thead>
+                        <tr>
+                            <th>Period</th>
+        `;
+
+        Object.keys(results).forEach(method => {
+            if (method !== 'prediction_intervals') {
+                const methodName = method.replace('_', ' ').replace(/\b\w/g, l => l.toUpperCase());
+                html += `<th>${methodName}</th>`;
+            }
+        });
+
+        html += `</tr></thead><tbody>`;
+
+        for (let i = 0; i < forecastLength; i++) {
+            html += `<tr><td>${i + 1}</td>`;
+            
+            Object.entries(results).forEach(([method, values]) => {
+                if (method !== 'prediction_intervals' && Array.isArray(values)) {
+                    const value = values[i];
+                    html += `<td>$${value.toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2})}</td>`;
+                }
+            });
+            
+            html += '</tr>';
+        }
+
+        html += '</tbody></table></div>';
+        dataDiv.innerHTML = html;
+    }
+
+    async generateVisualization(result) {
+        console.log('generateVisualization called with result:', result);
+        console.log('Visualization data:', result.visualization_data);
+        console.log('Historical data length:', result.visualization_data?.historical_data?.length);
+        console.log('Historical dates length:', result.visualization_data?.dates_historical?.length);
+        console.log('Target name:', result.visualization_data?.target_name);
+        this.showLoading('Generating Chart', 'Creating professional forecast visualization...');
+
+        try {
+            const response = await fetch('/api/visualize', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    visualization_data: result.visualization_data,
+                    results: result.results,
+                    quantile_indices: (function(){
+                        let t = Array.from(document.querySelectorAll('.quantile-tick'))
+                            .filter(cb => cb.checked)
+                            .map(cb => parseInt(cb.value))
+                            .sort((a,b) => a-b);
+                        console.log('generateVisualization - quantile indices being sent:', t);
+                        console.log('generateVisualization - number of quantiles:', t.length);
+                        // Don't set default quantiles - pass empty array if none selected
+                        return t;
+                    })()
+                })
+            });
+
+            const vizResult = await response.json();
+            
+            console.log('Visualization result received:', vizResult);
+            console.log('Visualization success:', vizResult.success);
+            if (vizResult.figure) {
+                console.log('Figure data type:', typeof vizResult.figure);
+                if (typeof vizResult.figure === 'string') {
+                    console.log('Figure string length:', vizResult.figure.length);
+                } else {
+                    console.log('Figure object keys:', Object.keys(vizResult.figure));
+                    if (vizResult.figure.data) {
+                        console.log('Figure data traces:', vizResult.figure.data.length);
+                        vizResult.figure.data.forEach((trace, i) => {
+                            console.log(`Trace ${i}: name='${trace.name}', type='${trace.type}', visible=${trace.visible}`);
+                            if (trace.y) {
+                                console.log(`Trace ${i} y-data length: ${trace.y.length || 'scalar'}`);
+                            }
+                        });
+                    }
+                }
+            }
+
+            if (vizResult.success) {
+                if (typeof Plotly === 'undefined') {
+                    console.error('Plotly library not found on window');
+                    this.showAlert('danger', 'Visualization Error', 'Plotly library is not loaded.');
+                    return;
+                }
+
+                const chartContainer = document.getElementById('forecastChart');
+
+                if (!chartContainer) {
+                    console.error('Chart container element not found!');
+                    this.showAlert('danger', 'Display Error', 'Chart display element not found');
+                    return;
+                }
+
+                const figurePayload = typeof vizResult.figure === 'string'
+                    ? JSON.parse(vizResult.figure)
+                    : (vizResult.figure || {});
+
+                if (!figurePayload.data || !Array.isArray(figurePayload.data) || figurePayload.data.length === 0) {
+                    console.error('Figure payload missing data:', figurePayload);
+                    this.currentPlotFigure = null;
+                    this.currentPlotConfig = null;
+                    this.showAlert('warning', 'Visualization Failed', 'Received empty plot data.');
+                    return;
+                }
+
+                const defaultConfig = { 
+                    responsive: true, 
+                    displaylogo: false,
+                    autosizable: true
+                };
+                const plotConfig = Object.assign({}, defaultConfig, vizResult.config || {});
+                const layout = Object.assign({}, figurePayload.layout || {}, { 
+                    autosize: true,
+                    width: null,
+                    height: null
+                });
+
+                try {
+                    await Plotly.react(chartContainer, figurePayload.data, layout, plotConfig);
+                    chartContainer.style.display = 'block';
+                    
+                    // Make chart responsive to window resize with debouncing
+                    window.addEventListener('resize', () => {
+                        clearTimeout(this.resizeTimeout);
+                        this.resizeTimeout = setTimeout(() => {
+                            if (typeof Plotly !== 'undefined' && chartContainer) {
+                                Plotly.Plots.resize(chartContainer);
+                            }
+                        }, 250);
+                    });
+
+                    // Cache the latest figure/config for downloads and refreshes
+                    this.currentPlotFigure = Object.assign({}, figurePayload, { layout });
+                    this.currentPlotConfig = plotConfig;
+
+                    const resultsCard = document.getElementById('resultsCard');
+                    if (resultsCard) {
+                        resultsCard.scrollIntoView({ behavior: 'smooth', block: 'start' });
+                    }
+                } catch (plotlyError) {
+                    console.error('Plotly rendering failed:', plotlyError);
+                    this.currentPlotFigure = null;
+                    this.currentPlotConfig = null;
+                    this.showAlert('danger', 'Visualization Error', 'Failed to render interactive chart.');
+                }
+            } else {
+                console.error('Visualization failed:', vizResult.message);
+                this.currentPlotFigure = null;
+                this.currentPlotConfig = null;
+                this.showAlert('warning', 'Visualization Failed', vizResult.message || 'Failed to generate chart');
+            }
+        } catch (error) {
+            this.currentPlotFigure = null;
+            this.currentPlotConfig = null;
+            this.showAlert('danger', 'Chart Error', 'Failed to generate visualization: ' + error.message);
+        } finally {
+            this.hideLoading();
+        }
+    }
+
+    downloadChart() {
+        const chartContainer = document.getElementById('forecastChart');
+
+        if (!chartContainer || !this.currentPlotFigure) {
+            this.showAlert('warning', 'No Chart', 'No chart available for download.');
+            return;
+        }
+
+        if (typeof Plotly === 'undefined') {
+            this.showAlert('danger', 'Download Error', 'Plotly library is not available.');
+            return;
+        }
+
+        const filename = `sapheneia_forecast_${new Date().toISOString().slice(0, 10)}`;
+
+        Plotly.downloadImage(chartContainer, {
+            format: 'png',
+            filename,
+            width: this.currentPlotFigure.layout?.width || 1200,
+            height: this.currentPlotFigure.layout?.height || 800
+        })
+            .then(() => {
+                this.showAlert('success', 'Download Started', 'Chart download has started.');
+            })
+            .catch((error) => {
+                console.error('Plotly download failed:', error);
+                this.showAlert('danger', 'Download Error', 'Failed to download chart image.');
+            });
+    }
+
+    downloadData() {
+        if (!this.currentResults || !this.currentResults.results) {
+            this.showAlert('warning', 'No Data', 'No forecast data available for download.');
+            return;
+        }
+
+        const results = this.currentResults.results;
+        const forecastLength = results.point_forecast ? results.point_forecast.length : 
+                              results.enhanced_forecast ? results.enhanced_forecast.length : 0;
+
+        if (forecastLength === 0) {
+            this.showAlert('warning', 'No Data', 'No forecast data available for download.');
+            return;
+        }
+
+        // Create CSV content
+        let csvContent = 'Period,Point_Forecast';
+        
+        // Add raw quantile columns (skip index 0 - legacy mean)
+        if (results.quantile_forecast && Array.isArray(results.quantile_forecast)) {
+            const numQuantiles = results.quantile_forecast[0] ? results.quantile_forecast[0].length : 0;
+            // Skip index 0 (legacy mean), add Q10, Q20, Q30, Q40, Q50, Q60, Q70, Q80, Q90
+            for (let i = 1; i < numQuantiles; i++) {
+                const percentile = i * 10; // 1->Q10, 2->Q20, etc.
+                csvContent += `,Q${percentile}`;
+            }
+        }
+        
+        // Only include Period, Point_Forecast, and Q10-Q90 columns
+        // No additional columns needed
+
+        csvContent += '\n';
+
+        // Add data rows
+        for (let i = 0; i < forecastLength; i++) {
+            csvContent += `${i + 1}`;
+            
+            // Point forecast
+            const pointForecast = results.enhanced_forecast || results.point_forecast;
+            csvContent += `,${pointForecast[i]}`;
+            
+            // Raw quantiles (skip index 0 - legacy mean)
+            if (results.quantile_forecast && Array.isArray(results.quantile_forecast)) {
+                const quantileRow = results.quantile_forecast[i];
+                if (quantileRow && Array.isArray(quantileRow)) {
+                    // Skip index 0, add Q10, Q20, Q30, Q40, Q50, Q60, Q70, Q80, Q90
+                    for (let j = 1; j < quantileRow.length; j++) {
+                        csvContent += `,${quantileRow[j]}`;
+                    }
+                }
+            }
+            
+            // Only include Period, Point_Forecast, and Q10-Q90 data
+            // No additional data needed
+            
+            csvContent += '\n';
+        }
+
+        // Create and download file
+        const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
+        const link = document.createElement('a');
+        const url = URL.createObjectURL(blob);
+        link.setAttribute('href', url);
+        link.setAttribute('download', `sapheneia_forecast_data_${new Date().toISOString().slice(0, 10)}.csv`);
+        link.style.visibility = 'hidden';
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+
+        this.showAlert('success', 'Download Started', 'Forecast data download has started.');
+    }
+
+    setupTabSwitching() {
+        // Store scroll position when switching away from visualization tab
+        const visualizationTab = document.getElementById('visualization-tab');
+        const summaryTab = document.getElementById('summary-tab');
+        const dataTab = document.getElementById('data-tab');
+        
+        // Store scroll position when leaving visualization tab
+        visualizationTab.addEventListener('hidden.bs.tab', () => {
+            this.visualizationScrollPosition = window.pageYOffset;
+        });
+        
+        // Restore scroll position when returning to visualization tab
+        visualizationTab.addEventListener('shown.bs.tab', () => {
+            if (this.visualizationScrollPosition !== undefined) {
+                setTimeout(() => {
+                    window.scrollTo(0, this.visualizationScrollPosition);
+                }, 100); // Small delay to ensure content is rendered
+            }
+            
+            // Resize chart when visualization tab is shown
+            if (this.currentPlotFigure && typeof Plotly !== 'undefined') {
+                setTimeout(() => {
+                    Plotly.Plots.resize(document.getElementById('forecastChart'));
+                }, 200);
+            }
+        });
+        
+        // Store scroll position when leaving summary tab
+        summaryTab.addEventListener('hidden.bs.tab', () => {
+            this.summaryScrollPosition = window.pageYOffset;
+        });
+        
+        // Restore scroll position when returning to summary tab
+        summaryTab.addEventListener('shown.bs.tab', () => {
+            if (this.summaryScrollPosition !== undefined) {
+                setTimeout(() => {
+                    window.scrollTo(0, this.summaryScrollPosition);
+                }, 100);
+            }
+        });
+        
+        // Store scroll position when leaving data tab
+        dataTab.addEventListener('hidden.bs.tab', () => {
+            this.dataScrollPosition = window.pageYOffset;
+        });
+        
+        // Restore scroll position when returning to data tab
+        dataTab.addEventListener('shown.bs.tab', () => {
+            if (this.dataScrollPosition !== undefined) {
+                setTimeout(() => {
+                    window.scrollTo(0, this.dataScrollPosition);
+                }, 100);
+            }
+        });
+    }
+}
+
+// Initialize the application when the DOM is loaded
+document.addEventListener('DOMContentLoaded', function() {
+    window.sapheneiaApp = new SapheneiaTimesFM();
+});

webapp/templates/index.html

@@ -0,0 +1,372 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Sapheneia TimesFM - Professional Time Series Forecasting</title>
+    
+    <!-- Bootstrap CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
+    <!-- Font Awesome -->
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
+    <!-- Custom CSS -->
+    <link href="{{ url_for('static', filename='css/styles.css') }}" rel="stylesheet">
+</head>
+<body>
+    <!-- Navigation -->
+    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
+        <div class="container">
+            <a class="navbar-brand fw-bold" href="#">
+                <i class="fas fa-chart-line me-2"></i>
+                Sapheneia TimesFM
+            </a>
+            <span class="navbar-text">
+                Professional Time Series Forecasting Platform
+            </span>
+        </div>
+    </nav>
+
+    <!-- Main Container -->
+    <div class="container-fluid py-4">
+        <!-- Alert Container -->
+        <div id="alertContainer"></div>
+
+        <!-- Data Upload Card -->
+        <div class="card mb-4">
+            <div class="card-header bg-success text-white">
+                <h5 class="mb-0">
+                    <i class="fas fa-upload me-2"></i>
+                    Data Upload & Configuration
+                </h5>
+            </div>
+            <div class="card-body">
+                <div class="row">
+                    <div class="col-md-6">
+                        <h6>Upload CSV File</h6>
+                        <div class="mb-3">
+                            <input type="file" class="form-control" id="dataFile" accept=".csv">
+                            <div class="form-text">
+                                CSV file with 'date' column required. Max size: 16MB.<br>
+                                <strong>Recommended:</strong> Navigate to the <code>/local</code> directory in your project workspace.
+                            </div>
+                        </div>
+                        <button type="button" class="btn btn-success" id="uploadBtn">
+                            <i class="fas fa-upload me-2"></i>
+                            Upload Data
+                        </button>
+                    </div>
+                    <div class="col-md-6">
+                        <h6>Data Requirements</h6>
+                        <p class="text-muted">
+                            Your CSV file must contain:
+                        </p>
+                        <ul class="text-muted">
+                            <li>A 'date' column as the first column</li>
+                            <li>At least one target time series column</li>
+                            <li>Optional: covariate columns for enhanced forecasting</li>
+                        </ul>
+                    </div>
+                </div>
+
+                <!-- Data Info Section -->
+                <div id="dataInfo" style="display: none;" class="mt-4">
+                    <hr>
+                    <h6>Data Information</h6>
+                    <div id="dataDetails"></div>
+                </div>
+
+
+                <!-- Data Definition Section -->
+                <div id="dataDefinition" style="display: none;" class="mt-4">
+                    <hr>
+                    <h6>Data Definition</h6>
+                    <p class="text-muted">
+                        Select which variables to include in your forecast and define how each should be used:
+                    </p>
+                    <div id="columnDefinitions"></div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Model Configuration Card -->
+        <div class="card mb-4">
+            <div class="card-header bg-primary text-white">
+                <h5 class="mb-0">
+                    <i class="fas fa-cog me-2"></i>
+                    TimesFM Model Configuration
+                </h5>
+            </div>
+            <div class="card-body">
+                <!-- Context Dates Section -->
+                <div id="contextDatesSection" style="display: none;" class="mb-4">
+                    <h6 class="mb-3">
+                        <i class="fas fa-calendar-alt me-2"></i>
+                        Context Dates
+                    </h6>
+                    <p class="text-muted">
+                        Configure the context period (historical data) for forecasting:
+                    </p>
+                    <div class="alert alert-info mb-3">
+                        <small>
+                            <strong>Available Data:</strong> <span id="availableDataLength">0</span> periods 
+                            (<span id="availableDataRange">-</span>)
+                        </small>
+                    </div>
+                    <div class="row">
+                        <div class="col-md-6">
+                            <div class="mb-3">
+                                <label class="form-label">Start Date</label>
+                                <select class="form-control" id="contextStartDate">
+                                    <option value="">Select start date...</option>
+                                </select>
+                                <div class="form-text">Start of historical data period</div>
+                            </div>
+                        </div>
+                        <div class="col-md-6">
+                            <div class="mb-3">
+                                <label class="form-label">End Date</label>
+                                <select class="form-control" id="contextEndDate">
+                                    <option value="">Select end date...</option>
+                                </select>
+                                <div class="form-text">End of historical data period</div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="alert alert-info">
+                        <small>
+                            <strong>Context Length:</strong> <span id="contextLengthDisplay">0</span> periods<br>
+                            <strong>Constraint:</strong> Must be multiple of 32, max 4096 total
+                        </small>
+                    </div>
+                </div>
+
+                <form id="modelConfigForm">
+                    <div class="row">
+                        <div class="col-md-3">
+                            <label class="form-label">Backend</label>
+                            <select class="form-select" id="backend">
+                                <option value="cpu" selected>CPU</option>
+                                <option value="gpu">GPU</option>
+                                <option value="tpu">TPU</option>
+                            </select>
+                        </div>
+                        <div class="col-md-3">
+                            <label class="form-label">Context Length</label>
+                            <input type="number" class="form-control" id="contextLen" value="64" min="10" max="2048">
+                        </div>
+                        <div class="col-md-3">
+                            <label class="form-label">Horizon Length</label>
+                            <input type="number" class="form-control" id="horizonLen" value="24" min="1" max="128">
+                        </div>
+                        <div class="col-md-3">
+                            <label class="form-label">Model Source</label>
+                            <select class="form-select" id="modelSource">
+                                <option value="huggingface" selected>HuggingFace Checkpoint</option>
+                                <option value="local">Local Model Path</option>
+                            </select>
+                        </div>
+                    </div>
+                    
+                    <!-- HuggingFace Checkpoint Row -->
+                    <div class="row mt-3" id="huggingfaceRow">
+                        <div class="col-md-12">
+                            <label class="form-label">HuggingFace Checkpoint</label>
+                            <select class="form-select" id="checkpoint">
+                                <option value="google/timesfm-2.0-500m-pytorch" selected>google/timesfm-2.0-500m-pytorch</option>
+                            </select>
+                            <div class="form-text">PyTorch model for CPU/GPU inference</div>
+                        </div>
+                    </div>
+                    
+                    <!-- Local Model Path Row -->
+                    <div class="row mt-3" id="localPathRow" style="display: none;">
+                        <div class="col-md-12">
+                            <label class="form-label">Local Model Path</label>
+                            <input type="text" class="form-control" id="localPath" placeholder="/path/to/your/timesfm/model">
+                            <div class="form-text">Enter the full path to your locally stored TimesFM model</div>
+                        </div>
+                    </div>
+                    <div class="mt-3">
+                        <button type="submit" class="btn btn-primary">
+                            <i class="fas fa-play me-2"></i>
+                            Initialize Model
+                        </button>
+                        <span id="modelStatus" class="ms-3">
+                            <span class="badge bg-secondary">Not Initialized</span>
+                        </span>
+                    </div>
+                </form>
+            </div>
+        </div>
+
+
+        <!-- Forecasting Configuration Card -->
+        <div class="card mb-4">
+            <div class="card-header bg-warning text-dark">
+                <h5 class="mb-0">
+                    <i class="fas fa-crystal-ball me-2"></i>
+                    Forecasting Configuration
+                </h5>
+            </div>
+            <div class="card-body">
+                <form id="forecastConfigForm">
+                    <div class="row">
+                        <div class="col-md-4">
+                            <div class="form-check form-switch">
+                                <input class="form-check-input" type="checkbox" id="useCovariates" checked>
+                                <label class="form-check-label" for="useCovariates">
+                                    Use Covariates
+                                </label>
+                            </div>
+                        </div>
+                        <div class="col-md-8"></div>
+                    </div>
+                    <div class="mt-3">
+                        <button type="submit" class="btn btn-warning text-dark" disabled id="forecastBtn">
+                            <i class="fas fa-magic me-2"></i>
+                            Run Forecast
+                        </button>
+                    </div>
+                </form>
+            </div>
+        </div>
+
+        <!-- Results Card -->
+        <div class="card" id="resultsCard" style="display: none;">
+            <div class="card-header bg-info text-white">
+                <h5 class="mb-0">
+                    <i class="fas fa-chart-line me-2"></i>
+                    Forecasting Results
+                </h5>
+            </div>
+            <div class="card-body">
+                <!-- Tabs for different result views -->
+                <ul class="nav nav-tabs" id="resultTabs" role="tablist">
+                    <li class="nav-item" role="presentation">
+                        <button class="nav-link active" id="visualization-tab" data-bs-toggle="tab" 
+                                data-bs-target="#visualization" type="button" role="tab">
+                            <i class="fas fa-chart-area me-1"></i>
+                            Visualization
+                        </button>
+                    </li>
+                    <li class="nav-item" role="presentation">
+                        <button class="nav-link" id="summary-tab" data-bs-toggle="tab" 
+                                data-bs-target="#summary" type="button" role="tab">
+                            <i class="fas fa-list me-1"></i>
+                            Summary
+                        </button>
+                    </li>
+                    <li class="nav-item" role="presentation">
+                        <button class="nav-link" id="data-tab" data-bs-toggle="tab" 
+                                data-bs-target="#data" type="button" role="tab">
+                            <i class="fas fa-table me-1"></i>
+                            Data
+                        </button>
+                    </li>
+                </ul>
+
+                <!-- Tab Content -->
+                <div class="tab-content mt-3" id="resultTabContent">
+                    <!-- Visualization Tab -->
+                    <div class="tab-pane fade show active" id="visualization" role="tabpanel">
+                        <div class="chart-container">
+                            <div id="forecastChart"></div>
+                        </div>
+                        <div class="mt-3">
+                            <button type="button" class="btn btn-outline-primary" id="downloadChart">
+                                <i class="fas fa-download me-2"></i>
+                                Download Chart
+                            </button>
+                            <button type="button" class="btn btn-outline-success ms-2" id="downloadData">
+                                <i class="fas fa-table me-2"></i>
+                                Download Data
+                            </button>
+                        </div>
+                        <!-- Quantile selection (always visible) -->
+                        <div class="row mt-3" id="quantileSelector">
+                            <div class="col-12">
+                                <label class="form-label">Select quantiles to shade (choose lower and upper)</label>
+                                <div class="d-flex flex-wrap gap-2" id="quantileCheckboxes">
+                                    <div class="form-check form-check-inline">
+                                        <input class="form-check-input quantile-tick" type="checkbox" value="1" id="q1" checked>
+                                        <label class="form-check-label" for="q1">Q10</label>
+                                    </div>
+                                    <div class="form-check form-check-inline">
+                                        <input class="form-check-input quantile-tick" type="checkbox" value="2" id="q2">
+                                        <label class="form-check-label" for="q2">Q20</label>
+                                    </div>
+                                    <div class="form-check form-check-inline">
+                                        <input class="form-check-input quantile-tick" type="checkbox" value="3" id="q3">
+                                        <label class="form-check-label" for="q3">Q30</label>
+                                    </div>
+                                    <div class="form-check form-check-inline">
+                                        <input class="form-check-input quantile-tick" type="checkbox" value="4" id="q4">
+                                        <label class="form-check-label" for="q4">Q40</label>
+                                    </div>
+                                    <div class="form-check form-check-inline">
+                                        <input class="form-check-input quantile-tick" type="checkbox" value="5" id="q5">
+                                        <label class="form-check-label" for="q5">Q50</label>
+                                    </div>
+                                    <div class="form-check form-check-inline">
+                                        <input class="form-check-input quantile-tick" type="checkbox" value="6" id="q6">
+                                        <label class="form-check-label" for="q6">Q60</label>
+                                    </div>
+                                    <div class="form-check form-check-inline">
+                                        <input class="form-check-input quantile-tick" type="checkbox" value="7" id="q7">
+                                        <label class="form-check-label" for="q7">Q70</label>
+                                    </div>
+                                    <div class="form-check form-check-inline">
+                                        <input class="form-check-input quantile-tick" type="checkbox" value="8" id="q8">
+                                        <label class="form-check-label" for="q8">Q80</label>
+                                    </div>
+                                    <div class="form-check form-check-inline">
+                                        <input class="form-check-input quantile-tick" type="checkbox" value="9" id="q9" checked>
+                                        <label class="form-check-label" for="q9">Q90</label>
+                                    </div>
+                                </div>
+                                <div class="form-text">Defaults to Q10-Q90 bands. Index 0 (legacy mean) is automatically skipped.</div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Summary Tab -->
+                    <div class="tab-pane fade" id="summary" role="tabpanel">
+                        <div id="forecastSummary">
+                            <!-- Summary content will be populated here -->
+                        </div>
+                    </div>
+
+                    <!-- Data Tab -->
+                    <div class="tab-pane fade" id="data" role="tabpanel">
+                        <div id="forecastData">
+                            <!-- Data table will be populated here -->
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Loading Modal -->
+    <div class="modal fade" id="loadingModal" tabindex="-1" data-bs-backdrop="static">
+        <div class="modal-dialog modal-dialog-centered">
+            <div class="modal-content">
+                <div class="modal-body text-center py-4">
+                    <div class="spinner-border text-primary mb-3" role="status">
+                        <span class="visually-hidden">Loading...</span>
+                    </div>
+                    <h6 id="loadingText">Processing...</h6>
+                    <p class="text-muted mb-0" id="loadingSubtext">Please wait while we process your request.</p>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Bootstrap JS -->
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
+    <!-- Plotly JS for interactive visualizations -->
+    <script src="https://cdn.plot.ly/plotly-2.26.0.min.js"></script>
+    <!-- Custom JS -->
+    <script src="{{ url_for('static', filename='js/app.js') }}"></script>
+</body>
+</html>