Update app.py

app.py

@@ -1,9 +1,10 @@
 import gradio as gr
 import pandas as pd
+import numpy as np
 
-# ================= DEFAULT & DATA =================
+# ================= LOAD DATA — AMBIL TEKANAN & WAKTU TERAKHIR =================
 last_pressure = 85.0
-last_time = "10:38"
+last_time = "–"
 
 try:
     df = pd.read_excel("df_final.xlsx", sheet_name="Sheet1")
@@ -15,34 +16,23 @@ try:
 
     if not df.empty:
         last_row = df.sort_values('Time').iloc[-1]
-        last_pressure = float(last_row.get('Pressure', 85.0)) if pd.notna(last_row.get('Pressure')) else 85.0
+        last_pressure = float(last_row['Pressure']) if pd.notna(last_row.get('Pressure')) else 85.0
         last_time = last_row['Time'].strftime("%H:%M")
-except:
-    pass  # fallback ke default
+except Exception as e:
+    pass
 
-# BATAS OPERASIONAL — tetap (bisa disesuaikan jika ada file konfig)
-RED_LOW = 70.0
-AMBER_LOW = 75.0
-AMBER_HIGH = 95.0
-RED_HIGH = 100.0
+# ================= BATAS AMAN (SESUAI STANDAR OPERASIONAL) =================
+red_low = 70.0
+amber_low = 75.0
+amber_high = 95.0
+red_high = 100.0
 
-# ================= LOGIKA DINAMIS: MARGIN BERDASARKAN JARAK KE AMBER =================
-def compute_fill_range(last_p):
-    # Jarak ke batas amber
-    max_decrease = last_p - AMBER_LOW   # berapa boleh dikurangi tanpa kena amber_low
-    max_increase = AMBER_HIGH - last_p  # berapa boleh ditambah tanpa kena amber_high
+def get_safe_fill_range(last_p):
+    lower = max(last_p - 10, amber_low + 0.5)
+    upper = min(last_p + 10, amber_high - 0.5)
+    return round(lower, 1), round(upper, 1)
 
