EchoScape (AI Therapist)

Inspiration

The inspiration for EchoScape came from the concept of Visual Cognitive Behavioral Therapy (CBT).
In traditional therapy, reframing helps individuals reinterpret situations from a different perspective.
We wanted to take this idea literally—not just say something different with AI, but show something different.

We were fascinated by the idea that emotions are not single labels, but high-dimensional vectors.
If an emotional state is represented as:

[ E = \langle v_{joy}, v_{sadness}, v_{anxiety}, \ldots, v_{hope} \rangle ]

we realized this vector could be mapped into a visual parameter space ( V ): lighting, color palette, texture, and composition.
This allows users to externalize abstract feelings into concrete, manipulable visual scenes.


What It Does

EchoScape is an AI-powered emotional reflection and visual companion that bridges conversational therapy and art therapy.

  • Empathetic Conversation
    Users interact with an AI companion that listens actively and guides self-reflection.

  • Real-Time Emotion Analysis
    Advanced NLP detects nuanced emotional shifts throughout the conversation.

  • Visual Metaphor Generation (FIBO)
    Emotional vectors are translated into visual landscapes using the Feelings Into Beautiful Objects framework.
    Example: anxiety → stormy ocean → reframed into a calm lake.

  • Crisis Detection
    Automatically detects high-risk language and surfaces immediate support resources.


How We Built It

EchoScape is a modern, modular full-stack system.

Frontend

  • Next.js 16 + React 19
  • Tailwind CSS for a calm, accessible UI
  • Zustand for managing chat history and visual state

Backend

  • Node.js + Express
  • TypeScript for strict type safety and reliability

AI & Database

  • OpenAI & Google Gemini
    Power conversational intelligence and emotion analysis
  • Supabase
    Authentication, session storage, and user history
  • FIBO Engine
    Custom translation layer mapping emotional intensity scores to visual prompts
    Example: intensity > 0.8 → stormy weather

Challenges We Ran Into

  • Authentication Race Condition
    The chat initialized before Supabase authentication completed, causing 401 errors.
    We fixed this with a strict wait-for-auth guard using ChatPanel and useSessionStore.

  • Prompt Engineering Consistency
    Early versions generated random imagery.
    We treated prompts as strict syntax and enforced JSON schemas for deterministic outputs.

  • State Synchronization
    Chat streaming and image generation had to be decoupled to keep the UI responsive.


Accomplishments We’re Proud Of

  • FIBO Framework Implementation
    Successfully turned emotional vectors into a functional visual generation engine.

  • Robust Architecture
    Clean separation of concerns enabling real-time AI processing without UI lag.

  • Race Condition Resolution
    Fixing authentication timing stabilized the entire system.


What We Learned

  • AI Architecture Matters
    AI systems require strong structure, error handling, and type safety to move beyond demos.

  • The Power of Visual Feedback
    Users reacted more deeply to seeing emotions than reading descriptions.

  • Prompt Engineering as Engineering
    Deterministic behavior requires disciplined prompt design.


What’s Next for EchoScape

  • 3D Emotional Atlas
    Visualize emotional journeys over time in an interactive 3D space using Three.js.

  • Custom ML Models
    Transition from third-party APIs to privacy-focused, custom-trained models.

  • Interactive Reframing Tools
    Build hands-on Visual CBT exercises where users adjust scene parameters to practice emotional regulation.

Built With

Share this project:

Updates