AI-Powered Photo Organization Tool - Transform chaos into order with intelligent classification, smart renaming, and automated organization using cutting-edge artificial intelligence.
- Smart Classification - Automatically categorize images (selfies, documents, nature, food, etc.)
- AI Auto-Renaming - Generate descriptive filenames based on image content
- Face Detection - Identify and count faces in images using face-api.js
- Duplicate Detection - Find similar/duplicate images using perceptual hashing
- OCR Text Extraction - Extract text from images using Tesseract.js
- NSFW Detection - Content filtering and safety classification
- Smart Folder Organization - Automatic categorization into organized folders
- Beautiful Modern UI - Clean, responsive design with smooth animations
- Real-time Processing - Live progress tracking with AI status indicators
- Drag & Drop Upload - Easy bulk image upload with preview
- Advanced Filtering - Filter by category, size, date, content features
- Export Results - Download organization reports and statistics
- Smart Suggestions - AI-powered recommendations for better organization
- Offline Capable - Works completely offline once models are loaded
- Web-based AI Models - TensorFlow.js, face-api.js, Tesseract.js
- Responsive Design - Works on desktop, tablet, and mobile
- Dark/Light Theme - Automatic theme switching
- Performance Optimized - Efficient processing with progress tracking
- Node.js 18+
- npm or yarn
-
Clone the repository
git clone https://github.com/knoux/smart-organizer.git cd smart-organizer -
Install dependencies
npm install
-
Start the development server
npm run dev
-
Open your browser Navigate to
http://localhost:8080
For enhanced AI features, download the face detection models:
- Visit face-api.js models
- Download all
.jsonand.binfiles - Place them in
public/models/face-api/
The app works with fallback AI even without these models!
- Drag and drop images onto the upload zone
- Or click to browse and select multiple images
- Supports: JPEG, PNG, GIF, WebP, BMP, SVG
- Toggle features: Auto-rename, Face detection, Text extraction, Duplicate finding
- Adjust quality thresholds and processing options
- Click the "Smart Organize" button
- Watch real-time AI analysis and classification
- View detailed processing statistics
- Use smart filters to view categorized images
- Apply bulk actions to selected images
- Export results and organization reports
- Review AI-powered organization suggestions
- Apply recommendations with one click
- Improve organization over time
- React 18 - Modern React with hooks and concurrent features
- TypeScript - Type-safe development
- TailwindCSS - Utility-first CSS framework
- Framer Motion - Smooth animations and transitions
- Radix UI - Accessible UI primitives
- TensorFlow.js - Browser-based machine learning
- face-api.js - Face detection and recognition
- Tesseract.js - OCR text extraction
- Custom Classification - Rule-based image analysis
- Vite - Fast development and building
- Vitest - Unit testing framework
- ESLint + Prettier - Code formatting and linting
src/
├── components/ui/ # Reusable UI components
│ ├── image-dropzone.tsx # Drag & drop upload
│ ├── image-grid.tsx # Image display grid
│ ├── filter-sidebar.tsx # Advanced filtering
│ └── ...
├── hooks/ # Custom React hooks
│ └── use-image-organizer.ts
├── lib/ # Utilities and AI engine
│ ├── ai-engine.ts # Core AI processing
│ └── utils.ts # Helper functions
├── pages/ # Application pages
│ ├── Index.tsx # Main organizer interface
│ └── NotFound.tsx # 404 page
├── types/ # TypeScript definitions
│ └── organizer.ts # Core type definitions
└── ...
No environment variables required - everything runs client-side!
Modify src/lib/ai-engine.ts to:
- Add new AI models
- Adjust classification thresholds
- Customize processing options
Update tailwind.config.ts to:
- Change color schemes
- Modify spacing and typography
- Add custom animations
We welcome contributions! Please:
- Fork the repository
- Create a feature branch:
git checkout -b feature/amazing-feature - Commit changes:
git commit -m 'Add amazing feature' - Push to branch:
git push origin feature/amazing-feature - Open a Pull Request
- Write TypeScript for type safety
- Use existing UI components when possible
- Add tests for new utilities
- Follow the existing code style
- Update documentation for new features
Main hook for image processing and organization.
const {
images, // Array of processed images
progress, // Processing progress state
stats, // Processing statistics
processImages, // Start AI processing
addImages, // Add new images
removeImage, // Remove specific image
// ... more methods
} = useImageOrganizer();Core AI processing engine.
const aiEngine = new AIEngine();
await aiEngine.analyzeImage(file); // Analyze single image
const category = aiEngine.categorizeImage(analysis);
const filename = aiEngine.generateSmartFilename(analysis);- Update
ImageCategorytype insrc/types/organizer.ts - Add category logic in
AIEngine.categorizeImage() - Add icons and colors in UI components
- Add model loading in
AIEngine.initializeModels() - Implement analysis logic in
AIEngine.analyzeImage() - Update UI to show model status
- 100% Client-Side - No data sent to external servers
- Offline Capable - Works without internet after initial load
- Local Processing - All AI runs in your browser
- No Data Collection - Your images never leave your device
MIT License - see LICENSE file for details.
- TensorFlow.js - Machine learning in the browser
- face-api.js - Face detection
- Tesseract.js - OCR text extraction
- Radix UI - Accessible UI primitives
- Lucide Icons - Beautiful icons
Built with ❤️ by Knoux Technologies
Transforming digital chaos into organized intelligence, one image at a time.