Upload 23 files

.gitattributes

@@ -33,3 +33,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+static/user.png filter=lfs diff=lfs merge=lfs -text

app.py

@@ -0,0 +1,426 @@
+import joblib
+import pandas as pd
+from flask import Flask, request, jsonify, render_template
+from datetime import timedelta
+import os 
+
+from tensorflow.keras.models import load_model
+from tensorflow.keras.preprocessing.image import load_img, img_to_array
+import numpy as np
+
+# ==============================================================================
+# --- 1. KONFIGURASI JALUR & VARIABEL GLOBAL ---
+# ==============================================================================
+
+# --- A. Jalur Model Prediction Crop (Teman Anda) ---
+CROP_PRED_MODEL_PATH = 'random_forest_model.pkl'
+CROP_PRED_SCALER_PATH = 'scaler.pkl'
+
+# --- B. Jalur Model Clustering (Anda) ---
+MODEL_FILES_CLUSTERING = {
+    "bangkalan": "kmeans_model_bangkalan.joblib",
+    "sampang" : "kmeans_model_sampang.joblib",
+    "pamekasan": "kmeans_model_pamekasan.joblib",
+    "sumenep": "kmeans_model_sumenep.joblib",
+    # Tambahkan kabupaten lain di sini
+}
+SCALER_FILES = {
+    "bangkalan": "scaler_bangkalan.joblib",
+    "sampang": "scaler_sampang.joblib",
+    "pamekasan": "scaler_pamekasan.joblib",
+    "sumenep": "scaler_sumenep.joblib",
+    # Tambahkan kabupaten lain di sini
+}
+
+# --- C. Jalur Model VAR (Forecasting - Kritis) ---
+# Menggunakan variabel dari kode teman Anda, namun diubah agar path tidak hardcode Windows
+VAR_MODEL_PATH = "var_model_multivariate.joblib" 
+
+# --- D. Mapping Data CSV ---
+# Ganti dengan path CSV yang AKTUAL di server Anda
+CSV_MAP = {
+    "Bangkalan": "static/bangkalan.csv", 
+    "Sampang": "static/sampang.csv",
+    "Pamekasan": "static/pamekasan.csv",
+    "Sumenep": "static/sumenep.csv",
+}
+
+# --- E. Variabel Global untuk Model yang Dimuat (Termasuk Model Teman Anda) ---
+LOADED_MODELS_CLUSTERING = {}
+LOADED_SCALERS = {} 
+VAR_MODEL = None # Variabel global model VAR
+CROP_MODEL = None # Model Random Forest untuk crop prediction
+CROP_SCALER = None # Scaler Crop Prediction
+
+SUPPORTED_KABUPATEN_CLUSTERING = list(MODEL_FILES_CLUSTERING.keys())
+FEATURE_NAMES_CROP = ['N', 'P', 'K', 'temperature', 'humidity', 'ph', 'rainfall']
+
+# Model CUACA (Image Classification)
+WEATHER_MODEL = None
+WEATHER_CLASSES = [
+    "dew", "fogsmog", "frost", "glaze", "hail",
+    "lightning", "rain", "rainbow", "rime",
+    "sandstorm", "snow"
+]
+
+# ==============================================================================
+# --- 2. FUNGSI LOADING SEMUA ASET (Berjalan saat Startup) ---
+# ==============================================================================
+
+def load_all_assets():
+    """Memuat semua model (Clustering, Forecasting, Crop Prediction) ke memori."""
+    global LOADED_MODELS_CLUSTERING, LOADED_SCALERS, VAR_MODEL, CROP_MODEL, CROP_SCALER
+    print("--- MEMUAT SEMUA ASET ---")
+
+    # A. Muat Model Crop Prediction (Teman Anda)
+    try:
+        CROP_MODEL = joblib.load(CROP_PRED_MODEL_PATH)
+        CROP_SCALER = joblib.load(CROP_PRED_SCALER_PATH)
+        print(f"Model CROP ({CROP_PRED_MODEL_PATH}) dan Scaler berhasil dimuat.")
+    except Exception as e:
+        print(f"GAGAL memuat model CROP: {e}")
+        
+    # B. Muat Model Clustering (Anda)
+    for kab, filename in MODEL_FILES_CLUSTERING.items():
+        try:
+            model_loaded = joblib.load(filename)
+            LOADED_MODELS_CLUSTERING[kab] = model_loaded
+            print(f"Model CLUSTERING {kab.title()} ({filename}) berhasil dimuat.")
+        except Exception as e:
+            print(f"GAGAL memuat model CLUSTERING {kab.title()} ({filename}): {e}")
+            LOADED_MODELS_CLUSTERING[kab] = None 
+
+    # C. Muat Scaler Clustering (Anda)
+    for kab, filename in SCALER_FILES.items():
+        try:
+            scaler_loaded = joblib.load(filename)
+            LOADED_SCALERS[kab] = scaler_loaded
+            print(f"Scaler CLUSTERING {kab.title()} ({filename}) berhasil dimuat.")
+        except Exception as e:
+            print(f"GAGAL memuat scaler CLUSTERING {kab.title()} ({filename}): {e}")
+            LOADED_SCALERS[kab] = None 
+
+    # D. Muat Model VAR/Forecasting
+    try:
+        VAR_MODEL = joblib.load(VAR_MODEL_PATH)
+        print(f"Model VAR ({VAR_MODEL_PATH}) berhasil dimuat.")
+    except Exception as e:
+        print(f"GAGAL memuat model VAR: {e}. PASTIKAN PATH BENAR.")
+        VAR_MODEL = None
+
+    # E. Muat Model Cuaca (Image Classification)
+    global WEATHER_MODEL
+    try:
+        WEATHER_MODEL = load_model("model_cuaca.h5")
+        print("Model CUACA berhasil dimuat.")
+    except Exception as e:
+        WEATHER_MODEL = None
+        print(f"GAGAL memuat model CUACA: {e}")
+
+
+            
+    print("--- SELESAI MEMUAT SEMUA ASET ---")
+
+# Panggil fungsi ini saat startup!
+load_all_assets() 
+
+# ==============================================================================
+# --- 3. INISIALISASI FLASK & ROUTE CROP PREDICTION (Teman Anda) ---
+# ==============================================================================
+
+app = Flask(__name__)
+
+@app.route('/')
+def home():
+    # Asumsi Anda memiliki template index.html
+    return render_template('index.html') 
+
+@app.route('/crop')
+def crop():
+    # Asumsi Anda memiliki template Crop.html
+    return render_template('Crop.html', feature_names=FEATURE_NAMES_CROP, form_values={})
+
+@app.route('/predict', methods=['POST'])
+def predict():
+    # Menggunakan CROP_MODEL dan CROP_SCALER global yang sudah dimuat
+    if CROP_MODEL is None or CROP_SCALER is None:
+        return "Error: Model atau Scaler Crop Prediction tidak dimuat. Cek file .pkl Anda.", 500
+            
+    try:
+        data = request.form.to_dict()
+        input_features = []
+        form_values = {}
+            
+        for name in FEATURE_NAMES_CROP:
+            value = float(data[name])
+            input_features.append(value)
+            form_values[name] = value 
+            
+        input_df = pd.DataFrame([input_features], columns=FEATURE_NAMES_CROP)
+        
+        # Scaling Data Input
+        features_scaled = CROP_SCALER.transform(input_df) 
+        features_scaled = pd.DataFrame(features_scaled, columns=input_df.columns)
+
+        prediction = CROP_MODEL.predict(features_scaled)
+
+        translate = {
+            'rice': 'padi',
+            'maize': 'jagung',
+            'jute': 'rami',
+            'cotton': 'kapas',
+            'coconut': 'kelapa',
+            'papaya': 'pepaya',
+            'orange': 'jeruk',
+            'apple': 'apel',
+            'muskmelon': 'blewah',
+            'watermelon': 'semangka',
+            'grapes': 'anggur',
+            'mango': 'mangga',
+            'banana': 'pisang',
+            'pomegranate': 'delima',
+            'lentil': 'lentil',
+            'blackgram': 'kacang tunggak',
+            'mungbean': 'kacang hijau',
+            'mothbeans': 'kacang ngengat',
+            'pigeonpeas': 'kacang gude',
+            'kidneybeans': 'kacang merah',
+            'chickpea': 'kacang arab',
+            'coffee': 'kopi'
+        }
+
+
+        output = translate[prediction[0]]
+
+            
+        # Asumsi Anda memiliki template Crop.html
+        return render_template('Crop.html', 
+                                prediction_text=f'{output}', 
+                                feature_names=FEATURE_NAMES_CROP,
+                                form_values=form_values) 
+        
+    except KeyError as e:
+        # Asumsi Anda memiliki template Crop.html
+        return render_template('Crop.html', 
+                                error_message=f'Error: Input untuk fitur {str(e)} hilang. Pastikan semua kolom terisi.',
+                                feature_names=FEATURE_NAMES_CROP,
+                                form_values=request.form.to_dict()), 400
+    except ValueError:
+        # Asumsi Anda memiliki template Crop.html
+        return render_template('Crop.html', 
+                                error_message='Error: Semua input harus berupa angka.',
+                                feature_names=FEATURE_NAMES_CROP,
+                                form_values=request.form.to_dict()), 400
+    except Exception as e:
+        # Asumsi Anda memiliki template Crop.html
+        return render_template('Crop.html', 
+                                error_message=f'Terjadi error tak terduga: {str(e)}',
+                                feature_names=FEATURE_NAMES_CROP,
+                                form_values=request.form.to_dict()), 500
+
+# ==============================================================================
+# --- 4. ROUTE FORECASTING PER KABUPATEN (Perbaikan Kode Teman Anda) ---
+# ==============================================================================
+
+
+@app.route('/forecast/<kabupaten>')
+def forecast(kabupaten):
+    try:
+        csv_map = {
+            "Bangkalan": r"static\bangkalan.csv",
+            "Sampang": r"static\sampang.csv",
+            "Pamekasan": r"static\pamekasan.csv",
+            "Sumenep": r"static\sumenep.csv"
+        }
+
+        model_path = r"static\var_model_multivariate.joblib"
+
+        if kabupaten not in csv_map:
+            return jsonify({"error": "Kabupaten tidak ditemukan"}), 404
+
+        # =====================
+        # BACA CSV
+        # =====================
+        df = pd.read_csv(csv_map[kabupaten])
+
+        # =====================
+        # SET INDEX WAKTU
+        # =====================
+        df['datetime'] = pd.to_datetime(df['datetime'])
+        df.set_index('datetime', inplace=True)
+
+        # =====================
+        # LOAD MODEL VAR
+        # =====================
+        var_model = joblib.load(model_path)
+
+        # =====================
+        # FEATURE ENGINEERING (SESUAI CSV ANDA)
+        # =====================
+        df['daily_temp'] = df['temp']                          # dari temp
+        df['daily_humidity_diff'] = df['humidity'].diff()     # dari humidity
+        df['daily_precipprob_diff'] = df['precipprob'].diff() # dari precipprob
+        df = df.dropna()
+
+        # =====================
+        # FILTER FITUR SESUAI MODEL VAR
+        # =====================
+        model_features = [
+            'daily_temp',
+            'daily_humidity_diff',
+            'daily_precipprob_diff'
+        ]
+
+        df = df[model_features]
+
+        # =====================
+        # AMBIL 3 HARI TERAKHIR
+        # =====================
+        last_3_days = df.tail(3)
+
+        # =====================
+        # FORECAST 5 HARI
+        # =====================
+        forecast_values = var_model.forecast(df.values, steps=5)
+
+        forecast_dates = [
+            df.index[-1] + pd.Timedelta(days=i)
+            for i in range(1, 6)
+        ]
+
+        forecast_df = pd.DataFrame(
+            forecast_values,
+            columns=df.columns,
+            index=forecast_dates
+        )
+
+        return jsonify({
+            "last_days": {
+                "dates": last_3_days.index.strftime('%Y-%m-%d').tolist(),
+                "values": last_3_days.values.tolist()
+            },
+            "forecast": {
+                "dates": forecast_df.index.strftime('%Y-%m-%d').tolist(),
+                "values": forecast_df.values.tolist()
+            },
+            "columns": df.columns.tolist()
+        })
+
+    except Exception as e:
+        return jsonify({"error": str(e)}), 500
+
+@app.route('/about')
+def about():
+    return render_template('about.html')
+# ==============================================================================
+# --- 5. ROUTE CLUSTERING PER KABUPATEN (Kode Anda) ---
+# ==============================================================================
+
+@app.route('/clustering/<kabupaten>')
+def get_clustering_data(kabupaten):
+    # Logika Clustering Anda (Sudah benar dan menggunakan scaling)
+    try:
+        # PENGAMBILAN INPUT USER
+        tgl = int(request.args.get("tgl", 1))
+        bln = int(request.args.get("bln", 1))
+        tahun = int(request.args.get("tahun", 2024))
+        
+        kabupaten_lower = kabupaten.lower()
+        kabupaten_title = kabupaten.title()
+
+        if kabupaten_title not in CSV_MAP:
+            return jsonify({"error": "Kabupaten tidak valid"}), 400
+
+        # AMBIL MODEL DAN SCALER DARI MEMORI
+        model_kmeans = LOADED_MODELS_CLUSTERING.get(kabupaten_lower)
+        scaler = LOADED_SCALERS.get(kabupaten_lower) 
+        
+        if model_kmeans is None:
+            return jsonify({"error": f"Model clustering untuk {kabupaten_title} tidak ditemukan/gagal dimuat."}), 500
+        
+        if scaler is None:
+             return jsonify({"error": f"Scaler untuk {kabupaten_title} tidak ditemukan/gagal dimuat. Tidak dapat melakukan scaling."}), 500
+
+
+        # BACA CSV
+        try:
+            df = pd.read_csv(CSV_MAP[kabupaten_title])
+        except FileNotFoundError:
+            return jsonify({"error": f"Gagal memuat CSV: File data untuk {kabupaten_title} tidak ditemukan."}), 500
+        
+        df["datetime"] = pd.to_datetime(df["datetime"])
+
+        # FILTER TANGGAL
+        selected = df[
+            (df["datetime"].dt.day == tgl) &
+            (df["datetime"].dt.month == bln) &
+            (df["datetime"].dt.year == tahun)
+        ]
+
+        if selected.empty:
+            return jsonify({"error": f"Data cuaca untuk {tgl}/{bln}/{tahun} di {kabupaten_title} tidak ditemukan"}), 404
+
+        # Daftar 5 Fitur untuk Scaling
+        fitur_yang_dipakai_model = [
+            "tempmax", 
+            "precipprob", 
+            "humidity", 
+            "solarradiation", 
+            "windspeed" 
+        ]
+        
+        # 1. Ambil data mentah (raw) dari CSV
+        fitur_utama_raw = selected[fitur_yang_dipakai_model].values
+        
+        # 2. LAKUKAN SCALING
+        fitur_utama_scaled = scaler.transform(fitur_utama_raw) 
+        
+        # 3. PREDIKSI
+        cluster = int(model_kmeans.predict(fitur_utama_scaled)[0])
+
+        return jsonify({
+            "kabupaten": kabupaten_title,
+            "input_features_raw": selected[fitur_yang_dipakai_model].iloc[0].to_dict(),
+            "feature_names": fitur_yang_dipakai_model,
+            "predicted_cluster": cluster
+        })
+
+    except KeyError as e:
+        return jsonify({"error": f"Gagal memprediksi cluster: Kolom fitur hilang atau salah nama: {str(e)}. Pastikan 5 kolom fitur sudah benar."}), 500
+    except ValueError as e:
+        return jsonify({"error": f"Gagal memprediksi cluster: Kesalahan nilai input atau format data: {str(e)}."}), 500
+    except Exception as e:
+        return jsonify({"error": f"Gagal memprediksi cluster: Terjadi error tak terduga: {str(e)}"}), 500
+
+@app.route("/cuaca", methods=["GET", "POST"])
+def prediksi_cuaca():
+    if WEATHER_MODEL is None:
+        return "Error: Model CUACA tidak dimuat. Pastikan file model_cuaca.h5 tersedia di folder proyek.", 500
+
+    if request.method == "POST":
+        file = request.files.get("image")
+        if not file:
+            return render_template("cuaca.html", hasil=None, error="Tidak ada file yang diunggah.")
+
+        save_path = os.path.join("static", file.filename)
+        file.save(save_path)
+
+        #  Preprocessing sesuai input model : (100x100)
+        img = load_img(save_path, target_size=(100, 100))
+        img = img_to_array(img) / 255.0
+        img = np.expand_dims(img, axis=0)
+
+        pred = WEATHER_MODEL.predict(img)
+        label_index = np.argmax(pred)
+        hasil = WEATHER_CLASSES[label_index]
+
+        return render_template("cuaca.html", hasil=hasil, img=save_path)
+
+    return render_template("cuaca.html", hasil=None)
+
+# ==============================================================================
+# --- BLOK RUNNING APLIKASI ---
+# ==============================================================================
+
+if __name__ == "__main__":
+    app.run(debug=True)

