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
Latest commit History 40 Commits
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

License

devgunnu/LearnLens

Folders and files

Latest commit

History

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

License

Contributing

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Contributors 3

Uh oh!

Languages

Packages