{"id":29637724,"url":"https://github.com/namrata0407/visionai","last_synced_at":"2026-04-12T15:35:59.191Z","repository":{"id":303661709,"uuid":"1016235405","full_name":"Namrata0407/VisionAI","owner":"Namrata0407","description":"VisionAI is a cutting-edge web application that combines facial recognition, emotion detection, and voice interaction to create an immersive AI assistant experience. Built with the MERN stack and featuring a stunning futuristic UI inspired by sci-fi interfaces.","archived":false,"fork":false,"pushed_at":"2025-07-18T16:13:11.000Z","size":254,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-07-18T20:44:02.015Z","etag":null,"topics":["audioapi","expressjs","faceapi-js","framer-motion","mongodb","nodejs","reactjs","searchapi","speech-recognition","tesorflow"],"latest_commit_sha":null,"homepage":"https://visionai-chi.vercel.app/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Namrata0407.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-07-08T17:35:57.000Z","updated_at":"2025-07-18T16:28:22.000Z","dependencies_parsed_at":"2025-07-08T19:48:09.405Z","dependency_job_id":"bef128fd-ad7b-4283-9237-b1fc5aac69e0","html_url":"https://github.com/Namrata0407/VisionAI","commit_stats":null,"previous_names":["namrata0407/visionai_frontend"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Namrata0407/VisionAI","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Namrata0407%2FVisionAI","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Namrata0407%2FVisionAI/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Namrata0407%2FVisionAI/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Namrata0407%2FVisionAI/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Namrata0407","download_url":"https://codeload.github.com/Namrata0407/VisionAI/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Namrata0407%2FVisionAI/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267684997,"owners_count":24127703,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-29T02:00:12.549Z","response_time":2574,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["audioapi","expressjs","faceapi-js","framer-motion","mongodb","nodejs","reactjs","searchapi","speech-recognition","tesorflow"],"created_at":"2025-07-21T19:01:20.074Z","updated_at":"2026-04-12T15:35:59.158Z","avatar_url":"https://github.com/Namrata0407.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# [🤖 VisionAI - Futuristic AI Assistant Dashboard](https://visionai-chi.vercel.app/)\n\nVisionAI is a cutting-edge web application that combines facial recognition, emotion detection, and voice interaction to create an immersive AI assistant experience. Built with the MERN stack and featuring a stunning futuristic UI inspired by sci-fi interfaces.\n\n### 📝 Register Page\n![Register Page](https://github.com/user-attachments/assets/c81c9a50-4dec-4c05-bb37-f12efa61385d)\n\n### 🖼️ Landing Page\n![Landing Page](https://github.com/user-attachments/assets/1c871cc7-84b0-4b30-be2f-4ff76d52d3e4)\n\n### 🔮 Palm Reading\n![Palm Reading](https://github.com/user-attachments/assets/a75cae0d-159f-4139-a7a4-15cd8b033363)\n\n### 💻 Relaxation Mode\n![Break Functionality](https://github.com/user-attachments/assets/c4a69a3e-9fc3-4f2b-995d-23c137a9f436)\n\n### 📱 Responsiveness\n![Responsive Screenshot 1](https://github.com/user-attachments/assets/fec25589-cab3-442e-a255-ef9ad3ab4d5e)\n![Responsive Screenshot 2](https://github.com/user-attachments/assets/bd2eb7fe-c13e-4e5d-b317-6f511f538ea9)\n\n\n\n## ✨ Features\n\n### 🔐 Biometric Authentication\n- **Face Recognition Login**: No passwords needed - your face is your key\n- **Secure Face Descriptors**: 128-point facial feature vectors stored in MongoDB\n- **Anti-Spoofing**: Live detection prevents photo-based attacks\n\n### 😊 Emotion Intelligence\n- **Real-time Emotion Detection**: Happy, sad, angry, surprised, fearful, disgusted, neutral\n- **Contextual Greetings**: AI responds based on your current emotional state\n- **Mood Analytics**: Track emotional patterns over time\n\n### 🎙️ Voice Interaction\n- **Voice Commands**: Control the app with natural speech\n- **Text-to-Speech**: AI responds with synthesized voice\n- **Smart Actions**: \"Start a new React project\", \"I want to take a break\"\n\n### 🎨 Futuristic UI\n- **Neon Console Theme**: Dark cyberpunk aesthetic with glowing elements\n- **Animated Scan Lines**: Dynamic visual effects like sci-fi movies\n- **Responsive Grid Layout**: Adapts to any screen size\n- **Background Audio**: Subtle ambient hum for immersion\n\n### 🛠️ Developer Tools\n- **Project Templates**: Quick-start templates for React, Next.js, etc.\n- **Relaxation Mode**: Break time with breathing exercises and ambient sounds\n- **Session Tracking**: Monitor usage patterns and productivity\n\n## 🏗️ Tech Stack\n\n### Frontend\n- **React 18** - Modern UI framework\n- **Styled Components** - CSS-in-JS styling\n- **Framer Motion** - Smooth animations\n- **face-api.js** - Browser-based face recognition\n- **React Speech Recognition** - Voice input\n- **Web Speech API** - Text-to-speech output\n\n### Backend\n- **Node.js \u0026 Express** - RESTful API server\n- **MongoDB \u0026 Mongoose** - Database and ODM\n- **Face Recognition** - Custom face matching algorithms\n- **Security** - Helmet, CORS, rate limiting\n\n### DevOps\n- **Concurrently** - Run client and server together\n- **Nodemon** - Auto-restart development server\n- **Environment Variables** - Secure configuration\n\n## 🚀 Quick Start\n\n### Prerequisites\n- Node.js 16+ and npm\n- MongoDB (local or Atlas)\n- Webcam for face recognition\n\n### Installation\n\n1. **Clone the repository**\n   ```bash\n   git clone https://github.com/your-username/visionai-dashboard.git\n   cd visionai-dashboard\n   ```\n\n2. **Install dependencies**\n   ```bash\n   npm run install-deps\n   ```\n\n3. **Download face-api.js models**\n   ```bash\n   # Option 1: Download from GitHub\n   cd client/public\n   mkdir models\n   # Download models from: https://github.com/justadudewhohacks/face-api.js/tree/master/weights\n   \n   # Option 2: Copy from node_modules (after installing face-api.js)\n   cp -r node_modules/face-api.js/weights/* client/public/models/\n   ```\n\n4. **Configure environment**\n   ```bash\n   cd server\n   cp .env.example .env\n   # Edit .env with your MongoDB connection string\n   ```\n\n5. **Start MongoDB**\n   ```bash\n   # Local MongoDB\n   mongod\n   \n   # Or use MongoDB Atlas (cloud)\n   # Update MONGODB_URI in server/.env\n   ```\n\n6. **Start the application**\n   ```bash\n   npm run dev\n   ```\n\n   This starts both client (http://localhost:3000) and server (http://localhost:5000)\n\n## 📱 Usage Guide\n\n### First Time Setup\n1. **Access the app** at http://localhost:3000\n2. **Click \"NEW USER REGISTRATION\"**\n3. **Allow camera access** when prompted\n4. **Fill out the registration form**\n5. **Position your face** in the scanner frame\n6. **Click \"CAPTURE BIOMETRICS\"** when face is detected\n7. **Complete registration** - your face descriptor is now stored\n\n### Daily Usage\n1. **Open the app** - camera automatically activates\n2. **Position your face** for scanning\n3. **Click \"INITIATE SCAN\"** to authenticate\n4. **Enjoy personalized greetings** based on your detected emotion\n5. **Use voice commands** or click interface buttons\n6. **Try saying:**\n   - \"Start a new React project\"\n   - \"I want to take a break\"\n   - \"Show me dashboard\"\n   - \"Logout\"\n\n### Voice Commands\n- **\"New React project\"** → Shows project templates\n- **\"Take a break\"** → Activates relaxation mode\n- **\"Dashboard\"** → Returns to main view\n- **\"Logout\"** → Signs you out\n\n## 🎨 UI Customization\n\n### Color Themes\nThe app uses CSS custom properties for easy theming:\n\n```css\n:root {\n  --primary-cyan: #00ffff;\n  --primary-pink: #ff0066;\n  --success-green: #00ff00;\n  --warning-orange: #ffa500;\n  --error-red: #ff0000;\n  --background-dark: #000000;\n  --glass-bg: rgba(0, 255, 255, 0.05);\n}\n```\n\n### Animation Speed\nAdjust animation timings in styled components:\n\n```javascript\n// Faster animations\nanimation: scanLines 2s linear infinite;\n\n// Slower animations  \nanimation: scanLines 6s linear infinite;\n```\n\n## 🔧 API Documentation\n\n### Authentication Endpoints\n\n#### POST /api/auth/register\nRegister a new user with face biometrics.\n\n**Body:**\n```json\n{\n  \"name\": \"John Doe\",\n  \"email\": \"john@example.com\", \n  \"faceDescriptor\": [128 numbers array]\n}\n```\n\n#### POST /api/auth/verify-face\nAuthenticate user by face recognition.\n\n**Body:**\n```json\n{\n  \"faceDescriptor\": [128 numbers array],\n  \"emotion\": \"happy\"\n}\n```\n\n#### POST /api/auth/logout\nEnd user session.\n\n**Body:**\n```json\n{\n  \"userId\": \"user_id_here\"\n}\n```\n\n### User Endpoints\n\n#### GET /api/users/:userId\nGet user profile and statistics.\n\n#### PUT /api/users/:userId/preferences\nUpdate user preferences.\n\n#### GET /api/users/:userId/analytics\nGet mood and usage analytics.\n\n## 📊 Database Schema\n\n### User Model\n```javascript\n{\n  name: String,\n  email: String,\n  faceDescriptor: [Number], // 128-point face vector\n  moodLogs: [{\n    emotion: String,\n    confidence: Number,\n    timestamp: Date,\n    context: String\n  }],\n  sessions: [{\n    loginTime: Date,\n    logoutTime: Date,\n    duration: Number,\n    emotionsDetected: [String],\n    voiceCommands: [String]\n  }],\n  preferences: {\n    voiceEnabled: Boolean,\n    autoGreeting: Boolean,\n    backgroundAudio: Boolean,\n    emotionTracking: Boolean\n  },\n  stats: {\n    totalLogins: Number,\n    totalTimeSpent: Number,\n    mostCommonEmotion: String,\n    lastLogin: Date,\n    averageSessionDuration: Number\n  }\n}\n```\n\n## 🔒 Security Features\n\n- **Face Descriptor Encryption**: Biometric data is stored as mathematical vectors\n- **Rate Limiting**: Prevents brute force attacks  \n- **CORS Protection**: Restricts cross-origin requests\n- **Input Validation**: Sanitizes all user inputs\n- **Environment Variables**: Sensitive data not in code\n- **Helmet.js**: Sets security headers\n\n## 📈 Performance Optimization\n\n- **Lazy Loading**: Components load when needed\n- **Image Optimization**: Compressed assets\n- **Database Indexing**: Fast queries on user data\n- **Face Recognition Caching**: Reduces computation\n- **WebRTC Optimization**: Efficient camera streaming\n\n## 🤝 Contributing\n\n1. Fork the repository\n2. Create a feature branch (`git checkout -b feature/amazing-feature`)\n3. Commit changes (`git commit -m 'Add amazing feature'`)\n4. Push to branch (`git push origin feature/amazing-feature`)\n5. Open a Pull Request\n\n### Code Style\n- Use ESLint and Prettier\n- Follow React best practices\n- Write meaningful commit messages\n- Add JSDoc comments for functions\n\n## 🐛 Troubleshooting\n\n### Camera Not Working\n- **Chrome/Edge**: Check camera permissions in browser settings\n- **Firefox**: Allow camera access when prompted\n- **HTTPS Required**: Camera access requires secure connection in production\n\n### Face Recognition Issues\n- **Models Not Loading**: Ensure face-api.js models are in `/client/public/models/`\n- **Poor Lighting**: Use good lighting for better detection\n- **Distance**: Keep face 2-3 feet from camera\n- **Angle**: Face camera directly for best results\n\n### MongoDB Connection\n- **Local MongoDB**: Ensure MongoDB service is running\n- **Atlas**: Check network access and credentials\n- **Firewall**: Open port 27017 for local MongoDB\n\n### Voice Recognition\n- **Microphone Access**: Grant microphone permissions\n- **Browser Support**: Use Chrome/Edge for best compatibility\n- **Noise**: Use in quiet environment for better accuracy\n\n## 📄 License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n## 🙏 Acknowledgments\n\n- **face-api.js** - Amazing browser-based face recognition\n- **MongoDB** - Flexible document database\n- **React Team** - Incredible frontend framework\n- **Styled Components** - Beautiful CSS-in-JS solution\n- **Framer Motion** - Smooth animations made easy\n\n## 💬 Feedback \u0026 Contributions\nThis project is open to suggestions, improvements, and collaboration.  \nIf you find a bug, have an idea, or want to contribute — feel free to open an issue or pull request!\n\nYour feedback is always welcome.\n---\n*Experience the future of human-computer interaction today!*\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnamrata0407%2Fvisionai","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnamrata0407%2Fvisionai","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnamrata0407%2Fvisionai/lists"}