Diary POC - Audio Journal App

POC complet d'application de journal vocal avec React 18 + FastAPI + GCS.

Fonctionnalités

• Enregistrement audio : MediaRecorder (WebM/Opus) → ffmpeg (WAV 16kHz mono)
• Stockage GCS : journal-raw/<user_id>/<YYYY-WW>/<timestamp>.<ext>
• Rapports hebdomadaires : analyse mock/réelle avec export HTML
• Auth locale : email en localStorage (POC)
• Opt-in analyse : header X-Analysis-OptIn conditionnel

Prérequis

• Node.js 18+
• Python 3.11+
• Docker & Docker Compose
• Compte GCP avec bucket GCS configuré

Setup développement

Option 1 : Script automatique

./dev-setup.sh

Option 2 : Manuel

1. Variables d'environnement

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

# api/.env
cp api/.env.sample api/.env
# Éditer GCP_BUCKET=your-bucket-name
# Éditer 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

Lancement Docker (recommandé)

# Construction et lancement complet
docker-compose up --build

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

Configuration GCS

1. Créer un bucket GCS
2. Générer une clé de service JSON
3. Définir GCP_BUCKET et GOOGLE_APPLICATION_CREDENTIALS dans api/.env

Architecture

web/           # React 18 + TypeScript + Vite
├── src/
│   ├── components/    # Banner, Navbar
│   ├── routes/        # Dashboard, Recorder, History, Settings, Report
│   ├── store/         # Zustand (état local)
│   ├── api/          # Client HTTP
│   └── types/        # Types TypeScript
api/           # FastAPI + ffmpeg
├── app/
│   ├── main.py       # Routes
│   ├── storage.py    # GCS
│   └── audio.py      # ffmpeg

Notes Pi4/ARM64

Pour déploiement Raspberry Pi 4 :

# Build images ARM64
docker buildx build --platform linux/arm64 -t diary-web:arm64 ./web
docker buildx build --platform linux/arm64 -t diary-api:arm64 ./api

# Modifier docker-compose.yml pour utiliser les images ARM64

Performance limitée sur Pi4 : réduire la fréquence d'échantillonnage si nécessaire.

Check-list QA

Tests fonctionnels

• Enregistrement : Start/Stop → preview audio local
• Upload : WebM → serveur → GCS (.webm + .wav 16kHz)
• History : affichage liste locale + serveur
• Settings : opt-in bascule header X-Analysis-OptIn
• Report : données mock → export HTML téléchargeable
• Purge : suppression semaine via API

Tests techniques

• CORS : http://localhost:3000 → http://localhost:8000
• Docker : docker-compose up → tout fonctionne
• Health : GET /healthz → {ok: true}
• ffmpeg : conversion WebM → WAV 16kHz mono
• GCS : stockage avec structure journal-raw/<user>/<YYYY-WW>/

Tests UI

• Responsive : mobile/desktop
• Bannière : avertissement non médical
• Navigation : React Router v6
• État : Zustand pour cache local

Troubleshooting

• CORS errors : vérifier VITE_BACKEND_URL et config CORS API
• GCS errors : vérifier credentials et permissions bucket
• ffmpeg errors : vérifier installation dans container API
• Audio issues : tester avec différents navigateurs (Chrome recommandé)