How xecipher/chromaflow works
ChromaFlow is a browser-based optical file-transfer app: the sender prepares text or files, divides them into framed JABCode images, and displays a looping sequence; the receiver scans frames from a camera or uploaded image, collects them, and reconstructs the original content. The graph includes adaptive display settings, retransmission selection, and frame-progress/result views. README capabilities are represented where their implementation paths are documented; some wiring is inferred from the README because page and core excerpts are partial.
Main entry points: ReaderPage.jsx Reader page · WriterPage.jsx Writer page · jabcode.js JABCode interface · SettingsPanel.jsx Display settings
Components 18
Sender
- Writer page
src/pages/WriterPage.jsx - File input
src/components/Writer/FileDropZone.jsx - Display settings
src/components/Writer/SettingsPanel.jsx - Adaptive sizing
src/core/display.js - Frame playback
src/components/Writer/FramePlayer.jsx
Frame Encoding
- Payload chunking
src/core/chunker.js - JABCode interface
src/core/jabcode.js - Frame headers
src/core/header.js - WASM engine
public/assets/chromaflow.wasm
Receiver
- Reader page
src/pages/ReaderPage.jsx - Frame progress
src/components/Reader/SlotGrid.jsx - Transfer result
src/components/Reader/ResultView.jsx
Frame Recovery
- Scan decoding
src/core/jabcode.js - Received frames
src/pages/ReaderPage.jsx - File reassembly
src/pages/ReaderPage.jsx
Other components
- User
- Display screen
- Camera
Connections 22
- User → Writer page: provides input
- User → Reader page: starts scan
- File input → Writer page: supplies files
- Display settings → Adaptive sizing: computes capacity
- Adaptive sizing → Display settings: returns sizing
- Writer page → Payload chunking: splits payload
- Payload chunking → Writer page: returns chunks
- Writer page → JABCode interface: builds frames
- JABCode interface → Frame headers: builds or parses
- JABCode interface → WASM engine: encodes or decodes
- Writer page → Frame playback: plays frames
- Frame playback → Display screen: displays sequence
- Camera → Reader page: provides images
- Reader page → Scan decoding: decodes images
- Scan decoding → WASM engine: decodes payload
- Reader page → Received frames: stores frames
- Reader page → Frame progress: updates grid
- Reader page → File reassembly: reassembles when complete
- Received frames → File reassembly: supplies ordered chunks
- File reassembly → Transfer result: provides reconstructed file
- Transfer result → User: offers download or text
- Reader page → Writer page: selects missing frames