Skip to content

πŸŽ™οΈ Privacy-first audio journaling web app with AI-powered emotional wellness tracking using weather metaphors (React + TypeScript + Vite)

Notifications You must be signed in to change notification settings

Rqbln/GCPU-hackathon-webapp

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

18 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

Kura - Mental Health Audio Journal

Kura is an AI-powered audio journaling platform that helps users track their emotional journey through natural voice recordings and intelligent analysis.

πŸ₯ Important: Kura is NOT a medical tool. It's a personal wellness companion designed to complement, not replace, professional mental health care.

✨ Features

  • 🎀 Audio Recording: MediaRecorder (WebM/Opus) β†’ ffmpeg (WAV 16kHz mono)
  • ☁️ Cloud Storage: Google Cloud Storage with automatic backup
  • πŸ“Š Weekly Reports: AI-powered emotional analysis with HTML/PDF export
  • 🌦️ Mental Weather: Emotion tracking using weather metaphors instead of clinical scores
  • πŸ” Privacy First: Your data, your control - delete anytime
  • πŸ“± Responsive Design: Works seamlessly on desktop and mobile

🎯 Core Values

  1. Non-Medical: Kura is a personal wellness tool, not a diagnostic instrument
  2. Data Ownership: Full user control - your recordings are never used to train AI models
  3. Weather Metaphor: Emotional states represented as weather (β˜€οΈ sunny to 🌩️ stormy) instead of cold clinical scores

πŸš€ Tech Stack

Frontend

  • React 18 + TypeScript
  • Material-UI (MUI) v7 for design
  • Vite for fast development
  • Zustand for state management
  • React Router v6 for navigation

Backend

  • FastAPI (Python 3.11)
  • Google Cloud Platform (Cloud Run, Cloud Storage, Speech-to-Text)
  • Gemini 2.0 Flash for emotion analysis
  • Eventarc for automatic pipeline triggers

πŸ“‹ Prerequisites

  • Node.js 18+
  • Python 3.11+
  • Docker & Docker Compose
  • GCP account with configured Cloud Storage bucket

πŸ› οΈ Development Setup

Option 1: Automatic Script

./dev-setup.sh

Option 2: Manual Setup

1. Environment Variables

# web/.env
cp web/.env.sample web/.env
# Edit VITE_BACKEND_URL=http://localhost:8000

# api/.env
cp api/.env.sample api/.env
# Edit GCP_BUCKET=your-bucket-name
# Edit GOOGLE_APPLICATION_CREDENTIALS=/path/to/service-account.json

2. Frontend (React + Vite)

cd web
npm install
npm run dev  # β†’ http://localhost:3000

3. Backend (FastAPI)

cd api
python -m venv venv
source venv/bin/activate  # Linux/Mac
pip install -r requirements.txt
uvicorn app.main:app --reload --port 8000  # β†’ http://localhost:8000

🐳 Docker Launch (Recommended)

# Build and launch complete stack
docker-compose up --build

# Web: http://localhost:3000
# API: http://localhost:8000
# Swagger: http://localhost:8000/docs

☁️ GCS Configuration

  1. Create a GCS bucket
  2. Generate a service account JSON key
  3. Set GCP_BUCKET and GOOGLE_APPLICATION_CREDENTIALS in api/.env

πŸ—οΈ Project Architecture

web/           # React 18 + TypeScript + Vite
β”œβ”€β”€ src/
β”‚   β”œβ”€β”€ components/    # Banner, Navbar, ChatWindow, etc.
β”‚   β”œβ”€β”€ routes/        # Dashboard, Recorder, History, Report, Mental Weather
β”‚   β”œβ”€β”€ store/         # Zustand (state management)
β”‚   β”œβ”€β”€ api/          # HTTP client
β”‚   β”œβ”€β”€ theme/        # MUI theme customization
β”‚   └── types/        # TypeScript interfaces
api/           # FastAPI + ffmpeg
β”œβ”€β”€ app/
β”‚   β”œβ”€β”€ main.py       # API routes
β”‚   β”œβ”€β”€ storage.py    # GCS operations
β”‚   └── audio.py      # ffmpeg audio processing

πŸ“± User Interface Pages

🏠 Dashboard

Overview of your emotional journey with weekly weather summary and key metrics.

🎀 Recorder

Voice recording interface with real-time audio capture and instant upload.

πŸ“… History

Chronological list of all sessions with emotion scores and detailed transcriptions.

πŸ“Š Reports

Weekly summaries with AI-generated insights, highlights, and exportable HTML/PDF reports.

🌦️ Mental Weather

Visual timeline showing emotional progression across weeks using weather metaphors.

βœ… QA Checklist

Functional Tests

  • Recording: Start/Stop β†’ local audio preview
  • Upload: WebM β†’ server β†’ GCS (.webm + .wav 16kHz)
  • History: Display local + server sessions list
  • Reports: Weekly summaries β†’ downloadable HTML export
  • Mental Weather: 4-week emotional progression visualization
  • Delete: Session removal via API

Technical Tests

  • CORS: http://localhost:3000 β†’ http://localhost:8000
  • Docker: docker-compose up β†’ everything works
  • Health: GET /healthz β†’ {ok: true}
  • ffmpeg: WebM β†’ WAV 16kHz mono conversion
  • GCS: Storage with structure mj-audio-raw/<YYYY-WXX>/session_*/

UI Tests

  • Responsive: mobile/desktop compatibility
  • Banner: non-medical disclaimer displayed
  • Navigation: React Router v6 working
  • State: Zustand local cache functional
  • Theme: MUI custom theme applied correctly

πŸ› Troubleshooting

CORS Errors

  • Verify VITE_BACKEND_URL in web/.env
  • Check API CORS configuration

GCS Errors

  • Verify service account credentials
  • Check bucket permissions and existence

ffmpeg Errors

  • Ensure ffmpeg is installed in API container
  • Check audio file format compatibility

Audio Recording Issues

  • Test with different browsers (Chrome recommended)
  • Verify microphone permissions
  • Check MediaRecorder browser support

πŸ”— Related Repositories

  • Backend Pipeline: GCPU-hackathon-vertex - ML pipeline with Gemini 2.0
  • Documentation: See DEMO_GUIDE.md for complete presentation script

πŸ“„ License

This project was developed for the Google Cloud Platform University Hackathon 2025.

πŸ™ Acknowledgments

  • Google Cloud Platform for infrastructure
  • Gemini 2.0 Flash for AI-powered emotion analysis
  • Material-UI team for the design system

Made with ❀️ for mental wellness

About

πŸŽ™οΈ Privacy-first audio journaling web app with AI-powered emotional wellness tracking using weather metaphors (React + TypeScript + Vite)

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 2

  •  
  •  

Languages