kmeans_model_bangkalan.joblib

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:6f6f3fbaca1ea2cba7ae78860acfa4ee51a9a2916c452ae2d9e832c3f5b45907
+size 4871

kmeans_model_pamekasan.joblib

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:2999aae30f3d041ee6209baac6769f53fb6415703645507d8784c3ad726a87f3
+size 4871

kmeans_model_sampang.joblib

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:9293be414bfe9b0a10210a05583fdfa4232d7b2832d7711dc68aded50b2a4639
+size 4871

kmeans_model_sumenep.joblib

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:063be71278070b43c3e4143dd1dee7a27d66582adebc80436a6a442dfa48e9e6
+size 4871

random_forest_model.pkl

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:375b222e3e16cfe89c59c0d5fb3354fee8c54fbf79fb38eca90c6b1de1ed906d
+size 1799545

requirements.txt

@@ -0,0 +1,4 @@
+Flask==3.1.2
+joblib==1.4.2
+pandas==2.3.3
+statsmodels

scaler.pkl

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:fa7e8e6089051d280910e9993f0e4dd2bd6a10cc84ec0181734e6e890909fef6
+size 1327

scaler_bangkalan.joblib

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:5894d90377289d1440eea0ad9a4a02d163eb2542e0d655bdf986b2c261f646b2
+size 1039