-    # Batas aman dengan buffer 0.5 psi
-    lower_bound = last_p - max_decrease + 0.5  # minimal: 0.5 di atas amber_low
-    upper_bound = last_p + max_increase - 0.5  # maksimal: 0.5 di bawah amber_high
-
-    # Pastikan tidak melewati red (safety double-check)
-    lower_bound = max(lower_bound, RED_LOW + 0.5)
-    upper_bound = min(upper_bound, RED_HIGH - 0.5)
-
-    return round(lower_bound, 1), round(upper_bound, 1)
-
-# ================= CUSTOM CSS — BERSIH, RAPI, PROFESIONAL, FULL SCREEN =================
+# ================= CUSTOM CSS — (TETAP SAMA SEPERTI ANDA INGINKAN) =================
 custom_css = """
 body, .gradio-container {
     background: #000000 !important;
@@ -62,80 +52,96 @@ body, .gradio-container {
 #title-box {
     background: #003A8F;
     color: white;
-    padding: 16px 24px;
-    border-radius: 10px;
-    margin: 20px 0;
+    padding: 16px 32px;
+    border-radius: 12px;
+    margin-bottom: 32px;
     text-align: center;
     width: 100%;
-    max-width: 760px;
-    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
+    max-width: 800px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
 }
 #title-box h1 {
     margin: 0;
-    font-size: 26px;
-    font-weight: 600;
+    font-size: 28px;
+    font-weight: 700;
 }
 .form-section {
-    width: 100%;
-    max-width: 760px;
     display: flex;
     flex-direction: column;
+    align-items: flex-start;
+    width: 100%;
+    max-width: 800px;
     gap: 24px;
 }
-.row-block {
-    width: 100%;
+.control-row {
     display: flex;
-    gap: 20px;
+    gap: 24px;
+    width: 100%;
+    align-items: center;
 }
-.input-col {
+.control-row > div {
     flex: 1;
+    min-width: 200px;
+}
+.gradio-html, .output-area {
+    width: 100%;
+    max-width: 800px;
+    background: #121212;
+    border: 1px solid #333;
+    border-radius: 12px;
+    padding: 24px;
+    margin-top: 16px;
+    font-size: 18px;
+    line-height: 1.6;
+}
+.output-area h3 {
+    color: #FFD100;
+    margin: 16px 0 12px 0;
+    font-size: 22px;
+    font-weight: 600;
+}
+.output-area p {
+    margin: 10px 0;
+}
+.output-area .safe {
+    color: #00FF00;
+    font-weight: bold;
+}
+.output-area .caution {
+    color: #FFA500;
+    font-weight: bold;
+}
+.output-area .danger {
+    color: #FF0000;
+    font-weight: bold;
 }
 .gr-button {
     background: #003A8F !important;
     color: white !important;
-    font-weight: 600;
-    font-size: 17px !important;
-    padding: 10px 28px !important;
+    font-weight: bold;
+    font-size: 18px !important;
+    padding: 12px 32px !important;
     border-radius: 8px !important;
     border: none !important;
     width: auto !important;
-    margin-top: 8px;
+    margin-top: 12px;
 }
 .gr-button:hover {
     background: #002D6B !important;
-    box-shadow: 0 3px 8px rgba(0, 58, 143, 0.4);
+    transform: scale(1.03);
+    box-shadow: 0 4px 12px rgba(0, 58, 143, 0.4);
 }
 label {
     color: #CCCCCC !important;
-    font-size: 17px !important;
+    font-size: 18px !important;
     font-weight: 500;
 }
-.gradio-html, .output-area {
-    width: 100%;
-    max-width: 760px;
-    background: #121212;
-    border: 1px solid #333;
-    border-radius: 10px;
-    padding: 22px;
-    font-size: 17px;
-    line-height: 1.5;
-}
-.output-area h3 {
-    color: #FFD100;
-    margin: 18px 0 12px 0;
-    font-size: 20px;
-    font-weight: 600;
-}
-.output-area p {
-    margin: 8px 0;
-    font-size: 17px;
+input, select {
+    font-size: 18px !important;
 }
-.output-area .safe { color: #00FF00; font-weight: bold; }
-.output-area .caution { color: #FFA500; font-weight: bold; }
-.output-area .danger { color: #FF0000; font-weight: bold; }
 """
 
-# ================= INTERFACE — RAPI, KIRI, SATU HALAMAN =================
+# ================= GRADIO LAYOUT — (TETAP SAMA) =================
 with gr.Blocks(title="Michelin Mining Tyre Analytics — Objective 6", css=custom_css) as demo:
     gr.HTML("""
     <div id="title-box">
@@ -144,71 +150,69 @@ with gr.Blocks(title="Michelin Mining Tyre Analytics — Objective 6", css=custo
     """)
 
     with gr.Column(elem_classes="form-section"):
-        # Baris 1: Suhu & Jenis Ban (dalam satu baris)
-        with gr.Row(elem_classes="row-block"):
+        with gr.Row(elem_classes="control-row"):
             temperature = gr.Slider(
                 label="Suhu Saat Ini (°C)",
                 minimum=40,
                 maximum=70,
                 value=54,
                 step=0.5,
-                interactive=True,
-                elem_classes="input-col"
+                interactive=True
             )
             tyre_type = gr.Radio(
                 choices=["10 (Depan)", "11 (Belakang)"],
                 label="Jenis Ban",
                 value="10 (Depan)",
-                interactive=True,
-                elem_classes="input-col"
+                interactive=True
             )
 
-        # Baris 2: Info tekanan terakhir (tengah, kecil)
-        gr.Markdown(f"<div style='font-size:16px;color:#AAAAAA;'>Tekanan terakhir: {last_pressure} psi | Jam: {last_time}</div>")
+        last_info = gr.Markdown(f"Tekanan Terakhir: {last_pressure} psi | Jam: {last_time}")
 
-        # Tombol Submit (kiri, compact)
         btn_submit = gr.Button("Submit", elem_classes="gr-button")
-
-        # Output
         output = gr.HTML(elem_classes="output-area")
 
-    # ================= LOGIKA SIMULASI — DINAMIS SESUAI BATAS AMBER =================
+    # ================= LOGIKA SIMULASI — DIPERBAIKI REKOMENDASINYA =================
     def simulate(tyre_str, temp):
