HF-Streamlit / README.md
AntDX316
updated
d63d60b

A newer version of the Streamlit SDK is available: 1.46.1

Upgrade
metadata
title: HF-Streamlit
emoji: πŸ‘€
colorFrom: gray
colorTo: blue
sdk: streamlit
sdk_version: 1.44.0
app_file: app.py
pinned: false

Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

HF-Streamlit

HF-Streamlit is an interactive data visualization dashboard built with Python and Streamlit that demonstrates the power of modern web-based analytics.

The app generates dynamic time series data and presents it through customizable charts with multiple color themes, real-time filtering capabilities, and exportable datasets.

Users can explore data through an intuitive interface featuring adjustable parameters (data size, chart height, color schemes), filter by categories and value ranges, view key performance metrics, and download filtered results as CSV files.

Perfect for showcasing data science capabilities or as a starting template for building more complex analytical dashboards, this app combines clean UI design with powerful data manipulation features in just a few lines of Python code.

πŸ“Š Features

  • Interactive Data Visualization: Dynamic time series charts with customizable color themes
  • Real-time Data Filtering: Filter datasets by categories and value ranges
  • Data Export: Download filtered data as CSV files
  • Metrics Dashboard: Display key performance indicators and statistics
  • Responsive Design: Clean, modern UI with custom CSS styling
  • Multi-tab Interface: Organized content across Chart, Data Explorer, and About tabs

πŸš€ Quick Start

Prerequisites

  • Python 3.9 or higher
  • pip package manager

Local Installation

  1. Clone the repository:
git clone <repository-url>
cd HF-Streamlit
  1. Install dependencies:
pip install -r requirements.txt
  1. Run the application:
streamlit run app.py

The app will be available at http://localhost:8501

🐳 Docker Deployment

Build and Run with Docker

  1. Build the Docker image:
docker build -t hf-streamlit .
  1. Run the container:
docker run -p 7860:7860 hf-streamlit

The app will be available at http://localhost:7860

Docker Hub (if applicable)

docker pull <your-dockerhub-username>/hf-streamlit
docker run -p 7860:7860 <your-dockerhub-username>/hf-streamlit

πŸ› οΈ Dependencies

  • streamlit: Web app framework for Python
  • pandas: Data manipulation and analysis
  • numpy: Numerical computing
  • plotly: Interactive plotting library

πŸ“± Application Structure

HF-Streamlit/
β”œβ”€β”€ app.py              # Main Streamlit application
β”œβ”€β”€ requirements.txt    # Python dependencies
β”œβ”€β”€ Dockerfile         # Docker configuration
β”œβ”€β”€ README.md          # Project documentation
└── HF-docker2/        # Additional Docker configurations

🎯 Usage

Dashboard Features

  1. Chart Tab:

    • Adjust data points (10-500) using the sidebar slider
    • Customize chart height (300-800px)
    • Select from 5 color themes (blues, reds, greens, purples, oranges)
    • View real-time metrics and KPIs
  2. Data Explorer Tab:

    • Filter data by categories (A, B, C, D)
    • Set value range filters using sliders
    • View filtered datasets in tabular format
    • Download filtered data as CSV
  3. About Tab:

    • Learn about the application features
    • Understand Streamlit capabilities

Customization

The app includes several customizable parameters:

  • Data Size: Control the number of data points generated
  • Chart Height: Adjust visualization height
  • Color Themes: Choose from predefined color palettes
  • Filtering Options: Multiple category and range filters

πŸ”§ Configuration

Environment Variables

The application uses default Streamlit configuration. You can customize it by creating a .streamlit/config.toml file:

[server]
port = 8501
address = "0.0.0.0"

[theme]
primaryColor = "#1E88E5"
backgroundColor = "#FFFFFF"
secondaryBackgroundColor = "#F0F2F6"

πŸš€ Deployment Options

Streamlit Cloud

  1. Push your code to GitHub
  2. Connect your repository to Streamlit Cloud
  3. Deploy with one click

Heroku

  1. Add a Procfile:
web: streamlit run app.py --server.port=$PORT --server.address=0.0.0.0

AWS/GCP/Azure

Use the provided Dockerfile for container-based deployments.

🀝 Contributing

  1. Fork the repository
  2. Create a feature branch (git checkout -b feature/amazing-feature)
  3. Commit your changes (git commit -m 'Add amazing feature')
  4. Push to the branch (git push origin feature/amazing-feature)
  5. Open a Pull Request

πŸ“„ License

This project is open source and available under the MIT License.

πŸ†˜ Support

If you encounter any issues or have questions:

  1. Check the Streamlit documentation
  2. Open an issue in this repository
  3. Refer to the troubleshooting section below

πŸ” Troubleshooting

Common Issues

Port already in use:

streamlit run app.py --server.port=8502

Module not found:

pip install -r requirements.txt

Docker build fails: Ensure Docker is running and you have sufficient disk space.

πŸ“ˆ Performance

The application is optimized with:

  • @st.cache_data decorator for data generation
  • Efficient data filtering operations
  • Responsive chart rendering with Plotly

Made with ❀️ using Streamlit