Emotion Cipher is a web-based application that combines emotion detection with secure encryption. It analyzes the emotional content of text messages and encrypts them using AES-256 encryption. The app provides a user-friendly interface to encrypt and decrypt messages while visualizing the detected emotions through interactive charts and color-coded displays.
The system uses client-side natural language processing to detect emotions such as joy, sadness, anger, fear, excitement, and anxiety from the input text. This emotion-aware approach adds a layer of contextual awareness to the encryption process, making it more than just a standard encryption tool.
PROJECT LINK (deployed): https://emotion-cypher.vercel.app/
- Emotion Detection: Analyzes text for emotional content using keyword matching and contextual scoring
- Secure Encryption: Implements AES-256 symmetric encryption for message security
- Interactive UI: Built with React and Framer Motion for smooth animations
- Emotion Visualization: Displays detected emotions with color-coded charts and emojis
- Dark Mode: Toggle between light and dark themes
- Responsive Design: Works on desktop and mobile devices
- Client-Side Processing: All encryption and analysis happens locally in the browser
- Frontend Framework: React 19
- Build Tool: Vite
- Language: TypeScript
- Styling: TailwindCSS
- Animations: Framer Motion
- Encryption: CryptoJS (AES-256)
- Utilities: clsx, tailwind-merge
- Node.js (version 16 or higher)
- npm or yarn package manager
- Modern web browser with JavaScript enabled
- Install dependencies:
npm install
-
Start the development server:
npm run dev
-
Open your browser and navigate to
http://localhost:5173(or the port shown in the terminal). -
For production build:
npm run build npm run preview
-
Home Page: Enter your message in the text area. The app will detect emotions in real-time as you type.
-
Encrypt: Click the encrypt button to generate an encrypted version of your message. The system will:
- Analyze the emotional content
- Generate a unique encryption key
- Encrypt the message using AES-256
- Display the results with emotion visualization
-
Decrypt: Use the decrypt page to enter your encrypted message and the corresponding key to retrieve the original text.
-
Emotion Chart: View a visual representation of detected emotions with confidence scores and color coding.
src/
├── components/
│ ├── HomePage.tsx # Main input page
│ ├── EncryptResult.tsx # Encryption results display
│ ├── DecryptPage.tsx # Decryption interface
│ └── EmotionChart.tsx # Emotion visualization
├── utils/
│ ├── emotionDetector.ts # Emotion analysis logic
│ ├── encryption.ts # AES encryption utilities
│ └── cn.ts # Utility functions
├── App.tsx # Main application component
├── main.tsx # React entry point
└── index.css # Global styles
- Advanced NLP: Integrate with more sophisticated emotion detection models (e.g., using TensorFlow.js or API-based services)
- Multi-language Support: Extend emotion detection to support multiple languages
- Key Management: Add secure key storage and management features
- File Encryption: Support for encrypting files in addition to text messages
- Collaboration Features: Allow sharing encrypted messages with emotion context
- API Integration: Provide REST API endpoints for integration with other applications
- Performance Optimization: Implement web workers for heavy emotion analysis
- Accessibility: Enhance accessibility features for screen readers and keyboard navigation
- Offline Support: Add service worker for offline functionality
- Custom Themes: Allow users to customize color schemes and themes
Contributions are welcome! Please feel free to submit a Pull Request.
This project is licensed under the MIT License
Made By- Nityam Mishra
Email: nityamm2005@gmail.com
GitHub: nityamm-coder