Update app.py

app.py

@@ -1,9 +1,6 @@
 import gradio as gr
 import pandas as pd
 import numpy as np
-import plotly.express as px
-import plotly.graph_objects as go
-from sklearn.linear_model import LinearRegression
 
 # ================= LOAD DATA =================
 try:
@@ -23,7 +20,6 @@ except FileNotFoundError:
     print("⚠️ File df_final.xlsx not found. Running with dummy data.")
 
 # ================= SIMULASI PRESSURE BERDASARKAN GRADIEN =================
-# Definisikan rumus gradien berdasarkan tabel Anda
 pressure_formulas = {
     (10, 'High', 'Min'): (76.658370666499, 0.424510125965938),
     (10, 'High', 'Max'): (81.0954797166173, 0.445533183),
@@ -41,50 +37,89 @@ def calculate_pressure(tyre_type, temp, condition, min_max):
         return intercept + gradient * temp
     return None
 
-# ================= GRADIO INTERFACE =================
-with gr.Blocks(title="Michelin Mining Tyre Analytics - Simulation") 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.
-    """)
-
-    with gr.Row():
-        tyre_type = gr.Radio(["10 (Depan)", "11 (Belakang)"], label="Jenis Ban", value="10 (Depan)")
-        temperature = gr.Slider(40, 70, value=54, step=0.5, label="Suhu Saat Ini (°C)")
-
-    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:red;'>❌ Tidak dapat menghitung tekanan. Periksa input.</p>"
-
-        # Rekomendasi: Jaga tekanan antara P Min Low dan P Max High
-        recommendation = f"""
-        <div style="background:#f9f9f9; padding:15px; border-radius:8px; font-family:Segoe UI;">
-        <h4>📊 Hasil Simulasi untuk Ban {tyres} pada Suhu {temp}°C</h4>
-        <p><strong>P Min saat Low Pressure:</strong> {p_min_low:.1f} psi</p>
-        <p><strong>P Max saat Low Pressure:</strong> {p_max_low:.1f} psi</p>
-        <p><strong>P Min saat High Pressure:</strong> {p_min_high:.1f} psi</p>
-        <p><strong>P Max saat High Pressure:</strong> {p_max_high:.1f} psi</p>
-        <hr>
-        <p>✅ <strong>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>⚠️ Jika tekanan saat ini < {p_min_low:.1f} psi → risiko <strong>Low Pressure</strong>.</p>
-        <p>⚠️ Jika tekanan saat ini > {p_max_high:.1f} psi → risiko <strong>High Pressure</strong>.</p>
-        </div>
-        """
-        return recommendation
-
-    btn_simulate.click(simulate_pressure, inputs=[tyre_type, temperature], outputs=output)
+# ================= CUSTOM CSS (Dark Theme Premium) =================
+custom_css = """
+<style>
+body {
+    background: #000000;
+    color: #ffffff;
+    font-family: 'Segoe UI', system-ui, sans-serif;
+}
+.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;
+    line-height: 1.6;
+}
+.output-area p {
+    margin: 5px 0;
+}
+.output-area .recommendation {
+    color: #00FF00;
+    font-weight: bold;
+}
+.output-area .warning {
+    color: #FFA500;
+    font-weight: bold;
+}
+.output-area .danger {
+    color: #FF0000;
+    font-weight: bold;
+}
+</style>
+"""
 
-demo.launch()
+# ================= GRADIO INTERFACE =================
+with gr.Blocks(title="Michelin Mining Tyre Analytics — Objective 6", css=custom_css) as demo:
+    gr.HTML("""
+    <div style="text-align:center; padding:20px;">
+        <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICA8cGF0aCBmaWxsPSIjMDAzQTg4IiBkPSJNMjAgMTVjLTEuMSAwLTIuMi0uOS0yLjItMi4yaC0xLjRjLS4xIDAtLjIuMS0uMi4yaC0xLjRjLS4xIDAtLjIuMS0uMi4yaC0xLjRjLS4xIDAtLjIuMS0uMi4yaC0xLjRjLS4xIDAtLjIuMS0uMi4yaC0xLjRjLS4xIDAtLjIuMS0uMi4yaC0xLjRjLS4xIDAtLjI