Klasifikasi Pipeline Model Hugging Face Berdasarkan Metadata Menggunakan Random Forest dan Logistic Regression

What Is This?

Next.js project for the final exam in Advanced Data Mining

Requirements

Make sure you have the following installed on your system:

Git (2.54.0 or newer)
Nodejs (24.16.0 or newer)

How To Run This Project (Locally)

1. Clone Repo

git clone http://forgejo-domain/bert093/DataMiningLanjut-UAS.git
cd DataMiningLanjut-UAS

2. Install package/dependency:

npm i

3. Run the development server:

npm run dev

4. Run the flask development server:

cd src/backend
flask run

Important

You must run the Next.js and Flask development servers simultaneously for this project to work (open two terminals at the same time).

An alternative method if you want to run this project with Docker (Recommended)

1. Install Docker

If you're using an Arch Linux-based distribution, you can install it directly by running:

sudo pacman -S docker docker-compose docker-buildx
sudo systemctl enable --now docker # (Enable docker service)
sudo usermod -aG docker $USER # (configure user permission)
newgrp docker # (applying changes. MUST RESTART after doing this)

2. Run the docker-compose.yaml

and then you can run Docker Compose with

docker compose up -d # (Running in the background)

3. See the server

you can see the server active in

http://localhost:3000 # Next.js
http://localhost:5000 # Flask

Tip

This method will run Next.js and Flask simultaneously. You can view the WSGI server (Flask) at: http://localhost:5000/

Click here if you want a full detail how to setup .venv and flask with custom directory

1. Create a virtual environment (venv)

python3 -m venv .venv

2. Activate the Environment

Windows

.venv/bin/activate

Linux (if using fish shell)

source .venv/bin/activate.fish

Create dir

Windows

cd src
mkdir backend
type nul > app.py

Linux

cd src
mkdir backend
touch app.py

Note

to deactivate the venv just simply type deactivate

Project Directories

├── src
│   ├── app
│   │   ├── components
│   │   │   ├── DataMiningMethods.tsx
│   │   │   ├── DatasetStats.tsx
│   │   │   ├── FetchData.tsx
│   │   │   ├── FileInput.tsx
│   │   │   └── PreprocessingButton.tsx
│   │   ├── globals.css
│   │   ├── layout.tsx
│   │   └── page.tsx
│   └── backend
│       ├── app.py
│       ├── dataset_uploads (example file if the user upload)
│       │   ├── dataset.csv
│       │   ├── dataset_original.csv
│       │   └── preprocessed_dataset.csv
│       ├── Dockerfile
│       ├── requirements.txt
│       ├── routes
│       │   ├── datamining_methods.py
│       │   ├── dataset.py
│       │   ├── dataset_stats.py
│       │   ├── preprocessing.py
│       │   └── show_data.py
│       └── trained_models (example file if the user training models)
│           ├── logistic_regression.pkl
│           └── random_forest.pkl
├── .dockerignore
├── .gitignore
├── docker-compose.yaml
├── Dockerfile
├── eslint.config.mjs
├── next.config.ts
├── package.json
├── package-lock.json
├── postcss.config.mjs
├── README.md
└── tsconfig.json

Note

You can achive this similar result by typing: tree -a -L 4 -I "node_modules|.git"

THIS ONLY WORK ON LINUX

References

Docker

• docs.docker.com - Use the env_file attribute
• hub.docker - python
• docs.docker.com - Define services in Docker Compose (annotations)
• docs.docker.com - Set environment variables within your container's environment

Flask

• flask.palletsprojects.com - Installation
• github.com/docker/awesome-compose - flask
• blog.appsignal.com - Deploy a Python Flask App to Render with Docker

Kaggle (dataset for this project)

• Hugging Face Models - 29 November 2023

Medium

• medium.com - Connecting a Flask Backend with a Next.js Frontend: A Complete Practical Guide
• medium.com - Set Up a Flask and Next.js Application with Docker
• medium.com - Simple Flask app with Docker
• medium.com - Understanding and Configuring Environment Variables in Next.js

PyPI

• pypy.org - flask-cors

StackOverflow

• stackoverflow.com/questions - How to Set NEXT_PUBLIC_* Environment Variables After Next.js Build in Docker?

Vercel (Next.js)

• vercel.com - Next.js Flask Starter
• github.com/vercel - Next.js Flask Starter
• github.com/vercel - next.js examples with docker .dockerignore
• nextjs.org/docs - output (standalone)
• github.com/vercel - Pass environment variables at run time in docker compose
• github.com/vercel - define-env.plugin.ts
• nextjs.org/docs - How to use environment variables in Next.js

Penting

• harvard-iacs-github.io - Class Imbalance: Random Forest vs SMOTE Classification
• medium.com/grabngoinfo - Balanced Weights For Imbalanced Classification
• stackoverflow.com/questions/49519409 - In the sklearn RandomForestClassifier
• scikit-learn.org - RandomForestClassifier
• scikit-learn.org - n_jobs
• scikit-learn.org - LogisticRegression