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

✨ 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:

Discord Server - Join our learning community
GitHub Discussions - Ask questions

🙏 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

GitHub Issues:Report bugs or request features
Discussions:Ask questions or share feedback
Twitter:@devgunnu7

Ready to transform your webcam experience?

🚀 Launch App | 📚 Learn to Build | 🤝 Contribute

Made with ❤️ for creators, learners, and developers

Name		Name	Last commit message	Last commit date
docs		docs
public		public
src		src
.env.example		.env.example
.gitignore		.gitignore
BRANCH-MODIFICATION-GUIDE.md		BRANCH-MODIFICATION-GUIDE.md
CONTRIBUTING.md		CONTRIBUTING.md
LICENSE		LICENSE
README.md		README.md
create-learning-branches.sh		create-learning-branches.sh
package-lock.json		package-lock.json
package.json		package.json
postcss.config.js		postcss.config.js
tailwind.config.js		tailwind.config.js

Latest commit

History

Folders and files

Repository files navigation

LearnLens - AI-Powered Webcam Filters 🎨

✨ Why LearnLens?

🎯 Key Features

🚀 Try It Now

👉 Launch LearnLens App

🎓 Want to Learn How It's Built?

📚 Complete Learning Journey:

🛠️ Quick Start

For Users (Run the App):

For AI Features (Optional):

🤖 AI Features

1. AI Filter Recommendations

2. AI Vision Analysis

3. Face Detection

4. Emotion Recognition

🎨 Available Filters

Artistic Effects:

Color Adjustments:

Creative Styles:

🛡️ Privacy & Security

💻 Tech Stack

Core Technologies:

AI & Machine Learning:

Build Tools:

📂 Project Structure

🌐 Browser Support

📚 Learning Path for Developers

🟢 Beginner Levels (1-2)

🟡 Intermediate Levels (3-5)

🔴 Advanced Levels (6-8)

📖 Learning Instructions:

📂 Project Structure

🤝 Contributing

📜 License

Community:

🙏 Acknowledgments

❓ FAQ

Is LearnLens free?

Is my data private?

Do I need to install anything?

Can I use this offline?

What if I don't have a webcam?

Can I add custom filters?

How does face detection work?

Can I use this for commercial projects?

🌟 Show Your Support

📞 Contact & Support

About

Topics

Resources

Contributing

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages