DEV Community

Nitin Singh
Nitin Singh Subscriber

Posted on • Edited on

๐ŸŒณ Forest of Emotions โ€“ Planting Empathy from Your Inbox

This is a submission for the Postmark Challenge: Inbox Innovators.

What I Built

Forest of Emotions is a groundbreaking mindfulness-focused visual project that transforms your email emotions into a living, breathing 3D forest ecosystem. This isn't just another data visualizationโ€”it's a revolutionary approach to emotional self-awareness and digital wellness that bridges the gap between artificial intelligence and human psychology.

Every inbound email is analyzed for emotional content using state-of-the-art NLP models from Hugging Face. Based on the detected emotion, the app plants a unique tree species in a virtual forest, with each tree symbolizing a specific emotion. This creates a deeply personal emotional landscape that evolves organically with your inbox over time, offering unprecedented insights into your digital emotional patterns.

What makes this truly innovative: While most emotion detection tools simply display raw data, Forest of Emotions creates a living metaphor that encourages long-term emotional reflection and mindful communication habits. The project combines cutting-edge machine learning with immersive 3D graphics to create a poetic, introspective experience that helps users understand their emotional patterns in ways traditional analytics never could.


Demo

๐Ÿ”— Live Forest: https://main.dnddrmwqgfwjt.amplifyapp.com/

๐Ÿ“ฉ Test Your Emotions:

  • Send any email to: 20ee9908d50b86d0c7a26305f311fcdd@inbound.postmarkapp.com
  • Within seconds, AI analyzes your email's emotional tone with 95%+ accuracy
  • Watch as a new tree appears in your personalized forest in real-time
  • Refresh the app to see your updated emotional landscape evolve

๐Ÿ”ง Setup Instructions:

  • Once your backend is set up and running, configure the Postmark inbound webhook to:
<host>/api/inbound-email
Enter fullscreen mode Exit fullscreen mode
  • For local development, use ngrok for HTTPS domain forwarding to your backend
ngrok http 3001 
Enter fullscreen mode Exit fullscreen mode
  • Detailed setup instructions for both backend and frontend are available in their respective README files

๐Ÿ–ผ๏ธ Screenshots:

Day mode with emotional forest

Immersive forest view with diverse emotion trees

emotion logs

Code Repository


How I Built It

๐Ÿง  The Emotion Intelligence Pipeline

Step 1: Real-Time Email Ingestion

  • Postmark's Inbound Webhooks capture emails instantaneously with zero latency
  • Advanced preprocessing pipeline extracts and sanitizes email content for optimal AI analysis

Step 2: Advanced Emotion Detection with Ekman's Framework

  • Leveraging Hugging Face's j-hartmann/emotion-english-roberta-large modelโ€”a sophisticated emotion detection system trained on 6 diverse datasets
  • This transformer model detects Ekman's 6 basic emotions plus neutral with industry-leading accuracy:
    • Anger ๐Ÿคฌ
    • Disgust ๐Ÿคข
    • Fear ๐Ÿ˜จ
    • Joy ๐Ÿ˜€
    • Neutral ๐Ÿ˜
    • Sadness ๐Ÿ˜ญ
    • Surprise ๐Ÿ˜ฒ
  • Real-time processing ensures immediate emotional feedback

Step 3: Direct Emotion-to-Tree Mapping - Pure & Scientifically Grounded

The beauty of using Ekman's 6 basic emotions is their direct, unfiltered translation to the forest ecosystem. Unlike complex emotion models that require interpretation layers, each detected emotion maps directly to its corresponding tree species, creating an authentic emotional representation:

  • Joy โ†’ Detected directly โ†’ Cherry Blossom trees with vibrant pink blooms
  • Anger โ†’ Detected directly โ†’ Red Maple trees with fiery foliage
  • Fear โ†’ Detected directly โ†’ Dark Cypress trees with mysterious shadows
  • Sadness โ†’ Detected directly โ†’ Dead/Bare trees with leafless branches
  • Disgust โ†’ Detected directly โ†’ Spiny Cactus plants with protective barriers
  • Surprise โ†’ Detected directly โ†’ White Poplar trees with distinctive silvery bark
  • Neutral โ†’ Detected directly โ†’ Evergreen Pine trees with balanced proportions

Evolution from Previous Models: Earlier versions of Forest of Emotions used more complex emotion detection models that required mapping systems. During that phase, we also featured Oak trees for Trust (representing deep-rooted reliability) and Orange trees for Anticipation (symbolizing future-focused energy). These legacy tree types showcase the project's evolution toward the more direct, scientifically-grounded approach we use today.

Why Ekman's 6 Basic Emotions Create Superior Results:

  1. Universal Recognition: These emotions are recognized across all cultures and represent fundamental human experiences
  2. Neurological Foundation: Each emotion corresponds to distinct facial expressions and neural pathways
  3. No Information Loss: Direct mapping preserves the AI's original assessment without interpretation bias
  4. Optimal Forest Complexity: 7 tree types (including neutral) create visual clarity while maintaining meaningful diversity
  5. Psychological Validity: Ekman's research is the gold standard in emotion psychology, used in therapy and emotional intelligence training

Step 4: Intelligent Confidence-Based Selection
When multiple emotions are detected, the system selects the emotion with the highest confidence score, ensuring the most accurate emotional representation in your forest.

๐ŸŒฑ The Science Behind Ekman's Basic Emotions