-        # Hitung tekanan ideal (sederhana, linear)
-        ideal_pressure = 85.0 + 0.42 * (temp - 54.0)
-        ideal_pressure = round(ideal_pressure, 1)
+        # Interpolasi tekanan ideal
+        ideal = 85.0 + 0.42 * (temp - 54.0)
+        ideal = round(ideal, 1)
+
+        # Ambil batas aman
+        lower_safe, upper_safe = get_safe_fill_range(last_pressure)
+
+        # Hitung selisih operasional (untuk penjelasan)
+        max_add = round(amber_high - last_pressure, 1)   # maks boleh tambah tanpa kena amber
+        max_sub = round(last_pressure - amber_low, 1)    # maks boleh kurangi tanpa kena amber
 
-        # Status vs zona
-        if ideal_pressure < RED_LOW:
+        # Status
+        if ideal < red_low:
             status = '<span class="danger">Risiko Red — Tekanan terlalu rendah</span>'
-        elif ideal_pressure < AMBER_LOW:
+        elif ideal < amber_low:
             status = '<span class="caution">Risiko Amber — Tekanan mendekati batas bawah</span>'
-        elif ideal_pressure > RED_HIGH:
+        elif ideal > red_high:
             status = '<span class="danger">Risiko Red — Tekanan terlalu tinggi</span>'
-        elif ideal_pressure > AMBER_HIGH:
+        elif ideal > amber_high:
             status = '<span class="caution">Risiko Amber — Tekanan mendekati batas atas</span>'
         else:
             status = '<span class="safe">Dalam zona aman</span>'
 
-        # Hitung rekomendasi isi ulang DINAMIS
-        lower_fill, upper_fill = compute_fill_range(last_pressure)
-
-        rec = f"""
+        # ✅ REKOMENDASI YANG ANDA INGINKAN — EKSPLISIT & OPERASIONAL
+        rec_html = f"""
         <h3>Hasil Simulasi</h3>
-        <p>Ideal Tekanan pada {temp}°C: {ideal_pressure} psi</p>
+        <p>Ideal Tekanan pada {temp}°C: {ideal} psi</p>
         <p>Status: {status}</p>
-
+        <hr>
         <h3>Rekomendasi Isi Ulang</h3>
-        <p>Berdasarkan tekanan terakhir ({last_pressure} psi pukul {last_time}):</p>
-        <p class="safe">Isi tekanan antara {lower_fill} – {upper_fill} psi</p>
-        <p class="caution">Jangan isi kurang dari {AMBER_LOW} psi (batas Amber bawah)</p>
-        <p class="caution">Jangan isi lebih dari {AMBER_HIGH} psi (batas Amber atas)</p>
-        <p class="danger">Hindari tekanan di bawah {RED_LOW} psi atau di atas {RED_HIGH} psi (zona Red)</p>
-        <p style="margin-top:14px; font-size:15px; color:#999;">
-        Catatan: Rekomendasi mempertahankan jarak aman minimal 0.5 psi dari zona Amber.
-        </p>
+        <p>Berdasarkan tekanan terakhir <strong>{last_pressure} psi</strong> (pukul {last_time}):</p>
+        <p class="safe">Isi tekanan antara <strong>{lower_safe} – {upper_safe} psi</strong></p>
+        <p>Maksimal penambahan: <strong>+{min(10.0, max_add):.1f} psi</strong> (agar tidak melebihi {amber_high} psi)</p>
+        <p>Maksimal pengurangan: <strong>−{min(10.0, max_sub):.1f} psi</strong> (agar tidak turun di bawah {amber_low} psi)</p>
+        <p class="caution">Jangan isi kurang dari {amber_low} psi (batas Amber bawah)</p>
+        <p class="caution">Jangan isi lebih dari {amber_high} psi (batas Amber atas)</p>
+        <p class="danger">Hindari tekanan di bawah {red_low} psi atau di atas {red_high} psi (zona Red)</p>
+        <p style="margin-top:16px;"><em>Catatan: Rekomendasi menjaga margin aman minimal 0.5 psi dari zona Amber.</em></p>
         """
-        return rec
+        return rec_html
 
     btn_submit.click(simulate, inputs=[tyre_type, temperature], outputs=output)