# colorrectalai/colorrectalai-proyect architecture

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

- Interactive diagram: https://gitdiagram.com/colorrectalai/colorrectalai-proyect
- Repository: https://github.com/colorrectalai/colorrectalai-proyect

## Overview

ColorrectalAI is an academic Vue application for exploring experimental colonoscopy-image interpretations. Visitors can view the public landing page or use demo login/registration, then reach a dashboard and select images for a simulated analysis and results review. Results can lead to visual comparison; interpretations are also represented in history and detail screens. There is no clinical model, backend authentication, or actual upload service. The route map and sampled files support the screen flow; unsampled view behavior is not inferred.

Main entry points: [`src/router/index.js`](https://github.com/colorrectalai/colorrectalai-proyect/blob/main/src/router/index.js) (Route map), [`src/views/HomeView.vue`](https://github.com/colorrectalai/colorrectalai-proyect/blob/main/src/views/HomeView.vue) (Public home), [`src/views/HistoryView.vue`](https://github.com/colorrectalai/colorrectalai-proyect/blob/main/src/views/HistoryView.vue) (Interpretation history), [`src/views/DetailView.vue`](https://github.com/colorrectalai/colorrectalai-proyect/blob/main/src/views/DetailView.vue) (Interpretation detail)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application shell"]
  node_bootstrap["Vue bootstrap<br/>[main.js]"]
  node_shell["App shell<br/>[App.vue]"]
  node_router["Route map<br/>[index.js]"]
  node_navigation["Main navigation<br/>[MainNav.vue]"]
  node_brand["Brand logo<br/>[BrandLogo.vue]"]
  node_pagehead["Page heading<br/>[PageHead.vue]"]
end

subgraph group_access["Public and access"]
  node_home["Public home<br/>[HomeView.vue]"]
  node_login["Demo login<br/>[LoginView.vue]"]
  node_register["Registration<br/>[RegisterView.vue]"]
  node_authlayout["Auth layout<br/>[AuthLayout.vue]"]
end

subgraph group_interpret["Interpretation workflow"]
  node_dashboard["Dashboard<br/>[DashboardView.vue]"]
  node_upload["Image selection<br/>[UploadView.vue]"]
  node_loading["Analysis interstitial<br/>[LoadingView.vue]"]
  node_results["Interpretation results<br/>[ResultsView.vue]"]
  node_comparison["Image comparison<br/>[CompareView.vue]"]
end

subgraph group_records["History and review"]
  node_history["Interpretation history<br/>[HistoryView.vue]"]
  node_historytable["History table<br/>[HistoryTable.vue]"]
  node_detail["Interpretation detail<br/>[DetailView.vue]"]
end

node_visitor(("Visitor"))

node_visitor -->|"opens"| node_home
node_bootstrap -->|"mounts"| node_shell
node_bootstrap -->|"installs"| node_router
node_shell -->|"renders routes"| node_router
node_shell -->|"renders"| node_navigation
node_router -->|"routes to"| node_home
node_router -->|"routes to"| node_dashboard
node_router -->|"routes to"| node_login
node_router -->|"routes to"| node_register
node_router -->|"routes to"| node_upload
node_router -->|"routes to"| node_loading
node_router -->|"routes to"| node_results
node_router -->|"routes to"| node_comparison
node_router -->|"routes to"| node_history
node_router -->|"routes to"| node_detail
node_navigation -->|"renders"| node_brand
node_home -->|"renders"| node_brand
node_login -->|"uses"| node_authlayout
node_register -->|"uses"| node_authlayout
node_loading -->|"renders"| node_brand
node_home -->|"links to"| node_register
node_home -->|"links to"| node_login
node_dashboard -->|"uses"| node_pagehead
node_dashboard -->|"renders"| node_historytable
node_upload -->|"continues to"| node_loading
node_results -->|"continues to"| node_comparison
node_history -->|"uses"| node_pagehead
node_history -->|"renders"| node_historytable
node_historytable -->|"links to"| node_detail
node_detail -->|"uses"| node_pagehead
node_history -->|"opens case"| node_detail

click node_bootstrap "https://github.com/colorrectalai/colorrectalai-proyect/blob/main/src/main.js"
click node_shell "https://github.com/colorrectalai/colorrectalai-proyect/blob/main/src/App.vue"
click node_router "https://github.com/colorrectalai/colorrectalai-proyect/blob/main/src/router/index.js"
click node_navigation "https://github.com/colorrectalai/colorrectalai-proyect/blob/main/src/components/MainNav.vue"
click node_brand "https://github.com/colorrectalai/colorrectalai-proyect/blob/main/src/components/BrandLogo.vue"
click node_home "https://github.com/colorrectalai/colorrectalai-proyect/blob/main/src/views/HomeView.vue"
click node_login "https://github.com/colorrectalai/colorrectalai-proyect/blob/main/src/views/LoginView.vue"
click node_register "https://github.com/colorrectalai/colorrectalai-proyect/blob/main/src/views/RegisterView.vue"
click node_authlayout "https://github.com/colorrectalai/colorrectalai-proyect/blob/main/src/components/AuthLayout.vue"
click node_dashboard "https://github.com/colorrectalai/colorrectalai-proyect/blob/main/src/views/DashboardView.vue"
click node_upload "https://github.com/colorrectalai/colorrectalai-proyect/blob/main/src/views/UploadView.vue"
click node_loading "https://github.com/colorrectalai/colorrectalai-proyect/blob/main/src/views/LoadingView.vue"
click node_results "https://github.com/colorrectalai/colorrectalai-proyect/blob/main/src/views/ResultsView.vue"
click node_comparison "https://github.com/colorrectalai/colorrectalai-proyect/blob/main/src/views/CompareView.vue"
click node_history "https://github.com/colorrectalai/colorrectalai-proyect/blob/main/src/views/HistoryView.vue"
click node_historytable "https://github.com/colorrectalai/colorrectalai-proyect/blob/main/src/components/HistoryTable.vue"
click node_detail "https://github.com/colorrectalai/colorrectalai-proyect/blob/main/src/views/DetailView.vue"
click node_pagehead "https://github.com/colorrectalai/colorrectalai-proyect/blob/main/src/components/PageHead.vue"

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_bootstrap,node_shell,node_router,node_navigation,node_brand,node_pagehead toneBlue
class node_home,node_login,node_register,node_authlayout toneAmber
class node_dashboard,node_upload,node_loading,node_results,node_comparison toneMint
class node_history,node_historytable,node_detail toneRose
class node_visitor toneIndigo
```

## Components

### Application shell

- [Vue bootstrap](https://github.com/colorrectalai/colorrectalai-proyect/blob/main/src/main.js): `src/main.js`
- [App shell](https://github.com/colorrectalai/colorrectalai-proyect/blob/main/src/App.vue): `src/App.vue`
- [Route map](https://github.com/colorrectalai/colorrectalai-proyect/blob/main/src/router/index.js): `src/router/index.js`
- [Main navigation](https://github.com/colorrectalai/colorrectalai-proyect/blob/main/src/components/MainNav.vue): `src/components/MainNav.vue`
- [Brand logo](https://github.com/colorrectalai/colorrectalai-proyect/blob/main/src/components/BrandLogo.vue): `src/components/BrandLogo.vue`
- [Page heading](https://github.com/colorrectalai/colorrectalai-proyect/blob/main/src/components/PageHead.vue): `src/components/PageHead.vue`

### Public and access

- [Public home](https://github.com/colorrectalai/colorrectalai-proyect/blob/main/src/views/HomeView.vue): `src/views/HomeView.vue`
- [Demo login](https://github.com/colorrectalai/colorrectalai-proyect/blob/main/src/views/LoginView.vue): `src/views/LoginView.vue`
- [Registration](https://github.com/colorrectalai/colorrectalai-proyect/blob/main/src/views/RegisterView.vue): `src/views/RegisterView.vue`
- [Auth layout](https://github.com/colorrectalai/colorrectalai-proyect/blob/main/src/components/AuthLayout.vue): `src/components/AuthLayout.vue`

### Interpretation workflow

- [Dashboard](https://github.com/colorrectalai/colorrectalai-proyect/blob/main/src/views/DashboardView.vue): `src/views/DashboardView.vue`
- [Image selection](https://github.com/colorrectalai/colorrectalai-proyect/blob/main/src/views/UploadView.vue): `src/views/UploadView.vue`
- [Analysis interstitial](https://github.com/colorrectalai/colorrectalai-proyect/blob/main/src/views/LoadingView.vue): `src/views/LoadingView.vue`
- [Interpretation results](https://github.com/colorrectalai/colorrectalai-proyect/blob/main/src/views/ResultsView.vue): `src/views/ResultsView.vue`
- [Image comparison](https://github.com/colorrectalai/colorrectalai-proyect/blob/main/src/views/CompareView.vue): `src/views/CompareView.vue`

### History and review

- [Interpretation history](https://github.com/colorrectalai/colorrectalai-proyect/blob/main/src/views/HistoryView.vue): `src/views/HistoryView.vue`
- [History table](https://github.com/colorrectalai/colorrectalai-proyect/blob/main/src/components/HistoryTable.vue): `src/components/HistoryTable.vue`
- [Interpretation detail](https://github.com/colorrectalai/colorrectalai-proyect/blob/main/src/views/DetailView.vue): `src/views/DetailView.vue`

### Other components

- **Visitor**

## Connections

- Visitor → Public home: opens (evidence: `README.md`)
- Vue bootstrap → App shell: mounts (evidence: `src/main.js`)
- Vue bootstrap → Route map: installs (evidence: `src/main.js`)
- App shell → Route map: renders routes (evidence: `src/App.vue`)
- App shell → Main navigation: renders (evidence: `src/App.vue`)
- Route map → Public home: routes to (evidence: `src/router/index.js`)
- Route map → Dashboard: routes to (evidence: `src/router/index.js`)
- Route map → Demo login: routes to (evidence: `src/router/index.js`)
- Route map → Registration: routes to (evidence: `src/router/index.js`)
- Route map → Image selection: routes to (evidence: `src/router/index.js`)
- Route map → Analysis interstitial: routes to (evidence: `src/router/index.js`)
- Route map → Interpretation results: routes to (evidence: `src/router/index.js`)
- Route map → Image comparison: routes to (evidence: `src/router/index.js`)
- Route map → Interpretation history: routes to (evidence: `src/router/index.js`)
- Route map → Interpretation detail: routes to (evidence: `src/router/index.js`)
- Main navigation → Brand logo: renders (evidence: `src/components/MainNav.vue`)
- Public home → Brand logo: renders (evidence: `src/views/HomeView.vue`)
- Demo login → Auth layout: uses (evidence: `src/views/LoginView.vue`)
- Registration → Auth layout: uses (evidence: `src/views/RegisterView.vue`)
- Analysis interstitial → Brand logo: renders (evidence: `src/views/LoadingView.vue`)
- Public home → Registration: links to (evidence: `src/views/HomeView.vue`)
- Public home → Demo login: links to (evidence: `src/views/HomeView.vue`)
- Dashboard → Page heading: uses (evidence: `src/views/DashboardView.vue`)
- Dashboard → History table: renders (evidence: `src/views/DashboardView.vue`)
- Image selection → Analysis interstitial: continues to (evidence: `src/views/UploadView.vue`)
- Interpretation results → Image comparison: continues to (evidence: `README.md`)
- Interpretation history → Page heading: uses (evidence: `src/views/HistoryView.vue`)
- Interpretation history → History table: renders (evidence: `src/views/HistoryView.vue`)
- History table → Interpretation detail: links to (evidence: `src/components/HistoryTable.vue`)
- Interpretation detail → Page heading: uses (evidence: `src/views/DetailView.vue`)
- Interpretation history → Interpretation detail: opens case (evidence: `README.md`)