# MindCheck Blueprint

Dokumen ini menjelaskan struktur lengkap dan arsitektur dari repositori MindCheck. Aplikasi ini dibagi menjadi dua bagian utama: **Frontend (Next.js)** dan **Backend (Flask + PyTorch)**.

---

## 📂 Struktur Repositori

```text
NLP_AOL/
├── NOTEBOOK&MODEL/
│   ├── model.pt                     # 🧠 Model Weights: Hasil fine-tuning MPNet (multi-output regressor)
│   └── Copy_of_NLP_AOL.ipynb        # 📓 Jupyter Notebook: Berisi tahapan EDA, ekstraksi fitur DAIC-WOZ, training, dan evaluasi model
│
├── backend/
│   ├── app.py                       # ⚙️ Flask API Server: Menjalankan model AI dan memproses teks input
│   └── requirements.txt             # 📦 Python Dependencies: Daftar library untuk backend (torch, flask, transformers, dll)
│
├── mindcheck-web/                   # 🖥️ Frontend Directory (Next.js)
│   ├── node_modules/                # 📦 NPM Dependencies: Folder hasil instalasi library JavaScript/TypeScript (jangan dimodifikasi manual)
│   ├── public/                      # 🖼️ Static Assets: Berisi gambar, icon, font, atau file statis lain yang dapat diakses publik
│   ├── tailwind.config.ts           # 🎨 Konfigurasi Tailwind CSS (warna, font, breakpoint)
│   ├── tsconfig.json                # 🛠️ Konfigurasi TypeScript
│   ├── package.json                 # 📜 Daftar dependencies JavaScript dan script npm (dev, build, start)
│   │
│   └── src/
│       └── app/                     # 🛣️ Next.js App Router
│           ├── globals.css          # 💅 Global CSS & Tailwind Directives
│           ├── layout.tsx           # 🧩 Root Layout: Struktur HTML utama yang menyelimuti semua halaman
│           ├── page.tsx             # 🏠 Landing Page (/)
│           │
│           ├── chat/
│           │   └── page.tsx         # 💬 Chatbot Interface (/chat): UI interaktif untuk wawancara 8 pertanyaan
│           │
│           ├── result/
│           │   └── page.tsx         # 📊 Result Page (/result): Visualisasi skor PHQ-8, severity, dan rekomendasi
│           │
│           ├── history/
│           │   └── page.tsx         # 🕰️ History Page (/history): Menampilkan riwayat screening yang tersimpan di localStorage
│           │
│           └── api/
│               └── predict/
│                   └── route.ts     # 🔌 API Proxy: Meneruskan request dari frontend Next.js ke backend Flask di port 8000
│
├── README.md                        # 📖 Dokumentasi utama proyek
├── blueprint.md                     # 🗺️ Dokumentasi struktur direktori (file ini)
└── example_answers.md               # 📝 Skenario jawaban contoh untuk testing chatbot
```

---

## 🧩 Penjelasan Komponen

### 1. 🧠 AI Model (`NOTEBOOK&MODEL/model.pt`)
Ini adalah *core* kecerdasan buatan dari aplikasi. Model ini dibangun menggunakan arsitektur `sentence-transformers/all-mpnet-base-v2` yang telah di-finetune menggunakan dataset **DAIC-WOZ**.
Model menerima 2 bentuk input:
- **Teks transkrip** (di-tokenisasi menjadi `input_ids` dan `attention_mask` dengan strategi pemotongan Head-Tail).
- **Fitur Non-Verbal (NV)** berupa vektor 18 dimensi (rasio kata negatif, hitungan *filler words*, kecepatan bicara, dll).

Model ini bersifat **Multi-Output Regressor**, artinya ia langsung mengeluarkan 8 nilai prediksi secara bersamaan (satu untuk setiap item pertanyaan PHQ-8).

### 2. ⚙️ Backend API (`backend/`)
Ditulis menggunakan **Python** dan **Flask**. Bertugas sebagai jembatan antara aplikasi web dan model AI.
- Membaca request JSON berisi 8 jawaban teks dari user.
- Menggabungkannya menjadi satu transkrip panjang.
- Melakukan tokenisasi dan ekstraksi fitur menggunakan fungsi `extract_nv_features`.
- Menjalankan inferensi model PyTorch.
- Mengembalikan response JSON berisi array skor, skor total, kategori depresi (Minimal - Severe), dan daftar kata negatif/filler yang terdeteksi.
- Berjalan di **Port 8000** secara default untuk menghindari bentrok dengan port sistem operasi (seperti AirPlay macOS di port 5000).

### 3. 🖥️ Frontend Web (`mindcheck-web/`)
Ditulis menggunakan **Next.js 14 (App Router)**, **TypeScript**, dan **Tailwind CSS**.
- **`/` (Landing Page):** Penjelasan aplikasi, edukasi tentang apa itu tes PHQ-8, dan instruksi cara kerja.
- **`/chat` (Screening Interface):** Menyimulasikan wawancara klinis. User diwajibkan mengetik bebas untuk menjawab 8 pertanyaan terbuka. Terdapat sistem *fallback scoring* berbasis keyword & sentimen yang aktif otomatis jika backend AI sedang mati.
- **`/api/predict` (API Proxy):** Membantu mengatasi masalah CORS. Frontend tidak menembak langsung ke Flask, melainkan menembak ke *route internal* Next.js ini, yang kemudian meneruskannya ke Flask (`http://127.0.0.1:8000/predict`).
- **Data Storage:** Semua riwayat hasil prediksi disimpan secara lokal di browser menggunakan `localStorage` (`mindcheck_latest_result` dan `mindcheck_history`). Data anonim dan tidak ada database cloud yang digunakan demi privasi.