# rangga2077/pro_trial architecture

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

- Interactive diagram: https://gitdiagram.com/rangga2077/pro_trial
- Repository: https://github.com/rangga2077/pro_trial
- Video tour (about a minute): https://gitdiagram.com/rangga2077/pro_trial/video

## Overview

CoCI is a local, gesture-driven cooking assistant: camera frames are analyzed into actions, sent to an Electron/React interface, and used to navigate recipes and cooking steps. The documented recipe-management, camera-control, projection, and optional culinary-LLM capabilities are represented as separate branches. The graph follows the README and sampled source; several endpoint, storage, and UI implementation details were not sampled, so uncertain connections are omitted.

Main entry points: [`backend/app/engines/cv/pipeline.py`](https://github.com/rangga2077/pro_trial/blob/main/backend/app/engines/cv/pipeline.py) (CV pipeline), [`backend/app/main.py`](https://github.com/rangga2077/pro_trial/blob/main/backend/app/main.py) (FastAPI app), [`frontend/src/context/WebSocketProvider.tsx`](https://github.com/rangga2077/pro_trial/blob/main/frontend/src/context/WebSocketProvider.tsx) (WebSocket provider), [`frontend/src/components/RecipeManager.tsx`](https://github.com/rangga2077/pro_trial/blob/main/frontend/src/components/RecipeManager.tsx) (Recipe manager)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_backend["Backend runtime"]
  node_app["FastAPI app<br/>[main.py]"]
  node_api["General API<br/>[endpoints.py]"]
  node_camera_api["Camera API<br/>[camera.py]"]
  node_stream["WebSocket route<br/>[stream.py]"]
  node_realtime["Realtime service<br/>[realtime.py]"]
end

subgraph group_vision["Vision and actions"]
  node_pipeline["CV pipeline<br/>[pipeline.py]"]
  node_yolo["Object detection<br/>[yolo.py]"]
  node_gesture["Gesture recognition<br/>[gesture.py]"]
  node_actions["Gesture interpreter<br/>[gesture_actions.py]"]
end

subgraph group_recipes["Recipes and assistant"]
  node_recipe_api["Recipe API<br/>[recipes.py]"]
  node_recipes_store["Recipe loader<br/>[recipe_loader.py]"]
  node_recipe_files[("Recipe files")]
  node_conversation["Conversation handler<br/>[handlers.py]"]
  node_llm_router["LLM router<br/>[router.py]"]
  node_llm_client["LLM client<br/>[client.py]"]
end

subgraph group_frontend["Cooking interface"]
  node_electron["Electron shell<br/>[main.ts]"]
  node_frontend_app["React app<br/>[App.tsx]"]
  node_ws_provider["WebSocket provider"]
  node_recipe_manager["Recipe manager<br/>[RecipeManager.tsx]"]
  node_recipe_step["Step display<br/>[RecipeStep.tsx]"]
  node_overlay["CV overlay<br/>[OverlayCanvas.tsx]"]
  node_display_settings["Display settings"]
end

node_cook(("Cook"))
node_ollama{{"Ollama"}}
node_external_llm{{"External LLM"}}
node_screen{{"Display hardware"}}
node_camera{{"Camera"}}

node_app -->|"mounts routes"| node_api
node_app -->|"mounts routes"| node_camera_api
node_app -->|"mounts routes"| node_recipe_api
node_app -->|"mounts route"| node_stream
node_app -->|"starts pipeline"| node_pipeline
node_camera -->|"provides frames"| node_pipeline
node_pipeline -->|"tracks objects"| node_yolo
node_pipeline -->|"recognizes gestures"| node_gesture
node_pipeline -->|"interprets gestures"| node_actions
node_pipeline -->|"broadcasts updates"| node_realtime
node_realtime -->|"streams updates"| node_ws_provider
node_ws_provider -->|"connects by WebSocket"| node_stream
node_frontend_app -->|"provides context"| node_ws_provider
node_frontend_app -->|"renders"| node_recipe_manager
node_frontend_app -->|"renders"| node_overlay
node_frontend_app -->|"renders"| node_display_settings
node_cook -->|"uses gestures"| node_recipe_manager
node_recipe_manager -->|"requests recipes"| node_recipe_api
node_recipe_api -->|"loads and saves"| node_recipes_store
node_recipes_store -->|"reads and writes"| node_recipe_files
node_recipe_manager -->|"shows current step"| node_recipe_step
node_ws_provider -->|"provides updates"| node_recipe_manager
node_ws_provider -->|"provides updates"| node_overlay
node_display_settings -->|"requests display control"| node_electron
node_electron -->|"moves window"| node_screen
node_conversation -->|"generates response"| node_llm_client
node_llm_router -->|"routes simple queries"| node_llm_client
node_llm_client -->|"sends generation request"| node_ollama
node_llm_router -.->|"simulates substitution route"| node_external_llm

click node_electron "https://github.com/rangga2077/pro_trial/blob/main/frontend/electron/main.ts"
click node_app "https://github.com/rangga2077/pro_trial/blob/main/backend/app/main.py"
click node_api "https://github.com/rangga2077/pro_trial/blob/main/backend/app/api/v1/endpoints/endpoints.py"
click node_camera_api "https://github.com/rangga2077/pro_trial/blob/main/backend/app/api/v1/endpoints/camera.py"
click node_recipe_api "https://github.com/rangga2077/pro_trial/blob/main/backend/app/api/v1/endpoints/recipes.py"
click node_stream "https://github.com/rangga2077/pro_trial/blob/main/backend/app/api/v1/endpoints/stream.py"
click node_pipeline "https://github.com/rangga2077/pro_trial/blob/main/backend/app/engines/cv/pipeline.py"
click node_yolo "https://github.com/rangga2077/pro_trial/blob/main/backend/app/engines/cv/yolo.py"
click node_gesture "https://github.com/rangga2077/pro_trial/blob/main/backend/app/engines/cv/gesture.py"
click node_actions "https://github.com/rangga2077/pro_trial/blob/main/backend/app/services/gesture_actions.py"
click node_realtime "https://github.com/rangga2077/pro_trial/blob/main/backend/app/services/realtime.py"
click node_recipes_store "https://github.com/rangga2077/pro_trial/blob/main/backend/app/services/recipe_loader.py"
click node_conversation "https://github.com/rangga2077/pro_trial/blob/main/backend/app/engines/llm/handlers.py"
click node_llm_router "https://github.com/rangga2077/pro_trial/blob/main/backend/app/engines/llm/router.py"
click node_llm_client "https://github.com/rangga2077/pro_trial/blob/main/backend/app/engines/llm/client.py"
click node_frontend_app "https://github.com/rangga2077/pro_trial/blob/main/frontend/src/App.tsx"
click node_ws_provider "https://github.com/rangga2077/pro_trial/blob/main/frontend/src/context/WebSocketProvider.tsx"
click node_recipe_manager "https://github.com/rangga2077/pro_trial/blob/main/frontend/src/components/RecipeManager.tsx"
click node_recipe_step "https://github.com/rangga2077/pro_trial/blob/main/frontend/src/components/RecipeStep.tsx"
click node_overlay "https://github.com/rangga2077/pro_trial/blob/main/frontend/src/components/OverlayCanvas.tsx"
click node_display_settings "https://github.com/rangga2077/pro_trial/blob/main/frontend/src/components/DisplaySettings.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_api,node_camera_api,node_stream,node_realtime toneBlue
class node_pipeline,node_yolo,node_gesture,node_actions toneAmber
class node_recipe_api,node_recipes_store,node_recipe_files,node_conversation,node_llm_router,node_llm_client toneMint
class node_electron,node_frontend_app,node_ws_provider,node_recipe_manager,node_recipe_step,node_overlay,node_display_settings toneRose
class node_cook,node_ollama,node_external_llm,node_screen,node_camera toneIndigo
```

## Components

### Backend runtime

- [FastAPI app](https://github.com/rangga2077/pro_trial/blob/main/backend/app/main.py): `backend/app/main.py`
- [General API](https://github.com/rangga2077/pro_trial/blob/main/backend/app/api/v1/endpoints/endpoints.py): `backend/app/api/v1/endpoints/endpoints.py`
- [Camera API](https://github.com/rangga2077/pro_trial/blob/main/backend/app/api/v1/endpoints/camera.py): `backend/app/api/v1/endpoints/camera.py`
- [WebSocket route](https://github.com/rangga2077/pro_trial/blob/main/backend/app/api/v1/endpoints/stream.py): `backend/app/api/v1/endpoints/stream.py`
- [Realtime service](https://github.com/rangga2077/pro_trial/blob/main/backend/app/services/realtime.py): `backend/app/services/realtime.py`

### Vision and actions

- [CV pipeline](https://github.com/rangga2077/pro_trial/blob/main/backend/app/engines/cv/pipeline.py): `backend/app/engines/cv/pipeline.py`
- [Object detection](https://github.com/rangga2077/pro_trial/blob/main/backend/app/engines/cv/yolo.py): `backend/app/engines/cv/yolo.py`
- [Gesture recognition](https://github.com/rangga2077/pro_trial/blob/main/backend/app/engines/cv/gesture.py): `backend/app/engines/cv/gesture.py`
- [Gesture interpreter](https://github.com/rangga2077/pro_trial/blob/main/backend/app/services/gesture_actions.py): `backend/app/services/gesture_actions.py`

### Recipes and assistant

- [Recipe API](https://github.com/rangga2077/pro_trial/blob/main/backend/app/api/v1/endpoints/recipes.py): `backend/app/api/v1/endpoints/recipes.py`
- [Recipe loader](https://github.com/rangga2077/pro_trial/blob/main/backend/app/services/recipe_loader.py): `backend/app/services/recipe_loader.py`
- **Recipe files**
- [Conversation handler](https://github.com/rangga2077/pro_trial/blob/main/backend/app/engines/llm/handlers.py): `backend/app/engines/llm/handlers.py`
- [LLM router](https://github.com/rangga2077/pro_trial/blob/main/backend/app/engines/llm/router.py): `backend/app/engines/llm/router.py`
- [LLM client](https://github.com/rangga2077/pro_trial/blob/main/backend/app/engines/llm/client.py): `backend/app/engines/llm/client.py`

### Cooking interface

- [Electron shell](https://github.com/rangga2077/pro_trial/blob/main/frontend/electron/main.ts): `frontend/electron/main.ts`
- [React app](https://github.com/rangga2077/pro_trial/blob/main/frontend/src/App.tsx): `frontend/src/App.tsx`
- [WebSocket provider](https://github.com/rangga2077/pro_trial/blob/main/frontend/src/context/WebSocketProvider.tsx): `frontend/src/context/WebSocketProvider.tsx`
- [Recipe manager](https://github.com/rangga2077/pro_trial/blob/main/frontend/src/components/RecipeManager.tsx): `frontend/src/components/RecipeManager.tsx`
- [Step display](https://github.com/rangga2077/pro_trial/blob/main/frontend/src/components/RecipeStep.tsx): `frontend/src/components/RecipeStep.tsx`
- [CV overlay](https://github.com/rangga2077/pro_trial/blob/main/frontend/src/components/OverlayCanvas.tsx): `frontend/src/components/OverlayCanvas.tsx`
- [Display settings](https://github.com/rangga2077/pro_trial/blob/main/frontend/src/components/DisplaySettings.tsx): `frontend/src/components/DisplaySettings.tsx`

### Other components

- **Cook**
- **Ollama**
- **External LLM**
- **Display hardware**
- **Camera**

## Connections

- FastAPI app → General API: mounts routes
- FastAPI app → Camera API: mounts routes
- FastAPI app → Recipe API: mounts routes
- FastAPI app → WebSocket route: mounts route
- FastAPI app → CV pipeline: starts pipeline
- Camera → CV pipeline: provides frames
- CV pipeline → Object detection: tracks objects
- CV pipeline → Gesture recognition: recognizes gestures
- CV pipeline → Gesture interpreter: interprets gestures
- CV pipeline → Realtime service: broadcasts updates
- Realtime service → WebSocket provider: streams updates
- WebSocket provider → WebSocket route: connects by WebSocket
- React app → WebSocket provider: provides context
- React app → Recipe manager: renders
- React app → CV overlay: renders
- React app → Display settings: renders
- Cook → Recipe manager: uses gestures
- Recipe manager → Recipe API: requests recipes
- Recipe API → Recipe loader: loads and saves
- Recipe loader → Recipe files: reads and writes
- Recipe manager → Step display: shows current step
- WebSocket provider → Recipe manager: provides updates
- WebSocket provider → CV overlay: provides updates
- Display settings → Electron shell: requests display control
- Electron shell → Display hardware: moves window
- Conversation handler → LLM client: generates response
- LLM router → LLM client: routes simple queries
- LLM client → Ollama: sends generation request
- LLM router → External LLM: simulates substitution route