# Recording a Demo GIF for DPSCoach
## Goal
Create a 30-second animated GIF showing the complete workflow:
1. Analyzing combat logs
2. Asking a question in the Coach tab
3. Viewing the SQL trace
4. Receiving a deterministic answer
## Tools Recommended
- **ScreenToGif** (Windows): Free, open-source, easy to use
- Download: https://www.screentogif.com/
- Allows recording, editing, and exporting as GIF
- **LICEcap** (Windows/Mac): Simple, lightweight
- Download: https://www.cockos.com/licecap/
## Recording Steps
### 1. Prepare the UI
- Launch the app: `python -m app.main`
- Ensure model is downloaded and self-test has passed
- Have a combat logs directory ready (either sample or real `COMBATLOGS`)
### 2. Start Recording
- Open your GIF recorder
- Set recording area to capture the app window (1024x768 recommended)
- Start recording
### 3. Workflow to Capture
1. **Analyze Logs** (5 seconds)
- Click "Browse Combat Logs Directory"
- Select the folder
- Click "Analyze Logs"
- Wait for "Analysis complete!" message
2. **Switch to Coach Tab** (2 seconds)
- Click the "Coach" tab
3. **Ask a Question** (3 seconds)
- Click one of the "Quick Questions" buttons (e.g., "Why did my crit rate drop?")
- Or type a question manually
4. **Show the Answer** (20 seconds)
- Wait for the coach to respond
- Scroll to show the SQL trace (if visible)
- Highlight the deterministic answer
### 4. Stop Recording & Export
- Stop the recording
- Trim any dead time at the start/end
- Export as GIF (target: <5 MB, 10-15 FPS, 800-1024px width)
### 5. Save to Repo
- Place the GIF at: `docs/demo.gif`
- Commit and push to GitHub
- The README.md will automatically display it
## Tips for a Professional Demo
- **Clean desktop**: Hide distractions, close other windows
- **Smooth mouse movements**: Don't rush, move deliberately
- **Highlight key moments**: Pause briefly when the answer appears
- **Optimize file size**: Use lower FPS (10-12) and reduce colors if needed
- **Test the GIF**: View it in a browser before committing
## Fallback: Static Screenshots
If a GIF is too large or difficult to create, use static screenshots instead:
1. Capture 3-4 key screenshots (log selection, coach question, SQL trace, answer)
2. Place in `docs/screenshots/`
3. Update README to show images in a table or sequence
