Update app.py

app.py

@@ -1,10 +1,9 @@
-# app.py
 import streamlit as st
 from transformers import pipeline
 from PIL import Image, ImageDraw
 import torch
 
-# Configuration de la page
+# Configuration page
 st.set_page_config(
     page_title="Fraktur Detektion",
     layout="wide",
@@ -14,98 +13,98 @@ st.set_page_config(
 # CSS optimisé
 st.markdown("""
 <style>
-    /* Réinitialisation complète */
+    /* Reset complet */
     .stApp {
-        background: transparent !important;
+        background-color: var(--background-color) !important;
         padding: 0 !important;
+        max-height: 600px !important;
+        overflow: hidden !important;
     }
     
+    /* Variables de thème */
+    [data-theme="light"] {
+        --background-color: #ffffff;
+        --text-color: #1f2937;
+        --border-color: #e5e7eb;
+        --secondary-bg: #f3f4f6;
+    }
+    
+    [data-theme="dark"] {
+        --background-color: #1f2937;
+        --text-color: #f3f4f6;
+        --border-color: #4b5563;
+        --secondary-bg: #374151;
+    }
+    
+    /* Conteneur principal */
     .block-container {
         padding: 0.5rem !important;
         max-width: 100% !important;
     }
     
-    /* Suppression des éléments superflus */
-    #MainMenu, footer, header, .viewerBadge_container__1QSob {
-        display: none !important;
+    /* Upload et contrôles */
+    .uploadedFile {
+        border: 1px dashed var(--border-color);
+        border-radius: 0.375rem;
+        padding: 0.25rem;
+        background: var(--secondary-bg);
     }
     
-    .stDeployButton {
-        display: none !important;
+    /* Images plus petites */
+    .stImage > img {
+        max-width: 250px !important;
+        max-height: 250px !important;
+        margin: 0 auto !important;
     }
     
-    /* Style compact */
-    .uploadedFile {
-        border: 1px dashed var(--border-color);
-        border-radius: 0.5rem;
-        padding: 0.5rem;
+    /* Tabs compacts */
+    .stTabs [data-baseweb="tab-list"] {
+        gap: 0.25rem;
+        background: transparent;
     }
     
-    .st-emotion-cache-1kyxreq {
-        margin-top: -2rem !important;
+    .stTabs [data-baseweb="tab"] {
+        padding: 0.25rem 0.5rem;
+        background: var(--secondary-bg);
+        border-radius: 0.375rem;
     }
     
-    /* Conteneurs de résultats */
+    /* Résultats */
     .result-box {
-        padding: 0.5rem;
+        padding: 0.375rem;
         border-radius: 0.375rem;
         margin: 0.25rem 0;
+        background: var(--secondary-bg);
         border: 1px solid var(--border-color);
-        background: var(--background-color);
-    }
-    
-    /* Tabs plus compacts */
-    .stTabs [data-baseweb="tab-list"] {
-        gap: 0.5rem;
+        color: var(--text-color);
     }
     
-    .stTabs [data-baseweb="tab"] {
-        padding: 0.25rem 0.5rem;
-        font-size: 0.875rem;
+    /* Cacher éléments inutiles */
+    #MainMenu, footer, header, .viewerBadge_container__1QSob, .stDeployButton {
+        display: none !important;
     }
     
-    /* Variables CSS pour le thème */
-    :root[data-theme="light"] {
-        --background-color: rgba(249, 250, 251, 0.8);
-        --border-color: #e5e7eb;
-        --text-color: #1f2937;
+    div[data-testid="stVerticalBlock"] {
+        gap: 0.5rem !important;
     }
     
-    :root[data-theme="dark"] {
-        --background-color: rgba(17, 24, 39, 0.8);
-        --border-color: #374151;
-        --text-color: #e5e7eb;
+    /* Ajustements espacement */
+    .st-emotion-cache-1kyxreq {
+        margin-top: -1rem !important;
     }
     
-    /* Ajustements responsifs */
-    @media (max-width: 768px) {
-        .block-container {
-            padding: 0.25rem !important;
-        }
+    .st-emotion-cache-1wmy9hl {
+        padding: 0 !important;
     }
 </style>
-<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');
-    }
-});
-
-// Thème initial basé sur les préférences système
-updateTheme(window.matchMedia('(prefers-color-scheme: dark)').matches);
-</script>
 """, unsafe_allow_html=True)
 
 @st.cache_resource
 def load_models():
     return {
-        "D3STRON": pipeline("object-detection", model="D3STRON/bone-fracture-detr"),
-        "Heem2": pipeline("image-classification", model="Heem2/bone-fracture-detection-using-xray"),
-        "Nandodeomkar": pipeline("image-classification", 
+        "KnochenAuge": pipeline("object-detection", model="D3STRON/bone-fracture-detr"),  # L'œil des os
+        "KnochenWächter": pipeline("image-classification", model="Heem2/bone-fracture-detection-using-xray"),  # Le gardien des os
+        "RöntgenMeister": pipeline("image-classification",  # Le maître des rayons X
             model="nandodeomkar/autotrain-fracture-detection-using-google-vit-base-patch-16-54382127388")
     }
 
@@ -114,7 +113,7 @@ def translate_label(label):
         "fracture": "Knochenbruch",
         "no fracture": "Kein Bruch",
         "normal": "Normal",
-        "abnormal": "Abnormal"
+        "abnormal": "Auffällig"
     }
     return translations.get(label.lower(), label)
 
@@ -134,76 +133,85 @@ def draw_boxes(image, predictions):
         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():
     models = load_models()
     
-    # Contrôle de confiance simplifié
+    # Contrôle de confiance compact
     conf_threshold = st.slider(
         "Konfidenzschwelle",
-        min_value=0.0,
-        max_value=1.0,
-        value=0.60,
-        step=0.05,
-        help="Schwellenwert für die Erkennung (0-1)"
+        min_value=0.0, max_value=1.0,
+        value=0.60, step=0.05
     )
     
     # Upload plus propre
-    uploaded_file = st.file_uploader(
-        "",
-        type=['png', 'jpg', 'jpeg'],
-        key="xray_upload"
-    )
+    uploaded_file = st.file_uploader("", type=['png', 'jpg', 'jpeg'])
 
     if uploaded_file:
-        col1, col2 = st.columns([1, 1])
-        
-        with col1:
-            image = Image.open(uploaded_file)
-            max_size = (300, 300)
-            image.thumbnail(max_size, Image.Resampling.LANCZOS)
-            st.image(image, use_container_width=True)
+        image = Image.open(uploaded_file)
+        max_size = (250, 250)  # Taille réduite
+        image.thumbnail(max_size, Image.Resampling.LANCZOS)
 
-        with col2:
-            tab1, tab2 = st.tabs(["📊 Klassifizierung", "🔍 Lokalisierung"])
+        tab1, tab2 = st.tabs(["📊 KI-Analyse", "🔍 Lokalisierung"])
+        
+        with tab1:
+            # Afficher l'image originale seulement dans l'onglet Analyse
+            st.image(image, use_container_width=False)
             
-            with tab1:
-                for name in ["Heem2", "Nandodeomkar"]:
-                    with st.spinner("Analyse..."):
-                        predictions = models[name](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)
+            model_names = {
+                "KnochenWächter": "🛡️ Der KnochenWächter",
+                "RöntgenMeister": "🎓 Der RöntgenMeister"
+            }
+            
+            for model_key, display_name in model_names.items():
+                st.markdown(f"<div style='font-weight:500; margin-top:0.5rem;'>{display_name}</div>", unsafe_allow_html=True)
+                predictions = models[model_key](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 tab2:
+            # Dans l'onglet Lokalisierung, montrer directement l'image avec les boîtes
+            with st.spinner("Analyse läuft..."):
+                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.markdown("### 👁️ Das KnochenAuge")
+                    st.image(result_image, use_container_width=False)
+                else:
+                    st.info("Keine Auffälligkeiten erkannt")
 
-            with tab2:
-                with st.spinner("Lokalisierung..."):
-                    predictions = models["D3STRON"](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)
-                        
-                        for pred in filtered_preds:
-                            st.markdown(f"""
-                                <div class='result-box'>
-                                    {translate_label(pred['label'])}: {pred['score']:.1%}
-                                </div>
-                            """, unsafe_allow_html=True)
-                    else:
-                        st.info("Keine Erkennungen über dem Schwellenwert")
     else:
-        st.info("Röntgenbild hochladen (JPEG, PNG, max. 5MB)")
+        st.info("Röntgenbild hochladen (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');
+                }
+            });
+            
+            // Thème initial
+            updateTheme(window.matchMedia('(prefers-color-scheme: dark)').matches);
+        </script>
+    """, unsafe_allow_html=True)
 
 if __name__ == "__main__":
     main()