Update app.py

app.py

@@ -3,6 +3,42 @@ from transformers import pipeline
 from PIL import Image, ImageDraw
 import numpy as np
 
+# Configuration WebSocket pour Edge
+st.markdown("""
+<script>
+if (navigator.userAgent.indexOf("Edge") > -1) {
+    // Désactiver complètement les WebSockets sur Edge
+    window.WebSocket = function() {
+        return {
+            send: function() {},
+            close: function() {},
+            addEventListener: function() {}
+        };
+    };
+    
+    // Notification pour les utilisateurs Edge
+    document.addEventListener('DOMContentLoaded', function() {
+        const notice = document.createElement('div');
+        notice.style.cssText = `
+            position: fixed;
+            top: 10px;
+            left: 50%;
+            transform: translateX(-50%);
+            background: #ffeb3b;
+            padding: 10px 20px;
+            border-radius: 5px;
+            z-index: 9999;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+            text-align: center;
+            font-weight: 500;
+        `;
+        notice.innerHTML = '⚠️ Für die beste Erfahrung verwenden Sie bitte Chrome, Firefox oder Safari.';
+        document.body.appendChild(notice);
+    });
+}
+</script>
+""", unsafe_allow_html=True)
+
 # Configuration de la page
 st.set_page_config(
     page_title="Fraktur Detektion",
@@ -10,22 +46,8 @@ st.set_page_config(
     initial_sidebar_state="collapsed"
 )
 
-# Détection de Microsoft Edge et styles
+# 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;
@@ -122,36 +144,23 @@ st.markdown("""
         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;
+    /* Loading spinner */
+    .stSpinner {
+        text-align: center;
+        max-width: 50%;
+        margin: 0 auto;
     }
 </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")
-        }
+    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 = {
@@ -213,30 +222,27 @@ def draw_boxes(image, predictions):
 
 def main():
     try:
-        # 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)
+        with st.spinner("Modelle werden geladen..."):
+            models = load_models()
         
-        models = load_models()
+        st.write("### 📤 Röntgenbild hochladen")
+        uploaded_file = st.file_uploader(
+            "Bild auswählen",
+            type=['png', 'jpg', 'jpeg'],
+            label_visibility="collapsed"
+        )
         
-        # 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")
+        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", use_container_width=True)
 
         if uploaded_file and analyze_button:
             with st.spinner("Bild wird analysiert..."):
@@ -311,6 +317,7 @@ def main():
                         else:
                             st.write("#### 🖼️ Röntgenbild")
                             st.image(image, use_container_width=True)
+
     except Exception as e:
         st.error(f"Ein Fehler ist aufgetreten: {str(e)}")