# abdurrahim2705/cat-dog-app architecture

> Architecture diagram of the GitHub repository abdurrahim2705/cat-dog-app, 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/abdurrahim2705/cat-dog-app
- Repository: https://github.com/abdurrahim2705/cat-dog-app

## Overview

This is a cat-versus-dog image-classification application. A user selects an image in the React interface, previews it, and submits it to the FastAPI prediction endpoint; the endpoint decodes and preprocesses the image, runs the trained CNN, and returns a class and confidence for display. The graph separates the browser workflow, API/inference stages, and model artifact. The React-to-API request and inference behavior are visible in sampled source; other frontend details are represented only where supported by the excerpt.

Main entry points: [`app.py`](https://github.com/abdurrahim2705/cat-dog-app/blob/main/app.py) (Prediction route), [`my-react-app/src/App.jsx`](https://github.com/abdurrahim2705/cat-dog-app/blob/main/my-react-app/src/App.jsx) (Select and preview), [`my-react-app/src/main.jsx`](https://github.com/abdurrahim2705/cat-dog-app/blob/main/my-react-app/src/main.jsx) (React mount), [`cat_dog_cnn.pth`](https://github.com/abdurrahim2705/cat-dog-app/blob/main/cat_dog_cnn.pth) (Trained weights)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_frontend["Browser interface"]
  node_app_mount["React mount<br/>[main.jsx]"]
  node_image_ui["Select and preview<br/>[App.jsx]"]
  node_upload_results["Upload and results<br/>[App.jsx]"]
end

subgraph group_api["Prediction API"]
  node_predict_route["Prediction route<br/>[app.py]"]
  node_image_preprocess["Decode and transform<br/>[app.py]"]
end

subgraph group_model["Classifier model"]
  node_cnn["Cat-dog CNN<br/>[app.py]"]
  node_trained_weights["Trained weights<br/>[cat_dog_cnn.pth]"]
end

node_user(("Image user"))

node_user -->|"selects image"| node_image_ui
node_app_mount -->|"renders"| node_image_ui
node_image_ui -->|"provides selection"| node_upload_results
node_upload_results -->|"POSTs image"| node_predict_route
node_predict_route -->|"decodes and transforms"| node_image_preprocess
node_predict_route -->|"runs inference"| node_cnn
node_cnn -->|"loads parameters"| node_trained_weights
node_predict_route -->|"returns prediction"| node_upload_results

click node_app_mount "https://github.com/abdurrahim2705/cat-dog-app/blob/main/my-react-app/src/main.jsx"
click node_image_ui "https://github.com/abdurrahim2705/cat-dog-app/blob/main/my-react-app/src/App.jsx"
click node_upload_results "https://github.com/abdurrahim2705/cat-dog-app/blob/main/my-react-app/src/App.jsx"
click node_predict_route "https://github.com/abdurrahim2705/cat-dog-app/blob/main/app.py"
click node_image_preprocess "https://github.com/abdurrahim2705/cat-dog-app/blob/main/app.py"
click node_cnn "https://github.com/abdurrahim2705/cat-dog-app/blob/main/app.py"
click node_trained_weights "https://github.com/abdurrahim2705/cat-dog-app/blob/main/cat_dog_cnn.pth"

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_mount,node_image_ui,node_upload_results,node_user toneBlue
class node_predict_route,node_image_preprocess toneAmber
class node_cnn,node_trained_weights toneMint
```

## Components

### Browser interface

- [React mount](https://github.com/abdurrahim2705/cat-dog-app/blob/main/my-react-app/src/main.jsx): `my-react-app/src/main.jsx`
- [Select and preview](https://github.com/abdurrahim2705/cat-dog-app/blob/main/my-react-app/src/App.jsx): `my-react-app/src/App.jsx`
- [Upload and results](https://github.com/abdurrahim2705/cat-dog-app/blob/main/my-react-app/src/App.jsx): `my-react-app/src/App.jsx`

### Prediction API

- [Prediction route](https://github.com/abdurrahim2705/cat-dog-app/blob/main/app.py): `app.py`
- [Decode and transform](https://github.com/abdurrahim2705/cat-dog-app/blob/main/app.py): `app.py`

### Classifier model

- [Cat-dog CNN](https://github.com/abdurrahim2705/cat-dog-app/blob/main/app.py): `app.py`
- [Trained weights](https://github.com/abdurrahim2705/cat-dog-app/blob/main/cat_dog_cnn.pth): `cat_dog_cnn.pth`

### Other components

- **Image user**

## Connections

- Image user → Select and preview: selects image (evidence: `my-react-app/src/App.jsx`)
- React mount → Select and preview: renders (evidence: `my-react-app/src/main.jsx`)
- Select and preview → Upload and results: provides selection (evidence: `my-react-app/src/App.jsx`)
- Upload and results → Prediction route: POSTs image (evidence: `my-react-app/src/App.jsx`)
- Prediction route → Decode and transform: decodes and transforms (evidence: `app.py`)
- Prediction route → Cat-dog CNN: runs inference (evidence: `app.py`)
- Cat-dog CNN → Trained weights: loads parameters (evidence: `app.py`)
- Prediction route → Upload and results: returns prediction (evidence: `app.py`)