screenshot_setup.md

Screenshot Setup Guide for ChatUI Helper Documentation

This guide explains how to use Playwright to capture screenshots for the ChatUI Helper documentation.

Installation

1. Install Playwright and its dependencies:

pip install -r requirements.txt
playwright install chromium

Usage

Capturing Local App Screenshots

1. Start the ChatUI Helper app locally:

python app.py

2. In a new terminal, run the screenshot capture:

# Capture all local app screenshots
python capture_docs_screenshots.py local

# Or capture all screenshots from the main script
python capture_screenshots.py

Capturing HuggingFace Screenshots

For HuggingFace deployment screenshots, you can either:

1. Use placeholder URLs:

python capture_docs_screenshots.py huggingface

2. Or provide actual space details:

python capture_docs_screenshots.py huggingface your-username your-space-name

Capturing Specific Screenshots

To capture a single screenshot:

python capture_screenshots.py main_interface

Screenshot Configurations

Local App Screenshots (capture_screenshots.py)

• main_interface - Full app interface
• config_tab - Configuration tab
• template_dropdown - Template selection
• preview_tab - Preview tab
• preview_chat_example - Chat example
• docs_tab - Documentation tab
• config_system_prompt - System configuration
• config_api_section - API configuration
• generate_button - Generate button

Documentation Screenshots (capture_docs_screenshots.py)

• Local app documentation views
• HuggingFace Spaces deployment steps
• Settings and configuration screens

Updating support_docs.py

After capturing new screenshots, update the image references in support_docs.py:

1. Replace placeholder image names (img1.png, img2.png, etc.) with descriptive names
2. Update the gr.Image components to reference the new screenshots
3. Ensure all image paths are correct

Screenshot Best Practices

1. Consistency: Use the same viewport size (1280x800) for all screenshots
2. Quality: Device scale factor is set to 2 for high-quality images
3. Wait Times: Adjust wait times if animations haven't completed
4. Headless Mode: Set headless=True in the browser launch for automated captures

Troubleshooting

Common Issues

1. Timeout errors: Increase wait times in the configuration
2. Element not found: Update selectors if the UI has changed
3. Network errors: Add wait_until='networkidle' to page navigation

Debug Mode

Run with visible browser:

browser = await p.chromium.launch(headless=False)

Updating Selectors

If the UI changes, update selectors in the configuration:

• Use browser DevTools to find new selectors
• Test selectors in the browser console first
• Use data-testid attributes when available

Maintenance

Regularly review and update:

1. Screenshot configurations when UI changes
2. Image references in support_docs.py
3. Wait times if performance changes
4. Selectors if Gradio updates change the DOM structure