Update app.py

app.py

@@ -3,66 +3,97 @@ from transformers import pipeline
 from PIL import Image, ImageDraw
 import torch
 
-# Configuration de la page
 st.set_page_config(
-    layout="wide",
     page_title="Fraktur Detektion",
+    layout="wide",
     initial_sidebar_state="collapsed"
 )
 
-# Style personnalisé
 st.markdown("""
 <style>
-    /* Cacher les éléments Streamlit par défaut */
-    #MainMenu {visibility: hidden;}
-    footer {visibility: hidden;}
-    header {visibility: hidden;}
-    
-    /* Style personnalisé pour la page */
+    /* Reset et base */
     .stApp {
-        margin: 0;
+        background-color: var(--background-color) !important;
         padding: 0 !important;
-        max-width: 100%;
+        overflow: hidden !important;
     }
     
-    /* Style pour les boutons */
-    .stButton > button {
-        width: 100%;
-        background-color: #3b82f6;
-        color: white;
-        padding: 0.5rem 1rem;
-        border-radius: 0.375rem;
-        border: none;
-        font-weight: 500;
+    /* Variables de thème */
+    [data-theme="light"] {
+        --background-color: #ffffff;
+        --text-color: #1f2937;
+        --border-color: #e5e7eb;
+        --secondary-bg: #f3f4f6;
     }
     
-    .stButton > button:hover {
-        background-color: #2563eb;
+    [data-theme="dark"] {
+        --background-color: #1f2937;
+        --text-color: #f3f4f6;
+        --border-color: #4b5563;
+        --secondary-bg: #374151;
     }
     
-    /* Container principal */
+    /* Layout principal */
     .block-container {
-        padding: 1rem !important;
+        padding: 0.5rem !important;
         max-width: 100% !important;
     }
     
-    /* Style pour les images */
+    /* Contrôles et upload */
+    .uploadedFile {
+        border: 1px dashed var(--border-color);
+        border-radius: 0.375rem;
+        padding: 0.25rem;
+        background: var(--secondary-bg);
+    }
+    
+    /* Ajustement des colonnes */
+    [data-testid="column"] {
+        padding: 0 0.5rem !important;
+    }
+    
+    /* Images adaptatives */
     .stImage > img {
-        max-height: 300px;
-        width: auto;
-        margin: 0 auto;
+        width: 100% !important;
+        height: auto !important;
+        max-height: 400px !important;
+        object-fit: contain !important;
     }
     
-    /* Style pour les messages d'erreur */
-    .stAlert {
-        padding: 1rem;
-        margin: 1rem 0;
+    /* Résultats */
+    .result-box {
+        padding: 0.375rem;
         border-radius: 0.375rem;
+        margin: 0.25rem 0;
+        background: var(--secondary-bg);
+        border: 1px solid var(--border-color);
+        color: var(--text-color);
+    }
+    
+    /* Titres */
+    h2, h3 {
+        margin: 0 !important;
+        padding: 0.5rem 0 !important;
+        font-size: 1rem !important;
+        color: var(--text-color) !important;
+    }
+    
+    /* Nettoyage des éléments inutiles */
+    #MainMenu, footer, header, .viewerBadge_container__1QSob, .stDeployButton {
+        display: none !important;
+    }
+    
+    /* Ajustements espacement */
+    div[data-testid="stVerticalBlock"] {
+        gap: 0.5rem !important;
+    }
+    
+    .element-container {
+        margin: 0.25rem 0 !important;
     }
 </style>
 """, unsafe_allow_html=True)
 
-# Cache des modèles
 @st.cache_resource
 def load_models():
     return {
@@ -72,78 +103,117 @@ def load_models():
             model="nandodeomkar/autotrain-fracture-detection-using-google-vit-base-patch-16-54382127388")
     }
 
+def translate_label(label):
+    translations = {
+        "fracture": "Knochenbruch",
+        "no fracture": "Kein Bruch",
+        "normal": "Normal",
+        "abnormal": "Auffällig"
+    }
+    return translations.get(label.lower(), label)
+
 def draw_boxes(image, predictions):
     draw = ImageDraw.Draw(image)
     for pred in predictions:
-        if pred['label'].lower() == 'fracture' and pred['score'] > 0.6:
-            box = pred['box']
-            label = f"Fraktur ({pred['score']:.1%})"
-            color = "#EF4444"  # Rouge
-            
-            # Dessiner le rectangle
-            draw.rectangle(
-                [(box['xmin'], box['ymin']), (box['xmax'], box['ymax'])],
-                outline=color,
-                width=2
-            )
-            
-            # Ajouter le label
-            text_bbox = draw.textbbox((box['xmin'], box['ymin']-15), label)
-            draw.rectangle(text_bbox, fill=color)
-            draw.text((box['xmin'], box['ymin']-15), label, fill="white")
-            
+        box = pred['box']
+        label = f"{translate_label(pred['label'])} ({pred['score']:.2%})"
+        color = "#2563eb" if pred['score'] > 0.7 else "#eab308"
+        
+        draw.rectangle(
+            [(box['xmin'], box['ymin']), (box['xmax'], box['ymax'])],
+            outline=color,
+            width=2
+        )
+        
+        # Label plus compact
+        text_bbox = draw.textbbox((box['xmin'], box['ymin']-15), label)
+        draw.rectangle(text_bbox, fill=color)
+        draw.text((box['xmin'], box['ymin']-15), label, fill="white")
     return image
 
 def main():
