diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..20fa2d4
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,16 @@
+node_modules/
+dist/
+__pycache__/
+*.pyc
+.venv/
+venv/
+.env
+.env.*
+!.env.example
+*.db
+*.sqlite
+*.sqlite3
+*.csv
+web_slearn/src/data/
+web_slearn/public/data/
+api_slearn/model_store_backup_sebelum_perbaikan/
diff --git a/api_slearn/artifacts_slearn/README.txt b/api_slearn/artifacts_slearn/README.txt
new file mode 100644
index 0000000..9a81b12
--- /dev/null
+++ b/api_slearn/artifacts_slearn/README.txt
@@ -0,0 +1,46 @@
+ARTEFAK FINAL ANALISIS SENTIMEN S-LEARN
+=======================================
+
+1. Model yang digunakan:
+   Logistic Regression.
+
+2. Ekstraksi fitur:
+   TF-IDF yang sudah di-fit pada data training penelitian.
+
+3. Website TIDAK BOLEH melakukan:
+   - model.fit()
+   - tfidf.fit()
+   - tfidf.fit_transform()
+
+4. Untuk data baru:
+   preprocessing_slearn.preprocessing_kalimat_baru(teks)
+   -> tfidf.transform()
+   -> model.predict()
+
+5. Confidence:
+   Gunakan model.predict_proba().
+
+   Probabilitas kelas 0 = Negatif.
+   Probabilitas kelas 1 = Positif.
+
+   Confidence adalah probabilitas kelas
+   yang dipilih sebagai hasil prediksi.
+
+   Confidence BUKAN akurasi dan bukan
+   jaminan bahwa prediksi pasti benar.
+
+6. Untuk analisis CSV:
+   Seluruh komentar menggunakan preprocessing
+   yang sama, kemudian tfidf.transform(),
+   model.predict(), dan model.predict_proba().
+
+7. Jangan melakukan training ulang pada website.
+
+8. Gunakan versi library pada requirements.txt.
+
+9. Siapkan resource NLTK:
+   - punkt
+   - punkt_tab
+
+10. preprocessing_config.json merupakan
+    konfigurasi preprocessing final penelitian.
diff --git a/api_slearn/artifacts_slearn/kamus_normalisasi.joblib b/api_slearn/artifacts_slearn/kamus_normalisasi.joblib
new file mode 100644
index 0000000..634512f
Binary files /dev/null and b/api_slearn/artifacts_slearn/kamus_normalisasi.joblib differ
diff --git a/api_slearn/artifacts_slearn/metadata_model.json b/api_slearn/artifacts_slearn/metadata_model.json
new file mode 100644
index 0000000..ea905b8
--- /dev/null
+++ b/api_slearn/artifacts_slearn/metadata_model.json
@@ -0,0 +1,145 @@
+{
+  "nama_model": "Logistic Regression",
+  "total_data": 571,
+  "jumlah_sentimen_negatif": 379,
+  "jumlah_sentimen_positif": 192,
+  "jumlah_data_training": 456,
+  "jumlah_data_testing": 115,
+  "jumlah_fitur_tfidf": 675,
+  "akurasi": 0.9304347826086956,
+  "label_mapping": {
+    "0": "NEGATIF",
+    "1": "POSITIF"
+  },
+  "confusion_matrix": [
+    [
+      70,
+      6
+    ],
+    [
+      2,
+      37
+    ]
+  ],
+  "classification_report": {
+    "0": {
+      "precision": 0.9722222222222222,
+      "recall": 0.9210526315789473,
+      "f1-score": 0.9459459459459459,
+      "support": 76.0
+    },
+    "1": {
+      "precision": 0.8604651162790697,
+      "recall": 0.9487179487179487,
+      "f1-score": 0.9024390243902439,
+      "support": 39.0
+    },
+    "accuracy": 0.9304347826086956,
+    "macro avg": {
+      "precision": 0.9163436692506459,
+      "recall": 0.934885290148448,
+      "f1-score": 0.9241924851680949,
+      "support": 115.0
+    },
+    "weighted avg": {
+      "precision": 0.9343219862936748,
+      "recall": 0.9304347826086956,
+      "f1-score": 0.9311914247227079,
+      "support": 115.0
+    }
+  },
+  "split": {
+    "test_size": 0.2,
+    "random_state": 42,
+    "stratify": "label"
+  },
+  "preprocessing_order": [
+    "cleaning",
+    "case_folding",
+    "normalisasi",
+    "koreksi_normalisasi_validator",
+    "tokenisasi",
+    "hapus_stopword",
+    "stemming"
+  ],
+  "tfidf_parameters": {
+    "analyzer": "'word'",
+    "binary": "False",
+    "decode_error": "'strict'",
+    "dtype": "<class 'numpy.float64'>",
+    "encoding": "'utf-8'",
+    "input": "'content'",
+    "lowercase": "True",
+    "max_df": "1.0",
+    "max_features": "None",
+    "min_df": "1",
+    "ngram_range": "(1, 1)",
+    "norm": "None",
+    "preprocessor": "None",
+    "smooth_idf": "True",
+    "stop_words": "None",
+    "strip_accents": "None",
+    "sublinear_tf": "False",
+    "token_pattern": "'(?u)\\\\b\\\\w\\\\w+\\\\b'",
+    "tokenizer": "None",
+    "use_idf": "True",
+    "vocabulary": "None"
+  },
+  "logistic_regression_parameters": {
+    "C": 1.0,
+    "class_weight": null,
+    "dual": false,
+    "fit_intercept": true,
+    "intercept_scaling": 1,
+    "l1_ratio": null,
+    "max_iter": 1000,
+    "multi_class": "deprecated",
+    "n_jobs": null,
+    "penalty": "l2",
+    "random_state": null,
+    "solver": "lbfgs",
+    "tol": 0.0001,
+    "verbose": 0,
+    "warm_start": false
+  },
+  "confidence": {
+    "tersedia": true,
+    "sumber": "LogisticRegression.predict_proba",
+    "definisi": "Confidence adalah probabilitas pada kelas yang dipilih sebagai hasil prediksi model.",
+    "bukan": "Confidence bukan tingkat akurasi atau jaminan prediksi benar.",
+    "kelas": {
+      "0": "Probabilitas Negatif",
+      "1": "Probabilitas Positif"
+    }
+  },
+  "website": {
+    "training_ulang": false,
+    "tfidf_fit_ulang": false,
+    "gunakan_tfidf_transform": true,
+    "mendukung_prediksi_batch_csv": true,
+    "mendukung_predict_proba": true
+  },
+  "python_version": "3.13.16",
+  "library_versions": {
+    "scikit-learn": "1.6.1",
+    "numpy": "2.1.3",
+    "scipy": "1.16.3",
+    "pandas": "2.2.3",
+    "nltk": "3.9.1",
+    "Sastrawi": "1.0.1",
+    "joblib": "1.6.0"
+  },
+  "dibuat_pada_utc": "2026-10-08T23:04:35.996842+00:00",
+  "kamus_sumber_sha256": "ff82815802208fefc93f5ec2582b8b9d0137efb85719da559a6bd4be06f2638f",
+  "sha256_files": {
+    "requirements.txt": "669c113634d1c30c04e3a859d2cdfe4da162c1b6926d7248e44bab29608d3adb",
+    "README.txt": "95a299ee72388f64f2002c91536d770b090aa414b4d771b13d4b8bae2954a0ef",
+    "stopwords_final.joblib": "86fde7096c19c3e139e3afaecc97d558211001520ee2daef6c72a60df7d58bb0",
+    "preprocessing_slearn.py": "6797aef8198520720fe8db837346c97304aee2bc1f3870bbf4ac1fdb8b77ec44",
+    "kamus_alay_sumber.csv": "ff82815802208fefc93f5ec2582b8b9d0137efb85719da559a6bd4be06f2638f",
+    "tfidf_vectorizer.joblib": "59669b82757eca691cd48d33d39dd52c2ede5bc17724b882bd242782bdbca1d1",
+    "preprocessing_config.json": "704fa2d507aa2fc9ed5382dc675210dca80c816af921bd16d8ae9b4d4ba18ad0",
+    "kamus_normalisasi.joblib": "60b7e79bab04401cbd3cbbf2b0920512a37f6e5066aee729710157d16e1203e2",
+    "model_logistic_regression.joblib": "a7813f5b31ed2aa5e5b413a38bed0ec76e75dde714af93a0f7d1b9741c47f1fc"
+  }
+}
\ No newline at end of file
diff --git a/api_slearn/artifacts_slearn/model_logistic_regression.joblib b/api_slearn/artifacts_slearn/model_logistic_regression.joblib
new file mode 100644
index 0000000..62aefd4
Binary files /dev/null and b/api_slearn/artifacts_slearn/model_logistic_regression.joblib differ
diff --git a/api_slearn/artifacts_slearn/preprocessing_config.json b/api_slearn/artifacts_slearn/preprocessing_config.json
new file mode 100644
index 0000000..69dd0de
--- /dev/null
+++ b/api_slearn/artifacts_slearn/preprocessing_config.json
@@ -0,0 +1,5419 @@
+{
+  "kamus_normalisasi": {
+    "woww": "wow",
+    "aminn": "amin",
+    "met": "selamat",
+    "netaas": "menetas",
+    "keberpa": "keberapa",
+    "eeeehhhh": "eh",
+    "kata2nyaaa": "kata-katanya",
+    "hallo": "halo",
+    "kaka": "kakak",
+    "ka": "kak",
+    "daah": "dah",
+    "aaaaahhhh": "ah",
+    "yaa": "ya",
+    "smga": "semoga",
+    "slalu": "selalu",
+    "amiin": "amin",
+    "kk": "kakak",
+    "trus": "terus",
+    "sii": "sih",
+    "nyenengin": "menyenangkan",
+    "bgt": "banget",
+    "gemess": "gemas",
+    "akuuu": "aku",
+    "jgn": "jangan",
+    "udah": "sudah",
+    "gitu": "begitu",
+    "aja": "saja",
+    "gemesiin": "menggemaskan",
+    "menyenangkn": "menyenangkan",
+    "rb": "ribu",
+    "akau": "aku",
+    "saranin": "menyarankan",
+    "nemuin": "menemukan",
+    "yah": "ya",
+    "mnis2nya": "manis-manisnya",
+    "gtu": "begitu",
+    "tu": "itu",
+    "idolaa": "idola",
+    "bangett": "banget",
+    "kaakk": "kak",
+    "baaiikkk": "baik",
+    "telaatt": "telat",
+    "kaak": "kak",
+    "yg": "yang",
+    "lg": "lagi",
+    "skarang": "sekarang",
+    "sempet": "sempat",
+    "karna": "karena",
+    "ngga": "tidak",
+    "mantep": "mantap",
+    "loohhh": "loh",
+    "yeee": "ya",
+    "baguuuuus": "bagus",
+    "sampe": "sampai",
+    "ngikutin": "mengikuti",
+    "gayany": "gayanya",
+    "bnk": "bang",
+    "awaas": "awas",
+    "siip": "sip",
+    "abizzzz": "habis",
+    "kerrrrennnn": "keren",
+    "sayaa": "saya",
+    "pengen": "ingin",
+    "kpan": "kapan",
+    "sma": "sama",
+    "sdkit": "sedikit",
+    "bngt": "banget",
+    "lgu": "lagu",
+    "bener2": "benar-benar",
+    "kharismanya": "karismanya",
+    "aq": "aku",
+    "jdi": "jadi",
+    "lgi": "lagi",
+    "gk": "tidak",
+    "kek": "seperti",
+    "lgunya": "lagunya",
+    "kereeeeennnn": "keren",
+    "nyamain": "menyamakan",
+    "lakik": "laki",
+    "siippp": "sip",
+    "bkn": "bukan",
+    "nyangka": "menyangka",
+    "bangettt": "banget",
+    "kereeen": "keren",
+    "wihhhhhh": "wih",
+    "tp": "tapi",
+    "inget": "ingat",
+    "bingitsss": "banget",
+    "dmn": "dimana",
+    "bird": "biru",
+    "kaloo": "kalo",
+    "gimna": "bagaimana",
+    "tuuh": "tuh",
+    "nyebur": "mencebur",
+    "yng": "yang",
+    "dbuat": "dibuat",
+    "kn": "kan",
+    "org": "orang",
+    "pingin": "pengin",
+    "bangcat": "bangsat",
+    "yha": "ya",
+    "waoohhh": "wah",
+    "pngn": "pengin",
+    "tmpt": "tempat",
+    "dhe": "deh",
+    "indahhh": "indah",
+    "bgttt": "banget",
+    "tuhh": "tuh",
+    "berarto": "berarti",
+    "ga": "tidak",
+    "aamiin": "amin",
+    "amiiinn": "amin",
+    "dgn": "dengan",
+    "aminnnn2": "amin-amin",
+    "amiiiin": "amin",
+    "aminnn": "amin",
+    "amiend": "amien",
+    "yaaa": "ya",
+    "ameen": "amin",
+    "aminnnn": "amin",
+    "amiiinnn": "amin",
+    "ngomong": "mengomong",
+    "mamer": "memamerkan",
+    "keles": "kali",
+    "jelase": "jelas",
+    "liat": "lihat",
+    "uwakk": "uwak",
+    "ntar": "entar",
+    "bs": "bisa",
+    "gini": "begini",
+    "salfok": "salah fokus",
+    "njir": "anjir",
+    "piiink": "pink",
+    "astgfrullah": "astagfirullah",
+    "ko": "kok",
+    "cd": "celana dalam",
+    "gbs": "enggak bisa",
+    "bhs": "bahasa",
+    "yaaaaaa": "ya",
+    "gak": "tidak",
+    "bangshad": "bangsat",
+    "stagahhhh": "astaga",
+    "kpn": "kapan",
+    "iooo": "lo",
+    "dy": "dia",
+    "d": "di",
+    "mslh": "masalah",
+    "qt": "kita",
+    "plampiasannn": "pelampiasan",
+    "masalahh": "masalah",
+    "tohh": "toh",
+    "inghinn": "ingin",
+    "dhi": "di",
+    "mengherthii": "mengerti",
+    "yanckh": "yang",
+    "chelalyyu": "selalu",
+    "therchakitty": "tersakiti",
+    "mauuuuu": "mau",
+    "kaliii": "kali",
+    "bangat": "banget",
+    "bkin": "bikin",
+    "dongg": "dong",
+    "yokkk": "yuk",
+    "yu": "yuk",
+    "sweger": "segar",
+    "gantengg": "ganteng",
+    "bingiit": "banget",
+    "kebukaaa": "terbuka",
+    "tpi": "tetapi",
+    "keliatan": "terlihat",
+    "yakk": "ya",
+    "kayakk": "kayak",
+    "asliii": "asli",
+    "kyk": "seperti",
+    "cntiknya": "cantiknya",
+    "bat": "banget",
+    "ngeliatnya": "melihatnya",
+    "sll": "selalu",
+    "bet": "banget",
+    "njerr": "anjir",
+    "bingiiittttzzzz": "banget",
+    "k": "ke",
+    "klo": "kalau",
+    "dooong": "dong",
+    "masi": "masih",
+    "gni": "begini",
+    "hdk": "hendak",
+    "jugaa": "juga",
+    "mksud": "maksud",
+    "aj": "saja",
+    "tetep": "tetap",
+    "mbakx": "mbaknya",
+    "syantik": "cantik",
+    "kite": "kita",
+    "pa": "apa",
+    "mksd": "maksud",
+    "bejilbbnya": "berjilbabnya",
+    "masio": "masih",
+    "yahhh": "ya",
+    "makasih": "terima kasih",
+    "leh": "boleh",
+    "ugaaa": "juga",
+    "jerewi": "jerawat",
+    "ilang": "hilang",
+    "jilbabnyaah": "jilbabnya",
+    "yuuuk": "yuk",
+    "warnaaa": "warna",
+    "punyaaa": "punya",
+    "cantiik": "cantik",
+    "sukaaak": "suka",
+    "kebayanyaa": "kebayanya",
+    "mantes": "memantas",
+    "merekaaaa": "mereka",
+    "jugaaa": "juga",
+    "gilaaaa": "gila",
+    "tiga2nya": "tiga-tiganya",
+    "lucuu": "lucu",
+    "emessss": "gemas",
+    "ucullllll": "lucu",
+    "males": "malas",
+    "bangeettt": "banget",
+    "gemesshh": "gemas",
+    "apaaa": "apa",
+    "ampuunn": "ampun",
+    "ciuuuummmm": "cium",
+    "mbil": "sambil",
+    "ngmng": "mengomong",
+    "ngemeng": "mengomong",
+    "epe": "apa",
+    "seehh": "sih",
+    "yank": "sayang",
+    "ucul": "lucu",
+    "yahh": "ya",
+    "gw": "saya",
+    "ngakak": "mengakak",
+    "astagfirrullah": "astagfirullah",
+    "suerrr": "suer",
+    "mnta": "minta",
+    "syg": "sayang",
+    "ntik": "cantik",
+    "pny": "punya",
+    "dapet": "dapat",
+    "suru": "suruh",
+    "lucuuuu": "lucu",
+    "ketawakkkk": "ketawa",
+    "kyanya": "kayanya",
+    "bnget": "banget",
+    "nakutin": "menakutkan",
+    "malingg": "maling",
+    "cocokk": "cocok",
+    "niihh": "nih",
+    "imutttttt": "imut",
+    "satuuuuu": "satu",
+    "sesekk": "sesak",
+    "nafass": "nafas",
+    "bgtt": "banget",
+    "cintaaaaaaa": "cinta",
+    "lucuk": "lucu",
+    "ma": "sama",
+    "duluu": "dulu",
+    "megang": "memegang",
+    "kawinin": "mengawini",
+    "liatin": "perlihatkan",
+    "ny": "nya",
+    "bdan": "badan",
+    "nyaaa": "nya",
+    "gemesin": "menggemaskan",
+    "fotoin": "memfoto",
+    "ngaku": "mengaku",
+    "kaaa": "kak",
+    "ganteng2": "ganteng-ganteng",
+    "pcarny": "pacarnya",
+    "kri": "kiri",
+    "knpa": "kenapa",
+    "pda": "pada",
+    "cmn": "cuman",
+    "gara2": "gara-gara",
+    "garuk2": "garuk-garuk",
+    "tembokk": "tembok",
+    "namax": "namanya",
+    "kiriii": "kiri",
+    "bungkusin": "bungkuskan",
+    "atu": "satu",
+    "dehhhh": "deh",
+    "kakk": "kak",
+    "ngegantiin": "menggantikan",
+    "alloh": "allah",
+    "smpe": "sampai",
+    "msh": "masih",
+    "trsa": "terasa",
+    "khadirannya": "kehadirannya",
+    "fikiran": "pikiran",
+    "hayalanku": "khayalanku",
+    "bru": "baru",
+    "nton": "menonton",
+    "ngapain": "mengapai",
+    "surgaa": "surga",
+    "kangenn": "kangen",
+    "kgn": "kangen",
+    "kakkkkk": "kak",
+    "rinduuuuuuuuu": "rindu",
+    "ninggalin": "meninggalkan",
+    "smg": "semoga",
+    "terangkhn": "terangkan",
+    "bgtttt": "banget",
+    "knp": "kenapa",
+    "tuk": "untuk",
+    "slama": "selama",
+    "orng": "orang",
+    "bngunlah": "bangunlah",
+    "bngun": "bangun",
+    "ea": "ya",
+    "qu": "ku",
+    "hiri": "hari",
+    "teman\"ny": "teman-temannya",
+    "aza": "saja",
+    "dr": "dari",
+    "alm": "almarhum",
+    "skrg": "sekarang",
+    "sie": "sih",
+    "benet": "benar",
+    "bangetttt": "banget",
+    "tuu": "tuh",
+    "skrang": "sekarang",
+    "gda": "enggak ada",
+    "gantiin": "menggantikan",
+    "kta": "kita",
+    "kklau": "kalau",
+    "acra": "acara",
+    "kasian": "kasihan",
+    "yaaa ": "ya",
+    "bnerr": "benar",
+    "emk": "emak",
+    "temenn": "teman",
+    "pngenn": "pengin",
+    "terkenall": "terkenal",
+    "ajhh": "saja",
+    "sungguh2": "sungguh-sungguh",
+    "mnjadi": "menjadi",
+    "shbt": "sahabat",
+    "bner": "benar",
+    "ktny": "katanya",
+    "dimusiumin": "dimuseumkan",
+    "bntu": "bantu",
+    "dlu": "dulu",
+    "udh": "sudah",
+    "kangem": "kangen",
+    "amiiin": "amin",
+    "smua": "semua",
+    "slmt": "selamat",
+    "jln": "jalan",
+    "mudh\"an": "mudah-mudahan",
+    "tenny": "tenang",
+    "sdh": "sudah",
+    "tnya": "tanya",
+    "blm": "belum",
+    "td": "tadi",
+    "sblm": "sebelum",
+    "bole": "boleh",
+    "lahhh": "lah",
+    "maap": "maaf",
+    "cm": "cuma",
+    "kmrn": "kemarin",
+    "wkt": "waktu",
+    "ama": "sama",
+    "ak": "aku",
+    "lht": "lihat",
+    "biasa2": "biasa-biasa",
+    "mnrtkuu": "menurutku",
+    "trs": "terus",
+    "ikutin": "mengikuti",
+    "jdwl": "jadwal",
+    "wajiiib": "wajib",
+    "aaaammmiiiinnnn": "amin",
+    "dtnggu": "ditunggu",
+    "jan": "jangan",
+    "kunjungin": "kunjungi",
+    "lagiiii": "lagi",
+    "waktunyaaa": "waktunya",
+    "diluangin": "diluangkan",
+    "jga": "juga",
+    "mimin": "admin",
+    "istimewaaa": "istimewa",
+    "blom": "belum",
+    "nangis": "menangis",
+    "ngaku\"": "mengaku-ngaku",
+    "diaa": "dia",
+    "donkk": "dong",
+    "kejawab": "terjawab",
+    "yaaaa": "ya",
+    "seru2an": "seru-seruan",
+    "mohom": "mohon",
+    "kebalas": "terbalas",
+    "nyempetin": "menyempatkan",
+    "wktunya": "waktunya",
+    "kaaaa": "kak",
+    "ngobrol": "mengobrol",
+    "namain": "namai",
+    "bls": "balas",
+    "ijap": "ijab",
+    "kobul": "kabul",
+    "co": "cowok",
+    "pst": "pasti",
+    "inggat": "ingat",
+    "brdua": "berdua",
+    "masing2": "masing-masing",
+    "sanggat": "sangat",
+    "siipp": "sip",
+    "laa": "lah",
+    "dlm": "dalam",
+    "hdup": "hidup",
+    "hdp": "hidup",
+    "kedpan": "kedepan",
+    "smoga": "semoga",
+    "mndaptkan": "mendapatkan",
+    "nutup\"in": "menutup-nutupi",
+    "iyah": "iya",
+    "sja": "saja",
+    "kakkk": "kak",
+    "za": "saja",
+    "mulut2": "mulut-mulut",
+    "peengn": "pengin",
+    "tuch": "tuh",
+    "muantteepp": "mantap",
+    "cpt": "cepat",
+    "mrit": "merit",
+    "y": "ya",
+    "ngapasih": "mengapa sih",
+    "ni": "nih",
+    "segitunya": "sebegitunya",
+    "fto": "foto",
+    "pke": "pakai",
+    "sisain": "menyisakan",
+    "slamt": "selamat",
+    "nantiii": "nanti",
+    "edaaan": "edan",
+    "emg": "memang",
+    "tunggu2": "tunggu-tunggu",
+    "sehat2": "sehat-sehat",
+    "ciyeeeeeee": "cie",
+    "pantes": "pantas",
+    "lairannya": "kelahirannya",
+    "jmnya": "jamnya",
+    "ajha": "saja",
+    "nyaaaa": "nya",
+    "nyari": "mencari",
+    "amiien": "amien",
+    "terbaikkk": "terbaik",
+    "ayahh": "ayah",
+    "ae": "saja",
+    "ndak": "indak",
+    "ngerti": "mengerti",
+    "mrekaaaa": "mereka",
+    "yaampuuuunnnn": "ya ampun",
+    "nyanyiin": "menyanyikan",
+    "ahhh": "ah",
+    "pgen": "pengin",
+    "tempt": "tempat",
+    "kh": "kah",
+    "bgini": "begini",
+    "brani": "berani",
+    "km": "kamu",
+    "jalan2": "jalan-jalan",
+    "asyikkkkk": "asyik",
+    "iriiiii": "iri",
+    "ngajak": "mengajak",
+    "naaaaahh": "nah",
+    "kka": "kakak",
+    "yak": "ya",
+    "ttep": "tetap",
+    "sperti": "seperti",
+    "jrang": "jarang",
+    "msuk": "masuk",
+    "gossip2.an": "gosip-gosipan",
+    "makkk": "mak",
+    "guee": "gue",
+    "pengennn": "pengin",
+    "gilzz": "gila",
+    "nyaru": "menyaru",
+    "gilaaa": "gila",
+    "jd": "jadi",
+    "kebarat2an": "kebarat-baratan",
+    "ohh": "oh",
+    "mantabs": "mantab",
+    "jgan": "jangan",
+    "mlu": "melulu",
+    "payahh": "payah",
+    "ntaf": "mantap",
+    "beneran": "benar",
+    "mudah\"n": "mudah-mudahan",
+    "gada": "enggak ada",
+    "milikin": "memiliki",
+    "kamo": "kamu",
+    "inih": "ini",
+    "sukaaaa": "suka",
+    "sukaaaaaa": "suka",
+    "kirain": "mengira",
+    "mehoonggggg": "mahal",
+    "apikkkk": "apik",
+    "yach": "ya",
+    "kereenn": "keren",
+    "ginii": "begini",
+    "ayoook": "ayo",
+    "yoiii": "yoi",
+    "gituuu": "begitu",
+    "iyaaa": "iya",
+    "pgn": "pengin",
+    "liptsk": "lipstik",
+    "nyeplak": "menjiplak",
+    "cw": "cewek",
+    "kmarin": "kemarin",
+    "mengncang": "mengencang",
+    "tauu": "tau",
+    "ksh": "kasih",
+    "skrng": "sekarang",
+    "mksh": "terima kasih",
+    "ank": "anak",
+    "skitar": "sekitar",
+    "ktmu": "ketemu",
+    "tmen": "teman",
+    "ats": "atas",
+    "donk": "dong",
+    "heii": "hai",
+    "diputusin": "diputuskan",
+    "pcrnya": "pacarnya",
+    "mnjual": "menjual",
+    "ngadain": "mengadakan",
+    "kkak": "kakak",
+    "rekomendasiin": "rekomendasikan",
+    "sihhh": "sih",
+    "cooocok": "cocok",
+    "mrip": "mirip",
+    "mama.nyy": "mamanya",
+    "bosenin": "membosankan",
+    "kmu": "kamu",
+    "bukn": "bukan",
+    "sey": "sih",
+    "cantikkk": "cantik",
+    "banger": "banget",
+    "kaa": "kak",
+    "eakyu": "waktu",
+    "cntik": "cantik",
+    "kakanya": "kakaknya",
+    "doeloe": "dulu",
+    "cantikkkk": "cantik",
+    "bngtt": "banget",
+    "iyak": "iya",
+    "malh": "malah",
+    "mlah": "malah",
+    "ngak": "tidak",
+    "laki2": "laki-laki",
+    "gag": "tidak",
+    "fhotonya": "fotonya",
+    "bleh": "boleh",
+    "brp": "berapa",
+    "tnggl": "tanggal",
+    "tanteny": "tantenya",
+    "ky": "kaya",
+    "sklinyaa": "sekalinya",
+    "ayoo": "ayo",
+    "w": "gue",
+    "dramaa": "drama",
+    "niiih": "nih",
+    "bisaa": "bisa",
+    "lha": "lah",
+    "dunk": "dong",
+    "lihaat": "lihat",
+    "yuwkkk": "yuk",
+    "nnti": "nanti",
+    "editannn": "editan",
+    "mw": "mau",
+    "thu": "itu",
+    "mai": "mau",
+    "kamuu": "kamu",
+    "pastii": "pasti",
+    "bisaaa": "bisa",
+    "kejuu": "keju",
+    "kereen": "keren",
+    "nama.a": "namanya",
+    "kmauan": "kemauan",
+    "ahhhh": "ah",
+    "yuuuuk": "yuk",
+    "dmana": "dimana",
+    "disiniii": "disini",
+    "cobaa": "coba",
+    "bayangin": "bayangkan",
+    "yaudh": "ya sudah",
+    "dl": "dulu",
+    "ajaaa": "saja",
+    "tuhhh": "tuh",
+    "amploppp": "amplop",
+    "mo": "mau",
+    "sayangg''": "sayang-sayang",
+    "nantii": "nanti",
+    "aminnnnn": "amin",
+    "gakuat": "enggak kuat",
+    "yukkkk": "yuk",
+    "nged": "banget",
+    "nantik": "nanti",
+    "ksitu": "kesitu",
+    "bangeett": "banget",
+    "liad": "lihat",
+    "kluarga": "keluarga",
+    "biasahhh": "biasa",
+    "tutorialx": "tutorialnya",
+    "dpke": "dipakai",
+    "fhoto": "foto",
+    "kerenn": "keren",
+    "binggo": "banget",
+    "rekomndd": "rekomendasi",
+    "bli2n": "beli-belikan",
+    "bwt": "buat",
+    "wado": "waduh",
+    "guaa": "gua",
+    "yaakkk": "ya",
+    "bangetttttyt": "banget",
+    "bangettttt": "banget",
+    "bangg": "bang",
+    "kangeeeeeeeeennnnnnnn": "kangen",
+    "kaliannnnnn": "kalian",
+    "rinduuuuuuuuuu": "rindu",
+    "kangennnnnmnnnnnnnnnnnnnnnnn": "kangen",
+    "kaliannnnnm": "kalian",
+    "kangeeeeeeeeeeennnnn": "kangen",
+    "kangennnnnnnnnnnnnnnn": "kangen",
+    "kangennn": "kangen",
+    "kaliannnnnnn": "kalian",
+    "th2": "tahun-tahun",
+    "smpt": "sempat",
+    "blg": "bilang",
+    "trserah": "terserah",
+    "ad": "ada",
+    "cwo": "cowok",
+    "prnah": "pernah",
+    "wlwpun": "walaupun",
+    "trpsah": "terpisah",
+    "klw": "kalau",
+    "mmg": "memang",
+    "prsatukn": "persatukan",
+    "g": "tidak",
+    "slh": "salah",
+    "ngomng": "mengomong",
+    "mdh2an": "mudah-mudahan",
+    "sm": "sama",
+    "skedar": "sekadar",
+    "kangeeerrn": "kangen",
+    "pulak": "pula",
+    "terrrrbaik": "terbaik",
+    "jorookknya": "joroknya",
+    "ihhhhh": "ih",
+    "padahall": "padahal",
+    "jorokkkk": "jorok",
+    "mualll": "mual",
+    "klow": "kalau",
+    "muke": "muka",
+    "ajh": "saja",
+    "taiiii": "tahi",
+    "seneeeeeng": "senang",
+    "nyesel": "menyesal",
+    "besarin": "membesarkan",
+    "tanyang": "tayang",
+    "ber2": "berdua",
+    "jngan": "jangan",
+    "ngelarang": "melarang",
+    "kerreeen": "keren",
+    "pantess": "pantas",
+    "bngettt": "banget",
+    "baperr": "bawa perasaan",
+    "sudh": "sudah",
+    "sbr": "sabar",
+    "pngen": "pengin",
+    "nntn": "menonton",
+    "ht": "hati",
+    "pemainy": "pemainnya",
+    "jg": "juga",
+    "aqu": "aku",
+    "ngeliat": "melihat",
+    "baper": "bawa perasaan",
+    "akn": "akan",
+    "nyampe": "sampai",
+    "kbawa": "terbawa",
+    "bradegan": "beradegan",
+    "amiiinnnn": "amin",
+    "mlm": "malam",
+    "nikahin": "menikahi",
+    "hadeuh": "aduh",
+    "nyambung": "menyambung",
+    "liyat": "lihat",
+    "krn": "karena",
+    "sk": "suka",
+    "adengan": "adegan",
+    "engga": "tidak",
+    "bingit": "banget",
+    "dapetin": "mendapatkan",
+    "model2": "model-model",
+    "sitayngin": "ditayangkan",
+    "cocokkk": "cocok",
+    "mahhhh": "mah",
+    "cocokny": "cocoknya",
+    "iniw": "ini",
+    "q": "ku",
+    "setju": "setuju",
+    "bnern": "benaran",
+    "pcrn": "pacaran",
+    "klian": "kalian",
+    "cocokkkk": "cocok",
+    "bngett": "banget",
+    "abes": "habis",
+    "br": "baru",
+    "mksdny": "maksudnya",
+    "brpa": "berapa",
+    "ihh": "ih",
+    "kesampean": "kesampaian",
+    "beginiiii": "begini",
+    "ntr": "entar",
+    "beliin": "belikan",
+    "kya": "kaya",
+    "keq": "kayak",
+    "ngerasa": "merasa",
+    "sygkuu": "sayangku",
+    "ngeselin": "menyebalkan",
+    "baju'a": "bajunya",
+    "gara''": "gara-gara",
+    "teruss": "terus",
+    "pokok'a": "pokoknya",
+    "bg": "bang",
+    "ubur2": "ubur-ubur",
+    "kuyy": "yuk",
+    "bentarr": "bentar",
+    "dureen": "duren",
+    "ajibb": "ajib",
+    "mahall": "mahal",
+    "yukk": "yuk",
+    "niiihh": "nih",
+    "imuuttt": "imut",
+    "imuttzz": "imut",
+    "nha": "nya",
+    "konten2": "konten-konten",
+    "rasain": "merasai",
+    "daaaah": "deh",
+    "asliiii": "asli",
+    "cantiknnnnyaaaaaaa": "cantiknya",
+    "yuuk": "yuk",
+    "ngelihatnya": "melihatnya",
+    "bdn": "badan",
+    "na": "nya",
+    "ibu2": "ibu-ibu",
+    "lau": "kau",
+    "cantikk": "cantik",
+    "sexxi": "seksi",
+    "bulet": "bulat",
+    "ituu": "itu",
+    "ngocok": "mengocok",
+    "nyoba": "mencoba",
+    "gn": "begini",
+    "yaahhh": "ya",
+    "kencqng": "kencang",
+    "kra": "kira",
+    "diginikan": "dibeginikan",
+    "coret\"": "coret-coret",
+    "lahh": "lah",
+    "gambarin": "gambarkan",
+    "ngerii": "ngeri",
+    "digambarin": "digambarkan",
+    "klen": "kalian",
+    "bangke": "bangkai",
+    "kog": "kok",
+    "liatnya": "lihatnya",
+    "bedanyaaa": "bedanya",
+    "negri": "negeri",
+    "mbk": "mbak",
+    "pgin": "pengin",
+    "krudungan": "kerudungan",
+    "ajaa": "saja",
+    "maksutku": "maksudku",
+    "kerennnnn": "keren",
+    "njirr": "anjir",
+    "jd'y": "jadinya",
+    "manisnyaaaa": "manisnya",
+    "thun": "tahun",
+    "mbg": "mbak",
+    "bangeet": "banget",
+    "ngaco": "mengaco",
+    "ngomen": "mengomentari",
+    "kaaakk": "kak",
+    "gituh": "begitu",
+    "tenggah": "tengah",
+    "uuuuuaaaaaaaaaappppppppppiiiiiiiiiiiiiiiiiikkkkkkkkkkkkkkkk": "apik",
+    "kocakkkkkkkkkkkkkk": "kocak",
+    "ksukaanmuuu": "kesukaanmu",
+    "bagiii": "bagi",
+    "ayooo": "ayo",
+    "nontonx": "menontonnya",
+    "dpn": "depan",
+    "pi": "tapi",
+    "penasarannnn": "penasaran",
+    "gilakkkkkk": "gila",
+    "mauuu": "mau",
+    "nontoonnn": "menonton",
+    "cepet2": "cepat-cepat",
+    "kepingin": "pengin",
+    "nontonnnn": "menonton",
+    "deeek": "dek",
+    "ntappp": "mantap",
+    "deg2an": "deg-degan",
+    "cyiiin": "cinta",
+    "iyha": "iya",
+    "kureeeen": "keren",
+    "muantaap": "mantap",
+    "pake": "menggunakan",
+    "ngantri": "mengantri",
+    "bli": "beli",
+    "nraktir": "mentraktir",
+    "nonton": "menonton",
+    "sbnyak": "sebanyak",
+    "penasaraaann": "penasaran",
+    "ayoooo": "ayo",
+    "nii": "ini",
+    "nontonya": "menontonnya",
+    "kl": "kalo",
+    "nunggu": "menunggu",
+    "dpt": "dapat",
+    "qta": "kita",
+    "peen": "pengin",
+    "lw": "kalau",
+    "gga": "tidak",
+    "yaah": "ya",
+    "asikkk": "asik",
+    "gilak": "gila",
+    "mcm": "macam",
+    "ceritax": "ceritanya",
+    "yoooiii": "yoi",
+    "kuy": "yuk",
+    "udahh": "sudah",
+    "tauuuuu": "tau",
+    "sabarrrrr": "sabar",
+    "kqmu": "kamu",
+    "banggain": "banggakan",
+    "thn": "tahun",
+    "pengan": "pengin",
+    "sendeng": "senang",
+    "simpen": "simpan",
+    "gakk": "tidak",
+    "bagiin": "membagikan",
+    "nanggepin": "menanggapi",
+    "kapn": "kapan",
+    "barang2": "barang-barang",
+    "kirimin": "mengirimi",
+    "senengin": "senangi",
+    "ngasih": "memberikan",
+    "ampunnnn": "ampun",
+    "bln": "bulan",
+    "senengg": "senang",
+    "teruzzz": "terus",
+    "mantabb": "mantab",
+    "sumpahh": "sumpah",
+    "diluarann": "diluaran",
+    "trbaik": "terbaik",
+    "dlam": "dalam",
+    "anjirrrr": "anjir",
+    "jendess": "janda",
+    "dh": "dah",
+    "sichh": "sih",
+    "namnya": "namanya",
+    "geh": "gih",
+    "nggak": "tidak",
+    "22nya": "dua-duanya",
+    "aduuhhh": "aduh",
+    "miripp": "mirip",
+    "silauuu": "silau",
+    "waww": "wow",
+    "uga": "juga",
+    "njiirr": "anjir",
+    "bgs": "bagus",
+    "kesinii": "kesini",
+    "gemay": "gemas",
+    "dstu": "disitu",
+    "wiiiihhhh": "wih",
+    "samoga": "semoga",
+    "kereennn": "keren",
+    "wahh": "wah",
+    "nyangkaa": "menyangka",
+    "hasilnyaaa": "hasilnya",
+    "dahhhh": "dah",
+    "mudah2": "mudah-mudah",
+    "jugaakk": "juga",
+    "prnh": "pernah",
+    "diapa2in": "diapa-apai",
+    "yaak": "ya",
+    "lhoo": "loh",
+    "donx": "dong",
+    "gthu": "begitu",
+    "nda": "indak",
+    "maauuu": "mau",
+    "pacarrr": "pacar",
+    "idamann": "idaman",
+    "naturalllll": "natural",
+    "bnyak": "banyak",
+    "berntung": "beruntung",
+    "merka": "mereka",
+    "jln2": "jalan-jalan",
+    "romntis": "romantis",
+    "slamat": "selamat",
+    "ulan": "ulang",
+    "th": "tahu",
+    "mngkin": "mungkin",
+    "klau": "kalau",
+    "diksi": "dikasih",
+    "sipp": "sip",
+    "taun": "tahun",
+    "jugak": "juga",
+    "nungguin": "menunggu",
+    "ngeluarin": "mengeluarkan",
+    "keciill": "kecil",
+    "ughaa": "juga",
+    "tante\"": "tante-tante",
+    "banged": "banget",
+    "abeees": "habis",
+    "kapan2": "kapan-kapan",
+    "adain": "adakan",
+    "bsa": "bisa",
+    "bosen2": "bosan-bosan",
+    "sempurnaaaaa": "sempurna",
+    "kaan": "kan",
+    "kece2": "kece-kece",
+    "badaaiii": "badai",
+    "beneraan": "benaran",
+    "cantiiik": "cantik",
+    "kuatttt": "kuat",
+    "cantiiiiiiik": "cantik",
+    "cantiknyaaa": "cantiknya",
+    "bae2": "baik-baik",
+    "bgd": "banget",
+    "mb": "mbak",
+    "catiiiiik": "cantik",
+    "subahanallah": "subhanallah",
+    "jaman2nya": "jaman-jamannya",
+    "padet": "padat",
+    "buktiin": "membuktikan",
+    "cantiq": "cantik",
+    "pasien\"nya": "pasien-pasiennya",
+    "lohh": "loh",
+    "utk": "untuk",
+    "keeeerrrreeeennnnnnnnn": "keren",
+    "woow": "wow",
+    "choker2": "choker-choker",
+    "hadirrr": "hadir",
+    "hadirr": "hadir",
+    "jelashh": "jelas",
+    "sekali2": "sekali-kali",
+    "mbaaa": "mbak",
+    "temen": "teman",
+    "hidupppp": "hidup",
+    "nyebelin": "menyebalkan",
+    "diliatnya": "dilihatnya",
+    "abis2": "habis-habis",
+    "gpp": "enggak apa-apa",
+    "para2": "parah-parah",
+    "bangeeet": "banget",
+    "allahhhhhhh": "allah",
+    "gemesnya": "gemasnya",
+    "ilang2": "hilang-hilang",
+    "kmi": "kami",
+    "ngilangin": "menghilangkan",
+    "tbuh": "tubuh",
+    "itungan": "hitungan",
+    "ledekin": "ledeki",
+    "tmn2": "teman-teman",
+    "repot2": "repot-repot",
+    "oles2": "oles-oles",
+    "ckup": "cukup",
+    "dptkan": "dapatkan",
+    "artis2": "artis-artis",
+    "kalii": "kali",
+    "ninggiin": "meninggikan",
+    "baget": "banget",
+    "dri": "dari",
+    "kira2": "kira-kira",
+    "lgsg": "langsung",
+    "ngk": "tidak",
+    "ahh": "ah",
+    "pas2an": "pas-pasan",
+    "balesin": "membalas",
+    "gausah": "enggak usah",
+    "sukaaa": "suka",
+    "lutuna": "lucunya",
+    "ciapa": "siapa",
+    "gemesss": "gemas",
+    "duhh": "duh",
+    "terharuuu": "terharu",
+    "alamii": "alami",
+    "sampek": "sampai",
+    "ckrng": "sekarang",
+    "ngegemesin": "menggemaskan",
+    "imoet": "imut",
+    "imut2": "imut-imut",
+    "jagain": "menjaga",
+    "yahbh": "ya",
+    "msih": "masih",
+    "macem2": "macam-macam",
+    "neko2": "neko-neko",
+    "sktika": "seketika",
+    "lutu": "lucu",
+    "wowwww": "wow",
+    "massss": "mas",
+    "kesiniii": "kesini",
+    "keren\"": "keren-keren",
+    "jalan\"nya": "jalan-jalannya",
+    "masyaallahhh": "masyaallah",
+    "kerennn": "keren",
+    "ksni": "kesini",
+    "begok": "bego",
+    "bkan": "bukan",
+    "jgk": "juga",
+    "bawak": "bawa",
+    "it": "itu",
+    "nti": "nanti",
+    "pgi": "pagi",
+    "keeeeeren": "keren",
+    "baguusss": "bagus",
+    "mna": "mana",
+    "nahannnn": "tahan",
+    "bagaatt": "banget",
+    "gayannxa": "gayanya",
+    "kereeeen": "keren",
+    "uda": "sudah",
+    "ngekeh": "kekeh",
+    "xlian": "kalian",
+    "b3": "bertiga",
+    "ihhh": "ih",
+    "lcu": "lucu",
+    "pait": "pahit",
+    "koplakkk": "koplak",
+    "kerass": "keras",
+    "yachhh": "ya",
+    "gokil": "gila",
+    "ngelihat": "melihat",
+    "ngelawak": "melawak",
+    "iiihhhhh": "ih",
+    "nyolotinnnn": "menyolot",
+    "beratttttttt": "berat",
+    "cantiikkkk": "cantik",
+    "hijaabbb": "hijab",
+    "sekalii": "sekali",
+    "smnagatin": "menyemangati",
+    "pakek": "pakai",
+    "kanapa": "kenapa",
+    "cans": "cantik",
+    "banhet": "banget",
+    "bgttttttt": "banget",
+    "blng": "bilang",
+    "mngasi": "mengasih",
+    "kmbang": "kembang",
+    "pg": "pagi",
+    "nie": "ini",
+    "pla": "pula",
+    "kw": "kau",
+    "blakon": "berlakon",
+    "sy": "saya",
+    "nmpk": "nampak",
+    "bngtzt": "banget",
+    "lucukkkkk": "lucu",
+    "sbelah": "sebelah",
+    "baek": "baik",
+    "ciusss": "serius",
+    "palinf": "paling",
+    "fav": "favorit",
+    "maak": "mak",
+    "ngakaaaakkk": "mengakak",
+    "gokill": "gila",
+    "kocakkkkkk": "kocak",
+    "ngekek": "mengekek",
+    "capee": "cape",
+    "pegangin": "memegang",
+    "nyender": "menyandar",
+    "bener": "benar",
+    "manjain": "memanjakan",
+    "peleotin": "meleot",
+    "bng": "bang",
+    "termurahhhh": "termurah",
+    "nyatakan": "menyatakan",
+    "graaatiiiis": "gratis",
+    "meriahh": "meriah",
+    "cantikkkm": "cantik",
+    "parahh": "parah",
+    "bingits": "banget",
+    "yuppss": "ya",
+    "nyindir": "menyindir",
+    "onoh": "sono",
+    "bnyk": "banyak",
+    "anakny": "anaknya",
+    "staf2nya": "staf-stafnya",
+    "begete": "banget",
+    "aduhh": "aduh",
+    "manteppp": "mantap",
+    "hati2": "hati-hati",
+    "jangan2": "jangan-jangan",
+    "kata2nya": "kata-katanya",
+    "ynk": "sayang",
+    "nangis\"": "menangis-nangis",
+    "hati\"": "hati-hati",
+    "jangan\"": "jangan-jangan",
+    "emank": "memang",
+    "cr": "cara",
+    "diemin": "diamkan",
+    "hancurin": "menghancurkan",
+    "ckp": "cukup",
+    "mgkn": "mungkin",
+    "ato": "atau",
+    "diapain": "diapakan",
+    "ms": "masih",
+    "haragain": "menghargai",
+    "cb": "coba",
+    "nyakitin": "menyakiti",
+    "jgn2": "jangan-jangan",
+    "sbaiknya": "sebaiknya",
+    "mngerti": "mengerti",
+    "blajar": "belajar",
+    "fakta2": "fakta-fakta",
+    "spt": "seperti",
+    "mnding": "mending",
+    "nilai2": "nilai-nilai",
+    "buka2": "buka-buka",
+    "nyinyirin": "nyinyir",
+    "pdhl": "padahal",
+    "pd": "pada",
+    "nyerang": "menyerang",
+    "hrs": "harus",
+    "mrk": "mereka",
+    "trima": "terima",
+    "ngomomg": "mengomong",
+    "mang": "memang",
+    "kbetulan": "kebetulan",
+    "orgtuanya": "orang tuanya",
+    "sbelum": "sebelum",
+    "ngamatin": "mengamati",
+    "ngintip": "mengintip",
+    "stelah": "setelah",
+    "sndiri": "sendiri",
+    "ngintilin": "mengintil",
+    "smnjak": "semenjak",
+    "trbukti": "terbukti",
+    "nyambet": "menyambat",
+    "msk": "masuk",
+    "krmh": "ke rumah",
+    "rmh": "rumah",
+    "bo'ong": "bohong",
+    "eloo": "lo",
+    "apa2nya": "apa-apanya",
+    "goblokkk": "goblok",
+    "sesatt": "sesat",
+    "ibliss": "iblis",
+    "elo": "lo",
+    "kbiasaan": "kebiasaan",
+    "hdpnya": "hidupnya",
+    "lbh": "lebih",
+    "byk": "banyak",
+    "anknya": "anaknya",
+    "tdr": "tidur",
+    "sbuah": "sebuah",
+    "anak2nya": "anak-anaknya",
+    "tdnya": "tadinya",
+    "ank2nya": "anak-anaknya",
+    "milih": "memilih",
+    "branjak": "beranjak",
+    "ank2": "anak-anak",
+    "masyarakay": "masyarakat",
+    "mudah2an": "mudah-mudahan",
+    "menegerti": "mengerti",
+    "apa2": "apa-apa",
+    "sok2": "sok-sok",
+    "nasehatin": "menasihati",
+    "ngaca": "mengaca",
+    "ajah": "saja",
+    "kakkkk": "kak",
+    "slamet": "selamat",
+    "ampe": "sampai",
+    "nari": "menari",
+    "ehh": "eh",
+    "mf": "maaf",
+    "ngcpin": "mengucapkan",
+    "woowwww": "wow",
+    "iaa": "iya",
+    "kdg": "kadang",
+    "kebagi": "terbagi",
+    "nerusin": "meneruskan",
+    "indo": "indonesia",
+    "univ": "universitas",
+    "maen": "main",
+    "wihh": "wih",
+    "tetapppp": "tetap",
+    "gantenggg": "ganteng",
+    "jakety": "jaketnya",
+    "nggk": "tidak",
+    "skli": "sekali",
+    "kli": "kali",
+    "ttp": "tetap",
+    "pala": "kepala",
+    "pusingggg": "pusing",
+    "pucing": "pusing",
+    "ihhhh": "ih",
+    "maho": "manusia homo",
+    "gantng": "ganteng",
+    "alak": "kepala",
+    "hilangv": "hilang",
+    "bungggg": "bung",
+    "gapap": "enggak apa-apa",
+    "kyak": "kayak",
+    "pling": "paling",
+    "gokiiill": "gila",
+    "busedh": "buset",
+    "gokilnya": "gilanya",
+    "duluuu": "dulu",
+    "keceee": "kece",
+    "nyaa": "nya",
+    "klu": "kalau",
+    "gilaa": "gila",
+    "duuhhh": "duh",
+    "amiiiiinnnnn": "amin",
+    "dg": "dengan",
+    "tullus": "tulus",
+    "tw": "tau",
+    "pluk": "peluk",
+    "durhaka2": "durhaka-durhaka",
+    "kpada": "kepada",
+    "seburuk\"": "seburuk-buruk",
+    "ortu": "orang tua",
+    "ktaa": "kita",
+    "yup": "ya",
+    "tdk": "tidak",
+    "tetaplaah": "tetaplah",
+    "ajja": "saja",
+    "dech": "deh",
+    "oprasi": "operasi",
+    "gya": "gaya",
+    "kndung": "kandung",
+    "sbg": "sebagai",
+    "u": "lu",
+    "ksenangan": "kesenangan",
+    "ddpt": "didapat",
+    "jwab": "jawab",
+    "mmbodohkan": "membodohkan",
+    "orlaen": "orang lain",
+    "bgtu": "begitu",
+    "drpd": "daripada",
+    "malem": "malam",
+    "aplikasiin": "mengaplikasikan",
+    "berangat": "berangkat",
+    "praktekin": "mempraktikkan",
+    "dahh": "dah",
+    "gmn": "bagaimana",
+    "omdo": "omong doang",
+    "kate": "kata",
+    "cabe2": "cabe-cabe",
+    "prjuangan": "perjuangan",
+    "kmewahan": "kemewahan",
+    "stimpal": "setimpal",
+    "ddpat": "didapat",
+    "sprt": "seperti",
+    "bc": "baca",
+    "mnilai": "menilai",
+    "kata2": "kata-kata",
+    "usahh": "usah",
+    "segala2nya": "segala-galanya",
+    "sekarng": "sekarang",
+    "sprti": "seperti",
+    "mkanya": "makanya",
+    "hay": "hai",
+    "mreka": "mereka",
+    "bhagia": "bahagia",
+    "korek2": "korek-korek",
+    "ngebales": "membalas",
+    "krna": "karena",
+    "sihh": "sih",
+    "sasama": "sesama",
+    "dehh": "deh",
+    "cabe2an": "cabe-cabean",
+    "terong2an": "terong-terongan",
+    "seklian": "sekalian",
+    "kluar": "keluar",
+    "tuuu": "itu",
+    "ngurusan": "mengurusi",
+    "campurin": "mencampuri",
+    "emnknya": "memangnya",
+    "py": "punya",
+    "unyuu": "unyu",
+    "mrangkul": "merangkul",
+    "adlh": "adalah",
+    "wlo": "walau",
+    "lh": "boleh",
+    "manusiy": "manusia",
+    "tx": "tak",
+    "samara": "sakinah mawadah rahman",
+    "teringt": "teringat",
+    "trmsuk": "termasuk",
+    "dn": "dan",
+    "pilihnmu": "pilihanmu",
+    "swmntara": "sementara",
+    "trmasuk": "termasuk",
+    "orang2": "orang-orang",
+    "sgt": "sangat",
+    "liht": "lihat",
+    "suaminy": "suaminya",
+    "jadulnya": "jaman dulunya",
+    "mantaff": "mantap",
+    "ngata2in": "mengatai-ngatai",
+    "bagaimna": "bagaimana",
+    "mulusssss": "mulus",
+    "bgus": "bagus",
+    "gmana": "bagaimana",
+    "kpleset": "kepleset",
+    "yawlah": "ya allah",
+    "kepeleset": "kepleset",
+    "kayanye": "kayanya",
+    "amiinnnn": "amin",
+    "komen2an": "komen-komenan",
+    "wewww": "wow",
+    "dumsss": "dong",
+    "tar": "entar",
+    "perbaikin": "perbaiki",
+    "permasalhkan": "permasalahkan",
+    "betul2": "betul-betul",
+    "jauhin": "jauhi",
+    "dateng": "datang",
+    "adiik": "adik",
+    "manisss": "manis",
+    "besar\"": "besar-besar",
+    "masing\"": "masing-masing",
+    "ddlm": "di dalam",
+    "kmbali": "kembali",
+    "dkuburnya": "dikuburnya",
+    "fi": "di",
+    "ttg": "tentang",
+    "rata2": "rata-rata",
+    "lbih": "lebih",
+    "critamu": "ceritamu",
+    "ja": "saja",
+    "bres": "beres",
+    "cmkn": "camkan",
+    "diurusin": "diurusi",
+    "biarin": "biarkan",
+    "kale": "kali",
+    "donks": "dong",
+    "membanding\"": "membanding-banding",
+    "mengperbolehkan": "memperbolehkan",
+    "krena": "karena",
+    "ngri": "negeri",
+    "dingin\"": "dingin-dingin",
+    "lma": "lama",
+    "dibangga'in": "dibangga-banggakan",
+    "ngebolehin": "membolehkan",
+    "denger": "dengar",
+    "jelek\"in": "menjelek-jelekkan",
+    "stiap": "setiap",
+    "gausa": "enggak usah",
+    "maksain": "memaksakan",
+    "smog": "semoga",
+    "mnerima": "menerima",
+    "baikxa": "baiknya",
+    "aaamin": "amin",
+    "amienn": "amien",
+    "sekangen2": "sekangen-kangen",
+    "kt": "kita",
+    "amiiiiiiiiiinnnnnnn": "amin",
+    "nolongin": "menolong",
+    "amiiiiiiiiiiin": "amin",
+    "seluru": "seluruh",
+    "amiennn": "amien",
+    "tebir": "ribet",
+    "doangam": "doang",
+    "tebir\"": "ribet-ribet",
+    "amad": "amat",
+    "mkst": "maksud",
+    "wong2": "wong-wong",
+    "rempong": "repot",
+    "ngurusin": "mengurusi",
+    "kerjaan": "pekerjaan",
+    "bingittzz": "banget",
+    "bangets": "banget",
+    "ikh": "ih",
+    "dwh": "deh",
+    "nengok": "menengok",
+    "bante": "bantai",
+    "la": "lah",
+    "komenannya": "komentarnya",
+    "hadapin": "menghadapi",
+    "dengarin": "mendengarkan",
+    "ush": "usah",
+    "cock": "cocok",
+    "widihh": "idih",
+    "mantepp": "mantap",
+    "cita2": "cita-cita",
+    "temen-temen": "teman-teman",
+    "stu": "satu",
+    "syratnya": "syaratnya",
+    "pnjang": "panjang",
+    "shat": "sehat",
+    "inginkn": "inginkan",
+    "belanjaa": "belanja",
+    "burem": "buram",
+    "tlp": "telepon",
+    "dngan": "dengan",
+    "ngerasain": "merasai",
+    "kancang": "kencang",
+    "tmbh": "tambah",
+    "mansyoallah": "masyaallah",
+    "skali": "sekali",
+    "canttttikkk": "cantik",
+    "subhanalloh": "subhanallah",
+    "lkuin": "lakukan",
+    "langgenh": "langgeng",
+    "foto2nya": "foto-fotonya",
+    "tanggung2": "tanggung-tanggung",
+    "salluutt": "salut",
+    "pkai": "pakai",
+    "org2": "orang-orang",
+    "mkn": "makin",
+    "seneng": "senang",
+    "pdng": "padang",
+    "warbiyasah": "luar biasa",
+    "pk": "pakai",
+    "keedaannya": "keadaannya",
+    "lagu2": "lagu-lagu",
+    "saya2": "saya-saya",
+    "sekrng": "sekarang",
+    "lagu2nya": "lagu-lagunya",
+    "ttap": "tetap",
+    "spertinya": "sepertinya",
+    "mrah": "marah",
+    "gra2": "gara-gara",
+    "sngaja": "sengaja",
+    "jlek": "jelek",
+    "udah2": "sudah-sudah",
+    "ungkit2": "ungkit-ungkit",
+    "pura2": "pura-pura",
+    "gatau": "tidak tahu",
+    "curhat2": "curhat-curhat",
+    "matany": "matanya",
+    "dteng": "datang",
+    "mata'y": "matanya",
+    "baju2": "baju-baju",
+    "buruannn": "buruan",
+    "emng": "memang",
+    "perubut": "perebut",
+    "sumai": "suami",
+    "tk": "tak",
+    "urusin": "urus",
+    "apah": "apa",
+    "bagus2": "bagus-bagus",
+    "say": "sayang",
+    "mmbela": "membela",
+    "mslhnya": "masalahnya",
+    "hnya": "hanya",
+    "sndri": "sendiri",
+    "sj": "saja",
+    "llki": "lelaki",
+    "dluar": "diluar",
+    "sna": "sana",
+    "boleh2": "boleh-boleh",
+    "dya": "dia",
+    "maluuuu": "malu",
+    "beda2": "beda-beda",
+    "nyaranin": "menyarankan",
+    "x": "kali",
+    "tongolin": "menongol",
+    "cabol": "cabul",
+    "ape": "apa",
+    "nyet": "monyet",
+    "muna": "munafik",
+    "jing": "anjing",
+    "tot": "entot",
+    "nihh": "nih",
+    "hidiyah": "hidayah",
+    "percya": "percaya",
+    "bgi": "bagi",
+    "tlg": "tolong",
+    "sya": "saya",
+    "sdri": "sendiri",
+    "tdi": "tadi",
+    "mgkin": "mungkin",
+    "bhwa": "bahwa",
+    "skaligus": "sekaligus",
+    "cek2": "cek-cek",
+    "spti": "seperti",
+    "smakin": "semakin",
+    "sbgai": "sebagai",
+    "mgk": "mungkin",
+    "bgmn": "bagaimana",
+    "sapa2": "sapa-sapa",
+    "sama2": "sama-sama",
+    "kyknya": "kayaknya",
+    "pnya": "punya",
+    "dng": "dengan",
+    "termurahhh": "termurah",
+    "bbrp": "beberapa",
+    "bhw": "bahwa",
+    "banyaaaaaak": "banyak",
+    "baik2nya": "baik-baiknya",
+    "tunjukan": "tunjukkan",
+    "anak2mu": "anak-anakmu",
+    "anak2": "anak-anak",
+    "ngasih2": "mengasih-ngasih",
+    "berfikir": "berpikir",
+    "amit2": "amit-amit",
+    "mba": "mbak",
+    "elu": "lu",
+    "ngajuin": "mengajukan",
+    "tiba2": "tiba-tiba",
+    "jkt": "jakarta",
+    "terbaeq": "terbaik",
+    "namany": "namanya",
+    "jels": "jelas",
+    "diakibtkn": "diakibatkan",
+    "suk": "suka",
+    "jelek2": "jelek-jelek",
+    "dsrny": "dasarnya",
+    "jkrta": "jakarta",
+    "mantaap": "mantap",
+    "benar2": "benar-benar",
+    "main2": "main-main",
+    "lanjutkaaaaan": "lanjutkan",
+    "hiduppp": "hidup",
+    "ncek": "encek",
+    "majuuu": "maju",
+    "teruuss": "terus",
+    "kdg2": "kadang-kadang",
+    "looohh": "loh",
+    "sebelumbya": "sebelumnya",
+    "tunjukin": "tunjukkan",
+    "tahun\"": "tahun-tahun",
+    "koment": "komentar",
+    "nyampein": "menyampaikan",
+    "hokiii": "hoki",
+    "naksir": "menaksir",
+    "bangt\"": "banget-banget",
+    "nafkahin": "menafkahi",
+    "ngitem": "menghitam",
+    "banyaaaak": "banyak",
+    "sama\"": "sama-sama",
+    "gx": "tidak",
+    "lhat": "lihat",
+    "cantika": "cantik",
+    "cwek": "cewek",
+    "kngen": "kangen",
+    "fillm": "film",
+    "sinet": "sinetron",
+    "jendral": "jenderal",
+    "nanya": "tanya",
+    "maenya": "mainnya",
+    "cantiks": "cantik",
+    "wktu": "waktu",
+    "pilm": "film",
+    "taon": "tahun",
+    "nd": "indak",
+    "slah": "salah",
+    "cini": "sini",
+    "jaaangan": "jangan",
+    "nambah": "menambah",
+    "naek": "naik",
+    "terimaksih": "terima kasih",
+    "inii": "ini",
+    "kaannnn": "kan",
+    "tidakkkk": "tidak",
+    "kemuh": "kamu",
+    "da": "dah",
+    "keren2": "keren-keren",
+    "sby": "surabaya",
+    "tgl": "tanggal",
+    "pinginnn": "pengin",
+    "buanget": "banget",
+    "ketemuuu": "ketemu",
+    "kebawa": "terbawa",
+    "mimpiii": "mimpi",
+    "wanjerrr": "anjir",
+    "satupunn": "satupun",
+    "motret": "memotret",
+    "temen2": "teman-teman",
+    "lapakk": "lapak",
+    "nyeniii": "menyeni",
+    "bget": "banget",
+    "seeh": "sih",
+    "abis": "habis",
+    "deuhh": "duh",
+    "b2an": "berduaan",
+    "dihargain": "dihargai",
+    "engga\"": "enggak-enggak",
+    "tahun2": "tahun-tahun",
+    "lebayy": "lebay",
+    "gilsss": "gila",
+    "nganbek": "mengambek",
+    "sukaa": "suka",
+    "enk": "enak",
+    "mendam": "memendam",
+    "manta": "mantan",
+    "relaaaa": "rela",
+    "bgun": "bangun",
+    "tdur": "tidur",
+    "cntk": "cantik",
+    "knl": "kenal",
+    "anugrah": "anugerah",
+    "slm": "salam",
+    "kliatan": "kelihatan",
+    "awoohhh": "allah",
+    "cantiikk": "cantik",
+    "gt": "begitu",
+    "sbbyak": "sebanyak",
+    "apun": "apapun",
+    "nyangkutnya": "menyangkutnya",
+    "untk": "untuk",
+    "ampunnnnn": "ampun",
+    "hy": "hai",
+    "wadaaw": "waduh",
+    "paraah": "parah",
+    "sampw": "sampai",
+    "dijelekin": "dijelekkan",
+    "napa": "kenapa",
+    "azeeeek": "asik",
+    "ntikk": "cantik",
+    "uhh": "uh",
+    "mayan": "lumayan",
+    "mnisss": "manis",
+    "tambahim": "tambahkan",
+    "tambahin": "tambahkan",
+    "bener\"": "benar-benar",
+    "make": "menggunakan",
+    "canttikkk": "cantik",
+    "baanggeettt": "banget",
+    "ap": "apa",
+    "siiihh": "sih",
+    "krpoooo": "kepo",
+    "pengn": "pengin",
+    "nyusul": "menyusul",
+    "nyok": "yuk",
+    "dekkk": "dek",
+    "ngiri": "mengiri",
+    "mmang": "memang",
+    "nentuin": "menentukan",
+    "mnjmput": "menjemput",
+    "ygs": "sayang",
+    "mblooo": "jomblo",
+    "ber'expresi": "berekspresi",
+    "jdulnya": "judulnya",
+    "ciumman": "ciuman",
+    "aurot": "aurat",
+    "laginy": "laginya",
+    "nyaaaaaaaaaaaaa": "nya",
+    "alkhamdulilah": "alhamdulillah",
+    "ktnya": "katanya",
+    "selaluu": "selalu",
+    "anjirrr": "anjir",
+    "ngeh": "engah",
+    "amen": "amin",
+    "qm": "kamu",
+    "nahhh": "nah",
+    "ngmngnya": "mengomongnya",
+    "sampai2": "sampai-sampai",
+    "hal2": "hal-hal",
+    "komunitas2": "komunitas-komunitas",
+    "fotony": "fotonya",
+    "halllo": "halo",
+    "ngiritya": "mengiritnya",
+    "hematt": "hemat",
+    "ciyeeee": "cie",
+    "yeeee": "ya",
+    "nget": "banget",
+    "kususnya": "khususnya",
+    "krm": "kirim",
+    "sam": "sama",
+    "ajaaahhhhh": "saja",
+    "syediiihhh": "sedih",
+    "malangg": "malang",
+    "belooomm": "belum",
+    "yaakk": "ya",
+    "kebukti": "terbukti",
+    "anak2e": "anak-anaknya",
+    "tuwanya": "tuanya",
+    "comen2nya": "komen-komennya",
+    "pedesssss": "pedas",
+    "jelas2": "jelas-jelas",
+    "skg": "sekarang",
+    "nyebut2": "menyebut-nyebut",
+    "plg": "pulang",
+    "smbil": "sambil",
+    "hellooooooo": "halo",
+    "ngrebut": "merebut",
+    "mnjdi": "menjadi",
+    "taek": "tahi",
+    "lupain": "melupakan",
+    "bangkret": "bangkrut",
+    "taekk": "tahi",
+    "lahhhhhh": "lah",
+    "kedokk": "kedok",
+    "mati\"an": "mati-matian",
+    "nyimak": "menyimak",
+    "komenx": "komennya",
+    "serem2": "seram-seram",
+    "ngumpet\"": "mengumpet-ngumpet",
+    "blim": "belum",
+    "sekrang": "sekarang",
+    "ngerebut": "merebut",
+    "mnjijikaaaaaan": "menjijikkan",
+    "astgfrlh": "astagfirullah",
+    "sahabatt": "sahabat",
+    "gnyngka": "enggak menyangka",
+    "sendirir": "sendiri",
+    "brengsekk": "brengsek",
+    "ngomentnya": "mengomentarinya",
+    "nusuk": "menusuk",
+    "skr": "sekarang",
+    "dpotong": "dipotong",
+    "helo": "halo",
+    "kmrin": "kemarin",
+    "ngmgin": "mengomongkan",
+    "bilangg": "bilang",
+    "gkhianati": "mengkhianati",
+    "kpd": "kepada",
+    "hr": "hari",
+    "sp": "sapa",
+    "pljaran": "pelajaran",
+    "spy": "supaya",
+    "mngikuti": "mengikuti",
+    "klkuan": "kelakuan",
+    "dibikin2": "dibikin-bikin",
+    "gimana": "bagaimana",
+    "nnt": "nanti",
+    "cew": "cewek",
+    "cow": "cowok",
+    "kasiannn": "kasihan",
+    "syekaliii": "sekali",
+    "hgga": "hingga",
+    "cieeeee": "cie",
+    "sholihah": "salihah",
+    "adeuh": "aduh",
+    "halahh": "alah",
+    "luu": "lu",
+    "yuuks": "yuk",
+    "yoo": "ya",
+    "ginian": "beginian",
+    "judulnyaa": "judulnya",
+    "ayoookkkkkk": "ayo",
+    "artix": "artinya",
+    "cewe": "cewek",
+    "cowo": "cowok",
+    "lt": "lantai",
+    "nama\"": "nama-nama",
+    "cwe": "cewek",
+    "serem": "seram",
+    "kepoin": "kepo",
+    "keluarin": "keluarkan",
+    "gajelas": "tidak jelas",
+    "mbak2": "mbak-mbak",
+    "pedes": "pedas",
+    "komentnya": "komentarnya",
+    "omongin": "omongkan",
+    "ngalirrrrr": "mengalir",
+    "idup": "hidup",
+    "nmbah": "menambah",
+    "terossss": "terus",
+    "ngehujat": "menghujat",
+    "dosaa": "dosa",
+    "ngebela": "membela",
+    "seindonesiyah": "seindonesia",
+    "seh": "sih",
+    "senyumin": "senyumi",
+    "mh": "mah",
+    "ngalir": "mengalir",
+    "ngrusak": "merusak",
+    "px": "punya",
+    "kslhn": "kesalahan",
+    "skrngnya": "sekarangnya",
+    "emang": "memang",
+    "kalik": "kali",
+    "bilangin": "bilang",
+    "nyambungin": "menyambung",
+    "sllu": "selalu",
+    "scra": "secara",
+    "nggali": "menggali",
+    "cmpur": "campur",
+    "dgr": "dengar",
+    "kurng": "kurang",
+    "nangiiiiis": "menangis",
+    "nangiiis": "menangis",
+    "ngomentarin": "mengomentari",
+    "idupnya": "hidupnya",
+    "ortunya": "orang tuanya",
+    "woey": "woy",
+    "bloghhh": "goblok",
+    "ngomongin": "mengomongkan",
+    "doank": "doang",
+    "abal\"": "abal-abal",
+    "dikata2in": "dikata-katai",
+    "ngehina": "menghina",
+    "gmna": "bagaimana",
+    "kebanggan": "kebanggaan",
+    "dah": "deh",
+    "jngn": "jangan",
+    "mnjawab": "menjawab",
+    "woooiiiiiiii": "woy",
+    "dosaaaaaaaaaa": "dosa",
+    "ingt": "ingat",
+    "karmaaa": "karma",
+    "woooiiiii": "woy",
+    "ngkkkkkk": "mengakak",
+    "makny": "maknya",
+    "wdooohhh": "waduh",
+    "kasihn": "kasihan",
+    "lhirr": "lahir",
+    "hujatann": "hujatan",
+    "palgi": "apalagi",
+    "wihhh": "wih",
+    "kakakkk": "kakak",
+    "bagusss": "bagus",
+    "jt": "juta",
+    "ngets": "banget",
+    "stp": "setiap",
+    "penbelian": "pembelian",
+    "cuaantik": "cantik",
+    "sukakkk": "suka",
+    "m": "sama",
+    "cucokkk": "cocok",
+    "lyt": "lihat",
+    "expresi": "ekspresi",
+    "natap": "menatap",
+    "ccok": "cocok",
+    "helloo": "halo",
+    "dripada": "daripada",
+    "difotoin": "difoto",
+    "psangan": "pasangan",
+    "cakepp": "cakep",
+    "ngiriii": "mengiri",
+    "coxok": "cocok",
+    "buatin": "membuat",
+    "nihhh": "nih",
+    "statusx": "statusnya",
+    "cem": "macam",
+    "yee": "ya",
+    "sunggu": "sungguh",
+    "lagiii": "lagi",
+    "ammiiin": "amin",
+    "haddeh": "aduh",
+    "maaasss": "mas",
+    "segerrrr": "segar",
+    "kemn": "kemana",
+    "suipit": "sipit",
+    "sipiit": "sipit",
+    "kedengeran": "kedengaran",
+    "semangaatt": "semangat",
+    "promil": "program hamil",
+    "lancr": "lancar",
+    "keputihn": "keputihan",
+    "gratisss": "gratis",
+    "kebayang": "terbayang",
+    "mdh\"": "mudah-mudah",
+    "bz": "bisa",
+    "amiinn": "amin",
+    "ammin": "amin",
+    "mendapatkn": "mendapatkan",
+    "lucuuuk": "lucu",
+    "amaattt": "amat",
+    "aje": "saja",
+    "yaoloh": "yaallah",
+    "ngerayain": "merayakan",
+    "sotoy": "sok tau",
+    "yok": "yuk",
+    "d.bikinin": "dibikin",
+    "mmz": "mas",
+    "bikinin": "membikin",
+    "bapeeeer": "bawa perasaan",
+    "keliatannya": "kelihatannya",
+    "siih": "sih",
+    "diginiin": "dibeginikan",
+    "hadeehh": "aduh",
+    "pu": "punya",
+    "suamiiiii": "suami",
+    "krenn": "keren",
+    "kebykan": "kebanyakan",
+    "tingal": "tinggal",
+    "pernikahn": "pernikahan",
+    "ngtain": "mengatai",
+    "macem": "macam",
+    "bagusnyeee": "bagusnya",
+    "kemaren": "kemarin",
+    "hmpir": "hampir",
+    "liatnyaaa": "lihatnya",
+    "waw": "wow",
+    "mbuh": "embuh",
+    "bsk": "besok",
+    "waaa": "wah",
+    "berbiiiiiihhh": "barbie",
+    "canteek": "cantik",
+    "teru": "terus",
+    "nyatok": "mencatok",
+    "nyampenya": "sampainya",
+    "goncengin": "boncengkan",
+    "kasi": "kasih",
+    "dianterin": "diantar",
+    "gebleg": "geblek",
+    "bosen": "bosan",
+    "anterin": "antarkan",
+    "ngantar": "mengantar",
+    "nganterin": "mengantarkan",
+    "mz": "mas",
+    "nerima": "menerima",
+    "ati2": "hati-hati",
+    "yeuh": "ya",
+    "kmn": "kemana",
+    "dianter": "diantar",
+    "disupirin": "disopiri",
+    "jidad": "jidat",
+    "ciee": "cie",
+    "novembr": "november",
+    "hri": "hari",
+    "bedain": "membedakan",
+    "genduut": "gendut",
+    "ehhh": "eh",
+    "bertatto": "bertato",
+    "brrt": "berarti",
+    "kana": "kanan",
+    "dtg": "datang",
+    "doong": "dong",
+    "sblah": "sebelah",
+    "tauuu": "tau",
+    "tengaj": "tengah",
+    "ps": "pas",
+    "gmpg": "gampang",
+    "engk": "tidak",
+    "apal": "hapal",
+    "dak": "indak",
+    "rupa2nya": "rupa-rupanya",
+    "kembaq": "kembar",
+    "tngh": "tengah",
+    "mknya": "makanya",
+    "prmpuan": "perempuan",
+    "ketuker": "tertukar",
+    "drimnanya": "darimananya",
+    "cntikan": "cantikan",
+    "edaaaan": "edan",
+    "syp": "siapa",
+    "bcnda": "bercanda",
+    "uhhh": "uh",
+    "bazengg": "bajingan",
+    "haiii": "hai",
+    "bosaan": "bosan",
+    "gitu2": "begitu-gitu",
+    "kmana2": "kemana-mana",
+    "hrsnya": "harusnya",
+    "sdg": "sedang",
+    "komentar2": "komentar-komentar",
+    "kenyataan2": "kenyataan-kenyataan",
+    "silahkan": "silakan",
+    "lwt": "lewat",
+    "sukur2": "sukur-sukur",
+    "baek2": "baik-baik",
+    "cma": "cuma",
+    "berbeda2": "berbeda-beda",
+    "dibkatakan": "dikatakan",
+    "doonk": "dong",
+    "pengikuy": "pengikut",
+    "ngmngin": "mengomongkan",
+    "sblmnya": "sebelumnya",
+    "maksd": "maksud",
+    "adkah": "adakah",
+    "menbelah": "membelah",
+    "ayuk": "ayo",
+    "mngira": "mengira",
+    "bertolernsi": "bertoleransi",
+    "slahkan": "salahkan",
+    "tolernsi": "toleransi",
+    "sbnarnya": "sebenarnya",
+    "ingi": "ingin",
+    "oalaaaa": "walah",
+    "menjelekan": "menjelekkan",
+    "hadeuuh": "aduh",
+    "dikemanain": "dikemanakan",
+    "aneh2": "aneh-aneh",
+    "bpknya": "bapaknya",
+    "baca2": "baca-baca",
+    "jwb": "jawab",
+    "komen2": "komen-komen",
+    "sebelum2nya": "sebelum-sebelumnya",
+    "sbagai": "sebagai",
+    "sedihh": "sedih",
+    "kangennnn": "kangen",
+    "gndakan": "gandakan",
+    "kangeeeeeeeenya": "kangen",
+    "gaa": "tidak",
+    "ganti'kn": "menggantikan",
+    "tnang": "tenang",
+    "amiiiiiiiiiiiiiiiiin": "amin",
+    "kgeeeen": "kangen",
+    "kangeenn": "kangen",
+    "bangeeeet": "banget",
+    "bsok": "besok",
+    "hbis": "habis",
+    "mti": "mati",
+    "bngetttt": "banget",
+    "kangeen": "kangen",
+    "bgect": "banget",
+    "kebaikan\"y": "kebaikannya",
+    "dssi": "disisi",
+    "kngenn": "kangen",
+    "kangeeeeennn": "kangen",
+    "lagii": "lagi",
+    "dasyat": "dahsyat",
+    "aer": "air",
+    "bgni": "begini",
+    "skalii": "sekali",
+    "gg": "tidak",
+    "dtinggl": "ditinggal",
+    "terbaiiikkkkk": "terbaik",
+    "murahhh": "murah",
+    "pecahhg": "pecah",
+    "kakakgh": "kakak",
+    "terbaeeeek": "terbaik",
+    "prempuan": "perempuan",
+    "manteep": "mantap",
+    "nggeh": "engah",
+    "indonesiaaa": "indonesia",
+    "inia": "ini",
+    "maluu": "malu",
+    "cobaaaa": "coba",
+    "dehhh": "deh",
+    "cepetan": "cepatan",
+    "ntapsss": "mantap",
+    "kamiiii": "kami",
+    "smangat": "semangat",
+    "qmu": "kamu",
+    "sdkit2": "sedikit-sedikit",
+    "tntg": "tentang",
+    "penyakitny": "penyakitnya",
+    "ngajarin": "mengajari",
+    "laenny": "lainnya",
+    "amiinnn": "amin",
+    "scpatny": "secepatnya",
+    "sampein": "sampaikan",
+    "tuany": "tuanya",
+    "doa2": "doa-doa",
+    "pjg": "panjang",
+    "adeeek": "adek",
+    "bca": "baca",
+    "netes": "menetes",
+    "mataq": "mataku",
+    "byangin": "membayangkan",
+    "trjadi": "terjadi",
+    "dposisi": "diposisi",
+    "tanda2nya": "tanda-tandanya",
+    "dijwb": "dijawab",
+    "tmn2nya": "teman-temannya",
+    "sayy": "sayang",
+    "salaam": "salam",
+    "ngajar": "mengajar",
+    "fto2": "foto-foto",
+    "laen": "lain",
+    "dallam": "dalam",
+    "tentanh": "tentang",
+    "nangiss": "menangis",
+    "nnton": "menonton",
+    "kejadianny": "kejadiannya",
+    "klg": "keluarga",
+    "sayaang": "sayang",
+    "msg2": "masing-masing",
+    "pgnnya": "penginnya",
+    "meluk": "memeluk",
+    "siiihhh": "sih",
+    "mupeng": "muka pengin",
+    "caya": "percaya",
+    "aduhhhhhhhhh": "aduh",
+    "buseett": "buset",
+    "mblo": "jomblo",
+    "lucuuu": "lucu",
+    "gagahx": "gagahnya",
+    "miriiiip": "mirip",
+    "kaliiii": "kali",
+    "niru": "meniru",
+    "bpkmu": "bapakmu",
+    "sangt": "sangat",
+    "baang": "bang",
+    "gasih": "enggak sih",
+    "yuu": "yuk",
+    "yuuu": "yuk",
+    "samaa": "sama",
+    "ngademin": "mengademkan",
+    "aahh": "ah",
+    "makasi": "terima kasih",
+    "looo": "loh",
+    "yokk": "yuk",
+    "gils": "gila",
+    "ono": "sono",
+    "weeeh": "wih",
+    "suksea": "sukses",
+    "temenan": "berteman",
+    "sehh": "sih",
+    "deket": "dekat",
+    "dekt": "dekat",
+    "genggg": "geng",
+    "yawloh": "ya allah",
+    "bhnya": "bahannya",
+    "loo": "lo",
+    "samaaaa": "sama",
+    "abanggku": "abangku",
+    "sayanggg": "sayang",
+    "dsni": "disini",
+    "ciieeeeeee": "cie",
+    "kokohh": "engkoh",
+    "pdhal": "padahal",
+    "takuttt": "takut",
+    "yuks": "yuk",
+    "pnjual": "penjual",
+    "yh": "ya",
+    "dung": "dong",
+    "latian": "latihan",
+    "aaaaaaakkk": "ah",
+    "mauuuu": "mau",
+    "soga": "moga",
+    "tteh": "teteh",
+    "sintron": "sinetron",
+    "astagaa": "astaga",
+    "ancurrr": "hancur",
+    "dblkang": "dibelakang",
+    "yayang": "sayang",
+    "gokillllll": "gila",
+    "aplks": "aplikasi",
+    "ska": "suka",
+    "ktawa": "ketawa",
+    "baguuus": "bagus",
+    "kaaan": "kan",
+    "ngepoin": "mengepoi",
+    "uuhh": "uh",
+    "beut": "banget",
+    "njirrr": "anjir",
+    "pengeeenn": "pengin",
+    "dongggg": "dong",
+    "hatii": "hati",
+    "besook": "besok",
+    "mauu": "mau",
+    "gtuu": "begitu",
+    "njayyy": "anjay",
+    "maacih": "terima kasih",
+    "tokayyy": "tahi",
+    "to": "tapi",
+    "mksdku": "maksudku",
+    "gituin": "begitukan",
+    "lgsung": "langsung",
+    "cba": "coba",
+    "nh": "nih",
+    "ilang\"": "hilang-hilang",
+    "giniin": "beginikan",
+    "ksini": "kesini",
+    "kubarikan": "kuberikan",
+    "ayank": "sayang",
+    "anyeng": "anjing",
+    "yankkk": "sayang",
+    "cukurrr": "cukur",
+    "gilaaaaaa": "gila",
+    "yhaaa": "ya",
+    "qaqaaaa": "kakak",
+    "sayangkuuuuu": "sayangku",
+    "kakakuuu": "kakakku",
+    "banx": "bang",
+    "edannn": "edan",
+    "bape": "bawa perasaan",
+    "artis\"": "artis-artis",
+    "ngelahirin": "melahirkan",
+    "paksain": "memaksa",
+    "biasaa": "biasa",
+    "hub": "hubungan",
+    "hubunggi": "hubungi",
+    "loooh": "loh",
+    "telimakacih": "terima kasih",
+    "nerawang": "menerawang",
+    "cantiiiik": "cantik",
+    "didapet": "didapat",
+    "tanya2": "tanya-tanya",
+    "pede": "percaya diri",
+    "kuningggg": "kuning",
+    "nyolot": "menyolot",
+    "elahh": "alah",
+    "pnting": "penting",
+    "bela2in": "membela-bela",
+    "marah2an": "marah-marahan",
+    "wlaupun": "walaupun",
+    "syantiiiiikkkkkkkkkkkk": "cantik",
+    "bwa\"": "bawa-bawa",
+    "agma": "agama",
+    "hijabb": "hijab",
+    "kerrennn": "keren",
+    "ngetik": "mengetik",
+    "ntah": "entah",
+    "pan": "kapan",
+    "mateeeek": "mati",
+    "geetoo": "begitu",
+    "sewain": "menyewa",
+    "kokkk": "kok",
+    "muluuu": "melulu",
+    "yaaang": "yang",
+    "iyaa": "iya",
+    "gituu": "begitu",
+    "yappp": "ya",
+    "uwahhhhh": "wah",
+    "bnr2": "benar-benar",
+    "psgn": "pasangan",
+    "ujg": "ujung",
+    "rmbut": "rambut",
+    "smp": "sampai",
+    "kki": "kaki",
+    "hayukk": "hayo",
+    "ntab": "mantab",
+    "atuhhh": "atuh",
+    "yukss": "yuk",
+    "lihaatttt": "lihat",
+    "niiiihh": "nih",
+    "liattt": "lihat",
+    "cuyyy": "cuy",
+    "gapernah": "enggak pernah",
+    "liatiii": "lihat",
+    "jombsss": "jomblo",
+    "emesshhh": "gemas",
+    "gemeessss": "gemas",
+    "poollll": "pol",
+    "gemesyak": "gemas ya",
+    "bngttt": "banget",
+    "ngegmesin": "menggemaskan",
+    "hndak": "hendak",
+    "hndk": "hendak",
+    "iiih": "ih",
+    "lutunaa": "lucunya",
+    "abiz": "habis",
+    "gemes": "gemas",
+    "ngareppppp": "mengharap",
+    "aamiinin": "amin",
+    "imuutt": "imut",
+    "abizzz": "habis",
+    "tay": "tahi",
+    "toketnya": "teteknya",
+    "tumpe2": "tumpah-tumpah",
+    "lenje": "lenjeh",
+    "tuuuuh": "tuh",
+    "cantinya": "cantiknya",
+    "macam2": "macam-macam",
+    "mbak\"": "mbak-mbak",
+    "ngatain": "mengatai",
+    "mbaknyaahh": "mbaknya",
+    "pyudara": "payudara",
+    "ditutupin": "ditutupi",
+    "bgitu": "begitu",
+    "ngomongnya": "mengomongnya",
+    "sich": "sih",
+    "cantiik2": "cantik-cantik",
+    "hati.a": "hatinya",
+    "mk.a": "makanya",
+    "mlt.a": "mulutnya",
+    "nyerocooooos": "mencerocos",
+    "kyk.a": "kayaknya",
+    "sklh": "sekolah",
+    "pljrn": "pelajaran",
+    "srng": "sering",
+    "ngilang": "menghilang",
+    "dikatain": "dikatai",
+    "maluuu": "malu",
+    "ngalahin": "mengalahkan",
+    "brisi": "berisi",
+    "pkoknya": "pokoknya",
+    "canti": "cantik",
+    "astagfirullh": "astagfirullah",
+    "nutupin": "menutupi",
+    "ori": "orisinal",
+    "kakakaaaaaaaaaaaaaa": "kakak",
+    "cantikkkkkkkk": "cantik",
+    "batwc": "banget",
+    "kamyuhhh": "kamu",
+    "dbwh": "dibawah",
+    "bukti2": "bukti-bukti",
+    "senenggg": "senang",
+    "mao": "mau",
+    "murhan": "murahan",
+    "prwtn": "perawatan",
+    "wjh": "wajah",
+    "bgettt": "banget",
+    "mereka2": "mereka-mereka",
+    "pakke": "pakai",
+    "dipake": "dipakai",
+    "ktergantungan": "ketergantungan",
+    "prwatn": "perawatan",
+    "ngebuktiin": "membuktikan",
+    "hslnya": "hasilnya",
+    "awal2": "awal-awal",
+    "setabil": "stabil",
+    "maksih": "terima kasih",
+    "gratiss": "gratis",
+    "bbrpa": "beberapa",
+    "gara\"": "gara-gara",
+    "benar\"": "benar-benar",
+    "ajaibb": "ajaib",
+    "pokonya": "pokoknya",
+    "setujuuu": "setuju",
+    "digituin": "dibegitukan",
+    "sekolahin": "sekolahkan",
+    "ajarin": "ajarkan",
+    "sendirii": "sendiri",
+    "mrnghadapi": "menghadapi",
+    "apalg": "apalagi",
+    "naka": "nakal",
+    "sdkt": "sedikit",
+    "besar2in": "besar-besarkan",
+    "bgmana": "bagaimana",
+    "s*inetr*n": "sinetron",
+    "mrusak": "merusak",
+    "mndpt": "mendapat",
+    "skt": "sakit",
+    "sebnyak": "sebanyak",
+    "terburu2": "terburu-buru",
+    "baik2": "baik-baik",
+    "ngumpat2": "mengumpat-ngumpat",
+    "nantangin": "menantang",
+    "ngegampar": "menggampar",
+    "ngelaporin": "melaporkan",
+    "salahin": "salahkan",
+    "gabisa": "tidak bisa",
+    "konsekwensi": "konsekuensi",
+    "muliany": "mulianya",
+    "mungki": "mungkin",
+    "lngsung": "langsung",
+    "tsb": "tersebut",
+    "t4": "tempat",
+    "bacahalah": "bacalah",
+    "dikerasin": "dikerasi",
+    "gkkan": "enggak akan",
+    "ngulangin": "mengulangi",
+    "bedaa": "beda",
+    "pnyaa": "punya",
+    "bol3h": "boleh",
+    "ngadu": "mengadu",
+    "ketauan": "ketahuan",
+    "dimarahin": "dimarahi",
+    "nyelesain": "menyelesaikan",
+    "troma": "trauma",
+    "kerasin": "kerasi",
+    "kamu2": "kamu-kamu",
+    "cewer": "jewer",
+    "bilanh": "bilang",
+    "jwban": "jawaban",
+    "nuduh": "menuduh",
+    "ngatur": "mengatur",
+    "rajin2": "rajin-rajin",
+    "bacaaaa": "baca",
+    "kekk": "kayak",
+    "jungkiir": "jungkir",
+    "gunaa": "guna",
+    "bales2in": "balas-membalas",
+    "orangg": "orang",
+    "tauuuu": "tau",
+    "byak": "banyak",
+    "kepad": "kepada",
+    "bantuanny": "bantuannya",
+    "ttinggi": "tinggi",
+    "perna": "pernah",
+    "grgr": "gara-gara",
+    "jari2": "jari-jari",
+    "pukulin": "pukuli",
+    "bengkak2": "bengkak-bengkak",
+    "komentarin": "mengomentari",
+    "bijak2": "bijak-bijak",
+    "lama2": "lama-lama",
+    "menurur": "menurut",
+    "tipe2": "tipe-tipe",
+    "diliat": "dilihat",
+    "liatlah": "lihatlah",
+    "teguran2": "teguran-teguran",
+    "gr2": "gara-gara",
+    "gamau": "enggak mau",
+    "skolah": "sekolah",
+    "pdahal": "padahal",
+    "klas": "kelas",
+    "tkut": "takut",
+    "grunya": "gurunya",
+    "pndah": "pindah",
+    "liat2": "lihat-lihat",
+    "masukin": "memasukkan",
+    "dilindungin": "dilindungi",
+    "kasiaannn": "kasihan",
+    "miring2": "miring-miring",
+    "tinggalin": "tinggalkan",
+    "kaitannha": "kaitannya",
+    "sud": "sudah",
+    "pinter": "pintar",
+    "rana": "ranah",
+    "thdp": "terhadap",
+    "scr": "secara",
+    "bhkn": "bahkan",
+    "justeru": "justru",
+    "ngatai": "mengatai",
+    "kln": "kalian",
+    "sukak": "suka",
+    "termuraaahhhh": "termurah",
+    "brkunjun": "berkunjung",
+    "suarranya": "suaranya",
+    "bner\"": "benar-benar",
+    "iu": "itu",
+    "bgussss": "bagus",
+    "kmaren": "kemarin",
+    "ambilin": "mengambil",
+    "biasaaaa": "biasa",
+    "luuuaar": "luar",
+    "redho": "ridho",
+    "rezki": "rezeki",
+    "kepd": "kepada",
+    "luaarrr": "luar",
+    "biasaaa": "biasa",
+    "jadilh": "jadilah",
+    "bnr": "benar",
+    "terhaaru": "terharu",
+    "orrunya": "orang tuanya",
+    "flm": "film",
+    "kalok": "kalo",
+    "adek2": "adek-adek",
+    "loncatt": "loncat",
+    "hampasss": "hempas",
+    "tehh": "teh",
+    "bunga2": "bunga-bunga",
+    "apaaan": "apaan",
+    "ampuuunn": "ampun",
+    "daaah": "dah",
+    "bangetttttt": "banget",
+    "ituh": "itu",
+    "cantiiikk": "cantik",
+    "suaranyaaaaaa": "suaranya",
+    "idoolaaa": "idola",
+    "pulaa": "pula",
+    "penyanyi2": "penyanyi-penyanyi",
+    "wiih": "wih",
+    "apaa": "apa",
+    "miriip": "mirip",
+    "allaahh": "allah",
+    "ajahhh": "saja",
+    "trims": "terima kasih",
+    "dehat": "sehat",
+    "salammmm": "salam",
+    "hari2": "hari-hari",
+    "sihat": "sehat",
+    "buruann": "buruan",
+    "rekomendain": "rekomendasikan",
+    "trussss": "terus",
+    "bangt": "banget",
+    "cepet": "cepat",
+    "pesen": "pesan",
+    "boong": "bohong",
+    "prawatan": "perawatan",
+    "mkin": "makin",
+    "dimao": "dimau",
+    "dijadiin": "dijadikan",
+    "silahkn": "silakan",
+    "kasiatnya": "khasiatnya",
+    "minyak\"an": "minyak-minyakan",
+    "suksess": "sukses",
+    "prodak": "produk",
+    "trasa": "terasa",
+    "minpi": "mimpi",
+    "bner2": "benar-benar",
+    "mutihin": "memutihkan",
+    "smster": "semester",
+    "kmren": "kemarin",
+    "ucull": "lucu",
+    "ngomong\"": "ngomong-ngomong",
+    "udehh": "sudah",
+    "syngnya": "sayangnya",
+    "dipermainin": "dipermainkan",
+    "kocakkk": "kocak",
+    "dasarrr": "dasar",
+    "waaaaw": "wow",
+    "cannnnntikkkkkkk": "cantik",
+    "mukax": "mukanya",
+    "cantikx": "cantiknya",
+    "fatanik": "fanatik",
+    "protestin": "protestan",
+    "kakau": "kalau",
+    "marh": "marah",
+    "emngnya": "memangnya",
+    "cantiknyaa": "cantiknya",
+    "darpada": "daripada",
+    "cooooooocok": "cocok",
+    "pkk": "pakai",
+    "sling": "saling",
+    "agama'ny": "agamanya",
+    "bilng": "bilang",
+    "prcy": "percaya",
+    "lurusin": "meluruskan",
+    "biri": "biru",
+    "luco": "lucu",
+    "ultha": "ultah",
+    "batikk": "batik",
+    "arab2": "arab-arab",
+    "luchu": "lucu",
+    "baguss": "bagus",
+    "sedihhh": "sedih",
+    "syang": "sayang",
+    "ngasi": "mengasih",
+    "naaaak": "nak",
+    "astafirullah": "astagfirullah",
+    "peragain": "peragakan",
+    "shayyy": "say",
+    "anjaayy": "anjay",
+    "shay": "say",
+    "ngilerrrr": "mengiler",
+    "woyyy": "woy",
+    "shaaaay": "say",
+    "hempaass": "hempas",
+    "sayyy": "say",
+    "shayy": "say",
+    "syantiek": "cantik",
+    "njay": "anjay",
+    "hehh": "eh",
+    "cantik2": "cantik-cantik",
+    "kam": "kamu",
+    "ingeet": "ingat",
+    "sblh": "sebelah",
+    "nawarin": "menawari",
+    "amiiiiin": "amin",
+    "jauhhh": "jauh",
+    "waaahhh": "wah",
+    "ajakin": "mengajak",
+    "mntn": "mantan",
+    "ade": "adek",
+    "luhhh": "lu",
+    "yooookkk": "yuk",
+    "jrnk": "jarang",
+    "jelas\"": "jelas-jelas",
+    "kayax": "kayak",
+    "dblkng": "dibelakang",
+    "anjirr": "anjir",
+    "mirippp": "mirip",
+    "sangattt": "sangat",
+    "iyap": "iya",
+    "mayann": "lumayan",
+    "autuhh": "tau tuh",
+    "atutt": "takut",
+    "ketara": "tertara",
+    "giniii": "begini",
+    "mbaaass": "mbak",
+    "bund": "bunda",
+    "bangeeettt": "banget",
+    "almh": "almarhumah",
+    "temenkuuh": "temanku",
+    "suami'y": "suaminya",
+    "bngeeeetttt": "banget",
+    "entr": "entar",
+    "kyax": "kayak",
+    "cuantikkk": "cantik",
+    "mksdnya": "maksudnya",
+    "kaaaaaaaaaakkkkkkkkkkk": "kak",
+    "kucing'y": "kucingnya",
+    "nama'in": "namai",
+    "panggilan'ya": "panggilannya",
+    "panggilan'y": "panggilannya",
+    "z": "saja",
+    "kalw": "kalau",
+    "tips2": "tips-tips",
+    "alu": "aku",
+    "ngerrrriiii": "ngeri",
+    "ngriii": "mengiri",
+    "amatt": "amat",
+    "smpai": "sampai",
+    "kox": "kok",
+    "tmbah": "tambah",
+    "cntikk": "cantik",
+    "pkee": "pakai",
+    "smkin": "semakin",
+    "amiiiiinnn": "amin",
+    "bgmna": "bagaimana",
+    "ssorg": "seseorang",
+    "hdpn": "hadapan",
+    "foto2": "foto-foto",
+    "mnambh": "menambah",
+    "ktaatan": "ketaatan",
+    "stju": "setuju",
+    "cantikkkkkk": "cantik",
+    "dilepas2": "dilepas-lepas",
+    "tehhh": "teh",
+    "istiqomahhh": "istikamah",
+    "tehhhh": "teh",
+    "prodaknya": "produknya",
+    "imutt": "imut",
+    "amu": "kamu",
+    "nahh": "nah",
+    "mauuuuuuu": "mau",
+    "jilbb": "jilbab",
+    "tmn": "teman",
+    "ndut": "gendut",
+    "ngecek": "mengecek",
+    "psti": "pasti",
+    "penasarn": "penasaran",
+    "cuyy": "cuy",
+    "astauviruloh": "astagfirullah",
+    "paaak": "pak",
+    "diajarin": "diajari",
+    "gawl": "gaul",
+    "kecr": "kece",
+    "iih": "ih",
+    "laaaah": "lah",
+    "aned": "banget",
+    "gingsungny": "gingsulnya",
+    "blh": "boleh",
+    "cariin": "carikan",
+    "kenceng": "kencang",
+    "cuanti": "cantik",
+    "mbanya": "mbaknya",
+    "knlan": "kenalan",
+    "mbaakk": "mbak",
+    "mrka": "mereka",
+    "nyusahhin": "menyusahkan",
+    "byaran": "bayaran",
+    "wlawpun": "walaupun",
+    "sedangkn": "sedangkan",
+    "tnpa": "tanpa",
+    "bnggain": "banggakan",
+    "nyusahin": "menyusahkan",
+    "malu2in": "malu-malui",
+    "dibanggain": "dibanggakan",
+    "wlau": "walau",
+    "komenan": "komentar",
+    "bangga\"in": "membangga-banggakan",
+    "krya": "karya",
+    "bilang\"": "bilang-bilang",
+    "tinggall": "tinggal",
+    "dmna": "dimana",
+    "dripda": "daripada",
+    "bangga2in": "membangga-banggakan",
+    "dibnggain": "dibanggakan",
+    "karya2": "karya-karya",
+    "drimana": "darimana",
+    "ngepake'": "memakai",
+    "gksalah": "enggak salah",
+    "nuntut": "menuntut",
+    "ngebiarin": "membiarkan",
+    "bhas": "bahas",
+    "lagu'y": "lagunya",
+    "jadiin": "jadikan",
+    "diem": "diam",
+    "nyampah": "menyampah",
+    "mba\"": "mbak-mbak",
+    "bukan'a": "bukannya",
+    "tappi": "tapi",
+    "kalli": "kali",
+    "pacara": "pacaran",
+    "ngerebut\"": "merebut-rebut",
+    "lluu": "lu",
+    "mbaa": "mbak",
+    "ngerussak": "merusak",
+    "bela\"in": "membela-bela",
+    "bellain": "membela",
+    "kallo": "kalo",
+    "coment": "komentar",
+    "dewassa": "dewasa",
+    "comnet": "komen",
+    "pikir\"": "pikir-pikir",
+    "kaya'a": "kayanya",
+    "kuyyy": "yuk",
+    "kitaa": "kita",
+    "sgtu'y": "sebegitunya",
+    "ngebelain": "membela",
+    "tpii": "tapi",
+    "karya\"": "karya-karya",
+    "do": "di",
+    "cali": "caci",
+    "penghrgaan": "penghargaan",
+    "ajjh": "saja",
+    "lbihh": "lebih",
+    "baikk": "baik",
+    "drii": "dari",
+    "artist\"": "artis-artis",
+    "maki\"": "maki-maki",
+    "sendirinnya": "sendirinya",
+    "stidaknya": "setidaknya",
+    "may": "mau",
+    "trbaikk": "terbaik",
+    "punn": "pun",
+    "mengikutii": "mengikuti",
+    "atassan": "atasan",
+    "klauu": "kalau",
+    "jngnn": "jangan",
+    "so": "sok",
+    "sendirinyya": "sendirinya",
+    "frestasiii": "prestasi",
+    "mst": "mesti",
+    "add": "ada",
+    "see": "sih",
+    "sibukx": "sibuknya",
+    "in": "ini",
+    "katanyaa": "katanya",
+    "lawaaaas": "lawas",
+    "kocaaaak": "kocak",
+    "syng": "sayang",
+    "adenya": "adeknya",
+    "pkoknyaa": "pokoknya",
+    "dsana": "disana",
+    "dua2nya": "dua-duanya",
+    "sichhhhhhhhhh": "sih",
+    "nampak": "menampak",
+    "tetehh": "teteh",
+    "wooowww": "wow",
+    "cobain": "mencoba",
+    "muga": "moga",
+    "kenalin": "memperkenalkan",
+    "janka": "jangka",
+    "wawwwww": "wow",
+    "waaaww": "wow",
+    "waaawwww": "wow",
+    "mantapp": "mantap",
+    "cobaaa": "coba",
+    "kageet": "kaget",
+    "bangettttttt": "banget",
+    "oplas": "operasi plastik",
+    "nambahh": "bertambah",
+    "paripurnahh": "paripurna",
+    "wanitah": "wanita",
+    "indonesiaah": "indonesia",
+    "cumn": "cuman",
+    "gegra": "gegara",
+    "brita": "berita",
+    "fotbar": "foto bareng",
+    "wajarrr": "wajar",
+    "sngt": "sangat",
+    "wk": "waktu",
+    "bingiittt": "banget",
+    "nampar": "menampar",
+    "tukan": "tukang",
+    "jatoh": "jatuh",
+    "muka\"": "muka-muka",
+    "cantik2nya": "cantik-cantiknya",
+    "sdgkn": "sedangkan",
+    "apa\"": "apa-apa",
+    "mancungin": "memancungkan",
+    "idung": "hidung",
+    "kusem": "kusam",
+    "drpada": "daripada",
+    "kmar": "kamar",
+    "diemm": "diam",
+    "tnggu": "tunggu",
+    "ketawain": "mentertawakan",
+    "yaelahhh": "alah",
+    "sikap\"": "sikap-sikap",
+    "bales": "balas",
+    "ampuun": "ampun",
+    "ngejatuhin": "manjatuhkan",
+    "ngelakuin": "melakukan",
+    "gedeg": "gedek",
+    "muka2": "muka-muka",
+    "eey": "eh",
+    "kslahan": "kesalahan",
+    "perhatiam": "perhatian",
+    "dibiarin": "dibiarkan",
+    "sbnrny": "sebenarnya",
+    "trjd": "terjadi",
+    "mkir": "memikir",
+    "hny": "hanya",
+    "apalai": "apalagi",
+    "bkal": "bakal",
+    "saat2": "saat-saat",
+    "nyadar": "menyadar",
+    "bka": "buka",
+    "berani2": "berani-berani",
+    "lucuuuuu": "lucu",
+    "pipi'y": "pipinya",
+    "gemmeeezzz": "gemas",
+    "sukam": "suka",
+    "menghilangkn": "menghilangkan",
+    "mnjdkan": "menjadikan",
+    "mudah2n": "mudah-mudahan",
+    "stlh": "setelah",
+    "soalx": "soalnya",
+    "keche": "kece",
+    "badaii": "badai",
+    "btuh": "butuh",
+    "ktanya": "katanya",
+    "bebrp": "beberapa",
+    "sblum": "sebelum",
+    "santab": "santap",
+    "salehah": "salihah",
+    "mikirin": "memikirkan",
+    "subhannallah": "subhanallah",
+    "konsul": "konsultasi",
+    "pengalam": "pengalaman",
+    "poko": "pokok",
+    "trun": "turun",
+    "kuninggg": "kuning",
+    "pinkkkk": "pink",
+    "warnany": "warnanya",
+    "seger": "segar",
+    "senangat": "semangat",
+    "msknya": "masaknya",
+    "kerennnn": "keren",
+    "ciptain": "menciptakan",
+    "bagussss": "bagus",
+    "sayangkuh": "sayangku",
+    "gans": "ganteng",
+    "kren": "keren",
+    "babget": "banget",
+    "dihh": "dih",
+    "jadu": "jadi",
+    "ksyngn": "kesayangan",
+    "haru": "harus",
+    "ngingetin": "mengingatkan",
+    "narik": "menarik",
+    "orang\"": "orang-orang",
+    "gokilll": "gila",
+    "astagaaaa": "astaga",
+    "hancuuuuuy": "hancur",
+    "mattihhh": "mati",
+    "beudd": "banget",
+    "termiribkan": "termiripkan",
+    "dngerin": "mendengarkan",
+    "brrti": "berarti",
+    "wenakk": "enak",
+    "nganteng": "ganteng",
+    "abanggg": "abang",
+    "seksii": "seksi",
+    "gtuh": "begitu",
+    "jadii": "jadi",
+    "emeezzz": "gemas",
+    "amohhh": "kamu",
+    "maau": "mau",
+    "eyke": "aku",
+    "gilakkkkk": "gila",
+    "awk": "awak",
+    "duhhhhh": "duh",
+    "wowww": "wow",
+    "liaatt": "lihat",
+    "iniiiii": "ini",
+    "aloh": "allah",
+    "ngettt": "banget",
+    "maso": "masa",
+    "brubah": "berubah",
+    "pelastik": "plastik",
+    "keak": "kayak",
+    "dengerin": "mendengarkan",
+    "beud": "banget",
+    "pahamin": "pahami",
+    "takuuuuut": "takut",
+    "ahahahanjirrr": "anjir",
+    "jogetin": "berjoget",
+    "shaay": "say",
+    "boker": "berak",
+    "pacarnyaa": "pacarnya",
+    "siapaa": "siapa",
+    "matii": "mati",
+    "ketawaa": "ketawa",
+    "wanjiir": "anjir",
+    "bw": "bawa",
+    "minta": "meminta",
+    "bnran": "benaran",
+    "sgla": "segala",
+    "uitnya": "duitnya",
+    "beliiin": "belikan",
+    "yaaah": "ya",
+    "sekaeang": "sekarang",
+    "tgk": "tengok",
+    "tanyain": "tanyakan",
+    "jatuhnyaa": "jatuhnya",
+    "banyakin": "membanyaki",
+    "tipu2nya": "tipu-tipunya",
+    "doaang": "doang",
+    "gituan": "begituan",
+    "kaj": "kak",
+    "wahhhhhh": "wah",
+    "iiiiiiiii": "ih",
+    "kaliiiiiii": "kali",
+    "melebihin": "melebihi",
+    "gakpapa": "enggak apa-apa",
+    "kalogak": "kalo enggak",
+    "sm2": "sama-sama",
+    "ndukung": "mendukung",
+    "kaaaaa": "kak",
+    "aamiinnn": "amin",
+    "skluarga": "sekeluarga",
+    "suaminga": "suaminya",
+    "berhijap": "berhijab",
+    "smgaa": "semoga",
+    "istiqamah": "istikamah",
+    "cuaaantikk": "cantik",
+    "muraaaaah": "murah",
+    "baraang": "barang",
+    "aamiiin": "amin",
+    "bets": "banget",
+    "alhamdulillaaaaah": "alhamdulillah",
+    "sembuhin": "menyembuhkan",
+    "pengrusak": "perusak",
+    "ngoceh": "mengoceh",
+    "aduhhh": "aduh",
+    "hpus": "hapus",
+    "pjang": "pajang",
+    "bdampingan": "berdampingan",
+    "kaga": "kagak",
+    "uih": "uh",
+    "serem\"": "seram-seram",
+    "happi\"": "hepi-hepi",
+    "bgtuu": "begitu",
+    "mff": "maaf",
+    "ktwa": "ketawa",
+    "trlalu": "terlalu",
+    "jjur": "jujur",
+    "ngmg": "mengomong",
+    "semogaa": "semoga",
+    "kepelesett": "terpeleset",
+    "geeelaakk": "gila",
+    "bolang": "bocah petualang",
+    "pkek": "pakai",
+    "lagihh": "lagi",
+    "hedeuuhh": "aduh",
+    "stress": "stres",
+    "saltummmm": "salah kostum",
+    "mboizzz": "bois",
+    "suda": "sudah",
+    "kayaq": "kayak",
+    "ema": "emak",
+    "dirumahny": "dirumahnya",
+    "yuh": "tuh",
+    "rmbt": "rambut",
+    "apus": "hapus",
+    "siapayahh": "siapa ya",
+    "kostom": "kostum",
+    "gnii": "begini",
+    "atuu": "satu",
+    "pipinyaaa": "pipinya",
+    "bungkuuuuuuuuusss": "bungkus",
+    "iiiihhhhhj": "ih",
+    "emeessss": "gemas",
+    "pipine": "pipinya",
+    "glembeeeer": "gelambir",
+    "lucunaaa": "lucunya",
+    "cubanget": "lucu banget",
+    "pengenn": "pengin",
+    "unyuuk": "unyu",
+    "dedek": "adek",
+    "lucunyah": "lucunya",
+    "mantaaap": "mantap",
+    "keduaa": "kedua",
+    "trsrh": "terserah",
+    "ksih": "kasih",
+    "seterong": "setrong",
+    "teyuss": "terus",
+    "dimasukin": "dimasukkan",
+    "jelekin": "menjelekkan",
+    "jahatin": "menjahati",
+    "tai": "tahi",
+    "gtw": "enggak tau",
+    "qo": "kok",
+    "nulis": "menulis",
+    "nyebutin": "menyebutkan",
+    "ngertiin": "mengerti",
+    "rasaiin": "rasai",
+    "gakusah": "enggak usah",
+    "disni": "disini",
+    "sabarrr": "sabar",
+    "semangaatttt": "semangat",
+    "nyalahin": "menyalahkan",
+    "bedainnya": "membedakannya",
+    "keknya": "kayaknya",
+    "krus": "kurus",
+    "elaaaahhhh": "alah",
+    "cogan": "cowok ganteng",
+    "tap8": "tapi",
+    "pandanginya": "memandanginya",
+    "kenaliiin": "kenalkan",
+    "banyak2": "banyak-banyak",
+    "yo": "ya",
+    "suko": "suka",
+    "niih": "nih",
+    "sihhhh": "sih",
+    "sebaik\"": "sebaik-baik",
+    "segtu": "sebegitu",
+    "ngebenci": "membenci",
+    "bakar2in": "bakar-bakari",
+    "padhe": "pakde",
+    "yya": "ya",
+    "atw": "atau",
+    "dosa2mu": "dosa-dosamu",
+    "maafin": "memaafi",
+    "gile": "gila",
+    "ujung2": "ujung-ujung",
+    "dalem2": "dalam-dalam",
+    "kgak": "kagak",
+    "bahas2": "bahas-bahas",
+    "ud": "sudah",
+    "woles": "selow",
+    "hianatin": "khianati",
+    "halangin": "halangi",
+    "iyuh": "ih",
+    "iyuuuhhhh": "ih",
+    "gaje": "enggak jelas",
+    "gabakal": "enggak bakal",
+    "adapin": "menghadapi",
+    "ngehakimi": "menghakimi",
+    "ngejuangin": "memperjuangkan",
+    "dipojokin": "dipojokkan",
+    "bacotin": "bacoti",
+    "berati": "berarti",
+    "kebangetak": "kebangetan",
+    "tangkep": "tangkap",
+    "bt": "buat",
+    "sadis2": "sadis-sadis",
+    "maksir": "menaksir",
+    "hebatt": "hebat",
+    "pndang": "pandang",
+    "pmbelajaran": "pembelajaran",
+    "ngejelek": "menjelekkan",
+    "maslah": "masalah",
+    "mmperbaiki": "memperbaiki",
+    "nahan": "menahan",
+    "kafeh": "kafe",
+    "remang2": "remang-remang",
+    "mlh": "malah",
+    "tinggl": "tinggal",
+    "dirmh": "dirumah",
+    "iyuuhhh": "ih",
+    "ktika": "ketika",
+    "dipuja2": "dipuja-puja",
+    "ngrasain": "merasai",
+    "ityl": "itil",
+    "hbs": "habis",
+    "marah2": "marah-marah",
+    "wenak": "enak",
+    "ngarang": "mengarang",
+    "kelas'a": "kelasnya",
+    "hadeeehhh": "aduh",
+    "kecil\"": "kecil-kecil",
+    "gtu\"an": "begitu-gituan",
+    "gmanapun": "bagaimanapun",
+    "kr": "kira",
+    "nenek2": "nenek-nenek",
+    "taux": "taunya",
+    "urat2nya": "urat-uratnya",
+    "ketarik": "tertarik",
+    "ngorbanin": "mengorbankan",
+    "eksprsi": "ekspresi",
+    "gitulah": "begitulah",
+    "foto\"": "foto-foto",
+    "mamas": "mas",
+    "bandingin": "bandingkan",
+    "tua2": "tua-tua",
+    "terus2an": "terus-terusan",
+    "waduhh": "waduh",
+    "bawa\"": "bawa-bawa",
+    "badingkan": "membandingkan",
+    "ngurus": "mengurus",
+    "lanjutin": "lanjutkan",
+    "ributin": "meributkan",
+    "brantem": "berantem",
+    "belain": "membela",
+    "lipetan": "lipatan",
+    "nenek\"": "nenek-nenek",
+    "bneraan": "benaran",
+    "kageeet": "kaget",
+    "sangaaattt": "sangat",
+    "rmbuut": "rambut",
+    "nt": "nanti",
+    "walik": "balik",
+    "oma2": "oma-oma",
+    "kellen": "kalian",
+    "nyerocos": "mencerocos",
+    "ibuk2": "ibu-ibu",
+    "ngomenin": "mengomentari",
+    "iseng2": "iseng-iseng",
+    "niyyyyhhhh": "nih",
+    "sexi2": "seksi-seksi",
+    "blik": "balik",
+    "kenape": "kenapa",
+    "ladenin": "meladeni",
+    "skit": "sakit",
+    "hat": "hati",
+    "jilbabnye": "jilbabnya",
+    "ledkin": "meledeki",
+    "digabtikan": "digantikan",
+    "jng": "jangan",
+    "ngumung": "mengomong",
+    "ilang-in": "hilangkan",
+    "prinadi": "pribadi",
+    "luh": "lu",
+    "yep": "ya",
+    "helooooo": "halo",
+    "loe": "lo",
+    "palingann": "palingan",
+    "berjinah": "berzina",
+    "munaafikk": "munafik",
+    "urusn": "urusan",
+    "saudra": "saudara",
+    "trganggu": "terganggu",
+    "bhijab": "berhijab",
+    "lepasin": "melepas",
+    "smentara": "sementara",
+    "waduhhh": "waduh",
+    "ursan": "urusan",
+    "sudab": "sudah",
+    "dwsa": "dewasa",
+    "rpt2": "repot-repot",
+    "ngaji": "mengaji",
+    "nmr": "nomor",
+    "romantiz": "romantis",
+    "murmer": "murah meriah",
+    "pensaran": "penasaran",
+    "baru2": "baru-baru",
+    "yuukk": "yuk",
+    "kitaaa": "kita",
+    "lainnyaa": "lainnya",
+    "perbulannn": "perbulan",
+    "penyebab2": "penyebab-penyebab",
+    "nyupir": "menyopir",
+    "steess": "stres",
+    "kwatir": "kawatir",
+    "tengah2": "tengah-tengah",
+    "duetin": "duet",
+    "mudaa": "muda",
+    "sebenernya": "sebenarnya",
+    "silsturahmi": "silaturahmi",
+    "dijkt": "dijakarta",
+    "cums": "cuma",
+    "undangan2": "undangan-undangan",
+    "past": "pasti",
+    "ayukk": "yuk",
+    "ngucapin": "mengucapkan",
+    "filmny": "filmnya",
+    "ntn": "menonton",
+    "nobar": "menonton bareng",
+    "kemariin": "kemarin",
+    "knpp": "kenapa",
+    "lggi": "lagi",
+    "gaprgi": "enggak pergi",
+    "aaahh": "ah",
+    "pa2": "apa-apa",
+    "dtunggu": "ditunggu",
+    "masa2": "masa-masa",
+    "kepikir": "terpikir",
+    "seruuu": "seru",
+    "emeshh": "gemas",
+    "kaya": "seperti",
+    "astagaaaaaa": "astaga",
+    "pacarn": "pacaran",
+    "ktg": "kita",
+    "pacaranya": "pacarannya",
+    "mbaak": "mbak",
+    "ngalah": "mengalah",
+    "de": "deh",
+    "pacarane": "pacarannya",
+    "rusakkk": "rusak",
+    "yaaampunnn": "ya ampun",
+    "tuwek": "tua",
+    "mukae": "mukanya",
+    "ultahe": "ultahnya",
+    "kliatanya": "kelihatannya",
+    "pcaranya": "pacarannya",
+    "bermaksut": "bermaksud",
+    "tampialannya": "tampilannya",
+    "nikaah": "nikah",
+    "anak\"": "anak-anak",
+    "pankapan": "kapan-kapan",
+    "ngumbar": "mengumbar",
+    "dhpusin": "dihapuskan",
+    "istiqomah": "istikamah",
+    "mnutup": "menutup",
+    "bngatt": "banget",
+    "dii": "di",
+    "ooh": "oh",
+    "hapusin": "hapuskan",
+    "lohhh": "loh",
+    "ngeuh": "engah",
+    "sneng": "senang",
+    "mutusin": "memutuskan",
+    "ngapus": "menghapus",
+    "awl": "awal",
+    "hrus": "harus",
+    "bngkit": "bangkit",
+    "mncoba": "mencoba",
+    "wahhh": "wah",
+    "mutuain": "memutuskan",
+    "smw": "semua",
+    "geuliiiiiiis": "geulis",
+    "euyyyyy": "euy",
+    "uuh": "uh",
+    "ngirim": "mengirim",
+    "ngidam": "mengidam",
+    "waah": "wah",
+    "sampis": "sampah habis",
+    "maapin": "maafi",
+    "ngebala": "bala",
+    "mampuussss": "mampus",
+    "diihhhh": "dih",
+    "hrusnya": "harusnya",
+    "sabal": "sabar",
+    "udahlah": "sudahlah",
+    "kauuuu": "kau",
+    "sabaro": "sabar",
+    "eehhh": "eh",
+    "iiii": "ih",
+    "kreative": "kreatif",
+    "bangrt": "banget",
+    "azekkkk": "asik",
+    "kuaaatt": "kuat",
+    "bhet": "banget",
+    "inggrisny": "inggrisnya",
+    "dsna": "disana",
+    "iyaap": "iya",
+    "mksih": "terima kasih",
+    "nga": "tidak",
+    "canyk": "cantik",
+    "prodac": "produk",
+    "nyesell": "menyesal",
+    "ciyusss": "serius",
+    "cyin": "cinta",
+    "bangetttttttt": "banget",
+    "sexi": "seksi",
+    "bundaaaa": "bunda",
+    "bangget": "banget",
+    "bettt": "banget",
+    "cantiiillx": "cantik",
+    "brapa": "berapa",
+    "alaami": "alami",
+    "sabaarrr": "sabar",
+    "cantiiiikk": "cantik",
+    "bangeeeeetttt": "banget",
+    "cannntikk": "cantik",
+    "banggett": "banget",
+    "thnan": "tahunan",
+    "cuantik": "cantik",
+    "segerr": "segar",
+    "wouww": "wow",
+    "cantiiikkk": "cantik",
+    "pen": "pengin",
+    "catokin": "catok",
+    "ikut2an": "ikut-ikutan",
+    "comment2nya": "komentar-komentarnya",
+    "teman2": "teman-teman",
+    "besar2an": "besar-besaran",
+    "knsul": "konsultasi",
+    "brhasil": "berhasil",
+    "hilangin": "menghilangkan",
+    "kontak2": "kontak-kontak",
+    "dptnya": "dapatnya",
+    "applikasi": "aplikasi",
+    "kereeeeen": "keren",
+    "bngeet": "banget",
+    "gemesinnnnn": "menggemaskan",
+    "ongkiir": "ongkir",
+    "ajaibbbbb": "ajaib",
+    "saayyyyy": "say",
+    "lohhhh": "loh",
+    "ganteung": "ganteng",
+    "bhgia": "bahagia",
+    "iiiiiiiiii": "ih",
+    "lucuukk": "lucu",
+    "keciil": "kecil",
+    "yakinn": "yakin",
+    "pentass": "pentas",
+    "ngarep": "mengharap",
+    "lucu2": "lucu-lucu",
+    "testinya": "testimoninya",
+    "mengirusi": "mengurusi",
+    "khdpn": "kehidupan",
+    "ngelawan": "melawan",
+    "betuuuuulllllllllllllllll": "betul",
+    "bisax": "bisanya",
+    "klmbutan": "kelembutan",
+    "seburuk2": "seburuk-buruk",
+    "diingetin": "diingatkan",
+    "ngeriiiiii": "ngeri",
+    "nich": "nih",
+    "akhlah": "akhlak",
+    "elo2": "lo-lo",
+    "mandiin": "memandikan",
+    "nguburin": "menguburkan",
+    "ngebedain": "membedakan",
+    "urusanny": "urusannya",
+    "tuhanny": "tuhannya",
+    "brtngkar": "bertengkar",
+    "pndapat": "pendapat",
+    "looh": "loh",
+    "sharusnya": "seharusnya",
+    "mngkannya": "mangkanya",
+    "nyia2in": "menyia-nyiakan",
+    "brarti": "berarti",
+    "mndpat": "mendapat",
+    "kpuasan": "kepuasan",
+    "sgampang": "segampang",
+    "mlepaskan": "melepaskan",
+    "trll": "terlalu",
+    "sndr": "sendiri",
+    "sellow": "selow",
+    "sbbrnya": "sebenarnya",
+    "kasar2": "kasar-kasar",
+    "semangattt": "semangat",
+    "testi": "testimoni",
+    "banyaak": "banyak",
+    "bujukk": "bujuk",
+    "d.apa": "diapa",
+    "apain": "apai",
+    "dsar": "dasar",
+    "benetaran": "benaran",
+    "bneran": "benaran",
+    "si": "sih",
+    "kraya": "karya",
+    "brg": "bareng",
+    "ngebantu": "membantu",
+    "janjutin": "lanjutkan",
+    "kepppoin": "kepoi",
+    "recommendasi": "rekomendasi",
+    "btulan": "betulan",
+    "kha": "kah",
+    "s": "si",
+    "tutupin": "menutupi",
+    "wik": "wig",
+    "ithu": "itu",
+    "botakin": "botaki",
+    "botakkkk": "botak",
+    "bnrn": "benaran",
+    "week": "wig",
+    "gawul": "gaul",
+    "modes": "modis",
+    "brayyy": "bray",
+    "kcantikan": "kecantikan",
+    "bronis": "brondong manis",
+    "gapunya": "enggak punya",
+    "bkln": "bakalan",
+    "kecantikanga": "kecantikannya",
+    "hiii": "hai",
+    "piiiilih": "pilih",
+    "deeh": "deh",
+    "zama": "zaman",
+    "gnti": "ganti",
+    "nmnya": "namanya",
+    "tapo": "tapi",
+    "gkk": "tidak",
+    "petinggi2": "petinggi-petinggi",
+    "wota2": "wota-wota",
+    "indefendet": "independen",
+    "tempat2": "tempat-tempat",
+    "taik": "tahi",
+    "yuuuukkk": "yuk",
+    "dituutup": "ditutup",
+    "ngayal": "mengkhayal",
+    "smvk": "sempak",
+    "knyataan": "kenyataan",
+    "njrittt": "anjir",
+    "selmt": "selamat",
+    "taz": "atas",
+    "klhran": "kelahiran",
+    "pertma": "pertama",
+    "kelahuran": "kelahiran",
+    "pertamany": "pertamanya",
+    "mamax": "mamanya",
+    "ankx": "anaknya",
+    "cantip": "cantik",
+    "klahiran": "kelahiran",
+    "slmat": "selamat",
+    "mmbanggakan": "membanggakan",
+    "ortuny": "orang tuanya",
+    "selmat": "selamat",
+    "bnda": "bunda",
+    "nyah": "nya",
+    "prtamax": "pertamanya",
+    "moqa": "moga",
+    "yq": "yang",
+    "brbakti": "berbakti",
+    "gewlaaaaa": "gila",
+    "basodaraa": "bersaudara",
+    "hargs": "harga",
+    "perhatiin": "perhatikan",
+    "abal2": "abal-abal",
+    "bantuim": "bantu",
+    "adl": "adalah",
+    "pelwak": "pelawak",
+    "suces": "sukses",
+    "sucses": "sukses",
+    "garemin": "garami",
+    "gapake": "enggak pakai",
+    "ngiringan": "mengiringi",
+    "karir.a": "karirnya",
+    "aamin": "amin",
+    "teruz": "terus",
+    "kemarn": "kemarin",
+    "recomendasinya": "rekomendasinya",
+    "promoo": "promo",
+    "ongkirr": "ongkir",
+    "mskasih": "terima kasih",
+    "wowwwww": "wow",
+    "seeeemua": "semua",
+    "batesin": "batasi",
+    "bijin": "bikin",
+    "ngeidealin": "mengidealkan",
+    "bhn": "bahan",
+    "gasalah": "enggak salah",
+    "brsma": "bersama",
+    "le": "boleh",
+    "ugha": "juga",
+    "semuaaa": "semua",
+    "heeee": "hai",
+    "rame2": "rame-rame",
+    "yam": "ya",
+    "kartunin": "kartun",
+    "kyaknya": "kayaknya",
+    "abez": "habis",
+    "baaaaaang": "bang",
+    "ganteeeeng": "ganteng",
+    "entahhh": "entah",
+    "gimanaaaa": "bagaimana",
+    "duuhh": "duh",
+    "gantengnyaaaa": "gantengnya",
+    "kpn2": "kapan-kapan",
+    "pans": "fan",
+    "kuliyh": "kuliah",
+    "gantengkuuuuuu": "gantengku",
+    "atassss": "atas",
+    "orgny": "orangnya",
+    "owalaah": "walah",
+    "aslinyo": "aslinya",
+    "alissnyaa": "alisnya",
+    "masaaaa": "masa",
+    "komuk": "muka",
+    "kalahnye": "kalahnya",
+    "iyaaaa": "iya",
+    "fakultass": "fakultas",
+    "smrg": "semarang",
+    "unyu2": "unyu-unyu",
+    "koq": "kok",
+    "yyaaa": "ya",
+    "insonniaaa": "insomnia",
+    "adekx": "adeknya",
+    "azaab": "azab",
+    "gksi": "enggak sih",
+    "greged": "greget",
+    "alamiii": "alami",
+    "ktemu": "ketemu",
+    "ditayangin": "ditayangkan",
+    "ms\"": "masa-masa",
+    "meranin": "memerankan",
+    "nontonny": "menontonnya",
+    "rekomendasiiin": "merekomendasikan",
+    "sista2": "sista-sista",
+    "agan2": "agan-agan",
+    "ngg": "tidak",
+    "nanget": "banget",
+    "ngeditnya": "mengeditnya",
+    "himana": "bagaimana",
+    "kekgini": "kayak begini",
+    "subhanaallahh": "subhanallah",
+    "sangat2": "sangat-sangat",
+    "terharuuuu": "terharu",
+    "kata\"": "kata-kata",
+    "subhanallahhh": "subhanallah",
+    "tlsn": "tulisan",
+    "nagiss": "menangis",
+    "aneut": "banget",
+    "trrharu": "terharu",
+    "subhnallah": "subhanallah",
+    "allahh": "allah",
+    "suamiii": "suami",
+    "dcintai": "dicintai",
+    "klrga": "keluarga",
+    "liat'y": "lihatnya",
+    "lggeng": "langgeng",
+    "romantisny": "romatisnya",
+    "duhhh": "duh",
+    "pcar": "pacar",
+    "kakanga": "kakaknya",
+    "slw": "selow",
+    "cpa": "siapa",
+    "akuu": "aku",
+    "aelah": "alah",
+    "orabg": "orang",
+    "mukanyaa": "mukanya",
+    "kakakny": "kakaknya",
+    "woooyy": "woy",
+    "ngelucu": "melucu",
+    "bukak": "buka",
+    "mato": "mata",
+    "kareno": "karena",
+    "cino": "cina",
+    "munafikk": "munafik",
+    "meker": "mikir",
+    "indoneaia": "indonesia",
+    "benarin": "membenarkan",
+    "jaadii": "jadi",
+    "apo": "apa",
+    "nyo": "nya",
+    "miara": "memiara",
+    "jalanani": "menjalani",
+    "dalil2": "dalil-dalil",
+    "sunah2": "sunah-sunah",
+    "sdah": "sudah",
+    "benda2": "benda-benda",
+    "bilang2": "bilang-bilang",
+    "emangnya": "memangnya",
+    "rumpiin": "rumpi",
+    "hotak": "botak",
+    "ikut2": "ikut-ikut",
+    "jawabanny": "jawabannya",
+    "ajj": "saja",
+    "mikir2": "memikir-mikir",
+    "melihara": "memelihara",
+    "oooh": "oh",
+    "hidupx": "hidupnya",
+    "ngefans": "fan",
+    "lsg": "langsung",
+    "uztad": "ustad",
+    "anjingnyaa": "anjingnya",
+    "pegang2": "pegang-pegang",
+    "ilmh": "ilmu",
+    "menasehati": "menasihati",
+    "suka2": "suka-suka",
+    "kelus": "kali",
+    "hubngan": "hubungan",
+    "koclak": "kocak",
+    "bju": "baju",
+    "cinggirnyaaaa": "cinggirnya",
+    "yahhhh": "ya",
+    "miripppp": "mirip",
+    "sedikitlaahh": "sedikitlah",
+    "miriplahhhhhh": "miriplah",
+    "syediih": "sedih",
+    "mirp": "mirip",
+    "baju.a": "bajunya",
+    "wiiiihhhhhhhhh": "wih",
+    "gantheng": "ganteng",
+    "synk": "sayang",
+    "ngfans": "fan",
+    "miriiippp": "mirip",
+    "idungnya": "hidungnya",
+    "wooow": "wow",
+    "panglingg": "pangling",
+    "artisnyaa": "artisnya",
+    "dtggu": "ditunggu",
+    "trnyata": "ternyata",
+    "bgtttttttt": "banget",
+    "rapih": "rapi",
+    "buuun": "bun",
+    "iyaappps": "iya",
+    "sukse": "sukses",
+    "nih2": "nih-nih",
+    "baruu": "baru",
+    "kecptan": "kecepatan",
+    "rmbutnya": "rambutnya",
+    "giti": "begitu",
+    "penganten": "pengantin",
+    "wrn": "warna",
+    "ne": "ini",
+    "cantikkkkk": "cantik",
+    "fans": "fan",
+    "loksyut": "lokasi syuting",
+    "amfun": "ampun",
+    "k'": "kak",
+    "asuuu": "asu",
+    "kuu": "ku",
+    "dsini": "disini",
+    "dibls": "dibalas",
+    "ceklist": "ceklis",
+    "terusss": "terus",
+    "tlvn": "telepon",
+    "trkrim": "terkirim",
+    "kelaluan": "kelakuan",
+    "guanteng": "ganteng",
+    "cucok": "cocok",
+    "c": "sih",
+    "gueee": "gue",
+    "semangatt": "semangat",
+    "haduh": "aduh",
+    "mlz": "malas",
+    "emak2": "emak-emak",
+    "tante2": "tante-tante",
+    "kepoh": "kepo",
+    "jalanin": "menjalani",
+    "repong": "repot",
+    "ngrusin": "mengurusi",
+    "iy": "iya",
+    "dnk": "dong",
+    "senyumna": "senyumnya",
+    "ngejelek2in": "menjelek-jelekkan",
+    "hotx": "hotnya",
+    "cwnya": "ceweknya",
+    "mbaaahhh": "mbah",
+    "pasangn": "pasangan",
+    "sttus": "status",
+    "aama": "sama",
+    "hadeuuhhhh": "aduh",
+    "lebar2": "lebar-lebar",
+    "sstu": "sesuatu",
+    "serasiii": "serasi",
+    "cocokx": "cocoknya",
+    "emakx": "emaknya",
+    "iniiiiiiiiiiiiiii": "ini",
+    "cocookk": "cocok",
+    "kll": "kalo",
+    "arghhh": "ah",
+    "ungkapin": "ungkapkan",
+    "merrid": "merit",
+    "neh": "nih",
+    "cocokkkkk": "cocok",
+    "yaolohh": "ya allah",
+    "aee": "saja",
+    "naggung": "menanggung",
+    "battt": "banget",
+    "am": "sama",
+    "tah": "teh",
+    "luthuna": "lucunya",
+    "astagaaa": "astaga",
+    "suaraynyaa": "suaranya",
+    "duanyaa": "duanya",
+    "anjayyyy": "anjay",
+    "coeggg": "coeg",
+    "ancur": "hancur",
+    "koplak": "kocak",
+    "uaaasssiiiik": "asik",
+    "boss": "bos",
+    "nyubit": "mencubit",
+    "dede": "adek",
+    "gemez": "gemas",
+    "tium": "cium",
+    "gemeeezzzz": "gemas",
+    "ppa": "papa",
+    "papahhhnya": "papahnya",
+    "duuuhh": "duh",
+    "ginting": "ganteng",
+    "bingiiittzz": "banget",
+    "iiihh": "ih",
+    "dedeknya": "adeknya",
+    "hadeeuh": "aduh",
+    "geneeee": "begini",
+    "yooow": "ya",
+    "gemezz": "gemas",
+    "gayax": "gayanya",
+    "infpyunnnn": "ampun",
+    "paraaah": "parah",
+    "papiii": "papi",
+    "kamunyaa": "kamunya",
+    "ngambek": "mengambek",
+    "haduuuh": "aduh",
+    "kapaan": "kapan",
+    "nginjek": "menginjak",
+    "putihnyaa": "putihnya",
+    "ituuuu": "itu",
+    "omaaaaaaakk": "oma",
+    "loncattt": "loncat",
+    "didatengin": "didatangi",
+    "abg": "abang",
+    "kmariiin": "kemarin",
+    "ayoklaa": "ayolah",
+    "jelasssss": "jelas",
+    "kaliiin": "kalian",
+    "ujunggg": "ujung",
+    "kaakaaaa": "kakak",
+    "srruu": "seru",
+    "kannn": "kan",
+    "jmpaaaa": "jumpa",
+    "yukkk": "yuk",
+    "haii": "hai",
+    "syukaaakkk": "suka",
+    "dengeeriin": "dengarkan",
+    "yakaliiiii": "yakali",
+    "atuhh": "atuh",
+    "ngertii": "mengerti",
+    "apalgi": "apalagi",
+    "akuh": "aku",
+    "mesrany": "mesranya",
+    "jendes": "janda",
+    "ngggk": "tidak",
+    "coccokk": "cocok",
+    "msa": "masa",
+    "jendesss": "janda",
+    "klepek2": "klepek-klepek",
+    "bngtttt": "banget",
+    "ponakn": "ponakan",
+    "tantee": "tante",
+    "gadiss": "gadis",
+    "tpy": "tapi",
+    "jnda": "janda",
+    "bngy": "banget",
+    "bujngn": "bujangan",
+    "ngp": "mengapa",
+    "padetan": "padatan",
+    "bawa2": "bawa-bawa",
+    "nyobain": "mencoba",
+    "pcaran": "pacaran",
+    "or": "orang",
+    "tdak": "tidak",
+    "prcuma": "percuma",
+    "langgengggg": "langgeng",
+    "sekaliiiii": "sekali",
+    "anehhh": "aneh",
+    "hayal": "khayal",
+    "bedua": "berdua",
+    "bapeerr": "bawa perasaan",
+    "keinget": "teringat",
+    "merekak": "mereka",
+    "kreeenn": "keren",
+    "abisss": "habis",
+    "kocaaaakkk": "kocak",
+    "abiiiss": "habis",
+    "pass": "pas",
+    "personill": "personil",
+    "lengkapp": "lengkap",
+    "ampuuun": "ampun",
+    "iiihhhh": "ih",
+    "flim.a": "filmnya",
+    "trusan.a": "terusannya",
+    "tdung": "tudung",
+    "gangguin": "mengganggu",
+    "lgkah2": "langkah-langkah",
+    "taw": "tau",
+    "cntiiikkk": "cantik",
+    "tegaar": "tegar",
+    "sktlrang": "sekarang",
+    "kangeeeennnnn": "kangen",
+    "sjk": "sejak",
+    "tambh": "tambah",
+    "nangiis": "menangis",
+    "nyaaaaaaaaa": "nya",
+    "bundaa": "bunda",
+    "duuhhhhh": "duh",
+    "gaada": "enggak ada",
+    "malsudnya": "maksudnya",
+    "lluuccuu": "lucu",
+    "siappa": "siapa",
+    "martabakk": "martabak",
+    "skali2": "sekali-kali",
+    "kueren2": "keren-keren",
+    "abgnya": "abangnya",
+    "warkop": "warung kopi",
+    "hayuu": "hayo",
+    "kenapaa": "kenapa",
+    "ilang2an": "hilang-hilangan",
+    "ayooook": "ayo",
+    "astagaaaaaaaa": "astaga",
+    "inihhh": "ini",
+    "oom": "om",
+    "mansetan": "bermanset",
+    "cadasss": "cadas",
+    "kereeeeennn": "keren",
+    "temen\"": "teman-teman",
+    "telefisi": "televisi",
+    "nikmatin": "menikmati",
+    "mantappp": "mantap",
+    "mbahh": "mbah",
+    "giitu": "begitu",
+    "mtanya": "matanya",
+    "cpit": "sipit",
+    "dee": "dek",
+    "sumvahh": "sumpah",
+    "tamvann": "tampan",
+    "yap": "ya",
+    "guaaaaaaa": "gua",
+    "capa": "sapa",
+    "ngakakkk": "mengakak",
+    "liaat": "lihat",
+    "gantweng": "ganteng",
+    "anjjjjjjjj": "anjing",
+    "gakwad": "enggak kuat",
+    "seru2": "seru-seru",
+    "iniii": "ini",
+    "favoriteeee": "favorit",
+    "adaa": "ada",
+    "dinyanyiin": "dinyanyikan",
+    "seruu": "seru",
+    "nyengir": "menyengir",
+    "temennya": "temannya",
+    "klk": "kelak",
+    "brjdh": "berjodoh",
+    "akhrt": "akhirat",
+    "kangennnnn": "kangen",
+    "kanggen": "kangen",
+    "kangennnnnnn": "kangen",
+    "ysh": "ya",
+    "sypa": "siapa",
+    "nangisss": "menangis",
+    "brjodoh": "berjodoh",
+    "kaliann": "kalian",
+    "barengg": "bareng",
+    "kpnpun": "kapanpun",
+    "mendj": "menjadi",
+    "allahhhh": "allah",
+    "merindinggg": "merinding",
+    "amiennnn": "amien",
+    "iihh": "ih",
+    "lhir": "lahir",
+    "udeh": "sudah",
+    "menjdi": "menjadi",
+    "debay": "adek bayi",
+    "bangeer": "banget",
+    "lafazd": "lafaz",
+    "pmbyran": "pembayaran",
+    "plsa": "pulsa",
+    "dimana\"": "dimana-mana",
+    "sokk": "sok",
+    "ngambekan": "ambekan",
+    "sma2": "sama-sama",
+    "ngom": "mengomong",
+    "toloollll": "tolol",
+    "bodhooo": "bodoh",
+    "peliharaaaa": "pelihara",
+    "makanyaa": "makanya",
+    "ati\"": "hati-hati",
+    "kemakan": "termakan",
+    "bodhoo": "bodoh",
+    "siihhh": "sih",
+    "andaaa": "anda",
+    "buktinyaaa": "buktinya",
+    "smuaaa": "semua",
+    "ngambeknya": "mengambeknya",
+    "kebongkar": "terbongkar",
+    "tapii": "tapi",
+    "kasiian": "kasihan",
+    "diladenin": "diladeni",
+    "comen": "komen",
+    "ngtif": "negatif",
+    "comntr": "komentar",
+    "kaliannn": "kalian",
+    "brdiri": "berdiri",
+    "mulutny": "mulutnya",
+    "msalah": "masalah",
+    "trserh": "terserah",
+    "waduuuuh": "waduh",
+    "ngedukung": "mendukung",
+    "dihpus": "dihapus",
+    "mrekaa": "mereka",
+    "cakeeeeppp": "cakep",
+    "benerr": "benar",
+    "brg\"": "bareng-bareng",
+    "baanget": "banget",
+    "anjaaaayyyyyy": "anjay",
+    "ngetsz": "banget",
+    "utkmu": "untukmu",
+    "anj": "anjing",
+    "merekaa": "mereka",
+    "kann": "kan",
+    "dieee": "dia",
+    "yaahh": "ya",
+    "hijap": "hijab",
+    "ternodain": "ternodai",
+    "ngeri2": "ngeri-ngeri",
+    "mn": "mana",
+    "kt2": "kata-kata",
+    "agk": "agak",
+    "slhkan": "salahkan",
+    "jilbabny": "jilbabnya",
+    "perilakuny": "perilakunya",
+    "ketaatanny": "ketaatannya",
+    "kepda": "kepada",
+    "sblmny": "sebelumnya",
+    "bljr": "belajar",
+    "pedulilaaaah": "pedulilah",
+    "ingetin": "mengingatkan",
+    "terjrumus": "terjerumus",
+    "stuju": "setuju",
+    "sbb": "sebab",
+    "igtlah": "ingatlah",
+    "dtgkan": "datangkan",
+    "benahin": "membenahi",
+    "ohhhh": "oh",
+    "yapp": "ya",
+    "jauhh": "jauh",
+    "bingitt": "banget",
+    "buka2an": "buka-bukaan",
+    "ngembali": "kembali",
+    "semngat": "semangat",
+    "lekong": "laki",
+    "kacauuuu": "kacau",
+    "ngimpi": "mimpi",
+    "owh": "oh",
+    "ngerampas": "merampas",
+    "ngehancurin": "menghancurkan",
+    "ngungkit2": "mengungkit-ungkit",
+    "kaleee": "kali",
+    "caranga": "caranya",
+    "usa": "usah",
+    "dipikirin": "dipikirkan",
+    "nunduk": "menunduk",
+    "tembemmm": "tembem",
+    "lucuuuuuuuuuu": "lucu",
+    "bundaaa": "bunda",
+    "nyubitt": "mencubit",
+    "jls2": "jelas-jelas",
+    "supeer": "super",
+    "inni": "ini",
+    "appa": "apa",
+    "hayooo": "hayo",
+    "adyem": "adem",
+    "mitnah": "memfitnah",
+    "cantiknyaaaaa": "cantiknya",
+    "tmbm": "tembam",
+    "cantix": "cantik",
+    "kriput": "keriput",
+    "jelex": "jelek",
+    "drmn": "darimana",
+    "laku\"": "laku-laku",
+    "orang\"nya": "orang-orangnya",
+    "kacian": "kasihan",
+    "cape": "capek",
+    "mancing2": "memancing-mancing",
+    "eeeeh": "eh",
+    "kpancing": "terpancing",
+    "lakuin": "melakukan",
+    "cri": "cari",
+    "sbenernya": "sebenarnya",
+    "mikirinnn": "memikirkan",
+    "diam\"": "diam-diam",
+    "mengalahkn": "mengalahkan",
+    "nyindirin": "menyindir",
+    "nee": "ini",
+    "klakuan": "kelakuan",
+    "mksdx": "maksudnya",
+    "shabat": "sahabat",
+    "jk": "jika",
+    "brbuat": "berbuat",
+    "mmberi": "memberi",
+    "nm": "nama",
+    "sbhabat": "sahabat",
+    "pnjerumus": "penjerumus",
+    "tman": "teman",
+    "shbat": "sahabat",
+    "melakukn": "melakukan",
+    "seorg": "seorang",
+    "berkluarga": "berkeluarga",
+    "siapa2": "siapa-siapa",
+    "ketipu": "tertipu",
+    "laki\"": "laki-laki",
+    "mengait2kan": "mengait-ngaitkan",
+    "nyir2": "nyinyir",
+    "gosipin": "menggosipkan",
+    "sendri": "sendiri",
+    "bntar": "bentar",
+    "duuuhhh": "duh",
+    "nmbk": "menembak",
+    "gakkk": "tidak",
+    "abiiiiisssss": "habis",
+    "tikung2": "tikung-tikung",
+    "cwok": "cowok",
+    "bangedd": "banget",
+    "wuastagah": "astaga",
+    "bedaaa": "beda",
+    "jaoooh": "jauh",
+    "mateeeeeeeeeeee": "mati",
+    "parsis": "persis",
+    "sumpeh": "sumpah",
+    "iyh": "iya",
+    "kmana": "kemana",
+    "cantiqs": "cantik",
+    "kecik": "kecil",
+    "brasa": "berasa",
+    "trlihat": "terlihat",
+    "mmberikan": "memberikan",
+    "khidupan": "kehidupan",
+    "srpti": "seperti",
+    "dinamakn": "dinamakan",
+    "sgtu": "sebegitu",
+    "paati": "pasti",
+    "kutuu": "kutu",
+    "setelur2nya": "setelur-telurnya",
+    "khadiran": "kehadiran",
+    "kel": "keluarga",
+    "srta": "serta",
+    "kcil": "kecil",
+    "kberkahn": "keberkahan",
+    "kbahagiaan": "kebahagiaan",
+    "tntram": "tentram",
+    "brsama": "bersama",
+    "hngga": "hingga",
+    "brpndapat": "berpendapat",
+    "trutama": "terutama",
+    "hiraukn": "hiraukan",
+    "diamkn": "diamkan",
+    "hrsny": "harusny",
+    "brsyukur": "bersyukur",
+    "mmberikn": "memberikan",
+    "rasakn": "rasakan",
+    "cari2": "cari-cari",
+    "kesalahanny": "kesalahannya",
+    "kekuranganny": "kekurangannya",
+    "seandainy": "seandainya",
+    "perasaanny": "perasaannya",
+    "diindonesis": "diindonesia",
+    "liyatnya": "lihatnya",
+    "kayahhh": "kaya",
+    "ala2": "ala-ala",
+    "yook": "yuk",
+    "yoookkkk": "yuk",
+    "siihh": "sih",
+    "elus2": "elus-elus",
+    "asliiiii": "asli",
+    "aduuhhhh": "aduh",
+    "belom": "belum",
+    "padahl": "padahal",
+    "btul": "betul",
+    "kejahatn": "kejahatan",
+    "slam": "salam",
+    "ngelewati": "melewati",
+    "kalu": "kalau",
+    "ngerendahin": "merendahkan",
+    "apaalahh": "apalah",
+    "tnp": "tanpa",
+    "menyebut2": "menyebut-nyebut",
+    "mnt": "minta",
+    "kiya": "kita",
+    "miriiiiip": "mirip",
+    "dirimuuu": "dirimu",
+    "yoiiu": "yoi",
+    "semuanyaaaa": "semuanya",
+    "suka.a": "sukanya",
+    "jdii": "jadi",
+    "blnja": "belanja",
+    "brangnya": "barangnya",
+    "ada2": "ada-ada",
+    "nimpuk": "menimpuk",
+    "abiss": "habis",
+    "prlu": "perlu",
+    "coyyy": "coy",
+    "suaranyaa": "suaranya",
+    "jnagn": "jangan",
+    "kcwa": "kecewa",
+    "jaman2": "jaman-jaman",
+    "sok2an": "sok-sokan",
+    "dket2in": "dekat-dekati",
+    "cobak": "coba",
+    "britanya": "beritanya",
+    "tau2": "tau-tau",
+    "mahh": "mah",
+    "jamam": "jaman",
+    "paraa": "para",
+    "seharusny": "seharusnya",
+    "dasaar": "dasar",
+    "bergunaa": "berguna",
+    "mulutnyaaa": "mulutnya",
+    "blkng": "belakang",
+    "kcewa": "kecewa",
+    "mnusuk": "menusuk",
+    "blkang": "belakang",
+    "nembak": "menembak",
+    "trmanis": "termanis",
+    "krng": "kurang",
+    "kaciiaann": "kasihan",
+    "nyela": "mencela",
+    "ngejilat": "menjilat",
+    "hallooo": "halo",
+    "deketin": "dekati",
+    "tayik": "tahi",
+    "halooo": "halo",
+    "ustzah": "ustazah",
+    "halow": "halo",
+    "poooolllll": "pol",
+    "tahannn": "tahan",
+    "aduuh": "aduh",
+    "nyimpen": "menyimpan",
+    "ngarsipin": "mengarsipkan",
+    "cman": "cuman",
+    "gituuuuu": "begitu",
+    "kyy": "kaya",
+    "kngn": "kangen",
+    "kq": "kok",
+    "nyesek": "menyesak",
+    "rinduuuuuuu": "rindu",
+    "b2": "berdua",
+    "kangeeeennn": "kangen",
+    "mg": "moga",
+    "aamiiiiinnn": "amin",
+    "gemezzzz": "gemas",
+    "kangennnnnn": "kangen",
+    "prh": "parah",
+    "bakattt": "bakat",
+    "napsuu": "napsu",
+    "gmau": "enggak mau",
+    "luccu": "lucu",
+    "prasaan": "perasaan",
+    "lahirr": "lahir",
+    "setujuuuu": "setuju",
+    "sering2": "sering-sering",
+    "ceemen": "cemen",
+    "sembunyi\"\"": "sembunyi-sembunyi",
+    "skrnh": "sekarang",
+    "cerdiik": "cerdik",
+    "jeniuss": "jenius",
+    "kurangin": "kurangi",
+    "kreen": "keren",
+    "s'lalu": "selalu",
+    "mauuuuuu": "mau",
+    "mintk": "minta",
+    "nyolong": "mencolong",
+    "pnjng": "panjang",
+    "slaluuuuu": "selalu",
+    "kanggggg": "kang",
+    "rezeqinya": "rezekinya",
+    "pintr": "pintar",
+    "dekk": "dek",
+    "maw": "mau",
+    "kura2": "kura-kura",
+    "edaaann": "edan",
+    "nempel": "menempel",
+    "hatiiii": "hati",
+    "sukkaa": "suka",
+    "luuuucuuu": "lucu",
+    "caantiiik": "cantik",
+    "luucuuu": "lucu",
+    "putihh": "putih",
+    "terus\"an": "terus-terusan",
+    "siiih": "sih",
+    "ternyataa": "ternyata",
+    "pollll": "pol",
+    "sekaliiii": "sekali",
+    "peduliin": "mempedulikan",
+    "komntr": "komentar",
+    "smngat": "semangat",
+    "dosax": "dosanya",
+    "pahalax": "pahalanya",
+    "akhirt": "akhirat",
+    "tinggalkn": "tinggalkan",
+    "rumh": "rumah",
+    "mk": "maka",
+    "trhtung": "terhitung",
+    "naaaa": "nya",
+    "ademmm": "adem",
+    "cerdass": "cerdas",
+    "tambahh": "tambah",
+    "polll": "pol",
+    "didengerin": "didengarkan",
+    "mantapppppp": "mantap",
+    "ngerespon": "merespons",
+    "dulurrr": "dulur",
+    "brusaha": "berusaha",
+    "lebh": "lebih",
+    "amin2": "amin-amin",
+    "positippp": "positif",
+    "jauuhhh": "jauh",
+    "brhjb": "berhijab",
+    "mdh2n": "mudah-mudahan",
+    "slmnya": "salamnya",
+    "jlbb": "jilbab",
+    "dempga": "semoga",
+    "selmnya": "selamanya",
+    "tth": "teteh",
+    "otot2": "otot-otot",
+    "lengkeeett": "lengket",
+    "caaannnttiikkk": "cantik",
+    "trusss": "terus",
+    "ademm": "adem",
+    "apalagiii": "apalagi",
+    "passs": "pas",
+    "beginii": "begini",
+    "satuu": "satu",
+    "cuantek": "cantik",
+    "akuuuur": "akur",
+    "iniehh": "ini",
+    "sayangx": "sayangnya",
+    "jodohx": "jodohnya",
+    "kaliaan": "kalian",
+    "haslnya": "hasilnya",
+    "kencng": "kencang",
+    "pmbantu": "pembantu",
+    "kmbl": "kembali",
+    "cuchook": "cocok",
+    "kloop": "klop",
+    "sempurnaa": "sempurna",
+    "klihatan": "kelihatan",
+    "cintax": "cintanya",
+    "pnuh": "penuh",
+    "ngrti": "mengerti",
+    "mudah\"an": "mudah-mudahan",
+    "segala\"ny": "segala-galanya",
+    "mantanny": "mantannya",
+    "jodohny": "jodohnya",
+    "cantk": "cantik",
+    "ituuu": "itu",
+    "kaasian": "kasihan",
+    "padhl": "padahal",
+    "ank\"": "anak-anak",
+    "pkrin": "pikirkan",
+    "anakx": "anaknya",
+    "sia2kan": "sia-siakan",
+    "naaahhh": "nah",
+    "beluumm": "belum",
+    "sayangggq": "sayangku",
+    "kreean": "keren",
+    "ciiieee": "cie",
+    "cieee": "cie",
+    "cieeee": "cie",
+    "berenanh": "berenang",
+    "pacarr": "pacar",
+    "bingitss": "banget",
+    "besokkk": "besok",
+    "annnnjjjjjjrrrr": "anjir",
+    "ngeliatin": "melihati",
+    "ngumbar2": "mengumbar-umbar",
+    "romantiss": "romantis",
+    "cocook": "cocok",
+    "lucuuuuuuuu": "lucu",
+    "kaaaaaann": "kan",
+    "nyaaaaaaa": "nya",
+    "lgs": "langsung",
+    "yaang": "yang",
+    "bangedt": "banget",
+    "gde": "gede",
+    "lutunaaa": "lucunya",
+    "bikinnn": "bikin",
+    "keee": "ke",
+    "bungkuuussss": "bungkus",
+    "lucux": "lucunya",
+    "bntr": "bentar",
+    "buanyaaak": "banyak",
+    "aaamiiinnn": "amin",
+    "aaamiiin": "amin",
+    "ntap": "mantap",
+    "abgnyaah": "abangnya",
+    "mungkiin": "mungkin",
+    "akuhh": "aku",
+    "manteb": "mantap",
+    "hiduupppp": "hidup",
+    "tebel": "tebal",
+    "nganggepin": "menanggapi",
+    "mentang\"": "mentang-mentang",
+    "najiss": "najis",
+    "perjabatt": "pejabat",
+    "makany": "makanya",
+    "benneeeeeerr": "benar",
+    "krjaan": "pekerjaan",
+    "kdng": "kadang",
+    "kdang": "kadang",
+    "knan": "kanan",
+    "anak'y": "anaknya",
+    "trknal": "terkenal",
+    "gtu\"": "begitu-gitu",
+    "klok": "kalo",
+    "aamiiiinnnnn": "amin",
+    "pengennnn": "pengin",
+    "guw": "gue",
+    "siiiiiiippppppppp": "sip",
+    "selaloe": "selalu",
+    "donggg": "dong",
+    "beruntungnyaaaa": "beruntungnya",
+    "soal'y": "soalnya",
+    "prhatian": "perhatian",
+    "hebaat": "hebat",
+    "ampunn": "ampun",
+    "gueeeee": "gue",
+    "liatt": "lihat",
+    "gehh": "gih",
+    "ankknyaaa": "anaknya",
+    "centilnyaaaaaa": "centilnya",
+    "gemesshzzzzhzzhzhzhsjssjs": "gemas",
+    "ngacaaa": "mengaca",
+    "diaaa": "dia",
+    "jirr": "anjir",
+    "kayaa": "kaya",
+    "cempreeng": "cempreng",
+    "centillll": "centil",
+    "pcran": "pacaran",
+    "anedh": "banget",
+    "ampyunnnn": "ampun",
+    "boro2": "boro-boro",
+    "nyta": "nyata",
+    "kampungn": "kampungan",
+    "j": "saja",
+    "mnghina": "menghina",
+    "ngolokin": "mengolok",
+    "blum": "belum",
+    "syirik\"": "syirik-syirik",
+    "than": "tahan",
+    "dsr": "dasar",
+    "siriik": "sirik",
+    "mampuuu": "mampu",
+    "khan": "kan",
+    "aduuhh": "aduh",
+    "cemburuu": "cemburu",
+    "bingitzzzz": "banget",
+    "tlog": "tolong",
+    "apasihhh": "apasih",
+    "sirikk": "sirik",
+    "dbnding": "dibanding",
+    "nrka": "neraka",
+    "s3ndiri": "sendiri",
+    "bhgiain": "membahagiakan",
+    "kdua": "kedua",
+    "prcya": "percaya",
+    "bhagaia": "bahagia",
+    "cuco": "cocok",
+    "genittt": "genit",
+    "kx": "kak",
+    "mlikk": "milik",
+    "mentah\"": "mentah-mentah",
+    "canci": "cantik",
+    "aneed": "banget",
+    "gimanaa": "bagaimana",
+    "lainnn": "lain",
+    "pentingg": "penting",
+    "bagaimanaaa": "bagaimana",
+    "krudung": "kerudung",
+    "enakkkkk": "enak",
+    "poool": "pol",
+    "jirrrr": "anjir",
+    "oprasiya": "operasinya",
+    "uwee": "gue",
+    "pilihannny": "pilihannya",
+    "itumahh": "itumah",
+    "muuuu": "mu",
+    "uuhhh": "uh",
+    "berbakiti": "berbakti",
+    "alhamd": "alhamdulillah",
+    "slmttt": "selamat",
+    "ucapin": "mengucapkan",
+    "tetp": "tetap",
+    "ditengah2": "ditengah-tengah",
+    "semuanyaa": "semuanya",
+    "semuannyaaa": "semuanya",
+    "aminn2": "amin-amin",
+    "abs": "habis",
+    "kebnyak'an": "kebanyakan",
+    "melahirin": "melahirkan",
+    "aduuuh": "aduh",
+    "cakeep": "cakep",
+    "lhooo": "loh",
+    "kamuuuu": "kamu",
+    "bagi2": "bagi-bagi",
+    "gimn": "bagaimana",
+    "smogaaa": "semoga",
+    "biza": "bisa",
+    "aamien": "amien",
+    "lngsing": "langsing",
+    "wowoooww": "wow",
+    "smulla": "semula",
+    "pdhall": "padahal",
+    "blln": "bulan",
+    "senang2": "senang-senang",
+    "jh": "saja",
+    "kereeennnn": "keren",
+    "gilakkk": "gila",
+    "gtu2": "begitu-gitu",
+    "cpet": "cepat",
+    "gataunya": "enggak taunya",
+    "gtau": "enggak tau",
+    "fans2": "fan-fan",
+    "gaharus": "enggak harus",
+    "sleran": "slearn",
+    "mobileny": "mobile",
+    "eror": "error",
+    "erorr": "error",
+    "sekala": "skala",
+    "perkulian": "perkuliahan",
+    "membuma": "membuka",
+    "kegitan": "kegiatan",
+    "tamopilan": "tampilan",
+    "menrutu": "menurut",
+    "menggangu": "mengganggu",
+    "aada": "ada",
+    "firur": "fitur",
+    "memudahakan": "memudahkan",
+    "infomatif": "informatif",
+    "melaui": "melalui",
+    "nilainnya": "nilainya",
+    "sederhan": "sederhana",
+    "adahal": "padahal",
+    "selaluuu": "selalu",
+    "tolongg": "tolong",
+    "perwakilaln": "perwakilan",
+    "mengumpukan": "mengumpulkan",
+    "yangg": "yang",
+    "lemott": "lambat",
+    "aaaaa": "",
+    "ditambahkam": "ditambahkan",
+    "kedepanya": "ke depannya",
+    "dann": "dan",
+    "digunkan": "digunakan",
+    "perkuliahann": "perkuliahan",
+    "yabg": "yang",
+    "lodingnya": "loadingnya",
+    "download": "unduh",
+    "didownload": "diunduh",
+    "mendownload": "mengunduh",
+    "upload": "unggah",
+    "diupload": "diunggah",
+    "mengupload": "mengunggah",
+    "scan": "pindai",
+    "discan": "dipindai",
+    "userfriendly": "ramah pengguna",
+    "apps": "aplikasi",
+    "simple": "sederhana",
+    "simpel": "sederhana",
+    "matkul": "mata kuliah",
+    "spek": "spesifikasi",
+    "aktifitas": "aktivitas",
+    "ngebaca": "membaca",
+    "dibenerin": "diperbaiki",
+    "ngalami": "mengalami",
+    "bikin": "membuat",
+    "dibikin": "dibuat",
+    "ngumpulin": "mengumpulkan",
+    "kumpulin": "kumpulkan",
+    "kumpulinnya": "mengumpulkan",
+    "dikumpulin": "dikumpulkan",
+    "kekumpul": "terkumpul",
+    "ngerjain": "mengerjakan",
+    "kerjain": "mengerjakan",
+    "kayak": "seperti",
+    "ribet": "rumit",
+    "lemot": "lambat",
+    "nemu": "menemukan",
+    "nyarinya": "mencari",
+    "nambahin": "menambahkan",
+    "mulu": "terus",
+    "doang": "saja",
+    "capek": "lelah",
+    "kelar": "selesai",
+    "telat": "terlambat",
+    "kesel": "kesal",
+    "bukanya": "bukanya",
+    "kepotong": "terpotong",
+    "kehambat": "terhambat",
+    "mepet": "dekat",
+    "ngekompres": "mengompres",
+    "apaan": "apa",
+    "diapus": "dihapus",
+    "numpang": "menumpang",
+    "walalupun": "walaupun",
+    "yaudah": "ya sudah",
+    "nugas": "mengerjakan tugas",
+    "ngelag": "lag",
+    "ngebug": "error",
+    "kekirim": "terkirim",
+    "lampirin": "melampirkan",
+    "muter": "memutar",
+    "kerasa": "terasa",
+    "dipelajarin": "dipelajari",
+    "plis": "tolong",
+    "khawatirin": "khawatirkan",
+    "ngebingungin": "membingungkan",
+    "kebangetan": "keterlaluan",
+    "ngumpul": "mengumpulkan",
+    "ngalamin": "mengalami",
+    "ditambahin": "ditambahkan",
+    "mampus": "sekali",
+    "pas": "saat",
+    "kasih": "beri",
+    "slear": "slearn",
+    "absen": "presensi",
+    "absensi": "presensi",
+    "scroll": "gulir",
+    "discroll": "digulir",
+    "mengscroll": "menggulir",
+    "rekomend": "direkomendasikan",
+    "dikalau": "kalau",
+    "temenku": "temanku",
+    "kedepannya": "ke depannya",
+    "raport": "rapor",
+    "web": "website",
+    "downloaad": "unduh",
+    "dikasih": "diberikan",
+    "mhs": "mahasiswa",
+    "design": "desain",
+    "lumanyan": "lumayan",
+    "fiturpadaa": "fitur pada",
+    "hutuh": "butuh",
+    "samain": "disamakan",
+    "meteri": "materi",
+    "ser": "geser",
+    "uxnya": "ux nya",
+    "tuh": "itu",
+    "kudu": "harus",
+    "gapapa": "tidak apa apa",
+    "dikit": "sedikit",
+    "dibeberapa": "di beberapa",
+    "mahasiwa": "mahasiswa",
+    "update": "pembaruan",
+    "diupdate": "pembaruan",
+    "slrean": "slearn",
+    "diperbaikan": "diperbaiki",
+    "cuman": "hanya",
+    "trouble": "masalah",
+    "webstie": "website",
+    "notify": "notifikasi",
+    "tapi": "tetapi",
+    "tau": "tahu",
+    "bawa": "bawa",
+    "kalo": "kalau",
+    "dikasi": "diberikan",
+    "pengelompokkan": "pengelompokan",
+    "dsb": "dan sebagainya",
+    "client": "klien",
+    "device": "perangkat",
+    "barcode": "kode batang",
+    "wesite": "website",
+    "notif": "notifikasi",
+    "mengumpulan": "mengumpulkan",
+    "mengumpulakn": "mengumpulkan",
+    "diatas": "di atas",
+    "transparasi": "transparansi",
+    "reminder": "pengingat",
+    "deadline": "tenggat",
+    "deadlinenya": "tenggatnya",
+    "megunduh": "mengunduh",
+    "gampang": "mudah",
+    "harusnya": "seharusnya",
+    "dipahamin": "dipahami",
+    "keseringan": "sering",
+    "buat": "buat",
+    "ganggu": "mengganggu",
+    "tiap": "tiap",
+    "jadinya": "sehingga",
+    "dibanding": "dibandingkan",
+    "aku": "saya",
+    "nih": "ini",
+    "resiko": "risiko",
+    "hp": "ponsel",
+    "down": "bermasalah",
+    "diantara": "di antara",
+    "ngembangin": "mengembangkan",
+    "keupload": "terunggah",
+    "menururt": "menurut",
+    "balikin": "kembalikan",
+    "dipaksain": "dipaksakan",
+    "hostingan": "hosting",
+    "jelek": "buruk",
+    "bareng": "bersama",
+    "soalnya": "karena",
+    "dijalanin": "dijalankan",
+    "berasa": "terasa",
+    "jadul": "kuno",
+    "gampangin": "mempermudah",
+    "kosongan": "kosong",
+    "mengasih": "memberi",
+    "apk": "aplikasi",
+    "app": "aplikasi",
+    "enak": "nyaman",
+    "dikerjain": "dikerjakan",
+    "kecatat": "tercatat",
+    "menurutku": "menurut saya",
+    "makin": "semakin",
+    "terimakasih": "terima kasih",
+    "dang": "dan",
+    "dimasukan": "dimasukkan",
+    "please": "tolong",
+    "pliss": "tolong",
+    "susah": "sulit",
+    "timingnya": "waktunya",
+    "worth": "layak",
+    "seringggggg": "sering",
+    "susaahhhh": "sulit",
+    "ngeganggu": "mengganggu",
+    "keburu": "keburu",
+    "benerin": "perbaiki",
+    "ngeleg": "lag",
+    "mau": "mau",
+    "thanks": "terima kasih",
+    "quiz": "kuis",
+    "rame": "ramai",
+    "nyelesaikan": "menyelesaikan",
+    "jatohnya": "jatuhnya",
+    "kepake": "terpakai",
+    "ngandelin": "mengandalkan",
+    "ngulang": "mengulang",
+    "lamaa": "lama",
+    "pribadiku": "pribadi saya",
+    "nangkep": "menangkap",
+    "ketemu": "temu",
+    "terkadang": "kadang",
+    "memuaskan": "puas",
+    "ditambahkan": "tambah",
+    "setiap": "tiap",
+    "nungguinnya": "tunggu",
+    "lamanya": "lama",
+    "mereset": "reset",
+    "ngenalin": "kenal",
+    "negnalin": "kenal",
+    "dipublish": "publikasi",
+    "pelajarinnya": "ajar",
+    "mengecek": "periksa",
+    "its": "its",
+    "okey": "okey"
+  },
+  "frasa_awal": {
+    "\\bapaan dah\\b": "apa sih",
+    "\\bterima kasih\\b": "terimakasih",
+    "\\bngasih tahu\\b": "memberitahukan",
+    "\\bngasih tau\\b": "memberitahukan",
+    "\\bdi samain\\b": "disamakan",
+    "\\bpengeluaran akun\\b": "logout akun",
+    "\\bs learn\\b": "slearn",
+    "\\babsen nya\\b": "presensinya",
+    "\\bdi scroll\\b": "digulir",
+    "\\bdi kerjakan\\b": "dikerjakan",
+    "\\bdi berikan\\b": "diberikan",
+    "\\bdi atas namakan\\b": "diatasnamakan",
+    "\\bdi perbarui\\b": "diperbarui",
+    "\\be learning\\b": "elearning",
+    "\\bweb nya\\b": "websitenya",
+    "\\bfitur nya\\b": "fiturnya",
+    "\\bter update\\b": "terbarui",
+    "\\bdi update\\b": "pembaruan",
+    "\\bupdate nya\\b": "pembaruannya",
+    "\\bwebsite nya\\b": "websitenya",
+    "\\bdeadline nya\\b": "tenggatnya",
+    "\\bproses nya\\b": "prosesnya",
+    "\\btampilan nya\\b": "tampilannya",
+    "\\bsebelum nya\\b": "sebelumnya",
+    "\\bburuk nya\\b": "buruknya",
+    "\\bdi perbaiki\\b": "diperbaiki",
+    "\\blambat nya\\b": "lambatnya",
+    "\\bdi pindai\\b": "dipindai",
+    "\\brumit nya\\b": "rumitnya",
+    "\\bdari pada\\b": "daripada",
+    "\\bkesan nya\\b": "kesannya",
+    "\\blemot nya\\b": "lambatnya",
+    "\\bdi buka\\b": "dibuka",
+    "\\bdi ganti\\b": "diganti",
+    "\\bmahasiswa nya\\b": "mahasiswanya",
+    "\\bmakan waktu\\b": "menghabiskan waktu",
+    "\\bmau ngumpulin\\b": "mau mengumpulkan",
+    "\\bke logout\\b": "logout",
+    "\\bmuter balik\\b": "kembali",
+    "\\bke submit\\b": "disubmit",
+    "\\bsuka sama\\b": "suka dengan",
+    "\\bgara gara\\b": "karena",
+    "\\bke mahasiswa\\b": "bagi mahasiswa",
+    "\\bmutet muter\\b": "berputar putar",
+    "\\bbener bener\\b": "benar benar",
+    "\\bpengalaman ku\\b": "pengalamanku",
+    "\\bpribadi ku\\b": "pribadi saya",
+    "\\bkampus ku\\b": "kampusku",
+    "\\bjelek nya\\b": "jeleknya",
+    "\\bkurang nya\\b": "kurangnya",
+    "\\bwarna nya\\b": "warnanya",
+    "\\bsistem nya\\b": "sistemnya",
+    "\\bloading nya\\b": "loadingnya",
+    "\\bdashboard nya\\b": "dashboardnya",
+    "\\btugas nya\\b": "tugasnya",
+    "\\bkode nya\\b": "kodenya",
+    "\\bnegatif nya\\b": "negatifnya",
+    "\\baplikasi nya\\b": "aplikasinya",
+    "\\bbarcode nya\\b": "kode batangnya",
+    "\\bdi pahami\\b": "dipahami",
+    "\\bkelar sudah\\b": "sudah berakhir",
+    "\\bnge\\s+lag\\b": "lag",
+    "\\bits\\s+okey\\b": "its okey"
+  },
+  "frasa_akhir": {
+    "\\bdi gunakan\\b": "digunakan",
+    "\\bdi pakai\\b": "dipakai",
+    "\\bdi akses\\b": "diakses",
+    "\\bdi unduh\\b": "diunduh",
+    "\\bdi download\\b": "diunduh",
+    "\\bdi upload\\b": "diunggah",
+    "\\bdi unggah\\b": "diunggah",
+    "\\bgak bisa\\b": "tidak bisa",
+    "\\bga bisa\\b": "tidak bisa",
+    "\\bnggak bisa\\b": "tidak bisa",
+    "\\buser friendly\\b": "ramah pengguna",
+    "\\bmemudah kan\\b": "memudahkan",
+    "\\bdidalam\\b": "di dalam",
+    "\\bdiluar\\b": "di luar",
+    "\\bdiatas\\b": "di atas",
+    "\\bdibawah\\b": "di bawah",
+    "\\bdisini\\b": "di sini",
+    "\\bits\\s+okey\\b": "its okey"
+  },
+  "koreksi_validator": {
+    "ketemu": "temu",
+    "terkadang": "kadang",
+    "memuaskan": "puas",
+    "ditambahkan": "tambah",
+    "setiap": "tiap",
+    "nungguinnya": "tunggu",
+    "lamanya": "lama",
+    "mereset": "reset",
+    "ngenalin": "kenal",
+    "negnalin": "kenal",
+    "dipublish": "publikasi",
+    "pelajarinnya": "ajar",
+    "nanya": "tanya",
+    "mengecek": "periksa"
+  },
+  "list_stopwords": [
+    "adalah",
+    "adanya",
+    "adapun",
+    "agak",
+    "agaknya",
+    "agar",
+    "akan",
+    "akankah",
+    "akhir",
+    "akhiri",
+    "akhirnya",
+    "aku",
+    "akulah",
+    "amat",
+    "amatlah",
+    "anda",
+    "andalah",
+    "antar",
+    "antara",
+    "antaranya",
+    "apa",
+    "apaan",
+    "apabila",
+    "apakah",
+    "apalagi",
+    "apatah",
+    "artinya",
+    "asal",
+    "asalkan",
+    "atas",
+    "atau",
+    "ataukah",
+    "ataupun",
+    "awal",
+    "awalnya",
+    "bagai",
+    "bagaikan",
+    "bagaimana",
+    "bagaimanakah",
+    "bagaimanapun",
+    "bagi",
+    "bagian",
+    "bahkan",
+    "bahwa",
+    "bahwasanya",
+    "bakal",
+    "bakalan",
+    "balik",
+    "bang",
+    "bapak",
+    "baru",
+    "bawah",
+    "beberapa",
+    "begini",
+    "beginian",
+    "beginikah",
+    "beginilah",
+    "begitu",
+    "begitukah",
+    "begitulah",
+    "begitupun",
+    "bekerja",
+    "belakang",
+    "belakangan",
+    "belumlah",
+    "benarkah",
+    "benarlah",
+    "berada",
+    "berakhir",
+    "berakhirlah",
+    "berakhirnya",
+    "berapa",
+    "berapakah",
+    "berapalah",
+    "berapapun",
+    "berarti",
+    "berawal",
+    "berbagai",
+    "berdatangan",
+    "beri",
+    "berikan",
+    "berikut",
+    "berikutnya",
+    "berjumlah",
+    "berkali-kali",
+    "berkata",
+    "berkehendak",
+    "berkeinginan",
+    "berkenaan",
+    "berlainan",
+    "berlalu",
+    "berlangsung",
+    "berlebihan",
+    "bermacam",
+    "bermacam-macam",
+    "bermaksud",
+    "bermula",
+    "bersama",
+    "bersama-sama",
+    "bersiap",
+    "bersiap-siap",
+    "bertanya",
+    "bertanya-tanya",
+    "berturut",
+    "berturut-turut",
+    "bertutur",
+    "berujar",
+    "berupa",
+    "besar",
+    "betul",
+    "betulkah",
+    "biasa",
+    "biasanya",
+    "bila",
+    "bilakah",
+    "bisakah",
+    "boleh",
+    "bolehkah",
+    "bolehlah",
+    "buat",
+    "bukankah",
+    "bukanlah",
+    "bulan",
+    "bung",
+    "cara",
+    "caranya",
+    "cukupkah",
+    "cukuplah",
+    "cuma",
+    "dahulu",
+    "dalam",
+    "dari",
+    "daripada",
+    "datang",
+    "deh",
+    "demi",
+    "demikian",
+    "demikianlah",
+    "dengan",
+    "depan",
+    "di",
+    "dia",
+    "diakhiri",
+    "diakhirinya",
+    "dialah",
+    "diantara",
+    "diantaranya",
+    "diberi",
+    "diberikan",
+    "diberikannya",
+    "dibuat",
+    "dibuatnya",
+    "didapat",
+    "didatangkan",
+    "digunakan",
+    "diibaratkan",
+    "diibaratkannya",
+    "diingat",
+    "diingatkan",
+    "diinginkan",
+    "dijawab",
+    "dijelaskan",
+    "dijelaskannya",
+    "dikarenakan",
+    "dikatakan",
+    "dikatakannya",
+    "dikerjakan",
+    "diketahui",
+    "diketahuinya",
+    "dikira",
+    "dilakukan",
+    "dilalui",
+    "dilihat",
+    "dimaksud",
+    "dimaksudkan",
+    "dimaksudkannya",
+    "dimaksudnya",
+    "diminta",
+    "dimintai",
+    "dimisalkan",
+    "dimulai",
+    "dimulailah",
+    "dimulainya",
+    "dimungkinkan",
+    "dini",
+    "dipastikan",
+    "diperbuat",
+    "diperbuatnya",
+    "dipergunakan",
+    "diperkirakan",
+    "diperlihatkan",
+    "diperlukan",
+    "diperlukannya",
+    "dipersoalkan",
+    "dipertanyakan",
+    "dipunyai",
+    "diri",
+    "dirinya",
+    "disampaikan",
+    "disebut",
+    "disebutkan",
+    "disebutkannya",
+    "disini",
+    "disinilah",
+    "ditambahkan",
+    "ditandaskan",
+    "ditanya",
+    "ditanyai",
+    "ditanyakan",
+    "ditegaskan",
+    "ditujukan",
+    "ditunjuk",
+    "ditunjuki",
+    "ditunjukkan",
+    "ditunjukkannya",
+    "ditunjuknya",
+    "dituturkan",
+    "dituturkannya",
+    "diucapkan",
+    "diucapkannya",
+    "diungkapkan",
+    "dong",
+    "donk",
+    "dua",
+    "empat",
+    "enggak",
+    "enggaknya",
+    "entah",
+    "entahlah",
+    "gunakan",
+    "hal",
+    "hampir",
+    "hanya",
+    "hanyalah",
+    "hari",
+    "harus",
+    "haruslah",
+    "harusnya",
+    "hendak",
+    "hendaklah",
+    "hendaknya",
+    "hingga",
+    "ia",
+    "ialah",
+    "ibarat",
+    "ibaratkan",
+    "ibaratnya",
+    "ibu",
+    "ikut",
+    "ingat",
+    "ingat-ingat",
+    "ingin",
+    "inginkah",
+    "inginkan",
+    "ini",
+    "inikah",
+    "inilah",
+    "itu",
+    "itukah",
+    "itulah",
+    "jadi",
+    "jadilah",
+    "jadinya",
+    "jangankan",
+    "janganlah",
+    "jauh",
+    "jawab",
+    "jawaban",
+    "jawabnya",
+    "jelaskan",
+    "jelaslah",
+    "jelasnya",
+    "jika",
+    "jikalau",
+    "juga",
+    "jumlah",
+    "jumlahnya",
+    "justru",
+    "kah",
+    "kala",
+    "kalau",
+    "kalaulah",
+    "kalaupun",
+    "kalian",
+    "kami",
+    "kamilah",
+    "kamu",
+    "kamulah",
+    "kan",
+    "kapan",
+    "kapankah",
+    "kapanpun",
+    "karena",
+    "karenanya",
+    "kasus",
+    "kata",
+    "katakan",
+    "katakanlah",
+    "katanya",
+    "ke",
+    "keadaan",
+    "kebetulan",
+    "kedua",
+    "keduanya",
+    "keinginan",
+    "kelamaan",
+    "kelihatan",
+    "kelihatannya",
+    "kelima",
+    "kembali",
+    "kemudian",
+    "kemungkinan",
+    "kemungkinannya",
+    "kenapa",
+    "kepada",
+    "kepadanya",
+    "kesampaian",
+    "keseluruhan",
+    "keseluruhannya",
+    "keterlaluan",
+    "ketika",
+    "khususnya",
+    "kini",
+    "kinilah",
+    "kira",
+    "kira-kira",
+    "kiranya",
+    "kita",
+    "kitalah",
+    "kok",
+    "lagi",
+    "lagian",
+    "lah",
+    "lain",
+    "lainnya",
+    "lalu",
+    "lamanya",
+    "lanjut",
+    "lanjutnya",
+    "lewat",
+    "lima",
+    "luar",
+    "macam",
+    "maka",
+    "makanya",
+    "makin",
+    "malahan",
+    "mampu",
+    "mampukah",
+    "mana",
+    "manakala",
+    "manalagi",
+    "masa",
+    "masalahnya",
+    "masihkah",
+    "masing",
+    "masing-masing",
+    "maupun",
+    "melainkan",
+    "melakukan",
+    "melalui",
+    "melihat",
+    "melihatnya",
+    "memang",
+    "memastikan",
+    "memberi",
+    "memberikan",
+    "membuat",
+    "memerlukan",
+    "memihak",
+    "meminta",
+    "memintakan",
+    "memisalkan",
+    "memperbuat",
+    "mempergunakan",
+    "memperkirakan",
+    "memperlihatkan",
+    "mempersiapkan",
+    "mempersoalkan",
+    "mempertanyakan",
+    "mempunyai",
+    "memulai",
+    "memungkinkan",
+    "menaiki",
+    "menambahkan",
+    "menandaskan",
+    "menanti",
+    "menanti-nanti",
+    "menantikan",
+    "menanya",
+    "menanyai",
+    "menanyakan",
+    "mendapat",
+    "mendapatkan",
+    "mendatang",
+    "mendatangi",
+    "mendatangkan",
+    "menegaskan",
+    "mengakhiri",
+    "mengapa",
+    "mengatakan",
+    "mengatakannya",
+    "mengenai",
+    "mengetahui",
+    "menggunakan",
+    "menghendaki",
+    "mengibaratkan",
+    "mengibaratkannya",
+    "mengingat",
+    "mengingatkan",
+    "menginginkan",
+    "mengira",
+    "mengucapkan",
+    "mengucapkannya",
+    "mengungkapkan",
+    "menjadi",
+    "menjawab",
+    "menjelaskan",
+    "menuju",
+    "menunjuk",
+    "menunjuki",
+    "menunjukkan",
+    "menunjuknya",
+    "menurut",
+    "menuturkan",
+    "menyampaikan",
+    "menyangkut",
+    "menyatakan",
+    "menyebutkan",
+    "menyeluruh",
+    "menyiapkan",
+    "merasa",
+    "mereka",
+    "merekalah",
+    "merupakan",
+    "meski",
+    "meskipun",
+    "meyakini",
+    "meyakinkan",
+    "min",
+    "minta",
+    "mirip",
+    "misal",
+    "misalkan",
+    "misalnya",
+    "mula",
+    "mulai",
+    "mulailah",
+    "mulanya",
+    "mungkin",
+    "mungkinkah",
+    "nah",
+    "naik",
+    "namun",
+    "nanti",
+    "nantinya",
+    "nyaris",
+    "nyatanya",
+    "oleh",
+    "olehnya",
+    "pada",
+    "padanya",
+    "pak",
+    "paling",
+    "panjang",
+    "pantas",
+    "para",
+    "pasti",
+    "pastilah",
+    "penting",
+    "pentingnya",
+    "per",
+    "percuma",
+    "perlukah",
+    "perlunya",
+    "pernah",
+    "persoalan",
+    "pertama",
+    "pertama-tama",
+    "pertanyaan",
+    "pertanyakan",
+    "pihak",
+    "pihaknya",
+    "pukul",
+    "pula",
+    "pun",
+    "punya",
+    "rasa",
+    "rasanya",
+    "rata",
+    "rupanya",
+    "saat",
+    "saatnya",
+    "saja",
+    "sajalah",
+    "saling",
+    "sama",
+    "sama-sama",
+    "sambil",
+    "sampai",
+    "sampai-sampai",
+    "sampaikan",
+    "sana",
+    "sangatlah",
+    "satu",
+    "saya",
+    "sayalah",
+    "se",
+    "sebab",
+    "sebabnya",
+    "sebagai",
+    "sebagaimana",
+    "sebagainya",
+    "sebagian",
+    "sebaik",
+    "sebaik-baiknya",
+    "sebaiknya",
+    "sebaliknya",
+    "sebanyak",
+    "sebegini",
+    "sebegitu",
+    "sebenarnya",
+    "seberapa",
+    "sebesar",
+    "sebetulnya",
+    "sebisanya",
+    "sebuah",
+    "sebut",
+    "sebutlah",
+    "sebutnya",
+    "secara",
+    "secukupnya",
+    "sedang",
+    "sedangkan",
+    "sedemikian",
+    "sedikit",
+    "sedikitnya",
+    "seenaknya",
+    "segala",
+    "segalanya",
+    "segera",
+    "seharusnya",
+    "sehingga",
+    "seingat",
+    "sejak",
+    "sejauh",
+    "sejenak",
+    "sejumlah",
+    "sekadar",
+    "sekadarnya",
+    "sekali-kali",
+    "sekalian",
+    "sekaligus",
+    "sekalipun",
+    "sekarang",
+    "sekecil",
+    "seketika",
+    "sekiranya",
+    "sekitar",
+    "sekitarnya",
+    "sekurang-kurangnya",
+    "sekurangnya",
+    "sela",
+    "selain",
+    "selaku",
+    "selama",
+    "selama-lamanya",
+    "selamanya",
+    "selanjutnya",
+    "seluruh",
+    "seluruhnya",
+    "semacam",
+    "semakin",
+    "semampu",
+    "semampunya",
+    "semasa",
+    "semasih",
+    "semata",
+    "semata-mata",
+    "semaunya",
+    "sementara",
+    "semisal",
+    "semisalnya",
+    "sempat",
+    "semua",
+    "semuanya",
+    "semula",
+    "sendirian",
+    "sendirinya",
+    "seolah",
+    "seolah-olah",
+    "seorang",
+    "sepanjang",
+    "sepantasnya",
+    "sepantasnyalah",
+    "seperlunya",
+    "seperti",
+    "sepertinya",
+    "sepihak",
+    "seringnya",
+    "serta",
+    "serupa",
+    "sesaat",
+    "sesama",
+    "sesampai",
+    "sesegera",
+    "sesekali",
+    "seseorang",
+    "sesuatu",
+    "sesuatunya",
+    "sesudah",
+    "sesudahnya",
+    "setelah",
+    "setempat",
+    "setengah",
+    "seterusnya",
+    "setiap",
+    "setiba",
+    "setibanya",
+    "setidak-tidaknya",
+    "setidaknya",
+    "setinggi",
+    "seusai",
+    "sewaktu",
+    "si",
+    "siapa",
+    "siapakah",
+    "siapapun",
+    "sih",
+    "sini",
+    "sinilah",
+    "soal",
+    "soalnya",
+    "suatu",
+    "sudahkah",
+    "sudahlah",
+    "supaya",
+    "tadi",
+    "tadinya",
+    "tahu",
+    "tahun",
+    "tak",
+    "tambahnya",
+    "tampak",
+    "tampaknya",
+    "tandas",
+    "tandasnya",
+    "tanya",
+    "tanyakan",
+    "tanyanya",
+    "tapi",
+    "tegas",
+    "tegasnya",
+    "telah",
+    "tempat",
+    "tengah",
+    "tentang",
+    "tentu",
+    "tentulah",
+    "tentunya",
+    "tepat",
+    "terakhir",
+    "terasa",
+    "terbanyak",
+    "terdahulu",
+    "terdapat",
+    "terdiri",
+    "terhadap",
+    "terhadapnya",
+    "teringat",
+    "teringat-ingat",
+    "terjadi",
+    "terjadilah",
+    "terjadinya",
+    "terkira",
+    "terlebih",
+    "termasuk",
+    "ternyata",
+    "tersampaikan",
+    "tersebut",
+    "tersebutlah",
+    "tertentu",
+    "tertuju",
+    "terus",
+    "terutama",
+    "tetap",
+    "tetapi",
+    "tiba-tiba",
+    "tidakkah",
+    "tiga",
+    "tinggi",
+    "toh",
+    "tunjuk",
+    "turut",
+    "tutur",
+    "tuturnya",
+    "ucap",
+    "ucapnya",
+    "ujar",
+    "ujarnya",
+    "umum",
+    "umumnya",
+    "ungkap",
+    "ungkapnya",
+    "untuk",
+    "usah",
+    "usai",
+    "waduh",
+    "wah",
+    "wahai",
+    "waktunya",
+    "walau",
+    "walaupun",
+    "wong",
+    "ya",
+    "yaitu",
+    "yakin",
+    "yakni",
+    "yang"
+  ],
+  "kata_dilindungi_stemming": [
+    "ada",
+    "ajar",
+    "banyak",
+    "belum",
+    "berantakan",
+    "dan",
+    "dekat",
+    "dulu",
+    "kadang",
+    "kecil",
+    "kenal",
+    "keterangan",
+    "lag",
+    "lama",
+    "puas",
+    "publikasi",
+    "reset",
+    "sebelumnya",
+    "semoga",
+    "tambah",
+    "temu",
+    "terlihat",
+    "tiap",
+    "tunggu",
+    "waktu"
+  ]
+}
\ No newline at end of file
diff --git a/api_slearn/artifacts_slearn/preprocessing_slearn.py b/api_slearn/artifacts_slearn/preprocessing_slearn.py
new file mode 100644
index 0000000..ef42ca5
--- /dev/null
+++ b/api_slearn/artifacts_slearn/preprocessing_slearn.py
@@ -0,0 +1,124 @@
+import re, json
+from pathlib import Path
+from nltk.tokenize import word_tokenize
+from Sastrawi.Stemmer.StemmerFactory import StemmerFactory
+
+config = json.loads(
+    (Path(__file__).parent / 'preprocessing_config.json')
+    .read_text(encoding='utf-8')
+)
+
+kamus_normalisasi = config['kamus_normalisasi']
+frasa_awal = config['frasa_awal']
+frasa_akhir = config['frasa_akhir']
+koreksi_validator = config['koreksi_validator']
+list_stopwords = set(config['list_stopwords'])
+kata_dilindungi_stemming = set(
+    config['kata_dilindungi_stemming']
+)
+
+stemmer = StemmerFactory().create_stemmer()
+
+def cleaning(text):
+    text = str(text)
+
+    # 1. Menghapus URL/Link (tidak peka huruf besar/kecil)
+    text = re.sub(r"https?://\S+|www\.\S+", " ", text, flags=re.IGNORECASE)
+
+    # 2. Menghapus mention (@), pertahankan isi hashtag (#)
+    text = re.sub(r"@\w+", " ", text)
+    text = re.sub(r"#(\w+)", r"\1", text)
+
+    # 3. Menghapus angka
+    text = re.sub(r"\d+", " ", text)
+
+    # 4. Menghapus karakter selain huruf
+    text = re.sub(r"[^a-zA-Z\s]", " ", text)
+
+    # 5. Merapikan spasi berlebih
+    text = re.sub(r"\s+", " ", text).strip()
+
+    return text
+
+
+def case_folding(text):
+    # Mengubah seluruh teks menjadi huruf kecil
+    return str(text).lower()
+
+
+def ganti_frasa(text, kamus_frasa):
+    for pola, ganti in kamus_frasa.items():
+        text = re.sub(pola, ganti, text)
+    return text
+
+
+def normalisasi(text):
+    text = ganti_frasa(str(text), frasa_awal)
+    text = re.sub(r"\b\w+\b", lambda m: kamus_normalisasi.get(m.group(), m.group()), text)
+    return ganti_frasa(text, frasa_akhir)
+
+
+def koreksi_normalisasi_validator(text):
+    text = str(text)
+    text = re.sub(r"\bnge\s+lag\b", "lag", text)        # koreksi frasa hasil validasi
+    text = re.sub(r"\bits\s+okey\b", "its okey", text)  # "its okey" dipertahankan
+    return re.sub(r"\b\w+\b", lambda x: koreksi_validator.get(x.group(), x.group()), text)
+
+
+def tokenisasi(text):
+    return word_tokenize(str(text))
+
+
+def hapus_stopword(tokens):
+    return " ".join(
+        kata for kata in tokens
+        if kata not in list_stopwords and len(kata) > 1
+    )
+
+
+def stemming(text):
+    hasil = []
+
+    for kata in str(text).split():
+        if kata in kata_dilindungi_stemming:
+            hasil.append(kata)
+        else:
+            hasil.append(stemmer.stem(kata))
+
+    return " ".join(hasil)
+
+
+def preprocessing_kalimat_baru(text):
+
+    # 1. Cleaning
+    text = cleaning(text)
+
+    # 2. Case Folding
+    text = case_folding(text)
+
+    # 3. Normalisasi
+    text = normalisasi(text)
+    text = koreksi_normalisasi_validator(text)
+
+    # 4. Tokenisasi
+    tokens = tokenisasi(text)
+
+    # 5. Stopword Removal
+    text = hapus_stopword(tokens)
+
+    # 6. Stemming
+    text = stemming(text)
+
+    return text
+
+
+def prediksi_sentimen(teks, model, vectorizer):
+    if not isinstance(teks, str) or not teks.strip():
+        raise ValueError("Masukkan komentar terlebih dahulu.")
+    hasil = preprocessing_kalimat_baru(teks)
+    if not hasil.strip():
+        raise ValueError("Komentar tidak memiliki kata yang dapat diproses.")
+    fitur = vectorizer.transform([hasil])
+    if fitur.nnz == 0:
+        raise ValueError("Kata dalam komentar belum dikenali model.")
+    return int(model.predict(fitur)[0])
diff --git a/api_slearn/artifacts_slearn/requirements.txt b/api_slearn/artifacts_slearn/requirements.txt
new file mode 100644
index 0000000..acac512
--- /dev/null
+++ b/api_slearn/artifacts_slearn/requirements.txt
@@ -0,0 +1,7 @@
+scikit-learn==1.6.1
+numpy==2.1.3
+scipy==1.16.3
+pandas==2.2.3
+nltk==3.9.1
+Sastrawi==1.0.1
+joblib==1.6.0
diff --git a/api_slearn/artifacts_slearn/stopwords_final.joblib b/api_slearn/artifacts_slearn/stopwords_final.joblib
new file mode 100644
index 0000000..f632b99
Binary files /dev/null and b/api_slearn/artifacts_slearn/stopwords_final.joblib differ
diff --git a/api_slearn/artifacts_slearn/tfidf_vectorizer.joblib b/api_slearn/artifacts_slearn/tfidf_vectorizer.joblib
new file mode 100644
index 0000000..7149e8a
Binary files /dev/null and b/api_slearn/artifacts_slearn/tfidf_vectorizer.joblib differ
diff --git a/api_slearn/database.py b/api_slearn/database.py
new file mode 100644
index 0000000..4129ad2
--- /dev/null
+++ b/api_slearn/database.py
@@ -0,0 +1,1021 @@
+import json
+import os
+
+import mysql.connector
+from mysql.connector import Error
+
+
+# ============================================================
+# KONFIGURASI DATABASE MYSQL
+# ============================================================
+
+DB_CONFIG = {
+    "host": os.getenv("DB_HOST", "127.0.0.1"),
+    "port": int(os.getenv("DB_PORT", "3306")),
+    "user": os.getenv("DB_USER", "root"),
+    "password": os.getenv("DB_PASSWORD", ""),
+    "database": os.getenv("DB_NAME", "slearn_web_db"),
+    "charset": "utf8mb4"
+}
+
+
+# ============================================================
+# HELPER JSON
+# ============================================================
+
+def _to_json(data):
+    """
+    Mengubah list/dict menjadi JSON string
+    sebelum disimpan ke database.
+    """
+
+    if data is None:
+        return None
+
+    if isinstance(data, str):
+        return data
+
+    return json.dumps(
+        data,
+        ensure_ascii=False
+    )
+
+
+def _from_json(data, default=None):
+    """
+    Membaca JSON string dari database.
+    """
+
+    if default is None:
+        default = []
+
+    if data is None:
+        return default
+
+    if isinstance(data, (list, dict)):
+        return data
+
+    try:
+        return json.loads(data)
+
+    except (TypeError, json.JSONDecodeError):
+        return default
+
+
+def _format_datetime(value):
+    """
+    Mengubah datetime MySQL menjadi string ISO.
+    """
+
+    if value is None:
+        return None
+
+    return value.isoformat(
+        timespec="seconds"
+    )
+
+
+# ============================================================
+# MEMBUAT KONEKSI DATABASE
+# ============================================================
+
+def get_db_connection():
+
+    try:
+        connection = mysql.connector.connect(
+            **DB_CONFIG
+        )
+
+        if not connection.is_connected():
+            raise ConnectionError(
+                "Koneksi ke database MySQL tidak aktif."
+            )
+
+        return connection
+
+    except Error as error:
+        raise ConnectionError(
+            f"Gagal terhubung ke MySQL: {error}"
+        ) from error
+
+
+# ============================================================
+# TEST KONEKSI DATABASE
+# ============================================================
+
+def test_db_connection():
+
+    connection = None
+    cursor = None
+
+    try:
+        connection = get_db_connection()
+        cursor = connection.cursor()
+
+        cursor.execute(
+            "SELECT DATABASE();"
+        )
+
+        database_name = (
+            cursor.fetchone()[0]
+        )
+
+        cursor.execute(
+            "SHOW TABLES;"
+        )
+
+        tables = [
+            row[0]
+            for row in cursor.fetchall()
+        ]
+
+        return {
+            "status": "success",
+            "database": database_name,
+            "tables": tables
+        }
+
+    finally:
+        if cursor is not None:
+            cursor.close()
+
+        if (
+            connection is not None
+            and connection.is_connected()
+        ):
+            connection.close()
+
+
+# ============================================================
+# RINGKASAN DATABASE
+# ============================================================
+
+def get_database_summary():
+
+    connection = None
+    cursor = None
+
+    try:
+        connection = get_db_connection()
+        cursor = connection.cursor()
+
+        cursor.execute(
+            "SELECT COUNT(*) FROM analysis_batches"
+        )
+
+        total_batches = (
+            cursor.fetchone()[0]
+        )
+
+        cursor.execute(
+            "SELECT COUNT(*) FROM analysis_results"
+        )
+
+        total_results = (
+            cursor.fetchone()[0]
+        )
+
+        cursor.execute(
+            """
+            SELECT COUNT(*)
+            FROM single_prediction_history
+            """
+        )
+
+        total_single_predictions = (
+            cursor.fetchone()[0]
+        )
+
+        return {
+            "total_batches": int(
+                total_batches
+            ),
+            "total_results": int(
+                total_results
+            ),
+            "total_single_predictions": int(
+                total_single_predictions
+            )
+        }
+
+    finally:
+        if cursor is not None:
+            cursor.close()
+
+        if (
+            connection is not None
+            and connection.is_connected()
+        ):
+            connection.close()
+
+
+# ============================================================
+# SIMPAN SATU BATCH ANALISIS CSV
+# ============================================================
+
+def save_analysis_batch(
+    batch_id,
+    file_name,
+    selected_column,
+    results
+):
+
+    connection = None
+    cursor = None
+
+    versions = {item.get("model_version") for item in results}
+    if len(versions) != 1 or None in versions:
+        raise ValueError("Satu batch harus menggunakan satu versi model yang tercatat.")
+    model_version = versions.pop()
+    total_data = len(results)
+
+    total_positive = sum(
+        1
+        for item in results
+        if item["label"] == 1
+    )
+
+    total_negative = sum(
+        1
+        for item in results
+        if item["label"] == 0
+    )
+
+    try:
+        connection = get_db_connection()
+        cursor = connection.cursor()
+
+        connection.start_transaction()
+
+        query_batch = """
+            INSERT INTO analysis_batches (
+                batch_id,
+                file_name,
+                selected_column,
+                total_data,
+                total_positive,
+                total_negative, model_version
+            )
+            VALUES (
+                %s, %s, %s,
+                %s, %s, %s, %s
+            )
+        """
+
+        cursor.execute(
+            query_batch,
+            (
+                batch_id,
+                file_name,
+                selected_column,
+                total_data,
+                total_positive,
+                total_negative, model_version
+            )
+        )
+
+        query_result = """
+            INSERT INTO analysis_results (
+                batch_id,
+                source_row_number,
+                original_text,
+                cleaning,
+                case_folding,
+                normalization,
+                tokenizing,
+                stopword_removal,
+                stemming,
+                label,
+                sentiment,
+                tfidf_top
+            )
+            VALUES (
+                %s, %s, %s, %s,
+                %s, %s, %s, %s,
+                %s, %s, %s, %s
+            )
+        """
+
+        data_results = []
+
+        for item in results:
+
+            preprocessing = (
+                item["preprocessing"]
+            )
+
+            data_results.append(
+                (
+                    batch_id,
+                    item["source_row_number"],
+                    item["teks"],
+                    preprocessing["cleaning"],
+                    preprocessing["case_folding"],
+                    preprocessing["normalization"],
+                    _to_json(
+                        preprocessing["tokenizing"]
+                    ),
+                    preprocessing["stopword_removal"],
+                    preprocessing["stemming"],
+                    item["label"],
+                    item["sentimen"],
+                    _to_json(
+                        item["tfidf_top"]
+                    )
+                )
+            )
+
+        cursor.executemany(
+            query_result,
+            data_results
+        )
+
+        connection.commit()
+
+        return {
+            "batch_id": batch_id,
+            "file_name": file_name,
+            "selected_column": selected_column,
+            "total_data": total_data,
+            "total_positive": total_positive,
+            "total_negative": total_negative, "model_version": model_version
+        }
+
+    except Exception:
+
+        if connection is not None:
+            connection.rollback()
+
+        raise
+
+    finally:
+        if cursor is not None:
+            cursor.close()
+
+        if (
+            connection is not None
+            and connection.is_connected()
+        ):
+            connection.close()
+
+
+# ============================================================
+# MEMBACA DETAIL SATU BATCH CSV
+# ============================================================
+
+def get_analysis_batch(
+    batch_id
+):
+
+    connection = None
+    cursor = None
+
+    try:
+        connection = get_db_connection()
+
+        cursor = connection.cursor(
+            dictionary=True
+        )
+
+        cursor.execute(
+            """
+            SELECT
+                batch_id,
+                file_name,
+                selected_column,
+                total_data,
+                total_positive,
+                total_negative,
+                model_version,
+                created_at
+            FROM analysis_batches
+            WHERE batch_id = %s
+            LIMIT 1
+            """,
+            (
+                batch_id,
+            )
+        )
+
+        batch = cursor.fetchone()
+
+        if batch is None:
+            return None
+
+        cursor.execute(
+            """
+            SELECT
+                id,
+                source_row_number,
+                original_text,
+                cleaning,
+                case_folding,
+                normalization,
+                tokenizing,
+                stopword_removal,
+                stemming,
+                label,
+                sentiment,
+                tfidf_top,
+                created_at
+            FROM analysis_results
+            WHERE batch_id = %s
+            ORDER BY
+                source_row_number ASC,
+                id ASC
+            """,
+            (
+                batch_id,
+            )
+        )
+
+        rows = cursor.fetchall()
+
+        results = []
+
+        for row in rows:
+
+            tokenizing = _from_json(
+                row["tokenizing"],
+                []
+            )
+
+            tfidf_top = _from_json(
+                row["tfidf_top"],
+                []
+            )
+
+            results.append(
+                {
+                    "id": int(
+                        row["id"]
+                    ),
+
+                    "source_row_number": int(
+                        row["source_row_number"]
+                    ),
+
+                    "teks": (
+                        row["original_text"]
+                    ),
+
+                    "label": int(
+                        row["label"]
+                    ),
+
+                    "sentimen": (
+                        row["sentiment"]
+                    ),
+
+                    "preprocessing": {
+                        "cleaning":
+                            row["cleaning"]
+                            or "",
+
+                        "case_folding":
+                            row["case_folding"]
+                            or "",
+
+                        "normalization":
+                            row["normalization"]
+                            or "",
+
+                        "tokenizing":
+                            tokenizing,
+
+                        "stopword_removal":
+                            row["stopword_removal"]
+                            or "",
+
+                        "stemming":
+                            row["stemming"]
+                            or ""
+                    },
+
+                    "tfidf_top":
+                        tfidf_top
+                }
+            )
+
+        return {
+            "batch_id":
+                batch["batch_id"],
+            "model_version": batch.get("model_version"),
+
+            "file_name":
+                batch["file_name"],
+
+            "selected_column":
+                batch["selected_column"],
+
+            "total_data": int(
+                batch["total_data"]
+            ),
+
+            "total_positive": int(
+                batch["total_positive"]
+            ),
+
+            "total_negative": int(
+                batch["total_negative"]
+            ),
+
+            "created_at":
+                _format_datetime(
+                    batch["created_at"]
+                ),
+
+            "results":
+                results
+        }
+
+    finally:
+        if cursor is not None:
+            cursor.close()
+
+        if (
+            connection is not None
+            and connection.is_connected()
+        ):
+            connection.close()
+
+
+# ============================================================
+# MEMBACA SEMUA RIWAYAT BATCH CSV
+# ============================================================
+
+def get_analysis_history():
+
+    connection = None
+    cursor = None
+
+    try:
+        connection = get_db_connection()
+
+        cursor = connection.cursor(
+            dictionary=True
+        )
+
+        cursor.execute(
+            """
+            SELECT
+                batch_id,
+                file_name,
+                selected_column,
+                total_data,
+                total_positive,
+                total_negative,
+                model_version,
+                created_at
+            FROM analysis_batches
+            ORDER BY
+                created_at DESC,
+                id DESC
+            """
+        )
+
+        rows = cursor.fetchall()
+
+        history = []
+
+        for row in rows:
+
+            history.append(
+                {
+                    "batch_id":
+                        row["batch_id"],
+                    "model_version": row.get("model_version"),
+
+                    "file_name":
+                        row["file_name"],
+
+                    "selected_column":
+                        row["selected_column"],
+
+                    "total_data": int(
+                        row["total_data"]
+                    ),
+
+                    "total_positive": int(
+                        row["total_positive"]
+                    ),
+
+                    "total_negative": int(
+                        row["total_negative"]
+                    ),
+
+                    "created_at":
+                        _format_datetime(
+                            row["created_at"]
+                        )
+                }
+            )
+
+        return history
+
+    finally:
+        if cursor is not None:
+            cursor.close()
+
+        if (
+            connection is not None
+            and connection.is_connected()
+        ):
+            connection.close()
+
+
+# ============================================================
+# SIMPAN PREDIKSI SATU ULASAN
+# ============================================================
+
+def save_single_prediction(
+    result
+):
+    """
+    Menyimpan satu hasil dari fungsi analisis_teks()
+    ke tabel single_prediction_history.
+    """
+
+    connection = None
+    cursor = None
+
+    preprocessing = (
+        result.get(
+            "preprocessing",
+            {}
+        )
+    )
+
+    try:
+        connection = get_db_connection()
+        cursor = connection.cursor()
+
+        query = """
+            INSERT INTO single_prediction_history (
+                original_text,
+                cleaning,
+                case_folding,
+                normalization,
+                tokenizing,
+                stopword_removal,
+                stemming,
+                jumlah_fitur_dikenali,
+                label,
+                sentiment,
+                tfidf_top, model_version
+            )
+            VALUES (
+                %s, %s, %s, %s,
+                %s, %s, %s, %s,
+                %s, %s, %s, %s
+            )
+        """
+
+        values = (
+            result.get(
+                "teks",
+                ""
+            ),
+
+            preprocessing.get(
+                "cleaning",
+                ""
+            ),
+
+            preprocessing.get(
+                "case_folding",
+                ""
+            ),
+
+            preprocessing.get(
+                "normalization",
+                ""
+            ),
+
+            _to_json(
+                preprocessing.get(
+                    "tokenizing",
+                    []
+                )
+            ),
+
+            preprocessing.get(
+                "stopword_removal",
+                ""
+            ),
+
+            preprocessing.get(
+                "stemming",
+                ""
+            ),
+
+            int(
+                result.get(
+                    "jumlah_fitur_dikenali",
+                    0
+                )
+            ),
+
+            int(
+                result["label"]
+            ),
+
+            result["sentimen"],
+
+            _to_json(
+                result.get(
+                    "tfidf_top",
+                    []
+                )
+            )
+        )
+
+        values = (*values, result["model_version"])
+
+        cursor.execute(
+            query,
+            values
+        )
+
+        prediction_id = (
+            cursor.lastrowid
+        )
+
+        connection.commit()
+
+        return int(
+            prediction_id
+        )
+
+    except Exception:
+
+        if connection is not None:
+            connection.rollback()
+
+        raise
+
+    finally:
+        if cursor is not None:
+            cursor.close()
+
+        if (
+            connection is not None
+            and connection.is_connected()
+        ):
+            connection.close()
+
+
+# ============================================================
+# MEMBACA SEMUA RIWAYAT PREDIKSI SATU ULASAN
+# ============================================================
+
+def get_single_prediction_history():
+
+    connection = None
+    cursor = None
+
+    try:
+        connection = get_db_connection()
+
+        cursor = connection.cursor(
+            dictionary=True
+        )
+
+        cursor.execute(
+            """
+            SELECT
+                id,
+                original_text,
+                jumlah_fitur_dikenali,
+                label,
+                sentiment,
+                model_version,
+                created_at
+            FROM single_prediction_history
+            ORDER BY
+                created_at DESC,
+                id DESC
+            """
+        )
+
+        rows = cursor.fetchall()
+
+        history = []
+
+        for row in rows:
+
+            history.append(
+                {
+                    "id": int(
+                        row["id"]
+                    ),
+
+                    "teks":
+                        row["original_text"],
+                    "model_version": row.get("model_version"),
+
+                    "jumlah_fitur_dikenali":
+                        int(
+                            row[
+                                "jumlah_fitur_dikenali"
+                            ]
+                            or 0
+                        ),
+
+                    "label": int(
+                        row["label"]
+                    ),
+
+                    "sentimen":
+                        row["sentiment"],
+
+                    "created_at":
+                        _format_datetime(
+                            row["created_at"]
+                        )
+                }
+            )
+
+        return history
+
+    finally:
+        if cursor is not None:
+            cursor.close()
+
+        if (
+            connection is not None
+            and connection.is_connected()
+        ):
+            connection.close()
+
+
+# ============================================================
+# MEMBACA DETAIL SATU PREDIKSI
+# ============================================================
+
+def get_single_prediction(
+    prediction_id
+):
+
+    connection = None
+    cursor = None
+
+    try:
+        connection = get_db_connection()
+
+        cursor = connection.cursor(
+            dictionary=True
+        )
+
+        cursor.execute(
+            """
+            SELECT
+                id,
+                original_text,
+                cleaning,
+                case_folding,
+                normalization,
+                tokenizing,
+                stopword_removal,
+                stemming,
+                jumlah_fitur_dikenali,
+                label,
+                sentiment,
+                tfidf_top,
+                model_version,
+                created_at
+            FROM single_prediction_history
+            WHERE id = %s
+            LIMIT 1
+            """,
+            (
+                prediction_id,
+            )
+        )
+
+        row = cursor.fetchone()
+
+        if row is None:
+            return None
+
+        tokenizing = _from_json(
+            row["tokenizing"],
+            []
+        )
+
+        tfidf_top = _from_json(
+            row["tfidf_top"],
+            []
+        )
+
+        return {
+            "id": int(
+                row["id"]
+            ),
+
+            "teks":
+                row["original_text"],
+            "model_version": row.get("model_version"),
+
+            "label": int(
+                row["label"]
+            ),
+
+            "sentimen":
+                row["sentiment"],
+
+            "jumlah_fitur_dikenali":
+                int(
+                    row[
+                        "jumlah_fitur_dikenali"
+                    ]
+                    or 0
+                ),
+
+            "preprocessing": {
+                "cleaning":
+                    row["cleaning"]
+                    or "",
+
+                "case_folding":
+                    row["case_folding"]
+                    or "",
+
+                "normalization":
+                    row["normalization"]
+                    or "",
+
+                "tokenizing":
+                    tokenizing,
+
+                "stopword_removal":
+                    row["stopword_removal"]
+                    or "",
+
+                "stemming":
+                    row["stemming"]
+                    or ""
+            },
+
+            "tfidf_top":
+                tfidf_top,
+
+            "created_at":
+                _format_datetime(
+                    row["created_at"]
+                )
+        }
+
+    finally:
+        if cursor is not None:
+            cursor.close()
+
+        if (
+            connection is not None
+            and connection.is_connected()
+        ):
+            connection.close()
+
+
+# ============================================================
+# TEST LANGSUNG DARI TERMINAL
+# ============================================================
+
+if __name__ == "__main__":
+
+    hasil = test_db_connection()
+
+    summary = (
+        get_database_summary()
+    )
+
+    print(
+        "KONEKSI MYSQL BERHASIL"
+    )
+
+    print(
+        "Database :",
+        hasil["database"]
+    )
+
+    print(
+        "Tabel    :",
+        hasil["tables"]
+    )
+
+    print(
+        "Batch    :",
+        summary["total_batches"]
+    )
+
+    print(
+        "Hasil CSV:",
+        summary["total_results"]
+    )
+
+    print(
+        "Prediksi :",
+        summary[
+            "total_single_predictions"
+        ]
+    )
\ No newline at end of file
diff --git a/api_slearn/export_research_tfidf.py b/api_slearn/export_research_tfidf.py
new file mode 100644
index 0000000..cb70f2e
--- /dev/null
+++ b/api_slearn/export_research_tfidf.py
@@ -0,0 +1,681 @@
+# ============================================================
+# EXPORT DATA PENELITIAN TF-IDF UNTUK WEBSITE S-LEARN
+# VERSI FINAL — TF-IDF TANPA NORMALISASI L2 (norm=None)
+# ============================================================
+
+from pathlib import Path
+from collections import Counter
+from datetime import datetime
+import json
+import shutil
+
+import joblib
+import numpy as np
+import pandas as pd
+
+from sklearn.model_selection import train_test_split
+
+
+# ============================================================
+# 1. PATH PROJECT
+# ============================================================
+
+BASE_DIR = Path(__file__).resolve().parent
+PROJECT_DIR = BASE_DIR.parent
+
+ARTIFACT_DIR = BASE_DIR / "artifacts_slearn"
+
+VECTORIZER_PATH = (
+    ARTIFACT_DIR / "tfidf_vectorizer.joblib"
+)
+
+PUBLIC_DATA_DIR = (
+    PROJECT_DIR
+    / "web_slearn"
+    / "public"
+    / "data"
+)
+
+CSV_PATH = (
+    PUBLIC_DATA_DIR
+    / "hasil_preprocessing_slearn.csv"
+)
+
+OUTPUT_PATH = (
+    PUBLIC_DATA_DIR
+    / "tfidf_research.json"
+)
+
+
+# ============================================================
+# 2. CEK FILE YANG DIBUTUHKAN
+# ============================================================
+
+print("=" * 80)
+print("EXPORT DATA TF-IDF PENELITIAN S-LEARN")
+print("=" * 80)
+
+if not VECTORIZER_PATH.exists():
+    raise FileNotFoundError(
+        f"Vectorizer tidak ditemukan:\n{VECTORIZER_PATH}"
+    )
+
+if not CSV_PATH.exists():
+    raise FileNotFoundError(
+        f"CSV preprocessing tidak ditemukan:\n{CSV_PATH}"
+    )
+
+PUBLIC_DATA_DIR.mkdir(
+    parents=True,
+    exist_ok=True
+)
+
+
+# ============================================================
+# 3. MEMBACA DATA PREPROCESSING
+# ============================================================
+
+print("\nMembaca data preprocessing...")
+
+df = pd.read_csv(
+    CSV_PATH,
+    sep=None,
+    engine="python",
+    encoding="utf-8-sig"
+)
+
+kolom_wajib = {
+    "komentar",
+    "label",
+    "stemmed_text"
+}
+
+kolom_hilang = kolom_wajib - set(df.columns)
+
+if kolom_hilang:
+    raise ValueError(
+        "Kolom berikut tidak ditemukan pada CSV: "
+        + ", ".join(sorted(kolom_hilang))
+    )
+
+df["komentar"] = (
+    df["komentar"]
+    .fillna("")
+    .astype(str)
+)
+
+df["stemmed_text"] = (
+    df["stemmed_text"]
+    .fillna("")
+    .astype(str)
+)
+
+df["label"] = pd.to_numeric(
+    df["label"],
+    errors="raise"
+).astype(int)
+
+if not df["label"].isin([0, 1]).all():
+    raise ValueError(
+        "Label harus hanya berisi 0 atau 1."
+    )
+
+if len(df) != 571:
+    raise ValueError(
+        f"Jumlah data seharusnya 571, "
+        f"tetapi ditemukan {len(df)}."
+    )
+
+print(f"✓ Jumlah data: {len(df)}")
+
+
+# ============================================================
+# 4. MEMUAT TF-IDF VECTORIZER FINAL
+# ============================================================
+
+print("\nMemuat TF-IDF vectorizer final...")
+
+tfidf = joblib.load(
+    VECTORIZER_PATH
+)
+
+norm_tfidf = tfidf.get_params().get("norm")
+
+print(
+    f"Norm TF-IDF: {norm_tfidf}"
+)
+
+if norm_tfidf is not None:
+    raise ValueError(
+        "Vectorizer yang digunakan masih memakai "
+        f"normalisasi TF-IDF: {norm_tfidf}. "
+        "Vectorizer final seharusnya norm=None."
+    )
+
+kata_unik = tfidf.get_feature_names_out()
+
+print(
+    f"✓ Jumlah fitur TF-IDF: "
+    f"{len(kata_unik)}"
+)
+
+if len(kata_unik) != 675:
+    raise ValueError(
+        f"Jumlah fitur seharusnya 675, "
+        f"tetapi ditemukan {len(kata_unik)}."
+    )
+
+
+# ============================================================
+# 5. MEMBENTUK ULANG SPLIT 80:20
+#    SESUAI PENELITIAN
+# ============================================================
+
+print("\nMembentuk ulang split penelitian...")
+
+semua_index = df.index.to_numpy()
+
+train_index, test_index = train_test_split(
+    semua_index,
+    test_size=0.2,
+    random_state=42,
+    stratify=df["label"].to_numpy()
+)
+
+print(
+    f"✓ Data training: {len(train_index)}"
+)
+
+print(
+    f"✓ Data testing : {len(test_index)}"
+)
+
+if len(train_index) != 456:
+    raise ValueError(
+        "Jumlah training tidak sama dengan 456."
+    )
+
+if len(test_index) != 115:
+    raise ValueError(
+        "Jumlah testing tidak sama dengan 115."
+    )
+
+
+# ============================================================
+# 6. TRANSFORM TF-IDF
+#    TIDAK MELAKUKAN FIT ULANG
+# ============================================================
+
+print(
+    "\nMengubah teks menjadi bobot TF-IDF "
+    "menggunakan vectorizer final..."
+)
+
+X_train_text = (
+    df.loc[train_index, "stemmed_text"]
+    .astype(str)
+)
+
+X_test_text = (
+    df.loc[test_index, "stemmed_text"]
+    .astype(str)
+)
+
+# HANYA TRANSFORM.
+# Vectorizer sudah difit pada penelitian final.
+X_train = tfidf.transform(
+    X_train_text
+)
+
+X_test = tfidf.transform(
+    X_test_text
+)
+
+print(
+    f"✓ Matriks training: {X_train.shape}"
+)
+
+print(
+    f"✓ Matriks testing : {X_test.shape}"
+)
+
+if X_train.shape != (456, 675):
+    raise ValueError(
+        "Ukuran matriks training tidak sesuai."
+    )
+
+if X_test.shape != (115, 675):
+    raise ValueError(
+        "Ukuran matriks testing tidak sesuai."
+    )
+
+
+# ============================================================
+# 7. MENGHITUNG DF DARI DATA TRAINING
+# ============================================================
+
+print(
+    "\nMenghitung Document Frequency (DF) "
+    "dari data training..."
+)
+
+df_per_fitur = np.asarray(
+    (X_train > 0).sum(axis=0)
+).ravel().astype(int)
+
+idf_per_fitur = np.asarray(
+    tfidf.idf_
+)
+
+if len(df_per_fitur) != len(kata_unik):
+    raise ValueError(
+        "Jumlah DF tidak sama dengan jumlah fitur."
+    )
+
+if len(idf_per_fitur) != len(kata_unik):
+    raise ValueError(
+        "Jumlah IDF tidak sama dengan jumlah fitur."
+    )
+
+print("✓ DF dan IDF berhasil disiapkan.")
+
+
+# ============================================================
+# 8. MEMBUAT POSISI TRAINING DAN TESTING
+# ============================================================
+
+posisi_training = {
+    int(index): urutan
+    for urutan, index
+    in enumerate(
+        train_index,
+        start=1
+    )
+}
+
+posisi_testing = {
+    int(index): urutan
+    for urutan, index
+    in enumerate(
+        test_index,
+        start=1
+    )
+}
+
+
+# ============================================================
+# 9. MEMBENTUK DETAIL TF-IDF PER DATA
+# ============================================================
+
+def buat_data_tfidf(
+    index_array,
+    matrix,
+    jenis_data
+):
+    hasil = []
+
+    for posisi_matrix, index_asli in enumerate(
+        index_array
+    ):
+        index_asli = int(index_asli)
+
+        baris_matrix = matrix.getrow(
+            posisi_matrix
+        )
+
+        stemmed_text = str(
+            df.at[
+                index_asli,
+                "stemmed_text"
+            ]
+        ).strip()
+
+        hitung_kata = Counter(
+            stemmed_text.split()
+        )
+
+        bobot_tfidf = []
+
+        for kolom, bobot in zip(
+            baris_matrix.indices,
+            baris_matrix.data
+        ):
+            kata = str(
+                kata_unik[kolom]
+            )
+
+            tf = int(
+                hitung_kata.get(
+                    kata,
+                    0
+                )
+            )
+
+            df_kata = int(
+                df_per_fitur[kolom]
+            )
+
+            idf = float(
+                idf_per_fitur[kolom]
+            )
+
+            bobot = float(
+                bobot
+            )
+
+            bobot_tfidf.append({
+                "kata": kata,
+                "tf": tf,
+                "df": df_kata,
+                "idf": idf,
+                "bobot": bobot
+            })
+
+        # Bobot terbesar ditampilkan lebih dulu.
+        bobot_tfidf.sort(
+            key=lambda item: (
+                -item["bobot"],
+                item["kata"]
+            )
+        )
+
+        if jenis_data == "Training":
+            urutan_split = posisi_training[
+                index_asli
+            ]
+        else:
+            urutan_split = posisi_testing[
+                index_asli
+            ]
+
+        hasil.append({
+            "no_data": index_asli + 1,
+            "ulasan_asli": str(
+                df.at[
+                    index_asli,
+                    "komentar"
+                ]
+            ),
+            "stemmed_text": stemmed_text,
+            "label": int(
+                df.at[
+                    index_asli,
+                    "label"
+                ]
+            ),
+            "jenis_data": jenis_data,
+            "urutan_split": int(
+                urutan_split
+            ),
+            "jumlah_fitur_nonzero": int(
+                baris_matrix.nnz
+            ),
+            "bobot_tfidf": bobot_tfidf
+        })
+
+    return hasil
+
+
+print(
+    "\nMenyusun detail TF-IDF "
+    "seluruh 571 data..."
+)
+
+data_training = buat_data_tfidf(
+    train_index,
+    X_train,
+    "Training"
+)
+
+data_testing = buat_data_tfidf(
+    test_index,
+    X_test,
+    "Testing"
+)
+
+data_semua = (
+    data_training
+    + data_testing
+)
+
+# Agar website menampilkan
+# Data ke-1 sampai Data ke-571.
+data_semua.sort(
+    key=lambda item: item["no_data"]
+)
+
+if len(data_semua) != 571:
+    raise ValueError(
+        "Jumlah hasil TF-IDF bukan 571 data."
+    )
+
+print(
+    "✓ Detail TF-IDF 571 data berhasil dibuat."
+)
+
+
+# ============================================================
+# 10. MEMBENTUK JSON FINAL
+# ============================================================
+
+hasil_json = {
+    "summary": {
+        "jumlah_data": 571,
+        "jumlah_fitur": int(
+            len(kata_unik)
+        ),
+        "data_training": int(
+            len(train_index)
+        ),
+        "data_testing": int(
+            len(test_index)
+        ),
+        "ukuran_matriks_training": [
+            int(X_train.shape[0]),
+            int(X_train.shape[1])
+        ],
+        "ukuran_matriks_testing": [
+            int(X_test.shape[0]),
+            int(X_test.shape[1])
+        ],
+        "test_size": 0.2,
+        "random_state": 42,
+        "stratify": "label",
+        "norm": None,
+        "smooth_idf": True,
+        "use_idf": True,
+        "sublinear_tf": False,
+        "keterangan": (
+            "TF-IDF dihitung tanpa normalisasi L2 "
+            "(norm=None). Bobot akhir merupakan "
+            "hasil TF × IDF."
+        )
+    },
+    "data": data_semua
+}
+
+
+# ============================================================
+# 11. BACKUP JSON LAMA
+# ============================================================
+
+if OUTPUT_PATH.exists():
+    timestamp = datetime.now().strftime(
+        "%Y%m%d_%H%M%S"
+    )
+
+    backup_path = (
+        PUBLIC_DATA_DIR
+        / f"tfidf_research_backup_{timestamp}.json"
+    )
+
+    shutil.copy2(
+        OUTPUT_PATH,
+        backup_path
+    )
+
+    print(
+        "\n✓ JSON lama dibackup:"
+    )
+
+    print(
+        f"  {backup_path.name}"
+    )
+
+
+# ============================================================
+# 12. MENYIMPAN JSON BARU
+# ============================================================
+
+with open(
+    OUTPUT_PATH,
+    "w",
+    encoding="utf-8"
+) as file:
+    json.dump(
+        hasil_json,
+        file,
+        ensure_ascii=False,
+        indent=2
+    )
+
+print(
+    "\n✓ JSON TF-IDF baru berhasil disimpan:"
+)
+
+print(
+    f"  {OUTPUT_PATH}"
+)
+
+
+# ============================================================
+# 13. VERIFIKASI FILE HASIL
+# ============================================================
+
+with open(
+    OUTPUT_PATH,
+    "r",
+    encoding="utf-8"
+) as file:
+    verifikasi = json.load(
+        file
+    )
+
+if len(
+    verifikasi.get(
+        "data",
+        []
+    )
+) != 571:
+    raise ValueError(
+        "Verifikasi gagal: jumlah data JSON bukan 571."
+    )
+
+summary_verifikasi = verifikasi.get(
+    "summary",
+    {}
+)
+
+if summary_verifikasi.get(
+    "jumlah_fitur"
+) != 675:
+    raise ValueError(
+        "Verifikasi gagal: jumlah fitur bukan 675."
+    )
+
+if summary_verifikasi.get(
+    "norm",
+    "SALAH"
+) is not None:
+    raise ValueError(
+        "Verifikasi gagal: norm bukan None."
+    )
+
+
+# ============================================================
+# 14. MENCARI BOBOT TF-IDF TERBESAR
+# ============================================================
+
+bobot_terbesar = 0.0
+kata_bobot_terbesar = "-"
+data_bobot_terbesar = None
+
+for item in data_semua:
+    for fitur in item["bobot_tfidf"]:
+        if fitur["bobot"] > bobot_terbesar:
+            bobot_terbesar = fitur["bobot"]
+            kata_bobot_terbesar = fitur["kata"]
+            data_bobot_terbesar = item["no_data"]
+
+
+# ============================================================
+# 15. OUTPUT FINAL
+# ============================================================
+
+print("\n" + "=" * 80)
+print("EXPORT TF-IDF PENELITIAN BERHASIL")
+print("=" * 80)
+
+print(
+    f"Jumlah data             : "
+    f"{len(data_semua)}"
+)
+
+print(
+    f"Data training           : "
+    f"{len(train_index)}"
+)
+
+print(
+    f"Data testing            : "
+    f"{len(test_index)}"
+)
+
+print(
+    f"Jumlah fitur            : "
+    f"{len(kata_unik)}"
+)
+
+print(
+    f"Ukuran matriks training : "
+    f"{X_train.shape}"
+)
+
+print(
+    f"Ukuran matriks testing  : "
+    f"{X_test.shape}"
+)
+
+print(
+    f"Normalisasi TF-IDF      : "
+    f"{norm_tfidf}"
+)
+
+print(
+    "Bobot akhir            : "
+    "TF × IDF"
+)
+
+print(
+    f"Bobot terbesar          : "
+    f"{bobot_terbesar:.6f}"
+)
+
+print(
+    f"Kata bobot terbesar     : "
+    f"{kata_bobot_terbesar}"
+)
+
+print(
+    f"Berada pada Data ke     : "
+    f"{data_bobot_terbesar}"
+)
+
+print(
+    f"\nFile output:\n{OUTPUT_PATH}"
+)
+
+print(
+    "\n✓ TF-IDF website sekarang menggunakan "
+    "hasil penelitian TANPA normalisasi L2."
+)
\ No newline at end of file
diff --git a/api_slearn/main.py b/api_slearn/main.py
new file mode 100644
index 0000000..d2dbb2d
--- /dev/null
+++ b/api_slearn/main.py
@@ -0,0 +1,487 @@
+from uuid import uuid4
+
+from fastapi import FastAPI, HTTPException, BackgroundTasks
+from fastapi.middleware.cors import CORSMiddleware
+from pydantic import BaseModel, Field
+from typing import Literal
+from training_input import validate_column
+from model_registry import bundle, history, activate, queue, train_job
+
+from model_service import (
+    analisis_teks,
+    preprocessing_detail,
+    get_model_info
+)
+
+from database import (
+    test_db_connection,
+    get_database_summary,
+    save_analysis_batch,
+    get_analysis_batch,
+    get_analysis_history,
+    save_single_prediction,
+    get_single_prediction_history,
+    get_single_prediction
+)
+
+
+# ============================================================
+# FASTAPI
+# ============================================================
+
+app = FastAPI(
+    title="S-Learn Sentiment Analysis API",
+    description=(
+        "Backend API analisis sentimen S-Learn "
+        "menggunakan TF-IDF dan Logistic Regression."
+    ),
+    version="1.0.0"
+)
+
+
+# ============================================================
+# CORS
+# ============================================================
+
+app.add_middleware(
+    CORSMiddleware,
+    allow_origin_regex=r"http://(localhost|127\.0\.0\.1):\d+",
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"]
+)
+
+
+# ============================================================
+# REQUEST MODEL
+# ============================================================
+
+class TextRequest(BaseModel):
+    text: str
+
+
+class CSVReviewItem(BaseModel):
+    source_row_number: int
+    text: str
+
+
+class CSVAnalysisRequest(BaseModel):
+    file_name: str
+    selected_column: str
+    reviews: list[CSVReviewItem]
+
+
+class TrainingRequest(BaseModel):
+    selected_column: str = Field(min_length=1, max_length=200)
+    confirmed_review_column: Literal[True]
+    file_name: str = Field(min_length=1, max_length=200)
+    reviews: list[str] = Field(min_length=1, max_length=5000)
+
+
+@app.get('/models')
+def model_history():
+    return {'status': 'success', 'data': history()}
+
+
+@app.get('/model-info/original')
+def original_model_info():
+    return {'status': 'success', 'data': bundle('v1')[2]}
+
+
+@app.post('/models/{version}/activate')
+def activate_model(version: str):
+    try:
+        return {'status': 'success', 'data': activate(version)}
+    except ValueError as error:
+        raise HTTPException(status_code=400, detail=str(error)) from error
+
+
+@app.post('/training', status_code=202)
+def training(request: TrainingRequest, background: BackgroundTasks):
+    try:
+        validate_column(request.selected_column)
+    except ValueError as error:
+        raise HTTPException(status_code=400, detail=str(error)) from error
+    if any(len(text) > 10000 for text in request.reviews):
+        raise HTTPException(status_code=400, detail='Panjang ulasan maksimal 10.000 karakter.')
+    if not any(text.strip() for text in request.reviews):
+        raise HTTPException(status_code=400, detail='CSV tidak berisi ulasan.')
+    try:
+        job_id = queue(request.file_name)
+    except ValueError as error:
+        raise HTTPException(status_code=409, detail=str(error)) from error
+    background.add_task(train_job, job_id, request.reviews, request.selected_column)
+    return {'status': 'success', 'job_id': job_id}
+
+
+# ============================================================
+# ROOT
+# ============================================================
+
+@app.get("/")
+def root():
+    return {
+        "message": "S-Learn Sentiment Analysis API",
+        "status": "running"
+    }
+
+
+# ============================================================
+# HEALTH CHECK BACKEND
+# ============================================================
+
+@app.get("/health")
+def health_check():
+    return {
+        "status": "ok",
+        "service": "api_slearn",
+        "model": "loaded"
+    }
+
+
+# ============================================================
+# HEALTH CHECK DATABASE
+# ============================================================
+
+@app.get("/database/health")
+def database_health():
+    try:
+        koneksi = test_db_connection()
+        summary = get_database_summary()
+
+        return {
+            "status": "success",
+            "message": "Koneksi MySQL berhasil.",
+            "database": koneksi["database"],
+            "tables": koneksi["tables"],
+            "summary": summary
+        }
+
+    except ConnectionError as error:
+        raise HTTPException(
+            status_code=500,
+            detail=str(error)
+        )
+
+
+# ============================================================
+# INFORMASI MODEL
+# ============================================================
+
+@app.get("/model-info")
+def model_info():
+    return {
+        "status": "success",
+        "data": get_model_info()
+    }
+
+
+# ============================================================
+# PREPROCESSING SATU ULASAN
+# ============================================================
+
+@app.post("/preprocess")
+def preprocess(request: TextRequest):
+    try:
+        hasil = preprocessing_detail(
+            request.text
+        )
+
+        return {
+            "status": "success",
+            "data": hasil
+        }
+
+    except ValueError as error:
+        raise HTTPException(
+            status_code=400,
+            detail=str(error)
+        )
+
+
+# ============================================================
+# PREDIKSI SATU ULASAN
+# ============================================================
+
+@app.post("/predict")
+def predict(request: TextRequest):
+    try:
+        # ----------------------------------------------------
+        # 1. ANALISIS TEKS
+        # ----------------------------------------------------
+
+        hasil = analisis_teks(
+            request.text
+        )
+
+        # ----------------------------------------------------
+        # 2. SIMPAN HASIL KE MYSQL
+        # ----------------------------------------------------
+
+        try:
+            prediction_id = save_single_prediction(
+                hasil
+            )
+
+        except Exception as error:
+            raise HTTPException(
+                status_code=500,
+                detail=(
+                    "Prediksi berhasil dilakukan, "
+                    "tetapi hasil gagal disimpan "
+                    "ke database. "
+                    f"{str(error)}"
+                )
+            )
+
+        # ----------------------------------------------------
+        # 3. KEMBALIKAN HASIL
+        # ----------------------------------------------------
+
+        return {
+            "status": "success",
+            "message": (
+                "Prediksi berhasil dilakukan "
+                "dan disimpan ke riwayat."
+            ),
+            "data": {
+                **hasil,
+                "prediction_id": prediction_id
+            }
+        }
+
+    except HTTPException:
+        raise
+
+    except ValueError as error:
+        raise HTTPException(
+            status_code=400,
+            detail=str(error)
+        )
+
+
+# ============================================================
+# RIWAYAT PREDIKSI SATU ULASAN
+# ============================================================
+
+@app.get("/predictions")
+def prediction_history():
+    try:
+        history = get_single_prediction_history()
+
+        return {
+            "status": "success",
+            "data": history,
+            "total": len(history)
+        }
+
+    except Exception as error:
+        raise HTTPException(
+            status_code=500,
+            detail=(
+                "Gagal mengambil riwayat "
+                "Prediksi Satu Ulasan. "
+                f"{str(error)}"
+            )
+        )
+
+
+# ============================================================
+# DETAIL SATU PREDIKSI
+# ============================================================
+
+@app.get("/predictions/{prediction_id}")
+def prediction_detail(
+    prediction_id: int
+):
+    if prediction_id < 1:
+        raise HTTPException(
+            status_code=400,
+            detail="ID prediksi tidak valid."
+        )
+
+    try:
+        hasil = get_single_prediction(
+            prediction_id
+        )
+
+        if hasil is None:
+            raise HTTPException(
+                status_code=404,
+                detail="Riwayat prediksi tidak ditemukan."
+            )
+
+        return {
+            "status": "success",
+            "data": hasil
+        }
+
+    except HTTPException:
+        raise
+
+    except Exception as error:
+        raise HTTPException(
+            status_code=500,
+            detail=(
+                "Gagal mengambil detail prediksi. "
+                f"{str(error)}"
+            )
+        )
+
+
+# ============================================================
+# ANALISIS CSV
+# ============================================================
+
+@app.post("/analysis/csv")
+def analysis_csv(
+    request: CSVAnalysisRequest
+):
+    if not request.file_name.strip():
+        raise HTTPException(
+            status_code=400,
+            detail="Nama file CSV tidak boleh kosong."
+        )
+
+    if not request.selected_column.strip():
+        raise HTTPException(
+            status_code=400,
+            detail="Kolom ulasan belum dipilih."
+        )
+
+    if not request.reviews:
+        raise HTTPException(
+            status_code=400,
+            detail="Tidak ada ulasan yang dapat dianalisis."
+        )
+
+    batch_id = (
+        "BATCH-"
+        + uuid4().hex[:12].upper()
+    )
+
+    hasil_analisis = []
+    snapshot = bundle()
+
+    for review in request.reviews:
+
+        if review.source_row_number < 1:
+            raise HTTPException(
+                status_code=400,
+                detail="Nomor baris CSV tidak valid."
+            )
+
+        try:
+            hasil = analisis_teks(
+                review.text, snapshot=snapshot
+            )
+
+        except ValueError as error:
+            raise HTTPException(
+                status_code=400,
+                detail=(
+                    f"Baris {review.source_row_number}: "
+                    f"{str(error)}"
+                )
+            )
+
+        hasil[
+            "source_row_number"
+        ] = review.source_row_number
+
+        hasil_analisis.append(
+            hasil
+        )
+
+    try:
+        batch = save_analysis_batch(
+            batch_id=batch_id,
+            file_name=request.file_name.strip(),
+            selected_column=request.selected_column.strip(),
+            results=hasil_analisis
+        )
+
+    except Exception as error:
+        raise HTTPException(
+            status_code=500,
+            detail=(
+                "Analisis berhasil dilakukan, "
+                "tetapi hasil gagal disimpan "
+                "ke database. "
+                f"{str(error)}"
+            )
+        )
+
+    return {
+        "status": "success",
+        "message": (
+            "CSV berhasil dianalisis dan "
+            "disimpan ke database."
+        ),
+        "data": {
+            **batch,
+            "results": hasil_analisis
+        }
+    }
+
+
+# ============================================================
+# RIWAYAT SEMUA BATCH CSV
+# ============================================================
+
+@app.get("/analysis")
+def analysis_history():
+    try:
+        history = get_analysis_history()
+
+        return {
+            "status": "success",
+            "data": history,
+            "total": len(history)
+        }
+
+    except Exception as error:
+        raise HTTPException(
+            status_code=500,
+            detail=(
+                "Gagal mengambil riwayat analisis. "
+                f"{str(error)}"
+            )
+        )
+
+
+# ============================================================
+# DETAIL SATU BATCH CSV
+# ============================================================
+
+@app.get("/analysis/{batch_id}")
+def analysis_detail(
+    batch_id: str
+):
+    try:
+        hasil = get_analysis_batch(
+            batch_id.strip()
+        )
+
+        if hasil is None:
+            raise HTTPException(
+                status_code=404,
+                detail="Batch analisis tidak ditemukan."
+            )
+
+        return {
+            "status": "success",
+            "data": hasil
+        }
+
+    except HTTPException:
+        raise
+
+    except Exception as error:
+        raise HTTPException(
+            status_code=500,
+            detail=(
+                "Gagal mengambil hasil analisis. "
+                f"{str(error)}"
+            )
+        )
diff --git a/api_slearn/migrate_model_versions.py b/api_slearn/migrate_model_versions.py
new file mode 100644
index 0000000..c71825d
--- /dev/null
+++ b/api_slearn/migrate_model_versions.py
@@ -0,0 +1,24 @@
+"""Add nullable version columns without modifying historical data. Safe to rerun."""
+from database import get_db_connection
+
+def migrate(connection):
+    cursor = connection.cursor()
+    try:
+        for table in ('analysis_batches', 'single_prediction_history'):
+            cursor.execute('SELECT COUNT(*) FROM information_schema.COLUMNS WHERE TABLE_SCHEMA=DATABASE() AND TABLE_NAME=%s AND COLUMN_NAME=%s', (table, 'model_version'))
+            if not cursor.fetchone()[0]:
+                cursor.execute(f'ALTER TABLE `{table}` ADD COLUMN `model_version` VARCHAR(64) NULL DEFAULT NULL')
+                print(f'{table}: model_version ditambahkan.')
+            else:
+                print(f'{table}: sudah diperbarui.')
+        connection.commit()
+    finally:
+        cursor.close()
+
+if __name__ == '__main__':
+    connection = get_db_connection()
+    try:
+        migrate(connection)
+        print('Selesai. Riwayat lama tetap tersimpan dengan versi tidak tercatat.')
+    finally:
+        connection.close()
diff --git a/api_slearn/model_registry.py b/api_slearn/model_registry.py
new file mode 100644
index 0000000..0d7b71a
--- /dev/null
+++ b/api_slearn/model_registry.py
@@ -0,0 +1,259 @@
+"""Versioned local model store. Run one Uvicorn worker (see PANDUAN_REVISI.md)."""
+import hashlib
+import json
+import logging
+import os
+import sqlite3
+import threading
+import unicodedata
+from datetime import datetime, timezone
+from contextlib import contextmanager
+from pathlib import Path
+from uuid import uuid4
+
+import joblib
+import pandas as pd
+from sklearn.base import clone
+from sklearn.metrics import accuracy_score, classification_report, confusion_matrix
+from sklearn.model_selection import train_test_split
+
+BASE = Path(__file__).resolve().parent
+ARTIFACTS = BASE / 'artifacts_slearn'
+STORE = Path(os.getenv('SLEARN_MODEL_STORE', str(BASE / 'model_store')))
+STORE.mkdir(parents=True, exist_ok=True)
+DB = STORE / 'registry.sqlite3'
+_cache = {}
+_cache_lock = threading.RLock()
+_seed_cache = None
+
+
+def now():
+    return datetime.now(timezone.utc).isoformat()
+
+
+@contextmanager
+def connect():
+    db = sqlite3.connect(DB, timeout=30)
+    db.row_factory = sqlite3.Row
+    try:
+        with db:
+            yield db
+    finally:
+        db.close()
+
+
+def key(text):
+    return ' '.join(unicodedata.normalize('NFKC', str(text)).casefold().split())
+
+
+def initialize():
+    with connect() as db:
+        db.executescript('''
+            CREATE TABLE IF NOT EXISTS versions (
+                id TEXT PRIMARY KEY, created_at TEXT NOT NULL, metadata TEXT NOT NULL);
+            CREATE TABLE IF NOT EXISTS settings (key TEXT PRIMARY KEY, value TEXT NOT NULL);
+            CREATE TABLE IF NOT EXISTS additions (
+                text_key TEXT PRIMARY KEY, text TEXT NOT NULL, stem TEXT NOT NULL,
+                label INTEGER NOT NULL, confidence REAL NOT NULL,
+                teacher TEXT NOT NULL, version TEXT NOT NULL);
+            CREATE TABLE IF NOT EXISTS jobs (
+                id TEXT PRIMARY KEY, created_at TEXT NOT NULL, status TEXT NOT NULL,
+                message TEXT NOT NULL, version TEXT, file_name TEXT NOT NULL);
+            CREATE UNIQUE INDEX IF NOT EXISTS one_training ON jobs ((1))
+                WHERE status IN ('queued', 'running');
+        ''')
+        columns = {r['name'] for r in db.execute('PRAGMA table_info(jobs)')}
+        if 'audit' not in columns:
+            db.execute('ALTER TABLE jobs ADD COLUMN audit TEXT')
+        meta = json.loads((ARTIFACTS / 'metadata_model.json').read_text(encoding='utf-8'))
+        meta.update(version='v1', label_source='Dataset penelitian berlabel', added_rows=0)
+        db.execute('INSERT OR IGNORE INTO versions VALUES (?, ?, ?)',
+                   ('v1', meta.get('dibuat_pada_utc', now()), json.dumps(meta)))
+        db.execute("INSERT OR IGNORE INTO settings VALUES ('active', 'v1')")
+        # A stopped process cannot finish its queued job. No partial data are committed.
+        db.execute("UPDATE jobs SET status='failed', message=? WHERE status IN ('queued','running')",
+                   ('Training terhenti saat server dimatikan. Silakan unggah kembali.',))
+
+
+initialize()
+
+
+def bundle(version=None):
+    with connect() as db:
+        version = version or db.execute("SELECT value FROM settings WHERE key='active'").fetchone()[0]
+        row = db.execute('SELECT metadata FROM versions WHERE id=?', (version,)).fetchone()
+    if row is None:
+        raise ValueError('Versi model tidak ditemukan.')
+    if json.loads(row[0]).get('invalidated'):
+        raise ValueError('Model ini tidak valid karena input training keliru dan tidak boleh digunakan.')
+    with _cache_lock:
+        if version not in _cache:
+            folder = ARTIFACTS if version == 'v1' else STORE / version
+            model = joblib.load(folder / 'model_logistic_regression.joblib')
+            vectorizer = joblib.load(folder / 'tfidf_vectorizer.joblib')
+            meta = json.loads(row[0])
+            if model.n_features_in_ != len(vectorizer.get_feature_names_out()) or list(model.classes_) != [0, 1]:
+                raise ValueError('Pasangan model dan TF-IDF tidak valid.')
+            _cache[version] = (model, vectorizer, meta)
+        return _cache[version]
+
+
+def seed():
+    global _seed_cache
+    if _seed_cache is not None:
+        return _seed_cache
+    frame = pd.read_csv(ARTIFACTS / 'training_seed.csv', keep_default_na=False)
+    model, vec, meta = bundle('v1')
+    if len(frame) != meta['total_data'] or not set(frame.label).issubset({0, 1}):
+        raise ValueError('Dataset awal tidak sesuai metadata penelitian.')
+    train, test = train_test_split(frame, test_size=meta['split']['test_size'],
+                                  random_state=meta['split']['random_state'], stratify=frame.label)
+    predictions = model.predict(vec.transform(test.stemmed_text))
+    if confusion_matrix(test.label, predictions, labels=[0, 1]).tolist() != meta['confusion_matrix']:
+        raise ValueError('Evaluasi model awal tidak cocok. Training dibatalkan agar data uji tidak berubah.')
+    _seed_cache = (frame, train, test)
+    return _seed_cache
+
+
+def history():
+    with connect() as db:
+        active = db.execute("SELECT value FROM settings WHERE key='active'").fetchone()[0]
+        versions = [dict(json.loads(r['metadata']), created_at=r['created_at'], active=r['id'] == active)
+                    for r in db.execute('SELECT * FROM versions ORDER BY rowid DESC')]
+        jobs = [dict(r) for r in db.execute('SELECT * FROM jobs ORDER BY rowid DESC LIMIT 20')]
+    for job in jobs:
+        job['audit'] = json.loads(job['audit']) if job.get('audit') else None
+    return dict(active_version=active, versions=versions, jobs=jobs)
+
+
+def activate(version):
+    bundle(version)  # Load and validate before changing the active pointer.
+    with connect() as db:
+        db.execute("UPDATE settings SET value=? WHERE key='active'", (version,))
+    return history()
+
+
+def queue(file_name):
+    job_id = uuid4().hex
+    try:
+        with connect() as db:
+            db.execute('INSERT INTO jobs (id, created_at, status, message, version, file_name) VALUES (?, ?, ?, ?, ?, ?)',
+                       (job_id, now(), 'queued', 'Menunggu proses training.', None, file_name[:200]))
+    except sqlite3.IntegrityError:
+        raise ValueError('Training lain masih berjalan. Tunggu hingga selesai.') from None
+    return job_id
+
+
+def train_job(job_id, reviews, selected_column=None):
+    try:
+        with connect() as db:
+            db.execute("UPDATE jobs SET status='running', message=? WHERE id=?",
+                       ('Memeriksa data dan membuat label otomatis...', job_id))
+        frame, initial_train, test = seed()
+        teacher_model, teacher_vec, teacher_meta = bundle()
+        from model_service import preprocessing_detail
+        with connect() as db:
+            old = [dict(r) for r in db.execute('SELECT * FROM additions ORDER BY rowid')]
+            count = db.execute('SELECT COUNT(*) FROM versions').fetchone()[0]
+        test_text = {key(x) for x in test.komentar}
+        test_stem = {key(x) for x in test.stemmed_text}
+        initial_text = {key(x) for x in initial_train.komentar}
+        old_text = {r['text_key'] for r in old}
+        seen_stem = {key(x) for x in frame.stemmed_text} | {key(r['stem']) for r in old}
+        uploaded_text = set()
+        additions, skipped = [], dict(duplicate=0, empty=0, unknown=0)
+        skipped_rows = []
+        def skip(row_number, text, category, reason):
+            skipped[category] += 1
+            skipped_rows.append(dict(source_row_number=row_number, text=text, reason=reason))
+        for index, raw in enumerate(reviews):
+            text = raw.strip()
+            row_number = index + 2  # CSV record number, including the header.
+            if not text:
+                skip(row_number, text, 'empty', 'Ulasan kosong')
+                continue
+            text_key = key(text)
+            if text_key in test_text:
+                skip(row_number, text, 'duplicate', 'Cocok dengan data uji yang dilindungi')
+                continue
+            if text_key in initial_text:
+                skip(row_number, text, 'duplicate', 'Sudah ada dalam data latih awal')
+                continue
+            if text_key in old_text:
+                skip(row_number, text, 'duplicate', 'Sudah ada dalam data tambahan sebelumnya')
+                continue
+            if text_key in uploaded_text:
+                skip(row_number, text, 'duplicate', 'Duplikat ulasan dalam file unggahan')
+                continue
+            uploaded_text.add(text_key)
+            stem = preprocessing_detail(text)['stemming']
+            if not stem.strip():
+                skip(row_number, text, 'empty', 'Tidak ada kata setelah preprocessing')
+                continue
+            if key(stem) in test_stem:
+                skip(row_number, text, 'duplicate', 'Hasil preprocessing cocok dengan data uji yang dilindungi')
+                continue
+            if key(stem) in seen_stem:
+                skip(row_number, text, 'duplicate', 'Hasil preprocessing sama dengan data yang sudah ada')
+                continue
+            features = teacher_vec.transform([stem])
+            if not features.nnz:
+                skip(row_number, text, 'unknown', 'Tidak ada fitur yang dikenali model pemberi label')
+                continue
+            label = int(teacher_model.predict(features)[0])
+            confidence = float(teacher_model.predict_proba(features)[0].max())
+            additions.append(dict(text_key=text_key, text=text, stem=stem, label=label,
+                                  confidence=confidence, teacher=teacher_meta['version']))
+            seen_stem.add(key(stem))
+        audit = dict(uploaded_rows=len(reviews), accepted_rows=len(additions),
+                     skipped_rows=skipped_rows, training_before=len(initial_train)+len(old), selected_column=selected_column)
+        with connect() as db:
+            db.execute('UPDATE jobs SET audit=? WHERE id=?', (json.dumps(audit), job_id))
+        if not additions:
+            with connect() as db:
+                db.execute("UPDATE jobs SET status='skipped', message=? WHERE id=?",
+                           ('Tidak ada data baru yang dapat dilatih. Data latih tetap.', job_id))
+            return
+        texts = initial_train.stemmed_text.tolist() + [r['stem'] for r in old + additions]
+        labels = initial_train.label.tolist() + [r['label'] for r in old + additions]
+        with connect() as db:
+            db.execute('UPDATE jobs SET message=? WHERE id=?',
+                       ('Melatih TF-IDF dan Logistic Regression, lalu mengevaluasi model...', job_id))
+        base_model, base_vec, base_meta = bundle('v1')
+        vec, model = clone(base_vec), clone(base_model)
+        model.fit(vec.fit_transform(texts), labels)
+        predicted = model.predict(vec.transform(test.stemmed_text))
+        report = classification_report(test.label, predicted, labels=[0, 1], output_dict=True, zero_division=0)
+        version = f'v{count + 1}'
+        meta = {k: base_meta[k] for k in ('nama_model', 'label_mapping', 'split', 'preprocessing_order')}
+        meta.update(version=version, total_data=len(labels) + len(test),
+                    jumlah_data_training=len(labels), jumlah_data_testing=len(test),
+                    jumlah_sentimen_negatif=int(labels.count(0) + (test.label == 0).sum()),
+                    jumlah_sentimen_positif=int(labels.count(1) + (test.label == 1).sum()),
+                    jumlah_fitur_tfidf=len(vec.get_feature_names_out()),
+                    akurasi=float(accuracy_score(test.label, predicted)),
+                    confusion_matrix=confusion_matrix(test.label, predicted, labels=[0, 1]).tolist(),
+                    classification_report=report, teacher_version=teacher_meta['version'],
+                    label_source='Pseudo-labeling (label otomatis dari model aktif)',
+                    added_rows=len(additions), cumulative_added_rows=len(old) + len(additions),
+                    audit=audit, skipped=skipped, test_seed_sha256=hashlib.sha256(
+                        (ARTIFACTS / 'training_seed.csv').read_bytes()).hexdigest(),
+                    training_parameters=model.get_params())
+        # Write artifacts first; publish the version and corpus together in one transaction.
+        folder = STORE / version
+        folder.mkdir(exist_ok=True)
+        joblib.dump(model, folder / 'model_logistic_regression.joblib')
+        joblib.dump(vec, folder / 'tfidf_vectorizer.joblib')
+        (folder / 'metadata_model.json').write_text(json.dumps(meta, indent=2), encoding='utf-8')
+        with connect() as db:
+            db.execute('INSERT INTO versions VALUES (?, ?, ?)', (version, now(), json.dumps(meta)))
+            db.executemany('INSERT INTO additions VALUES (?, ?, ?, ?, ?, ?, ?)',
+                           [(r['text_key'], r['text'], r['stem'], r['label'], r['confidence'],
+                             r['teacher'], version) for r in additions])
+            db.execute("UPDATE jobs SET status='completed', message=?, version=? WHERE id=?",
+                       (f'{len(additions)} ulasan ditambahkan. Model siap ditinjau; model aktif tetap.', version, job_id))
+    except Exception as error:
+        logging.exception('Training failed: %s', job_id)
+        message = str(error) if isinstance(error, ValueError) else 'Training gagal. Periksa log backend lalu coba kembali.'
+        with connect() as db:
+            db.execute("UPDATE jobs SET status='failed', message=? WHERE id=?", (message, job_id))
diff --git a/api_slearn/model_service.py b/api_slearn/model_service.py
new file mode 100644
index 0000000..52dfff2
--- /dev/null
+++ b/api_slearn/model_service.py
@@ -0,0 +1,274 @@
+import json
+import importlib.util
+from pathlib import Path
+
+import joblib
+
+# ============================================================
+# PATH
+# ============================================================
+
+BASE_DIR = Path(__file__).resolve().parent
+ARTIFACT_DIR = BASE_DIR / "artifacts_slearn"
+
+MODEL_PATH = ARTIFACT_DIR / "model_logistic_regression.joblib"
+VECTORIZER_PATH = ARTIFACT_DIR / "tfidf_vectorizer.joblib"
+METADATA_PATH = ARTIFACT_DIR / "metadata_model.json"
+PREPROCESSING_PATH = ARTIFACT_DIR / "preprocessing_slearn.py"
+
+# ============================================================
+# CEK FILE ARTEFAK
+# ============================================================
+
+required_files = [
+    MODEL_PATH,
+    VECTORIZER_PATH,
+    METADATA_PATH,
+    PREPROCESSING_PATH
+]
+
+for file_path in required_files:
+    if not file_path.exists():
+        raise FileNotFoundError(
+            f"File artefak tidak ditemukan: {file_path}"
+        )
+
+# ============================================================
+# LOAD PREPROCESSING ASLI PENELITIAN
+# ============================================================
+
+def load_preprocessing_module():
+    spec = importlib.util.spec_from_file_location(
+        "preprocessing_slearn_artifact",
+        PREPROCESSING_PATH
+    )
+
+    if spec is None or spec.loader is None:
+        raise ImportError(
+            "preprocessing_slearn.py tidak dapat dimuat."
+        )
+
+    module = importlib.util.module_from_spec(spec)
+    spec.loader.exec_module(module)
+
+    return module
+
+
+preprocessing = load_preprocessing_module()
+
+# ============================================================
+# LOAD MODEL, TF-IDF, METADATA
+# ============================================================
+
+model = joblib.load(MODEL_PATH)
+vectorizer = joblib.load(VECTORIZER_PATH)
+
+metadata = json.loads(
+    METADATA_PATH.read_text(encoding="utf-8")
+)
+
+feature_names = vectorizer.get_feature_names_out()
+
+# ============================================================
+# VERIFIKASI ARTEFAK
+# ============================================================
+
+jumlah_fitur_metadata = int(
+    metadata["jumlah_fitur_tfidf"]
+)
+
+if len(feature_names) != jumlah_fitur_metadata:
+    raise RuntimeError(
+        "Jumlah fitur TF-IDF tidak sesuai dengan metadata."
+    )
+
+if model.n_features_in_ != len(feature_names):
+    raise RuntimeError(
+        "Jumlah fitur model tidak sesuai dengan TF-IDF."
+    )
+
+if model.classes_.tolist() != [0, 1]:
+    raise RuntimeError(
+        "Urutan kelas model harus [0, 1]."
+    )
+
+# ============================================================
+# DETAIL PREPROCESSING
+# Menggunakan fungsi yang SAMA dari artefak penelitian
+# ============================================================
+
+def preprocessing_detail(teks):
+    if not isinstance(teks, str) or not teks.strip():
+        raise ValueError(
+            "Masukkan ulasan terlebih dahulu."
+        )
+
+    original_text = teks.strip()
+
+    # 1. Cleaning
+    cleaned_text = preprocessing.cleaning(
+        original_text
+    )
+
+    # 2. Case Folding
+    case_folded_text = preprocessing.case_folding(
+        cleaned_text
+    )
+
+    # 3. Normalisasi
+    normalized_text = preprocessing.normalisasi(
+        case_folded_text
+    )
+
+    normalized_text = (
+        preprocessing.koreksi_normalisasi_validator(
+            normalized_text
+        )
+    )
+
+    # 4. Tokenisasi
+    tokenized_text = preprocessing.tokenisasi(
+        normalized_text
+    )
+
+    # 5. Stopword Removal
+    stopword_text = preprocessing.hapus_stopword(
+        tokenized_text
+    )
+
+    # 6. Stemming
+    stemmed_text = preprocessing.stemming(
+        stopword_text
+    )
+
+    return {
+        "original_text": original_text,
+        "cleaning": cleaned_text,
+        "case_folding": case_folded_text,
+        "normalization": normalized_text,
+        "tokenizing": tokenized_text,
+        "stopword_removal": stopword_text,
+        "stemming": stemmed_text
+    }
+
+# ============================================================
+# TF-IDF TERATAS
+# ============================================================
+
+def get_top_tfidf(fitur, top_n=10, names=None):
+    names = feature_names if names is None else names
+    if fitur.nnz == 0:
+        return []
+
+    row = fitur.getrow(0)
+
+    data = []
+
+    for index, bobot in zip(
+        row.indices,
+        row.data
+    ):
+        data.append({
+            "kata": str(names[index]),
+            "bobot": float(bobot)
+        })
+
+    data.sort(
+        key=lambda item: item["bobot"],
+        reverse=True
+    )
+
+    return data[:top_n]
+
+# ============================================================
+# ANALISIS SATU TEKS
+# ============================================================
+
+def analisis_teks(teks, snapshot=None):
+    from model_registry import bundle
+    model, vectorizer, metadata = snapshot or bundle()
+    proses = preprocessing_detail(teks)
+
+    stemmed_text = proses["stemming"]
+
+    if not stemmed_text.strip():
+        raise ValueError(
+            "Ulasan tidak memiliki kata yang dapat diproses."
+        )
+
+    # PENTING:
+    # hanya transform(), TIDAK fit ulang
+    fitur = vectorizer.transform(
+        [stemmed_text]
+    )
+
+    # Jika tidak ada fitur penelitian yang dikenali,
+    # Logistic Regression TIDAK dijalankan
+    if fitur.nnz == 0:
+        raise ValueError(
+            "Kata dalam ulasan belum dikenali model."
+        )
+
+    label = int(
+        model.predict(fitur)[0]
+    )
+
+    sentiment = metadata[
+        "label_mapping"
+    ][str(label)].capitalize()
+
+    tfidf_top = get_top_tfidf(
+        fitur,
+        top_n=10,
+        names=vectorizer.get_feature_names_out()
+    )
+
+    return {
+        "model_version": metadata['version'],
+        "teks": proses["original_text"],
+        "label": label,
+        "sentimen": sentiment,
+        "preprocessing": {
+            "cleaning": proses["cleaning"],
+            "case_folding": proses["case_folding"],
+            "normalization": proses["normalization"],
+            "tokenizing": proses["tokenizing"],
+            "stopword_removal": proses["stopword_removal"],
+            "stemming": proses["stemming"]
+        },
+        "jumlah_fitur_dikenali": int(
+            fitur.nnz
+        ),
+        "tfidf_top": tfidf_top
+    }
+
+# ============================================================
+# INFORMASI MODEL
+# ============================================================
+
+def get_model_info():
+    from model_registry import bundle
+    _, _, metadata = bundle()
+    return {
+        "version": metadata['version'],
+        "nama_model": metadata["nama_model"],
+        "total_data": metadata["total_data"],
+        "jumlah_sentimen_negatif":
+            metadata["jumlah_sentimen_negatif"],
+        "jumlah_sentimen_positif":
+            metadata["jumlah_sentimen_positif"],
+        "jumlah_data_training":
+            metadata["jumlah_data_training"],
+        "jumlah_data_testing":
+            metadata["jumlah_data_testing"],
+        "jumlah_fitur_tfidf":
+            metadata["jumlah_fitur_tfidf"],
+        "akurasi":
+            metadata["akurasi"],
+        "label_mapping":
+            metadata["label_mapping"],
+        "confusion_matrix":
+            metadata["confusion_matrix"],
+        "classification_report":
+            metadata["classification_report"]
+    }
diff --git a/api_slearn/model_store/v2/metadata_model.json b/api_slearn/model_store/v2/metadata_model.json
new file mode 100644
index 0000000..e01b2c3
--- /dev/null
+++ b/api_slearn/model_store/v2/metadata_model.json
@@ -0,0 +1,93 @@
+{
+  "nama_model": "Logistic Regression",
+  "label_mapping": {
+    "0": "NEGATIF",
+    "1": "POSITIF"
+  },
+  "split": {
+    "test_size": 0.2,
+    "random_state": 42,
+    "stratify": "label"
+  },
+  "preprocessing_order": [
+    "cleaning",
+    "case_folding",
+    "normalisasi",
+    "koreksi_normalisasi_validator",
+    "tokenisasi",
+    "hapus_stopword",
+    "stemming"
+  ],
+  "version": "v2",
+  "total_data": 620,
+  "jumlah_data_training": 505,
+  "jumlah_data_testing": 115,
+  "jumlah_sentimen_negatif": 402,
+  "jumlah_sentimen_positif": 218,
+  "jumlah_fitur_tfidf": 675,
+  "akurasi": 0.9304347826086956,
+  "confusion_matrix": [
+    [
+      71,
+      5
+    ],
+    [
+      3,
+      36
+    ]
+  ],
+  "classification_report": {
+    "0": {
+      "precision": 0.9594594594594594,
+      "recall": 0.9342105263157895,
+      "f1-score": 0.9466666666666667,
+      "support": 76.0
+    },
+    "1": {
+      "precision": 0.8780487804878049,
+      "recall": 0.9230769230769231,
+      "f1-score": 0.9,
+      "support": 39.0
+    },
+    "accuracy": 0.9304347826086956,
+    "macro avg": {
+      "precision": 0.9187541199736322,
+      "recall": 0.9286437246963564,
+      "f1-score": 0.9233333333333333,
+      "support": 115.0
+    },
+    "weighted avg": {
+      "precision": 0.9318506205038548,
+      "recall": 0.9304347826086956,
+      "f1-score": 0.930840579710145,
+      "support": 115.0
+    }
+  },
+  "teacher_version": "v1",
+  "label_source": "Pseudo-labeling (label otomatis dari model aktif)",
+  "added_rows": 49,
+  "cumulative_added_rows": 49,
+  "skipped": {
+    "duplicate": 11,
+    "empty": 0,
+    "unknown": 0
+  },
+  "test_seed_sha256": "79ba16d91783a5652de77c6299ac17313188afe5761645c4895516aa8ae9f105",
+  "training_parameters": {
+    "C": 1.0,
+    "class_weight": null,
+    "dual": false,
+    "fit_intercept": true,
+    "intercept_scaling": 1,
+    "l1_ratio": null,
+    "max_iter": 1000,
+    "multi_class": "deprecated",
+    "n_jobs": null,
+    "penalty": "l2",
+    "random_state": null,
+    "solver": "lbfgs",
+    "tol": 0.0001,
+    "verbose": 0,
+    "warm_start": false
+  }
+}
\ No newline at end of file
diff --git a/api_slearn/model_store/v2/model_logistic_regression.joblib b/api_slearn/model_store/v2/model_logistic_regression.joblib
new file mode 100644
index 0000000..086759f
Binary files /dev/null and b/api_slearn/model_store/v2/model_logistic_regression.joblib differ
diff --git a/api_slearn/model_store/v2/tfidf_vectorizer.joblib b/api_slearn/model_store/v2/tfidf_vectorizer.joblib
new file mode 100644
index 0000000..4c3d756
Binary files /dev/null and b/api_slearn/model_store/v2/tfidf_vectorizer.joblib differ
diff --git a/api_slearn/model_store/v3/metadata_model.json b/api_slearn/model_store/v3/metadata_model.json
new file mode 100644
index 0000000..a84bea1
--- /dev/null
+++ b/api_slearn/model_store/v3/metadata_model.json
@@ -0,0 +1,100 @@
+{
+  "nama_model": "Logistic Regression",
+  "label_mapping": {
+    "0": "NEGATIF",
+    "1": "POSITIF"
+  },
+  "split": {
+    "test_size": 0.2,
+    "random_state": 42,
+    "stratify": "label"
+  },
+  "preprocessing_order": [
+    "cleaning",
+    "case_folding",
+    "normalisasi",
+    "koreksi_normalisasi_validator",
+    "tokenisasi",
+    "hapus_stopword",
+    "stemming"
+  ],
+  "version": "v3",
+  "total_data": 670,
+  "jumlah_data_training": 555,
+  "jumlah_data_testing": 115,
+  "jumlah_sentimen_negatif": 427,
+  "jumlah_sentimen_positif": 243,
+  "jumlah_fitur_tfidf": 754,
+  "akurasi": 0.9478260869565217,
+  "confusion_matrix": [
+    [
+      73,
+      3
+    ],
+    [
+      3,
+      36
+    ]
+  ],
+  "classification_report": {
+    "0": {
+      "precision": 0.9605263157894737,
+      "recall": 0.9605263157894737,
+      "f1-score": 0.9605263157894737,
+      "support": 76.0
+    },
+    "1": {
+      "precision": 0.9230769230769231,
+      "recall": 0.9230769230769231,
+      "f1-score": 0.9230769230769231,
+      "support": 39.0
+    },
+    "accuracy": 0.9478260869565217,
+    "macro avg": {
+      "precision": 0.9418016194331984,
+      "recall": 0.9418016194331984,
+      "f1-score": 0.9418016194331984,
+      "support": 115.0
+    },
+    "weighted avg": {
+      "precision": 0.9478260869565217,
+      "recall": 0.9478260869565217,
+      "f1-score": 0.9478260869565217,
+      "support": 115.0
+    }
+  },
+  "teacher_version": "v2",
+  "label_source": "Pseudo-labeling (label otomatis dari model aktif)",
+  "added_rows": 50,
+  "cumulative_added_rows": 99,
+  "audit": {
+    "uploaded_rows": 50,
+    "accepted_rows": 50,
+    "skipped_rows": [],
+    "training_before": 505,
+    "selected_column": "ulasan"
+  },
+  "skipped": {
+    "duplicate": 0,
+    "empty": 0,
+    "unknown": 0
+  },
+  "test_seed_sha256": "79ba16d91783a5652de77c6299ac17313188afe5761645c4895516aa8ae9f105",
+  "training_parameters": {
+    "C": 1.0,
+    "class_weight": null,
+    "dual": false,
+    "fit_intercept": true,
+    "intercept_scaling": 1,
+    "l1_ratio": null,
+    "max_iter": 1000,
+    "multi_class": "deprecated",
+    "n_jobs": null,
+    "penalty": "l2",
+    "random_state": null,
+    "solver": "lbfgs",
+    "tol": 0.0001,
+    "verbose": 0,
+    "warm_start": false
+  }
+}
\ No newline at end of file
diff --git a/api_slearn/model_store/v3/model_logistic_regression.joblib b/api_slearn/model_store/v3/model_logistic_regression.joblib
new file mode 100644
index 0000000..6f9697b
Binary files /dev/null and b/api_slearn/model_store/v3/model_logistic_regression.joblib differ
diff --git a/api_slearn/model_store/v3/tfidf_vectorizer.joblib b/api_slearn/model_store/v3/tfidf_vectorizer.joblib
new file mode 100644
index 0000000..747a3f9
Binary files /dev/null and b/api_slearn/model_store/v3/tfidf_vectorizer.joblib differ
diff --git a/api_slearn/model_store/v4/metadata_model.json b/api_slearn/model_store/v4/metadata_model.json
new file mode 100644
index 0000000..a490b32
--- /dev/null
+++ b/api_slearn/model_store/v4/metadata_model.json
@@ -0,0 +1,100 @@
+{
+  "nama_model": "Logistic Regression",
+  "label_mapping": {
+    "0": "NEGATIF",
+    "1": "POSITIF"
+  },
+  "split": {
+    "test_size": 0.2,
+    "random_state": 42,
+    "stratify": "label"
+  },
+  "preprocessing_order": [
+    "cleaning",
+    "case_folding",
+    "normalisasi",
+    "koreksi_normalisasi_validator",
+    "tokenisasi",
+    "hapus_stopword",
+    "stemming"
+  ],
+  "version": "v4",
+  "total_data": 720,
+  "jumlah_data_training": 605,
+  "jumlah_data_testing": 115,
+  "jumlah_sentimen_negatif": 457,
+  "jumlah_sentimen_positif": 263,
+  "jumlah_fitur_tfidf": 796,
+  "akurasi": 0.9304347826086956,
+  "confusion_matrix": [
+    [
+      72,
+      4
+    ],
+    [
+      4,
+      35
+    ]
+  ],
+  "classification_report": {
+    "0": {
+      "precision": 0.9473684210526315,
+      "recall": 0.9473684210526315,
+      "f1-score": 0.9473684210526315,
+      "support": 76.0
+    },
+    "1": {
+      "precision": 0.8974358974358975,
+      "recall": 0.8974358974358975,
+      "f1-score": 0.8974358974358975,
+      "support": 39.0
+    },
+    "accuracy": 0.9304347826086956,
+    "macro avg": {
+      "precision": 0.9224021592442645,
+      "recall": 0.9224021592442645,
+      "f1-score": 0.9224021592442645,
+      "support": 115.0
+    },
+    "weighted avg": {
+      "precision": 0.9304347826086956,
+      "recall": 0.9304347826086956,
+      "f1-score": 0.9304347826086956,
+      "support": 115.0
+    }
+  },
+  "teacher_version": "v2",
+  "label_source": "Pseudo-labeling (label otomatis dari model aktif)",
+  "added_rows": 50,
+  "cumulative_added_rows": 149,
+  "audit": {
+    "uploaded_rows": 50,
+    "accepted_rows": 50,
+    "skipped_rows": [],
+    "training_before": 555,
+    "selected_column": "ulasan"
+  },
+  "skipped": {
+    "duplicate": 0,
+    "empty": 0,
+    "unknown": 0
+  },
+  "test_seed_sha256": "79ba16d91783a5652de77c6299ac17313188afe5761645c4895516aa8ae9f105",
+  "training_parameters": {
+    "C": 1.0,
+    "class_weight": null,
+    "dual": false,
+    "fit_intercept": true,
+    "intercept_scaling": 1,
+    "l1_ratio": null,
+    "max_iter": 1000,
+    "multi_class": "deprecated",
+    "n_jobs": null,
+    "penalty": "l2",
+    "random_state": null,
+    "solver": "lbfgs",
+    "tol": 0.0001,
+    "verbose": 0,
+    "warm_start": false
+  }
+}
\ No newline at end of file
diff --git a/api_slearn/model_store/v4/model_logistic_regression.joblib b/api_slearn/model_store/v4/model_logistic_regression.joblib
new file mode 100644
index 0000000..8371ed1
Binary files /dev/null and b/api_slearn/model_store/v4/model_logistic_regression.joblib differ
diff --git a/api_slearn/model_store/v4/tfidf_vectorizer.joblib b/api_slearn/model_store/v4/tfidf_vectorizer.joblib
new file mode 100644
index 0000000..9de0b25
Binary files /dev/null and b/api_slearn/model_store/v4/tfidf_vectorizer.joblib differ
diff --git a/api_slearn/model_store/v5/metadata_model.json b/api_slearn/model_store/v5/metadata_model.json
new file mode 100644
index 0000000..9ae575f
--- /dev/null
+++ b/api_slearn/model_store/v5/metadata_model.json
@@ -0,0 +1,100 @@
+{
+  "nama_model": "Logistic Regression",
+  "label_mapping": {
+    "0": "NEGATIF",
+    "1": "POSITIF"
+  },
+  "split": {
+    "test_size": 0.2,
+    "random_state": 42,
+    "stratify": "label"
+  },
+  "preprocessing_order": [
+    "cleaning",
+    "case_folding",
+    "normalisasi",
+    "koreksi_normalisasi_validator",
+    "tokenisasi",
+    "hapus_stopword",
+    "stemming"
+  ],
+  "version": "v5",
+  "total_data": 770,
+  "jumlah_data_training": 655,
+  "jumlah_data_testing": 115,
+  "jumlah_sentimen_negatif": 482,
+  "jumlah_sentimen_positif": 288,
+  "jumlah_fitur_tfidf": 796,
+  "akurasi": 0.9478260869565217,
+  "confusion_matrix": [
+    [
+      73,
+      3
+    ],
+    [
+      3,
+      36
+    ]
+  ],
+  "classification_report": {
+    "0": {
+      "precision": 0.9605263157894737,
+      "recall": 0.9605263157894737,
+      "f1-score": 0.9605263157894737,
+      "support": 76.0
+    },
+    "1": {
+      "precision": 0.9230769230769231,
+      "recall": 0.9230769230769231,
+      "f1-score": 0.9230769230769231,
+      "support": 39.0
+    },
+    "accuracy": 0.9478260869565217,
+    "macro avg": {
+      "precision": 0.9418016194331984,
+      "recall": 0.9418016194331984,
+      "f1-score": 0.9418016194331984,
+      "support": 115.0
+    },
+    "weighted avg": {
+      "precision": 0.9478260869565217,
+      "recall": 0.9478260869565217,
+      "f1-score": 0.9478260869565217,
+      "support": 115.0
+    }
+  },
+  "teacher_version": "v4",
+  "label_source": "Pseudo-labeling (label otomatis dari model aktif)",
+  "added_rows": 50,
+  "cumulative_added_rows": 199,
+  "audit": {
+    "uploaded_rows": 50,
+    "accepted_rows": 50,
+    "skipped_rows": [],
+    "training_before": 605,
+    "selected_column": "ulasan"
+  },
+  "skipped": {
+    "duplicate": 0,
+    "empty": 0,
+    "unknown": 0
+  },
+  "test_seed_sha256": "79ba16d91783a5652de77c6299ac17313188afe5761645c4895516aa8ae9f105",
+  "training_parameters": {
+    "C": 1.0,
+    "class_weight": null,
+    "dual": false,
+    "fit_intercept": true,
+    "intercept_scaling": 1,
+    "l1_ratio": null,
+    "max_iter": 1000,
+    "multi_class": "deprecated",
+    "n_jobs": null,
+    "penalty": "l2",
+    "random_state": null,
+    "solver": "lbfgs",
+    "tol": 0.0001,
+    "verbose": 0,
+    "warm_start": false
+  }
+}
\ No newline at end of file
diff --git a/api_slearn/model_store/v5/model_logistic_regression.joblib b/api_slearn/model_store/v5/model_logistic_regression.joblib
new file mode 100644
index 0000000..2029aa9
Binary files /dev/null and b/api_slearn/model_store/v5/model_logistic_regression.joblib differ
diff --git a/api_slearn/model_store/v5/tfidf_vectorizer.joblib b/api_slearn/model_store/v5/tfidf_vectorizer.joblib
new file mode 100644
index 0000000..68c5248
Binary files /dev/null and b/api_slearn/model_store/v5/tfidf_vectorizer.joblib differ
diff --git a/api_slearn/preprocessing.py b/api_slearn/preprocessing.py
new file mode 100644
index 0000000..f15e73c
--- /dev/null
+++ b/api_slearn/preprocessing.py
@@ -0,0 +1,193 @@
+import re
+from nltk.tokenize import word_tokenize
+from nltk.corpus import stopwords
+from Sastrawi.Stemmer.StemmerFactory import StemmerFactory
+
+# ============================================================
+# STEMMER SASTRAWI
+# ============================================================
+
+stemmer_factory = StemmerFactory()
+stemmer = stemmer_factory.create_stemmer()
+
+# ============================================================
+# STOPWORD
+# ============================================================
+
+partikel_tambahan = {
+    "sih",
+    "si",
+    "kan",
+    "ya",
+    "bang",
+    "dong",
+    "lah",
+    "deh",
+    "kah",
+    "kok"
+}
+
+kata_negasi = {
+    "tidak",
+    "bukan",
+    "belum",
+    "jangan",
+    "tanpa",
+    "kurang",
+    "malah"
+}
+
+list_stopwords = set(stopwords.words("indonesian"))
+list_stopwords = list_stopwords | partikel_tambahan
+
+# Kata negasi harus tetap dipertahankan
+list_stopwords = list_stopwords - kata_negasi
+
+# ============================================================
+# KAMUS NORMALISASI
+# ============================================================
+#
+# Ini baru struktur awal backend.
+# Seluruh kamus final dari notebook penelitian nanti
+# dimasukkan ke bagian ini agar hasil preprocessing web
+# identik dengan penelitian.
+# ============================================================
+
+normalization_map = {
+    "download": "unduh",
+    "upload": "unggah",
+    "scan": "pindai",
+    "matkul": "mata kuliah",
+    "gabisa": "tidak bisa",
+    "gakbisa": "tidak bisa",
+    "nggakbisa": "tidak bisa",
+    "lemot": "lambat",
+    "submit": "unggah",
+    "userfriendly": "ramah pengguna",
+    "gak": "tidak",
+    "ga": "tidak",
+    "nggak": "tidak"
+}
+
+phrase_normalization = {
+    "di gunakan": "digunakan",
+    "didalam": "di dalam",
+    "diluar": "di luar"
+}
+
+# ============================================================
+# 1. CASE FOLDING
+# ============================================================
+
+def case_folding(text):
+    return str(text).lower()
+
+# ============================================================
+# 2. CLEANING
+# ============================================================
+
+def cleaning(text):
+    text = str(text)
+
+    # Hapus URL
+    text = re.sub(r"https?://\S+|www\.\S+", " ", text)
+
+    # Hapus mention
+    text = re.sub(r"@\w+", " ", text)
+
+    # Hapus hashtag beserta simbol #
+    text = re.sub(r"#\w+", " ", text)
+
+    # Hapus angka
+    text = re.sub(r"\d+", " ", text)
+
+    # Hanya pertahankan huruf dan spasi
+    text = re.sub(r"[^a-zA-Z\s]", " ", text)
+
+    # Rapikan spasi
+    text = re.sub(r"\s+", " ", text).strip()
+
+    return text
+
+# ============================================================
+# 3. NORMALISASI
+# ============================================================
+
+def normalization(text):
+    text = str(text)
+
+    # Normalisasi bentuk/frasa tertentu terlebih dahulu
+    for source, target in phrase_normalization.items():
+        text = re.sub(
+            rf"\b{re.escape(source)}\b",
+            target,
+            text
+        )
+
+    words = text.split()
+    normalized_words = []
+
+    for word in words:
+        replacement = normalization_map.get(word, word)
+
+        # Replacement boleh menghasilkan lebih dari satu kata
+        normalized_words.extend(replacement.split())
+
+    return " ".join(normalized_words)
+
+# ============================================================
+# 4. TOKENIZING
+# ============================================================
+
+def tokenizing(text):
+    return word_tokenize(str(text))
+
+# ============================================================
+# 5. STOPWORD REMOVAL
+# ============================================================
+
+def stopword_removal(tokens):
+    return [
+        token
+        for token in tokens
+        if token not in list_stopwords
+    ]
+
+# ============================================================
+# 6. STEMMING
+# ============================================================
+
+def stemming(tokens):
+    text = " ".join(tokens)
+    return stemmer.stem(text)
+
+# ============================================================
+# PIPELINE PREPROCESSING
+# ============================================================
+
+def preprocess_text(text):
+    original_text = str(text)
+
+    casefolded_text = case_folding(original_text)
+
+    cleaned_text = cleaning(casefolded_text)
+
+    normalized_text = normalization(cleaned_text)
+
+    tokenized_text = tokenizing(normalized_text)
+
+    stopword_tokens = stopword_removal(tokenized_text)
+
+    stopword_text = " ".join(stopword_tokens)
+
+    stemmed_text = stemming(stopword_tokens)
+
+    return {
+        "original_text": original_text,
+        "case_folding": casefolded_text,
+        "cleaning": cleaned_text,
+        "normalization": normalized_text,
+        "tokenizing": tokenized_text,
+        "stopword_removal": stopword_text,
+        "stemming": stemmed_text
+    }
\ No newline at end of file
diff --git a/api_slearn/pulihkan_data_prodi.py b/api_slearn/pulihkan_data_prodi.py
new file mode 100644
index 0000000..ee18c78
--- /dev/null
+++ b/api_slearn/pulihkan_data_prodi.py
@@ -0,0 +1,73 @@
+"""Targeted recovery. Stop backend first. Default is read-only inspection."""
+import argparse
+import json
+import sqlite3
+from datetime import datetime, timezone
+from pathlib import Path
+
+EXPECTED = {'Manajemen Informatika', 'Manajemen Informatika Internasional',
+            'Teknik Komputer Internasional', 'Teknik Informatika Internasional'}
+REASON = 'Input keliru: empat nama prodi digunakan sebagai ulasan. Tidak boleh diaktifkan.'
+
+def repair(store, apply=False):
+    path = store / 'registry.sqlite3'
+    if not path.is_file():
+        raise ValueError('Registry tidak ditemukan.')
+    db = sqlite3.connect(path.as_uri() + ('?mode=rw' if apply else '?mode=ro'), uri=True)
+    db.row_factory = sqlite3.Row
+    try:
+        if apply:
+            db.execute('BEGIN IMMEDIATE')
+        versions = {r['id']: json.loads(r['metadata']) for r in db.execute('SELECT * FROM versions')}
+        if set(versions) != {'v1', 'v2', 'v3'}:
+            raise ValueError('Versi berbeda dari kondisi yang diperiksa. Pemulihan dibatalkan.')
+        if db.execute("SELECT COUNT(*) FROM jobs WHERE status IN ('queued','running')").fetchone()[0]:
+            raise ValueError('Masih ada training berjalan. Hentikan dan periksa dahulu.')
+        rows = [dict(r) for r in db.execute("SELECT * FROM additions WHERE version='v3'")]
+        count = db.execute('SELECT COUNT(*) FROM additions').fetchone()[0]
+        if not rows and versions['v3'].get('invalidated') and count == 49:
+            print('Sudah dipulihkan. Kumpulan data latih 505; v3 tidak valid.')
+            return
+        if len(rows) != 4 or {r['text'] for r in rows} != EXPECTED or count != 53:
+            raise ValueError('Data tidak cocok dengan empat prodi yang diperiksa. Tidak ada perubahan.')
+        if versions['v2']['jumlah_data_training'] != 505:
+            raise ValueError('Metadata v2 tidak sesuai.')
+        for name in ('model_logistic_regression.joblib', 'tfidf_vectorizer.joblib'):
+            if not (store / 'v2' / name).is_file():
+                raise ValueError('Berkas model v2 tidak lengkap.')
+        print('Terverifikasi: 4 nama prodi pada v3; 509 -> 505 data latih.')
+        if not apply:
+            print('Pemeriksaan saja. Belum ada data yang diubah. Jalankan dengan --apply untuk memulihkan.')
+            return
+        # Make an SQLite-consistent recovery copy before changing any rows.
+        backup = store.parent / ('registry_sebelum_pemulihan_' + datetime.now().strftime('%Y%m%d_%H%M%S_%f') + '.sqlite3')
+        source = sqlite3.connect(path.as_uri() + '?mode=ro', uri=True)
+        dest = sqlite3.connect(backup)
+        try:
+            source.backup(dest)
+        finally:
+            source.close(); dest.close()
+        db.execute('CREATE TABLE IF NOT EXISTS quarantined_additions (text_key TEXT PRIMARY KEY, record_json TEXT NOT NULL, reason TEXT NOT NULL, quarantined_at TEXT NOT NULL)')
+        stamp = datetime.now(timezone.utc).isoformat()
+        for row in rows:
+            db.execute('INSERT INTO quarantined_additions VALUES (?,?,?,?)', (row['text_key'], json.dumps(row), REASON, stamp))
+            db.execute('DELETE FROM additions WHERE text_key=? AND version=?', (row['text_key'], 'v3'))
+        versions['v3'].update(invalidated=True, invalid_reason=REASON, invalidated_at=stamp)
+        db.execute("UPDATE versions SET metadata=? WHERE id='v3'", (json.dumps(versions['v3']),))
+        db.execute("UPDATE settings SET value='v2' WHERE key='active'")
+        db.execute("UPDATE jobs SET message=? WHERE version='v3'", ('Model v3 tidak valid: input prodi. Empat data telah dikarantina; kumpulan training dipulihkan.',))
+        db.commit()
+        print('Selesai: 4 data dikarantina, kumpulan data latih 505, v2 aktif, v3 ditandai tidak valid.')
+        print('Berkas model dan riwayat analisis tidak dihapus. Cadangan tambahan:', backup)
+    finally:
+        db.close()
+
+if __name__ == '__main__':
+    parser = argparse.ArgumentParser()
+    parser.add_argument('--store', type=Path, default=Path(__file__).resolve().parent / 'model_store')
+    parser.add_argument('--apply', action='store_true')
+    args = parser.parse_args()
+    try:
+        repair(args.store.resolve(), args.apply)
+    except (ValueError, sqlite3.Error) as error:
+        raise SystemExit(str(error))
diff --git a/api_slearn/requirements.txt b/api_slearn/requirements.txt
new file mode 100644
index 0000000..ed64fd3
--- /dev/null
+++ b/api_slearn/requirements.txt
@@ -0,0 +1,11 @@
+fastapi
+uvicorn[standard]
+python-multipart
+mysql-connector-python
+scikit-learn==1.6.1
+numpy==2.1.3
+scipy==1.16.3
+pandas==2.2.3
+nltk==3.9.1
+Sastrawi==1.0.1
+joblib==1.6.0
\ No newline at end of file
diff --git a/api_slearn/tests/test_retraining.py b/api_slearn/tests/test_retraining.py
new file mode 100644
index 0000000..18084dc
--- /dev/null
+++ b/api_slearn/tests/test_retraining.py
@@ -0,0 +1,87 @@
+"""Run: python -B -m unittest discover -s tests -v (uses a temporary model store)."""
+import hashlib
+import os
+from pathlib import Path
+import tempfile
+import unittest
+from unittest.mock import patch
+
+_temporary = tempfile.TemporaryDirectory()
+os.environ['SLEARN_MODEL_STORE'] = _temporary.name
+
+import model_registry as registry
+from model_service import analisis_teks
+from main import TrainingRequest, training
+from fastapi import BackgroundTasks, HTTPException
+
+
+class RetrainingTests(unittest.TestCase):
+    def test_full_lifecycle(self):
+        baseline = registry.bundle('v1')
+        frame, train, test = registry.seed()
+        self.assertEqual((len(train), len(test)), (456, 115))
+        self.assertAlmostEqual(baseline[2]['akurasi'], 0.9304347826086956)
+        original_hash = hashlib.sha256((registry.ARTIFACTS / 'model_logistic_regression.joblib').read_bytes()).hexdigest()
+        text = 'Aplikasi bagus sangat membantu belajar dengan materi menarik terbaru sekali'
+        before = analisis_teks(text)
+        queued = registry.queue('contoh.csv')
+        with self.assertRaises(ValueError):
+            registry.queue('duplikat-proses.csv')
+        registry.train_job(queued, [text, text, test.iloc[0].komentar, '', '123 !!!', 'zzqqxxvv'])
+        state = registry.history()
+        self.assertEqual(state['jobs'][0]['status'], 'completed', state['jobs'][0]['message'])
+        self.assertEqual(state['active_version'], 'v1')
+        self.assertEqual(state['versions'][0]['jumlah_data_training'], 457)
+        self.assertEqual(state['versions'][0]['skipped'], {'duplicate': 2, 'empty': 2, 'unknown': 1})
+        self.assertEqual(state['versions'][0]['teacher_version'], 'v1')
+        self.assertEqual(state['versions'][0]['jumlah_data_testing'], 115)
+        registry.activate('v2')
+        self.assertEqual(analisis_teks(text)['model_version'], 'v2')
+        # Old snapshots remain internally consistent during activation.
+        self.assertEqual(analisis_teks(text, snapshot=baseline), before)
+        registry._cache.clear()
+        self.assertEqual(registry.bundle()[2]['version'], 'v2')
+        registry.activate('v1')
+        self.assertEqual(analisis_teks(text), before)
+        self.assertEqual(original_hash, hashlib.sha256((registry.ARTIFACTS / 'model_logistic_regression.joblib').read_bytes()).hexdigest())
+        # Training after rollback still includes all previously committed additions.
+        job = registry.queue('tambahan.csv')
+        registry.train_job(job, ['Website lambat sering error saat mengumpulkan tugas malam terbaru'])
+        self.assertEqual(registry.history()['jobs'][0]['status'], 'completed')
+        self.assertEqual(registry.history()['versions'][0]['jumlah_data_training'], 458)
+        with self.assertRaises(ValueError):
+            registry.activate('../../invalid')
+        self.assertEqual(registry.history()['active_version'], 'v1')
+        failed = registry.queue('hanya-data-lama.csv')
+        registry.train_job(failed, [text, test.iloc[1].komentar])
+        state = registry.history()
+        self.assertEqual(state['jobs'][0]['status'], 'skipped')
+        self.assertEqual(len(state['versions']), 3)
+        with registry.connect() as db:
+            self.assertEqual(db.execute('SELECT COUNT(*) FROM additions').fetchone()[0], 2)
+        failed_fit = registry.queue('gagal-fit.csv')
+        with patch('sklearn.linear_model.LogisticRegression.fit', side_effect=RuntimeError('simulated failure')):
+            registry.train_job(failed_fit, ['Materi pembelajaran bagus membantu mahasiswa mengerjakan latihan unik'])
+        self.assertEqual(registry.history()['jobs'][0]['status'], 'failed')
+        self.assertEqual(len(registry.history()['versions']), 3)
+        with registry.connect() as db:
+            self.assertEqual(db.execute('SELECT COUNT(*) FROM additions').fetchone()[0], 2)
+        registry.queue('terputus.csv')
+        registry.initialize()
+        self.assertEqual(registry.history()['jobs'][0]['status'], 'failed')
+
+    def test_request_validation(self):
+        for reviews in [['  '], ['x' * 10001]]:
+            with self.assertRaises(HTTPException):
+                training(TrainingRequest(file_name='invalid.csv', reviews=reviews, selected_column='ulasan', confirmed_review_column=True), BackgroundTasks())
+
+    def test_predict_route_uses_active_model(self):
+        from main import predict, TextRequest
+        with patch('main.save_single_prediction', return_value=123):
+            response = predict(TextRequest(text='Aplikasi bagus membantu belajar'))
+        self.assertEqual(response['data']['prediction_id'], 123)
+        self.assertEqual(response['data']['model_version'], registry.history()['active_version'])
+
+
+if __name__ == '__main__':
+    unittest.main()
diff --git a/api_slearn/training_input.py b/api_slearn/training_input.py
new file mode 100644
index 0000000..94c43d5
--- /dev/null
+++ b/api_slearn/training_input.py
@@ -0,0 +1,14 @@
+"""Column metadata checks; content must still be reviewed by the administrator."""
+import re
+
+IDENTITY = {'no', 'nomor', 'id', 'nama', 'name', 'nim', 'nis', 'nip', 'nik',
+            'prodi', 'jurusan', 'fakultas', 'gender', 'kelamin', 'email',
+            'telepon', 'phone', 'alamat', 'address', 'angkatan', 'semester',
+            'label', 'sentimen', 'sentiment'}
+
+def validate_column(column):
+    words = set(re.sub(r'[^a-z0-9]+', ' ', column.casefold()).split())
+    compact = ''.join(sorted(words))
+    if not words or words & IDENTITY or {'program', 'studi'} <= words or compact in {'jeniskelamin', 'programstudi'}:
+        raise ValueError('Pilih kolom berisi ulasan, bukan kolom identitas atau label.')
+    return column.strip()
diff --git a/web_slearn/.gitignore b/web_slearn/.gitignore
new file mode 100644
index 0000000..a547bf3
--- /dev/null
+++ b/web_slearn/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/web_slearn/README.md b/web_slearn/README.md
new file mode 100644
index 0000000..a36934d
--- /dev/null
+++ b/web_slearn/README.md
@@ -0,0 +1,16 @@
+# React + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
+
+## React Compiler
+
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.
diff --git a/web_slearn/backup-pembanding-20261028-175022-231/src/pages/PenelitianModel.jsx b/web_slearn/backup-pembanding-20261028-175022-231/src/pages/PenelitianModel.jsx
new file mode 100644
index 0000000..820b279
--- /dev/null
+++ b/web_slearn/backup-pembanding-20261028-175022-231/src/pages/PenelitianModel.jsx
@@ -0,0 +1,1821 @@
+import { useEffect, useMemo, useRef, useState } from "react";
+import Papa from "papaparse";
+import { ambilModelPenelitian } from "../services/api";
+import "../styles/penelitian-model.css";
+
+const tabs = [
+  "Dataset & Pembagian Data",
+  "Preprocessing",
+  "Pembobotan TF-IDF",
+  "Model & Evaluasi"
+];
+
+const ITEMS_PER_PAGE = 10;
+
+
+function PenelitianModel() {
+  const [activeTab, setActiveTab] = useState("Dataset & Pembagian Data");
+
+  return (
+    <div className="research-page">
+      <div className="research-heading">
+        <div>
+          <h1>Penelitian &amp; Model Awal</h1>
+
+          <p>
+            Dokumentasi dataset, preprocessing, TF-IDF, dan evaluasi model awal (v1).
+            Model aktif dan hasil training baru tersedia di menu Training &amp; Riwayat Model.{" "}
+            
+          </p>
+        </div>
+      </div>
+
+      <div className="research-tabs">
+        {tabs.map((tab) => (
+          <button
+            key={tab}
+            type="button"
+            className={activeTab === tab ? "active" : ""}
+            onClick={() => setActiveTab(tab)}
+          >
+            {tab}
+          </button>
+        ))}
+      </div>
+
+      {activeTab === "Dataset & Pembagian Data" && <DatasetTab />}
+      {activeTab === "Preprocessing" && <PreprocessingTab />}
+      {activeTab === "Pembobotan TF-IDF" && <TFIDFTab />}
+      {activeTab === "Model & Evaluasi" && <ModelTab />}
+    </div>
+  );
+}
+
+/* ============================================================
+   DATASET
+   ============================================================ */
+
+function DatasetTab() {
+  const [classDistribution, setClassDistribution] = useState({
+    total: 571,
+    negative: 379,
+    positive: 192
+  });
+
+  const [distributionLoading, setDistributionLoading] = useState(true);
+  const [distributionError, setDistributionError] = useState("");
+
+  useEffect(() => {
+    let aktif = true;
+
+    Papa.parse("/data/hasil_preprocessing_slearn.csv", {
+      download: true,
+      header: true,
+      skipEmptyLines: true,
+
+      transformHeader: (header) =>
+        String(header).replace(/^\uFEFF/, "").trim(),
+
+      complete: (results) => {
+        if (!aktif) return;
+
+        const rows = (results.data || []).filter(
+          (row) => String(row.komentar || "").trim() !== ""
+        );
+
+        const negative = rows.filter(
+          (row) => String(row.label ?? "").trim() === "0"
+        ).length;
+
+        const positive = rows.filter(
+          (row) => String(row.label ?? "").trim() === "1"
+        ).length;
+
+        setClassDistribution({
+          total: rows.length,
+          negative,
+          positive
+        });
+
+        setDistributionLoading(false);
+      },
+
+      error: (err) => {
+        if (!aktif) return;
+
+        setDistributionError(
+          err?.message || "Distribusi kelas tidak dapat dimuat."
+        );
+
+        setDistributionLoading(false);
+      }
+    });
+
+    return () => {
+      aktif = false;
+    };
+  }, []);
+
+  const negativePercentage =
+    classDistribution.total > 0
+      ? (classDistribution.negative / classDistribution.total) * 100
+      : 0;
+
+  const positivePercentage =
+    classDistribution.total > 0
+      ? (classDistribution.positive / classDistribution.total) * 100
+      : 0;
+
+  const formatPercentage = (value) =>
+    Number(value).toFixed(1).replace(".", ",");
+
+  return (
+    <div className="research-tab-content">
+      <section className="research-stat-grid three">
+        <StatCard
+          title="Dataset Penelitian"
+          value="571"
+          info="Ulasan S-Learn versi website"
+        />
+
+        <StatCard
+          title="Data Training"
+          value="456"
+          info="80% data penelitian"
+        />
+
+        <StatCard
+          title="Data Testing"
+          value="115"
+          info="20% data penelitian"
+        />
+      </section>
+
+      <section className="research-two-column dataset-overview-grid">
+        <article className="research-card dataset-distribution-card">
+          <div className="research-section-heading">
+            <h2>Distribusi Kelas Dataset</h2>
+            <p>Distribusi label pada 571 ulasan penelitian.</p>
+          </div>
+
+          {distributionLoading ? (
+            <div className="dataset-distribution-state">
+              Memuat distribusi kelas...
+            </div>
+          ) : (
+            <>
+              <div className="dataset-class-list">
+                <div className="dataset-class-item">
+                  <div className="dataset-class-heading">
+                    <div className="dataset-class-name">
+                      <span className="dataset-class-dot negative"></span>
+
+                      <div>
+                        <strong>Negatif</strong>
+                        <small>Label 0</small>
+                      </div>
+                    </div>
+
+                    <div className="dataset-class-value negative">
+                      <strong>{classDistribution.negative}</strong>
+                      <span>{formatPercentage(negativePercentage)}%</span>
+                    </div>
+                  </div>
+
+                  <div className="dataset-class-bar">
+                    <span
+                      className="dataset-class-fill negative"
+                      style={{ width: `${negativePercentage}%` }}
+                    ></span>
+                  </div>
+                </div>
+
+                <div className="dataset-class-item">
+                  <div className="dataset-class-heading">
+                    <div className="dataset-class-name">
+                      <span className="dataset-class-dot positive"></span>
+
+                      <div>
+                        <strong>Positif</strong>
+                        <small>Label 1</small>
+                      </div>
+                    </div>
+
+                    <div className="dataset-class-value positive">
+                      <strong>{classDistribution.positive}</strong>
+                      <span>{formatPercentage(positivePercentage)}%</span>
+                    </div>
+                  </div>
+
+                  <div className="dataset-class-bar">
+                    <span
+                      className="dataset-class-fill positive"
+                      style={{ width: `${positivePercentage}%` }}
+                    ></span>
+                  </div>
+                </div>
+              </div>
+
+              <div className="dataset-label-note">
+                <span>0 = Negatif</span>
+                <span>1 = Positif</span>
+              </div>
+
+              {distributionError && (
+                <p className="dataset-distribution-warning">
+                  {distributionError}
+                </p>
+              )}
+            </>
+          )}
+        </article>
+
+        <article className="research-card">
+          <div className="research-section-heading">
+            <h2>Pembagian Training dan Testing</h2>
+
+            <p>
+              Dataset dibagi menjadi 80% data training dan 20% data testing.
+            </p>
+          </div>
+
+          <div className="split-visual">
+            <div className="split-bar">
+              <span className="training-bar">80%</span>
+              <span className="testing-bar">20%</span>
+            </div>
+
+            <p className="split-explanation">
+              Data training digunakan untuk membentuk fitur TF-IDF dan melatih
+              model, sedangkan data testing digunakan untuk evaluasi model.
+            </p>
+          </div>
+        </article>
+      </section>
+
+      <section className="research-card">
+        <div className="research-section-heading">
+          <h2>Alur Pengolahan Data Penelitian</h2>
+        </div>
+
+        <div className="research-flow">
+          <FlowBox title="571 Ulasan" subtitle="Dataset penelitian" />
+          <FlowArrow />
+
+          <FlowBox title="Pelabelan" subtitle="Positif / Negatif" />
+          <FlowArrow />
+
+          <FlowBox title="Preprocessing" subtitle="6 tahapan teks" />
+          <FlowArrow />
+
+          <FlowBox
+            title="Split 80:20"
+            subtitle="456 training · 115 testing"
+          />
+
+          <FlowArrow />
+
+          <FlowBox title="TF-IDF" subtitle="Fit training · 675 fitur" />
+          <FlowArrow />
+
+          <FlowBox
+            title="Logistic Regression"
+            subtitle="Klasifikasi biner"
+          />
+
+          <FlowArrow />
+
+          <FlowBox title="Evaluasi" subtitle="115 data testing" />
+        </div>
+      </section>
+    </div>
+  );
+}
+
+/* ============================================================
+   PREPROCESSING
+   ============================================================ */
+
+function formatTokenizedText(value) {
+  const text = String(value || "").trim();
+
+  if (!text) return "-";
+
+  try {
+    const parsed = JSON.parse(text.replace(/'/g, '"'));
+
+    if (Array.isArray(parsed)) {
+      return parsed.join(" | ");
+    }
+  } catch {
+    // Format fallback.
+  }
+
+  return text
+    .replace(/^\[/, "")
+    .replace(/\]$/, "")
+    .split(",")
+    .map((token) =>
+      token
+        .trim()
+        .replace(/^["']|["']$/g, "")
+    )
+    .filter(Boolean)
+    .join(" | ");
+}
+
+function PreprocessingTab() {
+  const [data, setData] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState("");
+  const [search, setSearch] = useState("");
+  const [filterLabel, setFilterLabel] = useState("Semua");
+  const [currentPage, setCurrentPage] = useState(1);
+  const [detail, setDetail] = useState(null);
+
+  const preprocessingResultRef = useRef(null);
+
+  useEffect(() => {
+    let aktif = true;
+
+    Papa.parse("/data/hasil_preprocessing_slearn.csv", {
+      download: true,
+      header: true,
+      skipEmptyLines: true,
+
+      transformHeader: (header) =>
+        String(header).replace(/^\uFEFF/, "").trim(),
+
+      complete: (results) => {
+        if (!aktif) return;
+
+        const rows = (results.data || [])
+          .filter(
+            (row) => String(row.komentar || "").trim() !== ""
+          )
+          .map((row, index) => ({
+            id: index + 1,
+            komentar: String(row.komentar || ""),
+            label: String(row.label ?? "").trim(),
+            clean_text: String(row.clean_text || ""),
+            case_folded_text: String(row.case_folded_text || ""),
+            normalized_text: String(row.normalized_text || ""),
+            tokenized_text: String(row.tokenized_text || ""),
+            stopword_text: String(row.stopword_text || ""),
+            stemmed_text: String(row.stemmed_text || "")
+          }));
+
+        setData(rows);
+        setLoading(false);
+      },
+
+      error: (err) => {
+        if (!aktif) return;
+
+        setError(
+          err?.message || "Hasil preprocessing tidak dapat dibaca."
+        );
+
+        setLoading(false);
+      }
+    });
+
+    return () => {
+      aktif = false;
+    };
+  }, []);
+
+  useEffect(() => {
+    setCurrentPage(1);
+  }, [search, filterLabel]);
+
+  useEscapeModal(detail, () => setDetail(null));
+
+  const filteredData = useMemo(() => {
+    const keyword = search.trim().toLowerCase();
+
+    return data.filter((item) => {
+      const cocokSearch =
+        !keyword ||
+        item.komentar.toLowerCase().includes(keyword) ||
+        item.clean_text.toLowerCase().includes(keyword) ||
+        item.case_folded_text.toLowerCase().includes(keyword) ||
+        item.normalized_text.toLowerCase().includes(keyword) ||
+        item.tokenized_text.toLowerCase().includes(keyword) ||
+        item.stopword_text.toLowerCase().includes(keyword) ||
+        item.stemmed_text.toLowerCase().includes(keyword) ||
+        String(item.id).includes(keyword);
+
+      const cocokLabel =
+        filterLabel === "Semua" ||
+        (filterLabel === "Positif" && item.label === "1") ||
+        (filterLabel === "Negatif" && item.label === "0");
+
+      return cocokSearch && cocokLabel;
+    });
+  }, [data, search, filterLabel]);
+
+  const totalPages = Math.max(
+    1,
+    Math.ceil(filteredData.length / ITEMS_PER_PAGE)
+  );
+
+  const safePage = Math.min(currentPage, totalPages);
+  const startIndex = (safePage - 1) * ITEMS_PER_PAGE;
+
+  const paginatedData = filteredData.slice(
+    startIndex,
+    startIndex + ITEMS_PER_PAGE
+  );
+
+  const scrollKeAtasPreprocessing = () => {
+    window.requestAnimationFrame(() => {
+      if (!preprocessingResultRef.current) return;
+
+      const posisi =
+        preprocessingResultRef.current.getBoundingClientRect().top +
+        window.scrollY -
+        18;
+
+      window.scrollTo({
+        top: posisi,
+        behavior: "smooth"
+      });
+    });
+  };
+
+  const halamanSebelumnyaPreprocessing = () => {
+    setCurrentPage((page) => Math.max(1, page - 1));
+    scrollKeAtasPreprocessing();
+  };
+
+  const halamanBerikutnyaPreprocessing = () => {
+    setCurrentPage((page) => Math.min(totalPages, page + 1));
+    scrollKeAtasPreprocessing();
+  };
+
+  const kataPenting = [
+    "tidak",
+    "kurang",
+    "belum",
+    "bukan",
+    "bukannya",
+    "jangan",
+    "tanpa",
+    "tidaklah",
+    "malah",
+    "bisa",
+    "sangat",
+    "sering",
+    "sudah",
+    "masih",
+    "terlalu",
+    "baik",
+    "lebih",
+    "lama",
+    "jelas",
+    "masalah",
+    "selalu",
+    "siap",
+    "dapat",
+    "guna",
+    "benar",
+    "cukup",
+    "sekali",
+    "padahal",
+    "perlu",
+    "banyak",
+    "dan",
+    "terlihat",
+    "waktu",
+    "tambah",
+    "sebelum",
+    "sebelumnya",
+    "dekat",
+    "tiap",
+    "ada",
+    "kecil",
+    "dulu"
+  ];
+
+  return (
+    <div className="research-tab-content">
+      <section className="research-two-column preprocessing-method-grid">
+        <article className="research-card research-method-card">
+          <div className="research-section-heading">
+            <h2>Contoh Kamus Normalisasi</h2>
+
+            <p>
+              Contoh perubahan kata yang digunakan pada proses normalisasi
+              data penelitian.
+            </p>
+          </div>
+
+          <div className="normalization-list">
+            <NormalizationRow from="absen" to="presensi" />
+            <NormalizationRow from="deadline" to="tenggat" />
+            <NormalizationRow from="tapi" to="tetapi" />
+          </div>
+        </article>
+
+        <article className="research-card research-method-card stopword-method-card">
+          <div className="research-section-heading">
+            <h2>Kata Penting yang Dipertahankan</h2>
+
+            <p>
+              Stopword final dibentuk dari stopword Bahasa Indonesia NLTK dan
+              partikel tambahan. Kata-kata berikut dikeluarkan dari daftar
+              stopword sehingga tetap dipertahankan selama preprocessing.
+            </p>
+          </div>
+
+          <div className="important-word-tags">
+            {kataPenting.map((kata) => (
+              <span key={kata}>{kata}</span>
+            ))}
+          </div>
+        </article>
+      </section>
+
+      <section
+        ref={preprocessingResultRef}
+        className="research-card preprocessing-data-card"
+      >
+        <div className="research-section-heading">
+          <h2>Preprocessing 571 Ulasan</h2>
+
+          <p>
+            Hasil preprocessing ditampilkan sesuai enam tahapan penelitian:
+            Cleaning, Case Folding, Normalisasi, Tokenizing, Stopword Removal,
+            dan Stemming.
+          </p>
+        </div>
+
+        <div className="preprocessing-toolbar">
+          <input
+            type="search"
+            placeholder="Cari nomor data, ulasan, atau hasil preprocessing..."
+            value={search}
+            onChange={(event) => setSearch(event.target.value)}
+          />
+
+          <select
+            value={filterLabel}
+            onChange={(event) => setFilterLabel(event.target.value)}
+          >
+            <option value="Semua">Semua Label</option>
+            <option value="Positif">Positif</option>
+            <option value="Negatif">Negatif</option>
+          </select>
+        </div>
+
+        {loading && (
+          <div className="preprocessing-state">
+            Memuat hasil preprocessing penelitian...
+          </div>
+        )}
+
+        {!loading && error && (
+          <div className="preprocessing-state error">
+            {error}
+          </div>
+        )}
+
+        {!loading && !error && (
+          <>
+            <div className="research-preprocessing-data-list">
+              {paginatedData.map((item) => (
+                <article
+                  className="research-preprocessing-data-card"
+                  key={item.id}
+                >
+                  <div className="research-preprocessing-data-content">
+                    <div className="research-preprocessing-data-header">
+                      <strong>Data ke-{item.id}</strong>
+                      <SentimentBadge label={item.label} />
+                    </div>
+
+                    <p>{item.komentar}</p>
+
+                    <div className="research-preprocessing-card-footer">
+                      <div>
+                        <span>Hasil Akhir Stemming</span>
+                        <code>{item.stemmed_text}</code>
+                      </div>
+
+                      <button
+                        type="button"
+                        onClick={() => setDetail(item)}
+                      >
+                        Lihat Tahapan
+                      </button>
+                    </div>
+                  </div>
+                </article>
+              ))}
+
+              {paginatedData.length === 0 && (
+                <div className="preprocessing-state">
+                  Tidak ada data yang sesuai.
+                </div>
+              )}
+            </div>
+
+            <ResearchPagination
+              total={filteredData.length}
+              startIndex={startIndex}
+              currentPage={safePage}
+              totalPages={totalPages}
+              onPrev={halamanSebelumnyaPreprocessing}
+              onNext={halamanBerikutnyaPreprocessing}
+            />
+          </>
+        )}
+      </section>
+
+      {detail && (
+        <div
+          className="research-modal-overlay"
+          onMouseDown={(event) =>
+            event.target === event.currentTarget &&
+            setDetail(null)
+          }
+        >
+          <div className="research-modal">
+            <div className="research-modal-scroll">
+              <div className="research-modal-header">
+                <div>
+                  <h2>Data ke-{detail.id}</h2>
+                </div>
+
+                <button
+                  type="button"
+                  className="research-modal-close"
+                  aria-label="Tutup detail preprocessing"
+                  onClick={() => setDetail(null)}
+                >
+                  ×
+                </button>
+              </div>
+
+              <div className="research-modal-original">
+                <div className="research-modal-original-heading">
+                  <span>Ulasan Asli</span>
+                  <SentimentBadge label={detail.label} />
+                </div>
+
+                <p>{detail.komentar}</p>
+              </div>
+
+              <div className="research-modal-steps">
+                <ResearchProcessStep
+                  number="1"
+                  title="Cleaning"
+                  value={detail.clean_text}
+                />
+
+                <ResearchProcessStep
+                  number="2"
+                  title="Case Folding"
+                  value={detail.case_folded_text}
+                />
+
+                <ResearchProcessStep
+                  number="3"
+                  title="Normalisasi"
+                  value={detail.normalized_text}
+                />
+
+                <ResearchProcessStep
+                  number="4"
+                  title="Tokenizing"
+                  value={formatTokenizedText(detail.tokenized_text)}
+                />
+
+                <ResearchProcessStep
+                  number="5"
+                  title="Stopword Removal"
+                  value={detail.stopword_text}
+                />
+
+                <ResearchProcessStep
+                  number="6"
+                  title="Stemming"
+                  value={detail.stemmed_text}
+                />
+              </div>
+
+              <div className="research-modal-result">
+                <span>Sentimen Penelitian</span>
+
+                <strong>
+                  {detail.label === "1" ? "Positif" : "Negatif"}
+                </strong>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+/* ============================================================
+   TF-IDF
+   ============================================================ */
+
+function TFIDFTab() {
+  const [summary, setSummary] = useState(null);
+  const [data, setData] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState("");
+  const [search, setSearch] = useState("");
+  const [filterJenis, setFilterJenis] = useState("Semua");
+  const [filterLabel, setFilterLabel] = useState("Semua");
+  const [currentPage, setCurrentPage] = useState(1);
+  const [detail, setDetail] = useState(null);
+
+  const tfidfResultRef = useRef(null);
+
+  useEffect(() => {
+    const controller = new AbortController();
+
+    async function loadTFIDF() {
+      try {
+        setLoading(true);
+        setError("");
+
+        const response = await fetch("/data/tfidf_research.json", {
+          signal: controller.signal
+        });
+
+        if (!response.ok) {
+          throw new Error(
+            "Data pembobotan TF-IDF tidak dapat dibaca."
+          );
+        }
+
+        const json = await response.json();
+
+        if (!json || !Array.isArray(json.data)) {
+          throw new Error("Format data TF-IDF tidak sesuai.");
+        }
+
+        setSummary(json.summary || null);
+        setData(json.data);
+      } catch (err) {
+        if (err.name !== "AbortError") {
+          setError(
+            err.message || "Data TF-IDF tidak dapat dimuat."
+          );
+        }
+      } finally {
+        if (!controller.signal.aborted) {
+          setLoading(false);
+        }
+      }
+    }
+
+    loadTFIDF();
+
+    return () => controller.abort();
+  }, []);
+
+  useEffect(() => {
+    setCurrentPage(1);
+  }, [search, filterJenis, filterLabel]);
+
+  useEscapeModal(detail, () => setDetail(null));
+
+  const filteredData = useMemo(() => {
+    const keyword = search.trim().toLowerCase();
+
+    return data.filter((item) => {
+      const bobotKata = (item.bobot_tfidf || [])
+        .map((x) => x.kata)
+        .join(" ")
+        .toLowerCase();
+
+      const cocokSearch =
+        !keyword ||
+        String(item.no_data).includes(keyword) ||
+        String(item.ulasan_asli || "")
+          .toLowerCase()
+          .includes(keyword) ||
+        String(item.stemmed_text || "")
+          .toLowerCase()
+          .includes(keyword) ||
+        bobotKata.includes(keyword);
+
+      const cocokJenis =
+        filterJenis === "Semua" ||
+        item.jenis_data === filterJenis;
+
+      const cocokLabel =
+        filterLabel === "Semua" ||
+        (filterLabel === "Positif" &&
+          Number(item.label) === 1) ||
+        (filterLabel === "Negatif" &&
+          Number(item.label) === 0);
+
+      return cocokSearch && cocokJenis && cocokLabel;
+    });
+  }, [data, search, filterJenis, filterLabel]);
+
+  const totalPages = Math.max(
+    1,
+    Math.ceil(filteredData.length / ITEMS_PER_PAGE)
+  );
+
+  const safePage = Math.min(currentPage, totalPages);
+  const startIndex = (safePage - 1) * ITEMS_PER_PAGE;
+
+  const paginatedData = filteredData.slice(
+    startIndex,
+    startIndex + ITEMS_PER_PAGE
+  );
+
+  const scrollKeAtasHasilTFIDF = () => {
+    window.requestAnimationFrame(() => {
+      if (!tfidfResultRef.current) return;
+
+      const posisi =
+        tfidfResultRef.current.getBoundingClientRect().top +
+        window.scrollY -
+        18;
+
+      window.scrollTo({
+        top: posisi,
+        behavior: "smooth"
+      });
+    });
+  };
+
+  const halamanSebelumnyaTFIDF = () => {
+    setCurrentPage((page) => Math.max(1, page - 1));
+    scrollKeAtasHasilTFIDF();
+  };
+
+  const halamanBerikutnyaTFIDF = () => {
+    setCurrentPage((page) => Math.min(totalPages, page + 1));
+    scrollKeAtasHasilTFIDF();
+  };
+
+  return (
+    <div className="research-tab-content">
+      <section className="research-stat-grid three">
+        <StatCard
+          title="Jumlah Fitur"
+          value={summary?.jumlah_fitur ?? 675}
+          info="Vocabulary dari data training"
+        />
+
+        <StatCard
+          title="Matriks Training"
+          value={
+            summary?.ukuran_matriks_training
+              ? `${summary.ukuran_matriks_training[0]} × ${summary.ukuran_matriks_training[1]}`
+              : "456 × 675"
+          }
+          info="456 data × 675 fitur"
+        />
+
+        <StatCard
+          title="Matriks Testing"
+          value={
+            summary?.ukuran_matriks_testing
+              ? `${summary.ukuran_matriks_testing[0]} × ${summary.ukuran_matriks_testing[1]}`
+              : "115 × 675"
+          }
+          info="115 data × 675 fitur"
+        />
+      </section>
+
+      <section
+        ref={tfidfResultRef}
+        className="research-card"
+      >
+        <div className="research-section-heading">
+          <h2>Hasil Pembobotan TF-IDF 571 Ulasan</h2>
+
+          <p>
+            Bobot TF-IDF dihitung menggunakan fitur yang dibentuk dari
+            data training. Data testing ditransformasikan menggunakan
+            vectorizer yang sama tanpa melakukan fit ulang.
+          </p>
+        </div>
+
+        <div className="tfidf-research-toolbar">
+          <input
+            type="search"
+            placeholder="Cari nomor data, hasil stemming, atau kata..."
+            value={search}
+            onChange={(event) => setSearch(event.target.value)}
+          />
+
+          <select
+            value={filterJenis}
+            onChange={(event) => setFilterJenis(event.target.value)}
+          >
+            <option value="Semua">Semua Jenis</option>
+            <option value="Training">Training</option>
+            <option value="Testing">Testing</option>
+          </select>
+
+          <select
+            value={filterLabel}
+            onChange={(event) => setFilterLabel(event.target.value)}
+          >
+            <option value="Semua">Semua Label</option>
+            <option value="Positif">Positif</option>
+            <option value="Negatif">Negatif</option>
+          </select>
+        </div>
+
+        {loading && (
+          <div className="preprocessing-state">
+            Memuat hasil pembobotan TF-IDF penelitian...
+          </div>
+        )}
+
+        {!loading && error && (
+          <div className="preprocessing-state error">
+            {error}
+          </div>
+        )}
+
+        {!loading && !error && (
+          <>
+            <div className="tfidf-research-list">
+              {paginatedData.map((item) => (
+                <TFIDFResearchCard
+                  key={item.no_data}
+                  item={item}
+                  onDetail={() => setDetail(item)}
+                />
+              ))}
+
+              {paginatedData.length === 0 && (
+                <div className="preprocessing-state">
+                  Tidak ada data TF-IDF yang sesuai dengan pencarian atau
+                  filter.
+                </div>
+              )}
+            </div>
+
+            <ResearchPagination
+              total={filteredData.length}
+              startIndex={startIndex}
+              currentPage={safePage}
+              totalPages={totalPages}
+              onPrev={halamanSebelumnyaTFIDF}
+              onNext={halamanBerikutnyaTFIDF}
+            />
+          </>
+        )}
+      </section>
+
+      <section className="research-card tfidf-simple-method">
+        <div className="research-section-heading">
+          <h2>Cara Pembentukan Fitur TF-IDF</h2>
+
+          <p>
+            TF-IDF dibentuk menggunakan 456 data training dan menghasilkan
+            675 fitur. Bobot akhir merupakan hasil TF × IDF, sedangkan data
+            testing ditransformasikan menggunakan vectorizer dari data training.
+          </p>
+        </div>
+
+        <div className="tfidf-simple-flow">
+          <div className="tfidf-simple-box">
+            <span>Data Training</span>
+            <strong>456 Ulasan</strong>
+          </div>
+
+          <div className="tfidf-simple-arrow">→</div>
+
+          <div className="tfidf-simple-box highlight">
+            <span>Pembobotan</span>
+            <strong>TF × IDF</strong>
+          </div>
+
+          <div className="tfidf-simple-arrow">→</div>
+
+          <div className="tfidf-simple-box">
+            <span>Hasil</span>
+            <strong>675 Fitur</strong>
+          </div>
+        </div>
+      </section>
+
+      {detail && (
+        <TFIDFDetailModal
+          item={detail}
+          onClose={() => setDetail(null)}
+        />
+      )}
+    </div>
+  );
+}
+
+function TFIDFResearchCard({ item, onDetail }) {
+  const topWeights = (item.bobot_tfidf || []).slice(0, 5);
+
+  const maxWeight =
+    topWeights.reduce(
+      (maksimum, weight) =>
+        Math.max(
+          maksimum,
+          Number(weight.bobot) || 0
+        ),
+      0
+    ) || 1;
+
+  return (
+    <article className="tfidf-data-card">
+      <div className="tfidf-data-header">
+        <strong className="tfidf-data-title">
+          Data ke-{item.no_data}
+        </strong>
+
+        <div className="tfidf-data-badges">
+          <span
+            className={`research-type-badge ${
+              item.jenis_data === "Training"
+                ? "training"
+                : "testing"
+            }`}
+          >
+            {item.jenis_data}
+          </span>
+
+          <SentimentBadge label={item.label} />
+        </div>
+      </div>
+
+      <div className="tfidf-stemming-preview">
+        <span>Hasil Stemming</span>
+        <code>{item.stemmed_text}</code>
+      </div>
+
+      <div className="tfidf-weight-preview">
+        <div className="tfidf-weight-preview-title">
+          <span>Bobot TF-IDF Tertinggi</span>
+
+          <small>
+            {item.jumlah_fitur_nonzero} fitur bernilai &gt; 0
+          </small>
+        </div>
+
+        {topWeights.length > 0 ? (
+          topWeights.map((weight) => {
+            const nilaiBobot = Number(weight.bobot) || 0;
+
+            const width = Math.min(
+              100,
+              Math.max(
+                0,
+                (nilaiBobot / maxWeight) * 100
+              )
+            );
+
+            return (
+              <div
+                className="tfidf-weight-row"
+                key={weight.kata}
+              >
+                <code>{weight.kata}</code>
+
+                <div className="tfidf-weight-bar">
+                  <span
+                    style={{
+                      width: `${width}%`
+                    }}
+                  ></span>
+                </div>
+
+                <strong>
+                  {formatDecimal(weight.bobot)}
+                </strong>
+              </div>
+            );
+          })
+        ) : (
+          <div className="tfidf-no-weight">
+            Tidak ada fitur yang dikenali vectorizer.
+          </div>
+        )}
+      </div>
+
+      <div className="tfidf-card-footer">
+        <button
+          type="button"
+          onClick={onDetail}
+        >
+          Lihat Detail Bobot
+        </button>
+      </div>
+    </article>
+  );
+}
+
+function TFIDFDetailModal({ item, onClose }) {
+  return (
+    <div
+      className="research-modal-overlay"
+      onMouseDown={(event) =>
+        event.target === event.currentTarget &&
+        onClose()
+      }
+    >
+      <div className="research-modal tfidf-detail-modal">
+        <div className="research-modal-scroll">
+          <div className="research-modal-header">
+            <div>
+              <h2>Data ke-{item.no_data}</h2>
+            </div>
+
+            <button
+              type="button"
+              className="research-modal-close"
+              aria-label="Tutup detail TF-IDF"
+              onClick={onClose}
+            >
+              ×
+            </button>
+          </div>
+
+          <div className="research-modal-original">
+            <div className="research-modal-original-heading">
+              <span>Ulasan Asli</span>
+            </div>
+
+            <p>{item.ulasan_asli}</p>
+          </div>
+
+          <div className="tfidf-modal-summary">
+            <div>
+              <span>Jenis Data</span>
+              <strong>{item.jenis_data}</strong>
+            </div>
+
+            <div>
+              <span>Posisi pada Split</span>
+              <strong>
+                {item.jenis_data} ke-{item.urutan_split}
+              </strong>
+            </div>
+
+            <div>
+              <span>Fitur Bobot &gt; 0</span>
+              <strong>{item.jumlah_fitur_nonzero}</strong>
+            </div>
+
+            <div>
+              <span>Sentimen</span>
+
+              <strong>
+                {Number(item.label) === 1
+                  ? "Positif"
+                  : "Negatif"}
+              </strong>
+            </div>
+          </div>
+
+          <div className="tfidf-modal-stemming">
+            <span>Hasil Stemming</span>
+            <code>{item.stemmed_text}</code>
+          </div>
+
+          <div className="tfidf-table-heading">
+            <h3>
+              Seluruh Fitur dengan Bobot TF-IDF &gt; 0
+            </h3>
+          </div>
+
+          <div className="tfidf-table-wrapper">
+            <table className="tfidf-detail-table">
+              <thead>
+                <tr>
+                  <th>No.</th>
+                  <th>Kata</th>
+                  <th>TF</th>
+                  <th>DF</th>
+                  <th>IDF</th>
+                  <th>Bobot TF-IDF</th>
+                </tr>
+              </thead>
+
+              <tbody>
+                {(item.bobot_tfidf || []).map(
+                  (row, index) => (
+                    <tr key={`${row.kata}-${index}`}>
+                      <td>{index + 1}</td>
+
+                      <td>
+                        <code>{row.kata}</code>
+                      </td>
+
+                      <td>{row.tf}</td>
+                      <td>{row.df}</td>
+
+                      <td>
+                        {formatDecimal(row.idf)}
+                      </td>
+
+                      <td className="tfidf-bobot-cell">
+                        {formatDecimal(row.bobot)}
+                      </td>
+                    </tr>
+                  )
+                )}
+
+                {(item.bobot_tfidf || []).length === 0 && (
+                  <tr>
+                    <td
+                      colSpan="6"
+                      className="tfidf-empty-table"
+                    >
+                      Tidak ada fitur dengan bobot TF-IDF &gt; 0.
+                    </td>
+                  </tr>
+                )}
+              </tbody>
+            </table>
+          </div>
+
+          <div className="research-note tfidf-modal-note">
+            <span>i</span>
+
+            <div>
+              <strong>Cara Membaca Bobot</strong>
+
+              <p>
+                TF menunjukkan frekuensi term pada satu dokumen, DF menunjukkan
+                jumlah dokumen training yang mengandung term, sedangkan IDF
+                menunjukkan bobot berdasarkan kemunculan term pada dokumen
+                training. Bobot TF-IDF pada tabel merupakan hasil TF × IDF.
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/* ============================================================
+   MODEL & EVALUASI
+   ============================================================ */
+
+function ModelTab() {
+  const [modelInfo, setModelInfo] = useState(null);
+  const [error, setError] = useState("");
+
+  useEffect(() => {
+    let active = true;
+    async function loadModel() {
+      try {
+        const response = await ambilModelPenelitian();
+        const data = response.data;
+        const report = data?.classification_report;
+        const cm = data?.confusion_matrix;
+        const validRate = value => typeof value === "number" && Number.isFinite(value) && value >= 0 && value <= 1;
+        if (!data || !validRate(data.akurasi) ||
+            !Number.isInteger(data.jumlah_data_testing) || data.jumlah_data_testing <= 0 ||
+            !Array.isArray(cm) || cm.length !== 2 ||
+            !cm.every(row => Array.isArray(row) && row.length === 2 && row.every(value => Number.isInteger(value) && value >= 0)) ||
+            cm.flat().reduce((sum, value) => sum + value, 0) !== data.jumlah_data_testing ||
+            !["0", "1", "weighted avg"].every(key =>
+              report?.[key] && ["precision", "recall", "f1-score"].every(metric => validRate(report[key][metric])) &&
+              Number.isFinite(report[key].support))) {
+          throw new Error("Metadata evaluasi dari backend tidak lengkap atau tidak valid.");
+        }
+        if (active) setModelInfo(data);
+      } catch (err) {
+        if (active) setError(err.message || "Gagal memuat evaluasi model.");
+      }
+    }
+    loadModel();
+    return () => { active = false; };
+  }, []);
+
+  if (error) return (
+    <div className="research-tab-content">
+      <section className="research-card" role="alert">
+        <h2>Evaluasi model 80:20 belum dapat ditampilkan</h2>
+        <p>{error}</p>
+        <p>Pastikan backend berjalan. Buka tab lain lalu kembali ke Model &amp; Evaluasi untuk mencoba lagi.</p>
+      </section>
+      <PerbandinganRasio />
+    </div>
+  );
+  if (!modelInfo) return <section className="research-card" role="status">Memuat evaluasi model dari backend...</section>;
+
+  const report = modelInfo.classification_report;
+  const weighted = report["weighted avg"];
+  const [[tn, fp], [fn, tp]] = modelInfo.confusion_matrix;
+  const percent = (value, digits = 2) => (value * 100).toLocaleString("id-ID", {
+    minimumFractionDigits: digits, maximumFractionDigits: digits
+  }) + "%";
+  const evaluationMetrics = [
+    { name: "Accuracy", value: percent(modelInfo.akurasi), description: "Ketepatan prediksi pada " + modelInfo.jumlah_data_testing + " data testing" },
+    { name: "Precision", value: percent(weighted.precision), description: "Weighted average seluruh kelas" },
+    { name: "Recall", value: percent(weighted.recall), description: "Weighted average seluruh kelas" },
+    { name: "F1-Score", value: percent(weighted["f1-score"]), description: "Weighted average seluruh kelas" }
+  ];
+  return (
+    <div className="research-tab-content">
+      <section className="research-card">
+        <div className="research-section-heading">
+          <h2>Evaluasi Model Awal — v1</h2>
+
+          <p>
+            Evaluasi dilakukan terhadap {modelInfo.jumlah_data_testing} data testing. Nilai Precision,
+            Recall, dan F1-Score berikut menggunakan weighted average.
+          </p>
+        </div>
+
+        <div className="metric-grid">
+          {evaluationMetrics.map((metric) => (
+            <MetricCard
+              key={metric.name}
+              name={metric.name}
+              value={metric.value}
+              description={metric.description}
+            />
+          ))}
+        </div>
+      </section>
+
+      <section className="research-two-column model-evaluation-grid">
+        <article className="research-card">
+          <div className="research-section-heading">
+            <h2>Confusion Matrix</h2>
+
+            <p>
+              Perbandingan antara label aktual dengan hasil prediksi model
+              pada data testing.
+            </p>
+          </div>
+
+          <div className="confusion-placeholder">
+            <div className="confusion-axis-label">
+              Prediksi Model
+            </div>
+
+            <div className="confusion-grid">
+              <div className="confusion-empty"></div>
+
+              <div className="confusion-head">
+                Negatif
+              </div>
+
+              <div className="confusion-head">
+                Positif
+              </div>
+
+              <div className="confusion-head vertical">
+                Negatif Aktual
+              </div>
+
+              <ConfusionValue
+                value={tn}
+                label="TN"
+                tone="correct"
+              />
+
+              <ConfusionValue
+                value={fp}
+                label="FP"
+                tone="error"
+              />
+
+              <div className="confusion-head vertical">
+                Positif Aktual
+              </div>
+
+              <ConfusionValue
+                value={fn}
+                label="FN"
+                tone="error"
+              />
+
+              <ConfusionValue
+                value={tp}
+                label="TP"
+                tone="correct"
+              />
+            </div>
+
+            <div className="confusion-legend">
+              <span>
+                <i className="correct"></i>
+                Prediksi benar
+              </span>
+
+              <span>
+                <i className="error"></i>
+                Prediksi salah
+              </span>
+            </div>
+          </div>
+        </article>
+
+        <article className="research-card class-evaluation-card">
+          <div className="research-section-heading">
+            <h2>Evaluasi per Kelas</h2>
+
+            <p>
+              Precision, Recall, dan F1-Score masing-masing kelas pada
+              {modelInfo.jumlah_data_testing} data testing.
+            </p>
+          </div>
+
+          <div className="class-metric-table-wrapper">
+            <table className="class-metric-table">
+              <thead>
+                <tr>
+                  <th>Kelas</th>
+                  <th>Precision</th>
+                  <th>Recall</th>
+                  <th>F1-Score</th>
+                  <th>Jumlah</th>
+                </tr>
+              </thead>
+
+              <tbody>
+                <tr>
+                  <td>
+                    <span className="class-table-badge negative">
+                      Negatif
+                    </span>
+                  </td>
+
+                  <td>{percent(report["0"].precision, 1)}</td>
+                  <td>{percent(report["0"].recall, 1)}</td>
+                  <td>{percent(report["0"]["f1-score"], 1)}</td>
+                  <td>{report["0"].support}</td>
+                </tr>
+
+                <tr>
+                  <td>
+                    <span className="class-table-badge positive">
+                      Positif
+                    </span>
+                  </td>
+
+                  <td>{percent(report["1"].precision, 1)}</td>
+                  <td>{percent(report["1"].recall, 1)}</td>
+                  <td>{percent(report["1"]["f1-score"], 1)}</td>
+                  <td>{report["1"].support}</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+
+          <div className="class-evaluation-note">
+            <span>i</span>
+
+            <p>
+              Recall kelas positif sebesar {percent(report["1"].recall, 1)} menunjukkan bahwa {tp} dari{" "}
+              {report["1"].support} ulasan positif pada data testing berhasil diprediksi sebagai
+              positif, sedangkan {fn} lainnya diprediksi sebagai negatif.
+            </p>
+          </div>
+        </article>
+      </section>
+      <PerbandinganRasio />
+    </div>
+  );
+}
+
+/* ============================================================
+   PERBANDINGAN TIGA RASIO PENELITIAN
+   Sumber: public/data/perbandingan_rasio_slearn.json
+   ============================================================ */
+
+function PerbandinganRasio() {
+  const [skenario, setSkenario] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState("");
+
+  useEffect(() => {
+    const controller = new AbortController();
+    async function loadPerbandingan() {
+      try {
+        const response = await fetch("/data/perbandingan_rasio_slearn.json", { signal: controller.signal });
+        if (!response.ok) throw new Error("File perbandingan_rasio_slearn.json tidak ditemukan.");
+        const json = await response.json();
+        const daftar = json?.skenario;
+        const rasioWajib = ["70:30", "80:20", "90:10"];
+        const valid = Array.isArray(daftar) && daftar.length === 3 &&
+          rasioWajib.every(rasio => daftar.some(item => item.rasio === rasio)) &&
+          daftar.every(item =>
+            Number.isInteger(item.data_latih) && Number.isInteger(item.data_uji) &&
+            Number.isInteger(item.jumlah_fitur) && item.data_latih + item.data_uji === 571 &&
+            item.jumlah_fitur > 0 &&
+            ["accuracy", "precision", "recall", "f1_score"].every(k =>
+              typeof item[k] === "number" && Number.isFinite(item[k]) && item[k] >= 0 && item[k] <= 100) &&
+            Array.isArray(item.confusion_matrix) && item.confusion_matrix.length === 2 &&
+            item.confusion_matrix.every(row => Array.isArray(row) && row.length === 2 &&
+              row.every(n => Number.isInteger(n) && n >= 0)) &&
+            item.confusion_matrix.flat().reduce((total, n) => total + n, 0) === item.data_uji
+          );
+        if (!valid) throw new Error("Struktur atau nilai data perbandingan tiga rasio tidak sesuai.");
+        if (!controller.signal.aborted) {
+          setSkenario(rasioWajib.map(rasio => daftar.find(item => item.rasio === rasio)));
+          setError("");
+        }
+      } catch (err) {
+        if (err.name !== "AbortError") setError(err.message || "Gagal membaca perbandingan rasio.");
+      } finally {
+        if (!controller.signal.aborted) setLoading(false);
+      }
+    }
+    loadPerbandingan();
+    return () => controller.abort();
+  }, []);
+
+  const persen = angka => Number(angka).toLocaleString("id-ID", {
+    minimumFractionDigits: 2, maximumFractionDigits: 2
+  }) + "%";
+
+  return (
+    <section className="research-card">
+      <div className="research-section-heading">
+        <h2>Perbandingan Tiga Rasio Data Training dan Testing</h2>
+        <p>Hasil eksperimen 70:30, 80:20, dan 90:10 menggunakan Logistic Regression dan TF-IDF.</p>
+      </div>
+
+      {loading && <p role="status">Memuat hasil perbandingan rasio...</p>}
+      {!loading && error && <p role="alert" style={{ color: "#b42318" }}>{error}</p>}
+
+      {!loading && !error && (
+        <>
+          <div className="class-metric-table-wrapper">
+            <table className="class-metric-table" style={{ minWidth: 760 }}>
+              <thead>
+                <tr>
+                  <th>Rasio</th><th>Data Latih</th><th>Data Uji</th><th>Fitur TF-IDF</th>
+                  <th>Accuracy</th><th>Precision</th><th>Recall</th><th>F1-Score</th>
+                </tr>
+              </thead>
+              <tbody>
+                {skenario.map(item => (
+                  <tr key={item.rasio} style={item.rasio === "80:20" ? { background: "#f0f6ff" } : {}}>
+                    <td><strong>{item.rasio}</strong>{item.rasio === "80:20" && <div style={{ fontSize: 10, color: "#2859b5" }}>Model utama</div>}</td>
+                    <td>{item.data_latih}</td><td>{item.data_uji}</td><td>{item.jumlah_fitur}</td>
+                    <td><strong>{persen(item.accuracy)}</strong></td>
+                    <td>{persen(item.precision)}</td><td>{persen(item.recall)}</td><td>{persen(item.f1_score)}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+
+          <div style={{ marginTop: 20 }}>
+            <h3 style={{ margin: "0 0 16px", fontSize: 15, color: "#142641" }}>Grafik Perbandingan Akurasi</h3>
+            <div style={{ overflowX: "auto", padding: "12px 4px 0" }}>
+              <div style={{ display: "flex", gap: 12, minWidth: 440, alignItems: "flex-start" }}>
+                <div style={{ height: 260, display: "flex", flexDirection: "column", justifyContent: "space-between", color: "#64748b", fontSize: 11, textAlign: "right", minWidth: 35 }}>
+                  {[100, 75, 50, 25, 0].map(nilai => <span key={nilai}>{nilai}%</span>)}
+                </div>
+                <div style={{ flex: 1 }}>
+                  <div style={{ height: 260, position: "relative", borderLeft: "1px solid #cbd5e1", borderBottom: "1px solid #94a3b8" }}>
+                    {[0, 25, 50, 75, 100].map(nilai => (
+                      <div key={nilai} style={{ position: "absolute", top: `${nilai}%`, left: 0, right: 0, borderTop: "1px dashed #e2e8f0", pointerEvents: "none" }} />
+                    ))}
+                    <div style={{ position: "absolute", inset: 0, display: "flex", justifyContent: "space-around", alignItems: "flex-end", padding: "0 24px" }}>
+                      {skenario.map(item => (
+                        <div key={item.rasio} style={{ width: "23%", maxWidth: 95, minWidth: 55, height: `${item.accuracy}%`, background: item.rasio === "80:20" ? "#295bcc" : "#7b9bc6", borderRadius: "6px 6px 0 0", position: "relative" }}>
+                          <strong style={{ position: "absolute", top: -22, left: 0, width: "100%", textAlign: "center", color: "#142641", fontSize: 12 }}>{persen(item.accuracy)}</strong>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                  <div style={{ display: "flex", justifyContent: "space-around", padding: "10px 24px 0" }}>
+                    {skenario.map(item => (
+                      <strong key={item.rasio} style={{ width: "23%", maxWidth: 95, minWidth: 55, textAlign: "center", fontSize: 12, color: "#334155" }}>{item.rasio}</strong>
+                    ))}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <h3 style={{ margin: "0 0 12px", fontSize: 14, color: "#142641" }}>Confusion Matrix per Rasio</h3>
+          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(190px,1fr))", gap: 12, marginBottom: 15 }}>
+            {skenario.map(item => {
+              const [[tn, fp], [fn, tp]] = item.confusion_matrix;
+              return (
+                <div key={item.rasio} style={{ padding: 12, border: "1px solid #e1e6ef", borderRadius: 9, background: item.rasio === "80:20" ? "#f5f8ff" : "#fff" }}>
+                  <strong style={{ display: "block", marginBottom: 8, color: "#142641", fontSize: 12 }}>Rasio {item.rasio}</strong>
+                  <table style={{ width: "100%", borderCollapse: "collapse", textAlign: "center", fontSize: 11 }}>
+                    <thead><tr><th style={{ padding: 5 }}>Aktual / Prediksi</th><th>Negatif</th><th>Positif</th></tr></thead>
+                    <tbody>
+                      <tr><th style={{ padding: 5 }}>Negatif</th><td style={{ background: "#eaf1ff", padding: 8 }}>{tn} (TN)</td><td style={{ background: "#fff1ef", padding: 8 }}>{fp} (FP)</td></tr>
+                      <tr><th style={{ padding: 5 }}>Positif</th><td style={{ background: "#fff1ef", padding: 8 }}>{fn} (FN)</td><td style={{ background: "#eaf1ff", padding: 8 }}>{tp} (TP)</td></tr>
+                    </tbody>
+                  </table>
+                </div>
+              );
+            })}
+          </div>
+
+          <div className="research-note">
+            <span>i</span>
+            <div>
+              <strong>Catatan Evaluasi</strong>
+              <p>Precision, Recall, dan F1-Score menggunakan weighted average. Setiap rasio memiliki jumlah data uji berbeda sehingga hasilnya tidak langsung menunjukkan satu rasio selalu lebih baik. Model utama untuk prediksi website tetap rasio 80:20 dengan akurasi 93,04%; eksperimen rasio lain hanya ditampilkan sebagai pembanding.</p>
+            </div>
+          </div>
+        </>
+      )}
+    </section>
+  );
+}
+
+/* ============================================================
+   COMPONENT
+   ============================================================ */
+
+function useEscapeModal(value, close) {
+  useEffect(() => {
+    if (!value) return;
+
+    const handleEscape = (event) => {
+      if (event.key === "Escape") {
+        close();
+      }
+    };
+
+    document.addEventListener("keydown", handleEscape);
+
+    return () =>
+      document.removeEventListener("keydown", handleEscape);
+  }, [value, close]);
+}
+
+function formatDecimal(value) {
+  const number = Number(value);
+
+  if (!Number.isFinite(number)) {
+    return "-";
+  }
+
+  return number
+    .toFixed(6)
+    .replace(".", ",");
+}
+
+function StatCard({ title, value, info }) {
+  return (
+    <article className="research-stat-card">
+      <span>{title}</span>
+      <strong>{value}</strong>
+      <small>{info}</small>
+    </article>
+  );
+}
+
+function FlowBox({ title, subtitle }) {
+  return (
+    <div className="flow-box">
+      <strong>{title}</strong>
+      <span>{subtitle}</span>
+    </div>
+  );
+}
+
+function FlowArrow() {
+  return (
+    <div className="flow-arrow">
+      →
+    </div>
+  );
+}
+
+function MetricCard({
+  name,
+  value,
+  description
+}) {
+  return (
+    <article className="metric-card">
+      <span>{name}</span>
+      <strong>{value}</strong>
+      <small>{description}</small>
+    </article>
+  );
+}
+
+function SentimentBadge({ label }) {
+  const positive = Number(label) === 1;
+
+  return (
+    <span
+      className={`research-label-badge ${
+        positive
+          ? "positive"
+          : "negative"
+      }`}
+    >
+      {positive ? "Positif" : "Negatif"}
+    </span>
+  );
+}
+
+function NormalizationRow({ from, to }) {
+  return (
+    <div>
+      <code>{from}</code>
+
+      <span className="normalization-arrow">
+        →
+      </span>
+
+      <strong>{to}</strong>
+    </div>
+  );
+}
+
+function ResearchProcessStep({
+  number,
+  title,
+  value
+}) {
+  return (
+    <div className="research-modal-step">
+      <div className="research-modal-step-number">
+        {number}
+      </div>
+
+      <div>
+        <strong>{title}</strong>
+        <p>{value || "-"}</p>
+      </div>
+    </div>
+  );
+}
+
+function ResearchPagination({
+  total,
+  startIndex,
+  currentPage,
+  totalPages,
+  onPrev,
+  onNext
+}) {
+  return (
+    <div className="research-data-pagination">
+      <span>
+        Menampilkan{" "}
+        {total === 0 ? 0 : startIndex + 1}
+        {" - "}
+        {Math.min(
+          startIndex + ITEMS_PER_PAGE,
+          total
+        )}{" "}
+        dari {total} data
+      </span>
+
+      <div>
+        <button
+          type="button"
+          disabled={currentPage <= 1}
+          onClick={onPrev}
+        >
+          ‹
+        </button>
+
+        <strong>
+          {currentPage} / {totalPages}
+        </strong>
+
+        <button
+          type="button"
+          disabled={currentPage >= totalPages}
+          onClick={onNext}
+        >
+          ›
+        </button>
+      </div>
+    </div>
+  );
+}
+
+function ConfusionValue({
+  value,
+  label,
+  tone
+}) {
+  return (
+    <div className={`confusion-value ${tone}`}>
+      <strong>{value}</strong>
+      <small>{label}</small>
+    </div>
+  );
+}
+
+export default PenelitianModel;
diff --git a/web_slearn/eslint.config.js b/web_slearn/eslint.config.js
new file mode 100644
index 0000000..ea36dd3
--- /dev/null
+++ b/web_slearn/eslint.config.js
@@ -0,0 +1,21 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{js,jsx}'],
+    extends: [
+      js.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      globals: globals.browser,
+      parserOptions: { ecmaFeatures: { jsx: true } },
+    },
+  },
+])
diff --git a/web_slearn/index.html b/web_slearn/index.html
new file mode 100644
index 0000000..a485092
--- /dev/null
+++ b/web_slearn/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>web_slearn</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
diff --git a/web_slearn/package-lock.json b/web_slearn/package-lock.json
new file mode 100644
index 0000000..6427fb7
--- /dev/null
+++ b/web_slearn/package-lock.json
@@ -0,0 +1,2512 @@
+{
+  "name": "web_slearn",
+  "version": "0.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "web_slearn",
+      "version": "0.0.0",
+      "dependencies": {
+        "papaparse": "^5.7.0",
+        "react": "^19.2.8",
+        "react-dom": "^19.2.8",
+        "react-router-dom": "^7.18.4"
+      },
+      "devDependencies": {
+        "@eslint/js": "^10.0.1",
+        "@types/react": "^19.2.18",
+        "@types/react-dom": "^19.2.7",
+        "@vitejs/plugin-react": "^6.1.1",
+        "eslint": "^10.10.0",
+        "eslint-plugin-react-hooks": "^7.1.1",
+        "eslint-plugin-react-refresh": "^0.5.6",
+        "globals": "^17.12.0",
+        "vite": "^8.3.0"
+      }
+    },
+    "node_modules/@babel/code-frame": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.29.7.tgz",
+      "integrity": "sha512-Aup7aUOfpbAUg2ROOJN6Iw5f9DMBlzu0mIkm/malLQFN/YQgO48wCj0Kxa3sEHJvPVFg7siR+qRInwXd2qhQKw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-validator-identifier": "^7.29.7",
+        "js-tokens": "^4.0.0",
+        "picocolors": "^1.1.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/compat-data": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.29.7.tgz",
+      "integrity": "sha512-locTkQyKvwIEgBzVrn8693ebc97F2U8ZHjbXwDXJ5Fn2TCpNwTlKcaKLkdHop5c/icOFE7qt7Q9JC5hnKNa6Gg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/core": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.29.7.tgz",
+      "integrity": "sha512-RgHBCvtjbOK2gXSNBNIkNoEc9qoVEtau3hj8gEqKQuL3HZAibKarWFEI3Lfm6EYKkLalOh8eSrj9b+ch9H/VBA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.29.7",
+        "@babel/generator": "^7.29.7",
+        "@babel/helper-compilation-targets": "^7.29.7",
+        "@babel/helper-module-transforms": "^7.29.7",
+        "@babel/helpers": "^7.29.7",
+        "@babel/parser": "^7.29.7",
+        "@babel/template": "^7.29.7",
+        "@babel/traverse": "^7.29.7",
+        "@babel/types": "^7.29.7",
+        "@jridgewell/remapping": "^2.3.5",
+        "convert-source-map": "^2.0.0",
+        "debug": "^4.1.0",
+        "gensync": "^1.0.0-beta.2",
+        "json5": "^2.2.3",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/babel"
+      }
+    },
+    "node_modules/@babel/generator": {
+      "version": "7.29.8",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.29.8.tgz",
+      "integrity": "sha512-gZbepsdh3WDtgZKWL+vTPh71LSBrm/Y4/QDZBVCcYfmeTEEuoOYwlSy+G1StfJg+/Zy550u/3TATbm7qDbbMtg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.29.8",
+        "@babel/types": "^7.29.8",
+        "@jridgewell/gen-mapping": "^0.3.12",
+        "@jridgewell/trace-mapping": "^0.3.28",
+        "jsesc": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-compilation-targets": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.29.7.tgz",
+      "integrity": "sha512-wem6WaBj4NaVYVdNhLPPVacES6ZJ+KBBfSkTMD3YZxbP3rm3Di85tJU5ljaUNhaOynt+Aj0xruhYuzQBt8n71g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/compat-data": "^7.29.7",
+        "@babel/helper-validator-option": "^7.29.7",
+        "browserslist": "^4.24.0",
+        "lru-cache": "^5.1.1",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-globals": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-globals/-/helper-globals-7.29.7.tgz",
+      "integrity": "sha512-3nQVUAtvkKH9zahfWgw96Jc/uFOmjACE1kQz82E2lqWmHBgjzbNlsC22nuQTfahmWeQtTq5nQ/4Nnd2A1wj4zA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-imports": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.29.7.tgz",
+      "integrity": "sha512-ejHwrQQYcm9xnTivShn2IDOlIzInN34AXskvq9QicvCtEzq1Vzclu/tKF8Jq1Cg8JG2GL6/EmjgsCT7lXepE3g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/traverse": "^7.29.7",
+        "@babel/types": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-transforms": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.29.7.tgz",
+      "integrity": "sha512-UPUVSyXbOh627KiCIGQSgwWzGeBKLkaJ9PJEdrngIwMSzxLR4jS4+f1f1jb7VzBbg8nFLaYotvVPFCTqdrmTAg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.29.7",
+        "@babel/helper-validator-identifier": "^7.29.7",
+        "@babel/traverse": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/helper-string-parser": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.29.7.tgz",
+      "integrity": "sha512-Pb5ijPrZ89GDH8223L4UP8i6QApWxs04RbPQJTeWDV0/keR2E36MeKnyr6LYmUUvqRRI+Iv87SuF1W6ErINzYw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-identifier": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.29.7.tgz",
+      "integrity": "sha512-qehxGkRj55h/ff8EMaJ+cYhyaKlHIxqYDn682wQD7RNp9UujOQsHog2uS0r2vzr4pW+sXf90NeeayjcNaX3fFg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-option": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.29.7.tgz",
+      "integrity": "sha512-N9ZErrD+yW5geCDtBqnOoxmR8+tNKiGuxKlDpuJxfsqpa2dFcexaziGAE/qoHLiDDreVNMupxGmSoNlyvsA3gw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helpers": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.29.7.tgz",
+      "integrity": "sha512-1k2lAGRMfHTcwuNYcCNUmaUffmQv8KWMfh2iJUUeRlwlwH4FdNG7mfPI10NPfLHJFThE4Tyr4mv7kTNZOiPuBg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/template": "^7.29.7",
+        "@babel/types": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/parser": {
+      "version": "7.29.9",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.29.9.tgz",
+      "integrity": "sha512-CjXrNHTnvqBVqHgdBysY3vk2T8tpJHb5/RMeHJBTyVa9xgugCB0CJTx/3oO8RV2QRQP391RWpB7D6hLjm8V9uA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.29.8"
+      },
+      "bin": {
+        "parser": "bin/babel-parser.js"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@babel/template": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.29.7.tgz",
+      "integrity": "sha512-puq+Gf35oI24FeN11LkoUQFqv9uwNeWpxXZi/Ji3rRIoKAzKnxRaZ+Gkj0vKS9ZCiTESfng1N9LyOyXvo+m+Gg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.29.7",
+        "@babel/parser": "^7.29.7",
+        "@babel/types": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/traverse": {
+      "version": "7.29.8",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.29.8.tgz",
+      "integrity": "sha512-I5z7H3bf/41ktsNVLtpN0wAa336HkqIHQ5BuPLEhTkt1jVSyZpeNKIzTgEWmlxjdg81R0IgUCcaE+Ok3NvrfZg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.29.7",
+        "@babel/generator": "^7.29.8",
+        "@babel/helper-globals": "^7.29.7",
+        "@babel/parser": "^7.29.8",
+        "@babel/template": "^7.29.7",
+        "@babel/types": "^7.29.8",
+        "debug": "^4.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/types": {
+      "version": "7.29.8",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.29.8.tgz",
+      "integrity": "sha512-Vj1jF3cPfxg7OAfoI7QnVKLoILlm2JF9pnVHrX8qx7AHMiYWT+NDAA7jChlNgRS4WTLc/fD1lXLmPixluj+3Gg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-string-parser": "^7.29.7",
+        "@babel/helper-validator-identifier": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@cacheable/memory": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/@cacheable/memory/-/memory-2.2.0.tgz",
+      "integrity": "sha512-CTLKqLItRCEixEAewD3/j9DB3/o96gpTPD4eJ1v+DGOlxZRZncRQkGYqqnAGCscYd6RNeXfGeiuCphsPtqyIfQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@cacheable/utils": "^2.5.0",
+        "@keyv/bigmap": "^1.3.1",
+        "hookified": "^1.15.1",
+        "keyv": "^5.6.0"
+      }
+    },
+    "node_modules/@cacheable/utils": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/@cacheable/utils/-/utils-2.5.0.tgz",
+      "integrity": "sha512-buipgOVDkkPXNR5+xBpDw7Zk2n1EvU7qBJCNUcL7rhQ//kfpOXPAvQ511Os0vpLYJ1pZnvudNytkQt2hst3wqA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "hashery": "^1.5.1",
+        "keyv": "^5.6.0"
+      }
+    },
+    "node_modules/@eslint-community/eslint-utils": {
+      "version": "4.10.1",
+      "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.10.1.tgz",
+      "integrity": "sha512-cuadcxVFE8sDK6iWJbs8Sn0av2Nrh2QSGQhVlBW9AaAHqHwjWsZHT8LJ4hFGPh7ASBV2deFdM7H/DPjulmh8rg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "eslint-visitor-keys": "^3.4.3"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^6.0.0 || ^7.0.0 || >=8.0.0"
+      }
+    },
+    "node_modules/@eslint-community/eslint-utils/node_modules/eslint-visitor-keys": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
+      "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/@eslint-community/regexpp": {
+      "version": "4.12.2",
+      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.12.2.tgz",
+      "integrity": "sha512-EriSTlt5OC9/7SXkRSCAhfSxxoSUgBm33OH+IkwbdpgoqsSsUg7y3uh+IICI/Qg4BBWr3U2i39RpmycbxMq4ew==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^12.0.0 || ^14.0.0 || >=16.0.0"
+      }
+    },
+    "node_modules/@eslint/config-array": {
+      "version": "0.23.5",
+      "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.23.5.tgz",
+      "integrity": "sha512-Y3kKLvC1dvTOT+oGlqNQ1XLqK6D1HU2YXPc52NmAlJZbMMWDzGYXMiPRJ8TYD39muD/OTjlZmNJ4ib7dvSrMBA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@eslint/object-schema": "^3.0.5",
+        "debug": "^4.3.1",
+        "minimatch": "^10.2.4"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.13.0 || >=24"
+      }
+    },
+    "node_modules/@eslint/config-helpers": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/@eslint/config-helpers/-/config-helpers-0.7.0.tgz",
+      "integrity": "sha512-DObd/KKUsU+FaFv4PLxSRenpXfQWmPXXP3pPZ6/K1PCrMu2vQpMDMuQe/BqYeoLcz8ro0bVDF1RxOJgfVEdhUw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@eslint/core": "^1.2.1"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.13.0 || >=24"
+      }
+    },
+    "node_modules/@eslint/core": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@eslint/core/-/core-1.2.1.tgz",
+      "integrity": "sha512-MwcE1P+AZ4C6DWlpin/OmOA54mmIZ/+xZuJiQd4SyB29oAJjN30UW9wkKNptW2ctp4cEsvhlLY/CsQ1uoHDloQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@types/json-schema": "^7.0.15"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.13.0 || >=24"
+      }
+    },
+    "node_modules/@eslint/js": {
+      "version": "10.0.1",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-10.0.1.tgz",
+      "integrity": "sha512-zeR9k5pd4gxjZ0abRoIaxdc7I3nDktoXZk2qOv9gCNWx3mVwEn32VRhyLaRsDiJjTs0xq/T8mfPtyuXu7GWBcA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^20.19.0 || ^22.13.0 || >=24"
+      },
+      "funding": {
+        "url": "https://eslint.org/donate"
+      },
+      "peerDependencies": {
+        "eslint": "^10.0.0"
+      },
+      "peerDependenciesMeta": {
+        "eslint": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@eslint/object-schema": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/@eslint/object-schema/-/object-schema-3.0.5.tgz",
+      "integrity": "sha512-vqTaUEgxzm+YDSdElad6PiRoX4t8VGDjCtt05zn4nU810UIx/uNEV7/lZJ6KwFThKZOzOxzXy48da+No7HZaMw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^20.19.0 || ^22.13.0 || >=24"
+      }
+    },
+    "node_modules/@eslint/plugin-kit": {
+      "version": "0.7.3",
+      "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.7.3.tgz",
+      "integrity": "sha512-IkO+/KEUvwbVpiURZg+P7zF74z5Jxe0UgJxVni+RtoHQ6IZieXaO02kmadomap/q+l6bc/jdPGGqTjhuZnuz1Q==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@eslint/core": "^1.2.1",
+        "levn": "^0.4.1"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.13.0 || >=24"
+      }
+    },
+    "node_modules/@humanfs/core": {
+      "version": "0.19.2",
+      "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.2.tgz",
+      "integrity": "sha512-UhXNm+CFMWcbChXywFwkmhqjs3PRCmcSa/hfBgLIb7oQ5HNb1wS0icWsGtSAUNgefHeI+eBrA8I1fxmbHsGdvA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@humanfs/types": "^0.15.0"
+      },
+      "engines": {
+        "node": ">=18.18.0"
+      }
+    },
+    "node_modules/@humanfs/node": {
+      "version": "0.16.8",
+      "resolved": "https://registry.npmjs.org/@humanfs/node/-/node-0.16.8.tgz",
+      "integrity": "sha512-gE1eQNZ3R++kTzFUpdGlpmy8kDZD/MLyHqDwqjkVQI0JMdI1D51sy1H958PNXYkM2rAac7e5/CnIKZrHtPh3BQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@humanfs/core": "^0.19.2",
+        "@humanfs/types": "^0.15.0",
+        "@humanwhocodes/retry": "^0.4.0"
+      },
+      "engines": {
+        "node": ">=18.18.0"
+      }
+    },
+    "node_modules/@humanfs/types": {
+      "version": "0.15.0",
+      "resolved": "https://registry.npmjs.org/@humanfs/types/-/types-0.15.0.tgz",
+      "integrity": "sha512-ZZ1w0aoQkwuUuC7Yf+7sdeaNfqQiiLcSRbfI08oAxqLtpXQr9AIVX7Ay7HLDuiLYAaFPu8oBYNq/QIi9URHJ3Q==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18.18.0"
+      }
+    },
+    "node_modules/@humanwhocodes/module-importer": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
+      "integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=12.22"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/nzakas"
+      }
+    },
+    "node_modules/@humanwhocodes/retry": {
+      "version": "0.4.3",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/retry/-/retry-0.4.3.tgz",
+      "integrity": "sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18.18"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/nzakas"
+      }
+    },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.13",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
+      "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.0",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/remapping": {
+      "version": "2.3.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/remapping/-/remapping-2.3.5.tgz",
+      "integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.6.0.tgz",
+      "integrity": "sha512-T7jf+5zgsZHwNJ4lvQ7/aezbyk0nNX+zJVWpmHA7VYsEx7a7qr5Rg5IbtJFqkgze5Y2sruq1RUY8Q837Od7iFw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.31",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
+      "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
+    "node_modules/@keyv/bigmap": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/@keyv/bigmap/-/bigmap-1.3.1.tgz",
+      "integrity": "sha512-WbzE9sdmQtKy8vrNPa9BRnwZh5UF4s1KTmSK0KUVLo3eff5BlQNNWDnFOouNpKfPKDnms9xynJjsMYjMaT/aFQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "hashery": "^1.4.0",
+        "hookified": "^1.15.0"
+      },
+      "engines": {
+        "node": ">= 18"
+      },
+      "peerDependencies": {
+        "keyv": "^5.6.0"
+      }
+    },
+    "node_modules/@keyv/serialize": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@keyv/serialize/-/serialize-1.1.1.tgz",
+      "integrity": "sha512-dXn3FZhPv0US+7dtJsIi2R+c7qWYiReoEh5zUntWCf4oSpMNib8FDhSoed6m3QyZdx5hK7iLFkYk3rNxwt8vTA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@oxc-project/types": {
+      "version": "0.151.0",
+      "resolved": "https://registry.npmjs.org/@oxc-project/types/-/types-0.151.0.tgz",
+      "integrity": "sha512-J1yXrIlNDZVzE3ada310xeAw7nH8yCAyLPuUIsjKatFPmfn5bS1oW+cM+QsGOtVWd5nhSpbwZWx/rue+r5Z+PA==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/oxc-project"
+      }
+    },
+    "node_modules/@rolldown/binding-android-arm-eabi": {
+      "version": "1.2.11",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-android-arm-eabi/-/binding-android-arm-eabi-1.2.11.tgz",
+      "integrity": "sha512-A5kXfGKvKWWZE0TtPrfsvT+q4Y5d1QG8gGUzpYjGydM+fARM9MuX90PrXYXe0XbsDVgyxxNzHo6giCj90bsFNw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-android-arm64": {
+      "version": "1.2.11",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-android-arm64/-/binding-android-arm64-1.2.11.tgz",
+      "integrity": "sha512-z6cTycz+iJ4PVkuL4HHW4DfTfoeU/2nqYYuSOrTmH7yHK5Y0LCOnA03V4ZNxavyVaU1oOqUgIg2klN/s+USGOA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-darwin-arm64": {
+      "version": "1.2.11",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-darwin-arm64/-/binding-darwin-arm64-1.2.11.tgz",
+      "integrity": "sha512-jShvqNtP6vDC6/A5JOAzbVV+DkgHqhl/ScVCJEbt+TUY6QYz7YnXcrg3sLtFBniro0f/Ld50ZwCWA6f7KYD1nQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-darwin-x64": {
+      "version": "1.2.11",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-darwin-x64/-/binding-darwin-x64-1.2.11.tgz",
+      "integrity": "sha512-f2i2xiNWq1Z1l2++q2fuhZRdLAT3aqxD6vRNm1RAxpUoBcdqNB3C0s1Bt+K+PbEx2F5F4gQp6hqKkphCY/xF9w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-freebsd-x64": {
+      "version": "1.2.11",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-freebsd-x64/-/binding-freebsd-x64-1.2.11.tgz",
+      "integrity": "sha512-4Ir5FSOKIAMr4r0kExpt1s3bMgzJU3rA45AYOHtQpls0oNeqcYBKrWMlckrYH4KCfGLfkfn1tN1dmZPMVsdXow==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-arm-gnueabihf": {
+      "version": "1.2.11",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm-gnueabihf/-/binding-linux-arm-gnueabihf-1.2.11.tgz",
+      "integrity": "sha512-/gnRDM+39BROzAN/k1OZjDPnDMcZxB/0EUxKjONO5yVkNEvlsoMDrxGNKgZi/ttFriS2gwlDNzB65pvNbFOXIQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-arm64-gnu": {
+      "version": "1.2.11",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm64-gnu/-/binding-linux-arm64-gnu-1.2.11.tgz",
+      "integrity": "sha512-PFaK8HwvAHbaKbBcDNQihjMKYvFnA5hiENx/l5tphTDz1E0WFp32l0A7aq7lyUwGsRw/xSrNIy/gIK4thrSCrw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-arm64-musl": {
+      "version": "1.2.11",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm64-musl/-/binding-linux-arm64-musl-1.2.11.tgz",
+      "integrity": "sha512-AskzJUIKRLPxkruR1wLKewGbOw+EYfU/9lOrBFj4AFrEA8hPpKFnODWNu2WLaNs0QNkEb9QIJufmVZZIL/bJlg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-ppc64-gnu": {
+      "version": "1.2.11",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-ppc64-gnu/-/binding-linux-ppc64-gnu-1.2.11.tgz",
+      "integrity": "sha512-qlUGAheh2yh8afH7QBgx0PrRHN85hKnNd78x8MeMhXivuevgd8vgf6/CstOzmNKY/lLTHvNTrPy98cLnAugzJw==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-s390x-gnu": {
+      "version": "1.2.11",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-s390x-gnu/-/binding-linux-s390x-gnu-1.2.11.tgz",
+      "integrity": "sha512-secpEad+0vCbSfn8upFySkDskv+bGPk3THSDS9Y89yc4rb4kzqHp8Dmyd9BkQW4SnhNXBZCl/6CrO//hZahNJQ==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-x64-gnu": {
+      "version": "1.2.11",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-x64-gnu/-/binding-linux-x64-gnu-1.2.11.tgz",
+      "integrity": "sha512-mOVBT3dPpkWm8XBWPmU4bf+U6dYDLeMo/9ojUmis4N0L5uu10qra5vOyngZ7/PSdoE4G9KvRt4bloRxNjLas7A==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-x64-musl": {
+      "version": "1.2.11",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-x64-musl/-/binding-linux-x64-musl-1.2.11.tgz",
+      "integrity": "sha512-Is78i9A8Ui4SqcxUwFJ9uMmjDn58IbVTjFWYdQestFEgeuEmHMLGNriXnVJKkwG2YiZjw8cP0zCTyDMdDGtOOg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-openharmony-arm64": {
+      "version": "1.2.11",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-openharmony-arm64/-/binding-openharmony-arm64-1.2.11.tgz",
+      "integrity": "sha512-dUCXneZ87INUMyQ0D+C0HrEBNUPNXHaPmU5GTjyKTJEiussw9Kaj5Ln8UztPe4epV/ffvgNBEadksdYhmW6xJA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-win32-arm64-msvc": {
+      "version": "1.2.11",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-win32-arm64-msvc/-/binding-win32-arm64-msvc-1.2.11.tgz",
+      "integrity": "sha512-jByxb6qfd+bH1xUd0qnfFnb17i9sWBPY2tOavJ0l3tdr3OTu+Kvtm8cd/JV5nFt657b1VqGltxg9olOEfofXWw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-win32-x64-msvc": {
+      "version": "1.2.11",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-win32-x64-msvc/-/binding-win32-x64-msvc-1.2.11.tgz",
+      "integrity": "sha512-/PzKqzAJ03i19oy2ItPvyvaVjOjBCNnfaJs8yvUdGBKmiESgnrJSQ2awd81QzFbbnAmu7YO9ZnJrDCb9VSJPRA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/pluginutils": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.1.tgz",
+      "integrity": "sha512-2j9bGt5Jh8hj+vPtgzPtl72j0yRxHAyumoo6TNfAjsLB04UtpSvPbPcDcBMxz7n+9CYB0c1GxQFxYRg2jimqGw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/esrecurse": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/@types/esrecurse/-/esrecurse-4.3.1.tgz",
+      "integrity": "sha512-xJBAbDifo5hpffDBuHl0Y8ywswbiAp/Wi7Y/GtAgSlZyIABppyurxVueOPE8LUQOxdlgi6Zqce7uoEpqNTeiUw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/estree": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.9.tgz",
+      "integrity": "sha512-GhdPgy1el4/ImP05X05Uw4cw2/M93BCUmnEvWZNStlCzEKME4Fkk+YpoA5OiHNQmoS7Cafb8Xa3Pya8m1Qrzeg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/json-schema": {
+      "version": "7.0.15",
+      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
+      "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/react": {
+      "version": "19.3.0",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.3.0.tgz",
+      "integrity": "sha512-N0rFCuH9YoxG9/m61l9MfpJKfmLOVU0em7ipIz6TRgSSkvReLB9vL85GB+yr8Bs5leqpvg96JSwF4ZS1s4viQg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "csstype": "^3.2.2"
+      }
+    },
+    "node_modules/@types/react-dom": {
+      "version": "19.3.0",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.3.0.tgz",
+      "integrity": "sha512-ZI7bU42mZXXKHn/qNLEw2IrbiINU7X5+vfgdixBHkCNpYWXjKgfQ/P+uyGb5CjOLB9UcnTeg3rylQtV2hym44Q==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "^19.3.0"
+      }
+    },
+    "node_modules/@vitejs/plugin-react": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-6.1.1.tgz",
+      "integrity": "sha512-yxLaQV9gkhS8ezJqCM6+ndU7mDY6gqAg75NQ+0IjwEI8IYOmQCgkRwHKVSfWXW076DsqMo0Dk+0FK1U+M5RgFw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@rolldown/pluginutils": "^1.0.1"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "peerDependencies": {
+        "@rolldown/plugin-babel": "^0.1.7 || ^0.2.0",
+        "babel-plugin-react-compiler": "^1.0.0",
+        "oxc-transform-react": "^0.145.0",
+        "vite": "^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@rolldown/plugin-babel": {
+          "optional": true
+        },
+        "babel-plugin-react-compiler": {
+          "optional": true
+        },
+        "oxc-transform-react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/acorn": {
+      "version": "8.18.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.18.0.tgz",
+      "integrity": "sha512-lGq+9yr1/GuAWaVYIHRjvvySG5/4VfKIvC8EWxStPdcDh/Ka7FG3twP6v4d5BkravUilhIAsG4Qj83t02LWUPQ==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/acorn-jsx": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
+      "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      }
+    },
+    "node_modules/ajv": {
+      "version": "6.15.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.15.0.tgz",
+      "integrity": "sha512-fgFx7Hfoq60ytK2c7DhnF8jIvzYgOMxfugjLOSMHjLIPgenqa7S7oaagATUq99mV6IYvN2tRmC0wnTYX6iPbMw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/balanced-match": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-4.0.4.tgz",
+      "integrity": "sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "18 || 20 || >=22"
+      }
+    },
+    "node_modules/baseline-browser-mapping": {
+      "version": "2.11.26",
+      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.11.26.tgz",
+      "integrity": "sha512-GLQdD3y6UF8iVuMJl5fHgE4jdn/ua7n+toKfLgNlg3BqQtOZjpy68T8Tup8/wGWZCDlm7KMg7tPb4MPn7oN0TQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "baseline-browser-mapping": "dist/cli.cjs"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/brace-expansion": {
+      "version": "5.0.12",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.12.tgz",
+      "integrity": "sha512-YovQ3rzhaLMIrDjNDMkNS01tea93qhEhG5xy8f6+R0l+dw3Ki+5sCoIoI942iuLZTHWogWktgwVDhU09iNEimQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^4.0.2"
+      },
+      "engines": {
+        "node": "20 || >=22"
+      }
+    },
+    "node_modules/browserslist": {
+      "version": "4.29.3",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.29.3.tgz",
+      "integrity": "sha512-1R4kiYKXGViqEN0CnoDrXc1StD9niAwu+j2dukWzrD4bJgsD4lDmEp0CRbc6E/vYJIfTHwPmwyaKtVSudICdPA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "baseline-browser-mapping": "^2.11.26",
+        "caniuse-lite": "^1.0.30001813",
+        "electron-to-chromium": "^1.5.439",
+        "node-releases": "^2.0.57",
+        "update-browserslist-db": "^1.3.3"
+      },
+      "bin": {
+        "browserslist": "cli.js"
+      },
+      "engines": {
+        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
+      }
+    },
+    "node_modules/cacheable": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/cacheable/-/cacheable-2.5.0.tgz",
+      "integrity": "sha512-60cyAOytib/OzBw1JNSoSV/boK1AtHryDIjvVBk7XbN4ugfkM3+Sry7fEjNgPMGgOjuaZPAp8ruZ0Cxafwyq9g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@cacheable/memory": "^2.2.0",
+        "@cacheable/utils": "^2.5.0",
+        "hookified": "^1.15.0",
+        "keyv": "^5.6.0",
+        "qified": "^0.10.1"
+      }
+    },
+    "node_modules/caniuse-lite": {
+      "version": "1.0.30001814",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001814.tgz",
+      "integrity": "sha512-/Uaf1lAzr59XcMpW0o96WoEfr+VXK2OX4U9AgFoiSHsVJ4HppnIFUjtYzsyDH2+tgANaQb2/oxYGwCPapN1FpA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "CC-BY-4.0"
+    },
+    "node_modules/convert-source-map": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
+      "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/cookie": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.1.1.tgz",
+      "integrity": "sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/cross-spawn": {
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
+      "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "path-key": "^3.1.0",
+        "shebang-command": "^2.0.0",
+        "which": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/csstype": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
+      "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/debug": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
+      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/deep-is": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
+      "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/detect-libc": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
+      "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/electron-to-chromium": {
+      "version": "1.5.442",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.442.tgz",
+      "integrity": "sha512-najZYZ3+ZpjN1z3VOsrBiv5ej18vQgfV2lvEmxWzfmKrk4bdm3Owseyud4yGU6DfFn9pyunoAHDDyM4KmP78Ew==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/escalade": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
+      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/eslint": {
+      "version": "10.11.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-10.11.0.tgz",
+      "integrity": "sha512-P7a6UEEqb9G95MYAtqkmsTbVXIYyzIfl6NGOIJk162PaahFxFyeGcrlXYFSiagECg4sEm8IseJdZBKR3rx6MsQ==",
+      "dev": true,
+      "license": "MIT",
+      "workspaces": [
+        "packages/*"
+      ],
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.8.0",
+        "@eslint-community/regexpp": "^4.12.2",
+        "@eslint/config-array": "^0.23.5",
+        "@eslint/config-helpers": "^0.7.0",
+        "@eslint/core": "^1.2.1",
+        "@eslint/plugin-kit": "^0.7.3",
+        "@humanfs/node": "^0.16.6",
+        "@humanwhocodes/module-importer": "^1.0.1",
+        "@humanwhocodes/retry": "^0.4.2",
+        "@types/estree": "^1.0.6",
+        "ajv": "^6.14.0",
+        "cross-spawn": "^7.0.6",
+        "debug": "^4.3.2",
+        "escape-string-regexp": "^4.0.0",
+        "eslint-scope": "^9.1.2",
+        "eslint-visitor-keys": "^5.0.1",
+        "espree": "^11.2.0",
+        "esquery": "^1.7.0",
+        "esutils": "^2.0.2",
+        "fast-deep-equal": "^3.1.3",
+        "file-entry-cache": "11.1.5 || >11.1.6 <12",
+        "find-up": "^5.0.0",
+        "glob-parent": "^6.0.2",
+        "ignore": "^5.2.0",
+        "imurmurhash": "^0.1.4",
+        "is-glob": "^4.0.0",
+        "json-stable-stringify-without-jsonify": "^1.0.1",
+        "minimatch": "^10.2.5",
+        "natural-compare": "^1.4.0",
+        "optionator": "^0.9.3"
+      },
+      "bin": {
+        "eslint": "bin/eslint.js"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.13.0 || >=24"
+      },
+      "funding": {
+        "url": "https://eslint.org/donate"
+      },
+      "peerDependencies": {
+        "jiti": "*"
+      },
+      "peerDependenciesMeta": {
+        "jiti": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/eslint-plugin-react-hooks": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-7.1.1.tgz",
+      "integrity": "sha512-f2I7Gw6JbvCexzIInuSbZpfdQ44D7iqdWX01FKLvrPgqxoE7oMj8clOfto8U6vYiz4yd5oKu39rRSVOe1zRu0g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/core": "^7.24.4",
+        "@babel/parser": "^7.24.4",
+        "hermes-parser": "^0.25.1",
+        "zod": "^3.25.0 || ^4.0.0",
+        "zod-validation-error": "^3.5.0 || ^4.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "eslint": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 || ^9.0.0 || ^10.0.0"
+      }
+    },
+    "node_modules/eslint-plugin-react-refresh": {
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react-refresh/-/eslint-plugin-react-refresh-0.5.7.tgz",
+      "integrity": "sha512-XhJSzLljuYD4UjNuFGJu2v7aD3sqNVK12w5/DCUfrNfHWegZo2+TsavNx8MuxMwEquuFAzNbNfXKU0WoZ+YUIg==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "eslint": "^9 || ^10"
+      }
+    },
+    "node_modules/eslint-scope": {
+      "version": "9.1.2",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-9.1.2.tgz",
+      "integrity": "sha512-xS90H51cKw0jltxmvmHy2Iai1LIqrfbw57b79w/J7MfvDfkIkFZ+kj6zC3BjtUwh150HsSSdxXZcsuv72miDFQ==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "@types/esrecurse": "^4.3.1",
+        "@types/estree": "^1.0.8",
+        "esrecurse": "^4.3.0",
+        "estraverse": "^5.2.0"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.13.0 || >=24"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/eslint-visitor-keys": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-5.0.1.tgz",
+      "integrity": "sha512-tD40eHxA35h0PEIZNeIjkHoDR4YjjJp34biM0mDvplBe//mB+IHCqHDGV7pxF+7MklTvighcCPPZC7ynWyjdTA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^20.19.0 || ^22.13.0 || >=24"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/espree": {
+      "version": "11.2.0",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-11.2.0.tgz",
+      "integrity": "sha512-7p3DrVEIopW1B1avAGLuCSh1jubc01H2JHc8B4qqGblmg5gI9yumBgACjWo4JlIc04ufug4xJ3SQI8HkS/Rgzw==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "acorn": "^8.16.0",
+        "acorn-jsx": "^5.3.2",
+        "eslint-visitor-keys": "^5.0.1"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.13.0 || >=24"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/esquery": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.7.0.tgz",
+      "integrity": "sha512-Ap6G0WQwcU/LHsvLwON1fAQX9Zp0A2Y6Y/cJBl9r/JbW90Zyg4/zbG6zzKa2OTALELarYHmKu0GhpM5EO+7T0g==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "estraverse": "^5.1.0"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/esrecurse": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
+      "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "estraverse": "^5.2.0"
+      },
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/estraverse": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+      "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/esutils": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
+      "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/fast-deep-equal": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/fast-json-stable-stringify": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
+      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/fast-levenshtein": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
+      "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/fdir": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
+      "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/file-entry-cache": {
+      "version": "11.1.5",
+      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-11.1.5.tgz",
+      "integrity": "sha512-+PFTHITI08JIGhnNpGNI8T8inUpgZfk3GNEqfT9R2zZV2iFXg3CvqzSl/uEhs7TSGujYRELEANyDvS8Fj7+S7Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "flat-cache": "^6.1.23"
+      }
+    },
+    "node_modules/find-up": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
+      "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "locate-path": "^6.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/flat-cache": {
+      "version": "6.1.23",
+      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-6.1.23.tgz",
+      "integrity": "sha512-f++BY9pTk+983xK1FLzlLpmM0i0z+jHmx3QESGkURMXujQZz1k5wzwX6hjnQ8goaD0B+sYnDK1yZ6MTyZfUaqA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cacheable": "^2.5.0",
+        "flatted": "^3.4.2",
+        "hookified": "^1.15.0"
+      }
+    },
+    "node_modules/flatted": {
+      "version": "3.4.4",
+      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.4.4.tgz",
+      "integrity": "sha512-5+ybhBZANEJxaH3X5evAFatUxLfEHSr7n6kYJ+1Qd0mUqr4eu9gIf6GDbWHf8RJijHrjjO8G+la14SlL2SeS1Q==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/gensync": {
+      "version": "1.0.0-beta.2",
+      "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
+      "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/glob-parent": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/globals": {
+      "version": "17.12.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-17.12.0.tgz",
+      "integrity": "sha512-cezEd/DTyyht9cvSSURyygXPfy04GtWO/5e6ZPvH7fCtjKz9PYOmuawphw1Ctd1f6C+5JypXfGD7ahNMXvevBA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/hashery": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/hashery/-/hashery-1.5.1.tgz",
+      "integrity": "sha512-iZyKG96/JwPz1N55vj2Ie2vXbhu440zfUfJvSwEqEbeLluk7NnapfGqa7LH0mOsnDxTF85Mx8/dyR6HfqcbmbQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "hookified": "^1.15.0"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/hermes-estree": {
+      "version": "0.25.1",
+      "resolved": "https://registry.npmjs.org/hermes-estree/-/hermes-estree-0.25.1.tgz",
+      "integrity": "sha512-0wUoCcLp+5Ev5pDW2OriHC2MJCbwLwuRx+gAqMTOkGKJJiBCLjtrvy4PWUGn6MIVefecRpzoOZ/UV6iGdOr+Cw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/hermes-parser": {
+      "version": "0.25.1",
+      "resolved": "https://registry.npmjs.org/hermes-parser/-/hermes-parser-0.25.1.tgz",
+      "integrity": "sha512-6pEjquH3rqaI6cYAXYPcz9MS4rY6R4ngRgrgfDshRptUZIc3lw0MCIJIGDj9++mfySOuPTHB4nrSW99BCvOPIA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "hermes-estree": "0.25.1"
+      }
+    },
+    "node_modules/hookified": {
+      "version": "1.15.1",
+      "resolved": "https://registry.npmjs.org/hookified/-/hookified-1.15.1.tgz",
+      "integrity": "sha512-MvG/clsADq1GPM2KGo2nyfaWVyn9naPiXrqIe4jYjXNZQt238kWyOGrsyc/DmRAQ+Re6yeo6yX/yoNCG5KAEVg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/ignore": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
+      "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/imurmurhash": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
+      "integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.8.19"
+      }
+    },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/isexe": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
+      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/jsesc": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz",
+      "integrity": "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "jsesc": "bin/jsesc"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/json-stable-stringify-without-jsonify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
+      "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/json5": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
+      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "json5": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/keyv": {
+      "version": "5.6.0",
+      "resolved": "https://registry.npmjs.org/keyv/-/keyv-5.6.0.tgz",
+      "integrity": "sha512-CYDD3SOtsHtyXeEORYRx2qBtpDJFjRTGXUtmNEMGyzYOKj1TE3tycdlho7kA1Ufx9OYWZzg52QFBGALTirzDSw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@keyv/serialize": "^1.1.1"
+      }
+    },
+    "node_modules/levn": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
+      "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "prelude-ls": "^1.2.1",
+        "type-check": "~0.4.0"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/lightningcss": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.33.0.tgz",
+      "integrity": "sha512-WkUDrojuJs0xkgGf2udWxa3yGBRxPtxUkB79i6aCZLRgc7PM8fZe9TosfPDcvEpQZbuFASnHYmRLBLUbmLOIIA==",
+      "dev": true,
+      "license": "MPL-2.0",
+      "dependencies": {
+        "detect-libc": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "lightningcss-android-arm64": "1.33.0",
+        "lightningcss-darwin-arm64": "1.33.0",
+        "lightningcss-darwin-x64": "1.33.0",
+        "lightningcss-freebsd-x64": "1.33.0",
+        "lightningcss-linux-arm-gnueabihf": "1.33.0",
+        "lightningcss-linux-arm64-gnu": "1.33.0",
+        "lightningcss-linux-arm64-musl": "1.33.0",
+        "lightningcss-linux-x64-gnu": "1.33.0",
+        "lightningcss-linux-x64-musl": "1.33.0",
+        "lightningcss-win32-arm64-msvc": "1.33.0",
+        "lightningcss-win32-x64-msvc": "1.33.0"
+      }
+    },
+    "node_modules/lightningcss-android-arm64": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-android-arm64/-/lightningcss-android-arm64-1.33.0.tgz",
+      "integrity": "sha512-gEpRTalKdosp4Bb8qWtc2iOgE5SeIHlpS1up9bFq2wAyYhl1UdTObYiHe98zEM9SQvSoqQZ1IQD0JNpg3Ml5pg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-arm64": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.33.0.tgz",
+      "integrity": "sha512-Sciaz8eenNTKn9b3t7+xr0ipTp9YxKQY4npwQ3mrRuL0BAVHBLyZxofhaKBAVtzmtRZ/zTyo0/to4B1uWG/Djg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-x64": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.33.0.tgz",
+      "integrity": "sha512-Z5UPAxzrjlWNNyGy6i65cJzzvgJ5D3T6wMvs+gWpY9d7qRhANrxqAp6LhxIgZhWEw18RfJTGcRxjuLIBr+m8XQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-freebsd-x64": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.33.0.tgz",
+      "integrity": "sha512-QQM/Ti/hQajJwCY+RiWuCZ9sdtI/XQk7nDK5vC8kkdwixezOlDgvDx7+RT+QjK6FcFT4MpsuoBnHIo/O3StRRg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm-gnueabihf": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.33.0.tgz",
+      "integrity": "sha512-N7FVBe6iS24MlM6R/4RBTxGhQheZGs7tiQ9U32UtF75NzP5Q7xWPRqLBCKxlRQRk3rY1jCIPLzx7WzOhuUIRLQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-gnu": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.33.0.tgz",
+      "integrity": "sha512-j2v/itmy4HlNxlc6voKXYgBqNi0Ng2LShg4z7GufpEgs05P+2suBVyi9I6YHq5uoVFx9ETin3eCEhLVyXGQnKg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-musl": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.33.0.tgz",
+      "integrity": "sha512-yiO5ROMuYQgXbC60yjZU5CYSFZGKXL0HFATXt9mHJn1+zW55oCtMI9NfcVhYLMFDL7gV7oBPon/EmMMGg2OvtQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-gnu": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.33.0.tgz",
+      "integrity": "sha512-ar+Ju7LmcN0Jo4FpL4hpFybwNG9/3A/Br5KW2n2jyODg3MEZXaDYADdemoNS+BDNfMgKvylJLj4S5tyRActuAg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-musl": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.33.0.tgz",
+      "integrity": "sha512-RYiYbkokw0trfKqqzfF55lginwEPrD3OJDfTuJzFs1MK6iFnDenaz1fqLLtX4ITG3OktJQXOeTaw1awrBAlZPw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-arm64-msvc": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.33.0.tgz",
+      "integrity": "sha512-1K+MPfLSFVpphzpdbfkhlWk6wBrTObBzS2T6db10PNOZgR9GoVsAWzwNyuhUYYbTp23j+4RrncfujZ4uAzXvwA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-x64-msvc": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.33.0.tgz",
+      "integrity": "sha512-OlEICDx/Xl0FqSp4bry8zFnCvGpig3Gl4gCquvYwHuqJKEC1+n9NgDniFvqHGmMv1ZkqDJrDqKKSykTDX+ehuA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/locate-path": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
+      "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "p-locate": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/lru-cache": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
+      "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "yallist": "^3.0.2"
+      }
+    },
+    "node_modules/minimatch": {
+      "version": "10.2.6",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.2.6.tgz",
+      "integrity": "sha512-vpLQEs+VLCr1nU0BXS07maYoFwlDAH0gngQuuttxIwutDFEMHq2blX+8vpgxDdK3J1PwjCJiep77OitTZ4Ll1A==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "brace-expansion": "^5.0.8"
+      },
+      "engines": {
+        "node": "18 || 20 || >=22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.19",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.19.tgz",
+      "integrity": "sha512-Y2tUNy4ouw6tq5oDSKeQYGOyhkUBhNOcGV/02KC+6kd9eDGqdZd++mjMiIDilrBYvjEnCYvVtsuHCuP+okSfug==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/natural-compare": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
+      "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/node-releases": {
+      "version": "2.0.57",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.57.tgz",
+      "integrity": "sha512-kQK9LGGFiHtrWiNhZtA7Qbw17AQz+dmsEKODRIVTXA9+e5MS/2gZEBhYJt13GrAz5/IOZKddH/0Z3TP/Zgo+yw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/optionator": {
+      "version": "0.9.4",
+      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
+      "integrity": "sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "deep-is": "^0.1.3",
+        "fast-levenshtein": "^2.0.6",
+        "levn": "^0.4.1",
+        "prelude-ls": "^1.2.1",
+        "type-check": "^0.4.0",
+        "word-wrap": "^1.2.5"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/p-limit": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
+      "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "yocto-queue": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/p-locate": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
+      "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "p-limit": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/papaparse": {
+      "version": "5.7.0",
+      "resolved": "https://registry.npmjs.org/papaparse/-/papaparse-5.7.0.tgz",
+      "integrity": "sha512-qBGxg/7Q3Kl9Wfhrz2Z74UnvnHTXLNG6jmKJFeBvP2+y4lV7So+7SR62+Zd47JvdrCkX+nDcnr0ObPzek/+6RA==",
+      "license": "MIT"
+    },
+    "node_modules/path-exists": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/path-key": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/picomatch": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.7.tgz",
+      "integrity": "sha512-qcJu88Q2IWqJsDD529JKMdwGm/dvInW4HvQnRwiH9JtihJvzGOscDtHE3x1pBKeUOTysQ8kVmLnJ2kJu7yhcGA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/postcss": {
+      "version": "8.5.28",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.28.tgz",
+      "integrity": "sha512-RRuzqDtt5Y9h3quz5hWhK+TPnsmVs6WwSU6LkJMeY4HstUEDuYTG8UJSdawMRzmzAtV+KEoG8N3Qg2qLy5vM/A==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.18",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/prelude-ls": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
+      "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/punycode": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
+      "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/qified": {
+      "version": "0.10.1",
+      "resolved": "https://registry.npmjs.org/qified/-/qified-0.10.1.tgz",
+      "integrity": "sha512-+Owyggi9IxT1ePKGafcI87ubSmxol6smwJ+RAHDQlx9+9cPwFWDiKFFCPuWhr9ignlGpZ9vDQLw67N4dcTVFEA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "hookified": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/qified/node_modules/hookified": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/hookified/-/hookified-2.2.0.tgz",
+      "integrity": "sha512-p/LgFzRN5FeoD3DLS6bkUapeye6E4SI6yJs6KetENd18S+FBthqYq2amJUWpt5z0EQwwHemidjY5OqJGEKm5uA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/react": {
+      "version": "19.3.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-19.3.0.tgz",
+      "integrity": "sha512-E8LUcbtBWt20bbl2YoHfx4ZDBdxVTfOKtCZn9cDSJ4l6/nuoApcpIBcj47t2wZoVX8g2ZHuMHbiShgCR1T5Sog==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-dom": {
+      "version": "19.3.0",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.3.0.tgz",
+      "integrity": "sha512-JDk8dgif51OjFoDE70+OT9ICyYr+69HlmihNwp1+Nsfbna3t5sIiCa9ZJktDmQ4/1b/rn26hIAR2uYXDMr5r0Q==",
+      "license": "MIT",
+      "dependencies": {
+        "scheduler": "^0.28.0"
+      },
+      "peerDependencies": {
+        "react": "^19.3.0"
+      }
+    },
+    "node_modules/react-router": {
+      "version": "7.18.4",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.18.4.tgz",
+      "integrity": "sha512-PUPQcMhMGRAslLcvtlPz/kmzBEWPhLdgLFrL7pLNepBL6dX0lWj4WD2cUYVgYCuT3jxvghYFg81cDTj44DhetQ==",
+      "license": "MIT",
+      "dependencies": {
+        "cookie": "^1.0.1",
+        "set-cookie-parser": "^2.6.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "7.18.4",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.18.4.tgz",
+      "integrity": "sha512-yrfmJHIpDG7taCpqKjT1G5B6q3O2K+RN8/fgNf0lTjCwiPbQ0ei6vXX9ZjQR+7ld8Tr7Z5xmyMnZ8YJrphWQUw==",
+      "license": "MIT",
+      "dependencies": {
+        "react-router": "7.18.4"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
+    "node_modules/rolldown": {
+      "version": "1.2.11",
+      "resolved": "https://registry.npmjs.org/rolldown/-/rolldown-1.2.11.tgz",
+      "integrity": "sha512-qpSwIyz0jHQq5qXBTNxFmE6664rJ7O+4TvPFOiOaBSrz8IOHc1koKKSqTM2H6u1UG1+TveuC6vaDHKXFOvb1Kw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@oxc-project/types": "=0.151.0",
+        "@rolldown/pluginutils": "^1.0.0"
+      },
+      "bin": {
+        "rolldown": "bin/cli.mjs"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "optionalDependencies": {
+        "@rolldown/binding-android-arm-eabi": "1.2.11",
+        "@rolldown/binding-android-arm64": "1.2.11",
+        "@rolldown/binding-darwin-arm64": "1.2.11",
+        "@rolldown/binding-darwin-x64": "1.2.11",
+        "@rolldown/binding-freebsd-x64": "1.2.11",
+        "@rolldown/binding-linux-arm-gnueabihf": "1.2.11",
+        "@rolldown/binding-linux-arm64-gnu": "1.2.11",
+        "@rolldown/binding-linux-arm64-musl": "1.2.11",
+        "@rolldown/binding-linux-ppc64-gnu": "1.2.11",
+        "@rolldown/binding-linux-s390x-gnu": "1.2.11",
+        "@rolldown/binding-linux-x64-gnu": "1.2.11",
+        "@rolldown/binding-linux-x64-musl": "1.2.11",
+        "@rolldown/binding-openharmony-arm64": "1.2.11",
+        "@rolldown/binding-win32-arm64-msvc": "1.2.11",
+        "@rolldown/binding-win32-x64-msvc": "1.2.11"
+      }
+    },
+    "node_modules/scheduler": {
+      "version": "0.28.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.28.0.tgz",
+      "integrity": "sha512-juorfCmIkIw8tT+p5BXSm6PJjQF/ycEYmKyzURCIt/RaZIhL+PulbQ9Yu2z1HdOJDdqDTlxA1+xKBmHXJsczAw==",
+      "license": "MIT"
+    },
+    "node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/set-cookie-parser": {
+      "version": "2.7.2",
+      "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.2.tgz",
+      "integrity": "sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw==",
+      "license": "MIT"
+    },
+    "node_modules/shebang-command": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "shebang-regex": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/shebang-regex": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.2.tgz",
+      "integrity": "sha512-KGj/8Y43x35aZVDtt+J4mK1hoLGHULMYfSkODJNQjNDC3oW1PqPoxMwo0pLUsWM/UEGzON/NxeHywEfNXNP3Vw==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/tinyglobby": {
+      "version": "0.2.17",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.17.tgz",
+      "integrity": "sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fdir": "^6.5.0",
+        "picomatch": "^4.0.4"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/SuperchupuDev"
+      }
+    },
+    "node_modules/type-check": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
+      "integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "prelude-ls": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/update-browserslist-db": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.3.3.tgz",
+      "integrity": "sha512-pJ2sYawQS0R/WI928Gj5GlPhTGzbMelq0+4INtSYNDV9ErKJcX6xjGWkoG/VnB3dpUm00zALaqkrUD77pO5TDQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "escalade": "^3.2.0",
+        "picocolors": "^1.1.1"
+      },
+      "bin": {
+        "update-browserslist-db": "cli.js"
+      },
+      "peerDependencies": {
+        "browserslist": ">= 4.21.0"
+      }
+    },
+    "node_modules/uri-js": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
+      "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "punycode": "^2.1.0"
+      }
+    },
+    "node_modules/vite": {
+      "version": "8.3.1",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-8.3.1.tgz",
+      "integrity": "sha512-/bvH9E9tmCXRGp2uXY3WbOldqpTwFkbha/8ANaEQ6VkxhH60KyqLwgZq6lG2y+4uT55x9+9eUHMpQ7uGnOCKjA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "lightningcss": "^1.33.0",
+        "picomatch": "^4.0.7",
+        "postcss": "^8.5.28",
+        "rolldown": "~1.2.9",
+        "tinyglobby": "^0.2.17"
+      },
+      "bin": {
+        "vite": "bin/vite.js"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "funding": {
+        "url": "https://github.com/vitejs/vite?sponsor=1"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.3"
+      },
+      "peerDependencies": {
+        "@types/node": "^20.19.0 || >=22.12.0",
+        "@vitejs/devtools": "^0.7.1",
+        "esbuild": "^0.27.0 || ^0.28.0",
+        "jiti": ">=1.21.0",
+        "less": "^4.0.0",
+        "sass": "^1.70.0",
+        "sass-embedded": "^1.70.0",
+        "stylus": ">=0.54.8",
+        "sugarss": "^5.0.0",
+        "terser": "^5.16.0",
+        "tsx": "^4.8.1",
+        "yaml": "^2.4.2"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        },
+        "@vitejs/devtools": {
+          "optional": true
+        },
+        "esbuild": {
+          "optional": true
+        },
+        "jiti": {
+          "optional": true
+        },
+        "less": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        },
+        "sass-embedded": {
+          "optional": true
+        },
+        "stylus": {
+          "optional": true
+        },
+        "sugarss": {
+          "optional": true
+        },
+        "terser": {
+          "optional": true
+        },
+        "tsx": {
+          "optional": true
+        },
+        "yaml": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/which": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "isexe": "^2.0.0"
+      },
+      "bin": {
+        "node-which": "bin/node-which"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/word-wrap": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
+      "integrity": "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/yallist": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
+      "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/yocto-queue": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
+      "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/zod": {
+      "version": "4.6.5",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-4.6.5.tgz",
+      "integrity": "sha512-v5l/aFXZQeai4awLbOpSoHecE9UiMrnfx75tEXLjNonXVARxQ5mOeipTjROUchszUNCqnE+hqAMujRsRHsut2Q==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
+    },
+    "node_modules/zod-validation-error": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/zod-validation-error/-/zod-validation-error-4.0.2.tgz",
+      "integrity": "sha512-Q6/nZLe6jxuU80qb/4uJ4t5v2VEZ44lzQjPDhYJNztRQ4wyWc6VF3D3Kb/fAuPetZQnhS3hnajCf9CsWesghLQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "zod": "^3.25.0 || ^4.0.0"
+      }
+    }
+  }
+}
diff --git a/web_slearn/package.json b/web_slearn/package.json
new file mode 100644
index 0000000..41077d8
--- /dev/null
+++ b/web_slearn/package.json
@@ -0,0 +1,29 @@
+{
+  "name": "web_slearn",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "papaparse": "^5.7.0",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
+    "react-router-dom": "^7.18.4"
+  },
+  "devDependencies": {
+    "@eslint/js": "^10.0.1",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.7",
+    "@vitejs/plugin-react": "^6.1.1",
+    "eslint": "^10.10.0",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "eslint-plugin-react-refresh": "^0.5.6",
+    "globals": "^17.12.0",
+    "vite": "^8.3.0"
+  }
+}
diff --git a/web_slearn/public/favicon.svg b/web_slearn/public/favicon.svg
new file mode 100644
index 0000000..6893eb1
--- /dev/null
+++ b/web_slearn/public/favicon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="46" fill="none" viewBox="0 0 48 46"><path fill="#863bff" d="M25.946 44.938c-.664.845-2.021.375-2.021-.698V33.937a2.26 2.26 0 0 0-2.262-2.262H10.287c-.92 0-1.456-1.04-.92-1.788l7.48-10.471c1.07-1.497 0-3.578-1.842-3.578H1.237c-.92 0-1.456-1.04-.92-1.788L10.013.474c.214-.297.556-.474.92-.474h28.894c.92 0 1.456 1.04.92 1.788l-7.48 10.471c-1.07 1.498 0 3.579 1.842 3.579h11.377c.943 0 1.473 1.088.89 1.83L25.947 44.94z" style="fill:#863bff;fill:color(display-p3 .5252 .23 1);fill-opacity:1"/><mask id="a" width="48" height="46" x="0" y="0" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path fill="#000" d="M25.842 44.938c-.664.844-2.021.375-2.021-.698V33.937a2.26 2.26 0 0 0-2.262-2.262H10.183c-.92 0-1.456-1.04-.92-1.788l7.48-10.471c1.07-1.498 0-3.579-1.842-3.579H1.133c-.92 0-1.456-1.04-.92-1.787L9.91.473c.214-.297.556-.474.92-.474h28.894c.92 0 1.456 1.04.92 1.788l-7.48 10.471c-1.07 1.498 0 3.578 1.842 3.578h11.377c.943 0 1.473 1.088.89 1.832L25.843 44.94z" style="fill:#000;fill-opacity:1"/></mask><g mask="url(#a)"><g filter="url(#b)"><ellipse cx="5.508" cy="14.704" fill="#ede6ff" rx="5.508" ry="14.704" style="fill:#ede6ff;fill:color(display-p3 .9275 .9033 1);fill-opacity:1" transform="matrix(.00324 1 1 -.00324 -4.47 31.516)"/></g><g filter="url(#c)"><ellipse cx="10.399" cy="29.851" fill="#ede6ff" rx="10.399" ry="29.851" style="fill:#ede6ff;fill:color(display-p3 .9275 .9033 1);fill-opacity:1" transform="matrix(.00324 1 1 -.00324 -39.328 7.883)"/></g><g filter="url(#d)"><ellipse cx="5.508" cy="30.487" fill="#7e14ff" rx="5.508" ry="30.487" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.814 -25.913 -14.639)scale(1 -1)"/></g><g filter="url(#e)"><ellipse cx="5.508" cy="30.599" fill="#7e14ff" rx="5.508" ry="30.599" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.814 -32.644 -3.334)scale(1 -1)"/></g><g filter="url(#f)"><ellipse cx="5.508" cy="30.599" fill="#7e14ff" rx="5.508" ry="30.599" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="matrix(.00324 1 1 -.00324 -34.34 30.47)"/></g><g filter="url(#g)"><ellipse cx="14.072" cy="22.078" fill="#ede6ff" rx="14.072" ry="22.078" style="fill:#ede6ff;fill:color(display-p3 .9275 .9033 1);fill-opacity:1" transform="rotate(93.35 24.506 48.493)scale(-1 1)"/></g><g filter="url(#h)"><ellipse cx="3.47" cy="21.501" fill="#7e14ff" rx="3.47" ry="21.501" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.009 28.708 47.59)scale(-1 1)"/></g><g filter="url(#i)"><ellipse cx="3.47" cy="21.501" fill="#7e14ff" rx="3.47" ry="21.501" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.009 28.708 47.59)scale(-1 1)"/></g><g filter="url(#j)"><ellipse cx=".387" cy="8.972" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(39.51 .387 8.972)"/></g><g filter="url(#k)"><ellipse cx="47.523" cy="-6.092" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 47.523 -6.092)"/></g><g filter="url(#l)"><ellipse cx="41.412" cy="6.333" fill="#47bfff" rx="5.971" ry="9.665" style="fill:#47bfff;fill:color(display-p3 .2799 .748 1);fill-opacity:1" transform="rotate(37.892 41.412 6.333)"/></g><g filter="url(#m)"><ellipse cx="-1.879" cy="38.332" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 -1.88 38.332)"/></g><g filter="url(#n)"><ellipse cx="-1.879" cy="38.332" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 -1.88 38.332)"/></g><g filter="url(#o)"><ellipse cx="35.651" cy="29.907" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 35.651 29.907)"/></g><g filter="url(#p)"><ellipse cx="38.418" cy="32.4" fill="#47bfff" rx="5.971" ry="15.297" style="fill:#47bfff;fill:color(display-p3 .2799 .748 1);fill-opacity:1" transform="rotate(37.892 38.418 32.4)"/></g></g><defs><filter id="b" width="60.045" height="41.654" x="-19.77" y="16.149" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="7.659"/></filter><filter id="c" width="90.34" height="51.437" x="-54.613" y="-7.533" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="7.659"/></filter><filter id="d" width="79.355" height="29.4" x="-49.64" y="2.03" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="e" width="79.579" height="29.4" x="-45.045" y="20.029" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="f" width="79.579" height="29.4" x="-43.513" y="21.178" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="g" width="74.749" height="58.852" x="15.756" y="-17.901" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="7.659"/></filter><filter id="h" width="61.377" height="25.362" x="23.548" y="2.284" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="i" width="61.377" height="25.362" x="23.548" y="2.284" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="j" width="56.045" height="63.649" x="-27.636" y="-22.853" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="k" width="54.814" height="64.646" x="20.116" y="-38.415" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="l" width="33.541" height="35.313" x="24.641" y="-11.323" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="m" width="54.814" height="64.646" x="-29.286" y="6.009" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="n" width="54.814" height="64.646" x="-29.286" y="6.009" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="o" width="54.814" height="64.646" x="8.244" y="-2.416" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="p" width="39.409" height="43.623" x="18.713" y="10.588" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter></defs></svg>
\ No newline at end of file
diff --git a/web_slearn/public/icons.svg b/web_slearn/public/icons.svg
new file mode 100644
index 0000000..e952219
--- /dev/null
+++ b/web_slearn/public/icons.svg
@@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+  <symbol id="bluesky-icon" viewBox="0 0 16 17">
+    <g clip-path="url(#bluesky-clip)"><path fill="#08060d" d="M7.75 7.735c-.693-1.348-2.58-3.86-4.334-5.097-1.68-1.187-2.32-.981-2.74-.79C.188 2.065.1 2.812.1 3.251s.241 3.602.398 4.13c.52 1.744 2.367 2.333 4.07 2.145-2.495.37-4.71 1.278-1.805 4.512 3.196 3.309 4.38-.71 4.987-2.746.608 2.036 1.307 5.91 4.93 2.746 2.72-2.746.747-4.143-1.747-4.512 1.702.189 3.55-.4 4.07-2.145.156-.528.397-3.691.397-4.13s-.088-1.186-.575-1.406c-.42-.19-1.06-.395-2.741.79-1.755 1.24-3.64 3.752-4.334 5.099"/></g>
+    <defs><clipPath id="bluesky-clip"><path fill="#fff" d="M.1.85h15.3v15.3H.1z"/></clipPath></defs>
+  </symbol>
+  <symbol id="discord-icon" viewBox="0 0 20 19">
+    <path fill="#08060d" d="M16.224 3.768a14.5 14.5 0 0 0-3.67-1.153c-.158.286-.343.67-.47.976a13.5 13.5 0 0 0-4.067 0c-.128-.306-.317-.69-.476-.976A14.4 14.4 0 0 0 3.868 3.77C1.546 7.28.916 10.703 1.231 14.077a14.7 14.7 0 0 0 4.5 2.306q.545-.748.965-1.587a9.5 9.5 0 0 1-1.518-.74q.191-.14.372-.293c2.927 1.369 6.107 1.369 8.999 0q.183.152.372.294-.723.437-1.52.74.418.838.963 1.588a14.6 14.6 0 0 0 4.504-2.308c.37-3.911-.63-7.302-2.644-10.309m-9.13 8.234c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.894 0 1.614.82 1.599 1.82.001 1-.705 1.82-1.6 1.82m5.91 0c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.893 0 1.614.82 1.599 1.82 0 1-.706 1.82-1.6 1.82"/>
+  </symbol>
+  <symbol id="documentation-icon" viewBox="0 0 21 20">
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="m15.5 13.333 1.533 1.322c.645.555.967.833.967 1.178s-.322.623-.967 1.179L15.5 18.333m-3.333-5-1.534 1.322c-.644.555-.966.833-.966 1.178s.322.623.966 1.179l1.534 1.321"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M17.167 10.836v-4.32c0-1.41 0-2.117-.224-2.68-.359-.906-1.118-1.621-2.08-1.96-.599-.21-1.349-.21-2.848-.21-2.623 0-3.935 0-4.983.369-1.684.591-3.013 1.842-3.641 3.428C3 6.449 3 7.684 3 10.154v2.122c0 2.558 0 3.838.706 4.726q.306.383.713.671c.76.536 1.79.64 3.581.66"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M3 10a2.78 2.78 0 0 1 2.778-2.778c.555 0 1.209.097 1.748-.047.48-.129.854-.503.982-.982.145-.54.048-1.194.048-1.749a2.78 2.78 0 0 1 2.777-2.777"/>
+  </symbol>
+  <symbol id="github-icon" viewBox="0 0 19 19">
+    <path fill="#08060d" fill-rule="evenodd" d="M9.356 1.85C5.05 1.85 1.57 5.356 1.57 9.694a7.84 7.84 0 0 0 5.324 7.44c.387.079.528-.168.528-.376 0-.182-.013-.805-.013-1.454-2.165.467-2.616-.935-2.616-.935-.349-.91-.864-1.143-.864-1.143-.71-.48.051-.48.051-.48.787.051 1.2.805 1.2.805.695 1.194 1.817.857 2.268.649.064-.507.27-.857.49-1.052-1.728-.182-3.545-.857-3.545-3.87 0-.857.31-1.558.8-2.104-.078-.195-.349-1 .077-2.078 0 0 .657-.208 2.14.805a7.5 7.5 0 0 1 1.946-.26c.657 0 1.328.092 1.946.26 1.483-1.013 2.14-.805 2.14-.805.426 1.078.155 1.883.078 2.078.502.546.799 1.247.799 2.104 0 3.013-1.818 3.675-3.558 3.87.284.247.528.714.528 1.454 0 1.052-.012 1.896-.012 2.156 0 .208.142.455.528.377a7.84 7.84 0 0 0 5.324-7.441c.013-4.338-3.48-7.844-7.773-7.844" clip-rule="evenodd"/>
+  </symbol>
+  <symbol id="social-icon" viewBox="0 0 20 20">
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M12.5 6.667a4.167 4.167 0 1 0-8.334 0 4.167 4.167 0 0 0 8.334 0"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M2.5 16.667a5.833 5.833 0 0 1 8.75-5.053m3.837.474.513 1.035c.07.144.257.282.414.309l.93.155c.596.1.736.536.307.965l-.723.73a.64.64 0 0 0-.152.531l.207.903c.164.715-.213.991-.84.618l-.872-.52a.63.63 0 0 0-.577 0l-.872.52c-.624.373-1.003.094-.84-.618l.207-.903a.64.64 0 0 0-.152-.532l-.723-.729c-.426-.43-.289-.864.306-.964l.93-.156a.64.64 0 0 0 .412-.31l.513-1.034c.28-.562.735-.562 1.012 0"/>
+  </symbol>
+  <symbol id="x-icon" viewBox="0 0 19 19">
+    <path fill="#08060d" fill-rule="evenodd" d="M1.893 1.98c.052.072 1.245 1.769 2.653 3.77l2.892 4.114c.183.261.333.48.333.486s-.068.089-.152.183l-.522.593-.765.867-3.597 4.087c-.375.426-.734.834-.798.905a1 1 0 0 0-.118.148c0 .01.236.017.664.017h.663l.729-.83c.4-.457.796-.906.879-.999a692 692 0 0 0 1.794-2.038c.034-.037.301-.34.594-.675l.551-.624.345-.392a7 7 0 0 1 .34-.374c.006 0 .93 1.306 2.052 2.903l2.084 2.965.045.063h2.275c1.87 0 2.273-.003 2.266-.021-.008-.02-1.098-1.572-3.894-5.547-2.013-2.862-2.28-3.246-2.273-3.266.008-.019.282-.332 2.085-2.38l2-2.274 1.567-1.782c.022-.028-.016-.03-.65-.03h-.674l-.3.342a871 871 0 0 1-1.782 2.025c-.067.075-.405.458-.75.852a100 100 0 0 1-.803.91c-.148.172-.299.344-.99 1.127-.304.343-.32.358-.345.327-.015-.019-.904-1.282-1.976-2.808L6.365 1.85H1.8zm1.782.91 8.078 11.294c.772 1.08 1.413 1.973 1.425 1.984.016.017.241.02 1.05.017l1.03-.004-2.694-3.766L7.796 5.75 5.722 2.852l-1.039-.004-1.039-.004z" clip-rule="evenodd"/>
+  </symbol>
+</svg>
diff --git a/web_slearn/src/App.css b/web_slearn/src/App.css
new file mode 100644
index 0000000..f90339d
--- /dev/null
+++ b/web_slearn/src/App.css
@@ -0,0 +1,184 @@
+.counter {
+  font-size: 16px;
+  padding: 5px 10px;
+  border-radius: 5px;
+  color: var(--accent);
+  background: var(--accent-bg);
+  border: 2px solid transparent;
+  transition: border-color 0.3s;
+  margin-bottom: 24px;
+
+  &:hover {
+    border-color: var(--accent-border);
+  }
+  &:focus-visible {
+    outline: 2px solid var(--accent);
+    outline-offset: 2px;
+  }
+}
+
+.hero {
+  position: relative;
+
+  .base,
+  .framework,
+  .vite {
+    inset-inline: 0;
+    margin: 0 auto;
+  }
+
+  .base {
+    width: 170px;
+    position: relative;
+    z-index: 0;
+  }
+
+  .framework,
+  .vite {
+    position: absolute;
+  }
+
+  .framework {
+    z-index: 1;
+    top: 34px;
+    height: 28px;
+    transform: perspective(2000px) rotateZ(300deg) rotateX(44deg) rotateY(39deg)
+      scale(1.4);
+  }
+
+  .vite {
+    z-index: 0;
+    top: 107px;
+    height: 26px;
+    width: auto;
+    transform: perspective(2000px) rotateZ(300deg) rotateX(40deg) rotateY(39deg)
+      scale(0.8);
+  }
+}
+
+#center {
+  display: flex;
+  flex-direction: column;
+  gap: 25px;
+  place-content: center;
+  place-items: center;
+  flex-grow: 1;
+
+  @media (max-width: 1024px) {
+    padding: 32px 20px 24px;
+    gap: 18px;
+  }
+}
+
+#next-steps {
+  display: flex;
+  border-top: 1px solid var(--border);
+  text-align: left;
+
+  & > div {
+    flex: 1 1 0;
+    padding: 32px;
+    @media (max-width: 1024px) {
+      padding: 24px 20px;
+    }
+  }
+
+  .icon {
+    margin-bottom: 16px;
+    width: 22px;
+    height: 22px;
+  }
+
+  @media (max-width: 1024px) {
+    flex-direction: column;
+    text-align: center;
+  }
+}
+
+#docs {
+  border-right: 1px solid var(--border);
+
+  @media (max-width: 1024px) {
+    border-right: none;
+    border-bottom: 1px solid var(--border);
+  }
+}
+
+#next-steps ul {
+  list-style: none;
+  padding: 0;
+  display: flex;
+  gap: 8px;
+  margin: 32px 0 0;
+
+  .logo {
+    height: 18px;
+  }
+
+  a {
+    color: var(--text-h);
+    font-size: 16px;
+    border-radius: 6px;
+    background: var(--social-bg);
+    display: flex;
+    padding: 6px 12px;
+    align-items: center;
+    gap: 8px;
+    text-decoration: none;
+    transition: box-shadow 0.3s;
+
+    &:hover {
+      box-shadow: var(--shadow);
+    }
+    .button-icon {
+      height: 18px;
+      width: 18px;
+    }
+  }
+
+  @media (max-width: 1024px) {
+    margin-top: 20px;
+    flex-wrap: wrap;
+    justify-content: center;
+
+    li {
+      flex: 1 1 calc(50% - 8px);
+    }
+
+    a {
+      width: 100%;
+      justify-content: center;
+      box-sizing: border-box;
+    }
+  }
+}
+
+#spacer {
+  height: 88px;
+  border-top: 1px solid var(--border);
+  @media (max-width: 1024px) {
+    height: 48px;
+  }
+}
+
+.ticks {
+  position: relative;
+  width: 100%;
+
+  &::before,
+  &::after {
+    content: '';
+    position: absolute;
+    top: -4.5px;
+    border: 5px solid transparent;
+  }
+
+  &::before {
+    left: 0;
+    border-left-color: var(--border);
+  }
+  &::after {
+    right: 0;
+    border-right-color: var(--border);
+  }
+}
diff --git a/web_slearn/src/App.jsx b/web_slearn/src/App.jsx
new file mode 100644
index 0000000..8480d29
--- /dev/null
+++ b/web_slearn/src/App.jsx
@@ -0,0 +1,27 @@
+import { Routes, Route } from "react-router-dom";
+import MainLayout from "./layouts/MainLayout";
+import Dashboard from "./pages/Dashboard";
+import AnalisisCSV from "./pages/AnalisisCSV";
+import HasilAnalisis from "./pages/HasilAnalisis";
+import PrediksiUlasan from "./pages/PrediksiUlasan";
+import RiwayatAnalisis from "./pages/RiwayatAnalisis";
+import PenelitianModel from "./pages/PenelitianModel";
+import RiwayatModel from "./pages/RiwayatModel";
+
+function App() {
+  return (
+    <Routes>
+      <Route element={<MainLayout />}>
+        <Route path="/" element={<Dashboard />} />
+        <Route path="/analisis-csv" element={<AnalisisCSV />} />
+        <Route path="/hasil-analisis/:batchId" element={<HasilAnalisis />} />
+        <Route path="/prediksi" element={<PrediksiUlasan />} />
+        <Route path="/riwayat" element={<RiwayatAnalisis />} />
+        <Route path="/penelitian-model" element={<PenelitianModel />} />
+        <Route path="/riwayat-model" element={<RiwayatModel />} />
+      </Route>
+    </Routes>
+  );
+}
+
+export default App;
diff --git a/web_slearn/src/assets/hero.png b/web_slearn/src/assets/hero.png
new file mode 100644
index 0000000..02251f4
Binary files /dev/null and b/web_slearn/src/assets/hero.png differ
diff --git a/web_slearn/src/assets/react.svg b/web_slearn/src/assets/react.svg
new file mode 100644
index 0000000..6c87de9
--- /dev/null
+++ b/web_slearn/src/assets/react.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
\ No newline at end of file
diff --git a/web_slearn/src/assets/vite.svg b/web_slearn/src/assets/vite.svg
new file mode 100644
index 0000000..5101b67
--- /dev/null
+++ b/web_slearn/src/assets/vite.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="77" height="47" fill="none" aria-labelledby="vite-logo-title" viewBox="0 0 77 47"><title id="vite-logo-title">Vite</title><style>.parenthesis{fill:#000}@media (prefers-color-scheme:dark){.parenthesis{fill:#fff}}</style><path fill="#9135ff" d="M40.151 45.71c-.663.844-2.02.374-2.02-.699V34.708a2.26 2.26 0 0 0-2.262-2.262H24.493c-.92 0-1.457-1.04-.92-1.788l7.479-10.471c1.07-1.498 0-3.578-1.842-3.578H15.443c-.92 0-1.456-1.04-.92-1.788l9.696-13.576c.213-.297.556-.474.92-.474h28.894c.92 0 1.456 1.04.92 1.788l-7.48 10.472c-1.07 1.497 0 3.578 1.842 3.578h11.376c.944 0 1.474 1.087.89 1.83L40.153 45.712z"/><mask id="a" width="48" height="47" x="14" y="0" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path fill="#000" d="M40.047 45.71c-.663.843-2.02.374-2.02-.699V34.708a2.26 2.26 0 0 0-2.262-2.262H24.389c-.92 0-1.457-1.04-.92-1.788l7.479-10.472c1.07-1.497 0-3.578-1.842-3.578H15.34c-.92 0-1.456-1.04-.92-1.788l9.696-13.575c.213-.297.556-.474.92-.474H53.93c.92 0 1.456 1.04.92 1.788L47.37 13.03c-1.07 1.498 0 3.578 1.842 3.578h11.376c.944 0 1.474 1.088.89 1.831L40.049 45.712z"/></mask><g mask="url(#a)"><g filter="url(#b)"><ellipse cx="5.508" cy="14.704" fill="#eee6ff" rx="5.508" ry="14.704" transform="rotate(269.814 20.96 11.29)scale(-1 1)"/></g><g filter="url(#c)"><ellipse cx="10.399" cy="29.851" fill="#eee6ff" rx="10.399" ry="29.851" transform="rotate(89.814 -16.902 -8.275)scale(1 -1)"/></g><g filter="url(#d)"><ellipse cx="5.508" cy="30.487" fill="#8900ff" rx="5.508" ry="30.487" transform="rotate(89.814 -19.197 -7.127)scale(1 -1)"/></g><g filter="url(#e)"><ellipse cx="5.508" cy="30.599" fill="#8900ff" rx="5.508" ry="30.599" transform="rotate(89.814 -25.928 4.177)scale(1 -1)"/></g><g filter="url(#f)"><ellipse cx="5.508" cy="30.599" fill="#8900ff" rx="5.508" ry="30.599" transform="rotate(89.814 -25.738 5.52)scale(1 -1)"/></g><g filter="url(#g)"><ellipse cx="14.072" cy="22.078" fill="#eee6ff" rx="14.072" ry="22.078" transform="rotate(93.35 31.245 55.578)scale(-1 1)"/></g><g filter="url(#h)"><ellipse cx="3.47" cy="21.501" fill="#8900ff" rx="3.47" ry="21.501" transform="rotate(89.009 35.419 55.202)scale(-1 1)"/></g><g filter="url(#i)"><ellipse cx="3.47" cy="21.501" fill="#8900ff" rx="3.47" ry="21.501" transform="rotate(89.009 35.419 55.202)scale(-1 1)"/></g><g filter="url(#j)"><ellipse cx="14.592" cy="9.743" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(39.51 14.592 9.743)"/></g><g filter="url(#k)"><ellipse cx="61.728" cy="-5.321" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(37.892 61.728 -5.32)"/></g><g filter="url(#l)"><ellipse cx="55.618" cy="7.104" fill="#00c2ff" rx="5.971" ry="9.665" transform="rotate(37.892 55.618 7.104)"/></g><g filter="url(#m)"><ellipse cx="12.326" cy="39.103" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(37.892 12.326 39.103)"/></g><g filter="url(#n)"><ellipse cx="12.326" cy="39.103" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(37.892 12.326 39.103)"/></g><g filter="url(#o)"><ellipse cx="49.857" cy="30.678" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(37.892 49.857 30.678)"/></g><g filter="url(#p)"><ellipse cx="52.623" cy="33.171" fill="#00c2ff" rx="5.971" ry="15.297" transform="rotate(37.892 52.623 33.17)"/></g></g><path d="M6.919 0c-9.198 13.166-9.252 33.575 0 46.789h6.215c-9.25-13.214-9.196-33.623 0-46.789zm62.424 0h-6.215c9.198 13.166 9.252 33.575 0 46.789h6.215c9.25-13.214 9.196-33.623 0-46.789" class="parenthesis"/><defs><filter id="b" width="60.045" height="41.654" x="-5.564" y="16.92" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="7.659"/></filter><filter id="c" width="90.34" height="51.437" x="-40.407" y="-6.762" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="7.659"/></filter><filter id="d" width="79.355" height="29.4" x="-35.435" y="2.801" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="e" width="79.579" height="29.4" x="-30.84" y="20.8" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="f" width="79.579" height="29.4" x="-29.307" y="21.949" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="g" width="74.749" height="58.852" x="29.961" y="-17.13" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="7.659"/></filter><filter id="h" width="61.377" height="25.362" x="37.754" y="3.055" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="i" width="61.377" height="25.362" x="37.754" y="3.055" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="j" width="56.045" height="63.649" x="-13.43" y="-22.082" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="k" width="54.814" height="64.646" x="34.321" y="-37.644" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="l" width="33.541" height="35.313" x="38.847" y="-10.552" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="m" width="54.814" height="64.646" x="-15.081" y="6.78" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="n" width="54.814" height="64.646" x="-15.081" y="6.78" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="o" width="54.814" height="64.646" x="22.45" y="-1.645" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="p" width="39.409" height="43.623" x="32.919" y="11.36" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter></defs></svg>
diff --git a/web_slearn/src/components/EvaluasiPembanding.jsx b/web_slearn/src/components/EvaluasiPembanding.jsx
new file mode 100644
index 0000000..7575fcb
--- /dev/null
+++ b/web_slearn/src/components/EvaluasiPembanding.jsx
@@ -0,0 +1,89 @@
+import { useRef, useState } from 'react';
+import data from '../data/pengujian-pembanding.json';
+import '../styles/evaluasi-pembanding.css';
+
+const pct = (v) => new Intl.NumberFormat('id-ID', {style:'percent', minimumFractionDigits:2, maximumFractionDigits:2}).format(v);
+function evaluate(rows) {
+  const cm = [[0,0],[0,0]];
+  rows.forEach(r => { cm[r.label_acuan][r.label_prediksi]++; });
+  const n = rows.length;
+  const classes = [0,1].map(k => {
+    const tp = cm[k][k], support = cm[k][0]+cm[k][1], predicted = cm[0][k]+cm[1][k];
+    const precision = predicted ? tp/predicted : 0, recall = support ? tp/support : 0;
+    return {precision, recall, f1: precision+recall ? 2*precision*recall/(precision+recall) : 0, support};
+  });
+  return {cm, classes, n, correct:cm[0][0]+cm[1][1], accuracy:(cm[0][0]+cm[1][1])/n};
+}
+const result = evaluate(data.rows);
+const initial = {accuracy:(data.initialMatrix[0][0]+data.initialMatrix[1][1])/data.initialMatrix.flat().reduce((a,b)=>a+b,0)};
+const cells = [
+  {x:260,y:170,value:result.cm[0][0],label:'TN',correct:true},
+  {x:500,y:170,value:result.cm[0][1],label:'FP',correct:false},
+  {x:260,y:350,value:result.cm[1][0],label:'FN',correct:false},
+  {x:500,y:350,value:result.cm[1][1],label:'TP',correct:true},
+];
+function download(blob, name) {
+  const url = URL.createObjectURL(blob), a = document.createElement('a');
+  a.href=url; a.download=name; a.click(); setTimeout(()=>URL.revokeObjectURL(url), 1000);
+}
+
+export default function EvaluasiPembanding() {
+  const svgRef = useRef(null);
+  const [busy,setBusy] = useState(false), [error,setError] = useState('');
+  async function savePNG() {
+    setBusy(true); setError(''); let url;
+    try {
+      const source = new XMLSerializer().serializeToString(svgRef.current);
+      url = URL.createObjectURL(new Blob([source],{type:'image/svg+xml;charset=utf-8'}));
+      const img = new Image();
+      await new Promise((resolve,reject)=>{img.onload=resolve;img.onerror=()=>reject(new Error('Gambar gagal dibuat. Silakan coba lagi.'));img.src=url;});
+      const canvas = document.createElement('canvas'); canvas.width=2700; canvas.height=1680;
+      const ctx=canvas.getContext('2d'); if(!ctx) throw new Error('Browser tidak mendukung ekspor gambar.');
+      ctx.drawImage(img,0,0,2700,1680);
+      const blob=await new Promise(resolve=>canvas.toBlob(resolve,'image/png'));
+      if(!blob) throw new Error('Unduhan gambar gagal dibuat.');
+      download(blob,'confusion_matrix_pembanding_v1.png');
+    } catch(e) {setError(e.message);} finally {if(url) URL.revokeObjectURL(url);setBusy(false);}
+  }
+  function saveCSV() {
+    const headers=['id','ulasan','label_acuan','label_prediksi','model_version','prediction_id','kondisi'];
+    const quote=v=>'"'+String(v??'').replaceAll('"','""')+'"';
+    const csv=[headers.join(','),...data.rows.map(r=>headers.map(h=>quote(r[h])).join(','))].join('\r\n');
+    download(new Blob(['\uFEFF'+csv],{type:'text/csv;charset=utf-8'}),'hasil_115_pengujian_pembanding.csv');
+  }
+  return <div className="comparison-eval">
+    <section className="research-card">
+      <div className="comparison-heading"><div><span className="comparison-eyebrow">PENGUJIAN TAMBAHAN · MODEL v1</span><h2>Pengujian Pembanding</h2></div><span className="comparison-tag">115 ulasan baru</span></div>
+      <p>Hasil tersimpan dari fitur Prediksi Satu Ulasan. Model awal tetap dilatih dengan 456 ulasan; pengujian ini tidak melakukan training ulang.</p>
+      <p className="comparison-note">Data pembanding berupa ulasan sintetis dengan label acuan usulan AI. Hasil ini terpisah dari evaluasi penelitian awal dan belum menggunakan label hasil validasi independen manusia.</p>
+      <div className="comparison-stats">
+        <div><span>Akurasi awal</span><strong>{pct(initial.accuracy)}</strong><small>115 data uji penelitian</small></div>
+        <div><span>Akurasi pembanding</span><strong>{pct(result.accuracy)}</strong><small>115 ulasan sintetis baru</small></div>
+        <div><span>Sesuai label acuan</span><strong>{result.correct} / {result.n}</strong><small>{result.n-result.correct} prediksi berbeda</small></div>
+      </div>
+    </section>
+    <section className="research-card">
+      <div className="comparison-heading"><div><h2>Confusion Matrix</h2><p>Baris menunjukkan label acuan; kolom menunjukkan hasil prediksi.</p></div><button type="button" className="comparison-button" disabled={busy} onClick={savePNG}>{busy?'Menyiapkan gambar…':'Unduh gambar PNG'}</button></div>
+      {error && <p role="alert">{error}</p>}
+      <svg ref={svgRef} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 560" width="900" height="560" className="comparison-matrix" role="img" aria-labelledby="comparison-matrix-title comparison-matrix-desc">
+        <title id="comparison-matrix-title">Confusion Matrix Pengujian Pembanding</title>
+        <desc id="comparison-matrix-desc">Model v1. TN 73, FP 3, FN 10, TP 29. Akurasi 88,70 persen pada 115 ulasan sintetis.</desc>
+        <rect width="900" height="640" fill="#ffffff"/>
+        <g fontFamily="Arial, sans-serif" fill="#172b4d">
+          <text x="450" y="45" textAnchor="middle" fontSize="26" fontWeight="700">Confusion Matrix Pengujian Pembanding</text>
+          <text x="450" y="78" textAnchor="middle" fontSize="18">Model v1 · 115 ulasan baru · Akurasi {pct(result.accuracy)}</text>
+          <text x="500" y="120" textAnchor="middle" fontSize="20" fontWeight="700">Hasil prediksi</text>
+          <text x="380" y="153" textAnchor="middle" fontSize="18">Negatif (0)</text>
+          <text x="620" y="153" textAnchor="middle" fontSize="18">Positif (1)</text>
+          <text x="60" y="350" transform="rotate(-90 60 350)" textAnchor="middle" fontSize="20" fontWeight="700">Label acuan</text>
+          <text x="235" y="267" textAnchor="end" fontSize="18">Negatif (0)</text>
+          <text x="235" y="447" textAnchor="end" fontSize="18">Positif (1)</text>
+          {cells.map(c=><g key={c.label}><rect x={c.x} y={c.y} width="240" height="180" fill={c.correct?'#2454a6':'#edf2fa'} stroke="#ffffff" strokeWidth="3"/><text x={c.x+120} y={c.y+87} textAnchor="middle" fontSize="52" fontWeight="700" fill={c.correct?'#ffffff':'#172b4d'}>{c.value}</text><text x={c.x+120} y={c.y+127} textAnchor="middle" fontSize="21" fill={c.correct?'#ffffff':'#172b4d'}>{c.label}</text></g>)}
+        </g>
+      </svg>
+    </section>
+    <section className="research-card"><h2>Metrik per kelas</h2><div className="comparison-scroll"><table><thead><tr><th>Kelas</th><th>Precision</th><th>Recall</th><th>F1-score</th><th>Jumlah</th></tr></thead><tbody>{result.classes.map((c,k)=><tr key={k}><th>{k===0?'Negatif':'Positif'}</th><td>{pct(c.precision)}</td><td>{pct(c.recall)}</td><td>{pct(c.f1)}</td><td>{c.support}</td></tr>)}</tbody></table></div><p>Akurasi = (TN + TP) / seluruh ulasan = (73 + 29) / 115 = {pct(result.accuracy)}.</p></section>
+    <section className="research-card"><h2>Perbandingan dengan pengujian awal</h2><div className="comparison-scroll"><table><thead><tr><th>Komponen</th><th>Awal penelitian</th><th>Pengujian pembanding</th></tr></thead><tbody><tr><th>Model</th><td>v1</td><td>v1 yang sama</td></tr><tr><th>Jumlah data uji</th><td>115</td><td>115 ulasan baru</td></tr><tr><th>TN / FP / FN / TP</th><td>70 / 6 / 2 / 37</td><td>73 / 3 / 10 / 29</td></tr><tr><th>Akurasi</th><td>{pct(initial.accuracy)}</td><td>{pct(result.accuracy)}</td></tr></tbody></table></div><p>Selisih {new Intl.NumberFormat('id-ID',{maximumFractionDigits:2}).format((initial.accuracy-result.accuracy)*100)} poin persentase dihitung sebelum pembulatan. Kedua pengujian memakai kumpulan data berbeda; hasil pembanding tidak menggantikan hasil awal.</p></section>
+    <section className="research-card"><div className="comparison-heading"><div><h2>Hasil 115 ulasan</h2><p>Arsip pengujian model v1. Prediksi baru di web tidak otomatis mengubah evaluasi ini.</p></div><button type="button" className="comparison-button" onClick={saveCSV}>Unduh hasil CSV</button></div><details><summary>Lihat 13 prediksi yang berbeda</summary><div className="comparison-scroll"><table><thead><tr><th>ID</th><th>Ulasan</th><th>Acuan</th><th>Prediksi</th></tr></thead><tbody>{data.rows.filter(r=>r.label_acuan!==r.label_prediksi).map(r=><tr key={r.id}><td>{r.id}</td><td>{r.ulasan}</td><td>{r.label_acuan===0?'Negatif':'Positif'}</td><td>{r.label_prediksi===0?'Negatif':'Positif'}</td></tr>)}</tbody></table></div></details></section>
+  </div>;
+}
diff --git a/web_slearn/src/components/EvaluasiPembanding.jsx.backup-20261028-180124-636 b/web_slearn/src/components/EvaluasiPembanding.jsx.backup-20261028-180124-636
new file mode 100644
index 0000000..ace1f3f
--- /dev/null
+++ b/web_slearn/src/components/EvaluasiPembanding.jsx.backup-20261028-180124-636
@@ -0,0 +1,91 @@
+import { useRef, useState } from 'react';
+import data from '../data/pengujian-pembanding.json';
+import '../styles/evaluasi-pembanding.css';
+
+const pct = (v) => new Intl.NumberFormat('id-ID', {style:'percent', minimumFractionDigits:2, maximumFractionDigits:2}).format(v);
+function evaluate(rows) {
+  const cm = [[0,0],[0,0]];
+  rows.forEach(r => { cm[r.label_acuan][r.label_prediksi]++; });
+  const n = rows.length;
+  const classes = [0,1].map(k => {
+    const tp = cm[k][k], support = cm[k][0]+cm[k][1], predicted = cm[0][k]+cm[1][k];
+    const precision = predicted ? tp/predicted : 0, recall = support ? tp/support : 0;
+    return {precision, recall, f1: precision+recall ? 2*precision*recall/(precision+recall) : 0, support};
+  });
+  return {cm, classes, n, correct:cm[0][0]+cm[1][1], accuracy:(cm[0][0]+cm[1][1])/n};
+}
+const result = evaluate(data.rows);
+const initial = {accuracy:(data.initialMatrix[0][0]+data.initialMatrix[1][1])/data.initialMatrix.flat().reduce((a,b)=>a+b,0)};
+const cells = [
+  {x:260,y:170,value:result.cm[0][0],label:'TN',correct:true},
+  {x:500,y:170,value:result.cm[0][1],label:'FP',correct:false},
+  {x:260,y:350,value:result.cm[1][0],label:'FN',correct:false},
+  {x:500,y:350,value:result.cm[1][1],label:'TP',correct:true},
+];
+function download(blob, name) {
+  const url = URL.createObjectURL(blob), a = document.createElement('a');
+  a.href=url; a.download=name; a.click(); setTimeout(()=>URL.revokeObjectURL(url), 1000);
+}
+
+export default function EvaluasiPembanding() {
+  const svgRef = useRef(null);
+  const [busy,setBusy] = useState(false), [error,setError] = useState('');
+  async function savePNG() {
+    setBusy(true); setError(''); let url;
+    try {
+      const source = new XMLSerializer().serializeToString(svgRef.current);
+      url = URL.createObjectURL(new Blob([source],{type:'image/svg+xml;charset=utf-8'}));
+      const img = new Image();
+      await new Promise((resolve,reject)=>{img.onload=resolve;img.onerror=()=>reject(new Error('Gambar gagal dibuat. Silakan coba lagi.'));img.src=url;});
+      const canvas = document.createElement('canvas'); canvas.width=2700; canvas.height=1920;
+      const ctx=canvas.getContext('2d'); if(!ctx) throw new Error('Browser tidak mendukung ekspor gambar.');
+      ctx.drawImage(img,0,0,2700,1920);
+      const blob=await new Promise(resolve=>canvas.toBlob(resolve,'image/png'));
+      if(!blob) throw new Error('Unduhan gambar gagal dibuat.');
+      download(blob,'confusion_matrix_pembanding_v1.png');
+    } catch(e) {setError(e.message);} finally {if(url) URL.revokeObjectURL(url);setBusy(false);}
+  }
+  function saveCSV() {
+    const headers=['id','ulasan','label_acuan','label_prediksi','model_version','prediction_id','kondisi'];
+    const quote=v=>'"'+String(v??'').replaceAll('"','""')+'"';
+    const csv=[headers.join(','),...data.rows.map(r=>headers.map(h=>quote(r[h])).join(','))].join('\r\n');
+    download(new Blob(['\uFEFF'+csv],{type:'text/csv;charset=utf-8'}),'hasil_115_pengujian_pembanding.csv');
+  }
+  return <div className="comparison-eval">
+    <section className="research-card">
+      <div className="comparison-heading"><div><span className="comparison-eyebrow">PENGUJIAN TAMBAHAN · MODEL v1</span><h2>Pengujian Pembanding</h2></div><span className="comparison-tag">115 ulasan baru</span></div>
+      <p>Hasil tersimpan dari fitur Prediksi Satu Ulasan. Model awal tetap dilatih dengan 456 ulasan; pengujian ini tidak melakukan training ulang.</p>
+      <p className="comparison-note">Data pembanding berupa ulasan sintetis dengan label acuan usulan AI. Hasil ini terpisah dari evaluasi penelitian awal dan belum menggunakan label hasil validasi independen manusia.</p>
+      <div className="comparison-stats">
+        <div><span>Akurasi awal</span><strong>{pct(initial.accuracy)}</strong><small>115 data uji penelitian</small></div>
+        <div><span>Akurasi pembanding</span><strong>{pct(result.accuracy)}</strong><small>115 ulasan sintetis baru</small></div>
+        <div><span>Sesuai label acuan</span><strong>{result.correct} / {result.n}</strong><small>{result.n-result.correct} prediksi berbeda</small></div>
+      </div>
+    </section>
+    <section className="research-card">
+      <div className="comparison-heading"><div><h2>Confusion Matrix</h2><p>Baris menunjukkan label acuan; kolom menunjukkan hasil prediksi.</p></div><button type="button" className="comparison-button" disabled={busy} onClick={savePNG}>{busy?'Menyiapkan gambar…':'Unduh gambar PNG'}</button></div>
+      {error && <p role="alert">{error}</p>}
+      <svg ref={svgRef} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 640" width="900" height="640" className="comparison-matrix" role="img" aria-labelledby="comparison-matrix-title comparison-matrix-desc">
+        <title id="comparison-matrix-title">Confusion Matrix Pengujian Pembanding</title>
+        <desc id="comparison-matrix-desc">Model v1. TN 73, FP 3, FN 10, TP 29. Akurasi 88,70 persen pada 115 ulasan sintetis.</desc>
+        <rect width="900" height="640" fill="#ffffff"/>
+        <g fontFamily="Arial, sans-serif" fill="#172b4d">
+          <text x="450" y="45" textAnchor="middle" fontSize="26" fontWeight="700">Confusion Matrix Pengujian Pembanding</text>
+          <text x="450" y="78" textAnchor="middle" fontSize="18">Model v1 · 115 ulasan baru · Akurasi {pct(result.accuracy)}</text>
+          <text x="500" y="120" textAnchor="middle" fontSize="20" fontWeight="700">Hasil prediksi</text>
+          <text x="380" y="153" textAnchor="middle" fontSize="18">Negatif (0)</text>
+          <text x="620" y="153" textAnchor="middle" fontSize="18">Positif (1)</text>
+          <text x="60" y="350" transform="rotate(-90 60 350)" textAnchor="middle" fontSize="20" fontWeight="700">Label acuan</text>
+          <text x="235" y="267" textAnchor="end" fontSize="18">Negatif (0)</text>
+          <text x="235" y="447" textAnchor="end" fontSize="18">Positif (1)</text>
+          {cells.map(c=><g key={c.label}><rect x={c.x} y={c.y} width="240" height="180" fill={c.correct?'#2454a6':'#edf2fa'} stroke="#ffffff" strokeWidth="3"/><text x={c.x+120} y={c.y+87} textAnchor="middle" fontSize="52" fontWeight="700" fill={c.correct?'#ffffff':'#172b4d'}>{c.value}</text><text x={c.x+120} y={c.y+127} textAnchor="middle" fontSize="21" fill={c.correct?'#ffffff':'#172b4d'}>{c.label}</text></g>)}
+          <text x="450" y="570" textAnchor="middle" fontSize="17">102 prediksi sesuai label acuan · 13 prediksi berbeda</text>
+          <text x="450" y="605" textAnchor="middle" fontSize="15" fill="#53627a">Data sintetis · Label acuan usulan AI · Evaluasi tambahan</text>
+        </g>
+      </svg>
+    </section>
+    <section className="research-card"><h2>Metrik per kelas</h2><div className="comparison-scroll"><table><thead><tr><th>Kelas</th><th>Precision</th><th>Recall</th><th>F1-score</th><th>Jumlah</th></tr></thead><tbody>{result.classes.map((c,k)=><tr key={k}><th>{k===0?'Negatif':'Positif'}</th><td>{pct(c.precision)}</td><td>{pct(c.recall)}</td><td>{pct(c.f1)}</td><td>{c.support}</td></tr>)}</tbody></table></div><p>Akurasi = (TN + TP) / seluruh ulasan = (73 + 29) / 115 = {pct(result.accuracy)}.</p></section>
+    <section className="research-card"><h2>Perbandingan dengan pengujian awal</h2><div className="comparison-scroll"><table><thead><tr><th>Komponen</th><th>Awal penelitian</th><th>Pengujian pembanding</th></tr></thead><tbody><tr><th>Model</th><td>v1</td><td>v1 yang sama</td></tr><tr><th>Jumlah data uji</th><td>115</td><td>115 ulasan baru</td></tr><tr><th>TN / FP / FN / TP</th><td>70 / 6 / 2 / 37</td><td>73 / 3 / 10 / 29</td></tr><tr><th>Akurasi</th><td>{pct(initial.accuracy)}</td><td>{pct(result.accuracy)}</td></tr></tbody></table></div><p>Selisih {new Intl.NumberFormat('id-ID',{maximumFractionDigits:2}).format((initial.accuracy-result.accuracy)*100)} poin persentase dihitung sebelum pembulatan. Kedua pengujian memakai kumpulan data berbeda; hasil pembanding tidak menggantikan hasil awal.</p></section>
+    <section className="research-card"><div className="comparison-heading"><div><h2>Hasil 115 ulasan</h2><p>Arsip pengujian model v1. Prediksi baru di web tidak otomatis mengubah evaluasi ini.</p></div><button type="button" className="comparison-button" onClick={saveCSV}>Unduh hasil CSV</button></div><details><summary>Lihat 13 prediksi yang berbeda</summary><div className="comparison-scroll"><table><thead><tr><th>ID</th><th>Ulasan</th><th>Acuan</th><th>Prediksi</th></tr></thead><tbody>{data.rows.filter(r=>r.label_acuan!==r.label_prediksi).map(r=><tr key={r.id}><td>{r.id}</td><td>{r.ulasan}</td><td>{r.label_acuan===0?'Negatif':'Positif'}</td><td>{r.label_prediksi===0?'Negatif':'Positif'}</td></tr>)}</tbody></table></div></details></section>
+  </div>;
+}
diff --git a/web_slearn/src/components/ModelContext.jsx b/web_slearn/src/components/ModelContext.jsx
new file mode 100644
index 0000000..a1f8e70
--- /dev/null
+++ b/web_slearn/src/components/ModelContext.jsx
@@ -0,0 +1,6 @@
+export function ModelVersion({ value }) {
+  return <span style={{display:"block", fontSize:13, fontWeight:500, color:"#425b7e", margin:"8px 0"}}>Model saat analisis: <b>{value || "Tidak tercatat"}</b></span>;
+}
+export function TfidfNote() {
+  return <p style={{fontSize:13, color:"#566177", lineHeight:1.6}}>TF-IDF menunjukkan bobot kata dalam ulasan, bukan ukuran langsung pengaruh kata terhadap sentimen positif atau negatif.</p>;
+}
diff --git a/web_slearn/src/components/Sidebar.jsx b/web_slearn/src/components/Sidebar.jsx
new file mode 100644
index 0000000..f8c25e8
--- /dev/null
+++ b/web_slearn/src/components/Sidebar.jsx
@@ -0,0 +1,141 @@
+import {
+  NavLink,
+  useLocation
+} from "react-router-dom";
+
+
+const menus = [
+  {name: "Dashboard", path: "/"},
+  {name: "Prediksi Satu Ulasan", path: "/prediksi"},
+  {name: "Analisis CSV", path: "/analisis-csv"},
+  {name: "Riwayat Analisis", path: "/riwayat"},
+  {name: "Training & Riwayat Model", path: "/riwayat-model"},
+  {name: "Penelitian & Model Awal", path: "/penelitian-model"}
+];
+
+
+function Sidebar() {
+  const location =
+    useLocation();
+
+
+  /* ==========================================================
+     MENENTUKAN MENU AKTIF
+     ========================================================== */
+
+  const isMenuActive =
+    (menuPath) => {
+      const pathname =
+        location.pathname;
+
+
+      if (menuPath === "/") {
+        return pathname === "/";
+      }
+
+
+      /*
+        Halaman detail hasil analisis merupakan
+        bagian dari Riwayat Analisis.
+      */
+
+      if (
+        menuPath === "/riwayat"
+      ) {
+        return (
+          pathname ===
+            "/riwayat" ||
+          pathname.startsWith(
+            "/hasil-analisis/"
+          )
+        );
+      }
+
+
+      return (
+        pathname === menuPath
+      );
+    };
+
+
+  /* ==========================================================
+     TAMPILAN
+     ========================================================== */
+
+  return (
+    <aside className="sidebar">
+
+      {/* ======================================================
+          BRAND
+          ====================================================== */}
+
+      <div className="sidebar-brand">
+
+        <div className="brand-logo">
+          S
+        </div>
+
+        <div>
+          <h2>
+            S-Learn
+          </h2>
+
+          <p>
+            Analisis Sentimen
+          </p>
+        </div>
+
+      </div>
+
+
+      {/* ======================================================
+          NAVIGASI
+          ====================================================== */}
+
+      <nav className="sidebar-menu">
+
+        {menus.map(
+          (menu) => {
+            const aktif =
+              isMenuActive(
+                menu.path
+              );
+
+            return (
+              <NavLink
+                key={
+                  menu.path
+                }
+                to={
+                  menu.path
+                }
+                end={
+                  menu.path === "/"
+                }
+                aria-current={
+                  aktif
+                    ? "page"
+                    : undefined
+                }
+                className={
+                  `sidebar-link ${
+                    aktif
+                      ? "active"
+                      : ""
+                  }`
+                }
+              >
+                {menu.name}
+              </NavLink>
+            );
+          }
+        )}
+
+      </nav>
+
+    </aside>
+  );
+}
+
+
+export default Sidebar;
diff --git a/web_slearn/src/components/TrainingDetails.jsx b/web_slearn/src/components/TrainingDetails.jsx
new file mode 100644
index 0000000..6efb675
--- /dev/null
+++ b/web_slearn/src/components/TrainingDetails.jsx
@@ -0,0 +1,137 @@
+
+const rate = (v) => `${(v * 100).toFixed(2).replace(".", ",")}%`;
+
+export function SkippedRows({ audit, legacy = false, status = "completed" }) {
+  if (!audit) {
+    return legacy
+      ? <p>Rincian baris yang dilewati belum dicatat untuk versi lama ini.</p>
+      : null;
+  }
+
+  return (
+    <div className="models-audit">
+      <p>
+        <b>
+          {audit.uploaded_rows} diunggah → {audit.accepted_rows} diterima →{" "}
+          {audit.skipped_rows.length} dilewati.
+        </b>
+      </p>
+
+      {audit.selected_column && (
+        <p>
+          Kolom yang digunakan: <b>{audit.selected_column}</b>
+        </p>
+      )}
+
+      <p>
+        {status === "completed" && audit.accepted_rows > 0
+          ? `Data latih: ${audit.training_before} sebelum penambahan → ${audit.training_before + audit.accepted_rows} setelah training berhasil.`
+          : `Data latih tetap ${audit.training_before}.`}
+      </p>
+
+      {!!audit.skipped_rows.length && (
+        <details className="models-skipped-details">
+          <summary>
+            Lihat Data yang Dilewati ({audit.skipped_rows.length})
+          </summary>
+
+          <p className="models-skip-note">
+            Nomor baris adalah urutan record CSV, termasuk judul kolom
+            sebagai baris 1. Ulasan dengan baris baru di dalam tanda
+            kutip dihitung satu record.
+          </p>
+
+          <div className="models-table models-skipped-scroll">
+            <table className="models-skipped-table">
+              <thead>
+                <tr>
+                  <th>Baris CSV</th>
+                  <th>Ulasan</th>
+                  <th>Alasan dilewati</th>
+                </tr>
+              </thead>
+
+              <tbody>
+                {audit.skipped_rows.map((r) => (
+                  <tr key={r.source_row_number}>
+                    <td>{r.source_row_number}</td>
+
+                    <td className="models-skipped-text">
+                      {r.text || "(kosong)"}
+                    </td>
+
+                    <td>
+                      <span className="models-skip-reason">
+                        {r.reason}
+                      </span>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </details>
+      )}
+    </div>
+  );
+}
+
+export function VersionComparison({ selected, original }) {
+  if (!original || selected.version === "v1") {
+    return (
+      <p>
+        Model penelitian awal: {selected.jumlah_data_training} data latih
+        dan {selected.jumlah_data_testing} data uji.
+      </p>
+    );
+  }
+
+  const metrics = [
+    ["Akurasi", m => m.akurasi],
+    ["Precision", m => m.classification_report["weighted avg"].precision],
+    ["Recall", m => m.classification_report["weighted avg"].recall],
+    ["F1-Score", m => m.classification_report["weighted avg"]["f1-score"]]
+  ];
+
+  return (
+    <div>
+      <h3>Perbandingan dengan model awal v1</h3>
+
+      <p>
+        {selected.jumlah_data_training} data latih. Evaluasi pada{" "}
+        {selected.jumlah_data_testing} data uji tetap yang sama.
+      </p>
+
+      <div className="models-table">
+        <table>
+          <thead>
+            <tr>
+              <th>Metrik</th>
+              <th>v1</th>
+              <th>{selected.version}</th>
+              <th>Selisih (poin persentase)</th>
+            </tr>
+          </thead>
+
+          <tbody>
+            {metrics.map(([name, get]) => (
+              <tr key={name}>
+                <th>{name}</th>
+                <td>{rate(get(original))}</td>
+                <td>{rate(get(selected))}</td>
+                <td>
+                  {((get(selected) - get(original)) * 100).toFixed(2)}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+
+      <p>
+        Precision, Recall, dan F1-Score menggunakan weighted average,
+        yaitu rata-rata yang memperhitungkan jumlah data pada setiap kelas.
+      </p>
+    </div>
+  );
+}
diff --git a/web_slearn/src/index.css b/web_slearn/src/index.css
new file mode 100644
index 0000000..97ff932
--- /dev/null
+++ b/web_slearn/src/index.css
@@ -0,0 +1,18 @@
+html {
+  font-family: Inter, "Segoe UI", Arial, sans-serif;
+  background: #f5f7fb;
+}
+
+html, body, #root {
+  width: 100%;
+  min-height: 100%;
+  margin: 0;
+}
+
+body {
+  min-width: 320px;
+}
+
+button, input, select, textarea {
+  font: inherit;
+}
\ No newline at end of file
diff --git a/web_slearn/src/layouts/MainLayout.jsx b/web_slearn/src/layouts/MainLayout.jsx
new file mode 100644
index 0000000..a9270fb
--- /dev/null
+++ b/web_slearn/src/layouts/MainLayout.jsx
@@ -0,0 +1,18 @@
+import { Outlet } from "react-router-dom";
+import Sidebar from "../components/Sidebar";
+import "../styles/layout.css";
+
+function MainLayout() {
+  return (
+    <div className="app-layout">
+      <Sidebar />
+      <main className="main-content">
+        <div className="content-wrapper">
+          <Outlet />
+        </div>
+      </main>
+    </div>
+  );
+}
+
+export default MainLayout;
\ No newline at end of file
diff --git a/web_slearn/src/main.jsx b/web_slearn/src/main.jsx
new file mode 100644
index 0000000..466b579
--- /dev/null
+++ b/web_slearn/src/main.jsx
@@ -0,0 +1,13 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { BrowserRouter } from "react-router-dom";
+import App from "./App";
+import "./index.css";
+
+createRoot(document.getElementById("root")).render(
+  <StrictMode>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </StrictMode>
+);
\ No newline at end of file
diff --git a/web_slearn/src/pages/AnalisisCSV.jsx b/web_slearn/src/pages/AnalisisCSV.jsx
new file mode 100644
index 0000000..5c6c15b
--- /dev/null
+++ b/web_slearn/src/pages/AnalisisCSV.jsx
@@ -0,0 +1,917 @@
+
+import { useEffect, useMemo, useRef, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import Papa from "papaparse";
+
+import { analisisCSV, ambilRiwayatModel } from "../services/api";
+import "../styles/analisis-csv.css";
+
+const kandidatKolomUlasan = [
+  "komentar/ulasan mahasiswa terhadap aplikasi s-learn",
+  "komentar",
+  "ulasan",
+  "review",
+  "comment",
+  "teks",
+  "text",
+  "feedback",
+  "kritik",
+  "saran",
+  "pendapat"
+];
+
+const kandidatKolomNonUlasan = [
+  "no",
+  "nomor",
+  "id",
+  "nim",
+  "nama",
+  "nama mahasiswa",
+  "jenis kelamin",
+  "gender",
+  "prodi",
+  "program studi",
+  "semester",
+  "angkatan",
+  "golongan",
+  "tanggal",
+  "timestamp",
+  "email",
+  "telepon",
+  "no hp",
+  "nomor hp"
+];
+
+function normalisasiNamaKolom(nama) {
+  return String(nama || "")
+    .trim()
+    .toLowerCase()
+    .replace(/[_-]+/g, " ")
+    .replace(/\s+/g, " ");
+}
+
+function deteksiKolomUlasan(columns) {
+  const normalized = columns.map((column) => ({
+    original: column,
+    normalized: normalisasiNamaKolom(column)
+  }));
+
+  for (const kandidat of kandidatKolomUlasan) {
+    const target = normalisasiNamaKolom(kandidat);
+
+    const exact = normalized.find(
+      (item) => item.normalized === target
+    );
+
+    if (exact) return exact.original;
+  }
+
+  const sebagian = normalized.find((item) =>
+    [
+      "komentar",
+      "ulasan",
+      "review",
+      "comment",
+      "feedback",
+      "kritik",
+      "saran",
+      "pendapat"
+    ].some((kata) => item.normalized.includes(kata))
+  );
+
+  return sebagian?.original || "";
+}
+
+function formatUkuranFile(size) {
+  const bytes = Number(size || 0);
+
+  if (bytes < 1024) return `${bytes} B`;
+
+  const kb = bytes / 1024;
+
+  if (kb < 1024) {
+    return `${kb.toFixed(1)} KB`;
+  }
+
+  const mb = kb / 1024;
+
+  if (mb < 1024) {
+    return `${mb.toFixed(2)} MB`;
+  }
+
+  return `${(mb / 1024).toFixed(2)} GB`;
+}
+
+function tampakSebagaiAngka(value) {
+  const text = String(value || "").trim();
+
+  if (!text) return false;
+
+  const punyaAngka = /\d/.test(text);
+  const punyaHuruf = /[a-zA-Z]/.test(text);
+
+  return punyaAngka && !punyaHuruf;
+}
+
+function evaluasiKesesuaianKolom(column, rows) {
+  if (!column) {
+    return {
+      cocok: false,
+      jenis: "empty",
+      pesan: "Pilih kolom yang berisi teks ulasan."
+    };
+  }
+
+  const namaKolom = normalisasiNamaKolom(column);
+
+  const values = rows
+    .map((row) => String(row[column] ?? "").trim())
+    .filter(Boolean);
+
+  if (values.length === 0) {
+    return {
+      cocok: false,
+      jenis: "warning",
+      pesan: "Kolom ini tidak memiliki teks yang dapat dianalisis."
+    };
+  }
+
+  const namaTampakUlasan = kandidatKolomUlasan.some((kandidat) => {
+    const target = normalisasiNamaKolom(kandidat);
+
+    return (
+      namaKolom === target ||
+      namaKolom.includes(target)
+    );
+  });
+
+  if (namaTampakUlasan) {
+    return {
+      cocok: true,
+      jenis: "success",
+      pesan: ""
+    };
+  }
+
+  const namaTampakMetadata = kandidatKolomNonUlasan.some(
+    (kandidat) => namaKolom === normalisasiNamaKolom(kandidat)
+  );
+
+  if (namaTampakMetadata) {
+    return {
+      cocok: false,
+      jenis: "warning",
+      pesan: `Kolom "${column}" tampaknya bukan kolom teks ulasan. Pilih kolom yang berisi komentar atau ulasan.`
+    };
+  }
+
+  const jumlahNumerik = values.filter(tampakSebagaiAngka).length;
+
+  const rasioNumerik =
+    values.length > 0
+      ? jumlahNumerik / values.length
+      : 0;
+
+  const rataPanjang =
+    values.reduce(
+      (total, value) => total + value.length,
+      0
+    ) / values.length;
+
+  const rataKata =
+    values.reduce((total, value) => {
+      const jumlahKata = value
+        .split(/\s+/)
+        .filter(Boolean).length;
+
+      return total + jumlahKata;
+    }, 0) / values.length;
+
+  if (rasioNumerik >= 0.5) {
+    return {
+      cocok: false,
+      jenis: "warning",
+      pesan:
+        "Isi kolom ini didominasi angka sehingga tampaknya bukan teks ulasan."
+    };
+  }
+
+  if (rataPanjang < 8 || (rataKata < 2 && rataPanjang < 18)) {
+    return {
+      cocok: false,
+      jenis: "warning",
+      pesan:
+        "Isi kolom ini tampak terlalu pendek untuk digunakan sebagai teks ulasan."
+    };
+  }
+
+  return {
+    cocok: true,
+    jenis: "success",
+    pesan: ""
+  };
+}
+
+function kolomPerluDisamarkan(column) {
+  const nama = normalisasiNamaKolom(column);
+
+  return [
+    "nim",
+    "nama",
+    "nama mahasiswa",
+    "email",
+    "telepon",
+    "no hp",
+    "nomor hp"
+  ].includes(nama);
+}
+
+function samarkanNama(value) {
+  return String(value || "")
+    .trim()
+    .split(/\s+/)
+    .map((kata) => {
+      if (!kata) return "";
+      if (kata.length === 1) return `${kata}•`;
+
+      return `${kata.charAt(0)}${"•".repeat(
+        Math.min(kata.length - 1, 5)
+      )}`;
+    })
+    .join(" ");
+}
+
+function formatPreviewValue(column, value) {
+  const text = String(value ?? "");
+  const nama = normalisasiNamaKolom(column);
+
+  if (!text.trim()) return "-";
+
+  if (nama === "nama" || nama === "nama mahasiswa") {
+    return samarkanNama(text);
+  }
+
+  if (nama === "nim") {
+    const clean = text.trim();
+
+    if (clean.length <= 4) {
+      return "••••";
+    }
+
+    return `${clean.slice(0, 2)}••••${clean.slice(-2)}`;
+  }
+
+  if (
+    nama === "email" ||
+    nama === "telepon" ||
+    nama === "no hp" ||
+    nama === "nomor hp"
+  ) {
+    return "••••••••";
+  }
+
+  return text;
+}
+
+function AnalisisCSV() {
+  const navigate = useNavigate();
+  const fileInputRef = useRef(null);
+  const submitLockRef = useRef(false);
+
+  const [step, setStep] = useState(1);
+  const [file, setFile] = useState(null);
+  const [columns, setColumns] = useState([]);
+  const [rows, setRows] = useState([]);
+  const [selectedColumn, setSelectedColumn] = useState("");
+  const [detectedColumn, setDetectedColumn] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+
+  // ===================================================
+  // TAMBAHAN: INFORMASI VERSI MODEL YANG SEDANG AKTIF
+  // ===================================================
+  const [modelAktif, setModelAktif] = useState(null);
+  const [loadingModel, setLoadingModel] = useState(true);
+
+  useEffect(() => {
+    let mounted = true;
+
+    async function muatModelAktif() {
+      try {
+        const response = await ambilRiwayatModel();
+        const versions = response?.data?.versions || [];
+        const active = versions.find((model) => model.active);
+
+        if (mounted) {
+          setModelAktif(active?.version || null);
+        }
+      } catch (err) {
+        console.error("Gagal mengambil model aktif:", err);
+
+        if (mounted) {
+          setModelAktif(null);
+        }
+      } finally {
+        if (mounted) {
+          setLoadingModel(false);
+        }
+      }
+    }
+
+    muatModelAktif();
+
+    return () => {
+      mounted = false;
+    };
+  }, []);
+
+  // ===================================================
+  // PREVIEW DAN VALIDASI DATA CSV
+  // ===================================================
+  const previewRows = rows.slice(0, 5);
+
+  const jumlahUlasanValid = selectedColumn
+    ? rows.filter((row) => {
+        const value = row[selectedColumn];
+
+        return (
+          value !== undefined &&
+          value !== null &&
+          String(value).trim() !== ""
+        );
+      }).length
+    : 0;
+
+  const jumlahBarisKosong = selectedColumn
+    ? Math.max(0, rows.length - jumlahUlasanValid)
+    : 0;
+
+  const evaluasiKolom = useMemo(
+    () => evaluasiKesesuaianKolom(selectedColumn, rows),
+    [selectedColumn, rows]
+  );
+
+  const adaKolomDisamarkan = useMemo(
+    () => columns.some(kolomPerluDisamarkan),
+    [columns]
+  );
+
+  const pilihFile = () => {
+    fileInputRef.current?.click();
+  };
+
+  // ===================================================
+  // MEMBACA FILE CSV
+  // ===================================================
+  const parseCSV = (selectedFile) => {
+    setError("");
+
+    Papa.parse(selectedFile, {
+      header: true,
+      skipEmptyLines: "greedy",
+      transformHeader: (header) => header.trim(),
+
+      complete: (result) => {
+        const fields = result.meta?.fields || [];
+
+        if (fields.length === 0) {
+          setError(
+            "CSV tidak memiliki header kolom yang dapat dibaca."
+          );
+          return;
+        }
+
+        const headerKosong = fields.some(
+          (field) => !String(field).trim()
+        );
+
+        if (headerKosong) {
+          setError(
+            "CSV memiliki nama kolom yang kosong. Periksa kembali header file."
+          );
+          return;
+        }
+
+        if (result.data.length === 0) {
+          setError(
+            "CSV tidak memiliki data untuk dianalisis."
+          );
+          return;
+        }
+
+        const detected = deteksiKolomUlasan(fields);
+
+        setFile(selectedFile);
+        setColumns(fields);
+        setRows(result.data);
+        setDetectedColumn(detected);
+        setSelectedColumn(detected);
+        setStep(2);
+      },
+
+      error: () => {
+        setError(
+          "File CSV tidak dapat dibaca. Periksa kembali format file."
+        );
+      }
+    });
+  };
+
+  const handleFile = (selectedFile) => {
+    if (!selectedFile) return;
+
+    setError("");
+
+    if (!selectedFile.name.toLowerCase().endsWith(".csv")) {
+      setError("File harus menggunakan format .csv.");
+      return;
+    }
+
+    parseCSV(selectedFile);
+  };
+
+  const handleInputFile = (event) => {
+    handleFile(event.target.files?.[0]);
+  };
+
+  const handleDrop = (event) => {
+    event.preventDefault();
+
+    handleFile(event.dataTransfer.files?.[0]);
+  };
+
+  // ===================================================
+  // PROSES ANALISIS SENTIMEN CSV
+  // ===================================================
+  const mulaiAnalisis = async () => {
+    if (submitLockRef.current || loading) {
+      return;
+    }
+
+    if (!file) {
+      setError(
+        "File CSV belum tersedia. Silakan unggah file terlebih dahulu."
+      );
+      return;
+    }
+
+    if (!selectedColumn) {
+      setError(
+        "Pilih kolom yang berisi ulasan sebelum memulai analisis."
+      );
+      return;
+    }
+
+    if (!evaluasiKolom.cocok) {
+      setError(
+        evaluasiKolom.pesan ||
+          "Kolom yang dipilih tampaknya bukan teks ulasan."
+      );
+      return;
+    }
+
+    const reviews = rows
+      .map((row, index) => ({
+        source_row_number: index + 1,
+        text: String(row[selectedColumn] ?? "").trim()
+      }))
+      .filter((item) => item.text !== "");
+
+    if (reviews.length === 0) {
+      setError(
+        "Kolom yang dipilih tidak memiliki ulasan yang dapat dianalisis."
+      );
+      return;
+    }
+
+    submitLockRef.current = true;
+    setError("");
+    setLoading(true);
+
+    try {
+      const hasil = await analisisCSV(
+        file.name,
+        selectedColumn,
+        reviews
+      );
+
+      if (
+        hasil.status !== "success" ||
+        !hasil.data?.batch_id
+      ) {
+        throw new Error(
+          "Hasil analisis dari server tidak valid."
+        );
+      }
+
+      setStep(3);
+
+      navigate(
+        `/hasil-analisis/${hasil.data.batch_id}`,
+        {
+          state: {
+            hasilAnalisis: hasil.data,
+            sumberHalaman: "analisis-csv",
+            analisisBaruSelesai: true
+          }
+        }
+      );
+    } catch (err) {
+      setError(
+        err.message ||
+          "Terjadi kesalahan saat menganalisis file CSV."
+      );
+    } finally {
+      submitLockRef.current = false;
+      setLoading(false);
+    }
+  };
+
+  // ===================================================
+  // RESET ANALISIS CSV
+  // ===================================================
+  const resetAnalisis = () => {
+    if (loading) return;
+
+    submitLockRef.current = false;
+
+    setStep(1);
+    setFile(null);
+    setColumns([]);
+    setRows([]);
+    setSelectedColumn("");
+    setDetectedColumn("");
+    setLoading(false);
+    setError("");
+
+    if (fileInputRef.current) {
+      fileInputRef.current.value = "";
+    }
+  };
+
+  // ===================================================
+  // TAMPILAN HALAMAN ANALISIS CSV
+  // ===================================================
+  return (
+    <div className="csv-page">
+
+      {/* HEADING DAN INFORMASI MODEL AKTIF */}
+      <div className="csv-heading">
+        <h1>Analisis CSV</h1>
+
+        <p>
+          Unggah file CSV berisi ulasan S-Learn, lalu pilih
+          kolom yang akan dianalisis.
+        </p>
+
+        {/* INFORMASI VERSI MODEL AKTIF */}
+        <div
+          style={{
+            display: "inline-flex",
+            alignItems: "center",
+            flexWrap: "wrap",
+            gap: "9px",
+            marginTop: "16px",
+            padding: "10px 15px",
+            background: "#edf3ff",
+            border: "1px solid #d6e3fb",
+            borderRadius: "9px",
+            color: "#294263",
+            fontSize: "13px"
+          }}
+        >
+          <span
+            style={{
+              width: "8px",
+              height: "8px",
+              borderRadius: "50%",
+              background: "#259b72",
+              flexShrink: 0
+            }}
+          />
+
+          <span>
+            Model yang sedang digunakan:
+          </span>
+
+          <strong
+            style={{
+              color: "#2458c7",
+              fontWeight: 700
+            }}
+          >
+            {loadingModel
+              ? "Memuat..."
+              : modelAktif || "Tidak tersedia"}
+          </strong>
+        </div>
+      </div>
+
+      {/* STEPPER — DIPERTAHANKAN */}
+      <div className="csv-steps">
+        <div
+          className={`csv-step ${
+            step >= 1 ? "active" : ""
+          }`}
+        >
+          <span>1</span>
+          <p>Unggah File</p>
+        </div>
+
+        <div
+          className={`step-line ${
+            step >= 2 ? "active" : ""
+          }`}
+        />
+
+        <div
+          className={`csv-step ${
+            step >= 2 ? "active" : ""
+          }`}
+        >
+          <span>2</span>
+          <p>Periksa Data</p>
+        </div>
+
+        <div
+          className={`step-line ${
+            step >= 3 ? "active" : ""
+          }`}
+        />
+
+        <div
+          className={`csv-step ${
+            step >= 3 ? "active" : ""
+          }`}
+        >
+          <span>3</span>
+          <p>Hasil</p>
+        </div>
+      </div>
+
+      {error && (
+        <div className="csv-error">
+          {error}
+        </div>
+      )}
+
+      {/* STEP 1 — UNGGAH FILE CSV */}
+      {step === 1 && (
+        <section className="csv-card upload-section">
+          <div
+            className="drop-zone"
+            onDragOver={(event) => event.preventDefault()}
+            onDrop={handleDrop}
+          >
+            <div className="upload-icon">
+              ↑
+            </div>
+
+            <h2>Unggah File CSV</h2>
+
+            <p>
+              Pilih file CSV atau tarik file ke area ini
+              untuk memulai analisis.
+            </p>
+
+            <button
+              type="button"
+              className="csv-primary-button"
+              onClick={pilihFile}
+            >
+              Pilih File CSV
+            </button>
+
+            <input
+              ref={fileInputRef}
+              type="file"
+              accept=".csv,text/csv"
+              onChange={handleInputFile}
+              hidden
+            />
+
+            <span>
+              Format .csv · Header wajib tersedia
+            </span>
+          </div>
+        </section>
+      )}
+
+      {/* STEP 2 — PREVIEW DAN PEMILIHAN KOLOM */}
+      {step === 2 && (
+        <>
+          <section className="csv-card csv-file-preview-card">
+            <div className="csv-file-header">
+              <div className="csv-file-main">
+                <h2>{file?.name}</h2>
+
+                <p>
+                  {formatUkuranFile(file?.size)}
+                  <span>·</span>
+                  {rows.length} baris
+                  <span>·</span>
+                  {columns.length} kolom
+                </p>
+              </div>
+
+              <button
+                type="button"
+                className="change-file-button"
+                onClick={resetAnalisis}
+                disabled={loading}
+              >
+                Ganti File
+              </button>
+            </div>
+
+            <div className="csv-preview-header">
+              <h3>5 Baris Pertama</h3>
+
+              {adaKolomDisamarkan && (
+                <p>
+
+                </p>
+              )}
+            </div>
+
+            <div className="table-wrapper">
+              <table className="preview-table">
+                <thead>
+                  <tr>
+                    <th className="preview-index">
+                      #
+                    </th>
+
+                    {columns.map((column) => (
+                      <th
+                        key={column}
+                        className={
+                          selectedColumn === column
+                            ? "selected-column"
+                            : ""
+                        }
+                      >
+                        {column}
+                      </th>
+                    ))}
+                  </tr>
+                </thead>
+
+                <tbody>
+                  {previewRows.map((row, rowIndex) => (
+                    <tr key={rowIndex}>
+                      <td className="preview-index">
+                        {rowIndex + 1}
+                      </td>
+
+                      {columns.map((column) => (
+                        <td
+                          key={`${rowIndex}-${column}`}
+                          className={
+                            selectedColumn === column
+                              ? "selected-column"
+                              : ""
+                          }
+                        >
+                          {formatPreviewValue(
+                            column,
+                            row[column]
+                          )}
+                        </td>
+                      ))}
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </section>
+
+          {/* PILIH KOLOM ULASAN */}
+          <section className="csv-card column-card">
+            <div className="column-selection">
+              <div className="column-description">
+                <div className="column-title-row">
+                  <label htmlFor="kolom-ulasan">
+                    Kolom Ulasan
+                  </label>
+
+                  {detectedColumn &&
+                    selectedColumn === detectedColumn && (
+                      <span className="detected-badge">
+                        Terdeteksi otomatis
+                      </span>
+                    )}
+                </div>
+              </div>
+
+              <select
+                id="kolom-ulasan"
+                value={selectedColumn}
+                disabled={loading}
+                onChange={(event) => {
+                  setSelectedColumn(event.target.value);
+                  setError("");
+                }}
+              >
+                <option value="">
+                  Pilih kolom ulasan
+                </option>
+
+                {columns.map((column) => (
+                  <option
+                    key={column}
+                    value={column}
+                  >
+                    {column}
+                  </option>
+                ))}
+              </select>
+            </div>
+
+            {/* STATUS KOLOM VALID */}
+            {selectedColumn && evaluasiKolom.cocok && (
+              <div className="column-status success">
+                <span className="column-status-icon">
+                  ✓
+                </span>
+
+                <div>
+                  <strong>
+                    {jumlahBarisKosong === 0
+                      ? `${jumlahUlasanValid} ulasan siap dianalisis.`
+                      : `${jumlahUlasanValid} dari ${rows.length} baris berisi teks.`}
+                  </strong>
+
+                  {jumlahBarisKosong > 0 && (
+                    <p>
+                      {jumlahBarisKosong} baris kosong akan
+                      dilewati saat analisis.
+                    </p>
+                  )}
+                </div>
+              </div>
+            )}
+
+            {/* STATUS KOLOM TIDAK SESUAI */}
+            {selectedColumn && !evaluasiKolom.cocok && (
+              <div className="column-status warning">
+                <span className="column-status-icon">
+                  !
+                </span>
+
+                <div>
+                  <strong>
+                    Kolom belum sesuai
+                  </strong>
+
+                  <p>
+                    {evaluasiKolom.pesan}
+                  </p>
+                </div>
+              </div>
+            )}
+
+            {/* INFORMASI PENYIMPANAN */}
+            <div className="csv-storage-note">
+              <span>i</span>
+
+              <p>
+                Hanya isi kolom yang dipilih yang diproses dan
+                disimpan sebagai data analisis.
+              </p>
+            </div>
+
+            {/* TOMBOL MULAI ANALISIS */}
+            <div className="preview-actions">
+              <button
+                type="button"
+                className="csv-primary-button"
+                onClick={mulaiAnalisis}
+                disabled={
+                  !selectedColumn ||
+                  jumlahUlasanValid === 0 ||
+                  !evaluasiKolom.cocok ||
+                  loading
+                }
+              >
+                {loading ? (
+                  <>
+                    <span
+                      className="csv-button-spinner"
+                      aria-hidden="true"
+                    ></span>
+                    Menganalisis...
+                  </>
+                ) : (
+                  "Mulai Analisis"
+                )}
+              </button>
+            </div>
+          </section>
+        </>
+      )}
+    </div>
+  );
+}
+
+export default AnalisisCSV;
diff --git a/web_slearn/src/pages/Dashboard.jsx b/web_slearn/src/pages/Dashboard.jsx
new file mode 100644
index 0000000..f5cbc36
--- /dev/null
+++ b/web_slearn/src/pages/Dashboard.jsx
@@ -0,0 +1,50 @@
+import { useEffect, useState } from "react";
+import { Link } from "react-router-dom";
+import { ambilRiwayatAnalisis, ambilRiwayatPrediksi, ambilRiwayatModel } from "../services/api";
+import { ModelVersion } from "../components/ModelContext";
+import "../styles/dashboard.css";
+import "../styles/riwayat-model.css";
+const percent = (v) => `${(v * 100).toFixed(2).replace('.', ',')}%`;
+const date = (v) => v ? new Date(v).toLocaleString('id-ID') : 'Tidak tercatat';
+export default function Dashboard() {
+  const [state,setState]=useState({});
+  useEffect(()=>{
+    let alive=true;
+    async function load() {
+      const results=await Promise.allSettled([ambilRiwayatModel(),ambilRiwayatAnalisis(),ambilRiwayatPrediksi()]);
+      if(alive) setState(Object.fromEntries(['models','csv','single'].map((k,i)=>[k,results[i].status==='fulfilled'?{data:results[i].value.data}:{error:results[i].reason.message}])));
+    }
+    load();
+    window.addEventListener('focus',load);
+    return ()=>{alive=false;window.removeEventListener('focus',load);};
+  },[]);
+  const active=state.models?.data?.versions.find(v=>v.active);
+  const latest=state.csv?.data?.[0];
+  const total=latest?.total_data || 0;
+  const positive=total ? latest.total_positive/total*100 : 0;
+  const card=(label,value,note)=><article className="stat-card"><span className="stat-label">{label}</span><strong>{value}</strong><small>{note}</small></article>;
+  return <div className="dashboard-page">
+    <div className="page-heading"><div><h1>Dashboard</h1><p>Model yang digunakan, aktivitas prediksi, dan hasil analisis terakhir.</p></div><Link className="primary-button" to="/prediksi">Prediksi Ulasan Baru</Link></div>
+    <section className="dashboard-panel"><h2>Model yang sedang digunakan</h2><p>Model ini digunakan untuk prediksi satu ulasan dan analisis CSV berikutnya.</p>
+      {state.models?.error ? <p role="alert">Informasi model tidak dapat dimuat: {state.models.error}</p> : !active ? <p>Memuat model aktif...</p> : <>
+      <div className="models-summary"><div><small>Versi aktif</small><strong>{active.version}</strong></div><div><small>Akurasi pada data uji</small><strong>{percent(active.akurasi)}</strong></div><div><small>Data latih model</small><strong>{active.jumlah_data_training}</strong></div><div><small>Data uji tetap</small><strong>{active.jumlah_data_testing}</strong></div></div>
+      <p>Selesai dilatih: {date(active.created_at)}. Akurasi adalah hasil evaluasi pada data uji, bukan jaminan setiap prediksi benar.</p><Link to="/riwayat-model">Kelola model dan lihat evaluasi →</Link></>}
+    </section>
+    <section className="dashboard-panel"><h2>Aktivitas analisis</h2><p>Ulasan yang dianalisis tidak otomatis ditambahkan ke data latih. Analisis berulang tetap dihitung sebagai aktivitas terpisah.</p>
+      <div className="stats-grid">
+      {card('Prediksi satu ulasan',state.single?.data?.length ?? '—','Hasil tersimpan dari menu Prediksi Satu Ulasan')}
+      {card('Analisis CSV selesai',state.csv?.data?.length ?? '—','Jumlah batch tersimpan')}
+      {card('Ulasan dalam seluruh batch CSV',state.csv?.data?.reduce((n,r)=>n+r.total_data,0) ?? '—','Jumlah baris yang diprediksi, bukan data latih')}
+      </div>
+      {[state.csv?.error,state.single?.error].filter(Boolean).map((e,i)=><p role="alert" key={i}>Data aktivitas tidak dapat dimuat: {e}</p>)}
+    </section>
+    <section className="dashboard-panel"><h2>Hasil analisis CSV terakhir</h2><p>Distribusi hasil prediksi pada file terakhir, bukan distribusi dataset training.</p>
+      {state.csv?.error ? <p role="alert">Hasil terakhir tidak tersedia karena riwayat gagal dimuat.</p> : !state.csv ? <p>Memuat hasil...</p> : !latest ? <p>Belum ada analisis CSV. <Link to="/analisis-csv">Analisis CSV baru</Link></p> : <>
+        <p><b>{latest.file_name}</b> · {date(latest.created_at)}</p><ModelVersion value={latest.model_version}/>
+        <div className="sentiment-content"><div className="donut-chart" role="img" aria-label={`${latest.total_positive} positif dan ${latest.total_negative} negatif`} style={{background:total?`conic-gradient(#1f9d68 0% ${positive}%,#db4e58 ${positive}% 100%)`:'#e9edf3'}}><div className="donut-center"><strong>{total}</strong><span>Ulasan</span></div></div>
+        <div className="sentiment-summary"><p><b>Positif: {latest.total_positive} ({positive.toFixed(1)}%)</b></p><p><b>Negatif: {latest.total_negative} ({(total?latest.total_negative/total*100:0).toFixed(1)}%)</b></p><Link className="secondary-button" to={`/hasil-analisis/${encodeURIComponent(latest.batch_id)}`}>Lihat Hasil</Link></div></div>
+      </>}
+    </section>
+    <p>Penelitian awal: <b>571 ulasan</b> (456 data latih dan 115 data uji). <Link to="/penelitian-model">Lihat Penelitian &amp; Model Awal →</Link></p>
+  </div>;
+}
diff --git a/web_slearn/src/pages/HasilAnalisis.jsx b/web_slearn/src/pages/HasilAnalisis.jsx
new file mode 100644
index 0000000..a785b13
--- /dev/null
+++ b/web_slearn/src/pages/HasilAnalisis.jsx
@@ -0,0 +1,1204 @@
+import { ModelVersion, TfidfNote } from "../components/ModelContext";
+import {
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+
+import {
+  useNavigate,
+  useParams
+} from "react-router-dom";
+
+import {
+  ambilHasilAnalisis,
+  ambilRiwayatAnalisis
+} from "../services/api";
+
+import "../styles/hasil-analisis.css";
+
+const ITEMS_PER_PAGE = 10;
+
+const NAMA_BULAN = [
+  "Januari",
+  "Februari",
+  "Maret",
+  "April",
+  "Mei",
+  "Juni",
+  "Juli",
+  "Agustus",
+  "September",
+  "Oktober",
+  "November",
+  "Desember"
+];
+
+/* ============================================================
+   FORMAT WAKTU
+   ============================================================ */
+
+function formatWaktu(value) {
+  if (!value) {
+    return "-";
+  }
+
+  const [tanggalRaw, waktuRaw = ""] =
+    String(value).split("T");
+
+  const bagianTanggal =
+    tanggalRaw.split("-");
+
+  if (bagianTanggal.length !== 3) {
+    return value;
+  }
+
+  const [year, month, day] =
+    bagianTanggal.map(Number);
+
+  if (
+    !year ||
+    !month ||
+    !day ||
+    !NAMA_BULAN[month - 1]
+  ) {
+    return value;
+  }
+
+  const jam = waktuRaw
+    ? waktuRaw
+        .slice(0, 5)
+        .replace(":", ".")
+    : "-";
+
+  return `${day} ${NAMA_BULAN[month - 1]} ${year}, ${jam}`;
+}
+
+/* ============================================================
+   CSV
+   ============================================================ */
+
+function escapeCSV(value) {
+  const text = String(value ?? "");
+
+  return `"${text.replaceAll(
+    '"',
+    '""'
+  )}"`;
+}
+
+/* ============================================================
+   HALAMAN
+   ============================================================ */
+
+function HasilAnalisis() {
+  const navigate = useNavigate();
+
+  const {
+    batchId
+  } = useParams();
+
+  const [
+    dataAnalisis,
+    setDataAnalisis
+  ] = useState(null);
+
+  const [
+    batchNumber,
+    setBatchNumber
+  ] = useState(null);
+
+  const [
+    loading,
+    setLoading
+  ] = useState(true);
+
+  const [
+    error,
+    setError
+  ] = useState("");
+
+  const [
+    search,
+    setSearch
+  ] = useState("");
+
+  const [
+    filter,
+    setFilter
+  ] = useState("Semua");
+
+  const [
+    detail,
+    setDetail
+  ] = useState(null);
+
+  const [
+    currentPage,
+    setCurrentPage
+  ] = useState(1);
+
+  /*
+    Ref untuk posisi awal
+    Detail Hasil Analisis.
+  */
+  const hasilDetailRef = useRef(null);
+
+  /* ==========================================================
+     AMBIL DATA
+     ========================================================== */
+
+  useEffect(() => {
+    let aktif = true;
+
+    async function loadData() {
+      if (!batchId) {
+        setError(
+          "ID batch analisis tidak tersedia."
+        );
+
+        setLoading(false);
+
+        return;
+      }
+
+      try {
+        setLoading(true);
+        setError("");
+
+        const response =
+          await ambilHasilAnalisis(
+            batchId
+          );
+
+        if (
+          aktif &&
+          response.status === "success"
+        ) {
+          setDataAnalisis(
+            response.data
+          );
+
+          try {
+            const historyResponse =
+              await ambilRiwayatAnalisis();
+
+            if (
+              aktif &&
+              historyResponse.status ===
+                "success"
+            ) {
+              const urutanBatch = [
+                ...(historyResponse.data || [])
+              ].sort(
+                (a, b) => {
+                  const waktuA =
+                    String(
+                      a.created_at || ""
+                    );
+
+                  const waktuB =
+                    String(
+                      b.created_at || ""
+                    );
+
+                  const bandingWaktu =
+                    waktuA.localeCompare(
+                      waktuB
+                    );
+
+                  if (
+                    bandingWaktu !== 0
+                  ) {
+                    return bandingWaktu;
+                  }
+
+                  return String(
+                    a.batch_id || ""
+                  ).localeCompare(
+                    String(
+                      b.batch_id || ""
+                    )
+                  );
+                }
+              );
+
+              const posisiBatch =
+                urutanBatch.findIndex(
+                  (item) =>
+                    item.batch_id ===
+                    batchId
+                );
+
+              setBatchNumber(
+                posisiBatch >= 0
+                  ? posisiBatch + 1
+                  : null
+              );
+            }
+          } catch {
+            if (aktif) {
+              setBatchNumber(null);
+            }
+          }
+        }
+      } catch (err) {
+        if (aktif) {
+          setError(
+            err.message ||
+              "Hasil analisis tidak dapat dimuat."
+          );
+        }
+      } finally {
+        if (aktif) {
+          setLoading(false);
+        }
+      }
+    }
+
+    loadData();
+
+    return () => {
+      aktif = false;
+    };
+  }, [batchId]);
+
+  /* ==========================================================
+     RESET HALAMAN SAAT SEARCH / FILTER BERUBAH
+     ========================================================== */
+
+  function changeSearch(value) { setSearch(value); setCurrentPage(1); }
+  function changeFilter(value) { setFilter(value); setCurrentPage(1); }
+
+  /* ==========================================================
+     DATA
+     ========================================================== */
+
+  const hasil = useMemo(() => dataAnalisis?.results || [], [dataAnalisis]);
+
+  const total =
+    Number(
+      dataAnalisis?.total_data ||
+        0
+    );
+
+  const positif =
+    Number(
+      dataAnalisis
+        ?.total_positive ||
+        0
+    );
+
+  const negatif =
+    Number(
+      dataAnalisis
+        ?.total_negative ||
+        0
+    );
+
+  const persentasePositif =
+    total > 0
+      ? (
+          positif /
+          total
+        ) * 100
+      : 0;
+
+  /* ==========================================================
+     SEARCH + FILTER
+     ========================================================== */
+
+  const filteredData =
+    useMemo(() => {
+      const keyword =
+        search
+          .trim()
+          .toLowerCase();
+
+      return hasil.filter(
+        (item) => {
+          const cocokSearch =
+            !keyword ||
+            String(
+              item.teks || ""
+            )
+              .toLowerCase()
+              .includes(
+                keyword
+              );
+
+          const cocokFilter =
+            filter === "Semua" ||
+            item.sentimen ===
+              filter;
+
+          return (
+            cocokSearch &&
+            cocokFilter
+          );
+        }
+      );
+    }, [
+      hasil,
+      search,
+      filter
+    ]);
+
+  /* ==========================================================
+     PAGINATION
+     ========================================================== */
+
+  const totalPages =
+    Math.max(
+      1,
+      Math.ceil(
+        filteredData.length /
+          ITEMS_PER_PAGE
+      )
+    );
+
+  const safeCurrentPage =
+    Math.min(
+      currentPage,
+      totalPages
+    );
+
+  const startIndex =
+    (
+      safeCurrentPage - 1
+    ) * ITEMS_PER_PAGE;
+
+  const paginatedData =
+    filteredData.slice(
+      startIndex,
+      startIndex +
+        ITEMS_PER_PAGE
+    );
+
+  /*
+    Setelah halaman berubah,
+    otomatis naik ke awal tabel.
+  */
+  const scrollKeAtasDetail = () => {
+    window.requestAnimationFrame(
+      () => {
+        if (
+          !hasilDetailRef.current
+        ) {
+          return;
+        }
+
+        const posisi =
+          hasilDetailRef.current
+            .getBoundingClientRect()
+            .top +
+          window.scrollY -
+          18;
+
+        window.scrollTo({
+          top: posisi,
+          behavior: "smooth"
+        });
+      }
+    );
+  };
+
+  const halamanSebelumnya =
+    () => {
+      setCurrentPage(
+        (page) =>
+          Math.max(
+            1,
+            page - 1
+          )
+      );
+
+      scrollKeAtasDetail();
+    };
+
+  const halamanBerikutnya =
+    () => {
+      setCurrentPage(
+        (page) =>
+          Math.min(
+            totalPages,
+            page + 1
+          )
+      );
+
+      scrollKeAtasDetail();
+    };
+
+  /* ==========================================================
+     DOWNLOAD
+     ========================================================== */
+
+  const unduhHasil =
+    () => {
+      if (!dataAnalisis) {
+        return;
+      }
+
+      const header = [
+        "ID Batch", "File Sumber", "Waktu Analisis", "Versi Model",
+        "No",
+        "Ulasan",
+        "Cleaning",
+        "Case Folding",
+        "Normalisasi",
+        "Tokenizing",
+        "Stopword Removal",
+        "Stemming",
+        "Label",
+        "Sentimen"
+      ];
+
+      const rowsCSV =
+        hasil.map(
+          (item) => [
+            dataAnalisis.batch_id, dataAnalisis.file_name, dataAnalisis.created_at, dataAnalisis.model_version || "Tidak tercatat",
+            item.source_row_number,
+            item.teks,
+            item.preprocessing
+              ?.cleaning,
+            item.preprocessing
+              ?.case_folding,
+            item.preprocessing
+              ?.normalization,
+            Array.isArray(
+              item.preprocessing
+                ?.tokenizing
+            )
+              ? JSON.stringify(item.preprocessing.tokenizing)
+              : "",
+            item.preprocessing
+              ?.stopword_removal,
+            item.preprocessing
+              ?.stemming,
+            item.label,
+            item.sentimen
+          ]
+        );
+
+      const csvContent = [
+        header
+          .map(
+            escapeCSV
+          )
+          .join(","),
+
+        ...rowsCSV.map(
+          (row) =>
+            row
+              .map(
+                escapeCSV
+              )
+              .join(",")
+        )
+      ].join("\n");
+
+      const blob =
+        new Blob(
+          [
+            "\uFEFF" +
+              csvContent
+          ],
+          {
+            type:
+              "text/csv;charset=utf-8;"
+          }
+        );
+
+      const url =
+        URL.createObjectURL(
+          blob
+        );
+
+      const link =
+        document.createElement(
+          "a"
+        );
+
+      link.href =
+        url;
+
+      link.download =
+        `hasil_${dataAnalisis.batch_id}.csv`;
+
+      document.body.appendChild(
+        link
+      );
+
+      link.click();
+
+      link.remove();
+
+      URL.revokeObjectURL(
+        url
+      );
+    };
+
+  /* ==========================================================
+     LOADING
+     ========================================================== */
+
+  if (loading) {
+    return (
+      <div className="hasil-page">
+        <section className="hasil-card hasil-state-card">
+          <h2>
+            Mengambil Hasil Analisis
+          </h2>
+
+          <p>
+            Data analisis sedang dimuat.
+          </p>
+        </section>
+      </div>
+    );
+  }
+
+  /* ==========================================================
+     ERROR
+     ========================================================== */
+
+  if (
+    error ||
+    !dataAnalisis
+  ) {
+    return (
+      <div className="hasil-page">
+        <section className="hasil-card hasil-state-card">
+          <h2>
+            Batch tidak ditemukan
+          </h2>
+
+          <p>
+            {error ||
+              "Batch analisis tidak ditemukan."}
+          </p>
+
+          <div className="hasil-state-actions">
+            <button
+              type="button"
+              className="hasil-secondary-button"
+              onClick={() =>
+                navigate(
+                  "/riwayat"
+                )
+              }
+            >
+              Kembali ke Riwayat
+            </button>
+
+            <button
+              type="button"
+              className="hasil-primary-button"
+              onClick={() =>
+                navigate(
+                  "/analisis-csv"
+                )
+              }
+            >
+              Analisis CSV Baru
+            </button>
+          </div>
+        </section>
+      </div>
+    );
+  }
+
+  return (
+    <div className="hasil-page">
+      {/* ======================================================
+          BACK
+          ====================================================== */}
+
+      <button
+        type="button"
+        className="hasil-back-button"
+        onClick={() =>
+          navigate(
+            "/riwayat"
+          )
+        }
+      >
+        ← Kembali ke Riwayat
+      </button>
+
+      {/* ======================================================
+          HEADING
+          ====================================================== */}
+
+      <div className="hasil-heading">
+        <div>
+          <h1>
+            Hasil Analisis
+          </h1>
+
+          <p>
+            {dataAnalisis.file_name}<ModelVersion value={dataAnalisis.model_version} />
+            {" · "}
+            {formatWaktu(
+              dataAnalisis.created_at
+            )}
+          </p>
+        </div>
+
+        <div className="hasil-heading-actions">
+          <button
+            type="button"
+            className="hasil-secondary-button"
+            onClick={
+              unduhHasil
+            }
+          >
+            Unduh Hasil
+          </button>
+
+          <button
+            type="button"
+            className="hasil-primary-button"
+            onClick={() =>
+              navigate(
+                "/analisis-csv"
+              )
+            }
+          >
+            Analisis File Baru
+          </button>
+        </div>
+      </div>
+
+      {/* ======================================================
+          STATISTIK
+          ====================================================== */}
+
+      <section className="hasil-stat-grid">
+        <article className="hasil-stat-card hasil-stat-neutral">
+          <span>
+            Ulasan Dianalisis
+          </span>
+
+          <strong>
+            {total}
+          </strong>
+        </article>
+
+        <article className="hasil-stat-card hasil-stat-positive">
+          <span>
+            Hasil prediksi positif
+          </span>
+
+          <strong className="positive-text">
+            {positif}
+          </strong>
+        </article>
+
+        <article className="hasil-stat-card hasil-stat-negative">
+          <span>
+            Hasil prediksi negatif
+          </span>
+
+          <strong className="negative-text">
+            {negatif}
+          </strong>
+        </article>
+      </section>
+
+      {/* ======================================================
+          DISTRIBUSI
+          ====================================================== */}
+
+      <section className="hasil-card hasil-distribution-card">
+        <div className="hasil-section-heading">
+          <h2>
+            Distribusi Sentimen Hasil Prediksi
+          </h2>
+
+          <p>
+            Distribusi sentimen pada file CSV yang dianalisis.
+          </p>
+        </div>
+
+        <div className="hasil-analysis-meta">
+          <div>
+            <span>
+              Kolom Ulasan
+            </span>
+
+            <strong>
+              {dataAnalisis.selected_column}
+            </strong>
+          </div>
+
+          <div>
+            <span>
+              Batch
+            </span>
+
+            <strong
+              title={
+                dataAnalisis.batch_id
+              }
+            >
+              {batchNumber
+                ? `Batch ${batchNumber}`
+                : "Batch -"}
+            </strong>
+          </div>
+        </div>
+
+        <div className="hasil-distribution">
+          <div
+            className="hasil-donut"
+            style={{
+              background:
+                total > 0
+                  ? (
+                      `conic-gradient(` +
+                      `#1f9d68 0% ${persentasePositif}%, ` +
+                      `#db4e58 ${persentasePositif}% 100%)`
+                    )
+                  : "#e9edf3"
+            }}
+          >
+            <div className="hasil-donut-center">
+              <strong>
+                {total}
+              </strong>
+
+              <span>
+                Ulasan
+              </span>
+            </div>
+          </div>
+
+          <div className="hasil-legend">
+            <div className="hasil-legend-item positive">
+              <span className="legend-dot positive"></span>
+
+              <span>
+                Positif: {dataAnalisis.total_positive} ({persentasePositif.toFixed(1)}%)
+              </span>
+            </div>
+
+            <div className="hasil-legend-item negative">
+              <span className="legend-dot negative"></span>
+
+              <span>
+                Negatif: {dataAnalisis.total_negative} ({(100 - persentasePositif).toFixed(1)}%)
+              </span>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* ======================================================
+          DETAIL HASIL
+          ====================================================== */}
+
+      <section
+        ref={hasilDetailRef}
+        className="hasil-card hasil-detail-card"
+      >
+        <div className="hasil-list-header">
+          <div className="hasil-section-heading">
+            <h2>
+              Detail Hasil Analisis
+            </h2>
+
+            <p>
+              Daftar ulasan dan hasil prediksi sentimen.
+            </p>
+          </div>
+
+          <div className="hasil-tools">
+            <input
+              type="search"
+              placeholder="Cari ulasan..."
+              value={search}
+              onChange={(event) =>
+                changeSearch(
+                  event.target.value
+                )
+              }
+            />
+
+            <select
+              value={filter}
+              onChange={(event) =>
+                changeFilter(
+                  event.target.value
+                )
+              }
+            >
+              <option value="Semua">
+                Semua Sentimen
+              </option>
+
+              <option value="Positif">
+                Positif
+              </option>
+
+              <option value="Negatif">
+                Negatif
+              </option>
+            </select>
+          </div>
+        </div>
+
+        <div className="hasil-table-wrapper">
+          <table className="hasil-table">
+            <thead>
+              <tr>
+                <th>No</th>
+                <th>Ulasan</th>
+                <th>Sentimen</th>
+                <th>Aksi</th>
+              </tr>
+            </thead>
+
+            <tbody>
+              {paginatedData.map(
+                (item) => (
+                  <tr
+                    key={
+                      item.id ??
+                      item.source_row_number
+                    }
+                  >
+                    <td>
+                      {
+                        item.source_row_number
+                      }
+                    </td>
+
+                    <td className="hasil-review-cell">
+                      {item.teks}
+                    </td>
+
+                    <td>
+                      <span
+                        className={
+                          `sentiment-badge ${
+                            item.sentimen ===
+                            "Positif"
+                              ? "positive"
+                              : "negative"
+                          }`
+                        }
+                      >
+                        {item.sentimen}
+                      </span>
+                    </td>
+
+                    <td>
+                      <button
+                        type="button"
+                        className="process-button"
+                        onClick={() =>
+                          setDetail(
+                            item
+                          )
+                        }
+                      >
+                        Lihat Proses
+                      </button>
+                    </td>
+                  </tr>
+                )
+              )}
+
+              {paginatedData.length === 0 && (
+                <tr>
+                  <td
+                    colSpan="4"
+                    className="empty-result"
+                  >
+                    Tidak ada ulasan yang sesuai.
+                  </td>
+                </tr>
+              )}
+            </tbody>
+          </table>
+        </div>
+
+        <div className="hasil-table-footer">
+          <span>
+            Menampilkan{" "}
+
+            {filteredData.length === 0
+              ? 0
+              : startIndex + 1}
+
+            {" - "}
+
+            {Math.min(
+              startIndex +
+                ITEMS_PER_PAGE,
+              filteredData.length
+            )}
+
+            {" dari "}
+
+            {filteredData.length}
+
+            {" ulasan"}
+          </span>
+
+          <div>
+            <button
+              type="button"
+              onClick={
+                halamanSebelumnya
+              }
+              disabled={
+                safeCurrentPage <= 1
+              }
+            >
+              ‹
+            </button>
+
+            <strong>
+              {safeCurrentPage}
+              {" / "}
+              {totalPages}
+            </strong>
+
+            <button
+              type="button"
+              onClick={
+                halamanBerikutnya
+              }
+              disabled={
+                safeCurrentPage >=
+                totalPages
+              }
+            >
+              ›
+            </button>
+          </div>
+        </div>
+      </section>
+
+      {/* ======================================================
+          MODAL
+          ====================================================== */}
+
+      {detail && (
+        <div
+          className="process-overlay"
+          onClick={() =>
+            setDetail(null)
+          }
+        >
+          <div
+            className="process-modal"
+            onClick={(event) =>
+              event.stopPropagation()
+            }
+          >
+            <div className="process-modal-header">
+              <div>
+                <span>
+                  DETAIL ANALISIS
+                </span>
+
+                <h2>
+                  Proses Analisis Ulasan
+                </h2><ModelVersion value={dataAnalisis.model_version} />
+              </div>
+
+              <button
+                type="button"
+                aria-label="Tutup detail analisis"
+                onClick={() =>
+                  setDetail(null)
+                }
+              >
+                ×
+              </button>
+            </div>
+
+            <div className="original-review">
+              <span>
+                Ulasan Asli
+              </span>
+
+              <p>
+                {detail.teks}
+              </p>
+            </div>
+
+            <div className="process-step-list">
+              {[
+                [
+                  "Cleaning",
+                  detail.preprocessing
+                    ?.cleaning
+                ],
+                [
+                  "Case Folding",
+                  detail.preprocessing
+                    ?.case_folding
+                ],
+                [
+                  "Normalisasi",
+                  detail.preprocessing
+                    ?.normalization
+                ],
+                [
+                  "Tokenizing",
+                  Array.isArray(
+                    detail.preprocessing
+                      ?.tokenizing
+                  )
+                    ? JSON.stringify(
+                        detail
+                          .preprocessing
+                          .tokenizing
+                      )
+                    : detail.preprocessing
+                        ?.tokenizing
+                ],
+                [
+                  "Stopword Removal",
+                  detail.preprocessing
+                    ?.stopword_removal
+                ],
+                [
+                  "Stemming",
+                  detail.preprocessing
+                    ?.stemming
+                ]
+              ].map(
+                (
+                  [nama, proses],
+                  index
+                ) => (
+                  <div
+                    className="process-step"
+                    key={nama}
+                  >
+                    <span>
+                      {index + 1}
+                    </span>
+
+                    <div>
+                      <strong>
+                        {nama}
+                      </strong>
+
+                      <p>
+                        {proses || "-"}
+                      </p>
+                    </div>
+                  </div>
+                )
+              )}
+            </div>
+
+            <div className="tfidf-process">
+              <div className="modal-subheading">
+                <h3>
+                  Bobot TF-IDF Teratas
+                </h3><TfidfNote />
+              </div>
+
+              {detail.tfidf_top?.length > 0 ? (
+                detail.tfidf_top.map(
+                  (item, index) => {
+                    const maxBobot =
+                      Number(
+                        detail
+                          .tfidf_top[0]
+                          ?.bobot || 1
+                      );
+
+                    const width =
+                      Math.min(
+                        Number(
+                          item.bobot
+                        ) /
+                          maxBobot,
+                        1
+                      ) * 100;
+
+                    return (
+                      <div
+                        className="tfidf-row"
+                        key={
+                          `${item.kata}-${index}`
+                        }
+                      >
+                        <span>
+                          {item.kata}
+                        </span>
+
+                        <div>
+                          <i
+                            style={{
+                              width:
+                                `${width}%`
+                            }}
+                          ></i>
+                        </div>
+
+                        <em>
+                          {Number(
+                            item.bobot
+                          )
+                            .toFixed(6)
+                            .replace(
+                              ".",
+                              ","
+                            )}
+                        </em>
+                      </div>
+                    );
+                  }
+                )
+              ) : (
+                <p className="tfidf-empty">
+                  Tidak ada bobot TF-IDF yang tersedia.
+                </p>
+              )}
+            </div>
+
+            <div
+              className={
+                `modal-prediction-card ${
+                  detail.sentimen ===
+                  "Positif"
+                    ? "positive"
+                    : "negative"
+                }`
+              }
+            >
+              <span>
+                Prediksi Sentimen
+              </span>
+
+              <strong
+                className={
+                  `hasil-sentiment-result-badge ${
+                    detail.sentimen ===
+                    "Positif"
+                      ? "positive"
+                      : "negative"
+                  }`
+                }
+              >
+                {detail.sentimen}
+              </strong>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default HasilAnalisis;
\ No newline at end of file
diff --git a/web_slearn/src/pages/PenelitianModel.jsx b/web_slearn/src/pages/PenelitianModel.jsx
new file mode 100644
index 0000000..2fa3134
--- /dev/null
+++ b/web_slearn/src/pages/PenelitianModel.jsx
@@ -0,0 +1,1824 @@
+import EvaluasiPembanding from "../components/EvaluasiPembanding";
+import { useEffect, useMemo, useRef, useState } from "react";
+import Papa from "papaparse";
+import { ambilModelPenelitian } from "../services/api";
+import "../styles/penelitian-model.css";
+
+const tabs = [
+  "Dataset & Pembagian Data",
+  "Preprocessing",
+  "Pembobotan TF-IDF",
+  "Model & Evaluasi",
+  "Pengujian Pembanding"
+];
+
+const ITEMS_PER_PAGE = 10;
+
+
+function PenelitianModel() {
+  const [activeTab, setActiveTab] = useState("Dataset & Pembagian Data");
+
+  return (
+    <div className="research-page">
+      <div className="research-heading">
+        <div>
+          <h1>Penelitian &amp; Model Awal</h1>
+
+          <p>
+            Dokumentasi dataset, preprocessing, TF-IDF, dan evaluasi model awal (v1).
+            Model aktif dan hasil training baru tersedia di menu Training &amp; Riwayat Model.{" "}
+            
+          </p>
+        </div>
+      </div>
+
+      <div className="research-tabs">
+        {tabs.map((tab) => (
+          <button
+            key={tab}
+            type="button"
+            className={activeTab === tab ? "active" : ""}
+            onClick={() => setActiveTab(tab)}
+          >
+            {tab}
+          </button>
+        ))}
+      </div>
+
+      {activeTab === "Dataset & Pembagian Data" && <DatasetTab />}
+      {activeTab === "Preprocessing" && <PreprocessingTab />}
+      {activeTab === "Pembobotan TF-IDF" && <TFIDFTab />}
+      {activeTab === "Model & Evaluasi" && <ModelTab />}
+      {activeTab === "Pengujian Pembanding" && <EvaluasiPembanding />}
+    </div>
+  );
+}
+
+/* ============================================================
+   DATASET
+   ============================================================ */
+
+function DatasetTab() {
+  const [classDistribution, setClassDistribution] = useState({
+    total: 571,
+    negative: 379,
+    positive: 192
+  });
+
+  const [distributionLoading, setDistributionLoading] = useState(true);
+  const [distributionError, setDistributionError] = useState("");
+
+  useEffect(() => {
+    let aktif = true;
+
+    Papa.parse("/data/hasil_preprocessing_slearn.csv", {
+      download: true,
+      header: true,
+      skipEmptyLines: true,
+
+      transformHeader: (header) =>
+        String(header).replace(/^\uFEFF/, "").trim(),
+
+      complete: (results) => {
+        if (!aktif) return;
+
+        const rows = (results.data || []).filter(
+          (row) => String(row.komentar || "").trim() !== ""
+        );
+
+        const negative = rows.filter(
+          (row) => String(row.label ?? "").trim() === "0"
+        ).length;
+
+        const positive = rows.filter(
+          (row) => String(row.label ?? "").trim() === "1"
+        ).length;
+
+        setClassDistribution({
+          total: rows.length,
+          negative,
+          positive
+        });
+
+        setDistributionLoading(false);
+      },
+
+      error: (err) => {
+        if (!aktif) return;
+
+        setDistributionError(
+          err?.message || "Distribusi kelas tidak dapat dimuat."
+        );
+
+        setDistributionLoading(false);
+      }
+    });
+
+    return () => {
+      aktif = false;
+    };
+  }, []);
+
+  const negativePercentage =
+    classDistribution.total > 0
+      ? (classDistribution.negative / classDistribution.total) * 100
+      : 0;
+
+  const positivePercentage =
+    classDistribution.total > 0
+      ? (classDistribution.positive / classDistribution.total) * 100
+      : 0;
+
+  const formatPercentage = (value) =>
+    Number(value).toFixed(1).replace(".", ",");
+
+  return (
+    <div className="research-tab-content">
+      <section className="research-stat-grid three">
+        <StatCard
+          title="Dataset Penelitian"
+          value="571"
+          info="Ulasan S-Learn versi website"
+        />
+
+        <StatCard
+          title="Data Training"
+          value="456"
+          info="80% data penelitian"
+        />
+
+        <StatCard
+          title="Data Testing"
+          value="115"
+          info="20% data penelitian"
+        />
+      </section>
+
+      <section className="research-two-column dataset-overview-grid">
+        <article className="research-card dataset-distribution-card">
+          <div className="research-section-heading">
+            <h2>Distribusi Kelas Dataset</h2>
+            <p>Distribusi label pada 571 ulasan penelitian.</p>
+          </div>
+
+          {distributionLoading ? (
+            <div className="dataset-distribution-state">
+              Memuat distribusi kelas...
+            </div>
+          ) : (
+            <>
+              <div className="dataset-class-list">
+                <div className="dataset-class-item">
+                  <div className="dataset-class-heading">
+                    <div className="dataset-class-name">
+                      <span className="dataset-class-dot negative"></span>
+
+                      <div>
+                        <strong>Negatif</strong>
+                        <small>Label 0</small>
+                      </div>
+                    </div>
+
+                    <div className="dataset-class-value negative">
+                      <strong>{classDistribution.negative}</strong>
+                      <span>{formatPercentage(negativePercentage)}%</span>
+                    </div>
+                  </div>
+
+                  <div className="dataset-class-bar">
+                    <span
+                      className="dataset-class-fill negative"
+                      style={{ width: `${negativePercentage}%` }}
+                    ></span>
+                  </div>
+                </div>
+
+                <div className="dataset-class-item">
+                  <div className="dataset-class-heading">
+                    <div className="dataset-class-name">
+                      <span className="dataset-class-dot positive"></span>
+
+                      <div>
+                        <strong>Positif</strong>
+                        <small>Label 1</small>
+                      </div>
+                    </div>
+
+                    <div className="dataset-class-value positive">
+                      <strong>{classDistribution.positive}</strong>
+                      <span>{formatPercentage(positivePercentage)}%</span>
+                    </div>
+                  </div>
+
+                  <div className="dataset-class-bar">
+                    <span
+                      className="dataset-class-fill positive"
+                      style={{ width: `${positivePercentage}%` }}
+                    ></span>
+                  </div>
+                </div>
+              </div>
+
+              <div className="dataset-label-note">
+                <span>0 = Negatif</span>
+                <span>1 = Positif</span>
+              </div>
+
+              {distributionError && (
+                <p className="dataset-distribution-warning">
+                  {distributionError}
+                </p>
+              )}
+            </>
+          )}
+        </article>
+
+        <article className="research-card">
+          <div className="research-section-heading">
+            <h2>Pembagian Training dan Testing</h2>
+
+            <p>
+              Dataset dibagi menjadi 80% data training dan 20% data testing.
+            </p>
+          </div>
+
+          <div className="split-visual">
+            <div className="split-bar">
+              <span className="training-bar">80%</span>
+              <span className="testing-bar">20%</span>
+            </div>
+
+            <p className="split-explanation">
+              Data training digunakan untuk membentuk fitur TF-IDF dan melatih
+              model, sedangkan data testing digunakan untuk evaluasi model.
+            </p>
+          </div>
+        </article>
+      </section>
+
+      <section className="research-card">
+        <div className="research-section-heading">
+          <h2>Alur Pengolahan Data Penelitian</h2>
+        </div>
+
+        <div className="research-flow">
+          <FlowBox title="571 Ulasan" subtitle="Dataset penelitian" />
+          <FlowArrow />
+
+          <FlowBox title="Pelabelan" subtitle="Positif / Negatif" />
+          <FlowArrow />
+
+          <FlowBox title="Preprocessing" subtitle="6 tahapan teks" />
+          <FlowArrow />
+
+          <FlowBox
+            title="Split 80:20"
+            subtitle="456 training · 115 testing"
+          />
+
+          <FlowArrow />
+
+          <FlowBox title="TF-IDF" subtitle="Fit training · 675 fitur" />
+          <FlowArrow />
+
+          <FlowBox
+            title="Logistic Regression"
+            subtitle="Klasifikasi biner"
+          />
+
+          <FlowArrow />
+
+          <FlowBox title="Evaluasi" subtitle="115 data testing" />
+        </div>
+      </section>
+    </div>
+  );
+}
+
+/* ============================================================
+   PREPROCESSING
+   ============================================================ */
+
+function formatTokenizedText(value) {
+  const text = String(value || "").trim();
+
+  if (!text) return "-";
+
+  try {
+    const parsed = JSON.parse(text.replace(/'/g, '"'));
+
+    if (Array.isArray(parsed)) {
+      return parsed.join(" | ");
+    }
+  } catch {
+    // Format fallback.
+  }
+
+  return text
+    .replace(/^\[/, "")
+    .replace(/\]$/, "")
+    .split(",")
+    .map((token) =>
+      token
+        .trim()
+        .replace(/^["']|["']$/g, "")
+    )
+    .filter(Boolean)
+    .join(" | ");
+}
+
+function PreprocessingTab() {
+  const [data, setData] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState("");
+  const [search, setSearch] = useState("");
+  const [filterLabel, setFilterLabel] = useState("Semua");
+  const [currentPage, setCurrentPage] = useState(1);
+  const [detail, setDetail] = useState(null);
+
+  const preprocessingResultRef = useRef(null);
+
+  useEffect(() => {
+    let aktif = true;
+
+    Papa.parse("/data/hasil_preprocessing_slearn.csv", {
+      download: true,
+      header: true,
+      skipEmptyLines: true,
+
+      transformHeader: (header) =>
+        String(header).replace(/^\uFEFF/, "").trim(),
+
+      complete: (results) => {
+        if (!aktif) return;
+
+        const rows = (results.data || [])
+          .filter(
+            (row) => String(row.komentar || "").trim() !== ""
+          )
+          .map((row, index) => ({
+            id: index + 1,
+            komentar: String(row.komentar || ""),
+            label: String(row.label ?? "").trim(),
+            clean_text: String(row.clean_text || ""),
+            case_folded_text: String(row.case_folded_text || ""),
+            normalized_text: String(row.normalized_text || ""),
+            tokenized_text: String(row.tokenized_text || ""),
+            stopword_text: String(row.stopword_text || ""),
+            stemmed_text: String(row.stemmed_text || "")
+          }));
+
+        setData(rows);
+        setLoading(false);
+      },
+
+      error: (err) => {
+        if (!aktif) return;
+
+        setError(
+          err?.message || "Hasil preprocessing tidak dapat dibaca."
+        );
+
+        setLoading(false);
+      }
+    });
+
+    return () => {
+      aktif = false;
+    };
+  }, []);
+
+  useEffect(() => {
+    setCurrentPage(1);
+  }, [search, filterLabel]);
+
+  useEscapeModal(detail, () => setDetail(null));
+
+  const filteredData = useMemo(() => {
+    const keyword = search.trim().toLowerCase();
+
+    return data.filter((item) => {
+      const cocokSearch =
+        !keyword ||
+        item.komentar.toLowerCase().includes(keyword) ||
+        item.clean_text.toLowerCase().includes(keyword) ||
+        item.case_folded_text.toLowerCase().includes(keyword) ||
+        item.normalized_text.toLowerCase().includes(keyword) ||
+        item.tokenized_text.toLowerCase().includes(keyword) ||
+        item.stopword_text.toLowerCase().includes(keyword) ||
+        item.stemmed_text.toLowerCase().includes(keyword) ||
+        String(item.id).includes(keyword);
+
+      const cocokLabel =
+        filterLabel === "Semua" ||
+        (filterLabel === "Positif" && item.label === "1") ||
+        (filterLabel === "Negatif" && item.label === "0");
+
+      return cocokSearch && cocokLabel;
+    });
+  }, [data, search, filterLabel]);
+
+  const totalPages = Math.max(
+    1,
+    Math.ceil(filteredData.length / ITEMS_PER_PAGE)
+  );
+
+  const safePage = Math.min(currentPage, totalPages);
+  const startIndex = (safePage - 1) * ITEMS_PER_PAGE;
+
+  const paginatedData = filteredData.slice(
+    startIndex,
+    startIndex + ITEMS_PER_PAGE
+  );
+
+  const scrollKeAtasPreprocessing = () => {
+    window.requestAnimationFrame(() => {
+      if (!preprocessingResultRef.current) return;
+
+      const posisi =
+        preprocessingResultRef.current.getBoundingClientRect().top +
+        window.scrollY -
+        18;
+
+      window.scrollTo({
+        top: posisi,
+        behavior: "smooth"
+      });
+    });
+  };
+
+  const halamanSebelumnyaPreprocessing = () => {
+    setCurrentPage((page) => Math.max(1, page - 1));
+    scrollKeAtasPreprocessing();
+  };
+
+  const halamanBerikutnyaPreprocessing = () => {
+    setCurrentPage((page) => Math.min(totalPages, page + 1));
+    scrollKeAtasPreprocessing();
+  };
+
+  const kataPenting = [
+    "tidak",
+    "kurang",
+    "belum",
+    "bukan",
+    "bukannya",
+    "jangan",
+    "tanpa",
+    "tidaklah",
+    "malah",
+    "bisa",
+    "sangat",
+    "sering",
+    "sudah",
+    "masih",
+    "terlalu",
+    "baik",
+    "lebih",
+    "lama",
+    "jelas",
+    "masalah",
+    "selalu",
+    "siap",
+    "dapat",
+    "guna",
+    "benar",
+    "cukup",
+    "sekali",
+    "padahal",
+    "perlu",
+    "banyak",
+    "dan",
+    "terlihat",
+    "waktu",
+    "tambah",
+    "sebelum",
+    "sebelumnya",
+    "dekat",
+    "tiap",
+    "ada",
+    "kecil",
+    "dulu"
+  ];
+
+  return (
+    <div className="research-tab-content">
+      <section className="research-two-column preprocessing-method-grid">
+        <article className="research-card research-method-card">
+          <div className="research-section-heading">
+            <h2>Contoh Kamus Normalisasi</h2>
+
+            <p>
+              Contoh perubahan kata yang digunakan pada proses normalisasi
+              data penelitian.
+            </p>
+          </div>
+
+          <div className="normalization-list">
+            <NormalizationRow from="absen" to="presensi" />
+            <NormalizationRow from="deadline" to="tenggat" />
+            <NormalizationRow from="tapi" to="tetapi" />
+          </div>
+        </article>
+
+        <article className="research-card research-method-card stopword-method-card">
+          <div className="research-section-heading">
+            <h2>Kata Penting yang Dipertahankan</h2>
+
+            <p>
+              Stopword final dibentuk dari stopword Bahasa Indonesia NLTK dan
+              partikel tambahan. Kata-kata berikut dikeluarkan dari daftar
+              stopword sehingga tetap dipertahankan selama preprocessing.
+            </p>
+          </div>
+
+          <div className="important-word-tags">
+            {kataPenting.map((kata) => (
+              <span key={kata}>{kata}</span>
+            ))}
+          </div>
+        </article>
+      </section>
+
+      <section
+        ref={preprocessingResultRef}
+        className="research-card preprocessing-data-card"
+      >
+        <div className="research-section-heading">
+          <h2>Preprocessing 571 Ulasan</h2>
+
+          <p>
+            Hasil preprocessing ditampilkan sesuai enam tahapan penelitian:
+            Cleaning, Case Folding, Normalisasi, Tokenizing, Stopword Removal,
+            dan Stemming.
+          </p>
+        </div>
+
+        <div className="preprocessing-toolbar">
+          <input
+            type="search"
+            placeholder="Cari nomor data, ulasan, atau hasil preprocessing..."
+            value={search}
+            onChange={(event) => setSearch(event.target.value)}
+          />
+
+          <select
+            value={filterLabel}
+            onChange={(event) => setFilterLabel(event.target.value)}
+          >
+            <option value="Semua">Semua Label</option>
+            <option value="Positif">Positif</option>
+            <option value="Negatif">Negatif</option>
+          </select>
+        </div>
+
+        {loading && (
+          <div className="preprocessing-state">
+            Memuat hasil preprocessing penelitian...
+          </div>
+        )}
+
+        {!loading && error && (
+          <div className="preprocessing-state error">
+            {error}
+          </div>
+        )}
+
+        {!loading && !error && (
+          <>
+            <div className="research-preprocessing-data-list">
+              {paginatedData.map((item) => (
+                <article
+                  className="research-preprocessing-data-card"
+                  key={item.id}
+                >
+                  <div className="research-preprocessing-data-content">
+                    <div className="research-preprocessing-data-header">
+                      <strong>Data ke-{item.id}</strong>
+                      <SentimentBadge label={item.label} />
+                    </div>
+
+                    <p>{item.komentar}</p>
+
+                    <div className="research-preprocessing-card-footer">
+                      <div>
+                        <span>Hasil Akhir Stemming</span>
+                        <code>{item.stemmed_text}</code>
+                      </div>
+
+                      <button
+                        type="button"
+                        onClick={() => setDetail(item)}
+                      >
+                        Lihat Tahapan
+                      </button>
+                    </div>
+                  </div>
+                </article>
+              ))}
+
+              {paginatedData.length === 0 && (
+                <div className="preprocessing-state">
+                  Tidak ada data yang sesuai.
+                </div>
+              )}
+            </div>
+
+            <ResearchPagination
+              total={filteredData.length}
+              startIndex={startIndex}
+              currentPage={safePage}
+              totalPages={totalPages}
+              onPrev={halamanSebelumnyaPreprocessing}
+              onNext={halamanBerikutnyaPreprocessing}
+            />
+          </>
+        )}
+      </section>
+
+      {detail && (
+        <div
+          className="research-modal-overlay"
+          onMouseDown={(event) =>
+            event.target === event.currentTarget &&
+            setDetail(null)
+          }
+        >
+          <div className="research-modal">
+            <div className="research-modal-scroll">
+              <div className="research-modal-header">
+                <div>
+                  <h2>Data ke-{detail.id}</h2>
+                </div>
+
+                <button
+                  type="button"
+                  className="research-modal-close"
+                  aria-label="Tutup detail preprocessing"
+                  onClick={() => setDetail(null)}
+                >
+                  ×
+                </button>
+              </div>
+
+              <div className="research-modal-original">
+                <div className="research-modal-original-heading">
+                  <span>Ulasan Asli</span>
+                  <SentimentBadge label={detail.label} />
+                </div>
+
+                <p>{detail.komentar}</p>
+              </div>
+
+              <div className="research-modal-steps">
+                <ResearchProcessStep
+                  number="1"
+                  title="Cleaning"
+                  value={detail.clean_text}
+                />
+
+                <ResearchProcessStep
+                  number="2"
+                  title="Case Folding"
+                  value={detail.case_folded_text}
+                />
+
+                <ResearchProcessStep
+                  number="3"
+                  title="Normalisasi"
+                  value={detail.normalized_text}
+                />
+
+                <ResearchProcessStep
+                  number="4"
+                  title="Tokenizing"
+                  value={formatTokenizedText(detail.tokenized_text)}
+                />
+
+                <ResearchProcessStep
+                  number="5"
+                  title="Stopword Removal"
+                  value={detail.stopword_text}
+                />
+
+                <ResearchProcessStep
+                  number="6"
+                  title="Stemming"
+                  value={detail.stemmed_text}
+                />
+              </div>
+
+              <div className="research-modal-result">
+                <span>Sentimen Penelitian</span>
+
+                <strong>
+                  {detail.label === "1" ? "Positif" : "Negatif"}
+                </strong>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+/* ============================================================
+   TF-IDF
+   ============================================================ */
+
+function TFIDFTab() {
+  const [summary, setSummary] = useState(null);
+  const [data, setData] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState("");
+  const [search, setSearch] = useState("");
+  const [filterJenis, setFilterJenis] = useState("Semua");
+  const [filterLabel, setFilterLabel] = useState("Semua");
+  const [currentPage, setCurrentPage] = useState(1);
+  const [detail, setDetail] = useState(null);
+
+  const tfidfResultRef = useRef(null);
+
+  useEffect(() => {
+    const controller = new AbortController();
+
+    async function loadTFIDF() {
+      try {
+        setLoading(true);
+        setError("");
+
+        const response = await fetch("/data/tfidf_research.json", {
+          signal: controller.signal
+        });
+
+        if (!response.ok) {
+          throw new Error(
+            "Data pembobotan TF-IDF tidak dapat dibaca."
+          );
+        }
+
+        const json = await response.json();
+
+        if (!json || !Array.isArray(json.data)) {
+          throw new Error("Format data TF-IDF tidak sesuai.");
+        }
+
+        setSummary(json.summary || null);
+        setData(json.data);
+      } catch (err) {
+        if (err.name !== "AbortError") {
+          setError(
+            err.message || "Data TF-IDF tidak dapat dimuat."
+          );
+        }
+      } finally {
+        if (!controller.signal.aborted) {
+          setLoading(false);
+        }
+      }
+    }
+
+    loadTFIDF();
+
+    return () => controller.abort();
+  }, []);
+
+  useEffect(() => {
+    setCurrentPage(1);
+  }, [search, filterJenis, filterLabel]);
+
+  useEscapeModal(detail, () => setDetail(null));
+
+  const filteredData = useMemo(() => {
+    const keyword = search.trim().toLowerCase();
+
+    return data.filter((item) => {
+      const bobotKata = (item.bobot_tfidf || [])
+        .map((x) => x.kata)
+        .join(" ")
+        .toLowerCase();
+
+      const cocokSearch =
+        !keyword ||
+        String(item.no_data).includes(keyword) ||
+        String(item.ulasan_asli || "")
+          .toLowerCase()
+          .includes(keyword) ||
+        String(item.stemmed_text || "")
+          .toLowerCase()
+          .includes(keyword) ||
+        bobotKata.includes(keyword);
+
+      const cocokJenis =
+        filterJenis === "Semua" ||
+        item.jenis_data === filterJenis;
+
+      const cocokLabel =
+        filterLabel === "Semua" ||
+        (filterLabel === "Positif" &&
+          Number(item.label) === 1) ||
+        (filterLabel === "Negatif" &&
+          Number(item.label) === 0);
+
+      return cocokSearch && cocokJenis && cocokLabel;
+    });
+  }, [data, search, filterJenis, filterLabel]);
+
+  const totalPages = Math.max(
+    1,
+    Math.ceil(filteredData.length / ITEMS_PER_PAGE)
+  );
+
+  const safePage = Math.min(currentPage, totalPages);
+  const startIndex = (safePage - 1) * ITEMS_PER_PAGE;
+
+  const paginatedData = filteredData.slice(
+    startIndex,
+    startIndex + ITEMS_PER_PAGE
+  );
+
+  const scrollKeAtasHasilTFIDF = () => {
+    window.requestAnimationFrame(() => {
+      if (!tfidfResultRef.current) return;
+
+      const posisi =
+        tfidfResultRef.current.getBoundingClientRect().top +
+        window.scrollY -
+        18;
+
+      window.scrollTo({
+        top: posisi,
+        behavior: "smooth"
+      });
+    });
+  };
+
+  const halamanSebelumnyaTFIDF = () => {
+    setCurrentPage((page) => Math.max(1, page - 1));
+    scrollKeAtasHasilTFIDF();
+  };
+
+  const halamanBerikutnyaTFIDF = () => {
+    setCurrentPage((page) => Math.min(totalPages, page + 1));
+    scrollKeAtasHasilTFIDF();
+  };
+
+  return (
+    <div className="research-tab-content">
+      <section className="research-stat-grid three">
+        <StatCard
+          title="Jumlah Fitur"
+          value={summary?.jumlah_fitur ?? 675}
+          info="Vocabulary dari data training"
+        />
+
+        <StatCard
+          title="Matriks Training"
+          value={
+            summary?.ukuran_matriks_training
+              ? `${summary.ukuran_matriks_training[0]} × ${summary.ukuran_matriks_training[1]}`
+              : "456 × 675"
+          }
+          info="456 data × 675 fitur"
+        />
+
+        <StatCard
+          title="Matriks Testing"
+          value={
+            summary?.ukuran_matriks_testing
+              ? `${summary.ukuran_matriks_testing[0]} × ${summary.ukuran_matriks_testing[1]}`
+              : "115 × 675"
+          }
+          info="115 data × 675 fitur"
+        />
+      </section>
+
+      <section
+        ref={tfidfResultRef}
+        className="research-card"
+      >
+        <div className="research-section-heading">
+          <h2>Hasil Pembobotan TF-IDF 571 Ulasan</h2>
+
+          <p>
+            Bobot TF-IDF dihitung menggunakan fitur yang dibentuk dari
+            data training. Data testing ditransformasikan menggunakan
+            vectorizer yang sama tanpa melakukan fit ulang.
+          </p>
+        </div>
+
+        <div className="tfidf-research-toolbar">
+          <input
+            type="search"
+            placeholder="Cari nomor data, hasil stemming, atau kata..."
+            value={search}
+            onChange={(event) => setSearch(event.target.value)}
+          />
+
+          <select
+            value={filterJenis}
+            onChange={(event) => setFilterJenis(event.target.value)}
+          >
+            <option value="Semua">Semua Jenis</option>
+            <option value="Training">Training</option>
+            <option value="Testing">Testing</option>
+          </select>
+
+          <select
+            value={filterLabel}
+            onChange={(event) => setFilterLabel(event.target.value)}
+          >
+            <option value="Semua">Semua Label</option>
+            <option value="Positif">Positif</option>
+            <option value="Negatif">Negatif</option>
+          </select>
+        </div>
+
+        {loading && (
+          <div className="preprocessing-state">
+            Memuat hasil pembobotan TF-IDF penelitian...
+          </div>
+        )}
+
+        {!loading && error && (
+          <div className="preprocessing-state error">
+            {error}
+          </div>
+        )}
+
+        {!loading && !error && (
+          <>
+            <div className="tfidf-research-list">
+              {paginatedData.map((item) => (
+                <TFIDFResearchCard
+                  key={item.no_data}
+                  item={item}
+                  onDetail={() => setDetail(item)}
+                />
+              ))}
+
+              {paginatedData.length === 0 && (
+                <div className="preprocessing-state">
+                  Tidak ada data TF-IDF yang sesuai dengan pencarian atau
+                  filter.
+                </div>
+              )}
+            </div>
+
+            <ResearchPagination
+              total={filteredData.length}
+              startIndex={startIndex}
+              currentPage={safePage}
+              totalPages={totalPages}
+              onPrev={halamanSebelumnyaTFIDF}
+              onNext={halamanBerikutnyaTFIDF}
+            />
+          </>
+        )}
+      </section>
+
+      <section className="research-card tfidf-simple-method">
+        <div className="research-section-heading">
+          <h2>Cara Pembentukan Fitur TF-IDF</h2>
+
+          <p>
+            TF-IDF dibentuk menggunakan 456 data training dan menghasilkan
+            675 fitur. Bobot akhir merupakan hasil TF × IDF, sedangkan data
+            testing ditransformasikan menggunakan vectorizer dari data training.
+          </p>
+        </div>
+
+        <div className="tfidf-simple-flow">
+          <div className="tfidf-simple-box">
+            <span>Data Training</span>
+            <strong>456 Ulasan</strong>
+          </div>
+
+          <div className="tfidf-simple-arrow">→</div>
+
+          <div className="tfidf-simple-box highlight">
+            <span>Pembobotan</span>
+            <strong>TF × IDF</strong>
+          </div>
+
+          <div className="tfidf-simple-arrow">→</div>
+
+          <div className="tfidf-simple-box">
+            <span>Hasil</span>
+            <strong>675 Fitur</strong>
+          </div>
+        </div>
+      </section>
+
+      {detail && (
+        <TFIDFDetailModal
+          item={detail}
+          onClose={() => setDetail(null)}
+        />
+      )}
+    </div>
+  );
+}
+
+function TFIDFResearchCard({ item, onDetail }) {
+  const topWeights = (item.bobot_tfidf || []).slice(0, 5);
+
+  const maxWeight =
+    topWeights.reduce(
+      (maksimum, weight) =>
+        Math.max(
+          maksimum,
+          Number(weight.bobot) || 0
+        ),
+      0
+    ) || 1;
+
+  return (
+    <article className="tfidf-data-card">
+      <div className="tfidf-data-header">
+        <strong className="tfidf-data-title">
+          Data ke-{item.no_data}
+        </strong>
+
+        <div className="tfidf-data-badges">
+          <span
+            className={`research-type-badge ${
+              item.jenis_data === "Training"
+                ? "training"
+                : "testing"
+            }`}
+          >
+            {item.jenis_data}
+          </span>
+
+          <SentimentBadge label={item.label} />
+        </div>
+      </div>
+
+      <div className="tfidf-stemming-preview">
+        <span>Hasil Stemming</span>
+        <code>{item.stemmed_text}</code>
+      </div>
+
+      <div className="tfidf-weight-preview">
+        <div className="tfidf-weight-preview-title">
+          <span>Bobot TF-IDF Tertinggi</span>
+
+          <small>
+            {item.jumlah_fitur_nonzero} fitur bernilai &gt; 0
+          </small>
+        </div>
+
+        {topWeights.length > 0 ? (
+          topWeights.map((weight) => {
+            const nilaiBobot = Number(weight.bobot) || 0;
+
+            const width = Math.min(
+              100,
+              Math.max(
+                0,
+                (nilaiBobot / maxWeight) * 100
+              )
+            );
+
+            return (
+              <div
+                className="tfidf-weight-row"
+                key={weight.kata}
+              >
+                <code>{weight.kata}</code>
+
+                <div className="tfidf-weight-bar">
+                  <span
+                    style={{
+                      width: `${width}%`
+                    }}
+                  ></span>
+                </div>
+
+                <strong>
+                  {formatDecimal(weight.bobot)}
+                </strong>
+              </div>
+            );
+          })
+        ) : (
+          <div className="tfidf-no-weight">
+            Tidak ada fitur yang dikenali vectorizer.
+          </div>
+        )}
+      </div>
+
+      <div className="tfidf-card-footer">
+        <button
+          type="button"
+          onClick={onDetail}
+        >
+          Lihat Detail Bobot
+        </button>
+      </div>
+    </article>
+  );
+}
+
+function TFIDFDetailModal({ item, onClose }) {
+  return (
+    <div
+      className="research-modal-overlay"
+      onMouseDown={(event) =>
+        event.target === event.currentTarget &&
+        onClose()
+      }
+    >
+      <div className="research-modal tfidf-detail-modal">
+        <div className="research-modal-scroll">
+          <div className="research-modal-header">
+            <div>
+              <h2>Data ke-{item.no_data}</h2>
+            </div>
+
+            <button
+              type="button"
+              className="research-modal-close"
+              aria-label="Tutup detail TF-IDF"
+              onClick={onClose}
+            >
+              ×
+            </button>
+          </div>
+
+          <div className="research-modal-original">
+            <div className="research-modal-original-heading">
+              <span>Ulasan Asli</span>
+            </div>
+
+            <p>{item.ulasan_asli}</p>
+          </div>
+
+          <div className="tfidf-modal-summary">
+            <div>
+              <span>Jenis Data</span>
+              <strong>{item.jenis_data}</strong>
+            </div>
+
+            <div>
+              <span>Posisi pada Split</span>
+              <strong>
+                {item.jenis_data} ke-{item.urutan_split}
+              </strong>
+            </div>
+
+            <div>
+              <span>Fitur Bobot &gt; 0</span>
+              <strong>{item.jumlah_fitur_nonzero}</strong>
+            </div>
+
+            <div>
+              <span>Sentimen</span>
+
+              <strong>
+                {Number(item.label) === 1
+                  ? "Positif"
+                  : "Negatif"}
+              </strong>
+            </div>
+          </div>
+
+          <div className="tfidf-modal-stemming">
+            <span>Hasil Stemming</span>
+            <code>{item.stemmed_text}</code>
+          </div>
+
+          <div className="tfidf-table-heading">
+            <h3>
+              Seluruh Fitur dengan Bobot TF-IDF &gt; 0
+            </h3>
+          </div>
+
+          <div className="tfidf-table-wrapper">
+            <table className="tfidf-detail-table">
+              <thead>
+                <tr>
+                  <th>No.</th>
+                  <th>Kata</th>
+                  <th>TF</th>
+                  <th>DF</th>
+                  <th>IDF</th>
+                  <th>Bobot TF-IDF</th>
+                </tr>
+              </thead>
+
+              <tbody>
+                {(item.bobot_tfidf || []).map(
+                  (row, index) => (
+                    <tr key={`${row.kata}-${index}`}>
+                      <td>{index + 1}</td>
+
+                      <td>
+                        <code>{row.kata}</code>
+                      </td>
+
+                      <td>{row.tf}</td>
+                      <td>{row.df}</td>
+
+                      <td>
+                        {formatDecimal(row.idf)}
+                      </td>
+
+                      <td className="tfidf-bobot-cell">
+                        {formatDecimal(row.bobot)}
+                      </td>
+                    </tr>
+                  )
+                )}
+
+                {(item.bobot_tfidf || []).length === 0 && (
+                  <tr>
+                    <td
+                      colSpan="6"
+                      className="tfidf-empty-table"
+                    >
+                      Tidak ada fitur dengan bobot TF-IDF &gt; 0.
+                    </td>
+                  </tr>
+                )}
+              </tbody>
+            </table>
+          </div>
+
+          <div className="research-note tfidf-modal-note">
+            <span>i</span>
+
+            <div>
+              <strong>Cara Membaca Bobot</strong>
+
+              <p>
+                TF menunjukkan frekuensi term pada satu dokumen, DF menunjukkan
+                jumlah dokumen training yang mengandung term, sedangkan IDF
+                menunjukkan bobot berdasarkan kemunculan term pada dokumen
+                training. Bobot TF-IDF pada tabel merupakan hasil TF × IDF.
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/* ============================================================
+   MODEL & EVALUASI
+   ============================================================ */
+
+function ModelTab() {
+  const [modelInfo, setModelInfo] = useState(null);
+  const [error, setError] = useState("");
+
+  useEffect(() => {
+    let active = true;
+    async function loadModel() {
+      try {
+        const response = await ambilModelPenelitian();
+        const data = response.data;
+        const report = data?.classification_report;
+        const cm = data?.confusion_matrix;
+        const validRate = value => typeof value === "number" && Number.isFinite(value) && value >= 0 && value <= 1;
+        if (!data || !validRate(data.akurasi) ||
+            !Number.isInteger(data.jumlah_data_testing) || data.jumlah_data_testing <= 0 ||
+            !Array.isArray(cm) || cm.length !== 2 ||
+            !cm.every(row => Array.isArray(row) && row.length === 2 && row.every(value => Number.isInteger(value) && value >= 0)) ||
+            cm.flat().reduce((sum, value) => sum + value, 0) !== data.jumlah_data_testing ||
+            !["0", "1", "weighted avg"].every(key =>
+              report?.[key] && ["precision", "recall", "f1-score"].every(metric => validRate(report[key][metric])) &&
+              Number.isFinite(report[key].support))) {
+          throw new Error("Metadata evaluasi dari backend tidak lengkap atau tidak valid.");
+        }
+        if (active) setModelInfo(data);
+      } catch (err) {
+        if (active) setError(err.message || "Gagal memuat evaluasi model.");
+      }
+    }
+    loadModel();
+    return () => { active = false; };
+  }, []);
+
+  if (error) return (
+    <div className="research-tab-content">
+      <section className="research-card" role="alert">
+        <h2>Evaluasi model 80:20 belum dapat ditampilkan</h2>
+        <p>{error}</p>
+        <p>Pastikan backend berjalan. Buka tab lain lalu kembali ke Model &amp; Evaluasi untuk mencoba lagi.</p>
+      </section>
+      <PerbandinganRasio />
+    </div>
+  );
+  if (!modelInfo) return <section className="research-card" role="status">Memuat evaluasi model dari backend...</section>;
+
+  const report = modelInfo.classification_report;
+  const weighted = report["weighted avg"];
+  const [[tn, fp], [fn, tp]] = modelInfo.confusion_matrix;
+  const percent = (value, digits = 2) => (value * 100).toLocaleString("id-ID", {
+    minimumFractionDigits: digits, maximumFractionDigits: digits
+  }) + "%";
+  const evaluationMetrics = [
+    { name: "Accuracy", value: percent(modelInfo.akurasi), description: "Ketepatan prediksi pada " + modelInfo.jumlah_data_testing + " data testing" },
+    { name: "Precision", value: percent(weighted.precision), description: "Weighted average seluruh kelas" },
+    { name: "Recall", value: percent(weighted.recall), description: "Weighted average seluruh kelas" },
+    { name: "F1-Score", value: percent(weighted["f1-score"]), description: "Weighted average seluruh kelas" }
+  ];
+  return (
+    <div className="research-tab-content">
+      <section className="research-card">
+        <div className="research-section-heading">
+          <h2>Evaluasi Model Awal — v1</h2>
+
+          <p>
+            Evaluasi dilakukan terhadap {modelInfo.jumlah_data_testing} data testing. Nilai Precision,
+            Recall, dan F1-Score berikut menggunakan weighted average.
+          </p>
+        </div>
+
+        <div className="metric-grid">
+          {evaluationMetrics.map((metric) => (
+            <MetricCard
+              key={metric.name}
+              name={metric.name}
+              value={metric.value}
+              description={metric.description}
+            />
+          ))}
+        </div>
+      </section>
+
+      <section className="research-two-column model-evaluation-grid">
+        <article className="research-card">
+          <div className="research-section-heading">
+            <h2>Confusion Matrix</h2>
+
+            <p>
+              Perbandingan antara label aktual dengan hasil prediksi model
+              pada data testing.
+            </p>
+          </div>
+
+          <div className="confusion-placeholder">
+            <div className="confusion-axis-label">
+              Prediksi Model
+            </div>
+
+            <div className="confusion-grid">
+              <div className="confusion-empty"></div>
+
+              <div className="confusion-head">
+                Negatif
+              </div>
+
+              <div className="confusion-head">
+                Positif
+              </div>
+
+              <div className="confusion-head vertical">
+                Negatif Aktual
+              </div>
+
+              <ConfusionValue
+                value={tn}
+                label="TN"
+                tone="correct"
+              />
+
+              <ConfusionValue
+                value={fp}
+                label="FP"
+                tone="error"
+              />
+
+              <div className="confusion-head vertical">
+                Positif Aktual
+              </div>
+
+              <ConfusionValue
+                value={fn}
+                label="FN"
+                tone="error"
+              />
+
+              <ConfusionValue
+                value={tp}
+                label="TP"
+                tone="correct"
+              />
+            </div>
+
+            <div className="confusion-legend">
+              <span>
+                <i className="correct"></i>
+                Prediksi benar
+              </span>
+
+              <span>
+                <i className="error"></i>
+                Prediksi salah
+              </span>
+            </div>
+          </div>
+        </article>
+
+        <article className="research-card class-evaluation-card">
+          <div className="research-section-heading">
+            <h2>Evaluasi per Kelas</h2>
+
+            <p>
+              Precision, Recall, dan F1-Score masing-masing kelas pada
+              {modelInfo.jumlah_data_testing} data testing.
+            </p>
+          </div>
+
+          <div className="class-metric-table-wrapper">
+            <table className="class-metric-table">
+              <thead>
+                <tr>
+                  <th>Kelas</th>
+                  <th>Precision</th>
+                  <th>Recall</th>
+                  <th>F1-Score</th>
+                  <th>Jumlah</th>
+                </tr>
+              </thead>
+
+              <tbody>
+                <tr>
+                  <td>
+                    <span className="class-table-badge negative">
+                      Negatif
+                    </span>
+                  </td>
+
+                  <td>{percent(report["0"].precision, 1)}</td>
+                  <td>{percent(report["0"].recall, 1)}</td>
+                  <td>{percent(report["0"]["f1-score"], 1)}</td>
+                  <td>{report["0"].support}</td>
+                </tr>
+
+                <tr>
+                  <td>
+                    <span className="class-table-badge positive">
+                      Positif
+                    </span>
+                  </td>
+
+                  <td>{percent(report["1"].precision, 1)}</td>
+                  <td>{percent(report["1"].recall, 1)}</td>
+                  <td>{percent(report["1"]["f1-score"], 1)}</td>
+                  <td>{report["1"].support}</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+
+          <div className="class-evaluation-note">
+            <span>i</span>
+
+            <p>
+              Recall kelas positif sebesar {percent(report["1"].recall, 1)} menunjukkan bahwa {tp} dari{" "}
+              {report["1"].support} ulasan positif pada data testing berhasil diprediksi sebagai
+              positif, sedangkan {fn} lainnya diprediksi sebagai negatif.
+            </p>
+          </div>
+        </article>
+      </section>
+      <PerbandinganRasio />
+    </div>
+  );
+}
+
+/* ============================================================
+   PERBANDINGAN TIGA RASIO PENELITIAN
+   Sumber: public/data/perbandingan_rasio_slearn.json
+   ============================================================ */
+
+function PerbandinganRasio() {
+  const [skenario, setSkenario] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState("");
+
+  useEffect(() => {
+    const controller = new AbortController();
+    async function loadPerbandingan() {
+      try {
+        const response = await fetch("/data/perbandingan_rasio_slearn.json", { signal: controller.signal });
+        if (!response.ok) throw new Error("File perbandingan_rasio_slearn.json tidak ditemukan.");
+        const json = await response.json();
+        const daftar = json?.skenario;
+        const rasioWajib = ["70:30", "80:20", "90:10"];
+        const valid = Array.isArray(daftar) && daftar.length === 3 &&
+          rasioWajib.every(rasio => daftar.some(item => item.rasio === rasio)) &&
+          daftar.every(item =>
+            Number.isInteger(item.data_latih) && Number.isInteger(item.data_uji) &&
+            Number.isInteger(item.jumlah_fitur) && item.data_latih + item.data_uji === 571 &&
+            item.jumlah_fitur > 0 &&
+            ["accuracy", "precision", "recall", "f1_score"].every(k =>
+              typeof item[k] === "number" && Number.isFinite(item[k]) && item[k] >= 0 && item[k] <= 100) &&
+            Array.isArray(item.confusion_matrix) && item.confusion_matrix.length === 2 &&
+            item.confusion_matrix.every(row => Array.isArray(row) && row.length === 2 &&
+              row.every(n => Number.isInteger(n) && n >= 0)) &&
+            item.confusion_matrix.flat().reduce((total, n) => total + n, 0) === item.data_uji
+          );
+        if (!valid) throw new Error("Struktur atau nilai data perbandingan tiga rasio tidak sesuai.");
+        if (!controller.signal.aborted) {
+          setSkenario(rasioWajib.map(rasio => daftar.find(item => item.rasio === rasio)));
+          setError("");
+        }
+      } catch (err) {
+        if (err.name !== "AbortError") setError(err.message || "Gagal membaca perbandingan rasio.");
+      } finally {
+        if (!controller.signal.aborted) setLoading(false);
+      }
+    }
+    loadPerbandingan();
+    return () => controller.abort();
+  }, []);
+
+  const persen = angka => Number(angka).toLocaleString("id-ID", {
+    minimumFractionDigits: 2, maximumFractionDigits: 2
+  }) + "%";
+
+  return (
+    <section className="research-card">
+      <div className="research-section-heading">
+        <h2>Perbandingan Tiga Rasio Data Training dan Testing</h2>
+        <p>Hasil eksperimen 70:30, 80:20, dan 90:10 menggunakan Logistic Regression dan TF-IDF.</p>
+      </div>
+
+      {loading && <p role="status">Memuat hasil perbandingan rasio...</p>}
+      {!loading && error && <p role="alert" style={{ color: "#b42318" }}>{error}</p>}
+
+      {!loading && !error && (
+        <>
+          <div className="class-metric-table-wrapper">
+            <table className="class-metric-table" style={{ minWidth: 760 }}>
+              <thead>
+                <tr>
+                  <th>Rasio</th><th>Data Latih</th><th>Data Uji</th><th>Fitur TF-IDF</th>
+                  <th>Accuracy</th><th>Precision</th><th>Recall</th><th>F1-Score</th>
+                </tr>
+              </thead>
+              <tbody>
+                {skenario.map(item => (
+                  <tr key={item.rasio} style={item.rasio === "80:20" ? { background: "#f0f6ff" } : {}}>
+                    <td><strong>{item.rasio}</strong>{item.rasio === "80:20" && <div style={{ fontSize: 10, color: "#2859b5" }}>Model utama</div>}</td>
+                    <td>{item.data_latih}</td><td>{item.data_uji}</td><td>{item.jumlah_fitur}</td>
+                    <td><strong>{persen(item.accuracy)}</strong></td>
+                    <td>{persen(item.precision)}</td><td>{persen(item.recall)}</td><td>{persen(item.f1_score)}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+
+          <div style={{ marginTop: 20 }}>
+            <h3 style={{ margin: "0 0 16px", fontSize: 15, color: "#142641" }}>Grafik Perbandingan Akurasi</h3>
+            <div style={{ overflowX: "auto", padding: "12px 4px 0" }}>
+              <div style={{ display: "flex", gap: 12, minWidth: 440, alignItems: "flex-start" }}>
+                <div style={{ height: 260, display: "flex", flexDirection: "column", justifyContent: "space-between", color: "#64748b", fontSize: 11, textAlign: "right", minWidth: 35 }}>
+                  {[100, 75, 50, 25, 0].map(nilai => <span key={nilai}>{nilai}%</span>)}
+                </div>
+                <div style={{ flex: 1 }}>
+                  <div style={{ height: 260, position: "relative", borderLeft: "1px solid #cbd5e1", borderBottom: "1px solid #94a3b8" }}>
+                    {[0, 25, 50, 75, 100].map(nilai => (
+                      <div key={nilai} style={{ position: "absolute", top: `${nilai}%`, left: 0, right: 0, borderTop: "1px dashed #e2e8f0", pointerEvents: "none" }} />
+                    ))}
+                    <div style={{ position: "absolute", inset: 0, display: "flex", justifyContent: "space-around", alignItems: "flex-end", padding: "0 24px" }}>
+                      {skenario.map(item => (
+                        <div key={item.rasio} style={{ width: "23%", maxWidth: 95, minWidth: 55, height: `${item.accuracy}%`, background: item.rasio === "80:20" ? "#295bcc" : "#7b9bc6", borderRadius: "6px 6px 0 0", position: "relative" }}>
+                          <strong style={{ position: "absolute", top: -22, left: 0, width: "100%", textAlign: "center", color: "#142641", fontSize: 12 }}>{persen(item.accuracy)}</strong>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                  <div style={{ display: "flex", justifyContent: "space-around", padding: "10px 24px 0" }}>
+                    {skenario.map(item => (
+                      <strong key={item.rasio} style={{ width: "23%", maxWidth: 95, minWidth: 55, textAlign: "center", fontSize: 12, color: "#334155" }}>{item.rasio}</strong>
+                    ))}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <h3 style={{ margin: "0 0 12px", fontSize: 14, color: "#142641" }}>Confusion Matrix per Rasio</h3>
+          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(190px,1fr))", gap: 12, marginBottom: 15 }}>
+            {skenario.map(item => {
+              const [[tn, fp], [fn, tp]] = item.confusion_matrix;
+              return (
+                <div key={item.rasio} style={{ padding: 12, border: "1px solid #e1e6ef", borderRadius: 9, background: item.rasio === "80:20" ? "#f5f8ff" : "#fff" }}>
+                  <strong style={{ display: "block", marginBottom: 8, color: "#142641", fontSize: 12 }}>Rasio {item.rasio}</strong>
+                  <table style={{ width: "100%", borderCollapse: "collapse", textAlign: "center", fontSize: 11 }}>
+                    <thead><tr><th style={{ padding: 5 }}>Aktual / Prediksi</th><th>Negatif</th><th>Positif</th></tr></thead>
+                    <tbody>
+                      <tr><th style={{ padding: 5 }}>Negatif</th><td style={{ background: "#eaf1ff", padding: 8 }}>{tn} (TN)</td><td style={{ background: "#fff1ef", padding: 8 }}>{fp} (FP)</td></tr>
+                      <tr><th style={{ padding: 5 }}>Positif</th><td style={{ background: "#fff1ef", padding: 8 }}>{fn} (FN)</td><td style={{ background: "#eaf1ff", padding: 8 }}>{tp} (TP)</td></tr>
+                    </tbody>
+                  </table>
+                </div>
+              );
+            })}
+          </div>
+
+          <div className="research-note">
+            <span>i</span>
+            <div>
+              <strong>Catatan Evaluasi</strong>
+              <p>Precision, Recall, dan F1-Score menggunakan weighted average. Setiap rasio memiliki jumlah data uji berbeda sehingga hasilnya tidak langsung menunjukkan satu rasio selalu lebih baik. Model utama untuk prediksi website tetap rasio 80:20 dengan akurasi 93,04%; eksperimen rasio lain hanya ditampilkan sebagai pembanding.</p>
+            </div>
+          </div>
+        </>
+      )}
+    </section>
+  );
+}
+
+/* ============================================================
+   COMPONENT
+   ============================================================ */
+
+function useEscapeModal(value, close) {
+  useEffect(() => {
+    if (!value) return;
+
+    const handleEscape = (event) => {
+      if (event.key === "Escape") {
+        close();
+      }
+    };
+
+    document.addEventListener("keydown", handleEscape);
+
+    return () =>
+      document.removeEventListener("keydown", handleEscape);
+  }, [value, close]);
+}
+
+function formatDecimal(value) {
+  const number = Number(value);
+
+  if (!Number.isFinite(number)) {
+    return "-";
+  }
+
+  return number
+    .toFixed(6)
+    .replace(".", ",");
+}
+
+function StatCard({ title, value, info }) {
+  return (
+    <article className="research-stat-card">
+      <span>{title}</span>
+      <strong>{value}</strong>
+      <small>{info}</small>
+    </article>
+  );
+}
+
+function FlowBox({ title, subtitle }) {
+  return (
+    <div className="flow-box">
+      <strong>{title}</strong>
+      <span>{subtitle}</span>
+    </div>
+  );
+}
+
+function FlowArrow() {
+  return (
+    <div className="flow-arrow">
+      →
+    </div>
+  );
+}
+
+function MetricCard({
+  name,
+  value,
+  description
+}) {
+  return (
+    <article className="metric-card">
+      <span>{name}</span>
+      <strong>{value}</strong>
+      <small>{description}</small>
+    </article>
+  );
+}
+
+function SentimentBadge({ label }) {
+  const positive = Number(label) === 1;
+
+  return (
+    <span
+      className={`research-label-badge ${
+        positive
+          ? "positive"
+          : "negative"
+      }`}
+    >
+      {positive ? "Positif" : "Negatif"}
+    </span>
+  );
+}
+
+function NormalizationRow({ from, to }) {
+  return (
+    <div>
+      <code>{from}</code>
+
+      <span className="normalization-arrow">
+        →
+      </span>
+
+      <strong>{to}</strong>
+    </div>
+  );
+}
+
+function ResearchProcessStep({
+  number,
+  title,
+  value
+}) {
+  return (
+    <div className="research-modal-step">
+      <div className="research-modal-step-number">
+        {number}
+      </div>
+
+      <div>
+        <strong>{title}</strong>
+        <p>{value || "-"}</p>
+      </div>
+    </div>
+  );
+}
+
+function ResearchPagination({
+  total,
+  startIndex,
+  currentPage,
+  totalPages,
+  onPrev,
+  onNext
+}) {
+  return (
+    <div className="research-data-pagination">
+      <span>
+        Menampilkan{" "}
+        {total === 0 ? 0 : startIndex + 1}
+        {" - "}
+        {Math.min(
+          startIndex + ITEMS_PER_PAGE,
+          total
+        )}{" "}
+        dari {total} data
+      </span>
+
+      <div>
+        <button
+          type="button"
+          disabled={currentPage <= 1}
+          onClick={onPrev}
+        >
+          ‹
+        </button>
+
+        <strong>
+          {currentPage} / {totalPages}
+        </strong>
+
+        <button
+          type="button"
+          disabled={currentPage >= totalPages}
+          onClick={onNext}
+        >
+          ›
+        </button>
+      </div>
+    </div>
+  );
+}
+
+function ConfusionValue({
+  value,
+  label,
+  tone
+}) {
+  return (
+    <div className={`confusion-value ${tone}`}>
+      <strong>{value}</strong>
+      <small>{label}</small>
+    </div>
+  );
+}
+
+export default PenelitianModel;
diff --git a/web_slearn/src/pages/PrediksiUlasan.jsx b/web_slearn/src/pages/PrediksiUlasan.jsx
new file mode 100644
index 0000000..f7c83a2
--- /dev/null
+++ b/web_slearn/src/pages/PrediksiUlasan.jsx
@@ -0,0 +1,567 @@
+import { ModelVersion, TfidfNote } from "../components/ModelContext";
+import { useState } from "react";
+import { prediksiUlasan } from "../services/api";
+import "../styles/prediksi-ulasan.css";
+
+
+function PrediksiUlasan() {
+  const [teks, setTeks] = useState("");
+  const [hasil, setHasil] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [detailTerbuka, setDetailTerbuka] = useState(false);
+  const [error, setError] = useState("");
+
+
+  /* ============================================================
+     INPUT ULASAN
+     ============================================================ */
+
+  const handleChange = (event) => {
+    setTeks(event.target.value);
+    setError("");
+
+    if (hasil) {
+      setHasil(null);
+      setDetailTerbuka(false);
+    }
+  };
+
+
+  /* ============================================================
+     MULAI ANALISIS
+     ============================================================ */
+
+  const mulaiAnalisis = async () => {
+    const input = teks.trim();
+
+    if (!input) {
+      setError(
+        "Masukkan ulasan terlebih dahulu."
+      );
+
+      setHasil(null);
+
+      return;
+    }
+
+    setLoading(true);
+    setError("");
+    setHasil(null);
+
+    try {
+      const response =
+        await prediksiUlasan(input);
+
+      setHasil(
+        response.data
+      );
+    } catch (err) {
+      setError(
+        err.message ||
+          "Ulasan tidak dapat dianalisis."
+      );
+    } finally {
+      setLoading(false);
+    }
+  };
+
+
+  /* ============================================================
+     RESET
+     ============================================================ */
+
+  const resetPrediksi = () => {
+    setTeks("");
+    setHasil(null);
+    setError("");
+    setDetailTerbuka(false);
+  };
+
+
+  /* ============================================================
+     DETAIL PREPROCESSING
+     ============================================================ */
+
+  const prosesPreprocessing =
+    hasil
+      ? [
+          [
+            "Cleaning",
+            hasil.preprocessing.cleaning
+          ],
+          [
+            "Case Folding",
+            hasil.preprocessing.case_folding
+          ],
+          [
+            "Normalisasi",
+            hasil.preprocessing.normalization
+          ],
+          [
+            "Tokenizing",
+            Array.isArray(
+              hasil.preprocessing.tokenizing
+            )
+              ? JSON.stringify(
+                  hasil.preprocessing.tokenizing
+                )
+              : hasil.preprocessing.tokenizing
+          ],
+          [
+            "Stopword Removal",
+            hasil.preprocessing.stopword_removal
+          ],
+          [
+            "Stemming",
+            hasil.preprocessing.stemming
+          ]
+        ]
+      : [];
+
+
+  const hasilPositif =
+    hasil?.sentimen === "Positif";
+
+
+  /* ============================================================
+     TAMPILAN
+     ============================================================ */
+
+  return (
+    <div className="prediksi-page">
+
+      {/* ========================================================
+          HEADING
+          ======================================================== */}
+
+      <div className="prediksi-heading">
+
+        <h1>
+          Prediksi Satu Ulasan
+        </h1>
+
+        <p>
+          Masukkan satu ulasan S-Learn untuk memperoleh hasil prediksi sentimen.
+        </p>
+
+      </div>
+
+
+      {/* ========================================================
+          INPUT & HASIL
+          ======================================================== */}
+
+      <section className="prediksi-grid">
+
+        {/* ======================================================
+            INPUT
+            ====================================================== */}
+
+        <article className="prediksi-card input-card">
+
+          <div className="prediksi-section-heading">
+            <h2>
+              Masukkan Ulasan
+            </h2>
+          </div>
+
+
+          <textarea
+            id="ulasan-prediksi"
+            aria-label="Ulasan S-Learn"
+            rows="7"
+            value={teks}
+            onChange={handleChange}
+            placeholder="Contoh: S-Learn sering error saat digunakan untuk mengumpulkan tugas..."
+          />
+
+
+          <div className="input-information">
+            <span>
+              {teks.length} karakter
+            </span>
+          </div>
+
+
+          {error && (
+            <div className="prediksi-error">
+              {error}
+            </div>
+          )}
+
+
+          <div className="prediksi-actions">
+
+            <button
+              type="button"
+              className="prediksi-secondary-button"
+              onClick={resetPrediksi}
+              disabled={!teks && !hasil}
+            >
+              Bersihkan
+            </button>
+
+
+            <button
+              type="button"
+              className="prediksi-primary-button"
+              onClick={mulaiAnalisis}
+              disabled={loading}
+            >
+              {loading
+                ? "Menganalisis..."
+                : "Mulai Analisis"}
+            </button>
+
+          </div>
+
+        </article>
+
+
+        {/* ======================================================
+            HASIL
+            ====================================================== */}
+
+        <article className="prediksi-card result-card">
+{hasil && <ModelVersion value={hasil.model_version} />}
+
+          <div className="prediksi-section-heading">
+            <h2>
+              Sentimen Ulasan
+            </h2>
+          </div>
+
+
+          {!hasil && (
+            <div className="empty-prediction">
+
+              <div className="empty-icon">
+                S
+              </div>
+
+              <strong>
+                Hasil prediksi akan muncul di sini
+              </strong>
+
+              <p>
+                Setelah ulasan dianalisis, hasil sentimen akan ditampilkan pada bagian ini.
+              </p>
+
+            </div>
+          )}
+
+
+          {hasil && (
+            <div className="prediction-result">
+
+              <div className="analyzed-text">
+
+                <span>
+                  Ulasan yang dianalisis
+                </span>
+
+                <p>
+                  {hasil.teks}
+                </p>
+
+              </div>
+
+
+              <div
+                className={
+                  `prediction-sentiment-box ${
+                    hasilPositif
+                      ? "positive-state"
+                      : "negative-state"
+                  }`
+                }
+              >
+
+                <span>
+                  Sentimen
+                </span>
+
+                <strong
+                  className={
+                    `sentiment-result-badge ${
+                      hasilPositif
+                        ? "prediction-positive"
+                        : "prediction-negative"
+                    }`
+                  }
+                >
+                  {hasil.sentimen}
+                </strong>
+
+              </div>
+
+
+              <button
+                type="button"
+                className="lihat-proses-button"
+                onClick={() =>
+                  setDetailTerbuka(true)
+                }
+              >
+                Lihat Proses
+              </button>
+
+            </div>
+          )}
+
+        </article>
+
+      </section>
+
+
+      {/* ========================================================
+          INFORMASI PIPELINE
+          ======================================================== */}
+
+      <section className="prediksi-info">
+
+        <div className="prediksi-info-icon">
+          i
+        </div>
+
+        <div>
+
+          <strong>
+            Pipeline Analisis
+          </strong>
+
+          <p>
+            Ulasan diproses otomatis dengan tahapan preprocessing yang sama,
+            ditransformasikan menggunakan vectorizer TF-IDF yang telah dibentuk
+            dari data training, lalu diprediksi oleh model Logistic Regression
+            tanpa pelatihan ulang.
+          </p>
+
+        </div>
+
+      </section>
+
+
+      {/* ========================================================
+          MODAL DETAIL
+          ======================================================== */}
+
+      {detailTerbuka && hasil && (
+
+        <div
+          className="prediksi-overlay"
+          onClick={() =>
+            setDetailTerbuka(false)
+          }
+        >
+
+          <div
+            className="prediksi-modal"
+            onClick={(event) =>
+              event.stopPropagation()
+            }
+          >
+
+            {/* ==================================================
+                HEADER MODAL
+                ================================================== */}
+
+            <div className="prediksi-modal-header">
+
+              <div>
+
+                <span>
+                  DETAIL ANALISIS
+                </span>
+
+                <h2>
+                  Proses Analisis Ulasan
+                </h2>
+
+              </div>
+
+
+              <button
+                type="button"
+                aria-label="Tutup detail"
+                onClick={() =>
+                  setDetailTerbuka(false)
+                }
+              >
+                ×
+              </button>
+
+            </div>
+
+
+            {/* ==================================================
+                ULASAN ASLI
+                ================================================== */}
+
+            <div className="prediksi-original">
+
+              <span>
+                Ulasan Asli
+              </span>
+
+              <p>
+                {hasil.teks}
+              </p>
+
+            </div>
+
+
+            {/* ==================================================
+                PREPROCESSING
+                ================================================== */}
+
+            <div className="prediksi-step-list">
+
+              {prosesPreprocessing.map(
+                (
+                  [nama, proses],
+                  index
+                ) => (
+
+                  <div
+                    className="prediksi-step"
+                    key={nama}
+                  >
+
+                    <span>
+                      {index + 1}
+                    </span>
+
+                    <div>
+
+                      <strong>
+                        {nama}
+                      </strong>
+
+                      <p>
+                        {proses}
+                      </p>
+
+                    </div>
+
+                  </div>
+
+                )
+              )}
+
+            </div>
+
+
+            {/* ==================================================
+                TF-IDF
+                ================================================== */}
+
+            <div className="prediksi-tfidf">
+
+              <div className="prediksi-modal-subheading">
+
+                <h3>
+                  Bobot TF-IDF
+                </h3><TfidfNote />
+
+              </div>
+
+
+              {hasil.tfidf_top.length > 0 ? (
+
+                hasil.tfidf_top.map(
+                  (item) => (
+
+                    <div
+                      className="prediksi-tfidf-row"
+                      key={item.kata}
+                    >
+
+                      <span>
+                        {item.kata}
+                      </span>
+
+
+                      <div>
+
+                        <i
+                          style={{
+                            width: `${
+                              Math.min(
+                                item.bobot /
+                                  hasil.tfidf_top[0].bobot,
+                                1
+                              ) * 100
+                            }%`
+                          }}
+                        ></i>
+
+                      </div>
+
+
+                      <em>
+                        {item.bobot
+                          .toFixed(6)
+                          .replace(".", ",")}
+                      </em>
+
+                    </div>
+
+                  )
+                )
+
+              ) : (
+
+                <p className="prediksi-no-tfidf">
+                  Tidak ada fitur TF-IDF yang dikenali.
+                </p>
+
+              )}
+
+            </div>
+
+
+            {/* ==================================================
+                HASIL SENTIMEN MODAL
+                ================================================== */}
+
+            <div
+              className={
+                `prediksi-modal-result ${
+                  hasilPositif
+                    ? "positive-state"
+                    : "negative-state"
+                }`
+              }
+            >
+
+              <span>
+                Prediksi Sentimen
+              </span>
+
+              <strong
+                className={
+                  `sentiment-result-badge ${
+                    hasilPositif
+                      ? "prediction-positive"
+                      : "prediction-negative"
+                  }`
+                }
+              >
+                {hasil.sentimen}
+              </strong>
+
+            </div>
+
+          </div>
+
+        </div>
+
+      )}
+
+    </div>
+  );
+}
+
+
+export default PrediksiUlasan;
\ No newline at end of file
diff --git a/web_slearn/src/pages/RiwayatAnalisis.jsx b/web_slearn/src/pages/RiwayatAnalisis.jsx
new file mode 100644
index 0000000..d6ef10f
--- /dev/null
+++ b/web_slearn/src/pages/RiwayatAnalisis.jsx
@@ -0,0 +1,1554 @@
+import { ModelVersion, TfidfNote } from "../components/ModelContext";
+import {
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+
+import { useNavigate } from "react-router-dom";
+
+import {
+  ambilRiwayatAnalisis,
+  ambilRiwayatPrediksi,
+  ambilDetailPrediksi
+} from "../services/api";
+
+import "../styles/riwayat-analisis.css";
+
+const ITEMS_PER_PAGE = 10;
+
+const NAMA_BULAN = [
+  "Januari",
+  "Februari",
+  "Maret",
+  "April",
+  "Mei",
+  "Juni",
+  "Juli",
+  "Agustus",
+  "September",
+  "Oktober",
+  "November",
+  "Desember"
+];
+
+/* ============================================================
+   FORMAT WAKTU
+   ============================================================ */
+
+function formatWaktu(value) {
+  if (!value) {
+    return {
+      date: "-",
+      time: "-"
+    };
+  }
+
+  const [tanggalRaw, waktuRaw = ""] =
+    String(value).split("T");
+
+  const bagianTanggal =
+    tanggalRaw.split("-");
+
+  if (bagianTanggal.length !== 3) {
+    return {
+      date: value,
+      time: "-"
+    };
+  }
+
+  const [year, month, day] =
+    bagianTanggal.map(Number);
+
+  if (
+    !year ||
+    !month ||
+    !day ||
+    !NAMA_BULAN[month - 1]
+  ) {
+    return {
+      date: value,
+      time: "-"
+    };
+  }
+
+  const time = waktuRaw
+    ? waktuRaw
+        .slice(0, 5)
+        .replace(":", ".")
+    : "-";
+
+  return {
+    date: `${day} ${NAMA_BULAN[month - 1]} ${year}`,
+    time
+  };
+}
+
+/* ============================================================
+   FORMAT TF-IDF
+   ============================================================ */
+
+function formatBobot(value) {
+  const number = Number(value);
+
+  if (!Number.isFinite(number)) {
+    return "-";
+  }
+
+  return number
+    .toFixed(6)
+    .replace(".", ",");
+}
+
+function formatTokenizing(value) {
+  if (Array.isArray(value)) {
+    return JSON.stringify(value);
+  }
+
+  return value || "-";
+}
+
+/* ============================================================
+   HALAMAN
+   ============================================================ */
+
+function RiwayatAnalisis() {
+  const navigate = useNavigate();
+
+  const detailSectionRef =
+    useRef(null);
+
+  const [activeTab, setActiveTab] =
+    useState("csv");
+
+  const [riwayatCSV, setRiwayatCSV] =
+    useState([]);
+
+  const [
+    riwayatPrediksi,
+    setRiwayatPrediksi
+  ] = useState([]);
+
+  const [search, setSearch] =
+    useState("");
+
+  const [sort, setSort] =
+    useState("terbaru");
+
+  const [loadingCSV, setLoadingCSV] =
+    useState(true);
+
+  const [
+    loadingPrediksi,
+    setLoadingPrediksi
+  ] = useState(true);
+
+  const [errorCSV, setErrorCSV] =
+    useState("");
+
+  const [
+    errorPrediksi,
+    setErrorPrediksi
+  ] = useState("");
+
+  const [
+    currentPage,
+    setCurrentPage
+  ] = useState(1);
+
+  const [
+    detailPrediksi,
+    setDetailPrediksi
+  ] = useState(null);
+
+  const [
+    loadingDetail,
+    setLoadingDetail
+  ] = useState(false);
+
+  const [
+    detailError,
+    setDetailError
+  ] = useState("");
+
+  /* ==========================================================
+     AMBIL RIWAYAT CSV
+     ========================================================== */
+
+  useEffect(() => {
+    let aktif = true;
+
+    async function loadCSV() {
+      try {
+        setLoadingCSV(true);
+        setErrorCSV("");
+
+        const response =
+          await ambilRiwayatAnalisis();
+
+        if (
+          aktif &&
+          response.status === "success"
+        ) {
+          setRiwayatCSV(
+            response.data || []
+          );
+        }
+      } catch (err) {
+        if (aktif) {
+          setErrorCSV(
+            err.message ||
+              "Riwayat analisis CSV tidak dapat dimuat."
+          );
+        }
+      } finally {
+        if (aktif) {
+          setLoadingCSV(false);
+        }
+      }
+    }
+
+    loadCSV();
+
+    return () => {
+      aktif = false;
+    };
+  }, []);
+
+  /* ==========================================================
+     AMBIL RIWAYAT PREDIKSI
+     ========================================================== */
+
+  useEffect(() => {
+    let aktif = true;
+
+    async function loadPrediksi() {
+      try {
+        setLoadingPrediksi(true);
+        setErrorPrediksi("");
+
+        const response =
+          await ambilRiwayatPrediksi();
+
+        if (
+          aktif &&
+          response.status === "success"
+        ) {
+          setRiwayatPrediksi(
+            response.data || []
+          );
+        }
+      } catch (err) {
+        if (aktif) {
+          setErrorPrediksi(
+            err.message ||
+              "Riwayat Prediksi Satu Ulasan tidak dapat dimuat."
+          );
+        }
+      } finally {
+        if (aktif) {
+          setLoadingPrediksi(false);
+        }
+      }
+    }
+
+    loadPrediksi();
+
+    return () => {
+      aktif = false;
+    };
+  }, []);
+
+  /* ==========================================================
+     RESET SAAT TAB BERGANTI
+     ========================================================== */
+
+  function changeTab(value) {
+    setActiveTab(value); setSearch(""); setSort("terbaru"); setCurrentPage(1); setDetailPrediksi(null);
+  }
+  function changeSearch(value) { setSearch(value); setCurrentPage(1); }
+  function changeSort(value) { setSort(value); setCurrentPage(1); }
+
+  /* ==========================================================
+     AUTO SCROLL DETAIL
+     ========================================================== */
+
+  useEffect(() => {
+    if (
+      activeTab === "prediksi" &&
+      (
+        loadingDetail ||
+        detailPrediksi ||
+        detailError
+      )
+    ) {
+      window.setTimeout(() => {
+        detailSectionRef.current
+          ?.scrollIntoView({
+            behavior: "smooth",
+            block: "start"
+          });
+      }, 80);
+    }
+  }, [
+    activeTab,
+    loadingDetail,
+    detailPrediksi,
+    detailError
+  ]);
+
+  /* ==========================================================
+     NOMOR URUT BATCH
+
+     Batch paling lama = Batch 1
+     Batch berikutnya = Batch 2, 3, 4, dst.
+     ========================================================== */
+
+  const batchNumberMap =
+    useMemo(() => {
+      const urutanBatch =
+        [...riwayatCSV].sort(
+          (a, b) => {
+            const waktuA =
+              String(
+                a.created_at || ""
+              );
+
+            const waktuB =
+              String(
+                b.created_at || ""
+              );
+
+            const hasilWaktu =
+              waktuA.localeCompare(
+                waktuB
+              );
+
+            if (hasilWaktu !== 0) {
+              return hasilWaktu;
+            }
+
+            return String(
+              a.batch_id || ""
+            ).localeCompare(
+              String(
+                b.batch_id || ""
+              )
+            );
+          }
+        );
+
+      const map = new Map();
+
+      urutanBatch.forEach(
+        (item, index) => {
+          map.set(
+            item.batch_id,
+            index + 1
+          );
+        }
+      );
+
+      return map;
+    }, [riwayatCSV]);
+
+  /* ==========================================================
+     RINGKASAN CSV
+     ========================================================== */
+
+  const totalBatch =
+    riwayatCSV.length;
+
+  const totalUlasan =
+    riwayatCSV.reduce(
+      (total, item) =>
+        total +
+        Number(
+          item.total_data || 0
+        ),
+      0
+    );
+
+  const totalPositif =
+    riwayatCSV.reduce(
+      (total, item) =>
+        total +
+        Number(
+          item.total_positive || 0
+        ),
+      0
+    );
+
+  const totalNegatif =
+    riwayatCSV.reduce(
+      (total, item) =>
+        total +
+        Number(
+          item.total_negative || 0
+        ),
+      0
+    );
+
+  /* ==========================================================
+     RINGKASAN PREDIKSI SATU ULASAN
+     ========================================================== */
+
+  const totalPrediksi =
+    riwayatPrediksi.length;
+
+  const totalPrediksiPositif =
+    riwayatPrediksi.filter(
+      (item) =>
+        Number(item.label) === 1
+    ).length;
+
+  const totalPrediksiNegatif =
+    riwayatPrediksi.filter(
+      (item) =>
+        Number(item.label) === 0
+    ).length;
+
+  /* ==========================================================
+     SEARCH + SORT
+     ========================================================== */
+
+  const filteredData =
+    useMemo(() => {
+      const keyword =
+        search
+          .trim()
+          .toLowerCase();
+
+      const sumberData =
+        activeTab === "csv"
+          ? riwayatCSV
+          : riwayatPrediksi;
+
+      const hasil =
+        sumberData.filter(
+          (item) => {
+            if (
+              activeTab === "csv"
+            ) {
+              const fileName =
+                String(
+                  item.file_name || ""
+                ).toLowerCase();
+
+              const column =
+                String(
+                  item.selected_column ||
+                    ""
+                ).toLowerCase();
+
+              const batchId =
+                String(
+                  item.batch_id || ""
+                ).toLowerCase();
+
+              const nomorBatch =
+                batchNumberMap.get(
+                  item.batch_id
+                );
+
+              const batchTampilan =
+                nomorBatch
+                  ? `batch ${nomorBatch}`
+                  : "";
+
+              return (
+                fileName.includes(
+                  keyword
+                ) ||
+                column.includes(
+                  keyword
+                ) ||
+                batchId.includes(
+                  keyword
+                ) ||
+                batchTampilan.includes(
+                  keyword
+                )
+              );
+            }
+
+            const id =
+              String(
+                item.id || ""
+              ).toLowerCase();
+
+            const teks =
+              String(
+                item.teks || ""
+              ).toLowerCase();
+
+            const sentimen =
+              String(
+                item.sentimen || ""
+              ).toLowerCase();
+
+            return (
+              id.includes(keyword) ||
+              teks.includes(keyword) ||
+              sentimen.includes(
+                keyword
+              )
+            );
+          }
+        );
+
+      return [...hasil].sort(
+        (a, b) => {
+          const waktuA =
+            String(
+              a.created_at || ""
+            );
+
+          const waktuB =
+            String(
+              b.created_at || ""
+            );
+
+          if (
+            sort === "terlama"
+          ) {
+            return waktuA.localeCompare(
+              waktuB
+            );
+          }
+
+          return waktuB.localeCompare(
+            waktuA
+          );
+        }
+      );
+    }, [
+      activeTab,
+      riwayatCSV,
+      riwayatPrediksi,
+      batchNumberMap,
+      search,
+      sort
+    ]);
+
+  /* ==========================================================
+     PAGINATION
+     ========================================================== */
+
+  const totalPages =
+    Math.max(
+      1,
+      Math.ceil(
+        filteredData.length /
+          ITEMS_PER_PAGE
+      )
+    );
+
+  const safeCurrentPage =
+    Math.min(
+      currentPage,
+      totalPages
+    );
+
+  const startIndex =
+    (
+      safeCurrentPage - 1
+    ) * ITEMS_PER_PAGE;
+
+  const paginatedData =
+    filteredData.slice(
+      startIndex,
+      startIndex +
+        ITEMS_PER_PAGE
+    );
+
+  const halamanSebelumnya =
+    () => {
+      setCurrentPage(
+        (page) =>
+          Math.max(
+            1,
+            page - 1
+          )
+      );
+    };
+
+  const halamanBerikutnya =
+    () => {
+      setCurrentPage(
+        (page) =>
+          Math.min(
+            totalPages,
+            page + 1
+          )
+      );
+    };
+
+  /* ==========================================================
+     BUKA HASIL CSV
+     ========================================================== */
+
+  const bukaHasilCSV =
+    (item) => {
+      navigate(
+        `/hasil-analisis/${item.batch_id}`
+      );
+    };
+
+  /* ==========================================================
+     BUKA DETAIL PREDIKSI
+     ========================================================== */
+
+  const bukaDetailPrediksi =
+    async (item) => {
+      try {
+        setLoadingDetail(true);
+        setDetailError("");
+        setDetailPrediksi(null);
+
+        const response =
+          await ambilDetailPrediksi(
+            item.id
+          );
+
+        if (
+          response.status ===
+          "success"
+        ) {
+          setDetailPrediksi(
+            response.data
+          );
+        }
+      } catch (err) {
+        setDetailError(
+          err.message ||
+            "Detail prediksi tidak dapat dimuat."
+        );
+      } finally {
+        setLoadingDetail(false);
+      }
+    };
+
+  const loading =
+    activeTab === "csv"
+      ? loadingCSV
+      : loadingPrediksi;
+
+  const error =
+    activeTab === "csv"
+      ? errorCSV
+      : errorPrediksi;
+
+  return (
+    <div className="riwayat-page">
+
+      {/* ======================================================
+          HEADING
+          ====================================================== */}
+
+      <div className="riwayat-heading">
+        <div>
+          <h1>
+            Riwayat Analisis
+          </h1>
+
+          <p>
+            Riwayat Analisis CSV dan Prediksi Satu Ulasan yang telah
+            diproses menggunakan model sentimen S-Learn.
+          </p>
+        </div>
+
+        <button
+          type="button"
+          className="riwayat-primary-button"
+          onClick={() =>
+            navigate(
+              activeTab === "csv"
+                ? "/analisis-csv"
+                : "/prediksi"
+            )
+          }
+        >
+          {activeTab === "csv"
+            ? "Analisis CSV Baru"
+            : "Prediksi Ulasan Baru"}
+        </button>
+      </div>
+
+      {/* ======================================================
+          TAB
+          ====================================================== */}
+
+      <div className="riwayat-tabs">
+        <button
+          type="button"
+          className={
+            activeTab === "csv"
+              ? "riwayat-tab active"
+              : "riwayat-tab"
+          }
+          onClick={() =>
+            changeTab("csv")
+          }
+        >
+          Analisis CSV
+        </button>
+
+        <button
+          type="button"
+          className={
+            activeTab === "prediksi"
+              ? "riwayat-tab active"
+              : "riwayat-tab"
+          }
+          onClick={() =>
+            changeTab(
+              "prediksi"
+            )
+          }
+        >
+          Prediksi Satu Ulasan
+        </button>
+      </div>
+
+      {/* ======================================================
+          STATISTIK CSV
+          ====================================================== */}
+
+      {activeTab === "csv" && (
+        <section className="riwayat-stat-grid">
+
+          <article className="riwayat-stat-card stat-blue">
+            <span>
+              Total Batch
+            </span>
+
+            <strong>
+              {totalBatch}
+            </strong>
+          </article>
+
+          <article className="riwayat-stat-card stat-purple">
+            <span>
+              Ulasan dari seluruh batch CSV
+            </span>
+
+            <strong>
+              {totalUlasan}
+            </strong>
+          </article>
+
+          <article className="riwayat-stat-card stat-green">
+            <span>
+              Hasil klasifikasi positif
+            </span>
+
+            <strong className="riwayat-positive">
+              {totalPositif}
+            </strong>
+          </article>
+
+          <article className="riwayat-stat-card stat-red">
+            <span>
+              Hasil klasifikasi negatif
+            </span>
+
+            <strong className="riwayat-negative">
+              {totalNegatif}
+            </strong>
+          </article>
+
+        </section>
+      )}
+
+      {/* ======================================================
+          STATISTIK PREDIKSI SATU ULASAN
+          ====================================================== */}
+
+      {activeTab === "prediksi" && (
+        <section className="riwayat-stat-grid">
+
+          <article className="riwayat-stat-card stat-blue">
+            <span>
+              Total Prediksi
+            </span>
+
+            <strong>
+              {totalPrediksi}
+            </strong>
+          </article>
+
+          <article className="riwayat-stat-card stat-green">
+            <span>
+              Prediksi sentimen positif
+            </span>
+
+            <strong className="riwayat-positive">
+              {totalPrediksiPositif}
+            </strong>
+          </article>
+
+          <article className="riwayat-stat-card stat-red">
+            <span>
+              Prediksi sentimen negatif
+            </span>
+
+            <strong className="riwayat-negative">
+              {totalPrediksiNegatif}
+            </strong>
+          </article>
+
+        </section>
+      )}
+
+      {/* ======================================================
+          TABEL RIWAYAT
+          ====================================================== */}
+
+      <section className="riwayat-card">
+        <div className="riwayat-card-header">
+
+          <div className="riwayat-section-heading">
+            <span>
+              {activeTab === "csv"
+                ? "RIWAYAT BATCH"
+                : "RIWAYAT PREDIKSI"}
+            </span>
+
+            <h2>
+              {activeTab === "csv"
+                ? "Daftar Analisis CSV"
+                : "Daftar Prediksi Satu Ulasan"}
+            </h2>
+          </div>
+
+          <div className="riwayat-tools">
+            <input
+              type="search"
+              placeholder={
+                activeTab === "csv"
+                  ? "Cari nama file, kolom, atau batch..."
+                  : "Cari ID, ulasan, atau sentimen..."
+              }
+              value={search}
+              onChange={(event) =>
+                changeSearch(
+                  event.target.value
+                )
+              }
+            />
+
+            <select
+              value={sort}
+              onChange={(event) =>
+                changeSort(
+                  event.target.value
+                )
+              }
+            >
+              <option value="terbaru">
+                Terbaru
+              </option>
+
+              <option value="terlama">
+                Terlama
+              </option>
+            </select>
+          </div>
+
+        </div>
+
+        {loading ? (
+          <div className="riwayat-empty">
+            {activeTab === "csv"
+              ? "Memuat riwayat analisis CSV..."
+              : "Memuat riwayat Prediksi Satu Ulasan..."}
+          </div>
+        ) : error ? (
+          <div className="riwayat-empty">
+            {error}
+          </div>
+        ) : (
+          <>
+
+            {/* ==================================================
+                TABEL CSV
+                ================================================== */}
+
+            {activeTab === "csv" && (
+              <div className="riwayat-table-wrapper">
+
+                <table className="riwayat-table">
+
+                  <thead>
+                    <tr>
+                      <th>Batch</th>
+                      <th>File CSV</th>
+                      <th>Kolom Ulasan</th>
+                      <th>Waktu Analisis</th>
+                      <th>Total</th>
+                      <th>Positif</th>
+                      <th>Negatif</th>
+                      <th>Aksi</th>
+                    </tr>
+                  </thead>
+
+                  <tbody>
+
+                    {paginatedData.map(
+                      (item) => {
+                        const waktu =
+                          formatWaktu(
+                            item.created_at
+                          );
+
+                        const nomorBatch =
+                          batchNumberMap.get(
+                            item.batch_id
+                          );
+
+                        return (
+                          <tr
+                            key={
+                              item.batch_id
+                            }
+                          >
+
+                            <td>
+                              <span className="batch-id">
+                                Batch{" "}
+                                {nomorBatch ??
+                                  "-"}
+                              </span>
+                            </td>
+
+                            <td>
+                              <div className="file-name-cell">
+                                <strong>
+                                  {item.file_name}<ModelVersion value={item.model_version} />
+                                </strong>
+                              </div>
+                            </td>
+
+                            <td>
+                              {
+                                item.selected_column
+                              }
+                            </td>
+
+                            <td>
+                              <div className="date-cell">
+                                <strong>
+                                  {waktu.date}
+                                </strong>
+
+                                <span>
+                                  {waktu.time}
+                                </span>
+                              </div>
+                            </td>
+
+                            <td>
+                              <strong className="total-data">
+                                {
+                                  item.total_data
+                                }
+                              </strong>
+                            </td>
+
+                            <td>
+                              <span className="history-sentiment positive">
+                                {
+                                  item.total_positive
+                                }
+                              </span>
+                            </td>
+
+                            <td>
+                              <span className="history-sentiment negative">
+                                {
+                                  item.total_negative
+                                }
+                              </span>
+                            </td>
+
+                            <td>
+                              <button
+                                type="button"
+                                className="lihat-hasil-button"
+                                onClick={() =>
+                                  bukaHasilCSV(
+                                    item
+                                  )
+                                }
+                              >
+                                Lihat Hasil
+                              </button>
+                            </td>
+
+                          </tr>
+                        );
+                      }
+                    )}
+
+                    {paginatedData.length ===
+                      0 && (
+                      <tr>
+                        <td
+                          colSpan="8"
+                          className="riwayat-empty"
+                        >
+                          Tidak ada riwayat Analisis CSV yang sesuai dengan pencarian.
+                        </td>
+                      </tr>
+                    )}
+
+                  </tbody>
+
+                </table>
+              </div>
+            )}
+
+            {/* ==================================================
+                TABEL PREDIKSI
+                ================================================== */}
+
+            {activeTab === "prediksi" && (
+              <div className="riwayat-table-wrapper">
+
+                <table className="riwayat-table">
+
+                  <thead>
+                    <tr>
+                      <th>ID</th>
+                      <th>Ulasan</th>
+                      <th>Waktu Prediksi</th>
+                      <th>Fitur Dikenali</th>
+                      <th>Sentimen</th>
+                      <th>Aksi</th>
+                    </tr>
+                  </thead>
+
+                  <tbody>
+
+                    {paginatedData.map(
+                      (item) => {
+                        const waktu =
+                          formatWaktu(
+                            item.created_at
+                          );
+
+                        return (
+                          <tr
+                            key={item.id}
+                          >
+
+                            <td>
+                              <span className="batch-id">
+                                PRED-{item.id}
+                              </span>
+                            </td>
+
+                            <td>
+                              <div className="file-name-cell">
+                                <strong>
+                                  {item.teks}<ModelVersion value={item.model_version} />
+                                </strong>
+                              </div>
+                            </td>
+
+                            <td>
+                              <div className="date-cell">
+                                <strong>
+                                  {waktu.date}
+                                </strong>
+
+                                <span>
+                                  {waktu.time}
+                                </span>
+                              </div>
+                            </td>
+
+                            <td>
+                              <strong className="total-data">
+                                {
+                                  item.jumlah_fitur_dikenali
+                                }
+                              </strong>
+                            </td>
+
+                            <td>
+                              <span
+                                className={
+                                  Number(
+                                    item.label
+                                  ) === 1
+                                    ? "history-sentiment positive"
+                                    : "history-sentiment negative"
+                                }
+                              >
+                                {item.sentimen}
+                              </span>
+                            </td>
+
+                            <td>
+                              <button
+                                type="button"
+                                className="lihat-hasil-button"
+                                onClick={() =>
+                                  bukaDetailPrediksi(
+                                    item
+                                  )
+                                }
+                              >
+                                Lihat Detail
+                              </button>
+                            </td>
+
+                          </tr>
+                        );
+                      }
+                    )}
+
+                    {paginatedData.length ===
+                      0 && (
+                      <tr>
+                        <td
+                          colSpan="6"
+                          className="riwayat-empty"
+                        >
+                          Tidak ada riwayat Prediksi Satu Ulasan yang sesuai dengan pencarian.
+                        </td>
+                      </tr>
+                    )}
+
+                  </tbody>
+
+                </table>
+              </div>
+            )}
+
+            {/* ==================================================
+                PAGINATION
+                ================================================== */}
+
+            <div className="riwayat-footer">
+
+              <span>
+                Menampilkan{" "}
+                {filteredData.length === 0
+                  ? 0
+                  : startIndex + 1}
+                {" - "}
+                {Math.min(
+                  startIndex +
+                    ITEMS_PER_PAGE,
+                  filteredData.length
+                )}
+                {" dari "}
+                {filteredData.length}
+                {activeTab === "csv"
+                  ? " batch"
+                  : " prediksi"}
+              </span>
+
+              <div className="riwayat-pagination">
+
+                <button
+                  type="button"
+                  onClick={
+                    halamanSebelumnya
+                  }
+                  disabled={
+                    safeCurrentPage <= 1
+                  }
+                >
+                  ‹
+                </button>
+
+                <strong>
+                  {safeCurrentPage}
+                  {" / "}
+                  {totalPages}
+                </strong>
+
+                <button
+                  type="button"
+                  onClick={
+                    halamanBerikutnya
+                  }
+                  disabled={
+                    safeCurrentPage >=
+                    totalPages
+                  }
+                >
+                  ›
+                </button>
+
+              </div>
+            </div>
+
+          </>
+        )}
+
+      </section>
+
+      {/* ======================================================
+          DETAIL PREDIKSI SATU ULASAN
+          ====================================================== */}
+
+      <div
+        ref={detailSectionRef}
+        className="riwayat-detail-anchor"
+      >
+
+        {activeTab === "prediksi" &&
+          loadingDetail && (
+            <section className="riwayat-card">
+              <div className="riwayat-empty">
+                Memuat detail prediksi...
+              </div>
+            </section>
+          )}
+
+        {activeTab === "prediksi" &&
+          detailError && (
+            <section className="riwayat-card">
+              <div className="riwayat-empty">
+                {detailError}
+              </div>
+            </section>
+          )}
+
+        {activeTab === "prediksi" &&
+          detailPrediksi && (
+            <section className="riwayat-card">
+
+              <div className="riwayat-card-header">
+
+                <div className="riwayat-section-heading">
+                  <span>
+                    DETAIL PREDIKSI
+                  </span>
+
+                  <h2>
+                    Prediksi #
+                    {detailPrediksi.id}
+                  </h2>
+                </div>
+
+                <button
+                  type="button"
+                  className="lihat-hasil-button"
+                  onClick={() =>
+                    setDetailPrediksi(
+                      null
+                    )
+                  }
+                >
+                  Tutup Detail
+                </button>
+
+              </div>
+
+              {/* ULASAN ASLI */}
+
+              <div
+                style={{
+                  padding: "14px",
+                  marginBottom: "14px",
+                  border:
+                    "1px solid #e3e8ef",
+                  borderRadius: "9px",
+                  background: "#f8faff"
+                }}
+              >
+                <span
+                  style={{
+                    display: "block",
+                    marginBottom: "6px",
+                    color: "#8a95a7",
+                    fontSize: "10px"
+                  }}
+                >
+                  Ulasan Asli
+                </span>
+
+                <strong
+                  style={{
+                    display: "block",
+                    color: "#32445d",
+                    fontSize: "12px",
+                    lineHeight: 1.6
+                  }}
+                >
+                  {detailPrediksi.teks}<ModelVersion value={detailPrediksi.model_version} />
+                </strong>
+              </div>
+
+              {/* BADGE */}
+
+              <div
+                style={{
+                  display: "flex",
+                  gap: "8px",
+                  flexWrap: "wrap",
+                  marginBottom: "15px"
+                }}
+              >
+                <span
+                  className={
+                    Number(
+                      detailPrediksi.label
+                    ) === 1
+                      ? "history-sentiment positive"
+                      : "history-sentiment negative"
+                  }
+                >
+                  {
+                    detailPrediksi.sentimen
+                  }
+                </span>
+
+                <span className="batch-id">
+                  {
+                    detailPrediksi.jumlah_fitur_dikenali
+                  }{" "}
+                  fitur dikenali
+                </span>
+              </div>
+
+              {/* PREPROCESSING */}
+
+              <div className="riwayat-section-heading">
+                <span>
+                  PREPROCESSING
+                </span>
+
+                <h2>
+                  Tahapan Pengolahan Teks
+                </h2>
+              </div>
+
+              <div className="riwayat-table-wrapper">
+
+                <table className="riwayat-table">
+
+                  <thead>
+                    <tr>
+                      <th>Tahap</th>
+                      <th>Hasil</th>
+                    </tr>
+                  </thead>
+
+                  <tbody>
+
+                    <tr>
+                      <td>Cleaning</td>
+                      <td>
+                        {
+                          detailPrediksi
+                            .preprocessing
+                            ?.cleaning ||
+                          "-"
+                        }
+                      </td>
+                    </tr>
+
+                    <tr>
+                      <td>
+                        Case Folding
+                      </td>
+
+                      <td>
+                        {
+                          detailPrediksi
+                            .preprocessing
+                            ?.case_folding ||
+                          "-"
+                        }
+                      </td>
+                    </tr>
+
+                    <tr>
+                      <td>
+                        Normalisasi
+                      </td>
+
+                      <td>
+                        {
+                          detailPrediksi
+                            .preprocessing
+                            ?.normalization ||
+                          "-"
+                        }
+                      </td>
+                    </tr>
+
+                    <tr>
+                      <td>
+                        Tokenizing
+                      </td>
+
+                      <td>
+                        {formatTokenizing(
+                          detailPrediksi
+                            .preprocessing
+                            ?.tokenizing
+                        )}
+                      </td>
+                    </tr>
+
+                    <tr>
+                      <td>
+                        Stopword Removal
+                      </td>
+
+                      <td>
+                        {
+                          detailPrediksi
+                            .preprocessing
+                            ?.stopword_removal ||
+                          "-"
+                        }
+                      </td>
+                    </tr>
+
+                    <tr>
+                      <td>
+                        Stemming
+                      </td>
+
+                      <td>
+                        {
+                          detailPrediksi
+                            .preprocessing
+                            ?.stemming ||
+                          "-"
+                        }
+                      </td>
+                    </tr>
+
+                  </tbody>
+
+                </table>
+              </div>
+
+              {/* TF-IDF */}
+
+              <div
+                className="riwayat-section-heading"
+                style={{
+                  marginTop: "18px"
+                }}
+              >
+                <span>
+                  PEMBOBOTAN
+                </span>
+
+                <h2>
+                  Bobot TF-IDF Teratas
+                </h2><TfidfNote />
+              </div>
+
+              <div className="riwayat-table-wrapper">
+
+                <table className="riwayat-table">
+
+                  <thead>
+                    <tr>
+                      <th>No.</th>
+                      <th>Kata</th>
+                      <th>Bobot TF-IDF</th>
+                    </tr>
+                  </thead>
+
+                  <tbody>
+
+                    {(
+                      detailPrediksi
+                        .tfidf_top || []
+                    ).map(
+                      (
+                        item,
+                        index
+                      ) => (
+                        <tr
+                          key={
+                            `${item.kata}-${index}`
+                          }
+                        >
+                          <td>
+                            {index + 1}
+                          </td>
+
+                          <td>
+                            <strong>
+                              {item.kata}
+                            </strong>
+                          </td>
+
+                          <td>
+                            {formatBobot(
+                              item.bobot
+                            )}
+                          </td>
+                        </tr>
+                      )
+                    )}
+
+                    {(
+                      detailPrediksi
+                        .tfidf_top || []
+                    ).length === 0 && (
+                      <tr>
+                        <td
+                          colSpan="3"
+                          className="riwayat-empty"
+                        >
+                          Tidak ada bobot TF-IDF yang dapat ditampilkan.
+                        </td>
+                      </tr>
+                    )}
+
+                  </tbody>
+
+                </table>
+              </div>
+
+            </section>
+          )}
+
+      </div>
+
+      {/* ======================================================
+          INFORMASI
+          ====================================================== */}
+
+      <section className="riwayat-information">
+
+        <div className="riwayat-information-icon">
+          i
+        </div>
+
+        <div>
+          <strong>
+            Penyimpanan Riwayat
+          </strong>
+
+          <p>
+            Analisis CSV disimpan sebagai batch, sedangkan Prediksi
+            Satu Ulasan disimpan secara terpisah pada riwayat prediksi.
+            Riwayat tetap tersedia setelah berpindah halaman atau
+            memuat ulang website.
+          </p>
+        </div>
+
+      </section>
+
+    </div>
+  );
+}
+
+export default RiwayatAnalisis;
\ No newline at end of file
diff --git a/web_slearn/src/pages/RiwayatModel.jsx b/web_slearn/src/pages/RiwayatModel.jsx
new file mode 100644
index 0000000..4ca1012
--- /dev/null
+++ b/web_slearn/src/pages/RiwayatModel.jsx
@@ -0,0 +1,413 @@
+
+import { SkippedRows, VersionComparison } from "../components/TrainingDetails";
+import { useEffect, useState } from "react";
+import Papa from "papaparse";
+import { ambilRiwayatModel, trainingModel, aktifkanModel } from "../services/api";
+import "../styles/riwayat-model.css";
+
+const percent = (n) => Number.isFinite(n) ? `${(n * 100).toFixed(2).replace(".", ",")}%` : "—";
+const date = (s) => new Date(s).toLocaleString("id-ID");
+const statusLabel = { queued: "Menunggu", running: "Berjalan", completed: "Selesai", failed: "Gagal", skipped: "Tidak diproses" };
+
+const identityWords = new Set(['no','nomor','id','nama','name','nim','nis','nip','nik','prodi','jurusan','fakultas','gender','kelamin','email','telepon','phone','alamat','address','angkatan','semester','label','sentimen','sentiment']);
+
+const isIdentity = (name) => {
+  const words = name.toLowerCase().replace(/[^a-z0-9]+/g, ' ').trim().split(/\s+/);
+  return !name.trim() || words.some(w => identityWords.has(w)) ||
+    (words.includes('program') && words.includes('studi')) ||
+    ['jeniskelamin','programstudi'].includes(words.slice().sort().join(''));
+};
+
+export default function RiwayatModel() {
+  const [data, setData] = useState(null);
+  const [error, setError] = useState("");
+  const [connectionError, setConnectionError] = useState("");
+  const [notice, setNotice] = useState("");
+  const [rows, setRows] = useState([]);
+  const [columns, setColumns] = useState([]);
+  const [column, setColumn] = useState("");
+  const [fileName, setFileName] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [reviewConfirmed, setReviewConfirmed] = useState(false);
+  const [parsing, setParsing] = useState(false);
+  const [selected, setSelected] = useState(null);
+  const [confirmation, setConfirmation] = useState(null);
+
+  useEffect(() => {
+    let alive = true;
+    async function refresh() {
+      try {
+        const result = await ambilRiwayatModel();
+        if (alive) {
+          setData(result.data);
+          setConnectionError("");
+        }
+      } catch (e) {
+        if (alive) setConnectionError(e.message);
+      }
+    }
+    refresh();
+    const timer = setInterval(refresh, 3000);
+    return () => {
+      alive = false;
+      clearInterval(timer);
+    };
+  }, []);
+
+  const active = data?.versions.find((v) => v.active);
+  const running = data?.jobs.some((j) => ["queued", "running"].includes(j.status));
+  const reviews = column ? rows.map((r) => String(r[column] ?? "")) : [];
+
+  function readFile(event) {
+    const file = event.target.files[0];
+    setReviewConfirmed(false);
+    setRows([]); setColumns([]); setColumn(""); setFileName(""); setError(""); setNotice("");
+
+    if (!file) return;
+    if (!file.name.toLowerCase().endsWith(".csv") || file.size > 5 * 1024 * 1024) {
+      setError("Pilih file CSV berukuran maksimal 5 MB.");
+      return;
+    }
+
+    setParsing(true);
+    Papa.parse(file, {
+      header: true,
+      skipEmptyLines: false,
+      transformHeader: (s) => s.replace(/^\uFEFF/, "").trim(),
+      complete: (result) => {
+        setParsing(false);
+
+        // Pertahankan logika pembacaan CSV asli
+        if (result.data.length && Object.values(result.data.at(-1)).every((v) => !String(v).trim())) result.data.pop();
+
+        const errors = result.errors.filter((e) => e.code !== "UndetectableDelimiter" &&
+          !(e.type === "FieldMismatch" && e.row >= result.data.length));
+
+        if (errors.length || !result.data.length || result.data.length > 5000 ||
+          !result.meta.fields?.length || result.meta.fields.some(s => !s.trim()) ||
+          Object.keys(result.meta.renamedHeaders || {}).length) {
+          setError("CSV harus memiliki judul kolom, 1–5.000 baris data, dan jumlah kolom yang konsisten.");
+          return;
+        }
+
+        setFileName(file.name);
+        setRows(result.data);
+        setColumns(result.meta.fields);
+
+        const eligible = result.meta.fields.filter(s => !isIdentity(s));
+        setColumn(eligible.find(s => /ulasan|komentar|review|text|feedback|tanggapan/i.test(s)) || '');
+
+        if (!eligible.length) setError('Tidak ada kolom ulasan yang dapat dipilih. Kolom identitas atau label tidak boleh digunakan.');
+      },
+      error: () => {
+        setParsing(false);
+        setError("File CSV tidak dapat dibaca.");
+      }
+    });
+  }
+
+  async function submit(event) {
+    event.preventDefault();
+
+    if (!column || isIdentity(column) || !reviewConfirmed) {
+      setError('Pilih kolom ulasan dan konfirmasi contoh isinya terlebih dahulu.');
+      return;
+    }
+
+    setBusy(true);
+    setNotice("");
+    setError("");
+
+    try {
+      await trainingModel(fileName, reviews, column);
+      setReviewConfirmed(false);
+      setRows([]); setColumns([]); setColumn(""); setFileName("");
+      setNotice("Data diterima. Training berjalan otomatis; Anda dapat memantau status di bawah.");
+      setData((await ambilRiwayatModel()).data);
+    } catch (e) {
+      setNotice(e.message);
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  async function activate() {
+    setBusy(true);
+    try {
+      const result = await aktifkanModel(confirmation);
+      setData(result.data);
+      setNotice(`${confirmation} sekarang aktif untuk prediksi baru.`);
+      setConfirmation(null);
+    } catch (e) {
+      setNotice(e.message);
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return (
+    <div className="models-page">
+      <header>
+        <span className="models-eyebrow">PENGELOLAAN MODEL</span>
+        <h1>Training &amp; Riwayat Model</h1>
+        <p>Tambahkan ulasan baru, pantau hasil training, dan pilih model untuk prediksi.</p>
+      </header>
+
+      {error && <div className="models-error" role="alert">{error}</div>}
+      {connectionError && <div className="models-error" role="alert">Koneksi backend: {connectionError}</div>}
+      {notice && <div className="models-notice" role="status">{notice}</div>}
+      {!data && !connectionError && <p role="status">Memuat riwayat model...</p>}
+
+      {/* RINGKASAN MODEL AKTIF */}
+      {active && (
+        <section className="models-summary" aria-label="Model aktif">
+          <div><small>Model aktif</small><strong>{active.version}<span className="model-badge">Aktif</span></strong></div>
+          <div><small>Akurasi model aktif</small><strong>{percent(active.akurasi)}</strong></div>
+          <div><small>Data latih</small><strong>{active.jumlah_data_training}</strong></div>
+          <div><small>Data uji tetap</small><strong>{active.jumlah_data_testing}</strong></div>
+        </section>
+      )}
+
+      {/* FORM TRAINING - LOGIKA ASLI DIPERTAHANKAN */}
+      <section className="models-card">
+        <h2>Tambah data &amp; training ulang</h2>
+        <p>
+          Unggah CSV berisi ulasan tanpa label. Model aktif memberi label otomatis (pseudo-labeling),
+          lalu sistem melatih ulang menggunakan data latih lama dan ulasan baru yang valid.
+        </p>
+
+        <form onSubmit={submit}>
+          <label htmlFor="training-file">
+            File CSV <small>• maksimal 5 MB / 5.000 baris</small>
+          </label>
+          <input id="training-file" type="file" accept=".csv" onChange={readFile} disabled={busy || running || parsing} />
+
+          {parsing && <p role="status">Membaca CSV...</p>}
+
+          {!!columns.length && (
+            <>
+              <label htmlFor="review-column">Kolom ulasan</label>
+              <select id="review-column" value={column}
+                onChange={(e) => { setColumn(e.target.value); setReviewConfirmed(false); }}
+                disabled={busy || running}>
+                <option value="">Pilih kolom berisi ulasan</option>
+                {columns.map((c) => (
+                  <option key={c} value={c} disabled={isIdentity(c)}>
+                    {c}{isIdentity(c) ? " (identitas/label — tidak dapat dipilih)" : ""}
+                  </option>
+                ))}
+              </select>
+
+              <p><b>{reviews.length}</b> baris data terbaca dari {fileName}. Kolom label, bila ada, tidak digunakan.</p>
+              <ul className="models-preview">
+                {reviews.slice(0, 3).map((r, i) => <li key={i}>{r || '(kosong)'}</li>)}
+              </ul>
+
+              {column && (
+                <label style={{ display: 'flex', gap: 10, alignItems: 'flex-start' }}>
+                  <input type="checkbox" style={{ width: 'auto' }}
+                    checked={reviewConfirmed} disabled={busy || running}
+                    onChange={e => setReviewConfirmed(e.target.checked)} />
+                  Saya sudah memeriksa contoh isi kolom "{column}" dan memastikan isinya ulasan, bukan data identitas.
+                </label>
+              )}
+              <p>Nama kolom boleh berbeda, misalnya komentar atau review. Periksa isi kolom sebelum melanjutkan.</p>
+            </>
+          )}
+
+          <p className="models-help">
+            Duplikat, data uji, dan ulasan tanpa kata yang dikenali akan dilewati.
+            Label otomatis bisa keliru; akurasi model baru belum tentu meningkat.
+            Model aktif tetap dipakai hingga Anda menggantinya.
+          </p>
+
+          <button className="models-primary"
+            disabled={busy || running || parsing || !data || !reviews.length || !reviewConfirmed || isIdentity(column)}>
+            {running ? "Training sedang berjalan..." : busy ? "Mengirim..." : "Tambahkan Data & Training Otomatis"}
+          </button>
+        </form>
+      </section>
+
+      {/* STATUS TRAINING DAN RIWAYAT PROSES - TAMPILAN BARU */}
+      {!!data?.jobs.length && (
+        <section className="models-card models-training-status" aria-live="polite">
+          <h2>Status training terakhir</h2>
+
+          <div className="models-job">
+            <div className="models-job-heading">
+              <span className={`models-status models-status-${data.jobs[0].status}`}>
+                {statusLabel[data.jobs[0].status] || data.jobs[0].status}
+              </span>
+              <strong className="models-job-file">{data.jobs[0].file_name}</strong>
+            </div>
+
+            <p className="models-job-message">{data.jobs[0].message}</p>
+            <SkippedRows audit={data.jobs[0].audit} status={data.jobs[0].status} />
+          </div>
+
+          <details className="models-history-details">
+            <summary>
+              <span>Riwayat proses</span>
+              <span className="models-history-count">{data.jobs.length} proses</span>
+            </summary>
+
+            <div className="models-history-list">
+              {data.jobs.map((j) => (
+                <article className="models-history-item" key={j.id}>
+                  <div className="models-history-item-head">
+                    <strong className="models-history-filename">{j.file_name}</strong>
+                    <span className={`models-status models-status-${j.status}`}>
+                      {statusLabel[j.status] || j.status}
+                    </span>
+                  </div>
+
+                  <time className="models-history-date" dateTime={j.created_at}>
+                    {date(j.created_at)}
+                  </time>
+
+                  <p className="models-history-message">{j.message}</p>
+                </article>
+              ))}
+            </div>
+          </details>
+        </section>
+      )}
+
+      {/* RIWAYAT MODEL - FUNGSI ASLI DIPERTAHANKAN */}
+      <section className="models-card">
+        <h2>Riwayat model</h2>
+        <p>
+          Semua versi dievaluasi pada 115 data uji penelitian yang sama.
+          F1-Score menggunakan weighted average, yaitu rata-rata yang memperhitungkan
+          jumlah data pada setiap kelas.
+        </p>
+
+        <div className="models-table">
+          <table>
+            <thead>
+              <tr>
+                <th>Versi</th>
+                <th>Waktu training</th>
+                <th>Data latih</th>
+                <th>Akurasi</th>
+                <th>F1-Score</th>
+                <th>Status &amp; tindakan</th>
+              </tr>
+            </thead>
+            <tbody>
+              {data?.versions.map((v) => (
+                <tr key={v.version}>
+                  <td>
+                    <b>{v.version}</b>
+                    <small>{v.version === "v1" ? "Model penelitian awal" : `+${v.added_rows} ulasan`}</small>
+                  </td>
+                  <td>{date(v.created_at)}</td>
+                  <td>{v.jumlah_data_training}</td>
+                  <td>{percent(v.akurasi)}</td>
+                  <td>{percent(v.classification_report["weighted avg"]["f1-score"])}</td>
+                  <td>
+                    <div className="models-actions">
+                      {v.active && <span className="model-badge">Aktif</span>}
+                      <button onClick={() => setSelected(v)}>Detail</button>
+                      {v.invalidated && <span className="models-error">Tidak valid — input keliru</span>}
+                      {!v.active && !v.invalidated && (
+                        <button disabled={busy} onClick={() => setConfirmation(v.version)}>Aktifkan</button>
+                      )}
+                    </div>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </section>
+
+      {/* DETAIL EVALUASI MODEL */}
+      {selected && (
+        <section className="models-card">
+          <div className="models-actions">
+            <h2>Detail {selected.version}</h2>
+            <button onClick={() => setSelected(null)}>Tutup detail</button>
+          </div>
+
+          {selected.invalidated && (
+            <p role="alert" className="models-error">
+              {selected.invalid_reason} Angka evaluasi berikut adalah catatan historis model yang tidak valid.
+            </p>
+          )}
+
+          <VersionComparison selected={selected} original={data.versions.find((v) => v.version === "v1")} />
+          <SkippedRows audit={selected.audit} legacy={selected.version !== "v1"} />
+
+          <p>
+            Sumber label: {selected.label_source}.{" "}
+            {selected.teacher_version && `Model pemberi label: ${selected.teacher_version}.`}
+          </p>
+          <p>Fitur TF-IDF: {selected.jumlah_fitur_tfidf}. Data uji: {selected.jumlah_data_testing}.</p>
+
+          {selected.skipped && (
+            <p>
+              Dilewati: {selected.skipped.duplicate} duplikat/data lama, {selected.skipped.empty} kosong,
+              {" "}{selected.skipped.unknown} tanpa fitur dikenali.
+            </p>
+          )}
+
+          <h3>Confusion matrix</h3>
+          <p>Baris: label sebenarnya. Kolom: prediksi.</p>
+          <table>
+            <thead>
+              <tr><th>Aktual / Prediksi</th><th>Negatif</th><th>Positif</th></tr>
+            </thead>
+            <tbody>
+              {selected.confusion_matrix.map((row, i) => (
+                <tr key={i}>
+                  <th>{i === 0 ? "Negatif" : "Positif"}</th>
+                  {row.map((n, j) => (
+                    <td key={j}>{n} <small>{[["TN", "FP"], ["FN", "TP"]][i][j]}</small></td>
+                  ))}
+                </tr>
+              ))}
+            </tbody>
+          </table>
+
+          <h3>Evaluasi per kelas</h3>
+          <table>
+            <thead>
+              <tr>
+                <th>Kelas</th><th>Precision</th><th>Recall</th><th>F1-Score</th><th>Jumlah Data Uji</th>
+              </tr>
+            </thead>
+            <tbody>
+              {["0", "1"].map((k) => {
+                const r = selected.classification_report[k];
+                return (
+                  <tr key={k}>
+                    <th>{k === "0" ? "Negatif" : "Positif"}</th>
+                    <td>{percent(r.precision)}</td>
+                    <td>{percent(r.recall)}</td>
+                    <td>{percent(r["f1-score"])}</td>
+                    <td>{r.support}</td>
+                  </tr>
+                );
+              })}
+            </tbody>
+          </table>
+        </section>
+      )}
+
+      {/* KONFIRMASI AKTIVASI MODEL */}
+      {confirmation && (
+        <div className="models-overlay">
+          <section className="models-dialog" role="dialog" aria-modal="true" aria-labelledby="activate-title">
+            <h2 id="activate-title">Aktifkan {confirmation}?</h2>
+            <p>Prediksi baru akan memakai versi ini. Riwayat hasil prediksi sebelumnya tetap tersimpan.</p>
+            <div className="models-actions">
+              <button disabled={busy} onClick={() => setConfirmation(null)}>Batal</button>
+              <button className="models-primary" disabled={busy} onClick={activate}>Ya, aktifkan</button>
+            </div>
+          </section>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/web_slearn/src/services/api.js b/web_slearn/src/services/api.js
new file mode 100644
index 0000000..c3d4b12
--- /dev/null
+++ b/web_slearn/src/services/api.js
@@ -0,0 +1,191 @@
+const API_BASE_URL = import.meta.env.VITE_API_URL || "http://127.0.0.1:8000";
+
+export async function ambilRiwayatModel() {
+  return handleResponse(await fetch(`${API_BASE_URL}/models`));
+}
+
+export async function trainingModel(fileName, reviews, selectedColumn) {
+  return handleResponse(await fetch(`${API_BASE_URL}/training`, {
+    method: "POST", headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ file_name: fileName, reviews, selected_column: selectedColumn, confirmed_review_column: true })
+  }));
+}
+
+export async function aktifkanModel(version) {
+  return handleResponse(await fetch(`${API_BASE_URL}/models/${encodeURIComponent(version)}/activate`, { method: "POST" }));
+}
+
+export async function ambilModelPenelitian() {
+  return handleResponse(await fetch(`${API_BASE_URL}/model-info/original`));
+}
+
+
+async function handleResponse(response) {
+  let data;
+
+  try {
+    data = await response.json();
+  } catch {
+    throw new Error(
+      "Respons dari server tidak dapat dibaca."
+    );
+  }
+
+  if (!response.ok) {
+    throw new Error(
+      (Array.isArray(data.detail) ? "Data permintaan tidak valid. Periksa isi dan jumlah ulasan." : data.detail) ||
+        "Terjadi kesalahan saat menghubungi server."
+    );
+  }
+
+  return data;
+}
+
+
+// ============================================================
+// PREDIKSI SATU ULASAN
+// ============================================================
+
+export async function prediksiUlasan(text) {
+  const response = await fetch(
+    `${API_BASE_URL}/predict`,
+    {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify({
+        text
+      })
+    }
+  );
+
+  return handleResponse(response);
+}
+
+
+// ============================================================
+// RIWAYAT PREDIKSI SATU ULASAN
+// ============================================================
+
+export async function ambilRiwayatPrediksi() {
+  const response = await fetch(
+    `${API_BASE_URL}/predictions`
+  );
+
+  return handleResponse(response);
+}
+
+
+// ============================================================
+// DETAIL SATU PREDIKSI
+// ============================================================
+
+export async function ambilDetailPrediksi(
+  predictionId
+) {
+  const response = await fetch(
+    `${API_BASE_URL}/predictions/${encodeURIComponent(
+      predictionId
+    )}`
+  );
+
+  return handleResponse(response);
+}
+
+
+// ============================================================
+// ANALISIS CSV
+// ============================================================
+
+export async function analisisCSV(
+  fileName,
+  selectedColumn,
+  reviews
+) {
+  const response = await fetch(
+    `${API_BASE_URL}/analysis/csv`,
+    {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify({
+        file_name: fileName,
+        selected_column: selectedColumn,
+        reviews
+      })
+    }
+  );
+
+  return handleResponse(response);
+}
+
+
+// ============================================================
+// DETAIL HASIL ANALISIS CSV
+// ============================================================
+
+export async function ambilHasilAnalisis(
+  batchId
+) {
+  const response = await fetch(
+    `${API_BASE_URL}/analysis/${encodeURIComponent(
+      batchId
+    )}`
+  );
+
+  return handleResponse(response);
+}
+
+
+// ============================================================
+// RIWAYAT ANALISIS CSV
+// ============================================================
+
+export async function ambilRiwayatAnalisis() {
+  const response = await fetch(
+    `${API_BASE_URL}/analysis`
+  );
+
+  return handleResponse(response);
+}
+
+
+// ============================================================
+// HEALTH CHECK BACKEND
+// ============================================================
+
+export async function cekBackend() {
+  const response = await fetch(
+    `${API_BASE_URL}/health`
+  );
+
+  return handleResponse(response);
+}
+
+
+// ============================================================
+// HEALTH CHECK DATABASE
+// ============================================================
+
+export async function cekDatabase() {
+  const response = await fetch(
+    `${API_BASE_URL}/database/health`
+  );
+
+  return handleResponse(response);
+}
+
+
+// ============================================================
+// INFORMASI MODEL
+// ============================================================
+
+export async function ambilInformasiModel() {
+  const response = await fetch(
+    `${API_BASE_URL}/model-info`
+  );
+
+  return handleResponse(response);
+}
diff --git a/web_slearn/src/styles/analisis-csv.css b/web_slearn/src/styles/analisis-csv.css
new file mode 100644
index 0000000..2cab774
--- /dev/null
+++ b/web_slearn/src/styles/analisis-csv.css
@@ -0,0 +1,661 @@
+/* ============================================================
+   PAGE
+   ============================================================ */
+
+.csv-page {
+  width: 100%;
+  max-width: 1450px;
+  margin: 0 auto;
+}
+
+.csv-heading {
+  margin-bottom: 18px;
+}
+
+.csv-heading h1 {
+  margin: 0;
+  color: #142641;
+  font-size: 25px;
+  font-weight: 700;
+  line-height: 1.25;
+}
+
+.csv-heading p {
+  margin: 5px 0 0;
+  color: #6b7485;
+  font-size: 13.5px;
+  line-height: 1.5;
+}
+
+/* ============================================================
+   STEPPER
+   ============================================================ */
+
+.csv-steps {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  margin-bottom: 14px;
+  padding: 13px 18px;
+  border: 1px solid #dfe5ee;
+  border-radius: 10px;
+  background: #ffffff;
+}
+
+.csv-step {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: 0 0 auto;
+}
+
+.csv-step span {
+  width: 26px;
+  height: 26px;
+  display: grid;
+  place-items: center;
+  border: 1px solid #dbe2ed;
+  border-radius: 50%;
+  background: #f7f9fc;
+  color: #8793a5;
+  font-size: 9px;
+  font-weight: 700;
+}
+
+.csv-step p {
+  margin: 0;
+  color: #8a95a7;
+  font-size: 10px;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.csv-step.active span {
+  border-color: #295bcc;
+  background: #295bcc;
+  color: #ffffff;
+}
+
+.csv-step.active p {
+  color: #295bcc;
+}
+
+.step-line {
+  height: 1px;
+  flex: 1;
+  min-width: 30px;
+  margin: 0 12px;
+  background: #dfe5ee;
+}
+
+.step-line.active {
+  background: #8eabe8;
+}
+
+/* ============================================================
+   GENERAL CARD
+   ============================================================ */
+
+.csv-card {
+  width: 100%;
+  margin-bottom: 12px;
+  padding: 18px;
+  border: 1px solid #dfe5ee;
+  border-radius: 10px;
+  background: #ffffff;
+}
+
+.csv-error {
+  margin-bottom: 12px;
+  padding: 11px 13px;
+  border: 1px solid #f1c5ca;
+  border-radius: 8px;
+  background: #fff5f6;
+  color: #b63f49;
+  font-size: 10px;
+  line-height: 1.55;
+}
+
+/* ============================================================
+   UPLOAD
+   ============================================================ */
+
+.upload-section {
+  padding: 16px;
+}
+
+.drop-zone {
+  min-height: 330px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 32px;
+  border: 1.5px dashed #c9d7ed;
+  border-radius: 10px;
+  background:
+    linear-gradient(
+      180deg,
+      #fbfdff 0%,
+      #f6f9fe 100%
+    );
+  text-align: center;
+}
+
+.upload-icon {
+  width: 48px;
+  height: 48px;
+  display: grid;
+  place-items: center;
+  margin-bottom: 12px;
+  border-radius: 12px;
+  background: #eaf1ff;
+  color: #295bcc;
+  font-size: 22px;
+  font-weight: 600;
+}
+
+.drop-zone h2 {
+  margin: 0;
+  color: #142641;
+  font-size: 16px;
+}
+
+.drop-zone p {
+  max-width: 430px;
+  margin: 7px 0 17px;
+  color: #748196;
+  font-size: 10.5px;
+  line-height: 1.55;
+}
+
+.drop-zone > span {
+  margin-top: 11px;
+  color: #7e899b;
+  font-size: 9px;
+}
+
+/* ============================================================
+   BUTTON
+   ============================================================ */
+
+.csv-primary-button,
+.change-file-button {
+  min-height: 36px;
+  padding: 8px 14px;
+  border-radius: 7px;
+  font-size: 10px;
+  font-weight: 600;
+  cursor: pointer;
+  transition:
+    background 0.2s ease,
+    border-color 0.2s ease,
+    box-shadow 0.2s ease,
+    transform 0.2s ease;
+}
+
+.csv-primary-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 7px;
+  border: 1px solid #295bcc;
+  background: #295bcc;
+  color: #ffffff;
+}
+
+.csv-primary-button:hover:not(:disabled) {
+  background: #234fab;
+  border-color: #234fab;
+  transform: translateY(-1px);
+  box-shadow: 0 5px 12px rgba(41, 91, 204, 0.15);
+}
+
+.change-file-button {
+  border: 1px solid #cbd9ee;
+  background: #eef4ff;
+  color: #295bcc;
+}
+
+.change-file-button:hover:not(:disabled) {
+  border-color: #a9c0e9;
+  background: #e3edff;
+}
+
+.csv-primary-button:disabled,
+.change-file-button:disabled {
+  opacity: 0.52;
+  cursor: not-allowed;
+  transform: none;
+  box-shadow: none;
+}
+
+/* ============================================================
+   FILE + PREVIEW CARD
+   ============================================================ */
+
+.csv-file-preview-card {
+  padding: 0;
+  overflow: hidden;
+}
+
+.csv-file-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 20px;
+  padding: 16px 18px;
+  border-bottom: 1px solid #e8ecf2;
+  background:
+    linear-gradient(
+      180deg,
+      #ffffff 0%,
+      #fbfcff 100%
+    );
+}
+
+.csv-file-main {
+  min-width: 0;
+}
+
+.csv-file-main h2 {
+  margin: 0;
+  overflow: hidden;
+  color: #142641;
+  font-size: 14px;
+  font-weight: 700;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.csv-file-main p {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 7px;
+  margin: 5px 0 0;
+  color: #64748b;
+  font-size: 9.5px;
+  font-weight: 500;
+}
+
+.csv-file-main p span {
+  color: #a4adbb;
+}
+
+.csv-preview-header {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 14px;
+  padding: 14px 18px 10px;
+}
+
+.csv-preview-header h3 {
+  margin: 0;
+  color: #263b58;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.csv-preview-header p {
+  margin: 0;
+  color: #718095;
+  font-size: 8.8px;
+  line-height: 1.4;
+  text-align: right;
+}
+
+/* ============================================================
+   PREVIEW TABLE
+   ============================================================ */
+
+.table-wrapper {
+  width: calc(100% - 36px);
+  margin: 0 18px 18px;
+  overflow-x: auto;
+  border: 1px solid #e1e6ee;
+  border-radius: 8px;
+}
+
+.preview-table {
+  width: 100%;
+  min-width: max-content;
+  border-collapse: collapse;
+  background: #ffffff;
+}
+
+.preview-table th,
+.preview-table td {
+  max-width: 290px;
+  padding: 9px 11px;
+  border-right: 1px solid #edf0f4;
+  border-bottom: 1px solid #edf0f4;
+  color: #4d5d73;
+  text-align: left;
+  font-size: 9px;
+  line-height: 1.45;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.preview-table th:last-child,
+.preview-table td:last-child {
+  border-right: 0;
+}
+
+.preview-table tbody tr:last-child td {
+  border-bottom: 0;
+}
+
+.preview-table th {
+  background: #f5f7fa;
+  color: #56667d;
+  font-weight: 700;
+}
+
+.preview-table tbody tr:hover td:not(.selected-column) {
+  background: #fafcff;
+}
+
+.preview-table .preview-index {
+  width: 44px;
+  min-width: 44px;
+  max-width: 44px;
+  color: #79869a;
+  text-align: center;
+}
+
+.preview-table th.selected-column {
+  border-color: #c4d5f3;
+  background: #e9f1ff;
+  color: #234fae;
+}
+
+.preview-table td.selected-column {
+  border-color: #d5e1f5;
+  background: #f3f7ff;
+  color: #344a69;
+  font-weight: 500;
+}
+
+/* ============================================================
+   COLUMN SELECTION
+   ============================================================ */
+
+.column-card {
+  padding: 17px 18px;
+}
+
+.column-selection {
+  display: grid;
+  grid-template-columns:
+    minmax(240px, 1fr)
+    minmax(240px, 420px);
+  align-items: end;
+  gap: 18px;
+}
+
+.column-description {
+  min-width: 0;
+}
+
+.column-title-row {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.column-title-row label {
+  color: #263b58;
+  font-size: 11px;
+  font-weight: 700;
+}
+
+.detected-badge {
+  padding: 4px 7px;
+  border: 1px solid #c8d9f5;
+  border-radius: 999px;
+  background: #eef4ff;
+  color: #295bcc;
+  font-size: 8px;
+  font-weight: 600;
+}
+
+.column-selection select {
+  width: 100%;
+  height: 38px;
+  padding: 0 34px 0 11px;
+  border: 1px solid #d5dde9;
+  border-radius: 7px;
+  outline: none;
+  background: #ffffff;
+  color: #394b63;
+  font-size: 10px;
+}
+
+.column-selection select:focus {
+  border-color: #94b2eb;
+  box-shadow: 0 0 0 3px rgba(41, 91, 204, 0.07);
+}
+
+.column-selection select:disabled {
+  background: #f4f6f9;
+  color: #929baa;
+  cursor: not-allowed;
+}
+
+/* ============================================================
+   COLUMN STATUS
+   ============================================================ */
+
+.column-status {
+  display: grid;
+  grid-template-columns: 30px 1fr;
+  gap: 9px;
+  margin-top: 13px;
+  padding: 10px 12px;
+  border-radius: 8px;
+}
+
+.column-status.success {
+  border: 1px solid #cce8db;
+  background: #f1faf6;
+}
+
+.column-status.warning {
+  border: 1px solid #f0d6a8;
+  background: #fff9ee;
+}
+
+.column-status-icon {
+  width: 25px;
+  height: 25px;
+  display: grid;
+  place-items: center;
+  border-radius: 50%;
+  font-size: 10px;
+  font-weight: 700;
+}
+
+.column-status.success .column-status-icon {
+  background: #def2e8;
+  color: #168052;
+}
+
+.column-status.warning .column-status-icon {
+  background: #f8e8c9;
+  color: #9b6818;
+}
+
+.column-status strong {
+  display: block;
+  margin-top: 1px;
+  color: #304259;
+  font-size: 9.8px;
+}
+
+.column-status p {
+  margin: 3px 0 0;
+  color: #66758a;
+  font-size: 9px;
+  line-height: 1.5;
+}
+
+.column-status.warning strong {
+  color: #855b1a;
+}
+
+.column-status.warning p {
+  color: #80652f;
+}
+
+/* ============================================================
+   STORAGE / PRIVACY NOTE
+   ============================================================ */
+
+.csv-storage-note {
+  display: grid;
+  grid-template-columns: 25px 1fr;
+  gap: 9px;
+  margin-top: 10px;
+  padding: 9px 11px;
+  border: 1px solid #dce5f3;
+  border-radius: 7px;
+  background: #f6f9fe;
+}
+
+.csv-storage-note > span {
+  width: 22px;
+  height: 22px;
+  display: grid;
+  place-items: center;
+  border-radius: 50%;
+  background: #eaf1ff;
+  color: #295bcc;
+  font-size: 9px;
+  font-weight: 700;
+}
+
+.csv-storage-note p {
+  margin: 2px 0 0;
+  color: #607087;
+  font-size: 9px;
+  line-height: 1.5;
+}
+
+/* ============================================================
+   ACTION
+   ============================================================ */
+
+.preview-actions {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 13px;
+  padding-top: 13px;
+  border-top: 1px solid #edf0f4;
+}
+
+.preview-actions .csv-primary-button {
+  min-width: 145px;
+}
+
+.csv-button-spinner {
+  width: 13px;
+  height: 13px;
+  flex: 0 0 13px;
+  border: 2px solid rgba(255, 255, 255, 0.4);
+  border-top-color: #ffffff;
+  border-radius: 50%;
+  animation: csv-spin 0.7s linear infinite;
+}
+
+@keyframes csv-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* ============================================================
+   RESPONSIVE
+   ============================================================ */
+
+@media (max-width: 900px) {
+  .column-selection {
+    grid-template-columns: 1fr;
+    align-items: stretch;
+  }
+
+  .csv-preview-header {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .csv-preview-header p {
+    text-align: left;
+  }
+}
+
+@media (max-width: 700px) {
+  .csv-heading h1 {
+    font-size: 22px;
+  }
+
+  .csv-steps {
+    padding: 11px;
+    overflow-x: auto;
+  }
+
+  .csv-step p {
+    display: none;
+  }
+
+  .step-line {
+    min-width: 38px;
+  }
+
+  .csv-file-header {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .change-file-button {
+    align-self: flex-start;
+  }
+
+  .table-wrapper {
+    width: calc(100% - 24px);
+    margin: 0 12px 12px;
+  }
+
+  .csv-preview-header {
+    padding-left: 12px;
+    padding-right: 12px;
+  }
+}
+
+@media (max-width: 520px) {
+  .csv-card {
+    padding: 14px;
+  }
+
+  .csv-file-preview-card {
+    padding: 0;
+  }
+
+  .drop-zone {
+    min-height: 280px;
+    padding: 24px 16px;
+  }
+
+  .preview-actions {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .preview-actions .csv-primary-button {
+    width: 100%;
+  }
+}
\ No newline at end of file
diff --git a/web_slearn/src/styles/dashboard.css b/web_slearn/src/styles/dashboard.css
new file mode 100644
index 0000000..6bc53ff
--- /dev/null
+++ b/web_slearn/src/styles/dashboard.css
@@ -0,0 +1,210 @@
+
+/* DASHBOARD - CSS LENGKAP + PERBAIKAN TAMPILAN */
+
+.dashboard-page { width:100%; max-width:1450px; margin:0 auto; }
+.page-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:22px; }
+.page-heading h1 { margin:0; color:#142641; font-size:25px; font-weight:700; line-height:1.25; }
+.page-heading p { margin:6px 0 0; color:#56657a; font-size:13px; line-height:1.5; }
+
+.primary-button, .secondary-button {
+  padding:9px 14px; border-radius:7px; font-family:inherit;
+  font-size:12px; font-weight:600; cursor:pointer;
+  transition:background .2s ease,border-color .2s ease,transform .2s ease;
+}
+.primary-button { border:1px solid #295bcc; background:#295bcc; color:#fff; }
+.primary-button:hover { border-color:#214daf; background:#214daf; }
+.primary-button:active { transform:translateY(1px); }
+.secondary-button { border:1px solid #ccd9ef; background:#fff; color:#295bcc; }
+.secondary-button:hover { border-color:#aac0e6; background:#f5f8fd; }
+
+.dashboard-error { margin-bottom:14px; padding:12px 14px; border:1px solid #f0c8cd; border-radius:8px; background:#fff4f4; color:#b4232d; font-size:12px; }
+
+/* Card statistik */
+.stats-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:12px; }
+.stat-card {
+  position:relative; min-width:0; min-height:125px;
+  display:flex; flex-direction:column; justify-content:center;
+  padding:18px 20px; overflow:hidden; border:1px solid transparent;
+  border-radius:11px; cursor:default;
+  transition:transform .28s cubic-bezier(.22,1,.36,1),
+    box-shadow .28s ease,border-color .28s ease;
+}
+.stat-card-blue { border-color:#d9e5fb; background:#f7faff; }
+.stat-card-blue::before { background:#295bcc; }
+.stat-card-purple { border-color:#e5dcf7; background:#fbf9ff; }
+.stat-card-purple::before { background:#7654c7; }
+.stat-card-teal { border-color:#d4e9e5; background:#f5fbfa; }
+.stat-card-teal::before { background:#16877a; }
+.stat-card-amber { border-color:#eddfc7; background:#fffaf3; }
+.stat-card-amber::before { background:#c88627; }
+.stat-card::before {
+  content:""; position:absolute; top:0; left:50%;
+  width:0; height:4px; border-radius:999px;
+  transform:translateX(-50%); transition:width .3s ease;
+}
+.stat-card:hover { transform:translateY(-6px) scale(1.012); box-shadow:0 15px 30px rgba(20,38,65,.11); }
+.stat-card:hover::before { width:82%; }
+.stat-card-blue:hover { border-color:#a9c4f2; }
+.stat-card-purple:hover { border-color:#c6b4e9; }
+.stat-card-teal:hover { border-color:#a9d4cc; }
+.stat-card-amber:hover { border-color:#dfc28f; }
+.stat-label { display:block; margin-bottom:6px; color:#526176; font-size:13px; font-weight:600; }
+.stat-card strong { display:block; color:#142641; font-size:24px; font-weight:700; line-height:1.25; }
+.stat-card small { display:block; margin-top:7px; color:#647287; font-size:12.5px; line-height:1.45; }
+.stat-card .latest-file { max-width:100%; overflow:hidden; color:#142641; font-size:15px; line-height:1.4; text-overflow:ellipsis; white-space:nowrap; }
+
+/* Panel utama */
+.dashboard-panel { width:100%; min-height:335px; padding:22px; border:1px solid #e1e6ef; border-radius:11px; background:#fff; }
+.panel-heading { margin-bottom:24px; }
+.panel-heading h2 { margin:0; color:#142641; font-size:17px; font-weight:700; }
+.panel-heading p { margin:5px 0 0; color:#5d6b7f; font-size:12.5px; line-height:1.5; }
+
+/* Grafik donat - bentuk lingkaran dipertahankan */
+.sentiment-content {
+  display:grid; grid-template-columns:minmax(240px,.8fr) minmax(340px,1.2fr);
+  align-items:center; gap:55px; max-width:860px;
+  min-height:225px; margin:0 auto;
+}
+.donut-chart {
+  position:relative; width:175px; height:175px;
+  margin:0 auto; border-radius:50%;
+  background:conic-gradient(#1f9d68 0 50%,#db4e58 50% 100%);
+}
+.donut-chart::after {
+  content:""; position:absolute; inset:26px;
+  border-radius:50%; background:#fff;
+}
+.donut-center {
+  position:absolute; inset:0; z-index:1;
+  display:grid; place-content:center; text-align:center;
+}
+.donut-center strong { display:block; color:#142641; font-size:27px; font-weight:700; line-height:1; }
+.donut-center span { display:block; margin-top:7px; color:#5f6d81; font-size:12.5px; }
+
+/* Ringkasan sentimen */
+.sentiment-summary { display:flex; flex-direction:column; gap:13px; }
+.sentiment-legend-item { display:grid; grid-template-columns:11px minmax(0,1fr); align-items:center; gap:11px; padding:14px 15px; border:1px solid #e5eaf1; border-radius:8px; background:#fafbfd; }
+.sentiment-dot { width:8px; height:8px; border-radius:50%; }
+.sentiment-dot.positive { background:#1f9d68; }
+.sentiment-dot.negative { background:#db4e58; }
+.sentiment-legend-item div { display:flex; align-items:center; justify-content:space-between; gap:15px; }
+.sentiment-legend-item span:not(.sentiment-dot) { color:#4f5e73; font-size:13px; font-weight:500; }
+.sentiment-legend-item strong { color:#142641; font-size:13px; font-weight:700; white-space:nowrap; }
+.dashboard-result-button { width:100%; margin-top:3px; font-size:12.5px; }
+.dashboard-empty-state { min-height:235px; display:flex; align-items:center; justify-content:center; flex-direction:column; padding:30px 20px; text-align:center; }
+.dashboard-empty-icon { width:44px; height:44px; display:grid; place-items:center; margin-bottom:12px; border-radius:12px; background:#edf3ff; color:#295bcc; font-size:15px; font-weight:700; }
+.dashboard-empty-state strong { color:#142641; font-size:15px; }
+.dashboard-empty-state p { max-width:430px; margin:7px 0 16px; color:#5d6b7f; font-size:12.5px; line-height:1.6; }
+.dashboard-loading-state { min-height:235px; display:grid; place-items:center; color:#5d6b7f; font-size:13px; }
+
+/* Responsif bawaan */
+@media(max-width:1050px) {
+  .stats-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
+  .sentiment-content { gap:30px; }
+}
+@media(max-width:760px) {
+  .page-heading { display:block; }
+  .page-heading .primary-button { margin-top:14px; }
+  .sentiment-content { grid-template-columns:1fr; gap:24px; }
+}
+@media(max-width:620px) {
+  .stats-grid { grid-template-columns:1fr; }
+  .dashboard-panel { padding:17px; }
+  .sentiment-legend-item div { align-items:flex-start; flex-direction:column; gap:4px; }
+}
+@media(max-width:480px) {
+  .page-heading h1 { font-size:22px; }
+  .stat-card { min-height:112px; }
+  .donut-chart { width:150px; height:150px; }
+  .donut-chart::after { inset:23px; }
+}
+@media(prefers-reduced-motion:reduce) {
+  .stat-card,.stat-card::before { transition:none; }
+  .stat-card:hover { transform:none; }
+}
+
+/* ============================================
+   PERBAIKAN SPACING DAN LAYOUT DASHBOARD
+   ============================================ */
+.dashboard-page { display:flex; flex-direction:column; gap:22px; }
+.dashboard-page > .page-heading { margin-bottom:2px; }
+.dashboard-page > .dashboard-panel {
+  min-height:0; margin:0; padding:28px 30px;
+  border-radius:15px;
+  box-shadow:0 4px 18px rgba(20,38,65,.035);
+}
+.dashboard-page > .dashboard-panel > h2 {
+  margin:0 0 10px; color:#142641;
+  font-size:21px; line-height:1.4;
+}
+.dashboard-page > .dashboard-panel > p {
+  margin:0 0 18px; color:#596980;
+  font-size:14px; line-height:1.65;
+}
+.dashboard-page .models-summary { margin:20px 0; gap:22px; }
+.dashboard-page .stats-grid {
+  grid-template-columns:repeat(3,minmax(0,1fr));
+  gap:18px; margin:20px 0 0;
+}
+.dashboard-page .stat-card {
+  min-height:150px; padding:20px 22px;
+  border:1px solid #dfe7f2; border-radius:12px;
+  background:#f8faff;
+}
+.dashboard-page .stat-card:nth-child(2) { background:#fbf9ff; border-color:#e9e0f5; }
+.dashboard-page .stat-card:nth-child(3) { background:#f6fbfa; border-color:#d8e9e4; }
+.dashboard-page .stat-card:hover { transform:translateY(-2px); }
+
+/* Perbaikan area grafik */
+.dashboard-page .sentiment-content {
+  grid-template-columns:minmax(180px,.8fr) minmax(0,1.2fr);
+  gap:38px; width:100%; max-width:800px;
+  min-height:230px; margin:24px auto 8px;
+}
+.dashboard-page .donut-chart {
+  position:relative; width:190px; height:190px; border-radius:50%;
+}
+.dashboard-page .donut-chart::after {
+  content:""; position:absolute; inset:28px;
+  border-radius:50%; background:#fff;
+}
+.dashboard-page .donut-center {
+  position:absolute; inset:0; z-index:1;
+  display:grid; place-content:center; text-align:center;
+}
+.dashboard-page .sentiment-summary > p {
+  display:flex; align-items:center; gap:11px;
+  margin:0; padding:15px 17px;
+  border:1px solid #e0e7f0; border-radius:10px;
+  background:#fafbfd; font-size:14px;
+}
+.dashboard-page .sentiment-summary > p::before {
+  content:""; width:10px; height:10px; border-radius:50%;
+  flex-shrink:0; background:#1f9d68;
+}
+.dashboard-page .sentiment-summary > p:nth-child(2)::before { background:#db4e58; }
+.dashboard-page .sentiment-summary > .secondary-button {
+  display:inline-flex; align-items:center; justify-content:center;
+  align-self:flex-start; min-width:150px;
+  padding:10px 18px; text-decoration:none;
+}
+.dashboard-page > p:last-child {
+  margin:0; padding:17px 20px;
+  border:1px solid #dfe7f3; border-radius:12px;
+  background:#f9fbff; color:#53627b;
+  font-size:13px; line-height:1.6;
+}
+@media(max-width:1100px) {
+  .dashboard-page .stats-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
+  .dashboard-page .stat-card:last-child { grid-column:1/-1; }
+  .dashboard-page .models-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }
+}
+@media(max-width:760px) {
+  .dashboard-page .sentiment-content { grid-template-columns:1fr; gap:24px; }
+}
+@media(max-width:620px) {
+  .dashboard-page { gap:16px; }
+  .dashboard-page > .dashboard-panel { padding:22px 18px; }
+  .dashboard-page .stats-grid { grid-template-columns:1fr; gap:12px; }
+  .dashboard-page .stat-card:last-child { grid-column:auto; }
+}
diff --git a/web_slearn/src/styles/evaluasi-pembanding.css b/web_slearn/src/styles/evaluasi-pembanding.css
new file mode 100644
index 0000000..69eed9e
--- /dev/null
+++ b/web_slearn/src/styles/evaluasi-pembanding.css
@@ -0,0 +1,21 @@
+.comparison-eval {display:grid;gap:24px;color:#172b4d}
+.comparison-eval h2 {margin:0 0 10px;font-size:22px}
+.comparison-eval p {line-height:1.7;color:#53627a}
+.comparison-heading {display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
+.comparison-eyebrow {display:block;color:#2454a6;font-size:12px;font-weight:700;letter-spacing:1px;margin-bottom:10px}
+.comparison-tag {background:#edf2fa;border-radius:20px;padding:9px 16px;color:#2454a6;font-weight:600}
+.comparison-eval .comparison-note {font-size:13px;border-left:3px solid #8da9db;padding-left:14px}
+.comparison-stats {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:24px}
+.comparison-stats>div {padding:20px;border:1px solid #dfe6f1;border-radius:12px;display:grid;gap:8px}
+.comparison-stats strong {font-size:32px;color:#2454a6}
+.comparison-stats small {color:#53627a}
+.comparison-button {background:#2454a6;color:white;border:0;border-radius:8px;padding:12px 18px;font:inherit;cursor:pointer}
+.comparison-button:disabled {opacity:.6;cursor:wait}
+.comparison-button:focus-visible,.comparison-eval summary:focus-visible {outline:3px solid #e5a626;outline-offset:3px}
+.comparison-matrix {display:block;width:100%;max-width:900px;height:auto;margin:18px auto 0}
+.comparison-scroll {overflow-x:auto;margin:16px 0}
+.comparison-eval table {border-collapse:collapse;width:100%;font-size:14px}
+.comparison-eval th,.comparison-eval td {padding:13px 15px;border-bottom:1px solid #dfe6f1;text-align:left;line-height:1.6}
+.comparison-eval thead {background:#edf2fa}
+.comparison-eval summary {cursor:pointer;font-weight:600;padding:12px 0}
+@media(max-width:650px){.comparison-stats{grid-template-columns:1fr}.comparison-eval .research-card{padding:18px}.comparison-eval table{min-width:520px}.comparison-stats strong{font-size:28px}}
diff --git a/web_slearn/src/styles/hasil-analisis.css b/web_slearn/src/styles/hasil-analisis.css
new file mode 100644
index 0000000..fd0f91d
--- /dev/null
+++ b/web_slearn/src/styles/hasil-analisis.css
@@ -0,0 +1,1391 @@
+/* ============================================================
+   PAGE
+   ============================================================ */
+
+.hasil-page {
+  width: 100%;
+}
+
+
+/* ============================================================
+   BACK BUTTON
+   ============================================================ */
+
+.hasil-back-button {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+
+  margin: 0 0 13px;
+  padding: 0;
+
+  border: 0;
+
+  background: transparent;
+  color: #295bcc;
+
+  font-family: inherit;
+  font-size: 11.5px;
+  font-weight: 600;
+
+  cursor: pointer;
+
+  transition:
+    color 0.2s ease,
+    transform 0.2s ease;
+}
+
+.hasil-back-button:hover {
+  color: #214eaf;
+  transform: translateX(-2px);
+}
+
+
+/* ============================================================
+   HEADING
+   ============================================================ */
+
+.hasil-heading {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 20px;
+
+  margin-bottom: 18px;
+}
+
+.hasil-heading h1 {
+  margin: 0;
+
+  color: #142641;
+
+  font-size: 25px;
+  font-weight: 700;
+  line-height: 1.25;
+}
+
+.hasil-heading p {
+  margin: 6px 0 0;
+
+  color: #59677b;
+
+  font-size: 12.5px;
+  line-height: 1.5;
+}
+
+.hasil-heading-actions {
+  display: flex;
+  gap: 8px;
+}
+
+
+/* ============================================================
+   BUTTON
+   ============================================================ */
+
+.hasil-primary-button,
+.hasil-secondary-button {
+  padding: 9px 14px;
+
+  border-radius: 7px;
+
+  font-family: inherit;
+  font-size: 11px;
+  font-weight: 600;
+
+  cursor: pointer;
+
+  transition:
+    background 0.2s ease,
+    border-color 0.2s ease,
+    transform 0.2s ease;
+}
+
+.hasil-primary-button {
+  border: 1px solid #295bcc;
+
+  background: #295bcc;
+  color: #ffffff;
+}
+
+.hasil-primary-button:hover {
+  border-color: #214eaf;
+  background: #214eaf;
+}
+
+.hasil-primary-button:active,
+.hasil-secondary-button:active {
+  transform: translateY(1px);
+}
+
+.hasil-secondary-button {
+  border: 1px solid #ccd8e9;
+
+  background: #ffffff;
+  color: #40506a;
+}
+
+.hasil-secondary-button:hover {
+  border-color: #b6c8e2;
+
+  background: #f5f8fc;
+}
+
+
+/* ============================================================
+   STATISTIC CARDS
+   ============================================================ */
+
+.hasil-stat-grid {
+  display: grid;
+  grid-template-columns:
+    repeat(
+      3,
+      minmax(0, 1fr)
+    );
+
+  gap: 10px;
+
+  margin-bottom: 12px;
+}
+
+.hasil-stat-card {
+  min-height: 112px;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+
+  padding: 16px 18px;
+
+  border: 1px solid #e1e6ef;
+  border-radius: 10px;
+
+  background: #ffffff;
+
+  cursor: default;
+
+  transition:
+    transform 0.25s
+      cubic-bezier(
+        0.22,
+        1,
+        0.36,
+        1
+      ),
+    border-color 0.25s ease,
+    box-shadow 0.25s ease;
+}
+
+.hasil-stat-card:hover {
+  transform:
+    translateY(-5px)
+    scale(1.008);
+
+  box-shadow:
+    0 12px 25px
+    rgba(
+      20,
+      38,
+      65,
+      0.09
+    );
+}
+
+
+/* ============================================================
+   CARD NETRAL
+   ============================================================ */
+
+.hasil-stat-neutral {
+  border-color: #dbe5f5;
+  background: #f8faff;
+}
+
+.hasil-stat-neutral:hover {
+  border-color: #b9cae6;
+}
+
+
+/* ============================================================
+   CARD POSITIF
+   ============================================================ */
+
+.hasil-stat-positive {
+  border-color: #c7e6d5;
+  background: #f3fbf7;
+}
+
+.hasil-stat-positive:hover {
+  border-color: #99d0b3;
+
+  box-shadow:
+    0 12px 25px
+    rgba(
+      31,
+      157,
+      104,
+      0.11
+    );
+}
+
+
+/* ============================================================
+   CARD NEGATIF
+   ============================================================ */
+
+.hasil-stat-negative {
+  border-color: #efcbd0;
+  background: #fff6f7;
+}
+
+.hasil-stat-negative:hover {
+  border-color: #e6aeb5;
+
+  box-shadow:
+    0 12px 25px
+    rgba(
+      219,
+      78,
+      88,
+      0.11
+    );
+}
+
+
+/* ============================================================
+   TEXT STAT
+   ============================================================ */
+
+.hasil-stat-card span {
+  display: block;
+
+  color: #58677c;
+
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.hasil-stat-card strong {
+  display: block;
+
+  margin: 4px 0;
+
+  color: #142641;
+
+  font-size: 23px;
+  font-weight: 700;
+}
+
+.hasil-stat-card small {
+  display: block;
+
+  color: #657388;
+
+  font-size: 11.5px;
+  line-height: 1.4;
+}
+
+.positive-text {
+  color: #168052 !important;
+}
+
+.negative-text {
+  color: #cf414c !important;
+}
+
+
+/* ============================================================
+   GENERAL CARD
+   ============================================================ */
+
+.hasil-card {
+  padding: 18px;
+
+  border: 1px solid #e1e6ef;
+  border-radius: 10px;
+
+  background: #ffffff;
+}
+
+
+/* ============================================================
+   SECTION HEADING
+   ============================================================ */
+
+.hasil-section-heading h2 {
+  margin: 0;
+
+  color: #142641;
+
+  font-size: 15.5px;
+  font-weight: 700;
+}
+
+.hasil-section-heading p {
+  margin: 5px 0 0;
+
+  color: #667489;
+
+  font-size: 11px;
+  line-height: 1.5;
+}
+
+
+/* ============================================================
+   DISTRIBUTION CARD
+   ============================================================ */
+
+.hasil-distribution-card {
+  margin-bottom: 12px;
+}
+
+
+/* ============================================================
+   META ANALISIS
+   ============================================================ */
+
+.hasil-analysis-meta {
+  display: grid;
+  grid-template-columns:
+    repeat(
+      2,
+      minmax(0, 1fr)
+    );
+
+  gap: 8px;
+
+  margin-top: 14px;
+}
+
+.hasil-analysis-meta > div {
+  min-width: 0;
+
+  padding: 10px 12px;
+
+  border: 1px solid #e7ebf1;
+  border-radius: 8px;
+
+  background: #f8f9fc;
+}
+
+.hasil-analysis-meta span {
+  display: block;
+
+  color: #667489;
+
+  font-size: 10.5px;
+}
+
+.hasil-analysis-meta strong {
+  display: block;
+
+  margin-top: 4px;
+
+  overflow: hidden;
+
+  color: #293a53;
+
+  font-size: 11px;
+  font-weight: 600;
+
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+
+/* ============================================================
+   DISTRIBUTION
+   ============================================================ */
+
+.hasil-distribution {
+  display: grid;
+  grid-template-columns:
+    220px
+    minmax(240px, 1fr);
+
+  align-items: center;
+
+  gap: 40px;
+
+  max-width: 700px;
+
+  min-height: 190px;
+
+  margin: 20px auto 0;
+}
+
+
+/* ============================================================
+   DONUT
+   ============================================================ */
+
+.hasil-donut {
+  position: relative;
+
+  width: 145px;
+  height: 145px;
+
+  margin: auto;
+
+  border-radius: 50%;
+
+  background:
+    conic-gradient(
+      #1f9d68 0 50%,
+      #db4e58 50% 100%
+    );
+}
+
+.hasil-donut::after {
+  content: "";
+
+  position: absolute;
+  inset: 22px;
+
+  border-radius: 50%;
+
+  background: #ffffff;
+}
+
+.hasil-donut-center {
+  position: absolute;
+  inset: 0;
+
+  z-index: 1;
+
+  display: grid;
+  place-content: center;
+
+  text-align: center;
+}
+
+.hasil-donut-center strong {
+  color: #142641;
+
+  font-size: 23px;
+  font-weight: 700;
+  line-height: 1;
+}
+
+.hasil-donut-center span {
+  margin-top: 6px;
+
+  color: #5d6b80;
+
+  font-size: 11px;
+}
+
+
+/* ============================================================
+   LEGEND
+   ============================================================ */
+
+.hasil-legend {
+  display: flex;
+  flex-direction: column;
+
+  gap: 10px;
+}
+
+.hasil-legend-item {
+  display: flex;
+  align-items: center;
+
+  gap: 10px;
+
+  padding: 12px 14px;
+
+  border: 1px solid #e6eaf1;
+  border-radius: 8px;
+
+  color: #40506a;
+
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.hasil-legend-item.positive {
+  border-color: #d1eadd;
+
+  background: #f4faf7;
+}
+
+.hasil-legend-item.negative {
+  border-color: #f0d4d7;
+
+  background: #fff7f8;
+}
+
+.legend-dot {
+  width: 8px;
+  height: 8px;
+
+  flex: 0 0 8px;
+
+  border-radius: 50%;
+}
+
+.legend-dot.positive {
+  background: #1f9d68;
+}
+
+.legend-dot.negative {
+  background: #db4e58;
+}
+
+
+/* ============================================================
+   DETAIL RESULT CARD
+   ============================================================ */
+
+.hasil-detail-card {
+  padding: 0;
+
+  overflow: hidden;
+}
+
+
+/* ============================================================
+   TABLE HEADER
+   ============================================================ */
+
+.hasil-list-header {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+
+  gap: 16px;
+
+  padding: 16px;
+}
+
+.hasil-tools {
+  display: flex;
+
+  gap: 7px;
+}
+
+.hasil-tools input,
+.hasil-tools select {
+  height: 34px;
+
+  padding: 0 10px;
+
+  border: 1px solid #d9e0eb;
+  border-radius: 7px;
+
+  background: #ffffff;
+  color: #44526a;
+
+  font-family: inherit;
+  font-size: 10.5px;
+}
+
+.hasil-tools input {
+  width: 240px;
+}
+
+.hasil-tools input:focus,
+.hasil-tools select:focus {
+  border-color: #295bcc;
+
+  outline:
+    2px solid
+    rgba(
+      41,
+      91,
+      204,
+      0.1
+    );
+}
+
+
+/* ============================================================
+   TABLE
+   ============================================================ */
+
+.hasil-table-wrapper {
+  width: 100%;
+
+  overflow-x: auto;
+}
+
+.hasil-table {
+  width: 100%;
+  min-width: 820px;
+
+  border-collapse: collapse;
+}
+
+.hasil-table th {
+  padding: 10px 12px;
+
+  background: #f4f7fb;
+
+  color: #556479;
+
+  text-align: left;
+  white-space: nowrap;
+
+  font-size: 10px;
+  font-weight: 600;
+}
+
+.hasil-table td {
+  padding: 11px 12px;
+
+  border-top:
+    1px solid #e8ecf2;
+
+  color: #35445c;
+
+  font-size: 10.5px;
+  line-height: 1.5;
+
+  vertical-align: middle;
+}
+
+.hasil-table th:first-child,
+.hasil-table td:first-child {
+  width: 55px;
+}
+
+.hasil-review-cell {
+  max-width: 700px;
+}
+
+
+/* ============================================================
+   SENTIMENT BADGE TABLE
+   ============================================================ */
+
+.sentiment-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  min-width: 58px;
+
+  padding: 5px 10px;
+
+  border: 1px solid transparent;
+  border-radius: 999px;
+
+  font-size: 9.5px;
+  font-weight: 700;
+}
+
+.sentiment-badge.positive {
+  border-color: #b8dfca;
+
+  background: #e3f5ec;
+  color: #137b4e;
+}
+
+.sentiment-badge.negative {
+  border-color: #efc1c6;
+
+  background: #fde7e9;
+  color: #c43743;
+}
+
+
+/* ============================================================
+   PROCESS BUTTON
+   ============================================================ */
+
+.process-button {
+  padding: 7px 10px;
+
+  border: 1px solid #ccd9ef;
+  border-radius: 6px;
+
+  background: #ffffff;
+  color: #295bcc;
+
+  font-size: 9.5px;
+  font-weight: 600;
+
+  white-space: nowrap;
+
+  cursor: pointer;
+
+  transition:
+    background 0.2s ease,
+    border-color 0.2s ease,
+    transform 0.2s ease;
+}
+
+.process-button:hover {
+  border-color: #afc3e6;
+
+  background: #f4f7fd;
+
+  transform: translateY(-1px);
+}
+
+
+/* ============================================================
+   EMPTY TABLE
+   ============================================================ */
+
+.empty-result {
+  padding: 28px !important;
+
+  text-align: center;
+
+  color: #68768a !important;
+}
+
+
+/* ============================================================
+   PAGINATION
+   ============================================================ */
+
+.hasil-table-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  padding: 12px 15px;
+
+  border-top:
+    1px solid #e8ecf2;
+
+  color: #657388;
+
+  font-size: 10px;
+}
+
+.hasil-table-footer > div {
+  display: flex;
+  align-items: center;
+
+  gap: 10px;
+}
+
+.hasil-table-footer button {
+  width: 28px;
+  height: 28px;
+
+  border: 1px solid #dfe5ee;
+  border-radius: 6px;
+
+  background: #ffffff;
+  color: #526078;
+
+  cursor: pointer;
+}
+
+.hasil-table-footer button:hover:not(:disabled) {
+  background: #f5f7fa;
+}
+
+.hasil-table-footer button:disabled {
+  opacity: 0.4;
+
+  cursor: not-allowed;
+}
+
+.hasil-table-footer strong {
+  color: #34445d;
+
+  font-size: 10px;
+}
+
+
+/* ============================================================
+   LOADING / ERROR STATE
+   ============================================================ */
+
+.hasil-state-card {
+  max-width: 600px;
+
+  margin: 30px auto;
+
+  text-align: center;
+}
+
+.hasil-state-card h2 {
+  margin: 0;
+
+  color: #142641;
+
+  font-size: 18px;
+}
+
+.hasil-state-card p {
+  margin: 8px 0 16px;
+
+  color: #647287;
+
+  font-size: 12px;
+  line-height: 1.6;
+}
+
+.hasil-state-actions {
+  display: flex;
+  justify-content: center;
+
+  gap: 8px;
+}
+
+
+/* ============================================================
+   MODAL OVERLAY
+   ============================================================ */
+
+.process-overlay {
+  position: fixed;
+  inset: 0;
+
+  z-index: 50;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  padding: 24px;
+
+  background:
+    rgba(
+      13,
+      27,
+      48,
+      0.46
+    );
+}
+
+
+/* ============================================================
+   MODAL
+   ============================================================ */
+
+.process-modal {
+  width:
+    min(
+      720px,
+      100%
+    );
+
+  max-height:
+    calc(
+      100vh - 48px
+    );
+
+  padding: 18px;
+
+  overflow-x: hidden;
+  overflow-y: auto;
+
+  border:
+    1px solid #e3e8f0;
+
+  border-radius: 14px;
+
+  background: #ffffff;
+
+  box-shadow:
+    0 18px 55px
+    rgba(
+      15,
+      31,
+      55,
+      0.2
+    );
+
+  scrollbar-gutter: stable;
+}
+
+
+/* ============================================================
+   SCROLLBAR MODAL
+   ============================================================ */
+
+.process-modal::-webkit-scrollbar {
+  width: 9px;
+}
+
+.process-modal::-webkit-scrollbar-track {
+  margin-block: 14px;
+
+  background: transparent;
+}
+
+.process-modal::-webkit-scrollbar-thumb {
+  border: 2px solid #ffffff;
+  border-radius: 999px;
+
+  background: #929ba7;
+}
+
+.process-modal::-webkit-scrollbar-thumb:hover {
+  background: #737e8b;
+}
+
+.process-modal {
+  scrollbar-width: thin;
+
+  scrollbar-color:
+    #929ba7
+    transparent;
+}
+
+
+/* ============================================================
+   MODAL HEADER
+   ============================================================ */
+
+.process-modal-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+
+  padding-bottom: 12px;
+
+  border-bottom:
+    1px solid #e9edf3;
+}
+
+.process-modal-header span {
+  color: #295bcc;
+
+  font-size: 9px;
+  font-weight: 700;
+
+  letter-spacing: 0.08em;
+}
+
+.process-modal-header h2 {
+  margin: 2px 0 0;
+
+  color: #142641;
+
+  font-size: 16px;
+}
+
+.process-modal-header button {
+  width: 30px;
+  height: 30px;
+
+  display: grid;
+  place-items: center;
+
+  padding: 0;
+
+  border: 0;
+  border-radius: 7px;
+
+  background: transparent;
+  color: #69758a;
+
+  font-size: 22px;
+  line-height: 1;
+
+  cursor: pointer;
+
+  transition:
+    background 0.2s ease,
+    color 0.2s ease;
+}
+
+.process-modal-header button:hover {
+  background: #f2f5f9;
+  color: #142641;
+}
+
+
+/* ============================================================
+   ULASAN ASLI
+   ============================================================ */
+
+.original-review {
+  margin: 13px 0;
+  padding: 12px;
+
+  border:
+    1px solid #e8edf4;
+  border-radius: 10px;
+
+  background: #f5f8fd;
+}
+
+.original-review span {
+  color: #657489;
+
+  font-size: 9.5px;
+}
+
+.original-review p {
+  margin: 5px 0 0;
+
+  color: #273952;
+
+  font-size: 11px;
+  line-height: 1.55;
+}
+
+
+/* ============================================================
+   PREPROCESSING
+   ============================================================ */
+
+.process-step-list {
+  display: flex;
+  flex-direction: column;
+
+  gap: 7px;
+}
+
+.process-step {
+  display: grid;
+  grid-template-columns:
+    24px 1fr;
+
+  align-items: start;
+
+  gap: 8px;
+}
+
+.process-step > span {
+  width: 22px;
+  height: 22px;
+
+  display: grid;
+  place-items: center;
+
+  border-radius: 50%;
+
+  background: #edf3ff;
+  color: #295bcc;
+
+  font-size: 9px;
+  font-weight: 700;
+}
+
+.process-step > div {
+  padding: 9px 11px;
+
+  border:
+    1px solid #e2e8f0;
+  border-radius: 10px;
+
+  background: #ffffff;
+}
+
+.process-step strong {
+  display: block;
+
+  color: #36465e;
+
+  font-size: 9.5px;
+}
+
+.process-step p {
+  margin: 3px 0 0;
+
+  color: #657388;
+
+  font-size: 9.5px;
+  line-height: 1.5;
+}
+
+
+/* ============================================================
+   TF-IDF
+   ============================================================ */
+
+.tfidf-process {
+  margin-top: 13px;
+  padding: 12px;
+
+  border:
+    1px solid #e2e8f0;
+  border-radius: 10px;
+
+  background: #ffffff;
+}
+
+.modal-subheading h3 {
+  margin: 0 0 11px;
+
+  color: #36465e;
+
+  font-size: 11px;
+}
+
+.tfidf-row {
+  display: grid;
+  grid-template-columns:
+    65px
+    1fr
+    65px;
+
+  align-items: center;
+
+  gap: 8px;
+
+  margin: 7px 0;
+
+  font-size: 9.5px;
+}
+
+.tfidf-row > span {
+  color: #35445c;
+}
+
+.tfidf-row > div {
+  height: 6px;
+
+  overflow: hidden;
+
+  border-radius: 999px;
+
+  background: #edf0f4;
+}
+
+.tfidf-row i {
+  display: block;
+
+  height: 100%;
+
+  border-radius: inherit;
+
+  background: #295bcc;
+}
+
+.tfidf-row em {
+  color: #637187;
+
+  text-align: right;
+  font-style: normal;
+}
+
+.tfidf-empty {
+  margin: 0;
+
+  color: #69778d;
+
+  font-size: 9.5px;
+}
+
+
+/* ============================================================
+   MODAL PREDICTION RESULT
+   ============================================================ */
+
+.modal-prediction-card {
+  margin-top: 12px;
+
+  padding: 13px;
+
+  border: 1px solid #e8edf4;
+  border-radius: 10px;
+
+  transition:
+    border-color 0.2s ease,
+    background 0.2s ease;
+}
+
+.modal-prediction-card.positive {
+  border-color: #addfc6;
+
+  background: #f0faf5;
+
+  box-shadow:
+    inset 4px 0 0
+    #1f9d68;
+}
+
+.modal-prediction-card.negative {
+  border-color: #efbdc2;
+
+  background: #fff3f4;
+
+  box-shadow:
+    inset 4px 0 0
+    #db4e58;
+}
+
+.modal-prediction-card > span {
+  display: block;
+
+  margin-bottom: 8px;
+
+  color: #59677b;
+
+  font-size: 9.5px;
+  font-weight: 600;
+}
+
+
+/* ============================================================
+   MODAL SENTIMENT BADGE
+   ============================================================ */
+
+.hasil-sentiment-result-badge {
+  width: fit-content;
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  padding: 7px 13px;
+
+  border: 1px solid transparent;
+  border-radius: 999px;
+
+  font-size: 14px;
+  font-weight: 700;
+
+  line-height: 1;
+}
+
+.hasil-sentiment-result-badge.positive {
+  border-color: #a8ddc2;
+
+  background: #dff4e9;
+  color: #13784d;
+}
+
+.hasil-sentiment-result-badge.negative {
+  border-color: #edb6bc;
+
+  background: #fde1e4;
+  color: #bf3541;
+}
+
+
+/* ============================================================
+   RESPONSIVE
+   ============================================================ */
+
+@media (max-width: 900px) {
+  .hasil-stat-grid {
+    grid-template-columns:
+      repeat(
+        3,
+        minmax(0, 1fr)
+      );
+  }
+
+  .hasil-distribution {
+    grid-template-columns:
+      180px
+      1fr;
+
+    gap: 25px;
+  }
+}
+
+
+@media (max-width: 700px) {
+  .hasil-heading {
+    display: block;
+  }
+
+  .hasil-heading h1 {
+    font-size: 22px;
+  }
+
+  .hasil-heading-actions {
+    margin-top: 12px;
+  }
+
+  .hasil-stat-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .hasil-analysis-meta {
+    grid-template-columns: 1fr;
+  }
+
+  .hasil-distribution {
+    grid-template-columns: 1fr;
+
+    gap: 20px;
+  }
+
+  .hasil-list-header {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .hasil-tools {
+    flex-direction: column;
+  }
+
+  .hasil-tools input {
+    width: 100%;
+  }
+
+  .process-overlay {
+    padding: 12px;
+  }
+
+  .process-modal {
+    width: 100%;
+
+    max-height:
+      calc(
+        100vh - 24px
+      );
+
+    border-radius: 12px;
+  }
+}
+
+
+@media (max-width: 520px) {
+  .hasil-heading-actions {
+    flex-direction: column;
+  }
+
+  .hasil-heading-actions button {
+    width: 100%;
+  }
+
+  .hasil-state-actions {
+    flex-direction: column;
+  }
+
+  .hasil-state-actions button {
+    width: 100%;
+  }
+
+  .hasil-table-footer {
+    align-items: flex-start;
+    flex-direction: column;
+
+    gap: 10px;
+  }
+
+  .tfidf-row {
+    grid-template-columns:
+      55px
+      1fr
+      58px;
+  }
+}
+
+
+/* ============================================================
+   REDUCED MOTION
+   ============================================================ */
+
+@media (
+  prefers-reduced-motion: reduce
+) {
+  .hasil-stat-card,
+  .hasil-back-button,
+  .process-button {
+    transition: none;
+  }
+
+  .hasil-stat-card:hover,
+  .hasil-back-button:hover,
+  .process-button:hover {
+    transform: none;
+  }
+}
\ No newline at end of file
diff --git a/web_slearn/src/styles/layout.css b/web_slearn/src/styles/layout.css
new file mode 100644
index 0000000..438fea7
--- /dev/null
+++ b/web_slearn/src/styles/layout.css
@@ -0,0 +1,171 @@
+:root {
+  --navy: #142641;
+  --navy-light: #1c3558;
+  --sapphire: #295bcc;
+  --background: #f5f7fb;
+  --white: #ffffff;
+  --text: #172033;
+  --muted: #6b7485;
+  --border: #e3e8f0;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  background: var(--background);
+  color: var(--text);
+  font-family: Inter, "Segoe UI", Arial, sans-serif;
+}
+
+.app-layout {
+  display: flex;
+  min-height: 100vh;
+}
+
+.sidebar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 230px;
+  height: 100vh;
+  padding: 22px 16px;
+  background: var(--navy);
+  color: var(--white);
+  display: flex;
+  flex-direction: column;
+}
+
+.sidebar-brand {
+  display: flex;
+  align-items: center;
+  gap: 11px;
+  padding: 0 8px 22px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
+}
+
+.brand-logo {
+  width: 36px;
+  height: 36px;
+  border-radius: 8px;
+  background: var(--sapphire);
+  display: grid;
+  place-items: center;
+  font-size: 17px;
+  font-weight: 700;
+}
+
+.sidebar-brand h2 {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.sidebar-brand p {
+  margin: 2px 0 0;
+  color: #aebbd0;
+  font-size: 11px;
+}
+
+.sidebar-menu {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  margin-top: 22px;
+}
+
+.sidebar-link {
+  padding: 10px 12px;
+  border-radius: 7px;
+  color: #c9d3e2;
+  text-decoration: none;
+  font-size: 13.5px;
+  font-weight: 500;
+  transition: 0.2s;
+}
+
+.sidebar-link:hover {
+  background: var(--navy-light);
+  color: var(--white);
+}
+
+.sidebar-link.active {
+  background: var(--sapphire);
+  color: var(--white);
+}
+
+.sidebar-footer {
+  margin-top: auto;
+  padding: 14px 8px 2px;
+  border-top: 1px solid rgba(255, 255, 255, 0.12);
+}
+
+.sidebar-footer p {
+  margin: 0;
+  font-size: 11px;
+  color: #c6d0df;
+}
+
+.sidebar-footer span {
+  font-size: 10px;
+  color: #8797af;
+}
+
+.main-content {
+  width: calc(100% - 230px);
+  margin-left: 230px;
+  min-height: 100vh;
+  padding: 26px 30px 40px;
+}
+
+.content-wrapper {
+  width: 100%;
+  max-width: 1450px;
+  margin: 0 auto;
+}
+
+@media (max-width: 768px) {
+  .app-layout {
+    display: block;
+  }
+
+  .sidebar {
+    position: static;
+    width: 100%;
+    height: auto;
+    padding: 12px;
+  }
+
+  .sidebar-brand {
+    padding: 0 4px 12px;
+  }
+
+  .sidebar-menu {
+    flex-direction: row;
+    overflow-x: auto;
+    margin-top: 12px;
+    padding-bottom: 4px;
+  }
+
+  .sidebar-link {
+    flex: 0 0 auto;
+    white-space: nowrap;
+    padding: 8px 11px;
+  }
+
+  .sidebar-footer {
+    display: none;
+  }
+
+  .main-content {
+    width: 100%;
+    margin-left: 0;
+    padding: 20px 16px 32px;
+  }
+
+  .content-wrapper {
+    max-width: none;
+  }
+}
\ No newline at end of file
diff --git a/web_slearn/src/styles/penelitian-model.css b/web_slearn/src/styles/penelitian-model.css
new file mode 100644
index 0000000..81deeff
--- /dev/null
+++ b/web_slearn/src/styles/penelitian-model.css
@@ -0,0 +1,370 @@
+
+/* PENELITIAN & MODEL AWAL - CSS LENGKAP */
+
+/* Halaman dan navigasi */
+.research-page { width:100%; }
+.research-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:18px; }
+.research-heading h1 { margin:0; color:#142641; font-size:25px; font-weight:700; line-height:1.25; }
+.research-heading p { max-width:900px; margin:5px 0 0; color:#6b7485; font-size:13.5px; line-height:1.5; }
+.nowrap-text { white-space:nowrap; }
+.research-tabs { display:flex; width:100%; margin-bottom:12px; padding:4px; overflow-x:auto; border:1px solid #e0e6ef; border-radius:9px; background:#fff; }
+.research-tabs button { flex:1; min-width:175px; padding:9px 12px; border:0; border-radius:6px; background:transparent; color:#728097; font-size:10.5px; font-weight:600; white-space:nowrap; cursor:pointer; }
+.research-tabs button:hover { background:#f5f7fb; }
+.research-tabs button.active { background:#295bcc; color:#fff; }
+.research-tab-content { width:100%; }
+
+/* Statistik penelitian */
+.research-stat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:12px; }
+.research-stat-grid.three { grid-template-columns:repeat(3,1fr); }
+.research-stat-card { padding:14px 16px; border:1px solid #e1e6ef; border-radius:9px; background:#fff; }
+.research-stat-card span,.research-stat-card small { display:block; color:#8792a3; font-size:10px; }
+.research-stat-card strong { display:block; margin:3px 0; color:#142641; font-size:21px; }
+.research-two-column { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px; }
+.research-card { width:100%; margin-bottom:12px; padding:16px; border:1px solid #e1e6ef; border-radius:10px; background:#fff; }
+.research-two-column .research-card { margin-bottom:0; }
+.research-section-heading { margin-bottom:14px; }
+.research-section-heading > span { color:#295bcc; font-size:9px; font-weight:700; letter-spacing:.08em; }
+.research-section-heading h2 { margin:2px 0 0; color:#142641; font-size:15px; }
+.research-section-heading p { margin:5px 0 0; color:#8490a2; font-size:10px; line-height:1.5; }
+
+/* Informasi dataset dan model */
+.dataset-information,.model-information,.evaluation-information { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
+.dataset-information div,.model-information div,.evaluation-information div { min-width:0; padding:10px 11px; border:1px solid #edf0f5; border-radius:7px; background:#f8f9fc; }
+.dataset-information span,.model-information span,.evaluation-information span { display:block; color:#909aaa; font-size:9.5px; }
+.dataset-information strong,.model-information strong,.evaluation-information strong { display:block; margin-top:3px; color:#293a53; font-size:11px; line-height:1.4; }
+
+/* Pembagian data training dan testing */
+.split-visual { padding-top:7px; }
+.split-bar { display:flex; width:100%; height:32px; overflow:hidden; border-radius:7px; background:#edf1f6; }
+.split-bar span { display:grid; place-items:center; color:#fff; font-size:10px; font-weight:700; }
+.training-bar { width:80%; background:#295bcc; }
+.testing-bar { width:20%; background:#91a9d9; }
+.split-explanation { margin:14px 0 0; padding:10px 11px; border:1px solid #e6ebf2; border-radius:7px; background:#f8f9fc; color:#5f6e83; font-size:9.5px; line-height:1.6; }
+
+/* Distribusi kelas dataset */
+.dataset-overview-grid { align-items:stretch; }
+.dataset-distribution-card { min-height:100%; }
+.dataset-class-list { display:flex; flex-direction:column; gap:16px; margin-top:4px; }
+.dataset-class-item { width:100%; }
+.dataset-class-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:7px; }
+.dataset-class-name { display:flex; align-items:center; gap:9px; min-width:0; }
+.dataset-class-name > div { min-width:0; }
+.dataset-class-name strong { display:block; color:#33445d; font-size:11px; font-weight:700; }
+.dataset-class-name small { display:block; margin-top:2px; color:#7b8799; font-size:9px; }
+.dataset-class-dot { width:8px; height:8px; flex:0 0 8px; border-radius:50%; }
+.dataset-class-dot.negative { background:#db4e58; }
+.dataset-class-dot.positive { background:#1f9d68; }
+.dataset-class-value { display:flex; align-items:baseline; gap:8px; flex:0 0 auto; }
+.dataset-class-value strong { font-size:17px; font-weight:700; }
+.dataset-class-value span { font-size:9.5px; font-weight:600; }
+.dataset-class-value.negative strong,.dataset-class-value.negative span { color:#c7424d; }
+.dataset-class-value.positive strong,.dataset-class-value.positive span { color:#168052; }
+.dataset-class-bar { width:100%; height:8px; overflow:hidden; border-radius:999px; background:#edf0f4; }
+.dataset-class-fill { display:block; height:100%; border-radius:inherit; }
+.dataset-class-fill.negative { background:#db4e58; }
+.dataset-class-fill.positive { background:#1f9d68; }
+.dataset-label-note { display:flex; flex-wrap:wrap; gap:7px; margin-top:15px; }
+.dataset-label-note span { padding:5px 8px; border:1px solid #dce4ef; border-radius:6px; background:#f7f9fc; color:#59687d; font-size:9px; font-weight:600; }
+.dataset-distribution-state { min-height:104px; display:grid; place-items:center; color:#7b8799; font-size:10px; }
+.dataset-distribution-warning { margin:10px 0 0; color:#b84650; font-size:9px; }
+
+/* Alur penelitian */
+.research-flow { display:flex; align-items:center; width:100%; overflow-x:auto; }
+.flow-box { min-width:145px; padding:12px 10px; border:1px solid #dfe5ee; border-radius:8px; background:#f8fafd; text-align:center; }
+.flow-box strong { display:block; color:#293b55; font-size:10.5px; }
+.flow-box span { display:block; margin-top:3px; color:#8a95a7; font-size:8.8px; }
+.flow-arrow { padding:0 9px; color:#8da1c8; font-size:16px; }
+.research-note { display:grid; grid-template-columns:30px 1fr; gap:10px; padding:12px 14px; border:1px solid #dce5f4; border-radius:8px; background:#f2f6fc; }
+.research-note > span { width:25px; height:25px; display:grid; place-items:center; border-radius:50%; background:#fff; color:#295bcc; font-size:10px; font-weight:700; }
+.research-note strong { display:block; margin-bottom:2px; color:#34445d; font-size:10.5px; }
+.research-note p { margin:0; color:#748196; font-size:9.5px; line-height:1.55; }
+
+/* Preprocessing */
+.preprocessing-toolbar { display:grid; grid-template-columns:1fr 180px; gap:10px; margin-bottom:14px; }
+.preprocessing-toolbar input,.preprocessing-toolbar select,.tfidf-research-toolbar input,.tfidf-research-toolbar select { width:100%; height:38px; padding:0 11px; border:1px solid #dfe5ee; border-radius:7px; outline:none; background:#fff; color:#44536a; font-size:10px; }
+.preprocessing-toolbar input:focus,.preprocessing-toolbar select:focus,.tfidf-research-toolbar input:focus,.tfidf-research-toolbar select:focus { border-color:#9bb7ef; box-shadow:0 0 0 3px rgba(41,91,204,.07); }
+.preprocessing-state { padding:30px 16px; text-align:center; color:#7f8a9c; font-size:10.5px; }
+.preprocessing-state.error { color:#c33f4a; }
+.preprocessing-method-grid { grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr); align-items:stretch; }
+.preprocessing-method-grid .research-method-card { min-height:0; margin-bottom:0; }
+.stopword-method-card { min-width:0; }
+.research-preprocessing-data-list { display:flex; flex-direction:column; gap:8px; }
+.research-preprocessing-data-card { width:100%; padding:13px 14px; border:1px solid #e5eaf1; border-radius:8px; background:#fff; }
+.research-preprocessing-data-card:hover { border-color:#cbd9f1; background:#fcfdff; }
+.research-preprocessing-data-content { min-width:0; width:100%; }
+.research-preprocessing-data-header { display:flex; align-items:center; justify-content:space-between; gap:12px; }
+.research-preprocessing-data-header > strong { color:#2d3f59; font-size:11px; }
+.research-preprocessing-data-content > p { margin:9px 0 11px; color:#536177; font-size:10px; line-height:1.6; }
+.research-label-badge { display:inline-flex; padding:5px 9px; border-radius:999px; font-size:9px; font-weight:700; white-space:nowrap; }
+.research-label-badge.positive { background:#e6f5ef; color:#16845c; }
+.research-label-badge.negative { background:#fdebed; color:#d33f4d; }
+.research-preprocessing-card-footer { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; padding-top:9px; border-top:1px solid #eef1f5; }
+.research-preprocessing-card-footer > div { min-width:0; flex:1; }
+.research-preprocessing-card-footer span { display:block; margin-bottom:4px; color:#929cab; font-size:8.5px; }
+.research-preprocessing-card-footer code { display:block; overflow:hidden; color:#5c6a80; font-size:9px; white-space:nowrap; text-overflow:ellipsis; }
+.research-preprocessing-card-footer button,.tfidf-card-footer button { padding:7px 10px; border:1px solid #cddbf2; border-radius:6px; background:#fff; color:#295bcc; font-size:9.5px; font-weight:600; cursor:pointer; }
+.research-preprocessing-card-footer button:hover,.tfidf-card-footer button:hover { border-color:#a9bfeb; background:#f3f7ff; }
+.normalization-list { display:flex; flex-direction:column; gap:7px; }
+.normalization-list div { display:grid; grid-template-columns:1fr 76px 1fr; align-items:center; min-height:48px; padding:9px 14px; border:1px solid #edf0f4; border-radius:7px; background:#fbfcfe; }
+.normalization-list code { justify-self:start; color:#c04751; font-size:9.5px; }
+.normalization-arrow { display:flex !important; align-items:center; justify-content:center; justify-self:center; width:76px; color:#99a4b5 !important; font-size:12px; transform:scaleX(1.45); }
+.normalization-list strong { justify-self:end; color:#25825b; font-size:9.5px; }
+.important-word-tags { display:flex; flex-wrap:wrap; gap:6px; }
+.important-word-tags span { padding:5px 8px; border:1px solid #d8e3f5; border-radius:999px; background:#f5f8ff; color:#355eaa; font-size:8.8px; font-weight:600; }
+.research-data-pagination { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:14px; padding-top:12px; border-top:1px solid #edf0f4; color:#8591a3; font-size:9.5px; }
+.research-data-pagination > div { display:flex; align-items:center; gap:9px; }
+.research-data-pagination button { width:31px; height:31px; border:1px solid #e0e5ed; border-radius:7px; background:#fff; color:#52627a; cursor:pointer; }
+.research-data-pagination button:disabled { opacity:.4; cursor:not-allowed; }
+.research-data-pagination strong { color:#34445c; font-size:9.5px; }
+
+/* TF-IDF */
+.tfidf-research-toolbar { display:grid; grid-template-columns:minmax(260px,1fr) 160px 160px; gap:10px; margin-bottom:14px; }
+.tfidf-research-list { display:flex; flex-direction:column; gap:10px; }
+.tfidf-data-card { width:100%; padding:14px; border:1px solid #e3e8f0; border-radius:9px; background:#fff; }
+.tfidf-data-card:hover { border-color:#c9d7ef; background:#fcfdff; }
+.tfidf-data-header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
+.tfidf-data-title { color:#2d3f59; font-size:11px; }
+.tfidf-data-badges { display:flex; align-items:center; gap:6px; }
+.research-type-badge { display:inline-flex; padding:5px 9px; border-radius:999px; font-size:9px; font-weight:700; }
+.research-type-badge.training { border:1px solid #d4e0f5; background:#edf3ff; color:#295bcc; }
+.research-type-badge.testing { border:1px solid #dfe3eb; background:#f3f5f8; color:#657289; }
+.tfidf-stemming-preview { padding:10px 11px; border:1px solid #edf0f5; border-radius:7px; background:#f8f9fc; }
+.tfidf-stemming-preview > span { display:block; margin-bottom:5px; color:#909aaa; font-size:8.5px; }
+.tfidf-stemming-preview code { color:#4e5e74; font-size:9.5px; line-height:1.6; }
+.tfidf-weight-preview { margin-top:10px; padding:11px; border:1px solid #e9edf3; border-radius:8px; background:#fbfcfe; }
+.tfidf-weight-preview-title { display:flex; justify-content:space-between; gap:10px; margin-bottom:9px; }
+.tfidf-weight-preview-title span { color:#34445c; font-size:9.5px; font-weight:700; }
+.tfidf-weight-preview-title small { color:#929cab; font-size:8.5px; }
+.tfidf-weight-row { display:grid; grid-template-columns:110px minmax(100px,1fr) 68px; align-items:center; gap:10px; margin-bottom:7px; }
+.tfidf-weight-row code { overflow:hidden; color:#43536b; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
+.tfidf-weight-row strong { color:#34455e; text-align:right; font-size:9px; }
+.tfidf-weight-bar { width:100%; height:7px; overflow:hidden; border-radius:999px; background:#e9eef6; }
+.tfidf-weight-bar span { display:block; height:100%; border-radius:inherit; background:#295bcc; }
+.tfidf-no-weight { padding:8px; color:#8b96a7; text-align:center; font-size:9px; }
+.tfidf-card-footer { display:flex; justify-content:flex-end; margin-top:10px; padding-top:10px; border-top:1px solid #edf0f4; }
+.tfidf-simple-method { padding:18px; }
+.tfidf-simple-flow { display:grid; grid-template-columns:1fr 44px 1fr 44px 1fr; align-items:center; max-width:900px; margin:22px auto; }
+.tfidf-simple-box { min-height:90px; display:flex; flex-direction:column; justify-content:center; padding:14px 18px; border:1px solid #dfe5ee; border-radius:9px; background:#f8fafd; text-align:center; }
+.tfidf-simple-box.highlight { border-color:#cad9f3; background:#eef4ff; }
+.tfidf-simple-box span { color:#8490a2; font-size:9.5px; }
+.tfidf-simple-box strong { display:block; margin-top:5px; color:#142641; font-size:17px; }
+.tfidf-simple-box.highlight strong { color:#295bcc; }
+.tfidf-simple-arrow { color:#89a0cc; text-align:center; font-size:20px; }
+.tfidf-simple-note { display:flex; align-items:flex-start; gap:9px; max-width:900px; margin:0 auto; padding:10px 12px; border:1px solid #e0e7f2; border-radius:7px; background:#f7f9fc; }
+.tfidf-simple-note > span { width:22px; height:22px; flex:0 0 22px; display:grid; place-items:center; border-radius:50%; background:#edf3ff; color:#295bcc; font-size:9px; font-weight:700; }
+.tfidf-simple-note p { margin:2px 0 0; color:#748196; font-size:9px; line-height:1.55; }
+
+/* Modal preprocessing */
+.research-modal-overlay { position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center; padding:24px; background:rgba(20,38,65,.55); }
+.research-modal { width:min(820px,100%); max-height:88vh; overflow:hidden; border:1px solid #dce2eb; border-radius:16px; background:#fff; box-shadow:0 20px 60px rgba(20,38,65,.2); }
+.research-modal-scroll { max-height:88vh; overflow-y:auto; padding:18px; }
+.research-modal-header { display:flex; justify-content:space-between; gap:15px; padding-bottom:13px; border-bottom:1px solid #e7ebf1; }
+.research-modal-header h2 { margin:0; color:#142641; font-size:16px; }
+.research-modal-close { width:30px; height:30px; border:0; border-radius:6px; background:transparent; color:#68768a; font-size:21px; cursor:pointer; }
+.research-modal-close:hover { background:#f3f5f8; }
+.research-modal-original { margin-top:14px; padding:12px; border:1px solid #e3e8ef; border-radius:8px; background:#f7f9fc; }
+.research-modal-original-heading { display:flex; justify-content:space-between; }
+.research-modal-original-heading > span:first-child { color:#7f8998; font-size:9px; }
+.research-modal-original p { margin:7px 0 0; color:#34445c; font-size:10.5px; line-height:1.65; }
+.research-modal-steps { display:flex; flex-direction:column; gap:8px; margin-top:13px; }
+.research-modal-step { display:grid; grid-template-columns:32px 1fr; gap:10px; padding:11px; border:1px solid #e5e9ef; border-radius:8px; }
+.research-modal-step-number { width:28px; height:28px; display:grid; place-items:center; border-radius:50%; background:#edf3ff; color:#295bcc; font-size:9.5px; font-weight:700; }
+.research-modal-step strong { color:#33445d; font-size:10.5px; }
+.research-modal-step p { margin:5px 0 0; padding:8px; border-radius:6px; background:#f6f8fb; color:#56657a; font-family:monospace; font-size:9px; line-height:1.6; overflow-wrap:anywhere; }
+.research-modal-result { display:flex; justify-content:space-between; margin-top:13px; padding:12px; border:1px solid #d8e3f5; border-radius:8px; background:#f1f5fd; }
+.research-modal-result span { color:#708097; font-size:9.5px; }
+.research-modal-result strong { color:#295bcc; font-size:11px; }
+
+/* Modal TF-IDF */
+.tfidf-detail-modal { width:min(980px,100%); }
+.tfidf-modal-summary { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:10px; }
+.tfidf-modal-summary > div { padding:9px 10px; border:1px solid #e8ecf2; border-radius:7px; background:#f8f9fc; }
+.tfidf-modal-summary span { display:block; color:#909aaa; font-size:8.5px; }
+.tfidf-modal-summary strong { display:block; margin-top:3px; color:#30415a; font-size:9.5px; }
+.tfidf-modal-stemming { margin-top:10px; padding:11px; border:1px solid #e4e9f0; border-radius:8px; background:#fbfcfe; }
+.tfidf-modal-stemming > span { display:block; margin-bottom:5px; color:#8793a4; font-size:9px; }
+.tfidf-modal-stemming code { color:#4e5e74; font-size:9px; line-height:1.6; }
+.tfidf-table-heading { margin:15px 0 8px; }
+.tfidf-table-heading h3 { margin:0; color:#142641; font-size:13px; }
+.tfidf-table-wrapper { width:100%; overflow-x:auto; border:1px solid #e2e7ef; border-radius:8px; }
+.tfidf-detail-table { width:100%; min-width:680px; border-collapse:collapse; }
+.tfidf-detail-table th { padding:9px 10px; background:#f5f7fa; color:#617087; text-align:left; font-size:8.5px; }
+.tfidf-detail-table td { padding:8px 10px; border-top:1px solid #edf0f4; color:#536177; font-size:9px; }
+.tfidf-detail-table td code { color:#295bcc; }
+.tfidf-bobot-cell { color:#142641 !important; font-weight:700; }
+.tfidf-empty-table { padding:20px !important; text-align:center; }
+.tfidf-modal-note { margin-top:12px; }
+
+/* Model Logistic Regression */
+.model-top-grid { align-items:stretch; }
+.model-summary-card { display:flex; flex-direction:column; }
+.model-summary-card .model-information { margin-top:auto; }
+.model-information { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
+.model-information > div { padding:11px 12px; border:1px solid #e5eaf1; border-radius:7px; background:#f8f9fc; }
+.model-information span { display:block; color:#909aaa; font-size:9px; }
+.model-information strong { display:block; margin-top:4px; color:#293a53; font-size:11px; }
+.website-model-flow { display:flex; flex-direction:column; align-items:center; gap:4px; }
+.website-model-flow div { width:min(330px,100%); padding:8px 10px; border:1px solid #e2e7ef; border-radius:6px; background:#f8fafd; color:#40516a; text-align:center; font-size:9.5px; font-weight:600; }
+.website-model-flow div:last-child { border-color:#d2def4; background:#edf3ff; color:#295bcc; }
+.website-model-flow span { color:#9caac0; font-size:11px; }
+
+/* Evaluasi dan metrik model */
+.metric-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
+.metric-card { padding:13px 12px; border:1px solid #e5eaf1; border-radius:8px; background:linear-gradient(180deg,#fff 0%,#f8faff 100%); transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease; }
+.metric-card:hover { transform:translateY(-3px); border-color:#ccdaf1; box-shadow:0 7px 18px rgba(20,38,65,.06); }
+.metric-card span,.metric-card small { display:block; color:#8792a3; font-size:9px; }
+.metric-card strong { display:block; margin:5px 0; color:#142641; font-size:20px; }
+.model-evaluation-grid { align-items:stretch; }
+.model-evaluation-grid .research-card { min-width:0; }
+
+/* Confusion matrix */
+.confusion-placeholder { text-align:center; }
+.confusion-axis-label { margin-bottom:7px; color:#8995a7; font-size:8.8px; }
+.confusion-grid { display:grid; grid-template-columns:115px 1fr 1fr; max-width:470px; margin:0 auto; overflow:hidden; border:1px solid #e3e8ef; border-radius:8px; }
+.confusion-grid > div { min-height:62px; display:grid; place-items:center; padding:7px; border-right:1px solid #e6eaf0; border-bottom:1px solid #e6eaf0; }
+.confusion-grid > div:nth-child(3n) { border-right:0; }
+.confusion-grid > div:nth-last-child(-n + 3) { border-bottom:0; }
+.confusion-empty,.confusion-head { background:#f5f7fa; }
+.confusion-head { color:#617087; font-size:9px; font-weight:600; }
+.confusion-value { font-weight:700; }
+.confusion-value.correct { background:#eaf7f0; color:#157852; }
+.confusion-value.error { background:#fdeff0; color:#c8434e; }
+.confusion-value strong { display:block; font-size:19px; }
+.confusion-value small { display:block; margin-top:2px; color:inherit; font-size:8.5px; opacity:.8; }
+.confusion-legend { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:14px; margin-top:10px; }
+.confusion-legend span { display:flex; align-items:center; gap:5px; color:#7d899b; font-size:8.5px; }
+.confusion-legend i { width:8px; height:8px; display:inline-block; border-radius:50%; }
+.confusion-legend i.correct { background:#39a778; }
+.confusion-legend i.error { background:#df6670; }
+
+/* Evaluasi per kelas */
+.class-evaluation-card { min-width:0; }
+.class-metric-table-wrapper { width:100%; overflow-x:auto; border:1px solid #e3e8ef; border-radius:8px; }
+.class-metric-table { width:100%; min-width:520px; border-collapse:collapse; background:#fff; }
+.class-metric-table th { padding:10px 11px; border-bottom:1px solid #dfe5ed; background:#f5f7fa; color:#617087; text-align:left; font-size:8.5px; font-weight:700; }
+.class-metric-table td { padding:11px; border-bottom:1px solid #edf0f4; color:#46566d; font-size:9.5px; font-variant-numeric:tabular-nums; }
+.class-metric-table tbody tr:last-child td { border-bottom:0; }
+.class-metric-table tbody tr:hover { background:#fbfcfe; }
+.class-table-badge { display:inline-flex; padding:5px 8px; border-radius:999px; font-size:8.5px; font-weight:700; }
+.class-table-badge.negative { background:#fdebed; color:#c83f4a; }
+.class-table-badge.positive { background:#e6f5ef; color:#16845c; }
+.class-evaluation-note { display:grid; grid-template-columns:25px 1fr; gap:9px; margin-top:11px; padding:10px 11px; border:1px solid #e2e8f1; border-radius:7px; background:#f8fafd; }
+.class-evaluation-note > span { width:22px; height:22px; display:grid; place-items:center; border-radius:50%; background:#edf3ff; color:#295bcc; font-size:9px; font-weight:700; }
+.class-evaluation-note p { margin:2px 0 0; color:#718095; font-size:8.8px; line-height:1.55; }
+
+/* Responsif bawaan */
+@media(max-width:900px) {
+  .preprocessing-method-grid { grid-template-columns:1fr; }
+  .tfidf-research-toolbar { grid-template-columns:1fr 1fr; }
+  .tfidf-research-toolbar input { grid-column:1/-1; }
+  .tfidf-simple-flow { grid-template-columns:1fr; gap:7px; }
+  .tfidf-simple-arrow { transform:rotate(90deg); }
+}
+@media(max-width:800px) {
+  .research-two-column { grid-template-columns:1fr; }
+  .research-flow { flex-direction:column; }
+  .flow-box { width:100%; }
+  .flow-arrow { transform:rotate(90deg); }
+  .preprocessing-toolbar { grid-template-columns:1fr; }
+}
+@media(max-width:700px) {
+  .research-stat-grid,.research-stat-grid.three { grid-template-columns:1fr; }
+  .metric-grid { grid-template-columns:1fr 1fr; }
+  .tfidf-modal-summary { grid-template-columns:1fr 1fr; }
+  .research-modal-overlay { padding:12px; }
+  .model-information { grid-template-columns:1fr 1fr; }
+}
+@media(max-width:560px) {
+  .tfidf-research-toolbar { grid-template-columns:1fr; }
+  .tfidf-research-toolbar input { grid-column:auto; }
+  .tfidf-data-header { align-items:flex-start; flex-direction:column; }
+  .tfidf-modal-summary { grid-template-columns:1fr; }
+  .model-information { grid-template-columns:1fr; }
+  .confusion-grid { grid-template-columns:90px 1fr 1fr; }
+}
+@media(max-width:520px) {
+  .metric-grid { grid-template-columns:1fr; }
+  .tfidf-weight-row { grid-template-columns:70px 1fr; }
+  .tfidf-weight-row strong { grid-column:2; text-align:left; }
+}
+
+/* ================================================
+   PERBAIKAN SPACING HALAMAN PENELITIAN
+   ================================================ */
+.research-page .research-heading { margin-bottom:22px; }
+.research-page .research-tabs { gap:6px; margin-bottom:22px; padding:6px; }
+.research-page .research-tabs button { min-height:42px; font-size:12px; }
+.research-page .research-stat-grid { gap:16px; margin-bottom:20px; }
+.research-page .research-stat-card { padding:19px 21px; border-radius:12px; }
+.research-page .research-stat-card span,
+.research-page .research-stat-card small { font-size:11px; }
+.research-page .research-stat-card strong { margin:6px 0; font-size:24px; }
+.research-page .research-two-column { gap:20px; margin-bottom:20px; }
+.research-page .research-card { margin-bottom:20px; padding:24px; border-radius:13px; }
+.research-page .research-two-column .research-card { margin-bottom:0; }
+.research-page .research-section-heading { margin-bottom:18px; }
+.research-page .research-section-heading h2 { font-size:17px; }
+.research-page .research-section-heading p { font-size:12px; }
+
+/* Susunan alur penelitian - 7 tahap */
+.research-page .research-flow {
+  display:grid;
+  grid-template-columns:
+    repeat(6,minmax(110px,1fr) 22px)
+    minmax(110px,1fr);
+  align-items:stretch;
+  gap:0; width:100%;
+  flex-wrap:nowrap;
+  overflow-x:auto;
+  padding:6px 0 12px;
+  scrollbar-width:thin;
+}
+.research-page .research-flow .flow-box {
+  display:flex; flex:none;
+  flex-direction:column;
+  align-items:center;
+  justify-content:center;
+  box-sizing:border-box;
+  min-width:0; min-height:100px;
+  padding:16px 10px;
+  border-radius:10px;
+}
+.research-page .research-flow .flow-box strong {
+  font-size:12px;
+  line-height:1.4;
+  overflow-wrap:anywhere;
+}
+.research-page .research-flow .flow-box span {
+  margin-top:6px; font-size:10px; line-height:1.5;
+}
+.research-page .research-flow .flow-arrow {
+  display:grid;
+  place-items:center;
+  min-width:0; min-height:100px;
+  padding:0; font-size:19px;
+  transform:none;
+}
+
+/* Tablet dan smartphone */
+@media(max-width:800px) {
+  .research-page .research-flow {
+    grid-template-columns:1fr;
+    gap:6px;
+    overflow-x:visible;
+  }
+  .research-page .research-flow .flow-box {
+    min-height:80px;
+  }
+  .research-page .research-flow .flow-arrow {
+    justify-self:center;
+    align-self:center;
+    width:24px;
+    height:24px;
+    min-height:0;
+    transform:rotate(90deg);
+  }
+}
+@media(max-width:620px) {
+  .research-page .research-card { padding:18px; }
+  .research-page .research-stat-grid.three { grid-template-columns:1fr; }
+}
diff --git a/web_slearn/src/styles/prediksi-ulasan.css b/web_slearn/src/styles/prediksi-ulasan.css
new file mode 100644
index 0000000..93497c4
--- /dev/null
+++ b/web_slearn/src/styles/prediksi-ulasan.css
@@ -0,0 +1,897 @@
+/* ============================================================
+   PAGE
+   ============================================================ */
+
+.prediksi-page {
+  width: 100%;
+}
+
+
+/* ============================================================
+   HEADING
+   ============================================================ */
+
+.prediksi-heading {
+  margin-bottom: 20px;
+}
+
+.prediksi-heading h1 {
+  margin: 0;
+  color: #142641;
+  font-size: 25px;
+  font-weight: 700;
+  line-height: 1.25;
+}
+
+.prediksi-heading p {
+  margin: 5px 0 0;
+  color: #6b7485;
+  font-size: 13.5px;
+}
+
+
+/* ============================================================
+   GRID
+   ============================================================ */
+
+.prediksi-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+}
+
+
+/* ============================================================
+   CARD
+   ============================================================ */
+
+.prediksi-card {
+  min-height: 360px;
+  padding: 18px;
+  border: 1px solid #e1e6ef;
+  border-radius: 10px;
+  background: #ffffff;
+}
+
+.prediksi-section-heading {
+  margin-bottom: 16px;
+}
+
+.prediksi-section-heading h2 {
+  margin: 0;
+  color: #142641;
+  font-size: 16px;
+  font-weight: 700;
+}
+
+
+/* ============================================================
+   INPUT
+   ============================================================ */
+
+.input-card textarea {
+  width: 100%;
+  min-height: 175px;
+  padding: 12px;
+  resize: vertical;
+
+  border: 1px solid #d9e0eb;
+  border-radius: 8px;
+
+  background: #ffffff;
+  color: #28384f;
+
+  font: inherit;
+  font-size: 11.5px;
+  line-height: 1.6;
+}
+
+.input-card textarea::placeholder {
+  color: #a2aab7;
+}
+
+.input-card textarea:focus {
+  border-color: #295bcc;
+
+  outline:
+    2px solid
+    rgba(
+      41,
+      91,
+      204,
+      0.1
+    );
+}
+
+
+/* ============================================================
+   COUNTER
+   ============================================================ */
+
+.input-information {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+
+  margin-top: 7px;
+
+  color: #758196;
+  font-size: 10px;
+}
+
+
+/* ============================================================
+   ERROR
+   ============================================================ */
+
+.prediksi-error {
+  margin-top: 10px;
+  padding: 9px 10px;
+
+  border: 1px solid #f1c9cd;
+  border-radius: 7px;
+
+  background: #fff5f6;
+  color: #b63e49;
+
+  font-size: 10.5px;
+}
+
+
+/* ============================================================
+   ACTION BUTTONS
+   ============================================================ */
+
+.prediksi-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+
+  margin-top: 14px;
+}
+
+.prediksi-primary-button,
+.prediksi-secondary-button,
+.lihat-proses-button {
+  padding: 9px 14px;
+
+  border-radius: 7px;
+
+  font-size: 11px;
+  font-weight: 600;
+
+  cursor: pointer;
+
+  transition:
+    background 0.2s ease,
+    border-color 0.2s ease,
+    transform 0.2s ease;
+}
+
+.prediksi-primary-button {
+  border: 1px solid #295bcc;
+  background: #295bcc;
+  color: #ffffff;
+}
+
+.prediksi-primary-button:hover:not(:disabled) {
+  border-color: #214eaf;
+  background: #214eaf;
+}
+
+.prediksi-primary-button:active:not(:disabled) {
+  transform: translateY(1px);
+}
+
+.prediksi-primary-button:disabled,
+.prediksi-secondary-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.prediksi-secondary-button {
+  border: 1px solid #d9e0eb;
+  background: #ffffff;
+  color: #435169;
+}
+
+.prediksi-secondary-button:hover:not(:disabled) {
+  background: #f6f8fb;
+}
+
+
+/* ============================================================
+   RESULT CARD
+   ============================================================ */
+
+.result-card {
+  display: flex;
+  flex-direction: column;
+}
+
+
+/* ============================================================
+   EMPTY STATE
+   ============================================================ */
+
+.empty-prediction {
+  flex: 1;
+
+  display: grid;
+  place-content: center;
+
+  max-width: 340px;
+  margin: auto;
+
+  text-align: center;
+}
+
+.empty-icon {
+  width: 42px;
+  height: 42px;
+
+  display: grid;
+  place-items: center;
+
+  margin: 0 auto 11px;
+
+  border-radius: 9px;
+
+  background: #edf3ff;
+  color: #295bcc;
+
+  font-size: 15px;
+  font-weight: 700;
+}
+
+.empty-prediction strong {
+  color: #34445d;
+  font-size: 12.5px;
+}
+
+.empty-prediction p {
+  margin: 6px 0 0;
+
+  color: #748196;
+
+  font-size: 10.5px;
+  line-height: 1.55;
+}
+
+
+/* ============================================================
+   RESULT
+   ============================================================ */
+
+.prediction-result {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+}
+
+
+/* ============================================================
+   ANALYZED TEXT
+   ============================================================ */
+
+.analyzed-text {
+  padding: 12px 13px;
+
+  border: 1px solid #e6eaf1;
+  border-radius: 8px;
+
+  background: #f8f9fc;
+}
+
+.analyzed-text span {
+  color: #69778c;
+  font-size: 10px;
+}
+
+.analyzed-text p {
+  margin: 5px 0 0;
+
+  color: #293a53;
+
+  font-size: 11.5px;
+  line-height: 1.55;
+}
+
+
+/* ============================================================
+   SENTIMENT BOX
+   ============================================================ */
+
+.prediction-sentiment-box {
+  margin-top: 12px;
+  padding: 16px 14px;
+
+  border: 1px solid #e6eaf1;
+  border-radius: 9px;
+
+  transition:
+    background 0.2s ease,
+    border-color 0.2s ease,
+    box-shadow 0.2s ease;
+}
+
+.prediction-sentiment-box > span {
+  display: block;
+
+  margin-bottom: 8px;
+
+  color: #59677b;
+
+  font-size: 10px;
+  font-weight: 600;
+}
+
+
+/* ============================================================
+   POSITIVE STATE
+   ============================================================ */
+
+.prediction-sentiment-box.positive-state {
+  border-color: #addfc6;
+  background: #f0faf5;
+
+  box-shadow:
+    inset 4px 0 0
+    #1f9d68;
+}
+
+
+/* ============================================================
+   NEGATIVE STATE
+   ============================================================ */
+
+.prediction-sentiment-box.negative-state {
+  border-color: #efbdc2;
+  background: #fff3f4;
+
+  box-shadow:
+    inset 4px 0 0
+    #db4e58;
+}
+
+
+/* ============================================================
+   SENTIMENT BADGE
+   ============================================================ */
+
+.sentiment-result-badge {
+  width: fit-content;
+
+  display: inline-flex !important;
+  align-items: center;
+  justify-content: center;
+
+  margin-top: 0 !important;
+  padding: 7px 13px;
+
+  border-radius: 999px;
+
+  font-size: 15px !important;
+  font-weight: 700;
+  line-height: 1;
+}
+
+.prediction-positive {
+  border: 1px solid #a8ddc2;
+
+  background: #dff4e9;
+
+  color: #13784d !important;
+}
+
+.prediction-negative {
+  border: 1px solid #edb6bc;
+
+  background: #fde1e4;
+
+  color: #bf3541 !important;
+}
+
+
+/* ============================================================
+   LIHAT PROSES
+   ============================================================ */
+
+.lihat-proses-button {
+  align-self: flex-start;
+
+  margin-top: 14px;
+
+  border: 1px solid #ccd9ef;
+
+  background: #ffffff;
+  color: #295bcc;
+}
+
+.lihat-proses-button:hover {
+  border-color: #abc0e5;
+  background: #f4f7fd;
+}
+
+
+/* ============================================================
+   PIPELINE INFO
+   ============================================================ */
+
+.prediksi-info {
+  display: grid;
+  grid-template-columns: 30px 1fr;
+  gap: 10px;
+
+  margin-top: 12px;
+  padding: 13px 14px;
+
+  border: 1px solid #dce5f4;
+  border-radius: 8px;
+
+  background: #f2f6fc;
+}
+
+.prediksi-info-icon {
+  width: 25px;
+  height: 25px;
+
+  display: grid;
+  place-items: center;
+
+  border-radius: 50%;
+
+  background: #ffffff;
+  color: #295bcc;
+
+  font-size: 10px;
+  font-weight: 700;
+}
+
+.prediksi-info strong {
+  display: block;
+
+  margin-bottom: 3px;
+
+  color: #34445d;
+
+  font-size: 11px;
+}
+
+.prediksi-info p {
+  margin: 0;
+
+  color: #647287;
+
+  font-size: 10px;
+  line-height: 1.6;
+}
+
+
+/* ============================================================
+   MODAL OVERLAY
+   ============================================================ */
+
+.prediksi-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  padding: 24px;
+
+  background:
+    rgba(
+      13,
+      27,
+      48,
+      0.46
+    );
+}
+
+
+/* ============================================================
+   MODAL
+   ============================================================ */
+
+.prediksi-modal {
+  width: min(
+    720px,
+    100%
+  );
+
+  max-height:
+    calc(
+      100vh - 48px
+    );
+
+  padding: 18px;
+
+  overflow-x: hidden;
+  overflow-y: auto;
+
+  border: 1px solid #e3e8f0;
+
+  /*
+    Semua sudut modal tetap tumpul.
+  */
+  border-radius: 14px;
+
+  background: #ffffff;
+
+  box-shadow:
+    0 18px 55px
+    rgba(
+      15,
+      31,
+      55,
+      0.2
+    );
+
+  scrollbar-gutter: stable;
+}
+
+
+/* ============================================================
+   SCROLLBAR MODAL
+   ============================================================ */
+
+.prediksi-modal::-webkit-scrollbar {
+  width: 9px;
+}
+
+.prediksi-modal::-webkit-scrollbar-track {
+  margin-block: 14px;
+  background: transparent;
+}
+
+.prediksi-modal::-webkit-scrollbar-thumb {
+  border: 2px solid #ffffff;
+  border-radius: 999px;
+  background: #929ba7;
+}
+
+.prediksi-modal::-webkit-scrollbar-thumb:hover {
+  background: #737e8b;
+}
+
+.prediksi-modal {
+  scrollbar-width: thin;
+  scrollbar-color:
+    #929ba7
+    transparent;
+}
+
+
+/* ============================================================
+   HEADER MODAL
+   ============================================================ */
+
+.prediksi-modal-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+
+  padding-bottom: 12px;
+
+  border-bottom:
+    1px solid #e9edf3;
+}
+
+.prediksi-modal-header span {
+  color: #295bcc;
+
+  font-size: 9px;
+  font-weight: 700;
+
+  letter-spacing: 0.08em;
+}
+
+.prediksi-modal-header h2 {
+  margin: 2px 0 0;
+
+  color: #142641;
+
+  font-size: 16px;
+}
+
+.prediksi-modal-header button {
+  width: 30px;
+  height: 30px;
+
+  display: grid;
+  place-items: center;
+
+  padding: 0;
+
+  border: 0;
+  border-radius: 7px;
+
+  background: transparent;
+  color: #69758a;
+
+  font-size: 22px;
+  line-height: 1;
+
+  cursor: pointer;
+
+  transition:
+    background 0.2s ease,
+    color 0.2s ease;
+}
+
+.prediksi-modal-header button:hover {
+  background: #f2f5f9;
+  color: #142641;
+}
+
+
+/* ============================================================
+   ORIGINAL REVIEW
+   ============================================================ */
+
+.prediksi-original {
+  margin: 13px 0;
+  padding: 11px;
+
+  border: 1px solid #e8edf4;
+  border-radius: 10px;
+
+  background: #f5f8fd;
+}
+
+.prediksi-original span {
+  color: #66758b;
+  font-size: 9.5px;
+}
+
+.prediksi-original p {
+  margin: 4px 0 0;
+
+  color: #273952;
+
+  font-size: 11px;
+  line-height: 1.55;
+}
+
+
+/* ============================================================
+   PREPROCESSING STEPS
+   ============================================================ */
+
+.prediksi-step-list {
+  display: flex;
+  flex-direction: column;
+  gap: 7px;
+}
+
+.prediksi-step {
+  display: grid;
+  grid-template-columns: 24px 1fr;
+  gap: 8px;
+
+  align-items: start;
+}
+
+.prediksi-step > span {
+  width: 22px;
+  height: 22px;
+
+  display: grid;
+  place-items: center;
+
+  border-radius: 50%;
+
+  background: #edf3ff;
+  color: #295bcc;
+
+  font-size: 9px;
+  font-weight: 700;
+}
+
+.prediksi-step > div {
+  padding: 9px 11px;
+
+  border: 1px solid #e2e8f0;
+  border-radius: 10px;
+
+  background: #ffffff;
+}
+
+.prediksi-step strong {
+  display: block;
+
+  color: #36465e;
+
+  font-size: 9.5px;
+}
+
+.prediksi-step p {
+  margin: 3px 0 0;
+
+  color: #69778d;
+
+  font-size: 9.5px;
+  line-height: 1.5;
+}
+
+
+/* ============================================================
+   TF-IDF
+   ============================================================ */
+
+.prediksi-tfidf {
+  margin-top: 13px;
+  padding: 12px;
+
+  border: 1px solid #e2e8f0;
+  border-radius: 10px;
+
+  background: #ffffff;
+}
+
+.prediksi-modal-subheading h3 {
+  margin: 0 0 11px;
+
+  color: #36465e;
+
+  font-size: 11px;
+}
+
+.prediksi-tfidf-row {
+  display: grid;
+  grid-template-columns:
+    65px
+    1fr
+    65px;
+
+  gap: 8px;
+  align-items: center;
+
+  margin: 7px 0;
+
+  font-size: 9.5px;
+}
+
+.prediksi-tfidf-row > span {
+  color: #36465e;
+}
+
+.prediksi-tfidf-row > div {
+  height: 6px;
+
+  overflow: hidden;
+
+  border-radius: 999px;
+
+  background: #edf0f4;
+}
+
+.prediksi-tfidf-row i {
+  display: block;
+  height: 100%;
+
+  border-radius: inherit;
+
+  background: #295bcc;
+}
+
+.prediksi-tfidf-row em {
+  color: #6f7c90;
+
+  text-align: right;
+  font-style: normal;
+}
+
+.prediksi-no-tfidf {
+  margin: 0;
+
+  color: #748196;
+
+  font-size: 9.5px;
+}
+
+
+/* ============================================================
+   HASIL MODAL
+   ============================================================ */
+
+.prediksi-modal-result {
+  margin-top: 12px;
+  padding: 12px;
+
+  border: 1px solid #e8edf4;
+  border-radius: 10px;
+
+  transition:
+    border-color 0.2s ease,
+    background 0.2s ease;
+}
+
+.prediksi-modal-result.positive-state {
+  border-color: #addfc6;
+  background: #f0faf5;
+
+  box-shadow:
+    inset 4px 0 0
+    #1f9d68;
+}
+
+.prediksi-modal-result.negative-state {
+  border-color: #efbdc2;
+  background: #fff3f4;
+
+  box-shadow:
+    inset 4px 0 0
+    #db4e58;
+}
+
+.prediksi-modal-result > span {
+  display: block;
+
+  margin-bottom: 7px;
+
+  color: #59677b;
+
+  font-size: 9.5px;
+  font-weight: 600;
+}
+
+
+/* ============================================================
+   RESPONSIVE
+   ============================================================ */
+
+@media (max-width: 900px) {
+  .prediksi-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .prediksi-card {
+    min-height: auto;
+  }
+}
+
+
+@media (max-width: 700px) {
+  .prediksi-heading h1 {
+    font-size: 22px;
+  }
+
+  .prediksi-overlay {
+    padding: 12px;
+  }
+
+  .prediksi-modal {
+    width: 100%;
+
+    max-height:
+      calc(
+        100vh - 24px
+      );
+
+    border-radius: 12px;
+  }
+}
+
+
+@media (max-width: 480px) {
+  .prediksi-actions {
+    flex-direction: column-reverse;
+  }
+
+  .prediksi-primary-button,
+  .prediksi-secondary-button {
+    width: 100%;
+  }
+
+  .prediksi-tfidf-row {
+    grid-template-columns:
+      55px
+      1fr
+      58px;
+  }
+}
\ No newline at end of file
diff --git a/web_slearn/src/styles/riwayat-analisis.css b/web_slearn/src/styles/riwayat-analisis.css
new file mode 100644
index 0000000..850a80d
--- /dev/null
+++ b/web_slearn/src/styles/riwayat-analisis.css
@@ -0,0 +1,1222 @@
+/* ============================================================
+   PAGE
+   ============================================================ */
+
+.riwayat-page {
+  width: 100%;
+  max-width: 1450px;
+  margin: 0 auto;
+  padding: 12px;
+
+  border-radius: 18px;
+
+  background:
+    linear-gradient(
+      135deg,
+      #f5f8ff 0%,
+      #f8f7ff 34%,
+      #f4fbf8 67%,
+      #fff7f8 100%
+    );
+}
+
+
+/* ============================================================
+   HEADING
+   ============================================================ */
+
+.riwayat-heading {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 20px;
+  margin-bottom: 18px;
+}
+
+.riwayat-heading h1 {
+  margin: 0;
+  color: #142641;
+  font-size: 25px;
+  font-weight: 700;
+  line-height: 1.25;
+}
+
+.riwayat-heading p {
+  max-width: 820px;
+  margin: 5px 0 0;
+  color: #617086;
+  font-size: 13.5px;
+  line-height: 1.55;
+}
+
+
+/* ============================================================
+   PRIMARY BUTTON
+   ============================================================ */
+
+.riwayat-primary-button {
+  flex-shrink: 0;
+  padding: 9px 14px;
+  border: 1px solid #295bcc;
+  border-radius: 7px;
+  background: #295bcc;
+  color: #ffffff;
+  font-size: 11px;
+  font-weight: 600;
+  white-space: nowrap;
+  cursor: pointer;
+
+  transition:
+    background 0.2s ease,
+    border-color 0.2s ease,
+    transform 0.2s ease;
+}
+
+.riwayat-primary-button:hover {
+  border-color: #214eaf;
+  background: #214eaf;
+  transform: translateY(-1px);
+}
+
+
+/* ============================================================
+   TAB
+   ============================================================ */
+
+.riwayat-tabs {
+  display: flex;
+  gap: 8px;
+
+  margin-bottom: 16px;
+  padding: 5px;
+
+  border: 1px solid #dfe6f0;
+  border-radius: 10px;
+
+  background:
+    rgba(255, 255, 255, 0.74);
+
+  backdrop-filter: blur(4px);
+}
+
+.riwayat-tab {
+  flex: 1;
+
+  padding: 10px 14px;
+
+  border: 0;
+  border-radius: 7px;
+
+  background: transparent;
+  color: #64748b;
+
+  font-size: 12px;
+  font-weight: 700;
+
+  cursor: pointer;
+
+  transition:
+    background 0.2s ease,
+    color 0.2s ease,
+    box-shadow 0.2s ease;
+}
+
+.riwayat-tab:hover {
+  background: #f0f4fb;
+}
+
+.riwayat-tab.active {
+  background: #295bcc;
+  color: #ffffff;
+
+  box-shadow:
+    0 5px 13px
+    rgba(41, 91, 204, 0.14);
+}
+
+
+/* ============================================================
+   STATISTIC GRID
+   ============================================================ */
+
+.riwayat-stat-grid {
+  display: grid;
+  grid-template-columns:
+    repeat(
+      auto-fit,
+      minmax(220px, 1fr)
+    );
+
+  gap: 10px;
+
+  margin-bottom: 12px;
+}
+
+
+/* ============================================================
+   STATISTIC CARD
+   ============================================================ */
+
+.riwayat-stat-card {
+  min-width: 0;
+  min-height: 112px;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+
+  padding: 16px 18px;
+
+  border: 1px solid #dde5f0;
+  border-radius: 11px;
+
+  cursor: default;
+
+  transition:
+    transform 0.25s
+      cubic-bezier(
+        0.22,
+        1,
+        0.36,
+        1
+      ),
+    box-shadow 0.25s ease,
+    border-color 0.25s ease;
+}
+
+
+/* ============================================================
+   HOVER
+   ============================================================ */
+
+.riwayat-stat-card:hover {
+  transform:
+    translateY(-5px)
+    scale(1.008);
+
+  box-shadow:
+    0 12px 25px
+    rgba(
+      20,
+      38,
+      65,
+      0.09
+    );
+}
+
+
+/* ============================================================
+   WARNA CARD
+   ============================================================ */
+
+.riwayat-stat-card.stat-blue {
+  border-color: #cfdbf3;
+
+  background:
+    linear-gradient(
+      135deg,
+      #f2f6ff 0%,
+      #eaf1ff 100%
+    );
+}
+
+.riwayat-stat-card.stat-blue:hover {
+  border-color: #aebfe4;
+}
+
+
+.riwayat-stat-card.stat-purple {
+  border-color: #ded6f2;
+
+  background:
+    linear-gradient(
+      135deg,
+      #f8f5ff 0%,
+      #f0ebff 100%
+    );
+}
+
+.riwayat-stat-card.stat-purple:hover {
+  border-color: #c4b7e5;
+}
+
+
+.riwayat-stat-card.stat-green {
+  border-color: #c7e6d5;
+
+  background:
+    linear-gradient(
+      135deg,
+      #f3fbf7 0%,
+      #eaf8f1 100%
+    );
+}
+
+.riwayat-stat-card.stat-green:hover {
+  border-color: #9dd2b5;
+
+  box-shadow:
+    0 12px 25px
+    rgba(
+      31,
+      157,
+      104,
+      0.11
+    );
+}
+
+
+.riwayat-stat-card.stat-red {
+  border-color: #efcbd0;
+
+  background:
+    linear-gradient(
+      135deg,
+      #fff7f8 0%,
+      #ffedef 100%
+    );
+}
+
+.riwayat-stat-card.stat-red:hover {
+  border-color: #e5aeb5;
+
+  box-shadow:
+    0 12px 25px
+    rgba(
+      219,
+      78,
+      88,
+      0.11
+    );
+}
+
+
+/* ============================================================
+   TEXT CARD
+   ============================================================ */
+
+.riwayat-stat-card span {
+  display: block;
+
+  margin-bottom: 6px;
+
+  color: #536278;
+
+  font-size: 11.5px;
+  font-weight: 600;
+  line-height: 1.4;
+}
+
+.riwayat-stat-card strong {
+  display: block;
+
+  margin: 0;
+
+  color: #142641;
+
+  font-size: 24px;
+  font-weight: 700;
+  line-height: 1.2;
+}
+
+.riwayat-positive {
+  color: #168052 !important;
+}
+
+.riwayat-negative {
+  color: #cf414c !important;
+}
+
+
+/* ============================================================
+   CARD UMUM
+   ============================================================ */
+
+.riwayat-card {
+  width: 100%;
+  margin-bottom: 12px;
+  overflow: hidden;
+
+  border: 1px solid #dfe6ef;
+  border-radius: 10px;
+
+  background:
+    rgba(255, 255, 255, 0.92);
+
+  box-shadow:
+    0 3px 10px
+    rgba(20, 38, 65, 0.025);
+}
+
+
+/* ============================================================
+   CARD HEADER
+   ============================================================ */
+
+.riwayat-card-header {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+
+  gap: 16px;
+
+  padding: 16px;
+
+  border-bottom:
+    1px solid #edf0f4;
+}
+
+
+/* ============================================================
+   SECTION HEADING
+   ============================================================ */
+
+.riwayat-section-heading > span {
+  display: block;
+
+  color: #295bcc;
+
+  font-size: 9px;
+  font-weight: 700;
+
+  letter-spacing: 0.08em;
+}
+
+.riwayat-section-heading h2 {
+  margin: 3px 0 0;
+
+  color: #142641;
+
+  font-size: 15px;
+}
+
+
+/* ============================================================
+   TOOLS
+   ============================================================ */
+
+.riwayat-tools {
+  display: flex;
+
+  gap: 7px;
+}
+
+.riwayat-tools input,
+.riwayat-tools select {
+  height: 36px;
+
+  padding: 0 10px;
+
+  border: 1px solid #d9e0eb;
+  border-radius: 7px;
+
+  outline: none;
+
+  background: #ffffff;
+  color: #44526a;
+
+  font-size: 10.5px;
+}
+
+.riwayat-tools input {
+  width: 280px;
+}
+
+.riwayat-tools input:focus,
+.riwayat-tools select:focus {
+  border-color: #9cb6e7;
+
+  box-shadow:
+    0 0 0 3px
+    rgba(
+      41,
+      91,
+      204,
+      0.07
+    );
+}
+
+
+/* ============================================================
+   TABLE
+   ============================================================ */
+
+.riwayat-table-wrapper {
+  width: 100%;
+  overflow-x: auto;
+}
+
+.riwayat-table {
+  width: 100%;
+  min-width: 900px;
+
+  border-collapse: collapse;
+}
+
+.riwayat-table th {
+  padding: 10px 11px;
+
+  border-bottom:
+    1px solid #e4e9f0;
+
+  background: #f3f6fb;
+  color: #58677c;
+
+  text-align: left;
+
+  font-size: 9.5px;
+  font-weight: 600;
+
+  white-space: nowrap;
+}
+
+.riwayat-table td {
+  padding: 11px;
+
+  border-bottom:
+    1px solid #e8ecf2;
+
+  color: #35445c;
+
+  font-size: 10.5px;
+  line-height: 1.55;
+
+  vertical-align: middle;
+}
+
+.riwayat-table tbody tr:last-child td {
+  border-bottom: none;
+}
+
+.riwayat-table tbody tr:hover {
+  background: #f8faff;
+}
+
+
+/* ============================================================
+   BATCH ID
+   ============================================================ */
+
+.batch-id {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  padding: 4px 7px;
+
+  border-radius: 6px;
+
+  background: #eef3fc;
+  color: #295bcc;
+
+  font-size: 9.5px;
+  font-weight: 600;
+
+  white-space: nowrap;
+}
+
+
+/* ============================================================
+   FILE NAME
+   ============================================================ */
+
+.file-name-cell {
+  min-width: 0;
+}
+
+.file-name-cell strong {
+  display: block;
+
+  max-width: 430px;
+
+  overflow: hidden;
+
+  color: #293a53;
+
+  font-size: 10.5px;
+  font-weight: 600;
+
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+
+/* ============================================================
+   DATE
+   ============================================================ */
+
+.date-cell strong {
+  display: block;
+
+  color: #45546b;
+
+  font-size: 10px;
+  font-weight: 500;
+
+  white-space: nowrap;
+}
+
+.date-cell span {
+  display: block;
+
+  margin-top: 2px;
+
+  color: #7e8999;
+
+  font-size: 9px;
+}
+
+
+/* ============================================================
+   TOTAL
+   ============================================================ */
+
+.total-data {
+  color: #283950;
+
+  font-size: 11px;
+}
+
+
+/* ============================================================
+   SENTIMENT BADGE
+   ============================================================ */
+
+.history-sentiment {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  min-width: 28px;
+  min-height: 24px;
+
+  padding: 4px 8px;
+
+  border-radius: 999px;
+
+  font-size: 9.5px;
+  font-weight: 600;
+
+  white-space: nowrap;
+}
+
+.history-sentiment.positive {
+  border: 1px solid #b8dfca;
+
+  background: #e3f5ec;
+  color: #137b4e;
+}
+
+.history-sentiment.negative {
+  border: 1px solid #efc1c6;
+
+  background: #fde7e9;
+  color: #c43743;
+}
+
+
+/* ============================================================
+   BUTTON
+   ============================================================ */
+
+.lihat-hasil-button {
+  padding: 6px 9px;
+
+  border: 1px solid #ccd9ef;
+  border-radius: 6px;
+
+  background: #ffffff;
+  color: #295bcc;
+
+  font-size: 9.5px;
+  font-weight: 600;
+
+  white-space: nowrap;
+
+  cursor: pointer;
+
+  transition:
+    background 0.2s ease,
+    border-color 0.2s ease,
+    transform 0.2s ease;
+}
+
+.lihat-hasil-button:hover {
+  border-color: #afc3e6;
+
+  background: #f4f7fd;
+
+  transform:
+    translateY(-1px);
+}
+
+
+/* ============================================================
+   EMPTY
+   ============================================================ */
+
+.riwayat-empty {
+  padding: 28px !important;
+
+  text-align: center;
+
+  color: #68768a !important;
+}
+
+
+/* ============================================================
+   FOOTER
+   ============================================================ */
+
+.riwayat-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  gap: 14px;
+
+  padding: 11px 15px;
+
+  border-top:
+    1px solid #e8ecf2;
+
+  color: #657388;
+
+  font-size: 9.5px;
+}
+
+
+/* ============================================================
+   PAGINATION
+   ============================================================ */
+
+.riwayat-pagination {
+  display: flex;
+  align-items: center;
+
+  gap: 10px;
+}
+
+.riwayat-pagination button {
+  width: 29px;
+  height: 29px;
+
+  border: 1px solid #dfe5ee;
+  border-radius: 6px;
+
+  background: #ffffff;
+  color: #526078;
+
+  cursor: pointer;
+}
+
+.riwayat-pagination button:hover:not(:disabled) {
+  background: #f5f7fa;
+}
+
+.riwayat-pagination button:disabled {
+  opacity: 0.4;
+
+  cursor: not-allowed;
+}
+
+.riwayat-pagination strong {
+  color: #34445d;
+
+  font-size: 10px;
+}
+
+
+/* ============================================================
+   DETAIL PREDIKSI
+   ============================================================ */
+
+.riwayat-detail-anchor {
+  width: 100%;
+
+  scroll-margin-top: 24px;
+}
+
+.riwayat-detail-anchor
+  > .riwayat-card {
+  padding-bottom: 22px;
+}
+
+.riwayat-detail-anchor
+  > .riwayat-card
+  > .riwayat-card-header {
+  margin-bottom: 18px;
+
+  padding: 18px 22px;
+}
+
+
+/* ============================================================
+   ULASAN ASLI DETAIL
+   ============================================================ */
+
+.riwayat-detail-anchor
+  > .riwayat-card
+  > .riwayat-card-header
+  + div {
+  width: auto !important;
+
+  margin:
+    0
+    22px
+    16px !important;
+
+  padding:
+    14px
+    16px !important;
+
+  box-sizing: border-box;
+
+  border-radius:
+    9px !important;
+}
+
+
+/* ============================================================
+   BADGE DETAIL
+   ============================================================ */
+
+.riwayat-detail-anchor
+  > .riwayat-card
+  > .riwayat-card-header
+  + div
+  + div {
+  margin:
+    0
+    22px
+    22px !important;
+}
+
+
+/* ============================================================
+   HEADING DETAIL
+   ============================================================ */
+
+.riwayat-detail-anchor
+  > .riwayat-card
+  > .riwayat-section-heading {
+  margin:
+    0
+    0
+    11px;
+
+  padding:
+    0
+    22px;
+}
+
+.riwayat-detail-anchor
+  > .riwayat-card
+  > .riwayat-section-heading[style] {
+  margin:
+    24px
+    0
+    11px !important;
+
+  padding:
+    0
+    22px !important;
+}
+
+.riwayat-detail-anchor
+  > .riwayat-card
+  > .riwayat-section-heading
+  h2 {
+  margin-top: 4px;
+
+  font-size: 16px;
+  line-height: 1.4;
+}
+
+
+/* ============================================================
+   TABLE DETAIL
+   ============================================================ */
+
+.riwayat-detail-anchor
+  > .riwayat-card
+  > .riwayat-table-wrapper {
+  width: auto;
+
+  margin:
+    0
+    22px
+    22px;
+
+  overflow-x: auto;
+
+  border: 1px solid #e4e9f0;
+  border-radius: 9px;
+}
+
+.riwayat-detail-anchor
+  > .riwayat-card
+  > .riwayat-table-wrapper
+  .riwayat-table {
+  width: 100%;
+  min-width: 0;
+
+  table-layout: fixed;
+}
+
+.riwayat-detail-anchor
+  > .riwayat-card
+  > .riwayat-table-wrapper
+  .riwayat-table th,
+
+.riwayat-detail-anchor
+  > .riwayat-card
+  > .riwayat-table-wrapper
+  .riwayat-table td {
+  padding: 12px 14px;
+
+  white-space: normal;
+
+  overflow-wrap: anywhere;
+}
+
+.riwayat-detail-anchor
+  > .riwayat-card
+  > .riwayat-table-wrapper
+  .riwayat-table th:first-child,
+
+.riwayat-detail-anchor
+  > .riwayat-card
+  > .riwayat-table-wrapper
+  .riwayat-table td:first-child {
+  width: 28%;
+}
+
+.riwayat-detail-anchor
+  > .riwayat-card
+  > .riwayat-table-wrapper
+  .riwayat-table td:nth-child(2) {
+  color: #42536c;
+}
+
+
+/* ============================================================
+   INFORMATION
+   ============================================================ */
+
+.riwayat-information {
+  display: grid;
+  grid-template-columns:
+    30px
+    minmax(0, 1fr);
+
+  gap: 10px;
+
+  padding: 12px 14px;
+
+  border: 1px solid #d5e1f2;
+  border-radius: 9px;
+
+  background:
+    linear-gradient(
+      135deg,
+      #eef4ff 0%,
+      #f3f7fd 100%
+    );
+}
+
+.riwayat-information-icon {
+  width: 25px;
+  height: 25px;
+
+  display: grid;
+  place-items: center;
+
+  border-radius: 50%;
+
+  background: #ffffff;
+  color: #295bcc;
+
+  font-size: 10px;
+  font-weight: 700;
+}
+
+.riwayat-information strong {
+  display: block;
+
+  margin-bottom: 2px;
+
+  color: #34445d;
+
+  font-size: 10.5px;
+}
+
+.riwayat-information p {
+  margin: 0;
+
+  color: #647287;
+
+  font-size: 9.5px;
+  line-height: 1.55;
+}
+
+
+/* ============================================================
+   SCROLLBAR
+   ============================================================ */
+
+.riwayat-table-wrapper::-webkit-scrollbar {
+  height: 7px;
+}
+
+.riwayat-table-wrapper::-webkit-scrollbar-track {
+  background: #f3f5f8;
+}
+
+.riwayat-table-wrapper::-webkit-scrollbar-thumb {
+  border-radius: 999px;
+
+  background: #cdd6e3;
+}
+
+
+/* ============================================================
+   RESPONSIVE
+   ============================================================ */
+
+@media (max-width: 1100px) {
+  .riwayat-stat-grid {
+    grid-template-columns:
+      repeat(
+        2,
+        minmax(0, 1fr)
+      );
+  }
+
+  .file-name-cell strong {
+    max-width: 300px;
+  }
+}
+
+
+@media (max-width: 800px) {
+  .riwayat-card-header {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .riwayat-tools {
+    width: 100%;
+  }
+
+  .riwayat-tools input {
+    flex: 1;
+
+    width: auto;
+  }
+}
+
+
+@media (max-width: 700px) {
+  .riwayat-page {
+    padding: 8px;
+
+    border-radius: 12px;
+  }
+
+  .riwayat-heading {
+    display: block;
+  }
+
+  .riwayat-heading h1 {
+    font-size: 22px;
+  }
+
+  .riwayat-heading p {
+    font-size: 12px;
+  }
+
+  .riwayat-primary-button {
+    margin-top: 12px;
+  }
+
+  .riwayat-tabs {
+    flex-direction: column;
+  }
+
+  .riwayat-stat-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .riwayat-card-header {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .riwayat-tools {
+    flex-direction: column;
+  }
+
+  .riwayat-tools input,
+  .riwayat-tools select {
+    width: 100%;
+  }
+
+  .riwayat-footer {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .riwayat-table {
+    min-width: 820px;
+  }
+
+
+  .riwayat-detail-anchor
+    > .riwayat-card {
+    padding-bottom: 18px;
+  }
+
+  .riwayat-detail-anchor
+    > .riwayat-card
+    > .riwayat-card-header {
+    margin-bottom: 15px;
+
+    padding: 16px;
+  }
+
+  .riwayat-detail-anchor
+    > .riwayat-card
+    > .riwayat-card-header
+    + div {
+    margin:
+      0
+      16px
+      14px !important;
+
+    padding:
+      13px
+      14px !important;
+  }
+
+  .riwayat-detail-anchor
+    > .riwayat-card
+    > .riwayat-card-header
+    + div
+    + div {
+    margin:
+      0
+      16px
+      18px !important;
+  }
+
+  .riwayat-detail-anchor
+    > .riwayat-card
+    > .riwayat-section-heading {
+    padding:
+      0
+      16px;
+  }
+
+  .riwayat-detail-anchor
+    > .riwayat-card
+    > .riwayat-section-heading[style] {
+    margin-top:
+      20px !important;
+
+    padding:
+      0
+      16px !important;
+  }
+
+  .riwayat-detail-anchor
+    > .riwayat-card
+    > .riwayat-table-wrapper {
+    margin:
+      0
+      16px
+      18px;
+  }
+
+  .riwayat-detail-anchor
+    > .riwayat-card
+    > .riwayat-table-wrapper
+    .riwayat-table {
+    min-width: 0;
+  }
+
+  .riwayat-detail-anchor
+    > .riwayat-card
+    > .riwayat-table-wrapper
+    .riwayat-table th,
+
+  .riwayat-detail-anchor
+    > .riwayat-card
+    > .riwayat-table-wrapper
+    .riwayat-table td {
+    padding: 10px 11px;
+
+    font-size: 10px;
+  }
+}
+
+
+@media (max-width: 480px) {
+  .riwayat-heading h1 {
+    font-size: 20px;
+  }
+
+  .riwayat-stat-card {
+    min-height: 95px;
+
+    padding: 14px;
+  }
+
+  .riwayat-stat-card strong {
+    font-size: 21px;
+  }
+
+  .riwayat-information {
+    grid-template-columns:
+      26px
+      1fr;
+
+    padding: 11px 12px;
+  }
+
+  .riwayat-information-icon {
+    width: 23px;
+    height: 23px;
+  }
+
+  .riwayat-detail-anchor
+    > .riwayat-card
+    > .riwayat-table-wrapper
+    .riwayat-table th:first-child,
+
+  .riwayat-detail-anchor
+    > .riwayat-card
+    > .riwayat-table-wrapper
+    .riwayat-table td:first-child {
+    width: 32%;
+  }
+}
+
+
+/* ============================================================
+   REDUCED MOTION
+   ============================================================ */
+
+@media (prefers-reduced-motion: reduce) {
+  .riwayat-stat-card,
+  .lihat-hasil-button,
+  .riwayat-primary-button {
+    transition: none;
+  }
+
+  .riwayat-stat-card:hover,
+  .lihat-hasil-button:hover,
+  .riwayat-primary-button:hover {
+    transform: none;
+  }
+}
\ No newline at end of file
diff --git a/web_slearn/src/styles/riwayat-model.css b/web_slearn/src/styles/riwayat-model.css
new file mode 100644
index 0000000..5a2c595
--- /dev/null
+++ b/web_slearn/src/styles/riwayat-model.css
@@ -0,0 +1,413 @@
+.models-page { max-width: 1200px; margin: 0 auto; padding: 24px; color: #172033; }
+.models-page h1 { font-size: 29px; margin: 8px 0; }
+.models-page h2 { font-size: 19px; margin: 0 0 14px; }
+.models-page p { line-height: 1.65; color: #566177; }
+.models-eyebrow { color: #295bcc; font-size: 12px; font-weight: 700; letter-spacing: 1.4px; }
+.models-card { padding: 24px; background: white; border: 1px solid #e3e8f0; border-radius: 14px; margin: 22px 0; }
+.models-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; background: #142641; color: white; border-radius: 14px; padding: 25px; margin-top: 25px; }
+.models-summary small { display: block; color: #c4d0e6; margin-bottom: 10px; }
+.models-summary strong { display: flex; align-items: center; gap: 12px; font-size: 25px; }
+.model-badge { font-size: 12px; border-radius: 20px; color: #116247; background: #d8f6e9; padding: 5px 10px; }
+.models-page button { cursor: pointer; border: 1px solid #cbd5e5; padding: 10px 14px; border-radius: 8px; background: white; color: #234576; font: inherit; font-size: 14px; }
+.models-page button.models-primary { background: #295bcc; border-color: #295bcc; color: white; }
+.models-page button:disabled { opacity: .55; cursor: not-allowed; }
+.models-page button:focus-visible, .models-page input:focus-visible, .models-page select:focus-visible { outline: 3px solid #8db2ff; outline-offset: 3px; }
+.models-page label { display: block; font-weight: 600; margin: 16px 0 9px; }
+.models-page input, .models-page select { display: block; width: 100%; max-width: 650px; padding: 13px; border: 1px solid #cbd5e5; border-radius: 8px; background: #f8faff; font: inherit; }
+.models-page label small { color: #6b7485; font-weight: 400; }
+.models-help { font-size: 13px; padding: 12px 15px; border-left: 3px solid #9bb6e9; background: #f5f8ff; }
+.models-preview { padding: 15px 15px 15px 35px; background: #f5f7fb; border-radius: 8px; max-height: 160px; overflow: auto; }
+.models-preview li { margin: 8px 0; overflow-wrap: anywhere; }
+.models-table { overflow-x: auto; }
+.models-page table { border-collapse: collapse; width: 100%; font-size: 14px; }
+.models-page th, .models-page td { padding: 14px 12px; border-bottom: 1px solid #e3e8f0; text-align: left; }
+.models-page th { background: #f5f7fb; }
+.models-page td small { display: block; margin-top: 6px; color: #6b7485; }
+.models-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
+.models-actions h2 { margin: 0 auto 0 0; }
+.models-job { background: #f5f7fb; padding: 16px; border-radius: 8px; margin-bottom: 14px; }
+.models-job p { margin-bottom: 0; }
+.models-page details li { margin-bottom: 10px; }
+.models-error, .models-notice { border-radius: 8px; padding: 14px 18px; margin: 16px 0; line-height: 1.5; }
+.models-error { background: #fff0ee; color: #99392c; }
+.models-notice { background: #eaf2ff; color: #234576; }
+.models-overlay { position: fixed; inset: 0; background: #14264188; display: grid; place-items: center; z-index: 100; padding: 20px; }
+.models-dialog { background: white; border-radius: 14px; padding: 28px; max-width: 460px; }
+@media (max-width: 800px) { .models-summary { grid-template-columns: repeat(2, 1fr); } .models-page { padding: 12px; } .models-card { padding: 17px; } }
+
+/* =====================================================
+   PERBAIKAN UI TRAINING & RIWAYAT MODEL
+   Fokus: data dilewati dan riwayat proses
+   ===================================================== */
+
+/* STATUS TRAINING TERAKHIR */
+
+.models-page .models-training-status {
+  padding: 28px;
+}
+
+.models-page .models-training-status > h2 {
+  margin: 0 0 20px;
+  color: #142641;
+  font-size: 21px;
+  font-weight: 700;
+}
+
+.models-page .models-training-status .models-job {
+  margin: 0;
+  padding: 22px;
+  border: 1px solid #e1e8f2;
+  border-radius: 12px;
+  background: #f8faff;
+}
+
+.models-job-heading {
+  display: flex;
+  align-items: center;
+  gap: 13px;
+  flex-wrap: wrap;
+  margin-bottom: 13px;
+}
+
+.models-job-file {
+  color: #142641;
+  font-size: 14px;
+  font-weight: 700;
+  overflow-wrap: anywhere;
+}
+
+.models-page .models-job-message {
+  margin: 0 0 16px;
+  color: #53637a;
+  font-size: 13px;
+  line-height: 1.7;
+}
+
+/* BADGE STATUS */
+
+.models-status {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: fit-content;
+  padding: 6px 12px;
+  border: 1px solid transparent;
+  border-radius: 999px;
+  font-size: 11px;
+  font-weight: 700;
+  line-height: 1.4;
+  white-space: nowrap;
+}
+
+.models-status-completed {
+  color: #187650;
+  background: #e9f7ef;
+  border-color: #c8e9d7;
+}
+
+.models-status-failed {
+  color: #bf4551;
+  background: #fff0f1;
+  border-color: #f5d2d6;
+}
+
+.models-status-skipped {
+  color: #64748b;
+  background: #eef2f7;
+  border-color: #dce3ec;
+}
+
+.models-status-running {
+  color: #295bcc;
+  background: #edf3ff;
+  border-color: #d4e1fa;
+}
+
+.models-status-queued {
+  color: #936312;
+  background: #fff7e5;
+  border-color: #f4e4bf;
+}
+
+/* RINGKASAN DATA AUDIT */
+
+.models-audit {
+  margin-top: 14px;
+}
+
+.models-page .models-audit > p {
+  margin: 8px 0;
+  color: #586981;
+  font-size: 12.5px;
+  line-height: 1.6;
+}
+
+.models-audit > p b {
+  color: #243b5d;
+}
+
+/* DATA YANG DILEWATI */
+
+.models-page .models-skipped-details {
+  margin-top: 20px;
+  padding: 18px 20px;
+  border: 1px solid #dfe7f3;
+  border-radius: 12px;
+  background: #fff;
+}
+
+.models-page .models-skipped-details > summary {
+  padding: 2px 0;
+  color: #253b5c;
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 1.5;
+  cursor: pointer;
+}
+
+.models-page .models-skipped-details > summary:hover {
+  color: #295bcc;
+}
+
+.models-page .models-skip-note {
+  margin: 17px 0 14px;
+  padding: 12px 15px;
+  border: 1px solid #e2eaf5;
+  border-radius: 9px;
+  background: #f7faff;
+  color: #65748b;
+  font-size: 12px;
+  line-height: 1.7;
+}
+
+/* Area tabel dengan scroll */
+
+.models-page .models-skipped-scroll {
+  max-height: 355px;
+  overflow: auto;
+  border: 1px solid #e1e7f0;
+  border-radius: 10px;
+  background: #fff;
+  scrollbar-width: thin;
+  scrollbar-color: #bdcbe0 #f4f7fb;
+}
+
+/* Tabel data dilewati */
+
+.models-page .models-skipped-table {
+  width: 100%;
+  min-width: 720px;
+  border-collapse: separate;
+  border-spacing: 0;
+  table-layout: fixed;
+  background: #fff;
+}
+
+.models-page .models-skipped-table th {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  padding: 15px 17px;
+  border-bottom: 1px solid #dce5f1;
+  background: #edf3fc;
+  color: #294263;
+  text-align: left;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.models-page .models-skipped-table th:first-child {
+  width: 110px;
+}
+
+.models-page .models-skipped-table th:nth-child(2) {
+  width: 48%;
+}
+
+.models-page .models-skipped-table td {
+  padding: 15px 17px;
+  border-bottom: 1px solid #e8edf4;
+  background: #fff;
+  color: #35455e;
+  font-size: 12.5px;
+  line-height: 1.65;
+  vertical-align: middle;
+}
+
+.models-page .models-skipped-table tr:nth-child(even) td {
+  background: #fbfcff;
+}
+
+.models-page .models-skipped-table tbody tr:hover td {
+  background: #f3f7ff;
+}
+
+.models-page .models-skipped-table tbody tr:last-child td {
+  border-bottom: 0;
+}
+
+.models-skipped-text {
+  overflow-wrap: anywhere;
+}
+
+/* Badge alasan dilewati */
+
+.models-skip-reason {
+  display: inline-block;
+  max-width: 100%;
+  padding: 8px 11px;
+  border: 1px solid #e0e6ef;
+  border-radius: 8px;
+  background: #f3f5f9;
+  color: #586780;
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 1.5;
+  overflow-wrap: anywhere;
+}
+
+/* RIWAYAT PROSES */
+
+.models-page .models-history-details {
+  margin-top: 24px;
+  padding: 19px 20px;
+  border: 1px solid #e0e7f1;
+  border-radius: 12px;
+  background: #fff;
+}
+
+.models-page .models-history-details > summary {
+  color: #142641;
+  font-size: 15px;
+  font-weight: 700;
+  cursor: pointer;
+  line-height: 1.5;
+}
+
+.models-history-details > summary span:first-child {
+  margin-right: 12px;
+}
+
+.models-history-count {
+  display: inline-flex;
+  padding: 4px 9px;
+  border-radius: 6px;
+  background: #edf3ff;
+  color: #295bcc;
+  font-size: 10px;
+  font-weight: 700;
+  vertical-align: middle;
+}
+
+.models-history-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  max-height: 510px;
+  margin-top: 20px;
+  padding: 3px 8px 3px 0;
+  overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: #bfcee2 #f4f7fb;
+}
+
+/* Card setiap riwayat */
+
+.models-history-item {
+  min-width: 0;
+  padding: 18px 20px;
+  border: 1px solid #e1e7f0;
+  border-radius: 11px;
+  background: #fcfdff;
+  transition: border-color 0.2s ease,
+              background 0.2s ease;
+}
+
+.models-history-item:hover {
+  border-color: #c4d6f2;
+  background: #f8fbff;
+}
+
+.models-history-item-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 12px;
+  margin-bottom: 9px;
+}
+
+.models-history-filename {
+  min-width: 0;
+  color: #213855;
+  font-size: 13px;
+  font-weight: 700;
+  overflow-wrap: anywhere;
+}
+
+.models-history-date {
+  display: block;
+  margin-bottom: 10px;
+  color: #8793a5;
+  font-size: 11px;
+}
+
+.models-page .models-history-message {
+  margin: 0;
+  color: #54647b;
+  font-size: 12.5px;
+  line-height: 1.65;
+  overflow-wrap: anywhere;
+}
+
+/* RESPONSIVE */
+
+@media (max-width: 800px) {
+  .models-page .models-training-status {
+    padding: 20px;
+  }
+
+  .models-page .models-training-status .models-job {
+    padding: 16px;
+  }
+
+  .models-page .models-skipped-details {
+    padding: 15px;
+  }
+
+  .models-page .models-history-details {
+    padding: 15px;
+  }
+
+  .models-history-item {
+    padding: 15px;
+  }
+}
+
+@media (max-width: 520px) {
+  .models-job-heading,
+  .models-history-item-head {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 9px;
+  }
+
+  .models-page .models-history-details > summary {
+    font-size: 13px;
+  }
+
+  .models-page .models-skipped-table {
+    min-width: 650px;
+  }
+
+  .models-history-list {
+    max-height: 450px;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .models-history-item {
+    transition: none;
+  }
+}
diff --git a/web_slearn/vite.config.js b/web_slearn/vite.config.js
new file mode 100644
index 0000000..9982072
--- /dev/null
+++ b/web_slearn/vite.config.js
@@ -0,0 +1,7 @@
+import react from '@vitejs/plugin-react'
+import { defineConfig } from 'vite'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})