Update app.py

app.py

@@ -1,8 +1,9 @@
 import gradio as gr
 import joblib
 import numpy as np
+import matplotlib.pyplot as plt
 
-# 1. LOAD MODEL (OTAK AI)
+# 1. LOAD MODEL
 def load_model():
     try:
         model = joblib.load('otak_ai_security.pkl')
@@ -12,44 +13,74 @@ def load_model():
 
 model = load_model()
 
-# 2. FUNGSI PREDIKSI (INTI LOGIKA)
+# 2. FUNGSI PREDIKSI + VISUALISASI
 def deteksi_serangan(dst_port, packet_size, duration, protocol_name):
     if model is None:
-        return "⚠️ ERROR: File otak_ai_security.pkl belum diupload!"
+        return "⚠️ ERROR: File .pkl belum diupload!", None
 
-    # Konversi nama protokol ke angka (sesuai training modul 2)
-    # Mapping: TCP=6, UDP=17, ICMP=1
+    # Konversi Protocol
     protocol_map = {"TCP": 6, "UDP": 17, "ICMP": 1}
-    proto_code = protocol_map.get(protocol_name, 6) # Default TCP
+    proto_code = protocol_map.get(protocol_name, 6)
 
-    # Susun data input
+    # Susun Data
     data_input = np.array([[dst_port, packet_size, duration, proto_code]])
 
     # Prediksi
     hasil = model.predict(data_input)[0]
-    probabilitas = model.predict_proba(data_input)
-    confidence = probabilitas[0][hasil] * 100
+    probabilitas = model.predict_proba(data_input)[0] # Contoh: [0.1, 0.9]
+    
+    # Ambil nilai probabilitas
+    prob_aman = probabilitas[0]
+    prob_serangan = probabilitas[1]
 
-    # Susun Kalimat Jawaban
+    # --- BAGIAN 1: TEKS OUTPUT ---
+    confidence = probabilitas[hasil] * 100
     if hasil == 0:
-        return f"✅ STATUS: AMAN (BENIGN)\n\nAI yakin {confidence:.1f}% bahwa ini traffic normal."
+        pesan = f"✅ STATUS: AMAN (BENIGN)\n\nAI yakin {confidence:.1f}% trafik ini normal."
     else:
-        return f"🚨 STATUS: BAHAYA (MALICIOUS ATTACK!)\n\nAI yakin {confidence:.1f}% ini adalah SERANGAN."
+        pesan = f"🚨 STATUS: BAHAYA (MALICIOUS!)\n\nAI yakin {confidence:.1f}% ini SERANGAN."
 
-# 3. MEMBUAT TAMPILAN WEB (INTERFACE)
+    # --- BAGIAN 2: MEMBUAT GRAFIK (VISUALISASI) ---
+    # Kita buat Donut Chart
+    fig, ax = plt.subplots(figsize=(6, 4))
+    
+    labels = ['Aman', 'Serangan']
+    values = [prob_aman, prob_serangan]
+    colors = ['#4CAF50', '#F44336'] # Hijau & Merah
+    explode = (0.1, 0) if hasil == 0 else (0, 0.1) # Efek "keluar" sedikit pada yang terpilih
+
+    # Gambar Pie Chart
+    wedges, texts, autotexts = ax.pie(values, labels=labels, autopct='%1.1f%%',
+                                      startangle=90, colors=colors, explode=explode,
+                                      textprops=dict(color="black"))
+    
+    # Bikin jadi Donut (Tengah bolong)
+    centre_circle = plt.Circle((0,0),0.70,fc='white')
+    fig.gca().add_artist(centre_circle)
+    
+    ax.axis('equal')  
+    plt.title("Tingkat Keyakinan AI", fontsize=14, fontweight='bold')
+    plt.close() # Tutup plot agar memori hemat
+
+    return pesan, fig
+
+# 3. INTERFACE GRADIO (DENGAN PLOT)
 interface = gr.Interface(
-    fn=deteksi_serangan, # Fungsi yang dipanggil saat tombol ditekan
+    fn=deteksi_serangan,
     inputs=[
-        gr.Number(label="Destination Port (Contoh: 80, 443, 22)", value=80),
+        gr.Number(label="Destination Port (Cth: 80, 443, 22)", value=80),
         gr.Number(label="Packet Size (Bytes)", value=500),
         gr.Number(label="Duration (ms)", value=100),
         gr.Dropdown(["TCP", "UDP", "ICMP"], label="Protocol Type", value="TCP"),
     ],
-    outputs="text",
-    title="🛡️ AI-Based Intrusion Detection System",
-    description="Demo Keamanan Siber oleh Edy Qineos Academy. Masukkan parameter paket data untuk didiagnosa oleh AI.",
+    # OUTPUTNYA SEKARANG ADA 2: TEKS DAN GAMBAR (PLOT)
+    outputs=[
+        gr.Textbox(label="Hasil Analisa"), 
+        gr.Plot(label="Visualisasi Confidence")
+    ],
+    title="🛡️ AI Security Dashboard (Visual)",
+    description="Demo IDS dengan Visualisasi Data. Masukkan parameter untuk melihat grafik deteksi.",
     theme="default"
 )
 
-# Jalankan Aplikasi
 interface.launch()