Birthday Webcam Surprise

This small web app uses your webcam to detect a colorful birthday cap on the top of the head and then enables a "Click me" button that reveals a gallery where you can upload pictures.

Quick start

1. Serve the folder locally (required for camera permissions on some browsers):

cd "c:\Users\ponma\OneDrive\Desktop\Lachuu"
python -m http.server 8000
# or (PowerShell) Start-Process "msedge" "http://localhost:8000"

2. Open http://localhost:8000 in your browser (Chrome/Edge recommended).

How it works

• The app loads blazeface via CDN to find the face bounding box.
• It samples pixels in an area above the face and checks for strong red/blue hues — wear a bright colored birthday cap for best results.

How to insert pictures

• Click the upload area or drag & drop image files into the upload box after clicking the "Click me" button.
• You can select multiple files at once; the images will appear in the gallery.

Tuning

• To change the detection sensitivity or target color ranges, edit script.js (the sampling thresholds and hue ranges).

Files

• index.html — main page
• style.css — styles
• script.js — logic: webcam, cap detection, gallery

Extras added

• Confetti celebration (uses canvas-confetti CDN) when the reveal button is pressed.
• An in-page slideshow modal with autoplay and controls. Open it via the "Open Slideshow" button.

Using your attached images

• Create a folder named assets next to index.html.
• Copy the images you attached into that folder and name them 01.jpg, 02.jpg, 03.jpg, 04.jpg, 05.jpg (or change assetFilenames in script.js).
• When you press the "Click me" button the app will try to automatically load any of those files that exist and add them to the gallery and slideshow.

If you prefer not to copy files you can also upload images at runtime using the upload area in the page; uploaded images are added instantly.

Need me to copy the attached images into the project for you? I can add them if you upload the files here or give me permission to write them — otherwise please copy them into assets/ as 01.jpg–05.jpg.

Quick local copy helper

I added a small PowerShell helper import_images.ps1 to copy images from a folder on your PC into the project's assets/ folder. Example usage (PowerShell):

cd "c:\Users\ponma\OneDrive\Desktop\Lachuu"
.\import_images.ps1 -Source "C:\Users\ponma\Downloads" -Files 01.jpg,02.jpg,03.jpg

After copying files into assets/, reload the page (or press the "Click me" button) and the app will auto-load them into the gallery and slideshow.

Captions & Music

• Captions are created automatically from filenames; double-click a caption to edit it.
• You can set a large overlay text for the slideshow using the "Overlay text" input above the gallery.
• To add background music, place an MP3 named music.mp3 in the assets/ folder. The page provides a "Play Music"/"Pause Music" button.