Create Demo Video for Yaak Proxy

# Create Demo Video for Yaak Proxy

## Background

A well-crafted demo video is one of the most effective ways to showcase the Yaak Proxy's capabilities and help potential users understand the product quickly. Video content significantly improves:

- **User engagement** - Visual demonstrations are 95% more memorable than text
- **Onboarding speed** - New users can see the complete workflow in under 2 minutes
- **Project visibility** - Videos increase GitHub star conversion by ~40%
- **Documentation clarity** - Show, don't just tell

This issue proposes creating a professional demo video (30-90 seconds) that showcases the Yaak Proxy's installation, setup, and usage, with particular focus on the UI and privacy protection capabilities.

---

## Demo Video Plan

### Duration
**Target: 60-90 seconds**
- Introduction: 10s
- Installation: 15s
- Setup: 15s
- Usage Demo: 40s
- Closing: 10s

### Tone
- Professional but approachable
- Focus on the value proposition (privacy protection)
- Show real-world use case
- Emphasize simplicity and effectiveness

---

## Demo Script

### Scene 1: Introduction (0:00-0:10)

**Visuals:**
- Yaak logo with mascot
- Text overlay: "Yaak Privacy Proxy - Protect Your PII"

**Voiceover:**
> "Meet Yaak - a privacy-first proxy that automatically detects and masks personally identifiable information before it reaches external APIs like OpenAI."

### Scene 2: Installation (0:10-0:25)

**Visuals:**
- Terminal with clear font (size 16+)
- Show download/installation commands

**Actions:**
```bash
# For macOS (DMG)
# Show: Drag Yaak.app to Applications
open Yaak-Privacy-Proxy.dmg

# Or via CLI
git clone https://github.com/hanneshapke/yaak-proxy.git
cd yaak-proxy
make electron
```

**Voiceover:**
> "Installation is simple. Download the DMG for macOS, or clone the repo and run 'make electron'. The app starts automatically on port 8080."

### Scene 3: UI Overview (0:25-0:40)

**Visuals:**
- Open Yaak application
- Show the main interface
- Point out key features

**Actions:**
1. Launch Yaak application
2. Show status indicator (green = running)
3. Highlight the input text area
4. Show Settings button (gear icon)
5. Show Logging button

**Voiceover:**
> "The Yaak UI is clean and intuitive. Enter your OpenAI API key in settings, and you're ready to go."

### Scene 4: Privacy in Action - UI Demo (0:40-1:05)

**Visuals:**
- Split screen or picture-in-picture showing UI and results

**Actions:**
1. Type in text area:
   ```
   Hi, my name is John Smith and my email is john.smith@email.com. 
   My phone is 555-123-4567. Please help me write a professional bio.
   ```

2. Click "Test PII Detection" button

3. Show the diff view:
   - **Original Input** (top) - with highlighted PII
   - **Masked Output** (bottom) - showing replaced dummy data
   - **Detected Entities** list on the side

**Voiceover:**
> "Watch how Yaak automatically detects and masks PII. Names become dummy names, emails and phone numbers are replaced with fake data - all in real-time."

### Scene 5: cURL Example - Terminal Demo (1:05-1:30)

**Visuals:**
- Terminal window (split screen with UI)
- Show request going through proxy
- Show logging in UI simultaneously

**Actions:**
1. Open terminal alongside Yaak UI

2. Run cURL command:
```bash
curl -X POST http://localhost:8080/v1/chat/completions \
  -H "Content-Type: application/json" \
  -H "Authorization: Bearer $OPENAI_API_KEY" \
  -d '{
    "model": "gpt-3.5-turbo",
    "messages": [
      {
        "role": "user",
        "content": "My name is Sarah Miller, email sarah.miller@company.com. Write a bio."
      }
    ]
  }'
```

3. Show in UI (Logging view):
   - Request log appears with PII masked
   - Response received with dummy data
   - Click to expand and show full details

**Voiceover:**
> "It works seamlessly with any OpenAI-compatible API client. Just point your requests to localhost:8080, and Yaak handles the rest. Check the logging view to see all requests and masked data."

### Scene 6: The Magic - Before/After (1:30-1:45)

**Visuals:**
- Side-by-side comparison or animation

**Show:**