-    # Chargement des modèles
     models = load_models()
-    
-    # Upload des images
-    uploaded_files = st.file_uploader(
-        "Röntgenbilder hochladen",
-        type=['png', 'jpg', 'jpeg'],
-        accept_multiple_files=True,
-        label_visibility="collapsed"
-    )
-    
-    if uploaded_files:
-        # Bouton d'analyse
-        if st.button("Bilder analysieren", key="analyze_button"):
-            # Création des colonnes pour l'affichage
-            cols = st.columns(2)
+
+    # Disposition en deux colonnes principales
+    col1, col2 = st.columns([1, 2])
+
+    with col1:
+        st.markdown("### 📤 Röntgenbild Upload")
+        uploaded_file = st.file_uploader("", type=['png', 'jpg', 'jpeg'])
+        
+        if uploaded_file:
+            conf_threshold = st.slider(
+                "Konfidenzschwelle",
+                min_value=0.0, max_value=1.0,
+                value=0.60, step=0.05
+            )
+
+    with col2:
+        if uploaded_file:
+            image = Image.open(uploaded_file)
+            
+            st.markdown("### 🔍 Meinung der KI-Experten")
+            
+            # Analyse avec KnochenAuge (localisierung)
+            st.markdown("#### 👁️ Das KnochenAuge - Lokalisation")
+            predictions = models["KnochenAuge"](image)
+            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_container_width=True)
+            
+            # Autres modèles
+            st.markdown("#### 🎯 KI-Analyse")
+            col_left, col_right = st.columns(2)
+            
+            with col_left:
+                st.markdown("**🛡️ Der KnochenWächter**")
+                predictions = models["KnochenWächter"](image)
+                for pred in predictions:
+                    if pred['score'] >= conf_threshold:
+                        score_color = "#22c55e" if pred['score'] > 0.7 else "#eab308"
+                        st.markdown(f"""
+                            <div class='result-box'>
+                                <span style='color: {score_color}; font-weight: 500;'>
+                                    {pred['score']:.1%}
+                                </span> - {translate_label(pred['label'])}
+                            </div>
+                        """, unsafe_allow_html=True)
+            
+            with col_right:
+                st.markdown("**🎓 Der RöntgenMeister**")
+                predictions = models["RöntgenMeister"](image)
+                for pred in predictions:
+                    if pred['score'] >= conf_threshold:
+                        score_color = "#22c55e" if pred['score'] > 0.7 else "#eab308"
+                        st.markdown(f"""
+                            <div class='result-box'>
+                                <span style='color: {score_color}; font-weight: 500;'>
+                                    {pred['score']:.1%}
+                                </span> - {translate_label(pred['label'])}
+                            </div>
+                        """, unsafe_allow_html=True)
+        else:
+            st.info("Bitte laden Sie ein Röntgenbild hoch (JPEG, PNG)")
+
+    # Script pour la synchronisation du thème
+    st.markdown("""
+        <script>
+            function updateTheme(isDark) {
+                document.documentElement.setAttribute('data-theme', isDark ? 'dark' : 'light');
+            }
+            
+            window.addEventListener('message', function(e) {
+                if (e.data.type === 'theme-change') {
+                    updateTheme(e.data.theme === 'dark');
+                }
+            });
             
-            for idx, uploaded_file in enumerate(uploaded_files):
-                image = Image.open(uploaded_file)
-                
-                # Analyse avec KnochenAuge
-                predictions = models["KnochenAuge"](image)
-                fractures_found = any(p['label'].lower() == 'fracture' and p['score'] > 0.6 for p in predictions)
-                
-                if fractures_found:
-                    with cols[idx % 2]:
-                        # Créer une copie de l'image pour le dessin
-                        result_image = image.copy()
-                        result_image = draw_boxes(result_image, predictions)
-                        st.image(result_image, use_column_width=True)
-                        
-                        # Analyses supplémentaires
-                        pred_wachter = models["KnochenWächter"](image)[0]
-                        pred_meister = models["RöntgenMeister"](image)[0]
-                        
-                        if pred_wachter['score'] > 0.6 or pred_meister['score'] > 0.6:
-                            st.markdown(
-                                f"""
-                                <div style='background-color: #1F2937; color: white; padding: 1rem; border-radius: 0.375rem;'>
-                                    <div style='margin-bottom: 0.5rem;'>
-                                        <span style='color: #60A5FA;'>KnochenWächter:</span> {pred_wachter['score']:.1%}
-                                    </div>
-                                    <div>
-                                        <span style='color: #60A5FA;'>RöntgenMeister:</span> {pred_meister['score']:.1%}
-                                    </div>
-                                </div>
-                                """,
-                                unsafe_allow_html=True
-                            )
+            updateTheme(window.matchMedia('(prefers-color-scheme: dark)').matches);
+        </script>
+    """, unsafe_allow_html=True)
 
 if __name__ == "__main__":
     main()