Update app.py

app.py

@@ -2,8 +2,6 @@ import streamlit as st
 from transformers import pipeline
 from PIL import Image, ImageDraw
 import torch
-from typing import List, Dict
-import time
 
 st.set_page_config(
     page_title="Fraktur Detektion",
@@ -11,90 +9,104 @@ st.set_page_config(
     initial_sidebar_state="collapsed"
 )
 
-# CSS avec animations
 st.markdown("""
 <style>
+    /* Base styles */
     .stApp {
-        background-color: #f8fafc !important;
-        padding: 0 !important;
+        background: #f0f2f5 !important;
     }
     
     .block-container {
-        padding: 0.5rem !important;
-        max-width: 100% !important;
-    }
-    
-    .upload-section {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        min-height: 50vh;
-        animation: fadeIn 0.5s ease-in;
+        padding: 1rem !important;
+        max-width: 1400px !important;
+        margin: 0 auto !important;
     }
     
-    .results-section {
-        animation: slideUp 0.5s ease-out;
+    /* Custom containers */
+    .center-upload {
+        background: white;
+        padding: 2rem;
+        border-radius: 10px;
+        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        margin-bottom: 2rem;
+        text-align: center;
     }
     
-    .detection-box {
+    .analysis-container {
         background: white;
-        border-radius: 8px;
-        padding: 1rem;
-        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+        padding: 1.5rem;
+        border-radius: 10px;
+        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
         margin-bottom: 1rem;
-        transform-origin: top;
-        animation: scaleIn 0.3s ease-out;
+        animation: slideIn 0.5s ease-out;
     }
     
-    .result-item {
-        padding: 0.5rem;
-        border-radius: 4px;
-        margin: 0.25rem 0;
-        background: #f1f5f9;
-        animation: fadeIn 0.3s ease-out;
+    .result-box {
+        background: #f8f9fa;
+        padding: 0.75rem;
+        border-radius: 8px;
+        margin: 0.5rem 0;
+        border: 1px solid #e9ecef;
     }
     
-    .image-grid {
-        display: grid;
-        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-        gap: 1rem;
-        margin-top: 1rem;
+    /* Text styles */
+    h1, h2, h3, h4, p {
+        color: #1a1a1a !important;
+        margin: 0.5rem 0 !important;
     }
     
-    .image-container {
+    /* Image styles */
+    .stImage {
         background: white;
-        border-radius: 8px;
         padding: 0.5rem;
+        border-radius: 8px;
         box-shadow: 0 1px 3px rgba(0,0,0,0.1);
-        animation: scaleIn 0.3s ease-out;
     }
     
-    @keyframes fadeIn {
-        from { opacity: 0; }
-        to { opacity: 1; }
+    .stImage > img {
+        max-height: 250px !important;
+        width: auto !important;
+        margin: 0 auto !important;
+        display: block !important;
     }
     
-    @keyframes slideUp {
-        from { transform: translateY(20px); opacity: 0; }
-        to { transform: translateY(0); opacity: 1; }
+    /* Animations */
+    @keyframes slideIn {
+        from {
+            opacity: 0;
+            transform: translateY(-10px);
+        }
+        to {
+            opacity: 1;
+            transform: translateY(0);
+        }
     }
     
-    @keyframes scaleIn {
-        from { transform: scale(0.95); opacity: 0; }
-        to { transform: scale(1); opacity: 1; }
+    /* Hide unnecessary elements */
+    #MainMenu, footer {
+        display: none !important;
     }
     
-    /* Compact image style */
-    .stImage > img {
-        max-height: 300px !important;
-        width: auto !important;
-        margin: 0 auto;
-        object-fit: contain;
+    /* Custom columns spacing */
+    [data-testid="column"] {
+        padding: 0.5rem !important;
+        background: transparent !important;
     }
     
-    #MainMenu, footer, header {
-        display: none !important;
+    /* Button styling */
+    .stButton > button {
+        width: 200px;
+        background-color: #0066cc !important;
+        color: white !important;
+        border: none !important;
+        padding: 0.5rem 1rem !important;
+        border-radius: 5px !important;
+        transition: all 0.3s ease !important;
+    }
+    
+    .stButton > button:hover {
+        background-color: #0052a3 !important;
+        transform: translateY(-1px);
     }
 </style>
 """, unsafe_allow_html=True)
@@ -117,12 +129,12 @@ def translate_label(label):
     }
     return translations.get(label.lower(), label)
 
-def draw_boxes(image: Image, predictions: List[Dict]) -> Image:
+def draw_boxes(image, predictions):
     draw = ImageDraw.Draw(image)
     for pred in predictions:
         box = pred['box']
         label = f"{translate_label(pred['label'])} ({pred['score']:.2%})"
