Data visualization app by streamlit for H&M competition in kaggle.

competition page: https://www.kaggle.com/competitions/h-and-m-personalized-fashion-recommendations/

You can check the following information by selecting a customer

• Customer information
• Customer transactions
• Frequentry purchased articles images
• Recently purchased Articles images

You can check the following information by selecting a article

• Article information
• Article image

.
├── README.md
├── app.py
├── config.yaml
├── data
│   ├── images
│   ├── articles.csv
│   ├── customers.csv
│   └── transactions_train.csv
└── requirements.txt

Here I show how to build an environment. If you already have the competition project, simply prepare app.py and config.yaml in your project and set the data path in config.yaml.

1. Clone this repository

git clone https://github.com/kuto5046/handm_data_visualize_app.git

2. Make environment

First, create your favorite virtual development environment.(docker, venv, poetry etc...)

Then, run this command to install necessary libraries in your environment.

pip install -r requirements.txt

3. Prepare data

Prepare competition data in data folder. I show an example of using the kaggle api, but you can also download it manually.

cd data
kaggle competitions download -c h-and-m-personalized-fashion-recommendations
unzip h-and-m-personalized-fashion-recommendations.zip

run this command in your terminal

streamlit run app.py

Then connect to the output URL or localhost:8501

To change the settings about app, please edit config.yaml

common:
  data_dir: ./data/
  image_dir: ./data/images/

customers:
  min_purchased_count: 20  # Minimum purchases count for random customer selection
  num_sample: 10  # Number of image to show
  max_display_per_col: 5  # Maximum number of image to display per column