Update app.py

app.py

@@ -4,23 +4,154 @@ from PIL import Image, ImageDraw
 import numpy as np
 
 # Configuration de la page
-if 'page_config' not in st.session_state:
-    st.set_page_config(
-        page_title="Fraktur Detektion",
-        layout="wide",
-        initial_sidebar_state="collapsed",
-        menu_items=None
-    )
-    st.session_state.page_config = True
+st.set_page_config(
+    page_title="Fraktur Detektion",
+    layout="wide",
+    initial_sidebar_state="collapsed"
+)
 
-@st.cache_resource
-def load_models():
-    return {
-        "KnochenAuge": pipeline("object-detection", model="D3STRON/bone-fracture-detr"),
-        "KnochenWächter": pipeline("image-classification", model="Heem2/bone-fracture-detection-using-xray"),
-        "RöntgenMeister": pipeline("image-classification", 
-            model="nandodeomkar/autotrain-fracture-detection-using-google-vit-base-patch-16-54382127388")
+# Détection de Microsoft Edge et styles
+st.markdown("""
+<script>
+    function detectEdge() {
+        if (navigator.userAgent.indexOf("Edge") > -1) {
+            document.body.innerHTML += `
+                <div style="position: fixed; top: 10px; left: 50%; transform: translateX(-50%); 
+                     background: #ffeb3b; padding: 10px; border-radius: 5px; z-index: 9999;
+                     box-shadow: 0 2px 4px rgba(0,0,0,0.2);">
+                    ⚠️ Für die beste Erfahrung verwenden Sie bitte Chrome, Firefox oder Safari.
+                </div>`;
+        }
+    }
+    window.addEventListener('load', detectEdge);
+</script>
+
+<style>
+    .stApp {
+        background: #f0f2f5 !important;
+    }
+    
+    .block-container {
+        padding-top: 1rem !important;
+        padding-bottom: 1rem !important;
+        max-width: 1400px !important;
+    }
+    
+    .upload-container {
+        background: white;
+        padding: 1.5rem;
+        border-radius: 10px;
+        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        margin-bottom: 1rem;
+        text-align: center;
+    }
+    
+    .results-container {
+        background: white;
+        padding: 1.5rem;
+        border-radius: 10px;
+        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    }
+    
+    .result-box {
+        background: #f8f9fa;
+        padding: 0.75rem;
+        border-radius: 8px;
+        margin: 0.5rem 0;
+        border: 1px solid #e9ecef;
+    }
+    
+    h1, h2, h3, h4, p {
+        color: #1a1a1a !important;
+        margin: 0.5rem 0 !important;
+    }
+    
+    .stImage {
+        background: white;
+        padding: 0.5rem;
+        border-radius: 8px;
+        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+    }
+    
+    .stImage > img {
+        max-height: 300px !important;
+        width: auto !important;
+        margin: 0 auto !important;
+        display: block !important;
+    }
+    
+    [data-testid="stFileUploader"] {
+        width: 100% !important;
+    }
+    
+    .stFileUploaderFileName {
+        color: #1a1a1a !important;
     }
+    
+    .stButton > button {
+        width: 200px;
+        background-color: #f8f9fa !important;
+        color: #1a1a1a !important;
+        border: 1px solid #e9ecef !important;
+        padding: 0.5rem 1rem !important;
+        border-radius: 5px !important;
+        transition: all 0.3s ease !important;
+    }
+    
+    .stButton > button:hover {
+        background-color: #e9ecef !important;
+        transform: translateY(-1px);
+    }
+    
+    #MainMenu, footer, header {
+        display: none !important;
+    }
+    
+    /* Fix pour Edge */
+    iframe {
+        visibility: visible !important;
+        display: block !important;
+    }
+    
+    /* Cache les erreurs de connexion */
+    .streamlit-expanderContent {
+        display: none !important;
+    }
+    
+    .element-container:has(>.stAlert) {
+        display: none !important;
+    }
+
+    /* Animation de chargement personnalisée */
+    .loading {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 1rem;
+        background: rgba(255,255,255,0.9);
+        border-radius: 8px;
+        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        margin: 1rem 0;
+    }
+
+    .loading-text {
+        color: #1a1a1a;
+        font-weight: 500;
+        margin-left: 0.5rem;
+    }
+</style>
+""", unsafe_allow_html=True)
+
+# Fonction de chargement des modèles avec cache
+@st.cache_resource(show_spinner=True)
+def load_models():
+    with st.spinner('Modelle werden geladen...'):
+        return {
+            "KnochenAuge": pipeline("object-detection", model="D3STRON/bone-fracture-detr"),
+            "KnochenWächter": pipeline("image-classification", model="Heem2/bone-fracture-detection-using-xray"),
+            "RöntgenMeister": pipeline("image-classification", 
+                model="nandodeomkar/autotrain-fracture-detection-using-google-vit-base-patch-16-54382127388")
+        }
 
 def translate_label(label):
     translations = {
@@ -81,38 +212,31 @@ def draw_boxes(image, predictions):
     return result_image
 
 def main():
-    st.markdown("""
-        <style>
-            .stApp {background: #f0f2f5}
-            div[data-testid="stToolbar"] {display: none}
-            #MainMenu {visibility: hidden}
-            footer {visibility: hidden}
-            header {visibility: hidden}
-            .result-box {
-                background: #f8f9fa;
-                padding: 0.75rem;
-                border-radius: 8px;
-                margin: 0.5rem 0;
-                border: 1px solid #e9ecef;
-            }
-        </style>
-    """, unsafe_allow_html=True)
-    
     try:
-        models = load_models()
+        # Initialisation des modèles avec indicateur de chargement
+        st.markdown("""
+            <div class="loading">
+                <div class="loading-text">Anwendung wird initialisiert...</div>
+            </div>
+        """, unsafe_allow_html=True)
         
-        st.write("### 📤 Röntgenbild hochladen")
-        uploaded_file = st.file_uploader("Bild auswählen", type=['png', 'jpg', 'jpeg'], label_visibility="collapsed")
+        models = load_models()
         
-        col1, col2 = st.columns([2, 1])
-        with col1:
-            conf_threshold = st.slider(
-                "Konfidenzschwelle",
-                min_value=0.0, max_value=1.0,
-                value=0.60, step=0.05
-            )
-        with col2:
-            analyze_button = st.button("Analysieren")
+        # Interface principale
+        with st.container():
+            st.write("### 📤 Röntgenbild hochladen")
+            uploaded_file = st.file_uploader("Bild auswählen", type=['png', 'jpg', 'jpeg'], label_visibility="collapsed")
+            
+            col1, col2 = st.columns([2, 1])
+            with col1:
+                conf_threshold = st.slider(
+                    "Konfidenzschwelle",
+                    min_value=0.0, max_value=1.0,
+                    value=0.60, step=0.05,
+                    label_visibility="visible"
+                )
+            with col2:
+                analyze_button = st.button("Analysieren")
 
         if uploaded_file and analyze_button:
             with st.spinner("Bild wird analysiert..."):