AI-Powered Camera Effects (Vanilla JS)

This project is a small web app that accesses your webcam and lets you apply Instagram-like filters, plus Pixelate and Halftone effects, in real time. It also includes a tiny Java HTTP server for easy local development.

This guide shows you how to publish the project to GitHub and (optionally) host the app on GitHub Pages over HTTPS, which is required for camera access.

---

1) Put the project on GitHub

Prerequisites:

• A GitHub account
• Git installed on your computer

Steps:

1. Create an empty repository on GitHub

   • Go to https://github.com/new
   • Name it something like ai-powered-camera-effects
   • Keep it Public or Private (your choice)
   • Do NOT add a README, .gitignore, or license (we already have files locally)
   • Click Create repository

2. In your local project folder (this one), initialize git and make the first commit

   • Open PowerShell in the project root: C:\Users\user\IdeaProjects\ai-powered-camera-effects
   • Run:

     git init
     git add .
     git commit -m "Initial commit: camera filters app"

3. Connect your local repo to GitHub and push

   • Replace YOUR_GITHUB_USERNAME and REPO_NAME below with your actual values
   • Run:

     git branch -M main
     git remote add origin https://github.com/YOUR_GITHUB_USERNAME/REPO_NAME.git
     git push -u origin main

That’s it — your code is now on GitHub.

---

2) Host the app with GitHub Pages (HTTPS webcam support)

The app’s camera access works over HTTPS or localhost. GitHub Pages serves over HTTPS, so it’s a great, free way to publish.

Because the app is fully static (index.html, styles.css, script.js), you don’t need the Java server for Pages. Pages will serve the files directly.

Steps:

1. Open your repository on GitHub
2. Go to Settings → Pages
3. Under “Build and deployment”
   • Source: Deploy from a branch
   • Branch: select main, folder /root
   • Click Save
4. Wait 1–2 minutes for the site to build. A public URL will appear (something like https://YOUR_GITHUB_USERNAME.github.io/REPO_NAME/).
5. Open that URL in your browser. You should see the app. The camera prompt should appear because the site is HTTPS.

Notes:

• If the page 404s at first, wait a minute and refresh.
• Camera prompts are per-origin; if blocked, use the browser address bar to allow access.

---

3) Local development (optional)

For local testing (no internet needed), you can run the small embedded server:

1. Run the Main class (Java 11+ recommended). It starts on http://localhost:8080/.
2. Open http://localhost:8080/ in your browser.

Localhost is treated as a secure context, so the camera works.

---

4) Making updates

After you change files:

git add .
git commit -m "Describe your change"
git push

If you enabled GitHub Pages from main, your site will auto-update after each push (usually within a minute).

---

5) Troubleshooting

• I can’t push: Authentication failed
  • Make sure you’re logged in with git. Consider using a personal access token (PAT) if prompted for a password: https://github.com/settings/tokens
• My site shows an old version
  • Hard-refresh the browser (Ctrl+F5). GitHub Pages caches; our local Java server is already configured with no-cache headers.
• Camera still doesn’t work
  • Ensure you’re on https:// (or http://localhost).
  • Check browser permissions: look for a camera icon in the address bar.
  • Another app might be using the camera; close those apps and retry.

---

Project naming convention

This repository uses a GitHub-friendly naming convention: lowercase with hyphens (kebab-case) and no spaces or special characters. The current name ai-powered-camera-effects complies with common best practices for repository names.

Guidelines we follow:

• Lowercase letters only
• Words separated by - hyphens
• Avoid spaces and special characters

If you ever rename the repo on GitHub, also update references in:

• README examples/URLs (e.g., GitHub Pages link)
• Local folder name if desired (not required by Git)

---

Project structure

• index.html, styles.css, script.js: The web app (pure HTML/CSS/JS)
• src/Main.java: Small embedded HTTP server for local development
• out/: Compiled classes (ignored in git by default)
• .idea/, *.iml: IDE files (ignored)

---

6) Automatic GitHub Pages deployment (preconfigured)

This repo now includes a GitHub Actions workflow that auto‑publishes the site to GitHub Pages whenever you push to the main branch.

What you need to do once:

• Push this project to GitHub (see Section 1). Make sure your default branch is main.
• In your GitHub repo, go to the Actions tab and enable workflows if prompted.
• After the first push, the workflow “Deploy to GitHub Pages” will run and publish your site.

Where to find your site URL:

• Open GitHub → Settings → Pages. After the first successful deploy, you’ll see the public URL (e.g., https://YOUR_GITHUB_USERNAME.github.io/REPO_NAME/).

Notes:

• The Pages workflow publishes the static files from the repo root (index.html, styles.css, script.js). The Java server is only for local dev and does not run on Pages.
• If your repository uses a different default branch name, update .github/workflows/deploy-pages.yml accordingly.

Enjoy building and sharing your camera effects! 🎥✨