# oguzdelioglu/thumbnailgenerator architecture

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

- Interactive diagram: https://gitdiagram.com/oguzdelioglu/thumbnailgenerator
- Repository: https://github.com/oguzdelioglu/thumbnailgenerator

## Overview

Thumbnail Studio is a browser-based bilingual YouTube thumbnail prompt generator. Creators choose a reference-photo or random-character mode, configure visual attributes and layout, generate a prompt, then copy it into an AI image tool. The app also offers preset configurations, canvas preview and positioning, font selection, favorites, and local prompt history. The excerpts show the app coordinating rendering and preview, plus concrete state, storage, localization, favorites, and font interactions; generator and history implementation details are not sampled, so their internal wiring is left limited.

Main entry points: [`js/app.js`](https://github.com/oguzdelioglu/thumbnailgenerator/blob/main/js/app.js) (App coordinator), [`js/modules/ui/canvas.js`](https://github.com/oguzdelioglu/thumbnailgenerator/blob/main/js/modules/ui/canvas.js) (Canvas preview), [`js/modules/features/fonts.js`](https://github.com/oguzdelioglu/thumbnailgenerator/blob/main/js/modules/features/fonts.js) (Font selector), [`js/modules/utils/helpers.js`](https://github.com/oguzdelioglu/thumbnailgenerator/blob/main/js/modules/utils/helpers.js) (Settings and utilities)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_experience["Creator experience"]
  node_page["Studio page<br/>[index.html]"]
  node_app["App coordinator<br/>[app.js]"]
end

subgraph group_prompt["Prompt composition"]
  node_generator["Prompt generator<br/>[generator.js]"]
  node_datasets["Prompt datasets<br/>[index.js]"]
  node_presets["Preset configurations<br/>[presets.js]"]
  node_fonts["Font selector<br/>[fonts.js]"]
end

subgraph group_state["State and persistence"]
  node_state["Application state<br/>[state.js]"]
  node_favorites["Favorites<br/>[favorites.js]"]
  node_history["Prompt history<br/>[history.js]"]
  node_storage["Storage operations<br/>[storage.js]"]
end

subgraph group_presentation["Preview and localization"]
  node_renderer["UI renderer<br/>[renderer.js]"]
  node_canvas["Canvas preview<br/>[canvas.js]"]
  node_helpers["Settings and utilities<br/>[helpers.js]"]
  node_i18n["Localization<br/>[index.js]"]
  node_locales["Locale strings<br/>[en.js]"]
end

node_creator(("Creator"))
node_ai_tool(("AI image tool"))
node_browser_storage[("Browser localStorage")]
node_google_fonts(("Google Fonts"))

node_creator -->|"uses"| node_page
node_page -->|"starts"| node_app
node_app -->|"updates UI"| node_renderer
node_app -->|"draws preview"| node_canvas
node_app -->|"gets layouts"| node_presets
node_app -->|"calculates stats"| node_generator
node_renderer -->|"updates state"| node_state
node_renderer -->|"translates UI"| node_i18n
node_i18n -->|"reads strings"| node_locales
node_generator -->|"uses options"| node_datasets
node_canvas -->|"reads layout"| node_state
node_canvas -->|"reads content"| node_datasets
node_canvas -->|"gets selected font"| node_fonts
node_fonts -->|"refreshes preview"| node_canvas
node_fonts -.->|"loads fonts"| node_google_fonts
node_helpers -->|"reads settings"| node_state
node_helpers -->|"gets or sets font"| node_fonts
node_favorites -->|"gets settings"| node_helpers
node_favorites -->|"manages favorites"| node_state
node_favorites -->|"saves favorites"| node_storage
node_storage -->|"reads or writes"| node_browser_storage
node_history -->|"persists history"| node_storage
node_app -->|"copies prompt"| node_helpers
node_creator -->|"pastes prompt"| node_ai_tool

click node_page "https://github.com/oguzdelioglu/thumbnailgenerator/blob/main/index.html"
click node_app "https://github.com/oguzdelioglu/thumbnailgenerator/blob/main/js/app.js"
click node_generator "https://github.com/oguzdelioglu/thumbnailgenerator/blob/main/js/modules/features/generator.js"
click node_datasets "https://github.com/oguzdelioglu/thumbnailgenerator/blob/main/js/data/index.js"
click node_presets "https://github.com/oguzdelioglu/thumbnailgenerator/blob/main/js/modules/core/presets.js"
click node_fonts "https://github.com/oguzdelioglu/thumbnailgenerator/blob/main/js/modules/features/fonts.js"
click node_renderer "https://github.com/oguzdelioglu/thumbnailgenerator/blob/main/js/modules/ui/renderer.js"
click node_canvas "https://github.com/oguzdelioglu/thumbnailgenerator/blob/main/js/modules/ui/canvas.js"
click node_helpers "https://github.com/oguzdelioglu/thumbnailgenerator/blob/main/js/modules/utils/helpers.js"
click node_i18n "https://github.com/oguzdelioglu/thumbnailgenerator/blob/main/js/i18n/index.js"
click node_locales "https://github.com/oguzdelioglu/thumbnailgenerator/blob/main/js/i18n/locales/en.js"
click node_state "https://github.com/oguzdelioglu/thumbnailgenerator/blob/main/js/modules/core/state.js"
click node_favorites "https://github.com/oguzdelioglu/thumbnailgenerator/blob/main/js/modules/features/favorites.js"
click node_history "https://github.com/oguzdelioglu/thumbnailgenerator/blob/main/js/modules/features/history.js"
click node_storage "https://github.com/oguzdelioglu/thumbnailgenerator/blob/main/js/modules/core/storage.js"

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_page,node_app toneBlue
class node_generator,node_datasets,node_presets,node_fonts,node_browser_storage toneAmber
class node_state,node_favorites,node_history,node_storage toneMint
class node_renderer,node_canvas,node_helpers,node_i18n,node_locales toneRose
class node_creator,node_ai_tool,node_google_fonts toneIndigo
```

## Components

### Creator experience

- [Studio page](https://github.com/oguzdelioglu/thumbnailgenerator/blob/main/index.html): `index.html`
- [App coordinator](https://github.com/oguzdelioglu/thumbnailgenerator/blob/main/js/app.js): `js/app.js`

### Prompt composition

- [Prompt generator](https://github.com/oguzdelioglu/thumbnailgenerator/blob/main/js/modules/features/generator.js): `js/modules/features/generator.js`
- [Prompt datasets](https://github.com/oguzdelioglu/thumbnailgenerator/blob/main/js/data/index.js): `js/data/index.js`
- [Preset configurations](https://github.com/oguzdelioglu/thumbnailgenerator/blob/main/js/modules/core/presets.js): `js/modules/core/presets.js`
- [Font selector](https://github.com/oguzdelioglu/thumbnailgenerator/blob/main/js/modules/features/fonts.js): `js/modules/features/fonts.js`

### State and persistence

- [Application state](https://github.com/oguzdelioglu/thumbnailgenerator/blob/main/js/modules/core/state.js): `js/modules/core/state.js`
- [Favorites](https://github.com/oguzdelioglu/thumbnailgenerator/blob/main/js/modules/features/favorites.js): `js/modules/features/favorites.js`
- [Prompt history](https://github.com/oguzdelioglu/thumbnailgenerator/blob/main/js/modules/features/history.js): `js/modules/features/history.js`
- [Storage operations](https://github.com/oguzdelioglu/thumbnailgenerator/blob/main/js/modules/core/storage.js): `js/modules/core/storage.js`

### Preview and localization

- [UI renderer](https://github.com/oguzdelioglu/thumbnailgenerator/blob/main/js/modules/ui/renderer.js): `js/modules/ui/renderer.js`
- [Canvas preview](https://github.com/oguzdelioglu/thumbnailgenerator/blob/main/js/modules/ui/canvas.js): `js/modules/ui/canvas.js`
- [Settings and utilities](https://github.com/oguzdelioglu/thumbnailgenerator/blob/main/js/modules/utils/helpers.js): `js/modules/utils/helpers.js`
- [Localization](https://github.com/oguzdelioglu/thumbnailgenerator/blob/main/js/i18n/index.js): `js/i18n/index.js`
- [Locale strings](https://github.com/oguzdelioglu/thumbnailgenerator/blob/main/js/i18n/locales/en.js): `js/i18n/locales/en.js`

### Other components

- **Creator**
- **AI image tool**
- **Browser localStorage**
- **Google Fonts**

## Connections

- Creator → Studio page: uses
- Studio page → App coordinator: starts
- App coordinator → UI renderer: updates UI
- App coordinator → Canvas preview: draws preview
- App coordinator → Preset configurations: gets layouts
- App coordinator → Prompt generator: calculates stats
- UI renderer → Application state: updates state
- UI renderer → Localization: translates UI
- Localization → Locale strings: reads strings
- Prompt generator → Prompt datasets: uses options
- Canvas preview → Application state: reads layout
- Canvas preview → Prompt datasets: reads content
- Canvas preview → Font selector: gets selected font
- Font selector → Canvas preview: refreshes preview
- Font selector → Google Fonts: loads fonts
- Settings and utilities → Application state: reads settings
- Settings and utilities → Font selector: gets or sets font
- Favorites → Settings and utilities: gets settings
- Favorites → Application state: manages favorites
- Favorites → Storage operations: saves favorites
- Storage operations → Browser localStorage: reads or writes
- Prompt history → Storage operations: persists history
- App coordinator → Settings and utilities: copies prompt
- Creator → AI image tool: pastes prompt