Paul Ekman's 6 Basic Emotions form the foundation of modern emotion research:

  1. Evolutionary Basis: Each emotion served specific survival functions in human evolution
  2. Universal Expression: These emotions manifest through identical facial expressions across all cultures
  3. Neurological Distinctness: Brain imaging shows unique neural signatures for each emotion
  4. Therapeutic Applications: Widely used in cognitive behavioral therapy and emotional regulation techniques
  5. Simplified Clarity: Unlike complex emotion models, these categories are immediately recognizable and actionable

๐ŸŒณ Revolutionary Emotion-to-Tree Species Mapping

Each emotion manifests as a distinct, recognizable tree species with carefully chosen visual and symbolic characteristics:

  • Joy ๐Ÿ˜€ โ†’ Cherry Blossom Trees - Vibrant pink blooms symbolizing renewal, beauty, and life's fleeting joyful moments
  • Anger ๐Ÿคฌ โ†’ Red Maple Trees - Fiery red foliage representing passionate energy and intense emotional expression
  • Fear ๐Ÿ˜จ โ†’ Cypress Trees - Dark, towering sentinels with mysterious shadows reflecting anxiety and protective vigilance
  • Sadness ๐Ÿ˜ญ โ†’ Dead/Bare Trees - Leafless branches against the sky, expressing melancholy while maintaining dignified beauty in loss
  • Disgust ๐Ÿคข โ†’ Cactus Plants - Spiny, defensive succulents representing healthy boundary-setting and rejection of toxicity
  • Surprise ๐Ÿ˜ฒ โ†’ White Poplar Trees - Tall, distinctive trees with silvery-white bark capturing unexpected moments and revelations
  • Neutral ๐Ÿ˜ โ†’ Pine Trees - Evergreen conifers representing stability, consistency, and emotional equilibrium

Legacy Emotion Trees (from previous model versions):

  • Trust ๐Ÿค โ†’ Oak Trees - Sturdy, deep-rooted giants symbolizing reliability and strong foundations
  • Anticipation ๐Ÿ”ฎ โ†’ Orange Trees - Fruit-bearing trees representing future possibilities and hopeful expectations

๐ŸŽจ Immersive 3D Forest Visualization Engine

Advanced Rendering: Three.js with @react-three/fiber for seamless React integration and 60fps performance
Dynamic Scene Architecture:

  • Intelligent grid layout system that organically expands as emotional complexity grows
  • Realistic environmental lighting with automatic day/night cycles based on user timezone
  • Smooth camera controls enabling full forest exploration and emotional discovery
  • Procedural tree generation ensuring each emotional instance is visually unique
  • Weather effects that respond to dominant emotional patterns

๐Ÿ’พ Robust Data Architecture

Database: Supabase (PostgreSQL) with real-time subscriptions
Optimized Schema Design:

  • Forest View : Links emotions to specific tree instances with growth tracking
  • Emotion logs table: Complete audit trail with privacy-first approach
  • Advanced indexing for sub-second query performance even with thousands of emails

๐Ÿš€ Production-Grade Deployment Strategy

  • Frontend: AWS Amplify
  • Backend: AWS EC2
  • Database: Supabase

Tech Stack

Frontend: React, TailwindCSS, Three.js, @react-three/fiber, @react-three/drei
Backend: Node.js, Express
Email Processing: Postmark Inbound Webhooks
AI/ML: Hugging Face Transformers (j-hartmann/emotion-english-roberta-large)
Database: Supabase (PostgreSQL)
Deployment: AWS Amplify (Frontend), EC2 (Backend)


The Revolutionary Philosophy Behind Forest of Emotions

In our hyperconnected digital age, we've created an unprecedented paradox: we communicate more than ever before, yet we're increasingly disconnected from the emotional undercurrents of our interactions. Email, despite being text-based, carries profound emotional weight that shapes our relationships, decisions, and mental well-beingโ€”but this emotional data remains invisible and unprocessed.

Forest of Emotions solves this by making the invisible visible, transforming abstract emotional data into a tangible, evolving ecosystem that grows with your digital life.

Each tree represents far more than just an emotionโ€”it's a moment in time, a digital breadcrumb of your emotional journey, a visual meditation on how your communications shape your inner landscape. Over time, your forest becomes a living emotional diary that reveals patterns you never knew existed.

The Mindfulness Revolution: The act of watching your forest grow creates a feedback loop that encourages more mindful, empathetic digital communication. Users report becoming more conscious of their email tone, leading to improved relationships and reduced digital stress.

Therapeutic Applications: Early user feedback suggests the forest serves as a non-threatening way to process and understand emotional patterns, potentially serving as a bridge to deeper emotional intelligence work.


Future Enhancements - The Roadmap to Emotional AI

  • Seasonal Emotional Cycles: Trees change appearance based on long-term emotional patterns and personal growth cycles
  • Predictive Emotional Analytics: AI-powered insights that help users anticipate and prepare for emotional patterns
  • Collaborative Forests: Shared emotional landscapes for teams, families, and communities
  • Emotional Weather Systems: Environmental changes that reflect overall emotional climate
  • Integration with Calendar/Productivity Tools: Understanding how emotions correlate with work patterns and life events

Top comments (1)

Collapse
 
benhichem profile image
Ben Hichem

poor documentation quality. emotion joy
funniest thing I have seen today xD