# Deployment Guide for Hugging Face Spaces

This guide explains how to deploy the Datasets Navigator app to Hugging Face Spaces using Docker.

## Prerequisites

- Docker installed and running (for local testing)
- Hugging Face account ([sign up here](https://huggingface.co/join))

## Files Created for Docker Deployment

- `Dockerfile` - Multi-stage Docker build configuration
- `.dockerignore` - Excludes unnecessary files from Docker build
- `docker-compose.yml` - For local testing
- `README.md` - Updated with HF Spaces metadata
- `next.config.mjs` - Updated with `output: 'standalone'` for Docker

## Local Testing (Optional)

Before deploying to Hugging Face Spaces, you can test the Docker build locally:

### Option 1: Using Docker directly

```bash
# Build the image
docker build -t datasets-navigator .

# Run the container
docker run -p 7860:7860 datasets-navigator

# Access the app at http://localhost:7860
```

### Option 2: Using Docker Compose

```bash
# Build and run
docker-compose up --build

# Access the app at http://localhost:7860

# Stop with Ctrl+C, or in detached mode:
docker-compose down
```

## Deploying to Hugging Face Spaces

### Method 1: Via Hugging Face Web Interface

1. Go to [Hugging Face Spaces](https://huggingface.co/spaces)
2. Click "Create new Space"
3. Fill in the details:
   - **Space name**: Choose a name (e.g., `datasets-navigator`)
   - **License**: Select appropriate license
   - **SDK**: Select "Docker"
   - **Hardware**: Start with "CPU basic" (can upgrade later)
4. Clone the Space repository:
   ```bash
   git clone https://huggingface.co/spaces/YOUR_USERNAME/YOUR_SPACE_NAME
   ```
5. Copy all files from `datasets_navigator_app/` to the cloned repository
6. Push to Hugging Face:
   ```bash
   cd YOUR_SPACE_NAME
   git add .
   git commit -m "Initial commit: Datasets Navigator app"
   git push
   ```

### Method 2: Push Existing Repository

If you already have a Space created:

```bash
# Add Hugging Face as a remote
cd datasets_navigator_app
git remote add hf https://huggingface.co/spaces/YOUR_USERNAME/YOUR_SPACE_NAME

# Push to Hugging Face
git add .
git commit -m "Deploy Datasets Navigator to HF Spaces"
git push hf main
```

## Configuration

The app is configured via `README.md` frontmatter:

```yaml
---
title: Prova
emoji: 🍽️
colorFrom: blue
colorTo: purple
sdk: docker
app_port: 7860
---
```

You can customize:
- `title`: The Space's display name
- `emoji`: Icon shown in the Space
- `colorFrom` / `colorTo`: Gradient colors for the Space card
- `app_port`: Must match the port in Dockerfile (7860)

## Environment Variables & Secrets

If your app needs environment variables or secrets:

1. Go to your Space settings on Hugging Face
2. Navigate to "Variables and secrets"
3. Add variables (public) or secrets (private)

They will be available as environment variables in the Docker container.

## Troubleshooting

### Build Fails

- Check the build logs in the Space's "Logs" tab
- Verify all dependencies are in `package.json`
- Ensure `package-lock.json` is committed

### App Won't Start

- Verify the app listens on `0.0.0.0:7860`
- Check the Docker logs for errors
- Ensure user permissions are correct (user ID 1000)

### Port Issues

- The app MUST listen on the port specified in `app_port` (7860)
- Verify `ENV PORT=7860` in Dockerfile
- Next.js reads the PORT environment variable automatically

## Upgrading Space Hardware

If you need more resources:

1. Go to Space settings
2. Select "Hardware" tab
3. Choose upgrade (CPU/GPU options available)
4. Confirm the upgrade

Note: GPU and upgraded hardware have associated costs.

## References

- [HF Spaces Docker Documentation](https://huggingface.co/docs/hub/spaces-sdks-docker)
- [Next.js Docker Documentation](https://nextjs.org/docs/app/building-your-application/deploying#docker-image)
- [Hugging Face Spaces Examples](https://huggingface.co/spaces)