Update app.py

app.py

@@ -2,8 +2,9 @@ import gradio as gr
 import pandas as pd
 import numpy as np
 
-# ================= LOAD DATA — AMBIL TEKANAN & WAKTU TERAKHIR =================
+# ================= LOAD DATA — AMBIL TEKANAN, SUHU & WAKTU TERAKHIR =================
 last_pressure = 85.0
+last_temperature = 54.0
 last_time = "–"
 
 try:
@@ -11,15 +12,17 @@ try:
     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("Â", "", regex=False)
+    
     df['Time'] = pd.to_datetime(df['Time'], errors='coerce')
     df = df.dropna(subset=['Time'])
 
     if not df.empty:
-        last_row = df.sort_values('Time').iloc[-1]
+        last_row = df.sort_values('Time', ascending=False).iloc[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")
+        last_temperature = float(last_row['Temperature']) if pd.notna(last_row.get('Temperature')) else 54.0
+        last_time = last_row['Time'].strftime("%Y-%m-%d %H:%M")
 except Exception as e:
-    pass
+    pass  # tetap pakai default jika gagal
 
 # ================= BATAS AMAN (SESUAI STANDAR OPERASIONAL) =================
 red_low = 70.0
@@ -32,157 +35,145 @@ def get_safe_fill_range(last_p):
     upper = min(last_p + 10, amber_high - 0.5)
     return round(lower, 1), round(upper, 1)
 
-# ================= CUSTOM CSS — (TETAP SAMA SEPERTI ANDA INGINKAN) =================
+# ================= CUSTOM CSS — Tengah, Wide, Bersih =================
 custom_css = """
 body, .gradio-container {
     background: #000000 !important;
     color: #FFFFFF !important;
     font-family: 'Segoe UI', system-ui, sans-serif;
-    margin: 0;
-    padding: 0;
 }
 .gradio-container {
     max-width: 100% !important;
-    height: 100vh !important;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: flex-start;
+    padding: 20px !important;
 }
 #title-box {
     background: #003A8F;
     color: white;
-    padding: 16px 32px;
+    padding: 18px 32px;
     border-radius: 12px;
-    margin-bottom: 32px;
+    margin: 20px auto 30px auto;
     text-align: center;
-    width: 100%;
-    max-width: 800px;
+    width: fit-content;
+    min-width: 500px;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
 }
 #title-box h1 {
     margin: 0;
-    font-size: 28px;
+    font-size: 26px;
     font-weight: 700;
 }
-.form-section {
+.center-section {
     display: flex;
     flex-direction: column;
-    align-items: flex-start;
+    align-items: center;
     width: 100%;
-    max-width: 800px;
+    max-width: 700px;
+    margin: 0 auto;
     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;
+.info-card {
     background: #121212;
     border: 1px solid #333;
     border-radius: 12px;
-    padding: 24px;
-    margin-top: 16px;
+    padding: 20px;
+    width: 100%;
+    text-align: center;
     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;
+    padding: 12px 36px !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);
+    transform: translateY(-1px);
+    box-shadow: 0 4px 10px rgba(0, 58, 143, 0.4);
 }
 label {
     color: #CCCCCC !important;
     font-size: 18px !important;
     font-weight: 500;
 }
-input, select {
-    font-size: 18px !important;
+.output-area {
+    background: #121212;
+    border: 1px solid #333;
+    border-radius: 12px;
+    padding: 26px;
+    width: 100%;
+    font-size: 18px;
+    line-height: 1.6;
+    margin-top: 10px;
+}
+.output-area h3 {
+    color: #FFD100;
+    margin: 18px 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; }
+.footer {
+    margin-top: 24px;
+    color: #888;
+    font-size: 15px;
+    text-align: center;
+    width: 100%;
 }
 """
 
-# ================= GRADIO LAYOUT — (TETAP SAMA) =================
-with gr.Blocks(title="Michelin Mining Tyre Analytics — Objective 6", css=custom_css) as demo:
+# ================= GRADIO — MODE WIDE, UI TENGAH =================
+with gr.Blocks(title="Michelin Mining Tyre Analytics — Objective 6", css=custom_css, mode="wide") as demo:
     gr.HTML("""
     <div id="title-box">
         <h1>Michelin Mining Tyre Simulation Pressure</h1>
     </div>
     """)
 
-    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.Column(elem_classes="center-section"):
+        # Info data terakhir
+        gr.HTML(f"""
+        <div class="info-card">
+            <p><strong>Data Terakhir:</strong> {last_time}</p>
+            <p>Suhu: <strong>{last_temperature} °C</strong> | Tekanan: <strong>{last_pressure} psi</strong></p>
+        </div>
+        """)
+
+        # Input: hanya jenis ban
+        tyre_type = gr.Radio(
+            choices=["10 (Depan)", "11 (Belakang)"],
+            label="Pilih Jenis Ban",
+            value="10 (Depan)",
+            interactive=True
+        )
 
         btn_submit = gr.Button("Submit", elem_classes="gr-button")
         output = gr.HTML(elem_classes="output-area")
 
-    # ================= LOGIKA SIMULASI — DIPERBAIKI REKOMENDASINYA =================
-    def simulate(tyre_str, temp):
-        # Interpolasi tekanan ideal
+    # Footer
+    gr.HTML('<div class="footer">Michelin Mining Tyre Analytics</div>')
+
+    # ================= LOGIKA SIMULASI — TANPA INPUT SUHU (Pakai last_temperature) =================
+    def simulate(tyre_str):
+        # Gunakan suhu terakhir dari data — tidak ada input manual
+        temp = last_temperature
+        # Interpolasi ideal pressure
         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
+        max_add = round(amber_high - last_pressure, 1)
+        max_sub = round(last_pressure - amber_low, 1)
 
         # Status
         if ideal < red_low:
@@ -196,24 +187,24 @@ with gr.Blocks(title="Michelin Mining Tyre Analytics — Objective 6", css=custo
         else:
             status = '<span class="safe">Dalam zona aman</span>'
 
-        # ✅ REKOMENDASI YANG ANDA INGINKAN — EKSPLISIT & OPERASIONAL
+        # Rekomendasi — fokus pada last_pressure & batas amber/red
         rec_html = f"""
         <h3>Hasil Simulasi</h3>
         <p>Ideal Tekanan pada {temp}°C: {ideal} psi</p>
         <p>Status: {status}</p>
         <hr>
         <h3>Rekomendasi Isi Ulang</h3>
-        <p>Berdasarkan tekanan terakhir <strong>{last_pressure} psi</strong> (pukul {last_time}):</p>
+        <p>Berdasarkan tekanan terakhir <strong>{last_pressure} psi</strong> ({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>
+        <p style="margin-top:16px;"><em>Catatan: Rekomendasi mempertahankan margin aman minimal 0.5 psi dari zona Amber.</em></p>
         """
         return rec_html
 
-    btn_submit.click(simulate, inputs=[tyre_type, temperature], outputs=output)
+    btn_submit.click(simulate, inputs=[tyre_type], outputs=output)
 
 demo.launch()