**Left side (Without Yaak):**
```
Request to OpenAI:
"My name is John Smith
 Email: john.smith@email.com
 Phone: 555-123-4567"

❌ Real PII sent to external API
```

**Right side (With Yaak):**
```
Request to OpenAI:
"My name is Alex Johnson
 Email: alex.j@example.org
 Phone: 555-987-6543"

✅ Dummy data sent
✅ Response automatically restored
```

**Voiceover:**
> "Your actual PII never leaves your machine. OpenAI receives dummy data, and Yaak automatically restores the original information in the response."

### Scene 7: Closing (1:45-2:00)

**Visuals:**
- GitHub repository page
- Star button highlighted
- Documentation links

**Text Overlays:**
- ⭐ Star on GitHub
- 📚 Documentation
- 🤝 Contribute

**Voiceover:**
> "Yaak is open source and built for privacy. Star the repo, check out the docs, and join us in building privacy-first AI tools."

**End card:**
```
🦙 Yaak Privacy Proxy
github.com/hanneshapke/yaak-proxy

MIT Licensed | Privacy First | Community Driven
```

---

## Recording Setup

### Technical Requirements

**Screen Recording:**
- Tool: OBS Studio (free) or ScreenFlow (macOS)
- Resolution: 1920x1080 (1080p)
- Frame rate: 30fps
- Format: MP4 (H.264)

**Audio:**
- Microphone: USB mic or laptop mic in quiet room
- Format: AAC, 128kbps+
- Remove background noise with Audacity (free) or Adobe Audition

**Editing:**
- Tool: DaVinci Resolve (free), iMovie (macOS), or Adobe Premiere
- Add text overlays for emphasis
- Include captions/subtitles for accessibility
- Background music (optional, very subtle if used)

### Recording Checklist

**Before Recording:**
- [ ] Clean desktop (hide personal files/folders)
- [ ] Close unnecessary applications
- [ ] Set terminal to readable font size (16pt+)
- [ ] Test audio levels
- [ ] Prepare test data (names, emails, phone numbers)
- [ ] Practice run-through 2-3 times
- [ ] Have script notes nearby

