# mathewthomas2/skincare-product-recommender architecture

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

- Interactive diagram: https://gitdiagram.com/mathewthomas2/skincare-product-recommender
- Repository: https://github.com/mathewthomas2/skincare-product-recommender

## Overview

GlowGuide’s main workflow is a browser-based skin-image analysis followed by personalized product recommendations. The frontend sends an uploaded image to FastAPI; the backend validates and preprocesses it, runs skin-feature models, and returns a classification and explanatory text. The frontend then uses that classification together with questionnaire answers to filter its local product catalog. Backend internals and recommendation logic are based on sampled source; other README-described details are not expanded beyond available evidence.

Main entry points: [`SkinTypeClassification/app/app.py`](https://github.com/mathewthomas2/skincare-product-recommender/blob/main/SkinTypeClassification/app/app.py) (Upload and validation), [`Frontend/script.js`](https://github.com/mathewthomas2/skincare-product-recommender/blob/main/Frontend/script.js) (Upload and results flow), [`Frontend/index.html`](https://github.com/mathewthomas2/skincare-product-recommender/blob/main/Frontend/index.html) (GlowGuide interface), [`SkinTypeClassification/app/preprocess_image.py`](https://github.com/mathewthomas2/skincare-product-recommender/blob/main/SkinTypeClassification/app/preprocess_image.py) (Image preprocessing)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_web["Web experience"]
  node_webpage["GlowGuide interface<br/>[index.html]"]
  node_browserflow["Upload and results flow<br/>[script.js]"]
  node_questionnaire["Preference questionnaire<br/>[script.js]"]
  node_recommendations["Product recommendations<br/>[script.js]"]
end

subgraph group_api["Analysis API"]
  node_api["FastAPI service<br/>[app.py]"]
  node_upload["Upload and validation<br/>[app.py]"]
  node_skinmetrics["Skin image metrics<br/>[app.py]"]
  node_classification["Skin type result<br/>[app.py]"]
end

subgraph group_ml["Skin analysis"]
  node_preprocess["Image preprocessing"]
  node_oily["Oily/dry model<br/>[oily_dry_model.h5]"]
  node_pigmentation["Pigmentation model"]
  node_sensitivity["Sensitivity model"]
end

subgraph group_content["Analysis data"]
  node_skininfo["Skin type descriptions<br/>[text_info.json]"]
end

node_person(("Skin-care user"))

node_person -->|"uses"| node_webpage
node_webpage -->|"runs"| node_browserflow
node_browserflow -->|"submits image"| node_api
node_api -->|"dispatches"| node_upload
node_upload -->|"measures skin"| node_skinmetrics
node_upload -->|"preprocesses image"| node_preprocess
node_upload -->|"predicts oily/dry"| node_oily
node_upload -->|"predicts pigmentation"| node_pigmentation
node_upload -->|"predicts sensitivity"| node_sensitivity
node_upload -->|"reads description"| node_skininfo
node_upload -->|"assembles result"| node_classification
node_classification -->|"returns analysis"| node_browserflow
node_browserflow -->|"prefills answers"| node_questionnaire
node_person -->|"enters preferences"| node_questionnaire
node_questionnaire -->|"provides filters"| node_recommendations
node_recommendations -->|"shows suggestions"| node_person

click node_webpage "https://github.com/mathewthomas2/skincare-product-recommender/blob/main/Frontend/index.html"
click node_browserflow "https://github.com/mathewthomas2/skincare-product-recommender/blob/main/Frontend/script.js"
click node_questionnaire "https://github.com/mathewthomas2/skincare-product-recommender/blob/main/Frontend/script.js"
click node_recommendations "https://github.com/mathewthomas2/skincare-product-recommender/blob/main/Frontend/script.js"
click node_api "https://github.com/mathewthomas2/skincare-product-recommender/blob/main/SkinTypeClassification/app/app.py"
click node_upload "https://github.com/mathewthomas2/skincare-product-recommender/blob/main/SkinTypeClassification/app/app.py"
click node_skinmetrics "https://github.com/mathewthomas2/skincare-product-recommender/blob/main/SkinTypeClassification/app/app.py"
click node_preprocess "https://github.com/mathewthomas2/skincare-product-recommender/blob/main/SkinTypeClassification/app/preprocess_image.py"
click node_oily "https://github.com/mathewthomas2/skincare-product-recommender/blob/main/SkinTypeClassification/app/models/oily_dry_model.h5"
click node_pigmentation "https://github.com/mathewthomas2/skincare-product-recommender/blob/main/SkinTypeClassification/app/models/pigmented_nonpigmented_model.h5"
click node_sensitivity "https://github.com/mathewthomas2/skincare-product-recommender/blob/main/SkinTypeClassification/app/models/sensitive_resistant_model.h5"
click node_classification "https://github.com/mathewthomas2/skincare-product-recommender/blob/main/SkinTypeClassification/app/app.py"
click node_skininfo "https://github.com/mathewthomas2/skincare-product-recommender/blob/main/SkinTypeClassification/app/text_info.json"

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_webpage,node_browserflow,node_questionnaire,node_recommendations,node_person toneBlue
class node_api,node_upload,node_skinmetrics,node_classification toneAmber
class node_preprocess,node_oily,node_pigmentation,node_sensitivity toneMint
class node_skininfo toneRose
```

## Components

### Web experience

- [GlowGuide interface](https://github.com/mathewthomas2/skincare-product-recommender/blob/main/Frontend/index.html): `Frontend/index.html`
- [Upload and results flow](https://github.com/mathewthomas2/skincare-product-recommender/blob/main/Frontend/script.js): `Frontend/script.js`
- [Preference questionnaire](https://github.com/mathewthomas2/skincare-product-recommender/blob/main/Frontend/script.js): `Frontend/script.js`
- [Product recommendations](https://github.com/mathewthomas2/skincare-product-recommender/blob/main/Frontend/script.js): `Frontend/script.js`

### Analysis API

- [FastAPI service](https://github.com/mathewthomas2/skincare-product-recommender/blob/main/SkinTypeClassification/app/app.py): `SkinTypeClassification/app/app.py`
- [Upload and validation](https://github.com/mathewthomas2/skincare-product-recommender/blob/main/SkinTypeClassification/app/app.py): `SkinTypeClassification/app/app.py`
- [Skin image metrics](https://github.com/mathewthomas2/skincare-product-recommender/blob/main/SkinTypeClassification/app/app.py): `SkinTypeClassification/app/app.py`
- [Skin type result](https://github.com/mathewthomas2/skincare-product-recommender/blob/main/SkinTypeClassification/app/app.py): `SkinTypeClassification/app/app.py`

### Skin analysis

- [Image preprocessing](https://github.com/mathewthomas2/skincare-product-recommender/blob/main/SkinTypeClassification/app/preprocess_image.py): `SkinTypeClassification/app/preprocess_image.py`
- [Oily/dry model](https://github.com/mathewthomas2/skincare-product-recommender/blob/main/SkinTypeClassification/app/models/oily_dry_model.h5): `SkinTypeClassification/app/models/oily_dry_model.h5`
- [Pigmentation model](https://github.com/mathewthomas2/skincare-product-recommender/blob/main/SkinTypeClassification/app/models/pigmented_nonpigmented_model.h5): `SkinTypeClassification/app/models/pigmented_nonpigmented_model.h5`
- [Sensitivity model](https://github.com/mathewthomas2/skincare-product-recommender/blob/main/SkinTypeClassification/app/models/sensitive_resistant_model.h5): `SkinTypeClassification/app/models/sensitive_resistant_model.h5`

### Analysis data

- [Skin type descriptions](https://github.com/mathewthomas2/skincare-product-recommender/blob/main/SkinTypeClassification/app/text_info.json): `SkinTypeClassification/app/text_info.json`

### Other components

- **Skin-care user**

## Connections

- Skin-care user → GlowGuide interface: uses
- GlowGuide interface → Upload and results flow: runs
- Upload and results flow → FastAPI service: submits image
- FastAPI service → Upload and validation: dispatches
- Upload and validation → Skin image metrics: measures skin
- Upload and validation → Image preprocessing: preprocesses image
- Upload and validation → Oily/dry model: predicts oily/dry
- Upload and validation → Pigmentation model: predicts pigmentation
- Upload and validation → Sensitivity model: predicts sensitivity
- Upload and validation → Skin type descriptions: reads description
- Upload and validation → Skin type result: assembles result
- Skin type result → Upload and results flow: returns analysis
- Upload and results flow → Preference questionnaire: prefills answers
- Skin-care user → Preference questionnaire: enters preferences
- Preference questionnaire → Product recommendations: provides filters
- Product recommendations → Skin-care user: shows suggestions