# orangefixdev/kuya-bai-baybayin-translator architecture

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

- Interactive diagram: https://gitdiagram.com/orangefixdev/kuya-bai-baybayin-translator
- Repository: https://github.com/orangefixdev/kuya-bai-baybayin-translator

## Overview

Kuya Bai is a browser-based Baybayin learning site and Tagalog-to-Baybayin translator. Its main workflow takes a visitor’s text, converts it in the page, then lets them preview, share, or download an image of the result. The site also documents learning materials, games, and resources as distinct capabilities, though their page implementations were not sampled. The graph shows the translator and image-generation behavior visible in JavaScript; links among learning pages are omitted where excerpts do not establish them.

Main entry points: [`index.html`](https://github.com/orangefixdev/kuya-bai-baybayin-translator/blob/main/index.html) (Translator page), [`js/index.js`](https://github.com/orangefixdev/kuya-bai-baybayin-translator/blob/main/js/index.js) (Text conversion), [`baybayin`](https://github.com/orangefixdev/kuya-bai-baybayin-translator/tree/main/baybayin) (Baybayin lessons), [`games/index.html`](https://github.com/orangefixdev/kuya-bai-baybayin-translator/blob/main/games/index.html) (Games)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_translation["Translation"]
  node_translator["Translator page<br/>[index.html]"]
  node_translation_logic["Text conversion<br/>[index.js]"]
  node_baybayin_result["Baybayin result<br/>[index.js]"]
end

subgraph group_image["Image output"]
  node_canvas["Image canvas<br/>[index.js]"]
  node_image_renderer["Image rendering<br/>[index.js]"]
  node_image_download["Image download<br/>[index.js]"]
end

subgraph group_learning["Learning content"]
  node_lessons["Baybayin lessons"]
  node_games["Games<br/>[index.html]"]
  node_worksheets["Worksheets"]
  node_resources["Resources<br/>[index.html]"]
end

subgraph group_site["Site pages"]
  node_new_site["New experience<br/>[index.html]"]
  node_downloads["Downloads page<br/>[index.html]"]
  node_privacy["Privacy page<br/>[privacy.html]"]
  node_terms["Terms page<br/>[terms.html]"]
end

node_visitor(("Visitor"))

node_visitor -->|"enters"| node_translator
node_translator -.->|"loads"| node_translation_logic
node_translation_logic -->|"converts"| node_baybayin_result
node_translator -.->|"provides input"| node_canvas
node_translation_logic -->|"calls"| node_image_renderer
node_image_renderer -->|"draws"| node_canvas
node_image_renderer -->|"triggers"| node_image_download
node_visitor -->|"learns"| node_lessons
node_visitor -->|"plays"| node_games
node_visitor -.->|"downloads"| node_worksheets
node_visitor -.->|"opens"| node_resources
node_visitor -.->|"visits"| node_new_site
node_visitor -.->|"visits"| node_downloads
node_visitor -.->|"visits"| node_privacy
node_visitor -.->|"visits"| node_terms

click node_translator "https://github.com/orangefixdev/kuya-bai-baybayin-translator/blob/main/index.html"
click node_translation_logic "https://github.com/orangefixdev/kuya-bai-baybayin-translator/blob/main/js/index.js"
click node_baybayin_result "https://github.com/orangefixdev/kuya-bai-baybayin-translator/blob/main/js/index.js"
click node_canvas "https://github.com/orangefixdev/kuya-bai-baybayin-translator/blob/main/js/index.js"
click node_image_renderer "https://github.com/orangefixdev/kuya-bai-baybayin-translator/blob/main/js/index.js"
click node_image_download "https://github.com/orangefixdev/kuya-bai-baybayin-translator/blob/main/js/index.js"
click node_lessons "https://github.com/orangefixdev/kuya-bai-baybayin-translator/tree/main/baybayin"
click node_games "https://github.com/orangefixdev/kuya-bai-baybayin-translator/blob/main/games/index.html"
click node_worksheets "https://github.com/orangefixdev/kuya-bai-baybayin-translator/blob/main/assets/kuya-bai-worksheets-2023ed.pdf"
click node_resources "https://github.com/orangefixdev/kuya-bai-baybayin-translator/blob/main/resources/index.html"
click node_new_site "https://github.com/orangefixdev/kuya-bai-baybayin-translator/blob/main/new/index.html"
click node_downloads "https://github.com/orangefixdev/kuya-bai-baybayin-translator/blob/main/downloads/index.html"
click node_privacy "https://github.com/orangefixdev/kuya-bai-baybayin-translator/blob/main/privacy.html"
click node_terms "https://github.com/orangefixdev/kuya-bai-baybayin-translator/blob/main/terms.html"

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_translator,node_translation_logic,node_baybayin_result toneBlue
class node_canvas,node_image_renderer,node_image_download toneAmber
class node_lessons,node_games,node_worksheets,node_resources toneMint
class node_new_site,node_downloads,node_privacy,node_terms toneRose
class node_visitor toneIndigo
```

## Components

### Translation

- [Translator page](https://github.com/orangefixdev/kuya-bai-baybayin-translator/blob/main/index.html): `index.html`
- [Text conversion](https://github.com/orangefixdev/kuya-bai-baybayin-translator/blob/main/js/index.js): `js/index.js`
- [Baybayin result](https://github.com/orangefixdev/kuya-bai-baybayin-translator/blob/main/js/index.js): `js/index.js`

### Image output

- [Image canvas](https://github.com/orangefixdev/kuya-bai-baybayin-translator/blob/main/js/index.js): `js/index.js`
- [Image rendering](https://github.com/orangefixdev/kuya-bai-baybayin-translator/blob/main/js/index.js): `js/index.js`
- [Image download](https://github.com/orangefixdev/kuya-bai-baybayin-translator/blob/main/js/index.js): `js/index.js`

### Learning content

- [Baybayin lessons](https://github.com/orangefixdev/kuya-bai-baybayin-translator/tree/main/baybayin): `baybayin`
- [Games](https://github.com/orangefixdev/kuya-bai-baybayin-translator/blob/main/games/index.html): `games/index.html`
- [Worksheets](https://github.com/orangefixdev/kuya-bai-baybayin-translator/blob/main/assets/kuya-bai-worksheets-2023ed.pdf): `assets/kuya-bai-worksheets-2023ed.pdf`
- [Resources](https://github.com/orangefixdev/kuya-bai-baybayin-translator/blob/main/resources/index.html): `resources/index.html`

### Site pages

- [New experience](https://github.com/orangefixdev/kuya-bai-baybayin-translator/blob/main/new/index.html): `new/index.html`
- [Downloads page](https://github.com/orangefixdev/kuya-bai-baybayin-translator/blob/main/downloads/index.html): `downloads/index.html`
- [Privacy page](https://github.com/orangefixdev/kuya-bai-baybayin-translator/blob/main/privacy.html): `privacy.html`
- [Terms page](https://github.com/orangefixdev/kuya-bai-baybayin-translator/blob/main/terms.html): `terms.html`

### Other components

- **Visitor**

## Connections

- Visitor → Translator page: enters (evidence: `README.md`)
- Translator page → Text conversion: loads
- Text conversion → Baybayin result: converts (evidence: `js/index.js`)
- Translator page → Image canvas: provides input
- Text conversion → Image rendering: calls (evidence: `js/index.js`)
- Image rendering → Image canvas: draws (evidence: `js/index.js`)
- Image rendering → Image download: triggers (evidence: `js/index.js`)
- Visitor → Baybayin lessons: learns (evidence: `README.md`)
- Visitor → Games: plays (evidence: `README.md`)
- Visitor → Worksheets: downloads
- Visitor → Resources: opens
- Visitor → New experience: visits
- Visitor → Downloads page: visits
- Visitor → Privacy page: visits
- Visitor → Terms page: visits