**During Recording:**
- [ ] Speak clearly and not too fast
- [ ] Pause between sections (easier to edit)
- [ ] Keep mouse movements smooth and deliberate
- [ ] Highlight UI elements being discussed
- [ ] Show loading states (don't fast-forward)

**After Recording:**
- [ ] Add intro/outro graphics
- [ ] Include text overlays for key points
- [ ] Add captions/subtitles
- [ ] Check audio levels (normalize if needed)
- [ ] Export in multiple formats (1080p, 720p)

---

## Demo Script (Detailed Transcript)

```markdown
## YAAK PRIVACY PROXY DEMO SCRIPT

### Opening (0:00-0:10)
[VISUAL: Yaak logo animation, mascot appears]
[TEXT: "Yaak Privacy Proxy - Protect Your PII"]

"Meet Yaak - a privacy-first proxy that automatically detects and 
masks personally identifiable information before it reaches external 
APIs like OpenAI."

### Installation (0:10-0:25)
[VISUAL: Terminal, clear background]
[SHOW: Download page → DMG installation]

"Installation is simple. Download the DMG for macOS, or clone the 
repository and run 'make electron'. The app starts automatically 
on port 8080."

[COMMAND: make electron]
[SHOW: App launching]

### UI Overview (0:25-0:40)
[VISUAL: Yaak application window]
[HIGHLIGHT: Settings icon, Input area, Status]

"The Yaak UI is clean and intuitive. Enter your OpenAI API key 
in settings, and you're ready to go. The green indicator shows 
the proxy is running."

### Live Demo - UI (0:40-1:05)
[VISUAL: Focus on input text area]
[TYPE: Sample text with PII]

"Let me show you the magic. I'll enter text containing personal 
information - a name, email, and phone number."

[CLICK: Test PII Detection]
[SHOW: Diff view appearing]

"Watch how Yaak automatically detects and masks PII. Names become 
dummy names, emails and phone numbers are replaced with fake data - 
all in real-time."

[HIGHLIGHT: Each detected entity]
- John Smith → Alex Johnson
- john.smith@email.com → alex.j@example.org
- 555-123-4567 → 555-987-6543

### Terminal Demo (1:05-1:30)
[VISUAL: Split screen - terminal + UI]
[SHOW: Terminal with curl command]

"It works seamlessly with any OpenAI-compatible API client. 
Just point your requests to localhost:8080."

[RUN: curl command]
[SHOW: Request appearing in Logging view]

"Check the logging view to see all requests and masked data in 
real-time. You can expand each request to see full details."

### The Magic Reveal (1:30-1:45)
[VISUAL: Side-by-side comparison animation]

"Here's the key: your actual PII never leaves your machine. 
OpenAI receives dummy data, and Yaak automatically restores 
the original information in the response."

[ANIMATE: Flow diagram]
User → Yaak (masks) → OpenAI → Yaak (restores) → User

### Closing (1:45-2:00)
[VISUAL: GitHub repository page]
[HIGHLIGHT: Star button]

"Yaak is open source and built for privacy. Star the repo, 
check out the docs, and join us in building privacy-first AI tools."

[END CARD]
🦙 Yaak Privacy Proxy
github.com/hanneshapke/yaak-proxy
MIT Licensed | Privacy First | Community Driven
```

---

## YouTube Upload Guidelines

### Video Details

**Title:**
```
Yaak Privacy Proxy - Protect Your PII in OpenAI Requests | Demo
```

**Description:**
```
Yaak is a privacy-first HTTP proxy that automatically detects and masks 
Personally Identifiable Information (PII) before sending requests to 
external APIs like OpenAI.

🔒 Key Features:
• Automatic PII detection (names, emails, phone numbers, SSNs, etc.)
• Real-time masking with dummy data
• Automatic restoration in responses
• Beautiful Electron UI for macOS
• Open source & MIT licensed

⏱️ Timestamps:
0:00 - Introduction
0:10 - Installation
0:25 - UI Overview  
0:40 - Live PII Detection Demo
1:05 - cURL Example
1:30 - How It Works
1:45 - Get Started

📚 Links:
GitHub: https://github.com/hanneshapke/yaak-proxy
Documentation: https://github.com/hanneshapke/yaak-proxy/blob/main/README.md
Issues: https://github.com/hanneshapke/yaak-proxy/issues

🏷️ Tags:
#privacy #openai #pii #security #opensource #machinelearning #proxy #ai
```

**Thumbnail:**
- Custom thumbnail (1280x720)
- Yaak mascot prominently featured
- Text: "Privacy-First AI Proxy"
- High contrast, easy to read

**Playlist:**
- Create "Yaak Privacy Proxy" playlist
- Add to "Open Source" and "Privacy Tools" playlists

**Settings:**
- Category: Science & Technology
- License: Standard YouTube License
- Comments: Enabled
- Age restriction: None
- Visibility: Public (after review)

---

## README Integration

### Option 1: Embedded Video (Top of README)

Add video section right after badges, before "What is Yaak?":

```markdown
## 📹 Demo Video

Watch Yaak in action:

[![Yaak Privacy Proxy Demo](https://img.youtube.com/vi/VIDEO_ID/maxresdefault.jpg)](https://www.youtube.com/watch?v=VIDEO_ID)

*Quick 90-second demo showing installation, setup, and live PII detection*

---
```

### Option 2: Video in Quick Start Section

Add after "Quick Start" heading:

```markdown
## ⚡ Quick Start

### 📹 Watch the Demo

New to Yaak? Watch our 90-second demo:

[![Demo Video](https://img.youtube.com/vi/VIDEO_ID/0.jpg)](https://www.youtube.com/watch?v=VIDEO_ID)

### Prerequisites
...
```

### Option 3: Dedicated Video Section

Create new section before "Features":

```markdown
## 🎬 Video Tutorials

### Getting Started (90s)
[![Getting Started](https://img.youtube.com/vi/VIDEO_ID/0.jpg)](https://www.youtube.com/watch?v=VIDEO_ID)

Learn how to install, configure, and use Yaak in under 2 minutes.

---
```

**Recommended**: Option 1 (top of README) for maximum visibility.

---

## Alternative Formats

If a full video isn't feasible immediately, consider:

### 1. Animated GIF Demo (Simpler)
- Record 10-15 second GIF showing PII detection
- Tool: LICEcap (free) or Kap (macOS)
- Max size: 5MB (optimize with ezgif.com)
- Add directly to README

```markdown
![Yaak Demo](docs/demo.gif)
```

### 2. Screenshot Tutorial (Simplest)
- 4-6 annotated screenshots
- Show installation → setup → usage → results
- Tool: Skitch or Annotate (macOS)

### 3. Screen Recording + Slides (Hybrid)
- Record screen interactions
- Add slide overlays for explanations
- Tool: Keynote + ScreenFlow

---

## Success Criteria

- [ ] Demo script written and reviewed
- [ ] Test recording completed (practice run)
- [ ] Final recording completed (1080p, good audio)
- [ ] Video edited with:
  - [ ] Intro/outro graphics
  - [ ] Text overlays for key points
  - [ ] Captions/subtitles
  - [ ] Music (optional)
- [ ] Video uploaded to YouTube with:
  - [ ] Descriptive title
  - [ ] Detailed description with timestamps
  - [ ] Custom thumbnail
  - [ ] Appropriate tags
- [ ] README.md updated with video embed
- [ ] Video link tested on multiple devices
- [ ] Community feedback incorporated

---

## Resources

### Free Tools

**Recording:**
- [OBS Studio](https://obsproject.com/) - Screen recording (Windows/Mac/Linux)
- [QuickTime Player](https://support.apple.com/guide/quicktime-player/record-your-screen-qtp97b08e666/mac) - Built-in macOS
- [Kap](https://getkap.co/) - Lightweight screen recorder (macOS)

**Editing:**
- [DaVinci Resolve](https://www.blackmagicdesign.com/products/davinciresolve) - Professional editing
- [iMovie](https://www.apple.com/imovie/) - Built-in macOS
- [Shotcut](https://shotcut.org/) - Open source (Windows/Mac/Linux)

**Audio:**
- [Audacity](https://www.audacityteam.org/) - Audio editing
- [Krisp](https://krisp.ai/) - Noise cancellation

**Graphics:**
- [Canva](https://www.canva.com/) - Thumbnail creation
- [Figma](https://www.figma.com/) - UI mockups

### Inspiration

Great demo videos to reference:
- [GitHub Copilot Demo](https://www.youtube.com/watch?v=St2CMvK4hK0)
- [Docker Getting Started](https://www.youtube.com/watch?v=iqqDU2crIEQ)
- [VS Code Intro](https://www.youtube.com/watch?v=S320N3sxinE)

---

## Timeline

**Week 1:**
- Day 1-2: Write and refine demo script
- Day 3: Set up recording environment
- Day 4: Practice runs (2-3 times)

**Week 2:**
- Day 1: Record final video
- Day 2-3: Edit video (graphics, captions, music)
- Day 4: Upload to YouTube
- Day 5: Update README and gather feedback

---

## Notes

- Keep it authentic - show real usage, not a polished mockup
- Focus on the value proposition: **privacy protection made simple**
- Make it accessible - add captions for hearing-impaired viewers
- Keep file size reasonable (<50MB for GitHub hosting of GIF alternative)
- Consider creating both short (90s) and long (5min) versions

**Target audience**: Developers concerned about privacy, teams using OpenAI API, security-conscious users

**Key message**: Yaak makes PII protection effortless - install it, forget about it, stay protected.



Create Demo Video for Yaak Proxy #35

Description

Create Demo Video for Yaak Proxy

Background

Demo Video Plan

Duration

Tone

Demo Script

Scene 1: Introduction (0:00-0:10)

Scene 2: Installation (0:10-0:25)

Scene 3: UI Overview (0:25-0:40)

Scene 4: Privacy in Action - UI Demo (0:40-1:05)

Scene 5: cURL Example - Terminal Demo (1:05-1:30)

Scene 6: The Magic - Before/After (1:30-1:45)

Scene 7: Closing (1:45-2:00)

Recording Setup

Technical Requirements

Recording Checklist

Demo Script (Detailed Transcript)

YouTube Upload Guidelines

Video Details

README Integration

Option 1: Embedded Video (Top of README)

Option 2: Video in Quick Start Section

Option 3: Dedicated Video Section

Alternative Formats

1. Animated GIF Demo (Simpler)

2. Screenshot Tutorial (Simplest)

3. Screen Recording + Slides (Hybrid)

Success Criteria

Resources

Free Tools

Inspiration

Timeline

Notes

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions