Skip to content

README.md

Latest commit

 

History

History
454 lines (338 loc) · 12.4 KB

README.md

File metadata and controls

454 lines (338 loc) · 12.4 KB

LearnLens - AI-Powered Webcam Filters 🎨

Transform Your Webcam Experience with Artificial Intelligence 20+ real-time filters • AI recommendations • Face detection • Emotion recognition • 100% private & browser-based

License React AI Powered Build Live Demo

✨ Why LearnLens?

LearnLens is a cutting-edge webcam filter application powered by AI and machine learning. Apply stunning real-time filters, get personalized recommendations, and explore advanced face detection - all in your browser with zero installation required.

🎯 Key Features

  • 🎨 20+ Stunning Filters - Vintage, Cyberpunk, Neon, Moonlight, and more
  • 🤖 AI Recommendations - Powered by Google Gemini API for personalized suggestions
  • 👁️ AI Vision Analysis - Get smart filter suggestions based on your appearance
  • 🧠 Face Detection - 68-point facial landmarks using TensorFlow.js
  • 😊 Emotion Recognition - Detect 7 different emotions in real-time
  • 🦄 Draggable Stickers - 20+ fun emoji stickers to add personality
  • 📸 Photo Capture - Download your filtered photos instantly
  • 🔒 100% Private - All processing happens locally in your browser
  • ⚡ Real-Time Processing - Smooth 60fps performance
  • 📱 Cross-Platform - Works on desktop and mobile browsers

🚀 Try It Now

👉 Launch LearnLens App

No installation, no sign-up, no tracking. Just open and use!

🎓 Want to Learn How It's Built?

LearnLens doubles as an interactive learning platform! Follow our comprehensive 8-level tutorial to build the entire application from scratch.

📚 Complete Learning Journey:

Level Topic Technologies Time
1️⃣ React Basics React, JSX, Hooks 1-2 hours
2️⃣ Webcam & Canvas WebRTC, Canvas API 2-3 hours
3️⃣ Filters & Effects CSS Filters 1-2 hours
4️⃣ Photo Capture Canvas API, Blob 1-2 hours
5️⃣ Stickers & Drag Drag & Drop API 2-3 hours
6️⃣ AI Integration Gemini API 2-3 hours
7️⃣ AI Vision Multimodal AI 2-3 hours
8️⃣ Face Detection TensorFlow.js 3-4 hours

Total Learning Time: ~15-20 hours

👉 View Full Learning Path

🛠️ Quick Start

For Users (Run the App):

# Clone the repository
git clone https://github.com/devgunnu/LearnLens.git
cd LearnLens

# Install dependencies
npm install

# Start the app
npm start

# Open http://localhost:3000

For AI Features (Optional):

# Get a free API key from https://aistudio.google.com/app/apikey
# Add it in the app's settings panel

🤖 AI Features

1. AI Filter Recommendations

Get personalized filter suggestions based on the time of day, mood, and context.

"Feeling productive?" → Suggests Focus, Clarity filters
"Evening vibes?" → Suggests Warm, Vintage filters

2. AI Vision Analysis

Upload your photo and get personalized suggestions:

  • Skin tone analysis
  • Lighting recommendations
  • Best filter matches for your appearance

3. Face Detection

Real-time face analysis powered by TensorFlow.js:

  • 68 facial landmark points
  • Face contours (jawline, eyebrows, nose, lips, eyes)
  • Face matching and similarity detection

4. Emotion Recognition

Detect 7 emotions in real-time:

  • Happy, Sad, Angry, Surprised, Fearful, Disgusted, Neutral

🎨 Available Filters

Artistic Effects:

  • Vintage - Classic film look
  • Cyberpunk - Futuristic neon vibes
  • Neon - Electric glow effect
  • Moonlight - Ethereal blue tones

Color Adjustments:

  • Warm - Cozy, inviting tones
  • Cool - Fresh, professional look
  • Vibrant - Saturated, punchy colors
  • Muted - Subtle, sophisticated tones

Creative Styles:

  • Dramatic - High contrast
  • Ethereal - Dreamy, soft focus
  • Noir - Black and white with grain
  • Retro - 80s/90s aesthetics

...and 10+ more!

🛡️ Privacy & Security

  • ✅ No server uploads - All processing happens locally
  • ✅ No data collection - Your photos never leave your device
  • ✅ No tracking - No analytics, no cookies
  • ✅ Open source - Audit the code yourself
  • ✅ API key control - You manage your own AI keys

💻 Tech Stack

Core Technologies:

  • React 19.2 - Modern UI framework
  • WebRTC - Real-time media streaming
  • Canvas API - 2D graphics rendering
  • Tailwind CSS - Utility-first styling
  • Framer Motion - Smooth animations

AI & Machine Learning:

  • Google Gemini API - Text and vision AI
  • TensorFlow.js - Browser-based ML
  • Face-API.js - Face detection library

Build Tools:

  • Create React App - Build tooling
  • GitHub Pages - Deployment
  • Git Branches - Level-based workflow
  • Environment Variables - Secure config

📂 Project Structure

LearnLens/
├── public/
│   ├── models/              # Pre-trained ML models for face detection
│   │   ├── tiny_face_detector_model/
│   │   ├── face_landmark_68_model/
│   │   ├── face_expression_model/
│   │   └── face_recognition_model/
│   ├── index.html
│   └── manifest.json
│
├── src/
│   ├── App.js              # Main component (1800+ lines of learning material)
│   ├── App.css             # Complete styling (1500+ lines)
│   ├── index.js            # React entry point
│   └── index.css           # Global styles
│
├── docs/                   # Learning documentation
│   ├── README-LEVEL-1.md   # Level 1: React Basics
│   ├── README-LEVEL-2.md   # Level 2: Webcam & Canvas
│   ├── README-LEVEL-3.md   # Level 3: Filters & Effects
│   ├── README-LEVEL-4.md   # Level 4: Photo Capture
│   ├── README-LEVEL-5.md   # Level 5: Stickers & Drag
│   ├── README-LEVEL-6.md   # Level 6: AI Integration
│   ├── README-LEVEL-7.md   # Level 7: AI Vision
│   └── README-LEVEL-8.md   # Level 8: Face Detection
│
├── .env.example            # Environment variable template
├── .gitignore
├── package.json
├── README.md               # This file
├── CONTRIBUTING.md         # Contributor guidelines
└── CODE_EXAMPLES.md        # Additional code examples

Git Branches:
├── main                    # Complete production code
├── level-1-basics          # Starting point for Level 1
├── level-2-webcam          # Starting point for Level 2
├── ... (all 8 levels)
├── level-1-solution        # Reference solution for Level 1
└── ... (all 8 solutions)

🌐 Browser Support

Browser Version Support
Chrome 90+ ✅ Full Support
Firefox 88+ ✅ Full Support
Safari 14+ ✅ Full Support
Edge 90+ ✅ Full Support
Opera 76+ ✅ Full Support

Requirements:

  • Webcam access
  • WebRTC support
  • Modern JavaScript (ES6+)

📚 Learning Path for Developers

Want to build LearnLens yourself? Follow our progressive tutorial:

🟢 Beginner Levels (1-2)

Level 1: React Basics

  • Component structure and JSX
  • useState for state management
  • Event handlers and user input

Level 2: Webcam & Canvas

  • useRef hook for DOM access
  • WebRTC getUserMedia API
  • Canvas 2D rendering
  • requestAnimationFrame loop

🟡 Intermediate Levels (3-5)

Level 3: Filters & Effects

  • CSS filter property
  • Canvas transformations
  • Dynamic filter switching

Level 4: Photo Capture

  • Canvas toDataURL()
  • Blob API and downloads
  • Modal components

Level 5: Stickers & Drag

  • Drag and Drop API
  • Coordinate transformations
  • Event handling

🔴 Advanced Levels (6-8)

Level 6: AI Integration

  • Environment variables
  • API key security
  • Async/await patterns
  • Gemini AI API

Level 7: AI Vision

  • Base64 encoding
  • Multimodal AI (text + image)
  • Vision API prompting

Level 8: Face Detection

  • TensorFlow.js basics
  • Loading ML models
  • Facial landmarks
  • Expression recognition

📖 Learning Instructions:

# Fork and clone the repository
git clone https://github.com/YOUR_USERNAME/LearnLens.git
cd LearnLens

# Install dependencies
npm install

# Start with Level 1
git checkout level-1-basics

# Read the tutorial
cat docs/README-LEVEL-1.md

# Start building!
npm start

# When complete, merge and move to next level
git checkout main
git merge level-1-basics
git checkout level-2-webcam

Each level includes:

  • ✅ Step-by-step guide
  • ✅ Code examples with comments
  • ✅ Key concepts explained
  • ✅ Knowledge checks
  • ✅ Solution branch for reference

📂 Project Structure

learnlens/
├── public/
│   ├── models/              # Pre-trained ML models
│   │   ├── tiny_face_detector_model/
│   │   ├── face_landmark_68_model/
│   │   ├── face_expression_model/
│   │   └── face_recognition_model/
│   ├── index.html
│   └── manifest.json
│
├── src/
│   ├── components/
│   │   ├── landing/         # Landing page components
│   │   └── app/             # App components
│   ├── App.js               # Main component
│   ├── App.css              # Styling
│   └── index.js             # Entry point
│
├── docs/                    # Learning tutorials (8 levels)
├── tailwind.config.js       # Tailwind configuration
├── package.json
└── README.md

🤝 Contributing

We welcome contributions! Whether you want to:

  • 🐛 Report bugs
  • ✨ Suggest features
  • 📚 Improve documentation
  • 🎨 Add new filters
  • 🤖 Enhance AI features
  • 🌍 Translate to other languages

📖 Contribution Guidelines →

📜 License

MIT License - Free to use, modify, and distribute.

What this means:

  • ✅ Use for personal projects
  • ✅ Use in your portfolio
  • ✅ Use commercially
  • ✅ Modify and extend
  • 📝 Keep the license notice

Community:

🙏 Acknowledgments

Built with amazing open-source tools:

  • React Team - UI framework
  • TensorFlow.js - ML in the browser
  • Vladimir Mandic - face-api.js
  • Google - Gemini API
  • Aceternity UI - Beautiful components
  • All Contributors - Making this better

❓ FAQ

Is LearnLens free?

Yes! Completely free and open-source. AI features require a free Gemini API key.

Is my data private?

Absolutely. All processing happens locally in your browser. Nothing is uploaded to servers.

Do I need to install anything?

No! Just open the website and start using it. For development, you'll need Node.js.

Can I use this offline?

Core filters work offline. AI features require internet for API calls.

What if I don't have a webcam?

You can still upload photos and apply filters!

Can I add custom filters?

Yes! The code is open-source. Add your own CSS filters or contribute them back.

How does face detection work?

We use TensorFlow.js and face-api.js to run ML models directly in your browser.

Can I use this for commercial projects?

Yes, under the MIT license. Just keep the license notice.

🌟 Show Your Support

If you love LearnLens:

  • ⭐ Star this repo
  • 🍴 Fork it
  • 📢 Share with friends
  • 🐛 Report issues
  • 🤝 Contribute

📞 Contact & Support

Ready to transform your webcam experience?

🚀 Launch App | 📚 Learn to Build | 🤝 Contribute

Made with ❤️ for creators, learners, and developers