Update app.py

app.py

@@ -1,10 +1,9 @@
 import gradio as gr
 import pandas as pd
-import numpy as np
 
-# ================= LOAD DATA — AMBIL TEKANAN & WAKTU TERAKHIR =================
+# ================= DEFAULT & DATA =================
 last_pressure = 85.0
-last_time = "–"
+last_time = "10:38"
 
 try:
     df = pd.read_excel("df_final.xlsx", sheet_name="Sheet1")
@@ -16,23 +15,34 @@ try:
 
     if not df.empty:
         last_row = df.sort_values('Time').iloc[-1]
-        last_pressure = float(last_row['Pressure']) if pd.notna(last_row.get('Pressure')) else 85.0
+        last_pressure = float(last_row.get('Pressure', 85.0)) if pd.notna(last_row.get('Pressure')) else 85.0
         last_time = last_row['Time'].strftime("%H:%M")
-except Exception as e:
-    pass  # tetap pakai default jika gagal
+except:
+    pass  # fallback ke default
 
-# ================= BATAS AMAN (SESUAI STANDAR OPERASIONAL) =================
-red_low = 70.0
-amber_low = 75.0
-amber_high = 95.0
-red_high = 100.0
+# 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
 
-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)
+# ================= 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
 
-# ================= CUSTOM CSS — BERSIH, PROFESIONAL, SATU HALAMAN =================
+    # 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 = """
 body, .gradio-container {
     background: #000000 !important;
@@ -52,96 +62,80 @@ body, .gradio-container {
 #title-box {
     background: #003A8F;
     color: white;
-    padding: 16px 32px;
-    border-radius: 12px;
-    margin-bottom: 32px;
+    padding: 16px 24px;
+    border-radius: 10px;
+    margin: 20px 0;
     text-align: center;
     width: 100%;
-    max-width: 800px;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+    max-width: 760px;
+    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
 }
 #title-box h1 {
     margin: 0;
-    font-size: 28px;
-    font-weight: 700;
+    font-size: 26px;
+    font-weight: 600;
 }
 .form-section {
+    width: 100%;
+    max-width: 760px;
     display: flex;
     flex-direction: column;
-    align-items: flex-start;
-    width: 100%;
-    max-width: 800px;
     gap: 24px;
 }
-.control-row {
-    display: flex;
-    gap: 24px;
+.row-block {
     width: 100%;
-    align-items: center;
+    display: flex;
+    gap: 20px;
 }
-.control-row > div {
+.input-col {
     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: bold;
-    font-size: 18px !important;
-    padding: 12px 32px !important;
+    font-weight: 600;
+    font-size: 17px !important;
+    padding: 10px 28px !important;
     border-radius: 8px !important;
     border: none !important;
     width: auto !important;
-    margin-top: 12px;
+    margin-top: 8px;
 }
 .gr-button:hover {
     background: #002D6B !important;
-    transform: scale(1.03);
-    box-shadow: 0 4px 12px rgba(0, 58, 143, 0.4);
+    box-shadow: 0 3px 8px rgba(0, 58, 143, 0.4);
 }
 label {
     color: #CCCCCC !important;
-    font-size: 18px !important;
+    font-size: 17px !important;
     font-weight: 500;
 }
-input, select {
-    font-size: 18px !important;
+.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;
+}
+.output-area .safe { color: #00FF00; font-weight: bold; }
+.output-area .caution { color: #FFA500; font-weight: bold; }
+.output-area .danger { color: #FF0000; font-weight: bold; }
 """
 
-# ================= GRADIO LAYOUT — FULL KIRI, TANPA SIMBOL =================
+# ================= INTERFACE — RAPI, KIRI, SATU HALAMAN =================
 with gr.Blocks(title="Michelin Mining Tyre Analytics — Objective 6", css=custom_css) as demo:
     gr.HTML("""
     <div id="title-box">
@@ -150,63 +144,71 @@ with gr.Blocks(title="Michelin Mining Tyre Analytics — Objective 6", css=custo
     """)
 
     with gr.Column(elem_classes="form-section"):
-        with gr.Row(elem_classes="control-row"):
+        # Baris 1: Suhu & Jenis Ban (dalam satu baris)
+        with gr.Row(elem_classes="row-block"):
             temperature = gr.Slider(
                 label="Suhu Saat Ini (°C)",
                 minimum=40,
                 maximum=70,
                 value=54,
                 step=0.5,
-                interactive=True
+                interactive=True,
+                elem_classes="input-col"
             )
             tyre_type = gr.Radio(
                 choices=["10 (Depan)", "11 (Belakang)"],
                 label="Jenis Ban",
                 value="10 (Depan)",
-                interactive=True
+                interactive=True,
+                elem_classes="input-col"
             )
 
-        last_info = gr.Markdown(
-            f"Tekanan Terakhir: {last_pressure} psi | Jam: {last_time}"
-        )
+        # 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>")
 
+        # Tombol Submit (kiri, compact)
         btn_submit = gr.Button("Submit", elem_classes="gr-button")
+
+        # Output
         output = gr.HTML(elem_classes="output-area")
 
-    # ================= LOGIKA SIMULASI — BERSIH & BERBASIS DATA NYATA =================
+    # ================= LOGIKA SIMULASI — DINAMIS SESUAI BATAS AMBER =================
     def simulate(tyre_str, temp):
-        # Interpolasi sederhana: baseline 54°C → 85 psi, slope 0.42 psi/°C
-        ideal = 85.0 + 0.42 * (temp - 54.0)
-        ideal = round(ideal, 1)
-
-        lower_safe, upper_safe = get_safe_fill_range(last_pressure)
+        # Hitung tekanan ideal (sederhana, linear)
+        ideal_pressure = 85.0 + 0.42 * (temp - 54.0)
+        ideal_pressure = round(ideal_pressure, 1)
 
-        # Status penilaian
-        if ideal < red_low:
+        # Status vs zona
+        if ideal_pressure < RED_LOW:
             status = '<span class="danger">Risiko Red — Tekanan terlalu rendah</span>'
-        elif ideal < amber_low:
+        elif ideal_pressure < AMBER_LOW:
             status = '<span class="caution">Risiko Amber — Tekanan mendekati batas bawah</span>'
-        elif ideal > red_high:
+        elif ideal_pressure > RED_HIGH:
             status = '<span class="danger">Risiko Red — Tekanan terlalu tinggi</span>'
-        elif ideal > amber_high:
+        elif ideal_pressure > AMBER_HIGH:
             status = '<span class="caution">Risiko Amber — Tekanan mendekati batas atas</span>'
         else:
             status = '<span class="safe">Dalam zona aman</span>'
 
-        rec_html = f"""
+        # Hitung rekomendasi isi ulang DINAMIS
+        lower_fill, upper_fill = compute_fill_range(last_pressure)
+
+        rec = f"""
         <h3>Hasil Simulasi</h3>
-        <p>Ideal Tekanan pada {temp}°C: {ideal} psi</p>
+        <p>Ideal Tekanan pada {temp}°C: {ideal_pressure} 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_safe} – {upper_safe} 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 ini mempertahankan margin aman minimal 0.5 psi dari zona Amber.</em></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>
         """
-        return rec_html
+        return rec
 
     btn_submit.click(simulate, inputs=[tyre_type, temperature], outputs=output)