How jo-danyeong/fado works
FaDO lets users create, manage, and select pixel-art expressions for a Raspberry Pi OLED, with a studio workflow for live camera recognition and automatic expression display. The frontend provides studio, library, settings, and guide views; its workspace state persists locally, while expression actions upload PNGs and send display commands through the Spring backend. The backend bridges browser requests to the Raspberry Pi server and camera service. The Raspberry Pi server exposes camera and YOLO routes and stores uploaded expression images for display. Several UI pages and server modules are represented from the tree and index; their internal wiring is not shown in the excerpts, so uncertain links are omitted.
Main entry points: App.jsx App shell · main.py FastAPI application · WorkspaceContext.jsx Workspace state · useDetection.js Detection workflow
Components 25
Frontend experience
- App shell
Frontend/src/App.jsx - Studio, library, settings, guide
Frontend/src/pages - Expression editor
Frontend/src/features/editor/ExpressionEditor.jsx - Expression actions
Frontend/src/features/useExpressionActions.js - Workspace state
Frontend/src/context/WorkspaceContext.jsx - Workspace rules
Frontend/src/core/workspace.js - Browser persistence
Frontend/src/services/storage.js - Expression presets
Frontend/src/data/presets.js - Detection workflow
Frontend/src/hooks/useDetection.js - Recognition policy
Frontend/src/core/expressionRecognition.js - Detection requests
Frontend/src/services/detection.js - Camera capture
Frontend/src/services/camera.js - Device API client
Frontend/src/services/api.js
Spring API bridge
- Pi API controllers
Backend/src/main/java/backend/server/RaspberryPi/API - Camera proxy
Backend/src/main/java/backend/server/RaspberryPi/API/CameraController.java - Expression image API
Backend/src/main/java/backend/server/RaspberryPi/API/ExpressionImageController.java - Pi HTTP client
Backend/src/main/java/backend/server/RaspberryPi/RaspberryClient.java
Pi inference server
- FastAPI application
RPiServer/main.py - Camera stream routes
RPiServer/camera_stream.py - YOLO inference routes
RPiServer/yolo_api.py - NCNN model runtime
RPiServer/models/main.py - Expression PNG files
RPiServer/main.py
Pi device
- OLED display helper
RaspberryPi/ImgTest.py
Other components
- FaDO user
- Raspberry Pi camera
Connections 25
- FaDO user → App shell: uses
- App shell → Studio, library, settings, guide: routes to
Frontend/src/App.jsx - App shell → Expression editor: opens
Frontend/src/App.jsx - App shell → Expression actions: creates
Frontend/src/App.jsx - App shell → Workspace state: reads state
Frontend/src/App.jsx - Workspace state → Workspace rules: reduces state
Frontend/src/context/WorkspaceContext.jsx - Workspace state → Browser persistence: loads and saves
Frontend/src/context/WorkspaceContext.jsx - Workspace state → Expression presets: initializes from
Frontend/src/context/WorkspaceContext.jsx - Detection workflow → Detection requests: requests detection
Frontend/src/hooks/useDetection.js - Detection workflow → Recognition policy: tracks results
Frontend/src/hooks/useDetection.js - Detection workflow → Camera capture: captures frames
Frontend/src/hooks/useDetection.js - Detection workflow → Expression actions: selects expression
Frontend/src/hooks/useDetection.js - Expression actions → Workspace state: updates state
Frontend/src/features/useExpressionActions.js - Expression actions → Device API client: uploads and sends
Frontend/src/features/useExpressionActions.js - FaDO user → Raspberry Pi camera: provides video
- Device API client → Pi API controllers: calls API
- Pi API controllers → Pi HTTP client: delegates Pi requests
Backend/src/main/java/backend/server/RaspberryPi/API/ExpressionImageController.java - Camera proxy → Raspberry Pi camera: proxies detection
Backend/src/main/java/backend/server/RaspberryPi/API/CameraController.java - Pi HTTP client → FastAPI application: sends HTTP requests
Backend/src/main/java/backend/server/RaspberryPi/RaspberryClient.java - FastAPI application → Camera stream routes: registers routes
RPiServer/main.py - FastAPI application → YOLO inference routes: registers routes
RPiServer/main.py - FastAPI application → Expression PNG files: reads and writes
RPiServer/main.py - FastAPI application → OLED display helper: displays expression
RPiServer/main.py - Camera stream routes → Raspberry Pi camera: streams video
- YOLO inference routes → NCNN model runtime: runs inference