🎨 MoodCanvas - AI Art from Emotions

Transform your emotions into stunning digital artwork using AI. Express yourself through 8 different art styles with voice input support and immersive 3D visualization.

✨ Features

• 🎭 8 Art Styles: Realistic, Anime, Abstract, Oil Painting, Cyberpunk, Watercolor, Sketch, Vintage
• 🎤 Voice Input: Speak your emotions using Web Speech API
• 🧠 AI Emotion Analysis: Advanced sentiment analysis using VADER
• 🎨 3D Visualization: Immersive Three.js-powered art display
• 📱 Responsive Design: Works perfectly on desktop and mobile
• 💾 Art Management: Save, share, and regenerate your creations
• ⚡ Real-time Generation: Live AI art generation using Pollinations.ai
• 🌐 Offline Fallback: Graceful degradation when API is unavailable

🚀 Live Demo

Try MoodCanvas Now →

📸 Screenshots

Main Interface

Art Generation

3D Display

🛠️ Tech Stack

Frontend

• HTML5 - Semantic markup
• CSS3 - Styling with Tailwind CSS
• JavaScript (ES6+) - Modern JavaScript features
• Three.js - 3D graphics and visualization
• Web Speech API - Voice input functionality

Backend

• Python 3.8+ - Server-side logic
• Flask - Web framework
• VADER Sentiment - Emotion analysis
• Pollinations.ai - AI art generation
• Flask-CORS - Cross-origin resource sharing

Deployment

• Netlify - Frontend hosting
• Render.com - Backend hosting
• GitHub - Version control

🚀 Quick Start

Prerequisites

• Python 3.8+
• Node.js 14+
• Modern web browser with WebGL support

Local Development

1. Clone the repository

   git clone https://github.com/yourusername/moodcanvas.git
   cd moodcanvas

2. Setup Backend

   cd backend
   pip install -r requirements.txt
   python app.py

   Backend will run on http://localhost:5000

3. Setup Frontend

   cd frontend
   # Open index.html in your browser
   # Or serve with a local server:
   python -m http.server 8000

   Frontend will be available at http://localhost:8000

4. Build Tailwind CSS (Optional)

   cd frontend
   npm install
   npx tailwindcss -i ./styles.css -o ./output.css --watch

📖 Usage

1. Express Your Emotions

   • Type your feelings in the text area
   • Or use the voice input button to speak
   • Be specific about your emotions for better results

2. Choose Art Style

   • Select from 8 available art styles
   • Each style has unique characteristics
   • Preview the style before generating

3. Generate Art

   • Click "Generate Art" button
   • Wait 10-30 seconds for AI processing
   • View your artwork in 3D canvas

4. Manage Your Art

   • Save artwork to local storage
   • Share via Web Share API or copy link
   • Regenerate with different variations

🎨 Art Styles

Style	Description	Best For
🎭 Realistic	Photorealistic, detailed artwork	Nature, portraits, landscapes
🎌 Anime	Japanese animation style	Characters, fantasy, colorful scenes
🎨 Abstract	Modern abstract art	Emotions, concepts, artistic expression
🖼️ Oil Painting	Classical painting style	Traditional art, historical themes
🌆 Cyberpunk	Futuristic neon style	Technology, urban, sci-fi themes
🎭 Watercolor	Soft watercolor painting	Gentle emotions, nature, dreamy scenes
✏️ Sketch	Hand-drawn pencil art	Quick concepts, artistic sketches
📼 Vintage	Retro nostalgic style	Nostalgic feelings, classic themes

🔧 API Endpoints

Generate Art

POST /
Content-Type: application/json

{
  "prompt": "I feel happy and excited about my new project",
  "style": "realistic"
}

Response:

{
  "image": "base64_encoded_image",
  "sentiment": "positive",
  "scores": {
    "compound": 0.8,
    "pos": 0.9,
    "neu": 0.1,
    "neg": 0.0
  },
  "style": "realistic",
  "status": "success"
}

Get Available Styles

GET /styles

Response:

{
  "styles": {
    "realistic": {
      "name": "Realistic",
      "description": "Photorealistic, detailed artwork",
      "icon": "📷"
    }
  },
  "status": "success"
}

🏗️ Architecture

graph TB
    A[User Input] --> B[Frontend - React/Vanilla JS]
    B --> C[Voice Recognition API]
    B --> D[Flask Backend API]
    D --> E[VADER Sentiment Analysis]
    D --> F[Pollinations.ai API]
    F --> G[AI Art Generation]
    G --> H[Base64 Image]
    H --> I[Three.js 3D Display]
    I --> J[User Interaction]
    J --> K[Save/Share/Regenerate]

Loading

🚀 Deployment

Frontend (Netlify)

1. Connect your GitHub repository to Netlify
2. Set build command: npm run build (if using build process)
3. Set publish directory: frontend/
4. Deploy automatically on push to main branch

Backend (Render.com)

1. Connect your GitHub repository to Render
2. Set build command: pip install -r requirements.txt
3. Set start command: python app.py
4. Add environment variables if needed

🤝 Contributing

We welcome contributions! Please see our Contributing Guidelines for details.

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Pollinations.ai for AI art generation
• VADER Sentiment for emotion analysis
• Three.js for 3D graphics
• Tailwind CSS for styling
• Flask for backend framework

📞 Support

• 📧 Email: [Your Email]
• 🐛 Issues: GitHub Issues
• 💬 Discussions: GitHub Discussions

🔮 Roadmap

• User authentication and profiles
• Art gallery and community features
• Mobile app (React Native)
• More art styles and customization
• AI model fine-tuning
• High-resolution export options
• Social sharing integration
• Art therapy features

---

Made with ❤️ by [Your Name]

Live Demo • GitHub • Portfolio