# Conversion Examples

## Example 1: Academic Diagram

Converting an architecture diagram for a research paper.

**Context**: You have `docs/architecture_diagram.html` and need `docs/architecture_diagram.png`.

```bash
# Navigate to project root
cd /path/to/project

# Convert with full-page capture
playwright screenshot --full-page "file://$(pwd)/docs/architecture_diagram.html" docs/architecture_diagram.png

# Verify dimensions
sips -g pixelHeight -g pixelWidth docs/architecture_diagram.png
```

## Example 2: Bar Chart

Converting a bar chart visualization.

**Context**: You have `docs/loophole_rate_diagram.html` showing experimental results.

```bash
# High-resolution output for publication
playwright screenshot --full-page --scale=2 "file://$(pwd)/docs/loophole_rate_diagram.html" docs/loophole_rate_diagram.png
```

## Example 3: Batch Conversion

Converting all HTML files in a directory.

**Context**: Multiple diagrams in `docs/figures/`.

```bash
# Create output directory
mkdir -p docs/figures/png

# Batch convert all HTML files
for f in docs/figures/*.html; do
  filename=$(basename "$f" .html)
  playwright screenshot --full-page "file://$(pwd)/$f" "docs/figures/png/${filename}.png"
  echo "Converted: $f"
done
```

## Example 4: Dark Mode Variant

Creating light and dark mode versions of a diagram.

```bash
# Light mode (default)
playwright screenshot --full-page "file://$(pwd)/diagram.html" diagram-light.png

# Dark mode
playwright screenshot --full-page --color-scheme=dark "file://$(pwd)/diagram.html" diagram-dark.png
```

## Example 5: From Empathy Experiment

Real example from paralleLLM project:

```bash
# Convert the loophole rate bar chart
playwright screenshot --full-page "file://$(pwd)/docs/loophole_rate_diagram.html" docs/loophole_rate_diagram.png

# Convert architecture pipeline diagram
playwright screenshot --full-page "file://$(pwd)/docs/architecture_diagram_v2.html" docs/architecture_diagram_v2.png
```

## Example 6: With Wait for Animations

When HTML has CSS transitions or animations:

```bash
# Wait 1 second for animations to complete
playwright screenshot --full-page --wait-for-timeout=1000 "file://$(pwd)/animated-diagram.html" output.png
```

## Shell Script for Project Integration

Create a reusable script `scripts/html-to-png.sh`:

```bash
#!/bin/bash
# html-to-png.sh - Convert HTML diagrams to PNG
# Usage: ./scripts/html-to-png.sh <input.html> [output.png]

set -e

INPUT="$1"
OUTPUT="${2:-${INPUT%.html}.png}"

if [ -z "$INPUT" ]; then
  echo "Usage: $0 <input.html> [output.png]"
  exit 1
fi

if [ ! -f "$INPUT" ]; then
  echo "Error: File not found: $INPUT"
  exit 1
fi

echo "Converting: $INPUT -> $OUTPUT"
playwright screenshot --full-page "file://$(pwd)/$INPUT" "$OUTPUT"
echo "Done! Dimensions:"
sips -g pixelHeight -g pixelWidth "$OUTPUT"
```

Make executable:
```bash
chmod +x scripts/html-to-png.sh
```

Use:
```bash
./scripts/html-to-png.sh docs/diagram.html docs/diagram.png
```