-        color = "#2563eb" if pred['score'] > 0.7 else "#eab308"
+        color = "#0066cc" if pred['score'] > 0.7 else "#ffa500"
         
         draw.rectangle(
             [(box['xmin'], box['ymin']), (box['xmax'], box['ymax'])],
@@ -138,83 +150,84 @@ def draw_boxes(image: Image, predictions: List[Dict]) -> Image:
 def main():
     models = load_models()
     
-    if 'analyzed_images' not in st.session_state:
-        st.session_state.analyzed_images = []
-    
-    # Section upload centrée
-    st.markdown('<div class="upload-section">', unsafe_allow_html=True)
+    # Initial upload section
+    st.markdown('<div class="center-upload">', unsafe_allow_html=True)
     st.markdown("### 📤 Röntgenbild Upload")
     uploaded_files = st.file_uploader("", type=['png', 'jpg', 'jpeg'], accept_multiple_files=True)
+    
     conf_threshold = st.slider(
         "Konfidenzschwelle",
         min_value=0.0, max_value=1.0,
-        value=0.60, step=0.05
+        value=0.60, step=0.05,
+        key='confidence'
     )
-    analyze_button = st.button("Analysieren")
-    st.markdown('</div>', unsafe_allow_html=True)
     
+    analyze_button = st.button("Analysieren", key='analyze')
+    st.markdown('</div>', unsafe_allow_html=True)
+
+    # Analysis section
     if analyze_button and uploaded_files:
-        st.markdown('<div class="results-section">', unsafe_allow_html=True)
-        
-        for uploaded_file in uploaded_files:
-            image = Image.open(uploaded_file)
+        for idx, uploaded_file in enumerate(uploaded_files):
+            st.markdown(f'<div class="analysis-container">', unsafe_allow_html=True)
             
-            # Animation de chargement
-            with st.spinner("Analyse läuft..."):
-                time.sleep(0.5)  # Animation effect
+            with st.spinner("Analysiere Bild..."):
+                image = Image.open(uploaded_file)
                 
-                col1, col2, col3 = st.columns([1, 1, 1])
+                # Create three columns
+                col1, col2, col3 = st.columns(3)
                 
+                # Column 1: Original Image
                 with col1:
-                    st.markdown("### 📋 Bild Details")
+                    st.markdown("### 🖼️ Original")
                     st.image(image, use_column_width=True)
                 
+                # Column 2: AI Analysis
                 with col2:
-                    st.markdown("### 🎯 KI-Analyse")
+                    st.markdown("### 🤖 KI-Analyse")
                     
-                    # KnochenWächter
-                    with st.container():
-                        st.markdown("#### 🛡️ KnochenWächter")
-                        predictions = models["KnochenWächter"](image)
-                        for pred in predictions:
-                            if pred['score'] >= conf_threshold:
-                                st.markdown(f"""
-                                    <div class="result-item">
-                                        <span style='color: {"#22c55e" if pred["score"] > 0.7 else "#eab308"}; font-weight: 500;'>
-                                            {pred['score']:.1%}
-                                        </span> - {translate_label(pred['label'])}
-                                    </div>
-                                """, unsafe_allow_html=True)
+                    # KnochenWächter results
+                    predictions = models["KnochenWächter"](image)
+                    st.markdown("#### 🛡️ KnochenWächter")
+                    for pred in predictions:
+                        if pred['score'] >= conf_threshold:
+                            st.markdown(f"""
+                                <div class="result-box">
+                                    <span style='color: {"#0066cc" if pred["score"] > 0.7 else "#ffa500"}; font-weight: 500;'>
+                                        {pred['score']:.1%}
+                                    </span> - {translate_label(pred['label'])}
+                                </div>
+                            """, unsafe_allow_html=True)
                     
-                    # RöntgenMeister
-                    with st.container():
-                        st.markdown("#### 🎓 RöntgenMeister")
-                        predictions = models["RöntgenMeister"](image)
-                        for pred in predictions:
-                            if pred['score'] >= conf_threshold:
-                                st.markdown(f"""
-                                    <div class="result-item">
-                                        <span style='color: {"#22c55e" if pred["score"] > 0.7 else "#eab308"}; font-weight: 500;'>
-                                            {pred['score']:.1%}
-                                        </span> - {translate_label(pred['label'])}
-                                    </div>
-                                """, unsafe_allow_html=True)
+                    # RöntgenMeister results
+                    predictions = models["RöntgenMeister"](image)
+                    st.markdown("#### 🎓 RöntgenMeister")
+                    for pred in predictions:
+                        if pred['score'] >= conf_threshold:
+                            st.markdown(f"""
+                                <div class="result-box">
+                                    <span style='color: {"#0066cc" if pred["score"] > 0.7 else "#ffa500"}; font-weight: 500;'>
+                                        {pred['score']:.1%}
+                                    </span> - {translate_label(pred['label'])}
+                                </div>
+                            """, unsafe_allow_html=True)
                 
-                # Afficher la localisation uniquement si une fracture est détectée
+                # Column 3: Localization (only if fracture detected)
                 with col3:
-                    predictions_location = models["KnochenAuge"](image)
-                    fractures_detected = any(p['score'] >= conf_threshold and 'fracture' in p['label'].lower() 
-                                          for p in predictions_location)
+                    predictions = models["KnochenAuge"](image)
+                    has_fracture = any(
+                        p['score'] >= conf_threshold and 'fracture' in p['label'].lower() 
+                        for p in predictions
+                    )
                     
-                    if fractures_detected:
+                    if has_fracture:
                         st.markdown("### 🔍 Fraktur Lokalisation")
-                        filtered_preds = [p for p in predictions_location if p['score'] >= conf_threshold]
+                        filtered_preds = [p for p in predictions if p['score'] >= conf_threshold]
                         if filtered_preds:
                             result_image = image.copy()
                             result_image = draw_boxes(result_image, filtered_preds)
                             st.image(result_image, use_column_width=True)
-        
-        st.markdown('</div>', unsafe_allow_html=True)
+            
+            st.markdown('</div>', unsafe_allow_html=True)
 
 if __name__ == "__main__":
     main()