scaler_pamekasan.joblib

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:f3a8c990c28d414e24d383e811883895f2caa557c9c480782097c482f3f556ef
+size 1039

scaler_sampang.joblib

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:1d32ed43f9a548ea82d80b2fa378e01f5838b95eba503b4ee360139cfc003ba5
+size 1039

scaler_sumenep.joblib

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:8c9ec088afa0263f4d936ea26f9551340e9cfd07a51fa11ebecf0f67518fc81b
+size 1039

static/var_model_multivariate.joblib

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:e003b6c6eaccf788a9827ccad15d32305b8844b3cf34ce1346f3fc2133752fe2
+size 191187

templates/Crop.html

@@ -0,0 +1,229 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Rekomendasi Tanaman</title>
+    <style>
+      /* --- Tata Letak Utama (Grid/Pusat) --- */
+      body {
+        font-family: Arial, sans-serif;
+        margin: 0;
+        padding: 0;
+        min-height: 100vh;
+        background-color: #f4f4f4;
+        display: flex; /* Menggunakan flexbox untuk konten utama */
+        flex-direction: column;
+      }
+
+      /* --- Navbar (Dipertahankan) --- */
+      .navbar {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        background: #1a73e8;
+        padding: 10px 20px;
+        color: white;
+        font-size: 15px;
+        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
+      }
+
+      .navbar .brand {
+        font-size: 18px;
+        font-weight: bold;
+      }
+
+      .navbar .menu {
+        list-style: none;
+        display: flex;
+        gap: 20px;
+        margin: 0;
+        padding: 0;
+      }
+
+      .navbar .menu li a {
+        color: white;
+        text-decoration: none;
+        font-weight: 500;
+      }
+
+      .navbar .menu li a:hover {
+        text-decoration: underline;
+      }
+
+      /* --- Konten Utama (Pusat) --- */
+      .main-content-wrapper {
+        flex-grow: 1;
+        padding: 40px 20px;
+        background-color: #cdecfe;
+        display: flex;
+        justify-content: center;
+        align-items: flex-start;
+      }
+
+      /* Container untuk Form dan Hasil */
+      .form-container {
+        width: 100%;
+        max-width: 500px;
+        padding: 30px;
+        background-color: #ffffff;
+        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+        border-radius: 8px;
+      }
+
+      /* --- TATA LETAK 2 KOLOM BARU (DI DALAM FORM) --- */
+
+      /* Wrapper untuk 2 kolom. Secara default, tetap satu kolom (Flex-direction: column) */
+      .form-fields-grid {
+        display: flex;
+        flex-wrap: wrap; /* Memungkinkan item untuk pindah ke baris baru */
+        gap: 20px; /* Jarak antara kolom dan baris */
+      }
+
+      .form-fields-grid > div {
+        width: 100%; /* Default: Ambil seluruh lebar (1 kolom) */
+        margin-bottom: 0; /* Hapus margin-bottom dari div lama karena kita gunakan gap */
+      }
+
+      /* Media Query untuk Layar Lebar (Tablet ke atas, misalnya > 768px) */
+      @media (min-width: 768px) {
+        /* Set max-width form-container lebih besar untuk menampung 2 kolom */
+        .form-container {
+          max-width: 800px;
+        }
+
+        /* Atur lebar setiap input menjadi hampir 50% untuk 2 kolom */
+        .form-fields-grid > div {
+          /* calc(50% - (gap / 2)) untuk memastikan 2 kolom muat dengan gap di tengah */
+          width: calc(50% - 10px);
+        }
+      }
+      form div {
+        margin-bottom: 15px;
+      }
+      label {
+        display: block;
+        font-weight: bold;
+        margin-bottom: 5px;
+        font-size: 1em;
+        color: #555;
+      }
+      input[type="text"] {
+        width: 100%;
+        padding: 10px; /* Padding diperbesar */
+        box-sizing: border-box;
+        border: 1px solid #ccc;
+        border-radius: 4px;
+        font-size: 1em;
+      }
+      input[type="submit"] {
+        background-color: #1a73e8;
+        color: white;
+        padding: 12px 15px; /* Padding diperbesar */
+        border: none;
+        cursor: pointer;
+        width: 100%;
+        margin-top: 20px; /* Margin diperbesar */
+        border-radius: 4px;
+        font-size: 1.1em;
+        transition: background-color 0.3s;
+      }
+      input[type="submit"]:hover {
+        background-color: #0b4694;
+      }
+      hr {
+        border: 0;
+        height: 1px;
+        background: #e0e0e0;
+        margin: 25px 0;
+      }
+    </style>
+  </head>
+  <body>
+    <header>
+      <nav class="navbar">
+        <div class="brand">Madura weather</div>
+        <ul class="menu">
+          <li><a href="/">Homepage</a></li>
+          <li><a href="/crop">Crop Recomendation</a></li>
+          <li><a href="/cuaca">Image Prediction</a></li>
+          <li><a href="/about">About</a></li>
+        </ul>
+      </nav>
+    </header>
+    <div class="main-content-wrapper">
+      <div class="form-container">
+        <h1>Crop Recomendation</h1>
+        <p style="text-align: center; color: #666; margin-bottom: 25px">
+          Enter the parameters below to get recommended plant types..
+        </p>
+
+        {% if error_message %}
+        <p class="error">{{ error_message }}</p>
+        {% endif %}
+
+        <form action="{{ url_for('predict') }}" method="post">
+          <div class="form-fields-grid">
+            {% for name in feature_names %}
+            <div>
+              <label for="{{ name }}"
+                >{{ name.upper() if name | length < 3 else name.capitalize()
+                }}:</label>
+              <input
+                type="text"
+                id="{{ name }}"
+                name="{{ name }}"
+                required
+                value="{{ form_values.get(name, '') }}"
+              />
+            </div>
+            {% endfor %}
+          </div>
+          <input type="submit" value="Dapatkan Prediksi" />
+        </form>
+
+        <hr />
+        {% if prediction_text %}
+        <h2 class="prediction">Hasil Prediksi: {{ prediction_text }}</h2>
+        {% endif %}
+      </div>
+    </div>
+    <!-- <div class="main-content-wrapper">
+      <div class="form-container">
+        <h1>Rekomendasi Jenis Tanaman</h1>
+        <p style="text-align: center; color: #666; margin-bottom: 25px">
+          Masukkan parameter di bawah ini untuk mendapatkan rekomendasi jenis
+          tanaman.
+        </p>
+
+        {% if error_message %}
+        <p class="error">{{ error_message }}</p>
+        {% endif %}
+
+        <form action="{{ url_for('predict') }}" method="post">
+          {% for name in feature_names %}
+          <div>
+            <label for="{{ name }}"
+              >{{ name.upper() if name | length < 3 else name.capitalize()
+              }}:</label
+            >
+            <input
+              type="text"
+              id="{{ name }}"
+              name="{{ name }}"
+              required
+              value="{{ form_values.get(name, '') }}"
+            />
+          </div>
+          {% endfor %}
+
+          <input type="submit" value="Dapatkan Prediksi" />
+        </form>
+
+        <hr />
+
+        {% if prediction_text %}
+        <h2 class="prediction">Hasil Prediksi: {{ prediction_text }}</h2>
+        {% endif %}
+      </div>
+    </div> -->
+  </body>
+</html>

