# systemchester/frameronin architecture

> Architecture diagram of the GitHub repository systemchester/frameronin, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-28). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/systemchester/frameronin
- Repository: https://github.com/systemchester/frameronin

## Overview

FrameRonin is a browser-based pixel-art and animation toolkit, with optional backend processing for video frame extraction and Seedance watermark removal. Users enter a tool from the home hub, process images or frame sequences locally, and export results; the video-job path uploads a video, queues server processing, and exposes status and downloads. The README documents additional RoninPro, AI-linked, and experimental tools represented here by their existing component paths. Backend wiring is based on the sampled API, storage, and task code; unsampled feature internals are not expanded.

Main entry points: [`frontend/src/App.tsx`](https://github.com/systemchester/frameronin/blob/main/frontend/src/App.tsx) (Tool hub), [`backend/app/main.py`](https://github.com/systemchester/frameronin/blob/main/backend/app/main.py) (Backend API), [`worker/tasks.py`](https://github.com/systemchester/frameronin/blob/main/worker/tasks.py) (RQ task dispatch), [`frontend/src/components/ParamsStep.tsx`](https://github.com/systemchester/frameronin/blob/main/frontend/src/components/ParamsStep.tsx) (Video workflow)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_hub["App and access"]
  node_app["Tool hub<br/>[App.tsx]"]
  node_mode["Mode selector<br/>[ModeSelector.tsx]"]
end

subgraph group_media["Image and frames"]
  node_gif["GIF and frames"]
  node_sprite["Sprite sheet"]
  node_adjust["Sheet adjustment"]
  node_image["Pixel image tools<br/>[ImagePixelate.tsx]"]
  node_matte["Chroma / AI matte<br/>[ImageMatte.tsx]"]
  node_resize["Image resize and crop"]
  node_pixelpipe["Pixel processing<br/>[pipeline.ts]"]
  node_watermarkimg["Gemini watermark tool"]
end

subgraph group_creative["Creative tools"]
  node_pro["RoninPro suite<br/>[RoninPro.tsx]"]
  node_workflow["Custom workflows"]
  node_pixelartist["Rseprite editor"]
  node_ai["Nanobanana tools"]
end

subgraph group_jobs["Backend jobs"]
  node_video["Video workflow<br/>[ParamsStep.tsx]"]
  node_api["Backend API<br/>[main.py]"]
  node_storage[("Job files<br/>[storage.py]")]
  node_queue["RQ task dispatch<br/>[tasks.py]"]
  node_processor["Video processing<br/>[processor.py]"]
  node_watermark["Video watermark removal"]
end

subgraph group_state["State and integrations"]
  node_auth["Ronin auth<br/>[context.tsx]"]
  node_stash["Image stash<br/>[context.tsx]"]
end

node_user(("User"))
node_roninrpc(("Ronin chain RPC"))
node_redis[("Redis")]

node_user -->|"selects tool"| node_app
node_app -->|"offers modes"| node_mode
node_app -->|"opens"| node_gif
node_app -->|"opens"| node_sprite
node_app -->|"opens"| node_adjust
node_app -->|"opens"| node_image
node_app -->|"opens"| node_matte
node_app -->|"opens"| node_resize
node_app -->|"opens"| node_video
node_app -->|"opens"| node_pro
node_app -->|"opens"| node_workflow
node_app -->|"opens"| node_pixelartist
node_app -->|"opens"| node_ai
node_app -->|"opens"| node_watermarkimg
node_image -->|"processes pixels"| node_pixelpipe
node_user -->|"uploads video"| node_video
node_video -->|"submits job"| node_api
node_api -->|"saves upload"| node_storage
node_api -->|"enqueues task"| node_queue
node_queue -->|"stores job"| node_redis
node_queue -->|"dispatches video job"| node_processor
node_queue -->|"dispatches watermark job"| node_watermark
node_processor -->|"writes results"| node_storage
node_api -->|"reads results"| node_storage
node_api -->|"returns status and files"| node_video
node_auth -.->|"checks NFT ownership"| node_roninrpc
node_app -->|"shows stash panel"| node_stash

click node_app "https://github.com/systemchester/frameronin/blob/main/frontend/src/App.tsx"
click node_mode "https://github.com/systemchester/frameronin/blob/main/frontend/src/components/ModeSelector.tsx"
click node_auth "https://github.com/systemchester/frameronin/blob/main/frontend/src/auth/context.tsx"
click node_stash "https://github.com/systemchester/frameronin/blob/main/frontend/src/stash/context.tsx"
click node_gif "https://github.com/systemchester/frameronin/blob/main/frontend/src/components/GifFrameConverter.tsx"
click node_sprite "https://github.com/systemchester/frameronin/blob/main/frontend/src/components/SpriteSheetTool.tsx"
click node_adjust "https://github.com/systemchester/frameronin/blob/main/frontend/src/components/SpriteSheetAdjust.tsx"
click node_image "https://github.com/systemchester/frameronin/blob/main/frontend/src/components/ImagePixelate.tsx"
click node_matte "https://github.com/systemchester/frameronin/blob/main/frontend/src/components/ImageMatte.tsx"
click node_resize "https://github.com/systemchester/frameronin/blob/main/frontend/src/components/ImageResizeStroke.tsx"
click node_pixelpipe "https://github.com/systemchester/frameronin/blob/main/frontend/src/lib/pixellise/pipeline.ts"
click node_video "https://github.com/systemchester/frameronin/blob/main/frontend/src/components/ParamsStep.tsx"
click node_api "https://github.com/systemchester/frameronin/blob/main/backend/app/main.py"
click node_storage "https://github.com/systemchester/frameronin/blob/main/backend/app/storage.py"
click node_queue "https://github.com/systemchester/frameronin/blob/main/worker/tasks.py"
click node_processor "https://github.com/systemchester/frameronin/blob/main/worker/processor.py"
click node_watermark "https://github.com/systemchester/frameronin/blob/main/worker/watermark_remover.py"
click node_pro "https://github.com/systemchester/frameronin/blob/main/frontend/src/components/RoninPro.tsx"
click node_workflow "https://github.com/systemchester/frameronin/blob/main/frontend/src/components/RoninProCustomWorkflow.tsx"
click node_pixelartist "https://github.com/systemchester/frameronin/blob/main/frontend/src/components/Rseprite/useRsepriteState.ts"
click node_ai "https://github.com/systemchester/frameronin/blob/main/frontend/src/components/NanobananaFullChar.tsx"
click node_watermarkimg "https://github.com/systemchester/frameronin/blob/main/frontend/src/components/ImageGeminiWatermark.tsx"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_app,node_mode,node_user toneBlue
class node_gif,node_sprite,node_adjust,node_image,node_matte,node_resize,node_pixelpipe,node_watermarkimg,node_redis toneAmber
class node_pro,node_workflow,node_pixelartist,node_ai toneMint
class node_video,node_api,node_storage,node_queue,node_processor,node_watermark toneRose
class node_auth,node_stash,node_roninrpc toneIndigo
```

## Components

### App and access

- [Tool hub](https://github.com/systemchester/frameronin/blob/main/frontend/src/App.tsx): `frontend/src/App.tsx`
- [Mode selector](https://github.com/systemchester/frameronin/blob/main/frontend/src/components/ModeSelector.tsx): `frontend/src/components/ModeSelector.tsx`

### Image and frames

- [GIF and frames](https://github.com/systemchester/frameronin/blob/main/frontend/src/components/GifFrameConverter.tsx): `frontend/src/components/GifFrameConverter.tsx`
- [Sprite sheet](https://github.com/systemchester/frameronin/blob/main/frontend/src/components/SpriteSheetTool.tsx): `frontend/src/components/SpriteSheetTool.tsx`
- [Sheet adjustment](https://github.com/systemchester/frameronin/blob/main/frontend/src/components/SpriteSheetAdjust.tsx): `frontend/src/components/SpriteSheetAdjust.tsx`
- [Pixel image tools](https://github.com/systemchester/frameronin/blob/main/frontend/src/components/ImagePixelate.tsx): `frontend/src/components/ImagePixelate.tsx`
- [Chroma / AI matte](https://github.com/systemchester/frameronin/blob/main/frontend/src/components/ImageMatte.tsx): `frontend/src/components/ImageMatte.tsx`
- [Image resize and crop](https://github.com/systemchester/frameronin/blob/main/frontend/src/components/ImageResizeStroke.tsx): `frontend/src/components/ImageResizeStroke.tsx`
- [Pixel processing](https://github.com/systemchester/frameronin/blob/main/frontend/src/lib/pixellise/pipeline.ts): `frontend/src/lib/pixellise/pipeline.ts`
- [Gemini watermark tool](https://github.com/systemchester/frameronin/blob/main/frontend/src/components/ImageGeminiWatermark.tsx): `frontend/src/components/ImageGeminiWatermark.tsx`

### Creative tools

- [RoninPro suite](https://github.com/systemchester/frameronin/blob/main/frontend/src/components/RoninPro.tsx): `frontend/src/components/RoninPro.tsx`
- [Custom workflows](https://github.com/systemchester/frameronin/blob/main/frontend/src/components/RoninProCustomWorkflow.tsx): `frontend/src/components/RoninProCustomWorkflow.tsx`
- [Rseprite editor](https://github.com/systemchester/frameronin/blob/main/frontend/src/components/Rseprite/useRsepriteState.ts): `frontend/src/components/Rseprite/useRsepriteState.ts`
- [Nanobanana tools](https://github.com/systemchester/frameronin/blob/main/frontend/src/components/NanobananaFullChar.tsx): `frontend/src/components/NanobananaFullChar.tsx`

### Backend jobs

- [Video workflow](https://github.com/systemchester/frameronin/blob/main/frontend/src/components/ParamsStep.tsx): `frontend/src/components/ParamsStep.tsx`
- [Backend API](https://github.com/systemchester/frameronin/blob/main/backend/app/main.py): `backend/app/main.py`
- [Job files](https://github.com/systemchester/frameronin/blob/main/backend/app/storage.py): `backend/app/storage.py`
- [RQ task dispatch](https://github.com/systemchester/frameronin/blob/main/worker/tasks.py): `worker/tasks.py`
- [Video processing](https://github.com/systemchester/frameronin/blob/main/worker/processor.py): `worker/processor.py`
- [Video watermark removal](https://github.com/systemchester/frameronin/blob/main/worker/watermark_remover.py): `worker/watermark_remover.py`

### State and integrations

- [Ronin auth](https://github.com/systemchester/frameronin/blob/main/frontend/src/auth/context.tsx): `frontend/src/auth/context.tsx`
- [Image stash](https://github.com/systemchester/frameronin/blob/main/frontend/src/stash/context.tsx): `frontend/src/stash/context.tsx`

### Other components

- **User**
- **Ronin chain RPC**
- **Redis**

## Connections

- User → Tool hub: selects tool
- Tool hub → Mode selector: offers modes
- Tool hub → GIF and frames: opens
- Tool hub → Sprite sheet: opens
- Tool hub → Sheet adjustment: opens
- Tool hub → Pixel image tools: opens
- Tool hub → Chroma / AI matte: opens
- Tool hub → Image resize and crop: opens
- Tool hub → Video workflow: opens
- Tool hub → RoninPro suite: opens
- Tool hub → Custom workflows: opens
- Tool hub → Rseprite editor: opens
- Tool hub → Nanobanana tools: opens
- Tool hub → Gemini watermark tool: opens
- Pixel image tools → Pixel processing: processes pixels
- User → Video workflow: uploads video
- Video workflow → Backend API: submits job
- Backend API → Job files: saves upload
- Backend API → RQ task dispatch: enqueues task
- RQ task dispatch → Redis: stores job
- RQ task dispatch → Video processing: dispatches video job
- RQ task dispatch → Video watermark removal: dispatches watermark job
- Video processing → Job files: writes results
- Backend API → Job files: reads results
- Backend API → Video workflow: returns status and files
- Ronin auth → Ronin chain RPC: checks NFT ownership
- Tool hub → Image stash: shows stash panel