27

app.py

@@ -40,23 +40,39 @@ def load_css():
         margin: 1rem 0;
     }
     
-    /* Results styling */
-    .result-positive {
-        background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
-        color: white;
-        padding: 1rem;
+    /* Results styling - matching the image design */
+    .allergen-result {
+        padding: 1rem 1.5rem;
         border-radius: 8px;
         margin: 0.5rem 0;
-        box-shadow: 0 2px 4px rgba(255, 107, 107, 0.3);
+        font-size: 1rem;
+        font-weight: 500;
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
     }
     
-    .result-negative {
-        background: linear-gradient(135deg, #51cf66, #69db7c);
-        color: white;
-        padding: 1rem;
+    .allergen-detected {
+        background-color: #f8d7da;
+        color: #721c24;
+        border: 1px solid #f1aeb5;
+    }
+    
+    .allergen-safe {
+        background-color: #d1e7dd;
+        color: #0f5132;
+        border: 1px solid #a3cfbb;
+    }
+    
+    .allergen-summary {
+        background-color: #fff3cd;
+        color: #664d03;
+        border: 1px solid #ffecb5;
+        padding: 1rem 1.5rem;
         border-radius: 8px;
-        margin: 0.5rem 0;
-        box-shadow: 0 2px 4px rgba(81, 207, 102, 0.3);
+        margin: 1rem 0;
+        font-weight: 600;
+        text-align: center;
     }
     
     /* Button styling */
@@ -155,7 +171,8 @@ def load_model():
 def predict_allergen(model, vectorizer, input_text):
     X_input = vectorizer.transform([input_text])
     prediction = model.predict(X_input)
-    return prediction[0]
+    probabilities = model.predict_proba(X_input)
+    return prediction[0], probabilities[0]
 
 # === Scraping bahan dari Cookpad ===
 def get_ingredients_from_cookpad(url):
@@ -182,34 +199,54 @@ def get_ingredients_from_cookpad(url):
     except Exception as e:
         return None, f"Terjadi kesalahan: {str(e)}"
 
-# === Display results with custom styling ===
-def display_results(results):
+# === Display results with custom styling matching the image ===
+def display_results(results, probabilities, labels):
     st.markdown("### 🎯 Hasil Analisis Alergen")
     
-    positive_results = []
-    negative_results = []
-    
-    for allergen, status in results.items():
-        if status == 1:
-            positive_results.append(allergen)
-        else:
-            negative_results.append(allergen)
+    # Emoji mapping for each allergen
+    allergen_emojis = {
+        'Susu': '🥛',
+        'Kacang': '🥜', 
+        'Telur': '🥚',
+        'Makanan Laut': '🦐',
+        'Gandum': '🌾'
+    }
     
-    # Display positive results (allergens detected)
-    if positive_results:
-        st.markdown("#### ⚠️ **Alergen Terdeteksi:**")
-        for allergen in positive_results:
-            st.markdown(f'<div class="result-positive">🚨 <strong>{allergen}</strong></div>', unsafe_allow_html=True)
+    detected_allergens = []
     
-    # Display negative results (safe allergens)
-    if negative_results:
-        st.markdown("#### ✅ **Aman dari Alergen:**")
-        for allergen in negative_results:
-            st.markdown(f'<div class="result-negative">✓ {allergen}</div>', unsafe_allow_html=True)
+    # Display each allergen result
+    for i, (allergen, status) in enumerate(results.items()):
+        emoji = allergen_emojis.get(allergen, '📋')
+        confidence = probabilities[i][1] * 100  # Get probability for positive class
+        
+        if status == 1:  # Detected
+            detected_allergens.append(allergen)
+            st.markdown(f'''
+            <div class="allergen-result allergen-detected">
+                {emoji} {allergen}: Terdeteksi ⚠️ ({confidence:.2f}%)
+            </div>
+            ''', unsafe_allow_html=True)
+        else:  # Not detected
+            st.markdown(f'''
+            <div class="allergen-result allergen-safe">
+                {emoji} {allergen}: Tidak Terdeteksi ✓ ({confidence:.2f}%)
+            </div>
+            ''', unsafe_allow_html=True)
     
-    # Show summary
-    if not positive_results:
-        st.markdown('<div class="result-negative">🎉 <strong>Tidak ada alergen berbahaya terdeteksi!</strong></div>', unsafe_allow_html=True)
+    # Display summary
+    if detected_allergens:
+        allergen_list = ", ".join(detected_allergens)
+        st.markdown(f'''
+        <div class="allergen-summary">
+            Resep ini mengandung alergen: {allergen_list}
+        </div>
+        ''', unsafe_allow_html=True)
+    else:
+        st.markdown(f'''
+        <div class="allergen-summary">
+            🎉 Tidak ada alergen berbahaya terdeteksi dalam resep ini!
+        </div>
+        ''', unsafe_allow_html=True)
 
 # === Main UI ===
 def main():
@@ -298,11 +335,11 @@ def main():
                         st.warning("⚠️ Mohon masukkan bahan makanan terlebih dahulu.")
                     else:
                         with st.spinner("🔄 Sedang menganalisis..."):
-                            pred = predict_allergen(model, vectorizer, input_text)
+                            pred, probs = predict_allergen(model, vectorizer, input_text)
                             results = dict(zip(labels, pred))
                         
                         st.success("✅ Analisis selesai!")
-                        display_results(results)
+                        display_results(results, probs, labels)
         
         elif input_mode == "🔗 URL Cookpad":
             st.markdown("### 🔗 Analisis dari URL Cookpad")
@@ -364,11 +401,11 @@ def main():
                                 
                                 # Predict allergens
                                 joined_ingredients = " ".join(ingredients)
-                                pred = predict_allergen(model, vectorizer, joined_ingredients)
+                                pred, probs = predict_allergen(model, vectorizer, joined_ingredients)
                                 results = dict(zip(labels, pred))
                                 
                                 st.markdown("---")
-                                display_results(results)
+                                display_results(results, probs, labels)
                     
                     # Clear progress indicators
                     progress_bar.empty()