# Hugging Face Space Update Guide

Since you already have the structure at [riazmo/ui-regression-testing](https://huggingface.co/spaces/riazmo/ui-regression-testing), you should **replace** the existing files. This is better than creating a new Space because it maintains your existing URL and history.

## 🛠 Update Steps

### 1. Backup (Optional but Recommended)
Before replacing files, you can create a new branch in your HF Space repository if you want to keep the old version:
```bash
git checkout -b v1-original
git push origin v1-original
git checkout main
```

### 2. Replace Core Files
Upload and overwrite the following files from the provided `ui-regression-testing-langgraph-enhanced.zip`:

| File Path | Description of Change |
| :--- | :--- |
| `app.py` | Updated to support the new two-step LangGraph workflow (Capture -> Review -> Analyze). |
| `workflow.py` | Completely refactored to include persistence, subgraphs, and breakpoints. |
| `state_schema.py` | Updated with dictionary-based state and LangGraph reducers. |
| `agents/` | All files in this folder have been updated to handle the new state structure. |
| `requirements.txt` | Ensure `langgraph`, `langchain`, and `langchain-core` are included. |

### 3. Add New Files
Add these new files to your repository to enable the new features:
- `README_LANGGRAPH.md`: Documentation for the new features.
- `storage_manager.py`: Handles persistent screenshot storage.
- `hf_vision_analyzer.py`: Integrated module for Hugging Face vision models.

### 4. Configuration
Ensure your Hugging Face Space has the following **Secrets** configured in the Settings tab:
- `FIGMA_ACCESS_TOKEN`: Your Figma API key.
- `HUGGINGFACE_API_KEY`: Your HF token (required for the vision model analysis).

## 🚀 What Happens Next?
Once you push these changes, Hugging Face will automatically rebuild your Space. The new UI will allow you to:
1.  **Start Capture**: The agents will fetch Figma designs and website screenshots.
2.  **Review**: The workflow will pause (using LangGraph Breakpoints), allowing you to see the screenshots in the Gradio gallery.
3.  **Approve & Analyze**: Click the resume button to trigger the AI analysis and generate the final report.