Update app.py

app.py

@@ -2,111 +2,112 @@ import gradio as gr
 import pandas as pd
 import numpy as np
 
-# ================= LOAD DATA =================
+# ================= LOAD DATA — AMBIL TEKANAN & WAKTU TERAKHIR =================
+last_pressure = 85.0
+last_time = "–"
+
 try:
     df = pd.read_excel("df_final.xlsx", sheet_name="Sheet1")
-    # Fix encoding
-    df.columns = df.columns.str.replace("Â", "")
+    df.columns = df.columns.str.replace("Â", "", regex=False)
     for col in df.select_dtypes(include='object').columns:
-        df[col] = df[col].astype(str).str.replace("Â", "")
-    # Parse datetime
+        df[col] = df[col].astype(str).str.replace("Â", "", regex=False)
     df['Time'] = pd.to_datetime(df['Time'], errors='coerce')
     df = df.dropna(subset=['Time'])
-    df['hour'] = df['Time'].dt.hour
-    # Alarm flag
-    df['is_alarm'] = (~df['Alarm Status'].str.contains('No Alarm', na=False)).astype(int)
-except FileNotFoundError:
-    df = pd.DataFrame()  # Empty if file not found
-    print("⚠️ File df_final.xlsx not found. Running with dummy data.")
-
-# ================= SIMULASI PRESSURE BERDASARKAN GRADIEN =================
-pressure_formulas = {
-    (10, 'High', 'Min'): (76.658370666499, 0.424510125965938),
-    (10, 'High', 'Max'): (81.0954797166173, 0.445533183),
-    (10, 'Low', 'Min'): (68.02273668, 0.375071782),
-    (10, 'Low', 'Max'): (63.6496681312519, 0.351500420678697),
-    (11, 'High', 'Min'): (102.275273585809, 0.496334109689563),
-    (11, 'High', 'Max'): (108.013017260632, 0.525284752576333),
-    (11, 'Low', 'Min'): (90.4977325517091, 0.446382251463767),
-    (11, 'Low', 'Max'): (84.9683663311582, 0.410110214756436),
-}
-
-def calculate_pressure(tyre_type, temp, condition, min_max):
-    if (tyre_type, condition, min_max) in pressure_formulas:
-        intercept, gradient = pressure_formulas[(tyre_type, condition, min_max)]
-        return intercept + gradient * temp
-    return None
-
-# ================= CUSTOM CSS (Dark Theme Premium) =================
+
+    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_time = last_row['Time'].strftime("%H:%M")
+except Exception as e:
+    pass  # tetap pakai default jika gagal
+
+# ================= BATAS AMAN (SESUAI STANDAR OPERASIONAL) =================
+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)
+
+# ================= CUSTOM CSS — BERSIH, PROFESIONAL, SATU HALAMAN =================
 custom_css = """
-body {
-    background: #000000;
-    color: #ffffff;
+body, .gradio-container {
+    background: #000000 !important;
+    color: #FFFFFF !important;
     font-family: 'Segoe UI', system-ui, sans-serif;
+    margin: 0;
+    padding: 0;
 }
 .gradio-container {
-    background: #000000 !important;
-    padding: 20px;
-}
-h1, h2, h3, h4, h5, h6 {
-    color: #ffffff !important;
-}
-label {
-    color: #cccccc !important;
-}
-input, select, button {
-    background: #1a1a1a !important;
-    color: #ffffff !important;
-    border: 1px solid #333333 !important;
-    border-radius: 8px !important;
-}
-button {
-    background: #003A8F !important;
-    color: white !important;
-    font-weight: bold;
-    padding: 10px 20px;
-    transition: all 0.2s ease;
-}
-button:hover {
-    background: #002d6b !important;
-    transform: translateY(-1px);
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
-}
-.gradio-box {
-    background: #121212 !important;
-    border: 1px solid #333333 !important;
-    border-radius: 12px !important;
-    padding: 20px !important;
-    margin: 10px 0 !important;
-}
-.gradio-markdown {
-    color: #ffffff !important;
-}
-.gradio-slider .track {
-    background: #FFD100 !important;
-}
-.gradio-slider .thumb {
-    background: #FFD100 !important;
-    border: 2px solid #000000 !important;
-}
-.output-area {
-    background: #1e1e1e !important;
-    border: 1px solid #333333 !important;
-    border-radius: 12px !important;
-    padding: 20px !important;
-    margin-top: 20px !important;
-    font-family: 'Courier New', monospace;
-    font-size: 14px;
+    max-width: 100% !important;
+    height: 100vh !important;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+}
+#title-box {
+    background: #003A8F;
+    color: white;
+    padding: 16px 32px;
+    border-radius: 12px;
+    margin-bottom: 32px;
+    text-align: center;
+    width: 100%;
+    max-width: 800px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+}
+#title-box h1 {
+    margin: 0;
+    font-size: 28px;
+    font-weight: 700;
+}
+.form-section {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    width: 100%;
+    max-width: 800px;
+    gap: 24px;
+}
+.control-row {
+    display: flex;
+    gap: 24px;
+    width: 100%;
+    align-items: center;
+}
+.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: 5px 0;
+    margin: 10px 0;
 }
-.output-area .recommendation {
+.output-area .safe {
     color: #00FF00;
     font-weight: bold;
 }
-.output-area .warning {
+.output-area .caution {
     color: #FFA500;
     font-weight: bold;
 }
@@ -114,64 +115,99 @@ button:hover {
     color: #FF0000;
     font-weight: bold;
 }
+.gr-button {
+    background: #003A8F !important;
+    color: white !important;
+    font-weight: bold;
+    font-size: 18px !important;
+    padding: 12px 32px !important;
+    border-radius: 8px !important;
+    border: none !important;
+    width: auto !important;
+    margin-top: 12px;
+}
+.gr-button:hover {
+    background: #002D6B !important;
+    transform: scale(1.03);
+    box-shadow: 0 4px 12px rgba(0, 58, 143, 0.4);
+}
+label {
+    color: #CCCCCC !important;
+    font-size: 18px !important;
+    font-weight: 500;
+}
+input, select {
+    font-size: 18px !important;
+}
 """
 
