Update app.py

app.py

@@ -1,3 +1,4 @@
+# app.py
 import streamlit as st
 from transformers import pipeline
 from PIL import Image, ImageDraw
@@ -5,115 +6,98 @@ import torch
 
 # Configuration de la page
 st.set_page_config(
-    page_title="Knochenbrucherkennung",
+    page_title="Fraktur Detektion",
     layout="wide",
     initial_sidebar_state="collapsed"
 )
 
-# CSS amélioré pour une meilleure intégration
+# CSS optimisé
 st.markdown("""
 <style>
-    /* Reset et base */
+    /* Réinitialisation complète */
     .stApp {
-        background-color: transparent !important;
+        background: transparent !important;
         padding: 0 !important;
     }
     
     .block-container {
-        padding: 1rem !important;
+        padding: 0.5rem !important;
         max-width: 100% !important;
     }
     
-    /* En-tête compact */
-    h1 {
-        font-size: 1.5rem !important;
-        margin-bottom: 1rem !important;
+    /* Suppression des éléments superflus */
+    #MainMenu, footer, header, .viewerBadge_container__1QSob {
+        display: none !important;
     }
     
-    /* Conteneurs */
-    .main > div {
-        padding: 1rem !important;
-        background: transparent !important;
-        border-radius: 0.5rem !important;
-        box-shadow: none !important;
+    .stDeployButton {
+        display: none !important;
     }
     
-    /* Upload plus compact */
+    /* Style compact */
     .uploadedFile {
-        border: 1px dashed #ccc;
+        border: 1px dashed var(--border-color);
         border-radius: 0.5rem;
         padding: 0.5rem;
-        background: rgba(255, 255, 255, 0.05);
     }
     
-    /* Tabs style */
-    .stTabs [data-baseweb="tab-list"] {
-        gap: 1rem;
-        background-color: transparent;
+    .st-emotion-cache-1kyxreq {
+        margin-top: -2rem !important;
     }
     
-    .stTabs [data-baseweb="tab"] {
-        padding: 0.5rem 1rem;
-        border-radius: 0.5rem;
-        background: rgba(255, 255, 255, 0.1);
-    }
-    
-    /* Résultats */
+    /* Conteneurs de résultats */
     .result-box {
         padding: 0.5rem;
         border-radius: 0.375rem;
         margin: 0.25rem 0;
-        background: rgba(255, 255, 255, 0.05);
-        border: 1px solid rgba(255, 255, 255, 0.1);
+        border: 1px solid var(--border-color);
+        background: var(--background-color);
     }
     
-    /* Images */
-    .stImage img {
-        max-height: 300px !important;
-        width: auto !important;
-        border-radius: 0.375rem;
-        margin: 0 auto;
+    /* Tabs plus compacts */
+    .stTabs [data-baseweb="tab-list"] {
+        gap: 0.5rem;
     }
     
-    /* Spinner plus petit */
-    .stSpinner > div {
-        height: 2rem !important;
-        width: 2rem !important;
+    .stTabs [data-baseweb="tab"] {
+        padding: 0.25rem 0.5rem;
+        font-size: 0.875rem;
     }
     
-    /* Cacher éléments Streamlit */
-    #MainMenu {display: none;}
-    footer {display: none;}
-    header {display: none;}
+    /* Variables CSS pour le thème */
+    :root[data-theme="light"] {
+        --background-color: rgba(249, 250, 251, 0.8);
+        --border-color: #e5e7eb;
+        --text-color: #1f2937;
+    }
     
-    /* Dark mode support */
-    @media (prefers-color-scheme: dark) {
-        .main > div {
-            background: rgba(0, 0, 0, 0.2) !important;
-        }
-        
-        .uploadedFile {
-            border-color: #4a5568;
-            background: rgba(255, 255, 255, 0.05);
-        }
-        
-        .stTabs [data-baseweb="tab"] {
-            background: rgba(255, 255, 255, 0.05);
-        }
-        
-        .result-box {
-            background: rgba(255, 255, 255, 0.05);
-            border-color: rgba(255, 255, 255, 0.2);
-        }
+    :root[data-theme="dark"] {
+        --background-color: rgba(17, 24, 39, 0.8);
+        --border-color: #374151;
+        --text-color: #e5e7eb;
     }
     
-    /* Expander plus compact */
-    .streamlit-expanderHeader {
-        padding: 0.5rem !important;
-        background: rgba(255, 255, 255, 0.05) !important;
-        border-radius: 0.375rem !important;
+    /* Ajustements responsifs */
+    @media (max-width: 768px) {
+        .block-container {
+            padding: 0.25rem !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
@@ -139,9 +123,7 @@ def draw_boxes(image, predictions):
     for pred in predictions:
         box = pred['box']
         label = f"{translate_label(pred['label'])} ({pred['score']:.2%})"
-        
-        # Box avec couleur basée sur le score
-        color = "#FF6B6B" if pred['score'] > 0.7 else "#FFA500"
+        color = "#2563eb" if pred['score'] > 0.7 else "#eab308"
         
         draw.rectangle(
             [(box['xmin'], box['ymin']), (box['xmax'], box['ymax'])],
@@ -149,101 +131,79 @@ def draw_boxes(image, predictions):
             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():
-    st.markdown("<h1>🦴 KI-Fraktur Detektion</h1>", unsafe_allow_html=True)
-    
     models = load_models()
     
-    # Settings dans un expander compact
-    with st.expander("⚙️ Einstellungen", expanded=False):
-        conf_threshold = st.slider(
-            "Konfidenzschwelle",
-            min_value=0.0,
-            max_value=1.0,
-            value=0.60,
-            step=0.05
-        )
+    # Contrôle de confiance simplifié
+    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)"
+    )
     
-    # Upload plus compact
+    # Upload plus propre
     uploaded_file = st.file_uploader(
         "",
         type=['png', 'jpg', 'jpeg'],
-        help="Unterstützte Formate: JPEG, PNG | Max: 5MB"
+        key="xray_upload"
     )
 
     if uploaded_file:
-        # Layout en colonnes
         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, caption="Originalbild", use_column_width=True)
+            st.image(image, use_container_width=True)
 
         with col2:
             tab1, tab2 = st.tabs(["📊 Klassifizierung", "🔍 Lokalisierung"])
             
             with tab1:
                 for name in ["Heem2", "Nandodeomkar"]:
-                    predictions = models[name](image)
-                    for pred in predictions:
-                        if pred['score'] >= conf_threshold:
-                            score_color = "green" if pred['score'] > 0.7 else "orange"
+                    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)
+
+            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'>
-                                    <span style='color: {score_color}; font-weight: bold;'>
-                                        {pred['score']:.1%}
-                                    </span> - {translate_label(pred['label'])}
+                                    {translate_label(pred['label'])}: {pred['score']:.1%}
                                 </div>
                             """, unsafe_allow_html=True)
-
-            with tab2:
-                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_column_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("Keine Erkennungen über dem Schwellenwert")
     else:
-        # Message d'instruction
-        st.markdown("""
-            <div style='padding: 1rem; background: rgba(59, 130, 246, 0.1); border-radius: 0.5rem;'>
-                <h4 style='margin: 0 0 0.5rem 0; font-size: 1rem;'>📤 Röntgenbild hochladen</h4>
-                <ul style='margin: 0; padding-left: 1rem; font-size: 0.875rem;'>
-                    <li>Unterstützte Formate: JPEG, PNG</li>
-                    <li>Maximale Größe: 5 MB</li>
-                    <li>Optimale Auflösung: 512x512 Pixel</li>
-                </ul>
-            </div>
-        """, unsafe_allow_html=True)
-
-# Script pour gérer le thème
-st.markdown("""
-<script>
-window.addEventListener('message', function(e) {
-    if (e.data.type === 'theme-change') {
-        document.body.classList.toggle('dark', e.data.theme === 'dark');
-    }
-});
-</script>
-""", unsafe_allow_html=True)
+        st.info("Röntgenbild hochladen (JPEG, PNG, max. 5MB)")
 
 if __name__ == "__main__":
     main()