# Phase 4: Web Deployment Guide

## Overview

Phase 4 deploys CompI to Hugging Face Spaces with automatic CI/CD from GitHub. This enables public access to your multimodal AI art generation platform.

## 4.A: Repository Preparation ✅

The following files have been added to your repo:

- `packages.txt` - System dependencies for audio processing and OpenGL
- `.gitattributes` - Git LFS configuration for model files
- `requirements.txt` - Already present with Python dependencies

## 4.B: Create Hugging Face Space

### Step 1: Create New Space

1. Go to [Hugging Face Spaces](https://huggingface.co/spaces)
2. Click "Create new Space"
3. Choose:
   - **SDK**: Streamlit
   - **Space name**: `compi-final-dashboard` (or your preference)
   - **Visibility**: Public
   - **Hardware**: CPU basic (free tier)

### Step 2: Configure Space README

Replace the default README.md in your Space with:

```markdown
---
title: CompI — Final Dashboard
emoji: 🎨
sdk: streamlit
app_file: src/ui/compi_phase3_final_dashboard.py
pinned: false
---

# CompI - Multimodal AI Art Generation Platform

The ultimate creative platform combining text, audio, data, emotion, and real-time inputs for AI art generation.

## Features

🧩 **Multimodal Inputs** - Text, Audio, Data, Emotion, Real-time feeds
🖼️ **Advanced References** - Multi-image upload with role assignment  
⚙️ **Model Management** - SD 1.5/SDXL switching, LoRA integration
🖼️ **Professional Gallery** - Filtering, rating, annotation system
💾 **Preset Management** - Save/load complete configurations
📦 **Export System** - Complete bundles with metadata

## Usage

1. Configure your inputs in the "Inputs" tab
2. Upload reference images in "Advanced References" 
3. Choose your model and performance settings
4. Generate with intelligent fusion of all inputs
5. Review results in the gallery and export bundles

Built with Streamlit, PyTorch, and Diffusers.
```

### Step 3: Add Secrets (Optional)

In your Space Settings → Repository secrets, add:
- `OPENWEATHER_KEY` - Your OpenWeatherMap API key for real-time weather data

**Important**: Do NOT link the Space to GitHub yet. We'll deploy via CI/CD.

## 4.C: GitHub Actions Setup

### Step 1: Add GitHub Secrets

In your GitHub repo, go to Settings → Secrets and variables → Actions:

1. **New repository secret**: `HF_TOKEN`
   - Value: Your Hugging Face **Write** token from [HF Settings → Access Tokens](https://huggingface.co/settings/tokens)

2. **New repository secret**: `HF_SPACE_ID` 
   - Value: `your-username/your-space-name` (e.g., `AXRZCE/compi-final-dashboard`)

### Step 2: GitHub Actions Workflow

The workflow file `.github/workflows/deploy-to-hf-spaces.yml` will be created next.

## 4.D: Runtime Optimization

Default settings optimized for free CPU tier:
- **Model**: SD 1.5 (faster than SDXL)
- **Resolution**: 512×512 (good quality/speed balance)
- **Steps**: 20-24 (sufficient for good results)
- **Batch size**: 1 (memory efficient)
- **ControlNet**: Off by default (users can enable)

## 4.E: Deployment Workflow

1. **Development**: Work on feature branches
2. **Testing**: Test locally with `streamlit run src/ui/compi_phase3_final_dashboard.py`
3. **Deploy**: Merge to `main` → GitHub Actions automatically deploys to HF Space
4. **Rollback**: Revert commit on `main` if issues occur

## Next Steps

1. Complete the HF Space setup above
2. Add GitHub secrets
3. The GitHub Actions workflow will be created automatically
4. Test deployment by pushing to `main`

Your deployed app will be available at: `https://your-username-your-space.hf.space`