-# ================= GRADIO INTERFACE =================
+# ================= GRADIO LAYOUT — FULL KIRI, TANPA SIMBOL =================
 with gr.Blocks(title="Michelin Mining Tyre Analytics — Objective 6", css=custom_css) as demo:
-    gr.Markdown("""
-    # 🛞 Michelin Mining Tyre Analytics — Objective 6
-    ### Simulasi Tekanan Ban Berdasarkan Suhu & Jenis Ban
-    Masukkan suhu saat ini dan pilih jenis ban untuk mendapatkan rekomendasi tekanan ideal.
+    gr.HTML("""
+    <div id="title-box">
+        <h1>Michelin Mining Tyre Simulation Pressure</h1>
+    </div>
     """)
 
-    with gr.Row():
-        tyre_type = gr.Radio(
-            choices=["10 (Depan)", "11 (Belakang)"],
-            label="Jenis Ban",
-            value="10 (Depan)",
-            interactive=True
-        )
-        temperature = gr.Slider(
-            minimum=40,
-            maximum=70,
-            value=54,
-            step=0.5,
-            label="Suhu Saat Ini (°C)",
-            interactive=True
+    with gr.Column(elem_classes="form-section"):
+        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
+            )
+            tyre_type = gr.Radio(
+                choices=["10 (Depan)", "11 (Belakang)"],
+                label="Jenis Ban",
+                value="10 (Depan)",
+                interactive=True
+            )
+
+        last_info = gr.Markdown(
+            f"Tekanan Terakhir: {last_pressure} psi | Jam: {last_time}"
         )
 
-    with gr.Row():
-        btn_simulate = gr.Button("🔍 Simulasikan Tekanan")
-
-    with gr.Row():
-        output = gr.HTML(label="Hasil Simulasi")
-
-    def simulate_pressure(tyres, temp):
-        tyre_num = int(tyres.split()[0])
-        p_min_high = calculate_pressure(tyre_num, temp, 'High', 'Min')
-        p_max_high = calculate_pressure(tyre_num, temp, 'High', 'Max')
-        p_min_low = calculate_pressure(tyre_num, temp, 'Low', 'Min')
-        p_max_low = calculate_pressure(tyre_num, temp, 'Low', 'Max')
-
-        if p_min_high is None or p_max_high is None or p_min_low is None or p_max_low is None:
-            return "<p style='color:#FF0000;'>❌ Tidak dapat menghitung tekanan. Periksa input.</p>"
-
-        # Rekomendasi: Jaga tekanan antara P Min Low dan P Max High
-        recommendation = f"""
-        <div class="output-area">
-        <h4>📊 Hasil Simulasi untuk Ban {tyres} pada Suhu {temp}°C</h4>
-        <p><strong>P Min saat Low Pressure:</strong> <span style="color:#FFD100;">{p_min_low:.1f} psi</span></p>
-        <p><strong>P Max saat Low Pressure:</strong> <span style="color:#FFD100;">{p_max_low:.1f} psi</span></p>
-        <p><strong>P Min saat High Pressure:</strong> <span style="color:#FFD100;">{p_min_high:.1f} psi</span></p>
-        <p><strong>P Max saat High Pressure:</strong> <span style="color:#FFD100;">{p_max_high:.1f} psi</span></p>
+        btn_submit = gr.Button("Submit", elem_classes="gr-button")
+        output = gr.HTML(elem_classes="output-area")
+
+    # ================= LOGIKA SIMULASI — BERSIH & BERBASIS DATA NYATA =================
+    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)
+
+        # Status penilaian
+        if ideal < red_low:
+            status = '<span class="danger">Risiko Red — Tekanan terlalu rendah</span>'
+        elif ideal < amber_low:
+            status = '<span class="caution">Risiko Amber — Tekanan mendekati batas bawah</span>'
+        elif ideal > red_high:
+            status = '<span class="danger">Risiko Red — Tekanan terlalu tinggi</span>'
+        elif ideal > 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"""
+        <h3>Hasil Simulasi</h3>
+        <p>Ideal Tekanan pada {temp}°C: {ideal} psi</p>
+        <p>Status: {status}</p>
         <hr>
-        <p class="recommendation">✅ Rekomendasi Tekanan Ideal:</strong> Isi angin antara <strong>{p_min_low:.1f} – {p_max_high:.1f} psi</strong> untuk menghindari alarm Amber/Red.</p>
-        <p class="warning">⚠️ Jika tekanan saat ini < {p_min_low:.1f} psi → risiko <strong>Low Pressure</strong>.</p>
-        <p class="danger">⚠️ Jika tekanan saat ini > {p_max_high:.1f} psi → risiko <strong>High Pressure</strong>.</p>
-        </div>
+        <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>
         """
-        return recommendation
+        return rec_html
 
-    btn_simulate.click(simulate_pressure, inputs=[tyre_type, temperature], outputs=output)
+    btn_submit.click(simulate, inputs=[tyre_type, temperature], outputs=output)
 
 demo.launch()