How sapinsapin/sapinsapin-web works
sapinsapin.ai is a public React landing page for an initiative building Philippine-language AI resources. Visitors explore the project, synced dataset and model figures, map, and speech demo; they can also ask the site-wide Sappy assistant or recover from a mistyped URL. Hub figures are synchronized into source data before deployment, while the speech demo and assistant use runtime services. The README describes the site as static, but the sampled client code and source index also show an assistant Worker integration. Unsampled Worker internals are not expanded here.
Main entry points: App.jsx Homepage · NotFound.jsx 404 recovery · SpeechConsole.jsx Speech console · ChatWidget.jsx Chat widget
Components 20
Site experience
- Homepage
src/App.jsx - 404 recovery
src/NotFound.jsx - Philippines map
src/components/PhilippinesMap.jsx - Map geometry
src/data/philippinesMapPaths.js - Theme state
src/lib/theme.js - URL waveform
src/components/SignalTrace.jsx
Project information
- Catalog display
src/data/catalog.js - Hub snapshot
src/data/hubSnapshot.js - Model descriptions
src/data/modelNotes.js
Speech demo
- Demo manifest
src/data/spaceManifest.js - Speech console
src/components/SpeechConsole.jsx - Audio processing
src/lib/audio.js - Space client
src/lib/spaceClient.js
Sappy assistant
- Chat widget
src/components/ChatWidget.jsx - Sappy client
src/lib/sappyClient.js - Sappy Worker
worker/src/index.js - Project knowledge
- Model service
Other components
- Visitor
- Halohalo Space
Connections 24
- Visitor → Homepage: visits
README.md - Visitor → 404 recovery: opens bad URL
README.md - Homepage → Catalog display: renders
src/App.jsx - Homepage → Philippines map: renders
src/App.jsx - Homepage → Speech console: renders
src/App.jsx - Homepage → Chat widget: renders
src/App.jsx - Homepage → Model descriptions: uses descriptions
src/App.jsx - Homepage → Theme state: uses theme
src/App.jsx - 404 recovery → URL waveform: renders trace
src/NotFound.jsx - 404 recovery → Theme state: uses theme
src/NotFound.jsx - 404 recovery → Chat widget: renders
src/NotFound.jsx - Philippines map → Map geometry: reads geometry
src/components/PhilippinesMap.jsx - Philippines map → Catalog display: reads figures
src/components/PhilippinesMap.jsx - Catalog display → Hub snapshot: merges snapshot
src/data/catalog.js - Speech console → Demo manifest: loads choices
src/components/SpeechConsole.jsx - Speech console → Audio processing: processes audio
src/components/SpeechConsole.jsx - Speech console → Space client: requests speech tasks
src/components/SpeechConsole.jsx - Space client → Halohalo Space: calls Space
src/lib/spaceClient.js - Chat widget → Sappy client: sends questions
src/components/ChatWidget.jsx - Chat widget → Audio processing: records voice
src/components/ChatWidget.jsx - Sappy client → Sappy Worker: calls assistant
src/lib/sappyClient.js - Sappy client → Space client: uses voice tasks
src/lib/sappyClient.js - Sappy Worker → Project knowledge: retrieves project facts
- Sappy Worker → Model service: generates answers