templates/about.html

@@ -0,0 +1,230 @@
+<!DOCTYPE html>
+<html lang="id">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Tentang Kami - Tim Kami</title>
+    <style>
+      /* --- Gaya Umum (Dari template sebelumnya) --- */
+      body {
+        font-family: Arial, sans-serif;
+        margin: 0;
+        padding: 0;
+        min-height: 100vh;
+        background-color: #f4f4f4;
+        display: flex;
+        flex-direction: column;
+      }
+
+      /* --- Navbar (Dipertahankan) --- */
+      .navbar {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        background: #1a73e8;
+        padding: 10px 20px;
+        color: white;
+        font-size: 15px;
+        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
+      }
+
+      .navbar .brand {
+        font-size: 18px;
+        font-weight: bold;
+      }
+
+      .navbar .menu {
+        list-style: none;
+        display: flex;
+        gap: 20px;
+        margin: 0;
+        padding: 0;
+      }
+
+      .navbar .menu li a {
+        color: white;
+        text-decoration: none;
+        font-weight: 500;
+      }
+
+      .navbar .menu li a:hover {
+        text-decoration: underline;
+      }
+
+      /* --- Konten Utama Halaman (Tentang Kami) --- */
+      .main-content-wrapper {
+        flex-grow: 1;
+        padding: 40px 20px;
+        background-color: #cdecfe;
+        display: flex;
+        justify-content: center;
+        align-items: flex-start;
+      }
+
+      .about-container {
+        width: 100%;
+        max-width: 1200px; /* Lebar lebih besar untuk 4 kartu */
+        padding: 30px;
+        background-color: #ffffff;
+        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+        border-radius: 8px;
+      }
+
+      .about-container h1 {
+        color: #1a73e8;
+        border-bottom: 2px solid #e0e0e0;
+        padding-bottom: 15px;
+        margin-top: 0;
+        font-size: 2em;
+        text-align: center;
+        margin-bottom: 30px;
+      }
+
+      /* --- Gaya Kartu Tim (CSS Grid) --- */
+      .team-grid {
+        display: grid;
+        /* Default untuk mobile: 1 kolom */
+        grid-template-columns: 1fr;
+        gap: 30px; /* Jarak antara kartu */
+        padding: 10px;
+      }
+
+      .member-card {
+        background-color: #f8f8f8;
+        border-radius: 8px;
+        padding: 20px;
+        text-align: center;
+        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+        transition: transform 0.3s, box-shadow 0.3s;
+      }
+
+      .member-card:hover {
+        transform: translateY(-5px);
+        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
+      }
+
+      .member-photo {
+        width: 120px;
+        height: 120px;
+        border-radius: 50%; /* Membuat gambar lingkaran */
+        object-fit: cover; /* Memastikan gambar terpotong rapi */
+        margin: 0 auto 15px auto;
+        border: 4px solid #1a73e8;
+      }
+
+      .member-card h3 {
+        margin: 5px 0 5px 0;
+        color: #1c4587;
+        font-size: 1.4em;
+      }
+
+      .member-card p.role {
+        color: #555;
+        font-style: italic;
+        margin-bottom: 15px;
+        font-size: 1em;
+      }
+
+      .member-card p.bio {
+        color: #777;
+        font-size: 0.9em;
+        text-align: left;
+      }
+
+      /* --- Media Queries untuk Responsif --- */
+
+      /* Untuk layar tablet (>= 600px) */
+      @media (min-width: 600px) {
+        .team-grid {
+          /* 2 kolom pada tablet */
+          grid-template-columns: 1fr 1fr;
+        }
+      }
+
+      /* Untuk layar desktop (>= 1024px) */
+      @media (min-width: 1024px) {
+        .team-grid {
+          /* 4 kolom pada desktop */
+          grid-template-columns: repeat(4, 1fr);
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <header>
+      <nav class="navbar">
+        <div class="brand">Madura weather</div>
+        <ul class="menu">
+          <li><a href="/">Homepage</a></li>
+          <li><a href="/crop">Recomendation Plant</a></li>
+          <li><a href="/cuaca">Image Prediction</a></li>
+          <li><a href="/about">About</a></li>
+        </ul>
+      </nav>
+    </header>
+
+    <div class="main-content-wrapper">
+      <div class="about-container">
+        <h1>Our Team</h1>
+
+        <div class="team-grid">
+          <div class="member-card">
+            <img
+              src="{{ url_for('static', filename='user.png') }}"
+              alt="Foto Anggota 1"
+              class="member-photo"
+            />
+            <h3>Mochammad Febrianu Hakim Alamsyah</h3>
+            <!-- <p class="role">Lead Developer & Machine Learning</p>
+            <p class="bio">
+              Bertanggung jawab atas model Random Forest dan implementasi
+              backend Flask.
+            </p> -->
+          </div>
+
+          <div class="member-card">
+            <img
+              src="{{ url_for('static', filename='user.png') }}"
+              alt="Foto Anggota 2"
+              class="member-photo"
+            />
+            <h3>Muhammad Alivian Sidiq</h3>
+            <!-- <p class="role">Frontend Designer & UI/UX</p>
+            <p class="bio">
+              Memastikan antarmuka pengguna responsif, intuitif, dan mudah
+              digunakan oleh petani.
+            </p> -->
+          </div>
+
+          <div class="member-card">
+            <img
+              src="{{ url_for('static', filename='user.png') }}"
+              alt="Foto Anggota 3"
+              class="member-photo"
+            />
+            <h3>Nadhif Fajrul Minan</h3>
+            <!-- <p class="role">Data Scientist & Analis Pertanian</p>
+            <p class="bio">
+              Mengumpulkan, membersihkan data pertanian, dan memvalidasi akurasi
+              model prediksi.
+            </p> -->
+          </div>
+
+          <div class="member-card">
+            <img
+              src="{{ url_for('static', filename='user.png') }}"
+              alt="Foto Anggota 4"
+              class="member-photo"
+            />
+            <h3>Achmad Habibul Wildan Syaifulloh</h3>
+            <!-- <p class="role">Project Manager & Dokumentasi</p>
+            <p class="bio">
+              Mengkoordinasikan proyek, mengelola jadwal, dan menyiapkan
+              dokumentasi teknis.
+            </p> -->
+          </div>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>

templates/cuaca.html

@@ -0,0 +1,132 @@
+<!DOCTYPE html>
+<html lang="id">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Prediksi Cuaca</title>
+    <!-- Memuat Tailwind CSS dari CDN -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
+    <style>
+        /* Menggunakan font Inter secara default */
+        body {
+            font-family: 'Inter', sans-serif;
+            min-height: 100vh;
+            /* Memastikan bg.png dimuat melalui url_for */
+            background-image: url('{{ url_for("static", filename="bg.png") }}'); 
+            background-size: cover;
+            background-position: center;
+            background-attachment: fixed;
+        }
+        /* Style untuk Overlay Transparan agar teks lebih mudah dibaca */
+        .overlay {
+            background-color: rgba(0, 0, 0, 0.6);
+            min-height: 100vh;
+        }
+    </style>
+</head>
+<body>
+    <!-- Overlay untuk Konten -->
+    <div class="overlay flex items-center justify-center p-4 sm:p-8">
+        
+        <div class="w-full max-w-xl bg-white/90 backdrop-blur-sm rounded-xl shadow-2xl p-6 sm:p-10 transition-all duration-300">
+            
+            <!-- Header dan Judul -->
+            <header class="text-center mb-8">
+                <div class="text-4xl text-blue-700 mb-2">
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-10 h-10 inline-block align-middle">
+                      <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15A.75.75 0 0 0 3 15.75h18a.75.75 0 0 0 .75-.75V9a.75.75 0 0 0-.75-.75H3a.75.75 0 0 0-.75.75v6ZM3 9v-3h18v3M15 19.5h1.5M10.5 19.5h1.5M7.5 19.5h1.5" />
+                    </svg>
+                </div>
+                <h1 class="text-3xl sm:text-4xl font-extrabold text-gray-800">Klasifikasi Gambar Cuaca</h1>
+                <p class="text-gray-600 mt-2">Upload citra cuaca untuk mendapatkan prediksi dari model Anda.</p>
+            </header>
+
+            <!-- Form Upload (Disesuaikan dengan action="/cuaca") -->
+            <form action="/cuaca" method="POST" enctype="multipart/form-data" class="space-y-6">
+                
+                <div class="relative border-2 border-dashed border-blue-400 rounded-lg p-6 hover:border-blue-600 transition duration-200 cursor-pointer">
+                    <!-- Label untuk tampilan file input -->
+                    <label for="file_input" class="block text-center text-gray-500 hover:text-blue-600 transition duration-200">
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-8 h-8 mx-auto mb-2">
+                          <path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5m-13.5-9L12 3m0 0 4.5 4.5M12 3v13.5" />
+                        </svg>
+                        <span class="font-medium">Klik untuk memilih file atau seret & lepas di sini</span>
+                        <p class="text-sm text-gray-400">PNG, JPG, JPEG</p>
+                    </label>
+                    
+                    <!-- Input file tersembunyi (Disesuaikan dengan name="image") -->
+                    <input type="file" name="image" id="file_input" required class="absolute inset-0 w-full h-full opacity-0 cursor-pointer">
+                </div>
+
+                <button type="submit" class="w-full bg-blue-600 text-white py-3 rounded-lg font-semibold shadow-md hover:bg-blue-700 transition duration-200 transform hover:scale-[1.01] focus:outline-none focus:ring-4 focus:ring-blue-300">
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5 inline-block mr-2 align-text-bottom">
+                      <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
+                    </svg>
+                    Prediksi
+                </button>
+            </form>
+
+            <!-- Bagian Hasil Prediksi (Disesuaikan dengan variabel 'hasil' dan 'img') -->
+            {% if hasil %}
+            <div class="mt-8 pt-6 border-t border-gray-200">
+                <h3 class="text-xl font-bold text-gray-800 mb-4 text-center">Hasil Klasifikasi</h3>
+                
+                <div class="grid grid-cols-1 sm:grid-cols-2 gap-6 items-start">
+                    
+                    <!-- Tampilan Gambar -->
+                    <div class="flex flex-col items-center">
+                        <p class="text-sm font-medium text-gray-600 mb-2">Gambar yang Diupload:</p>
+                        <div class="relative w-full aspect-square overflow-hidden rounded-lg shadow-xl">
+                            <img src="{{ img }}" alt="Gambar yang Diupload" class="w-full h-full object-cover transition-all duration-300 transform hover:scale-105">
+                            <div class="absolute inset-0 bg-black/10"></div>
+                        </div>
+                    </div>
+                    
+                    <!-- Detail Prediksi -->
+                    <div class="flex flex-col justify-center h-full">
+                        <div class="bg-blue-100 p-6 rounded-lg shadow-md">
+                            <p class="text-sm font-medium text-blue-600 mb-1">HASIL PREDIKSI:</p>
+                            <!-- Menampilkan variabel 'hasil' dari Flask -->
+                            <p class="text-3xl font-extrabold text-blue-800 break-words">{{ hasil }}</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            {% endif %}
+
+            <!-- Blok Flash Messages (Dikomnetari karena tidak ada di kode asli, untuk menghindari error jika belum diimplementasikan di app.py) -->
+            {# 
+            {% with messages = get_flashed_messages(with_categories=true) %}
+                {% if messages %}
+                    <div class="mt-6 space-y-3">
+                        {% for category, message in messages %}
+                            <div class="p-3 rounded-lg text-sm {% if category == 'error' %}bg-red-100 text-red-700{% else %}bg-green-100 text-green-700{% endif %}">
+                                {{ message }}
+                            </div>
+                        {% endfor %}
+                    </div>
+                {% endif %}
+            {% endwith %}
+            #}
+        </div>
+    </div>
+    
+    <script>
+        // Logika sederhana untuk menampilkan nama file yang dipilih
+        document.getElementById('file_input').addEventListener('change', function() {
+            const fileName = this.files[0] ? this.files[0].name : 'Klik untuk memilih file...';
+            const label = document.querySelector('label[for="file_input"]');
+            if (label) {
+                 // Update elemen span
+                 label.querySelector('span').textContent = fileName;
+                 // Update elemen p
+                 const pElement = label.querySelector('p');
+                 if (pElement) {
+                    pElement.textContent = 'File terpilih, siap diupload.';
+                 }
+            }
+        });
+    </script>
+</body>
+</html>

templates/index.html

@@ -0,0 +1,684 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Madura weather</title>
+    <meta charset="utf-8" />
+    <link
+      rel="stylesheet"
+      href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
+    />
+
+    <style>
+      body {
+        font-family: Arial, sans-serif;
+        margin: 0;
+        padding: 0;
+        min-height: 100vh;
+        background-color: #f4f4f4;
+        display: flex; /* Menggunakan flexbox untuk konten utama */
+        flex-direction: column;
+      }
+      html,
+      body,
+      #map {
+        height: 100%;
+        margin: 0;
+        padding: 0;
+      }
+
+      /* ================= LEGEND ================= */
+      /* Mengubah posisi z-index untuk mencegah tumpang tindih */
+      .legend {
+        position: absolute;
+        bottom: 30px;
+        left: 20px;
+        background: white;
+        padding: 10px;
+        line-height: 1.5;
+        border-radius: 6px;
+        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+        font-size: 13px;
+        z-index: 9999;
+      }
+      .legend h4 {
+        margin: 0 0 5px 0;
+        font-size: 14px;
+        font-weight: bold;
+      }
+      .legend .item {
+        display: flex;
+        align-items: flex-start;
+        gap: 6px;
+        margin-bottom: 5px;
+      }
+      .legend .swatch {
+        width: 18px;
+        height: 12px;
+        border: 1px solid #444;
+        flex-shrink: 0;
+        margin-top: 3px;
+      }
+      .legend .text-content {
+        display: flex;
+        flex-direction: column;
+        text-align: left;
+      }
+
+      /* ================= NAVBAR ================= */
+      .navbar {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        background: #1a73e8;
+        padding: 10px 20px;
+        color: white;
+        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
+        position: relative;
+        z-index: 10000;
+      }
+      .navbar .brand {
+        font-size: 18px;
+        font-weight: bold;
+      }
+      .navbar .menu {
+        list-style: none;
+        display: flex;
+        gap: 20px;
+        margin: 0;
+        padding: 0;
+      }
+      .navbar .menu li a {
+        color: white;
+        text-decoration: none;
+      }
+
+      /* ================= CLUSTER CONTROL ================= */
+      .clustering-controls {
+        position: absolute;
+        top: 80px;
+        left: 20px;
+        width: 300px;
+        background: white;
+        border-radius: 10px;
+        padding: 15px;
+        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
+        z-index: 9999;
+      }
+      .clustering-controls h3 {
+        color: #1a73e8;
+        margin-top: 0;
+        border-bottom: 1px solid #eee;
+        padding-bottom: 8px;
+      }
+      .clustering-controls select,
+      .clustering-controls input[type="number"] {
+        width: 100%;
+        padding: 8px;
+        margin-bottom: 10px;
+        border: 1px solid #ccc;
+      }
+      .clustering-controls button {
+        width: 100%;
+        padding: 10px;
+        background: #4caf50;
+        border: none;
+        border-radius: 5px;
+        color: white;
+        font-weight: bold;
+        cursor: pointer;
+      }
+      .clustering-controls button:hover {
+        background: #45a049;
+      }
+
+      #notificationBox {
+        margin-top: 15px;
+        padding: 10px;
+        border-radius: 4px;
+        font-size: 12px;
+      }
+
+      /* ================= TABEL INTERPRETASI ================= */
+      #interpretasiKlaster {
+        width: 100%;
+        margin-top: 15px;
+        border-collapse: collapse;
+        font-size: 11px;
+        display: none;
+      }
+      #interpretasiKlaster th,
+      #interpretasiKlaster td {
+        border: 1px solid #ddd;
+        padding: 6px;
+        text-align: center;
+      }
+      #interpretasiKlaster th {
+        background: #f2f2f2;
+      }
+
+      /* ================= CHART BOX ================= */
+      #chartBox {
+        position: absolute;
+        top: 80px;
+        right: 20px;
+        width: 450px;
+        background: white;
+        border-radius: 10px;
+        padding: 15px;
+        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
+        z-index: 9999;
+        display: none;
+      }
+    </style>
+
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
+  </head>
+
+  <body>
+    <header>
+      <nav class="navbar">
+        <div class="brand">Madura Weather</div>
+        <ul class="menu">
+          <li><a href="/">Homepage</a></li>
+          <li><a href="/crop">Recomendation Plant</a></li>
+          <li><a href="/cuaca">Image Prediction</a></li>
+          <li><a href="/about">About</a></li>
+        </ul>
+      </nav>
+    </header>
+
+    <div id="map">
+      <button
+        onclick="toggleControls(true)"
+        style="
+          position: absolute;
+          top: 80px;
+          left: 20px;
+          z-index: 10001;
+          padding: 5px 10px;
+          background: #1a73e8;
+          color: white;
+          border: none;
+          border-radius: 5px;
+          cursor: pointer;
+        "
+        id="showControlsBtn"
+      >
+        ▶ Control
+      </button>
+
+      <div
+        class="clustering-controls"
+        id="clusteringControlsPanel"
+        style="display: none"
+      >
+        <div
+          style="
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+          "
+        >
+          <h3>Clustering Simulation (K-Means)</h3>
+          <button
+            onclick="toggleControls(false)"
+            style="
+              border: none;
+              background: none;
+              font-size: 20px;
+              cursor: pointer;
+              color: #1a73e8;
+            "
+          >
+            ✖
+          </button>
+        </div>
+
+        <div id="controlsContent">
+          <div class="date-inputs" style="display: flex; gap: 10px">
+            <input
+              type="number"
+              id="tglInput"
+              value="1"
+              min="1"
+              max="31"
+              placeholder="Tanggal"
+            />
+            <input
+              type="number"
+              id="blnInput"
+              value="1"
+              min="1"
+              max="12"
+              placeholder="Bulan"
+            />
+            <input
+              type="number"
+              id="tahunInput"
+              value="2024"
+              min="2020"
+              max="2030"
+              placeholder="Tahun"
+            />
+          </div>
+
+          <button onclick="runClustering()">
+            Run Clustering in 4 Districts
+          </button>
+
+          <div id="notificationBox"></div>
+          <table id="interpretasiKlaster"></table>
+        </div>
+      </div>
+
+      <div id="chartBox">
+        <div style="display: flex; justify-content: space-between">
+          <h4 id="chartTitle"></h4>
+          <button
+            onclick="tutupChart()"
+            style="
+              border: none;
+              background: none;
+              font-size: 20px;
+              cursor: pointer;
+            "
+          >
+            ✖
+          </button>
+        </div>
+        <canvas id="forecastChart"></canvas>
+      </div>
+
+      <button
+        onclick="toggleLegend(true)"
+        style="
+          position: absolute;
+          bottom: 30px;
+          left: 20px;
+          z-index: 10001;
+          padding: 5px 10px;
+          background: #1a73e8;
+          color: white;
+          border: none;
+          border-radius: 5px;
+          cursor: pointer;
+        "
+        id="showLegendBtn"
+      >
+        ▶ Open Clustering
+      </button>
+
+      <div class="legend" id="clusterLegendPanel" style="display: none">
+        <div
+          style="
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+          "
+        >
+          <h4 id="legendTitle">Districts</h4>
+          <button
+            onclick="toggleLegend(false)"
+            style="
+              border: none;
+              background: none;
+              font-size: 20px;
+              cursor: pointer;
+              color: #333;
+            "
+          >
+            ✖
+          </button>
+        </div>
+
+        <div id="legendContent"></div>
+      </div>
+    </div>
+
+    <script>
+      /* ====================== TOGGLE FUNCTIONS (SIDEBAR STYLE) ====================== */
+
+      /**
+       * Mengubah tampilan panel Clustering Controls (Sidebar)
+       * @param {boolean} show - true untuk menampilkan panel, false untuk menyembunyikan.
+       */
+      function toggleControls(show) {
+        const panel = document.getElementById("clusteringControlsPanel");
+        const showBtn = document.getElementById("showControlsBtn");
+
+        if (show) {
+          panel.style.display = "block";
+          showBtn.style.display = "none";
+        } else {
+          panel.style.display = "none";
+          showBtn.style.display = "block";
+        }
+      }
+
+      /**
+       * Mengubah tampilan panel Legend (Sidebar Bawah)
+       * @param {boolean} show - true untuk menampilkan panel, false untuk menyembunyikan.
+       */
+      function toggleLegend(show) {
+        const panel = document.getElementById("clusterLegendPanel");
+        const showBtn = document.getElementById("showLegendBtn");
+
+        if (show) {
+          panel.style.display = "block";
+          showBtn.style.display = "none";
+        } else {
+          panel.style.display = "none";
+          // Hanya tampilkan tombol buka legend jika map sudah dimuat
+          if (geoJsonLayer) showBtn.style.display = "block";
+        }
+      }
+
+      /* ====================== CHART ====================== */
+      let chartInstance = null;
+
+      function tutupChart() {
+        document.getElementById("chartBox").style.display = "none";
+        if (chartInstance) chartInstance.destroy();
+      }
+
+      function tampilkanGrafik(kabupaten, data) {
+        document.getElementById("chartBox").style.display = "block";
+        document.getElementById(
+          "chartTitle"
+        ).innerText = `Weather Forecasting ${kabupaten}`;
+
+        const labels = [...data.last_days.dates, ...data.forecast.dates];
+        const lastData = data.last_days.values.map((v) => v[0]);
+        const forecastData = data.forecast.values.map((v) => v[0]);
+
+        const ctx = document.getElementById("forecastChart");
+
+        if (chartInstance) chartInstance.destroy();
+
+        chartInstance = new Chart(ctx, {
+          type: "line",
+          data: {
+            labels: labels,
+            datasets: [
+              {
+                label: "Last 3 Days",
+                data: lastData,
+                borderColor: "#42a5f5",
+                backgroundColor: "rgba(66, 165, 245, 0.5)",
+              },
+              {
+                label: "5 Day Forecast",
+                data: Array(lastData.length).fill(null).concat(forecastData),
+                borderColor: "#ef5350",
+                borderDash: [6, 4],
+                backgroundColor: "transparent",
+              },
+            ],
+          },
+          options: {
+            responsive: true,
+            plugins: {
+              legend: { position: "top" },
+              title: { display: true, text: "Average Temperature(°C)" },
+            },
+            scales: {
+              y: { beginAtZero: false },
+            },
+          },
+        });
+      }
+
+      /* ====================== MAP ====================== */
+      const clusterColors = { 0: "#5e35b1", 1: "#00897b", 2: "#fdd835" };
+      const defaultWarnaKab = {
+        Bangkalan: "#e41a1c",
+        Sampang: "#377eb8",
+        Pamekasan: "#4daf4a",
+        Sumenep: "#984ea3",
+      };
+      const kabupatenList = ["Bangkalan", "Sampang", "Pamekasan", "Sumenep"];
+
+      var map = L.map("map").setView([-7.0, 113.9], 10);
+      var geoJsonLayer = null;
+      var clusterResults = {};
+
+      L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png").addTo(
+        map
+      );
+
+      function styleFeature(feature) {
+        const nama = feature.properties.nm_dati2;
+        const clusterId = clusterResults[nama];
+
+        if (clusterId !== undefined && clusterId !== null) {
+          return {
+            color: "#333",
+            fillColor: clusterColors[clusterId] || "#ccc",
+            fillOpacity: 0.8,
+            weight: 2,
+          };
+        }
+
+        return {
+          color: "#444",
+          fillColor: defaultWarnaKab[nama] || "#ccc",
+          fillOpacity: 0.6,
+          weight: 1,
+        };
+      }
+
+      function updateLegend(mode) {
+        const legendContent = document.getElementById("legendContent");
+        const legendTitle = document.getElementById("legendTitle");
+        legendContent.innerHTML = "";
+
+        // Pastikan legend terbuka setelah clustering berhasil
+        toggleLegend(true);
+
+        if (mode === "kabupaten") {
+          legendTitle.innerHTML = "Kabupaten";
+          Object.keys(defaultWarnaKab).forEach((kab) => {
+            legendContent.innerHTML += `
+                <div class="item">
+                    <span class="swatch" style="background:${defaultWarnaKab[kab]}"></span>
+                    <div class="text-content">${kab}</div>
+                </div>`;
+          });
+        } else {
+          legendTitle.innerHTML = "Klaster Cuaca";
+
+          const clusterDescriptions = {
+            0: {
+              stats:
+                "Rata-rata Suhu 33.2°C, Curah Hujan 100.0 mm, Kelembaban 78.7%",
+              type: "Hari Hujan Lebat dan Panas",
+            },
+            1: {
+              stats:
+                "Rata-rata Suhu 32.7°C, Curah Hujan 0.0 mm, Kelembaban 73.5%",
+              type: "Hari Kering dan Panas",
+            },
+            2: {
+              stats:
+                "Rata-rata Suhu 31.3°C, Curah Hujan 96.4 mm, Kelembaban 86.7%",
+              type: "Hari Hujan Lebat dan Dingin/Sejuk",
+            },
+          };
+          Object.keys(clusterColors).forEach((i) => {
+            legendContent.innerHTML += `
+                <div class="item">
+                    <span class="swatch" style="background:${clusterColors[i]}"></span>
+                    <div class="text-content">
+                        <b>Klaster ${i}</b> (${clusterDescriptions[i].type})<br>
+                        <small>${clusterDescriptions[i].stats}</small>
+                    </div>
+                </div>
+            `;
+          });
+        }
+      }
+
+      function loadKabupatenLayer() {
+        if (geoJsonLayer) map.removeLayer(geoJsonLayer);
+
+        clusterResults = {};
+        updateLegend("kabupaten");
+
+        // Sembunyikan Kontrol dan Legend saat memuat peta
+        toggleControls(false);
+        toggleLegend(false);
+
+        fetch("{{ url_for('static', filename='Madura.geojson') }}")
+          .then((res) => res.json())
+          .then((data) => {
+            geoJsonLayer = L.geoJSON(data, {
+              style: styleFeature,
+              onEachFeature: (feature, layer) => {
+                const nama = feature.properties.nm_dati2;
+
+                layer.bindPopup(`<b>${nama}</b>`);
+
+                layer.on("click", () => {
+                  fetch(`/forecast/${nama}`)
+                    .then((res) => res.json())
+                    .then((data) => tampilkanGrafik(nama, data))
+                    .catch((err) =>
+                      alert(
+                        `Gagal mengambil data forecast untuk ${nama}: ${err.message}`
+                      )
+                    );
+                });
+              },
+            }).addTo(map);
+
+            map.fitBounds(geoJsonLayer.getBounds());
+            toggleControls(true); // Tampilkan Kontrol Clustering secara default setelah loading
+            toggleLegend(false); // Sembunyikan Legend Klaster setelah loading (akan muncul saat clustering)
+          })
+          .catch((err) => {
+            console.error("Gagal memuat GeoJSON:", err);
+            toggleControls(true); // Pastikan kontrol tetap bisa dibuka jika ada error
+          });
+      }
+
+      function displayClusterInterpretation(clusterCenters, nFeatures) {
+        const table = document.getElementById("interpretasiKlaster");
+        table.innerHTML = "";
+        table.style.display = "table";
+
+        const featureNames = [
+          "Suhu (°C)",
+          "Curah Hujan (mm)",
+          "Kelembaban (%)",
+        ].slice(0, nFeatures);
+        let headerHtml = "<tr><th>Klaster</th>";
+        featureNames.forEach((name) => {
+          headerHtml += `<th>${name}</th>`;
+        });
+        headerHtml += "</tr>";
+        table.innerHTML += headerHtml;
+
+        clusterCenters.forEach((center, index) => {
+          let rowHtml = `<tr><td><b style="color:${
+            clusterColors[index] || "#333"
+          };">Klaster ${index}</b></td>`;
+          center.forEach((value, i) => {
+            let formattedValue;
+            if (i === 0) formattedValue = `${value.toFixed(1)}°C`;
+            else if (i === 1) formattedValue = `${value.toFixed(1)} mm`;
+            else formattedValue = `${value.toFixed(1)}%`;
+
+            rowHtml += `<td>${formattedValue}</td>`;
+          });
+          rowHtml += "</tr>";
+          table.innerHTML += rowHtml;
+        });
+      }
+
+      /* ====================== CLUSTERING ====================== */
+      async function runClustering() {
+        const tgl = document.getElementById("tglInput").value || "1";
+        const bln = document.getElementById("blnInput").value || "1";
+        const tahun = document.getElementById("tahunInput").value || "2024";
+        const notificationBox = document.getElementById("notificationBox");
+
+        notificationBox.innerHTML = `<span style="color:blue;"> Starting cluster prediction for 4 districts...</span>`;
+
+        clusterResults = {};
+        let allSuccess = true;
+        let clusterCentersData = null;
+
+        for (const kab of kabupatenList) {
+          const url = `/clustering/${encodeURIComponent(
+            kab
+          )}?tgl=${encodeURIComponent(tgl)}&bln=${encodeURIComponent(
+            bln
+          )}&tahun=${encodeURIComponent(tahun)}`;
+
+          try {
+            const res = await fetch(url);
+            const text = await res.text();
+
+            try {
+              const data = JSON.parse(text);
+              if (!res.ok) {
+                const msg = data.message || data.error || text;
+                console.error(`Clustering ${kab} gagal:`, msg);
+                notificationBox.innerHTML += `<br><span style="color:red;"> Fail ${kab}: ${msg}</span>`;
+                allSuccess = false;
+                continue;
+              }
+
+              const predictedCluster =
+                data.predicted_cluster ??
+                data.predicted ??
+                data.cluster ??
+                data.predictedCluster;
+              if (predictedCluster === undefined || predictedCluster === null) {
+                console.error(
+                  `Respon ${kab} tidak valid: tidak ada field klaster.`,
+                  data
+                );
+                notificationBox.innerHTML += `<br><span style="color:red;"> Respon ${kab} tidak valid (tanpa klaster).</span>`;
+                allSuccess = false;
+                continue;
+              }
+
+              const clusterId = Number(predictedCluster);
+              clusterResults[kab] = clusterId;
+
+              if (Array.isArray(data.cluster_centers) && !clusterCentersData) {
+                clusterCentersData = data.cluster_centers;
+              }
+            } catch (err) {
+              console.error(
+                `Gagal parsing respon JSON dari ${kab}:`,
+                text,
+                err
+              );
+              notificationBox.innerHTML += `<br><span style="color:red;"> Fail parsing respon ${kab}.</span>`;
+              allSuccess = false;
+            }
+          } catch (err) {
+            notificationBox.innerHTML += `<br><span style="color:red;"> Fail fetch API ${kab}: ${err.message}. Pastikan server Flask berjalan.</span>`;
+            console.error(`Clustering fetch error ${kab}:`, err);
+            allSuccess = false;
+          }
+        }
+
+        if (geoJsonLayer) {
+          geoJsonLayer.setStyle(styleFeature);
+        } else {
+          loadKabupatenLayer();
+        }
+
+        // Panggil updateLegend untuk menampilkan hasil klaster (ini juga memanggil toggleLegend(true))
+        updateLegend("cluster");
+      }
+
+      // Muat peta saat halaman pertama dimuat
+      loadKabupatenLayer();
+    </script>
+  </body>
+</html>