How I Deployed My NBA Prediction App Using Hugging Face Spaces and Streamlit

🟢 Live Demo: NBA Insights on Hugging Face

From Local to Live: Finishing the NBA Insights Project

After five weeks of intense development—collecting data, engineering features, training an XGBoost model, building dashboards, and testing a local app—I finally reached

Week 6: Deployment.

The goal?To make the NBA Game Prediction App accessible via the web so users could:

• Manually input game conditions to predict winners

• Upload CSVs for batch predictions

• Explore visual insights using interactive dashboards

Let me walk you through the deployment challenges, decisions, and solutions I encountered while bringing the app to life on Hugging Face Spaces.

Challenge 1: Docker SDK or Streamlit?

Initially, I selected the Docker SDK option on Hugging Face for more control. But I quickly ran into trouble:

• axios errors when the app tried to initialize

• Hugging Face's system couldn't reliably locate the app file

• Secret variables (like API tokens) weren’t always injected as expected

  
  

🔄 Solution: I switched to the Streamlit SDK. This simplified the build and removed unnecessary Docker layers—while still giving me access to Hugging Face’s secret management and caching systems.

Challenge 2: Model File Upload

My trained model was saved as a .pkl file. I tried including it in the Space, but:

• Docker builds failed due to the binary file

• Large .pkl files weren’t handled gracefully in some environments

  
  

🔄 Solution: I uploaded the .pkl model to Hugging Face Datasets instead. This approach:

• Allowed clean downloads via hf_hub_download()

• Took advantage of Hugging Face’s CDN and caching

• Made it easier to version control the model externally

Challenge 3: Secrets and Credentials

The app sends predictions to a Google Sheet using the Sheets API. But I needed to securely manage:

• My Hugging Face API key

• A full Google service account credential (JSON)

  
  

🔄 Solution: I used the Secrets tab in the Hugging Face Space settings:

• HF_TOKEN: to access private Hugging Face Datasets

• GOOGLE_CREDENTIALS_JSON: a base64 string of my full JSON keyfile

Testing the Final Build

The final Streamlit app supports:

• Manual input with sliders and dropdowns

• CSV upload and batch predictions

• A real-time connection to Google Sheets

• Error handling for mismatched column inputs

It worked great on both local and cloud environments, and predictions were consistent across platforms.

What’s Next for NBA Insights?

This deployment marks the end of Phase 1.

Coming this fall:

• Auto-predictions from real-time game calendars

• Live dashboards tailored to the current NBA season

• Enhanced visualizations for player stats and team dynamics

Final Thoughts

Deploying a machine learning model is never just about writing streamlit run.It’s about:

• Handling environment variables

• Packaging models correctly

• Managing secrets securely

• Choosing the right SDK for your use case

  
  

If you’re building your own ML app, I highly recommend:

• Using Hugging Face Spaces with Streamlit

• Uploading large .pkl files to Datasets

• Keeping secrets and config centralized using Hugging Face’s environment management tools