# thealejo160/adapta-pe architecture

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

- Interactive diagram: https://gitdiagram.com/thealejo160/adapta-pe
- Repository: https://github.com/thealejo160/adapta-pe

## Overview

Adapta PE is a Chromium accessibility extension with an optional Flask image-analysis service. Its main workflow is: the user configures accessibility features in the popup; preferences are stored and applied to the active page; in-page voice, TalkBack, color-filter, and camera-pointer features assist navigation; voice actions are dispatched to browser APIs. The README documents the optional image-analysis integration, but sampled source does not show its caller, so only the documented connection is included.

Main entry points: [`content_script.js`](https://github.com/thealejo160/adapta-pe/blob/main/content_script.js) (Page Runtime), [`popup.js`](https://github.com/thealejo160/adapta-pe/blob/main/popup.js) (Settings Logic), [`background.js`](https://github.com/thealejo160/adapta-pe/blob/main/background.js) (Message Dispatcher), [`app.py`](https://github.com/thealejo160/adapta-pe/blob/main/app.py) (Image Analysis Service)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_settings["Settings"]
  node_popup_ui["Settings UI<br/>[popup.html]"]
  node_popup_logic["Settings Logic<br/>[popup.js]"]
  node_preferences[("Preferences<br/>[popup.js]")]
end

subgraph group_page_features["Page Accessibility"]
  node_page_script["Page Runtime<br/>[content_script.js]"]
  node_talkback["TalkBack<br/>[content_script.js]"]
  node_voice["Voice Commands<br/>[content_script.js]"]
  node_color_filters["Color Filters<br/>[content_script.js]"]
  node_kinetic_mouse["Kinetic Mouse<br/>[content_script.js]"]
end

subgraph group_browser_control["Browser Control"]
  node_service_worker["Message Dispatcher<br/>[background.js]"]
  node_chrome_apis["Chrome APIs"]
end

subgraph group_image_ai["Image Analysis"]
  node_image_service["Image Analysis Service<br/>[app.py]"]
end

node_user(("User"))
node_microphone(("Microphone"))
node_webcam(("Webcam"))
node_web_page["Web Page"]
node_local_ai(("Localhost Service"))

node_user -->|"changes settings"| node_popup_ui
node_popup_ui -->|"captures input"| node_popup_logic
node_popup_logic -->|"stores settings"| node_preferences
node_popup_logic -->|"requests refresh"| node_page_script
node_page_script -->|"reads settings"| node_preferences
node_page_script -->|"enables"| node_talkback
node_page_script -->|"enables"| node_voice
node_page_script -->|"enables"| node_color_filters
node_page_script -->|"enables"| node_kinetic_mouse
node_user -->|"speaks commands"| node_microphone
node_microphone -->|"provides audio"| node_voice
node_voice -->|"dispatches actions"| node_service_worker
node_talkback -->|"requests speech"| node_service_worker
node_service_worker -->|"uses TTS and tabs"| node_chrome_apis
node_user -->|"provides camera input"| node_webcam
node_webcam -->|"provides video"| node_kinetic_mouse
node_kinetic_mouse -->|"moves pointer and clicks"| node_web_page
node_talkback -->|"reads hovered content"| node_web_page
node_color_filters -->|"applies color correction"| node_web_page
node_local_ai -.->|"hosts service"| node_image_service
node_page_script -.->|"sends image analysis request"| node_image_service
node_image_service -.->|"returns description"| node_page_script

click node_popup_ui "https://github.com/thealejo160/adapta-pe/blob/main/popup.html"
click node_popup_logic "https://github.com/thealejo160/adapta-pe/blob/main/popup.js"
click node_preferences "https://github.com/thealejo160/adapta-pe/blob/main/popup.js"
click node_page_script "https://github.com/thealejo160/adapta-pe/blob/main/content_script.js"
click node_talkback "https://github.com/thealejo160/adapta-pe/blob/main/content_script.js"
click node_voice "https://github.com/thealejo160/adapta-pe/blob/main/content_script.js"
click node_color_filters "https://github.com/thealejo160/adapta-pe/blob/main/content_script.js"
click node_kinetic_mouse "https://github.com/thealejo160/adapta-pe/blob/main/content_script.js"
click node_service_worker "https://github.com/thealejo160/adapta-pe/blob/main/background.js"
click node_image_service "https://github.com/thealejo160/adapta-pe/blob/main/app.py"

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_popup_ui,node_popup_logic,node_preferences,node_user toneBlue
class node_page_script,node_talkback,node_voice,node_color_filters,node_kinetic_mouse toneAmber
class node_service_worker,node_chrome_apis toneMint
class node_image_service toneRose
class node_microphone,node_webcam,node_web_page,node_local_ai toneIndigo
```

## Components

### Settings

- [Settings UI](https://github.com/thealejo160/adapta-pe/blob/main/popup.html): `popup.html`
- [Settings Logic](https://github.com/thealejo160/adapta-pe/blob/main/popup.js): `popup.js`
- [Preferences](https://github.com/thealejo160/adapta-pe/blob/main/popup.js): `popup.js`

### Page Accessibility

- [Page Runtime](https://github.com/thealejo160/adapta-pe/blob/main/content_script.js): `content_script.js`
- [TalkBack](https://github.com/thealejo160/adapta-pe/blob/main/content_script.js): `content_script.js`
- [Voice Commands](https://github.com/thealejo160/adapta-pe/blob/main/content_script.js): `content_script.js`
- [Color Filters](https://github.com/thealejo160/adapta-pe/blob/main/content_script.js): `content_script.js`
- [Kinetic Mouse](https://github.com/thealejo160/adapta-pe/blob/main/content_script.js): `content_script.js`

### Browser Control

- [Message Dispatcher](https://github.com/thealejo160/adapta-pe/blob/main/background.js): `background.js`
- **Chrome APIs**

### Image Analysis

- [Image Analysis Service](https://github.com/thealejo160/adapta-pe/blob/main/app.py): `app.py`

### Other components

- **User**
- **Microphone**
- **Webcam**
- **Web Page**
- **Localhost Service**

## Connections

- User → Settings UI: changes settings
- Settings UI → Settings Logic: captures input
- Settings Logic → Preferences: stores settings
- Settings Logic → Page Runtime: requests refresh
- Page Runtime → Preferences: reads settings
- Page Runtime → TalkBack: enables
- Page Runtime → Voice Commands: enables
- Page Runtime → Color Filters: enables
- Page Runtime → Kinetic Mouse: enables
- User → Microphone: speaks commands
- Microphone → Voice Commands: provides audio
- Voice Commands → Message Dispatcher: dispatches actions
- TalkBack → Message Dispatcher: requests speech
- Message Dispatcher → Chrome APIs: uses TTS and tabs
- User → Webcam: provides camera input
- Webcam → Kinetic Mouse: provides video
- Kinetic Mouse → Web Page: moves pointer and clicks
- TalkBack → Web Page: reads hovered content
- Color Filters → Web Page: applies color correction
- Localhost Service → Image Analysis Service: hosts service
- Page Runtime → Image Analysis Service: sends image analysis request
- Image Analysis Service → Page Runtime: returns description