# suhassakri/laptop_price_prediction architecture

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

- Interactive diagram: https://gitdiagram.com/suhassakri/laptop_price_prediction
- Repository: https://github.com/suhassakri/laptop_price_prediction

## Overview

This repository is a laptop price prediction and recommendation product with two alternative user-facing implementations. In the Flask workflow, users enter specifications or preferences in the browser; the JavaScript requests options, predictions, or recommendations from Flask, which uses the laptop dataset and (for predictions) a Random Forest model. The Streamlit version provides the same two capabilities in a single app. The README documents the features of both versions; sampled source confirms their implementations and shows no separate model or service layer.

Main entry points: [`static/script.js`](https://github.com/suhassakri/laptop_price_prediction/blob/main/static/script.js) (Browser interactions), [`streamlit_app.py`](https://github.com/suhassakri/laptop_price_prediction/blob/main/streamlit_app.py) (Streamlit interface), [`laptops.csv`](https://github.com/suhassakri/laptop_price_prediction/blob/main/laptops.csv) (Laptop dataset), [`app.py`](https://github.com/suhassakri/laptop_price_prediction/blob/main/app.py) (Flask application)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_flask["Flask version"]
  node_webpage["Flask page<br/>[index.html]"]
  node_browser["Browser interactions<br/>[script.js]"]
  node_flask_app["Flask application<br/>[app.py]"]
  node_options["Options endpoint<br/>[app.py]"]
  node_prediction["Prediction endpoint<br/>[app.py]"]
  node_recommendation["Recommendation endpoint<br/>[app.py]"]
end

subgraph group_streamlit["Streamlit version"]
  node_streamlit_app["Streamlit interface<br/>[streamlit_app.py]"]
  node_streamlit_prediction["Streamlit prediction<br/>[streamlit_app.py]"]
  node_streamlit_recommendation["Streamlit recommendations<br/>[streamlit_app.py]"]
end

subgraph group_ml["Data and model"]
  node_dataset["Laptop dataset<br/>[laptops.csv]"]
  node_flask_training["Flask model training<br/>[app.py]"]
  node_flask_model["Flask Random Forest<br/>[app.py]"]
  node_streamlit_training["Streamlit model training<br/>[streamlit_app.py]"]
  node_streamlit_model["Streamlit Random Forest<br/>[streamlit_app.py]"]
end

node_user(("Laptop buyer"))

node_user -->|"opens"| node_webpage
node_webpage -->|"loads"| node_browser
node_browser -->|"requests options"| node_options
node_options -->|"returns options"| node_browser
node_browser -->|"posts specifications"| node_prediction
node_prediction -->|"returns prediction"| node_browser
node_browser -->|"posts preferences"| node_recommendation
node_recommendation -->|"returns results"| node_browser
node_flask_app -->|"renders"| node_webpage
node_flask_app -->|"loads"| node_dataset
node_flask_app -->|"trains"| node_flask_training
node_flask_training -->|"fits"| node_flask_model
node_prediction -->|"predicts with"| node_flask_model
node_recommendation -->|"filters and ranks"| node_dataset
node_user -->|"uses"| node_streamlit_app
node_streamlit_app -->|"loads"| node_dataset
node_streamlit_app -->|"trains"| node_streamlit_training
node_streamlit_training -->|"fits"| node_streamlit_model
node_streamlit_app -->|"collects inputs"| node_streamlit_prediction
node_streamlit_prediction -->|"predicts with"| node_streamlit_model
node_streamlit_app -->|"collects preferences"| node_streamlit_recommendation
node_streamlit_recommendation -->|"filters and ranks"| node_dataset

click node_webpage "https://github.com/suhassakri/laptop_price_prediction/blob/main/templates/index.html"
click node_browser "https://github.com/suhassakri/laptop_price_prediction/blob/main/static/script.js"
click node_flask_app "https://github.com/suhassakri/laptop_price_prediction/blob/main/app.py"
click node_options "https://github.com/suhassakri/laptop_price_prediction/blob/main/app.py"
click node_prediction "https://github.com/suhassakri/laptop_price_prediction/blob/main/app.py"
click node_recommendation "https://github.com/suhassakri/laptop_price_prediction/blob/main/app.py"
click node_streamlit_app "https://github.com/suhassakri/laptop_price_prediction/blob/main/streamlit_app.py"
click node_streamlit_prediction "https://github.com/suhassakri/laptop_price_prediction/blob/main/streamlit_app.py"
click node_streamlit_recommendation "https://github.com/suhassakri/laptop_price_prediction/blob/main/streamlit_app.py"
click node_dataset "https://github.com/suhassakri/laptop_price_prediction/blob/main/laptops.csv"
click node_flask_training "https://github.com/suhassakri/laptop_price_prediction/blob/main/app.py"
click node_flask_model "https://github.com/suhassakri/laptop_price_prediction/blob/main/app.py"
click node_streamlit_training "https://github.com/suhassakri/laptop_price_prediction/blob/main/streamlit_app.py"
click node_streamlit_model "https://github.com/suhassakri/laptop_price_prediction/blob/main/streamlit_app.py"

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_browser,node_flask_app,node_options,node_prediction,node_recommendation toneBlue
class node_streamlit_app,node_streamlit_prediction,node_streamlit_recommendation toneAmber
class node_dataset,node_flask_training,node_flask_model,node_streamlit_training,node_streamlit_model toneMint
class node_user toneIndigo
```

## Components

### Flask version

- [Flask page](https://github.com/suhassakri/laptop_price_prediction/blob/main/templates/index.html): `templates/index.html`
- [Browser interactions](https://github.com/suhassakri/laptop_price_prediction/blob/main/static/script.js): `static/script.js`
- [Flask application](https://github.com/suhassakri/laptop_price_prediction/blob/main/app.py): `app.py`
- [Options endpoint](https://github.com/suhassakri/laptop_price_prediction/blob/main/app.py): `app.py`
- [Prediction endpoint](https://github.com/suhassakri/laptop_price_prediction/blob/main/app.py): `app.py`
- [Recommendation endpoint](https://github.com/suhassakri/laptop_price_prediction/blob/main/app.py): `app.py`

### Streamlit version

- [Streamlit interface](https://github.com/suhassakri/laptop_price_prediction/blob/main/streamlit_app.py): `streamlit_app.py`
- [Streamlit prediction](https://github.com/suhassakri/laptop_price_prediction/blob/main/streamlit_app.py): `streamlit_app.py`
- [Streamlit recommendations](https://github.com/suhassakri/laptop_price_prediction/blob/main/streamlit_app.py): `streamlit_app.py`

### Data and model

- [Laptop dataset](https://github.com/suhassakri/laptop_price_prediction/blob/main/laptops.csv): `laptops.csv`
- [Flask model training](https://github.com/suhassakri/laptop_price_prediction/blob/main/app.py): `app.py`
- [Flask Random Forest](https://github.com/suhassakri/laptop_price_prediction/blob/main/app.py): `app.py`
- [Streamlit model training](https://github.com/suhassakri/laptop_price_prediction/blob/main/streamlit_app.py): `streamlit_app.py`
- [Streamlit Random Forest](https://github.com/suhassakri/laptop_price_prediction/blob/main/streamlit_app.py): `streamlit_app.py`

### Other components

- **Laptop buyer**

## Connections

- Laptop buyer → Flask page: opens
- Flask page → Browser interactions: loads
- Browser interactions → Options endpoint: requests options
- Options endpoint → Browser interactions: returns options
- Browser interactions → Prediction endpoint: posts specifications
- Prediction endpoint → Browser interactions: returns prediction
- Browser interactions → Recommendation endpoint: posts preferences
- Recommendation endpoint → Browser interactions: returns results
- Flask application → Flask page: renders
- Flask application → Laptop dataset: loads
- Flask application → Flask model training: trains
- Flask model training → Flask Random Forest: fits
- Prediction endpoint → Flask Random Forest: predicts with
- Recommendation endpoint → Laptop dataset: filters and ranks
- Laptop buyer → Streamlit interface: uses
- Streamlit interface → Laptop dataset: loads
- Streamlit interface → Streamlit model training: trains
- Streamlit model training → Streamlit Random Forest: fits
- Streamlit interface → Streamlit prediction: collects inputs
- Streamlit prediction → Streamlit Random Forest: predicts with
- Streamlit interface → Streamlit recommendations: collects preferences
- Streamlit recommendations → Laptop dataset: filters and ranks