blueprint.md

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

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.