| # 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. |
|
|
